/* ==========================================================================
   Glutelis : styles du thème
   Univers : l'emballage imprimé d'une épicerie marocaine (aplats, étiquettes,
   tampons, fenêtre découpée). Aucune ombre portée : la profondeur vient des
   aplats de couleur qui se chevauchent.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --deborde: clamp(40px, 7vh, 64px);   /* débord de l'étiquette du héro */
  /* Couleurs de la charte */
  --jaune: #f2c641;
  --jaune-fonce: #e3b12a;      /* 2e passage d'encre jaune, pour les superpositions */
  --vert: #3a7b52;
  --vert-encre: #2e6542;       /* texte crème lisible dessus (≥ 4,5:1) */
  --brun: #2b241a;
  --terracotta: #e8896a;
  --creme: #f9f3e9;
  --creme-2: #f1e5cf;

  /* Rôles */
  --fond: var(--creme);
  --encre: var(--brun);
  --etiquette: #fffaf2;      /* papier des étiquettes, posé sur le fond crème */
  --trait: 2px solid var(--brun);

  /* Typographie */
  --font-titre: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texte: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-main: "Dancing Script", "Segoe Script", cursive;

  --t-h1: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);
  --t-h2: clamp(2rem, 1.35rem + 2.7vw, 3.6rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  --t-lead: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);

  /* Espaces */
  --gouttiere: clamp(16px, 4vw, 56px);
  --section: clamp(72px, 9vw, 136px);
  --max: 1240px;
  --chevauche: clamp(56px, 7vw, 104px);

  /* Formes */
  --r-decoupe: 28px;   /* fenêtres découpées */
  --r-etiquette: 18px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  scrollbar-color: var(--brun) var(--creme);
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--font-texte);
  caret-color: var(--vert-encre);
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* rien ne doit faire défiler la page sur le côté (tampon, décors) */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

::selection { background: var(--vert-encre); color: var(--creme); }

:focus-visible {
  outline: 3px solid var(--brun);
  outline-offset: 3px;
  border-radius: 6px;
}
.sur-fonce :focus-visible { outline-color: var(--creme); }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.015em; }

p { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 2 * var(--gouttiere), var(--max)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--brun); color: var(--creme); padding: 12px 18px; border-radius: 12px;
  font: 700 0.95rem/1 var(--font-titre); text-decoration: none;
  transition: transform 200ms var(--ease-out);
}
.lien-evitement:focus { transform: translateY(72px); }

/* Icônes : un seul trait pour tout le site */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- 3. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border: var(--trait); border-radius: 999px;
  font: 800 1rem/1 var(--font-titre); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--brun { background: var(--brun); color: var(--creme); }
.btn--vert { background: var(--vert-encre); color: var(--creme); }
.btn--creme { background: var(--creme); color: var(--brun); }
@media (hover: hover) and (pointer: fine) {
  .btn--brun:hover { background: #40362a; }
  .btn--vert:hover { background: #255437; }
  .btn--creme:hover { background: #fff; }
}

/* ---------- 4. En-tête ---------- */
.entete {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--gouttiere);
}
.entete__logo { flex: none; display: block; }
.entete__logo img { width: clamp(132px, 12vw, 168px); height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__liens { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__liens a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: 700 0.95rem/1 var(--font-titre); text-decoration: none; border-radius: 999px;
  transition: background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav__liens a:hover { background: var(--jaune-fonce); } }
.nav__liens a[aria-current="page"] { background: var(--jaune); }

.entete__actions { display: flex; align-items: center; gap: 10px; }
.btn-rond {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: var(--trait); background: var(--creme); color: var(--brun); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.btn-rond:active { transform: scale(0.94); }
.entete .btn { min-height: 48px; padding: 0 20px; font-size: 0.95rem; }

.nav__menu { display: none; }

/* Sur l'accueil : barre étiquette posée sur la photo plein écran */
.entete--flottante {
  position: absolute; top: 14px; left: var(--gouttiere); right: var(--gouttiere);
  padding: 8px 8px 8px 22px;
  background: var(--creme); border: var(--trait); border-radius: 999px;
}
.entete--flottante .entete__logo img { width: clamp(120px, 10vw, 148px); }

@media (max-width: 980px) {
  .nav__liens, .entete .btn--brun { display: none; }
  .nav__menu { display: inline-grid; }
  .nav[data-ouvert="true"] .nav__liens {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% + 8px); right: 0; left: 0;
    background: var(--creme); border: var(--trait); border-radius: var(--r-etiquette);
    padding: 10px;
    transform-origin: top right;
    animation: menu-in 200ms var(--ease-out);
  }
  .nav[data-ouvert="true"] .nav__liens a { min-height: 52px; font-size: 1.1rem; }
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

/* ---------- 5. Héro plein écran : avant / après ---------- */
.heros {
  position: relative;
  height: 100svh; min-height: 620px;
  overflow-x: clip;              /* l'étiquette déborde en bas, sur la section suivante */
  background: var(--brun);
}

/* L'étiquette du produit, posée à cheval entre la photo et la page :
   seule la ligne de réassurance passe sous la photo, les boutons restent visibles */
.heros__etiquette {
  position: absolute; z-index: 5;
  left: var(--gouttiere); bottom: calc(-1 * var(--deborde));
  width: min(600px, calc(100% - 2 * var(--gouttiere)));
  padding: clamp(22px, 3vw, 40px);
  background: var(--creme); border: var(--trait); border-radius: calc(var(--r-decoupe) + 4px);
}
.heros + .section { padding-top: calc(var(--section) + var(--deborde)); }
.heros h1 { max-width: 12ch; font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem); }
.heros__chapo { margin-top: 16px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; }

.heros__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.heros__boutons .btn { flex: 1 1 auto; white-space: nowrap; }
.heros__rassure {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none;
  font-size: 0.95rem;
}
.heros__rassure li { display: inline-flex; align-items: center; gap: 8px; }
.heros__rassure .ico { width: 18px; height: 18px; }

/* Slider avant / après */
.comparer {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-decoupe);
  overflow: hidden;
  background: var(--creme-2);
  touch-action: pan-y;           /* le défilement vertical reste au navigateur */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.comparer--plein { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.comparer--plein .comparer__etiquette { top: clamp(92px, 11vh, 120px); bottom: auto; }
.comparer--plein .comparer__etiquette--avant { left: var(--gouttiere); }
.comparer--plein .comparer__etiquette--apres { right: var(--gouttiere); }
.comparer--plein .comparer__tirette { top: 24%; }
.comparer__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.comparer__img--avant { object-position: 50% 55%; }
/* Sans JS : moitié / moitié. Avec JS : on part des farines, l'intro dévoile les plats. */
.comparer__img--apres { object-position: 50% 62%; clip-path: inset(0 0 0 50%); }
.js .comparer__img--apres { clip-path: inset(0 0 0 96%); }

.comparer__etiquette {
  position: absolute; bottom: 14px; z-index: 2;
  padding: 9px 14px; border: var(--trait); border-radius: 999px;
  background: var(--creme); color: var(--brun);
  font: 800 0.8rem/1 var(--font-titre); letter-spacing: 0.04em; text-transform: uppercase;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
  pointer-events: none;
}
.comparer__etiquette--avant { left: 14px; }
.comparer__etiquette--apres { right: 14px; background: var(--vert-encre); color: var(--creme); border-color: var(--vert-encre); }
.comparer__etiquette[data-cache="true"] { opacity: 0; transform: translateY(4px); }

.comparer__poignee {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 0;
  outline: none;
}
.js .comparer__poignee { left: 96%; }
.js .comparer__poignee[data-pret] { left: 0; } /* le JS pilote ensuite la position en translateX */
.comparer__trait {
  position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: var(--creme);
}
.comparer__tirette {
  position: absolute; top: 50%; left: 0;
  display: grid; place-items: center;
  width: 46px; height: 68px;
  translate: -50% -50%;
  background: var(--vert-encre); color: var(--creme);
  border: 3px solid var(--creme); border-radius: 999px;
  transition: scale 160ms var(--ease-out);
}
.comparer__tirette .ico { width: 26px; height: 26px; stroke-width: 2.4; }
.comparer[data-glisse="true"] .comparer__tirette { scale: 0.94; }
.comparer__poignee:focus-visible .comparer__tirette { outline: 3px solid var(--brun); outline-offset: 2px; }

/* Tampon « Sans gluten · Maroc » */
.tampon {
  position: absolute; z-index: 4;
  width: clamp(96px, 9vw, 124px); aspect-ratio: 1;
  top: clamp(-56px, -4vw, -40px); right: clamp(-40px, -3vw, -18px);
  rotate: -10deg;
  color: var(--brun);
}
.tampon svg { width: 100%; height: 100%; }

/* ---------- 6. Sections ---------- */
.section { padding-block: var(--section); }
.section__titre { max-width: 16ch; }
.section__chapo { margin-top: 18px; max-width: 52ch; font-size: var(--t-lead); }

/* 6a. Le dos du paquet : tableau « valeurs » */
.dos {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.valeurs {
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(20px, 3vw, 32px);
}
.valeurs__titre {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 12px; border-bottom: 8px solid var(--brun);
  font: 800 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--font-titre); letter-spacing: -0.02em;
}
.valeurs__titre span { font: 700 0.85rem/1 var(--font-titre); letter-spacing: 0.02em; }
.valeurs dl { margin: 0; }
.valeurs__ligne {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 20px;
  padding: 14px 0; border-bottom: 1px solid var(--brun);
}
.valeurs__ligne:last-child { border-bottom: 4px solid var(--brun); }
.valeurs dt { font: 800 0.98rem/1.35 var(--font-titre); }
.valeurs dd { margin: 0; }
.valeurs__note { margin-top: 14px; font-size: 0.875rem; }

/* 6b. Les e-books : l'étagère */
.etagere { background: var(--vert); color: var(--creme); padding-bottom: calc(var(--section) + var(--chevauche)); }
.section--chevauche {
  position: relative; z-index: 2; margin-top: calc(-1 * var(--chevauche)); padding-top: 0;
  background: linear-gradient(to bottom, transparent 0 var(--chevauche), var(--jaune) var(--chevauche));
}
.bande-sable { background: var(--creme-2); }
.etagere h2, .etagere .section__chapo { color: var(--creme); }
.etagere__rayon {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(16px, 2.4vw, 32px);
  align-items: end;
  margin-top: clamp(40px, 5vw, 64px);
  padding-bottom: 0;
  border-bottom: 10px solid var(--brun);
}
.paquet {
  --face: var(--jaune);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--face); color: var(--brun);
  border: var(--trait); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 0 clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px);
}
.paquet--ocre { --face: var(--jaune-fonce); }
.paquet--creme { --face: var(--creme); }
.paquet--vedette { min-height: 100%; }

/* Bande de scellage et trou d'accroche, comme un vrai sachet */
.paquet__scelle {
  position: relative; height: 46px; margin-inline: calc(-1 * clamp(18px, 2vw, 26px));
  display: flex; align-items: center; padding-inline: clamp(18px, 2vw, 26px);
  border-bottom: var(--trait); border-radius: 20px 20px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgb(43 36 26 / 0.12) 10px 12px);
}
.paquet__scelle::after {
  content: ""; position: absolute; left: 50%; top: 14px; translate: -50% 0;
  width: 52px; height: 14px; border-radius: 999px;
  background: var(--vert); border: var(--trait);
}
.paquet__lot {
  position: relative; z-index: 1;
  padding: 4px 8px; background: var(--face); border-radius: 6px;
  font: 800 0.8rem/1 var(--font-titre); letter-spacing: 0.06em; text-transform: uppercase;
}
/* Statut : tampon encreur posé de travers sur le coin du paquet */
.paquet__statut {
  position: absolute; z-index: 3; top: 30px; right: clamp(-22px, -1.4vw, -12px);
  display: grid; place-items: center; width: 92px; aspect-ratio: 1; margin: 0; padding: 14px;
  background: var(--terracotta); color: var(--brun);
  border: var(--trait); border-radius: 50%;
  font: 800 0.7rem/1.15 var(--font-titre); letter-spacing: 0; text-transform: uppercase; text-align: center;
  rotate: -12deg;
}
.paquet__statut::before {
  content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--brun); border-radius: 50%;
}
.paquet__statut span { position: relative; }
.paquet h3 { margin-top: 24px; padding-right: 64px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1; }
.paquet--vedette h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.paquet__texte { margin-top: 12px; }
.paquet__valeurs { margin: 18px 0 22px; border-top: 4px solid var(--brun); }
.paquet__valeurs div {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--brun); font-size: 0.93rem;
}
.paquet__valeurs dt { font: 800 0.9rem/1.4 var(--font-titre); }
.paquet__valeurs dd { margin: 0; }
.paquet .btn { margin-top: auto; min-height: 50px; }

/* 6c. Le coupon du guide gratuit */
.coupon {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  background: var(--creme); border: 3px dashed var(--brun); border-radius: var(--r-decoupe);
  padding: clamp(24px, 4.5vw, 64px);
}
.coupon__ciseaux {
  position: absolute; top: -17px; left: clamp(24px, 6vw, 72px);
  background: var(--jaune); padding: 4px 8px; border-radius: 999px;
}
.coupon__ciseaux .ico { width: 24px; height: 24px; }
.coupon__liste { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.coupon__liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.coupon__liste .ico { width: 22px; height: 22px; margin-top: 2px; color: var(--vert-encre); stroke-width: 2.4; }
.coupon__main {
  margin-top: 22px; font: 700 clamp(1.5rem, 1.2rem + 0.9vw, 2rem)/1.1 var(--font-main); color: var(--vert-encre);
  rotate: -3deg; transform-origin: left center;
}

.formulaire, .formulaire__champs { display: grid; gap: 16px; align-content: start; }
.champ { display: grid; gap: 8px; }
.champ label { font: 800 0.95rem/1.2 var(--font-titre); }
.champ input[type="text"], .champ input[type="email"] {
  width: 100%; min-height: 54px; padding: 0 16px;
  font: 400 1.05rem/1.2 var(--font-texte); color: var(--brun);
  background: #fff; border: var(--trait); border-radius: 14px;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.champ input::placeholder { color: #6e6254; opacity: 1; }
.champ input:focus-visible { outline: 3px solid var(--vert-encre); outline-offset: 2px; background: #fff; }
.champ[data-erreur="true"] input { border-color: #a3341c; background: #fff3ee; }
.champ__erreur { color: #8f2c16; font-size: 0.9rem; font-weight: 600; }
.champ__erreur:empty { display: none; }

.case { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 0.97rem; }
.case input {
  appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border: var(--trait); border-radius: 7px; background: #fffaf2;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 160ms ease;
}
.case input::after {
  content: ""; width: 12px; height: 7px; border: solid var(--creme); border-width: 0 0 3px 3px;
  rotate: -45deg; translate: 0 -1px; scale: 0.6; opacity: 0;
  transition: scale 160ms var(--ease-out), opacity 160ms ease;
}
.case input:checked { background: var(--vert-encre); border-color: var(--vert-encre); }
.case input:checked::after { scale: 1; opacity: 1; }

.formulaire .btn { width: 100%; }
.formulaire__legal { font-size: 0.85rem; }
.formulaire__merci {
  display: none; padding: 18px 20px; border: var(--trait); border-radius: 14px; background: var(--jaune);
}
.formulaire[data-etat="envoye"] .formulaire__merci { display: block; animation: merci-in 360ms var(--ease-out); }
.formulaire[data-etat="envoye"] .formulaire__champs { display: none; }
@keyframes merci-in { from { opacity: 0; transform: translateY(6px); } }
.formulaire[data-etat="envoi"] .btn { pointer-events: none; opacity: 0.8; }

/* 6d. Mode d'emploi : la notice imprimée au dos du paquet */
.notice {
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(22px, 3.4vw, 44px);
}
.notice__tete {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--brun);
}
.notice__main { font: 700 clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem)/1 var(--font-main); color: var(--vert-encre); rotate: -3deg; }
.notice__etapes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px);
  margin: 0; padding: 0; list-style: none;
}
.notice__etape {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 24px 0; border-bottom: 1px dashed var(--brun);
}
.notice__etape:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }
.notice__num {
  display: grid; place-items: center; width: 54px; aspect-ratio: 1; border-radius: 50%;
  background: var(--brun); color: var(--jaune);
  font: 800 1.7rem/1 var(--font-titre); font-variant-numeric: tabular-nums;
}
.notice__etape p { margin-top: 6px; max-width: 42ch; }

/* 6e. Recettes gratuites */
.recettes__grille {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto;
  gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(36px, 4.5vw, 56px);
}
.recette { position: relative; display: grid; gap: 14px; text-decoration: none; }
.recette--une { grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
.recette--une .recette__photo { height: 100%; }
.recette--une .recette__photo img { height: 100%; min-height: 320px; }
.recette__photo {
  border: var(--trait); border-radius: var(--r-decoupe); overflow: hidden; background: var(--creme-2);
}
.recette__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: scale 600ms var(--ease-out); }
.recette--une .recette__photo img { aspect-ratio: 4 / 3; }
@media (hover: hover) and (pointer: fine) { .recette:hover .recette__photo img { scale: 1.03; } }
.recette__info { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.recette__info h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); }
.recette--une .recette__info h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.recette__darija { display: block; margin-top: 4px; font: 700 1.2rem/1.2 var(--font-main); color: var(--vert-encre); }
.recette__badge {
  flex: none; padding: 7px 11px; border: var(--trait); border-radius: 999px; background: var(--creme);
  font: 800 0.78rem/1 var(--font-titre); white-space: nowrap;
}

/* 6f. Mot de la fondatrice */
.mot { padding-block: clamp(56px, 7vw, 104px); }
.mot__citation {
  margin: 0; max-width: 22ch;
  font: 800 clamp(1.9rem, 1.2rem + 3vw, 3.8rem)/1.05 var(--font-titre); letter-spacing: -0.03em;
  text-wrap: balance;
}
.mot__signature { margin-top: 18px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mot__signature span:first-child { font: 700 clamp(1.8rem, 1.4rem + 1vw, 2.4rem)/1 var(--font-main); color: var(--vert-encre); }

/* 6g. Questions + farines */
.fin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq { margin-top: 28px; border-top: 4px solid var(--brun); }
.faq details { border-bottom: 1px solid var(--brun); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 800 clamp(1.05rem, 1rem + 0.3vw, 1.2rem)/1.3 var(--font-titre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: rotate 200ms var(--ease-out); }
.faq details[open] summary .ico { rotate: 45deg; }
.faq__reponse { padding: 0 0 20px; max-width: 62ch; }
.faq details[open] .faq__reponse { animation: reponse-in 240ms var(--ease-out); }
@keyframes reponse-in { from { opacity: 0; transform: translateY(-4px); } }

.farines {
  position: relative;
  background: var(--vert-encre); color: var(--creme);
  border: var(--trait); border-radius: var(--r-decoupe);
  padding: clamp(24px, 3.4vw, 40px);
}
.farines h2 { color: var(--creme); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.farines p { margin-top: 14px; color: #ece3d1; }
.farines__melanges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; padding: 0; list-style: none; }
.farines__melanges li {
  padding: 8px 12px; border: 2px solid var(--creme); border-radius: 999px;
  font: 800 0.85rem/1 var(--font-titre);
}

/* ---------- 7. Pied de page ---------- */
.pied { background: var(--brun); color: var(--creme); padding: clamp(56px, 7vw, 96px) 0 32px; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.pied__logo img { width: 190px; }
.pied__signature { margin-top: 18px; max-width: 30ch; color: #e9dfcd; }
.pied h2 { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jaune); }
.pied ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.pied ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pied ul a:hover { text-decoration: underline; } }
.pied__sante {
  margin-top: clamp(40px, 5vw, 64px); padding: 18px 20px;
  border: 2px solid rgb(249 243 233 / 0.4); border-radius: 14px; font-size: 0.93rem; color: #e9dfcd;
}
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(249 243 233 / 0.3);
  font-size: 0.875rem; color: #d9cdb8;
}

/* ---------- 7b. Éducation : comprendre le sans gluten ---------- */

/* Lien d'action vers une page détaillée */
.lien-suite { margin-top: 28px; }
.lien-suite .ico { width: 20px; height: 20px; stroke-width: 2.2; transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lien-suite:hover .ico { translate: 3px 0; } }

/* Colonnes texte + étiquette */
.duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.duo--inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.duo p + p { margin-top: 14px; }
.texte-courant { max-width: 52ch; }

/* Définition façon dictionnaire */
.definition {
  position: relative;
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(22px, 3vw, 36px);
}
.definition__mot { font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.8rem)/1 var(--font-titre); letter-spacing: -0.04em; }
.definition__nature { margin-top: 8px; padding-bottom: 14px; border-bottom: 4px solid var(--brun); font-size: 0.95rem; }
.definition__nature em { font-style: normal; font-weight: 600; }
.definition__sens { margin-top: 16px; font-size: 1.08rem; }
.definition__exemple { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--brun); font-size: 0.97rem; }
.definition__exemple strong { font-family: var(--font-titre); font-weight: 800; }
.definition__main { margin-top: 16px; font: 700 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1.1 var(--font-main); color: var(--vert-encre); rotate: -3deg; transform-origin: left center; }

/* Bande verte (même encre que l'étagère) */
.bande-verte { background: var(--vert); color: var(--creme); }
.bande-verte h2, .bande-verte .section__chapo { color: var(--creme); }

/* Encadré « Allergènes », comme au dos d'un paquet */
.allergenes__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 4.5vw, 56px); align-items: start; }
.encadre {
  background: var(--etiquette); color: var(--brun);
  border: var(--trait); border-radius: var(--r-etiquette); overflow: hidden;
}
.encadre__tete {
  display: flex; align-items: center; gap: 10px;
  padding: 14px clamp(18px, 2.4vw, 28px);
  background: var(--brun); color: var(--creme);
  font: 800 clamp(1rem, 0.9rem + 0.4vw, 1.2rem)/1.1 var(--font-titre); letter-spacing: 0.04em; text-transform: uppercase;
}
.encadre--vert .encadre__tete { background: var(--vert-encre); }
.encadre__tete .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.encadre__corps { padding: clamp(18px, 2.4vw, 28px); }
.encadre__corps > * + * { margin-top: 16px; }
.cereales { font: 800 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.35 var(--font-titre); letter-spacing: -0.01em; }
.cereales span { white-space: nowrap; }
.note { font-size: 0.93rem; }
.note strong { font-family: var(--font-titre); font-weight: 800; }

.aliments { margin: 0; border-top: 4px solid var(--brun); }
.aliments div {
  display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 4px 18px;
  padding: 11px 0; border-bottom: 1px solid var(--brun);
}
.aliments div:last-child { border-bottom: 0; }
.aliments dt { font: 800 0.98rem/1.35 var(--font-titre); }
.aliments dd { margin: 0; font-size: 0.97rem; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastilles li {
  padding: 8px 12px; border: var(--trait); border-radius: 999px; background: #fffaf2;
  font: 800 0.88rem/1 var(--font-titre);
}
.sous-titre { font: 800 1.02rem/1.3 var(--font-titre); }
.liste-simple { margin: 8px 0 0; padding-left: 1.1em; }
.liste-simple li + li { margin-top: 4px; }
.liste-simple li::marker { color: var(--vert-encre); }

/* Le mélange maison : un bocal en couches */
.melange {
  position: relative;
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(22px, 3vw, 36px);
}
.melange__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--brun); }
.melange__tete h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); }
.melange__main { font: 700 clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem)/1 var(--font-main); color: var(--vert-encre); rotate: -3deg; }
.melange__corps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 22px; }

.bocal { display: grid; grid-template-rows: 18px minmax(0, 1fr); width: clamp(104px, 9vw, 132px); min-height: 280px; }
.bocal__couvercle {
  margin-inline: 10px; border: var(--trait); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(90deg, #c99a5b 0 3px, #b9894c 3px 6px);
}
.bocal__verre {
  display: flex; flex-direction: column;
  border: var(--trait); border-radius: 10px 10px 26px 26px; overflow: hidden; background: #fffaf2;
}
.bocal__couche { display: grid; place-items: center; border-top: 2px dashed var(--brun); font: 800 1.05rem/1 var(--font-titre); font-variant-numeric: tabular-nums; }
.bocal__couche:first-child { border-top: 0; }
.bocal__couche--fecules { flex: 30; background: #fffaf2; }
.bocal__couche--riches { flex: 30; background: var(--jaune-fonce); }
.bocal__couche--base { flex: 40; background: var(--creme-2); }

.melange__legende { margin: 0; padding: 0; list-style: none; display: grid; align-content: space-between; gap: 14px; }
.melange__legende li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 14px; align-items: baseline; }
.melange__pct { font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--font-titre); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.melange__legende strong { display: block; font: 800 1rem/1.3 var(--font-titre); }
.melange__legende span { font-size: 0.95rem; }
.melange__liant { padding-top: 14px; border-top: 1px dashed var(--brun); }

.par-recette { margin-top: 26px; }
.par-recette .aliments { margin-top: 10px; }

/* Les bénéfices, pour qui : bande ocre (2e passage d'encre) */
.bande-ocre { background: var(--jaune-fonce); }
.profils { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; border-top: 8px solid var(--brun); }
.profil {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px clamp(24px, 4vw, 64px);
  padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 2px solid var(--brun);
}
.profil h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); }
.profil p { max-width: 60ch; }
.profil p + p { margin-top: 8px; }

.alerte {
  position: relative; margin-top: clamp(32px, 4vw, 48px);
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(110px, 12vw, 150px);
}
.alerte h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); }
.alerte p { margin-top: 10px; max-width: 64ch; }
.alerte__tampon {
  position: absolute; top: 50%; left: clamp(-18px, -1.4vw, -10px); translate: 0 -50%;
  display: grid; place-items: center; width: clamp(104px, 10vw, 128px); aspect-ratio: 1; padding: 14px;
  background: var(--terracotta); border: var(--trait); border-radius: 50%;
  font: 800 0.8rem/1.15 var(--font-titre); letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
  rotate: -10deg;
}
.alerte__tampon::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--brun); border-radius: 50%; }
.alerte__tampon span { position: relative; }

/* ---------- 7c. Pages article (guides détaillés) ---------- */
.fil { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.93rem; }
.fil li:not(:last-child)::after { content: "/"; margin-left: 6px; }
.fil a { font-weight: 600; }

.article-tete { padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); }
.article-tete h1 { max-width: 15ch; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); }
.article-tete__chapo { margin-top: 20px; max-width: 58ch; font-size: var(--t-lead); }
.article-tete__infos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 0.93rem; }

.article-corps { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 3vw, 40px); align-items: start; padding-bottom: var(--section); }
.sommaire {
  position: sticky; top: 20px;
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette); padding: 20px;
}
.sommaire h2 { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 4px solid var(--brun); }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sommaire li { counter-increment: s; border-bottom: 1px solid var(--brun); }
.sommaire li:last-child { border-bottom: 0; }
.sommaire a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); padding: 10px 0; font: 700 0.93rem/1.35 var(--font-titre); text-decoration: none; }
.sommaire a::before { content: counter(s); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .sommaire a:hover { text-decoration: underline; } }

.prose {
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
  padding: clamp(22px, 4vw, 56px);
}
.prose > section + section { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 4px solid var(--brun); }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); scroll-margin-top: 20px; }
.prose h3 { margin-top: 28px; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
.prose p, .prose ul, .prose ol, .prose .aliments, .prose .encadre, .prose .melange, .prose .tableau-wrap { margin-top: 16px; }
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--vert-encre); }
.prose strong { font-weight: 600; }
.prose .encadre__corps > * + * { margin-top: 12px; }

.tableau-wrap { overflow-x: auto; border-top: 4px solid var(--brun); }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.tableau th, .tableau td { padding: 11px 14px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--brun); }
.tableau th { font: 800 0.92rem/1.3 var(--font-titre); }
.tableau tbody th { font-size: 0.98rem; }
.tableau tr:last-child th, .tableau tr:last-child td { border-bottom: 0; }

.article-suite { padding-block: clamp(56px, 7vw, 96px); }
.article-suite__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: 28px; }
.carte-suite {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(20px, 2.6vw, 30px); border: var(--trait); border-radius: var(--r-etiquette);
  background: var(--creme); color: var(--brun); text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.carte-suite:active { transform: scale(0.98); }
.carte-suite h3 { display: flex; justify-content: space-between; gap: 12px; }
@media (hover: hover) and (pointer: fine) { .carte-suite:hover h3 { text-decoration: underline; } }

@media (max-width: 980px) {
  .duo, .duo--inverse, .allergenes__grille, .article-corps { grid-template-columns: minmax(0, 1fr); }
  .profil { grid-template-columns: minmax(0, 1fr); }
  .sommaire { position: static; }
  .article-suite__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .aliments div { grid-template-columns: minmax(0, 1fr); }
  .melange__corps { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bocal { min-height: 220px; width: 120px; }
  .melange__legende { justify-items: stretch; width: 100%; }
  .alerte { padding: 92px 20px 22px; }
  .alerte__tampon { top: -22px; left: 18px; translate: none; width: 104px; }
}

/* ---------- 7d. Guide gratuit (page de capture) et fiche e-book ---------- */
.entete--seule { justify-content: center; padding-block: clamp(16px, 2.4vw, 28px); }
.section--serree { padding-block: clamp(56px, 7vw, 104px); }
.bande-jaune { background: var(--jaune); }
.bande-jaune .coupon__ciseaux { background: var(--jaune); }

.capture__surtitre {
  font: 800 0.85rem/1 var(--font-titre); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert-encre);
}
.capture { padding: clamp(8px, 2vw, 24px) 0 0; }
.capture__grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start;
}
.capture h1 { margin-top: 14px; max-width: 13ch; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); }
.capture__chapo { margin-top: 18px; max-width: 46ch; font-size: var(--t-lead); }
.capture__formulaire {
  margin-top: clamp(24px, 3vw, 36px); max-width: 520px;
  padding: clamp(20px, 2.6vw, 30px); background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
}
.capture__visuel { position: sticky; top: 24px; display: grid; justify-items: center; padding-top: clamp(8px, 3vw, 48px); }

/* La couverture : un sachet d'épicerie, posé un peu de travers */
.couverture {
  width: min(100%, 380px); aspect-ratio: 3 / 4;
  border-bottom: var(--trait); border-radius: 22px;
  rotate: -2.5deg;
}
.couverture--grande { width: min(100%, 440px); }
.couverture__titre {
  margin-top: 28px; padding-right: 72px;
  font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/0.98 var(--font-titre); letter-spacing: -0.035em;
  text-wrap: balance;
}
.couverture__sous-titre { margin-top: 14px; max-width: 24ch; font-size: 1rem; }
.couverture__plume { width: 34px; height: 56px; margin-top: auto; color: var(--vert-encre); stroke: currentColor; rotate: 16deg; }
.couverture__logo { width: 132px; height: auto; margin-top: 14px; }
.couverture__main {
  margin-top: 22px; font: 700 clamp(1.5rem, 1.2rem + 0.9vw, 2rem)/1.1 var(--font-main); color: var(--vert-encre); rotate: -3deg;
}

.mot--capture { padding-top: 0; }
.capture__relance { margin-top: 28px; }

/* Fiche e-book */
.produit { padding: clamp(16px, 3vw, 40px) 0 clamp(56px, 7vw, 104px); }
.produit__grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start;
  margin-top: clamp(16px, 2vw, 28px);
}
.produit__visuel { position: sticky; top: 24px; display: grid; justify-items: center; padding-top: 12px; }
.produit h1 { margin-top: 14px; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); }
.produit__chapo { margin-top: 18px; max-width: 48ch; font-size: var(--t-lead); }
.produit__valeurs { margin-top: clamp(24px, 3vw, 36px); }
.produit__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.produit__actions .btn { flex: 1 1 auto; }
.btn--contour { background: transparent; color: var(--brun); }
@media (hover: hover) and (pointer: fine) { .btn--contour:hover { background: var(--creme-2); } }

/* Au menu : la carte du ftour, comme un menu de restaurant */
.carte-menu {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--etiquette); border: var(--trait); border-radius: var(--r-etiquette);
}
.carte-menu__groupe { padding: clamp(20px, 2.6vw, 32px); border-left: 1px dashed var(--brun); }
.carte-menu__groupe:first-child { border-left: 0; }
.carte-menu h3 {
  padding-bottom: 12px; border-bottom: 4px solid var(--brun);
  font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.carte-menu ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.carte-menu li { font: 800 clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem)/1.15 var(--font-titre); letter-spacing: -0.02em; }
.carte-menu__note {
  position: absolute; right: 18px; bottom: -14px;
  padding: 4px 10px; background: var(--creme); border: var(--trait); border-radius: 999px;
  font: 800 0.75rem/1.2 var(--font-titre); letter-spacing: 0.04em; text-transform: uppercase;
}

.produit__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.produit__faq > * { max-width: 860px; }
.produit__sante { margin-top: 28px; max-width: 62ch; }

/* Barre d'action collante : téléphone seulement, cachée quand le formulaire est à l'écran */
.barre-action { display: none; }

.pied--court { padding-top: clamp(32px, 4vw, 48px); }
.pied--court .pied__sante { margin-top: 0; }
.pied__legal a { color: inherit; }

@media (max-width: 980px) {
  .capture__grille, .produit__grille, .produit__duo { grid-template-columns: minmax(0, 1fr); }
  .capture__visuel, .produit__visuel { position: static; }
  .capture__visuel .couverture { width: min(100%, 300px); }
  .carte-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-menu__groupe:nth-child(3) { border-left: 0; }
  .carte-menu__groupe:nth-child(n + 3) { border-top: 1px dashed var(--brun); }

  .barre-action {
    position: fixed; z-index: 30; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px; background: var(--creme); border: var(--trait); border-radius: 999px;
    transition: transform 240ms var(--ease-out), opacity 200ms ease;
  }
  .barre-action[data-cachee="true"] { transform: translateY(calc(100% + 16px)); opacity: 0; pointer-events: none; }
  .barre-action__texte { display: grid; font-size: 0.85rem; line-height: 1.25; }
  .barre-action__texte strong { font: 800 0.98rem/1.2 var(--font-titre); }
  .barre-action .btn { min-height: 48px; padding: 0 20px; font-size: 0.95rem; }
  body[data-type="produit"] .pied { padding-bottom: 104px; }
}
@media (max-width: 560px) {
  .carte-menu { grid-template-columns: minmax(0, 1fr); }
  .carte-menu__groupe { border-left: 0; }
  .carte-menu__groupe:nth-child(n + 2) { border-top: 1px dashed var(--brun); }
  .couverture, .couverture--grande, .capture__visuel .couverture { width: min(100%, 260px); }
  .couverture__titre { margin-top: 20px; font-size: 1.7rem; }
  .couverture__logo { width: 112px; }
  .produit__actions .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-action { transition: opacity 200ms ease; }
  .barre-action[data-cachee="true"] { transform: none; }
}

/* ---------- 7e. Farines (liste d'attente), Liens, Merci ---------- */
.farines-tete h1 { max-width: 14ch; }
.farines-tete__actions { max-width: 640px; }
.produit:has(.farines-tete) { padding-bottom: clamp(48px, 6vw, 88px); }

/* Mini-sondage dans le formulaire */
.sondage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px dashed var(--brun); }
.sondage legend { grid-column: 1 / -1; padding: 0; margin-bottom: 12px; font: 800 0.95rem/1.3 var(--font-titre); }
.sondage legend span, .champ__option { display: block; margin-top: 2px; font: 400 0.85rem/1.3 var(--font-texte); }
.champ__option { display: inline; }
.sondage .case { align-items: center; }

/* Liens (bio Instagram) */
.liens, .merci { padding: clamp(4px, 1vw, 12px) 0 clamp(48px, 6vw, 80px); }
.liens__colonne, .merci__colonne { max-width: 560px; }
.liens__titre { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); text-align: center; text-wrap: balance; }
.liens__liste { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.lien-carte {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 76px; padding: 12px 18px 12px 12px;
  background: var(--etiquette); color: var(--brun); text-decoration: none;
  border: var(--trait); border-radius: var(--r-etiquette);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.lien-carte:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .lien-carte:hover { background: #fff; } .lien-carte--jaune:hover { background: var(--jaune-fonce); } }
.lien-carte strong { display: block; font: 800 1.05rem/1.25 var(--font-titre); }
.lien-carte span:not(.lien-carte__icone) { font-size: 0.93rem; line-height: 1.35; }
.lien-carte__icone { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 12px; background: var(--creme-2); border: 2px solid var(--brun); }
.lien-carte__icone .ico { width: 24px; height: 24px; }
.lien-carte--jaune { background: var(--jaune); }
.lien-carte--jaune .lien-carte__icone { background: var(--creme); }
.lien-carte--vert { background: var(--vert-encre); color: var(--creme); }
.lien-carte--vert .lien-carte__icone { background: var(--creme); color: var(--brun); }
.liens__site { display: block; width: fit-content; margin: 28px auto 0; font-weight: 600; }

/* Merci */
.merci__colonne { max-width: 760px; text-align: left; }
.merci__tampon { width: clamp(96px, 12vw, 124px); rotate: -10deg; color: var(--brun); }
.merci__tampon svg { width: 100%; height: auto; }
.merci h1 { margin-top: 18px; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); text-wrap: balance; }
.merci h1 span { display: block; color: var(--vert-encre); }
.merci__notice { margin-top: clamp(28px, 4vw, 44px); }
.merci__etapes { grid-template-columns: minmax(0, 1fr); }
.merci__etapes .notice__etape:nth-last-child(2) { border-bottom: 1px dashed var(--brun); padding-bottom: 24px; }
.merci__suite-titre { margin-top: clamp(40px, 5vw, 64px); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.merci__suite { margin-top: 18px; }

@media (max-width: 560px) {
  .sondage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 7f. Pages légales (modèles à compléter) ---------- */
mark.a-remplir {
  padding: 0 4px; border-radius: 4px; background: var(--jaune); color: var(--brun);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.prose .a-completer { margin: 0 0 clamp(32px, 4vw, 48px); }
.prose ol { padding-left: 1.4em; }
.prose ol li::marker { font-weight: 700; color: var(--vert-encre); }

/* ---------- 8. Mouvement d'entrée (impression en couches) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Héro : chaque couche « s'imprime » de bas en haut, en décalé */
  /* fill « backwards » : la découpe disparaît à la fin, rien ne reste rogné */
  .imprime {
    animation: impression 720ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 80ms);
  }
  @keyframes impression {
    from { clip-path: inset(0 0 100% 0); transform: translateY(14px); }
    to { clip-path: inset(-3em -3em -3em -3em); transform: none; } /* marge large : le tampon déborde de la fenêtre */
  }

  .tampon { animation: tampon 520ms var(--ease-out) 1000ms both; }
  @keyframes tampon {
    from { opacity: 0; scale: 1.12; rotate: -26deg; }
    to { opacity: 1; scale: 1; rotate: -10deg; }
  }

  /* Révélations au défilement (activées seulement si le JS tourne) */
  .js :is(.revele-impression, .revele-rayon, .revele-etiquette) { transition: clip-path 760ms var(--ease-out), transform 760ms var(--ease-out), opacity 500ms ease; }
  /* Chaque état caché a son état visible de même forme, pour que clip-path s'interpole */
  .js .revele-impression { clip-path: inset(-0.4em -0.4em -0.4em -0.4em); }
  .js .revele-impression:not(.est-visible) { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
  .js .revele-rayon:not(.est-visible) { transform: translateY(48px); opacity: 0; }
  .js .revele-etiquette { clip-path: inset(0 0 0 0 round var(--r-decoupe)); }
  .js .revele-etiquette:not(.est-visible) { clip-path: inset(0 100% 0 0 round var(--r-decoupe)); }
  .js .est-visible { transition-delay: calc(var(--i, 0) * 80ms); }
}
@media (prefers-reduced-motion: reduce) {
  .js :is(.revele-impression, .revele-rayon, .revele-etiquette) { transition: opacity 200ms ease; }
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 980px) {
  .heros h1 { max-width: 11ch; }

  .dos, .coupon, .fin { grid-template-columns: minmax(0, 1fr); }
  .etagere__rayon { grid-template-columns: minmax(0, 1fr); border-bottom: 0; gap: 20px; }
  .paquet { border-bottom: var(--trait); border-radius: 22px; }
  .recettes__grille { grid-template-columns: minmax(0, 1fr); }
  .recette--une { grid-row: auto; grid-template-rows: auto; }
  .recette--une .recette__photo img { height: auto; min-height: 0; }
  .pied__haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --deborde: 0px; }
  .entete { padding-block: 12px; }
  .entete__logo img { width: 124px; }
  .btn-rond { width: 44px; height: 44px; }
  .entete--flottante { top: 10px; padding: 6px 6px 6px 16px; }
  .entete--flottante .entete__logo img { width: 112px; }
  .heros { min-height: 560px; background: var(--creme); }
  .comparer--plein { inset: 0 0 auto 0; height: 66svh; min-height: 380px; }
  .comparer__img--apres { object-position: 50% 70%; }
  .heros__etiquette { bottom: 12px; padding: 18px 18px 20px; border-radius: 24px; }
  .heros h1 { font-size: clamp(2rem, 1rem + 5.6vw, 2.4rem); }
  .heros__chapo { margin-top: 10px; font-size: 0.98rem; line-height: 1.45; }
  .heros__boutons { gap: 8px; margin-top: 16px; }
  .heros__boutons .btn { min-height: 48px; flex-basis: 100%; }
  .heros__rassure { display: none; }
  .tampon { width: 84px; top: -44px; right: 10px; }
  .comparer--plein .comparer__etiquette { top: 76px; padding: 7px 10px; font-size: 0.7rem; }
  .comparer--plein .comparer__tirette { top: 26%; }
  .valeurs__ligne { grid-template-columns: minmax(0, 1fr); }
  .notice__etapes { grid-template-columns: minmax(0, 1fr); }
  .notice__etape:nth-last-child(2) { border-bottom: 1px dashed var(--brun); padding-bottom: 24px; }
  .notice__num { width: 46px; font-size: 1.45rem; }
  .paquet__statut { right: -6px; width: 86px; padding: 12px; }
  .pied__haut { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10. Pont avec Elementor
   Le contenu des pages est fait de widgets Elementor (titres, textes, boutons,
   images) qui portent les classes ci-dessus dans « Avancé > Classes CSS ».
   Ces règles accordent le balisage d'Elementor avec le système Glutelis.
   ========================================================================== */
:root {
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E");
  --m-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l8.5 15h-17z'/%3E%3Cpath d='M12 10v4.2M12 17v.2'/%3E%3C/svg%3E");
  --m-dirham: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9.5h4.2a2.3 2.3 0 0 1 0 4.6H9M9 8v8.5'/%3E%3C/svg%3E");
  --m-telecharger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E");
  --m-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l1.1-3.6A8 8 0 1 1 8.4 18.6z'/%3E%3Cpath d='M9.2 8.4c.3-.6.9-.6 1.2 0l.6 1.3c.1.3 0 .6-.2.8l-.5.5c.6 1.2 1.6 2.2 2.8 2.8l.5-.5c.2-.2.5-.3.8-.2l1.3.6c.6.3.6.9 0 1.2-.8.6-1.8.8-2.7.4a8.6 8.6 0 0 1-4.5-4.5c-.4-.9-.2-1.9.4-2.7z'/%3E%3C/svg%3E");
  --m-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --m-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --m-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --m-livre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5c2.6-1 5.2-1 7.5.6 2.3-1.6 4.9-1.6 7.5-.6v13c-2.6-1-5.2-1-7.5.6-2.3-1.6-4.9-1.6-7.5-.6z'/%3E%3Cpath d='M12 6.1v13'/%3E%3C/svg%3E");
  --m-poele: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='13' r='6.5'/%3E%3Cpath d='M16.2 10.8l4.3-2.3'/%3E%3Cpath d='M8 11.5c.8-.8 2-.9 2.8-.2'/%3E%3C/svg%3E");
}

/* Icônes dans le texte : <li class="ic ic--check">…</li> */
.ic::before {
  content: ""; flex: none; display: inline-block; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ic--check { --m: var(--m-check); }
.ic--alerte { --m: var(--m-alerte); }
.ic--dirham { --m: var(--m-dirham); }
.ic--telecharger { --m: var(--m-telecharger); }
.ic--whatsapp { --m: var(--m-whatsapp); }
.ic--instagram { --m: var(--m-instagram); }
.ic--fleche { --m: var(--m-fleche); }
.ic--plus { --m: var(--m-plus); }
.ic--livre { --m: var(--m-livre); }
.ic--poele { --m: var(--m-poele); }

/* Conteneurs : aucun espacement imposé par Elementor, la mise en page vient des classes Glutelis */
.elementor .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --align-items: stretch;
}
.elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor .elementor-widget, .elementor .e-con { min-width: 0; }
.e-con.wrap { --width: min(100% - 2 * var(--gouttiere), var(--max)); }

/* Titres : on garde l'interlignage serré du système */
h1.elementor-heading-title { line-height: 0.98; }
h2.elementor-heading-title { line-height: 1.02; }
h3.elementor-heading-title { line-height: 1.12; }
h4.elementor-heading-title { line-height: 1.2; }
.paquet h3.elementor-heading-title { line-height: 1; }
.section__titre .elementor-heading-title { max-width: 16ch; }

/* Titres « détournés » en étiquettes (tampons, pastilles) : ils prennent le style de leur cadre */
:is(.paquet__statut, .alerte__tampon, .recette__badge, .paquet__lot-titre, .capture__surtitre) .elementor-heading-title {
  position: relative; margin: 0; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;
}

/* Textes : les liens restent soulignés comme sur le site local */
.elementor-widget-text-editor a, .elementor-tab-content a { text-decoration: underline; text-decoration-thickness: 2px; }

/* Boutons Elementor = boutons Glutelis (classes bouton + bouton--brun / --vert / --creme / --contour) */
.bouton .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border: var(--trait); border-radius: 999px;
  font: 800 1rem/1 var(--font-titre); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.bouton .elementor-button-content-wrapper { gap: 10px; align-items: center; }
.bouton .elementor-button:active { transform: scale(0.97); }
.bouton--brun .elementor-button:is(*, :hover, :focus, :visited) { background: var(--brun); color: var(--creme); }
.bouton--vert .elementor-button:is(*, :hover, :focus, :visited) { background: var(--vert-encre); color: var(--creme); }
.bouton--creme .elementor-button:is(*, :hover, :focus, :visited) { background: var(--creme); color: var(--brun); }
.bouton--contour .elementor-button:is(*, :hover, :focus, :visited) { background: transparent; color: var(--brun); }
@media (hover: hover) and (pointer: fine) {
  .bouton--brun .elementor-button:hover { background: #40362a; }
  .bouton--vert .elementor-button:hover { background: #255437; }
  .bouton--creme .elementor-button:hover { background: #fff; }
  .bouton--contour .elementor-button:hover { background: var(--creme-2); }
}
.bouton .elementor-button:focus-visible { outline: 3px solid var(--brun); outline-offset: 3px; }
.sur-fonce .bouton .elementor-button:focus-visible { outline-color: var(--creme); }
.bouton--plein .elementor-button { width: 100%; }

/* Bouton « lien suite » : flèche après le texte */
.lien-suite .elementor-button-content-wrapper::after {
  content: ""; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: var(--m-fleche) center / contain no-repeat; mask: var(--m-fleche) center / contain no-repeat;
  transition: translate 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .lien-suite .elementor-button:hover .elementor-button-content-wrapper::after { translate: 3px 0; } }

/* Héro : la photo et l'étiquette se placent par rapport au héro, pas à leur widget */
.heros > .elementor-widget { position: static; }
/* Conteneurs en ligne : Elementor pilote la direction par des variables */
.e-con.heros__boutons, .e-con.recette__info, .e-con.produit__actions { --flex-direction: row; --flex-wrap: wrap; --container-widget-width: auto; --container-widget-flex-grow: 0; }
.heros__boutons > .elementor-widget { flex: 1 1 auto; }
.heros__boutons .elementor-button { width: 100%; white-space: nowrap; }
.heros__rassure .ic::before { width: 18px; height: 18px; }
.elementor-element.tampon { position: absolute; }
.elementor-element.tampon svg { width: 100%; height: 100%; }

/* Tampons et pastilles faits avec un widget */
.elementor-element.paquet__statut, .elementor-element.alerte__tampon { position: absolute; }
.elementor-element.coupon__ciseaux { position: absolute; }
.coupon__ciseaux .ico { display: block; }

/* Listes du coupon : coche verte */
.coupon__liste .ic::before { background: var(--vert-encre); margin-top: 2px; }

/* Encadrés « allergènes » */
.encadre__tete.ic::before { width: 22px; height: 22px; }

/* Tableaux « valeurs » : lignes en grille, sans balise intermédiaire (plus simple à modifier) */
.valeurs dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
.valeurs dl > dt { padding-right: 20px; }
.valeurs dl > dt, .valeurs dl > dd { padding-block: 14px; border-bottom: 1px solid var(--brun); }
.valeurs dl > dt:last-of-type, .valeurs dl > dd:last-of-type { border-bottom: 4px solid var(--brun); }

dl.aliments { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); }
dl.aliments > dt { padding-right: 18px; }
dl.aliments > dt, dl.aliments > dd { padding-block: 11px; border-bottom: 1px solid var(--brun); }
dl.aliments > dt:last-of-type, dl.aliments > dd:last-of-type { border-bottom: 0; }

dl.paquet__valeurs { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); font-size: 0.93rem; }
dl.paquet__valeurs > dt { padding-right: 12px; }
dl.paquet__valeurs > dt, dl.paquet__valeurs > dd { padding-block: 9px; border-bottom: 1px solid var(--brun); }

/* Paquets : la bande de scellage déborde sur toute la largeur */
.paquet > .paquet__scelle { max-width: none; width: auto; }
.paquet__scelle .elementor-widget-container { display: contents; }
.paquet .bouton { margin-top: auto; }
.paquet .bouton .elementor-button { width: 100%; min-height: 50px; }
.paquet .elementor-widget-text-editor { font-size: inherit; }

/* Étagère : les paquets prennent toute la hauteur du rayon */
.etagere__rayon > .paquet { height: auto; }

/* Recettes : carte cliquable faite d'un conteneur-lien */
.recette { color: inherit; }
.e-con.recette__info { --flex-wrap: nowrap; }
.elementor-widget-image.recette__photo img { display: block; width: 100%; border-radius: 0; }
.recette--une .recette__photo .elementor-widget-container, .recette--une .recette__photo > a { height: 100%; }

/* Mélange maison : la légende occupe la hauteur du bocal */
.melange__corps .melange__legende { height: 100%; }

/* Mot de la fondatrice */
.mot__citation p { font: inherit; }

/* Questions fréquentes : le widget « Bascule » d'Elementor, au style Glutelis */
.faq .elementor-toggle-item { border-bottom: 1px solid var(--brun); }
.faq .elementor-toggle .elementor-tab-title {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0; border: 0; cursor: pointer;
  font: 800 clamp(1.05rem, 1rem + 0.3vw, 1.2rem)/1.3 var(--font-titre); color: var(--brun);
}
.faq .elementor-toggle .elementor-toggle-title { color: inherit; text-decoration: none; }
.faq .elementor-toggle .elementor-toggle-icon { display: none; }
.faq .elementor-toggle .elementor-tab-title::after {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--m-plus) center / contain no-repeat; mask: var(--m-plus) center / contain no-repeat;
  transition: rotate 200ms var(--ease-out);
}
.faq .elementor-toggle .elementor-tab-title.elementor-active::after { rotate: 45deg; }
.faq .elementor-toggle .elementor-tab-content { padding: 0 0 20px; border: 0; max-width: 62ch; color: var(--brun); }
.faq .elementor-toggle .elementor-tab-content p + p { margin-top: 10px; }

/* Farines : liste des mélanges */
.farines .elementor-widget-text-editor p { margin-top: 14px; color: #ece3d1; }
.farines .farines__melanges { color: var(--creme); }

/* Sommaire et texte des guides */
.prose > .prose__partie + .prose__partie { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 4px solid var(--brun); }
.prose__partie > .elementor-element + .elementor-element { margin-top: 16px; }
.prose .elementor-widget-container > * + * { margin-top: 16px; }
.prose .elementor-widget-container > h2 + * { margin-top: 16px; }
.prose h3 { margin-top: 28px; }

/* Cartes « Pour aller plus loin » faites d'un conteneur-lien */
.carte-suite h3 .ico, .carte-suite h3.ic::before { flex: none; }
.carte-suite .elementor-heading-title { display: flex; justify-content: space-between; gap: 12px; }
.carte-suite .elementor-heading-title::after {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--m-fleche) center / contain no-repeat; mask: var(--m-fleche) center / contain no-repeat;
}

/* Gabarits du thème */
.section--bas { padding-bottom: var(--section); }
.introuvable__titre { max-width: 14ch; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); }
.introuvable__boutons { max-width: 620px; margin-top: 28px; }

/* Dans l'éditeur Elementor : tout reste visible et immobile */
.elementor-editor-active :is(.revele-impression, .revele-rayon, .revele-etiquette, .imprime) {
  clip-path: none !important; transform: none !important; opacity: 1 !important; animation: none !important;
}

/* Héro : la photo remplit toujours son cadre (Elementor force height:auto sur ses images) */
.comparer .comparer__img { height: 100%; max-width: none; }

/* Fiches produit et guide : boutons d'action, couverture centrée */
.produit__actions > .elementor-widget { flex: 1 1 auto; }
.produit__actions .elementor-button { width: 100%; }
.bouton--whatsapp .elementor-button-content-wrapper::before {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--m-whatsapp) center / contain no-repeat; mask: var(--m-whatsapp) center / contain no-repeat;
}
:is(.produit__visuel, .capture__visuel) > .elementor-widget { justify-self: stretch; }
:is(.produit__visuel, .capture__visuel) .elementor-shortcode { display: grid; justify-items: center; }
.capture__visuel > .elementor-widget-text-editor { justify-self: center; }

/* Titres dont la taille vient de leur classe */
.liens__titre .elementor-heading-title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); text-align: center; }
.merci__suite-titre .elementor-heading-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* Page Liens : cartes faites d'un conteneur-lien */
.lien-carte p { font-size: 0.93rem; line-height: 1.35; }
.lien-carte .ico { display: block; }
.liens__liste > .lien-carte { width: 100%; }

/* Tampon de la page Merci */
.merci__tampon svg { display: block; }

/* Connectée à WordPress : le menu flottant de l'accueil passe sous la barre d'administration */
.admin-bar .entete--flottante { top: calc(14px + 32px); }
@media (max-width: 782px) { .admin-bar .entete--flottante { top: calc(14px + 46px); } }
@media (max-width: 560px) { .admin-bar .entete--flottante { top: calc(10px + 46px); } }

/* Guides en couleur : en-tête en bande (verte ou jaune) avec une photo dans une fenêtre découpée */
.article-tete--couleur { padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); margin-bottom: clamp(40px, 5vw, 64px); }
.article-tete--verte { background: var(--vert); color: var(--creme); }
.article-tete--jaune { background: var(--jaune); color: var(--brun); }
.article-tete__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.article-tete__photo {
  position: relative; padding: 8px; background: var(--creme);
  border: var(--trait); border-radius: calc(var(--r-decoupe) + 8px);
}
.article-tete__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--trait); border-radius: var(--r-decoupe); }
.elementor-widget-image.article-tete__photo img { display: block; width: 100%; height: auto; border: var(--trait); border-radius: var(--r-decoupe); }
.article-tete__visuel { position: relative; }
.elementor-element.article-tete__tampon { position: absolute; z-index: 2; width: clamp(88px, 8vw, 112px); top: -26px; right: -14px; rotate: -10deg; color: var(--brun); }
.article-tete__tampon svg { width: 100%; height: auto; display: block; }
.article-tete__note { margin-top: 14px; font: 700 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1.1 var(--font-main); color: var(--vert-encre); rotate: -3deg; transform-origin: left center; }
.article-tete--verte .article-tete__note { color: var(--jaune); }

/* Sommaire : liens sans soulignement (soulignés au survol), étiquette de couleur */
.sommaire.elementor-widget-text-editor a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sommaire.elementor-widget-text-editor a:hover { text-decoration: underline; } }
.sommaire--jaune { background: var(--jaune); }
.sommaire--vert { background: var(--vert-encre); color: var(--creme); }
.sommaire--vert h2 { border-bottom-color: var(--creme); }
.sommaire--vert li { border-bottom-color: rgb(249 243 233 / 0.5); }
.sur-fonce .sommaire a:focus-visible, .sommaire--vert a:focus-visible { outline-color: var(--creme); }

/* Parties numérotées comme une notice (pastille brune, chiffre jaune) */
.prose--numerotee { counter-reset: partie; }
.prose--numerotee > .prose__partie { counter-increment: partie; }
.prose--numerotee > .prose__partie h2 { display: flex; align-items: center; gap: 14px; }
.prose--numerotee > .prose__partie h2::before {
  content: counter(partie); flex: none; display: grid; place-items: center;
  width: clamp(40px, 3.6vw, 48px); aspect-ratio: 1; border-radius: 50%;
  background: var(--brun); color: var(--jaune);
  font: 800 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1 var(--font-titre); font-variant-numeric: tabular-nums;
}

/* Tableaux des guides : ligne de titres jaune */
.prose--numerotee .tableau-wrap { border-top: 0; border: var(--trait); border-radius: var(--r-etiquette); }
.prose--numerotee .tableau th, .prose--numerotee .tableau td { padding-left: 14px; }
.prose--numerotee .tableau thead th { background: var(--jaune); border-bottom: 2px solid var(--brun); }
.prose--numerotee .tableau tbody tr:nth-child(even) { background: var(--creme); }

@media (max-width: 980px) {
  .article-tete__grille { grid-template-columns: minmax(0, 1fr); }
  .article-tete__visuel { max-width: 520px; }
}
@media (max-width: 560px) {
  .elementor-element.article-tete__tampon { width: 80px; top: -20px; right: -6px; }
}

/* Téléphone : la photo avant / après d'abord, l'étiquette en dessous (elle ne mord que le bas de la photo) */
@media (max-width: 560px) {
  .heros { height: auto; min-height: 0; background: var(--creme); }
  .heros .comparer--plein { position: relative; inset: auto; height: 62svh; min-height: 360px; max-height: 560px; }
  .heros__etiquette { position: relative; left: auto; bottom: auto; width: auto; margin: -44px var(--gouttiere) 0; }
  .heros + .section { padding-top: var(--section); }
  /* le curseur vert au milieu de la photo, à portée de pouce */
  .heros .comparer--plein .comparer__tirette { top: 50%; }
}

/* Pastilles des ingrédients (riz, maïs, millet…) : contour de couleur, en alternance */
.pastilles li:nth-child(4n + 1) { border-color: var(--terracotta); }
.pastilles li:nth-child(4n + 2) { border-color: var(--vert); }
.pastilles li:nth-child(4n + 3) { border-color: var(--jaune-fonce); }
.pastilles li:nth-child(4n + 4) { border-color: var(--brun); }
.pastilles li { border-width: 2.5px; }

/* Traits de séparation dans les cartes : les gras en jaune, les fins en vert
   (les cadres des cartes restent bruns). Couleurs modifiables ici en un seul endroit. */
:root { --trait-gras: var(--jaune); --trait-fin: var(--vert); }
/* sur un fond jaune ou ocre, le trait gras jaune ne se verrait pas : il repasse en brun */
.paquet--vedette, .paquet--ocre, .sommaire--jaune { --trait-gras: var(--brun); }

/* traits gras */
.valeurs__titre,
.definition__nature,
.melange__tete,
.notice__tete,
.sommaire h2,
.carte-menu h3 { border-bottom-color: var(--trait-gras); }
.valeurs dl > dt:last-of-type, .valeurs dl > dd:last-of-type { border-bottom-color: var(--trait-gras); }
dl.paquet__valeurs, dl.aliments, .paquet__valeurs, .aliments,
.faq, .profils, .tableau-wrap { border-top-color: var(--trait-gras); }
.profils .profil { border-bottom-color: var(--trait-gras); }
.prose > .prose__partie + .prose__partie { border-top-color: var(--trait-gras); }
.prose--numerotee .tableau-wrap { border-color: var(--brun); }
.prose--numerotee .tableau thead th { border-bottom-color: var(--brun); }

/* traits fins (pleins ou pointillés) */
.valeurs dl > dt, .valeurs dl > dd,
dl.aliments > dt, dl.aliments > dd,
dl.paquet__valeurs > dt, dl.paquet__valeurs > dd { border-bottom-color: var(--trait-fin); }
.valeurs dl > dt:last-of-type, .valeurs dl > dd:last-of-type { border-bottom-color: var(--trait-gras); }
.definition__exemple { border-top-color: var(--trait-fin); }
.melange__legende .melange__liant { border-top-color: var(--trait-fin); }
.notice .notice__etapes > .notice__etape { border-bottom-color: var(--trait-fin); }
.faq .elementor-toggle-item, .faq details { border-bottom-color: var(--trait-fin); }
.sommaire li { border-bottom-color: var(--trait-fin); }
.tableau th, .tableau td { border-bottom-color: var(--trait-fin); }
.carte-menu .carte-menu__groupe { border-left-color: var(--trait-fin); border-top-color: var(--trait-fin); }
.formulaire .sondage { border-bottom-color: var(--trait-fin); }

/* sur le sommaire vert, les traits restent crème pour rester visibles */
.sommaire--vert h2 { border-bottom-color: var(--creme); }
.sommaire--vert li { border-bottom-color: rgb(249 243 233 / 0.5); }

@media (max-width: 980px) {
  .heros__etiquette { --i: 0; }
}
@media (max-width: 560px) {
  .valeurs dl { grid-template-columns: minmax(0, 1fr); }
  .valeurs dl > dt { padding-bottom: 2px; border-bottom: 0; }
  .valeurs dl > dd { padding-top: 0; }
  .valeurs dl > dt:last-of-type { border-bottom: 0; }
  dl.aliments { grid-template-columns: minmax(0, 1fr); }
  dl.aliments > dt { padding-bottom: 2px; border-bottom: 0; }
  dl.aliments > dd { padding-top: 0; }
}

/* Délais d'apparition (classes i1 à i4, à ajouter dans Elementor) */
.i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; }