/* ==========================================================================
   Jannatu Agro Food — feuille de styles principale
   Palette : vert Sahel, or mil, terre de Casamance, crème lait
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --green-900:#06402B;
  --green-800:#0A5637;
  --green-700:#0E6B45;
  --green-600:#137A50;
  --green-500:#17A05F;
  --green-050:#E8F3EC;

  --gold-600:#C98A0E;
  --gold-500:#E8A317;
  --gold-400:#F5B92A;
  --gold-100:#FCEFCF;

  --terra-600:#A8442A;
  --terra-500:#C75B39;
  --terra-100:#F8E3DA;

  --blue-700:#152F7A;
  --blue-600:#1B3FA0;

  --cream:#FFF8EE;
  --sand:#F5EADA;
  --paper:#FFFFFF;

  --ink:#1B1710;
  --ink-2:#4A4237;
  --muted:#7A7062;
  --line:rgba(27,23,16,.10);
  --line-strong:rgba(27,23,16,.18);

  --radius-xs:10px;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --radius-xl:40px;

  --shadow-sm:0 2px 8px rgba(27,23,16,.06);
  --shadow:0 12px 30px -12px rgba(27,23,16,.20);
  --shadow-lg:0 34px 70px -30px rgba(27,23,16,.36);

  --container:1220px;
  --gutter:clamp(1.15rem, 4vw, 2.5rem);
  --section-y:clamp(3.75rem, 8vw, 7.5rem);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-script:"Yellowtail","Snell Roundhand","Brush Script MT",cursive;

  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.1;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.35rem,1.5rem + 4.2vw,4.15rem);}
h2{font-size:clamp(1.85rem,1.25rem + 2.6vw,3rem);}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);}
p{margin:0 0 1.1em;}
a{color:var(--green-700);text-decoration-thickness:1.5px;text-underline-offset:3px;}
ul,ol{padding-left:1.25em;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:6px;}
::selection{background:var(--gold-400);color:var(--green-900);}

/* ---------- 3. Layout ---------- */
.container{width:min(100% - (var(--gutter) * 2),var(--container));margin-inline:auto;}
.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:clamp(2.5rem,5vw,4.5rem);}
.section--cream{background:var(--cream);}
.section--sand{background:linear-gradient(180deg,var(--sand),#fbf2e5);}
.section--paper{background:var(--paper);}
.section--dark{background:var(--green-900);color:rgba(255,255,255,.82);}
.section--dark h2,.section--dark h3{color:#fff;}
.grid{display:grid;gap:clamp(1.25rem,3vw,2rem);}
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;background:var(--green-900);color:#fff;
  padding:.75rem 1.15rem;border-radius:0 0 var(--radius-xs) var(--radius-xs);transition:top .2s;
}
.skip-link:focus{top:0;}

/* ---------- 4. Éléments de titrage ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra-500);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;}
.section--dark .eyebrow{color:var(--gold-400);}
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.25rem);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow::before{display:none;}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--ink-2);}
.section--dark .lead{color:rgba(255,255,255,.78);}

/* ---------- 5. Boutons ---------- */
.btn{
  --btn-bg:var(--green-700);--btn-fg:#fff;--btn-bd:var(--green-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.5rem;border-radius:100px;border:2px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  box-shadow:0 10px 22px -14px rgba(6,64,43,.9);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(6,64,43,.85);}
.btn:active{transform:translateY(0);}
.btn--gold{--btn-bg:var(--gold-400);--btn-fg:var(--green-900);--btn-bd:var(--gold-400);}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--green-900);--btn-bd:var(--line-strong);box-shadow:none;}
.btn--ghost:hover{--btn-bd:var(--green-700);--btn-bg:rgba(14,107,69,.06);}
.btn--light{--btn-bg:#fff;--btn-fg:var(--green-900);--btn-bd:#fff;}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45);box-shadow:none;}
.btn--outline-light:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.12);}
.btn--sm{padding:.65rem 1.1rem;font-size:.85rem;}
.btn--wa{--btn-bg:#1FA855;--btn-bd:#1FA855;}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s;
}
.header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,64,43,.55),rgba(6,64,43,0));
  opacity:1;transition:opacity .3s;pointer-events:none;
}
.header.is-stuck{background:rgba(255,248,238,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(27,23,16,.5);}
.header.is-stuck::before{opacity:0;}
.header__inner{display:flex;align-items:center;gap:1rem;width:100%;}
.header__logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;}
.header__logo img{width:clamp(150px,17vw,186px);}
/* Deux versions du logo plutôt qu'un filtre. « brightness(0) invert(1) »
   aplatissait tout le dessin en une silhouette blanche : le badge devenait
   un carré blanc sans la feuille, et sur un fond clair le logo entier
   disparaissait. Ici chaque version garde ses couleurs, seule la version
   affichée change. */
.header__logo-img--clair{display:none;}
.header:not(.is-stuck):not(.header--solid) .header__logo-img--sombre{display:none;}
.header:not(.is-stuck):not(.header--solid) .header__logo-img--clair{display:block;}
.header--solid{background:rgba(255,248,238,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);}
.header--solid::before{opacity:0;}

.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem;}
.nav__link{
  --nav-pad:.8rem;
  position:relative;padding:.55rem var(--nav-pad);border-radius:100px;
  font-size:.92rem;font-weight:600;text-decoration:none;color:#fff;
  transition:color .2s,background .2s;white-space:nowrap;
}
.header.is-stuck .nav__link,.header--solid .nav__link{color:var(--ink);}
.nav__link::after{
  content:"";position:absolute;left:50%;bottom:.28rem;translate:-50% 0;
  width:0;height:2px;border-radius:2px;background:var(--gold-400);transition:width .25s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:calc(100% - var(--nav-pad) * 2);}
/* Entre 1024 et 1200 px, six entrées tiennent tout juste : on resserre. */
@media (max-width:1200px){.nav{gap:.15rem;}.nav__link{--nav-pad:.6rem;}.header__cta{margin-left:.35rem;}}
.header__cta{margin-left:.6rem;}
.header:not(.is-stuck):not(.header--solid) .header__cta.btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5);}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:14px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);cursor:pointer;
  align-items:center;justify-content:center;
}
.header.is-stuck .burger,.header--solid .burger{background:rgba(27,23,16,.07);}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:.3s var(--ease);}
.header.is-stuck .burger span,.header--solid .burger span{background:var(--ink);}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:inherit;border-radius:2px;transition:.3s var(--ease);
}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
/* Menu ouvert : la barre du haut prend la couleur du tiroir pour rester lisible. */
body.is-menu-open .header{background:rgba(255,248,238,.94);backdrop-filter:blur(14px);}
body.is-menu-open .header::before{opacity:0;}
body.is-menu-open .header__logo-img--clair{display:none!important;}
body.is-menu-open .header__logo-img--sombre{display:block!important;}
body.is-menu-open .burger{background:#fff;box-shadow:var(--shadow-sm);}
body.is-menu-open .burger span{background:transparent!important;}
body.is-menu-open .burger span::before{top:0;transform:rotate(45deg);background:var(--ink);}
body.is-menu-open .burger span::after{top:0;transform:rotate(-45deg);background:var(--ink);}

/* Tiroir mobile */
.drawer{
  position:fixed;inset:0;z-index:99;visibility:hidden;
}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(6,64,43,.5);opacity:0;transition:opacity .35s var(--ease);
  backdrop-filter:blur(2px);
}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(90vw,380px);
  background:var(--cream);padding:calc(var(--header-h) + 1.5rem) 1.75rem 2rem;
  transform:translateX(100%);transition:transform .4s var(--ease);
  overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;
  box-shadow:var(--shadow-lg);
}
body.is-menu-open .drawer{visibility:visible;}
body.is-menu-open .drawer__scrim{opacity:1;}
body.is-menu-open .drawer__panel{transform:translateX(0);}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem .25rem;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink);text-decoration:none;
}
.drawer__link:hover{color:var(--green-700);}
.drawer__foot{margin-top:auto;padding-top:1.75rem;display:grid;gap:.6rem;}
.drawer__phone{
  display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--green-800);text-decoration:none;font-size:1.05rem;
}

/* ---------- 7. Hero / carrousel ---------- */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  background:var(--green-900);
}
/* Le viewport reste dans le flux : si une diapositive est plus haute que
   l’écran (mobile, gros textes), le hero grandit au lieu de rogner. */
.hero__viewport{position:relative;flex:1 0 auto;display:flex;overflow:hidden;}
.hero__track{
  display:flex;flex:1 0 auto;width:100%;align-items:stretch;
  transition:transform .8s var(--ease);
  will-change:transform;
}
.hero__track.is-dragging{transition:none;}
.hero__slide{
  position:relative;flex:0 0 100%;width:100%;
  display:flex;align-items:center;
  padding-block:calc(var(--header-h) + 2.5rem) 6.5rem;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-2;}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.4'%3E%3Cpath d='M0 60h120M60 0v120'/%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Ccircle cx='0' cy='0' r='14'/%3E%3Ccircle cx='120' cy='0' r='14'/%3E%3Ccircle cx='0' cy='120' r='14'/%3E%3Ccircle cx='120' cy='120' r='14'/%3E%3Cpath d='M60 38 74 60 60 82 46 60z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 150px;
  opacity:.5;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
.hero__slide[data-theme="milk"] .hero__bg{
  background:
    radial-gradient(90% 70% at 78% 22%,rgba(245,185,42,.34),transparent 58%),
    radial-gradient(70% 60% at 12% 88%,rgba(23,160,95,.36),transparent 62%),
    linear-gradient(150deg,#0B4E36 0%,#06402B 46%,#0A2C20 100%);
}
.hero__slide[data-theme="maison"] .hero__bg{
  background:
    radial-gradient(80% 62% at 18% 16%,rgba(245,185,42,.34),transparent 58%),
    radial-gradient(80% 68% at 88% 86%,rgba(199,91,57,.34),transparent 60%),
    linear-gradient(150deg,#0B4E36 0%,#07412A 46%,#241E10 100%);
}
.hero__slide[data-theme="grain"] .hero__bg{
  background:
    radial-gradient(85% 70% at 22% 18%,rgba(245,185,42,.4),transparent 58%),
    radial-gradient(75% 65% at 85% 82%,rgba(199,91,57,.4),transparent 60%),
    linear-gradient(140deg,#7A4A12 0%,#5B3410 44%,#33200C 100%);
}
.hero__slide[data-theme="terroir"] .hero__bg{
  background:
    radial-gradient(70% 60% at 50% 8%,rgba(245,185,42,.45),transparent 60%),
    radial-gradient(90% 80% at 84% 96%,rgba(14,107,69,.55),transparent 62%),
    linear-gradient(160deg,#14371F 0%,#0C2B1B 50%,#071C12 100%);
}
.hero__grid{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  grid-template-columns:1fr;width:min(100% - (var(--gutter) * 2),var(--container));margin-inline:auto;
}
.hero__copy{max-width:36rem;color:rgba(255,255,255,.86);}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.42rem .95rem .42rem .55rem;border-radius:100px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  margin-bottom:1.15rem;
}
.hero__eyebrow i{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--gold-400);color:var(--green-900);font-style:normal;font-size:.8rem;
}
.hero h1{color:#fff;margin-bottom:.45em;}
/* le mot en anglaise est un bloc en ligne : sans cela, la virgule qui le suit
   peut se retrouver seule en début de ligne sur les écrans étroits. */
.insecable{white-space:nowrap;}
.hero h1 .script{
  font-family:var(--font-script);font-weight:400;
  color:var(--gold-400);font-size:1.18em;line-height:.9;display:inline-block;
  padding-right:.08em;
}
.hero__text{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);color:rgba(255,255,255,.8);max-width:34rem;}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none;}
.hero__meta li{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .85rem;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9);
}
.hero .btn-row{margin-top:1.75rem;}

.hero__visual{position:relative;display:flex;justify-content:center;align-items:center;}
.hero__photo{
  position:relative;margin:0;width:min(100%,620px);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.14);
}
.hero__photo--3d{
  background:
    radial-gradient(75% 70% at 50% 34%,rgba(255,246,232,.16),transparent 62%),
    linear-gradient(170deg,rgba(255,255,255,.07),rgba(0,0,0,.28));
}
.hero__canvas{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  display:block;opacity:0;transition:opacity .8s var(--ease);
}
.has-hero3d .hero__canvas{opacity:1;}
/* La photo reste sous le canevas : elle donne le format du cadre
   et sert de repli quand WebGL n'est pas disponible. */
.has-hero3d .hero__photo--3d img{visibility:hidden;}
.hero__photo img{
  display:block;width:100%;height:auto;
  transform-origin:52% 55%;
  animation:kenburns 22s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.hero__slide.is-active .hero__photo img{animation-play-state:running;}
.hero__photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(6,24,15,.55));pointer-events:none;
}
.hero__photo-tag{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .9rem;border-radius:100px;
  background:rgba(255,248,238,.94);backdrop-filter:blur(6px);
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-900);box-shadow:var(--shadow-sm);
}
/* --- Diapositive d'ouverture : une porte d'entrée par marque -----------
   Deux cartes cliquables côte à côte : on voit les deux gammes dès le
   premier écran, et chacune mène à sa page. Le produit est détouré, posé
   sur un fond aux couleurs de sa maison — vert laitier / terre du grain. */
.hero__duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.7rem,1.6vw,1.1rem);
  width:min(100%,620px);
}
.hero__duo__card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  /* hauteur définie (et non min-height) : les cartes gardent le même
     gabarit, et le produit peut se caler en hauteur:100% à l'intérieur. */
  height:clamp(300px,54vh,470px);
  padding:clamp(.9rem,2vw,1.2rem);
  border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.72);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.hero__duo__card--milk{
  background:
    radial-gradient(72% 46% at 50% 28%,rgba(255,246,232,.24),transparent 66%),
    linear-gradient(170deg,rgba(23,160,95,.5),rgba(5,40,27,.9));
}
.hero__duo__card--grain{
  background:
    radial-gradient(72% 46% at 50% 28%,rgba(255,238,206,.26),transparent 66%),
    linear-gradient(170deg,rgba(199,91,57,.48),rgba(52,30,12,.92));
}
/* voile bas : garde le texte lisible quel que soit le produit posé dessus */
.hero__duo__card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(180deg,transparent,rgba(4,20,13,.72));pointer-events:none;
}
.hero__duo__card:hover,.hero__duo__card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(245,185,42,.6);
  box-shadow:0 44px 76px -30px rgba(0,0,0,.8);
}
/* le produit occupe la place restante : aucun risque de chevauchement
   avec le libellé, quelle que soit la hauteur de la carte. */
.hero__duo__art{
  position:relative;z-index:1;flex:1 1 auto;min-height:0;
}
/* Deux formats par gamme : le contenant courant posé à gauche, le format
   familial devant à droite. Les deux reposent sur la même ligne de sol
   (bottom:0) et se chevauchent un peu — c'est ce qui les lit comme un duo
   plutôt que comme deux vignettes. Les hauteurs sont réglées par carte :
   une bouteille fine et un sachet large n'occupent pas la même largeur. */
/* Chaque produit reçoit une case (largeur et hauteur en %) et « contain »
   l'y inscrit sans le déformer — une hauteur imposée avec un max-width
   écrasait la photo, et le seau y perdait sa rondeur. « bottom » les pose
   sur la même ligne de sol ; les cases se recouvrent un peu, ce qui les
   lit comme un duo. Réglage par carte : une bouteille fine et un sachet
   large n'ont pas besoin de la même case. */
.hero__duo .hero__duo__art img{
  position:absolute;bottom:0;object-fit:contain;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.5));
  transition:transform .6s var(--ease);
}
/* Chaque produit occupe toute la largeur de la case et n'est cadré que par
   sa hauteur : c'est la seule façon d'obtenir une échelle stable. Avec une
   case en largeur ET en hauteur, c'est tantôt l'une tantôt l'autre qui
   contraint selon le format de l'écran, et les tailles relatives dérivent
   — la bouteille finissait par dépasser les pots sur les écrans larges.
   Le placement horizontal se fait au pourcentage d'« object-position ». */
.hero__duo .hero__duo__art img:first-child{
  left:0;width:100%;height:var(--h-avant,66%);
  object-position:var(--x-avant,0%) bottom;
}
.hero__duo .hero__duo__art img:last-child{
  left:0;width:100%;height:var(--h-arriere,62%);z-index:1;
  object-position:var(--x-arriere,100%) bottom;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));
}
/* Échelle commune aux deux cartes : les cases ont la même taille de part
   et d'autre, donc les hauteurs réglées ici se comparent directement d'un
   produit à l'autre. Le rapport respecte les contenances — le pot 5 céréales
   domine, le seau 500 g et la bouteille 250 ml arrivent à égalité de hauteur
   (le seau étant bien plus large, il reste visiblement le plus gros), et non
   l'inverse comme avant où la bouteille écrasait tous les pots. */
/* Hauteurs en % de la case, identique des deux côtés : elles se comparent
   donc directement d'un produit à l'autre. L'ordre suit les contenances —
   le pot 5 céréales (jusqu'à 900 g) domine, puis le seau 500 g, et la
   bouteille 250 ml reste en dessous des deux pots. */
.hero__duo__card--milk .hero__duo__art{--h-avant:60%;--x-avant:0%;--h-arriere:57%;--x-arriere:100%;}
.hero__duo__card--grain .hero__duo__art{--h-avant:65%;--x-avant:0%;--h-arriere:55%;--x-arriere:100%;}
.hero__duo__card:hover .hero__duo__art img:first-child{transform:translateY(-7px) scale(1.03);}
.hero__duo__card:hover .hero__duo__art img:last-child{transform:translateY(-4px) scale(1.05);}
.hero__duo__body{position:relative;z-index:1;display:flex;flex-direction:column;}
.hero__duo__kicker{
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero__duo__name{
  font-family:var(--font-display);font-weight:800;line-height:1.05;color:#fff;
  font-size:clamp(1.15rem,1rem + .7vw,1.45rem);margin-top:.28rem;
}
.hero__duo__name--script{
  font-family:var(--font-script);font-weight:400;color:var(--gold-400);
  font-size:clamp(1.7rem,1.4rem + 1.1vw,2.15rem);line-height:.9;margin-top:.1rem;
}
.hero__duo__desc{font-size:.79rem;color:rgba(255,255,255,.8);margin-top:.2rem;}
.hero__duo__go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;
  font-size:.78rem;font-weight:800;color:var(--gold-400);
}
/* sélecteur volontairement appuyé : il doit passer devant la règle
   « .hero__visual svg » des points de rupture, qui étire les icônes. */
.hero__duo .hero__duo__go svg{width:16px;height:16px;flex:none;transition:transform .4s var(--ease);}
.hero__duo__card:hover .hero__duo__go svg{transform:translateX(4px);}

@keyframes kenburns{
  from{transform:scale(1.005);}
  to{transform:scale(1.055);}
}

/* Contrôles */
.hero__controls{
  position:absolute;left:0;right:0;bottom:clamp(1.25rem,3vw,2.25rem);z-index:5;
}
.hero__controls-inner{
  width:min(100% - (var(--gutter) * 2),var(--container));margin-inline:auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
/* Les flèches du carrousel ne doivent jamais passer sous les boutons flottants. */
@media (min-width:900px){
  .hero__controls-inner{padding-right:4.75rem;}
}
.hero__dots{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;flex:1 1 auto;}
.hero__dot{
  /* le filet ne fait que 4 px, mais le bouton en fait 24 pour rester attrapable au doigt */
  position:relative;height:24px;width:clamp(34px,8vw,74px);border:0;padding:0;cursor:pointer;
  background:none;border-radius:100px;
}
.hero__dot::before{
  content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:4px;
  background:rgba(255,255,255,.28);border-radius:100px;
}
.hero__dot::after{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:0;height:4px;
  background:var(--gold-400);border-radius:100px;
}
.hero__dot[aria-selected="true"]::after{width:100%;}
.hero__dot.is-reset::after{width:0;transition:none;}
.hero__dot.is-timing::after{width:100%;transition:width var(--hero-delay,7s) linear;}
.hero__arrows{display:flex;gap:.5rem;}
.hero__arrow{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);
  color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);
  transition:background .2s,transform .2s;
}
.hero__arrow:hover{background:rgba(255,255,255,.24);transform:scale(1.06);}
.hero__scroll{
  position:absolute;bottom:calc(clamp(1.25rem,3vw,2.25rem) + 4.5rem);left:50%;translate:-50% 0;z-index:4;
  display:none;color:rgba(255,255,255,.6);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;align-items:center;flex-direction:column;gap:.4rem;
}
.hero__scroll::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);}
@media (max-height:820px){.hero__scroll{display:none!important;}}

/* ---------- 9. Bandeau défilant ---------- */
.marquee{
  background:var(--green-900);color:rgba(255,255,255,.9);
  padding-block:.9rem;overflow:hidden;position:relative;
  border-block:1px solid rgba(255,255,255,.08);
}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}
.marquee__item{
  display:inline-flex;align-items:center;gap:.7rem;padding-inline:1.5rem;
  font-family:var(--font-display);font-size:clamp(.95rem,.9rem + .3vw,1.15rem);font-weight:600;white-space:nowrap;
}
.marquee__item::after{content:"◆";color:var(--gold-400);font-size:.6em;margin-left:1.5rem;}

/* ---------- 10. Piliers / avantages ---------- */
.pillars{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pillar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,1.9rem);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(14,107,69,.25);}
.pillar__icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--green-050);color:var(--green-700);margin-bottom:1rem;
}
.pillar h3{font-size:1.15rem;margin-bottom:.35em;}
.pillar p{margin:0;font-size:.95rem;color:var(--muted);}

/* ---------- 11. Marques ---------- */
.brands{grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2rem);}
.brand-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,3rem);color:#fff;isolation:isolate;
  display:flex;flex-direction:column;min-height:340px;
}
.brand-card::before{content:"";position:absolute;inset:0;z-index:-2;}
.brand-card--yaourt::before{background:linear-gradient(150deg,#1B3FA0,#152F7A 55%,#0E1F52);}
.brand-card--cereale::before{background:linear-gradient(150deg,#B8791A,#8A5312 55%,#5B3410);}
.brand-card::after{
  content:"";position:absolute;right:-15%;top:-25%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%);z-index:-1;
}
.brand-card__tag{
  align-self:flex-start;padding:.35rem .85rem;border-radius:100px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;
}
.brand-card h3{color:#fff;font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);margin-bottom:.25em;}
.brand-card .script{font-family:var(--font-script);font-weight:400;color:var(--gold-400);font-size:1.15em;}
.brand-card p{color:rgba(255,255,255,.82);max-width:min(44ch,84%);}
.brand-card__list{list-style:none;padding:0;margin:.5rem 0 1.5rem;display:flex;flex-wrap:wrap;gap:.45rem;max-width:min(100%,78%);}
.brand-card__list li{
  padding:.32rem .75rem;border-radius:100px;background:rgba(255,255,255,.12);
  font-size:.8rem;font-weight:600;
}
.brand-card .btn{margin-top:auto;align-self:flex-start;}
.brand-card__art{
  position:absolute;right:clamp(-40px,-2vw,0px);bottom:0;width:clamp(140px,26%,230px);
  opacity:.95;pointer-events:none;z-index:-1;
}

/* Le pot 5 céréales est la meilleure vente de la maison, et le seul produit
   distribué en pharmacie : il est montré plus grand, opaque, avec sa pastille
   — le texte de la carte est resserré d'autant pour ne pas passer dessous. */
/* À cette taille (dimensions × 1,6 par rapport au premier réglage), le pot
   ne tient plus en incrustation à côté du texte : même la carte la plus
   large de la mise en page à deux colonnes (~590 px) ne laisse quasiment
   aucune place pour les puces. Il repasse donc dans le flux, sous le
   bouton, à toutes les largeurs plutôt qu'en aplat sur le coin de la
   carte — cohérent avec ce qu'on faisait déjà sous 640 px. */
.brand-card__art--vedette{
  position:static;width:min(89.6%,352px);margin:1.75rem auto 0;opacity:1;
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.45));
}
/* dans le flux, sous le nom de marque : en absolu au coin haut droit,
   la pastille recouvrait l'étiquette « BDAM · céréales & farines ». */
.brand-card__vedette{
  align-self:flex-start;margin:0 0 .9rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .85rem;border-radius:100px;
  background:var(--gold-400);color:var(--green-900);
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
}
.brand-card__list li.est-vedette{background:var(--gold-400);color:var(--green-900);font-weight:800;}

/* ---------- 12. Produits ---------- */
.products{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(1rem,2.4vw,1.75rem);}
.product{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.product:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
.product__media{
  position:relative;aspect-ratio:4/3.4;display:grid;place-items:center;padding:1.25rem;
  background:var(--tint,linear-gradient(160deg,#F3EFE6,#E9E2D4));
  overflow:hidden;
}
.product__media::after{
  content:"";position:absolute;inset:auto -20% -55% -20%;height:70%;border-radius:50%;
  background:rgba(255,255,255,.4);filter:blur(6px);
}
.product__media img{
  position:relative;z-index:1;height:100%;width:auto;max-height:230px;object-fit:contain;
  transition:transform .45s var(--ease);
  filter:drop-shadow(0 18px 22px rgba(27,23,16,.22));
}
.product:hover .product__media img{transform:translateY(-6px) scale(1.04);}
.product__badge{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  padding:.28rem .7rem;border-radius:100px;background:rgba(255,255,255,.92);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-800);
  box-shadow:var(--shadow-sm);
}
.product__body{padding:1.25rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1;}
.product__brand{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-500);}
.product h3{font-size:1.18rem;margin:.35rem 0 .4rem;}
.product p{font-size:.9rem;color:var(--muted);margin-bottom:1rem;}
.product__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.product__size{
  font-size:.78rem;font-weight:800;color:var(--green-800);
  background:var(--green-050);padding:.3rem .65rem;border-radius:100px;
}

.product__price{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--green-800);
  white-space:nowrap;
}
.product__price:only-child{margin-left:auto;}
.product__provisoire{
  font-size:.78rem;color:var(--muted);font-style:italic;margin:-.35rem 0 .9rem;
}
/* Poids multiples, prix multiples : un produit comme le pot 5 céréales se
   vend en 400/500/900 g à des prix différents. Le pied de fiche passe en
   colonne pour laisser la place aux pastilles ; cliquer sur un poids met
   à jour le prix et la taille affichés juste au-dessus. */
.product__foot--poids{flex-direction:column;align-items:stretch;gap:.55rem;}
.product__foot-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.product__foot--poids .product__price{font-size:1.1rem;}
.product__weights{display:flex;flex-wrap:wrap;gap:.4rem;}
.product__weight{
  padding:.3rem .7rem;border-radius:100px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink-2);font-size:.78rem;font-weight:700;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.product__weight:hover{border-color:var(--green-600);}
.product__weight.is-active{background:var(--green-800);border-color:var(--green-800);color:#fff;}
/* Conseils de conservation, en liste à puces cochées */
.conseils{
  list-style:none;padding:0;margin:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.conseils li{
  position:relative;padding-left:2rem;color:var(--ink-2);font-size:.97rem;
}
.conseils li::before{
  content:"";position:absolute;left:0;top:.3em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--green-050);
}
.conseils li::after{
  content:"";position:absolute;left:.31rem;top:.52em;width:.52rem;height:.28rem;
  border-left:2px solid var(--green-700);border-bottom:2px solid var(--green-700);
  transform:rotate(-45deg);
}

/* ---------- 13. Savoir-faire (étapes) ---------- */
.steps{counter-reset:step;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.step{position:relative;padding-top:1.5rem;}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-display);font-size:2.6rem;font-weight:700;
  color:var(--gold-400);opacity:.9;line-height:1;display:block;margin-bottom:.6rem;
}
.step::after{
  content:"";position:absolute;top:.35rem;left:0;right:0;height:1px;background:var(--line-strong);
}
.section--dark .step::after{background:rgba(255,255,255,.18);}
.step h3{font-size:1.1rem;margin-bottom:.4em;}
.step p{font-size:.92rem;margin:0;color:var(--muted);}
.section--dark .step p{color:rgba(255,255,255,.7);}

/* ---------- 14. Chiffres ---------- */
.stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center;}
.stat__num{
  font-family:var(--font-display);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.4rem);
  font-weight:700;color:var(--gold-400);line-height:1;display:block;
}
.stat__label{font-size:.88rem;color:rgba(255,255,255,.72);margin-top:.5rem;display:block;}

/* ---------- 15. Split (à propos) ---------- */
.split{display:grid;gap:clamp(1.75rem,5vw,4rem);align-items:center;grid-template-columns:1fr;}
.split__art{
  position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--sand);box-shadow:var(--shadow-lg);
}
.split__art img{display:block;width:100%;height:auto;}
.split__badge{
  position:absolute;bottom:clamp(-14px,-1vw,0px);left:clamp(1rem,4vw,2rem);
  background:var(--paper);border-radius:var(--radius);padding:1rem 1.25rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.85rem;max-width:78%;
}
.split__badge strong{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--ink);}
.split__badge span{font-size:.82rem;color:var(--muted);}
.values{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem;}
.values li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem;}
.values svg{flex:0 0 auto;margin-top:.15rem;color:var(--green-600);}

/* ---------- 16. Témoignages ---------- */
.quotes{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.quote{
  background:var(--paper);border-radius:var(--radius);padding:clamp(1.4rem,3vw,1.9rem);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;
}
.quote::before{
  content:"“";position:absolute;top:-.15em;right:.5rem;
  font-family:var(--font-display);font-size:5rem;color:var(--gold-400);opacity:.35;line-height:1;
}
.quote p{font-size:.98rem;font-style:italic;color:var(--ink-2);}
.quote__who{display:flex;align-items:center;gap:.75rem;margin-top:1rem;}
.quote__avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-800);color:var(--gold-400);font-weight:800;font-family:var(--font-display);
}
.quote__who strong{display:block;font-size:.92rem;color:var(--ink);}
.quote__who span{font-size:.8rem;color:var(--muted);}

/* ---------- 17. FAQ ---------- */
.faq{max-width:800px;margin-inline:auto;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem .25rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);font-weight:700;color:var(--ink);
}
.faq__q i{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green-050);
  display:grid;place-items:center;font-style:normal;color:var(--green-700);
  transition:transform .3s var(--ease),background .3s;
}
.faq__q[aria-expanded="true"] i{transform:rotate(45deg);background:var(--gold-400);color:var(--green-900);}
.faq__a{overflow:hidden;height:0;transition:height .35s var(--ease);}
.faq__a > div{padding:0 .25rem 1.35rem;color:var(--muted);font-size:.96rem;}

/* ---------- 18. Contact ---------- */
.contact-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;align-items:start;}
.contact-cards{display:grid;gap:1rem;}
.contact-card{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
a.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.contact-card__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--green-050);color:var(--green-700);
}
.contact-card strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin-bottom:.15rem;}
.contact-card strong + span{font-size:.9rem;color:var(--muted);display:block;}
/* ---------- Bandeau vidéo ---------- */
.film{overflow:hidden;}
.film::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 78% 45%,rgba(232,163,23,.16),transparent 70%);
}
.film .container{position:relative;z-index:1;}
.film__grid{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:center;}
.film__texte .lead{margin-bottom:1.5rem;}
.film__list{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.75rem;}
.film__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;}
.film__list svg{flex:0 0 auto;margin-top:.22rem;color:var(--gold-400);}
.film__figure{margin:0;}
.film__frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:#0b0906;border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.04) inset;
}
.film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.film__controls{position:absolute;right:.85rem;bottom:.85rem;z-index:2;display:flex;gap:.5rem;}
.film__btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.4);background:rgba(6,64,43,.5);color:#fff;
  backdrop-filter:blur(8px);cursor:pointer;
  transition:background .2s,transform .2s var(--ease);
}
.film__btn:hover{background:rgba(6,64,43,.85);transform:translateY(-2px);}
.film__btn svg{display:block;}
.film__legende{
  margin-top:.9rem;font-size:.85rem;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:.55rem;
}
.film__legende::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--gold-400);flex:0 0 auto;}
.film__legende .script{font-family:var(--font-script);font-size:1.15em;color:var(--gold-400);}
@media (min-width:900px){
  .film__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
}
@media (max-width:520px){
  .film__btn{width:40px;height:40px;}
}

.callout-order{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.25rem);box-shadow:var(--shadow);
}
.callout-order h3{margin-top:0;font-size:clamp(1.15rem,1.05rem+.5vw,1.4rem);}
.callout-order ol{margin:0 0 1.25rem;padding-left:1.3em;display:grid;gap:.7rem;}
.callout-order li{font-size:.96rem;}
.callout-order li::marker{color:var(--gold-500);font-weight:800;}
.callout-order__note{
  font-size:.9rem;color:var(--muted);background:var(--green-050);
  padding:.85rem 1rem;border-radius:var(--radius-xs);margin-bottom:1.25rem;
}
.callout-order .btn svg{flex:0 0 auto;}

.form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.25rem);box-shadow:var(--shadow);
}
.form__row{display:grid;gap:1rem;grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.field label{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.02em;}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;padding:.8rem .95rem;border-radius:var(--radius-xs);
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 4px rgba(23,160,95,.14);
}
.form__note{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;}
.form__status{
  margin-top:1rem;padding:.85rem 1rem;border-radius:var(--radius-xs);
  background:var(--green-050);color:var(--green-800);font-size:.9rem;font-weight:600;display:none;
}
.form__status.is-visible{display:block;}

/* Visible tant que la carte n’est pas chargée (réseau coupé, iframe bloquée). */

/* ---------- 19. CTA ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:clamp(2rem,5vw,4rem);text-align:center;color:#fff;isolation:isolate;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(70% 90% at 15% 15%,rgba(245,185,42,.4),transparent 60%),
    radial-gradient(70% 90% at 88% 88%,rgba(199,91,57,.42),transparent 60%),
    linear-gradient(140deg,#0E6B45,#06402B);
}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto;}
.cta p{color:rgba(255,255,255,.82);max-width:56ch;margin-inline:auto;}
.cta .btn-row{justify-content:center;margin-top:1.75rem;}
.cta__phones{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.75rem;
  font-family:var(--font-display);font-size:clamp(1.25rem,1rem + 1.2vw,1.9rem);font-weight:700;
}
.cta__phones a{color:var(--gold-400);text-decoration:none;}
.cta__phones a:hover{text-decoration:underline;}

/* ---------- 20. Footer ---------- */
.footer{background:#06180F;color:rgba(255,255,255,.66);padding-block:clamp(2.75rem,6vw,4.5rem) 0;font-size:.92rem;}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;}
.footer a:hover{color:var(--gold-400);}
.footer__grid{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr;}
.footer__brand img{width:180px;margin-bottom:1rem;}
.footer h4{
  font-family:var(--font-body);font-size:.76rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 1rem;
}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem;}
.footer ul a{display:inline-block;padding-block:.3rem;}
.footer__social{display:flex;gap:.6rem;margin-top:1.25rem;}
.footer__social a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:background .25s,transform .25s;
}
.footer__social a:hover{background:var(--gold-400);color:var(--green-900);transform:translateY(-3px);}
.footer__bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-block:1.4rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;justify-content:space-between;font-size:.84rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;}

/* ---------- 21. Utilitaires ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Boutons flottants : même colonne, même diamètre, donc même axe vertical.
   Le bouton « haut de page » garde sa place quand il est masqué : WhatsApp ne bouge jamais. */
.floating-actions{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
}
.floating-actions > *{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:var(--shadow);border:0;cursor:pointer;
}
.to-top{
  background:var(--green-800);color:#fff;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;}
.wa-float{background:#1FA855;color:#fff;transition:transform .25s var(--ease);}
.wa-float:hover,.to-top.is-visible:hover{transform:scale(1.08);}

/* ---------- 22. Pages légales ---------- */
.page-hero{
  background:linear-gradient(150deg,#0B4E36,#06402B);color:#fff;
  padding-block:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)) clamp(2.5rem,6vw,4.5rem);
  position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;right:-8%;top:-40%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(245,185,42,.3),transparent 65%);
}
.page-hero h1{color:#fff;margin-bottom:.25em;font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem);}
.page-hero h1 .script{font-family:var(--font-script);font-weight:400;color:var(--gold-400);font-size:1.18em;line-height:.9;display:inline-block;padding-right:.08em;}
.page-hero p{color:rgba(255,255,255,.78);max-width:58ch;margin:0;}
.breadcrumb{
  display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:1rem;
}
.breadcrumb a{color:rgba(255,255,255,.78);text-decoration:none;}
.legal{
  max-width:76ch;margin-inline:auto;
}
.legal h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--line);}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0;}
.legal h3{font-size:1.1rem;margin-top:1.75rem;}
.legal ul{display:grid;gap:.5rem;margin-bottom:1.25rem;}
.legal__toc{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem 1.5rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm);
}
.legal__toc h2{font-family:var(--font-body);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85rem;padding:0;border:0;}
.legal__toc ol{margin:0;padding-left:1.1em;display:grid;gap:.4rem;font-size:.94rem;}
.legal__meta{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);
  background:var(--green-050);padding:.45rem .9rem;border-radius:100px;margin-bottom:2rem;
}
.legal .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.5rem;}
.legal .table-wrap table{margin-bottom:0;}
.legal table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.92rem;}
.legal th,.legal td{text-align:left;padding:.7rem .85rem;border:1px solid var(--line);vertical-align:top;}
.legal th{background:var(--green-050);font-weight:700;color:var(--green-900);}
@media (max-width:560px){
  .legal table{font-size:.85rem;}
  .legal th,.legal td{padding:.55rem .6rem;}
}
.legal .callout{
  background:var(--gold-100);border-left:4px solid var(--gold-500);
  padding:1rem 1.25rem;border-radius:0 var(--radius-xs) var(--radius-xs) 0;margin-bottom:1.5rem;
}
.legal .callout p:last-child{margin:0;}
.legal mark{background:var(--gold-100);color:var(--terra-600);padding:.12em .45em;border-radius:6px;font-weight:700;font-size:.94em;}
.legal p,.legal li{max-width:74ch;}
.sitemap{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.sitemap ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;}
.sitemap a{text-decoration:none;font-weight:600;}
.sitemap a:hover{text-decoration:underline;}

/* ---------- 23. Responsive ---------- */
@media (min-width:640px){
  .form__row{grid-template-columns:1fr 1fr;}
  .contact-cards{grid-template-columns:1fr 1fr;}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr;}
  .hero__scroll{display:flex;}
  .brands{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr 1fr;}
  .split--reverse .split__art{order:2;}
  .contact-grid{grid-template-columns:.95fr 1.05fr;}
  .contact-cards{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;}
}
/* Six entrées de menu : la barre ne tient plus sous 1024 px, on passe au burger. */
@media (max-width:1023px){
  .nav,.header__cta{display:none;}
  .burger{display:flex;}
}
@media (max-width:899px){
  .hero__slide{padding-block:calc(var(--header-h) + .5rem) 6rem;}
  .hero__visual{order:-1;}
  /* on resserre le bandeau pour que le bouton d'appel entre dans le premier écran */
  .hero__grid{gap:1.15rem;}
  .hero h1{margin-bottom:.3em;}
  .hero__meta{margin-top:.9rem;}
  .hero .btn-row{margin-top:1.15rem;}
  /* on garde les boutons d'appel hors de portée des pastilles flottantes */
  .hero .btn-row{padding-right:4.5rem;}
  .hero__visual svg{width:min(76%,320px);}
  .hero__copy{text-align:left;}
}
@media (max-width:520px){
  .hero__duo{gap:.6rem;}
  .hero__duo__card{height:clamp(240px,38vh,320px);padding:.8rem;}
  .hero__duo__desc{display:none;}
  .hero__duo__go{margin-top:.5rem;font-size:.72rem;white-space:nowrap;}
  .hero__visual svg{width:min(66%,240px);}
  .hero__arrows{display:none;}
  .products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .product__media{aspect-ratio:4/4;}
  .product__body{padding:1rem 1rem 1.15rem;}
  .product h3{font-size:1.02rem;}
  /* une carte de 160 px ne tient pas "500 g" et "1 600 F CFA" sur la même
     ligne : le prix repasse dessous plutôt que de déborder de la carte. */
  .product__foot-row{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .reveal{opacity:1;transform:none;}
  .marquee__track{animation:none;}
}
@media print{
  .header,.drawer,.hero,.to-top,.wa-float,.footer__social,.marquee{display:none!important;}
  body{background:#fff;color:#000;}
}