/* ============================================================
   MAIN FORTE — site de présentation
   Site-level styles: layout, dynamic titling, motion utilities.
   Tokens come from ../../styles.css.
   ============================================================ */

/* ---- MAINS FORTES : palette officielle (surcharge des tokens DS) ----
   Vert vif AGRICA #00a940 + deux jaunes (soleil #ffbe00 / miel #f5a800,
   encre dorée pour les textes) + jaune citron ochre, sur papier crème. */
:root{
  --green-900:#16301f; --green-800:#1d3f28; --green-700:#25523a; --green-600:#0d7b3c;
  --green-500:#00a940; --green-400:#46bd6d; --green-300:#93d3a8; --green-200:#c2e6ce;
  --green-100:#e0f2e5; --green-050:#eff9f2;
  --clay-700:#ffbe00; --clay-500:#f5a800; --clay-300:#ffdd7d; --clay-100:#fff3d0;
  --clay-ink:#9c6600;
  --ochre-500:#f5c400; --ochre-300:#ffe27a; --ochre-100:#fdf3c4;
  --blue-700:#2f6ba8; --blue-500:#4b92d5; --blue-300:#a6cbee; --blue-100:#dbeaf8; --blue-050:#eef5fc;
  --blush:#fdf2d8; --blush-deep:#f6e2ab;
  --mint:#dcecdf; --pink-pale:#fff3d0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:var(--body-base);color:var(--ink);background:var(--paper);
  background-image:var(--texture-paper);background-size:var(--texture-paper-size);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

.container{width:min(1160px,92vw);margin:0 auto}
.section{position:relative;padding:clamp(64px,10vw,140px) 0}

/* ---------- Kicker ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:clamp(11px,1.1vw,13px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-600)}
.kicker::before{content:"";width:26px;height:2px;background:var(--clay-500);border-radius:2px}
.kicker.on-dark{color:var(--green-100)}
.kicker.on-dark::before{background:var(--ochre-300)}

/* ---------- Dynamic titling ----------
   Big Archivo uppercase, tight, mixed with a handwritten Caveat accent
   and a hand-drawn ochre underline — the "more dynamic" title treatment. */
.display{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.92;letter-spacing:-.02em;color:var(--green-700);margin:0;
  font-size:clamp(2.6rem,7vw,6rem);text-wrap:balance}
.display .lite{font-weight:500;color:var(--green-500)}
.title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.98;letter-spacing:-.015em;color:var(--green-700);margin:0;
  font-size:clamp(2rem,4.4vw,3.4rem);text-wrap:balance}
.title.on-dark{color:var(--paper-warm)}
/* Handwritten accent word */
.script{font-family:var(--font-hand);font-weight:700;text-transform:none;letter-spacing:0;
  color:var(--clay-ink);line-height:.8;display:inline-block}
.script.sage{color:var(--green-500)}
.script.ochre{color:var(--ochre-500)}
.script.cream{color:var(--paper-warm)}
/* Hand-drawn underline under a word */
.mark{position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.02em;height:.34em;
  background:var(--clay-300);border-radius:50%;z-index:-1;opacity:.85;
  transform:rotate(-1deg) scaleX(var(--mark,1));transform-origin:left center;
  transition:transform .7s var(--ease-out)}
.mark.reveal-mark::after{--mark:0}
.mark.reveal-mark.is-in::after{--mark:1}

.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink);max-width:52ch}
.muted{color:var(--ink-soft)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background var(--dur-base),
  box-shadow var(--dur-base),padding var(--dur-base)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  width:min(1160px,92vw);margin:0 auto;padding:18px 0}
.nav.solid{background:rgba(246,240,228,.86);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line-soft)}
.nav.solid .nav-inner{padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-display);font-weight:800;letter-spacing:1px;font-size:1.35rem;
  color:var(--green-700);text-transform:uppercase}
.brand .fl{color:var(--clay-500)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;color:var(--green-700);font-weight:600;font-size:.95rem;
  position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--clay-500);transition:right var(--dur-base) var(--ease-out)}
.nav-links a:hover::after{right:0}
.nav-links a.btn-accent,.nav-links a.btn-accent:hover{color:var(--green-900)}
.nav-links a.btn-accent::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--green-700);border-radius:2px;transition:.25s}

/* ---------- Buttons (site-local, mirrors DS Button) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-weight:700;font-size:1rem;line-height:1;padding:14px 26px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),background var(--dur-fast)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green-500);color:var(--green-900);border-color:var(--green-500);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#00c14a;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.btn-accent{background:var(--clay-700);color:var(--green-900);border-color:var(--clay-700);box-shadow:var(--shadow-sm)}
.btn-accent:hover{background:#ffd233;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--green-700);border-color:var(--green-700)}
.btn-ghost:hover{background:var(--green-700);color:var(--paper-warm)}
.btn .arrow{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Motion utilities ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.40s}
.parallax{will-change:transform}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .parallax{transform:none!important}
  .float{animation:none!important}
}

/* Gentle float loop for decorative shapes */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
.float{animation:floaty 7s ease-in-out infinite}

/* Decorative tinted brand shape */
.blob{position:absolute;pointer-events:none;background-repeat:no-repeat;
  background-position:center;background-size:contain;z-index:0}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:96px;overflow:hidden;
  background:radial-gradient(125% 92% at 78% 2%,var(--mint) 0%,var(--paper) 58%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero-eyebrow{font-family:var(--font-display);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;font-size:.8rem;color:var(--green-600)}
.hero h1{margin:14px 0 0}
.hero-sub{margin:22px 0 30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-visual{position:relative}
.hero-book{width:100%;max-width:420px;margin:0 auto;border-radius:4px 10px 10px 4px;
  box-shadow:0 26px 48px -18px rgba(22,48,31,.45),0 4px 12px rgba(22,48,31,.12);
  display:block;transform:rotate(1.5deg)}
.hero-badge{position:absolute;background:var(--green-500);color:var(--paper-warm);
  border-radius:var(--radius-pill);padding:10px 18px;font-family:var(--font-hand);
  font-size:1.35rem;box-shadow:var(--shadow-md);z-index:3}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--green-600);
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue .dotwrap{width:22px;height:34px;border:2px solid var(--green-500);border-radius:12px;position:relative}
.scroll-cue .dotwrap i{position:absolute;left:50%;top:6px;width:4px;height:6px;border-radius:2px;
  background:var(--green-500);transform:translateX(-50%);animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0;top:6px}40%{opacity:1}80%{opacity:0;top:16px}100%{opacity:0}}

/* ---------- Stat / Constat ---------- */
.constat{background:var(--green-700);color:var(--paper-warm);position:relative;overflow:hidden}
.constat .lead{color:var(--green-100)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.stat{position:relative}
.stat-num{font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(2.6rem,5vw,4rem);color:var(--ochre-300)}
.stat-num .u{font-size:.5em;color:var(--paper-warm);margin-left:2px}
.stat-label{margin-top:10px;color:var(--green-100);font-size:.98rem;line-height:1.4}
.reality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px;max-width:760px}
.reality{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:16px 18px}
.reality .rmark{font-family:var(--font-hand);font-size:1.6rem;color:var(--ochre-300);line-height:1}
.reality b{display:block;color:var(--paper-warm);font-family:var(--font-sans);font-size:1.02rem}

/* ---------- Parti pris (pillars) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.pillar{background:var(--paper-warm);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:28px 26px;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);position:relative;overflow:hidden}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.pillar .idx{font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--clay-ink)}
.pillar h3{margin:14px 0 8px;font-size:1.5rem}
.pillar p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.pillar .glow{position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:var(--green-100);opacity:0;transition:opacity var(--dur-base)}
.pillar:hover .glow{opacity:1}

/* ---------- Aperçu (gallery) ---------- */
.apercu{background:var(--blush)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:52px;align-items:center}
.g-photo{border-radius:6px;background:#fff;padding:10px 10px 14px;box-shadow:var(--shadow-photo)}
.g-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.g-cap{font-family:var(--font-hand);font-size:1.3rem;color:var(--green-700);text-align:center;margin-top:6px}
.g-a{grid-column:span 5;transform:rotate(-1.8deg)}
.g-b{grid-column:span 4;transform:rotate(1.6deg)}
.g-c{grid-column:span 3}
.feature-list{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature .ficon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--green-100);
  display:flex;align-items:center;justify-content:center;color:var(--green-600);font-size:20px}
.feature b{display:block;color:var(--green-700);font-size:1.05rem;margin-bottom:2px}
.feature span{color:var(--ink-soft);font-size:.94rem;line-height:1.5}

/* ---------- Carnet concept ---------- */
.carnet{position:relative;overflow:hidden}
.carnet-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.carnet-note{background:var(--paper-warm);border-radius:var(--radius-lg);padding:34px 34px;
  box-shadow:var(--shadow-md);position:relative;
  background-image:repeating-linear-gradient(var(--paper-warm) 0 33px,var(--line-soft) 33px 34px);
  line-height:34px}
.carnet-note .qh{font-family:var(--font-hand);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--green-700);line-height:1.15;margin:0}
.carnet-illo{width:min(360px,80%);display:block;margin:0 auto}

/* ---------- Témoignages ---------- */
.temoi-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}

/* ---------- CTA ---------- */
.cta{background:var(--green-500);color:var(--paper-warm);text-align:center;position:relative;overflow:hidden}
.cta .title{color:var(--paper-warm)}
.cta .lead{color:var(--green-100);margin:18px auto 30px;text-align:center}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta .btn-ghost{color:var(--paper-warm);border-color:var(--paper-warm)}
.cta .btn-ghost:hover{background:var(--paper-warm);color:var(--green-700)}

/* ---------- Footer ---------- */
.footer{background:var(--green-900);color:var(--green-200);padding:56px 0 34px}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.footer .brand{color:var(--paper-warm)}
.footer a{color:var(--green-200);text-decoration:none;display:block;margin:8px 0;font-size:.95rem}
.footer a:hover{color:var(--paper-warm)}
.footer-cols{display:flex;gap:60px;flex-wrap:wrap}
.footer h4{color:var(--paper-warm);font-family:var(--font-display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--green-300)}

/* ============================================================
   Responsive
   ============================================================ */
/* ---------- Motion : compléments ---------- */
#mfProgress{position:fixed;left:0;top:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--green-500),var(--clay-500));transition:width .1s linear}
[data-reveal="pop"]{transform:scale(.55) translateY(22px)}
[data-reveal="pop"].is-in{transform:none;transition:opacity .45s var(--ease-out),
  transform .68s cubic-bezier(.18,1.5,.42,1)}
[data-reveal="word"]{transform:translateY(.55em) rotate(1.5deg);
  transition:opacity .55s var(--ease-out),transform .62s cubic-bezier(.2,.9,.25,1)}
[data-reveal="line"]{transform:translateX(-22px)}
@media (prefers-reduced-motion:reduce){#mfProgress{display:none}}

/* Bandeau défilant */
.marquee{overflow:hidden;background:var(--green-500);color:var(--green-900);
  border-top:2px solid var(--green-600);border-bottom:2px solid var(--green-600)}
.marquee-track{display:flex;width:max-content;animation:mfmarq 34s linear infinite}
.marquee span{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(.82rem,1.5vw,1.05rem);padding:14px 0;white-space:nowrap}
.marquee i{display:inline-block;padding:0 22px;font-style:normal;color:var(--paper-warm)}
@keyframes mfmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Sommaire interactif ---------- */
.som-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4vw,64px);
  margin-top:52px;align-items:start}
.stickers{display:flex;flex-wrap:wrap;gap:26px 20px;justify-content:center}
.stk{position:relative;background:none;border:0;padding:0;cursor:pointer;line-height:0;
  transition:transform .35s var(--ease-out),filter .35s var(--ease-out)}
.stk img{height:clamp(88px,10vw,124px);width:auto;display:block;
  filter:drop-shadow(0 8px 16px rgba(22,48,31,.22))}
.stk .tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,6px);
  background:var(--green-800);color:var(--paper-warm);font-family:var(--font-annotate);
  font-size:.8rem;padding:5px 11px;border-radius:999px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:.25s var(--ease-out);z-index:5}
.stk:hover,.stk:focus-visible{transform:translateY(-9px) scale(1.06) rotate(0deg);outline:none}
.stk:hover .tip,.stk:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.stickers:hover .stk:not(:hover){opacity:.4}
.stickers:hover .stk:not(:hover) img{filter:grayscale(.8) drop-shadow(0 4px 8px rgba(22,48,31,.14))}
.som-fam{border-radius:var(--radius-lg);padding:18px 20px 14px;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),background .4s}
.som-fam h3{margin:0 0 10px;display:inline-block;font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;font-size:clamp(.82rem,1.3vw,.95rem);letter-spacing:.06em;
  padding:7px 18px;border-radius:999px;border:2px solid}
.som-ch{display:flex;align-items:baseline;gap:8px;padding:5px 0;
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.som-ch .t{color:var(--ink);font-size:clamp(.92rem,1.15vw,1rem);line-height:1.35}
.som-ch .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:18px}
.som-ch .p{font-family:var(--font-hand);font-size:1.35rem;color:var(--green-700);
  white-space:nowrap;transition:color .3s,transform .3s var(--ease-out)}
.som-ch.hit{transform:translateX(4px)}
.som-ch.hit .t{color:var(--green-800);font-weight:700}
.som-ch.hit .p{color:var(--clay-700);transform:scale(1.16) rotate(-4deg)}
.som-ch.off{opacity:.3}
@media (max-width:900px){.som-grid{grid-template-columns:1fr}}

/* ---------- Footer : logos partenaires ---------- */
.fpartners{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:26px}
.fpartners img{display:block}
.fpartners .plabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-300);font-family:var(--font-display);width:100%;margin-bottom:-8px}

@media (max-width:960px){
  .scroll-cue{display:none}
  .hero-badge{font-size:1.15rem;padding:8px 14px}
  .hero-visual .hero-badge:first-of-type{left:0}
  .hero-visual .hero-badge:last-of-type{right:0}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:440px;margin:0 auto}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .carnet-grid{grid-template-columns:1fr;gap:36px}
  .temoi-track{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .feature-list{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column;
    gap:0;background:var(--paper-warm);box-shadow:var(--shadow-md);padding:8px 0}
  .nav-links.open a{padding:14px 24px;width:100%}
  .nav-links.open a::after{display:none}
  .burger{display:flex}
  .gallery{grid-template-columns:1fr 1fr}
  .g-a,.g-b,.g-c{grid-column:span 1;transform:none}
}
@media (max-width:560px){
  .stat-grid{grid-template-columns:1fr 1fr;gap:22px}
  .reality-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center}
}