/* ═══════════════════════════════════════════════════════════════
   LA TABLE DE L'ÉPICIER — Ménerbes
   Feuille de style. Yayo Studio, 03/09/2026.

   PALETTE — chaque valeur est calculée, pas choisie à l'œil.
   Budget de chroma = C utilisée ÷ C maximale atteignable en sRGB
   pour cette clarté et cette teinte (dichotomie, 60 itérations).

   rôle      hex       OKLCH                    budget   contraste
   chaux    #F5F4F0   oklch(.966 .004  86)      12 %     fond
   craie    #FAFAF9   oklch(.985 .001  86)       6 %     surface haute
   pierre   #EAE3D5   oklch(.918 .020  86)      22 %     surface d'appui
   sable    #D8CEBC   oklch(.855 .026  84)      17 %     filets, bordures
   olive    #4D5444   oklch(.435 .028 127)      25 %     fond sombre
   braise   #A94E39   oklch(.535 .125  34)      65 %     accent, un seul rôle
   encre    #20231E   oklch(.250 .010 127)      15 %     texte

   CONTRASTES WCAG 2.1 mesurés
   encre  sur chaux  14,45:1     chaux  sur encre  14,45:1
   encre  sur pierre 12,45:1     chaux  sur olive   7,15:1
   olive  sur chaux   7,15:1     chaux  sur braise  4,97:1
   braise sur chaux   4,97:1     sable  sur encre  10,20:1
   ⚠ braise sur pierre 4,29:1 → interdit en texte courant, filets seulement
   ⚠ braise sur encre  2,90:1 → jamais sur fond sombre

   ÉCARTS DE TEINTE — aucune paire entre 140° et 220° (§2 des dix
   vérifications) : braise/olive 92°, braise/encre 98°, braise/sable 48°.

   TYPOGRAPHIE
   Fraunces (display serif, x/em 0,482) + Schibsted Grotesk
   (grotesque éditorial, x/em 0,527). Écart 9,3 % : sous 20 %, donc
   aucune compensation de taille. Classes différentes.
   Échelle modulaire unique : base 16 px, ratio 1,250.
   Trame d'espacement unique : base 8 px.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --chaux:#F5F4F0; --craie:#FAFAF9; --pierre:#EAE3D5; --sable:#D8CEBC;
  --olive:#4D5444; --braise:#A94E39; --encre:#20231E;

  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* échelle 16 × 1,25 — aucune taille hors de cette liste */
  --t-1:.8rem; --t0:1rem; --t1:1.25rem; --t2:1.5625rem;
  --t3:1.9531rem; --t4:2.4414rem; --t5:3.0518rem; --t6:3.8147rem;

  /* trame 8 — aucune marge hors de cette liste */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px;
  --e6:64px; --e7:96px; --e8:128px;

  --bord:clamp(20px,5vw,72px);
  --lisible:68ch;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--chaux); color:var(--encre);
  font-family:var(--sans); font-size:var(--t0); line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;background:var(--pierre)}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;
  letter-spacing:-.012em;font-variation-settings:'SOFT' 30,'WONK' 0}
p{max-width:var(--lisible)}
::selection{background:var(--braise);color:var(--chaux)}

/* Focus visible — contrôle UX n°7 */
:where(a,button,input,select,textarea,summary,[tabindex]):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--braise);outline-offset:3px;border-radius:2px}

/* ── L'étiquette : la signature du site ────────────────────────
   Une épicerie s'écrit sur des étiquettes. C'est le seul motif
   décoratif de la page, il porte tous les sur-titres. Capitales
   interlettrées à .12em (Butterick : 0,05–0,12 em). */
.etiq{
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:var(--t-1); letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; background:var(--braise); color:var(--chaux);
}
.etiq.creux{background:transparent;color:var(--braise);
  box-shadow:inset 0 0 0 1px var(--braise)}
.etiq.clair{background:var(--chaux);color:var(--encre)}
/* braise sur pierre ne fait que 4,29:1 — sous les 4,5:1 exigés pour du
   petit texte. Sur fond pierre, l'étiquette creuse passe en olive : 6,17:1. */
.pierre .etiq.creux{color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive)}

/* ── Boutons ───────────────────────────────────────────────────
   Un seul rayon d'angle dans tout le site (2 px), une seule ombre
   (aucune), une seule graisse d'accent. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 var(--e3);border-radius:2px;
  font-family:var(--sans);font-weight:700;font-size:var(--t0);
  text-decoration:none;border:1px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-plein{background:var(--braise);color:var(--chaux)}
.btn-plein:hover{background:var(--encre)}
.btn-vide{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-vide:hover{background:var(--encre);color:var(--chaux)}
.btn-clair{background:var(--chaux);color:var(--encre)}
.btn-clair:hover{background:var(--braise);color:var(--chaux)}

/* ── Bandeau ───────────────────────────────────────────────────
   Il porte les deux choses que le site actuel ne donne nulle part :
   est-ce ouvert, et comment on réserve. */
.tete{
  position:sticky;top:0;z-index:80;background:var(--chaux);
  border-bottom:1px solid var(--sable);
  display:flex;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--bord);
}
.marque{font-family:var(--disp);font-size:var(--t1);line-height:1.05;
  text-decoration:none;white-space:nowrap;display:flex;flex-direction:column;
  min-height:44px;justify-content:center}
.marque small{font-family:var(--sans);font-size:var(--t-1);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.tete nav{margin-left:auto;display:flex;gap:var(--e3);align-items:center}
.tete nav a{font-size:var(--t0);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.tete nav a:hover{border-bottom-color:var(--braise)}
.statut{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--olive);min-height:44px}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--olive);
  flex:none}
.statut[data-ouvert="oui"] .pastille{background:var(--braise)}
@media (max-width:1080px){
  .tete nav a.masq{display:none}
}
@media (max-width:680px){
  .tete{gap:var(--e2);padding:var(--e2) var(--bord)}
  .tete nav{gap:var(--e2)}
  .statut{display:none}
  .marque{font-size:var(--t0)}
  .marque small{font-size:.7rem;letter-spacing:.14em}
  .tete .btn{padding:0 var(--e2);font-size:.9rem}
  .num-long{display:none}
}

/* ── Ouverture ─────────────────────────────────────────────────
   Le titre n'est PAS posé sur la photo : sur un diaporama, le
   contraste change à chaque image et ne peut pas être tenu.
   Texte à gauche sur la chaux (14,45:1), photo à droite. */
.ouverture{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-bottom:1px solid var(--sable);
  /* .ouverture est un <section> : sans cette ligne elle hérite du padding
     commun aux sections, la photo se décolle du bord droit et le bloc de
     texte prend 144 px de marge au lieu de 72. */
  padding:0}
.ouverture .dit{padding:var(--e7) var(--bord) var(--e6);
  display:flex;flex-direction:column;justify-content:center;gap:var(--e3)}
.ouverture h1{font-size:clamp(var(--t4),5.2vw,var(--t6));max-width:15ch;
  font-variation-settings:'SOFT' 30,'WONK' 1,'opsz' 100}
.chapo{font-size:var(--t1);max-width:46ch;color:var(--olive)}
.actions{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e1)}
.ouverture .voir{position:relative;min-height:56svh;background:var(--pierre)}
.ouverture .voir img{width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0}
@media (max-width:900px){
  .ouverture{grid-template-columns:1fr}
  .ouverture .dit{padding:var(--e5) var(--bord) var(--e4);order:2}
  .ouverture .voir{order:1;min-height:36svh}
}

/* ── La bande de service ───────────────────────────────────────
   Horaires, adresse, téléphone : sous le pli, mais sur le premier
   écran. C'est l'information n°1 d'un restaurant, elle ne se
   mérite pas au troisième clic. */
.service{background:var(--olive);color:var(--chaux)}
.service .grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--e5);padding:var(--e5) var(--bord)}
.service h2{font-size:var(--t1);margin-bottom:var(--e2);color:var(--chaux)}
.service dl{font-size:var(--t0);line-height:1.7}
.service dt{display:inline;font-weight:700}
.service dd{display:inline}
.service dd::after{content:'';display:block}
.service a{color:var(--chaux)}
.service .gros{font-family:var(--disp);font-size:var(--t2);
  text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.service .note{font-size:var(--t-1);color:var(--sable);margin-top:var(--e2);
  max-width:40ch}
@media (max-width:900px){
  .service .grille{grid-template-columns:1fr;gap:var(--e4);
    padding:var(--e4) var(--bord)}
}

/* ── Sections ──────────────────────────────────────────────────
   Le rythme vertical ne se répète pas : chaque section a sa hauteur
   propre et son fond. L'écart entre sections (96 px) vaut quatre
   fois l'écart entre éléments (24 px) : on voit où l'une finit. */
section{padding:var(--e7) var(--bord)}
/* Le bandeau est collant et opaque : sans cette ligne, un lien d'ancre
   dépose le titre de section DERRIÈRE le bandeau. Vérifié en ligne. */
[id]{scroll-margin-top:96px}
section.serre{padding:var(--e6) var(--bord)}
.pierre{background:var(--pierre)}
.sombre{background:var(--encre);color:var(--chaux)}
.sombre h2,.sombre h3{color:var(--chaux)}
.sombre p{color:var(--sable)}
.entete{display:flex;flex-direction:column;gap:var(--e2);
  margin-bottom:var(--e5);max-width:60ch}
.entete .etiq{align-self:flex-start}
h2{font-size:clamp(var(--t3),3.6vw,var(--t5))}
h3{font-size:var(--t2)}

/* ── Les cinq comptoirs ────────────────────────────────────────
   La maison est une adresse et cinq métiers. La page le dit comme
   un rayonnage : cinq entrées de même largeur, alignées sur un
   seul axe, chacune avec son étiquette. */
.comptoirs{display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--sable);border:1px solid var(--sable)}
/* auto-fit laissait le cinquième comptoir seul sur une deuxième ligne,
   avec un vide de trois colonnes à côté. Cinq métiers : cinq colonnes,
   puis trois, puis deux, puis une. Jamais d'orphelin. */
@media (max-width:1240px){.comptoirs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.comptoirs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.comptoirs{grid-template-columns:1fr}}
.comptoir{background:var(--chaux);padding:var(--e4) var(--e3);
  display:flex;flex-direction:column;gap:var(--e2)}
.comptoir img{aspect-ratio:4/3;object-fit:cover;width:100%}
.comptoir h3{font-size:var(--t1)}
.comptoir p{font-size:var(--t0);color:var(--olive);max-width:none}
.comptoir .etiq{align-self:flex-start}
/* Le numéro de comptoir : sur la chaux, une puce chaux serait invisible.
   Pierre + olive = 6,17:1, et la puce se lit comme une étiquette de rayon. */
.comptoir .etiq{background:var(--pierre);color:var(--olive)}

/* ── Trois ambiances ───────────────────────────────────────────
   Trois panneaux de hauteurs différentes : la véranda est le sujet,
   elle est plus haute. Rien ne flotte, tout tient sur la trame. */
.ambiances{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--e3);
  align-items:end}
.ambiance figure{display:flex;flex-direction:column;gap:var(--e2)}
.ambiance img{width:100%;object-fit:cover}
.ambiance:nth-child(1) img{aspect-ratio:4/5}
.ambiance:nth-child(2) img{aspect-ratio:4/4.4}
.ambiance:nth-child(3) img{aspect-ratio:4/4.4}
.ambiance figcaption{font-size:var(--t0)}
.ambiance b{font-family:var(--disp);font-size:var(--t1);font-weight:400;
  display:block;margin-bottom:4px}
@media (max-width:900px){
  .ambiances{grid-template-columns:1fr;gap:var(--e4)}
  .ambiance img{aspect-ratio:4/3 !important}
}

/* ── Cuisine : un aplat sombre, une seule photo large ──────────*/
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);
  align-items:center}
.duo img{width:100%;aspect-ratio:5/4;object-fit:cover}
.duo .liste{list-style:none;display:flex;flex-direction:column;gap:var(--e2);
  margin-top:var(--e3)}
.duo .liste li{padding-left:var(--e3);position:relative;max-width:52ch}
.duo .liste li::before{content:'';position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--braise)}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:var(--e4)}}

/* ── La cave : trois domaines nommés ───────────────────────────*/
.domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e4);margin-top:var(--e5)}
.domaine{border-top:1px solid var(--sable);padding-top:var(--e3)}
.sombre .domaine{border-top-color:rgba(216,206,188,.32)}
.domaine h3{font-size:var(--t1);margin-bottom:var(--e1)}
.domaine p{font-size:var(--t0);max-width:none}

/* ── Venir ─────────────────────────────────────────────────────*/
.venir{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);
  align-items:start}
.venir img{width:100%;aspect-ratio:3/2;object-fit:cover}
.horaires{width:100%;border-collapse:collapse;margin-top:var(--e3);
  font-size:var(--t0)}
.horaires th,.horaires td{text-align:left;padding:10px 0;
  border-bottom:1px solid var(--sable)}
.horaires th{font-weight:500}
.horaires td{text-align:right;font-variant-numeric:tabular-nums}
.horaires tr[data-jour].auj th,.horaires tr[data-jour].auj td{font-weight:700}
.coord{margin-top:var(--e4);display:flex;flex-direction:column;gap:var(--e2)}
.coord a{min-height:44px;display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;border-bottom:1px solid var(--sable);width:fit-content}
.coord a:hover{border-bottom-color:var(--braise)}
@media (max-width:900px){.venir{grid-template-columns:1fr;gap:var(--e4)}}

/* ── Pied ──────────────────────────────────────────────────────*/
footer{background:var(--olive);color:var(--chaux);
  padding:var(--e6) var(--bord) var(--e5)}
footer a{color:var(--chaux)}
.pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--e4)}
.pied h3{font-size:var(--t0);font-family:var(--sans);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--e2);
  color:var(--sable)}
.pied p,.pied li{font-size:var(--t0);line-height:1.8;max-width:none}
.pied ul{list-style:none}
.pied a{min-height:44px;display:inline-flex;align-items:center}
.bas{margin-top:var(--e5);padding-top:var(--e3);
  border-top:1px solid rgba(216,206,188,.3);
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);
  font-size:var(--t-1);color:var(--sable)}

/* ── La note du studio ─────────────────────────────────────────
   Elle est visiblement séparée du site : c'est Yayo qui parle,
   pas le restaurant. */
.note-studio{background:var(--chaux);border-top:4px solid var(--braise);
  padding:var(--e6) var(--bord)}
.note-studio .dedans{max-width:78ch}
.note-studio h2{font-size:var(--t3);margin:var(--e2) 0 var(--e3)}
.note-studio ul{list-style:none;display:flex;flex-direction:column;
  gap:var(--e2);margin:var(--e3) 0}
.note-studio li{padding-left:var(--e3);position:relative;max-width:74ch}
.note-studio li::before{content:'';position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--braise)}
.note-studio .sign{margin-top:var(--e4);font-size:var(--t-1);color:var(--olive)}

/* ═══ MOUVEMENT ═══════════════════════════════════════════════
   Le CSS écrit l'état FINAL. Le JS pose la classe .y-on sur <html>
   et c'est elle seule qui met les éléments dans leur état de
   départ. Si le JS ne part pas, la page est entière et lisible :
   le contrôle UX n°1 est tenu par construction, pas par vigilance.
   Aucune bibliothèque, aucun CDN. */
html.y-on .monte{opacity:0;transform:translateY(20px)}
.monte{transition:opacity .7s cubic-bezier(.22,1,.36,1),
                  transform .7s cubic-bezier(.22,1,.36,1)}
html.y-on .monte.vu{opacity:1;transform:none}
html.y-on .cascade>*{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1)}
html.y-on .cascade.vu>*{opacity:1;transform:none}
html.y-on .cascade.vu>*:nth-child(2){transition-delay:.08s}
html.y-on .cascade.vu>*:nth-child(3){transition-delay:.16s}
html.y-on .cascade.vu>*:nth-child(4){transition-delay:.24s}
html.y-on .cascade.vu>*:nth-child(5){transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html.y-on .monte,html.y-on .cascade>*{
    opacity:1 !important;transform:none !important;transition:none !important}
}

/* Impression : le client imprime souvent sa page contact. */
@media print{
  .tete,.note-studio,.ouverture .voir{display:none}
  body{background:var(--craie);color:var(--encre)}
}