/* venir.html : le mur de l'entrée, à l'heure qu'il est. En haut, l'enseigne (en 3D ; en HTML sans 3D, à la même place).
   Dessous, une tringle de laiton sur toute la largeur, et ce qu'il faut pour venir, pendu à des ficelles :
   l'ardoise de la porte (la craie : ouvert ou fermé), le carton de l'adresse et ses itinéraires, la plaque émaillée des horaires,
   le carton du contact, le tirage de la devanture, l'étiquette de la cabine. Sur téléphone, chaque objet a sa tringle. */

html.page-venir .page-scene {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  padding: var(--entete) var(--gouttiere) 3vh;
}

/* l'enseigne : sans 3D on la lit ; en 3D, elle garde sa place et les lettres de la scène s'y posent */
.venir-enseigne {
  align-self: center;
  margin: 2.2vh 0 0;
  font: 800 clamp(3.2rem, 7.9vw, 9.2rem)/1.04 var(--f-enseigne);
  letter-spacing: -.01em;
  color: var(--dore); white-space: nowrap; text-align: center;
  transform: scaleX(.86);
}
.venir-enseigne b { font-weight: 900; color: var(--texte); }
html:not(.statique) .venir-enseigne { visibility: hidden; }

/* ------------------------------------------------------------ la tringle de laiton et ce qui y pend */
.venir-tringle {
  --ficelle: #2b2722;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .7fr); column-gap: clamp(1.3rem, 2.7vw, 3.1rem); align-items: start;
  margin-top: 3.2vh; padding-top: 6px;
}
html.nuit .venir-tringle { --ficelle: #e8dcc4; }
.venir-tringle::before, .colonne::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px;
  background: linear-gradient(#f3dca0, var(--or) 45%, var(--or-fonce)); box-shadow: 0 3px 7px rgb(30 20 10 / .32);
}
/* ses deux embouts, et les platines qui la tiennent au mur */
.venir-tringle::after, .colonne::after {
  content: ''; position: absolute; top: -3px; left: -5px; right: -5px; height: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, var(--or-clair) 0 4px, var(--or-fonce) 5.4px, #0000 6px) left / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, var(--or-clair) 0 4px, var(--or-fonce) 5.4px, #0000 6px) right / 12px 12px no-repeat;
}
.colonne { position: relative; display: grid; justify-items: start; align-content: start; min-width: 0; filter: drop-shadow(0 7px 11px rgb(30 20 10 / .24)); }
html.nuit .colonne { filter: drop-shadow(0 7px 12px rgb(0 0 0 / .5)); }
.colonne::before, .colonne::after { display: none; }   /* sur ordinateur, une seule tringle pour tous */

/* chaque objet pend à deux ficelles ; le premier de sa colonne, à la tringle (--chute), le suivant, à celui du dessus (--lien) */
.objet { --chute: 2.2rem; --lien: 1.6rem; position: relative; margin-top: var(--chute); }
.objet + .objet { margin-top: var(--lien); }
.objet::before, .objet::after {
  content: ''; position: absolute; bottom: 100%; width: 1.5px; height: var(--chute); background: var(--ficelle); pointer-events: none;
}
.objet + .objet::before, .objet + .objet::after { height: var(--lien); }
.objet::before { left: 13%; }
.objet::after { right: 13%; }
.colonne--ardoise .objet { --chute: 1.3rem; }
.colonne--adresse .objet { --chute: 2.7rem; }
.colonne--horaires .objet { --chute: 1.8rem; }
.colonne--devanture .objet { --chute: 3.3rem; }

/* l'ardoise : la craie est dessinée au canvas (venir.js), les ficelles tombent sur ses deux anneaux de laiton */
.ardoise { width: 100%; aspect-ratio: 1000 / 620; perspective: 900px; }
.ardoise canvas { display: block; width: 100%; height: 100%; transform-origin: 50% 0; }
.ardoise::before { left: 14%; height: calc(var(--chute) + 3.4%); bottom: auto; top: calc(-1 * var(--chute)); }
.ardoise::after { right: 14%; height: calc(var(--chute) + 3.4%); bottom: auto; top: calc(-1 * var(--chute)); }

/* le carton ivoire : deux œillets dorés, les ficelles y passent (le trou laisse voir le mur) */
.carton {
  --oeillet-y: 1.05rem;
  width: 100%;
  padding: 2.15rem clamp(1rem, 1.5vw, 1.45rem) 1.2rem;
  background:
    radial-gradient(circle at 13% var(--oeillet-y), rgb(var(--voile)) 0 3.9px, var(--or-clair) 4.4px, var(--or) 5.8px, var(--or-fonce) 7px, #0000 7.4px),
    radial-gradient(circle at 87% var(--oeillet-y), rgb(var(--voile)) 0 3.9px, var(--or-clair) 4.4px, var(--or) 5.8px, var(--or-fonce) 7px, #0000 7.4px),
    var(--papier);
  color: var(--noir);
}
.carton::before, .carton::after { height: calc(var(--chute) + var(--oeillet-y)); bottom: auto; top: calc(-1 * var(--chute)); }
.objet + .carton::before, .objet + .carton::after { height: calc(var(--lien) + var(--oeillet-y)); top: calc(-1 * var(--lien)); }
.venir h2 { font: 800 clamp(1.25rem, 1.5vw, 1.5rem)/1.05 var(--f-enseigne); letter-spacing: 0; }
.carton address { margin-top: .55rem; font-style: normal; font-size: 1rem; line-height: 1.45; }
.carton address strong { font: 800 1.08rem/1.3 var(--f-enseigne); }
.venir-parking { margin-top: .6rem; font-weight: 600; font-size: .98rem; }
.venir-itineraire { margin: .95rem 0 0; font: 800 1.08rem/1 var(--f-enseigne); }

/* les itinéraires : trois étiquettes pendues sous le carton de l'adresse */
.venir-cartes { --h: 2.6rem; --fil: 1.05rem; list-style: none; margin: 0 0 0 .4rem; padding: 0; display: flex; flex-wrap: nowrap; gap: 0 .55rem; }
.venir-cartes .etiquette { --h: 2.6rem; font-size: 1rem; padding-right: .85em; padding-left: calc(var(--pointe) + .95em); }
.venir-cartes .fil::before, .venir-cabine .fil::before { background: linear-gradient(var(--ficelle), var(--ficelle) calc(100% - 3px), #0000); }
.venir-cartes .fil:nth-child(2) { --fil: 1.6rem; }
.venir-cartes .fil:nth-child(3) { --fil: 1.25rem; }

/* la plaque émaillée des horaires : blanc cassé, filet bleu canard, coins arrondis, deux vis */
.plaque {
  width: 100%;
  padding: 1.55rem 1.3rem 1.35rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 1.05rem, #7d7d79 0 2px, #b9b9b4 2.5px 5px, #0000 5.5px),
    radial-gradient(circle at 90% 1.05rem, #7d7d79 0 2px, #b9b9b4 2.5px 5px, #0000 5.5px),
    linear-gradient(125deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 42%, rgb(0 0 0 / .05)),
    #f7f5ef;
  box-shadow: inset 0 0 0 6px var(--canard), inset 0 0 0 10px #f7f5ef, inset 0 0 0 12.5px var(--canard);
  color: var(--canard);
  text-align: center;
}
.plaque::before { left: 10%; }
.plaque::after { right: 10%; }
.plaque h2 { color: var(--canard); font-size: 1.05rem; }
.plaque p { margin-top: .4rem; font: 700 clamp(1.1rem, 1.3vw, 1.3rem)/1.2 var(--f-enseigne); color: #0f4c55; }
.plaque-heures { display: inline-block; margin: .1rem 0 .05rem; font: 800 clamp(1.5rem, 2vw, 2.05rem)/1.05 var(--f-enseigne); white-space: nowrap; }
.plaque-sans { font: 600 .95rem/1.3 var(--f-texte); color: var(--canard); }

.carton--contact p { margin-top: .5rem; font-size: 1rem; }
.carton--contact a { text-underline-offset: .2em; text-decoration-color: var(--or); }
.carton--contact a:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 3px; }
.venir-tel { margin-top: .85rem !important; }
.venir-tel .etiquette { --h: 2.85rem; font-size: 1.12rem; letter-spacing: .02em; text-decoration: none; }
.carton--contact .reseaux { margin-top: .75rem; gap: .45rem 1.4rem; }

/* la devanture : un vrai tirage à bord blanc, pendu à une pince de laiton */
.tirage { width: 100%; margin: var(--chute) 0 0; padding: .5rem .5rem 1rem; background: var(--blanc); rotate: 1.4deg; transform-origin: 50% 0; }
.tirage img { width: 100%; aspect-ratio: 760 / 945; object-fit: cover; }
.tirage::before { left: calc(50% - .75px); height: calc(var(--chute) + .3rem); bottom: auto; top: calc(-1 * var(--chute)); }
.tirage::after { right: auto; left: 50%; bottom: auto; top: -.45rem; width: 1.5rem; height: .95rem; translate: -50% 0; border-radius: 3px; background: linear-gradient(#f3dca0, var(--or) 50%, var(--or-fonce)); box-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.venir-cabine { --h: 3.1rem; --fil: 1.5rem; max-width: 100%; margin: 0 0 0 .7rem; }
.venir-cabine .etiquette { font-size: 1.06rem; white-space: normal; line-height: 1.12; }

/* ------------------------------------------------------------ sans 3D : l'enseigne en HTML, à la même place */
html.statique.page-venir .page-scene { min-height: 0; padding-top: calc(var(--entete) + 1rem); }

/* ------------------------------------------------------------ entre téléphone et grand écran : deux colonnes, une tringle par rangée */
@media (max-width: 1179px) {
  .venir-tringle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; padding-top: 0; }
  .venir-tringle::before, .venir-tringle::after { display: none; }
  .colonne { padding-top: 6px; }
  .colonne::before, .colonne::after { display: block; }
}

/* ------------------------------------------------------------ téléphone : les objets les uns sous les autres, chacun sur sa tringle */
@media (max-width: 760px) {
  /* le mur de la scène s'arrête sous l'ardoise : plus bas, le parquet passerait derrière les cartons. La page continue sur le mur peint */
  html.page-venir #boutique { -webkit-mask: linear-gradient(#000 0 56%, #0000 74%); mask: linear-gradient(#000 0 56%, #0000 74%); }
  html.page-venir .page-scene { padding-bottom: 2.4rem; }
  .venir-enseigne { margin-top: 1.2vh; white-space: normal; text-wrap: balance; font-size: clamp(3rem, 15.5vw, 4.4rem); line-height: .98; transform: none; }
  .venir-tringle { grid-template-columns: 1fr; row-gap: 2.2rem; margin-top: 2vh; }
  .colonne--ardoise .objet { --chute: 1.1rem; }
  .colonne--adresse .objet, .colonne--horaires .objet { --chute: 1.5rem; }
  .colonne--devanture { justify-items: center; }
  .colonne--devanture .objet { --chute: 1.8rem; }
  .tirage { width: min(15rem, 72%); }
  .venir-cabine { margin: 0; }
  .venir-cartes { margin-left: .3rem; }
}