/* ==========================================================================
   Kokoro Design System
   --------------------------------------------------------------------------
   Vague 1 : Fondations accessibilité
     - Support prefers-reduced-motion (WCAG 2.3.3)
     - Focus visible universel au clavier (WCAG 2.4.7)
     - Hooks ARIA pour la FAQ blog (progressive enhancement)

   Vague 2 : Design tokens (espacement, typo, radius, motion)
     - Variables CSS utilisables par les pages en pilote
     - Ajoutées AU :root, ne remplacent aucune variable existante
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Design tokens — échelle systématisée partagée par toutes les pages
   -------------------------------------------------------------------------- */
:root {
    /* Spacing scale (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px) */
    --s-1: .25rem;   /*  4px */
    --s-2: .5rem;    /*  8px */
    --s-3: 1rem;     /* 16px */
    --s-4: 1.5rem;   /* 24px */
    --s-5: 2rem;     /* 32px */
    --s-6: 3rem;     /* 48px */
    --s-7: 4rem;     /* 64px */
    --s-8: 6rem;     /* 96px */

    /* Typography scale (fluide entre mobile et desktop) */
    --fs-hero: clamp(2.25rem, 2.5vw + 1.75rem, 3.5rem);
    --fs-h1:   clamp(2rem,    2vw + 1.25rem,   2.75rem);
    --fs-h2:   clamp(1.75rem, 1.5vw + 1rem,    2.5rem);
    --fs-h3:   clamp(1.125rem, .5vw + 1rem,    1.375rem);
    --fs-lg:   1.125rem;
    --fs-md:   1rem;
    --fs-sm:   .875rem;
    --fs-xs:   .75rem;

    /* Line-heights */
    --lh-tight:   1.15;
    --lh-heading: 1.2;
    --lh-body:    1.7;

    /* Radius */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-pill: 9999px;

    /* Shadows */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, .3);
    --shadow-cta:  0 4px 20px rgba(58, 134, 255, .4);
    --shadow-cta-hover: 0 8px 30px rgba(58, 134, 255, .5);

    /* Motion */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-slow: 400ms;

    /* Container */
    --container-max: 1100px;
    --nav-height:    80px;
}


/* --------------------------------------------------------------------------
   0bis. Polish universel — s'applique à toutes les pages qui chargent ce CSS
   (car kokoro-design.css est loaded après les <style> inline, il override
   avec la même spécificité). Retirer/ajuster ici si une page demande un
   comportement différent.
   -------------------------------------------------------------------------- */

/* Lisibilité des paragraphes : uniformise font-weight 400 (certaines pages
   avaient 300, trop fin sur fond sombre). */
body { font-weight: 400; }
p    { font-weight: 400; }

/* Antialiasing typo pour une restitution propre sur OLED/Retina */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Images responsives par défaut (évite les débordements horizontaux) */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   0ter. Polish typo fluide — s'applique aux pages non encore migrées
   individuellement (pages outils/, articles blog existants, autres pages
   mineures). L'override fonctionne via l'ordre de chargement (ce CSS est
   loaded après les <style> inline, même spécificité donc il gagne).
   Les pages avec des sélecteurs plus spécifiques (ex: .methodology-text h3,
   .benefit-card h3) conservent leur typo custom — comportement attendu.
   -------------------------------------------------------------------------- */

/* Uniformise h1/h2/h3 base au token fluide */
h1, h2, h3 { line-height: var(--lh-heading); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Articles blog — sélecteurs génériques partagés par les 34 articles
   existants ET le template. Specificité (0,0,1,1) pour override les
   valeurs inline fixes (1.8rem / 1.4rem / 2.5rem). */
.article-header h1 {
    font-size: var(--fs-hero);
    line-height: var(--lh-heading);
}
.article-content h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
}
.article-content h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading); /* était hérité 1.7 du body → H3 étalés */
}
.article-content h4 {
    line-height: var(--lh-heading);
}

/* Sidebar CTA blog : top plus stable (nav-height + air) au lieu de 100px fixe
   qui créait un gap de 40px inutile quand la nav se repliait au scroll. */
.sidebar-cta {
    top: calc(var(--nav-height, 80px) + 1.25rem);
}

/* Breakpoint sidebar : masquage sous 1280px (cohérence cross-articles) */
@media (max-width: 1280px) {
    .sidebar-cta-wrapper { display: none; }
}


/* --------------------------------------------------------------------------
   1. Prefers-reduced-motion
   Neutralise toutes les animations d&eacute;coratives pour les utilisateurs
   sensibles aux mouvements (troubles vestibulaires, migraines...).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Blobs anim&eacute;s en boucle : les stopper et r&eacute;duire l'opacit&eacute; */
    .blob,
    .blob1,
    .blob2 {
        animation: none !important;
        opacity: 0.25 !important;
    }

    /* Logo-scroller en d&eacute;filement infini */
    .logo-scroller-inner {
        animation: none !important;
        transform: none !important;
    }

    /* Hub &eacute;cosyst&egrave;me avec pulse perp&eacute;tuel */
    .eco-hub {
        animation: none !important;
        box-shadow: 0 0 40px rgba(58, 134, 255, 0.12) !important;
    }

    /* Stacking cards (probl&egrave;mes / solutions) : fige en layout statique */
    #probleme-container,
    #solution-container {
        height: auto !important;
    }
    #probleme-container .problem-card,
    #solution-container > a {
        position: static !important;
        transform: none !important;
        margin-bottom: 24px !important;
    }

    /* Hover effects qui d&eacute;placent/zooment */
    .cta-button:hover,
    .related-card:hover,
    .article-card:hover {
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   2. Focus visible universel (clavier uniquement)
   Rend la navigation clavier visible sans p&eacute;naliser la souris.
   Utilise :focus-visible (support 95%+ navigateurs, fallback :focus via @supports).
   -------------------------------------------------------------------------- */

/* Retirer l'anneau de focus par d&eacute;faut quand ce n'est pas la navigation clavier */
:focus:not(:focus-visible) {
    outline: none;
}

/* Anneau de focus par d&eacute;faut pour tous les &eacute;l&eacute;ments interactifs */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #3A86FF;
    outline-offset: 3px;
    border-radius: 4px;
}

/* CTA boutons : focus plus marqu&eacute; pour contraster avec leur gradient */
.cta-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(58, 134, 255, 0.45);
}

.secondary-button:focus-visible {
    outline-color: #3A86FF;
    box-shadow: 0 0 0 4px rgba(58, 134, 255, 0.25);
}

/* Liens de navigation : focus qui respecte le pill-shape */
.main-nav .nav-links a:focus-visible,
.mobile-nav-panel a:focus-visible,
.dropdown-menu a:focus-visible,
.page-footer a:focus-visible,
.footer-column a:focus-visible {
    outline: 2px solid #3A86FF;
    outline-offset: 4px;
    border-radius: 4px;
}

/* FAQ native <details> : focus sur le summary */
.faq summary:focus-visible,
details summary:focus-visible {
    outline: 2px solid #3A86FF;
    outline-offset: 2px;
    border-radius: 6px;
}

/* FAQ blog custom (div cliquable) : focus visible sur le bouton avec aria */
.faq-question:focus-visible {
    outline: 2px solid #3A86FF;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Cartes cliquables */
.related-card:focus-visible,
.article-card:focus-visible,
#solution-container > a:focus-visible {
    outline: 2px solid #3A86FF;
    outline-offset: 4px;
    border-radius: 16px;
}

/* Skip-link (si ajout&eacute; ult&eacute;rieurement) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #3A86FF;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
    left: 0;
}


/* --------------------------------------------------------------------------
   3. FAQ blog : hooks ARIA (progressive enhancement)
   La FAQ du blog utilise un markup custom (div.faq-item > h3.faq-question).
   Le JS dans components.js ajoute aria-expanded sur .faq-question.
   Ici on style le toggle +/- bas&eacute; sur l'&eacute;tat ARIA plut&ocirc;t que .active,
   ce qui garantit que lecteurs d'&eacute;cran et affichage visuel restent synchro.
   -------------------------------------------------------------------------- */
.faq-question[aria-expanded="true"]::after {
    content: '\2212' !important; /* signe moins */
}
.faq-question[aria-expanded="false"]::after {
    content: '+' !important;
}