/* ============================================================================
   FONDANT — le produit en gros plan, la couleur qui se mange.
   ----------------------------------------------------------------------------
   Pour ce qui se vend à l'unité et se photographie bien : cookies, pâtisserie,
   chocolat, glaces, épicerie fine. Le visiteur vient voir LE PRODUIT ; tout le
   reste est là pour lui en donner envie.

   ## Le parti pris, en trois gestes — et il n'y en a pas de quatrième

   1. **Le bord.** Chaque bande de couleur finit par des FESTONS — le bord
      d'un biscuit, d'un napperon — ou par une vague, jamais par un trait.
      Les festons sont un dégradé radial répété ; la vague un masque SVG.
      Les deux découpent ce qu'il y a dessous, quelle qu'en soit la couleur.

   2. **Le biscuit.** Le produit n'est pas posé en rond parfait mais dans un
      cercle dont le bord ondule (`assets/biscuit.svg`, en masque) : une
      photo prise sur une planche devient un biscuit posé sur sa couleur.
      L'ombre, douce et chaude, le décolle de la bande.

   3. **La pastille.** Le micro-libellé des autres thèmes devient une capsule
      de couleur : « Cette semaine », « Toujours là ». C'est l'étiquette sur
      la boîte.

   ## La grammaire : le canevas et la dalle

   Un fond uni (le canevas), sur lequel sont posés des blocs très arrondis
   (les dalles) en retrait des bords. Rayon 28 px par défaut, boutons en
   pilule quoi qu'il arrive. Aucun filet gris entre deux sections : c'est le
   fond et l'espace qui séparent.

   ## Les surfaces

   Une classe `teinte-*` ne fait qu'UNE chose : poser `--fond` et
   `--fond-encre`. Elle ne peint rien. Ce sont les éléments qui savent être
   une surface — `.section`, `.bandeau`, `.ruban`, `.carte`, `.pied` — qui
   lisent ces deux variables et se peignent. C'est ce qui permet à une saveur
   de porter sa teinte sans devenir un bloc coloré quand elle est en rang, et
   d'en devenir un quand elle est en carte.
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --f-systeme: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-micro: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Les six pastels des saveurs. Fixes, accordés entre eux : six couleurs
     qui vont ensemble font une palette, six couleurs libres un accident. */
  --rose: #f3c3c6;
  --jaune: #f4dfa4;
  --menthe: #d3e5bd;
  --lavande: #d9cbe6;
  --peche: #f8cfae;
  --ciel: #d3e1e9;

  /* Calculés depuis le couple canevas/encre, jamais écrits en dur : une
     édition qui inverse les deux garde ses gris justes. */
  --filet: color-mix(in srgb, var(--encre) 12%, transparent);
  --texte-doux: color-mix(in srgb, var(--encre) 72%, var(--canevas));
  /* L'accent REMPLIT, il n'écrit pas : un rose dragée en 13 px sur du
     blanc tombe à 1,6:1. Ce qu'on écrit en accent passe par ici. */
  --accent-lisible: color-mix(in oklab, var(--accent) 40%, var(--encre));

  --r-carte: calc(var(--r, 24px) * 0.75);
  --trait: 1.5px;
  /* Douce et CHAUDE : teintée d'encre cacao, jamais de noir. Une ombre
     grise sur un fond crème fait sale. */
  --ombre: 0 22px 44px -22px color-mix(in srgb, var(--encre) 55%, transparent);
  --marge: clamp(1rem, 3vw, 2rem);

  --t-affiche: clamp(2.75rem, 7.2vw, 6rem);
  --t-1: clamp(2.1rem, 4.6vw, 3.6rem);
  --t-2: clamp(1.5rem, 2.4vw, 2.1rem);
  --t-base: 1.0625rem;
}
[data-ombre="aucune"] { --ombre: none; }
[data-ombre="dure"] { --ombre: 6px 6px 0 var(--encre); --trait: 2px; }

body {
  margin: 0;
  background: var(--canevas);
  color: var(--encre);
  font-family: var(--f-texte, var(--f-systeme));
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.saut { position: absolute; left: -9999px; }
.saut:focus {
  left: 1rem; top: 1rem; z-index: 50;
  background: var(--encre); color: var(--canevas);
  padding: 0.75rem 1rem; border-radius: 999px;
}

.enveloppe {
  width: calc(100% - var(--marge) * 2);
  max-width: var(--largeur, 1280px);
  margin-inline: auto;
}

/* ── Les teintes : des variables, pas de la peinture ───────────────────── */

.teinte-accent  { --fond: var(--accent);  --fond-encre: var(--sur-accent); }
.teinte-profond { --fond: var(--profond); --fond-encre: var(--profond-encre); }
.teinte-encre   { --fond: var(--encre);   --fond-encre: var(--canevas); }
.teinte-dalle   { --fond: var(--dalle);   --fond-encre: var(--encre); }
.teinte-canevas { --fond: var(--canevas); --fond-encre: var(--encre); }
.teinte-rose    { --fond: var(--rose);    --fond-encre: var(--encre); }
.teinte-jaune   { --fond: var(--jaune);   --fond-encre: var(--encre); }
.teinte-menthe  { --fond: var(--menthe);  --fond-encre: var(--encre); }
.teinte-lavande { --fond: var(--lavande); --fond-encre: var(--encre); }
.teinte-peche   { --fond: var(--peche);   --fond-encre: var(--encre); }
.teinte-ciel    { --fond: var(--ciel);    --fond-encre: var(--encre); }

/* ── La typographie ──────────────────────────────────────────────────────
   Un empattement souple, gras, serré à −0,025 em, interligne à 1. Ce qui
   empêche un titre de 6 rem d'être criard n'est pas sa taille, c'est le
   resserrement — et une grotesque se serre plus qu'un empattement, d'où
   la valeur plus douce ici (l'édition Cookie la resserre davantage).
   ─────────────────────────────────────────────────────────────────────── */

.titre {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
.titre-geant { font-size: var(--t-affiche); }
.titre-section { font-size: var(--t-1); }
/* Le mot surligné : un fond d'accent, comme un coup de marqueur. Sur une
   bande déjà en accent, le marqueur passe en encre — sinon il disparaît. */
.titre em {
  font-style: normal;
  background: var(--accent);
  color: var(--sur-accent);
  padding: 0 0.12em;
  margin: 0 -0.02em;
  border-radius: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.teinte-accent .titre em,
.teinte-rose .titre em, .teinte-jaune .titre em, .teinte-menthe .titre em,
.teinte-lavande .titre em, .teinte-peche .titre em, .teinte-ciel .titre em {
  background: var(--encre);
  color: var(--canevas);
}
.teinte-profond .titre em, .teinte-encre .titre em {
  background: var(--accent);
  color: var(--sur-accent);
}

.section-tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 60ch;
  margin-bottom: calc(clamp(2rem, 4vw, 3.5rem) * var(--k-densite, 1));
}
.section-tete--centre { align-items: center; text-align: center; margin-inline: auto; }
.section-texte {
  font-size: 1.125rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: 52ch;
}
.section-pied { display: flex; justify-content: center; margin-top: calc(2.5rem * var(--k-densite, 1)); }

/* Sur une surface colorée, le texte doux se calcule depuis SA couleur. */
[class*="teinte-"] .section-texte,
[class*="teinte-"] .saveur-texte p,
[class*="teinte-"] .ingredient-detail,
[class*="teinte-"] .faq-reponse { color: color-mix(in srgb, var(--fond-encre, var(--encre)) 78%, var(--fond, var(--canevas))); }

/* ── La pastille ─────────────────────────────────────────────────────────
   Un mot dans une capsule. Elle se pose en accent sur le canevas, et
   s'INVERSE sur les surfaces colorées : une pastille rose sur une bande rose
   n'existe plus.
   ─────────────────────────────────────────────────────────────────────── */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.pastille--encre,
.teinte-accent .pastille,
.teinte-rose .pastille, .teinte-jaune .pastille, .teinte-menthe .pastille,
.teinte-lavande .pastille, .teinte-peche .pastille, .teinte-ciel .pastille {
  background: var(--encre);
  color: var(--canevas);
}
.teinte-profond .pastille, .teinte-encre .pastille {
  background: var(--accent);
  color: var(--sur-accent);
}

/* ── Les boutons ─────────────────────────────────────────────────────────
   Toujours des pilules. Aucun halo : au survol, le fond change de deux crans
   et la flèche avance. Une seule propriété animée par élément.
   ─────────────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--encre);
  color: var(--canevas);
  border: var(--trait) solid var(--encre);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
.bouton span { display: inline-flex; align-items: center; gap: 0.55rem; }
.bouton span::after {
  content: "→";
  display: inline-block;
  transition: transform 0.18s ease;
}
.bouton:hover { background: color-mix(in srgb, var(--encre) 84%, var(--canevas)); }
.bouton:hover span::after { transform: translateX(4px); }

.bouton-clair {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.bouton-clair:hover { background: var(--encre); color: var(--canevas); border-color: var(--encre); }
.bouton-accent { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bouton-accent:hover { background: color-mix(in srgb, var(--accent) 82%, var(--encre)); border-color: transparent; }
.bouton-large { width: 100%; height: 3.5rem; }

/* Sur la bande profonde, le bouton plein s'inverse — un bouton noir sur du
   noir n'est pas un bouton. */
.teinte-profond .bouton:not(.bouton-clair):not(.bouton-accent),
.teinte-encre .bouton:not(.bouton-clair):not(.bouton-accent) {
  background: var(--profond-encre);
  color: var(--profond);
  border-color: var(--profond-encre);
}
.teinte-profond .bouton-clair:hover, .teinte-encre .bouton-clair:hover {
  background: var(--profond-encre);
  color: var(--profond);
  border-color: var(--profond-encre);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.1rem;
}
.lien-fleche::after { content: "→"; transition: transform 0.18s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ── La carte ────────────────────────────────────────────────────────────
   Fond, trait d'encre, arrondi, ombre dure. Tout ce qui est « une boîte
   posée » passe par ici : avis, formulaire, questions, photos d'histoire.
   ─────────────────────────────────────────────────────────────────────── */

.carte {
  background: var(--fond, var(--canevas));
  color: var(--fond-encre, var(--encre));
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre);
}

/* ── L'annonce ─────────────────────────────────────────────────────────── */

.annonce-cadre { padding-top: var(--marge); }
.annonce {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}
.annonce a { font-weight: 800; text-underline-offset: 3px; }

/* ── L'en-tête : menu, MARQUE AU CENTRE, bouton ────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--canevas);
}
.entete-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
}
.entete--gauche .entete-inner { grid-template-columns: auto 1fr auto; }
.entete--gauche .marque { order: -1; }
.entete--gauche .nav { justify-self: center; }

.marque {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
  justify-self: center;
}
.nav {
  display: flex;
  gap: 0.15rem;
  justify-self: start;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav a {
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.nav a:hover { background: var(--dalle); }
.entete-actions { justify-self: end; display: flex; gap: 0.5rem; }
.entete-actions .bouton { height: 2.75rem; padding-inline: 1.25rem; font-size: 0.9rem; }

/* Le menu replié : un `<details>`, seul repli sans script. */
.menu-mobile { display: none; position: relative; justify-self: start; }
.menu-mobile summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-trait {
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.menu-mobile-liste {
  position: fixed;
  left: 0; right: 0;
  top: 4.75rem;
  background: var(--canevas);
  border-bottom: var(--trait) solid var(--encre);
  padding: 1rem var(--marge) 1.5rem;
  display: grid;
  gap: 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.menu-mobile-liste a { text-decoration: none; padding: 0.6rem 0; }
.menu-mobile-liste .bouton { justify-content: center; margin-top: 0.75rem; }

/* ── Les sections et leurs surfaces ────────────────────────────────────── */

.section {
  position: relative;
  padding-block: calc(clamp(4rem, 8vw, 7rem) * var(--k-densite, 1));
  background: var(--fond, transparent);
  color: var(--fond-encre, inherit);
}

/* La vague : un masque sur le bas de la bande. Le dégradé plein couvre tout
   sauf les 80 derniers pixels, la vague les découpe. Ce qui apparaît dans
   le creux est ce qu'il y a dessous — le canevas, ou la bande suivante. */
.vague {
  padding-bottom: calc(clamp(4rem, 8vw, 7rem) * var(--k-densite, 1) + 80px);
  -webkit-mask-image: linear-gradient(#000, #000), var(--vague);
  mask-image: linear-gradient(#000, #000), var(--vague);
  -webkit-mask-size: 100% calc(100% - 79px), 100% 80px;
  mask-size: 100% calc(100% - 79px), 100% 80px;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Les festons : un demi-cercle par tuile de 56 px, répété sur toute la
   largeur — le bord d'un biscuit. Aucun fichier, c'est un dégradé. */
[data-bord="festons"] .vague {
  padding-bottom: calc(clamp(4rem, 8vw, 7rem) * var(--k-densite, 1) + 28px);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(28px circle at 50% 0, #000 98%, transparent 100%);
  mask-image: linear-gradient(#000, #000), radial-gradient(28px circle at 50% 0, #000 98%, transparent 100%);
  -webkit-mask-size: 100% calc(100% - 27px), 56px 28px;
  mask-size: 100% calc(100% - 27px), 56px 28px;
  -webkit-mask-position: top, bottom left;
  mask-position: top, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}
[data-bord="droit"] .vague {
  -webkit-mask: none;
  mask: none;
  padding-bottom: calc(clamp(4rem, 8vw, 7rem) * var(--k-densite, 1));
}

/* ── Le bandeau ────────────────────────────────────────────────────────── */

.bandeau {
  position: relative;
  overflow: hidden;
  background: var(--fond, var(--accent));
  color: var(--fond-encre, var(--sur-accent));
  padding-block: calc(2.5rem * var(--k-densite, 1)) calc(3rem * var(--k-densite, 1));
}
.bandeau.vague { padding-bottom: calc(3rem * var(--k-densite, 1) + 80px); }
[data-bord="festons"] .bandeau.vague { padding-bottom: calc(3rem * var(--k-densite, 1) + 28px); }
[data-bord="droit"] .bandeau.vague { padding-bottom: calc(3rem * var(--k-densite, 1)); }
.bandeau-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.bandeau-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.bandeau-chapo {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  max-width: 46ch;
  margin: 0;
}
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Le produit découpé en biscuit, qui flotte. Derrière lui, un disque du
   canevas à moitié transparent : il décolle la photo de la bande sans la
   cerner. Le masque est posé sur l'image et l'ombre sur le disque : un
   élément masqué perd son ombre, c'est la règle de `mask`. */
.bandeau-visuel {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  justify-self: center;
}
.bandeau-visuel::before {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--canevas) 35%, transparent);
  box-shadow: var(--ombre);
}
.bandeau-visuel img,
.bandeau-visuel-vide {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dalle);
  -webkit-mask-image: var(--biscuit);
  mask-image: var(--biscuit);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  animation: flotte 7s ease-in-out infinite;
}
[data-ombre="dure"] .bandeau-visuel::before { box-shadow: none; }
[data-ombre="dure"] .bandeau-visuel img { -webkit-mask: none; mask: none; border-radius: 50%; box-shadow: var(--ombre); }
@keyframes flotte {
  50% { transform: translateY(-14px) rotate(2deg); }
}

.arguments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.arguments li { display: flex; align-items: center; gap: 0.5rem; }
.arguments li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--encre);
  color: var(--canevas);
  font-size: 0.72rem;
  flex: none;
}

/* L'ambiance : la photo couvre la bande, un voile monte du bas. */
.bandeau--ambiance {
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.bandeau--ambiance::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fond-bandeau);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.bandeau--ambiance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.12) 75%, rgba(0, 0, 0, 0.25) 100%);
}
.bandeau--ambiance .bandeau-inner { grid-template-columns: 1fr; padding-top: 30vh; }
.bandeau--ambiance .titre em { background: var(--accent); color: var(--sur-accent); }
.bandeau--ambiance .pastille { background: #fff; color: var(--encre); }
.bandeau--ambiance .bouton { background: #fff; color: var(--encre); border-color: #fff; }
.bandeau--ambiance .bouton-clair { background: transparent; color: #fff; border-color: #fff; }
.bandeau--ambiance .bouton-clair:hover { background: #fff; color: var(--encre); }
.bandeau--ambiance .arguments li::before { background: #fff; color: var(--encre); }

/* ── Le ruban ──────────────────────────────────────────────────────────── */

.ruban {
  display: flex;
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--fond, var(--encre));
  color: var(--fond-encre, var(--canevas));
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ruban-piste {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: none;
  min-width: max-content;
  padding-right: 2.5rem;
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  animation: ruban 36s linear infinite;
}
.ruban-piste i { font-style: normal; font-size: 0.75em; color: var(--accent); }
.teinte-accent.ruban i, .teinte-jaune.ruban i, .teinte-menthe.ruban i { color: var(--encre); opacity: 0.6; }
.ruban:hover .ruban-piste { animation-play-state: paused; }
@keyframes ruban { to { transform: translateX(-100%); } }

/* ── Les saveurs ───────────────────────────────────────────────────────── */

.visuel-rond {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0;
  justify-self: center;
}
/* La teinte de la saveur, en carré adouci derrière le biscuit : c'est ce
   qui fait « la boîte » même sur une photo prise sur une planche. Les
   biscuits ne sont pas tous tournés pareil : le rang impair penche à
   gauche, le rang pair à droite — deux biscuits identiques côte à côte se
   liraient comme un tampon. */
.visuel-rond::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 42%;
  background: var(--fond, var(--dalle));
  box-shadow: var(--ombre);
}
.visuel-rond img,
.visuel-rond-vide {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--canevas);
  -webkit-mask-image: var(--biscuit);
  mask-image: var(--biscuit);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: rotate(-4deg);
}
.saveur:nth-child(even) .visuel-rond img { transform: rotate(5deg); }
[data-ombre="dure"] .visuel-rond::before { box-shadow: none; }
[data-ombre="dure"] .visuel-rond img { -webkit-mask: none; mask: none; border-radius: 50%; box-shadow: var(--ombre); transform: none; }

.saveurs--rangs .saveurs-liste { display: grid; }
.saveurs--rangs .saveur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: calc(clamp(2rem, 4vw, 3.5rem) * var(--k-densite, 1));
}
.saveurs--rangs .saveur:nth-child(even) .visuel-rond { order: 2; }
.saveur-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.saveur-nom { font-size: var(--t-1); }
.saveur-texte p { margin: 0; color: var(--texte-doux); max-width: 46ch; font-size: 1.0625rem; }
.saveur-pied { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.saveur-prix { font-weight: 800; font-size: 1.05rem; }
/* En rang, la saveur porte sa teinte pour le disque de sa photo, pas pour
   son texte : la pastille et le texte doux restent ceux du canevas. */
.saveurs--rangs .saveur .pastille { background: var(--accent); color: var(--sur-accent); }
.saveurs--rangs .saveur-texte p { color: var(--texte-doux); }

.saveurs--grille .saveurs-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.saveurs--grille .saveur {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--fond, var(--dalle));
  color: var(--encre);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r, 24px);
  box-shadow: var(--ombre);
  transition: transform 0.2s ease;
}
.saveurs--grille .saveur:hover { transform: translateY(-4px); }
[data-ombre="dure"] .saveurs--grille .saveur:hover { transform: translate(-3px, -3px); }
.saveurs--grille .visuel-rond { max-width: 240px; align-self: center; margin-top: 0.5rem; }
.saveurs--grille .visuel-rond::before { background: color-mix(in srgb, var(--canevas) 45%, transparent); }
.saveurs--grille .saveur-nom { font-size: var(--t-2); }
.saveurs--grille .saveur-texte p { font-size: 0.95rem; }
.saveurs--grille .saveur-pied { margin-top: auto; }

/* ── Les ingrédients ───────────────────────────────────────────────────── */

.ingredients-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ingredient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: clamp(120px, 14vw, 170px);
  text-align: center;
}
.ingredient-visuel {
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: var(--trait) solid var(--encre);
  box-shadow: var(--ombre);
  background: var(--dalle);
}
/* L'image porte elle-même son carré : une figure à `aspect-ratio` seule
   laissait une image SVG sans hauteur intrinsèque décaler l'étiquette. */
.ingredient-visuel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ingredient:nth-child(odd) .ingredient-visuel { transform: rotate(-3deg); }
.ingredient-nom { font-weight: 800; font-size: 1.05rem; margin-top: 0.4rem; }
.ingredient-detail { font-size: 0.85rem; color: var(--texte-doux); }

/* ── L'histoire ────────────────────────────────────────────────────────── */

.histoire-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.histoire--droite .histoire-visuel { order: 2; }
.histoire-visuel {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  transform: rotate(-1.5deg);
}
.histoire-visuel img { width: 100%; height: 100%; object-fit: cover; }
.texte-corps p { margin: 0 0 1rem; line-height: 1.65; }
.texte-corps p:last-child { margin-bottom: 0; }
.texte-corps h3 {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: var(--t-2);
  letter-spacing: -0.03em;
  margin: 2rem 0 0.75rem;
}
.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.repere {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--canevas);
  color: var(--encre);
  border: var(--trait) solid var(--encre);
}
.repere dt {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}
.repere dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--texte-doux); }
.signature {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: 700;
  margin: 1.5rem 0 0;
}

/* ── Les chiffres, qui se comptent ────────────────────────────────────── */

@property --n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.chiffres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
  margin: 0;
  text-align: center;
}
.chiffre dt {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chiffre dd { margin: 0.6rem 0 0; font-weight: 600; opacity: 0.85; }
.compteur { --n: var(--cible, 0); counter-reset: n var(--n); }
.compteur::after { content: counter(n); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .compteur {
      --n: 0;
      animation: compte 1.4s ease-out both;
      animation-timeline: view();
      animation-range: entry 15% cover 45%;
    }
  }
}
@keyframes compte { to { --n: var(--cible, 0); } }

/* ── Les avis ──────────────────────────────────────────────────────────── */

.avis-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.avis-carte {
  position: relative;
  margin: 0;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.avis-guillemet {
  font-family: var(--f-titre, var(--f-systeme));
  font-size: 4.5rem;
  line-height: 0.5;
  height: 1.5rem;
  color: var(--accent);
}
.avis-note { display: flex; gap: 0.1rem; }
.avis-note i { font-style: normal; font-size: 1rem; }
.avis-note i.vide { opacity: 0.2; }
.avis-carte blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.avis-carte figcaption { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; color: var(--texte-doux); }
.avis-carte figcaption strong { color: var(--encre); }

/* ── La commande ───────────────────────────────────────────────────────── */

.commande-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.commande-carte { padding: clamp(1.5rem, 3vw, 2.5rem); --fond: var(--canevas); --fond-encre: var(--encre); }
.commande-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.commande-points li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  border-radius: calc(var(--r, 28px) * 0.6);
  background: var(--canevas);
  color: var(--encre);
  border: var(--trait) solid var(--encre);
}
.commande-points strong { font-weight: 800; }
.commande-points span { font-size: 0.9rem; color: var(--texte-doux); }
.commande-tel { margin: 1.5rem 0 0; font-weight: 600; }

.formulaire { display: grid; gap: 1rem; }
.champ { display: grid; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.champ input,
.champ textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: var(--trait) solid var(--encre);
  border-radius: calc(var(--r, 28px) * 0.5);
  background: var(--canevas);
  color: var(--encre);
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ input:focus-visible,
.champ textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.champ-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ-piege { position: absolute; left: -9999px; height: 0; overflow: hidden; opacity: 0; }
.formulaire-mention { margin: 0; text-align: center; font-size: 0.85rem; color: var(--texte-doux); }
.formulaire-merci { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.formulaire-merci .titre { font-size: var(--t-2); }
.formulaire-erreur {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: calc(var(--r, 28px) * 0.5);
  background: color-mix(in srgb, #c0392b 12%, var(--canevas));
  color: #8f2a1f;
  font-weight: 600;
}

/* ── Où nous trouver ───────────────────────────────────────────────────── */

.contact-cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.contact-carte {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.contact-carte p { margin: 0; }
.contact-carte a { text-decoration: none; }
.contact-grand {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.contact-note { font-size: 0.9rem; color: var(--texte-doux); }

/* ── La galerie ────────────────────────────────────────────────────────── */

.galerie-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.galerie-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--r, 28px) * 0.7);
  border: var(--trait) solid var(--encre);
  background: var(--dalle);
}
.galerie-photo:first-child { grid-column: span 2; grid-row: span 2; }
.galerie-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1); }
.galerie-photo:hover img { transform: scale(1.04); }
.galerie-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2rem 1rem 0.9rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}

/* ── Les questions ─────────────────────────────────────────────────────── */

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: start;
}
.faq-inner .section-tete { margin-bottom: 0; }
.faq-liste { display: grid; gap: 1rem; }
.faq-item { overflow: hidden; }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 800;
  font-size: 1.1rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--encre);
  transition: transform 0.2s ease;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--canevas);
  transform: translate(-50%, -50%);
}
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-reponse { padding: 0 1.5rem 1.5rem; color: var(--texte-doux); line-height: 1.6; }

/* ── L'appel ───────────────────────────────────────────────────────────── */

.appel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.appel .titre-geant { max-width: 16ch; }
.appel-texte { font-size: 1.125rem; opacity: 0.85; max-width: 44ch; margin: 0; }
.appel .bandeau-actions { justify-content: center; }

/* ── Le journal ────────────────────────────────────────────────────────── */

.journal-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.journal-carte { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.journal-visuel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.journal-corps { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.journal-date {
  font-family: var(--f-micro);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-lisible);
}
.journal-corps h3 {
  margin: 0;
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.journal-corps a { text-decoration: none; }
.journal-corps p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }

/* ── Le texte libre ────────────────────────────────────────────────────── */

.texte-libre-inner { max-width: 72ch; }
/* Une tête de page sans corps — « La carte », « Contact » — ne garde que
   son air du haut : la section qui suit apporte le sien, et deux airs
   pleins mis bout à bout faisaient un trou de trois cents pixels. */
.texte-libre:has(.section-tete:last-child) { padding-bottom: 0; }
.texte-libre:has(.section-tete:last-child) .section-tete { margin-bottom: 0; }
.texte-libre--centre .texte-libre-inner { margin-inline: auto; text-align: center; }
.texte-libre .texte-corps { font-size: 1.0625rem; }

/* ── Le pied de page : la marque en géant ──────────────────────────────── */

.pied {
  background: var(--fond, var(--accent));
  color: var(--fond-encre, var(--sur-accent));
  padding-top: calc(4rem * var(--k-densite, 1));
  overflow: hidden;
}
.pied-haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.pied-accroche {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 26ch;
  margin: 0 0 1.25rem;
}
.pied-reseaux { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pied-colonne p { margin: 0 0 1rem; line-height: 1.5; }
.pied-liens { display: flex; flex-direction: column; gap: 0.5rem; font-weight: 700; }
.pied-liens a { text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-marque {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: clamp(4rem, 16.5vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0 var(--marge);
  overflow: hidden;
}
/* Le bas du pied laisse 3,75 rem sous la dernière ligne : c'est la place
   de la capsule « Fait avec Webcosa », fixée en bas à droite par la
   plateforme. Sans cette marge, elle recouvrait « Confidentialité » —
   le lien qu'un visiteur cherche précisément là. */
.pied-bas {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 3.75rem;
  font-size: 0.85rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.pied-bas a { text-decoration: none; font-weight: 600; }
.pied-legal { display: inline-flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── L'apparition au défilement ────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .monte {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry calc(0% + var(--rang, 0) * 3%) cover calc(24% + var(--rang, 0) * 3%);
    }
  }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-visuel img, .bandeau-visuel-vide { animation: none; }
  .ruban-piste { animation: none; }
  .ruban { overflow-x: auto; -webkit-mask: none; mask: none; }
}

/* ── Les éditions ──────────────────────────────────────────────────────── */

/* Cookie : rose, noir, grotesque grasse, ombre dure, vague — la version
   bonbon. Les pastels redeviennent francs, les titres se serrent. */
[data-edition="cookie"] {
  --rose: #f7b8cb; --jaune: #f3e59c; --menthe: #bfe9cf;
  --lavande: #dacff6; --peche: #fcd2b6; --ciel: #c9e2fb;
}
[data-edition="cookie"] .titre { letter-spacing: -0.04em; line-height: 0.98; }
[data-edition="cookie"] .pied-marque { letter-spacing: -0.05em; }

/* Menthe : plus net, plus frais. Le trait s'amincit, les biscuits ne
   penchent pas, la marque géante s'allège. */
[data-edition="menthe"] { --trait: 1.5px; }
[data-edition="menthe"] .visuel-rond img, [data-edition="menthe"] .ingredient-visuel { transform: none; }
[data-edition="menthe"] .pied-marque { font-weight: 600; }

/* ── Les largeurs ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .nav { font-size: 0.9rem; }
  .nav a { padding-inline: 0.6rem; }
  .galerie-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-mobile { display: block; }
  .entete-inner, .entete--gauche .entete-inner { grid-template-columns: auto 1fr auto; }
  .entete--gauche .marque { order: 0; }
  .marque { justify-self: center; }
  .entete-actions .bouton { padding-inline: 1rem; }

  .bandeau-inner { grid-template-columns: 1fr; gap: 2rem; }
  .bandeau-visuel { order: -1; max-width: 300px; }
  .bandeau--ambiance .bandeau-inner { padding-top: 22vh; }

  .saveurs--rangs .saveur { grid-template-columns: 1fr; gap: 1.5rem; }
  .saveurs--rangs .saveur:nth-child(even) .visuel-rond { order: 0; }
  .visuel-rond { max-width: 300px; justify-self: start; }
  .saveurs--grille .saveurs-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .histoire-inner, .commande-inner, .faq-inner { grid-template-columns: 1fr; gap: 2rem; }
  .histoire--droite .histoire-visuel { order: 0; }
  .histoire-visuel { aspect-ratio: 4 / 3; max-width: 520px; }
  .avis-liste, .journal-liste, .contact-cartes { grid-template-columns: 1fr; }
  .galerie-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-haut { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 560px) {
  [data-ombre="dure"] { --ombre: 4px 4px 0 var(--encre); }
  .entete-inner { min-height: 4.25rem; gap: 0.5rem; }
  .marque { font-size: 1.35rem; }
  .entete-actions .bouton { height: 2.5rem; padding-inline: 0.9rem; font-size: 0.85rem; }
  .entete-actions .bouton span::after { display: none; }
  .menu-mobile summary { padding-inline: 0; font-size: 0.95rem; }
  .menu-mobile-liste { top: 4.25rem; }
  .annonce { font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: 1.25rem; }
  [data-ombre="aucune"] { --ombre: none; }
  .saveurs--grille .saveurs-liste { grid-template-columns: 1fr; }
  .champ-rang { grid-template-columns: 1fr; }
  .bandeau-actions .bouton { width: 100%; }
  .ingredient { width: calc(50% - 1.25rem); }
  .titre-geant { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}