/* ============================================================
   theme-theorie.css — MODE CLAIR de la section THÉORIE
   Conçu à partir de la cartographie couleur de chaque page
   (dashboard, quiz, cours, progression, résultats).
   Chargé UNIQUEMENT sur les pages /theorie. Le mode sombre
   (data-theme != light) reste 100% inchangé.

   Vert de marque #8cc63f = conservé. Couleurs de statut
   (bleu en-cours, vert-succès, rouge grave, amber verrou)
   = conservées, mais textes pastel foncés pour rester
   lisibles sur fond clair.

   RESTENT SOMBRES (objets, pas des surfaces) :
   - illustrations de module (fond navy .m-media = letterboxing)
   - textes foncés posés SUR un bouton vert/amber plein
   - masque de la modale de signalement
   - fond blanc volontaire derrière une image (.img-light)
   ============================================================ */

html[data-theme="light"] {
    --pp-bg:               #eef3f9;
    --pp-bg-deep:          #e5edf5;
    --pp-card:             #ffffff;
    --pp-card-2:           #f5f8fc;
    --pp-card-translucent: rgba(16, 42, 69, 0.045);
    --pp-text:             #112a45;
    --pp-text-muted:       #51647a;
    --pp-text-soft:        #5d7286;
    --pp-border:           rgba(16, 42, 69, 0.12);
    --pp-border-soft:      rgba(16, 42, 69, 0.08);
    color-scheme: light;
}

html[data-theme] body { transition: background-color .25s ease, color .25s ease; }

/* ===========================================================
   0. BASE COMMUNE (toutes les pages théorie)
   =========================================================== */
html[data-theme="light"] body,
html[data-theme="light"] .bg-\[\#0f2b46\] { background-color: var(--pp-bg) !important; }
html[data-theme="light"] body { color: var(--pp-text); }
html[data-theme="light"] .bg-\[\#0a1929\],
html[data-theme="light"] .bg-\[\#0a1f36\]\/50 { background-color: var(--pp-bg-deep) !important; }

html[data-theme="light"] .text-white    { color: var(--pp-text) !important; }
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-gray-300 { color: var(--pp-text-soft) !important; }
html[data-theme="light"] .text-gray-400 { color: var(--pp-text-muted) !important; }
html[data-theme="light"] .text-gray-500 { color: #6b7a89 !important; }
html[data-theme="light"] .text-gray-600 { color: #8a97a5 !important; }

html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10 { border-color: var(--pp-border) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(16, 42, 69, 0.18) !important; }
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10 { background-color: var(--pp-card-translucent) !important; }

/* Carte "verre" partagée (quiz, cours, progression, résultats) */
html[data-theme="light"] .glass-card {
    background: var(--pp-card) !important;
    border-color: var(--pp-border) !important;
    box-shadow: 0 4px 22px rgba(16, 42, 69, .07);
}

/* Statuts Tailwind : textes pastel foncés pour le contraste sur clair */
html[data-theme="light"] .text-blue-400   { color: #2563eb !important; }
html[data-theme="light"] .text-green-400,
html[data-theme="light"] .text-green-300   { color: #16a34a !important; }
html[data-theme="light"] .text-red-400,
html[data-theme="light"] .text-red-300     { color: #dc2626 !important; }
html[data-theme="light"] .text-yellow-400  { color: #b45309 !important; }
html[data-theme="light"] .text-orange-400  { color: #c2410c !important; }
html[data-theme="light"] .text-purple-400  { color: #7c3aed !important; }

/* ===========================================================
   1. STYLES INLINE communs (par valeur exacte, par propriété)
   =========================================================== */
/* Texte blanc → foncé (défaut) */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: white"],
html[data-theme="light"] [style*="color:#e5e7eb"],
html[data-theme="light"] [style*="color:rgba(255,255,255"] { color: var(--pp-text) !important; }

/* RÉ-AFFIRMATION : texte blanc sur bouton/badge coloré → reste blanc */
html[data-theme="light"] [style*="linear-gradient"][style*="color:#fff"],
html[data-theme="light"] [style*="linear-gradient"][style*="color:white"],
html[data-theme="light"] [class*="from-"][style*="color:#fff"],
html[data-theme="light"] [class*="bg-gradient"][style*="color:#fff"] { color: #fff !important; }

/* Texte gris/slate → atténué foncé */
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color:#93a6bd"],
html[data-theme="light"] [style*="color:#9ca3af"],
html[data-theme="light"] [style*="color:#aebfd2"],
html[data-theme="light"] [style*="color:#8497ad"],
html[data-theme="light"] [style*="color:#7e93aa"],
html[data-theme="light"] [style*="color:#9fb1c4"],
html[data-theme="light"] [style*="color:#5a6878"],
html[data-theme="light"] [style*="color:#6b7280"],
html[data-theme="light"] [style*="color:#64748b"] { color: var(--pp-text-muted) !important; }

html[data-theme="light"] [style*="color:#cbd5e1"],
html[data-theme="light"] [style*="color:#cdd9e6"],
html[data-theme="light"] [style*="color:#dbe5f0"],
html[data-theme="light"] [style*="color:#d1d5db"],
html[data-theme="light"] [style*="color:#e8edf2"] { color: var(--pp-text-soft) !important; }

/* Textes STATUS pastel (calibrés pour fond sombre) → foncés */
html[data-theme="light"] [style*="color:#60a5fa"],
html[data-theme="light"] [style*="color:#93c5fd"] { color: #2563eb !important; }
html[data-theme="light"] [style*="color:#4ade80"],
html[data-theme="light"] [style*="color:#86efac"] { color: #16a34a !important; }
html[data-theme="light"] [style*="color:#fca5a5"],
html[data-theme="light"] [style*="color:#f87171"] { color: #dc2626 !important; }
html[data-theme="light"] [style*="color:#fcd34d"],
html[data-theme="light"] [style*="color:#fde68a"] { color: #b45309 !important; }
html[data-theme="light"] [style*="color:#a3d960"],
html[data-theme="light"] [style*="color:#c8e6a0"],
html[data-theme="light"] [style*="color:#b3e063"] { color: #4e7d1f !important; }

/* Surfaces bleu-nuit pleines/translucides → carte claire */
html[data-theme="light"] [style*="background:#0f2b46"],
html[data-theme="light"] [style*="background-color:#0f2b46"],
html[data-theme="light"] [style*="background:rgba(30,58,87"],
html[data-theme="light"] [style*="background-color:rgba(30,58,87"],
html[data-theme="light"] [style*="background:rgba(15,43,70,0.5"],
html[data-theme="light"] [style*="background:rgba(15,31,55"],
html[data-theme="light"] [style*="background:rgba(10,31,54"] { background-color: var(--pp-card) !important; }
/* Carte panneau / quiz (dégradé bleu-nuit) → carte claire */
html[data-theme="light"] [style*="linear-gradient(135deg, rgba(30,58,87,0.6)"],
html[data-theme="light"] [style*="linear-gradient(135deg,rgba(30,58,87,0.6)"] { background: var(--pp-card) !important; }
/* Surfaces blanches très translucides → léger voile foncé */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="background-color:rgba(255,255,255,0.0"] { background-color: var(--pp-card-translucent) !important; }

/* Bordures blanches inline → navy translucide */
html[data-theme="light"] [style*="solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-color:rgba(255,255,255"] { border-color: var(--pp-border) !important; }

/* ===========================================================
   2. DASHBOARD (#t2) — bascule des variables + cas particuliers
   =========================================================== */
html[data-theme="light"] #t2 {
    --panel:   var(--pp-card);
    --panel-2: var(--pp-card-2);
    --border:  var(--pp-border);
    --ink:     var(--pp-text);
    --muted:   var(--pp-text-muted);
    background: var(--pp-bg) !important;
}
/* Cartes module + surfaces */
html[data-theme="light"] #t2 .mod[open]      { background: var(--pp-card) !important; border-color: rgba(140,198,63,.4) !important; }
html[data-theme="light"] #t2 .resume-cta     { background: var(--pp-card-translucent) !important; color: var(--pp-text) !important; }
html[data-theme="light"] #t2 .btn-ghost      { background: var(--pp-card-translucent) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }
html[data-theme="light"] #t2 .chip           { background: var(--pp-card-translucent) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }
html[data-theme="light"] #t2 .lesson         { color: var(--pp-text) !important; }
html[data-theme="light"] #t2 .lesson .ln     { background: var(--pp-card-translucent) !important; color: var(--pp-text-muted) !important; border-color: var(--pp-border) !important; }
/* Rails de progression / timeline → foncés translucides */
html[data-theme="light"] #t2 .pbar           { background: var(--pp-border) !important; }
html[data-theme="light"] #t2 .step::before   { background: var(--pp-border) !important; }
/* Nœuds de timeline : surface claire + halo de découpe = couleur du fond clair */
html[data-theme="light"] #t2 .node           { background: var(--pp-card-2) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; box-shadow: 0 0 0 6px var(--pp-bg) !important; }
html[data-theme="light"] #t2 .step.current .node { background: #1d4e7e !important; color: #fff !important; box-shadow: 0 0 0 6px var(--pp-bg), 0 0 0 9px rgba(16,42,69,.12) !important; }
html[data-theme="light"] #t2 .node-finish    { background: var(--pp-card-2) !important; }
/* Carte d'arrivée : dégradé vert → clair (au lieu de vert → navy) */
html[data-theme="light"] #t2 .finish-card    { background: linear-gradient(180deg, rgba(140,198,63,.14), #ffffff) !important; border-color: rgba(140,198,63,.35) !important; }
/* Pills de statut : fond un peu plus dense + texte foncé pour lisibilité */
html[data-theme="light"] #t2 .st-todo        { background: var(--pp-card-translucent) !important; color: var(--pp-text-muted) !important; }
html[data-theme="light"] #t2 .st-current     { background: rgba(59,130,246,.13) !important; color: #2563eb !important; }
html[data-theme="light"] #t2 .st-done        { background: rgba(34,197,94,.15) !important; color: #15803d !important; }
html[data-theme="light"] #t2 .st-master,
html[data-theme="light"] #t2 .st-premium     { background: rgba(251,191,36,.18) !important; color: #b45309 !important; }
/* Motif de points du hero (blanc translucide) → foncé translucide */
html[data-theme="light"] #t2 .head::after    { background-image: radial-gradient(rgba(16,42,69,.05) 1px, transparent 1px) !important; }
/* NB volontairement NON touchés (restent sombres) :
   #t2 .m-media (fond navy = letterboxing illustration),
   #t2 .badge.pg (texte #3a2a00 sur amber), .badge.fg (blanc sur rouge),
   .btn-primary/.exam-cta (texte #0f2b46 sur vert), .lock-pill,
   .exam-cta .ec-ic (pastille navy dans le bouton vert). */

/* ===========================================================
   3. QUIZ (entrainement.php)
   =========================================================== */
html[data-theme="light"] .option-btn          { background: var(--pp-card) !important; border-color: var(--pp-border) !important; color: var(--pp-text); }
html[data-theme="light"] .option-btn.correct   { border-color: #22c55e !important; background: rgba(34,197,94,.14) !important; }
html[data-theme="light"] .option-btn.wrong     { border-color: #ef4444 !important; background: rgba(239,68,68,.10) !important; }
html[data-theme="light"] .cat-card.active      { background: rgba(140,198,63,.10) !important; }
html[data-theme="light"] .progress-dot         { background: var(--pp-border) !important; }
html[data-theme="light"] .key-hint             { color: rgba(16,42,69,.28) !important; }
/* .img-light (fond blanc volontaire derrière l'image) : reste blanc → non touché.
   .report-overlay (masque modal rgba(0,0,0,.6)) : non touché.
   #practicePlaceholder (objet rouge/blanc) : non touché. */

/* ===========================================================
   4. COURS (template.php, synthese/index.php, panneaux-*.php)
   =========================================================== */
html[data-theme="light"] .content-section p,
html[data-theme="light"] .content-section ul li,
html[data-theme="light"] .content-section td   { color: var(--pp-text-muted) !important; }
html[data-theme="light"] .content-section td    { border-bottom-color: var(--pp-border-soft) !important; }
html[data-theme="light"] .content-section table tr:hover td { background: var(--pp-card-translucent) !important; }
html[data-theme="light"] .sidebar-link          { color: var(--pp-text-muted) !important; }
html[data-theme="light"] .nav-theme             { color: var(--pp-text-muted) !important; }
/* Encadrés colorés : on garde la teinte, on densifie un peu le fond sur clair */
html[data-theme="light"] .rule-card             { background: rgba(140,198,63,.10) !important; border-color: rgba(140,198,63,.28) !important; }
html[data-theme="light"] .danger-card           { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.28) !important; }
html[data-theme="light"] .danger-card .danger-title { color: #dc2626 !important; }
html[data-theme="light"] .info-card             { background: rgba(59,130,246,.08) !important; border-color: rgba(59,130,246,.28) !important; }
html[data-theme="light"] .info-card .info-title { color: #2563eb !important; }
html[data-theme="light"] .warning-card          { background: rgba(245,158,11,.10) !important; border-color: rgba(245,158,11,.30) !important; }
html[data-theme="light"] .warning-card .warning-title { color: #b45309 !important; }
/* Cartes chapitre de la roadmap cours */
html[data-theme="light"] .chapter-grid-card     { background: var(--pp-card) !important; border-color: var(--pp-border) !important; color: var(--pp-text) !important; }
html[data-theme="light"] .progress-bar-bg       { background: var(--pp-border) !important; }

/* ===========================================================
   5. PROGRESSION / RÉSULTATS
   =========================================================== */
html[data-theme="light"] .chapter-row:hover     { background: var(--pp-card-translucent) !important; }
html[data-theme="light"] .progress-mini          { background: var(--pp-border) !important; }
/* .filter-btn.active : vert de marque → conservé. */

/* ===========================================================
   6. BOUTON TOGGLE (soleil / lune)
   =========================================================== */
.pp-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1; cursor: pointer; transition: all .2s ease;
}
.pp-theme-toggle:hover { color: #8cc63f; border-color: rgba(140, 198, 63, 0.4); }
html[data-theme="light"] .pp-theme-toggle {
    background: rgba(16, 42, 69, 0.05);
    border-color: rgba(16, 42, 69, 0.12);
    color: #51647a;
}
html[data-theme="light"] .pp-theme-toggle:hover { color: #6ba32e; border-color: rgba(140, 198, 63, 0.5); }