/* La Craie (démo 4dayvelopment), bistrot de quartier, Paris 20e.
   Concept « l’ardoise du jour » : la page s’ouvre sur l’ardoise datée du jour, la pancarte
   de la porte dit si c’est ouvert (heure de Paris), puis le carnet de réservations.
   Identité tirée du bistrot parisien : bordeaux du store et des banquettes, ardoise et craie,
   vert Wallace (fontaines, kiosques) pour « ouvert », zinc du comptoir pour les fonds.
   Polices auto-hébergées (SIL OFL 1.1) : Bitter variable 100-900 (texte et titres, une
   égyptienne de devanture) et Playwrite FR Trad (la cursive de l’école française, celle
   qu’on lit sur les ardoises), réservée à ce qui est écrit à la main. */
/* Rend le corps masqué par le <style> du <head> (garde-fou CLS). */
body{visibility:visible}
@font-face{font-family:"Bitter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/bitter-var.woff2") format("woff2")}
@font-face{font-family:"Playwrite FR Trad";font-style:normal;font-weight:100 400;font-display:swap;
  src:url("/fonts/playwrite-fr-trad-var.woff2") format("woff2")}
@font-face{font-family:"Bitter repli";src:local("Georgia");size-adjust:104%;ascent-override:90%;descent-override:24%}

:root{
  color-scheme:light;
  /* couleur */
  --ardoise:oklch(0.296 0.018 179.3);       /* #23302D : l’ardoise, le pied de page */
  --ardoise-clair:oklch(0.371 0.022 174);   /* #34443F */
  --craie:oklch(0.950 0.009 106.6);         /* #EFEFE8 : la craie sur l’ardoise */
  --craie-jaune:oklch(0.871 0.111 90.8);    /* #F0D27C : la craie de couleur */
  --bordeaux:oklch(0.390 0.126 16.9);       /* #7A1E2C : le store, les boutons */
  --bordeaux-fonce:oklch(0.316 0.101 15.6); /* #5A1420 */
  --wallace:oklch(0.422 0.073 164.4);       /* #1E5A43 : vert Wallace, « ouvert » */
  --wallace-pale:oklch(0.927 0.018 166.4);  /* #DCEBE4 */
  --zinc:oklch(0.924 0.006 170.4);          /* #E2E7E5 : sections alternées */
  --fond:oklch(0.978 0.003 128.5);          /* #F7F8F6 */
  --blanc:oklch(1 0 0);
  --encre:oklch(0.253 0.011 176.3);         /* #1D2422 */
  --gris:oklch(0.479 0.014 169.8);          /* #56605C : 6,1:1 sur le fond */
  --trait:oklch(0.864 0.009 168.7);         /* #CDD4D1 */
  --bois:oklch(0.513 0.083 56.6);           /* #8B5A35 : le cadre de l’ardoise */
  --bois-clair:oklch(0.625 0.090 59.3);
  --erreur:oklch(0.50 0.17 27);
  /* type (16 px à 20 px, ratio 1,2 à 1,25) */
  --step--1:clamp(0.83rem, 0.79rem + 0.22vi, 1rem);
  --step-0:clamp(1rem, 0.93rem + 0.36vi, 1.25rem);
  --step-1:clamp(1.2rem, 1.1rem + 0.52vi, 1.56rem);
  --step-2:clamp(1.44rem, 1.29rem + 0.73vi, 1.95rem);
  --step-3:clamp(1.73rem, 1.52rem + 1.02vi, 2.44rem);
  --step-4:clamp(2.07rem, 1.79rem + 1.4vi, 3.05rem);
  --step-5:clamp(2.49rem, 2.11rem + 1.9vi, 3.81rem);
  /* espace */
  --space-3xs:clamp(0.25rem, 0.24rem + 0.09vi, 0.31rem);
  --space-2xs:clamp(0.5rem, 0.46rem + 0.18vi, 0.63rem);
  --space-xs:clamp(0.75rem, 0.7rem + 0.27vi, 0.94rem);
  --space-s:clamp(1rem, 0.93rem + 0.36vi, 1.25rem);
  --space-m:clamp(1.5rem, 1.39rem + 0.54vi, 1.88rem);
  --space-l:clamp(2rem, 1.86rem + 0.71vi, 2.5rem);
  --space-xl:clamp(3rem, 2.79rem + 1.07vi, 3.75rem);
  --space-2xl:clamp(4rem, 3.71rem + 1.43vi, 5rem);
  --measure:66ch;
  /* gouttiere jamais sous l'encoche en paysage (viewport-fit=cover) */
  --gutter:max(var(--space-s), env(safe-area-inset-left), env(safe-area-inset-right));
  --shell:min(100% - (2 * var(--gutter)), 78rem);
  --rayon:0.75rem;
  --rayon-s:0.4rem;
  --texte:"Bitter","Bitter repli",Georgia,serif;
  --main:"Playwrite FR Trad","Segoe Script","Bradley Hand",cursive;
  --barre-h:0rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block-start:var(--space-m)}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:var(--step-0);
  line-height:1.6;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
img{display:block;max-inline-size:100%;block-size:auto}
h1,h2,h3{line-height:1.1;text-wrap:balance;margin:0;font-weight:800;letter-spacing:-0.01em}
p,li,dd{text-wrap:pretty}
p{margin:0}
a{color:inherit}
sup{font-size:.62em;line-height:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px;border-radius:2px}
.vs{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:max(var(--space-s), env(safe-area-inset-left));inset-block-start:-4rem;z-index:50;display:inline-flex;align-items:center;min-block-size:2.75rem;padding:var(--space-2xs) var(--space-s);
  background:var(--encre);color:var(--blanc);border-radius:var(--rayon-s)}
.skip:focus{inset-block-start:var(--space-s)}
.shell{inline-size:var(--shell);margin-inline:auto}
.ico{inline-size:1.15em;block-size:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-block-size:2.9rem;
  padding:0.6rem 1.35rem;border-radius:62.4375rem;border:2px solid transparent;font-weight:700;font-size:var(--step-0);
  text-decoration:none;cursor:pointer;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s}
.btn-bordeaux{background:var(--bordeaux);color:var(--blanc)}
.btn-craie{background:var(--craie);color:var(--bordeaux-fonce)}
.btn-ligne{border-color:currentColor;color:var(--encre);background:transparent}
.btn-ligne-clair{border-color:var(--craie);color:var(--craie);background:var(--ardoise)}
@media (hover:hover) and (pointer:fine){
  .btn-bordeaux:hover{background:var(--bordeaux-fonce)}
  .btn-craie:hover{background:var(--blanc)}
  .btn-ligne:hover{background:var(--encre);color:var(--fond)}
}

/* ── Le store : bande bordeaux à festons, comme la devanture ── */
.store{position:relative;z-index:20;background:var(--bordeaux);color:var(--craie);padding-block:var(--space-2xs) var(--space-3xs)}
.store::after{content:"";position:absolute;inset-inline:0;inset-block-start:100%;block-size:0.8rem;
  background:radial-gradient(circle at 50% 0, var(--bordeaux) 0.6rem, transparent calc(0.6rem + 1px)) 0 0/1.6rem 0.8rem repeat-x}
.store-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-s)}
.logo{display:inline-flex;align-items:center;gap:var(--space-2xs);text-decoration:none;color:inherit;min-block-size:2.75rem}
.logo-marque{inline-size:2.4rem;block-size:2.4rem;flex:none}
.logo-txt{display:grid;gap:0.1rem}
.logo-nom{font-family:var(--main);font-weight:400;font-size:var(--step-2);line-height:1.15;white-space:nowrap}
.logo-sous{font-size:0.8rem;line-height:1.2;opacity:.9}
.nav{order:3;flex:1 1 100%;margin-inline:calc(-1 * var(--gutter));overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav ul{display:flex;gap:var(--space-3xs);list-style:none;margin:0;padding:0 var(--gutter)}
.nav a{display:flex;align-items:center;min-block-size:2.75rem;padding-inline:var(--space-2xs);white-space:nowrap;
  text-decoration:none;font-weight:600;font-size:var(--step--1);border-radius:62.4375rem}
.nav a[aria-current]{background:oklch(1 0 0 / .14)}
.store-tel{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3xs);margin-inline-start:auto;
  min-block-size:2.75rem;min-inline-size:2.75rem;text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.store-tel span{display:none}
.store-resa{display:none}
@media (hover:hover) and (pointer:fine){ .nav a:hover{background:oklch(1 0 0 / .1)} }
@media (min-width:40rem){ .store-tel span{display:inline} }
@media (min-width:64rem){
  .store-in{flex-wrap:nowrap}
  .nav{order:0;flex:1 1 auto;margin:0;overflow:visible}
  .nav ul{padding:0;justify-content:center}
  .store-tel{margin-inline-start:0}
  .store-resa{display:inline-flex}
}
@media (min-width:64rem) and (min-height:32rem){ .store{position:sticky;inset-block-start:0} }
@media (min-width:64rem) and (max-width:79.99rem){ .store-tel span{display:none} }
@media (min-width:64rem) and (min-height:32rem){ html{scroll-padding-block-start:6.5rem} }

/* ── L’une : texte à gauche, l’ardoise à droite (dessous sur téléphone) ── */
.une{--ficelle:2.4rem;padding-block:0 var(--space-xl);
  background:linear-gradient(to bottom, var(--zinc), var(--fond) 70%)}
.une-grille{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-s);justify-items:start}
.ardoise-zone{justify-self:stretch;margin-block:var(--space-2xs) var(--space-xs)}
.une h1{font-size:var(--step-5);font-weight:800;letter-spacing:-0.02em;max-inline-size:14ch}
.une-chapo{max-inline-size:44ch;color:var(--gris);font-size:var(--step-0)}
.une-actions{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.equipe{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--step--1);color:var(--gris);max-inline-size:40ch}
.pastilles{display:flex;flex:none}
.pastille{display:grid;place-items:center;inline-size:2.3rem;block-size:2.3rem;border-radius:50%;border:2px solid var(--fond);
  font-weight:800;font-size:0.95rem;line-height:1;color:var(--craie);background:var(--ardoise)}
.pastille + .pastille{margin-inline-start:-0.55rem}
.p-lucie{background:var(--bordeaux)}
.p-amadou{background:var(--wallace)}

/* La pancarte de la porte, suspendue au store par sa ficelle */
.pancarte{position:relative;display:grid;justify-items:center;gap:0.1rem;margin-block-start:calc(var(--ficelle) + 0.4rem);
  padding:var(--space-2xs) var(--space-s) var(--space-2xs);background:var(--blanc);border:2px solid currentColor;
  border-radius:var(--rayon-s);color:var(--wallace);box-shadow:0 0.4rem 0.9rem -0.4rem oklch(0.25 0.02 170 / .35);
  transform-origin:50% calc(-1 * var(--ficelle))}
/* deux chaînettes jusqu’au store */
.pancarte::before{content:"";position:absolute;inset-block-end:calc(100% + 2px);inset-inline:1.1rem;block-size:calc(var(--ficelle) + 0.9rem);
  border-inline:2px dotted var(--gris)}
.pancarte-mot{font-weight:900;font-size:var(--step-2);line-height:1;letter-spacing:0.02em}
.pancarte-detail{font-size:var(--step--1);font-weight:600;color:var(--encre)}
.pancarte[data-etat="ferme"]{color:var(--bordeaux)}
@media (prefers-reduced-motion:no-preference){
  .pancarte{animation:balance 1.8s cubic-bezier(.3,.6,.4,1) .3s both}
  @keyframes balance{0%{transform:rotate(7deg)}30%{transform:rotate(-5deg)}55%{transform:rotate(3deg)}78%{transform:rotate(-1.2deg)}100%{transform:rotate(0)}}
}

/* L’ardoise : cadre en bois, fond d’ardoise, écriture à la craie */
.ardoise-zone{position:relative;display:grid}
.ardoise-cadre{position:relative;z-index:1;padding:clamp(0.6rem, 0.5rem + 0.6vi, 0.9rem);border-radius:var(--rayon);
  background:linear-gradient(135deg, var(--bois-clair), var(--bois) 40%, oklch(0.44 0.07 52) 100%);
  box-shadow:0 1.6rem 2.6rem -1.4rem oklch(0.2 0.03 60 / .55), inset 0 0 0 1px oklch(1 0 0 / .15)}
.ardoise{position:relative;container-type:inline-size;padding:var(--space-m) clamp(1rem, 0.6rem + 2.4vi, 2.4rem) var(--space-m);
  border-radius:var(--rayon-s);color:var(--craie);
  background:
    radial-gradient(60% 45% at 25% 18%, oklch(1 0 0 / .07), transparent 70%),
    radial-gradient(45% 35% at 80% 75%, oklch(1 0 0 / .05), transparent 70%),
    radial-gradient(30% 20% at 60% 40%, oklch(1 0 0 / .03), transparent 70%),
    var(--ardoise);
  box-shadow:inset 0 0 2.5rem oklch(0 0 0 / .35)}
.ardoise-haut{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2xs) var(--space-s);
  padding-block-end:var(--space-xs);margin-block-end:var(--space-s);
  background:linear-gradient(to right, oklch(0.95 0.009 106.6 / .5), oklch(0.95 0.009 106.6 / .15)) 0 100%/100% 2px no-repeat}
.ardoise-date{font-family:var(--main);font-weight:300;font-size:clamp(1.5rem, 1rem + 4cqi, 2.4rem);line-height:1.5;filter:url(#craie)}
.ardoise-service{display:flex;gap:var(--space-3xs);padding:0.2rem;border-radius:62.4375rem;background:oklch(0 0 0 / .22)}
.ardoise-onglet{min-block-size:2.75rem;padding:0.2rem 1rem;border:0;border-radius:62.4375rem;background:none;cursor:pointer;
  font-weight:700;font-size:var(--step--1);color:var(--craie)}
.ardoise-onglet[aria-pressed="true"]{background:var(--craie);color:var(--ardoise)}
.ardoise-onglet:focus-visible,.semaine button:focus-visible{outline-color:var(--craie-jaune)}
.ardoise-plats{display:grid;gap:var(--space-s);margin:0}
.ardoise-plats div{display:grid;gap:0.1rem}
.ardoise-plats dt{font-size:var(--step--1);font-weight:700;color:var(--craie-jaune);letter-spacing:0.02em}
.ardoise-plats dd{margin:0;font-family:var(--main);font-weight:300;font-size:clamp(1.15rem, 0.85rem + 2.6cqi, 1.7rem);line-height:1.55;filter:url(#craie)}
.ardoise-prix{list-style:none;margin:var(--space-m) 0 0;padding:var(--space-s) 0 0;display:grid;gap:var(--space-xs);
  border-block-start:2px dashed oklch(0.95 0.009 106.6 / .35)}
.ardoise-prix li{display:flex;align-items:baseline;gap:var(--space-2xs);font-size:var(--step--1)}
.ardoise-prix li::after{content:"";order:1;flex:1;align-self:flex-end;margin-block-end:0.7em;border-block-end:2px dotted oklch(0.95 0.009 106.6 / .35);min-inline-size:1rem}
.ardoise-prix b{order:2;translate:0 0.2em;font-family:var(--main);font-weight:400;font-size:var(--step-1);line-height:1.2;color:var(--craie-jaune);white-space:nowrap}
.ardoise-soir{display:grid;gap:var(--space-s)}
.ardoise-soir-t{font-family:var(--main);font-weight:300;font-size:clamp(1.15rem, 0.85rem + 2.6cqi, 1.7rem);filter:url(#craie)}
.ardoise-sugg{display:grid;gap:0.2rem;padding:var(--space-s);border:2px dashed oklch(0.87 0.111 90.8 / .6);border-radius:var(--rayon-s)}
.ardoise-sugg span{font-size:var(--step--1);font-weight:700;color:var(--craie-jaune)}
.ardoise-sugg b{font-family:var(--main);font-weight:300;font-size:clamp(1.1rem, 0.8rem + 2.4cqi, 1.6rem);line-height:1.55}
.ardoise-sugg b + b{color:var(--craie-jaune);font-weight:400}
.ardoise-soir-txt{font-size:var(--step--1);opacity:.9}
.ardoise-soir-txt a{color:var(--craie-jaune);font-weight:700}
.ardoise-verre{margin-block-start:var(--space-s);font-size:var(--step--1)}
.ardoise-verre span{color:var(--craie-jaune);font-weight:700}
.ardoise-verre b{font-weight:600}
.ardoise [hidden]{display:none}

/* Le plat du jour, toute la semaine : cinq petites ardoises */
.semaine{display:grid;gap:var(--space-xs) var(--space-m);margin-block-start:var(--space-xl);align-items:center}
.semaine-photo{margin:0;display:grid;gap:var(--space-3xs);grid-row:span 3}
.semaine-photo img{inline-size:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rayon)}
.semaine-photo figcaption{font-family:var(--main);font-weight:300;font-size:var(--step--1);color:var(--gris);line-height:1.6}
.semaine-t{font-weight:800;font-size:var(--step-1)}
.semaine-liste{list-style:none;margin:0 calc(-1 * var(--gutter));padding:var(--space-3xs) var(--gutter);display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(9.5rem, 1fr);gap:var(--space-2xs);overflow-x:auto;scroll-snap-type:inline mandatory;scroll-padding-inline:var(--gutter)}
.semaine-liste li{scroll-snap-align:start;display:grid}
.semaine-liste button{display:grid;align-content:start;gap:0.15rem;inline-size:100%;min-block-size:5.5rem;padding:var(--space-xs);text-align:start;
  border:3px solid var(--bois);border-radius:var(--rayon-s);background:var(--ardoise);color:var(--craie);cursor:pointer}
.semaine-j{font-size:var(--step--1);font-weight:700;color:var(--craie-jaune)}
.semaine-p{font-family:var(--main);font-weight:300;font-size:0.95rem;line-height:1.5}
.semaine-liste button[aria-pressed="true"]{border-color:var(--craie-jaune);box-shadow:0 0 0 3px var(--craie-jaune)}
.semaine-liste .auj .semaine-j::after{content:", aujourd’hui";color:var(--craie)}
.semaine-ferme{font-size:var(--step--1);color:var(--gris)}
@media (hover:hover) and (pointer:fine){ .semaine-liste button:hover{border-color:var(--bois-clair);background:var(--ardoise-clair)} }

@media (min-width:40rem){
  .semaine{grid-template-columns:minmax(14rem, 18rem) 1fr}
  .semaine-photo img{aspect-ratio:4/3}
}
@media (min-width:64rem){
  .une{--ficelle:3.2rem;padding-block:0 var(--space-2xl)}
  .une-grille{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:var(--space-xl);row-gap:var(--space-s);
    grid-template-rows:repeat(5, auto) 1fr;
    grid-template-areas:"pancarte ardoise" "titre ardoise" "chapo ardoise" "actions ardoise" "equipe ardoise" ". ardoise"}
  .pancarte{grid-area:pancarte}
  .une h1{grid-area:titre}
  .une-chapo{grid-area:chapo}
  .une-actions{grid-area:actions}
  .equipe{grid-area:equipe}
  .ardoise-zone{grid-area:ardoise;margin:var(--space-xl) 0 0}
  .ardoise-cadre{transform:rotate(-1deg)}
  .semaine-liste{margin:0;padding-inline:0;overflow:visible;grid-auto-columns:1fr}
}

/* Grilles à une colonne : un défilement horizontal interne ne doit jamais élargir la page */
.semaine > *,.resa-grille > *,.feuille > *,.groupes-grille > *,.venir-grille > *{min-inline-size:0}

/* ── Le carnet de réservations : une page réglée, marge rouge ── */
.resa{padding-block:var(--space-2xl);background:var(--fond)}
.resa-grille{display:grid;gap:var(--space-l);align-items:start}
.resa-intro{display:grid;gap:var(--space-s);max-inline-size:var(--measure)}
.resa-intro h2,.carte-tete h2,.salle-tete h2,.groupes-texte h2,.venir h2{font-size:var(--step-4)}
.resa-intro p{color:var(--gris)}
.regles{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}
.regles li{display:flex;gap:var(--space-2xs);align-items:flex-start}
.regles .ico{color:var(--wallace);translate:0 0.2em}
.regles a{color:var(--bordeaux);font-weight:700}
.carnet{position:relative;border-radius:var(--rayon);background:var(--blanc);
  box-shadow:0 0 0 1px var(--trait), 0 1.4rem 2.4rem -1.6rem oklch(0.25 0.02 170 / .4);overflow:clip}
.carnet-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3xs) var(--space-s);
  padding:var(--space-s) var(--space-m);background:var(--bordeaux);color:var(--craie)}
.carnet-titre{font-family:var(--main);font-size:var(--step-1);line-height:1.4}
.carnet-resume{font-weight:700;font-size:var(--step--1)}
.carnet-form,.carnet-fait{padding:var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) + 1.25rem);
  background:
    linear-gradient(to right, transparent 1.6rem, oklch(0.62 0.16 22 / .45) 1.6rem, oklch(0.62 0.16 22 / .45) calc(1.6rem + 2px), transparent calc(1.6rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(2rem - 1px), oklch(0.75 0.05 240 / .28) calc(2rem - 1px), oklch(0.75 0.05 240 / .28) 2rem)}
.etape{border:0;margin:0 0 var(--space-m);padding:0;min-inline-size:0}
.etape legend{display:flex;align-items:center;gap:var(--space-2xs);padding:0;margin-block-end:var(--space-xs);font-weight:800;font-size:var(--step-1)}
.etape-n{display:grid;place-items:center;inline-size:1.7rem;block-size:1.7rem;border-radius:50%;flex:none;
  background:var(--ardoise);color:var(--craie);font-size:0.95rem;font-weight:800;line-height:1}
.puces{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.puce{position:relative}
.puce input,.service input,.jour input,.creneau input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.puce span{display:grid;place-items:center;inline-size:2.9rem;block-size:2.9rem;border-radius:50%;border:2px solid var(--trait);
  background:var(--blanc);font-weight:700;font-variant-numeric:tabular-nums}
.puce input:checked + span,.service input:checked + span,.jour input:checked + span,.creneau input:checked + span{
  background:var(--ardoise);border-color:var(--ardoise);color:var(--craie)}
.puce input:focus-visible + span,.service input:focus-visible + span,.jour input:focus-visible + span,.creneau input:focus-visible + span{
  outline:3px solid var(--bordeaux);outline-offset:2px}
.aide{font-size:var(--step--1);color:var(--gris);margin-block-start:var(--space-2xs)}
.aide a{color:var(--bordeaux);font-weight:700}
.jours{display:grid;grid-auto-flow:column;grid-auto-columns:4.4rem;gap:var(--space-2xs);overflow-x:auto;
  margin-inline-end:calc(-1 * var(--space-m));padding:var(--space-3xs) var(--space-m) var(--space-2xs) var(--space-3xs);
  scroll-snap-type:inline proximity;scrollbar-width:thin}
.jour{position:relative;scroll-snap-align:start}
.jour span{display:grid;justify-items:center;gap:0.05rem;padding:0.45rem 0.2rem;border-radius:var(--rayon-s);border:2px solid var(--trait);
  background:var(--blanc);line-height:1.2;text-align:center}
.jour small{font-size:0.78rem;color:inherit;opacity:.8}
.jour b{font-size:var(--step-1);font-variant-numeric:tabular-nums}
.jour input:disabled{cursor:not-allowed}
.jour input:disabled + span{background:repeating-linear-gradient(135deg, transparent 0 0.375rem, var(--zinc) 0.375rem 0.5rem);color:var(--gris);border-style:dashed}
.services{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--space-2xs);max-inline-size:28rem}
.service{position:relative}
.service span{display:grid;gap:0;padding:0.6rem var(--space-xs);border-radius:var(--rayon-s);border:2px solid var(--trait);background:var(--blanc);line-height:1.3}
.service b{font-size:var(--step-0)}
.service small{font-size:0.8rem;opacity:.85}
.aide-creneaux{font-weight:700;color:var(--encre);font-size:var(--step-0)}
.creneaux{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-block-start:var(--space-2xs);min-block-size:2.9rem}
.creneau{position:relative}
.creneau span{display:grid;place-items:center;min-inline-size:4.6rem;min-block-size:2.9rem;padding-inline:0.6rem;border-radius:62.4375rem;
  border:2px solid var(--wallace);color:var(--wallace);background:var(--blanc);font-weight:700;font-variant-numeric:tabular-nums}
.creneau input:disabled + span{border-color:var(--trait);color:var(--gris);text-decoration:line-through;background:var(--zinc)}
.creneaux-vide{font-size:var(--step--1);color:var(--gris);align-self:center}
.err{color:var(--erreur);font-size:var(--step--1);font-weight:700}
.err:empty{display:none}
.champs{display:grid;gap:var(--space-s);margin-block-end:var(--space-s)}
.champ{display:grid;align-content:start;gap:var(--space-3xs);margin-block-end:var(--space-s)}
.champs .champ{margin:0}
.champ label{font-weight:700;font-size:var(--step--1)}
.champ small{font-size:inherit;font-weight:400;color:var(--gris)}
.champ input:not([type="range"]),.champ select,.champ textarea{inline-size:100%;min-block-size:2.9rem;padding:0.55rem 0.8rem;
  border:2px solid var(--trait);border-radius:var(--rayon-s);background:var(--blanc);font-size:max(1rem, var(--step-0))}
.champ textarea{resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:3px solid var(--bordeaux);outline-offset:1px;border-color:var(--encre)}
.champ [aria-invalid="true"]{border-color:var(--erreur)}
.carnet-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-s)}
.carnet-envoi .aide{margin:0}
.carnet-fait{display:grid;gap:var(--space-s);justify-items:start;min-block-size:24rem;align-content:start}
.carnet-fait[hidden]{display:none}
.carnet-ligne{font-family:var(--main);font-weight:300;font-size:var(--step-1);line-height:2rem;color:oklch(0.32 0.11 262);padding-block:0 0.1rem}
.carnet-fait h3{font-size:var(--step-2)}
.carnet-fait h3:focus{outline:none}
@media (prefers-reduced-motion:no-preference){
  .carnet-ligne.ecrit{animation:ecrire 1.4s steps(28, end) both}
  @keyframes ecrire{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
@media (min-width:40rem){ .champs{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:64rem){
  .resa-grille{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);gap:var(--space-xl)}
  .resa-intro{position:sticky;inset-block-start:7rem}
  .jours{grid-auto-flow:row;grid-template-columns:repeat(7, minmax(0, 1fr));margin:0;padding:var(--space-3xs);overflow:visible}
}

/* ── La carte : une feuille imprimée, points de conduite jusqu’au prix ── */
.carte{padding-block:var(--space-2xl);background:var(--zinc)}
.carte-tete{display:grid;gap:var(--space-xs);max-inline-size:var(--measure);margin-block-end:var(--space-m)}
.carte-tete p{color:var(--gris)}
.filtre{display:grid;gap:var(--space-2xs);margin-block-end:var(--space-m)}
.filtre-t{font-weight:800}
.filtre-puces{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.filtre-puces button{min-block-size:2.75rem;padding:0.3rem 1rem;border-radius:62.4375rem;border:2px solid var(--encre);background:var(--blanc);
  font-weight:600;font-size:var(--step--1);cursor:pointer}
.filtre-puces button[aria-pressed="true"]{background:var(--encre);color:var(--blanc)}
.filtre-puces button[aria-pressed="true"]::before{content:"";display:inline-block;inline-size:.5em;block-size:.9em;margin-inline-end:.45em;
  border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;translate:0 -.1em}
.filtre-compte{font-size:var(--step--1);color:var(--gris)}
.feuille{display:grid;gap:var(--space-l);padding:var(--space-l) clamp(1rem, 0.5rem + 2.5vi, 3rem);background:var(--blanc);border-radius:var(--rayon);
  box-shadow:0 0 0 1px var(--trait)}
.rubrique h3{font-size:var(--step-2);padding-block-end:var(--space-2xs);margin-block-end:var(--space-xs);border-block-end:3px double var(--encre)}
.plats{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.plat-ligne{display:flex;align-items:baseline;gap:var(--space-2xs)}
.plat-ligne::after{content:"";order:1;flex:1 1 1rem;border-block-end:2px dotted var(--trait)}
.plat-nom{font-weight:600}
.plat-prix{order:2;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.plat-all{font-size:var(--step--1);color:var(--gris);font-style:italic}
.plat-non .plat-nom,.plat-non .plat-prix{color:var(--gris)}
.plat-non .plat-nom{text-decoration:line-through;text-decoration-thickness:1px}
.plat-non .plat-all{font-style:normal;font-weight:700;color:var(--bordeaux);opacity:1}
.feuille-note{margin-block-start:var(--space-s);font-size:var(--step--1);color:var(--gris)}
@media (min-width:48rem){ .feuille{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--space-xl)} }

/* ── La salle et la terrasse ── */
.salle{padding-block:var(--space-2xl)}
.salle-tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-s) var(--space-l);margin-block-end:var(--space-m)}
.places{display:flex;gap:var(--space-m);margin:0}
.places div{display:flex;flex-direction:column-reverse}
.places dt{font-size:var(--step--1);color:var(--gris)}
.places dd{margin:0;font-size:var(--step-4);font-weight:800;line-height:1;color:var(--bordeaux);font-variant-numeric:tabular-nums}
.galerie{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) var(--space-2xs);display:grid;grid-auto-flow:column;
  grid-auto-columns:min(78%, 20rem);gap:var(--space-s);overflow-x:auto;scroll-snap-type:inline mandatory;scroll-padding-inline:var(--gutter)}
.galerie li{scroll-snap-align:start;display:grid;align-content:start;gap:var(--space-2xs)}
.galerie img{inline-size:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rayon)}
.galerie p{font-size:var(--step--1);color:var(--gris)}
.galerie b{display:block;color:var(--encre);font-size:var(--step-0)}
@media (min-width:64rem){
  .galerie{margin:0;padding:0;overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(4, minmax(0, 1fr));grid-auto-columns:auto;gap:var(--space-m) var(--space-s)}
  .g-terrasse{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
  .g-terrasse img{aspect-ratio:auto;flex:1 1 0;min-block-size:0}
  .galerie li:not(.g-terrasse) img{aspect-ratio:1}
}

/* ── Groupes : deux offres et l’estimateur ── */
.groupes{padding-block:var(--space-2xl);background:var(--ardoise);color:var(--craie)}
.groupes-grille{display:grid;gap:var(--space-l);align-items:start}
.groupes-texte{display:grid;gap:var(--space-s);max-inline-size:var(--measure)}
.groupes-texte > p{opacity:.92}
.offres{display:grid;gap:var(--space-s);margin-block-start:var(--space-2xs)}
.offre{display:grid;gap:var(--space-3xs);padding:var(--space-s) var(--space-m);border:2px dashed oklch(0.95 0.009 106.6 / .4);border-radius:var(--rayon)}
.offre h3{font-size:var(--step-1)}
.offre-prix{font-family:var(--main);font-size:var(--step-2);line-height:1.5;color:var(--craie-jaune)}
.offre-prix small{font-family:var(--texte);font-size:var(--step--1);color:var(--craie);white-space:nowrap}
.estime{display:grid;border-radius:var(--rayon);overflow:clip;background:var(--blanc);color:var(--encre)}
.estime-photo{inline-size:100%;aspect-ratio:16/9;object-fit:cover}
.estime-in{display:grid;gap:var(--space-xs);padding:var(--space-m)}
.estime-in h3{font-size:var(--step-2)}
.estime-in .champ{margin:0}
.estime-in output{font-weight:800}
input[type="range"]{inline-size:100%;min-block-size:2.75rem;accent-color:var(--bordeaux);cursor:pointer}
.services-mini{max-inline-size:none}
.estime-total{display:flex;align-items:baseline;gap:var(--space-2xs);font-size:var(--step-4);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.estime-total span{font-size:var(--step-0);font-weight:600;color:var(--gris)}
.estime-ou{color:var(--gris);min-block-size:3.2em}
.estime .btn{justify-self:start}
@media (min-width:40rem){ .offres{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:64rem){
  .groupes-grille{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);gap:var(--space-xl);align-items:center}
  .estime{grid-template-columns:1fr}
}

/* ── Venir ── */
.venir{padding-block:var(--space-2xl);background:var(--fond)}
.venir-grille{display:grid;gap:var(--space-l);align-items:start}
.venir-adresse{display:grid;gap:var(--space-s);justify-items:start}
.venir address{font-style:normal;font-size:var(--step-2);font-weight:700;line-height:1.25}
.adresse-l{display:block}
.acces{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}
.acces li{display:flex;gap:var(--space-2xs);align-items:baseline}
.acces .ico{color:var(--bordeaux);translate:0 0.2em}
.acces a{font-weight:700;display:inline-flex;align-items:center;min-block-size:2.75rem}
.horaires{padding:var(--space-s) clamp(0.75rem, 0.3rem + 2vi, 1.9rem);border-radius:var(--rayon);background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.horaires h3{font-size:var(--step-2);margin-block-end:var(--space-xs)}
.horaires table{inline-size:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.horaires th,.horaires td{padding:0.55rem 0.3rem;text-align:start;border-block-end:1px solid var(--trait)}
.horaires thead th{font-size:var(--step--1);color:var(--gris);font-weight:600}
.horaires tbody th{font-weight:700}
.horaires td{font-size:var(--step--1);white-space:nowrap}
.horaires .ferme td{color:var(--gris)}
.horaires tr.auj{background:var(--wallace-pale)}
.horaires tr.auj th::after{content:" (aujourd’hui)";font-weight:400;font-size:var(--step--1);color:var(--wallace)}
@media (min-width:56rem){ .venir-grille{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--space-xl)} }

/* ── Pied de page ── */
.pied{padding-block:var(--space-xl) calc(var(--space-l) + var(--barre-h));background:var(--ardoise);color:var(--craie)}
.pied-grille{display:grid;gap:var(--space-m);padding-block-end:var(--space-m);border-block-end:1px solid oklch(0.95 0.009 106.6 / .2)}
.pied p,.pied address{font-style:normal;font-size:var(--step--1);opacity:.92}
.pied address a{display:inline-flex;align-items:center;min-block-size:2.75rem}   /* le numero se touche : 44 px */
.logo-pied{margin-block-end:var(--space-2xs)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pied nav a{display:inline-flex;align-items:center;min-block-size:2.75rem;font-size:var(--step--1)}
.pied-bas{display:grid;gap:var(--space-3xs);padding-block-start:var(--space-s)}
.pied-bas a{font-weight:700;color:var(--craie-jaune)}
@media (min-width:48rem){ .pied-grille{grid-template-columns:2fr 2fr 1.5fr} }

/* ── Sous le pouce : Réserver et Appeler, rangés quand le carnet est à l’écran ── */
.barre-action{position:fixed;z-index:30;inset-inline:0;inset-block-end:0;display:grid;grid-template-columns:3fr 2fr;gap:var(--space-2xs);
  padding:var(--space-2xs) max(var(--gutter), env(safe-area-inset-right)) max(var(--space-2xs), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background:var(--ardoise);box-shadow:0 -0.5rem 1.4rem -0.6rem oklch(0 0 0 / .35);
  transition:transform .25s ease, visibility 0s linear 0s}
.barre-action .btn{min-block-size:3rem}
.barre-action[data-cache]{transform:translateY(110%);visibility:hidden;transition:transform .25s ease, visibility 0s linear .25s}
@media (max-width:63.99rem){ :root{--barre-h:4.4rem} }
@media (min-width:64rem){ .barre-action{display:none} }
@media (prefers-reduced-motion:reduce){ .barre-action,.barre-action[data-cache]{transition:none} }