/* ==========================================================================
   ROSA LOUISE — DESIGN SYSTEM PARTAGÉ
   Bar & Restaurant festif à Lannion
   Maquette refonte multi-pages — base de la future intégration WordPress
   ========================================================================== */

:root{
  /* Charte graphique du client, reçue le 2026-09-17 : bleu azur vif, orange
     clair (le crème des fonds), noir, orange et rose. */
  --bleu:#0083CA;
  --creme:#FFF6DE;
  --noir:#000000;
  --orange:#F57B20;
  --rose:#FFAAA5;
  /* Aucune teinte dérivée (2026-09-17). Le premier passage avait calculé un
     « orange lisible » brun (#A44B07) et des bleus foncé et clair : le client
     les a vus, et ils ne sont pas dans sa charte. Les règles qui les
     remplacent, tenues dans toute la feuille :
     - un mot de titre en couleur prend l'orange ou le bleu de la charte,
       cerné de noir (.o, .b) : sans contour, l'orange ne fait que 2,52:1 sur
       le crème ;
     - un petit texte (lien, prix, étiquette) est noir, et l'orange devient
       son soulignement ou son filet ;
     - sur le bleu, le texte est noir (5,10:1) ; sur le noir, l'orange (7,74:1)
       et le bleu (5,10:1) passent tels quels. */
  /* Hors charte : couleurs d'appoint du thème. */
  --jaune:#F8D254;
  --vert:#aede8a;
  --blanc:#ffffff;
  --titre:'Londrina Solid', sans-serif;
  --texte:'Nunito', sans-serif;
  --maxw:1400px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* L'en-tête est fixe : sans marge de défilement, une ancre ou un élément
   atteint au clavier arrive DERRIÈRE lui. Le message de retour de formulaire
   y disparaissait entièrement — mesuré de y=0 à y=60 pour un en-tête qui
   descend à 64. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
.form-message{scroll-margin-top:96px}
/* Le défilement animé est exactement le mouvement qui gêne les personnes
   sujettes au vertige : il survivait à la préférence système. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Cible du lien d'évitement : sans outline explicite, le focus posé sur
   <main> dessine un cadre autour de toute la page. */
main:focus{outline:none}
body{
  font-family:var(--texte);
  background:var(--creme);
  color:var(--noir);
  /* plus besoin de masquer un debordement global : chaque bande le contient. */
}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--orange);color:var(--noir)}
:focus-visible{
  /* Deux anneaux : un sombre et un clair. L'ancien anneau bleu uni devenait
     invisible sur les sections bleues, qui sont exactement de la même couleur.
     Avec cette paire, l'un des deux ressort toujours, quel que soit le fond. */
  outline:3px solid var(--noir);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--creme);
  border-radius:4px;
}

/* ---------- ÉCRAN D'OUVERTURE ----------
   L'écran orange de la maquette, remis à la demande du client. Le préchargeur
   d'origine avait été retiré pour trois raisons, qui ont chacune leur réponse :
   - il retenait la page 1,1 s APRÈS l'événement `load`, donc pour une durée
     sans borne : celui-ci suit un minutage fixe, 1,6 s en tout depuis le
     premier rendu, et n'attend rien ;
   - le voile était mesuré comme plus grand élément affiché (LCP) : celui-ci
     ne porte aucun texte dans le document, et la mesure du 2026-09-16 donne
     le même élément avec ou sans lui (la photo du cocktail sur ordinateur,
     le paragraphe d'accroche sur téléphone) ;
   - il se rejouait à chaque page : celui-ci passe une fois par visite.
   Et il est masqué par défaut : c'est le script d'amorce qui l'active, avant
   le premier rendu (inc/entetes.php). Sans JavaScript, il n'existe pas.

   La sortie est écrite ICI, en CSS, et pas dans main.js : si ce fichier ne se
   charge pas, l'écran part quand même à l'heure, et la page ne reste jamais
   coincée derrière l'orange. main.js ne fait que l'écourter au premier geste
   (clic, toucher, touche, molette) et le retirer du document ensuite.

   Aucune dépendance avec le hero, dans un sens ni dans l'autre : les keyframes
   sont préfixés `eo-`, l'état de départ de chaque animation vit dans son
   keyframe, et le H1 garde son `lUp` à lui. C'est le retrait du CSS de
   l'ancien préchargeur, qui partageait `lUp`, qui avait rendu le titre de
   l'accueil invisible.

   Minutage : lettres de 0 à 0,85 s (décalages posés en ligne par header.php,
   350 ms d'étalement au plus), ligne du bas de 0,45 à 0,8 s, sortie de 1,05 à
   1,6 s. */
.ecran-ouverture{display:none}
html.avec-ouverture .ecran-ouverture{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--orange);color:var(--creme);
  animation:eo-sortie .55s cubic-bezier(.76,0,.24,1) 1.05s both;
}
.eo-mot{display:flex;overflow:hidden;font-family:var(--titre);font-weight:900;font-size:clamp(3rem,9vw,7rem);line-height:1;text-transform:uppercase}
.eo-mot span{display:inline-block;animation:eo-lettre .5s var(--ease-pop) both}
.eo-mot span::before{content:attr(data-l)}
.eo-mot .eo-espace{width:.28em}
/* L'espacement des lettres s'ajoute aussi après la dernière : le retrait à
   gauche recentre la ligne. */
.eo-sous{padding-left:.35em;font-weight:800;font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;animation:eo-fondu .35s ease .45s both}
.eo-sous::before{content:attr(data-l)}
@keyframes eo-lettre{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes eo-fondu{from{opacity:0}to{opacity:1}}
/* `visibility` à la fin : parti, l'écran ne peut plus rien intercepter. */
@keyframes eo-sortie{from{transform:translateY(0)}to{transform:translateY(-100%);visibility:hidden}}
@media(max-width:640px){.eo-sous{padding-left:.22em;font-size:.75rem;letter-spacing:.22em}}
/* Double garde : le script d'amorce n'active déjà pas l'écran dans ces deux
   cas, mais une préférence changée en cours de route ne doit rien couvrir. */
@media (prefers-reduced-motion:reduce){html.avec-ouverture .ecran-ouverture{display:none}}
html.anim-off .ecran-ouverture{display:none}

/* ---------- CURSEUR ---------- */
#cursor{
  /* Positionné par `translate` et non par left/top : ces deux propriétés
     invalident la mise en page à chaque mouvement de souris, soit une centaine
     de recalculs par seconde. `translate` ne touche qu'à la composition. */
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--orange);pointer-events:none;z-index:9000;
  margin:-7px 0 0 -7px;will-change:translate;
  transition:width .25s,height .25s,background .25s,opacity .3s;
  mix-blend-mode:difference;opacity:0;
}
/* `difference` plutôt que `multiply` : sur les sections noires — pied de page,
   galerie, bandeau de rappel — multiply transformait le point orange en tache
   sombre à peine distincte du fond. */
#cursor.grow{width:54px;height:54px;background:var(--bleu)}
@media (hover:none){#cursor{display:none}}

/* ==========================================================================
   NAV / HEADER
   ========================================================================== */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 4vw;
  transition:background .35s, box-shadow .35s, padding .35s;
}
header.site-header.scrolled{
  background:rgba(255,246,222,.88);
  /* Le préfixe reste nécessaire : Safari n'a accepté `backdrop-filter` sans lui
     qu'à partir de la version 18. En dessous, le fond crème à 88 % tient seul —
     le texte reste lisible, mais le flou disparaît, et les visiteurs d'un
     restaurant sont massivement sur iOS. */
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 4px 30px rgba(0,0,0,.08);
  padding:8px 4vw;
}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--noir)}
.logo-wrap img{height:62px;transition:height .35s, transform .35s}
header.site-header.scrolled .logo-wrap img{height:48px}
.logo-wrap:hover img{transform:rotate(-6deg) scale(1.05)}

nav.main-nav>ul{display:flex;gap:4px;list-style:none;align-items:center}
nav.main-nav a{
  position:relative;text-decoration:none;color:var(--noir);
  font-weight:800;text-transform:uppercase;font-size:.82rem;
  letter-spacing:.08em;padding:10px 14px;border-radius:40px;
  transition:color .25s;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  /* Un intitulé ne se coupe jamais : « LA / CARTE ▼ » sur deux lignes, avec
     le chevron isolé, c'est ce que montrait l'en-tête sous 1 060 px. Quand la
     place manque, c'est le menu burger qui prend le relais (voir plus bas,
     « EN-TÊTE : BASCULE VERS LE MENU BURGER »). */
  white-space:nowrap;
}
nav.main-nav a:not(.btn)::after{
  content:'';position:absolute;left:14px;right:14px;bottom:6px;height:3px;
  background:var(--orange);border-radius:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-pop);
}
/* Survol et page courante : le texte reste noir, la barre orange dessous dit l'état. */
nav.main-nav a:not(.btn):hover{color:var(--noir)}
nav.main-nav a:not(.btn):hover::after{transform:scaleX(1)}
nav.main-nav a:not(.btn)[aria-current="page"]{color:var(--noir)}
nav.main-nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}

/* dropdown
   Retour du client du 2026-09-17 : « les menus déroulants version ordi ont du
   mal ». Mesuré à la souris : 6 px de vide entre le lien et son panneau. Le
   curseur qui y passait quittait l'un sans être encore sur l'autre, le survol
   tombait, et `visibility` passait à `hidden` sur-le-champ, puisqu'elle
   n'était pas dans la transition. Le panneau disparaissait sous le curseur :
   on ne l'atteignait qu'en descendant assez vite pour sauter l'interstice.
   Trois corrections :
   - un pont invisible (.drop::before) couvre l'interstice, et aussi les 10 px
     dont le panneau descend à l'ouverture. Le lien passe devant lui
     (z-index), pour que le bas du lien reste cliquable ;
   - à la fermeture, le panneau attend 0,15 s puis s'efface en 0,2 s, et ne
     devient `hidden` qu'ensuite : un écart en diagonale est pardonné, et le
     panneau revient si la souris revient ;
   - il s'ouvre au clavier (:focus-visible) mais plus au clic. Un lien cliqué
     garde le focus, et `:focus-within` laissait le panneau ouvert après un
     cmd+clic ou un retour arrière, la souris partie ailleurs. */
.has-drop{position:relative}
.has-drop>a{z-index:1}
.has-drop>a .caret{font-size:.6rem;transition:transform .25s}
.has-drop:hover>a .caret{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--creme);border:3px solid var(--noir);border-radius:18px;
  box-shadow:8px 8px 0 var(--noir);
  min-width:230px;padding:10px;list-style:none;
  opacity:0;visibility:hidden;
  transition:opacity .2s .15s, transform .25s var(--ease-pop) .15s, visibility 0s .35s;
}
.drop::before{content:'';position:absolute;left:-3px;right:-3px;bottom:100%;height:22px}
/* Trois règles et non une liste de sélecteurs : un navigateur qui ne connaît
   pas :has() rejetterait la liste entière, survol compris. */
.has-drop:hover .drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .25s, transform .25s var(--ease-pop), visibility 0s;
}
.has-drop:has(:focus-visible) .drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .25s, transform .25s var(--ease-pop), visibility 0s;
}
@supports not selector(:has(*)){
  .has-drop:focus-within .drop{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
    transition:opacity .25s, transform .25s var(--ease-pop), visibility 0s;
  }
}
.drop li{display:block}
.drop a{
  display:block;padding:10px 14px;border-radius:12px;font-size:.78rem;
  text-transform:uppercase;font-weight:800;letter-spacing:.05em;
}
.drop a::after{display:none}
.drop a:hover{background:var(--orange);color:var(--noir)!important}
.drop a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--orange)}
.drop .emj{margin-right:8px}

/* boutons */
.btn{
  display:inline-block;background:var(--noir);color:var(--creme);
  border-radius:50px;padding:13px 26px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  text-decoration:none;border:3px solid var(--noir);cursor:pointer;
  transition:transform .25s var(--ease-pop), background .25s, color .25s, box-shadow .25s;
}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.btn-orange{background:var(--orange);border-color:var(--orange);color:var(--noir)}
/* Survol : on inverse, en noir et crème, plutôt qu'un orange plus clair hors charte. */
.btn-orange:hover{background:var(--noir);border-color:var(--noir);color:var(--creme)}
.btn-bleu{background:var(--bleu);border-color:var(--bleu);color:var(--noir)}
.btn-bleu:hover{background:var(--noir);border-color:var(--noir);color:var(--creme)}
.btn-ghost{background:transparent;color:var(--noir)}
.btn-ghost:hover{background:var(--noir);color:var(--creme)}
.btn-creme{background:var(--creme);border-color:var(--creme);color:var(--noir)}
.btn-lg{font-size:.95rem;padding:17px 32px}
.btn-block{display:block;width:100%;text-align:center}
/* Pictogramme dessiné dans un bouton (le téléphone du bandeau de pied de page). */
.btn .btn-picto svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.22em}

.burger{display:none}

/* ---------- NAV MOBILE ----------
   Refaite le 2026-09-18 (retour client : « c'est un bordel, tout s'affiche
   d'un coup ») : vingt liens à plat, rubriques et sous-entrées mêlées. Les
   rubriques seules désormais, en liste sous l'en-tête ; leurs sous-menus
   repliés, qui se déplient au toucher, un seul à la fois ; « À emporter » et
   « Réserver » en boutons, en bas de l'écran. Structure : inc/nav.php ;
   comportement : main.js. */
.mobile-nav{
  position:fixed;inset:0;z-index:990;background:var(--orange);
  display:flex;flex-direction:column;
  clip-path:circle(0 at calc(100% - 46px) 42px);
  transition:clip-path .6s cubic-bezier(.76,0,.24,1);
  overflow-y:auto;overscroll-behavior:contain;
  padding:96px 24px calc(28px + env(safe-area-inset-bottom));
}
.mobile-nav.open{clip-path:circle(160% at calc(100% - 46px) 42px)}
.mn-liste,.mn-actions{width:100%;max-width:520px;margin-inline:auto}
.mn-liste{list-style:none;margin-top:0;margin-bottom:0;padding:0;border-top:2.5px solid var(--noir)}
.mn-item{border-bottom:2.5px solid var(--noir)}
.mn-titre{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:64px;margin:0;padding:10px 2px;
  background:none;border:0;border-radius:0;cursor:pointer;text-align:left;
  font-family:var(--titre);font-size:2rem;line-height:1;text-transform:uppercase;
  color:var(--noir);text-decoration:none;
}
/* Le signe + devient − en effaçant sa barre verticale. */
.mn-signe{position:relative;flex:0 0 22px;height:22px}
.mn-signe::before,.mn-signe::after{content:'';position:absolute;left:50%;top:50%;background:var(--noir);border-radius:3px;transition:transform .3s var(--ease-pop)}
.mn-signe::before{width:22px;height:4px;transform:translate(-50%,-50%)}
.mn-signe::after{width:4px;height:22px;transform:translate(-50%,-50%)}
.mn-groupe.ouvert .mn-signe::after{transform:translate(-50%,-50%) scaleY(0)}
/* Replié : hauteur nulle et invisible, donc hors de la tabulation. La
   visibilité attend la fin de la fermeture pour ne pas couper l'animation. */
.mn-sous{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .32s ease, visibility 0s .32s}
.mn-groupe.ouvert .mn-sous{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .32s ease, visibility 0s}
.mn-sous-liste{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0 0 0 4px}
.mn-sous-liste li:last-child{padding-bottom:16px}
.mn-lien{
  display:flex;align-items:center;min-height:44px;padding:4px 0 4px 18px;
  border-left:3px solid var(--noir);
  font-family:var(--texte);font-weight:800;font-size:1.12rem;line-height:1.25;
  color:var(--noir);text-decoration:none;
}
.mn-titre[aria-current="page"],.mn-lien[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
/* Au survol, à la souris seulement : sur un écran tactile le survol reste
   collé après le toucher, et la rubrique dépliée passait pour la page en cours. */
@media (hover:hover){
  .mn-titre:hover,.mn-lien:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
}
/* Les deux boutons, poussés en bas de l'écran tant que la liste le permet. */
.mn-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px}
.mn-actions .btn{display:block;text-align:center;padding:16px 24px;font-size:.95rem}
/* Écran bas (320 × 568) : 44 px de trop, le menu replié défilait. */
@media (max-height:600px){
  .mobile-nav{padding-top:84px}
  .mn-titre{min-height:54px;font-size:1.75rem}
  .mn-actions{padding-top:18px;gap:10px}
  .mn-actions .btn{padding:13px 20px}
}
/* À l'ouverture, les rubriques arrivent une à une. */
.mn-item,.mn-actions{opacity:0;transform:translateY(18px);transition:opacity .3s ease, transform .45s var(--ease-pop)}
.mobile-nav.open .mn-item,.mobile-nav.open .mn-actions{opacity:1;transform:none}
.mobile-nav.open .mn-item:nth-child(1){transition-delay:.12s}
.mobile-nav.open .mn-item:nth-child(2){transition-delay:.17s}
.mobile-nav.open .mn-item:nth-child(3){transition-delay:.22s}
.mobile-nav.open .mn-item:nth-child(4){transition-delay:.27s}
.mobile-nav.open .mn-item:nth-child(5){transition-delay:.32s}
.mobile-nav.open .mn-item:nth-child(6){transition-delay:.37s}
.mobile-nav.open .mn-item:nth-child(n+7){transition-delay:.42s}
.mobile-nav.open .mn-actions{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav *,.mobile-nav *::before,.mobile-nav *::after{transition:none!important}
}
html.anim-off .mobile-nav,html.anim-off .mobile-nav *,html.anim-off .mobile-nav *::before,html.anim-off .mobile-nav *::after{transition:none!important}
/* Menu ouvert, l'en-tête reste par-dessus sans son bandeau crème de défilement. */
body:has(.mobile-nav.open) header.site-header{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.burger{z-index:995}
.burger span{transition:transform .35s, opacity .25s}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);background:var(--noir)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);background:var(--noir)}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  position:relative;z-index:6;
  background:var(--noir);color:var(--creme);
  padding:16px 0;overflow:hidden;white-space:nowrap;
  transform:rotate(-1.3deg) scale(1.02);
  border-top:4px solid var(--noir);border-bottom:4px solid var(--noir);
}
.marquee-inner{display:inline-block;animation:scrollX 22s linear infinite}
.marquee span{
  font-family:var(--titre);font-size:1.7rem;text-transform:uppercase;
  margin:0 28px;letter-spacing:.04em;
}
.marquee .sep{color:var(--orange)}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee.blue{background:var(--bleu);color:var(--noir);transform:rotate(1.2deg) scale(1.02)}
.marquee.blue .sep{color:var(--creme)}

/* ==========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================== */
section{position:relative}
.section-pad{padding:110px 4vw}
.section-pad-sm{padding:72px 4vw}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap-narrow{max-width:860px;margin:0 auto}
.text-center{text-align:center}
h1.sec-title,h2.sec-title{
  font-family:var(--titre);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.95;margin-bottom:16px;
}
.sec-sub{font-size:1.12rem;font-weight:600;max-width:560px;line-height:1.6}
.sec-sub.center{margin-left:auto;margin-right:auto}
.lead{font-size:1.18rem;font-weight:600;line-height:1.6}
/* Le contour : `paint-order` le peint SOUS la lettre, qui garde son
   épaisseur ; 0,04em suit la taille du titre. Sur un fond noir il ne se voit
   pas, et n'y sert pas. */
.o,.b{-webkit-text-stroke:.04em var(--noir);paint-order:stroke fill}
.o{color:var(--orange)}
.b{color:var(--bleu)}
/* sur fond sombre, les couleurs de la charte sont lisibles sans contour (orange 7,74:1, bleu 5,10:1 sur le noir) */
.bg-noir .o,.infos .o,.cta-band .o,.gallery .o,.page-hero.on-noir .o,footer.site-footer .o{color:var(--orange)}
.bg-noir .b,.infos .b,.cta-band .b,.gallery .b,.page-hero.on-noir .b,footer.site-footer .b{color:var(--bleu)}
/* sur fond orange (agenda, hero orange), le noir passe à 7,74:1 */
.bg-orange .o,.page-hero.on-orange .o{color:var(--noir)}
/* Fonds bleu, rose et vert : ils n'avaient AUCUNE règle, et .o y restait à
   --orange-txt, une teinte calculée pour les fonds clairs. « Pas une de plus »
   s'affichait à 1,20:1 sur le bleu de /privatisation/, en 73 px de haut.
   Le piège était surtout latent : un <span class="o"> ajouté dans un hero
   bleu ou rose disparaissait sans qu'aucun garde-fou ne le signale.
   Crème sur le bleu : 3,82:1 avec le bleu de la charte (2026-09-17), cerné
   de noir comme ailleurs. .o et .b ne colorent que des mots de titre. Le
   texte courant, lui, est noir sur le bleu (5,10:1). */
.bg-bleu .o,.page-hero.on-bleu .o,.marquee.blue .o{color:var(--creme)}
.bg-bleu .b,.page-hero.on-bleu .b,.marquee.blue .b{color:var(--creme)}
/* rose 11,55:1 et vert 13,62:1 avec le noir. Le .b garde le bleu de la
   charte, cerné de noir, pour rester distinct du .o. */
.page-hero.on-rose .o,.page-hero.on-vert .o{color:var(--noir)}
.page-hero.on-rose .b,.page-hero.on-vert .b{color:var(--bleu)}
.outline-txt{color:transparent;-webkit-text-stroke:3px var(--noir)}

/* reveal on scroll */
/* Le déplacement du reveal passe par la propriété `translate` et NON par
   `transform` : `transform:none` à l'arrivée écrasait la rotation des cadres
   photo (.split-media) et des cartes d'infos, qui perdaient leur inclinaison
   dès qu'elles apparaissaient. `translate` se compose avec `transform`.

   Et l'état masqué n'est appliqué QUE si le JavaScript tourne (classe .js
   posée par un script en ligne dans le <head>) : sans lui, les 40 éléments
   .reveal de l'accueil restaient invisibles pour toujours. */
.reveal{opacity:1;translate:none}
html.js .reveal{opacity:0;translate:0 46px}
html.js .reveal.visible{
  opacity:1;translate:0 0;
  transition:opacity .7s ease, translate .7s var(--ease-soft);
}
html.js .reveal.d1.visible{transition-delay:.08s}
html.js .reveal.d2.visible{transition-delay:.16s}
html.js .reveal.d3.visible{transition-delay:.24s}
html.js .reveal.d4.visible{transition-delay:.32s}
html.js .reveal.d5.visible{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;translate:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
}
/* Le même traitement, déclenché par le bouton du pied de page.
   On coupe la DURÉE plutôt que de poser animation-play-state:paused : mis en
   pause, le H1 de l'accueil et la scène de privatisation — qui s'affichent par
   une animation `both` — resteraient figés à leur état de départ, c'est-à-dire
   invisibles. Ramener la durée à rien fait au contraire sauter chaque
   animation à son état final. */
html.anim-off .reveal{opacity:1;translate:none}
html.anim-off *{animation-duration:.001s!important;animation-iteration-count:1!important}
html.anim-off{scroll-behavior:auto}

/* ==========================================================================
   PAGE HERO (pages intérieures) + FIL D'ARIANE
   ========================================================================== */
.page-hero{
  position:relative;overflow:hidden;
  padding:150px 4vw 80px;
  background:var(--creme);
}
.page-hero.on-orange{background:var(--orange);color:var(--noir)}
.page-hero.on-bleu{background:var(--bleu);color:var(--noir)}
.page-hero.on-noir{background:var(--noir);color:var(--creme)}
/* rosa_variante_hero() renvoie « rose » pour la quatrième catégorie de la carte,
   et la feuille traitait déjà .on-rose pour le fil d'Ariane — mais la déclaration
   de fond manquait. La page Cocktails affichait donc un hero crème, exactement
   la couleur du corps : la classe ne faisait rien, et elle seule des quatre
   pages de carte n'avait pas d'aplat. */
.page-hero.on-rose{background:var(--rose);color:var(--noir)}
.page-hero.on-vert{background:var(--vert);color:var(--noir)}
.page-hero .ph-blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;opacity:.9;pointer-events:none}
.page-hero .b-jaune{width:34vw;height:34vw;background:var(--jaune);top:-14vw;right:-8vw;animation:float 9s ease-in-out infinite}
/* Le disque bleu est en bas à DROITE. En bas à gauche, il passait sous le
   début du titre ou de l'introduction : dès 1024 px de large sur les mentions
   légales, la confidentialité et la 404, de 600 à 1780 px sur « Le
   restaurant ». Le texte ne va jamais dans ce coin-là. Il descend de 9vw et
   non de 7 : plus haut, il touchait le disque jaune du même côté.
   Sous 980 px, le texte prend toute la largeur et il n'y a plus de coin libre.
   Le disque passait sous l'introduction, ou sous la première ligne de la
   section suivante : ces heroes ne coupent pas en hauteur, et la dérive au
   défilement le descend de 60 à 90 px dès l'arrivée sur la page. Il est donc
   retiré sur ces largeurs. */
.page-hero .b-bleu{width:16vw;height:16vw;background:var(--bleu);bottom:-9vw;right:-5vw;animation:float 11s ease-in-out infinite reverse}
@media(max-width:980px){
  .page-hero .b-bleu{display:none}
}
.page-hero .ph-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
/* Le disque bleu descend 159 px sous le bas du hero. Quand le hero est crème et
   la section suivante crème aussi, overflow:hidden le tranche sur une frontière
   que rien ne matérialise : 69 % du disque disparaît et il ne se lit plus comme
   un cercle, mais comme un moignon posé sur une étagère invisible. Le disque
   jaune, lui, n'est coupé que par les bords réels de la page — d'où l'asymétrie
   que l'œil attrape.
   On le laisse donc déborder pour de vrai : il passe derrière la section
   suivante, peinte après lui. On ne clipe plus qu'en largeur, pour retenir le
   jaune qui sort à droite et créerait un défilement horizontal ; overflow-x:clip
   avec overflow-y:visible est le seul mélange que la spécification laisse
   cohabiter sans re-clipper l'autre axe.
   Sur les heroes colorés la coupe tombe sur un bord bien visible : on n'y touche
   pas. Les quatre teintes sont un ensemble fermé, voir rosa_variante_hero(). */
.page-hero:not(.on-orange):not(.on-bleu):not(.on-noir):not(.on-rose){overflow-x:clip;overflow-y:visible}
/* Le disque est positionné (z-index:0) : il peint à l'étape 7, alors qu'une
   section suivante non positionnée peint son fond et son texte aux étapes 4 et
   6 — donc avant lui. Sur la page Carte le recouvrement passait inaperçu parce
   que .menu-card est position:relative et repasse devant ; ailleurs, le disque
   serait passé PAR-DESSUS le texte. On donne donc explicitement la main à ce
   qui suit le hero. */
.page-hero:not(.on-orange):not(.on-bleu):not(.on-noir):not(.on-rose) + *{position:relative;z-index:1}

.page-hero h1{
  font-family:var(--titre);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.8rem,7vw,6rem);line-height:.92;margin:14px 0 18px;
}
.page-hero .ph-lead{font-size:1.18rem;font-weight:600;max-width:640px;line-height:1.55}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.04)}}

.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.breadcrumb a{text-decoration:none;opacity:.7;transition:opacity .2s}
.breadcrumb a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.breadcrumb .sep{opacity:.6}
.breadcrumb [aria-current]{color:var(--noir);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
/* Écart entre le fil d'Ariane et le titre. Il tenait à l'étiquette de section
   posée entre les deux ; depuis son retrait (2026-09-16), seuls restaient les
   14 px de marge du titre, et l'écart visible tombait de 1 à 19 px selon la
   page et la largeur. Deux causes : les capitales du titre nu débordent de sa
   ligne (interligne .92), d'autant plus que le corps est grand, et le
   cartouche incliné remonte vers la droite. On vise une vingtaine de pixels
   partout : marge proportionnelle au corps pour le titre nu, fixe pour le
   cartouche. */
.page-hero .breadcrumb + h1{margin-top:calc(14px + .2em)}
.hero-vedette .breadcrumb + h1{margin-top:20px}

/* ==========================================================================
   STATS / COMPTEURS
   ========================================================================== */
.stats{background:var(--creme);padding:70px 4vw 40px}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:22px}
.stat{
  text-align:center;padding:30px 16px;border-radius:24px;border:3px dashed var(--noir);
  transition:background .3s, transform .3s var(--ease-pop), border-style .3s;
}
.stat:hover{background:var(--blanc);transform:rotate(-1.5deg) scale(1.04);border-style:solid}
/* Les trois compteurs : l'orange, le bleu et le rose de la charte, cernés comme les mots de titre. */
.stat .num{font-family:var(--titre);font-weight:900;font-size:clamp(2.8rem,5vw,4.2rem);line-height:1;color:var(--orange);-webkit-text-stroke:.04em var(--noir);paint-order:stroke fill}
.stat:nth-child(2) .num{color:var(--bleu)}
.stat:nth-child(3) .num{color:var(--rose)}
.stat .lbl{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-top:8px}

/* ==========================================================================
   CARTES ÉVÉNEMENTS
   ========================================================================== */
/* minmax(250px) donnait quatre colonnes de 315px sur un écran de 1440 : les
   cinq descriptions se coupaient toutes en plein milieu d'une phrase. À 340px
   de plancher, la grille tient trois colonnes de ~427px et le texte respire. */
/* auto-fill et non auto-fit : auto-fit effondre les colonnes vides, si bien
   qu'un agenda filtré ne contenant qu'une soirée étirait sa carte sur les
   1325px de la rangée. auto-fill garde les trois pistes, la carte garde sa
   largeur. */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px;margin-top:18px;
  /* Sans perspective, les rotateX/rotateY du survol produisent une projection
     plate : l'effet de relief ne se voyait pas. */
  perspective:900px}
.event-card{
  background:var(--creme);color:var(--noir);border-radius:22px;
  padding:28px 26px;position:relative;border:3px solid var(--noir);
  box-shadow:8px 8px 0 var(--noir);text-decoration:none;display:block;
  transition:transform .3s var(--ease-pop), box-shadow .3s;
}
.event-card:hover{transform:translate(-4px,-6px) rotate(-1deg);box-shadow:14px 16px 0 var(--noir)}
.event-card .date{display:inline-block;background:var(--bleu);color:var(--noir);font-weight:900;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;padding:6px 14px;border-radius:30px;margin-bottom:14px}
.event-card.hot .date{background:var(--orange);color:var(--noir)}
.event-card h3,.event-card .event-titre{font-family:var(--titre);font-size:1.7rem;text-transform:uppercase;line-height:1;margin-bottom:8px}
.event-card p{font-weight:600;font-size:.95rem;line-height:1.5}
.event-card .evt-pastille{
  position:absolute;top:-22px;right:20px;
  background:var(--jaune);border:3px solid var(--noir);border-radius:50%;
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  transform:rotate(8deg);transition:transform .3s var(--ease-pop);
}
/* Le dessin de la soirée (inc/soirees.php), et non plus un émoji. */
.event-card .evt-pastille svg{width:46px;height:46px;display:block;overflow:visible}
.event-card:hover .evt-pastille{transform:rotate(-12deg) scale(1.15)}
.event-card .more{display:inline-block;margin-top:14px;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--noir);box-shadow:inset 0 -3px 0 var(--orange)}

/* ==========================================================================
   CARTE / MENU
   ========================================================================== */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:48px 0 40px}
.menu-card{
  position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/3.6;border:3px solid var(--noir);
  display:flex;align-items:flex-end;background:var(--noir);text-decoration:none;color:var(--noir);
  transition:transform .35s var(--ease-pop);
}
.menu-card:hover{transform:translateY(-8px) rotate(-1deg)}
.menu-card .bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6.2rem;transition:transform .5s var(--ease-pop)}
.menu-card:hover .bg{transform:scale(1.18) rotate(-6deg)}
.menu-card.c-jaune .bg{background:var(--jaune)}
.menu-card.c-orange .bg{background:var(--orange)}
.menu-card.c-bleu .bg{background:var(--bleu)}
.menu-card.c-rose .bg{background:var(--rose)}
.menu-card .label{position:relative;z-index:2;width:100%;background:var(--creme);border-top:3px solid var(--noir);padding:16px 18px}
.menu-card .label h3{font-family:var(--titre);font-size:1.45rem;text-transform:uppercase;line-height:1}
.menu-card .label p{font-weight:700;font-size:.85rem;opacity:.75}

/* liste de plats (sous-pages carte) */
.dish-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
/* align-items:baseline et non flex-start : les pointillés, une boîte vide,
   se posent sur la ligne de base du nom et du prix. En flex-start ils
   flottaient au-dessus du nom (recette mobile du 2026-09-17). */
.dish{
  display:flex;align-items:baseline;gap:16px;
  padding:20px 4px;border-bottom:2.5px dotted rgba(0,0,0,.25);
}
.dish:last-child{border-bottom:none}
.dish .dish-main{flex:1}
.dish .dish-name{font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;line-height:1;display:flex;align-items:center;gap:10px}
.dish .dish-tag{font-family:var(--texte);font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:var(--jaune);border:2px solid var(--noir);border-radius:20px;padding:3px 9px}
.dish .dish-tag.veggie{background:var(--vert)}
.dish .dish-tag.spicy{background:var(--orange);color:var(--noir)}
.dish .dish-desc{font-weight:600;font-size:.95rem;opacity:.8;margin-top:6px;line-height:1.45}
/* Prix en noir : en orange, même cerné, un prix de 20 px devenait pâteux (essai du 2026-09-17). */
.dish .dish-price{font-family:var(--titre);font-size:1.5rem;color:var(--noir);white-space:nowrap}
.dish-dots{flex:1;border-bottom:2.5px dotted rgba(0,0,0,.3);transform:translateY(-6px)}

/* Déclinaison « Ce que ça coûte » de la page pilier : le nom, les pointillés
   et la fourchette tiennent la première ligne, la liste des sections prend la
   seconde en pleine largeur. Sur une ligne de plat ordinaire la description
   loge à gauche du prix, mais une fourchette (« 15,90 – 21,90 € ») est deux
   fois plus large qu'un prix, et ce qu'il reste ne suffit plus. */
.prix-univers .dish{flex-wrap:wrap}
.prix-univers .dish .dish-name{flex:0 0 auto}
/* margin-top:0 et non 10 : sur une ligne qui passe à la ligne, le gap:16px
   de .dish s'applique aussi entre les deux rangées — les deux se cumulaient. */
.prix-univers .dish p.dish-desc{flex:0 0 100%;margin-top:0;opacity:.72}

/* Sur téléphone, une ligne de plat ordinaire fait comme la déclinaison
   ci-dessus : le nom, les pointillés et le prix sur la première ligne, la
   description dessous en pleine largeur. À côté du prix, il ne lui restait
   que 77 à 113 px entre 320 et 390 px d'écran, deux ou trois mots par ligne.
   display:contents sur .dish-main laisse le nom et la description se placer
   dans la grille sans toucher au gabarit (template-parts/plat.php). gap:0 12px
   et non column-gap seul : le gap:16px de .dish tombait aussi entre les deux
   rangées, en plus de la marge de la description. */
@media(max-width:700px){
  .dish-list:not(.prix-univers) .dish{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;gap:0 12px}
  .dish-list:not(.prix-univers) .dish .dish-main{display:contents}
  .dish-list:not(.prix-univers) .dish p.dish-name{grid-area:1/1}
  .dish-list:not(.prix-univers) .dish-dots{grid-area:1/2}
  .dish-list:not(.prix-univers) .dish p.dish-price{grid-area:1/3}
  .dish-list:not(.prix-univers) .dish p.dish-desc{grid-area:2/1/auto/-1}
}

/* bandeau catégories (sous-pages) */
.cat-switch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:32px 0 8px}
.cat-switch a{
  text-decoration:none;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;
  padding:11px 20px;border-radius:40px;border:2.5px solid var(--noir);background:var(--blanc);color:var(--noir);
  transition:transform .25s var(--ease-pop), background .25s, color .25s;
}
.cat-switch a:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--jaune)}
.cat-switch a[aria-current="page"]{background:var(--orange);color:var(--noir);border-color:var(--orange)}

/* ==========================================================================
   PANNEAUX 2 COLONNES (réutilisable : à emporter, privatisation, à propos…)
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center}
/* align-items:center convient quand les deux colonnes font la même hauteur —
   c'est le cas du bloc « Un cadre qui a du caractère », 508 contre 506 px.
   Mais l'image avait une hauteur FIXE de 480px : dès que le texte était long,
   elle flottait au milieu d'une colonne bien plus haute. Sur « Le Restaurant »,
   511 contre 839 px, elle tombait 164 px plus bas que le texte, avec un grand
   vide au-dessus et un autre en dessous.

   Première tentative : aligner en haut et rendre l'image collante. Elle ne
   pouvait pas marcher — avec align-items:start la case de grille ne fait que
   la hauteur de son contenu, et un élément collant sans course ne colle nulle
   part.

   Le vrai correctif est de laisser l'image remplir sa colonne : elle s'étire
   jusqu'à la hauteur du texte, comme dans une mise en page de magazine. Plus
   de décalage, plus de trou. object-fit:cover recadre sans déformer, et la
   photo d'origine est déjà en portrait. */
@media(min-width:981px){
  .split{align-items:stretch}
}
/* Sans média (image mise en avant retirée par le client), la grille garderait
   une colonne vide : le bloc reprend alors toute la largeur. */
.split:not(:has(.split-media)){grid-template-columns:1fr;max-width:820px}
.split.rev .split-media{order:2}
.split-media{position:relative;border-radius:28px;overflow:hidden;border:4px solid var(--noir);transform:rotate(-2deg);box-shadow:18px 18px 0 rgba(0,0,0,.22)}
/* Surdimensionnée pour que la parallaxe, qui glisse l'image de ±3 %, ne
   découvre jamais le fond du cadre.
   Mais UNIQUEMENT EN HAUTEUR : la parallaxe ne translate que verticalement
   (voir motion.js), et un scale uniforme rognait aussi 4 % de chaque côté
   pour rien. C'est ce qui coupait le « L » de « LE BURGER » sur la photo du
   Restaurant — le cadre et la source ont pourtant exactement le même rapport,
   0,80 : sans ce rognage parasite, object-fit:cover ne perd rien en largeur. */
.split-media img{display:block;width:100%;height:480px;object-fit:cover;transition:transform .6s;scale:1 1.08}
.split-media:hover img{transform:scale(1.06)}
.split-media.on-creme{border-color:var(--creme)}
/* Point focal en haut de la photo. Posé pour la photo d'illustration de la
   privatisation (224, deux chopes qui trinquent), il sert depuis le 2026-09-21
   au cocktail à l'orange séchée (262) : centré, le cadre paysage coupait la
   rondelle d'orange posée sur le verre. Une autre photo demandera peut-être un
   autre réglage. */
.split-media img.cadrage-haut{object-position:50% 12%}

ul.checks{list-style:none;margin:24px 0 34px;display:flex;flex-direction:column;gap:14px}
ul.checks li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.05rem}
ul.checks .check{flex:0 0 34px;height:34px;border-radius:50%;background:var(--jaune);color:var(--noir);display:flex;align-items:center;justify-content:center;font-weight:900;border:2.5px solid var(--noir)}

/* fond colorés réutilisables avec biseau */
.bg-orange{background:var(--orange);color:var(--noir);overflow:hidden}
.bg-bleu{background:var(--bleu);color:var(--noir);overflow:hidden}
.bg-jaune{background:var(--jaune);overflow:hidden}
.bg-noir{background:var(--noir);color:var(--creme);overflow:hidden}
.slash-top::before{content:'';position:absolute;top:-2px;left:0;right:0;height:60px;background:var(--creme);clip-path:polygon(0 0,100% 0,100% 35%,0 100%)}
.slash-top.from-jaune::before{background:var(--jaune)}

/* ==========================================================================
   FORMULES / PRICING
   ========================================================================== */
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:40px}
.formule{
  background:var(--creme);color:var(--noir);border:3px solid var(--noir);border-radius:24px;
  padding:32px 28px;position:relative;box-shadow:8px 8px 0 var(--noir);
  transition:transform .3s var(--ease-pop), box-shadow .3s;
}
.formule:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:12px 16px 0 var(--noir)}
.formule.feat{background:var(--noir);color:var(--creme);box-shadow:8px 8px 0 var(--orange)}
.formule .ribbon{position:absolute;top:-16px;left:24px;background:var(--orange);color:var(--noir);font-weight:900;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;padding:6px 14px;border-radius:30px;border:2.5px solid var(--noir)}
.formule h3{font-family:var(--titre);font-size:1.9rem;text-transform:uppercase;line-height:1;margin-bottom:6px}
.formule .price{font-family:var(--titre);font-size:2.6rem;color:var(--noir);line-height:1;margin:10px 0 18px}
.formule.feat .price{color:var(--jaune)}
.formule .price small{font-family:var(--texte);font-size:.9rem;font-weight:700;opacity:.7}
.formule ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.formule li{font-weight:600;font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.formule li::before{content:'✓';font-weight:900;color:var(--noir)}
.formule.feat li::before{color:var(--jaune)}

/* ==========================================================================
   ÉTAPES (process : à emporter, privatisation)
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:40px;counter-reset:step}
.step{position:relative;background:var(--blanc);color:var(--noir);border:3px solid var(--noir);border-radius:22px;padding:40px 24px 26px;box-shadow:6px 6px 0 var(--noir)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-22px;left:22px;width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--noir);font-family:var(--titre);font-size:1.6rem;display:flex;align-items:center;justify-content:center;border:3px solid var(--noir)}
.step h3{font-family:var(--titre);font-size:1.35rem;text-transform:uppercase;margin-bottom:8px}
.step p{font-weight:600;font-size:.92rem;line-height:1.5;opacity:.85}

/* ==========================================================================
   FAQ / ACCORDÉON
   ========================================================================== */
.faq{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--blanc);color:var(--noir);border:3px solid var(--noir);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--noir)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--titre);font-size:1.25rem;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex:0 0 32px;height:32px;border-radius:50%;background:var(--jaune);border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:transform .3s var(--ease-pop)}
.faq-item[open] summary .plus{transform:rotate(45deg);background:var(--orange);color:var(--noir)}
.faq-item .faq-body{padding:0 24px 22px;font-weight:600;line-height:1.6;opacity:.88}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.form{display:grid;gap:18px;max-width:680px}
.form.cols2{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:900;text-transform:uppercase;font-size:.84rem;letter-spacing:.08em}
.field input,.field select,.field textarea{
  font-family:var(--texte);font-weight:600;font-size:1rem;
  padding:14px 16px;border:3px solid var(--noir);border-radius:14px;background:var(--blanc);color:var(--noir);
  transition:box-shadow .2s, transform .2s;
}
.field textarea{resize:vertical;min-height:130px}
/* Le décalage orange marque le SURVOL, pas le focus : posé au focus avec
   outline:none, il annulait le double anneau :focus-visible construit en tête
   de feuille — pourtant bon, il ressort sur les huit fonds de la palette — et
   le remplaçait par une ombre en bas à droite à 2,03:1 sur le jaune de
   /contact/ et /privatisation/, 2,74:1 sur le crème de /reserver/. En tabulant
   dans un formulaire, on ne savait plus où l'on était. */
.field input:hover,.field select:hover,.field textarea:hover{box-shadow:4px 4px 0 var(--orange)}
.form .form-note{font-size:.82rem;font-weight:600;opacity:.7}
/* Le jour fermé se signale en rouge, comme une erreur de champ — parce que
   c'en est une, et qu'elle se corrige avant l'envoi. */
.field-aide.field-ferme{color:var(--rouge-err,#A32E22);font-weight:700;opacity:1}

/* ==========================================================================
   ÉQUIPE / TIMELINE (Le Restaurant)
   ========================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:44px}
.team-card{text-align:center;background:var(--blanc);color:var(--noir);border:3px solid var(--noir);border-radius:24px;padding:26px 20px;box-shadow:6px 6px 0 var(--noir);transition:transform .3s var(--ease-pop)}
.team-card:nth-child(even){transform:rotate(1.5deg)}
.team-card:nth-child(odd){transform:rotate(-1.5deg)}
.team-card:hover{transform:rotate(0) translateY(-6px)}
.team-card .ava{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;border:3px solid var(--noir);display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--jaune)}
.team-card:nth-child(3n) .ava{background:var(--bleu)}
.team-card:nth-child(3n+1) .ava{background:var(--orange)}
.team-card h3{font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;line-height:1}
.team-card .role{font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em;color:var(--noir);opacity:1;margin:4px 0 10px}
.team-card p{font-weight:600;font-size:.9rem;line-height:1.5;opacity:.85}

.timeline{max-width:760px;margin:48px auto 0;position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:4px;background:var(--noir);border-radius:4px}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-34px;top:2px;width:22px;height:22px;border-radius:50%;background:var(--orange);border:3px solid var(--noir)}
.tl-item .tl-year{font-family:var(--titre);font-size:1.6rem;color:var(--noir);line-height:1}
.tl-item h3{font-family:var(--titre);font-size:1.4rem;text-transform:uppercase;margin:2px 0 6px}
.tl-item p{font-weight:600;line-height:1.5;opacity:.85}

/* ==========================================================================
   AVIS
   ========================================================================== */
.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:48px}
.avis-card{position:relative;background:var(--blanc);color:var(--noir);border:3px solid var(--noir);border-radius:24px;padding:32px 28px 26px;text-align:left;box-shadow:8px 8px 0 var(--jaune);transition:transform .3s var(--ease-pop), box-shadow .3s}
.avis-card:nth-child(2){box-shadow:8px 8px 0 var(--orange);transform:rotate(1.2deg)}
.avis-card:nth-child(3){box-shadow:8px 8px 0 var(--bleu)}
.avis-card:nth-child(odd){transform:rotate(-1.2deg)}
.avis-card:hover{transform:rotate(0) translateY(-6px);box-shadow:12px 14px 0 var(--noir)}
.avis-card .stars{color:var(--orange);-webkit-text-stroke:.05em var(--noir);paint-order:stroke fill;font-size:1.25rem;letter-spacing:.18em;margin-bottom:12px}
.avis-card p.quote,.avis-card blockquote.quote{font-weight:600;font-size:1rem;line-height:1.6;margin-bottom:18px}
.avis-card .who{display:flex;align-items:center;gap:12px}
.avis-card .avatar{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-size:1.3rem;background:var(--jaune)}
.avis-card:nth-child(2) .avatar{background:var(--orange);color:var(--noir)}
.avis-card:nth-child(3) .avatar{background:var(--bleu);color:var(--noir)}
.avis-card .who b{display:block;font-size:.95rem}
.avis-card .who small{font-weight:700;opacity:.6;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
/* La mention sous les avis (« 4,8/5 sur Google… », réglée dans la
   personnalisation) est une ligne de texte : l'information reste, la pastille
   cernée et inclinée qui la portait est partie avec les autres. */
.avis-badge{margin-top:40px;font-weight:900;font-size:1.05rem}

/* ==========================================================================
   GALERIE
   ========================================================================== */
.gallery{background:var(--noir);padding:70px 0;overflow:hidden;position:relative}
.gallery .gal-title{text-align:center;color:var(--creme);font-family:var(--titre);font-size:clamp(1.8rem,3.6vw,2.8rem);text-transform:uppercase;margin-bottom:40px}
.gallery .gal-title em{font-style:normal;color:var(--orange)}
.gal-track{display:flex;gap:26px;width:max-content;animation:scrollX 28s linear infinite}
.gallery:hover .gal-track{animation-play-state:paused}
.gal-item{flex:0 0 auto;width:330px;height:240px;border-radius:18px;overflow:hidden;border:3px solid var(--creme);position:relative;transition:transform .35s var(--ease-pop)}
.gal-item:nth-child(odd){transform:rotate(-2deg)}
.gal-item:nth-child(even){transform:rotate(2deg) translateY(14px)}
.gal-item:hover{transform:rotate(0) scale(1.06);z-index:3}
.gal-item img{width:100%;height:100%;object-fit:cover}
.gal-item .gal-cap{position:absolute;bottom:10px;left:10px;background:var(--creme);color:var(--noir);border:2px solid var(--noir);border-radius:30px;font-weight:900;font-size:.82rem;padding:5px 12px;text-transform:uppercase;letter-spacing:.06em}

/* grille galerie (page galerie) */
.gal-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.gal-filter button{color:var(--noir);font-family:var(--texte);font-weight:900;text-transform:uppercase;font-size:.84rem;letter-spacing:.06em;padding:10px 20px;border-radius:40px;border:2.5px solid var(--noir);background:var(--blanc);cursor:pointer;transition:transform .25s var(--ease-pop), background .25s, color .25s}
.gal-filter button:hover{transform:translateY(-3px)}
.gal-filter button.active{background:var(--orange);color:var(--noir);border-color:var(--orange)}
.gal-masonry{columns:3;column-gap:18px}
.gal-masonry .ph{break-inside:avoid;margin-bottom:18px;border-radius:18px;overflow:hidden;border:3px solid var(--noir);position:relative;transition:transform .35s var(--ease-pop)}
.gal-masonry .ph:hover{transform:scale(1.03) rotate(-1deg);z-index:2}
.gal-masonry .ph img{display:block;width:100%}
.gal-masonry .ph .ph-cap{position:absolute;bottom:10px;left:10px;background:var(--creme);color:var(--noir);border:2px solid var(--noir);border-radius:30px;font-weight:900;font-size:.7rem;padding:5px 11px;text-transform:uppercase}

/* ==========================================================================
   RÉSEAUX (insta cards)
   ========================================================================== */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:48px}
.insta-card{position:relative;aspect-ratio:1;border-radius:24px;overflow:hidden;border:3px solid var(--noir);text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:4.4rem;transition:transform .35s var(--ease-pop)}
.insta-card:nth-child(1){background:linear-gradient(135deg,var(--orange),var(--jaune))}
.insta-card:nth-child(2){background:linear-gradient(135deg,var(--bleu),var(--rose))}
.insta-card:nth-child(3){background:linear-gradient(135deg,var(--rose),var(--orange))}
.insta-card:nth-child(4){background:linear-gradient(135deg,var(--jaune),var(--vert))}
.insta-card:hover{transform:scale(1.05) rotate(2deg)}
.social-handle{display:inline-block;margin-top:40px;font-family:var(--titre);font-size:1.8rem;color:var(--noir);text-decoration:none;border-bottom:5px solid var(--orange);transition:transform .25s, color .25s}
.social-handle:hover{transform:rotate(-2deg) scale(1.05)}

/* ==========================================================================
   BLOG
   ========================================================================== */
/* --- Blog : liste d'articles ----------------------------------------------
   Le premier article passe en pleine largeur, les suivants en grille. Un blog
   qui démarre avec deux articles remplissait deux colonnes sur trois et
   laissait la troisième béante ; une mise à la une tient à un seul article. */
/* Pas de marge haute par défaut : sans introduction ni rubriques, elle
   s'ajoutait aux 90 px du section-pad et ouvrait un trou de 134 px entre
   le hero et le premier article. Elle n'apparaît que s'il y a quelque
   chose au-dessus. */
.blog-liste{display:grid;gap:28px}
.blog-intro + .blog-liste,.blog-rubriques + .blog-liste{margin-top:36px}
.blog-intro{max-width:680px;margin-bottom:10px}
.blog-rubriques{justify-content:flex-start;margin:26px 0 0}
.blog-agenda-lien{margin-top:32px}

/* Pied d'article : l'article voisin et le retour à la liste. Deux cartes de
   même facture que les cartes d'article, en plus discret — elles ferment la
   lecture, elles ne la concurrencent pas. */
/* 780 px et non les 860 du .wrap-narrow : c'est la largeur de .article,
   donc de la colonne de texte au-dessus. Sans cela, le pied d'article
   débordait de 40 px de chaque côté du texte qu'il conclut. */
.article-nav{max-width:780px;margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.article-nav .an-lien{
  display:block;text-decoration:none;color:inherit;
  background:var(--blanc);border:3px solid var(--noir);border-radius:20px;padding:16px 20px;
  transition:translate .25s var(--ease-pop), background .25s;
}
.article-nav .an-lien:hover{translate:0 -3px;background:var(--jaune)}
.article-nav .an-lien small{
  display:block;font-weight:900;text-transform:uppercase;letter-spacing:.09em;
  font-size:.76rem;opacity:.7;margin-bottom:5px;
}
.article-nav .an-lien b{display:block;font-family:var(--titre);font-size:1.2rem;text-transform:uppercase;line-height:1.1}
.article-nav .an-suiv{text-align:right;grid-column:2}
.article-nav .an-tous{grid-column:1 / -1;margin-top:8px}

@media(max-width:640px){
  .article-nav{grid-template-columns:1fr}
  .article-nav .an-suiv{text-align:left;grid-column:1}
}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.post-card{background:var(--blanc);border:3px solid var(--noir);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--noir);box-shadow:8px 8px 0 var(--noir);transition:transform .3s var(--ease-pop), box-shadow .3s;display:flex;flex-direction:column}
.post-card:hover{transform:translate(-4px,-6px);box-shadow:14px 16px 0 var(--noir)}
/* La vignette n'existe plus que lorsqu'il y a une image. Elle portait des
   fonds jaune, bleu ou orange choisis sur nth-child : sur un article sans
   image à la une — c'est-à-dire tous, pour l'instant — cela donnait un aplat
   de couleur de 200 px de haut en guise d'illustration. Un article sans image
   est désormais une carte de texte, ce qu'il est. */
.post-card .thumb{position:relative;overflow:hidden;border-bottom:3px solid var(--noir);aspect-ratio:16/10}
.post-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .cat{align-self:flex-start;background:var(--noir);color:var(--creme);font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;padding:5px 12px;border-radius:30px}
.post-card h3,.post-card h2{font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;line-height:1.05}
.post-card .excerpt{font-weight:600;font-size:.92rem;line-height:1.5;opacity:.82}
.post-card .meta{margin-top:auto;font-weight:800;font-size:.84rem;text-transform:uppercase;letter-spacing:.06em;opacity:.68;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.post-card .meta .dot{opacity:.6}

/* L'article à la une : la vignette prend la moitié gauche, le texte l'autre.
   Sans image à la une, la carte n'a qu'un enfant — la grille à deux colonnes
   laisserait la seconde vide. */
.pc-une{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
/* Un article à la une SANS image ne peut pas rester une carte : le cadre
   s'étirait sur toute la largeur pour un texte de trois lignes, et le résultat
   était un bandeau blanc de 1176 × 190 traversant la page — on n'y lisait plus
   un article mais un bandeau d'avertissement. Il devient donc un chapeau
   typographique : pas de cadre, une justification de lecture, et c'est le
   corps du titre qui occupe la largeur. */
.pc-une.pc-sans-image{
  display:block;background:none;border:0;box-shadow:none;border-radius:0;
}
.pc-une.pc-sans-image:hover{transform:none;box-shadow:none}
.pc-une.pc-sans-image .pc-body{padding:0;max-width:780px;gap:14px}
.pc-une.pc-sans-image h2{font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:.98}
.pc-une.pc-sans-image .excerpt{font-size:1.1rem;line-height:1.55;opacity:.9}
.pc-une.pc-sans-image .meta{margin-top:0}
.pc-une.pc-sans-image .pc-lire{
  align-self:flex-start;margin-top:6px;
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;
  border-bottom:3px solid var(--orange);padding-bottom:3px;
}
.pc-une.pc-sans-image:hover .pc-lire{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px}
.pc-une .thumb{border-bottom:0;border-right:3px solid var(--noir);aspect-ratio:auto;min-height:320px}
.pc-une .pc-body{padding:36px 36px 38px;justify-content:center;gap:14px}
.pc-une h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.pc-une .excerpt{font-size:1rem}

@media(max-width:820px){
  .pc-une,.pc-une.pc-sans-image{grid-template-columns:1fr}
  .pc-une .thumb{border-right:0;border-bottom:3px solid var(--noir);min-height:0;aspect-ratio:16/10}
  .pc-une .pc-body{padding:24px 24px 26px}
}

/* article */
.article{max-width:780px;margin:0 auto}
.article p{font-size:1.08rem;line-height:1.75;margin-bottom:22px;font-weight:500}
.article h2{font-family:var(--titre);font-size:clamp(1.8rem,3.4vw,2.6rem);text-transform:uppercase;margin:40px 0 16px;line-height:1}
.article h3{font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;margin:28px 0 12px}
.article ul,.article ol{margin:0 0 22px 22px;line-height:1.7;font-weight:500}
.article li{margin-bottom:8px}
.article img{border-radius:18px;border:3px solid var(--noir);margin:10px 0 26px}
.article blockquote{border-left:6px solid var(--orange);background:var(--blanc);border-radius:0 16px 16px 0;padding:18px 24px;margin:0 0 24px;font-weight:700;font-style:italic}
.article .lead{font-size:1.25rem;margin-bottom:28px}
/* Fin d'article : les liens vers la carte, l'agenda et la réservation. Un
   simple paragraphe séparé par un filet — pas un encadré de plus. Le trait
   suffit à dire « le texte est fini, voici la suite ». */
.article-suite{border-top:3px solid var(--noir);padding-top:22px;margin-top:36px}

/* ==========================================================================
   CARTE / MAP (contact)
   ========================================================================== */
/* Hauteur libre, et non 420 px figés : l'écran de consentement est en flux,
   son bandeau de texte ne rogne donc plus le dessin. Avec la hauteur fixe,
   sur mobile, le bandeau prenait les deux tiers du cadre et l'épingle du
   plan disparaissait derrière lui. C'est l'iframe qui porte sa hauteur. */
.map-wrap{border:4px solid var(--noir);border-radius:24px;overflow:hidden;box-shadow:10px 10px 0 var(--orange);position:relative}
.map-wrap iframe{width:100%;height:420px;border:0;display:block;filter:saturate(1.05)}
.info-block{display:flex;gap:14px;align-items:flex-start;font-weight:700;margin-bottom:18px}
.info-block .ic{flex:0 0 46px;height:46px;border-radius:14px;background:var(--jaune);border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center}
/* Les quatre pastilles étaient jaune, orange, bleue et rose — et cette
   alternance ne voulait rien dire. Elles portent la même couleur, et ce qui
   les distingue est le pictogramme. Celui-ci est dessiné : les emojis 📍 📞 ✉️
   qui l'occupaient viennent d'une police bitmap et n'ont pas le trait du reste
   du site. */
.info-block .ic svg{width:23px;height:23px;display:block}
.info-block b{display:block;text-transform:uppercase;font-size:.84rem;letter-spacing:.08em;opacity:.78;margin-bottom:2px}

/* ==========================================================================
   CTA BANDEAU (réutilisable bas de page)
   ========================================================================== */
.cta-band{background:var(--noir);color:var(--creme);text-align:center;padding:90px 4vw}
.cta-band h2{font-family:var(--titre);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,6vw,5rem);line-height:.95;margin-bottom:18px}
.cta-band .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* État d'ouverture remonté du pied de page. Le fond est déjà noir : la pastille
   se dessine au trait plutôt qu'en aplat, et c'est la couleur qui informe —
   le point de .etat-ouverture::before suit currentColor. */
.cta-band-etat{margin:0 0 18px}
.cta-band .etat-ouverture{background:transparent;border-color:rgba(255,246,222,.35);color:var(--creme)}
.cta-band .etat-ouverture.ouvert{background:transparent;color:var(--vert);border-color:var(--vert);opacity:1}
.cta-band .etat-ouverture.ferme{background:transparent;color:var(--creme);border-color:rgba(255,246,222,.35);opacity:.8}

/* ==========================================================================
   INFOS / FOOTER
   ========================================================================== */
.infos{background:var(--noir);color:var(--creme);overflow:hidden}
.infos .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:5vw;align-items:center}
.big-cta{font-family:var(--titre);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.95}
.infos-card{background:var(--creme);color:var(--noir);border-radius:26px;padding:38px 34px;transform:rotate(2deg);border:3px solid var(--creme);box-shadow:14px 14px 0 var(--orange)}
.infos-card h3,.infos-card h2{font-family:var(--titre);font-size:1.7rem;text-transform:uppercase;margin-bottom:16px}
.infos-card p{font-weight:700;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
/* Pictogrammes dessinés (rosa_picto()) à la place des emojis 📍 ✉️ 📞 🕐,
   comme sur la page contact : même trait que le reste du site. Posés sur la
   ligne de base de la première ligne (le p aligne en baseline), puis
   descendus au milieu des capitales. Calés sur le haut de la ligne, celui du
   téléphone flottait 9 px trop haut : sur téléphone, le lien fait 44 px. */
.infos-card .picto{flex:0 0 20px;transform:translateY(.3em)}
.infos-card .picto svg{width:20px;height:20px;display:block}
.infos-card .btn{margin-top:14px;width:100%;text-align:center}

/* Aucun padding sur le <footer> : c'est lui qui empêchait le bandeau d'action
   d'aller jusqu'aux bords. Chaque bloc porte désormais le sien. */
footer.site-footer{background:var(--noir);color:var(--creme);padding:0}
.footer-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr .65fr .65fr .95fr 1.25fr;gap:48px;padding:72px 4vw 56px}
.footer-top h4{font-family:var(--titre);font-size:1.2rem;text-transform:uppercase;margin-bottom:18px;color:var(--jaune)}
.footer-col img{height:64px;margin-bottom:16px}
.footer-col p{font-weight:600;font-size:.92rem;line-height:1.6;opacity:.85}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{text-decoration:none;font-weight:700;font-size:.92rem;opacity:.85;transition:opacity .2s, color .2s, padding-left .2s}
.footer-col ul a:hover{opacity:1;color:var(--orange);padding-left:5px}
.footer-col .f-social{display:flex;gap:12px;margin-top:16px}
.footer-col .f-social a{width:42px;height:42px;border-radius:50%;background:var(--creme);color:var(--noir);display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;transition:transform .25s var(--ease-pop), background .25s}
.footer-col .f-social a:hover{transform:translateY(-4px) rotate(-8deg);background:var(--orange);color:var(--noir)}
.footer-bottom{max-width:var(--maxw);margin:0 auto;border-top:1px solid rgba(255,246,222,.15);padding:22px 4vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-weight:600;font-size:.82rem;opacity:.85}
.footer-bottom a{text-decoration:none}
/* Discret : c'est un réglage, pas une action de la maison. Il porte le même
   soulignement au survol que les liens légaux voisins. */
.anim-toggle,.cc-gerer{background:none;border:none;padding:0;cursor:pointer;color:inherit;
  font-family:inherit;font-weight:600;font-size:inherit;text-decoration:underline;
  text-underline-offset:3px;opacity:.85;order:3;
  /* 40 px de haut au doigt : le texte reste discret, la cible non. */
  min-height:40px;display:inline-flex;align-items:center}
/* inline-flex l'emporterait sur l'attribut `hidden`, qui masque ces boutons
   sans JavaScript, et « Arrêter les animations » à qui les a déjà coupées. */
.anim-toggle[hidden],.cc-gerer[hidden]{display:none}
.anim-toggle:hover,.cc-gerer:hover{color:var(--orange);opacity:1}
.anim-toggle .at-off{display:none}
html.anim-off .anim-toggle .at-on{display:none}
html.anim-off .anim-toggle .at-off{display:inline}
.footer-bottom a:hover{color:var(--orange)}
/* Message sanitaire de la loi Évin : une ligne entière, en dernier, sous le
   copyright, les liens légaux et le réglage des animations. */
.footer-bottom .footer-sante{flex:0 0 100%;order:4;margin:0;text-align:center}
/* En bas de page, le bouton « retour en haut » (fixe : 56 px à 26 px du bord,
   48 px à 18 px sur téléphone) se posait sur la dernière ligne. Il cachait la
   fin du message sanitaire sur téléphone et « Arrêter les animations » sur
   ordinateur. Le pied de page lui laisse sa place (80 px sur téléphone, dans le
   bloc du pied de page sous 640 px, dont le raccourci padding l'écrasait). */
.footer-bottom{padding-bottom:96px}

/* ---------- ACTIONS DE L'EN-TÊTE (mobile) ----------
   Masquées au-dessus de 1 100 px : la navigation les porte déjà. Un seul niveau
   de cadre par bouton, la couleur en signal sur le seul « Réserver », aucune
   rotation. 44 px de haut, le minimum tactile. */
.header-actions{display:none;align-items:center;gap:8px;margin-left:auto;margin-right:10px}
.header-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;
  border:2.5px solid var(--noir);border-radius:999px;text-decoration:none;color:var(--noir);
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.5px;transition:background .25s}
.header-actions .ha-tel{width:44px;padding:0}
.header-actions .ha-tel svg{width:21px;height:21px}
.header-actions .ha-tel:hover,.header-actions .ha-tel:focus-visible{background:var(--jaune)}
.header-actions .ha-reserver{padding:0 16px;background:var(--orange);font-size:.92rem}
.header-actions .ha-reserver:hover,.header-actions .ha-reserver:focus-visible{background:var(--jaune)}
/* Sous 360 px, le libellé céderait la place au logo : on garde les deux
   boutons mais on resserre. */
@media(max-width:380px){
  .header-actions{gap:6px;margin-right:6px}
  .header-actions .ha-reserver{padding:0 11px;font-size:.85rem}
}

/* ==========================================================================
   BACK TO TOP / CONFETTIS
   ========================================================================== */
/* Tant qu'il est masqué, le bouton porte l'attribut `inert` (posé en JS) :
   opacity:0 seul le laissait dans l'ordre de tabulation en permanence. */
#toTop[inert]{opacity:0;pointer-events:none}
#toTop{position:fixed;bottom:26px;right:26px;z-index:900;width:56px;height:56px;border-radius:50%;background:var(--orange);color:var(--noir);border:3px solid var(--noir);font-size:1.5rem;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 var(--noir);opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .3s, transform .3s var(--ease-pop), background .25s}
#toTop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#toTop:hover{background:var(--bleu);transform:translateY(-4px)}
.confetti{position:fixed;top:-12px;z-index:9500;pointer-events:none;width:12px;height:12px;border-radius:2px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.85}}

/* ---------- BANDEAU DES COOKIES (inc/consentement.php) ----------
   Une carte crème cernée de noir, comme les menus déroulants, en bas à
   gauche : le bouton « retour en haut » garde le coin droit. Sous le menu
   mobile (990) et l'en-tête (1000), au-dessus de tout le reste de la page.
   « Tout refuser » et « Tout accepter » sont le même bouton, à la même
   taille : refuser doit être aussi simple qu'accepter. Il n'apparaît qu'une
   fois l'écran d'ouverture parti (consentement.js). */
.consentement{
  position:fixed;left:24px;bottom:24px;z-index:980;
  width:min(460px, calc(100vw - 48px));max-height:calc(100dvh - 120px);overflow:auto;
  background:var(--creme);color:var(--noir);
  border:3px solid var(--noir);border-radius:18px;box-shadow:8px 8px 0 var(--noir);
  padding:22px 22px 18px;
}
.consentement[hidden],.consentement-choix[hidden],.cc-gerer[hidden]{display:none}
.consentement-titre{font-family:var(--titre);font-weight:900;font-size:1.55rem;line-height:1.1;margin:0 0 10px}
.consentement-texte{font-size:.95rem;line-height:1.5;margin:0 0 16px}
/* Zone de toucher portée à 40 px de haut, sans décaler les lignes voisines. */
.consentement-texte a{display:inline-block;padding:10px 0;margin:-10px 0;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.consentement-texte a:hover{text-decoration-color:var(--noir)}
.consentement-choix{display:grid;gap:12px;margin:0 0 16px;padding-top:14px;border-top:2px solid var(--noir)}
.cc-finalite{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0}
.cc-finalite input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--noir);cursor:pointer}
.cc-finalite label{font-size:.9rem;line-height:1.45;cursor:pointer}
.cc-finalite strong{display:block;font-weight:900}
.cc-note{font-size:.82rem;line-height:1.45;margin:0}
.consentement-actions{display:flex;flex-wrap:wrap;gap:10px}
.consentement-actions .btn{flex:1 1 0;min-width:0;text-align:center;padding:13px 14px}
.cc-lien{flex:0 0 100%;background:none;border:0;padding:8px 0 2px;min-height:40px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.9rem;color:inherit;
  text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.cc-lien:hover{text-decoration-color:var(--noir)}
@media(prefers-reduced-motion:no-preference){
  .consentement:not([hidden]){animation:cc-entree .45s var(--ease-soft) both}
}
@keyframes cc-entree{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:640px){
  .consentement{left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 96px);padding:18px 16px 14px;box-shadow:5px 5px 0 var(--noir)}
  .consentement-titre{font-size:1.3rem}
  .consentement-texte{font-size:.9rem}
}
/* Sous 360 px, « Tout refuser » passait sur deux lignes : l'un sous l'autre,
   toujours de même taille. */
@media(max-width:360px){
  .consentement-actions .btn{flex-basis:100%}
}

/* ---------- BARRE DE PROGRESSION DE SCROLL ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:1001;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--orange),var(--jaune),var(--bleu));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- EN-TÊTE : BASCULE VERS LE MENU BURGER ----------
   Elle se faisait à 980 px, comme le reste de la mise en page. Mais la
   navigation complète demande 869 px, plus 148 pour le nom écrit en toutes
   lettres des heroes colorés, plus les marges : mesuré, elle ne tient sur une
   ligne en taille normale qu'à partir de 1 130 px, et en taille resserrée
   qu'à partir de 1 050. Entre 981 et 1 050 px, « La Carte », « Le lieu » et
   « À emporter » passaient sur deux lignes (fenêtre non agrandie, petit
   portable, tablette en paysage).
   D'où trois paliers propres à l'en-tête, avec une marge d'environ 65 px à
   chaque seuil pour qu'un intitulé renommé dans l'administration ne remette
   pas tout en cause :
   - au-dessus de 1 180 px, la navigation en taille normale ;
   - de 1 101 à 1 180 px, la navigation resserrée ;
   - jusqu'à 1 100 px, le menu burger, avec le téléphone et « Réserver ».
   Le reste de la mise en page garde son seuil de 980 px. */
@media(max-width:1180px){
  nav.main-nav a{padding:10px 11px;font-size:.78rem}
}
@media(max-width:1100px){
  nav.main-nav>ul{display:none}
  /* Les deux actions que la navigation masquée emportait avec elle. Elles
     n'apparaissent QUE sous ce seuil : au-dessus, elles sont déjà dans la
     navigation, et les afficher deux fois serait le doublon que la règle du
     rappel unique interdit. */
  .header-actions{display:flex}
  .burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;
    min-height:44px;justify-content:center;align-items:center}
  .burger span{width:28px;height:4px;background:var(--noir);border-radius:4px}
}
@media(max-width:980px){
  .split,.infos .wrap,.footer-top{grid-template-columns:1fr}
  /* Empilé, le cadre photo incliné et son ombre de 18 px mangeaient les 5vw
     de gouttière : le titre de l'encart privatisation venait toucher l'ombre
     dès que l'étiquette qui les séparait a été retirée. */
  .split{row-gap:48px}
  .split.rev .split-media{order:0}
  /* width:100% est indispensable : « margin:0 auto » sur une case de grille
     la fait se rétracter à sa largeur de contenu au lieu de remplir la
     colonne. La photo tombait à 225px dans une colonne de 330, alors que la
     règle prévoit jusqu'à 520. */
  .split-media{width:100%;max-width:520px;margin:0 auto}
  .split-media img{height:360px}
  .footer-top{gap:34px}
  .gal-masonry{columns:2}
  /* La navigation, les actions de l'en-tête et le burger basculent désormais
     à 1 100 px : voir « EN-TÊTE : BASCULE VERS LE MENU BURGER », juste au-dessus. */
  .infos-card{transform:rotate(0)}
  .form.cols2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .section-pad{padding:72px 6vw}
  .section-pad-sm{padding:54px 6vw}
  header.site-header{padding:10px 5vw}
  .logo-wrap img{height:50px}
  header.site-header.scrolled .logo-wrap img{height:42px}
  .page-hero{padding:120px 6vw 56px}
  h1.sec-title,h2.sec-title{font-size:clamp(2rem,9.5vw,2.9rem)}
  .sec-sub{font-size:1rem}
  .marquee{padding:11px 0}
  .marquee span{font-size:1.15rem;margin:0 16px}
  .stats{padding:54px 6vw 20px}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:14px}
  .stat{padding:22px 10px;border-radius:18px}
  /* Trois compteurs sur deux colonnes : le dernier prend toute la largeur
     plutôt que de rester seul dans sa moitié gauche. */
  .stat:last-child:nth-child(odd){grid-column:1/-1}
  .event-grid{grid-template-columns:1fr;gap:26px}
  .menu-grid{grid-template-columns:1fr 1fr;gap:14px}
  .menu-card .bg{font-size:3.6rem}
  .split-media img{height:260px}
  .dish .dish-name{font-size:1.25rem}
  .dish .dish-price{font-size:1.25rem}
  .gal-masonry{columns:1}
  .social-grid{grid-template-columns:1fr 1fr;gap:14px}
  .insta-card{font-size:2.8rem;border-radius:18px}
  .big-cta{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  .gallery{padding:54px 0}
  .gal-item{width:240px;height:175px}
  .footer-bottom{flex-direction:column;text-align:center}
  #toTop{width:48px;height:48px;bottom:18px;right:18px;font-size:1.25rem}
}
/* Seuil abaissé de 380 à 360 px : l'iPhone 13 mini et les SE font 375 px de
   large et basculaient en une seule colonne. Quatre vignettes de carte en
   colonne unique, c'est 1 600 px de défilement pour quatre liens. À 375 px, deux
   colonnes de 158 px passent très bien ; en dessous de 360, on empile. */
@media(max-width:360px){
  .stats .wrap,.menu-grid,.social-grid{grid-template-columns:1fr}
}

/* Trois vignettes au lieu de quatre : la page « À emporter » retire celle du
   bar, aucun cocktail ne se prenant à emporter. La grille automatique en
   faisait deux plus une orpheline de 641 à 790 px, et sur téléphone, avec un
   trou à droite de la dernière. Elles tiennent donc sur une rangée dès 641 px
   (178 px par vignette au plus serré, le titre en demande 146), et sur
   téléphone la troisième se centre sous les deux autres.
   Sur grand écran, la grille est bornée à 990 px : étirées sur toute la
   largeur, les trois vignettes devenaient des aplats de 390 px de large,
   quand les quatre de l'accueil et de la carte en font 315 à 1 440 px.
   Mesuré après correction : 315 px ici aussi. */
.menu-grid.menu-grid-trois{grid-template-columns:repeat(3,minmax(0,1fr));max-width:990px;margin-left:auto;margin-right:auto}
@media(max-width:640px){
  .menu-grid.menu-grid-trois{grid-template-columns:1fr 1fr}
  .menu-grid.menu-grid-trois > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
}
@media(max-width:360px){
  .menu-grid.menu-grid-trois{grid-template-columns:1fr}
  .menu-grid.menu-grid-trois > :last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
}

/* ==========================================================================
   CONTRASTE — AJUSTEMENTS DE LISIBILITÉ (WCAG 2.2 AA)
   Sur le bleu de la charte, le texte noir fait 5,10:1 : la moindre opacité
   le ferait passer sous le seuil. On retire donc l'atténuation partout où le
   fond est bleu, et on adapte le fil d'Ariane à la couleur de son hero.
   ========================================================================== */

/* --- fil d'Ariane sur hero coloré : pas d'atténuation, marqueur adapté --- */
.page-hero.on-bleu .breadcrumb a,
.page-hero.on-orange .breadcrumb a,
.page-hero.on-noir .breadcrumb a,
.page-hero.on-rose .breadcrumb a,
.page-hero.on-vert .breadcrumb a,
.page-hero.on-bleu .breadcrumb .sep,
.page-hero.on-orange .breadcrumb .sep,
.page-hero.on-noir .breadcrumb .sep,
.page-hero.on-rose .breadcrumb .sep,
.page-hero.on-vert .breadcrumb .sep{opacity:1}

.page-hero.on-bleu .breadcrumb [aria-current],
.page-hero.on-orange .breadcrumb [aria-current],
.page-hero.on-rose .breadcrumb [aria-current],
.page-hero.on-vert .breadcrumb [aria-current]{
  color:var(--noir);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;
}
.page-hero.on-noir .breadcrumb [aria-current]{color:var(--jaune)}

/* --- textes secondaires sur fond bleu : opacité pleine --- */
.bg-bleu .sec-sub,   .privat .sec-sub,
.bg-bleu .form-note, .privat .form-note,
.bg-bleu .step p,    .privat .step p,
.bg-bleu .faq-body,  .privat .faq-body,
.page-hero.on-bleu .ph-lead{opacity:1}

/* --- « / pers. » : héritait de l'orange du prix, illisible en petit --- */
.formule .price small{color:var(--noir);opacity:.72}
.formule.feat .price small{color:var(--creme);opacity:.85}

/* Sur le jaune, l'orange cerné de .o suffit : plus de teinte assombrie. */

/* ==========================================================================
   ADAPTATIONS WORDPRESS
   Ce que le thème ajoute par rapport à la maquette statique.
   ========================================================================== */

/* --- Lien d'évitement ---------------------------------------------------
   Premier élément focalisable de la page : il permet à qui navigue au clavier
   de sauter la navigation (une vingtaine de liens) pour aller au contenu.
   Invisible tant qu'il n'a pas le focus. */
.skip-link{
  position:absolute;left:12px;top:-100px;z-index:2000;
  background:var(--noir);color:var(--creme);
  padding:14px 22px;border-radius:0 0 14px 14px;
  font-weight:900;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em;
  text-decoration:none;transition:top .2s var(--ease-pop);
}
.skip-link:focus{top:0}

/* --- Menu mobile : réellement masqué ------------------------------------
   Dans la maquette, le clip-path le cachait à l'œil mais ses liens restaient
   dans l'ordre de tabulation. L'attribut `inert` les retire de la navigation
   clavier et de l'arbre d'accessibilité ; le clip-path reste pour l'animation
   d'ouverture. */
.mobile-nav[inert]{pointer-events:none}

/* --- Logo de secours ----------------------------------------------------
   Tant qu'aucun logo n'est chargé dans la personnalisation, on affiche le nom
   du site dans la police de titre plutôt qu'une image cassée. */
.logo-texte{
  font-family:var(--titre);font-weight:900;font-size:1.9rem;
  text-transform:uppercase;line-height:1;letter-spacing:.01em;
}
.footer-nom{
  font-family:var(--titre);font-weight:900;font-size:1.7rem;
  text-transform:uppercase;line-height:1;margin-bottom:14px;color:var(--creme);
}
.custom-logo{height:62px;width:auto;transition:height .35s, transform .35s}
header.site-header.scrolled .custom-logo{height:48px}
.site-footer .custom-logo{height:64px;margin-bottom:16px}

/* --- Titres de colonnes du pied de page ---------------------------------
   Ce sont des <h2> pour la structure du document, pas des <h4> décoratifs. */
.footer-col h2{
  font-family:var(--titre);font-size:1.2rem;text-transform:uppercase;
  margin-bottom:18px;color:var(--jaune);font-weight:400;
}
.footer-bottom nav ul{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin:0;padding:0}
.footer-bottom nav a{text-decoration:none}
.footer-bottom nav a:hover{color:var(--orange)}

/* --- Pagination ---------------------------------------------------------- */
.pagination{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:52px}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0 14px;
  border:2.5px solid var(--noir);border-radius:40px;background:var(--blanc);
  color:var(--noir);text-decoration:none;font-weight:900;
  transition:transform .25s var(--ease-pop), background .25s, color .25s;
}
.pagination .page-numbers:hover{transform:translateY(-3px);background:var(--jaune)}
.pagination .page-numbers.current{background:var(--orange);border-color:var(--orange);color:var(--noir)}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Classe utilitaire d'accessibilité (WordPress) ----------------------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;clip-path:none;
}

/* ==========================================================================
   AGENDA & FICHE ÉVÉNEMENT
   ========================================================================== */

/* --- Agenda vide -------------------------------------------------------- */
.agenda-vide{padding:40px 0 20px}
.agenda-vide .sec-title{margin-bottom:14px}

/* --- Fiche événement ----------------------------------------------------- */
.evenement-corps{display:grid;grid-template-columns:1.55fr .95fr;gap:5vw;align-items:start}
.evenement-texte img{border-radius:20px;border:3px solid var(--noir);margin-bottom:28px}
.evenement-infos{position:sticky;top:110px}
.evenement-infos .infos-card{transform:rotate(-1.5deg);box-shadow:12px 12px 0 var(--noir);border-color:var(--noir)}
.evenement-infos .infos-card h2{font-family:var(--titre);font-size:1.7rem;text-transform:uppercase;margin-bottom:16px;font-weight:400}
.evenement-infos .btn{margin-top:12px;width:100%;text-align:center}
/* --- Fiche d'une soirée, construite à partir des cases (2026-09-17) -------
   Programme, bon à savoir, texte libre et « En pratique » à gauche ; l'encadré
   « C'est quand ? » à droite. Chaque bloc n'existe que si sa case est remplie,
   sauf « En pratique », que le gabarit écrit à partir de la date et du tarif.
   Un seul niveau de cadre : les lignes du programme sont séparées par un
   filet, pas encadrées une à une. */
.evt-titre{font-family:var(--titre);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);text-transform:uppercase;line-height:1;margin:0 0 18px}
.evenement-texte > * + .evt-titre{margin-top:44px}
.evenement-texte > img + .evt-titre{margin-top:0}
.evt-programme{list-style:none;margin:0;padding:0}
.evt-programme li{display:grid;grid-template-columns:5.5rem 1fr;gap:18px;align-items:baseline;padding:14px 0;border-bottom:2.5px dashed rgba(0,0,0,.22)}
.evt-programme li:first-child{padding-top:4px}
/* Au moins 1 px de contour : à la taille du téléphone, 0,04em n'en faisait plus que 0,86. */
.evt-heure{font-family:var(--titre);font-size:1.6rem;line-height:1;color:var(--orange);-webkit-text-stroke:max(1px,.04em) var(--noir);paint-order:stroke fill}
.evt-quoi{font-weight:800;font-size:1.08rem;line-height:1.45}
.checks.evt-savoir{margin:0}
.evt-texte-libre{margin-top:34px;font-size:1.05rem;line-height:1.7;font-weight:600;max-width:680px}
.evt-texte-libre p{margin:0 0 14px}
.evt-pratique{font-weight:600;font-size:1.06rem;line-height:1.75;max-width:680px;margin:0}
.evt-pratique a{color:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.evt-infos{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:12px}
.evt-infos li{display:flex;gap:12px;align-items:center;font-weight:700;line-height:1.35}
.evt-infos .ic{flex:0 0 38px;height:38px;border-radius:12px;background:var(--jaune);border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center}
.evt-infos .ic svg{width:20px;height:20px;display:block}
.evt-infos a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:640px){
  .evt-programme li{grid-template-columns:4.6rem 1fr;gap:12px}
  .evt-heure{font-size:1.5rem}
}

.evenement-passe{
  display:inline-block;margin:14px 0 4px;padding:10px 18px;border-radius:40px;
  background:var(--noir);color:var(--creme);font-weight:800;font-size:.88rem;
}
.evenement-passe a{color:var(--jaune)}
@media(max-width:980px){
  .evenement-corps{grid-template-columns:1fr}
  .evenement-infos{position:static;max-width:520px}
  .evenement-infos .infos-card{transform:none}
}

/* ==========================================================================
   PAGE D'ACCUEIL
   Repris du <style> de la maquette. Les encarts « à emporter » et
   « privatisation » sont devenus des blocs génériques (.split dans .bg-jaune
   ou .bg-bleu) : leurs styles propres ont donc été retirés d'ici.
   ========================================================================== */

.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:140px 4vw 0;overflow:hidden}
.hero-bg-blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0}
.blob1{width:46vw;height:46vw;background:var(--jaune);top:-18vw;right:-12vw;animation:float 9s ease-in-out infinite}
.blob2{width:20vw;height:20vw;background:var(--bleu);bottom:-8vw;left:-7vw;opacity:.92;animation:float 11s ease-in-out infinite reverse}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:4vw;align-items:center;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;background:var(--noir);color:var(--creme);padding:8px 18px;border-radius:40px;font-weight:800;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;transform:rotate(-2deg);margin-bottom:22px}
.hero-kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--jaune);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.hero h1{font-family:var(--titre);font-weight:900;line-height:.92;font-size:clamp(3.4rem,8.4vw,7.6rem);text-transform:uppercase}
.hero h1 .line{display:block;overflow:hidden}
/* L'état de départ vit DANS le keyframe, pas sur l'élément. Auparavant le
   `transform:translateY(110%)` était déclaré ici et seule l'animation le
   ramenait en place : le jour où le keyframe a disparu — emporté avec le CSS du
   préchargeur — le titre de l'accueil est resté hors de son cadre, donc
   invisible, sur toutes les tailles d'écran. Avec `both` et un keyframe absent,
   le texte s'affiche simplement à sa place. */
.hero h1 .line span{display:inline-block;animation:lUp .7s var(--ease-pop) both;transition:transform .25s var(--ease-pop)}
@keyframes lUp{from{transform:translateY(110%)}to{transform:translateY(0)}}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
/* Mouvement réduit, ou animations coupées au pied de page : la règle globale
   ramène la durée à rien mais garde les délais, et les lignes 2 et 3 restaient
   masquées 0,12 et 0,24 s avant de surgir. `:nth-child(n)` rejoint la
   spécificité des deux règles ci-dessus, l'ordre fait le reste. */
@media (prefers-reduced-motion:reduce){.hero h1 .line:nth-child(n) span{animation-delay:0s}}
html.anim-off .hero h1 .line:nth-child(n) span{animation-delay:0s}
.hero h1 .line:hover span{transform:skewX(-6deg) translateY(0)}
.hero h1 .outline{color:transparent;-webkit-text-stroke:3px var(--noir)}
.hero p.lead{margin:26px 0 34px;font-size:1.18rem;font-weight:600;max-width:520px;line-height:1.55}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-ctas .btn{font-size:.95rem;padding:17px 32px}
/* --- Les deux cartes de la semaine (template-parts/hero-semaine.php) -------
   Elles gardent le geste des deux cadres photo qu'elles remplacent : papier
   blanc, inclinaison, parallaxe à la souris (main.js), redressement au survol.
   Mais elles portent du texte, dont la longueur change chaque semaine : la
   hauteur fixe du conteneur et le placement absolu ne tenaient plus. Les
   cartes sont dans le flux, et c'est leur contenu qui fait la hauteur.

   Le chevauchement se règle sur la PHOTO de la seconde carte, jamais sur son
   texte : la seconde carte remonte d'exactement la hauteur de sa photo, qui
   vient se loger à côté du texte de la première, et son propre texte commence
   sous le bas de celle-ci, quelle que soit la longueur des deux compositions.
   La carte du haut passe devant et ne masque qu'une bande étroite, sur le
   bord gauche de cette photo. Une marge en pourcentage se calcule sur la
   largeur du conteneur, même à la verticale : la hauteur de la photo, au
   format 4:3, s'en déduit exactement. Le bloc garde ainsi à peu près la
   hauteur de la colonne du titre (mesuré le 2026-09-16 : 614 px contre 598 à
   1440 px de large, 562 contre 560 à 1280) : les boutons ne descendent pas.

   Le tampon rond « BAR • RESTAURANT • FESTIF • LANNION » qui tournait au-dessus
   a été retiré à la demande du client, avec ses règles et son keyframe `spin`. */
/* `container-type` : les tailles du texte des cartes suivent la largeur de CE
   bloc (unités cqi), pas celle de l'écran. Entre 981 et 1200 px, la colonne ne
   fait que 380 à 450 px de large, alors qu'elle en fait 520 sur tablette, en
   une seule colonne. La première déclaration sert de repli aux navigateurs qui
   ignorent ces unités. */
.hero-visual{position:relative;display:flex;flex-direction:column;padding:4px 0 8px;container-type:inline-size}
.polaroid{position:relative;display:flex;flex-direction:column;background:#fff;padding:12px 12px 18px;box-shadow:0 18px 50px rgba(0,0,0,.22);border-radius:6px;transition:transform .45s var(--ease-pop), box-shadow .45s}
.p1{width:56%;transform:rotate(-5deg);z-index:3}
.p2{width:52%;margin-left:auto;transform:rotate(4deg);z-index:2}
/* 12px de marge intérieure + la photo, moins 10px : les deux inclinaisons
   remontent chacune d'autant le bord concerné. */
.p1 ~ .p2{margin-top:calc(10px - 12px - (52% - 24px) * .75)}
.polaroid:only-of-type{margin-inline:auto}
.polaroid:hover{transform:rotate(0) scale(1.05)!important;z-index:9;box-shadow:0 30px 70px rgba(0,0,0,.3)}
/* Le visuel passe en tête de carte ; dans le document, il suit le texte. */
.semaine-visuel{order:-1;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:3px;overflow:hidden}
.semaine-visuel img{display:block;width:100%;height:100%;object-fit:cover}
/* Sans photo, le dessin de l'univers, sur le papier de la carte : pas d'aplat. */
.semaine-visuel svg{display:block;width:auto;height:74%}
.semaine-texte{padding:12px 4px 0}
.semaine-surtitre{font-family:var(--texte);font-weight:900;font-size:.75rem;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--noir)}
.semaine-titre{margin-top:3px;font-family:var(--titre);font-weight:900;font-size:1.6rem;font-size:clamp(1.35rem,5.4cqi,1.8rem);line-height:1;text-transform:uppercase;color:var(--noir)}
.semaine-compo{list-style:none;margin-top:9px;font-weight:700;font-size:.86rem;font-size:clamp(.8rem,2.75cqi,.92rem);line-height:1.35}
/* Le visage des affiches d'origine, à droite du surtitre et du nom, calé sur
   la ligne du nom ; la composition passe dessous en pleine largeur. Largeur
   en cqi, comme les textes : elle suit la colonne des cartes. */
.semaine-texte.avec-visage{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:end}
.avec-visage .semaine-surtitre{grid-column:1;grid-row:1}
.avec-visage .semaine-titre{grid-column:1;grid-row:2}
.avec-visage .semaine-compo{grid-column:1/-1;grid-row:3}
/* Même cadre portrait pour les deux : le visage du cocktail, large à cause de
   sa ligne d'épaule, se réduisait à 80 × 74 px contre 84 × 108 pour celui du
   burger. Le cadrage garde la tête et coupe l'épaule à gauche. */
.semaine-visage{grid-column:2;grid-row:1/3;align-self:end;display:block;width:clamp(58px,14cqi,86px);height:auto;aspect-ratio:3/4;object-fit:cover;object-position:85% 100%}

/* Les visages du Rosa, en rang sur la page Le Restaurant : même hauteur pour
   tous, pieds alignés, sans cadre. */
.visages-liste{list-style:none;margin:40px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:32px 40px;max-width:1120px}
.visages-liste img{display:block;height:200px;width:auto}
@media(max-width:980px){.visages-liste{gap:26px 30px}.visages-liste img{height:160px}}
@media(max-width:640px){.visages-liste{gap:22px 18px}.visages-liste img{height:118px}}

/* Les visages dans les vides (retour client du 2026-09-21) : le coin de la
   carte « Où nous trouver ? » de l'accueil, la droite du titre de l'agenda, le
   bas de la colonne « Nous écrire ». Trait noir, donc
   jamais posés sur le noir ; sans cadre et sans rotation. Chacun ne se montre
   que là où il a sa place : les requêtes de conteneur mesurent la largeur
   réelle de la carte et de la grille, pas celle de l'écran. */
.infos .infos-card{position:relative;container-type:inline-size}
.infos-visage{display:none;position:absolute;top:30px;right:30px;pointer-events:none}
/* Jusqu'au bas de la ligne du téléphone, jamais plus bas : la ligne des
   horaires, la plus longue de la carte, passe dessous. */
.infos-visage img{display:block;height:clamp(150px,38cqi,190px);width:auto}
/* Largeur du contenu de la carte : 210 px pour les lignes courtes (titre,
   adresse, courriel), 16 d'écart, 110 pour le dessin à sa plus petite taille. */
@container (min-width:340px){.infos-visage{display:block}}

.agenda .wrap{container-type:inline-size}
.agenda-tete{position:relative}
/* À droite du titre et du mois, pieds sur la ligne du mois : les cartes
   commencent en dessous, quel que soit leur nombre. Il monte de 60 px dans la
   marge du haut (110 px partout où il s'affiche), et s'arrête à une vingtaine
   de pixels de la diagonale crème qui ouvre la section. */
.agenda-visage{display:none;position:absolute;top:-60px;bottom:0;right:4%;pointer-events:none}
.agenda-visage img{display:block;height:100%;width:auto}
@container (min-width:600px){.agenda-visage{display:block}}

.ecrire-visage{margin-top:34px}
.ecrire-visage img{display:block;height:190px;width:auto}
@media(max-width:980px){.ecrire-visage{display:none}}
/* La flèche est dans le flux, entre les deux cartes, et n'y prend aucune
   hauteur : 22px de marge + 74px de dessin - 96px. Elle se pose donc juste sous
   la première carte, à gauche de la seconde, quelle que soit la longueur des
   textes. Le bloc est en colonne flexible et non en flux normal : les marges
   négatives de la flèche et de la seconde carte s'y fusionneraient, et la
   seconde carte descendrait d'autant. */
.doodle-arrow{position:relative;z-index:4;align-self:flex-start;width:120px;height:74px;margin:22px 0 -96px 4%;transform:rotate(15deg)}
/* Une carte vidée dans l'aperçu du personnaliseur : la flèche ne montre plus rien. */
.doodle-arrow:first-child,.doodle-arrow:last-child{display:none}
.doodle-arrow path{stroke:var(--noir);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:6 10;animation:dashmove 1.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-32}}
.agenda{background:var(--orange);color:var(--noir);overflow:hidden}
.agenda::before{content:'';position:absolute;top:-2px;left:0;right:0;height:60px;background:var(--creme);clip-path:polygon(0 0,100% 0,100% 35%,0 100%)}
/* « Programme de septembre » : le mois se calcule seul, il reste donc affiché,
   mais en simple ligne de texte sous le titre. La pastille crème inclinée qui
   le portait a suivi les étiquettes de section. */
.agenda .sec-month{font-family:var(--titre);font-size:1.5rem;margin-bottom:34px}
.agenda-cta{margin-top:44px;text-align:center}
/* Programme vide : une phrase et un lien, alignés sur le titre, à la place de
   l'intitulé du mois et de la grille. */
.agenda .agenda-attente{margin-top:4px}
.agenda .agenda-attente + .agenda-cta{text-align:left;margin-top:28px}
.menu-sec{background:var(--creme)}
.menu-ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.takeaway.in-view h2 .scribble path{animation:draw 1s .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* Plus de padding-top réduit à 40 px : l'étiquette « Ils ont kiffé » qui
   comblait l'écart est partie, et le titre venait se coller au bandeau de
   couleur qui précède le bloc sur les trois pages où il paraît. Il reprend
   l'espacement commun des sections. */
.avis-sec{background:var(--creme)}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero-visual{max-width:520px;margin:0 auto;width:100%}}
@media(max-width:640px){.hero{padding:104px 6vw 40px;min-height:auto}.hero h1{font-size:clamp(2.9rem,13.5vw,4rem)}.hero-ctas{flex-direction:column;align-items:stretch}.hero-ctas .btn{text-align:center}.blob1{width:75vw;height:75vw;top:-30vw;right:-28vw}.takeaway .phone-mock{max-width:260px;transform:rotate(2deg);margin-top:30px}}
/* Sur téléphone, les cartes s'élargissent pour que chaque ingrédient tienne
   sur sa ligne. Aussi larges, elles se recouvriraient sur plus de la moitié
   de la photo : elles s'empilent donc en quinconce, et seuls les bords de
   papier se chevauchent. */
@media(max-width:640px){
  .polaroid{padding:9px 9px 16px}
  .p1{width:80%}
  .p2{width:78%}
  .p1 ~ .p2{margin-top:-14px}
  .semaine-texte{padding:11px 3px 0}
  .semaine-titre{font-size:1.45rem}
  .semaine-compo{margin-top:8px;font-size:.84rem}
  /* Plus petite, dans la marge laissée à gauche de la photo de la seconde
     carte : 26px + 40px - 66px, toujours aucune hauteur prise. */
  .doodle-arrow{width:56px;height:40px;margin:26px 0 -66px 1%;transform:rotate(20deg)}
}

/* --- Ajustements liés au balisage du thème ------------------------------
   Quelques éléments passent d'un <div>/<h3> à un <p>/<span> pour respecter la
   hiérarchie du document : les sélecteurs suivent. */
.stat p.num, .stat p.lbl{margin:0}
.menu-card .label{display:block}
/* La maquette laissait le h3 hériter du gras du navigateur, servi par la
   graisse 900 de Londrina Solid. Passé en <span>, le titre retombait en 400 :
   on redemande explicitement le 900. */
.menu-card .label .menu-card-titre{
  display:block;font-family:var(--titre);font-weight:900;font-size:1.45rem;
  text-transform:uppercase;line-height:1;
}
.menu-card .label .menu-card-desc{display:block;font-weight:700;font-size:.85rem;opacity:.75}
.menu-card .bg{font-size:6.2rem}

.avis-card blockquote.quote{
  margin:0 0 18px;font-weight:600;font-size:1rem;line-height:1.6;
}
.avis-card blockquote.quote p{margin:0 0 10px}
.avis-card blockquote.quote p:last-child{margin-bottom:0}
.avis-card p.stars{margin:0 0 12px}
.avis-card .who{align-items:center}
.avis-card .who > span:last-child{display:block}

p.avis-badge{margin-top:40px}
p.sec-month{margin-bottom:34px}
/* `p.agenda-cta` (spécificité 0,0,1,1) écrasait `.agenda-cta{margin-top:44px}`
   (0,0,1,0) : le bouton « Voir tout l'agenda » venait se coller aux cartes et
   passait par-dessus leur ombre portée. */
p.menu-ctas, p.hero-kicker{margin-top:0}
p.agenda-cta{margin-top:52px;text-align:center}

/* La grille de l'accueil garde des marges nulles sur les paragraphes de titre. */
.hero p.lead{margin:26px 0 34px}
/* --- Bandeaux défilants : débordement contenu localement ------------------
   La bande est inclinée et légèrement agrandie (rotate + scale 1.02), ce qui
   la fait dépasser de ~13 px de chaque côté. La maquette masquait ce
   débordement avec `overflow-x:hidden` sur <body> — une règle qui rend
   inopérant tout `position:sticky` dans la page. On contient donc le
   dépassement là où il naît. */
/* Le conteneur doit laisser à la bande inclinée la place de tourner : un
   ruban de 1300 px incliné de 1,3° dépasse d'environ 15 px en haut et en bas.
   La version précédente annulait son propre padding par un margin négatif sur
   l'enfant, et rognait donc la bande. */
.marquee-wrap{overflow:hidden;padding:18px 0;position:relative;z-index:6}

/* --- Sections de la carte ------------------------------------------------ */
.dish-section{margin-top:56px}
.dish-section:first-of-type{margin-top:8px}
.dish-section h2.sub-h{
  font-family:var(--titre);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;display:inline-block;
  background:var(--jaune);border:3px solid var(--noir);border-radius:14px;
  padding:8px 20px;transform:rotate(-1.5deg);box-shadow:4px 5px 0 rgba(0,0,0,.16);
  margin-bottom:12px;
}
.dish p.dish-name{margin:0}
.dish p.dish-desc{margin:6px 0 0}
.dish p.dish-price{margin:0}

/* ==========================================================================
   EN-TÊTE AU-DESSUS D'UN BANDEAU DE TITRE COLORÉ
   L'en-tête est transparent tant qu'on n'a pas fait défiler. Sur un bandeau
   orange, le bouton orange devient invisible et le lien de la page courante
   tombe à 2:1. Une fois l'en-tête devenu crème au défilement (.scrolled),
   les règles normales reprennent.
   ========================================================================== */
/* Le bleu est dans ce groupe depuis la charte du 2026-09-17 : son bleu azur
   est un fond clair, où le noir fait 5,10:1 et le crème 3,82:1. */
body.hero-orange .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"],
body.hero-bleu   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"],
body.hero-vert   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"],
body.hero-rose   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]{
  color:var(--noir);
}
body.hero-orange .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]::after,
body.hero-bleu   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]::after,
body.hero-vert   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]::after,
body.hero-rose   .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]::after,
body.hero-orange .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover::after,
body.hero-bleu   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover::after,
body.hero-vert   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover::after,
body.hero-rose   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover::after{
  background:var(--noir);
}
body.hero-orange .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover,
body.hero-bleu   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover,
body.hero-vert   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover,
body.hero-rose   .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover{color:var(--noir)}

/* Le CTA passe en noir : sur l'orange, il ressort au lieu de s'y fondre. */
body.hero-orange .site-header:not(.scrolled) .btn-orange,
body.hero-vert   .site-header:not(.scrolled) .btn-orange,
body.hero-rose   .site-header:not(.scrolled) .btn-orange{
  background:var(--noir);border-color:var(--noir);color:var(--creme);
}
body.hero-orange .site-header:not(.scrolled) .btn-orange:hover,
body.hero-rose   .site-header:not(.scrolled) .btn-orange:hover{background:var(--creme);color:var(--noir)}

/* Bandeau noir : le texte de l'en-tête passe en crème. Le bleu en faisait
   partie jusqu'à la charte du 2026-09-17 ; il est désormais traité comme un
   fond clair, plus haut. */
body.hero-noir .site-header:not(.scrolled) nav.main-nav a:not(.btn){color:var(--creme)}
/* Sur noir, la page courante et le survol passent au jaune (14,3:1). */
body.hero-noir .site-header:not(.scrolled) nav.main-nav a:not(.btn):hover,
body.hero-noir .site-header:not(.scrolled) nav.main-nav a:not(.btn)[aria-current="page"]{color:var(--jaune)}
body.hero-noir .site-header:not(.scrolled) nav.main-nav a::after{background:var(--jaune)}
body.hero-noir .site-header:not(.scrolled) .btn-ghost{color:var(--creme);border-color:var(--creme)}
body.hero-noir .site-header:not(.scrolled) .btn-ghost:hover{background:var(--creme);color:var(--noir)}
body.hero-noir .site-header:not(.scrolled) .burger span{background:var(--creme)}
/* Le bouton téléphone, qui accompagne le burger : noir sur le hero noir, il
   était invisible (mesuré, 1:1). Il passe en crème comme les trois barres. */
body.hero-noir .site-header:not(.scrolled) .header-actions .ha-tel{color:var(--creme);border-color:var(--creme)}
body.hero-noir .site-header:not(.scrolled) .header-actions .ha-tel:hover,
body.hero-noir .site-header:not(.scrolled) .header-actions .ha-tel:focus-visible{color:var(--noir);border-color:var(--jaune)}

/* Les liens du déroulant vivent sur un panneau crème, à l'intérieur de la
   navigation. Les règles ci-dessus éclaircissent TOUTE la navigation quand le
   hero est bleu ou noir — et elles attrapaient aussi ces liens-là, qui
   ressortaient crème sur crème. Mesuré : contraste de 1,00:1, treize liens
   invisibles sur les trois menus, sur privatisation, galerie, italien et
   asiatique. Il faut reprendre le même préfixe pour repasser devant : un
   sélecteur plus court perdrait en spécificité. */
body.hero-orange .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn),
body.hero-bleu .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn),
body.hero-noir .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn){color:var(--noir)}

body.hero-orange .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn)[aria-current="page"],
body.hero-bleu .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn)[aria-current="page"],
body.hero-noir .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn)[aria-current="page"]{color:var(--noir)}

body.hero-orange .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn):hover,
body.hero-bleu .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn):hover,
body.hero-noir .site-header:not(.scrolled) nav.main-nav .drop a:not(.btn):hover{color:var(--noir)}

/* --- Logo clair sur bandeau coloré --------------------------------------- */
.logo-clair,.logo-secours{display:none}
body.hero-orange .site-header:not(.scrolled) .logo-clair,
body.hero-bleu   .site-header:not(.scrolled) .logo-clair,
body.hero-noir   .site-header:not(.scrolled) .logo-clair,
body.hero-rose   .site-header:not(.scrolled) .logo-clair{display:block}

/* Le logo sombre ne s'efface QUE s'il y a une version claire pour le
   remplacer. Sans le garde-fou .logo-clair-dispo, les cinq pages à bandeau
   coloré n'affichaient aucun logo : la règle masquait le seul qui existait
   pour laisser place à un fichier que le client n'a jamais fourni. */
body.logo-clair-dispo.hero-orange .site-header:not(.scrolled) .custom-logo:not(.logo-clair),
body.logo-clair-dispo.hero-bleu   .site-header:not(.scrolled) .custom-logo:not(.logo-clair),
body.logo-clair-dispo.hero-noir   .site-header:not(.scrolled) .custom-logo:not(.logo-clair),
body.logo-clair-dispo.hero-rose   .site-header:not(.scrolled) .custom-logo:not(.logo-clair){display:none}

/* Sur le bandeau noir, le logo sombre resterait illisible : c'est le nom en
   toutes lettres, en crème, qui prend le relais. Sur l'orange, le rose et,
   depuis la charte du 2026-09-17, le bleu azur, le logo noir se lit très bien
   et reste tel quel. */
body:not(.logo-clair-dispo).hero-noir .site-header:not(.scrolled) .custom-logo{display:none}
body:not(.logo-clair-dispo).hero-noir .site-header:not(.scrolled) .logo-secours{display:flex;color:var(--creme)}
/* Le logo image fait 62 px de haut ; le repli en toutes lettres n'en faisait
   que 30, ce qui ramenait la cible tactile du lien d'accueil sous le seuil sur
   les quatre pages à bandeau sombre. */
.logo-secours{align-items:center;min-height:56px}

/* ==========================================================================
   FORMULAIRES — ajouts du thème WordPress
   ========================================================================== */
.formulaire-bloc{max-width:680px}
.form p.field{margin:0}
.form .field label{display:block;margin-bottom:7px}
.form .field .facultatif{font-weight:700;text-transform:none;letter-spacing:0;opacity:.72;font-size:.82rem}
.form .field-aide{display:block;margin-top:6px;font-size:.8rem;font-weight:600;opacity:.75}
.form p.form-note{font-size:.82rem;font-weight:600;opacity:.75;margin:0;line-height:1.9}
/* Le lien de la note est inséré dans une phrase — la WCAG l'exempte de la
   taille minimale — mais un interligne généreux lui donne quand même une zone
   de 24 px, confortable au pouce. */
/* Lien de fin de phrase : WCAG 2.5.8 exempte les cibles en ligne, mais 31 px
   de haut restent pénibles au doigt. Le padding vertical ne bouscule pas la
   mise en page, la note ayant déjà un interlignage de 1,9. */
.form p.form-note a{display:inline-block;padding:9px 0}
.form button.btn{border:3px solid var(--orange);cursor:pointer;font-family:var(--texte)}

/* Champ leurre : hors flux, hors tabulation, invisible — mais pas display:none,
   que certains robots savent détecter. */
.champ-leurre{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-message{
  padding:16px 20px;border-radius:16px;border:3px solid var(--noir);
  font-weight:800;margin:0 0 26px;max-width:680px;
}
.form-message.succes{background:var(--vert)}
.form-message.erreur{background:var(--jaune)}
.form-message:focus{outline:3px solid var(--bleu);outline-offset:3px}

/* ==========================================================================
   CONTACT & PLAN D'ACCÈS
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:start}
.contact-grid > *{min-width:0}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:44px}}

/* --- Colonnes de la page contact ------------------------------------------
   Le titre de colonne était un .sec-title : « NOS COORDONNÉES » passait à la
   ligne au milieu d'un mot dans une colonne de 480 px et écrasait la liste
   qu'il annonçait. Il lui faut sa propre échelle. */
.contact-titre{
  font-family:var(--titre);font-size:clamp(1.6rem,2.6vw,2rem);
  text-transform:uppercase;line-height:1;margin-bottom:22px;
}

/* Les horaires étaient une suite de lignes séparées par des <br> : il fallait
   y chercher le jour du jour. Ils sont maintenant alignés en tableau, reliés
   par la même ligne de pointillés que les prix de la carte, et la ligne
   d'aujourd'hui — la seule que le visiteur cherche — est surlignée. */
.horaires-bloc{margin-top:26px;border-top:3px solid var(--noir);padding-top:20px}
.horaires-entete{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.horaires-entete .ic{
  flex:0 0 46px;height:46px;border-radius:14px;background:var(--jaune);
  border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center;
}
.horaires-entete .ic svg{width:23px;height:23px;display:block}
.horaires-entete b{text-transform:uppercase;font-size:.84rem;letter-spacing:.08em;opacity:.78}
.horaires-entete .etat-ouverture{margin-left:auto}

/* Nom distinct de .horaires-liste, qui est déjà la liste de pastilles
   centrées de la page « à emporter » : à spécificité égale, ses règles
   — plus bas dans la feuille — l'emportaient, et chaque ligne d'horaire
   se retrouvait enfermée dans une pastille cernée. */
.horaires-tableau{list-style:none;margin:0;padding:0}
/* Un service ne se coupe pas à son trait d'union (« 17h- » puis « 00h30 ») :
   la ligne ne se coupe qu'entre deux services. Voir rosa_horaires_valeur_html(). */
.h-service{white-space:nowrap}
.horaires-tableau li{display:flex;align-items:baseline;gap:10px;padding:8px 0;font-weight:700}

/* Sous 560 px, la ligne passe sur deux lignes plutôt que de forcer sa colonne
   à s'élargir. Le libellé des jours + la pastille « aujourd'hui » + les heures
   sont tous en nowrap : leur largeur minimale dépassait les 295 px de la carte
   sur un écran de 390, et la grille — dont les colonnes valent min-content par
   défaut — laissait le tout sortir de la page. C'était le seul défilement
   latéral du site. */
@media(max-width:560px){
  .horaires-tableau li{flex-wrap:wrap;gap:2px 12px}
  .horaires-tableau .h-points{display:none}
  .horaires-tableau .h-valeur{margin-left:auto}
}
.horaires-tableau .h-jours{white-space:nowrap;display:inline-flex;align-items:baseline;gap:8px}
.horaires-tableau .h-jours em{
  font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  font-size:.75rem;background:var(--noir);color:var(--creme);
  border-radius:30px;padding:3px 10px;
}
.horaires-tableau .h-points{flex:1;border-bottom:2.5px dotted rgba(0,0,0,.3);transform:translateY(-5px)}
.horaires-tableau .h-valeur{font-weight:900;white-space:nowrap}
.horaires-tableau .est-aujourdhui{
  background:var(--jaune);border-radius:14px;
  padding-inline:14px;margin-inline:-14px;
}

/* --- « Nous écrire » : deux colonnes --------------------------------------
   Le formulaire occupait la moitié gauche d'un bandeau jaune pleine largeur,
   l'autre moitié restant vide. Les trois renvois qui la remplissent désormais
   ne sont pas du décor : ils détournent vers leur page les demandes de
   réservation, de privatisation et de commande, qui arrivaient jusqu'ici par
   le formulaire de contact. */
.ecrire-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:start}
.ecrire-intro .sec-sub{margin-bottom:28px}
.ecrire-ailleurs-titre{
  font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:.8rem;
  margin-bottom:12px;opacity:.78;
}
.ecrire-ailleurs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ecrire-ailleurs a{
  display:block;text-decoration:none;color:inherit;
  background:var(--creme);border:3px solid var(--noir);border-radius:18px;padding:14px 18px;
  transition:translate .25s var(--ease-pop), background .25s;
}
.ecrire-ailleurs a:hover{translate:0 -3px;background:var(--blanc)}
.ecrire-ailleurs b{display:block;font-weight:900;font-size:.98rem}
.ecrire-ailleurs small{display:block;font-weight:700;font-size:.82rem;opacity:.72;margin-top:3px}

@media(max-width:980px){
  .ecrire-grid{grid-template-columns:1fr;gap:38px}
}


.etat-ouverture{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:40px;border:2.5px solid var(--noir);
  font-weight:900;text-transform:uppercase;font-size:.76rem;letter-spacing:.08em;
}
.etat-ouverture::before{content:'';width:10px;height:10px;border-radius:50%;background:currentColor}
.etat-ouverture.ouvert{background:var(--vert)}
.etat-ouverture.ferme{background:var(--creme);opacity:.85}

/* Écran de consentement de la carte.
   C'était un aplat jaune plein cadre, centré sur un paragraphe qui parle de
   cookies : sur la page contact, l'élément le plus imposant servait à énoncer
   une mention légale. Le cadre montre désormais un plan dessiné, et le texte
   se range dans un bandeau au bas — même information, à sa juste place. */
.map-consentement{display:flex;flex-direction:column}
.map-fond{display:block;aspect-ratio:16/9;min-height:190px}
/* Le cadrage du dessin se règle par son preserveAspectRatio="slice" :
   object-fit ne s'applique pas à un SVG écrit en ligne. */
.map-fond svg{display:block;width:100%;height:100%}
.map-panneau{
  background:var(--creme);border-top:4px solid var(--noir);
  padding:18px 22px 20px;display:flex;flex-direction:column;gap:12px;
}
.map-panneau .map-adresse{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1rem;margin:0}
.map-panneau .map-picto{display:inline-flex;color:var(--noir)}
.map-panneau .map-picto svg{width:20px;height:20px;display:block}
.map-panneau .map-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.map-panneau .map-texte{font-weight:600;font-size:.82rem;line-height:1.45;opacity:.75;margin:0}
/* Lien dans une phrase : la règle WCAG sur la taille des cibles l'exempte,
   mais 18 px de haut restent pénibles au doigt. */
.map-panneau .map-texte a{display:inline-block;padding:9px 0}
@media(max-width:640px){
  .map-panneau{padding:14px 16px 16px}
  .map-consentement .map-actions{flex-direction:column;align-items:stretch;width:100%}
}

/* --- Page réservation ---------------------------------------------------- */
.reserver-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:5vw;align-items:start}
.reserver-aside{position:sticky;top:110px}
.reserver-aside .infos-card{transform:rotate(1.5deg);border-color:var(--noir);box-shadow:12px 12px 0 var(--noir)}
.reserver-aside .infos-card h2{font-family:var(--titre);font-size:1.7rem;text-transform:uppercase;margin-bottom:16px;font-weight:400}
.reserver-aside .infos-card .btn{width:100%;text-align:center}
@media(max-width:980px){
  .reserver-grid{grid-template-columns:1fr;gap:44px}
  .reserver-aside{position:static}
  .reserver-aside .infos-card{transform:none;max-width:520px}
}



/* --- Champ à corriger après refus du serveur ------------------------------ */
.form .field.a-revoir input,
.form .field.a-revoir select,
.form .field.a-revoir textarea{border-color:#A32E22;box-shadow:4px 4px 0 #A32E22}
.form .field.a-revoir label::after{
  content:' (à corriger)';font-weight:900;color:#A32E22;
}

/* ==========================================================================
   MÉTA D'ARTICLE
   Ces classes n'existaient que dans le <style> local de blog-article.html :
   la ligne catégorie / date / temps de lecture s'affichait sans aucun style.
   ========================================================================== */
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  margin:14px 0 0;
}
.art-meta .cat{
  background:var(--noir);color:var(--creme);font-weight:900;font-size:.78rem;
  letter-spacing:.1em;padding:5px 12px;border-radius:30px;
}
.art-meta .dot{opacity:.6}
.art-meta .reading{opacity:.75}
.art-meta time{font-variant-numeric:tabular-nums}

/* --- Sur mobile, le repère de navigation ne doit pas rester vide ---------
   Sous 1 100 px, nav.main-nav>ul passe en display:none : le <nav> restait dans
   l'arbre d'accessibilité, annoncé mais totalement vide. On le retire, le menu
   réellement utilisable étant #mobileNav. Même seuil que la bascule vers le
   burger : décalés, ils laisseraient un en-tête sans aucune navigation. */
@media(max-width:1100px){
  header.site-header nav.main-nav{display:none}
}

/* ==========================================================================
   PAGES À EMPORTER, GALERIE ET LE RESTAURANT
   ========================================================================== */

/* --- À emporter : quand et où venir chercher ------------------------------
   La section était un aplat bleu pleine largeur portant trois pastilles
   d'horaires dans une colonne étroite : beaucoup de bleu pour peu de chose, et
   le troisième bandeau saturé d'affilée après le jaune des vignettes. Elle est
   sur le fond de page, dans une carte unique — un seul niveau de cadre — qui
   répond aux deux questions de qui vient chercher : quand, et où. */
/* min-width:0 sur les colonnes : sans lui, une piste de grille ne descend
   jamais sous la largeur minimale de son contenu. */
.retrait-carte > *{min-width:0}
.retrait-carte{
  display:grid;grid-template-columns:1.15fr .85fr;gap:32px 48px;
  background:var(--blanc);border:3px solid var(--noir);border-radius:28px;
  padding:32px 34px 34px;margin-top:34px;
}
.retrait-titre{
  font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;
  line-height:1;margin-bottom:16px;
}
.retrait-ligne{display:flex;gap:14px;align-items:flex-start;font-weight:700;margin-bottom:14px}
.retrait-ligne .ic{
  flex:0 0 46px;height:46px;border-radius:14px;background:var(--jaune);
  border:2.5px solid var(--noir);display:flex;align-items:center;justify-content:center;
}
.retrait-ligne .ic svg{width:23px;height:23px;display:block}
/* Le numéro de téléphone est le lien le plus utile de la page : il lui faut
   une vraie surface de doigt, pas les 22 px de sa ligne de texte. */
.retrait-ligne a{display:inline-flex;align-items:center;min-height:44px}
.retrait-actions{margin-top:20px}

@media(max-width:820px){
  .retrait-carte{grid-template-columns:1fr;gap:28px;padding:24px}
}

/* --- Galerie : les rubriques ---------------------------------------------
   Première version : une carte blanche contenant une carte de couleur,
   contenant un bouton noir, à côté de photos cernées et pivotées. Trois
   niveaux de cadre, quatre couleurs de rubrique et cinq de mosaïque — chaque
   élément criait aussi fort que son voisin, et plus rien ne se lisait.
   Règle tenue depuis : UN seul niveau de cadre par élément, la couleur en
   signal et jamais en remplissage, et aucune rotation.
   Ici les rubriques n'ont donc plus de cadre du tout : un filet noir les
   sépare, le titre est du texte sur le fond de page, et les seuls objets
   cernés sont les photos. */
.rub-intro{max-width:640px;font-size:1.12rem;font-weight:600;line-height:1.6;margin-bottom:8px}
.rub-intro p{margin:0 0 12px}
.rub-intro p:last-child{margin-bottom:0}

.rub{
  display:grid;grid-template-columns:270px 1fr;gap:24px 40px;align-items:start;
  border-top:3px solid var(--noir);padding:30px 0 34px;
}
.rub:last-child{padding-bottom:0}

.rub-titre{font-family:var(--titre);font-size:clamp(1.8rem,3.6vw,2.3rem);text-transform:uppercase;line-height:1;margin-bottom:10px}
.rub-phrase{font-weight:600;font-size:.98rem;line-height:1.55}
.rub-texte{font-weight:600;font-size:.95rem;line-height:1.55;margin-top:12px}
.rub-texte p{margin:0 0 10px}
.rub-texte p:last-child{margin-bottom:0}

/* Lien en texte souligné et non en pastille noire : quatre boutons pleins
   empilés dans la colonne de gauche tiraient l'œil avant les photos, qui sont
   pourtant le sujet de la page. */
.rub-lien{
  /* 44 px de haut : à 24, la cible tactile était sous le seuil. Le trait de
     soulignement reste collé au texte grâce au padding asymétrique. */
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;
  padding-top:14px;
  font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;
  color:var(--noir);text-decoration:none;
  border-bottom:3px solid var(--orange);padding-bottom:3px;
}
.rub-lien:hover{border-bottom-width:6px}

/* auto-fill et non auto-fit : une rubrique qui n'a qu'une photo la garde à la
   largeur d'une colonne. En auto-fit, elle prenait les 830 px de la rangée, et
   il fallait la plafonner en bandeau large : sur une photo en portrait, ce
   bandeau n'en montrait plus qu'un tiers. */
.rub-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;list-style:none;margin:0;padding:0;align-content:start}
.rub-photos figure{margin:0}
.rub-photos img{
  display:block;width:100%;height:auto;object-fit:cover;
  /* 4/5 : le format des photos du client, qui sortent d'Instagram. */
  aspect-ratio:4/5;
  border:3px solid var(--noir);border-radius:18px;
}
.rub-photos figcaption{
  margin-top:9px;font-weight:700;font-size:.86rem;line-height:1.4;opacity:.75;
}

/* Rubrique sans photo : le dessin de l'univers, posé sur le fond de page.
   Ni cadre en pointillés — qui annoncerait « site inachevé » — ni caisson
   crème, qui rajoutait une boîte là où il n'en fallait aucune. */
.rub-dessin{display:flex;align-items:center;justify-content:center;padding:10px 0}
.rub-dessin svg{
  display:block;width:min(240px,55%);height:auto;
  filter:drop-shadow(8px 9px 0 rgba(0,0,0,.14));
}

@media(max-width:900px){
  .rub{grid-template-columns:1fr;gap:20px;padding:26px 0 30px}
}
@media(max-width:640px){
  /* auto-fit là aussi : une grille fixe à deux colonnes laissait une photo
     seule occuper la moitié de l'écran, l'autre moitié vide. */
  .rub-photos{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
}

/* --- Le mur du Rosa ------------------------------------------------------
   Toutes les tuiles sont crème et cernées de noir, comme les cartes
   d'événement du reste du site : c'est une formule que le visiteur a déjà
   rencontrée ailleurs. La couleur y est un repère — pastille de date, étoiles,
   étiquette de la carte — et non un fond.
   Grille alignée plutôt que colonnes en cascade : les tuiles d'une même rangée
   partagent leur hauteur, et le mur cesse d'être une pile décalée. */
.mur{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:36px 0 0;padding:0}
.mur-tuile{
  display:flex;flex-direction:column;
  background:var(--creme);color:var(--noir);
  border:3px solid var(--noir);border-radius:22px;padding:22px 22px 20px;
}

.mur-tuile .stars{color:var(--orange);-webkit-text-stroke:.05em var(--noir);paint-order:stroke fill;font-size:1.1rem;letter-spacing:.16em;margin-bottom:10px}
.mur-tuile figure{margin:0;display:flex;flex-direction:column;height:100%}
.mur-tuile blockquote{font-weight:600;font-size:.96rem;line-height:1.55;margin:0 0 14px;flex:1}
.mur-tuile figcaption b{display:block;font-size:.94rem}
.mur-tuile figcaption small{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;opacity:.75}

.mt-etiquette{font-weight:900;text-transform:uppercase;letter-spacing:.11em;font-size:.78rem;color:var(--noir);margin-bottom:8px}
.mt-titre{display:block;font-family:var(--titre);font-size:1.45rem;text-transform:uppercase;line-height:1.05;margin-bottom:8px}
.mt-desc{font-weight:600;font-size:.92rem;line-height:1.5}
.mt-pied{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.mt-prix{font-family:var(--titre);font-size:1.35rem}
.mt-lien{display:inline-flex;align-items:flex-end;min-height:40px;padding-top:16px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;text-decoration:none;color:inherit;border-bottom:2.5px solid var(--orange)}
.mt-lien:hover{border-bottom-width:5px}

.mt-soiree{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.mt-icone{display:block;width:52px;height:52px;margin-bottom:10px}
.mt-icone svg{width:100%;height:100%;display:block}
.mt-date{
  display:inline-block;align-self:flex-start;margin-bottom:10px;padding:5px 13px;border-radius:30px;
  background:var(--bleu);color:var(--noir);
  font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;
}
.mt-soiree .mt-lien{align-self:flex-start;margin-top:auto;padding-top:14px;border-bottom-width:0;box-shadow:inset 0 -2.5px 0 var(--orange)}

@media(max-width:900px){
  .mur{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .mur{grid-template-columns:1fr;margin-top:26px}
  .mur-tuile{padding:18px}
}

/* --- Galerie : le renvoi vers Instagram -----------------------------------
   Remplace l'ancienne section Instagram sur cette page : elle réaffichait les
   quatre visuels de la personnalisation, c'est-à-dire les quatre mêmes images
   que la galerie juste au-dessus. */
.rappel-photos .rp-carte{
  /* Bridée : sur 1176 px de large, le texte s'arrêtait aux deux tiers et
     laissait un tiers de carte vide. */
  max-width:960px;margin-inline:auto;
  display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:center;
  background:var(--blanc);border:3px solid var(--noir);border-radius:30px;
  padding:34px;
}
.rp-illu{display:block}
.rp-illu svg{display:block;width:100%;height:auto}
.rp-titre{font-family:var(--titre);font-size:clamp(1.9rem,4vw,2.4rem);text-transform:uppercase;line-height:1;margin:8px 0 12px}
.rp-sous{font-weight:600;line-height:1.6;max-width:600px}
.rp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

@media(max-width:780px){
  .rappel-photos .rp-carte{grid-template-columns:1fr;padding:24px;gap:18px}
  .rp-illu{width:140px}
}

/* --- FAQ écrite avec le bloc « Détails » de WordPress ---------------------
   Le client rédige ses questions avec l'accordéon natif ; on lui donne
   l'apparence des blocs FAQ du design system. */
.article .wp-block-details{
  background:var(--blanc);color:var(--noir);
  border:3px solid var(--noir);border-radius:18px;
  box-shadow:5px 5px 0 var(--noir);
  padding:0;margin:0 0 14px;overflow:hidden;
}
.article .wp-block-details > summary{
  list-style:none;cursor:pointer;padding:20px 24px;
  font-family:var(--titre);font-size:1.25rem;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.article .wp-block-details > summary::-webkit-details-marker{display:none}
.article .wp-block-details > summary::after{
  content:'+';flex:0 0 32px;height:32px;border-radius:50%;
  background:var(--jaune);border:2.5px solid var(--noir);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  font-family:var(--texte);font-weight:900;transition:transform .3s var(--ease-pop);
}
.article .wp-block-details[open] > summary::after{
  transform:rotate(45deg);background:var(--orange);color:var(--noir);
}
.article .wp-block-details > *:not(summary){padding:0 24px;margin:0 0 18px}
.article .wp-block-details > *:not(summary):first-of-type{padding-top:2px}

/* --- Liste numérotée présentée en étapes ---------------------------------
   Le client ajoute la classe « etapes » à sa liste depuis l'éditeur. */
.article ol.etapes{
  list-style:none;counter-reset:etape;margin:34px 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;
}
.article ol.etapes li{
  position:relative;background:var(--blanc);color:var(--noir);
  border:3px solid var(--noir);border-radius:22px;
  padding:40px 24px 26px;box-shadow:6px 6px 0 var(--noir);
  font-weight:600;font-size:.95rem;line-height:1.5;margin:0;
}
.article ol.etapes li::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;top:-22px;left:22px;width:48px;height:48px;border-radius:50%;
  background:var(--orange);color:var(--noir);
  font-family:var(--titre);font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--noir);
}

/* ==========================================================================
   CIBLES TACTILES ET LISIBILITÉ SUR PETIT ÉCRAN
   La WCAG 2.2 (2.5.8) demande 24 × 24 px pour toute cible actionnable, sauf
   pour un lien inséré dans une phrase. Les liens du pied de page, les
   coordonnées et le fil d'Ariane sont des cibles à part entière : ils doivent
   s'atteindre au pouce sans viser.
   ========================================================================== */

/* --- Pied de page : 15 liens à 20 px de haut ----------------------------- */
.footer-col ul a{
  display:inline-flex;align-items:center;min-height:26px;padding:3px 0;
}
.footer-col .f-social a{min-width:44px;min-height:44px}
.footer-bottom nav a{
  display:inline-flex;align-items:center;min-height:26px;padding:3px 0;
}

/* --- Coordonnées cliquables ----------------------------------------------
   Y compris celles du pied de page, qui sont dans un <p> et non dans un
   .info-block : le téléphone et le courriel y restaient à 21 px. */
.info-block a,
.infos-card a:not(.btn),
.footer-col p a{
  display:inline-flex;align-items:center;min-height:26px;
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.breadcrumb a,
.breadcrumb [aria-current]{
  display:inline-flex;align-items:center;min-height:26px;
}

/* --- Textes trop petits --------------------------------------------------- */
.etat-ouverture{font-size:.82rem}
.map-consentement .map-adresse{font-size:.9rem}

@media(max-width:640px){
  /* Au pouce, on vise large : les listes de navigation passent à 44 px. */
  .footer-col ul a,
  .footer-bottom nav a{min-height:44px;padding:6px 0}
  .footer-col ul{gap:2px}

  .info-block a,
  .infos-card a:not(.btn),
  .footer-col p a{min-height:44px}

  /* Le corps de texte ne descend pas sous 15 px sur téléphone. */
  .footer-col p,
  .footer-col ul a,
  .footer-bottom{font-size:.95rem}
  .form p.form-note,
  .form .field-aide{font-size:.88rem}
  .dish .dish-desc{font-size:.95rem}
}

/* --- Aperçu de la carte sur l'accueil ------------------------------------
   Quatre vignettes de catégories ne disent pas ce qu'on mange. Cet encart
   montre de vrais plats avec leurs prix, avant le lien vers la carte complète. */
.apercu-carte{
  max-width:760px;margin:8px auto 44px;text-align:left;
  background:var(--blanc);border:3px solid var(--noir);border-radius:26px;
  padding:30px 34px 24px;box-shadow:10px 10px 0 var(--noir);
}
.apercu-carte .apercu-titre{
  font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
  margin:0 0 6px;color:var(--noir);
}
.apercu-carte .dish{padding:16px 4px}
.apercu-carte .dish:last-child{border-bottom:none}
@media(max-width:640px){
  .apercu-carte{padding:24px 20px 18px;border-radius:20px;box-shadow:6px 6px 0 var(--noir)}
}

/* --- Publications Instagram ----------------------------------------------
   Les visuels sont hébergés par le site : aucun script Meta, aucun cookie de
   suivi, donc rien à faire consentir avant affichage. */
/* Une colonne par publication, sur 1100 px au plus. Étirées sur toute la
   largeur, trois vignettes faisaient 427 px de côté, plus que la source de
   800 px ne sait nourrir sur un écran haute densité ; et une publication
   seule devenait un carré de 1100 px. Trois ou quatre tiennent toujours sur
   une rangée ; une ou deux gardent leur taille de trois, au centre. Les règles
   :has() sont bornées au-dessus de 640 px : leur spécificité passerait
   devant la grille à deux colonnes du téléphone. */
.insta-grid{
  list-style:none;margin:44px auto 0;padding:0;max-width:1100px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  justify-content:center;
}
@media(min-width:641px){
  .insta-grid:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .insta-grid:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,352px))}
  .insta-grid:has(> li:only-child){grid-template-columns:minmax(0,352px)}
}
.insta-grid li{margin:0}
.insta-grid .insta-card{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  border-radius:24px;border:3px solid var(--noir);text-decoration:none;
  transition:transform .35s var(--ease-pop);background:var(--jaune);
}
.insta-grid .insta-card:hover{transform:scale(1.04) rotate(1.5deg);z-index:2}
.insta-grid .insta-card img{width:100%;height:100%;object-fit:cover;display:block}
/* La légende sous la vignette, en texte simple : même traitement que les
   photos de la Galerie. */
.insta-grid .insta-legende{margin:12px 0 0;font-weight:800;font-size:1rem;line-height:1.35}
@media(max-width:640px){
  .insta-grid{grid-template-columns:1fr 1fr;gap:18px 14px}
  .insta-grid .insta-card{border-radius:18px}
  .insta-grid .insta-legende{margin-top:8px;font-size:.95rem}
  /* Nombre impair : la première vignette prend les deux colonnes, en 4:3,
     le format de sa source, plutôt que de laisser la dernière seule. */
  .insta-grid li:first-child:nth-last-child(odd){grid-column:1/-1}
  .insta-grid li:first-child:nth-last-child(odd) .insta-card{aspect-ratio:4/3}
}

/* ==========================================================================
   PIED DE PAGE
   Sur un site de restaurant, c'est la deuxième zone la plus consultée : on y
   cherche l'adresse, les horaires et le téléphone. Il est donc traité comme
   une fiche pratique, avec l'appel et la réservation en tête.
   ========================================================================== */

/* --- Bandeau d'action, d'un bord à l'autre -------------------------------- */
.footer-action{background:var(--orange);color:var(--noir);padding:22px 4vw}
.footer-action-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-action-titre{margin:0}
/* Sur l'orange, la pastille d'état passe en noir : en crème elle se confondait
   avec le texte crème qu'elle contient. */
.footer-action .etat-ouverture{background:var(--noir);color:var(--creme);border-color:var(--noir);opacity:1}
.footer-action .etat-ouverture.ouvert{background:var(--noir);color:var(--vert)}
.footer-action .etat-ouverture.ferme{background:var(--noir);color:var(--creme)}
.footer-action-boutons{display:flex;gap:12px;flex-wrap:wrap}
.footer-action-boutons .btn{border-color:var(--noir)}
.footer-action-boutons .btn-orange{background:var(--noir);color:var(--creme)}
.footer-action-boutons .btn-orange:hover{background:var(--creme);color:var(--noir)}
.footer-action-boutons .btn-creme{background:var(--creme);color:var(--noir);border-color:var(--noir)}

/* --- Colonnes -------------------------------------------------------------- */
.footer-top h2{
  font-family:var(--titre);font-size:1.15rem;text-transform:uppercase;
  margin:0 0 20px;color:var(--jaune);font-weight:400;
}
.footer-identite .footer-logo{display:inline-block;text-decoration:none;color:var(--creme)}
.footer-identite .logo-texte{font-size:2rem;line-height:1;color:var(--creme);display:block}
.footer-identite .custom-logo{height:54px;width:auto}
.footer-baseline{font-weight:600;font-size:.95rem;line-height:1.6;opacity:.8;margin:14px 0 0;max-width:30ch}

.footer-col .f-social{display:flex;gap:12px;margin-top:24px}
.footer-col .f-social a{
  width:44px;height:44px;border-radius:50%;
  background:transparent;color:var(--creme);border:2.5px solid rgba(255,246,222,.4);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .25s var(--ease-pop), background .25s, color .25s, border-color .25s;
}
.footer-col .f-social a:hover{
  transform:translateY(-4px) rotate(-8deg);
  background:var(--orange);color:var(--noir);border-color:var(--orange);
}

/* --- Colonnes « Nous trouver » et « Horaires » ------------------------------
   Les horaires vivaient sous l'adresse, dans la même colonne. Ils ont la leur,
   juste à côté : deux colonnes quand il y a la place, empilées sur téléphone. */
.footer-adresse{font-style:normal;font-weight:700;font-size:.98rem;line-height:1.6;margin:0}
.footer-itineraire{margin:12px 0 0}
.footer-itineraire a{
  font-weight:800;font-size:.88rem;color:var(--jaune);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;min-height:26px;
}
.footer-itineraire a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-horaires{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.footer-horaires li{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  font-size:.95rem;font-weight:600;max-width:290px;padding:5px 0;min-height:26px;
  border-bottom:1px solid rgba(255,246,222,.1);
}
.footer-horaires li:last-child{border-bottom:none}
.footer-horaires .fh-jours{
  font-weight:800;text-transform:uppercase;font-size:.84rem;letter-spacing:.09em;opacity:.75;
  white-space:nowrap;
}
/* Un service par ligne, alignés à droite : « 11h-15h » puis « 17h-minuit ». */
.footer-horaires .fh-heures{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap}
/* Le happy hour : une ligne de texte, sans pastille ni couleur de signal. La
   taille et l'opacité sont celles de « .footer-col p », qui l'emporte de toute
   façon et garde ses 15 px minimum sur téléphone. */
.footer-happy-hour{margin:14px 0 0;max-width:290px}
/* Quand la ligne ne tient pas, elle se coupe entre les heures et les jours. */
.footer-happy-hour span{display:inline-block}
.footer-mail{margin:12px 0 0}
.footer-mail a{font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;min-height:26px}

/* Cinq colonnes jusqu'à 1081 px : la gouttière se resserre pour laisser au
   courriel et aux horaires la largeur dont ils ont besoin. */
@media(max-width:1280px){
  .footer-top{gap:36px}
}
@media(max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .footer-identite{grid-column:1/-1}
}
@media(max-width:980px){
  .footer-action-inner{flex-direction:column;align-items:stretch}
  .footer-action-boutons{width:100%}
  .footer-action-boutons .btn{flex:1;text-align:center}
}
@media(max-width:640px){
  .footer-top{grid-template-columns:1fr;gap:36px;padding:48px 6vw 40px}
  .footer-action{padding:20px 6vw}
  .footer-bottom{padding:22px 6vw 80px}
  .footer-action-boutons{flex-direction:column}
  .footer-identite .logo-texte{font-size:1.75rem}
  .footer-horaires li{max-width:none}
}


/* ==========================================================================
   CIBLES TACTILES — audit UX du 2026-08-21
   ==========================================================================
   Le thème traitait déjà le sujet, mais ne basculait à 44 px qu'en dessous de
   640 px : la tablette en portrait (768 px) passait entre les mailles et
   gardait des liens de 26 px de haut. Mesuré au doigt, à 375 et 768 px :
   bouton de menu 44×38, fil d'Ariane 26, logo du pied 28, colonnes du pied 26,
   itinéraire et courriel 26, filtres de l'agenda 43, pseudo Instagram 39.

   La largeur est de toute façon un mauvais indicateur du tactile : une tablette
   de 1024 px et un portable à écran tactile tapent au doigt eux aussi. On vise
   donc les deux — la bande étroite, et tout pointeur grossier.

   Les sélecteurs reprennent volontairement ceux de la section « cibles
   tactiles » du thème : à spécificité égale, c'est l'ordre qui tranche, et ce
   bloc est le dernier. Élargir un sélecteur (.footer-top a) le ferait au
   contraire passer DERRIÈRE .footer-col ul a — essai fait, régression à la clé.
   On agrandit la zone tapable, jamais la taille du texte. */
@media(max-width:980px), (pointer:coarse){
  /* 3 barres de 4 px + 2 gouttières de 5 px + 8 px de marge = 38 px de haut.
     C'est la commande la plus utilisée du site sur téléphone. */
  .burger{min-height:44px;justify-content:center;align-items:center}

  .footer-col ul a,
  .footer-bottom nav a{min-height:44px;padding:6px 0}
  .footer-col ul{gap:2px}

  .info-block a,
  .infos-card a:not(.btn),
  .footer-col p a,
  .footer-itineraire a,
  .footer-mail a{min-height:44px}

  .breadcrumb a,
  .breadcrumb [aria-current]{min-height:44px}

  /* « Italien » ne fait que 43 px de large une fois la puce dessinée : WCAG
     mesure les deux côtés, la hauteur seule ne suffit pas. */
  .cat-switch a,
  .gal-filter button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* En inline-flex, l'espace entre l'emoji et le nom disparaît : « 🍔BURGERS »
     (recette mobile du 2026-09-17). */
  .cat-switch a{gap:.5em}

  .social-handle,
  .footer-identite .footer-logo{min-height:44px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   HERO VEDETTE (pages de carte et agenda) — refonte du 2026-08-21
   ==========================================================================
   Mesuré avant : 1440 × 463 px d'aplat, le plus large bloc de texte en
   occupant 333 — 1 050 px de vide à droite, soit 73 % de la largeur, et pas
   un élément de décor. On remplit avec ce que la page possède déjà : l'emoji
   du terme, des repères tirés de la base, et les puces de catégorie, qui
   traînaient 32 px plus bas sur le crème alors qu'elles appartiennent au bloc.
   Le titre reprend le cartouche jaune incliné des intertitres de section. */
.hero-vedette{overflow:hidden;padding-bottom:38px}
.hero-vedette .ph-inner{position:relative;z-index:2}

.hero-vedette h1{
  /* display:table et non inline-block : un cartouche en ligne se rangerait à
     côté de ce qui le précède au lieu de passer dessous. table est de niveau
     bloc, il force le retour à la ligne, tout en gardant une largeur ajustée
     au texte, ce que block ne ferait pas. */
  display:table;background:var(--jaune);color:var(--noir);
  border:3px solid var(--noir);border-radius:16px;
  padding:6px 26px 10px;transform:rotate(-1.6deg);
  box-shadow:7px 8px 0 rgba(0,0,0,.22);
  margin:14px 0 20px;
}
.hero-vedette .ph-lead{max-width:520px}

/* L'illustration vectorielle de l'univers. Elle a remplacé un emoji géant :
   les polices d'emoji sont des bitmaps — Apple Color Emoji plafonne à 160 px —
   et le hero en demandait 272, soit un agrandissement de 1,7 fois. Le flou
   était inévitable, et un pictogramme système ne fait de toute façon pas un
   parti pris graphique. */
.hero-illustration{
  position:absolute;right:3vw;top:46%;translate:0 -50%;
  width:272px;z-index:1;pointer-events:none;user-select:none;
  transform:rotate(-8deg);
  filter:drop-shadow(12px 14px 0 rgba(0,0,0,.16));
}
.hero-illustration svg{display:block;width:100%;height:auto}

/* Repli pour une catégorie créée après coup, sans illustration dédiée :
   l'emoji reste sous sa définition native, donc net. Il remplit moins, mais
   il ne bave pas. */
.hero-emoji{
  position:absolute;right:4vw;top:46%;translate:0 -50%;
  font-size:150px;line-height:1;transform:rotate(-8deg);
  z-index:1;pointer-events:none;user-select:none;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.16));
}

.hero-reperes{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  list-style:none;margin:0 0 22px;padding:0;
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;
}
.hero-reperes li{display:inline-flex;align-items:center;gap:9px}
.hero-reperes li::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor}
/* Ni le paragraphe ni la liste n'avaient de marge : 0 px entre les deux,
   mesuré sur les huit pages à repères (recette du 2026-09-17). */
.ph-lead + .hero-reperes{margin-top:16px}

/* Les puces sont désormais sur un aplat coloré, et non plus sur le crème :
   il leur faut leur propre fond pour rester lisibles sur les quatre teintes. */
.hero-vedette .cat-switch{margin:0;justify-content:flex-start}
.hero-vedette .cat-switch a{background:var(--creme);border-color:var(--noir);color:var(--noir)}
.hero-vedette .cat-switch a[aria-current="page"]{background:var(--noir);color:var(--creme);border-color:var(--noir)}
/* Sur le hero noir, la puce noire de la page courante disparaissait dans le
   fond : elle ne se distinguait plus que par son filet, alors qu'elle doit
   être la plus visible des cinq. Elle reprend le jaune du cartouche. */
.hero-vedette.on-noir .cat-switch a[aria-current="page"]{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.hero-vedette .cat-switch a:hover{background:var(--jaune);color:var(--noir)}

@media(max-width:1100px){
  .hero-illustration{width:208px;right:-1vw}
  .hero-emoji{font-size:130px;right:-1vw}
}
@media(max-width:900px){
  /* Sous cette largeur le texte occupe toute la ligne : il n'y a plus de vide
     à combler, et un visuel centré verticalement passerait derrière les mots.
     Il remonte en filigrane derrière le cartouche du titre, qui est opaque. */
  .hero-illustration{width:168px;top:88px;bottom:auto;right:-1.5rem;translate:0 0;transform:rotate(-6deg)}
  .hero-emoji{font-size:110px;top:96px;bottom:auto;right:-1.5rem;translate:0 0;transform:rotate(-6deg)}
}
@media(max-width:640px){
  .hero-vedette h1{padding:5px 18px 8px}
  .hero-illustration{width:132px;top:82px;right:-1rem}
  .hero-emoji{font-size:96px;top:88px;right:-1rem}
}
/* La carte : depuis le 2026-09-17, le couteau est posé tout à droite du
   dessin, et non plus croisé derrière le menu. Le débord des autres
   illustrations (1 à 1,5 rem hors de l'écran) le coupait en deux sur
   tablette et sur téléphone : celle-ci reste dans le cadre. */
@media(max-width:900px){
  .hero-illustration.illu-carte{right:.25rem}
}
/* Sous 900 px, le dessin est sur la ligne du fil d'Ariane : un nom de page
   long (« Burgers & Brasserie », le titre d'une soirée) passait dessous
   (recette mobile du 2026-09-17). Le fil garde à sa droite la place du
   dessin, mesurée de 320 à 900 px avec quelques pixels d'air, et passe à la
   ligne avant. Le dessin de la carte, collé au bord, en prend davantage. */
@media(max-width:900px){
  .hero-illustration ~ .ph-inner .breadcrumb,
  .hero-emoji ~ .ph-inner .breadcrumb{padding-right:134px}
  .hero-illustration.illu-carte ~ .ph-inner .breadcrumb{padding-right:162px}
}
@media(max-width:640px){
  .hero-illustration ~ .ph-inner .breadcrumb,
  .hero-emoji ~ .ph-inner .breadcrumb{padding-right:110px}
  .hero-illustration.illu-carte ~ .ph-inner .breadcrumb{padding-right:130px}
}

/* ==========================================================================
   VIGNETTES D'UNIVERS — illustration au lieu de l'emoji
   ==========================================================================
   La page pilier, l'accueil et la page à emporter montraient les quatre
   univers avec l'emoji du terme. Ils sont désormais illustrés par le même
   dessin que le hero de la page correspondante : à 99 px l'emoji n'était pas
   flou — on reste sous les 160 px de définition d'Apple Color Emoji — mais il
   détonnait à côté des heros illustrés.
   Le repli emoji garde son ancienne taille : lui n'a pas de raison de grandir. */
/* .bg couvre toute la carte, étiquette comprise — laquelle est opaque et passe
   devant. Centrer l'illustration sur la carte entière la faisait disparaître
   par le bas sur téléphone : la vignette y fait 190px de haut et l'étiquette en
   prend jusqu'à 100 quand le titre passe sur deux lignes.
   On ancre donc le dessin en haut, avec un décalage proportionnel : quelle que
   soit la hauteur de l'étiquette, il ne descend jamais jusqu'à elle. */
.menu-card .bg{align-items:flex-start;padding-top:12%}
.menu-card .bg svg{width:60%;max-width:200px;height:auto;display:block}
.menu-card .bg .bg-emoji{font-size:6.2rem;line-height:1}

@media(max-width:640px){
  .menu-card .bg{padding-top:8%}
  .menu-card .bg svg{width:40%}
  .menu-card .bg .bg-emoji{font-size:3.6rem}
}

/* ==========================================================================
   ILLUSTRATIONS ANIMÉES
   ==========================================================================
   Le dynamisme sans vidéo : les illustrations sont vectorielles, on anime
   leurs parties. Coût réel, quelques centaines d'octets de CSS — contre 2 à
   5 Mo pour un film, sur des pages dont le HTML pèse 29 Ko. Aucun fichier,
   aucune requête, aucun rendu.
   Les transformations portent sur transform et opacity uniquement, les deux
   propriétés que le navigateur compose sans recalculer la mise en page.
   Le bloc prefers-reduced-motion déjà présent plus haut neutralise tout ceci
   pour qui en a besoin : il coupe animation-duration et iteration-count. */
.hero-illustration svg [class*="anim-"],
.menu-card .bg svg [class*="anim-"]{transform-box:fill-box;transform-origin:center}

/* Bougies : chaque flamme a sa durée, sinon les trois battent ensemble et on
   voit le mécanisme. L'amplitude reste sous les 5px du halo, pour que la
   flamme ne déborde jamais de sa lueur. */
.anim-flamme{transform-origin:50% 100%;animation:rosa-flamme 1.7s ease-in-out infinite}
.anim-flamme.f2{animation-duration:2.3s;animation-delay:-.6s}
.anim-flamme.f3{animation-duration:1.9s;animation-delay:-1.2s}
@keyframes rosa-flamme{
  0%,100%{transform:scale(1)}
  50%{transform:scale3d(.94,1.1,1)}
}

/* Boule à facettes : ce sont les éclats et les rayons qui tournent, pas la
   sphère — faire pivoter un cercle ne produit rien à l'écran. */
.anim-eclats{animation:rosa-eclats 5.5s steps(4, jump-none) infinite}
@keyframes rosa-eclats{0%{opacity:.9}25%{opacity:.35}50%{opacity:.75}75%{opacity:.45}100%{opacity:.9}}
.anim-rayons{animation:rosa-rayons 3.4s ease-in-out infinite}
@keyframes rosa-rayons{0%,100%{opacity:.95}50%{opacity:.4}}

/* Vapeur : elle monte et s'atténue. Halo et trait bougent ensemble, ils sont
   dans le même groupe. */
.anim-vapeur{animation:rosa-vapeur 3.6s ease-in-out infinite}
@keyframes rosa-vapeur{
  0%,100%{transform:translateY(3px);opacity:.6}
  50%{transform:translateY(-5px);opacity:1}
}

/* Bulles : elles remontent dans le verre puis reparaissent en bas. */
.anim-bulle{animation:rosa-bulle 3.8s ease-in-out infinite}
.anim-bulle.b2{animation-duration:4.6s;animation-delay:-1.5s}
.anim-bulle.b3{animation-duration:3.1s;animation-delay:-2.3s}
@keyframes rosa-bulle{
  0%{transform:translateY(8px);opacity:0}
  30%{opacity:.9}
  100%{transform:translateY(-16px);opacity:0}
}

/* ==========================================================================
   MONTAGE DU BURGER — séquence de motion design, jouée par le navigateur
   ==========================================================================
   Une vraie séquence animée, pas un fichier vidéo : nette à toute taille,
   quelques centaines d'octets, aucun rendu, aucune lecture automatique à
   négocier. Le dessin est déjà construit en couches empilées, chacune un
   chemin distinct — il suffisait de les faire arriver l'une après l'autre.

   Le montage se fait DANS L'ORDRE DE LA CUISINE : pain du bas, steak,
   fromage, tomate, salade, pain du haut, graines. L'ordre de peinture du SVG
   est l'inverse, mais les délais le rétablissent dans le temps.

   Elle ne joue qu'une fois : une boucle infinie sur un élément de cette taille
   deviendrait vite fatigante.

   Deux familles de dessins la jouent, AU MÊME RYTHME : les vignettes des
   univers (accueil, page carte) et les dessins des heroes (catégories de la
   carte, agenda, privatisation, « Le restaurant »). Jusqu'au 2026-09-16, les
   heroes gardaient l'ancien montage rapide, 0,52 s par couche et 0,09 s
   d'écart, fini en moins d'une seconde, quand les vignettes venaient d'être
   ralenties. Pour un hero, le dessin est à l'écran dès l'arrivée : main.js
   attend donc aussi la fin de l'écran d'ouverture, sinon le montage se jouait
   dessous. */

/* LES VIGNETTES DES UNIVERS (burger, pizza, bol, cocktail) se montent SOUS LES
   YEUX, et lentement.

   Avant : 0,42 s par couche, 0,06 s d'écart entre deux couches, le tout lancé
   par l'apparition de la carte au seuil de 16 %. Le dessin est en haut de la
   carte : sur un défilement normal, le montage était fini avant d'arriver à
   l'écran, et quand on le voyait, les couches arrivaient ensemble, en un seul
   flou. Le client : « on ne voit pas le côté sympa ».

   Maintenant :
   - le départ attend que le DESSIN soit visible à 80 % (main.js, classe
     `en-montage`), puis marque un temps de 0,25 s ;
   - chaque couche tombe, s'écrase à la pose, rebondit un peu et se tasse :
     0,8 s par couche, 0,2 s d'écart. Les poses s'entendent une par une, comme
     on monte un burger. Un dessin complet prend environ 2 s au lieu de 0,85 ;
   - quand plusieurs cartes démarrent ensemble (une rangée entière sur
     ordinateur), main.js les décale de 0,35 s chacune, par `--carte` ;
   - avant le départ, les couches attendent invisibles. Seulement si
     JavaScript tourne (`html.js`), comme les apparitions `.reveal`.

   `transform-origin` en bas de chaque couche : c'est là qu'elle touche, c'est
   donc de là qu'elle s'écrase. Le `translateY` est en unités du dessin
   (viewBox de 200) : la chute reste proportionnelle à la taille de la
   vignette, sur téléphone comme sur ordinateur. */
.menu-card .bg svg,
.hero-illustration svg{overflow:visible}
.menu-card .bg .mont,
.hero-illustration .mont{transform-box:fill-box;transform-origin:50% 100%}
html.js .menu-card .bg .mont,
html.js .hero-illustration .mont{opacity:0}
html.js .menu-card.en-montage .bg .mont,
html.js .hero-illustration.en-montage .mont{
  animation:rosa-pose .8s linear both;
  animation-delay:calc(.25s + var(--carte, 0s) + var(--couche, 0s));
}
.menu-card .bg .c1, .hero-illustration .c1{--couche:0s}
.menu-card .bg .c2, .hero-illustration .c2{--couche:.2s}
.menu-card .bg .c3, .hero-illustration .c3{--couche:.4s}
.menu-card .bg .c4, .hero-illustration .c4{--couche:.6s}
.menu-card .bg .c5, .hero-illustration .c5{--couche:.8s}
.menu-card .bg .c6, .hero-illustration .c6{--couche:1s}
.menu-card .bg .c7, .hero-illustration .c7{--couche:1.2s}
.menu-card .bg .c8, .hero-illustration .c8{--couche:1.4s}

/* Les courbes sont posées keyframe par keyframe : chute qui accélère, pose
   qui écrase, petit rebond, tassement. */
@keyframes rosa-pose{
  0%  {opacity:0;transform:translateY(-70px) scale(.96,1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  10% {opacity:1}
  46% {transform:translateY(0) scale(.96,1.06);animation-timing-function:cubic-bezier(0,0,.4,1)}
  56% {transform:translateY(0) scale(1.08,.88);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  72% {transform:translateY(-7px) scale(.98,1.03);animation-timing-function:cubic-bezier(.5,0,.7,.4)}
  86% {transform:translateY(0) scale(1.02,.98);animation-timing-function:ease-out}
  100%{opacity:1;transform:none}
}

/* Mouvement réduit, ou animations coupées au pied de page : le dessin est
   simplement là, monté. Les sélecteurs reprennent ceux du montage pour
   l'emporter par l'ordre, sans `!important`. */
@media (prefers-reduced-motion:reduce){
  html.js .menu-card .bg .mont,
  html.js .menu-card.en-montage .bg .mont,
  html.js .hero-illustration .mont,
  html.js .hero-illustration.en-montage .mont{opacity:1;animation:none}
}
html.anim-off .menu-card .bg .mont,
html.anim-off .menu-card.en-montage .bg .mont,
html.anim-off .hero-illustration .mont,
html.anim-off .hero-illustration.en-montage .mont{opacity:1;animation:none}

/* ==========================================================================
   LA CARTE QUI S'ÉCRIT (hero de /la-carte/)
   ==========================================================================
   Le client voulait un dessin animé à cet endroit. Le menu, son bandeau, la
   fourchette et le couteau tombent avec le montage ci-dessus (`mont c1` à
   `c4`). Ensuite seulement, chaque ligne de plat s'écrit de gauche à droite :
   le nom, les points de conduite, puis le prix.

   Le tracé passe par stroke-dashoffset, sur des chemins en `pathLength="1"` :
   la longueur réelle du trait ne compte plus. `1 2` et `1.01` plutôt que `1`
   et `1` : un tiret de longueur nulle garde sa terminaison ronde, et chaque
   ligne montrait un point avant de s'écrire. Même garde que la façade de
   l'accueil (ae-filet).

   La première ligne part quand le bandeau est posé, 1,05 s après le départ
   du montage, et les suivantes toutes les 0,3 s. Le dessin est complet en
   3 s environ. Il ne joue qu'une fois, comme les autres. */
.hero-illustration .l1{--ligne:1.05s}
.hero-illustration .l2{--ligne:1.35s}
.hero-illustration .l3{--ligne:1.65s}
.hero-illustration .l4{--ligne:1.95s}
html.js .hero-illustration .ecrit{stroke-dasharray:1 2;stroke-dashoffset:1.01}
html.js .hero-illustration .points{opacity:0}
html.js .hero-illustration.en-montage .ecrit{
  animation:rosa-ecrit .4s cubic-bezier(.45,0,.25,1) both;
  animation-delay:calc(.25s + var(--carte, 0s) + var(--ligne, 0s));
}
html.js .hero-illustration.en-montage .points{
  animation:rosa-apparait .2s linear both;
  animation-delay:calc(.55s + var(--carte, 0s) + var(--ligne, 0s));
}
html.js .hero-illustration.en-montage .ecrit.prix{
  animation-duration:.25s;
  animation-delay:calc(.7s + var(--carte, 0s) + var(--ligne, 0s));
}
@keyframes rosa-ecrit{from{stroke-dashoffset:1.01}to{stroke-dashoffset:0}}
@keyframes rosa-apparait{from{opacity:0}to{opacity:1}}

/* Mouvement réduit, animations coupées, ou pas de JavaScript (aucune règle
   ci-dessus ne s'applique sans `html.js`) : la carte est déjà écrite. */
@media (prefers-reduced-motion:reduce){
  html.js .hero-illustration .ecrit,
  html.js .hero-illustration.en-montage .ecrit{stroke-dashoffset:0;animation:none}
  html.js .hero-illustration .points,
  html.js .hero-illustration.en-montage .points{opacity:1;animation:none}
}
html.anim-off .hero-illustration .ecrit,
html.anim-off .hero-illustration.en-montage .ecrit{stroke-dashoffset:0;animation:none}
html.anim-off .hero-illustration .points,
html.anim-off .hero-illustration.en-montage .points{opacity:1;animation:none}

/* La scène animée de la privatisation (« On pousse les tables, le reste
   suit ») a été retirée le 2026-09-17 à la demande du client, avec ses règles
   et ses @keyframes sc-*, qui ne servaient qu'à elle. */

/* Suite du correctif de .split : cette règle doit venir APRÈS
   « .split-media img{height:480px} », sinon la hauteur fixe l'emporte à
   spécificité égale — c'est l'ordre qui tranche. Placée plus haut, elle ne
   servait à rien : le cadre s'étirait à 861px mais l'image restait à 543,
   laissant 318px de cadre vide. */
@media(min-width:981px){
  /* L'image est sortie du flux : en hauteur:100% elle retombait, pendant le
     calcul intrinsèque de la grille, sur la hauteur NATURELLE du fichier —
     733px pour la seconde photo — et gonflait la rangée de 533 à 762px.
     En position absolue elle ne pèse plus dans le calcul : la rangée est
     dictée par le texte, et l'image remplit ce qu'on lui donne. */
  .split-media{min-height:480px}
  .split-media img{position:absolute;inset:0;width:100%;height:100%}
}

/* ==========================================================================
   À EMPORTER : LA FAÇADE DESSINÉE (accueil)
   ==========================================================================
   La façade prend la place de la photo ; le scooter et sa route vivent sur un
   calque qui couvre la section, sous le texte et le bouton. Balisage :
   template-parts/a-emporter-anim.php. Script : assets/js/a-emporter.js,
   chargé sur l'accueil seulement.
   Ces règles sont ici et non dans une feuille à part : moins d'un Ko
   compressé, pas de quoi payer une requête bloquante de plus. Elles suivent
   le correctif de .split ci-dessus, dont elles reprennent la hauteur sur
   ordinateur. */
.split-media.ae-media{border-color:transparent;border-radius:0;box-shadow:none;transform:none;overflow:visible}
.ae-facade{display:block;width:100%;height:480px;overflow:visible;--ae-t:3.3px}
@media(min-width:981px){.ae-facade{position:absolute;inset:0;height:100%}}
@media(max-width:980px){
  /* Section empilée : le dessin passe SOUS le bouton. On lit le texte, puis
     le bouton, et le scooter descend du bouton jusqu'à la façade. */
  .split.rev .split-media.ae-media{order:2}
  /* La case prend la hauteur du dessin. Les 360 et 260 px de la photo qu'elle
     remplaçait laissaient 110 à 125 px de vide au-dessus de la façade. */
  .ae-facade{height:auto;aspect-ratio:750/340}
}
@media(max-width:640px){.ae-facade{--ae-t:3.8px}}
.ae-facade path,.ae-calque path,.ae-calque circle{fill:none;stroke:var(--noir);stroke-width:var(--ae-t);stroke-linecap:round;stroke-linejoin:round}
.ae-facade .ae-disque,.ae-calque .ae-boite{fill:var(--orange)}
.ae-facade .ae-point{stroke-width:calc(var(--ae-t)*1.8)}
.ae-scene{position:relative;isolation:isolate}
.ae-calque{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none;visibility:hidden}
.ae-calque.ae-pret{visibility:visible}
.ae-route{stroke-dasharray:7 9}
/* « Plus dynamique » (2026-09-17) : bouffées d'échappement crème, disque de
   l'enseigne qui gonfle autour de son centre, et un petit coup de gaz du
   scooter garé toutes les 5 s, une fois l'animation finie (.ae-fini, posée
   par le script, jamais en mouvement réduit ni animations coupées). */
.ae-calque .ae-fumee{fill:var(--creme);stroke-width:calc(var(--ae-t)*.75)}
.ae-facade .ae-disque{transform-box:fill-box;transform-origin:center}
.ae-carrosserie{transform-box:fill-box;transform-origin:50% 100%}
.ae-fini .ae-carrosserie{animation:ae-gaz 5s ease-in-out 1.2s infinite}
@keyframes ae-gaz{
  0%,78%,100%{transform:none}
  82%{transform:translateY(-5px) rotate(-4deg)}
  86%{transform:none}
  90%{transform:translateY(-3px) rotate(-2deg)}
  94%{transform:none}
}
@media (prefers-reduced-motion:reduce){.ae-fini .ae-carrosserie{animation:none}}
html.anim-off .ae-fini .ae-carrosserie{animation:none}
.ae-scooter *{vector-effect:non-scaling-stroke}
@media(max-width:640px){.ae-route{stroke-dasharray:5 7}}
/* Les traits attendent le script, qui prend la main (.ae-pilote) ou, s'il
   renonce, laisse le dessin entier. Filet s'il ne vient jamais : cinq secondes. */
html.js .ae-facade path{stroke-dasharray:1 2}
html.js .ae-facade:not(.ae-pilote) path{stroke-dashoffset:1.01;animation:ae-filet 0s 5s forwards}
html.js .ae-facade:not(.ae-pilote) .ae-disque{fill-opacity:0}
@keyframes ae-filet{to{stroke-dashoffset:0;fill-opacity:1}}

/* ==========================================================================
   LES FORMES DÉCORATIVES DEVIENNENT ORGANIQUES
   ==========================================================================
   Elles ne faisaient que monter et descendre de 30 px. Et comme ce sont des
   DISQUES PARFAITS, rien d'autre ne pouvait s'y voir : une rotation sur un
   cercle ne produit aucune image.
   On déforme donc le rayon des quatre coins indépendamment — la forme respire
   au lieu de flotter — et une fois qu'elle n'est plus ronde, la rotation
   devient enfin lisible. Elle est ajoutée à l'animation « float » existante
   plutôt qu'à côté : deux animations sur la même propriété transform
   s'écraseraient, la dernière déclarée l'emportant.
   Quatre durées différentes, sans quoi les formes respirent à l'unisson et on
   voit le mécanisme au lieu de voir du mouvement.
   Le bloc prefers-reduced-motion, plus haut, neutralise l'ensemble. */
@keyframes float{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
  50%{transform:translateY(-30px) scale(1.04) rotate(7deg)}
}

@keyframes rosa-blob{
  0%,100%{border-radius:48% 52% 55% 45% / 52% 46% 54% 48%}
  25%    {border-radius:61% 39% 37% 63% / 43% 59% 41% 57%}
  50%    {border-radius:39% 61% 65% 35% / 61% 41% 59% 39%}
  75%    {border-radius:55% 45% 41% 59% / 37% 57% 43% 63%}
}

.page-hero .b-jaune{animation:float 9s ease-in-out infinite, rosa-blob 17s ease-in-out infinite}
.page-hero .b-bleu{animation:float 11s ease-in-out infinite reverse, rosa-blob 13s ease-in-out -5s infinite}
.blob1{animation:float 9s ease-in-out infinite, rosa-blob 19s ease-in-out -3s infinite}
.blob2{animation:float 11s ease-in-out infinite reverse, rosa-blob 15s ease-in-out -8s infinite}

/* ==========================================================================
   LISTES DES ARTICLES : la puce prend le langage du site
   ==========================================================================
   Les listes de contenu s'affichaient avec la puce grise du navigateur, seul
   élément du site à ne pas être dessiné. Elles reprennent la pastille jaune
   cerclée de noir déjà utilisée par les listes à cocher — même vocabulaire,
   sans en faire des cartes : ce sont des phrases, pas des blocs. */
.article ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:14px}
.article ul li{position:relative;padding-left:36px;margin-bottom:0;line-height:1.65}
.article ul li::before{
  content:'';position:absolute;left:0;top:.42em;
  width:17px;height:17px;border-radius:50%;
  background:var(--jaune);border:2.5px solid var(--noir);
}
/* Sur fond jaune la pastille disparaîtrait : elle passe en crème. */
.bg-jaune .article ul li::before{background:var(--creme)}
/* La liste à cocher de /privatisation/ est écrite dans le gabarit, à
   l'intérieur de .article : elle recevait cette pastille EN PLUS de sa coche
   ronde, d'où deux ronds par ligne. Elle garde sa coche et son alignement. */
.article ul.checks li{padding-left:0}
.article ul.checks li::before{content:none}

/* ==========================================================================
   PARALLAXE AU DÉFILEMENT — sans dépendance

   Remplace GSAP + ScrollTrigger, 113,5 Ko servis sur presque chaque page pour
   trois effets décoratifs. Les navigateurs savent les faire seuls depuis les
   chronologies de défilement ; l'animation tourne alors sur le compositeur,
   hors du fil principal, ce que GSAP ne pouvait pas offrir.

   DEUX GARDE-FOUS, tous deux indispensables :

   - `@supports` : sans lui, un navigateur qui ignore `animation-timeline`
     exécuterait quand même l'animation, sur la chronologie du document et donc
     d'un seul coup. Les taches resteraient décalées de 90 px en permanence.
     Mieux vaut aucun mouvement qu'un décor faux.
   - `no-preference` : le bloc `prefers-reduced-motion` du haut de cette feuille
     ramène les durées à .001s, ce qui ne suffit pas ici — la progression d'une
     animation de défilement ne vient pas de sa durée mais du scroll. Il faut
     donc s'exclure explicitement.

   Le conteneur nomme la chronologie, l'élément la consomme : c'est ainsi que la
   tache suit la course de SA section, et non la sienne propre — le
   comportement exact qu'avait ScrollTrigger avec `trigger: closest('section')`.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .hero { view-timeline-name: --rosa-hero; }
    .page-hero { view-timeline-name: --rosa-page-hero; }
    .split-media, .privat-img { view-timeline-name: --rosa-media; }

    @keyframes rosa-derive { from { translate: 0 0; } to { translate: 0 90px; } }
    @keyframes rosa-derive-media { from { translate: 0 -3%; } to { translate: 0 3%; } }

    /* Les taches de l'accueil portent DÉJÀ `float`, qui réécrit `transform` en
       continu. On anime donc `translate`, propriété distincte qui se compose
       avec elle au lieu de se battre — c'est la raison pour laquelle GSAP le
       faisait aussi. Les deux animations coexistent, chacune sur sa propre
       chronologie, d'où les listes de valeurs. */
    .blob1,
    .blob2 {
      animation-name: float, rosa-derive;
      animation-duration: 9s, auto;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, --rosa-hero;
      animation-range: normal, cover;
    }

    .blob2 {
      animation-duration: 11s, auto;
      animation-direction: reverse, normal;
    }

    /* Les taches des pages intérieures n'ont pas de `float` : cas simple. */
    .page-hero .ph-blob {
      animation: rosa-derive linear both;
      animation-timeline: --rosa-page-hero;
      animation-range: cover;
    }

    /* Dérive douce des images encadrées. L'image est surdimensionnée en CSS
       (`scale:1 1.08`) précisément pour que ce décalage ne découvre jamais le
       fond du cadre. */
    .split-media img,
    .privat-img img {
      animation: rosa-derive-media linear both;
      animation-timeline: --rosa-media;
      animation-range: cover;
    }
  }
}

/* ==========================================================================
   PRIVATISATION : LES OCCASIONS, EN CARTES QUI SE RETOURNENT (2026-09-17)
   ==========================================================================
   Demande du client : trois colonnes d'exemples (anniversaire, entreprise, et
   une troisième, « entre amis ») qu'on retourne au passage de la souris.
   - Recto : le dessin sur un aplat de la charte, puis l'occasion sur le
     crème, comme les vignettes de la carte. Un seul cadre.
   - Verso : ce qu'on prévoit, et le lien vers le devis.
   Les deux faces sont empilées dans la même case de grille : la carte prend
   la hauteur de la plus haute, sans hauteur écrite en dur.
   On retourne : au survol quand il existe (souris), au clavier dès que le
   lien du verso reçoit le focus, au doigt par un toucher (main.js, classe
   `retournee`). La face cachée ne reçoit pas les clics : sans cela, un
   toucher sur le recto pouvait suivre le lien du verso.
   Pas d'`overflow:hidden` sur les faces : dans Safari, il annule
   `backface-visibility`, et le verso transparaissait en miroir. */
.occasions{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.occasion{perspective:1400px}
.occasion-carte{display:grid;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.occasion-recto,.occasion-verso{
  grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:3px solid var(--noir);border-radius:26px;box-shadow:8px 8px 0 var(--noir);
}
.occasion-recto{display:flex;flex-direction:column;background:var(--creme)}
.occasion-dessin{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:28px 0 20px;border-radius:23px 23px 0 0}
.o-rose .occasion-dessin{background:var(--rose)}
.o-orange .occasion-dessin{background:var(--orange)}
.o-bleu .occasion-dessin{background:var(--bleu)}
.occasion-dessin svg{width:58%;max-width:180px;height:auto;display:block;overflow:visible}
.occasion-bas{border-top:3px solid var(--noir);padding:18px 22px 20px;text-align:center}
.occasion-titre{font-family:var(--titre);font-weight:900;font-size:1.95rem;text-transform:uppercase;line-height:1;margin:0 0 8px}
.occasion-accroche{margin:0;font-weight:700;font-size:.97rem;line-height:1.45}
.occasion-indice{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:900;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--noir)}
.occasion-fleche{font-size:1.05rem;line-height:1}
.occasion-verso{
  transform:rotateY(180deg);pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:var(--blanc);padding:30px 28px;
}
/* La couleur de la carte, en signal : un filet en haut du verso. */
.o-rose .occasion-verso{box-shadow:8px 8px 0 var(--noir),inset 0 12px 0 var(--rose)}
.o-orange .occasion-verso{box-shadow:8px 8px 0 var(--noir),inset 0 12px 0 var(--orange)}
.o-bleu .occasion-verso{box-shadow:8px 8px 0 var(--noir),inset 0 12px 0 var(--bleu)}
/* Le titre du verso est un <p> : le sélecteur reprend `p` pour passer devant
   la règle des paragraphes du verso, qui lui imposait 1rem. */
.occasion-verso p{margin:0;font-weight:600;font-size:1rem;line-height:1.6}
.occasion-verso p.occasion-verso-titre{font-family:var(--titre);font-weight:900;font-size:1.9rem;text-transform:uppercase;line-height:1}
.occasion-lien{
  align-self:flex-start;display:inline-flex;align-items:flex-end;gap:8px;min-height:44px;
  font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;
  color:var(--noir);text-decoration:none;box-shadow:inset 0 -3px 0 var(--orange);
}
.occasion-lien:hover,.occasion-lien:focus-visible{box-shadow:inset 0 -6px 0 var(--orange)}
@media (hover:hover){
  .occasion:hover .occasion-carte{transform:rotateY(180deg)}
  .occasion:hover .occasion-verso{pointer-events:auto}
  .occasion:hover .occasion-recto{pointer-events:none}
}
.occasion:focus-within .occasion-carte,
.occasion.retournee .occasion-carte{transform:rotateY(180deg)}
.occasion:focus-within .occasion-verso,
.occasion.retournee .occasion-verso{pointer-events:auto}
.occasion:focus-within .occasion-recto,
.occasion.retournee .occasion-recto{pointer-events:none}
/* Au doigt, la carte se touche : on le montre au curseur de la souris aussi,
   pour qu'elle ne passe pas pour une image. */
.occasion{cursor:pointer}
/* Mouvement réduit : la carte change de face sans tourner. */
@media (prefers-reduced-motion:reduce){.occasion-carte{transition:none}}
html.anim-off .occasion-carte{transition:none}
@media(max-width:980px){
  .occasions{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;gap:30px}
}
@media(max-width:640px){
  .occasion-titre{font-size:1.7rem}
  .occasion-verso{padding:26px 22px}
}

/* ==========================================================================
   LA BOULE À FACETTES QUI TOURNE (hero de l'agenda, 2026-09-17)
   ==========================================================================
   Demande du client : que la boule tourne en continu et que ses carrés
   s'allument. Dessin : assets/illustrations/soirees.svg.
   - Les colonnes de facettes glissent de six colonnes (96 unités) en 9 s,
     puis repartent de zéro : le motif se répétant toutes les six colonnes,
     le raccord ne se voit pas.
   - Chaque facette crème s'éteint et se rallume à son rythme ; quatre durées
     décalées, pour qu'elles ne battent pas ensemble.
   Seulement dans un hero : dans la pastille d'une carte de soirée, la même
   boule reste immobile, facettes allumées. En mouvement réduit ou animations
   coupées, les règles globales ramènent chaque animation à son état final :
   la boule est immobile, facettes allumées. */
.hero-illustration .boule-defile{animation:rosa-boule 9s linear infinite}
@keyframes rosa-boule{from{transform:translateX(0)}to{transform:translateX(-96px)}}
.hero-illustration .facette{animation:rosa-facette 2.4s ease-in-out infinite}
.hero-illustration .facette.f2{animation-duration:2.9s;animation-delay:-.7s}
.hero-illustration .facette.f3{animation-duration:2.1s;animation-delay:-1.3s}
.hero-illustration .facette.f4{animation-duration:3.3s;animation-delay:-2s}
@keyframes rosa-facette{0%,100%{opacity:.95}45%{opacity:.1}}