/* Composant commun Tableau (docs/specs/tableaux-communs-specification.md).
   Feuille minimale : le composant hérite des classes transversales des
   modules (carte, zone-filtres, filtres, tableau, bouton, note,
   pagination) ; ne vivent ici que les règles propres au composant. */

/* Légende du tableau : vocalisée par les lecteurs d'écran, masquée
   visuellement (RGAA, critère tableaux de données). */
.tableau-legende {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Liens de tri des en-têtes : même couleur que le texte d'en-tête,
   soulignement au survol et au focus (l'anneau de focus vient du module). */
.tableau th a.tri {
    color: inherit;
    text-decoration: none;
}
.tableau th a.tri:hover,
.tableau th a.tri:focus {
    text-decoration: underline;
}
/* Toute colonne triable annonce qu'elle l'est : double flèche discrète
   sur les colonnes non triées (retour Yves du 09/08/2026). Décoratif :
   l'information d'action est le lien lui-même et son libellé. */
.tableau th a.tri::after {
    content: " \21C5";
    opacity: 0.55;
    line-height: 1;
}

/* Indicateur du sens sur la colonne triée (décoratif, l'information est
   portée par aria-sort et le title du lien) : triangle plein agrandi,
   plus visible que la flèche fine (retour Yves du 09/08/2026). */
.tableau th[aria-sort="ascending"] a.tri::after {
    content: " \25B2";
}
.tableau th[aria-sort="descending"] a.tri::after {
    content: " \25BC";
}
.tableau th[aria-sort] a.tri::after {
    font-size: 1.2em;
    opacity: 1;
}

/* Ligne de titre du tableau (retours Yves du 10/08/2026) : titre,
   déclencheur des filtres (monté par tableau.js) et bouton de création
   vers sa page dédiée, sur une seule ligne. */
.tableau-entete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
}
.tableau-entete h1,
.tableau-entete h2,
.tableau-entete h3 {
    margin: 0;
}
.tableau-entete .tableau-nouveau {
    margin-left: auto;
}

/* Panneau des filtres : l'habillage vient d'ICI par les jetons du
   contrat commun (--surface, --trait, --rayon..., voir laterale.css),
   plus du CSS des modules : rendu identique partout (retour Yves du
   10/08/2026, les champs de registres restaient au style navigateur). */
details.zone-filtres {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon, 12px);
    padding: 0.9rem 1.1rem;
    margin: 0.75rem 0;
}
.zone-filtres > summary {
    cursor: pointer;
}
.zone-filtres label {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}
.zone-filtres input[type="text"],
.zone-filtres input[type="date"],
.zone-filtres select {
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: calc(var(--rayon, 12px) / 2);
    padding: 0.45rem 0.6rem;
}

/* Filtres : chaque champ garde son étiquette au-dessus, les champs se
   suivent sur la même ligne (retour Yves : mise en page unique ; le
   passage en pile viendra avec le chantier mobile). */
.zone-filtres form.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: flex-end;
}
.zone-filtres form.filtres > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}
.zone-filtres input[type="text"],
.zone-filtres input[type="date"],
.zone-filtres select {
    width: auto;
    min-width: 11rem;
}

/* Badge du nombre de critères actifs, sur le déclencheur des filtres
   (cercle rouge, texte blanc : contraste AA assuré). */
.filtre-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.3em;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1;
}

/* Déclencheur des filtres une fois monté dans l'entête par tableau.js :
   le summary d'origine est masqué, le bouton reprend son contenu. */
.tableau-filtres-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}
details.zone-filtres[data-monte] > summary {
    display: none;
}
details.zone-filtres[data-monte]:not([open]) {
    display: none;
}

/* Formulaire des pages dédiées de création : bouton à largeur naturelle,
   lien Annuler à sa droite (retour Yves du 10/08/2026). */
.formulaire-tableau .tableau-boutons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.formulaire-tableau .tableau-boutons button {
    width: auto;
}

/* Texte pour lecteurs d'écran seulement (badge des filtres). */
.tableau-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Colonne en cours de tri : teinte posée en calque (background-image),
   pour se composer avec le fond existant (entête, zébrures) sans le
   remplacer ; assez légère pour ne dégrader aucun contraste déclaré. */
.tableau th[aria-sort],
.tableau td.colonne-triee {
    background-image: linear-gradient(rgba(127, 127, 127, 0.13),
                                      rgba(127, 127, 127, 0.13));
}

/* Pied « Configuration du tableau » (mode administrateur seulement,
   gabarit _tableau_technique) : discret, hérite des couleurs du module. */
.tableau-technique {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    opacity: 0.85;
}
.tableau-technique summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.tableau-technique svg {
    flex: none;
}
.tableau-technique p {
    margin: 0.35rem 0 0;
}

/* Pied du tableau (retour Yves du 10/08/2026, modèle Finexo) : étendue
   affichée à gauche, boutons de pagination à droite. */
.tableau-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.tableau-pied .tableau-etendue {
    margin: 0;
}
nav.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
}
/* « page x sur y » : la marge haute de .note des modules (1rem) s'applique
   à un enfant flex et décalait le texte sous l'axe des boutons (retour
   Yves du 23/08/2026) */
nav.pagination .note { margin: 0; }

/* Lien Annuler (et tout lien du bloc de boutons) : couleur du texte
   courant, lisible sur les deux thèmes (retour Yves du 10/08/2026). */
.formulaire-tableau .tableau-boutons a,
.tableau-boutons a {
    color: inherit;
    text-decoration: underline;
}

/* Boutons du panneau des filtres (« Filtrer » et « Réinitialiser »
   regroupés) : en ligne, contre la règle de mise en colonne des champs. */
.zone-filtres form.filtres > .filtres-boutons {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* =====================================================================
   RENDU ÉTROIT EN CARTES
   (docs/specs/tableaux-rendu-mobile-etude.md v1.0, option D)

   Le gabarit _tableau.html.twig rend DEUX structures : le tableau et la
   pile de cartes. La bascule se fait ICI, au seuil unique de 900 px
   (celui de laterale.css, menu.css et du module Équipe), sans dérogation
   par écran (arbitrage n° 5) et sans aucun JavaScript de mise en page.

   Par défaut, c'est-à-dire au poste de travail ET À L'IMPRESSION, seul
   le tableau existe : la bascule est portée par « @media screen », une
   page imprimée gardant sa forme tabulaire quelle que soit la largeur
   de papier.

   Jetons : ceux du contrat commun uniquement (--surface, --trait,
   --encre-douce, --bleu-texte, --rayon), donc aucun couple de contraste
   nouveau (étude §6.10). ================================================ */

.tableau-cartes { display: none; }
/* panneau « Trier » : rendu étroit seulement, les en-têtes de colonnes
   (liens de tri, aria-sort) faisant foi au-dessus du seuil (étude §6.5) ;
   même sort pour son déclencheur monté dans l'entête par tableau.js */
details.zone-tri { display: none; }
.tableau-entete .tableau-tri-bouton { display: none; }
/* état du tri affiché au déclencheur « Trier » (retour Yves du
   14/08/2026 : sans en-têtes, on ne voit plus ni la colonne ni le
   sens). Seul le MOT « Trier » se présente comme un lien (second
   regard d'Yves : l'état n'en est pas un) : le soulignement est retiré
   du bouton monté et posé sur le mot, car la décoration d'un conteneur
   flexible se propage à ses éléments et ne peut pas être annulée de
   l'intérieur. Le sens est le triangle des en-têtes du rendu large
   (décoratif), doublé d'un texte clippé pour les lecteurs d'écran. */
.tableau-filtres-bouton.tableau-tri-bouton { text-decoration: none; }
/* dans le bouton monté seulement : le summary natif, comme celui des
   filtres, n'est pas souligné */
.tableau-tri-bouton .tableau-tri-mot { text-decoration: underline; }
.tableau-tri-etat {
    font-weight: 400;
    color: var(--encre-douce);
}

@media screen and (max-width: 900px) {

    .tableau { display: none; }

    .tableau-cartes {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Arbitrage du 21/08/2026 (spec v1.4) : la pile de cartes reste
       TOUJOURS dans la carte du module, écrans-liste comme fiches (avant,
       la carte du module s'effaçait sur les écrans-liste). Pour que les
       cartes de lignes se détachent du conteneur, elles prennent un fond
       propre, distinct de --surface ET du fond de page (le fond de page
       donnait l'impression d'une carte transparente) : gris neutre
       #e8e8e8 (gris neutre) en clair, #1f2238 en sombre (entre la page et la carte).
       Palette identique dans les 5 modules, d'où des valeurs fixes ici
       via light-dark() (le color-scheme des palettes choisit), repli
       clair pour les navigateurs sans light-dark(). Contrastes texte
       vérifiés (outils/rgaa/contraste.php) : pire cas ambre 4,56:1 en
       clair, le plafond du texte courant. */
    .carte-enr {
        background: #e8e8e8;
        background: light-dark(#e8e8e8, #1f2238);
        border: 1px solid var(--trait);
        border-radius: var(--rayon, 12px);
        padding: 0.75rem 0.85rem;
    }
    .carte-vide { color: var(--encre-douce); }

    /* titre (colonne « carte: titre », défaut : première colonne) et
       sous-titre facultatif. Blocs (et non p/span) : une cellule peut
       porter un formulaire ou un dépliant, que du phrasé ne pourrait
       pas contenir sans balisage invalide. */
    .enr-tete { margin: 0 0 0.35rem; }
    .enr-titre { font-weight: 650; }
    .enr-sous {
        font-size: 0.88rem;
        color: var(--encre-douce);
    }
    /* un formulaire par ligne (renommage des référentiels) occupe la
       largeur de la carte, ses champs compris */
    .enr-titre form,
    .enr-sous form { margin: 0; }
    .enr-titre input[type="text"],
    .enr-titre select {
        width: 100%;
        min-height: 44px;
    }
    .enr-titre .bouton { min-height: 44px; }

    /* valeurs brèves sans libellé (carte_libelle: false) : badges et
       pastilles rendus par la surcharge de cellule de l'écran */
    .enr-breves {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin: 0.1rem 0 0.45rem;
    }

    /* Paires « Libellé : valeur » EN LIGNE (arbitrage n° 1) : aucune
       colonne n'est réservée aux libellés, une valeur longue se replie
       sur toute la largeur de la carte. Le libellé reste une vraie
       donnée HTML (<dt>) ; seul le deux-points est décoratif. */
    .enr-paires {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-size: 0.93rem;
    }
    .enr-paires > div { margin: 0; }
    .enr-paires dt {
        display: inline;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--encre-douce);
    }
    .enr-paires dt::after { content: "\00a0: "; }
    .enr-paires dd {
        display: inline;
        margin: 0;
        overflow-wrap: anywhere;
    }
    /* note secondaire de colonne : sur sa ligne, elle ne doit pas
       rester collée en ligne avec la valeur (dd en display:inline) */
    .enr-paires dd br { display: block; }

    /* Pied de carte secondaire (bloc carte_secondaire) : pendant du
       second <tr> du rendu large (accès, dernière connexion...). Filet
       de séparation comme le pied d'actions, dont il partage la place. */
    .enr-secondaire {
        margin: 0.5rem 0 0;
        padding-top: 0.45rem;
        border-top: 1px solid var(--trait);
        font-size: 0.88rem;
    }
    .enr-secondaire + details.enr-repli { margin-top: 0.25rem; }

    /* Pied d'actions REPLIÉ (arbitrage n° 4, étude §6.4) : <details>
       natif, donc clavier et lecteur d'écran sans JavaScript. Le
       marqueur natif est remplacé par un chevron décoratif, y compris
       sur Safari (qui garde son marqueur malgré display: flex). */
    details.enr-repli {
        margin-top: 0.5rem;
        border-top: 1px solid var(--trait);
    }
    details.enr-repli > summary {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 44px;          /* cible tactile RGAA */
        cursor: pointer;
        font-weight: 600;
        color: var(--bleu-texte);
        list-style: none;
    }
    details.enr-repli > summary::-webkit-details-marker { display: none; }
    details.enr-repli > summary::before { content: "\25B8"; }
    details.enr-repli[open] > summary::before { content: "\25BE"; }

    /* dépliés, les boutons s'empilent en pleine largeur, un par rangée :
       cibles maximales, aucun voisinage de boutons (§6.4) */
    .enr-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.1rem 0 0.45rem;
    }
    .enr-actions form { display: block; margin: 0; }
    .enr-actions .bouton,
    .enr-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;          /* cible tactile RGAA */
        margin: 0;
    }
    /* un formulaire par ligne (renommage des référentiels) vit dans le
       même repli, en pleine largeur */
    .enr-actions input[type="text"],
    .enr-actions select {
        width: 100%;
        min-height: 44px;
    }

    /* ------------------------------------------- filtres, tri, pied */

    /* filtres en pile (arbitrage n° 3) : les champs passent en colonne,
       pleine largeur, cibles tactiles de 44 px */
    .zone-filtres form.filtres {
        flex-direction: column;
        align-items: stretch;
    }
    /* Les modules donnent une base de flexion aux champs (auth :
       « .filtres > div { flex: 1 1 10rem } »), largeur tant que la
       rangée est horizontale mais HAUTEUR une fois la pile en colonne :
       chaque champ ferait alors 10 rem de haut. La base est rendue au
       contenu ici. */
    .zone-filtres form.filtres > div {
        flex: 0 0 auto;
        width: 100%;
    }
    .zone-filtres input[type="text"],
    .zone-filtres input[type="date"],
    .zone-filtres select {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
    details.zone-tri { display: block; }
    .tableau-entete .tableau-tri-bouton { display: inline-flex; }

    .zone-filtres form.filtres > .champ-tri {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .champ-tri > div {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .zone-filtres form.filtres > .filtres-boutons .bouton {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* pied du tableau : étendue puis boutons, cibles tactiles */
    .tableau-pied .bouton {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* pagination : « page x sur y » au-dessus, les deux boutons sur une
       ligne en dessous (retour Yves du 23/08/2026) */
    nav.pagination { width: 100%; margin-left: 0; }
    nav.pagination .note { flex-basis: 100%; order: -1; }
}