/* Identite visuelle du cabinet, version claire.
     Bryan, 10/09/2026 : « c'est trop sombre, il y a trop de noir. Fais-moi un
     truc avec du blanc, epure, classe. » On garde l'or et l'anthracite du site
     elyon-associes.fr, mais poses sur du papier plutot que sur du noir — et un
     or assez fonce pour rester lisible sur blanc. */
  :root {
    --fond:        #eeeae2;   /* papier chaud, pas du blanc pur */
    --carte:       #ffffff;
    --surface:     #e4dfd5;
    --texte:       #1f1f1c;   /* anthracite, franc */
    --sourdine:    #66625a;
    --trait:       #d5cfc3;

    /* La barre laterale : anthracite du site Elyon, texte clair. */
    --barre-fond:    #2f2f2d;
    --barre-texte:   #e8e4dc;
    --barre-sourd:   #9a958a;
    --barre-trait:   #43423e;
    --barre-survol:  #3a3936;
    --barre-or:      #e2b33c;
    --or:          #9a761a;
    --or-eteint:   #b39a56;
    --or-clair:    #7d6116;
    --perle:       #22221e;
    --champagne:   #6a665d;
    --taupe:       #b39a56;
    --alerte:      #9c3117;
    --bien:        #3a6630;

    --champ:        #ffffff;
    --survol:       #faf8f4;
    --fond-eteint:  #f0ede7;
    --fond-alerte:  #fbefeb;
    --fond-bien:    #eff4ed;
    --fond-avert:   #fdf6e5;
    --sur-or:       #ffffff;
    --sur-bien:     #ffffff;
    --trait-alerte: #e3c5b9;
    --trait-bien:   #c7d9be;

    /* Arrondis et ombres. Bryan, 14/09/2026 : « ça fait encore trop cheap […]
       des ombres, des bords un peu plus épais, plus arrondis. Là, c'est trop
       carré partout. » */
    --rayon:        18px;
    --rayon-moyen:  14px;
    --rayon-petit:  10px;
    --ombre:        0 1px 2px rgba(34,34,30,.05), 0 10px 28px rgba(34,34,30,.08);
    --ombre-legere: 0 1px 2px rgba(34,34,30,.05), 0 4px 12px rgba(34,34,30,.06);
    --anneau:       0 0 0 3px rgba(154,118,26,.18);

    --titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --corps: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Les nombres ne sont pas du texte : chasse fixe, pour qu'ils s'alignent. */
    --nombres: "Manrope", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  }
  * { box-sizing:border-box; }
  /* Partout ou il y a des chiffres : meme largeur par chiffre, zero barre. */
  .chiffre b, .totaux b, .indicateurs b, .calcul .total, td, th, .montant,
  input, .identite b {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1;
  }
  body {
    margin:0; background:var(--fond); color:var(--texte);
    font:400 16px/1.65 var(--corps);
    -webkit-font-smoothing:antialiased;
  }

  /* La marque, en tete de la barre laterale — et sur l'ecran de connexion, qui
     n'a pas de barre. */
  .marque { padding:4px 14px 18px; border-bottom:1px solid var(--trait); margin-bottom:14px; }
  .marque b {
    display:block; font:500 17px/1.25 var(--titre);
    letter-spacing:.13em; text-transform:uppercase; color:var(--texte);
  }
  .marque b span { color:var(--or); }
  .marque .sous {
    font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--sourdine);
  }
  .marque.connexion { text-align:center; padding:0 0 20px; }

  /* La page occupe tout l'ecran : la barre laterale n'est pas un bloc de la
     page, c'est une colonne fixe a cote d'elle. */
  main { max-width:none; margin:0; padding:0; }

  .carte {
    background:var(--carte); border:1.5px solid var(--trait); border-radius:18px;
    padding:28px 32px; margin-bottom:24px;
    box-shadow:0 1px 2px rgba(34,34,30,.05), 0 10px 28px rgba(34,34,30,.08);
  }
  h2 {
    font:500 20px/1.3 var(--titre); letter-spacing:.08em; text-transform:uppercase;
    color:var(--texte); margin:0 0 18px; padding-bottom:10px;
    border-bottom:1px solid var(--trait);
  }
  .entete-carte {
    display:flex; justify-content:space-between; align-items:center; gap:18px;
    margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--trait);
  }
  .entete-carte h2 { margin:0; padding:0; border:0; }

  label {
    display:block; margin:14px 0 5px; font-weight:600;
    font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sourdine);
  }
  input, textarea, select {
    width:100%; padding:11px 14px; font:inherit; font-size:15px;
    background:var(--champ); color:var(--texte); border:1.5px solid var(--trait);
    border-radius:10px;
  }
  textarea { min-height:90px; resize:vertical; font-family:var(--corps); }
  input:focus, textarea:focus, select:focus {
    outline:none; border-color:var(--or); box-shadow:var(--anneau);
  }
  input.fautif, select.fautif { border-color:var(--alerte); background:var(--fond-alerte); }
  input::placeholder, textarea::placeholder { color:var(--sourdine); }

  button {
    padding:10px 22px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    letter-spacing:.08em; text-transform:uppercase; border-radius:10px;
    background:var(--texte); color:#ffffff; border:1.5px solid var(--texte);
    box-shadow:var(--ombre-legere);
    transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
  }
  button:hover { background:var(--or); border-color:var(--or); color:#ffffff; }
  button:disabled { background:none; color:var(--sourdine); border-color:var(--trait); cursor:not-allowed; }
  button.discret {
    background:var(--carte); color:var(--texte); border:1px solid var(--trait);
    padding:7px 15px; font-size:12px;
  }
  button.discret:hover { border-color:var(--or); color:var(--or); background:var(--survol); }
  button.danger {
    background:none; color:var(--alerte); border:1px solid var(--trait-alerte);
    padding:6px 12px; font-size:11px;
  }
  button.danger:hover { background:var(--alerte); color:#ffffff; border-color:var(--alerte); }

  .erreur { margin-top:15px; padding:11px 14px; background:var(--fond-alerte); border-left:2px solid var(--alerte); font-size:14px; }
  .succes { margin-bottom:18px; padding:11px 14px; background:var(--fond-bien); border-left:2px solid var(--bien); font-size:14px; }
  .avert  { margin:0 0 16px; padding:11px 14px; background:var(--fond-avert); border-left:2px solid var(--or-eteint); font-size:14px; }

  table { width:100%; border-collapse:collapse; font-size:14.5px; }
  th, td {
    text-align:left; padding:12px 14px; vertical-align:middle;
    border-bottom:1px solid var(--trait);
    /* Un filet entre chaque colonne : sans lui, tout se colle. */
    border-right:1px solid var(--trait);
  }
  th:last-child, td:last-child { border-right:0; }
  thead th {
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--sourdine); font-weight:700; background:var(--survol);
    border-bottom:1px solid var(--trait); white-space:nowrap;
  }
  tbody tr:hover { background:var(--survol); }
  /* Une ligne qu'on peut ouvrir se comporte comme un lien. */
  tbody tr.ouvrable { cursor:pointer; }
  tbody tr.ouvrable:hover { background:#f3efe6; box-shadow:inset 3px 0 0 var(--or); }
  tfoot th { border-top:1px solid var(--or-eteint); color:var(--or-clair); font-size:12px; }
  td.actions { text-align:right; white-space:nowrap; }
  td.actions button { margin-left:7px; }
  td b { color:var(--perle); font-weight:600; }
  /* Plusieurs contrats dans une meme case : ils respirent. */
  td > div + div { margin-top:6px; }

  .vide { color:var(--sourdine); font-size:14px; margin:8px 0; }
  .barre { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:24px; }
  .role { font-size:13px; color:var(--sourdine); letter-spacing:.02em; }
  .role b { color:var(--or); font-weight:600; }

  .grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:0 20px; }
  .grille .large { grid-column:1 / -1; }
  .actions-form { margin-top:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  #recherche { max-width:300px; }

  .calcul { margin-top:22px; padding:18px 20px; background:var(--survol); border-left:2px solid var(--or); }
  .calcul .total { font:600 27px/1.2 var(--nombres); letter-spacing:-.01em; margin:2px 0 12px; }
  .calcul .total b { color:var(--or); font-weight:400; }
  .calcul ul { margin:0; padding-left:20px; color:var(--sourdine); font-size:13px; }
  .calcul li { margin:3px 0; }
  .calcul.refus { background:var(--fond-alerte); border-left-color:var(--alerte); }

  .totaux { display:flex; flex-wrap:wrap; gap:34px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--trait); }
  .totaux div span { display:block; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--sourdine); margin-bottom:3px; }
  .totaux div b { font:600 21px/1.2 var(--nombres); letter-spacing:-.01em; color:var(--perle); }
  .totaux .net b { font-size:31px; color:var(--or); }

  .etat { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; padding:3px 10px; border:1px solid var(--trait); color:var(--sourdine); }
  .etat.valide { border-color:var(--or); color:var(--or); }
  .etat.paye { border-color:var(--bien); color:var(--bien); }

  #jauge { height:6px; background:var(--champ); margin-bottom:20px; overflow:hidden; }
  #jauge-remplie { height:100%; width:0; background:var(--or); transition:width .3s; }
  #jauge-remplie.plein { background:var(--alerte); }

  .indicateurs { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); margin-bottom:22px; }
  .indicateurs > div { background:var(--carte); padding:16px 18px; }
  .indicateurs span { display:block; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--sourdine); margin-bottom:5px; }
  .indicateurs b { font:600 24px/1.15 var(--nombres); letter-spacing:-.02em; color:var(--perle); }
  .indicateurs .alerte b { color:var(--alerte); }
  .indicateurs .cle b { color:var(--or); }

  [hidden] { display:none !important; }
  @media (max-width:680px) {
    main { padding:0 16px; margin-top:24px; }
    .carte { padding:20px 18px; }
    .barre, .entete-carte { flex-direction:column; align-items:stretch; }
    header h1 { font-size:18px; letter-spacing:.1em; }
    .totaux { gap:20px; }
  }

/* ------------------------------------------------------------ navigation */

#cadre { display:block; }

/* Elle ne defile PAS avec la page : elle reste plaquee a gauche, avec son
   propre defilement si elle deborde. Bryan, 10/09/2026 : « tu m'as mis la barre
   laterale comme si elle faisait partie de la page ». */
#menu {
  position:fixed; top:0; left:0; bottom:0; z-index:30;
  width:250px;
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px 0 22px 18px;
  border-right:1px solid var(--barre-trait); background:var(--barre-fond);
  color:var(--barre-texte);
  display:flex; flex-direction:column; gap:2px;
}
#menu .role { padding:0 14px 16px; color:var(--barre-sourd); }
#menu .marque { border-bottom:1px solid var(--barre-trait); }
#menu .marque b { color:var(--barre-texte); }
#menu .marque b span { color:var(--barre-or); }
#menu .marque .sous { color:var(--barre-sourd); }
#menu select, #menu input {
  background:#252523; color:var(--barre-texte); border-color:var(--barre-trait);
}
#menu select:focus, #menu input:focus {
  border-color:var(--barre-or); box-shadow:0 0 0 1px var(--barre-or);
}
#menu label { color:var(--barre-sourd); }

.onglet {
  display:block; width:100%; text-align:left;
  background:none; border:0; border-left:2px solid transparent;
  color:var(--barre-sourd); padding:9px 14px; border-radius:0;
  font:inherit; font-size:13.5px; font-weight:500; letter-spacing:.01em; text-transform:none;
  cursor:pointer; transition:color .12s, border-color .12s, background .12s;
}
.onglet:hover { background:var(--barre-survol); color:var(--barre-texte); }
.onglet.actif {
  color:#ffffff; border-left-color:var(--barre-or);
  background:var(--barre-survol); font-weight:600;
}
.onglet.sortie { margin-top:auto; color:var(--barre-sourd); font-size:12px; }
.onglet.sortie:hover { color:var(--alerte); background:var(--barre-survol); }

/* La marge gauche laisse la place a la colonne fixe. */
#contenu { min-width:0; margin-left:250px; padding:26px 34px 90px; max-width:1500px; }
#contenu > .vue > .carte:first-child { margin-top:0; }
#contenu .carte:first-of-type { margin-top:0; }

/* La page de connexion garde sa mise en page centree. */
#ecran-connexion { max-width:420px; margin:8vh auto; }

/* Fenetre vraiment etroite (telephone, ou zoom tres fort) : la barre devient un
   bandeau haut, BORNE en hauteur et defilant tout seul. Elle ne pousse jamais
   le contenu plus bas que sa propre hauteur — c'etait le defaut : il fallait
   faire defiler toute la barre avant de voir la page. */
@media (max-width:700px) {
  #menu {
    position:fixed; top:0; left:0; right:0; bottom:auto;
    width:auto; max-height:38vh;
    padding:12px 14px; border-right:0; border-bottom:1px solid var(--trait);
  }
  #menu .marque { padding:0 0 10px; margin-bottom:8px; }
  #menu .role { border-bottom:0; padding:0 0 8px; margin-bottom:6px; }
  #contenu { margin-left:0; margin-top:38vh; padding:18px 14px 60px; }
}

/* ------------------------------------------------------- cases d'accueil */

#cases {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px; margin-bottom:8px;
}
.case {
  background:none; border:1px solid var(--trait); border-left:2px solid var(--or-eteint);
  padding:18px 20px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
  transition:border-color .12s, background .12s;
}
.case:hover { background:var(--survol); border-left-color:var(--or); }
.case.ouverte { background:var(--survol); border-color:var(--or); border-left-color:var(--or); }
.case .nom {
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--sourdine);
}
.case .nombre { font:600 30px/1.1 var(--nombres); letter-spacing:-.02em; color:var(--perle); }
.case .euros { font-size:13px; color:var(--or-clair); }
.case.vide { border-left-color:var(--trait); }
.case.vide .nombre, .case.vide .euros { color:var(--sourdine); }
#cases-detail { margin-top:22px; }
#cases-detail h2 { margin-top:0; }

/* --------------------------------------------------------- fiche client */

#fiche-identite {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px 24px;
}
#fiche-identite div span {
  display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sourdine); margin-bottom:2px;
}
#fiche-identite div b { font-weight:500; color:var(--texte); }
#fiche-identite .alerte b { color:var(--alerte); }

#fiche-contrats { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
/* Blanc, comme les cartes : le fond noir était un reste de l'ancien thème sombre
   (retour de Bryan après la démo à Max, 14/09/2026). */
.colonne {
  flex:0 0 216px; border:1px solid var(--trait); background:var(--carte);
  display:flex; flex-direction:column;
}
.colonne > .titre {
  padding:10px 12px; border-bottom:1px solid var(--trait);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--or-clair);
}
.colonne > .corps { padding:10px 12px; display:flex; flex-direction:column; gap:10px; flex:1; }
.contrat { border-left:2px solid var(--or-eteint); padding-left:9px; font-size:13px; }
.contrat.resilie { border-left-color:var(--alerte); color:var(--sourdine); }
.contrat .ref { display:block; color:var(--perle); }
.contrat .meta { display:block; font-size:11.5px; color:var(--sourdine); }
.contrat .montant { color:var(--or-clair); }
.colonne button { margin:0 12px 12px; width:calc(100% - 24px); }

/* ------------------------------------------- menu en sections repliables */

.section { margin-bottom:6px; }
.section { margin-bottom:6px; }
.section-titre {
  padding:12px 14px 6px; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#7d786e; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:7px;
}
.section-titre::after {
  content:'—'; font-size:11px; color:#565550; transition:color .15s;
}
.section:not(.ouverte) .section-titre::after { content:'+'; }
.section-titre:hover { color:var(--barre-texte); }
.section-titre:hover::after { color:var(--barre-sourd); }
.section-corps { overflow:hidden; max-height:0; transition:max-height .18s ease; }
.section.ouverte .section-corps { max-height:480px; }
.section.contient-actif .section-titre { color:var(--barre-or); }

#recherche-globale { position:relative; padding:0 14px 14px; }
#chercher { font-size:13px; padding:8px 10px; }
#resultats-recherche {
  position:absolute; left:14px; right:14px; top:100%; z-index:20;
  background:#252523; border:1px solid var(--barre-trait); color:var(--barre-texte);
  max-height:320px; overflow-y:auto;
}
#resultats-recherche button {
  display:block; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--barre-trait); color:var(--barre-texte);
  padding:9px 12px; font:inherit; font-size:13px; text-transform:none; letter-spacing:0;
  cursor:pointer;
}
#resultats-recherche button:hover { background:var(--survol); color:var(--or); }
#resultats-recherche .detail { display:block; font-size:11.5px; color:var(--sourdine); }

#espace-consulte { padding:0 14px 14px; }
#espace-consulte label {
  margin:0 0 4px; font-size:10px; letter-spacing:.1em; color:var(--taupe);
}
#espace-consulte select { font-size:12.5px; padding:7px 9px; }

/* ------------------------------------------------- historique et rappels */

#historique { margin-top:16px; }
.entree {
  display:flex; gap:14px; padding-bottom:16px; position:relative;
}
.entree:not(:last-child)::before {
  content:''; position:absolute; left:6px; top:18px; bottom:0; width:1px; background:var(--trait);
}
.entree .pastille {
  width:13px; height:13px; border-radius:50%; border:2px solid var(--or-eteint);
  background:var(--carte); flex-shrink:0; margin-top:4px; z-index:1;
}
.entree .contenu { flex:1; min-width:0; }
.entree .quoi { font-size:13.5px; color:var(--perle); font-weight:500; }
.entree .quand { font-size:11.5px; color:var(--sourdine); margin-left:8px; font-weight:400; }
.entree .texte { font-size:13.5px; color:var(--texte); margin-top:3px; white-space:pre-wrap; }

.liste-rappels { margin-bottom:30px; }
.liste-rappels > h2 { display:flex; align-items:baseline; gap:10px; }
.liste-rappels > h2 .compte {
  font-family:var(--corps); font-size:12px; letter-spacing:0; text-transform:none;
  color:var(--sourdine);
}
.rappel {
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--trait);
}
.rappel .qui { color:var(--perle); }
.rappel .quoi { font-size:13px; color:var(--sourdine); }
.rappel .quoi b { color:var(--or-clair); font-weight:500; }
.rappel .actions-rappel { display:flex; gap:8px; flex-shrink:0; }

  /* ------------------------------------------------------------- agenda */

  .barre-agenda {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  }
  .barre-agenda .modes { display:flex; }
  .barre-agenda .modes button { border-radius:0; margin:0; }
  .barre-agenda .modes button + button { border-left:0; }
  .barre-agenda .modes button.actif {
    background:var(--surface); color:var(--or); border-color:var(--or);
  }
  .barre-agenda select, .barre-agenda input { margin:0; width:auto; }
  #agenda-precedent, #agenda-suivant { padding:6px 12px; font-size:16px; line-height:1; }

  .stats-agenda { display:flex; gap:0; flex-wrap:wrap; margin-bottom:22px; }
  .stats-agenda .chiffre {
    flex:1 1 150px; padding:16px 20px; border:1px solid var(--trait); border-right:0;
    background:var(--champ);
  }
  .stats-agenda .chiffre:last-child { border-right:1px solid var(--trait); }
  .stats-agenda .chiffre b {
    display:block; font:600 23px/1.15 var(--nombres);
    letter-spacing:-.02em; color:var(--texte);
  }
  .stats-agenda .chiffre span {
    font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--sourdine);
  }

  /* Un statut se lit d'abord a la couleur : la pastille porte l'information,
     le texte la confirme. Les teintes restent dans la palette du cabinet. */
  .pastille {
    display:inline-block; padding:2px 9px; font-size:11px; letter-spacing:.06em;
    border:1px solid; white-space:nowrap;
  }
  .pastille.a_rappeler          { color:var(--or-clair); border-color:var(--or-eteint); }
  .pastille.pas_de_reponse      { color:var(--sourdine); border-color:var(--trait); }
  .pastille.refus               { color:var(--alerte);   border-color:var(--trait-alerte); }
  .pastille.rdv_pris            { color:var(--champagne);border-color:var(--taupe); }
  .pastille.rdv_honore          { color:var(--bien);     border-color:var(--trait-bien); }
  .pastille.rdv_annule          { color:var(--alerte);   border-color:var(--trait-alerte); }
  .pastille.rdv_reporte         { color:var(--or-clair); border-color:var(--or-eteint); }
  .pastille.proposition_envoyee { color:var(--or);       border-color:var(--or); }
  .pastille.signe               { background:var(--bien); color:var(--sur-bien); border-color:var(--bien); }
  .pastille.perdu               { color:var(--sourdine); border-color:var(--trait); text-decoration:line-through; }

  .calendrier { display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait); }
  .calendrier.semaine { grid-template-columns:repeat(7, minmax(0, 1fr)); }
  .calendrier.mois    { grid-template-columns:repeat(7, minmax(0, 1fr)); }
  .calendrier .entete {
    background:var(--surface); padding:8px 10px;
    font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--sourdine);
  }
  .calendrier .jour {
    background:var(--carte); padding:8px; min-height:104px;
    display:flex; flex-direction:column; gap:5px;
  }
  .calendrier .jour.hors { background:var(--fond-eteint); }
  .calendrier .jour.aujourdhui { background:var(--survol); box-shadow:inset 0 2px 0 var(--or); }
  .calendrier .numero { font:600 13px/1 var(--nombres); color:var(--sourdine); }
  .calendrier .jour.aujourdhui .numero { color:var(--or); }
  .calendrier .creneau {
    background:var(--champ); border-left:2px solid var(--taupe); padding:4px 6px;
    font-size:12px; line-height:1.35; cursor:pointer; text-align:left; width:100%;
    color:var(--texte); border-top:0; border-right:0; border-bottom:0; border-radius:0;
    letter-spacing:0; text-transform:none;
  }
  .calendrier .creneau:hover { background:var(--surface); border-left-color:var(--or); }
  .calendrier .creneau .h { color:var(--or-clair); }
  .calendrier .creneau.signe { border-left-color:var(--bien); }
  .calendrier .creneau.rdv_annule, .calendrier .creneau.refus,
  .calendrier .creneau.perdu { border-left-color:var(--alerte); color:var(--sourdine); }

  /* -------------------------------------------------------- portefeuille */

  .cadre-pf { overflow-x:auto; border:1px solid var(--trait); }
  .cadre-pf table { margin:0; }
  .cadre-pf th, .cadre-pf td { white-space:nowrap; }
  /* Avec une colonne par categorie, le tableau defile ; le nom du client doit
     rester lisible, sinon on ne sait plus de qui parle la ligne. */
  .cadre-pf .colle {
    position:sticky; left:0; z-index:1;
    background:var(--carte); border-right:1px solid var(--trait);
  }
  .cadre-pf thead .colle { background:var(--surface); z-index:2; }
  .cadre-pf tr.inactif td { color:var(--sourdine); }
  .cadre-pf tr.inactif .colle { background:var(--fond-eteint); }
  .cadre-pf .nom-client {
    background:none; border:0; padding:0; color:var(--texte);
    font:inherit; letter-spacing:0; text-transform:none; cursor:pointer;
  }
  .cadre-pf .nom-client:hover { color:var(--or); background:none; }
  .cadre-pf .etat {
    background:none; border:0; padding:0; cursor:pointer;
    font-size:11px; letter-spacing:.09em;
  }
  .cadre-pf .etat.oui { color:var(--bien); }
  .cadre-pf .etat.non { color:var(--alerte); }
  .cadre-pf .contrat { font-size:12px; line-height:1.4; }
  .cadre-pf .contrat .cie { color:var(--sourdine); font-size:10.5px; }
  .cadre-pf .contrat.mort { color:var(--alerte); text-decoration:line-through; opacity:.7; }
  .cadre-pf .total-mois { color:var(--or-clair); font-weight:600; }

  /* ------------------------------------------- statistiques et objectifs */

  /* Un histogramme sans bibliotheque : chaque mois est une colonne, le net et
     le perdu s'empilent. Ce qui compte, c'est de voir le rouge monter. */
  .histogramme {
    display:flex; align-items:flex-end; gap:3px; height:220px;
    padding:12px; border:1px solid var(--trait); background:var(--champ); overflow-x:auto;
  }
  .histogramme .colonne {
    flex:1 0 26px; display:flex; flex-direction:column; justify-content:flex-end;
    height:100%; min-width:26px;
  }
  .histogramme .pile { display:flex; flex-direction:column; justify-content:flex-end; flex:1; }
  .histogramme .part-perdu { background:var(--alerte); }
  .histogramme .part-net   { background:var(--or-eteint); }
  .histogramme .colonne:hover .part-net { background:var(--or); }
  .histogramme .etiquette {
    margin-top:6px; font-size:9.5px; color:var(--sourdine);
    text-align:center; white-space:nowrap;
  }
  .legende { display:flex; gap:18px; margin-top:10px; font-size:11.5px; color:var(--sourdine); }
  .legende i { display:inline-block; width:10px; height:10px; margin-right:6px; }
  .legende i.net { background:var(--or-eteint); }
  .legende i.perdu { background:var(--alerte); }

  .evolution { font-weight:600; font-size:12.5px; }
  .evolution.hausse { color:var(--bien); }
  .evolution.baisse { color:var(--alerte); }
  .evolution.plat { color:var(--sourdine); }

  .comparaison { display:flex; gap:28px; flex-wrap:wrap; padding:14px 0 4px; }
  .comparaison > div { min-width:150px; }
  .comparaison .intitule {
    font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--sourdine);
  }
  .comparaison .valeur { font:600 19px/1.3 var(--nombres); letter-spacing:-.01em; color:var(--perle); }
  .comparaison .avant { font-size:11.5px; color:var(--sourdine); }

  .chute { padding:2px 9px; font-size:11px; border:1px solid; }
  .chute.bonne  { color:var(--bien);     border-color:var(--trait-bien); }
  .chute.moyenne{ color:var(--or-clair); border-color:var(--or-eteint); }
  .chute.mauvaise{ color:var(--alerte);  border-color:var(--trait-alerte); }

  /* Jauges d'objectif et classement : la barre s'arrete a cent pour cent, le
     chiffre a cote ne plafonne pas. */
  .jauge { margin:8px 0 14px; }
  .jauge .intitule { font-size:12px; color:var(--sourdine); margin-bottom:4px; }
  .jauge .piste { height:8px; background:var(--champ); border:1px solid var(--trait); }
  .jauge .remplissage { height:100%; background:var(--or-eteint); }
  .jauge.atteint .remplissage { background:var(--bien); }
  .bloc-objectif {
    border:1px solid var(--trait); background:var(--champ); padding:16px 18px; margin-bottom:14px;
  }
  .bloc-objectif h3 {
    margin:0 0 10px; font:400 16px/1.2 var(--titre); color:var(--or-clair);
    letter-spacing:.06em;
  }
  /* Une cible parmi d'autres : plusieurs coexistent desormais dans le mois,
     celle du cabinet et celles qu'on se donne. Le trait a gauche les separe
     sans les enfermer chacune dans une boite. */
  .cible { border-left:2px solid var(--trait); padding:2px 0 2px 14px; margin:0 0 14px; }
  .cible:last-child { margin-bottom:4px; }
  .entete-cible { display:flex; align-items:center; gap:10px; margin-bottom:2px; }
  .entete-cible b { font-size:14px; }
  .entete-cible .origine { margin:0; }
  .entete-cible button { margin-left:auto; }
  .rang { display:flex; align-items:center; gap:14px; padding:11px 2px; border-bottom:1px solid var(--trait); }
  .rang:last-child { border-bottom:0; }
  .rang .place { font:600 18px/1 var(--nombres); color:var(--or); width:34px; }
  .rang.premier .place { color:var(--or); }
  .rang .qui { flex:1; }
  .rang .qui b { font-size:14px; }
  .rang .detail { font-size:12px; color:var(--sourdine); }

  /* ----------------------------------------------------------- documents */

  .dossier { border:1px solid var(--trait); background:var(--champ); margin-bottom:14px; }
  .dossier > .tete {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:12px 16px; border-bottom:1px solid var(--trait); background:var(--surface);
  }
  .dossier > .tete h3 {
    margin:0; flex:1; font:400 16px/1.2 var(--titre); color:var(--or-clair); letter-spacing:.06em;
  }
  .dossier > .tete .compte { font-size:12px; color:var(--sourdine); }
  .dossier .fichiers { padding:6px 16px 12px; }
  .dossier .fichier {
    display:flex; align-items:center; gap:12px; padding:7px 0;
    border-bottom:1px solid var(--trait); font-size:13px;
  }
  .dossier .fichier:last-child { border-bottom:0; }
  .dossier .fichier a { color:var(--texte); text-decoration:none; flex:1; }
  .dossier .fichier a:hover { color:var(--or); text-decoration:underline; }
  .dossier .fichier .poids { color:var(--sourdine); font-size:11.5px; white-space:nowrap; }
  .dossier .vide { padding:4px 0 2px; }
  /* Le champ de fichier natif est laid ; on le cache derriere un vrai bouton. */
  .depot input[type=file] { display:none; }
  .depot { display:inline-block; }
  /* L'etiquette qui declenche le champ fichier doit avoir l'air d'un bouton. */
  .faux-bouton {
    display:inline-block; padding:7px 15px; cursor:pointer;
    background:none; color:var(--or-clair); border:1px solid var(--trait);
    font:600 11px/1 var(--corps); letter-spacing:.11em; text-transform:uppercase;
  }
  .faux-bouton:hover { border-color:var(--or); color:var(--or); }

  /* ---------------------------------------------------------- messagerie */

  .liste-destinataires {
    max-height:340px; overflow-y:auto; border:1px solid var(--trait); background:var(--champ);
  }
  .liste-destinataires label {
    display:flex; align-items:center; gap:10px; margin:0; padding:8px 14px;
    border-bottom:1px solid var(--trait); cursor:pointer;
    font-size:13px; letter-spacing:0; text-transform:none; color:var(--texte);
  }
  .liste-destinataires label:last-child { border-bottom:0; }
  .liste-destinataires label:hover { background:var(--surface); }
  .liste-destinataires input[type=checkbox] { width:auto; margin:0; }
  .liste-destinataires .adresse { color:var(--sourdine); font-size:12px; }
  .liste-destinataires .interdit { color:var(--alerte); font-size:11.5px; }

  .apercu {
    border:1px solid var(--trait); background:var(--champ); padding:14px 16px; margin-bottom:12px;
  }
  .apercu .a-qui { font-size:12px; color:var(--sourdine); margin-bottom:8px; }
  .apercu .objet { font:400 16px/1.3 var(--titre); color:var(--or-clair); margin-bottom:8px; }
  .apercu pre {
    margin:0; white-space:pre-wrap; word-wrap:break-word;
    font:13px/1.6 var(--corps); color:var(--texte);
  }
  .apercu.ecarte { border-color:var(--trait-alerte); }
  .apercu.ecarte .a-qui { color:var(--alerte); }

  .etat-campagne { padding:2px 9px; font-size:11px; border:1px solid; white-space:nowrap; }
  .etat-campagne.brouillon  { color:var(--sourdine);  border-color:var(--trait); }
  .etat-campagne.programmee { color:var(--or);        border-color:var(--or); }
  .etat-campagne.envoyee    { color:var(--bien);      border-color:var(--trait-bien); }
  .etat-campagne.annulee    { color:var(--alerte);    border-color:var(--trait-alerte); }

  /* --------------------------------------------------- fiches navette */

  .identite { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px;
    background:var(--trait); border:1px solid var(--trait); }
  .identite > div { background:var(--carte); padding:12px 16px; }
  .identite span { display:block; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--sourdine); margin-bottom:3px; }
  .identite b { font-size:15px; color:var(--texte); font-weight:600; }
  .cadre-pf .etat-campagne { display:inline-block; }

  /* --------------------------------------------------------- graphiques */

  .graphe {
    width:100%; border:1px solid var(--trait); background:var(--carte);
    padding:10px 6px 4px;
  }
  .graphe svg { width:100%; height:auto; display:block; }
  .stats-agenda .chiffre .precision {
    display:block; text-transform:none; letter-spacing:0; font-size:11px;
    color:var(--sourdine); margin-top:2px;
  }
  .stats-agenda .chiffre.bien b    { color:#16a34a; }
  .stats-agenda .chiffre.alerte b  { color:#dc2626; }
  .stats-agenda .chiffre.mauvaise b{ color:#dc2626; }
  .stats-agenda .chiffre.moyenne b { color:#c2701a; }
  .stats-agenda .chiffre.bonne b   { color:#16a34a; }

  /* La legende des graphiques suit celle du CRM de Bryan. */
  .legende i { border-radius:50%; }

  /* Une case par nature de piece : on clique dedans, ou on y depose le
     fichier. Chercher la bonne ligne d'un menu deroulant avant chaque depot
     etait le geste de trop. */
  .depots { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
  .depot-nature {
    display:block; margin:0; padding:14px 16px; cursor:pointer;
    border:1px dashed var(--trait); background:var(--champ);
    text-transform:none; letter-spacing:0;
    transition:border-color .12s, background .12s;
  }
  .depot-nature:hover, .depot-nature.survole {
    border-color:var(--or); background:var(--survol); border-style:solid;
  }
  .depot-nature .quoi {
    display:block; font-size:13.5px; font-weight:600; color:var(--texte); margin-bottom:3px;
  }
  .depot-nature .etat { display:block; font-size:11.5px; color:var(--sourdine); }
  .depot-nature.rempli { border-style:solid; border-color:var(--bien); }
  .depot-nature.rempli .etat { color:var(--bien); }
  .depot-nature input[type=file] { display:none; }

  /* La repartition du portefeuille : categorie repliee, compagnies dedans. */
  .repartition { border:1px solid var(--trait); background:var(--carte); margin-bottom:8px; }
  .repartition summary {
    padding:12px 16px; cursor:pointer; display:flex; align-items:baseline;
    gap:14px; flex-wrap:wrap; list-style:none;
  }
  .repartition summary::-webkit-details-marker { display:none; }
  .repartition summary::before { content:'+'; color:var(--sourdine); width:12px; }
  .repartition[open] summary::before { content:'—'; }
  .repartition summary b { font-size:14.5px; }
  .repartition summary span { font-size:13px; color:var(--sourdine); }
  .repartition .compagnies { border-top:1px solid var(--trait); }
  .repartition .compagnies > div {
    display:flex; gap:16px; align-items:baseline; padding:9px 16px 9px 42px;
    border-bottom:1px solid var(--trait); font-size:13px;
  }
  .repartition .compagnies > div:last-child { border-bottom:0; }
  .repartition .cie { font-weight:600; min-width:110px; }
  .repartition .compagnies span { color:var(--sourdine); }
  .repartition .montant { margin-left:auto; color:var(--texte); font-weight:600; }

  .jauge + .origine, .origine {
    font-size:11.5px; color:var(--sourdine); margin-top:6px;
  }
  #pf-colonnes { margin:0 0 18px; border:1px solid var(--trait); background:var(--carte); }
  #pf-colonnes summary {
    padding:10px 16px; cursor:pointer; font-size:12px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--sourdine);
  }
  #pf-colonnes .vide, #pf-colonnes .eic-cases { padding:0 16px 14px; }

/* Les onglets ouverts à un conseiller, choisis par Max. */
.acces-onglets {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px 16px;
  border:1px solid var(--trait); padding:12px 14px 14px; margin:16px 0 4px;
}
.acces-onglets legend { font-size:12px; color:var(--sourdine); padding:0 6px; }
.case-acces { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.case-acces input { width:auto; margin:0; }


/* ======================================================================
   Refonte du 14/09/2026 : arrondis, ombres, bords plus francs.
   Placée en fin de feuille : elle prime sur les règles plus anciennes sans les
   réécrire une à une.
   ====================================================================== */

button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:var(--ombre); }
button.discret, button.danger { border-radius:var(--rayon-petit); border-width:1.5px; box-shadow:none; }
button.discret:hover, button.danger:hover { box-shadow:var(--ombre-legere); }

.erreur, .succes, .avert { border-radius:var(--rayon-moyen); border-left-width:4px; }
.calcul { border-radius:var(--rayon-moyen); border-left-width:4px; }

/* Les tableaux deviennent des blocs arrondis, sans perdre leurs filets. */
table {
  border-collapse:separate; border-spacing:0;
  border:1.5px solid var(--trait); border-radius:var(--rayon-moyen);
  overflow:hidden; background:var(--carte);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom:0; }
.cadre-pf { border-radius:var(--rayon-moyen); border-width:1.5px; }
.cadre-pf table { border:0; border-radius:0; }

.indicateurs { border-radius:var(--rayon); overflow:hidden; border-width:1.5px; box-shadow:var(--ombre-legere); }
.totaux { border-bottom-width:1.5px; }

/* Les étiquettes d'état : des pastilles, plus des rectangles. */
.etat, .chute, .etat-campagne { border-radius:999px; }

#jauge, .jauge .piste { border-radius:999px; overflow:hidden; }
.jauge .remplissage, #jauge-remplie { border-radius:999px; }

.colonne, .bloc-objectif, .dossier, .repartition, #pf-colonnes {
  border-radius:var(--rayon-moyen); border-width:1.5px; overflow:hidden;
  box-shadow:var(--ombre-legere);
}
.stats-agenda { gap:12px; }
.stats-agenda .chiffre {
  border:1.5px solid var(--trait); border-radius:var(--rayon-moyen);
  background:var(--carte); box-shadow:var(--ombre-legere);
}
.stats-agenda .chiffre:last-child { border-right:1.5px solid var(--trait); }
.calendrier { border-radius:var(--rayon-moyen); overflow:hidden; border-width:1.5px; }

/* ---------------------------------------------- l'étude patrimoniale (EIC)
   Bryan, 14/09/2026 : « quand on remplit l'EIC et qu'on est au téléphone avec
   un client, c'est illisible ». Une section à la fois, dans un bloc arrondi,
   avec la liste des étapes à gauche pour sauter où l'on veut. */

.eic-conteneur { display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; }
.eic-etapes {
  position:sticky; top:16px; display:flex; flex-direction:column; gap:6px;
  padding:12px; background:var(--survol); border:1.5px solid var(--trait);
  border-radius:var(--rayon);
}
.eic-etapes button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; margin:0; border-radius:var(--rayon-petit);
  background:transparent; color:var(--texte); border:1.5px solid transparent;
  box-shadow:none; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500;
}
.eic-etapes button:hover { background:var(--carte); border-color:var(--trait); color:var(--texte); transform:none; box-shadow:none; }
.eic-etapes button .numero {
  flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--carte); border:1.5px solid var(--trait); color:var(--sourdine);
}
.eic-etapes button.remplie .numero { background:var(--fond-bien); border-color:var(--trait-bien); color:var(--bien); }
.eic-etapes button.actuelle { background:var(--carte); border-color:var(--or); box-shadow:var(--ombre-legere); }
.eic-etapes button.actuelle .numero { background:var(--or); border-color:var(--or); color:#ffffff; }

.eic-progression { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sourdine); margin:0 0 10px; }
.eic-section {
  background:var(--carte); border:1.5px solid var(--trait); border-radius:var(--rayon);
  box-shadow:var(--ombre); overflow:hidden;
}
.eic-section > h3 {
  margin:0; padding:18px 24px; font:500 22px/1.25 var(--titre); letter-spacing:.04em;
  background:linear-gradient(180deg, var(--survol), var(--carte)); border-bottom:1.5px solid var(--trait);
}
.eic-section > .corps { padding:8px 24px 24px; }
.eic-section .aide { color:var(--sourdine); font-size:14px; margin:14px 0 0; }
.eic-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 18px; }
.eic-grille .large { grid-column:1 / -1; }
.eic-colonnes { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin:16px 0; }
.eic-colonnes > div {
  border:1.5px solid var(--trait); border-radius:var(--rayon-moyen); padding:6px 18px 18px;
  background:var(--survol);
}
.eic-colonnes .qui {
  font:500 17px/1.2 var(--titre); letter-spacing:.06em; color:var(--or-clair);
  padding:12px 0 4px; border-bottom:1.5px solid var(--trait); margin-bottom:4px;
}
.eic-section table { margin-top:16px; }
.eic-section td input { border-radius:8px; padding:8px 10px; }
.eic-notation, .eic-cases { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.eic-notation label, .eic-cases label {
  display:flex; align-items:center; gap:10px; margin:0; padding:10px 14px;
  border:1.5px solid var(--trait); border-radius:999px; background:var(--carte);
  text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; color:var(--texte);
}
.eic-notation select { width:auto; padding:6px 10px; border-radius:8px; }
.eic-cases input[type=checkbox] { width:auto; }
.eic-navigation {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:18px; padding:14px 18px; background:var(--survol);
  border:1.5px solid var(--trait); border-radius:var(--rayon-moyen);
}
.synthese-eic { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin:12px 0; }
.synthese-eic .chiffre {
  padding:14px 16px; border:1.5px solid var(--trait); border-radius:var(--rayon-moyen);
  background:var(--carte); box-shadow:var(--ombre-legere);
}
.synthese-eic .chiffre b { display:block; font:600 20px/1.2 var(--nombres); color:var(--perle); }
.synthese-eic .chiffre span { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sourdine); }

@media (max-width:900px) {
  .eic-conteneur { grid-template-columns:1fr; }
  .eic-etapes { position:static; flex-direction:row; overflow-x:auto; }
  .eic-etapes button { flex:0 0 auto; width:auto; }
  .eic-etapes button .libelle { display:none; }
}