/* =========================================================================
   Pages formation dédiées — BIZ DIGITAL SCHOOL
   Feuille commune aux 10 pages de formations/. Reprend à l'identique les
   variables et les composants de index.html (charte v1.3 : navy, or, crème,
   Playfair Display + DM Sans) pour que la page dédiée soit indiscernable du
   reste du site. Créée le 1er août 2026, lors du passage des fiches empilées
   sur la page d'accueil à une page par formation.
   ========================================================================= */

:root{
  --navy:#0B2545; --navy-dark:#071A31; --navy-light:#163A66;
  --or:#C9A84C; --or-dark:#B3933F; --bronze:#7C6321;
  --creme:#F7F3EA; --creme-2:#FBF9F4; --blanc:#FFFFFF;
  --texte:#0B2545; --texte-doux:#3F5573; --texte-clair:#9FB1C6;
  --trait:#E2DBCA; --trait-fort:#CFC5AE;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--texte);background:var(--creme-2);line-height:1.72;-webkit-font-smoothing:antialiased;font-size:16.5px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
footer :focus-visible,.page-head :focus-visible{outline-color:var(--or)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.018em}

/* --- boutons (identiques à index.html) --- */
.btn{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:16px 32px;border-radius:0;border:1px solid transparent;transition:background .22s,color .22s,border-color .22s;cursor:pointer;white-space:nowrap;line-height:1}
.btn-or{background:var(--or);color:var(--navy);border-color:var(--or)}
.btn-or:hover{background:var(--or-dark);border-color:var(--or-dark)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-light);border-color:var(--navy-light)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--trait-fort)}
.btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ghost-or{background:transparent;color:var(--or);border-color:rgba(201,168,76,.55)}
.btn-ghost-or:hover{background:var(--or);color:var(--navy);border-color:var(--or)}
.btn-sm{padding:13px 22px;font-size:11px}

/* --- en-tête de page dédiée --- */
.page-head{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1)}
.page-head .wrap{display:flex;align-items:center;gap:24px;min-height:82px;flex-wrap:wrap}
.ph-brand{display:flex;align-items:center;gap:16px;flex-shrink:0}
.ph-brand img{width:50px;height:50px;object-fit:contain}
.ph-brand span{display:block}
.ph-name{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.11em;line-height:1;text-transform:uppercase;color:#fff;white-space:nowrap}
.ph-sub{font-family:var(--sans);font-size:8px;font-weight:700;letter-spacing:.2em;color:var(--or);text-transform:uppercase;margin-top:7px;white-space:nowrap}
.ph-links{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.ph-back{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--or);transition:color .2s}
.ph-back:hover{color:#fff}

/* --- fil d'Ariane --- */
.ariane{background:var(--creme);border-bottom:1px solid var(--trait)}
.ariane .wrap{padding-top:16px;padding-bottom:16px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-doux)}
.ariane a{color:var(--bronze);border-bottom:1px solid transparent;transition:border-color .2s}
.ariane a:hover{border-bottom-color:var(--bronze)}
.ariane span{margin:0 10px;color:var(--trait-fort)}

/* --- corps de la fiche --- */
.fiche-page{padding:76px 0 110px}
.f-theme{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:18px}
.ff-head{margin-bottom:56px;padding-bottom:0}
.ff-head h1{font-size:clamp(28px,4vw,44px);line-height:1.1;max-width:24ch;margin:14px 0 20px}
.ff-accroche{font-size:17.5px;color:var(--texte-doux);max-width:62ch;margin-bottom:26px}

/* --- badges et formats --- */
.badges{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-bottom:24px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;line-height:1.5}
.b-cpf{background:var(--or);color:var(--navy)}
.b-opco{background:var(--navy-light);color:#fff}
.b-etudier{background:transparent;color:var(--navy);border:1px solid var(--trait-fort)}
.b-perso{background:#EDE6D6;color:#40536D}
.ff-head .badges{margin-bottom:32px}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fmt{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);border:1px solid var(--trait-fort);padding:7px 13px;line-height:1.4;white-space:nowrap}
.fmt-note{display:block;font-size:11.5px;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--texte-doux);margin:-10px 0 20px;line-height:1.55}
.ff-head .formats{margin-bottom:26px}

/* --- bandeau des méta clés --- */
.ff-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.ff-meta>div{padding:20px 24px 20px 0;border-right:1px solid var(--trait);min-width:0}
.ff-meta>div:last-child{border-right:0}
.ff-meta>div:not(:first-child){padding-left:24px}
.ff-meta dt{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:9px}
.ff-meta dd{font-family:var(--serif);font-size:18px;line-height:1.34;color:var(--navy)}
.ff-meta dd a{border-bottom:1px solid var(--trait-fort)}

/* --- grille contenu / colonne d'informations --- */
.ff-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start}
.ff-body>*{min-width:0}
.ff-main{grid-column:span 7}
.ff-side{grid-column:9/span 4;position:sticky;top:110px}
.ff-h{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);padding-bottom:14px;border-bottom:1px solid var(--trait);margin-bottom:22px}
.ff-main .ff-h:not(:first-child){margin-top:52px}
/* sous-titre de niveau 3, à l'intérieur d'une section : registre sérif, sans filet,
   pour rester nettement distinct du .ff-h de niveau 2 */
.ff-h3{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.3;color:var(--navy);margin:34px 0 10px}
/* paragraphes de corps dans la colonne principale : sans cette règle, deux
   paragraphes consécutifs se collent et la ligne devient trop longue à lire */
.ff-main>.formule-panneau>p:not([class]),.ff-main>p:not([class]){font-size:15.5px;color:var(--texte);max-width:64ch;margin-bottom:14px}
.ff-lead{font-size:15.5px;color:var(--texte-doux);margin-bottom:14px;max-width:64ch}
.ff-obj{list-style:none;border-top:1px solid var(--trait)}
.ff-obj li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--trait);font-size:15.5px;color:var(--texte)}
.ff-obj li::before{content:"";position:absolute;left:0;top:24px;width:18px;height:1px;background:var(--or)}

/* --- accordéon de module, balise details native --- */
.mod{border-bottom:1px solid var(--trait);background:var(--blanc)}
.mod:first-of-type{border-top:1px solid var(--trait)}
.mod summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-family:var(--serif);font-size:18px;color:var(--navy);transition:background .2s}
.mod summary::-webkit-details-marker{display:none}
.mod summary::after{content:"+";margin-left:auto;font-family:var(--sans);font-size:19px;color:var(--or-dark);line-height:1}
.mod[open] summary::after{content:"\2013"}
.mod summary:hover{background:var(--creme)}
.mod-n{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);flex-shrink:0}
.mod summary em{font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.mod-in{padding:4px 24px 26px;border-top:1px solid var(--trait)}
.mod-in p{font-size:15px;color:var(--texte-doux);margin-top:18px;max-width:64ch}
.mod-in b{color:var(--navy);font-weight:700}
.mod-liv{padding-top:14px;border-top:1px solid var(--trait)}

/* commande « tout déplier », ajoutée par JavaScript : sans JS, les modules
   restent repliables un par un, rien n'est perdu */
.mod-toutdeplier{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);background:transparent;border:1px solid var(--trait-fort);padding:9px 16px;cursor:pointer;margin-bottom:18px;transition:background .2s,color .2s,border-color .2s}
.mod-toutdeplier:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* --- colonne informations pratiques --- */
.ff-side .ff-h{margin-bottom:0}
.ff-info{border-top:0}
.ff-info>div{padding:18px 0;border-bottom:1px solid var(--trait)}
.ff-info dt{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.ff-info dd{font-size:14.5px;line-height:1.7;color:var(--texte-doux)}
.ff-info dd a{color:var(--navy);border-bottom:1px solid var(--trait-fort)}
.ff-info dd.tbd,.ff-info .tbd{color:var(--texte-doux);font-style:italic}
.ff-cta{margin-top:28px}
.ff-cta-2{display:block;margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--bronze);text-align:center;border-bottom:1px solid transparent}
.ff-cta-2:hover{border-bottom-color:var(--bronze)}

/* --- grilles tarifaires et contexte tarifaire --- */
.paliers{list-style:none;border-top:1px solid var(--trait);margin:0}
.paliers li{font-family:var(--sans);display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--trait);font-size:14.5px;color:var(--texte-doux)}
.paliers li b{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--navy);white-space:nowrap}
.paliers li span{letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700;color:var(--bronze)}
.tarif-contexte{margin-top:16px;padding:18px 20px;background:var(--blanc);border:1px solid var(--trait);border-left:2px solid var(--or)}
.tarif-contexte p{font-size:14px;line-height:1.68;color:var(--texte-doux);max-width:62ch;margin:0}
.tarif-contexte .btn{margin-top:16px}

/* --- récapitulatif court à l'intérieur d'un panneau de formule ---
   même registre que .ff-meta, mais sur deux colonnes : la colonne
   principale est trop étroite pour en tenir quatre. --- */
.ff-recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--trait)}
.ff-recap>div{padding:18px 24px 18px 0;border-bottom:1px solid var(--trait);min-width:0}
.ff-recap>div:nth-child(odd){border-right:1px solid var(--trait)}
.ff-recap>div:nth-child(even){padding-left:24px}
.ff-recap dt{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:9px}
.ff-recap dd{font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--navy)}
.ff-recap dd a{border-bottom:1px solid var(--trait-fort)}

/* --- sélecteur de formule (FLE, intelligence artificielle) --- */
.formules{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--trait-fort);margin-bottom:34px;background:var(--blanc)}
.formules button{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;background:transparent;border:0;border-right:1px solid var(--trait);color:var(--texte-doux);cursor:pointer;transition:background .2s,color .2s}
.formules button:last-child{border-right:0}
.formules button[aria-selected="true"]{background:var(--navy);color:#fff}
.formule-panneau{padding:0}
.formule-panneau[hidden]{display:none}
.formule-intro{font-size:15px;color:var(--texte-doux);border-left:2px solid var(--or);padding:4px 0 4px 18px;margin-bottom:30px;max-width:64ch}
html:not(.js) .formule-panneau[hidden]{display:block}

/* --- bloc de fin : financement et retour au catalogue --- */
.fiche-fin{margin-top:96px;padding-top:52px;border-top:1px solid var(--trait-fort);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start}
.fiche-fin>*{min-width:0}
.fiche-fin .ff-fin-txt{grid-column:span 7}
.fiche-fin .ff-fin-act{grid-column:9/span 4}
.fiche-fin h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px;max-width:22ch}
.fiche-fin p{font-size:15.5px;color:var(--texte-doux);max-width:60ch;margin-bottom:22px}
.fiche-fin .btn{margin-right:12px;margin-bottom:12px}
.retour-cat{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);border-bottom:1px solid var(--trait-fort);padding-bottom:3px}
.retour-cat:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* --- pied de page --- */
footer{background:var(--navy);color:var(--texte-clair);padding:64px 0 40px;font-size:13.5px}
footer .wrap{display:flex;flex-direction:column;gap:26px}
.f-brand{display:flex;align-items:center;gap:14px}
.f-brand img{width:44px;height:44px;object-fit:contain}
.f-brand-name{display:block;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.f-brand-sub{display:block;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-top:6px}
.f-qualiopi{padding-top:24px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;line-height:1.7}
.f-qualiopi b{color:#fff}
.f-qualiopi a{color:var(--or);border-bottom:1px solid rgba(201,168,76,.5)}
.f-liens{display:flex;flex-wrap:wrap;gap:18px 26px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
.f-liens a{color:var(--texte-clair);transition:color .2s}
.f-liens a:hover{color:var(--or)}
.f-bottom{padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:12px;color:#8FA2B8}

/* --- responsive --- */
@media(max-width:960px){
  .wrap{padding:0 28px}
  .fiche-page{padding:56px 0 84px}
  .ff-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-meta>div:nth-child(2){border-right:0}
  .ff-meta>div:nth-child(3),.ff-meta>div:nth-child(4){border-top:1px solid var(--trait)}
  .ff-meta>div:nth-child(3){padding-left:0}
  .ff-main,.ff-side{grid-column:span 12}
  .ff-side{position:static;margin-top:52px}
  .fiche-fin .ff-fin-txt,.fiche-fin .ff-fin-act{grid-column:span 12}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .page-head .wrap{min-height:0;padding-top:14px;padding-bottom:14px}
  .ff-meta{grid-template-columns:minmax(0,1fr)}
  .ff-meta>div{border-right:0;padding-left:0!important;border-top:1px solid var(--trait)}
  .ff-meta>div:first-child{border-top:0}
  .mod summary{padding:18px}
  .mod-in{padding:4px 18px 22px}
  .formules{flex-direction:column}
  .formules button{border-right:0;border-bottom:1px solid var(--trait);text-align:left}
  .formules button:last-child{border-bottom:0}
  .ff-recap{grid-template-columns:minmax(0,1fr)}
  .ff-recap>div{border-right:0;padding-left:0}
  .ff-recap>div:nth-child(odd){border-right:0}
  .ff-recap>div:nth-child(even){padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}