/* ==========================================================================
   Nourcaux Delices - Caudebec-en-Caux (76490 Rives-en-Seine)
   Direction artistique : brun de la banne + papier chaud, serif de signaletique.
   Toutes les couleurs sont relevees sur la devanture et sur le logo (voir DA.md).

   Refonte : echelle typographique elargie, surfaces arrondies et texturees,
   en-tete flottant en verre, systeme de mouvement complet (voir section 21).
   ========================================================================== */

/* ---------- 1. Polices auto-hebergees --------------------------------- */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("../fonts/schibsted.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- 2. Jetons de design --------------------------------------- */
:root{
  /* Couleurs : provenance de chaque valeur documentee dans DA.md */
  --paper:#FBF8F4;          /* blanc chaud, tres peu sature */
  --paper-2:#F3ECE3;        /* surface alternee */
  --paper-3:#EBE1D5;        /* surface la plus chaude, encarts */
  --brand:#2E1E16;          /* brun de la banne, couleur de structure */
  --brand-dark:#1B100A;
  --brand-mid:#7A5A45;      /* brun de la toile de store, au soleil */
  --accent:#A6382C;         /* braise, croute de pain */
  --accent-soft:#E0906F;
  --or:#8C6212;             /* or fonce des etoiles sur fond clair */
  --or-clair:#E8B54B;       /* or des etoiles sur fond brun */
  --ink:#241812;
  --muted:#6B5B50;
  --line:#E4DACE;
  --line-strong:#D2C4B4;
  --on-brand:#FBF8F4;
  --on-brand-muted:#C9B5A4;
  --on-brand-line:rgba(251,248,244,.20);

  --surface:var(--paper);
  --surface-2:var(--paper-2);
  --surface-3:var(--paper-3);
  --text:var(--ink);
  --text-muted:var(--muted);
  --border:var(--line);

  /* Typographie */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:clamp(.75rem,.73rem + .1vw,.8125rem);
  --fs-sm:clamp(.875rem,.855rem + .1vw,.9375rem);
  --fs-base:clamp(1rem,.97rem + .16vw,1.0625rem);
  --fs-md:clamp(1.0625rem,1.01rem + .28vw,1.1875rem);
  --fs-lg:clamp(1.1875rem,1.09rem + .48vw,1.5rem);
  --fs-xl:clamp(1.5rem,1.24rem + 1.3vw,2.375rem);
  --fs-2xl:clamp(2rem,1.4rem + 2.9vw,4.25rem);
  --fs-3xl:clamp(2.5rem,1.5rem + 4.6vw,5.75rem);
  --fs-4xl:clamp(3rem,1.1rem + 8.6vw,9rem);      /* nom en couverture */

  /* Rythme vertical et horizontal, base 8 */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:9rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section:clamp(4.5rem,10vw,9rem);
  --wrap:78rem;

  /* Formes : une echelle, pas un rayon unique. Plus large sur les
     contenants et les images, plus serre sur les elements internes. */
  --r-xs:8px; --r:14px; --r-lg:22px; --r-xl:34px; --r-pill:999px;
  --header-h:66px;

  /* Ombres teintees du brun de la charte, jamais du noir pur. */
  --sh-1:0 1px 2px rgba(46,30,22,.05),0 10px 26px -14px rgba(46,30,22,.22);
  --sh-2:0 2px 6px rgba(46,30,22,.06),0 30px 70px -30px rgba(46,30,22,.40);
  --sh-3:0 40px 90px -40px rgba(27,16,10,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);      /* sortie longue, sensation de poids */
  --ease-ressort:cubic-bezier(.34,1.42,.64,1);
  --t-fast:160ms; --t:260ms; --t-slow:640ms;

  --z-grain:200; --z-entete:60; --z-menu:55; --z-barre:45;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#17100C; --paper-2:#1F1610; --paper-3:#271C15;
    --ink:#F1E8DF; --muted:#B2A093;
    --line:#3A2C23; --line-strong:#4A382C;
    --accent:#E07A63;
    --brand-mid:#A98770;
    --or:#E8B54B;
    --surface:var(--paper); --surface-2:var(--paper-2); --surface-3:var(--paper-3);
    --text:var(--ink); --text-muted:var(--muted); --border:var(--line);
    --sh-1:0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.6);
    --sh-2:0 2px 6px rgba(0,0,0,.35),0 30px 70px -30px rgba(0,0,0,.75);
  }
}

/* ---------- 3. Reinitialisation --------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--accent);color:#fff}

/* Grain fixe : casse la platitude des aplats sans peser (SVG en ligne).
   pointer-events:none, donc aucun effet sur les clics ni le clavier. */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){body::after{opacity:.04}}

/* ---------- 4. Typographie -------------------------------------------- */
h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:500;line-height:1.06;
  letter-spacing:-.024em;text-wrap:balance;
}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg);line-height:1.2;letter-spacing:-.015em}
p{max-width:64ch;text-wrap:pretty}
.lede{font-size:var(--fs-md);color:var(--text-muted)}
.eyebrow{
  font-family:var(--font-sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:var(--fs-xs);color:var(--brand-mid);
}

/* Titre de section : un numero d'ordre, un filet, puis le titre en grand. */
/* Numero d'ordre + filet qui se deploie, pose au-dessus de chaque titre. */
.numero{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.numero .num{
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;color:var(--brand-mid);font-variant-numeric:tabular-nums;flex:none;
}
.numero .filet{
  height:1px;flex:1;background:currentColor;opacity:.24;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1000ms var(--ease-out) 140ms;
}
.numero.vu .filet{transform:scaleX(1)}
.band .numero .num,.reperes .numero .num{color:var(--on-brand-muted)}
.tete-section{display:grid;gap:var(--s4);margin-bottom:var(--s7)}
.tete-section__haut{display:flex;align-items:center;gap:var(--s4)}
.tete-section .num{
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;color:var(--brand-mid);font-variant-numeric:tabular-nums;flex:none;
}
.tete-section .filet{
  height:1px;flex:1;background:currentColor;opacity:.22;
  transform:scaleX(0);transform-origin:left;
  transition:transform 900ms var(--ease-out) 120ms;
}
.tete-section.vu .filet{transform:scaleX(1)}
.band .tete-section .num{color:var(--on-brand-muted)}

/* ---------- 5. Structure ---------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.band{background:var(--brand);color:var(--on-brand);position:relative}
.band .eyebrow{color:var(--on-brand-muted)}
/* Halo chaud tres large : evite l'aplat brun parfaitement uniforme. */
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 15% 0%,rgba(224,144,111,.16),transparent 62%);
}
.band > *{position:relative}
.skip{
  position:absolute;left:var(--s4);top:-120px;z-index:100;
  background:var(--brand);color:var(--on-brand);padding:.75rem 1.25rem;border-radius:var(--r);
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:var(--s3)}

/* ---------- 6. Boutons ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:.85rem 1.6rem;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t) var(--ease-ressort),
             box-shadow var(--t) var(--ease);
}
.btn > *{position:relative;z-index:1}
.btn:active{transform:scale(.975)}
.btn svg{width:1.1em;height:1.1em;flex:none;fill:currentColor;
  transition:transform var(--t) var(--ease-ressort)}
.btn:hover svg{transform:translateX(2px) rotate(-6deg)}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--brand-dark);box-shadow:var(--sh-2);transform:translateY(-2px)}
.btn--ghost{border:1.5px solid var(--line-strong);color:var(--text)}
.btn--ghost:hover{border-color:var(--brand);background:var(--surface-2);transform:translateY(-2px)}
/* En theme sombre, un bouton brun sur un fond presque noir n'a plus de
   contour lisible (1,3:1). Le bouton principal s'inverse, le bouton fantome
   prend une bordure assez claire pour atteindre 3:1. */
@media (prefers-color-scheme:dark){
  .btn--primary{background:#F1E8DF;color:#1B100A}
  .btn--primary:hover{background:#FFFFFF}
  .btn--ghost{border-color:#7E6553}
  .btn--ghost:hover{border-color:#B2A093;background:rgba(241,232,223,.08)}
}
/* Le hero et la bande brune restent sombres dans les deux themes : leurs
   boutons prennent le creme en dur, pas --paper qui bascule en sombre. */
.band .btn--primary,.hero .btn--primary{background:#FBF8F4;color:#2E1E16}
.band .btn--primary:hover,.hero .btn--primary:hover{background:#fff}
.band .btn--ghost,.hero .btn--ghost{border-color:rgba(251,248,244,.42);color:var(--on-brand)}
.band .btn--ghost:hover,.hero .btn--ghost:hover{border-color:#FBF8F4;background:rgba(251,248,244,.14)}

/* Aimantation legere du curseur, uniquement a la souris (voir main.js). */
@media (pointer:fine){
  .btn{transition:background var(--t) var(--ease),color var(--t) var(--ease),
                  border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
                  transform 220ms var(--ease-out)}
}

/* ---------- 7. Etat ouvert / ferme ------------------------------------ */
.statut{
  display:inline-flex;align-items:center;gap:.5em;
  border-radius:var(--r-pill);padding:.35rem .85rem .35rem .7rem;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;
  border:1px solid var(--border);color:var(--text-muted);white-space:nowrap;
  backdrop-filter:blur(6px);
}
.statut::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
/* Le point respire quand la boutique est ouverte. */
@media (prefers-reduced-motion:no-preference){
  .statut[data-etat="ouvert"]::before{animation:pouls 2.4s var(--ease) infinite}
}
@keyframes pouls{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  70%{box-shadow:0 0 0 6px transparent;opacity:.75}
}
/* Sous 48 rem, l'en-tete n'a pas la largeur pour la phrase entiere : la
   pastille se reduit a une forme courte mais utile, le detail reste dans le
   bandeau des reperes juste dessous. */
@media (max-width:47.999rem){
  .entete .statut{font-size:0;gap:.4rem}
  .entete .statut::after{content:attr(data-court);font-size:var(--fs-xs)}
}
.statut[data-etat="ouvert"]{color:#1B6238;border-color:#BEDCC8;background:#EDF6F0}
.statut[data-etat="ferme"]{color:#9A3327;border-color:#EBCFC8;background:#FAEFEB}
@media (prefers-color-scheme:dark){
  .statut[data-etat="ouvert"]{color:#84D3A5;border-color:#2A4A36;background:#182720}
  .statut[data-etat="ferme"]{color:#EA9C86;border-color:#4A2C24;background:#271812}
}
.band .statut,.hero .statut,.entete:not([data-fige="true"]) .statut{
  border-color:var(--on-brand-line);color:var(--on-brand);
}
.band .statut[data-etat="ouvert"],.hero .statut[data-etat="ouvert"],
.entete:not([data-fige="true"]) .statut[data-etat="ouvert"]{
  background:rgba(126,207,160,.16);border-color:rgba(126,207,160,.45);color:#A6E3C0;
}
.band .statut[data-etat="ferme"],.hero .statut[data-etat="ferme"],
.entete:not([data-fige="true"]) .statut[data-etat="ferme"]{
  background:rgba(224,144,111,.16);border-color:rgba(224,144,111,.45);color:#EBAF95;
}

/* ---------- 8. En-tete flottant --------------------------------------- */
/* Au repos, l'en-tete est transparent et se pose sur la photo du hero.
   Des le premier defilement il devient une barre de verre depoli. */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-entete);
  color:#FBF8F4;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease),backdrop-filter var(--t) var(--ease);
}
.entete[data-fige="true"]{
  color:var(--text);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.35);
  border-bottom-color:var(--border);
}
@supports not (backdrop-filter:blur(1px)){
  .entete[data-fige="true"]{background:var(--surface)}
}
.entete__in{display:flex;align-items:center;gap:var(--s4);height:var(--header-h)}
/* Jauge de progression de lecture, collee sous l'en-tete. */
.progres{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transform:scaleX(0);transform-origin:left;opacity:0;
  transition:opacity var(--t) var(--ease);
}
.entete[data-fige="true"] .progres{opacity:1}
.marque{display:flex;align-items:center;text-decoration:none;color:inherit;flex:none}
.marque svg{height:34px;width:auto;transition:transform var(--t) var(--ease-ressort)}
.marque:hover svg{transform:scale(1.04)}
.nav{display:none}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:var(--s3);min-width:0}
.tel-entete{
  display:none;align-items:center;gap:.5em;text-decoration:none;font-weight:600;
  font-size:var(--fs-sm);padding:.6rem 1.15rem;min-height:44px;border-radius:var(--r-pill);
  background:#FBF8F4;color:#2E1E16;font-variant-numeric:tabular-nums;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             transform var(--t) var(--ease-ressort),box-shadow var(--t) var(--ease);
}
.tel-entete:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.entete[data-fige="true"] .tel-entete{background:var(--brand);color:var(--on-brand)}
@media (prefers-color-scheme:dark){
  .entete[data-fige="true"] .tel-entete{background:#F1E8DF;color:#1B100A}
}
.tel-entete svg{width:1.05em;height:1.05em;fill:currentColor}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:1px solid currentColor;border-radius:var(--r-pill);
  opacity:.85;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-ressort);
}
.burger:hover{opacity:1;transform:scale(1.05)}
.burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
.burger .ferme{display:none}
.burger[aria-expanded="true"] .ouvre{display:none}
.burger[aria-expanded="true"] .ferme{display:block}
.menu{
  position:fixed;inset:var(--header-h) 0 auto 0;background:var(--surface);
  border-bottom:1px solid var(--border);padding:var(--s4) 0 var(--s6);
  clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),clip-path 460ms var(--ease-out),visibility var(--t);
  z-index:var(--z-menu);max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  box-shadow:var(--sh-2);
}
.menu[data-ouvert="true"]{clip-path:inset(0 0 0 0);opacity:1;visibility:visible}
.menu a{
  display:block;padding:.95rem 0;text-decoration:none;font-size:var(--fs-lg);
  font-family:var(--font-display);border-bottom:1px solid var(--border);
  transition:padding-left var(--t) var(--ease-out),color var(--t) var(--ease);
}
.menu a:hover{padding-left:.6rem;color:var(--accent)}
.menu li:last-child a{border-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .menu[data-ouvert="true"] li{animation:menuEntre 460ms var(--ease-out) both}
  .menu[data-ouvert="true"] li:nth-child(2){animation-delay:40ms}
  .menu[data-ouvert="true"] li:nth-child(3){animation-delay:80ms}
  .menu[data-ouvert="true"] li:nth-child(4){animation-delay:120ms}
  .menu[data-ouvert="true"] li:nth-child(5){animation-delay:160ms}
  .menu[data-ouvert="true"] li:nth-child(6){animation-delay:200ms}
}
@keyframes menuEntre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:60rem){
  :root{--header-h:76px}
  .marque svg{height:38px}
  .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem);margin-left:var(--s6)}
  .nav a{
    text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:inherit;opacity:.72;
    padding:.5rem 0;position:relative;white-space:nowrap;
    transition:opacity var(--t) var(--ease);
  }
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform 420ms var(--ease-out);
  }
  .nav a:hover,.nav a[aria-current="true"]{opacity:1}
  .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
  .tel-entete{display:inline-flex}
  .burger,.menu{display:none}
}

/* ---------- 9. Hero --------------------------------------------------- */
.hero{position:relative;background:var(--brand-dark);color:#FBF8F4;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}
/* L'en-tete est transparent sur le hero : ce voile lui garantit un fond
   sombre, meme la ou la banne est claire. */
.hero::before{
  content:"";position:absolute;inset:0 0 auto;height:190px;z-index:-1;
  background:linear-gradient(rgba(23,14,9,.62),rgba(23,14,9,0));
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(23,14,9,.96) 0%,rgba(23,14,9,.86) 34%,rgba(23,14,9,.42) 64%,rgba(23,14,9,.34) 100%);
}
.hero__in{
  min-height:min(100dvh,900px);display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--header-h) + var(--s9)) var(--s9);
}
.hero__ville{color:#DCC7B4;margin-bottom:var(--s4)}
.hero h1{margin-bottom:var(--s5);max-width:22ch;color:#F4EAE0;font-weight:400;
  font-size:var(--fs-xl);letter-spacing:-.018em}
.hero h1 .nom{
  display:block;font-size:var(--fs-4xl);font-weight:600;letter-spacing:-.042em;
  line-height:.9;margin-bottom:.14em;color:#FBF8F4;
}
.hero__lede{color:#E6D9CD;max-width:46ch;font-size:var(--fs-md);margin-bottom:var(--s6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
/* Invite a defiler, discrete, en bas du hero. */
.hero__cue{
  position:absolute;left:50%;bottom:var(--s5);translate:-50% 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,248,244,.6);pointer-events:none;
}
.hero__cue span{display:block;width:1px;height:38px;background:currentColor;opacity:.5;
  transform-origin:top;}
@media (prefers-reduced-motion:no-preference){
  .hero__cue span{animation:filDescend 2.6s var(--ease) infinite}
}
@keyframes filDescend{
  0%{transform:scaleY(0);opacity:0}
  35%{transform:scaleY(1);opacity:.7}
  100%{transform:scaleY(1) translateY(38px);opacity:0}
}
@media (max-width:47.999rem){.hero__cue{display:none}}
@media (min-width:48rem){
  .hero__in{padding-block:calc(var(--header-h) + var(--s10)) var(--s10);min-height:min(100dvh,860px)}
  /* En large, le texte se pose sur la photo : on assombrit la moitie gauche
     pour que le lettrage peint de la banne ne concurrence plus le titre. */
  .hero::after{
    background:
      linear-gradient(to top,rgba(23,14,9,.96) 0%,rgba(23,14,9,.84) 30%,rgba(23,14,9,.44) 62%,rgba(23,14,9,.38) 100%),
      linear-gradient(100deg,rgba(23,14,9,.90) 0%,rgba(23,14,9,.76) 36%,rgba(23,14,9,.20) 68%,rgba(23,14,9,0) 94%);
  }
  .hero__media img{object-position:38% 42%}
}

/* ---------- 10. Bandeau reperes --------------------------------------- */
/* Il chevauche le bas du hero : c'est ce recouvrement qui donne la
   profondeur, plutot qu'une simple succession de blocs. */
.reperes{
  background:var(--brand);color:var(--on-brand);position:relative;z-index:3;
  border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(var(--r-xl) * -1);
  box-shadow:var(--sh-3);
}
.reperes::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 140% at 50% 0%,rgba(224,144,111,.14),transparent 60%);
}
.reperes > *{position:relative}
.reperes__grid{display:grid;gap:var(--s5);padding-block:var(--s7)}
.reperes__item{display:flex;gap:var(--s4);align-items:flex-start}
.reperes__item > svg{
  width:24px;height:24px;flex:none;margin-top:3px;
  stroke:var(--on-brand-muted);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--t) var(--ease),transform var(--t) var(--ease-ressort);
}
.reperes__item:hover > svg{stroke:var(--accent-soft);transform:scale(1.12) rotate(-5deg)}
.reperes dt{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.16em;
  color:var(--on-brand-muted);font-weight:600;margin-bottom:.4rem;
}
.reperes dd{font-size:var(--fs-sm);line-height:1.6}
.reperes a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(251,248,244,.4)}
.reperes a:hover{text-decoration-color:currentColor}
.note-google{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.note-google b{font-size:var(--fs-lg);font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums}
/* Les etoiles : or clair sur les fonds bruns, or fonce sur le papier.
   L'or clair d'origine tombait a 1,6:1 sur creme, illisible. */
.etoiles{color:var(--or);letter-spacing:.08em}
.band .etoiles,.reperes .etoiles,.pied .etoiles{color:var(--or-clair)}
@media (min-width:40rem){.reperes__grid{grid-template-columns:repeat(3,1fr);gap:var(--s7)}}

/* ---------- 11. Bandeau defilant --------------------------------------- */
/* Les noms sont ceux releves sur les ardoises de la boutique (voir
   RESEARCH.md). Le second exemplaire est masque aux lecteurs d'ecran. */
.ruban{
  background:var(--brand-dark);color:var(--on-brand);overflow:hidden;
  padding-block:var(--s4);position:relative;
  border-top:1px solid var(--on-brand-line);
}
.ruban::before,.ruban::after{
  content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none;
}
.ruban::before{left:0;background:linear-gradient(90deg,var(--brand-dark),transparent)}
.ruban::after{right:0;background:linear-gradient(270deg,var(--brand-dark),transparent)}
.ruban__piste{display:flex;width:max-content}
.ruban ul{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding-right:clamp(1.5rem,4vw,3.5rem)}
.ruban li{
  font-family:var(--font-display);font-size:var(--fs-lg);white-space:nowrap;
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);color:#EFE2D6;
}
.ruban li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-soft);opacity:.75;flex:none}
@media (prefers-reduced-motion:no-preference){
  .ruban__piste{animation:defile 42s linear infinite}
  .ruban:hover .ruban__piste{animation-play-state:paused}
}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 12. Nos produits ------------------------------------------ */
.produits__grid{display:grid;gap:var(--s7)}
.produits__media{position:relative}
.produits__media img{
  width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/5;
  box-shadow:var(--sh-2);
}
.produits__media figcaption{margin-top:var(--s4);font-size:var(--fs-xs);color:var(--text-muted)}
.produits__tete{margin-bottom:var(--s8)}
.produits__tete p{margin-top:var(--s4)}
.fiches{counter-reset:fiche}
.fiche{
  padding:var(--s5) var(--s5) var(--s5) 0;position:relative;
  transition:padding-left var(--t-slow) var(--ease-out);
}
.fiche + .fiche{border-top:1px solid var(--border)}
.fiche:first-child{padding-top:0}
.fiche::before{
  counter-increment:fiche;content:counter(fiche,decimal-leading-zero);
  position:absolute;left:0;top:var(--s5);opacity:0;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;color:var(--accent);
  font-variant-numeric:tabular-nums;
  transition:opacity var(--t-slow) var(--ease-out);
}
.fiche:first-child::before{top:0}
.fiche h3{margin-bottom:var(--s2);font-weight:600;
  transition:color var(--t) var(--ease)}
.fiche p{color:var(--text-muted);font-size:var(--fs-sm);max-width:54ch}
.fiche .note{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--s4);
  font-size:var(--fs-xs);color:var(--accent);font-weight:600;
  border:1px solid currentColor;border-radius:var(--r-pill);padding:.35rem .85rem;
}
@media (hover:hover){
  .fiche:hover{padding-left:3.25rem}
  .fiche:hover::before{opacity:1}
  .fiche:hover h3{color:var(--accent)}
}
@media (min-width:56rem){
  .produits__grid{grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,6rem);align-items:start}
  .produits__media{position:sticky;top:calc(var(--header-h) + 2.5rem)}
  /* L'image sort de la grille jusqu'au bord de l'ecran : la rupture doit
     se lire comme un parti pris, pas comme un decalage accidentel.
     Le depassement eventuel du a la barre de defilement est rogne par
     overflow-x:hidden sur body. */
  .produits__media{
    margin-left:calc(-1 * (var(--gutter) + max(0px,(100vw - var(--wrap)) / 2)));
  }
  .produits__media img{border-radius:0 var(--r-xl) var(--r-xl) 0}
  .produits__media figcaption{padding-left:var(--gutter)}
}

/* ---------- 13. Bande specialites orientales -------------------------- */
.orientales{overflow:hidden}
.orientales__grid{display:grid}
.orientales__media{overflow:hidden}
.orientales__media img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform 1.6s var(--ease-out);
}
.orientales:hover .orientales__media img{transform:scale(1.04)}
.orientales__texte{padding:var(--section) var(--gutter)}
.orientales__texte > *{max-width:38rem}
.orientales h2{margin-bottom:var(--s5)}
.orientales p{color:#E6DACE;margin-bottom:var(--s5)}
.jetons{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:var(--s6)}
.jetons li{
  border:1px solid var(--on-brand-line);border-radius:var(--r-pill);
  padding:.5rem 1rem;font-size:var(--fs-xs);color:#F4EAE0;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             transform var(--t) var(--ease-ressort);
}
.jetons li:hover{background:rgba(251,248,244,.12);border-color:rgba(251,248,244,.5);transform:translateY(-3px)}
@media (min-width:56rem){
  .orientales__grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .orientales__media img{aspect-ratio:auto;min-height:100%}
  .orientales__texte{
    padding-inline:clamp(3rem,6vw,6rem);
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ---------- 14. La maison --------------------------------------------- */
.maison{background:var(--surface-2);position:relative;overflow:hidden}
.maison::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(122,90,69,.10),transparent 65%);
}
.maison > *{position:relative}
.maison__in{max-width:46rem;margin-inline:auto;text-align:center}
.maison .numero{justify-content:center}
.maison .numero .filet{display:none}
.maison__orn{width:62px;height:62px;margin:0 auto var(--s6);color:var(--brand-mid)}
.maison h2{margin-bottom:var(--s6)}
.maison p{margin-inline:auto;margin-bottom:var(--s5);color:var(--text-muted);font-size:var(--fs-md)}
.maison p strong{color:var(--text);font-weight:600}
.maison__photo{margin-top:var(--s8)}
.maison__photo img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.maison__photo figcaption{margin-top:var(--s4);font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- 15. Galerie ------------------------------------------------ */
.galerie__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
/* min-width/min-height auto sur un element de grille = la photo impose sa
   taille intrinseque et fait deborder la grille. On l'annule. */
.galerie__grid > li{min-width:0;min-height:0}
.galerie button{
  padding:0;border-radius:var(--r-lg);overflow:hidden;position:relative;display:block;
  width:100%;height:100%;background:var(--surface-2);
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.galerie button:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.galerie button:hover img{transform:scale(1.06)}
.galerie button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(36,24,18,.10);
  background:linear-gradient(to top,rgba(23,14,9,.5),transparent 45%);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.galerie button:hover::after,.galerie button:focus-visible::after{opacity:1}
/* Pastille « agrandir », revelee au survol. */
.galerie button .loupe{
  position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:rgba(251,248,244,.94);color:#2E1E16;
  font-size:var(--fs-xs);font-weight:600;
  opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-ressort);
}
.galerie button:hover .loupe,.galerie button:focus-visible .loupe{opacity:1;transform:none}
.galerie button .loupe svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}

/* Petit ecran : deux colonnes, chaque tuile au format de sa photo. */
.g1{grid-column:span 2;aspect-ratio:16/9}
.g2,.g3{aspect-ratio:1}
.g4{grid-column:span 2;aspect-ratio:16/10}
.g5,.g6{aspect-ratio:4/5}
.g7{grid-column:span 2;aspect-ratio:2/1}

/* Grand ecran : mosaique justifiee. La devanture ouvre en bandeau, puis deux
   bandes de trois photos. La largeur de chaque case suit le format de sa
   photo, les hauteurs de bande sont fixes : les rangees s'alignent au pixel
   et le recadrage reste sous 10 %. Placement explicite, l'ordre du DOM reste
   celui de la lecture (et celui de la visionneuse). */
@media (min-width:48rem){
  .galerie__grid{
    grid-template-columns:repeat(12,1fr);
    grid-template-rows:auto clamp(11rem,20vw,16rem) clamp(15rem,29vw,23rem);
    gap:var(--s4);
  }
  .galerie__grid > li{aspect-ratio:auto}
  .g1{grid-column:1 / -1;   grid-row:1; aspect-ratio:21/9}   /* devanture      */
  .g2{grid-column:1 / span 3;  grid-row:2}                   /* vitrine        */
  .g3{grid-column:7 / span 6;  grid-row:3}                   /* fruits rouges  */
  .g4{grid-column:4 / span 4;  grid-row:2}                   /* comptoir       */
  .g5{grid-column:1 / span 3;  grid-row:3}                   /* plateau        */
  .g6{grid-column:4 / span 3;  grid-row:3}                   /* epi peint      */
  .g7{grid-column:8 / span 5;  grid-row:2}                   /* rayon de pains */
}
.visionneuse{
  border:0;padding:0;background:transparent;
  width:100%;height:100%;max-width:100%;max-height:100%;
}
.visionneuse::backdrop{background:rgba(20,12,8,.94);backdrop-filter:blur(4px)}
.visionneuse__in{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(3.5rem,8vw,4.5rem) clamp(.75rem,3vw,4rem);position:relative;
}
.visionneuse img{max-width:100%;max-height:calc(100dvh - 9rem);width:auto;border-radius:var(--r-lg)}
.visionneuse figcaption{
  position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,1.75rem);text-align:center;
  color:#E8DCD0;font-size:var(--fs-sm);padding-inline:clamp(1rem,8vw,5rem);
}
@media (prefers-reduced-motion:no-preference){
  .visionneuse[open]{animation:fondu 260ms var(--ease-out)}
  .visionneuse[open] img{animation:zoomEntre 380ms var(--ease-out)}
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes zoomEntre{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.v-btn{
  position:absolute;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(251,248,244,.14);
  border:1px solid rgba(251,248,244,.3);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease-ressort);
}
.v-btn:hover{background:rgba(251,248,244,.28);transform:scale(1.08)}
.v-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-fermer{top:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem)}
.v-prec{left:clamp(.5rem,2vw,1.5rem);top:50%;translate:0 -50%}
.v-suiv{right:clamp(.5rem,2vw,1.5rem);top:50%;translate:0 -50%}

/* ---------- 16. Avis --------------------------------------------------- */
.avis{background:var(--surface-2);position:relative;overflow:hidden}
.avis::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 10%,rgba(166,56,44,.07),transparent 60%);
}
.avis > *{position:relative}
.avis__tete{display:grid;gap:var(--s5) clamp(2rem,5vw,4rem);margin-bottom:var(--s8)}
.avis__score{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.avis__score .chiffre{
  font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}
.avis__score .sur{color:var(--text-muted);font-size:var(--fs-sm)}
.avis__liste{display:grid;gap:var(--s5)}
.avis figure{
  background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(1.75rem,3.4vw,2.5rem);position:relative;
  box-shadow:var(--sh-1);
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.avis figure::before{
  content:"\201C";position:absolute;top:.15em;right:.35em;
  font-family:var(--font-display);font-size:5.5rem;line-height:1;
  color:var(--accent);opacity:.13;pointer-events:none;
}
.avis figure:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.avis blockquote{font-family:var(--font-display);font-size:var(--fs-md);line-height:1.5;margin-bottom:var(--s5)}
.avis figcaption{font-size:var(--fs-xs);color:var(--text-muted);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
@media (min-width:48rem){
  .avis__tete{grid-template-columns:1fr auto;align-items:end}
  .avis__tete .numero{grid-column:1 / -1}
  .avis__liste{grid-template-columns:repeat(3,1fr);align-items:start}
  .avis figure:nth-of-type(2){transform:translateY(2.25rem)}
  .avis figure:nth-of-type(3){transform:translateY(.75rem)}
  .avis figure:nth-of-type(2):hover{transform:translateY(calc(2.25rem - 6px))}
  .avis figure:nth-of-type(3):hover{transform:translateY(calc(.75rem - 6px))}
}

/* ---------- 17. Infos pratiques --------------------------------------- */
.infos__grid{display:grid;gap:var(--s7)}
.encart{
  background:var(--surface-2);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh-1);
}
.horaires{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.horaires caption{text-align:left;margin-bottom:var(--s5);color:var(--text-muted);font-size:var(--fs-sm)}
.horaires th{text-align:left;font-weight:500;padding:.8rem .6rem;color:var(--text-muted);
  border-radius:var(--r-xs) 0 0 var(--r-xs)}
.horaires td{text-align:right;padding:.8rem .6rem;border-radius:0 var(--r-xs) var(--r-xs) 0}
.horaires tr{transition:background var(--t) var(--ease)}
.horaires tr:hover th,.horaires tr:hover td{background:var(--surface-3)}
.horaires tr + tr th,.horaires tr + tr td{box-shadow:inset 0 1px 0 var(--border)}
.horaires tr[data-jour-actuel] th,.horaires tr[data-jour-actuel] td{
  font-weight:700;color:var(--text);background:var(--surface);
}
.horaires .marqueur{
  margin-left:.6rem;font-size:var(--fs-xs);font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--accent);border-radius:var(--r-pill);padding:.15rem .55rem;
}
/* En theme sombre l'accent s'eclaircit : du blanc dessus ne tiendrait que
   2,9:1. L'etiquette passe alors en encre sombre (5,5:1). */
@media (prefers-color-scheme:dark){.horaires .marqueur{color:#241812}}
.horaires .ferme{color:var(--accent)}
.coord{display:grid;gap:var(--s5)}
.coord dt{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.16em;
  color:var(--text-muted);font-weight:600;margin-bottom:.4rem;
}
.coord dd{font-size:var(--fs-md);line-height:1.5}
.coord dd small{display:block;font-size:var(--fs-sm);color:var(--text-muted);margin-top:.2rem}
.coord a{text-decoration:none;border-bottom:1.5px solid var(--line-strong);padding-bottom:1px;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.coord a:hover{border-color:var(--accent);color:var(--accent)}
/* Le numero est aussi une cible tactile : 44 px de haut au doigt, avec un
   souligne qui reste colle au texte (donc pas de bordure basse ici). */
@media (max-width:47.999rem){
  .coord dd a[href^="tel"]{
    border-bottom:0;display:inline-flex;align-items:center;min-height:44px;
    text-decoration:underline;text-underline-offset:4px;
    text-decoration-color:var(--line-strong);text-decoration-thickness:1px;
  }
}
.infos__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.carte{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-1)}
.carte iframe{width:100%;height:clamp(280px,34vw,420px);border:0;filter:saturate(.7) contrast(1.02)}
@media (prefers-color-scheme:dark){.carte iframe{filter:saturate(.55) invert(.92) hue-rotate(180deg)}}
@media (min-width:56rem){
  .infos__grid{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,6rem)}
  .infos__grid > .carte{grid-column:1 / -1}
}

/* ---------- 18. Pied de page ------------------------------------------ */
.pied{
  background:var(--brand-dark);color:var(--on-brand);
  padding-block:var(--s9) var(--s6);position:relative;overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.pied::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 20% 0%,rgba(122,90,69,.22),transparent 60%);
}
.pied > *{position:relative}
.pied__grid{display:grid;gap:var(--s7)}
.pied__badge{width:104px;height:auto;color:var(--on-brand);margin-bottom:var(--s6)}
.pied address{font-style:normal;font-size:var(--fs-sm);line-height:1.75;color:#DCCDBF}
.pied a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(251,248,244,.3);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.pied a:hover{border-color:#FBF8F4}
.pied h3{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.16em;
  font-family:var(--font-sans);font-weight:600;color:var(--on-brand-muted);margin-bottom:var(--s4);
}
.pied__liens li{margin-bottom:.6rem;font-size:var(--fs-sm)}
.pied__liens a{transition:padding-left var(--t) var(--ease-out),border-color var(--t) var(--ease)}
.pied__liens a:hover{padding-left:.4rem}
.pied .social{display:inline-flex;align-items:center;gap:.5rem;border-bottom:0}
.pied .social span{border-bottom:1px solid rgba(251,248,244,.3)}
.pied .social:hover span{border-color:#FBF8F4}
.pied .social svg{width:18px;height:18px;fill:currentColor;flex:none;
  transition:transform var(--t) var(--ease-ressort)}
.pied .social:hover svg{transform:scale(1.15)}
/* Au doigt, 44 px de hauteur minimum sur les liens du pied et l'ecusson.
   Le souligne passe en text-decoration : une bordure basse se retrouverait
   collee au bas de la zone de 44 px, detachee du mot. */
@media (max-width:47.999rem){
  .marque{min-height:44px}
  .pied__liens a,.pied address a{display:inline-flex;align-items:center;min-height:44px}
  .pied__liens a:not(.social),.pied address a{
    border-bottom:0;text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:1px;text-decoration-color:rgba(251,248,244,.32);
  }
  .pied__liens a:not(.social):hover,.pied address a:hover{text-decoration-color:#FBF8F4}
  .pied__liens li{margin-bottom:0}
}
.pied details{margin-top:var(--s7);border-top:1px solid var(--on-brand-line);padding-top:var(--s5)}
.pied summary{
  cursor:pointer;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;color:var(--on-brand-muted);list-style:none;
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  transition:color var(--t) var(--ease);
}
.pied summary:hover{color:var(--on-brand)}
.pied summary::-webkit-details-marker{display:none}
.pied summary::after{content:"+";font-size:1.15em;line-height:1;transition:transform var(--t) var(--ease-ressort)}
.pied details[open] summary::after{content:"\2212"}
.pied details p{font-size:var(--fs-xs);color:#C3B2A3;margin-top:var(--s2);max-width:74ch;line-height:1.75}
.pied details p + p{margin-top:var(--s3)}
.pied__bas{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--on-brand-line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  font-size:var(--fs-xs);color:var(--on-brand-muted);
}
@media (min-width:48rem){.pied__grid{grid-template-columns:1.5fr 1fr 1fr}}

/* ---------- 19. Barre d'action mobile --------------------------------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barre);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre-mobile a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:58px;text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  background:var(--surface);color:var(--text);
  transition:filter var(--t) var(--ease);
}
.barre-mobile a:active{filter:brightness(.94)}
.barre-mobile a:first-child{background:var(--brand);color:var(--on-brand)}
@media (prefers-color-scheme:dark){.barre-mobile a:first-child{background:#F1E8DF;color:#1B100A}}
.barre-mobile svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}
body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
@media (min-width:60rem){
  .barre-mobile{display:none}
  body{padding-bottom:0}
}

/* ---------- 20. Mouvement --------------------------------------------- */
/* Tout ce bloc est desactive si le visiteur limite les animations : les
   elements restent alors simplement visibles, aucune classe n'est requise. */
@media (prefers-reduced-motion:no-preference){

  /* 20.1 Apparition au defilement, avec cascade reglable par --d */
  .rev{
    opacity:0;transform:translateY(26px);
    transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out);
    transition-delay:calc(var(--d,0) * 90ms);
  }
  .rev.vu{opacity:1;transform:none}
  .d1{--d:1} .d2{--d:2} .d3{--d:3} .d4{--d:4}

  /* 20.2 Image revelee par un volet qui remonte */
  .rev--volet{opacity:1;transform:none;clip-path:inset(100% 0 0 0);
    transition:clip-path 1100ms var(--ease-out)}
  .rev--volet.vu{clip-path:inset(0 0 0 0)}

  /* 20.3 Arrivee laterale, pour les demi-bandes */
  .rev--gauche{opacity:0;transform:translateX(-34px)}
  .rev--gauche.vu{opacity:1;transform:none}

  /* 20.4 Titres decoupes mot a mot par main.js : chaque mot monte de sa
     propre ligne, decale de 34 ms sur le precedent. */
  /* La fenetre garde de l'air en haut et en bas, sinon elle rogne les
     accents et les jambages pendant la montee. */
  .mot{display:inline-block;overflow:hidden;vertical-align:top;
    padding-block:.14em;margin-block:-.14em}
  /* Un titre decoupe se revele par ses mots : la montee du bloc entier
     ferait double emploi, on la neutralise. */
  .rev[data-split]{opacity:1;transform:none;transition:none}
  .mot > span{
    display:inline-block;transform:translateY(105%);
    transition:transform 900ms var(--ease-out);
    transition-delay:calc(var(--i,0) * 34ms);
  }
  .vu .mot > span,.mot.vu > span{transform:none}

  /* 20.5 L'epi de « La maison » : les grains eclosent un a un */
  .maison__orn ellipse{opacity:0;transform-box:fill-box;transform-origin:center;
    transform:scale(.4);transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-ressort)}
  .maison__in.vu .maison__orn ellipse{opacity:1;transform:none}
  .maison__orn ellipse:nth-child(2n){transition-delay:60ms}
  .maison__orn ellipse:nth-child(3n){transition-delay:120ms}
  .maison__orn ellipse:nth-child(5n){transition-delay:180ms}
  .maison__orn path{stroke-dasharray:120;stroke-dashoffset:120;
    transition:stroke-dashoffset 1100ms var(--ease-out)}
  .maison__in.vu .maison__orn path{stroke-dashoffset:0}

  /* 20.6 Jauge de lecture native, sans JavaScript la ou c'est supporte */
  @supports (animation-timeline:scroll()){
    .progres{animation:jauge linear both;animation-timeline:scroll(root block)}
  }
  @keyframes jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Sans animation : rien ne bouge, rien n'est cache. */
@media (prefers-reduced-motion:reduce){
  .rev,.rev--volet,.rev--gauche{opacity:1;transform:none;clip-path:none}
  .tete-section .filet,.numero .filet{transform:scaleX(1)}
  .mot,.mot > span{display:inline;overflow:visible;transform:none}
  .progres{display:none}
}