/* ============================================================
   MAPi · Design tokens (fondations seules)
   Extrait de index.html (Mes-Aides-Publiques/mapi-suivi-client).
   À importer tel quel dans tout nouvel écran MAPi.
   Règle : ne JAMAIS inventer un hex hors charte ; réutiliser ces
   variables (les gradients peuvent décliner un même hue en plus
   clair/foncé pour la profondeur).
   ============================================================ */

/* Museo Sans · police d'affichage de marque MAPi (auto-hébergée sur le CDN) */
@font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('https://cdn.mesaidespubliques.fr/fonts/MuseoSansCyrl-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('https://cdn.mesaidespubliques.fr/fonts/MuseoSansCyrl-500.woff2') format('woff2');
    font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('https://cdn.mesaidespubliques.fr/fonts/MuseoSansCyrl-700.woff2') format('woff2');
    font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('https://cdn.mesaidespubliques.fr/fonts/MuseoSansCyrl-900.woff2') format('woff2');
    font-weight: 800 900; font-style: normal; font-display: swap;
}
/* Mukta Mahee (corps de texte) : AUTO-HEBERGEE (fonts/*.woff2, sous-ensembles
   latin + latin-ext). Plus aucune requete Google Fonts : pas de CSS externe
   bloquante a froid, et surtout pas de bascule de police (FOUT) visible a
   chaque navigation. Graisses alignees sur l'usage produit : 400 a 800. */
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mukta-mahee-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mukta-mahee-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/mukta-mahee-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/mukta-mahee-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/mukta-mahee-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/mukta-mahee-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/mukta-mahee-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/mukta-mahee-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/mukta-mahee-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mukta Mahee';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/mukta-mahee-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* ═════════ Contrat marque blanche : trois couleurs ═════════
       Un partenaire ne renseigne que ces trois valeurs, son logo et son
       slogan ; le moteur `body[data-brand]` en dérive toute la palette.
       Partagé par les trois espaces (Expert, Client, Partenaire). */
    --wl-primary: #006DEC;
    --wl-secondary: #FF934F;
    --wl-ink: #28323E;
    /* Teintes de chrome dérivées du primaire (dégradés, bandeaux) */
    --brand-deep: #0053BE;
    --brand-lift: #2E8AF0;
    --brand-lift-2: #3D8EF7;
    --brand-lift-3: #68A8FA;
    --brand-header-from: #006DEC;
    --brand-header-to: #2D8AF0;

    /* Couleurs de marque */
    --blue: #006DEC;
    --blue-dark: #0055BB;
    --blue-pale: #EBF6FF;
    --blue-muted: #D4EAFF;
    --orange: #FF934F;
    --orange-soft: #FFF3EB;
    --orange-ink: #A64E17;   /* encre orange assombrie : >= 4.5:1 sur blanc et sur --orange-soft */
    --yellow: #FCC844;
    --green: #2DAE54;
    --green-soft: #E8F9ED;
    --green-ink: #1E7C3C;

    /* Texte */
    --text-primary: #28323E;
    --text-secondary: #586173;
    /* ASSOMBRI DE QUATRE POINTS (2026-08-08). Il valait #6E7A8E, soit
       4,34:1 sur blanc : sous la barre des 4,5:1 que PRODUCT.md se donne,
       et le relevé mobile le retrouvait sur une trentaine de textes, les
       mêmes, sur dix écrans. Un seul jeton, un seul défaut, une seule
       correction. #6A7688 rend 4,60:1 et se distingue à peine de l'ancien
       à l'oeil : c'est la mesure qui change, pas la teinte. */
    --text-muted: #6A7688;    /* réservé aux petits labels ; jamais pour du texte courant */

    /* Gris de surface */
    --gray-100: #F7F9FC;
    --gray-200: #EDF1F5;
    --gray-300: #D8DEE6;

    /* Fond des cartes et panneaux : blanc en clair, s'assombrit avec le
       thème Sombre. Toujours préférer var(--surface) à #fff pour un fond. */
    --surface: #fff;

    /* Formes */
    --radius: 16px;
    --radius-pill: 32px;

    /* Layout */
    --page-max: 1040px;

    /* Ombres (teintées du bleu de marque) */
    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--blue) 6%, transparent);
    --shadow-md: 0 4px 20px color-mix(in srgb, var(--blue) 10%, transparent);
    --shadow-lg: 0 8px 32px color-mix(in srgb, var(--blue) 14%, transparent);

    /* Échelle z-index */
    --z-content: 1;
    --z-edge-fade: 5;
    --z-control: 10;
    --z-sticky: 20;
}

/* ═══════════════ Moteur marque blanche ═══════════════
   Toute la palette se déduit des trois couleurs du partenaire.
   Ajouter une marque = trois couleurs, un logo, un slogan.
   Le vert (succès) et le rouge (alerte) restent sémantiques :
   ils portent une information, pas une identité. */
body[data-brand] {
    --blue: var(--wl-primary);
    --blue-dark: color-mix(in oklab, var(--wl-primary) 78%, #000);
    --blue-pale: color-mix(in oklab, var(--wl-primary) 8%, #fff);
    --blue-muted: color-mix(in oklab, var(--wl-primary) 22%, #fff);
    --orange: var(--wl-secondary);
    --orange-soft: color-mix(in oklab, var(--wl-secondary) 12%, #fff);
    --orange-ink: color-mix(in oklab, var(--wl-secondary) 64%, #000);
    --yellow: var(--wl-secondary);
    --text-primary: var(--wl-ink);
    --text-secondary: color-mix(in oklab, var(--wl-ink) 76%, #fff);
    --text-muted: color-mix(in oklab, var(--wl-ink) 66%, #fff);
    /* Les gris prennent une pointe du primaire : les fonds de page
       appartiennent à la marque au lieu d'être un gris neutre */
    --gray-100: color-mix(in oklab, var(--wl-primary) 4%, #F8FAFC);
    --gray-200: color-mix(in oklab, var(--wl-primary) 6%, #EEF1F5);
    --gray-300: color-mix(in oklab, var(--wl-primary) 9%, #D8DEE6);
    --brand-deep: color-mix(in oklab, var(--wl-primary) 76%, #000);
    --brand-lift: color-mix(in oklab, var(--wl-primary) 84%, #fff);
    --brand-lift-2: color-mix(in oklab, var(--wl-primary) 74%, #fff);
    --brand-lift-3: color-mix(in oklab, var(--wl-primary) 54%, #fff);
    /* Repli pour une marque non réglée : primaire assombri, de quoi
       tenir le texte blanc sur la plupart des teintes moyennes */
    --brand-header-from: color-mix(in oklab, var(--wl-primary) 62%, #10131A);
    --brand-header-to: color-mix(in oklab, var(--wl-primary) 80%, #10131A);
}

/* ─── Les trois marques de démonstration ───
   Reprises des landings partenaires (Landing-CrediPro,
   Landing-Cabinet-GCR, Landing-MEDEF). */
body[data-brand="credipro"] {
    --wl-primary: #F27E0A;
    --wl-secondary: #BF2426;
    --wl-ink: #191919;
    /* Base chaude assumée : les gris virent au sable */
    --gray-100: #FAF8F6;
    --gray-200: #EEE9E4;
    --gray-300: #DCD4CD;
    /* L'orange de marque est trop clair pour porter du blanc (2,7:1).
       Le primaire d'interface descend donc vers la terre cuite : les
       boutons pleins passent l'AA, et l'orange vif reste la teinte
       d'accent (dégradés, éclaircies, pastilles). */
    --blue: #BC4A0C;
    --brand-lift: #F27E0A;
    --brand-lift-2: #E0700C;
    --brand-header-from: #A9490A;
    --brand-header-to: #C0521E;
}
body[data-brand="gcr"] {
    --wl-primary: #001177;
    --wl-secondary: #21CBFF;
    --wl-ink: #212934;
    /* Cyan très clair : l'encre secondaire se fonce pour rester lisible */
    --orange-ink: #005E78;
    /* Le primaire frôle le noir : le bandeau se relève vers l'indigo */
    --brand-header-from: #001177;
    --brand-header-to: #14309B;
}
body[data-brand="medef"] {
    --wl-primary: #1C3494;
    --wl-secondary: #E2001A;
    --wl-ink: #1B2430;
    --brand-header-from: #14276F;
    --brand-header-to: #24409F;
}


body {
    font-family: 'Mukta Mahee', sans-serif;
    background: var(--gray-100);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 18px 20px 60px;
}

/* ============================================================
   Thème Sombre (app expert) : html[data-chrome="d"].
   Gris légèrement bleutés (teinte ~215, la même famille que les
   gris clairs), élévation par éclaircissement : fond de page
   < carte (--surface) < survol. Les encres colorées passent en
   version claire pour rester lisibles sur les fonds teintés
   sombres. Le produit client, lui, reste clair.
   ============================================================ */
html[data-chrome="d"] {
    color-scheme: dark;

    /* Encres bleues : --blue reste le bleu de marque (aplats, remplissages),
       --blue-dark devient l'encre bleue lisible sur fonds sombres */
    --blue-dark: #8FBFFF;
    --blue-pale: #16283F;
    --blue-muted: #1F3B61;

    --orange-soft: #392719;
    --orange-ink: #FFB483;
    --green-soft: #14301E;
    --green-ink: #67D08F;

    --text-primary: #EAF0F8;
    --text-secondary: #A6B3C8;
    --text-muted: #8B98AE;

    --gray-100: #131A26;
    --gray-200: #29354A;
    --gray-300: #3C4A63;
    --surface: #1B2432;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.46);
}