/* Styles globaux. Tout ce qui relève d'un écran WEBDEV donné vit dans le CSS
   isolé du composant correspondant, au plus près de sa géométrie d'origine. */

/* ============================================================================
   CHARTE « PORCELAINE » — appliquée le 16 août 2026, au choix du client parmi
   les trois propositions de `propositions-chartes.html` (planche A).

   TOUTE la charte tient dans ce bloc : les feuilles isolées ne portent plus
   une seule couleur en dur, elles puisent ici. Revenir à l'apparence WEBDEV
   d'origine = restaurer `_avant-charte-porcelaine-2026-08-16.zip` (racine du
   dossier), qui contient app.css et les douze feuilles isolées d'avant.

   Les positions des champs ne relèvent PAS de la charte : les blocs générés
   par tools/ihm/gen-css.sh restent intouchés, au pixel des sources.

   Deux réglages indépendants de la charte, actés avec elle : l'aération des
   lignes de tableau (--e-cellule-pad, --e-th-pad) et la taille de police
   (--e-taille), tous deux montrés ainsi sur la planche retenue.
   ============================================================================ */
:root {
    /* Fonds et cadre du gabarit */
    --e-page: #EDF0F4;          /* hors gabarit — remplace #DCDCDC */
    --e-chrome: #FFFFFF;        /* bandeaux haut et bas — remplace #DCDCDC */
    --e-chrome-texte: #3A424C;
    --e-chrome-filet: #E3E6EB;  /* liseré sous l'en-tête, sur le pied */
    --e-cadre: #D6DBE2;         /* bord du gabarit — remplace #A8A8A8 */
    --e-rayon: 10px;
    --e-ombre: 0 1px 3px rgba(30, 41, 59, .10);
    --e-travail: #FFFFFF;

    /* Texte */
    --e-texte: #3A424C;         /* remplace #5C5C5C */
    --e-sourd: #7C8894;         /* texte secondaire — remplace #7A7A7A */
    --e-police: "Segoe UI", -apple-system, system-ui, Arial, sans-serif;
    --e-taille: 12.5px;         /* remplace 9pt */
    --e-titre: #1F2733;         /* titres d'écran — remplacent le #000080 */
    --e-titre-graisse: 600;

    /* Action et liens */
    --e-accent: #2456A6;        /* LE bleu de la charte, réservé aux actions */
    --e-lien: #2456A6;          /* remplace #055694 */

    /* Menu principal : le bandeau plein disparaît, les entrées vivent
       sur le blanc de l'en-tête */
    --e-menu-fond: transparent; /* remplace #000080 */
    --e-menu-texte: #3A424C;
    --e-menu-hover: #EDF2FA;    /* remplace #055694 */
    --e-menu-inactif: #A9B2BD;  /* pages en chantier — remplace #A8B4D0 */

    /* Boutons */
    --e-btn-fond: #FFFFFF;
    --e-btn-texte: #3A424C;     /* remplace #000080 */
    --e-btn-bord: #C6CCD4;      /* remplace #000080 */
    --e-btn-rayon: 7px;
    --e-btn-taille: 11.5px;     /* remplace 8pt */
    --e-prim-fond: #2456A6;     /* bouton principal — remplace le navy plein */
    --e-prim-hover: #1D4A93;
    --e-prim-texte: #FFFFFF;

    /* Champs de saisie */
    --e-champ-bord: #C6CCD4;    /* remplace #A0A0A0 */
    --e-champ-fond: #FFFFFF;
    --e-champ-rayon: 5px;       /* plus serré que les boutons : un champ
                                   arrondi comme un bouton semble cliquable */
    --e-lecture-fond: #F3F5F7;  /* champs en lecture seule — remplace #F2F2F2 */
    --e-inactif-bord: #D5DAE0;  /* bordures désactivées — remplace #A0A0A0 */
    --e-inactif-texte: #A5AEB8; /* texte désactivé — remplace #A0A0A0 */

    /* Panneaux : les cellules grisées des fiches (en-tête, pied) */
    --e-panneau: #F6F8FA;       /* remplace #E0E0E0 */

    /* Tableaux */
    --e-table-bord: #E0E4E9;    /* remplace #A0A0A0 */
    --e-th-fond: #F6F8FA;       /* en-tête clair — remplace #000080 */
    --e-th-texte: #5A6472;      /* remplace #FFFFFF */
    --e-th-filet: #D8DDE4;      /* le filet appuyé sous l'en-tête */
    --e-th-hover: #EDF1F5;      /* remplace #055694 */
    --e-ligne: #EEF0F3;         /* filets de lignes — remplacent #E8E8E8 */
    --e-sel: #DDE8F8;           /* survol et sélection — remplacent #C3DBF9 */
    --e-cellule-pad: 6px 8px;   /* remplace 3px 6px */
    --e-th-pad: 7px 8px;        /* remplace 4px 6px */

    /* Sémantique — hors charte : mêmes valeurs qu'avant, seulement nommées.
       L'erreur et le succès ne changent pas d'habit avec la décoration. */
    --e-erreur: #A80000;
    --e-erreur-fond: #FDE7E9;
    --e-succes: #2E7D32;
    --e-succes-fond: #E8F5E9;
    /* L'avertissement (17 septembre 2026) : l'écriture a eu lieu, il reste
       quelque chose à dire. Ambre sombre sur ambre pâle — contraste calculé
       6,5:1, au-dessus des 4,5:1 qu'exige un texte courant. */
    --e-avert: #7A4F00;
    --e-avert-fond: #FFF4D6;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--e-page);
    font-family: var(--e-police);
    font-size: var(--e-taille);
    color: var(--e-texte);
}

h1:focus {
    outline: none;
}

/* --- Confort de saisie, demandé en recette le 13 août 2026 -------------------

   Ces trois règles valent pour TOUS les écrans, et vivent donc ici plutôt que
   recopiées dans huit feuilles isolées. Elles ne touchent qu'à l'aération : ni
   la géométrie des champs, ni leur position, qui restent celles des sources. */

/* Le texte des boutons collait à la bordure. Le remplissage est posé ici parce
   qu'aucune feuille d'écran ne le déclare — les règles « .page-xxx button » ne
   fixent que la bordure, les couleurs et l'alignement. */
button,
a.bouton {
    padding: 2px 10px;
}

/* Les pictogrammes étaient minuscules dans des boutons de 48 px de côté : le
   caractère héritait des 8 pt du bouton. On ne grossit que le SYMBOLE, pas le
   bouton — sa géométrie vient des sources et ne doit pas bouger. */
button > span[aria-hidden="true"] {
    font-size: 15pt;
    line-height: 1;
}

/* Le dernier chiffre de l'année était coupé dans les champs date : Chrome
   dimensionne « input[type=date] » sur sa police, et 8 pt ne suffisait pas au
   gabarit jj/mm/aaaa augmenté de l'icône de calendrier. Passé de 118 à 126 px
   avec la charte Porcelaine : Segoe UI 12,5 px est plus large que l'ancienne
   police des champs. */
input[type="date"] {
    min-width: 126px;
}

.invalid {
    outline: 1px solid var(--e-erreur);
}

.validation-message {
    color: var(--e-erreur);
}

.blazor-error-boundary {
    padding: 1rem;
    background-color: #B32121;
    color: #FFFFFF;
}

.blazor-error-boundary::after {
    content: "Une erreur s'est produite.";
}

/* Bandeau d'erreur non gérée de Blazor.

   IL DOIT ÊTRE MASQUÉ PAR DÉFAUT : le balisage est posé en clair dans les deux
   gabarits, et c'est Blazor qui le révèle en cas d'erreur, en forçant son
   affichage. Ces règles avaient disparu quand app.css a été réécrit pour
   l'apparence WEBDEV — le bandeau restait donc affiché en permanence, dès
   l'écran de connexion, et sans « position: fixed » il s'insérait DANS LE FLUX
   au lieu de flotter, décalant la mise en page des écrans.

   Constaté le 12 août 2026, à la première ouverture du site. */
#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: #FFFFE0;
    color: var(--e-texte);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}