/* KAS Formations — styles globaux (duplication kasformations.fr) */
:root{
  --navy:#0b1020;--navy2:#101730;--orange:#f97316;--orange-d:#ea580c;
  --blue:#2563eb;--blue-d:#1d4ed8;--ink:#0f172a;--gray:#64748b;--gray-l:#f1f5f9;
  --border:#e2e8f0;--green:#16a34a;--radius:14px;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Topbar */
.topbar{background:var(--navy);color:#cbd5e1;font-size:.78rem;padding:8px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center}
.topbar a{color:#cbd5e1}
.topbar .loc{letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}
.topbar .loc::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:6px}

/* Header */
header.main{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
header.main .container{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo .mark{font-size:1.9rem;color:var(--blue);font-weight:900;position:relative}
.logo .mark i{font-style:normal;color:var(--orange)}
.logo .txt{line-height:1.05}
.logo .txt b{color:var(--blue);font-size:1.15rem;letter-spacing:.02em}
.logo .txt span{display:block;font-size:.55rem;letter-spacing:.35em;color:var(--gray)}
nav.mainnav{display:flex;gap:6px;align-items:center}
nav.mainnav a{padding:9px 14px;border-radius:9px;font-size:.88rem;color:#334155;display:flex;gap:6px;align-items:center}
nav.mainnav a:hover{background:var(--gray-l)}
nav.mainnav a.active{background:var(--navy);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:12px 22px;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:.2s}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-d)}
.btn-orange{background:var(--orange);color:#fff;text-transform:uppercase;letter-spacing:.04em}.btn-orange:hover{background:var(--orange-d)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}.btn-outline:hover{border-color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--border)}.btn-ghost:hover{border-color:var(--ink)}

/* Hero sombre */
.hero{background:linear-gradient(135deg,#0b1020 0%,#0e1530 60%,#0b1020 100%);color:#fff;padding:110px 0 70px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:48px 48px}
.hero>.container{position:relative}
.kicker{display:flex;align-items:center;gap:14px;color:var(--orange);letter-spacing:.25em;font-size:.72rem;font-weight:700;text-transform:uppercase;margin-bottom:22px}
.kicker::before{content:'';width:46px;height:2px;background:var(--orange)}
.hero h1{font-size:clamp(2.4rem,6vw,4.3rem);line-height:1.05;font-weight:800;max-width:760px}
.hero h1 em{color:var(--orange);font-style:normal}
.hero p.lead{color:#94a3b8;max-width:560px;margin:26px 0 36px;font-size:1.05rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px;margin-top:64px;max-width:760px}
.stats .s b{font-size:2rem;font-weight:800}
.stats .s span{display:block;color:#94a3b8;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}

/* Sections */
section.sec{padding:80px 0}
section.alt{background:var(--gray-l)}
.sec-kicker{color:var(--orange);letter-spacing:.22em;font-size:.72rem;font-weight:700;text-transform:uppercase;margin-bottom:12px}
h2.sec-title{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;margin-bottom:18px}
.sec-head{max-width:720px;margin-bottom:46px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.card h3{font-size:1.05rem;margin-bottom:8px}
.card p{color:var(--gray);font-size:.9rem}
.icon-dot{width:46px;height:46px;border-radius:12px;background:#fff7ed;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px}

/* Étapes */
.step-num{font-size:2.2rem;font-weight:800;color:#e2e8f0}
.step h3{margin:8px 0 6px}

/* Formation cards */
.fcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.fcard .head{padding:18px 22px 0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fcard .cat{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.fcard .badge{font-size:.66rem;font-weight:700;background:var(--orange);color:#fff;padding:3px 10px;border-radius:99px}
.fcard .body{padding:12px 22px 22px;flex:1;display:flex;flex-direction:column}
.fcard h3{font-size:1.08rem;margin-bottom:8px}
.fcard p{color:var(--gray);font-size:.86rem;flex:1}
.fcard .meta{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px;margin-top:16px;font-size:.85rem}
.fcard .meta b{display:block;font-size:1rem}
.fcard .meta span{font-size:.64rem;letter-spacing:.1em;color:var(--gray);text-transform:uppercase}

/* Témoignages */
.tcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.tcard .quote{font-size:.9rem;color:#334155;font-style:italic}
.tcard .who{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.tcard .who b{display:block}
.tcard .who span{font-size:.8rem;color:var(--gray)}
.tcard .who em{display:block;font-size:.75rem;color:var(--orange);font-style:normal;margin-top:3px;font-weight:600}

/* CTA finale */
.cta-final{background:linear-gradient(135deg,#0b1020,#101a3c);color:#fff;text-align:center;padding:90px 0}
.cta-final h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.cta-final p{color:#94a3b8;max-width:520px;margin:0 auto 34px}

/* Footer */
footer{background:var(--navy);color:#94a3b8;padding:60px 0 30px;font-size:.88rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:40px}
footer h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
footer a{display:block;padding:4px 0}
footer a:hover{color:#fff}
footer .base{border-top:1px solid #1e293b;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem}
/* Qualiopi — badge pied de page + aperçu plein écran du certificat */
.qualiopi-badge{display:inline-block!important;margin-top:18px;padding:12px 14px 10px;background:#fff;border-radius:12px;text-decoration:none;max-width:240px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.qualiopi-badge:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.qualiopi-badge img{display:block;width:200px;height:auto;margin:0 auto}
.qualiopi-badge .qualiopi-cat{display:block;margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0;font-size:.68rem;line-height:1.35;color:#475569;text-align:center}
.qualiopi-badge .qualiopi-cat b{display:block;margin-top:3px;font-size:.84rem;color:#1b2a6b;text-transform:uppercase;letter-spacing:.06em}
.qualiopi-viewer{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.94);display:flex;flex-direction:column;animation:qvIn .2s ease}
.qualiopi-viewer[hidden]{display:none}
@keyframes qvIn{from{opacity:0}to{opacity:1}}
.qv-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;background:#fff;flex-wrap:wrap}
.qv-title{display:flex;align-items:center;gap:14px;font-size:.88rem;font-weight:600;color:#1b2a6b}
.qv-actions{display:flex;align-items:center;gap:10px}
.qv-actions .btn{padding:9px 16px;font-size:.85rem}
.qv-close{width:40px;height:40px;border:none;border-radius:50%;background:#f1f5f9;color:#0f172a;font-size:1.6rem;line-height:1;cursor:pointer}
.qv-close:hover{background:#e2e8f0}
.qv-body{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}
.qv-body img{display:block;width:min(100%,calc((100vh - 120px) * 0.707));height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
body.qv-open{overflow:hidden}
@media(max-width:640px){.qv-bar{padding:10px 12px}.qv-title span{display:none}.qv-body{padding:12px}.qv-body img{width:100%}}
@media print{.qualiopi-viewer{display:none!important}}
.qualiopi-band{background:linear-gradient(135deg,#f8fafc,#eef2ff)}
.qb{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.qb-logo{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:26px 22px;box-shadow:0 12px 40px rgba(27,42,107,.12);text-decoration:none;color:#475569;font-size:.78rem;text-align:center;line-height:1.4;transition:transform .2s,box-shadow .2s}
.qb-logo:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(27,42,107,.18)}
.qb-logo img{width:240px;height:auto}
.qb-logo b{display:block;margin-top:4px;color:#1b2a6b;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase}
.qb-btn2{border:2px solid #1b2a6b;color:#1b2a6b;background:transparent}.qb-btn2:hover{background:#1b2a6b;color:#fff}
.qb-txt p{color:#475569;font-size:1.02rem;line-height:1.65;margin-top:12px}
@media(max-width:860px){.qb{grid-template-columns:1fr;gap:26px}.qb-logo{max-width:320px;margin:0 auto}}
.chat-fab{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 24px rgba(37,99,235,.4);cursor:pointer;z-index:60;border:none}

/* Formulaires */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{font-size:.82rem;font-weight:600;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:.9rem}
.form textarea{min-height:110px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--gray)}
.form .check input{width:auto;margin-top:3px}

/* Filtres / pills */
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:8px 18px;border-radius:99px;border:1px solid var(--border);background:#fff;font-size:.85rem;cursor:pointer}
.pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding:10px 12px;border-bottom:2px solid var(--border)}
.tbl td{padding:12px;border-bottom:1px solid var(--border)}

/* Divers */
.tag{display:inline-block;background:var(--gray-l);border-radius:99px;padding:4px 12px;font-size:.74rem;font-weight:600;margin:2px}
.tag.blue{background:#dbeafe;color:var(--blue-d)}
.tag.orange{background:#ffedd5;color:var(--orange-d)}
.tag.green{background:#dcfce7;color:#15803d}
.check-list{list-style:none}
.check-list li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.9rem}
.check-list li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}
.notice{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);padding:22px;font-size:.9rem}

@media(max-width:900px){
  nav.mainnav{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
  .form .row{grid-template-columns:1fr}
}


/* ================================================================
   KAS Formations — couche visuelle v2
   Typographie fluide, rythme d'espacement, cartes, navigation,
   accessibilité (focus, contrastes, mouvement réduit) et impression.
   ================================================================ */
:root{
  --ink-2:#334155; --muted:#64748b; --line:#e2e8f0; --line-2:#eef2f7;
  --paper:#f7f9fc; --white:#fff;
  --blue-l:#60a5fa; --blue-xl:#dbeafe; --orange-l:#fed7aa;
  --sh-1:0 1px 2px rgba(13,21,38,.05);
  --sh-2:0 2px 6px rgba(13,21,38,.06), 0 10px 28px -18px rgba(13,21,38,.28);
  --sh-3:0 8px 22px -10px rgba(13,21,38,.22), 0 28px 60px -32px rgba(13,21,38,.34);
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --sp:clamp(56px,7vw,96px);
  --maxw:1200px;
}
html{scroll-behavior:smooth}
body{font-size:clamp(15.5px,.55vw + 14.4px,17px);letter-spacing:-.002em;background:var(--white)}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.022em;font-weight:800}
h1{font-size:clamp(2rem,3.4vw + .6rem,3.35rem)}
h2{font-size:clamp(1.45rem,1.5vw + .9rem,2.15rem)}
h3{font-size:clamp(1.08rem,.6vw + .85rem,1.35rem)}
p{max-width:72ch}
.container{max-width:var(--maxw)}
section{padding-block:var(--sp)}
section.tight{padding-block:calc(var(--sp)*.55)}

/* — accessibilité — */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* — en-tête — */
header.main{backdrop-filter:saturate(1.4) blur(10px);background:rgba(255,255,255,.94);transition:box-shadow .2s,border-color .2s}
header.main.scrolled{box-shadow:var(--sh-2);border-color:transparent}
header.main .container{height:76px;gap:18px}
nav.mainnav a{font-weight:600;color:var(--ink-2);position:relative;transition:.16s}
nav.mainnav a:hover{background:var(--blue-xl);color:var(--blue-d)}
nav.mainnav a.active{background:var(--navy);color:#fff}
nav.mainnav a.active::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-11px;width:22px;height:3px;border-radius:3px;background:var(--orange)}
.navwrap{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hasmenu{position:relative}
.hasmenu>button{display:flex;gap:6px;align-items:center;padding:9px 14px;border-radius:9px;border:none;background:none;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.hasmenu>button:hover{background:var(--blue-xl);color:var(--blue-d)}
.submenu{position:absolute;top:calc(100% + 10px);right:0;min-width:280px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh-3);padding:8px;display:none;z-index:60}
.hasmenu.open .submenu{display:block}
.submenu a{display:block;padding:10px 13px;border-radius:9px;font-size:.86rem;color:var(--ink-2)}
.submenu a:hover{background:var(--paper)}
.submenu a b{display:block;color:var(--ink);font-size:.9rem}
.submenu a span{color:var(--muted);font-size:.78rem}
@media(max-width:1020px){
  nav.mainnav{position:fixed;inset:76px 0 auto;background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px 22px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-3);display:none;max-height:calc(100vh - 76px);overflow:auto;z-index:55}
  nav.mainnav.open{display:flex}
  nav.mainnav a{padding:13px 14px;font-size:1rem}
  nav.mainnav a.active::after{display:none}
  .burger{display:flex}
  header.main .container{height:76px}
  .hasmenu{width:100%}.submenu{position:static;box-shadow:none;border:none;padding:0 0 0 10px}
  .hasmenu.open .submenu{display:block}
}

/* — fil d'Ariane — */
.crumbs{font-size:.8rem;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--blue-d)}
.crumbs span{margin:0 7px;opacity:.5}

/* — bandeau de page — */
.phero{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.92}
.phero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,14,30,.94) 0%,rgba(9,14,30,.72) 44%,rgba(9,14,30,.18) 100%)}
.phero .container{padding-block:clamp(52px,7vw,86px)}
.phero .kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-l);font-weight:700;margin-bottom:14px}
.phero h1{color:#fff;max-width:20ch}
.phero p.lead{color:#cbd5e1;font-size:clamp(1rem,.5vw + .9rem,1.14rem);margin-top:16px;max-width:60ch}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.phero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.phero .facts div b{display:block;font-size:1.45rem;color:#fff}
.phero .facts div span{font-size:.78rem;color:#94a3b8}

/* — boutons — */
.btn{border-radius:var(--r-s);font-weight:650;transition:transform .14s,box-shadow .14s,background .16s}
.btn:hover{transform:translateY(-1px)}
.btn-blue{box-shadow:0 6px 16px -8px rgba(37,99,235,.8)}
.btn-orange{box-shadow:0 6px 16px -8px rgba(249,115,22,.85);text-transform:none;letter-spacing:0}
.btn-ghost:hover{background:var(--paper)}
.btn-lg{padding:15px 28px;font-size:.96rem}

/* — cartes — */
.fcard,.card,.panel,.tile{border-radius:var(--r-m)}
.fcard{box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s,border-color .2s;border:1px solid var(--line)}
.fcard:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--blue-l)}
.tile{background:#fff;border:1px solid var(--line);padding:26px;box-shadow:var(--sh-1)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head .kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px}
.sec-head p{color:var(--muted);margin-top:10px}
.band{background:var(--paper);border-block:1px solid var(--line)}

/* — tableaux — */
.tbl th{background:var(--paper)}
.tbl tr:hover td{background:#fbfdff}
.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* — pied de page — */
footer .cols{gap:36px}
footer h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8;margin-bottom:14px}
footer a{display:block;padding:5px 0;font-size:.86rem;color:#cbd5e1;transition:color .15s}
footer a:hover{color:#fff}

/* — impression — */
@media print{
  .topbar,header.main,footer,.btn,.crumbs,.burger,.skip{display:none!important}
  .phero{background:#fff!important;color:#000!important}
  .phero::after,.phero img.bg{display:none}
  .phero h1,.phero p.lead{color:#000!important}
  body{font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .panel,.tile,.fcard{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
}


/* — illustration de bandeau, une par page (décorative : portée par le CSS, pas par une balise img) — */
.hero,.ehead,.fhero,.dhead,.shead{position:relative;overflow:hidden}
.hero::after,.ehead::after,.fhero::after,.dhead::after,.shead::after{
  content:'';position:absolute;inset:0;z-index:0;background-repeat:no-repeat;background-position:right center;
  background-size:cover;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 50%,#000 86%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 50%,#000 86%);pointer-events:none}
.hero>.container,.ehead>.container,.fhero>*,.dhead>.container,.shead>.container{position:relative;z-index:1}
@media(max-width:760px){.hero::after,.ehead::after,.fhero::after,.dhead::after,.shead::after{opacity:.22}}
body[data-page="admin"] .hero::after,body[data-page="admin"] .ehead::after,body[data-page="admin"] .fhero::after,body[data-page="admin"] .dhead::after,body[data-page="admin"] .shead::after{background-image:url("img/hero-audit.svg")}
body[data-page="apprentissage"] .hero::after,body[data-page="apprentissage"] .ehead::after,body[data-page="apprentissage"] .fhero::after,body[data-page="apprentissage"] .dhead::after,body[data-page="apprentissage"] .shead::after{background-image:url("img/hero-cfa.svg")}
body[data-page="cgv"] .hero::after,body[data-page="cgv"] .ehead::after,body[data-page="cgv"] .fhero::after,body[data-page="cgv"] .dhead::after,body[data-page="cgv"] .shead::after{background-image:url("img/hero-legal.svg")}
body[data-page="contact"] .hero::after,body[data-page="contact"] .ehead::after,body[data-page="contact"] .fhero::after,body[data-page="contact"] .dhead::after,body[data-page="contact"] .shead::after{background-image:url("img/hero-contact.svg")}
body[data-page="convocation"] .hero::after,body[data-page="convocation"] .ehead::after,body[data-page="convocation"] .fhero::after,body[data-page="convocation"] .dhead::after,body[data-page="convocation"] .shead::after{background-image:url("img/hero-programme.svg")}
body[data-page="deroule"] .hero::after,body[data-page="deroule"] .ehead::after,body[data-page="deroule"] .fhero::after,body[data-page="deroule"] .dhead::after,body[data-page="deroule"] .shead::after{background-image:url("img/hero-programme.svg")}
body[data-page="equipe"] .hero::after,body[data-page="equipe"] .ehead::after,body[data-page="equipe"] .fhero::after,body[data-page="equipe"] .dhead::after,body[data-page="equipe"] .shead::after{background-image:url("img/hero-equipe.svg")}
body[data-page="espace"] .hero::after,body[data-page="espace"] .ehead::after,body[data-page="espace"] .fhero::after,body[data-page="espace"] .dhead::after,body[data-page="espace"] .shead::after{background-image:url("img/espace-apprenant.svg")}
body[data-page="fiche-poste"] .hero::after,body[data-page="fiche-poste"] .ehead::after,body[data-page="fiche-poste"] .fhero::after,body[data-page="fiche-poste"] .dhead::after,body[data-page="fiche-poste"] .shead::after{background-image:url("img/hero-recrutement.svg")}
body[data-page="formation"] .hero::after,body[data-page="formation"] .ehead::after,body[data-page="formation"] .fhero::after,body[data-page="formation"] .dhead::after,body[data-page="formation"] .shead::after{background-image:url("img/hero-programme.svg")}
body[data-page="formations"] .hero::after,body[data-page="formations"] .ehead::after,body[data-page="formations"] .fhero::after,body[data-page="formations"] .dhead::after,body[data-page="formations"] .shead::after{background-image:url("img/hero-formations.svg")}
body[data-page="handicap"] .hero::after,body[data-page="handicap"] .ehead::after,body[data-page="handicap"] .fhero::after,body[data-page="handicap"] .dhead::after,body[data-page="handicap"] .shead::after{background-image:url("img/hero-handicap.svg")}
body[data-page="index"] .hero::after,body[data-page="index"] .ehead::after,body[data-page="index"] .fhero::after,body[data-page="index"] .dhead::after,body[data-page="index"] .shead::after{background-image:url("img/hero-accueil.svg")}
body[data-page="mentions"] .hero::after,body[data-page="mentions"] .ehead::after,body[data-page="mentions"] .fhero::after,body[data-page="mentions"] .dhead::after,body[data-page="mentions"] .shead::after{background-image:url("img/hero-legal.svg")}
body[data-page="mentions-legales"] .hero::after,body[data-page="mentions-legales"] .ehead::after,body[data-page="mentions-legales"] .fhero::after,body[data-page="mentions-legales"] .dhead::after,body[data-page="mentions-legales"] .shead::after{background-image:url("img/hero-legal.svg")}
body[data-page="recrutement"] .hero::after,body[data-page="recrutement"] .ehead::after,body[data-page="recrutement"] .fhero::after,body[data-page="recrutement"] .dhead::after,body[data-page="recrutement"] .shead::after{background-image:url("img/hero-recrutement.svg")}
body[data-page="reglement"] .hero::after,body[data-page="reglement"] .ehead::after,body[data-page="reglement"] .fhero::after,body[data-page="reglement"] .dhead::after,body[data-page="reglement"] .shead::after{background-image:url("img/hero-legal.svg")}
body[data-page="sessions"] .hero::after,body[data-page="sessions"] .ehead::after,body[data-page="sessions"] .fhero::after,body[data-page="sessions"] .dhead::after,body[data-page="sessions"] .shead::after{background-image:url("img/hero-sessions.svg")}
body[data-page="supports"] .hero::after,body[data-page="supports"] .ehead::after,body[data-page="supports"] .fhero::after,body[data-page="supports"] .dhead::after,body[data-page="supports"] .shead::after{background-image:url("img/hero-supports.svg")}
body[data-espace="entreprise"] .ehead::after{background-image:url("img/espace-entreprise.svg")}
body[data-espace="financeur"] .ehead::after{background-image:url("img/espace-financeur.svg")}
body[data-espace="formateur"] .ehead::after{background-image:url("img/espace-formateur.svg")}
.ehead,.fhero,.dhead,.shead{background:linear-gradient(135deg,#0b1020 0%,#0e1530 60%,#0b1020 100%);color:#fff}
.ehead .container,.dhead .container,.shead .container{padding-block:clamp(38px,5vw,62px)}

/* — compacité de la barre de navigation — */
nav.mainnav a,.hasmenu>button{white-space:nowrap;font-size:.845rem;padding:9px 11px}
nav.mainnav .btn{white-space:nowrap;font-size:.845rem;padding:10px 16px!important}
header.main .container{gap:12px}
@media(max-width:1240px){
  nav.mainnav{position:fixed;inset:76px 0 auto;background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px 22px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-3);display:none;max-height:calc(100vh - 76px);overflow:auto;z-index:55}
  nav.mainnav.open{display:flex}
  nav.mainnav a{padding:13px 14px;font-size:1rem;white-space:normal}
  nav.mainnav a.active::after{display:none}
  nav.mainnav .btn{width:100%;margin-top:10px!important}
  .burger{display:flex}
  .hasmenu{width:100%}.submenu{position:static;box-shadow:none;border:none;padding:0 0 0 10px;min-width:0}
}

/* — barre supérieure sur petit écran — */
@media(max-width:640px){
  .topbar{font-size:.72rem;padding:7px 0}
  .topbar .container{gap:10px}
  .topbar .loc{display:none}
  .topbar .container>div{gap:14px!important;flex-wrap:wrap}
  .phero .facts,.hero .facts{gap:18px}
}
@media(max-width:420px){ .topbar a:nth-child(1){display:none} }

/* — bandeau piloté par data-hero (pages dynamiques) — */
body[data-hero="espace-apprenant"] .hero::after,body[data-hero="espace-apprenant"] .ehead::after,body[data-hero="espace-apprenant"] .fhero::after,body[data-hero="espace-apprenant"] .dhead::after,body[data-hero="espace-apprenant"] .shead::after{background-image:url("img/espace-apprenant.svg")}
body[data-hero="hero-audit"] .hero::after,body[data-hero="hero-audit"] .ehead::after,body[data-hero="hero-audit"] .fhero::after,body[data-hero="hero-audit"] .dhead::after,body[data-hero="hero-audit"] .shead::after{background-image:url("img/hero-audit.svg")}
body[data-hero="hero-legal"] .hero::after,body[data-hero="hero-legal"] .ehead::after,body[data-hero="hero-legal"] .fhero::after,body[data-hero="hero-legal"] .dhead::after,body[data-hero="hero-legal"] .shead::after{background-image:url("img/hero-legal.svg")}
body[data-hero="hero-programme"] .hero::after,body[data-hero="hero-programme"] .ehead::after,body[data-hero="hero-programme"] .fhero::after,body[data-hero="hero-programme"] .dhead::after,body[data-hero="hero-programme"] .shead::after{background-image:url("img/hero-programme.svg")}
body[data-hero="hero-recrutement"] .hero::after,body[data-hero="hero-recrutement"] .ehead::after,body[data-hero="hero-recrutement"] .fhero::after,body[data-hero="hero-recrutement"] .dhead::after,body[data-hero="hero-recrutement"] .shead::after{background-image:url("img/hero-recrutement.svg")}
body[data-hero="hero-supports"] .hero::after,body[data-hero="hero-supports"] .ehead::after,body[data-hero="hero-supports"] .fhero::after,body[data-hero="hero-supports"] .dhead::after,body[data-hero="hero-supports"] .shead::after{background-image:url("img/hero-supports.svg")}
body[data-hero="espace-entreprise"] .hero::after,body[data-hero="espace-entreprise"] .ehead::after,body[data-hero="espace-entreprise"] .fhero::after,body[data-hero="espace-entreprise"] .dhead::after,body[data-hero="espace-entreprise"] .shead::after{background-image:url("img/espace-entreprise.svg")}
body[data-hero="espace-financeur"] .hero::after,body[data-hero="espace-financeur"] .ehead::after,body[data-hero="espace-financeur"] .fhero::after,body[data-hero="espace-financeur"] .dhead::after,body[data-hero="espace-financeur"] .shead::after{background-image:url("img/espace-financeur.svg")}
body[data-hero="espace-formateur"] .hero::after,body[data-hero="espace-formateur"] .ehead::after,body[data-hero="espace-formateur"] .fhero::after,body[data-hero="espace-formateur"] .dhead::after,body[data-hero="espace-formateur"] .shead::after{background-image:url("img/espace-formateur.svg")}

/* ---- Vignette d'illustration des cartes de formation --------------------
   Bandeau vectoriel en tête de carte ; la catégorie et le badge se posent
   dessus, sur un voile sombre qui garantit le contraste du texte blanc. */
.fcard .illu{position:relative;aspect-ratio:1200/500;overflow:hidden;background:#0b1020;border-bottom:1px solid var(--line,#e2e8f0)}
.fcard .illu img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.fcard:hover .illu img{transform:scale(1.04)}
.fcard .illu::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(180deg,rgba(11,16,32,0) 0%,rgba(11,16,32,.72) 100%);pointer-events:none}
.fcard .illu .cat{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.fcard .illu .badge{position:absolute;right:12px;top:12px;z-index:1}
.fcard .body{padding-top:16px}
@media(prefers-reduced-motion:reduce){.fcard .illu img,.fcard:hover .illu img{transition:none;transform:none}}
@media print{.fcard .illu{display:none}}