/* ============================================================
   MAILLARD — feuille de style unique.

   La page est sombre parce que la 3D l'exige : un fond clair
   noierait les reflets du fromage et de la tomate. Tout le
   reste du système découle de cette contrainte-là.
   ============================================================ */

:root{
  /* --- Nuit et braise ---------------------------------------
     Le fond n'est jamais #000 : le noir pur aplatit la scène,
     on ne distingue plus le bord du pain du vide. ----------- */
  --noir-900:#0B0906;
  --noir-800:#141009;
  --noir-700:#1E1811;
  --charbon:#2A231A;

  --braise-600:#C2410C;
  --braise-500:#EA580C;
  --braise-400:#F97316;
  --mais-400:#FBBF24;

  --metal:#8A8175;
  --creme:#F5EFE6;
  --doux:#A89F92;

  --f-titre:"Anybody", "Arial Narrow", system-ui, sans-serif;
  --f-texte:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Une seule échelle verticale : deux marges qui n'en sont pas
     issues, c'est deux marges qui vont diverger au premier
     changement. */
  --e1:.5rem;
  --e2:1rem;
  --e3:1.75rem;
  --e4:3rem;
  --e5:5rem;
  --e6:8rem;
  --e7:clamp(6rem, 13vh, 11rem);

  --r-petit:4px;
  --r-carte:14px;
  --r-plein:999px;

  /* Les ombres sont chaudes, jamais grises : une ombre grise sur
     un fond brun-noir se voit, et fait sale. */
  --ombre-carte:0 30px 60px -30px rgba(194,65,12,.35);

  --marge:clamp(1.25rem, 5vw, 4.5rem);
  --largeur:min(1180px, 100% - 2 * var(--marge));

  --duree:.22s;
  --courbe:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE
   ============================================================ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

/* Pas d'overflow-x ici : un `overflow` autre que `visible` sur un
   ancêtre casse le `position:sticky` de l'atelier. Le non-
   débordement se règle dans la mise en page, pas au rabot. */
body{
  margin:0;
  background:var(--noir-900);
  color:var(--creme);
  font-family:var(--f-texte);
  font-size:clamp(1rem, 1.05vw, 1.15rem);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* --- Le grain -----------------------------------------------
   Fixe, au-dessus de tout, sans jamais intercepter un clic. Il
   ne défile pas : un grain qui bouge avec la page se lit comme
   un défaut d'affichage, pas comme une matière. -------------- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--f-titre);
  line-height:.95;
  margin:0;
  text-wrap:balance;
}

p{margin:0}

a{color:var(--braise-400);text-decoration-thickness:1px;text-underline-offset:.25em}
a:hover{color:var(--mais-400)}

/* Sur fond presque noir un contour sombre ne se voit pas :
   le focus est en maïs, la couleur la plus lumineuse du jeu. */
:focus-visible{
  outline:2px solid var(--mais-400);
  outline-offset:3px;
  border-radius:var(--r-petit);
}

.conteneur{width:var(--largeur);margin-inline:auto}
.lecture{max-width:62ch}

.mono{
  font-family:var(--f-mono);
  font-size:.82em;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* ============================================================
   RÉVÉLATIONS

   Une seule fois, jamais au retour : l'observateur se désabonne
   dès qu'il a servi. Le CSS ne pose l'état de départ que si JS
   est là pour le lever — sinon la page s'affiche vide chez qui
   n'exécute pas nos scripts.
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s var(--courbe), transform .75s var(--courbe);
}
.js .reveal.vu{opacity:1;transform:none}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.tete{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e3);
  padding:var(--e2) var(--marge);
  background:linear-gradient(to bottom, rgba(11,9,6,.92), rgba(11,9,6,0));
}

.tete__marque{
  font-family:var(--f-titre);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:1.05rem;
  letter-spacing:.14em;
  color:var(--creme);
  text-decoration:none;
}
.tete__marque:hover{color:var(--braise-400)}

.tete__nav{display:flex;gap:clamp(.9rem, 2.4vw, 2rem);align-items:center}
.tete__nav a{
  color:var(--doux);
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.tete__nav a:hover{color:var(--creme)}
.tete__nav a:last-child{color:var(--braise-400)}
@media (max-width:700px){
  .tete__nav a:not(:last-child){display:none}
}

/* ============================================================
   1 · ACCROCHE
   ============================================================ */
.accroche{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:calc(var(--e6) + 4vh) 0 var(--e4);
  position:relative;
  overflow:hidden;   /* section isolée : elle ne porte aucun sticky */
}

/* La braise sous le titre — une seule source, décentrée vers le bas. */
.accroche::before{
  content:"";
  position:absolute;
  left:50%;top:62%;
  width:min(150vw, 1600px);
  aspect-ratio:1.6;
  translate:-50% -50%;
  background:radial-gradient(ellipse at center, rgba(194,65,12,.30), rgba(194,65,12,.07) 44%, transparent 68%);
  pointer-events:none;
}

.accroche__inner{
  width:var(--largeur);
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.accroche__sur{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--braise-400);
  margin-bottom:var(--e3);
}

/* Le titre est mesuré en vw et jamais coupé : à 320 px il
   rétrécit plutôt que de passer à la ligne. */
.accroche__titre{
  font-size:clamp(3.5rem, 11vw, 11rem);
  /* État à défilement zéro. Le JS reprend la main dès le premier
     pixel : « wdth » 62 / « wght » 300 vers 130 / 800 sur 600 px,
     plafonné à ce que la largeur disponible autorise. */
  font-variation-settings:"wdth" 62,"wght" 300;
  letter-spacing:-.015em;
  line-height:.88;
  color:var(--creme);
  margin-bottom:var(--e3);
  white-space:nowrap;
}

.accroche__phrase{
  max-width:34ch;
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  color:var(--doux);
  line-height:1.5;
}

.accroche__pied{
  width:var(--largeur);
  margin:var(--e5) auto 0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--e3);
  position:relative;
  z-index:1;
}

.fleche{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  color:var(--doux);
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
}
.fleche:hover{color:var(--creme)}
.fleche svg{animation:descend 2.4s var(--courbe) infinite}
@keyframes descend{
  0%,100%{transform:translateY(0);opacity:.55}
  50%    {transform:translateY(7px);opacity:1}
}

.accroche__chiffres{
  display:flex;
  gap:var(--e3);
  color:var(--metal);
  text-align:right;
}
.accroche__chiffres b{
  display:block;
  font-family:var(--f-mono);
  font-size:1.05rem;
  color:var(--mais-400);
  font-weight:600;
}
.accroche__chiffres span{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media (max-width:700px){
  .accroche__chiffres{display:none}
}

/* ============================================================
   2 · L'ATELIER — la 3D et la carte dans la même scène

   Six cent quarante vh de course, un canevas collé au sommet.
   Aucun ancêtre de ce canevas ne doit porter `overflow`,
   `contain` ou `content-visibility` : le sticky s'arrêterait net.
   ============================================================ */
.atelier{
  position:relative;
  height:640vh;
  background:
    radial-gradient(120% 55% at 50% 0%, var(--noir-800), transparent 62%),
    var(--noir-900);
}

.atelier__collant{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;   /* autorisé : c'est l'élément collant lui-même */
}

/* Le canevas est posé en absolu plutôt qu'en élément de grille :
   une hauteur en pourcentage sur un élément de grille centré ne
   se résout pas partout de la même façon. */
.atelier__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .4s linear;
}
.atelier__canvas.visible{opacity:1}

.atelier__indice{
  position:absolute;
  left:var(--marge);
  bottom:var(--e3);
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--metal);
  opacity:.6;
  transition:opacity .4s var(--courbe);
}
.atelier[data-phase="carte"] .atelier__indice{opacity:0}

/* Repli : l'image que la 3D montrerait à l'arrêt. */
.atelier__repli{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  padding:var(--marge);
}
.atelier__repli img{
  width:auto;
  max-width:min(78vw, 560px);
  max-height:60vh;
  max-height:60svh;
}

/* --- le panneau de la carte ---------------------------------
   Il occupe la moitié droite pendant que le burger tient la
   gauche. Il n'apparaît qu'une fois le burger recomposé — d'où
   l'attribut data-phase, posé par le contrôleur. ------------- */
.atelier__panneau{
  position:absolute;
  top:0; right:0; bottom:0;
  width:47%;
  padding:var(--e6) var(--marge) var(--e4) 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:0;
  transform:translateX(30px);
  transition:opacity .55s var(--courbe), transform .55s var(--courbe);
  pointer-events:none;
}
.atelier[data-phase="carte"] .atelier__panneau{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.atelier__panneau .h2{margin-bottom:var(--e3)}

.menu{
  list-style:none;
  margin:0 0 var(--e3);
  padding:0;
  display:grid;
  gap:2px;
}

.plat{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "nom   ligne"
    "compo ligne";
  column-gap:var(--e2);
  align-items:center;
  padding:.66rem .9rem;
  text-align:left;
  font:inherit;
  color:inherit;
  background:transparent;
  border:0;
  border-left:2px solid transparent;
  border-radius:var(--r-petit);
  cursor:pointer;
  transition:background var(--duree) var(--courbe),
             border-color var(--duree) var(--courbe);
}

.plat__nom{
  grid-area:nom;
  font-family:var(--f-titre);
  font-size:clamp(1.15rem, 1.9vw, 1.6rem);
  line-height:1.1;
  /* +120 points de graisse à la sélection — sur l'axe variable,
     pas sur font-weight, qui sauterait d'un cran entier. */
  font-variation-settings:"wdth" 104,"wght" 400;
  transition:font-variation-settings .22s var(--courbe), color .22s var(--courbe);
}
.plat__compo{
  grid-area:compo;
  color:var(--doux);
  font-size:.86rem;
  line-height:1.4;
}
.plat__ligne{
  grid-area:ligne;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.1rem;
}
.plat__poids{color:var(--metal);font-size:.72rem}
.plat__prix{
  font-family:var(--f-mono);
  font-size:1.05rem;
  font-weight:600;
  color:var(--braise-400);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Un seul état visuel pour le survol, le clavier et la sélection :
   c'est le même geste, il ne doit pas avoir trois apparences. */
.plat:hover,
.plat[aria-pressed="true"]{
  background:var(--noir-700);
  border-left-color:var(--braise-500);
}
.plat:hover .plat__nom,
.plat[aria-pressed="true"] .plat__nom{
  font-variation-settings:"wdth" 104,"wght" 520;
  color:var(--mais-400);
}

.menu__note{
  color:var(--metal);
  font-size:.85rem;
  max-width:44ch;
}

/* --- l'atelier sur écran étroit ------------------------------
   Pas de côte à côte : le burger prend le haut, la carte le bas.
   Le survol n'existe pas au doigt, c'est le défilement et la
   touche qui choisissent. -------------------------------------- */
@media (max-width:979px){
  .atelier__panneau{
    top:auto; left:0; right:0; bottom:0;
    width:auto;
    height:57%;
    padding:0 var(--marge) var(--e3);
    justify-content:flex-end;
  }
  .atelier__panneau .h2{margin-bottom:var(--e2)}
  .plat{padding:.5rem .7rem}
  .menu__note{display:none}
}
@media (max-width:620px){
  .plat__compo{display:none}
  .plat{grid-template-areas:"nom ligne"}
  .atelier__panneau .etiquette{display:none}
}

/* --- sans 3D : l'atelier redevient une section ordinaire ----- */
.atelier[data-mode="repli"]{height:auto}
.atelier[data-mode="repli"] .atelier__collant{
  position:static;
  height:auto;
  overflow:visible;
  padding-block:var(--e7);
}
.atelier[data-mode="repli"] .atelier__canvas,
.atelier[data-mode="repli"] .atelier__indice{display:none}
.atelier[data-mode="repli"] .atelier__repli{
  position:static;
  display:grid;
  margin-bottom:var(--e5);
}
.atelier[data-mode="repli"] .atelier__panneau{
  position:static;
  width:var(--largeur);
  height:auto;
  margin-inline:auto;
  padding:0;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
@media (min-width:920px){
  .atelier[data-mode="repli"] .menu{
    grid-template-columns:1fr 1fr;
    gap:var(--e1) var(--e3);
  }
}

/* ============================================================
   SECTIONS COURANTES
   ============================================================ */
.section{padding-block:var(--e7)}
.section--sombre{background:var(--noir-800)}

.etiquette{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--braise-500);
  margin-bottom:var(--e2);
}

.h2{
  font-size:clamp(2.2rem, 5vw, 4.5rem);
  /* Arrivée à « wdth » 78, détente vers 100 — c'est le JS qui pose
     la valeur de départ, pour que le sans-JS soit déjà juste. */
  font-variation-settings:"wdth" 100,"wght" 760;
  letter-spacing:-.01em;
  color:var(--creme);
  margin-bottom:var(--e4);
}
.atelier__panneau .h2{font-size:clamp(1.9rem, 3.4vw, 3rem)}

/* ============================================================
   3 · LE GESTE — typographie seule, aucune image
   ============================================================ */
.mesures{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap:var(--e3);
  margin-bottom:var(--e5);
  border-top:1px solid var(--charbon);
  padding-top:var(--e3);
}

.mesure__valeur{
  font-family:var(--f-mono);
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  font-weight:600;
  line-height:1;
  color:var(--mais-400);
  font-variant-numeric:tabular-nums;
}
.mesure__valeur em{
  font-style:normal;
  font-size:.42em;
  color:var(--metal);
  margin-left:.25em;
}
.mesure__quoi{
  margin-top:var(--e1);
  color:var(--doux);
  font-size:.95rem;
}

.geste__texte{
  font-size:clamp(1.15rem, 1.9vw, 1.6rem);
  line-height:1.55;
  color:var(--creme);
  max-width:52ch;
}
.geste__texte + .geste__texte{
  margin-top:var(--e3);
  font-size:clamp(1rem, 1.3vw, 1.15rem);
  color:var(--doux);
  max-width:58ch;
}
.geste__texte b{font-weight:inherit;color:var(--braise-400)}

/* ============================================================
   4 · LA MAISON · 5 · LE COMPTOIR
   ============================================================ */
.maison,
.roles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:var(--e4) var(--e3);
}
.bloc{
  border-top:2px solid var(--braise-600);
  padding-top:var(--e2);
}
.bloc h3{
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  font-variation-settings:"wdth" 96,"wght" 700;
  color:var(--creme);
  margin-bottom:var(--e2);
}
.bloc p{color:var(--doux)}

/* L'élévation du comptoir : un dessin, pas une photo. Le trait
   suffit à dire le lieu, et il ne prétend rien montrer de réel. */
.salle{
  margin-bottom:var(--e5);
  padding:var(--e3) 0 0;
  border-top:1px solid var(--charbon);
}
.salle svg{width:100%;height:auto;max-height:46vh}

/* ============================================================
   6 · VENIR
   ============================================================ */
.venir{
  display:grid;
  gap:var(--e4);
  grid-template-columns:1fr;
}
@media (min-width:880px){
  .venir{grid-template-columns:1.1fr .9fr;gap:var(--e5)}
}

.venir dl{margin:0;display:grid;gap:var(--e3)}
.venir dt{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--braise-500);
  margin-bottom:.35rem;
}
.venir dd{
  margin:0;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--creme);
}
.venir dd .mono{color:var(--doux);display:block;font-size:1rem;margin-top:.35rem}
.venir dd a{color:var(--creme);text-decoration-color:var(--braise-500)}
.venir dd a:hover{color:var(--braise-400)}

.seconde{
  padding:var(--e3);
  background:var(--noir-700);
  border:1px solid var(--charbon);
  border-left:3px solid var(--mais-400);
  border-radius:var(--r-carte);
}
.seconde h3{
  font-size:1.4rem;
  font-variation-settings:"wdth" 88,"wght" 720;
  color:var(--mais-400);
  margin-bottom:var(--e2);
}
.seconde p{color:var(--doux)}
.seconde .btn{margin-top:var(--e3)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.7rem;
  border-radius:var(--r-plein);
  background:var(--braise-500);
  color:var(--noir-900);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:background var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.btn:hover{background:var(--braise-400);color:var(--noir-900);transform:translateY(-2px)}

/* ============================================================
   7 · PIED DE PAGE
   ============================================================ */
.pied{
  border-top:1px solid var(--charbon);
  padding:var(--e4) 0 var(--e3);
  background:var(--noir-800);
}
.pied__demo{
  display:flex;
  gap:var(--e2);
  align-items:flex-start;
  padding:var(--e3);
  margin-bottom:var(--e3);
  background:var(--noir-700);
  border-radius:var(--r-carte);
  color:var(--doux);
  font-size:.92rem;
}
.pied__demo svg{flex:none;color:var(--mais-400);margin-top:.15rem}
.pied__demo b{color:var(--creme)}

.pied__bas{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e2) var(--e3);
  align-items:center;
  justify-content:space-between;
  color:var(--metal);
  font-size:.85rem;
}
.pied__bas nav{display:flex;gap:var(--e2);flex-wrap:wrap}
.pied__bas a{color:var(--doux);text-decoration:none}
.pied__bas a:hover{color:var(--braise-400)}

/* ============================================================
   MOUVEMENT RÉDUIT

   Pas seulement la 3D : tout ce qui bouge s'arrête. Le titre
   d'accroche se fige à une largeur lisible plutôt qu'à son état
   de départ, très condensé.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .js .reveal{opacity:1;transform:none}
  .accroche__titre{font-variation-settings:"wdth" 104,"wght" 720}
  .fleche svg{animation:none}
}

/* Le JS ne règle plus la largeur du titre en mouvement réduit :
   c'est cette valeur figée qui s'applique, et à 320 px elle
   débordait de dix pixels. On condense au lieu de rapetisser —
   c'est exactement ce à quoi sert un axe de largeur. */
@media (prefers-reduced-motion: reduce) and (max-width: 520px){
  .accroche__titre{font-variation-settings:"wdth" 88,"wght" 700}
}