/* ============================================================================
   assets/css/charte.css — LES JETONS DE LA MARQUE (charte v2.0), propres à ce site.
   COPIE LITTÉRALE du <style> de reference_design_emo.html : quand la charte évolue,
   on RECOPIE ce bloc. Les composants, communs aux sept sites, vivent dans
   charte_composants.css (socle), chargé juste avant.
   L'administration (préfixe admin-, sans couleur littérale) vit dans administration.css.
   ============================================================================ */

/* ========== EMO · MULTI-THÈME ==========
   Aligné sur la « Charte graphique EMO v2.0 » (septembre 2026).
   Un seul fichier modèle, 3 thèmes basculables (Clair / Ardoise / Sombre).
   Tout est porté par des classes sur <body> (.theme-clair, .theme-ardoise,
   .theme-sombre) qui redéfinissent les variables CSS de couleur. Le reste du
   CSS lit ces variables — donc une seule règle par composant pour toutes les
   combinaisons. Persistance dans localStorage, détection initiale via
   prefers-color-scheme, et @media (prefers-reduced-motion) qui ramène durées
   et délais à 0,01 ms.

   COULEURS — les valeurs sont celles du § 07 de la charte, à la lettre :
   Bleu profond #04264D pour la barre d'application, bleu d'action #0850A0.
   Le bleu d'eau et le vert du logotype complètent la palette : l'eau pour
   l'activité en cours, le vert pour la performance environnementale.
   Règle de répartition : 70 / 25 / 5 — 70 % de neutres, 25 % de bleu profond, 5 % de bleu d'action.

   DEUX PARTICULARITÉS EMO :
   · --m-violet PORTE LE VERT. Le vert n'est pas un succès — le succès a sa propre
     teinte (#0B8253) ; le vert EMO chiffre une performance environnementale.
   · L'accent d'action et le bleu d'information ont la même valeur (#0850A0) :
     ne jamais poser un message d'information à côté d'une action primaire.
   Le filet d'identité — bleu, vert, eau — est la seule ornementation du système :
   trait de titre, trait de section et barre de l'onglet actif de la barre d'appli.

   POLICE — DM Sans seule, auto-hébergée dans assets/vendor/dm-sans/.
   Aucune famille monospace (§ 04) : les colonnes de chiffres, les références et
   les pastilles de touche s'alignent avec font-variant-numeric: tabular-nums.

   CE QUE LA CHARTE PRESCRIT ET QUI SURPREND — à ne pas « corriger » :
   · Bordure des champs à --m-gris-200 (§ 06), soit 1,20 : 1 avec la surface,
     alors que le § 03 impose 3 : 1 aux bordures de champ. Le § 06 a été retenu,
     sur décision expresse, comme pour le modèle Master.
   · --m-accent-light se détache peu de la surface sur fond sombre (1,06 à 1,07 : 1).
     L'état coché reste lisible : la charte lui adjoint une bordure d'accent.

   HÉRITÉ ET NON DÉCRIT PAR LA v2, donc conservé : --m-serie-1…5,
   --m-sur-couleur, --m-sur-emphase, --m-sur-accent-light, --m-*-encre (alias du
   ton plein depuis que la v2 a supprimé l'encre intermédiaire).
*/

/* ─────────── BASE NEUTRE — police, rayon, courbes (indépendantes du thème) ─────────── */
:root {
  --m-police: 'DM Sans', system-ui, sans-serif;
  /* Rayons de la charte v2 : 6 px par défaut, 4 px pour les filtres et les
     squelettes, 8 px pour les modales et les blocs segmentés. */
  --m-rayon: 6px;
  --m-rayon-sm: 4px;
  --m-rayon-lg: 8px;
  --m-rayon-pill: 999px;
  /* Échelle d'espacement — trame de 4 px (charte § 05) */
  --m-espace-1: 4px;
  --m-espace-2: 8px;
  --m-espace-3: 12px;
  --m-espace-4: 16px;
  --m-espace-5: 24px;
  --m-espace-6: 32px;
  /* Deux courbes, pas une de plus (charte § 05) */
  --m-doux: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-ressort: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ─── Teintes d'identité — avatars, pastilles de personne, parts d'un graphique ───
     Huit couleurs d'IDENTIFICATION, pas de signalisation : elles ne veulent
     rien dire, elles servent à distinguer une chose d'une autre d'un coup d'œil
     — une personne, un mode de transport, une énergie. Ne jamais s'en servir
     pour dire « réussi », « en retard » ou « urgent » — les teintes de
     signalisation existent pour cela, et les confondre rendrait un message
     d'erreur illisible. Reprises à l'identique du modèle Semosia (septembre
     2026), quand le tableau de bord Accueil a dû ranger six catégories : les
     séries --m-serie-1…5 (accent, noir, gris) n'en distinguent que deux.

     Définies UNE FOIS, hors des trois thèmes : une part garde sa couleur en
     clair comme en sombre, sinon elle cesserait d'être reconnaissable au moment
     même où on bascule de thème.

     Des PASTELS, et huit teintes RÉPARTIES SUR LA ROUE. Les deux ne sont pas
     décoratifs : adoucie, une couleur perd de sa distance aux autres, et trois
     bleus voisins devenaient indiscernables une fois pastellisés. L'écart le
     plus serré vaut ΔE 21,8.

     Chaque teinte porte son encre : la MÊME teinte, assombrie, jamais un noir
     neutre. Toutes tiennent au moins 5 : 1. */
  --m-identite-1: #A2C2F6;  --m-identite-1-encre: #083172;   /* bleu   · 6,84 : 1 */
  --m-identite-2: #9CDFE8;  --m-identite-2-encre: #145D66;   /* cyan   · 5,07 : 1 */
  --m-identite-3: #A4EABE;  --m-identite-3-encre: #146632;   /* vert   · 5,07 : 1 */
  --m-identite-4: #F6D984;  --m-identite-4-encre: #695107;   /* jaune  · 5,46 : 1 */
  --m-identite-5: #F9BE94;  --m-identite-5-encre: #733407;   /* orange · 5,77 : 1 */
  --m-identite-6: #F7A1A1;  --m-identite-6-encre: #730707;   /* rouge  · 6,00 : 1 */
  --m-identite-7: #F8AAD1;  --m-identite-7-encre: #73073D;   /* rose   · 6,38 : 1 */
  --m-identite-8: #D7ACF6;  --m-identite-8-encre: #460971;   /* violet · 7,23 : 1 */
}

/* ─────────── THÈME CLAIR — les valeurs exactes de la charte v2 ─────────── */
body.theme-clair {
  --m-noir: #0D1117;                            /* Encre forte, titres, bouton primaire */
  --m-gris-900: #1A2430;                        /* Survol du bouton primaire */
  --m-gris-700: #3C4653;                        /* Texte courant, libellés de champ */
  --m-gris-500: #6B7684;                        /* Texte secondaire, en-têtes de tableau */
  --m-gris-400: #8C96A3;                        /* Indices, icônes discrètes, texte substitut */
  --m-gris-300: #CBD4DE;                        /* Bordure marquée, piste d'interrupteur */
  --m-gris-200: #E6EBF1;                        /* Bordure standard, filets de séparation */
  --m-gris-100: #EEF2F6;                        /* Onglet actif, pastille de touche, squelette */
  --m-gris-50: #F5F8FA;                         /* Survol de ligne, fond de champ, en-tête de tableau */
  --m-blanc: #FFFFFF;                           /* Surface : cartes, tableaux, champs, modales */
  --m-fond: #FFFFFF;                            /* Fond de page — identique à la surface en clair :
                                                  la hiérarchie est portée par les filets gris-200 */
  --m-carte-ombre-1: rgba(13,17,23,.05);
  --m-carte-ombre-2: rgba(13,17,23,.14);

  --m-accent: #0850A0;                          /* Champ focalisé, anneau de focus, bouton accent, barre active */
  --m-accent-hover: #074587;                    /* Survol du bouton accent */
  --m-accent-light: #D5E5F5;                    /* Halo de focus, bouton doux, case cochée, option surlignée */
  --m-sur-accent-light: var(--m-accent);        /* Encre sur le fond doux : 6,1 : 1 sur ce fond */
  --m-sur-couleur: #FFFFFF;                     /* Encre posée SUR un aplat saturé */
  --m-emphase: var(--m-noir);                   /* Aplat du bouton primaire (charte : --m-noir) */
  --m-emphase-hover: var(--m-gris-900);         /* Son survol (charte : --m-gris-900) */
  --m-sur-emphase: #FFFFFF;                     /* Encre posée SUR cet aplat */
  --m-bleu: #2496C4;
  --m-bleu-light: #EAF8FE;
  --m-violet: #4E6B0E;
  --m-violet-light: #F5FAE6;
  --m-succes: #0B8253;
  --m-succes-light: #E4F6ED;
  --m-succes-encre: var(--m-succes);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-erreur: #CE3123;
  --m-erreur-light: #FBEAE7;
  --m-erreur-encre: var(--m-erreur);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-attention: #9F6307;
  --m-attention-light: #FCF1DC;
  --m-attention-encre: var(--m-attention);      /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-info: #0850A0;
  --m-info-light: #F0F6FC;
  --m-info-encre: var(--m-info);                /* Le ton plein tient déjà 4,5 : 1 sur son fond */

  /* Séries de graphiques — absentes de la charte v2 : l'accent, les deux teintes
     d'identité, puis l'échelle de gris, pour rester lisible en niveaux de gris. */
  --m-serie-1: var(--m-accent);
  --m-serie-2: var(--m-bleu);
  --m-serie-3: var(--m-violet);
  --m-serie-4: var(--m-gris-500);
  --m-serie-5: var(--m-gris-300);

  /* En-tête — barre d'application pleine et foncée (charte § 06). Elle ne lit
     pas les jetons de page mais sa propre famille --m-entete-*. */
  --m-entete-bg: rgba(4,38,77,.94);
  --m-entete-plein: #04264D;
  --m-entete-texte: rgba(255,255,255,.72);
  --m-entete-fort: #FFFFFF;
  --m-entete-bordure: rgba(255,255,255,.14);
  --m-entete-surface: rgba(255,255,255,.10);
  --m-entete-surface-forte: rgba(255,255,255,.20);
  --m-entete-accent: #58C8F0;
  --m-filet-1: #0850A0;
  --m-filet-2: #98C020;
  --m-filet-3: #58C8F0;
  --m-entete-vert: var(--m-filet-2);            /* Deuxième lettre du logotype */
  --m-entete-filet: linear-gradient(90deg, var(--m-filet-1), var(--m-filet-2), var(--m-filet-3));

  /* Badges — palette partagée par les quatre chartes (§ 06). */
  --m-badge-neutre-fond: #F5F5F5;
  --m-badge-neutre-encre: #404040;
  --m-badge-neutre-bord: #A3A3A3;
  --m-badge-accent-fond: #EEF2FF;
  --m-badge-accent-encre: #4F46E5;
  --m-badge-accent-bord: #A5B4FC;
  --m-badge-succes-fond: #ECFDF5;
  --m-badge-succes-encre: #047857;
  --m-badge-succes-bord: #6EE7B7;
  --m-badge-erreur-fond: #FEF2F2;
  --m-badge-erreur-encre: #991B1B;
  --m-badge-erreur-bord: #FCA5A5;
  --m-badge-attention-fond: #FEF3C7;
  --m-badge-attention-encre: #B45309;
  --m-badge-attention-bord: #FBBF24;
  --m-badge-info-fond: #E0F2FE;
  --m-badge-info-encre: #0369A1;
  --m-badge-info-bord: #7DD3FC;
  --m-badge-violet-fond: #EDE9FE;
  --m-badge-violet-encre: #7C3AED;
  --m-badge-violet-bord: #C4B5FD;
}

/* ─────────── THÈME ARDOISE — l'échelle inversée, gris froids mi-sombres ─────────── */
body.theme-ardoise {
  --m-noir: #EAF1F8;                            /* Encre forte, titres, bouton primaire */
  --m-gris-900: #D6E0EA;                        /* Survol du bouton primaire */
  --m-gris-700: #B0BCCB;                        /* Texte courant, libellés de champ */
  --m-gris-500: #8B98A8;                        /* Texte secondaire, en-têtes de tableau */
  --m-gris-400: #697687;                        /* Indices, icônes discrètes, texte substitut */
  --m-gris-300: #4F5C6C;                        /* Bordure marquée, piste d'interrupteur */
  --m-gris-200: #3C4857;                        /* Bordure standard, filets de séparation */
  --m-gris-100: #343F4D;                        /* Onglet actif, pastille de touche, squelette */
  --m-gris-50: #2C3643;                         /* Survol de ligne, fond de champ, en-tête de tableau */
  --m-blanc: #252E3A;                           /* Surface : cartes, tableaux, champs, modales */
  --m-fond: #1A222C;                            /* Fond de page, un cran sous la surface */
  --m-carte-ombre-1: rgba(0,0,0,.25);
  --m-carte-ombre-2: rgba(0,0,0,.55);

  --m-accent: #6E9ED3;                          /* Champ focalisé, anneau de focus, bouton accent, barre active */
  --m-accent-hover: #A6C6E7;                    /* Survol du bouton accent */
  --m-accent-light: #102A45;                    /* Halo de focus, bouton doux, case cochée, option surlignée */
  --m-sur-accent-light: var(--m-accent);        /* Encre sur le fond doux : 5,2 : 1 sur ce fond */
  --m-sur-couleur: var(--m-fond);               /* Encre posée SUR un aplat saturé */
  --m-emphase: var(--m-noir);                   /* Aplat du bouton primaire (charte : --m-noir) */
  --m-emphase-hover: var(--m-gris-900);         /* Son survol (charte : --m-gris-900) */
  --m-sur-emphase: var(--m-fond);               /* Encre posée SUR cet aplat */
  --m-bleu: #58C8F0;
  --m-bleu-light: #0D2A36;
  --m-violet: #BEDC63;
  --m-violet-light: #24300F;
  --m-succes: #34D399;
  --m-succes-light: #0E2E23;
  --m-succes-encre: var(--m-succes);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-erreur: #F87171;
  --m-erreur-light: #3A1A1C;
  --m-erreur-encre: var(--m-erreur);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-attention: #FBBF24;
  --m-attention-light: #2F240E;
  --m-attention-encre: var(--m-attention);      /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-info: #6E9ED3;
  --m-info-light: #10263C;
  --m-info-encre: var(--m-info);                /* Le ton plein tient déjà 4,5 : 1 sur son fond */

  /* Séries de graphiques — absentes de la charte v2 : l'accent, les deux teintes
     d'identité, puis l'échelle de gris, pour rester lisible en niveaux de gris. */
  --m-serie-1: var(--m-accent);
  --m-serie-2: var(--m-bleu);
  --m-serie-3: var(--m-violet);
  --m-serie-4: var(--m-gris-500);
  --m-serie-5: var(--m-gris-300);

  /* En-tête — barre d'application pleine et foncée (charte § 06). Elle ne lit
     pas les jetons de page mais sa propre famille --m-entete-*. */
  --m-entete-bg: rgba(6,48,94,.92);
  --m-entete-plein: #06305E;
  --m-entete-texte: rgba(255,255,255,.72);
  --m-entete-fort: #FFFFFF;
  --m-entete-bordure: rgba(255,255,255,.14);
  --m-entete-surface: rgba(255,255,255,.10);
  --m-entete-surface-forte: rgba(255,255,255,.20);
  --m-entete-accent: #58C8F0;
  --m-filet-1: #2F76BC;
  --m-filet-2: #BEDC63;
  --m-filet-3: #58C8F0;
  --m-entete-vert: var(--m-filet-2);            /* Deuxième lettre du logotype */
  --m-entete-filet: linear-gradient(90deg, var(--m-filet-1), var(--m-filet-2), var(--m-filet-3));

  /* Badges — palette partagée par les quatre chartes (§ 06).
     Sur fond sombre le liseré passe à currentColor : les fonds sourds s'y
     dissoudraient sans lui (§ 03). */
  --m-badge-neutre-fond: #333A45;
  --m-badge-neutre-encre: #D4D4D4;
  --m-badge-neutre-bord: currentColor;
  --m-badge-accent-fond: #262A55;
  --m-badge-accent-encre: #A5B4FC;
  --m-badge-accent-bord: currentColor;
  --m-badge-succes-fond: #163B31;
  --m-badge-succes-encre: #6EE7B7;
  --m-badge-succes-bord: currentColor;
  --m-badge-erreur-fond: #3E1F1F;
  --m-badge-erreur-encre: #FCA5A5;
  --m-badge-erreur-bord: currentColor;
  --m-badge-attention-fond: #3A2E14;
  --m-badge-attention-encre: #FCD34D;
  --m-badge-attention-bord: currentColor;
  --m-badge-info-fond: #14313F;
  --m-badge-info-encre: #7DD3FC;
  --m-badge-info-bord: currentColor;
  --m-badge-violet-fond: #2E2452;
  --m-badge-violet-encre: #C4B5FD;
  --m-badge-violet-bord: currentColor;
}

/* ─────────── THÈME SOMBRE — l'échelle inversée, fond quasi noir ─────────── */
body.theme-sombre {
  --m-noir: #F1F5F8;                            /* Encre forte, titres, bouton primaire */
  --m-gris-900: #E0E6EC;                        /* Survol du bouton primaire */
  --m-gris-700: #B4BCC6;                        /* Texte courant, libellés de champ */
  --m-gris-500: #939CA8;                        /* Texte secondaire, en-têtes de tableau */
  --m-gris-400: #69727E;                        /* Indices, icônes discrètes, texte substitut */
  --m-gris-300: #4B525C;                        /* Bordure marquée, piste d'interrupteur */
  --m-gris-200: #323941;                        /* Bordure standard, filets de séparation */
  --m-gris-100: #252B32;                        /* Onglet actif, pastille de touche, squelette */
  --m-gris-50: #1A1F25;                         /* Survol de ligne, fond de champ, en-tête de tableau */
  --m-blanc: #13181D;                           /* Surface : cartes, tableaux, champs, modales */
  --m-fond: #0A0E12;                            /* Fond de page, un cran sous la surface */
  --m-carte-ombre-1: rgba(0,0,0,.4);
  --m-carte-ombre-2: rgba(0,0,0,.7);

  --m-accent: #6E9ED3;                          /* Champ focalisé, anneau de focus, bouton accent, barre active */
  --m-accent-hover: #A6C6E7;                    /* Survol du bouton accent */
  --m-accent-light: #0A1F36;                    /* Halo de focus, bouton doux, case cochée, option surlignée */
  --m-sur-accent-light: var(--m-accent);        /* Encre sur le fond doux : 5,9 : 1 sur ce fond */
  --m-sur-couleur: var(--m-fond);               /* Encre posée SUR un aplat saturé */
  --m-emphase: var(--m-noir);                   /* Aplat du bouton primaire (charte : --m-noir) */
  --m-emphase-hover: var(--m-gris-900);         /* Son survol (charte : --m-gris-900) */
  --m-sur-emphase: var(--m-fond);               /* Encre posée SUR cet aplat */
  --m-bleu: #58C8F0;
  --m-bleu-light: #08222D;
  --m-violet: #BEDC63;
  --m-violet-light: #1C2709;
  --m-succes: #34D399;
  --m-succes-light: #07241C;
  --m-succes-encre: var(--m-succes);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-erreur: #F87171;
  --m-erreur-light: #2A1014;
  --m-erreur-encre: var(--m-erreur);            /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-attention: #FBBF24;
  --m-attention-light: #2A1F08;
  --m-attention-encre: var(--m-attention);      /* Le ton plein tient déjà 4,5 : 1 sur son fond */
  --m-info: #6E9ED3;
  --m-info-light: #0A1F33;
  --m-info-encre: var(--m-info);                /* Le ton plein tient déjà 4,5 : 1 sur son fond */

  /* Séries de graphiques — absentes de la charte v2 : l'accent, les deux teintes
     d'identité, puis l'échelle de gris, pour rester lisible en niveaux de gris. */
  --m-serie-1: var(--m-accent);
  --m-serie-2: var(--m-bleu);
  --m-serie-3: var(--m-violet);
  --m-serie-4: var(--m-gris-500);
  --m-serie-5: var(--m-gris-300);

  /* En-tête — barre d'application pleine et foncée (charte § 06). Elle ne lit
     pas les jetons de page mais sa propre famille --m-entete-*. */
  --m-entete-bg: rgba(2,22,39,.94);
  --m-entete-plein: #021627;
  --m-entete-texte: rgba(255,255,255,.72);
  --m-entete-fort: #FFFFFF;
  --m-entete-bordure: rgba(255,255,255,.14);
  --m-entete-surface: rgba(255,255,255,.10);
  --m-entete-surface-forte: rgba(255,255,255,.20);
  --m-entete-accent: #58C8F0;
  --m-filet-1: #2F76BC;
  --m-filet-2: #BEDC63;
  --m-filet-3: #58C8F0;
  --m-entete-vert: var(--m-filet-2);            /* Deuxième lettre du logotype */
  --m-entete-filet: linear-gradient(90deg, var(--m-filet-1), var(--m-filet-2), var(--m-filet-3));

  /* Badges — palette partagée par les quatre chartes (§ 06).
     Sur fond sombre le liseré passe à currentColor : les fonds sourds s'y
     dissoudraient sans lui (§ 03). */
  --m-badge-neutre-fond: #2A2E34;
  --m-badge-neutre-encre: #D4D4D4;
  --m-badge-neutre-bord: currentColor;
  --m-badge-accent-fond: #23214B;
  --m-badge-accent-encre: #A5B4FC;
  --m-badge-accent-bord: currentColor;
  --m-badge-succes-fond: #12312A;
  --m-badge-succes-encre: #6EE7B7;
  --m-badge-succes-bord: currentColor;
  --m-badge-erreur-fond: #3A1B1B;
  --m-badge-erreur-encre: #FCA5A5;
  --m-badge-erreur-bord: currentColor;
  --m-badge-attention-fond: #33280F;
  --m-badge-attention-encre: #FCD34D;
  --m-badge-attention-bord: currentColor;
  --m-badge-info-fond: #102A36;
  --m-badge-info-encre: #7DD3FC;
  --m-badge-info-bord: currentColor;
  --m-badge-violet-fond: #281F47;
  --m-badge-violet-encre: #C4B5FD;
  --m-badge-violet-bord: currentColor;
}

/* ─────────── ARÊTES ET ÉLÉVATIONS ───────────
   Des noms pour les valeurs de la charte, afin qu'aucun composant ne porte de
   littéral. Les jetons vivent sur <body> : ils lisent donc les gris du thème
   courant, et une seule déclaration suffit pour les trois thèmes.
   Les quatre élévations sont celles du tableau du § 05. La charte n'en donne
   aucune AU REPOS : en thème clair, fond et surface sont tous deux blancs et
   c'est le filet gris-200 qui découpe l'écran ; en thèmes sombres l'élévation
   se signale par un changement de surface, l'ombre noire y étant invisible. */
body {
  --m-bordure: var(--m-gris-200);              /* Filets de séparation, contour des surfaces */
  --m-bordure-forte: var(--m-gris-300);        /* Bordure marquée : toast, piste d'interrupteur */
  --m-bordure-champ: var(--m-gris-200);        /* Contour de champ au repos (§ 06) */
  --m-bordure-champ-survol: var(--m-gris-300); /* Son survol (§ 06) */
  --m-ombre-carte: 0 1px 0 var(--m-carte-ombre-1), 0 18px 36px -18px var(--m-carte-ombre-2);
  --m-ombre-flottant: 0 12px 30px -10px rgba(0,0,0,.18);
  --m-ombre-toast: 0 14px 40px -12px rgba(0,0,0,.45);
  --m-ombre-modale: 0 24px 60px -15px rgba(0,0,0,.4);
  /* Chevron du <select> : sa couleur est figée dans le SVG (un data-URI ne
     résout pas currentColor), donc un jeton par thème. */
  --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.theme-ardoise {
  --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B98A8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.theme-sombre {
  --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23939CA8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}



* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--m-police); color: var(--m-noir); background: var(--m-fond);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  transition: background .35s var(--m-doux), color .35s var(--m-doux);
}

/* Inputs natifs : forcer l'héritage de la couleur de texte (sinon noir système, illisible sur fond sombre) */
input, textarea, select { color: var(--m-noir); }
option { background: var(--m-blanc); color: var(--m-noir); }

/* ─────────── PARTICULARITÉS DE LA MARQUE ───────────
   Ce que charte_composants.css laisse à chaque marque (chargé avant ce fichier).
   Déclarés sur body, comme les thèmes : les var() s'y résolvent dans le thème actif. */
body {
  --m-trait-titre: linear-gradient(90deg, var(--m-filet-1), var(--m-filet-2), var(--m-filet-3));   /* le filet d'identité (bleu, vert, eau) */
  --m-entete-onglet: var(--m-entete-filet);
  --m-stat-2: var(--m-accent);
  --m-stat-5: var(--m-bleu);
}
/* Vagues des pages de connexion et de maintenance (auth.js), en « r, g, b ». */
:root {
  --m-vague-1-rgb: 0, 61, 122;
  --m-vague-2-rgb: 91, 192, 235;
  --m-vague-3-rgb: 122, 184, 0;
}
/* Charte § 06 : le logotype garde ses trois valeurs — E en blanc, M en vert,
   O en bleu d'eau, sur l'aplat bleu profond de la barre. */
.m-logo .vert { color: var(--m-entete-vert); }