/* ==========================================================================
   Meute — Design system (mini-site vitrine)
   Charte "Foret & Feu" — fidele au Dossier Standalone.
   Polices auto-hebergees (souverainete / RGPD : pas de CDN US).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Polices auto-hebergees
   Deposer les .woff2 dans public/assets/fonts/ (cf fonts/README.md).
   Fallbacks robustes si les fichiers ne sont pas encore presents.
---------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/Manrope-Variable.woff2') format('woff2');
}
/* JetBrains Mono — « ce qui compte » (Charte §04). Auto-hebergee, latin +
   latin-ext, 43 Ko au total. Aucun appel a un tiers. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   2. Tokens (verbatim charte Meute)
---------------------------------------------------------------------------- */
:root {
  /* Couleurs signature */
  --vert:#3DAA4E; --vert-dark:#1F4D2A; --vert-soft:#7FCB8A; --vert-pale:#D8F0DC; --vert-cream:#EEF8EF;
  --orange:#FF7A3D; --orange-soft:#FFB68A; --orange-pale:#FFE4D2; --orange-cream:#FFF1E5;
  --or:#F2B83D; --or-soft:#F8D582; --or-pale:#FCEEC2;
  --rouge:#E63946; --rouge-pale:#FBD9DC;

  --creme:#FAF6EE; --creme-warm:#FFF8E7; --blanc:#FFFFFF; --blanc-casse:#FDFBF6;

  --encre:#1A2120; --encre-soft:#2D3433;
  --gris-dark:#4F5754; --gris:#7C8580; --gris-mid:#A8AFAB;
  --gris-light:#D4D8D5; --gris-pale:#EDEFED;

  /* Domaines (empreintes) */
  --dom-vivant:#3DAA4E; --dom-alim:#C8623A; --dom-sport:#1E88B0; --dom-arts:#8E4FB5;
  --dom-recits:#B23A48; --dom-solidarite:#FF7A3D; --dom-innov:#3D5FB2; --dom-savoir:#8A6E3D;

  /* Gradients */
  --grad-hero:linear-gradient(135deg,#FFF8E7 0%,#FFE4D2 35%,#D8F0DC 75%,#EEF8EF 100%);
  --grad-vert:linear-gradient(135deg,var(--vert) 0%,var(--vert-dark) 100%);
  --grad-feu:linear-gradient(135deg,var(--or) 0%,var(--orange) 100%);
  --grad-soleil:linear-gradient(135deg,var(--or-pale) 0%,var(--orange-pale) 100%);
  --grad-foret:linear-gradient(135deg,var(--vert-pale) 0%,var(--vert-cream) 100%);
  --grad-encre:linear-gradient(135deg,var(--encre) 0%,var(--vert-dark) 100%);

  /* Typos */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;

  /* Ombres */
  --sh-soft:0 4px 16px rgba(31,77,42,.06);
  --sh-card:0 8px 28px rgba(31,77,42,.10);
  --sh-hover:0 16px 44px rgba(31,77,42,.14);
  --sh-glow:0 0 40px rgba(255,122,61,.20);

  --tr:all .25s cubic-bezier(.4,0,.2,1);
  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:32px;

  --nav-h:68px;
  --maxw:1180px;
}

/* ----------------------------------------------------------------------------
   3. Reset & base
---------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--sans);font-weight:400;color:var(--encre);
  background:var(--blanc-casse);line-height:1.65;font-size:1.02rem;overflow-x:hidden;
}
img{max-width:100%;display:block}

h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--encre);letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,5.2vw,3.8rem);font-weight:400;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:.8rem}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:.5rem}
h4{font-size:1.2rem;margin-bottom:.5rem;font-weight:600;font-family:var(--sans);letter-spacing:-.01em}
h5{font-size:.95rem;font-family:var(--sans);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vert-dark)}
p{margin-bottom:1rem}
em{font-style:italic;color:var(--vert-dark);font-family:var(--serif);font-weight:500}
strong{font-weight:700;color:var(--encre)}

a{color:var(--vert-dark);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--orange)}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:var(--r-sm)}

/* ----------------------------------------------------------------------------
   4. Layout helpers
---------------------------------------------------------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container--narrow{max-width:780px}

.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section--green{background:var(--vert-cream)}
.section--cream{background:var(--creme-warm)}
.section--gradient{background:var(--grad-hero)}
.section--ink{background:var(--grad-encre);color:#E8EAE8}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--blanc)}
.section--ink em{color:var(--orange-soft)}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--vert-dark);font-weight:700;margin-bottom:1.25rem}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--orange);display:inline-block}
.section--ink .eyebrow{color:var(--orange-soft)}

.lead{font-size:1.2rem;color:var(--gris-dark);max-width:62ch}
.section--ink .lead{color:#C7CEC9}

.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ----------------------------------------------------------------------------
   5. Boutons
---------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:99px;border:1.5px solid transparent;
  cursor:pointer;transition:var(--tr);text-align:center;line-height:1;
}
.btn--primary{background:var(--grad-feu);color:#fff;box-shadow:var(--sh-glow)}
.btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,122,61,.35)}
.btn--vert{background:var(--grad-vert);color:#fff;box-shadow:0 8px 24px rgba(31,77,42,.22)}
.btn--vert:hover{color:#fff;transform:translateY(-2px)}
/* Bordure remontee de .18 a .38 : a .18 sur fond creme le bouton n'avait
   quasiment aucun contour et se lisait comme du texte. */
.btn--ghost{background:rgba(255,255,255,.82);border-color:rgba(31,77,42,.38);color:var(--vert-dark);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(31,77,42,.07)}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,122,61,.18)}
/* Braise -> rouge : le plus chaud de la palette, reserve aux actions qu'il
   serait dommage de rater (ouverture des maquettes en plein ecran). */
.btn--braise{background:linear-gradient(135deg,var(--orange) 0%,var(--rouge) 100%);color:#fff;border-color:transparent;box-shadow:0 6px 22px rgba(230,57,70,.28)}
.btn--braise:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 34px rgba(230,57,70,.42)}
.btn--ink{background:var(--encre);color:#fff}
.btn--ink:hover{background:var(--vert-dark);color:#fff;transform:translateY(-2px)}
.btn[disabled],.btn--soon{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn--soon:hover{transform:none}
.btn--lg{font-size:1.05rem;padding:1.05rem 2.1rem}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}
.center .btn-row{justify-content:center}

/* ----------------------------------------------------------------------------
   6. Navigation
---------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  background:rgba(253,251,246,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,77,42,.08);transition:var(--tr);
}
.nav.is-scrolled{box-shadow:var(--sh-soft);background:rgba(253,251,246,.94)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}

.brand{display:inline-flex;align-items:baseline;gap:0;font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--vert-dark);letter-spacing:-.03em;border:0}
.brand .e{color:var(--orange);font-style:italic}
.brand:hover{color:var(--vert-dark)}

.nav-links{display:flex;align-items:center;gap:1.7rem;list-style:none}
.nav-links a{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--encre-soft);border:0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--orange);transition:width .25s ease}
.nav-links a:hover{color:var(--vert-dark)}
.nav-links a:hover::after,.nav-links a.is-active::after{width:100%}
.nav-links a.is-active{color:var(--vert-dark)}
.nav-cta{display:flex;align-items:center;gap:.75rem}

.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--encre);border-radius:2px;transition:var(--tr)}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-burger{display:flex}
  .nav-mobile{
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--blanc-casse);border-bottom:1px solid var(--gris-light);
    box-shadow:var(--sh-card);
    padding:1.2rem 24px 1.8rem;z-index:99;
    display:flex;flex-direction:column;gap:.4rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:var(--tr);
  }
  .nav-mobile.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-mobile a{font-size:1.05rem;font-weight:600;color:var(--encre);padding:.7rem 0;border-bottom:1px solid var(--gris-pale)}
  .nav-mobile a:last-of-type{border-bottom:0}
  .nav-mobile .btn{margin-top:.8rem;width:100%}
}

/* ----------------------------------------------------------------------------
   7. Hero / cover
---------------------------------------------------------------------------- */
.cover{
  min-height:100vh;background:var(--grad-hero);
  display:flex;align-items:center;position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 40px) 0 60px;
}
.cover-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;width:100%}

.cover-mark{
  display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);padding:.55rem 1.1rem;border-radius:99px;
  border:1px solid rgba(31,77,42,.1);margin-bottom:1.75rem;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--vert-dark);
}
.cover-mark .pulse{width:8px;height:8px;background:var(--vert);border-radius:50%;box-shadow:0 0 0 0 rgba(61,170,78,.7);animation:pulse 2s infinite}

.cover h1{margin-bottom:1.3rem}
.cover h1 .accent{color:var(--orange);font-style:italic;font-family:var(--serif)}
.cover-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--vert-dark);margin-bottom:1.4rem;font-weight:400}
.cover-sub{font-size:1.08rem;color:var(--gris-dark);max-width:48ch;margin-bottom:0}

.cover-meta{display:flex;gap:2rem;margin-top:1.8rem;flex-wrap:wrap}
.cover-meta-item .lbl{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);font-weight:700}
.cover-meta-item .val{font-family:var(--serif);font-size:1.1rem;color:var(--encre);font-weight:500}

/* Visuel logo circulaire */
.cover-visual{position:relative;aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%}
.cover-circle{position:absolute;inset:8%;background:radial-gradient(circle,var(--blanc) 0%,var(--creme-warm) 100%);border-radius:50%;box-shadow:var(--sh-card),inset 0 0 80px rgba(255,122,61,.08);display:flex;align-items:center;justify-content:center}
.cover-logo-big{text-align:center}
.cover-logo-big .typo{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,9vw,6rem);line-height:1;color:var(--vert-dark);letter-spacing:-.03em}
.cover-logo-big .typo .e1{color:var(--orange);font-style:italic}
.cover-logo-big .sub{margin-top:.5rem;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--vert);font-weight:700}

.cover-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px rgba(255,122,61,.6);animation:float 6s ease-in-out infinite}
.cover-dot.d1{top:4%;left:50%;transform:translateX(-50%);background:var(--vert-dark);animation-delay:0s}
.cover-dot.d2{top:30%;right:2%;background:var(--vert);animation-delay:.8s}
.cover-dot.d3{bottom:4%;left:50%;transform:translateX(-50%);background:var(--orange);animation-delay:1.6s}
.cover-dot.d4{bottom:26%;left:2%;background:var(--vert);animation-delay:2.4s}
.cover-dot.d5{top:14%;right:14%;background:var(--orange);animation-delay:3.2s}

@media (max-width:880px){
  .cover-grid{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .cover-mark,.cover .eyebrow{justify-content:center}
  .cover-meta{justify-content:center}
  .cover-sub,.cover-tagline{margin-inline:auto}
  .cover-visual{max-width:320px;order:-1}
  .cover .btn-row{justify-content:center}
}

/* ----------------------------------------------------------------------------
   8. Cartes / piliers / grilles
---------------------------------------------------------------------------- */
.grid{display:grid;gap:1.6rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){.grid--3,.grid--4{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

.pilier{background:var(--blanc);padding:2.25rem 1.75rem;border-radius:var(--r-lg);box-shadow:var(--sh-card);position:relative;overflow:hidden;transition:var(--tr)}
.pilier::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--vert)}
.pilier:hover{transform:translateY(-6px);box-shadow:var(--sh-hover)}
.pilier--carte::before{background:var(--vert)}
.pilier--jeu::before{background:var(--orange)}
.pilier--lanterne::before{background:var(--or)}
.pilier-icon{width:56px;height:56px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.2rem;background:var(--vert-pale);color:var(--vert-dark)}
.pilier--carte .pilier-icon{background:var(--vert-pale);color:var(--vert-dark)}
.pilier--jeu .pilier-icon{background:var(--orange-pale);color:var(--orange)}
.pilier--lanterne .pilier-icon{background:var(--or-pale);color:#9a7414}
.pilier h3{margin-bottom:.4rem}
.pilier .pilier-role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:700;margin-bottom:.8rem}
.pilier p{color:var(--gris-dark);margin-bottom:0;font-size:.98rem}

/* Carte generique */
.card{background:var(--blanc);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--sh-soft);border:1px solid var(--gris-pale);transition:var(--tr)}
.card:hover{box-shadow:var(--sh-card);transform:translateY(-4px)}

/* ----------------------------------------------------------------------------
   9. Cycle (7 gestes)
---------------------------------------------------------------------------- */
.cycle{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem}
.cycle-step{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:var(--blanc);border-radius:var(--r);padding:1.2rem 1rem;
  min-width:118px;flex:1 1 118px;max-width:150px;box-shadow:var(--sh-soft);
  border-top:3px solid var(--orange);transition:var(--tr);position:relative;
}
.cycle-step:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.cycle-step .n{font-family:var(--mono);font-size:.7rem;color:var(--orange);font-weight:700}
.cycle-step .ico{font-size:1.5rem}
.cycle-step .lbl{font-family:var(--serif);font-size:1rem;color:var(--encre);font-weight:500}

/* ----------------------------------------------------------------------------
   10. Niveaux GAGE
---------------------------------------------------------------------------- */
.niveau{background:var(--blanc);border-radius:var(--r-lg);padding:2rem 1.6rem;box-shadow:var(--sh-card);text-align:center;border-bottom:4px solid var(--vert);transition:var(--tr)}
.niveau:hover{transform:translateY(-6px);box-shadow:var(--sh-hover)}
.niveau--1{border-bottom-color:var(--vert-soft)}
.niveau--2{border-bottom-color:var(--or)}
.niveau--3{border-bottom-color:var(--orange)}
.niveau .lvl-name{font-family:var(--serif);font-size:1.5rem;color:var(--encre);margin-bottom:.3rem}
.niveau .lvl-gage{display:inline-block;font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--vert-dark);background:var(--vert-pale);padding:.3rem .8rem;border-radius:99px;margin-bottom:.9rem}
.niveau--2 .lvl-gage{color:#9a7414;background:var(--or-pale)}
.niveau--3 .lvl-gage{color:#A03010;background:var(--orange-pale)}
.niveau p{color:var(--gris-dark);font-size:.95rem;margin-bottom:0}

/* ----------------------------------------------------------------------------
   11. Listes : refus assumes, empreintes, derives
---------------------------------------------------------------------------- */
.refus-list{list-style:none;display:grid;gap:.8rem}
.refus-list li{display:flex;gap:.9rem;align-items:flex-start;background:var(--blanc);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh-soft);border-left:3px solid var(--rouge)}
.refus-list li .x{color:var(--rouge);font-weight:800;flex-shrink:0;font-size:1.1rem;line-height:1.4}
.refus-list li span{color:var(--encre-soft);font-size:.98rem}

.empreinte{display:flex;flex-direction:column;gap:.5rem;background:var(--blanc);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--sh-soft);border-top:4px solid var(--vert);transition:var(--tr)}
.empreinte:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.empreinte .emp-ico{font-size:1.8rem}
.empreinte h4{margin-bottom:.2rem}
.empreinte p{color:var(--gris-dark);font-size:.92rem;margin-bottom:0}

.derive{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:1.6rem;backdrop-filter:blur(6px)}
.derive .d-num{font-family:var(--mono);font-size:.72rem;color:var(--orange-soft);font-weight:700;letter-spacing:.1em}
.derive h4{color:var(--blanc);margin:.3rem 0 .6rem}
.derive .d-derive{color:#C7CEC9;font-size:.92rem;margin-bottom:.9rem}
.derive .d-garde{display:flex;gap:.5rem;align-items:flex-start;color:var(--vert-soft);font-size:.9rem;font-weight:600}
.derive .d-garde::before{content:"\2713";color:var(--vert-soft);font-weight:800}

/* ----------------------------------------------------------------------------
   12. Quote
---------------------------------------------------------------------------- */
.quote-block{position:relative;padding:1.5rem 1rem 1rem 3rem;max-width:760px;margin:0 auto}
.quote-block::before{content:"\00AB";position:absolute;left:.2rem;top:-.4rem;font-family:var(--serif);font-size:5rem;color:var(--or);line-height:1;font-weight:400}
.quote-block .q{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--encre);font-style:italic;line-height:1.4;margin-bottom:.8rem;font-weight:400}
.section--ink .quote-block .q{color:var(--blanc)}
.quote-block .author{font-size:.85rem;color:var(--vert-dark);font-weight:600;letter-spacing:.05em}
.section--ink .quote-block .author{color:var(--orange-soft)}

/* ----------------------------------------------------------------------------
   13. CTA bandeau
---------------------------------------------------------------------------- */
.cta-band{background:var(--grad-vert);border-radius:var(--r-xl);padding:clamp(2.5rem,5vw,4rem);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,122,61,.25),transparent 55%);pointer-events:none}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto 1.5rem;position:relative}
.cta-band .btn-row{justify-content:center;position:relative}

/* ----------------------------------------------------------------------------
   14. Formulaire contact
---------------------------------------------------------------------------- */
.form-card{background:var(--blanc);border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--sh-card);max-width:640px;margin:0 auto}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--encre-soft);margin-bottom:.4rem;letter-spacing:.02em}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--encre);
  background:var(--blanc-casse);border:1.5px solid var(--gris-light);border-radius:var(--r);
  padding:.8rem 1rem;transition:var(--tr);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px var(--vert-pale)}
.field .err{display:block;color:var(--rouge);font-size:.82rem;margin-top:.35rem;font-weight:600}
.field--error input,.field--error textarea{border-color:var(--rouge)}
/* honeypot : invisible aux humains */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.4rem;font-size:.95rem;font-weight:600}
.alert--error{background:var(--rouge-pale);color:#9b1b25;border-left:3px solid var(--rouge)}
.alert--success{background:var(--vert-pale);color:var(--vert-dark);border-left:3px solid var(--vert)}

/* ----------------------------------------------------------------------------
   15. Pages contenu (legal / texte)
---------------------------------------------------------------------------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem}
.prose p,.prose li{color:var(--gris-dark)}
.prose ul,.prose ol{margin:0 0 1rem 1.3rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--vert-dark);border-bottom:1px solid var(--vert-soft)}
.prose a:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* ----------------------------------------------------------------------------
   16. Footer
---------------------------------------------------------------------------- */
.footer{background:var(--encre);color:#B9C0BB;padding:3.5rem 0 2rem}
.footer a{color:#B9C0BB;border:0}
.footer a:hover{color:var(--orange-soft)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;gap:1.8rem}}
.footer .brand{color:var(--blanc);font-size:1.6rem;margin-bottom:.8rem;display:inline-flex}
.footer-about{font-size:.92rem;color:#8E9690;max-width:34ch}
.footer h5{color:var(--orange-soft);margin-bottom:1rem}
.footer-col ul{list-style:none;display:grid;gap:.55rem}
.footer-col a{font-size:.92rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.82rem;color:#7C857F}
.footer-bottom a{font-size:.82rem}

/* ----------------------------------------------------------------------------
   17. Animations / reveal
---------------------------------------------------------------------------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,170,78,.7)}70%{box-shadow:0 0 0 12px rgba(61,170,78,0)}100%{box-shadow:0 0 0 0 rgba(61,170,78,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes float-x{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-14px)}}
.cover-dot.d1,.cover-dot.d3{animation-name:float-x}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.is-visible{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}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ----------------------------------------------------------------------------
   18. Divers
---------------------------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:.7rem 1.2rem;z-index:200;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0;color:#fff}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* ----------------------------------------------------------------------------
   12. Pages ajoutees (le-jeu, demo, feuille-de-route, investisseurs)
---------------------------------------------------------------------------- */

/* — Roles (le-jeu) */
.role-card { text-align:center; }
.role-glyph {
  font-size:1.9rem; line-height:1; color:var(--vert);
  margin-bottom:.6rem;
}
.role-when {
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:.5rem;
}

/* — Niveaux : duree */
.lvl-duree {
  font-size:.8rem; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase; margin:.4rem 0 .6rem;
}

/* — Domaines (le-jeu) */
.domaine h4 { font-size:1.02rem; margin-bottom:.45rem; }
.domaine p { font-size:.88rem; color:var(--gris-dark); }

/* — Cartes cliquables (home, aller plus loin) */
.card--link { display:block; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; }
.card--link:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(31,77,42,.14); }
.card-more {
  display:inline-block; margin-top:.9rem;
  font-size:.85rem; font-weight:800; color:var(--vert-dark);
}

/* — Feuille de route */
.roadline { position:relative; padding-left:1.6rem; }
.roadline::before {
  content:''; position:absolute; left:.35rem; top:.6rem; bottom:.6rem;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--vert), var(--orange));
}
.roadstep { position:relative; padding:0 0 2.2rem 1.2rem; }
.roadstep::before {
  content:''; position:absolute; left:-1.6rem; top:.45rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--fond, #FAF6EE); border:3px solid var(--vert);
  transform:translateX(.05rem);
}
.roadstep--done::before { background:var(--vert); }
.roadstep--now::before { background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 6px rgba(255,122,61,.18); }
.roadstep-badge {
  display:inline-block; font-size:.7rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.25rem .7rem; border-radius:99px; margin-bottom:.6rem;
  background:var(--vert-pale); color:var(--vert-dark);
}
.roadstep--now .roadstep-badge { background:var(--orange-pale); color:#b34a12; }
.roadstep h3 { margin-bottom:.6rem; }
.roadstep ul { padding-left:1.1rem; color:var(--gris-dark); line-height:1.75; font-size:.95rem; }
.roadstep ul li + li { margin-top:.35rem; }

/* — Demo : cadre navigateur */
.demo-frame {
  margin-top:2.2rem; border-radius:16px; overflow:hidden;
  border:1px solid rgba(31,77,42,.14);
  box-shadow:0 22px 60px rgba(31,77,42,.16);
  background:#fff;
}
.demo-bar {
  display:flex; align-items:center; gap:.45rem;
  padding:.6rem .9rem; background:#EFEAE0; border-bottom:1px solid rgba(31,77,42,.1);
}
.demo-bar span { width:10px; height:10px; border-radius:50%; background:#D8D2C4; }
.demo-bar span:first-child { background:var(--orange-soft); }
.demo-bar em {
  margin-left:.6rem; font-style:normal; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
}
.demo-frame iframe { display:block; width:100%; height:640px; border:0; }

/* — Demo : cadre telephone */
.phone-frame {
  width:min(340px, 88vw); margin:0 auto;
  border-radius:38px; padding:12px;
  background:#1A2120;
  box-shadow:0 26px 60px rgba(26,33,32,.35);
}
.phone-frame iframe {
  display:block; width:100%; height:600px; border:0;
  border-radius:28px; background:#fff;
}

@media (max-width:720px) {
  .demo-frame iframe { height:440px; }
  .phone-frame iframe { height:520px; }
}

/* ============================================================
   COUCHE SIGNATURE MEUTE — Charte Graphique 2026, palette A « Forêt & Feu »
   Cinq gestes récurrents qui rendent la page reconnaissable au premier regard :
     1. la lueur braise (halo radial braise en haut, or en bas — cf. icône du kit)
     2. la trame de points (grain des visuels de kit, pas 28px)
     3. le disque forêt (le monogramme du kit, porté dans le hero)
     4. le point braise (marqueur récurrent : eyebrow, nav active, monogramme)
     5. le mono pour « ce qui compte » (données, jamais du texte courant)
   ============================================================ */

:root{
  /* Grain : trame de points, même pas que les visuels du kit */
  --grain-pas:28px;
  --grain-clair:radial-gradient(circle,rgba(31,77,42,.055) 1px,transparent 1px);
  --grain-sombre:radial-gradient(circle,rgba(250,246,238,.07) 1px,transparent 1px);
  /* Lueur braise : la signature lumineuse (ordre = braise chaude puis or froid) */
  --lueur-braise:radial-gradient(ellipse 60% 50% at 78% 18%,rgba(255,122,61,.20),transparent 62%);
  --lueur-or:radial-gradient(ellipse 55% 45% at 18% 86%,rgba(242,184,61,.14),transparent 60%);
}

/* ---------- 1 + 2. Sections sombres : lueur + grain ---------- */
.section--ink{position:relative;isolation:isolate}
.section--ink::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--lueur-braise),var(--lueur-or),var(--grain-sombre);
  background-size:auto,auto,var(--grain-pas) var(--grain-pas);
}

/* Sections claires : grain seul, très discret */
.section--green,.section--cream,.section--gradient{position:relative;isolation:isolate}
.section--green::before,.section--cream::before,.section--gradient::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain-clair);
  background-size:var(--grain-pas) var(--grain-pas);
}

/* Le hero porte la lueur en plus du grain */
.cover{position:relative;isolation:isolate}
.cover::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--lueur-braise),var(--lueur-or),var(--grain-clair);
  background-size:auto,auto,var(--grain-pas) var(--grain-pas);
}

/* ---------- 3. Le disque forêt : le monogramme du kit dans le hero ---------- */
/* Inversion assumée : le cercle crème devenait un aplat sans caractère.
   Ici on reprend exactement l'icône du kit — forêt dégradé, wordmark crème,
   lueur braise en haut à droite, grain. C'est le geste le plus reconnaissable. */
.cover-circle{
  background:
    var(--lueur-braise),
    var(--grain-sombre),
    radial-gradient(circle at 68% 24%,#2C6B3A 0%,var(--vert-dark) 58%,#173C21 100%);
  background-size:auto,var(--grain-pas) var(--grain-pas),auto;
  box-shadow:
    0 30px 80px rgba(31,77,42,.34),
    inset 0 1px 0 rgba(250,246,238,.14),
    inset 0 0 90px rgba(255,122,61,.12);
}
.cover-logo-big .typo{color:var(--creme)}
.cover-logo-big .typo .e1{
  color:var(--orange);
  text-shadow:0 0 26px rgba(255,122,61,.55);
  animation:braise-e 4.5s ease-in-out infinite;
}
@keyframes braise-e{
  0%,100%{text-shadow:0 0 22px rgba(255,122,61,.45)}
  50%    {text-shadow:0 0 38px rgba(255,122,61,.75)}
}
.cover-logo-big .sub{
  font-family:var(--mono);
  color:rgba(250,246,238,.42);
  letter-spacing:.34em;
  font-weight:400;
  font-size:.62rem;
}
/* ---------- 4. Le point braise comme marqueur récurrent ---------- */
/* L'eyebrow avait un tiret braise ; on lui ajoute le point de rupture,
   écho du « e » du wordmark. */
.eyebrow::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--orange);display:inline-block;
  margin-left:.15rem;flex:0 0 auto;
}
.section--ink .eyebrow::before,.section--ink .eyebrow::after{background:var(--orange)}

/* Nav active : la braise plutôt qu'un simple soulignement plein */
.nav-links a.is-active::after{background:var(--orange);height:2px}
.nav-links a.is-active{position:relative}
/* Le « e » du wordmark s'allume au survol — détail, mais il signe la marque */
.brand .e{transition:text-shadow .3s ease}
.brand:hover .e{text-shadow:0 0 18px rgba(255,122,61,.6)}

/* ---------- 5. Le mono pour « ce qui compte » ---------- */
/* Charte §04 : JetBrains Mono = les données. Jamais du texte courant. */
.data,
.cover-meta-item .lbl,
.d-num,
.roadstep-badge,
.lvl-duree,
.footer-bottom{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.cover-meta-item .lbl{letter-spacing:.14em;font-weight:500}
.d-num{letter-spacing:.02em}
.roadstep-badge{letter-spacing:.10em;font-weight:600}
.footer-bottom{font-size:.78rem;letter-spacing:.02em}

/* Les valeurs du hero : chiffres et données en mono, le reste en Fraunces */
.cover-meta-item .val{font-family:var(--serif)}
.cover-meta-item .val.is-data{font-family:var(--mono);font-size:1rem;letter-spacing:-.01em}

/* ---------- Filet : respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cover-logo-big .typo .e1{animation:none}
}

/* ---------- Le grain ne doit pas alourdir le mobile bas de gamme ---------- */
@media (max-width:560px){
  .section--green::before,.section--cream::before,.section--gradient::before{background-image:none}
}

/* Les exposants ordinaux (13e, 14e) héritaient de la chasse élargie du badge
   et se détachaient du chiffre. On leur rend une chasse normale. */
.cover-mark sup,.eyebrow sup,h1 sup,h2 sup,.roadstep sup,.defi-meta sup{
  letter-spacing:0;
  font-size:.62em;
  vertical-align:super;
  line-height:0;
  margin-left:.02em;
}

/* ============================================================
   LE « e » BRAISE — forme canonique à toutes les tailles
   Fraunces est variable sur l'axe optique (opsz 9..144). En corps réduit, le
   navigateur descend automatiquement l'opsz : le « e » perd son contraste,
   s'élargit et s'aplatit. Il ne ressemble alors plus au « e » du hero.
   On fige donc l'axe au maximum : la coupe nette du display est conservée
   même à 1rem. C'est cette rupture qui fait la force du logo.
   ============================================================ */
.brand .e,
.cover-logo-big .typo .e1,
.footer .brand .e,
.e-braise{
  color:var(--orange);
  font-style:italic;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 144;
  font-synthesis:none;
}

/* ============================================================
   PAGES INTÉRIEURES — les en-têtes portent la signature
   Chaque page s'ouvrait sur un dégradé plat. On leur donne la même
   grammaire que le hero : lueur braise, filet de braise, et le titre
   qui accroche la lumière.
   ============================================================ */
.section--gradient{
  border-bottom:1px solid rgba(31,77,42,.08);
  overflow:hidden;
}
.section--gradient::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange) 22%,var(--or) 50%,var(--orange) 78%,transparent);
  opacity:.55;
}
.section--gradient h1{position:relative}
/* Le point braise ouvre chaque en-tête de page, écho du « e » du logo */
.section--gradient .eyebrow::before{width:18px}
.section--gradient .eyebrow::after{
  width:6px;height:6px;
  box-shadow:0 0 12px rgba(255,122,61,.55);
}
/* Les blocs de citation reprennent le filet braise plutôt qu'un bord neutre */
.quote-block{border-left:3px solid var(--orange)}
.quote-block .q::first-letter{color:var(--orange)}
/* Les cartes de la grille : la braise se révèle au survol, jamais en statique */
.card{border-top:2px solid transparent;transition:var(--tr)}
.card:hover{border-top-color:var(--orange)}
.card--link:hover .card-more{color:var(--orange)}