/* ==========================================================================
   Les In10pensables — couche d'expérience du site public
   « Le fil cuivré » : lumière, transparence, profondeur, réseau, mouvement.

   Chargée après site-public-global.css. Ne change ni texte, ni lien, ni
   formulaire, ni donnée. Pour revenir à la version précédente, retirer le
   <link> de cette feuille et le <script> site-public-experience.js.

   Sommaire
   00  Fondations (jetons, toile, apparitions)
   01  En-tête (barre, capsule au défilement, indicateur de page, fil de lecture)
   02  Boutons (profondeur, reflet)
   03  Surtitres et filets qui se dessinent
   04  Système de lueur des cartes (survol)
   05  Réseau (fils, nœuds, signaux) et auras de lumière
   06  Accueil
   07  L'Accompagnement
   08  Le Collectif
   09  Formations
   10  Rejoindre
   11  Pied de page
   12  Mouvement réduit
   ========================================================================== */

/* 00 — Fondations ---------------------------------------------------------- */
:root{
  --fx-copper:#b87554;
  --fx-copper-deep:#94553a;
  --fx-wine:#754130;
  --fx-ink:#563222;
  --fx-champagne:#f2c7ac;
  --fx-peach:#e4ad86;
  --fx-canvas:#faf5ee;
  --fx-glow:228,173,134;
  --fx-ease:cubic-bezier(.22,.61,.36,1);
  --fx-out:cubic-bezier(.16,1,.3,1);
  --fx-line:rgba(117,65,48,.13);
  --fx-rest:0 1px 2px rgba(60,37,25,.04),0 16px 32px -20px rgba(60,37,25,.22);
  --fx-lift:0 1px 2px rgba(60,37,25,.05),0 34px 50px -28px rgba(148,85,58,.5);
  --fx-radius:30px;
}

/* La toile du site est une seule teinte ivoire : les lumières sont peintes
   section par section, de sorte qu'aucune jointure ne soit visible. */
body{background:var(--fx-canvas)}
#p-home,#p-enterprise,#p-network,#p-contact,#p-join,#p-training{background:transparent}
main{position:relative;overflow-x:clip}

/* Apparitions au défilement (posées par le script, jamais sans lui). */
html.fx .fx-reveal:not(.fx-in){opacity:0}

/* Entrée de page : le contenu du bandeau se pose par étapes. */
@keyframes fx-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
html.fx .page.active .fx-stage>*{animation:fx-rise 1s var(--fx-out) both}
html.fx .page.active .fx-stage>*:nth-child(1){animation-delay:.05s}
html.fx .page.active .fx-stage>*:nth-child(2){animation-delay:.14s}
html.fx .page.active .fx-stage>*:nth-child(3){animation-delay:.24s}
html.fx .page.active .fx-stage>*:nth-child(4){animation-delay:.34s}
html.fx .page.active .fx-stage>*:nth-child(5){animation-delay:.44s}

/* 01 — En-tête -------------------------------------------------------------
   Au repos : barre ivoire translucide. Au défilement : la barre disparaît et
   le menu devient une capsule de verre flottante, plus compacte. */
#hdr{
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  pointer-events:none;
}
#hdr .navbar{
  position:relative;pointer-events:auto;
  width:min(1280px,calc(100% - 48px));margin:0 auto;padding:10px 6px 10px 6px;
  border-radius:0;border:1px solid transparent;
  background:transparent;
  transition:width .7s var(--fx-out),margin .7s var(--fx-out),padding .7s var(--fx-out),
    border-radius .7s var(--fx-out),background .5s var(--fx-ease),box-shadow .5s var(--fx-ease),border-color .5s var(--fx-ease);
}
/* Voile ivoire pleine largeur, visible seulement tout en haut de page. */
#hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,245,.94),rgba(255,250,245,.84));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid rgba(117,65,48,.08);
  transition:opacity .45s var(--fx-ease),transform .6s var(--fx-out);
}
#hdr.scrolled::before{opacity:0;transform:translateY(-14px)}
#hdr .brand img{transition:width .7s var(--fx-out)}
#hdr nav{position:relative}
#hdr nav button{position:relative;background:transparent!important;color:#5c4034;transition:color .3s var(--fx-ease)}
#hdr nav button:not(.hot):hover,#hdr nav button:not(.hot).active{color:var(--fx-wine);background:transparent!important}
#hdr nav .hot{background:linear-gradient(180deg,#85503b,#67372a)!important;color:#fff;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px -10px rgba(85,42,28,.6);
  transition:transform .35s var(--fx-out),box-shadow .35s var(--fx-ease)}
#hdr nav .hot:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 24px -12px rgba(85,42,28,.7),0 0 0 4px rgba(184,117,84,.14)}

/* Indicateur glissant : un filet cuivre se déplace sous l'entrée survolée,
   puis revient sur la page active. */
.fx-ink{
  position:absolute;left:0;bottom:1px;height:2px;width:var(--w,0px);
  transform:translate3d(var(--x,0px),0,0);pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,rgba(184,117,84,0),var(--fx-copper) 22%,var(--fx-peach) 50%,var(--fx-copper) 78%,rgba(184,117,84,0));
  box-shadow:0 0 12px rgba(var(--fx-glow),.7);
  opacity:0;transition:transform .55s var(--fx-out),width .55s var(--fx-out),opacity .3s var(--fx-ease);
}
.fx-ink.is-on{opacity:1}

/* Fil de lecture : un filet de lumière qui suit l'avancée dans la page. */
.fx-progress{
  position:absolute;left:28px;right:28px;bottom:-1px;height:2px;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:left;opacity:0;
  background:linear-gradient(90deg,rgba(184,117,84,0),var(--fx-copper) 18%,var(--fx-champagne));
  transition:opacity .4s var(--fx-ease);
}
#hdr.scrolled .fx-progress{opacity:.9}

@media(min-width:1001px){
  #hdr.scrolled .navbar{
    width:min(1120px,calc(100% - 48px));margin-top:12px;padding:6px 16px 6px 22px;
    border-radius:28px;border-color:rgba(255,255,255,.75);
    background:linear-gradient(135deg,rgba(255,252,248,.9),rgba(251,242,233,.8));
    -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
    box-shadow:0 22px 40px -24px rgba(60,32,20,.38),0 0 0 1px rgba(184,117,84,.14),inset 0 1px 0 rgba(255,255,255,.9);
  }
  #hdr.scrolled .brand img{width:128px!important}
}
@media(max-width:1000px){
  #hdr .navbar{width:calc(100% - 32px)}
  #hdr.scrolled .navbar{
    margin-top:8px;padding:5px 12px 5px 16px;border-radius:22px;border-color:rgba(255,255,255,.75);
    background:linear-gradient(135deg,rgba(255,252,248,.93),rgba(251,242,233,.86));
    -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:0 18px 32px -22px rgba(60,32,20,.4),0 0 0 1px rgba(184,117,84,.14),inset 0 1px 0 rgba(255,255,255,.9);
  }
  #hdr.scrolled .brand img{width:104px!important}
  #hdr nav{pointer-events:auto}
  .fx-ink{display:none}
  .fx-progress{left:20px;right:20px}
}

/* 02 — Boutons --------------------------------------------------------------
   Un peu de matière (dégradé et lumière sur l'arête haute) et un reflet qui
   traverse le bouton au survol. */
.public-button,.btn,.catalog-detail-button,.catalog-close{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--fx-out),box-shadow .45s var(--fx-ease),background-color .3s var(--fx-ease),border-color .3s var(--fx-ease),color .3s var(--fx-ease)!important;
}
.public-button::after,.btn::after,.catalog-detail-button::after{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.34) 48%,rgba(255,236,220,.28) 54%,transparent 68%);
  transform:translate3d(-130%,0,0);transition:transform 0s;
}
.public-button:hover::after,.btn:hover::after,.catalog-detail-button:hover::after{
  transform:translate3d(130%,0,0);transition:transform 1.05s var(--fx-ease);
}
.public-button:active,.btn:active,.catalog-detail-button:active{transform:translateY(0) scale(.985)!important}
.public-button-primary,.btn.primary{
  background:linear-gradient(180deg,#8d4e39,#6b3828)!important;border-color:#6b3828!important;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(60,32,20,.25),0 14px 22px -14px rgba(85,42,28,.6)!important;
}
.public-button-primary:hover,.btn.primary:hover{
  transform:translateY(-2px)!important;
  background:linear-gradient(180deg,#9a5640,#744030)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(60,32,20,.25),0 20px 28px -14px rgba(85,42,28,.65),0 0 0 4px rgba(184,117,84,.16)!important;
}
.btn.primary{background:linear-gradient(180deg,#c3815d,#a05a3b)!important;border-color:#a05a3b!important}
.btn.primary:hover{background:linear-gradient(180deg,#cd8b66,#aa6141)!important}
.public-button-quiet{background:rgba(255,250,245,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.public-button-quiet::after,.catalog-detail-button::after{background:linear-gradient(105deg,transparent 34%,rgba(184,117,84,.2) 50%,transparent 66%)}
.btn.glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38)}
.btn.glass:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

/* 03 — Surtitres et filets qui se dessinent ------------------------------ */
.public-eyebrow{display:inline-flex!important;align-items:center;gap:14px}
.public-eyebrow::before{
  content:"";flex:none;width:34px;height:1px;background:currentColor;opacity:.75;
  transform-origin:left;transition:transform 1.1s var(--fx-out) .15s;
}
html.fx .fx-reveal:not(.fx-in) .public-eyebrow::before,
html.fx .fx-reveal:not(.fx-in) .kicker::before{transform:scaleX(0)}
.kicker::before{transform-origin:left;transition:transform 1.1s var(--fx-out) .15s}
/* Dans les bandeaux, le surtitre est lu en clair sur fond photo. */
.public-network-hero .public-eyebrow::before{opacity:.5}

/* 04 — Lueur des cartes -------------------------------------------------------
   Au survol, une lumière chaude suit le curseur et une bordure cuivre s'allume
   là où il se trouve. Deux calques seulement, posés en pseudo-éléments. */
.fx-lit{position:relative}
.fx-lit::before,.fx-lit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .6s var(--fx-ease);
}
.fx-lit::before{
  z-index:2;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(var(--fx-glow),.26),rgba(var(--fx-glow),.07) 42%,transparent 68%);
}
.fx-lit::after{
  z-index:3;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(184,117,84,.9),rgba(184,117,84,.25) 45%,rgba(184,117,84,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.fx-lit:hover::before,.fx-lit:hover::after,.fx-lit:focus-within::after{opacity:1}
@media(hover:none){.fx-lit::before,.fx-lit::after{display:none!important}}

/* 05 — Réseau : fils, nœuds, signaux, auras ------------------------------------
   Le motif du Collectif est repris ailleurs sous trois formes différentes :
   - une constellation (bandeau du Collectif) ;
   - une chaîne (les étapes numérotées et les séparateurs de sections) ;
   - un maillage clairsemé et très lent (fonds sombres : message, pied de page).
   Les tracés se dessinent une fois. Ensuite le réseau reste calme : toutes les
   quelques secondes, un seul nœud bat et, parfois, une étincelle suit un tracé. */
.fx-net{position:absolute;pointer-events:none;overflow:visible;color:var(--fx-copper-deep);z-index:0}
.fx-net .fx-edge{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-opacity:.42;stroke-dasharray:1;stroke-dashoffset:0}
.fx-net .fx-node{fill:currentColor;fill-opacity:.8;transform-box:fill-box;transform-origin:center}
.fx-net .fx-halo{fill:currentColor;fill-opacity:.1;transform-box:fill-box;transform-origin:center}
.fx-net .fx-spark-glow{fill:var(--fx-champagne);fill-opacity:.28}
.fx-net .fx-spark-core{fill:#ffe9d6}
html.fx .fx-net:not(.fx-in) .fx-edge{stroke-dashoffset:1}
html.fx .fx-net:not(.fx-in) .fx-nodeg{opacity:0;transform:scale(.2)}
html.fx .fx-net.fx-in .fx-edge{animation:fx-draw 2.8s var(--fx-out) both;animation-delay:calc(var(--i,0)*.075s + .15s)}
html.fx .fx-net.fx-in .fx-nodeg{transform-box:fill-box;transform-origin:center;animation:fx-node-in 1.3s var(--fx-out) both;animation-delay:calc(var(--i,0)*.075s + .75s)}
html.fx .fx-net .fx-nodeg.is-beat .fx-node{animation:fx-breathe 3.4s var(--fx-ease) 1}
html.fx .fx-net .fx-nodeg.is-beat .fx-halo{animation:fx-halo 4.2s var(--fx-ease) 1}
html.fx .fx-net.fx-off *{animation-play-state:paused!important}
@keyframes fx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fx-node-in{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes fx-breathe{0%,100%{fill-opacity:inherit;transform:scale(1)}45%{fill-opacity:1;transform:scale(1.7)}}
@keyframes fx-halo{0%,100%{fill-opacity:.1;transform:scale(1)}45%{fill-opacity:.3;transform:scale(1.9)}}

/* Constellation sur fond clair (bandeau du Collectif). */
.fx-net--hero{right:0;top:0;bottom:0;width:66%;height:100%;color:#8b4f37}
.fx-net--hero .fx-edge{stroke-opacity:.3}
/* Maillage sur fond sombre : plus clair, très lent. */
.fx-net--dark{color:#f2c7ac}
.fx-net--dark .fx-edge{stroke-opacity:.22}
.fx-net--dark .fx-node{fill-opacity:.55}
/* Maillage sur fond clair, en filigrane. */
.fx-net--soft{color:#a8664a}
.fx-net--soft .fx-edge{stroke-opacity:.17}
.fx-net--soft .fx-node{fill-opacity:.32}

/* Fil de séparation entre deux sections : il se dessine d'un nœud à l'autre,
   puis une impulsion lumineuse le parcourt une fois. */
.fx-thread{position:relative;z-index:2;display:block;width:min(1220px,calc(100% - 48px));height:34px;margin:-17px auto;pointer-events:none}
.fx-thread-line{
  position:absolute;left:0;right:0;top:50%;height:1px;transform-origin:left;
  background:linear-gradient(90deg,rgba(184,117,84,0),rgba(184,117,84,.55) 12%,rgba(184,117,84,.55) 88%,rgba(184,117,84,0));
}
.fx-thread-node{
  position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--fx-copper);box-shadow:0 0 0 4px rgba(184,117,84,.12);
}
.fx-thread-node.is-main{
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  background:radial-gradient(circle at 35% 30%,#f2c7ac,#b87554 62%,#94553a);
  box-shadow:0 0 0 6px rgba(184,117,84,.13),0 0 22px rgba(var(--fx-glow),.8);
}
.fx-thread-pulse{
  position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,226,200,.95) 50%,transparent) 0 0/18% 100% no-repeat;
}
html.fx .fx-thread:not(.fx-in) .fx-thread-line{transform:scaleX(0)}
html.fx .fx-thread:not(.fx-in) .fx-thread-node{transform:scale(0)}
html.fx .fx-thread .fx-thread-line{transition:transform 2.4s var(--fx-out)}
html.fx .fx-thread .fx-thread-node{transition:transform .9s var(--fx-out) calc(var(--n,0)*.9s + .25s)}
html.fx .fx-thread.fx-in .fx-thread-pulse{animation:fx-pulse 3.4s var(--fx-ease) 1.3s 1 both}
@keyframes fx-pulse{0%{opacity:1;background-position:0 0}85%{opacity:1}100%{opacity:0;background-position:100% 0}}

/* Auras : de larges lumières chaudes, peintes derrière le contenu. */
.fx-has-aura{position:relative;isolation:isolate}
.fx-aura{
  position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:var(--s,620px);height:var(--s,620px);
  background:radial-gradient(closest-side,rgba(var(--fx-glow),var(--a,.2)),rgba(var(--fx-glow),calc(var(--a,.2)*.4)) 45%,rgba(var(--fx-glow),0) 100%);
  transform:translate3d(0,var(--fx-ty,0px),0);will-change:transform;
}

/* Lumière suivant doucement le curseur dans les bandeaux. */
.fx-spot{
  position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,226,200,.34),rgba(255,226,200,.1) 55%,rgba(255,226,200,0));
  opacity:0;transition:opacity .9s var(--fx-ease);will-change:transform,opacity;
}
.fx-spot.is-on{opacity:1}
.fx-spot--cool{background:radial-gradient(closest-side,rgba(184,117,84,.2),rgba(184,117,84,.06) 55%,rgba(184,117,84,0))}

/* Reflet lent qui traverse certains bandeaux sombres : un seul passage à l'arrivée sur la page. */
.fx-sweep{position:absolute;inset:-20% -30%;z-index:1;pointer-events:none;opacity:0;overflow:hidden}
.fx-sweep::before{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,236,220,.09) 40%,rgba(255,236,220,.16) 50%,rgba(255,236,220,.09) 60%,transparent);
  transform:skewX(-14deg) translate3d(0,0,0);
}
html.fx .fx-sweep{opacity:1}
html.fx .fx-sweep::before{animation:fx-sweep 8s var(--fx-ease) 1.8s 1 both}
@keyframes fx-sweep{0%{transform:skewX(-14deg) translate3d(0,0,0)}100%{transform:skewX(-14deg) translate3d(520%,0,0)}}

/* 06 — Accueil ------------------------------------------------------------------
   Le bandeau devient une fenêtre arrondie posée sur la toile ivoire. Un panneau
   de verre clair la traverse par le bas et déborde sur la section suivante. */
#p-home .public-home-hero{padding:154px 0 0;background:transparent;position:relative;z-index:3;overflow:visible}
#p-home .public-home-photo{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(1340px,calc(100% - 56px));height:clamp(500px,38vw,580px);margin:0 auto;
  border-radius:var(--fx-radius);background:#49332d;
  box-shadow:0 70px 80px -64px rgba(60,32,20,.65),0 2px 6px rgba(60,32,20,.1);
}
#p-home .public-home-photo img{
  position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:center 31%;
  transform:translate3d(0,var(--fx-py,0px),0);will-change:transform;
}
#p-home .public-home-photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 70% at 90% -10%,rgba(255,226,200,.3),transparent 62%),linear-gradient(180deg,rgba(43,26,19,0) 55%,rgba(43,26,19,.3));
}
#p-home .public-home-band{
  position:relative;z-index:4;width:min(1160px,calc(100% - 128px));margin:-138px auto -68px;padding:42px 50px 44px;
  border:1px solid rgba(255,255,255,.72);border-radius:32px;color:var(--fx-ink);
  background:linear-gradient(135deg,rgba(255,252,248,.86),rgba(250,238,226,.68));
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:0 56px 70px -46px rgba(60,32,20,.6),0 0 0 1px rgba(184,117,84,.1),inset 0 1px 0 rgba(255,255,255,.95);
}
#p-home .public-home-band::before{
  content:"";position:absolute;left:56px;right:56px;top:-1px;height:1px;
  background:linear-gradient(90deg,rgba(184,117,84,0),rgba(184,117,84,.75) 30%,rgba(242,199,172,.9) 55%,rgba(184,117,84,0));
}
#p-home .public-home-band .public-wrap{width:100%}
#p-home .public-home-band .public-eyebrow{color:#94593f}
#p-home .public-hero-copy>h1{color:var(--fx-ink);font-size:clamp(36px,3.6vw,56px)}
#p-home .public-hero-copy>h1 em{color:var(--fx-copper);background:linear-gradient(100deg,#a8613f,#d39a74 55%,#b87554);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#p-home .public-hero-copy>.public-intro{color:#5a4538}
#p-home .public-button-primary{color:#fff;border-color:#6b3828}
#p-home .public-button-quiet{background:rgba(255,255,255,.5);border-color:rgba(117,65,48,.42);color:var(--fx-wine)}
#p-home .public-button-quiet:hover{background:rgba(255,255,255,.95);border-color:var(--fx-copper)}

/* Récit : le texte repose sur un panneau clair, la section se fond dans les voisines. */
#p-home .public-story-stage{
  position:relative;z-index:1;isolation:isolate;padding-top:68px;margin-top:0;
  background:linear-gradient(180deg,rgba(234,214,196,0) 0,rgba(234,214,196,.5) 180px,rgba(242,228,215,.62) calc(100% - 180px),rgba(250,245,238,0) 100%);
}
#p-home .public-story-stage .public-section{padding-top:clamp(70px,7vw,100px);padding-bottom:clamp(90px,9vw,130px)}
#p-home .public-home-story .public-story-text{
  position:relative;padding:44px 46px 36px;border:1px solid rgba(255,255,255,.8);border-left:1px solid rgba(255,255,255,.8);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,252,248,.78),rgba(255,247,240,.5));
  box-shadow:var(--fx-rest),inset 0 1px 0 rgba(255,255,255,.95);
}
#p-home .public-home-story .public-story-text::before{
  content:"";position:absolute;left:46px;top:-1px;width:86px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--fx-copper),rgba(242,199,172,.2));
}
#p-home .public-home-story .public-story-quote{border-top-color:rgba(117,65,48,.16)}
#p-home .public-home-story::before{display:none}

/* Les trois étapes : un fil relie les numéros, ils s'allument tour à tour. */
#p-home>.public-soft-band{background:transparent}
.public-card>span{
  background:linear-gradient(135deg,#dba37e 0%,#b87554 46%,#8a4d38 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  background-size:140% 140%;background-position:0 0;transition:background-position 1.4s var(--fx-ease);
}
.public-card:hover>span{background-position:100% 100%}

@media(min-width:1001px){
  :is(#p-home,#p-enterprise) .public-card-grid{--fx-gap:clamp(28px,4vw,64px);gap:var(--fx-gap);margin-top:56px}
  :is(#p-home,#p-enterprise) .public-card,
  :is(#p-home,#p-enterprise) .public-card:first-child{
    position:relative;padding:50px 0 12px!important;border:0!important;border-radius:0;background:none!important;box-shadow:none;
    transition:transform .6s var(--fx-out);
  }
  :is(#p-home,#p-enterprise) .public-card:hover{transform:translateY(-4px)}
  /* le fil */
  :is(#p-home,#p-enterprise) .public-card::before,
  :is(#p-home,#p-enterprise) .public-card:not(:last-child)::before{
    content:"";position:absolute;left:5px;top:10px;width:calc(100% + var(--fx-gap) - 5px);height:1px;
    background:linear-gradient(90deg,rgba(184,117,84,.8),rgba(184,117,84,.3) 70%,rgba(184,117,84,.55));
    transform-origin:left;
  }
  :is(#p-home,#p-enterprise) .public-card:last-child::before{width:calc(100% - 5px);background:linear-gradient(90deg,rgba(184,117,84,.8),rgba(184,117,84,0))}
  /* le nœud */
  :is(#p-home,#p-enterprise) .public-card::after,
  :is(#p-home,#p-enterprise) .public-card:not(:last-child)::after{
    content:"";position:absolute;left:0;top:5px;right:auto;width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#f2c7ac,#b87554 62%,#94553a);
    box-shadow:0 0 0 5px rgba(184,117,84,.13),0 0 18px rgba(var(--fx-glow),.75);
    font-size:0;opacity:1;
    transition:box-shadow .6s var(--fx-ease),transform .6s var(--fx-out);
  }
  :is(#p-home,#p-enterprise) .public-card:hover::after{box-shadow:0 0 0 8px rgba(184,117,84,.16),0 0 28px rgba(var(--fx-glow),.95);transform:scale(1.12)}
  html.fx :is(#p-home,#p-enterprise) .public-card.fx-reveal:not(.fx-in)::before{transform:scaleX(0)}
  html.fx :is(#p-home,#p-enterprise) .public-card.fx-reveal:not(.fx-in)::after{transform:scale(0)}
  html.fx :is(#p-home,#p-enterprise) .public-card.fx-reveal::before{transition:transform 1.5s var(--fx-out) calc(var(--fx-d,0s) + .25s)}
  html.fx :is(#p-home,#p-enterprise) .public-card.fx-reveal::after{transition:transform .9s var(--fx-out) var(--fx-d,0s),box-shadow .6s var(--fx-ease)}
}

/* Appel final : un panneau de verre qui respire dans la page. */
#p-home .public-end-cta{
  position:relative;isolation:isolate;overflow:hidden;width:min(1220px,calc(100% - 48px));
  margin:clamp(20px,3vw,48px) auto clamp(80px,9vw,130px);padding:clamp(40px,5vw,66px) clamp(28px,5vw,68px);
  border:1px solid rgba(255,255,255,.85);border-radius:36px;
  background:linear-gradient(125deg,rgba(255,252,248,.82),rgba(247,230,213,.62));
  box-shadow:var(--fx-rest),inset 0 1px 0 rgba(255,255,255,.95);
}
#p-home .public-end-cta>div:not(.fx-aura){position:relative;z-index:1}
#p-home .public-end-cta .public-button{position:relative;z-index:1}

@media(max-width:1000px){
  #p-home .public-home-hero{padding-top:136px}
  #p-home .public-home-photo{height:clamp(420px,54vw,540px)}
  #p-home .public-home-band{width:min(100% - 48px,860px);margin:-112px auto -52px;padding:34px 36px 36px}
}
@media(max-width:760px){
  #p-home .public-home-hero{padding-top:130px}
  #p-home .public-home-photo{width:calc(100% - 24px);height:auto;aspect-ratio:1593/987;border-radius:22px}
  #p-home .public-home-photo img{top:0;height:100%;object-fit:cover;transform:none}
  #p-home .public-home-band{width:calc(100% - 32px);margin:-34px auto -40px;padding:26px 22px 28px;border-radius:24px}
  #p-home .public-home-band::before{left:28px;right:28px}
  #p-home .public-story-stage{padding-top:48px}
  #p-home .public-home-story .public-story-text{padding:32px 24px 26px;border-radius:22px}
  #p-home .public-home-story .public-story-text::before{left:24px}
  #p-home .public-end-cta{border-radius:26px;margin-bottom:70px}
}

#p-home .fx-net--cta{right:-3%;top:-6%;width:64%;height:112%;opacity:.9}
@media(max-width:1000px){#p-home .fx-net--cta{width:90%;opacity:.55}}

/* 07 — L'Accompagnement ---------------------------------------------------------
   Même principe de fenêtre que l'accueil, mais en version sombre : le texte
   repose sur un panneau de verre fumé. */
#p-enterprise .public-enterprise-hero{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(1340px,calc(100% - 56px));margin:154px auto 0;min-height:500px;padding:64px 0;
  display:flex;align-items:center;border-radius:var(--fx-radius);
  box-shadow:0 70px 80px -64px rgba(60,32,20,.7),0 2px 6px rgba(60,32,20,.12);
}
#p-enterprise .public-enterprise-hero::before{
  display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 90% at 92% 0%,rgba(255,214,184,.2),transparent 62%),linear-gradient(180deg,rgba(43,26,19,0) 60%,rgba(43,26,19,.35));
}
#p-enterprise .public-enterprise-hero .public-inner-hero-content{
  position:relative;z-index:2;width:auto;max-width:720px;margin:0 0 0 clamp(24px,6vw,84px);padding:42px 48px 46px;
  border:1px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.34);border-radius:28px;
  background:linear-gradient(140deg,rgba(255,250,245,.17),rgba(255,250,245,.05));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 44px 60px -40px rgba(0,0,0,.7);
}
#p-enterprise .public-enterprise-hero h1{font-size:clamp(40px,4.2vw,60px)}
#p-enterprise .public-enterprise-hero .public-button-primary{
  background:linear-gradient(180deg,#fffdf9,#f6e5d6)!important;border-color:#fffaf5!important;color:#563222;
  box-shadow:inset 0 1px 0 #fff,0 14px 24px -14px rgba(0,0,0,.6)!important;
}
#p-enterprise .public-enterprise-hero .public-button-primary:hover{background:linear-gradient(180deg,#fff,#f9ebdd)!important;box-shadow:inset 0 1px 0 #fff,0 22px 30px -14px rgba(0,0,0,.65),0 0 0 4px rgba(255,226,200,.2)!important}
#p-enterprise .public-enterprise-hero .public-button-quiet{background:rgba(255,250,245,.1);border-color:rgba(255,250,245,.55);color:#fff}
#p-enterprise .public-enterprise-hero .public-button-quiet::after{background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.3) 50%,transparent 66%)}
#p-enterprise .public-enterprise-hero .public-button-quiet:hover{background:rgba(255,250,245,.22);border-color:rgba(255,250,245,.85)}

/* Titre de section et étapes (le fil et les nœuds sont définis en 06). */
#p-enterprise .public-section.public-wrap:first-of-type{padding-top:clamp(80px,8vw,118px)}
#p-enterprise .public-card:not(:last-child)::after{font-family:inherit}

/* Audit : fond qui se fond dans les voisins ; le texte « À l'issue » devient un petit panneau. */
#p-enterprise #audit-option{
  background:linear-gradient(180deg,rgba(236,216,198,0) 0,rgba(236,216,198,.5) 170px,rgba(243,229,216,.6) calc(100% - 170px),rgba(250,245,238,0) 100%);
}
#p-enterprise .public-report{
  padding:20px 24px;border-left:0;border-radius:20px;
  background:linear-gradient(145deg,rgba(255,252,248,.8),rgba(255,247,240,.55));
  box-shadow:var(--fx-rest),inset 0 1px 0 rgba(255,255,255,.95);position:relative;
}
#p-enterprise .public-report::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--fx-copper),rgba(242,199,172,.3))}
#p-enterprise .public-audit-aside{padding-left:34px;border-left:0;position:relative}
#p-enterprise .public-audit-aside::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(184,117,84,0),rgba(184,117,84,.6) 25%,rgba(184,117,84,.4) 75%,rgba(184,117,84,0));
}
#p-enterprise .public-audit-aside li{position:relative;transition:transform .5s var(--fx-out),color .4s var(--fx-ease);border-top-color:rgba(117,65,48,.1)}
#p-enterprise .public-audit-aside li::before{
  content:"";position:absolute;left:-34px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;
  background:var(--fx-copper);box-shadow:0 0 0 4px rgba(184,117,84,.12);transform:scale(0);transition:transform .5s var(--fx-out);
}
#p-enterprise .public-audit-aside li:hover{transform:translateX(6px);color:var(--fx-wine)}
#p-enterprise .public-audit-aside li:hover::before{transform:scale(1)}

/* Formulaire : panneau clair, lumière derrière, champs qui s'allument. */
#p-enterprise .public-request-grid{position:relative}
#p-enterprise .public-form{
  position:relative;border:1px solid rgba(255,255,255,.9);border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,250,245,.78));
  box-shadow:0 1px 2px rgba(60,37,25,.05),0 50px 70px -44px rgba(117,65,48,.5),inset 0 1px 0 #fff;
}
#p-enterprise .public-field label{transition:color .3s var(--fx-ease)}
#p-enterprise .public-field:focus-within label{color:var(--fx-copper-deep)}
#p-enterprise .public-field input,#p-enterprise .public-field textarea{
  background:rgba(255,253,250,.9);transition:border-color .35s var(--fx-ease),box-shadow .45s var(--fx-ease),background-color .35s var(--fx-ease);
}
#p-enterprise .public-field input:hover,#p-enterprise .public-field textarea:hover{border-color:rgba(184,117,84,.45)}
#p-enterprise .public-field input:focus,#p-enterprise .public-field textarea:focus{
  background:#fff;border-color:var(--fx-copper);box-shadow:0 0 0 4px rgba(184,117,84,.14),0 12px 24px -16px rgba(184,117,84,.6);
}
#p-enterprise .public-whatsapp{background:linear-gradient(145deg,rgba(255,250,245,.7),rgba(251,243,235,.4));border-color:rgba(117,65,48,.22)}

@media(max-width:1000px){
  #p-enterprise .public-enterprise-hero{margin-top:136px;min-height:0;padding:48px 0}
  #p-enterprise .public-enterprise-hero .public-inner-hero-content{margin-left:clamp(20px,5vw,48px);margin-right:clamp(20px,5vw,48px);max-width:none;padding:34px 34px 38px}
}
@media(max-width:760px){
  #p-enterprise .public-enterprise-hero{width:calc(100% - 24px);margin-top:130px;border-radius:22px;padding:22px 0}
  #p-enterprise .public-enterprise-hero .public-inner-hero-content{margin:0 14px;padding:28px 22px 30px;border-radius:22px}
  #p-enterprise .public-enterprise-hero h1{font-size:clamp(34px,9vw,42px)}
  #p-enterprise .public-audit-aside{padding-left:0}
  #p-enterprise .public-audit-aside::before{display:none}
  #p-enterprise .public-audit-aside li::before{display:none}
  #p-enterprise .public-form{border-radius:24px}
}

/* 08 — Le Collectif --------------------------------------------------------------
   Le bandeau reprend la fenêtre arrondie ; le réseau y est dessiné en SVG
   animé (il remplace le motif fixe d'origine dès que le script est actif). */
#p-network .public-network-hero{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(1340px,calc(100% - 56px));margin:154px auto 0;min-height:500px;padding:64px 0;
  display:flex;align-items:center;border-radius:var(--fx-radius);color:#493029;
  background:
    linear-gradient(100deg,rgba(255,250,245,.62),rgba(255,250,245,.3) 52%,rgba(255,250,245,.06)),
    url('images/hero-collectif.jpg') center 52%/cover no-repeat;
  box-shadow:0 70px 80px -64px rgba(60,32,20,.55),0 2px 6px rgba(60,32,20,.1),inset 0 0 0 1px rgba(255,255,255,.6);
}
html.fx-ready #p-network .public-network-hero::after{display:none}
#p-network .public-network-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%,rgba(255,226,200,.45),transparent 62%),linear-gradient(180deg,rgba(255,250,245,0) 70%,rgba(250,240,230,.55));
}
#p-network .public-network-hero .public-network-hero-grid{
  position:relative;z-index:2;display:block;width:auto;max-width:790px;margin:0 0 0 clamp(24px,6vw,84px);
  padding:42px 48px 46px;border:1px solid rgba(255,255,255,.85);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,252,248,.7),rgba(255,247,240,.42));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 44px 60px -42px rgba(60,32,20,.4),inset 0 1px 0 rgba(255,255,255,.95);
}
#p-network .public-network-hero .public-eyebrow{color:#94593f}
#p-network .public-network-hero h1{font-size:clamp(40px,4.3vw,62px)}
#p-network .public-network-hero .public-intro{color:#4f362c}
.fx-net--hero{z-index:1}

/* Récit puis galerie : la section « membres » se fond dans la toile. */
#p-network .public-soft-band{
  background:linear-gradient(180deg,rgba(236,216,198,0) 0,rgba(236,216,198,.42) 190px,rgba(243,229,216,.55) calc(100% - 190px),rgba(250,245,238,0) 100%);
}
#p-network .public-soft-band>.public-wrap{position:relative;z-index:1}
.fx-net--members{right:-4%;top:6%;width:70%;height:86%;opacity:.9}

/* Cartes des membres ------------------------------------------------------------ */
.collective-grid{gap:34px 26px;margin-top:48px}
.collective-card{
  position:relative;border:1px solid rgba(117,65,48,.1);border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,250,245,.52));
  box-shadow:var(--fx-rest);
  transition:transform .8s var(--fx-out),box-shadow .8s var(--fx-ease),border-color .6s var(--fx-ease),background-color .6s var(--fx-ease);
}
.collective-card:hover{transform:translateY(-8px);border-color:rgba(184,117,84,.34);box-shadow:var(--fx-lift)}
.collective-card>img{transform-origin:50% 28%;transition:transform 1.6s var(--fx-out),filter 1s var(--fx-ease)}
.collective-card:hover>img{transform:scale(1.07);filter:saturate(1.06) contrast(1.02)}
.collective-card-body{position:relative}
.collective-card-body::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--fx-copper),rgba(242,199,172,.7) 60%,rgba(184,117,84,0));
  transition:transform 1.1s var(--fx-out);
}
.collective-card:hover .collective-card-body::before{transform:scaleX(1)}
.collective-card h3{transition:color .5s var(--fx-ease),transform .7s var(--fx-out)}
.collective-card:hover h3{color:var(--fx-copper-deep);transform:translateX(3px)}
.collective-card .collective-territory{transition:border-color .6s var(--fx-ease),color .6s var(--fx-ease)}
.collective-card:hover .collective-territory{border-top-color:rgba(184,117,84,.32);color:#6a3f2e}

/* Carte et couverture ----------------------------------------------------------- */
#p-network .public-map-stage{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(231,210,192,0) 0,rgba(231,210,192,.4) 200px,rgba(248,240,232,.55) 62%,rgba(250,245,238,0) 100%);
}
#p-network .public-collective-story{position:relative}
#p-network .public-network-hero .public-intro,#p-enterprise .public-enterprise-hero .public-intro{text-align:left}

@media(max-width:1000px){
  #p-network .public-network-hero{margin-top:136px;min-height:0;padding:40px 0}
  #p-network .public-network-hero .public-network-hero-grid{margin:0 clamp(20px,5vw,48px);max-width:none;padding:34px 34px 38px}
  .fx-net--hero{width:100%;opacity:.7}
}
@media(max-width:760px){
  #p-network .public-network-hero{width:calc(100% - 24px);margin-top:130px;border-radius:22px;padding:22px 0}
  #p-network .public-network-hero .public-network-hero-grid{margin:0 14px;padding:26px 22px 30px;border-radius:22px}
  #p-network .public-network-hero h1{font-size:clamp(34px,9vw,42px)}
  .fx-net--members{width:120%;right:-30%;opacity:.5}
}

/* 09 — Formations ---------------------------------------------------------------
   Bandeau « fenêtre » commun avec Rejoindre (voir 10), puis un catalogue dont les
   cartes s'allument au survol. */
:is(#p-training .hero.forma,#p-join .hero.join){
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  width:min(1340px,calc(100% - 56px));min-height:540px;margin:154px auto 0;border-radius:var(--fx-radius);
  box-shadow:0 70px 80px -64px rgba(60,32,20,.7),0 2px 6px rgba(60,32,20,.12);
}
:is(#p-training .hero.forma,#p-join .hero.join)::after{display:none!important}
:is(#p-training .hero.forma,#p-join .hero.join)::before{
  background:radial-gradient(70% 90% at 94% 0%,rgba(255,214,184,.2),transparent 60%),linear-gradient(180deg,rgba(29,18,14,.12),rgba(29,18,14,.4)),linear-gradient(90deg,rgba(29,18,14,.7),rgba(29,18,14,.25) 62%,rgba(29,18,14,.08))!important;
}
#p-training .hero.forma .hero-in,#p-join .hero.join .hero-in{width:100%;margin:0;padding:64px 0!important}
#p-training .hero.forma .hero-in .copy,#p-join .hero.join .hero-in .copy{
  position:relative;max-width:820px;margin:0 0 0 clamp(24px,6vw,84px);padding:42px 48px 46px;
  border:1px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.34);border-radius:28px;
  background:linear-gradient(140deg,rgba(255,250,245,.16),rgba(255,250,245,.05));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 44px 60px -40px rgba(0,0,0,.7);
}
#p-training .hero.forma .kicker,#p-join .hero.join .kicker{color:#f2c7ac}
:is(#p-training .hero.forma,#p-join .hero.join) .copy h1{text-wrap:balance}
:is(#p-training .hero.forma,#p-join .hero.join) .copy p{text-align:left}

/* Barre d'outils */
#p-training .catalog-main{position:relative;isolation:isolate;padding-top:clamp(72px,7vw,104px)}
#p-training .catalog-filter{
  position:relative;padding:11px 17px;border:1px solid rgba(117,65,48,.16);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,248,241,.55));color:var(--fx-wine);
  transition:transform .5s var(--fx-out),box-shadow .5s var(--fx-ease),background-color .35s var(--fx-ease),border-color .35s var(--fx-ease),color .35s var(--fx-ease);
}
#p-training .catalog-filter:hover{transform:translateY(-2px);border-color:rgba(184,117,84,.6);box-shadow:0 14px 22px -16px rgba(148,85,58,.7)}
#p-training .catalog-filter[aria-pressed="true"]{
  background:linear-gradient(180deg,#8d4e39,#6b3828);border-color:#6b3828;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 22px -14px rgba(85,42,28,.7);
}
#p-training .catalog-summary{
  position:relative;border:0;padding:20px 0;gap:10px 34px;
  background:
    linear-gradient(90deg,rgba(184,117,84,0),rgba(184,117,84,.35) 14%,rgba(184,117,84,.35) 86%,rgba(184,117,84,0)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(184,117,84,0),rgba(184,117,84,.35) 14%,rgba(184,117,84,.35) 86%,rgba(184,117,84,0)) bottom/100% 1px no-repeat;
}
#p-training .catalog-summary strong{
  font-size:30px;line-height:1;
  background:linear-gradient(135deg,#dba37e 0%,#b87554 46%,#8a4d38 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Domaines : trois portes d'entrée qui s'éclairent. */
#p-training .catalog-domain{
  position:relative;border:1px solid rgba(117,65,48,.12);border-radius:26px;
  background:linear-gradient(155deg,rgba(255,255,255,.84),rgba(255,248,241,.55));box-shadow:var(--fx-rest);
  transition:transform .8s var(--fx-out),box-shadow .8s var(--fx-ease),border-color .6s var(--fx-ease);
}
#p-training .catalog-domain:hover{transform:translateY(-6px);border-color:rgba(184,117,84,.36);box-shadow:var(--fx-lift)}
#p-training .catalog-domain-heading{padding:28px 64px 26px 26px}
#p-training .catalog-domain-heading::before{
  content:"";position:absolute;left:26px;right:26px;bottom:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--fx-copper),rgba(242,199,172,.6) 60%,rgba(184,117,84,0));
  transition:transform 1.1s var(--fx-out);
}
#p-training .catalog-domain:hover .catalog-domain-heading::before,#p-training .catalog-domain[open] .catalog-domain-heading::before{transform:scaleX(1)}
#p-training .catalog-domain-heading h2{transition:color .5s var(--fx-ease)}
#p-training .catalog-domain:hover .catalog-domain-heading h2{color:var(--fx-copper-deep)}
#p-training .catalog-domain-heading::after{
  display:grid;place-items:center;width:34px;height:34px;top:22px;right:22px;border:1px solid rgba(184,117,84,.4);border-radius:50%;
  font-size:22px;line-height:1;padding-bottom:2px;color:var(--fx-copper-deep);
  transition:transform .8s var(--fx-out),background-color .4s var(--fx-ease),color .4s var(--fx-ease),border-color .4s var(--fx-ease);
}
#p-training .catalog-domain:hover .catalog-domain-heading::after{transform:rotate(90deg);background:var(--fx-copper);border-color:var(--fx-copper);color:#fff}
#p-training .catalog-domain[open] .catalog-domain-heading{background:linear-gradient(135deg,rgba(255,250,245,.9),rgba(247,226,208,.7))}
#p-training .catalog-domain-content-zone{border-top:0;position:relative;padding-top:34px;margin-top:26px}
#p-training .catalog-domain-content-zone::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(184,117,84,0),rgba(184,117,84,.4) 20%,rgba(184,117,84,.4) 80%,rgba(184,117,84,0));
}

/* Fiches formation */
#p-training .catalog-card{
  border:1px solid rgba(117,65,48,.12);border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(255,250,245,.62));box-shadow:var(--fx-rest);
  transition:transform .8s var(--fx-out),box-shadow .8s var(--fx-ease),border-color .6s var(--fx-ease);
}
#p-training .catalog-card:hover{transform:translateY(-6px);border-color:rgba(184,117,84,.36);box-shadow:var(--fx-lift)}
#p-training .catalog-detail-button{transition:border-color .4s var(--fx-ease),color .4s var(--fx-ease),padding .5s var(--fx-out)!important}
#p-training .catalog-detail-button:hover{padding-left:6px;color:var(--fx-copper-deep);border-color:var(--fx-copper)}
#p-training .catalog-detail-button::after{display:none}
#p-training .catalog-card--funding{animation:none!important}

/* Dates à retenir */
#p-training .catalog-sessions-calendar{position:relative;border-top:0;margin-top:56px;padding-top:44px}
#p-training .catalog-calendar-months button{
  transition:transform .5s var(--fx-out),box-shadow .5s var(--fx-ease),background-color .35s var(--fx-ease),border-color .35s var(--fx-ease),color .35s var(--fx-ease);
}
#p-training .catalog-calendar-months button:hover{transform:translateY(-2px);border-color:rgba(184,117,84,.6)}
#p-training .catalog-calendar-months button[aria-selected="true"]{background:linear-gradient(180deg,#8d4e39,#6b3828);border-color:#6b3828;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 20px -14px rgba(85,42,28,.7)}
#p-training .catalog-calendar-session{
  position:relative;border:1px solid rgba(117,65,48,.12);border-radius:16px;padding:14px 15px;
  background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(255,250,245,.6));
  transition:transform .7s var(--fx-out),box-shadow .7s var(--fx-ease),border-color .5s var(--fx-ease);
}
#p-training .catalog-calendar-session:hover{transform:translateY(-4px);border-color:rgba(184,117,84,.4);box-shadow:var(--fx-lift)}

/* Appel final */
#p-training .catalog-cta{
  position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.14);border-radius:32px;padding:clamp(30px,4vw,46px) clamp(26px,4vw,52px);
  background:linear-gradient(130deg,#7d4636,#5a3123);box-shadow:0 50px 70px -46px rgba(85,42,28,.7),inset 0 1px 0 rgba(255,255,255,.18);
}
#p-training .catalog-cta::before{
  content:"";position:absolute;right:-6%;top:-60%;width:60%;height:220%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,184,.3),rgba(255,214,184,0));
}
#p-training .catalog-cta .btn{background:linear-gradient(180deg,#fffdf9,#f6e5d6);color:#563222;box-shadow:inset 0 1px 0 #fff,0 14px 24px -14px rgba(0,0,0,.6)}

@media(max-width:1000px){
  :is(#p-training .hero.forma,#p-join .hero.join){margin-top:136px;min-height:0}
  #p-training .hero.forma .hero-in,#p-join .hero.join .hero-in{padding:40px 0!important}
  #p-training .hero.forma .hero-in .copy,#p-join .hero.join .hero-in .copy{margin:0 clamp(20px,5vw,48px);max-width:none;padding:34px 34px 38px}
}
@media(max-width:760px){
  :is(#p-training .hero.forma,#p-join .hero.join){width:calc(100% - 24px);margin-top:130px;border-radius:22px}
  #p-training .hero.forma .hero-in,#p-join .hero.join .hero-in{padding:22px 0!important}
  #p-training .hero.forma .hero-in .copy,#p-join .hero.join .hero-in .copy{margin:0 14px;padding:26px 22px 30px;border-radius:22px}
  #p-training .catalog-domain{border-radius:20px}
  #p-training .catalog-domain-heading{padding:22px 58px 22px 20px}
  #p-training .catalog-cta{border-radius:24px}
}

/* 10 — Rejoindre ----------------------------------------------------------------
   Même fenêtre de bandeau (voir 09), cartes photo qui s'éclairent, message
   central en panneau sombre arrondi avec un réseau très lent. */
#p-join .hero.join{background-position:center 26%}
#p-join .section{position:relative}
#p-join .head.center h2{max-width:900px;margin-inline:auto}

#p-join .mode-grid{gap:clamp(16px,2vw,28px)}
#p-join .mode-card{
  border-radius:30px;box-shadow:var(--fx-rest),0 40px 50px -40px rgba(60,32,20,.5);
  transition:opacity .9s var(--fx-ease),transform .9s var(--fx-out),box-shadow .8s var(--fx-ease),background-size 1.8s var(--fx-out)!important;
}
#p-join .mode-card:hover{transform:translateY(-8px)!important;box-shadow:var(--fx-lift),0 40px 50px -40px rgba(60,32,20,.5)}
#p-join .mode-card.vc4:hover,#p-join .mode-card.vc5:hover{background-size:auto 140%!important}
#p-join .mode-card.vc6:hover{background-size:auto 130%!important}
#p-join .mode-card h3{transition:transform .8s var(--fx-out)}
#p-join .mode-card:hover h3{transform:translateY(-4px)}
#p-join .mode-card>div{transition:transform .8s var(--fx-out)}
/* La couche de lumière du survol : ici le dégradé de lecture occupe déjà ::before. */
#p-join .mode-card.fx-lit::before{z-index:0;opacity:1;transition:none}
#p-join .mode-card.fx-lit::after{
  display:block!important;z-index:2;padding:0;-webkit-mask:none;mask:none;-webkit-mask-composite:initial;mask-composite:initial;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,226,200,.3),rgba(255,226,200,.08) 45%,transparent 70%);
}
#p-join .mode-card.fx-lit:hover::after{opacity:1}

#p-join .join-extra-list p{position:relative;transition:transform .8s var(--fx-out),border-color .6s var(--fx-ease)}
#p-join .join-extra-list p:hover{transform:translateX(8px);border-bottom-color:rgba(184,117,84,.5)}
#p-join .join-extra-list strong{transition:color .5s var(--fx-ease)}
#p-join .join-extra-list p:hover strong{color:var(--fx-copper-deep)}

#p-join .statement{background:transparent;overflow:visible;padding:clamp(20px,3vw,44px) 0}
#p-join .statement::before{display:none}
#p-join .statement>.section{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(1340px,calc(100% - 56px));margin:0 auto;padding:clamp(52px,6.5vw,96px) clamp(30px,6vw,96px);border-radius:var(--fx-radius);
  background:radial-gradient(70% 130% at 0% 100%,rgba(184,117,84,.26),transparent 62%),radial-gradient(50% 90% at 100% 0%,rgba(255,214,184,.08),transparent 60%),linear-gradient(135deg,#402a21,#2a1b16);
  box-shadow:0 60px 80px -60px rgba(42,27,22,.85),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04);
}
#p-join .statement>.section>*:not(.fx-net){position:relative;z-index:1}
.fx-net--statement{right:-2%;top:0;width:60%;height:100%;z-index:0!important;opacity:.6}
#p-join .statement>.section>div:not(.big){text-shadow:0 1px 14px rgba(42,27,22,.95)}

#p-join .cta{
  position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:34px;
  background:linear-gradient(130deg,#7d4636,#5a3123);
  box-shadow:0 56px 72px -48px rgba(85,42,28,.75),inset 0 1px 0 rgba(255,255,255,.18);
}
#p-join .cta::before{content:"";position:absolute;right:-8%;top:-70%;width:64%;height:240%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,214,184,.28),rgba(255,214,184,0))}
#p-join .cta>*:not(.fx-net){position:relative;z-index:1}
.fx-net--cta.fx-net--dark{right:0;top:0;width:55%;height:100%;z-index:0!important;opacity:.8}
.fx-net--join{right:-2%;top:0;width:58%;height:100%;z-index:0;opacity:.7}

/* 11 — Pied de page --------------------------------------------------------------
   Un socle sombre aux angles arrondis qui se pose sous la page, avec un filet de
   lumière sur l'arête haute et un maillage très lent. */
footer{
  position:relative;overflow:hidden;isolation:isolate;margin-top:0;
  border-radius:40px 40px 0 0;border-top:0;padding:72px 22px 44px;
  background:radial-gradient(60% 120% at 12% 0%,rgba(184,117,84,.2),transparent 60%),linear-gradient(180deg,#2e1f19,#1f1410);
}
footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;left:8%;right:8%;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,199,172,0),rgba(242,199,172,.6) 30%,rgba(255,226,200,.85) 50%,rgba(242,199,172,.6) 70%,rgba(242,199,172,0));
}
footer .foot{position:relative;z-index:1}
footer .foot button{position:relative;transition:color .4s var(--fx-ease),transform .6s var(--fx-out)}
footer .foot button:hover{transform:translateX(4px)}
.fx-net--footer{right:-1%;top:-4%;width:min(30%,430px);height:112%;opacity:.85;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
@media(max-width:760px){
  #p-join .statement>.section{width:calc(100% - 24px);border-radius:24px;padding:46px 24px!important}
  #p-join .cta{border-radius:26px}
  footer{border-radius:28px 28px 0 0;padding:56px 22px 36px}
  .fx-net--statement,.fx-net--join{width:100%;opacity:.45}
  .fx-net--footer{width:70%;right:-10%;top:auto;bottom:-8%;height:60%;opacity:.5}
}

/* 11b — Mode allégé -----------------------------------------------------------------
   Garde-fou automatique : si le navigateur peine pendant un défilement (images
   répétées à plus de 45 ms), le script ajoute html.fx-lite. Le flou d'arrière-plan,
   la partie la plus coûteuse du décor, est alors remplacé par des fonds plus pleins.
   L'apparence reste la même à l'œil ; seul le verre dépoli disparaît. */
html.fx-lite *,html.fx-lite *::before,html.fx-lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.fx-lite #hdr.scrolled .navbar{background:rgba(255,251,246,.97)}
html.fx-lite #p-home .public-home-band{background:linear-gradient(135deg,rgba(255,252,248,.96),rgba(250,240,230,.92))}
html.fx-lite #p-enterprise .public-enterprise-hero .public-inner-hero-content,
html.fx-lite :is(#p-training .hero.forma,#p-join .hero.join) .copy{background:linear-gradient(140deg,rgba(40,26,20,.62),rgba(40,26,20,.5))}
html.fx-lite #p-network .public-network-hero .public-network-hero-grid{background:linear-gradient(145deg,rgba(255,252,248,.94),rgba(255,247,240,.86))}
html.fx-lite .public-button-quiet{background:rgba(255,250,245,.78)}

/* 11 — Lecture sur petit écran ----------------------------------------------------
   La justification des textes de lecture (passe précédente) est conservée sur
   écran large. Sous 600 px, les colonnes sont trop étroites : elle creuse des
   « rivières » de blanc, on revient à l'alignement naturel (ou à celui du parent
   quand le texte est centré). */
@media(max-width:600px){
  main :is(p,li,dd,span,strong,em){text-align:left!important;text-align:match-parent!important;hyphens:manual!important}
}

/* 12 — Mouvement réduit ---------------------------------------------------------
   Pour les personnes qui le demandent : aucune animation, aucune apparition
   différée, aucun reflet, aucun déplacement lié au défilement ou au curseur.
   Les décors (fils, nœuds, auras) restent visibles dans leur état final. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .fx-reveal,.fx-reveal:not(.fx-in){opacity:1!important;translate:none!important}
  .fx-net .fx-edge{stroke-dashoffset:0!important}
  .fx-net .fx-nodeg{opacity:1!important;transform:none!important}
  .fx-signal,.fx-sweep,.fx-spot,.fx-thread-pulse,.fx-spark-glow,.fx-spark-core{display:none!important}
  .fx-aura,.fx-net{transform:none!important}
  .fx-thread-line,.fx-thread-node{transform:none!important}
  .public-button::after,.btn::after,.catalog-detail-button::after{display:none!important}
  .fx-lit::before,.fx-lit::after{transition:none}
  #p-home .public-home-photo img{transform:none!important;top:0;height:100%}
  .public-card>span{transition:none}
  .collective-card:hover,#p-training .catalog-card:hover,#p-training .catalog-domain:hover,#p-join .mode-card:hover{transform:none!important}
  .collective-card:hover>img{transform:none}
}
/* Impression : tout est visible, sans effet. */
@media print{.fx-reveal{opacity:1!important}.fx-net,.fx-aura,.fx-spot,.fx-sweep,.fx-thread,.fx-ink,.fx-progress{display:none!important}}