/* ── La typographie ──
   Trois familles IBM Plex, HÉBERGÉES ICI et pas appelées chez Google.
   Ce n'est pas de la coquetterie : une police servie par un tiers fait
   partir l'adresse IP de chaque visiteur du formulaire public vers ce
   tiers, ce que la CNIL et plusieurs tribunaux européens ont déjà jugé.
   Un dossier CEE se défend mieux sans cette ombre au tableau. 164 Ko, une
   fois, et l'application ne dépend plus de personne pour s'afficher.

   Les fichiers sont réduits au latin étendu — français, euro, guillemets,
   flèches, puces — au lieu des 2 000 glyphes d'origine. */
@font-face{font-family:'Plex Sans';src:url('polices/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('polices/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('polices/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('polices/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Serif';src:url('polices/IBMPlexSerif-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Serif';src:url('polices/IBMPlexSerif-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Serif';src:url('polices/IBMPlexSerif-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('polices/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('polices/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('polices/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --bleu:#14477D; --bleu-f:#0F3A68; --navy:#16243B; --ardoise:#37474F;
  --vert:#3EC98C; --vertf:#15794F; --gris:#F1F1EF; --gris2:#E3E5E4;
  --muted:#8B959E; --muted2:#A3AAB1;

  /* Ce que la maquette apporte de neuf : des gris de carte qui se
     distinguent du fond, et deux familles d'accent — l'ambre pour ce qui
     attend une décision, le rouge pour ce qui ne se rattrape pas. */
  --encre:#0D2440; --encre2:#18202A; --encre3:#5B6772;
  --fond:#F1F2EF; --carte:#FFF; --encart:#FAFBF9;
  --bord:#E7E9E6; --bord-f:#EDEFEC; --bord-champ:#D4D9D4;

  --vert-fond:#E8F6EE; --vert-bord:#BFE3D0;
  --ambre:#A15C0A; --ambre-t:#8A5A0A; --ambre-txt:#6B5A3C;
  --ambre-fond:#FDF8EE; --ambre-fond2:#FDF3E3; --ambre-fond3:#F4E3C4;
  --ambre-bord:#ECD9B6; --ambre-bord2:#F0E4CD;
  --rouge:#B3362C; --rouge-f:#97281F; --rouge-fond:#FDF4F3;
  --rouge-bord:#F0D4D0; --rouge-txt:#7A463F;

  --ombre:0 1px 2px rgba(20,27,34,.04);
  --r-carte:16px; --r-encart:12px; --r-btn:11px;

  /* Une coche dessinée une fois, réutilisable partout, qui ne dépend
     d'aucune police et ne change jamais de largeur. */
  --coche:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6.2 4.4 9l6-6.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  --ui:'Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --titre:'Plex Serif',Georgia,'Times New Roman',serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Un chapeau en petites capitales espacées : il nomme la zone sans crier. */
.eyebrow,.eyebrow-mono{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vertf)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Les pseudo-éléments aussi.
   « * » ne les atteint pas : un ::before de 11 px avec 1,5 px de bordure en
   occupait 14, et la pastille rétrécissait de deux pixels au moment du clic.
   Trois caractères de plus, et toute une famille de décalages disparaît. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
body{
  font-family:var(--ui);
  color:var(--encre2); background:var(--fond); line-height:1.5; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
.bg-navy{background:linear-gradient(160deg,#16243B,#14477D)}
.centered{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

html{scroll-padding-top:84px}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:28px 20px 60px}

/* ---------- marque ---------- */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand b{letter-spacing:.28em;font-size:17px;color:var(--navy)}
.bars{display:inline-flex;align-items:flex-end;gap:3px;height:22px}
.bars i{display:block;width:5px;border-radius:1px}
.bars i:nth-child(1){height:11px;background:#5B87B5}
.bars i:nth-child(2){height:16px;background:var(--bleu)}
.bars i:nth-child(3){height:22px;background:var(--vert)}
/* La barre reste accessible au défilement : sur une liste de deux cents
   dossiers, remonter en haut pour changer d'écran était une corvée.
   z-index au-dessus des cartes, ombre portée pour décoller du contenu. */
.topbar{background:var(--navy);color:#fff;padding:16px 20px;
  position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(16,36,59,.16)}
.topbar .inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar b{letter-spacing:.28em}
.topbar .bars i:nth-child(1){background:#8FB4D6}
.topbar .bars i:nth-child(2){background:#C9DCEC}
.topbar a{color:#C9DCEC;font-size:13px;text-decoration:none;margin-left:16px}
.topbar a:hover{color:#fff}

/* ---------- blocs ---------- */
.card{background:#fff;border-radius:10px;padding:26px;box-shadow:0 1px 3px rgba(16,36,59,.08);margin-bottom:22px}
.card-narrow{max-width:380px;width:100%}
/* Les titres passent en serif. Deux familles dans une interface, ce n'est
   pas de l'ornement : le serif dit « voici de quoi on parle », le sans dit
   « voici ce que vous pouvez faire ». L'œil fait le tri sans y penser. */
h1{font-family:var(--titre);font-size:24px;font-weight:600;color:var(--encre);
  margin-bottom:6px;line-height:1.25;text-wrap:pretty}
h2{font-family:var(--titre);font-size:20px;font-weight:600;color:var(--encre);
  margin:0 0 14px;line-height:1.3;text-wrap:pretty}
h3{font-size:14px;color:var(--bleu);margin:0 0 8px}
.muted{color:var(--muted);font-size:13.5px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--vertf);margin-bottom:8px;font-weight:600}

/* ---------- formulaire ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin:14px 0 5px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #CFD6DA;border-radius:6px;font-size:14.5px;
  font-family:inherit;color:var(--ardoise);background:#fff
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(20,71,125,.12)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
@media(max-width:680px){.grid,.grid-3{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:6px;padding:12px 22px;
  font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}
.btn-primary{background:var(--bleu);color:#fff;margin-top:20px}
.btn-primary:hover{background:#0F3560}
.btn-ghost{background:#fff;color:var(--ardoise);border:1px solid #CFD6DA}
.btn:disabled{opacity:.5;cursor:not-allowed}
.check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:14px;line-height:1.45}
.check input{margin-top:3px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--bleu)}

/* ---------- messages ---------- */
.alert-ok{background:#E9F8F1;border:1px solid #A8E3C8;color:#1E6B47;padding:12px 14px;border-radius:6px;margin-bottom:16px;font-size:14px}
.alert-error{background:#FDECEC;border:1px solid #F2B8B8;color:#9B2C2C;padding:12px 14px;border-radius:6px;margin-bottom:16px;font-size:14px}
.alert-info{background:#EEF3F8;border:1px solid #C6D8E8;color:#14477D;padding:12px 14px;border-radius:6px;margin-bottom:16px;font-size:14px}
.note{background:#E9F8F1;border:1px solid #A8E3C8;border-radius:8px;padding:16px 18px;margin:18px 0}
.note h3{color:var(--vertf)}
.note p{font-size:13.5px;color:#2F5D48}

/* ---------- tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:var(--gris);color:var(--navy);text-align:left;padding:10px 12px;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase}
tbody td{padding:11px 12px;border-bottom:1px solid var(--gris2)}
td.r,th.r{text-align:right}
.total{background:var(--navy);color:#fff;display:flex;justify-content:space-between;
  padding:14px 12px;border-radius:0 0 6px 6px;font-weight:700}
.total span:last-child{color:var(--vert)}
.free{color:var(--vertf);font-weight:600}
.tag{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600}
.tag-wait{background:#FFF4DA;color:#8A6A16}
.tag-done{background:#E9F8F1;color:#1E6B47}

/* ---------- signature ---------- */
.sigbox{border:1px dashed #B9C4CB;border-radius:8px;background:#fff;touch-action:none;width:100%;height:180px;display:block}
.sigrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.engage{border:1px solid var(--gris2);border-radius:8px;padding:18px;margin:18px 0}
.engage ul{margin:10px 0 0 18px}
.engage li{font-size:13.5px;margin-bottom:9px;line-height:1.5}
.signed{background:#E9F8F1;border:1px solid #A8E3C8;border-radius:8px;padding:16px 18px;margin-top:20px}
.toast{position:fixed;top:18px;right:18px;background:#E9F8F1;border:1px solid #A8E3C8;color:#1E6B47;
  padding:14px 18px;border-radius:8px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:50}
.docwrap{background:linear-gradient(160deg,#16243B,#14477D);min-height:100vh;padding:26px 14px 50px}
.dochead{text-align:center;color:#fff;margin-bottom:22px}
.dochead b{font-size:26px;letter-spacing:.06em}
.dochead div{font-size:12px;letter-spacing:.18em;color:#A9C2D8;margin-top:4px}

/* ---------- parcours en étapes ---------- */
.fil{display:flex;gap:8px;margin:24px 0 4px;flex-wrap:wrap}
.etape{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  padding:6px 12px 6px 6px;border-radius:20px;background:var(--gris)}
.etape i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#CFD6DA;color:#fff;font-style:normal;font-size:11px;font-weight:700}
.etape.actif{background:#E9F1F8;color:var(--bleu);font-weight:600}
.etape.actif i{background:var(--bleu)}

/* ---------- bloc site ---------- */
.site{border:1px solid var(--gris2);border-radius:10px;padding:16px 18px;margin:14px 0;background:#fff}
.site-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  flex-wrap:wrap;margin-bottom:4px}
.site-num{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);font-weight:700}
.zni-note{margin-top:10px;font-size:12.5px;color:var(--vertf);background:#E9F8F1;
  border-radius:6px;padding:7px 10px}
.adr-ok{font-size:14.5px;color:var(--navy);font-weight:600;margin:6px 0 2px}
.adr-ko{font-size:14px;color:#9B2C2C;margin:6px 0 2px}
.vues{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:560px){.vues{grid-template-columns:1fr}}
.vues figure{margin:0}
.vues img{width:100%;height:150px;object-fit:cover;border-radius:8px;display:block;background:var(--gris)}
.vues figcaption{font-size:11.5px;color:var(--muted);margin-top:5px;text-align:center}
.type-choix{margin-top:16px;padding-top:14px;border-top:1px solid var(--gris2)}
.type-choix label{margin-top:0}
.type-raison{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.type-raison.sure{color:var(--vertf)}
.entreprise-fiche{background:#EEF3F8;border:1px solid #C6D8E8;border-radius:8px;
  padding:14px 16px;margin-top:12px;font-size:13.5px;line-height:1.55}
.entreprise-fiche strong{display:block;color:var(--navy);font-size:15px;margin-bottom:4px}

/* ---------- navigation du suivi ---------- */
.onglets{display:flex;gap:4px}
.onglets a{margin:0;padding:6px 12px;border-radius:6px;font-size:13.5px;color:#A9C2D8}
.onglets a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}

/* ---------- filtres ---------- */
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filtres select,.filtres input[type=search]{width:auto;min-width:170px;padding:9px 11px;font-size:13.5px}
.filtres .btn{padding:9px 16px;margin-top:0}

/* ---------- tuiles de chiffres ---------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.tuile{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(16,36,59,.08)}
.tuile-v{font-size:27px;font-weight:700;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
.tuile-l{font-size:13px;color:var(--ardoise);margin-top:6px;font-weight:600}
.tuile-n{font-size:12px;color:var(--muted);margin-top:3px}

.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.deux-col{grid-template-columns:1fr}}

/* ---------- entonnoir ---------- */
.entonnoir{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.ent-ligne{display:grid;grid-template-columns:150px 1fr 78px;gap:12px;align-items:center}
.ent-lib{font-size:13px;color:var(--ardoise)}
.ent-piste{background:var(--gris);border-radius:4px;height:22px;overflow:hidden}
.ent-barre{height:100%;border-radius:0 4px 4px 0;min-width:3px}
.ent-val{font-size:14px;font-weight:700;color:var(--navy);text-align:right}
.ent-val span{font-weight:400;color:var(--muted);font-size:12px}
@media(max-width:560px){.ent-ligne{grid-template-columns:110px 1fr 62px}}

/* ---------- graphe d'activité ---------- */
.legende{display:flex;gap:16px;margin:2px 0 14px;font-size:12.5px;color:var(--ardoise)}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:10px;height:10px;border-radius:2px;display:block}
.graphe{display:flex;align-items:flex-end;gap:2px;height:150px;overflow:hidden;
  border-bottom:1px solid var(--gris2);padding-bottom:0}
/* Les barres se partagent la largeur disponible : avec 90 jours à l'écran, une
   largeur fixe pousserait la page hors de l'écran. min-width:0 est ce qui
   autorise un enfant flex à devenir plus étroit que son contenu. */
.g-jour{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.g-paire{display:flex;align-items:flex-end;gap:1px;height:100%;width:100%;min-width:0;
  justify-content:center}
.g-barre{flex:1 1 0;min-width:0;max-width:5px;border-radius:2px 2px 0 0;min-height:0}
.g-axe{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:7px}

/* ---------- liste des dossiers ---------- */
table.liste tbody td{font-size:13.5px;vertical-align:top}
table.liste .muted{font-size:12.5px}
table.liste a{color:var(--bleu)}

/* ---------- fiche dossier ---------- */
.bloc-action{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--gris2)}
.bloc-action > div:first-child{flex:1;min-width:230px}
.chrono{list-style:none;margin:6px 0 0;padding:0}
.ev{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--gris2)}
.ev:last-child{border-left-color:transparent;padding-bottom:0}
.ev::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;
  border-radius:50%;background:#CFD6DA;border:2px solid #fff}
.ev-signature::before{background:var(--vertf)}
.ev-ouverture_lien::before{background:var(--bleu)}
.ev-echec_email::before{background:#C0392B}
.ev-t{font-size:13.5px;font-weight:600;color:var(--navy)}
.ev-d{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- comptes ---------- */
.compte{border:1px solid var(--gris2);border-radius:10px;padding:18px;margin-bottom:14px}
.compte.inactif{opacity:.6;background:#FAFAFA}
.compte-tete{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.tag-off{background:#EFEFEF;color:#7A8790}
.lien-perso{margin-top:14px}
.lien-perso input{margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--gris);border-color:var(--gris2)}
.compte-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.compte-actions form{display:flex;gap:8px;align-items:center}
.compte-actions input,.compte-actions select{width:auto;min-width:150px;padding:8px 10px;font-size:13px}
.compte-actions .btn{padding:8px 14px;margin-top:0;font-size:13px}
.btn.charge{position:relative;padding-left:44px;opacity:1}
.btn.charge::before{content:"";position:absolute;left:20px;top:50%;margin-top:-8px;
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.btn:disabled{cursor:progress}
textarea{min-height:80px;resize:vertical;line-height:1.5}
.notes{list-style:none;margin:20px 0 0;padding:0}
.notes li{border-left:3px solid var(--gris2);padding:2px 0 2px 14px;margin-bottom:16px}
.note-tete{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--navy)}
.note-tete span{color:var(--muted);font-size:12px}
.note-txt{font-size:14px;margin-top:4px;line-height:1.55}
.zone-risque{border:1px solid #F2C7C7}
.form-suppr{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.form-suppr input{width:auto;min-width:220px}
.btn-danger{background:#9B2C2C;color:#fff;margin-top:0}
.btn-danger:hover{background:#7E2222}
.champ-code{font-size:26px;letter-spacing:10px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:14px 12px}
.lien-nu{background:none;border:none;padding:0;color:var(--bleu);cursor:pointer;
  font-size:13px;font-family:inherit;text-decoration:underline}
.lien-nu:hover{color:#0F3560}

/* ---------- cloche de rappels ---------- */
.cloche{position:relative;margin-left:16px}
.cloche > summary{list-style:none;cursor:pointer;color:#C9DCEC;display:flex;align-items:center;
  position:relative;padding:2px}
.cloche > summary::-webkit-details-marker{display:none}
.cloche > summary:hover{color:#fff}
.cloche .pastille{position:absolute;top:-6px;right:-8px;background:#D9534F;color:#fff;
  font-style:normal;font-size:10.5px;font-weight:700;line-height:1;
  padding:3px 5px;border-radius:9px;min-width:16px;text-align:center}
.cloche-panneau{position:absolute;right:0;top:calc(100% + 12px);width:340px;max-width:88vw;
  background:#fff;color:var(--ardoise);border-radius:10px;box-shadow:0 8px 30px rgba(16,36,59,.28);
  z-index:40;overflow:hidden}
.cloche-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--gris2);font-size:13.5px}
.cloche-tete strong{color:var(--navy)}
.cloche-tete a{color:var(--bleu);font-size:12.5px;margin-left:0}
.cloche-vide{padding:16px;font-size:13px;color:var(--muted)}
.cloche-liste{list-style:none;margin:0;padding:0;max-height:60vh;overflow-y:auto}
.cloche-liste li{padding:13px 16px;border-bottom:1px solid #F0F1F0}
.cloche-liste li:last-child{border-bottom:none}
.cl-quand{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vertf);
  font-weight:600;margin-bottom:4px}
.cl-msg{font-size:13.5px;line-height:1.45;color:var(--ardoise)}
.cl-bas{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.cl-bas a{font-size:12.5px;color:var(--bleu);margin-left:0;text-decoration:none}
.cl-bas a:hover{text-decoration:underline}
.cl-bas form{margin:0}
.cl-bas button{background:none;border:none;padding:0;font-size:12.5px;color:var(--muted);
  cursor:pointer;font-family:inherit}
.cl-bas button:hover{color:var(--vertf)}

/* ---------- rappels ---------- */
.form-rappel .grid{margin-bottom:0}
.form-rappel input[type=datetime-local]{width:100%;padding:10px 12px;border:1px solid #CFD6DA;
  border-radius:6px;font-size:14.5px;font-family:inherit;color:var(--ardoise)}
/* ── Les destinataires d'un rappel ──
   Sept cases à cocher alignées, c'est sept petites cibles de 13 pixels et
   une colonne de carrés vides avant de lire le moindre nom. La pastille
   entière devient la cible, et l'état coché se lit à la couleur : on voit
   qui est prévenu sans compter les coches.

   Techniquement : c'est le SPAN qui porte la pastille, pas le label — sans
   quoi il faudrait :has() pour teinter le parent d'une case cochée. */
.destinataires{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.dest{display:inline-flex;margin:0;font-weight:400;cursor:pointer}
.dest input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dest span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;line-height:1;
  border:1px solid var(--bord-champ);border-radius:20px;padding:9px 14px;
  color:var(--encre3);background:var(--carte);transition:background .12s,border-color .12s}
.dest span::before{content:'';width:11px;height:11px;border-radius:50%;flex:none;
  border:1.5px solid var(--bord-champ);transition:all .12s}
.dest:hover span{border-color:var(--bleu);color:var(--bleu)}
/* Ni la graisse ni la taille ne changent au clic : le texte grossissait de
   deux pixels et toute la rangée se réarrangeait sous le doigt. La couleur
   et la coche suffisent à dire « celui-ci sera prévenu ». */
.dest input:checked + span{border-color:var(--bleu);background:#EEF3F9;color:var(--bleu)}
/* La coche est dessinée, pas écrite : « ✓ » n'a pas la même chasse d'une
   police à l'autre et décalait la pastille au moment du clic. C'est le même
   élément qui devient coche — le rond se plie — donc rien ne bouge autour. */
.dest input:checked + span::before{border:0;border-radius:0;
  background:var(--bleu);
  -webkit-mask:var(--coche) center/11px no-repeat;mask:var(--coche) center/11px no-repeat}
.dest input:focus-visible + span{outline:2px solid var(--bleu);outline-offset:2px}
.rappels{list-style:none;margin:0;padding:0}
.rappel{border-left:3px solid var(--gris2);padding:4px 0 4px 14px;margin-bottom:18px}
.rappel-du{border-left-color:#D9534F}
.rappel-avenir{border-left-color:#9EC0DE}
.rappel-fait{border-left-color:var(--vert);opacity:.65}
.rp-quand{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--vertf);
  font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-msg{font-size:14.5px;line-height:1.5;color:var(--ardoise)}
.rp-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.rp-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:9px}
.rp-actions form{margin:0}
.rp-actions .btn{margin-top:0;padding:6px 12px;font-size:12.5px}
.rp-actions select{width:auto;min-width:130px;padding:6px 10px;font-size:12.5px}

/* ---------- copier un lien ---------- */
.copier{cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--gris);border:1px solid var(--gris2);border-radius:5px;padding:4px 8px;
  color:var(--bleu)}
.copier:hover{background:#E6EEF6;border-color:#9EC0DE}
.btn.copier{font-family:inherit;font-size:13px;padding:8px 14px}
.copie-ok{background:#E9F8F1;border-color:#A8E3C8;color:#1E6B47}
.copie-ko{background:#FDECEC;border-color:#F2B8B8;color:#9B2C2C}
.lien-perso{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.lien-perso input{flex:1;min-width:220px}

/* ---------- archives ---------- */
.bascule-archives{font-size:13px;color:var(--bleu);text-decoration:none;white-space:nowrap;
  padding:9px 4px}
.bascule-archives:hover{text-decoration:underline}
.bascule-archives.on{color:var(--vertf);font-weight:600}
.en-ligne{display:inline}
.liste .lien-nu{font-size:13.5px}

/* ---------- suppression d'un compte ---------- */
.suppr-compte{margin-top:14px;border-top:1px solid var(--gris2);padding-top:12px}
.suppr-compte > summary{cursor:pointer;font-size:12.5px;color:#9B2C2C;list-style:none}
.suppr-compte > summary::-webkit-details-marker{display:none}
.suppr-compte > summary:hover{text-decoration:underline}
.suppr-compte p{margin-top:10px}
.suppr-compte .form-suppr{margin-top:10px}
.nom-compte{font-size:16px;color:var(--navy);font-weight:700;text-decoration:none}
.nom-compte:hover{color:var(--bleu);text-decoration:underline}

/* ---------- carte personnelle du tableau de bord ---------- */
.carte-perso{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.carte-perso-qui{border-left:1px solid var(--gris2);padding-left:26px}
.carte-perso p{margin:0}
/* Les liens de la carte sont bleus, mais pas les boutons : sans cette
   exception, un bouton bleu recevrait un texte bleu, donc invisible. */
.carte-perso a:not(.btn){color:var(--bleu)}
@media (max-width:760px){
  .carte-perso{grid-template-columns:1fr;gap:20px}
  .carte-perso-qui{border-left:none;border-top:1px solid var(--gris2);padding-left:0;padding-top:18px}
}

/* ---------- pied de page ---------- */
.pied{max-width:1080px;margin:34px auto 0;padding:18px 20px 0;border-top:1px solid var(--gris2);
  color:var(--muted);font-size:12px;text-align:center}
.bg-navy .pied,body.bg-navy .pied{border-top:none;color:#8FA6BC;margin-top:22px;padding-top:0}
.wrap .pied,.wrap-narrow .pied{margin-top:10px;padding-left:0;padding-right:0}

/* ---------- colonne actions : icônes + libellé au survol ---------- */
td.actions{white-space:nowrap;text-align:right}
.act{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:6px;color:var(--bleu);text-decoration:none;vertical-align:middle;
  margin-left:2px;position:relative}
.act:hover,.act:focus-visible{background:var(--gris);color:#0F3560}
.act-lib{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--navy);color:#fff;
  font-size:11.5px;line-height:1.3;white-space:nowrap;padding:5px 8px;border-radius:5px;
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;z-index:20}
.act:hover .act-lib,.act:focus-visible .act-lib{opacity:1;visibility:visible}

/* un montant ne se coupe jamais en deux lignes */
td.montant,th.montant{white-space:nowrap}

/* ---------- liste des dossiers : tenir dans la largeur, sans scroll ----------
   Chaque valeur reste entière, mais la date passe sur deux lignes et la
   référence est composée plus petit : c'est la colonne qui rétrécit, jamais
   le tableau qui déborde. */
.liste{table-layout:auto}
.liste thead th{padding:9px 8px;font-size:11px;letter-spacing:.03em}
.liste tbody td{padding:10px 8px}
.liste td.ref{white-space:nowrap}
.liste td.ref a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--bleu)}
.liste .tag{white-space:nowrap}
.liste td.date{white-space:nowrap;color:var(--muted)}
.dt{display:inline-block;line-height:1.25}
.dt b{display:block;font-weight:400;font-size:12.5px;color:var(--ardoise)}
.dt i{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}

/* Écrans étroits : on retire les colonnes secondaires plutôt que d'imposer un
   défilement horizontal. Le détail complet reste sur la fiche du dossier. */
@media (max-width:1000px){
  .liste .c-depuis{display:none}
}
@media (max-width:880px){
  .liste .c-recu{display:none}
}
@media (max-width:760px){
  .liste .c-com{display:none}
  .liste thead th{font-size:10.5px;padding:8px 6px}
  .liste tbody td{padding:9px 6px}
}

/* Téléphone : la liste garde l'essentiel — référence, société, prime, statut. */
@media (max-width:560px){
  .liste .montant{display:none}
  .liste thead th{font-size:10px;padding:7px 4px}
  .liste tbody td{font-size:12.5px;padding:8px 4px}
  .liste td.ref{white-space:normal}
  .liste td.ref a{font-size:11px;word-break:break-all}
  .liste .tag{font-size:10.5px;padding:3px 7px}
  .act{width:24px;height:24px;margin-left:0}
}

/* « Résultats par commercial » : on retire les colonnes de détail avant de
   laisser le tableau déborder. Signés et prime signée restent toujours là. */
@media (max-width:820px){
  .equipe .e-ouv{display:none}
}
@media (max-width:640px){
  .equipe .e-taux,.equipe .e-lien{display:none}
}
@media (max-width:480px){
  .equipe .e-dem{display:none}
}

/* Notes et rappels partagent la largeur : dans une demi-colonne, les champs
   du formulaire de rappel s'empilent au lieu de se serrer. */
.deux-col .form-rappel .grid{grid-template-columns:1fr}
.deux-col > .card{margin-bottom:0}
.deux-col{margin-bottom:22px;align-items:start}

/* ---------- modification d'un compte ---------- */
.modif-compte{margin-top:14px}
.modif-compte > summary{cursor:pointer;font-size:12.5px;color:var(--bleu);list-style:none}
.modif-compte > summary::-webkit-details-marker{display:none}
.modif-compte > summary:hover{text-decoration:underline}
.form-identite{margin-top:10px;padding:14px 16px;background:#FAFBFB;border-radius:8px;
  border:1px solid var(--gris2)}
.form-identite label{margin-top:0}
.form-identite .btn{margin-top:14px}
.form-identite code{background:var(--gris);padding:1px 5px;border-radius:4px}
.tag-regie{background:#EDE7F6;color:#4A3B77}

/* ---------- bloc devis de la fiche dossier ---------- */
.devis-tete{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  align-items:flex-start;margin-top:14px;padding:16px 18px;background:#FAFBFB;
  border-radius:8px;border:1px solid var(--gris2)}
/* Le parcours, lui, ne disparaît jamais : c'est l'information que
   la liste existe pour donner. */

/* ── Le parcours du devis, en pastilles ──
   Six états, un seul atteint : les franchis en plein, celui où l'on est
   cerclé, les suivants en creux. Dit d'un coup d'œil ce qu'il reste à faire,
   ce qu'un libellé seul ne dit pas. */
.jauge{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.jauge i{width:7px;height:7px;border-radius:50%;background:var(--bord);display:block}
.jauge i.j-faite{background:var(--vertf)}
.jauge i.j-ici{background:var(--bleu);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--bleu) 22%,transparent)}
.jauge i.j-reste{background:var(--bord)}
.jauge-lib{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--encre)}

/* ── À débloquer maintenant ──
   En tête du tableau de bord, avant les chiffres : ce sont des clients qui
   veulent signer et n'y arrivent pas. */
.urg{border-left:4px solid var(--rouge)}
.urg-tete{display:flex;gap:14px;align-items:flex-start}
.urg-pastille{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;color:#fff}
.urg-pastille.urg-rouge{background:var(--rouge)}
.urg-pastille.urg-orange{background:#C98A15}
.urg-liste{list-style:none;margin:14px 0 0;padding:0}
.urg-liste li{display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:10px;margin-top:8px;font-size:13.5px;line-height:1.5;
  background:var(--gris);border-left:3px solid var(--bord)}
.urg-liste li.urg-rouge{border-left-color:var(--rouge);background:#FDF4F3}
.urg-liste li.urg-orange{border-left-color:#C98A15;background:#FFF9EE}
.urg-liste li > div{min-width:0}
.urg-liste .btn{flex:0 0 auto}
@media (max-width:680px){
  .urg-liste li{flex-direction:column;align-items:flex-start}
}
.etapes-txt{margin:14px 0 0 18px;padding:0;font-size:14px;line-height:1.6}
.etapes-txt li{margin-bottom:8px}

/* ---------- page publique de signature du devis ---------- */
.marque-client{display:flex;align-items:center;gap:10px;color:var(--navy);
  font-weight:700;letter-spacing:.28em;margin-bottom:20px}
.recap-devis{margin-top:20px;border:1px solid var(--gris2);border-radius:10px;overflow:hidden}
.recap-devis > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 16px;border-bottom:1px solid #F0F1F0;font-size:14.5px}
.recap-devis > div:last-child{border-bottom:none}
.recap-devis span{color:var(--muted)}
.recap-devis strong{color:var(--navy)}
.recap-devis .vert{color:var(--vertf)}
.recap-fort{background:var(--navy)}
.recap-fort span{color:#8FA6BC}
.recap-fort strong{color:#fff;font-size:18px}

/* ---------- parcours du devis, avec sa frontière de facturation ---------- */
.devis-etapes{list-style:none;margin:16px 0 0;padding:0;border:1px solid var(--gris2);
  border-radius:8px;overflow:hidden}
.devis-etapes li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 14px;border-bottom:1px solid #F0F1F0;font-size:13.5px;color:var(--muted)}
.devis-etapes li:last-child{border-bottom:none}
.devis-etapes li.faite{color:var(--ardoise);background:#FCFDFD}
.devis-etapes li.faite .de-lib{font-weight:600;color:var(--navy)}
.de-lib em{font-style:normal;font-size:11px;background:#FDF3E3;color:#8A5A12;
  padding:2px 7px;border-radius:10px;margin-left:8px;font-weight:600;white-space:nowrap}
.de-lib i{font-style:normal;font-size:11px;background:#E9F8F1;color:var(--vertf);
  padding:2px 7px;border-radius:10px;margin-left:8px;font-weight:600}
.de-quand{white-space:nowrap;font-size:12.5px}
.devis-force{margin-top:14px;border-top:1px solid var(--gris2);padding-top:12px}
.devis-force > summary{cursor:pointer;font-size:12.5px;color:#8A5A12;list-style:none}
.devis-force > summary::-webkit-details-marker{display:none}
.devis-force > summary:hover{text-decoration:underline}
.devis-force p{margin-top:10px}

/* ---------------------------------------------- envoi groupé des devis --- */
.chiffres-groupe{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.chiffres-groupe > div{flex:1 1 150px;min-width:0;background:var(--gris);border-radius:8px;
  padding:14px 16px;font-size:12.5px;color:var(--muted);line-height:1.35}
.chiffres-groupe span{display:block;font-size:21px;font-weight:700;color:var(--navy);
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chiffres-groupe > div:last-child span{color:var(--vertf)}

.jauge{height:9px;border-radius:5px;background:var(--gris2);overflow:hidden;margin-top:16px}
.jauge i{display:block;height:100%;background:var(--bleu);border-radius:5px;
  transition:width .35s ease}

.eg-ok{color:var(--vertf)}
.eg-num,.eg-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.eg-num{font-size:12px;white-space:nowrap}
.eg-ref{font-size:11px;color:var(--muted);margin-top:2px}

/* L'appel du tableau de bord vers l'envoi groupé. */
.carte-relance{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap}
.carte-relance p{margin:6px 0 0;font-size:13.5px;color:var(--muted);max-width:52ch}
.carte-relance .btn{margin-top:0;flex-shrink:0}

/* Le bouton de la colonne « écartés » ne se casse pas en trois lignes. */
.eg-bloques td .btn{white-space:nowrap}
.eg-bloques td:first-child{min-width:11ch}

/* ------------------------------------------------ le signataire du dossier */
.lien-modifier{font-size:12px;color:var(--bleu);text-decoration:none;
  border-bottom:1px dotted var(--bleu);margin-left:4px}
.lien-modifier:hover{border-bottom-style:solid}

/* Le changement de signataire est une action, pas une section : il tenait
   une barre pleine largeur pour un geste rare. Replié dans la barre
   d'actions, il garde sa place sans prendre la parole. */
.bloc-signataire{margin-top:0;border:0;padding:0;background:none;display:inline-block}
.bloc-signataire[open]{display:block;width:100%;margin-top:14px;
  border:1px solid var(--bord);border-radius:var(--r-encart);padding:14px 16px;
  background:var(--encart)}
.bloc-signataire > summary{border:1px solid var(--bord-champ);border-radius:var(--r-btn);
  padding:0 16px;height:44px;display:inline-flex;align-items:center;background:var(--carte)}
.bloc-signataire > summary:hover{background:#F7F8F6;text-decoration:none}
.bloc-signataire[open] > summary{border:0;padding:0;height:auto;background:none;
  margin-bottom:4px}
.bloc-signataire > summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--bleu);
  list-style:none}
.bloc-signataire > summary::-webkit-details-marker{display:none}
.bloc-signataire > summary::before{content:"✎";margin-right:8px;font-weight:400}
.bloc-signataire > summary:hover{text-decoration:underline}
.bloc-signataire p{margin:10px 0 0;font-size:12.5px;max-width:64ch}
.bloc-signataire .btn{margin-top:14px}

.deux-champs{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.deux-champs > div{flex:1 1 220px;min-width:0}
.deux-champs input{width:100%;box-sizing:border-box}

.verrou-signataire{margin-top:18px;font-size:12.5px;background:#FDF3E3;color:#8A5A12;
  border-radius:8px;padding:12px 16px;max-width:none}
.oblig{font-weight:400;color:#8A5A12;font-size:11.5px}
.eg-alerte{margin-top:5px;font-size:11.5px;color:#8A5A12;line-height:1.35;max-width:26ch}

/* ---------- le lien public, replié ---------- */
.lien-diffusion > summary{cursor:pointer;font-size:13px;color:var(--bleu);
  list-style:none;display:inline-flex;align-items:center;gap:7px}
.lien-diffusion > summary::-webkit-details-marker{display:none}
.lien-diffusion > summary::before{content:'+';font-weight:700;font-size:15px;line-height:1}
.lien-diffusion[open] > summary::before{content:'–'}
.lien-diffusion > summary:hover{text-decoration:underline}

/* ── Le verdict de type de station (A / B / C) ──
   La couleur dit l'état d'un coup d'œil ; le texte dit pourquoi, parce
   qu'une couleur seule ne se défend pas devant un contrôle. Ces règles
   servent la saisie directe ET la fiche du dossier : un même verdict ne
   doit pas avoir deux apparences selon la page où on le lit. */
.tp{margin-top:14px;padding:13px 16px;border-radius:9px;border-left:4px solid}
.tp-ok{background:#E8F3EC;border-color:#2F7D52}
.tp-doute{background:#FFF6E5;border-color:#C98A15}
.tp-inconnu{background:#EEF1F4;border-color:#7A8790}
.tp-bloque{background:#FBEAE8;border-color:#B3261E}
.tp-tete{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.tp-badge{font-weight:700;font-size:14.5px}
.tp-conf{font-size:12.5px;font-weight:600;opacity:.75}
.tp-motif{margin:8px 0 0;font-size:13px;line-height:1.5}
.tp-detail{margin-top:10px}
.tp-detail > summary{cursor:pointer;font-size:12.5px;color:var(--bleu)}
.tp-detail ul{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.6}

/* Les deux questions posées quand les sources n'ont pas suffi. Elles ne
   demandent jamais un type : elles demandent ce qui a été constaté. */
.tp-q{margin-top:12px;display:grid;gap:16px}
.tp-q1 label{display:block;font-weight:600;font-size:13.5px;margin-bottom:2px}
.tp-q1 .tp-aide{margin:0 0 7px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.tp-q1 select,.tp-q1 input[type=text]{width:100%;max-width:520px}
@media (min-width:760px){.tp-q{grid-template-columns:1fr 1fr}
  .tp-q1:last-child{grid-column:1 / -1}}

/* ── Le voile d'attente ──
   Douze secondes sans rien à lire, c'est long ; douze secondes pendant
   lesquelles on voit ce qui se passe, c'est court. Les étapes affichées
   sont les vraies, dans l'ordre réel. */
.att{position:fixed;inset:0;background:rgba(16,28,42,.93);z-index:200;
  display:none;align-items:center;justify-content:center;padding:24px}
.att.on{display:flex}
.att-b{background:#fff;border-radius:14px;padding:28px 30px;max-width:480px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.att-t{font-size:18px;font-weight:700;margin:0 0 4px}
.att-s{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.att-l{list-style:none;margin:0;padding:0;display:grid;gap:11px}
/* « display:grid » l'emporte sur le display:none implicite de [hidden] :
   sans cette ligne, les deux jeux d'étapes s'affichaient l'un sous l'autre. */
.att-l[hidden]{display:none}
.att-l li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  color:#93A2B4;transition:color .3s}
.att-l li .p{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid #D3DBE4;
  margin-top:1px;position:relative;transition:all .3s}
.att-l li.en{color:var(--encre);font-weight:600}
.att-l li.en .p{border-color:var(--bleu);
  border-top-color:transparent;animation:att-r .8s linear infinite}
.att-l li.ok{color:#4C5C6E}
.att-l li.ok .p{border-color:var(--vertf);background:var(--vertf)}
.att-l li.ok .p::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.att-l li em{font-style:normal;display:block;font-size:12px;font-weight:400;
  color:var(--muted);margin-top:2px}
@keyframes att-r{to{transform:rotate(360deg)}}
.att-p{margin:20px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* ════════════════════════════════════════════════════════════════════
   LA FICHE D'UN DOSSIER
   ════════════════════════════════════════════════════════════════════
   Avant : dix blocs de même poids, empilés. Tout se valait, donc rien
   ne disait quoi faire. Quatre zones maintenant, dans l'ordre où l'on
   a besoin d'elles : qui est le client → ce qui bloque → ce sur quoi
   on travaille → ce qu'on consulte.
   ------------------------------------------------------------------ */
.wrap-fiche{max-width:1220px;margin:0 auto;padding:22px 26px 60px}

/* ── Le corps : une colonne de travail et un rail de suivi ──
   flex, pas grid. « grid-template-columns:1fr 340px » rendait la colonne
   principale plus étroite que le rail sur écran moyen ; flex-grow:100 lui
   garantit tout l'espace libre, et le rail passe dessous quand il n'y a
   plus la place, sans media query. */
.fd-corps{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:16px}
.fd-travail{flex:100 1 480px;display:flex;flex-direction:column;gap:16px;min-width:0}
.fd-rail{flex:1 1 300px;display:flex;flex-direction:column;gap:16px;min-width:0}
.fd-rail .card{padding:19px 20px}
.fd-rail h2{font-size:17px}

/* ── L'en-tête du dossier ── */
.fd-tete{display:flex;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;
  align-items:flex-start}
.fd-ident{flex:1 1 420px;min-width:0}
.fd-ident h1{font-family:var(--titre);font-size:27px;font-weight:600;color:var(--encre);
  line-height:1.25;text-wrap:pretty;margin:2px 0 0}
/* Nom, e-mail et téléphone en éléments SÉPARÉS : dans un seul nœud de
   texte, le téléphone repassait à la ligne et chevauchait la suivante. */
.fd-contact{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:13.5px;
  line-height:1.5}
.fd-contact b{font-weight:600;color:var(--encre3)}
.fd-meta{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:5px}
.fd-meta2{font-size:13px;color:var(--muted);margin-top:3px}
.fd-chiffre{text-align:right;flex:none}
.fd-chiffre .m{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--bleu);
  margin-top:10px;letter-spacing:-.01em}
.fd-chiffre .s{font-size:12px;color:var(--muted);margin-top:2px}
.fd-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--bord-f)}
.fd-actions .fd-preuve{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right}

/* ── « À traiter maintenant » ──
   Le seul bloc de la page qui dise quoi faire. Il n'apparaît que s'il
   reste quelque chose à faire : une alerte permanente cesse d'être lue. */
.fd-urgent{border:1px solid var(--ambre-bord);border-radius:var(--r-carte);overflow:hidden;
  background:var(--carte);margin-top:16px}
.fd-urgent-tete{background:var(--ambre-fond);border-bottom:1px solid var(--ambre-bord2);
  padding:13px 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fd-urgent-tete .eyebrow{color:var(--ambre)}
.fd-pastille{background:var(--ambre);color:#fff;font-family:var(--mono);font-size:11px;
  font-weight:600;min-width:19px;height:19px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 6px}
.fd-urgent-tete p{font-size:12.5px;color:var(--ambre-txt);margin:0}
.fd-urgent-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.fd-urgent-grille > div{padding:18px 22px;border-left:1px solid var(--bord-f)}
.fd-urgent-grille > div:first-child{border-left:0}
.fd-urgent h3{font-size:14.5px;font-weight:600;color:var(--encre);margin:0}
.fd-urgent p.q{font-size:13px;color:var(--encre3);margin:6px 0 13px;line-height:1.5}
/* Ce qui bloque vraiment porte une barre ambre ; ce qui mérite seulement
   un regard reste sobre. Sans cette différence, les deux se valent. */
.fd-urgent-grille > div.bloque{box-shadow:inset 3px 0 0 var(--ambre)}
.fd-urgent-grille > div.bloque:first-child{box-shadow:inset 3px 0 0 var(--ambre)}

/* ── Les replis ──
   Six lignes sur sept vides, un formulaire de rappel qui prend le tiers
   de la page, deux actions destructrices en pleine largeur : ce qui sert
   rarement se replie, et se déplie d'un clic. */
.fd-repli{margin-top:14px}
.fd-repli > summary{cursor:pointer;font-size:13px;color:var(--bleu);font-weight:600;
  list-style:none;display:inline-flex;align-items:center;gap:7px;padding:2px 0}
.fd-repli > summary::-webkit-details-marker{display:none}
/* Triangle dessiné en CSS plutôt qu'au caractère : « ▸ » n'existe pas dans
   IBM Plex, le navigateur allait le chercher dans une autre police et la
   flèche n'avait ni la bonne taille ni la bonne couleur. */
.fd-repli > summary::before{content:'';width:0;height:0;
  border:5px solid transparent;border-left-color:currentColor;
  transition:transform .15s;transform-origin:3px 50%}
.fd-repli[open] > summary::before{transform:rotate(90deg)}
.fd-repli > summary:hover{color:var(--bleu-f)}
.fd-repli-corps{padding-top:14px}

/* ── Le parcours du devis ── */
.fd-parcours-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.fd-compteur{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--encre3);
  background:var(--gris);border-radius:9px;padding:2px 8px}

/* ── La zone qui ne se rattrape pas ── */
.fd-danger{background:var(--rouge-fond);border:1px solid var(--rouge-bord);
  border-radius:var(--r-encart);padding:16px 18px;margin-top:14px}
.fd-danger .eyebrow{color:var(--rouge)}
.fd-danger p{color:var(--rouge-txt);font-size:12.5px;margin:7px 0 0;line-height:1.5}
.fd-danger .btn-danger{background:var(--rouge);border-color:var(--rouge);color:#fff}
.fd-danger .btn-danger:hover{background:var(--rouge-f);border-color:var(--rouge-f)}

@media (max-width:620px){
  .wrap-fiche{padding:18px 14px 48px}
  .fd-ident h1{font-size:22px}
  .fd-chiffre{text-align:left}
  .fd-actions .fd-preuve{margin-left:0;text-align:left;width:100%}
}

/* La carte où l'on vient d'agir : un liseré, le temps de la retrouver. */
.site-retour{box-shadow:0 0 0 2px var(--bleu);border-radius:var(--r-encart)}

/* Le raccourci vers le vrai devis, sur un dossier dont le pré-devis n'a
   jamais été signé. Mis en avant sans crier : c'est le chemin normal
   désormais, pas une alerte. */
.bloc-direct{margin-top:16px;padding:16px 18px;border:1px solid var(--bord);
  border-left:3px solid var(--vertf);border-radius:10px;background:var(--gris)}
.bloc-direct h3{color:var(--encre)}

/* Les copies brutes des fichiers internes, dans la barre du haut. Annoncées
   pour ce qu'elles sont : elles ne doivent plus être confondues avec le
   tableau de dépôt CEE, qui les précède. */
.nav-brut{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  color:#6E8398;letter-spacing:.02em}
.nav-brut a{font-size:11.5px;opacity:.75}
.nav-brut a:hover{opacity:1}