/* Prototype du dashboard, plan 2. Feuille unique, sans préprocesseur, pensée pour des gabarits Jinja2.
   Jetons dans :root ; contrastes calculés et reportés dans DIRECTION.md. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonds */
  --fond: #f1f3f8;
  --surface: #ffffff;
  --surface-creux: #e8ecf4;
  --filet: #d9deea;
  --filet-saisie: #7a859d;
  /* Encres */
  --encre: #0f172b;
  --encre-2: #3c4760;
  --encre-3: #566180;
  /* Lapis : la seule couleur d'action */
  --lapis: #2a44b0;
  --lapis-fonce: #1d3389;
  --lapis-pale: #e3e8f9;
  /* Conformité : réservée au statut, jamais à la performance */
  --vert: #136b45;
  --vert-pale: #dcefe4;
  --ambre: #944e00;
  --ambre-pale: #fbebd3;
  --rouge: #ad2419;
  --rouge-pale: #f9dfdb;
  --zone-verte: #e3f1e9;
  --zone-ambre: #fbeedb;
  --zone-rouge: #f9e2de;

  /* Formes */
  --rayon-carte: 16px;
  --rayon-ctrl: 10px;
  --rayon-pastille: 999px;
  --ombre-carte: 0 1px 2px rgb(15 23 43 / 0.05), 0 2px 8px rgb(15 23 43 / 0.04);

  /* Espacements (pas de 4 px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* Typographie */
  --police: "Archivo", "Helvetica Neue", sans-serif;
  --police-prose: "Literata", Georgia, serif;
  --t-micro: 0.75rem;     /* 12 px */
  --t-petit: 0.8125rem;   /* 13 px */
  --t-corps: 0.9375rem;   /* 15 px */
  --t-prose: 1rem;        /* 16 px */
  --t-section: 1.0625rem; /* 17 px */
  --t-titre: 1.5rem;      /* 24 px, 30 px dès 760 px */
  --t-montant: 1.375rem;  /* 22 px */
  --t-valeur: clamp(2.75rem, 1.7rem + 3.9vw, 4.25rem); /* 44 à 68 px */

  --largeur-max: 1200px;
  --hauteur-nav-bas: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.5;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--hauteur-nav-bas) + env(safe-area-inset-bottom));
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--lapis); text-underline-offset: 3px; }
a:hover { color: var(--lapis-fonce); }

:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
  border-radius: 4px;
}

.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.coque {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

/* ---------- Typographie : trois largeurs d'une même famille ---------- */
.large { font-stretch: 125%; }
.etroit { font-stretch: 78%; }

.etiquette {
  font-size: var(--t-petit);
  font-stretch: 82%;
  font-weight: 600;
  color: var(--encre-3);
  letter-spacing: 0.01em;
}

.note {
  display: block;
  font-size: var(--t-petit);
  color: var(--encre-3);
}

.prose {
  font-family: var(--police-prose);
  font-size: var(--t-prose);
  line-height: 1.62;
  font-variant-numeric: normal;
  color: var(--encre);
  max-width: 68ch;
}

.titre-section {
  font-size: var(--t-section);
  font-stretch: 112%;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.ticker {
  font-stretch: 82%;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- En-tête et navigation ---------- */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}
.entete__rangee {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 56px;
}
.marque {
  font-stretch: 125%;
  font-weight: 750;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.marque:hover { color: var(--encre); }
.tampon {
  margin-left: auto;
  font-size: var(--t-micro);
  font-stretch: 82%;
  font-weight: 650;
  color: var(--encre-2);
  border: 1.5px dashed var(--filet-saisie);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.deconnexion {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--t-petit);
  color: var(--encre-2);
  text-decoration: none;
}

.nav-haut { display: none; }

.compte {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--rayon-pastille);
  background: var(--lapis);
  color: var(--surface);
  font-size: var(--t-micro);
  font-weight: 700;
  font-stretch: 90%;
  line-height: 1;
}
.compte--neutre { background: var(--surface-creux); color: var(--encre-2); }

/* Navigation du bas, téléphone */
.nav-bas {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-bas__liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--hauteur-nav-bas);
}
.nav-bas a, .nav-bas summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--encre-2);
  text-decoration: none;
  font-size: 0.6875rem;
  font-stretch: 75%;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  list-style: none;
}
.nav-bas summary::-webkit-details-marker { display: none; }
.nav-bas .ic { width: 22px; height: 22px; }
.nav-bas__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 28px;
  border-radius: var(--rayon-pastille);
}
.nav-bas [aria-current="page"] { color: var(--lapis); }
.nav-bas [aria-current="page"] .nav-bas__icone { background: var(--lapis-pale); }
.nav-bas .compte {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  font-size: 0.6875rem;
  box-shadow: 0 0 0 2px var(--surface);
}
.plus { position: relative; height: 100%; }
.plus__feuille {
  position: absolute;
  right: var(--e2);
  bottom: calc(100% + var(--e2));
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  box-shadow: 0 8px 24px rgb(15 23 43 / 0.14);
  padding: var(--e2);
}
.plus__feuille a {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--e3);
  height: 44px;
  padding-inline: var(--e3);
  font-size: var(--t-corps);
  font-stretch: 100%;
  font-weight: 550;
  border-radius: var(--rayon-ctrl);
}
.plus__feuille a:hover { background: var(--fond); }
.plus__feuille hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e1) var(--e2); }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--e4);
}
.carte__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
  margin-bottom: var(--e3);
}
.aide {
  font-size: var(--t-petit);
  color: var(--encre-2);
  max-width: 62ch;
}

/* ---------- Pastille de statut ---------- */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--rayon-pastille);
  font-size: var(--t-petit);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.25;
  white-space: nowrap;
}
.statut .ic { width: 15px; height: 15px; stroke-width: 2.1; vertical-align: 0; }
.statut--frais { background: var(--vert-pale); color: var(--vert); }
.statut--a-reverifier { background: var(--ambre-pale); color: var(--ambre); }
.statut--expiree, .statut--non-conforme { background: var(--rouge-pale); color: var(--rouge); }

/* ---------- Boutons et champs ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--rayon-ctrl);
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 650;
  font-stretch: 100%;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.bouton--principal { background: var(--lapis); color: var(--surface); }
.bouton--principal:hover { background: var(--lapis-fonce); color: var(--surface); }
.bouton--second { background: var(--surface); color: var(--encre); border-color: var(--filet-saisie); }
.bouton--second:hover { background: var(--fond); }
/* Action répétée sur chaque ligne d'un tableau : lien d'action plutôt que bouton plein, cible tactile gardée. */
.bouton--discret {
  background: none;
  color: var(--encre-2);
  padding: 0 var(--e2);
  margin-left: calc(-1 * var(--e2));
  font-size: var(--t-petit);
  font-weight: 600;
}
.bouton--discret .ic { width: 16px; height: 16px; }
.bouton--discret:hover { background: var(--lapis-pale); color: var(--lapis); }
.bouton .ic { width: 18px; height: 18px; }

.champ { display: grid; gap: 6px; align-content: start; }   /* un textarea voisin étire la rangée */
.champ__libelle { font-size: var(--t-petit); font-weight: 600; color: var(--encre-2); }
.champ__libelle span { font-weight: 400; color: var(--encre-3); }
.saisie {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--filet-saisie);
  border-radius: var(--rayon-ctrl);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
}
textarea.saisie { min-height: 76px; resize: vertical; line-height: 1.45; }
.saisie::placeholder { color: var(--encre-3); }
.saisie:focus-visible { outline-offset: 0; border-color: var(--lapis); }
.saisie-unite { position: relative; }
.saisie-unite .saisie { padding-right: 36px; }
.saisie-unite__unite {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  color: var(--encre-3);
  pointer-events: none;
}

/* ---------- Portefeuille : tête ---------- */
.page { padding-block: var(--e5) var(--e6); display: grid; gap: var(--e5); }

.tete { display: grid; gap: var(--e5); }
.tete__releve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}
.compte-env {
  font-size: var(--t-micro);
  font-weight: 700;
  font-stretch: 82%;
  color: var(--encre-2);
  background: var(--surface-creux);
  border-radius: var(--rayon-pastille);
  padding: 2px 8px;
}
.valeur {
  margin-top: var(--e2);
  font-size: var(--t-valeur);
  font-stretch: 125%;
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.valeur__cents { font-weight: 450; color: var(--encre-2); }
.ecart {
  margin-top: var(--e3);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--t-corps);
  color: var(--encre-2);
}
.ecart strong { color: var(--encre); font-weight: 650; }
.ecart .ic { margin-top: 2px; }
.chiffres {
  margin-top: var(--e5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  border-top: 1px solid var(--filet);
  padding-top: var(--e4);
}
.chiffres dt { font-size: var(--t-petit); font-stretch: 82%; font-weight: 600; color: var(--encre-3); }
.chiffres .chiffre {
  font-size: 1.1875rem;
  font-stretch: 112%;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.chiffres .chiffres__investi { display: none; }

/* À traiter */
.a-traiter { padding: var(--e4) var(--e4) var(--e2); }
.a-traiter__liste { display: grid; }
.a-traiter__liste li + li { border-top: 1px solid var(--filet); }
.a-traiter__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) 0;
  color: var(--encre);
  text-decoration: none;
}
a.a-traiter__item:hover .a-traiter__texte strong { text-decoration: underline; }
.a-traiter__item > .ic { width: 22px; height: 22px; margin-top: 1px; }
.a-traiter__texte { font-size: var(--t-corps); line-height: 1.4; }
.a-traiter__texte strong { font-weight: 650; }
.a-traiter__texte .note { margin-top: 2px; }
.a-traiter__fleche { color: var(--encre-3); margin-top: 2px; }
.ton-lapis { color: var(--lapis); }
.ton-vert { color: var(--vert); }
.ton-ambre { color: var(--ambre); }
.ton-rouge { color: var(--rouge); }

/* ---------- La réglette de fraîcheur ---------- */
.reglette__piste {
  --pas-voie: 22px;
  position: relative;
  height: calc(var(--voies) * var(--pas-voie) + 64px);
  margin: var(--e4) 10px 0;
}
.reglette__zones {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 12px;
  display: grid;
  grid-template-columns: 50fr 25fr 25fr;
  gap: 2px;
}
.reglette__zones span:nth-child(1) { background: var(--zone-verte); border-radius: 6px 0 0 6px; }
.reglette__zones span:nth-child(2) { background: var(--zone-ambre); }
.reglette__zones span:nth-child(3) { background: var(--zone-rouge); border-radius: 0 6px 6px 0; }
.reglette__graduations {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
}
.reglette__graduations li {
  position: absolute;
  left: var(--x);
  top: 0;
  translate: -50% 0;
  padding-top: 8px;
  font-size: var(--t-micro);
  font-stretch: 82%;
  font-weight: 600;
  color: var(--encre-3);
  white-space: nowrap;
}
.reglette__graduations li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--encre-3);
}
.reglette__graduations li:first-child { translate: 0 0; }
.reglette__graduations li:first-child::before { left: 0; }
.reglette__graduations li:last-child { translate: -100% 0; }
.reglette__graduations li:last-child::before { left: auto; right: 0; }
.repere {
  position: absolute;
  left: var(--x);
  bottom: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
}
.repere__nom {
  font-size: var(--t-micro);
  font-stretch: 78%;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--encre);
  white-space: nowrap;
  line-height: 1;
}
.repere__tige {
  width: 1px;
  height: calc(6px + (var(--voie) - 1) * var(--pas-voie));
  background: var(--encre-3);
  margin-top: 3px;
}
.repere__marque {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--surface);
  box-shadow: 0 0 0 2px var(--surface);
}
.repere__marque .ic { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; }
.repere--frais .repere__marque { background: var(--vert); }
.repere--a-reverifier .repere__marque { background: var(--ambre); }
.repere--expiree .repere__marque { background: var(--rouge); }
.repere--non-conforme .repere__marque { background: var(--rouge); border-radius: 4px; rotate: 45deg; }
.repere--non-conforme .repere__marque .ic { rotate: -45deg; }
.reglette__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--filet);
  font-size: var(--t-petit);
  color: var(--encre-2);
}
.reglette__legende li { display: inline-flex; align-items: center; gap: 6px; }
.reglette__legende .repere__marque { width: 16px; height: 16px; box-shadow: none; }
.reglette__legende .repere__marque .ic { width: 11px; height: 11px; }

/* ---------- Positions ---------- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau thead { display: none; }
.tableau tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ligne valeur"
    "statut pv"
    "verif poids";
  gap: 6px var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--filet);
}
.tableau tbody tr:first-child { border-top: 0; padding-top: 0; }
.tableau th, .tableau td { padding: 0; text-align: left; font-weight: 400; vertical-align: top; }
.tableau .c-ligne { grid-area: ligne; }
.tableau .c-valeur { grid-area: valeur; text-align: right; font-weight: 600; }
.tableau .c-poids { grid-area: poids; text-align: right; }
.tableau .c-pv { grid-area: pv; text-align: right; }
.tableau .c-statut { grid-area: statut; }
.tableau .c-verif { grid-area: verif; font-size: var(--t-petit); color: var(--encre-2); align-self: center; }
.tableau .c-poids, .tableau .c-pv { font-size: var(--t-petit); color: var(--encre-2); }
.tableau .c-poids::before { content: "Poids "; color: var(--encre-3); }
.tableau .c-verif::before { content: "Vérifiée "; }
.tableau .c-verif .note::before { content: ", "; }
.ligne__nom { display: block; font-size: var(--t-petit); color: var(--encre-2); }
.ligne__titre { display: flex; align-items: baseline; gap: var(--e2); }
.ligne__titre .ticker { font-size: 0.96875rem; }
.alerte-poids { display: block; font-size: var(--t-micro); font-weight: 650; color: var(--encre); white-space: nowrap; }
.tableau .c-verif .note { display: inline; }

/* Répartitions et session, sous le tableau */
.grille-bas { display: grid; gap: var(--e5); align-items: start; }
.repartitions { display: grid; gap: var(--e4); }
.repartition + .repartition { border-top: 1px solid var(--filet); padding-top: var(--e4); }
.repartition__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.repartition__toile { position: relative; margin-top: var(--e2); }
.repartition__note { margin-top: var(--e2); font-size: var(--t-petit); color: var(--encre-2); }
.repartition__note strong { font-weight: 650; color: var(--encre); }

/* Lancer une session */
.session { display: grid; gap: var(--e4); }
.session__infos { display: grid; gap: var(--e2); font-size: var(--t-corps); color: var(--encre-2); }
.session__infos strong { color: var(--encre); font-weight: 600; }
.session__form { display: grid; gap: var(--e3); }
.session__form .bouton { justify-self: start; }

/* ---------- Pied ---------- */
.pied {
  border-top: 1px solid var(--filet);
  padding-block: var(--e5);
  font-size: var(--t-petit);
  color: var(--encre-2);
}

/* ---------- Recommandations ---------- */
.tete-page { display: grid; gap: var(--e3); }
.titre-page {
  font-size: var(--t-titre);
  font-stretch: 122%;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.onglets {
  display: flex;
  gap: var(--e1);
  margin-top: var(--e2);
  border-bottom: 1px solid var(--filet);
}
.onglets a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e3);
  margin-bottom: -1px;
  border-bottom: 2.5px solid transparent;
  color: var(--encre-2);
  font-weight: 600;
  text-decoration: none;
}
.onglets a:hover { color: var(--encre); }
.onglets a[aria-current="page"] { color: var(--lapis); border-bottom-color: var(--lapis); }

.recos { display: grid; gap: var(--e4); }
.carte.reco { padding: 0; overflow: hidden; }
.reco__talon {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  background: var(--surface-creux);
  border-bottom: 1px solid var(--filet);
}
.reco__sens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-petit);
  font-stretch: 82%;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.reco__sens .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.reco__titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e2); }
.reco__titre .ticker { font-size: 1.5rem; font-stretch: 100%; letter-spacing: 0.01em; }
.reco__titre .ticker-nom { font-size: var(--t-corps); font-weight: 500; color: var(--encre-2); }
.reco__montant {
  font-size: var(--t-montant);
  font-stretch: 118%;
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.reco__montant .note { font-stretch: 100%; letter-spacing: 0; font-weight: 400; margin-top: 2px; }
.reco__conformite, .fiche__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e2); }
.reco__conformite .note { display: inline; }
.reco__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e3); margin-top: var(--e2); font-size: var(--t-petit); }
.reco__meta dt { color: var(--encre-3); font-weight: 600; font-stretch: 82%; }
.reco__meta dd { color: var(--encre); }
.reco__corps { display: grid; gap: var(--e4); padding: var(--e4); }
.reco__corps h3 { font-size: var(--t-petit); font-stretch: 82%; font-weight: 700; color: var(--encre-3); margin-bottom: var(--e1); }

/* Suite donnée : choix exclusif, panneau révélé sans JavaScript */
.suite { border-top: 1px solid var(--filet); padding: var(--e4); display: grid; gap: var(--e3); }
.suite__choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.suite__choix legend { padding: 0; margin-bottom: var(--e2); font-size: var(--t-petit); font-stretch: 82%; font-weight: 700; color: var(--encre-3); }
.suite__options { display: flex; flex-wrap: wrap; gap: var(--e2); }
.choix {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--filet-saisie);
  border-radius: var(--rayon-ctrl);
  background: var(--surface);
  font-weight: 650;
  cursor: pointer;
}
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix:has(input:focus-visible) { outline: 2px solid var(--lapis); outline-offset: 2px; }
.choix:has(input:checked) { background: var(--lapis-pale); border-color: var(--lapis); color: var(--lapis); }
.choix .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.suite__panneau { display: none; gap: var(--e3); }
.suite:has(input[value="executee"]:checked) .suite__panneau--executee,
.suite:has(input[value="refusee"]:checked) .suite__panneau--refusee { display: grid; }
.suite__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: end; }
.suite__champs .champ--large { grid-column: 1 / -1; }
.suite__panneau .bouton { justify-self: start; }

/* ---------- Tablette ---------- */
@media (min-width: 760px) {
  :root { --t-titre: 1.875rem; }
  .coque { padding-inline: var(--e6); }
  .page { padding-block: var(--e6) var(--e7); gap: var(--e6); }
  .carte { padding: var(--e5); }
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffres .chiffres__investi { display: block; }
  .reglette__piste { --pas-voie: 20px; }
  .session { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--e6); align-items: start; }
  .repartitions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
  .repartition + .repartition { border-top: 0; padding-top: 0; }

  .tableau thead { display: table-header-group; }
  .tableau tbody tr { display: table-row; padding: 0; border: 0; }
  .tableau th, .tableau td { display: table-cell; padding: var(--e3) var(--e3); border-top: 1px solid var(--filet); vertical-align: middle; }
  .tableau thead th {
    border-top: 0;
    padding-block: var(--e2);
    background: var(--surface-creux);
    font-size: var(--t-petit);
    font-stretch: 82%;
    font-weight: 650;
    color: var(--encre-2);
    text-align: left;
    white-space: nowrap;
  }
  .tableau thead th:first-child { border-radius: 8px 0 0 8px; }
  .tableau thead th:last-child { border-radius: 0 8px 8px 0; }
  .tableau tbody tr:first-child th, .tableau tbody tr:first-child td { border-top: 0; }
  .tableau .num, .tableau thead .num { text-align: right; }
  .tableau th:first-child { padding-left: var(--e2); }
  .tableau .c-poids::before, .tableau .c-verif::before, .tableau .c-verif .note::before { content: none; }
  .tableau .c-poids, .tableau .c-pv { font-size: var(--t-corps); color: var(--encre); }
  .tableau .c-verif { font-size: var(--t-corps); color: var(--encre); white-space: nowrap; }
  .tableau .c-verif .note { display: block; }
  .tableau .c-pv .note { display: block; }

  .reco { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
  .reco__talon { border-bottom: 0; border-right: 1px solid var(--filet); padding: var(--e5); align-content: start; grid-row: span 2; }
  .reco__corps { padding: var(--e5) var(--e5) var(--e4); }
  .suite { padding: var(--e4) var(--e5) var(--e5); }
  .suite__champs { grid-template-columns: 160px 120px minmax(0, 1fr); }
  .suite__champs .champ--large { grid-column: auto; }
}

/* ---------- Bureau ---------- */
@media (min-width: 1080px) {
  body { padding-bottom: 0; }
  .nav-bas { display: none; }
  .coque { padding-inline: 40px; }
  .deconnexion { display: inline-flex; }
  .tampon { margin-left: var(--e2); }
  .nav-haut { display: flex; gap: 2px; margin-left: var(--e5); }
  .nav-haut a {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    height: 36px;
    padding: 0 var(--e3);
    border-radius: var(--rayon-pastille);
    color: var(--encre-2);
    font-size: 0.875rem;
    font-weight: 560;
    text-decoration: none;
  }
  .nav-haut a:hover { color: var(--encre); background: var(--fond); }
  .nav-haut a[aria-current="page"] { color: var(--lapis); background: var(--lapis-pale); font-weight: 650; }
  .entete__rangee { min-height: 64px; }
  .entete__fin { margin-left: auto; display: flex; align-items: center; gap: var(--e4); }

  .tete { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e6); align-items: start; }
  .grille-bas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e6); }
  .session { grid-template-columns: 1fr; gap: var(--e4); }
}

@media (prefers-reduced-motion: no-preference) {
  .bouton, .choix, .nav-haut a { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
}

@media (forced-colors: active) {
  .repere__marque, .statut, .compte { border: 1px solid CanvasText; }
}

/* ======================================================================
   Ajouts du plan 2 : écrans absents du prototype, mêmes jetons et mêmes formes.
   ====================================================================== */

/* L'attribut hidden doit l'emporter sur display: inline-grid (compteur à zéro). */
[hidden] { display: none !important; }

.entete__fin { margin-left: auto; display: flex; align-items: center; gap: var(--e4); }
.entete__fin form { display: contents; }

/* Déconnexion : un formulaire POST (D8), habillé comme les liens voisins. */
.deconnexion { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-petit); cursor: pointer; }
.deconnexion:hover { color: var(--encre); }
.plus__feuille form { display: block; }
.plus__feuille button {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  height: 44px;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--rayon-ctrl);
  background: none;
  color: var(--encre-2);
  font: inherit;
  font-size: var(--t-corps);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.plus__feuille button:hover { background: var(--fond); }

/* Connexion */
.connexion { max-width: 420px; width: 100%; margin: var(--e6) auto; display: grid; gap: var(--e4); }
.connexion__form { display: grid; gap: var(--e4); }
.connexion__form .bouton { justify-self: start; }

/* Messages et erreurs : à l'encre, la couleur reste à la conformité. */
.erreurs, .message {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon-ctrl);
  font-size: var(--t-corps);
  color: var(--encre);
}
.erreurs { background: var(--surface-creux); border-left: 3px solid var(--encre-2); }
.message { background: var(--lapis-pale); }
.erreurs .ic, .message .ic { margin-top: 2px; }
/* Achat proposé dont le titre n'est plus recommandable : c'est la conformité qui parle, d'où le rouge. */
.reco__alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon-ctrl);
  border-left: 3px solid var(--rouge);
  background: var(--rouge-pale);
  color: var(--encre);
}
.reco__alerte .ic { flex: none; margin-top: 2px; color: var(--rouge); }
.erreurs ul { display: grid; gap: var(--e1); }
.vide { padding-block: var(--e2); }

/* Texte rédigé par l'agent : ses retours à la ligne comptent. */
.prose--agent, .reco__corps .prose { white-space: pre-line; overflow-wrap: anywhere; }

/* Onglets plus nombreux que dans le prototype (filtres de l'univers) : ils défilent au lieu d'élargir la page. */
.onglets { overflow-x: auto; scrollbar-width: none; }
.onglets a { flex: none; white-space: nowrap; }

/* Tris de l'univers */
.tris { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); font-size: var(--t-petit); }
.tris a[aria-current="true"] { font-weight: 700; text-decoration: none; color: var(--encre); }

/* Tableaux en fiches : vrai tableau dès 760 px, fiche empilée en dessous, étiquette tirée de data-libelle. */
.fiches { width: 100%; border-collapse: collapse; }
.fiches thead { display: none; }
.fiches tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--filet);
}
.fiches tbody tr:first-child { border-top: 0; padding-top: 0; }
.fiches th, .fiches td { padding: 0; text-align: left; font-weight: 400; vertical-align: top; font-size: var(--t-petit); color: var(--encre-2); }
.fiches th[scope="row"] { font-size: var(--t-corps); color: var(--encre); }
.fiches .c-plein { grid-column: 1 / -1; }
/* Un écart plutôt qu'une espace : en Archivo condensée, l'espace collait le libellé à sa valeur (« À purifier0,14 $ »). */
.fiches td[data-libelle]::before { content: attr(data-libelle); margin-right: 6px; color: var(--encre-3); font-stretch: 82%; font-weight: 600; }
.fiches .note { display: block; }
.fiches .c-purifie .note { display: inline; }      /* « Purifié non » sur une ligne */
.fiches .ligne__nom { display: inline; }
.c-actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.c-actions form { display: contents; }
.fiches--cases tr { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
.fiches--cases .c-case { grid-row: 1 / span 4; }
.fiches--cases .c-plein { grid-column: 2 / -1; }
.case { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px 0 0 -12px; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 0; accent-color: var(--lapis); }

/* Formulaires de saisie */
.formulaire { display: grid; gap: var(--e4); border: 0; margin: 0; padding: 0; min-width: 0; }
.formulaire legend { padding: 0; margin-bottom: var(--e3); }
.formulaire__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.formulaire__champs .champ--large { grid-column: 1 / -1; }
.formulaire .bouton { justify-self: start; }
.formulaire--purification { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--filet); }
.formulaire--ligne { grid-template-columns: minmax(0, 220px) auto; align-items: end; margin-top: var(--e4); }
.formulaire--actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--e4); }   /* boutons de confirmation : se replient, ne se recouvrent jamais */
select.saisie { appearance: auto; }

/* Chiffres sans la valeur du portefeuille au-dessus (purification, paramètres) */
.chiffres--seuls { margin-top: var(--e3); border-top: 0; padding-top: 0; }
.chiffres--seuls + .aide { margin-top: var(--e3); }

/* Réglages */
.reglages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--e4); margin-top: var(--e3); }
.reglages dt { font-size: var(--t-petit); font-stretch: 82%; font-weight: 600; color: var(--encre-3); margin-top: var(--e2); }
.reglages dd { color: var(--encre); }

/* Sessions et journal : statut à l'encre, sans les couleurs de conformité */
.etat-session {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--rayon-pastille);
  background: var(--surface-creux);
  color: var(--encre-2);
  font-size: var(--t-petit);
  font-stretch: 88%;
  font-weight: 650;
}
.etat-session--en_cours { background: var(--lapis-pale); color: var(--lapis); }
.liste-simple { display: grid; gap: var(--e2); margin-block: var(--e3); }
/* Consigne de la porteuse : sa police à elle, celle de l'interface ; ses retours à la ligne comptent. */
.consigne { white-space: pre-line; overflow-wrap: anywhere; }
.journal { display: grid; }
.etape { padding: var(--e3) 0; border-top: 1px solid var(--filet); display: grid; gap: var(--e1); }
.etape:first-child { border-top: 0; padding-top: 0; }
.etape__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.etape__type { font-size: var(--t-petit); font-weight: 650; color: var(--encre-2); }
.etape__details {
  margin: 0;
  padding: var(--e2) var(--e3);
  border-radius: 8px;
  background: var(--surface-creux);
  color: var(--encre-2);
  font: inherit;
  font-size: var(--t-petit);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.suivi { margin-top: var(--e3); font-size: var(--t-petit); color: var(--encre-3); }

@media (min-width: 760px) {
  .formulaire__champs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .formulaire__champs .champ--large { grid-column: span 2; }
  .reglages { grid-template-columns: max-content minmax(0, 1fr); }
  .reglages dt { margin-top: 0; }

  .fiches thead { display: table-header-group; }
  .fiches tr { display: table-row; padding: 0; border: 0; }
  .fiches th, .fiches td { display: table-cell; padding: var(--e3); border-top: 1px solid var(--filet); vertical-align: middle; font-size: var(--t-corps); color: var(--encre); }
  .fiches thead th {
    border-top: 0;
    padding-block: var(--e2);
    background: var(--surface-creux);
    font-size: var(--t-petit);
    font-stretch: 82%;
    font-weight: 650;
    color: var(--encre-2);
    white-space: nowrap;
  }
  .fiches thead th:first-child { border-radius: 8px 0 0 8px; }
  .fiches thead th:last-child { border-radius: 0 8px 8px 0; }
  .fiches tbody tr:first-child th, .fiches tbody tr:first-child td { border-top: 0; }
  .fiches .num { text-align: right; }
  .fiches td[data-libelle]::before { content: none; }
  .fiches .ligne__nom { display: block; }
  .fiches .c-verif-fiche { white-space: nowrap; }
  .case { margin: 0; }
}