/* L'atelier des données (chantier Données, lot R3).
 *
 * Feuille PROPRE à l'atelier, chargée par `atelier/_base.html` seulement : la feuille
 * du site n'est pas touchée. Elle n'emploie que les jetons de `styles.css` (couleurs,
 * espacements, cibles de 44 px, polices) : mode sombre et contrastes suivent d'eux-mêmes.
 *
 * Le type n'est plus choisi (chantier ATELIER) : il se déduit de la grille, côté
 * serveur. Règle constante, héritée du R3 : un champ n'est masqué que s'il est VIDE
 * (`:placeholder-shown`, d'où les `placeholder=" "`) — un champ rempli reste visible,
 * sinon le refus du serveur porterait sur un champ que personne ne voit.
 */

.fil-atelier { margin-bottom: var(--esp-8); }

.document-atelier {
  background: var(--panneau);
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  padding: var(--esp-12) var(--esp-16);
  margin-bottom: var(--esp-24);
}
.document-atelier h2 { margin: var(--esp-4) 0 var(--esp-8); }
.document-atelier p { margin: 0 0 var(--esp-4); overflow-wrap: anywhere; }

.saisie fieldset {
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  background: var(--panneau);
  padding: var(--esp-12) var(--esp-16) var(--esp-16);
  margin: 0 0 var(--esp-24);
  min-width: 0;
}
.saisie legend {
  font-family: var(--police-titres);
  font-size: 18px;
  padding: 0 var(--esp-4);
}

.deux-colonnes { display: grid; gap: 0 var(--esp-16); }
@media (min-width: 640px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }

/* Les lignes de valeurs : une ligne par rangée sur grand écran, empilées sur téléphone. */
.lignes-saisie { display: grid; gap: var(--esp-12); }
.ligne-saisie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-8) var(--esp-12);
  padding-top: var(--esp-12);
  border-top: var(--trait-sep);
}
.ligne-saisie label { margin: 0; flex: 1 1 6rem; }
.ligne-saisie .col-libelle, .ligne-saisie .col-explication { flex: 3 1 10rem; }
.ligne-saisie .col-valeur { flex: 2 1 7rem; }
.ligne-saisie .col-valeur input { text-align: right; font-variant-numeric: tabular-nums; }
.ligne-saisie .col-millesime, .ligne-saisie .col-parent, .ligne-saisie .col-annee { flex: 0 1 6rem; }
/* Un carré de 44 px plutôt qu'un mot : la rangée tient alors sur une ligne en grand
 * écran. Le libellé accessible est porté par `aria-label`. */
.ligne-saisie .retirer { flex: none; width: var(--cible); padding: 0; }
.ligne-saisie .numero {
  flex: 0 0 2rem;
  min-height: var(--cible);
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  color: var(--secondaire);
}
.ligne-saisie .erreur-champ { flex: 1 0 100%; }

/* --- Le formulaire de relevé (chantier ATELIER, étape 2) --------------------------------
 * Deux sous-étapes, « Recopier » et « Décrire », chacune avec un encadré à côté
 * (vérifications, carte d'identité) à partir de 1024 px ; empilés en dessous. Aucune
 * couleur nouvelle : seulement les jetons de `styles.css` (jour, nuit, arc-en-ciel). */
.etape-releve { margin: 0 0 var(--esp-32); }
.titre-etape { margin: 0 0 var(--esp-8); }
.etape-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-16) var(--esp-24); }
@media (min-width: 1024px) {
  .etape-colonnes { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .etape-cote { position: sticky; top: var(--esp-16); }
}
.etape-principale { min-width: 0; }
.etape-cote {
  background: var(--panneau);
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  padding: var(--esp-12) var(--esp-16);
}
.etape-cote h3 { margin: 0 0 var(--esp-8); font-size: 16px; }
.verifications ul { margin: 0; padding-left: 1.1em; }
.verifications li { margin-bottom: var(--esp-4); overflow-wrap: anywhere; }
.verifications .ok { color: var(--encre); }
.verifications .alerte { color: var(--erreur); }
.carte-releve .identite-serie { margin: 0; display: block; }
.carte-releve .identite-serie div { margin-bottom: var(--esp-8); }
.carte-releve dt { color: var(--secondaire); font-size: 13px; }
.carte-releve dd { margin: 0; overflow-wrap: anywhere; }
.lecture-unite { min-height: 22px; font-variant-numeric: tabular-nums; }
.saisie.releve textarea { width: 100%; }
.fiche-budget { margin: var(--esp-16) 0; }
.fiche-budget > summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; }
.fiche-budget > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* La grille. */
.grille-releve {
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  background: var(--panneau);
  padding: var(--esp-12) var(--esp-16) var(--esp-8);
  margin-top: var(--esp-16);
}
.barre-grille { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-8) var(--esp-16); }
.titre-grille { margin: 0 auto 0 0; font-size: 16px; align-self: center; }
.barre-grille .annee-commune { margin: 0; display: flex; align-items: center; gap: var(--esp-8); }
.barre-grille .annee-commune input { width: 6rem; }
.barre-grille .choix-par-annee { margin: 0; display: flex; align-items: center; gap: var(--esp-8); min-height: var(--cible); }
.coller { flex: 1 0 100%; }
.coller > summary { min-height: var(--cible); display: inline-flex; align-items: center; cursor: pointer; }
.coller > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.annonce-grille:empty { display: none; }
.coller textarea { width: 100%; font-variant-numeric: tabular-nums; }

/* Une année par ligne (évolution) : la colonne « Année » de chaque ligne remplace
 * l'année commune — sauf si celle-ci est remplie (un champ rempli reste visible). */
.grille-releve:not(:has(#annee_par_ligne:checked)) .col-millesime:has(input:placeholder-shown),
.grille-releve:has(#annee_par_ligne:checked) .annee-commune:has(input:placeholder-shown) { display: none; }

/* Le rattachement : les boutons ⇥ ⇤ quand le script tourne ; sinon le numéro. */
.saisie.js-actif .col-parent { display: none; }
.saisie:not(.js-actif) .aide-ranger, .saisie.js-actif .aide-rattachement { display: none; }
.col-niveau { display: flex; gap: var(--esp-4); flex: none; }
.col-niveau button { width: var(--cible); min-height: var(--cible); padding: 0; }
.ligne-saisie.niveau-1 .col-libelle { padding-left: 1.75rem; position: relative; }
.ligne-saisie.niveau-1 .col-libelle::before {
  content: "↳";
  position: absolute;
  left: 0.25rem;
  bottom: 12px;
  color: var(--secondaire);
}
.ligne-saisie.insere { background: var(--jaune-tendre); }
.ligne-saisie input.illisible,
.ligne-saisie input.illisible:focus { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur); }
/* Les étiquettes de colonne se lisent une fois, en tête, sur grand écran ; sur téléphone
 * (lignes empilées), chaque case garde la sienne. */
@media (min-width: 720px) {
  .lignes-saisie .ligne-saisie:not(:first-child) .etiquette-grille {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .grille-releve .ligne-saisie { flex-wrap: nowrap; }
}

.msg.ecart { background: var(--panneau); border-color: var(--or-brule); }
.soumission .encart { max-width: var(--mesure); }

.tableau-atelier caption { text-align: left; color: var(--secondaire); padding-bottom: var(--esp-8); }
.tableau-atelier .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-brut { max-width: var(--mesure); }

.fiche-atelier { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--esp-4) var(--esp-16); }
.fiche-atelier dt { color: var(--secondaire); }
.fiche-atelier dd { margin: 0; }

/* Arbitrage : les réponses radio au corps du texte, comme les cases à cocher du site
 * (`styles.css` ne le fait que pour les cases). */
.arbitrage label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  font-size: 15px;
  line-height: 22px;
  color: var(--encre);
  min-height: var(--cible);
  margin: 0;
  cursor: pointer;
}
.ecart-arbitrage { margin-bottom: var(--esp-16); }
.consigne-atelier { margin-bottom: var(--esp-16); }

/* La banque en rubriques (demande du client, 24/09/2026) : un <details> par rubrique,
 * une flèche « › » qui tourne d'un quart de tour quand on déroule. */
.rubrique-banque { border-top: 1px solid var(--trait); }
.rubrique-banque:last-of-type { border-bottom: 1px solid var(--trait); }
.rubrique-banque > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-8);
  min-height: var(--cible);
  padding: var(--esp-8) 0;
  cursor: pointer;
  list-style: none;
}
.rubrique-banque > summary::-webkit-details-marker { display: none; }
.rubrique-banque > summary::before {
  content: "›";
  display: inline-block;
  width: 1em;
  text-align: center;
  font-weight: bold;
  transition: transform 0.15s;
}
.rubrique-banque[open] > summary::before { transform: rotate(90deg); }
.rubrique-banque > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rubrique-titre { font-weight: 600; }
.rubrique-banque > .tableau-atelier { margin-bottom: var(--esp-16); }
@media (prefers-reduced-motion: reduce) {
  .rubrique-banque > summary::before { transition: none; }
}

/* --- Le relevé multi-années (chantier ATELIER, étape 3) -----------------------------
 * La grille est un vrai tableau (lignes × années) ; elle défile dans son cadre, jamais la
 * page. Les classes de la grille de l'étape 2 (`ligne-saisie`, `lignes-saisie`) y sont
 * gardées pour le script : on leur rend ici leur rôle de tableau. */
.defilement-grille { overflow-x: auto; max-width: 100%; }
.grille-annees { border-collapse: collapse; min-width: 100%; }
.grille-annees tbody.lignes-saisie { display: table-row-group; }
.grille-annees .ligne-saisie { display: table-row; }
.grille-annees th, .grille-annees td {
  /* Contient le texte réservé aux lecteurs d'écran (`.hors-ecran`), qui sinon se place
   * par rapport à la page et la fait déborder. */
  position: relative;
  border-top: var(--trait-sep);
  padding: var(--esp-4) var(--esp-8);
  vertical-align: top;
  text-align: left;
}
.grille-annees thead th { vertical-align: bottom; font-weight: 600; }
.grille-annees .numero { width: 2.5rem; color: var(--secondaire); font-variant-numeric: tabular-nums; }
.grille-annees .col-libelle { min-width: 14rem; }
.grille-annees .case { min-width: 9rem; }
.grille-annees .case input { text-align: right; font-variant-numeric: tabular-nums; width: 100%; }
.grille-annees .case .nombre { display: block; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grille-annees .col-parent input { width: 4rem; }
.grille-annees .entete-annee { min-width: 10rem; }
.grille-annees .entete-annee > * { display: block; margin-bottom: var(--esp-4); }
.grille-annees .annee { font-family: var(--police-titres); font-size: 18px; }
.grille-annees .etat-colonne { font-size: 13px; color: var(--secondaire); }
.grille-annees .libelle-annee, .grille-annees .emplacement-lu { display: block; font-size: 13px; }
.grille-annees .actions-ligne { white-space: nowrap; }
.grille-annees .actions-ligne button { width: var(--cible); min-height: var(--cible); padding: 0; }
.grille-annees .ligne-saisie.figee .libelle-fige { color: var(--encre); }
.grille-annees .ligne-saisie.niveau-1 .col-libelle { padding-left: 2rem; }
.grille-annees .ligne-saisie.niveau-1 .col-libelle::before { bottom: auto; top: var(--esp-8); }
.colonnes-a-soumettre label { display: inline-flex; align-items: center; gap: var(--esp-8); margin-right: var(--esp-16); min-height: var(--cible); }
.seconde-lecture .conteste { display: flex; align-items: center; gap: var(--esp-8); min-height: var(--cible); margin: 0; }

/* L'écran 2.1 : les années d'une collection. Pas encore dans la banque = pointillés. */
.frise-annees { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-8); }
.frise-annees li {
  border: 1px solid var(--gris-icone);
  border-radius: var(--rayon-objet);
  padding: var(--esp-4) var(--esp-8);
  min-height: var(--cible);
  display: flex; align-items: center; gap: var(--esp-8);
}
.frise-annees li label { margin: 0; display: flex; align-items: center; gap: var(--esp-4); }
.frise-annees .annee-relevee { background: var(--panneau); }
.frise-annees .annee-absent { border-style: dashed; color: var(--secondaire); }
.proposition-collection fieldset label:has(> input[type="checkbox"]) { display: flex; gap: var(--esp-8); align-items: center; min-height: var(--cible); }

/* Sur un relevé de seize ans, le libellé reste visible au défilement horizontal. */
.grille-annees .numero, .grille-annees .col-libelle { position: sticky; background: var(--panneau); z-index: 1; }
.grille-annees .numero { left: 0; }
.grille-annees .col-libelle { left: 2.5rem; }
.grille-annees .emplacement-lu summary { cursor: pointer; min-height: var(--cible); display: flex; align-items: center; }
.grille-annees .entete-annee.a-taper { background: var(--jaune-tendre); }

/* Importer un CSV (étape 7) */
.importer-csv { flex: 1 0 100%; margin: 0; }
.importer-csv a { min-height: var(--cible); display: inline-flex; align-items: center; }
.import-csv fieldset { margin: 1.25rem 0; min-width: 0; }
.filtre-csv { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0; }
.filtre-csv select, .filtre-csv input { min-height: var(--cible); }
.filtre-csv input { flex: 1 1 14rem; min-width: 0; }
.colonnes-csv td, .colonnes-csv th { padding: .25rem .5rem; text-align: left; }
.colonnes-csv .case-cible { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--cible); min-height: var(--cible); cursor: pointer; }
.colonnes-csv input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
.colonnes-csv input[type="text"] { min-height: var(--cible); }
.tableau-fichier { border-collapse: collapse; font-size: .875rem; }
.tableau-fichier th, .tableau-fichier td { border: var(--trait-sep); padding: .25rem .5rem; white-space: nowrap; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; }
.empreinte { overflow-wrap: anywhere; word-break: break-all; }
.choix-en-ligne { display: flex; flex-wrap: wrap; gap: 1rem; }
.choix-en-ligne label, .import-csv .case-a-cocher { min-height: var(--cible); display: inline-flex; align-items: center; gap: .5rem; }
.apercu-import .niveau-1 td:nth-child(2) { padding-left: 1.5rem; }

/* --- La barre de trajectoire (chantier ATELIER, retouche 1) ------------------------
 *
 * D'après la maquette validée `docs/maquettes/trajectoire-source.html` (`.traj`, `.subs`) :
 * un bandeau de quatre cases jointes (deux par ligne sous 760 px) — « Étape N », le titre
 * en serif, pour qui. L'étape courante : fond jaune tendre et filet jaune en pied, plus
 * « Vous êtes ici ». Jetons du site seulement : jour, nuit et arc-en-ciel suivent.
 *
 * Ajout au-delà de la maquette (brief) : une étape FERMÉE reste affichée, assombrie, et
 * ne compte pas sur la couleur — fond creusé, cadenas, raison écrite dans la case et
 * sous le bandeau. Cibles de 44 px au moins.
 */
.trajectoire { margin: 0 0 var(--esp-24); max-width: none; }
.trajectoire-raisons { max-width: var(--mesure); }
.trajectoire ol, .trajectoire ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.trajectoire-etapes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--trait); background: var(--panneau);
}
@media (max-width: 760px) {
  .trajectoire-etapes { grid-template-columns: 1fr 1fr; }
  .etape-trajectoire:nth-child(n+3) > * { border-top: 1px solid var(--trait); }
  .etape-trajectoire:nth-child(3) > * { border-left: 0 !important; }
}
.etape-trajectoire + .etape-trajectoire > * { border-left: 1px solid var(--trait); }
.etape-trajectoire > a, .etape-trajectoire > .etape-inerte {
  display: grid; gap: 2px; align-content: start; height: 100%; box-sizing: border-box;
  min-height: var(--cible); padding: var(--esp-12) 14px;
  color: var(--encre); text-decoration: none; background: transparent;
}
.etape-trajectoire > a:hover { background: var(--panneau-2); }
.etape-trajectoire > a:focus-visible, .sous-etape > a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.etape-numero { font-size: 12px; color: var(--secondaire); font-variant-numeric: tabular-nums; }
.etape-libelle { font-family: var(--police-titres); font-weight: 700; font-size: 17px; line-height: 1.2; }
.etape-qui { line-height: 1.35; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--secondaire); }
.etape-court { font-size: 13px; color: var(--secondaire); }
.etape-courante > a { background: var(--jaune-tendre); box-shadow: inset 0 -3px 0 var(--jaune); }
.etape-courante > a:hover { background: var(--jaune-tendre); }
.etape-courante .etape-court { color: var(--encre); font-weight: 600; }
.etape-fermee > a, .etape-fermee > .etape-inerte { background: var(--panneau-2); color: var(--secondaire-sur-teinte); }
.etape-fermee .etape-numero, .etape-fermee .etape-qui, .etape-fermee .etape-court { color: var(--secondaire-sur-teinte); }
.etape-fermee .etape-libelle { font-weight: 600; }
.etape-fermee > a .etape-court { text-decoration: underline; }
.etape-fermee > .etape-inerte { cursor: not-allowed; }
.trajectoire-raisons { margin-top: var(--esp-8) !important; font-size: 14px; color: var(--secondaire); }
.trajectoire-raisons li + li { margin-top: var(--esp-4); }
.etape-numero-texte { font-weight: 600; }

.trajectoire-sous-etapes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
.sous-etape > a, .sous-etape > .etape-inerte {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: var(--cible); padding: 0 var(--esp-12); box-sizing: border-box;
  border: 1px solid var(--trait); background: var(--panneau); font-size: 14px;
  color: var(--encre); text-decoration: none;
}
.sous-etape > a:hover { border-color: var(--encre); }
.sous-etape-numero { color: var(--secondaire); font-variant-numeric: tabular-nums; }
.sous-etape-etat { font-size: 12px; color: var(--secondaire); }
.sous-etape-en_cours > a, .sous-etape-en_cours > .etape-inerte {
  border-color: var(--encre); box-shadow: inset 0 -3px 0 var(--jaune); font-weight: 600;
}
.sous-etape-faite .sous-etape-etat { color: var(--encre); }

/* L'accueil de l'atelier, dans l'ordre de la trajectoire. */
.section-trajectoire { margin-top: var(--esp-24); }
.section-trajectoire > h2 { display: flex; align-items: baseline; gap: var(--esp-8); flex-wrap: wrap; }
.section-trajectoire .etiquette-etape { font-size: 13px; font-weight: 500; color: var(--secondaire); }
.ferme-explication { color: var(--secondaire); border-left: 3px dashed var(--gris-icone); padding-left: var(--esp-8); }

/* La liste des brouillons à regrouper (retouche 1, section 5) : une ligne par groupe. */
.groupes-a-confirmer { list-style: none; padding: 0; margin: 0 0 var(--esp-16); max-width: none; }
.groupe-a-confirmer { border-top: var(--trait-sep); padding: var(--esp-12) 0; display: grid; gap: var(--esp-8); }
.choix-groupe { display: flex; gap: var(--esp-12); align-items: flex-start; min-height: var(--cible); }
.choix-groupe input { flex: none; margin-top: 4px; }
.nom-collection { display: grid; gap: var(--esp-4); font-size: 14px; }
.nom-collection input { width: 100%; box-sizing: border-box; }