/* ============================================================================
   KOKORO — Glass Light theme v1
   Remplaçant de /assets/liquid-theme.css (thème sombre → thème CLAIR validé).

   Mécanique : chargé APRÈS le <style> inline de chaque page, il gagne la
   cascade à spécificité égale et convertit n'importe quelle page legacy en
   "Glass Light" sans toucher au HTML. Source DA :
   /rebrand-preview/glass-light/theme.css (valeurs de verre/ombres recopiées).

   Règles de matière :
   - Le vrai verre (backdrop-filter) est réservé aux couches FLOTTANTES :
     nav, dropdown, footer, bannière cookies, CTA sticky. Jamais sur les
     cartes de contenu (perf mobile) — leur backdrop-filter inline hérité
     est neutralisé ici.
   - Aucune animation coûteuse en continu (les blobs animés legacy sont
     remplacés par un fond pastel statique).
   - Contrastes AA : encre #16243D / muted #5A6B8C sur verre clair ≥ 4.5:1 ;
     boutons pleins en #2D6FE0 (et non #3A86FF) pour du blanc ≥ 4.5:1.
   ============================================================================ */

/* ---------- 0. Tokens ------------------------------------------------------ */
:root {
    /* Variables consommées par les <style> inline des pages (override) */
    --background-color: #EFF3FB;
    --blob-color-1: #B9D4FA;
    --blob-color-2: #D4C6F6;
    --primary-accent: #3A86FF;          /* inchangé : identité de marque */
    --text-color: #16243D;              /* encre */
    --text-muted: #5A6B8C;              /* 4.8:1 sur verre clair */
    --danger-color: #C23B3B;            /* corail assombri lisible (4.9:1) */
    --success-color: #0A7A52;           /* menthe assombrie lisible (4.7:1) */
    --warning-color: #B45309;
    --font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Tokens Glass Light (DA glass-light/theme.css) */
    --kk-ink: #16243D;
    --kk-ink-soft: #3D4E70;
    --kk-muted: #5A6B8C;
    --kk-blue: #3A86FF;
    --kk-blue-btn: #2D6FE0;             /* bleu bouton AA (blanc 4.7:1) */
    --kk-blue-text: #2563EB;            /* bleu texte petit corps AA (4.6:1) */
    --kk-coral: #FF6B6B;
    --kk-glass-bg: rgba(255, 255, 255, .6);
    --kk-glass-bg-strong: rgba(255, 255, 255, .72);
    --kk-glass-border: rgba(255, 255, 255, .75);
    --kk-glass-shadow: 0 20px 50px rgba(80, 100, 160, .12);
    --kk-glass-shadow-hover: 0 28px 64px rgba(80, 100, 160, .18);
    --kk-hairline: rgba(120, 140, 190, .14);
    --kk-hairline-strong: rgba(120, 140, 190, .18);
    --kk-ease-out: cubic-bezier(.22, 1, .36, 1);

    /* Tokens kokoro-design.css redirigés vers le clair (var() partout) */
    --shadow-card: 0 20px 50px rgba(80, 100, 160, .12);
    --shadow-card-soft: 0 24px 60px -24px rgba(80, 100, 160, .28), 0 6px 18px rgba(80, 100, 160, .10);
    --shadow-cta: 0 12px 28px rgba(58, 134, 255, .35);
    --shadow-cta-hover: 0 18px 36px rgba(58, 134, 255, .42);
    --shadow-cta-glow: 0 0 0 1px rgba(58, 134, 255, .35), 0 0 40px rgba(58, 134, 255, .25), 0 12px 30px rgba(58, 134, 255, .25);
    --gradient-heading: linear-gradient(180deg, #16243D 0%, #3D4E70 100%);
    --gradient-accent: linear-gradient(120deg, #2563EB 0%, #7C3AED 100%);
}

/* ---------- 1. Fond : dégradé pastel fixe + blobs adoucis (statiques) ------ */
/* Les blobs animés legacy (filter:blur 120px + transform infini) sont coûteux
   et pensés pour le sombre : on les coupe et on recompose le ciel pastel de la
   maquette sur une couche fixe statique (aucun blur, aucune animation). */
.background-blobs { display: none; }
body {
    background: #EFF3FB;
    color: var(--text-color);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(48% 40% at 14% 0%, rgba(185, 212, 250, .85), transparent 70%),
        radial-gradient(42% 36% at 92% 14%, rgba(212, 198, 246, .65), transparent 70%),
        radial-gradient(40% 34% at 68% 100%, rgba(207, 239, 226, .55), transparent 70%),
        linear-gradient(160deg, #DCE9F9 0%, #E6E1F5 42%, #F7F9FC 100%);
}
input, button, select, textarea { font-family: var(--font-family); }

::selection { background: #2D6FE0; color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--kk-blue-text);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- 2. Typo : titres encre, accents corrigés ----------------------- */
h1, h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.01em; }
h1, h2, h3, h4, h5, h6 { color: var(--kk-ink); }

/* Titres legacy en dégradé blanc (background-clip:text) → dégradé encre→bleu */
.versus-hero h1, .dust-hero h2 {
    background-image: linear-gradient(180deg, #16243D 15%, #24407A 75%, #2D6FE0 125%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.roi-result-value {
    background-image: linear-gradient(180deg, #16243D 10%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Mot-clé accentué d'un H1 (.grad-kw : stylé uniquement par le thème) */
.grad-kw, .hero h1 em, .page-hero h1 em {
    font-style: normal;
    background-image: linear-gradient(115deg, #2456B8 0%, #3A86FF 48%, #7C3AED 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Chiffres clés : dégradé encre → bleu (rend lisibles les .stat-number #fff) */
.stat-number, .blog-stat-number, .dust-stat-value, .plan-price, .error-code {
    background-image: linear-gradient(180deg, #16243D 10%, #2563EB 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Garde-fous : ce qui vit DANS un titre garde sa couleur propre */
h1 .eyebrow, h2 .eyebrow, h1 .section-label, h2 .section-label {
    color: var(--kk-blue-text);
    -webkit-text-fill-color: var(--kk-blue-text);
}
h1 i, h2 i { -webkit-text-fill-color: currentColor; }
.hero-h1-accent { color: var(--kk-blue-text); -webkit-text-fill-color: var(--kk-blue-text); }

/* Sur-titres / labels accent : bleu texte AA (le #3A86FF est trop clair en petit) */
.eyebrow, .section-label, .guide-pitch .eyebrow,
.guide-form .legal a { color: var(--kk-blue-text); }

/* Restes de blanc codé en dur (hors boutons) */
.trust-stat .stat-number, .trust-bar-home .trust-stat .stat-number { color: var(--kk-ink); }
.step-number { color: var(--kk-blue-text); }
.form-success h3 { color: var(--kk-ink); }
.guide-form-wrapper h2 { color: var(--kk-ink); }
.lead-magnet-banner h3, .blog-lead-magnet h3 { color: var(--kk-ink) !important; } /* style inline #fff sur la home */
.plan-commitment { color: var(--kk-muted); }
.guide-form .legal { color: var(--kk-muted); }
.secondary-button:hover { color: var(--kk-ink); }
.problem-card .impact { color: var(--kk-blue-text); border-left-color: var(--kk-blue-text); }
.use-case-card h4 { color: var(--kk-blue-text); }
.testi-text { color: var(--kk-ink-soft); }
/* outils/index : .header h1/p en blanc dur (#f8fafc/#cbd5e1, spécificité 0,1,1)
   + carte de score Dust posée en rgba(0,0,0,.3) — vérifié sur capture */
.tools-container .header h1 { color: var(--kk-ink); }
.tools-container .header p { color: var(--kk-muted); }
.dust-score-card {
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(5, 8, 22, .08);
}
.dust-score-card .score-bar-track { background: rgba(22, 36, 61, .12); }

/* Liens dans le corps de texte : bleu AA + les liens d'article restent soulignés */
.article-content a, .faq-answer a, .answer a, .faq .answer a,
.toc a:hover, .breadcrumb a:hover { color: var(--kk-blue-text); }
.breadcrumb a { color: var(--kk-muted); text-decoration: none; }
.breadcrumb span { color: var(--kk-muted); }

/* ---------- 3. Surfaces de verre clair (cartes de contenu, SANS blur) ------ */
/* 3a. Familles de cartes connues du site (mêmes listes que l'ancien thème) */
.glass-panel, .article-card, .case-card, .related-card,
.resource-card, .testi-card, .stat-card, .pricing-card, .cta-box,
.toc, .author-box, .sidebar-cta, .key-takeaways, .cta-inline,
.versus-card, .tool-card, .blog-lead-magnet, .lead-magnet-banner,
.team-card, .author-profile, .use-case-card, .feature-card, .info-card,
.final-cta, .tool-box, .score-box, .faq-item {
    background: var(--kk-glass-bg);
    border: 1px solid var(--kk-glass-border);
    box-shadow: var(--kk-glass-shadow);
    border-radius: 22px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* 3b. Encadrés custom du blog & des pages (rayon plus serré) */
.info-box, .gpt-card, .platform-card, .w-card, .workflow-card, .scenario-card,
.pillar-card, .usecase-card, .technique-card, .risk-card, .step-box, .step-card,
.comparison-card, .stack-card, .local-contact, .recommendation-box,
.pros-cons-card, .search-filter, .glass-section, .content-section,
.benefit-card, .roi-inputs, .guide-form-wrapper, .toc-card, .bio-card,
.faq details {
    background: var(--kk-glass-bg);
    border: 1px solid var(--kk-glass-border);
    box-shadow: var(--kk-glass-shadow);
    border-radius: 18px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* 3c. Le FAQ accordéon du blog est une liste à séparateurs, pas des cartes */
.faq-accordion .faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--kk-hairline-strong);
    border-radius: 0;
    box-shadow: none;
}
/* 3d. Puits intérieurs (sous-cartes dans un panneau verre) */
.methodology-item, .process-step, .skill-category {
    background: rgba(22, 36, 61, .05);
    border: 1px solid rgba(80, 100, 160, .14);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* 3e. Variantes teintées accent (CTA, lead magnets, key takeaways) */
.cta-box, .blog-lead-magnet, .lead-magnet-banner, .final-cta, .cta-inline, .key-takeaways {
    background: linear-gradient(135deg, rgba(58, 134, 255, .10), rgba(255, 255, 255, .74) 55%, rgba(58, 134, 255, .06));
    border: 1px solid rgba(58, 134, 255, .25);
}
.pricing-card.featured {
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(58, 134, 255, .4);
    box-shadow: 0 24px 60px rgba(80, 100, 160, .18), 0 0 50px rgba(58, 134, 255, .10);
}
/* 3f. Cartes empilées de la home : fond OPAQUE (superposition au scroll) */
.problem-card, .solution-card {
    background: linear-gradient(165deg, #FFFFFF, #F1F4FB 55%, #F8FAFE);
    border: 1px solid rgba(255, 255, 255, .9);
}
.problem-card { border-color: rgba(255, 107, 107, .35); } /* arête corail = danger */

/* Spécificités héritées */
.sidebar-cta { position: sticky; }
.article-card { overflow: hidden; }
.article-card img { border-radius: 0; }
.pricing-header { border-bottom-color: var(--kk-hairline-strong); }
.guide-author { border-top-color: var(--kk-hairline-strong); }

/* Écrin vidéo du hero */
.hero-video-wrapper {
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 30px 80px rgba(80, 100, 160, .25);
}

/* Chips écosystème (home) */
.eco-skill, .eco-tool {
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 8px 22px rgba(80, 100, 160, .08);
    color: var(--kk-ink-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.eco-skill:hover, .eco-tool:hover {
    background: rgba(58, 134, 255, .08);
    border-color: rgba(58, 134, 255, .4);
    color: var(--kk-ink);
}
.eco-tool span { color: var(--kk-muted); }
.eco-hub { background: rgba(58, 134, 255, .12); border-color: rgba(58, 134, 255, .35); animation: none; }
.eco-hub-sub { color: var(--kk-muted); }

/* 3g. Lift au survol des cartes interactives (desktop, motion OK) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .article-card, .related-card, .case-card, .tool-card, .resource-card,
    .testi-card, .pricing-card, .stat-card, .feature-card, .use-case-card,
    .gpt-card, .platform-card {
        transition: transform .45s var(--kk-ease-out), box-shadow .45s ease;
    }
    .article-card:hover, .related-card:hover, .case-card:hover, .tool-card:hover,
    .resource-card:hover, .testi-card:hover, .pricing-card:hover, .stat-card:hover,
    .feature-card:hover, .use-case-card:hover, .gpt-card:hover, .platform-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--kk-glass-shadow-hover);
        border-color: rgba(58, 134, 255, .35);
    }
}

/* ---------- 4. Bandes pleine largeur & stats ------------------------------- */
.trust-bar, .trust-bar-home {
    background: linear-gradient(90deg, rgba(58, 134, 255, .08), rgba(124, 58, 237, .05) 60%, rgba(58, 134, 255, .07));
    border-top: 1px solid rgba(58, 134, 255, .18);
    border-bottom: 1px solid rgba(58, 134, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.trust-stat + .trust-stat::before {
    background: linear-gradient(transparent, rgba(34, 54, 110, .22), transparent);
}

/* ---------- 5. Badges, pastilles, pills ------------------------------------ */
.article-category, .related-category, .article-card-category, .versus-badge,
.article-tag, .tool-badge, .step-timeline, .chip, .bio-badge {
    background: rgba(58, 134, 255, .12);
    color: var(--kk-blue-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.bio-card .bio-badge, .team-card .role, .team-card .linkedin,
.author-box-role, .author-box-link { color: var(--kk-blue-text); }
a.article-tag { transition: background .25s ease, color .25s ease; }
a.article-tag:hover { background: var(--kk-blue-btn); color: #fff; }
.category-btn {
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .9);
    color: var(--kk-ink-soft);
    box-shadow: 0 8px 22px rgba(80, 100, 160, .08);
}
.category-btn.active {
    background: var(--kk-blue-btn);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(58, 134, 255, .35);
}
.vs-circle { background: var(--kk-blue-btn); }

/* Pastille statut du hero (.hero-status : stylée uniquement par le thème) */
.hero-status {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px; border-radius: 999px; margin-bottom: 22px;
    font-size: .76rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--kk-ink-soft);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 8px 22px rgba(80, 100, 160, .08);
}
.hero-status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #0E9F6E;
    box-shadow: 0 0 0 3px rgba(110, 231, 183, .35);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-status .dot { animation: kkPulse 2.4s ease-in-out infinite; }
}
@keyframes kkPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.8); }
}

/* ---------- 6. Tableaux ----------------------------------------------------- */
.comparison-table {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--kk-hairline-strong);
    box-shadow: 0 14px 36px rgba(80, 100, 160, .10);
}
.comparison-table th {
    background: rgba(58, 134, 255, .10);
    color: var(--kk-ink);
    border-bottom: 1px solid var(--kk-hairline-strong);
}
.comparison-table td {
    color: var(--kk-ink-soft);
    border-bottom: 1px solid var(--kk-hairline);
}
.comparison-table tr:hover td { background: rgba(58, 134, 255, .05); }
.article-content table {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--kk-hairline-strong);
    border-radius: 18px;
}
.article-content th {
    background: rgba(58, 134, 255, .10);
    color: var(--kk-ink);
    border-bottom: 1px solid var(--kk-hairline-strong);
}
.article-content td { color: var(--kk-ink-soft); border-bottom: 1px solid var(--kk-hairline); }
.article-content tr:hover { background: rgba(58, 134, 255, .05); }
.article-content blockquote {
    background: rgba(58, 134, 255, .08);
    border-radius: 0 18px 18px 0;
    color: var(--kk-ink-soft);
}
.article-content strong { color: var(--kk-ink); }
.article-image { border-radius: 18px; }
/* Séparateurs legacy blancs (invisibles sur clair) → hairline */
.article-content h2 { border-top-color: var(--kk-hairline-strong); }
.faq-section, .related-section { border-top-color: var(--kk-hairline-strong); }
.winner, .comparison-table td.winner, .comparison-table .winner { color: var(--success-color); }
/* FIX GLOBAL tableaux mobiles : les pages posent width:100% sans gestion du
   débordement — un tableau plus large que l'écran rendait toute la page
   scrollable horizontalement (constaté sur les tableaux d'articles à 390px).
   On rend le tableau lui-même défilable, le reste de la page ne bouge plus. */
@media (max-width: 760px) {
    html .article-content table,
    html table.comparison-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 7. Encadrés teintés (identités vert/rouge/orange conservées) ---- */
.pros, .cons, .warning-box, .success-box, .savings-box, .time-saved,
.verdict-box, .final-verdict, .highlight-box, .error-card, .stat-box,
.framework-box, .workflow-example {
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px rgba(80, 100, 160, .08);
}
.verdict-box, .final-verdict {
    background: linear-gradient(135deg, rgba(14, 159, 110, .10) 0%, rgba(255, 255, 255, .7) 60%, rgba(58, 134, 255, .06) 100%);
    border-color: rgba(14, 159, 110, .35);
}
.verdict-box h2, .final-verdict h2 { color: var(--success-color); }
.verdict-box p, .final-verdict p { color: var(--kk-ink-soft); }

/* ---------- 8. Blocs code / prompt : restent sombres sur thème clair -------- */
.prompt-box, .code-block, .prompt-example, .stack-box, .roi-calculator,
.architecture-box {
    background: #101A36;
    color: #E8EAF2;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px rgba(34, 54, 110, .18);
    /* leurs textes internes consomment les variables : on les force claires */
    --text-color: #F0F0F8;
    --text-muted: #B0B0C8;
    --primary-accent: #7AA8FF;
}

/* ---------- 9. Boutons : pills bleues AA + verre ----------------------------- */
.cta-button, .cta-button-faq, .jobs-cta-button, .pricing-cta {
    background: var(--kk-blue-btn);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(58, 134, 255, .35);
    border: 1px solid transparent;
}
.cta-button:hover, .cta-button-faq:hover, .jobs-cta-button:hover, .pricing-cta:hover {
    background: #2563D8;
    box-shadow: 0 18px 36px rgba(58, 134, 255, .42);
}
.secondary-button, .cta-button.secondary-button {
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .85);
    color: var(--kk-ink);
    box-shadow: 0 10px 26px rgba(80, 100, 160, .10);
}
.secondary-button:hover, .cta-button.secondary-button:hover {
    background: rgba(255, 255, 255, .9);
    color: var(--kk-ink);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 16px 32px rgba(80, 100, 160, .16);
}

/* ---------- 10. Formulaires -------------------------------------------------- */
.search-input, .guide-form input, .guide-form-wrapper input,
.guide-form textarea, .guide-form select {
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(120, 140, 190, .35);
    border-radius: 12px;
    color: var(--kk-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}
.search-input:focus, .guide-form input:focus, .guide-form-wrapper input:focus {
    border-color: rgba(45, 111, 224, .7);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 3px rgba(58, 134, 255, .22);
    outline: none;
}
.search-input::placeholder, .guide-form input::placeholder { color: rgba(90, 107, 140, .65); }
.form-success {
    background: rgba(14, 159, 110, .08);
    border-color: rgba(14, 159, 110, .3);
}
.form-success p { color: var(--kk-ink-soft); }

/* ---------- 11. FAQ ---------------------------------------------------------- */
.faq summary { color: var(--kk-ink); }
.faq summary::after { color: var(--kk-blue-text); }
.faq .answer { color: var(--kk-muted); }
.faq details[open] {
    background: linear-gradient(165deg, rgba(58, 134, 255, .07), rgba(255, 255, 255, .8) 60%);
    border-color: rgba(58, 134, 255, .35);
}
.faq-question { color: var(--kk-ink); }
.faq-question:hover { color: var(--kk-blue-text); }
.faq-question::after { color: var(--kk-blue-text); }
.faq-answer p { color: var(--kk-muted); }
.faq-item h3 { color: var(--kk-ink); }
.faq-item p { color: var(--kk-muted); }

/* ---------- 12. Logos & images : blancs forcés → encre ----------------------- */
.main-nav img.logo, .page-footer img.logo { filter: invert(1) hue-rotate(180deg); }
.logo-scroller-inner img { filter: grayscale(1) brightness(0); opacity: .5; }
.logo-scroller-inner:hover img { filter: grayscale(0) brightness(1); opacity: 1; }
.testi-logo { filter: brightness(0); opacity: .55; }
.eco-tool img { filter: invert(1); opacity: .75; }
.eco-tool:hover img { filter: invert(1); opacity: 1; }
.case-logo img { filter: grayscale(1) brightness(0); opacity: .55; }

/* ============================================================================
   13. NAVIGATION — pill de verre flottante (spec commune nav/footer)
   Classes legacy conservées : .main-nav, .nav-links, .nav-cta,
   .hamburger-menu, .mobile-nav-panel (+ .dropdown legacy).
   Le !important sur le fond bat le style inline posé par le JS legacy
   (qui écrit un backgroundColor sombre au toggle du menu mobile).
   ============================================================================ */
html .main-nav {
    background: rgba(255, 255, 255, .6) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 100px;
    box-shadow: 0 14px 40px rgba(80, 100, 160, .14);
    /* Au-dessus du panneau mobile (z 1001) : les pages legacy posent la nav à
       z 1000, donc le panneau plein écran couvrait la pill ET le bouton de
       fermeture (le z 1002 du .hamburger-menu est piégé dans le stacking
       context de la nav). 1002 garde la croix cliquable, sous la bannière
       cookies (1100). */
    z-index: 1002 !important;
}
/* Logo texte "Kokoro." (nouveau markup) — hooks multiples + legacy <a><img></a> */
html .main-nav > a:first-child,
html .main-nav a.logo, html .main-nav .nav-logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--kk-ink);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}
html .main-nav a.logo span, html .main-nav .nav-logo span { color: var(--kk-blue); }
/* Liens en pastilles */
html .main-nav .nav-links { gap: 4px; }
html .main-nav .nav-links a {
    color: var(--kk-ink-soft);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease;
}
html .main-nav .nav-links a:hover,
html .main-nav .nav-links a.active,
html .main-nav .nav-links a[aria-current="page"] {
    background: rgba(255, 255, 255, .85);
    color: var(--kk-ink);
}
@media (max-width: 1180px) {
    html .main-nav .nav-links a { padding: 7px 9px; }
}
/* Dropdown services (legacy) */
html .dropdown-toggle { color: var(--kk-ink-soft); }
html .dropdown-toggle:hover { color: var(--kk-ink); }
html .dropdown-menu {
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(80, 100, 160, .18);
}
html .dropdown-menu a { color: var(--kk-ink-soft); }
html .dropdown-menu a:hover { background: rgba(58, 134, 255, .10); color: var(--kk-ink); }

/* ============================================================================
   14. FIX GLOBAL NAV MOBILE
   Bug connu : le template blog + articles + pages outils posent
   .hamburger-menu/.mobile-nav-panel en display:none sans @media de
   réaffichage (ou sans aucun CSS panneau). On définit ici le système
   complet, avec une spécificité (html .x) + !important qui bat les
   display:none des <style> de page.
   Breakpoint : 960px (superset des 900/960 des pages) pour éviter la zone
   morte 901-960px des pages qui replient .nav-links à 960px.
   ============================================================================ */
html .hamburger-menu {
    display: none;
    font-size: 1.5rem;
    color: var(--kk-ink);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 6px 10px;
}
html .mobile-nav-panel {
    display: flex !important;            /* bat les display:none de page */
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 90px 24px 40px;
    overflow-y: auto;
    z-index: 1001;
    background-color: #EDF2FB;
    background-image:
        radial-gradient(60% 40% at 20% 0%, rgba(58, 134, 255, .10), transparent 70%),
        radial-gradient(50% 40% at 90% 100%, rgba(124, 58, 237, .08), transparent 70%);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .4s cubic-bezier(.77, 0, .175, 1), visibility 0s linear .4s;
}
html .mobile-nav-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .4s cubic-bezier(.77, 0, .175, 1), visibility 0s;
}
html .mobile-nav-panel a {
    color: var(--kk-ink);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 600;
}
html .mobile-nav-panel a.cta-button { color: #fff; margin-top: 12px; }
@media (max-width: 960px) {
    html .main-nav .nav-links,
    html .main-nav .nav-cta { display: none !important; }
    html .hamburger-menu { display: block !important; }
}
@media (max-width: 560px) {
    html .main-nav { top: 14px; padding-left: 20px; padding-right: 12px; }
}

/* ============================================================================
   15. FOOTER — verre clair (spec commune)
   .page-footer conservée + nouvelle grille interne .footer-grid (4 colonnes).
   Les styles couvrent AUSSI le footer legacy (.footer-column) pour les pages
   non migrées.
   ============================================================================ */
html .page-footer {
    position: relative;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    margin-top: 64px;
}
html .page-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 4%, rgba(58, 134, 255, .35) 50%, transparent 96%);
}
/* Logo texte "Kokoro." du footer (nouveau) + pitch */
html .page-footer .footer-logo, html .page-footer a.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--kk-ink);
    text-decoration: none;
}
html .page-footer .footer-logo span,
html .page-footer .footer-logo .footer-logo-dot { color: var(--kk-blue); }
html .page-footer .footer-grid .footer-social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kk-ink-soft);
}
html .page-footer .footer-grid .footer-social:hover { color: var(--kk-blue-text); }
html .page-footer .footer-pitch {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--kk-muted);
    margin-top: 12px;
    max-width: 280px;
}
/* Nouvelle grille 4 colonnes */
.page-footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px 36px;
}
.page-footer .footer-grid h4, .page-footer .footer-grid .footer-col-title,
html .page-footer .footer-grid .footer-column-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kk-muted);
    margin: 0 0 8px;
}
.page-footer .footer-grid ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-footer .footer-grid a {
    font-size: 14px;
    font-weight: 500;
    color: var(--kk-ink-soft);
    text-decoration: none;
    transition: color .25s ease;
}
.page-footer .footer-grid a:hover { color: var(--kk-blue-text); }
.page-footer .footer-grid p { color: var(--kk-muted); font-size: 13.5px; line-height: 1.65; }
/* Ligne basse (© + légal) */
.page-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 32px 28px;
    border-top: 1px solid var(--kk-hairline-strong);
    font-size: 12.5px;
    color: var(--kk-muted);
}
.page-footer .footer-bottom a { color: var(--kk-muted); text-decoration: none; transition: color .25s ease; }
.page-footer .footer-bottom a:hover { color: var(--kk-ink); }
.page-footer .footer-legal { display: flex; gap: 18px; }
/* Footer legacy (.footer-column injecté par components.js) : couleurs encre */
html .page-footer .footer-links a,
html .page-footer .footer-column a {
    color: var(--kk-ink-soft);
    transition: color .25s ease, transform .25s ease;
}
html .page-footer .footer-links a:hover,
html .page-footer .footer-column a:hover { color: var(--kk-blue-text); transform: translateX(2px); }
html .page-footer .footer-column-title { color: var(--kk-ink); }
/* Logo footer : déclaré APRÈS (et plus spécifique que) les règles de liens */
html .page-footer .footer-grid a.footer-logo,
html .page-footer .footer-column a.footer-logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--kk-ink);
    transform: none;
}
html .page-footer .footer-grid a.footer-logo:hover,
html .page-footer .footer-column a.footer-logo:hover { color: var(--kk-ink); transform: none; }
@media (max-width: 900px) {
    .page-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 24px 28px; }
    .page-footer .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .page-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .page-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- 16. Autres couches flottantes (vrai verre) ----------------------- */
/* Bannière cookies (CSS injecté au runtime par components.js → on gagne par
   spécificité html .x, pas par ordre) */
html .kokoro-consent-banner {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 24px 60px rgba(80, 100, 160, .25);
}
html .kokoro-consent-banner h3 { color: var(--kk-ink); }
html .kokoro-consent-banner p { color: var(--kk-muted); }
html .kokoro-consent-banner p a { color: var(--kk-blue-text); }
html .kokoro-consent-accept { background: var(--kk-blue-btn); border: 1px solid transparent; }
html .kokoro-consent-accept:hover { background: #2563D8; }
html .kokoro-consent-refuse { color: var(--kk-ink); border: 1px solid rgba(22, 36, 61, .3); background: transparent; }
html .kokoro-consent-refuse:hover { border-color: rgba(22, 36, 61, .6); }
/* CTA sticky mobile */
html .kokoro-sticky-cta {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-top: 1px solid rgba(120, 140, 190, .25);
}
html .kokoro-sticky-cta .sticky-cta-text { color: var(--kk-ink); }
html .kokoro-sticky-cta .sticky-cta-button { background: var(--kk-blue-btn); color: #fff; }
/* Le toggle sombre/clair n'a plus de sens : thème clair unique */
html .kokoro-theme-toggle { display: none !important; }

/* ---------- 17. Perf : couper les animations continues coûteuses ------------- */
.blob { animation: none; }                 /* .background-blobs est déjà masqué */
.eco-hub { animation: none; }              /* pulse box-shadow = repaint continu */
.eco-hub::after { animation: none; }

/* ---------- 18. Accessibilité ------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
    html .main-nav, html .dropdown-menu, html .page-footer,
    html .kokoro-consent-banner, html .kokoro-sticky-cta {
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, .98) !important;
    }
}
@media (prefers-contrast: more) {
    .glass-panel, .article-card, .faq-item, .case-card, .related-card,
    .resource-card, .testi-card, .stat-card, .pricing-card, .cta-box,
    .toc, .author-box, .sidebar-cta, .key-takeaways, .cta-inline {
        background: #FFFFFF;
        border: 1px solid rgba(22, 36, 61, .5);
    }
    body { color: #0B1B33; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .logo-scroller-inner { animation: none; }
    .hero-status .dot { animation: none; }
    .badge .dot, .dot-mint, .dot-blue, .dot-coral { animation: none; }
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
        transition-delay: 0s !important;
    }
    html .mobile-nav-panel { transition: none; }
}

/* ---------- 19. Compat mobile : cartes plus serrées -------------------------- */
@media (max-width: 640px) {
    .glass-panel, .article-card, .faq-item, .case-card, .related-card,
    .resource-card, .testi-card, .stat-card, .pricing-card, .cta-box,
    .toc, .author-box, .key-takeaways, .cta-inline {
        border-radius: 18px;
    }
}

/* ============================================================================
   16. CORRECTIFS POST-MIGRATION (balayage vague 3)
   .cta-section : panneau CTA final de faq.html, jobs.html et des 13 pages
   outils/*.html — fond sombre inline rgba(16,24,52,.7) + blur non couvert
   par les sections précédentes (texte encre illisible dessus en clair).
   Verre clair sans blur (règle perf : pas de backdrop-filter sur les cartes).
   ============================================================================ */
html .cta-section {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 50px rgba(80, 100, 160, 0.12);
}

/* Footer : colonnes alignées en HAUT de la grille. Les pages legacy posent
   .page-footer .container{align-items:center} (CSS inline historique) qui,
   combiné à display:grid, centre verticalement chaque colonne → en-têtes
   en escalier (vu sur guide-5-processus-ia, mentions-legales…). */
html .page-footer .footer-grid { align-items: start; }