/* ============================================================
   theme-home.css — MODE CLAIR de la page d'accueil (index.php)
   Conçu à partir de la cartographie couleur section par section.
   Chargé UNIQUEMENT sur l'accueil. N'affecte rien quand
   data-theme n'est pas "light" (mode sombre = inchangé).

   Principe : les DÉGRADÉS restent des dégradés (versions claires),
   le vert de marque #8cc63f et les couleurs de statut sont
   identiques, et les éléments "objet" restent sombres :
   - mockup feu de signalisation (boîtier, visières, ampoules)
   - masques alpha (#000 grille hero / fondu marquee)
   - overlays de lisibilité (photos, voile modale)
   - pastille blanche du logo Google
   ============================================================ */

html[data-theme="light"] {
    --pp-bg:               #eef3f9;   /* fond de page */
    --pp-bg-deep:          #e5edf5;   /* sections les plus profondes */
    --pp-card:             #ffffff;   /* cartes pleines */
    --pp-card-2:           #f5f8fc;   /* cartes secondaires */
    --pp-card-translucent: rgba(16, 42, 69, 0.04);
    --pp-card-img:         #dfe8f2;   /* placeholders image */
    --pp-text:             #112a45;   /* texte principal */
    --pp-text-muted:       #51647a;   /* texte secondaire */
    --pp-text-soft:        #5d7286;   /* texte clair (slate-300) */
    --pp-border:           rgba(16, 42, 69, 0.12);
    --pp-border-soft:      rgba(16, 42, 69, 0.08);

    /* Dégradés de section (versions claires des fonds sombres) */
    --pp-grad-hero:        linear-gradient(160deg, #e9f0f8 0%, #eef3f9 30%, #f4f8fc 60%, #eef3f9 100%);
    --pp-grad-packs:       linear-gradient(to bottom, #f1f5fa, #e5edf5);
    --pp-grad-prepare:     linear-gradient(to bottom, #eef3f9, #e5edf5);
    --pp-grad-articles:    linear-gradient(180deg, #e9eff6 0%, #dfe8f1 100%);
    --pp-grad-faq:         linear-gradient(180deg, #eef3f9 0%, #e8f1fa 100%);

    /* Dégradés de carte */
    --pp-card-product:     linear-gradient(135deg, #ffffff, #f4f8fc);
    --pp-card-article-img: linear-gradient(135deg, #e9eff6, #dce6f1);
    --pp-card-modal:       linear-gradient(180deg, #ffffff, #f4f8fc);

    color-scheme: light;
}

/* Transition douce au basculement */
html[data-theme] body,
html[data-theme] .glass-card,
html[data-theme] .pp-step,
html[data-theme] .prep-card { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* ===========================================================
   1. FOND GLOBAL + CLASSES TAILWIND
   =========================================================== */
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\] { background-color: var(--pp-bg-deep) !important; }

html[data-theme="light"] .text-white     { color: var(--pp-text) !important; }
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\/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      { background-color: var(--pp-card-translucent) !important; }

/* Dégradé section Témoignages (classes Tailwind from-/to-) */
html[data-theme="light"] .from-\[\#0f2b46\] {
    --tw-gradient-from: #eef3f9 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(238, 243, 249, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="light"] .to-\[\#1e3a57\] { --tw-gradient-to: #ffffff var(--tw-gradient-to-position) !important; }

/* ===========================================================
   2. COMPOSANTS (classes du <style> de l'accueil)
   =========================================================== */
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);
}
html[data-theme="light"] .glass-card:hover { background: var(--pp-card) !important; }
html[data-theme="light"] .hero-card        { background: var(--pp-card) !important; border-color: var(--pp-border) !important; }
html[data-theme="light"] .hero-card-green  { background: rgba(140, 198, 63, 0.08) !important; }
html[data-theme="light"] .pp-step          { background: var(--pp-card) !important; border-color: var(--pp-border) !important; color: var(--pp-text) !important; }
html[data-theme="light"] .pp-step:hover    { background: var(--pp-card-2) !important; }
html[data-theme="light"] .pp-num           { color: rgba(16, 42, 69, 0.06) !important; }
html[data-theme="light"] .pp-desc,
html[data-theme="light"] .pp-meta          { color: var(--pp-text-muted) !important; }
html[data-theme="light"] .pp-meta strong   { color: var(--pp-text-soft) !important; }
html[data-theme="light"] .prep-card        { background: var(--pp-card) !important; border-color: var(--pp-border) !important; color: var(--pp-text) !important; }
html[data-theme="light"] .cx-chip          { background: var(--pp-card-translucent) !important; border-color: var(--pp-border) !important; color: var(--pp-text) !important; }
html[data-theme="light"] .pp-module        { background: var(--pp-card-2) !important; border-color: var(--pp-border-soft) !important; }
html[data-theme="light"] .pp-filter        { background: var(--pp-card-translucent) !important; border-color: var(--pp-border) !important; color: var(--pp-text-muted) !important; }
html[data-theme="light"] .pp-bonus-bar     { background: linear-gradient(90deg, rgba(140,198,63,0.08), rgba(59,130,246,0.05), rgba(140,198,63,0.08)) !important; border-color: var(--pp-border-soft) !important; }

/* ===========================================================
   3. FONDS DE SECTION (dégradés inline → versions claires)
   =========================================================== */
html[data-theme="light"] [style*="linear-gradient(160deg, #0a1f33"]            { background: var(--pp-grad-hero) !important; }
html[data-theme="light"] [style*="linear-gradient(to bottom, rgba(15,43,70,0.5)"] { background: var(--pp-grad-packs) !important; }
html[data-theme="light"] [style*="linear-gradient(to bottom, #0f2b46, #0a1929)"]  { background: var(--pp-grad-prepare) !important; }
html[data-theme="light"] [style*="linear-gradient(180deg, #0a1929 0%, #07111e"] { background: var(--pp-grad-articles) !important; }
html[data-theme="light"] [style*="linear-gradient(180deg, #0f2b46 0%, #15355a"] { background: var(--pp-grad-faq) !important; }
html[data-theme="light"] [style*="background:#0a1929"],
html[data-theme="light"] [style*="background-color:#0a1929"]                   { background-color: var(--pp-bg-deep) !important; }

/* ===========================================================
   4. CARTES (fonds/dégradés inline → clair)
   =========================================================== */
html[data-theme="light"] [style*="linear-gradient(135deg,rgba(30,58,87,0.7)"]   { background: var(--pp-card-product) !important; }
html[data-theme="light"] [style*="linear-gradient(135deg, #1e3a57 0%, #0f2b46"] { background: var(--pp-card-article-img) !important; }
html[data-theme="light"] [style*="linear-gradient(180deg, #1e3a57 0%, #15314a"] { background: var(--pp-card-modal) !important; }
html[data-theme="light"] [style*="background:#1e3a57"],
html[data-theme="light"] [style*="background-color:#1e3a57"]                    { background-color: var(--pp-card-img) !important; }
/* surfaces navy translucides → cartes claires */
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,31,55"],
html[data-theme="light"] [style*="background: rgba(15, 31, 55"],
html[data-theme="light"] [style*="background:rgba(15,43,70,0.7"]                { background-color: var(--pp-card) !important; }
/* surfaces blanches très translucides (cartes/chips/boutons outline) */
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; }

/* ===========================================================
   5. TEXTE inline
   =========================================================== */
/* Texte principal blanc → navy (par 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 : le texte blanc SUR un bouton/badge/avatar coloré reste BLANC */
html[data-theme="light"] [style*="linear-gradient"][style*="color:#fff"],
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 secondaire (slate/gris) → atténué foncé */
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color:#9ca3af"],
html[data-theme="light"] [style*="color:#6b7280"],
html[data-theme="light"] [style*="color:#64748b"],
html[data-theme="light"] [style*="color:#5a6878"] { color: var(--pp-text-muted) !important; }

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

/* ===========================================================
   6. BORDURES inline blanches → 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; }

/* ===========================================================
   7. 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); }

/* ===========================================================
   HEADER (nav) + FOOTER : rester SOMBRES même en mode clair.
   Seul le contenu de la page passe en clair.
   =========================================================== */
html[data-theme="light"] nav.bg-gray-900,
html[data-theme="light"] #mobile-menu,
html[data-theme="light"] footer {
    --pp-bg: #0f2b46;
    --pp-bg-deep: #0a1929;
    --pp-card: rgba(30,58,87,.6);
    --pp-card-2: rgba(30,58,87,.4);
    --pp-card-translucent: rgba(255,255,255,.05);
    --pp-text: #ffffff;
    --pp-text-muted: #94a3b8;
    --pp-text-soft: #d1d5db;
    --pp-border: rgba(255,255,255,.1);
    --pp-border-soft: rgba(255,255,255,.06);
}

/* ===========================================================
   ACCUEIL — correctifs mode clair (audit index.php)
   =========================================================== */

/* --- Popup « Me prévenir » (#notifyPopup) ------------------
   La modale vit dans un <style> local : les règles [style*=…] ne
   l'attrapaient pas → elle restait navy, mais ses <strong> inline
   en #fff étaient forcés en navy = texte invisible sur navy.
   On bascule toute la modale en clair. Le voile reste sombre. */
html[data-theme="light"] #notifyPopup .np-modal {
    background: var(--pp-card-modal) !important;
    border-color: rgba(140, 198, 63, 0.35) !important;
    box-shadow: 0 30px 60px -15px rgba(16, 42, 69, .22) !important;
}
html[data-theme="light"] #notifyPopup .np-title,
html[data-theme="light"] #notifyPopup .np-success-title { color: var(--pp-text) !important; }
html[data-theme="light"] #notifyPopup .np-sub,
html[data-theme="light"] #notifyPopup .np-success-text,
html[data-theme="light"] #notifyPopup .np-perk { color: var(--pp-text-muted) !important; }
html[data-theme="light"] #notifyPopup .np-eyebrow,
html[data-theme="light"] #notifyPopup .np-product,
html[data-theme="light"] #notifyPopup .np-icon,
html[data-theme="light"] #notifyPopup .np-perk i { color: #4e7d1f !important; }
html[data-theme="light"] #notifyPopup .np-success-icon { color: #15803d !important; }
html[data-theme="light"] #notifyPopup .np-close {
    background: var(--pp-card-translucent) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text-muted) !important;
}
html[data-theme="light"] #notifyPopup .np-close:hover { background: var(--pp-bg-deep) !important; color: var(--pp-text) !important; }
html[data-theme="light"] #notifyPopup .np-input {
    background: #ffffff !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
html[data-theme="light"] #notifyPopup .np-input::placeholder { color: var(--pp-text-muted) !important; }
html[data-theme="light"] #notifyPopup .np-error {
    background: #fdecec !important;
    border-color: rgba(220, 38, 38, .30) !important;
    color: #b91c1c !important;
}

/* --- Hero mobile : barre de confiance ----------------------
   Sous 900px l'image est masquée et le hero reste navy (îlot sombre
   assumé). Les mappings globaux y assombrissaient les couleurs
   inline → texte navy sur navy. On les ré-affirme ici seulement. */
@media (max-width: 900px) {
    html[data-theme="light"] #hero-v2 .hero-trust-bar,
    html[data-theme="light"] #hero-v2 .hero-trust-bar [style*="color:#9ca3af"] { color: #9ca3af !important; }
    html[data-theme="light"] #hero-v2 .hero-trust-bar [style*="color:#8cc63f"] { color: #8cc63f !important; }
    html[data-theme="light"] #hero-v2 .hero-trust-bar [style*="color:#fbbf24"] { color: #fbbf24 !important; }
    html[data-theme="light"] #hero-v2 .hero-trust-bar a {
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* --- Section « Prépare aussi » ----------------------------- */
html[data-theme="light"] .prep-desc { color: var(--pp-text-muted) !important; }
/* Le fondu bas de l'image allait vers du navy → bavure sombre contre
   la carte blanche. On le refait vers le blanc de la carte. */
html[data-theme="light"] .prep-visual::after {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 42%, rgba(255,255,255,0.55) 78%, rgba(255,255,255,0.95) 100%) !important;
}
html[data-theme="light"] .prep-visual { background: var(--pp-card-img) !important; }
html[data-theme="light"] .prep-card:hover { box-shadow: 0 20px 40px -16px rgba(16, 42, 69, .28) !important; }

/* --- Violet + ambre en style inline ------------------------ */
html[data-theme="light"] [style*="color:#c084fc"] { color: #7c3aed !important; }
html[data-theme="light"] [style*="color:#fbbf24"] { color: #b45309 !important; }

/* --- Panneau « Inclus dans chaque pack » ------------------- */
html[data-theme="light"] .pp-incl-head h3 span,
html[data-theme="light"] .pp-incl-item .n,
html[data-theme="light"] .pp-incl-badge { color: #4e7d1f !important; }
html[data-theme="light"] .pp-incl-badge {
    background: rgba(140, 198, 63, 0.14) !important;
    border-color: rgba(140, 198, 63, 0.38) !important;
}

/* --- Carrousel des centres -------------------------------- */
html[data-theme="light"] .pp-card-media { background: var(--pp-card-img) !important; }
html[data-theme="light"] .pp-swipe-hint { color: #4e7d1f !important; opacity: 1; }
html[data-theme="light"] .cx-chip:hover {
    background: rgba(140, 198, 63, 0.16) !important;
    border-color: rgba(140, 198, 63, 0.5) !important;
    color: #33481c !important;
}

/* --- Avis Google + FAQ ------------------------------------ */
/* Étoile vide #4b5563 : plus foncée que l'étoile pleine → lecture inversée */
html[data-theme="light"] .gr-star-off { color: rgba(16, 42, 69, .22) !important; }
html[data-theme="light"] .gr-google-badge {
    border: 1px solid var(--pp-border) !important;
    box-shadow: 0 4px 14px rgba(16, 42, 69, .12) !important;
}
html[data-theme="light"] .faq-item-btn:hover { background: var(--pp-card-translucent) !important; }

/* FAQ de l'accueil — style repris de la page contact.
   Ces cartes n'utilisent plus les classes .glass-card / .text-white (sur lesquelles
   le mode clair s'appuie ailleurs) : il leur faut donc leurs propres règles claires,
   sinon on obtient du texte blanc sur une carte pâle = illisible. */
html[data-theme="light"] .faq-item {
    background: var(--pp-card) !important;
    border-color: var(--pp-border) !important;
    box-shadow: 0 4px 18px -8px rgba(16, 42, 69, .12);
}
html[data-theme="light"] .faq-item:hover { border-color: rgba(140, 198, 63, .45) !important; }
html[data-theme="light"] .faq-item.is-open {
    background: var(--pp-card) !important;
    border-color: rgba(140, 198, 63, .5) !important;
}
html[data-theme="light"] .faq-item-btn,
html[data-theme="light"] .faq-question-text { color: var(--pp-text) !important; }
html[data-theme="light"] .faq-answer-wrap p { color: var(--pp-text-muted) !important; }
/* Sur une carte blanche, une pastille blanche disparaîtrait : léger fond + contour. */
html[data-theme="light"] .faq-icon-box {
    background: var(--pp-card-2) !important;
    border-color: var(--pp-border) !important;
    color: #4e7d1f !important;
}

/* ===========================================================
   VARIANTES « AVEC ESPACE » DES STYLES INLINE  ⚠️ CAUSE RACINE
   -----------------------------------------------------------
   [style*="…"] compare une SOUS-CHAÎNE LITTÉRALE : `color:#cbd5e1`
   et `color: #cbd5e1` sont deux chaînes différentes. Or tous les
   mappings historiques ne visaient que la forme SANS espace (seul
   #fff avait son jumeau). Résultat : ~1200 déclarations inline du
   site n'étaient JAMAIS attrapées par le mode clair — d'où les
   textes pâles qui revenaient page après page.
   Ce bloc rejoue chaque mapping avec l'espace, avec des valeurs
   cibles IDENTIQUES aux règles sans espace. Aucun nouveau choix
   de couleur ici : c'est une réparation, pas un redesign.
   Si tu ajoutes un mapping inline plus tard, ajoute TOUJOURS
   les deux formes.
   =========================================================== */
/* Texte clair → foncé */
html[data-theme="light"] [style*="color: #e5e7eb"],
html[data-theme="light"] [style*="color: #fecaca"] { color: var(--pp-text) !important; }
/* Gris moyen → muted */
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: #9fb3c8"],
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; }
/* Gris clair → soft (inclut le .ccp-sub / .ccp-traps des pages centres) */
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"],
html[data-theme="light"] [style*="color: #c9d6e4"],
html[data-theme="light"] [style*="color: #9fb0c4"] { color: var(--pp-text-soft) !important; }
/* Accents colorés → versions assombries lisibles sur clair */
html[data-theme="light"] [style*="color: #60a5fa"],
html[data-theme="light"] [style*="color: #93c5fd"] { color: #2563eb !important; }
html[data-theme="light"] [style*="color: #3b82f6"] { color: #1d4ed8 !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: #ef4444"] { color: #b91c1c !important; }
html[data-theme="light"] [style*="color: #fcd34d"],
html[data-theme="light"] [style*="color: #fde68a"],
html[data-theme="light"] [style*="color: #f59e0b"],
html[data-theme="light"] [style*="color: #fbbf24"] { color: #b45309 !important; }
html[data-theme="light"] [style*="color: #c084fc"] { color: #7c3aed !important; }
html[data-theme="light"] [style*="color: #a3d960"],
html[data-theme="light"] [style*="color: #c8e6a0"],
html[data-theme="light"] [style*="color: #b3e063"],
html[data-theme="light"] [style*="color: #8cc63f"] { color: #4e7d1f !important; }
/* EXCEPTION OBLIGATOIRE : le nav et le footer restent sombres, le vert
   doit y rester vif. header.php/footer.php contiennent 20 verts espacés :
   sans ça, le logo « Pass » s'assombrit (le bug déjà corrigé côté sans-espace). */
html[data-theme="light"] nav.bg-gray-900 [style*="color: #8cc63f"],
html[data-theme="light"] #mobile-menu [style*="color: #8cc63f"],
html[data-theme="light"] footer [style*="color: #8cc63f"] { color: #8cc63f !important; }
/* Ré-affirmation : texte clair POSÉ sur un fond coloré plein reste clair */
html[data-theme="light"] [style*="linear-gradient"][style*="color: #ffffff"],
html[data-theme="light"] [class*="bg-gradient"][style*="color: #ffffff"] { color: #fff !important; }
/* Fonds bleu-nuit inline (mêmes cibles que les règles sans espace) */
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"] { background-color: var(--pp-card) !important; }
html[data-theme="light"] [style*="background: #0a1929"],
html[data-theme="light"] [style*="background-color: #0a1929"],
html[data-theme="light"] [style*="background: #1e3a57"],
html[data-theme="light"] [style*="background-color: #1e3a57"] { background-color: var(--pp-bg-deep) !important; }