/* Vitrine MOZAIQ (lot V0) -- ADN : Nuit et or, Fraunces + Inter, bandeau. */
:root{--fond:#F7F3EA;--surface:#FFFFFF;--encre:#1B2F5B;--accent:#8A6418;--texte:#1A1D24;--doux:#4A4F5A;--trait:rgba(0,0,0,.1);
--titre:"Fraunces",Georgia,serif;--corps:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.6 var(--corps)}
a{color:var(--encre)}a:hover{color:var(--accent)}
img,svg{max-width:100%;display:block}
.c{max-width:1160px;margin:0 auto;padding:0 20px}
.saut{position:absolute;left:-999px}.saut:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}
h1,h2,h3{font-family:var(--titre);color:var(--encre);line-height:1.12;margin:0;font-weight:600}
h1{font-size:clamp(34px,5.2vw,58px)}h2{font-size:clamp(26px,3.4vw,38px)}h3{font-size:21px}
p{margin:0}
.sur{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.doux{color:var(--doux)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:12px;background:var(--encre);color:#fff;font-weight:600;text-decoration:none;border:0;font:600 16px var(--corps);cursor:pointer}
.btn:hover{color:#fff;background:var(--accent)}
.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border-radius:12px;border:1.5px solid var(--encre);color:var(--encre);font-weight:600;text-decoration:none}
.bandeau-hl{display:none;background:#FBEFD5;color:#5C3B0A;font-size:14px;padding:8px 20px;text-align:center}
.hl .bandeau-hl{display:block}
/* en-tete */
.tete{border-bottom:1px solid var(--trait);background:var(--fond);position:relative;z-index:2}
.tete .c{display:flex;align-items:center;gap:18px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.mono{width:44px;height:44px;border-radius:12px;background:var(--encre);color:var(--fond);display:flex;align-items:center;justify-content:center;font:600 18px var(--titre);flex:0 0 44px}
.marque b{font:600 21px var(--titre);display:block;line-height:1.1}.marque small{font-size:12.5px;color:var(--doux);display:block}
.nav{display:flex;gap:6px 20px;flex-wrap:wrap;flex:1;font-weight:500;font-size:15px}
.nav a{text-decoration:none;padding:10px 0}
.nav a[aria-current]{border-bottom:2px solid var(--accent)}
.outils{display:flex;gap:10px;align-items:center}
.langue{font-size:14px;text-decoration:none;border:1px solid var(--trait);border-radius:8px;padding:9px 11px}
@media (max-width:760px){.nav{order:3;flex-basis:100%;gap:4px 16px;font-size:14.5px}.outils .btn{display:none}}
/* accueil */
.heros{padding:48px 0 32px}
.heros .c{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.heros .texte{flex:1 1 440px;display:flex;flex-direction:column;gap:18px}
.heros .texte p{font-size:18px;color:var(--doux);max-width:580px}
.heros .actions{display:flex;gap:12px;flex-wrap:wrap}
.motif{flex:1 1 380px;border-radius:var(--r);overflow:hidden;aspect-ratio:2/1;background:var(--encre)}
.motif img{width:100%;height:100%;object-fit:cover}
.m-mosaique .heros{padding:0;position:relative}
.m-mosaique .heros .motif{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.m-mosaique .heros .c{position:relative;min-height:440px;align-items:flex-end;padding-top:120px;padding-bottom:28px}
.m-mosaique .heros .texte{background:var(--fond);border-radius:var(--r);padding:26px;max-width:640px;flex:0 1 640px}
.m-bandeau .heros .motif,.m-grande_photo .heros .motif{order:-1;flex-basis:100%;aspect-ratio:6/1}
.m-chiffres .heros .motif{flex:0 1 300px;aspect-ratio:1/1}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding:8px 0 40px}
.chiffre{background:var(--surface);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column}
.chiffre b{font:600 34px var(--titre);color:var(--encre);line-height:1.15}.chiffre span{font-size:14px;color:var(--doux)}
.sombre{background:var(--encre);color:var(--fond)}
.sombre h2{color:var(--fond)}.sombre .doux{color:rgba(255,255,255,.8)}
.bloc{padding:56px 0}
.bloc .entete{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.carte{background:var(--surface);color:var(--texte);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;min-height:150px;border:1px solid var(--trait)}
.carte:hover{color:var(--texte);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.carte .t{font:600 21px/1.2 var(--titre);color:var(--encre)}
.carte .bas{margin-top:auto;font-size:14px;color:var(--doux)}
.deux{display:flex;flex-wrap:wrap;gap:36px}.deux>*{flex:1 1 360px}
.boite{background:var(--surface);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--trait)}
dl.infos{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}dl.infos dt{color:var(--doux)}dl.infos dd{margin:0;font-weight:500}
.verif{background:color-mix(in srgb,var(--encre) 10%,var(--fond))}
.verif .c{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding-top:36px;padding-bottom:36px}
.pied{background:var(--encre);color:rgba(255,255,255,.86);font-size:14px}
.pied .c{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-top:30px;padding-bottom:30px}
.pied a{color:#fff}.pied b{color:#fff}.propulse{align-self:flex-end;font-size:12.5px;opacity:.85}
/* formation */
.fiche-tete{padding:40px 0 30px}
.fiche-tete .c{display:flex;flex-direction:column;gap:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:720px}
.stat{background:var(--surface);border-radius:12px;padding:12px 16px;border:1px solid var(--trait)}.stat b{font:600 22px var(--titre);color:var(--encre);display:block}
.stat span{font-size:13px;color:var(--doux)}
.annee{margin-top:20px}
.annee h3{margin-bottom:10px}
.liste{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--r);border:1px solid var(--trait)}
.liste li{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;border-top:1px solid var(--trait)}.liste li:first-child{border-top:0}
.puce{flex:0 0 30px;height:30px;border-radius:50%;background:var(--fond);color:var(--encre);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.puce.stage{border-radius:8px;background:var(--accent);color:#fff}
.liste .h{margin-left:auto;color:var(--doux);font-size:14px;white-space:nowrap}
ol.etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:e}
ol.etapes li{display:flex;gap:14px;background:var(--surface);border-radius:12px;padding:14px;border:1px solid var(--trait);counter-increment:e}
ol.etapes li::before{content:counter(e);flex:0 0 30px;height:30px;border-radius:8px;background:var(--encre);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.moyen{display:flex;justify-content:space-between;padding:11px 14px;border-radius:10px;border:1px solid var(--trait)}
.moyen.reco{background:color-mix(in srgb,var(--encre) 8%,#fff);border-color:color-mix(in srgb,var(--encre) 30%,#fff)}
.moyen.reco span{font-size:13px;color:var(--encre);font-weight:600}
.campagne{display:flex;flex-direction:column;gap:14px}
textarea,input{font:inherit;font-size:15px;border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:12px;width:100%;background:#fff;color:var(--texte)}
label{font-weight:600;font-size:14px}
.resultat{border-radius:var(--r);padding:18px;display:none;flex-direction:column;gap:8px}
.resultat.ok{display:flex;background:#E4F2E7;color:#1D5B2E}.resultat.ko{display:flex;background:#FBE4E0;color:#7A2414}.resultat.info{display:flex;background:#FBEFD5;color:#5C3B0A}
.apercu{position:sticky;top:0;z-index:10;background:#111;color:#fff;text-align:center;padding:8px;font-size:14px}
.apercu~* a{pointer-events:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media print{.tete .nav,.outils,.verif,.bandeau-hl{display:none}}