/* Espace client du reperage (plan C, tache 10) : l'habillage de la console (sourcing/plateforme/src/app.css, monde
   « le releve » : blanc froid, encre, Manrope), jamais celui du site vitrine. Maquettes validees : parcours.html
   (.superpowers/brainstorm/1511-1793283794/content, hors depot).
   Regles du plan : cibles de 44 px, champs de 16 px sous 760 px, contraste AA, focus visible, aucun filet colore
   lateral de plus de 1 px, aucune etiquette en surtitre au-dessus d'un titre ou d'un chiffre, corps de 13 px au
   moins, tailles en px. Aucun style en ligne dans les pages (CSP de l'espace) : tout est ici. */

@font-face {
  font-family: "Manrope"; src: url("/static/manrope.woff2") format("woff2");
  font-style: normal; font-weight: 200 800; font-display: swap;
}

/* Jetons de la console (app.css:2-25), a l'identique. --bleu (pastille « En production ») vient de la maquette ;
   --bord-champ borde les champs a 3:1 au moins sur le blanc et le fond (contraste des controles). */
:root {
  --fond: #f7f8fa;
  --surface: #ffffff;
  --encre: #0f1419;
  --encre-2: #3a414b;
  --gris: #5c6470;
  --trait: #9aa1ab;          /* traits et bords de controles, jamais du texte */
  --filet: #e6e8ec;
  --filet-2: #eef0f3;
  --survol: #f3f5f8;
  --choisi: #eaeef4;
  --hausse: #22683f;
  --baisse: #a4271b;
  --bleu: #1f4f8f;
  --bord-champ: #7d8590;
  --r: 8px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--encre);
  font: 500 14px/1.45 "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; caret-color: var(--encre);
}
::selection { background: var(--encre); color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.chiffres { font-variant-numeric: tabular-nums; }
.masque {
  position: absolute; 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;
}

/* ---------- barre : Diligeo, le client, la personne, « Se déconnecter » ---------- */
.barre { background: var(--surface); border-bottom: 1px solid var(--filet); }
.barre-dedans {
  max-width: 1240px; min-height: 60px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 20px;
}
.marque { font-weight: 800; font-size: 17px; letter-spacing: -.01em; text-decoration: none; color: var(--encre); }
a.marque { display: inline-flex; align-items: center; min-height: 44px; }
.barre .client {
  min-width: 0; padding-left: 20px; border-left: 1px solid var(--filet); color: var(--gris); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barre .droite { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--encre-2); font-size: 14px; }
.barre .personne { white-space: nowrap; }
.barre form { display: flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- page ---------- */
.corps { max-width: 1240px; margin: 0 auto; padding: 32px 28px 56px; }
h1 { margin: 0 0 12px; font: 800 24px/1.2 "Manrope", system-ui, sans-serif; letter-spacing: -.015em; }
.corps p { max-width: 70ch; }

/* boutons et liens d'action : 44 px de haut au moins */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--surface); color: var(--encre);
  font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--survol); }
.btn-principal { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn-principal:hover { background: #262d36; }
.btn-lien { border-color: transparent; background: transparent; padding: 0 10px; color: var(--encre-2); }
.btn-lien:hover { background: var(--survol); color: var(--encre); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:disabled { cursor: progress; opacity: .7; }

/* champs */
label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--encre-2); }
.champ {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--bord-champ);
  border-radius: var(--r); background: var(--surface); color: var(--encre); font-size: 14px;
}
textarea.champ { min-height: 88px; resize: vertical; }
.champ[aria-invalid="true"] { border-color: var(--baisse); }

/* message d'erreur d'un formulaire (zone [role=alert], vide tant que rien n'est a dire) */
.erreur { margin: 8px 0; color: var(--baisse); font-weight: 600; }
.erreur:empty { display: none; }
.erreur a { color: inherit; font-weight: 700; }

/* pages de connexion */
form.connexion { display: grid; gap: 8px; max-width: 420px; margin-top: 20px; }
form.connexion label { margin: 0; }
form.connexion .btn { justify-self: start; margin-top: 8px; }

/* ---------- accueil : « Vos repérages » ---------- */
.ligne-titre { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ligne-titre h1 { margin: 0; }
.ligne-titre .sous-titre { margin: 4px 0 0; color: var(--gris); }
.ligne-titre .retour { margin-left: auto; }
.ligne-titre .actions { margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.etudes { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
.entete-l, .rang {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2.2fr) 180px;
  gap: 16px; align-items: center; padding: 0 20px;
}
.entete-l { min-height: 40px; border-bottom: 1px solid var(--filet); color: var(--gris); font-size: 13px; }
.rang { min-height: 76px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--filet-2); }
.rang:last-child { border-bottom: 0; }
.rang .titre { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.sous { margin-top: 2px; color: var(--gris); font-size: 13px; }
.statut { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.statut i { width: 8px; height: 8px; border-radius: 50%; background: var(--trait); flex: none; }
.statut-production i { background: var(--bleu); }
.statut-livree i { background: var(--hausse); }
.statut-a-valider i { background: var(--encre); }
.rang .fin { text-align: right; }
.vide { padding: 28px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); color: var(--encre-2); }
.vide p { margin: 0; }

/* ---------- formulaire de these (tache 11, maquette 2) ---------- */
.form-grille { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.index { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 2px; }
.index-nav ol { list-style: none; margin: 0; padding: 0; }
.index-nav a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 6px;
  color: var(--encre-2); font-size: 14px; text-decoration: none;
}
.index-nav a:hover { background: var(--survol); color: var(--encre); }
.index-nav a[aria-current="true"] { background: var(--choisi); color: var(--encre); font-weight: 700; }
.index-nav .num {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--trait);
  border-radius: 50%; color: var(--gris); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.index-nav a.fait .num {
  color: transparent; border-color: var(--encre);
  background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.enreg { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); color: var(--gris); font-size: 13px; }
.enreg p { margin: 0; }
.enreg strong { display: block; color: var(--encre-2); font-weight: 700; }
.index > .btn { width: 100%; margin-top: 14px; }

.sections { min-width: 0; }
.alerte-page { margin: 0 0 16px; }
.bloc {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); padding: 22px 24px;
  margin: 0 0 16px; scroll-margin-top: 16px;
}
.bloc h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: -.005em; }
.bloc h2 .num-section { color: var(--gris); font-weight: 700; }
.bloc .aide { margin: 0 0 16px; color: var(--gris); font-size: 14px; max-width: 70ch; }
.aide-champ { margin: -2px 0 8px; color: var(--gris); font-size: 13px; max-width: 70ch; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--encre-2); }
.unite { margin: 0 0 18px; scroll-margin-top: 16px; }
.unite:last-child { margin-bottom: 0; }
.unite .champ { scroll-margin-top: 16px; }
.modifie { margin: 6px 0 0; color: var(--bleu); font-size: 13px; font-weight: 600; }
.modifie:empty { display: none; }
.unite > .erreur { margin: 6px 0 0; font-size: 13px; }

/* cases et choix : la ligne entiere (44 px) est la cible */
.case-ligne { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.case-ligne input, .carte input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--encre); cursor: pointer; }
.case-ligne label { flex: 1; margin: 0; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--encre); cursor: pointer; }
.case-ligne input:disabled + label { color: var(--gris); cursor: not-allowed; }
.sous-libelle { color: var(--gris); font-size: 13px; }
.options.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.options.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carte {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; margin: 0;
  padding: 14px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--encre); cursor: pointer;
}
.carte input { margin-top: 1px; }
.carte:hover { background: var(--survol); }
.carte:has(input:checked) { border-color: var(--encre); background: var(--choisi); }
.carte:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.carte strong { display: block; font-weight: 700; }
.carte-texte span { display: block; color: var(--gris); font-size: 13px; }
.zone-detail { margin-top: 10px; max-width: 520px; }
.bandeau-saisie { margin-top: 6px; }

/* champs a unite (M€, %, km) et grilles */
.avec-unite { position: relative; display: flex; align-items: center; }
.avec-unite .champ { padding-right: 48px; }
.mesure { position: absolute; right: 12px; color: var(--gris); font-size: 14px; pointer-events: none; }
.grille-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0 0 18px; }
.grille-deux .unite { margin: 0; }
select.champ { cursor: pointer; }

/* listes : axes, societes, rubriques */
.rangee {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; padding: 14px 0;
  border-top: 1px solid var(--filet-2);
}
.rangees > .rangee:first-child { border-top: 0; padding-top: 2px; }
.rangee .n { padding-top: 30px; color: var(--gris); font-weight: 800; font-variant-numeric: tabular-nums; }
.rangee > .retirer { grid-column: 2; justify-self: start; padding: 0 8px; }
.rangee .deux { display: grid; gap: 10px; }
.rangee .deux .unite { margin: 0; }
.rangee-champs { display: grid; gap: 10px 14px; }
.rangee-champs.quatre { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.rangee-champs.trois { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 2fr); }
.rangee-champs.deux-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sous-champ { min-width: 0; }
.liste-titre { margin: 18px 0 4px; font-size: 14px; font-weight: 800; }
.btn.ajout { margin-top: 4px; padding: 0 8px; }
.btn.ajout:disabled { cursor: not-allowed; opacity: .55; }

/* fichier « a ne pas approcher » */
.champ-fichier { display: block; max-width: 100%; min-height: 44px; font-size: 14px; color: var(--encre-2); }
.champ-fichier::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 16px; border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer;
}
.fichier-actuel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; color: var(--encre-2); }
.fichier-actuel strong { overflow-wrap: anywhere; }

/* ---------- recapitulatif avant l'envoi ---------- */
.envoi-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.envoi-corps { min-width: 0; }
.cote-envoi { position: sticky; top: 16px; }
.encart { padding: 20px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
.encart p { margin: 0 0 10px; color: var(--encre-2); }
.encart .gros { color: var(--encre); font-size: 17px; font-weight: 800; letter-spacing: -.005em; }
.encart .petit { color: var(--gris); font-size: 13px; }
.encart form { margin-top: 14px; }
.encart .btn { width: 100%; }
.encart .btn:disabled { cursor: not-allowed; opacity: .55; }
.encart .sous { margin: 8px 0 0; }
.manques-liste { list-style: none; margin: 0; padding: 0; }
.manques-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-top: 1px solid var(--filet-2); color: var(--encre-2);
}
.manques-liste li:first-child { border-top: 0; }
.relu-liste { margin: 0; }
.relu-ligne {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 4px 18px; padding: 12px 0;
  border-top: 1px solid var(--filet-2);
}
.relu-ligne:first-child { border-top: 0; }
.relu-ligne dt { color: var(--gris); font-size: 13px; font-weight: 700; padding-top: 2px; }
.relu-ligne dd { margin: 0; min-width: 0; }
.relu-ligne dd p { margin: 0 0 4px; white-space: pre-line; overflow-wrap: anywhere; }
.relu-action a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; color: var(--encre-2); }

/* ---------- fiche de cadrage (tache 13, maquette 3) : la fiche a gauche, la validation a droite ---------- */
.compris { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.recu {
  min-width: 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r);
}
.recu h2 { margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.005em; }
.recu .reformulation { margin: 0 0 16px; color: var(--encre-2); font-size: 15px; }
.rubriques { margin: 0; }
.rubrique {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; padding: 10px 0;
  border-top: 1px solid var(--filet-2);
}
.rubrique:first-child { border-top: 0; }
.rubrique dt { padding-top: 1px; color: var(--gris); font-size: 13px; font-weight: 700; }
.rubrique dd { min-width: 0; margin: 0; }
.rubrique dd p { margin: 0 0 4px; overflow-wrap: anywhere; }
.rubrique dd p:last-child { margin-bottom: 0; }
.lu { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); }
.lu h2 { margin: 0 0 6px; font-size: 15px; }
.points { list-style: none; margin: 0; padding: 0; }
.points li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--filet-2); color: var(--encre-2);
}
.points li:first-child { border-top: 0; }
.points form { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.points .erreur { max-width: 220px; font-size: 13px; text-align: right; }
.lu .sous { margin: 12px 0 0; }
.cote-these { position: sticky; top: 16px; display: grid; gap: 8px; align-content: start; }
.encart .prevision { color: var(--encre); font-size: 15px; }
.encart .prevision strong { font-weight: 800; }
.encart form + form { margin-top: 10px; }
.encart .petit { margin: 12px 0 0; }
form.abandon { margin: 0; }
.abandon .btn-lien { padding: 0 6px; }
.attente { max-width: 640px; }
.attente p[role="status"] { margin: 0; color: var(--encre); }
.pied-these { margin-top: 16px; }

/* ---------- onglet « These » d'une etude (tache 14, maquette 4) : la these a gauche, l'historique a droite ---------- */
.ligne-titre .etat-these { color: var(--encre); font-size: 15px; font-weight: 700; }
.onglets { margin: -4px 0 24px; border-bottom: 1px solid var(--filet); }
.onglets ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.onglets a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--gris); font-weight: 700; text-decoration: none;
}
.onglets a:hover { color: var(--encre); }
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--encre); }
.these-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.these-principal { min-width: 0; display: grid; gap: 16px; }
.recu .valide-par { margin: -6px 0 14px; color: var(--gris); font-size: 13px; }
details.envoye { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
details.envoye > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; cursor: pointer;
  font-size: 15px; font-weight: 800; list-style: none;
}
details.envoye > summary::-webkit-details-marker { display: none; }
details.envoye > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border: solid var(--gris); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s;
}
details.envoye[open] > summary::before { transform: rotate(45deg); }
details.envoye > summary:hover { background: var(--survol); border-radius: var(--r); }
details.envoye > summary:focus-visible { outline-offset: -2px; }
details.envoye .rubriques { padding: 4px 26px 18px; border-top: 1px solid var(--filet-2); }
details.envoye .rubrique dd p { white-space: pre-line; }
/* fiche validee repliee sous la fiche modifiee par Diligeo (tache 23) */
details.fiche-validee .detail-fiche { padding: 14px 26px 18px; border-top: 1px solid var(--filet-2); }
details.fiche-validee .detail-fiche .rubriques { padding: 0; border-top: 0; }
details.fiche-validee .detail-fiche .reformulation { margin: 0 0 12px; color: var(--encre-2); }
details.fiche-validee .detail-fiche .valide-par { margin: 0 0 10px; color: var(--gris); font-size: 13px; }
.mdetail details.fiche-validee { margin-top: 12px; }
.ecrire { padding: 22px 26px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
.ecrire h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -.005em; }
.ecrire > p { margin: 0 0 14px; color: var(--encre-2); }
.ecrire form { display: grid; gap: 8px; justify-items: start; }
.ecrire label { margin: 0; }
.ecrire textarea.champ { min-height: 120px; }
.ecrire .erreur { margin: 0; }
.ecrire .confirmation { margin: 0; color: var(--hausse); font-weight: 600; }
/* zones annoncees (role=alert, role=status) vides : masquees a l'oeil seulement, jamais retirees de l'arbre
   d'accessibilite (un lecteur d'ecran annonce alors le texte qui y arrive) ; hors de la grille, sans espace */
.ecrire .erreur:empty, .ecrire .confirmation:empty {
  display: block; position: absolute; 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;
}
.lecture-these { margin: 0; }
.historique { min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
.historique h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.historique ol { list-style: none; margin: 0; padding: 0; }
.historique li { position: relative; padding: 0 0 16px 20px; color: var(--encre-2); font-size: 14px; overflow-wrap: anywhere; }
.historique li::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--trait);
}
.historique li::after { content: ""; position: absolute; left: 6.5px; top: 18px; bottom: 0; width: 1px; background: var(--filet); }
.historique li:last-child { padding-bottom: 0; }
.historique li:last-child::after { display: none; }
.historique > ol > li:first-child::before { background: var(--encre); }
.historique li strong { display: block; color: var(--encre); }
.historique .qui { display: block; }
.historique .quand { display: block; color: var(--gris); font-size: 13px; }
.historique .texte-message {
  margin: 6px 0 0; padding: 8px 10px; background: var(--fond); border-radius: 6px; color: var(--encre);
  white-space: pre-line; overflow-wrap: anywhere;
}
.historique details.anciens { margin-top: 2px; }
.historique details.anciens > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--encre-2); font-weight: 700;
  font-size: 14px;
}
.historique details.anciens > summary:hover { color: var(--encre); }
.historique details.anciens[open] > summary { margin-bottom: 8px; }
.historique .repartir { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.historique ol + .repartir { margin-top: 18px; }
.repartir p { margin: 0 0 10px; color: var(--encre-2); font-size: 13px; }
.repartir form { margin: 0; }
.repartir .btn { width: 100%; }

/* ---------- onglet « Console » d'une etude (tache 20) : la console dans un cadre de meme origine ---------- */
.console-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: -8px 0 14px; }
.console-versions { min-width: 0; color: var(--encre-2); font-size: 14px; }
.console-versions p { margin: 0; }
.console-versions p + p { margin-top: 2px; }
.console-versions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.console-versions a[aria-current="page"] { font-weight: 800; color: var(--encre); }
.console-tete .plein-ecran { margin-left: auto; white-space: nowrap; }
/* Les lignes des versions repliees : au telephone seulement (voir plus bas). */
.console-versions-tel { display: none; min-width: 0; color: var(--encre-2); font-size: 14px; }
.console-versions-tel > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--encre); font-weight: 700;
}
.console-versions-tel > summary::-webkit-details-marker { display: none; }
.console-versions-tel > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border: solid var(--gris); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s;
}
.console-versions-tel[open] > summary::before { transform: rotate(45deg); }
.console-versions-tel p { margin: 0; }
.console-versions-tel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.console-versions-tel a[aria-current="page"] { font-weight: 800; color: var(--encre); }
/* La hauteur de la fenetre moins la barre (60 px) : la console s'y lit comme seule. */
.console-cadre {
  display: block; width: 100%; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 480px;
  border: 1px solid var(--filet); border-radius: var(--r); background: var(--surface);
}

/* ---------- telephone ---------- */
@media (max-width: 760px) {
  input, textarea, select, .champ { font-size: 16px; }
  .compris { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .recu { padding: 18px 16px; }
  .rubrique { grid-template-columns: minmax(0, 1fr); }
  .points li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .points form { align-items: flex-start; }
  .points .btn-lien { padding: 0; }
  .points .erreur { text-align: left; }
  .cote-these { position: static; }
  .these-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .onglets { margin-bottom: 16px; }
  details.envoye > summary { padding: 0 16px; }
  details.envoye .rubriques { padding: 4px 16px 16px; }
  details.fiche-validee .detail-fiche { padding: 12px 16px 16px; }
  .ecrire { padding: 18px 16px; }
  .ecrire form { justify-items: stretch; }
  /* Onglet « Console » au telephone : l'en-tete replie, puis le cadre, qui prend le reste de la fenetre (moins la
     barre, 56 px et son filet de 1 px, et 8 px de marge) et tient dans le premier ecran ; la page ne defile pas, la
     console defile dans son cadre. Les marges negatives ramenent celles de .corps (20 px en haut, 40 px en bas) a 8
     et 0 px. */
  .vue-console {
    display: flex; flex-direction: column; margin: -12px 0 -40px;
    height: calc(100vh - 65px); height: calc(100dvh - 65px);
  }
  .vue-console .ligne-titre {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 0; flex: none;
  }
  .vue-console .ligne-titre > div { display: contents; }
  .vue-console .ligne-titre h1 {
    grid-column: 1 / -1; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .vue-console .ligne-titre .sous-titre { margin: 0; font-size: 14px; }
  .vue-console .ligne-titre .retour { align-self: center; padding: 0 0 0 8px; white-space: nowrap; }
  .vue-console .onglets { margin: 0 0 6px; flex: none; }
  .console-tete { flex: none; margin: 0 0 6px; gap: 0 12px; flex-wrap: wrap; align-items: center; }
  .console-versions { flex: 1 1 200px; }
  .console-versions.repliable { display: none; }
  .console-versions-tel { display: block; flex: 1 1 200px; }
  .console-tete .plein-ecran { margin-left: 0; }
  .vue-console .console-cadre { flex: 1 1 auto; height: auto; min-height: 280px; }
  .barre-dedans { min-height: 56px; padding: 0 16px; gap: 12px; }
  .barre .client { padding-left: 12px; }
  .barre .personne { display: none; }
  .corps { padding: 20px 16px 40px; }
  h1 { font-size: 22px; }
  .ligne-titre { flex-direction: column; align-items: stretch; gap: 14px; }
  .ligne-titre .actions { margin: 0; align-items: stretch; }
  .ligne-titre .actions .btn { width: 100%; }
  .ligne-titre .retour { margin-left: 0; align-self: flex-start; padding: 0 10px 0 0; }
  /* lignes d'etude empilees ; les en-tetes de colonnes restent lus par les lecteurs d'ecran */
  .entete-l {
    position: absolute; 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;
  }
  .rang { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
  .rang .auteur { display: flex; flex-wrap: wrap; gap: 0 4px; color: var(--gris); font-size: 13px; }
  .rang .auteur .sous { margin: 0; }
  .rang .auteur .sous::before { content: "\B7  "; }
  .rang .fin { margin-top: 6px; text-align: left; }
  .rang .fin .btn { width: 100%; }
  form.connexion .btn { justify-self: stretch; }
  /* formulaire : l'index passe en tete, en pastilles qui defilent ; une colonne partout */
  .form-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .index { position: static; max-height: none; overflow: visible; padding: 0; }
  .index-nav ol { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; }
  .index-nav li { flex: none; }
  .index-nav a { border: 1px solid var(--filet); background: var(--surface); }
  .enreg { margin-top: 10px; padding-top: 10px; }
  .bloc { padding: 18px 16px; }
  .options.colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options.cartes, .grille-deux, .rangee-champs.quatre, .rangee-champs.trois, .rangee-champs.deux-champs {
    grid-template-columns: minmax(0, 1fr);
  }
  .rangee { grid-template-columns: 20px minmax(0, 1fr); }
  .envoi-grille { grid-template-columns: minmax(0, 1fr); }
  .cote-envoi { position: static; }
  .relu-ligne { grid-template-columns: minmax(0, 1fr); }
  .relu-action a { margin-top: 0; }
  .manques-liste li { flex-direction: column; align-items: stretch; gap: 8px; }
  .manques-liste .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- vue de Hugues (tache 15) : tableau de bord et comptes d'un client ----------
   Pensee d'abord pour le telephone : une colonne, lignes entieres cliquables ; deux colonnes sur ordinateur. */
.admin .sous-titre { margin: 4px 0 24px; color: var(--gris); }
.admin h1 { margin: 0; }
.admin-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.admin-principal, .admin-cote { min-width: 0; display: grid; gap: 28px; align-content: start; }
.bloc-admin { min-width: 0; }
.bloc-admin h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.005em; }
.bloc-admin h3 { margin: 20px 0 8px; font-size: 14px; font-weight: 800; color: var(--encre-2); }
.bloc-admin h2 + .groupe h3 { margin-top: 4px; }
.liste-admin {
  list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r); overflow: hidden;
}
.liste-admin > li { border-top: 1px solid var(--filet-2); }
.liste-admin > li:first-child { border-top: 0; }
.ligne-lien {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--encre);
  text-decoration: none;
}
.ligne-lien:hover { background: var(--survol); }
.ligne-lien:focus-visible { outline-offset: -2px; }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-texte .titre { display: block; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.ligne-texte .sous { display: block; overflow-wrap: anywhere; }
.ligne-texte p { margin: 2px 0 0; }
.chevron { width: 14px; height: 14px; flex: none; color: var(--trait); }
.signal { color: var(--baisse); font-weight: 700; }
.statut-alerte i { background: var(--baisse); }
.vide-admin {
  margin: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r);
  color: var(--gris);
}
.groupe .vide-admin { padding: 0 2px; background: none; border: 0; font-size: 13px; }

/* alertes et comptes : le texte, puis le bouton de la ligne */
.alerte-admin, .compte-admin { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.alerte-admin { align-items: flex-start; }
.alerte-admin form, .compte-admin form { flex: none; margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.alerte-admin .erreur, .compte-admin .erreur { max-width: 220px; font-size: 13px; text-align: right; }
.texte-alerte { color: var(--encre); overflow-wrap: anywhere; }
/* lien en ligne : le padding vertical donne la cible de 44 px sans deplacer les lignes voisines */
.lien-these { padding-block: 14px; color: var(--encre-2); font-weight: 600; }
.compte-retire .titre { color: var(--encre-2); }

/* production, revue trimestrielle, formulaire */
.carte-admin { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); padding: 16px; }
.carte-admin > p { margin: 0 0 8px; }
.carte-admin > p:last-child { margin-bottom: 0; }
.carte-admin form { margin-top: 12px; }
.sieges { list-style: none; margin: 8px 0 0; padding: 0; font-variant-numeric: tabular-nums; }
.sieges li { display: flex; align-items: center; min-height: 36px; border-top: 1px solid var(--filet-2); }
.admin-comptes { max-width: 760px; }
.admin-comptes .bloc-admin { margin-top: 28px; }
form.form-admin { display: grid; gap: 14px; margin: 0; }
.aide-admin { margin: 6px 0 0; color: var(--gris); font-size: 13px; }
.form-admin .erreur { margin: 0; }
.retour-admin { margin: 28px 0 0; }
.retour-admin .btn-lien { padding: 0 6px; }

@media (max-width: 760px) {
  .admin .sous-titre { margin-bottom: 20px; }
  .admin-grille, .admin-principal, .admin-cote { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ligne-lien, .alerte-admin, .compte-admin { padding: 12px 14px; }
  .alerte-admin .erreur, .compte-admin .erreur { max-width: 160px; }
  .form-admin .btn { width: 100%; }
}

/* ---------- vue de relecture (tache 21, maquette 5) : pensee pour le telephone ----------
   Une colonne au telephone : compte a rebours, rangees de 48 px, boutons de 48 px ; sur ordinateur, la relecture a
   gauche et l'historique a droite. */
.relecture { max-width: 1080px; }
.relecture-tete { margin-bottom: 18px; }
.relecture-tete h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.relecture-meta { margin: 0; color: var(--gris); font-size: 14px; }
.relecture-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.relecture-principal { min-width: 0; display: grid; gap: 12px; align-content: start; }
.relecture-principal > .bloc-admin { margin: 4px 0; }
.relecture .compte {
  max-width: none; margin: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r);
  color: var(--encre-2);
}
.relecture .compte .gros { display: block; color: var(--encre); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.etat-admin p { margin: 0; }
.etat-admin .sous { margin-top: 4px; font-size: 14px; color: var(--encre-2); }
.etat-admin .sous.signal { color: var(--baisse); }

/* rangees : un lien ou un <details> dont le resume est la rangee entiere */
.mliste { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); overflow: hidden; }
.mrangee + .mrangee { border-top: 1px solid var(--filet-2); }
.mrangee > summary, a.mrangee {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; color: var(--encre);
  font-size: 15px; text-decoration: none; cursor: pointer; list-style: none;
}
.mrangee > summary::-webkit-details-marker { display: none; }
.mrangee > summary:hover, a.mrangee:hover { background: var(--survol); }
.mrangee > summary:focus-visible, a.mrangee:focus-visible { outline-offset: -2px; }
.mtitre { margin-right: auto; font-weight: 700; }
.minfo { color: var(--gris); font-size: 14px; text-align: right; }
.mrangee .chevron { transition: transform .15s; }
details.mrangee[open] > summary .chevron { transform: rotate(90deg); }
.mdetail { padding: 6px 14px 16px; border-top: 1px solid var(--filet-2); }
.mdetail .recu { padding: 8px 0 0; border: 0; }
.mdetail details.envoye { margin-top: 12px; }
.resume-controles { margin: 8px 0 0; color: var(--encre); white-space: pre-line; overflow-wrap: anywhere; }

/* lignes a trancher */
.aide-lignes { margin: 8px 0 4px; }
.lignes-revue { list-style: none; margin: 0; padding: 0; }
.ligne-revue { padding: 14px 0; border-top: 1px solid var(--filet-2); }
.ligne-revue:first-child { border-top: 0; }
.ligne-revue > p { margin: 0; overflow-wrap: anywhere; }
.ligne-revue .titre { font-weight: 700; font-size: 15px; color: var(--encre); }
.ligne-revue .sous { margin-top: 2px; }
.ligne-revue .doute { margin-top: 6px; color: var(--encre-2); }
.ligne-revue .defaut { margin-top: 6px; color: var(--encre-2); font-size: 13px; font-weight: 600; }
.ligne-revue .choix-fait { margin-top: 6px; color: var(--encre); font-weight: 700; }
.form-decision { display: grid; gap: 12px; margin-top: 10px; }
.form-decision fieldset legend { margin-bottom: 6px; }
.options-decision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.option-decision {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 10px;
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--surface); color: var(--encre);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.option-decision input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--encre); cursor: pointer; }
.option-decision:hover { background: var(--survol); }
.option-decision:has(input:checked) { border-color: var(--encre); background: var(--choisi); }
.option-decision:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.detail-decision { display: grid; gap: 12px; }
.detail-decision .unite-admin label { margin-bottom: 6px; }
.boutons-decision { display: flex; flex-wrap: wrap; gap: 8px; }
.form-decision .btn, .boutons-decision .btn { min-height: 48px; }
.form-decision .erreur { margin: 0; }
form.appliquer { margin: 14px 0 0; }

/* gestes de la relecture : boutons de 48 px, pleine largeur */
.actions-relecture { display: grid; gap: 8px; }
.actions-relecture form { margin: 0; }
.btn-grand { width: 100%; min-height: 48px; font-size: 15px; }
.actions-relecture .erreur { margin: 6px 0 0; }

@media (max-width: 760px) {
  .relecture-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .boutons-decision .btn { flex: 1 1 auto; }
}

/* ---------- « Modifier la fiche » et « Nouvelle remise » (tache 23) : vue de Hugues, une colonne ---------- */
.champs-admin { display: grid; gap: 16px; }
.champs-admin .grille-deux { margin: 0; }
.champs-admin .options.colonnes { gap: 0 16px; }
.admin-fiche form.form-admin { margin-top: 4px; }
.admin-fiche form.form-admin .bloc-admin { margin-top: 14px; }
.remises-admin { display: grid; gap: 16px; }
.remises-admin .carte-admin p { margin: 0; }
.remises-admin .carte-admin form { margin-top: 12px; }
.remises-admin .erreur { margin: 6px 0 0; }