/* ===================================================================
   Stage Virtuel, LUNATIC-IT Academy
   Identite visuelle : plateforme technologique africaine

   Principe : le sombre porte l'identite, le clair porte le travail.
   Les zones de navigation et d'accueil sont sur fond nuit ; les
   pages ou le stagiaire lit et produit restent sur fond clair.

   Violet et cyan sont des accents d'interaction, jamais des aplats
   de fond porteurs de texte. Le cyan est brillant sur le sombre et
   illisible sous du blanc : il sert donc d'accent lumineux, pas de
   surface.
   =================================================================== */

/* 1. Fontes : IBM Plex, poids utiles seulement */
@font-face { font-family:'Plex Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@5.0.20/files/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Plex Sans'; font-weight:500; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@5.0.20/files/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Plex Sans'; font-weight:600; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@5.0.20/files/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Plex Serif'; font-weight:400; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-serif@5.0.20/files/ibm-plex-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.0.20/files/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* 2. Jetons de conception */
:root{
  /* Nuit : navigation, accueil, connexion */
  --nuit:#0b1020; --nuit-2:#111a33; --nuit-3:#1b2547;

  /* Accents. Le violet passe sous du blanc ; le cyan non.
     Sur fond nuit, on utilise les variantes claires. */
  --violet:#a78bfa; --violet-clair:#c4b5fd; --violet-voile:rgba(124,58,237,.16);
  --cyan:#22d3ee;   --cyan-fonce:#0e7490;   --cyan-voile:rgba(6,182,212,.14);
  --vert:#34d399;   --vert-fonce:#059669;   --vert-voile:rgba(16,185,129,.14);
  --rouge:#fb7185;  --rouge-fonce:#be123c;  --rouge-voile:rgba(225,29,72,.16);
  --ambre:#fbbf24;  --ambre-fonce:#b45309;  --ambre-voile:rgba(245,158,11,.14);

  /* Surfaces sombres : tout le site travaille sur fond nuit.
     Trois niveaux d'elevation, du plus profond au plus proche. */
  --surface:#0b1020;      /* fond general des pages */
  --papier:#111a33;       /* cartes, blocs, formulaires */
  --surface-2:#1b2547;    /* survols, en-tetes de tableaux, barres */
  --trait:#28345c;        /* bordures */
  --trait-vif:#3a4a7d;    /* bordures au survol */

  /* Textes sur fond sombre. Jamais de blanc pur : il vibre
     et fatigue sur soixante journees de lecture. */
  --texte:#e8eefc; --texte-doux:#a3b0cf; --texte-faible:#7d8ba1;
  --texte-nuit:#e8eefc; --texte-nuit-doux:#a3b0cf;

  /* Voiles : fonds d'etiquettes et de messages, version sombre */
  --violet-fond:rgba(124,58,237,.16);
  --cyan-fond:rgba(6,182,212,.14);
  --vert-fond:rgba(16,185,129,.14);
  --rouge-fond:rgba(225,29,72,.16);
  --ambre-fond:rgba(245,158,11,.14);

  /* Degrade d'identite. Le cyan est assombri en fin de course
     pour que le texte blanc reste lisible d'un bout a l'autre. */
  --degrade:linear-gradient(135deg,#7c3aed,#0e7490);
  --degrade-vif:linear-gradient(135deg,#7c3aed,#06b6d4);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;

  --ombre-pose:0 1px 2px rgba(0,0,0,.35);
  --ombre-leve:0 10px 30px -12px rgba(0,0,0,.6);
  --ombre-haute:0 28px 64px -26px rgba(0,0,0,.75);
  --lueur:0 0 0 1px rgba(124,58,237,.16), 0 10px 30px -12px rgba(124,58,237,.35);

  --sidebar-l:256px; --topbar-h:62px;
  /* Noms herites de l'ancienne charte.
     Plusieurs vues les utilisent encore en style direct ; sans ces
     definitions, le navigateur n'a aucune valeur et affiche du noir,
     invisible sur fond sombre. */
  --primary:#a78bfa;
  --primary-dark:#7c3aed;
  --secondary:#22d3ee;
  --success:#34d399;
  --danger:#fb7185;
  --warning:#fbbf24;
  --gray:#a3b0cf;
  --light:#1b2547;
  --dark:#e8eefc;
  --border:#28345c;
  --white:#111a33;

}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15.5px;line-height:1.62;color:var(--texte);background:var(--surface);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--texte)}
h1{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.6rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
h3{font-size:1.22rem} h4{font-size:1.02rem}
p{margin:0 0 1em;max-width:74ch}
a{color:var(--violet);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--violet-clair)}
hr{border:0;border-top:1px solid var(--trait);margin:1.75rem 0}
code,kbd,samp{font-family:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:3px}
::selection{background:rgba(139,92,246,.35);color:#fff}
.muted,.text-muted{color:var(--texte-doux)!important}
.subtitle{color:var(--texte-doux);font-size:1.02rem;max-width:68ch}

/* 4. Ossature */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-l);flex:0 0 var(--sidebar-l);background:var(--nuit);
  color:var(--texte-nuit-doux);padding:1.15rem .8rem 2rem;position:sticky;top:0;height:100vh;
  overflow-y:auto;border-right:1px solid rgba(255,255,255,.06)}
.sidebar .brand,.brand-logo{display:flex;align-items:center;gap:.6rem;font-weight:600;
  font-size:1.04rem;color:#fff;padding:.4rem .55rem 1.3rem;letter-spacing:-.02em}
.sidebar .brand i,.brand-logo i{color:var(--cyan)}
.sidebar .nav-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;margin-bottom:3px;
  border-radius:var(--r-md);color:var(--texte-nuit-doux);font-size:.945rem;text-decoration:none;
  position:relative}
.sidebar .nav-link i{width:1.1rem;text-align:center;color:#8fa0c8}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .nav-link:hover i{color:var(--cyan)}
.sidebar .nav-link.active{background:var(--nuit-2);color:#fff;font-weight:500}
.sidebar .nav-link.active i{color:var(--cyan)}
/* Le filet lumineux marque la page en cours */
.sidebar .nav-link.active::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;
  border-radius:0 3px 3px 0;background:var(--degrade-vif)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:1rem;
  padding:0 clamp(.9rem,3vw,1.9rem);background:var(--nuit-2);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:20}
.user-chip{display:flex;align-items:center;gap:.6rem;margin-left:auto;font-size:.92rem;color:var(--texte-doux)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--degrade);color:#fff;
  display:grid;place-items:center;font-size:.82rem;font-weight:600;flex:0 0 34px}
.content{padding:clamp(1.1rem,3vw,2.2rem);flex:1}
.container{width:100%;max-width:1200px;margin-inline:auto}

/* 5. Blocs */
.card,.box{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1.2rem 1.3rem;box-shadow:var(--ombre-pose)}
.card h3,.box h3{margin-top:0}
.grid{display:grid;gap:1rem}
.grid-2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-4{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* 6. Indicateurs chiffres */
.stat{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.9rem;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--degrade-vif)}
.stat-icon{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-sm);
  background:var(--violet-fond);color:var(--violet-clair);display:grid;place-items:center;font-size:1rem}
.stat-value{font-size:1.7rem;font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--texte)}
.stat-label{font-size:.8rem;color:var(--texte-doux)}

/* 7. Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;
  border:1px solid transparent;border-radius:var(--r-md);font:inherit;font-weight:500;font-size:.95rem;
  cursor:pointer;text-decoration:none;background:var(--surface-2);color:var(--texte);
  transition:transform .1s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{background:var(--trait);color:var(--texte)}
.btn:active{transform:translateY(1px)}
/* Bouton d'identite : le degrade ne sert qu'ici et sur la progression */
.btn-primary,.btn-accent,.home-btn{background:var(--degrade);color:#fff;border-color:transparent}
.btn-primary:hover,.btn-accent:hover,.home-btn:hover{color:#fff;box-shadow:var(--lueur)}
/* home-btn est parfois pose seul, sans la classe btn : il doit donc
   porter lui-meme sa forme, sinon il n'a que sa couleur. */
.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.62rem 1.15rem;border:1px solid transparent;border-radius:var(--r-md);
  font:inherit;font-weight:500;font-size:.95rem;line-height:1.2;text-decoration:none;
  cursor:pointer;transition:transform .1s ease,box-shadow .15s ease}
.home-btn:active{transform:translateY(1px)}
.btn-success{background:#047857;color:#fff;border-color:transparent}
.btn-success:hover{background:#065f46;color:#fff}
.btn-danger{background:var(--rouge-fonce);color:#fff;border-color:var(--rouge-fonce)}
.btn-danger:hover{background:#9f0f33;color:#fff}
.btn-outline{background:transparent;color:var(--violet-clair);border-color:var(--trait-vif)}
.btn-outline:hover{background:var(--violet-fond);border-color:var(--violet);color:#fff}
.btn-sm{padding:.4rem .8rem;font-size:.875rem}
.btn-block{display:flex;width:100%}
.btn:disabled,.btn.disabled{opacity:.5;pointer-events:none}

/* 8. Etiquettes */
.pill,.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .68rem;border-radius:999px;
  font-size:.78rem;font-weight:500;background:var(--surface-2);color:var(--texte-doux);
  border:1px solid var(--trait)}
.pill-green{background:var(--vert-fond);color:var(--vert);border-color:rgba(16,185,129,.35)}
.pill-red{background:var(--rouge-fond);color:var(--rouge);border-color:rgba(225,29,72,.38)}
/* Reference de ticket : c'est un code, la chasse fixe le signale */
.tag-reseau,.tag-dev{font-family:'Plex Mono',monospace;font-size:.74rem;border-radius:var(--r-sm);
  background:#070b16;color:var(--cyan);border-color:var(--trait)}

/* 9. Les 60 journees */
.days-grid{display:grid;gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.day-card{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:.85rem .9rem;text-decoration:none;color:inherit;display:block;position:relative;
  overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.day-card:hover{border-color:var(--trait-vif);box-shadow:var(--ombre-leve);background:var(--surface-2)}
.day-num{font-family:'Plex Mono',monospace;font-size:.72rem;color:var(--texte-faible);
  font-variant-numeric:tabular-nums}
.day-title{font-size:.89rem;font-weight:500;line-height:1.35;margin-top:.22rem;color:var(--texte);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.day-status{margin-top:.6rem;font-size:.74rem;color:var(--texte-doux)}
.day-card.done::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vert)}
.day-card.done .day-status{color:var(--vert)}
.day-card.locked{opacity:.5}

/* 10. La page d'une mission : l'ordre de travail */
.mission-section{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1.35rem 1.45rem;margin-bottom:1.15rem}
.mission-section > h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .95rem;padding-bottom:.65rem;
  border-bottom:1px solid var(--surface-2);font-size:1.08rem}
.mission-section > h3 i{color:var(--cyan);font-size:.95em}
.mission-section p{max-width:78ch}
.mission-section ul,.mission-section ol{max-width:78ch;padding-left:1.2rem}
.mission-section li{margin-bottom:.35rem}
.mission-section table{width:100%;border-collapse:collapse;margin:.95rem 0;font-size:.92rem}
.mission-section th{text-align:left;font-weight:600;color:var(--texte);background:var(--surface-2);
  padding:.55rem .75rem;border-bottom:2px solid var(--trait)}
.mission-section td{padding:.55rem .75rem;border-bottom:1px solid var(--surface-2);vertical-align:top}
.mission-section tr:last-child td{border-bottom:0}
.mission-section pre{background:#070b16;color:#dbe6ff;padding:1rem 1.1rem;border-radius:var(--r-md);
  overflow-x:auto;font-size:.855rem;line-height:1.55;border:1px solid var(--nuit-3)}
.mission-section pre code{color:inherit}
.mission-section :not(pre) > code{background:rgba(139,92,246,.18);color:var(--violet-clair);
  padding:.1rem .38rem;border-radius:var(--r-sm)}
.mission-section blockquote{margin:1rem 0;padding:.35rem 0 .35rem 1rem;border-left:3px solid var(--violet);
  color:var(--texte-doux);font-family:'Plex Serif',Georgia,serif}

/* Le courriel de l'encadrant : presente comme une lettre recue */
.pratique{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.10));
  border:1px solid var(--trait);border-radius:var(--r-md);padding:1.2rem 1.35rem;
  font-family:'Plex Serif',Georgia,serif;font-size:.985rem;line-height:1.7;position:relative;
  overflow:hidden}
.pratique::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--degrade-vif)}
.pratique p{max-width:68ch}
.pratique strong{font-weight:600}

/* 11. Formulaires */
.form-group{margin-bottom:1.05rem}
.form-group label,label{display:block;margin-bottom:.34rem;font-size:.88rem;font-weight:500;color:var(--texte)}
.form-control,input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{width:100%;padding:.62rem .85rem;border:1px solid var(--trait);
  border-radius:var(--r-md);font:inherit;font-size:.95rem;color:var(--texte);background:var(--papier)}
.form-control:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(139,92,246,.28)}
.form-control::placeholder{color:var(--texte-faible)}
textarea.form-control{min-height:112px;resize:vertical}

/* 12. Messages */
.alert{padding:.85rem 1.05rem;border-radius:var(--r-md);border:1px solid transparent;
  border-left-width:3px;margin-bottom:1rem;font-size:.93rem}
.alert-info{background:var(--cyan-fond);border-color:rgba(6,182,212,.32);border-left-color:var(--cyan);color:#a5eef8}
.alert-success{background:var(--vert-fond);border-color:rgba(16,185,129,.32);border-left-color:var(--vert);color:#a7f3d0}
.alert-danger{background:var(--rouge-fond);border-color:rgba(225,29,72,.34);border-left-color:var(--rouge);color:#fecdd3}
.alert-warning{background:var(--ambre-fond);border-color:rgba(245,158,11,.32);border-left-color:var(--ambre);color:#fde68a}

/* 13. Progression */
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:var(--degrade-vif);border-radius:999px}

/* 14. Examens */
.qcm-question{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1.15rem 1.25rem;margin-bottom:.9rem}
.qcm-option{display:block;padding:.68rem .9rem;border:1px solid var(--trait);border-radius:var(--r-md);
  margin-bottom:.5rem;cursor:pointer;font-size:.945rem}
.qcm-option:hover{border-color:var(--violet);background:var(--violet-fond)}
.qcm-option input{margin-right:.55rem;accent-color:var(--violet)}
.result-hero{background:var(--nuit);color:#fff;border-radius:var(--r-lg);padding:2.2rem 1.5rem;
  text-align:center;position:relative;overflow:hidden}
.result-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(600px 240px at 50% -10%,rgba(124,58,237,.35),transparent 70%);
  pointer-events:none}
.result-hero > *{position:relative;z-index:1}
.result-hero h2{color:#fff}
.result-score{font-size:3.3rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:#fff}
.result-stars,.stars{color:var(--cyan);font-size:1.15rem;letter-spacing:.1em}

/* 15. Distinctions */
.badges{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}
.badge-item{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1.05rem .85rem;text-align:center}
.badge-icon{font-size:1.55rem;margin-bottom:.42rem;
  background:var(--degrade-vif);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge-name{font-size:.82rem;font-weight:500}
.badge-item.locked{opacity:.4}
.badge-item.locked .badge-icon{background:none;color:var(--texte-faible)}

/* 16. Pages publiques : le bandeau nuit porte l'identite */
.home-hero{background:var(--nuit);color:var(--texte-nuit);
  padding:clamp(2.6rem,7vw,5rem) clamp(1.1rem,4vw,2rem);position:relative;overflow:hidden}
/* Deux halos accentues, l'un violet, l'autre cyan, plus une trame fine */
.home-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 12% -10%,rgba(124,58,237,.40),transparent 62%),
             radial-gradient(620px 340px at 92% 12%,rgba(6,182,212,.26),transparent 64%)}
.home-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.home-hero > *{position:relative;z-index:1}
.home-hero h1{color:#fff;max-width:20ch}
.home-hero p{color:var(--texte-nuit);max-width:62ch;font-size:1.06rem}
.home-hero .btn-outline-light{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.04)}
.home-hero .btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--cyan);color:#fff}

.home-card{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:1.35rem;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.home-card:hover{border-color:var(--trait-vif);box-shadow:var(--ombre-leve);transform:translateY(-2px)}
.home-icon{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:1.08rem;background:var(--degrade);color:#fff;margin-bottom:.85rem}
.home-cat{font-size:.78rem;color:var(--texte-doux);margin-bottom:.15rem}
.home-desc{font-size:.92rem;color:var(--texte-doux);flex:1}
.home-meta{display:flex;align-items:center;gap:.75rem;margin-top:.95rem;padding-top:.85rem;
  border-top:1px solid var(--surface-2);font-size:.84rem;color:var(--texte-doux)}
.home-days{font-weight:500;color:var(--cyan);font-variant-numeric:tabular-nums}

/* 17. Connexion et inscription */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem 1rem;
  background:var(--nuit);position:relative;overflow:hidden}
.auth-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 340px at 20% 0%,rgba(124,58,237,.38),transparent 62%),
             radial-gradient(560px 300px at 88% 100%,rgba(6,182,212,.24),transparent 64%)}
.auth-card{width:100%;max-width:428px;background:var(--papier);border-radius:var(--r-lg);
  padding:2.1rem 1.95rem;box-shadow:var(--ombre-haute);position:relative;z-index:1}
.auth-card h1{font-size:1.45rem}

/* 18. Tableaux hors mission */
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:600;color:var(--texte)}

/* 19. Petits ecrans */
@media (max-width:991.98px){
  .sidebar{display:none}
  .content{padding:1rem}
}
@media (max-width:575.98px){
  body{font-size:15px}
  .days-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .mission-section{padding:1rem}
  .pratique{padding:1rem}
  .stat{padding:.85rem .95rem}
  .stat-value{font-size:1.45rem}
}

/* 20. Mouvement reduit */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .home-card:hover{transform:none}
}

/* 21. Impression : certificats et rapports */
@media print{
  .sidebar,.topbar,.btn,.offcanvas{display:none!important}
  body{background:#fff;font-size:11.5pt;color:#000}
  .card,.box,.mission-section,.topbar,.ordre-mission{background:#fff!important;color:#000!important}
  .mission-section pre{background:#f4f4f4!important;color:#000!important}
  .content{padding:0}
  .card,.box,.mission-section{border:1px solid #ccc;box-shadow:none}
  .home-hero,.auth-wrap,.result-hero{background:#fff;color:#000}
}

/* 22. L'ordre de mission montre en page d'accueil */
.ordre-mission{background:var(--papier);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--ombre-haute);color:var(--texte);border:1px solid var(--trait)}
.ordre-entete{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1.1rem;background:var(--surface-2);border-bottom:1px solid var(--trait)}
.ordre-ref{font-family:'Plex Mono',monospace;font-size:.78rem;font-weight:500;
  background:#070b16;color:var(--cyan);padding:.18rem .55rem;border-radius:var(--r-sm);
  border:1px solid var(--trait)}
.ordre-urgence{font-size:.76rem;font-weight:500;color:#fecdd3;background:rgba(225,29,72,.22);
  border:1px solid rgba(225,29,72,.4);padding:.16rem .6rem;border-radius:999px}
.ordre-corps{padding:1.15rem 1.2rem .95rem}
.ordre-objet{font-weight:600;font-size:1.04rem;margin:0 0 .6rem;color:var(--texte)}
.ordre-texte{font-family:'Plex Serif',Georgia,serif;font-size:.94rem;line-height:1.65;
  color:var(--texte-doux);margin:0 0 .85rem}
.ordre-signature{font-size:.82rem;color:var(--texte-faible);margin:0}
.ordre-pied{display:flex;justify-content:space-between;font-size:.78rem;color:var(--texte-doux);
  padding:.65rem 1.2rem;border-top:1px solid var(--trait);background:var(--surface-2)}

/* 23. Neutralisation des classes claires de Bootstrap.
   Quelques vues utilisent encore bg-white, bg-light ou text-dark,
   heritees de la charte claire. Sur fond sombre, elles produisent
   du texte noir illisible. On les reaccorde plutot que de modifier
   les vues une par une. */
.bg-white,.bg-light{background:var(--papier)!important;color:var(--texte)!important}
.text-dark{color:var(--texte)!important}
.table-light,.table-light > th,.table-light > td{background:var(--surface-2)!important;color:var(--texte)!important}
.text-bg-light{background:var(--surface-2)!important;color:var(--texte)!important}
.border-light{border-color:var(--trait)!important}

/* Tableaux Bootstrap : les couleurs par defaut sont claires */
.table{--bs-table-bg:transparent;--bs-table-color:var(--texte);
  --bs-table-border-color:var(--trait);--bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-striped-color:var(--texte);--bs-table-hover-bg:rgba(255,255,255,.05);
  --bs-table-hover-color:var(--texte)}
.table > :not(caption) > * > *{background-color:transparent;color:var(--texte)}
.table > thead th{background:var(--surface-2);color:var(--texte);border-bottom-color:var(--trait)}

/* Fenetres modales et menus deroulants de Bootstrap */
.modal-content,.dropdown-menu,.offcanvas{background:var(--papier);color:var(--texte);
  border-color:var(--trait)}
.dropdown-item{color:var(--texte)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2);color:#fff}
.modal-header,.modal-footer{border-color:var(--trait)}
.btn-close{filter:invert(1) grayscale(1) brightness(2)}

/* Champs Bootstrap */
.form-select,.input-group-text{background:var(--papier);color:var(--texte);border-color:var(--trait)}
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}

/* Fil d'Ariane */
.breadcrumb{background:transparent}
.breadcrumb-item,.breadcrumb-item a{color:var(--texte-doux)}
.breadcrumb-item.active{color:var(--texte)}
.breadcrumb-item + .breadcrumb-item::before{color:var(--texte-faible)}

/* 24. Accord de Bootstrap sur notre palette.
   L'attribut data-bs-theme="dark" pose les composants en sombre ;
   ces variables remplacent ses gris par nos teintes. Sans elles,
   Bootstrap imposerait sa propre couleur de texte aux cartes,
   tableaux, menus et formulaires. */
[data-bs-theme="dark"]{
  --bs-body-bg:#0b1020;
  --bs-body-color:#e8eefc;
  --bs-emphasis-color:#ffffff;
  --bs-secondary-color:rgba(232,238,252,.72);
  --bs-tertiary-color:rgba(232,238,252,.5);
  --bs-secondary-bg:#111a33;
  --bs-tertiary-bg:#1b2547;
  --bs-border-color:#28345c;
  --bs-border-color-translucent:rgba(255,255,255,.12);
  --bs-link-color:#a78bfa;
  --bs-link-hover-color:#22d3ee;
  --bs-link-color-rgb:167,139,250;
  --bs-heading-color:#e8eefc;
  --bs-code-color:#a78bfa;
  --bs-highlight-bg:rgba(124,58,237,.25);
}

/* Filet de securite : tout conteneur pose sur une surface sombre
   herite explicitement du texte clair. Certaines vues ecrivent
   leurs couleurs en direct et echappent aux variables. */
.card,.box,.mission-section,.stat,.day-card,.qcm-question,.badge-item,
.auth-card,.ordre-mission,.modal-content,.dropdown-menu,.list-group-item,
.accordion-item,.accordion-body,.offcanvas,.toast{color:var(--texte)}
.card *,.box *,.mission-section *,.qcm-question *{border-color:var(--trait)}
.list-group-item{background:var(--papier)}
.accordion-button{background:var(--papier);color:var(--texte)}
.accordion-button:not(.collapsed){background:var(--surface-2);color:var(--texte)}
.accordion-button::after{filter:invert(1) brightness(1.8)}
.page-link{background:var(--papier);color:var(--texte);border-color:var(--trait)}
.page-item.active .page-link{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}

/* Les titres et paragraphes places dans une carte suivent la carte */
.card h1,.card h2,.card h3,.card h4,.card h5,
.box h1,.box h2,.box h3,.box h4,.box h5,
.mission-section h1,.mission-section h2,.mission-section h3,
.mission-section h4,.mission-section h5{color:var(--texte)}

/* 25. Les rares zones restees claires gardent un texte sombre.
   Une carte blanche sur fond sombre reste lisible, a condition
   que son texte bascule avec elle. */
.sur-fond-clair,.bg-blanc{background:#ffffff!important;color:#0f172a!important}
.sur-fond-clair *,.bg-blanc *{color:#0f172a}
.sur-fond-clair .muted,.bg-blanc .muted{color:#64748b!important}