/* Elevora CRM — agents.css
   Administration → Agents commerciaux (25/09/2026, js/45-agents-commerciaux.js) : la liste des agents,
   le suivi par agent, et l'assistant en étapes de la fiche d'un agent. Refonte de la MISE EN PAGE, pas
   de la charte : uniquement les jetons de css/elevora.css, dans les deux thèmes ; chaque texte coloré
   est un couple déjà vérifié à 4,5:1 (pastilles sur leur fond teinté, --accent sur --bg2).
   Modèle : une liste d'enregistrements HubSpot — des filets horizontaux plutôt qu'une grille, des
   libellés de colonnes discrets, le nom en lien, les états en pastilles, une seule action par ligne.
   Tout tient dans 320 px : les tableaux défilent dans leur cadre, jamais la page. */

/* ── En-tête de la page ─────────────────────────────────────────────────────────────────── */
.agt-page{display:flex;flex-direction:column;gap:var(--s4)}
.agt-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3) var(--s5)}
.agt-tete-txt{flex:1 1 280px;min-width:0}
.agt-titre{margin:0 0 4px}
.agt-sous{margin:0;font-size:13px;line-height:1.55;color:var(--text2);max-width:78ch}
.agt-tete-actions .btn{gap:8px}
.agt-aide-page{margin-top:-6px}
.agt-aide-page summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;list-style:none;font:600 12.5px var(--font);color:var(--text2);border-radius:var(--rs)}
.agt-aide-page summary::-webkit-details-marker{display:none}
.agt-aide-page summary::before{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 3px 0 2px;transition:transform .18s}
.agt-aide-page[open] summary::before{transform:rotate(45deg);margin-bottom:3px}
.agt-aide-page summary:hover{color:var(--text)}
.agt-aide-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.agt-aide-corps{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px;padding:12px 16px;border-left:1px solid var(--border2);font-size:13px;line-height:1.6;color:var(--text2);max-width:92ch}
.agt-aide-corps p{margin:0}

/* Les chiffres de la page : une ligne typographique dans une carte, comme l'en-tête de la fiche client. */
.agt-chiffres{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin:0;padding:var(--s4) var(--s5);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl)}
.agt-chiffre{display:flex;flex-direction:column;gap:2px;min-width:0}
.agt-chiffre dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.agt-chiffre dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.agt-chiffre-v{font:700 22px/1.2 var(--mono);color:var(--text)}
.agt-chiffre-note{font-size:12px;color:var(--text3)}

/* ── La liste ───────────────────────────────────────────────────────────────────────────── */
.agt-cadre{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl)}
.agt-liste{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.agt-liste thead th{padding:10px 14px;text-align:left;vertical-align:bottom;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap}
.agt-liste thead th:first-child{border-top-left-radius:var(--rl)}
.agt-liste thead th:last-child{border-top-right-radius:var(--rl)}
.agt-liste tbody th,.agt-liste tbody td{padding:14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);font-weight:400;color:var(--text)}
.agt-liste tbody tr:last-child>*{border-bottom:0}
.agt-liste tbody tr:hover>*{background:var(--bg3)}
.agt-qui{display:flex;align-items:center;gap:12px;min-width:200px}
.agt-qui-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.agt-nom{padding:0;min-height:24px;border:0;background:none;font:600 14px var(--font);color:var(--accent);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.agt-nom:hover{text-decoration-color:currentColor}
.agt-nom:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.agt-nom-texte{font:600 14px var(--font);color:var(--text)}
.agt-contact{font-size:12px;color:var(--text3);overflow-wrap:anywhere}
.agt-liste .agt-fort,.agt-liste .agt-leger,.agt-liste .agt-taux,.agt-liste .agt-taux-2{display:block}
.agt-fort{font-weight:500;color:var(--text)}
.agt-leger{font-size:12px;line-height:1.45;color:var(--text3)}
.agt-coupe{overflow-wrap:anywhere}
.agt-taux{font:700 18px/1.2 var(--mono);color:var(--text)}
.agt-taux-2{margin-top:3px;font-size:12px;font-weight:600;color:var(--text2)}
.agt-pile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.agt-pile .rel-etats{margin-top:0}
.agt-inactif .agt-avatar{opacity:.55}
.agt-inactif .agt-nom{color:var(--text2)}

/* L'avatar : les initiales sur la teinte de l'agent. */
.agt-avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font);letter-spacing:.02em}
.agt-avatar-l{flex-basis:48px;width:48px;height:48px;border-radius:14px;font-size:16px}
.agt-t-accent{background:var(--glow);color:var(--accent)}
.agt-t-green{background:var(--green-bg);color:var(--green)}
.agt-t-amber{background:var(--amber-bg);color:var(--amber)}
.agt-t-pink{background:var(--pink-bg);color:var(--pink)}

/* Les pastilles : un point (la forme) et un texte (le sens), jamais la couleur seule. */
.agt-pas{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.agt-pas::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.agt-pas-vert{background:var(--green-bg);color:var(--green)}
.agt-pas-ambre{background:var(--amber-bg);color:var(--amber)}
.agt-pas-rouge{background:var(--red-bg);color:var(--red)}
.agt-pas-bleu{background:var(--blue-bg);color:var(--blue)}
.agt-pas-neutre{background:var(--bg4);color:var(--text2)}
.agt-lien-action{padding:0;min-height:24px;border:0;background:none;font:600 12.5px var(--font);color:var(--accent);text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.agt-lien-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.agt-col-act{width:1%;white-space:nowrap;text-align:right!important}
.agt-menu-btn{gap:6px}
.agt-menu-btn[aria-expanded="true"]{background:var(--bg3);color:var(--text)}
/* La fiche d'un agent (js/58) : son avatar à côté de son nom, comme dans la liste. */
.agt-fiche-id{display:flex;align-items:center;gap:14px;min-width:0}
.agt-fiche-id .adm-h{margin-bottom:2px}
.agt-fiche-id .pr-note{margin:0}
.agt-vide{display:flex;align-items:center;gap:16px;padding:24px;border:1px dashed var(--border2);border-radius:var(--rl);color:var(--text2);font-size:13px}
.agt-vide svg{flex:0 0 auto;color:var(--accent)}
.agt-vide p{margin:0}

/* ── Le suivi par agent ─────────────────────────────────────────────────────────────────── */
.agt-suivi{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}
.agt-suivi-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3) var(--s5)}
.agt-suivi-txt{flex:1 1 320px;min-width:0}
.agt-h3{margin:0 0 4px;font:600 16px var(--font-display);color:var(--text)}
.agt-periode{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.agt-periode .ag-champ{min-width:0}
.agt-periode .fsel,.agt-periode .fi{width:auto;max-width:100%}
.agt-periode-dates{margin:0 0 8px;font:500 12.5px var(--mono);color:var(--text3)}
#agt-suivi-zone{display:flex;flex-direction:column;gap:var(--s4)}
/* Les totaux (« Suivi par agent », « Ses chiffres », « Vos chiffres ») : le style partagé des
   chiffres (.chiffres dans css/elevora.css, [P1] 02/10/2026 point 3) — des cases espacées dans un
   ensemble au lieu des filets de 1 px, plus de chiffres en chasse fixe ni de libellés en capitales. */
.agt-kpi-fort dd{color:var(--accent)}
.agt-liste .agt-n{text-align:right;white-space:nowrap}
/* Des intitulés de chiffres qui passent sur deux lignes : sinon le tableau déborde de son cadre dès
   1 440 px (mesuré : 1 364 px de tableau pour 1 098 px de cadre, barre latérale déduite). */
.agt-suivi-table thead th,.agt-suivi-table thead th.agt-n{white-space:normal;line-height:1.35;min-width:84px}
.agt-liste td.agt-n .agt-leger{white-space:normal;min-width:120px}
.agt-suivi-table .agt-col-act .btn{white-space:normal;min-width:118px;max-width:132px;line-height:1.3;text-align:center;justify-content:center}
.agt-suivi-table td.agt-n{font:500 13.5px var(--mono)}
.agt-suivi-table .agt-qui{min-width:170px}
.agt-montant{display:block;font-family:var(--mono)}
.agt-du{font-size:14.5px;font-weight:700;color:var(--text)}
.agt-barre{display:block;width:100%;min-width:72px;height:4px;margin-top:7px;border-radius:2px;background:var(--bg4);overflow:hidden}
.agt-barre>span{display:block;height:100%;border-radius:2px;background:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   L'ASSISTANT « Nouvel agent commercial » — une étape par écran
   Même famille que la fenêtre de création de l'agenda (.ag-ov, .ag-fenetre, pastilles, champs
   facultatifs en pointillé), ancrée en haut : d'une étape à l'autre la hauteur change, et centrée,
   la fenêtre sauterait sous le pointeur.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
#agt-assistant-ov{align-items:flex-start}
.agw{--ag-nat:var(--accent);--ag-nat-bg:var(--glow);width:min(700px,100%);margin-top:4vh;max-height:calc(96vh - 32px)}
@media (max-height:720px){ .agw{margin-top:0;max-height:calc(100vh - 32px)} }
.agw-tete{padding:22px 26px 0;border-bottom:1px solid var(--border)}
.agw-entete{display:flex;align-items:center;gap:14px}
.agw-tete-ico{flex:0 0 48px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--glow);color:var(--accent)}
.agw-titres{flex:1;min-width:0}
.agw-titres h2{margin:0;font:600 21px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.agw-resume{margin:3px 0 0;min-height:1.5em;font-size:13px;line-height:1.5;color:var(--text2);overflow-wrap:anywhere}

/* Le fil d'étapes : le numéro dans un cercle, coché une fois l'étape remplie ; l'étape en cours a son
   cercle cerclé d'accent et son nom en gras (deux indices de forme, en plus de aria-current). */
.agw-fil{margin-top:16px}
.agw-etapes{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.agw-etapes li{flex:1 1 0;min-width:0}
.agw-etape{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 8px 10px;border:0;border-radius:8px 8px 0 0;background:none;font:500 12.5px var(--font);color:var(--text3);text-align:left}
button.agw-etape{cursor:pointer;color:var(--text2)}
button.agw-etape:hover{background:var(--bg3);color:var(--text)}
button.agw-etape:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.agw-cour{color:var(--text);font-weight:700}
.agw-num{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-input);background:var(--bg2);font:700 11.5px var(--mono);color:var(--text2)}
.agw-faite .agw-num{border-color:var(--accent);background:var(--glow);color:var(--accent)}
.agw-cour .agw-num{border:2px solid var(--accent);background:var(--glow);color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.agw-etape-lib{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agw-progression{position:relative;height:2px;margin:0 -26px -1px}
.agw-progression span{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* Le corps : une étape à la fois, qui entre dans le sens de la marche. */
.agw-corps{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 26px 10px}
.agw-panneau{display:flex;flex-direction:column;gap:18px}
.agw-corps[data-sens="avant"] .agw-panneau:not([hidden]){animation:agwAvant .34s cubic-bezier(.16,1,.3,1)}
.agw-corps[data-sens="arriere"] .agw-panneau:not([hidden]){animation:agwArriere .34s cubic-bezier(.16,1,.3,1)}
@keyframes agwAvant{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes agwArriere{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
.agw-p-tete{display:flex;align-items:flex-start;gap:14px}
.agw-p-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--glow);color:var(--accent)}
.agw-p-titres{min-width:0}
.agw-h{margin:0;font:600 18px/1.3 var(--font-display);color:var(--text)}
.agw-h:focus{outline:none}
.agw-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--rs)}
.agw-kicker{display:block;margin-bottom:2px;font:700 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.agw-intro{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--text3);max-width:62ch}

/* Les champs : une grille de six colonnes (moitié par défaut, tiers, deux tiers, pleine largeur). */
.agw-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 16px;align-items:start}
.agw-champ{grid-column:span 3;display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.agw-large{grid-column:1 / -1}
.agw-tiers{grid-column:span 2}
.agw-2tiers{grid-column:span 4}
.agw-lib{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0;font:600 12.5px var(--font);color:var(--text2)}
.agw-requis{padding:1px 7px;border-radius:999px;background:var(--glow);color:var(--accent);font:600 10.5px var(--font);letter-spacing:.03em}
.agw-aide{margin:0;font-size:11.5px;line-height:1.45;color:var(--text3)}
.agw-note{margin:0;padding:8px 12px;border-radius:var(--r);background:var(--bg3);font-size:12px;line-height:1.5;color:var(--text2)}
.agw-choix>legend{margin-bottom:8px}
/* Facultatif : le contour en pointillé et le libellé atténué ; au focus, le champ reprend l'allure pleine. */
.agw-fac>.agw-lib{font-weight:500;color:var(--text3)}
.agw .agw-fac .fi,.agw .agw-fac .fsel,.agw .agw-fac .fta{background:transparent;border-style:dashed}
.agw .agw-fac .fi:focus,.agw .agw-fac .fsel:focus,.agw .agw-fac .fta:focus{border-style:solid;background:var(--bg3)}
.agw .fi[aria-invalid="true"],.agw .fsel[aria-invalid="true"]{border:1px solid var(--red)}
.agw-suffixe{position:relative;display:flex;align-items:center}
.agw-suffixe .fi{padding-right:32px}
.agw-suffixe>span{position:absolute;right:12px;font:600 13px var(--font);color:var(--text3);pointer-events:none}
.agw .ag-pil-coche{color:var(--accent)}

/* Le récapitulatif — refait le 02/10/2026 (brief v9, point 2 : « trop d'informations d'un coup »).
   L'essentiel en tête (nom, type, taux, état du dossier), le manque en une phrase, puis les
   rubriques sans cadre, séparées d'un filet : moins de boîtes, plus d'air entre les blocs. */
.agw-recap{grid-column:1 / -1;display:flex;flex-direction:column;gap:20px}
.agw-essentiel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:16px 18px;border-radius:var(--rl);background:var(--bg3)}
.agw-ess-id{min-width:0;flex:1 1 240px}
.agw-ess-id p{margin:0}
.agw-ess-nom{font:600 19px/1.3 var(--font-display);color:var(--text);overflow-wrap:anywhere}
.agw-ess-id .agw-ess-sous{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--text2)}
.agw-ess-id .agw-ess-contact{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--text3);overflow-wrap:anywhere}
.agw-ess-chiffres{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px;margin:0}
.agw-ess-c{min-width:0}
.agw-ess-c dt{font-size:12px;font-weight:500;color:var(--text2);margin:0 0 4px}
.agw-ess-c dd{margin:0;min-height:26px;display:flex;align-items:center}
.agw-ess-v{font:600 20px/1.2 var(--font-display);color:var(--text);font-variant-numeric:tabular-nums}
/* Ce qui manque : une phrase et une action, sur un fond ambre très léger, sans bordure épaisse. */
.agw-manque{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border:1px solid var(--border2);border-radius:var(--r);background:var(--amber-bg)}
.agw-manque p{margin:0;flex:1 1 320px;font-size:13px;line-height:1.55;color:var(--text)}
.agw-manque b{color:var(--amber)}
.agw-recap-etat{margin:0;font-size:13px;line-height:1.5;color:var(--text2)}
.agw-rubriques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 36px}
.agw-rubrique{min-width:0;padding:16px 0 18px;border-top:1px solid var(--border)}
.agw-rubrique-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.agw-rubrique-tete h4{margin:0;font:600 14.5px var(--font);color:var(--text)}
.agw-modifier{display:inline-flex;align-items:center;gap:6px;min-height:var(--cmd-h);padding:4px 12px;border:1px solid var(--border2);border-radius:8px;background:transparent;font:600 13px var(--font);color:var(--text2);cursor:pointer}
.agw-modifier:hover{background:var(--bg3);color:var(--text)}
.agw-modifier:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.agw-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}
.agw-dl>div{min-width:0}
.agw-dl .agw-dl-large{grid-column:1 / -1}
.agw-dl dt{font-size:12.5px;color:var(--text3)}
.agw-dl dd{margin:2px 0 0;font-size:13.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap}
.agw-dl dd.agw-vide{font-weight:400;font-style:italic;color:var(--text3)}
.agw-dl dd.agw-manquant{font-weight:600;color:var(--amber)}
/* Les facultatifs vides : une seule ligne, en retrait, au lieu d'une liste de « Non renseigné ». */
.agw-vides{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--text3)}
.agw-vides-l{font-weight:600}
.agw-dl + .agw-vides{margin-top:14px}

/* L'erreur, au-dessus du pied, dans le conteneur role="alert" déjà présent ; puis le pied. */
.agw-err{margin:0 26px 12px;padding:10px 12px;border-radius:8px;background:var(--red-bg);color:var(--red);font-size:13px}
.agw-err:empty{display:none}
.agw-pied{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg3);border-radius:0 0 16px 16px}
.agw-pied-d{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}
.agw-pied .btn{gap:6px}

@media (prefers-reduced-motion:reduce){
  .agw-corps .agw-panneau:not([hidden]){animation:none!important}
  .agw-progression span,.agt-nom,.agt-aide-page summary::before{transition:none}
}

/* ── Écrans étroits ─────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .agw-recap,.agw-dl{grid-template-columns:minmax(0,1fr)}
  .agw-rubriques{grid-template-columns:minmax(0,1fr);gap:0}
  .agw-essentiel{padding:14px}
}
@media (max-width:560px){
  .agt-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--s3) var(--s4);gap:var(--s3) var(--s4)}
  .agt-chiffre-v{font-size:19px}
  .agt-chiffre-note{font-size:11.5px}
  .agw-tete{padding:16px 16px 0}
  .agw-titres h2{font-size:19px}
  .agw-corps{padding:16px 16px 8px}
  .agw-progression{margin:0 -16px -1px}
  .agw-err{margin:0 16px 10px}
  .agw-grille{grid-template-columns:minmax(0,1fr)}
  .agw-champ,.agw-large,.agw-tiers,.agw-2tiers{grid-column:1 / -1}
  /* Le fil : les numéros seuls, et le nom de l'étape en cours ; les autres noms restent lus. */
  .agw-etapes li{flex:0 0 auto}
  .agw-etapes li:has(.agw-cour){flex:1 1 auto}
  .agw-etape:not(.agw-cour) .agw-etape-lib{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .agw-etape{padding:6px 6px 10px}
}
/* Téléphone : les deux boutons qui font avancer côte à côte, « Annuler » dessous et discret — trois
   boutons empilés mangeaient le tiers de l'écran, et l'étape devait défiler. */
@media (max-width:480px){
  .agw-tete-ico,.agw .agt-avatar-l{display:none}
  .agw-titres h2{font-size:18px}
  .agw-pied{flex-direction:column-reverse;align-items:stretch;gap:6px;padding:10px 12px}
  .agw-pied-d{margin:0;flex-wrap:nowrap}
  .agw-pied-d .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:normal;text-align:center;line-height:1.25;padding-left:8px;padding-right:8px}
  .agw-pied .agw-annuler{align-self:center;border-color:transparent;background:none;min-height:40px}
}

/* ── [V18] 05/10/2026 — Contrat d'apporteur déposé en PDF (fiche d'un agent, js/60b) ──────────
   Le contrat n'est plus généré par le CRM : l'équipe le rédige hors CRM et le dépose ici. Un cadre
   unique : l'état en une phrase (la pastille ne fait que la doubler), les versions déposées, puis
   la zone de dépôt (glisser-déposer pour la souris, bouton pour le clavier). Jetons du CRM seulement,
   couples de couleurs déjà vérifiés à 4,5:1 dans les deux thèmes. */
.cta{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4) var(--s5);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);min-width:0}
.cta-h5{margin:0;font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.cta-statut{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);margin:0;font-size:14px;line-height:1.55;color:var(--text);border-radius:var(--rs)}
.cta-statut > span:last-child{flex:1 1 280px;min-width:0;overflow-wrap:anywhere}
.cta-statut:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta-versions{list-style:none;margin:calc(var(--s2) * -1) 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.cta-version{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.cta-version-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px;overflow-wrap:anywhere}
.cta-version-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s2)}
.cta-motif{font-size:12.5px;line-height:1.45;color:var(--text2)}
.cta-depot{display:flex;flex-direction:column;gap:var(--s3);margin-top:calc(var(--s2) * -1)}
.cta-champ{display:flex;flex-direction:column;gap:4px;max-width:640px}
.cta-champ label{font-size:12.5px;font-weight:600;color:var(--text)}
.cta-champ .fi{width:100%;box-sizing:border-box}
.cta-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s5) var(--s4);text-align:center;border:2px dashed var(--border-input);border-radius:var(--rl);background:var(--bg);transition:border-color .15s,background-color .15s}
.cta-zone-t{margin:0;font:600 14px var(--font);color:var(--text)}
.cta-zone-s{margin:0 0 var(--s2);max-width:60ch;font-size:12.5px;line-height:1.5;color:var(--text2)}
.cta-zone-survol{border-color:var(--accent);background:var(--blue-bg)}
.cta-zone .btn{min-height:var(--cmd-h);max-width:100%;white-space:normal}
.cta-err{margin:0;font-size:13px;line-height:1.5;color:var(--red);overflow-wrap:anywhere}
.cta-err:not(:empty){padding:var(--s3) var(--s4);background:var(--red-bg);border-radius:var(--r)}
/* [V11] 06/10/2026 : « Déposer un contrat déjà signé » (signé hors du CRM) — une phrase d'explication et UN bouton, sous le dépôt à signer. */
.cta-signe-hors{align-items:flex-start;max-width:640px}
.cta-signe-hors .btn{min-height:var(--cmd-h);max-width:100%;white-space:normal}
.cta-signe-hors .ag-aide-champ{margin:0}
.cs-form{display:flex;flex-direction:column;gap:var(--s3)}
.cs-form .ag-champ{margin:0}
.cs-mode{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s2);margin:0;font-size:13.5px;line-height:1.5;color:var(--text)}
@media (max-width:640px){
  .cta{padding:var(--s4)}
  .cta-zone{padding:var(--s4) var(--s3)}
  .cta-zone .btn{min-height:44px;width:100%;justify-content:center}
  .cta-version .btn{min-height:44px}
  .cta-signe-hors .btn{min-height:44px;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .cta-zone{transition:none} }