/* ==================================================================
   LE KIT GRAPHIQUE MABASE — « moderne et brillant » (Riadh, 09/11/2026 — kit validé).
   Un seul fichier pour toutes les applis : chacune en garde une copie dans actifs/brillance.css
   et n'y change que les deux couleurs de sa marque (--b1, --b2), plus bas dans « LA COULEUR DE L'APPLI ».
   Les documents officiels (impression, PDF) ne sont pas touchés : tout est dans @media screen.
   ================================================================== */
@media screen {
:root{
  --b1:#FF5A4E; --b2:#E0245E; --b-txt:#fff;                 /* LA COULEUR DE L'APPLI (remplacée dans chaque copie) */
  --nuit:#0D1C4A; --marque:#F17720;                          /* la marque mabase — bleu nuit (validé par Riadh le 09/11/2026) */
  --nuit-degrade:linear-gradient(110deg,#11235A,#050C22);
  --plein:#0D1C4A;                                           /* les surfaces sombres (menu latéral, titres de panneau) suivent le bleu nuit */
  --ok1:#19D27A; --ok2:#0FA65C; --warn:#FFB000; --ko:#FF2D2D; --neutre:#9AA5B1;
  --b-ombre:0 6px 22px rgba(17,34,51,.12);
  --b-degrade:linear-gradient(135deg,var(--b1),var(--b2));
}
:root[data-theme="dark"]{--b-ombre:0 6px 22px rgba(0,0,0,.45)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--b-ombre:0 6px 22px rgba(0,0,0,.45)}}

/* 1 · Le bandeau de page */
.bandeau-page{background:var(--b-degrade);color:var(--b-txt);border-radius:0 0 14px 14px;box-shadow:0 6px 18px color-mix(in srgb,var(--b2) 30%,transparent)}
.bandeau-page h1.bdp-titre{text-shadow:0 1px 1px rgba(0,0,0,.18)}
.bandeau-page .bp-retour{background:var(--nuit)}
.bandeau-page .pastille{background:rgba(255,255,255,.25) !important;color:#fff !important;border:0 !important}
.bandeau-page .bdp-actions .btn,.bandeau-page .bdp-actions a,.bandeau-page .bdp-actions button{color:var(--b2)}
.bandeau-page .bdp-onglets a.ici,.bandeau-page .bdp-onglets a[aria-current],.bandeau-page .bdp-onglets .actif{color:var(--b2)}

/* 2 · Les parties d'un écran */
.panneau{border:0;border-radius:12px;box-shadow:var(--b-ombre)}
.panneau>h2{background:var(--b-degrade);color:var(--b-txt);text-shadow:0 1px 1px rgba(0,0,0,.18);font-size:12.5px;padding:10px 14px}
.panneau>h2 .n{color:inherit;opacity:.9}

/* 3 · Onglets et filtres */
.onglets.mes-formations{border-bottom:0;gap:6px}
.onglets.mes-formations .onglet{border:2px solid var(--trait);border-radius:10px;margin:0;padding:6px 14px;color:var(--encre)}
.onglets.mes-formations .onglet.choisi{background:var(--b-degrade);border-color:transparent;color:var(--b-txt);box-shadow:0 3px 10px color-mix(in srgb,var(--b2) 35%,transparent)}

/* 4 · Les tuiles chiffrées du tableau de bord : en couleur, par quatre */
.tuile{border:0;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.14);color:#fff}
.tuile:nth-child(4n+1){background:var(--b-degrade)}
.tuile:nth-child(4n+2){background:linear-gradient(135deg,#2F80FF,#1E5BE0)}
.tuile:nth-child(4n+3){background:linear-gradient(135deg,#19C37D,#0E9F5E)}
.tuile:nth-child(4n+4){background:linear-gradient(135deg,#FF8A00,var(--marque))}
.tuile *,.tuile a{color:inherit !important}
.tuile .dim,.tuile small{opacity:.92}
/* (Riadh, 09/11/2026) Une tuile qui a déjà son titre en couleur (--t, accueil d'ÉCOLE) : fond blanc, écriture noire,
   et un encadrement de la couleur de son titre. */
.tuile[style*="--t"]{background:var(--surface) !important;color:var(--encre) !important;border:3px solid var(--t) !important;box-shadow:0 6px 18px color-mix(in srgb,var(--t) 22%,transparent)}
.tuile[style*="--t"] *{color:var(--encre) !important}
.tuile[style*="--t"] a{color:var(--t) !important;filter:brightness(.8)}
.tuile[style*="--t"] h2,.tuile[style*="--t"] h2 a{color:#fff !important;filter:none}
.tuile[style*="--t"] .dim,.tuile[style*="--t"] .quoi{color:var(--gris) !important;opacity:1}

/* 5 · Les états — les mêmes couleurs partout */
.pastille{border-radius:12px;border:0;padding:2px 10px;font-weight:700;color:#fff;background:var(--neutre)}
.pastille.actif{background:linear-gradient(135deg,var(--ok1),var(--ok2));color:#fff}
.pastille.attente,.pastille.attention{background:var(--warn);color:#2B1B00}
.pastille.stop,.pastille.retard{background:var(--ko);color:#fff}
.pastille.fini{background:var(--neutre);color:#fff}
.pastille.neutre{background:transparent;color:var(--gris);border:2px dashed var(--trait)}

/* 6 · Les tableaux : en-tête clair, lignes aérées, survol */
table th{background:transparent;color:var(--gris)}
table tbody tr{transition:background .15s}
table tbody tr:hover>td{background:color-mix(in srgb,var(--b1) 6%,transparent)}

/* 8 · Les boutons et 9 · les bandeaux : on avive les jetons déjà posés par chaque appli
   (--b-or-*, --b-ve-*, --b-ro-*, --b-nu-*, --bd-*) — mêmes boutons, mêmes icônes, couleurs vives. */
:root{
  --b-or-1:var(--b1);--b-or-2:var(--b2);--b-or-trait:transparent;--b-or-texte:var(--b-txt);
  --b-ve-1:#19D27A;--b-ve-2:#0FA65C;--b-ve-trait:transparent;--b-ve-texte:#fff;
  --b-ro-1:#FF4B4B;--b-ro-2:#D61F3C;--b-ro-trait:transparent;--b-ro-texte:#fff;
  --b-nu-1:#18307A;--b-nu-2:var(--nuit);--b-nu-trait:transparent;
  --bd-ro-filet:#FF2D2D;--bd-am-filet:#FFB000;--bd-bl-filet:#2F80FF;--bd-ve-filet:#0FA65C;
  --relief:0 4px 14px rgba(17,34,51,.16);
}
.btn.btn:not(.discret):not(.vert):not(.rouge):not(.nav):not([data-retour]){box-shadow:0 4px 14px color-mix(in srgb,var(--b2) 35%,transparent)}
.btn.btn.vert{box-shadow:0 4px 14px rgba(20,194,107,.3)}
.btn.btn.discret{border-width:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--b1);box-shadow:0 0 0 4px color-mix(in srgb,var(--b1) 22%,transparent)}
.alerte,.accuse,.note,.avis-courriel,.rappel-ants{font-weight:600}

/* 10 · Les cartes en colonnes (sessions par statut…) : des cartes pleines, en couleur */
.colonne{border:0;border-top:4px solid var(--neutre);border-radius:12px;box-shadow:var(--b-ombre)}
.colonne.c-prevue{border-top-color:#2F80FF}.colonne.c-encours{border-top-color:var(--b1)}.colonne.c-terminee{border-top-color:var(--ok2)}
.carte.famille-ccp1,.carte.famille-ccp2,.carte.famille-titre{border:0;color:#fff;box-shadow:0 6px 16px rgba(17,34,51,.18);border-radius:12px}
.carte.famille-ccp1{background:linear-gradient(135deg,#2F80FF,#1E5BE0)}
.carte.famille-ccp2{background:linear-gradient(135deg,#19C37D,#0E9F5E)}
.carte.famille-titre{background:linear-gradient(135deg,#9B5CFF,#6C2BD9)}
.carte[class*="famille-"] *,.carte[class*="famille-"] a{color:inherit !important}
.carte[class*="famille-"] .dim,.carte[class*="famille-"] .quand,.carte[class*="famille-"] .code{opacity:.9}
.carte[class*="famille-"] .pastille-famille{background:rgba(255,255,255,.25);border-color:transparent}

/* 10 bis · Les familles de formation (CCP1, CCP2, titre complet) partout où les sessions s'affichent (Riadh, 09/11/2026) :
   la légende en pastilles vives, les lignes des tableaux teintées avec un filet vif à gauche, les cartes pleines. */
:root{--fv-ccp1:linear-gradient(135deg,#2F80FF,#1E5BE0);--fv-ccp2:linear-gradient(135deg,#19C37D,#0E9F5E);--fv-titre:linear-gradient(135deg,#9B5CFF,#6C2BD9);
  --fc-ccp1:#2F80FF;--fc-ccp2:#14B36E;--fc-titre:#8B4DF5}
.legende-familles span{border:0;border-radius:12px;padding:4px 12px;color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(17,34,51,.16)}
.legende-familles .famille-ccp1{background:var(--fv-ccp1)}.legende-familles .famille-ccp2{background:var(--fv-ccp2)}.legende-familles .famille-titre{background:var(--fv-titre)}
.table-familles tr.famille-ccp1>td{background:color-mix(in srgb,var(--fc-ccp1) 9%,var(--surface))}
.table-familles tr.famille-ccp2>td{background:color-mix(in srgb,var(--fc-ccp2) 9%,var(--surface))}
.table-familles tr.famille-titre>td{background:color-mix(in srgb,var(--fc-titre) 9%,var(--surface))}
.table-familles tr.famille-ccp1>td:first-child{box-shadow:inset 6px 0 0 var(--fc-ccp1)}
.table-familles tr.famille-ccp2>td:first-child{box-shadow:inset 6px 0 0 var(--fc-ccp2)}
.table-familles tr.famille-titre>td:first-child{box-shadow:inset 6px 0 0 var(--fc-titre)}
.table-familles tr[class*="famille-"]>td:first-child{padding-left:16px}
.table-familles tr.famille-ccp1 .pastille-famille{background:var(--fv-ccp1)}
.table-familles tr.famille-ccp2 .pastille-famille{background:var(--fv-ccp2)}
.table-familles tr.famille-titre .pastille-famille{background:var(--fv-titre)}
.table-familles tr[class*="famille-"] .pastille-famille{color:#fff;border:0;border-radius:8px}
.progression-session[class*="famille-"]{border:0;border-radius:12px;color:#fff;box-shadow:0 6px 16px rgba(17,34,51,.18)}
.progression-session.famille-ccp1{background:var(--fv-ccp1)}.progression-session.famille-ccp2{background:var(--fv-ccp2)}.progression-session.famille-titre{background:var(--fv-titre)}
.progression-session[class*="famille-"] *{color:inherit !important}

/* 11 · « Où en est le dossier » : les étapes en pastilles pleines */
.etat-dossier{border:0;border-radius:12px;box-shadow:var(--b-ombre)}
.etat-dossier .pastilles-dossier a{border:0 !important;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.etat-dossier .pastilles-dossier a.ok-d{background:linear-gradient(135deg,var(--ok1),var(--ok2));color:#fff}
.etat-dossier .pastilles-dossier a.manque-d{background:linear-gradient(135deg,#FF4B4B,#D61F3C);color:#fff}
.etat-dossier .pastilles-dossier a.cours-d{background:var(--warn);color:#2B1B00}
.etat-dossier .pastilles-dossier a.ok-d::before,.etat-dossier .pastilles-dossier a.manque-d::before{color:#fff}
.etat-dossier .pastilles-dossier a *{color:inherit !important;opacity:.95}

/* 12 · Le planning (ÉCOLE) : la barre de navigation et les onglets Semaine / Journée / Mois */
.barre-planning{background:var(--b-degrade);box-shadow:0 6px 18px color-mix(in srgb,var(--b2) 28%,transparent);border-radius:0 0 12px 12px}
.onglets-planning a{border-radius:10px 10px 0 0}
.onglets-planning a.ici{background:var(--b-degrade) !important;color:var(--b-txt) !important;border-color:transparent !important}

/* 13 · Les pages des élèves (signature, espace) : la tête de page en dégradé */
.bandeau-espace{background:var(--b-degrade) !important;color:var(--b-txt) !important;box-shadow:0 6px 18px color-mix(in srgb,var(--b2) 28%,transparent)}
.bandeau-espace .marque,.bandeau-espace a{color:inherit !important;text-shadow:0 1px 1px rgba(0,0,0,.18)}

/* 14 · Les pastilles de filtre (« Toutes », « Depuis une liste »…) */
.pastilles-filtre{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.pastilles-filtre a{border:2px solid var(--trait);background:var(--surface);color:var(--encre);border-radius:14px;padding:4px 12px;font-weight:700;font-size:13.5px;text-decoration:none}
.pastilles-filtre a.ici{background:var(--b-degrade);color:var(--b-txt);border-color:transparent;box-shadow:0 3px 10px color-mix(in srgb,var(--b2) 35%,transparent)}
table tr.ici>td{background:color-mix(in srgb,var(--marque) 10%,var(--surface))}

/* La barre du haut : bleu nuit de la marque, en dégradé (#11235A → #050C22, validé par Riadh le 09/11/2026) */
header.barre{background:var(--nuit-degrade);box-shadow:0 4px 14px rgba(5,12,34,.35)}
.lateral{background:linear-gradient(180deg,#0D1C4A,#050C22)}
}