/* FORMAKA — finitions du site public : défilement, titres, cartes, couleurs et animations.
   Ajouté PAR-DESSUS style.css (chargé en dernier) ; tout ce qui dépend du script est sous « .js » : sans JavaScript la page reste complète.
   Les animations respectent « réduire les animations » du système (prefers-reduced-motion). */
:root{--p-ease:cubic-bezier(.2,.7,.2,1); --p-chaud:linear-gradient(90deg,#D61831,#F2B705); --p-froid:linear-gradient(135deg,#12A4A0,#6A4CC9);}

/* ---------- confort : sélection, barre de défilement, focus, ancres sous l'en-tête fixe ---------- */
::selection{background:rgba(242,183,5,.5); color:#0C1A2C;}
html{scrollbar-width:thin; scrollbar-color:#B7142A #E9ECF0;}
:focus-visible{outline:3px solid #F2B705; outline-offset:3px; border-radius:4px;}
section[aria-labelledby],[id^="h-"]{scroll-margin-top:96px;}
.page-title h1,.page-title h2,.hs-title{text-wrap:balance;}

/* ---------- titres de section : pastille animée au-dessus, mots qui apparaissent, trait en dégradé ---------- */
.page-title .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:99px; background:rgba(214,24,49,.08); box-shadow:inset 0 0 0 1px rgba(214,24,49,.14);}
.page-title .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:#D61831; flex:none;}
.section-dark .page-title .eyebrow{background:rgba(242,183,5,.12); box-shadow:inset 0 0 0 1px rgba(242,183,5,.28);}
.section-dark .page-title .eyebrow::before{background:#F2B705;}
.js .split .w{display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.6deg); filter:blur(3px); transition:opacity .6s var(--p-ease),transform .75s var(--p-ease),filter .6s var(--p-ease); transition-delay:calc(var(--i,0) * 48ms);}
.js .split.in .w{opacity:1; transform:none; filter:none;}
.page-title h2 em,.page-title h1 em{background:linear-gradient(90deg,#B7142A,#D61831 55%,#E8590C); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-style:inherit;}
.section-dark .page-title h2 em{background:linear-gradient(90deg,#F2B705,#ff9a5c); -webkit-background-clip:text; background-clip:text;}
/* dans un titre dont les mots apparaissent un à un, le dégradé est posé mot par mot (un fond clipé sur le texte ne suit pas les mots animés) */
.js .split em{background:none; -webkit-text-fill-color:currentColor;}
.js .split em .w{background:linear-gradient(90deg,#B7142A,#D61831 55%,#E8590C); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.section-dark .split em .w{background:linear-gradient(90deg,#F2B705,#ff9a5c); -webkit-background-clip:text; background-clip:text;}

/* ---------- cartes : halo qui suit le curseur et légère inclinaison ---------- */
.spot{position:relative; isolation:isolate;}
.spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0; transition:opacity .3s; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(214,24,49,.11),transparent 65%);}
.section-dark .spot::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.17),transparent 65%);}
.spot:hover::after{opacity:1;}
/* les cartes qui ont déjà le halo d'origine du site (data-glow, assets/main.js) n'en reçoivent pas un second : elles gardent seulement l'inclinaison */
.spot[data-glow]::after{display:none;}
.spot.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px); transition:transform .12s ease-out,box-shadow .3s;}

/* ---------- pictogrammes des atouts : pastilles de couleur ---------- */
.features .feature .icon{border:0; color:#fff; box-shadow:0 8px 18px rgba(20,42,71,.22);}
.features .feature:nth-child(3n+1) .icon{background:linear-gradient(135deg,#D61831,#ff5d6c);}
.features .feature:nth-child(3n+2) .icon{background:linear-gradient(135deg,#12A4A0,#3ad1b9);}
.features .feature:nth-child(3n+3) .icon{background:linear-gradient(135deg,#6A4CC9,#9a7bff);}
.section-dark .features .feature .icon{color:#fff;}
.features .feature .icon .ico{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}

/* ---------- trait de couleur en haut des sections sombres ---------- */
.section-dark{position:relative;}
.section-dark::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--p-chaud); background-size:200% 100%; opacity:.85;}
@media (prefers-reduced-motion:no-preference){.section-dark::before{animation:pBrille 9s linear infinite;}}
@keyframes pBrille{to{background-position:200% 0;}}

/* ---------- déroulé en 4 étapes : ligne qui se remplit au défilement ---------- */
.method-step .m-num{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#D61831,#ff6b6b); color:#fff; font-size:21px; box-shadow:0 8px 18px rgba(214,24,49,.3);}
@media (min-width:821px){
  .method-steps{--p:0; padding-top:34px;}
  .method-steps::before{content:""; position:absolute; left:8%; right:8%; top:6px; height:4px; border-radius:99px; background:rgba(15,30,50,.1);}
  .method-steps::after{content:""; position:absolute; left:8%; right:8%; top:6px; height:4px; border-radius:99px; background:var(--p-chaud); transform-origin:left; transform:scaleX(var(--p)); }
  .method-step{position:relative;}
  .method-step::before{content:""; position:absolute; top:-36px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#fff; border:4px solid rgba(15,30,50,.2); z-index:1; opacity:1; transition:border-color .4s,transform .4s;}   /* opacity:1 : le halo d'origine (style.css, [data-glow]::before) laissait la pastille à 0 */
  .method-step.on::before{border-color:#D61831; transform:scale(1.3);}
  .method-step.spot[data-glow]::after{display:block;}   /* ici le halo d'origine est remplacé par la pastille : on garde celui de polish */
}

/* ---------- bandeau défilant : bords fondus ---------- */
.minis{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}

/* ---------- catalogue défilant : pastilles de position ---------- */
.snap-dots{display:flex; justify-content:center; gap:8px; margin:16px 0 0; padding:0; list-style:none;}
.snap-dots button{width:10px; height:10px; padding:0; border:0; border-radius:99px; background:rgba(15,30,50,.22); cursor:pointer; transition:width .3s var(--p-ease),background .3s;}
.snap-dots button:hover{background:rgba(15,30,50,.45);}
.snap-dots button[aria-current="true"]{width:28px; background:linear-gradient(90deg,#D61831,#F2B705);}

/* ---------- haut de page d'accueil : flèche « faire défiler » ---------- */
.scroll-cue{position:absolute; right:30px; bottom:26px; z-index:3; width:26px; height:42px; border:2px solid rgba(255,255,255,.75); border-radius:14px; display:block; transition:opacity .4s;}
.scroll-cue::after{content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff;}
@media (prefers-reduced-motion:no-preference){.scroll-cue::after{animation:pCue 1.8s ease-in-out infinite;}}
@keyframes pCue{0%{opacity:0; transform:translateY(0);}30%{opacity:1;}100%{opacity:0; transform:translateY(14px);}}
.scroll-cue.off{opacity:0; pointer-events:none;}
@media (max-width:760px){.scroll-cue{display:none;}}

/* ---------- repère des sections (puces à droite de la page) ---------- */
.rail{position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:40; display:none;}
@media (min-width:1180px){.rail{display:block;}}
.rail ul{list-style:none; margin:0; padding:12px 8px; display:grid; gap:12px; background:rgba(12,26,44,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:99px; border:1px solid rgba(255,255,255,.2);}
.rail a{position:relative; display:block; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.4); transition:transform .25s,background .25s,box-shadow .25s;}
.rail a:hover,.rail a:focus-visible{transform:scale(1.35); background:#fff;}
.rail a.on{background:#F2B705; transform:scale(1.35); box-shadow:0 0 0 4px rgba(242,183,5,.3);}
.rail a span{position:absolute; right:24px; top:50%; transform:translate(6px,-50%); opacity:0; pointer-events:none; white-space:nowrap; background:#0C1A2C; color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px; transition:opacity .2s,transform .2s;}
.rail a:hover span,.rail a:focus-visible span{opacity:1; transform:translate(0,-50%);}

/* ---------- boutons : léger effet d'aimant ---------- */
.js .btn-primary,.js .btn-gold{transition:transform .2s var(--p-ease),box-shadow .25s;}

/* ---------- apparition échelonnée des cartes d'une même grille ---------- */
.js .reveal.in{transition-delay:calc(var(--i,0) * 70ms);}

/* ---------- catalogue : la barre de filtres reste visible pendant qu'on fait défiler la liste ---------- */
.filter-bar{position:sticky; top:calc(var(--entete-h, 64px) + 8px); z-index:15; padding:10px 14px; margin-left:auto; margin-right:auto; width:fit-content; max-width:100%; border-radius:99px; background:rgba(237,239,241,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(20,42,71,.1);}
@media (max-width:700px){   /* petit écran : les pastilles passent sur plusieurs lignes, la barre ne reste pas collée (elle cacherait un cinquième de l'écran) */
  .filter-bar{position:static; width:auto; padding:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;}
}

/* ---------- accueil : formations par domaine ---------- */
.domaines{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:22px; margin-top:40px;}
.domaine{--dom:#D61831; display:flex; flex-direction:column; gap:9px; padding:28px 26px; background:#fff; border:1px solid #E5E8EB; border-top:5px solid var(--dom); border-radius:12px; text-decoration:none; color:inherit; transition:box-shadow .3s,transform .3s;}
.domaine:nth-child(2){--dom:#12A4A0;} .domaine:nth-child(3){--dom:#6A4CC9;} .domaine:nth-child(4){--dom:#E8590C;}
.domaine:hover,.domaine:focus-visible{box-shadow:0 16px 36px rgba(20,42,71,.17); transform:translateY(-5px);}
.domaine-ico{display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--dom); color:#fff; font-size:26px; box-shadow:0 8px 18px rgba(20,42,71,.2);}
.domaine h3{margin:6px 0 0; font-size:21px; color:#0C1A2C;}
.domaine p{margin:0; color:#3C4650; font-size:15.5px; line-height:1.55;}
.domaine-nb{align-self:flex-start; padding:3px 11px; border-radius:99px; background:rgba(20,42,71,.07); font-size:13px; font-weight:700; color:#0C1A2C;}
.domaine-liste{list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.domaine-liste li{font-size:12.5px; padding:3px 10px; border-radius:99px; border:1px solid #DADDE2; color:#3C4650; background:#fff;}
.domaine .go{margin-top:auto; font-weight:800; color:var(--dom);}
.path-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}

/* ---------- glossaire de la formation professionnelle ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.glo-outils{display:grid; gap:14px; justify-items:center; margin:30px 0 8px;}
.glo-recherche{width:min(560px,100%);}
.glo-recherche input{width:100%; padding:13px 18px; font:inherit; font-size:16px; border:2px solid #DADDE2; border-radius:99px; background:#fff; transition:border-color .2s,box-shadow .2s;}
.glo-recherche input:focus{outline:none; border-color:#D61831; box-shadow:0 0 0 4px rgba(214,24,49,.14);}
.glo-themes{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.glo-themes a{padding:6px 14px; border-radius:99px; background:#fff; border:1px solid #DADDE2; color:#0C1A2C; font-size:14px; font-weight:600; text-decoration:none; transition:background .2s,color .2s,border-color .2s,transform .2s;}
.glo-themes a:hover{background:#0C1A2C; color:#fff; border-color:#0C1A2C; transform:translateY(-2px);}
.glo-groupe{margin-top:38px; --glo:#D61831;}
.glo-c2{--glo:#12A4A0;} .glo-c3{--glo:#6A4CC9;} .glo-c4{--glo:#E8590C;}
.glo-groupe h2{font-size:clamp(22px,3vw,28px); color:#0C1A2C; padding-left:14px; border-left:6px solid var(--glo); margin:0 0 16px;}
.glo-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); gap:14px; margin:0;}
.glo-terme{background:#fff; border:1px solid #E5E8EB; border-top:4px solid var(--glo); border-radius:10px; padding:16px 18px; transition:box-shadow .25s,transform .25s;}
.glo-terme:hover,.glo-terme:target{box-shadow:0 10px 26px rgba(20,42,71,.14); transform:translateY(-3px);}
.glo-terme:target{outline:3px solid var(--glo); outline-offset:2px;}
.glo-terme dt{font-weight:800; font-size:18px; color:#0C1A2C; margin:0 0 6px;}
.glo-sigle{color:var(--glo);}
.glo-long{display:block; font-size:13px; font-weight:600; color:#5B646F; margin-top:2px;}
.glo-terme dd{margin:0; font-size:15.5px; line-height:1.6; color:#2A323C;}
.glo-lien{display:inline-block; margin-top:6px; font-weight:700; font-size:14px;}
.glo-vide{text-align:center; margin:24px 0; font-size:16px;}
.glo-note{margin:34px auto 6px; max-width:760px; text-align:center; font-size:14px; color:#5B646F;}
.glo-terme[hidden],.glo-groupe[hidden]{display:none;}

/* ---------- réduire les animations : tout reste lisible, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  .js .split .w{opacity:1; transform:none; filter:none; transition:none;}
  .spot.tilt{transform:none;}
  .snap-dots button{transition:none;}
  .rail a,.rail a span{transition:none;}
}

/* ---------- impression (CGV, règlement intérieur, programmes) : tout le texte est visible, rien de décoratif n'est imprimé ---------- */
@media print{
  .js .split .w{opacity:1 !important; transform:none !important; filter:none !important;}   /* les mots de titre qui n'étaient pas encore « arrivés » ne s'impriment pas en blanc */
  .page-title h2 em,.page-title h1 em,.js .split em .w{background:none !important; -webkit-text-fill-color:currentColor !important;}   /* le dégradé dans le texte disparaît quand le navigateur n'imprime pas les fonds */
  .rail,.scroll-cue,.snap-dots,.section-dark::before,.method-steps::before,.method-steps::after,.method-step::before{display:none !important;}
  .filter-bar{position:static !important; box-shadow:none !important; background:none !important;}
  .spot.tilt{transform:none !important;}
}

/* ---------- diaporamas (formations à découvrir…) et miniatures ---------- */
.slider{position:relative; margin-top:30px; width:100%; min-width:0;}
.sl-track{display:flex; width:100%; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:8px 4px 18px; overscroll-behavior-x:contain;}
.sl-track::-webkit-scrollbar{display:none;}
.sl-track:focus-visible{outline-offset:-3px;}
.sl-slide{flex:0 0 min(310px,82%); scroll-snap-align:start; display:flex;}
.sl-carte{display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid #E5E8EB; border-top:4px solid #D61831; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(20,42,71,.07); transition:transform .3s var(--p-ease),box-shadow .3s;}
.sl-slide:nth-child(3n+2) .sl-carte{border-top-color:#12A4A0;} .sl-slide:nth-child(3n+3) .sl-carte{border-top-color:#6A4CC9;}
.sl-carte:hover,.sl-carte:focus-visible{transform:translateY(-6px); box-shadow:0 18px 38px rgba(20,42,71,.18);}
.sl-photo{display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#E9ECF0,#DCE3EA);}
.sl-photo img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--p-ease);}
.sl-carte:hover .sl-photo img,.sl-carte:focus-visible .sl-photo img{transform:scale(1.08);}
.sl-corps{display:grid; gap:7px; padding:15px 17px 18px; align-content:start; flex:1;}
.sl-tag{font-size:12px; font-weight:800; letter-spacing:.02em; color:#B7142A; text-transform:uppercase;}
.sl-titre{font-size:17px; line-height:1.3; color:#0C1A2C;}
.sl-resume{font-size:14px; line-height:1.5; color:#3C4650; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.sl-go{margin-top:auto; font-weight:800; font-size:14px; color:#D61831;}
.sl-ctrl{display:none; align-items:center; justify-content:center; gap:16px; margin-top:4px;}
.sl-actif .sl-ctrl{display:flex;}
.sl-prev,.sl-next{width:44px; height:44px; border-radius:50%; border:1px solid rgba(15,30,50,.22); background:#fff; color:#0C1A2C; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(20,42,71,.1); transition:transform .2s,background .2s,color .2s,opacity .2s;}
.sl-prev:hover:not(:disabled),.sl-next:hover:not(:disabled){background:#0C1A2C; color:#fff; transform:scale(1.08);}
.sl-prev:disabled,.sl-next:disabled{opacity:.35; cursor:default;}
.sl-dots{display:flex; gap:8px; list-style:none; margin:0; padding:0;}
.sl-dots button{width:10px; height:10px; padding:0; border:0; border-radius:99px; background:rgba(15,30,50,.22); cursor:pointer; transition:width .3s var(--p-ease),background .3s;}
.sl-dots button:hover{background:rgba(15,30,50,.45);}
.sl-dots button[aria-current="true"]{width:28px; background:linear-gradient(90deg,#D61831,#F2B705);}
.section-alt .sl-carte{background:#fff;}

.mini-nav{display:flex; width:100%; gap:14px; overflow-x:auto; padding:10px 4px 18px; margin:6px 0 4px; scrollbar-width:thin; scroll-snap-type:x proximity;}
.mini-nav-item{flex:0 0 auto; width:112px; text-align:center; text-decoration:none; color:#0C1A2C; font-size:12.5px; font-weight:700; line-height:1.25; scroll-snap-align:start; transition:transform .3s var(--p-ease);}
.mn-photo{display:block; width:112px; height:76px; border-radius:12px; overflow:hidden; border:2px solid #fff; background:linear-gradient(135deg,#E9ECF0,#DCE3EA); box-shadow:0 6px 16px rgba(20,42,71,.16); transition:box-shadow .3s,border-color .3s;}
.mn-photo img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--p-ease);}
.mn-nom{display:block; margin-top:8px;}
.mini-nav-item:hover,.mini-nav-item:focus-visible{transform:translateY(-5px);}
.mini-nav-item:hover .mn-photo,.mini-nav-item:focus-visible .mn-photo{border-color:#D61831; box-shadow:0 12px 26px rgba(214,24,49,.28);}
.mini-nav-item:hover .mn-photo img,.mini-nav-item:focus-visible .mn-photo img{transform:scale(1.12);}
.course-card{scroll-margin-top:calc(var(--entete-h,64px) + 96px);}
@media (max-width:700px){.course-card{scroll-margin-top:calc(var(--entete-h,64px) + 14px);} .sl-slide{flex-basis:84%;}}
@media (prefers-reduced-motion:reduce){.sl-track{scroll-behavior:auto;} .sl-carte,.sl-photo img,.mn-photo img,.mini-nav-item{transition:none;}}
@media print{.sl-ctrl,.mini-nav{display:none !important;} .sl-track{display:grid; grid-template-columns:repeat(2,1fr); overflow:visible;} .sl-slide{flex:none;}}