/* ============================================================
   GED — VARIANTE B  ·  « Atelier clair »
   Charte Marchica Med : marine (cercle du logo) et or (mot-symbole).
   Ce qui distingue cette variante du thème principal n'est pas sa
   couleur mais sa structure — papier clair, typographie éditoriale,
   géométrie zellige en filigrane. Aucune dépendance externe.
   ============================================================ */

@font-face {
  font-family: 'InterFallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
}

:root {
  /* ---- Marine : couleur du cercle du logo Marchica Med ---- */
  --marine:      #062468;
  --marine-2:    #051e55;   /* survol / appui */
  --marine-3:    #2b457f;   /* dégradés, seconde teinte */
  --marine-pale: #f0f2f6;   /* aplats très clairs */
  --marine-100:  #e1e5ed;   /* bordures teintées */

  /* ---- Or : couleur du mot-symbole du logo ----
     Calculé en teinte/saturation/luminosité à partir du sable du logo :
     mélanger du noir en RGB désature un ton chaud vers le brun terne. */
  --or:      #966f3d;
  --or-2:    #7e5b30;
  --or-pale: #f6f0e9;

  /* ---- Neutres : gris légèrement biaisés vers le marine, jamais purs ---- */
  --fond:       #f6f7fa;
  --fond-2:     #eef0f5;
  --papier:     #ffffff;
  --trait:      #e3e6ec;
  --trait-fort: #91949c;   /* 3.03:1 — bordure de contrôle, exigence non textuelle */

  /* ---- Encre ---- */
  --encre:      #171b26;
  --encre-2:    #4c5567;
  --encre-3:    #6d758c;   /* 4.59:1 sur papier — le texte secondaire reste lisible */

  /* ---- Sémantique : un sens, et un seul, par couleur ---- */
  --ok:         #0d6f5c;   /* 4.6:1 sur son fond pâle */   --ok-pale:     #e6f5f1;   /* validé */
  --attente:    #8a6212;   --attente-pale:#fdf6e7;   /* en attente, à vérifier */
  --danger:     #c0392f;   --danger-pale: #fbeceb;   /* destructif, refusé */

  /* Hauteur unique de tous les contrôles : sans elle, champs et boutons
     voisins ne partagent ni ligne de base ni gabarit. */
  --h-champ: 40px;

  --r:   4px;
  --r-2: 10px;
  --ombre: 0 1px 2px rgba(23, 27, 38, .05), 0 8px 24px rgba(23, 27, 38, .07);

  /* Anneau de focus clavier — identique partout */
  --focus: 0 0 0 3px rgba(6, 36, 104, .28);
}

* { box-sizing: border-box; }

/* Coque à hauteur fixe : la page ne défile jamais. Seule la zone de contenu,
   dont la longueur est imprévisible, défile en interne. La barre supérieure et
   les onglets restent donc toujours à l'écran, sans recourir à `sticky`. */
html { height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', 'InterFallback', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* Filigrane zellige commun aux deux pages — dérive très lentement */
.zellige-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3Cpolygon id='s' points='22,0 15.56,-6.45 15.55,-15.55 6.45,-15.56 0,-22 -6.45,-15.56 -15.55,-15.55 -15.56,-6.45 -22,0 -15.56,6.45 -15.55,15.55 -6.45,15.56 0,22 6.45,15.56 15.55,15.55 15.56,6.45'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23171b26' stroke-width='1'%3E%3Cuse href='%23s' x='36' y='36'/%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='72' y='0'/%3E%3Cuse href='%23s' x='0' y='72'/%3E%3Cuse href='%23s' x='72' y='72'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .06;
  animation: derive 22s linear infinite;      /* dérive perceptible */
}
@keyframes derive { to { background-position: 72px 72px; } }

/* ---------- Rosette de zellige qui tourne en permanence ---------- */
.rosace {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23062468' stroke-width='1.4'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Cpolygon points='178,100 155.16,77.15 155.15,44.85 122.85,44.84 100,22 77.15,44.84 44.85,44.85 44.84,77.15 22,100 44.84,122.85 44.85,155.15 77.15,155.16 100,178 122.85,155.16 155.15,155.15 155.16,122.85'/%3E%3Cpolygon points='148.04,80.1 128.14,71.86 119.9,51.96 100,60.2 80.1,51.96 71.86,71.86 51.96,80.1 60.2,100 51.96,119.9 71.86,128.14 80.1,148.04 100,139.8 119.9,148.04 128.14,128.14 148.04,119.9 139.8,100'/%3E%3Cpolygon points='124.02,90.05 109.95,75.98 90.05,75.98 75.98,90.05 75.98,109.95 90.05,124.02 109.95,124.02 124.02,109.95'/%3E%3Ccircle cx='100' cy='100' r='13'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
/* Grande rosette dans le volet éditorial du login */
.login-edito .rosace {
  width: 560px; height: 560px; right: -190px; bottom: -170px;
  opacity: .11; animation: tourne 48s linear infinite;
}
/* Seconde rosette, plus petite, en contre-rotation */
.login-edito .rosace.deux {
  width: 300px; height: 300px; right: -60px; bottom: -40px;
  opacity: .16; animation: tourne 30s linear infinite reverse;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ============================================================
   MOUVEMENT — entrées en cascade + micro-interactions
   (le dessin ne change pas ; seul le temps entre en jeu)
   ============================================================ */

/* Entrée générique : monte en fondu, ample et lisible.
   `backwards` → si l'animation ne s'exécute pas, l'élément reste visible. */
[data-in] {
  animation: monte .95s cubic-bezier(.16, .84, .28, 1) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes monte { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- Mouvements permanents (visibles sans interaction) ---------- */

/* La pastille « À signer » bat doucement */
.metric.alert .v { animation: bat 2.4s ease-in-out 1.6s infinite; }
@keyframes bat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Halo qui pulse derrière la colonne en alerte */
.metric.alert { position: relative; }
.metric.alert::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, rgba(152, 112, 62, .12), transparent 70%);
  animation: respire 3.2s ease-in-out infinite;
}
@keyframes respire { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Les jauges reçoivent un reflet qui les balaie en boucle */
.metric .bar { position: relative; overflow: hidden; }
.metric .bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  animation: balaye 3.4s ease-in-out 1.8s infinite;
}
@keyframes balaye { 0% { left: -40%; } 55%, 100% { left: 115%; } }

/* Les pastilles d'état en attente clignotent discrètement */
.tag.wait .dot { animation: clignote 1.8s ease-in-out infinite; }
@keyframes clignote { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Le chevron des raccourcis invite au clic */
.links .go { animation: pousse 2.6s ease-in-out infinite; }
@keyframes pousse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Le filet de l'exergue se trace */
.eyebrow::before { animation: trace .7s cubic-bezier(.2,.75,.3,1) 250ms backwards; }
@keyframes trace { from { width: 0; opacity: 0; } to { width: 26px; opacity: 1; } }

/* Jauges : se remplissent depuis zéro. On anime l'échelle et non la largeur —
   celle-ci est posée en style inline, qu'une keyframe ne peut battre sans
   `!important`, proscrit ici. */
.metric .bar i {
  display: block; transform-origin: left center;
  animation: remplit 1.1s cubic-bezier(.25,.8,.3,1) var(--jd, 500ms) backwards;
}
@keyframes remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Lignes de registre : se décalent au survol */
.rows li { transition: padding-left .22s ease, background-color .22s ease; }
.rows li:hover { padding-left: 10px; background: rgba(6, 36, 104, .035); }

/* Raccourcis : la pastille se colore, le chevron avance */
.links .ic { transition: background-color .22s ease, color .22s ease, transform .22s ease; }
.links a:hover .ic { transform: translateY(-2px); }
.links .go { transition: transform .22s ease, color .22s ease; }
.links a:hover .go { transform: translateX(5px); color: var(--marine); }
.links .ln { transition: color .22s ease; }

/* Panneaux : légère élévation au survol */
.panel { transition: box-shadow .25s ease, border-color .25s ease; }
.panel:hover { box-shadow: var(--ombre); border-color: var(--trait-fort); }

/* Colonnes d'indicateurs : le chiffre se soulève */
.metric { transition: background-color .22s ease; }
.metric:hover { background: rgba(6, 36, 104, .03); }
.metric .v { transition: transform .22s ease; }
.metric:hover .v { transform: translateY(-2px); }

/* Onglets : le soulignement se déploie */
.tabs a::after { transition: transform .22s ease; }
.tabs a.on::after { transform-origin: left; animation: souligne .5s cubic-bezier(.2,.75,.3,1) 300ms backwards; }
@keyframes souligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Bouton : léger relèvement + reflet qui balaie */
.btn { position: relative; overflow: hidden; transition: background-color .18s, transform .16s, box-shadow .18s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(6, 36, 104, .7); }
.btn:active { transform: translateY(0); }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn:hover::after { left: 130%; }

/* Champ en erreur : brève secousse */
.control.bad { border-color: var(--or); animation: secousse .36s; }
@keyframes secousse {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }   75% { transform: translateX(-3px); }
}

/* Étapes du login : chacune entre à son tour */
.steps li { animation: monte .55s cubic-bezier(.2,.75,.3,1) backwards; }
.steps li:nth-child(1) { animation-delay: 620ms; }
.steps li:nth-child(2) { animation-delay: 720ms; }
.steps li:nth-child(3) { animation-delay: 820ms; }

/* Énumérer les sélecteurs animés laisserait passer toute animation ajoutée
   plus tard : on coupe tout, puis on rétablit ce qui doit rester visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn::after, .metric .bar::after { display: none; }
}

/* ---------- Marque ---------- */
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* Logo client : image posée telle quelle, jamais recolorée ni redessinée.
   `width: auto` préserve son ratio quelle que soit la hauteur demandée. */
.mark-img { display: block; width: auto; }
/* Filet de séparation : le logo porte déjà le nom de la marque, la mention
   « GED » qui suit dit seulement de quelle application il s'agit. */
.mark-txt {
  display: flex; align-items: center; line-height: 1;
  padding-left: 12px; border-left: 1px solid var(--trait);
}
.mark-1 { font-weight: 800; font-size: 15px; letter-spacing: .16em; color: var(--encre); }

/* ============================================================
   CONNEXION
   ============================================================ */
.login {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
}

/* --- Colonne éditoriale (gauche) --- */
.login-edito {
  position: relative; overflow: hidden;      /* contient les rosettes */
  padding: 54px 60px;
  display: flex; flex-direction: column;
  background: var(--papier);
  border-right: 1px solid var(--trait);
}
/* Le contenu passe au-dessus du décor tournant */
.login-edito > .mark,
.login-edito > .edito-body,
.login-edito > .edito-foot { position: relative; z-index: 1; }

.edito-body { margin: auto 0; max-width: 460px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marine);
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--marine); }

.edito-h1 {
  margin: 20px 0 0;
  font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em;
  color: var(--encre);
}
.edito-h1 em { font-style: normal; color: var(--marine); }

.edito-p {
  margin: 18px 0 0; max-width: 400px;
  font-size: 15px; color: var(--encre-2);
}

/* Trois repères numérotés — la structure éditoriale */
.steps { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--trait);
}
.steps .n {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--marine);
  font-variant-numeric: tabular-nums;
}
.steps .t { font-size: 14px; color: var(--encre); }
.steps .t small { display: block; color: var(--encre-3); font-size: 12.5px; margin-top: 2px; }

.edito-foot { font-size: 12px; color: var(--encre-3); }

/* --- Colonne formulaire (droite) --- */
.login-form {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
}
.form-inner { width: 100%; max-width: 372px; }

.form-inner h2 {
  margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em;
}
.form-inner .sub { margin: 6px 0 28px; color: var(--encre-2); font-size: 14px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-2);
}
.control {
  display: flex; align-items: center; gap: 10px;
  height: var(--h-champ); padding: 0 13px;
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  transition: border-color .18s, box-shadow .18s;
}
.control:focus-within { border-color: var(--marine); box-shadow: 0 0 0 3px var(--marine-pale); }
.control svg { flex: 0 0 17px; color: var(--encre-3); }
.control input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 14.5px; color: var(--encre);
}
.control input::placeholder { color: var(--encre-3); }
.reveal {
  border: 0; background: none; cursor: pointer; padding: 3px;
  color: var(--encre-3); display: inline-flex; border-radius: 4px;
}
.reveal:hover { color: var(--marine); }
.msg { margin: 7px 2px 0; font-size: 12.5px; color: var(--or); min-height: 1px; }

.row-end { display: flex; justify-content: flex-end; margin: 4px 0 20px; }
.link { font-size: 13px; font-weight: 600; color: var(--marine); text-decoration: none; }
.link:hover { text-decoration: underline; }

.btn {
  width: 100%; height: 48px; border: 0; border-radius: var(--r); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--papier);
  background: var(--marine);
  transition: background-color .18s, transform .12s;
}
.btn:hover { background: var(--marine-2); }
.btn:active { transform: translateY(1px); }
/* Un seul anneau de focus, sur tout ce qui reçoit le clavier. Une interface
   qui ne montre pas où l'on est est inutilisable sans souris. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--marine); outline-offset: 3px; border-radius: var(--r);
}

.note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px 0 0; font-size: 12px; color: var(--encre-3);
}

/* ============================================================
   ACCUEIL
   ============================================================ */
.shell { position: relative; z-index: 1; min-height: 100vh; }

/* Colonne : barre + onglets à taille fixe, contenu extensible.
   `min-height: 0` est indispensable — sans lui, un enfant flex refuse de
   descendre sous la hauteur de son contenu et la coque déborderait. */
.shell {
  position: relative; z-index: 1;
  height: 100vh; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}

.topbar {
  flex: 0 0 auto;
  height: 66px; display: flex; align-items: center; gap: 16px;
  padding: 0 28px; background: var(--papier);
  border-bottom: 1px solid var(--trait);
}
.topbar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 10px; }
.who .av {
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--marine); color: var(--papier);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; letter-spacing: .04em;
}
.who .nm { font-size: 13.5px; font-weight: 700; }
.who .rl { font-size: 11.5px; color: var(--encre-3); }

/* Navigation en onglets soulignés */
.tabs {
  flex: 0 0 auto;
  display: flex; align-items: stretch; justify-content: center; gap: 2px;
  padding: 0 16px;
  background: var(--papier); border-bottom: 1px solid var(--trait);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative;
  display: flex; align-items: center; gap: 7px; padding: 13px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--encre-2);
  text-decoration: none; white-space: nowrap;
}
.tabs a svg { flex: 0 0 16px; color: currentColor; }
.tabs a:hover { color: var(--marine); }
.tabs a.on { color: var(--marine); }
.tabs a.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--marine);
}

/* Zone de contenu. Colonne flex : l'en-tête et les indicateurs gardent leur
   taille, la carte qui porte le tableau prend tout le reste — sans quoi elle
   s'arrête à la hauteur de ses lignes et laisse un vide sous elle. */
.page {
  flex: 1; min-height: 0; overflow-y: auto;
  width: 100%; max-width: 1600px; margin: 0 auto;
  padding: 16px 24px 16px;
  display: flex; flex-direction: column;
}
.page > .head, .page > .rule, .page > .metrics { flex: 0 0 auto; }

/* La carte qui contient un registre s'étire ; son tableau défile à l'intérieur
   et son pied reste collé en bas de la carte. */
.panel:has(> .registre-wrap) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel:has(> .registre-wrap) > .registre-wrap { flex: 1; min-height: 0; overflow: auto; }
.panel:has(> .registre-wrap) > .pied { flex: 0 0 auto; }
/* Les grilles de panneaux gardent leur hauteur naturelle.

   Elles portaient `flex: 1`, ecrit du temps ou l'accueil n'en avait qu'UNE :
   la regle etait juste, une seule grille occupant le reste de la page. Depuis
   qu'il y en a deux, elles se partageaient la hauteur restante — 190px chacune
   — alors que leurs panneaux en mesurent 242, 295 et 187. Les panneaux
   debordaient de leur boite et « Activite recente » passait PAR-DESSUS
   « A valider » et « Raccourcis », en depassant le bas de l'ecran.

   `.page` defile deja (`overflow-y: auto`) : si le contenu ne tient pas, il
   defile, ce qui vaut mieux qu'un empilement illisible. */
.page > .grid { flex: 0 0 auto; min-height: 0; }

/* En-tête de page : filet + titre gravé */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.head h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.head .date { margin: 5px 0 0; font-size: 13px; color: var(--encre-3); }
.head .cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--h-champ); padding: 0 18px; border-radius: var(--r);
  background: var(--encre); color: var(--papier);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.head .cta:hover { background: var(--marine-2); }

.rule { height: 1px; background: var(--trait); margin: 10px 0 12px; }

/* --- Indicateurs : bandeau segmenté, pas des cartes --- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-2);
  overflow: hidden;
}
/* Bandeau d'indicateurs en ligne plutôt qu'en colonne : le chiffre à gauche,
   son libellé et sa précision à droite. Même information, moitié moins haute —
   la hauteur gagnée revient à la carte de travail, qui est l'objet de l'écran. */
.metric {
  padding: 10px 16px; border-right: 1px solid var(--trait);
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px;
  grid-template-areas: "v k" "v d" "bar bar"; align-items: center;
}
.metric:last-child { border-right: 0; }
.metric .k {
  grid-area: k; align-self: flex-end;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-3);
}
.metric .v {
  grid-area: v; margin: 0; font-size: 27px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.metric .d { grid-area: d; align-self: flex-start; margin: 0; font-size: 12px; color: var(--encre-3); }
.metric .bar { grid-area: bar; margin-top: 8px; height: 3px; background: var(--fond-2); border-radius: 2px; overflow: hidden; }
.metric .bar i { display: block; height: 100%; background: var(--marine); }
.metric.alert .v { color: var(--or); }
.metric.alert .bar i { background: var(--or); }

/* --- Grille de contenu --- */
/* `stretch` et non `start` : cote a cote, « A valider » faisait 242px et
   « Raccourcis » 295px, laissant 53px de blanc sous le premier. Deux cartes
   d'une meme rangee doivent se terminer ensemble — sinon la rangee se lit
   comme un escalier, et le vide passe pour un oubli.

   Le rythme vertical est resserre (26 -> 16) : l'accueil tenait sur une page,
   la marge y coutait plus qu'elle n'aerait. */
.grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-top: 16px; align-items: stretch; }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }

.panel { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-2); }

/* Une carte etiree doit l'etre jusqu'en bas : son corps prend la place, sinon
   les 55px gagnes par `stretch` restaient sous le contenu, a l'interieur de la
   bordure — un blanc encadre, qui se voit plus qu'un blanc de page. */
.grid > .panel { display: flex; flex-direction: column; }
.grid > .panel > .panel-b { flex: 1; }
.panel-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--trait);
}
.panel-h h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.panel-h a { font-size: 12.5px; font-weight: 700; color: var(--marine); text-decoration: none; }
.panel-b { padding: 6px 20px 16px; }

/* Liste de documents — traitée comme un registre */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--trait);
}
.rows li:last-child { border-bottom: 0; }
.rows .ref {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.rows .ttl { font-size: 14px; font-weight: 700; }
.rows .meta { font-size: 12.5px; color: var(--encre-3); margin-top: 2px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--marine-pale); color: var(--marine-2);
}
.tag.wait { background: var(--or-pale); color: var(--or); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Raccourcis : liste dense, pas de grosses tuiles */
.links { list-style: none; margin: 0; padding: 0; }
.links li { border-bottom: 1px solid var(--trait); }
.links li:last-child { border-bottom: 0; }
.links a {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  text-decoration: none; color: var(--encre);
}
.links a:hover .ln { color: var(--marine); }
.links .ic {
  width: 34px; height: 34px; border-radius: var(--r); flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond-2); color: var(--encre-2);
}
.links a:hover .ic { background: var(--marine-pale); color: var(--marine); }
.links .ln { font-size: 14px; font-weight: 700; }
.links .lh { font-size: 12.5px; color: var(--encre-3); }
.links .go { margin-left: auto; color: var(--encre-3); }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-edito { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--trait); }
}

/* ============================================================
   ÉCRANS DE GESTION — le registre plutôt que la grille de cartes
   ============================================================ */

.fil { margin: 5px 0 0; font-size: 12.5px; color: var(--encre-3); }
.fil a { color: var(--encre-3); text-decoration: none; }
.fil a:hover { color: var(--marine); }

/* --- Barre d'outils au-dessus du registre --- */
.outils {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px dashed var(--trait);
}
.outils .droite { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.cherche {
  display: flex; align-items: center; gap: 9px;
  height: var(--h-champ); padding: 0 12px; min-width: 260px;
  background: var(--fond); border: 1px solid var(--trait-fort); border-radius: var(--r);
  transition: border-color .18s, box-shadow .18s;
}
.cherche:focus-within { border-color: var(--marine); box-shadow: 0 0 0 3px var(--marine-pale); }
.cherche svg { flex: 0 0 16px; color: var(--encre-3); }
.cherche input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--encre);
}

/* Bouton secondaire, sur fond papier */
.bouton {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--h-champ); padding: 0 14px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--trait-fort); background: var(--papier);
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--encre-2);
  text-decoration: none; transition: border-color .18s, color .18s, background-color .18s;
}
.bouton:hover { border-color: var(--marine); color: var(--marine); background: var(--marine-pale); }
.bouton.danger { color: var(--danger); }
.bouton.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-pale); }
.bouton svg { flex: 0 0 15px; }

/* Barre d'action de masse — n'apparaît qu'avec une sélection */
.bulk {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; background: var(--marine-pale);
  border-bottom: 1px solid var(--trait);
  font-size: 13.5px; font-weight: 700; color: var(--marine-2);
}
.bulk .droite { margin-left: auto; display: flex; gap: 9px; }

/* --- Le registre --- */
.registre-wrap { overflow-x: auto; }
/* L'en-tête du tableau reste visible pendant que les lignes défilent. */
.registre thead th { position: sticky; top: 0; z-index: 1; background: var(--marine-pale); }
.registre { width: 100%; border-collapse: collapse; }
.registre th {
  text-align: left; padding: 11px 20px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); border-bottom: 1px solid var(--trait-fort); white-space: nowrap;
}
/* Densité : ces écrans sont des files de travail, on y enchaîne les lignes.
   Voir plus de lignes d'un coup prime sur l'aération d'une ligne isolée. */
.registre td {
  padding: 8px 20px; font-size: 13.5px; color: var(--encre);
  border-bottom: 1px solid var(--trait); vertical-align: middle;
}
.registre tbody tr:last-child td { border-bottom: 0; }
.registre tbody tr { transition: background-color .18s; }
.registre tbody tr:hover { background: rgba(6, 36, 104, .035); }

.registre .num {
  font-variant-numeric: tabular-nums; color: var(--encre-3);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.registre .nom { font-weight: 700; }
/* Ligne secondaire : information d'appoint, elle ne doit jamais imposer une
   seconde ligne à toute la rangée. Tronquée, avec le texte complet en infobulle. */
.registre .sous {
  display: block; font-size: 12.5px; color: var(--encre-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.registre .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.registre .fin { text-align: right; white-space: nowrap; width: 108px; }
.registre .c-sel { width: 42px; }
/* `width` n'est qu'une indication en tableau à disposition automatique : une
   colonne d'actions comprimée sous la taille de ses boutons les ferait passer
   à la ligne, ce qui doublerait la hauteur de TOUTES les lignes. `nowrap` rend
   son contenu insécable et lui garantit sa place. */
.registre .c-act { width: 108px; white-space: nowrap; }

/* Case à cocher sobre, à la couleur de l'accent */
.registre input[type=checkbox] { accent-color: var(--marine); width: 15px; height: 15px; cursor: pointer; }

/* Action de ligne : icône seule, donc infobulle + aria-label obligatoires.
   Une couleur = un sens : marine pour modifier, or pour une action neutre,
   rouge pour ce qui détruit ou refuse. */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: none; cursor: pointer; border-radius: var(--r);
  color: var(--marine); vertical-align: middle;
  transition: color .18s, background-color .18s;
}
.act + .act { margin-left: 2px; }
.act.accent { color: var(--or); }
.act:hover { background: var(--marine-pale); }
.act.accent:hover { background: var(--or-pale); }
.act.danger { color: var(--danger); }
.act.danger:hover { color: var(--danger); background: var(--danger-pale); }

/* État : pilule teintée avec sa pastille, reprise du thème 1. Le fond porte le
   sens autant que la couleur du texte, ce qui reste lisible même pour un œil
   qui distingue mal le rouge du vert. */
.etat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 50rem;
  font-size: 12px; font-weight: 600;
  background: var(--fond-2); color: var(--encre-2);
}
.etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: currentColor; }
.etat.ok      { background: var(--ok-pale);      color: var(--ok); }
.etat.attente { background: var(--attente-pale); color: var(--attente); }
.etat.arret   { background: var(--fond-2);       color: var(--encre-2); }
.etat.ko      { background: var(--danger-pale);  color: var(--danger); }

/* Jeton de valeur (options d'un index, membres d'un groupe) */
/* Une étiquette ne se coupe jamais en deux lignes : scindée, elle se lit comme
   deux étiquettes et gonfle la rangée. */
.jeton {
  display: inline-block; white-space: nowrap; padding: 2px 9px; margin: 2px 3px 2px 0;
  border: 1px solid var(--trait-fort); border-radius: var(--r);
  font-size: 12px; color: var(--encre-2); background: var(--fond);
}
.jeton.vert { border-color: var(--marine-100); background: var(--marine-pale); color: var(--marine-2); }

/* --- Pied de registre --- */
.pied {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid var(--trait);
  font-size: 12.5px; color: var(--encre-3);
}
.pied .pages { margin-left: auto; display: flex; gap: 5px; }
.pied .pages button {
  min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer;
  border: 1px solid var(--trait); background: var(--papier); border-radius: var(--r);
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--encre-2);
}
.pied .pages button:hover { border-color: var(--marine); color: var(--marine); }
.pied .pages button[aria-current] { background: var(--marine); border-color: var(--marine); color: var(--papier); }

/* --- Aucun résultat --- */
.vide { padding: 46px 20px; text-align: center; }
.vide .t { font-size: 15px; font-weight: 800; }
.vide .s { margin-top: 6px; font-size: 13px; color: var(--encre-3); }

/* --- Panneau latéral de saisie (formulaire de la variante) --- */
.volet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 20px; }
.volet .plein { grid-column: 1 / -1; }
.volet label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-2);
}
.volet .saisie, .volet select {
  width: 100%; height: var(--h-champ); padding: 0 12px;
  background: var(--papier); border: 1px solid var(--trait-fort); border-radius: var(--r);
  font: inherit; font-size: 14px; color: var(--encre); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.volet .saisie:focus, .volet select:focus { border-color: var(--marine); box-shadow: 0 0 0 3px var(--marine-pale); }
.volet .aide { margin: 6px 2px 0; font-size: 12px; color: var(--encre-3); }

/* ---------- Indexation automatique : le panneau de proposition ---------- */
.proposition { border-left: 3px solid var(--marine); }
.proposition .panel-h h2 { display: flex; align-items: baseline; gap: 8px; }
.proposition .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; }

/* Provenance du contenu : neutre pour une couche texte, terre pour un OCR */
.lecture {
  margin: 0; padding: 9px 12px;
  background: var(--marine-pale); border: 1px solid var(--marine-100); border-radius: var(--r);
  font-size: 12.5px; color: var(--encre-2);
}
.lecture.ocr { background: var(--or-pale); border-color: var(--or-pale); }

.charte { margin: 12px 0 0; font-size: 12.5px; color: var(--encre-3); }
.charte code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 1px 6px; background: var(--fond-2); border-radius: 3px; color: var(--encre);
}

/* Le tableau de propositions garde ses filets, sans le fond au survol */
.propositions tbody tr:hover { background: none; }
.propositions td { vertical-align: top; padding-top: 12px; }
.propositions .saisie {
  width: 100%; height: var(--h-champ); padding: 0 11px;
  background: var(--papier); border: 1px solid var(--trait-fort); border-radius: var(--r);
  font: inherit; font-size: 13.5px; color: var(--encre); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.propositions .saisie:focus { border-color: var(--marine); box-shadow: 0 0 0 3px var(--marine-pale); }

.provenance {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-3);
}
.provenance.contenu { color: var(--marine); }

/* Référence recomposée en direct */
.reference {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px;
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--r);
}
.reference .rk {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-3);
}
.reference .rv {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13.5px; font-weight: 700; color: var(--marine-2); overflow-wrap: anywhere;
}

/* Garde-fou et actions */
.garde {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait);
}
.garde p { margin: 0; font-size: 12.5px; color: var(--encre-3); }
.garde .droite { margin-left: auto; display: flex; gap: 10px; }

@media (max-width: 760px) {
  .volet { grid-template-columns: 1fr; }
  .cherche { min-width: 0; width: 100%; }
  .outils .droite { margin-left: 0; width: 100%; }
  .garde .droite { margin-left: 0; width: 100%; }
}


/* ============================================================
   RECHERCHE PAR INDEX
   ============================================================ */
.panel-sous { font-size: 12.5px; color: var(--encre-3); }

/* Un seul type d'élément dans la grille : un libellé + un contrôle, tous de
   même gabarit. Aucune imbrication, donc aucun décalage de ligne de base. */
.criteres {
  display: grid; gap: 14px 16px; padding: 18px 20px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: start;
}
.critere { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.critere-l {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-3);
}
.champ {
  width: 100%; height: var(--h-champ); padding: 0 11px;
  font: inherit; font-size: 13.5px; color: var(--encre);
  background: var(--papier); border: 1px solid var(--trait-fort); border-radius: var(--r);
  transition: border-color .18s, box-shadow .18s;
}
.champ:focus { outline: none; border-color: var(--marine); box-shadow: var(--focus); }

.criteres-pied {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 0 20px 18px; border-top: 1px solid var(--trait); padding-top: 16px;
}
.critere-grp { width: 230px; }
.criteres-pied .droite { margin-left: auto; display: flex; gap: 9px; align-items: center; }

.btn-primaire {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--h-champ); padding: 0 16px; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--marine); color: var(--papier);
  font: inherit; font-size: 13.5px; font-weight: 700;
  transition: background-color .18s;
}
.btn-primaire:hover { background: var(--marine-2); }

/* Absence de valeur : dite en toutes lettres, jamais laissée vide */
.muet { color: var(--encre-3); font-size: 13px; }


/* ============================================================
   DÉPÔT — l'indexation automatique est un choix, pas une obligation
   ============================================================ */
.auto-bloc {
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--marine-pale); border: 1px solid var(--marine-100);
  border-radius: var(--r);
}
.bascule { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
/* La case native reste dans le flux — c'est elle qui porte l'état et le focus,
   la piste dessinée n'est qu'un habillage. */
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.piste {
  width: 38px; height: 21px; border-radius: 999px; flex: 0 0 38px;
  background: var(--trait-fort); position: relative;
  transition: background-color .18s;
}
.piste::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--papier);
  transition: transform .18s;
}
.bascule input:checked + .piste { background: var(--marine); }
.bascule input:checked + .piste::after { transform: translateX(17px); }
.bascule input:focus-visible + .piste { box-shadow: var(--focus); }
.bascule-txt { font-weight: 700; font-size: 13.5px; }
.auto-aide { margin: 7px 0 0; font-size: 12.5px; color: var(--encre-2); line-height: 1.5; }

/* Étapes d'un plan : la colonne doit pouvoir tenir ses étiquettes sur une ligne,
   sinon chaque rangée du tableau double de hauteur. */
.registre .c-etapes { min-width: 360px; }


/* ============================================================
   AJOUTS DE LA REMISE À NIVEAU LOGIQUE
   Rien ici ne change la direction visuelle : ce sont les quelques pièces
   qu'exigeaient des corrections de contenu (onglets internes, marque
   d'obligation, échantillon de couleur). Toutes reprennent les jetons
   existants — aucune couleur, aucune fonte, aucune animation nouvelle.
   ============================================================ */

/* Pastille de rubrique : le produit porte le nombre de signatures en attente
   sur l'onglet « Mes workflow » (shell.html l. 65). */
.tabs a .compte,
.bouton .compte {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50rem;
  background: var(--or); color: var(--papier);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Onglets internes à une carte : « À traiter » / « Historique », « Tableau » /
   « Arbre ». Ils reprennent le bouton secondaire ; seul l'état actif est neuf. */
.onglets { display: flex; gap: 8px; }
.bouton.on {
  border-color: var(--marine); background: var(--marine); color: var(--papier);
}
.bouton.on:hover { border-color: var(--marine-2); background: var(--marine-2); color: var(--papier); }
.bouton.on .compte { background: var(--papier); color: var(--marine); }

/* Marque d'obligation d'un index. Le produit la pose sur le libellé des index
   obligatoires (document-upload.html l. 114) et désactive « Téléverser » tant
   qu'il en reste un vide. */
.p-requis { color: var(--danger); font-weight: 800; margin-left: 3px; }

/* Échantillon de couleur d'une étiquette : la couleur est le seul attribut
   distinctif qu'une étiquette porte réellement (etiquette.model.ts l. 2-7). */
.puce {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid rgba(23, 27, 38, .18); vertical-align: -2px; margin-right: 8px;
}

/* Case « Se souvenir de moi » : elle existe dans le produit (login.html
   l. 80-89) et partage la ligne avec « Mot de passe oublié ? ». */
.souvenir {
  margin-right: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--encre-2); cursor: pointer;
}
.souvenir input { accent-color: var(--marine); width: 15px; height: 15px; cursor: pointer; }

/* En-tête de page portant plusieurs actions (« Personnaliser » + le dépôt) */
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Actions de ligne révélées au survol (souris), toujours visibles au clavier et
   sur écran tactile — reprise du thème 1. Une action secondaire ne doit pas
   rivaliser d'attention avec la donnée qu'elle accompagne. */
@media (hover: hover) {
  .registre tbody .c-act .act,
  .registre tbody .fin .act { opacity: .32; transition: opacity .15s ease, background-color .18s; }
  .registre tbody tr:hover .c-act .act,
  .registre tbody tr:hover .fin .act,
  .registre tbody .c-act:focus-within .act,
  .registre tbody .fin:focus-within .act { opacity: 1; }
}

/* ============================================================
   DIALOGUE ET AVIS
   ------------------------------------------------------------
   La maquette montrait des actions — signer, rejeter — qui ne
   demandaient rien et ne repondaient rien. Or dans le produit,
   signer OUVRE une confirmation qui nomme le document, et rejeter
   EXIGE un motif. Sans ces deux moments, la maquette laisse croire
   qu'un visa se donne d'un clic distrait.

   Ecrits dans le vocabulaire de la variante : papier, filet marine,
   ombre douce, meme courbe d'entree que le reste des ecrans.
   ============================================================ */

/* Le voile pose la modale sur un fond assombri, sans flou ni teinte de
   marque : c'est un retrait de l'ecran, pas un effet. */
.voile {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(17, 21, 31, .46);
  animation: apparait .16s ease backwards;
}
@keyframes apparait { from { opacity: 0; } }

/* Trois zones empilees — tete, corps, pied. Le corps seul defile : sur un
   formulaire de six champs, un ecran de portable poussait sinon les boutons
   hors de vue, et l'operateur ne trouvait plus « Creer ». */
.modale {
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; max-height: calc(100vh - 48px);
  background: var(--papier);
  border: 1px solid var(--trait); border-radius: var(--r-2);
  /* Une ombre portee, pas deux : un contact rapproche et une diffusion large,
     toutes deux dans l'encre du theme. */
  box-shadow: 0 1px 2px rgba(23, 27, 38, .06), 0 20px 48px -16px rgba(23, 27, 38, .34);
  overflow: hidden;
  animation: modale-entre .2s cubic-bezier(.2, .8, .3, 1) backwards;
}
/* Elle monte de huit pixels et se pose. L'ancienne entree partait de plus loin
   et durait deux fois plus : sur une confirmation, l'attente se remarque. */
@keyframes modale-entre { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* --- Tete : ce qu'on demande ---
   Le filet marine de 3px qui coiffait la boite a disparu. Il datait la fenetre
   sans rien apprendre : le titre dit deja l'acte, et le bouton de confirmation
   porte seul la couleur du risque. */
.modale-tete {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 10px 20px;
}
.modale h3 {
  margin: 0; padding-top: 3px;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--encre);
}
/* Sortie visible. Escape et « Annuler » font la meme chose, mais la croix se
   voit sans etre apprise. */
.modale-fermer {
  flex: 0 0 30px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--encre-3);
  transition: background-color .16s ease, color .16s ease;
}
.modale-fermer:hover { background: var(--fond-2); color: var(--encre); }
/* La regle globale `button:focus-visible` (l. 353) rabat le rayon a 4px : un
   bouton rond redevenait carre au clavier. */
.modale-fermer:focus-visible { border-radius: 50%; outline-offset: 2px; }

/* --- Corps : ce qu'on remplit --- */
.modale-corps { padding: 0 20px 18px; overflow-y: auto; }
/* Une confirmation sans message ni champ ne laisse pas un blanc entre la tete
   et le pied. */
.modale-corps:empty { padding: 0; }
/* Le message garde ses retours a la ligne : les dialogues de suppression
   enumerent les consequences ligne par ligne, elles se lisaient en un pave. */
.modale-message {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--encre-2);
  white-space: pre-line;
}
.modale-message + .modale-champ { margin-top: 16px; }

/* Nom propre a la modale : `.champ` est DEJA la classe d'un champ de
   formulaire de la maquette — une boite bordee de 40px de haut, faite pour
   le controle lui-meme. L'employer comme ENVELOPPE dessinait une seconde
   boite autour d'un input natif qui ne la remplissait pas. Le controle porte
   desormais son propre style, sans enveloppe. */
.modale-champ { margin-top: 12px; }
/* Le libelle est retrait a l'aplomb du TEXTE du controle — 15px de garniture
   plus le filet de 1px. Cale a zero, il flottait a gauche de la pastille. */
.modale-champ label {
  display: block; margin: 0 0 5px; padding-left: 16px;
  font-size: 12px; font-weight: 700; color: var(--encre-2);
}
/* L'etoile se pose contre le libelle, pas au milieu de la ligne. */
.modale-champ .requis { margin-left: 1px; }

/* --- Le controle, et lui seul --- */
/* AUCUNE transition sur le bord ni sur le fond de ce controle — c'est
   deliberé. Ces deux proprietes ne decorent pas : elles PORTENT l'etat du
   champ (repos, survol, faute). Tant qu'une transition les interpole, la
   valeur calculee rendue par le navigateur reste celle du DEPART pendant
   toute la duree de l'interpolation ; un champ qu'on vient de declarer en
   faute se lit donc encore gris, et tout controle automatique le voit gris.
   Une erreur doit s'afficher d'un coup, pas se fondre en 160ms. */
.modale-controle {
  display: block; width: 100%; margin: 0;
  font: inherit; font-size: 13.5px; color: var(--encre);
  background-color: var(--papier);
  border: 1px solid var(--trait-fort);
}
.modale-controle::placeholder { color: var(--encre-3); opacity: 1; }
.modale-controle:hover { border-color: var(--encre-3); }

/* Meme gabarit que les champs des tableaux : `--h-champ`, et la pastille
   demandee par le client. */
input.modale-controle,
select.modale-controle {
  height: var(--h-champ); padding: 0 15px; border-radius: var(--r-pilule);
}
/* Multiligne : rayon doux. Une pastille sur 84px de haut dessine un stade. */
textarea.modale-controle {
  min-height: 84px; padding: 10px 14px; line-height: 1.5;
  border-radius: var(--r-2); resize: vertical;
}

/* Le menu deroulant natif est laid et n'occupe jamais la largeur qu'on lui
   donne : on le prive de son habillage et on redessine le chevron en fond.
   Le controle reste un <select> — clavier, recherche par frappe et liste du
   systeme sont intacts. */
select.modale-controle {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234c5567' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px 15px;
}
select.modale-controle::-ms-expand { display: none; }

/* Focus : l'anneau commun de l'application. Ecrit avec le nom de l'element
   ET la classe — la regle globale `input:focus-visible` (l. 353) impose un
   `border-radius` de 4px, qui carrait la pastille des qu'on y entrait. */
input.modale-controle:focus-visible,
select.modale-controle:focus-visible {
  outline: 2px solid var(--marine); outline-offset: 2px;
  border-color: var(--marine); border-radius: var(--r-pilule);
}
textarea.modale-controle:focus-visible {
  outline: 2px solid var(--marine); outline-offset: 2px;
  border-color: var(--marine); border-radius: var(--r-2);
}

/* Champ en faute : le controle rougit avec son message. */
.modale-champ.invalide .modale-controle {
  border-color: var(--danger); background-color: var(--danger-pale);
}
.modale .err {
  margin: 6px 0 0; padding-left: 16px;
  font-size: 12px; font-weight: 600; color: var(--danger);
}

/* --- Pied : ce qu'on decide ---
   Un filet le separe du corps : quand le formulaire defile, la ligne dit ou
   s'arrete la saisie et ou commence la decision. */
.modale-pied {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--trait);
}

/* Avis : il confirme ce qui vient d'etre fait, puis s'efface. Il ne demande
   rien et ne bloque rien — a la difference du dialogue. */
.avis-pile {
  position: fixed; z-index: 70; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.avis {
  display: flex; align-items: center; gap: 9px;
  max-width: 380px; padding: 11px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--papier);
  background: var(--encre); border-radius: var(--r-2);
  box-shadow: 0 10px 30px -8px rgba(23, 27, 38, .45);
  animation: entre-avis .32s cubic-bezier(.16, .84, .28, 1) backwards;
}
.avis.ok    { background: var(--ok); }
.avis.ko    { background: var(--danger); }
.avis.part  { animation: entre-avis .32s cubic-bezier(.16,.84,.28,1) backwards, sort-avis .3s ease forwards; }
@keyframes entre-avis { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes sort-avis  { to   { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .voile, .modale, .avis, .avis.part { animation: none; }
}

/* Bouton principal d'un dialogue destructif : le rejet se distingue de la
   signature avant meme qu'on lise le libelle. */
.btn-primaire.danger { background: var(--danger); }
.btn-primaire.danger:hover { background: #a5312a; }

/* `hidden` doit gagner sur tout affichage de classe.
   Les deux pieds de pagination — celui de « A traiter » et celui de
   « Historique » — se montraient ENSEMBLE : le script posait bien
   l'attribut `hidden`, mais `.pied { display: flex }` l'ecrasait, une
   regle de classe l'emportant sur le `display: none` du navigateur.
   Le client voyait deux fois « Lignes par page », avec deux totaux
   differents. Regle globale, pour que le piege ne se represente pas
   ailleurs dans la maquette. */
[hidden] { display: none !important; }

/* ============================================================
   CONTROLES ARRONDIS
   ------------------------------------------------------------
   Demande du client : boutons et champs en pastille.

   Le rayon n'est pas ecrit en dur : `--r-pilule` vaut 999px, ce qui
   arrondit toujours a la moitie de la hauteur, quelle que soit celle
   du controle. Un rayon fixe (20px) casserait des qu'un bouton change
   de taille — un bouton de 28px paraotrait carre a cote d'un de 40px.

   Deux exceptions assumees :
     - les zones de TEXTE multiligne gardent un rayon doux. Une pastille
       sur une boite de 76px de haut dessine un stade, pas un champ ;
     - les tableaux, cartes et panneaux gardent `--r-2` : ce sont des
       surfaces, pas des controles, et les arrondir davantage brouillerait
       la hierarchie entre ce qui se clique et ce qui se lit.
   ============================================================ */

:root { --r-pilule: 999px; }

/* --- Boutons --- */
.bouton,
.btn-primaire,
.btn,
.head .cta,
.pied .pages button,
.modale-pied .bouton,
.modale-pied .btn-primaire { border-radius: var(--r-pilule); }

/* Boutons d'icone : deja carres a 34px, la pastille les rend circulaires. */
.act,
.who .av,
.links .ic { border-radius: 50%; }

/* --- Champs de saisie --- */
.cherche,
.champ,
.volet .saisie,
.propositions .saisie,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
select { border-radius: var(--r-pilule); }

/* Le contenu doit suivre la courbe : sans marge laterale supplementaire, le
   texte colle au bord arrondi et paraot coupe. */
.cherche,
.champ { padding-left: 16px; padding-right: 16px; }
.cherche input,
.champ input,
.champ select { border-radius: inherit; }

/* Exception : multiligne. Une pastille dessinerait un stade. */
.modale textarea,
textarea { border-radius: var(--r-2); }

/* Les pastilles d'etat et les jetons etaient deja arrondis a `--r` ; ils
   passent en pilule pour parler la meme langue que les controles. */
.etat, .jeton, .tag, .compte { border-radius: var(--r-pilule); }

/* ============================================================
   ARBRE DES ESPACES DE TRAVAIL
   ------------------------------------------------------------
   Le classement documentaire SE LIT en arbre : c'est la vue par
   defaut du produit.

   Premiere version : des lignes a filet pleine largeur. Ca se lisait
   comme un tableau etroit, pas comme une arborescence — la hierarchie
   ne tenait qu'au retrait, que l'oeil ne compte pas.

   Ce qui la porte maintenant :
     1. DES GUIDES. Un filet vertical relie un parent a ses enfants, et
        un raccord horizontal touche chaque noeud. La parente se voit
        sans etre comptee.
     2. DEUX RANGS. Un dossier racine porte son nom en pleine encre et
        sa pastille en marine ; un sous-dossier s'allege. Le rang se lit
        avant le retrait.
     3. PAS DE FILET HORIZONTAL. Ce sont des objets ranges, pas des
        enregistrements alignes. Le survol dessine une pastille douce,
        du meme rayon que les controles.
   ============================================================ */

.arbre-wrap { padding: 10px 8px 14px; }
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }

/* --- Guides de parente --- */
.arbre ul {
  position: relative;
  /* Le filet vertical descend depuis la pastille du parent. */
  margin-left: 30px;
  border-left: 1px solid var(--marine-100);
}
/* Il s'arrete au dernier enfant : prolonge jusqu'en bas, il pendrait dans le
   vide et suggererait un contenu qui n'existe pas. */
.arbre ul > .noeud:last-child::after {
  content: ''; position: absolute; left: -1px; bottom: 0;
  width: 1px; height: calc(100% - 21px);
  background: var(--papier);
}
.arbre ul > .noeud { position: relative; }
/* Raccord horizontal : il touche la pastille de l'enfant. */
.arbre ul > .noeud > .noeud-ligne::before {
  content: ''; position: absolute; left: -1px; top: 21px;
  width: 13px; height: 1px; background: var(--marine-100);
}

.noeud-ligne {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 8px;
  margin: 2px 0;
  border-radius: var(--r-2);
  transition: background-color .16s ease;
}
.noeud-ligne:hover { background: var(--marine-pale); }

.plier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px;
  border: 0; background: none; cursor: pointer; color: var(--encre-3);
  border-radius: 50%;
}
.plier:hover { background: var(--marine-100); color: var(--marine); }
/* `.vide` est deja pris par l'etat « aucune donnee » (padding 46px) : reutilise
   ici, il etirait la ligne du noeud a 106px de haut. Nom distinct, pas de
   surcharge — deux mecanismes sur un meme nom finissent toujours par se voler
   la main. */
.plier.sans-enfant { visibility: hidden; cursor: default; }
.plier .chev { transition: transform .18s ease; }
.noeud[aria-expanded="true"] > .noeud-ligne .chev { transform: rotate(90deg); }
.noeud[aria-expanded="false"] > ul { display: none; }

/* --- Pastille du dossier ---
   Un aplat, pas une icone posee sur le papier : c'est ce qui donne son poids
   au noeud et sa lisibilite au rang. */
.ic-dossier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  background: var(--marine-pale); color: var(--marine);
}
/* Un dossier RACINE se distingue : fond marine, marque en or. L'or ne
   sert qu'ici dans cet ecran — repandu, il ne signalerait plus rien. */
.arbre > .noeud > .noeud-ligne .ic-dossier { background: var(--marine); color: #f0c67c; }

.noeud-nom  { font-weight: 700; font-size: 13.5px; color: var(--encre); }
/* Un sous-dossier s'allege : meme famille, rang different. */
.arbre ul .noeud-nom { font-weight: 600; color: var(--encre-2); }

.noeud-meta { font-size: 12px; color: var(--encre-3); }

/* Compte de sous-dossiers : a droite du nom, discret, il dit ce que le
   pliage cache. */
.noeud-compte {
  padding: 1px 9px; border-radius: var(--r-pilule);
  font-size: 11.5px; font-weight: 700;
  background: var(--fond-2); color: var(--encre-2);
}

/* Le menu se pousse a droite et ne se montre qu'au survol, comme les actions
   de ligne des tableaux — une action secondaire ne rivalise pas avec la donnee. */
.menu-noeud { margin-left: auto; }
@media (hover: hover) {
  .menu-noeud { opacity: 0; transition: opacity .15s ease; }
  .noeud-ligne:hover .menu-noeud,
  .noeud-ligne:focus-within .menu-noeud { opacity: 1; }
}

/* Etoile des champs obligatoires du dialogue */
.modale-champ .requis { color: var(--danger); font-weight: 800; }