/* ============================================================
   AVOCADO · Menton · Site vitrine
   DA : solaire · méditerranéen · healthy · vacances
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Couleurs marque (issues du logo + légumes) */
  --forest:      #1f5130;   /* vert forêt · wordmark, texte fort */
  --forest-deep: #163a23;
  --avocado:     #7cb342;   /* chair d'avocat */
  --lime:        #aed26a;   /* accent lime · tagline */
  --lime-soft:   #d9e8b8;
  --gold:        #f4c33c;   /* soleil */
  --gold-soft:   #fbe6a2;

  /* Diamètre des halos de rappel entre sections. Un cercle et non une
     ellipse en pourcentage : une section haute et étroite étirait la
     lueur en bandeau, ce qui la rendait méconnaissable. */
  --halo: clamp(230px, 40vw, 480px);
  --peach:       #f7e4d6;   /* rose chaud (carte menu) */
  --terracotta:  #e07a5f;   /* accent légume */
  --tomato:      #d9544d;
  --aubergine:   #7d5a7f;

  /* Aplats francs, échantillonnés sur les posts good mood.
     Toujours associés à du texte vert foncé (4,5:1 mini). */
  --block-rose:   #e37c89;
  --block-vert:   #c4d4ab;
  --block-orange: #d9954c;

  /* Trio pastel (smoothie de la semaine) */
  --sage:        #b6cd8c;   --sage-soft:    #dbe8c0;
  --apricot:     #f3ac72;   --apricot-soft: #fbd8b0;
  --rose:        #eda1b2;   --rose-soft:    #f8cbd6;

  --cream:       #fbf6ec;   /* fond principal */
  --cream-2:     #f6efe0;
  --paper:       #ffffff;
  --ink:         #26302a;   /* texte courant */
  --ink-soft:    #566258;
  --line:        #e9e0cf;

  --radius-s: 12px;
  --radius:   18px;
  --radius-l: 26px;
  --radius-xl: 48px;

  --shadow-s: 0 2px 10px rgba(31,81,48,.06);
  --shadow:   0 18px 40px -18px rgba(31,81,48,.28);
  --shadow-l: 0 40px 80px -30px rgba(31,81,48,.35);

  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;  /* registre good mood */
  --font-body: "Nunito", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;

  --wrap: 1200px;
  --nav-h: 78px;

  /* ---------------------------------------------------------------
     ÉCHELLE TYPOGRAPHIQUE
     Le site portait 62 tailles distinctes pour 106 déclarations, dont
     dix valeurs entre .86rem et 1rem que l'œil ne sépare pas : ce n'est
     pas une échelle, c'est du bruit. Neuf paliers suffisent, à raison
     de 1,125 d'un cran à l'autre, écart médian de 3,2 % au moment de la
     bascule. Toute nouvelle taille doit se poser sur un palier ; s'il en
     manque un, c'est le palier qu'on ajoute, pas une valeur libre.
     Base 16px (défaut navigateur, jamais forcé : un visiteur qui
     agrandit la police de son système doit être suivi).
     --------------------------------------------------------------- */
  --fs-2xs: .75rem;   /* 12,0px · mentions minuscules */
  --fs-xs:  .84rem;   /* 13,4px · étiquettes, notes */
  --fs-s:   .95rem;   /* 15,2px · texte secondaire */
  --fs-md:  1.06rem;  /* 17,0px · corps de texte */
  --fs-lg:  1.2rem;   /* 19,2px · chapô */
  --fs-xl:  1.35rem;  /* 21,6px · h3 */
  --fs-2xl: 1.52rem;  /* 24,3px */
  --fs-3xl: 1.71rem;  /* 27,4px */
  --fs-4xl: 1.92rem;  /* 30,7px */
  --fs-5xl: 2.16rem;  /* 34,6px */

  /* Titres et chapôs, fluides. Même problème que ci-dessus : il existait
     HUIT variantes de « paragraphe d'introduction » (de 1,08 à 1,28rem de
     maximum) pour un seul rôle, et trois traitements de h1 sans règle. */
  --fs-lead:   clamp(var(--fs-md), 1.6vw, var(--fs-lg));    /* chapô courant */
  /* plancher au corps de texte et non au cran au-dessus : mesuré, un plancher
     à 1,2rem gonflait le paragraphe du nom de 14 % sur mobile */
  --fs-lead-l: clamp(var(--fs-md), 1.9vw, var(--fs-xl));    /* chapô appuyé (récit) */
  --fs-d1: clamp(2.5rem, 7vw, 5.2rem);      /* titre de page, pleine largeur */
  --fs-d2: clamp(2.3rem, 5.2vw, 4.2rem);    /* titre de page, en colonne */
  --fs-d3: clamp(2.1rem, 5vw, 3.6rem);      /* h2 de section */
  /* plafond au 3xl : au 5xl, les h2 des mentions légales bondissaient de 27 % */
  --fs-d4: clamp(var(--fs-xl), 2.6vw, var(--fs-3xl)); /* h2 secondaire, légendes */

  /* Interlignages. Il y en avait 13 pour 18 déclarations, dont cinq valeurs
     entre .84 et 1.02 pour un seul rôle (le titre serré). */
  --lh-huge:    .86;   /* mots géants : GOOD FOOD GOOD MOOD, AVOCADO */
  --lh-display: .94;   /* titres de page en capitales */
  --lh-h:      1.02;   /* h1 et h2 courants */
  --lh-titre:  1.15;   /* titres courts, libellés sur deux lignes */
  --lh-corps:   1.6;   /* texte courant */
  --lh-prose:  1.75;   /* prose longue : mentions légales */

  /* Interlettrages. `.10em` et `.1em` étaient la même valeur écrite deux fois,
     et les étoiles d'avis étaient calées en px, donc figées quelle que soit
     la taille du texte. */
  --ls-caps:  .012em;  /* capitales d'affichage */
  --ls-label:   .1em;  /* micro-capitales : surtitres, « TOTAL ESTIMÉ » */
  --ls-wide:   .04em;  /* libellés renforcés */
  --ls-ui:     .01em;  /* boutons et interface */
  --ls-tight: -.015em; /* titres en casse normale */

}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: var(--lh-corps);
  overflow-x: hidden;
  /* Le corps était à 17px en dur alors que `html` n'a jamais été fixé, donc
     `rem` valait 16px : le site tournait sur DEUX références. Un paragraphe
     sans classe faisait 17px, le même en `.98rem` faisait 15,7px, et les deux
     jouaient le même rôle. Le corps est désormais un palier de l'échelle. */
  font-size: var(--fs-md);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* fond texturé subtil (grain) */
body::before {
  content: "";
  position: fixed; inset: 0; display: none;   /* grain retiré : le registre est plat */
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: .6;
}

/* ---------- Layout utils ---------- */
/* La gouttière était en pourcentage : 92vw laisse 15px de chaque côté sur un
   écran de 375px, où le texte frôle le bord, et 48px sur un 1200px, où c'est
   trop lâche. Une réserve fixe donne 20px partout sur mobile et laisse le
   plafond de 1200px gouverner au-delà. */
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--forest);   /* le vert avocat tombait à 2,33:1 sur le crème */
}
/* Pas d'emoji dans les surtitres : rendu par le système donc différent sur
   chaque appareil, hors palette, et c'est le tell « fait par une IA » le plus
   reconnaissable. Un point de couleur de la marque fait le même travail. */
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--avocado); flex: none;
}
h1, h2, h3 {
  font-family: var(--font-head); font-weight: 700; line-height: var(--lh-h);
  color: var(--forest); letter-spacing: var(--ls-tight); text-wrap: balance;
}
/* les h2 sont en capitales : un tracking négatif y colle les lettres et
   rend les mots difficiles à lire. Les capitales demandent de l'air, pas
   du serrage, d'où la valeur positive ici. */
h2 { font-size: var(--fs-d3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
h3 { line-height: var(--lh-titre); }
p { text-wrap: pretty; }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 14px; max-width: 64ch; }
.access-head { margin-top: clamp(44px, 6vw, 72px); margin-bottom: 26px; }
.hand { font-family: var(--font-hand); color: var(--lime); font-weight: 700; }

/* boutons */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 800; font-size: var(--fs-s); letter-spacing: var(--ls-ui);
  transition: transform .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s cubic-bezier(.2,.9,.25,1), background .3s;
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.btn:hover svg { transform: translateX(2px) scale(1.06); }
/* enfoncement souple au clic · jamais un saut brut */
.btn:active { transform: translateY(1px) scale(.965); transition-duration: .09s; }
.btn-primary { background: var(--forest); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); background: var(--forest-deep); }
.btn-primary:active { box-shadow: 0 4px 12px -6px rgba(31,81,48,.5); }
.btn-gold { background: var(--gold); color: var(--forest-deep); box-shadow: 0 14px 30px -12px rgba(244,195,60,.7); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -14px rgba(244,195,60,.85); }
.btn-gold:active { box-shadow: 0 4px 12px -6px rgba(244,195,60,.7); }
.btn-ghost { background: rgba(255,255,255,.7); color: var(--forest); border: 1.5px solid var(--line); }
.btn-ghost:hover { transform: translateY(-3px); background: #fff; border-color: var(--avocado); }

/* ondulation partagée par les boutons et les ingrédients */
.ripple {
  position: absolute; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .62s cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.btn-ghost .ripple, .chip .ripple { background: radial-gradient(circle, rgba(124,179,66,.45), rgba(124,179,66,0) 70%); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
/* Au scroll : plus de barre · juste le logo (gauche) et le hamburger (droite), flottants */
.nav.scrolled { background: transparent; backdrop-filter: none; box-shadow: none; }
.nav.scrolled .nav-links { display: none; }
/* Le bouton de commande et le sélecteur de langue RESTENT au scroll : Uber Eats
   est le seul canal de commande du commerce, et la clientèle est frontalière.
   Les masquer les rendait inatteignables sans ouvrir le menu. */
@media (min-width: 761px) { .nav.scrolled .lang { display: flex; } }
.nav.scrolled .nav-cta { display: inline-flex; }
.nav.scrolled .burger { display: block; }
.nav.scrolled .brand,
.nav.scrolled .burger {
  box-shadow:
    0 12px 28px -10px rgba(31,81,48,.38),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 1px rgba(31,81,48,.06);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; border-radius: 999px; transition: background .3s, box-shadow .3s, padding .3s; }
/* Le symbole est recadré sur l'avocat seul (viewBox 12 2 56 88) : les
   éclaboussures qui l'entouraient sortent du cadre. Les dimensions suivent le
   nouveau rapport 56/88, sinon l'avocat serait mis en boîte et resterait
   petit. Il occupe désormais toute la hauteur allouée. */
.brand .logo-mark { width: 30px; height: 47px; flex: none; }
.brand .brand-name { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-2xl); color: var(--forest); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-weight: 700; font-size: var(--fs-s); color: var(--ink); position: relative; padding: 4px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--avocado); border-radius: 2px; transition: width .25s; }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.lang button { padding: 5px 10px; border-radius: 999px; font-weight: 800; font-size: var(--fs-xs); color: var(--ink-soft); }
.lang button.active { background: var(--forest); color: #fff; }
.nav-cta { padding: 12px 22px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.7); position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--forest); border-radius: 2px; transition: .3s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); top: 21px; }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: rotate(-45deg); top: 21px; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 50% at 86% 10%, rgba(245,192,146,.40), transparent 60%),
    radial-gradient(50% 50% at 12% 26%, rgba(174,210,106,.32), transparent 60%),
    radial-gradient(45% 45% at 72% 92%, rgba(241,184,195,.38), transparent 62%),
    radial-gradient(40% 40% at 30% 88%, rgba(198,214,166,.35), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--cream-2));
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Retour de limite atteinte : la chip refuse et le compteur le dit. */
@keyframes refusChip {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  75%     { transform: translateX(3px); }
}
.chip.supp { animation: refusChip .3s ease-in-out; }
@keyframes compteurAtteint {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.18); }
}
.bstep .cnt.atteint { animation: compteurAtteint .32s ease-out; }
/* quantité incluse atteinte, puis dépassée : deux états distincts */
.bstep .cnt.full { color: var(--lime); }
.bstep .cnt.sup  { color: #fbe6a2; }
@media (prefers-reduced-motion: reduce) {
  .chip.supp, .bstep .cnt.atteint { animation: none; }
}

/* Lien d'évitement : visible seulement au clavier, il permet de sauter la
   navigation au lieu de la retraverser à chaque page. */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--forest); color: #fff; font-weight: 800;
  padding: 12px 20px; border-radius: 0 0 14px 14px;
  transition: top .2s;
}
.skip-link:focus-visible { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; }

/* Statut d'ouverture : l'information la plus consultée d'un site de
   restaurant. Pastille sobre, verte à l'ouverture, neutre à la fermeture.
   La couleur ne porte pas seule le sens : le texte le dit aussi. */
.statut {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink); background: rgba(22,58,35,.07);
  padding: 5px 12px; border-radius: 999px;
}
.statut::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-soft); flex: none;
}
.statut.est-ouvert { color: var(--forest); background: rgba(124,179,66,.16); }
.statut.est-ouvert::before { background: var(--avocado); }

/* Information obligatoire pour un restaurant, jusqu'ici présente dans le
   code mais affichée nulle part. Sous le composeur, là où l'on choisit. */
.allergenes {
  margin-top: 26px; max-width: 78ch;
  font-size: var(--fs-s); line-height: var(--lh-corps);
  color: rgba(251,246,236,.94);
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px;
}
.allergenes strong { color: #fbe6a2; }

/* Titre de structure destiné aux lecteurs d'écran : il comble le saut de
   niveau sans ajouter de bruit visuel. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  /* non positionné, il était peint AVANT le hero épinglé, qui le recouvrait
     donc en laissant voir les panneaux de la page d'accueil au travers */
  position: relative; z-index: 2;
  background: var(--forest); color: var(--cream);
  padding: 16px 0; overflow: hidden; white-space: nowrap;
  border-top: 3px solid var(--lime); border-bottom: 3px solid var(--lime);
}
.marquee-track { display: inline-flex; gap: 64px; animation: scroll 42s linear infinite; }
.marquee span { font-family: var(--font-head); font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 64px; }
.marquee span::after { content: "•"; color: var(--gold); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============================================================
   FONDS DE SECTION
   Chaque section devient son propre plan lumineux : elle rogne
   ce qui dépasse et sert de repère de position à ses lueurs.
   ============================================================ */
.concept, .signatures, .gallery, .reviews, .contact,
.menu-cta, .story, .values, .legal, .compose, .page-head {
  position: relative; overflow: hidden;
}
/* Tout contenu de section passe AU-DESSUS des lueurs.
   La règle vise chaque enfant direct, pas seulement .wrap : si du contenu
   est ajouté plus tard hors de .wrap, il restera lisible. */
.concept > *, .signatures > *, .gallery > *, .reviews > *,
.contact > *, .menu-cta > *, .story > *,
.values > *, .legal > *, .compose > *, .page-head > * {
  position: relative; z-index: 1;
}
/* le fond décoratif de l'en-tête reste, lui, en arrière-plan */

/* ============================================================
   CONCEPT
   ============================================================ */
.concept { background: var(--cream); }
.reviews { background: var(--cream); }
.contact { background: var(--cream); }
.concept-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* les repères n'existent que pour la rangée défilante du mobile ; en grille
   les quatre cartes sont visibles d'un coup, il n'y a rien à repérer */
.concept-points { display: none; }
.feature {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-s); transition: transform .3s, box-shadow .3s;
}
.feature:hover { transform: translateY(-6px); }
.feature .f-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: var(--fs-2xl); margin-bottom: 18px; }
.feature h3 { font-size: var(--fs-xl); margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: var(--fs-s); }

/* ============================================================
   SIGNATURES
   ============================================================ */
.signatures { background: var(--cream); }
.sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dish {
  background: var(--paper); border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--shadow-s); border: 1px solid var(--line);
}
/* pas d'effet au survol sur les incontournables : demande client */
.dish-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.dish-img img { width: 100%; height: 100%; object-fit: cover; }
/* verre blanc sur la photo : l'opacité ne descend pas sous .78, en dessous
   le vert passe sous 4,5:1 dès que la photo est sombre */
.dish-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px) saturate(170%) brightness(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.12);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 8px 20px -10px rgba(22,58,35,.5), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--forest); font-weight: 800; font-size: var(--fs-2xs);
  padding: 6px 12px; border-radius: 999px;
}
.dish-body { padding: 24px 24px 28px; }
.dish-body h3 { font-size: var(--fs-xl); }
.dish-body p { color: var(--ink); font-size: var(--fs-s); margin: 8px 0 16px; }  /* --ink et non --ink-soft : le rose pastel descend sous 4,5:1 avec le gris */
/* la barre fixe fait 78 px : sans cette réserve, un saut d'ancre dépose le
   titre visé dessous et on croit avoir atterri au mauvais endroit */
html { scroll-padding-top: calc(var(--nav-h) + 18px); }
.dish-foot { display: flex; align-items: center; justify-content: space-between; }
.dish-price { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--forest); }
.dish-price small { font-size: var(--fs-2xs); color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; }
/* Les smoothies et les salades de fruits n'ont pas encore de prix public. Cet
   emplacement portait un slogan (« Vitaminés & gourmands ») à la place exacte
   du prix du bowl : le lecteur qui balaie la colonne des prix y lisait une
   phrase de marketing, ce qui souligne l'absence au lieu de la couvrir. Le
   lien renvoie là où le prix existe vraiment. Volontairement pas dessiné en
   prix : ni la famille de titrage, ni le corps de 1,35rem. */
.dish-voir {
  font-size: var(--fs-s); font-weight: 800; color: var(--forest);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(31,81,48,.35); transition: text-decoration-color .2s;
  /* 24 px de haut mesurés au doigt : la zone est étirée à 44 px sans bouger
     la ligne de base, grâce à la marge négative qui compense le rembourrage */
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -10px;
}
.dish-voir:hover { text-decoration-color: var(--forest); }
/* Trio pastel sur les 3 cartes */
.sign-grid .dish:nth-child(1) { background: var(--sage-soft); }
.sign-grid .dish:nth-child(2) { background: var(--apricot-soft); }
.sign-grid .dish:nth-child(3) { background: var(--rose-soft); }
/* pastilles unifiées en verre blanc : voir .dish-tag */

/* ============================================================
   COMPOSE · le builder
   ============================================================ */
.compose { background: var(--forest); color: var(--cream); position: relative; overflow: hidden; }
.compose::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 90% 0%, rgba(244,195,60,.14), transparent 60%); pointer-events: none; }
.compose .eyebrow { color: var(--gold); }
.compose h2 { color: #fff; }
.compose .section-head p { color: rgba(251,246,236,.92); }
.compose-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-l); padding: clamp(24px, 4vw, 44px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);   /* Safari, iOS compris */
}
.format-toggle { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.format-toggle .fmt {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 999px; padding: 12px 22px;
  color: var(--cream); font-weight: 800; display: flex; gap: 10px; align-items: center;
  transition: transform .3s cubic-bezier(.2,.9,.25,1), background .25s, border-color .25s, color .25s;
}
.format-toggle .fmt:active { transform: scale(.96); transition-duration: .09s; }
.bowl-reset { position: relative; isolation: isolate; overflow: hidden; }
.format-toggle .fmt b { color: #f7d15e; font-family: var(--font-head); }   /* doré éclairci : 4,85:1 sur la carte du composeur */
.format-toggle .fmt.active { background: var(--gold); color: var(--forest-deep); border-color: var(--gold); }
.format-toggle .fmt.active b { color: var(--forest-deep); }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-num { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--gold); color: var(--forest-deep); font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; }
.step-head .step-libelle, .bstep h3 { color: #fff; font-size: var(--fs-lg); font-family: var(--font-head); font-weight: 700; }
/* le titre reste dans le document pour la structure, mais c'est le bouton
   qui l'affiche : un <h3> ne peut pas vivre dans un <button> (HTML invalide) */
.bstep > .step-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.step-head .note { margin-left: auto; font-size: var(--fs-2xs); font-weight: 800; color: #fbe6a2; background: rgba(244,195,60,.12); padding: 4px 10px; border-radius: 999px; }

/* ---- Builder interactif + bowl live ---- */
.compose-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 34px; align-items: start; }
.compose-builder .format-toggle { margin-bottom: 24px; }
#steps { display: grid; gap: 22px; }
.bstep { }
.bstep .step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; width: 100%; text-align: left; cursor: pointer; }
.step-chev { display: none; width: 22px; height: 22px; flex: none; position: relative; transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.step-chev::before {
  content: ""; position: absolute; left: 5px; top: 6px; width: 9px; height: 9px;
  border-right: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(45deg);
}
.bstep .step-num { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--gold); color: var(--forest-deep); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-s); display: grid; place-items: center; }
.bstep h3 { color: #fff; font-size: var(--fs-md); }
.bstep .note { font-size: var(--fs-2xs); font-weight: 800; color: #fbe6a2; background: rgba(244,195,60,.12); padding: 4px 9px; border-radius: 999px; }
.bstep .cnt { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; color: rgba(251,246,236,.92); }
.bstep .cnt.full { color: var(--lime); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  padding: 7px 13px 7px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--cream);
  transition: transform .15s, background .2s, border-color .2s, color .2s; cursor: pointer;
}
.chip { position: relative; isolation: isolate; overflow: hidden; }
/* Pastille de couleur seule : les emoji ne distinguaient pas les ingrédients
   (3 fromages avec le même 🧀, 3 poissons avec le même 🐟), la couleur si. */
.chip .dot { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.10); transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.chip:active { transform: scale(.94); transition-duration: .09s; }
.chip.sel { background: var(--lime); color: var(--forest-deep); border-color: var(--lime); }
.chip.sel .dot { transform: scale(1.16); }
.chip.sel .dot { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12), 0 0 0 2px rgba(31,81,48,.15); }

/* ============================================================
   TRAITEMENT VERRE COMMUN À TOUTES LES CARTES
   (le fond de chaque carte est conservé : on n'ajoute que le
   liseré, le reflet interne et la profondeur)
   ============================================================ */
/* Le mélange : cerne franc et couleur pleine (cartoon) + matière de verre
   et lumière rasante (moderne). Le fond de chaque carte reste le sien. */
.feature, .dish, .value-card, .access-card,
.rev-card, .info-row, .rating-badge, .menucta-sheet, .bowl-card, .compose-card {
  border: 2px solid var(--forest-deep);
  backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  box-shadow:
    0 14px 34px -18px rgba(22,58,35,.42),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(22,58,35,.06);
  transition: transform .4s cubic-bezier(.2,.9,.25,1), border-color .3s;
}
/* fonds translucides : sans ça le flou n'a rien à révéler */
.feature      { background: rgba(255,255,255,.72); }
.access-card{ background: rgba(255,255,255,.66); }
.rev-card     { background: rgba(251,246,236,.80); }
.info-row     { background: rgba(255,255,255,.70); }
.rating-badge { background: rgba(251,246,236,.82); }
.sign-grid .dish:nth-child(1) { background: rgba(219,232,192,.78); }
.sign-grid .dish:nth-child(2) { background: rgba(251,216,176,.78); }
.sign-grid .dish:nth-child(3) { background: rgba(248,203,214,.78); }
.values-grid .value-card:nth-child(1) { background: rgba(219,232,192,.78); }
.values-grid .value-card:nth-child(2) { background: rgba(251,216,176,.78); }
.values-grid .value-card:nth-child(3) { background: rgba(248,203,214,.78); }
.values-grid .value-card:nth-child(4) { background: rgba(251,230,162,.78); }
/* sur fond vert foncé, le verre s'inverse */
/* Ces panneaux étaient du blanc à 9 % d'opacité, c'est à dire du verre pur :
   on voyait le vert au travers, et la section décrochait du reste du site où
   toutes les cartes sont posées entre 72 et 82 %. Ici c'est un vert plus
   profond que la section, à forte opacité : la surface redevient pleine,
   l'identité verte est conservée, et le texte crème y gagne du contraste. */
.compose-card, .bowl-card {
  background: rgba(16,44,26,.58);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 40px -20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 3px rgba(0,0,0,.14);
}
/* au survol : la carte se soulève, le cerne s'éclaire. Pas d'ombre ajoutée.
   .dish en est volontairement exclue (le cerne vert a été refusé). */
.feature:hover, .value-card:hover, .access-card:hover{
  transform: translateY(-5px);
  border-color: var(--avocado);
} .compose-card, .bowl-card {
  border-color: rgba(255,255,255,.24);
  box-shadow:
    0 14px 30px -14px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.12);
} .access-card, .rev-card { transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s, border-color .35s; } .access-card:hover { transform: translateY(-4px); }

/* ============================================================
   ACCÈS À LA CARTE (accueil)
   ============================================================ */
.menu-cta { background: var(--cream); position: relative; overflow: hidden; }

.menucta-band {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 56px); align-items: center;
  /* 72 % et 26 px de flou en faisaient le bloc le plus vaporeux du site,
     alors que les cartes voisines sont à 80 % avec 22 px. Aligné sur elles. */
  background: rgba(251,246,236,.86); color: var(--ink);
  backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  border-radius: var(--radius-l); padding: clamp(28px, 4.5vw, 52px);
  /* ombre franche : c'est elle qui décolle le bloc de l'orange */
  box-shadow: 0 34px 70px -26px rgba(112,56,20,.62),
              inset 0 1px 0 rgba(255,255,255,.9);
}
.menucta-copy h2 { color: var(--forest); margin-top: 12px; }
.menucta-copy > p { color: var(--ink); margin-top: 14px; max-width: 48ch; }
.menu-cta .eyebrow { color: var(--forest); }
/* Le troisième repère annonçait « 3 catégories : bowls, smoothies, fruits »,
   c'est à dire mot pour mot les trois cartes produits de la section juste
   au-dessus. Retiré : il ne restait que deux faits, et ils tiennent sur une
   ligne au lieu d'empiler 250 px sur un écran de téléphone. */
.menucta-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; }
.menucta-list li {
  display: flex; align-items: baseline; gap: 7px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(22,58,35,.14);
  border-radius: var(--radius-s); padding: 10px 14px; color: var(--ink); font-size: var(--fs-xs); font-weight: 700;
}
/* le chiffre passe sur la même ligne que son libellé : en bloc, chaque repère
   occupait deux lignes et la rangée entière retombait à la verticale */
.menucta-list b { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--forest); line-height: 1; }
.menucta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* la « fiche carte » cliquable */
/* La fiche gardait un flottement aléatoire, retiré : les amplitudes tirées au
   sort à chaque cycle la faisaient partir dans toutes les directions, et le
   mouvement se lisait comme un défaut plutôt que comme de la vie. */
.menucta-card { display: block; perspective: 900px; }
.menucta-sheet {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: linear-gradient(160deg, #fff, var(--cream-2));
  color: var(--forest); border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 40px) 26px;
  box-shadow: 0 26px 50px -20px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.7);
  transform: rotate(-2deg);
  transition: transform .45s cubic-bezier(.2,.9,.25,1), box-shadow .45s;
}
.menucta-card:hover .menucta-sheet { transform: rotate(0deg) translateY(-6px); box-shadow: 0 34px 60px -22px rgba(0,0,0,.6); }
.menucta-card:active .menucta-sheet { transform: rotate(0deg) translateY(-2px) scale(.99); }
.menucta-mark { width: 40px; height: 62px; display: block; }
.menucta-mark .logo-mark { width: 100%; height: 100%; }
.menucta-sheet b { font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: 600; }
.menucta-sheet > span:not(.menucta-mark):not(.menucta-open) { color: var(--ink-soft); font-size: var(--fs-s); }
.menucta-open { margin-top: 10px; font-weight: 800; color: var(--forest); font-size: var(--fs-s); }

/* Aperçu bowl */
.compose-preview { position: sticky; top: 96px; }
.bowl-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-l); padding: 24px; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bowl-wrap { position: relative; width: 100%; max-width: 320px; margin: 0 auto 6px; aspect-ratio: 1; }
.bowl-dish {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #fffdf7 0%, #f3ead6 62%, #e6d8bc 100%);
  box-shadow: inset 0 -10px 30px rgba(120,90,40,.18), inset 0 6px 20px rgba(255,255,255,.7), 0 26px 50px -18px rgba(0,0,0,.5);
  border: 9px solid #fff;
  overflow: hidden;
}
.bowl-base { position: absolute; inset: 12%; border-radius: 50%; opacity: 0; transition: opacity .4s, background .4s; }
.bowl-tokens { position: absolute; inset: 0; }
.token {
  position: absolute; width: 20%; height: 20%; transform: translate(-50%, -50%) scale(0);
  border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-lg);
  box-shadow: 0 4px 10px rgba(60,40,10,.22), inset 0 0 0 2px rgba(255,255,255,.55);
  animation: pop .38s cubic-bezier(.2,1.3,.4,1) forwards;
}
.token.more { background: var(--forest); color: #fff; font-size: var(--fs-xs); font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
@keyframes pop { to { transform: translate(-50%, -50%) scale(1); } }
.bowl-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 14%; color: rgba(38,48,42,.82); font-weight: 700; font-size: var(--fs-s); pointer-events: none; transition: opacity .3s; }
.bowl-empty span:first-child { font-size: var(--fs-4xl); }
.bowl-card.filled .bowl-empty { opacity: 0; }
.bowl-card.filled .bowl-base { opacity: 1; }
.bowl-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 4px 18px; }
/* Les deux repères chiffrés du composeur sont précisément ce qu'on vient y
   chercher, et c'étaient les deux seuls textes sous le seuil : le compteur
   tombait à 3,66:1 et le libellé du total à 3,13:1 sur le vert de la carte,
   pour un minimum requis de 4,5:1. Le crème plein les remonte au-dessus de 9:1
   sans rien changer à la hiérarchie, qui tient déjà par le corps et la graisse. */
.bowl-count { font-size: var(--fs-xs); font-weight: 700; color: var(--cream); text-align: left; line-height: var(--lh-titre); }
.bowl-price { text-align: right; }
.bowl-price small { display: block; font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--cream); }
/* d'où vient le total : sans cette ligne, « Regular + 2 suppléments » = 17,50€
   se confond avec le format Large, affiché au même prix juste au-dessus */
.bowl-detail { display: block; font-size: var(--fs-2xs); font-weight: 700; color: var(--gold-soft); margin-top: 2px; }
.bowl-detail[hidden] { display: none; }
.bowl-price b { font-family: var(--font-head); font-size: var(--fs-4xl); color: var(--gold); }
.bowl-card .btn { width: 100%; justify-content: center; }
/* Bloc d'actions, sorti de la carte d'aperçu. Il ferme la section sur les deux
   formats : sous les deux colonnes en desktop, après les étapes en mobile. */
/* ------------------------------------------------------------------
   VOTRE BOWL · le résultat, en toutes lettres
   Le composeur est le pic du site et sa sortie n'existait nulle part.
   Ce bloc n'apparaît qu'une fois quelque chose de sélectionné : tant que
   rien n'est coché, il n'y a rien à récapituler.
   ------------------------------------------------------------------ */
.bowl-recap {
  max-width: 560px; margin: 30px auto 0; padding: 22px 24px;
  background: rgba(16,44,26,.58); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-l); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-align: left;
}
.bowl-recap[hidden] { display: none; }
.bowl-recap h3 { color: var(--cream); font-size: var(--fs-xl); margin-bottom: 14px; }
.recap-liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.recap-liste dt {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--gold-soft); padding-top: 2px;
}
.recap-liste dd { margin: 0; color: var(--cream); font-weight: 700; font-size: var(--fs-s); }
.recap-total {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18);
  color: var(--cream); font-weight: 700; font-size: var(--fs-s);
}
.recap-total b { font-family: var(--font-head); font-size: var(--fs-2xl); color: var(--gold); margin-left: 6px; }
.recap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* `.btn-ghost` apporte son propre fond clair, pensé pour les sections crème.
   Posé tel quel sur le vert du composeur avec un texte crème, il tombait à
   1,43:1. Ici le bouton redevient un contour sur fond sombre. */
.recap-actions .btn {
  flex: 1 1 auto; justify-content: center;
  background: transparent; border: 2px solid rgba(251,246,236,.55); color: var(--cream);
}
.recap-actions .btn:hover { background: rgba(251,246,236,.14); border-color: var(--cream); }
.recap-echo { margin-top: 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--gold-soft); min-height: 1.2em; }

/* ---- Montrer au comptoir : lisible à bout de bras ---- */
.comptoir {
  border: none; padding: 0; background: transparent;
  max-width: min(560px, 92vw); width: 100%;
}
.comptoir::backdrop { background: rgba(11,29,18,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.comptoir-corps {
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius-l); padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  max-height: 88vh; overflow-y: auto;
}
.comptoir-marque {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-md); color: var(--forest);
}
.comptoir-marque .logo-mark { width: 22px; height: 34px; }
.comptoir h2 { font-size: var(--fs-3xl); color: var(--forest); margin-bottom: 18px; text-transform: none; letter-spacing: var(--ls-tight); }
.comptoir .recap-liste dt { color: var(--ink-soft); }
.comptoir .recap-liste dd { color: var(--ink); font-size: var(--fs-md); }
.comptoir-total {
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line);
  font-weight: 700; color: var(--ink);
}
.comptoir-total b { font-family: var(--font-head); font-size: var(--fs-4xl); color: var(--forest); margin-left: 8px; }
.comptoir-note { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-soft); }
.comptoir .btn { width: 100%; justify-content: center; margin-top: 20px; }

.compose-fin { max-width: 420px; margin: 26px auto 0; text-align: center; }
.compose-fin .btn { width: 100%; justify-content: center; }
.bowl-hint { color: rgba(251,246,236,.95); font-size: var(--fs-2xs); margin-top: 12px; }
.bowl-reset { margin-top: 12px; background: none; color: rgba(251,246,236,.8); font-weight: 700; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.bowl-reset:hover { color: var(--gold); }
.bowl-reset[hidden] { display: none; }

/* ============================================================
   GALERIE
   ============================================================ */
.gallery { background: var(--cream); }
/* ---- Carrousel auto-défilant : chaque photo entière, contour liquid glass ---- */
.carousel { position: relative; overflow: hidden; }
.car-track {
  display: flex; gap: 20px; width: max-content; padding: 8px 0 14px;
  animation: carScroll var(--car-duration, 90s) linear infinite;
}
.carousel:hover .car-track { animation-play-state: paused; }
@keyframes carScroll { to { transform: translateX(calc(-50% - 10px)); } }

.car-slide {
  flex: 0 0 auto; position: relative; isolation: isolate;
  border-radius: var(--radius); overflow: hidden;
  /* contour verre : liseré clair + reflet interne + halo doux */
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    0 10px 26px -12px rgba(31,81,48,.34),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 2px rgba(31,81,48,.10);
  background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  padding: 6px;
  transition: transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s, border-color .4s;
}
.car-slide img { height: 448px; width: auto; max-width: none; display: block; border-radius: 15px; }
.car-slide:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 20px 40px -14px rgba(31,81,48,.42), inset 0 1px 0 rgba(255,255,255,.8);
}
.car-slide:active { transform: translateY(-2px) scale(.99); }
@media (prefers-reduced-motion: reduce) {
  .car-track { animation: none !important; width: 100%; overflow-x: auto; }
}

/* ============================================================
   AVIS
   ============================================================ */

.reviews-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.rating-badge { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow-s); }
.rating-badge .score { font-family: var(--font-head); font-size: var(--fs-5xl); color: var(--forest); line-height: 1; }
.rating-badge .stars { color: var(--gold); font-size: var(--fs-md); letter-spacing: var(--ls-label); }
.rating-badge small { color: var(--ink-soft); font-weight: 700; }
/* même raison : mesuré à 23 px, il manquait un pixel */
.rating-badge a { display: inline-flex; align-items: center; min-height: 24px; }
/* ---- Bandeau d'avis défilant ---- */
.reviews-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rev-track {
  display: flex; gap: 20px; width: max-content;
  animation: revScroll var(--rev-duration, 40s) linear infinite;
}
.reviews-marquee:hover .rev-track,
.reviews-marquee:focus-within .rev-track { animation-play-state: paused; }
@keyframes revScroll { to { transform: translateX(-50%); } }
.rev-static .rev-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
.rev-static .rev-card:nth-child(n+4) { display: none; }
.rev-card {
  flex: 0 0 auto; width: min(360px, 78vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
}
.rev-card .stars { color: var(--gold); letter-spacing: var(--ls-label); margin-bottom: 12px; }
.rev-card p { font-size: var(--fs-s); color: var(--ink); flex: 1; }
.rev-card .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.rev-card .av { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--lime-soft); color: var(--forest); font-weight: 800; display: grid; place-items: center; }
.rev-card .who b { display: block; }
.rev-card .who small { color: var(--ink-soft); font-size: var(--fs-xs); }
.rev-track .rev-card:nth-child(3n+1) .av { background: var(--sage); }
.rev-track .rev-card:nth-child(3n+2) .av { background: var(--apricot); }
.rev-track .rev-card:nth-child(3n+3) .av { background: var(--rose); }
@media (prefers-reduced-motion: reduce) { .rev-track { animation: none !important; } }

/* ============================================================
   CONTACT
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: stretch; }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.info-row { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-s); }
.info-row .i-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--lime-soft); display: grid; place-items: center; font-size: var(--fs-xl); }
.contact-info .info-row:nth-child(1) .i-ico { background: var(--sage-soft); }
.contact-info .info-row:nth-child(2) .i-ico { background: var(--apricot-soft); }
.contact-info .info-row:nth-child(3) .i-ico { background: var(--rose-soft); }
.contact-info .info-row:nth-child(4) .i-ico { background: var(--sage-soft); }
.info-row h3 { font-family: var(--font-body); font-weight: 800; color: var(--forest); font-size: var(--fs-md); margin-bottom: 3px; }
.info-row p, .info-row a:not(.btn) { color: var(--ink-soft); font-size: var(--fs-s); }
/* WCAG 2.5.8 : 24 px de haut minimum. Mesurés à 21 px, le lien téléphone et
   le lien Instagram vivent SEULS sur leur ligne, sous leur intitulé — ils ne
   bénéficient donc pas de l'exception « lien au fil d'une phrase », qui ne
   vaut que pour un lien enchâssé dans du texte courant. Les pixels manquants
   sont pris en hauteur de ligne et non en marge, pour ne pas décaler la
   grille des trois cartes de contact. */
.info-row a:not(.btn) { display: inline-flex; align-items: center; min-height: 24px; }
.info-row .btn-primary { color: #fff; }
.info-row .btn-ghost { color: var(--forest); }
.info-row a:hover { color: var(--forest-deep); }
.hours-list { display: grid; gap: 4px; }
.hours-list div { display: flex; justify-content: space-between; gap: 20px; }
.hours-list .today { color: var(--forest); font-weight: 800; }
.map-embed { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); border: 6px solid #fff; min-height: 420px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--forest-deep); color: rgba(251,246,236,.8); padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer .brand-name { color: #fff; }
.footer p { font-size: var(--fs-s); margin-top: 14px; max-width: 320px; }
.footer h3 { color: #fff; font-family: var(--font-body); font-weight: 800; font-size: var(--fs-s); margin-bottom: 16px; letter-spacing: var(--ls-wide); }
.footer ul { display: grid; gap: 10px; }
.footer ul a { font-size: var(--fs-s); transition: .2s; }
.footer ul a:hover { color: var(--lime); }
/* WCAG 2.5.8 impose 24 px de haut À TOUTE LARGEUR, pas seulement au doigt.
   Ces liens n'avaient de plancher que sous 900 px (relevé à 44 px plus bas) :
   en desktop ils tombaient à 21 px. Le `gap: 10px` de la liste absorbe le
   gain, la hauteur du pied de page ne bouge quasiment pas. */
.footer-grid a:not(.brand) { display: inline-flex; align-items: center; min-height: 24px; }
.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: .25s; }
.socials a:hover { background: var(--lime); color: var(--forest-deep); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); }
.footer-bottom a:hover { color: var(--lime); }


/* mobile drawer */
/* Menu plein écran en verre : la page reste visible derrière, floutée.
   Le panneau ne glisse plus depuis la droite, il se révèle sur place, ce qui
   évite le grand aplat crème vide qu'on avait sur les larges écrans. */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.4vh, 14px);
  /* padding symétrique : sinon le centrage vertical est décalé par la nav */
  padding: calc(var(--nav-h) + 24px) 8vw calc(var(--nav-h) + 24px);
  background: rgba(251, 246, 236, .62);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; }

/* les entrées montent légèrement en apparaissant, en cascade */
.drawer > * {
  transform: translateY(14px); opacity: 0;
  transition: transform .5s cubic-bezier(.16,.84,.28,1), opacity .5s;
}
body.menu-open .drawer > * { transform: none; opacity: 1; }
body.menu-open .drawer > *:nth-child(1) { transition-delay: .06s; }
body.menu-open .drawer > *:nth-child(2) { transition-delay: .11s; }
body.menu-open .drawer > *:nth-child(3) { transition-delay: .16s; }
body.menu-open .drawer > *:nth-child(4) { transition-delay: .21s; }
body.menu-open .drawer > *:nth-child(5) { transition-delay: .27s; }
body.menu-open .drawer > *:nth-child(6) { transition-delay: .33s; }

.drawer a:not(.btn) {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.2rem); line-height: var(--lh-titre);
  letter-spacing: var(--ls-ui); color: var(--forest);
  text-align: center; padding: 6px 0; border: 0;
}
.drawer .btn { margin-top: clamp(14px, 3vh, 30px); justify-content: center; }
.drawer-lang { margin-top: clamp(18px, 4vh, 40px); display: flex; align-items: center; gap: 14px; }
/* le tiroir est un voile translucide : sa lisibilité dépend de ce qu'il y a
   derrière, et ouvert au-dessus du composeur en vert forêt ce libellé tombait
   à environ 3:1. Le vert de marque ne dépend plus du fond traversé. */
.drawer-lang > span { font-weight: 800; color: var(--forest); font-size: var(--fs-s); }
.drawer .lang { display: flex; background: rgba(255,255,255,.7); }
.drawer .lang button { padding: 10px 16px; font-size: var(--fs-s); }

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

/* ============================================================
   LIQUID GLASS · habillage des contrôles de la nav
   ============================================================ */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 6px 20px -8px rgba(31,81,48,.30),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 1px rgba(31,81,48,.06);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s;
}
/* reflet spéculaire, balayé au survol */
.glass::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.glass:hover {
  transform: translateY(-2px);
  background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  box-shadow:
    0 14px 30px -10px rgba(31,81,48,.34),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(31,81,48,.06);
}
.glass:hover::before { transform: translateX(120%); }
.glass:active { transform: translateY(0) scale(.975); box-shadow: 0 4px 12px -6px rgba(31,81,48,.34), inset 0 2px 5px rgba(31,81,48,.14); }

/* l'ondulation est définie une seule fois avec les boutons (.ripple) */

/* variante dorée : le CTA principal */
.btn-gold.glass {
  background: linear-gradient(150deg, rgba(244,195,60,.94), rgba(244,195,60,.72));
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 8px 22px -8px rgba(244,195,60,.75), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-gold.glass:hover {
  background: linear-gradient(150deg, rgba(247,206,88,1), rgba(244,195,60,.85));
  box-shadow: 0 16px 32px -10px rgba(244,195,60,.85), inset 0 1px 0 rgba(255,255,255,.85);
}

/* le sélecteur de langue en verre */
.lang.glass { padding: 4px; }
.lang.glass button { position: relative; z-index: 1; transition: color .25s, background .25s; }
.lang.glass button.active {
  background: var(--forest); color: #fff;
  box-shadow: 0 3px 10px -3px rgba(31,81,48,.55), inset 0 1px 0 rgba(255,255,255,.22);
}

/* la pastille de marque et le burger */
.brand.glass { padding: 7px 16px 7px 8px; }
.burger.glass { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  .glass, .glass::before { transition: none !important; }
  .glass::before { display: none; }
  .glass .ripple { animation: none !important; display: none; }
}

/* ============================================================
   PAGES INTÉRIEURES · en-tête, fil d'ariane
   ============================================================ */
.nav-links a.current { color: var(--forest); }
.nav-links a.current::after { width: 100%; }

.page-head {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(34px, 6vw, 66px)) 0 clamp(28px, 4vw, 48px);
  background: var(--cream);
}
.page-head .wrap { position: relative; z-index: 1; }
/* le dégradé d'en-tête se dissout vers le bas : sans ça, il finit sur une teinte
   plus foncée que la section suivante et dessine une ligne en travers de la page */
/* Seule page à porter cet en-tête : les mentions légales. Il était en casse
   normale à 3,4rem quand tous les autres h1 du site sont en capitales sur
   l'échelle d'affichage : la page semblait appartenir à un autre site. Même
   traitement, un cran plus bas, parce qu'une page administrative n'a pas à
   crier aussi fort qu'un titre de marque. */
.page-head h1 {
  font-family: var(--font-display, var(--font-head));
  text-transform: uppercase; letter-spacing: var(--ls-caps); line-height: var(--lh-display);
  font-size: var(--fs-d3); margin-top: 12px;
  max-width: 20ch; text-wrap: balance;
}
.page-head > .wrap > p {
  color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 16px; max-width: 58ch;
  text-wrap: pretty;
}

.breadcrumb { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--forest); }   /* l'avocat clair tombait à 2,13:1 sur le crème */
/* le fil d'ariane est une barre flex, ses liens sont donc des blocs et non du
   texte en ligne : ils tombaient à 22 px de haut, deux sous le minimum */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   PAGE HISTOIRE
   ============================================================ */
.story { background: var(--cream); position: relative; overflow: hidden; padding-top: clamp(34px,5vw,64px); }
.story-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 64px); align-items: start;
  position: relative; z-index: 1;
}
.story-copy p { color: var(--ink-soft); margin-bottom: 18px; max-width: 62ch; text-wrap: pretty; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy .story-lead { font-size: var(--fs-lead-l); color: var(--ink); font-weight: 600; line-height: var(--lh-corps); }
/* width:100% + justify-self (et NON margin:auto, qui annule l'étirement en grille
   et fait collapser la figure tant que l'image lazy n'est pas chargée) */
.story-figure { position: relative; margin: 0; padding-bottom: 26px; width: 100%; max-width: 390px; justify-self: center; }
.story-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 48% 52% 44% 56% / 46% 44% 56% 54%;
  border: 10px solid #fff; box-shadow: var(--shadow-l);
}
.story-figure figcaption {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(-4deg);
  font-size: var(--fs-d4); white-space: nowrap;
  background: var(--forest); color: var(--lime); padding: 6px 22px; border-radius: 999px; box-shadow: var(--shadow);
}

.values { background: var(--cream); position: relative; overflow: hidden; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; position: relative; z-index: 1; }
.value-card {
  border-radius: var(--radius); padding: 28px 26px; border: 1px solid var(--line);
  box-shadow: var(--shadow-s); transition: transform .3s, box-shadow .3s;
}
.value-card:hover { transform: translateY(-5px); }
.values-grid .value-card:nth-child(1) { background: var(--sage-soft); }
.values-grid .value-card:nth-child(2) { background: var(--apricot-soft); }
.values-grid .value-card:nth-child(3) { background: var(--rose-soft); }
.values-grid .value-card:nth-child(4) { background: var(--gold-soft); }
.value-card h3 { font-size: var(--fs-xl); margin-bottom: 10px; }
.value-card p { color: var(--ink-soft); font-size: var(--fs-s); text-wrap: pretty; }

.story-cta { background: var(--cream); padding-top: clamp(30px,4vw,56px); }
.cta-band {
  background: var(--forest); color: var(--cream); border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 46px); display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between; box-shadow: var(--shadow-l);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(251,246,236,.78); margin-top: 8px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   PAGE CONTACT · accès
   ============================================================ */
.access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; position: relative; z-index: 1; }
.access-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-s); }
.access-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.access-card p { color: var(--ink-soft); font-size: var(--fs-s); text-wrap: pretty; }

/* ============================================================
   PAGE MENTIONS LÉGALES
   ============================================================ */
.legal { background: var(--cream); }
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: var(--fs-d4); margin: 36px 0 12px; }
.legal-body p { color: var(--ink-soft); margin-bottom: 14px; line-height: var(--lh-prose); text-wrap: pretty; }
.legal-body b { color: var(--forest); }
.legal-todo {
  background: var(--apricot-soft); border: 1px solid var(--apricot);
  border-radius: var(--radius-s); padding: 16px 20px; color: var(--ink) !important;
}
.tofill { background: var(--gold-soft); padding: 1px 8px; border-radius: 5px; font-weight: 700; color: var(--forest-deep); }
.legal-updated { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-s); }

/* ============================================================
   IMPRESSION / PDF · la carte seule, propre
   ============================================================ */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  body::before { display: none; }
  .nav, .drawer, .compose, .breadcrumb,
  .footer, .lightbox, .marquee { display: none !important; }
  .page-head { padding: 0 0 8mm; }
  .page-head h1 { font-size: 26pt; }
  .section { padding: 0; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a[href]::after { content: ""; }
}

/* ============================================================
   LIGHTBOX GALERIE
   ============================================================ */
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(22,58,35,.94);
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 24px);
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lb-figure { max-width: min(1000px, 90vw); max-height: 86vh; display: flex; flex-direction: column; gap: 14px; }
.lb-figure img {
  max-width: 100%; max-height: 76vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: var(--shadow-l); background: var(--cream);
}
.lb-figure figcaption { color: rgba(251,246,236,.85); text-align: center; font-weight: 700; font-size: var(--fs-s); }
.lightbox button {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: var(--fs-3xl); line-height: 1;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lightbox button:hover { background: var(--gold); color: var(--forest-deep); transform: scale(1.06); }
.lb-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); font-size: var(--fs-4xl); }
@media (max-width: 620px) {
  .lightbox { padding: 12px; gap: 4px; }
  .lightbox button { width: 42px; height: 42px; font-size: var(--fs-xl); }
  .lb-figure img { max-height: 66vh; }
}

/* ---------- reveal (activé uniquement si JS présent → contenu visible par défaut) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Focus clavier visible ---------- */
:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; border-radius: 6px; }
.compose :focus-visible { outline-color: var(--gold); }
.footer :focus-visible { outline-color: var(--lime); }
.btn-primary:focus-visible { outline-color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .concept-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* APERÇU COLLANT DU COMPOSEUR
     Le bol était posé au-dessus des étapes, en statique. Mesuré à 375x812,
     étape « 4 ingrédients » ouverte et curseur au milieu de la liste : le bol
     se trouvait à bottom 4px, donc hors écran. On cochait six ingrédients sans
     qu'aucun retour ne soit visible, alors que la section promet « regardez
     votre bowl prendre forme ». La boucle de rétroaction était rompue sur
     l'appareil majoritaire.
     Deux choses rendent la barre collante possible ici, et il faut les garder
     ensemble : `flex` au lieu de `grid` sur la mise en page, car dans une
     grille un élément ne peut coller que dans sa propre ligne et l'aperçu en
     occupait une à lui seul ; et le déplacement des actions hors de la carte,
     sans quoi la barre ferait quatre cents pixels. Un bandeau fixe en bas
     d'écran, l'autre solution, a été écarté par le client. */
  /* `overflow: hidden` sur la section faisait d'elle le conteneur de
     défilement de référence : comme elle ne défile pas, l'aperçu ne collait
     jamais. `clip` découpe exactement pareil mais SANS créer de conteneur de
     défilement, donc le collage se règle de nouveau sur la fenêtre. Rien à
     rogner ici de toute façon : les lueurs de .compose vivent dans son
     `background`, qui ne déborde pas. */
  .compose { overflow: clip; }
  /* `align-items: start` vient de la grille desktop ; en colonne il pilote
     l'axe horizontal et laissait la barre à 227 px dans 293 px disponibles,
     avec les pastilles visibles à sa droite */
  .compose-layout { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .compose-preview {
    order: -1;
    position: sticky; top: calc(var(--nav-h) + 6px); z-index: 4;
  }
  .compose-preview .bowl-card {
    display: grid; grid-template-columns: 82px 1fr; align-items: center;
    gap: 14px; padding: 12px 16px; text-align: left;
    /* la barre passe devant les pastilles : sans fond opaque, les ingrédients
       défilent visiblement au travers */
    background: rgba(22,58,35,.92); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
  .compose-preview .bowl-wrap { max-width: 82px; margin: 0; }
  /* « Cliquez vos ingrédients pour composer votre bowl » ne tient pas dans
     82 px, et n'a plus lieu d'être : les pastilles sont juste dessous */
  .compose-preview .bowl-empty { display: none; }
  /* en ligne, le compteur et le prix ne tenaient pas dans les 165 px restants
     et repassaient à la ligne en se recentrant : ils s'empilent, calés à
     droite, ce qui donne une colonne d'information lisible d'un coup d'œil */
  .compose-preview .bowl-foot { display: block; margin: 0; text-align: right; }
  .compose-preview .bowl-count { text-align: right; margin-bottom: 4px; }
  .compose-preview .bowl-price { text-align: right; }
  .compose-preview .bowl-price small { font-size: var(--fs-2xs); }
  .compose-preview .bowl-price b { font-size: var(--fs-2xl); }
  .compose-preview .bowl-detail { text-align: right; }
  .bowl-wrap { max-width: 260px; }
  .menucta-band { grid-template-columns: 1fr; gap: 30px; }
  .menucta-card { max-width: 340px; margin-inline: auto; width: 100%; }
  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-figure { max-width: 420px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .rev-card { width: min(320px, 82vw); padding: 20px 22px; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-embed { min-height: 320px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .nav-links { display: none; }
  .nav .lang { display: none; }
  .burger { display: block; }
  /* compacté plutôt que supprimé : sur mobile c'est le seul accès direct
     à la commande, le reste est derrière le hamburger */
  .nav-cta { display: inline-flex; padding: 11px 16px; font-size: var(--fs-s); }
}
/* Sous 480 px, la pastille de marque, le bouton de commande et le hamburger
   ne tiennent plus sur une ligne : le wordmark passait sous le bouton. Le
   pictogramme suffit à identifier la marque, le bouton est l'action. */
@media (max-width: 480px) {
  .brand .brand-name { display: none; }
  /* Le nom disparaît, la pastille doit donc redevenir un disque. Elle restait
     une ellipse de 66x62 avec 9 px de marge à gauche et 17 à droite : le
     rembourrage asymétrique de `.brand.glass`, calibré pour la version avec
     le nom, l'emportait sur la règle mobile parce qu'il porte DEUX classes
     contre une. On reprend donc la même spécificité, et on fixe le carré
     plutôt que de compter sur le rembourrage. */
  .brand.glass {
    width: 58px; height: 58px; padding: 0; gap: 0;
    display: grid; place-items: center;
  }
  .brand .logo-mark { width: 27px; height: 42px; }
  .nav-cta { padding: 10px 14px; font-size: var(--fs-xs); }
}

/* Cibles tactiles : sur mobile, les liens de pied de page faisaient 21 px de
   haut et les boutons de langue 36 px. On les amène au seuil de 44 px sans
   changer la typographie, en jouant sur la zone cliquable. */
@media (max-width: 900px) {
  .footer-grid a:not(.brand), .footer-bottom a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .lang button, .drawer-lang button { min-height: 44px; padding-block: 10px; }
  .socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .rating-badge, .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .rating-badge a, .info-row a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { min-width: 44px; justify-content: center; }
}

@media (max-width: 620px) {
  /* le corps ne change plus de taille sous 620px : il vaut var(--fs-md) partout,
     et c'est l'échelle entière qui porte la hiérarchie, pas une exception mobile */
  .section { padding: 50px 0; }
  h2 { font-size: clamp(var(--fs-3xl), 7.4vw, 2.1rem); }
  .section-head { margin-bottom: 26px; }
  .section-head p { font-size: var(--fs-s); margin-top: 10px; }
  .eyebrow { font-size: var(--fs-2xs); }

  .feature { padding: 22px 20px; }
  .feature h3 { font-size: var(--fs-lg); }
  .feature .f-ico { width: 48px; height: 48px; font-size: var(--fs-xl); margin-bottom: 13px; }
  .dish-body { padding: 20px 20px 24px; }
  .dish-body h3 { font-size: var(--fs-lg); }
  .btn { padding: 13px 22px; font-size: var(--fs-s); }

  /* ------------------------------------------------------------------
     PHILOSOPHIE : les quatre cartes passent à l'horizontale
     Empilées, elles occupaient près de 1 000 px, soit plus d'un écran pour
     un bloc qui n'est qu'une mise en bouche. Elles défilent désormais une
     par une, en boucle, sur la hauteur d'une seule carte. La rangée reste
     un vrai conteneur de défilement : le geste du doigt fonctionne, et
     l'avance automatique ne fait que déplacer le même défilement.
     ------------------------------------------------------------------ */
  .concept-grid {
    display: flex; grid-template-columns: none;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    /* la carte affleure les bords : on rend la gouttière à l'intérieur du
       défilement, sinon la première et la dernière collent au cadre */
    margin-inline: -20px; padding: 4px 20px 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Le doigt ne pilote QUE l'axe horizontal ici. Sans cette ligne, un geste
       un peu oblique destiné à faire défiler la page était capté par la rangée :
       la page se bloquait pendant que les cartes partaient de travers.
       `pinch-zoom` est conservé, sinon on supprime le zoom à deux doigts. */
    touch-action: pan-x pinch-zoom;
    /* Et surtout : déclarer `overflow-x: auto` seul ne suffit PAS. En CSS,
       dès qu'un axe n'est plus `visible`, l'autre bascule de `visible` à
       `auto` : la rangée offrait donc 14 px de défilement VERTICAL, mesurés,
       et les cartes se baladaient de haut en bas. C'est la cause du « ça bouge
       dans tous les sens », `touch-action` seul ne l'aurait pas réglé. */
    overflow-y: hidden;
  }
  .concept-grid::-webkit-scrollbar { display: none; }
  .concept-grid > .feature {
    flex: 0 0 min(84vw, 380px); scroll-snap-align: center;
    /* toutes à la hauteur de la plus haute : sans ça la rangée sautille
       d'une carte à l'autre pendant l'avance automatique */
    display: flex; flex-direction: column;
  }
  .concept-grid > .feature p { margin-top: auto; }
  /* Corollaire du rognage vertical ci-dessus : l'apparition au scroll pose les
     cartes 28 px plus bas avant de les remonter, or il n'y a que 14 px de
     réserve sous elles — leur bas se serait fait couper pendant toute la
     transition. On garde le fondu, on retire le glissement : la rangée entre
     déjà dans le champ avec sa section, le glissement n'y ajoutait rien. */
  .js .concept-grid > .feature { transform: none; }

  /* repères de position, et seule commande visible : on sait combien il y a
     de cartes et où l'on en est, ce qu'un défilement muet ne dit pas */
  /* Le bouton EST la zone tactile, et la pastille n'est que son décor.
     Première tentative : une pastille de 8 px agrandie par un `::after` en
     `inset: -18px`. Mesuré au pointeur, les zones voisines se recouvraient et
     le repère suivant interceptait l'appui destiné au précédent, parce qu'il
     vient après dans le document. Ici les boutons se touchent sans jamais se
     chevaucher, et l'entraxe de 28 px reste celui d'une série de pastilles. */
  .concept-points { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
  .concept-points button {
    width: 28px; height: 36px; padding: 0; background: none;
    display: grid; place-items: center;
  }
  .concept-points button::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(22,58,35,.26); transition: background .3s, transform .3s;
  }
  .concept-points button[aria-current="true"]::before { background: var(--forest); transform: scale(1.4); }

  /* pages intérieures sur mobile */
  .page-head { padding: calc(var(--nav-h) + 26px) 0 32px; }
  .page-head h1 { font-size: clamp(var(--fs-4xl), 8.4vw, 2.5rem); max-width: 16ch; }
  .page-head > .wrap > p { font-size: var(--fs-s); margin-top: 12px; }
  .breadcrumb { font-size: var(--fs-xs); }
  .story-copy .story-lead { font-size: var(--fs-md); }
  .story-figure { max-width: 320px; padding-bottom: 22px; }
  .story-figure figcaption { font-size: var(--fs-lg); padding: 5px 16px; }
  .value-card, .access-card{ padding: 20px 20px; }
  .value-card h3, .access-card h3{ font-size: var(--fs-md); }
  .cta-band { padding: 26px 22px; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1; justify-content: center; }
  .legal-body h2 { font-size: var(--fs-lg); margin: 26px 0 10px; }
  .legal-body p { font-size: var(--fs-s); line-height: var(--lh-prose); }
  .map-embed { min-height: 260px; border-width: 5px; }
  .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* étapes repliables : la liste d'ingrédients ne mange plus tout l'écran */
  .bstep { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 4px; }
  .bstep .step-head {
    cursor: pointer; margin-bottom: 0; padding: 14px 0; min-height: 56px;
    -webkit-tap-highlight-color: transparent;
  }
  .step-chev { display: block; margin-left: 4px; }
  .bstep.open .step-chev { transform: rotate(-180deg); }
  .bstep .cnt { margin-left: auto; }
  .bstep:not(.open) .chip-row { display: none; }
  .bstep.open .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; animation: stepOpen .3s cubic-bezier(.2,.9,.25,1); }
  @keyframes stepOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .footer { padding-bottom: 104px; }
  .reviews-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
}

/* ============================================================
   ACCESSIBILITÉ · mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .token { animation: none !important; transform: translate(-50%, -50%) scale(1) !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HERO PLEIN ÉCRAN · trois panneaux « good mood »
   Registre repris de l'Instagram : aplats francs, lettrage gras
   et arrondi, très peu de texte. Un seul geste : entrer sur le site.
   ============================================================ */
:root { --font-display: "Fredoka", "Nunito", system-ui, sans-serif; }

/* ============================================================
   LE RECOUVREMENT
   La section suivante remonte PAR-DESSUS le hero, comme une feuille
   qu'on fait glisser, jusqu'à le couvrir entièrement.

   Ce qui compte ici, c'est ce que ça ne fait PAS.
   Le geste reste 1 pour 1 : on défile d'un écran, la feuille monte d'un
   écran, et la page ne fait pas un pixel de plus qu'une mise en page
   ordinaire. Rien n'est retenu, rien n'impose de durée.
   Et surtout, plus une seule ligne de JavaScript ne mesure quoi que ce
   soit. La version précédente calculait une course en `window.innerHeight`
   pendant que le CSS raisonnait en `svh` : les deux divergeaient de 60 à
   100 px dès qu'un navigateur mobile escamotait sa barre d'adresse, et la
   section reculait d'un coup. Ici la scène fait deux écrans en `svh`, le
   hero y colle pendant exactement un écran, et la feuille part d'un écran
   plus haut. Trois valeurs dans la même unité, aucune arithmétique : il
   n'y a plus rien qui puisse se désaccorder.
   ============================================================ */
.jj-stage { position: relative; height: 200vh; height: 200svh; }
.jj-after {
  position: relative; z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
  /* le bord arrondi est ce qui rend le glissement lisible : sans lui, deux
     aplats se succèdent et l'œil ne voit pas qu'une feuille passe dessus */
  border-radius: clamp(22px, 4vw, 46px) clamp(22px, 4vw, 46px) 0 0;
  box-shadow: 0 -22px 50px -14px rgba(22, 58, 35, .45);
}
/* animations réduites : plus de superposition, les deux sections se suivent
   simplement, avec le bord arrondi conservé pour garder le raccord dessiné */
@media (prefers-reduced-motion: reduce) {
  .jj-stage { height: auto; }
  .jj-hero  { position: relative; }
  .jj-after { margin-top: clamp(-40px, -3vw, -18px); }
}

.jj-hero {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; align-content: center; justify-items: center; isolation: isolate;
  padding: calc(var(--nav-h) + 12px) 0 12px;
  background: var(--forest-deep);
}
.jj-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.jj-panel { position: relative; overflow: hidden; }
.jj-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* voile teinté : unifie les trois photos et fait ressortir le lettrage */
.jj-panel::after {
  content: ""; position: absolute; inset: 0;
  background: var(--tint); mix-blend-mode: multiply;
  /* dosable par panneau : une photo au fond déjà saturé n'a pas besoin
     d'autant de voile qu'une photo claire, sinon elle vire au sombre */
  opacity: var(--tint-a, .30);
}

/* assombrissement central, sinon le titre se perd sur les zones claires */
.jj-panels::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(76% 52% at 50% 30%, rgba(22,58,35,.62), rgba(22,58,35,.16) 72%, transparent 100%),
    /* La bande du haut est passée de .42 à .60 sur les cent premiers pixels :
       les liens de navigation posés dessus mesuraient 4,19 à 4,37:1 selon le
       lien, sous les 4,5 requis, et la valeur bougeait en permanence puisque
       la photo dérive lentement en échelle. Assombrir le fond fixe le plancher
       une fois pour toutes, plutôt que d'éclaircir un texte déjà crème. */
    linear-gradient(180deg, rgba(22,58,35,.60) 0%, rgba(22,58,35,.30) 12%, transparent 30%, transparent 68%, rgba(22,58,35,.50) 100%);
}

/* --- entrée : les panneaux montent, puis le lettrage --- */
.js .jj-panel { transform: translateY(102%); }
.js .jj-hero.is-in .jj-panel {
  transform: translateY(0);
  transition: transform 1.15s cubic-bezier(.16,.84,.28,1);
}
.js .jj-hero.is-in .jj-panel:nth-child(2) { transition-delay: .10s; }
.js .jj-hero.is-in .jj-panel:nth-child(3) { transition-delay: .20s; }
/* respiration lente de l'image, comme un plan qui avance */
.jj-hero.is-in .jj-panel img { animation: jjDrift 22s ease-in-out infinite alternate; }
/* Respiration des panneaux : amplitude volontairement faible.
   Elle allait de 1,06 à 1,14 — en bout de course l'image était agrandie de
   14 %, le sujet devenait trop gros et le cadrage trop serré. Il y avait aussi
   une raison de qualité : la source fait 1500 px de haut, donc au-delà d'un
   écran de ~1316 px de haut le panneau la dépassait et l'image se ramollissait
   pile au moment le plus zoomé. Course ramenée à 5 % (1,02 → 1,07), ce qui
   repousse ce seuil à ~1400 px. Ne pas remonter le maximum. */
@keyframes jjDrift { from { transform: scale(1.02); } to { transform: scale(1.07); } }

.jj-inner { position: relative; z-index: 3; text-align: center; padding: 0 6vw; }

.jj-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 13vw, 9.5rem);
  line-height: var(--lh-huge); letter-spacing: -.035em;
  color: var(--cream); text-transform: uppercase; text-wrap: nowrap;
  /* Ombre portée noire : le lettrage est clair, une ombre blanche ne
     détacherait rien. Posée en `filter` sur le titre entier et non en
     `text-shadow` sur les lignes, car chaque ligne vit dans un masque
     `overflow:hidden` (l'animation d'entrée) qui rognerait l'ombre.
     Deux passes : une courte pour le contour, une longue pour l'assise. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)) drop-shadow(0 6px 22px rgba(0,0,0,.30));
}
.jj-line {
  display: block; overflow: hidden;
  /* Le `overflow: hidden` sert de masque vertical à l'animation d'entrée. Mais
     dès 900 px la boîte de la ligne épouse exactement le texte, et le
     `letter-spacing: -.035em` du titre s'applique AUSSI après la dernière
     lettre : la boîte finit plus étroite que les glyphes peints, et le masque
     rognait le flanc droit du D de MOOD (5 px à 152 px de police). Cette
     réserve latérale rend la place volée par la chasse négative. Symétrique
     pour ne pas décentrer le titre. Ne pas la retirer sans remettre le
     `letter-spacing` à zéro. */
  padding-inline: .08em;
}
.jj-line > span { display: block; }
.js .jj-line > span { transform: translateY(104%); }
.js .jj-hero.is-in .jj-line > span {
  transform: translateY(0);
  transition: transform .95s cubic-bezier(.16,.84,.28,1);
}
.js .jj-hero.is-in .jj-line:nth-child(1) > span { transition-delay: .34s; }
.js .jj-hero.is-in .jj-line:nth-child(2) > span { transition-delay: .42s; }
.js .jj-hero.is-in .jj-line:nth-child(3) > span { transition-delay: .50s; }
.js .jj-hero.is-in .jj-line:nth-child(4) > span { transition-delay: .58s; }
/* FOOD en vert lime, MOOD en orange : la couleur entre dès le premier écran.
   Corps très grand donc seuil 3:1 ; on est à 4,7 et 4,4. */
.jj-food > span { color: var(--lime); }
.jj-mood > span { color: #f7b267; }

.jj-sub {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-lead); color: rgba(251,246,236,.92);
  margin-top: clamp(18px, 3vw, 30px); letter-spacing: var(--ls-ui);
}
.jj-cta {
  font-family: var(--font-display); font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(24px, 3.4vw, 40px);
  padding: 17px 34px; border-radius: 999px;
  background: var(--cream); color: var(--forest-deep);
  font-size: var(--fs-lead);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s, background .3s;
}
.jj-cta svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.jj-cta:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -18px rgba(0,0,0,.65); }
.jj-cta:hover svg { transform: translateY(3px); }
.jj-cta:active { transform: translateY(0) scale(.97); }
.js .jj-sub, .js .jj-cta { opacity: 0; }
.js .jj-hero.is-in .jj-sub,
.js .jj-hero.is-in .jj-cta { opacity: 1; transition: opacity .8s ease .72s, transform .35s cubic-bezier(.2,.9,.25,1); }

/* filet animé en bas, invite à descendre */
.jj-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; width: 1px; height: 54px; background: rgba(251,246,236,.25); overflow: hidden; }
.jj-hint span { position: absolute; inset: 0; background: var(--lime); animation: jjHint 2.1s ease-in-out infinite; }
@keyframes jjHint { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* le zoom est piloté par le scroll (app.js) : rien à animer en CSS ici,
   on se contente de préparer les couches pour un rendu fluide */


/* la nav se pose en blanc sur le hero, puis reprend son style habituel */
/* Tiroir ouvert : le fond passe au crème, mais `on-hero` restait appliqué et
   peignait la croix et le wordmark en crème aussi, soit 1,00:1 : le bouton de
   fermeture était littéralement invisible. Le tiroir gagne sur le hero. */
body.menu-open .nav.on-hero .brand-name { color: var(--forest); }
body.menu-open .nav.on-hero .burger span { background: var(--forest); }
body.menu-open .nav.on-hero .brand,
body.menu-open .nav.on-hero .burger { background: rgba(255,255,255,.7); }
.nav.on-hero .brand-name { color: var(--cream); }
.nav.on-hero .nav-links a { color: var(--cream); }
.nav.on-hero .brand, .nav.on-hero .lang, .nav.on-hero .burger {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
}
.nav.on-hero .lang button { color: rgba(251,246,236,.85); }
.nav.on-hero .burger span { background: var(--cream); }

@media (max-width: 760px) {
  .jj-panels { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .js .jj-panel { transform: translateY(0) scale(1.04); opacity: 0; }
  .js .jj-hero.is-in .jj-panel { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.16,.84,.28,1), opacity .8s ease; }
  .jj-title { font-size: clamp(2.9rem, 17vw, 5rem); }
  .jj-hint { display: none; }
  /* Cadrage vertical du sujet, panneau par panneau.
     En 3 bandes empilées, chaque bande est en PAYSAGE (430x311) alors que la
     photo est en portrait 0,80 : `object-fit: cover` cale donc la largeur et
     ne laisse voir qu'environ 58 % de la hauteur, pris au centre par défaut.
     Or le produit n'occupe pas la même hauteur d'une source à l'autre — le
     gobelet de la salade descend jusqu'à 86 % de son image et se retrouvait
     coupé au ras du bas. Un centrage unique ne peut donc pas convenir aux
     trois : la valeur est réglée par panneau pour que chaque contenant tienne
     entier dans sa bande. Vérifié en 430x932 et en 375x667, où la bande se
     resserre à 47 % de l'image. Ne pas uniformiser ces trois valeurs. */
  /* Jeu de photos du 11/08 au soir : sujets recadrés larges, avec un tiers de
     fond au-dessus et en dessous. Les trois valeurs ci-dessous sont réglées
     pour que chaque produit tombe sous les éléments d'interface qui le
     surplombent : la barre de navigation occupe les 3,2 %-21,9 % de la 1re
     bande, le bouton « Découvrir » les 5,4 %-22,9 % de la 3e. Vérifié en
     430x932 et 375x667. Ne pas uniformiser ces trois valeurs. */
  .jj-panel:nth-child(1) img { object-position: 50% 34%; }
  .jj-panel:nth-child(2) img { object-position: 50% 40%; }
  .jj-panel:nth-child(3) img { object-position: 50% 34%; }
  /* Le bloc était calé en haut par un `align-content: start` doublé d'un
     padding de 15vh, sans rien pour l'équilibrer en bas. Mesuré sur 812 px :
     122 px au-dessus, 347 px en dessous. Le repère du bas est par ailleurs
     masqué sur mobile, donc plus rien n'occupait cet espace.
     Il se centre désormais dans la zone laissée libre par la barre : la
     réserve haute vaut la barre plus une marge, et l'écart au-dessus du
     lettrage égale l'écart sous le bouton. */
}
@media (prefers-reduced-motion: reduce) {
  .js .jj-panel, .js .jj-line > span { transform: none !important; opacity: 1 !important; }
  .js .jj-sub, .js .jj-cta { opacity: 1 !important; }
  .jj-hero .jj-panel img { animation: none !important; }
  .jj-hint span { animation: none !important; }
}

/* ============================================================
   APLATS DE SECTION · registre good mood
   Couleur pleine, texte vert foncé, aucun dégradé.
   ============================================================ */
.concept { background: var(--block-vert); }
.reviews { background: var(--block-rose); }
.menu-cta { background: var(--block-orange); position: relative; overflow: hidden; }

/* sur un aplat, tout le texte passe en vert foncé */
.concept h2, .concept h3, .reviews h2 { color: var(--forest-deep); }
.menu-cta > .wrap > .section-head h2 { color: var(--forest-deep); }
.menucta-band h2, .menucta-band .menucta-list b { color: var(--forest); }   /* bandeau en verre crème */
.concept .section-head p, .feature p, .access-card p { color: rgba(22,58,35,.82); }
/* le surtitre tombait à 3,41:1 sur le rose ; le vert le plus profond de la
   palette le remonte à 4,51:1, le h2 juste dessous tenait déjà grâce à sa taille */
.concept .eyebrow, .reviews .eyebrow { color: var(--forest-deep); }
.reviews .eyebrow { color: #0f2a19; }
.menucta-band .eyebrow { color: var(--forest); }   /* bandeau clair : accent foncé */
.reviews .rating-badge .score { color: var(--forest-deep); }

/* les cartes posées sur un aplat restent claires et cernées */
.concept .feature { background: rgba(251,246,236,.74); }
/* Ombre portée retirée sur ces cartes-là : le cerne vert suffit à les décoller
   de l'aplat, et l'ombre créait une salissure sous chaque carte. On garde les
   deux `inset`, qui ne débordent pas de la carte et font la matière (arête
   claire en haut, léger creux en bas). */
.concept .feature {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(22,58,35,.06);
}
.reviews .rev-card { background: rgba(251,246,236,.80); }
.reviews .rating-badge { background: rgba(251,246,236,.82); }

/* le bandeau carte devient vert foncé sur l'orange : contraste maximal */
.menucta-band { border: 2px solid var(--forest-deep); }
.menucta-sheet { border: 2px solid var(--forest-deep); box-shadow: none; background: rgba(251,246,236,.92); }

/* --- macaron tournant : la vie que la bande apportait, sans la couper le hero --- */
.jj-sticker {
  position: absolute; z-index: 4;
  right: clamp(18px, 4vw, 62px); bottom: clamp(18px, 5vh, 62px);
  width: clamp(104px, 11vw, 148px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.jj-sticker svg:first-child {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: jjSpin 18s linear infinite;
}
.jj-sticker text {
  font-family: var(--font-head); font-weight: 600;
  font-size: 15.5px; letter-spacing: .06em;
  fill: var(--cream);
}
.jj-sticker-core {
  width: 46%; height: 46%; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.42);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.jj-sticker-core .logo-mark { width: 42%; height: 66%; }
@keyframes jjSpin { to { transform: rotate(360deg); } }
.js .jj-sticker { opacity: 0; transform: scale(.7); }
.js .jj-hero.is-in .jj-sticker {
  opacity: 1; transform: scale(1);
  transition: opacity .7s ease .95s, transform .8s cubic-bezier(.2,1.2,.35,1) .95s;
}
@media (max-width: 760px) { .jj-sticker { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .jj-sticker svg:first-child { animation: none !important; }
  .js .jj-sticker { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   LUEURS DE SECTION
   Ce qui donne la profondeur n'est pas la lueur, c'est l'écart
   entre une zone éclairée et une zone qui ne l'est pas. D'où
   trois couches, toujours dans le même ordre :
     1. la lumière, TOUJOURS en haut à droite sur tout le site
        (une seule direction : deux sources s'annulent et le fond
        redevient plat) ;
     2. une lueur d'accent à gauche, dans une teinte de la DA,
        pour la couleur ;
     3. une ombre teintée en bas à gauche, à l'opposé exact de la
        lumière : c'est elle qui creuse, et elle manquait.
   Les ombres restent radiales et douces : un dégradé linéaire qui
   se termine sur une autre teinte redessinerait la coupure entre
   sections déjà corrigée sur .page-head.
   Un liseré latéral ferme la composition sans jamais toucher les
   bords haut et bas, donc sans risque de raccord visible.
   Alphas volontairement contenus : chaque valeur est mesurée pour
   garder le texte au-dessus de 4,5:1.
   ============================================================ */
.concept {
  background:
    radial-gradient(50% 56% at 86% 8%,  rgba(174,210,106,.74), transparent 62%),
    radial-gradient(42% 48% at 4% 44%,  rgba(244,195,60,.36),  transparent 64%),
    radial-gradient(52% 56% at 10% 96%, rgba(22,58,35,.09),    transparent 66%),
    linear-gradient(90deg, rgba(22,58,35,.07), transparent 20%, transparent 80%, rgba(22,58,35,.07)),
    var(--block-vert);
}
.signatures { background: var(--cream); }
.menu-cta {
  background:
    radial-gradient(52% 58% at 88% 6%,  rgba(251,230,162,.82), transparent 62%),
    /* seconde lueur, même jaune, en bas à gauche (demande client). L'ombre
       occupait ce coin : elle part en bas à droite, sinon les deux couches
       s'annulent et on perd à la fois la lueur et le relief. */
    radial-gradient(48% 54% at 6% 92%,  rgba(251,230,162,.64), transparent 64%),
    radial-gradient(42% 50% at 4% 46%,  rgba(224,122,95,.42),  transparent 64%),
    radial-gradient(50% 54% at 94% 96%, rgba(112,56,20,.26),   transparent 66%),
    linear-gradient(90deg, rgba(112,56,20,.11), transparent 20%, transparent 80%, rgba(112,56,20,.07)),
    var(--block-orange);
}
.gallery { background: var(--cream); }
.reviews {
  background:
    radial-gradient(50% 56% at 88% 6%,  rgba(251,230,162,.60), transparent 62%),
    radial-gradient(42% 50% at 4% 46%,  rgba(241,184,195,.60), transparent 64%),
    radial-gradient(52% 56% at 8% 98%,  rgba(104,36,54,.18),   transparent 66%),
    var(--block-rose);
}
.contact { background: var(--cream); }
.compose {
  background:
    radial-gradient(54% 60% at 84% 4%,  rgba(124,179,66,.44),  transparent 62%),
    radial-gradient(44% 52% at 4% 48%,  rgba(244,195,60,.16),  transparent 64%),
    radial-gradient(54% 58% at 8% 98%,  rgba(0,0,0,.40),       transparent 66%),
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 20%, transparent 80%, rgba(0,0,0,.14)),
    var(--forest);
} .story, .values, .legal { background: var(--cream); }
.page-head { background: var(--cream); }

/* ============================================================
   RAPPEL DE COULEUR ENTRE SECTIONS

   UNE SEULE LUEUR PAR JONCTION, et c'est la règle qui compte. Chaque
   section porte un halo en bas, teinté de la couleur de la section
   QUI SUIT : en arrivant sur la couture, l'œil voit déjà la teinte
   d'après. Aucune section ne porte de halo en haut.

   Trois principes, dans l'ordre où ils ont été trouvés :

   1. Ce sont des HALOS RADIAUX, pas des bandes. Toutes les lueurs du
      site sont des radiales décentrées ; une bande horizontale pleine
      largeur introduisait un langage étranger et se lisait comme un
      aplat sale plutôt que comme une lueur.

   2. Jamais deux halos près d'une même couture. L'étape précédente en
      posait un en bas de A et un en haut de B : même à des abscisses
      opposées, ça faisait deux taches de deux couleurs différentes
      autour d'une seule ligne, et la logique devenait illisible.

   3. Le point d'ancrage BALAIE la page au lieu d'alterner. Le chemin
      est gauche · milieu · droite · milieu · gauche · milieu · droite
      (18 %, 50 %, 82 %). Une alternance stricte 22/78 se lisait comme
      un métronome ; le balayage donne un ordre sans donner un rythme.

   Les alphas ne sont pas uniformes : une couleur sombre posée sur du
   clair pèse beaucoup plus qu'une claire sur du sombre. Chacune est
   mesurée pour laisser tous les textes au-dessus de 4,5:1.
   ============================================================ */
.concept {
  background:
    radial-gradient(circle var(--halo) at 18% 100%, rgba(251,246,236,.70), transparent 70%),
    radial-gradient(50% 56% at 86% 8%,   rgba(174,210,106,.74), transparent 62%),
    radial-gradient(42% 48% at 4% 44%,   rgba(217,232,184,.60), transparent 64%),
    radial-gradient(52% 56% at 6% 86%,   rgba(22,58,35,.09),    transparent 66%),
    linear-gradient(90deg, rgba(22,58,35,.07), transparent 20%, transparent 80%, rgba(22,58,35,.07)),
    var(--block-vert);
}
.signatures {
  background:
    radial-gradient(circle var(--halo) at 50% 100%, rgba(217,149,76,.52), transparent 70%),
    var(--cream);
}
.menu-cta {
  background:
    radial-gradient(circle var(--halo) at 82% 100%, rgba(31,81,48,.46), transparent 70%),
    radial-gradient(52% 58% at 88% 6%,   rgba(251,230,162,.82), transparent 62%),
    radial-gradient(48% 54% at 6% 92%,   rgba(251,230,162,.64), transparent 64%),
    radial-gradient(42% 50% at 4% 46%,   rgba(224,122,95,.42),  transparent 64%),
    radial-gradient(50% 54% at 94% 86%,  rgba(112,56,20,.26),   transparent 66%),
    linear-gradient(90deg, rgba(112,56,20,.11), transparent 20%, transparent 80%, rgba(112,56,20,.07)),
    var(--block-orange);
}
.compose {
  background:
    radial-gradient(circle var(--halo) at 50% 100%, rgba(251,246,236,.42), transparent 70%),
    /* .24 et non .40 comme ses voisines : le surtitre « L'EXPÉRIENCE
       AVOCADO » tombe à 56 px du bord, donc en pleine lueur. Mesuré,
       l'orange trop appuyé l'amenait sous le seuil de 4,5:1. */
    radial-gradient(54% 60% at 84% 4%,   rgba(124,179,66,.44),  transparent 62%),
    radial-gradient(44% 52% at 4% 48%,   rgba(174,210,106,.20), transparent 64%),
    radial-gradient(54% 58% at 6% 86%,   rgba(0,0,0,.32),       transparent 66%),
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 20%, transparent 80%, rgba(0,0,0,.14)),
    var(--forest);
}
.gallery {
  background:
    radial-gradient(circle var(--halo) at 18% 100%, rgba(227,124,137,.52), transparent 70%),
    var(--cream);
}
.reviews {
  background:
    radial-gradient(circle var(--halo) at 50% 100%, rgba(251,246,236,.62), transparent 70%),
    radial-gradient(50% 56% at 88% 6%,   rgba(248,203,214,.66), transparent 62%),
    radial-gradient(42% 50% at 4% 46%,   rgba(241,184,195,.60), transparent 64%),
    radial-gradient(52% 56% at 6% 86%,   rgba(104,36,54,.16),   transparent 66%),
    var(--block-rose);
}
.contact {
  background:
    radial-gradient(circle var(--halo) at 82% 100%, rgba(22,58,35,.26), transparent 70%),
    var(--cream);
}



/* ============================================================
   RACCORD ENTRE SECTIONS
   Les lueurs ne vivent plus dans le `background` de la section mais dans
   un calque masqué verticalement. Sans ça, chaque section redémarrait sa
   lueur à pleine intensité en haut et finissait sur une ombre en bas :
   deux sections crème qui se suivent montraient donc une ligne franche
   (52 points d'écart mesurés entre .page-head et .story). Avec le masque,
   les deux bords retombent sur le crème pur et le raccord est invisible.
   ============================================================ */
.signatures::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 56% at 88% 6%,  rgba(243,172,114,.60), transparent 62%),
    radial-gradient(42% 50% at 4% 46%,  rgba(198,214,166,.54), transparent 64%),
    radial-gradient(52% 56% at 8% 98%,  rgba(122,110,86,.15),  transparent 66%),
    linear-gradient(90deg, rgba(122,110,86,.06), transparent 20%, transparent 80%, rgba(122,110,86,.06)),
    transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.gallery::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 56% at 90% 6%,  rgba(182,205,140,.64), transparent 62%),
    radial-gradient(42% 50% at 4% 48%,  rgba(243,172,114,.46), transparent 64%),
    radial-gradient(52% 56% at 8% 98%,  rgba(122,110,86,.13),  transparent 66%),
    linear-gradient(90deg, rgba(122,110,86,.06), transparent 20%, transparent 80%, rgba(122,110,86,.06)),
    transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 56% at 90% 6%,  rgba(237,161,178,.54), transparent 62%),
    radial-gradient(42% 50% at 4% 46%,  rgba(182,205,140,.58), transparent 64%),
    radial-gradient(52% 56% at 8% 98%,  rgba(122,110,86,.13),  transparent 66%),
    linear-gradient(90deg, rgba(122,110,86,.06), transparent 20%, transparent 80%, rgba(122,110,86,.06)),
    transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

/* ============================================================
   FOND DE PAGE CONTINU (pages intérieures)
   Les lueurs par section donnaient à chacune sa bulle de lumière,
   séparée de la suivante par une bande de crème neutre : la page se
   lisait comme une pile de blocs. Ici un seul calque couvre toute la
   hauteur du document, et les foyers sont répartis en pourcentage de
   cette hauteur. Le fond devient un continuum, quel que soit le
   nombre de sections ou leur longueur.
   ============================================================ */
body[data-page="histoire"] main,
body[data-page="contact"] main,
body[data-page="legal"] main {
  position: relative;
  background: var(--cream);
}
/* les sections se laissent traverser : le fond appartient à la page */
body[data-page="histoire"] .page-head, body[data-page="histoire"] .section,
body[data-page="contact"]  .page-head, body[data-page="contact"]  .section,
body[data-page="legal"]    .page-head, body[data-page="legal"]    .section {
  background: transparent;
}
body[data-page="histoire"] main::before,
body[data-page="contact"]  main::before,
body[data-page="legal"]    main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* la lumière entre par le haut à droite, derrière le titre */
    radial-gradient(38% 15% at 86% 3%,   rgba(243,172,114,.60), transparent 66%),
    /* puis descend en zigzag d'un bord à l'autre, sans jamais se répéter */
    radial-gradient(34% 13% at 6% 20%,   rgba(182,205,140,.58), transparent 68%),
    radial-gradient(30% 12% at 92% 38%,  rgba(244,195,60,.34),  transparent 68%),
    radial-gradient(34% 13% at 4% 56%,   rgba(237,161,178,.40), transparent 68%),
    radial-gradient(30% 12% at 90% 73%,  rgba(182,205,140,.46), transparent 68%),
    radial-gradient(36% 14% at 8% 90%,   rgba(243,172,114,.36), transparent 68%),
    /* respiration froide très diffuse, pour que le crème ne vire pas au jaune */
    radial-gradient(70% 40% at 50% 50%,  rgba(122,110,86,.05),  transparent 70%),
    var(--cream);
}

/* ============================================================
   PAGE HISTOIRE : ouverture en continu
   Le bandeau photo teinté finissait à 88 % de vert foncé et tombait d'un
   coup dans le crème : une ligne nette en travers de la page, et une photo
   qu'on ne voyait plus sous la teinte. Ce registre reste sur contact, dont
   l'en-tête annonce un lieu. Ici l'ouverture partage le fond du récit, donc
   il n'y a plus de raccord à masquer, et l'image passe à côté du titre au
   lieu d'être dessous.
   ============================================================ */
.story-open {
  position: relative; z-index: 1;
  padding: calc(var(--nav-h) + clamp(26px, 5vw, 58px)) 0 clamp(20px, 3.5vw, 44px);
}
.open-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .82fr);
  gap: clamp(28px, 5vw, 66px); align-items: center;
}
.open-copy h1 {
  font-family: var(--font-display, var(--font-head));
  color: var(--forest); text-transform: uppercase;
  font-size: var(--fs-d2); line-height: var(--lh-display);
  /* capitales : le tracking négatif global collerait les lettres */
  letter-spacing: var(--ls-caps);
  /* mesuré : la ligne la plus longue des trois langues fait 15,1 ch. À 13 ch
     le titre cassait en trois lignes bancales (« DEUX » tout seul). */
  max-width: 16ch; margin-top: 14px; text-wrap: balance;
}
.open-lead {
  color: var(--ink-soft); font-size: var(--fs-lead);
  margin-top: 18px; max-width: 40ch; text-wrap: pretty;
}
/* même cadre blanc que la photo du récit : une seule grammaire d'image
   sur toute la page */
.open-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; }
.open-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-l); border: 10px solid #fff; box-shadow: var(--shadow-l);
  transform: rotate(1.4deg);
}

/* Le décor, en trois plans : la ville, ce qui y pousse, le comptoir.
   Décalés et très légèrement tournés, comme des tirages posés à plat. */
.story-bande { position: relative; z-index: 1; padding-block: clamp(22px, 3.6vw, 50px); }
.bande-shots {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px); align-items: start;
}
.bande-shots > li:nth-child(2) { margin-top: clamp(20px, 3.6vw, 48px); }
.bande-shots figure { margin: 0; }
.bande-shots img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 8px solid #fff; box-shadow: var(--shadow);
}
.bande-shots > li:nth-child(1) img { transform: rotate(-1.5deg); }
.bande-shots > li:nth-child(2) img { transform: rotate(1.1deg); }
.bande-shots > li:nth-child(3) img { transform: rotate(-.7deg); }
.bande-shots figcaption {
  margin-top: 14px; font-size: var(--fs-s); font-weight: 700; color: var(--forest);
  text-align: center; text-wrap: balance;
}

.page-head-media {
  padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(44px, 7vw, 90px);
  background: var(--forest-deep);
  isolation: isolate;
}
.page-head-media .ph-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-head-media .ph-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* teinte de marque par-dessus la photo, comme les panneaux du hero */
.page-head-media .ph-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,58,35,.42) 0%, rgba(22,58,35,.72) 62%, rgba(22,58,35,.88) 100%);
}
.page-head-media .wrap { position: relative; z-index: 1; }
.page-head-media h1 {
  font-family: var(--font-display, var(--font-head));
  color: #fff; text-transform: uppercase;
  font-size: var(--fs-d1); line-height: var(--lh-display); letter-spacing: var(--ls-caps);
  max-width: 16ch; margin-top: 14px;
}
.page-head-media > .wrap > p {
  color: rgba(251,246,236,.92); max-width: 46ch;
  font-size: var(--fs-lead); margin-top: 16px;
}
.page-head-media .breadcrumb { color: rgba(251,246,236,.78); }
.page-head-media .breadcrumb a { color: #fff; }

/* Le nom, traité comme un moment typographique plutôt qu'un paragraphe
   noyé dans le récit : c'est la respiration qui manquait à la page. */
.nom-bloc { padding-block: clamp(20px, 4vw, 56px); text-align: center; }
.nom-mot {
  font-family: var(--font-display, var(--font-head)); font-weight: 700;
  font-size: clamp(3rem, 12.5vw, 9.4rem); line-height: var(--lh-huge);
  /* capitales : un tracking négatif y collait les lettres */
  letter-spacing: var(--ls-caps); color: var(--forest);
  opacity: .26; user-select: none;
  /* le texte passe SOUS le mot, il ne s'y superpose plus */
  margin-bottom: .04em;
}
.nom-txt {
  position: relative; max-width: 46ch; margin-inline: auto;
  font-size: var(--fs-lead-l); line-height: var(--lh-corps);
  color: var(--ink); text-wrap: pretty;
}

/* la 4e carte se retrouvait seule sur sa ligne : deux colonnes régulières */
@media (min-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .page-head-media { padding-top: calc(var(--nav-h) + 44px); }
  .nom-mot { opacity: .22; }   /* légèrement sous le desktop : le mot est plus près du texte */
}

/* Ouverture et triptyque en une colonne. Trois vignettes côte à côte sur
   375 px feraient 100 px de large : illisibles. Elles s'empilent, calées
   sur la même largeur que la photo du récit. */
@media (max-width: 860px) {
  .open-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 38px); }
  .open-copy h1 { max-width: 16ch; }
  .open-lead { max-width: 52ch; }
  .open-figure { max-width: 340px; }
  .bande-shots { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .bande-shots > li { width: 100%; max-width: 340px; }
  .bande-shots > li:nth-child(2) { margin-top: 0; }
  /* Empilés en portrait 4:5, les trois tirages faisaient 1 482 px, soit près
     de deux écrans pour une respiration décorative. Recadrés en 4:3 ils
     tombent à 950 px sans qu'aucun ne disparaisse ni ne rétrécisse. */
  .bande-shots img { aspect-ratio: 4 / 3; object-fit: cover; }
}

/* Page introuvable : trois portes de sortie, rien d'autre. */
.e404-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.compose .eyebrow::before, .menucta-band .eyebrow::before { background: var(--gold); }

/* ============================================================
   CARROUSELS AU DOIGT
   Les deux bandes défilent en boucle et se mettent en pause au survol.
   Au doigt, il n'y a pas de survol : sur mobile les cartes passaient sous
   le pouce sans pouvoir être arrêtées ni parcourues, et aucune n'était
   lisible en entier. Sous 900 px, l'animation cède la place à un
   défilement horizontal natif, avec calage sur les cartes.
   ============================================================ */
@media (max-width: 900px) {
  .carousel, .reviews-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* même règle que la rangée philosophie : le geste vertical appartient à la
       page, pas au carrousel (cf. commentaire sur `.concept-grid`) */
    touch-action: pan-x pinch-zoom;
  }
  .carousel::-webkit-scrollbar, .reviews-marquee::-webkit-scrollbar { display: none; }
  /* le masque latéral rognait les cartes de bord : inutile sans défilement auto */
  .reviews-marquee { -webkit-mask-image: none; mask-image: none; }

  .car-track, .rev-track {
    animation: none !important;
    width: max-content;
    padding-inline: 16px;
  }
  .car-slide, .rev-card { scroll-snap-align: center; }
  /* une carte d'avis doit tenir en entier dans l'écran, sinon on lit un mot sur deux */
  .rev-card { width: min(84vw, 340px); flex: none; }
  /* sans défilement automatique, la seconde série ne sert plus à rien
     et ferait lire deux fois les mêmes avis */
  .rev-card[data-clone] { display: none; }
}

.lb-compteur { margin-top: 10px; font-size: var(--fs-s); font-weight: 800; color: rgba(251,246,236,.75); text-align: center; }
/* les clones du carrousel ne doivent pas être balayés une seconde fois */
@media (max-width: 900px) { .car-slide[data-clone] { display: none; } }
/* les photos paysage débordaient largement du viewport mobile */
/* Sur mobile la contrainte portait sur la LARGEUR : les six photos en format
   paysage tombaient à 210 px de haut quand les deux en portrait montaient à
   375 px, soit 165 px d'écart d'une carte à l'autre. La rangée était en dents
   de scie. C'est la hauteur qui est fixée désormais, comme en desktop : toutes
   les cartes partagent une ligne de base, chacune garde son format d'origine,
   et la valeur est calée pour qu'une photo en paysage tienne entièrement dans
   la largeur utile, sans recadrage ni débordement. */
@media (max-width: 900px) {
  /* 54vw et non 58 : la carte ajoute 12 px de rembourrage et 2 px de liseré
     autour de la photo. À 58vw la carte faisait 344 px pour 335 px utiles et
     dépassait de neuf pixels. */
  .car-slide img { height: clamp(176px, 54vw, 280px); width: auto; max-width: none; }
}

/* Menu ouvert : les contrôles de l'en-tête feraient doublon avec ceux du
   menu (un « Commander » et un sélecteur de langue de chaque côté). */
body.menu-open .nav-cta,
body.menu-open .nav .lang { display: none; }

/* Pictos des tuiles : au trait, dans le vocabulaire du logo. Ils remplacent
   les emoji, rendus par le système donc différents sur chaque appareil et
   souvent hors palette. */
.f-ico svg, .i-ico svg { width: 55%; height: 55%; color: var(--forest); }