/* ==========================================================================
   NATURE ÉQUIPEMENTS — site V2
   Parti pris : tout part du logo. Un ruban vert plié (le N) posé devant trois
   barres grises (le E). Les photos reprennent le pli du ruban (coins coupés à
   60°), trois barres dépassent derrière, les titres reprennent la géométrie
   fine du mot « NATURE ». Texte aligné à gauche, une seule couleur d'action.
   ========================================================================== */

@font-face{font-family:"Jost";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/jost.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/public-sans.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/public-sans-italic.woff2") format("woff2")}

:root{
  color-scheme:light;
  /* couleurs relevées sur le logo */
  --foret:#0e3b23;        /* vert sombre du pli du ruban */
  --ruban:#2c6a39;        /* vert moyen du ruban */
  --feuille:#5c9043;      /* vert du mot NATURE */
  --feuille-texte:#3b7429; /* même vert, assombri pour les petits textes (contraste AA) */
  --acier:#8b8f8d;        /* gris des barres du E */
  --graphite:#2a2f2c;     /* texte, gris du mot équipements assombri */
  --ardoise:#58605b;      /* texte secondaire */
  --brume:#f1f4ee;        /* fond pâle, gris tiré vers le vert */
  --ligne:#d9dfd6;        /* filets */
  --blanc:#ffffff;
  --robinier:#e9a934;     /* seule couleur d'action : le bois de robinier */
  --robinier-fonce:#d39320;
  --alerte:#a3341f;

  --titre:"Jost","Century Gothic","Futura",system-ui,sans-serif;
  --texte:"Public Sans","Segoe UI","Helvetica Neue",system-ui,sans-serif;

  --mesure:68ch;
  --large:1200px;
  --gouttiere:clamp(16px,4vw,40px);
  --pli:1.732;            /* tan(60°), l'angle de la diagonale du N */

  /* alias pour les styles propres aux pages existantes (outils, formulaires) */
  --vert-fonce:var(--foret); --vert:var(--ruban); --vert-clair:var(--brume);
  --bois:var(--robinier-fonce); --bois-fonce:#98662c; --bois-texte:#7a5412;
  --bois-bouton:var(--robinier); --bois-bouton-survol:var(--robinier-fonce);
  --creme:var(--blanc); --encre:var(--graphite); --gris:var(--ardoise);
  --ombre:0 1px 0 var(--ligne); --rayon:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--blanc);color:var(--graphite);font-family:var(--texte);font-size:1.0625rem;line-height:1.62;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ruban);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--foret)}
:focus-visible{outline:3px solid var(--robinier);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--titre);color:var(--foret);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:400;letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem);font-weight:400;letter-spacing:-.008em}
h3{font-size:1.22rem;font-weight:500;line-height:1.25}
p{margin:0}
p+p{margin-top:.9em}
ul,ol{margin:0;padding:0}
strong{font-weight:700}
table{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--robinier);color:var(--foret);padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--titre);font-weight:500;font-size:1.06rem;line-height:1.2;padding:.82em 1.35em;border-radius:6px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary,.btn-action{background:var(--robinier);color:var(--foret);border-color:var(--robinier)}
.btn-primary:hover,.btn-action:hover{background:var(--robinier-fonce);border-color:var(--robinier-fonce);color:var(--foret)}
.btn-fort{background:var(--foret);color:var(--blanc);border-color:var(--foret)}
.btn-fort:hover{background:var(--ruban);border-color:var(--ruban);color:var(--blanc)}
.btn-outline,.btn-secondary{background:transparent;color:var(--foret);border-color:var(--foret)}
.btn-outline:hover,.btn-secondary:hover{background:var(--foret);color:var(--blanc)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sombre .btn-outline,.sombre .btn-secondary{color:var(--blanc);border-color:rgba(255,255,255,.7)}
.sombre .btn-outline:hover,.sombre .btn-secondary:hover{background:var(--blanc);color:var(--foret)}
.lien-fleche{font-family:var(--titre);font-weight:500;text-decoration:none;border-bottom:2px solid var(--robinier);padding-bottom:1px;color:var(--foret)}
.lien-fleche:hover{border-color:var(--foret)}

/* ---------- En-tête ---------- */
.bandeau{background:var(--foret);color:#dfe9e0;font-size:.875rem}
.bandeau .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:7px;flex-wrap:wrap}
.bandeau a{color:var(--blanc)}
.bandeau .pro{white-space:nowrap}
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:var(--blanc);border-bottom:1px solid var(--ligne)}
.entete .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;margin-right:auto}
.marque .sigle{width:50px;height:auto}
.marque .mot{width:150px;height:auto}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{font-family:var(--titre);font-size:1.03rem;font-weight:500;color:var(--graphite);background:none;border:0;padding:10px 12px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:6px;border-radius:4px}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>a[aria-current="page"]{color:var(--ruban)}
.menu>li>button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.sous{display:none;position:absolute;top:100%;left:-12px;background:var(--blanc);border:1px solid var(--ligne);border-top:3px solid var(--feuille);border-radius:0 0 6px 6px;padding:20px 24px;box-shadow:0 18px 40px -18px rgba(14,59,35,.35);min-width:300px}
.sous.large{left:auto;right:-220px;width:min(880px,92vw)}
.menu>li.ouvert>.sous{display:block}
@media (hover:hover) and (min-width:1081px){.menu>li:hover>.sous,.menu>li:focus-within>.sous{display:block}}
.sous ul{list-style:none;display:grid;gap:2px}
.sous a{display:block;padding:6px 0;color:var(--graphite);text-decoration:none;font-size:.98rem;line-height:1.35}
.sous a:hover{color:var(--ruban);text-decoration:underline}
.sous .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.sous .tete{font-family:var(--titre);font-weight:600;color:var(--foret);font-size:.98rem;margin-bottom:8px;display:block}
.sous .note{color:var(--ardoise);font-size:.85rem;display:block}
.entete .tel{font-family:var(--titre);font-weight:500;color:var(--foret);text-decoration:none;white-space:nowrap;font-size:1.05rem}
.entete .btn{padding:.62em 1.05em;font-size:1rem;white-space:nowrap}
.burger{display:none;background:none;border:2px solid var(--foret);border-radius:6px;width:46px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--foret);content:"";position:relative}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media (max-width:1080px){
  .burger{display:inline-flex}
  .entete .tel{display:none}
  .entete nav{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--ligne);display:none;max-height:calc(100vh - 90px);overflow:auto}
  .entete nav.ouvert{display:block}
  .menu{flex-direction:column;align-items:stretch;padding:8px var(--gouttiere) 20px}
  .menu>li>a,.menu>li>button{width:100%;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--ligne);border-radius:0}
  .sous,.sous.large{position:static;border:0;box-shadow:none;padding:8px 0 14px 12px;width:auto;min-width:0}
  .sous .cols{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:560px){
  .bandeau .accroche{display:none}
  .bandeau .wrap{justify-content:space-between}
  .marque .mot{width:118px}.marque .sigle{width:42px}
  .entete .btn{display:none}
  .sous .cols{grid-template-columns:1fr}
}

/* ---------- Sections ---------- */
.bloc{padding-block:clamp(52px,7vw,96px)}
.bloc.serre{padding-block:clamp(36px,5vw,60px)}
.brume{background:var(--brume)}
.sombre{background:var(--foret);color:#dbe6dc}
.sombre h1,.sombre h2,.sombre h3{color:var(--blanc)}
.sombre a:not(.btn){color:var(--blanc)}
.chapo{font-size:1.2rem;line-height:1.55;color:var(--ardoise);max-width:62ch;margin-top:18px}
.sombre .chapo{color:#c9d8cb}
.tete-bloc{max-width:820px;margin-bottom:clamp(28px,4vw,48px)}
.tete-bloc.avec-lien{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none;flex-wrap:wrap}
.tete-bloc.avec-lien>div{max-width:820px}

/* ---------- Le pli du ruban : cadre photo ---------- */
.cadre{--c:clamp(26px,5vw,58px)}
.cadre .vue{display:block;position:relative}
.cadre .vue::before{content:"";position:absolute;right:calc(var(--c) * -.72);top:14%;bottom:14%;width:calc(var(--c) * 1.5);z-index:0;
  background:linear-gradient(90deg,#77797a,#b4b6b5) 0 0/100% 22% no-repeat,linear-gradient(90deg,#77797a,#b4b6b5) 0 50%/100% 22% no-repeat,linear-gradient(90deg,#77797a,#b4b6b5) 0 100%/100% 22% no-repeat}
.cadre img{position:relative;z-index:1;width:100%;aspect-ratio:var(--ratio,4/3);object-fit:cover;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% calc(var(--c) * var(--pli)),100% 100%,var(--c) 100%,0 calc(100% - var(--c) * var(--pli)))}
.cadre figcaption,.legende{font-size:.9rem;color:var(--ardoise);margin-top:12px;padding-left:var(--c,0);line-height:1.45;max-width:60ch}
.cadre.sans-barres .vue::before{display:none}
figure{margin:0}

/* ---------- Accueil : hero ---------- */
.hero{padding-block:clamp(32px,4.5vw,64px) clamp(28px,4vw,48px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero .sur{font-family:var(--titre);font-weight:500;color:var(--feuille-texte);font-size:1.08rem;margin-bottom:14px}
.assure{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;font-size:.95rem;color:var(--ardoise);list-style:none}
.assure li{display:flex;gap:8px;align-items:baseline}
.assure li::before{content:"";width:9px;height:9px;background:var(--feuille);border-radius:2px;transform:skewX(-30deg);flex-shrink:0}
.hero .appel{margin-top:18px;font-size:1rem;color:var(--ardoise)}
.hero .appel a{font-family:var(--titre);font-weight:600;color:var(--foret);font-size:1.15rem;white-space:nowrap}
@media (max-width:900px){.hero{padding-top:20px}.hero .wrap{grid-template-columns:1fr;gap:0}
  /* mobile : la photo remonte juste sous le titre, pour qu'une aire de jeux soit visible dès le premier écran */
  .hero-texte{display:contents}.hero h1{order:1}.hero .cadre{order:2;margin:18px calc(var(--c) * .8) 20px 0;--ratio:16/10!important}
  .hero-texte>:not(h1){order:3}.hero .cadre figcaption{margin-top:8px;font-size:.85rem}.hero .cadre .suite{display:none}}

/* ---------- Les trois barres : preuves ---------- */
.barres{display:grid;gap:10px;list-style:none}
.barres li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 28px;align-items:center;padding:16px 22px;background:linear-gradient(90deg,#e4e7e2,#f3f5f1);border-left:6px solid var(--ruban)}
.barres b{font-family:var(--titre);font-weight:500;font-size:1.2rem;color:var(--foret);line-height:1.2}
.barres span{color:var(--ardoise);font-size:.98rem}
@media (max-width:760px){.barres li{grid-template-columns:1fr}}

/* ---------- Parcours : où en êtes-vous ---------- */
.parcours{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--foret);counter-reset:etape}
.parcours>li{counter-increment:etape;padding:20px 20px 24px 0;border-right:1px solid var(--ligne);padding-left:20px;display:flex;flex-direction:column;gap:8px}
.parcours>li:first-child{padding-left:0}
.parcours>li:last-child{border-right:0}
.parcours>li::before{content:counter(etape);font-family:var(--titre);font-size:2.3rem;font-weight:300;color:var(--feuille);line-height:1}
.parcours h3{font-size:1.14rem}
.parcours p{font-size:.95rem;color:var(--ardoise)}
.parcours ul{list-style:none;margin-top:auto;padding-top:8px;display:grid;gap:5px;font-size:.96rem}
@media (max-width:1000px){.parcours{grid-template-columns:1fr 1fr}.parcours>li,.parcours>li:first-child{padding-left:0;border-right:0;border-bottom:1px solid var(--ligne)}}
@media (max-width:560px){.parcours{grid-template-columns:1fr}}

/* ---------- Comparaison fabricant / conseil ---------- */
.face{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ligne)}
.face>div{padding:clamp(22px,3vw,38px)}
.face>div+div{background:var(--foret);color:#dbe6dc}
.face>div+div h3{color:var(--blanc)}
.face h3{font-size:1.4rem;margin-bottom:14px}
.face ul{list-style:none;display:grid;gap:12px}
.face li{padding-left:26px;position:relative}
.face li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--acier)}
.face>div+div li::before{background:var(--robinier);height:3px}
@media (max-width:760px){.face{grid-template-columns:1fr}}

/* ---------- Listes d'univers / lignes ---------- */
.lignes{list-style:none;border-top:1px solid var(--ligne)}
.lignes>li{border-bottom:1px solid var(--ligne)}
.lignes a.ligne{display:grid;grid-template-columns:120px minmax(0,240px) minmax(0,1fr) 170px;gap:8px 28px;align-items:center;padding:18px 0;text-decoration:none;color:inherit}
.lignes img{width:120px;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 24px,100% 100%,14px 100%,0 calc(100% - 24px))}
.lignes h3{font-size:1.32rem}
.lignes p{color:var(--ardoise);font-size:.98rem}
.lignes .va{justify-self:end;font-family:var(--titre);font-weight:500;color:var(--foret);border-bottom:2px solid var(--robinier);white-space:nowrap}
.lignes a.ligne:hover h3{color:var(--ruban)}
@media (max-width:860px){.lignes a.ligne{grid-template-columns:84px minmax(0,1fr)}.lignes img{width:84px}.lignes p,.lignes .va{grid-column:2}.lignes .va{justify-self:start}}

/* ---------- Réalisations ---------- */
.chantiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;list-style:none}
.chantiers.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.chantier img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 52px,100% 100%,30px 100%,0 calc(100% - 52px))}
.chantier h3{margin-top:14px}
.chantier .lieu{font-family:var(--titre);color:var(--feuille-texte);font-weight:500;font-size:.98rem;margin-top:12px}
.chantier .lieu+h3{margin-top:2px}
.chantier p{color:var(--ardoise);font-size:.97rem;margin-top:6px}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;list-style:none}
.etiquettes li,.badge{font-size:.82rem;border:1px solid var(--ligne);border-radius:3px;padding:2px 9px;color:var(--ardoise);background:var(--blanc);display:inline-block}
@media (max-width:900px){.chantiers,.chantiers.deux{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.chantiers,.chantiers.deux{grid-template-columns:1fr}}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtres button{font:inherit;font-family:var(--titre);font-weight:500;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:999px;padding:7px 16px;cursor:pointer;color:var(--graphite)}
.filtres button[aria-pressed="true"]{background:var(--foret);border-color:var(--foret);color:var(--blanc)}

/* ---------- Deux colonnes texte / image ---------- */
.duo>*,.split>*{min-width:0}
.duo,.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.duo.haut{align-items:start}
@media (min-width:861px){.duo.large-gauche{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
@media (max-width:860px){.duo,.split{grid-template-columns:1fr}.duo .cadre,.split .cadre{margin-right:calc(var(--c) * .8)}}
.points{list-style:none;display:grid;gap:12px;margin-top:20px}
.points li{padding-left:28px;position:relative}
.points li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:9px;background:var(--feuille);transform:skewX(-30deg)}
.sombre .points li::before{background:var(--robinier)}

/* ---------- Avant / après ---------- */
.avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.avant-apres figure{position:relative}
.avant-apres img{width:100%;aspect-ratio:4/3;object-fit:cover}
.avant-apres figcaption{position:absolute;left:0;bottom:0;background:var(--foret);color:var(--blanc);font-family:var(--titre);font-size:.95rem;padding:5px 14px}

/* ---------- Chiffres clés produit ---------- */
.fiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.25);list-style:none;margin-top:34px}
.fiche li{padding:18px 18px 4px 0}
.fiche b{display:block;font-family:var(--titre);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--blanc);line-height:1.1}
.fiche span{font-size:.92rem;color:#c9d8cb}
.clair .fiche{border-color:var(--ligne)}.clair .fiche b{color:var(--foret)}.clair .fiche span{color:var(--ardoise)}
@media (max-width:760px){.fiche{grid-template-columns:1fr 1fr}}

/* ---------- Aimant : guide ---------- */
.aimant{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;border:1px solid var(--ligne);border-left:8px solid var(--robinier);padding:clamp(22px,3vw,36px);background:var(--blanc)}
.aimant .couv{width:118px;aspect-ratio:210/297;background:var(--foret);color:var(--blanc);padding:12px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--titre);font-size:.82rem;line-height:1.2;box-shadow:6px 6px 0 var(--ligne)}
.aimant .couv b{font-weight:500;font-size:1.02rem}
.aimant .couv i{font-style:normal;color:var(--robinier);font-size:1.5rem;font-weight:300}
@media (min-width:821px){.aimant.simple{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:820px){.aimant{grid-template-columns:1fr}.aimant .couv{display:none}}

/* ---------- Profils ---------- */
.profils{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;border:1px solid var(--ligne);background:var(--blanc)}
.profils li{padding:24px;border-right:1px solid var(--ligne);display:flex;flex-direction:column;gap:8px}
.profils li:last-child{border-right:0}
.profils p{font-size:.96rem;color:var(--ardoise)}
.profils a{margin-top:auto;padding-top:8px;font-family:var(--titre);font-weight:500}
@media (max-width:900px){.profils{grid-template-columns:1fr 1fr}.profils li{border-bottom:1px solid var(--ligne)}}
@media (max-width:520px){.profils{grid-template-columns:1fr}.profils li{border-right:0}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ligne);max-width:880px}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;font-family:var(--titre);font-weight:500;font-size:1.2rem;color:var(--foret)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:300;font-size:1.8rem;color:var(--feuille)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 20px;max-width:var(--mesure);color:var(--graphite)}

/* ---------- Étapes de la méthode ---------- */
.etapes{list-style:none;counter-reset:e;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--foret)}
.etapes li{counter-increment:e;padding:22px 22px 8px 0}
.etapes li::before{content:counter(e);font-family:var(--titre);font-weight:300;font-size:2.6rem;color:var(--feuille);line-height:1;display:block;margin-bottom:8px}
.etapes p{color:var(--ardoise);font-size:.98rem;margin-top:6px}
.etapes .duree{font-size:.86rem;color:var(--feuille-texte);font-family:var(--titre);font-weight:500;margin-top:8px;display:block}
@media (max-width:900px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}

/* ---------- Trios ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);list-style:none}
.trio li{border-top:3px solid var(--feuille);padding-top:16px}
.trio p{color:var(--ardoise);margin-top:8px;font-size:.99rem}
.sombre .trio p{color:#c9d8cb}
@media (max-width:820px){.trio{grid-template-columns:1fr}}

/* ---------- Appel final ---------- */
.final .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.final .contact-direct{border-left:1px solid rgba(255,255,255,.25);padding-left:clamp(20px,3vw,40px);display:grid;gap:14px}
.final .contact-direct b{font-family:var(--titre);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--blanc);display:block;line-height:1.1}
.final .contact-direct span{font-size:.95rem;color:#c9d8cb}
@media (max-width:820px){.final .wrap{grid-template-columns:1fr}.final .contact-direct{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.25);padding-top:22px}}

/* ---------- Fil d'Ariane, en-tête de page ---------- */
.ariane{font-size:.88rem;color:var(--ardoise);padding-block:16px 0}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.ariane li+li::before{content:"/";margin-right:8px;color:var(--acier)}
.ariane a{color:var(--ardoise)}
.tete-page{padding-block:clamp(24px,4vw,48px) clamp(32px,5vw,60px)}
.tete-page .wrap>.duo{align-items:center}

/* ---------- Pied de page ---------- */
.pied{background:#092a19;color:#c3d3c6;font-size:.95rem;padding-block:56px 110px}
.pied a{color:#e3ece4;text-decoration:none}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied .grille{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px}
.pied .t{font-family:var(--titre);font-weight:500;color:var(--blanc);font-size:1.05rem;margin-bottom:12px;display:block}
.pied ul{list-style:none;display:grid;gap:7px}
.pied .ident img{width:170px;margin-bottom:16px}
.pied .ident p{max-width:34ch}
.pied address{font-style:normal;margin-top:16px;line-height:1.7}
.pied .bas{border-top:1px solid rgba(255,255,255,.16);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;font-size:.86rem}
@media (max-width:1000px){.pied .grille{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.pied .ident{grid-column:1/-1}}
@media (min-width:821px){.pied{padding-bottom:40px}}

/* ---------- Barre d'action mobile ---------- */
.barre-mobile{display:none}
@media (max-width:820px){
  .barre-mobile{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--blanc);border-top:1px solid var(--ligne);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .barre-mobile .btn{padding:.7em .6em;font-size:1rem}
}

/* ==========================================================================
   Guides et pages de contenu (gabarit article)
   ========================================================================== */
.gabarit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(20px,3vw,36px) clamp(48px,6vw,80px)}
.gabarit>*{min-width:0}
.gabarit>aside{position:sticky;top:104px;display:grid;gap:22px}
@media (max-width:980px){.gabarit{grid-template-columns:1fr}.gabarit>aside{position:static}}
.sommaire{border-left:3px solid var(--feuille);padding-left:16px}
.sommaire .t,.encart .t{font-family:var(--titre);font-weight:600;color:var(--foret);display:block;margin-bottom:8px}
.sommaire ol{list-style:none;display:grid;gap:7px;font-size:.93rem;line-height:1.35}
.sommaire a{color:var(--ardoise);text-decoration:none}
.sommaire a:hover{color:var(--foret);text-decoration:underline}
.encart{background:var(--foret);color:#dbe6dc;padding:22px;font-size:.96rem}
.encart .t{color:var(--blanc);font-size:1.2rem;font-weight:500}
.encart .btn{width:100%;margin-top:14px}
.encart .num{display:block;margin-top:12px;font-family:var(--titre);color:var(--blanc);font-size:1.15rem}
.encart .num small{display:block;font-family:var(--texte);font-size:.82rem;color:#c9d8cb}

/* contenu rédactionnel repris des pages existantes */
.contenu section{padding:0}
.contenu .wrap{max-width:none;padding-inline:0;margin:0}
.contenu .article{max-width:var(--mesure)}
.contenu h1{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:10px}
.contenu h2{font-size:clamp(1.4rem,2.3vw,1.8rem);font-weight:500;margin:1.9em 0 .55em;scroll-margin-top:110px}
.contenu h3{margin:1.4em 0 .4em}
.contenu p{margin:0 0 1em}
.contenu p+p{margin-top:0}
.contenu ul,.contenu ol{margin:0 0 1.1em 1.25em}
.contenu li{margin-bottom:.45em}
.contenu section+section{margin-top:44px;padding-top:36px;border-top:1px solid var(--ligne)}
.kicker{display:block;font-family:var(--titre);font-weight:500;color:var(--feuille-texte);font-size:1rem;margin-bottom:10px}
.lead{font-size:1.18rem;color:var(--ardoise);line-height:1.55;max-width:62ch}
.date,.byline{font-size:.9rem;color:var(--ardoise)}
.enbref{background:var(--brume);border-left:6px solid var(--ruban);padding:18px 22px;margin:22px 0}
.enbref p{margin:0}
.enbref p+p{margin-top:.6em}
.tscroll{overflow-x:auto}
table.compare{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:.96rem;background:var(--blanc)}
.compare th,.compare td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
.compare thead th{background:var(--foret);color:var(--blanc);font-family:var(--titre);font-weight:500}
.compare td:first-child{font-weight:700}
.compare .oui{color:var(--ruban);font-weight:700}
.compare .non{color:var(--alerte)}
.table-defile{overflow-x:auto;margin:18px 0 26px}
.table-defile table.compare{margin:0;min-width:560px}
.cta-box{background:var(--foret);color:#dbe6dc;padding:26px 28px;margin:36px 0 8px}
.cta-box h3{color:var(--blanc);margin:0 0 .4em;font-size:1.35rem}
.cta-box a:not(.btn){color:var(--blanc)}
.cta-box .btn-outline{color:var(--blanc);border-color:rgba(255,255,255,.7)}
.sources{font-size:.92rem;color:var(--ardoise)}
.contenu .card{border-bottom:1px solid var(--ligne);padding:4px 0 14px;margin-bottom:14px!important}
.contenu .card h3{margin-top:.6em}
.contenu .card.green,.card.green{background:var(--brume);border:0;padding:20px 22px}
.card.dark{background:var(--foret);color:#dbe6dc;padding:22px}.card.dark h3{color:var(--blanc)}
.contenu .photo,.photo{width:100%;height:auto;margin:24px 0;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 59px,100% 100%,34px 100%,0 calc(100% - 59px))}
.center{text-align:left}
.ico{display:none}
.note{font-size:.9rem;color:var(--ardoise)}
.step{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px 16px;border-top:1px solid var(--ligne);padding-top:18px;margin-top:22px}
.step .num,.num{font-family:var(--titre);font-weight:300;font-size:2.4rem;color:var(--feuille);line-height:1}
.step h2,.step h3{margin-top:0}
.grid-2,.grid-3,.grid-4,.cols2{display:grid;gap:24px 28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4,.cols2{grid-template-columns:1fr}}
.gallery{margin-top:24px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:.88rem;color:var(--ardoise);margin-top:8px}
blockquote{margin:0;font-family:var(--titre);font-size:1.4rem;line-height:1.35;color:var(--foret);border-left:6px solid var(--robinier);padding-left:22px;max-width:820px}
blockquote footer{font-family:var(--texte);font-size:.95rem;color:var(--ardoise);margin-top:10px}

/* pages thématiques reprises (sections pleines) */
.reprise>section{padding-block:clamp(40px,5.5vw,72px)}
.reprise>section>.wrap{max-width:var(--large)}
.reprise>section.alt{background:var(--brume)}
.reprise>.page-head{background:var(--foret);color:#dbe6dc;padding-block:clamp(40px,5vw,64px)}
.reprise .page-head h1{color:var(--blanc)}
.reprise .page-head .lead{color:#c9d8cb}
.reprise .page-head .kicker{color:var(--robinier)}
.reprise .page-head .btn-outline{color:var(--blanc);border-color:rgba(255,255,255,.7)}
.reprise h2{margin-bottom:.5em}
.reprise h3{margin-bottom:.35em}
.reprise .card{border-top:3px solid var(--feuille);padding-top:16px}
.reprise .card.green,.reprise .card.dark{border-top:0}
.reprise .center{max-width:820px;margin-bottom:28px}
.reprise .split .photo{margin:0;aspect-ratio:4/3;object-fit:cover}
.reprise ul:not([class]){margin:0 0 1em 1.25em}
.reprise .cta-final,.cta-final{background:var(--foret);color:#dbe6dc;padding:clamp(28px,4vw,52px)}
.cta-final h2{color:var(--blanc)}
.cta-final .btn-outline{color:var(--blanc);border-color:rgba(255,255,255,.7)}
.reprise>section[style*="padding-top:0"]{padding-top:0!important;margin-top:0!important}
.legal{max-width:var(--mesure)}
.legal h2{font-size:1.4rem;font-weight:500;margin:1.8em 0 .5em}
.legal ul{margin:0 0 1em 1.25em}

/* ---------- Formulaires ---------- */
label{display:block;font-weight:700;font-size:.93rem;margin:16px 0 6px}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid #b9c2b8;border-radius:6px;font:inherit;background:var(--blanc);color:var(--graphite)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--robinier);outline-offset:0;border-color:var(--foret)}
input[type=checkbox],input[type=radio]{width:auto}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:560px){form .row{grid-template-columns:1fr}}
form .btn{margin-top:22px}
.formulaire{border:1px solid var(--ligne);border-top:6px solid var(--feuille);padding:clamp(20px,3vw,36px);background:var(--blanc)}
.formulaire h2{font-size:1.5rem;font-weight:500}
.apercu-note{display:none;background:#fff6df;border:1px solid var(--robinier);padding:10px 14px;font-size:.9rem;margin-top:14px}
.apercu .apercu-note{display:block}
.suite{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:14px}
.suite li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px}
.suite li::before{content:counter(s);font-family:var(--titre);font-weight:300;font-size:1.7rem;color:var(--feuille);line-height:1}

/* outils (questionnaire, calculateur) : boutons d'option */
.opts{display:grid;gap:10px}
.opt{border:1.5px solid #b9c2b8;border-radius:6px;padding:12px 14px;cursor:pointer;background:var(--blanc)}
.opt:hover{border-color:var(--foret)}

/* ---------- Catalogue de guides ---------- */
.catalogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(28px,5vw,72px)}
.catalogue h3{font-size:1.35rem;border-bottom:2px solid var(--foret);padding-bottom:8px;margin-bottom:6px}
.catalogue ul{list-style:none}
.catalogue li{border-bottom:1px solid var(--ligne)}
.catalogue li a{display:block;padding:11px 0;text-decoration:none;color:var(--graphite)}
.catalogue li a b{font-family:var(--titre);font-weight:500;font-size:1.06rem;color:var(--foret);display:block}
.catalogue li a span{font-size:.92rem;color:var(--ardoise)}
.catalogue li a:hover b{color:var(--ruban);text-decoration:underline}
@media (max-width:760px){.catalogue{grid-template-columns:1fr}}
.voisins{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.voisins a{display:block;border-top:3px solid var(--feuille);padding-top:12px;text-decoration:none;font-family:var(--titre);font-weight:500;font-size:1.1rem;color:var(--foret)}
.voisins a:hover{color:var(--ruban)}
.voisins span{display:block;font-family:var(--texte);font-weight:400;font-size:.9rem;color:var(--ardoise);margin-top:4px}
@media (max-width:760px){.voisins{grid-template-columns:1fr}}

/* ---------- Tableau technique ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.98rem}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.spec th{font-weight:400;color:var(--ardoise);width:42%;padding-right:16px}
.spec td{font-weight:700;color:var(--foret)}
.docs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.docs a{display:block;border:1px solid var(--ligne);border-top:4px solid var(--foret);padding:16px;text-decoration:none;color:var(--graphite);height:100%}
.docs a b{font-family:var(--titre);font-weight:500;color:var(--foret);font-size:1.08rem;display:block}
.docs a span{font-size:.9rem;color:var(--ardoise)}
.docs a em{font-style:normal;font-size:.8rem;color:var(--feuille-texte);font-weight:700;display:block;margin-top:8px}
.docs a:hover{border-color:var(--foret)}
@media (max-width:860px){.docs{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.docs{grid-template-columns:1fr}}

/* compléments pages reprises */
.reprise h1{margin-bottom:.4em}
.trust{background:var(--brume);border-bottom:1px solid var(--ligne);font-size:.93rem;color:var(--ardoise);padding-block:12px}
.trust .wrap{display:flex;flex-wrap:wrap;gap:6px 28px}
.trust b{color:var(--foret)}
.result-block h4{font-family:var(--titre);font-size:1.1rem}

/* ---------- Assistant (chat/widget.js, inchangé) : couleurs V2 et position au-dessus de la barre mobile ---------- */
body .nec-lanceur{background:var(--foret);font-family:var(--titre);border-radius:6px}
body .nec-lanceur:hover{background:var(--ruban)}
body .nec-lanceur,body .nec-pastille,body .nec-panneau{font-family:var(--texte)}
@media (max-width:820px){
  body .nec-lanceur{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body .nec-pastille{bottom:calc(142px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Vidéo produit : lecteur hébergé sur le site, chapitres cliquables, transcription ---------- */
.video-bloc{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.lecteur{background:var(--foret);line-height:0}
.lecteur video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:var(--foret)}
.chapitres .t{font-family:var(--titre);font-weight:600;color:var(--foret);margin-bottom:8px}
.chapitres ol{list-style:none;border-top:1px solid var(--ligne)}
.chapitres li{border-bottom:1px solid var(--ligne)}
.chapitres button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;width:100%;text-align:left;font:inherit;font-size:.96rem;background:none;border:0;padding:5px 4px;cursor:pointer;color:var(--graphite)}
.chapitres button span{font-family:var(--titre);font-weight:500;color:var(--feuille-texte);font-variant-numeric:tabular-nums}
.chapitres button:hover{background:var(--brume);color:var(--foret)}
.chapitres button[aria-current="true"]{background:var(--brume);color:var(--foret);font-weight:700}
.transcription{margin-top:18px;max-width:var(--mesure)}
.transcription summary{cursor:pointer;font-family:var(--titre);font-weight:500;color:var(--foret)}
.transcription p{margin-top:10px;color:var(--ardoise);font-size:.98rem}
@media (max-width:900px){.video-bloc{grid-template-columns:1fr}.chapitres ol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}}
@media (max-width:480px){.chapitres ol{grid-template-columns:1fr}}