/* Subventions aux associations — habillage métier par-dessus la charte du socle.
   Copyright (C) 2026 Franck Petit — GNU GPL v3 (voir LICENSE)
   Aucune couleur en dur : tout vient des jetons du socle (charte.css), pour que
   le thème sombre et la couleur d'entité suivent sans retouche. Les seules
   exceptions sont l'impression et le QR d'appariement, commentées sur place. */

/* --- Largeur de travail -------------------------------------------------
   La charte du socle borne une page à 1180 px : la bonne mesure pour un
   texte qu'on lit. Ici on INSTRUIT, sur des tableaux de dix à quinze
   colonnes, et tout le service est équipé d'écrans de 24 pouces au moins :
   à 1180 px, l'objet des dossiers se repliait sur quatre lignes pendant que
   le tiers de l'écran restait blanc. La borne haute reste nécessaire — au
   delà, l'œil perd sa ligne en revenant à la colonne de gauche.
   Le guichet des associations, lui, garde la largeur de lecture : sa feuille
   de style est séparée. */
.sc-main { max-width: min(1680px, 96vw); }

.pv-layout { display: flex; flex-direction: column; gap: var(--pas); }
.pv-contenu { min-width: 0; }

/* --- Navigation métier ------------------------------------------------- */
.onglets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 6px; box-shadow: var(--ombre);
}
/* Zone tactile d'au moins 44 px : l'onglet est un contrôle, pas un mot. */
.onglets a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 12px; border-radius: var(--r-s); color: var(--encre-douce);
  font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.onglets a:hover { background: var(--marque-clair); color: var(--marque-texte); text-decoration: none; }
.onglets a.actif { background: var(--marque); color: var(--marque-contraste); }
.onglets .role {
  margin-left: auto; font-size: .8rem; color: var(--encre-douce);
  border: 1px dashed var(--ligne); border-radius: var(--r-pilule); padding: 4px 12px;
}
.choix-entite { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* --- Fil d'Ariane / texte secondaire ----------------------------------- */
.secondaire { color: var(--encre-douce); font-size: .85rem; font-weight: 400; }
p.secondaire { margin: .5rem 0 0; }
h1 .secondaire, h2 .secondaire, h3 .secondaire { font-weight: 400; }
/* Paragraphe d'aide : explique l'écran, se lit en 80 signes par ligne. */
.aide { color: var(--encre-douce); font-size: .88rem; max-width: 78ch; margin: 0 0 var(--pas); }
.aide strong { color: var(--encre); }
/* Commentaire interne d'instruction : clairement « à part » dans la liste. */
.interne {
  display: block; margin-top: .25rem; padding-left: .6rem;
  border-left: 3px solid var(--ligne); font-size: .9rem; color: var(--encre);
}

/* --- Blocs et cartes ---------------------------------------------------- */
.bloc {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: var(--pas); box-shadow: var(--ombre); margin-bottom: var(--pas);
}
.bloc h2 { margin-top: 0; font-size: 1.05rem; }
.bloc h3 { font-size: .95rem; margin-bottom: 6px; }
/* Bloc d'information (consignes, rappel de procédure) : liseré de la couleur
   « info », fond discret — les jetons gèrent le thème sombre. */
.bloc.info {
  background: color-mix(in srgb, var(--info-fond) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 35%, var(--ligne));
  border-left: 4px solid var(--info);
}
.colonnes { display: grid; gap: var(--pas); grid-template-columns: 1fr; }
@media (min-width: 900px) { .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vide { text-align: center; color: var(--encre-douce); }

.cartes {
  display: grid; gap: 12px; margin-bottom: var(--pas);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--ombre);
}
/* Tuile-lien : elle se comporte comme une carte, pas comme un lien de texte. */
a.carte { color: inherit; text-decoration: none; }
a.carte:hover { box-shadow: var(--ombre-h); border-color: var(--marque); text-decoration: none; }
a.carte:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.carte .chiffre { font-size: 1.7rem; font-weight: 650; color: var(--marque-texte); line-height: 1.1; }
.carte span:last-child { font-size: .82rem; color: var(--encre-douce); }
.carte.alerte { border-color: var(--erreur); background: var(--erreur-fond); }
.carte.alerte .chiffre { color: var(--erreur); }
.carte.attention { border-color: var(--alerte); background: var(--alerte-fond); }
.carte.attention .chiffre { color: var(--alerte); }

.chapeau { color: var(--encre-douce); max-width: 78ch; }
.muted { color: var(--encre-douce); font-size: .85rem; }
td .muted, dd .muted, li .muted { display: block; }

/* --- Tableaux ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
/* Jamais sous 12 px, quelle que soit la taille de base calculée par le socle. */
th {
  font-size: max(.78rem, 12px); text-transform: uppercase; letter-spacing: .03em;
  color: var(--encre-douce); font-weight: 600;
}
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.retard td { background: color-mix(in srgb, var(--erreur-fond) 60%, transparent); }
/* Ligne inactive (association désactivée, type de pièce retiré). Les deux
   orthographes existent dans les écrans. */
tr.inactif td, tr.inactive td { opacity: .55; }
/* Cellule d'actions : liens et boutons-liens côte à côte, qui passent à la
   ligne plutôt que d'élargir la colonne. */
td.actions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
/* Enveloppe à défilement pour un tableau posé hors d'un .bloc : il défile
   dans son cadre, jamais la page entière. À poser autour des <table class="liste">
   des écrans de liste (demandes, associations, campagnes, accès, journal). */
.table-large {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  box-shadow: var(--ombre); overflow-x: auto; margin-bottom: var(--pas);
  -webkit-overflow-scrolling: touch;
}
.table-large > table { margin: 0; }
.table-large > table tbody tr:last-child td { border-bottom: none; }
/* Dans un .bloc, un tableau large défile sur petit écran. On ne force
   `display:block` qu'en dessous de 760 px : au-delà, il casserait la largeur
   à 100 % du tableau (la boîte interne ne s'étire plus). */
@media (max-width: 760px) {
  .bloc > table { display: block; overflow-x: auto; white-space: normal; }
}

/* --- Messages ----------------------------------------------------------- */
.msg { padding: 10px 14px; border-radius: var(--r-s); margin-bottom: 12px; font-size: .9rem; }
.msg.ok { background: var(--ok-fond); color: var(--ok); }
.msg.erreur { background: var(--erreur-fond); color: var(--erreur); }
.msg.info { background: var(--info-fond); color: var(--info); }
.msg.alerte { background: var(--alerte-fond); color: var(--alerte); }
/* Message d'erreur en paragraphe (écran du second facteur). */
p.erreur {
  background: var(--erreur-fond); color: var(--erreur); border-left: 4px solid var(--erreur);
  padding: 10px 14px; border-radius: var(--r-s); margin: 0 0 12px; font-size: .9rem;
}
/* Bloc d'alerte (dissolution, porte-documents incomplet, convention requise).
   Un liseré en plus de la teinte : reste identifiable en impression N&B. */
div.alerte:not(.msg):not(.sc-flash) {
  background: var(--alerte-fond); color: var(--alerte); border-left: 4px solid var(--alerte);
  border-radius: var(--r-s); padding: 10px 14px; margin: 0 0 var(--pas); font-size: .92rem;
}
div.alerte:not(.msg):not(.sc-flash) a { color: inherit; text-decoration: underline; }
div.alerte:not(.msg):not(.sc-flash) ul { margin-top: .4rem; margin-bottom: 0; }
/* Mention d'alerte en ligne (« fermé », « bilan attendu », « échéance dépassée »). */
.alerte-texte { color: var(--alerte); font-size: .85rem; font-weight: 600; }
li.alerte-texte { font-weight: 400; }

/* --- Pilules d'état ------------------------------------------------------ */
/* Le libellé est toujours écrit ; la teinte ne fait que l'appuyer. Un bord
   est posé partout : la pilule reste délimitée sans couleur et en N&B. */
.etat {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pilule);
  font-size: .78rem; font-weight: 600; white-space: nowrap; line-height: 1.5;
  background: var(--surface-2); color: var(--encre-douce); border: 1px solid var(--ligne);
}
/* Dossier : saisie → instruction → correction → attente_vote → controle/vote → rejete/annulee */
.etat-saisie       { background: var(--surface-2); color: var(--encre-douce); border-style: dashed; }
.etat-instruction  { background: var(--info-fond); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.etat-correction   { background: var(--alerte-fond); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); }
.etat-attente_vote { background: var(--marque-clair); color: var(--marque-texte); border-color: color-mix(in srgb, var(--marque) 35%, transparent); }
.etat-controle     { background: var(--marque-clair); color: var(--marque-texte); border-color: var(--marque-texte); }
.etat-vote         { background: var(--ok-fond); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.etat-rejete       { background: var(--erreur-fond); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 35%, transparent); }
.etat-annulee      { background: transparent; color: var(--encre-douce); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1px; }
/* Campagne : brouillon → ouverte → close → archivee (même composant). */
.etat-brouillon    { border-style: dashed; }
.etat-ouverte      { background: var(--ok-fond); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.etat-close        { background: var(--alerte-fond); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); }
.etat-archivee     { opacity: .75; }

/* Compteur (messages non lus) : plein, couleur de marque. */
.pastille {
  display: inline-block; margin-right: .4rem; padding: 1px 8px; border-radius: var(--r-pilule);
  background: var(--marque); color: var(--marque-contraste); font-size: .74rem;
  font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Filtre appliqué, affiché en « jeton » retirable à côté des champs. */
.filtre-actif {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  padding: 0 12px; border-radius: var(--r-pilule);
  background: var(--marque-clair); color: var(--marque-texte); font-size: .85rem;
}
.filtre-actif a { color: inherit; text-decoration: underline; }

/* Badge de résultat (import des votes : importable, importée, inchangée, rejetée).
   Le libellé est écrit ; la teinte l'appuie, le bord le délimite. */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pilule);
  font-size: .74rem; font-weight: 600; background: var(--surface-2);
  color: var(--encre-douce); border: 1px solid var(--ligne); white-space: nowrap;
}
.badge.ok { background: var(--ok-fond); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.badge.alerte { background: var(--erreur-fond); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 35%, transparent); }
.badge.etat-ecarte { border-style: dashed; opacity: .8; }

/* --- Formulaires -------------------------------------------------------- */
.grille { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille .large, .grille fieldset, .grille .actions-form { grid-column: 1 / -1; }
.grille.bordee {
  border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px; margin-bottom: 12px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--encre-douce); }
label.case { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
/* Zone tactile : 44 px de haut sur tout contrôle de saisie. */
input, select, textarea {
  font: inherit; font-size: .92rem; color: var(--encre); background: var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 8px 10px; width: 100%;
  min-height: 44px;
}
input[type="checkbox"], input[type="radio"] {
  width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0; margin: 0; flex: none;
  accent-color: var(--marque);
}
label.case input { width: auto; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marque); outline-offset: 1px; border-color: var(--marque);
}
textarea { resize: vertical; min-height: 5.5rem; }
fieldset { border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px; }
fieldset legend { font-size: .8rem; color: var(--encre-douce); padding: 0 6px; }
.obligatoire { font-size: .7rem; text-transform: uppercase; color: var(--erreur); letter-spacing: .04em; }
.actions-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enligne { display: inline-flex; gap: 6px; align-items: center; }
/* Formulaire principal d'un écran : une colonne régulière, largeur de lecture bornée. */
.formulaire { display: grid; gap: 12px; max-width: 56rem; margin: 0 0 var(--pas); }
.formulaire > button, .formulaire > .actions-form { justify-self: start; }
/* Formulaire en ligne (sélecteur + bouton, geste dans une cellule) : il ne
   prend pas toute la largeur et ses champs non plus. */
.en-ligne { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.en-ligne input:not([type="checkbox"]):not([type="radio"]), .en-ligne select { width: auto; min-width: 9rem; }

/* `display` sur les boutons bat la règle par défaut de [hidden] : sans ceci, un
   bouton de repli masqué par le JS resterait visible. */
[hidden] { display: none !important; }

button, .btn, a.bouton {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid transparent;
  background: var(--marque); color: var(--marque-contraste); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  line-height: 1.3;
}
button:hover, .btn:hover, a.bouton:hover { background: var(--marque-fonce); text-decoration: none; }
button.sec, .btn.sec, a.sec {
  background: var(--surface); color: var(--encre); border-color: var(--ligne);
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 14px; border-radius: var(--r-s); font-size: .88rem; font-weight: 600;
  border: 1px solid var(--ligne);
}
button.sec:hover, .btn.sec:hover, a.sec:hover { background: var(--surface-2); text-decoration: none; }
/* Le bouton de thème du bandeau du socle garde sa taille et sa graisse : la
   règle générale ci-dessus ne doit pas l'épaissir ni le rendre gras. */
.sc-nav button { min-height: 0; font-weight: inherit; display: inline-block; line-height: inherit; }
/* Bouton présenté comme un lien : un geste qui DOIT être un POST (retirer un
   accès, archiver, réinitialiser un second facteur) sans l'aspect d'un bouton
   plein au milieu d'une cellule. Même couleur que les liens, donc même
   ajustement en thème sombre que celui du socle. La zone tactile de 44 px est
   obtenue par le rembourrage, compensé par des marges négatives pour ne pas
   gonfler la ligne. */
button.lien {
  background: none; border: 0; border-radius: 3px; min-height: 0;
  padding: 11px 4px; margin: -11px -4px; display: inline; line-height: inherit;
  font: inherit; font-size: inherit; font-weight: 500; color: var(--marque);
  text-decoration: none; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}
button.lien:hover, button.lien:focus-visible { background: none; text-decoration: underline; }
button.lien:focus-visible { outline: 2px solid var(--marque); outline-offset: 0; }
:root[data-theme="sombre"] button.lien { color: var(--marque-texte); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) button.lien { color: var(--marque-texte); }
}

/* Barre de recherche / filtres (GET) : champs côte à côte, étiquette devant. */
.recherche, .filtres {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: var(--pas);
}
.recherche label, .filtres label { flex-direction: row; align-items: center; gap: 6px; }
.recherche input:not([type="checkbox"]):not([type="radio"]), .recherche select,
.filtres input:not([type="checkbox"]):not([type="radio"]), .filtres select { width: auto; min-width: 150px; }
.recherche input[name="q"] { flex: 1 1 14rem; }
.filtres label.case { gap: 6px; }
/* Un état tronqué en « En cou… » oblige à ouvrir la liste pour se relire. */
td select { min-width: 9rem; }

/* --- Listes ------------------------------------------------------------- */
/* Liste simple : puces conservées (ce sont des listes), espacement aéré. */
ul.simple { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
ul.simple li { margin-bottom: .3rem; }
ul.simple li:last-child { margin-bottom: 0; }
ul.pieces, ul.compact { margin: 0; padding-left: 18px; }
ul.compact li { margin-bottom: 4px; }
/* Fil des échanges avec l'association : une bulle par message, celles du
   service à droite sur fond de marque, celles de l'association à gauche.
   Le sens est aussi écrit en toutes lettres (« Service », « Association »). */
.fil { list-style: none; margin: 0 0 var(--pas); padding: 0; display: grid; gap: .6rem; }
.fil li {
  max-width: min(78ch, 92%); padding: .55rem .9rem; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--ligne);
}
.fil li.sortant { justify-self: end; background: var(--marque-clair); border-color: transparent; }
.fil li.entrant { justify-self: start; }
.fil li .secondaire { display: block; }
.fil li p { margin: .25rem 0 0; overflow-wrap: anywhere; }

/* --- Fiches ------------------------------------------------------------- */
dl.fiche { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
@media (min-width: 620px) { dl.fiche { grid-template-columns: minmax(120px, 200px) 1fr; } }
dl.fiche dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); padding-top: 6px; }
dl.fiche dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.empreinte code { font-size: .78rem; }
.pagination { display: flex; gap: 16px; }
/* Connexion et second facteur : une colonne étroite, centrée. */
.connexion { max-width: 420px; margin: 8vh auto; padding: 0 16px; }
.connexion form { display: grid; gap: 8px; }
.connexion form button { justify-self: start; }
.page-connexion .connexion { padding: var(--pas); background: var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.uri { font-size: .85rem; }

/* Masqué à l'écran, lu par les lecteurs d'écran (légende de tableau…).
   Technique du clip : `display:none` retirerait l'élément de l'arbre d'accessibilité. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Autocomplétion sur l'annuaire (écran des accès) -------------------- */
.ac-box {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  box-shadow: var(--ombre-h); max-height: 280px; overflow-y: auto; padding: 4px;
}
/* Sélecteurs plus forts que la règle générale des boutons : une suggestion est
   un <button>, mais elle ne doit pas ressembler à un bouton d'action. */
.ac-box .ac-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px;
  border-radius: var(--r-s); cursor: pointer; font: inherit; color: var(--encre);
  min-height: 44px; justify-content: center;
}
.ac-box .ac-item:hover, .ac-box .ac-item:focus, .ac-box .ac-item.actif {
  background: var(--marque-clair); color: var(--encre); outline: none;
}
.ac-box .ac-item:hover .ac-id, .ac-box .ac-item:focus .ac-id,
.ac-box .ac-item.actif .ac-id { color: var(--encre-douce); }
.ac-nom { font-weight: 600; font-size: .9rem; }
.ac-id { font-size: .78rem; color: var(--encre-douce); }
.ac-avert { font-size: .78rem; color: var(--alerte); margin-top: 2px; }
.ac-empty { padding: 10px 12px; color: var(--encre-douce); font-size: .85rem; }
.sujet-retenu {
  margin: 0; font-size: .85rem; font-weight: 600; color: var(--marque-texte);
  background: var(--marque-clair); border-radius: var(--r-s); padding: 6px 10px;
}

/* --- Appariement du second facteur ------------------------------------- */
/* Le QR est dessiné par la bibliothèque dans un <canvas> ; le fond blanc est
   obligatoire, y compris en thème sombre : un lecteur ne décode pas un code
   inversé. Encre forcée avec lui, comme l'exige la charte. */
.qr {
  width: 200px;
  height: 200px;
  margin: 1rem auto;
  padding: 8px;
  background: #fff;
  color: #1b232d;
  border-radius: 8px;
}
.qr img, .qr canvas { display: block; }

.secret code {
  font-size: 1.05rem;
  letter-spacing: .08em;
  word-break: break-all;
}

.codes-secours {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .4rem;
}
.codes-secours code {
  display: block;
  padding: .35rem .5rem;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .06em;
  background: var(--surface-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r-s);
}

/* --- Listes de définitions (fiches) ------------------------------------- */
/* Sans mise en page, un <dl> empile étiquette et valeur sur toute la largeur :
   sur une fiche d'association, l'objet statutaire — parfois 2 000 signes —
   devient un pavé illisible. Deux colonnes, et une largeur de lecture bornée. */
.kv {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 2px 1.5rem;
  margin: 0;
}
.kv dt {
  color: var(--encre-douce);
  font-size: .85rem;
  padding: .45rem 0;
  border-top: 1px solid var(--ligne);
}
.kv dd {
  margin: 0;
  padding: .45rem 0;
  border-top: 1px solid var(--ligne);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv dt:first-of-type, .kv dt:first-of-type + dd { border-top: 0; }
@media (max-width: 700px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { padding-bottom: 0; border-top: 1px solid var(--ligne); }
  .kv dd { padding-top: .15rem; border-top: 0; }
}

/* Un texte suivi ne se lit pas au-delà d'environ 80 signes par ligne. */
.kv dd p, .prose { max-width: 78ch; }

/* --- Objet statutaire : long par nature, replié par défaut --------------- */
/* Le <summary> porte l'extrait ET le libellé de bascule : il doit être le
   premier enfant du <details>, faute de quoi le navigateur en fabrique un
   implicite et affiche tout le contenu — extrait et texte complet ensemble. */
.objet summary { cursor: pointer; list-style-position: outside; }
.objet summary::marker { color: var(--encre-douce); }
.objet .extrait, .objet .complet { max-width: 78ch; }
.objet .bascule {
  display: block;
  margin-top: .35rem;
  color: var(--marque-texte);
  font-size: .85rem;
}
/* Ouvert : l'extrait et l'invitation à déplier laissent place au texte entier
   et à l'invitation inverse. Aucun JavaScript, donc rien à charger. */
.objet .replier { display: none; }
.objet[open] .extrait, .objet[open] .deplier { display: none; }
.objet[open] .replier { display: block; }
.objet .complet { margin-top: .35rem; }

/* --- Étiquettes de catégorie -------------------------------------------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; }
.etiquette {
  display: inline-block;
  padding: .12rem .5rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--encre-douce);
  background: var(--fond);
  text-decoration: none;
}
a.etiquette:hover { border-color: var(--marque-texte); color: var(--marque-texte); }
.etiquette.theme {
  border-color: color-mix(in srgb, var(--marque) 45%, var(--ligne));
  color: var(--marque-texte);
  background: var(--marque-clair);
}

/* --- En-tête de fiche ---------------------------------------------------- */
/* Le nom, les identifiants et la catégorie sont ce qu'on cherche en ouvrant une
   fiche : ils doivent tenir au-dessus de la ligne de flottaison, pas se lire
   après un objet statutaire de trois mille signes. */
.fiche-entete {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--pas);
  margin-bottom: var(--pas);
}
.fiche-entete h1 { margin: 0 0 .3rem; }
.fiche-entete .sigle { color: var(--encre-douce); font-weight: 400; }
.identifiants {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  font-size: .85rem; color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.identifiants b { font-weight: 600; color: var(--encre); }

/* Deux colonnes sur grand écran : l'instruction à gauche, ce qu'on consulte
   du coin de l'œil à droite. Une seule colonne dès que la place manque. */
.fiche-colonnes { display: grid; gap: var(--pas); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .fiche-colonnes { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
}
.fiche-colonnes > * { min-width: 0; }
.bloc.compact { font-size: .9rem; }
.bloc.compact h2 { font-size: .95rem; }

/* --- Journaux techniques -------------------------------------------------- */
/* Un journal se lit en police à chasse fixe : les colonnes d'un journal d'accès
   ne s'alignent pas autrement, et une pile d'appels devient illisible. */
.journal {
  background: var(--surface-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r-s);
  padding: .75rem;
  max-height: 32rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.45;
  /* Les lignes longues défilent plutôt que de se replier : une ligne repliée
     fait perdre le repère de début d'enregistrement. */
  white-space: pre;
  tab-size: 4;
}

/* Le détail d'une entrée de journal peut être long : il ne doit pas écraser les
   colonnes qui servent à se repérer. */
.liste td.detail { max-width: 22rem; font-size: .85rem; color: var(--encre-douce); overflow-wrap: anywhere; }

/* --- Mouvement ------------------------------------------------------------ */
/* Les transitions n'existent que si l'utilisateur ne demande pas leur absence. */
@media (prefers-reduced-motion: no-preference) {
  a.carte { transition: box-shadow .12s ease, border-color .12s ease; }
  .onglets a, button, .btn, a.bouton, .etiquette { transition: background-color .13s ease, color .13s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Impression ----------------------------------------------------------- */
@media print {
  .sc-entete, .onglets, .sc-pied, .recherche, .filtres, .en-ligne, .formulaire,
  button, .btn, a.bouton, .pagination { display: none !important; }
  /* Impression : fond et encre forcés ensemble — un fond clair sans encre
     sombre imprimerait du texte pâle sur blanc. Couleurs en dur justifiées :
     le papier n'a pas de thème. */
  body { background: #fff; color: #1b232d; }
  .bloc, .table-large, .carte { border-color: #999; box-shadow: none; break-inside: avoid; }
  .etat, .badge, .pastille, .alerte-texte, div.alerte:not(.msg):not(.sc-flash), .bloc.info {
    color: #000; background: none; border-color: #000;
  }
  table { font-size: 9pt; }
  th { font-size: 9pt; }
  a { color: inherit; text-decoration: none; }
}

/* La colonne d'actions d'une liste : des liens courts, les uns sous les
   autres sur petit écran, en ligne au-delà. */
td.actions { white-space: nowrap; }
td.actions a { display: inline-block; margin-right: .6rem; }
@media (max-width: 760px) { td.actions a { display: block; margin: .2rem 0; } }