/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN.CSS — LE JEU DE COMPOSANTS

   ⚠ CE FICHIER N'EXISTE QUE DANS « gestacrises-test-pcs ».
   Il est le miroir de « Gestacrises-PCS » pour tout le reste, mais PAS pour la
   refonte : l'application en production ne doit pas bouger tant que celle-ci
   n'est pas jugée. Ne recopiez donc pas ce dépôt vers l'autre en bloc.

   CE QU'IL FAIT, ET CE QU'IL NE FAIT PAS
   Il ne touche à aucun balisage. Il redéfinit les classes qui existent déjà —
   .ui-btn, .btn, .gc-card, les champs, la fenêtre modale — pour qu'elles
   parlent la langue des cartes de l'accueil : une surface blanche, un liseré
   qui dit la nature, des actions en bas, des angles à dix pixels.

   IL SE CHARGE EN DERNIER, et c'est tout ce qui lui donne le dernier mot. Il
   est lié après les deux <style> d'index.html : à spécificité égale, c'est
   l'ordre qui tranche. Là où le style est écrit DANS le JavaScript — 123
   « cssText » et 151 couleurs posées à la main — la feuille ne peut rien, et
   c'est le JavaScript qu'il faut reprendre. La fenêtre modale a déjà été
   reprise (main-courante-ecrans.js) ; le reste suit, écran par écran.

   LES COULEURS VIENNENT TOUTES DE palette.js. Aucun code n'est inventé ici :
   tests/palette.test.js refuse tout code qui ne serait pas dans la palette ou
   dans la liste des couleurs héritées. Les valeurs écrites après la virgule
   dans var(…) sont les mêmes que celles de la palette, et ne servent que le
   temps d'un chargement — palette.js pose ses variables à l'exécution.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* LE CADENAS DES ETAPES FERMEES, dessine une fois et pose en masque : il
       prend la couleur du texte, donc il suit le contraste qu'on lui regle
       sans qu'on ait a le redessiner. Ce n'est pas une couleur — sa place est
       ici, dans les jetons de dessin, pas dans palette.js. */
    /* LE CHEVRON DES RUBRIQUES, meme principe : un masque qui prend la
       couleur qu'on lui donne. Il pointe vers le BAS au repos et pivote d'un
       quart de tour quand la rubrique est fermee — donc une seule image pour
       les deux etats. */
    --gc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --gc-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.2 10.5V7.8a3.8 3.8 0 0 1 7.6 0v2.7'/%3E%3C/svg%3E");

    /* Ce que la palette ne dit pas : les formes. Un rayon et une ombre se
       tiennent d'un composant à l'autre autant qu'une couleur. */
    --g-rayon: 10px;          /* boutons, champs */
    --g-rayon-sm: 8px;
    --g-rayon-lg: 16px;       /* cartes, fenêtres */
    --g-ombre-carte: 0 10px 30px rgba(23, 37, 84, 0.13);
    --g-ombre-flottant: 0 22px 60px rgba(23, 37, 84, 0.34);
    --g-trait: rgba(23, 37, 84, 0.13);
    --g-trait-fort: rgba(23, 37, 84, 0.22);
    /* L'encre douce n'existe pas dans la palette : le texte courant y est du
       noir pur (#000000, 262 emplois). Le bleu nuit dilué le remplace partout
       où il s'agit d'un corps de texte, jamais d'un titre. */
    --g-encre: var(--gc-bleu-encre, #172554);
    --g-encre-douce: rgba(23, 37, 84, 0.78);
    --g-encre-pale: rgba(23, 37, 84, 0.55);
}

/* ══ LES BOUTONS ═══════════════════════════════════════════════════════════
   Deux familles cohabitaient : .ui-btn, documentée dans index.html comme
   « modèle de référence », et .btn, plus ancienne, avec dégradés et ombres
   portées. Les 57 balises qui portaient la seconde sont passées à la première,
   et ses règles ont été retirées d'index.html. Il n'en reste qu'une.
   ══════════════════════════════════════════════════════════════════════════ */

.ui-btn,
.gc-btn-primary,
.btn-print-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--g-rayon);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ui-btn svg,
.gc-btn-primary svg,
.btn-print-pdf svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.ui-btn--sm { padding: 7px 14px; font-size: 13.5px; border-radius: var(--g-rayon-sm); }

.ui-btn--lg { padding: 14px 26px; font-size: 16.5px; border-radius: 11px; }

.ui-btn--icon { padding: 0; width: 40px; height: 40px; }

/* L'ACTION PRINCIPALE, PLEINE. Une seule par écran : c'est ce qui lui donne
   son sens. */
.ui-btn,
.ui-btn--primary,
.ui-btn--success,
.gc-btn-primary,
.btn-print-pdf {
    background: var(--gc-bleu, #1A5276);
    border-color: var(--gc-bleu, #1A5276);
    color: var(--gc-blanc, #FFFFFF);
}
.ui-btn:hover:not(:disabled),
.ui-btn--primary:hover:not(:disabled),
.ui-btn--success:hover:not(:disabled),
.gc-btn-primary:hover,
.btn-print-pdf:hover:not(:disabled) {
    background: var(--gc-bleu-fonce, #154360);
    border-color: var(--gc-bleu-fonce, #154360);
}

/* LE SECONDAIRE DEVIENT UN CONTOUR, il était un gris plein. Deux boutons
   pleins côte à côte se disputent le regard ; c'est le vide qui dit lequel
   n'est pas l'action principale. */
.ui-btn--neutral {
    background: var(--gc-blanc, #FFFFFF);
    border-color: rgba(26, 82, 118, 0.45);
    color: var(--gc-bleu, #1A5276);
}
.ui-btn--neutral:hover:not(:disabled) {
    background: var(--gc-fond-tres-clair, #F8F9FA);
    border-color: var(--gc-bleu, #1A5276);
}

/* L'orange garde son rôle : amender, reprendre. Ce n'est pas une alerte.

   IL PORTE UNE ENCRE SOMBRE, comme le bouton « Préparer la crise » de la barre
   et pour la même raison : blanc sur #E67E22, le contraste tombe à 2,85:1 —
   sous le seuil AA, et c'était déjà vrai avant la refonte. Le bleu nuit dessus
   donne 6,3:1. C'est le seul bouton plein de l'application dont le texte n'est
   pas blanc, et c'est l'orange qui l'impose, pas un choix de style. */
.ui-btn--accent {
    background: var(--gc-exercice, #E67E22);
    border-color: var(--gc-exercice, #E67E22);
    color: var(--gc-bleu-encre, #172554);
}
.ui-btn--accent:hover:not(:disabled) {
    background: var(--gc-attention, #F39C12);
    border-color: var(--gc-attention, #F39C12);
    color: var(--gc-bleu-encre, #172554);
}

/* LE DESTRUCTIF FAIT L'INVERSE DU PRINCIPAL : contour au repos, plein au
   survol. Un bouton rouge posé en permanence sur l'écran crie sans raison ;
   il ne doit devenir alarmant qu'au moment où le doigt s'en approche. */
.ui-btn--danger {
    background: var(--gc-blanc, #FFFFFF);
    border-color: rgba(192, 57, 43, 0.5);
    color: var(--gc-urgence, #C0392B);
}
.ui-btn--danger:hover:not(:disabled) {
    background: var(--gc-urgence, #C0392B);
    border-color: var(--gc-urgence, #C0392B);
    color: var(--gc-blanc, #FFFFFF);
}

/* Un bouton éteint ne se grise pas par transparence : à 50 % d'opacité sur un
   fond photo, il devient illisible sans cesser d'avoir l'air cliquable. */
.ui-btn:disabled,
.gc-btn-primary:disabled,
.btn-print-pdf:disabled {
    background: rgba(23, 37, 84, 0.055);
    border-color: rgba(23, 37, 84, 0.10);
    color: var(--g-encre-pale);
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

.ui-btn:focus-visible,
.gc-btn-primary:focus-visible,
.btn-print-pdf:focus-visible {
    outline: 3px solid var(--gc-bleu, #1A5276);
    outline-offset: 2px;
}

/* ══ LES CHAMPS ════════════════════════════════════════════════════════════ */

.mc-input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    padding: 11px 13px;
    border: 1.5px solid var(--g-trait-fort);
    border-radius: var(--g-rayon);
    background: var(--gc-blanc, #FFFFFF);
    font-family: inherit;
    font-size: 15px;
    color: var(--g-encre);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.mc-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--g-encre-pale); }

/* L'ANNEAU DE FOCUS EST LARGE ET COLORÉ, pas un liseré d'un pixel : sur un
   écran de crise, on tabule vite et il faut voir où l'on est. */
.mc-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gc-bleu, #1A5276);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.16);
}

/* ══ LES CARTES ════════════════════════════════════════════════════════════
   .gc-card portait un en-tête en dégradé gris-bleu qui pesait autant que son
   contenu alors qu'il ne tient qu'un titre. Il devient blanc, et c'est un
   liseré en haut de la carte qui dit sa nature — comme sur l'accueil.
   ══════════════════════════════════════════════════════════════════════════ */

.gc-card {
    border: 1px solid var(--g-trait);
    border-top: 4px solid var(--gc-bleu, #1A5276);
    border-radius: var(--g-rayon-lg);
    box-shadow: var(--g-ombre-carte);
}

.gc-card__head {
    background: transparent;
    padding: 18px 22px 0;
    align-items: flex-start;
}

.gc-card__title {
    color: var(--g-encre);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* L'ÉTAT SE DIT EN TEXTE, PAS EN GÉLULE. Une pastille colorée fait un
   troisième objet à lire là où un point de couleur suffit à porter le sens. */
.gc-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--gc-valide, #1E8449);
    font-size: 13.5px;
    font-weight: 700;
}
.gc-card__badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.gc-card__body { padding: 14px 22px 22px; }

.gc-block {
    border: 1px solid var(--g-trait);
    border-radius: var(--g-rayon);
    background: var(--gc-fond-tres-clair, #F8F9FA);
}
.gc-block__title { color: var(--g-encre); font-weight: 700; }

/* ══ LA FENÊTRE MODALE ═════════════════════════════════════════════════════
   Son gabarit est écrit dans main-courante-ecrans.js et a été repris pour
   poser les classes ci-dessous. Toutes les fenêtres de l'application sortent
   de cette seule fonction : les habiller ici les habille toutes.
   ══════════════════════════════════════════════════════════════════════════ */

.mc-modal-overlay { background: rgba(23, 37, 84, 0.52) !important; }

.mc-modal {
    border-radius: var(--g-rayon-lg) !important;
    border-top: 4px solid var(--gc-bleu, #1A5276);
    box-shadow: var(--g-ombre-flottant) !important;
    overflow: hidden;
}

/* Le liseré dit la nature de la fenêtre AVANT qu'on lise son titre. Les noms
   viennent de « config.type », qui était passé partout et ignoré. */
.mc-modal.est-alerte { border-top-color: var(--gc-exercice, #E67E22); }
.mc-modal.est-danger { border-top-color: var(--gc-urgence, #C0392B); }
.mc-modal.est-valide { border-top-color: var(--gc-valide, #1E8449); }

.gc-modale-haut {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 0;
}

.gc-modale-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 82, 118, 0.10);
    color: var(--gc-bleu, #1A5276);
}
.est-alerte .gc-modale-icone { background: rgba(230, 126, 34, 0.12); color: var(--gc-exercice, #E67E22); }
.est-danger .gc-modale-icone { background: rgba(192, 57, 43, 0.10); color: var(--gc-urgence, #C0392B); }
.est-valide .gc-modale-icone { background: rgba(30, 132, 73, 0.10); color: var(--gc-valide, #1E8449); }
.gc-modale-icone svg { width: 22px; height: 22px; }

.gc-modale-titre {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--g-encre);
}

.gc-modale-corps { padding: 14px 24px 4px; }
.gc-modale-texte {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--g-encre-douce);
    white-space: pre-line;
}

.gc-modale-pied {
    padding: 16px 24px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
    border-top: 1px solid var(--g-trait);
    background: var(--gc-blanc, #FFFFFF);
}

/* Le bloc de pièce jointe, dans la même langue que le dépôt de PCS. */
.gc-modale-fichier {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 2px dashed rgba(26, 82, 118, 0.35);
    border-radius: var(--g-rayon);
    background: rgba(26, 82, 118, 0.045);
}
.gc-modale-fichier-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 9px;
    border: 1.5px solid var(--gc-bleu, #1A5276);
    border-radius: var(--g-rayon);
    background: var(--gc-blanc, #FFFFFF);
    color: var(--gc-bleu, #1A5276);
    cursor: pointer;
}
.gc-modale-fichier-bouton:hover { background: var(--gc-fond-tres-clair, #F8F9FA); }
.gc-modale-fichier-nom { font-size: 13.5px; font-weight: 700; color: var(--g-encre); }
.gc-modale-fichier-etat { margin-top: 2px; font-size: 12.5px; color: var(--g-encre-pale); word-break: break-word; }
.gc-modale-compteur { text-align: right; font-size: 12.5px; color: var(--g-encre-pale); }

@media (prefers-reduced-motion: reduce) {
    .ui-btn, .gc-btn-primary, .btn-print-pdf,
    .mc-input, input, select, textarea { transition: none; }
}

/* ══ LA CARTE D'ÉCRAN ══════════════════════════════════════════════════════
   « Démarrer la gestion de crise », « Auditer le PCS », « Convertir » avaient
   la même forme : un titre et un rectangle en pointillés posés séparément au
   milieu de la photo, sans rien qui les rattache l'un à l'autre. Le vide entre
   les deux n'était pas du calme — c'était une tâche qu'on n'avait pas fini de
   dessiner.

   Les trois tiennent maintenant dans une seule carte : icône, titre, ce que
   l'écran attend, la zone de dépôt, et les actions au bas. Le gabarit est
   construit par carteEcran(), dans pcs-md-loader.js.
   ══════════════════════════════════════════════════════════════════════════ */

.gc-ecran {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: 24px 26px 26px;
    border-radius: var(--g-rayon-lg);
    border: 1px solid var(--g-trait);
    border-top: 4px solid var(--gc-bleu, #1A5276);
    /* Assez opaque pour que le texte ne dépende pas de ce qu'il y a derrière :
       une carte translucide sur des flammes, c'est un fond qui bouge sous les
       lettres selon l'écran. */
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--g-ombre-carte);
    text-align: left;
}

.gc-ecran-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.gc-ecran-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 82, 118, 0.10);
    color: var(--gc-bleu, #1A5276);
}
.gc-ecran-icone svg { width: 22px; height: 22px; }

/* L'étape se dit en haut à droite, comme l'état d'une carte de l'accueil.
   L'écran ne disait pas combien de temps la préparation allait prendre. */
.gc-ecran-etape {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--g-encre-pale);
}

.gc-ecran-titre {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--g-encre);
    text-align: left;
}

.gc-ecran-chapeau {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--g-encre-douce);
}

.gc-ecran-actions {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* La flèche de retour se pose SUR la carte, pas au-dessus : elle appartient à
   l'écran qu'elle quitte. */
.gc-ecran-retour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--g-rayon-sm);
    background: rgba(26, 82, 118, 0.09);
    color: var(--gc-bleu, #1A5276);
    text-decoration: none;
}
.gc-ecran-retour:hover { background: rgba(26, 82, 118, 0.16); }

/* ══ LA ZONE DE DÉPÔT ══════════════════════════════════════════════════════
   Elle flottait sur la photo, avec sa propre largeur et sa propre marge. Dans
   la carte, elle n'a plus à se centrer elle-même — elle occupe la largeur
   qu'on lui donne.
   ══════════════════════════════════════════════════════════════════════════ */

.gc-ecran .upload-zone {
    max-width: none;
    margin: 16px 0 0;
    padding: 24px 20px;
    border: 2px dashed rgba(26, 82, 118, 0.35);
    border-radius: var(--g-rayon);
    background: rgba(26, 82, 118, 0.045);
}
.gc-ecran .upload-zone:hover:not(.disabled) {
    border-color: var(--gc-bleu, #1A5276);
    background: rgba(26, 82, 118, 0.08);
}

/* La contrainte est SOUS la consigne, pas à côté : « 400 Ko max. » était une
   deuxième ligne d'égale importance, lue avant d'avoir compris ce qu'on doit
   déposer. */
.gc-depot-consigne { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--g-encre); }
.gc-depot-limite { margin: 4px 0 0; font-size: 13.5px; font-weight: 400; color: var(--g-encre-pale); }
.gc-depot-charge {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gc-valide, #1E8449);
}

.gc-ecran .pcs-row { margin: 0; display: flex; flex-direction: column; gap: 10px; }

/* Les états d'une conversion, dits dans la carte. Ils étaient écrits en style
   direct dans pcs-md-loader.js — donc hors d'atteinte de cette feuille. */
.gc-etat-echec   { margin: 0; font-size: 14px; font-weight: 700; color: var(--gc-urgence, #C0392B); }
.gc-etat-marche  { margin: 0; font-size: 14px; font-weight: 700; color: var(--gc-valide, #1E8449); }
.gc-etat-attente { margin: 0; font-size: 14px; font-weight: 700; color: var(--gc-bleu, #1A5276); }
.gc-etat-fait    { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--gc-valide, #1E8449); }

/* ══ LA BARRE LATÉRALE ═════════════════════════════════════════════════════
   Chaque bouton portait un contour blanc de deux pixels et une ombre portée.
   Douze boutons, douze cadres blancs sur un fond bleu : c'est le contour qu'on
   voyait, pas la fonction. Le rail cessait d'être une colonne pour devenir une
   collection d'objets encadrés.

   Le contour part. Ce qui distingue une ligne, c'est sa PLACE dans un groupe
   et son ÉTAT — plus sa couleur.

   UNE SEULE COULEUR SURVIT, ET C'EST LE ROUGE. La barre en portait trois :
   orange pour « Préparer », vert pour « Piloter », rouge pour « Nouvelle
   crise ». Trois couleurs, c'est zéro repère — rien ne se détache quand tout
   se détache. Les deux premières annonçaient une étape du travail, que
   l'en-tête de groupe dit désormais, et mieux. La troisième annonce un
   EFFACEMENT : elle prévient de quelque chose, et elle est la seule.

   ⚠ TOUT CE BLOC EST PRÉFIXÉ « #mainSidebar », ET L'ORDRE Y FAIT LOI.
   Le piège s'est déjà refermé : une remise à zéro « #mainSidebar .sidebar-btn
   { background: transparent } » écrase une identité écrite
   « .sidebar-btn.sidebar-btn--piloter » — un identifiant bat deux classes, et
   le vert avait disparu SANS QU'AUCUN DES 412 TESTS NE LE VOIE. Le rouge de
   « Nouvelle crise » vit sous la même menace : il est écrit avec le même
   préfixe, et APRÈS l'état actif comme après le survol.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 — LA REMISE À ZÉRO : plus de cadre, plus d'ombre. */
#mainSidebar .sidebar-btn,
#mcSidebar .sidebar-btn {
    border: 1px solid transparent;
    border-radius: var(--g-rayon);
    background: transparent;
    box-shadow: none;
    font-weight: 600;
}

/* 2 — LE SURVOL ne grossit plus le bouton. « transform: scale(1.08) » faisait
   sauter la ligne entière quand la barre est dépliée : les libellés voisins
   bougeaient sous le curseur. Un fond suffit à dire qu'on est dessus. */
#mainSidebar .sidebar-btn:hover:not(.sidebar-active):not(.sidebar-disabled),
#mcSidebar .sidebar-btn:hover:not(.sidebar-active):not(.sidebar-disabled) {
    background: var(--gc-marine-clair, #1D5473);
    transform: none;
    box-shadow: none;
}

/* 3 — L'ÉCRAN OÙ L'ON EST : un fond blanc plein, le marine dessus. C'est le
   seul bloc blanc de la barre, donc le seul endroit où l'œil se pose. */
#mainSidebar .sidebar-btn.sidebar-active,
#mcSidebar .sidebar-btn.sidebar-active {
    background: var(--gc-blanc, #FFFFFF);
    color: var(--gc-marine, #153E56);
    box-shadow: none;
    font-weight: 700;
}

/* 4 — VERROUILLÉ : l'encre s'éteint, le fond ne bouge pas.
   Le voile blanc à 14 % faisait paraître la ligne SOULEVÉE — l'inverse de ce
   qu'il annonçait, le relief blanc étant justement la marque de la rubrique
   ouverte. 4,66:1 sur le marine, contre 8,57:1 pour une ligne ouverte. */
#mainSidebar .sidebar-btn.sidebar-disabled,
#mcSidebar .sidebar-btn.sidebar-disabled {
    background: transparent;
    color: var(--gc-rail-eteint, #8AABBE);
    box-shadow: none;
}

/* 5 — « NOUVELLE CRISE », ET ELLE SEULE. Elle efface la crise en cours, ici
   et sur les postes qui la consultent. Blanc sur #C0392B = 5,44:1.
   Écrite en dernier : à poids égal (un identifiant + deux classes), c'est
   l'ordre qui tranche, et elle doit l'emporter sur le survol. */
#mainSidebar .sidebar-btn.sidebar-btn--reset,
#mainSidebar .sidebar-btn.sidebar-btn--reset:hover {
    background: var(--gc-urgence, #C0392B);
    color: var(--gc-blanc, #FFFFFF);
}
#mainSidebar .sidebar-btn.sidebar-btn--reset:not(.sidebar-disabled):hover {
    background: var(--gc-urgence-foncee, #A93226);
}

/* « Retour à l'accueil » n'a rien à défendre : transparent, comme les autres.
   Son fond rouge au survol est parti avec les couleurs du menu — il annonçait
   un danger là où il n'y en a pas : la session est conservée. */
#mainSidebar .sidebar-btn.sidebar-btn--fermer { background: transparent; }

/* L'icône ne porte plus d'ombre portée : sur un aplat, elle salit le trait. */
#mainSidebar .sidebar-btn svg,
#mcSidebar .sidebar-btn svg { filter: none; }

/* Le séparateur se fait plus discret, à la mesure du reste. */
#mainSidebar .sidebar-separator { background: rgba(255, 255, 255, 0.16); }

/* ── LES TITRES DE GROUPE ET LA MARQUE ────────────────────────────────────
   Ils n'existent qu'à l'état déplié (cf. index.html). Le trait au-dessus
   sépare les groupes sans encadrer les lignes : trois traits pour onze
   commandes, au lieu de onze cadres.
   ────────────────────────────────────────────────────────────────────── */

#mainSidebar .rail-marque {
    padding: 12px 12px 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .045em;
    color: var(--gc-blanc, #FFFFFF);
    flex-shrink: 0;
}
/* « PCS » DOIT SE LIRE, PAS SE DEVINER.
   Le suffixe portait le gris des anciens titres de groupe — 4,9:1, correct
   pour un libelle de dix pixels, trop faible pour un nom d'application pose
   a cote d'un mot en blanc plein. Il passe au blanc a 82 %, soit 6,4:1 : en
   retrait de « GESTACRISES », et lisible d'un coup d'oeil. */
#mainSidebar .rail-marque span {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: .03em;
}

/* LE SEPARATEUR DE GROUPE : DU VIDE, ET RIEN D'AUTRE.
   Il a porte un titre, puis un trait, et les deux sont partis pour la meme
   raison : ils nommaient ou soulignaient un groupement que les libelles
   disent deja. Reste l'espace — c'est le plus discret des separateurs, et il
   suffit. Quatorze pixels : assez pour qu'on voie trois familles, trop peu
   pour qu'on voie une coupure. */
#mainSidebar .rail-groupe {
    height: 14px;
    flex-shrink: 0;
}

/* LE PIED POUSSE « Retour à l'accueil » EN BAS, quelle que soit la hauteur.
   « margin-top: auto » sur un enfant flex : le vide se met au-dessus de lui,
   pas au-dessous — sinon la sortie flottait au milieu sur un grand écran. */
/* LE PIED, ET L'ECART ENTRE SES DEUX SORTIES.
   « Retour a l'accueil » et « Nouvelle crise » se touchaient : deux pixels
   entre une sortie sans consequence et un effacement, c'est deux pixels de
   trop — le doigt qui vise l'une frole l'autre. Dix pixels les separent, et
   ils sont ecrits ICI, une seule fois : la distance est une affaire de pied,
   pas de bouton. */
#mainSidebar .rail-pied {
    margin-top: auto;
    /* Le filet du pied s'en va avec les autres. C'est la place laissee
       au-dessus — quatorze pixels, comme entre deux groupes — qui separe les
       sorties du travail. */
    padding-top: 14px;
    padding-bottom: 4px;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ══ LA FENÊTRE « PILOTES DE LA CRISE » ════════════════════════════════════
   Elle disait la même chose que les autres, mais en prose : trois paragraphes
   pour expliquer trois rôles, puis une liste, puis un champ. On lisait quatre
   lignes avant de comprendre qu'il y avait quelque chose à faire.

   Les trois rôles deviennent un tableau — un nom, une phrase — et la règle
   qui les gouverne (« un seul pilote à la fois ») passe dans un encart : elle
   ne se démontre pas, elle se rappelle. Le reste est une suite de rubriques :
   qui pilote, qui ajouter. Rien de nouveau n'est dit ; ce qui était dit est
   rangé.
   ══════════════════════════════════════════════════════════════════════════ */

/* La croix de la fenêtre. Le pied porte déjà « Fermer » : celle-ci sert au
   geste rapide, celui qu'on fait sans lire — donc elle est discrète au repos
   et ne se colore qu'à l'approche. */
.gc-modale-croix {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--g-rayon-sm);
    background: transparent;
    color: var(--g-encre-pale);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.gc-modale-croix:hover { background: rgba(23, 37, 84, 0.07); color: var(--g-encre); }
.gc-modale-croix:focus-visible { outline: 3px solid var(--gc-bleu, #1A5276); outline-offset: 2px; }

.cp-modale-soustitre {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--g-encre-douce);
}

/* LES TROIS RÔLES. Un nom à gauche, ce qu'il permet à droite : on cherche son
   propre rôle dans la colonne des noms, on n'a pas à relire la phrase entière
   pour savoir si elle parle de soi. */
.cp-roles { margin: 0 0 14px; }
.cp-roles > div {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 8px 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--g-trait);
}
.cp-roles > div:last-child { border-bottom: none; }
.cp-roles dt { font-size: 14px; font-weight: 700; color: var(--g-encre); }
.cp-roles dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--g-encre-douce); }

/* L'encart de règle. Bleu très pâle : ce n'est ni une alerte ni une action,
   c'est ce qu'il faut avoir en tête avant d'ajouter quelqu'un. */
.cp-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(26, 82, 118, 0.20);
    border-radius: var(--g-rayon);
    background: rgba(26, 82, 118, 0.055);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--g-encre);
}
.cp-info svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: var(--gc-bleu, #1A5276); }

.cp-rubrique {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gc-titre, #14405A);
}
.cp-rubrique + .cp-rubrique,
#cpAdminsListe .cp-ligne + .cp-rubrique { margin-top: 16px; }

/* LA LIGNE D'UN PILOTE. Une seule marque dans cette fenêtre : celui qui tient
   la main. Elle était portée par un aplat vert, qui faisait de la ligne un
   état de réussite — elle ne dit pas que tout va bien, elle dit qui écrit.
   Un lavis bleu, le liseré de l'application, et un point de couleur suffisent. */
#cpAdminsListe .cp-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    margin-bottom: 8px;
    border: 1px solid var(--g-trait);
    border-radius: var(--g-rayon);
    background: var(--gc-blanc, #FFFFFF);
}
#cpAdminsListe .cp-ligne:last-child { margin-bottom: 0; }
#cpAdminsListe .cp-ligne--actif {
    border-color: rgba(26, 82, 118, 0.38);
    background: rgba(26, 82, 118, 0.055);
}

.cp-identite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cp-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 82, 118, 0.10);
    color: var(--gc-bleu, #1A5276);
}
.cp-avatar svg { width: 16px; height: 16px; }
.cp-mail { font-size: 14px; font-weight: 600; color: var(--g-encre); word-break: break-all; }

/* Le repère de l'état, dessiné comme .gc-card__badge : un point, un mot. */
.cp-marque {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--gc-bleu, #1A5276);
}
.cp-marque::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.cp-etiquette {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-encre-douce);
}
.cp-ajout { display: flex; gap: 10px; align-items: flex-start; }
.cp-ajout .mc-input { flex: 1; min-width: 0; }

/* Sous 560 px, la ligne d'ajout se plie : un champ d'adresse et un bouton
   côte à côte ne laissent plus assez de place pour lire ce qu'on tape. */
@media (max-width: 560px) {
    .cp-roles > div { grid-template-columns: 1fr; gap: 2px; }
    .cp-ajout { flex-direction: column; }
    .cp-ajout .ui-btn { width: 100%; }
    #cpAdminsListe .cp-ligne { flex-wrap: wrap; }
}