/* ===================================================================
   Tarjama — feuille de style unique, sans dépendance.

   Trois thèmes : clair, sombre, ou selon le réglage du système.
   Les deux couleurs du cabinet (principale et accent) sont injectées à
   l'exécution et se déclinent automatiquement en nuances.
   =================================================================== */

:root {
  /* --- couleurs du cabinet, remplacées à l'exécution --- */
  --primaire: #1f5673;
  --accent: #aa6528;      /* mesuré : #c9772f tombait à 3,41 sur blanc */

  /* --- échelle d'espacement, multiples de 4 --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --rayon-s: 6px;
  --rayon: 10px;
  --rayon-l: 14px;

  --largeur-nav: 244px;
  --entete-h: 58px;

  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------- thème clair */
:root, [data-theme="clair"] {
  --fond: #eff2f5;
  --fond-doux: #e6eaef;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #e9eef3;
  --bord: #c3cdd8;
  --bord-fort: #8596aa;

  --texte: #17202a;
  --texte-2: #4a5763;
  /* Mesuré : #77848f ne donnait que 3,83 sur blanc, sous le seuil AA de 4,5.
     Tout le texte d'explication de l'application est dans cette couleur. */
  --texte-3: #606b75;
  /* Le primaire sert à la fois de fond de bouton et de couleur de texte.
     Ces deux usages n'ont pas les mêmes contraintes : d'où deux variables. */
  --primaire-texte: #1f5673;
  --accent-texte: #985a24;

  --ok: #14713f;        --ok-fond: #e3f5ea;   --ok-bord: #a9dcbf;
  --alerte: #a52017;    --alerte-fond: #fdecea; --alerte-bord: #f2b8b2;
  --avert: #7a5400;     --avert-fond: #fff5e0; --avert-bord: #e9cd8e;
  --info: #114c73;      --info-fond: #e6f0f8;  --info-bord: #b6d3e8;

  --ombre-1: 0 1px 2px rgba(16, 24, 40, .05);
  --ombre-2: 0 1px 3px rgba(16, 24, 40, .07), 0 6px 16px -6px rgba(16, 24, 40, .10);
  --ombre-3: 0 12px 40px -8px rgba(16, 24, 40, .22);
  --sur-primaire: #ffffff;
  /* Texte posé SUR le vert (bouton « Prêt » allumé) : blanc en clair où le
     vert est sombre, quasi noir en sombre où le vert devient clair. */
  --sur-ok: #ffffff;
  /* Compteur de la cloche : en thème sombre, --alerte devient un rouge
     clair où le blanc tombe à 2,21. Le texte suit donc le thème. */
  --compteur-texte: #ffffff;
  color-scheme: light;
}

/* --------------------------------------------------------- thème sombre */
[data-theme="sombre"] {
  --fond: #12171d;
  --fond-doux: #171d24;
  --surface: #1a212a;
  --surface-2: #202832;
  --surface-3: #273140;
  --bord: #364452;
  --bord-fort: #596d81;

  --texte: #e8edf2;
  --texte-2: #a9b6c2;
  --texte-3: #8d99a4;
  --primaire-texte: #49a0ce;
  --accent-texte: #d38643;

  --ok: #5ddc9a;        --ok-fond: #12291f;   --ok-bord: #1f5c3e;
  --alerte: #ff8f85;    --alerte-fond: #2c1715; --alerte-bord: #6b2a24;
  --avert: #f0c268;     --avert-fond: #2a2113; --avert-bord: #6b5320;
  --info: #7fc0f0;      --info-fond: #12212c;  --info-bord: #23506f;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 20px -8px rgba(0, 0, 0, .6);
  --ombre-3: 0 16px 48px -10px rgba(0, 0, 0, .7);
  --sur-primaire: #ffffff;
  --sur-ok: #12291f;
  --compteur-texte: #2c1715;   /* = --alerte-fond, en clair pour la mesure */
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #12171d;  --fond-doux: #171d24;
    --surface: #1a212a; --surface-2: #202832; --surface-3: #273140;
    --bord: #364452; --bord-fort: #596d81;
    --texte: #e8edf2; --texte-2: #a9b6c2; --texte-3: #8d99a4;
    /* Le primaire du cabinet est trop sombre pour servir de texte sur fond
       sombre : 2,04 seulement. On l'éclaircit pour cet usage-là uniquement. */
    --primaire-texte: #49a0ce;
    --accent-texte: #d38643;
    --ok: #5ddc9a; --ok-fond: #12291f; --ok-bord: #1f5c3e;
    --sur-ok: #12291f;
    --alerte: #ff8f85; --alerte-fond: #2c1715; --alerte-bord: #6b2a24;
    --avert: #f0c268; --avert-fond: #2a2113; --avert-bord: #6b5320;
    --info: #7fc0f0; --info-fond: #12212c; --info-bord: #23506f;
    --ombre-1: 0 1px 2px rgba(0,0,0,.4);
    --ombre-2: 0 1px 3px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.6);
    --ombre-3: 0 16px 48px -10px rgba(0,0,0,.7);
    --compteur-texte: #2c1715;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic",
               "Helvetica Neue", sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] { direction: rtl; }
.cache { display: none !important; }
a { color: var(--primaire-texte); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--primaire) 26%, transparent); }

/* ------------------------------------------------------------ chargement */
.chargement { position: fixed; inset: 0; display: grid; place-content: center;
  gap: var(--e3); justify-items: center; background: var(--fond); z-index: 50; }
.rond { width: 34px; height: 34px; border: 3px solid var(--bord);
  border-top-color: var(--primaire); border-radius: 50%;
  animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
/* Attention : cette animation déplace un « transform ». Tout élément qui la
   porte avec « both » devient un BLOC CONTENEUR : un descendant en
   « position: fixed » s'y accroche au lieu de se poser sur l'écran. C'est ce
   qui décalait les menus « ⋯ » de 244 px — la largeur du menu latéral. Les
   panneaux flottants sont donc posés sur « body », jamais dans le flux. */
@keyframes apparait { from { opacity: 0; transform: translateY(4px); } }

/* ------------------------------------------------------------- connexion */
.connexion { min-height: 100vh; display: grid; place-content: center; padding: var(--e4);
  background:
    radial-gradient(1200px 500px at 50% -10%,
      color-mix(in srgb, var(--primaire) 12%, transparent), transparent 70%),
    var(--fond); }
.carte-connexion { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon-l); padding: var(--e6) var(--e5);
  width: min(410px, 92vw); box-shadow: var(--ombre-2);
  display: flex; flex-direction: column; gap: var(--e3);
  animation: apparait .3s ease both; }
.marque { display: flex; align-items: center; gap: var(--e3); }
.marque img { width: 44px; height: 44px; border-radius: 11px; box-shadow: var(--ombre-1); }
.marque h1 { font-size: 23px; margin: 0; letter-spacing: -.015em; }
.sous-titre { margin: -6px 0 var(--e2); color: var(--texte-2); font-size: 13.5px; }

/* ------------------------------------------------------------ formulaires */
label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--texte-2); font-weight: 600; letter-spacing: .01em; }
input, select, textarea {
  padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface); font-weight: 400; color: var(--texte); width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--bord-fort); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primaire);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 18%, transparent);
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primaire); outline-offset: 2px; border-radius: var(--rayon-s);
}
input::placeholder, textarea::placeholder { color: var(--texte-3); }
textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
select { appearance: none; padding-inline-end: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select { background-position: 16px calc(50% + 1px), 11px calc(50% + 1px); }
input[type=checkbox], input[type=radio] { width: auto; flex: 0 0 auto; margin: 0;
  accent-color: var(--primaire); width: 16px; height: 16px; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
  flex-direction: row; align-items: center; gap: var(--e2);
  font-weight: 500; color: var(--texte); font-size: 14px; }
label:has(> input[type=radio]) { align-items: flex-start; padding: 5px 0; }
label:has(> input[type=radio]) input { margin-top: 3px; }
input[type=file] { padding: 8px; background: var(--surface-2); border-style: dashed;
  cursor: pointer; }
input[type=color] { padding: 3px; height: 40px; cursor: pointer; }
.note { font-size: 12.5px; color: var(--texte-2); margin: 0; font-weight: 400;
  line-height: 1.5; }
.erreur { background: var(--alerte-fond); border: 1px solid var(--alerte-bord);
  color: var(--alerte); padding: 9px 12px; border-radius: var(--rayon-s); font-size: 13.5px; }

/* ---------------------------------------------------------------- boutons */
button { cursor: pointer; }
.principal, .secondaire, .discret, .danger {
  border-radius: var(--rayon-s); padding: 9px 15px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; display: inline-flex; align-items: center;
  gap: 6px; justify-content: center; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.principal { background: var(--primaire); color: var(--sur-primaire);
  box-shadow: var(--ombre-1); }
.principal:hover { background: color-mix(in srgb, var(--primaire) 88%, #000);
  box-shadow: var(--ombre-2); }
.secondaire { background: var(--surface); border-color: var(--bord); color: var(--texte); }
.secondaire:hover { background: var(--surface-3); border-color: var(--bord-fort); }
.discret { background: transparent; color: var(--primaire-texte); padding: 5px 8px;
  font-size: 13.5px; }
.discret:hover { background: color-mix(in srgb, var(--primaire) 10%, transparent); }
.danger { background: var(--surface); border-color: var(--alerte-bord); color: var(--alerte); }
.danger:hover { background: var(--alerte-fond); }
.principal:active, .secondaire:active, .danger:active { transform: translateY(1px); }
/* Un lien qui porte un style de bouton ne doit pas être souligné. */
a.principal, a.secondaire, a.discret, a.danger { text-decoration: none; }
button[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.icone { background: transparent; border: none; font-size: 18px; padding: 7px;
  border-radius: var(--rayon-s); line-height: 1; display: inline-flex; }
.icone:hover { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------ application */
.application { display: grid; min-height: 100vh;
  grid-template-columns: minmax(0, var(--largeur-nav)) minmax(0, 1fr);
  grid-template-rows: var(--entete-h) 1fr;
  grid-template-areas: "entete entete" "nav contenu"; }

.entete { grid-area: entete; display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e3); position: sticky; top: 0; z-index: 30; min-width: 0;
  background: var(--primaire); color: var(--sur-primaire);
  box-shadow: var(--ombre-1); }
.marque-entete { display: flex; align-items: center; gap: var(--e2);
  color: var(--sur-primaire); text-decoration: none; font-weight: 700;
  white-space: nowrap; letter-spacing: -.01em; }
.marque-entete img { width: 28px; height: 28px; border-radius: 7px; background: #fff; }
.recherche { flex: 1; max-width: 540px; position: relative; }
.recherche input { background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .2); color: var(--sur-primaire);
  padding-inline-start: 34px; }
.recherche input::placeholder { color: rgba(255, 255, 255, .7); }
.recherche input:focus { background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.recherche::before { content: "⌕"; position: absolute; inset-inline-start: 12px;
  top: 50%; transform: translateY(-52%); font-size: 17px;
  color: rgba(255, 255, 255, .78); pointer-events: none; }
.entete-droite { margin-inline-start: auto; display: flex; align-items: center;
  gap: var(--e2); }
.badge { font-size: 11px; padding: 4px 9px; border-radius: 20px; background: var(--accent);
  color: #fff; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.badge.gris { background: rgba(255, 255, 255, .2); }
.menu-utilisateur { position: relative; }
/* Menu déroulant de l'entête. Il portait la même classe « panneau » que les
   encadrés de fiche définis plus bas : la seconde définition écrasait la
   première et le menu, déclaré « position: absolute », retombait en
   « relative ». Deux objets différents, deux noms. */
.menu-deroulant { position: absolute; inset-inline-end: 0; top: 46px;
  background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-3);
  min-width: 268px; padding: var(--e3); z-index: 40; color: var(--texte);
  display: flex; flex-direction: column; gap: 6px;
  animation: apparait .16s ease both; }
.menu-deroulant button { width: 100%; justify-content: flex-start; }

/* ------------------------------------------------------------- navigation */
.navigation { grid-area: nav; background: var(--surface);
  border-inline-end: 1px solid var(--bord); padding: var(--e3) var(--e2);
  overflow-y: auto; position: sticky; top: var(--entete-h);
  height: calc(100vh - var(--entete-h)); }
.navigation a { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: var(--rayon-s); color: var(--texte-2); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: background var(--transition),
  color var(--transition); }
.navigation a span:first-child { width: 20px; text-align: center; font-size: 15px;
  opacity: .9; }
.navigation a:hover { background: var(--surface-3); color: var(--texte); }
.navigation a.actif { background: color-mix(in srgb, var(--primaire) 12%, transparent);
  color: var(--primaire-texte); font-weight: 650; }
.navigation .groupe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-3); margin: var(--e4) 11px 5px; font-weight: 700; }
.navigation .groupe:first-child { margin-top: 2px; }
.navigation .pastille { margin-inline-start: auto; background: var(--accent); color: #fff;
  border-radius: 12px; padding: 1px 7px; font-size: 11px; font-weight: 700; }

.contenu { grid-area: contenu; padding: var(--e5); max-width: 1440px; width: 100%;
  min-width: 0; overflow-x: hidden; animation: apparait .2s ease both; }

/* ------------------------------------------------------------------ blocs */
h1 { font-size: 24px; margin: 0 0 3px; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 16.5px; margin: 0 0 var(--e3); letter-spacing: -.01em; font-weight: 650; }
h3 { font-size: 11.5px; margin: var(--e4) 0 var(--e2); text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-3); font-weight: 700; }
.titre-page { display: flex; align-items: flex-start; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e5); min-width: 0; }
.titre-page h1 { overflow-wrap: anywhere; }
.titre-page .actions { margin-inline-start: auto; display: flex; gap: var(--e2);
  flex-wrap: wrap; }
.fil { font-size: 12.5px; color: var(--texte-3); margin-bottom: 3px; }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--primaire-texte); text-decoration: underline; }

.carte { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e4); margin-bottom: var(--e4);
  box-shadow: var(--ombre-1); min-width: 0; }
.carte > h2 { display: flex; align-items: center; gap: var(--e2); }
.grille { display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.grille-2 { display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* ------------------------------------------------------------ indicateurs */
.indicateur { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e3) var(--e4); display: flex;
  flex-direction: column; gap: 2px; cursor: pointer; text-align: start;
  box-shadow: var(--ombre-1); position: relative; overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition); }
.indicateur::before { content: ""; position: absolute; inset-inline-start: 0; top: 0;
  bottom: 0; width: 3px; background: var(--primaire); opacity: 0;
  transition: opacity var(--transition); }
.indicateur:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2);
  transform: translateY(-1px); }
.indicateur:hover::before { opacity: 1; }
.indicateur .libelle { font-size: 11px; color: var(--texte-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; }
.indicateur .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.15; }
.indicateur .detail { font-size: 12.5px; color: var(--texte-2); }
.indicateur.accent .valeur { color: var(--accent-texte); }
.indicateur.ok .valeur { color: var(--ok); }
.indicateur.alerte .valeur { color: var(--alerte); }

/* --------------------------------------------------------- replis
   Ce qu'on ne remplit pas tous les jours ne doit pas occuper l'écran tous
   les jours. Les champs restent dans le formulaire, donc lus à la validation,
   simplement rangés. */
.repli { border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface-2); margin-top: var(--e2); }
.repli > summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px;
  font-weight: 700; color: var(--texte-2); list-style: none; display: flex;
  align-items: center; gap: 7px; }
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::before { content: "▸"; color: var(--texte-3); font-size: 11px; }
.repli[open] > summary::before { content: "▾"; }
.repli > summary:hover { color: var(--texte); }
.repli > .champs, .repli > div { padding: 0 12px 12px; }

/* ------------------------------------------------------------ combo
   Un choix dans une longue liste : on tape, la liste se réduit. La dernière
   ligne propose d'ajouter ce qui n'existe pas encore. */
.combo { position: relative; }
.combo.choisi input { border-color: var(--ok); }
.combo-liste { position: absolute; inset-inline: 0; top: calc(100% + 3px); z-index: 60;
  max-height: 260px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s);
  box-shadow: var(--ombre-3); padding: 4px; display: flex; flex-direction: column; }
.combo-option { width: 100%; justify-content: flex-start; text-align: start;
  padding: 7px 9px; border: none; background: none; color: var(--texte);
  border-radius: var(--rayon-s); font-size: 13.5px; cursor: pointer; }
.combo-option:hover, .combo-option.surligne { background: var(--surface-3); }
.combo-nouveau { color: var(--primaire-texte); font-weight: 700;
  border-top: 1px solid var(--bord); border-radius: 0; margin-top: 4px; padding-top: 9px; }
.combo-vide { padding: 9px; color: var(--texte-3); font-size: 13px; }

/* ------------------------------------------------- tuiles « ce qui presse »
   Une bande de tuiles au lieu d'une grille de boîtes grises identiques.
   Chaque tuile porte la couleur de son sujet, montre son nombre en grand,
   dit quoi faire, et annonce d'une flèche qu'elle mène quelque part. Celles
   qui sont à zéro s'effacent : le regard doit tomber sur ce qui reste. */
.situation { display: grid; gap: var(--e3); margin-bottom: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tuile { display: flex; flex-direction: column; gap: 3px; text-align: start;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--e3) var(--e4) 13px; cursor: pointer; box-shadow: var(--ombre-1);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition); }
.tuile:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2);
  transform: translateY(-1px); }
.tuile-haut { display: flex; align-items: center; gap: 7px; }
.tuile-icone { flex: none; width: 26px; height: 26px; border-radius: var(--rayon-s);
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  background: var(--surface-3); }
.tuile-libelle { flex: 1; min-width: 0; font-size: 11px; font-weight: 700;
  color: var(--texte-2); text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.25; }
.tuile-fleche { flex: none; color: var(--texte-3); font-size: 16px; opacity: .4;
  transition: transform var(--transition), opacity var(--transition); }
.tuile:hover .tuile-fleche { opacity: 1; transform: translateX(3px); }
.tuile-valeur { font-size: 27px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.15; color: var(--texte); margin-top: 2px; }
.tuile-action { font-size: 12.5px; color: var(--texte-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* La couleur ne décore pas : elle dit de quoi il s'agit. */
.tuile.alerte  .tuile-icone { background: var(--alerte-fond); }
.tuile.alerte  .tuile-valeur { color: var(--alerte); }
.tuile.ok      .tuile-icone { background: var(--ok-fond); }
.tuile.ok      .tuile-valeur { color: var(--ok); }
.tuile.accent  .tuile-icone { background: var(--avert-fond); }
.tuile.accent  .tuile-valeur { color: var(--accent-texte); }
.tuile.neutre  .tuile-icone { background: var(--info-fond); }

/* Rien à faire : la tuile reste lisible mais cesse de réclamer l'attention. */
.tuile.calme { background: var(--surface-2); box-shadow: none; }
.tuile.calme .tuile-icone { background: var(--surface-3); filter: grayscale(1); opacity: .55; }
.tuile.calme .tuile-valeur { color: var(--texte-3); font-weight: 600; }

/* ------------------------------------------------ cloche des alertes */
.compteur-cloche { position: absolute; top: 1px; inset-inline-end: 1px;
  min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--alerte);
  color: var(--compteur-texte);
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--surface); box-sizing: content-box; }
#bouton-alertes { position: relative; }
.menu-deroulant.large { width: min(370px, 88vw); }
.deroulant-titre { display: flex; flex-direction: column; gap: 1px;
  padding-bottom: var(--e2); border-bottom: 1px solid var(--bord); margin-bottom: var(--e2); }
.alerte-ligne { display: flex; gap: var(--e2); padding: var(--e2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 55%, transparent); }
.alerte-ligne:last-of-type { border-bottom: none; }
.alerte-icone { flex: none; font-size: 15px; line-height: 1.4; }
.alerte-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alerte-corps strong { font-size: 13.5px; }
.alerte-actions { display: flex; gap: var(--e2); margin-top: var(--e1); }
.alerte-actions button { width: auto; padding: 3px 8px; font-size: 12px; }
.deroulant-pied button { width: auto; }
.deroulant-pied { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--bord);
  margin-top: var(--e2); }

/* --------------------------------------------------------------- tableaux */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); padding: 9px 10px; border-bottom: 1px solid var(--bord);
  font-weight: 700; white-space: nowrap; background: var(--surface); position: sticky;
  top: 0; z-index: 1; }
td { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--bord) 55%, transparent);
  vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--surface-2); }
td.n, th.n { text-align: end; white-space: nowrap; }
.tableau-defile { overflow-x: auto; margin: 0 calc(var(--e4) * -1) calc(var(--e4) * -1);
  padding: 0 var(--e4) var(--e2); }
.carte > .tableau-defile:first-child { margin-top: calc(var(--e4) * -1);
  padding-top: var(--e2); }

/* -------------------------------------------------------------- étiquettes */
.etiquette { display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--texte-2);
  white-space: nowrap; border: 1px solid transparent; }
.etiquette.ok { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.etiquette.attente { background: var(--avert-fond); color: var(--avert);
  border-color: var(--avert-bord); }
.etiquette.alerte { background: var(--alerte-fond); color: var(--alerte);
  border-color: var(--alerte-bord); }
.etiquette.info { background: var(--info-fond); color: var(--info);
  border-color: var(--info-bord); }

.avertissement { background: var(--avert-fond); border: 1px solid var(--avert-bord);
  color: var(--avert); padding: 11px 14px; border-radius: var(--rayon-s);
  font-size: 13.5px; margin-bottom: var(--e3); line-height: 1.55; }
.avertissement.grave { background: var(--alerte-fond); border-color: var(--alerte-bord);
  color: var(--alerte); }
.avertissement.info { background: var(--info-fond); border-color: var(--info-bord);
  color: var(--info); }
.avertissement strong { display: block; margin-bottom: 2px; }

/* ---------------------------------------------------------------- champs */
.champs { display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.champs.large { grid-template-columns: 1fr; }
/* Un avertissement ou une barre d'actions occupe toute la largeur du formulaire. */
.champs > .avertissement, .champs > .actions, .champs > h3 { grid-column: 1 / -1; }
.pleine { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--e3) var(--e4) var(--e4); margin: 0 0 var(--e3);
  background: var(--surface-2); }
legend { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--primaire-texte); padding: 0 var(--e2); }
.ligne-boutons { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.vide { text-align: center; padding: var(--e6) var(--e4); color: var(--texte-3);
  font-size: 14px; }

/* ---------------------------------------------------------------- modale */
.modale { position: fixed; inset: 0; background: rgba(10, 15, 21, .55);
  backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60;
  padding: var(--e4); animation: apparait .16s ease both; }
.modale-boite { background: var(--surface); border-radius: var(--rayon-l);
  width: min(820px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--ombre-3); border: 1px solid var(--bord); }
/* Le voile du second facteur passe AU-DESSUS de la modale : l'action qu'il
   protège s'y joue souvent, et doit être encore là quand le code est validé. */
.voile-mfa { position: fixed; inset: 0; background: rgba(10, 15, 21, .6);
  backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 80;
  padding: var(--e4); animation: apparait .16s ease both; }
.boite-mfa { background: var(--surface); border-radius: var(--rayon-l); width: min(420px, 96vw);
  padding: var(--e4); box-shadow: var(--ombre-3); border: 1px solid var(--bord);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.boite-mfa h2 { margin: 0; font-size: 17px; }
.boite-mfa input { font-size: 22px; letter-spacing: .3em; text-align: center;
  font-variant-numeric: tabular-nums; }
/* Les écrans à listes (retrait, remise) ont besoin d'un peu plus de largeur. */
.modale.large .modale-boite { width: min(980px, 96vw); }
.modale-entete { display: flex; align-items: center; padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bord); }
.modale-entete h2 { margin: 0; flex: 1; font-size: 17px; }
.modale-entete .icone { color: var(--texte-2); }
.modale-entete .icone:hover { background: var(--surface-3); }
.modale-corps { padding: var(--e4); overflow-y: auto; }

/* -------------------------------------------------------------- messages */
.messages { position: fixed; inset-block-end: var(--e4); inset-inline-end: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2); z-index: 80;
  max-width: min(430px, 92vw); }
.message { background: #1f2933; color: #fff; padding: 12px 15px; border-radius: var(--rayon-s);
  font-size: 14px; box-shadow: var(--ombre-3); transition: opacity .3s;
  animation: apparait .2s ease both; border-inline-start: 3px solid rgba(255,255,255,.35); }
.message.ok { background: #10603a; border-inline-start-color: #58d69b; }
.message.erreur { background: #8c1c14; border-inline-start-color: #ff9b92; }
.message.avert { background: #6b4a00; border-inline-start-color: #f5c860; }

/* --------------------------------------------------------------- éditeur */
.atelier { display: grid; gap: var(--e3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.volet { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); display: flex; flex-direction: column;
  min-height: 440px; min-width: 0; box-shadow: var(--ombre-1); overflow: hidden; }
.volet-entete { padding: 9px var(--e3); border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; gap: var(--e2); font-size: 13px; font-weight: 650;
  background: var(--surface-2); }
.volet-corps { padding: var(--e3); overflow: auto; flex: 1; }
.source-texte { white-space: pre-wrap; font-size: 14px; line-height: 1.75; }
.editeur { min-height: 420px; padding: var(--e4); border: none; outline: none;
  font-size: 15px; line-height: 1.8; background: var(--surface); }
.editeur:focus { box-shadow: inset 0 0 0 2px
  color-mix(in srgb, var(--primaire) 30%, transparent); }
.editeur[dir="rtl"] { text-align: right;
  font-family: "Noto Naskh Arabic", "Geeza Pro", serif; font-size: 17.5px; line-height: 2; }
.editeur table { border: 1px solid var(--bord); margin: var(--e2) 0; }
.editeur td, .editeur th { border: 1px solid var(--bord); padding: 6px 8px; }
.barre-outils { display: flex; gap: 3px; flex-wrap: wrap; padding: 7px var(--e3);
  border-bottom: 1px solid var(--bord); background: var(--surface-2); }
.barre-outils button { padding: 4px 10px; font-size: 13px; border: 1px solid var(--bord);
  background: var(--surface); border-radius: 5px; }
.barre-outils button:hover { background: var(--surface-3); }
.controle { border-inline-start: 3px solid var(--bord); padding: 9px 12px;
  margin-bottom: var(--e2); background: var(--surface-2);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0; font-size: 13.5px; }
.controle.bloquant { border-color: var(--alerte); background: var(--alerte-fond);
  color: var(--alerte); }
.controle.avertissement { border-color: var(--avert); background: var(--avert-fond);
  color: var(--avert); }
.controle.information { border-color: var(--info); background: var(--info-fond);
  color: var(--info); }

.chrono { list-style: none; padding: 0; margin: 0; }
.chrono li { padding: 9px 0 9px var(--e4); border-inline-start: 2px solid var(--bord);
  position: relative; font-size: 13.5px; }
.chrono li::before { content: ""; position: absolute; inset-inline-start: -5px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primaire);
  box-shadow: 0 0 0 3px var(--surface); }
.chrono .date { color: var(--texte-3); font-size: 12px; }

/* Les onglets passent à la ligne au lieu de défiler. Huit onglets font
   1 037 px : dans la colonne d'une fiche, large de 642, la moitié était cachée
   derrière un glissement latéral qu'aucune flèche n'annonçait. On préfère deux
   rangées visibles à une rangée tronquée. */
.onglets { display: flex; flex-wrap: wrap; gap: 2px 0;
  border-bottom: 1px solid var(--bord); margin-bottom: var(--e4); }
.onglets button { border: none; background: transparent; padding: 10px 13px;
  font-weight: 600; border-bottom: 2px solid transparent; color: var(--texte-2);
  white-space: nowrap; font-size: 14px; transition: color var(--transition),
  border-color var(--transition); }
.onglets button:hover { color: var(--texte); }
.onglets button.actif { color: var(--primaire-texte);
  border-bottom-color: var(--primaire-texte); }

.filtres { display: block; margin-bottom: var(--e4); padding: var(--e3);
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre-1); }
.filtres label { font-size: 11.5px; }
.filtres input, .filtres select { min-width: 140px; }

/* ------------------------------------------------------ éléments métier */
.telephone-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 var(--e2); }
a.telephone { font-weight: 700; font-size: 15px; color: var(--primaire-texte);
  text-decoration: none; white-space: nowrap; }
a.telephone:hover { text-decoration: underline; }
button.lien-prix { background: transparent; border: none; padding: 2px 5px;
  border-radius: 5px; color: var(--primaire-texte); font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
button.lien-prix:hover { background: color-mix(in srgb, var(--primaire) 12%, transparent); }
.suggestions { display: flex; flex-direction: column; gap: 1px; margin-top: 5px;
  border: 1px solid var(--bord); border-radius: var(--rayon-s); overflow: hidden;
  max-height: 240px; overflow-y: auto; box-shadow: var(--ombre-2); }
.suggestion { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 9px 12px; background: var(--surface); border: none; text-align: start;
  border-bottom: 1px solid var(--bord); }
.suggestion:last-child { border-bottom: none; }
.suggestion:hover { background: var(--surface-3); }
.suggestion .note { font-size: 12px; }
/* Ce qui explique une suggestion : sur quoi elle a été trouvée, et si la
   même personne figure plusieurs fois dans le fichier. */
.suggestion-tete { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* Le parcours de livraison : les étapes s'empilent sous la recherche. */
.livraison-zone { display: grid; gap: var(--e4); margin-top: var(--e3);
  grid-template-columns: minmax(0, 1fr); }
.livraison-zone:empty { display: none; }
.suggestion-motif { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texte-2); background: var(--surface-3);
  border-radius: 20px; padding: 1px 8px; }
.suggestion-doublon { font-size: 10.5px; font-weight: 700; color: var(--avert);
  background: var(--avert-fond); border: 1px solid var(--avert-bord);
  border-radius: 20px; padding: 0 8px; }
.lignes-personnes { display: flex; flex-direction: column; gap: var(--e2); }
.bloc-document { border: 1px solid var(--bord); border-inline-start: 3px solid var(--primaire);
  border-radius: var(--rayon-s); padding: var(--e3); background: var(--surface); }
.bloc-document + .bloc-document { margin-top: var(--e2); }
.personnes-compact { margin-top: var(--e3); padding-top: var(--e2);
  border-top: 1px dashed var(--bord); }
.personnes-compact > .note { margin-bottom: 6px; }
.bloc-personne { border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: var(--e2) var(--e3); background: var(--surface); }
.bloc-personne-tete { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--e1); }
.bloc-personne-tete .note { text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; font-size: 10.5px; }
.ligne-personne { display: grid; gap: var(--e2); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.rtl-champ { direction: rtl; text-align: right; }
.actions-fichier { display: flex; gap: 1px; flex-wrap: wrap; }
.avant { color: var(--alerte); text-decoration: line-through; }
.apres { color: var(--ok); font-weight: 650; }
.droit-ligne { padding: 3px 0; }
.droit-ligne label { flex-direction: row; align-items: flex-start; gap: var(--e2); }
.droit-ligne code { font-size: 11px; color: var(--texte-3); font-weight: 400; }
.droit-note { margin-inline-start: 26px; font-size: 11.5px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

/* ------------------------------------------------------------ graphiques */
.graphique { width: 100%; display: block; overflow: visible; }
.graphique text { font-family: inherit; fill: var(--texte-2); font-size: 11px; }
.graphique .axe { stroke: var(--bord); stroke-width: 1; }
.graphique .grille-h { stroke: var(--bord); stroke-width: 1; stroke-dasharray: 3 4;
  opacity: .7; }
.graphique .barre { fill: var(--primaire); rx: 3;
  transition: opacity var(--transition); }
.graphique .barre.secondaire { fill: var(--accent); }
.graphique .barre:hover { opacity: .78; }
.graphique .ligne { fill: none; stroke: var(--primaire); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; }
.graphique .aire { fill: var(--primaire); opacity: .12; }
.graphique .point { fill: var(--surface); stroke: var(--primaire); stroke-width: 2; }
.graphique .valeur { fill: var(--texte); font-weight: 650; font-size: 11px; }
.graphique .libelle { fill: var(--texte-3); font-size: 10.5px; }
.legende { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e2);
  font-size: 12.5px; color: var(--texte-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bloc-graphique { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e4); box-shadow: var(--ombre-1);
  margin-bottom: var(--e4); min-width: 0; }
.bloc-graphique h2 { margin-bottom: var(--e1); }
.bloc-graphique .note { margin-bottom: var(--e3); }
.barre-empilee { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface-3); margin: var(--e2) 0 6px; }
.barre-empilee i { display: block; height: 100%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .application { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "entete" "contenu"; }
  .navigation { position: fixed; inset-block: var(--entete-h) 0; inset-inline-start: 0;
    width: var(--largeur-nav); transform: translateX(-105%);
    transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 25; height: auto;
    box-shadow: var(--ombre-3); }
  [dir="rtl"] .navigation { transform: translateX(105%); }
  .navigation.ouvert { transform: none; }
  .contenu { padding: var(--e3); }
  .atelier { grid-template-columns: 1fr; }
  .recherche { display: none; }
  /* Sur un téléphone, l'entête n'a plus la place de tout garder en entier :
     le nom du cabinet et le badge cèdent avant que la page ne déborde. */
  .marque-entete { min-width: 0; }
  .marque-entete span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .entete-droite { min-width: 0; }
  .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  h1 { font-size: 21px; }
  .indicateur .valeur { font-size: 23px; }
}
@media (min-width: 961px) { .menu-bascule { display: none; } }
@media print {
  .entete, .navigation, .messages, .onglets, .titre-page .actions { display: none; }
  .application { display: block; }
  .contenu { padding: 0; max-width: none; }
  .carte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}

/* Bouton Google sur l'écran de connexion (visible seulement si configuré). */
.ou { display: flex; align-items: center; gap: var(--e3); margin: var(--e3) 0;
  color: var(--texte-3); font-size: 12.5px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.bouton-google { display: flex; align-items: center; justify-content: center; gap: var(--e2);
  width: 100%; padding: 11px var(--e4); border: 1px solid var(--bord);
  border-radius: var(--rayon); background: var(--surface); color: var(--texte);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background var(--transition), border-color var(--transition); }
.bouton-google:hover { background: var(--surface-2); border-color: var(--bord-fort); }
.bouton-google svg { flex: none; }
#bloc-google .note { margin-top: var(--e2); }

/* ------------------------------------------------------- menu d'actions */
.menu-actions { position: relative; display: inline-flex; }
.menu-actions .chevron { font-size: 10px; opacity: .7; margin-inline-start: 2px; }
/* « fixed » et non « absolute » : le panneau échappe ainsi au « overflow: auto »
   du tableau qui le contient, lequel rognait la dernière option des menus
   ouverts en bas de liste. Sa position est calculée à l'ouverture. */
.menu-actions-panneau { position: fixed; min-width: 230px; max-width: min(320px, 92vw);
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre-3); padding: 5px; z-index: 60;
  display: none; }
/* Le panneau ouvert vit sur « body », plus dans son menu : la règle ne peut
   donc plus être un sélecteur descendant. Il porte sa propre classe. */
.menu-actions-panneau.ouvert { display: block; }
.menu-actions-panneau .entree { display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: none; text-align: start; padding: 9px 11px;
  border-radius: var(--rayon-s); font-size: 14px; color: var(--texte); }
.menu-actions-panneau .entree:hover { background: var(--surface-3); }
.menu-actions-panneau .entree.danger { color: var(--alerte); background: transparent; }
.menu-actions-panneau .entree.danger:hover { background: var(--alerte-fond); }
.menu-actions-panneau .ic { width: 18px; text-align: center; opacity: .8; }

/* --------------------------------------------------------- écran de retrait */
/* Toutes les grilles qui empilent du contenu bornent leur colonne. Sans
   « minmax(0, 1fr) », la colonne implicite vaut « auto » : elle se
   dimensionne sur son contenu et déborde du conteneur, sans défilement
   possible. C'est ce qui rognait les réglages. */
.liste-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ligne-doc { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface); }
.ligne-doc:hover { border-color: var(--bord-fort); }
.ligne-doc.remis { opacity: .55; }
.ligne-doc .prix { margin-inline-start: auto; font-variant-numeric: tabular-nums;
  font-weight: 600; }
.ok-inline { color: var(--ok); font-size: 12.5px; }
.alerte-inline { color: var(--avert); font-size: 12.5px; }
.case-alerte { display: flex; align-items: flex-start; gap: 9px; padding: 11px;
  border: 1px solid var(--avert-bord); background: var(--avert-fond);
  border-radius: var(--rayon-s); font-size: 13.5px; }

/* La liste des documents ne se coche plus : elle se lit. Une ligne écartée de
   la remise reste visible — on doit voir ce qu'on ne remet pas autant que ce
   qu'on remet. */
.ligne-doc .marque-doc { width: 18px; text-align: center; opacity: .75; }
.ligne-doc.ecarte { opacity: .5; border-style: dashed; }
.ligne-doc.ecarte .prix { text-decoration: line-through; }
.bouton-ligne { margin-inline-start: 8px; flex: none; font-size: 12.5px;
  padding: 4px 9px; }
.ligne-doc .bouton-ligne { margin-inline-start: 0; }

/* La pièce d'identité du déposant : masquée par défaut, montrée sur demande.
   Au comptoir l'écran est visible de la salle d'attente ; un numéro de CIN
   affiché en permanence n'a rien à y faire. */
.bloc-identite { margin-bottom: var(--e2); }
.ligne-identite { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface); }
.etiquette-identite { color: var(--texte-2); font-size: 13px; }
.valeur-cin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600;
  letter-spacing: .06em; padding: 3px 8px; border-radius: var(--rayon-s);
  background: var(--surface-2); }
.valeur-cin.masquee { color: var(--texte-3); letter-spacing: .18em; }

/* La pièce d'identité dans la case « Déposant » du formulaire de création :
   un sous-bloc séparé par un filet, sous les coordonnées. Une pièce déjà
   connue s'affiche sur une ligne ; sa mise à jour se déplie dessous. */
.sous-bloc { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px dashed var(--bord); }
.sous-bloc > .etiquette-identite { margin: 0 0 var(--e2); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; }
.identite-deposant > .note { margin: 0 0 var(--e2); }
.piece-connue { margin-bottom: var(--e2); }
.piece-connue .bloc-personne { margin-top: var(--e2); }

/* Les scans de pièces déjà au dossier : une ligne, un bouton pour l'ouvrir. */
.ligne-piece { display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  margin-top: 4px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface); }
.ligne-piece .note { color: var(--texte-3); }
.ligne-piece button { margin-inline-start: auto; }

/* Le déposant, ou quelqu'un d'autre : deux réponses possibles, donc deux
   boutons — ni case à cocher, ni liste déroulante pour un choix binaire. */
.choix-retirant { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.choix-retirant .segment { padding: 7px 14px; border: 1px solid var(--bord);
  border-radius: var(--rayon-s); background: var(--surface); color: var(--texte-2);
  font-size: 13.5px; }
.choix-retirant .segment:hover { border-color: var(--bord-fort); color: var(--texte); }
/* Sur un fond primaire, le texte est « --sur-primaire ». « --primaire-texte »
   est le primaire employé COMME texte, sur le fond de la page : l'écrire ici
   revenait à peindre le libellé de la couleur du bouton — contraste 1,00 en
   thème clair, c'est-à-dire invisible. */
.choix-retirant .segment.actif { background: var(--primaire); border-color: var(--primaire);
  color: var(--sur-primaire); font-weight: 600; }

/* Une ligne libre de devis ou de facture : désignation large, quantité et
   prix étroits, le bouton de retrait au bout. */
.ligne-libre { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end; gap: var(--e2); }
.ligne-libre .bouton-ligne { margin-bottom: 4px; }

/* D'où vient un droit : du rôle, accordé en plus, ou retiré malgré lui. */
.origine-droit { margin-inline-start: 8px; }
.origine-droit .etiquette { font-size: 11px; }

/* La clé secrète de la double authentification : sélectionnable d'un geste,
   lisible dans les deux thèmes (elle était en gris clair figé). */
.cle-secrete { user-select: all; background: var(--surface-2); color: var(--texte);
  padding: 10px; border-radius: var(--rayon-s); word-break: break-all;
  font-size: 15px; letter-spacing: 1px; }
a.bouton.principal { text-decoration: none; padding: 10px 16px; }

/* Un champ « fichier » et son bouton appareil photo, côte à côte. */
.entree-fichiers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entree-fichiers input[type=file] { flex: 1 1 220px; min-width: 0; }
.entree-fichiers .bouton-photo { white-space: nowrap; }

/* L'historique des messages : l'extrait est un bouton discret, aligné à
   gauche comme du texte ; le corps complet garde ses retours à la ligne. */
.historique-messages { margin-top: var(--e3); }
.historique-messages h3 { margin: 0 0 var(--e2); font-size: 14px; }
.texte-gauche { text-align: start; justify-content: flex-start; white-space: normal; }
.ligne-boutons.compacte { gap: 4px; margin: 0; }
.ligne-boutons.compacte .discret { padding: 3px 6px; font-size: 12.5px; }
.corps-message { white-space: pre-wrap; font: inherit; background: var(--surface-2);
  padding: 12px; border-radius: var(--rayon-s); margin: 0; }

/* URGENT : un badge rouge, le même partout, et une ligne teintée dans les
   listes. Se voir d'un coup d'œil, pas à la lecture. */
.badge-urgent { display: inline-block; background: var(--alerte); color: var(--compteur-texte);
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; padding: 2px 7px;
  border-radius: 999px; vertical-align: middle; }
tr.ligne-urgente td:first-child { box-shadow: inset 4px 0 0 var(--alerte); }
.echeance-proche.aujourdhui { color: var(--alerte); }
.lien-priorite { padding: 0 4px; font-size: inherit; }
.titre-cliquable { cursor: pointer; }
.titre-cliquable:hover { text-decoration: underline; }

/* Prêt / Pas prêt : deux boutons qui s'excluent. Celui de l'état courant est
   allumé et inerte ; l'autre, éteint et cliquable. « Prêt » allumé est vert. */
.ligne-avancement { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-start; }
.bloc-avancement { display: flex; flex-direction: column; gap: 6px; }
.bascule-pret { display: flex; align-items: center; gap: 8px; }
.bascule-pret .segment { padding: 9px 18px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface); color: var(--texte-2); font-weight: 600; }
.bascule-pret .segment:disabled { cursor: default; }
.bascule-pret .segment.actif { background: var(--surface-3); color: var(--texte);
  border-color: var(--bord-fort); }
.bascule-pret .segment.pret.actif { background: var(--ok); color: var(--sur-ok);
  border-color: var(--ok); }
.bascule-pret .segment:not(.actif):not(:disabled):hover { border-color: var(--bord-fort); color: var(--texte); }

/* Le bandeau « nouvelle version » : visible, mais il ne cache rien. */
.bandeau-version { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); font-size: 14px; }
@media (max-width: 700px) {
  .ligne-libre { grid-template-columns: minmax(0, 1fr); }
}
.liste-effets { margin: var(--e2) 0 var(--e3); padding-inline-start: var(--e4);
  font-size: 13.5px; color: var(--texte-2); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 4px; }

/* Bascule « tout afficher » du menu latéral. */
.navigation .bascule-menu { display: block; width: calc(100% - var(--e4));
  margin: var(--e3) var(--e2) var(--e4); padding: 8px 10px; background: transparent;
  border: 1px dashed var(--bord); border-radius: var(--rayon-s);
  color: var(--texte-3); font-size: 12.5px; text-align: start; }
.navigation .bascule-menu:hover { color: var(--texte); border-color: var(--bord-fort);
  border-style: solid; }

/* Cellules qui empilent deux niveaux d'information (regroupement des colonnes). */
.cellule-empilee { display: flex; flex-direction: column; gap: 3px;
  align-items: flex-start; }
.cellule-empilee.fin { align-items: flex-end; }
.cellule-empilee .note { font-size: 12px; }
.cellule-empilee strong.du { color: var(--alerte); }
.cellule-empilee strong.solde { color: var(--ok); }

/* ------------------------------------------------- barre d'avancement du dossier */
.avancement { margin: var(--e4) 0; }
.jalons { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--e2); }
.jalon { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--surface); text-align: start; position: relative;
  transition: border-color var(--transition), background var(--transition); }
.jalon .pastille { width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--surface-3); color: var(--texte-2); margin-bottom: 3px; }
.jalon .nom { font-weight: 650; font-size: 14px; color: var(--texte); }
.jalon .aide { font-size: 11.5px; color: var(--texte-3); line-height: 1.35; }
.jalon.fait { background: var(--ok-fond); border-color: var(--ok-bord); }
.jalon.fait .pastille { background: var(--ok); color: #fff; }
.jalon.ici { border-color: var(--primaire); border-width: 2px; padding: 10px 12px;
  box-shadow: var(--ombre-1); }
.jalon.ici .pastille { background: var(--primaire); color: var(--sur-primaire); }
.jalon.ici .nom { color: var(--primaire-texte); }
.jalon.a_venir { opacity: .72; }
.jalon:not([disabled]):hover { border-color: var(--primaire); background: var(--surface-2);
  opacity: 1; }
/* L'étape en cours est désactivée (on y est déjà) mais doit rester la plus
   lisible : la règle générale des boutons inactifs la ternirait. */
.jalon[disabled] { cursor: default; opacity: 1; }
.jalon.a_venir[disabled] { opacity: .72; }
.rappel-caisse { margin: var(--e3) 0 0; font-size: 13.5px; color: var(--alerte);
  background: var(--alerte-fond); border: 1px solid var(--alerte-bord);
  border-radius: var(--rayon-s); padding: 9px 12px; }
.rappel-caisse.solde { color: var(--ok); background: var(--ok-fond);
  border-color: var(--ok-bord); }

/* Sélecteur d'état d'un document, directement dans le tableau. */
select.etat-doc { width: auto; min-width: 130px; padding: 4px 26px 4px 9px;
  font-size: 12.5px; font-weight: 600; border-radius: 999px;
  border: 1px solid var(--bord); background-color: var(--surface); }
select.etat-doc:hover { border-color: var(--bord-fort); }
select.etat-doc.etat-ok { color: var(--ok); border-color: var(--ok-bord);
  background-color: var(--ok-fond); }
select.etat-doc.etat-attente { color: var(--avert); border-color: var(--avert-bord);
  background-color: var(--avert-fond); }
select.etat-doc.etat-alerte { color: var(--alerte); border-color: var(--alerte-bord);
  background-color: var(--alerte-fond); }

/* =============================================== fiche en deux colonnes */
/* Le contenu à gauche, ce qu'on consulte du coin de l'œil à droite. Sans cela,
   chaque bloc ajouté repoussait le travail réel un écran plus bas. */
.fiche-2col { display: grid; gap: var(--e4); align-items: start;
  grid-template-columns: minmax(0, 1fr) 330px; }
/* La piste implicite d'une grille se dimensionne sur le contenu : sans
   « minmax(0, 1fr) », un tableau large fait déborder la colonne sous le
   panneau de droite au lieu de défiler dans son cadre. */
.fiche-2col > .colonne { display: grid; gap: var(--e4); min-width: 0;
  grid-template-columns: minmax(0, 1fr); }
.fiche-2col > .colonne > * { min-width: 0; }
.fiche-2col > .flanc { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--e3); position: sticky;
  top: calc(var(--entete-h) + var(--e3)); }
/* Sur un écran étroit — iPad tenu en portrait — les deux colonnes s'empilent.
   Le travail (Prêt / Pas prêt, documents, fichiers) reste en premier : le
   panneau de côté passait avant et repoussait l'essentiel trois cartes plus
   bas ; l'argent et le déposant se lisent dans l'en-tête et en dessous. */
@media (max-width: 1080px) {
  .fiche-2col { grid-template-columns: 1fr; }
  .fiche-2col > .flanc { position: static; order: 1; }
}

/* ----------------------------------------------------------- panneaux */
.panneau { background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; position: relative; }
.panneau::before { content: ""; position: absolute; inset-inline-start: 0; top: 0;
  bottom: 0; width: 3px; background: var(--bord-fort); }
.panneau-titre { margin: 0; padding: 11px var(--e4) 9px; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--texte-3);
  font-weight: 700; display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--bord); background: var(--fond-doux); }
.panneau-icone { font-size: 14px; }
.panneau-corps { padding: var(--e3) var(--e4) var(--e4); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 9px; }
.panneau.alerte::before { background: var(--alerte); }
.panneau.alerte .panneau-titre { color: var(--alerte); background: var(--alerte-fond); }
.panneau.ok::before { background: var(--ok); }
.panneau.ok .panneau-titre { color: var(--ok); background: var(--ok-fond); }
.panneau.primaire::before { background: var(--primaire); }
.panneau.accent::before { background: var(--accent); }

/* Le chiffre qui compte, en grand, dans un panneau. */
.chiffre-cle { font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.chiffre-cle.du { color: var(--alerte); }
.chiffre-cle.solde { color: var(--ok); }
.chiffre-legende { font-size: 12px; color: var(--texte-3); margin-top: -4px; }

/* Lignes « libellé : valeur » dans un panneau. */
.ligne-info { display: flex; align-items: baseline; gap: var(--e2);
  font-size: 13.5px; }
.ligne-info .l { color: var(--texte-3); flex: none; }
.ligne-info .v { margin-inline-start: auto; text-align: end; font-variant-numeric:
  tabular-nums; }
.ligne-info.fort .v { font-weight: 700; }
.ligne-info .v.du { color: var(--alerte); }
.ligne-info .v.ok { color: var(--ok); }
.nom-deposant { margin: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 15px; }
.nom-deposant .note { font-size: 12.5px; }
.panneau .telephone-ligne { margin: 0; display: flex; align-items: center; gap: 6px; }
.panneau .ligne-boutons { margin-top: var(--e2); padding-top: var(--e2);
  border-top: 1px solid var(--bord); flex-wrap: wrap; gap: 4px; }

/* ------------------------------------------------- messages au déposant */
.liste-messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.message-prepare { border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--e3); background: var(--surface-2); }
.message-entete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2); font-size: 14px; }
.message-corps { margin: 0; padding: var(--e3); background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--rayon-s); font-size: 13px;
  font-family: inherit; white-space: pre-wrap; line-height: 1.5;
  max-height: 190px; overflow-y: auto; }
.message-prepare .ligne-boutons { margin-top: var(--e2); flex-wrap: wrap; gap: 5px; }
.message-prepare a.secondaire { text-decoration: none; }
.pastille-compte { display: inline-block; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700;
  margin-bottom: var(--e2); }
.case-etape { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--surface); }
.case-etape span { display: flex; flex-direction: column; gap: 2px; }
.case-etape:hover { border-color: var(--bord-fort); }
.erreur-envoi { color: var(--alerte); font-size: 12.5px; margin: 0 0 var(--e2); }

/* ---------------------------------------------- rapport quotidien */
.case { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--surface);
  cursor: pointer; margin-bottom: var(--e2); }
.case:hover { border-color: var(--bord-fort); }
.case input { width: auto; margin-top: 2px; flex: none; }
.case > span { display: flex; flex-direction: column; gap: 2px; }
.liste-adresses { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e3); }
.ligne-adresse { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: 8px 12px; border: 1px solid var(--bord);
  border-radius: var(--rayon-s); background: var(--surface-2); }
.ligne-adresse .adresse { font-weight: 600; word-break: break-all; }
.ligne-ajout { display: flex; align-items: flex-end; gap: var(--e2); flex-wrap: wrap; }
.ligne-ajout label, .ligne-ajout input[type="email"] { flex: 1; min-width: 190px; }
.ligne-ajout input[type="date"] { width: auto; }

/* ------------------------------------------- composeur de référence */
.composeur-reference { grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.composeur-reference .trois-cases { display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.composeur-reference .trois-cases label { font-size: 12.5px; color: var(--texte-3); }
.aide-composeur { margin: 0; font-size: 12px; }
.apercu-drive { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--surface-3); border: 1px dashed var(--bord);
  border-radius: var(--rayon-s); padding: 8px 11px; margin: 0; }
.recherche-large { font-size: 16px; padding: 12px 14px; }
/* Les quatre dates de la recherche : une ligne qui se replie sur elle-même. */
.filtres-dates { display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.verdict-reference { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px;
  font-size: 13px; min-height: 20px; flex-wrap: wrap; }
.verdict-reference.libre { color: var(--ok); }
.verdict-reference.prise { color: var(--alerte); }
button.bloque { opacity: .45; }

/* ------------------------------------------------------- calendrier */
.cal-barre { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e3); }
.cal-titre { font-size: 15px; text-transform: capitalize; }
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px; }
.cal-entete { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte-3); text-align: center; padding-bottom: 4px; font-weight: 700; }
.cal-vide { min-height: 62px; }
.cal-jour { min-height: 62px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: 5px 6px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; background: var(--surface); }
.cal-jour.ferme { background: var(--fond-doux); border-style: dashed; }
.cal-jour.passe { opacity: .6; }
.cal-jour.aujourdhui { border-color: var(--primaire); border-width: 2px; padding: 4px 5px; }
.cal-numero { font-size: 11.5px; color: var(--texte-3); align-self: flex-start; }
.cal-jour.aujourdhui .cal-numero { color: var(--primaire-texte); font-weight: 700; }
/* Deux ronds peuvent cohabiter dans une case : ils rétrécissent un peu pour
   tenir côte à côte, sans jamais se chevaucher. */
.cal-pastilles { display: flex; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap; }
.cal-compte { min-width: 26px; height: 26px; border-radius: 50%; border: none;
  font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--transition), filter var(--transition); }
.cal-compte.ok { background: var(--ok); }
.cal-compte.alerte { background: var(--avert); }
.cal-compte.retard { background: var(--alerte); }
.cal-compte:hover { filter: brightness(1.12); transform: scale(1.08); }
.cal-detail { font-size: 10px; color: var(--texte-3); text-align: center; line-height: 1.1; }
.cal-legende { margin-top: var(--e3); display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px; }
.puce { width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  vertical-align: -1px; }
.puce.ok { background: var(--ok); } .puce.alerte { background: var(--avert); }
.puce.retard { background: var(--alerte); }
.puce.ferme { background: var(--fond-doux); border: 1px dashed var(--bord-fort); }
@media (max-width: 620px) {
  .cal-jour, .cal-vide { min-height: 48px; }
  .cal-compte { min-width: 21px; height: 21px; font-size: 11.5px; }
  .cal-pastilles { gap: 2px; }
  .cal-detail { display: none; }
}
.jours-semaine { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.jour-case { display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--bord); border-radius: 999px; font-size: 13.5px;
  cursor: pointer; background: var(--surface); }
.jour-case:hover { border-color: var(--bord-fort); }
.cal-jour.parfois { background: color-mix(in srgb, var(--avert) 7%, var(--surface));
  border-style: dashed; }
.puce.parfois { background: color-mix(in srgb, var(--avert) 25%, var(--surface));
  border: 1px dashed var(--avert); }
.jour-case.colonne { flex-direction: column; align-items: stretch; gap: 4px;
  border-radius: var(--rayon-s); padding: 8px 10px; min-width: 108px; }
.jour-case .nom-jour { font-size: 11.5px; color: var(--texte-3); font-weight: 600; }
.jour-case.colonne select { width: 100%; }

/* ------------------------------------------- filtres repliables */
/* Une seule ligne : la recherche, le bouton, le dépliant. Le libellé passe
   dans le champ lui-même — trois lignes pour un filtre, c'est deux de trop. */
.filtres-tete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.filtres-tete > label { flex: 1 1 240px; min-width: 0; font-size: 0; }
.filtres-tete > label input { font-size: 14px; }
.filtres-avances { display: grid; gap: var(--e3); margin-top: var(--e3);
  padding-top: var(--e3); border-top: 1px solid var(--bord);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.filtres-avances.replie { display: none; }

/* ------------------------------------------------------- caisse du jour */
.barre-caisse { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e4); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--bord); }
/* La règle générale « input { width: 100% } » faisait passer le sélecteur de
   date sur toute la ligne et renvoyait les boutons dessous. */
.barre-caisse input[type=date] { width: auto; min-width: 165px; flex: 0 0 auto; }
.barre-caisse .principal { margin-inline-start: auto; }

/* ------------------------------------------------ menu de réglages vertical */
/* Une barre d'onglets qui défile à l'horizontale cache la moitié des entrées.
   Un rail vertical les montre toutes, groupées, sans mouvement latéral. */
.reglages-2col { display: grid; gap: var(--e4); align-items: start;
  grid-template-columns: 248px minmax(0, 1fr); }
.rail-reglages { position: sticky; top: calc(var(--entete-h) + var(--e3));
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e2); box-shadow: var(--ombre-1); }
.rail-groupe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); font-weight: 700; padding: var(--e3) var(--e3) 5px; }
.rail-groupe:first-child { padding-top: var(--e2); }
.rail-entree { display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: none; text-align: start; padding: 8px var(--e3);
  border-radius: var(--rayon-s); font-size: 13.5px; color: var(--texte);
  line-height: 1.3; }
.rail-entree:hover { background: var(--surface-3); }
.rail-entree.actif { background: color-mix(in srgb, var(--primaire) 12%, transparent);
  color: var(--primaire-texte); font-weight: 650; }
.rail-entree .ic { width: 18px; text-align: center; flex: none; }
/* La colonne doit être bornée explicitement. Une grille sans
   grid-template-columns crée une colonne « auto », dimensionnée sur le
   contenu : une carte contenant un large tableau y prenait 1056 px dans une
   zone de 844, et les 212 px de trop étaient rognés sans défilement possible.
   « min-width: 0 » sur le conteneur n'y change rien — c'est la COLONNE qu'il
   faut contraindre. */
.zone-reglages { min-width: 0; display: grid; gap: var(--e4);
  grid-template-columns: minmax(0, 1fr); }
.titre-reglage { margin: 0; font-size: 19px; display: flex; align-items: center;
  gap: 9px; }
.titre-reglage .ic { font-size: 20px; }
.zone-reglages > .note { margin: calc(var(--e4) * -1 + 2px) 0 0; }
@media (max-width: 900px) {
  .reglages-2col { grid-template-columns: 1fr; }
  /* Sur téléphone, dix-sept entrées à une par ligne repoussaient le contenu
     très bas : deux colonnes suffisent à tout voir sans faire défiler. */
  .rail-reglages { position: static; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); }
  .rail-entree { padding: 8px 9px; font-size: 13px; }
  .rail-groupe { grid-column: 1 / -1; }
}