/* Couleurs de la marque Groupe JTI Corporate : bleu du logo et jaune. */
:root {
  --marine: #0b2a66; --marine-2: #123d8c; --bleu: #1a4fa8; --bleu-clair: #e9effb;
  --jaune: #f5b700; --jaune-fonce: #c99400; --jaune-clair: #fff6d6;
  --fond: #f4f6fb; --surface: #fff; --texte: #1b2333; --discret: #5b6475;
  --bord: #dce2ec; --accent: var(--bleu); --accent-texte: #fff;
  --succes: #1f7a3d; --erreur: #b3261e; --info: var(--bleu);
  --largeur-menu: 264px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
.ico { width: 20px; height: 20px; flex-shrink: 0; }

/* Menu latéral */
body.avec-menu { padding-left: var(--largeur-menu); }
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--largeur-menu); z-index: 40; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--marine) 0%, var(--marine-2) 100%); color: #fff; overflow-y: auto;
  border-right: 4px solid var(--jaune); }
.marque { display: block; margin: 16px 16px 6px; padding: 10px 12px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.marque img { display: block; width: 100%; height: auto; }
.nom-logiciel { margin: 4px 20px 6px; font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.7); text-align: center; }
.nom-logiciel span { color: var(--jaune); font-weight: 600; }
.menu { display: flex; flex-direction: column; padding-bottom: 12px; }
.rubrique { margin: 16px 22px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); }
.lien-menu { display: flex; align-items: center; gap: 12px; margin: 1px 12px; padding: 8px 12px; border-radius: 8px;
  color: rgba(255,255,255,.84); text-decoration: none; font-size: .93rem; transition: background .15s, color .15s; }
.lien-menu:hover { background: rgba(255,255,255,.09); color: #fff; }
.lien-menu:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; }
.lien-menu.actif { background: var(--jaune); color: var(--marine); font-weight: 650; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.lien-menu .pastille { margin-left: auto; }
.pied-menu { margin-top: auto; padding: 10px 0 6px; border-top: 1px solid rgba(255,255,255,.12); }
.profil { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px 22px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--jaune); color: var(--marine); font-weight: 700; }
.profil-nom { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-nom small { display: block; color: rgba(255,255,255,.65); font-size: .75rem; }
.deconnexion { background: none; border: 0; color: rgba(255,255,255,.8); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; }
.deconnexion:hover { color: var(--jaune); background: rgba(255,255,255,.08); }
.menu-bascule { position: absolute; opacity: 0; pointer-events: none; }
.barre-haut, .voile { display: none; }

@media (max-width: 960px) {
  body.avec-menu { padding-left: 0; }
  .barre-haut { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 16px;
    background: var(--marine); color: #fff; border-bottom: 3px solid var(--jaune); }
  .menu-bouton { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; cursor: pointer; padding: 0 6px; border-radius: 6px; }
  .menu-bouton span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .marque-mobile { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 1rem; margin-right: auto; }
  .marque-mobile img { border-radius: 6px; }
  .marque-mobile b { color: var(--jaune); }
  .cloche { position: relative; color: #fff; display: grid; padding: 6px; }
  .cloche .pastille { position: absolute; top: -2px; right: -4px; }
  .lateral { width: min(84vw, 290px); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .menu-bascule:checked ~ .lateral { transform: none; }
  .menu-bascule:checked ~ .voile { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(8,20,48,.45); }
}

.contenu { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
h1 { font-size: 1.5rem; margin: 0 0 18px; color: var(--marine); }
h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--jaune); }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 1px 2px rgba(11,42,102,.05); padding: 16px; margin-bottom: 16px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.chiffre { font-size: 2rem; font-weight: 700; color: var(--marine); }
.discret { color: var(--discret); font-size: .9rem; }
.tableau { width: 100%; border-collapse: collapse; background: var(--surface); }
.tableau th, .tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau th { font-size: .85rem; color: var(--discret); font-weight: 600; }
.defilement { overflow-x: auto; }
.bouton, button.bouton { display: inline-block; background: var(--accent); color: var(--accent-texte); border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; text-decoration: none; }
.bouton:hover { background: var(--marine-2); }
.bouton.jaune { background: var(--jaune); color: var(--marine); }
.bouton.secondaire:hover { background: var(--bleu-clair); }
.bouton.secondaire { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.bouton.danger { background: var(--erreur); }
button.lien { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.en-ligne { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; align-items: center; }
form p, form div.champ, form > div { margin: 0 0 12px; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; max-width: 480px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; background: #fff; }
.helptext, .aide { display: block; color: var(--discret); font-size: .85rem; }
.errorlist { color: var(--erreur); margin: 4px 0; padding-left: 18px; }
.message { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; background: #e8f0fb; }
.message.success { background: #e6f4ea; color: var(--succes); }
.message.error { background: #fdecea; color: var(--erreur); }
.etiquette { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .8rem; background: #eef1f5; }
.etiquette.actif { background: #e6f4ea; color: var(--succes); }
.etiquette.suspendu, .etiquette.resilie { background: #fdecea; color: var(--erreur); }
.connexion { max-width: 420px; margin: 48px auto; }
body.sans-menu { min-height: 100vh; background: radial-gradient(circle at 20% 0%, var(--marine-2), var(--marine) 70%); }
body.sans-menu .contenu > .carte { border: 0; border-top: 5px solid var(--jaune); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 28px; }
.logo-connexion { display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto 12px; }
.sous-titre-connexion { text-align: center; color: var(--discret); margin: 0 0 18px; font-size: .9rem; }
.connexion .bouton { width: 100%; padding: 11px; font-weight: 600; }
dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.fiche dt { color: var(--discret); }
dl.fiche dd { margin: 0; }
@media (max-width: 720px) {
  .contenu { padding: 20px 16px; }
  dl.fiche { grid-template-columns: 1fr; }
  dl.fiche dd { margin-bottom: 8px; }
}
.etiquette.terminee { background: #e6f4ea; color: var(--succes); }
.etiquette.bloquee, .etiquette.a_corriger { background: #fdecea; color: var(--erreur); }
.etiquette.a_controler { background: #fff4e0; color: #8a5300; }
.etiquette.en_cours { background: #e8f0fb; color: var(--accent); }
.etiquette.retard, .etiquette.a_corriger { background: #fdecea; color: var(--erreur); }
.etiquette.declare, .etiquette.paye, .etiquette.valide, .etiquette.non_du { background: #e6f4ea; color: var(--succes); }
.etiquette.attente_pieces, .etiquette.partiel { background: #fff4e0; color: #8a5300; }
.alerte { padding: 8px 10px; border-left: 4px solid #d08a00; margin-bottom: 8px; background: #fffaf0; }
.alerte.critique { border-left-color: var(--erreur); background: #fdf3f2; }
.rm h2 { font-size: 1.05rem; border-bottom: 1px solid var(--bord); padding-bottom: 4px; }
.rm h3 { font-size: .95rem; margin: 12px 0 4px; }
.rm ul { margin: 4px 0 8px; padding-left: 20px; }
.etiquette.brouillon { background: #eef1f5; }
.etiquette.a_valider, .etiquette.transmise, .etiquette.demandee { background: #fff4e0; color: #8a5300; }
.etiquette.recue { background: #e6f4ea; color: var(--succes); }
.pastille { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--erreur); color: #fff; font-size: .75rem; text-align: center; }
.notification { padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.notification.non-lue { background: #f2f7fd; font-weight: 600; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.grille-2 h2 { margin-top: 0; font-size: 1rem; }
.chiffre.rouge { color: var(--erreur); }
.barres { display: flex; flex-direction: column; gap: 6px; }
.barre { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 48px; gap: 8px; align-items: center; font-size: .9rem; }
.barre-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-piste { background: #eef1f5; border-radius: 4px; height: 12px; overflow: hidden; }
.barre-valeur { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.barre-nombre { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grille .carte { padding: 12px; margin-bottom: 0; }
  .chiffre { font-size: 1.5rem; }
}
.flux { display: flex; flex-direction: column; gap: 0; }
.publication h2 { margin: 4px 0 6px; font-size: 1.1rem; }
.publication h2 a { text-decoration: none; }
.publication.epinglee { border-left: 4px solid var(--accent); }
fieldset.publics { border: 1px solid var(--bord); border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; }
label.case { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 16px; }
.etiquette.publiee, .etiquette.ouverte, .etiquette.retenue { background: #e6f4ea; color: var(--succes); }
.etiquette.non_retenue, .etiquette.retiree, .etiquette.archivee, .etiquette.close { background: #eef1f5; color: var(--discret); }
.etiquette.entretien, .etiquette.en_etude { background: #e8f0fb; color: var(--accent); }

/* Dossiers administratifs */
.etiquette.d-recue, .etiquette.d-preparation, .etiquette.d-controle { background: #e8f0fb; color: var(--accent); }
.etiquette.d-pieces, .etiquette.d-depose, .etiquette.d-attente { background: #fff4e0; color: #8a5300; }
.etiquette.d-obtenu, .etiquette.d-remis, .etiquette.d-cloture { background: #e6f4ea; color: var(--succes); }
.etiquette.d-abandonne { background: #eef1f5; color: var(--discret); }
ol.parcours { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0 16px; counter-reset: etape; }
ol.parcours li { counter-increment: etape; padding: 4px 10px; border-radius: 14px; font-size: .8rem; background: #eef1f5; color: var(--discret); }
ol.parcours li::before { content: counter(etape) ". "; }
ol.parcours li.faite { background: #e6f4ea; color: var(--succes); }
ol.parcours li.actuelle { background: var(--accent); color: #fff; font-weight: 600; }

/* Apporteurs d'affaires */
.etiquette.p-nouveau, .etiquette.p-contacte { background: #e8f0fb; color: var(--accent); }
.etiquette.p-negociation, .etiquette.c-calculee, .etiquette.c-validee { background: #fff4e0; color: #8a5300; }
.etiquette.p-signe, .etiquette.c-payee { background: #e6f4ea; color: var(--succes); }
.etiquette.p-refuse, .etiquette.c-annulee { background: #eef1f5; color: var(--discret); }

/* Étudiants et stagiaires */
.etiquette.i-en_cours, .etiquette.r-soumis { background: #e8f0fb; color: var(--accent); }
.etiquette.i-terminee, .etiquette.r-corrige, .etiquette.pr-present { background: #e6f4ea; color: var(--succes); }
.etiquette.i-abandon, .etiquette.pr-excuse { background: #eef1f5; color: var(--discret); }
.etiquette.pr-retard { background: #fff4e0; color: #8a5300; }
.etiquette.pr-absent { background: #fdecea; color: var(--erreur); }
details.carte > summary { cursor: pointer; font-weight: 600; color: var(--accent); }

/* Évaluation mensuelle */
.etiquette.ev-brouillon, .etiquette.o-en_cours { background: #e8f0fb; color: var(--accent); }
.etiquette.ev-partagee, .etiquette.o-atteint { background: #e6f4ea; color: var(--succes); }
.etiquette.o-partiel { background: #fff4e0; color: #8a5300; }
.etiquette.o-non_atteint { background: #fdecea; color: var(--erreur); }
.o-ligne { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr auto; gap: .5rem; align-items: center; }
.o-ligne input, .o-ligne select { width: 100%; min-width: 0; padding: .45rem .5rem; }
@media (max-width: 700px) { .o-ligne { grid-template-columns: 1fr; } }

/* Gestion comptable et statistiques */
.etiquette.c-a_faire { background: #f1f3f6; color: #4a5361; }
.etiquette.c-en_cours { background: #e8f0fb; color: var(--accent); }
.etiquette.c-fait { background: #e6f4ea; color: var(--succes); }
.etiquette.c-non_applicable { background: transparent; color: #7a8291; border: 1px dashed #c9ced6; }
.c-ligne { display: grid; grid-template-columns: 11rem 1fr auto; gap: .5rem; align-items: center; }
.c-ligne input, .c-ligne select { width: 100%; min-width: 0; padding: .4rem .5rem; }
@media (max-width: 700px) { .c-ligne { grid-template-columns: 1fr auto; } .c-ligne input { grid-column: 1 / -1; grid-row: 2; } }
.avancement { display: inline-block; width: 4rem; height: .5rem; background: #e5e8ee; border-radius: 1rem; vertical-align: middle; overflow: hidden; }
.avancement span { display: block; height: 100%; background: var(--accent); }
.anomalie { padding: .6rem 0; border-bottom: 1px solid #e5e8ee; }
.anomalie:last-child { border-bottom: 0; }
.barre-piste.pile { display: flex; }
.barre-valeur.client, .pastille-legende.client { background: #d98e04; }
.barre-valeur.admin, .pastille-legende.admin { background: #8a6bbf; }
.pastille-legende { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--accent); vertical-align: middle; margin-left: .6rem; }
.legende { font-size: .85rem; color: #5b6270; }
.tableau.stats th[scope=row] { font-weight: 500; white-space: nowrap; }
.tableau.stats td { text-align: right; }
.barres.larges .barre { grid-template-columns: 64px 1fr minmax(90px, auto); }
.anomalie form { margin-top: .4rem; } .anomalie form input { flex: 1; min-width: 12rem; padding: .45rem .5rem; }

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(245,183,0,.35); }
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Bande défilante « À la une » ============ */
.bandeau { display: flex; align-items: stretch; background: var(--marine); color: #fff; border-bottom: 3px solid var(--jaune); overflow: hidden; min-height: 42px; }
.bandeau-titre { flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; background: var(--jaune); color: var(--marine);
  font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; position: relative; z-index: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-right: 22px; }
.bandeau-piste { flex: 1; overflow: hidden; display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.bandeau-defile { display: flex; width: max-content; animation: defiler var(--duree, 40s) linear infinite; }
.bandeau:hover .bandeau-defile, .bandeau:focus-within .bandeau-defile { animation-play-state: paused; }
.bandeau-serie { display: flex; }
.bandeau-element { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; color: #fff; text-decoration: none;
  font-size: .9rem; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.18); line-height: 42px; }
.bandeau-element:hover { color: var(--jaune); }
.bandeau-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 10px; line-height: 1.5; }
.type-actualite { background: #2f6fd6; color: #fff; }
.type-annonce { background: #8a5cd1; color: #fff; }
.type-offre { background: #1f9d55; color: #fff; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bandeau-defile { animation: none; }
  .bandeau-piste { overflow-x: auto; mask-image: none; }
  .bandeau-serie[aria-hidden] { display: none; }
}
@media (max-width: 960px) { .bandeau-titre { padding: 0 16px 0 12px; font-size: .7rem; } .bandeau-element { padding: 0 18px; font-size: .85rem; } }

/* ============ Couleurs des pages ============ */
h2 { color: var(--marine); }
.tableau { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,42,102,.06); border: 1px solid var(--bord); }
.tableau thead th { background: var(--bleu-clair); color: var(--marine); font-weight: 700; border-bottom: 2px solid #c9d6f2; }
.tableau tbody tr:nth-child(even) td { background: #fafbfe; }
.tableau tbody tr:hover td { background: var(--jaune-clair); }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grille > .carte { border-top: 4px solid var(--bleu); }
.grille > .carte:nth-child(4n+2) { border-top-color: var(--jaune); }
.grille > .carte:nth-child(4n+3) { border-top-color: #1f9d55; }
.grille > .carte:nth-child(4n+4) { border-top-color: #8a5cd1; }
.aide { color: var(--discret); background: var(--bleu-clair); border-left: 4px solid var(--bleu); padding: 8px 12px; border-radius: 0 8px 8px 0; }
p.aide { margin: 0 0 16px; }
.vide { color: var(--discret); background: var(--surface); border: 1px dashed var(--bord); border-radius: 10px; padding: 14px; text-align: center; }
.etiquette { font-weight: 600; }
.etiquette.actif { background: #dcf3e4; }
.message { border-left: 4px solid var(--bleu); }
.message.success { border-left-color: var(--succes); }
.message.error { border-left-color: var(--erreur); }
.compte { display: inline-block; min-width: 24px; padding: 0 8px; border-radius: 12px; background: var(--bleu-clair); color: var(--marine);
  font-size: .78rem; font-weight: 700; text-align: center; vertical-align: middle; }

/* Onglets */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; padding: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; width: fit-content; max-width: 100%; }
.onglets a { padding: 7px 14px; border-radius: 9px; text-decoration: none; color: var(--marine); font-weight: 600; font-size: .92rem; }
.onglets a:hover { background: var(--bleu-clair); }
.onglets a.actif { background: var(--marine); color: #fff; }
.onglets a.actif .compte { background: var(--jaune); color: var(--marine); }

/* Puces (impôts d'un régime) */
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.puce { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: .82rem; font-weight: 600; }
.puce-suivie { background: var(--bleu-clair); color: var(--marine); border: 1px solid #c9d6f2; }
.puce-hors { background: #f1f3f6; color: var(--discret); border: 1px dashed #c9ced6; }
.grille-regimes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.carte.regime { border-top: 4px solid var(--jaune); margin-bottom: 0; }
.carte.regime.inactif { opacity: .6; }
.regime-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.regime-code { background: var(--marine); color: var(--jaune); font-weight: 800; font-size: .8rem; padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; }

/* Situation impôts et CNPS */
.resume-dettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 8px 0 10px; }
.tuile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; color: #fff; text-decoration: none;
  box-shadow: 0 6px 16px rgba(11,42,102,.12); position: relative; overflow: hidden; }
.tuile::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.12); }
.tuile-libelle { font-size: .85rem; font-weight: 600; opacity: .95; }
.tuile-montant { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tuile-montant small { font-size: .8rem; font-weight: 600; opacity: .85; }
.tuile-note { font-size: .78rem; opacity: .9; }
.tuile-rouge { background: linear-gradient(135deg, #c62828, #8e1c1c); }
.tuile-orange { background: linear-gradient(135deg, #f5b700, #d98e04); color: var(--marine); }
.tuile-bleu { background: linear-gradient(135deg, var(--bleu), var(--marine)); }
.tuile-vert { background: linear-gradient(135deg, #22a45d, #157a42); }
a.tuile:hover { transform: translateY(-2px); transition: transform .15s; }
.total-dette { font-size: 1.05rem; margin: 6px 0 16px; }
.total-dette strong { color: #b3261e; }
.bloc-dette { background: var(--surface); border: 1px solid var(--bord); border-left: 6px solid var(--bleu); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.bloc-dette header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bloc-dette h2 { margin: 0; }
.bloc-dette > .discret { margin: 2px 0 10px; }
.bloc-total { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bloc-retard { border-left-color: #c62828; } .bloc-retard h2, .bloc-retard .bloc-total { color: #b3261e; }
.bloc-ce_mois { border-left-color: var(--jaune); } .bloc-ce_mois .bloc-total { color: #9a6a00; }
.bloc-a_venir { border-left-color: var(--bleu); }
.bloc-payees { border-left-color: #22a45d; } .bloc-payees h2 { color: #157a42; }
.bloc-retard .tableau thead th { background: #fdecea; color: #8e1c1c; border-bottom-color: #f5c6c2; }
.bloc-ce_mois .tableau thead th { background: var(--jaune-clair); color: #7a5400; border-bottom-color: #f3dc94; }
.bloc-payees .tableau thead th { background: #e3f5ea; color: #157a42; border-bottom-color: #bfe5cd; }

/* Utilisateurs par catégorie */
.categorie-comptes { margin-bottom: 22px; }
.categorie-comptes h2 { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 5px solid var(--bleu); }
.cat-vert h2 { border-left-color: #22a45d; }
.cat-jaune h2 { border-left-color: var(--jaune); }
.cat-violet h2 { border-left-color: #8a5cd1; }
.cat-gris h2 { border-left-color: #9aa3b2; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 720px) { .resume-dettes { grid-template-columns: 1fr 1fr; gap: 10px; } .tuile { padding: 12px 14px; } .tuile-montant { font-size: 1.2rem; } .tuile::after { display: none; } }
.carte.proposition { border-left: 5px solid var(--jaune); } .proposition-tete { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.type-note { background: var(--jaune); color: var(--marine); }

/* Statistiques impôts et CNPS */
.stats-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.stats-chiffres > div { background: var(--bleu-clair); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stats-chiffres strong { color: var(--marine); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stats-chiffres strong.rouge { color: var(--erreur); }
.pastille-legende.cnps { background: var(--jaune); }
.pastille-legende.paye { background: #22a45d; }
.histogramme { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; padding: 8px 4px 0; border-bottom: 1px solid var(--bord); }
.histo-mois { display: flex; flex-direction: column; align-items: center; height: 100%; }
.histo-barres { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.histo-pile { width: 42%; height: 100%; display: flex; flex-direction: column-reverse; }
.histo-pile span { display: block; width: 100%; }
.histo-impots { background: var(--bleu); border-radius: 3px 3px 0 0; }
.histo-cnps { background: var(--jaune); }
.histo-paye { background: #22a45d; border-radius: 3px 3px 0 0; }
.histo-libelle { font-size: .7rem; color: var(--discret); padding: 4px 0; white-space: nowrap; }
@media (max-width: 720px) { .histogramme { gap: 2px; height: 140px; } .histo-libelle { font-size: .6rem; } }
.rm-stats { width: 100%; border-collapse: collapse; margin-top: 8px; } .rm-stats th, .rm-stats td { padding: 4px 6px; border-bottom: 1px solid var(--bord); text-align: left; } .rm-stats .nombre { text-align: right; } .rm-barre { width: 35%; } .rm-barre span { display: inline-block; height: 7px; vertical-align: middle; } .rb-impots { background: var(--bleu); } .rb-cnps { background: var(--jaune); } .rb-paye { background: #22a45d; }

/* Planning et calendrier */
.filtre-planning { margin: 0 0 12px; }
.filtre-planning select { margin-left: 6px; }
.pl-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 14px; }
.pl-entete h2 { margin: 0; font-size: 1.1rem; color: var(--marine); }
.pl-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .pl-semaine { grid-template-columns: 1fr; } .pl-jour { min-height: 0; } }
.pl-jour { background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: 8px; min-height: 140px; }
.pl-jour header { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--bord); padding-bottom: 4px; margin-bottom: 6px; }
.pl-jour .pl-nom { font-weight: 700; color: var(--marine); }
.pl-jour .pl-num { color: var(--discret); font-size: .85rem; }
.pl-jour .pl-ajout { margin-left: auto; text-decoration: none; font-weight: 700; color: var(--bleu); padding: 0 6px; border-radius: 6px; }
.pl-jour .pl-ajout:hover { background: #e8f0fb; }
.pl-aujourdhui { border-color: var(--jaune); box-shadow: 0 0 0 2px rgba(245,183,0,.35); }
.pl-vide { color: var(--discret); font-size: .85rem; margin: 4px 0; }
.pl-item { display: block; text-decoration: none; color: inherit; border-left: 4px solid var(--bleu); background: #f2f6fd; border-radius: 6px; padding: 5px 7px; margin-bottom: 6px; font-size: .85rem; line-height: 1.3; }
.pl-item:hover { filter: brightness(.96); }
.pl-item .pl-heure { display: block; font-weight: 700; color: var(--marine); font-size: .8rem; }
.pl-item .pl-titre { display: block; }
.pl-item .pl-detail { display: block; color: var(--discret); font-size: .78rem; }
.pl-item .pl-statut { display: inline-block; margin-top: 2px; font-size: .72rem; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,.8); }
.pl-visite { border-left-color: #1a4fa8; background: #eaf1fd; }
.pl-rdv { border-left-color: #f5b700; background: #fff7dc; }
.pl-reunion, .pl-formation { border-left-color: #6b4fbb; background: #f1edfb; }
.pl-administration, .pl-rappel, .pl-autre { border-left-color: #5b6475; background: #f1f3f6; }
.pl-echeance { border-left-color: #c0392b; background: #fdeeec; }
.pl-st-effectuee { border-left-color: #22a45d; background: #e7f6ee; }
.pl-st-annulee { opacity: .6; text-decoration: line-through; }
.pl-st-deplacee { border-left-style: dashed; opacity: .75; }
.pl-st-reportee { border-left-color: #e67e22; background: #fff1e3; }
.legende-planning { margin-top: 14px; color: var(--discret); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pl-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: -8px; border: 0; }
.legende-planning .pl-visite { background: #1a4fa8; } .legende-planning .pl-rdv { background: #f5b700; }
.legende-planning .pl-reunion { background: #6b4fbb; } .legende-planning .pl-echeance { background: #c0392b; }
.legende-planning .pl-effectuee { background: #22a45d; } .legende-planning .pl-anoter { background: #e67e22; }
.pl-st-a_noter { border-left-color: #e67e22; }
.pl-st-a_noter .pl-statut { background: #e67e22; color: #fff; }
table.pl-mois { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; background: var(--surface); }
table.pl-mois th { padding: 6px; color: var(--discret); font-size: .85rem; text-align: left; }
table.pl-mois td { border: 1px solid var(--bord); vertical-align: top; height: 110px; padding: 4px; }
table.pl-mois td.pl-hors { background: #f7f8fa; }
table.pl-mois td.pl-hors .pl-num { color: #aab1bd; }
table.pl-mois td .pl-num { display: block; font-weight: 700; text-decoration: none; color: var(--marine); margin-bottom: 3px; }
table.pl-mois .pl-item { padding: 2px 5px; margin-bottom: 3px; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.pl-mois .pl-item .pl-heure { display: inline; margin-right: 3px; }
table.pl-mois .pl-item .pl-titre { display: inline; }
.pl-plus { font-size: .75rem; }
.etiquette.pl-et-effectuee { background: #e6f4ea; color: var(--succes); }
.etiquette.pl-et-annulee { background: #fdecea; color: var(--erreur); }
.etiquette.pl-et-deplacee { background: #fff4e0; color: #8a5300; }
.etiquette.pl-et-prevue { background: #e8f0fb; color: var(--accent); }

/* Honoraires */
.etiquette.h-payee { background: #e6f4ea; color: var(--succes); }
.etiquette.h-partielle, .etiquette.h-a_payer { background: #fff4e0; color: #8a5300; }
.etiquette.h-retard { background: #fdecea; color: var(--erreur); }
.etiquette.h-annulee, .etiquette.h-brouillon { background: #eef1f5; color: var(--discret); }
.histo-futur { opacity: .35; }
.ligne-formulaire { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ligne-formulaire > div { margin: 0; }
.facture-papier { max-width: 820px; }
.facture-entete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--jaune); padding-bottom: 12px; margin-bottom: 14px; }
.facture-logo { height: 70px; }
.facture-ref { text-align: right; }
.facture-ref h1 { margin: 0 0 4px; font-size: 1.3rem; }
.facture-ref h1::after { display: none; }
.facture-papier .tableau td.nombre, .facture-papier .tableau th.nombre { text-align: right; }
.facture-total td { font-weight: 800; color: var(--marine); border-top: 2px solid var(--marine); }
@media print {
  .lateral, .barre-haut, .bandeau, .pas-impression, .message { display: none !important; }
  body.avec-menu { padding-left: 0; }
  .contenu { padding: 0; }
  .facture-papier { border: 0; box-shadow: none; }
}

/* Budgets */
.liste-budgets { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-left: 18px; }
.onglets-mois a { padding: 6px 10px; font-size: .85rem; }
.tableau-budget td.nombre, .tableau-budget th.nombre { text-align: right; white-space: nowrap; }
.budget-groupe th { background: var(--bleu-clair, #e8f0fb); color: var(--marine); font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.budget-total td { font-weight: 700; border-top: 2px solid var(--bord); }
.budget-solde td { font-weight: 800; color: var(--marine); border-top: 3px solid var(--marine); }
.ecart-bon { color: var(--succes); font-weight: 600; }
.ecart-mauvais { color: var(--erreur); font-weight: 600; }
.budget-jauge { white-space: nowrap; font-size: .85rem; }
.jauge { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: #eef1f5; vertical-align: middle; overflow: hidden; }
.jauge span { display: block; height: 100%; }
.jauge .bon { background: #22a45d; } .jauge .mauvais { background: #c62828; }
.histo-depense { background: #c62828; border-radius: 3px 3px 0 0; }
.histo-prevu { position: relative; }
.histo-prevu::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: var(--prevu); border: 2px dashed #8a94a6; border-bottom: 0; border-radius: 3px 3px 0 0; pointer-events: none; }
a.histo-mois { text-decoration: none; color: inherit; }
.pastille-legende.rouge { background: #c62828; }
.pastille-legende.contour { background: transparent; border: 2px dashed #8a94a6; }
.grille-budget { min-width: 1250px; }
.grille-budget th, .grille-budget td { padding: 4px; }
.grille-budget td input { width: 100%; min-width: 72px; padding: 4px 5px; text-align: right; font-variant-numeric: tabular-nums; }
.grille-budget .poste { position: sticky; left: 0; background: var(--surface); min-width: 170px; z-index: 1; }
.grille-budget .repartir { min-width: 150px; }
.grille-budget .repartir input { width: 80px; min-width: 0; }
.bouton.petit { padding: 3px 7px; font-size: .75rem; }
.lien-bouton { background: none; border: 0; color: var(--erreur); text-decoration: underline; cursor: pointer; padding: 0; }

/* Indicateurs complémentaires du pilotage */
a.carte.indicateur { display: block; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.carte.indicateur:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,42,102,.12); }
.carte.indicateur.alerte { border-top-color: var(--erreur); }
.carte.indicateur .chiffre small { font-size: .9rem; font-weight: 600; color: var(--discret); }

/* Page d'accueil publique */
body.vitrine { padding: 0; background: #fff; }
.vitrine .ico { width: 22px; height: 22px; }
.v-entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px 28px; background: var(--marine); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.v-marque { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.1rem; }
.v-marque b { color: var(--jaune); }
.v-nav { display: flex; gap: 18px; margin-left: auto; }
.v-nav a { color: #dfe7f7; text-decoration: none; font-weight: 600; }
.v-nav a:hover { color: var(--jaune); }
.bouton.jaune { background: var(--jaune); color: var(--marine); border-color: var(--jaune); font-weight: 700; }
.bouton.grand { padding: 12px 22px; font-size: 1.05rem; }
.bouton.v-contour { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.v-heros { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 70px 8vw 80px;
  background: radial-gradient(circle at 85% 20%, rgba(245,183,0,.18), transparent 40%), linear-gradient(135deg, var(--marine), var(--bleu)); color: #fff; }
.v-surtitre { color: var(--jaune); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.v-heros h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.15; margin: 0 0 16px; }
.v-heros h1::after { display: none; }
.v-chapo { font-size: 1.12rem; line-height: 1.6; color: #e3eaf8; max-width: 620px; }
.v-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.v-heros-logo img { width: 100%; max-width: 420px; height: auto; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.3); display: block; margin: 0 auto; }
.v-section { padding: 64px 8vw; }
.v-section h2 { font-size: 1.9rem; color: var(--marine); margin: 0 0 8px; text-align: center; }
.v-intro { text-align: center; color: var(--discret); margin: 0 0 32px; }
.v-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.v-carte { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 22px; box-shadow: 0 4px 14px rgba(11,42,102,.06); border-top: 4px solid var(--jaune); }
.v-carte h3 { margin: 12px 0 8px; color: var(--marine); font-size: 1.08rem; }
.v-carte p { margin: 0; color: #4a5468; line-height: 1.55; }
.v-icone { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #e8f0fb; color: var(--bleu); }
.v-icone.jaune { background: var(--jaune); color: var(--marine); flex: none; }
.v-fonce { background: var(--marine); color: #fff; }
.v-fonce h2 { color: #fff; margin-bottom: 32px; }
.v-atouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .v-atouts { grid-template-columns: 1fr; } }
.v-atout { display: flex; gap: 16px; align-items: flex-start; }
.v-atout h3 { margin: 2px 0 6px; color: var(--jaune); font-size: 1.08rem; }
.v-atout p { margin: 0; color: #dfe7f7; line-height: 1.55; }
.v-etapes { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 0; margin: 32px 0 0; }
.v-etapes li { counter-increment: etape; background: #f5f8fe; border-radius: 16px; padding: 22px; position: relative; }
.v-etapes li::before { content: counter(etape); display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.v-etapes strong { display: block; color: var(--marine); margin-bottom: 6px; }
.v-etapes span { color: #4a5468; line-height: 1.5; }
.v-contact { background: #f5f8fe; }
.v-contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; align-items: start; }
.v-coordonnees { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; font-size: 1.05rem; }
.v-coordonnees li { display: flex; gap: 10px; align-items: center; }
.v-coordonnees .ico { color: var(--bleu); }
.v-espace { background: var(--marine); color: #fff; border-radius: 18px; padding: 26px; }
.v-espace h3 { color: var(--jaune); margin-top: 0; }
.v-espace p { color: #dfe7f7; }
.v-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 8vw; background: #071c47; color: #aab8d6; font-size: .9rem; }
@media (max-width: 860px) {
  .v-nav { display: none; }
  .v-entete { padding: 10px 16px; justify-content: space-between; }
  .v-heros { grid-template-columns: 1fr; padding: 40px 16px 50px; }
  .v-heros-logo { order: -1; }
  .v-heros-logo img { max-width: 260px; }
  .v-section { padding: 44px 16px; }
  .v-contact-grille { grid-template-columns: 1fr; }
}

/* Coffre-fort des codes d'accès */
.masque { letter-spacing: .15em; color: var(--discret); }
.secret-revele { background: #fff4d6; border: 1px solid var(--jaune); padding: 2px 6px; border-radius: 4px; user-select: all; }
code.copiable { user-select: all; }
.lien-bouton.bleu { color: var(--bleu); }
.choix-import { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 14px; }