/* =============================================================
   PEGASUS — Espace client
   Feuille de style unique
   -------------------------------------------------------------
   Charte reprise du site ITAQUE : violet profond et jaune,
   grotesque géométrique gras, angles arrondis. Le violet porte
   la marque, le jaune ne sert qu'aux appels à l'action, la menthe
   dit ce qui est acquis, le lilas ce qui est en attente du cabinet.
   ============================================================= */

/* ---------- 0. Polices ----------
   Archivo et Inter sont servis depuis ce serveur, pas depuis Google :
   le navigateur du client ne communique son adresse IP à personne
   d'autre qu'à vous. Licence SIL Open Font License 1.1. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("polices/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("polices/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("polices/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("polices/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Jetons ---------- */
:root{
  --violet-nuit:#221052;
  --violet:#3A1E8F;
  --violet-vif:#5B21E0;

  --jaune:#EBD11A;
  --jaune-clair:#F7E667;
  --menthe:#93E7B4;
  --lilas:#DCA9F2;
  --rouge:#E4572E;

  --creme:#EAE6DE;
  --ivoire:#FAF9F5;
  --blanc:#FFFFFF;
  --encre:#14121F;
  --encre-douce:#3A3550;
  --gris:#6E6880;
  --gris-clair:#BFB6E0;
  --trait:rgba(20,18,31,.09);

  --degrade:linear-gradient(158deg, #5B21E0 0%, #3A1E8F 48%, #221052 100%);

  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte:"Inter", "Helvetica Neue", Arial, sans-serif;
  --etiq:"Archivo", "Helvetica Neue", Arial, sans-serif;

  --r:18px;
  --r-petit:10px;
  --pilule:999px;

  --gouttiere:clamp(20px, 5vw, 64px);
  --largeur:1240px;
  --transition:280ms cubic-bezier(.2,.6,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}

/* L'attribut « hidden » doit toujours l'emporter.
   Le navigateur lui applique display:none, mais cette règle vient de la
   feuille par défaut : la moindre classe qui déclare un display la bat, et
   l'élément reste visible alors que le script le croit caché. C'est ce qui
   maintenait le menu du compte ouvert en permanence. Une règle globale vaut
   mieux qu'un correctif par cas : tout ce qui porte « hidden » disparaît. */
[hidden]{display:none !important}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px}
body{
  margin:0;
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
main{flex:1}

:focus-visible{outline:3px solid var(--violet-vif); outline-offset:3px; border-radius:4px}
.page-acces :focus-visible,.tete--dossier :focus-visible{outline-color:var(--jaune)}

.enveloppe{max-width:var(--largeur); margin-inline:auto; padding-inline:var(--gouttiere)}
.bande{padding-block:clamp(40px,5vw,72px)}
.bande--serree{padding-block:clamp(28px,3.4vw,44px)}

.saut-contenu{
  position:absolute; left:-9999px;
  background:var(--violet); color:var(--ivoire);
  padding:12px 20px; z-index:200; border-radius:var(--r-petit);
}
.saut-contenu:focus{left:12px; top:12px}

/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-.03em; margin:0}
h1{font-size:clamp(1.9rem, 3.6vw, 2.9rem)}
h2{font-size:clamp(1.25rem, 2vw, 1.6rem)}
h3{font-size:1.06rem; font-weight:700; letter-spacing:-.015em; line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.surtitre{
  font-family:var(--etiq); font-size:.68rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--violet-vif); margin:0 0 14px;
}
.surtitre a{color:inherit; text-decoration:none; border-bottom:2px solid var(--jaune)}
.sourdine{color:var(--gris); font-size:.9rem}
.donnee{font-family:var(--etiq); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris)}
.urgent{color:var(--rouge)}
.non-lu{color:var(--violet-vif); font-weight:600}

/* ---------- 4. En-tête ---------- */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(250,249,245,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
.entete__interieur{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px}

.marque{
  font-family:var(--display); font-size:1.4rem; font-weight:800; letter-spacing:-.03em;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px; color:var(--encre);
}
.marque__signe{width:1em; height:1.15em; color:var(--violet-vif); flex:0 0 auto; transition:color var(--transition)}
.marque:hover .marque__signe{color:var(--jaune)}
.marque__mention{
  font-family:var(--etiq); font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
  border-left:1px solid var(--trait); padding-left:9px; margin-left:2px;
}
/* Le nom de la marque et, sous lui, la mention du cabinet. */
.marque__bloc{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.marque__nom{display:block; line-height:1}
.marque__signature{
  font-family:var(--etiq); font-size:.54rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris); line-height:1.2; margin-top:4px;
  white-space:nowrap;
}
.marque--clair{color:var(--ivoire); font-size:1.9rem}
.marque--clair .marque__signature{color:var(--gris-clair); font-size:.62rem; margin-top:6px}
.marque--clair .marque__signe{color:var(--jaune)}

.navigation{display:flex; align-items:center; gap:clamp(12px,2vw,26px)}
.navigation > a{
  font-family:var(--etiq); font-size:.74rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--encre-douce);
  padding:7px 2px; border-bottom:2px solid transparent;
  transition:border-color var(--transition), color var(--transition);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.navigation > a:hover{color:var(--violet-vif); border-bottom-color:var(--jaune)}
.navigation > a[aria-current="page"]{border-bottom-color:var(--jaune); color:var(--encre)}

.pastille-compte{
  font-family:var(--etiq); font-size:.62rem; font-weight:700; letter-spacing:.04em;
  background:var(--jaune); color:var(--encre);
  border-radius:var(--pilule); padding:2px 7px; line-height:1.5;
}
.pastille-compte--pleine{background:var(--violet-vif); color:var(--ivoire); text-transform:none; letter-spacing:.06em}

/* Menu du compte */
.compte{position:relative}
.compte__bouton{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:1px solid var(--trait); border-radius:var(--pilule);
  padding:5px 14px 5px 5px; cursor:pointer; color:var(--encre);
  transition:border-color var(--transition), background var(--transition);
}
.compte__bouton:hover{border-color:var(--violet-vif); background:var(--blanc)}
.compte__initiales{
  width:32px; height:32px; border-radius:50%;
  background:var(--degrade); color:var(--ivoire);
  display:grid; place-items:center;
  font-family:var(--etiq); font-size:.72rem; font-weight:700; letter-spacing:.02em;
}
.compte__nom{font-family:var(--etiq); font-size:.75rem; font-weight:600; letter-spacing:.04em}
.compte__menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:120;
  min-width:250px; background:var(--blanc);
  border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:0 18px 44px -22px rgba(34,16,82,.6);
  padding:8px; display:flex; flex-direction:column;
}
.compte__entete{
  font-size:.8rem; color:var(--gris);
  padding:10px 12px 12px; margin:0;
  border-bottom:1px solid var(--trait); word-break:break-all;
}
.compte__menu a{
  text-decoration:none; font-size:.92rem;
  padding:10px 12px; border-radius:var(--r-petit);
  transition:background var(--transition), color var(--transition);
}
.compte__menu a:hover{background:rgba(220,169,242,.24); color:var(--violet)}
.compte__sortie{color:var(--violet-vif); font-weight:600; border-top:1px solid var(--trait); margin-top:4px; padding-top:12px}

/* ---------- 5. Boutons ---------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--etiq); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:13px 24px; border-radius:var(--pilule);
  background:var(--violet-vif); color:var(--ivoire);
  border:2px solid var(--violet-vif); cursor:pointer;
  transition:background var(--transition), color var(--transition),
             border-color var(--transition), transform var(--transition);
}
.bouton:hover{background:var(--violet); border-color:var(--violet); color:var(--blanc); transform:translateY(-1px)}
.bouton--jaune{background:var(--jaune); border-color:var(--jaune); color:var(--encre)}
.bouton--jaune:hover{background:var(--jaune-clair); border-color:var(--jaune-clair); color:var(--encre)}
.bouton--fantome{background:transparent; color:var(--violet); border-color:rgba(58,30,143,.32)}
.bouton--fantome:hover{background:var(--violet); color:var(--ivoire); border-color:var(--violet)}
.bouton--danger{background:var(--rouge); border-color:var(--rouge); color:var(--blanc)}
.bouton--danger:hover{background:#c8451f; border-color:#c8451f}
.bouton--petit{padding:9px 16px; font-size:.66rem; letter-spacing:.08em}
.bouton--large{width:100%; padding:15px 24px}
.bouton--patiente{opacity:.55; cursor:progress}
.bouton:disabled{opacity:.55; cursor:not-allowed; transform:none}

.lien-discret{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--etiq); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--violet-vif); text-decoration:none;
  border-bottom:2px solid rgba(235,209,26,.75);
}
.lien-discret:hover{border-bottom-color:var(--violet-vif)}
.lien-discret--danger{color:var(--rouge); border-bottom-color:rgba(228,87,46,.4)}
.lien-discret--danger:hover{border-bottom-color:var(--rouge)}
.en-ligne{display:inline}
.en-ligne--refus{display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap}
.en-ligne--refus input{
  font-family:var(--texte); font-size:.86rem; padding:8px 12px; min-width:min(320px, 100%);
  border:1px solid var(--trait); border-radius:var(--pilule); background:var(--ivoire);
}

/* ---------- 6. Titre de page ---------- */
.tete{background:var(--blanc); border-bottom:1px solid var(--trait); padding-block:clamp(26px,3.2vw,40px)}
.tete__interieur{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.tete__actions{display:flex; gap:10px; flex-wrap:wrap}
.tete__meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:14px 0 0; font-size:.92rem; color:var(--gris)}
.tete__meta a{color:var(--violet-vif); text-decoration:none; border-bottom:1px solid rgba(91,33,224,.3)}

.tete--dossier{background:var(--degrade); color:var(--creme); border-bottom:none}
.tete--dossier h1{color:var(--blanc)}
.tete--dossier .surtitre{color:var(--jaune)}
.tete--dossier .surtitre a{border-bottom-color:rgba(235,209,26,.6)}
.tete--dossier .tete__meta{color:var(--gris-clair)}
.tete--dossier .tete__meta a{color:var(--jaune); border-bottom-color:rgba(235,209,26,.45)}
.tete--dossier .bouton--fantome{color:var(--creme); border-color:rgba(234,230,222,.45)}
.tete--dossier .bouton--fantome:hover{background:var(--creme); color:var(--violet-nuit); border-color:var(--creme)}

.echeance{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(234,230,222,.24);
  border-radius:var(--r); padding:16px 22px; min-width:200px;
}
.echeance--proche{border-color:var(--jaune); background:rgba(235,209,26,.16)}
.echeance__libelle{
  display:block; font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--jaune);
}
.echeance__date{display:block; font-family:var(--display); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; color:var(--blanc); margin-top:6px}
.echeance__reste{display:block; font-size:.85rem; color:var(--gris-clair); margin-top:3px}

/* ---------- 7. Mise en colonnes ---------- */
.colonnes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(20px,2.4vw,32px); align-items:start}
.colonnes__principale{display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); min-width:0}
.colonnes__cote{display:flex; flex-direction:column; gap:16px; position:sticky; top:96px}

.bloc{
  background:var(--blanc);
  border:1px solid var(--trait);
  border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px);
}
.bloc__entete{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--trait);
}

.encart{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:22px 24px}
.encart h3{color:var(--violet); margin-bottom:12px}
.encart--discret{background:transparent; border-style:dashed}
.encart__nom{font-family:var(--display); font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin-bottom:2px}
.encart p{margin-bottom:.7em}

/* ---------- 8. Chiffres du tableau de bord ---------- */
.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px; margin-bottom:clamp(20px,2.4vw,30px);
}
.chiffre{
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  padding:20px 22px; text-decoration:none; display:block;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.chiffre:hover{border-color:var(--violet-vif); transform:translateY(-2px); box-shadow:0 14px 32px -22px rgba(34,16,82,.6)}
.chiffre__valeur{
  display:block; font-family:var(--display); font-size:2.1rem; font-weight:800;
  line-height:1; letter-spacing:-.04em; color:var(--violet);
}
.chiffre__libelle{
  display:block; margin-top:9px;
  font-family:var(--etiq); font-size:.63rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
}
.chiffre--actif{border-color:var(--jaune); background:rgba(235,209,26,.1)}
.chiffre--actif .chiffre__valeur{color:var(--violet-nuit)}
.chiffre--urgent{border-color:rgba(228,87,46,.45); background:rgba(228,87,46,.07)}
.chiffre--urgent .chiffre__valeur{color:var(--rouge)}

/* ---------- 9. Cartes ---------- */
.cartes{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.carte{
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  padding:24px 24px 26px; text-decoration:none; display:block;
  position:relative; overflow:hidden;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--degrade)}
.carte:hover{transform:translateY(-2px); box-shadow:0 16px 36px -24px rgba(34,16,82,.6); border-color:rgba(91,33,224,.3)}
.carte--signal{border-color:var(--jaune)}
.carte__entete{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.carte h3{color:var(--violet); margin-bottom:6px}
.carte__meta{font-size:.85rem; color:var(--gris); margin:6px 0 0}
.carte__extrait{font-size:.9rem; color:var(--encre-douce); margin:10px 0 0}
.carte__alerte{
  margin:14px 0 0; font-family:var(--etiq); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--violet-nuit);
  background:rgba(235,209,26,.35); border-radius:var(--pilule);
  padding:6px 13px; display:inline-block;
}

/* ---------- 10. Jauge d'avancement ---------- */
.jauge{
  height:8px; border-radius:var(--pilule); background:var(--creme);
  overflow:hidden; margin:14px 0 8px;
}
.jauge span{display:block; height:100%; border-radius:var(--pilule); background:var(--degrade)}
.jauge--large{height:12px; margin:4px 0 26px}
.jauge--fine{height:6px; margin:0 0 4px; max-width:120px}

/* ---------- 11. Jalons (le déroulé) ---------- */
.jalons{list-style:none; margin:0; padding:0; position:relative}
.jalons::before{
  content:""; position:absolute; left:7px; top:10px; bottom:10px;
  width:2px; background:var(--creme); border-radius:2px;
}
.jalon{position:relative; padding:0 0 24px 34px}
.jalon:last-child{padding-bottom:0}
.jalon::before{
  content:""; position:absolute; left:0; top:6px;
  width:16px; height:16px; border-radius:50%;
  background:var(--blanc); border:3px solid var(--gris-clair); z-index:1;
}
.jalon--fait::before{background:var(--menthe); border-color:var(--menthe)}
.jalon--en_cours::before{background:var(--jaune); border-color:var(--jaune); box-shadow:0 0 0 5px rgba(235,209,26,.25)}
.jalon__titre{
  font-family:var(--display); font-size:1.02rem; font-weight:700; letter-spacing:-.015em;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; line-height:1.35;
}
.jalon--a_venir .jalon__titre{color:var(--gris)}
.jalon--fait .jalon__titre{color:var(--encre)}
.jalon--en_cours .jalon__titre{color:var(--violet)}
.jalon__detail{font-size:.92rem; color:var(--encre-douce); margin:6px 0 0}
.jalon__date{font-size:.82rem; color:var(--gris); margin:5px 0 0}
.jalon__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px}
.jalons--pilotage .jalon{padding-bottom:28px}

/* ---------- 12. Fil d'informations ---------- */
.fil-infos{list-style:none; margin:24px 0 0; padding:0}
.info{padding:20px 0; border-top:1px solid var(--trait)}
.info:first-child{border-top:none; padding-top:4px}
.info--important{
  border-left:4px solid var(--jaune); padding-left:18px;
  background:rgba(235,209,26,.07); border-radius:0 var(--r-petit) var(--r-petit) 0;
}
.info__date{font-family:var(--etiq); font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin:0 0 6px}
.info h3{color:var(--violet); margin-bottom:8px}
.info__corps{font-size:.96rem; color:var(--encre-douce)}
.info form{margin-top:10px}

/* ---------- 13. Pièces ---------- */
.pieces{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.piece{
  border:1px solid var(--trait); border-radius:var(--r);
  padding:18px 20px; background:var(--ivoire);
  border-left:4px solid var(--gris-clair);
}
.piece--attendue{border-left-color:var(--jaune)}
.piece--deposee{border-left-color:var(--lilas)}
.piece--validee{border-left-color:var(--menthe)}
.piece--refusee{border-left-color:var(--rouge); background:rgba(228,87,46,.05)}
.piece__tete{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.piece__precisions{font-size:.88rem; color:var(--gris); margin:5px 0 0}
.piece__precisions a{color:var(--violet-vif)}
.piece__motif{font-size:.9rem; color:var(--rouge); margin:10px 0 0}
.piece__fichier{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0; font-size:.9rem}
.piece__actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:14px}

.format{
  font-family:var(--etiq); font-size:.58rem; font-weight:700; letter-spacing:.09em;
  background:var(--violet); color:var(--ivoire);
  padding:4px 8px; border-radius:5px; flex:0 0 auto;
}

/* Dépôt de fichier */
.depot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.depot__champ{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  border:2px dashed rgba(91,33,224,.32); border-radius:var(--pilule);
  padding:9px 18px; cursor:pointer; background:var(--blanc);
  transition:border-color var(--transition), background var(--transition);
  max-width:100%;
}
.depot__champ:hover{border-color:var(--violet-vif); background:rgba(220,169,242,.14)}
.depot__intitule{
  font-family:var(--etiq); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--violet);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(320px, 60vw);
}
.depot__champ input[type="file"]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.depot__description{
  flex:1 1 220px; font-family:var(--texte); font-size:.92rem;
  padding:10px 16px; border:1px solid var(--trait);
  border-radius:var(--pilule); background:var(--blanc); color:var(--encre);
}
.depot-libre{margin-top:26px; padding-top:22px; border-top:1px dashed var(--trait)}
.depot-libre h3{color:var(--violet); margin-bottom:4px}

/* ---------- 14. Listes de fichiers ---------- */
.liste-fichiers{list-style:none; margin:16px 0 0; padding:0}
.liste-fichiers li{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--trait); font-size:.93rem;
}
.liste-fichiers li:last-child{border-bottom:none}
.liste-fichiers a{color:var(--violet-vif); text-decoration:none; border-bottom:1px solid rgba(91,33,224,.28); word-break:break-word}
.liste-fichiers a:hover{border-bottom-color:var(--violet-vif)}
.liste-fichiers--serree li{padding:9px 0; font-size:.88rem}

.liste-sobre{list-style:none; margin:0; padding:0}
.liste-sobre li{padding:11px 0; border-bottom:1px solid var(--trait); font-size:.93rem}
.liste-sobre li:last-child{border-bottom:none}
.liste-sobre a{color:inherit; text-decoration:none}
.liste-sobre a:hover{color:var(--violet-vif)}
.liste-sobre .sourdine{display:block; font-size:.8rem; margin-top:3px}

/* ---------- 15. Fil d'échanges ---------- */
.fil{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:14px; max-height:560px; overflow-y:auto}
.bulle{
  background:var(--ivoire); border:1px solid var(--trait);
  border-radius:var(--r); border-top-left-radius:5px;
  padding:16px 20px; max-width:min(660px, 92%);
}
.bulle--moi{
  background:rgba(220,169,242,.16); border-color:rgba(91,33,224,.18);
  border-top-left-radius:var(--r); border-top-right-radius:5px;
  align-self:flex-end;
}
.bulle__tete{display:flex; align-items:baseline; gap:12px; margin:0 0 8px; flex-wrap:wrap}
.bulle__tete strong{font-family:var(--etiq); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet)}
.bulle__objet{font-weight:600; margin:0 0 6px}
.bulle__corps{font-size:.96rem; color:var(--encre-douce)}
.repondre{border-top:1px solid var(--trait); padding-top:22px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.repondre .champ{width:100%}

/* ---------- 16. Formulaires ---------- */
.formulaire{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px 24px}
.formulaire--serre{gap:16px 20px}
.champ{display:flex; flex-direction:column; min-width:0}
.champ--large{grid-column:1/-1}
.champ--options{flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px}
.champ label{
  font-family:var(--etiq); font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris); margin-bottom:8px;
}
.champ input,.champ select,.champ textarea{
  font-family:var(--texte); font-size:1rem;
  padding:12px 16px;
  background:var(--blanc);
  border:1px solid rgba(20,18,31,.16);
  border-radius:var(--r-petit);
  color:var(--encre); resize:vertical; width:100%;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--violet-vif); box-shadow:0 0 0 3px rgba(91,33,224,.13);
}
.champ input:disabled{background:var(--creme); color:var(--gris)}
.champ__aide{font-size:.82rem; color:var(--gris); margin:8px 0 0}
.champ__aide a{color:var(--violet-vif)}
.duo-champs{display:grid; grid-template-columns:110px 1fr; gap:14px}

.cases{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:9px; padding:18px; margin-top:4px;
  border:1px solid rgba(20,18,31,.14); border-radius:var(--r); background:var(--blanc);
  max-height:280px; overflow-y:auto;
}
.case{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.92rem; color:var(--encre); line-height:1.45}
.case input{width:auto; margin-top:4px; accent-color:var(--violet-vif); flex:0 0 auto}
.cases .case{font-family:var(--texte); font-weight:400; letter-spacing:normal; text-transform:none; margin-bottom:0}
.case--accord{margin:4px 0 8px; font-size:.9rem; color:var(--gris-clair)}
.case--accord a{color:var(--jaune)}

/* Filtres */
.filtres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px; padding:22px; margin-bottom:18px;
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  align-items:end;
}
.filtre label{
  display:block; font-family:var(--etiq); font-size:.63rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris); margin-bottom:8px;
}
.filtre input,.filtre select{
  width:100%; font-family:var(--texte); font-size:.96rem;
  padding:11px 14px; background:var(--ivoire);
  border:1px solid rgba(20,18,31,.16); border-radius:var(--pilule); color:var(--encre);
}
.filtre input:focus,.filtre select:focus{outline:none; border-color:var(--violet-vif)}
.filtre--bouton{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.barre-resultats{
  font-family:var(--etiq); font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin:0 0 18px;
}

/* Repli (details) */
.repli{margin-top:24px; border-top:1px solid var(--trait); padding-top:18px}
.repli summary{
  cursor:pointer; font-family:var(--etiq); font-size:.72rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--violet-vif);
  list-style:none; display:inline-flex; align-items:center; gap:8px;
}
.repli summary::-webkit-details-marker{display:none}
.repli summary::before{content:"+"; font-size:1.1rem; line-height:1}
.repli[open] summary::before{content:"–"}
.repli > *:not(summary){margin-top:18px}
.repli--cadre{
  border:1px solid var(--trait); border-radius:var(--r);
  padding:22px 24px; background:var(--blanc); margin-bottom:18px; margin-top:0;
}
.repli--danger summary{color:var(--rouge)}

/* ---------- Blocs repliables (page dossier de l'avocat) ----------
   La convention et les requêtes ne se consultent pas tous les jours.
   Repliées, elles rendent la page au travail courant — mais leur
   résumé garde le badge et le compte, lisibles sans ouvrir. */
.bloc--repli > summary{
  list-style:none; cursor:pointer;
  align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap;
}
.bloc--repli > summary::-webkit-details-marker{display:none}
.bloc--repli > summary::after{
  content:"Déplier"; margin-left:auto;
  font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--violet-vif);
}
.bloc--repli[open] > summary::after{content:"Replier"}
.bloc--repli > summary:hover h2{color:var(--violet-vif)}
/* Replié, le trait de l'en-tête pendrait dans le vide. */
.bloc--repli:not([open]) > summary{border-bottom:none; padding-bottom:0; margin-bottom:0}

/* ---------- Barre d'ancres ---------- */
.ancres{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--trait);
}
.ancres a{
  font-family:var(--etiq); font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--gris); padding:8px 13px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.ancres a:hover,
.ancres a:focus-visible{
  color:var(--violet-nuit); background:rgba(220,169,242,.2); border-color:var(--trait);
}
/* L'en-tête de l'application est collant : sans cette marge,
   l'ancre déposerait le bloc dessous. */
.bloc[id],
.bloc--repli[id]{scroll-margin-top:92px}

/* ---------- 17. Tableaux ---------- */
.tableau-cadre{overflow-x:auto; border:1px solid var(--trait); border-radius:var(--r); background:var(--blanc)}
.tableau{width:100%; border-collapse:collapse; min-width:760px}
.tableau th{
  text-align:left; font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris);
  padding:16px 18px; border-bottom:1px solid var(--trait); white-space:nowrap;
}
.tableau td{padding:16px 18px; border-bottom:1px solid var(--trait); font-size:.93rem; vertical-align:top}
.tableau tr:last-child td{border-bottom:none}
.tableau tbody tr:hover{background:rgba(220,169,242,.1)}
.tableau__lien{
  font-family:var(--etiq); font-weight:700; letter-spacing:.04em;
  color:var(--violet-vif); text-decoration:none; border-bottom:2px solid rgba(235,209,26,.7);
}
.tableau__second{display:block; font-size:.79rem; color:var(--gris); margin-top:4px}

/* ---------- 18. Badges ---------- */
.badge{
  display:inline-block; font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.07em; padding:4px 11px; border-radius:var(--pilule);
  background:var(--creme); color:var(--encre-douce); white-space:nowrap;
}
.badge--menthe{background:var(--menthe); color:#0F5132}
.badge--jaune{background:var(--jaune); color:var(--encre)}
.badge--lilas{background:var(--lilas); color:var(--violet)}
.badge--rouge{background:rgba(228,87,46,.18); color:var(--rouge)}
.badge--gris{background:var(--creme); color:var(--gris)}

/* ---------- 19. Annonces ---------- */
.annonce{
  padding:16px 22px; border-radius:var(--r); margin-bottom:22px;
  font-size:.95rem; border-left:5px solid var(--violet-vif);
  background:rgba(91,33,224,.07);
}
.annonce--succes{border-left-color:#2E9E63; background:rgba(147,231,180,.24)}
.annonce--erreur{border-left-color:var(--rouge); background:rgba(228,87,46,.12)}
.annonce--info{border-left-color:var(--violet-vif); background:rgba(220,169,242,.2)}
.annonce--action{border-left-color:var(--jaune); background:rgba(235,209,26,.16)}
.annonce a{color:var(--violet-vif); font-weight:600}
.annonce form{margin-left:8px}
.lien-copiable{
  display:inline-block; margin-top:8px;
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:.82rem; background:var(--blanc); color:var(--violet);
  border:1px dashed rgba(91,33,224,.4); border-radius:var(--r-petit);
  padding:8px 12px; cursor:pointer; word-break:break-all;
}
.lien-copiable:hover{border-style:solid; background:rgba(220,169,242,.16)}

/* ---------- 20. État vide ---------- */
.vide{
  background:var(--blanc); border:2px dashed rgba(91,33,224,.26);
  border-radius:var(--r); padding:48px 32px; text-align:center;
}
.vide h3{margin-bottom:10px; color:var(--violet); font-size:1.2rem}
.vide p{color:var(--gris); max-width:46ch; margin-inline:auto}

/* ---------- 21. Pages d'accès ---------- */
.page-acces{background:var(--degrade); color:var(--creme); display:block; min-height:100vh}
.acces{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(28px,6vw,64px) var(--gouttiere);
}
.acces__cadre{
  width:100%; max-width:520px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(234,230,222,.2);
  border-radius:26px; backdrop-filter:blur(8px);
  padding:clamp(30px,4vw,46px);
}
.acces__baseline{
  font-family:var(--etiq); font-size:.66rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--jaune);
  margin:14px 0 30px;
}
.acces__titre{font-size:clamp(1.8rem,4vw,2.5rem); color:var(--blanc); margin-bottom:14px}
.acces__intro{color:var(--gris-clair); font-size:.98rem}
.acces__intro strong{color:var(--creme)}
.acces__formulaire{margin-top:28px; display:flex; flex-direction:column; gap:18px}
.acces__formulaire .champ label{color:var(--gris-clair)}
.acces__formulaire .champ input{
  background:rgba(255,255,255,.08); border-color:rgba(234,230,222,.28); color:var(--blanc);
}
.acces__formulaire .champ input::placeholder{color:rgba(191,182,224,.7)}
.acces__formulaire .champ input:focus{border-color:var(--jaune); box-shadow:0 0 0 3px rgba(235,209,26,.2)}
.acces__formulaire .champ__aide{color:var(--gris-clair)}
.acces__formulaire .duo-champs .champ input{width:100%}
.acces__liens{
  margin:24px 0 0; font-family:var(--etiq); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.acces__liens a{color:var(--jaune); text-decoration:none; border-bottom:1px solid rgba(235,209,26,.45)}
.acces__liens a:hover{border-bottom-color:var(--jaune)}
.acces__mentions{margin-top:26px; font-size:.78rem; color:var(--gris-clair); text-align:center; max-width:520px}
.acces__mentions a{color:var(--creme)}
.page-acces .annonce{background:rgba(255,255,255,.1); border-left-color:var(--jaune); color:var(--creme)}
.page-acces .annonce--erreur{background:rgba(228,87,46,.22); border-left-color:var(--rouge); color:var(--creme)}

/* ---------- 22. Texte au long ---------- */
.prose{max-width:70ch}
.prose h2{margin:32px 0 12px; color:var(--violet); font-size:1.2rem}
.prose ul{margin:0 0 1em; padding-left:22px}
.prose li{margin-bottom:7px}
.prose--clair{color:var(--gris-clair); max-width:none}
.prose--clair h2{color:var(--jaune)}
.prose--clair strong{color:var(--creme)}

/* ---------- 22 bis. Fiche du client ---------- */
.fiche__section{padding-top:8px}
.fiche__section + .fiche__section{margin-top:34px; border-top:1px solid var(--trait); padding-top:26px}
.fiche__intro{font-size:.92rem; color:var(--gris); max-width:70ch; margin-bottom:20px}
.formulaire--fiche{grid-template-columns:repeat(12,1fr); gap:18px 20px; align-items:start}
.formulaire--fiche .champ--court{grid-column:span 3}
.formulaire--fiche .champ--demi{grid-column:span 6}
.formulaire--fiche .champ--plein{grid-column:1/-1}
.champ__requis{color:var(--violet-vif); font-weight:700}
.fiche__pied{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--trait);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.fiche__pied .bouton--large{max-width:420px}
.encart--suivi .jauge{margin-top:4px}
.encart--suivi .encart__nom{font-size:1.6rem; color:var(--violet)}

/* ---------- 22 bis 2. Convention et honoraires ---------- */
.honoraires__volet{padding-top:20px}
.honoraires__volet + .honoraires__volet{margin-top:26px; border-top:1px solid var(--trait); padding-top:24px}
.honoraires__volet h3{color:var(--violet); margin-bottom:12px}
.honoraires__montant{
  font-family:var(--display); font-size:2rem; font-weight:800;
  letter-spacing:-.03em; color:var(--violet); margin:6px 0 10px;
}
.echeances{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.echeance{
  display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  background:var(--ivoire); border:1px solid var(--trait);
  border-radius:var(--r); padding:16px 18px;
}
.echeance--reglee{opacity:.68}
.echeance__objet{display:flex; flex-direction:column; gap:3px; min-width:0}
.echeance__somme{
  font-family:var(--display); font-size:1.2rem; font-weight:800;
  letter-spacing:-.02em; white-space:nowrap;
}
.echeance__etat{display:flex; align-items:center; gap:10px; white-space:nowrap}

/* ---------- 22 ter. Rédaction d'un acte ---------- */
.sections{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
.section{
  border-left:4px solid var(--violet-vif); border-radius:0 var(--r) var(--r) 0;
  background:var(--ivoire); padding:16px 18px;
}
.section--n2{margin-left:26px; border-left-color:var(--lilas)}
.section__tete{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.section__tete select{
  width:auto; flex:0 0 auto; font-family:var(--etiq); font-weight:700;
  padding:9px 10px; border:1px solid rgba(20,18,31,.16); border-radius:var(--r-petit); background:var(--blanc);
}
.section__tete input{
  flex:1; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:10px 14px; border:1px solid rgba(20,18,31,.16); border-radius:var(--r-petit); background:var(--blanc); color:var(--encre);
}
.section textarea{
  width:100%; font-family:var(--texte); font-size:.97rem; line-height:1.6;
  padding:12px 14px; border:1px solid rgba(20,18,31,.16); border-radius:var(--r-petit);
  background:var(--blanc); color:var(--encre); resize:vertical;
}
.section textarea:focus,.section__tete input:focus{outline:none; border-color:var(--violet-vif); box-shadow:0 0 0 3px rgba(91,33,224,.13)}
.actions-plan{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.ligne-actions{display:inline-flex; flex-wrap:wrap; gap:14px; margin-left:10px}

.bordereau{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.bordereau__ligne{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.bordereau__numero{
  font-family:var(--etiq); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  background:var(--violet); color:var(--ivoire); padding:5px 10px; border-radius:var(--pilule); white-space:nowrap;
}
.bordereau__ligne input{
  flex:1 1 320px; font-family:var(--texte); font-size:.95rem; padding:10px 14px;
  border:1px solid rgba(20,18,31,.16); border-radius:var(--r-petit); background:var(--blanc); color:var(--encre);
}

/* ---------- 22 quater. Aperçu imprimable d'un acte ---------- */
.page-acte{background:var(--creme); display:block}
.acte-barre{
  position:sticky; top:0; z-index:50;
  background:var(--violet-nuit); color:var(--creme);
  padding:14px clamp(16px,4vw,40px);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.acte-barre .sourdine{color:var(--gris-clair)}
.acte-barre .bouton--fantome{color:var(--creme); border-color:rgba(234,230,222,.45)}
.acte-barre .bouton--fantome:hover{background:var(--creme); color:var(--violet-nuit)}

.feuille{
  background:var(--blanc);
  max-width:21cm; margin:32px auto; padding:2.5cm;
  box-shadow:0 18px 50px -30px rgba(34,16,82,.6);
  font-family:"Times New Roman", Times, serif; font-size:12pt; line-height:1.5; color:#000;
}
.feuille h1,.feuille h2,.feuille h3{font-family:inherit; letter-spacing:0}
.feuille .a-titre{font-size:15pt; text-transform:uppercase; text-align:center; margin:0 0 18px; line-height:1.3}
.feuille .a-centre{text-align:center; margin:0 0 12px}
.feuille .a-droite{text-align:right; margin:0 0 6px}
.feuille .a-gras{font-weight:700; margin:0 0 8px}
.feuille .a-titre1{font-size:12pt; text-transform:uppercase; margin:26px 0 12px}
.feuille .a-titre2{font-size:12pt; font-style:italic; margin:18px 0 10px}
.feuille .a-normal{text-align:justify; margin:0 0 12px}
.feuille .a-petit{font-size:10pt; font-style:italic; margin:0 0 10px}
.feuille .a-vide{margin:0 0 10px; min-height:.6em}
.feuille__saut{border-top:1px dashed #999; margin:32px 0}

@media print{
  .acte-barre{display:none}
  .page-acte{background:#fff}
  .feuille{max-width:none; margin:0; padding:0; box-shadow:none}
  .feuille__saut{border:none; break-after:page; page-break-after:always; margin:0}
  .feuille .a-titre1,.feuille .a-titre2{break-after:avoid; page-break-after:avoid}
}

/* ---------- 23. Pied de page ---------- */
.pied{background:var(--violet-nuit); color:var(--gris-clair); padding-block:30px; font-size:.85rem; margin-top:auto}
.pied__bas{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-family:var(--etiq); font-size:.68rem; font-weight:500; letter-spacing:.06em;
}
.pied a{color:var(--creme)}
.pied a:hover{color:var(--jaune)}

/* ---------- 24. Adaptatif ---------- */
@media (max-width:1080px){
  .colonnes{grid-template-columns:1fr}
  .colonnes__cote{position:static; flex-direction:row; flex-wrap:wrap}
  .colonnes__cote > *{flex:1 1 260px}
}
@media (max-width:760px){
  body{font-size:16px}
  /* La navigation compte cinq onglets plus le menu du compte : sur un
     téléphone elle sortait de l'écran, et toute la page défilait avec
     elle. Elle se replie désormais au lieu de déborder.

     Pourquoi le repli plutôt qu'un défilement horizontal : le menu du
     compte s'ouvre en position absolue à l'intérieur de .navigation.
     Un overflow le rognerait au lieu de le laisser se déployer. */
  .entete__interieur{min-height:62px; gap:10px 14px; flex-wrap:wrap; padding-block:8px}
  .marque__mention{display:none}
  .navigation{gap:6px 12px; flex-wrap:wrap}
  .navigation > a{font-size:.64rem; letter-spacing:.07em}
  .compte__nom{display:none}
  .compte__bouton{padding:4px; border-color:transparent}
  .tete__interieur{flex-direction:column; align-items:flex-start}
  .echeance{width:100%}
  .bulle{max-width:100%}
  .cases{grid-template-columns:1fr}
  .colonnes__cote{flex-direction:column}
  .duo-champs{grid-template-columns:1fr}
  .formulaire--fiche{grid-template-columns:1fr}
  .formulaire--fiche .champ--court,
  .formulaire--fiche .champ--demi,
  .formulaire--fiche .champ--plein{grid-column:1/-1}
  .echeance{grid-template-columns:1fr; gap:10px}
  .echeance__etat{justify-content:flex-start}
  .section--n2{margin-left:12px}
  .section__tete{flex-wrap:wrap}
  .feuille{padding:1.4cm; margin:16px auto}
}
@media (max-width:460px){
  .navigation > a{padding:6px 0}
  .chiffres{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

@media print{
  .entete,.pied,.filtres,.repondre,.depot,.depot-libre,.jalon__actions,.piece__actions,.repli,.tete__actions{display:none}
  body{background:#fff; color:#000}
  .bloc,.encart,.carte,.piece{border:1px solid #999; break-inside:avoid}
  .tete--dossier{background:#fff; color:#000; border-bottom:2px solid #000}
  .tete--dossier h1,.echeance__date{color:#000}
}

/* ---------- 22 quinquies. Journal des échanges ---------- */
.echanges{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.echange{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:14px; align-items:baseline;
  padding:11px 14px; border-radius:var(--r-petit); background:var(--ivoire);
  border-left:3px solid var(--gris-clair);
}
.echange--recu{border-left-color:var(--menthe)}
.echange--envoye{border-left-color:var(--violet-vif)}
.echange__date{font-family:var(--etiq); font-size:.72rem; letter-spacing:.04em; color:var(--gris); white-space:nowrap}
.echange__sens{
  font-family:var(--etiq); font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris); white-space:nowrap;
}
.echange__objet{font-size:.94rem; min-width:0}
.echange__objet .sourdine{display:block; font-size:.85rem; margin-top:2px}

@media (max-width:760px){
  .echange{grid-template-columns:1fr; gap:4px}
}

/* La barre d'ancres se pose sur l'en-tête violet du dossier :
   le gris de lecture courante y disparaît. */
.tete .ancres{border-top-color:rgba(234,230,222,.22)}
.tete .ancres a{color:rgba(234,230,222,.72)}
.tete .ancres a:hover,
.tete .ancres a:focus-visible{
  color:var(--creme);
  background:rgba(255,255,255,.14);
  border-color:rgba(234,230,222,.38);
}

/* =============================================================
   OLYMPE — tableau de bord du cabinet

   L'habillage de PEGASUS reste maître : en-tête, menu, pied et
   polices ne bougent pas. L'identité propre à la Olympe — marine,
   laiton, gris bleutés — ne vaut qu'à l'intérieur de « .olympe ».
   ============================================================= */
.olympe{
  --marine:#0F2440;
  --marine-clair:#1D3E6B;
  --laiton:#9C7A2E;
  --neutre:#5B6779;
  --neutre-doux:#8792A3;
  --trait-v:rgba(15,36,64,.13);
  --fond-v:#F6F7F9;

  /* Échelle de gravité : une seule teinte, qui fonce à mesure que
     le retard grandit. Jamais seule — toujours doublée d'un libellé. */
  --g-a_echoir:#7A8798;
  --g-leger:#C8901F;
  --g-moyen:#A85A18;
  --g-lourd:#7C1F12;

  /* Types d'événement, pour la bande de gauche. */
  --t-audience:#0F2440;
  --t-audition:#1D3E6B;
  --t-echeance:#9C7A2E;
  --t-rdv:#5B6779;
  --t-absence:#B4BCC8;
  --t-a_traiter:#8792A3;

  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.olympe h2{color:var(--marine)}
.olympe a{color:var(--marine-clair)}

/* Chiffres, montants et numéros : chasse fixe, et surtout des
   chiffres de même largeur, pour qu'une colonne s'aligne. */
.olympe-nb{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- Les quatre indicateurs ---------- */
.olympe-indicateurs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin-bottom:clamp(18px,2vw,26px);
}
.olympe-ind{
  background:var(--blanc); border:1px solid var(--trait-v);
  border-radius:var(--r-petit); padding:16px 18px; min-width:0;
}
.olympe-ind__etiq{
  font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--laiton);
  margin-bottom:8px;
}
.olympe-ind__chiffre{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.9rem; line-height:1.05; font-weight:600; color:var(--marine);
  margin-bottom:6px; overflow-wrap:anywhere;
}
.olympe-ind__chiffre--court{font-family:var(--display); font-size:1.5rem; letter-spacing:-.02em}
.olympe-ind__note{font-size:.82rem; color:var(--neutre); line-height:1.45; overflow-wrap:anywhere}

/* ---------- Bandeau d'état d'un bloc ---------- */
.olympe-alerte{
  background:#FDF6E9; border:1px solid rgba(156,122,46,.35);
  border-left:3px solid var(--laiton); border-radius:var(--r-petit);
  padding:12px 14px; margin-bottom:16px; font-size:.86rem;
  color:var(--encre-douce); line-height:1.5;
}
.olympe-alerte__marque{
  display:block; font-family:var(--etiq); font-size:.6rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--laiton); margin-bottom:4px;
}

.olympe-bloc{margin-bottom:clamp(16px,2vw,22px); border-color:var(--trait-v)}
.olympe-bloc--signal{border-color:rgba(124,31,18,.35)}

/* ---------- Le cap ---------- */
.olympe-agenda{list-style:none; display:flex; flex-direction:column; gap:2px}
.olympe-jour{
  display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px;
  padding:12px 10px; border-radius:var(--r-petit); align-items:start;
}
.olympe-jour--aujourdhui{background:var(--fond-v); box-shadow:inset 3px 0 0 var(--marine)}
.olympe-jour__date{display:flex; flex-direction:column; gap:2px; padding-top:2px}
.olympe-jour__relatif{
  font-family:var(--etiq); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--laiton);
}
.olympe-jour__chiffre{font-size:.84rem; color:var(--neutre)}
.olympe-jour__liste{list-style:none; display:flex; flex-direction:column; gap:6px; min-width:0}

.olympe-ev{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:baseline;
  padding:7px 12px; background:var(--blanc);
  border:1px solid var(--trait-v); border-left:3px solid var(--t-a_traiter);
  border-radius:var(--r-petit); min-width:0;
}
.olympe-ev--audience {border-left-color:var(--t-audience)}
.olympe-ev--audition {border-left-color:var(--t-audition)}
.olympe-ev--echeance {border-left-color:var(--t-echeance)}
.olympe-ev--rdv      {border-left-color:var(--t-rdv)}
.olympe-ev--absence  {border-left-color:var(--t-absence); background:var(--fond-v)}
.olympe-ev__heure{font-size:.8rem; color:var(--neutre); white-space:nowrap}
.olympe-ev__titre{color:var(--encre); font-size:.94rem; min-width:0; overflow-wrap:anywhere}
.olympe-ev__type{
  font-family:var(--etiq); font-size:.58rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--neutre-doux); white-space:nowrap;
}

/* ---------- Barre de répartition ---------- */
.olympe-barre{
  display:flex; height:12px; border-radius:var(--pilule);
  overflow:hidden; background:var(--fond-v); margin:4px 0 12px;
}
.olympe-barre__part{display:block; height:100%}
.olympe-barre__part--a_echoir{background:var(--g-a_echoir)}
.olympe-barre__part--leger   {background:var(--g-leger)}
.olympe-barre__part--moyen   {background:var(--g-moyen)}
.olympe-barre__part--lourd   {background:var(--g-lourd)}

.olympe-legende{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px;
  margin-bottom:20px; font-size:.82rem; color:var(--neutre);
}
.olympe-legende li{display:flex; align-items:baseline; gap:7px; min-width:0}
.olympe-puce{
  width:9px; height:9px; border-radius:2px; flex:none;
  position:relative; top:1px;
}
.olympe-puce--a_echoir{background:var(--g-a_echoir)}
.olympe-puce--leger   {background:var(--g-leger)}
.olympe-puce--moyen   {background:var(--g-moyen)}
.olympe-puce--lourd   {background:var(--g-lourd)}
.olympe-legende__montant{color:var(--marine); font-weight:600}

/* ---------- Factures ---------- */
.olympe-factures{list-style:none; display:flex; flex-direction:column; gap:1px}
.olympe-facture{
  padding:11px 14px; border-left:3px solid var(--g-a_echoir);
  border-bottom:1px solid var(--trait-v); min-width:0;
}
.olympe-facture:last-child{border-bottom:none}
.olympe-facture--leger{border-left-color:var(--g-leger)}
.olympe-facture--moyen{border-left-color:var(--g-moyen)}
.olympe-facture--lourd{border-left-color:var(--g-lourd)}
.olympe-facture__haut{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; margin-bottom:3px;
}
.olympe-facture__client{color:var(--encre); font-weight:600; min-width:0; overflow-wrap:anywhere}
.olympe-facture__montant{color:var(--marine); font-weight:600; white-space:nowrap; flex:none}
.olympe-facture__bas{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:.8rem}
.olympe-facture__numero{color:var(--marine-clair); font-size:.8rem}

/* La couleur ne porte jamais l'information seule : chaque palier
   s'écrit aussi en toutes lettres. */
.olympe-gravite{font-weight:600}
.olympe-gravite--a_echoir{color:var(--g-a_echoir)}
.olympe-gravite--leger   {color:var(--g-leger)}
.olympe-gravite--moyen   {color:var(--g-moyen)}
.olympe-gravite--lourd   {color:var(--g-lourd)}

/* ---------- Signatures ---------- */
.olympe-signatures{list-style:none; display:flex; flex-direction:column; gap:1px}
.olympe-signature{padding:11px 0; border-bottom:1px solid var(--trait-v); min-width:0}
.olympe-signature:last-child{border-bottom:none}
.olympe-signature__haut{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:3px}
.olympe-signature__nom{color:var(--encre); font-weight:600; min-width:0; overflow-wrap:anywhere}
.olympe-signature__bas{font-size:.82rem; line-height:1.5; overflow-wrap:anywhere}
.olympe-pastille{
  font-family:var(--etiq); font-size:.58rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--blanc); background:var(--g-lourd);
  padding:3px 9px; border-radius:var(--pilule); white-space:nowrap; flex:none;
}

/* ---------- Double signal ---------- */
.olympe-doubles{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:14px}
.olympe-double{padding-left:12px; border-left:3px solid var(--g-lourd); min-width:0}
.olympe-double__client{display:block; color:var(--encre); font-weight:600; overflow-wrap:anywhere}

/* ---------- Téléphone : tout s'empile, rien ne déborde ---------- */
@media (max-width:560px){
  .olympe-jour{grid-template-columns:1fr; gap:8px; padding:10px 8px}
  .olympe-jour__date{flex-direction:row; align-items:baseline; gap:10px}
  .olympe-ev{grid-template-columns:1fr; gap:3px}
  .olympe-ev__type{justify-self:start}
  .olympe-facture__haut{flex-direction:column; gap:2px}
  .olympe-facture__montant{align-self:flex-start}
  .olympe-ind__chiffre{font-size:1.6rem}
}


/* Pastilles d'état des clés, dans le bloc « Clés d'accès » d'Olympe. */
.olympe-cle{
  font-family:var(--etiq); font-size:.6rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--pilule);
}
.olympe-cle--ok  {color:#1B5E3F; background:rgba(147,231,180,.4)}
.olympe-cle--vide{color:var(--gris); background:rgba(20,18,31,.06)}
/* Espace de réponse au client : les deux boutons et l'avertissement
   qui accompagne un brouillon préparé par l'assistance. */
.repondre__actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px}
.ia-avis{
  border-left:3px solid var(--jaune); background:rgba(235,209,26,.12);
  padding:10px 14px; border-radius:var(--r-petit); margin-top:10px;
}
/* Les pièces qu'on peut joindre à une demande de rédaction. */
.ia-pieces{list-style:none; display:flex; flex-direction:column; gap:6px; margin:6px 0 0}
.ia-pieces li{padding:7px 10px; border:1px solid var(--trait); border-radius:var(--r-petit); background:var(--blanc)}
.ia-pieces .case{align-items:flex-start; gap:9px}
.ia-pieces input:disabled + span{opacity:.55}