/* ==========================================================================
   MyCor : Site vitrine V2. Charte v2 (mai 2026).
   Fraunces (titres, citations, chiffres) · Inter (corps, données)

   Principe directeur de la V2 : chaque animation est un argument.
   - La lenteur matérialise le temps long (easings longs, déplacements courts).
   - Le réseau mycorhizien (canvas) croît tant qu'on reste : patience récompensée.
   - Le fil racinaire de lecture remplace la barre de progression.
   - La frise des horizons fait VIVRE la différence de détention : la barre
     MyCor met volontairement plus de temps à se dessiner que celle du LBO.
   - prefers-reduced-motion respecté partout (tout est lisible sans animation).
   ========================================================================== */

:root{
  --sapin:#1F3024;          /* titres, signature : 25% */
  --sapin-profond:#15241B;  /* hero / manifeste : 15% */
  --cuivre:#B8835E;         /* accent signature : 8% */
  --bronze:#C4A47A;         /* variante claire du cuivre */
  --brun-chaud:#7E6240;     /* eyebrows discrets : 2% */
  --creme:#F5F3EA;          /* fond dominant : 35% */
  --creme-leger:#F5EFDF;    /* cards : 8% */
  --creme-pierre:#EDE6D3;   /* surfaces + texte sur sombre : 5% */
  --charbon:#1A1A18;        /* body */
  --brun-cendre:#4A4438;    /* titres marketing */

  --f-titre:'Fraunces', Georgia, serif;
  --f-corps:'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* Easing maison : départ doux, arrivée très amortie. La marque est patiente. */
  --easing:cubic-bezier(.22,.61,.21,1);
  --easing-long:cubic-bezier(.16,.5,.22,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
::selection{background:var(--cuivre); color:var(--creme);}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-corps);
  font-size:16.5px; line-height:1.7;
  color:var(--charbon); background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

/* Transition de page : fondu croisé natif quand le navigateur le supporte
   (View Transitions), fondu de sortie JS sinon. Continuité, pas de rupture. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation-duration:.32s; }
::view-transition-new(root){ animation-duration:.32s; }
body.sortie{ opacity:0; transition:opacity .26s ease; }

/* ---------- Typographie ----------
   Fraunces en LIGHT (300), conformément à la plateforme de marque
   (titres du deck en Fraunces Light). L'axe optique fait le reste :
   fin et élégant en grand, lisible en petit. */
h1,h2,h3,.serif{font-family:var(--f-titre); font-weight:300; color:var(--sapin); line-height:1.18; font-optical-sizing:auto;}
h3{font-weight:400;}
h1{font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.01em;}
h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:22px;}
h3{font-size:1.18rem; margin-bottom:8px;}
p{max-width:68ch;}
a{color:var(--sapin); text-decoration:none;}
strong{font-weight:600;}

.eyebrow{
  display:block; font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brun-chaud); margin-bottom:16px;
}
.dark .eyebrow{color:var(--bronze);}
.lead{font-size:1.13rem; color:var(--brun-cendre);}

/* ---------- Structure ---------- */
.container{max-width:1120px; margin:0 auto; padding:0 28px;}
.section{padding:92px 0;}
.section.tight{padding:64px 0;}
.dark{background:var(--sapin-profond); color:var(--creme-pierre);}
.dark h1,.dark h2,.dark h3{color:var(--creme-pierre);}
.dark p{color:var(--creme-pierre); opacity:.92;}
.surface{background:var(--creme-pierre);}
/* Voile : alternance crème léger pour donner de la profondeur au défilé
   des sections sans sortir de la famille crème (les 10 nuances de la
   charte, rien de plus, mais toutes utilisées). */
.voile{background:var(--creme-leger);}
.voile .card{background:var(--creme); border-color:rgba(31,48,36,.1);}
.voile .etape::before{background:var(--creme-leger);}

.grid{display:grid; gap:26px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){ .g2,.g3,.g4{grid-template-columns:1fr;} .section{padding:64px 0;} }

/* ---------- Navigation ----------
   Bandeau éditorial, pas barre de CMS : transparent sur le hero sombre,
   il se matérialise en vert sapin profond au défilement. Liens en
   capitales espacées (registre des eyebrows), page active marquée d'un
   nodule cuivre (le motif de la germination), contact en lien texte
   plutôt qu'en bouton encadré. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:transparent;
  border-bottom:1px solid rgba(196,164,122,0);
  transition:border-color .6s var(--easing), background .6s var(--easing);
}
.nav.scrolled{
  background:rgba(21,36,27,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom-color:rgba(196,164,122,.16);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:0 28px; height:84px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{font-family:var(--f-titre); font-size:1.05rem; letter-spacing:.42em; color:var(--creme-pierre); font-weight:400;}
.nav-links{display:flex; align-items:center; gap:34px; list-style:none;}
.nav-links a{
  font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme-pierre); opacity:.82; position:relative;
  transition:opacity .5s var(--easing), color .5s var(--easing);
}
.nav-links a:hover{opacity:1;}
/* Le soulignement pousse comme une radicelle : lent, depuis la gauche. */
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-8px; height:1px; width:0;
  background:var(--cuivre); transition:width .7s var(--easing);
}
.nav-links a:not(.nav-cta):hover::after{width:100%;}
/* Page active : un nodule cuivre, pas un soulignement. */
.nav-links a.active{opacity:1;}
.nav-links a.active::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--cuivre); margin-right:9px; vertical-align:2px;
}
.nav-links a.active:not(.nav-cta)::after{width:0;}
/* Contact : un geste, pas un bouton. */
.nav-cta{
  color:var(--bronze) !important; opacity:1 !important;
  border-left:1px solid rgba(196,164,122,.28);
  padding-left:30px;
}
.nav-cta:hover{color:var(--cuivre) !important;}
.nav-cta em{font-style:normal; display:inline-block; transition:transform .45s var(--easing);}
.nav-cta:hover em{transform:translateX(4px);}
.nav-burger{display:none;}
@media (max-width:880px){
  .nav-links{display:none;}
  .nav-burger{
    display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--creme-pierre); background:none; border:none; padding:8px 0;
    font-family:var(--f-corps); cursor:pointer;
  }
  .nav.open{background:rgba(21,36,27,.98);}
  .nav.open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:84px; left:0; right:0;
    background:rgba(21,36,27,.98); padding:26px 28px 34px; gap:22px;
    border-bottom:1px solid rgba(196,164,122,.16);
  }
  .nav-cta{border-left:none; padding-left:0;}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; font-size:.95rem; font-weight:500;
  padding:14px 28px; border-radius:3px;
  transition:background .4s var(--easing), color .4s var(--easing), border-color .4s var(--easing);
}
.btn-solid{background:var(--sapin); color:var(--creme-pierre); border:1.5px solid var(--sapin);}
.btn-solid:hover{background:var(--brun-cendre); border-color:var(--brun-cendre);}
.dark .btn-solid{background:var(--cuivre); border-color:var(--cuivre); color:var(--sapin-profond);}
.dark .btn-solid:hover{background:var(--bronze); border-color:var(--bronze);}
.btn-ghost{border:1.5px solid var(--sapin); color:var(--sapin);}
.btn-ghost:hover{border-color:var(--cuivre); color:var(--brun-chaud);}
.dark .btn-ghost{border-color:var(--creme-pierre); color:var(--creme-pierre);}
.dark .btn-ghost:hover{border-color:var(--bronze); color:var(--bronze);}
.link-fleche{font-weight:500; color:var(--brun-chaud);}
.link-fleche::after{content:" →"; transition:margin-left .35s var(--easing);}
.link-fleche:hover::after{margin-left:5px;}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:170px 0 110px;}
.hero .container{position:relative; z-index:2;}
.hero .baseline{
  font-family:var(--f-titre); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.12; letter-spacing:-.015em;
  color:var(--creme-pierre); margin-bottom:26px;
}
.hero h1{font-size:1.22rem; font-family:var(--f-corps); font-weight:400; color:var(--creme-pierre); opacity:.92; max-width:36em; line-height:1.65;}
.hero .actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;}
.hero-court{padding:160px 0 84px;}
.hero-court .lead{margin-top:14px;}

/* Révélation mot à mot de la baseline : chaque mot émerge de sa ligne,
   comme une pousse. Posé par le JS (progressive enhancement). */
.mots .mot{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em;}
.mots .mot > span{display:inline-block; transform:translateY(115%); transition:transform 1.15s var(--easing);}
.mots.in .mot > span{transform:none;}
.mots.in .mot:nth-child(2) > span{transition-delay:.18s;}
.mots.in .mot:nth-child(3) > span{transition-delay:.36s;}
.mots.in .mot:nth-child(4) > span{transition-delay:.54s;}
.mots.in .mot:nth-child(5) > span{transition-delay:.72s;}

/* Réseau racinaire du hero (index) : composé, pas génératif.
   Une source unique au-dessus du cadre, quatre racines maîtresses,
   deux ramifications, une radicelle centrale. Tracé sur ~12 s, puis
   les nodules germent aux embranchements. Un seul geste, maîtrisé. */
.reseau-hero{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}
.reseau-hero path{
  fill:none; stroke:var(--cuivre); stroke-width:1.1;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:dessiner 12s var(--easing-long) forwards;
}
.reseau-hero path:nth-of-type(1){opacity:.30;}
.reseau-hero path:nth-of-type(2){opacity:.24; animation-delay:.7s;}
.reseau-hero path:nth-of-type(3){opacity:.26; animation-delay:1.4s;}
.reseau-hero path:nth-of-type(4){opacity:.20; animation-delay:2.1s;}
.reseau-hero path:nth-of-type(5){opacity:.16; stroke-width:.9; animation-delay:4.5s; animation-duration:8s;}
.reseau-hero path:nth-of-type(6){opacity:.16; stroke-width:.9; animation-delay:5.2s; animation-duration:8s;}
.reseau-hero path:nth-of-type(7){opacity:.10; stroke-width:.8; animation-delay:2.8s;}
/* La sève : points bronze qui descendent le long des racines
   (animateMotion suit la courbe exacte du path). L'opacité est pilotée
   par le SMIL embarqué dans le SVG ; on part de 0 pour éviter tout
   flash avant le premier cycle. */
.reseau-hero .seve circle{fill:var(--bronze); opacity:0;}
/* Nodules fixes : uniquement le relais reduced-motion. */
.reseau-hero .nodules circle{fill:var(--bronze); opacity:0;}

/* Les pages intérieures partagent le composant .reseau-hero de l'accueil
   (variante compacte, viewBox 1440x360) : même comportement responsive,
   même sève. Une seule écriture du motif, six pages cohérentes. */
@keyframes dessiner{to{stroke-dashoffset:0;}}

/* ---------- Fond racinaire de bloc ----------
   Notre motif (le réseau du hero) posé en backdrop d'un bloc sombre, masqué
   en fondu horizontal : invisible sous le texte (à gauche), il émerge vers la
   droite, dans le vide laissé par le texte. Zéro photo, notre propre signature.
   Le tracé démarre quand le bloc entre à l'écran (.in posé par l'observer). */
.fond-racines{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0,0,0,.5) 60%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0,0,0,.5) 60%, #000 100%);
}
.fond-racines path{
  fill:none; stroke:var(--cuivre); stroke-width:1.1;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:dessiner 9s var(--easing-long) forwards; animation-play-state:paused;
}
.fond-racines.in path{animation-play-state:running;}
.fond-racines path:nth-of-type(1){opacity:.30;}
.fond-racines path:nth-of-type(2){opacity:.22; animation-delay:.6s;}
.fond-racines path:nth-of-type(3){opacity:.26; animation-delay:1.3s;}
.fond-racines path:nth-of-type(4){opacity:.16; stroke-width:.9; animation-delay:2.2s;}
.fond-racines path:nth-of-type(5){opacity:.14; stroke-width:.9; animation-delay:2.9s;}
.fond-racines path:nth-of-type(6){opacity:.10; stroke-width:.8; animation-delay:3.6s;}
.fond-racines .seve circle{fill:var(--bronze); opacity:0;}
.fond-racines .nodules circle{fill:var(--bronze); opacity:0;}

/* ---------- Fil racinaire de lecture ----------
   Injecté par le JS. Une radicelle cuivre pousse le long du bord gauche
   au rythme du défilement ; un nodule germe au passage de chaque section.
   C'est la barre de progression de quelqu'un qui pense en années. */
.fil{position:fixed; left:30px; top:0; bottom:0; width:10px; z-index:60; pointer-events:none;}
.fil .tige{
  position:absolute; top:0; left:4px; width:1.5px; height:100%;
  background:linear-gradient(var(--cuivre) 70%, var(--bronze));
  transform-origin:top; transform:scaleY(0); opacity:.45;
}
.fil .noeud{
  position:absolute; left:0; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--cuivre); background:transparent; opacity:.4;
  transition:background 1.2s var(--easing), opacity 1.2s var(--easing), box-shadow 1.2s var(--easing);
}
.fil .noeud.passe{background:var(--cuivre); opacity:.75; box-shadow:0 0 0 3px rgba(184,131,94,.14);}
@media (max-width:1220px){ .fil{display:none;} }

/* ---------- Chiffres clés ---------- */
.stat .num{font-family:var(--f-titre); font-weight:300; font-size:clamp(2.6rem,4.5vw,3.6rem); color:var(--sapin); line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums;}
.stat .num em{font-style:normal; color:var(--cuivre);}
.stat p{font-size:.97rem; color:var(--brun-cendre);}

/* ---------- Cards ---------- */
.card{
  background:var(--creme-leger); border:1px solid rgba(31,48,36,.08);
  border-radius:4px; padding:34px 30px;
  transition:border-color .9s var(--easing);
}
.card:hover{border-color:rgba(184,131,94,.45);}
.card h3{margin-bottom:10px; position:relative; padding-bottom:10px;}
.card h3::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--cuivre); transition:width 1s var(--easing);
}
.card:hover h3::after{width:38px;}
.card p{font-size:.97rem;}
.card .num-ord{font-family:var(--f-titre); color:var(--cuivre); font-size:1.05rem; display:block; margin-bottom:14px;}

/* ---------- Citation / manifeste ---------- */
.quote{position:relative; padding:8px 0 8px 36px;}
.quote::before{
  content:"«"; position:absolute; left:0; top:-4px;
  font-family:var(--f-titre); font-size:2.6rem; color:var(--cuivre); line-height:1;
}
.quote p{font-family:var(--f-titre); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.45; font-style:italic;}
.quote cite{display:block; margin-top:18px; font-family:var(--f-corps); font-size:.8rem; font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze);}

/* ---------- Frise des horizons (index) ----------
   L'argument central rendu sensible : sur vingt ans, la barre du fonds LBO
   s'arrête en 2031 ; celle du repreneur industriel se dissout ; celle de
   MyCor traverse la frise : et met VOLONTAIREMENT plus longtemps à se
   dessiner. La lenteur ici n'est pas un effet : c'est le propos. */
.horizons{margin-top:46px; max-width:880px;}
.h-frise{
  display:flex; justify-content:space-between;
  border-top:1px solid rgba(237,230,211,.18); padding-top:12px;
  font-size:.74rem; letter-spacing:.1em; color:var(--bronze);
}
.h-ligne{display:grid; grid-template-columns:170px 1fr; gap:20px; align-items:start; margin-top:34px;}
.h-nom{font-size:.88rem; opacity:.85; padding-top:0;}
.h-barre{position:relative; height:7px; background:rgba(237,230,211,.07); border-radius:2px;}
.h-barre .fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px;}
.f-lbo{background:var(--bronze); transition:width 1.5s var(--easing) .3s;}
.horizons.in .f-lbo{width:25%;}
.f-ind{background:var(--bronze); transition:width 1.1s var(--easing) .3s;}
.horizons.in .f-ind{width:10%;}
.h-dissout{
  position:absolute; left:10%; top:0; bottom:0; width:0;
  background:repeating-linear-gradient(90deg, rgba(196,164,122,.45) 0 5px, transparent 5px 11px);
  -webkit-mask-image:linear-gradient(90deg,#000, transparent);
          mask-image:linear-gradient(90deg,#000, transparent);
  transition:width 2.2s var(--easing) 1.3s;
}
.horizons.in .h-dissout{width:24%;}
/* 9 secondes : le temps que la frise MyCor prenne le temps. */
.f-mycor{
  background:linear-gradient(90deg, var(--cuivre) 72%, rgba(184,131,94,0));
  transition:width 9s var(--easing-long) .5s;
}
.horizons.in .f-mycor{width:100%;}
.h-marque{
  position:absolute; top:15px; font-size:.74rem; color:var(--bronze);
  opacity:0; transition:opacity 1.4s var(--easing);
  white-space:nowrap;
}
.m-lbo{left:25%; transform:translateX(-100%); transition-delay:1.9s;}
.m-ind{left:0; transition-delay:2.6s;}
.m-mycor{right:0; text-align:right; color:var(--cuivre); transition-delay:7.5s;}
.horizons.in .h-marque{opacity:.92;}
@media (max-width:880px){
  .h-ligne{grid-template-columns:1fr; gap:8px; margin-top:26px;}
  .h-marque{font-size:.7rem;}
}

/* ---------- Décorrélation (notre-approche) ----------
   Deux calendriers sur deux lignes : la cession du capital est un point ;
   la transmission opérationnelle est une durée. Les dissocier visuellement,
   c'est exactement ce que le modèle fait contractuellement. */
.decor{margin-top:44px; max-width:820px;}
.d-ligne{display:grid; grid-template-columns:230px 1fr; gap:20px; align-items:center; margin-top:38px;}
.d-nom{font-size:.88rem; color:var(--brun-cendre);}
.d-axe{position:relative; height:2px; background:rgba(31,48,36,.1);}
.d-point{
  position:absolute; top:50%; left:16%; width:13px; height:13px; border-radius:50%;
  background:var(--cuivre); transform:translate(-50%,-50%) scale(0);
  transition:transform 1s var(--easing) .5s;
}
.decor.in .d-point{transform:translate(-50%,-50%) scale(1);}
.d-point::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--cuivre); opacity:0;
}
.decor.in .d-point::after{animation:germer 2.4s var(--easing) 1.2s;}
.d-bande{
  position:absolute; top:-4px; height:10px; left:16%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--cuivre), var(--bronze) 80%, rgba(196,164,122,0));
  transition:width 5.5s var(--easing-long) .9s;
}
.decor.in .d-bande{width:62%;}
.d-marque{position:absolute; top:16px; font-size:.76rem; color:var(--brun-chaud); opacity:0; transition:opacity 1.4s var(--easing); white-space:nowrap;}
.d-m1{left:16%; transform:translateX(-50%); transition-delay:1.4s;}
.d-m2{left:46%; transition-delay:4.4s;}
.decor.in .d-marque{opacity:1;}
@keyframes germer{
  0%{opacity:0; transform:scale(.4);}
  35%{opacity:.7;}
  100%{opacity:0; transform:scale(2.1);}
}
@media (max-width:880px){
  .d-ligne{grid-template-columns:1fr; gap:10px; margin-top:30px;}
  .d-marque{font-size:.68rem;}
}

/* ---------- Refus (périmètre négatif) ---------- */
.refus{border-left:2px solid transparent; padding:6px 0 6px 24px; position:relative;}
.refus::before{
  content:""; position:absolute; left:-2px; top:0; width:2px; height:0;
  background:var(--cuivre); transition:height 1.6s var(--easing);
}
.refus.in::before{height:100%;}
.refus h3{font-family:var(--f-corps); font-weight:600; font-size:1.02rem;}
.refus p{font-size:.95rem; opacity:.88;}

/* ---------- Timeline (déroulé transmission) ----------
   La ligne pousse au rythme de la lecture (pilotée au scroll par le JS) :
   on ne peut pas la faire défiler plus vite qu'on ne lit. Chaque étape
   germe quand la racine l'atteint. */
.timeline{position:relative; padding-left:34px;}
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1.5px;
  background:linear-gradient(var(--cuivre), var(--cuivre)) no-repeat;
  background-size:100% var(--pousse, 0%);
}
.etape{position:relative; padding-bottom:42px;}
.etape:last-child{padding-bottom:0;}
.etape::before{
  content:""; position:absolute; left:-31px; top:8px; width:9px; height:9px;
  border-radius:50%; background:var(--creme); border:1.5px solid var(--cuivre);
  transition:background .9s var(--easing);
}
.etape::after{
  content:""; position:absolute; left:-35px; top:4px; width:17px; height:17px;
  border-radius:50%; border:1px solid var(--cuivre); opacity:0; pointer-events:none;
}
.etape.germe::before{background:var(--cuivre);}
.etape.germe::after{animation:germer 2s var(--easing);}
.etape .num-ord{font-family:var(--f-titre); color:var(--cuivre); font-size:.95rem;}
.etape h3{margin:4px 0 6px;}
.etape p{font-size:.97rem; color:var(--brun-cendre);}

/* ---------- Tableaux ---------- */
table{width:100%; border-collapse:collapse; font-size:.94rem;}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--creme-pierre); vertical-align:top;}
thead th{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brun-chaud); border-bottom:1.5px solid var(--bronze); font-weight:600;
}
td:first-child{font-weight:600; color:var(--sapin);}
.col-mycor{background:var(--creme-leger); transition:box-shadow 1.6s var(--easing) 1.2s;}
table.in .col-mycor{box-shadow:inset 0 0 0 1px rgba(184,131,94,.35);}
table .check{color:var(--cuivre); font-weight:600;}
/* Les lignes se révèlent l'une après l'autre : on lit un paysage, pas un verdict. */
table tbody tr{opacity:0; transform:translateY(10px); transition:opacity .9s var(--easing), transform .9s var(--easing);}
table.in tbody tr{opacity:1; transform:none;}
table.in tbody tr:nth-child(2){transition-delay:.25s;}
table.in tbody tr:nth-child(3){transition-delay:.5s;}
table.in tbody tr:nth-child(4){transition-delay:.75s;}
table.in tbody tr:nth-child(5){transition-delay:1s;}

/* ---------- Face-à-face craintes / engagements ----------
   La crainte apparaît d'abord, l'engagement répond après un temps :
   on écoute avant de répondre. Le délai est le message. */
.face{display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid rgba(237,230,211,.25);}
.face > div{padding:26px 28px;}
.face .crainte{opacity:0; transform:translateY(14px); transition:opacity 1s var(--easing), transform 1s var(--easing);}
.face.in .crainte{opacity:1; transform:none;}
.face .crainte p{font-family:var(--f-titre); font-style:italic; font-size:1.08rem; opacity:.85;}
.face .engagement{
  position:relative; border-left:1.5px solid transparent;
  opacity:0; transform:translateY(14px);
  transition:opacity 1s var(--easing) .9s, transform 1s var(--easing) .9s, border-color 1.2s var(--easing) .9s;
}
.face.in .engagement{opacity:1; transform:none; border-left-color:var(--cuivre);}
.face .engagement p{font-size:.97rem;}
.face .label{display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px;}
@media (max-width:880px){ .face{grid-template-columns:1fr;} .face .engagement{border-left:none; padding-top:0;} .face.in .engagement{border-left:none;} }

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--creme-pierre);}
summary{
  cursor:pointer; list-style:none; padding:22px 0;
  font-family:var(--f-titre); font-size:1.12rem; color:var(--sapin);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:var(--f-titre); color:var(--cuivre); font-size:1.4rem; transition:transform .5s var(--easing); flex-shrink:0;}
details[open] summary::after{transform:rotate(45deg);}
details .rep{padding:0 0 24px; font-size:.97rem; color:var(--brun-cendre); max-width:62ch; overflow:hidden;}

/* ---------- Équipe ---------- */
.portrait{
  aspect-ratio:4/4.6; border-radius:4px; margin-bottom:20px;
  background:linear-gradient(160deg, var(--creme-pierre) 0%, var(--bronze) 160%);
  display:flex; align-items:center; justify-content:center; padding:14px;
  color:var(--brun-chaud); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.portrait .mono{
  font-family:var(--f-titre); font-weight:300; font-size:3rem; letter-spacing:.06em;
  color:var(--sapin); opacity:.42;
}
.role{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brun-chaud); display:block; margin-bottom:6px;}
.capacite{font-size:1rem; color:var(--brun-cendre); max-width:60ch; line-height:1.6;}
.capacite strong{font-family:var(--f-titre); font-weight:400; color:var(--sapin);}
.cap-eyebrow{display:block; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brun-chaud); margin-bottom:8px;}

/* Maillage équipe : sous la grille, des liaisons fines se tracent entre les
   quatre cartes : la complémentarité, littéralement. */
.maillage{position:relative;}
.maillage svg.liens{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}
.maillage .grid{position:relative; z-index:1;}
.liens path{fill:none; stroke:var(--cuivre); stroke-width:1; opacity:.25;
  stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;}
.maillage.in .liens path{animation:dessiner 4s var(--easing) forwards;}
.maillage.in .liens path:nth-child(2){animation-delay:.6s;}
.maillage.in .liens path:nth-child(3){animation-delay:1.2s;}
.maillage.in .liens path:nth-child(4){animation-delay:1.8s;}

/* Schéma ombrelle (notre-approche) : les liens se tracent du groupe
   vers les entreprises, lentement : l'appartenance se tisse, ne s'impose pas. */
.ombrelle line{stroke-dasharray:1; stroke-dashoffset:1;}
.ombrelle.in line{animation:dessiner 2.6s var(--easing) forwards;}
.ombrelle.in line:nth-of-type(2){animation-delay:.5s;}
.ombrelle.in line:nth-of-type(3){animation-delay:1s;}
@media (prefers-reduced-motion: reduce){
  .ombrelle line{animation:none; stroke-dashoffset:0;}
}

/* ---------- Formulaire ---------- */
form{display:grid; gap:18px;}
label{font-size:.85rem; font-weight:600; color:var(--sapin); display:block; margin-bottom:6px;}
input,textarea{
  width:100%; padding:13px 15px; font-family:var(--f-corps); font-size:.97rem;
  border:1px solid rgba(31,48,36,.22); border-radius:3px; background:#FDFCF8; color:var(--charbon);
  transition:border-color .5s var(--easing), box-shadow .5s var(--easing);
}
input:focus,textarea:focus{outline:none; border-color:var(--cuivre); box-shadow:0 0 0 3px rgba(184,131,94,.12);}
textarea{min-height:140px; resize:vertical;}

/* ---------- Filigrane racinaire avant footer (injecté par le JS) ----------
   Ce qui se voit est porté par ce qui ne se voit pas : un fin réseau
   remonte vers le contenu au moment où l'on atteint le pied de page. */
.racines-foot{display:block; width:100%; height:90px; margin-bottom:-6px;}
.racines-foot path{
  fill:none; stroke:var(--cuivre); stroke-width:1; opacity:.22;
  stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;
}
.racines-foot.in path{animation:dessiner 7s var(--easing-long) forwards;}
.racines-foot.in path:nth-child(2){animation-delay:.8s;}
.racines-foot.in path:nth-child(3){animation-delay:1.6s;}

/* ---------- Footer ---------- */
footer{background:var(--sapin-profond); color:var(--creme-pierre); padding:64px 0 40px; margin-top:0;}
footer .logo{color:var(--creme-pierre);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:44px;}
footer a{color:var(--creme-pierre); opacity:.85; font-size:.92rem;}
footer a:hover{opacity:1; color:var(--bronze);}
footer ul{list-style:none; display:grid; gap:10px; margin-top:14px;}
footer .col-titre{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze);}
.foot-legal{border-top:1px solid rgba(237,230,211,.15); padding-top:24px; font-size:.8rem; opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
@media (max-width:880px){ .foot-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   Révélations au scroll : lentes, une seule fois, jamais spectaculaires.
   Déplacement court (18px), durée longue (1.05s) : on émerge, on ne surgit pas.
   ========================================================================== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 1.05s var(--easing), transform 1.05s var(--easing);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.15s;}
.reveal[data-d="2"]{transition-delay:.3s;}
.reveal[data-d="3"]{transition-delay:.45s;}
.reveal[data-d="4"]{transition-delay:.6s;}

/* ---------- Adaptations WordPress (Contact Form 7) ----------
   Le formulaire CF7 hérite des styles input/textarea/label de la charte.
   On corrige seulement ce que CF7 impose : bouton en pleine largeur,
   messages de validation, aux couleurs de la charte. */
input.wpcf7-submit{width:auto; cursor:pointer; font-family:var(--f-corps);}
.wpcf7 form{display:grid; gap:18px;}
.wpcf7 form .wpcf7-response-output{
  margin:0; padding:12px 15px; border:1px solid var(--cuivre);
  border-radius:3px; font-size:.9rem; color:var(--brun-cendre);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:var(--brun-chaud); color:var(--brun-chaud);}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--sapin); color:var(--sapin);}
.wpcf7-not-valid-tip{font-size:.82rem; color:var(--brun-chaud); margin-top:6px;}
.wpcf7-spinner{background-color:var(--cuivre);}

/* ==========================================================================
   prefers-reduced-motion : tout le contenu reste lisible, rien ne bouge.
   Le canvas est rendu en une fois (état final) par le JS.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .reveal,.mots .mot > span,.face .crainte,.face .engagement,table tbody tr{opacity:1; transform:none; transition:none;}
  .racines-foot path,.maillage .liens path,.reseau-hero path,.fond-racines path,.fond-racines.in path{animation:none; stroke-dashoffset:0;}
  .reseau-hero .nodules circle,.fond-racines .nodules circle{opacity:.55;}
  .reseau-hero .seve,.fond-racines .seve{display:none;}
  .timeline::before{background-size:100% 100%;}
  .etape::before{background:var(--cuivre);}
  .etape::after,.d-point::after{animation:none; opacity:0;}
  .horizons .fill,.h-dissout,.h-marque,.d-bande,.d-point,.d-marque{transition:none;}
  .horizons.in .f-lbo{width:25%;} .horizons.in .f-ind{width:10%;}
  .horizons.in .h-dissout{width:24%;} .horizons.in .f-mycor{width:100%;}
  .decor.in .d-point{transform:translate(-50%,-50%) scale(1);}
  .decor.in .d-bande{width:62%;}
  .refus::before{transition:none;} .refus.in::before{height:100%;}
  .fil{display:none;}
  body.sortie{opacity:1; transition:none;}
  html{scroll-behavior:auto;}
}