/* Arizona Lounge, Contern — « comme sa carte » (direction 1, choisie par Flavien le 11/10/2026 sur planches).
   Lettres et couleurs viennent de SA carte imprimée (brut/client/carte/Menu_Restaurant_A4_HD.pdf), mesurées dessus :
   papier #fbf7f0 (son blanc, à peine réchauffé) ; encre #1a1a14 ; vert du mot « CARTE » #253108 (titres, structure) ;
   vert sombre de ses titres de rubrique #1f2d0c (fonds sombres, pied) ; orange de son bandeau « Sauces au choix »
   #c84007 (ce qui se touche, liens) ; orange de ses mentions #e05627 (filets en pointillés : DÉCOR SEULEMENT, 3,56:1,
   jamais du texte) ; rouge de sa tomate dessinée #d41804 (rare) ; orange clair #f29a6e (sur fond sombre).
   L'ardoise reste une ardoise sombre dans son cadre de bois (bois miel mesuré sur ses chaises).
   Trois polices auto-hébergées (licence OFL, outil/polices.py) :
   - Rokkitt : le nom, les titres, les PRIX et tous les chiffres (lettres à pieds carrés, comme son mot « CARTE ») ;
   - Josefin Sans : noms de plats, texte courant, boutons (lettres rondes, comme sur sa carte). Son chiffre 1 est une
     simple barre : le fichier servi ne contient AUCUN chiffre ni signe € ; un chiffre écrit dans un texte en Josefin
     Sans sort donc en « Rokkitt chiffres » (la même Rokkitt, mise à la hauteur des capitales rondes) ;
   - Lora italique : descriptions de plats, ligne de l'heure, mentions de rubrique.
   Règle : le texte orange sur papier (4,69:1) n'est jamais plus petit que le texte courant (1.0625rem).
   Contrastes vérifiés par outil/construire.mjs ; chiffres hors Josefin Sans par outil/epreuve-chiffres.mjs. */
@font-face{font-family:"Rokkitt";src:url(polices/rokkitt.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Rokkitt chiffres";src:url(polices/rokkitt.woff2) format("woff2");font-weight:400 800;font-display:swap;size-adjust:123%;unicode-range:U+30-39,U+20AC,U+B2-B3,U+B9,U+BC-BE}
/* Josefin Sans est basse (hauteur d'x de 0,38) : agrandie de 12 % pour se lire comme un texte courant */
@font-face{font-family:"Josefin Sans";src:url(polices/josefin-sans.woff2) format("woff2");font-weight:400 700;font-display:swap;size-adjust:112%}
@font-face{font-family:"Lora";src:url(polices/lora-italique.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
/* replis métriques : les lignes ne bougent pas quand les polices arrivent (largeurs mesurées dans le navigateur) */
@font-face{font-family:"Rokkitt repli";src:local("Georgia");font-weight:400 800;size-adjust:90%}
@font-face{font-family:"Josefin repli";src:local("Arial");font-weight:400 700;size-adjust:104%}
@font-face{font-family:"Lora repli";src:local("Georgia Italic"),local("Georgia");font-style:italic;size-adjust:98%}

:root{
  --papier:#fbf7f0;--blanc:#ffffff;--papier-terne:#ece6da;
  --encre:#1a1a14;--encre-douce:#3d3d33;
  --vert:#253108;--vert-sombre:#1f2d0c;
  --orange:#c84007;--orange-fonce:#9e3205;--filet:#e05627;--tomate:#d41804;--orange-clair:#f29a6e;
  --ardoise:#26282b;--craie:#f4f1e8;--bois:#b97f55;--bois-fonce:#8a5a3a; /* bois miel : mesuré sur ses chaises */
  --montant-c:#ffffff;
  --ombre-rvb:26,26,20;--clair-rvb:251,247,240;--craie-rvb:244,241,232;--ardoise-rvb:38,40,43;
  --trait:rgba(var(--ombre-rvb),.16);
  --bord:rgba(37,49,8,.22); /* le vert de sa carte, en filet fin autour des panneaux blancs */
  --pointille:3px dotted var(--filet); /* le filet en pointillés orange de sa carte */
  --lum-a:.85; /* force de la bande de lumière de la journée : outil/construire.mjs vérifie 4,5:1 sur le papier éclairé */
  --portee:0 0 0 0 transparent; /* plus d'ombre portée : sur le papier, elle salissait */
  --titre:"Rokkitt","Rokkitt repli",Georgia,serif;
  --texte:"Josefin Sans","Rokkitt chiffres","Josefin repli",system-ui,-apple-system,"Segoe UI",sans-serif;
  --trois:"Lora","Lora repli",Georgia,serif; /* toujours en italique */
  --marge:clamp(16px,5vw,72px);
  --montant:3px;
  --courbe:cubic-bezier(.2,.75,.2,1);
  --soleil:0; /* -1 (matin) à 1 (soir) : posé par la page d'après l'heure du Luxembourg */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papier);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--encre);font:400 1.0625rem/1.6 var(--texte);overflow-x:clip}
/* la lumière de la verrière traverse la page à mesure qu'on descend : --defile (0 en haut, 1 en bas) est posé par la page.
   v2-9, sur le papier presque blanc : une seule bande de lumière, PLUS CLAIRE que le papier (blanc le matin, à peine dorée
   le soir), qui ne salit rien. Les ombres des montants et la trame ont été retirées : sur le papier, elles faisaient des
   traits gris. --jour-rvb (teinte) et --jour-angle (le soleil tourne) suivent le défilement. Sans script : lumière fixe. */
body::before{content:"";position:fixed;inset:-10% -40%;z-index:-1;pointer-events:none;background:linear-gradient(calc(var(--jour-angle,100deg) + 6deg),transparent 30%,rgba(var(--jour-rvb,255,255,255),var(--lum-a)) 50%,transparent 70%);transform:translateX(calc(-40% + var(--defile,.5)*80%))}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.05;margin:0;letter-spacing:0;word-spacing:-.06em;color:var(--vert);text-wrap:balance}
.v-prix,.pied-nom,.rideau p,.marque,.vt-grand,.vt-moyen,.fort,.adresse,.message,.ar-plat{word-spacing:-.06em} /* Rokkitt a une espace large */
p{margin:0 0 1em}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:2px}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.se-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:12px;top:-80px;z-index:70;background:var(--vert);color:var(--blanc);padding:12px 18px;font-weight:600}
.evitement:focus{top:12px}

/* signature Everywhere : aux couleurs du lieu */
.c-signature-everywhere{--surface:var(--papier);--encre:#1a1a14;--encre-douce:#3d3d33;--accent:var(--vert);--focus:#1a1a14;--police-texte:var(--texte)}
.projet{margin:0 auto;min-width:0;font-size:.875rem;line-height:1.3;letter-spacing:.02em;color:var(--encre);text-align:center}

/* marques de ce qui n'est pas confirmé */
.marque-exemple,.a-completer{display:inline-block;font:500 .875rem/1.35 var(--texte);letter-spacing:.01em;color:var(--encre-douce);
  border:1px dashed var(--orange);border-radius:2px;padding:4px 8px 2px;background:rgba(var(--clair-rvb),.86);text-wrap:balance;vertical-align:.08em}
.a-completer{display:block;width:fit-content;margin:0 0 1em;font-size:1rem;line-height:1.5}

/* ---------- la ligne fine du haut. Au téléphone, c'est la seule barre : pastille Everywhere, « Projet, non publié »,
   menu compact (langues, pages, appel). Le nom vit dans la verrière. À l'ordinateur, l'en-tête complet revient. */
.c-signature-everywhere .se-in{padding-inline:var(--marge);min-height:44px;gap:10px}
.projet-long{display:none}
.c-signature-everywhere{position:relative}
.menu-fin summary{position:absolute;top:0;right:calc(var(--marge) - 6px);list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:44px;height:44px;font:700 1rem/1 var(--texte);letter-spacing:.05em;color:var(--encre);cursor:pointer}
.menu-fin summary::-webkit-details-marker{display:none}
.menu-fin summary::after{content:"";width:18px;height:2px;margin-block:6px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
/* ouvert, le menu prend sa place dans la page, sous la ligne : il pousse la verrière, il ne recouvre aucun bouton */
.mf-liste{padding:6px var(--marge) 18px;display:grid;gap:10px;background:var(--blanc);border-top:1px solid var(--trait);font-size:1.0625rem}
.menu-fin:not([open]) .mf-liste{display:none}
.menu-fin[open] .mf-liste{animation:ouvrir .24s var(--courbe)}
@keyframes ouvrir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mf-liste ul{display:grid;gap:8px}
.mf-liste nav{padding-top:10px;border-top:1px solid var(--trait)}
.mf-liste p{margin:0}
.c-signature-everywhere .mf-liste a{display:flex;gap:0;min-height:44px;font-weight:500;color:var(--encre)}
.c-signature-everywhere .mf-liste a[aria-current]{padding-left:10px;font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
.c-signature-everywhere .mf-liste .mf-tel{justify-content:center;padding:0 14px;background:var(--vert);color:var(--blanc);font-weight:600;white-space:nowrap}
.marque{font:800 1.5rem/1 var(--titre);color:var(--vert);text-decoration:none;padding:11px 0;white-space:nowrap}
.v-tel{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--vert);color:var(--blanc);text-decoration:none;font-weight:600;white-space:nowrap}
.v-tel:hover{background:var(--vert-sombre)}
.langues-barre{display:flex;gap:8px;margin-left:auto}
.c-signature-everywhere .langues-barre a{min-width:32px;min-height:44px;justify-content:center;gap:0;font:500 .9375rem/1 var(--texte);letter-spacing:.04em;color:var(--encre-douce)}
.c-signature-everywhere .langues-barre a[aria-current]{color:var(--encre);font-weight:700;box-shadow:inset 0 -2px 0 var(--orange)}
.c-signature-everywhere .barre-tel{min-height:36px;padding:0 12px;gap:0;background:var(--vert);color:var(--blanc);font:600 .9375rem/1 var(--texte);white-space:nowrap}
.mf-projet{font-size:.9375rem;color:var(--encre-douce)}
.tete{display:none}
@media (max-width:979px){
  .c-signature-everywhere .se-par,.c-signature-everywhere .se-acces{display:none}
  .c-signature-everywhere{position:sticky;top:0;z-index:50;max-height:100svh;overflow-y:auto}
  .c-signature-everywhere .se-in{padding-right:calc(var(--marge) + 46px);gap:8px}
  .c-signature-everywhere .se-logo{height:11px}
  .c-signature-everywhere .se-pastille{padding:5px 6px 5px 7px;gap:3px}
  .c-signature-everywhere .langues-barre a{min-width:24px;font-size:.875rem;letter-spacing:.02em}
  .c-signature-everywhere .barre-tel{padding:0 9px;margin-left:2px}
  .projet{display:none}
  html{scroll-padding-top:calc(var(--barre,46px) + 12px)} /* la barre collante ne recouvre ni une ancre ni le focus : --barre est sa hauteur réelle, mesurée par la page (46 px sans script) */
  .page-tete{border-top:0}
}
@media (min-width:980px){
  .projet-long{display:inline}.projet-court,.menu-fin,.v-tel,.page-haut,.c-signature-everywhere .langues-barre,.c-signature-everywhere .barre-tel{display:none}
  .tete{display:flex;align-items:center;gap:0 clamp(10px,1.5vw,28px);padding:6px var(--marge);background:var(--papier);border-bottom:1px solid var(--bord)}
  .rubriques{margin-right:auto}
  .rubriques ul{display:flex;flex-wrap:wrap;gap:0 clamp(7px,.85vw,16px)}
  .rubriques a{display:inline-flex;align-items:center;min-height:44px;padding-top:3px;text-decoration:none;font-weight:500;font-size:clamp(.8125rem,1.1vw,1rem);white-space:nowrap;border-bottom:2px solid transparent}
  .rubriques a:hover,.rubriques a[aria-current]{border-bottom-color:var(--orange)}
}
/* huit rubriques depuis le Click & Eat (02/11/2026) : quand elles ne tiennent pas sur la ligne du nom, elles passent toutes sur une ligne à elles, sous le nom (jamais une rubrique seule en dessous) */
@media (min-width:980px) and (max-width:1259.98px){
  .tete{flex-wrap:wrap}
  .rubriques{order:9;flex:1 0 100%;margin-right:0;border-top:1px solid var(--bord)}
  .langues{margin-left:auto}
}
@media (min-width:1260px) and (max-width:1679.98px){
  html:is(:lang(de),:lang(en)) .tete{flex-wrap:wrap}
  html:is(:lang(de),:lang(en)) .rubriques{order:9;flex:1 0 100%;margin-right:0;border-top:1px solid var(--bord)}
  html:is(:lang(de),:lang(en)) .langues{margin-left:auto}
}
@media (min-width:980px){
  .langues{display:flex;gap:8px}
  .langues a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;font-weight:500;font-size:1rem;text-decoration:none;letter-spacing:.04em;color:var(--encre-douce)}
  .langues a[aria-current]{color:var(--encre);font-weight:700;box-shadow:inset 0 -2px 0 var(--orange)}
  .langues a:hover{color:var(--encre)}
  .tete-tel{display:inline-flex;align-items:center;min-height:44px;padding:2px 16px 0;background:var(--vert);color:var(--blanc);text-decoration:none;font:700 1.1875rem/1 var(--titre);white-space:nowrap}
  .tete-tel:hover{background:var(--vert-sombre)}
}

@media (min-width:460px) and (max-width:979px){.projet{display:block;margin:0;white-space:nowrap}}
@media (max-width:359px){.langues-barre{display:none}.c-signature-everywhere .barre-tel{margin-left:auto}}
@media (max-width:379px){.c-signature-everywhere .se-in{gap:4px}.langues-barre{gap:5px;flex:none}.c-signature-everywhere .langues-barre a{min-width:0;padding-inline:1px;font-size:.8125rem}.c-signature-everywhere .barre-tel{padding:0 6px;font-size:.875rem;margin-left:0}}
.langues-barre a,.barre-tel{overflow-wrap:normal;white-space:nowrap}

/* ---------- l'arrivée : un rideau de papier qui porte le nom du lieu DÈS LA PREMIÈRE IMAGE (aucune apparition : jamais un
   aplat vide), pendant que le filet en pointillés de sa carte se tire ; il reste 0,3 s, puis se lève en 0,4 s.
   Tout est en CSS : le lever ne dépend ni du script ni des polices (0,7 s après la première image, jamais plus). */
.rideau{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--vert);pointer-events:none;background:var(--papier);
  animation:lever .4s var(--courbe) .3s forwards}
.rideau p{margin:0;font:800 clamp(2.4rem,11.8vw,5rem)/.95 var(--titre);text-align:center}
.rideau p b{font-weight:800}
.rideau span{width:min(72vw,420px);height:0;border-top:var(--pointille);transform-origin:left;animation:tirer 1.1s linear both}
@keyframes lever{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes tirer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- boutons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.bouton{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px 12px;border:2px solid var(--vert);background:transparent;color:var(--vert);
  font:600 1.0625rem/1.25 var(--texte);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,transform .2s var(--courbe)}
.bouton:hover{background:var(--vert);color:var(--blanc)}
.bouton:active{transform:translateY(1px)}
.bouton.plein{background:var(--orange);border-color:var(--orange);color:#fff}
.bouton.plein:hover{background:var(--orange-fonce);border-color:var(--orange-fonce)}
@media (max-width:340px){.bouton{white-space:normal;text-align:center;padding:9px 14px 6px}}
/* l'étiquette posée dans le coin de la photo : bas de casse, fond de papier (plus de petite ligne en capitales espacées) */
.surtitre{font:600 .875rem/1.2 var(--texte);color:var(--encre);margin:0}

.illustration{position:absolute;right:8px;bottom:8px;z-index:4;font:600 .875rem/1.2 var(--texte);padding:5px 9px;background:rgba(var(--ardoise-rvb),.9);color:var(--craie)}
.v-prix{display:block;margin-top:3px;font:800 1.5625rem/1.25 var(--titre);font-style:normal;color:var(--vert)}
.v-prix strong{font:inherit}
p.vivante{margin:0;font:italic 400 1.125rem/1.35 var(--trois)} /* la ligne de l'heure */
.vivante [data-vivante]{display:block}
/* ---------- l'ouverture (21/10/2026) : plus de photo ni de vidéo ; un bandeau de papier (le nom, la ligne de l'heure, le prix
   du plat du jour, trois boutons), puis l'ardoise de la semaine. Restes gardés : la ligne de l'heure, le prix, l'icône de pause. */
.v-arret-ic{width:14px;height:15px;background:linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px,currentColor 9px 14px)}
.mouvement-arrete .v-arret-ic{background:currentColor;clip-path:polygon(1px 0,100% 50%,1px 100%)}
/* ---------- emplacements vides (médias) : nommés, hachurés, impossibles à prendre pour une image */
.emplacement,.photo-vide figcaption{font-size:1rem;line-height:1.5;color:var(--encre)}
.emplacement{margin:0;padding:8px 12px;border:1.5px dashed var(--orange);background:rgba(var(--clair-rvb),.9);max-width:30em}
.emplacement strong,.photo-vide strong{display:block;font:600 1rem/1.3 var(--texte);color:var(--encre)}
.v-vide{flex:0 1 21em}
.photo{margin:0;position:relative;overflow:hidden;background:var(--papier-terne)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-16-10{aspect-ratio:16/10}.photo-4-5{aspect-ratio:4/5}.photo-3-4{aspect-ratio:3/4}.photo-4-3{aspect-ratio:4/3}.photo-1-1{aspect-ratio:1/1}.photo-16-9{aspect-ratio:16/9}.photo-3-2{aspect-ratio:3/2}.photo-43-80{aspect-ratio:43/80}.photo-77-160{aspect-ratio:77/160}
/* une vue = sa photo et sa légende, vraie et sobre, posée dans l'angle (jamais sur le sujet) */
.vue{position:relative;margin:0;min-width:0}
.vue figcaption{overflow-wrap:anywhere;hyphens:auto;position:absolute;left:0;bottom:0;max-width:100%;padding:8px 10px 5px;background:var(--papier);color:var(--encre);font:500 .9375rem/1.35 var(--texte)}
.vue figcaption .marque-exemple{margin-left:4px;font-size:.8125rem}
.vue-film figcaption{display:flex;align-items:center;gap:6px;padding:0 0 0 10px;right:0}
.vue-film figcaption>span{flex:1 1 auto;padding:6px 0}
.film-pause{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:var(--ardoise);color:var(--craie)}
.film-pause.arrete .v-arret-ic{background:currentColor;clip-path:polygon(1px 0,100% 50%,1px 100%)}
.photo-vide{display:grid;place-items:center;padding:12px;text-align:center;border:1.5px dashed var(--orange);
  background:repeating-linear-gradient(135deg,rgba(var(--ombre-rvb),.05) 0 2px,transparent 2px 14px),var(--blanc)}

/* ---------- sections */
main{position:relative} /* la trame des montants (lignes blanches et leur ombre) est retirée : sur le papier, il n'en restait que des traits gris */
.section{padding:clamp(44px,5.4vw,76px) var(--marge);position:relative}
.tete-section{display:grid;gap:14px;margin-bottom:clamp(22px,3vw,40px);max-width:46rem}
.tete-section h2{font-size:clamp(2.3rem,7.2vw,4.5rem)}
.chapeau{font-size:1.125rem;line-height:1.55;max-width:36em;margin:0;color:var(--encre)}
.tete-section .marque-exemple{margin-top:8px}
/* ---------- LA chorégraphie (v2-10), une seule, née de sa carte : le filet en pointillés orange se trace de gauche à droite,
   point par point, sous chaque titre ; le titre se pose derrière lui ; sur la carte, les lignes arrivent l'une après
   l'autre et leurs points de conduite se tirent jusqu'au prix. Entrées de 0,4 à 0,6 s, 40 ms d'écart, rien ne rejoue.
   Sans script : rien n'est caché (les états de départ ne valent que sous .js). Mouvement réduit : tout est posé d'emblée.
   « .vu » est posé par la page quand le bloc entre dans l'écran (arizona.js). */
:root{--points:radial-gradient(circle at 1.5px 1.5px,var(--filet) 1.45px,transparent 1.65px) 0 0/6px 3px repeat-x}
.t-filet,.page-tete h1{overflow:hidden;padding-top:.14em} /* la place des accents des capitales (É, Ö) : rien n'est rogné */
.t-pose{display:block}
.t-filet::after,.bloc h2::after,.c-rubrique h2::after{content:"";display:block;height:3px;margin-top:.24em;background:var(--points)}
.c-rubrique h2::after{flex:0 0 100%;margin-top:3px}
.bloc h2::after{margin-top:.34em}
.page-tete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--points)}
.tb-ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--points)}
@keyframes tracer{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes poser{from{transform:translateY(108%)}to{transform:none}}
@keyframes arriver{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* états de départ : seulement avec le script, et seulement avant l'entrée */
  .js :is(.section,.bloc,.c-rubrique):not(.vu) :is(.t-filet,h2)::after,.js .section:not(.vu) .tb-ticket::before{clip-path:inset(0 100% 0 0)}
  .js .section:not(.vu) .t-pose{transform:translateY(108%)}
  .js :is(.c-rubrique,.bloc):not(.vu) :is(.carte li,.c-liste li,.etapes li,.galerie .vue),.js .section:not(.vu) .chapeau{opacity:0}
  .js .c-rubrique:not(.vu) .c-points{clip-path:inset(-6px 100% -6px 0)}
  /* l'entrée */
  :is(.section,.bloc,.c-rubrique).vu :is(.t-filet,h2)::after,.section.vu .tb-ticket::before{animation:tracer .6s steps(36,end) both}
  .section.vu .t-pose{animation:poser .5s var(--courbe) .16s both}
  .section.vu .chapeau{animation:arriver .5s var(--courbe) .3s both}
  :is(.c-rubrique,.bloc).vu :is(.carte li,.c-liste li,.etapes li,.galerie .vue){animation:arriver .45s var(--courbe) both;animation-delay:calc(180ms + var(--i,0)*40ms)}
  .c-rubrique.vu .c-points{animation:tracer .5s steps(22,end) both;animation-delay:calc(300ms + var(--i,0)*40ms)}
  /* les pages intérieures : à l'arrivée, sans attendre le script */
  .page-tete::after{animation:tracer .6s steps(48,end) .1s both}
  .page-tete .t-pose{animation:poser .5s var(--courbe) .26s both}
}

/* ---------- l'ardoise de midi, sur son chevalet (la sienne est une ardoise sur pied, posée dans le patio) */
.chevalet{position:relative;padding-bottom:clamp(44px,7vw,86px)}
.chevalet::before,.chevalet::after{content:"";position:absolute;bottom:0;z-index:-1;width:14px;height:calc(clamp(44px,7vw,86px) + 46px);border-radius:2px;background:linear-gradient(90deg,var(--bois),var(--bois-fonce));box-shadow:5px 6px 0 rgba(var(--ombre-rvb),.14)}
.chevalet::before{left:13%;rotate:5deg;transform-origin:top}
.chevalet::after{right:13%;rotate:-5deg;transform-origin:top}
.s-ardoise{padding-top:clamp(22px,5vw,64px)}
.ar-scene{display:grid;gap:28px;align-items:start}
.ardoise{position:relative;isolation:isolate;overflow:hidden;color:var(--craie);padding:clamp(18px,4.4vw,40px);border:10px solid var(--bois);border-radius:3px;touch-action:pan-y;
  background:
    radial-gradient(120% 70% at 22% 12%,rgba(var(--craie-rvb),.085),transparent 60%),
    radial-gradient(90% 60% at 84% 88%,rgba(var(--craie-rvb),.06),transparent 62%),
    url(grain.svg),var(--ardoise);
  background-blend-mode:normal,normal,soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 3px var(--bois-fonce),0 9px 0 -1px var(--bois-fonce)}
.ardoise :focus-visible{outline-color:var(--craie)}
.ar-rayon{position:absolute;inset:-10% -60%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(calc(104deg + var(--soleil)*10deg),transparent 40%,rgba(255,236,188,.2) 48%,rgba(255,246,222,.1) 55%,transparent 62%)}
.ardoise.ecrit .ar-rayon{animation:rayon 1.5s ease-in-out both}
@keyframes rayon{0%{opacity:0;transform:translateX(-32%)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(32%)}}
.ar-nom{font-size:clamp(1.3rem,4.4vw,1.625rem);line-height:1.1;color:var(--craie);margin-bottom:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.ar-date{word-spacing:normal;font:italic 400 1.125rem/1.3 var(--trois);color:rgba(var(--craie-rvb),.9)}
/* la craie : le blanc n'est jamais plein, on voit l'ardoise au travers */
.ar-etiquette,.ar-titre,.ar-plat{-webkit-mask:url(craie.svg) 0 0/320px 320px;mask:url(craie.svg) 0 0/320px 320px;text-shadow:0 0 1px rgba(var(--craie-rvb),.5)}
.ar-conseil{margin:16px 0 0;font:600 1rem/1.5 var(--texte);color:var(--orange-clair)}
.ar-conseil .marque-exemple{margin-left:4px}
.ar-prix{margin:18px 0 0;font:italic 400 1.1875rem/1.4 var(--trois)}
.ar-prix .a-completer,.ar-table .a-completer{display:inline-block;margin:0}
.ar-table{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ar-exemple{margin:14px 0 0;padding:10px 12px;border:1.5px dashed rgba(var(--craie-rvb),.6);font-size:1rem;line-height:1.5;color:var(--craie);width:fit-content}
.bouton.craie{border-color:var(--craie);color:var(--craie)}
.bouton.craie:hover{background:var(--craie);color:var(--ardoise)}
@media (min-width:761px){
  .ar-scene{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:calc((100vw - 2*var(--marge))/12)}
  .chevalet{margin:-6px 0 -40px -22px} /* la règle cassée : le chevalet déborde de son carreau */
  .ar-vide,.ar-film{margin-bottom:10px}
}
/* les plats : quatre carreaux sous UNE étiquette qui fait corps avec la grille (même cadre, toute la largeur) :
   elle couvre les quatre photos, outil/captures.mjs le mesure. Au téléphone : une bande compacte de quatre vignettes. */
.ar-plats{display:grid;align-content:end;margin-top:30px}
.ar-vitres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--montant);background:var(--montant-c);border:var(--montant) solid var(--montant-c);box-shadow:var(--portee)}
.ar-plats-note{grid-column:1/-1;margin:0;padding:8px 10px;font:600 1rem/1.5 var(--texte);color:var(--encre);background:var(--blanc)}
.ar-vitres .photo-vide{border:0}
@media (min-width:761px){.ar-plats{margin-top:0}.ar-vitres{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ar-vitres.ar-siennes{grid-template-columns:repeat(6,minmax(0,1fr))}
.ar-siennes .vue{grid-column:span 2}
.ar-siennes .vue-grande{grid-column:1/-1}
.ar-siennes .vue:not(.vue-grande) figcaption{position:static;padding:5px 6px;font-size:.875rem;line-height:1.3;min-height:3.4em}
.ar-siennes .vue:not(.vue-grande){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;background:var(--blanc)}
.ar-film{position:relative;aspect-ratio:4/5;overflow:hidden}

.ar-vide{max-width:none;display:grid;align-content:center;justify-items:center;text-align:center;padding:20px;min-height:150px;background:repeating-linear-gradient(135deg,rgba(var(--ombre-rvb),.05) 0 2px,transparent 2px 14px),var(--blanc)}
@media (min-width:761px){.ar-vide{aspect-ratio:4/5}}
.ar-film picture,.ar-film img,.ar-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- la table en un geste */
.tb{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.tb-cote{display:contents}
.tb-reglages{order:1}.tb-ticket{order:2}.tb-photo{order:3}
.tb-photo .photo{aspect-ratio:45/32}
.tb-maison{font:800 1.625rem/1 var(--titre);word-spacing:-.06em;color:var(--vert);text-align:center;padding-bottom:14px;border-bottom:2px dotted var(--filet)}
/* v2-10 : la section est une table vert sombre ; la phrase à dire est une addition posée dessus */
.s-table{background:var(--vert-sombre);color:var(--papier)}
.s-table h2,.s-table .chapeau{color:var(--papier)}
.s-table :focus-visible{outline-color:var(--papier)}
.s-table .tb-ticket :focus-visible{outline-color:var(--encre)}
.s-table .tb-compte button,.s-table .puce-b,.s-table .puce span{border-color:var(--papier);background:transparent;color:var(--papier)}
.s-table .tb-compte button:hover:not([aria-disabled="true"]),.s-table .puce-b[aria-pressed="true"],.s-table .puce input:checked+span{background:var(--papier);color:var(--vert-sombre)}
.s-table .puce input:focus-visible+span{outline-color:var(--papier)}
.tb-reglages{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;min-width:0}
.tb-champ{border:0;padding:0;margin:0;min-width:0}
.tb-legende{font:600 1rem/1.3 var(--texte);padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tb-compte{display:inline-flex;align-items:center;gap:14px}
.tb-compte button{flex:none;width:52px;height:52px;border:2px solid var(--vert);border-radius:50%;background:var(--blanc);font-size:1.5rem;line-height:1;transition:background .2s,color .2s}
.tb-compte button:hover:not([aria-disabled="true"]){background:var(--vert);color:var(--blanc)}
.tb-compte button[aria-disabled="true"]{opacity:.38;cursor:default}
.tb-compte{max-width:100%}
@media (max-width:330px){.tb-compte{gap:6px}.tb-compte button{width:46px;height:46px}.tb-compte output{min-width:5.4em}}
.tb-compte output{font:700 clamp(1.25rem,5.4vw,1.6rem)/1 var(--titre);min-width:6.2em;text-align:center}
.puces{display:flex;flex-wrap:wrap;gap:10px}
.tb-tailles{margin-top:12px}
.puce-b{min-width:48px;min-height:48px;padding:2px 14px 0;border:2px solid var(--vert);background:var(--blanc);font:700 1.25rem/1 var(--titre);transition:background .2s,color .2s}
.puce-b[aria-pressed="true"]{background:var(--vert);color:var(--blanc)}
.tb-marque,.vt-marque{margin:0}
.tb-derniere{margin-top:10px}
.puce{position:relative;display:inline-flex}
.puce input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.puce span{display:inline-flex;align-items:center;min-height:48px;padding:2px 16px 0;border:2px solid var(--vert);background:var(--blanc);font:600 1.1875rem/1 var(--titre);transition:background .2s,color .2s}
.puce input:checked+span{background:var(--vert);color:var(--blanc)}
.puce input:focus-visible+span{outline:3px solid var(--vert);outline-offset:3px}
.puce input:disabled{cursor:not-allowed}
.puce input:disabled+span,.s-table .puce input:disabled+span{opacity:.5;border-style:dashed;background:transparent}
.tb-plein{margin:10px 0 0;color:var(--papier);font-weight:600}
/* « Garder mes coordonnées » (29/10/2026) : une case, son aide, la fidélité si le restaurant l'a ouverte */
.tb-garder{display:grid;gap:8px}
.tb-case{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:10px 0;cursor:pointer;font:600 1rem/1.35 var(--texte)}
.tb-case input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--papier);cursor:pointer}
.tb-case input:focus-visible{outline:3px solid var(--papier);outline-offset:3px}
.tb-garder-aide,.tb-fidelite{margin:0;font-size:.9375rem;color:rgba(var(--clair-rvb),.9)}
.tb-fidelite{font-weight:600;color:var(--papier)}
/* Click & Eat (29/10/2026) : les plats choisis avec la table, dans le formulaire vert ; la carte s'ouvre à la demande */
.tb-ce{display:grid;gap:12px;padding-top:18px;border-top:1px solid rgba(var(--clair-rvb),.28)}
.tb-ce .tb-legende{margin:0;font:700 1.25rem/1.25 var(--titre)}
.tb-ce-intro,.tb-ce-aide{margin:0;color:rgba(var(--clair-rvb),.9)}
.tb-ce-aide{font-size:.9375rem}
.tb-ce-ouvrir{justify-self:start;min-height:48px;padding:.6em 1.1em .45em;border:2px solid var(--papier);border-radius:999px;background:transparent;color:var(--papier);font:700 1rem/1.2 var(--texte);cursor:pointer}
.tb-ce-ouvrir:hover,.tb-ce-ouvrir[aria-expanded="true"]{background:var(--papier);color:var(--vert-sombre)}
.tb-ce-carte{display:grid;gap:14px;max-height:min(70vh,38rem);overflow-y:auto;padding:12px;background:var(--papier);color:var(--encre);border-radius:2px}
.tb-ce-carte .tb-ce-aide{color:var(--encre-douce)}
.tb-ce-r{margin:0 0 4px;font:700 1.0625rem/1.2 var(--titre);color:var(--orange)}
.tb-ce-rubrique ul{list-style:none;margin:0;padding:0}
.tb-ce-rubrique li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 0;border-bottom:1px dotted rgba(var(--ombre-rvb),.25)}
.tb-ce-rubrique li.choisi{box-shadow:inset 4px 0 0 var(--orange);padding-left:10px}
.tb-ce-nom{min-width:0;font-weight:600}
.tb-ce-rubrique .prix{white-space:nowrap;font:700 1rem/1 var(--titre)}
.tb-ce-qte{grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;gap:4px}
.tb-ce-qte button{width:44px;height:44px;padding:0;border:2px solid var(--vert);border-radius:50%;background:var(--blanc);color:var(--vert);font-size:1.375rem;line-height:1}
.tb-ce-qte button:hover:not([aria-disabled="true"]){background:var(--vert);color:var(--blanc)}
.tb-ce-qte button[aria-disabled="true"]{opacity:.38;cursor:default}
.tb-ce-qte output{min-width:1.8em;text-align:center;font:700 1.25rem/1 var(--titre)}
.tb-ce-qte button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tb-ce-resume{margin:0;font:700 1.125rem/1.3 var(--titre);color:var(--orange-clair)}
.s-table .tb-ce textarea{min-height:76px;border-color:var(--papier)}
@media (min-width:600px){.tb-ce-rubrique li{grid-template-columns:minmax(0,1fr) auto auto}.tb-ce-qte{grid-column:auto}}
.cc-ce{margin:0;max-width:40rem;padding:10px 14px;border-left:4px solid var(--orange);background:rgba(var(--clair-rvb),.9)}
.tb-ticket{min-width:0;position:relative;background:var(--blanc);color:var(--encre);padding:clamp(24px,4vw,44px) clamp(20px,3.4vw,44px);display:grid;gap:16px;align-content:center;box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
.tb-ticket p{margin:0}
.tb-note{max-width:34em}
@media (min-width:900px){
  .tb{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4.5vw,72px);align-items:stretch}
  .tb-cote{display:grid;grid-template-rows:auto minmax(240px,1fr);gap:26px;min-width:0}
  .tb-photo img{object-position:50% 30%}
  .tb-photo{position:relative;min-height:0}
  .tb-photo .photo{position:absolute;inset:0;aspect-ratio:auto}
  .tb-ticket{rotate:.5deg;align-self:center}
}

/* ---------- la maison : un texte court, un carreau sobre pour sa photo, et la lumière qui traverse la section */
.s-maison{padding:0;overflow:hidden}
.ma-grand{display:grid;grid-template-columns:minmax(0,1fr)}
.ma-photo{order:1;position:relative;overflow:hidden}
.ma-photo .photo{aspect-ratio:4/5}
.ma-photo img{object-position:50% 46%}
.ma-texte{order:2;padding:clamp(24px,6vw,44px) var(--marge) clamp(26px,6vw,44px)}
.ma-texte .tete-section{margin:0}
.ma-second{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--montant);background:var(--blanc);border-top:var(--montant) solid var(--blanc)}
.ma-second .photo-4-3{aspect-ratio:4/3}
.ma-second .ar-film{aspect-ratio:9/16}
/* au téléphone, la vidéo du soir (464 px de large à l'origine) reste petite et nette ; sa légende et sa pause sont à côté, sur le vert sombre */
.ma-second .vue-film{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);background:var(--vert-sombre)}
.ma-second .vue-film figcaption{position:static;display:grid;align-content:end;justify-items:start;gap:12px;padding:16px 14px;background:none;color:var(--papier);font:italic 400 1.125rem/1.35 var(--trois)}
.ma-second .vue-film figcaption>span{padding:0}
@media (prefers-reduced-motion:no-preference){
  .ma-photo img{animation:travelling 34s ease-in-out -6s infinite alternate;transform-origin:50% 30%}
  .ma-second .photo img{animation:travelling 29s ease-in-out -12s infinite alternate;transform-origin:30% 60%}
  .tb-photo img{animation:travelling 31s ease-in-out -3s infinite alternate;transform-origin:60% 70%}
}
.mouvement-arrete :is(.ma-photo,.ma-second,.tb-photo) img{animation-play-state:paused}
/* à l'ordinateur : le texte à gauche sur le papier, la grande photo du patio à droite sur toute la hauteur ; dessous, la
   terrasse en grand et, à côté, le soir (sa vidéo est petite : jamais agrandie au-delà de 1,3 fois) */
@media (min-width:861px){
  .ma-grand{grid-template-columns:minmax(0,36fr) minmax(0,64fr);min-height:min(80svh,800px)}
  .ma-photo{order:2}
  .ma-photo .photo{position:absolute;inset:0;aspect-ratio:auto}
  .ma-texte{order:1;align-self:center;padding:40px clamp(28px,3.6vw,64px) 40px var(--marge)}
  .ma-texte .tete-section h2{font-size:clamp(2.3rem,4.6vw,4.5rem)}
  .ma-second{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);height:min(64svh,640px)}
  .ma-second>*{min-height:0;height:100%}
  .ma-second .photo,.ma-second .ar-film{aspect-ratio:auto;height:100%}
  .ma-second .vue-film{display:block;position:relative}
  .ma-second .vue-film figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 0 0 12px;background:var(--vert-sombre)}
  .ma-second .vue-film figcaption>span{flex:1 1 auto;padding:8px 0}
}

/* ---------- pratique : un vitrage aux carreaux inégaux. Le grand carreau, ce sont les horaires, vivants ;
   à côté, venir (carreau plein, vert palmier) et, plus petit, les groupes. */
.vitrage{display:grid;gap:1px;background:var(--bord);border:1px solid var(--bord)}
.vt{background:var(--blanc);padding:clamp(20px,3.2vw,44px);display:grid;gap:14px;align-content:start;min-width:0}
.vt h3{font:600 1.0625rem/1.3 var(--texte);color:var(--orange)}
.vt p{margin:0;max-width:32em}
.vt-etat [data-etat]{display:block;margin-bottom:10px;font:800 clamp(1.9rem,5.4vw,3.2rem)/1.08 var(--titre);color:var(--vert);text-wrap:balance}
.vt-grand{font:700 clamp(1.6rem,3.5vw,2.35rem)/1.14 var(--titre);text-wrap:balance}
.vt-moyen{font:700 clamp(1.25rem,2.4vw,1.5rem)/1.5 var(--titre)}
.vt-service{font:italic 400 1.1875rem/1.4 var(--trois)}
.vt-note{color:var(--encre-douce)}
.semaine{display:flex;gap:1px;background:var(--bord);border:1px solid var(--bord)}
.semaine li{flex:1 1 0;display:grid;gap:4px;align-content:center;justify-items:center;min-width:0;min-height:92px;padding:10px 4px;background:var(--blanc);text-align:center;transition:background .4s var(--courbe),color .4s var(--courbe)}
.sj-nom{font:600 1rem/1.2 var(--texte);letter-spacing:.06em}
.sj-h{font:600 1.0625rem/1.3 var(--titre)}
.semaine li.aujourdhui{background:var(--orange);color:#fff}
.vt-venir{background:var(--vert-sombre);color:var(--papier)}
.vt-groupes h3{color:var(--tomate)} /* le rouge de sa tomate : une seule touche sur l'accueil */
.vt-venir h3{color:var(--orange-clair)}
.vt-venir .lien-fleche{color:var(--orange-clair)}
.vt-venir :focus-visible{outline-color:var(--blanc)}
@media (min-width:861px){
  .vitrage{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto}
  .vt-horaires{grid-row:1/3}
}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--orange);text-decoration:none;border-bottom:2px solid currentColor}
.lien-fleche::after{content:"→";transition:transform .25s var(--courbe)}
.lien-fleche:hover::after{transform:translateX(4px)}
.lien-fleche.dehors::after{content:"↗"}
.vitre-liens{display:flex;flex-wrap:wrap;gap:8px 22px}
@media (min-width:861px){.vitres{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- pages intérieures */
.page-haut{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-28px 0 8px}
.page-tete{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,8vw,96px) var(--marge) clamp(26px,4.5vw,52px);background:var(--papier);display:grid;gap:16px}
.page-tete h1{font-size:clamp(1.9rem,10vw,6.5rem);text-transform:uppercase;letter-spacing:.01em;hyphens:auto}
.page-tete .chapeau{font-size:1.1875rem}
.page-corps{padding:clamp(40px,7vw,96px) var(--marge);display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:861px){.page-corps{grid-template-columns:repeat(2,minmax(0,1fr))}.bloc-large,.bloc-appel{grid-column:1/-1}}
.bloc{display:grid;gap:14px;align-content:start;max-width:40rem;min-width:0}
.bloc h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-top:.4em}
.bloc p{margin:0}
.adresse{font:700 1.375rem/1.4 var(--titre)}
.note{font-size:1rem;color:var(--encre-douce)}
.fort{font:700 1.375rem/1.35 var(--titre)}
.coches li,.lignes li,.etapes li{padding:12px 0;border-bottom:1px solid var(--trait)}
.coches li{padding-left:28px;position:relative}
.coches li::before{content:"";position:absolute;left:2px;top:1.15em;width:12px;height:7px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);rotate:-45deg}
.etapes{counter-reset:e}
.etapes li{counter-increment:e;padding-left:44px;position:relative}
.etapes li::before{content:counter(e);position:absolute;left:0;top:8px;font:700 1.5rem/1.2 var(--titre);color:var(--orange)}
.tableau{overflow-x:auto}
.horaires{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.horaires th,.horaires td{text-align:left;padding:13px 12px 13px 0;border-bottom:1px solid var(--trait);vertical-align:top}
.horaires td{font:500 1.125rem/1.3 var(--titre)}
.horaires thead th{font:600 1.0625rem/1.3 var(--texte);color:var(--orange);border-bottom:var(--pointille)}
.horaires tbody th{font:700 1.125rem/1.3 var(--titre);overflow-wrap:normal;white-space:nowrap}
.horaires .ferme td,.horaires .ferme th{color:var(--encre-douce)}
.horaires tr.aujourdhui th::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--tomate)}

/* ---------- ce qui vient des réglages du restaurant : logo, carte, jour sans menu, textes longs */
.logo{display:block;width:auto;height:40px}
.ar-sans{margin:0;font:700 clamp(1.2rem,4vw,1.5rem)/1.4 var(--titre)}
.ar-prix strong{font:700 1.3em/1 var(--titre);font-style:normal}
/* la carte : SA carte, recopiée. Lisible au pouce : rubriques ancrées (pastilles de 44 px), un plat par ligne, le nom
   et le prix sur la même ligne reliés par un pointillé, la description dessous. Deux colonnes à l'ordinateur. */
.page-carte .page-corps{display:block}
.page-corps.section{position:relative}
.c-outils{margin:0 0 22px}
.c-outils .bouton{white-space:normal} /* « Speisekarte als PDF (Französisch) » tient à 360 px */
.c-sommaire{margin:0 0 clamp(22px,4vw,40px)}
.c-sommaire ul{display:flex;flex-wrap:wrap;gap:8px}
.c-sommaire a{display:inline-flex;align-items:center;min-height:44px;padding:3px 14px 0;border:1px solid var(--vert);background:var(--blanc);color:var(--vert);font-weight:600;text-decoration:none}
.c-sommaire a:hover{background:var(--vert);color:var(--blanc)}
.c-note{margin:0 0 22px;max-width:40rem}
/* la carte et l'ardoise en PDF, une adresse par langue (28/10/2026) */
.pdf-langues{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:-12px 0 22px;font-size:.9375rem}
.pdf-langues a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600}
.pdf-langues a[aria-current]{text-decoration-thickness:2px}
.ardoise .pdf-langues{margin:16px 0 0;color:var(--craie)}
.ardoise .pdf-langues a{color:var(--craie)}
.c-colonnes{columns:2 24rem;column-gap:clamp(28px,5vw,72px)}
.c-rubrique{break-inside:avoid-column;margin:0 0 clamp(30px,4vw,48px);padding:clamp(18px,2.6vw,28px);background:var(--blanc);border:1px solid var(--bord);scroll-margin-top:8px}
.c-rubrique h2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;font-size:clamp(1.7rem,5vw,2.05rem);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--vert)}
.c-rubrique h2 .prix{word-spacing:normal;font:700 1.375rem/1.2 var(--titre);letter-spacing:0;color:var(--orange)}
.c-mention{margin:10px 0 0;color:var(--orange);font:italic 400 1.0625rem/1.4 var(--trois)}
.c-mention+.c-mention{margin-top:2px}
.carte{margin-top:6px}
.carte li{padding:11px 0;border-bottom:1px solid var(--trait)}
.c-ligne{display:flex;align-items:baseline;gap:8px}
.c-nom{font-weight:600;font-size:1.0625rem;line-height:1.3;min-width:0;padding-top:.12em}
.c-points{flex:1 1 12px;min-width:12px;border-bottom:2px dotted var(--filet);transform:translateY(-.3em)}
.carte .prix{font:700 1.25rem/1.2 var(--titre);white-space:nowrap;text-align:right}
.c-desc{display:block;margin-top:2px;max-width:30em;color:var(--encre-douce);font:italic 400 1.0625rem/1.4 var(--trois)}
.c-suite{margin-top:14px;border-top:2px dotted var(--filet)}
.c-encadre{margin-top:18px;padding:12px 14px;border:1.5px solid var(--vert)}
.c-encadre h3{font:600 1.0625rem/1.3 var(--texte);color:var(--vert)}
.c-encadre .carte li:last-child,.c-liste li:last-child{border-bottom:0}
.c-liste{margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.c-liste li{padding:8px 0 8px 16px;position:relative;border-bottom:1px solid var(--trait)}
.c-liste li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.c-rubrique .vue{margin:14px 0 4px;max-width:340px}
.c-haut{margin:12px 0 0;font-size:1.0625rem}
.c-haut a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--orange);font-weight:600}
.c-fin{display:grid;gap:14px;margin-top:8px;max-width:40rem}
/* les allergènes (règlement (UE) n° 1169/2011) : les pictos d'un plat (src/assets/allergenes.js), leur nom au survol ; la légende */
.al-planche{position:absolute;width:0;height:0;overflow:hidden}
.c-allergenes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.c-allergenes .al{width:22px;height:22px;flex:none}
.c-al-demander,.c-al-aucun{display:block;font:400 .9375rem/1.4 var(--texte);color:var(--encre-douce)}
.c-al-legende{padding:16px 0 4px;border-top:2px dotted var(--filet)}
.c-al-legende h2{font-size:1.625rem}
.c-al-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:6px 14px}
.c-al-liste li{display:flex;align-items:center;gap:8px;min-height:32px;font-size:1rem}
.c-al-liste .al{width:28px;height:28px;flex:none}
.tb-ce-nom .c-allergenes{margin-top:2px}
.tb-ce-nom .c-allergenes .al{width:18px;height:18px}
/* la galerie des groupes et la terrasse : ses photos, grandes, chacune avec ce qu'elle montre */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--montant);background:var(--montant-c);border:var(--montant) solid var(--montant-c);box-shadow:var(--portee)}
.galerie .vue:nth-child(-n+2){grid-column:1/-1}
.bloc-galerie{max-width:none}
.bloc-galerie .note{max-width:40rem}
.bloc-photo{max-width:none}
.bloc-photo .vue{border:1px solid var(--bord)}
@media (min-width:861px){
  .galerie{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;max-width:1100px}
  .galerie .vue:nth-child(1){grid-column:1/3;grid-row:1/3}
  .galerie{align-items:stretch}
  .galerie .vue:nth-child(1) .photo{aspect-ratio:auto;height:100%}
  .galerie .vue:nth-child(2){grid-column:3/5}
  .galerie .vue:nth-child(n+3){grid-column:span 1}
  .bloc-photo{grid-column:1/-1}
  .bloc-photo .vue{max-width:880px}
}
.fermetures{margin:0}
/* un mot très long (un plat en allemand, une adresse) passe à la ligne plutôt que de pousser la page */
h1,h2,h3,p,li,dd,dt,td,th,.bouton,.puce span{overflow-wrap:anywhere}
.ar-table .bouton{white-space:normal}

/* ---------- pied */
.pied{background:var(--vert-sombre);color:var(--papier);padding:clamp(40px,7vw,84px) var(--marge) 28px;position:relative;border-top:var(--pointille)}
.pied :focus-visible{outline-color:var(--blanc)}
.pied-in{display:grid;gap:26px}
.pied-nom{font:800 clamp(2.4rem,9vw,4.75rem)/1 var(--titre);margin:0}
.pied-col h2{font:600 1rem/1.3 var(--texte);color:var(--orange-clair);margin-bottom:10px}
.pied-col p{margin:0 0 8px}
.pied-col ul{display:grid;gap:8px}
.pied-col a{display:inline-flex;align-items:center;min-height:44px}
.pied-col a[href^="tel:"]{font:600 1.25rem/1 var(--titre)}
.pied-note,.pied-projet{margin:0;font-size:1rem;color:rgba(var(--clair-rvb),.86)}
.pied-projet{padding-top:18px;border-top:1px solid rgba(var(--clair-rvb),.22)}
@media (min-width:861px){.pied-in{grid-template-columns:2fr 1fr 1fr}.pied-note,.pied-projet{grid-column:1/-1}}


/* ---------- l'ouverture (21/10/2026) : le bandeau de papier. Le nom en enseigne, la ligne de l'heure, le prix du plat du
   jour, trois boutons ; le filet en pointillés de sa carte dessous, puis tout de suite l'ardoise. Téléphone : les trois
   boutons côte à côte (deux lignes de texte permises). Ordinateur : une seule bande, le nom à gauche, les boutons à droite. */
.ouv{padding:14px var(--marge) 16px;background:var(--papier);border-bottom:var(--pointille)}
.ouv-in{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 36px;align-items:center}
.ouv-nom{margin:2px 0 4px;font-size:clamp(1.9rem,12.4vw,4.6rem);line-height:.95;letter-spacing:-.005em;white-space:nowrap}
.ouv-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ouv-actions .bouton{min-height:54px;padding:5px 6px 2px;white-space:normal;text-align:center;line-height:1.15;font-size:1rem}
@media (min-width:980px){
  .ouv{padding-block:18px 20px}
  .ouv-in{grid-template-columns:minmax(0,1fr) auto}
  .ouv .surtitre{grid-area:1/1}
  .ouv-nom{grid-area:2/1;margin:0}
  .ouv .vivante{grid-area:3/1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 22px;font-size:1.1875rem}
  .ouv .vivante [data-vivante]{display:inline}
  .ouv .v-prix{margin:0;font-size:1.5rem;white-space:nowrap}
  .ouv-actions{grid-area:1/2/4/3;display:flex;margin:0;align-self:end}
  .ouv-actions .bouton{min-height:52px;padding:5px clamp(14px,1.6vw,24px) 2px;white-space:nowrap}
}

/* ---------- l'ardoise de la semaine (21/10/2026) : les cinq jours en rangs, comme une ardoise de bistrot : le jour et sa
   date, le plat, un pointillé de craie, le prix ; la garniture dessous en Lora. Le jour du service est marqué (étiquette en
   orange clair, trait de craie à gauche) ; les jours passés de la semaine pâlissent. La craie écrit mot à mot à l'entrée. */
.ar-titre{margin:0 0 10px;font-size:clamp(1.9rem,7vw,3rem);color:var(--craie)}
.ar-jour{position:relative;padding:14px 0 15px;border-top:2px dashed rgba(var(--craie-rvb),.28)}
.ar-jour:first-child{border-top:0}
.ar-plat{display:flex;align-items:baseline;gap:10px;margin:0;font:700 clamp(1.3rem,4.9vw,1.75rem)/1.2 var(--titre)}
.ar-plat-nom{min-width:0}
.ar-points{flex:1 1 16px;min-width:16px;border-bottom:2px dotted rgba(var(--craie-rvb),.6);transform:translateY(-.3em)}
.ar-plat-prix{white-space:nowrap}
.ar-desc{margin:3px 0 0;font:italic 400 1.0625rem/1.35 var(--trois);color:var(--craie)}
.ar-jour.aujourdhui::before{content:"";position:absolute;left:calc(-1*clamp(10px,2.6vw,24px));top:16px;bottom:16px;width:4px;border-radius:2px;background:var(--orange-clair)}
.ar-jour.aujourdhui .ar-etiquette{color:var(--orange-clair)}
.ar-jour.passe{opacity:.62}
.ar-exemple{margin-top:6px}
/* l'écriture : chaque mot se découvre de gauche à droite, l'un après l'autre (seulement si le script l'a préparée) */
.ardoise.a-ecrire .mot{display:inline-block;clip-path:inset(-12% 100% -12% 0)}
.ardoise.a-ecrire.ecrit .mot{clip-path:inset(-12% -4% -12% 0);transition:clip-path .38s cubic-bezier(.3,.6,.3,1);transition-delay:calc(var(--n,0)*35ms)}
/* les suggestions : deux petites ardoises à côté (dessous au téléphone), le titre de la rubrique à la craie orange */
.ar-cote{display:grid;gap:26px;min-width:0}
.sugg{display:grid;gap:14px}
.sugg-p{padding:16px 18px;color:var(--craie);border:6px solid var(--bois);border-radius:2px;background:url(grain.svg),var(--ardoise);background-blend-mode:soft-light,normal;box-shadow:inset 0 0 0 2px var(--bois-fonce)}
.sugg-titre{margin:0 0 6px;font:italic 400 1.125rem/1.3 var(--trois);color:var(--orange-clair)}
.sugg-nom{margin:0;font:700 clamp(1.3rem,4.6vw,1.5rem)/1.2 var(--titre);word-spacing:-.06em;-webkit-mask:url(craie.svg) 0 0/320px 320px;mask:url(craie.svg) 0 0/320px 320px}
.sugg-prix{margin:10px 0 0}
.sugg-prix .a-completer{margin:0}
.sugg-marque{margin:0}
@media (min-width:540px) and (max-width:760px){.sugg{grid-template-columns:1fr 1fr}.sugg-marque{grid-column:1/-1}}

/* ---------- les trois demandes (table, Click & Collect, devis) : champs, calendrier, message WhatsApp */
.champs{display:grid;gap:14px;min-width:0}
.tb-qui{margin:14px 0 4px}.s-table .tb-qui .champ input{border-color:var(--vert)}.s-table .tb-qui :focus-visible{outline-color:var(--encre)}.s-table .tb-ticket .d-remplir,.d-remplir{color:var(--orange);font-weight:600}
.champ{display:grid;gap:6px;min-width:0}
.champ-nom{font:600 1rem/1.3 var(--texte)}
.champ input,.champ select,.champ textarea{width:100%;min-height:50px;padding:13px 12px 10px;border:2px solid var(--vert);border-radius:0;background:var(--blanc);color:var(--encre);font:400 1.0625rem/1.3 var(--texte)}
.champ textarea{min-height:120px;resize:vertical}
.champ :focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.s-table .champ input{border-color:var(--papier)}
.s-table .champ :focus-visible{outline-color:var(--papier)}
@media (min-width:600px){.tb .champs,.ev-form{grid-template-columns:1fr 1fr}.champ-large{grid-column:1/-1}}
.cal{max-width:23rem}
.cal-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cal-mois{margin:0;font:700 1.375rem/1.2 var(--titre)}
.cal-fleche{flex:none;width:48px;height:48px;padding:0;border:2px solid var(--papier);border-radius:50%;background:none;color:var(--papier);font-size:1.25rem;line-height:1}
.cal-fleche:hover:not([aria-disabled="true"]){background:var(--papier);color:var(--vert-sombre)}
.cal-fleche[aria-disabled="true"]{opacity:.35;cursor:default}
.cal-grille{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed}
.cal-grille th{padding:4px 0;font:600 .9375rem/1 var(--texte);color:var(--papier)}
.cal-jour{display:grid;place-items:center;width:100%;min-height:44px;aspect-ratio:1;padding:3px 0 0;border:0;border-radius:50%;background:transparent;color:var(--papier);font:600 1.125rem/1 var(--titre)}
.cal-jour:hover:not([aria-disabled="true"]){background:rgba(var(--clair-rvb),.16)}
.cal-jour[aria-pressed="true"]{background:var(--papier);color:var(--vert-sombre)}
.cal-jour[aria-disabled="true"]{opacity:.42;cursor:default;text-decoration:line-through;text-decoration-thickness:1px}
.cal-aujourdhui{box-shadow:inset 0 0 0 2px var(--orange-clair)}
.d-etiquette{margin:0;font:italic 400 1.125rem/1.3 var(--trois);color:var(--orange)}
.d-note{margin:0;font-size:1rem;color:var(--encre-douce)}
.message{margin:0;font:600 clamp(1.125rem,1.9vw,1.375rem)/1.45 var(--titre);text-wrap:pretty}
.m-ligne{display:block}
.message b{font-weight:800;color:var(--orange)}
.message .m-manque{font-weight:600;color:var(--encre-douce)}
.bouton:disabled,.bouton:disabled:hover{background:var(--papier-terne);border-color:var(--papier-terne);color:var(--encre-douce);cursor:not-allowed;transform:none}
a.bouton[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- Click & Collect : la carte à gauche (les plats à commander, − et + au bout de la ligne), la commande à droite,
   collante à l'ordinateur ; au téléphone, une barre en bas de l'écran mène à la commande */
.page-corps>.cc{grid-column:1/-1}
/* Click & Collect : en-tête resserré, la carte commence dans le premier écran */
[data-page="click"] .page-tete{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(20px,2.6vw,30px);gap:10px}
[data-page="click"] .page-tete h1{font-size:clamp(1.9rem,7vw,3.75rem)}
[data-page="click"] .cc{gap:18px}
[data-page="click"] .page-corps{padding-top:clamp(28px,3.5vw,44px)}
.cc{display:grid;gap:26px;min-width:0}
.cc-tete{display:grid;gap:14px;max-width:46rem}
.cc-tete p{margin:0}
.cc-tete .c-sommaire{margin:0}
.cc-carte{min-width:0}
.cc .carte li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center}
.cc .carte li>:not(.cc-qte){grid-column:1}
.cc-qte{grid-column:2;grid-row:1/4;display:inline-flex;align-items:center;gap:4px}
.cc-qte button{width:44px;height:44px;padding:0;border:2px solid var(--vert);border-radius:50%;background:var(--blanc);color:var(--vert);font-size:1.375rem;line-height:1}
.cc-qte button:hover:not([aria-disabled="true"]){background:var(--vert);color:var(--blanc)}
.cc-qte button[aria-disabled="true"]{opacity:.38;cursor:default}
.cc-qte output{min-width:1.8em;text-align:center;font:700 1.25rem/1 var(--titre)}
.cc .carte li.choisi{box-shadow:inset 4px 0 0 var(--orange);padding-left:12px}
.cc .carte li.indispo .c-ligne,.cc .carte li.indispo .c-desc{opacity:.55}
/* téléphone : le nom et le prix gardent toute la ligne (aucun mot coupé), − et + passent dessous, à droite */
@media (max-width:600px){.cc .carte li{grid-template-columns:minmax(0,1fr)}.cc-qte{grid-column:1;grid-row:auto;justify-self:end}}
.cc-indispo{font:italic 400 1rem/1.4 var(--trois);color:var(--encre-douce)}
.cc-panier{display:grid;gap:14px;align-content:start;min-width:0;padding:clamp(18px,2.6vw,28px);background:var(--blanc);border:1px solid var(--bord);scroll-margin-top:calc(var(--barre,0px) + 12px)}
.cc-panier h2{font-size:clamp(1.6rem,3vw,2rem)}
.cc-panier p{margin:0}
.cc-lignes li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--trait)}
.cc-lignes .prix,.cc-totaux dd{font:700 1.125rem/1.3 var(--titre);white-space:nowrap}
.cc-totaux{display:grid;gap:4px}
.cc-totaux div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cc-totaux dt{font-size:1rem}
.cc-total{margin-top:4px;padding-top:8px;border-top:var(--pointille)}
.cc-total dt{font-weight:700;font-size:1.0625rem}
.cc-total dd{font-size:1.5rem;color:var(--vert)}
.cc-paiement{font:italic 400 1.0625rem/1.4 var(--trois)}
.cc-barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--marge) calc(10px + env(safe-area-inset-bottom,0px));background:var(--vert-sombre);color:var(--papier);font:700 1.125rem/1.2 var(--titre);border-top:var(--pointille)}
.cc-barre .bouton{min-height:48px;padding:10px 16px 7px}
@media (max-width:899px){.cc.vivant{padding-bottom:76px}}
@media (min-width:900px){
  .cc{grid-template-columns:minmax(0,1fr) minmax(320px,25rem);gap:clamp(28px,4vw,56px);align-items:start}
  /* le Click & Eat dans la colonne de la commande, à côté de l'en-tête : il ne repousse pas la carte (29/10/2026) */
  .cc-tete{grid-column:1}
  .cc-ce{grid-column:2;grid-row:1;align-self:start}
  .cc-panier{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
  .cc-barre{display:none!important}
}

/* ---------- Events : les formules en panneaux façon rubrique de sa carte (A, B, C), puis le devis et son message */
.bloc-large:has(.formules),.ev-devis{max-width:none}
.bloc .coches{columns:2 15rem;column-gap:28px}
.bloc .coches li{break-inside:avoid}
.formules{display:grid;gap:18px}
.formule{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.4vw,26px);background:var(--blanc);border:1px solid var(--bord)}
.formule p{margin:0}
.formule-lettre{font:800 2.5rem/1 var(--titre);color:var(--orange)}
.formule h3{font-size:clamp(1.6rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em}
.formule-prix{font:700 1.5rem/1.2 var(--titre);word-spacing:-.06em;color:var(--vert)}
.formule-prix span{word-spacing:normal;font:italic 400 1.0625rem/1.3 var(--trois);color:var(--encre-douce)}
.formule .carte{margin-top:0}
@media (min-width:861px){.formules{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ev-grille{display:grid;gap:24px;min-width:0}
.ev-ticket{align-content:start;border:1px solid var(--bord);box-shadow:none}
@media (min-width:900px){.ev-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.ev-ticket{position:sticky;top:16px}}

/* ---------- l'ancienne page « Groupes » : un mot et un lien vers Events */
.redirige{display:grid;gap:18px;padding:clamp(40px,8vw,96px) var(--marge)}
.redirige p{margin:0}

/* ---------- mouvement réduit : l'état final, tout de suite */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::before{transform:none}
  .rideau{display:none!important}
  .ardoise .mot{clip-path:none!important}
}
@media (forced-colors:active){
  .chevalet::before,.chevalet::after{display:none}
  .ar-etiquette,.ar-titre,.ar-plat{-webkit-mask:none;mask:none}
  .bouton:disabled{border-style:dashed}
  .puce input:checked+span{outline:3px solid Highlight}
}
/* ---------- Click & Eat et Click & Collect côte à côte (02/11/2026) : l'ouverture passe à quatre boutons (deux par ligne au
   téléphone) ; « Commander à l'avance » sur l'accueil et « Sur place ou à emporter ? » sur la page Click & Eat : deux vitres
   égales, le Click & Eat en vert sombre (on y mange), le Click & Collect sur blanc (on l'emporte). */
.ouv-actions.avec-eat{grid-template-columns:repeat(2,minmax(0,1fr))}
.ouv-actions.avec-eat .bouton{min-height:48px}
.av-vitrage{margin-top:clamp(18px,2.6vw,28px)}
@media (min-width:700px){.av-vitrage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}}
.av-sur{font:600 .875rem/1.2 var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.vt.av-eat{background:var(--vert-sombre);color:var(--papier)}
.av-eat .av-sur{color:var(--papier)}
.av-eat h3{color:var(--orange-clair)}
.av-eat .lien-fleche{color:var(--orange-clair)}
.av-eat :focus-visible{outline-color:var(--blanc)}
.av-vitrage h3{margin:0;font:800 clamp(1.6rem,3.5vw,2.35rem)/1.1 var(--titre)}
.av-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0}
.ce-etapes .actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.ce-etapes .etapes strong{display:block;font:700 1.1875rem/1.3 var(--titre)}
.bloc-large:has(.av-vitrage){max-width:none}
.bloc-large .av-vitrage{margin-top:0}

@media print{
  .c-signature-everywhere,.cc-barre,.cc-qte,.rideau,.tete,.pied,.c-sommaire,.c-outils,.c-haut,.c-fin>:not(.c-al-legende),.c-note,.pdf-langues,.page-haut,.c-rubrique .vue{display:none!important}
  body::before{display:none}
  html,body,main,.page-tete,.c-rubrique{background:#fff!important;box-shadow:none!important}
  body{font-size:10.5pt}
  .page-tete{padding:0 0 8pt;border:0}.page-tete h1{font-size:26pt}
  .page-corps{padding:0}
  .c-colonnes{columns:2;column-gap:22pt}
  .c-rubrique{padding:0;margin:0 0 16pt;break-inside:avoid}
  .c-rubrique h2{font-size:15pt}
  .carte li{padding:4pt 0}
  .c-desc{font-size:9pt}
  .marque-exemple,.a-completer{border:0;padding:0}
  .carte li,.c-liste li,.c-points,.t-pose,.chapeau,.etapes li,.galerie .vue,h2::after,.t-filet::after,.tb-ticket::before,.page-tete::after{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
}