/* ═══════════════════════════════════════════════════════════════════════
   NKUNKUMA — feuille unique
   Code & design : Gédéon « Gfirst » Mouloundi Mayagha — github.com/firstged
   Blanc cassé, encre bleu nuit, un dégradé azur→cyan réservé aux points
   d'appui : la marque, l'action principale, l'élément choisi. Posé en fond
   plat il ne voudrait plus rien dire.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ JETONS ═══ */

:root {
  --neige:      #f6f9fc;
  --blanc:      #ffffff;
  --voile:      rgba(255, 255, 255, .74);
  --encre:      #0c1a26;
  --encre-2:    #52687c;
  --encre-3:    #90a3b5;
  --bord:       #e3eaf2;
  --bord-fort:  #cad7e4;

  --azur:       #0a74d4;
  --azur-fonce: #0a5aa8;
  --cyan:       #16c0d8;
  --azur-pale:  #e9f3fd;
  --degrade:    linear-gradient(118deg, var(--azur) 0%, var(--cyan) 100%);

  --peril:      #d6453a;
  --peril-pale: #fdedec;
  --vert:       #0f8f69;
  --ambre:      #b4760c;

  --r-petit: 10px;
  --r-moyen: 16px;
  --r-grand: 24px;
  --r-rond: 999px;

  --pose:  0 1px 2px rgba(12, 26, 38, .05), 0 8px 24px -16px rgba(12, 26, 38, .35);
  --leve:  0 2px 6px rgba(12, 26, 38, .06), 0 20px 44px -26px rgba(12, 26, 38, .5);
  --flotte: 0 24px 60px -24px rgba(12, 26, 38, .45);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* Plusieurs éléments masqués par « hidden » portent aussi un display
   explicite, qui l'emporterait sur la règle du navigateur. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100svh;
  font: 400 15px/1.55 var(--sans);
  color: var(--encre);
  background: var(--neige);
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

input, textarea, select, button, a { font: inherit; color: inherit; }

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

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

.saut {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  padding: 10px 18px; border-radius: var(--r-rond);
  background: var(--encre); color: var(--blanc); text-decoration: none;
}
.saut:focus { top: 12px; }

.pousse { flex: 1; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.02em; }

.depot-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Toutes les icônes partagent le même réglage de trait : c'est ce qui leur
   donne le même poids à l'œil malgré des dessins différents. */
svg:not(.depot-icones):not(.marque__signe):not(.repentir__cadran) {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══ AVERTISSEMENT ═══ */

.avertissement {
  margin: 14px; padding: 13px 18px;
  border: 1px solid var(--peril); border-left-width: 4px;
  border-radius: var(--r-petit);
  background: var(--peril-pale); color: #83251d;
  font-size: 14px;
}

/* ═══ VUES ═══ */

.vue { display: none; }
body[data-vue="accueil"]  #vue-accueil,
body[data-vue="dossiers"] #vue-dossiers,
body[data-vue="dossier"]  #vue-dossier { display: block; animation: entre .3s ease both; }

@keyframes entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════ ACCUEIL ═══════════════ */

.vue--accueil {
  position: relative;
  display: none;
  min-height: 100svh;
  padding: clamp(24px, 6vh, 70px) 20px 40px;
}

/* Le dégradé vit ici, en nappe diffuse derrière la marque, et respire très
   lentement. C'est la seule grande surface colorée de l'application. */
.halo {
  position: absolute; inset: -14% -6% auto -6%; height: 78vh; z-index: 0;
  background:
    radial-gradient(44% 56% at 26% 32%, rgba(10, 116, 212, .30), transparent 70%),
    radial-gradient(40% 52% at 76% 44%, rgba(22, 192, 216, .32), transparent 70%),
    radial-gradient(64% 42% at 50% 6%, rgba(255, 255, 255, .92), transparent 72%);
  filter: blur(10px);
  animation: respire 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes respire {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.07); }
}

.seuil {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(26px, 5vh, 46px);
  min-height: calc(100svh - 110px);
  justify-content: center;
}

.marque {
  display: grid; justify-items: center; gap: 12px;
  text-align: center;
}
.marque__signe {
  width: clamp(46px, 7vw, 62px); height: clamp(46px, 7vw, 62px);
  fill: none; stroke: url(#degrade-marque);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.marque__nom {
  font: 600 clamp(44px, 9vw, 76px)/1 var(--serif);
  letter-spacing: -.028em;
  background: var(--degrade);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* background-clip: text exige une boîte propre : sans inline-block le
     dégradé se calerait sur la largeur du parent, pas sur le mot. */
  display: inline-block;
  padding-bottom: .06em;
}
.marque__slogan {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em; text-indent: .3em;
  color: var(--encre-2);
}

/* ═══ BARRE DE RECHERCHE ═══ */

.quete {
  position: relative; display: flex; align-items: center;
  width: 100%; max-width: 580px;
}
.quete__icone {
  position: absolute; left: 20px; z-index: 1;
  color: var(--encre-3); pointer-events: none;
  transition: color .2s;
}
.quete input {
  width: 100%; height: 56px;
  padding: 0 52px 0 52px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-rond);
  background: var(--blanc);
  box-shadow: var(--pose);
  transition: box-shadow .22s, border-color .22s;
}
.quete input::placeholder { color: var(--encre-3); }
.quete input::-webkit-search-cancel-button { display: none; }
.quete input:hover { box-shadow: var(--leve); }
.quete input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: var(--leve), 0 0 0 2px var(--azur);
}
.quete:focus-within .quete__icone { color: var(--azur); }

.quete__vider {
  position: absolute; right: 12px;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-2);
  cursor: pointer;
}
.quete__vider:hover { background: var(--azur-pale); color: var(--azur); }
.quete__vider svg { width: 16px; height: 16px; }

.quete--barre { max-width: none; flex: 1; }
.quete--barre input { height: 46px; box-shadow: none; }
.quete--barre .quete__icone { left: 17px; }

/* ═══ PORTES ═══ */

.portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 14px;
  width: 100%; max-width: 580px;
}

.porte {
  display: grid; justify-items: start; gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--bord);
  border-radius: var(--r-moyen);
  background: var(--voile);
  backdrop-filter: blur(8px);
  box-shadow: var(--pose);
  text-align: left; cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.porte:hover { transform: translateY(-3px); box-shadow: var(--leve); border-color: var(--bord-fort); }
.porte:active { transform: translateY(0); }

.porte__icone { width: 24px !important; height: 24px !important; color: var(--azur); margin-bottom: 6px; }
.porte__nom { font-size: 15.5px; font-weight: 600; }
.porte__note { font-size: 12px; color: var(--encre-2); }

.porte--premiere { grid-column: span 2; }

.porte--accent {
  border-color: transparent;
  background: var(--degrade);
  color: var(--blanc);
  box-shadow: 0 2px 6px rgba(10, 116, 212, .2), 0 18px 36px -20px rgba(10, 116, 212, .9);
}
.porte--accent .porte__icone { color: var(--blanc); }
.porte--accent .porte__note { color: rgba(255, 255, 255, .85); }
.porte--accent:hover { box-shadow: 0 4px 10px rgba(10, 116, 212, .24), 0 26px 46px -22px rgba(10, 116, 212, 1); }

.porte--discrete { background: transparent; box-shadow: none; border-style: dashed; }

.pouls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 12.5px; color: var(--encre-2);
}
.pouls b { font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.pouls .alerte { color: var(--peril); }
.pouls .alerte b { color: var(--peril); }

.signature {
  font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--encre-3);
}
.signature a {
  color: var(--encre-2); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--bord-fort);
  transition: color .16s, border-color .16s;
}
.signature a:hover { color: var(--azur); border-color: var(--azur); }

/* ═══════════════ BARRE HAUTE ═══════════════ */

.barre-haute {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(14px, 3vw, 30px);
  border-bottom: 1px solid var(--bord);
  background: rgba(246, 249, 252, .88);
  backdrop-filter: blur(12px);
}
.barre-haute__titre {
  flex: 1; min-width: 0;
  font: 600 16px/1.3 var(--sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rond {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none; padding: 0;
  border: 1px solid var(--bord); border-radius: 50%;
  background: var(--blanc); color: var(--encre);
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.rond:hover { background: var(--azur-pale); border-color: var(--azur); color: var(--azur); }
.rond--mince { width: 34px; height: 34px; }

/* ═══ BOUTONS ═══ */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--bord-fort); border-radius: var(--r-rond);
  background: var(--blanc); color: var(--encre);
  font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s, transform .12s;
}
.bouton:hover { border-color: var(--encre-3); box-shadow: var(--pose); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: .5; cursor: default; }
.bouton svg { width: 18px; height: 18px; }

.bouton--accent {
  border-color: transparent; color: var(--blanc);
  background: var(--degrade);
  box-shadow: 0 10px 24px -14px rgba(10, 116, 212, .9);
}
.bouton--accent:hover { box-shadow: 0 14px 30px -14px rgba(10, 116, 212, 1); border-color: transparent; }

.bouton--mince { height: 34px; padding: 0 13px; font-size: 13px; }
.bouton--mince svg { width: 16px; height: 16px; }

.bouton--peril { border-color: transparent; background: transparent; color: var(--peril); }
.bouton--peril:hover { background: var(--peril-pale); border-color: var(--peril); box-shadow: none; }

.bouton--peril-plein { border-color: transparent; background: var(--peril); color: var(--blanc); }
.bouton--peril-plein:hover { background: #bb3429; border-color: transparent; }

.bouton--fantome { border-color: transparent; background: transparent; }
.bouton--fantome:hover { background: rgba(12, 26, 38, .06); border-color: transparent; box-shadow: none; }

/* Un bouton destructeur demande son second clic sur place. */
.bouton.arme, .rond.arme {
  background: var(--peril); border-color: var(--peril); color: var(--blanc);
}

/* ═══════════════ REGISTRE ═══════════════ */

.vue--liste { padding-bottom: 120px; }

.tri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 1080px; margin: 0 auto;
  padding: 20px clamp(14px, 3vw, 30px) 12px;
}
.tri__compte {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--encre-2);
}
.tri__filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.filtre {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--bord); border-radius: var(--r-rond);
  background: var(--blanc); color: var(--encre-2);
  font-size: 13px; cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.filtre:hover { border-color: var(--bord-fort); color: var(--encre); }
.filtre.est-actif {
  border-color: transparent; background: var(--encre); color: var(--blanc);
}

.registre {
  display: grid; gap: 10px;
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 30px);
}

.ligne {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--bord);
  border-radius: var(--r-moyen);
  background: var(--blanc);
  box-shadow: var(--pose);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s, background-color .16s;
}
.ligne:hover { transform: translateY(-2px); box-shadow: var(--leve); border-color: var(--bord-fort); }
.ligne.est-choisie { border-color: var(--azur); background: var(--azur-pale); }

/* La case reste visible en permanence : sur un téléphone, une case qui
   n'apparaît qu'au survol n'existe pas. */
.ligne__case {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.6px solid var(--bord-fort); border-radius: 7px;
  background: var(--blanc); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .16s, border-color .16s;
}
.ligne__case::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid var(--blanc); border-bottom: 2px solid var(--blanc);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .16s;
}
.ligne__case:checked { background: var(--azur); border-color: var(--azur); }
.ligne__case:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.ligne__corps { min-width: 0; }
.ligne__nom {
  font: 600 17px/1.3 var(--serif);
  letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne__dessous {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-top: 5px;
}

.jeton {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--encre-2);
}
.jeton svg { width: 14px; height: 14px; color: var(--encre-3); }
.jeton--mono { font-family: var(--mono); font-size: 12px; color: var(--encre); }
.jeton--lien { color: var(--vert); text-decoration: none; border-bottom: 1px solid currentColor; }
.jeton--lien svg { color: inherit; }

.ligne__droite { display: flex; align-items: center; gap: 14px; }

.cartouche {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-rond);
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.cartouche svg { width: 14px; height: 14px; }
.cartouche--retard  { background: var(--peril-pale); color: var(--peril); }
.cartouche--cours   { background: #fdf4e3; color: var(--ambre); }
.cartouche--complet { background: #e6f6f0; color: var(--vert); }
.cartouche--vide    { background: #eef2f6; color: var(--encre-2); }

.compteur-docs {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.compteur-docs svg { width: 15px; height: 15px; color: var(--encre-3); }

.registre-vide {
  max-width: 1080px; margin: 0 auto;
  padding: 70px 30px; text-align: center;
  color: var(--encre-2);
}

/* ═══ BARRE DE SÉLECTION ═══ */

.moisson {
  position: fixed; left: 50%; bottom: 22px; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 20px;
  transform: translateX(-50%);
  border-radius: var(--r-rond);
  background: var(--encre); color: var(--blanc);
  box-shadow: var(--flotte);
  animation: monte .22s ease both;
}
@keyframes monte {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.moisson__compte { font-size: 14px; font-weight: 500; white-space: nowrap; }
.moisson .bouton--fantome { color: rgba(255, 255, 255, .8); }
.moisson .bouton--fantome:hover { background: rgba(255, 255, 255, .12); color: var(--blanc); }

/* ═══ REPENTIR ═══ */

.repentir {
  position: fixed; left: 50%; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 14px;
  transform: translateX(-50%);
  border-radius: var(--r-rond);
  background: var(--encre); color: var(--blanc);
  box-shadow: var(--flotte);
  animation: monte .22s ease both;
}
.repentir__texte { font-size: 14px; white-space: nowrap; }
.repentir .bouton--fantome { color: var(--blanc); border-color: rgba(255,255,255,.3); }
.repentir .bouton--fantome:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255,255,255,.5); }

.repentir__cadran { width: 34px; height: 34px; flex: none; transform: rotate(-90deg); }
.repentir__fond { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 3; }
.repentir__arc {
  fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100.5;   /* 2πr pour r = 16 */
  stroke-dashoffset: 0;
}

/* ═══════════════ FICHE ═══════════════ */

.vue--fiche { padding-bottom: 80px; }

.fiche { max-width: 880px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 30px); }

.fiche__sommet {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--bord);
}
.fiche__identite { flex: 1; min-width: 240px; }
.fiche__nom {
  font: 600 clamp(26px, 4.4vw, 38px)/1.1 var(--serif);
  letter-spacing: -.022em;
}
.fiche__dessous { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }

.pan {
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--bord);
  border-radius: var(--r-grand);
  background: var(--blanc);
  box-shadow: var(--pose);
}
.pan__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.pan__tete h3 {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--encre-2);
}
.pan__vide { padding: 14px 0 4px; text-align: center; color: var(--encre-2); font-size: 13.5px; }
.pan__vide p { margin-bottom: 12px; }

/* ═══ CHAMPS ═══ */

.champs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px;
  margin-top: 26px;
}
.champ--large { grid-column: 1 / -1; }

.champ label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--encre-2);
}
.champ abbr { color: var(--peril); text-decoration: none; }

.champ input, .champ textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--bord); border-radius: var(--r-petit);
  background: var(--blanc);
  transition: border-color .16s, box-shadow .16s;
}
.champ textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.champ input:hover, .champ textarea:hover { border-color: var(--bord-fort); }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--azur);
  box-shadow: 0 0 0 3px var(--azur-pale);
}
.champ input:user-invalid { border-color: var(--peril); }

.fiche__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 22px;
}
.etat { font-size: 13px; color: var(--vert); }
.etat--erreur { color: var(--peril); }

/* ═══ PIÈCES ═══ */

.pieces { display: grid; gap: 12px; }

.piece {
  padding: 14px 16px;
  border: 1px solid var(--bord);
  border-left: 3px solid var(--bord-fort);
  border-radius: var(--r-petit);
  background: var(--neige);
}
.piece[data-statut="En attente"] { border-left-color: var(--ambre); }
.piece[data-statut="Obtenue"] { border-left-color: var(--vert); }
.piece[data-statut="Remise au client"] { border-left-color: var(--azur); }
.piece[data-retard="oui"] { border-left-color: var(--peril); background: var(--peril-pale); }

.piece__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* Le type se lit comme un titre, pas comme un champ : la liste se réduit à sa
   propre largeur au lieu de s'étirer sur toute la ligne. */
.piece__type {
  flex: 0 1 auto; min-width: 0; max-width: 62%;
  margin-right: auto;
  padding: 6px 10px;
  border: 1px solid transparent; border-radius: var(--r-petit);
  background: transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.piece__type:hover { border-color: var(--bord-fort); background: var(--blanc); }
.piece__statut {
  padding: 6px 12px;
  border: 1px solid var(--bord-fort); border-radius: var(--r-rond);
  background: var(--blanc);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.piece__fermer {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-3); cursor: pointer;
}
.piece__fermer:hover { background: var(--peril-pale); color: var(--peril); }
.piece__fermer.arme {
  width: auto; padding: 0 12px; border-radius: var(--r-rond);
  background: var(--peril); color: var(--blanc);
  font-size: 12px; font-weight: 500;
}

.piece__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.piece__champ label {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--encre-3);
}
.piece__champ input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--bord); border-radius: 8px;
  background: var(--blanc);
  font-family: var(--mono); font-size: 12.5px;
}
.piece__champ input:focus {
  outline: none; border-color: var(--azur); box-shadow: 0 0 0 3px var(--azur-pale);
}
.piece__retard {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 12.5px; font-weight: 500; color: var(--peril);
}
.piece__retard svg { width: 15px; height: 15px; }

/* ═══ DOCUMENTS ═══ */

.docs { display: grid; gap: 8px; }

.doc {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: var(--r-petit);
  background: var(--neige);
  transition: border-color .16s, background-color .16s;
}
.doc:hover { border-color: var(--azur); background: var(--azur-pale); }

.doc__vignette {
  display: grid; place-items: center;
  width: 38px; height: 44px;
  border-radius: 6px;
  background: var(--degrade); color: var(--blanc);
}
.doc__vignette svg { width: 20px; height: 20px; }

.doc__nom {
  min-width: 0; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.doc__nom b {
  display: block; font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__nom span { font-size: 11.5px; color: var(--encre-2); }

.doc__rattache {
  padding: 6px 10px;
  border: 1px solid var(--bord); border-radius: var(--r-rond);
  background: var(--blanc);
  font-size: 12px; cursor: pointer;
}
.doc__fermer {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-3); cursor: pointer;
}
.doc__fermer:hover { background: var(--peril-pale); color: var(--peril); }
.doc__fermer.arme {
  width: auto; padding: 0 12px; border-radius: var(--r-rond);
  background: var(--peril); color: var(--blanc); font-size: 12px;
}

/* ═══ VISIONNEUSE ═══ */

.visionneuse {
  width: min(940px, 94vw); max-height: 92svh;
  padding: 0; border: 0;
  border-radius: var(--r-grand);
  background: var(--blanc);
  box-shadow: var(--flotte);
  overflow: hidden;
}
.visionneuse::backdrop { background: rgba(12, 26, 38, .55); backdrop-filter: blur(3px); }

.visionneuse__tete, .visionneuse__pied {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
}
.visionneuse__tete { border-bottom: 1px solid var(--bord); }
.visionneuse__pied { border-top: 1px solid var(--bord); }
.visionneuse__genre { color: var(--azur); }
.visionneuse__tete p {
  flex: 1; min-width: 0; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.visionneuse__corps {
  display: grid; place-items: center;
  height: 70svh; background: #eef2f6;
}
.visionneuse__corps iframe { width: 100%; height: 100%; border: 0; }
.visionneuse__corps img { max-width: 100%; max-height: 70svh; }
.visionneuse__corps p { padding: 30px; text-align: center; color: var(--encre-2); }

/* ═══ MOUCHARD ═══ */

.mouchard {
  position: fixed; left: 50%; bottom: 22px; z-index: 70;
  padding: 12px 22px; transform: translateX(-50%);
  border-radius: var(--r-rond);
  background: var(--encre); color: var(--blanc);
  font-size: 13.5px; box-shadow: var(--flotte);
  animation: monte .2s ease both;
}
.mouchard--erreur { background: var(--peril); }

/* ═══════════════ TÉLÉPHONE ═══════════════ */

@media (max-width: 760px) {
  .porte--premiere { grid-column: span 2; }
  .portes { grid-template-columns: 1fr 1fr; }

  /* La recherche passe sous la barre : elle a besoin de toute la largeur, et
     le retour doit rester sous le pouce, à gauche. */
  .barre-haute { flex-wrap: wrap; }
  .barre-haute__titre { order: 1; }
  .barre-haute > .bouton { order: 2; margin-left: auto; }
  .barre-haute .quete--barre { order: 3; flex-basis: 100%; }

  .ligne { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .ligne__droite {
    grid-column: 2; margin-top: 4px;
    justify-content: flex-start; flex-wrap: wrap;
  }

  .champs { grid-template-columns: 1fr; }
  .piece__grille { grid-template-columns: 1fr 1fr; }

  .doc { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .doc__rattache { grid-column: 2 / -1; justify-self: start; }

  .visionneuse__corps { height: 60svh; }
  .moisson, .repentir { left: 14px; right: 14px; transform: none; width: auto; }
  @keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 420px) {
  .piece__grille { grid-template-columns: 1fr; }
  .moisson__compte { font-size: 13px; }
}

/* ═══ MOUVEMENT RÉDUIT ═══ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .halo { animation: none; }
}

/* ═══ IMPRESSION ═══ */

@media print {
  body { background: #fff; }
  .barre-haute, .fiche__pied, .pan__tete button, .doc__fermer, .doc__rattache,
  .piece__fermer, .moisson, .repentir, .mouchard, .saut { display: none !important; }
  .pan { break-inside: avoid; box-shadow: none; }
}