/* === Snack Chez LOLO — CSS propre à l'accueil (premier écran et présentoir des plats, carte en images,
   le snack, FAQ, fin de page). Base partagée : assets/design.css (jetons, boutons, puces de rubriques,
   pastille Ouvert / Fermé, fiche d'un plat, raccourcis flottants Horaires / Nous trouver et leur fenêtre) === */

/* ---------- Structure ---------- */
main { display: block; }
body { font-size: 1rem; line-height: 1.6; }
section[id] { scroll-margin-top: calc(var(--hd-h) + 12px); }
main .btn { min-height: 44px; }   /* zone tactile */
/* Bandes pleine largeur, crème / blanc en alternance */
.band { padding: clamp(2.8rem, 6.5vw, 5rem) 0; }
.band.paper { background: var(--paper); }
.eyebrow { font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--primary); }
.h2 { font-size: clamp(2rem, 4.8vw, 3.3rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg); margin-top: 0.5rem; }
.h2 em { font-style: italic; font-weight: 300; color: var(--primary); }
.lead { color: var(--muted-fg); font-size: 1.05rem; line-height: 1.65; max-width: 34rem; margin-top: 1rem; }

/* Apparitions au défilement : actives seulement si <html class="anim"> (posée dans le <head> quand le
   navigateur sait les jouer et que le visiteur n'a pas demandé moins d'animations). Sans elle, tout est visible. */
.anim .rv { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.8s var(--elan), transform 0.8s var(--elan); }
.anim .rv.vu { opacity: 1; transform: none; }

/* ---------- PREMIER ÉCRAN : le nom, une phrase, le statut — et le présentoir des plats ---------- */
/* Le fond : la photo du lagon, sans voile blanc (Joram : « enlève le filtre blanc »). En haut à gauche, là où se lit le
   texte, le ciel est seulement plus profond — une ombre bleu nuit, locale, qui s'efface avant le lagon et le sable.
   C'est elle qui permet d'écrire en blanc directement sur la photo, sans cadre ni verre dépoli (essayés, jugés « trop
   slop AI »). Les 3,5 derniers rem se fondent dans la section suivante. Le premier écran remonte sous l'en-tête (marge
   négative de main, plus bas) : l'îlot flotte sur la photo, aucune couture.
   Deux fichiers tirés d'img/image_0.webp : lagon-fond.webp (1600 px, 127 ko) et lagon-fond-tel.webp (cadrage en hauteur
   sur le mont Otemanu, 46 ko), préchargés dans le <head>. */
.hx { position: relative; overflow: hidden; padding-top: var(--hd-h); background-color: var(--sand); background-repeat: no-repeat; background-size: cover; background-position: center 30%;
  background-image: linear-gradient(180deg, transparent calc(100% - 3.5rem), var(--paper) 100%),
    radial-gradient(118% 92% at 0% 24%, color-mix(in srgb, var(--fg) 66%, transparent) 0%, color-mix(in srgb, var(--fg) 51%, transparent) 38%, transparent 70%),
    url('../img/lagon-fond.webp'); }
#home { margin-top: calc(-1 * var(--hd-h)); }
/* Téléphone et tablette : le texte est centré en haut de l'écran, l'ombre descend donc du haut et s'efface derrière le présentoir */
@media (max-width: 1023px) {
  .hx { background-image: linear-gradient(180deg, transparent calc(100% - 3.5rem), var(--paper) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 62%, transparent) 0, color-mix(in srgb, var(--fg) 54%, transparent) 21rem, transparent 30rem),
    url('../img/lagon-fond.webp'); }
}
@media (max-width: 768px) {
  .hx { background-position: center top; background-image: linear-gradient(180deg, transparent calc(100% - 3.5rem), var(--paper) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 62%, transparent) 0, color-mix(in srgb, var(--fg) 54%, transparent) 21rem, transparent 30rem),
    url('../img/lagon-fond-tel.webp'); }
}
.hx .wrap { max-width: 1320px; }
/* l'étiquette : petites capitales blanches, précédées d'un filet doré sur grand écran */
.hx-line { display: flex; align-items: center; gap: 0.8rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(0.68rem, 1.5vw, 0.82rem); text-transform: uppercase; letter-spacing: 0.24em; color: var(--paper); text-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 60%, transparent); }
/* le titre : Agbalumo, une écriture ronde et vive, dessinée pour l'enseigne et l'étiquette (SIL Open Font License).
   Le fichier, servi par le site (assets/fonts/) et préchargé dans le <head>, ne contient que les lettres du titre
   — « Snack Chez LOLO. » — : 2 ko. Toute autre lettre retomberait sur Fraunces.
   La hauteur de ligne est fixée : la place du titre est la même avant et après l'arrivée de la police. */
@font-face { font-family: 'Agbalumo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/agbalumo-titre.woff2') format('woff2'); unicode-range: U+20, U+2E, U+43, U+4C, U+4F, U+53, U+61, U+63, U+65, U+68, U+6B, U+6E, U+7A; }
.hx h1 { font-family: 'Agbalumo', 'Fraunces', serif; font-style: normal; font-weight: 400; font-size: clamp(2.2rem, 10vw, 4.4rem); line-height: 1.04; letter-spacing: 0; color: var(--paper); text-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 35%, transparent), 0 2px 18px color-mix(in srgb, var(--fg) 40%, transparent); white-space: nowrap; }
/* « LOLO. » dans l'or du logo */
.hx-lolo { color: var(--gold-light); }
.hx-lead { color: var(--paper); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; max-width: 30rem; text-wrap: pretty; text-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 62%, transparent), 0 0 12px color-mix(in srgb, var(--fg) 38%, transparent); }
.hx .hero-status { margin: 0; }

/* Grand écran : le texte à gauche, le présentoir des plats à droite, sur toute la hauteur */
@media (min-width: 1024px) {
  /* à droite, la marge s'élargit quand l'écran n'est pas plus large que le contenu : les pastilles flottantes et la bulle de
     l'assistant (6,25 rem au coin de l'écran) ont leur couloir, elles ne passent sur aucune photo du présentoir */
  .hx-in { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; gap: clamp(2rem, 5vw, 4.6rem); padding-bottom: 1.3rem; padding-right: max(1.4rem, calc(6.25rem - max(0px, (100vw - 1320px) / 2))); }
  /* le texte est calé en haut, sur le ciel, là où l'ombre le rend lisible : centré en hauteur (il est court depuis que les
     boutons et l'avis sont partis), il descendait sur le lagon et le sable, où le blanc ne se lit plus (contraste mesuré : 3,2:1) */
  .hx-txt { align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding-block: clamp(1.6rem, 7svh, 4.5rem) 0.2rem; }
  .hx-line::before { content: ''; flex: 0 0 auto; width: 2.2rem; height: 2px; border-radius: 2px; background: var(--gold-light); }
  .hx h1 { font-size: clamp(3.5rem, 5.8vw, 5.6rem); white-space: normal; }
  .hx-lolo { display: block; width: fit-content; }
  /* le présentoir prend la hauteur du premier écran, moins l'en-tête et ses marges (0,6 + 1,3 rem) : tout tient sans défiler */
  .presente { height: clamp(26rem, calc(100svh - var(--hd-h) - 1.9rem), 47rem); margin-top: 0.6rem; }
}
/* Écran bas (portable 13 ou 14 pouces) : le texte se resserre */
@media (min-width: 1024px) and (max-height: 880px) {
  .hx-txt { gap: 0.7rem; padding-block: clamp(1.1rem, 5svh, 2.6rem) 0.1rem; }
  .hx h1 { font-size: clamp(3.1rem, 4.9vw, 4.4rem); }
  .hx-lead { font-size: 1rem; line-height: 1.5; }
}
/* Téléphone et tablette : le nom, puis le présentoir */
@media (max-width: 1023px) {
  .hx-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding-top: 1.3rem; padding-bottom: 1.7rem; }
  .hx-txt { display: contents; }
  .hx-lead { max-width: 22rem; }
  .presente { order: 5; align-self: stretch; }
}
/* Petit téléphone : l'étiquette se resserre pour tenir sur une ligne */
@media (max-width: 400px) { .hx-line { letter-spacing: 0.14em; } }

/* ---------- LE PRÉSENTOIR : un plat à la fois, en grand, comme on le présenterait à table ----------
   La photo de devant est entière : rien n'est écrit dessus. Les deux plats suivants attendent derrière elle, décalés
   vers la droite ; quand on avance, celle de devant s'en va par la gauche et les autres avancent d'un cran. Dessous :
   la rubrique, le nom, le prix, une ligne de description — et, à leur droite, les deux flèches. Rien d'autre.
   Les cartes sont posées et déplacées par le script d'index.html (classes p0 à p3 et psort) ; leur côté (--s) se
   règle sur la scène : toute sa hauteur, sans dépasser 84,5 % de sa largeur (la place des deux cartes de derrière). */
/* une seule colonne, qui ne s'élargit jamais au-delà de sa place (sinon la rangée des commandes la pousserait hors de l'écran) */
.presente { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 0.7rem; min-width: 0; text-align: left; }
.pre-scene { position: relative; container-type: size; min-height: 0; height: min(76vw, 23rem); }
.pre-carte { --s: min(100cqh, 84.5cqw); position: absolute; left: 0; top: 50%; width: var(--s); height: var(--s); margin-top: calc(var(--s) / -2); padding: 0; border: 0; overflow: hidden; border-radius: clamp(1.1rem, 2.2vw, 1.8rem); background: var(--sand-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.65s var(--elan), opacity 0.45s, filter 0.5s, box-shadow 0.5s; }
.pre-carte:focus-visible { outline-offset: 4px; border-radius: 1.8rem; }
.pre-carte.net { transition: none; }
.pre-vis { --c: var(--c-vert); position: absolute; inset: 0; display: block; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 9%, var(--paper)), color-mix(in srgb, var(--c) 26%, var(--paper))); }
.pre-vis > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--elan); }
.pre-vis > .ico { position: absolute; inset: 0; margin: auto; width: 36%; height: 36%; stroke-width: 1.1; color: color-mix(in srgb, var(--c) 58%, var(--fg)); opacity: 0.8; }
/* devant ; derrière, un cran plus petit et plus loin ; en réserve, invisible au fond ; en partance, vers la gauche */
.pre-carte.p0 { z-index: 3; box-shadow: 0 26px 54px var(--ombre-forte); }
.pre-carte.p1 { z-index: 2; transform: translateX(calc(var(--s) * 0.17)) scale(0.86); filter: brightness(0.92) saturate(0.9); box-shadow: 0 14px 30px var(--ombre); }
.pre-carte.p2 { z-index: 1; transform: translateX(calc(var(--s) * 0.31)) scale(0.72); filter: brightness(0.84) saturate(0.8); box-shadow: 0 10px 22px var(--ombre); }
.pre-carte.p3 { z-index: 0; transform: translateX(calc(var(--s) * 0.4)) scale(0.6); opacity: 0; pointer-events: none; }
.pre-carte.psort { z-index: 4; transform: translateX(calc(var(--s) * -0.2)) scale(0.9); opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .pre-carte.p0:hover .pre-vis > img { transform: scale(1.05); }
  .pre-carte.p1:hover { filter: none; }
}
/* sous la photo : la légende à gauche, les deux flèches à droite, à la hauteur du nom */
/* un cartel : fond blanc translucide, pour que la légende se lise quel que soit le coin de lagon derrière elle */
.pre-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.7rem 0.8rem 0.7rem 1.15rem; border-radius: 1.4rem; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent), 0 10px 26px var(--ombre); }
.pre-fl { display: flex; gap: 0.5rem; }
/* la légende : sa hauteur est fixée, pour que la scène ne change pas de taille quand le nom est long.
   Une grille, pas une ligne qui se replie : le prix reste à droite du nom (cartel large) ou passe dessous (cartel
   étroit, téléphone) selon la largeur du cartel, jamais selon la largeur des lettres — sinon il sautait d'une ligne à
   l'autre à l'arrivée des polices (CLS mesuré : 0,08 sur un écran de 1024 px).
   Le nom tient toujours sur une ligne : s'il est trop long pour sa place, le script d'index.html l'écrit plus petit
   (ajuster()) ; il ne se replie jamais — replié, il passait sous le prix et poussait la rubrique hors du cartel. */
.pre-bas { container-type: inline-size; }
/* --nom et --prix : la taille des deux textes. La hauteur de la légende se calcule sur elles (rubrique + nom + prix
   + description + intervalles), pour que rien ne dépasse quelle que soit la largeur de l'écran. */
.pre-leg { --nom: clamp(1.45rem, 2.6vw, 2.25rem); --prix: clamp(1.2rem, 1.9vw, 1.65rem); display: grid; grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr); align-content: center; align-items: baseline; gap: 0.15rem 1.1rem;
  height: calc(1.5rem + 1.14 * var(--nom) + 2.66rem + 0.55rem); overflow: hidden; }
/* trois colonnes : le nom, le prix, puis le reste de la largeur (vide). La ligne du haut et la description les occupent
   toutes les trois, mais ne comptent pas dans leur calcul (largeur nulle, portée à 100 % ensuite) : sans cela la
   longueur de la description élargissait la colonne du prix */
.pre-sur, .pre-desc { grid-column: 1 / -1; width: 0; min-width: 100%; }
/* la ligne de la rubrique ne se replie jamais (sur un téléphone de 320 px, « SNACKS & DESSERTS » passait sur deux lignes et
   descendait sur le nom) : trop longue, elle se termine par des points de suspension */
.pre-sur { display: flex; align-items: center; gap: 0.6rem; height: 1.5rem; overflow: hidden; }
.pre-rub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--primary); }
.pre-sur .bdg { flex: 0 0 auto; }
.pre-nom { font-family: 'Fraunces', serif; font-style: italic; font-weight: 800; font-size: var(--nom); line-height: 1.06; letter-spacing: -0.02em; color: var(--fg); white-space: nowrap; }
.pre-prix { font-size: var(--prix); line-height: 1.2; white-space: nowrap; }
.pre-prix i { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: 0.62em; color: var(--muted-fg); }
.pre-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--muted-fg); font-style: italic; font-size: 0.95rem; line-height: 1.4; }
/* cartel étroit (écran de moins de 1250 px environ, tablette) : le prix passe sous le nom, la description tient sur une ligne */
@container (max-width: 36rem) {
  .pre-leg { grid-template-columns: minmax(0, 1fr); height: calc(1.5rem + 1.06 * var(--nom) + 1.2 * var(--prix) + 1.33rem + 0.7rem); }
  .pre-desc { -webkit-line-clamp: 1; line-clamp: 1; }
}
/* les deux flèches */
.pre-b { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 40%, transparent), 0 4px 12px var(--ombre); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s, transform 0.25s var(--elan); }
.pre-b:focus-visible { border-radius: 50%; }
.pre-b .ico { width: 19px; height: 19px; stroke-width: 2.4; transition: transform 0.25s var(--elan); }
.pre-b.prec .ico { transform: rotate(180deg); }
.pre-b:active { transform: scale(0.92); }
@media (hover: hover) {
  .pre-b:hover { background: var(--primary); color: var(--paper); }
  .pre-b:hover .ico { transform: translateX(2px); }
  .pre-b.prec:hover .ico { transform: rotate(180deg) translateX(2px); }
}
/* le minuteur du défilement : un point invisible, dont seule l'animation compte (plus bas) */
.pre-temps { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pre-ia { justify-self: start; padding: 0.22rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: clamp(0.62rem, 2.6vw, 0.72rem); font-style: italic; color: var(--muted-fg); }
@media (min-width: 1024px) { .pre-scene { height: auto; } }
@media (min-width: 641px) and (max-width: 1023px) { .presente { width: min(100%, 34rem); margin-inline: auto; } .pre-scene { height: 24rem; } }
@media (max-width: 640px) {
  /* la description reste dans la fiche du plat : ici le prix passe sous le nom, il n'y a plus la place */
  .pre-leg { grid-template-columns: minmax(0, 1fr); height: calc(1.5rem + 1.06 * var(--nom) + 1.2 * var(--prix) + 0.6rem); }
  .pre-desc { display: none; }
  .pre-bas { padding: 0.55rem 0.6rem 0.55rem 0.9rem; }
  .pre-bas { gap: 0.6rem; }
  .pre-b { width: 2.75rem; height: 2.75rem; }
  .pre-fl { gap: 0.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Le minuteur : son animation dure le temps de présenter un plat (2 s, demande de Joram : « toutes les 2 s au lieu de
     5 s ») ; quand elle se termine, le script passe au suivant. Elle se suspend quand la souris est posée sur la photo ou
     la légende, quand on se promène au clavier dans le présentoir, hors de l'écran. Un clic sur une flèche ne l'arrête
     pas : elle repart de zéro. Sans cette animation (moins de mouvement demandé), rien n'avance tout seul. */
  .pre-temps.court { animation: pre-temps 2s linear forwards; }
  @keyframes pre-temps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .presente.hors-champ .pre-temps, .presente:has(:focus-visible) .pre-temps { animation-play-state: paused; }
}
/* la souris posée sur la photo ou sur la légende : il attend (on lit, on vise un plat) ; sur les flèches, il continue */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .presente:has(.pre-scene:hover, .pre-leg:hover) .pre-temps { animation-play-state: paused; } }
/* À l'arrivée, les cartes se déploient en éventail ; à chaque plat, la légende monte en place
   (seulement si <html class="anim"> : le visiteur n'a pas demandé moins d'animations) */
.anim .presente.ouverture .pre-carte.p0 { animation: pre-pose 0.8s var(--elan) backwards; }
.anim .presente.ouverture .pre-carte.p1 { animation: pre-deploie 0.9s var(--elan) 0.25s backwards; }
.anim .presente.ouverture .pre-carte.p2 { animation: pre-deploie 0.9s var(--elan) 0.4s backwards; }
/* pas de fondu sur la photo de devant : c'est la plus grande image de la page, un fondu retarde d'une seconde le moment
   où le navigateur la compte comme affichée (LCP mesuré : 1,8 s avec fondu) */
@keyframes pre-pose { from { transform: translateY(1.4rem) scale(0.94); } }
@keyframes pre-deploie { from { opacity: 0; transform: translateX(0) scale(0.8); } }
/* la légende arrive vite : à un plat toutes les 2 s, elle doit se lire tout de suite */
.anim .pre-leg.entre > * { animation: pre-monte 0.4s var(--elan) backwards; }
.anim .pre-leg.entre > .pre-nom { animation-delay: 0.04s; }
.anim .pre-leg.entre > .pre-prix { animation-delay: 0.08s; }
.anim .pre-leg.entre > .pre-desc { animation-delay: 0.12s; }
@keyframes pre-monte { from { opacity: 0; transform: translateY(0.6rem); } }

/* ---------- AVIS GOOGLE : un grand carton vert sous le titre de la FAQ ----------
   Il a quitté le premier écran (Joram : « un autre endroit plus pertinent, pas dans le hero »), puis a grandi (« plus
   grand pour qu'on le voie plus, c'est important pour mon client ») : un bloc de couleur, le QR code en grand à scanner
   depuis un écran d'ordinateur, la question, un vrai bouton. Sur téléphone et tablette en hauteur : le même carton après
   les questions, sans QR code (on ne scanne pas son propre écran). Pas d'étoiles alignées : rien qui ressemble à une note. */
.avis { display: flex; flex-direction: column; align-items: flex-start; gap: 1.05rem; width: 100%; max-width: 27rem; min-width: 0; padding: 1.35rem 1.45rem 1.5rem; border-radius: 1.6rem; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 68%, var(--fg))); color: var(--paper); box-shadow: 0 18px 40px var(--ombre-forte); text-align: left; }
/* la place du QR code est réservée : il arrive après coup (script en defer) sans rien déplacer */
.avis-qr { --qr: clamp(8.5rem, 13vw, 10.5rem); position: relative; flex: 0 0 auto; width: var(--qr); height: var(--qr); padding: 0.5rem; overflow: hidden; border-radius: 1.1rem; background: var(--paper); box-shadow: 0 0 0 3px var(--gold-light), 0 10px 24px color-mix(in srgb, var(--fg) 30%, transparent); }
.avis-qr canvas, .avis-qr img { display: block; width: 100% !important; height: 100% !important; }
/* le trait de lecture qui balaie le code */
.avis-qr::after { content: ''; position: absolute; left: 0.45rem; right: 0.45rem; top: 0.45rem; height: 2px; border-radius: 2px; background: var(--primary-light); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--primary-light) 55%, transparent); opacity: 0; pointer-events: none; }
.avis-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.avis-txt b { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(1.4rem, 2.3vw, 1.75rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.avis-aide { font-size: 0.98rem; line-height: 1.45; }
/* le lien est un bouton doré, de la taille d'un pouce */
.avis-lien { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.1rem; margin-top: 0.45rem; padding: 0.75rem 1.35rem; border-radius: 999px; background: var(--gold-light); color: var(--fg); font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.86rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 8px 20px color-mix(in srgb, var(--fg) 32%, transparent); transition: transform 0.3s var(--elan), box-shadow 0.3s var(--elan); }
.avis-lien:focus-visible { border-radius: 999px; outline-color: var(--gold-light); outline-offset: 4px; }
.avis-lien .ico { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--fg); stroke: var(--fg); stroke-width: 1.2; transform-origin: 50% 50%; }
.avis-lien .avis-fl { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; transition: transform 0.25s var(--elan); }
@media (hover: hover) {
  .avis-lien:hover { transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in srgb, var(--fg) 40%, transparent); }
  .avis-lien:hover .avis-fl { transform: translateX(4px); }
}
@media (max-width: 980px) {
  .avis { max-width: none; align-items: center; gap: 0.6rem; padding: 1.3rem 1.2rem 1.4rem; text-align: center; }
  .avis-qr, .avis-aide { display: none; }
  .avis-txt { align-items: center; align-self: stretch; }
  /* le bouton prend la largeur du carton sur téléphone ; sur tablette il s'arrête à 26 rem, au milieu */
  .avis-lien { align-self: center; width: 100%; max-width: 26rem; justify-content: center; }
}
/* téléphone : le libellé du bouton tient sur une ligne (marges et espacement des lettres resserrés) */
@media (max-width: 640px) { .avis-lien { gap: 0.4rem; padding-inline: 0.9rem; letter-spacing: 0.035em; font-size: clamp(0.7rem, 3.5vw, 0.86rem); } }
@media (max-width: 360px) { .avis-lien .avis-fl { display: none; } }
/* Grand écran, à gauche des questions : le QR code à gauche, la question et le mode d'emploi à droite, le bouton dessous
   sur toute la largeur. Le carton s'arrête au niveau de la dernière question (demande de Joram, 2026-10-09) : sa hauteur
   --avis-h est mesurée par le script de l'accueil, questions fermées — elle ne change donc pas quand une réponse
   s'ouvre — et le QR code prend la place qui reste au-dessus du bouton (--avis-qr), sans dépasser 11 rem ni 45 % du carton.
   Sans le script, le carton garde sa hauteur naturelle, un peu plus courte. Les textes suivent la largeur du carton (cqw). */
@media (min-width: 981px) {
  .avis { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 0.95rem 0; padding: 1.25rem; container-type: inline-size; }
  .avis.cale { height: var(--avis-h); }
  .avis-qr { --qr: min(11rem, 45cqw, var(--avis-qr, 9.5rem)); grid-column: 1; grid-row: 1; margin-right: 1.1rem; }
  .avis-txt { grid-column: 2; grid-row: 1; }
  .avis-txt b { font-size: clamp(1.15rem, 6cqw, 1.6rem); }
  .avis-aide { font-size: clamp(0.84rem, 3.6cqw, 0.98rem); }
  .avis-lien { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* un trait balaie le QR code, l'étoile scintille (le carton, lui, arrive avec la section : classe .rv) */
  .avis-qr::after { animation: avis-lecture 3.2s ease-in-out 2s infinite; }
  @keyframes avis-lecture { 0%, 100% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.95; } 50% { transform: translateY(calc(var(--qr) - 1rem)); opacity: 0.95; } 62%, 99% { transform: translateY(calc(var(--qr) - 1rem)); opacity: 0; } }
  .avis-lien > .ico:first-child { animation: avis-etoile 2.8s ease-in-out infinite; }
  @keyframes avis-etoile { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(72deg); } }
}

/* ---------- LA CARTE EN IMAGES : une rubrique à la fois ----------
   Les neuf rubriques de /menu tiennent sur une rangée de puces ; on n'en voit qu'une, celle de la puce choisie
   (ce sont des onglets, script d'index.html) : la section fait une rangée de haut, plus neuf. Sans script, les neuf
   rubriques restent l'une sous l'autre. */
#carte .wrap { max-width: 1320px; }

/* Puces des rubriques (composant .cnav / .ctab : assets/design.css). Ici ce sont des onglets : la rangée n'a pas à
   rester collée sous l'en-tête, et elle n'a pas de fond. */
#carte .cnav { position: static; margin-top: 1.5rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Les rubriques défilent toutes seules : la puce choisie se remplit de gauche à droite en 5 s — la même durée qu'elle ait
   été choisie par le défilement ou par le visiteur — et, quand elle est pleine, le script d'index.html choisit la suivante. La barre est dans la puce
   (::after), sous l'icône et le mot : la puce part d'un vert sombre et se remplit du vert de la marque (le mot reste
   blanc sur vert, lisible des deux côtés). C'est une animation : rien ne défile chez qui a demandé moins de mouvement.
   Elle attend quand la souris est sur les plats, quand le clavier est dans la section, fiche ouverte, section hors de l'écran. */
/* portables (1240 à 1439 px de large) : les puces se resserrent encore un peu pour que les neuf restent sur une ligne */
@media (min-width: 1240px) and (max-width: 1439px) { #cnav { gap: 0.28rem; } #cnav .ctab { padding-right: 0.52rem; font-size: 0.635rem; letter-spacing: 0.04em; } }
#cnav .ctab { position: relative; overflow: hidden; isolation: isolate; }
#cnav .ctab > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  #cnav .ctab.on.tourne { background: color-mix(in srgb, var(--primary) 56%, var(--fg)); border-color: var(--primary); }
  #cnav .ctab.tourne::after { content: ''; position: absolute; inset: 0; z-index: 0; transform-origin: 0 50%; background: var(--primary); animation: puce-temps 5s linear forwards; }
  @keyframes puce-temps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  #carte.hors-champ .ctab::after, #carte.doigt .ctab::after, #carte:has(:focus-visible) .ctab::after, html:has(dialog[open]) #cnav .ctab::after { animation-play-state: paused; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { #carte:has(.rubs:hover) .ctab::after { animation-play-state: paused; } }
/* Téléphone : une rangée que l'on fait glisser du doigt (width: max-content + marges auto : elle se centre si elle tient).
   Au-delà : les puces passent sur deux lignes s'il le faut — un onglet ne doit pas rester caché hors de l'écran. */
.cnav-card { width: max-content; max-width: calc(100% + 2.8rem); margin-inline: auto; padding-inline: 1.4rem; }
@media (max-width: 640px) { .cnav-card { margin-inline: -1.4rem; } }
@media (min-width: 641px) { .cnav-card { width: auto; max-width: none; padding-inline: 0; flex-wrap: wrap; justify-content: center; overflow: visible; } }
/* Grand écran : les 9 puces tiennent sur une ligne, sans défilement (mesuré à 1 311 px pour 1 320 disponibles) */
@media (min-width: 1341px) { .cnav-card { gap: 0.3rem; } .ctab { padding-inline: 0.7rem; font-size: 0.66rem; } }

/* le cadre des rubriques : une carte crème, sous les puces */
.rubs { margin-top: 0.9rem; padding: clamp(0.95rem, 2vw, 1.5rem) clamp(0.95rem, 2.2vw, 1.7rem) clamp(1.1rem, 2vw, 1.5rem); border-radius: 1.6rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
/* comme le présentoir : à droite, les photos s'arrêtent avant le couloir des pastilles flottantes quand l'écran n'est pas plus large que le contenu */
@media (min-width: 641px) { .rubs { padding-right: max(clamp(0.95rem, 2.2vw, 1.7rem), calc(6.25rem - 1.4rem - max(0px, (100vw - 1320px) / 2))); } }
.rub { --c: var(--c-vert); }
.rubs > .rub { scroll-margin-top: calc(var(--hd-h) + 5.2rem); }
/* sans script, plusieurs rubriques sont visibles : un filet les sépare */
.rub:not([hidden]) ~ .rub:not([hidden]) { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.rub[data-rub="petit-dej"], .rub[data-rub="grillades"] { --c: var(--c-or); }
.rub[data-rub="poissons"], .rub[data-rub="boissons"] { --c: var(--c-bleu); }
.rub[data-rub="burgers"], .rub[data-rub="pizzas"] { --c: var(--c-corail); }
.rub[data-rub="snacking"] { --c: var(--c-rose); }
.rub-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.75rem; margin-bottom: 0.95rem; }
.rub-ico { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--paper)); color: color-mix(in srgb, var(--c) 58%, var(--fg)); }
.rub-ico .ico { width: 24px; height: 24px; stroke-width: 1.8; }
.rub h3 { font-size: 1.32rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.015em; }
.rub-tete p { color: var(--muted-fg); font-style: italic; font-size: 0.9rem; line-height: 1.35; }
.rub-lien { display: inline-flex; align-items: center; gap: 0.15rem; min-height: 44px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); white-space: nowrap; }
.rub-lien .ico { width: 16px; height: 16px; transition: transform 0.2s; }
.rub-lien:hover .ico { transform: translateX(3px); }

/* Les plats de la rubrique : une grille de huit cases — quatre colonnes sur deux rangées, deux colonnes sur quatre rangées
   sur téléphone — que chaque rubrique remplit exactement (script d'index.html) : jusqu'à cinq plats, le premier est
   montré en grand (quatre cases) ; les cases libres vont à une tuile qui mène à la rubrique de la page Menu. Toutes les
   rubriques ont donc la même hauteur : rien ne bouge sous le cadre quand elles défilent.
   La hauteur d'une rangée se règle sur la largeur du cadre (unité cqw) : une photo carrée, plus la place du nom et du
   prix (--leg). Là où le navigateur ne connaît pas cette unité, les photos gardent leur format carré. */
.rubs { container-type: inline-size; }
.plats { --cols: 2; --g: 0.65rem; --leg: 3.8rem; --cote: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols)); list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--g); }
@media (min-width: 641px) { .plats { --cols: 4; --g: 0.95rem; --leg: 4rem; } }
@media (min-width: 1100px) { .plats { --leg: 3.2rem; } }
.plat { min-width: 0; display: flex; }
.plat.grand { grid-column: span 2; grid-row: span 2; }
.plat-b { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.plat-b:focus-visible { outline-offset: 4px; border-radius: 1rem; }
.plat-vis { --c: var(--c-vert); position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 0.55rem; overflow: hidden; border-radius: 1rem; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 9%, var(--paper)), color-mix(in srgb, var(--c) 26%, var(--paper))); box-shadow: 0 6px 16px var(--ombre); transition: transform 0.35s var(--elan), box-shadow 0.35s var(--elan); }
.plat-vis > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--elan); }
.plat-vis > .ico { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; stroke-width: 1.15; color: color-mix(in srgb, var(--c) 58%, var(--fg)); opacity: 0.8; transition: transform 0.45s var(--elan); }
.plat-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(0.8rem, 2.6vw, 0.96rem); line-height: 1.2; letter-spacing: -0.005em; transition: color 0.2s; }
.plat-b .price { margin-top: 0.12rem; font-size: clamp(0.8rem, 2.6vw, 0.96rem); }
.plat-b .price i { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: 0.8em; color: var(--muted-fg); }
.plat-bdg { position: absolute; left: 0.5rem; top: 0.5rem; box-shadow: 0 2px 8px var(--ombre); }
/* Le petit « + » dit que le plat s'ouvre */
.plat-plus { position: absolute; right: 0.5rem; bottom: 0.5rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--primary); box-shadow: 0 3px 10px var(--ombre); transition: transform 0.35s var(--elan), background 0.2s, color 0.2s; }
.plat-plus .ico { width: 14px; height: 14px; stroke-width: 2.6; }
@media (hover: hover) {
  .plat-b:hover .plat-vis { transform: translateY(-5px); box-shadow: 0 16px 30px var(--ombre-forte); }
  .plat-b:hover .plat-vis > img { transform: scale(1.07); }
  .plat-b:hover .plat-vis > .ico { transform: rotate(-8deg) scale(1.1); }
  .plat-b:hover .plat-plus { transform: rotate(90deg); background: var(--primary); color: var(--paper); }
  .plat-b:hover .plat-nom { color: var(--primary); }
}
.plat-b:active .plat-vis { transform: scale(0.97); }
@media (max-width: 640px) { .plat-plus { width: 1.6rem; height: 1.6rem; right: 0.35rem; bottom: 0.35rem; } .plat-bdg { left: 0.35rem; top: 0.35rem; } }
/* là où le navigateur connaît l'unité cqw : rangées de hauteur fixe, la photo prend toute la place au-dessus du nom */
@supports (width: 1cqw) {
  .plats { grid-auto-rows: calc(var(--cote) + var(--leg)); }
  .plat-vis { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
}
/* le plat montré en grand : nom et prix plus gros */
.plat.grand .plat-nom, .plat.grand .plat-b .price { font-size: clamp(1rem, 2.1vw, 1.4rem); }
.plat.grand .plat-vis { border-radius: 1.3rem; }
/* Un plat « en large » occupe deux cases : sa photo dans la première, son texte dans la seconde — le nom, la description
   et tous ses prix. Il prend la place qu'une case vide aurait laissée : plus de tuile de remplissage (index.html). */
.plat.large { grid-column: span 2; }
/* photo et texte tiennent dans un même carton blanc : c'est lui qui se soulève au survol, pas la photo seule */
.plat.large .plat-b { flex-direction: row; align-items: stretch; overflow: hidden; border-radius: 1rem; background: var(--paper); box-shadow: 0 6px 16px var(--ombre); transition: transform 0.35s var(--elan), box-shadow 0.35s var(--elan); }
.plat.large .plat-vis { flex: 0 0 calc(50% - var(--g) / 2); width: auto; margin-bottom: 0; border-radius: 0; box-shadow: none; }
.plat-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: 0.7rem clamp(0.7rem, 1.4vw, 1.2rem); }
@media (hover: hover) {
  .plat.large .plat-b:hover { transform: translateY(-5px); box-shadow: 0 16px 30px var(--ombre-forte); }
  .plat.large .plat-b:hover .plat-vis { transform: none; box-shadow: none; }
}
.plat.large .plat-b:active { transform: scale(0.985); }
.plat.large .plat-b:active .plat-vis { transform: none; }
.plat.large .plat-nom { font-size: clamp(1rem, 1.75vw, 1.35rem); line-height: 1.15; }
.plat-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; font-size: clamp(0.8rem, 1.05vw, 0.94rem); line-height: 1.45; color: var(--muted-fg); }
.plat-desc[hidden] { display: none; }
.plat.large .plat-b .price { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; margin-top: 0.1rem; font-size: clamp(0.86rem, 1.25vw, 1.05rem); }
/* une taille et son prix : sur une ligne s'il y a la place, sinon le prix passe sous la taille (case étroite) */
.plat-px { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35em; min-width: 0; }
.plat-m { white-space: nowrap; }
/* l'en-tête de chaque rubrique a la même hauteur : son sous-titre tient sur une ligne (deux sur téléphone) */
.rub-tete { min-height: 2.9rem; }
.rub-tete p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
@media (max-width: 640px) { .rub-tete { min-height: 4.1rem; } .rub-tete p { -webkit-line-clamp: 2; line-clamp: 2; } .rub h3 { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (min-width: 1100px) {
  .rub h3 { font-size: 1.6rem; }
  .rub-tete p { font-size: 0.95rem; }
}
/* Les plats de la rubrique qu'on vient de choisir arrivent l'un après l'autre (seulement si <html class="anim">) */
.anim .rub .plat { animation: plat-entre 0.5s var(--elan) backwards; animation-delay: calc(min(var(--i, 0), 8) * 42ms); }
@keyframes plat-entre { from { opacity: 0; transform: translateY(1rem); } }

.carte-fin { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1.7rem; text-align: center; }
.carte-note { font-size: 0.9rem; font-style: italic; color: var(--muted-fg); }
.carte-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FAQ (<details> natif : aucune ligne de JS) ---------- */
.faq2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 1.4rem clamp(1.6rem, 5vw, 4rem); align-items: start; }
/* le titre puis l'avis Google à gauche, les questions à droite sur toute la hauteur */
/* le titre tient sur deux lignes nettes, « Tout savoir » puis « avant de venir. », à toutes les largeurs */
.faq2 .h2 em { display: block; }
.faq2 > .faq-box { grid-column: 2; grid-row: 1 / span 2; }
.faq2 > .avis { grid-column: 1; grid-row: 2; justify-self: start; }
.faq-box { border-top: 2px dotted var(--border); border-bottom: 2px dotted var(--border); }
/* Chaque question a sa petite scène animée (img/faq/, une boucle de quatre vues peintes). Question fermée : une vignette
   de 2,75 rem à gauche du texte — la ligne garde ses 44 px. Question ouverte : la vignette grandit, la réponse se range à
   sa droite. La vignette est posée en absolu dans la question : elle fait partie du résumé (un clic dessus ouvre), et le
   texte lui laisse sa place par une marge à gauche. */
.faq2 details { --vig: 2.75rem; --vig-o: clamp(6rem, 12vw, 8.5rem); position: relative; padding-left: calc(var(--vig) + 0.85rem); }
.faq2 details[open] { padding-left: calc(var(--vig-o) + 1.1rem); min-height: calc(var(--vig-o) + 1.1rem); }
.faq2 summary { align-items: center; min-height: 2.75rem; font-size: 1.04rem; padding: 0; }   /* ligne de 44 px : zone tactile */
.faq-vig { position: absolute; left: 0; top: 0.55rem; width: var(--vig); height: var(--vig); overflow: hidden; border-radius: 0.7rem; background: var(--sand); box-shadow: 0 3px 10px var(--ombre); }
.faq-vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.faq2 details[open] .faq-vig { width: var(--vig-o); height: var(--vig-o); border-radius: 1rem; box-shadow: 0 8px 20px var(--ombre); }
@media (prefers-reduced-motion: no-preference) {
  .faq2 details { transition: padding-left 0.35s var(--elan), min-height 0.35s var(--elan); }
  .faq-vig { transition: width 0.35s var(--elan), height 0.35s var(--elan), border-radius 0.35s, box-shadow 0.35s; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .faq2 details:not([open]) summary:hover .faq-vig { transform: scale(1.12) rotate(-3deg); transition: transform 0.3s var(--elan); } }
.faq2 summary::after { transition: transform 0.3s var(--elan); }
.faq2 details p { font-size: 0.96rem; line-height: 1.65; color: var(--muted-fg); max-width: 40rem; padding-bottom: 0.4rem; }
/* jusqu'à 980 px, une seule colonne : à côté des questions, le carton serait trop étroit pour son bouton */
@media (max-width: 980px) { .faq2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .faq2 > .faq-box, .faq2 > .avis { grid-column: auto; grid-row: auto; } .faq2 > .avis { justify-self: stretch; } }
@media (max-width: 640px) { .faq2 details { --vig: 2.5rem; --vig-o: 5.25rem; padding-left: calc(var(--vig) + 0.7rem); } .faq2 details[open] { padding-left: calc(var(--vig-o) + 0.8rem); } }
/* La réponse se déplie en douceur là où le navigateur sait animer une hauteur « auto » */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq2 details { interpolate-size: allow-keywords; }
    .faq2 details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--elan), content-visibility 0.35s allow-discrete; }
    .faq2 details[open]::details-content { block-size: auto; }
  }
}

/* ---------- « COMMANDER » DU BAS D'ÉCRAN (composant : assets/design.css) : sur l'accueil il est ancré à l'écran ----------
   Sous 641 px l'en-tête n'a pas la place d'un bouton d'appel : sans cette barre, le premier numéro cliquable tombait
   à 3 300 px de défilement (mesuré en prod le 2026-09-09). La pastille de Lolo se pose juste au-dessus (chatbot.js). */
@media (max-width: 640px) {
  .mbar-wrap.home { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 0.7rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
  .mbar-wrap.home .mbar { pointer-events: auto; }
  /* réserve la hauteur de la barre (60 px + 8) : sans cela elle recouvrirait la fin du pied de page */
  .ft { padding-bottom: 80px; }
}

/* ---------- Moins d'animations demandé par le visiteur : plus rien ne bouge tout seul ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-status.is-open .hs-dot { animation: none; }
}