/*
 * [T4 C-4-1 2026-09-30 · Claude Opus 5.5] FEUILLE PROPRE DES LAYOUTS D'EPE.
 *
 * Chargée par base.html.twig EN DERNIER, après :
 *   1. les utilitaires de Bootstrap 5.3.3 (AssetMapper, même paquet qu'ABC-4-2),
 *      première feuille de la page ;
 *   2. la feuille compilée Bootstrap 4.5.2 d'Encore (app.20231023.css pour le site,
 *      2.b3917bb3.css + manager.cd9e3e4c.css pour l'administration), qui reste en place
 *      (décision du 30/09/2026 : rien de compilé n'est retiré d'EPE,
 *      Q-72 et Q-03 ouvertes).
 *
 * Deux parties :
 *   A. les classes qui remplacent les styles en ligne de l'habillage (valeurs reprises
 *      à l'identique des attributs style="…" retirés) ;
 *   B. l'accessibilité de l'habillage : lien d'évitement, contrastes (WCAG 2.1 AA,
 *      1.4.3 : 4,5:1 pour le texte courant), mesurés par axe-core au navigateur.
 */

/* [hors-planning ABC-4-34 L4] Règle unique des listes déroulantes. */
@import url("composants/listes-deroulantes-wNr99ZP.css");
/* [hors-planning ABC-4-34 L5] Jetons --ds-* et composants communs (carte, detail__*, etat-info). */
@import url("composants/jetons-ZvFjTS9.css");
@import url("composants/detail-OtCSfdV.css");
@import url("composants/echange-9l9yKHk.css");
/* [ABC-4-108] Style commun des tableaux de données. */
@import url("composants/tableaux-ibd7X1L.css");
@import url("composants/niveaux-ymemVDV.css");
/* [ABC-4-235] Passerelles vers les autres sites de l'écosystème. */
@import url("composants/passerelles-5czYeL7.css");
/* [ABC-4-237] Défi anti-robot Cloudflare Turnstile (_composants/defi/_turnstile.html.twig) : jamais plus large que le formulaire. */
@import url("composants/defi-anti-robot-qEc1496.css");
/* [C-4-204] Boutons de tout l'espace d'administration : une seule règle (hauteur, typographie, espacement, états). */
@import url("composants/boutons-admin-vg80q_F.css");
/* [C-R-77] Bouton « Afficher » d'un mot de passe, intégré au champ, sur tout le site. */
@import url("composants/mot-de-passe-u9neqnP.css");


/* ── A. Styles en ligne de l'habillage, passés en classes ─────────────────────── */

/* app/_common/_header.html.twig — était style="height: 90px" */
.logo-entete {
    height: 90px;
}

/* manager/_common/_sidebar.html.twig — était style="width: 10rem" */
.logo-barre-laterale {
    width: 10rem;
}

/* app/_common/_footer.html.twig — EUSEP et RIF, était style="height: 60px" */
.logo-marque {
    height: 60px;
}

/* base.html.twig — bandeau cookies, était style="position: fixed; bottom: 0" */
.cookiealert {
    position: fixed;
    bottom: 0;
}

/* C-R-75 : fond sombre — les liens restent blancs (a{color:var(--blue)!important} les rendait bleu sur noir, 2,4:1). */
.cookiealert a,
.cookiealert a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* ── B. Accessibilité de l'habillage ──────────────────────────────────────────── */

/*
 * Lien d'évitement : caché par visually-hidden-focusable (Bootstrap 5) tant qu'il n'a
 * pas le focus ; au focus, une boîte lisible par-dessus la barre fixe du site
 * (z-index 1030 pour .fixed-top) et la barre latérale du manager.
 */
.lien-d-evitement:focus,
.lien-d-evitement:focus-visible {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    padding: .5rem 1rem;
    background-color: #fff;
    color: #212529 !important;
    border: 2px solid #212529;
    border-radius: .25rem;
    text-decoration: underline;
}

/* La cible du lien reçoit le focus par programme : pas de cadre autour de toute la page. */
#contenu-principal:focus {
    outline: none;
}

/*
 * Pied de page du site public : le texte et les « Liens utiles » étaient blancs à 70 %
 * sur le bleu #005c97 (feuille compilée, `footer .epe-categories a, footer
 * div:first-child`, en !important), soit #b3cee0 : 4,3:1, sous le seuil de 4,5:1 —
 * 18 éléments en défaut sur chaque page (axe-core, 30/09). Blanc à 85 % : #d9e7ef,
 * 5,57:1. Même sélecteur et même !important que la règle compilée, qu'elle suit.
 */
footer .epe-categories a,
footer div:first-child {
    color: rgba(255, 255, 255, .85) !important;
}

/* ── C. Pages et composants repris par C-4-2 ──────────────────────────────────── */
/* [T4 C-4-2 2026-09-30 · Claude Opus 5.5] Mêmes principes qu'en A et B : les valeurs
 * des styles en ligne retirés sont reprises à l'identique ; les contrastes sont relevés
 * au seuil WCAG 2.1 AA, mesurés par axe-core au navigateur et recalculés par
 * tests/Unit/Twig/ContrastesDesPagesTest.php. */

/* R20 — la mention IA (_composants/_disclaimer_ia.html.twig). Visible et lisible
 * (#664d03 sur #fff3cd : 7,3:1), comme dans EUSEP et RIF ; jamais masquée. */
.disclaimer-ia {
    display: block;
    margin: .5rem 0 1rem;
    padding: .5rem .75rem;
    border-left: 4px solid #997404;
    background-color: #fff3cd;
    color: #664d03;
    font-size: 1rem;
}

/* G41 : pastille avec icône en tête de la carte de la réponse. */
.disclaimer-ia {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    border-left-width: 1px;
    border: 1px solid #997404;
    padding: .15rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.disclaimer-ia__icone {
    flex: none;
    width: 14px;
    height: 14px;
}

/* [C-4-276] Badges (étiquettes) plus petits et plus discrets, toujours lisibles : taille fixe (même dans un titre h4),
 * jaune de Bootstrap remplacé par le fond clair de la mention IA (#664d03 sur #fff3cd : 7,3:1, AA). */
.badge {
    padding: .2em .5em;
    font-size: .75rem;
    font-weight: 600;
}

.badge.bg-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
    border: 1px solid #997404;
}

/* app/elected_member/details.html.twig — bandeau de la fiche d'élu, était
 * style="height: 45vh;" / style="object-fit: cover; height: 100%; width: 100%" /
 * style="padding-top: 48vh" ; numéros des cartes, était style="font-size: 19px;" */
.fiche-elu__bandeau {
    height: 45vh;
}

.fiche-elu__bandeau-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.fiche-elu__contenu {
    padding-top: 48vh;
}

.fiche-elu__numero {
    font-size: 19px;
}

/* app/elected_member/_taxes_financials.html.twig — chiffres clés.
 * En-tête de territoire, était style="padding-left: 200px".
 * Ligne de total, était style="background-color: #BB0B0B" (blanc : 6,5:1, inchangé).
 * Ligne de sous-total, était style="background-color: #1E90FF" : le blanc n'y offrait
 * que 3,2:1 ; même teinte assombrie, #0B6EBD : 5,3:1. */
/* « .table th » (Bootstrap 4, .75rem) est plus précis qu'une simple classe : la règle
 * nomme donc la cellule d'en-tête du tableau. */
.table th.entete-territoire {
    padding-left: 200px;
}

.ligne-total {
    background-color: #bb0b0b;
}

.ligne-sous-total {
    background-color: #0b6ebd;
}

/* app/elected_member/list.html.twig — vidéos, était style="height: 250px; width: 100%" */
.video-youtube {
    height: 250px;
    width: 100%;
}

/* Cartes d'élu et tuiles de catégorie : le bouton qui les ouvre au clavier (WCAG
 * 2.1.1) reprend exactement l'apparence du texte qu'il enveloppe — titre de la carte,
 * titre de la tuile —, et montre le focus. */
.carte-elu__ouvrir,
.tuile-categorie__ouvrir {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.carte-elu__ouvrir:focus-visible,
.tuile-categorie__ouvrir:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Tuiles « Noter un(e) … » : le blanc (text-white, en !important) sur du jaune (1,63:1),
 * de l'orange (2,5:1), du vert (3,13:1) ou du bleu clair (2,13:1). Ces quatre tuiles
 * passent au texte foncé de Bootstrap (#212529 : 11,3 / 7,0 / 5,1 / 8,4:1) — comme
 * les badges clairs de Bootstrap 5 (text-bg-warning). Le fond vient des données
 * (AppController::getNoteLinks) : il est reconnu par sa classe ou sa couleur. */
.tuile-categorie.badge-warning:not([style*="#"]),
.tuile-categorie.badge-success:not([style*="#"]),
.tuile-categorie[style*="#f5871f" i],
.tuile-categorie[style*="#77b5fe" i] {
    color: #212529 !important;
}

/* Fil d'Ariane, page courante : gris #6c757d sur #f8f9fa, 4,44:1 → #495057, 8,1:1. */
.breadcrumb-item.active {
    color: #495057;
}

/* Légende des tableaux de données : #6c757d sur le fond du site #f1f1f1, 4,15:1 →
 * #495057, 7,5:1. */
#contenu-principal caption {
    color: #495057;
}

/* [T5 C-5-6 2026-09-30 · Claude Opus 5.5] Communes prioritaires : code de la commune et
 * scrutin comparé, en gris .text-muted #6c757d sur #f1f1f1, 4,15:1 → #495057, 7,5:1
 * (relevé par tests/Navigateur/communes-prioritaires.mjs). Le !important répond à celui
 * de .text-muted dans la feuille compilée Bootstrap 4.5.2. */
#communes-prioritaires-tableau .text-muted {
    color: #495057 !important;
}

/* Carte du député européen, sans titre : le bouton est le nom de famille, dans sa ligne
 * « Nom : … », et garde la place qu'y avait le texte. */
.carte-elu__ouvrir--en-ligne {
    display: inline;
    width: auto;
}

/* ── D. Classes de Bootstrap 5 que la feuille compilée Bootstrap 4.5.2 ne connaît pas ── */
/* [T4 hors-planning 2026-09-30 · Claude Opus 5.5] Les gabarits passent aux classes de
 * Bootstrap 5 (barre de recherche et de filtres sur une ligne, form-select à la place
 * de form-control / custom-select). Tant que la feuille compilée Bootstrap 4.5.2 reste
 * (Q-72, Q-03), les classes de Bootstrap 5 qui ne sont PAS des utilitaires — gouttières
 * g-*, form-select, form-label — ne sont définies par aucune feuille servie : elles
 * sont posées ici, avec les valeurs de Bootstrap 5.3.3 (palette de Bootstrap 4 pour les
 * couleurs, celle du reste de la page). Le jour où la feuille complète de Bootstrap 5
 * remplace la feuille compilée, cette partie se retire telle quelle.
 * Asservi par tests/Unit/Twig/AucunReliquatBootstrap4Test.php. */

/* Gouttière .g-2 (0,5 rem) : sous Bootstrap 4, .row porte -15 px de marge et chaque
 * colonne 15 px de retrait ; Bootstrap 5 les règle par la gouttière. */
.row.g-2 {
    margin-top: -.5rem;
    margin-right: -.25rem;
    margin-left: -.25rem;
}

.row.g-2 > * {
    margin-top: .5rem;
    padding-right: .25rem;
    padding-left: .25rem;
}

/* Liste déroulante (form-select de Bootstrap 5.3.3), à la hauteur du form-control
 * de Bootstrap 4 qu'elle côtoie dans les barres de filtres. */
.form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

/* Site public : la feuille compilée arrondit les form-control en pilule (50 px de haut,
 * 25 px d'arrondi, dans .content) ; la liste déroulante voisine prend la même forme. */
.content .form-select {
    height: 50px;
    border-radius: 25px;
    padding-left: 1rem;
}

/* Libellé de formulaire (form-label de Bootstrap 5.3.3). */
.form-label {
    margin-bottom: .5rem;
}

/* _composants/liste/_recherche.html.twig — la recherche est la colonne souple de la
 * barre : sans largeur minimale, les filtres col-auto l'écrasaient à quelques pixels
 * (mesuré au navigateur, 1 280 px, quatre filtres). Sous 16 rem, ce sont les filtres
 * qui passent à la ligne, pas la recherche qui disparaît. */
.recherche-de-liste {
    min-width: min(100%, 16rem);
}

/* Tout conteneur de tableau qui défile (.table-responsive, Bootstrap 4.5.2) est
 * positionné : les <span class="visually-hidden"> des liens de tri, en position
 * absolue, n'étaient pas rognés par son overflow-x (un élément absolu n'est rogné que
 * par un ancêtre positionné) ; ils élargissaient la page sur téléphone — 635 px sur
 * /donnees-publiques/scrutins, 742 px sur /donnees-publiques/parlementaires, pour 390 px
 * d'écran — et la barre fixe comme le bandeau cookies suivaient. */
.table-responsive {
    position: relative;
}

/* ── C. [T5 ABC-5-33] FC.5 : contraste élevé, lecture audio, focus clavier ───────── */

/* Focus clavier toujours visible (WCAG 2.4.7), sur tout élément interactif. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #0b57d0;
    outline-offset: 2px;
}

/* [C-R-75] PALETTE DES BOUTONS BOOTSTRAP, sur le site comme dans l'administration (app.css est chargée en dernier partout).
 * Revue « please check every button on this site » (tests/Navigateur/boutons-contraste.mjs) : les couleurs de la feuille compilée
 * donnaient un blanc illisible sur .btn-success (3,13:1) et .btn-info (3,04:1), un gris .btn-outline-secondary à 3,72:1 sur la ligne
 * rayée d'un tableau, des boutons désactivés à 2,2:1 (opacité .65) ; sur le site public, la règle a{color:var(--blue)!important}
 * peignait en bleu le texte de tout <a class="btn btn-…"> plein (bleu sur bleu, 1,07:1 — le défaut du client). Chaque variante
 * déclare donc son texte en !important et des fonds assombris : ≥ 4,5:1 au repos, au survol / focus, actif, en contour (sur blanc et
 * sur la rayure #e5e5e5) et désactivé. Contrôlé par tests/Unit/Css/PaletteDesBoutonsTest.php. .btn-outline-light (fond sombre
 * seulement) n'est employé nulle part : laissé à Bootstrap. */
.btn-primary, a.btn-primary { color: #fff !important; background-color: #005c97; border-color: #005c97; }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus { color: #fff !important; background-color: #004a7a; border-color: #004a7a; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff !important; background-color: #003f68; border-color: #003f68; }
.btn-secondary, a.btn-secondary { color: #fff !important; background-color: #5a6268; border-color: #5a6268; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus { color: #fff !important; background-color: #4e555b; border-color: #4e555b; }
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff !important; background-color: #43494e; border-color: #43494e; }
.btn-success, a.btn-success { color: #fff !important; background-color: #1e7e34; border-color: #1e7e34; }
.btn-success:hover, .btn-success:focus, .btn-success.focus { color: #fff !important; background-color: #19692c; border-color: #19692c; }
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff !important; background-color: #155724; border-color: #155724; }
.btn-info, a.btn-info { color: #fff !important; background-color: #117a8b; border-color: #117a8b; }
.btn-info:hover, .btn-info:focus, .btn-info.focus { color: #fff !important; background-color: #0f6674; border-color: #0f6674; }
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff !important; background-color: #0c525e; border-color: #0c525e; }
.btn-warning, a.btn-warning { color: #212529 !important; background-color: #ffc107; border-color: #ffc107; }
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus { color: #212529 !important; background-color: #e0a800; border-color: #e0a800; }
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #212529 !important; background-color: #d39e00; border-color: #d39e00; }
.btn-danger, a.btn-danger { color: #fff !important; background-color: #c82333; border-color: #c82333; }
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus { color: #fff !important; background-color: #a71d2a; border-color: #a71d2a; }
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff !important; background-color: #8f1823; border-color: #8f1823; }
.btn-light, a.btn-light { color: #212529 !important; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-light:hover, .btn-light:focus, .btn-light.focus { color: #212529 !important; background-color: #e2e6ea; border-color: #e2e6ea; }
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #212529 !important; background-color: #dae0e5; border-color: #dae0e5; }
.btn-dark, a.btn-dark { color: #fff !important; background-color: #343a40; border-color: #343a40; }
.btn-dark:hover, .btn-dark:focus, .btn-dark.focus { color: #fff !important; background-color: #23272b; border-color: #23272b; }
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #fff !important; background-color: #1d2124; border-color: #1d2124; }
.btn-outline-primary, a.btn-outline-primary { color: #005c97 !important; background-color: transparent; border-color: #005c97; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus { color: #fff !important; background-color: #005c97; border-color: #005c97; }
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff !important; background-color: #004a7a; border-color: #004a7a; }
.btn-outline-secondary, a.btn-outline-secondary { color: #5a6268 !important; background-color: transparent; border-color: #5a6268; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.focus { color: #fff !important; background-color: #5a6268; border-color: #5a6268; }
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff !important; background-color: #4e555b; border-color: #4e555b; }
.btn-outline-success, a.btn-outline-success { color: #19692c !important; background-color: transparent; border-color: #19692c; }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.focus { color: #fff !important; background-color: #1e7e34; border-color: #1e7e34; }
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #fff !important; background-color: #19692c; border-color: #19692c; }
.btn-outline-info, a.btn-outline-info { color: #0f6674 !important; background-color: transparent; border-color: #0f6674; }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info.focus { color: #fff !important; background-color: #117a8b; border-color: #117a8b; }
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { color: #fff !important; background-color: #0f6674; border-color: #0f6674; }
.btn-outline-warning, a.btn-outline-warning { color: #7a5a00 !important; background-color: transparent; border-color: #7a5a00; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.focus { color: #212529 !important; background-color: #ffc107; border-color: #ffc107; }
.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #212529 !important; background-color: #e0a800; border-color: #e0a800; }
.btn-outline-danger, a.btn-outline-danger { color: #a71d2a !important; background-color: transparent; border-color: #a71d2a; }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.focus { color: #fff !important; background-color: #c82333; border-color: #c82333; }
.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #fff !important; background-color: #a71d2a; border-color: #a71d2a; }
.btn-outline-dark, a.btn-outline-dark { color: #343a40 !important; background-color: transparent; border-color: #343a40; }
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark.focus { color: #fff !important; background-color: #343a40; border-color: #343a40; }
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #fff !important; background-color: #23272b; border-color: #23272b; }
.btn-link, a.btn-link { color: #0a58ca !important; }
.btn-link:hover, .btn-link:focus { color: #084298 !important; text-decoration: underline; }
/* Désactivé : un seul aspect, gris lisible (7:1), un peu estompé, curseur interdit (C-4-204) — placé après les variantes pour l'emporter
 * sur leur survol. */
.btn:disabled, .btn.disabled, fieldset:disabled .btn { color: #495057 !important; background-color: #e9ecef !important; border-color: #adb5bd !important; opacity: .9; cursor: not-allowed; box-shadow: none; }
.btn-link:disabled, .btn-link.disabled { color: #495057 !important; background-color: transparent !important; border-color: transparent !important; }
/* Bouton rouge de l'espace (« Demander la suppression de mon compte », .red-button seul, sans .button) : le texte restait noir
 * (3,5:1, 2,58:1 au survol) ; blanc : 5,9:1, 8:1 au survol. */
.red-button { color: #fff !important; }
.red-button:hover, .red-button:focus { color: #fff !important; }

/* Bouton « Écouter » : `hidden` dans le HTML serveur, montré par ecouter.js. */
.bouton-ecouter[hidden] {
    display: none;
}

/* ABC-4-232 — barre d'actions d'une sortie IA : « Écouter » et les autres boutons d'action (et la pastille IA quand elle y
 * figure) sur une même ligne, centrés verticalement, un seul espacement (gap), retour à la ligne sans chevauchement à
 * 375 px. Sans bouton visible (hidden, pas de JavaScript), la barre disparaît : pas de marge fantôme. */
.barre-actions-ia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0;
}

.barre-actions-ia:not(:has(> :not([hidden]))) {
    display: none;
}

.barre-actions-ia > .btn,
.barre-actions-ia > .disclaimer-ia {
    margin: 0;
}

/* ── MODE CONTRASTE ÉLEVÉ (cookie contraste=eleve → classe sur <html>) ───────────────────────────────────────────────────────────
 * [C-R-104] Revue complète (client, 23/10/2026 : « beaucoup d'éléments sont difficiles à voir, le logo par exemple »). Principe :
 * fond NOIR partout, texte blanc (21:1), liens jaunes soulignés (19:1), visités cyan, contours blancs de 2 px sur tout ce qui
 * s'utilise (champs, cartes, badges, boutons), repère de focus jaune de 3 px. Chaque texte tient 7:1 au moins sur noir
 * (FeuilleAccessibiliteTest) ; chaque élément qui n'est pas du texte (icône, contour de champ ou de badge, série d'un graphique) 3:1.
 * `:not(#c)` ne change rien au ciblage : il élève la spécificité des règles de ce mode au-dessus de toute règle de la feuille
 * compilée ou d'un composant qui écrirait aussi `!important` (la « source » grise des chiffres clés, 3,5:1, la gagnait).
 * Le détail mesuré, page par page, moteur par moteur : tests/Navigateur/contraste-eleve.mjs.
 * Les graphiques lisent leurs couleurs dans les variables --gr-* et --ds-graphique-N (palette claire du mode sombre, redéfinie pour
 * ce mode dans composants/jetons.css, chiffres-cles.css et pilotage.css) : ni le canvas ni le script n'écrivent une couleur. */
html.contraste-eleve {
    color-scheme: dark;
}
html.contraste-eleve,
html.contraste-eleve body,
html.contraste-eleve *:not(#c) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Aucun dégradé ni image de fond : un dégradé clair (bandeau d'accueil) resterait visible AU-DESSUS du noir imposé et noierait le texte
 * blanc ; les listes déroulantes reprennent leur flèche native. */
html.contraste-eleve *:not(#c) {
    background-image: none !important;
}
html.contraste-eleve select:not(#c) {
    appearance: auto !important;
}

/* Icônes : le trait et le remplissage suivent la couleur du texte (blanc, ou jaune dans un lien) ; les SVG qui écrivent leur propre
 * couleur (icônes de Font Awesome, logos) ne restent plus noirs sur noir. */
html.contraste-eleve svg:not(#c):not(.leaflet-container *) [fill]:not([fill="none"]),
html.contraste-eleve svg:not(#c):not(.leaflet-container *)[fill]:not([fill="none"]) {
    fill: currentColor !important;
}
html.contraste-eleve svg:not(#c):not(.leaflet-container *) [stroke]:not([stroke="none"]),
html.contraste-eleve svg:not(#c):not(.leaflet-container *)[stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

/* Bandeau des cookies : opaque (il laissait voir le texte de la page dessous), séparé du contenu par un filet blanc. */
html.contraste-eleve .cookiealert:not(#c) {
    opacity: 1 !important;
    border-top: 2px solid #fff !important;
}

/* Liens : jaunes, toujours soulignés (jamais la couleur seule), visités cyan. */
html.contraste-eleve a:not(#c),
html.contraste-eleve a:not(#c) * {
    color: #ff0 !important;
    text-decoration: underline !important;
}
html.contraste-eleve a:not(#c):visited,
html.contraste-eleve a:not(#c):visited * {
    color: #0ff !important;
}

/* Images : un logo ou une illustration à fond transparent (le logo d'EPE est foncé sur transparent) disparaît sur du noir ;
 * elles reposent sur une plaque blanche, ce qui rend le logo à plus de 15:1. */
html.contraste-eleve img:not(#c) {
    background-color: #fff !important;
}
html.contraste-eleve a.brand img:not(#c),
html.contraste-eleve img[src*="epe-logo"]:not(#c) {
    padding: .35rem .6rem;
    border-radius: .25rem;
}

/* Pied de page : séparé du contenu par un filet blanc. */
html.contraste-eleve footer:not(#c) {
    border-top: 2px solid #fff !important;
}

/* Champs : saisie blanche sur noir, contour blanc de 2 px, texte d'exemple clair. */
html.contraste-eleve input:not(#c):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html.contraste-eleve select:not(#c),
html.contraste-eleve textarea:not(#c) {
    border: 2px solid #fff !important;
}
html.contraste-eleve ::placeholder {
    color: #d9d9d9 !important;
    opacity: 1 !important;
}
html.contraste-eleve input[type="checkbox"]:not(#c),
html.contraste-eleve input[type="radio"]:not(#c) {
    accent-color: #ff0;
}

/* Badges, pastilles et étiquettes : contour blanc, texte blanc. */
html.contraste-eleve [class*="badge"]:not(#c),
html.contraste-eleve .pastille:not(#c),
html.contraste-eleve [class*="etiquette"]:not(#c),
html.contraste-eleve .disclaimer-ia:not(#c) {
    border: 2px solid #fff !important;
}

/* BOUTONS (G20/G20.5) : jamais un aplat qui change selon le fond, et le SENS du bouton reste visible sans la seule couleur —
 * principal : jaune, contour plein de 3 px ; neutre : blanc, contour plein de 2 px ; danger : rose, contour double ; succès : vert ;
 * attention : orange ; information : bleu clair. Tous ≥ 7:1 sur noir, tous fond noir et contour de la couleur du texte. */
html.contraste-eleve .btn:not(#c),
html.contraste-eleve button:not(#c),
html.contraste-eleve .button:not(#c),
html.contraste-eleve .secondary-button:not(#c),
html.contraste-eleve input[type="submit"]:not(#c),
html.contraste-eleve input[type="button"]:not(#c),
html.contraste-eleve a.page-link:not(#c) {
    border: 2px solid #fff !important;
    border-radius: .375rem;
    color: #fff !important;
    font-weight: 600;
    opacity: 1 !important;
}
html.contraste-eleve .btn-primary:not(#c),
html.contraste-eleve .btn-outline-primary:not(#c),
html.contraste-eleve .button:not(.secondary-button):not(#c),
html.contraste-eleve button[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):not(.btn-outline-danger):not(#c) {
    color: #ff0 !important;
    border: 3px solid #ff0 !important;
}
html.contraste-eleve .btn-secondary:not(#c),
html.contraste-eleve .btn-outline-secondary:not(#c),
html.contraste-eleve .btn-light:not(#c),
html.contraste-eleve .btn-outline-light:not(#c),
html.contraste-eleve .btn-dark:not(#c),
html.contraste-eleve .btn-outline-dark:not(#c),
html.contraste-eleve .secondary-button:not(#c) {
    color: #fff !important;
    border: 2px solid #fff !important;
}
html.contraste-eleve .btn-danger:not(#c),
html.contraste-eleve .btn-outline-danger:not(#c) {
    color: #ff8080 !important;
    border: 4px double #ff8080 !important;
}
html.contraste-eleve .btn-success:not(#c),
html.contraste-eleve .btn-outline-success:not(#c) {
    color: #7dff7d !important;
    border: 3px solid #7dff7d !important;
}
html.contraste-eleve .btn-warning:not(#c),
html.contraste-eleve .btn-outline-warning:not(#c) {
    color: #ffb347 !important;
    border: 3px solid #ffb347 !important;
}
html.contraste-eleve .btn-info:not(#c),
html.contraste-eleve .btn-outline-info:not(#c) {
    color: #66d9ff !important;
    border: 3px solid #66d9ff !important;
}
html.contraste-eleve .btn-link:not(#c) {
    color: #ff0 !important;
    text-decoration: underline !important;
}
/* Désactivé : gris clair, contour en tirets (reconnaissable sans la couleur), curseur « interdit ». */
html.contraste-eleve .btn:disabled:not(#c),
html.contraste-eleve .btn.disabled:not(#c),
html.contraste-eleve button:disabled:not(#c),
html.contraste-eleve [aria-disabled="true"]:not(#c) {
    color: #d0d0d0 !important;
    border: 2px dashed #d0d0d0 !important;
    cursor: not-allowed;
}
/* Actif / sélectionné : texte souligné et contour épais. */
html.contraste-eleve .btn.active:not(#c),
html.contraste-eleve [aria-selected="true"]:not(#c),
html.contraste-eleve [aria-pressed="true"]:not(#c),
html.contraste-eleve .page-item.active .page-link:not(#c) {
    border-width: 4px !important;
    text-decoration: underline !important;
}

/* État de lecture (G10) : vert = lu, rose = non lu, toujours distincts, jamais la couleur seule (icône cerclée + texte). */
html.contraste-eleve .etat-lecture--lu:not(#c),
html.contraste-eleve .etat-lecture--lu:not(#c) * {
    color: #7dff7d !important;
}
html.contraste-eleve .etat-lecture--non-lu:not(#c),
html.contraste-eleve .etat-lecture--non-lu:not(#c) * {
    color: #ff8080 !important;
}
html.contraste-eleve .etat-lecture__icone:not(#c) {
    border: 2px solid currentColor !important;
}
/* L'étiquette entière est détachée du fond noir par un contour de sa couleur (≥ 3:1), comme les autres badges. */
html.contraste-eleve .etat-lecture:not(#c) {
    border: 2px solid currentColor !important;
    border-radius: .25rem;
    padding: 0 .3rem;
}

/* Commandes de zoom des cartes (Leaflet) : un contour blanc complet (le filet du bas seul ne les détachait pas du fond noir). */
html.contraste-eleve .leaflet-bar a:not(#c) {
    border: 2px solid #fff !important;
}

/* Repère de focus clavier : 3 px jaune sur tout ce qui se commande. */
html.contraste-eleve a:focus-visible,
html.contraste-eleve button:focus-visible,
html.contraste-eleve input:focus-visible,
html.contraste-eleve select:focus-visible,
html.contraste-eleve textarea:focus-visible,
html.contraste-eleve summary:focus-visible,
html.contraste-eleve [tabindex]:focus-visible,
html.contraste-eleve [role="tab"]:focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px;
}
/* [hors-planning ABC-4-12] G10 — état de lecture, composant commun (templates/_composants/lecture/_etat.html.twig).
 * Vert = lu, rouge = non lu ; jamais la couleur seule (icône + texte). Contrastes mesurés sur fond blanc :
 * #1b6e3c = 6,0:1 ; #b3261e = 6,5:1 (AA, texte normal). */
.etat-lecture {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    white-space: nowrap;
}
.etat-lecture__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
    color: #fff;
}
.etat-lecture--lu {
    color: #1b6e3c;
}
.etat-lecture--lu .etat-lecture__icone {
    background: #1b6e3c;
}
.etat-lecture--non-lu {
    color: #b3261e;
}
.etat-lecture--non-lu .etat-lecture__icone {
    background: #b3261e;
}
.etat-lecture--compact {
    gap: .3rem;
    font-size: .85rem;
}
.etat-lecture--compact .etat-lecture__icone {
    width: 1rem;
    height: 1rem;
    font-size: .65rem;
}

/* [hors-planning ABC-4-20] Tableau de bord de « Mon espace » : chiffres clés et graphiques.
   [hors-planning ABC-4-46 2026-10-07] REPRIS : hiérarchie titre > chiffres > graphiques > détail > tableaux, espacements réguliers
   (échelle --ds-espace-*), graphiques plus grands (deux par ligne au bureau, un sur mobile), couleurs par les jetons --ds-*
   (jetons.css : clair et sombre). */
.espace-statistiques { display: grid; gap: var(--ds-espace-5, 28px); }
.espace-statistiques > * { margin: 0; }
.stats-cles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--ds-espace-3, 12px);
    margin: 0;
}
.stat-carte {
    background: var(--ds-couleur-surface, #fff);
    color: var(--ds-couleur-texte, inherit);
    border: 1px solid var(--ds-couleur-trait, var(--line, #d5dfea));
    border-radius: var(--ds-rayon, 12px);
    padding: var(--ds-espace-4, 20px);
}
.stat-carte dt {
    font-size: var(--ds-texte-petit, .9rem);
    color: var(--ds-couleur-texte-doux, var(--muted, #4a5f78));
    margin-bottom: var(--ds-espace-2, 8px);
}
.stat-carte dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ds-couleur-primaire-fonce, inherit);
}
.stat-carte dd .small-copy {
    font-size: .85rem;
    font-weight: 400;
}
.espace-connexions { display: grid; gap: var(--ds-espace-3, 12px); }
.espace-connexions h3 { margin: 0; }
/* [hors-planning ABC-4-39] Calendrier d'activité (refait en C-R-41 : grille de cases, nombre dit par l'infobulle et le texte masqué, pas seulement par la couleur). */
.calendrier-titre { font-size: 1rem; margin: 0 0 .5rem; }
/* [C-R-41 · précision 2] Calendrier d'activité « type contributions » : cases carrées de taille fixe (--calendrier-case, réduite
   proportionnellement sur mobile pour tenir à 375 px sans défilement), gouttière de 3 px, coins arrondis, UNE couleur de la charte
   (--ds-couleur-primaire) en cinq nuances mélangées à la surface du thème (lisibles en clair et en sombre), case vide cerclée d'un trait
   pour qu'elle reste visible, bloc à sa largeur naturelle (jamais étiré sur la carte). */
.calendrier-bloc { --calendrier-case: clamp(1.25rem, 6vw, 1.75rem); width: max-content; max-width: 100%; margin: 0 auto; }
.calendrier-activite { border-collapse: separate; border-spacing: 3px; font-size: .75rem; margin: 0; width: auto; }
.calendrier-activite th { font-weight: 400; color: var(--ds-couleur-texte-doux, #52647a); padding: 0; background: transparent; border: 0; white-space: nowrap; }
.calendrier-activite .calendrier-semaine-titre { text-align: left; padding-right: .5rem; }
.calendrier-activite .calendrier-semaine-libelle { text-align: left; padding-right: .5rem; font-variant-numeric: tabular-nums; }
.calendrier-activite .calendrier-jour-titre { text-align: center; }
.calendrier-case { display: inline-block; box-sizing: border-box; width: var(--calendrier-case); height: var(--calendrier-case); border-radius: 4px; vertical-align: middle; background: var(--ds-couleur-surface-douce, #eff4f9); box-shadow: inset 0 0 0 1px var(--ds-couleur-trait, #d9e2eb); }
/* [C-R-75] La case reste statique : l'infobulle s'ancre sur la ligne (ci-dessous), jamais rognée par le bloc qui défile. */
.calendrier-activite tbody tr { position: relative; }
.calendrier-activite td.calendrier-case { display: table-cell; position: static; padding: 0; border: 0; }
.calendrier-niveau-1 { background: color-mix(in srgb, var(--ds-couleur-primaire, #075ea8) 28%, var(--ds-couleur-surface, #fff)); box-shadow: none; }
.calendrier-niveau-2 { background: color-mix(in srgb, var(--ds-couleur-primaire, #075ea8) 50%, var(--ds-couleur-surface, #fff)); box-shadow: none; }
.calendrier-niveau-3 { background: color-mix(in srgb, var(--ds-couleur-primaire, #075ea8) 75%, var(--ds-couleur-surface, #fff)); box-shadow: none; }
.calendrier-niveau-4 { background: var(--ds-couleur-primaire, #075ea8); box-shadow: none; }
.calendrier-activite tbody tr:nth-child(even) { background: transparent; }
.calendrier-activite td[tabindex]:focus-visible { outline: 2px solid var(--ds-couleur-texte, #172b45); outline-offset: 1px; }
/* Infobulle : le texte de data-info, au survol ET au focus clavier, sur toute la largeur de la ligne (texte replié au besoin), au-dessus de
   la ligne et sous la première : elle ne dépasse jamais du tableau, ni du bloc qui défile, ni de la carte à 375 px (C-R-75). */
.calendrier-activite td[data-info]:hover::after, .calendrier-activite td[data-info]:focus-visible::after { content: attr(data-info); position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 5; padding: .3rem .55rem; border-radius: 6px; background: var(--ds-couleur-texte, #172b45); color: var(--ds-couleur-fond, #fff); font-size: .8125rem; line-height: 1.3; text-align: center; white-space: normal; pointer-events: none; }
.calendrier-activite tbody tr:first-child td[data-info]:hover::after, .calendrier-activite tbody tr:first-child td[data-info]:focus-visible::after { top: calc(100% + 6px); bottom: auto; }
.calendrier-legende { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: .5rem; font-size: .75rem; color: var(--ds-couleur-texte-doux, #52647a); }
.calendrier-legende .calendrier-case { width: 1rem; height: 1rem; margin: 0 .1rem; }
.calendrier-legende .calendrier-case:first-of-type { margin-left: .4rem; }
.calendrier-aide { margin: .75rem 0 0; }
/* [C-R-41] Le calendrier garde la classe commune .data-table (garde du composant commun des tableaux) ; ces règles, plus spécifiques que
   celles de .data-table (composants/tableaux.css, pages/espace-personnel.css), lui rendent sa grille : ni largeur 100 %, ni marges de
   cellule, ni trait sous l'en-tête, ni zébrure, ni survol de ligne. */
main table.data-table.calendrier-activite { width: auto !important; min-width: 0; font-size: .75rem; line-height: 1.2; }
main table.data-table.calendrier-activite th, main table.data-table.calendrier-activite td { padding: 0; border: 0; line-height: 1.2; min-width: 0; }
main table.data-table.calendrier-activite td.calendrier-case { width: var(--calendrier-case); height: var(--calendrier-case); }
main table.data-table.calendrier-activite th.calendrier-semaine-titre, main table.data-table.calendrier-activite th.calendrier-semaine-libelle { padding-right: .5rem; }
main table.data-table.calendrier-activite thead th { background: transparent; font-size: .75rem; font-weight: 400; border-bottom: 0; }
main table.data-table.calendrier-activite tbody tr:nth-child(even), main table.data-table.calendrier-activite tbody tr:hover { background: transparent; }
.stats-graphiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: var(--ds-espace-4, 20px);
}
.stats-graphiques > .panel { min-width: 0; padding: var(--ds-espace-4, 20px); background: var(--ds-couleur-surface, #fff); color: var(--ds-couleur-texte, inherit); border-color: var(--ds-couleur-trait, var(--line, #d5dfea)); }
.stats-graphiques .graphique { margin: 0; display: flex; flex-direction: column; gap: var(--ds-espace-3, 12px); }
.stats-graphiques .graphique > figcaption { font-size: var(--ds-texte-base, 17px); font-weight: 600; color: var(--ds-couleur-primaire-fonce, inherit); }
.stats-graphiques .graphique__cadre { height: min(24rem, 75vw); min-height: 16rem; }
.stats-graphiques__large { grid-column: 1 / -1; }

/* [hors-planning ABC-4-22 2026-10-06] « Mes messages » : colonne Actions (loupe, corbeille), pièces jointes, boîtes. Cible tactile
   d'au moins 36 px, focus visible, rouge de la corbeille avec contraste AA sur fond blanc. */
.actions-ligne { white-space: nowrap; }

/* [C-R-33] Tableau des actualités du back-office : colonne Titre lisible. À 375 px, chaque actualité devient une
   carte (libellé de colonne devant chaque valeur), ses boutons empilés pleine largeur (groupe .actions-actualite :
   styles/composants/boutons-admin.css). */
.tableau-actualites td:first-child { min-width: 10rem; }
@media (max-width: 767.98px) {
    .tableau-actualites thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tableau-actualites, .tableau-actualites tbody, .tableau-actualites tr, .tableau-actualites td { display: block; width: 100%; }
    .tableau-actualites tr { border: 1px solid #d5dfea; border-radius: 6px; margin-bottom: .75rem; padding: .5rem; }
    .tableau-actualites td { border: 0; padding: .25rem 0; }
    .tableau-actualites td[data-label]::before { content: attr(data-label) " : "; font-weight: 600; }
}
.action-icone { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: 6px; color: #1d3557; text-decoration: none; }
.action-icone:hover, .action-icone:focus-visible { background: #e8eef7; outline: 2px solid #1d3557; outline-offset: 1px; }
.action-icone--danger { color: #a4161a; }
.action-icone--danger:hover, .action-icone--danger:focus-visible { background: #fbe9e9; outline-color: #a4161a; }
.boites-messages { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.boites-messages [aria-current="page"] { font-weight: 700; outline: 2px solid currentColor; }
.pieces-jointes { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.piece-jointe { display: flex; align-items: center; gap: .5rem; }
.piece-jointe img { border-radius: 4px; border: 1px solid #ccd3dd; height: auto; }

/* Message 19, point 6 : une heure (« 14:35 ») tient toujours sur une seule ligne. */
.heure { white-space: nowrap; }

/* [hors-planning ABC-4-31/34 · champ verrouillé] Composant commun _composants/_champ_verrouille.html.twig (même nom, mêmes
   paramètres et mêmes classes que RIF) : gris, curseur interdit, cadenas, aide lue par les lecteurs d'écran. */
.champ-verrouille { position: relative; }
.champ-verrouille__controle { display: flex; align-items: center; gap: .5rem; }
.champ-verrouille .form-control,
.champ-verrouille input,
.champ-verrouille select { flex: 1; background-color: var(--ds-couleur-surface-douce); color: var(--ds-couleur-texte-doux); cursor: not-allowed; border-style: dashed; }
.champ-verrouille__cadenas { flex: none; color: var(--ds-couleur-texte-doux); }
/* Champ désactivé venu d'un FormType (ChampVerrouilleExtension) : même gris, même curseur, cadenas à droite. */
.champ-verrouille__champ {
  background-color: var(--ds-couleur-surface-douce);
  color: var(--ds-couleur-texte-doux);
  cursor: not-allowed;
  border-style: dashed;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2352647a' d='M8 1a3 3 0 0 0-3 3v2H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-3-3zm-1.5 3a1.5 1.5 0 0 1 3 0v2h-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
}

/* [hors-planning ABC-4-34 · L2] Composant commun « zone sans donnée » (_composants/_vide.html.twig) : un seul style partout. */
.vide { color: #5c6370; }
.vide--bloc { margin: .5rem 0; padding: .75rem 1rem; background: #f6f7f9; border: 1px dashed #c9ced6; border-radius: .25rem; font-style: italic; }
.vide--ligne td { text-align: center; color: #5c6370; font-style: italic; padding: 1rem; }
.vide--cellule, .vide--fiche { white-space: nowrap; }
.vide--fiche { font-style: italic; }

/* [hors-planning ABC-4-47] G24 : astérisque des champs obligatoires, rendu par le thème de formulaire commun (form/theme_epe*.html.twig). */
.champ-obligatoire { color: #b3261e; font-weight: 700; }

/* [C-4-134 2026-10-12] Menu principal regroupé (comme EUSEP) : rubriques déroulantes dans le bandeau bleu. Bureau : le
   sous-menu s'ouvre sous la rubrique ; mobile (≤ 760 px) : il se déplie dans la colonne du menu. Sans JS (.js absent),
   les liens restent affichés à la suite. L'entrée active garde le soulignement rouge de la maquette. */
.institutional-nav .nav-group{position:relative;display:flex;align-items:stretch}
.institutional-nav .nav-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:13px 19px;color:var(--navy);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.institutional-nav .nav-toggle:hover,.institutional-nav .nav-group.is-open .nav-toggle{background:var(--pale);color:var(--blue)}
.institutional-nav .nav-group.is-active .nav-toggle{border-color:var(--red);background:#f0f5fa;color:var(--blue)}
.institutional-nav .nav-submenu{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:260px;background:#fff;border:1px solid var(--line);border-top:0;box-shadow:0 9px 25px #12365b1a;padding:6px 0}
.institutional-nav .nav-group.is-open .nav-submenu{display:block}
.institutional-nav .nav-submenu a{display:block;margin:0;border:0;padding:10px 19px;font-weight:500;font-size:15px}
.institutional-nav .nav-submenu a[aria-current]{border-left:3px solid var(--red);background:#f0f5fa}
html:not(.js) .institutional-nav .nav-submenu{display:block;position:static;border:0;box-shadow:none}
@media(max-width:760px){
  .institutional-nav .nav-group{display:block}
  .institutional-nav .nav-toggle{width:100%;justify-content:space-between;border-bottom:0;border-left:3px solid transparent;padding:12px 15px;margin:0}
  .institutional-nav .nav-group.is-active .nav-toggle{border-left-color:var(--red)}
  .institutional-nav .nav-submenu{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 6px 18px}
}

/* [C-4-134 ajout 12/10 (2)] Menu du haut CENTRÉ dans la barre (bureau et mobile), puis bouton « Adhésion » (plein bleu, comme
   « Se connecter ») à la suite des rubriques. Le logo reste dans l'en-tête au-dessus ; rien n'est coupé à 375 px. */
.institutional-nav{justify-content:center;align-items:center}
@media(max-width:760px){
  .institutional-nav{align-items:stretch;text-align:center}
  .institutional-nav .nav-toggle{justify-content:center;gap:10px}
  .institutional-nav .nav-submenu{padding:0 0 6px;text-align:center}
}

/* [C-R-45] Badge « Assistant EPE » : le modèle et la date, à côté du nom, en graisse normale. */
.disclaimer-ia__meta {
    font-weight: 400;
}

/* [C-R-110] Requêtes lentes : le SQL normalisé complet passe à la ligne (lisible à 375 px, jamais coupé). */
pre.sql { white-space: pre-wrap; overflow-wrap: anywhere; }