/* Signature Renaissance · interface (22/10/2026).
   Style « fiches » de l'accueil d'Horus (accueil2.html / epure2.html, COPIÉS ici, rien n'est importé d'Horus) :
   jetons canvas/card/wash/line, fiches à barre de couleur k1..k4, rayons 12 px, ombre sh-1 + glow, dégradé bleu → violet → rose.
   Marque Renaissance en tête (logo, rose #EF2880, bleu #1E49A0). Écrans du client (iPad) : texte ≥ 18 px, boutons ≥ 56 px. */
@font-face { font-family: "Inter"; font-weight: 400; src: url(Inter-400.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(Inter-500.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url(Inter-600.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url(Inter-700.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Great Vibes"; font-weight: 400; src: url(GreatVibes.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url(SpaceGrotesk-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 500; src: url(SpaceGrotesk-Medium.ttf) format("truetype"); font-display: swap; }
:root {
  --canvas: #F7F6FC; --card: #FFFFFF; --wash: #F2F0FA; --hover: #F3F1F8; --line: #E4E1EC; --line-2: #CFCBDC;
  --ink: #16172B; --ink-2: #3A4159; --muted: #5C6079;
  --rose: #EF2880; --rose-t: #C0136A; --bleu: #1E49A0; --bleu-f: #17306E;
  --primary: #1E49A0; --primary-hover: #17306E; --on-primary: #fff; --accent-wash: #EEF2FC;
  --k1: #233CA1; --k1x: #233CA1; --k1t: #F1F3FC; --k2: #9C53EF; --k2x: #7A35D0; --k2t: #F6F0FE;
  --k3: #E91E8C; --k3x: #BF106E; --k3t: #FEEFF7; --k4: #12939E; --k4x: #0B6D76; --k4t: #EAF7F8;
  --ok-t: #067647; --ok-b: #ECFDF3; --att-t: #93370D; --att-b: #FEF6E7; --urg-t: #B42318; --urg-b: #FEF3F2;
  --sh-1: 0 1px 2px rgba(40,20,90,.05), 0 4px 14px rgba(40,20,90,.05); --glow: inset 0 1px 0 rgba(255,255,255,.7);
  --sh-2: 0 8px 24px rgba(22,23,43,.14), 0 0 0 1px rgba(22,23,43,.04);
  --grad: linear-gradient(135deg, #3B82F6, #A855F7 55%, #EC4899);
  --r-2: 8px; --r-3: 12px; --t: 120ms cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 Inter, system-ui, sans-serif; }
body.client { font-size: 19px; }
a { color: var(--bleu); }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.01em; margin: 0 0 8px; }
code { font-size: .85em; overflow-wrap: anywhere; }
.essai { position: sticky; top: 0; z-index: 50; text-align: center; padding: 8px 16px; font: 700 15px/1.3 Inter, sans-serif;
  color: #7A2E00; background: repeating-linear-gradient(135deg, #FFE7A3 0 14px, #FFF1C7 14px 28px); border-bottom: 1px solid #F1D27A; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px max(16px, 3vw);
  background: var(--card); border-bottom: 1px solid var(--line); position: relative; }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--rose), #8E3AB8 48%, var(--bleu)); }
.marque { display: flex; align-items: center; gap: 12px; }
.marque img { height: 24px; width: auto; }
.produit { font: 700 15px "Space Grotesk", Inter, sans-serif; color: var(--rose-t); letter-spacing: .08em; text-transform: uppercase;
  border-left: 1px solid var(--line-2); padding-left: 12px; }
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a, .nav .lien { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-2); color: var(--ink-2);
  font: 600 15px Inter, sans-serif; text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav .lien:hover { background: var(--hover); }
.nav form { margin: 0; }
main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.pied { text-align: center; color: var(--muted); font-size: 13px; padding: 12px 16px 24px; }
.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1), var(--glow); padding: 20px; position: relative; }
.carte.centre { text-align: center; max-width: 720px; margin: 0 auto; width: 100%; }
.sous, .aide { color: var(--muted); }
.aide { font-size: 14px; }
.erreur { color: var(--urg-t); background: var(--urg-b); border-radius: var(--r-2); padding: 10px 12px; font-weight: 600; }
ul.erreur { padding-left: 28px; }
/* ---- phrase d'état (accueil d'Horus) ---- */
.etat { overflow: hidden; }
.etat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.etat .date { margin: 2px 0 0; font: 700 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phrase { font: 700 30px/1.15 "Space Grotesk", Inter, sans-serif; margin: 6px 0 4px; text-wrap: balance; }
.phrase b { font-weight: 700; } .phrase .hl { color: var(--k3x); }
/* ---- compteurs ---- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cpt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 10px; min-height: 92px; border-radius: var(--r-3);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: linear-gradient(180deg, var(--kt, var(--wash)) 0, var(--card) 75%);
  box-shadow: var(--sh-1), var(--glow); overflow: hidden; }
.cpt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--line-2)); }
.cpt[data-k="1"] { --k: var(--k1); --kx: var(--k1x); --kt: var(--k1t); } .cpt[data-k="2"] { --k: var(--k2); --kx: var(--k2x); --kt: var(--k2t); }
.cpt[data-k="3"] { --k: var(--k3); --kx: var(--k3x); --kt: var(--k3t); } .cpt[data-k="4"] { --k: var(--k4); --kx: var(--k4x); --kt: var(--k4t); }
.cpt .t { font: 700 12px/1.25 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--kx, var(--muted)); }
.cpt .v { font: 700 30px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--kx, var(--ink-2)); font-variant-numeric: tabular-nums; margin-top: auto; }
.cpt[aria-current="true"] { outline: 2px solid var(--k, var(--bleu)); outline-offset: 1px; }
.cpt:hover { border-color: var(--k, var(--line-2)); }
/* ---- recherche ---- */
.recherche { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.recherche .champ { flex: 1 1 320px; margin: 0; }
/* ---- fiches clients ---- */
.groupe h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 8px 0 12px; }
.groupe h2 .n { background: var(--wash); color: var(--ink-2); border-radius: 999px; padding: 1px 10px; font: 600 13px Inter, sans-serif; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.fiche { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--kt, var(--wash)) 0, var(--card) 70%); box-shadow: var(--sh-1), var(--glow); overflow: hidden; min-width: 0; }
.fiche::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--line-2)); }
.fiche[data-k="1"] { --k: var(--k1); --kx: var(--k1x); --kt: var(--k1t); } .fiche[data-k="2"] { --k: var(--k2); --kx: var(--k2x); --kt: var(--k2t); }
.fiche[data-k="3"] { --k: var(--k3); --kx: var(--k3x); --kt: var(--k3t); } .fiche[data-k="4"] { --k: var(--k4); --kx: var(--k4x); --kt: var(--k4t); }
.fiche h3 { font-size: 18px; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; }
.fiche .t { margin: 2px 0 0; }
.fiche .s { margin: 0; color: var(--muted); font-size: 14px; }
.fiche .v { margin: 6px 0 0; font: 700 26px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--kx, var(--ink)); font-variant-numeric: tabular-nums; }
.fiche .info { margin: 0; font-size: 13px; color: var(--ink-2); border-left: 3px solid var(--k, var(--line-2)); padding-left: 8px; }
.fiche .actions { margin-top: auto; padding-top: 10px; }
.fiche .actions form { margin: 0; }
.fiche .actions .bouton { width: 100%; }
.plus { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font: 600 13px Inter, sans-serif;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--wash); }
.pill[data-s="a_contresigner"] { color: var(--k3x); background: var(--k3t); border-color: #F6C4DD; }
.pill[data-s="contresigne"] { color: var(--ok-t); background: var(--ok-b); border-color: #ABEFC6; }
.pill[data-s="envoye"], .pill[data-s="ouvert"] { color: var(--k2x); background: var(--k2t); border-color: #DDC8FB; }
.pill[data-s="a_faire"] { color: var(--k1x); background: var(--k1t); border-color: #CBD3F5; }
.pill[data-s="retracte"], .pill[data-s="expire"] { color: var(--att-t); background: var(--att-b); border-color: #F7D9A8; }
/* ---- formulaires ---- */
.champ { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; text-align: left; }
.champ .lib { font: 600 14px Inter, sans-serif; color: var(--ink-2); }
.champ input, .champ select { min-height: 48px; font: 400 17px Inter, sans-serif; padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.champ input:focus, .champ select:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.champ.grand input { font: 700 26px "Space Grotesk", Inter, sans-serif; color: var(--k3x); }
.ancienne { color: var(--muted); font-size: 13px; }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.case { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  margin: 0 0 10px; background: #fff; cursor: pointer; text-align: left; }
.case input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--bleu); }
fieldset.choix { border: 0; padding: 0; margin: 0 0 12px; } fieldset.choix legend { font: 600 14px Inter, sans-serif; color: var(--ink-2); margin-bottom: 6px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-2);
  border: 1px solid var(--line-2); background: var(--card); color: var(--bleu); font: 600 16px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--hover); }
.bouton.principal { background: var(--primary); color: var(--on-primary); border-color: transparent; min-height: 56px; font-size: 17px; }
.bouton.principal:hover { background: var(--primary-hover); }
.bouton.danger { color: var(--urg-t); border-color: #F5B5AE; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.barre { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.enligne { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .enligne .champ { margin: 0; }
.etapes { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.etapes li { padding: 6px 12px; border-radius: 999px; background: var(--wash); color: var(--muted); font: 600 14px Inter, sans-serif; }
.etapes li[aria-current="step"] { background: var(--bleu); color: #fff; } .etapes li.fait { color: var(--ok-t); background: var(--ok-b); }
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.resume > div { background: var(--wash); border-radius: var(--r-2); padding: 10px 12px; display: flex; flex-direction: column; }
.resume .lib { font: 600 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tableau { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.tableau th { text-align: left; background: var(--wash); padding: 8px; } .tableau td { padding: 8px; border-top: 1px solid var(--line); }
.journal { padding-left: 20px; } .journal time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.apercu { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; }
.lien-essai code { display: block; padding: 12px; background: var(--wash); border-radius: var(--r-2); }
.page-connexion main { max-width: 480px; }
.connexion h1 { font-size: 26px; }
.connexion .bouton.principal { width: 100%; }
/* ---- pavé de signature ---- */
.pave { display: block; width: 100%; height: 260px; border: 2px dashed var(--line-2); border-radius: var(--r-3); background: #fff; touch-action: none; cursor: crosshair; }
.barre [hidden], .bouton[hidden] { display: none !important; }
.pave.auto { cursor: default; background: #fff linear-gradient(#fff, #fff); }
.nom-sous { text-align: center; font-weight: 600; margin: 6px 0 0; }

/* ======================= écrans du client (lien reçu par e-mail) : ≥ 18 px, boutons ≥ 56 px, un bouton principal ======================= */
body.client main { max-width: 860px; }
body.client .carte { padding: 24px; }
body.client .carte.centre { text-align: left; max-width: none; }
body.client h1 { font-size: 30px; line-height: 1.2; }
body.client h2 { font-size: 24px; }
body.client p, body.client li, body.client label { font-size: 19px; }
body.client .bouton { min-height: 56px; font-size: 19px; padding: 0 22px; }
body.client .bouton.principal { min-height: 64px; font-size: 20px; width: 100%; margin-top: 16px; }
body.client .case { font-size: 19px; padding: 14px; } body.client .case input { width: 28px; height: 28px; }
.progression { height: 8px; background: var(--wash); border-radius: 999px; overflow: hidden; margin: 0 0 16px; }
.progression span { display: block; height: 100%; background: var(--grad); }
.etape-n { font: 700 14px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.points { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.points li { position: relative; padding: 16px 16px 14px 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: linear-gradient(180deg, var(--kt) 0, var(--card) 80%); overflow: hidden; }
.points li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--k); }
.points li:nth-child(4n+1) { --k: var(--k1); --kt: var(--k1t); } .points li:nth-child(4n+2) { --k: var(--k3); --kt: var(--k3t); }
.points li:nth-child(4n+3) { --k: var(--k4); --kt: var(--k4t); } .points li:nth-child(4n+4) { --k: var(--k2); --kt: var(--k2t); }
.points b { font-weight: 700; }
.montant { font: 700 40px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--k3x); margin: 8px 0; }
.taille { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.taille button { min-width: 56px; min-height: 56px; font: 700 20px Inter, sans-serif; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--bleu); cursor: pointer; }
.sommaire { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0 16px; padding: 0; list-style: none; }
.sommaire a { display: flex; align-items: center; min-height: 56px; padding: 8px 14px; border-radius: var(--r-2); background: var(--wash); text-decoration: none; color: var(--ink); font-weight: 600; }
.contrat-texte { font-size: var(--taille, 19px); line-height: 1.6; }
.contrat-texte p, .contrat-texte li { font-size: var(--taille, 19px); }
.contrat-texte h2 { font-size: calc(var(--taille, 19px) * 1.2); margin-top: 28px; scroll-margin-top: 80px; }
.contrat-texte .article-num { display: block; color: var(--rose-t); font-size: .7em; letter-spacing: .1em; text-transform: uppercase; }
.contrat-texte .a-completer { background: #FFF1B0; padding: 0 4px; border-radius: 4px; }
.contrat-texte .rempli { font-weight: 700; }
.contrat-texte .parties { display: grid; gap: 12px; } .contrat-texte .partie { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; }
.contrat-texte .annexe-tete h1 { font-size: calc(var(--taille, 19px) * 1.3); margin-top: 36px; }
.contrat-texte .surtitre { color: var(--rose-t); font-weight: 700; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; }
.contrat-texte table { width: 100%; border-collapse: collapse; } .contrat-texte td, .contrat-texte th { border: 1px solid var(--line); padding: 6px; }
.contrat-texte .signatures, .contrat-texte .bloc-signature .zone { display: none; }
.retour-sommaire { position: sticky; bottom: 12px; display: flex; justify-content: center; margin-top: 12px; }
.retour-sommaire a { background: var(--card); box-shadow: var(--sh-2); }
.code-champ { font: 700 40px/1 "Space Grotesk", monospace; letter-spacing: .4em; text-align: center; width: 100%; max-width: 420px; min-height: 72px;
  border-radius: var(--r-3); border: 2px solid var(--line-2); padding: 8px; }
.code-essai { background: #FFF1C7; border: 1px dashed #E0B44B; border-radius: var(--r-2); padding: 10px 12px; font-weight: 700; }
.fin { text-align: center; }
.coche { width: 96px; height: 96px; border-radius: 50%; background: var(--ok-b); color: var(--ok-t); font: 700 56px/96px Inter, sans-serif; margin: 8px auto 16px; }
.recap { border: 2px solid var(--k3); border-radius: var(--r-3); padding: 14px 16px; background: var(--k3t); }
@media (max-width: 640px) { .phrase { font-size: 24px; } body.client h1 { font-size: 26px; } .montant { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.pages { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 12px; scroll-snap-type: x mandatory; }
.pages img { flex: none; width: min(420px, 80vw); height: auto; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--sh-1); scroll-snap-align: start; background: #fff; }
/* ---- aperçu du contrat en direct (à côté du formulaire sur grand écran, en dessous sur iPad portrait) ---- */
.edition { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .edition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .apercu-direct { position: sticky; top: 56px; } }
.apercu-direct { overflow: hidden; }
.apercu-direct::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.apercu-direct h2 { font-size: 18px; }
.apercu-texte { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 14px; background: #fff; --taille: 15px; }
.apercu-texte .rempli, .legende .rempli { background: #E3F6EA; color: #064E2F; border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -2px 0 #4CC38A; }
.apercu-texte .a-completer, .legende .a-completer { background: #FFF1B0; border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -2px 0 #E0B44B; }
.legende { display: flex; gap: 10px; font-size: 13px; margin: 0 0 8px; }
.apercu-texte .couverture, .apercu-texte .bloc-signature .zone { display: none; }

/* Lecture seule (23/10) : le contrat ne se copie pas, ne s'imprime pas ; filigrane discret nom + date/heure d'ouverture */
#client, #client * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#client input, #client textarea { -webkit-user-select: text; user-select: text; }
#client img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.filigrane { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: space-around;
  justify-content: space-around; transform: rotate(-24deg) scale(1.5); }
.filigrane span { font-size: 14px; color: rgba(60, 60, 80, .13); white-space: nowrap; padding: 26px 20px; }
@media print { body { display: none !important; }
  html::before { content: "Impression non disponible : lisez le contrat sur la plateforme."; display: block; font: 18px sans-serif; padding: 40px; } }
body.sans-impression * { visibility: hidden !important; }

/* Annexe 1 : lignes du bon de commande (écran Chantier) : intitulé sur toute la largeur, puis mesures, prix et suppression */
fieldset.annexe-saisie { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 14px 8px; margin: 0 0 14px; }
fieldset.annexe-saisie legend { font: 600 14px Inter, sans-serif; color: var(--ink-2); padding: 0 6px; }
.ligne-annexe { display: grid; grid-template-columns: 24px minmax(0, 1fr) 120px auto; gap: 6px 8px; align-items: center; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ligne-annexe .n { grid-row: 1 / span 2; font-weight: 700; color: var(--ink-2); text-align: center; align-self: start; padding-top: 14px; }
.ligne-annexe input[name^="l_intitule_"] { grid-column: 2 / 5; }
.ligne-annexe input[name^="l_mesures_"] { grid-column: 2; }
.ligne-annexe input[name^="l_prix_"] { grid-column: 3; }
.ligne-annexe .suppr-ligne { grid-column: 4; padding: 0 12px; font-size: 14px; }
.ligne-annexe input { width: 100%; min-width: 0; min-height: 48px; font: 400 16px Inter, sans-serif; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.ligne-annexe input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.controle-annexe { margin: 6px 0 10px; font-weight: 600; }

/* ---- vues Fiches / Liste / Kanban, tri et filtres, archivage (26/10) ---- */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.onglet { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink-2); font: 600 15px Inter, sans-serif; text-decoration: none; }
.onglet[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.barre-outils .champ { flex: 1 1 200px; }
.barre-outils select { min-height: 48px; font: 400 16px Inter, sans-serif; padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.bouton.discret { background: transparent; border-color: var(--line-2); color: var(--muted); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defile { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
table.liste { width: 100%; border-collapse: collapse; font-size: 15px; }
table.liste th, table.liste td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.liste thead th { font: 700 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--wash); }
table.liste td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
table.liste td.actions { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 0; }
table.liste td.actions form { margin: 0; }
.kanban { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 12px; }
.colonne { flex: 0 0 280px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px; }
.colonne h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 10px; }
.colonne h2 .n { background: var(--card); border-radius: 999px; padding: 1px 9px; font: 600 13px Inter, sans-serif; }
.pile { display: flex; flex-direction: column; gap: 10px; }
.pile .vide { color: var(--muted); font-size: 14px; margin: 0; }
.fiche.compacte { padding: 12px 12px 10px; }
.fiche.compacte h3 { font-size: 16px; }
.fiche.compacte .v { font-size: 20px; }
.fiche.compacte .actions { display: flex; flex-direction: column; gap: 6px; }
.action-masse { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; }
.action-masse .sous { margin: 0; }
.mail-apercu { white-space: pre-wrap; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px; font: 400 15px/1.5 Inter, sans-serif; }
.bouton.sep { margin-top: 14px; }
.case { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font: 600 15px Inter, sans-serif; }
.case input { width: 22px; height: 22px; margin-top: 2px; }

/* ---- barre de tri et filtres : carte colorée, boutons alignés sur les champs (26/10) ---- */
.barre-outils { position: relative; align-items: flex-end; gap: 12px 14px; padding: 18px 18px 16px; margin: 4px 0 14px; background: linear-gradient(180deg, var(--k1t) 0, var(--card) 85%);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1), var(--glow); overflow: hidden; }
.barre-outils::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.barre-outils .champ { margin: 0; flex: 1 1 200px; }
.barre-outils .champ .lib { color: var(--k1x); }
.barre-outils input, .barre-outils select { height: 48px; box-sizing: border-box; }
.barre-outils .bouton { height: 48px; margin: 0; flex: 0 0 auto; }
.barre-outils button.bouton { background: var(--grad); color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 4px 14px rgba(168, 85, 247, .28); }
.barre-outils button.bouton:hover { filter: brightness(1.06); }
.barre-outils a.bouton { background: var(--card); color: var(--k2x); border-color: #DDC8FB; }
.barre-outils a.bouton:hover { background: var(--k2t); }
.onglet[aria-current="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(168, 85, 247, .25); }
.onglet:hover { border-color: var(--k2); }

/* ---- suivi des envois (28/10/2026) : fiche + chronologie + pastilles, charte violet #A855F7, dégradé rose→violet→bleu ---- */
.logotexte { font: 700 22px "Space Grotesk", Inter, sans-serif; letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.suivi h1 { font: 700 26px "Space Grotesk", Inter, sans-serif; margin: 8px 0 16px; }
.suivi .mono { font-family: ui-monospace, Menlo, monospace; font-size: .8em; color: var(--muted); }
.sig-suivi { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sig-suivi h2 { margin: 0; font: 600 18px "Space Grotesk", Inter, sans-serif; flex: 1 1 260px; }
.pastille { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font: 600 13px Inter, sans-serif;
  background: var(--wash); color: var(--ink-2); border: 1px solid var(--line-2); }
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; }
.pastille.s-signe { background: var(--ok-b); color: var(--ok-t); border-color: transparent; }
.pastille.s-page_vue { background: var(--k2t); color: var(--k2x); border-color: transparent; }
.pastille.s-ouvert { background: var(--k2t); color: var(--k2x); border: 1px dashed var(--k2); }
.pastille.s-delivre { background: var(--k4t); color: var(--k4x); border-color: transparent; }
.pastille.s-envoye { background: var(--k1t); color: var(--k1x); border-color: transparent; }
.pastille.s-rejete, .pastille.s-refuse, .pastille.s-revoque { background: var(--urg-b); color: var(--urg-t); border-color: transparent; }
.pastille.s-expire { background: var(--att-b); color: var(--att-t); border-color: transparent; }
.chrono { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 3px solid transparent; border-image: linear-gradient(180deg, #EC4899, #A855F7 50%, #3B82F6) 1; }
.chrono-ligne { position: relative; padding: 6px 0 14px 18px; }
.chrono-ligne .pt { position: absolute; left: -23px; top: 11px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); border: 3px solid var(--k2); }
.chrono-ligne.e-signe .pt { border-color: var(--ok-t); background: var(--ok-t); }
.chrono-ligne.e-rejete .pt, .chrono-ligne.e-revoque .pt { border-color: var(--urg-t); }
.chrono-ligne.e-ouvert .pt, .chrono-ligne.e-mdn .pt { border-style: dashed; }
.chrono-ligne .fiab { font-size: 13px; color: var(--muted); }
.liste-suivi { list-style: none; padding: 0; display: grid; gap: 8px; }