/* Portail Roadmap — les surcharges qui ne peuvent PAS vivre en CSS isolée.

   ⚠️ POURQUOI CE FICHIER EXISTE, ET POURQUOI IL DOIT RESTER MINUSCULE ⚠️

   Tout le reste du portail est en CSS isolée (`.razor.css`), et c'est la règle : la portée
   `[b-xxxxx]` confine chaque feuille à son composant, et suffit à passer devant les règles
   d'élément nues de Bootstrap, MudBlazor et Radzen.

   Une seule chose lui échappe : l'intérieur d'un composant ENFANT. `MmModal` rend son propre
   pied et ses propres boutons ; ces éléments ne portent pas la portée du portail, donc aucun
   `::deep` depuis `ModaleSoumission.razor.css` ne les atteint — `::deep` s'ancre sur les
   éléments que le composant rend LUI-MÊME, et la racine de ces modales est un composant, pas
   une balise.

   D'où cette feuille globale, et une discipline qui va avec :

   - elle ne s'applique QU'AUX modales du portail, par la classe `portail-modale` passée en
     paramètre `Class` de `MmModal` — jamais aux modales de l'application ;
   - elle ne porte QUE des tokens `--mm-*`, comme partout ailleurs, et les DECLARATIONS des
     variables `--rm-*` du module (en fin de fichier) : globales, parce que les modales du
     portail se rendent hors du cadre `.portail` et doivent les voir aussi ;
   - tout ce qui peut vivre en CSS isolée y reste. Ce fichier n'est pas une échappatoire pour
     habiller le portail plus vite.

   Ce qu'elle corrige : la maquette dessine ses boutons de dialogue RECTANGULAIRES, avec un
   « Annuler » gris plein. Le DS les rend en pilule, « Annuler » sur fond clair. Les deux
   valeurs de la maquette existent déjà chez nous — son `--r-dlg` de 6 px est
   `--mm-radius-dialog`, son gris #86869c est `--mm-cancel` et son survol #666677 est
   `--mm-cancel-hover`. Il n'y a donc rien à inventer, seulement à choisir. */

/* Le rayon de dialogue, celui que la maquette donne à ses deux boutons de pied. */
.mm-ds-modal__box.portail-modale .mm-ds-btn {
    border-radius: var(--mm-radius-dialog);
}

/* « Annuler » en gris PLEIN, texte blanc — et non sur fond clair comme dans l'application.
   C'est la forme de la maquette, et elle équilibre le pied : deux boutons pleins, l'un neutre,
   l'autre primaire. */
.mm-ds-modal__box.portail-modale .mm-ds-btn--cancel {
    background: var(--mm-cancel);
    color: var(--mm-white);
}

.mm-ds-modal__box.portail-modale .mm-ds-btn--cancel:hover:not(:disabled) {
    background: var(--mm-cancel-hover);
    color: var(--mm-white);
}


/* ── Les variables propres au portail : --rm-* ───────────────────────────────
   Le portail suit le RENDU de sa SFD, et la ou elle s'ecarte du design system, il declare ses
   propres variables ICI, et nulle part ailleurs : aucune valeur en dur dans les feuilles des
   composants. Chacune a sa variante sombre — le portail suit le theme de MyMobil, par la
   classe .mm-dark posee sur <html>.

   - le violet de la planification et des demandes rattachees (c-plan / c-merged du
     prototype) ;
   - l'accroche de l'en-tete en 17 px (SFD v2.4), taille absente de l'echelle --mm-fs-* ;
   - le fond vert clair du panneau de publication, opaque en clair et translucide en sombre,
     ou un vert pale sous un texte blanc ne se lirait plus. */

:root {
    --rm-violet-bg: #ede9fe;
    --rm-violet-fg: #5b21b6;
    --rm-fs-17: 17px;
    --rm-publication-bg: var(--mm-success-bg);
}

:root.mm-dark {
    --rm-violet-bg: #3b2a6b;
    --rm-violet-fg: #ddd6fe;
    --rm-publication-bg: var(--mm-success-tint);
}