/* HOURA! Centre de Formation — feuille « haut de gamme » (lot 20, 02/11/2026). Chargée EN DERNIER, après premium.css (lot 19).
   Direction validée sur les maquettes du 2 novembre : blanc cassé et anthracite, or HOURA! seul accent,
   Polices : Montserrat partout, comme l'ancien LMS (choix de Rachid du 2 novembre : il préférait la police d'avant pour les titres).
   Titres et grands chiffres en Montserrat 600, seconde moitié d'un titre en Montserrat 300 dorée.
   1. Polices  2. Jetons  3. Typographie  4. Menus apprenant  5. Téléphone  6. Composants  7. Administration
   8. Composants « hg » (tableau de bord et nouvelles pages)  9. Tableau de bord  10. Téléphone, tableau de bord */

/* ─────────── 1. Polices : Montserrat (déclarée et préchargée par includes/campagne-assets.php, fichiers dans assets/fonts) ─────────── */

/* ─────────── 2. Jetons ─────────── */
html body.drop-campaign.hg,html body.auth-page.hg{
  --hg-fond:#F3F5F9;--hg-fond-2:#DDE1E8;--hg-surface:#FFFFFF;--hg-surface-2:#F4F6F9;
  --hg-encre:#00205B;--hg-texte:#26272A;--hg-doux:#5E6268;--hg-pale:#7E8289;
  --hg-or:#003087;--hg-or-texte:#001D52;--hg-or-voile:#E3EAF7;--hg-or-clair:#B0C3E5;--hg-or-vif:#6D91D4;
  --hg-bloc:#131314;--hg-sur-bloc:#EEF1F5;--hg-sur-bloc-doux:rgba(238,241,245,.68);
  --hg-ok:#123E8E;--hg-ok-voile:#E4E6EB;--hg-al:#B82020;--hg-al-voile:#F6DDDD;--hg-piste:#DCE0E7;
  --hg-ombre-1:0 1px 2px rgba(0,32,91,.04),0 10px 30px -14px rgba(0,32,91,.14);
  --hg-ombre-2:0 2px 6px rgba(0,32,91,.05),0 28px 60px -28px rgba(0,32,91,.30);
  --hg-serif:'Montserrat','Helvetica Neue',Arial,sans-serif;--hg-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --il-trait:#191A1C;--il-voile:#B5C9ED;--il-or:#043184;--il-fond:#FFFFFF;
  /* les jetons des lots 18 et 19 prennent les nouvelles valeurs */
  --pr-fond:#F3F5F9;--pr-sable:#91B4F4;--pr-miel:#E3EAF7;--pr-sable-clair:#CBD9F2;--pr-creme:#F4F6F9;
  --pr-or:#003087;--pr-or-texte:#001D52;--pr-or-fonce:#001947;--pr-or-vif:#6D91D4;
  --pr-encre:#00205B;--pr-texte:#26272A;--pr-gris:#5E6268;--pr-gris-menu:#52565C;--pr-gris-clair:#E0E4EA;--pr-ligne:#DCE0E7;
  --pr-rouge:#B82020;--pr-rouge-pale:#F6DDDD;--pr-vert:#123E8E;--pr-vert-pale:#E4E6EB;
  --pr-ombre:var(--hg-ombre-1);--pr-ombre-s:0 1px 2px rgba(0,32,91,.04),0 6px 18px -10px rgba(0,32,91,.16);--pr-ombre-forte:var(--hg-ombre-2);
  --rf-fond:#F3F5F9;--rf-gris:#E0E4EA;--rf-gris2:#F4F6F9;--rf-gris3:#DCE0E7;--rf-or-p:#E3EAF7;
  --drop-paper:#F3F5F9;--drop-mist:#E0E4EA;--drop-line:#DCE0E7;
  background:var(--hg-fond)!important;color:var(--hg-texte);font-family:var(--hg-sans)!important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html body.drop-campaign.hg :is(input,select,textarea,button){font-family:var(--hg-sans)}

/* ─────────── 3. Typographie : titres en serif éditoriale, chiffres alignés ─────────── */
html body.drop-campaign.hg :is(.d-content,.da-content) :is(h1,h2):not(.hg-sans):not([class*="m-top"]):not([class*="hg-"]),
html body.drop-campaign.hg :is(.rf-titre,.rf-h2,.tb-titre,.dr-title,.hg-titre){
  font-family:var(--hg-serif)!important;font-weight:600!important;letter-spacing:-.035em!important
}
/* couleur des titres : chaque page garde la sienne (blanc sur les cartes sombres), sauf les en-têtes connus */
html body.drop-campaign.hg :is(.rf-titre,.rf-h2,.tb-titre,.hg-titre){color:var(--hg-encre)!important}
html body.drop-campaign.hg :is(.d-content,.da-content) h1:not(.hg-sans){line-height:1.08!important}
html body.drop-campaign.hg :is(.d-content,.da-content) h2:not(.hg-sans){line-height:1.14!important}
html body.drop-campaign.hg :is(.rf-titre span,.tb-titre span,.hg-titre em){font-family:var(--hg-serif)!important;font-style:normal;font-weight:300!important;color:var(--hg-or-texte)!important}
html body.drop-campaign.hg :is(.d-content,.da-content) h3{letter-spacing:-.005em}
html body.drop-campaign.hg :is(.pr-chiffre-v,.rf-arc-val b,.rf-anneau-txt b){font-family:var(--hg-serif)!important;font-weight:600!important;letter-spacing:-.02em!important}
html body.drop-campaign.hg .num,html body.drop-campaign.hg table td{font-variant-numeric:tabular-nums lining-nums}

/* ─────────── 4. Menus apprenant (rail + panneau conservés, nouveau dessin) ─────────── */
@media(min-width:769px){
  html body.drop-campaign.hg .d-side.dr{width:312px!important;background:var(--hg-fond)!important;box-shadow:none!important;border:0!important}
  html body.drop-campaign.hg .d-main{margin-left:312px!important}
}
html body.drop-campaign.hg .dr-rail{background:transparent!important;width:84px!important;gap:4px!important;padding:24px 0 20px!important}
html body.drop-campaign.hg .dr-logo{width:44px!important;height:44px!important;border-radius:14px!important;margin-bottom:18px!important}
html body.drop-campaign.hg .dr-tab{width:72px!important;border-radius:20px!important;padding:8px 2px 9px!important;color:var(--hg-doux)!important;background:transparent!important;box-shadow:none!important;transition:background-color .24s ease}
html body.drop-campaign.hg .dr-tab:hover{background:var(--hg-surface)!important}
html body.drop-campaign.hg .dr-ico{width:44px!important;height:36px!important;border-radius:999px!important;background:transparent!important}
html body.drop-campaign.hg .dr-tab .dr-ico svg{stroke:var(--hg-texte)!important;stroke-width:1.6!important}
html body.drop-campaign.hg .dr-tab.sel .dr-ico{background:var(--hg-or)!important;color:#FFFFFF}
html body.drop-campaign.hg .dr-tab.sel .dr-ico svg{stroke:var(--hg-encre)!important}
html body.drop-campaign.hg .dr-tab.sel{background:transparent!important}
html body.drop-campaign.hg .dr-lbl{font-size:12px!important;font-weight:500!important;color:var(--hg-doux)}
html body.drop-campaign.hg .dr-tab.sel .dr-lbl{color:var(--hg-encre)!important;font-weight:600!important}
html body.drop-campaign.hg .dr-tab.here:not(.sel) .dr-ico::after{border-color:var(--hg-fond)!important;background:var(--hg-or)!important;color:#FFFFFF}
html body.drop-campaign.hg .dr-out{border-radius:50%!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)}
html body.drop-campaign.hg .dr-panel{padding:24px 16px 20px 4px!important;gap:10px!important;background:transparent!important}
html body.drop-campaign.hg .dt-logo-panel{width:124px!important;height:auto!important;margin:2px 0 6px 12px!important;display:block}
html body.drop-campaign.hg .dr-brand .d-brand-s{color:var(--hg-pale)!important;font-size:12px!important;font-weight:500!important;padding-left:12px}
html body.drop-campaign.hg .dr-head{padding:8px 12px 4px!important}
html body.drop-campaign.hg .dr-title{font-size:26px!important;line-height:1.1!important}
html body.drop-campaign.hg .dr-sub{color:var(--hg-doux)!important;font-size:12.5px!important;margin-top:4px!important}
html body.drop-campaign.hg .dr-panel .d-group{background:transparent!important;border:0!important;padding:0!important;gap:2px!important;box-shadow:none!important}
html body.drop-campaign.hg :is(.dr-panel .d-group a,.m-drawer .m-group a){min-height:44px!important;padding:0 14px!important;border-radius:999px!important;font-size:14px!important;font-weight:500!important;color:var(--hg-texte)!important;gap:12px!important;white-space:nowrap}
html body.drop-campaign.hg :is(.dr-panel .d-group a,.m-drawer .m-group a) .ico svg{stroke:var(--hg-texte)!important;stroke-width:1.6!important}
html body.drop-campaign.hg :is(.dr-panel .d-group a,.m-drawer .m-group a):hover{background:var(--hg-surface)!important;color:var(--hg-encre)!important}
html body.drop-campaign.hg :is(.d-nav,.m-drawer) a.on{background:var(--hg-or)!important;color:#FFFFFF;font-weight:600!important;box-shadow:none!important}
html body.drop-campaign.hg :is(.d-nav,.m-drawer) a.on .ico svg{stroke:var(--hg-encre)!important}
html body.drop-campaign.hg :is(.d-nav,.m-drawer) a.on::after{display:none!important}
html body.drop-campaign.hg .dr-panel a.dr-promo{position:relative;overflow:hidden;border-radius:26px!important;padding:18px 18px!important;background:var(--hg-bloc)!important;gap:4px!important}
html body.drop-campaign.hg .dr-panel a.dr-promo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 100% 0%,rgba(109,145,212,.32),transparent 70%);pointer-events:none}
html body.drop-campaign.hg .dr-promo-t{position:relative;font-family:var(--hg-serif)!important;font-size:19px!important;font-weight:600!important;color:var(--hg-sur-bloc)!important;letter-spacing:-.01em}
html body.drop-campaign.hg .dr-promo-s{position:relative;color:var(--hg-sur-bloc-doux)!important;font-size:12.5px!important}

/* Barre du haut (ordinateur) */
html body.drop-campaign.hg .d-topbar{padding-top:20px!important;padding-bottom:4px!important}
html body.drop-campaign.hg .d-topbar h1{font-family:var(--hg-sans)!important;font-size:14px!important;font-weight:500!important;color:var(--hg-doux)!important;letter-spacing:.01em}
html body.drop-campaign.hg .d-topbar-pill{background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important;font-weight:500!important;padding:8px 16px!important;font-size:13px!important}
html body.drop-campaign.hg :is(.d-user-av,.da-user-av,.da-avatar){width:44px!important;height:44px!important;background:var(--hg-bloc)!important;color:var(--hg-or-vif)!important;font-size:13px!important;font-weight:600!important}
html body.drop-campaign.hg #dqTemps{background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important;border-radius:999px!important;padding:8px 14px!important}

/* ─────────── 5. Téléphone : barre du haut, tiroir, barre de navigation flottante ─────────── */
@media(max-width:768px){
  html body.drop-campaign.hg .m-top{background:var(--hg-fond)!important;padding-top:calc(12px + env(safe-area-inset-top,0px))!important}
  html body.drop-campaign.hg .m-top-av{background:var(--hg-bloc)!important;color:var(--hg-or-vif)!important;border-radius:50%!important}
  html body.drop-campaign.hg .m-top-info h1{font-family:var(--hg-sans)!important;font-size:15px!important;font-weight:600!important;color:var(--hg-encre)!important}
  html body.drop-campaign.hg .m-top-btn{width:44px!important;height:44px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important}
  html body.drop-campaign.hg .m-drawer-panel{background:var(--hg-fond)!important;border-radius:0 32px 32px 0!important}
  html body.drop-campaign.hg .m-drawer .m-group{background:transparent!important;border:0!important;box-shadow:none!important;padding:4px 0!important}
  html body.drop-campaign.hg .m-drawer-sec{color:var(--hg-doux)!important;font-size:12px!important;font-weight:500!important;padding:10px 14px 6px!important}
  html body.drop-campaign.hg .d-content{padding-bottom:120px!important}
  html body.drop-campaign.hg .m-nav{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:68px;border-radius:999px!important;
    background:rgba(19,19,20,.94)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 40px -16px rgba(0,0,0,.45)!important;
    padding:8px!important;display:flex!important;align-items:center;justify-content:space-between;gap:2px}
  html body.drop-campaign.hg .m-nav :is(a,button){min-height:52px!important;min-width:52px;flex:0 0 auto;flex-direction:row!important;gap:8px!important;padding:0 14px!important;border-radius:999px!important;color:rgba(239,242,246,.74)!important}
  html body.drop-campaign.hg .m-nav svg{width:22px!important;height:22px!important;padding:0!important;background:transparent!important;stroke:currentColor!important;stroke-width:1.7!important}
  html body.drop-campaign.hg .m-nav span{font-size:13.5px!important;font-weight:600!important;color:inherit!important}
  html body.drop-campaign.hg .m-nav :is(a,button):not(.on) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html body.drop-campaign.hg .m-nav a.on{background:var(--hg-or)!important;color:#FFFFFF;padding:0 18px!important}
  html body.drop-campaign.hg .m-nav a.on svg{background:transparent!important;stroke:#121314!important}
}

/* ─────────── 6. Composants communs ─────────── */
html body.drop-campaign.hg :is(.d-content,.da-content) :is(.card,.l-card,.d-card,.db-cd,.tb-card,.pc-form,.da-card,.adm-card,.pr-carte,.rf-carte){border-radius:28px!important;box-shadow:var(--hg-ombre-1)!important}
html body.drop-campaign.hg :is(.d-content,.da-content) :is(.l-btn-gold,.l-btn-dark,.tb-btn.pri,.btn-primary,.da-btn-primary,.rf-btn-noir){background:var(--hg-encre)!important;border-color:var(--hg-encre)!important;color:var(--hg-fond)!important}
html body.drop-campaign.hg :is(.d-content,.da-content) :is(.l-btn-outline,.btn-outline,.btn-secondary,.rf-btn-gris){background:var(--hg-surface)!important;border-color:transparent!important;color:var(--hg-encre)!important;box-shadow:var(--hg-ombre-1)}
html body.drop-campaign.hg :is(.d-content,.da-content) .rf-btn-or{background:var(--hg-or)!important;color:#FFFFFF}
html body.drop-campaign.hg :is(.d-content,.da-content) :is(input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=password],input[type=search],input:not([type]),select,textarea){border:0!important;box-shadow:inset 0 0 0 1.5px var(--hg-fond-2)!important;border-radius:16px!important}
html body.drop-campaign.hg :is(.d-content,.da-content) :is(input,select,textarea):focus{box-shadow:inset 0 0 0 1.5px var(--hg-or),0 0 0 4px var(--hg-or-voile)!important}
html body.drop-campaign.hg .rf-accueil{background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)}
html body.drop-campaign.hg .rf-jauge{background:var(--hg-bloc)!important}
html body.drop-campaign.hg .rf-ep-code{background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important;font-family:var(--hg-serif)!important;font-style:normal;font-weight:600!important}
html body.drop-campaign.hg .rf-ep-ok .rf-ep-plein{background:var(--hg-encre)!important}
html body.drop-campaign.hg .rf-ep-barre{background:var(--hg-piste)!important}

/* ─────────── 7. Administration ─────────── */
html body.drop-campaign.hg.adm .da-side{background:var(--hg-fond)!important;box-shadow:none!important}
html body.drop-campaign.hg.adm .da-nav a{color:var(--hg-texte)!important}
html body.drop-campaign.hg.adm .da-nav a .i svg{stroke:var(--hg-texte)!important;stroke-width:1.6!important}
html body.drop-campaign.hg.adm .da-nav a:hover{background:var(--hg-surface)!important}
html body.drop-campaign.hg.adm .da-nav a.active{background:var(--hg-or)!important;color:#FFFFFF}
html body.drop-campaign.hg.adm .da-nav a.active::after{display:none!important}
html body.drop-campaign.hg.adm .da-nav-section{color:var(--hg-doux)!important}
html body.drop-campaign.hg.adm .tb-head{background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important}
html body.drop-campaign.hg.adm .tb-titre{font-size:40px!important}
html body.drop-campaign.hg.adm .pr-bandeau>.pr-stat{border-radius:26px!important}
html body.drop-campaign.hg.adm .tb-card.nuit{background:var(--hg-bloc)!important;position:relative;overflow:hidden}

/* ─────────── 8. Composants « hg » ─────────── */
.hg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hg-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hg-ic .pl{fill:currentColor;stroke:none}
.hg-il{display:block;flex:0 0 auto}
.hg-il .t{fill:none;stroke:var(--il-trait);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-il .tf{fill:var(--il-fond);stroke:var(--il-trait);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-il .v{fill:var(--il-voile)}
.hg-il .o{fill:var(--il-or)}
.hg-il .ot{fill:none;stroke:var(--il-or);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body.hg .hg-sur{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--hg-doux);margin:0}
html body.hg .hg-sur.or{color:var(--hg-or-texte)}
html body.hg .hg-t1{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(34px,4vw,56px)!important;line-height:1.1!important;letter-spacing:-.045em!important;color:var(--hg-encre)!important;margin:0}
html body.hg .hg-t1 em,html body.hg .hg-t2 em,html body.hg .hg-t3 em{font-style:normal;font-weight:300;color:var(--hg-or-texte)}
html body.hg .hg-t2{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(26px,2.6vw,34px)!important;line-height:1.18!important;letter-spacing:-.035em!important;color:var(--hg-encre)!important;margin:0}
html body.hg .hg-t3{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:24px!important;line-height:1.2!important;letter-spacing:-.025em!important;color:var(--hg-encre)!important;margin:0}
html body.hg .hg-t4{font-family:var(--hg-sans)!important;font-size:17px!important;line-height:1.35;font-weight:600!important;color:var(--hg-encre)!important;margin:0;letter-spacing:-.005em!important}
html body.hg .hg-txt{font-size:17px;line-height:1.6;color:var(--hg-texte);margin:0}
html body.hg .hg-leg{font-size:14px;line-height:1.5;color:var(--hg-doux);margin:0}
html body.hg .hg-chiffre{font-family:var(--hg-serif);font-weight:600;letter-spacing:-.025em;line-height:.95;color:var(--hg-encre);font-variant-numeric:lining-nums tabular-nums;margin:0}
html body.hg .hg-chiffre small{font-family:var(--hg-sans);font-size:14px;letter-spacing:0;color:var(--hg-doux);margin-left:6px;font-weight:400}
html body.hg .hg-surf{background:var(--hg-surface);border-radius:28px;box-shadow:var(--hg-ombre-1)}
html body.hg .hg-bloc{position:relative;overflow:hidden;background:var(--hg-bloc);color:var(--hg-sur-bloc);border-radius:32px}
html body.hg .hg-bloc::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 92% 0%,rgba(109,145,212,.30),transparent 70%),radial-gradient(45% 50% at 100% 100%,rgba(109,145,212,.10),transparent 70%)}
html body.hg .hg-bloc>*{position:relative}
html body.hg .hg-bloc :is(.hg-t2,.hg-t3,.hg-t4,.hg-chiffre){color:var(--hg-sur-bloc)!important}
html body.hg .hg-bloc :is(.hg-leg,.hg-sur){color:var(--hg-sur-bloc-doux)}
/* boutons */
html body.hg a.hg-btn,html body.hg button.hg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px!important;border:0;font:500 15px/1 var(--hg-sans);letter-spacing:.005em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s cubic-bezier(.2,.8,.2,1),background-color .24s ease}
html body.hg .hg-btn .hg-ic{width:18px;height:18px}
html body.hg .hg-btn-p{background:var(--hg-encre)!important;color:var(--hg-fond)!important}
html body.hg .hg-btn-p:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(0,32,91,.55)}
html body.hg .hg-btn-or{background:var(--hg-or)!important;color:#FFFFFF}
html body.hg .hg-btn-or:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(0,48,135,.7)}
html body.hg .hg-btn-s{background:var(--hg-surface)!important;color:var(--hg-encre)!important;box-shadow:var(--hg-ombre-1)}
html body.hg .hg-btn-s:hover{transform:translateY(-1px);box-shadow:var(--hg-ombre-2)}
html body.hg .hg-btn-l{min-height:44px!important;padding:0!important;background:transparent!important;color:var(--hg-encre)!important}
html body.hg .hg-btn-l:hover{color:var(--hg-or-texte)!important}
html body.hg .hg-btn-sm{min-height:42px;padding:0 18px;font-size:14px}
html body.hg .hg-bloc .hg-btn-l{color:var(--hg-sur-bloc)!important}
/* puces */
html body.hg .hg-puce{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border-radius:999px!important;font-size:13px;font-weight:500;white-space:nowrap;background:var(--hg-or-voile);color:var(--hg-or-texte);text-decoration:none}
html body.hg .hg-puce .hg-ic{width:15px;height:15px}
html body.hg .hg-puce.n{background:var(--hg-fond-2);color:var(--hg-texte)}
html body.hg .hg-puce.b{background:var(--hg-surface);color:var(--hg-encre);box-shadow:var(--hg-ombre-1)}
html body.hg .hg-puce.ok{background:var(--hg-ok-voile);color:var(--hg-ok)}
html body.hg .hg-puce.al{background:var(--hg-al-voile);color:var(--hg-al)}
html body.hg .hg-puce.sm{min-height:26px;padding:0 11px;font-size:12px}
html body.hg .hg-puce.verre{background:rgba(255,255,255,.7);color:var(--hg-encre);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--hg-ombre-1)}
html body.hg .hg-bloc .hg-puce.ok{background:rgba(108,153,233,.16);color:#141B2D}
html body.hg .hg-verre{background:rgba(255,255,255,.66);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--hg-ombre-2),inset 0 0 0 1px rgba(255,255,255,.7)}
/* barres */
html body.hg .hg-barre{position:relative;height:6px;border-radius:999px;background:var(--hg-piste)}
html body.hg .hg-barre>i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--hg-encre);animation:hgPousse 1.1s cubic-bezier(.2,.8,.2,1) both}
html body.hg .hg-barre>i.or{background:var(--hg-or);color:#FFFFFF}
html body.hg .hg-barre>i.al{background:var(--hg-al)}
html body.hg .hg-barre>b{position:absolute;top:-4px;width:2px;height:14px;border-radius:2px;background:var(--hg-pale)}
@keyframes hgPousse{from{width:0}}
@keyframes hgAnneau{from{stroke-dashoffset:var(--plein)}}
@keyframes hgMonte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html body.hg [class^="hg-"],html body.hg [class*=" hg-"]{animation:none!important;transition:none!important}}

/* ─────────── 9. Tableau de bord ─────────── */
html body.hg .hg-db{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:0}
html body.hg .hg-db img{border-radius:0}
html body.hg .hg-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"tete arche" "reprise arche";column-gap:56px;row-gap:28px;align-items:end}
html body.hg .hg-hero-tete{grid-area:tete;display:flex;flex-direction:column;gap:20px;animation:hgMonte .6s cubic-bezier(.2,.8,.2,1) both;align-self:end}
html body.hg .hg-hero-tete .hg-txt{max-width:540px}
html body.hg .hg-pastilles{display:flex;flex-wrap:wrap;gap:8px}
html body.hg .hg-hero-reprise{grid-area:reprise;align-self:start}
html body.hg .hg-reprise{padding:24px 28px 24px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-items:center;max-width:620px}
html body.hg .hg-reprise .hg-il{grid-row:span 2;width:84px;height:84px}
html body.hg .hg-reprise .hg-barre{grid-column:2;margin-top:12px}
html body.hg .hg-reprise .hg-actions{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:16px}
html body.hg .hg-arche-z{grid-area:arche;position:relative;height:620px;align-self:center}
html body.hg .hg-arche-z::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--hg-or-voile);top:20px;right:-32px}
html body.hg .hg-arche-fond{position:absolute;left:24px;right:0;top:120px;bottom:0;border-radius:260px 260px 36px 36px;overflow:hidden;background:linear-gradient(180deg,#92B3F0 0%,#A0B3D8 100%);box-shadow:var(--hg-ombre-2)}
html body.hg .hg-arche-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 20%,rgba(255,255,255,.35),transparent 70%);pointer-events:none}
html body.hg .hg-arche-fond.photo::after{background:linear-gradient(180deg,rgba(0,32,91,0) 55%,rgba(0,32,91,.28))}
html body.hg .hg-arche-fond.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 40%}
html body.hg .hg-arche-pers{position:absolute;left:24px;right:0;top:120px;bottom:0;clip-path:inset(-140px 0 0 0 round 0 0 36px 36px)}
html body.hg .hg-arche-pers img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:610px;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(0,32,91,.18))}
html body.hg .hg-serie{position:absolute;top:236px;right:-16px;z-index:4}
html body.hg .hg-jauge-v{position:absolute;left:-32px;bottom:36px;z-index:4;display:flex;align-items:center;gap:20px;padding:18px 26px 18px 18px;border-radius:32px;max-width:400px}
html body.hg .hg-anneau{position:relative;flex:0 0 auto}
html body.hg .hg-anneau svg{display:block;transform:rotate(-90deg)}
html body.hg .hg-anneau .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--hg-serif);font-weight:600;font-size:34px;color:var(--hg-encre);letter-spacing:-.02em}
html body.hg .hg-anneau .val span{font-size:16px;margin:8px 0 0 2px}
html body.hg .hg-sec{margin-top:80px}
html body.hg .hg-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
html body.hg .hg-entete .hg-leg{margin-top:10px}
html body.hg .hg-duo{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:32px;align-items:start}
html body.hg .hg-liste{padding:8px}
html body.hg .hg-act{display:grid;grid-template-columns:72px minmax(0,1fr) auto 44px;gap:18px;align-items:center;padding:14px 14px 14px 10px;border-radius:22px;text-decoration:none!important;color:inherit;transition:background-color .24s ease}
html body.hg .hg-act:hover{background:var(--hg-surface-2)}
html body.hg .hg-act .hg-t4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px!important}
html body.hg .hg-act .hg-leg{margin-top:4px}
html body.hg .hg-chev{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--hg-fond);color:var(--hg-encre)}
html body.hg .hg-exam{padding:34px 34px 30px;min-height:100%}
html body.hg .hg-exam .grand{display:flex;align-items:baseline;gap:12px;margin:32px 0 6px}
html body.hg .hg-exam .grand .hg-chiffre{font-size:120px}
html body.hg .hg-exam .grand span{font-size:20px;color:var(--hg-sur-bloc)}
html body.hg .hg-exam-l{display:flex;flex-direction:column;gap:12px;margin:24px 0 28px}
html body.hg .hg-exam-l div{display:flex;gap:12px;align-items:center;font-size:14.5px;color:var(--hg-sur-bloc)}
html body.hg .hg-exam-l .rond{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 28px;background:rgba(238,241,245,.1);color:#141B2D}
html body.hg .hg-exam-l .rond .hg-ic{width:15px;height:15px}
html body.hg .hg-exam-l .fait .rond{background:var(--hg-or);color:#FFFFFF}
html body.hg .hg-trio{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:56px;align-items:start}
html body.hg .hg-mats{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
html body.hg .hg-mat{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px;border-radius:22px}
html body.hg .hg-mat:hover{background:var(--hg-surface-2)}
html body.hg .hg-mat .lettre{grid-row:span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--hg-or-voile);font-family:var(--hg-serif);font-style:normal;font-weight:600;font-size:21px;color:var(--hg-or-texte)}
html body.hg .hg-mat .nom{font-size:14.5px;line-height:1.3;font-weight:500;color:var(--hg-encre)}
html body.hg .hg-mat .note{grid-row:span 2;text-align:right}
html body.hg .hg-mat .note .hg-chiffre{font-size:32px}
html body.hg .hg-mat .note small{display:block;margin:4px 0 0;font-size:12px;color:var(--hg-doux);font-family:var(--hg-sans)}
html body.hg .hg-mat .vide{font-size:13px;color:var(--hg-doux);font-weight:500}
html body.hg .hg-mat.prio{background:var(--hg-or-voile);grid-column:1/-1}
html body.hg .hg-mat.prio .lettre{background:var(--hg-or);color:#FFFFFF}
html body.hg .hg-mat.prio .hg-barre{background:rgba(0,48,135,.18);color:#FFFFFF}
html body.hg .hg-mat.elim .lettre{background:var(--hg-al-voile);color:var(--hg-al)}
html body.hg .hg-mats-note{grid-column:1/-1;padding:8px 16px 10px;font-size:13px;color:var(--hg-doux)}
html body.hg .hg-mats-note a{color:var(--hg-encre);font-weight:500}
html body.hg .hg-semaine{display:flex;flex-direction:column;gap:36px;padding-top:8px}
html body.hg .hg-semaine .gros .hg-chiffre{font-size:68px}
html body.hg .hg-semaine .gros .hg-chiffre small{font-size:16px}
html body.hg .hg-cols{display:flex;align-items:flex-end;gap:10px;height:112px;margin-top:24px}
html body.hg .hg-cols div{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
html body.hg .hg-cols i{width:12px;border-radius:999px;background:var(--hg-fond-2);display:block;min-height:6px}
html body.hg .hg-cols i.on{background:var(--hg-encre)}
html body.hg .hg-cols i.auj{background:var(--hg-or);color:#FFFFFF}
html body.hg .hg-cols span{font-size:11.5px;color:var(--hg-doux);font-weight:500}
html body.hg .hg-paire{display:grid;grid-template-columns:1fr 1fr;gap:24px}
html body.hg .hg-paire .hg-chiffre{font-size:44px}
html body.hg .hg-cartes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:24px}
html body.hg .hg-cv{position:relative;height:320px;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#EFF2F6;box-shadow:var(--hg-ombre-1);text-decoration:none!important;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease}
html body.hg .hg-cv:hover{transform:translateY(-3px);box-shadow:var(--hg-ombre-2)}
html body.hg .hg-cv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important}
html body.hg .hg-cv .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,32,91,0) 35%,rgba(0,32,91,.78))}
html body.hg .hg-cv>*:not(img):not(.voile):not(.go){position:relative}
html body.hg .hg-cv .hg-t3{color:#EFF2F6!important;font-size:27px!important}
html body.hg .hg-cv .hg-leg{color:rgba(239,242,246,.8);margin-top:8px;max-width:340px}
html body.hg .hg-cv .go{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(239,242,246,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#141B2D}
html body.hg .hg-cv.claire{background:var(--hg-or-voile);color:var(--hg-encre);box-shadow:none;justify-content:space-between}
html body.hg .hg-cv.claire .hg-t3{color:var(--hg-encre)!important}
html body.hg .hg-cv.claire .hg-leg{color:var(--hg-texte)}
html body.hg .hg-cv.claire .go{background:var(--hg-surface);color:var(--hg-encre);box-shadow:var(--hg-ombre-1)}
html body.hg .hg-cv.nuit{background:var(--hg-bloc);justify-content:space-between}
html body.hg .hg-raccourcis{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
html body.hg .hg-raccourcis a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--hg-surface);box-shadow:var(--hg-ombre-1);font-size:14.5px;font-weight:500;color:var(--hg-encre);text-decoration:none}
html body.hg .hg-raccourcis a:hover{box-shadow:var(--hg-ombre-2)}
html body.hg .hg-aide{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding:28px 0 0 28px;margin-top:24px;border-radius:32px;background:var(--hg-bloc);color:var(--hg-sur-bloc)}
html body.hg .hg-aide .txt{padding-bottom:28px}
html body.hg .hg-aide :is(.hg-t2,.hg-t3){color:var(--hg-sur-bloc)!important}
html body.hg .hg-aide .hg-leg{color:var(--hg-sur-bloc-doux);margin-top:8px;max-width:520px}
html body.hg .hg-aide .portrait{width:150px;height:200px;border-radius:75px 75px 0 0;overflow:hidden;margin-right:28px}
html body.hg .hg-aide .portrait img{width:100%;height:100%;object-fit:cover;object-position:top}
html body.hg .hg-ligne{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;background:var(--hg-surface-2);text-decoration:none!important;color:inherit}
html body.hg .hg-ligne+.hg-ligne{margin-top:6px}
html body.hg .hg-ligne:hover{background:var(--hg-or-voile)}
html body.hg .hg-ligne .rond{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--hg-or-voile);color:var(--hg-or-texte)}
html body.hg .hg-ligne b{display:block;font-weight:600;color:var(--hg-encre);font-size:15px}
html body.hg .hg-ligne .hg-leg{margin-top:2px}
html body.hg .hg-ligne.direct{background:var(--hg-bloc);color:var(--hg-sur-bloc)}
html body.hg .hg-ligne.direct b{color:var(--hg-sur-bloc)}
html body.hg .hg-ligne.direct .hg-leg{color:var(--hg-sur-bloc-doux)}
html body.hg .hg-date{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;margin-top:24px;border-radius:26px;background:var(--hg-or-voile)}
html body.hg .hg-date .t{flex:1 1 260px}
html body.hg .hg-date .t b{display:block;font-size:16px;color:var(--hg-encre)}
html body.hg .hg-date :is(select,input){min-height:48px!important;padding:0 18px!important;border-radius:999px!important;background:var(--hg-surface)!important;border:0!important;font:inherit}
html body.hg .hg-afaire{padding:24px;margin-top:24px}
html body.hg .hg-afaire .hg-t3{margin-bottom:14px}

/* ─────────── 10. Tableau de bord : tablette et téléphone ─────────── */
@media(max-width:1180px){
  html body.hg .hg-hero{column-gap:32px}
  html body.hg .hg-jauge-v{left:-12px}
  html body.hg .hg-trio{grid-template-columns:1fr;gap:40px}
  html body.hg .hg-semaine{display:grid;grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:1100px){
  html body.hg .hg-hero{grid-template-columns:1fr;grid-template-areas:"tete" "arche" "reprise";row-gap:0}
  html body.hg .hg-arche-z{height:440px;margin-top:8px}
  html body.hg .hg-arche-fond,html body.hg .hg-arche-pers{left:0;top:96px}
  html body.hg .hg-arche-fond{border-radius:175px 175px 32px 32px}
  html body.hg .hg-arche-pers{clip-path:inset(-110px 0 0 0 round 0 0 32px 32px)}
  html body.hg .hg-arche-pers img{height:430px}
  html body.hg .hg-arche-z::before{width:200px;height:200px;top:40px;right:-12px}
  html body.hg .hg-arche-z.photo{height:400px}
  html body.hg .hg-arche-z.photo .hg-arche-fond{top:28px}
  html body.hg .hg-arche-z.photo::before{top:0}
  html body.hg .hg-arche-z.photo .hg-serie{top:76px}
  html body.hg .hg-jauge-v .hg-anneau{width:64px!important;height:64px!important}
  html body.hg .hg-serie{top:150px;right:-4px}
  html body.hg .hg-jauge-v{left:12px;bottom:84px;padding:10px 18px 10px 10px;border-radius:999px;gap:12px}
  html body.hg .hg-jauge-v .hg-anneau svg{width:64px;height:64px}
  html body.hg .hg-jauge-v .val{font-size:22px!important}
  html body.hg .hg-jauge-v .val span{font-size:11px!important;margin-top:5px!important}
  html body.hg .hg-jauge-v .hg-leg{display:none}
  html body.hg .hg-hero-reprise{position:relative;z-index:5;margin:-64px 12px 0}
  html body.hg .hg-duo{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px){
  html body.hg .hg-reprise{padding:20px;grid-template-columns:56px minmax(0,1fr);gap:6px 14px}
  html body.hg .hg-reprise .hg-il{width:56px;height:56px;grid-row:span 1}
  html body.hg .hg-reprise .hg-barre{grid-column:1/-1}
  html body.hg .hg-reprise .hg-actions{flex-direction:column;align-items:stretch;gap:6px}
  html body.hg .hg-reprise .hg-btn-p{width:100%}
  html body.hg .hg-reprise .hg-btn-l{justify-content:center}
  html body.hg .hg-duo{grid-template-columns:1fr;gap:24px}
  html body.hg .hg-sec{margin-top:56px}
  html body.hg .hg-mats{grid-template-columns:1fr;padding:6px}
  html body.hg .hg-mat{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}
  html body.hg .hg-mat .lettre{width:40px;height:40px;font-size:19px}
  html body.hg .hg-mat .note .hg-chiffre{font-size:26px}
  html body.hg .hg-cartes{display:flex;overflow-x:auto;gap:14px;margin:0 -20px;width:calc(100% + 40px);max-width:none!important;box-sizing:border-box;padding:0 20px 8px;scroll-padding:0 20px;scroll-snap-type:x mandatory;scrollbar-width:none}
  html body.hg .hg-cv{flex:0 0 268px;height:300px;scroll-snap-align:start}
  html body.hg .hg-aide{grid-template-columns:1fr auto;padding:22px 0 0 22px}
  html body.hg .hg-aide .portrait{width:104px;height:150px;margin-right:16px}
}
@media(max-width:560px){
  html body.hg .hg-act{grid-template-columns:52px minmax(0,1fr) 20px;gap:12px;padding:12px 10px 12px 6px}
  html body.hg .hg-act .hg-il{width:52px;height:52px}
  html body.hg .hg-act .hg-puce.dur,html body.hg .hg-act .hg-chev{display:none}
  html body.hg .hg-act::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--hg-pale);border-top:1.6px solid var(--hg-pale);transform:rotate(45deg)}
  html body.hg .hg-exam{padding:26px 22px 22px}
  html body.hg .hg-exam .grand .hg-chiffre{font-size:92px}
  html body.hg .hg-exam .hg-btn{width:100%}
  html body.hg .hg-semaine{grid-template-columns:1fr}
  html body.hg .hg-semaine .gros .hg-chiffre{font-size:56px}
}

/* ─────────── 11. Mon parcours (formations.php) ─────────── */
html body.hg .hg-ptete{position:relative;overflow:hidden;min-height:400px;padding:48px 56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;border-radius:40px;margin-bottom:56px}
html body.hg .hg-ptete .photo-d{position:absolute;right:0;top:0;bottom:0;width:58%;overflow:hidden}
html body.hg .hg-ptete .photo-d img{width:100%;height:100%;object-fit:cover;object-position:72% 45%;border-radius:0}
html body.hg .hg-ptete .photo-d::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hg-bloc) 0%,rgba(19,19,20,.55) 28%,rgba(19,19,20,0) 60%)}
html body.hg .hg-ptete>*:not(.photo-d){position:relative;z-index:1}
html body.hg .hg-ptete .hg-t1{color:var(--hg-sur-bloc)!important;font-size:clamp(34px,3.6vw,52px)!important;margin-top:16px}
html body.hg .hg-ptete .hg-t1 em{color:var(--hg-or)!important}
html body.hg .hg-ptete .hg-leg{color:var(--hg-sur-bloc-doux);margin-top:16px;max-width:480px;font-size:15px}
html body.hg .hg-ptete .actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}
html body.hg .hg-ptete .anneau{justify-self:end;align-self:end;display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 30px;border-radius:32px;background:rgba(19,19,20,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html body.hg .hg-ptete .anneau .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
html body.hg .hg-ptete .anneau .val b{font-family:var(--hg-serif);font-weight:600;letter-spacing:-.02em;font-size:46px;color:var(--hg-sur-bloc);line-height:1}
html body.hg .hg-ptete .anneau .val span{font-size:12.5px;color:var(--hg-sur-bloc-doux);margin-top:6px}
html body.hg .hg-ptete .anneau p{font-size:14px;color:var(--hg-sur-bloc);text-align:center;line-height:1.5;margin:0}
html body.hg .hg-ptete .anneau p span{color:var(--hg-sur-bloc-doux);font-size:13px}
/* cartes de formation et modules : mêmes éléments, nouveau dessin */
html body.hg .pc .pc-form{border:0!important;border-radius:36px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important;margin-bottom:32px}
html body.hg .pc .pc-form-top{padding:32px 36px 24px}
html body.hg .pc .pc-form-name{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:34px!important;letter-spacing:-.015em;line-height:1.1}
html body.hg .pc .pc-form-badge{border-radius:999px!important;background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important;font-weight:500;padding:6px 14px}
html body.hg .pc .pc-form-pct{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:56px!important;color:var(--hg-encre)!important;letter-spacing:-.025em}
html body.hg .pc .pc-form-bar{height:8px;border-radius:999px;background:var(--hg-fond-2);margin:0 36px}
html body.hg .pc .pc-form-bar-fill{border-radius:999px;background:var(--hg-encre)!important}
html body.hg .pc .pc-next{margin:24px 24px 8px;border:0!important;border-radius:24px;background:var(--hg-or-voile)!important;padding:16px 16px 16px 22px}
html body.hg .pc .pc-next-icon{border-radius:50%!important;background:var(--hg-or)!important;color:#FFFFFF}
html body.hg .pc .pc-next-title{font-size:16px;font-weight:500}
html body.hg .pc :is(.pc-next-btn,.pc-mod-act){border-radius:999px!important;min-height:44px;display:inline-flex;align-items:center;padding:0 20px!important;font-weight:500!important;font-size:14px!important}
html body.hg .pc .pc-next-btn{background:var(--hg-encre)!important;color:var(--hg-sur-bloc)!important}
html body.hg .pc .pc-mods{padding:12px 24px 24px}
html body.hg .pc .pc-mod{border:0!important;border-radius:20px;padding:12px 14px!important;gap:16px}
html body.hg .pc .pc-mod:hover{background:var(--hg-fond)}
html body.hg .pc .pc-mod-num{width:44px!important;height:44px!important;border-radius:50%!important;font-family:var(--hg-serif)!important;font-style:normal;font-size:19px!important;font-weight:600!important}
html body.hg .pc .pc-mod-num-cur{background:var(--hg-or)!important;color:#FFFFFF}
html body.hg .pc .pc-mod-num-lock{background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important}
html body.hg .pc .pc-mod-name{font-size:15px;font-weight:500}
html body.hg .pc .pc-mod-pg{height:6px;border-radius:999px;background:var(--hg-fond-2)}
html body.hg .pc .pc-mod-pf{border-radius:999px}
html body.hg .pc .pc-mod-score-v{font-family:var(--hg-serif);font-weight:600;font-size:24px!important}
html body.hg .pc .pc-mod-act-go{background:var(--hg-surface)!important;color:var(--hg-encre)!important;box-shadow:var(--hg-ombre-1)}
html body.hg .pc .pc-mod-act-quiz{background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important}
html body.hg .pc .pc-stats{border:0!important;background:var(--hg-fond);margin:0 24px 24px;border-radius:24px}
html body.hg .pc .pc-stat{border:0!important}
html body.hg .pc .pc-stat-v{font-family:var(--hg-serif);font-weight:600;font-size:28px!important}
@media(max-width:900px){
  html body.hg .hg-ptete{grid-template-columns:1fr;padding:28px 24px 24px;min-height:0;border-radius:32px;margin-bottom:32px}
  html body.hg .hg-ptete .photo-d{width:100%;opacity:.5}
  html body.hg .hg-ptete .photo-d::after{background:linear-gradient(180deg,rgba(19,19,20,.2) 0%,var(--hg-bloc) 75%)}
  html body.hg .hg-ptete .anneau{justify-self:stretch;flex-direction:row;padding:16px 20px;gap:18px}
  html body.hg .hg-ptete .anneau .hg-anneau{width:96px!important;height:96px!important}
  html body.hg .hg-ptete .anneau .hg-anneau svg{width:96px;height:96px}
  html body.hg .hg-ptete .anneau .val b{font-size:28px}
  html body.hg .hg-ptete .anneau .val span{display:none}
  html body.hg .hg-ptete .anneau p{text-align:left}
  html body.hg .hg-ptete .actions .hg-btn{width:100%}
  html body.hg .pc .pc-form-top{padding:24px 22px 18px}
  html body.hg .pc .pc-form-bar{margin:0 22px}
  html body.hg .pc .pc-next{margin:18px 12px 6px;flex-wrap:wrap}
  html body.hg .pc .pc-mods{padding:8px 10px 16px}
  html body.hg .pc .pc-stats{margin:0 12px 16px}
}
html body.hg .hg-ptete .actions .hg-btn{white-space:normal;line-height:1.3;padding-top:12px;padding-bottom:12px;text-align:left}

/* ─────────── 12. Page d'offre (offre.php) ─────────── */
html body.hg .hg-of{max-width:1080px;margin:0 auto}
html body.hg .hg-of-tete{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end}
html body.hg .hg-of-tete .txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:12px}
html body.hg .hg-of-tete .hg-t1{font-size:clamp(30px,3.2vw,44px)!important}
html body.hg .hg-of-tete .hg-txt{max-width:560px}
html body.hg .hg-of-bilan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:8px}
html body.hg .hg-of-bilan .k{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:24px;background:var(--hg-surface);box-shadow:var(--hg-ombre-1);text-decoration:none;color:inherit}
html body.hg .hg-of-bilan .k b{font-family:var(--hg-serif);font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--hg-encre)}
html body.hg .hg-of-bilan .k b small{font-family:var(--hg-sans);font-size:12.5px;color:var(--hg-doux);margin-left:6px;letter-spacing:0;font-weight:400}
html body.hg .hg-of-bilan .k span{font-size:13px;color:var(--hg-doux)}
html body.hg .hg-of-bilan .k.todo{background:var(--hg-or-voile);box-shadow:none}
html body.hg .hg-of-bilan .k.todo b{color:var(--hg-or-texte);font-size:24px}
html body.hg .hg-of-arche{position:relative;height:340px}
html body.hg .hg-of-arche .fond{position:absolute;inset:70px 0 0 0;border-radius:170px 170px 32px 32px;background:linear-gradient(180deg,#92B3F0 0%,#A0B3D8 100%);box-shadow:var(--hg-ombre-2)}
html body.hg .hg-of-arche .pers{position:absolute;inset:70px 0 0 0;clip-path:inset(-80px 0 0 0 round 0 0 32px 32px)}
html body.hg .hg-of-arche .pers img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:340px;width:auto;max-width:none;border-radius:0}
html body.hg .hg-of-h2{margin:40px 0 20px!important}
html body.hg .hg-of-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
html body.hg .hg-of-c{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:28px 32px 30px;border-radius:36px}
html body.hg .hg-of-c .haut{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
html body.hg .hg-of-c .prix{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
html body.hg .hg-of-c .prix .hg-chiffre{font-size:68px}
html body.hg .hg-of-c .prix span:not(.hg-chiffre){font-size:14.5px;color:var(--hg-doux)}
html body.hg .hg-of-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
html body.hg .hg-of-c li{display:flex;gap:12px;font-size:15px;line-height:1.45;color:var(--hg-encre)}
html body.hg .hg-of-c li .rond{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 24px;background:var(--hg-or-voile);color:var(--hg-or-texte)}
html body.hg .hg-of-c li.no{color:var(--hg-doux)}
html body.hg .hg-of-c li.no .rond{background:var(--hg-fond-2);color:var(--hg-doux)}
html body.hg .hg-of-c .hg-btn{width:100%;margin-top:6px}
html body.hg .hg-of-c.cle li{color:var(--hg-sur-bloc)}
html body.hg .hg-of-c.cle li .rond{background:var(--hg-or);color:#FFFFFF}
html body.hg .hg-of-c.cle li.no{color:var(--hg-sur-bloc-doux)}
html body.hg .hg-of-c.cle li.no .rond{background:rgba(239,242,246,.12);color:#141B2D}
html body.hg .hg-of-c.cle .prix span:not(.hg-chiffre){color:var(--hg-sur-bloc-doux)}
html body.hg .hg-puce.or-plein{background:var(--hg-or)!important;color:#FFFFFF}
html body.hg .hg-of-aide{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;border-radius:28px;font-size:15px;color:var(--hg-texte)}
html body.hg .hg-of-aide .liens{display:flex;gap:10px;flex-wrap:wrap}
html body.hg .hg-of-retour{text-align:center;margin:28px 0 0}
@media(max-width:900px){
  html body.hg .hg-of-tete{grid-template-columns:1fr;gap:0}
  html body.hg .hg-of-arche{display:none}
  html body.hg .hg-of-h2{margin:40px 0 16px!important}
  html body.hg .hg-of-cartes{grid-template-columns:1fr;gap:16px}
  html body.hg .hg-of-c{padding:26px 22px 22px;border-radius:30px}
  html body.hg .hg-of-c .prix .hg-chiffre{font-size:64px}
}
@media(max-width:560px){
  html body.hg .hg-of-bilan{gap:8px}
  html body.hg .hg-of-bilan .k{padding:14px 12px;border-radius:20px}
  html body.hg .hg-of-bilan .k b{font-size:24px}
  html body.hg .hg-of-bilan .k b small{display:block;margin:4px 0 0}
  html body.hg .hg-of-aide{padding:18px}
  html body.hg .hg-of-aide .liens{width:100%}
  html body.hg .hg-of-aide .liens .hg-btn{flex:1}
}
html body.hg .hg-of-cartes.seule{grid-template-columns:minmax(0,620px)}

/* ─────────── 13. Quiz, examen blanc et résultats : mêmes écrans, nouveau dessin ─────────── */
html body.hg :is(.qz-t,.eb-q-text){font-family:var(--hg-serif)!important;font-weight:600!important;font-size:24px!important;line-height:1.25!important;letter-spacing:-.012em!important;color:var(--hg-encre)!important;margin-bottom:20px!important}
html body.hg :is(.qz-q,.eb-q){border:0!important;border-radius:32px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important;padding:28px 28px 24px!important}
html body.hg :is(.qz-o,.eb-opt){border:0!important;border-radius:20px!important;background:var(--hg-fond)!important;min-height:56px;padding:12px 18px 12px 12px!important;transition:background-color .2s ease,box-shadow .2s ease}
html body.hg :is(.qz-o,.eb-opt):hover{background:var(--hg-or-voile)!important}
html body.hg :is(.qz-o,.eb-opt):has(input:checked){background:var(--hg-or-voile)!important;box-shadow:inset 0 0 0 1.5px var(--hg-or)!important}
html body.hg :is(.qz-l,.eb-opt-letter){width:36px!important;height:36px!important;border-radius:50%!important;background:var(--hg-surface)!important;color:var(--hg-encre)!important;font-weight:500!important;display:grid!important;place-items:center;flex:0 0 36px;border:0!important}
html body.hg :is(.qz-o,.eb-opt):has(input:checked) :is(.qz-l,.eb-opt-letter){background:var(--hg-or)!important;color:#FFFFFF}
html body.hg :is(.qz-ta,.eb-q textarea,.eb-q input[type=text]){border:0!important;border-radius:20px!important;background:var(--hg-fond)!important;padding:16px 18px!important;font:400 16px/1.5 var(--hg-sans)!important}
html body.hg :is(.qz-tag,.eb-ep-badge,.eb-res-coeff){border-radius:999px!important;background:var(--hg-or-voile)!important;color:var(--hg-or-texte)!important;font-weight:500!important}
html body.hg .eb-res-elim{border-radius:999px!important}
html body.hg .eb-hero{border-radius:36px!important;padding:40px 36px!important}
html body.hg .eb-hero h1{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(28px,3vw,40px)!important;color:var(--hg-encre)!important}
html body.hg .eb-hero h1 em{font-style:normal!important;color:var(--hg-or-texte)!important}
html body.hg .eb-hero p,html body.hg .eb-hero-sub{color:var(--hg-doux)!important;font-size:14px!important}
html body.hg .eb-hero-score{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(84px,9vw,128px)!important;line-height:.9!important;letter-spacing:-.03em}
html body.hg .eb-hero-badge{border-radius:999px!important;font-weight:500!important}
html body.hg :is(.eb-ep,.eb-res,.eb-prof){border:0!important;border-radius:28px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important}
html body.hg .eb-res.elim{box-shadow:var(--hg-ombre-1),inset 4px 0 0 var(--hg-al)!important}
html body.hg .eb-ep-head{border:0!important;background:transparent!important}
html body.hg :is(.eb-ep-code,.eb-res-note){font-family:var(--hg-serif)!important;font-weight:600!important;letter-spacing:-.02em}
html body.hg .eb-ep-code{font-style:normal}
html body.hg :is(.eb-res-bar,.eb-res-fill){border-radius:999px!important}
html body.hg .eb-timer{border:0!important;border-radius:999px!important;background:var(--hg-bloc)!important;padding:12px 14px 12px 24px!important}
html body.hg .eb-timer-label{color:var(--hg-sur-bloc-doux)!important}
html body.hg .eb-timer-value{color:var(--hg-or)!important;font-family:var(--hg-serif);font-weight:600!important;font-size:28px!important}
html body.hg .eb-toolbar{border-top:0!important;border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(0,32,91,.08)}
html body.hg .eb-expl{border:0!important;border-radius:20px!important;background:var(--hg-fond)!important}
@media(max-width:600px){
  html body.hg :is(.qz-t,.eb-q-text){font-size:21px!important}
  html body.hg :is(.qz-q,.eb-q){padding:22px 18px 18px!important;border-radius:28px!important}
}

/* ─────────── 14. Connexion (index.php) : photo plein cadre, formulaire calme ─────────── */
html body.auth-page.hg{background:var(--hg-fond)!important;color:var(--hg-texte);font-family:var(--hg-sans)}
html body.auth-page.hg .auth-header{background:transparent}
html body.auth-page.hg .auth-main{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:56px!important;align-items:stretch!important;padding-block:12px 48px!important}
html body.auth-page.hg .auth-welcome{position:relative;min-height:620px;border-radius:36px;overflow:hidden;background:#0A0A0B;display:flex;flex-direction:column;justify-content:flex-end}
html body.auth-page.hg .welcome-media{position:absolute!important;inset:0;width:auto!important;margin:0!important}
html body.auth-page.hg .welcome-media picture{display:block;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0!important;background:none}
html body.auth-page.hg .welcome-media img{width:100%;height:100%;object-fit:cover;object-position:46% 40%!important;border-radius:0!important}
html body.auth-page.hg .welcome-media figcaption{display:none}
html body.auth-page.hg .auth-welcome::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,0) 35%,rgba(10,10,11,.84) 100%);pointer-events:none}
html body.auth-page.hg .auth-intro-surface{position:relative;z-index:1;background:transparent!important;border-radius:0!important;padding:0 48px 48px!important}
html body.auth-page.hg .auth-welcome .auth-eyebrow{color:var(--hg-or-clair)!important;letter-spacing:.14em}
html body.auth-page.hg .auth-welcome h1{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(40px,4.2vw,60px)!important;letter-spacing:-.022em!important;line-height:1.04!important;color:#EFF2F6!important}
html body.auth-page.hg .auth-welcome h1 em{font-style:normal!important;font-weight:300!important;color:#7FA8F5!important;letter-spacing:-.015em!important}
html body.auth-page.hg .auth-intro{color:rgba(239,242,246,.8)!important;max-width:460px;font-size:15px!important}
html body.auth-page.hg .auth-access{align-self:center;background:var(--hg-surface)!important;border:0!important;border-radius:36px!important;box-shadow:var(--hg-ombre-1);padding:44px 44px 36px!important}
html body.auth-page.hg .auth-access-head .auth-eyebrow{color:var(--hg-or-texte)!important;font-size:11.5px!important;letter-spacing:.14em}
html body.auth-page.hg .auth-access h2{font-family:var(--hg-serif)!important;font-weight:600!important;font-size:clamp(34px,3vw,46px)!important;letter-spacing:-.018em!important;line-height:1.08!important;color:var(--hg-encre)!important}
html body.auth-page.hg .auth-access-head>p:last-child{color:var(--hg-doux)}
html body.auth-page.hg .auth-switch{background:var(--hg-fond)!important;border-radius:999px!important;padding:5px!important}
html body.auth-page.hg .auth-mode{border-radius:999px!important;font-weight:500!important;font-size:14px!important;justify-content:center}
html body.auth-page.hg .auth-mode[aria-current="true"]{background:var(--hg-surface)!important;color:var(--hg-encre)!important;box-shadow:var(--hg-ombre-1)!important}
html body.auth-page.hg .auth-field label{font-size:13.5px!important;font-weight:500!important;color:var(--hg-encre)!important}
html body.auth-page.hg .auth-field input{height:58px!important;border:0!important;border-radius:18px!important;background:var(--hg-fond)!important;padding:0 20px!important;font:400 16px var(--hg-sans)!important;color:var(--hg-encre)!important;box-shadow:none!important}
html body.auth-page.hg .auth-field input:focus{outline:none!important;background:var(--hg-surface)!important;box-shadow:inset 0 0 0 1.5px var(--hg-or),0 0 0 4px var(--hg-or-voile)!important}
html body.auth-page.hg .auth-submit{min-height:58px!important;border:0!important;border-radius:999px!important;background:var(--hg-encre)!important;color:#EFF2F6!important;font:500 16px var(--hg-sans)!important;padding:0 28px!important}
html body.auth-page.hg .auth-forgot{color:var(--hg-encre)!important;font-weight:500}
html body.auth-page.hg .auth-discover{border:0!important;border-radius:24px!important;background:var(--hg-or-voile)!important;padding:18px 22px!important;color:var(--hg-texte)}
html body.auth-page.hg .auth-discover a{color:var(--hg-or-texte)!important;font-weight:600}
html body.auth-page.hg .auth-footer{background:transparent!important}
html body.auth-page.hg .auth-notice{border-radius:20px!important}
@media(max-width:850px){
  html body.auth-page.hg .auth-main{gap:24px!important}
  html body.auth-page.hg .auth-intro-surface{padding:0 28px 32px!important}
  html body.auth-page.hg .auth-access{padding:32px 26px 26px!important}
}
@media(max-width:700px){
  html body.auth-page.hg .auth-main{display:flex!important;flex-direction:column;padding-block:4px 28px!important;gap:16px!important}
  html body.auth-page.hg .auth-welcome{min-height:320px;border-radius:30px}
  html body.auth-page.hg .welcome-media{display:block!important}
  html body.auth-page.hg .welcome-media img{object-position:50% 30%!important}
  html body.auth-page.hg .auth-intro-surface{padding:0 22px 24px!important}
  html body.auth-page.hg .auth-welcome h1{font-size:clamp(32px,8.6vw,40px)!important}
  html body.auth-page.hg .auth-intro{font-size:14px!important;margin-top:12px!important}
  html body.auth-page.hg .auth-access{border-radius:30px!important;padding:26px 20px 22px!important}
}

/* ─────────── 15. Titres posés sur un fond sombre (cartes « nuit », blocs noirs) ─────────── */
html body.drop-campaign.hg :is(.nuit,.rf-tache-noire,.hg-bloc,.dr-promo,.ri-cta,.qe-result,.result-hero,.ch-main-head,.d-visio-live,.d-visio-today) :is(h1,h2,h3):not(.hg-sans):not([class*="hg-"]){color:var(--hg-sur-bloc)!important}
html body.drop-campaign.hg :is(.nuit,.rf-tache-noire,.hg-bloc) :is(h1,h2,h3) :is(span,em){color:var(--hg-or)!important}
@media(max-width:600px){html body.hg .ai-stat{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body.hg .ai-stat-box{min-width:0}}

/* ─────────── 16. Lot 21 : mode examen sur téléphone (QCM, examen blanc, quiz express, quiz de leçon) ───────────
   La classe hg-examen est posée par includes/learner-footer.php quand une page de questions est en cours.
   Sans barre d'onglets : les réponses restent visibles et le bouton Suivante est toujours sous le pouce. */
@media(max-width:768px){
  html body.hg.hg-examen .m-nav{display:none!important}
  html body.hg.hg-examen .d-topbar{display:none!important}   /* le titre de page est déjà dans la carte du chrono */
  /* une animation d'entrée laisse un transform sur le conteneur : la barre fixe s'y accrochait au lieu du bas de l'écran */
  html body.hg.hg-examen .d-content,html body.hg.hg-examen .d-content>*,html body.hg.hg-examen :is(.cdr,.cdr-app){animation:none!important;transform:none!important;filter:none!important}
  html body.hg.hg-examen .d-main{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
  /* numéros de questions : une seule ligne qui défile, la question courante reste centrée */
  html body.hg.hg-examen .cdr-dots{position:relative;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -20px 12px!important;padding:2px 20px 6px!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
  html body.hg.hg-examen .cdr-dots::-webkit-scrollbar{display:none}
  html body.hg.hg-examen .cdr-dot{flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;border-radius:50%!important;scroll-snap-align:center;font-size:12px!important}
  /* barre Précédente / Suivante fixe en bas */
  html body.hg.hg-examen .cdr-nav{position:fixed!important;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;margin:0!important;padding:8px!important;gap:8px;background:var(--hg-surface)!important;border-radius:999px!important;box-shadow:var(--hg-ombre-2)!important}
  html body.hg.hg-examen .cdr-nav-btn{height:52px!important;min-height:52px;padding:0 20px!important;border-radius:999px!important;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
  html body.hg.hg-examen .cdr-nav-btn:only-child,html body.hg.hg-examen .cdr-nav-next,html body.hg.hg-examen .cdr-nav-finish{flex:1}
  html body.hg.hg-examen .cdr-nav-prev{border:0!important;background:var(--hg-fond)!important;color:var(--hg-texte)!important}
  /* examen blanc : la barre de progression devient une barre flottante */
  html body.hg.hg-examen .eb-toolbar{position:sticky!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;margin:12px 0 0!important;border-radius:28px!important;box-shadow:var(--hg-ombre-2)!important}
  html body.hg.hg-examen .cdr-topbar{padding:14px 18px!important;border-radius:24px!important;margin-bottom:12px!important}
  html body.hg.hg-examen .qe-sticky{border:0!important;border-radius:999px!important;box-shadow:var(--hg-ombre-2)!important;background:var(--hg-surface)!important}
}

/* ─────────── 17. Lot 21 : en-têtes fixes avec fond, administration lisible ─────────── */
/* l'en-tête reste en haut : fond beige à 92 % flouté, et un filet dès qu'on fait défiler (classe hg-defile posée par le pied de page) */
html body.drop-campaign.hg :is(.d-topbar,.da-topbar,.m-top){background:rgba(243,245,249,.92)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid transparent!important;transition:border-color .2s ease}
html body.drop-campaign.hg.hg-defile :is(.d-topbar,.da-topbar,.m-top){border-bottom-color:var(--hg-piste)!important}
/* menu admin : intertitres à 5,1:1, et plus de doublon « Administration » sous le logo */
html body.drop-campaign.hg.adm .da-brand-sub{display:none!important}
/* avatars et badges : couleurs de la charte, fond du badge conservé sur la ligne sélectionnée */
html body.drop-campaign.hg.adm .sa-av{border-radius:50%!important;font-weight:600}
html body.drop-campaign.hg.adm .sa-av-dot{border-color:var(--hg-surface)!important}
html body.drop-campaign.hg.adm .sa-kpis{gap:12px!important}
html body.drop-campaign.hg.adm .sa-ki{border:0!important;border-radius:22px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important;padding:18px 14px!important}
html body.drop-campaign.hg.adm .sa-ki-v{font-size:28px!important;font-variant-numeric:tabular-nums lining-nums}
html body.drop-campaign.hg.adm .sa-ki-l{font-weight:500!important;color:var(--hg-doux)!important}
html body.drop-campaign.hg.adm .sa-ki-x{display:block;font-weight:400;font-size:11.5px;color:var(--hg-pale)}
html body.drop-campaign.hg.adm .sa-filters{display:flex;gap:8px!important}
html body.drop-campaign.hg.adm .sa-search{flex:1 1 300px!important;max-width:380px!important;min-width:260px}
html body.drop-campaign.hg.adm #lms-main .sa-search input{border-radius:999px!important;padding-left:40px!important;min-height:44px}
html body.drop-campaign.hg.adm #lms-main .sa-sel{border-radius:999px!important;border:0!important;box-shadow:inset 0 0 0 1.5px var(--hg-piste)!important;background-color:var(--hg-surface)!important;min-height:44px}
html body.drop-campaign.hg.adm :is(.sa-risk,.sa-sort){border-radius:999px!important;display:inline-flex;align-items:center;min-height:40px}
html body.drop-campaign.hg.adm .sa-head{padding:0 18px 10px!important}
html body.drop-campaign.hg.adm .sa-list{gap:8px!important}
html body.drop-campaign.hg.adm .sa-item{border:0!important;border-radius:20px!important;background:var(--hg-surface)!important;box-shadow:var(--hg-ombre-1)!important;padding:12px 18px!important;font-variant-numeric:tabular-nums lining-nums}
html body.drop-campaign.hg.adm .sa-item:hover{box-shadow:inset 0 0 0 1.5px var(--hg-or-clair),var(--hg-ombre-1)!important}
html body.drop-campaign.hg.adm .sa-item.sel{background:var(--hg-surface)!important;box-shadow:inset 0 0 0 2px var(--hg-or),var(--hg-ombre-1)!important}
html body.drop-campaign.hg.adm .sa-item .sa-badge{white-space:nowrap}
html body.drop-campaign.hg.adm :is(.sa-pcard){border:0!important;border-radius:28px!important;box-shadow:var(--hg-ombre-2)!important}
html body.drop-campaign.hg.adm .sa-ptop{background:var(--hg-bloc)!important}
html body.drop-campaign.hg.adm .sa-ptop-av{border-radius:50%!important}
html body.drop-campaign.hg.adm .sa-ptop-close{border-radius:50%!important}
/* fiche apprenant : rien n'est affiché tant qu'aucun apprenant n'est choisi, sauf sur grand écran */
@media(max-width:1100px){html body.drop-campaign.hg.adm .sa-panel.vide{display:none!important}}
/* sous 900 px : un apprenant = une carte, la fiche monte du bas */
@media(max-width:900px){
  html body.drop-campaign.hg.adm .sa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.drop-campaign.hg.adm .sa-ki-x{display:none!important}
  html body.drop-campaign.hg.adm .sa-ki-l{font-size:12.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body.drop-campaign.hg.adm .sa-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  html body.drop-campaign.hg.adm .sa-search{grid-column:1/-1;max-width:none!important;min-width:0}
  html body.drop-campaign.hg.adm .sa-sel,html body.drop-campaign.hg.adm .sa-risk{width:100%;min-width:0;justify-content:center}
  html body.drop-campaign.hg.adm .sa-sorts{grid-column:1/-1;margin:0!important;overflow-x:auto;scrollbar-width:none}
  html body.drop-campaign.hg.adm .sa-head{display:none!important}
  html body.drop-campaign.hg.adm .sa-item{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-areas:"av nom statut" "av info info";row-gap:6px!important;column-gap:12px!important;padding:14px 16px!important;font-size:12.5px!important}
  html body.drop-campaign.hg.adm .sa-item>:nth-child(1){grid-area:av;align-self:start}
  html body.drop-campaign.hg.adm .sa-item>:nth-child(2){grid-area:nom;min-width:0}
  html body.drop-campaign.hg.adm .sa-item>:last-child{grid-area:statut;align-self:start}
  html body.drop-campaign.hg.adm .sa-item>.sa-ligne2{grid-area:info}
  html body.drop-campaign.hg.adm .sa-item>:not(:nth-child(1)):not(:nth-child(2)):not(:last-child):not(.sa-ligne2){display:none!important}
  html body.drop-campaign.hg.adm .sa-ligne2{display:flex!important;flex-wrap:wrap;gap:4px 14px;color:var(--hg-doux);font-size:12.5px}
  html body.drop-campaign.hg.adm .sa-ligne2 b{color:var(--hg-encre);font-weight:600}
  html body.drop-campaign.hg.adm .sa-panel.ouvert{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:200;max-height:86vh;overflow:auto;border-radius:28px 28px 0 0;box-shadow:0 0 0 100vmax rgba(0,32,91,.45);animation:hgMonte .32s cubic-bezier(.2,.8,.2,1)}
  html body.drop-campaign.hg.adm .sa-panel.ouvert .sa-pcard{border-radius:28px 28px 0 0!important;box-shadow:none!important}
}
html body.drop-campaign.hg.adm .sa-ligne2{display:none}
@keyframes hgMonte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){html body.drop-campaign.hg.adm .sa-panel.ouvert{animation:none}}
/* thème clair déclaré : la plateforme n'a pas de mode sombre, le navigateur ne doit pas en inventer un */
html{color-scheme:light}

/* ─────────── 18. Lot 21 : sous-titres de page toujours dorés, comme sur l'accueil ─────────── */
html body.drop-campaign.hg .campaign-heading{font-weight:600!important;letter-spacing:-.035em!important;color:var(--hg-encre)!important}
html body.drop-campaign.hg .campaign-heading-soft{color:var(--hg-or-texte)!important;font-weight:300!important;letter-spacing:-.03em}
html body.drop-campaign.hg :is(.rs-kpis,.campaign-results,.diag,.sa,.tb){font-variant-numeric:tabular-nums lining-nums}
@media(max-width:600px){html body.drop-campaign.hg .rs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 0!important}html body.drop-campaign.hg .rs-kpis>div{padding:6px 14px!important;box-shadow:none!important}}

/* ─────────── 19. Lot 21 : Mon parcours, lignes de modules régulières ─────────── */
html body.drop-campaign.hg .pc .pc-mod{background:transparent!important}
html body.drop-campaign.hg .pc .pc-mod{position:relative}
html body.drop-campaign.hg .pc .pc-mod+.pc-mod::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--hg-piste)}
html body.drop-campaign.hg .pc .pc-mod:hover{background:var(--hg-fond)!important}
html body.drop-campaign.hg .pc .pc-mod-num{font-size:15px!important;letter-spacing:-.02em}
html body.drop-campaign.hg .pc-mod-progress .drop-progress-ring{background:transparent!important}
html body.drop-campaign.hg .pc-mod-progress .drop-ring-track{stroke:var(--hg-piste)!important}
html body.drop-campaign.hg .pc-mod-progress .drop-ring-fill{stroke:var(--hg-or)!important}
html body.drop-campaign.hg .campaign-overview-grid.sans-anneau{grid-template-columns:minmax(0,1fr)!important}
@media(max-width:768px){html body.drop-campaign.hg .campaign-parcours-actions{flex-direction:column}}