/* ==========================================================================
   DELICO CONGO — FEUILLE DE STYLE
   Direction artistique : « La coulée »
   --------------------------------------------------------------------------
   Sommaire
   01. Tokens (couleurs, typo, espacements)
   02. Reset & bases
   03. Typographie
   04. Mise en page & sections
   05. Boutons
   06. En-tête & navigation
   07. Hero
   08. La coulée (élément signature)
   09. Piliers
   10. Produits
   11. Comparatif
   12. Histoire & procédé
   13. Avis clients
   14. FAQ
   15. Formulaire & contact
   16. Pro / B2B
   17. Appel à l'action final
   18. Pied de page
   19. Animations d'apparition
   20. Accessibilité & mouvement réduit
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Couleurs — dérivées de l'échelle de torréfaction de l'arachide --- */
  --creme:          #FFF6E4;   /* mie de pain — fond principal */
  --creme-2:        #F8EAD0;   /* fond alterné */
  --creme-3:        #F0DCB8;   /* bordures douces */
  --ambre:          #F79A1E;   /* la pâte — accent principal */
  --ambre-clair:    #FFC65C;
  --ambre-fonce:    #D97D06;
  --rouge:          #E1251B;   /* rouge du logo — usage identitaire */
  --rouge-cta:      #C81E14;   /* rouge assombri — contraste AA sur texte blanc */
  --brun:           #5A3418;   /* arachide torréfiée — texte principal */
  --brun-clair:     #8A6242;   /* texte secondaire */
  --brun-profond:   #2A1A0E;   /* sections sombres */
  --brun-noir:      #1A0F07;
  --vert:           #6F8340;   /* feuille — le « 100 % naturel » */
  --blanc:          #FFFFFF;

  /* --- Rôles sémantiques --- */
  --fond:           var(--creme);
  --texte:          var(--brun);
  --texte-doux:     var(--brun-clair);
  --trait:          var(--creme-3);

  /* --- Typographie --- */
  --font-titre:  "Bricolage Grotesque", "Trebuchet MS", "Helvetica Neue", sans-serif;
  --font-texte:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-donnee: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle fluide — se règle toute seule entre mobile et grand écran */
  --t-xxl:  clamp(2.9rem, 7.4vw, 6.2rem);
  --t-xl:   clamp(2.2rem, 5.2vw, 4rem);
  --t-l:    clamp(1.9rem, 4vw, 3.1rem);
  --t-m:    clamp(1.35rem, 2.2vw, 1.75rem);
  --t-base: clamp(1.02rem, 1.15vw, 1.15rem);
  --t-s:    0.94rem;
  --t-xs:   0.8rem;

  /* --- Espacements --- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: 6rem;
  --e-7: clamp(5rem, 11vw, 9.5rem);

  /* --- Divers --- */
  --largeur:     1240px;
  --largeur-txt: 62ch;
  --rayon:       4px;
  --rayon-l:     18px;
  --ombre:       0 2px 6px rgba(42, 26, 14, 0.06), 0 14px 40px rgba(42, 26, 14, 0.08);
  --ombre-fort:  0 4px 12px rgba(42, 26, 14, 0.10), 0 24px 60px rgba(42, 26, 14, 0.14);
  --transition:  260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   02. RESET & BASES
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Lien d'évitement pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--e-2) var(--e-3);
  background: var(--brun-profond);
  color: var(--creme);
  font-weight: 600;
}
.saut-contenu:focus { left: var(--e-2); top: var(--e-2); }

/* Focus visible partout — obligation d'accessibilité */
:focus-visible {
  outline: 3px solid var(--ambre-fonce);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

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

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); letter-spacing: -0.02em; line-height: 1.15; }

p { margin: 0 0 var(--e-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--brun-profond); }

/* Sur-titre : petite étiquette monospace au-dessus des titres de section.
   Le monospace n'est pas décoratif — il signale une donnée produit,
   dans le registre de la fiche technique et de la traçabilité. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre-fonce);
  margin-bottom: var(--e-2);
}
.surtitre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ambre);
  flex: none;
}

.chapo {
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--texte-doux);
  max-width: var(--largeur-txt);
  font-weight: 400;
}

.mesure { max-width: var(--largeur-txt); }

/* Mot souligné d'un trait de pâte tracé à la main */
.souligne {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.souligne::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0.02em;
  height: 0.34em;
  background: var(--ambre);
  opacity: 0.42;
  border-radius: 0.2em 0.5em 0.3em 0.4em;
  z-index: -1;
}

/* ==========================================================================
   04. MISE EN PAGE & SECTIONS
   ========================================================================== */

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.section { padding-block: var(--e-7); position: relative; }
.section--serre { padding-block: var(--e-6); }
.section--creme  { background: var(--creme-2); }

/* Halo ambré très diffus : évite l'aplat crème complètement plat sur les
   grandes sections de contenu. */
.section--halo {
  background:
    radial-gradient(80% 60% at 78% 8%, rgba(247, 154, 30, 0.16) 0%, rgba(247, 154, 30, 0) 62%),
    radial-gradient(60% 50% at 8% 96%, rgba(247, 154, 30, 0.11) 0%, rgba(247, 154, 30, 0) 60%),
    var(--creme);
}
.section--sombre { background: var(--brun-profond); color: var(--creme); }

.section--sombre h1,
.section--sombre h2,
.section--sombre h3 { color: var(--creme); }
.section--sombre .chapo { color: rgba(255, 246, 228, 0.68); }
.section--sombre .surtitre { color: var(--ambre-clair); }

.entete-section { margin-bottom: var(--e-5); max-width: 46ch; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .surtitre { justify-content: center; }
.entete-section--centre .chapo { margin-inline: auto; }
.entete-section > .chapo { margin-top: var(--e-2); }

/* Grilles génériques */
.grille { display: grid; gap: var(--e-3); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   05. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 1.05em 1.9em;
  font-family: var(--font-texte);
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              border-color var(--transition), color var(--transition),
              box-shadow var(--transition);
  will-change: transform;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icone { width: 1.15em; height: 1.15em; flex: none; }

.btn--principal {
  background: var(--rouge-cta);
  color: var(--blanc);
  box-shadow: 0 6px 18px rgba(200, 30, 20, 0.24);
}
.btn--principal:hover {
  background: #B01A11;
  box-shadow: 0 10px 26px rgba(200, 30, 20, 0.32);
}

.btn--secondaire {
  background: transparent;
  color: var(--brun);
  border-color: var(--brun);
}
.btn--secondaire:hover { background: var(--brun); color: var(--creme); }

.btn--clair {
  background: transparent;
  color: var(--creme);
  border-color: rgba(255, 246, 228, 0.45);
}
.btn--clair:hover {
  background: var(--creme);
  color: var(--brun-profond);
  border-color: var(--creme);
}

.btn--ambre {
  background: var(--ambre);
  color: var(--brun-noir);
  box-shadow: 0 6px 18px rgba(247, 154, 30, 0.28);
}
.btn--ambre:hover { background: var(--ambre-clair); }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
}

/* ==========================================================================
   06. EN-TÊTE & NAVIGATION
   ========================================================================== */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 0.85rem;
  transition: background-color var(--transition), box-shadow var(--transition),
              padding var(--transition);
}

/* Au chargement, l'en-tête est posé sur la vidéo : fond transparent,
   texte clair. Le JS ajoute « est-pose » dès que la page défile. */
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.entete__logo { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.entete__logo img { width: 46px; height: 46px; object-fit: contain; }
.entete__mot {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--creme);
  transition: color var(--transition);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav__lien {
  position: relative;
  font-size: var(--t-s);
  font-weight: 600;
  color: rgba(255, 246, 228, 0.9);
  padding-block: 0.4rem;
  transition: color var(--transition);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--ambre);
  transition: right var(--transition);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { right: 0; }
.nav__lien[aria-current="page"] { color: var(--ambre-clair); }

/* État « posé » — après défilement */
.entete.est-pose {
  background: rgba(255, 246, 228, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--trait), 0 8px 30px rgba(42, 26, 14, 0.07);
}
.entete.est-pose .entete__mot { color: var(--brun-profond); }
.entete.est-pose .nav__lien { color: var(--brun); }
.entete.est-pose .nav__lien[aria-current="page"] { color: var(--ambre-fonce); }
.entete.est-pose .burger__trait { background: var(--brun-profond); }

/* Sur les pages sans vidéo, l'en-tête est posé dès le départ */
.entete--opaque {
  background: rgba(255, 246, 228, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--trait);
}
.entete--opaque .entete__mot { color: var(--brun-profond); }
.entete--opaque .nav__lien { color: var(--brun); }
.entete--opaque .nav__lien[aria-current="page"] { color: var(--ambre-fonce); }
.entete--opaque .burger__trait { background: var(--brun-profond); }

/* Bouton hamburger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-right: -10px;
}
.burger__trait {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--creme);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition),
              background-color var(--transition);
}
.burger[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--e-3) var(--e-4);
    background: var(--creme);
    box-shadow: 0 20px 50px rgba(42, 26, 14, 0.16);
    transform: translateY(-102%);
    transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -1;
  }
  .nav.est-ouverte { transform: translateY(0); }

  .nav__lien {
    color: var(--brun) !important;
    font-size: 1.25rem;
    font-family: var(--font-titre);
    font-weight: 700;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--trait);
  }
  .nav__lien::after { display: none; }
  .nav .btn { margin-top: var(--e-3); }
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* Pas de fond ici : la vidéo de la scène occupe déjà l'arrière-plan.
     Seul le voile ci-dessous s'interpose entre elle et le texte. */
  background: transparent;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Voile brun torréfié — et surtout pas noir : le noir sur de l'alimentaire
   éteint l'appétit, le brun chaud garde le produit désirable. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(26, 15, 7, 0.62) 0%,
      rgba(42, 26, 14, 0.34) 34%,
      rgba(42, 26, 14, 0.58) 68%,
      rgba(26, 15, 7, 0.90) 100%),
    linear-gradient(96deg,
      rgba(90, 52, 24, 0.44) 0%,
      rgba(90, 52, 24, 0.06) 62%);
}

.hero > .conteneur { position: relative; }

.hero__contenu {
  position: relative;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(4rem, 9vh, 6rem);
  color: var(--creme);
  max-width: 46ch;
}

.hero__surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambre-clair);
  margin-bottom: var(--e-3);
}
.hero__surtitre::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--ambre);
}

.hero__titre {
  font-size: var(--t-xxl);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--creme);
  max-width: 12ch;
  margin-bottom: var(--e-3);
}
.hero__titre em {
  font-style: normal;
  color: var(--ambre);
  display: block;
}

.hero__texte {
  font-size: var(--t-m);
  line-height: 1.4;
  color: rgba(255, 246, 228, 0.9);
  max-width: 30ch;
  margin-bottom: var(--e-4);
}
.hero__texte b {
  color: var(--creme);
  font-weight: 700;
}

.hero__pied {
  position: absolute;
  right: 0;
  bottom: clamp(4.5rem, 11vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 246, 228, 0.6);
}
.hero__pied span:first-child {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-family: var(--font-titre);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--creme);
  line-height: 1;
}

@media (max-width: 820px) {
  .hero__contenu { max-width: 100%; }
  .hero__pied { display: none; }
}

/* ==========================================================================
   08. LA COULÉE — élément signature
   --------------------------------------------------------------------------
   Un trait de pâte d'arachide qui se dessine au fil du défilement, du hero
   jusqu'au pied de page, et relie toutes les sections entre elles. C'est le
   geste du produit : le couteau qui étale la pâte, sur toute la hauteur du
   site. C'est le seul effet spectaculaire de la page — tout le reste reste
   calme, pour qu'il porte seul.
   ========================================================================== */

/* L'empilement est volontaire et fragile : les sections restent en
   « z-index: auto » pour que leur fond soit peint sous la coulée, la coulée
   monte en 1, et le contenu des sections repasse au-dessus en 2. Ne pas
   ajouter de z-index sur .section, sinon le trait disparaît derrière. */
.coulee {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1400px);
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Deux traits superposés : un large et pâle pour la masse de la pâte, un fin
   et plus dense pour le liseré brillant. C'est ce doublage qui donne
   l'impression d'une matière étalée plutôt que d'un simple filet. */
.coulee__trace {
  fill: none;
  stroke: var(--ambre);
  stroke-linecap: round;
  stroke-width: 11;
  opacity: 0.2;
}

.coulee__liseré {
  fill: none;
  stroke: var(--ambre-fonce);
  stroke-linecap: round;
  stroke-width: 2;
  opacity: 0.42;
}

/* La goutte en tête du tracé : c'est elle qui « dépose » la coulée. */
.coulee__goutte {
  fill: var(--ambre);
  opacity: 0.9;
  filter: drop-shadow(0 2px 5px rgba(217, 125, 6, 0.4));
}

/* Le contenu passe au-dessus de la coulée */
.section > .conteneur { position: relative; z-index: 2; }

@media (max-width: 900px) { .coulee { display: none; } }

/* ==========================================================================
   07 bis. LA SCÈNE — parallaxe sur la vidéo du produit
   --------------------------------------------------------------------------
   Du hero jusqu'à la section Origine, une seule et même vidéo reste en fond.
   Le média est « sticky » : il se cale en haut de l'écran pendant que le
   contenu défile par-dessus, ce qui donne la parallaxe sans JavaScript.

   Chaque section pose ensuite son propre voile — clair, sombre, brun — et
   c'est ce changement de teinte qui marque le passage d'une section à
   l'autre. Le produit ne quitte jamais l'écran, mais l'ambiance change.

   La règle de lisibilité : un voile clair porte du texte brun, un voile
   sombre porte du texte crème. Ne jamais alléger un voile sans revérifier
   le contraste du texte posé dessus.
   ========================================================================== */

.scene { position: relative; }

.scene__media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
  /* Image de secours : mouvement réduit, vidéo non chargée, ou échec réseau */
  background: var(--brun-profond) url("../assets/images/hero-poster.jpg") center / cover no-repeat;
}

.scene__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene__contenu {
  position: relative;
  z-index: 1;
  margin-top: -100svh;   /* remonte le contenu par-dessus le média sticky */
}

/* Un étage = une section posée sur la vidéo, avec sa propre teinte. */
.etage { position: relative; }
.etage > .conteneur { position: relative; z-index: 2; }

.etage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Voile sombre chaud — texte crème */
.etage--nuit::before {
  background:
    linear-gradient(180deg,
      rgba(26, 15, 7, 0.92) 0%,
      rgba(42, 26, 14, 0.84) 42%,
      rgba(26, 15, 7, 0.93) 100%);
}

/* Voile clair crème — texte brun. Volontairement dense : les cartes produit
   blanches doivent rester nettes par-dessus. */
.etage--jour::before {
  background:
    linear-gradient(180deg,
      rgba(255, 246, 228, 0.90) 0%,
      rgba(255, 246, 228, 0.96) 30%,
      rgba(255, 246, 228, 0.96) 70%,
      rgba(248, 234, 208, 0.92) 100%);
}

/* Voile ambré tiède — sert de respiration entre deux étages tranchés */
.etage--miel::before {
  background:
    linear-gradient(180deg,
      rgba(122, 59, 0, 0.72) 0%,
      rgba(217, 125, 6, 0.42) 45%,
      rgba(90, 52, 24, 0.78) 100%);
}

/* Voile de nuit resserré au centre — pour le palier immersif */
.etage--profond::before {
  background:
    radial-gradient(115% 85% at 50% 50%,
      rgba(26, 15, 7, 0.52) 0%,
      rgba(26, 15, 7, 0.9) 70%);
}

.etage--nuit,
.etage--miel,
.etage--profond { color: var(--creme); }

.etage--nuit h1, .etage--nuit h2, .etage--nuit h3,
.etage--miel h1, .etage--miel h2, .etage--miel h3,
.etage--profond h1, .etage--profond h2, .etage--profond h3 { color: var(--creme); }

.etage--nuit .chapo,
.etage--miel .chapo,
.etage--profond .chapo { color: rgba(255, 246, 228, 0.74); }

.etage--nuit .surtitre,
.etage--miel .surtitre,
.etage--profond .surtitre { color: var(--ambre-clair); }

/* Sur mobile, « sticky » coûte cher à animer et les barres du navigateur
   font sauter la hauteur : on fige le média en fond simple. */
@media (max-width: 720px) {
  .scene__media { position: relative; height: 100svh; }
  .scene__contenu { margin-top: -100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__video { display: none; }   /* le poster du média prend le relais */
}

/* ==========================================================================
   08 bis. BANDES ET FONDS DE MATIÈRE
   --------------------------------------------------------------------------
   Le hero donne faim ; si la page enchaîne sur du texte posé sur un aplat,
   l'appétit retombe d'un coup. Ces blocs réinjectent la matière du produit
   entre les sections de lecture.
   ========================================================================== */

/* Bande pleine largeur : la coulée de pâte qui fait la couture entre le hero
   et la suite de la page. */
.bande {
  position: relative;
  height: clamp(200px, 26vw, 340px);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--ambre-fonce);
}

.bande__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  z-index: -2;
}

.bande__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(42, 26, 14, 0.34) 0%, rgba(42, 26, 14, 0.05) 40%, rgba(42, 26, 14, 0.45) 100%);
}

.bande__mot {
  position: relative;
  text-align: center;
  padding-inline: var(--e-3);
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--creme);
  text-shadow: 0 3px 22px rgba(26, 15, 7, 0.6), 0 1px 3px rgba(26, 15, 7, 0.5);
}
.bande__mot em { font-style: normal; color: var(--ambre-clair); }

/* Section posée sur une photo de matière : le texte reste lisible grâce au
   voile, mais le produit ne quitte jamais l'écran. */
.section--matiere {
  position: relative;
  isolation: isolate;
  background: var(--brun-profond);
  color: var(--creme);
  overflow: hidden;
}
.section--matiere > .fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--matiere > .fond-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 15, 7, 0.9) 0%, rgba(42, 26, 14, 0.82) 45%, rgba(26, 15, 7, 0.94) 100%);
}
.section--matiere h1,
.section--matiere h2,
.section--matiere h3 { color: var(--creme); }
.section--matiere .chapo { color: rgba(255, 246, 228, 0.72); }
.section--matiere .surtitre { color: var(--ambre-clair); }

/* Bloc immersif plein écran : une seule idée, en très grand, sur la matière.
   C'est le palier de respiration au milieu de la page. */
.immersion {
  position: relative;
  min-height: clamp(460px, 78vh, 760px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--brun-noir) url("../assets/images/macro-goutte.jpg") center / cover fixed no-repeat;
}
/* background-attachment: fixed est ignoré ou coûteux sur mobile : on repasse
   en défilement normal sur les appareils tactiles. */
@media (hover: none), (max-width: 900px) {
  .immersion { background-attachment: scroll; }
}

/* Dans la scène, c'est la vidéo qui fait le fond : on neutralise l'image. */
.immersion.etage { background: none; }

.immersion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(26, 15, 7, 0.5) 0%, rgba(26, 15, 7, 0.86) 72%);
}

.immersion__contenu {
  position: relative;
  padding: var(--e-6) var(--e-3);
  width: min(92vw, 780px);
}

.immersion__chiffre {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(6rem, 20vw, 15rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--ambre);
  text-shadow: 0 8px 44px rgba(26, 15, 7, 0.65);
  margin-bottom: var(--e-2);
}

.immersion__titre {
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  color: var(--creme);
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-bottom: var(--e-3);
  text-shadow: 0 2px 20px rgba(26, 15, 7, 0.55);
}

.immersion__texte {
  color: rgba(255, 246, 228, 0.82);
  font-size: var(--t-m);
  line-height: 1.45;
  max-width: 34ch;
  margin-inline: auto;
  text-shadow: 0 1px 12px rgba(26, 15, 7, 0.6);
}

/* ==========================================================================
   09. PILIERS — les 4 promesses
   ========================================================================== */

.piliers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2);
}

/* Cartes en verre posées sur la photo de matière : le fond du produit reste
   perceptible à travers, ce qui garde la section appétissante. */
.pilier {
  position: relative;
  padding: var(--e-4) var(--e-3) var(--e-3);
  background: rgba(255, 246, 228, 0.055);
  border: 1px solid rgba(255, 246, 228, 0.14);
  border-radius: var(--rayon-l);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(12, 7, 3, 0.34);
  transition: transform var(--transition), background-color var(--transition),
              border-color var(--transition);
}
.pilier:hover {
  transform: translateY(-6px);
  background: rgba(255, 246, 228, 0.09);
  border-color: rgba(247, 154, 30, 0.5);
}

.pilier__num {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 198, 92, 0.5);
}

/* Médaillon : disque ambre en relief qui porte l'icône. C'est lui qui donne
   aux promesses le poids visuel qui leur manquait. */
.pilier__medaillon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, #FFD98A 0%, var(--ambre) 44%, var(--ambre-fonce) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(122, 59, 0, 0.4),
    0 10px 24px rgba(217, 125, 6, 0.42);
}
.pilier__medaillon svg { width: 32px; height: 32px; color: #6B3A05; }

.pilier__titre {
  font-family: var(--font-titre);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--creme);
  margin-bottom: 0.45rem;
}

.pilier__texte {
  font-size: var(--t-s);
  color: rgba(255, 246, 228, 0.7);
  line-height: 1.55;
}

@media (max-width: 980px) { .piliers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .piliers { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. PRODUITS
   ========================================================================== */

.produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }

.produit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-4) var(--e-3) var(--e-3);
  background: linear-gradient(168deg, var(--blanc) 0%, #FFFBF2 100%);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: 0 2px 4px rgba(42, 26, 14, 0.05), 0 16px 38px rgba(42, 26, 14, 0.10);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.produit:hover {
  transform: translateY(-7px);
  box-shadow: 0 6px 14px rgba(42, 26, 14, 0.09), 0 30px 68px rgba(42, 26, 14, 0.20);
  border-color: var(--ambre);
}

.produit__media {
  margin-top: calc(var(--e-4) * -0.35);
}

/* La carte phare est surélevée en permanence : c'est le format qu'on veut
   voir choisi, il doit dominer visuellement sans étiquette criarde. */
.produit--phare {
  background: linear-gradient(168deg, #3A2412 0%, var(--brun-noir) 100%);
  color: var(--creme);
  border-color: rgba(247, 154, 30, 0.35);
  box-shadow: 0 8px 18px rgba(26, 15, 7, 0.24), 0 34px 70px rgba(26, 15, 7, 0.34);
  transform: translateY(-14px);
}
.produit--phare:hover { transform: translateY(-20px); }
@media (max-width: 940px) {
  .produit--phare, .produit--phare:hover { transform: none; }
}
.produit--phare .produit__nom     { color: var(--creme); }
.produit--phare .produit__texte   { color: rgba(255, 246, 228, 0.72); }
.produit--phare .produit__accroche{ color: var(--ambre-clair); }
.produit--phare .produit__poids   { color: var(--ambre); }
.produit--phare .produit__usage li{ color: rgba(255, 246, 228, 0.82); }
.produit--phare .produit__usage li::before { background: var(--ambre); }
.produit--phare .produit__prix    { color: var(--creme); border-top-color: rgba(255,246,228,0.2); }

.produit__etiquette {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  padding: 0.35em 0.9em;
  background: var(--ambre);
  color: var(--brun-noir);
  font-family: var(--font-donnee);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
}

/* Le grammage en monospace : c'est une donnée produit, pas un ornement */
.produit__poids {
  font-family: var(--font-donnee);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ambre-fonce);
  margin-bottom: var(--e-2);
}
.produit__poids span { font-size: 0.36em; letter-spacing: 0.02em; margin-left: 0.15em; }

.produit__nom {
  font-family: var(--font-titre);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.3rem;
}

.produit__accroche {
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--ambre-fonce);
  margin-bottom: var(--e-2);
}

.produit__texte {
  font-size: var(--t-s);
  color: var(--texte-doux);
  line-height: 1.6;
  margin-bottom: var(--e-3);
}

.produit__usage { margin-bottom: var(--e-3); display: grid; gap: 0.5rem; }
.produit__usage li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-s);
  color: var(--texte-doux);
}
.produit__usage li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--ambre);
  border-radius: 50% 50% 50% 20%;
}

.produit__prix {
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait);
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  font-weight: 500;
  margin-bottom: var(--e-2);
}

.produit .btn { width: 100%; }

@media (max-width: 940px) { .produits { grid-template-columns: 1fr; } }

/* ==========================================================================
   10bis. PACKS SOLO & FAMILLE
   Les deux offres du site. La quantité devient la donnée produit affichée
   en monospace, dans le registre de la fiche technique.
   ========================================================================== */

.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-4) var(--e-3) var(--e-3);
  background: linear-gradient(168deg, var(--blanc) 0%, #FFFBF2 100%);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: 0 2px 4px rgba(42, 26, 14, 0.05), 0 16px 38px rgba(42, 26, 14, 0.10);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.pack:hover {
  transform: translateY(-7px);
  box-shadow: 0 6px 14px rgba(42, 26, 14, 0.09), 0 30px 68px rgba(42, 26, 14, 0.20);
  border-color: var(--ambre);
}

.pack__media,
.produit__media {
  margin: calc(var(--e-4) * -0.35) calc(var(--e-3) * -0.45) var(--e-3);
  overflow: hidden;
  border-radius: calc(var(--rayon-l) - 4px);
  background: var(--brun-noir);
  aspect-ratio: 1;
}

.pack__media img,
.produit__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack--phare .pack__media,
.produit--phare .produit__media {
  background: #2A1A0E;
}

.pack--phare {
  background: linear-gradient(168deg, #3A2412 0%, var(--brun-noir) 100%);
  color: var(--creme);
  border-color: rgba(247, 154, 30, 0.35);
  box-shadow: 0 8px 18px rgba(26, 15, 7, 0.24), 0 34px 70px rgba(26, 15, 7, 0.34);
  transform: translateY(-14px);
}
.pack--phare:hover { transform: translateY(-20px); }
@media (max-width: 940px) {
  .pack--phare, .pack--phare:hover { transform: none; }
}
.pack--phare .pack__nom      { color: var(--creme); }
.pack--phare .pack__texte    { color: rgba(255, 246, 228, 0.72); }
.pack--phare .pack__accroche { color: var(--ambre-clair); }
.pack--phare .pack__quantite { color: var(--ambre); }
.pack--phare .pack__usage li { color: rgba(255, 246, 228, 0.82); }
.pack--phare .pack__usage li::before { background: var(--ambre); }
.pack--phare .pack__prix     { color: var(--creme); border-top-color: rgba(255,246,228,0.2); }

.pack__quantite {
  font-family: var(--font-donnee);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ambre-fonce);
  margin-bottom: var(--e-2);
}
.pack__quantite span { font-size: 0.36em; letter-spacing: 0.02em; margin-left: 0.15em; }

.pack__nom {
  font-family: var(--font-titre);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.3rem;
}

.pack__accroche {
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--ambre-fonce);
  margin-bottom: var(--e-2);
}

.pack__texte {
  font-size: var(--t-s);
  color: var(--texte-doux);
  line-height: 1.6;
  margin-bottom: var(--e-3);
}

.pack__usage { margin-bottom: var(--e-3); display: grid; gap: 0.5rem; }
.pack__usage li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-s);
  color: var(--texte-doux);
}
.pack__usage li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--ambre);
  border-radius: 50% 50% 50% 20%;
}

.pack__prix {
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait);
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  font-weight: 500;
  margin-bottom: var(--e-2);
}

.pack .btn { width: 100%; }

@media (max-width: 940px) { .packs { grid-template-columns: 1fr; } }

/* ==========================================================================
   10ter. INFOS PRODUIT — sachets 50 g, fabrication
   ========================================================================== */

.infos-produit {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3);
  background: linear-gradient(168deg, var(--creme-2) 0%, var(--creme) 100%);
  border: 1px dashed var(--ambre);
  border-radius: var(--rayon-l);
  max-width: var(--largeur-txt);
}
.infos-produit__icone { width: 30px; height: 30px; flex: none; color: var(--ambre-fonce); margin-top: 2px; }
.infos-produit p:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
  .infos-produit { flex-direction: column; }
}

/* ==========================================================================
   11bis. COMMENT PAYER
   La section des moyens de paiement : mobile money, M-Pesa, carte bancaire.
   Seuls le service et le numéro s'affichent, aucun nom de personne.
   ========================================================================== */

.paiements { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }

.paiement {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: 0 2px 4px rgba(42, 26, 14, 0.05), 0 12px 30px rgba(42, 26, 14, 0.08);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.paiement:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(42, 26, 14, 0.09), 0 24px 56px rgba(42, 26, 14, 0.16);
  border-color: var(--ambre);
}

.paiement__badge {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--rayon);
  background: var(--fond-badge, var(--ambre));
  color: var(--creme);
  display: grid;
  place-items: center;
}
.paiement__badge svg { width: 26px; height: 26px; }

.paiement__service {
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brun-profond);
}

.paiement__numero {
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--brun-clair);
  margin-top: 0.15rem;
}

.paiement__note {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--texte-doux);
  max-width: var(--largeur-txt);
}

@media (max-width: 940px) { .paiements { grid-template-columns: 1fr; } }

/* ==========================================================================
   11ter. RÉCEPTION DE COMMANDE
   Encart qui précise la date de réception : le client sait exactement
   quand sa commande arrive au moment de passer commande.
   ========================================================================== */

.reception {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: linear-gradient(168deg, #3A2412 0%, var(--brun-noir) 100%);
  color: var(--creme);
  border: 1px solid rgba(247, 154, 30, 0.35);
  border-radius: var(--rayon-l);
  max-width: var(--largeur-txt);
}
.reception__icone {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(247, 154, 30, 0.18);
  border-radius: var(--rayon-l);
  color: var(--ambre);
}
.reception__titre {
  font-family: var(--font-titre);
  font-size: var(--t-s);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}
.reception p { color: rgba(255, 246, 228, 0.75); }
.reception strong { color: var(--ambre-clair); }

@media (max-width: 780px) {
  .reception { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   11. COMPARATIF
   ========================================================================== */

.comparatif {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  align-items: start;
}

.colonne-comp {
  padding: var(--e-4) var(--e-3);
  border-radius: var(--rayon-l);
}

.colonne-comp--autres {
  background: rgba(90, 52, 24, 0.05);
  border: 1px solid var(--trait);
}
.colonne-comp--delico {
  background: var(--brun-profond);
  color: var(--creme);
  box-shadow: var(--ombre-fort);
}

.colonne-comp__titre {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--trait);
}
.colonne-comp--delico .colonne-comp__titre {
  color: var(--ambre);
  border-bottom-color: rgba(255, 246, 228, 0.18);
}

.liste-comp { display: grid; gap: 0.9rem; }
.liste-comp li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--t-s);
  line-height: 1.5;
}
.liste-comp li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}
.colonne-comp--autres .liste-comp li { color: var(--texte-doux); }
.colonne-comp--autres .liste-comp li::before {
  content: "\00d7";
  background: rgba(90, 52, 24, 0.1);
  color: var(--brun-clair);
}
.colonne-comp--delico .liste-comp li { color: rgba(255, 246, 228, 0.92); }
.colonne-comp--delico .liste-comp li::before {
  content: "\2713";
  background: var(--ambre);
  color: var(--brun-noir);
}

/* Variante posée sur une photo de matière : la colonne « les autres » devient
   un bloc sombre en retrait, la colonne Delico garde tout l'éclat. */
.section--matiere .colonne-comp--autres {
  background: rgba(12, 7, 3, 0.42);
  border-color: rgba(255, 246, 228, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section--matiere .colonne-comp--autres .colonne-comp__titre {
  color: rgba(255, 246, 228, 0.72);
  border-bottom-color: rgba(255, 246, 228, 0.16);
}
.section--matiere .colonne-comp--autres .liste-comp li { color: rgba(255, 246, 228, 0.56); }
.section--matiere .colonne-comp--autres .liste-comp li::before {
  background: rgba(255, 246, 228, 0.14);
  color: rgba(255, 246, 228, 0.6);
}
.section--matiere .colonne-comp--delico {
  background: linear-gradient(168deg, #3A2412 0%, var(--brun-noir) 100%);
  border: 1px solid rgba(247, 154, 30, 0.4);
  box-shadow: 0 10px 24px rgba(12, 7, 3, 0.4), 0 34px 70px rgba(12, 7, 3, 0.5);
}

@media (max-width: 780px) { .comparatif { grid-template-columns: 1fr; } }

/* ==========================================================================
   12. HISTOIRE & PROCÉDÉ
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo--inverse .duo__media { order: -1; }

.duo__media {
  position: relative;
  border-radius: var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.duo__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

.duo__legende {
  position: absolute;
  left: var(--e-2);
  bottom: var(--e-2);
  right: var(--e-2);
  padding: 0.7em 1em;
  background: rgba(26, 15, 7, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--creme);
  font-family: var(--font-donnee);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-radius: var(--rayon);
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo__media { order: 0; }
}

/* Le procédé — une vraie séquence, donc une numérotation justifiée */
.procede { display: grid; gap: 0; counter-reset: etape; }

.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--trait);
  counter-increment: etape;
}
.etape:last-child { border-bottom: none; }

.etape__num {
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--ambre-fonce);
  padding-top: 0.3em;
}
.etape__num::before { content: "0" counter(etape); }

.etape__titre {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}
.etape__texte { font-size: var(--t-s); color: var(--texte-doux); max-width: 58ch; }

.section--sombre .etape { border-bottom-color: rgba(255, 246, 228, 0.14); }
.section--sombre .etape__texte { color: rgba(255, 246, 228, 0.7); }

/* ==========================================================================
   13. AVIS CLIENTS
   ========================================================================== */

.avis {
  display: flex;
  flex-direction: column;
  padding: var(--e-3);
  background: linear-gradient(168deg, var(--blanc) 0%, #FFFBF2 100%);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: 0 2px 4px rgba(42, 26, 14, 0.04), 0 14px 32px rgba(42, 26, 14, 0.09);
  transition: transform var(--transition), box-shadow var(--transition);
}
.avis:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(42, 26, 14, 0.07), 0 24px 52px rgba(42, 26, 14, 0.15);
}

.avis__note {
  display: flex;
  gap: 2px;
  margin-bottom: var(--e-2);
  color: var(--ambre);
}
.avis__note svg { width: 16px; height: 16px; }

.avis__titre {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.avis__texte {
  font-size: var(--t-s);
  color: var(--texte-doux);
  line-height: 1.6;
  margin-bottom: var(--e-3);
}

.avis__auteur {
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avis__initiale {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--creme-2);
  color: var(--ambre-fonce);
  border-radius: 50%;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1rem;
}

.avis__nom { font-weight: 700; font-size: var(--t-s); line-height: 1.2; }
.avis__lieu {
  font-family: var(--font-donnee);
  font-size: 0.72rem;
  color: var(--texte-doux);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq { max-width: 860px; margin-inline: auto; }

.faq__item { border-bottom: 1px solid var(--trait); }
.faq__item:first-child { border-top: 1px solid var(--trait); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) 0;
  text-align: left;
  font-family: var(--font-titre);
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--brun-profond);
  transition: color var(--transition);
}
.faq__question:hover { color: var(--ambre-fonce); }

.faq__signe {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ambre-fonce);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__signe::before { width: 18px; height: 2.5px; }
.faq__signe::after  { width: 2.5px; height: 18px; }
.faq__question[aria-expanded="true"] .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__reponse {
  overflow: hidden;
  height: 0;
  transition: height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq__reponse > div { padding-bottom: var(--e-3); }
.faq__reponse p { color: var(--texte-doux); max-width: 68ch; }
.faq__reponse ul { display: grid; gap: 0.5rem; margin-top: var(--e-2); }
.faq__reponse li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--texte-doux);
  font-size: var(--t-s);
}
.faq__reponse li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  background: var(--ambre);
  border-radius: 50% 50% 50% 20%;
}

/* Avertissement allergène — mention réglementaire, doit être visible */
.allergene {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3);
  background: rgba(225, 37, 27, 0.06);
  border: 1px solid rgba(225, 37, 27, 0.25);
  border-left: 4px solid var(--rouge);
  border-radius: var(--rayon);
}
.allergene__icone { width: 24px; height: 24px; flex: none; color: var(--rouge-cta); margin-top: 2px; }
.allergene__titre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--rouge-cta);
  margin-bottom: 0.25rem;
}
.allergene p { font-size: var(--t-s); color: var(--texte); margin: 0; }

/* ==========================================================================
   15. FORMULAIRE & CONTACT
   ========================================================================== */

.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.canal {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
  transition: transform var(--transition);
}
.canal:last-of-type { border-bottom: none; }
a.canal:hover { transform: translateX(5px); }

.canal__icone {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--creme-2);
  border-radius: 12px;
  color: var(--ambre-fonce);
}
.canal__icone svg { width: 21px; height: 21px; }

.canal__titre {
  font-family: var(--font-titre);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.canal__texte { font-size: var(--t-s); color: var(--texte-doux); }
.canal__valeur {
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  color: var(--ambre-fonce);
  font-weight: 500;
}

.formulaire {
  padding: var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
}

.champ { margin-bottom: var(--e-3); }
.champ label {
  display: block;
  font-size: var(--t-s);
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-texte);
  font-size: var(--t-s);
  color: var(--texte);
  background: var(--creme);
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color var(--transition), background-color var(--transition);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--ambre);
  background: var(--blanc);
  outline: none;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ__aide { font-size: 0.78rem; color: var(--texte-doux); margin-top: 0.35rem; }

.formulaire .btn { width: 100%; }

.note-formulaire {
  margin-top: var(--e-2);
  font-size: 0.78rem;
  color: var(--texte-doux);
  text-align: center;
}

/* ==========================================================================
   16. PRO / B2B
   ========================================================================== */

.hero-page {
  position: relative;
  padding-block: clamp(9rem, 20vh, 13rem) var(--e-6);
  background: var(--brun-profond);
  color: var(--creme);
  overflow: hidden;
}
.hero-page h1 { color: var(--creme); max-width: 18ch; }
.hero-page .chapo { color: rgba(255, 246, 228, 0.72); margin-top: var(--e-3); }
.hero-page .surtitre { color: var(--ambre-clair); }

/* Texture d'arrière-plan : coulée figée, très discrète */
.hero-page__decor {
  position: absolute;
  right: -8%;
  top: -10%;
  width: min(52%, 620px);
  opacity: 0.11;
  pointer-events: none;
  color: var(--ambre);
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 246, 228, 0.18);
}
.chiffre__valeur {
  font-family: var(--font-donnee);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ambre);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.chiffre__label {
  font-size: var(--t-s);
  color: rgba(255, 246, 228, 0.66);
  line-height: 1.35;
}
@media (max-width: 620px) { .chiffres { grid-template-columns: 1fr; gap: var(--e-2); } }

.carte-pro {
  padding: var(--e-4) var(--e-3);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-pro:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }

/* Même médaillon que les piliers de l'accueil, en version claire : les icônes
   gardent le même poids visuel d'une page à l'autre. */
.carte-pro__medaillon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, #FFD98A 0%, var(--ambre) 44%, var(--ambre-fonce) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(122, 59, 0, 0.35),
    0 8px 20px rgba(217, 125, 6, 0.3);
}
.carte-pro__medaillon svg { width: 28px; height: 28px; color: #6B3A05; }

.carte-pro__icone { width: 44px; height: 44px; color: var(--ambre-fonce); margin-bottom: var(--e-2); }
.carte-pro__titre {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
}
.carte-pro__texte { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.55; }

/* ==========================================================================
   17. APPEL À L'ACTION FINAL
   ========================================================================== */

.cta-final {
  position: relative;
  padding-block: var(--e-7);
  background:
    linear-gradient(180deg, rgba(26, 15, 7, 0.93) 0%, rgba(42, 26, 14, 0.88) 50%, rgba(26, 15, 7, 0.96) 100%),
    url("../assets/images/fond-cuillere.jpg") center / cover no-repeat;
  color: var(--creme);
  text-align: center;
  overflow: hidden;
}
.cta-final h2 {
  color: var(--creme);
  font-size: var(--t-xl);
  max-width: 16ch;
  margin-inline: auto;
}
.cta-final h2 em { font-style: normal; color: var(--ambre); }
.cta-final .chapo {
  color: rgba(255, 246, 228, 0.72);
  margin: var(--e-3) auto var(--e-4);
  max-width: 48ch;
}
.cta-final .groupe-btn { justify-content: center; }

.cta-final__decor {
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  width: min(120%, 1100px);
  opacity: 0.09;
  color: var(--ambre);
  pointer-events: none;
}

/* ==========================================================================
   18. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--brun-noir);
  color: rgba(255, 246, 228, 0.62);
  padding-block: var(--e-5) var(--e-3);
  font-size: var(--t-s);
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--e-4) var(--e-3);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid rgba(255, 246, 228, 0.12);
}
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }

.pied__marque { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--e-2); }
.pied__marque img { width: 44px; height: 44px; object-fit: contain; }
.pied__marque span {
  font-family: var(--font-titre);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--creme);
}
.pied__contact {
  font-family: var(--font-donnee);
  font-size: var(--t-s);
  color: var(--brun-clair);
  margin-top: var(--e-2);
}

.pied__slogan { max-width: 34ch; line-height: 1.55; }

.pied__titre {
  font-family: var(--font-donnee);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: var(--e-2);
}

.pied__liens { display: grid; gap: 0.7rem; }
.pied__liens a { transition: color var(--transition); }
.pied__liens a:hover { color: var(--creme); }

.pied__reseaux { display: flex; gap: 0.6rem; margin-top: var(--e-3); }
.pied__reseaux a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 246, 228, 0.2);
  border-radius: 50%;
  color: rgba(255, 246, 228, 0.72);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.pied__reseaux a:hover {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--brun-noir);
  transform: translateY(-2px);
}
.pied__reseaux svg { width: 18px; height: 18px; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-3);
  font-size: 0.8rem;
}
.pied__bas a:hover { color: var(--creme); }

/* ==========================================================================
   19. ANIMATIONS D'APPARITION
   ========================================================================== */

.apparait {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apparait.est-visible { opacity: 1; transform: none; }

/* Décalage en cascade pour les listes d'éléments */
.apparait[data-retard="1"] { transition-delay: 90ms; }
.apparait[data-retard="2"] { transition-delay: 180ms; }
.apparait[data-retard="3"] { transition-delay: 270ms; }

/* ==========================================================================
   20. ACCESSIBILITÉ & MOUVEMENT RÉDUIT
   ========================================================================== */

.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .apparait { opacity: 1; transform: none; }
  .hero__video { display: none; }        /* le voile et le fond prennent le relais */
  .coulee__trace { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

@media print {
  .entete, .coulee, .hero__video, .pied__reseaux { display: none; }
  body { background: #fff; color: #000; }
}
/* Commande du jour et panier */
.commande-jour { margin: var(--e-4) 0; padding: var(--e-3); display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); border:1px solid rgba(247,154,30,.35); background:linear-gradient(135deg,rgba(247,154,30,.12),rgba(255,255,255,.8)); border-radius:var(--rayon, 16px); }
.commande-jour__titre { margin:0 0 .35rem; font-weight:800; color:var(--brun-profond); }
.commande-jour__texte { margin:0; max-width:48rem; font-size:.92rem; color:var(--texte-doux); }
.compte-a-rebours { display:flex; gap:.45rem; flex-shrink:0; }
.compte-a-rebours span { display:grid; place-items:center; min-width:3.25rem; padding:.55rem .35rem; background:var(--brun-profond); color:#fff; border-radius:10px; font-family:'JetBrains Mono',monospace; }
.compte-a-rebours b { font-size:1.25rem; line-height:1; }
.compte-a-rebours small { margin-top:.2rem; font-size:.65rem; color:var(--ambre-clair); }
.pack__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-top:auto; }
.btn--texte { color:var(--brun-profond); font-size:.82rem; text-decoration:underline; text-underline-offset:3px; }
.panier { position:fixed; z-index:1000; inset:0 0 0 auto; width:min(100%, 31rem); overflow:auto; padding:clamp(1.25rem,4vw,2.25rem); background:var(--creme); box-shadow:-18px 0 50px rgba(26,15,7,.25); }
.panier[hidden] { display:none; }
.panier__entete { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:var(--e-3); }
.panier__entete h2 { margin:0; }
.panier__fermer { border:0; background:none; font-size:2rem; line-height:1; cursor:pointer; color:var(--brun-profond); }
.panier__articles { display:grid; gap:.75rem; margin-bottom:var(--e-3); }
.panier__ligne { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--trait); background:#fff; border-radius:12px; }
.panier__ligne span { display:block; margin-top:.25rem; font-size:.8rem; color:var(--texte-doux); }
.panier__quantite { display:flex; align-items:center; gap:.55rem; }
.panier__quantite button { width:2rem; height:2rem; border:1px solid var(--trait); border-radius:50%; background:var(--creme); cursor:pointer; font-size:1.15rem; }
.panier__vide { color:var(--texte-doux); }
.panier__formulaire { padding:0; border:0; background:transparent; }
.commande-jour__preuve { margin:.6rem 0 0; display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600; color:#1e7b2f; background:rgba(30,123,47,.08); border:1px solid rgba(30,123,47,.3); border-radius:999px; padding:.45rem 1rem; width:fit-content; }
.commande-jour__preuve svg { width:1.1rem; height:1.1rem; flex-shrink:0; }
.commande-jour__preuve b { font-weight:800; }
@media (max-width:700px) { .commande-jour { align-items:flex-start; flex-direction:column; } .compte-a-rebours { width:100%; } .compte-a-rebours span { flex:1; } }