/* Pages « landing » de data-workers.com (Query Book, Formation Data Analyst, Catalogue de bases de données, Template CV) :
   la charte du site en sombre (html[data-theme="dark"], page de base) et en clair (html[data-theme="light"], dossier
   clair/ généré par outils/html/pages_claires.py). Chargé après les styles de chaque page : les variables du thème
   remplacent celles de la page (fond blanc d'origine), puis quelques règles pour ce qui n'utilise pas de variable. */

/* ─── Sombre : nuit, turquoise, Inter (comme l'accueil et les pages projet) ─── */
html[data-theme="dark"] {
    --brand: #2dc4c2; --brand-hover: #26a6a5; --brand-soft: rgba(45, 196, 194, .12);
    --white: #0f172a;            /* cartes */
    --light: #0b1220;            /* sections alternées */
    --dark: #f8fafc;             /* titres */
    --text: #cbd5e1; --muted: #94a3b8;
    --border: rgba(255, 255, 255, .10);
    --shadow: none;
}
html[data-theme="dark"] body { background: #070b15; }
html[data-theme="dark"] header { background: rgba(7, 11, 21, .85); }
html[data-theme="dark"] #hero { background: radial-gradient(circle at 50% 0%, rgba(45, 196, 194, .14) 0%, #070b15 55%); }
html[data-theme="dark"] .btn-brand, html[data-theme="dark"] .btn-brand:hover { color: #070b15 !important; }
html[data-theme="dark"] .btn-outline-dark:hover { color: #070b15; }
html[data-theme="dark"] .stripe-banner { background: #0f172a; border: 1px solid var(--border); }
html[data-theme="dark"] footer { background: #0b1220 !important; border-top: 1px solid var(--border); }
html[data-theme="dark"] .res-card, html[data-theme="dark"] .chapter-card { box-shadow: none; }

/* ─── Clair : papier, encre, Arvo, angles droits, ombre « tampon » (comme clair/ et les pages projet claires) ─── */
html[data-theme="light"] {
    --brand: #fe4d1a; --brand-hover: #b0353b; --brand-soft: rgba(254, 77, 26, .10);
    --white: #f6f3ec;            /* cartes */
    --light: #ebe7de;            /* sections alternées */
    --dark: #1d1b19;             /* titres et encre */
    --text: #3b3833; --muted: #6f6a62;
    --border: #1d1b19;
    --shadow: 4px 4px 0 rgba(0, 0, 0, .12);
    --radius-lg: 2px; --radius-md: 2px;
}
html[data-theme="light"] body { background: #ebe7de; }
html[data-theme="light"] body, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] h4, html[data-theme="light"] .btn { font-family: 'Arvo', Rockwell, Georgia, serif; }
html[data-theme="light"] header { background: rgba(235, 231, 222, .92); border-bottom: 1.5px solid #1d1b19; }
html[data-theme="light"] #hero { background: #ebe7de; }
html[data-theme="light"] .chapter-card, html[data-theme="light"] .res-card {
    border: 1.5px solid #1d1b19; border-radius: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); }
html[data-theme="light"] .btn { border-radius: 2px; border: 1.5px solid #1d1b19; box-shadow: 3px 3px 0 rgba(0, 0, 0, .12); }
html[data-theme="light"] .btn-brand, html[data-theme="light"] .btn-brand:hover { color: #fff !important; }
html[data-theme="light"] .btn-outline-dark:hover { color: #ebe7de; }
html[data-theme="light"] .hero-badge, html[data-theme="light"] .hero-feat-tag { border: 1.5px solid #1d1b19; border-radius: 2px; }
html[data-theme="light"] .stripe-banner { background: #1d1b19; border-radius: 2px; }
html[data-theme="light"] .stripe-banner p { color: #cfc9bd; }
html[data-theme="light"] footer { background: #1d1b19 !important; color: #ebe7de !important; }
html[data-theme="light"] .book-cover { background: #fe4d1a; border-radius: 2px; }
html[data-theme="light"] .book-spine { background: #b0353b; }

/* ─── Boutons « Version claire / sombre » et « EN / FR » en haut à droite, comme sur les autres pages ─── */
.theme-switch, .lang-switch {
    font: 600 13px/1 'Inter', sans-serif; padding: 8px 12px; border-radius: 999px; text-decoration: none;
    color: var(--text); border: 1px solid var(--border); white-space: nowrap;
}
.theme-switch:hover, .lang-switch:hover { color: var(--brand); border-color: var(--brand); }
.lang-switch { letter-spacing: .04em; }
html[data-theme="light"] .theme-switch, html[data-theme="light"] .lang-switch { font-family: 'Arvo', Georgia, serif; border-radius: 2px; border: 1.5px solid #1d1b19; color: #1d1b19; background: #f6f3ec; }

/* Encadré « Objectif : zéro échec technique » (fond foncé en dur dans la page) et titre en dégradé */
html[data-theme="dark"] .objective-card { background: #0f172a !important; }
html[data-theme="light"] .objective-card { background: #1d1b19 !important; border: 1.5px solid #1d1b19 !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); }
html[data-theme="light"] .objective-card p { color: #cfc9bd !important; }
html[data-theme="light"] .hero-title .highlight { background: none; -webkit-text-fill-color: #fe4d1a; color: #fe4d1a; }

/* ─── Formation Data Analyst : fonds et textes écrits en dur dans sa feuille de style ─── */
html[data-theme="dark"] #programme, html[data-theme="dark"] #temoignages, html[data-theme="dark"] #faq,
html[data-theme="dark"] #offres { background: #070b15; }
html[data-theme="light"] #programme, html[data-theme="light"] #temoignages, html[data-theme="light"] #faq,
html[data-theme="light"] #offres { background: #ebe7de; }
html[data-theme="dark"] .webinar-banner, html[data-theme="dark"] .final-cta { background: #0f172a; border: 1px solid var(--border); }
html[data-theme="light"] .webinar-banner { background: #1d1b19; border-radius: 2px; }
.tl-items li, .livrable-text, .temo-quote, .about-p, .anti-note { color: var(--text); }
.school-chip, .anti-note, .anti-icon { background: var(--white); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .dash-badge { background: rgba(45, 196, 194, .12); }
html[data-theme="dark"] .hero-avatars img, html[data-theme="dark"] .about-av-wrap img { border-color: #070b15; }
html[data-theme="dark"] .btn-white { background: var(--brand); color: #070b15; }
html[data-theme="light"] .btn-white { background: #fe4d1a; color: #fff; }
/* logos des écoles et entreprises (images sur fond blanc ou transparent) : en monochrome sur une pastille claire en sombre */
html[data-theme="dark"] .company-logo { filter: grayscale(1); background: #e2e8f0; padding: 8px 14px; border-radius: 10px; box-sizing: content-box; }
html[data-theme="light"] .company-logo { filter: grayscale(1); background: #fff; padding: 8px 14px; border: 1.5px solid #1d1b19; border-radius: 2px; box-sizing: content-box; }
html[data-theme="light"] .pq-card, html[data-theme="light"] .sk-card, html[data-theme="light"] .tl-card,
html[data-theme="light"] .temo-card, html[data-theme="light"] .faq-item, html[data-theme="light"] .offer-card,
html[data-theme="light"] .pain-card, html[data-theme="light"] .pos-pillar, html[data-theme="light"] .anti-card,
html[data-theme="light"] .tf-card, html[data-theme="light"] .about-stats-box, html[data-theme="light"] .hero-dashboard {
    border: 1.5px solid #1d1b19; border-radius: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); }
html[data-theme="light"] .about-av-wrap { background: #fe4d1a; }

/* ─── Catalogue de bases de données et Template CV (formulaire Brevo) ─── */
html[data-theme="dark"] .form-wrapper { box-shadow: none; }
html[data-theme="light"] .form-wrapper { border: 1.5px solid #1d1b19; border-radius: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); }
.entry__field input.input { background: var(--light) !important; color: var(--dark) !important; }
html[data-theme="dark"] .sib-form-block__button { color: #070b15 !important; }
html[data-theme="light"] .sib-form-block__button { color: #fff !important; border: 1.5px solid #1d1b19 !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .12); }
html[data-theme="light"] .entry__label, html[data-theme="light"] .entry__field input.input,
html[data-theme="light"] .sib-form-block__button, html[data-theme="light"] .sib-form-header h2 { font-family: 'Arvo', Rockwell, Georgia, serif !important; }
html[data-theme="dark"] .form-instructions { background: rgba(45, 196, 194, .08) !important; border-color: var(--border) !important; }
html[data-theme="light"] .form-instructions { background: #ebe7de !important; border: 1.5px solid #1d1b19 !important; border-radius: 2px !important; }
.form-instructions p { color: var(--dark) !important; }
.form-instructions ol { color: var(--text) !important; }
/* en-tête réduit au logo (Catalogue, Template CV) : le bouton de thème à droite */
.navbar:has(> .theme-switch), .navbar:has(> .nav-switches) { justify-content: space-between; }
/* boutons de thème et de langue groupés à droite (en-tête réduit au logo) */
.nav-switches { display: flex; align-items: center; gap: 8px; }
/* pied foncé de la version claire : textes en papier */
html[data-theme="light"] footer .logo-name, html[data-theme="light"] footer p, html[data-theme="light"] footer a,
html[data-theme="light"] .foot-links a, html[data-theme="light"] .foot-copy { color: #ebe7de !important; }
/* cadre blanc du champ ajouté par les styles Brevo (sib-styles.css) : retiré, le champ prend toute la largeur */
.entry__field { display: block !important; width: 100% !important; background: none !important; border: 0 !important;
    box-shadow: none !important; }
.entry__field input.input { width: 100% !important; box-sizing: border-box; }
html[data-theme="light"] .form-instructions, html[data-theme="light"] .form-instructions * { font-family: 'Arvo', Rockwell, Georgia, serif !important; }
html[data-theme="light"] #sib-container input::placeholder { color: #9a948a; font-family: 'Arvo', Rockwell, Georgia, serif; }

/* Le bouton « Version claire / sombre » reste visible sur mobile (la feuille des pages masque les liens de la barre ≤ 768 px) */
@media (max-width: 768px) { .nav-links a.theme-switch, .nav-links a.lang-switch { display: inline-flex; } }
/* Cadre de la démo du Query Book : fond de carte, pas la couleur des titres */
html[data-theme="dark"] .demo-frame { background: #0f172a; }
html[data-theme="light"] .demo-frame { background: #1d1b19; border-radius: 2px; }

/* ─── Mobile (≤ 600 px) : même en-tête que les autres pages du site ───
   Bouton de thème = pastille ronde avec un soleil (sombre) ou une lune (clair), fixée en haut à droite ;
   bouton de langue = pastille ronde juste en dessous ; logo jamais écrasé ; bouton d'achat sur une ligne. */
@media (max-width: 600px) {
    .navbar { padding-right: 52px; gap: 10px; }
    .navbar .logo { flex-shrink: 0; white-space: nowrap; }
    .navbar .logo img { flex-shrink: 0; width: 32px; height: 32px; object-fit: contain; }
    .nav-links { gap: 10px; }
    .nav-links .btn { white-space: nowrap; padding: 9px 14px; font-size: 14px; }
    a.theme-switch, a.lang-switch {
        position: fixed !important; right: 10px !important; z-index: 1000; margin: 0 !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 38px; height: 38px; min-width: 0; padding: 0 !important; border-radius: 999px;
        background: rgba(7, 11, 21, .8); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .24);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    a.theme-switch { top: 10px !important; font-size: 0 !important; line-height: 0 !important; }
    a.lang-switch { top: 56px !important; font-size: 12px !important; }
    a.theme-switch::before {
        content: ''; width: 19px; height: 19px; background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    html[data-theme="light"] a.theme-switch, html[data-theme="light"] a.lang-switch {
        border-radius: 2px; background: #ebe7de; color: #1d1b19; border: 1.5px solid #1d1b19; backdrop-filter: none;
        font-family: 'Arvo', Rockwell, Georgia, serif;
    }
    html[data-theme="light"] a.theme-switch::before {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}