/* ═══════════════════════════════════════════════════════════════════════════
   RESTO LE ST-WEN — feuille de style unique, sans dépendance.

   Tout ce fichier applique la charte validée le 22/10/2026. Règle de fer :
   AUCUNE couleur, AUCUNE taille, AUCUN espacement qui n'y figure pas. S'il en
   faut un nouveau, c'est la charte qu'on met à jour — pas cette feuille.

   ── D'OÙ VIENNENT LES COULEURS ───────────────────────────────────────────
   Elles sont relevées sur LEUR logo et LEURS cartes, pas choisies. Le sable
   #E7D5BF est la valeur exacte lue dans le fichier de leur logo (une première
   estimation à l'œil donnait #E8DCC8 : c'est la différence entre mesurer et
   approcher). Le bronze est celui de leurs couverts, l'olive celui des rameaux,
   le charbon et l'or ceux de leur carte hebdomadaire.

   ── LE BRONZE CLAIR NE PORTE JAMAIS DE TEXTE COURANT ─────────────────────
   Contraste calculé : 4,02 sur le papier — sous la barre AA de 4,5. Un bouton
   en bronze clair avec un libellé crème serait illisible pour une partie des
   clients, et ça ne se voit pas à l'œil. Tout bronze qui porte du texte est
   donc --bronze-fonce (6,10).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --papier:#F2EDE3;
  --papier-haut:#FAF7F1;
  --sable:#E7D5BF;
  --encre:#211E1A;
  --encre-douce:#4A443B;
  --taupe:#7A7259;
  --bronze:#8B6F4E;
  --bronze-fonce:#6B5438;
  --olive:#6E7356;
  --olive-fonce:#545942;
  --charbon:#1C1A17;
  --dore:#D9B779;

  --display:'Prata',Georgia,'Times New Roman',serif;
  --texte:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --etroit:'Archivo Narrow','Archivo',sans-serif;

  /* Échelle d'espacement : écart constant d'environ 62 %, bien au-dessus du
     minimum de 25 %. Deux paliers voisins ne se confondent donc jamais. */
  --e1:6px; --e2:10px; --e3:16px; --e4:26px; --e5:42px; --e6:68px; --e7:110px;

  --rail:320px;
  --entree:cubic-bezier(0.16,1,0.3,1);
  --sortie:cubic-bezier(0.4,0,1,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bronze-fonce)}

/* Le focus clavier est VISIBLE partout. Un site qu'on ne peut pas parcourir
   au clavier n'est pas fini, quelle que soit son allure. */
:focus-visible{outline:2px solid var(--bronze-fonce);outline-offset:3px}

.pour-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.saut{
  position:absolute;left:var(--e3);top:-60px;z-index:60;
  background:var(--encre);color:var(--papier);padding:var(--e2) var(--e3);
  font-family:var(--etroit);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:top .18s var(--entree);
}
.saut:focus{top:var(--e3)}

/* ── ÉCRAN D'OUVERTURE ───────────────────────────────────────────────────
   Leur logo sur LEUR sable. 1,5 s, puis fondu de 0,5 s. */
.splash{
  position:fixed;inset:0;z-index:100;
  background:var(--sable);
  display:grid;place-items:center;
  animation:splash-sortie .5s var(--sortie) 1.5s forwards;
}
.splash__logo{width:min(46vw,300px);height:auto;animation:splash-logo .7s var(--entree) both}
@keyframes splash-logo{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes splash-sortie{to{opacity:0;visibility:hidden}}

/* ── BANDE D'ANNONCE ─────────────────────────────────────────────────────── */
.annonce{background:var(--charbon);color:var(--sable);position:relative;z-index:30}
.annonce p{
  margin:0;padding:var(--e2) var(--e4);text-align:center;
  font-family:var(--etroit);font-size:15px;letter-spacing:.04em;
}
.annonce a{color:var(--dore);margin-left:var(--e2)}

/* ═══ LA COMPOSITION — asymétrie en deux temps ══════════════════════════════
   Le rail porte l'identité et l'état ; il reste à l'écran pendant qu'on lit.
   Ce n'est pas un parti décoratif : l'état « ouvert / fermé » et le numéro
   sont la raison pour laquelle on ouvre cette page. */
.cadre{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

.rail{
  position:sticky;top:0;align-self:start;height:100vh;
  background:var(--sable);
  border-right:1px solid var(--bronze);
  padding:var(--e5) var(--e4);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--e4);
}
.rail__haut{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e3)}
.marque{display:block;width:150px}
.marque img{width:100%}

.nav{display:flex;flex-direction:column;gap:var(--e2);margin-block:var(--e4)}
.nav a{
  font-family:var(--etroit);font-size:17px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;padding-bottom:3px;width:fit-content;
  border-bottom:1px solid transparent;
  transition:border-color .22s var(--entree),color .22s var(--entree);
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--bronze-fonce);color:var(--bronze-fonce)}

.rail__bas{display:flex;flex-direction:column;gap:var(--e2)}
.etat{
  margin:0;font-family:var(--etroit);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive-fonce);display:flex;align-items:center;gap:var(--e2);
}
.etat__pt{width:9px;height:9px;border-radius:50%;background:var(--olive-fonce);flex:none}
.etat.is-closed{color:var(--encre-douce)}
.etat.is-closed .etat__pt{background:var(--taupe)}

.tel{
  font-family:var(--display);font-size:25px;line-height:1.1;
  color:var(--encre);text-decoration:none;width:fit-content;
  border-bottom:1px solid var(--bronze);
  transition:border-color .22s var(--entree);
}
.tel:hover,.tel:focus-visible{border-bottom-color:var(--encre)}
.rail__lieu{
  margin:0;font-size:15px;line-height:1.45;color:var(--encre-douce);
}

/* Le bouton du menu : caché tant que le rail est une colonne. */
.burger{display:none}

/* ═══ LA COLONNE QUI DÉFILE ═══════════════════════════════════════════════ */
.flux{min-width:0;background:var(--papier)}

/* ── L'ASSIETTE DU JOUR ──────────────────────────────────────────────────
   Le bloc qui porte le site. Pas de hauteur d'écran imposée : la page doit
   être lisible dès la première image, pas après un défilement. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
.plat{padding:var(--e6) var(--e5);position:relative;display:flex;flex-direction:column;align-items:flex-start}
.plat__prix{
  position:absolute;top:var(--e5);right:var(--e5);
  width:84px;height:84px;border-radius:50%;
  background:var(--taupe);color:var(--papier-haut);
  display:grid;place-items:center;margin:0;
  font-family:var(--display);font-size:23px;
}
.plat__jour{
  margin:0 0 var(--e3);
  font-family:var(--etroit);font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-fonce);
}
.plat__nom{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.4vw,66px);line-height:1.02;letter-spacing:-.01em;
  margin:0 0 var(--e4);max-width:13ch;text-wrap:balance;
}
.plat__inclut{margin:0 0 var(--e3);max-width:40ch;color:var(--encre-douce)}
.plat__note{
  margin:0 0 var(--e5);max-width:44ch;font-size:15px;color:var(--taupe);
  padding-left:var(--e3);border-left:1px solid var(--bronze);
}

.hero__media{position:relative;overflow:hidden;background:var(--sable)}
.hero__media img{width:100%;height:100%;object-fit:cover;min-height:340px}

/* ── LE BOUTON ───────────────────────────────────────────────────────────
   Fond bronze FONCÉ : le bronze clair ne passe pas AA sous du texte. */
.bouton{
  display:inline-block;margin-top:auto;
  background:var(--bronze-fonce);color:var(--papier);
  padding:var(--e3) var(--e4);text-decoration:none;
  font-family:var(--etroit);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--bronze-fonce);
  transition:background-color .22s var(--entree),color .22s var(--entree);
}
.bouton:hover,.bouton:focus-visible{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.bouton--clair{background:var(--dore);border-color:var(--dore);color:var(--encre)}
.bouton--clair:hover,.bouton--clair:focus-visible{background:var(--papier);border-color:var(--papier);color:var(--encre)}

/* ── L'ANNONCE DATÉE ─────────────────────────────────────────────────────── */
.promo{
  background:var(--charbon);color:var(--papier);
  padding:var(--e6) var(--e5);
  border-top:1px solid var(--bronze-fonce);
}
.promo__sur{
  margin:0 0 var(--e2);font-family:var(--etroit);font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dore);
}
.promo__titre{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,48px);line-height:1.06;margin:0 0 var(--e3);
}
.promo__texte{margin:0 0 var(--e4);max-width:56ch;color:var(--sable)}
.lien-fleche{
  font-family:var(--etroit);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dore);text-decoration:none;border-bottom:1px solid var(--dore);
  padding-bottom:3px;
}
.lien-fleche::after{content:' →'}

/* ── LES BLOCS ───────────────────────────────────────────────────────────── */
.bloc{padding:var(--e7) var(--e5);border-top:1px solid var(--sable)}
.bloc--sable{background:var(--sable);border-top-color:var(--bronze)}
.bloc--sombre{background:var(--charbon);color:var(--papier);border-top-color:var(--bronze-fonce);padding:0}

.sur{
  margin:0 0 var(--e2);font-family:var(--etroit);font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-fonce);
}
.sur--clair{color:var(--dore)}
.titre{
  font-family:var(--display);font-weight:400;
  font-size:clamp(29px,4.2vw,50px);line-height:1.06;margin:0 0 var(--e5);
  text-wrap:balance;
}
.titre--clair{color:var(--papier)}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--e5);align-items:start}
.duo--inverse{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:0;align-items:stretch}
.duo--inverse .duo__texte{padding:var(--e7) var(--e5)}
.duo--inverse .duo__image{height:100%}
.duo--inverse .duo__image img{width:100%;height:100%;object-fit:cover;min-height:380px}
.duo__texte p{margin:0 0 var(--e3);max-width:52ch}
.duo__image{margin:0}
.duo__image figcaption{
  margin-top:var(--e2);font-family:var(--etroit);font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);
}
.mention{font-size:15px;color:var(--taupe);padding-left:var(--e3);border-left:1px solid var(--bronze)}
.mention--clair{color:var(--sable);border-left-color:var(--dore)}

.faits{display:flex;flex-wrap:wrap;gap:var(--e5);margin:var(--e5) 0 0}
.faits div{margin:0}
.faits dt{
  font-family:var(--etroit);font-size:13px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:var(--e1);
}
.faits dd{margin:0;font-family:var(--display);font-size:27px;line-height:1}
.faits dd small{font-family:var(--texte);font-size:14px;color:var(--encre-douce)}

/* ── LES MENUS ───────────────────────────────────────────────────────────── */
.onglets{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e5)}
.tab{
  font-family:var(--etroit);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--bronze);color:var(--bronze-fonce);
  padding:var(--e2) var(--e3);cursor:pointer;
  transition:background-color .22s var(--entree),color .22s var(--entree);
}
.tab:hover{background:var(--sable)}
.tab.is-active{background:var(--encre);border-color:var(--encre);color:var(--papier)}

.panneau[hidden]{display:none}
.carte__intro{margin:0 0 var(--e5);max-width:56ch;color:var(--encre-douce)}
.carte{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--e5) var(--e6)}
.carte__col{min-width:0}
.carte__h{
  font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;
  margin:0 0 var(--e3);padding-bottom:var(--e2);border-bottom:1px solid var(--bronze);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
}
.carte__h .tag{
  font-family:var(--etroit);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--taupe);flex:none;
}
.carte__secnote{margin:0 0 var(--e3);font-size:15px;color:var(--taupe)}
.dishes{list-style:none;margin:0 0 var(--e5);padding:0}
.dishes li{display:flex;gap:var(--e3);justify-content:space-between;align-items:baseline;padding:var(--e2) 0;border-bottom:1px solid var(--sable)}
.bloc--sable .dishes li{border-bottom-color:var(--bronze)}
.dishes li:last-child{border-bottom:0}
.dish{min-width:0}
.dish b{font-weight:600;display:block}
.dish small{display:block;font-size:14px;line-height:1.5;color:var(--encre-douce);margin-top:2px}
.price{font-family:var(--display);font-size:19px;white-space:nowrap;flex:none;color:var(--bronze-fonce)}
.carte__note{margin:var(--e4) 0 0;font-size:15px;color:var(--taupe);max-width:60ch;padding-left:var(--e3);border-left:1px solid var(--bronze)}
.carte__pied{margin:var(--e5) 0 0;font-size:15px;color:var(--taupe);max-width:62ch}

/* ── HEURES ET ADRESSE ───────────────────────────────────────────────────── */
.intro-infos{margin:0 0 var(--e5);max-width:58ch;color:var(--encre-douce)}
.duo--infos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hours{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.hours th,.hours td{padding:var(--e2) 0;border-bottom:1px solid var(--bronze);text-align:left;font-weight:400}
.hours th{font-family:var(--etroit);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}
.hours td{text-align:right;font-family:var(--display);font-size:18px}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours td.closed{color:var(--taupe);font-family:var(--texte);font-size:16px}
.hours tr.is-today th,.hours tr.is-today td{color:var(--encre);font-weight:600}
.hours tr.is-today th::after{content:' · aujourd’hui';font-size:12px;letter-spacing:.14em;color:var(--bronze-fonce)}

.exceptions{list-style:none;margin:var(--e4) 0 0;padding:0;font-size:15px;color:var(--encre-douce)}
.exceptions li{padding:var(--e1) 0;border-bottom:1px solid var(--bronze)}

.coord{font-style:normal}
.coord__ligne{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--e3);margin:0 0 var(--e3);align-items:baseline}
.coord__ligne span{
  font-family:var(--etroit);font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--taupe);
}
.coord__ligne a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--bronze)}
.coord__ligne a:hover,.coord__ligne a:focus-visible{border-bottom-color:var(--encre)}

/* ── L'APERÇU GOOGLE MAPS ────────────────────────────────────────────────
   Pas de coins arrondis — comme tout le reste de cette page, sauf la
   pastille du prix. La carte est encadrée du même bronze que les tableaux. */
.carte-lieu{margin-top:var(--e5);border:1px solid var(--bronze);background:var(--papier-haut)}
.carte-lieu iframe{display:block;width:100%;height:380px;border:0;filter:saturate(.82)}
.carte-lieu__lien{
  display:block;padding:var(--e3) var(--e4);
  font-family:var(--etroit);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;border-top:1px solid var(--bronze);
  transition:background-color .22s var(--entree);
}
.carte-lieu__lien::after{content:' →'}
.carte-lieu__lien:hover,.carte-lieu__lien:focus-visible{background:var(--sable)}

/* ── PIED DE PAGE ────────────────────────────────────────────────────────── */
.pied{background:var(--charbon);color:var(--sable);padding:var(--e6) var(--e5);text-align:center}
.pied__logo{width:92px;margin:0 auto var(--e3);filter:brightness(0) invert(1);opacity:.92}
.pied__nom{font-family:var(--display);font-size:25px;margin:0 0 var(--e1);color:var(--papier)}
.pied__ligne{margin:0 0 var(--e4);font-size:16px}
.pied__ligne a,.pied__demo a{color:var(--dore)}
.pied__demo{margin:0;font-size:14px;line-height:1.6;color:var(--taupe);max-width:58ch;margin-inline:auto}

/* ── RÉVÉLATION AU DÉFILEMENT ────────────────────────────────────────────
   Un état de repos VISIBLE : si le script ne tourne pas, la page se lit
   quand même. C'est `anim.js` qui ajoute data-revealed, pas le CSS qui
   cacherait le contenu en attendant. */
[data-reveal]{opacity:1}

/* ═══ TÉLÉPHONE ET TABLETTE ════════════════════════════════════════════════
   Le rail redevient une barre : une colonne fixe sur 375 px de large
   mangerait la moitié de l'écran. */
@media (max-width:980px){
  .cadre{grid-template-columns:1fr}
  .rail{
    position:sticky;top:0;height:auto;
    flex-direction:row;align-items:center;flex-wrap:wrap;
    padding:var(--e3) var(--e4);gap:var(--e3);
    border-right:0;border-bottom:1px solid var(--bronze);z-index:20;
  }
  .rail__haut{flex:1;align-items:center}
  .marque{width:88px}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;background:none;border:1px solid var(--bronze);cursor:pointer;
    align-items:center;
  }
  .burger span{display:block;width:20px;height:1.5px;background:var(--encre);transition:transform .22s var(--entree),opacity .22s var(--entree)}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav{
    display:none;width:100%;order:3;margin:0;
    padding-top:var(--e3);border-top:1px solid var(--bronze);
  }
  .nav.is-open{display:flex}
  .rail__bas{order:2;flex-direction:row;align-items:center;gap:var(--e3);width:100%;
    flex-wrap:wrap;border-top:1px solid var(--bronze);padding-top:var(--e3)}
  .tel{font-size:21px}
  .rail__lieu{display:none}

  .hero{grid-template-columns:1fr}
  .hero__media{order:-1}
  .hero__media img{min-height:230px;max-height:46vh}
  .plat{padding:var(--e5) var(--e4)}
  .plat__prix{top:var(--e4);right:var(--e4);width:68px;height:68px;font-size:19px}
  .plat__nom{max-width:none;padding-right:80px}

  .bloc{padding:var(--e6) var(--e4)}
  .promo{padding:var(--e6) var(--e4)}
  .duo,.duo--infos{grid-template-columns:1fr;gap:var(--e5)}
  .duo--inverse{gap:0}
  .duo--inverse .duo__texte{padding:var(--e6) var(--e4)}
  .duo--inverse .duo__image img{min-height:260px;max-height:44vh}
  .duo--inverse .duo__image{order:-1}
  .faits{gap:var(--e4)}
  .coord__ligne{grid-template-columns:1fr;gap:2px}
  .carte-lieu iframe{height:260px}
  .pied{padding:var(--e6) var(--e4)}
}

@media (max-width:520px){
  body{font-size:16px}
  .carte{grid-template-columns:1fr;gap:var(--e4)}
  .faits{flex-direction:column;gap:var(--e3)}
}

/* ── MOUVEMENT RÉDUIT ────────────────────────────────────────────────────
   Tout s'arrête, y compris l'écran d'ouverture, qui disparaît presque
   aussitôt plutôt que de faire attendre. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .splash{animation-delay:0s}
}