/*
 * Identité visuelle Talkami : SEUL fichier où se règlent les couleurs, la police,
 * les espacements, les rayons, les ombres et les durées d'animation.
 * Changer une couleur ici la change sur tout le site (voir docs/charte-graphique.md).
 *
 * Couleurs : bleu nuit #0E2A5C (principal : en-tête, titres, pied de page, liens),
 * orange vif #FF7A1A (accent), fond clair #F4F6FB. Contrastes vérifiés au niveau AA :
 *   blanc sur bleu nuit 14,0:1 · bleu nuit sur fond clair 12,9:1
 *   bleu nuit sur orange vif 5,35:1 (texte des boutons orange ; JAMAIS de blanc : 2,6:1)
 *   orange texte #B25512 sur fond clair 4,6:1 (sur blanc 5,0:1)
 *   texte #14213D sur fond clair 14,8:1 · texte secondaire #4E5A70 sur fond clair 6,4:1
 *   bordure de champ #7C879B sur blanc 3,6:1
 * Seul autre vert autorisé : le bouton WhatsApp.
 */

/* Police unique : Sora (SIL Open Font License 1.1), graisses 400 à 700,
   caractères latins et ponctuation française seulement (21 Ko). */
@font-face {
    font-family: "Sora";
    src: url("../fonts/sora-2.000-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Couleur principale : bleu nuit */
    --c-primary: #0E2A5C;          /* en-tête, titres, pied de page, liens, boutons principaux */
    --c-primary-strong: #0A1F45;   /* survol des boutons bleu nuit */
    --c-primary-deep: #0E2A5C;     /* pied de page, bandeaux */
    --c-primary-soft: #E7ECF6;     /* fonds bleu pâle (cartes, badges) */
    --c-primary-line: #C3CEE5;     /* bordures sur fond bleu pâle */
    --c-primary-bright: #3D6BC4;   /* fin du dégradé des barres de progression */
    --c-heading: #0E2A5C;          /* titres */

    /* Couleur d'accent : orange vif */
    --c-accent: #FF7A1A;           /* boutons d'action (texte bleu nuit), sourire du logo */
    --c-accent-hover: #FF8F3F;     /* survol des boutons orange (texte bleu nuit 6,2:1) */
    --c-on-accent: #0E2A5C;        /* texte sur orange vif : toujours bleu nuit */
    --c-accent-strong: #B25512;    /* orange pour du texte sur fond clair (4,6:1) */
    --c-accent-ink: #8A3A00;       /* texte sur fond orange pâle (6,9:1) */
    --c-accent-soft: #FFEDE0;      /* fonds orange pâle */
    --c-accent-line: #FFD2B0;      /* contour des pastilles orange pâle (décoratif) */
    --c-accent-warm: #E2560B;      /* fin du dégradé orange des pastilles d'icône */
    --c-accent-duo: #FFC79E;       /* partie remplie des icônes « duotone » */
    --c-primary-raised: #1D4285;   /* haut du dégradé bleu nuit des pastilles (relief) */

    /* Fonds et texte */
    --c-bg: #F4F6FB;               /* fond clair */
    --c-bg-warm: #E9EDF6;          /* fond des sections, pistes des barres */
    --c-surface: #FFFFFF;
    --c-text: #14213D;
    --c-muted: #4E5A70;
    --c-on-dark: #FFFFFF;
    --c-on-dark-muted: #C9D5EC;    /* texte secondaire sur bleu nuit (9,5:1) */
    --c-border: #DDE3EE;           /* séparateurs (décoratifs) */
    --c-field: #7C879B;            /* contour des champs (3,6:1) */

    /* États */
    --c-success: #0E2A5C;
    --c-success-soft: #E7ECF6;
    --c-danger: #B42318;
    --c-danger-strong: #8F1C13;
    --c-danger-soft: #FDECEA;
    --c-info: #1F3F73;
    --c-info-soft: #E8F0FB;
    --c-warning: #6B4A06;
    --c-warning-soft: #FDF3DC;
    --c-whatsapp: #0F7A40;         /* seul vert du site : bouton WhatsApp (blanc dessus 5,4:1) */
    --c-whatsapp-strong: #0B5F32;
    --c-focus: #B25512;            /* contour du focus (4,6:1 sur le fond) */
    --c-danger-line: #F6C9C4;
    --c-info-line: #C9DAF3;
    --c-warning-line: #F2DDA6;
    --c-header: rgba(244, 246, 251, .94);  /* fond clair légèrement transparent */
    --c-ring: rgba(14, 42, 92, .18);       /* halo des champs actifs */
    --c-on-dark-line: rgba(255, 255, 255, .16);
    --c-on-dark-glow: rgba(255, 255, 255, .07);

    /* Typographie */
    --font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-xs: .8125rem;
    --fs-sm: .9rem;
    --fs-md: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.4rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.1rem;
    --fw-normal: 400;
    --fw-bold: 600;
    --fw-heavy: 700;   /* Sora est chargée de 400 à 700 */

    /* Espacements (multiples de 4 px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --gutter: 16px;
    --container: 1040px;
    --container-narrow: 460px;

    /* Rayons */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Ombres (teintées de bleu nuit, légères) */
    --shadow-sm: 0 1px 2px rgba(14, 42, 92, .08);
    --shadow: 0 2px 4px rgba(14, 42, 92, .06), 0 6px 18px rgba(14, 42, 92, .08);
    --shadow-lg: 0 10px 30px rgba(14, 42, 92, .18);
    --shadow-accent: 0 6px 18px rgba(255, 122, 26, .35);
    --shadow-accent-press: 0 2px 6px rgba(255, 122, 26, .35);
    --shine: inset 0 1px 0 rgba(255, 255, 255, .35);     /* reflet en haut des boutons orange */
    --shadow-up: 0 -4px 16px rgba(14, 42, 92, .06);

    /* Animations (désactivées si « réduire les animations ») */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: .15s;
    --dur: .3s;
    --dur-slow: .6s;

    /* Hauteur de la barre de navigation du bas (téléphone, apprenant connecté) */
    --tabbar: 64px;
}

/*
 * Pastilles d'icône : trois styles, choisis par config('platform.brand.icon_style')
 * (attribut data-icon-style du <body>). Chaque style règle des variables : un bloc
 * peut en montrer un autre (page « Aperçu des icônes »). « fort » = l'essentiel.
 *   gradient : dégradé orange, icône blanche, ombre douce ;
 *   duotone  : fond blanc bordé, icône bleu nuit remplie d'orange clair ;
 *   night    : bleu nuit en relief, icône orange (contraste 5:1), petit reflet.
 */
[data-icon-style="gradient"] {
    --ib-bg: linear-gradient(145deg, var(--c-accent-hover) 0%, var(--c-accent) 45%, var(--c-accent-warm) 100%);
    --ib-fg: #FFFFFF;
    --ib-ring: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(226, 86, 11, .6);
    --ib-fill: rgba(255, 255, 255, .22);
    --ib-strong-bg: linear-gradient(160deg, var(--c-primary-raised) 0%, var(--c-primary) 60%, var(--c-primary-strong) 100%);
    --ib-strong-fg: #FFFFFF;
    --ib-strong-ring: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -8px rgba(14, 42, 92, .55);
    --ib-strong-fill: rgba(255, 122, 26, .45);
}
[data-icon-style="duotone"] {
    --ib-bg: #FFFFFF;
    --ib-fg: var(--c-primary);
    --ib-ring: inset 0 0 0 1px var(--c-primary-line), 0 3px 8px -4px rgba(14, 42, 92, .25);
    --ib-fill: var(--c-accent-duo);
    --ib-strong-bg: var(--c-primary);
    --ib-strong-fg: #FFFFFF;
    --ib-strong-ring: 0 6px 14px -6px rgba(14, 42, 92, .5);
    --ib-strong-fill: rgba(255, 122, 26, .55);
}
[data-icon-style="night"] {
    --ib-bg: linear-gradient(160deg, var(--c-primary-raised) 0%, var(--c-primary) 55%, var(--c-primary-strong) 100%);
    --ib-fg: var(--c-accent);
    --ib-ring: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -8px rgba(14, 42, 92, .55);
    --ib-fill: none;
    --ib-strong-bg: linear-gradient(145deg, var(--c-accent-hover) 0%, var(--c-accent) 55%, var(--c-accent-warm) 100%);
    --ib-strong-fg: var(--c-primary);
    --ib-strong-ring: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(226, 86, 11, .6);
    --ib-strong-fill: none;
}