/* Le Visé — café de quartier, rue Grétry 99, Liège (Longdoz). « La vitrine du Visé à la tombée du jour »
   Ordre : reset → tokens → base → layout → composants → utilitaires → media. Ni vh, ni fixed/sticky (iframe). */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --nuit: #17110D;
  --nuit-2: #2A1D15;
  --acajou: #4B2217;
  --laiton: #C9A45C;
  --laiton-clair: #E2C98F;
  --ambre: #D98A2B;
  --ambre-clair: #E39A42;
  --ambre-fonce: #A8641A;
  --ombre-enseigne: #7E3320;
  --rouge-enseigne: #C0392B; /* rouge du bandeau réel en façade : accent rare (marque, filets, arrivée) */
  --creme: #F4EBDC;
  --creme-2: #EBDFCB;
  --encre: #22170F;
  --brun-doux: #6A5646;
  --creme-doux: #CDBFA8;
  --ligne: #D9CBB3;
  --ligne-sombre: rgb(201 164 92 / 0.28);

  /* Typographie */
  --font-display: "Gloock", "Georgia", "Times New Roman", serif;
  --font-texte: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.8542rem + 0.1042vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.0417rem + 0.1042vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.375rem + 1.25vw, 2.375rem);
  --step-4: clamp(2rem, 1.5833rem + 2.0833vw, 3.25rem);
  --step-5: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);
  --step-enseigne-xl: clamp(4.75rem, 0.5rem + 15vw, 13.5rem); /* hero de l'accueil seulement */
  --step-h1-page: clamp(2.75rem, 1.5rem + 4.5vw, 6rem);
  --step-affiche: clamp(10rem, 4rem + 22vw, 24rem); /* le « 99 » de l'accueil */
  --lh-titre: 1.08;
  --lh-texte: 1.6;
  --mesure: 34rem;

  /* Espacement : une seule échelle */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 2.6667rem + 5.5556vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
  --container: 75rem;

  /* Formes */
  --radius: 2px;
  --tap: 2.75rem;
  --duree: 160ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sousbock-hero: clamp(6.5rem, 4rem + 6vw, 11rem);

  /* Mouvement (entrées et apparitions) */
  --entree-duree: 700ms;
  --entree-courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --entree-dy: 16px;
  --cascade: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms; animation-duration: 1ms; animation-iteration-count: 1; scroll-behavior: auto; }
}

/* ---------- Base ---------- */
body { background: var(--creme); color: var(--encre); font: 400 var(--step-0) / var(--lh-texte) var(--font-texte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { overflow-x: clip; }
main:focus { outline: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-titre); letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-size: var(--step-4); max-width: 20ch; }
h3 { font-size: var(--step-2); }
h2[id] { scroll-margin-top: calc(var(--space-9) + var(--space-4)); } /* le libellé au-dessus reste visible */
p, li, dd { text-wrap: pretty; }
sup { position: relative; top: -0.42em; font-size: 0.68em; line-height: 0; vertical-align: baseline; }

a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
::selection { background: var(--laiton-clair); color: var(--nuit); }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--acajou); outline-offset: 3px; border-radius: var(--radius); }
.sombre a:focus-visible, .sombre button:focus-visible, .section--acajou a:focus-visible, .site-footer a:focus-visible { outline-color: var(--laiton-clair); }

.skip-link { position: absolute; left: var(--space-4); top: -6rem; z-index: 50; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-5); background: var(--creme); color: var(--nuit); font-weight: 600; border-radius: var(--radius); transition: top var(--duree) var(--courbe); }
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--creme-2 { background: var(--creme-2); }
.sombre { background: var(--nuit); color: var(--creme); }
.section--acajou { background: var(--acajou); color: var(--creme); }
.grille { display: grid; gap: var(--space-7) var(--gap); }

.tete { margin-bottom: var(--space-7); }
.tete__chapeau, .hero__chapeau, .page-hero__chapeau { max-width: var(--mesure); font-size: var(--step-1); line-height: 1.5; }
.tete__chapeau { margin-top: var(--space-4); color: var(--brun-doux); }
.sombre .tete__chapeau, .section--acajou .tete__chapeau, .hero__chapeau, .page-hero__chapeau { color: var(--creme-doux); }
.texte { max-width: var(--mesure); }
.texte p + p { margin-top: var(--space-4); }
.texte--doux { color: var(--brun-doux); }

/* ---------- Composants ---------- */

/* Libellé de section (un seul traitement) */
.libelle, .fiche dt, .footer__titre { font: 600 var(--step--1) / 1.3 var(--font-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acajou); }
.libelle { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.libelle::before { content: ""; flex: none; width: var(--space-6); height: 2px; background: var(--rouge-enseigne); }
.sombre .libelle, .section--acajou .libelle { color: var(--laiton-clair); }
.section--acajou .libelle::before { height: 1px; background: var(--laiton); }

/* Icônes */
.icone { width: 1.15em; height: 1.15em; flex: none; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius); font: 600 var(--step-0) / 1.2 var(--font-texte); text-decoration: none; text-align: center; transition: var(--duree) var(--courbe); transition-property: background-color, border-color, color; }
.btn--principal { background: var(--ambre); border-color: var(--ambre-fonce); color: var(--nuit); }
.btn--principal:hover { background: var(--ambre-clair); }
.btn--contour { border-color: var(--encre); color: var(--encre); }
.btn--contour:hover { background: var(--creme-2); }
.sombre .btn--contour { border-color: var(--laiton); color: var(--creme); }
.sombre .btn--contour:hover { background: rgb(201 164 92 / 0.14); }
.btn--petit { min-height: var(--tap); padding: 0 var(--space-4); font-size: 1rem; }
.btn .tel { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lien { position: relative; display: inline-flex; justify-self: start; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: 600; color: var(--acajou); text-decoration-color: var(--ambre-fonce); text-underline-offset: 0.3em; }
.lien::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 0.62em); height: 2px; background: var(--ambre-fonce); transform: scaleX(0); transform-origin: left center; transition: transform 200ms var(--courbe); pointer-events: none; }
.lien:has(> .icone)::after { right: calc(1.15em + var(--space-2)); }
.lien:has(> .icone + span:not(.sr-only))::after { left: calc(1.15em + var(--space-2)); right: 0; }
.lien .icone { transition: transform 200ms var(--courbe); }
.lien:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .lien:hover::after { transform: scaleX(1); }
  .nav__lien:hover::after { transform: scaleX(1); } /* ::after n'existe que dès 64em */
}
@media (prefers-reduced-motion: no-preference) {
  .lien:focus-visible .icone:last-of-type { transform: translateX(4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lien:hover .icone:last-of-type { transform: translateX(4px); }
}
.section--acajou .lien { color: var(--laiton-clair); text-decoration-color: var(--laiton); }
.section--acajou .lien::after { background: var(--laiton); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* En-tête */
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--ligne-sombre); }
.header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); min-height: 4.5rem; padding-block: var(--space-3); }
.marque { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin-right: auto; text-decoration: none; color: var(--creme); }
.marque__signe { width: 2.25rem; height: 2.25rem; flex: none; }
.marque__mot { font: 400 1.5rem / 1 var(--font-display); letter-spacing: 0.005em; }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }

.nav { width: 100%; order: 3; }
.nav__liste { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.nav__lien { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--creme-doux); text-decoration: none; font-size: 1rem; border-bottom: 2px solid transparent; }
.nav__lien:hover { color: var(--creme); }
.nav__lien[aria-current="page"] { color: var(--creme); border-bottom-color: var(--laiton); }

.menu-btn { display: none; align-items: center; gap: var(--space-2); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--ligne-sombre); border-radius: var(--radius); color: var(--creme); font-size: 1rem; }
.menu-btn__icone { position: relative; width: 18px; height: 12px; flex: none; }
.menu-btn__icone::before, .menu-btn__icone::after, .menu-btn__icone span { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: var(--duree) var(--courbe); transition-property: transform, opacity, top; }
.menu-btn__icone::before { top: 0; }
.menu-btn__icone span { top: 5px; }
.menu-btn__icone::after { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn__icone::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icone span { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icone::after { top: 5px; transform: rotate(-45deg); }

/* Menu mobile, avec JS : panneau sous l'en-tête (pas de position fixe) */
.js .menu-btn { display: inline-flex; }
.js .nav { position: absolute; left: 0; right: 0; top: 100%; width: auto; display: none; background: var(--nuit-2); border-bottom: 1px solid var(--laiton); box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.6); }
.js .nav.is-open { display: block; }
.js .nav__liste { flex-direction: column; gap: 0; padding: var(--space-2) var(--gutter) var(--space-5); }
.js .nav__lien { display: flex; width: 100%; min-height: 3.5rem; font: 400 var(--step-2) / 1.2 var(--font-display); color: var(--creme); border-bottom: 1px solid var(--ligne-sombre); }
.js .nav__lien[aria-current="page"] { color: var(--laiton-clair); }

/* Enseigne : lettrage de devanture */
.hero h1 { padding-top: calc(var(--step-enseigne-xl) * 0.42); }
.arche { position: absolute; left: 50%; bottom: 100%; width: clamp(7.5rem, 58%, 17rem); height: auto; color: var(--laiton); transform: translate(-50%, 12%); overflow: visible; }
.arche text { font: 600 26px var(--font-texte); letter-spacing: 0.55em; fill: currentColor; text-shadow: none; }
.enseigne, .page-hero h1, .erreur h1, .final__tel { color: var(--laiton); text-shadow: 0.028em 0.036em 0 var(--ombre-enseigne); }
.enseigne { display: inline-block; position: relative; font: 400 var(--step-enseigne-xl) / 0.92 var(--font-display); letter-spacing: -0.01em; }
.enseigne__mot { display: inline-block; }
.filet-laiton { display: block; width: 100%; height: 6px; margin-top: var(--space-5); border-block: 2px solid var(--laiton); }
.h1-suite { display: block; margin-top: var(--space-5); max-width: 17ch; font-size: var(--step-3); line-height: 1.12; }

/* Hero de l'accueil : l'enseigne au-dessus de la vitrine */
.hero { position: relative; }
.hero__bande { row-gap: var(--space-5); padding-block: var(--space-6) var(--space-7); }
.hero__chapeau { text-wrap: balance; }
.hero .actions { margin-top: var(--space-5); }
.hero__infos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--step--1); color: var(--creme-doux); }
.hero__infos li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__infos .icone { color: var(--laiton); }
.hero__visuel { position: relative; }
.hero__photo, .salle__cadre, .bande__cadre { position: relative; overflow: hidden; background: var(--nuit-2); }
.hero__photo { aspect-ratio: 4 / 5; }
.hero__photo img { object-position: 55% 50%; }
.hero .sousbock { position: absolute; right: var(--gutter); bottom: calc(var(--sousbock-hero) * -0.5); width: var(--sousbock-hero); transform: rotate(-9deg); z-index: 2; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.35)); }

/* Photos */
.photo { position: relative; }
.photo__cadre { position: relative; overflow: hidden; background: var(--creme-2); }
.hero__photo img, .photo__cadre img, .salle__cadre img, .bande__cadre img, .rond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo--4-5 .photo__cadre { aspect-ratio: 4 / 5; }
.photo figcaption, .legende, .histoire__bande figcaption { margin-top: var(--space-2); font-size: 13px; line-height: 1.3; color: var(--brun-doux); }
.sombre .photo figcaption, .sombre .legende, .histoire__bande figcaption { color: var(--creme-doux); }

/* Sous-bock typographique */
.sousbock { height: auto; overflow: visible; }
.sb-fond { fill: var(--creme); }
.sb-trait { fill: none; stroke: var(--acajou); stroke-width: 1.2; }
.sb-trait--fin { stroke-width: 0.8; }
.sb-texte { font: 600 12px var(--font-texte); letter-spacing: 0.06em; fill: var(--acajou); }
.sb-centre { font: 400 64px var(--font-display); fill: var(--acajou); }
.sb-centre--mot { font-size: 34px; }
.sb-centre--404 { font-size: 54px; }
.sb-petit { font: 600 9.5px var(--font-texte); letter-spacing: 0.22em; fill: var(--acajou); }

/* Au comptoir : liste des consommations */
.comptoir__grille { align-items: start; }
.consos { margin-top: var(--space-7); border-top: 1px solid var(--ligne); }
.consos > div { display: grid; gap: var(--space-1) var(--space-5); padding-block: var(--space-4); border-bottom: 1px solid var(--ligne); }
.consos dt { font: 400 var(--step-3) / 1.1 var(--font-display); }
.consos dd { color: var(--brun-doux); max-width: 30rem; }
.comptoir__texte .lien { margin-top: var(--space-5); }
.comptoir__texte .note { margin-top: var(--space-5); max-width: 60ch; }
.comptoir { padding-top: max(var(--section-y), calc(var(--sousbock-hero) / 2 + var(--space-6))); }

/* Bande photo pleine largeur (Le quartier) */
.bande__cadre { aspect-ratio: 21 / 9; }
.bande__cadre img { object-position: 50% 55%; }

/* Accueil : la salle et ses quatre moments */
.salle { padding-bottom: var(--section-y); }
.salle__photo { position: relative; }
.salle__cadre { aspect-ratio: 3 / 2; }
.salle__cadre img { object-position: 50% 40%; }
.hero__legende, .salle__photo .legende { position: absolute; bottom: var(--space-3); margin: 0; font-size: 13px; color: var(--creme); text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); }
.hero__legende { left: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.salle__photo .legende { right: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.salle__titre { padding-top: var(--space-7); }
.salle__titre h2 { max-width: 14ch; }
.moments { display: grid; margin-top: var(--space-7); border-top: 1px solid var(--ligne-sombre); }
.moments li { padding-block: var(--space-5); border-bottom: 1px solid var(--ligne-sombre); }
.moments h3 { font-size: var(--step-1); line-height: 1.2; }
.moments p { margin-top: var(--space-2); max-width: 26rem; color: var(--creme-doux); }

/* Accueil : le « 99 » en affiche */
.affiche { font: 400 10rem / 0.8 var(--font-display); color: var(--laiton); text-shadow: 0.028em 0.036em 0 var(--nuit); font-variant-numeric: lining-nums; letter-spacing: -0.01em; }

/* L'enseigne */
.enseigne-bloc__grille { align-items: center; }
.enseigne-bloc .sousbock { width: min(18rem, 72%); margin-inline: auto; transform: rotate(-6deg); filter: drop-shadow(0 16px 22px rgb(0 0 0 / 0.35)); }
.registre { margin-top: var(--space-7); border-top: 1px solid var(--ligne-sombre); }
.registre li { display: grid; grid-template-columns: calc(var(--step-4) * 2.45) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--ligne-sombre); }
.registre__date { font: 400 var(--step-4) / 1 var(--font-display); color: var(--laiton-clair); font-variant-numeric: tabular-nums; }
.enseigne-bloc .lien { margin-top: var(--space-5); }
.registre--long { margin-top: 0; }
.registre--long li { grid-template-columns: 6.5rem minmax(0, 1fr); }
.registre--long .registre__date { font-size: var(--step-2); line-height: 1.1; }

/* Itinéraire à pied */
.route__meta { margin-top: var(--space-2); font-weight: 600; color: var(--acajou); }
.route__etapes { position: relative; margin-top: var(--space-5); }
.route__etapes li { position: relative; padding: 0 0 var(--space-4) var(--space-6); }
.route__etapes li::before { content: ""; position: absolute; z-index: 1; left: 3px; top: 0.45em; width: 12px; height: 12px; border: 2px solid var(--ambre-fonce); border-radius: 50%; background: var(--creme); }
.route__etapes li::after { content: ""; position: absolute; left: 8px; top: calc(0.45em + 12px); bottom: calc(-0.45em - 1px); width: 2px; background: var(--ambre-fonce); }
.route__etapes li:last-child { padding-bottom: 0; }
.route__etapes li:last-child::after { display: none; }
.route__etapes .route__arrivee { font-weight: 600; color: var(--acajou); }
.route__detail { display: block; font-size: var(--step--1); color: var(--brun-doux); }
.section--creme-2 .route__etapes li::before { background: var(--creme-2); }
.route__etapes li.route__arrivee::before { background: var(--rouge-enseigne); border-color: var(--rouge-enseigne); }

/* Plan schématique (bloc « document ») */
.plan { display: none; margin: var(--space-5) 0 0; }
.plan__cadre { background: var(--creme); border: 1px solid var(--encre); border-radius: var(--radius); overflow: hidden; }
.plan__svg { width: 100%; height: auto; }
.plan__fond { fill: var(--creme); }
.plan__rive, .plan__eau, .plan__hach, .plan__trace, .plan__trace2 { fill: none; stroke-linejoin: round; }
.plan__rive { stroke: var(--creme-doux); }
.plan__eau { stroke: var(--creme); }
.plan__hachure { stroke: var(--creme-doux); stroke-width: 2; }
.plan__zone { font: 600 16px var(--font-texte); letter-spacing: 0.16em; fill: var(--brun-doux); }
.plan__eau-nom, .plan__lieu { paint-order: stroke; stroke: var(--creme); stroke-width: 5px; stroke-linejoin: round; }
.plan__eau-nom { font: 600 15px var(--font-texte); letter-spacing: 0.2em; fill: var(--brun-doux); stroke-width: 6px; }
.plan__bloc { fill: var(--creme-2); stroke: var(--encre); stroke-width: 1.2; }
.plan__bloc-nom { font: 600 16px var(--font-texte); letter-spacing: 0.12em; fill: var(--encre); }
.plan__nord path { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan__nord text { font: 600 17px var(--font-texte); fill: var(--encre); }
.plan__trace, .plan__trace2 { stroke-linecap: round; }
.plan__trace { stroke: var(--rouge-enseigne); stroke-width: 4; }
.plan__trace2 { stroke: var(--ambre-fonce); stroke-width: 4.5; stroke-dasharray: 0 9; }
.plan__station { fill: var(--creme); stroke: var(--encre); stroke-width: 2.2; }
.plan__lieu { font: 400 17px var(--font-texte); fill: var(--encre); }
.plan__lieu--fort { font: 400 22px var(--font-display); }
.plan__lieu--petit, .plan__lieu--rue { fill: var(--brun-doux); }
.plan__pastille { fill: var(--rouge-enseigne); }
.plan__pastille-anneau { fill: none; stroke: var(--creme); stroke-width: 1.2; }
.plan__pastille-99 { font: 400 19px var(--font-display); fill: var(--creme); }
.plan__legende { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-2); font-size: 13px; line-height: 1.4; color: var(--brun-doux); }
.plan__cle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--encre); }
.plan__cle::before { content: ""; flex: none; width: 1.75rem; height: 0; border-top: 3px solid var(--rouge-enseigne); }
.plan__cle--2::before { border-top: 3px dotted var(--ambre-fonce); }

/* Mini-plan (Le quartier, mobile seulement) : le coin du café en gros plan */
.plan-mini { max-width: 30rem; margin: 0; }
.plan-mini .plan__legende { color: var(--creme-doux); }
.plan-mini .plan__lieu { font-size: 21.5px; }
.plan-mini .plan__lieu--fort { font-size: 27px; }
.plan-mini .plan__zone, .plan-mini .plan__bloc-nom, .plan-mini .plan__eau-nom { font-size: 20.5px; }

/* Repères avec distances */
.reperes { margin-top: var(--space-5); }
.reperes li { display: flex; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--ligne); }
.reperes li:first-child { border-top: 1px solid var(--ligne); }
.reperes__nom { flex: 1 1 auto; }
.reperes__dist { flex: none; font: 400 var(--step-1) / 1 var(--font-display); color: var(--acajou); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reperes__note { margin-top: var(--space-3); font-size: var(--step--1); color: var(--brun-doux); }

/* Fiche d'infos (bloc « document ») */
.fiche { display: grid; background: var(--creme); border: 1px solid var(--encre); border-radius: var(--radius); }
.fiche > div { padding: var(--space-5); border-bottom: 1px solid var(--ligne); }
.fiche > div:last-child { border-bottom: 0; }
.fiche dd { margin-top: var(--space-2); }
.fiche__fort { display: block; font: 400 var(--step-2) / 1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.fiche .lien { margin-top: var(--space-1); }
.fiche a.fiche__fort { color: var(--acajou); text-decoration-color: var(--ambre-fonce); text-underline-offset: 0.15em; min-height: var(--tap); }

/* FAQ */
.faq { max-width: 48rem; border-top: 1px solid var(--encre); }
.faq__item { border-bottom: 1px solid var(--ligne); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.5rem; padding-block: var(--space-4); font: 400 var(--step-1) / 1.25 var(--font-display); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--acajou); }
.faq__signe { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--encre); border-radius: 50%; }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--duree) var(--courbe); }
.faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__signe::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__corps { display: grid; }
.faq__corps > div { min-height: 0; overflow: hidden; margin-inline: -6px; padding-inline: 6px; }
.faq__r { padding-bottom: var(--space-5); max-width: var(--mesure); font-size: var(--step-0); color: var(--brun-doux); }
.faq + .lien { margin-top: var(--space-5); }
.infos__faq .faq { margin-top: var(--space-5); }

/* Bandeau final */
.final__grille { align-items: center; }
.final__tel { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--space-5); font: 400 var(--step-5) / 1 var(--font-display); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.final__tel:hover { color: var(--laiton-clair); }
.final .actions { margin-top: var(--space-6); }
.final__adresse { margin-top: var(--space-5); font-size: var(--step--1); color: var(--creme-doux); }

/* Pied de page */
.site-footer { background: var(--nuit-2); color: var(--creme-doux); }
.site-footer__filet { height: 6px; border-block: 2px solid var(--laiton); opacity: 0.7; }
.footer__grille { display: grid; gap: var(--space-7) var(--gap); padding-block: var(--space-8) var(--space-7); }
.footer__marque p { margin-top: var(--space-4); max-width: 22rem; }
.footer__titre { display: flex; align-items: center; min-height: var(--tap); color: var(--laiton-clair); }
.footer__liens { margin-top: var(--space-2); }
.footer__liens a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--creme); text-decoration: none; }
.footer__liens a:hover { text-decoration: underline; text-decoration-color: var(--laiton); }
.footer__liens a[aria-current="page"] { color: var(--laiton-clair); }
.footer__liens .tel { font-variant-numeric: tabular-nums; }
.footer__horaires { margin-top: var(--space-2); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; padding-block: var(--space-5); border-top: 1px solid var(--ligne-sombre); font-size: var(--step--1); }
/* Cible tactile de 44 px sans changer la hauteur de ligne. */
.footer__legal a, .erreur__tel a { padding-block: calc((var(--tap) - 1em) / 2); color: var(--creme); }

/* Pages intérieures : en-tête */
.page-hero__grille { display: grid; gap: var(--space-7) var(--gap); padding-block: var(--space-5) var(--space-8); }
.page-hero h1 { font-size: var(--step-h1-page); max-width: 15ch; }
.page-hero__chapeau { margin-top: var(--space-5); }
.page-hero .actions { margin-top: var(--space-6); }

.ariane ol { display: flex; flex-wrap: wrap; align-items: center; }
.ariane li { display: inline-flex; align-items: center; font-size: var(--step--1); color: var(--creme-doux); }
.ariane li + li::before { content: ""; width: 6px; height: 6px; margin-inline: var(--space-3); border-top: 1px solid var(--laiton); border-right: 1px solid var(--laiton); transform: rotate(45deg); }
.ariane a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--creme); text-underline-offset: 0.25em; text-decoration-color: var(--laiton); }
.ariane + h1 { margin-top: var(--space-4); }

/* Le café : boissons, zakouski au masque rond */
.boissons__photo .photo__cadre img { object-position: 57% 50%; }
.zakouski__photo { width: min(20rem, 80%); margin-inline: auto; }
.rond { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--creme); box-shadow: 0 0 0 8px var(--creme-2), 0 0 0 10px var(--laiton); }
.zakouski__photo figcaption { margin-top: var(--space-4); text-align: center; }
.note { margin-top: var(--space-5); font-size: var(--step--1); color: var(--brun-doux); max-width: var(--mesure); }
.lien-texte, .acces a, .legal a { color: var(--acajou); text-decoration-color: var(--ambre-fonce); }
.lien-texte { font-weight: 600; }

/* Le quartier : moyens d'accès */
.acces { display: grid; gap: var(--space-6) var(--gap); }
.acces li { padding-top: var(--space-4); border-top: 1px solid var(--encre); }
.acces p { margin-top: var(--space-2); color: var(--brun-doux); }
.adresse-bloc { font: 400 var(--step-3) / 1.15 var(--font-display); }
.adresse-bloc span { display: block; }
.histoire { padding-top: 0; }
.histoire__grille { margin-top: var(--section-y); }

/* Infos pratiques : cartes */
.cartes { display: grid; gap: var(--space-5); }
.carte { display: flex; flex-direction: column; padding: var(--space-6); background: var(--creme); border: 1px solid var(--encre); border-radius: var(--radius); }
.carte__grand { display: flex; align-items: center; min-height: var(--tap); margin-top: var(--space-4); font: 400 var(--step-4) / 1.05 var(--font-display); color: var(--acajou); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__grand--adresse { display: block; min-height: 0; white-space: normal; font-size: var(--step-3); }
.carte p:not(.libelle) { margin-top: var(--space-4); color: var(--brun-doux); max-width: 30rem; }
.carte > .lien { align-self: flex-start; margin-top: var(--space-2); }
.carte .actions { margin-top: auto; padding-top: var(--space-5); }
.carte--verso { display: grid; place-items: center; background: var(--nuit); border-color: var(--nuit); }
.carte--verso .sousbock { width: min(15rem, 80%); transform: rotate(-5deg); }

/* Mentions légales */
.legal { max-width: 48rem; }
.legal h2 { font-size: var(--step-3); margin-top: var(--space-8); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin-top: var(--space-4); color: var(--brun-doux); max-width: var(--mesure); }
.legal ul li { position: relative; padding-left: var(--space-5); }
.legal ul li + li { margin-top: var(--space-2); }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--ambre-fonce); }
.legal dl { margin-top: var(--space-4); border-top: 1px solid var(--ligne); }
.legal dl > div { display: grid; gap: var(--space-1) var(--space-5); padding-block: var(--space-3); border-bottom: 1px solid var(--ligne); }
.legal dt { color: var(--brun-doux); }
.legal dd { font-weight: 600; overflow-wrap: anywhere; }
.legal dd a { padding-block: calc((var(--tap) - 1em) / 2); }
.legal a { overflow-wrap: anywhere; }

/* 404 */
.erreur { padding-block: var(--space-8) var(--space-9); }
.erreur__grille { display: grid; gap: var(--space-7) var(--gap); align-items: center; }
.erreur .sousbock { width: min(16rem, 70%); margin-inline: auto; transform: rotate(-8deg); }
.erreur h1 { font-size: var(--step-5); }
.erreur__texte > p:not(.libelle) { margin-top: var(--space-4); max-width: var(--mesure); color: var(--creme-doux); font-size: var(--step-1); line-height: 1.5; }
.erreur .actions { margin-top: var(--space-6); }
.erreur__texte > p.erreur__tel { margin-top: var(--space-6); font-size: var(--step-0); }
.erreur__tel a[href^="tel:"] { font-variant-numeric: tabular-nums; }

/* ---------- Utilitaires ---------- */
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }

/* ---------- Media ---------- */
@media (max-width: 24.99em) {
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { padding: 0; justify-content: center; }
  .marque { gap: var(--space-2); }
  .marque__signe { width: 1.75rem; height: 1.75rem; }
  .marque__mot { font-size: 1.25rem; }
  .header__inner { gap: var(--space-2); }
  .btn--petit { padding: 0 var(--space-3); }
}

@media (max-width: 29.99em) {
  .actions .btn { width: 100%; }
}

@media (min-width: 30em) {
  .consos > div { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
  .legal dl > div { grid-template-columns: 13rem minmax(0, 1fr); }
}

@media (max-width: 47.99em) {
  .page-hero--deborde .page-hero__photo { margin-inline: calc(var(--gutter) * -1); }
  .page-hero--deborde .page-hero__photo .photo__cadre { aspect-ratio: 3 / 2; }
  .page-hero--deborde .page-hero__photo figcaption { padding-inline: var(--gutter); }
  .bande__cadre { aspect-ratio: 3 / 2; }
  .cartes { align-items: start; }
  .footer__grille { grid-template-columns: 1fr 1fr; }
  .footer__marque { grid-column: 1 / -1; }
}

@media (max-width: 63.99em) {
  .carte--verso { display: none; }
  .ou__reperes, .quartier__reperes { max-width: 34rem; }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  :root { --step-enseigne-xl: clamp(10rem, 1rem + 18vw, 12rem); }
  .comptoir__grille { grid-template-columns: 5fr 7fr; }
  .page-hero__photo.photo--4-5 .photo__cadre { aspect-ratio: 16 / 9; }
  .acces li { max-width: var(--mesure); }
  .apied .grille { grid-template-columns: 1fr 1fr; }
  .moments { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .boissons .grille { grid-template-columns: 7fr 5fr; }
  .zakouski .grille { grid-template-columns: 5fr 7fr; align-items: center; }
  .zakouski__photo { grid-row: 1; }
}

/* Plan : libellés lisibles quand le plan est rendu petit (>= 14 px) */
@media (max-width: 79.99em) {
  .quartier .plan__lieu { font-size: 20px; }
  .quartier .plan__lieu--fort { font-size: 25px; }
}
@media (max-width: 63.99em) {
  .page-hero__plan .plan__lieu { font-size: 20px; }
  .page-hero__plan .plan__lieu--fort { font-size: 25px; }
  .page-hero__plan .plan__zone, .page-hero__plan .plan__bloc-nom { font-size: 18px; }
  .page-hero__plan .plan__eau-nom { font-size: 17px; }
}

@media (min-width: 48em) {
  .hero__photo { aspect-ratio: 21 / 9; }
  .hero__photo img { object-position: 50% 50%; }
  .hero .sousbock { right: calc(max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2) + var(--gutter) + var(--space-6)); }

  /* Plan : visible dès 48em, la liste à pastilles prend le relais en dessous */
  .plan { display: block; }
  .plan-mini { display: none; }
  .quartier__route .route__etapes { display: none; }

  /* En-têtes qui débordent sur la section suivante (M9) */
  .page-hero--deborde .page-hero__photo { position: relative; z-index: 1; margin-bottom: calc((var(--space-8) + var(--space-7)) * -1); }
  .page-hero--deborde .page-hero__photo figcaption { position: absolute; left: var(--space-4); bottom: var(--space-3); margin: 0; color: var(--creme); text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); }
  .page-hero--deborde + .section { padding-top: calc(var(--section-y) + var(--space-7)); }
  .page-hero__plan { position: relative; z-index: 1; margin: 0 0 calc((var(--space-8) + var(--space-8)) * -1); }
  .page-hero__plan .plan__legende { margin: 0 0 var(--space-4); color: var(--creme-doux); }
  .page-hero__plan .plan__cle { color: var(--creme); }
  .page-hero--plan + .section { padding-top: calc(var(--section-y) + var(--space-8)); }
  .boissons .grille { align-items: center; }
  .zakouski__photo { width: 100%; }
  .comptoir__photo { grid-row: 1; }
  .fiche { grid-template-columns: 1fr 1fr; }
  .fiche > div:nth-child(odd) { border-right: 1px solid var(--ligne); }
  .fiche > div:nth-last-child(-n+2) { border-bottom: 0; }
  .cartes { grid-template-columns: 1fr 1fr; }
  .page-hero--large h1 { max-width: 20ch; }
  .footer__grille { grid-template-columns: 1.4fr 1fr 1fr; }
  .legal dl > div { grid-template-columns: 16rem minmax(0, 1fr); }
}

@media (min-width: 64em) {
  /* En-tête : navigation en ligne */
  .js .menu-btn { display: none; }
  .nav, .js .nav { position: static; display: block; width: auto; order: 0; background: none; border: 0; box-shadow: none; margin-left: auto; }
  .nav__liste, .js .nav__liste { flex-direction: row; gap: 0 var(--space-6); padding: 0; }
  .nav__lien, .js .nav__lien { position: relative; display: inline-flex; width: auto; min-height: var(--tap); font: 400 1rem / 1.2 var(--font-texte); color: var(--creme-doux); border-bottom: 0; }
  .js .nav__lien[aria-current="page"], .nav__lien[aria-current="page"] { color: var(--creme); }
  .nav__lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--laiton); transform: scaleX(0); transform-origin: left center; transition: transform 200ms var(--courbe); }
  .nav__lien[aria-current="page"]::after, .nav__lien:focus-visible::after { transform: scaleX(1); }
  .marque { margin-right: 0; }
  .header__inner { flex-wrap: nowrap; gap: var(--space-6); min-height: 5.25rem; }

  /* Hero : l'enseigne à gauche, la plaque à droite, la vitrine dessous */
  .grille--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__bande { padding-block: var(--space-7); row-gap: 0; }
  .hero__titre { grid-column: 1 / 8; }
  .hero__plaque { grid-column: 8 / 13; align-self: end; }
  .hero__plaque .actions { flex-direction: column; align-items: stretch; }
  .hero__infos { flex-direction: column; }
  .h1-suite { max-width: none; }
  .comptoir__photo { grid-column: 1 / 6; }
  .comptoir__texte { grid-column: 7 / 13; grid-row: 1; }

  /* La salle : titre sur le plafond sombre, les 4 moments dessous */
  .salle__scene { position: relative; }
  .salle__cadre { aspect-ratio: 21 / 9; }
  .salle__cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(23 17 13 / 0.85), rgb(23 17 13 / 0.62) 40%, rgb(23 17 13 / 0) 72%); }
  .salle__titre { position: absolute; top: 0; left: 0; right: 0; padding-top: var(--space-7); }
  .moments { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; margin-top: var(--space-8); border-top: 0; }
  .moments li { padding: 0 var(--space-5); border-bottom: 0; border-left: 1px solid var(--laiton); }
  .moments li:first-child { padding-left: 0; border-left: 0; }

  /* Le 99 : affiche qui mord sur la bande de nuit */
  .enseigne-bloc--99 .affiche { grid-column: 1 / 7; align-self: start; position: relative; z-index: 1; margin-top: calc(var(--section-y) * -1 - 0.12em); font-size: var(--step-affiche); }

  .enseigne-bloc__signe { grid-column: 1 / 6; }
  .enseigne-bloc__texte { grid-column: 7 / 13; }

  .tete--duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .tete--duo h2 { grid-column: 1 / 7; }
  .tete--duo .tete__chapeau { grid-column: 7 / 13; margin-top: 0; }
  .quartier__route { grid-column: 1 / 9; }
  .quartier__reperes { grid-column: 9 / 13; }

  .infos__fiche { grid-column: 1 / 13; }
  .fiche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fiche > div { border-bottom: 0; border-right: 1px solid var(--ligne); }
  .fiche > div:last-child { border-right: 0; }
  .infos__faq { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); align-items: start; }
  .infos__faq > .route__titre, .infos__faq > .lien { grid-column: 1 / 6; }
  .infos__faq > .faq { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 0; }
  .infos__faq > .lien { margin-top: var(--space-4); }

  .final__texte { grid-column: 1 / 7; }
  .final__appel { grid-column: 7 / 13; }
  .final__tel { font-size: min(var(--step-5), 6vw); }

  .page-hero__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding-block: var(--space-6) var(--space-9); }
  .page-hero__texte { grid-column: 1 / 8; }
  .page-hero__photo { grid-column: 8 / 13; }
  .page-hero--deborde .page-hero__photo { align-self: stretch; display: flex; flex-direction: column; margin-bottom: calc((var(--space-9) + var(--space-7)) * -1); }
  .page-hero--deborde .page-hero__photo .photo__cadre { flex: 1; aspect-ratio: auto; min-height: 30rem; }
  .page-hero--large h1 { font-size: var(--step-5); }
  .page-hero--large .page-hero__texte { grid-column: 1 / 9; }
  .page-hero--plan .page-hero__grille { row-gap: var(--space-6); }
  .page-hero--plan .page-hero__texte { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .page-hero--plan .page-hero__texte > * { grid-column: 1 / 13; }
  .page-hero--plan h1 { max-width: none; }
  .page-hero--plan .page-hero__texte > .page-hero__chapeau { grid-column: 1 / 8; }
  .page-hero--plan .page-hero__texte > .actions { grid-column: 8 / 13; align-self: end; flex-direction: column; align-items: stretch; }
  .page-hero__plan { grid-column: 1 / 13; margin-bottom: calc((var(--space-9) + var(--space-8)) * -1); }

  .boissons__texte { grid-column: 7 / 13; }
  .boissons__photo { grid-column: 1 / 6; grid-row: 1; }
  .zakouski__texte { grid-column: 1 / 7; grid-row: 1; }
  .zakouski__photo { grid-column: 8 / 13; grid-row: 1; width: min(100%, 26vw); }

  .ou__texte { grid-column: 1 / 6; }
  .ou__reperes { grid-column: 7 / 13; }
  .apied__route { grid-column: span 6; }
  .histoire__tete { grid-column: 1 / 6; align-self: start; }
  .histoire__liste { grid-column: 7 / 13; }
  .faq-bloc__tete { grid-column: 1 / 6; align-self: start; }
  .faq-bloc__liste { grid-column: 7 / 13; }

  .acces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte__grand { font-size: var(--step-3); }
  .carte--verso { padding-block: var(--space-6); }

  .erreur__grille { grid-template-columns: 5fr 7fr; }
  .erreur__signe { order: 2; }

  .footer__grille { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 80em) {
  .hero__titre { grid-column: 1 / 9; }
  .hero__plaque { grid-column: 9 / 13; }
  .page-hero--plan .page-hero__texte > .actions { flex-direction: row; justify-content: flex-end; }
}

/* ---------- Mouvement (MOTION §B) : états cachés seulement avec JS et sans « mouvement réduit ».
   Jamais cachés : titres, paragraphes, boutons, téléphone, adresse. */
@media (prefers-reduced-motion: no-preference) {
  /* C1 — entrée du hero (CSS seul, au chargement) */
  .js:not(.f-ok) .enseigne__mot { clip-path: inset(-20% 100% -30% -5%); }
  .js:not(.f-ok) .hero .arche { opacity: 0; }
  .js:not(.f-ok) .hero .filet-laiton { transform: scaleX(0); }
  .js.f-ok .enseigne__mot { animation: peindre var(--entree-duree) var(--entree-courbe) 100ms both; }
  .js.f-ok .hero .arche { animation: monter-court var(--entree-duree) var(--entree-courbe) 100ms both; }
  .js.f-ok .hero .filet-laiton { transform-origin: left center; animation: filet 500ms var(--entree-courbe) 450ms both; }
  .js .hero__plaque, .js .hero .sousbock { animation: monter 500ms var(--entree-courbe) 400ms both; }
  .js .hero__photo img { animation: dezoom 800ms var(--entree-courbe) both; }

  /* C2 — apparitions au défilement (site.js ajoute .is-in) */
  .js [data-reveal] { transition: var(--entree-duree) var(--entree-courbe); transition-property: opacity, transform, clip-path; transition-delay: calc(var(--i, 0) * var(--cascade)); }
  .js [data-reveal=""]:not(.is-in) { opacity: 0; transform: translateY(var(--entree-dy)); }
  .js [data-reveal="clip-haut"] { clip-path: inset(0 0 0 0); }
  .js [data-reveal="clip-haut"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
  .js [data-reveal="clip-monte"] { clip-path: inset(-10% -10% -20% -5%); }
  .js [data-reveal="clip-monte"]:not(.is-in) { clip-path: inset(100% -10% -20% -5%); }

  /* C3 — tracés (plan, anneaux du sous-bock d'Infos pratiques) */
  .js [data-reveal="trace"] .trace, .js [data-reveal="trace"] .sb-trait { stroke-dasharray: 1; transition: stroke-dashoffset 800ms var(--entree-courbe); }
  .js [data-reveal="trace"] .trace--2 { transition-delay: 200ms; }
  .js [data-reveal="trace"]:not(.is-in) .trace, .js [data-reveal="trace"]:not(.is-in) .sb-trait { stroke-dashoffset: 1; }
  .js [data-reveal="trace"] .trace-etape, .js [data-reveal="trace"] .sb-texte { transition: opacity 450ms var(--entree-courbe); transition-delay: calc(500ms + var(--i, 0) * var(--cascade)); }
  .js [data-reveal="trace"]:not(.is-in) .trace-etape, .js [data-reveal="trace"]:not(.is-in) .sb-texte { opacity: 0; }
  .js [data-reveal="trace"] .plan__arrivee { transform-box: fill-box; transform-origin: center; transition: opacity 450ms var(--entree-courbe) 850ms, transform 450ms var(--entree-courbe) 850ms; }
  .js [data-reveal="trace"]:not(.is-in) .plan__arrivee { opacity: 0; transform: scale(0.8); }

  /* C3 — sous-bock de la 404 : anneaux tracés au chargement */
  .js .erreur .sb-trait { stroke-dasharray: 1; animation: tracer var(--entree-duree) var(--entree-courbe) 150ms both; }
  .js .erreur .sb-texte { animation: fondu 450ms var(--entree-courbe) 750ms both; }

  /* C9 — FAQ qui s'ouvre en douceur (site.js pose .is-ouvert) */
  .js .faq__corps { grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--entree-courbe); }
  .js .faq__item.is-ouvert .faq__corps { grid-template-rows: 1fr; }
  .js .faq__item[open]:not(.is-ouvert) .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
}

@keyframes peindre { from { clip-path: inset(-20% 100% -30% -5%); } to { clip-path: inset(-20% -10% -30% -5%); } }
@keyframes monter { from { opacity: 0; translate: 0 var(--entree-dy); } }
@keyframes monter-court { from { opacity: 0; translate: 0 8px; } }
@keyframes filet { from { transform: scaleX(0); } }
@keyframes dezoom { from { transform: scale(1.06); } }
@keyframes tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fondu { from { opacity: 0; } }