/* ValdProspect : une seule feuille de style.
   Deux surfaces, deux intentions : le client lit un constat (clair, aere),
   l'operateur agit (rail anthracite, plus dense). Une seule police sans (Figtree),
   des neutres, des boutons noirs ; le vert est la marque et dit « ok », l'ocre
   dit « attend un humain », la brique dit « arrete ». Pas de serif decoratif,
   pas d'italique d'accent, pas de capitales espacees : on se lit comme un outil. */

:root{
  --papier:#f7f7f6; --papier-2:#f0f0ee; --carte:#ffffff; --carte-2:#fafafa;
  --encre:#111214; --encre-2:#3a3d42; --muet:#6b7079; --discret:#868b93;
  --ligne:#e8e8e6; --ligne-forte:#d5d6d3;
  --action:#111214; --action-survol:#2b2d31; --sur-action:#ffffff;
  --foret:#1e5a41; --foret-vif:#1f8a5b; --foret-pale:#e6f4ec; --foret-texte:#17613f; --sur-foret:#ffffff;
  --nuit:#121316; --nuit-texte:#c9cbd0; --nuit-muet:#80858e; --menthe:#6fcf97;
  --ocre:#a35a0a; --ocre-pale:#fdf1dc;
  --brique:#b42318; --brique-pale:#fdecea;
  --ardoise:#4b5563; --ardoise-pale:#f0f1f3;
  --ombre:0 1px 2px rgb(16 17 20/.05);
  --ombre-2:0 1px 2px rgb(16 17 20/.04),0 10px 24px -10px rgb(16 17 20/.16);
  --r:12px;
  --serif:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --papier:#0e0f11; --papier-2:#16171a; --carte:#17181b; --carte-2:#1c1d21;
  --encre:#ededee; --encre-2:#c5c7cc; --muet:#8f949c; --discret:#767a82;
  --ligne:#26272b; --ligne-forte:#34363b;
  --action:#ededee; --action-survol:#ffffff; --sur-action:#111214;
  --foret:#6fcf97; --foret-vif:#5cc08a; --foret-pale:#13271c; --foret-texte:#7fd7a4; --sur-foret:#0b1611;
  --nuit:#0b0c0e;
  --ocre:#f0b35a; --ocre-pale:#2b2011;
  --brique:#f07a6a; --brique-pale:#33191a;
  --ardoise:#a8b0bb; --ardoise-pale:#22242a;
  --ombre:0 1px 0 rgb(0 0 0/.3); --ombre-2:0 12px 30px -12px rgb(0 0 0/.7);
  color-scheme:dark;
}}

/* ---------- Socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ligne-forte) transparent}
body{margin:0;background:var(--papier);color:var(--encre);font:15px/1.6 var(--sans);caret-color:var(--foret-vif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--foret);color:var(--sur-foret)}
a{color:var(--foret-texte);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--foret-vif)}
h1,h2,h3{margin:0;font-weight:600}
h1{font:650 32px/1.15 var(--sans);text-wrap:balance}
h2{font:600 20px/1.3 var(--sans);margin:44px 0 12px}
h3{font:600 14px/1.35 var(--sans);margin:20px 0 10px;color:var(--encre)}
p{margin:0 0 .8em}
strong,b{font-weight:600}
em{font-style:normal}
code{font:12.5px var(--mono);background:var(--papier-2);border:1px solid var(--ligne);padding:1px 6px;border-radius:6px}
.mono{font-family:var(--mono);font-size:.86em}
.num{font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.petit{width:15px;height:15px}
.ic.grand{width:22px;height:22px}
.logo{width:28px;height:28px;flex:none}
.logo-fond{fill:#1e5a41}

/* ---------- Coquille : rail + scene ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:linear-gradient(to right,var(--papier-2) 248px,transparent 248px)}
.op .app{background:linear-gradient(to right,var(--nuit) 248px,transparent 248px)}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:clamp(12px,2vh,22px);padding:16px 12px 10px;background:var(--papier-2);border-right:1px solid var(--ligne);overflow-y:auto}
.marque{display:flex;align-items:center;gap:10px;padding:0 8px;color:var(--encre);text-decoration:none}
.marque span{font:650 17px/1 var(--sans)}
.marque:hover{color:var(--encre)}
.nav{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px)}
.nav-groupe{display:flex;flex-direction:column;gap:1px}
.nav-titre{padding:0 10px 2px;font-size:12px;font-weight:500;color:var(--muet)}
.nav a{display:flex;align-items:center;gap:10px;padding:clamp(4px,.55vh,6px) 10px;border-radius:8px;color:var(--encre-2);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s,color .15s}
.nav a .ic{color:var(--muet)}
.nav a:hover{background:rgb(0 0 0/.045);color:var(--encre)}
.nav a.actif{background:var(--carte);color:var(--encre);box-shadow:var(--ombre),inset 0 0 0 1px var(--ligne)}
.nav a.actif .ic{color:var(--encre)}
.rail-pied{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.mode{display:flex;gap:8px;align-items:flex-start;padding:3px 10px;font-size:12px;line-height:1.35;color:var(--muet)}
.mode small{display:block;font-size:12px}
.mode-identite{align-items:center;padding:2px 10px}
.mode-identite .pouls{margin-top:0}
.mode-identite small{display:none}
.mode strong{display:block;font-size:12.5px;color:var(--encre-2)}
.pouls{flex:none;width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--ocre)}
.qui{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:8px;padding:10px 4px 2px 6px;border-top:1px solid var(--ligne)}
.qui-nom{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.qui-nom strong,.qui-nom small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qui-nom strong{font-size:13.5px}
.qui-nom small{font-size:12px;color:var(--muet)}
.qui button.fantome{width:32px;height:32px;padding:0;margin:0;display:inline-grid;place-items:center;border-radius:8px}
.qui button.fantome .ic{color:inherit}
.avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;font:600 12px/1 var(--sans);letter-spacing:.02em;background:hsl(var(--teinte,150) 30% 90%);color:hsl(var(--teinte,150) 40% 26%)}
.avatar.grand{width:44px;height:44px;border-radius:11px;font-size:15px}
.avatar.mini{width:22px;height:22px;border-radius:6px;font-size:9.5px}

/* Ecran peu haut (portable 13 pouces, fenetre reduite) : le rail se serre encore pour que tout tienne sans defiler. */
@media (min-width:901px) and (max-height:820px){
  .rail{gap:10px;padding:12px 10px 8px}
  .nav{gap:6px}
  .nav a{padding:3px 10px;font-size:13.5px}
  .nav-titre{padding-bottom:1px}
  .mode small{display:none}
  .qui{margin-top:4px;padding-top:6px}
}

/* Le rail du cockpit est anthracite : on voit tout de suite de quel cote on est. */
.op .rail{background:var(--nuit);border-right-color:transparent}
.op .marque,.op .marque:hover{color:#f3f4f6}
.op .nav-titre{color:var(--nuit-muet)}
.op .nav a{color:var(--nuit-texte)}
.op .nav a .ic{color:var(--nuit-muet)}
.op .nav a:hover{background:rgb(255 255 255/.06);color:#fff}
.op .nav a.actif{background:rgb(255 255 255/.09);color:#fff;box-shadow:none}
.op .nav a.actif .ic{color:var(--menthe)}
.op .mode{color:var(--nuit-muet)}
.op .mode strong{color:var(--nuit-texte)}
.op .qui{border-top-color:rgb(255 255 255/.1)}
.op .qui-nom strong{color:#f3f4f6}
.op .qui-nom small{color:var(--nuit-muet)}
.op .qui button.fantome{color:var(--nuit-texte)}
.op .qui button.fantome:hover{background:rgb(255 255 255/.08);color:#fff}

.scene{min-width:0}
main{max-width:1120px;margin:0 auto;padding:40px 48px 96px}
main.large{max-width:1320px}

/* ---------- En-tete de page et sections ---------- */
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--ligne)}
.tete > div:first-child{max-width:740px}
.surtitre{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--muet)}
.sous{margin:10px 0 0;max-width:66ch;font-size:15px;line-height:1.55;color:var(--muet)}
.tete-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.section-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:44px 0 12px}
.section-tete h2{margin:0}
.section-tete .lien{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;text-decoration:none}
.compte{margin-left:10px;font:500 13px var(--sans);letter-spacing:0;color:var(--muet)}

/* ---------- Cartes, grilles ---------- */
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);padding:20px 22px;box-shadow:var(--ombre)}
.carte > :first-child{margin-top:0}
.carte > :last-child{margin-bottom:0}
.carte-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 14px;margin-bottom:12px}
.carte-tete strong{font-size:15px}
.pile{display:flex;flex-direction:column;gap:12px}
.grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grille.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cote{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
@media (max-width:1180px){.grille.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}.cote{grid-template-columns:1fr}}
@media (max-width:760px){.grille.trois,.grille.quatre,.deux{grid-template-columns:1fr}}

/* ---------- Tuiles chiffrees ---------- */
.tuile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:128px;padding:18px 20px 18px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre);color:inherit;text-decoration:none}
.tuile .libelle{display:flex;align-items:center;gap:7px;padding-right:22px;font-size:13px;font-weight:500;color:var(--muet)}
.chiffre{margin-top:auto;font:650 34px/1.05 var(--sans);font-variant-numeric:tabular-nums}
.chiffre small{margin-left:8px;font:500 13px var(--sans);letter-spacing:0;color:var(--muet)}
.tuile .pied{font-size:12.5px;color:var(--muet)}
.tuile .fleche{position:absolute;top:18px;right:18px;color:var(--discret);transition:transform .15s,color .15s}
a.tuile{transition:box-shadow .15s,border-color .15s}
a.tuile:hover{box-shadow:var(--ombre-2);border-color:var(--ligne-forte);color:inherit}
a.tuile:hover .fleche{transform:translateX(3px);color:var(--encre)}
.tuile.chaude{background:var(--foret);border-color:var(--foret);color:var(--sur-foret)}
.tuile.chaude .libelle,.tuile.chaude .pied,.tuile.chaude .fleche,.tuile.chaude .chiffre small{color:color-mix(in srgb,var(--sur-foret) 72%,transparent)}
.tuile.chaude:hover{color:var(--sur-foret);border-color:var(--foret)}
.tuile.a-traiter{border-color:color-mix(in srgb,var(--ocre) 35%,var(--ligne));background:var(--carte)}
.tuile.a-traiter .chiffre{color:var(--ocre)}
.tuile.calme .chiffre{color:var(--discret)}
.bande-grise{display:flex;align-items:center;gap:20px;margin-top:12px;padding:12px 18px;border:1px dashed var(--ligne-forte);border-radius:var(--r);font-size:13.5px;color:var(--muet)}
.bande-grise .chiffre{margin:0;font-size:26px;color:var(--discret)}
.bande-grise p{margin:0}

/* ---------- Pastilles ---------- */
.etiquette{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:99px;background:var(--ardoise-pale);color:var(--ardoise);font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap}
.etiquette::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.etiquette.nu::before{display:none}
.etiquette.nu{padding-left:9px}
.etiquette.ok,.etiquette.accent{background:var(--foret-pale);color:var(--foret-texte)}
.etiquette.alerte{background:var(--brique-pale);color:var(--brique)}
.etiquette.attente{background:var(--ocre-pale);color:var(--ocre)}
.puces{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Tableaux ---------- */
.tableau{overflow-x:auto;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)}
.table-scroll{max-width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:10px 16px;background:var(--carte-2);border-bottom:1px solid var(--ligne);text-align:left;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--muet)}
td{padding:12px 16px;border-bottom:1px solid var(--ligne);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
.tableau tbody tr:hover td{background:var(--carte-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Un nom qui mène à une fiche se lit comme un nom : souligné au survol seulement. */
td a:has(strong),.dossier .nom a,a.nom-lien{color:var(--encre);text-decoration:none}
td a:has(strong):hover,.dossier .nom a:hover,a.nom-lien:hover{color:var(--encre);text-decoration:underline}
td .preuve{display:block;margin-top:2px}
td.extrait{max-width:46ch;color:var(--encre-2)}
td.motif{min-width:280px}
table.cles td{padding:9px 0;font-size:13.5px}
table.cles td:first-child{padding-right:14px;color:var(--muet)}
table.cles td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Boutons ---------- */
button,.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:1px solid transparent;border-radius:8px;background:var(--action);color:var(--sur-action);font:600 14px/1 var(--sans);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgb(0 0 0/.12);transition:background .15s,border-color .15s,transform .06s}
button:hover,.bouton:hover{background:var(--action-survol);color:var(--sur-action)}
button:active,.bouton:active{transform:translateY(1px)}
button.secondaire,.bouton.secondaire{background:var(--carte);border-color:var(--ligne-forte);color:var(--encre);box-shadow:var(--ombre)}
button.secondaire:hover,.bouton.secondaire:hover{background:var(--carte-2);border-color:var(--discret);color:var(--encre)}
button.danger{background:var(--brique);color:#fff}
button.danger:hover{background:color-mix(in srgb,var(--brique) 86%,#000)}
button.fantome{height:30px;padding:0 10px;background:transparent;border-color:transparent;box-shadow:none;color:var(--muet);font-weight:500;font-size:12.5px}
button.fantome:hover{background:rgb(0 0 0/.05);color:var(--encre)}
button.petit,.bouton.petit{height:32px;padding:0 12px;border-radius:8px;font-size:13px}
button.grand{height:44px;padding:0 20px;border-radius:10px;font-size:15px}
button:disabled,.bouton[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
button:disabled:hover{background:var(--action);color:var(--sur-action)}
:focus-visible{outline:2px solid var(--foret-vif);outline-offset:2px}

/* ---------- Formulaires ---------- */
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--carte);color:var(--encre);font:inherit;font-size:14.5px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muet)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--encre-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--encre) 10%,transparent)}
select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7079' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
textarea{min-height:120px;line-height:1.6;resize:vertical}
textarea.code{font:13px/1.7 var(--mono)}
input[type=radio],input[type=checkbox]{flex:none;width:17px;height:17px;margin:2px 0 0;padding:0;box-shadow:none;accent-color:var(--encre)}
.champ{display:block;margin:0 0 16px}
.champ > span{display:block;margin-bottom:6px;font-size:13px;font-weight:600}
.aide{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muet)}
.rangee{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
form.ligne{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
form.ligne input,form.ligne select{width:auto;max-width:100%}
form.ligne .champ{margin:0;min-width:0;max-width:100%}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.actions .espace{flex:1}
.choix{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--carte);border:1px solid var(--ligne);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.choix + .choix{margin-top:8px}
.choix:hover{border-color:var(--ligne-forte)}
.choix:has(input:checked){border-color:var(--encre-2);background:var(--carte-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--encre) 8%,transparent)}
.choix > span{font-size:13px;line-height:1.5;color:var(--muet)}
.choix strong{display:block;margin-bottom:1px;font-size:14px;color:var(--encre)}
.case{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;cursor:pointer}

/* ---------- Notes, citations, raisonnements ---------- */
.note{display:flex;gap:12px;align-items:flex-start;margin:14px 0;padding:12px 16px;background:var(--carte-2);border:1px solid var(--ligne);border-radius:10px;font-size:14px;line-height:1.55;color:var(--encre-2)}
.note > .ic{margin-top:1px;color:var(--muet)}
.note > div > :last-child{margin-bottom:0}
.note.alerte-note{background:var(--brique-pale);border-color:color-mix(in srgb,var(--brique) 20%,transparent);color:color-mix(in srgb,var(--brique) 70%,var(--encre))}
.note.alerte-note > .ic{color:var(--brique)}
.note.attente-note{background:var(--ocre-pale);border-color:color-mix(in srgb,var(--ocre) 20%,transparent);color:color-mix(in srgb,var(--ocre) 60%,var(--encre))}
.note.attente-note > .ic{color:var(--ocre)}
.note.ok-note{background:var(--foret-pale);border-color:color-mix(in srgb,var(--foret-vif) 20%,transparent)}
.note.ok-note > .ic{color:var(--foret-vif)}
.note.info-brute{font:12.5px/1.6 var(--mono);word-break:break-word}
.libelle{font-size:13px;color:var(--muet)}
.preuve{font-size:12.5px;line-height:1.5;color:var(--muet)}
.preuve a{word-break:break-all}
.citation{margin:12px 0 6px;font:400 15.5px/1.6 var(--sans);color:var(--encre)}
.citation.petite{font-size:14.5px}
.raisonnement{margin:10px 0;padding:12px 16px;background:var(--carte-2);border:1px solid var(--ligne);border-radius:10px;white-space:pre-wrap;font-size:13.5px;line-height:1.65;color:var(--encre-2)}
.raisonnement.lignes{white-space:normal}
.raisonnement.lignes p{margin:0 0 5px}
.raisonnement.lignes p:last-child{margin:0}
.raisonnement b{color:var(--encre)}

/* ---------- Etats vides ---------- */
.vide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 24px;text-align:center;color:var(--muet)}
.vide .rond{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border-radius:12px;background:var(--papier-2);color:var(--muet)}
.vide strong{font:600 16px/1.35 var(--sans);color:var(--encre)}
.vide p{max-width:50ch;margin:0;font-size:14px}

/* ---------- Volets depliables ---------- */
details > summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--encre-2)}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"";width:6px;height:6px;margin:0 2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details[open] > summary::before{transform:rotate(45deg)}
.volet{margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne)}
.volet form{margin-top:14px}

/* ---------- Jauges et barres ---------- */
.jauge{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.jauge i{position:relative;display:block;width:72px;height:6px;overflow:hidden;border-radius:99px;background:var(--papier-2)}
.jauge i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--foret-vif)}
.barre{height:6px;margin:12px 0 10px;overflow:hidden;border-radius:99px;background:var(--papier-2)}
.barre span{display:block;width:var(--v);height:100%;border-radius:inherit;background:var(--foret-vif)}
.barre.douce span{background:var(--ligne-forte)}
.entonnoir{display:flex;gap:3px;height:12px;overflow:hidden;border-radius:99px;background:var(--papier-2)}
.entonnoir span{display:block;width:var(--v);min-width:3px;height:100%}
.s-envoyable{background:var(--foret-vif)}
.s-arbitrage{background:var(--ocre)}
.s-ecarte{background:var(--ligne-forte)}
.s-autre{background:var(--ardoise)}
.legende{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:18px}
.legende div{display:flex;flex-direction:column;gap:2px}
.legende b{font:650 26px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.legende span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muet)}
.legende i{display:inline-block;width:9px;height:9px;border-radius:3px}

/* ---------- Listes de controles (sante d'un domaine, conditions d'un lead) ---------- */
.controles{margin:4px 0 0;padding:0;list-style:none}
.controles li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--ligne);font-size:13.5px}
.controles li:last-child{border-bottom:0}
.controles .cle{display:flex;align-items:center;gap:10px;color:var(--encre-2)}
.controles .val{text-align:right;color:var(--muet)}
.controles-contestation .cle{align-items:flex-start;flex:1}
.controles-contestation .cle .point{margin-top:6px;flex-shrink:0}
.controles-contestation .val{flex:1}
@media(max-width:600px){
  .controles-contestation li{display:block;padding:14px 0;font-size:14px}
  .controles-contestation .val{display:block;text-align:left;margin:6px 0 0 18px}
}
.point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--discret)}
.point.ok{background:var(--foret-vif)}
.point.ko{background:var(--brique)}
.point.attente{background:var(--ocre)}
.point.inconnu{background:transparent;border:1.5px solid var(--discret)}

/* ---------- Fil chronologique ---------- */
.fil{margin:0;padding:0;list-style:none}
.fil li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--ligne)}
.fil li:last-child{border-bottom:0}
.fil time{padding-top:2px;font-size:12.5px;color:var(--muet);font-variant-numeric:tabular-nums}

/* ---------- Accueil ---------- */
.accueil{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:100vh}
.accueil-recit{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding:36px clamp(28px,4.5vw,64px) 40px;background:var(--carte);border-right:1px solid var(--ligne)}
.accueil-recit .marque{flex-wrap:wrap;padding:0}
.accueil-recit .marque small{font-size:13px;color:var(--muet)}
.accueil-recit h1{max-width:19ch;font-size:clamp(34px,3.4vw,48px);font-weight:700;line-height:1.08;color:var(--encre)}
.accueil-chapo{max-width:48ch;margin:22px 0 0;font-size:17px;line-height:1.6;color:var(--encre-2)}
.accueil-chiffres{display:flex;flex-wrap:wrap;gap:22px 48px;margin:0;padding-top:24px;border-top:1px solid var(--ligne)}
.accueil-chiffres div{display:flex;flex-direction:column-reverse;gap:4px}
.accueil-chiffres dd{margin:0;font:700 34px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--encre)}
.accueil-chiffres dt{font-size:13px;color:var(--muet)}
.accueil-entrees{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:640px;padding:56px clamp(24px,5vw,72px)}
.accueil-entrees h2{margin:0;font-size:26px}
.groupe-titre{margin:28px 0 10px;font-size:13px;font-weight:500;color:var(--muet)}
.entree{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:8px;padding:12px 14px;background:var(--carte);border:1px solid var(--ligne);border-radius:12px;box-shadow:var(--ombre);transition:border-color .15s,box-shadow .15s}
.entree:hover{border-color:var(--ligne-forte);box-shadow:var(--ombre-2)}
.entree button::after{content:"";position:absolute;inset:0;border-radius:12px}
.entree-texte{display:flex;flex-direction:column;flex:1;min-width:0}
.entree-texte strong{font-size:15px}
.entree-texte .etiquette{align-self:flex-start;margin-top:6px}
.entree-texte small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--muet)}
.entree-op{background:var(--nuit);border-color:var(--nuit);color:#f3f4f6}
.entree-op small{color:var(--nuit-muet)}
.entree-op button{background:#fff;color:#111214}
.entree-op button:hover{background:#e9eaec;color:#111214}
.accueil-honnete{display:flex;align-items:center;gap:10px;margin:24px 0 0;font-size:13px;color:var(--muet)}
.accueil-honnete .pouls{margin:0}
@media (max-width:980px){.accueil{grid-template-columns:1fr}.accueil-recit{border-right:0;border-bottom:1px solid var(--ligne)}}

/* ---------- Page publique (opposition) ---------- */
.public{display:grid;place-items:center;min-height:100vh;padding:48px 20px}
.public-carte{width:100%;max-width:580px}
.public-marque{display:flex;align-items:center;gap:10px;margin-bottom:32px;font-size:13px;color:var(--muet)}
.public-marque .logo{width:24px;height:24px}
.public h1{font-size:34px}
.public form{margin:26px 0 18px}
.public .actions{margin-top:20px}
.sceau{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border-radius:14px;background:var(--foret-pale);color:var(--foret-vif)}
.public-texte{margin-top:16px;font-size:17px;line-height:1.6}
.public-long{place-items:start center}
.public-long h2{margin-top:36px;font-size:20px}
.public-liste{margin:16px 0 0;padding-left:20px;font-size:17px;line-height:1.6}
.public-liste li{margin-top:6px}

/* ---------- Onboarding ---------- */
.parcours{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.parcours-cote{position:sticky;top:24px}
.cibles-proposees{border:0;padding:0;margin:20px 0;min-width:0}
.cibles-proposees legend{font-weight:600;margin-bottom:12px}
.cible-proposee{display:block;padding:16px;margin-bottom:12px;border:1px solid var(--ligne-forte);border-radius:var(--r);cursor:pointer}
.cible-proposee:has(input:checked){border-color:var(--foret);background:var(--foret-pale)}
.cible-proposee:focus-within{outline:2px solid var(--foret);outline-offset:2px}
.cible-proposee input{accent-color:var(--foret);margin-right:7px}
.cible-proposee p{margin:8px 0 0}
#cible{scroll-margin-top:32px}
.progression-tete{display:flex;justify-content:space-between;align-items:baseline}
.progression-tete strong{font:650 18px var(--sans)}
.progression-etapes > summary{display:flex;width:100%}
.progression-etapes > summary .libelle{flex:1}
.progression{height:6px;margin:10px 0 12px;overflow:hidden;border-radius:99px;background:var(--papier-2)}
.progression span{display:block;width:var(--v);height:100%;border-radius:inherit;background:var(--foret-vif)}
.etapes{margin:0;padding:0;list-style:none}
.etapes a{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;color:var(--encre-2);text-decoration:none;font-size:14px}
.etapes a:hover{background:var(--carte-2);color:var(--encre)}
.etapes li:not(:last-child) a::after{content:"";position:absolute;left:22px;top:36px;bottom:-8px;width:1.5px;background:var(--ligne)}
.etapes .pastille{z-index:1;display:grid;place-items:center;flex:none;width:26px;height:26px;border:1.5px solid var(--ligne-forte);border-radius:50%;background:var(--carte);font-size:12px;font-weight:600;color:var(--muet)}
.etapes li.fait .pastille{background:var(--foret-vif);border-color:var(--foret-vif);color:var(--sur-foret)}
.etapes li.fait a::after{background:var(--foret-vif)}
.etapes li.courante a{background:var(--carte-2);box-shadow:inset 0 0 0 1px var(--ligne);color:var(--encre);font-weight:600}
.etapes li.courante .pastille{border-color:var(--encre);color:var(--encre)}
.etape{padding:28px 30px}
.etape h2{margin:0 0 8px;font-size:22px}
.etape .explication{max-width:62ch;margin-bottom:22px;color:var(--muet)}
.contrat{overflow:hidden;background:var(--carte);border:1px solid var(--ligne);border-radius:12px}
.contrat + .contrat{margin-top:12px}
.contrat-corps{padding:16px 18px;font-size:14px;line-height:1.6;color:var(--encre-2)}
.contrat-corps strong{display:block;margin-bottom:6px;font:600 16px/1.35 var(--sans);color:var(--encre)}
.contrat.risque{border-color:color-mix(in srgb,var(--brique) 28%,var(--ligne))}
.contrat.risque .contrat-corps{background:linear-gradient(180deg,var(--brique-pale),transparent)}
.contrat-signe{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--carte-2);border-top:1px solid var(--ligne);font-size:14px;font-weight:500;cursor:pointer}
.contrat-signe input{margin:0}
.contrat-signe .tampon{margin-left:auto;font:500 13px var(--sans);color:var(--foret-texte)}

/* ---------- Arbitrage : une file de dossiers ---------- */
.dossiers{display:flex;flex-direction:column;gap:6px}
.dossier{overflow:hidden;background:var(--carte);border:1px solid var(--ligne);border-radius:12px;box-shadow:var(--ombre)}
.dossier > summary{display:grid;grid-template-columns:30px minmax(0,1.5fr) minmax(0,1.1fr) 150px 20px;align-items:center;gap:16px;width:100%;padding:12px 18px;color:inherit;font-weight:400}
.dossier > summary::before{display:none}
.dossier > summary:hover{background:var(--carte-2)}
.dossier[open]{box-shadow:var(--ombre-2);border-color:var(--ligne-forte)}
.dossier[open] > summary{background:var(--carte-2);border-bottom:1px solid var(--ligne)}
.dossier .rang{font:600 13px var(--sans);font-variant-numeric:tabular-nums;color:var(--muet)}
.dossier .identite{display:flex;flex-direction:column;min-width:0}
.dossier .nom{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;color:var(--encre)}
.dossier .chevron{color:var(--discret);transition:transform .2s}
.dossier[open] .chevron{transform:rotate(180deg)}
.dossier-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:22px 24px 26px}
.dossier-corps h3:first-child{margin-top:0}
.routes{margin:0;padding:0;list-style:none}
.routes li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;font-size:13.5px}

/* ---------- Gabarit : editeur et apercu ---------- */
.editeur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)}
.editeur-pane{display:flex;flex-direction:column;min-width:0}
.editeur-pane + .editeur-pane{border-left:1px solid var(--ligne);background:var(--carte-2)}
.editeur-barre{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;border-bottom:1px solid var(--ligne);font-size:12.5px;font-weight:500;color:var(--muet)}
.editeur-barre .vars{font:500 11.5px var(--mono);color:var(--muet)}
.editeur textarea{flex:1;min-height:440px;padding:18px;border:0;border-radius:0;background:transparent;box-shadow:none}
.apercu{flex:1;padding:20px 24px;white-space:pre-wrap;font-size:14.5px;line-height:1.7;color:var(--encre-2)}
.var{display:inline-block;padding:0 7px;border-radius:6px;background:var(--foret-pale);color:var(--foret-texte);font:500 .82em/1.75 var(--mono)}
.var.obs{background:var(--ocre-pale);color:var(--ocre)}
.bloc-legal{display:flex;gap:10px;margin:0 24px 22px;padding:12px 14px;border:1px dashed var(--ligne-forte);border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--muet)}
@media (max-width:900px){.editeur{grid-template-columns:1fr}.editeur-pane + .editeur-pane{border-left:0;border-top:1px solid var(--ligne)}}

/* ---------- Releve ---------- */
.releve{overflow:hidden;background:var(--carte);border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre-2)}
.releve-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px dashed var(--ligne-forte)}
.releve-tete .surtitre{margin-bottom:4px}
.releve-periode{font:650 26px/1.1 var(--sans)}
.releve-lignes{padding:10px 0}
.releve-ligne{display:flex;justify-content:space-between;gap:16px;padding:11px 28px;font-size:15px}
.releve-ligne small{display:block;font-size:12.5px;color:var(--muet)}
.releve-ligne > span:last-child{font-weight:500;font-variant-numeric:tabular-nums}
.releve-total{display:flex;align-items:baseline;justify-content:space-between;padding:20px 28px;background:var(--carte-2);border-top:1px solid var(--ligne);font-weight:600}
.releve-total strong{font:700 34px/1 var(--sans);font-variant-numeric:tabular-nums}

/* ---------- Lignes « a votre attention » ---------- */
.attention-ligne{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--ligne)}
.attention-ligne > .ic{color:var(--ocre)}
.attention-ligne > div{flex:1;min-width:0}
.attention-ligne strong{display:block}

/* ---------- Filtres en pastilles ---------- */
.puces a.etiquette{text-decoration:none}
.puces a.etiquette:hover{filter:brightness(.96)}
.puces a.filtre-actif{box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- Petit ecran : le rail devient une barre d'onglets en bas ---------- */
.plus-mobile,.entete-mobile{display:none}
.plus-mobile .quand-ouvert{display:none}
.plus-mobile[open] .quand-ouvert{display:inline}
.plus-mobile[open] .quand-ferme{display:none}
@media (max-width:900px){
  .app,.op .app{grid-template-columns:1fr;background:none}
  main{padding:20px 16px 112px}
  h1{font-size:26px}
  .tete{margin-bottom:20px;padding-bottom:18px}
  .entete-mobile{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ligne);background:var(--carte);font:650 16px var(--sans)}
  .entete-mobile .logo{width:24px;height:24px}
  /* La barre : quatre onglets essentiels et « Plus ». Rien ne deborde de l'ecran. */
  .rail{position:fixed;inset:auto 0 0 0;z-index:30;height:auto;flex-direction:row;align-items:stretch;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--carte);border-right:0;border-top:1px solid var(--ligne);overflow:visible;box-shadow:0 -8px 24px -14px rgb(0 0 0/.25)}
  .op .rail{background:var(--nuit);border-top-color:transparent}
  .rail > .marque,.rail-pied,.nav-titre{display:none}
  .nav{flex-direction:row;flex:1;gap:0}
  .nav-groupe{display:contents}
  .nav a{flex:1;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:6px 2px;border-radius:10px;font-size:11px;text-align:center}
  .nav a span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .nav a:not(.essentiel){display:none}
  .nav a.actif{box-shadow:none;background:var(--papier-2)}
  .op .nav a.actif{background:rgb(255 255 255/.09)}
  .plus-mobile{display:flex}
  .plus-mobile > summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;padding:6px 12px;border-radius:10px;font-size:11px;font-weight:500;color:var(--encre-2)}
  .plus-mobile > summary::before{display:none}
  .op .plus-mobile > summary{color:var(--nuit-texte)}
  /* « Plus » ouvert : le rail remonte en feuille, avec tout le menu, la session et « quitter ». */
  .rail:has(.plus-mobile[open]){flex-direction:column;max-height:82vh;overflow-y:auto;padding:14px 12px calc(14px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
  .rail:has(.plus-mobile[open]) .nav{flex-direction:column;gap:14px}
  .rail:has(.plus-mobile[open]) .nav-groupe{display:flex;flex-direction:column}
  .rail:has(.plus-mobile[open]) .nav-titre{display:block}
  .rail:has(.plus-mobile[open]) .nav a{display:flex;flex-direction:row;justify-content:flex-start;gap:10px;padding:9px 10px;font-size:15px;text-align:left}
  .rail:has(.plus-mobile[open]) .rail-pied{display:flex;margin-top:12px}
  .rail:has(.plus-mobile[open]) .plus-mobile{order:-1;align-self:flex-end}
  .rail:has(.plus-mobile[open]) .plus-mobile > summary{flex-direction:row;font-size:14px}
  .parcours{grid-template-columns:minmax(0,1fr)}
  .parcours-cote{position:static}
  .etape{min-width:0;padding:20px}
  .parcours .actions :is(button,.bouton){max-width:100%;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;white-space:normal;line-height:1.35}
  .dossier > summary{grid-template-columns:24px minmax(0,1fr) auto 20px}
  .dossier .masquable{display:none}
  .dossier-corps{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Petit ecran : un tableau se lit en pile, une ligne par carte ---------- */
/* Le cadre du tableau disparait : chaque ligne devient sa propre carte, et chaque
   cellule porte le nom de sa colonne (pose par le script de base.html). Plus rien
   ne se lit en poussant l'ecran de cote. */
@media (max-width:760px){
  .tableau{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .table-scroll{overflow:visible}
  table.empilable,table.empilable > tbody,table.empilable > tbody > tr,table.empilable > tbody > tr > td{display:block;width:auto}
  table.empilable > thead{display:none}
  table.empilable > tbody > tr{display:flex;flex-direction:column;margin:0 0 12px;padding:2px 16px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)}
  table.empilable > tbody > tr:last-child{margin-bottom:0}
  .tableau table.empilable tbody tr:hover td{background:transparent}
  table.empilable > tbody > tr > td{padding:11px 0;border-bottom:1px solid var(--ligne)}
  table.empilable > tbody > tr > td:last-child{border-bottom:0}
  /* Le nom de la colonne a gauche, la valeur a droite : la ligne reste un couple lisible. */
  table.empilable td[data-colonne]{display:grid;grid-template-columns:minmax(84px,36%) minmax(0,1fr);gap:4px 14px;align-items:start}
  table.empilable td[data-colonne]::before{content:attr(data-colonne);grid-column:1;grid-row:1;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--muet)}
  /* Tout ce que contient la cellule se range sous la valeur, jamais sous le nom de colonne. */
  table.empilable td[data-colonne] > *{grid-column:2}
  table.empilable td[data-colonne] > .etiquette{justify-self:start}
  /* Le nom de la ligne ouvre la carte : on sait de quoi on lit les champs. */
  table.empilable td.titre-carte[data-colonne]{order:-1;display:block;padding:13px 0 11px}
  table.empilable td.titre-carte[data-colonne]::before{content:none}
  table.empilable td.titre-carte strong{font-size:16px}
  table.empilable td.titre-carte a{display:block}
  /* Les largeurs fixes des formulaires de tableau sont taillees pour le grand ecran :
     dans une carte, un champ prend la largeur disponible. */
  table.empilable td input:not([type=checkbox]):not([type=radio]),table.empilable td select{width:100%!important}
  /* Les colonnes de mise en page du grand ecran n'ont plus de sens empilees. */
  table.empilable td.num,table.empilable td.extrait,table.empilable td.motif{max-width:none;min-width:0;text-align:left}
  /* Une cellule qui tient toute la ligne (etat vide, formulaire) garde sa pleine largeur. */
  table.empilable td[colspan]{padding:14px 0}

  table.empilable td a{padding-top:11px;padding-bottom:11px}
  /* Une adresse ou une URL sans espace ne pousse plus la colonne hors de l'ecran. */
  .controles .val,.controles .cle,td .preuve{overflow-wrap:anywhere}
}

/* ---------- Le doigt n'a pas la finesse du curseur ---------- */
/* Question d'outil de pointage, pas de largeur : un telephone en paysage fait
   844 px de large et reste un telephone. */
@media (pointer:coarse){
  input,select,textarea{font-size:16px}
  input[type=radio],input[type=checkbox]{width:24px;height:24px}
  main a.etiquette{min-height:36px;padding:7px 13px}
  main details > summary{min-height:44px}
  .controles li{padding:12px 0}
  .surtitre a{display:inline-block;padding:8px 0}
}

/* ---------- Message type : les variantes (story 2.10) ---------- */
.variantes-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start;margin:0 0 16px}
.variantes-actions form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.variantes-actions .aide{max-width:520px;margin:0}
.apercu-choix{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:0 0 16px;padding:12px 16px;background:var(--carte-2);border:1px solid var(--ligne);border-radius:10px}
.apercu-choix label{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px;font-weight:600}
.apercu-choix select{min-width:220px}
.apercu-choix .aide{margin:0;flex-basis:100%}
.apercu-choix .aide em{font-style:normal;color:var(--ocre)}
.variante{margin:0 0 18px;padding:16px 18px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)}
.variante.inactive{opacity:.72}
.variante-tete{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:12px}
.variante-lettre{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--encre);color:var(--carte);font:650 15px var(--sans)}
.variante-titre{display:flex;flex-direction:column;min-width:0;flex:1}
.variante-titre small{color:var(--muet);font-size:12.5px}
.variante .editeur{box-shadow:none}
.editeur.compact textarea{min-height:250px}
.var.inconnue{background:var(--brique-pale);color:var(--brique)}
.motifs{margin:6px 0 0 18px;padding:0}
.motifs li{margin:2px 0}
a.bouton{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;background:var(--encre);color:var(--carte);font-weight:600;text-decoration:none}

/* ---------- Documents du client (story 2.10) ---------- */
.depot .actions{margin-top:6px}
.documents{margin:14px 0 6px;padding:0;list-style:none}
.document{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--carte);border:1px solid var(--ligne);border-radius:10px}
.document + .document{margin-top:8px}
.document-nom{display:flex;flex-direction:column;min-width:0;flex:1}
.document-nom small{color:var(--muet);font-size:12.5px}
.document-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0}
.document-actions .joindre{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}

/* La revue conserve les paragraphes du message réellement jugé. */
.revue-carte { margin-block: 1.5rem; }
.revue-corps { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.revue-carte details { margin-block: 1rem; }
.revue-carte textarea { width: 100%; }

/* ---------- Connexion : une entree calme, une promesse claire ---------- */
.connexion{--auth-fond:#f8f9f6;--auth-encre:#192c24;--auth-muet:#626e66;--auth-ligne:#e2e7e0;min-height:100svh;padding:0 clamp(20px,4vw,64px);background:var(--auth-fond);color:var(--auth-encre);color-scheme:light}
.connexion-entete{max-width:1440px;height:96px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.connexion .marque{padding:0;color:var(--auth-encre);gap:11px}
.connexion .marque span{font-size:19px}
.connexion .marque .logo{width:32px;height:32px}
.connexion-discretion{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--auth-muet)}
main.connexion-cadre{display:grid;grid-template-columns:1fr 1fr;max-width:1440px;margin:auto;padding:0;min-height:min(790px,calc(100svh - 156px));border:1px solid var(--auth-ligne);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 18px 60px -40px #1b38242b}
.connexion-recit{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:42px clamp(28px,4.3vw,68px) 30px;background:#153d30;color:#f5f6eb}
.connexion-recit::before{content:"";position:absolute;z-index:-1;width:660px;height:660px;border:1px solid #d9e9be0b;border-radius:50%;right:-390px;top:100px;box-shadow:0 0 0 66px #d9e9be04,0 0 0 132px #d9e9be03;pointer-events:none}
.connexion-repere{display:flex;align-items:center;gap:9px;color:#cbdbc7;font-size:14px}
.connexion-repere>span{height:6px;width:6px;border-radius:50%;background:#c3d99f;box-shadow:0 0 0 4px #c3d99f0d}
.connexion-promesse{margin:46px 0 40px}
.connexion-promesse h1{font-size:clamp(46px,5.25vw,78px);font-weight:500;line-height:1.025;text-wrap:initial;color:#f5f6eb}
/* Un mot d'accent coloré dans un grand titre : c'est ce que Valentin appelle le look « généré par IA ». */
.connexion-promesse h1 span{color:inherit}
.connexion-promesse>p{margin:25px 0 0;font-size:17px;line-height:1.65;color:#c5d3ca}
.connexion-methode{width:100%;margin-top:auto}
.connexion-methode>p{font-size:12px;color:#b3c6ba;margin:0 0 22px}
.connexion-methode ol{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.connexion-methode li{display:flex;gap:15px;align-items:center;position:relative}
.methode-point{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid #b7ceb32e;border-radius:50%;font:10px var(--mono);color:#c4d9a7}
.connexion-methode li:not(:last-child)::after{content:"";position:absolute;width:1px;height:18px;background:#b7ceb321;top:37px;left:15px}
.connexion-methode strong{display:block;font-size:13px;font-weight:500;color:#f0f4e9}
.connexion-methode small{display:block;font-size:12px;color:#b3c6ba;line-height:1.6}
.connexion-territoire{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;border-top:1px solid #d8e7d51f;padding-top:22px;margin-top:34px;font-size:13px;color:#b9ccbf}
.connexion-territoire span:last-child{display:flex;align-items:center;gap:8px;white-space:nowrap}
.connexion-espace{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px clamp(24px,4.8vw,76px);min-width:0}
.connexion-formulaire{width:100%;max-width:420px}
.connexion-embleme{display:grid;place-items:center;width:48px;height:48px;background:#f4f6f1;border:1px solid #e6ebe2;border-radius:15px;margin-bottom:27px;box-shadow:0 2px 3px #182e1a05}
.connexion-embleme .logo{width:26px;height:26px}
.connexion-surtitre{font-size:12px;font-weight:500;color:#68776b;margin-bottom:10px}
.connexion-formulaire h2{font-size:clamp(32px,2.9vw,42px);font-weight:550;line-height:1.12;color:var(--auth-encre);margin:0 0 17px}
.connexion-intro{font-size:16px;line-height:1.7;color:var(--auth-muet);margin:0 0 28px}
.connexion a.connexion-google,.connexion button.connexion-google{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:56px;padding:0 18px;border:1px solid #ccd5ca;border-radius:10px;background:#fff;color:#24362b;box-shadow:0 2px 3px #16392306;text-decoration:none;font:550 16px var(--sans);transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.connexion-google .google-signe{width:18px;height:18px;flex:none}
.connexion-google .ic{margin-left:auto;color:#607362}
.connexion-google span{margin-right:auto}
.connexion a.connexion-google:hover{background:#f6f8f3;border-color:#92a68b;box-shadow:0 4px 12px #1639230d;transform:translateY(-1px);color:#192c24}
.connexion a.connexion-google:active{transform:translateY(0)}
.connexion :is(a,button,summary):focus-visible{outline:3px solid #82a476;outline-offset:4px}
.connexion button.connexion-google:disabled{cursor:not-allowed;background:#f7f8f5;border-style:dashed;color:#64705f;box-shadow:none}
.connexion button.connexion-google:disabled .google-signe{filter:grayscale(1);opacity:.6}
.connexion-inscription{margin:12px 0 30px;color:var(--auth-muet);font-size:14px;text-align:center}
.connexion-configuration{display:flex;align-items:center;gap:7px;font-size:14px;line-height:1.5;color:#7b653c;margin:10px 0 0}
.connexion-configuration>span{width:5px;height:5px;border-radius:50%;background:#a8884d;flex:none}
.connexion-autorisations{border-top:1px solid var(--auth-ligne);padding-top:24px}
.connexion-autorisation{display:flex;gap:12px;margin-bottom:18px}
.autorisation-numero{display:grid;place-items:center;flex:none;width:21px;height:21px;border:1px solid #dfe6db;border-radius:50%;font-size:10px;color:#496541;background:#f5f8f1;margin-top:1px}
.connexion-autorisation strong{display:block;font-size:12px;font-weight:600;color:#344b3b;margin-bottom:4px}
.connexion-autorisation p{font-size:12px;line-height:1.6;color:var(--auth-muet);margin:0}
.connexion-details{padding-left:33px;color:var(--auth-muet);font-size:15px}
.connexion-details summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:3px 0;color:#425b46}
.connexion-details summary::-webkit-details-marker{display:none}
.connexion-details summary span{font-size:17px;line-height:1;transition:transform .15s}
.connexion-details[open] summary span{transform:rotate(45deg)}
.connexion-details p{margin:10px 0 0;font-size:15px;line-height:1.65}
.connexion-assurance{display:flex;align-items:center;justify-content:center;gap:7px;margin:28px 0 0;color:#667261;font-size:10px}
.connexion-erreur{display:flex;align-items:flex-start;gap:10px;border:1px solid #ead2b6;background:#fff8ed;color:#77522e;border-radius:8px;padding:12px;font-size:15px;margin:0 0 18px}
.connexion-pied{max-width:1440px;margin:auto;min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:#717b70}
.connexion-espace>.groupe-titre,.connexion-espace>.entree{width:100%;max-width:440px}
@media(min-width:1500px){.connexion-promesse{margin-top:64px}.connexion-formulaire{max-width:440px}}
@media(max-width:1050px) and (min-width:761px){.connexion-territoire{align-items:flex-start;flex-direction:column;gap:7px}.connexion-espace{padding:36px 28px}.connexion-recit{padding-left:32px;padding-right:32px}.connexion-promesse h1{font-size:57px}.connexion-promesse>p{font-size:17px}}
@media(max-width:760px){
 .connexion{padding:0 18px}.connexion-entete{height:76px}.connexion .marque span{font-size:17px}.connexion-discretion{font-size:13px;gap:5px}.connexion-discretion .ic{width:13px}
 main.connexion-cadre{grid-template-columns:1fr;border-radius:18px;min-height:0}.connexion-recit{padding:26px 28px 30px}.connexion-repere{font-size:14px}
 .connexion-promesse{margin:20px 0 0}.connexion-promesse h1{font-size:43px;line-height:1.02}.connexion-promesse h1 br:first-of-type{display:none}.connexion-promesse h1 br:first-of-type::after{content:" "}.connexion-promesse h1{max-width:400px}
 .connexion-promesse>p{margin-top:15px;font-size:17px}.connexion-promesse>p br{display:none}.connexion-methode,.connexion-territoire{display:none}
 .connexion-espace{padding:30px 26px 28px}.connexion-embleme,.connexion-surtitre{display:none}.connexion-formulaire{max-width:430px}.connexion-formulaire h2{font-size:32px;margin-bottom:12px}.connexion-formulaire h2 br{display:none}
 .connexion-intro{font-size:16px;margin-bottom:22px}.connexion-intro br{display:none}.connexion-inscription{font-size:14px;margin-bottom:24px}.connexion-autorisations{padding-top:22px}.connexion-assurance{margin-top:24px}
 .connexion-pied{padding:18px 5px 24px;justify-content:center;text-align:center;flex-direction:column;gap:6px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.connexion *{transition:none!important}}
/* Le parcours prime : une action, puis les precisions a la demande. */
.connexion-parcours{display:flex;align-items:center;gap:14px;list-style:none;padding:0;margin:0 0 36px;font-size:14px;white-space:nowrap;color:#778273}
.connexion-parcours li{display:flex;align-items:center;gap:6px}
.connexion-parcours li span{width:24px;height:24px;display:grid;place-items:center;border:1px solid #dfe5db;border-radius:50%;font-size:12px}
.connexion-parcours li[aria-current]{color:#244c33;font-weight:600}
.connexion-parcours li[aria-current] span{background:#244c33;color:#fff;border-color:#244c33}
.connexion-embleme{margin-bottom:30px}
.connexion-conviction{display:flex;gap:16px;align-items:center;padding-top:30px}
.connexion-conviction .connexion-trait{width:28px;height:1px;background:#adc896;flex:none}
.connexion-conviction>p{margin:0;font-size:16px;line-height:1.8;color:#c0d0c4}
.connexion-permission-courte{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7;color:#53634e;margin:0 0 15px}
.connexion-permission-courte>.ic{margin-top:3px;color:#657b5c}
.connexion-permission-courte strong{font-weight:400;color:#6a7565}
.connexion-details{padding-left:25px}
.connexion a.connexion-reprendre{background:#244c33;color:#fff;border-color:#244c33}
.connexion a.connexion-reprendre .ic{color:#d4e4c8}
.connexion a.connexion-reprendre:hover{background:#193e28;color:#fff}
.connexion-google[aria-busy=true]{opacity:.75;cursor:progress}
@media(min-width:761px){main.connexion-cadre{min-height:min(720px,calc(100svh - 156px))}.connexion-promesse{margin-bottom:60px}}
@media(max-width:760px){.connexion-parcours{margin-bottom:24px;gap:12px;font-size:14px}.connexion-parcours li{gap:4px}.connexion-parcours li span{width:24px;height:24px;font-size:12px}.connexion-conviction{display:none}.connexion-promesse h1 br:first-of-type{display:initial}.connexion-promesse h1{font-size:37px}.connexion-promesse h1 br:nth-of-type(2){display:none}.connexion-promesse h1 span::before{content:" "}.connexion-recit{padding-top:22px;padding-bottom:24px}.connexion-promesse{margin-top:18px}.connexion-promesse>p{font-size:17px;max-width:29ch}.connexion-formulaire h2{font-size:32px}.connexion-formulaire h2 br{display:none}.connexion-formulaire h2 br::after{content:" "}.connexion-embleme{display:none}.connexion-espace{padding-top:27px}}
@media(max-width:420px){.connexion{padding:0 12px}.connexion-espace{padding-left:20px;padding-right:20px}.connexion-parcours{gap:8px;font-size:12px}.connexion-discretion{font-size:13px}}

.connexion-details summary::before{display:none}

.connexion-changer{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:20px 0 0;font-size:14px;color:var(--auth-muet)}
.connexion-changer button{height:auto;padding:4px;background:transparent;color:#35513a;font-size:14px;font-weight:500;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.connexion-changer button:hover{background:#f2f5ee;color:#244c33}

/* Les etapes se repartissent sans reduire le texte pour les faire tenir. */
.connexion-parcours{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;white-space:normal;line-height:1.35}
.connexion-parcours li{align-items:flex-start;flex-direction:column;gap:8px}
.connexion-parcours li span{flex:none}
.connexion-details summary{font-size:15px;min-height:44px;padding:8px 0}
.connexion-territoire{flex-wrap:wrap;gap:8px 16px}
@media(max-width:760px){
 .connexion-discretion{font-size:12px}.connexion-repere{font-size:13px}
 .connexion-promesse>p{font-size:16px;max-width:32ch}
 .connexion-parcours{font-size:14px;gap:8px;margin-bottom:24px}
 .connexion-espace{padding-left:24px;padding-right:24px}
 .connexion-pied{font-size:13px;gap:8px}
}
@media(max-width:370px){
 .connexion-discretion{font-size:12px}.connexion-entete{gap:10px}
 .connexion-espace{padding-left:20px;padding-right:20px}
 .connexion-parcours{font-size:13px}
 .connexion a.connexion-google,.connexion button.connexion-google{padding:0 12px;gap:10px}
}

/* Champ fichier : le bouton natif du navigateur est remplace par une zone de l'app, le vrai input reste pour le clavier. */
.fichier-natif{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
span.fichier{display:flex;align-items:center;gap:12px;margin:0;padding:8px;border:1px dashed var(--ligne-forte);border-radius:10px;background:var(--carte-2);color:var(--muet);font:500 13.5px/1.4 var(--sans);cursor:pointer;transition:border-color .15s,background .15s}
span.fichier:hover,span.fichier.survol{border-color:var(--discret);background:var(--carte)}
.fichier-natif:focus-visible + .fichier{outline:2px solid var(--foret-vif);outline-offset:2px}
.fichier-bouton{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--carte);color:var(--encre);font:600 13px/1 var(--sans);box-shadow:var(--ombre)}
.fichier-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
span.fichier.rempli{border-style:solid}
span.fichier.rempli .fichier-nom{color:var(--encre)}

/* Confirmation avant une action qui perd quelque chose : a la place du confirm() du navigateur. */
.confirmation{width:min(440px,calc(100vw - 32px));margin:auto;padding:24px 26px 22px;border:1px solid var(--ligne-forte);border-radius:16px;background:var(--carte);color:var(--encre);box-shadow:var(--ombre-2)}
.confirmation::backdrop{background:rgb(16 17 20/.42);backdrop-filter:blur(3px)}
.confirmation p{margin:0 0 20px;font-size:15.5px;line-height:1.55}
.confirmation-actions{display:flex;justify-content:flex-end;gap:10px}

/* Les explications Gmail s'ouvrent sans deplacer le parcours de connexion. */
.connexion-dialogue{width:min(520px,calc(100vw - 40px));max-height:calc(100dvh - 48px);margin:auto;padding:28px 32px 32px;border:1px solid #dce4d8;border-radius:22px;background:#fff;color:#192c24;box-shadow:0 28px 100px #0e281d40;overflow:auto;overscroll-behavior:contain;color-scheme:light}
.connexion-dialogue::backdrop{background:rgb(12 29 21 / .48);backdrop-filter:blur(5px)}
.acces-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.acces-icone{display:grid;place-items:center;width:44px;height:44px;background:#f0f5eb;color:#345939;border-radius:13px}
.connexion .acces-fermer{width:44px;height:44px;padding:0;border:0;background:#f5f7f2;color:#50624c;border-radius:50%;box-shadow:none;font:400 26px/1 var(--sans)}
.connexion .acces-fermer:hover{background:#e8efe2;color:#192c24}
.connexion-dialogue h2{font:550 32px/1.12 var(--sans);margin:0 0 12px;color:#192c24}
#acces-intro{font-size:16px;color:#626e66;margin:0 0 26px}
.acces-etape{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px}
.acces-numero{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-top:1px;border:1px solid #dce5d6;border-radius:50%;font-size:12px;color:#42633b;background:#f7f9f3}
.acces-etape h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:16px;line-height:1.4;font-weight:600;margin:0 0 7px;color:#263e2e}
.acces-etape h3 span{padding:2px 7px;border-radius:5px;background:#eaf3e5;color:#406236;font-size:12px;font-weight:500}
.acces-etape p,.connexion-details .acces-etape p{font-size:15px;line-height:1.6;color:#626e66;margin:0}
.acces-rappel,.connexion-details .acces-rappel{font-size:14px;line-height:1.6;color:#47603e;padding:15px 0 0;margin:0 0 24px;border-top:1px solid #e2e7e0}
.connexion .acces-compris{width:100%;height:50px;background:#244c33;border:1px solid #244c33;border-radius:10px;color:#fff;font-size:16px;box-shadow:none}
.connexion .acces-compris:hover{background:#193e28}
.connexion-details[open] .connexion-details-contenu{margin-top:16px}
.connexion-espace{justify-content:flex-start}
.connexion-inscription{margin-bottom:24px}
.connexion-autorisations{padding-top:20px}
.connexion-permission-courte{margin-bottom:8px}
@media(max-width:760px){
 .connexion-dialogue{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px 22px 24px;border-radius:18px}
 .connexion-dialogue h2{font-size:30px}.acces-etape{gap:10px;margin-bottom:20px}
 .connexion-espace{padding-top:24px}.connexion-parcours{margin-bottom:24px}
}

/* La hauteur disponible est celle du navigateur, barres Chrome deja deduites. */
@media(min-width:761px){
 .connexion{display:grid;grid-template-rows:72px minmax(min-content,1fr)44px;min-height:100svh}
 .connexion-entete{height:72px;width:100%}
 main.connexion-cadre{min-height:0;width:100%}
 .connexion-pied{min-height:44px;width:100%}
 .connexion-espace{justify-content:center;padding-top:28px;padding-bottom:28px}
 .connexion-embleme{display:none}
 .connexion-parcours{margin-bottom:24px}
 .connexion-formulaire h2{margin-bottom:14px}
 .connexion-intro{margin-bottom:20px}
 .connexion-inscription{margin-bottom:20px}
 .connexion-recit{padding-top:28px;padding-bottom:24px}
 .connexion-promesse{margin-top:32px;margin-bottom:28px}
 .connexion-promesse>p{margin-top:20px}
 .connexion-territoire{margin-top:24px;padding-top:18px}
}
@media(min-width:761px) and (max-height:800px){
 .connexion{grid-template-rows:64px minmax(min-content,1fr)40px}
 .connexion-entete{height:64px}.connexion-pied{min-height:40px}
 .connexion-espace{padding-top:22px;padding-bottom:22px}
 .connexion-conviction{display:none}
 .connexion-territoire{margin-top:auto}
 .connexion-promesse h1{font-size:clamp(46px,4.8vw,68px)}
 .connexion-formulaire h2{font-size:36px}
 .connexion-parcours{margin-bottom:20px}
 .connexion-inscription{margin-bottom:16px}
 .connexion-autorisations{padding-top:16px}
}

/* L'identite Google et l'autorisation de messagerie sont deux etats distincts. */
.mode-identite .pouls{background:var(--foret-vif)}
.boite-identite,.boite-attente{margin-bottom:24px;padding:24px}
.boite-identite h2,.boite-attente h2{margin:6px 0 16px;font-size:24px}
.boite-identite .carte-tete{flex-wrap:wrap;gap:12px}
.boite-identite .boite-adresse{font-size:18px;font-weight:500;overflow-wrap:anywhere;color:var(--encre)}
.boite-identite p,.boite-attente p{max-width:65ch;font-size:16px;line-height:1.6;color:var(--encre-2)}
.boite-attente .note{margin:20px 0;font-size:15px}

.gmail-permissions{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:12px}
.gmail-permissions li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5}
.gmail-permissions .ic{margin-top:3px;color:var(--foret-texte)}
.boite-controles{padding:20px 24px}.boite-controles[open]>summary{margin-bottom:18px}
.boite-attente .actions{flex-wrap:wrap}.boite-attente .aide{margin-top:16px;font-size:14px}

/* --- Étape « Votre signature » : le formulaire et l'aperçu du bas de mail --- */
.signature-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.signature-champs .champ,.signature-champs .aide{margin-bottom:14px}
.signature-champs .champ > span small{font-weight:400;color:var(--muet)}
.signature-champs .aide{grid-column:1/-1}
.signature-plus{margin:4px 0 22px;border:1px solid var(--ligne);border-radius:12px;background:var(--carte)}
.signature-plus > summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}
.signature-plus > summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--muet);border-bottom:1.5px solid var(--muet);transform:rotate(-45deg);transition:transform .15s}
.signature-plus[open] > summary::before{transform:rotate(45deg)}
.signature-plus > summary::-webkit-details-marker{display:none}
.signature-plus > .signature-champs{padding:6px 16px 4px;border-top:1px solid var(--ligne)}
.signature-logo-actuel{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;color:var(--muet)}
.signature-logo-actuel img{border-radius:50%;background:var(--carte-2)}
.signature-couleur{display:flex;align-items:center;gap:10px;color:var(--muet);font-size:13px}
.signature-couleur input[type=color]{width:44px;height:30px;padding:2px;border:1px solid var(--ligne);border-radius:8px;background:var(--carte)}
.signature-apercu{white-space:normal}
.signature-apercu table{border-collapse:collapse}
.signature-apercu [data-sig-cible]:empty{display:none}
.signature-form .actions{display:flex;gap:10px;justify-content:flex-end}
@media (max-width:640px){.signature-champs{grid-template-columns:1fr}}

/* Les actions longues restent lisibles et touchables sur un petit écran. */
@media (max-width:760px){
  main :is(button,.bouton){max-width:100%;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;white-space:normal;line-height:1.35}
}