/* Choix du fond du site : sombre (fond de marque historique, par défaut) ou
   blanc. Le choix est posé par assets/theme.js sur <html data-theme="…"> et
   mémorisé dans le navigateur du visiteur.

   Le site est écrit en classes Tailwind pensées pour le fond sombre. Plutôt
   que de dupliquer chaque page, le thème clair remappe ces classes : le
   préfixe html[data-theme="light"] leur donne une spécificité supérieure à
   celle des utilitaires Tailwind, quel que soit l'ordre de chargement.

   Les slides des carrousels gardent volontairement leur fond sombre : ce sont
   des visuels exportés tels quels (PDF, LinkedIn). Seul le fond de la page
   autour d'eux change. */

/* ---------- Bouton de bascule ---------- */
.adt-theme-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(11, 16, 29, .92);
    color: #f1f5f9;
    font: 700 12px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.adt-theme-toggle:hover {
    border-color: #f97316;
    transform: translateY(-1px);
}

.adt-theme-toggle:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.adt-theme-toggle svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

html[data-theme="light"] .adt-theme-toggle {
    border-color: #cbd5e1;
    background: rgba(255, 255, 255, .95);
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

/* Le carrousel en plein écran simulé recouvre toute la page. */
body.simulated-fullscreen .adt-theme-toggle {
    display: none;
}

@media print {
    .adt-theme-toggle {
        display: none;
    }
}

/* ---------- Thème clair : fond et texte de base ---------- */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    background: #ffffff;
    color: #0f172a;
}

/* ---------- Thème clair : fonds Tailwind ---------- */
html[data-theme="light"] .bg-adt-dark,
html[data-theme="light"] .bg-\[\#040711\] {
    background-color: #ffffff;
}

html[data-theme="light"] .bg-adt-dark\/90 {
    background-color: rgba(255, 255, 255, .9);
}

html[data-theme="light"] .bg-adt-dark\/95 {
    background-color: rgba(255, 255, 255, .96);
}

html[data-theme="light"] .bg-adt-card,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/90 {
    background-color: #f8fafc;
}

html[data-theme="light"] .bg-adt-card\/50,
html[data-theme="light"] .bg-slate-900\/30,
html[data-theme="light"] .bg-slate-900\/40 {
    background-color: rgba(248, 250, 252, .7);
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] .bg-slate-800\/50 {
    background-color: #f1f5f9;
}

html[data-theme="light"] .hover\:bg-slate-700:hover,
html[data-theme="light"] .hover\:bg-slate-800:hover {
    background-color: #e2e8f0;
}

/* Section « Lois africaines » : dégradé sombre → dégradé gris très clair. */
html[data-theme="light"] .bg-gradient-to-b.from-adt-dark {
    background-image: linear-gradient(to bottom, #ffffff, #f1f5f9 50%, #ffffff);
}

/* ---------- Thème clair : bordures ---------- */
html[data-theme="light"] .border-adt-border,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-800\/50,
html[data-theme="light"] .border-slate-800\/60,
html[data-theme="light"] .border-slate-800\/80 {
    border-color: #e2e8f0;
}

html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-700\/60 {
    border-color: #cbd5e1;
}

/* ---------- Thème clair : textes neutres ---------- */
/* Le texte blanc devient bleu nuit, sauf posé sur un aplat de couleur
   (boutons orange, pastilles en dégradé) où il doit rester blanc. */
html[data-theme="light"] .text-white:not(.bg-adt-orange):not(.bg-adt-cyan):not(.from-adt-orange):not(.from-adt-cyan),
html[data-theme="light"] .hover\:text-white:hover {
    color: #0f172a;
}

html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
    color: #1e293b;
}

html[data-theme="light"] .text-slate-300 {
    color: #334155;
}

html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-adt-sub {
    color: #475569;
}

html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .placeholder-slate-500::placeholder {
    color: #64748b;
}

/* ---------- Thème clair : textes d'accent ----------
   Les teintes claires (-300/-400) pensées pour le fond sombre manquent de
   contraste sur blanc : on passe aux teintes foncées de la même famille. */
html[data-theme="light"] .text-adt-cyan,
html[data-theme="light"] .hover\:text-adt-cyan:hover {
    color: #0369a1;
}

html[data-theme="light"] .text-cyan-300,
html[data-theme="light"] .text-cyan-400,
html[data-theme="light"] .hover\:text-cyan-400:hover {
    color: #0e7490;
}

html[data-theme="light"] .text-adt-orange,
html[data-theme="light"] .text-orange-500,
html[data-theme="light"] .hover\:text-adt-orange:hover {
    color: #ea580c;
}

html[data-theme="light"] .text-orange-300,
html[data-theme="light"] .text-orange-400 {
    color: #c2410c;
}

html[data-theme="light"] .text-adt-emerald,
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400 {
    color: #047857;
}

html[data-theme="light"] .text-amber-300,
html[data-theme="light"] .text-amber-400 {
    color: #b45309;
}

html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400 {
    color: #b91c1c;
}

html[data-theme="light"] .text-adt-purple,
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400 {
    color: #7e22ce;
}

html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .text-blue-400 {
    color: #1d4ed8;
}

/* Survol vers un aplat de couleur pleine : le texte redevient blanc ou noir
   comme dans le thème sombre (placé après les remappages ci-dessus). */
html[data-theme="light"] .hover\:text-white:is(.hover\:bg-adt-orange, .hover\:bg-orange-500, .hover\:bg-red-500, .hover\:bg-emerald-500, .hover\:bg-purple-500, .hover\:bg-blue-500, .hover\:bg-cyan-500, .hover\:bg-amber-500, .hover\:bg-adt-cyan):hover {
    color: #ffffff;
}

html[data-theme="light"] .hover\:text-slate-950:hover {
    color: #020617;
}

/* ---------- Thème clair : carte interactive de l'Afrique ---------- */
html[data-theme="light"] #africaMap {
    --map-off: #e2e8f0;
    --map-off-stroke: #cbd5e1;
    --map-gap: #ffffff;
}

/* ---------- Thème clair : pages carrousels ---------- */
html[data-theme="light"] .presentation-bar {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}

html[data-theme="light"] .stage-container-box {
    box-shadow: 0 20px 50px rgba(15, 23, 42, .22);
}

html[data-theme="light"] .pill-dot:not(.active) {
    background: rgba(15, 23, 42, .18);
}

html[data-theme="light"] body.simulated-fullscreen .stage-scaler-wrapper {
    background: #ffffff;
}

/* ---------- Thème clair : page 404 (styles autonomes) ---------- */
html[data-theme="light"] .adt-404 h1 {
    color: #0f172a;
}

html[data-theme="light"] .adt-404 p {
    color: #475569;
}

html[data-theme="light"] .adt-404 a:not(.primary) {
    border-color: #cbd5e1;
    color: #1e293b;
}