/* Polices hébergées sur le site : aucun appel externe */
@font-face{font-family:"Marcellus";src:url("../fonts/marcellus.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost.woff2") format("woff2");font-weight:300 700;font-display:swap}

/* ================= PALETTE EUCALYPTUS & ABRICOT =================
   Page de garde en vert profond ; parties rédigées en lin et eucalyptus pâle ; abricot en accent. */
:root{
  --couv-ciel:#284840; --couv-sol:#352D27; --couv-trait:#EAE6DD; --couv-feuille:#9CC4B4; --couv-racine:#EBA27C;
  --couv-texte:#F2EEE6; --couv-texte2:#B7CCC4; --couv-strate:rgba(234,230,221,.16);
  /* sol de la page de garde : terre cuite */
  --sol-fond:#985840; --sol-racine:#F4C9AF; --sol-texte:#F3E3D8; --sol-fort:#FBF3EC; --sol-strate:rgba(255,236,224,.2); --sol-feuille:#C9E0D6;
  --entete:rgba(40,72,64,.97); --pied:#22403A; --pied-texte:#BFD2CB;

  --clair:#F7F5F0; --clair-2:#DDEBE6; --texte:#263832; --texte2:#586B64; --titre:#2D5B4C; --filet:#CFDDD7;
  --deco:#E8A07A; --chiffre:#C06C47; --picto:#2D5B4C; --feuille:#6FA597; --teinte:#E1ECE7;

  --vert:#D5E6DF; --vert-texte:#233630; --vert-texte2:#4E625A; --vert-titre:#2D5B4C; --vert-filet:#B9CFC6;
  --vert-picto:#2D5B4C; --vert-deco:#D88A62; --vert-feuille:#5E988A; --vert-teinte:rgba(255,255,255,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:62px;-webkit-text-size-adjust:100%;
  --gouttiere:clamp(18px,4vw,48px); --lc:min(1280px,calc(100vw - 2*var(--gouttiere)))}
body{margin:0;background:var(--clair);color:var(--texte);font-family:"Jost",system-ui,sans-serif;font-size:15.5px;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--deco);outline-offset:4px}
.conteneur{max-width:calc(1280px + 2*var(--gouttiere));margin:0 auto;padding:0 var(--gouttiere)}
.lien-evitement{position:absolute;left:-999px;top:8px;z-index:100;background:var(--clair);color:var(--texte);padding:8px 14px}
.lien-evitement:focus{left:8px}
h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1.1em}
.insecable,v-nb{white-space:nowrap}

/* Jetons de couleur selon le fond de la section */
.clair,.clair-2{--c-fond:var(--clair);--c-texte:var(--texte);--c-texte2:var(--texte2);--c-titre:var(--titre);--c-filet:var(--filet);
  --picto-c:var(--picto);--picto-a:var(--deco);--f-c:var(--feuille);--c-teinte:var(--teinte)}
.clair-2{--c-fond:var(--clair-2)}
.vert{--c-fond:var(--vert);--c-texte:var(--vert-texte);--c-texte2:var(--vert-texte2);--c-titre:var(--vert-titre);--c-filet:var(--vert-filet);
  --picto-c:var(--vert-picto);--picto-a:var(--vert-deco);--f-c:var(--vert-feuille);--c-teinte:var(--vert-teinte)}
.fonce{--c-fond:var(--couv-ciel);--c-texte:var(--couv-texte);--c-texte2:var(--couv-texte2);--c-titre:var(--couv-texte);--c-filet:rgba(234,230,221,.2);
  --picto-c:var(--couv-texte);--picto-a:var(--couv-racine);--f-c:var(--couv-feuille);--c-teinte:rgba(255,255,255,.05)}
.clair,.clair-2,.vert,.fonce{background:var(--c-fond);color:var(--c-texte)}

/* dessins au trait */
.t{fill:none;stroke:var(--picto-c);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.a{fill:none;stroke:var(--picto-a);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.t .fin,.fin{stroke-width:1}
.f{fill:var(--f-c)}
svg text.lbl{font:500 15px "Jost",sans-serif;fill:var(--c-titre)}
svg text.petit{font-size:12px;fill:var(--c-texte2)}
.secteur{fill:var(--c-teinte)}

/* ================= EN-TÊTE ================= */
.entete{position:fixed;inset:0 0 auto 0;z-index:40;background:var(--entete);color:var(--couv-texte);transform:translateY(-100%);transition:transform .35s ease}
.entete.visible{transform:none}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;height:62px}
.entete .logo img{height:46px;width:auto}
.nav ul{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-size:14px;font-weight:450;letter-spacing:.01em;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--couv-racine)}
.burger{display:none;background:none;border:0;color:inherit;width:44px;height:44px;cursor:pointer}
.burger svg{width:26px;height:26px}

/* ================= PAGE DE GARDE ================= */
.couverture{min-height:100vh;display:flex;flex-direction:column;background:var(--couv-ciel);color:var(--couv-texte);
  --picto-c:var(--couv-texte);--picto-a:var(--couv-racine);--f-c:var(--couv-feuille)}
.ciel{flex:1;display:flex;align-items:flex-end}
.ciel .conteneur{width:100%}
.scene{position:relative;display:flex;align-items:center;min-height:max(calc(var(--lc)*.35 + 80px),calc(100vh - var(--lc)*.184375))}
.identite{width:52%;padding:40px 0 calc(var(--lc)*.035)}
.logo-couv{width:min(262px,60%);margin:0 0 28px -2%;animation:monte 1.1s .05s cubic-bezier(.2,.7,.2,1) both}
.devise{font-family:"Marcellus",serif;font-size:clamp(21px,2.1vw,29px);line-height:1.2;max-width:17ch;margin:0 0 14px;animation:monte 1.1s .2s cubic-bezier(.2,.7,.2,1) both}
.sous-devise{color:var(--couv-texte2);font-size:14.5px;margin:0;animation:monte 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.batiment{position:absolute;left:60%;bottom:0;width:24%;overflow:visible;animation:monte 1.2s .1s cubic-bezier(.2,.7,.2,1) both}
.batiment .traits *{fill:none;stroke:var(--couv-trait);stroke-width:1.15;vector-effect:non-scaling-stroke}
.batiment .traits .fin{stroke-width:.8;opacity:.8}
.batiment .traits .tige{stroke:var(--couv-feuille);stroke-width:1.1}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sol{background:var(--sol-fond);border-top:1.5px solid var(--sol-racine);overflow:hidden;--picto-c:var(--sol-fort);--picto-a:var(--sol-racine);--f-c:var(--sol-feuille);transition:background .3s}
.reseau{position:relative;aspect-ratio:1280/236}
.racines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.racines .strates path{fill:none;stroke:var(--sol-strate);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round}
.racines .rac path{fill:none;stroke:var(--sol-racine);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pousse var(--rd) linear var(--r) forwards}
.racines .rac .radicelle{stroke-width:1;opacity:.85;animation-timing-function:ease-out}
.racines .rac .radicelle.fine{stroke-width:.7;opacity:.7}
@keyframes pousse{to{stroke-dashoffset:0}}
.sigle{position:absolute;width:160px;transform:translate(-50%,-6px);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--sol-fort);text-align:center;opacity:0;animation:apparait .7s var(--s) ease-out forwards}
.bourgeon{width:11px;height:11px;border-radius:50%;background:var(--sol-racine);box-shadow:0 0 0 4px var(--sol-fond),0 0 0 5px var(--sol-racine);transition:transform .3s}
.sigle svg{width:38px;height:38px;margin-top:12px;transition:transform .3s}
.sigle .nom{font-size:13.5px;font-weight:450;letter-spacing:.015em;line-height:1.3;margin-top:5px;color:var(--sol-texte);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.sigle:hover .bourgeon{transform:scale(1.35)}
.sigle:hover svg{transform:translateY(-2px)}
.sigle:hover .nom{color:var(--sol-fort);border-bottom-color:var(--sol-racine)}
@keyframes apparait{from{opacity:0}to{opacity:1}}

/* ================= SECTIONS ================= */
.section{--pad:clamp(68px,7.5vw,116px);padding:var(--pad) 0;position:relative}
.grille{display:grid;grid-template-columns:minmax(170px,3fr) 9fr;gap:clamp(22px,4vw,64px);position:relative}
.racine-section{position:absolute;left:calc(var(--gouttiere) - 8px);top:calc(var(--pad)*-1);height:calc(100% + var(--pad)*2);width:80px;overflow:visible;pointer-events:none}
.racine-section path{fill:none;stroke:var(--picto-a);stroke-linecap:round}
.racine-section .principale{stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.racine-section .radicelle{stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease-out}
.racine-section .radicelle.vue{stroke-dashoffset:0}
.racine-section circle{fill:var(--picto-a)}
.repere{position:relative;z-index:1;align-self:start;background:var(--c-fond);padding:8px 0 14px;width:max-content;max-width:100%}
.repere svg{width:46px;height:46px;display:block;margin-left:-4px}
.repere h1,.repere h2{font-size:14.5px;font-weight:500;letter-spacing:.015em;margin:8px 0 0;color:var(--c-titre)}
.repere.sous{padding-top:14px}
.point,.repere .point{display:block;width:11px;height:11px;border-radius:50%;background:var(--picto-a);box-shadow:0 0 0 4px var(--c-fond),0 0 0 5px var(--picto-a);margin:0 0 0 2px}
.repere.sous h2{margin-top:12px}
.titre-section{font-family:"Marcellus",serif;font-size:clamp(22px,2.2vw,30px);line-height:1.22;color:var(--c-titre);max-width:30ch;margin:0 0 clamp(16px,1.8vw,24px);text-wrap:balance}
.section-suite{padding-top:0}
.section-suite .racine-section{top:0;height:calc(100% + var(--pad))}
.accroche{font-family:"Marcellus",serif;font-size:clamp(25px,2.8vw,38px);line-height:1.18;color:var(--c-titre);max-width:24ch;margin:0 0 clamp(22px,2.4vw,32px)}
.chapo{font-size:clamp(16px,1.25vw,17.5px);font-weight:300;line-height:1.65;max-width:60ch;color:var(--c-texte)}
.contenu p{max-width:64ch}
.secondaire{color:var(--c-texte2)}
h3.titre-bloc{font-family:"Marcellus",serif;font-size:clamp(21px,1.9vw,27px);line-height:1.2;color:var(--c-titre);margin:clamp(48px,5vw,76px) 0 14px}
.lien-fleche{display:inline-flex;align-items:center;gap:12px;font-weight:500;text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--deco);margin-top:8px}
.lien-fleche svg{width:22px;height:10px;transition:transform .2s}
.lien-fleche:hover svg{transform:translateX(4px)}

/* ---- Préambule ---- */
.sens{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:36px}
.sens figure{margin:0}
.sens svg{width:100%;max-width:290px;height:auto;display:block;margin-bottom:18px;overflow:visible}
.sens h3{font-family:"Marcellus",serif;font-size:20.5px;color:var(--c-titre);margin-bottom:10px;line-height:1.25}
.sens p{color:var(--c-texte2);margin:0}
.etymologie{font-family:"Marcellus",serif;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--c-titre);max-width:42ch;margin:0}
.etymologie em{font-style:italic;color:var(--chiffre)}

/* ---- La société ---- */
.societe-haut{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.quartier{width:100%;height:auto;overflow:visible}
.activites{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px)}
.activites li{border-top:1px solid var(--c-filet);padding-top:20px}
.activites svg{width:46px;height:46px;display:block;margin:0 0 12px -3px}
.activites strong{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:19px;color:var(--c-titre);line-height:1.2;margin-bottom:6px}
.activites span{display:block;font-size:14px;color:var(--c-texte2);line-height:1.55}
.trajectoire{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;gap:clamp(12px,2vw,24px);margin-top:clamp(40px,4vw,56px);padding:clamp(22px,2.4vw,32px);background:var(--c-teinte)}
.trajectoire.clair-fond{background:var(--clair)}
.etape-traj{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start}
.etape-traj svg{width:54px;height:54px}
.etape-traj b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:19.5px;color:var(--c-titre);line-height:1.2;margin-bottom:6px}
.etape-traj span{display:block;font-size:14.5px;color:var(--c-texte2);line-height:1.6}
.fleche-traj{width:100%;height:24px;overflow:visible}
.fleche-traj path{fill:none;stroke:var(--picto-a);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.intro-chiffres{font-family:"Marcellus",serif;font-size:clamp(19px,1.7vw,23px);color:var(--c-titre);margin:clamp(48px,5vw,76px) 0 0}
.faits{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border-top:1px solid var(--c-filet)}
.fait{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:30px clamp(18px,2.6vw,36px) 4px 0}
.fait+.fait{border-left:1px solid var(--c-filet);padding-left:clamp(18px,2.6vw,36px);padding-right:0}
.fait svg{display:block;height:clamp(124px,17vh,168px);width:auto;max-width:100%;overflow:visible}
.fait p{margin:0}
.fait .enonce{font-family:"Marcellus",serif;font-size:clamp(18px,1.55vw,21.5px);line-height:1.32;color:var(--c-titre);margin-bottom:10px}
.fait .enonce strong{font-weight:400;color:var(--chiffre);font-size:1.9em;line-height:.9;margin-right:.08em}
.fait .enonce em{font-style:normal;color:var(--chiffre)}
.fait .detail{font-size:14px;color:var(--c-texte2);line-height:1.55}
.idf-fond{fill:var(--clair)}
.fait .secteur{fill:var(--clair)}
.idf-paris{fill:var(--picto-a);fill-opacity:.3;stroke:var(--chiffre)}
.fondateur{display:grid;grid-template-columns:116px 1fr;gap:clamp(24px,3vw,44px);align-items:start;margin-top:22px}
.fondateur img{width:116px;height:116px;border-radius:50%;object-fit:cover;filter:saturate(.85)}
.citation{margin:0 0 20px;font-family:"Marcellus",serif;font-size:clamp(17.5px,1.5vw,20.5px);line-height:1.5;color:var(--c-titre);max-width:46ch;position:relative}
.citation::before{content:"«";position:absolute;left:-.75em;top:-.05em;color:var(--deco);font-size:1.4em;line-height:1}
.signature{font-weight:500;margin:0}
.signature span{display:block;font-weight:400;color:var(--c-texte2);font-size:14px}
.origines{margin-top:28px;padding-top:22px;border-top:1px solid var(--c-filet)}
.origines h3{font-size:14.5px;font-weight:500;color:var(--c-titre);margin-bottom:8px}

/* ---- Approche & métiers : l'arbre ---- */
.arbre{margin-top:0}
.arbre-scene{padding-top:64px}
.arbre-scene{position:relative}
.arbre-svg{width:100%;height:auto;display:block;overflow:visible}
.arbre-svg .ar-sol{stroke-width:1.2}
.arbre-svg .ar-strate{fill:none;stroke:var(--c-filet);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round}
.arbre-svg .ar-rac,.arbre-svg .ar-rad{fill:none;stroke:var(--picto-a);stroke-linecap:round;vector-effect:non-scaling-stroke}
.arbre-svg .ar-rad{stroke-width:1px}
.arbre-svg .ar-tronc,.arbre-svg .ar-br{stroke-linecap:round;vector-effect:non-scaling-stroke}
.arbre-svg .ar-nid circle{fill:none;stroke:var(--picto-a);stroke-width:1.4;vector-effect:non-scaling-stroke}
.arbre-svg .ar-nid .plein{fill:var(--picto-a)}
.arbre-svg .ar-feuilles use{opacity:.92}
/* animation : racines, puis tronc, branches, feuillage, nids */
.arbre.anime .ar-rac,.arbre.anime .ar-rad,.arbre.anime .ar-tronc,.arbre.anime .ar-br{stroke-dasharray:1;stroke-dashoffset:1}
.arbre.anime .ar-feuilles,.arbre.anime .ar-nid,.arbre.anime .nids li,.arbre.anime .engagements li{opacity:0}
.arbre.anime .ar-nid{transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.arbre.vue .ar-rac,.arbre.vue .ar-rad,.arbre.vue .ar-tronc,.arbre.vue .ar-br{stroke-dashoffset:0;transition:stroke-dashoffset var(--dd) linear var(--d)}
.arbre.vue .ar-feuilles{opacity:1;transition:opacity .9s ease 2.1s}
.arbre.vue .ar-nid{opacity:1;transform:none;transition:opacity .4s ease var(--d),transform .5s cubic-bezier(.3,1.6,.5,1) var(--d)}
.arbre.vue .nids li{opacity:1;transition:opacity .6s ease calc(var(--d) + .15s)}
.arbre.vue .engagements li{opacity:1;transition:opacity .6s ease var(--d)}
.nids{list-style:none;margin:0;padding:0}
.nids li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,calc(-100% - 18px));display:flex;flex-direction:column;align-items:center;text-align:center;width:140px}
.nids svg{width:34px;height:34px;margin-bottom:4px}
.nids b{font-weight:500;color:var(--c-titre);font-size:14px;line-height:1.25}
.nids span{font-family:"Marcellus",serif;font-size:13.5px;color:var(--c-texte2);line-height:1.3}
.engagements{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.8vw,24px);text-align:center}
.engagements svg{width:52px;height:52px;display:block;margin:0 auto 12px}
.engagements strong{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:19px;color:var(--c-titre);margin-bottom:8px}
.engagements span{display:block;font-size:14px;line-height:1.6;color:var(--c-texte2)}
.etiq-arbre{display:none}
.legende-arbre{display:flex;justify-content:space-between;gap:24px;margin:-4px 0 0;font-size:13.5px;color:var(--c-texte2)}

/* ---- Approche & métiers : frise ---- */
.frise{position:relative;margin:44px 0 0}
.frise-racine{position:absolute;left:0;right:0;top:0;height:64px;width:100%;overflow:visible;pointer-events:none}
.frise-racine path{fill:none;stroke:var(--picto-a);stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.4,.1,.2,1)}
.frise-racine .rad{transition-delay:1.4s;transition-duration:1s}
.frise.vue .frise-racine path{stroke-dashoffset:0}
.frise-liste{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:etape}
.etape{counter-increment:etape;position:relative}
.etape .pastille{width:64px;height:64px;border-radius:50%;background:var(--c-fond);box-shadow:inset 0 0 0 1px var(--c-filet);display:grid;place-items:center;margin-bottom:18px;position:relative}
.etape .pastille svg{width:38px;height:38px}
.etape h3{font-family:"Marcellus",serif;font-size:17.5px;line-height:1.25;color:var(--c-titre);margin-bottom:8px}
.etape h3::before{content:counter(etape);display:block;font-family:"Jost",sans-serif;font-size:12.5px;font-weight:500;color:var(--c-texte2);margin-bottom:6px;letter-spacing:.04em}
.etape p{font-size:14px;line-height:1.6;color:var(--c-texte2);margin:0}
.declinaisons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:28px}
.declinaisons div{padding-left:22px;position:relative}
.declinaisons div::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:10px;border-radius:50% 0;background:var(--picto-a);transform:rotate(-45deg)}
.declinaisons b{display:block;font-weight:500;color:var(--c-titre);margin-bottom:4px}
.declinaisons span{font-size:14px;color:var(--c-texte2);line-height:1.6;display:block}

/* ---- Projets : une grande bande par opération ---- */
.titre-encours{margin-top:clamp(36px,4vw,56px)}
.bandes{display:grid;gap:clamp(36px,5vw,64px)}
.bande{display:block;text-decoration:none;color:inherit}
.bande .visuel{overflow:hidden;aspect-ratio:16/8.2;background:var(--c-teinte)}
.bande .visuel img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bande:hover .visuel img{transform:scale(1.03)}
.bande-texte{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(18px,3vw,48px);padding-top:20px;align-items:start}
.bande .lieu{margin:0 0 4px;font-size:14px;color:var(--c-texte2)}
.bande h3{font-family:"Marcellus",serif;font-size:clamp(22px,2.1vw,28px);line-height:1.15;color:var(--c-titre);margin:0 0 8px}
.bande .resume{color:var(--c-texte2);margin:0}
.cles{display:flex;gap:28px;margin-bottom:12px}
.cles div{font-size:13.5px;color:var(--c-texte2);line-height:1.35}
.cles b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:22px;color:var(--chiffre);line-height:1.1}
.partenaires{font-size:14px;color:var(--c-texte2);margin:0 0 14px}
.partenaires b{font-weight:500;color:var(--c-texte)}
.bande .lien-fleche{margin-top:0}
.bande:hover .lien-fleche svg{transform:translateX(4px)}
.avenir{display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.avenir svg{width:100%;max-width:230px;height:auto;overflow:visible}
.avenir .chapo{margin-bottom:14px}

/* ---- Page projet ---- */
.projet-hero{display:flex;align-items:center;min-height:min(calc(100vh - 62px),780px);min-height:min(calc(100svh - 62px),780px);padding:clamp(32px,6vh,72px) 0}
.projet-hero>.conteneur{width:100%;display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:center}
.ariane{font-size:13.5px;margin:0 0 18px;color:var(--c-texte2)}
.ariane a{text-decoration:none;border-bottom:1px solid var(--c-filet)}
.ariane a:hover{border-bottom-color:var(--picto-a)}
.projet-hero h1{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1.08;color:var(--c-titre);margin:0 0 6px;text-wrap:balance}
.projet-hero .lieu{font-size:15px;color:var(--c-texte2);margin:0 0 18px}
.projet-hero .resume{font-size:clamp(15.5px,1.25vw,17.5px);font-weight:300;line-height:1.6;margin:0 0 26px;max-width:46ch}
.hero-chiffres{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px clamp(20px,2.6vw,40px);padding-top:20px;border-top:1px solid var(--c-filet)}
.hero-chiffres div{font-size:13px;line-height:1.35;color:var(--c-texte2);max-width:15ch}
.hero-chiffres b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.1;color:var(--picto-a);margin-bottom:4px;white-space:nowrap}
.hero-image{margin:0}
.hero-image img{width:100%;aspect-ratio:16/9.6;object-fit:cover}
.hero-image figcaption,.projet-texte figcaption{font-size:12.5px;color:var(--c-texte2);margin-top:10px}
.projet-texte{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.5vw,56px);align-items:start}
.projet-texte p{max-width:60ch}
.projet-texte p:first-child{font-size:clamp(16px,1.25vw,17.5px);font-weight:300;line-height:1.65}
.projet-texte figure{margin:6px 0 0}
.equipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 32px}
.equipe span{display:block;font-size:12.5px;color:var(--c-texte2)}
.equipe li{font-weight:500;line-height:1.4;padding-top:12px;border-top:1px solid var(--c-filet)}
.sous-titre{font-family:"Marcellus",serif;font-size:19.5px;color:var(--c-titre);margin:clamp(30px,3.4vw,44px) 0 16px}
.labels{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px 30px}
.labels li{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px;font-size:12.5px;line-height:1.35;color:var(--c-texte2)}
.labels svg{width:44px;height:44px;margin-bottom:8px}
.projet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(30px,3.4vw,44px);padding-top:24px;border-top:1px solid var(--c-filet)}
.a-venir{color:var(--c-texte2);font-size:14px}
.copier{font:inherit;font-size:14.5px;font-weight:500;background:var(--c-titre);color:var(--c-fond);border:0;padding:10px 18px;cursor:pointer;display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.copier svg{width:16px;height:16px}
.copier.secondaire-btn{background:none;color:var(--c-titre);box-shadow:inset 0 0 0 1px var(--c-filet)}
.copier.secondaire-btn:hover{box-shadow:inset 0 0 0 1px var(--c-titre)}

/* ---- Approche : autres missions ---- */
.contextes{list-style:none;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.contextes li{border-top:1px solid var(--c-filet);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.contextes svg{width:54px;height:54px;margin-left:-4px}
.contextes h3{font-family:"Marcellus",serif;font-size:20px;line-height:1.22;color:var(--c-titre)}
.contextes p{margin:0;font-size:14.5px;color:var(--c-texte2);line-height:1.6}
.contextes .pour{margin-top:auto;padding-top:6px;color:var(--c-texte);font-size:14px}
.contextes .pour b{font-weight:500}

/* ---- Accueil : portes d'entrée ---- */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.porte{display:grid;grid-template-columns:52px 1fr 24px;gap:18px;align-items:center;padding:22px 22px 22px 20px;text-decoration:none;color:var(--c-texte);background:var(--clair);border:1px solid var(--c-filet);transition:border-color .2s,transform .25s}
.porte:hover{border-color:var(--picto-a);transform:translateY(-2px)}
.porte>svg{width:52px;height:52px}
.porte b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--c-titre);margin-bottom:4px}
.porte-texte span{display:block;font-size:14px;line-height:1.5;color:var(--c-texte2)}
.porte .fleche-lien{width:22px;height:10px;color:var(--c-titre);transition:transform .2s}
.porte:hover .fleche-lien{transform:translateX(4px)}

/* ---- Page suivante ---- */
.suite{background:var(--clair);border-top:1px solid var(--filet)}
.suite .conteneur{display:flex;flex-wrap:wrap;gap:12px 48px;justify-content:space-between}
.suite-lien{display:flex;align-items:center;gap:20px;padding:clamp(26px,4vh,40px) 0;text-decoration:none;color:var(--titre)}
.suite-lien>svg{width:50px;height:50px;flex:none;--picto-c:var(--picto);--picto-a:var(--deco)}
.suite-etiquette{display:block;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texte2);margin-bottom:2px}
.suite-titre{display:block;font-family:"Marcellus",serif;font-size:clamp(22px,2.3vw,30px);line-height:1.15}
.suite-lien .fleche-lien{width:30px;height:14px;flex:none;transition:transform .2s}
.suite-lien:hover .fleche-lien{transform:translateX(6px)}
.suite-lien.discret .suite-titre{font-size:clamp(18px,1.6vw,22px)}

/* ---- Pages intérieures ---- */
.interieure .entete{transform:none}
.interieure main{padding-top:62px}
.nav a[aria-current="page"]{border-bottom-color:var(--couv-racine)}
.ecran{--pad:clamp(44px,8vh,96px);min-height:calc(100vh - 62px);min-height:calc(100svh - 62px);display:flex;align-items:center}
.ecran>.conteneur{width:100%}
/* les écrans d'ouverture voient plus grand */
.ecran .accroche{font-size:clamp(28px,3.3vw,48px);max-width:21ch}
.ecran .chapo{font-size:clamp(16.5px,1.35vw,19px)}
.ecran .societe-haut{grid-template-columns:1.1fr 1.3fr}
/* l'arbre tient dans la hauteur de l'écran, son titre à côté */
.colonne{position:relative;z-index:1;align-self:start;background:var(--c-fond);padding:14px 0 18px 28px;margin-left:-28px}
.colonne .point{margin-bottom:16px}
.colonne .titre-section{font-size:clamp(20px,1.8vw,26px)}
.colonne p{font-size:14px;line-height:1.65}
.section-arbre{--pad:clamp(40px,6vh,72px)}
.section-arbre .arbre{max-width:calc((100vh - 210px) * 1.3158);max-width:calc((100svh - 210px) * 1.3158);margin:0 auto}
.section-arbre .arbre-scene{padding-top:56px}

/* ---- Contact ---- */
.liens-reseaux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,2.8vw,36px);max-width:860px}
.carte-reseau{display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center;padding:16px 20px;text-decoration:none;color:var(--c-texte);border:1px solid var(--c-filet);background:var(--c-teinte);transition:border-color .2s,background .2s}
.carte-reseau:hover{border-color:var(--picto-a);background:rgba(255,255,255,.09)}
.carte-reseau img{width:60px;height:60px;border-radius:50%;object-fit:cover}
.carte-reseau img.logo-v{border-radius:0;object-fit:contain}
.carte-reseau .qui b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--c-titre)}
.carte-reseau .qui span{display:block;font-size:13.5px;line-height:1.4;color:var(--c-texte2)}
.carte-reseau .vers{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--picto-a);white-space:nowrap}
.carte-reseau .vers svg{width:11px;height:11px;transition:transform .2s}
.carte-reseau:hover .vers svg{transform:translate(2px,-2px)}
.siege{margin:clamp(32px,3.6vw,48px) 0 0;padding-top:18px;border-top:1px solid var(--c-filet);max-width:860px;font-size:14px;color:var(--c-texte2)}
.siege b{font-weight:500;color:var(--c-texte);margin-right:12px}
.mail-masque{font:inherit;background:none;border:0;padding:0;color:var(--couv-texte);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Pied de page ---- */
.pied{background:var(--pied);color:var(--pied-texte);font-size:13.5px;padding:38px 0 24px;border-top:1px solid rgba(234,230,221,.12)}
.pied .haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14)}
.pied .haut img{height:62px;width:auto}
.pied-nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.pied-nav a{text-decoration:none;color:var(--couv-texte);font-size:14px}
.pied-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.pied .bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 32px;padding-top:18px}
.pied .bas>span{padding-top:2px}
.pied .bas details{flex:1 1 100%;margin-top:0;order:-1}
.pied details{margin-top:0}
.pied summary{cursor:pointer;color:var(--couv-texte);font-weight:500}
.pied .grille-mentions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:18px;line-height:1.65}
.pied h3{font-size:14px;font-weight:500;color:var(--couv-texte);margin-bottom:6px}
.pied p{margin:0 0 8px}
.pied a{color:var(--couv-texte)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--titre);color:var(--clair);padding:11px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300}
.toast.visible{opacity:1;transform:translate(-50%,0)}


/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .grille{grid-template-columns:1fr}
  .racine-section{display:none}
  .repere{display:flex;align-items:center;gap:14px;padding:0}
  .repere h1,.repere h2,.repere.sous h2{margin:0}
  .repere.sous,.colonne{padding-top:0}
  .colonne .point{display:none}
  .colonne{margin-left:0;padding-left:0}
  .section-suite{padding-top:calc(var(--pad)*.4)}
  .frise-liste{grid-template-columns:1fr;gap:28px}
  .frise-racine{display:none}
  .frise::before{content:"";position:absolute;left:32px;top:32px;bottom:32px;width:1.5px;background:var(--picto-a);opacity:.7}
  .etape{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start}
  .etape .pastille{margin:0;grid-row:span 2}
  .activites{grid-template-columns:1fr 1fr}
  .projet-hero>.conteneur{grid-template-columns:1fr}
  .projet-hero{min-height:0}
  .hero-image{order:-1}
  .equipe{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{position:fixed;inset:62px 0 auto 0;background:var(--entete);display:none;padding:8px var(--gouttiere) 24px}
  .nav.ouvert{display:block}
  .nav ul{flex-direction:column;gap:2px}
  .nav a{display:block;padding:11px 0;font-size:17px}
  .burger{display:grid;place-items:center}
  .entete{transform:none}
  .scene{flex-direction:column;align-items:stretch;min-height:0;padding-top:78px}
  .identite{width:100%;text-align:center;padding:16px 0 28px}
  .logo-couv{margin:0 auto 22px;width:min(220px,62%)}
  .devise{margin:0 auto 12px}
  .batiment{position:relative;left:auto;width:min(210px,48%);margin:0 auto}
  .reseau{aspect-ratio:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:30px 8px;padding:34px 0 40px}
  .racines{display:none}
  .sigle{position:static;transform:none;width:auto;grid-column:span 2;animation:none;opacity:1}
  .sigle:nth-child(5){grid-column:2/span 2}
  .sigle:nth-child(6){grid-column:4/span 2}
  .sens,.societe-haut,.portes,.contextes,.bande-texte,.projet-texte,.liens-reseaux,.faits,.pied .grille-mentions,.avenir{grid-template-columns:1fr}
  .ecran{min-height:0}
  .ecran .societe-haut{grid-template-columns:1fr}
  .interieure main{padding-top:62px}
  .fait,.fait+.fait{padding:22px 0 18px;border-left:0}
  .fait+.fait{border-top:1px solid var(--c-filet)}
  .trajectoire{grid-template-columns:1fr;gap:10px}
  .fleche-traj{transform:rotate(90deg);width:60px;margin:0 0 0 2px}
  /* arbre : étiquettes en liste sous le dessin */
  /* arbre sur écran étroit : les habitants au-dessus des branches, l'arbre en pleine largeur, les engagements sous les racines */
  .section-arbre .arbre{max-width:none}
  .arbre-scene{display:contents;padding:0}
  .arbre{display:flex;flex-direction:column}
  .etiq-arbre{display:block;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texte2);margin:0 0 14px}
  .etiq-branches{order:0;margin-top:10px}
  .arbre-svg{order:2;width:calc(100% + 2*var(--gouttiere));max-width:none;margin:6px calc(-1*var(--gouttiere)) 0}
  .etiq-racines{order:3;margin-top:26px}
  .legende-arbre{display:none}
  .engagements{order:4;grid-template-columns:1fr;text-align:left;gap:22px;margin-top:0}
  .arbre.anime .nids li,.arbre.anime .engagements li{opacity:1}
  .engagements li{display:grid;grid-template-columns:56px 1fr;column-gap:16px}
  .engagements svg{margin:0;width:52px;height:52px;grid-row:span 2}
  .nids{order:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin:0;padding:0}
  .nids li{position:static;transform:none;width:auto}
}
@media (max-width:560px){
  body{font-size:15.5px}
  .fait svg{height:112px}
  .activites{grid-template-columns:1fr}
  .fondateur{grid-template-columns:1fr;gap:18px}
  .fondateur img{width:96px;height:96px}
  .citation::before{position:static;display:inline;margin-right:.15em}
  .equipe{grid-template-columns:1fr}
  .hero-chiffres{grid-template-columns:repeat(2,auto)}
  .porte{grid-template-columns:44px 1fr;padding:18px}
  .porte>svg{width:44px;height:44px}
  .porte .fleche-lien{display:none}
  .suite-lien>svg{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .racines .rac path,.frise-racine path,.racine-section path,.arbre .ar-rac,.arbre .ar-rad,.arbre .ar-tronc,.arbre .ar-br{stroke-dashoffset:0!important}
  .arbre .ar-feuilles,.arbre .ar-nid,.arbre .nids li,.arbre .engagements li{opacity:1!important;transform:none!important}
  .sigle{opacity:1}
}
