/* ---------------------------------------------------------------------------
   Ekichurch — feuille du SOCLE.

   assets/ = feuilles du socle, versionnées, écrites ici.
   dist/   = bibliothèques tierces (jQuery, DataTables…), NON versionnées, déposées au déploiement.

   Les couleurs de MARQUE ne sont jamais écrites en dur : elles viennent des variables --eki-*,
   que class/Gabarit.php pose depuis le registre (§8). Une organisation change d'identité visuelle
   sans qu'aucune ligne de CSS ne bouge.

   ⚠️ CE QUI VIENT DU REGISTRE, ET CE QUI N'EN VIENT PAS. Quatre valeurs sont servies —
   `primaire`, `accent`, `fond`, `texte`. Tout le reste (filets, gris de second plan, voiles de
   survol) est une NEUTRE du socle : ce sont des valeurs d'interface, pas d'identité. Les faire
   dépendre du registre donnerait à chaque église la charge de régler la couleur de ses bordures,
   et à la première mal réglée un écran illisible que personne ne saurait réparer.

   ⚠️ LES VOILES SONT DES NOIRS TRANSLUCIDES, PAS DES GRIS FIXES. Un survol posé en `#eef1f4`
   disparaît sur un fond sombre et tranche sur un fond chaud ; `rgba(…, .05)` assombrit ce qu'il
   y a dessous, quel qu'il soit.

   Le CSS des MODULES vit dans module/<nom>/<nom>.css (§1), préfixé par le module.
   --------------------------------------------------------------------------- */

:root {
    /* Servi par le registre (§8) — valeurs de repli : celles d'Ekichurch. */
    --eki-primaire: #2f6f4e;
    --eki-accent:   #b98a2e;
    --eki-fond:     #f7f6f3;
    --eki-texte:    #1b1d1f;

    /* Neutres du socle. */
    --eki-carte:    #ffffff;
    --eki-bord:     #e7e4de;
    --eki-filet:    #efece6;
    --eki-doux:     #6f6e68;
    --eki-tres-doux:#8d8c85;
    --eki-entete-fond: #f6f4f0;

    --eki-voile:      rgba(24, 22, 18, .05);
    --eki-voile-fort: rgba(24, 22, 18, .09);

    --eki-danger:      #8f2222;
    --eki-danger-fond: #fdeaea;

    --eki-rayon:       .625rem;
    --eki-rayon-petit: .5rem;

    /* ⚠️ Les marges du corps et le débord de l'en-tête se lisent ICI, tous les deux. Deux valeurs
       écrites séparément finissent par diverger d'un pixel, et le filet de l'en-tête ne tombe plus
       en face du bord des cartes. */
    --eki-marge-x: 1.75rem;
    --eki-marge-y: 1.5rem;

    --eki-flanc: 15.5rem;
}

* { box-sizing: border-box; }

.eki {
    margin: 0;
    min-height: 100vh;
    background: var(--eki-fond);
    color: var(--eki-texte);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ─── Charpente ──────────────────────────────────────────────────────────── */

.eki-app { display: flex; min-height: 100vh; align-items: stretch; }

/* ⚠️ `min-width: 0` EST INDISPENSABLE. Sans lui, un tableau large impose sa taille à la colonne
   flexible, la page entière déborde vers la droite et le flanc de navigation part avec elle. */
.eki-vue { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Le lien d'évitement : hors de l'écran, et ramené dès qu'il prend le focus. */
.eki-evitement {
    position: fixed;
    top: .5rem;
    left: -100vw;
    z-index: 100;
    padding: .5rem .875rem;
    background: var(--eki-carte);
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon-petit);
    color: var(--eki-texte);
    text-decoration: none;
    font-weight: 600;
}

.eki-evitement:focus { left: .5rem; }

/* ─── Flanc de navigation ────────────────────────────────────────────────── */

.eki-flanc {
    width: var(--eki-flanc);
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--eki-carte);
    border-right: 1px solid var(--eki-bord);
    /* Il reste sous les yeux quand la liste défile : c'est le seul repère de « où je suis ». */
    position: sticky;
    top: 0;
    height: 100vh;
}

.eki-flanc__marque {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.125rem 1rem;
    color: inherit;
    text-decoration: none;
}

.eki-flanc__logo {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: .5rem;
    object-fit: contain;
}

.eki-flanc__logo--texte {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eki-voile-fort);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.eki-flanc__noms { display: flex; flex-direction: column; min-width: 0; }

.eki-flanc__nom {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    /* Un nom d'église long ne pousse pas la colonne : il se coupe. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eki-flanc__second {
    font-size: .6875rem;
    color: var(--eki-tres-doux);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eki-flanc__nav {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .75rem;
    /* La navigation défile si l'organisation active beaucoup de modules ; le bloc du bas reste. */
    overflow-y: auto;
    flex: 1;
}

.eki-flanc__lien {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .6875rem;
    border-radius: var(--eki-rayon);
    color: var(--eki-doux);
    text-decoration: none;
    font-size: .875rem;
    transition: background-color .14s ease, color .14s ease;
}

.eki-flanc__lien:hover { background: var(--eki-voile); color: var(--eki-texte); }

/* ⚠️ L'ENTRÉE ACTIVE EST UNE NEUTRE, PAS LA COULEUR DE L'ORGANISATION. Elle doit rester lisible
   quelle que soit la couleur servie : un pavé `--eki-primaire` clair porterait du texte blanc
   illisible, et personne ne s'en apercevrait avant que l'église concernée n'appelle. */
.eki-flanc__lien--actif {
    background: var(--eki-voile-fort);
    color: var(--eki-texte);
    font-weight: 600;
}

.eki-flanc__i { width: 1.25rem; height: 1.25rem; }

.eki-flanc__pied {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    margin: 0 .25rem;
    border-top: 1px solid var(--eki-filet);
}

.eki-flanc__pied .eki-flanc__noms { flex: 1; }

/* ⚠️ Les capitales espacées sont un traitement de MARQUE, pas de nom propre. Appliquées au nom de
   la personne identifiée, elles donnent « THIÉBAUD ESSAI » en bas de chaque écran — on dirait une
   seconde enseigne, et le nom devient plus difficile à lire que celui de l'église. */
.eki-flanc__pied .eki-flanc__nom {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

.eki-flanc__sortie { text-decoration: none; }

.eki-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    border-radius: 50%;
    background: var(--eki-voile-fort);
    color: var(--eki-texte);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.eki-avatar--petit { width: 2rem; height: 2rem; font-size: .625rem; }

/* ─── En-tête d'écran ────────────────────────────────────────────────────── */

.eki-entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.0625rem var(--eki-marge-x);
    background: var(--eki-carte);
    border-bottom: 1px solid var(--eki-bord);
}

.eki-entete__titres { flex: 1; min-width: 12rem; }

.eki-entete__sous {
    margin: .1875rem 0 0;
    font-size: .8125rem;
    color: var(--eki-doux);
}

.eki-entete__actions { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }

.eki-titre {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* ─── Corps ──────────────────────────────────────────────────────────────── */

.eki-corps { padding: var(--eki-marge-y) var(--eki-marge-x); flex: 1; }

/* Le conteneur du corps ne prend pas d'anneau au focus : il n'est focalisable que pour recevoir
   le lien d'évitement, et un cadre autour de toute la page serait un défaut d'affichage. */
.eki-corps:focus { outline: none; }

.eki-carte {
    background: var(--eki-carte);
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

/* Une carte qui ne porte QU'un tableau : le tableau touche ses bords, comme sur la maquette. */
.eki-carte--tableau { padding: 0; overflow: hidden; }

.eki-barre {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.eki-barre__espace { flex: 1; }

/* ─── Vignettes de chiffres ──────────────────────────────────────────────── */

.eki-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.eki-stat {
    background: var(--eki-carte);
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon);
    padding: 1.125rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.eki-stat__libelle { display: block; font-size: .75rem; color: var(--eki-doux); }

.eki-stat__valeur {
    display: block;
    margin: .3125rem 0 .375rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    /* Des chiffres qui s'alignent d'une vignette à l'autre : sans ça, quatre montants côte à côte
       dansent d'un demi-caractère et se lisent comme mal alignés. */
    font-variant-numeric: tabular-nums;
}

.eki-stat__note { display: block; font-size: .6875rem; color: var(--eki-tres-doux); }

/* ─── Contrôles ──────────────────────────────────────────────────────────── */

.eki-champ,
.eki-select {
    padding: .5rem .625rem;
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon-petit);
    font: inherit;
    font-size: .875rem;
    background: var(--eki-carte);
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.eki-champ:hover:not(:focus),
.eki-select:hover:not(:focus) { border-color: #cfcac1; }

.eki-champ:focus,
.eki-select:focus { outline: 2px solid var(--eki-primaire); outline-offset: 1px; border-color: transparent; }

.eki-bouton {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .5625rem .875rem;
    border: 1px solid transparent;
    border-radius: var(--eki-rayon-petit);
    background: var(--eki-primaire);
    color: #fff;
    font: inherit;
    font-size: .84375rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    /* Un <a> habillé en bouton : sans ça, le libellé arrive souligné et le bouton a l'air cassé. */
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}

.eki-bouton:hover { filter: brightness(1.12); }
.eki-bouton:active { transform: translateY(1px); }

/* ⚠️⚠️ CETTE CLASSE ÉTAIT EMPLOYÉE PARTOUT ET DÉFINIE NULLE PART.
   Quatre modules l'écrivent — messagerie (7 fois), personnes, planning — et aucune règle ne
   l'accompagnait : tous ces boutons sortaient à la taille normale, y compris ceux qui vivent dans
   une ligne de liste ou une barre d'outils, où ils écrasent tout le reste.
   ⚠️ Une classe CSS inventée NE LÈVE RIEN et ne casse rien : elle s'affiche mal, et c'est tout.
   Ni `php -l`, ni la suite de tests, ni une relecture ne l'attrapent. Vérifier une classe contre
   la feuille coûte deux secondes ; s'en apercevoir à l'écran coûte un aller-retour. */
.eki-bouton--petit {
    padding: .3125rem .625rem;
    font-size: .78125rem;
    gap: .3125rem;
}

.eki-bouton--discret {
    background: var(--eki-carte);
    color: var(--eki-texte);
    border-color: var(--eki-bord);
}

.eki-bouton--discret:hover { filter: none; background: var(--eki-voile); border-color: #d8d3ca; }

.eki-bouton--danger { background: var(--eki-danger); }

.eki-bouton[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

/* ⚠️ `:focus-visible`, pas `:focus` : l'anneau doit apparaître au CLAVIER et rester discret à la
   souris. Un anneau après chaque clic pousse à écrire `outline:none`, et c'est comme ça qu'on perd
   l'accessibilité au clavier. */
.eki-bouton:focus-visible,
.eki-action:focus-visible,
.eki-flanc__lien:focus-visible {
    outline: 2px solid var(--eki-primaire);
    outline-offset: 2px;
}

/* ─── Action icône seule (listes) ────────────────────────────────────────── */

/* ⚠️ 2 rem de côté : c'est la cible tactile minimale tenable dans une ligne de tableau. En
   dessous, on vise à côté sur un téléphone — et ces boutons sont ceux qui SUPPRIMENT. */
.eki-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--eki-rayon-petit);
    background: transparent;
    color: var(--eki-tres-doux);
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.eki-action:hover { background: var(--eki-voile); color: var(--eki-texte); }

.eki-action--danger:hover { background: var(--eki-danger-fond); color: var(--eki-danger); }

.eki-action[disabled] { opacity: .4; cursor: not-allowed; background: none; }

/* Les actions d'une ligne, groupées et poussées à droite. */
.eki-actions { display: inline-flex; gap: .125rem; white-space: nowrap; }

/* ⚠️ Les actions s'estompent au repos et reviennent au survol OU au focus clavier. Sans le
   `:focus-within`, elles resteraient invisibles pour qui navigue à la tabulation — une interface
   qui ne se révèle qu'à la souris. */
@media (hover: hover) {
    .eki-corps table.eki-tableau tbody .eki-actions { opacity: .5; transition: opacity .15s ease; }
    .eki-corps table.eki-tableau tbody tr:hover .eki-actions,
    .eki-corps table.eki-tableau tbody .eki-actions:focus-within { opacity: 1; }
}

/* ─── Étiquettes ─────────────────────────────────────────────────────────── */

/* Le jeton cerné de la maquette : un contour, pas un aplat. Il nomme sans crier. */
.eki-jeton {
    display: inline-block;
    padding: .1875rem .625rem;
    border: 1px solid var(--eki-bord);
    border-radius: 1rem;
    background: var(--eki-carte);
    font-size: .78125rem;
    line-height: 1.4;
    color: var(--eki-texte);
    white-space: nowrap;
}

.eki-jeton--doux { color: var(--eki-doux); }

/* Une petite capitale espacée : c'est un état, pas une phrase. */
.eki-jeton--micro {
    padding: .25rem .5625rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Rempli : réservé à l'état qui doit se voir en balayant la colonne. Un seul par colonne — deux
   jetons pleins côte à côte ne hiérarchisent plus rien. */
.eki-jeton--fort { background: var(--eki-texte); border-color: var(--eki-texte); color: #fff; }

.eki-etat {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 1rem;
    font-size: .75rem;
    line-height: 1.4;
    font-weight: 600;
    background: var(--eki-voile);
    color: var(--eki-doux);
    white-space: nowrap;
}

.eki-etat--membre    { background: #e6f2eb; color: #2f6f4e; }
.eki-etat--visiteur  { background: #fdf3e0; color: #8a6414; }
.eki-etat--inactif   { background: var(--eki-voile); color: var(--eki-doux); }
.eki-etat--anonymise { background: #ece9f3; color: #4b3f72; }

/* Ce qui n'existe pas encore se dit en gris, sans cadre : un jeton vide se lirait comme un état. */
.eki-muet { color: var(--eki-tres-doux); }
.eki-muet--italique { color: var(--eki-tres-doux); font-style: italic; }

/* ─── Champ de recherche ─────────────────────────────────────────────────── */

.eki-recherche { position: relative; display: inline-flex; align-items: center; }

/* ⚠️ `pointer-events: none` : l'icône est posée PAR-DESSUS le champ. Sans ça, cliquer dessus ne
   donne pas le focus au champ — et c'est exactement là qu'on clique. */
.eki-recherche__i {
    position: absolute;
    left: .6875rem;
    color: var(--eki-tres-doux);
    font-size: 1rem;
    pointer-events: none;
}

.eki-recherche .eki-champ { padding-left: 2.125rem; width: 18rem; max-width: 100%; }

/* ─── Puces de filtre ────────────────────────────────────────────────────── */

.eki-filtres { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.125rem; }

.eki-filtres__espace { flex: 1; }

.eki-puce {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .4375rem .8125rem;
    border: 1px solid var(--eki-bord);
    border-radius: 1.25rem;
    background: var(--eki-carte);
    color: var(--eki-doux);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.eki-puce:hover { color: var(--eki-texte); border-color: #d8d3ca; }

.eki-puce:focus-visible { outline: 2px solid var(--eki-primaire); outline-offset: 2px; }

.eki-puce__n { font-weight: 600; color: var(--eki-tres-doux); font-variant-numeric: tabular-nums; }

/* ⚠️ La puce active se remplit du TEXTE, pas de la couleur de l'organisation : c'est le même
   raisonnement que l'entrée de navigation active — une couleur de marque claire y mettrait du
   blanc sur du clair. `--eki-texte` est sombre par construction, puisque c'est la couleur du texte
   sur le fond de la page. */
.eki-puce--actif { background: var(--eki-texte); border-color: var(--eki-texte); color: #fff; }
.eki-puce--actif .eki-puce__n { color: rgba(255, 255, 255, .62); }

/* ─── Messages ───────────────────────────────────────────────────────────── */

.eki-message {
    padding: .625rem .875rem;
    border-radius: var(--eki-rayon-petit);
    margin-bottom: 1rem;
}

.eki-message--erreur { background: var(--eki-danger-fond); color: var(--eki-danger); }

.eki-vide { color: var(--eki-doux); padding: 2rem 0; text-align: center; }

/* ─── Tableaux ───────────────────────────────────────────────────────────── */

/* Un tableau large défile DANS son cadre : sans ça, c'est la page entière qui part
   horizontalement, et le flanc de navigation avec elle. */
.eki-tableau-cadre { overflow-x: auto; }

/* ⚠️⚠️ TOUT CE BLOC EST PRÉFIXÉ PAR `.eki-corps`, ET C'EST LA FEUILLE DE DATATABLES QUI L'EXIGE.
   `dist/datatables.min.css` est déposée par `Gabarit::bibliotheques()`, donc APRÈS celle-ci, et
   ses sélecteurs sont plus spécifiques que les nôtres : `table.dataTable>thead>tr>th` (0,1,4) bat
   `table.eki-tableau th` (0,1,2). Sans le préfixe, chaque liste reprenait le retrait de 8 px de la
   bibliothèque et son filet NOIR sous l'en-tête — visible sur tous les écrans, et introuvable dans
   la feuille tant qu'on cherche une faute de frappe plutôt qu'un conflit de cascade. */

.eki-corps table.eki-tableau { width: 100%; border-collapse: collapse; }

.eki-corps table.eki-tableau thead th {
    padding: .8125rem 1rem;
    background: var(--eki-entete-fond);
    border-bottom: 1px solid var(--eki-bord);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--eki-tres-doux);
    text-align: left;
    white-space: nowrap;
}

.eki-corps table.eki-tableau tbody td {
    padding: .9375rem 1rem;
    border-bottom: 1px solid var(--eki-filet);
    text-align: left;
    vertical-align: middle;
    font-size: .875rem;
}

/* La dernière ligne ne pose pas de filet sur le bord de la carte. */
.eki-corps table.eki-tableau tbody tr:last-child td { border-bottom: 0; }

/* `no-footer` : DataTables pose un filet NOIR sous le tableau entier. Même spécificité que la
   nôtre à préfixe égal — il faut donc une classe de plus pour l'emporter.
   ⚠️⚠️ ET C'EST ICI QUE LE FILET DU PIED SE POSE, PAS SUR LE PIED LUI-MÊME. Mesuré dans la
   feuille de la bibliothèque : `.dataTables_info` est `float:left` et `.dataTables_paginate`
   `float:right` — donc chacun ne fait QUE la largeur de son texte. Un `border-top` posé sur eux
   dessinait deux traits courts, l'un sous « Aucune ligne » et l'autre au-dessus de la pagination,
   au lieu d'un filet traversant la carte. Le tableau, lui, est `width: 100 %` par construction :
   c'est le seul élément du pied qui puisse porter une ligne de la bonne largeur. */
.eki-corps table.eki-tableau.dataTable { border-bottom: 1px solid var(--eki-filet); }

.eki-corps table.eki-tableau tbody tr { transition: background-color .12s ease; }
.eki-corps table.eki-tableau tbody tr:hover { background: rgba(24, 22, 18, .022); }

/* Des montants alignés au chiffre près, colonne par colonne. */
.eki-nombre { font-variant-numeric: tabular-nums; }
.eki-montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.eki-lien { color: var(--eki-primaire); text-decoration: none; font-weight: 600; }
.eki-lien:hover { text-decoration: underline; }

/* Un nom précédé de son avatar : le bloc qui revient dans toutes les listes de personnes. */
.eki-personne { display: flex; align-items: center; gap: .625rem; }
.eki-personne__nom { font-weight: 600; }

/* ⚠️⚠️ LE MÊME NOM, CLIQUABLE OU NON, DOIT AVOIR LA MÊME COULEUR. Sans cette règle, un `<a>`
   portant cette classe prend le bleu souligné par défaut du navigateur — illisible sur le fond
   sombre de la console, et signalé comme tel : « on voit pas l'entité, c'est bleu ». `color:
   inherit` fait suivre la couleur du texte environnant, quel que soit le thème.
   ⚠️ Le soulignement revient au survol ET au focus clavier : retirer les deux enlèverait la seule
   marque qui distingue un nom cliquable d'un nom qui ne l'est pas. */
a.eki-personne__nom { color: inherit; text-decoration: none; }
a.eki-personne__nom:hover,
a.eki-personne__nom:focus-visible { text-decoration: underline; }

/* Deux informations empilées dans une seule case — l'adresse et le téléphone d'un membre. */
.eki-double { display: flex; flex-direction: column; line-height: 1.35; }
.eki-double__second { font-size: .78125rem; color: var(--eki-tres-doux); }

/* ─── Tableau posé à même le fond (hors carte) ───────────────────────────── */

/* La maquette des membres pose sa liste directement sur le fond : pas de cadre, pas de bandeau
   d'en-tête — juste des filets. Les cases de bord perdent leur retrait pour que la colonne
   s'aligne sur le titre de l'écran. */
.eki-corps table.eki-tableau--nu thead th {
    background: transparent;
    border-bottom: 1px solid var(--eki-bord);
}

.eki-corps table.eki-tableau--nu thead th:first-child,
.eki-corps table.eki-tableau--nu td:first-child { padding-left: 0; }

.eki-corps table.eki-tableau--nu thead th:last-child,
.eki-corps table.eki-tableau--nu td:last-child { padding-right: 0; }

.eki-corps table.eki-tableau--nu td { padding-top: 1.0625rem; padding-bottom: 1.0625rem; }

/* ⚠️ Le survol reste, même sans cadre. Ces lignes s'ouvrent au clic : sans retour visuel, on ne
   sait pas laquelle on va ouvrir — et la maquette, elle, est une image immobile. */
.eki-corps table.eki-tableau--nu tbody tr:hover { background: rgba(24, 22, 18, .028); }

/* ─── Blocs de carte ─────────────────────────────────────────────────────── */

.eki-carte__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.125rem;
}

.eki-carte__titre { margin: 0; font-size: 1rem; font-weight: 700; }
.eki-carte__sous { margin: .1875rem 0 0; font-size: .75rem; color: var(--eki-doux); }
.eki-carte__note { font-size: .75rem; color: var(--eki-doux); white-space: nowrap; }

.eki-colonnes {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: .875rem;
    align-items: start;
    margin-bottom: .875rem;
}

@media (max-width: 68rem) {
    .eki-colonnes { grid-template-columns: 1fr; }
}

/* ─── Histogramme ────────────────────────────────────────────────────────── */

/* ⚠️ NI BIBLIOTHÈQUE NI CANEVAS : douze barres en CSS. Le §1 ferme la porte aux paquets, et un
   graphique dessiné au canevas serait invisible pour un lecteur d'écran comme pour une impression.
   Chaque barre porte sa valeur en `title` et la série entière est doublée par un tableau masqué. */
.eki-histo { display: flex; align-items: flex-end; gap: .625rem; height: 11rem; }

.eki-histo__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .625rem;
    height: 100%;
    min-width: 0;
}

.eki-histo__fut {
    width: 100%;
    max-width: 2.5rem;
    background: #c2bfb8;
    border-radius: .1875rem;
    /* Une valeur nulle doit rester une barre visible, sinon le mois a l'air absent de la série. */
    min-height: 2px;
}

.eki-histo__col--fort .eki-histo__fut { background: var(--eki-texte); }

.eki-histo__pied {
    font-size: .6875rem;
    color: var(--eki-tres-doux);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ─── Jauge ──────────────────────────────────────────────────────────────── */

.eki-jauge {
    /* ⚠️ `display: block` : posée sur un <span>, une hauteur ne s'applique pas à un élément inline — la
       jauge existait dans le balisage et ne se voyait nulle part. */
    display: block;
    position: relative;
    height: .375rem;
    border-radius: 1rem;
    background: var(--eki-filet);
    overflow: hidden;
}

.eki-jauge__part { position: absolute; top: 0; bottom: 0; left: 0; background: var(--eki-texte); }

/* ─── Pastille de date ───────────────────────────────────────────────────── */

.eki-date-puce {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: .5rem;
    background: var(--eki-voile);
    line-height: 1.1;
}

.eki-date-puce__j { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.eki-date-puce__m {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--eki-doux);
}

.eki-liste { list-style: none; margin: 0; padding: 0; }

.eki-liste__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6875rem 0;
    border-bottom: 1px solid var(--eki-filet);
}

.eki-liste__item:last-child { border-bottom: 0; padding-bottom: 0; }
.eki-liste__item:first-child { padding-top: 0; }

.eki-liste__corps { flex: 1; min-width: 0; }

/* ⚠️ `display: block` : ce sont des <span>, donc inline par défaut. Sans ça, le titre de l'événement et
   son heure se suivent sur une seule ligne et se replient n'importe où — ce qui ne se voit qu'à
   l'écran, jamais dans le balisage. */
.eki-liste__nom { display: block; font-weight: 600; font-size: .875rem; }
.eki-liste__note { display: block; font-size: .78125rem; color: var(--eki-tres-doux); }

/* ─── DataTables : ses propres commandes, à nos couleurs ─────────────────── */

/* ⚠️ DataTables pose son balisage AUTOUR du tableau, avec ses classes à lui. Sans ces règles, la
   recherche et la pagination gardent l'aspect de la bibliothèque au milieu d'un écran redessiné —
   et c'est exactement ce qui se voit en premier. */
.dataTables_wrapper { padding: 0; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: .875rem 1rem;
    font-size: .8125rem;
    color: var(--eki-doux);
}

.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_length { float: left; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    margin-left: .375rem;
    padding: .4375rem .625rem;
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon-petit);
    background: var(--eki-carte);
    font: inherit;
    font-size: .8125rem;
    color: inherit;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 2px solid var(--eki-primaire);
    outline-offset: 1px;
    border-color: transparent;
}

/* ⚠️⚠️ PLUS DE `border-top` ICI : ces deux blocs sont FLOTTANTS (mesuré dans la feuille de la
   bibliothèque), donc larges comme leur texte. Le filet du pied est porté par le TABLEAU, qui
   occupe toute la largeur — voir plus haut. */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: .8125rem 1rem;
    font-size: .8125rem;
    color: var(--eki-doux);
}

/* ⚠️ Sur un tableau VIDE le pied ne dit plus rien d'utile : le décompte est vide (voir
   `Gabarit::langueDataTable`) et la pagination ne mène nulle part. On le retire entièrement.
   `:has()` dégrade proprement là où il n'est pas connu — le pied reste visible, sans doublon. */
.dataTables_wrapper:has(td.dataTables_empty) .dataTables_info,
.dataTables_wrapper:has(td.dataTables_empty) .dataTables_paginate { display: none; }

/* Le pied des listes montées sans barre d'outils (`dom: 'rt<"eki-dt-pied"ip>'`) : décompte à
   gauche, pagination à droite. Ici les deux blocs sont posés en FLEX et non flottants, donc le
   retrait latéral du pied ordinaire ferait double emploi avec celui du conteneur. */
.eki-dt-pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.eki-dt-pied .dataTables_info,
.eki-dt-pied .dataTables_paginate { padding-left: 0; padding-right: 0; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .3125rem .625rem;
    margin-left: .125rem;
    border: 1px solid transparent;
    border-radius: var(--eki-rayon-petit);
    color: var(--eki-doux) !important;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--eki-voile);
    border-color: var(--eki-bord);
    color: var(--eki-texte) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--eki-voile-fort);
    border-color: var(--eki-bord);
    color: var(--eki-texte) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
    background: none;
    border-color: transparent;
}

/* ─── Formulaire en grille ───────────────────────────────────────────────── */

.eki-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.eki-groupe { display: flex; flex-direction: column; gap: .25rem; }

.eki-etiquette { font-size: .8125rem; color: var(--eki-doux); }

.eki-aide { font-size: .75rem; color: var(--eki-doux); }

/* ⚠️ HORS DE L'ÉCRAN, PAS `display:none`. Un titre de colonne masqué par `display:none` disparaît
   AUSSI pour les lecteurs d'écran — la colonne s'annonce alors « vide ». Ce retrait-là le laisse
   dans l'arbre d'accessibilité tout en le sortant du regard. */
.eki-hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Icônes ─────────────────────────────────────────────────────────────── */

/* Le sprite : hors flux, invisible, et SANS `display:none` — plusieurs navigateurs refusent de
   résoudre un `<use>` vers un `<symbol>` dans un arbre à display:none. Le sortir de l'écran est
   la seule mise à l'écart qui marche partout. */
.eki-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* `1em` : l'icône suit la taille du texte à côté d'elle, sans réglage par emplacement.
   `currentColor` est posé sur le symbole — elle prend donc la couleur de ce qui la porte. */
.eki-i {
    width: 1em;
    height: 1em;
    flex: none;
    /* Aligne l'icône sur la ligne de base optique du texte : sans ce décalage, elle flotte
       systématiquement un peu trop haut à côté d'une majuscule. */
    vertical-align: -.125em;
}

.eki-i--grande { width: 1.25em; height: 1.25em; }

/* ─── Suggestion d'adresse ───────────────────────────────────────────────── */

.eki-suggest__boite { position: relative; display: flex; flex-direction: column; }

/* ⚠️ `z-index` élevé : cette liste se pose au-dessus des champs suivants et, dans un volet, de son
   pied. Sans quoi elle apparaît DERRIÈRE le bouton « Enregistrer » — visible, et incliquable. */
.eki-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin: .1875rem 0 0;
    padding: .25rem;
    list-style: none;
    background: var(--eki-carte);
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon-petit);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    max-height: 14rem;
    overflow-y: auto;
}

.eki-suggest__item {
    padding: .4375rem .5rem;
    border-radius: .25rem;
    font-size: .875rem;
    cursor: pointer;
}

.eki-suggest__item:hover,
.eki-suggest__item:focus { background: var(--eki-voile); outline: none; }

/* ─── Écrans étroits ─────────────────────────────────────────────────────── */

/* ⚠️ Le flanc ne se replie pas derrière un bouton : sans JavaScript, un volet qui s'ouvre est un
   volet qui ne se referme pas. Il redevient une barre horizontale qui défile — la navigation
   reste ATTEIGNABLE, ce qui est tout ce qu'on lui demande sur un écran étroit. */
@media (max-width: 60rem) {
    :root { --eki-marge-x: 1rem; --eki-marge-y: 1rem; }

    .eki-app { flex-direction: column; }

    .eki-flanc {
        width: auto;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--eki-bord);
    }

    .eki-flanc__nav { flex-direction: row; overflow-x: auto; padding: .25rem .5rem .5rem; }
    .eki-flanc__lien { white-space: nowrap; }
    .eki-flanc__pied { border-top: 1px solid var(--eki-filet); }

    .eki-entete { align-items: flex-start; flex-direction: column; }
}

/* ⚠️⚠️ TOUTE ANIMATION S'ARRÊTE SI LE SYSTÈME LE DEMANDE. Ce n'est pas une politesse : pour une
   partie des gens, le mouvement à l'écran provoque un vrai malaise. Et une animation coupée ne doit
   jamais rendre un élément invisible ou inatteignable — d'où des transitions qui ne portent que sur
   la couleur et l'ombre, jamais sur l'opacité de quelque chose qu'il faut voir. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .eki-bouton:active { transform: none; }
}