/*
Theme Name:        Kiddiflow
Theme URI:         https://kiddiflow.app
Description:       Child theme custom de Kadence pour le site marketing Kiddiflow (kiddiflow.app). Design doux et accessible (WCAG AA), palette caramel/beige + accents, pensé pour les familles et les enfants. Synchro stricte avec le design system app Flutter (lib/app/theme/).
Author:            Nicolas Coissard — Enolane
Author URI:        https://kiddiflow.app
Template:          kadence
Version:           0.2.4
License:           GPL v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kiddiflow
Tags:              child-theme, kadence, family, kids, accessibility
*/

/* =========================================================================
   Kiddiflow Web — Design Tokens
   Source de vérité : kiddiflow-v2/lib/app/theme/{colors,spacing,typography}.dart
   Toute modif visuelle doit être miroir du Flutter (cf. docs/design-system-web/tokens.md)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@700;800&display=swap');

:root {
    /* ───── Brand caramel (cœur visuel) ───── */
    --kf-brand:              #D4A373;
    --kf-brand-light:        #E8C4A0;
    --kf-brand-dark:         #B8895F;   /* CTAs primaires, focus, links */

    /* ───── Accents ───── */
    --kf-accent:             #7FC9D8;   /* cyan/bleu, info */
    --kf-accent-light:       #B0E0EB;
    --kf-accent-dark:        #5AA5B8;

    --kf-gold:               #E8B948;   /* récompenses, warning */
    --kf-gold-dark:          #B88A0D;

    --kf-sage:               #A8C99A;   /* nature, success */
    --kf-sage-dark:          #6E9561;

    --kf-violet:             #B388D4;   /* magique */
    --kf-violet-dark:        #7A58A1;

    --kf-rose:               #E8A0A0;   /* doux */
    --kf-rose-dark:          #C97878;   /* erreur */

    --kf-flame:              #EF6C2C;   /* alertes intenses */

    /* ───── Backgrounds ───── */
    --kf-bg-primary:         #F7F7F5;   /* fond global */
    --kf-bg-secondary:       #EEEEE8;   /* fond sections alternées */
    --kf-bg-card:            #FFFFFF;   /* cartes, dialogues */

    /* ───── Ink (texte / icônes) ───── */
    --kf-ink:                #1F1F28;   /* texte principal */
    --kf-ink-soft:           #6B6B78;   /* texte secondaire */
    --kf-ink-subtle:         #A8A8B5;   /* texte tertiaire, placeholders */
    --kf-ink-reverse:        #FFFFFF;   /* texte sur fond foncé/coloré */

    /* ───── Semantic (alias des accents) ───── */
    --kf-success:            var(--kf-sage);
    --kf-success-dark:       var(--kf-sage-dark);
    --kf-warning:            var(--kf-gold);
    --kf-warning-dark:       var(--kf-gold-dark);
    --kf-error:              var(--kf-rose-dark);
    --kf-info:               var(--kf-accent-dark);

    /* ───── Typographie ───── */
    /* Profil parent (cible site, cf. lib/app/theme/typography.dart KTypography.parent) */
    --kf-font-base:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Profil enfant (sections fun, hero, témoignages, gamification) */
    --kf-font-fun:           'Nunito', var(--kf-font-base);
    /* Option accessibilité dyslexie (à activer via classe body.kf-dyslexia-mode) */
    --kf-font-dyslexia:      'Lexie Readable', 'OpenDyslexic', var(--kf-font-base);

    /* Échelle (profil parent — KTypography.parent) */
    --kf-text-display-lg:    3.5rem;    /* 56px */
    --kf-text-display-md:    2.5rem;    /* 40px */
    --kf-text-display-sm:    2rem;      /* 32px */
    --kf-text-headline-lg:   1.5rem;    /* 24px */
    --kf-text-headline-md:   1.25rem;   /* 20px */
    --kf-text-headline-sm:   1rem;      /* 16px */
    --kf-text-title-lg:      1.125rem;  /* 18px */
    --kf-text-title-md:      0.9375rem; /* 15px */
    --kf-text-title-sm:      0.8125rem; /* 13px */
    --kf-text-body-lg:       0.9375rem; /* 15px */
    --kf-text-body-md:       0.875rem;  /* 14px */
    --kf-text-body-sm:       0.75rem;   /* 12px */
    --kf-text-label-lg:      0.875rem;  /* 14px */
    --kf-text-label-md:      0.75rem;   /* 12px */
    --kf-text-label-sm:      0.6875rem; /* 11px */

    /* Line heights */
    --kf-leading-tight:      1.1;
    --kf-leading-snug:       1.25;
    --kf-leading-normal:     1.5;       /* texte courant — min anti-fatigue cognitive */
    --kf-leading-loose:      1.7;       /* texte long format (blog) */

    /* Letter spacing */
    --kf-tracking-tight:     -0.01em;
    --kf-tracking-normal:    0;
    --kf-tracking-wide:      0.015em;   /* anti-fatigue lecture */

    /* ───── Spacing (multiples de 4, miroir KSpacing) ───── */
    --kf-space-xxs:          0.125rem;  /* 2 */
    --kf-space-xs:           0.25rem;   /* 4 */
    --kf-space-sm:           0.5rem;    /* 8 */
    --kf-space-md:           0.75rem;   /* 12 */
    --kf-space-base:         1rem;      /* 16 */
    --kf-space-lg:           1.25rem;   /* 20 */
    --kf-space-xl:           1.5rem;    /* 24 */
    --kf-space-2xl:          2rem;      /* 32 */
    --kf-space-3xl:          3rem;      /* 48 */
    --kf-space-4xl:          4rem;      /* 64 */
    --kf-space-5xl:          6rem;      /* 96 — sections desktop */
    --kf-space-6xl:          8rem;      /* 128 — séparations majeures */

    /* ───── Radii (miroir KRadii) ───── */
    --kf-radius-xs:          4px;
    --kf-radius-sm:          8px;
    --kf-radius-md:          12px;
    --kf-radius-lg:          16px;
    --kf-radius-xl:          20px;
    --kf-radius-2xl:         28px;
    --kf-radius-3xl:         36px;
    --kf-radius-full:        9999px;    /* pill, CTAs */

    /* ───── Shadows (miroir KShadows + ombres pour CTAs gradient) ───── */
    --kf-shadow-sm:          0 2px 4px rgba(0,0,0,0.05);
    --kf-shadow-md:          0 2px 8px rgba(0,0,0,0.08);
    --kf-shadow-lg:          0 8px 20px rgba(0,0,0,0.12);
    --kf-shadow-cta:         0 6px 16px rgba(212, 163, 115, 0.30);   /* brand 30%, signature CTA gradient */

    /* ───── Gradient signature (CTA primaire, miroir KGradientButton) ───── */
    --kf-gradient-cta:       linear-gradient(135deg, var(--kf-brand) 0%, var(--kf-brand-dark) 100%);
    --kf-gradient-achievement: linear-gradient(135deg, var(--kf-brand) 0%, var(--kf-gold) 100%);

    /* ───── Breakpoints (référence — utilisés via @media) ───── */
    /* sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — cf. docs/design-system-web/responsive.md */

    /* ───── Motion ───── */
    --kf-duration-fast:      150ms;
    --kf-duration-base:      250ms;
    --kf-duration-slow:      400ms;
    --kf-ease-out:           cubic-bezier(0.16, 1, 0.3, 1);     /* doux, neuro-friendly */
    --kf-ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);

    /* ───── Layout ───── */
    --kf-container-sm:       640px;
    --kf-container-md:       768px;
    --kf-container-lg:       1024px;
    --kf-container-xl:       1200px;
    --kf-container-2xl:      1440px;
}

/* =========================================================================
   Base / Reset léger — la majorité du style vient de Kadence (parent).
   Ici on n'override que ce qui doit refléter la marque Kiddiflow.
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--kf-font-base);
    font-size: var(--kf-text-body-lg);
    line-height: var(--kf-leading-normal);
    letter-spacing: var(--kf-tracking-wide);
    color: var(--kf-ink);
    background-color: var(--kf-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ───── Headings (Inter par défaut, .kf-fun pour Nunito) ───── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kf-font-base);
    color: var(--kf-ink);
    line-height: var(--kf-leading-snug);
    font-weight: 700;
}

h1, .kf-h1 { font-size: var(--kf-text-display-md); line-height: var(--kf-leading-tight); font-weight: 800; }
h2, .kf-h2 { font-size: var(--kf-text-display-sm); line-height: var(--kf-leading-tight); }
h3, .kf-h3 { font-size: var(--kf-text-headline-lg); }
h4, .kf-h4 { font-size: var(--kf-text-headline-md); }
h5, .kf-h5 { font-size: var(--kf-text-headline-sm); }
h6, .kf-h6 { font-size: var(--kf-text-title-md); }

/* Modificateur fun (Nunito) — pour hero, témoignages enfants, sections ludiques */
.kf-fun { font-family: var(--kf-font-fun); }
.kf-fun h1, .kf-fun h2, .kf-fun h3 { font-weight: 800; }

/* Tailles desktop élargies — au-dessus de 768px on peut respirer */
@media (min-width: 768px) {
    h1, .kf-h1 { font-size: var(--kf-text-display-lg); }
    h2, .kf-h2 { font-size: var(--kf-text-display-md); }
}

/* ───── Liens ───── */
a {
    color: var(--kf-brand-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--kf-duration-fast) var(--kf-ease-out);
}
a:hover {
    color: var(--kf-brand);
}
a:focus-visible {
    outline: 3px solid var(--kf-brand);
    outline-offset: 2px;
    border-radius: var(--kf-radius-xs);
}

/* ───── Focus ring global accessible (WCAG AA) ───── */
*:focus-visible {
    outline: 3px solid var(--kf-brand);
    outline-offset: 2px;
    border-radius: var(--kf-radius-xs);
}

/* ───── Mode dyslexie (toggle via body.kf-dyslexia-mode) ───── */
body.kf-dyslexia-mode {
    font-family: var(--kf-font-dyslexia);
    letter-spacing: 0.03em;
    line-height: 1.8;
}

/* =========================================================================
   Composants utilitaires Kiddiflow (cf. docs/design-system-web/components.md)
   ========================================================================= */

/* ───── CTA primaire — signature visuelle gradient brand→brandDark ───── */
.kf-btn,
.kf-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kf-space-sm);
    min-height: 52px;
    padding: var(--kf-space-md) var(--kf-space-xl);
    background: var(--kf-gradient-cta);
    color: var(--kf-ink-reverse);
    font-family: var(--kf-font-base);
    font-size: 1.0625rem; /* 17px */
    font-weight: 800;
    text-decoration: none;
    border: 0;
    border-radius: var(--kf-radius-full);
    box-shadow: var(--kf-shadow-cta);
    cursor: pointer;
    transition: transform var(--kf-duration-fast) var(--kf-ease-out),
                box-shadow var(--kf-duration-fast) var(--kf-ease-out),
                opacity var(--kf-duration-fast) var(--kf-ease-out);
}
.kf-btn:hover,
.kf-btn-primary:hover {
    color: var(--kf-ink-reverse);   /* garde le texte blanc (sinon a:hover le passe en brand) */
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(212, 163, 115, 0.38);
}
/* Texte toujours blanc, quel que soit l'état (hover/focus/active/visited) —
   sinon a:visited / a:focus (global ou Kadence) repasse en couleur brand. */
.kf-btn,
.kf-btn:link,
.kf-btn:visited,
.kf-btn:hover,
.kf-btn:focus,
.kf-btn:focus-visible,
.kf-btn:active,
.kf-btn-primary,
.kf-btn-primary:link,
.kf-btn-primary:visited,
.kf-btn-primary:hover,
.kf-btn-primary:focus,
.kf-btn-primary:focus-visible,
.kf-btn-primary:active {
    color: var(--kf-ink-reverse) !important;
}
.kf-btn:active,
.kf-btn-primary:active {
    transform: translateY(0);
}
.kf-btn:disabled,
.kf-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--kf-shadow-cta);
}

/* ───── CTA secondaire (outline brand) ───── */
.kf-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kf-space-sm);
    min-height: 52px;
    padding: var(--kf-space-md) var(--kf-space-xl);
    background: transparent;
    color: var(--kf-brand-dark);
    font-family: var(--kf-font-base);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--kf-brand-dark);
    border-radius: var(--kf-radius-full);
    cursor: pointer;
    transition: background-color var(--kf-duration-fast) var(--kf-ease-out),
                color var(--kf-duration-fast) var(--kf-ease-out);
}
.kf-btn-secondary:hover {
    background: var(--kf-brand-dark);
    color: var(--kf-ink-reverse);
}

/* ───── Bouton fantôme (texte seul) ───── */
.kf-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--kf-space-xs);
    background: transparent;
    color: var(--kf-brand-dark);
    font-weight: 600;
    text-decoration: none;
    padding: var(--kf-space-sm) var(--kf-space-md);
    border: 0;
    border-radius: var(--kf-radius-md);
    cursor: pointer;
}
.kf-btn-ghost:hover {
    color: var(--kf-brand-dark);
    background: rgba(212, 163, 115, 0.08);
}

/* ───── Card de base ───── */
.kf-card {
    background: var(--kf-bg-card);
    border-radius: var(--kf-radius-xl);
    padding: var(--kf-space-xl);
    box-shadow: var(--kf-shadow-md);
}

/* ───── Container central ───── */
.kf-container {
    width: 100%;
    max-width: var(--kf-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--kf-space-base);
    padding-right: var(--kf-space-base);
}
@media (min-width: 768px) {
    .kf-container { padding-left: var(--kf-space-xl); padding-right: var(--kf-space-xl); }
}

/* ───── Espacements section ───── */
.kf-section {
    padding-top: var(--kf-space-3xl);
    padding-bottom: var(--kf-space-3xl);
}
@media (min-width: 768px) {
    .kf-section { padding-top: var(--kf-space-5xl); padding-bottom: var(--kf-space-5xl); }
}

/* =========================================================================
   Préférences utilisateur — Accessibilité
   ========================================================================= */

@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;
    }
}

/* =========================================================================
   Override drawer mobile Kadence — items menu collés à gauche.
   Vise les sélecteurs Kadence #mobile-drawer + .drawer-inner identifiés
   via l'inspecteur Safari. Bumpé en 0.2.1.
   ========================================================================= */

/* Conteneur interne du drawer — pas de padding global,
   on gère l'espacement au niveau des items pour éviter les conflits */
#mobile-drawer .drawer-inner {
    padding: var(--kf-space-xl) 0 !important;
}

/* Wrappers de navigation mobile — pas de marge/padding parasites */
#mobile-drawer .header-mobile-navigation,
#mobile-drawer .drawer-navigation,
#mobile-drawer .header-mobile-menu-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Items du menu — alignement gauche net, padding aéré et cohérent
   avec les tokens du design system (--kf-space-*) */
#mobile-drawer .menu > li > a,
#mobile-drawer ul.menu li.menu-item > a,
#mobile-drawer .drawer-inner .menu-item > a {
    padding-left: var(--kf-space-xl) !important;
    padding-right: var(--kf-space-xl) !important;
    padding-top: var(--kf-space-md) !important;
    padding-bottom: var(--kf-space-md) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    display: block !important;
}

/* Séparateur subtil entre items pour la lisibilité */
#mobile-drawer .menu > li:not(:last-child) {
    border-bottom: 1px solid rgba(31, 31, 40, 0.05);
}

/* =========================================================================
   Footer Brand Block — colonne 1 du footer Kiddiflow
   Composant utilisé via le widget HTML du Footer Builder Kadence.
   Bumpé en 0.2.2.
   ========================================================================= */

.kf-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-lg);
    max-width: 280px;
}

.kf-footer-brand__title {
    /* Identique aux titres des autres colonnes (PRODUIT / RESSOURCES / LÉGAL).
       Seule différence assumée : la couleur brand-dark (cohérence brand). */
    font-family: var(--kf-font-base);   /* Inter — même que les autres titres */
    font-size: var(--kf-text-label-lg);  /* 14px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kf-brand-dark);          /* ← unique différence : couleur brand */
    margin: 0;
    line-height: var(--kf-leading-snug);
}

.kf-footer-brand__tagline {
    color: var(--kf-ink-soft);
    font-size: var(--kf-text-body-md);
    line-height: var(--kf-leading-normal);
    margin: 0;
}

.kf-footer-brand__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-sm);
}

.kf-footer-brand__links li {
    margin: 0;
}

.kf-footer-brand__links a {
    color: var(--kf-ink-soft);
    text-decoration: none;
    font-size: var(--kf-text-body-md);
    font-weight: 500;
    transition: color var(--kf-duration-fast) var(--kf-ease-out);
}

.kf-footer-brand__links a:hover {
    color: var(--kf-brand-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Responsive — mobile centré, desktop aligné gauche */
@media (max-width: 767px) {
    .kf-footer-brand {
        max-width: 100%;
        text-align: left;
    }
}

/* =========================================================================
   Footer — harmonisation typographique globale.
   Force Inter sur tout le footer (titres, menus, copyright) pour une
   cohérence parfaite. Seule différence assumée : couleur brand-dark
   sur le titre du bloc marque (.kf-footer-brand__title).
   ========================================================================= */

.site-footer,
.site-footer * {
    font-family: var(--kf-font-base) !important;  /* Inter partout */
}

/* Titres de colonnes (PRODUIT / RESSOURCES / LÉGAL + KIDDIFLOW) — identiques */
.site-footer .widget-title,
.site-footer .widget_block h2,
.site-footer .wp-block-heading,
.kf-footer-brand__title {
    font-size: var(--kf-text-label-lg) !important;  /* 14px */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: var(--kf-leading-snug) !important;
    margin: 0 0 var(--kf-space-base) 0 !important;
    color: var(--kf-ink) !important;  /* couleur ink par défaut */
}

/* Exception : titre du bloc marque "Kiddiflow" reste en couleur brand */
.kf-footer-brand__title {
    color: var(--kf-brand-dark) !important;
}

/* Items des menus footer + liens du bloc marque + tagline — tous Inter 500 / 14px */
.site-footer .menu > li > a,
.site-footer .widget_nav_menu .menu > li > a,
.kf-footer-brand__tagline,
.kf-footer-brand__links a {
    font-size: var(--kf-text-body-md) !important;  /* 14px */
    font-weight: 500 !important;
    line-height: var(--kf-leading-normal) !important;
    color: var(--kf-ink-soft) !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

/* Hover des liens — caramel brand-dark pour tous */
.site-footer .menu > li > a:hover,
.site-footer .widget_nav_menu .menu > li > a:hover,
.kf-footer-brand__links a:hover {
    color: var(--kf-brand-dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em !important;
}

/* Copyright + texte bas footer — même typo que les items */
.site-footer-bottom-section-1,
.site-footer-bottom-section-2,
.site-footer-bottom-section-3,
.site-footer-bottom-wrap,
.site-info,
.footer-html,
.site-footer-bottom-section-1 *,
.site-footer-bottom-section-2 *,
.site-footer-bottom-section-3 * {
    font-size: var(--kf-text-body-md) !important;  /* 14px */
    font-weight: 500 !important;
    color: var(--kf-ink-soft) !important;
    letter-spacing: 0 !important;
}

/* =========================================================================
   Pages de contenu (légales, contact) — en-tête + prose lisible
   ========================================================================= */

.kf-page-head {
    background: var(--kf-bg-secondary);
    padding: var(--kf-space-3xl) 0;
    text-align: center;
}
.kf-page-head h1 { margin: 0; }
.kf-page-head__meta {
    margin: var(--kf-space-sm) 0 0;
    color: var(--kf-ink-soft);
    font-size: var(--kf-text-body-md);
}

.kf-prose {
    max-width: 760px;
    margin: 0 auto;
}
.kf-prose > :first-child { margin-top: 0; }
.kf-prose h2 {
    font-size: var(--kf-text-headline-lg);
    margin: var(--kf-space-3xl) 0 var(--kf-space-base);
}
.kf-prose h3 {
    font-size: var(--kf-text-headline-md);
    margin: var(--kf-space-2xl) 0 var(--kf-space-sm);
}
.kf-prose p,
.kf-prose li {
    color: var(--kf-ink);
    line-height: var(--kf-leading-loose);
}
.kf-prose ul {
    padding-left: 1.25em;
    display: grid;
    gap: var(--kf-space-sm);
}
.kf-prose a { color: var(--kf-brand-dark); }
.kf-prose blockquote {
    margin: var(--kf-space-lg) 0;
    padding: var(--kf-space-base) var(--kf-space-lg);
    border-left: 3px solid var(--kf-brand-light);
    background: var(--kf-bg-secondary);
    border-radius: var(--kf-radius-md);
    color: var(--kf-ink-soft);
}
.kf-prose blockquote p { color: var(--kf-ink-soft); }

/* Tableaux légaux : scroll horizontal sur mobile */
.kf-table-wrap { overflow-x: auto; margin: var(--kf-space-lg) 0; }
.kf-prose table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--kf-text-body-md);
}
.kf-prose th,
.kf-prose td {
    text-align: left;
    padding: var(--kf-space-md);
    border: 1px solid rgba(31, 31, 40, 0.10);
    vertical-align: top;
    line-height: var(--kf-leading-normal);
}
.kf-prose th {
    background: var(--kf-bg-secondary);
    font-weight: 700;
    color: var(--kf-ink);
}