/* ============================================================
     CHARTE GRAPHIQUE WEROCKET (vert vif + noir sur fond clair)
     Modifier uniquement ces variables pour rebrander toute l'app.
     ============================================================ */
  :root {
    --marque:        #60FA96;
    --marque-fonce:  #2fe673;
    --marque-clair:  #e6fef0;
    --marque-txt:    #111827;
    --sidebar-bg:    #111827;
    --sidebar-txt:   #9aa3b2;
    --sidebar-actif: #ffffff;

    --police-titre:  "Poppins", "Segoe UI", sans-serif;
    --police-corps:  "Inter", "Segoe UI", Arial, sans-serif;

    /* Couleurs d'état : assez foncées pour un texte blanc lisible dessus
       (contraste >= 4.5:1) et lisibles en texte sur fond blanc. */
    --vert:#178a54; --orange:#b45309; --rouge:#c73530; --gris:#6b7280; --bleu:#2563eb;
    --fond:#f5f7fa; --carte:#ffffff; --texte:#0B0E14; --texte-doux:#4b5563;
    --bordure:#e8eaf0; --ombre:0 1px 3px rgba(20,20,50,.08); --rayon:12px;
  }
  * { box-sizing:border-box; }
  /* Accessibilité : texte réservé aux lecteurs d'écran + lien d'évitement */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
             overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip-link { position:absolute; left:-9999px; top:0; z-index:1000; background:var(--marque);
               color:var(--marque-txt); padding:10px 16px; border-radius:0 0 8px 0; font-weight:700;
               text-decoration:none; }
  .skip-link:focus { left:0; }
  /* Le fond de page reprend la couleur du menu : le contenu est posé dessus
     dans une « fenêtre » claire aux bords arrondis (voir .contenu). */
  body { margin:0; background:var(--sidebar-bg); color:var(--texte);
         font-family:var(--police-corps); font-size:14px; }
  h1,h2,h3 { font-family:var(--police-titre); }
  a { color:inherit; }

  /* ---- Mise en page : sidebar + contenu ---- */
  .layout { display:flex; min-height:100vh; }
  .sidebar { width:240px; background:var(--sidebar-bg); color:var(--sidebar-txt);
             display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; }
  .sidebar .logo { padding:20px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
  .sidebar .logo img { width:88%; max-width:200px; height:auto; display:block; margin:0 auto; }
  .sidebar .logo .sub { font-size:11px; color:rgba(255,255,255,.62); margin-top:6px; letter-spacing:.02em; }
  .sidebar nav { padding:12px 8px; flex:1; overflow-y:auto;
                 scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
  .sidebar nav::-webkit-scrollbar { width:6px; }
  .sidebar nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
  .sidebar nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.32); }
  .sidebar nav::-webkit-scrollbar-track { background:transparent; }
  /* Titres de section du menu (MON ESPACE / ÉQUIPE / ADMINISTRATION) */
  .sidebar nav .nav-sec { font-size:10px; letter-spacing:.09em; text-transform:uppercase;
                          color:#8b93a1; padding:14px 14px 4px; font-weight:600; }
  .sidebar nav .nav-sec:first-child { padding-top:2px; }
  .sidebar nav a { display:flex; align-items:center; gap:12px; padding:9px 14px;
                   color:var(--sidebar-txt); text-decoration:none; font-weight:500;
                   border-radius:8px; transition:background .15s,color .15s; }
  /* Icônes en TRAIT (SVG contour) : monochromes, elles suivent la couleur du texte */
  .sidebar nav a .ic { width:20px; flex:none; opacity:.8; }
  .sidebar nav a .ic svg { display:block; margin:0 auto; width:17px; height:17px;
                           fill:none; stroke:currentColor; stroke-width:1.6;
                           stroke-linecap:round; stroke-linejoin:round; }
  .sidebar nav a:hover { background:rgba(255,255,255,.07); color:var(--sidebar-actif); }
  .sidebar nav a:hover .ic { opacity:1; }
  /* Page ACTIVE : barre verte à gauche (même code visuel que le sélecteur
     d'entreprise) — le seul élément vert du menu, donc aucune ambiguïté. */
  .sidebar nav a.actif { background:rgba(47,230,115,.10); color:var(--marque-fonce);
                         box-shadow:inset 3px 0 0 var(--marque-fonce);
                         border-radius:0 8px 8px 0; }
  .sidebar nav a.actif .ic { opacity:1; }
  /* Section OUVERTE (un de ses sous-modules est la page active) : parent en
     blanc + chevron, PAS en vert — le vert reste réservé à la page active. */
  .sidebar nav a.ouvert { color:#fff; }
  .sidebar nav a.ouvert .ic { opacity:1; }
  .sidebar nav a .chev { margin-left:auto; width:14px; flex:none; opacity:.6; }
  .sidebar nav a .chev svg { display:block; width:13px; height:13px; fill:none;
                             stroke:currentColor; stroke-width:1.8;
                             stroke-linecap:round; stroke-linejoin:round; }
  /* Sous-entrées : simplement indentées, sans flèche ni icône */
  .sidebar nav a.sous-item { padding-left:46px; font-size:12.5px; font-weight:400; opacity:.85; }
  .sidebar nav a.sous-item.actif { opacity:1; font-weight:500; }
  /* ---- Groupes REPLIABLES (Vue équipe, Paramètres) ----
     Fermés par défaut ; clic sur le titre = ouvrir/fermer. Le chevron pointe
     à droite (fermé) puis pivote vers le bas (ouvert) ; au survol il glisse
     légèrement pour montrer que le titre est cliquable. */
  .sidebar nav .grp-titre { cursor:pointer; user-select:none; }
  .sidebar nav .grp-titre .chev { opacity:.55; transition:opacity .2s, transform .2s; }
  .sidebar nav .grp-titre .chev svg { transform:rotate(-90deg); transition:transform .25s ease; }
  .sidebar nav .grp.open > .grp-titre .chev svg { transform:rotate(0deg); }
  .sidebar nav .grp-titre:hover .chev { opacity:1; transform:translateX(3px); }
  .sidebar nav .grp.open > .grp-titre:hover .chev { transform:translateY(2px); }
  .sidebar nav .grp-sous { overflow:hidden; max-height:0; transition:max-height .3s ease; }
  .sidebar nav .grp.open > .grp-sous { max-height:600px; }
  @media (prefers-reduced-motion: reduce) {
    .sidebar nav .grp-sous, .sidebar nav .grp-titre .chev,
    .sidebar nav .grp-titre .chev svg { transition:none!important; }
  }
  .sidebar .pied { padding:16px 22px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; }
  .sidebar .pied .nom { color:#fff; font-weight:600; }
  .sidebar .pied .role { display:inline-block; margin-top:3px; padding:1px 8px; border-radius:10px;
                         background:var(--marque); color:var(--marque-txt); font-size:11px; font-weight:600; }
  .sidebar .pied a { color:var(--sidebar-txt); text-decoration:none; }
  .sidebar .pied a:hover { color:#fff; }

  /* La « fenêtre » de contenu : fond clair, bords arrondis, posée sur le fond
     sombre du menu (qui s'étend à toute la page). Le titre de la page vit dans
     son bandeau (.topbar). */
  .contenu { margin:10px 12px 10px 250px; flex:1; min-width:0;
             background:var(--fond); border-radius:16px;
             box-shadow:0 2px 14px rgba(0,0,0,.28);
             min-height:calc(100vh - 20px); display:flex; flex-direction:column; }
  .topbar { background:var(--carte); border-bottom:1px solid var(--bordure);
            border-radius:16px 16px 0 0;
            padding:16px 28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .topbar h1 { margin:0; font-size:20px; color:var(--texte); }
  main { padding:24px 28px; flex:1; border-radius:0 0 16px 16px; }

  /* ---- Composants ---- */
  .carte { background:var(--carte); border:1px solid var(--bordure); border-radius:var(--rayon);
           padding:22px; margin-bottom:22px; box-shadow:var(--ombre); }
  /* Textes longs (noms, notes, commentaires) : casser plutôt que déborder */
  .carte, .col-saisie, .sidebar .pied { overflow-wrap:break-word; }
  h2 { font-size:16px; color:var(--texte); margin:0 0 16px; }
  h3.bloc-titre { font-size:13.5px; font-family:var(--police-titre); font-weight:600;
                  color:var(--texte); margin:0 0 12px; display:flex; align-items:center; gap:6px; }
  /* Bloc à deux colonnes (réalisé | prévisions) — panneaux égaux et distincts */
  .deux-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px;
               align-items:stretch; margin-bottom:22px; }
  .col-saisie { min-width:0; border-radius:var(--rayon); padding:22px;
                box-shadow:var(--ombre); border:1px solid var(--bordure); }
  .col-saisie.realise   { background:#f3fbf7; border-color:#cdeede; }
  .col-saisie.prevision { background:#e9edf5; border-color:#d2dbea; }
  .col-saisie.realise   .bloc-titre { color:#15794d; }
  .col-saisie.prevision .bloc-titre { color:#33507a; }
  .grille-saisie.compacte { grid-template-columns:1fr 1fr; gap:10px; }
  @media(max-width:900px){ .deux-cols { grid-template-columns:1fr; } }
  table { width:100%; border-collapse:collapse; font-size:13.5px; }
  th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--bordure); white-space:nowrap; }
  th { color:var(--texte-doux); font-weight:600; font-size:11.5px; text-transform:uppercase;
       letter-spacing:.03em; background:#fafbfd; }
  tr:hover td { background:#fafbff; }
  td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .total-row td { font-weight:700; background:var(--marque-clair); border-top:2px solid var(--marque); }
  .total-row:hover td { background:var(--marque-clair); }
  .sousligne td { background:#fbfcfe; font-size:12px; color:var(--texte-doux);
                  padding:5px 12px 8px; border-bottom:2px solid var(--bordure); white-space:normal; }
  .sousligne:hover td { background:#fbfcfe; }
  .sousligne b { color:var(--texte); }

  .badge { padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; color:#fff; display:inline-block; }
  .badge.gris{background:var(--gris);} .badge.vert{background:var(--vert);}
  .badge.orange{background:var(--orange);} .badge.bleu{background:var(--bleu);}
  .tag-invite { background:#fff4e5; color:#8a5200; border:1px solid #f3d2a0;
                padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }

  /* Curseur de période (Semaine / Mois / Année) */
  .periode-toggle { display:inline-flex; align-items:center; gap:2px; background:#eef1f6;
                    border-radius:9px; padding:3px; margin-bottom:14px; }
  .pseg { display:inline-flex; align-items:center; background:transparent;
          color:var(--texte-doux); border:none; padding:5px 14px; white-space:nowrap;
          border-radius:7px; font-size:12.5px; font-weight:700; cursor:pointer;
          font-family:var(--police-corps); transition:.15s; text-decoration:none; }
  .pseg:hover { color:var(--texte); }
  .pseg.actif { background:var(--marque); color:var(--marque-txt); box-shadow:var(--ombre); font-weight:800; }
  .pseg-cal.actif .cal-nav, .pseg-cal.actif .cal-lbl { color:var(--marque-txt); }
  /* Segment calendrier (= sélecteur de semaine) intégré au curseur de période */
  .pseg-cal { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; }
  .pseg-cal .cal-nav { cursor:pointer; font-weight:800; color:var(--texte-doux);
                       padding:0 3px; user-select:none; text-decoration:none; }
  .pseg-cal .cal-nav:hover { color:var(--texte); }
  .pseg-cal .cal-lbl { font-weight:700; position:relative; cursor:pointer; }
  .pseg-cal .cal-lbl input[type="week"],
  .pseg-cal .cal-lbl input[type="date"] { position:absolute; inset:0; width:100%; height:100%;
                       opacity:0; cursor:pointer; border:none; padding:0; margin:0; }
  /* Sélecteur de semaine « maison » (menu déroulant coloré, compatible Firefox) */
  .calsem { position:relative; display:inline-block; margin:0; padding:0; }
  .calsem > summary { list-style:none; cursor:pointer; padding:0; white-space:nowrap; }
  .calsem > summary::-webkit-details-marker { display:none; }
  .calsem > summary::marker { content:""; }
  /* Calendrier maison (grille du mois) : fond de semaine coloré, chiffres lisibles */
  .calcal { position:absolute; top:100%; left:0; z-index:60; margin-top:6px; width:284px;
    background:var(--carte); border:1px solid var(--bordure); border-radius:12px;
    box-shadow:var(--ombre); padding:10px; }
  .calcal.vers-gauche { left:auto; right:0; }
  .calcal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .calcal-titre { font-weight:800; font-size:14px; text-transform:capitalize; color:var(--texte); }
  .calcal-nav { border:1px solid var(--bordure); background:var(--carte); color:var(--texte);
    border-radius:8px; width:30px; height:30px; font-size:16px; font-weight:800; cursor:pointer; line-height:1; }
  .calcal-nav:hover { border-color:var(--marque); background:var(--marque-clair); }
  .calcal-jhr { display:flex; margin-bottom:2px; }
  .calcal-jh { flex:1; text-align:center; font-size:11px; font-weight:700; color:var(--texte-doux); padding:2px 0; }
  .calcal-row { display:flex; text-decoration:none; border-radius:8px; margin:2px 0;
    border:2px solid transparent; cursor:pointer; }
  .calcal-row:hover { filter:brightness(.96); }
  .calcal-day { flex:1; text-align:center; padding:6px 0; font-size:13px; font-weight:600;
    color:#1f2430; }                                   /* chiffres foncés = lisibles */
  .calcal-day.hors { color:#b6bac4; font-weight:500; } /* jours d'un autre mois : estompés */
  .calcal-day.we { background:transparent !important; }/* samedi/dimanche : jamais de couleur */
  .calcal-row.sel { border-color:var(--marque); font-weight:800; }
  .calcal-row.sel .calcal-day { color:#0b3d23; }
  /* Fond de semaine coloré du LUNDI au VENDREDI (tons clairs = chiffres lisibles) */
  .calcal-row.st-vert   .calcal-day:not(.we) { background:var(--st-vert-cal, #c9f2d8); }
  .calcal-row.st-orange .calcal-day:not(.we) { background:var(--st-orange-cal, #fde4c0); }
  .calcal-row.st-rouge  .calcal-day:not(.we) { background:var(--st-rouge-cal, #f9d2d0); }
  /* extrémités arrondies du bandeau lun→ven */
  .calcal-row .calcal-day:first-child { border-top-left-radius:6px; border-bottom-left-radius:6px; }
  .calcal-row .calcal-day:nth-child(5) { border-top-right-radius:6px; border-bottom-right-radius:6px; }
  .calcal-leg { font-size:11px; color:var(--texte-doux); padding-top:8px; margin-top:6px;
    border-top:1px solid var(--bordure); line-height:1.5; }
  /* Sélecteur de MOIS (vue « Mois ») : grille des 12 mois de l'année */
  .calmois { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
  .calmois-btn { display:block; text-align:center; padding:9px 4px; border-radius:8px;
    text-decoration:none; font-size:12.5px; font-weight:600; color:var(--texte);
    border:2px solid transparent; text-transform:capitalize; }
  .calmois-btn:hover { background:var(--marque-clair); }
  .calmois-btn.sel { background:var(--marque); color:var(--marque-txt);
    border-color:var(--marque-fonce); font-weight:800; }

  /* Filtre commerciaux : menu déroulant (popover) dans la barre du haut */
  .filtre-dd { position:relative; margin-bottom:0; border:none; padding:0; }
  .filtre-dd > summary { list-style:none; cursor:pointer; background:var(--carte);
        border:1px solid var(--bordure); border-radius:8px; padding:7px 14px;
        font-size:12.5px; font-weight:700; white-space:nowrap; }
  .filtre-dd > summary::-webkit-details-marker { display:none; }
  .filtre-dd > summary::marker { content:""; }
  .filtre-dd[open] > summary { border-color:var(--marque); }
  .filtre-dd .panneau { position:absolute; right:0; top:calc(100% + 6px); z-index:60;
        background:var(--carte); border:1px solid var(--bordure); border-radius:10px;
        box-shadow:0 8px 24px rgba(20,20,50,.14); padding:16px; width:300px; }

  /* KPI */
  .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
  .kpis.cols-5 { grid-template-columns:repeat(5,1fr); }
  .kpis.cols-8 { grid-template-columns:repeat(8,1fr); gap:12px; }
  @media(max-width:1200px){ .kpis.cols-8 { grid-template-columns:repeat(4,1fr); } }
  @media(max-width:980px){ .kpis, .kpis.cols-5 { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:640px){ .kpis, .kpis.cols-5, .kpis.cols-8 { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:var(--carte); border:1px solid var(--bordure); border-radius:var(--rayon);
         padding:18px 20px; box-shadow:var(--ombre); min-width:0; }
  .kpis.cols-8 .kpi { padding:14px 12px; }
  .kpis.cols-8 .kpi .valeur { font-size:22px; }
  /* Tableau vue équipe : compact pour limiter le défilement horizontal.
     Repères fixes : l'en-tête reste visible au défilement vertical, la colonne
     des noms au défilement horizontal (sinon on se perd dans les 16 colonnes). */
  .table-scroll { overflow:auto; max-height:72vh; }
  /* Bouton « Aller en bas/haut » (demande du 11/09/2026) : suit le curseur
     EN CONTINU pendant qu'on est dans .table-scroll (position:fixed posée en
     JS), invisible sinon — voir base.html. Ajouté une seule fois à
     document.body (pas dans la zone, pour rester fixe même quand la zone
     défile en interne). Fondu VOLONTAIREMENT lent et doux (pas un flash).
     Le SUIVI de la souris est lui aussi ralenti (transition sur left/top,
     pas un saut instantané) : la vignette « rattrape » le curseur au lieu de
     se téléporter dessus à chaque mousemove — sinon impossible à cliquer,
     elle bouge encore au moment du clic. */
  .scroll-vers-bas { position:fixed; z-index:800;
                     opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(.96);
                     /* translate(-50%,-50%) : left/top désignent le CENTRE de
                        la vignette (pas son coin) — indispensable pour que le
                        calcul JS de distance à la souris soit correct quel
                        que soit le côté où elle se trouve — demande du
                        11/09/2026.
                        left/top eux-mêmes ne sont PAS animés en CSS : le
                        lissage du déplacement se fait en JS (boucle image par
                        image, recalculée à partir de la vraie position de la
                        souris). */
                     transition:opacity .5s ease, transform .5s ease,
                                visibility 0s linear .5s; }
  .scroll-vers-bas.visible { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);
                     transition:opacity .5s ease, transform .5s ease, visibility 0s; }
  .scroll-vers-bas button { cursor:pointer; border:none;
                     background:var(--marque); color:var(--marque-txt);
                     font-size:12.5px; font-weight:700; padding:8px 16px;
                     border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.28);
                     white-space:nowrap; }
  .scroll-vers-bas button:hover { background:var(--marque-fonce); }
  .equipe-table thead th { position:sticky; top:0; z-index:3; }
  .equipe-table th:first-child,
  .equipe-table td:first-child:not([colspan]) { position:sticky; left:0; z-index:2;
    background:var(--carte); }
  .equipe-table thead th:first-child { z-index:4; }
  /* Un nom très long ne doit pas élargir la colonne figée */
  .equipe-table td:first-child:not([colspan]) { max-width:190px; overflow:hidden;
    text-overflow:ellipsis; }
  .equipe-table .total-row td:first-child { background:var(--marque-clair); }
  .equipe-table tr:hover td:first-child:not([colspan]) { background:#fafbff; }
  .equipe-table .total-row:hover td:first-child { background:var(--marque-clair); }
  .equipe-table th, .equipe-table td { padding:6px 5px; font-size:12px; }
  .equipe-table th { white-space:normal; line-height:1.2; }   /* en-têtes sur 2 lignes → colonnes plus étroites */
  /* Sous-valeur dans une cellule (no show, CA annulé, montant en cours) :
     regroupe deux données liées dans la même colonne → tableau plus étroit. */
  .equipe-table .sc { display:block; font-size:10.5px; font-weight:400;
                      color:var(--texte-doux); line-height:1.25; }
  .equipe-table td.num, .equipe-table th.num { font-variant-numeric:tabular-nums; }
  /* Teintes des tuiles « affaires HubSpot » : bon (signé) / churn (annulé) / perdu */
  .kpi.k-vert { background:#f0fbf5; border-color:#cdeede; }
  .kpi.k-rouge { background:#fdf1f0; border-color:#f3c9c6; }
  .kpi.k-rouge .valeur { color:#a32d2d; }
  .kpi.k-orange { background:#fdf7ec; border-color:#f0dcae; }
  .kpi.k-orange .valeur { color:#854f0b; }
  /* Titre de groupe de KPI (activité / affaires / pipeline) */
  .kpi-groupe { font-size:12.5px; font-family:var(--police-titre); font-weight:600;
                color:var(--texte-doux); margin:0 0 8px; }
  /* Bandeau « pipeline en cours » : une cellule par étape + total */
  .pipe-strip { display:flex; flex-wrap:wrap; background:var(--carte);
                border:1px solid var(--bordure); border-radius:var(--rayon);
                box-shadow:var(--ombre); overflow:hidden; margin-bottom:22px; }
  .pipe-strip .cel { flex:1 1 120px; min-width:110px; padding:12px 16px;
                     border-right:1px solid var(--bordure); }
  .pipe-strip .cel:last-child { border-right:none; }
  .pipe-strip .cel.total { background:#f4f7fb; }
  .pipe-strip .lib { font-size:11px; color:var(--texte-doux);
                     text-transform:uppercase; letter-spacing:.03em; }
  .pipe-strip .val { font-family:var(--police-titre); font-size:22px; font-weight:700; }
  .pipe-strip .sous-m { font-size:12px; color:var(--texte-doux); }
  /* Variante du bandeau ci-dessus avec un TITRE INTÉGRÉ (dans la même
     bordure, pas au-dessus). .lead-box = conteneur (bordure unique), en
     colonne : .lead-title (bandeau plein largeur), puis .lead-ligne — les
     SIX cases sur une seule ligne depuis le 15/09/2026 — et, sur la fiche
     d'un commercial, .lead-ouverts, la liste de ses leads pas encore
     traités, dépliée par la case verte. Réutilise .cel/.lib/.val/.sous-m
     pour un rendu identique au bandeau .pipe-strip. Réutilisé en vue équipe
     ET en fiche commerciale (app/templates/_leads_box.html). */
  .lead-box { display:flex; flex-direction:column; background:var(--carte);
              border:1px solid var(--bordure); border-radius:var(--rayon);
              box-shadow:var(--ombre); overflow:hidden; margin-bottom:22px; }
  .lead-box .lead-title { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
              padding:14px 16px; border-bottom:1px solid var(--bordure);
              font-size:12.5px; font-family:var(--police-titre); font-weight:600;
              color:var(--texte-doux); }
  .lead-box .lead-content { display:flex; }
  .lead-box .cel { padding:12px 16px; border-right:1px solid var(--bordure);
                   border-bottom:1px solid var(--bordure);
                   display:flex; flex-direction:column; justify-content:center; }
  .lead-box .cel.total { background:#f4f7fb; }
  .lead-box .lib { font-size:11px; color:var(--texte-doux);
              text-transform:uppercase; letter-spacing:.03em; }
  .lead-box .val { font-family:var(--police-titre); font-size:22px; font-weight:700; }
  .lead-box .sous-m { font-size:12px; color:var(--texte-doux); }
  /* Une seule ligne de six cases (15/09/2026). .cel-action = la case verte
     cliquable : « Leads a attribuer » (equipe, vers le board HubSpot) ou
     « Leads non traites » (fiche commerciale, deplie la liste dessous). */
  .lead-box .lead-ligne { display:flex; flex-wrap:wrap; }
  /* Six cases a se partager la largeur : base 0 pour qu'elles restent sur
     UNE ligne des que la place existe, min-width pour que le libelle ne
     se hache pas — en dessous, elles passent a la ligne. */
  .lead-box .lead-ligne > .cel { flex:1 1 16%; min-width:118px; }
  .lead-box .lead-ligne > .cel:last-child { border-right:none; }
  .lead-box .cel-action { background:var(--vert); padding:0; text-decoration:none; }
  /* Version lien (vue equipe) : pas de bouton dedans, elle garde ses marges. */
  .lead-box a.cel-action { padding:12px 16px; }
  .lead-box a.cel-action:hover, .lead-box .cel-action:hover { background:#0f7a44; }
  .lead-box .cel-action .lib, .lead-box .cel-action .val,
  .lead-box .cel-action .sous-m { color:#fff; }
  .lead-box .cel-action .sous-m { opacity:.85; }
  /* Le bouton remplit la case ; c'est la case qui porte le flex de la ligne. */
  .lead-box .cel-bouton { display:flex; flex-direction:column; justify-content:center;
              width:100%; height:100%; padding:12px 16px; background:none; border:none;
              border-radius:0; text-align:left; cursor:pointer;
              font-family:var(--police-corps); font-weight:400; }
  .lead-box .cel-bouton:hover { background:none; }
  .lead-box .cel-action .val { font-family:var(--police-titre); font-size:22px; font-weight:700; }
  .lead-box .lead-ouverts { padding:16px; }
  .lead-box .lead-ouverts .liens-lead { display:flex; flex-wrap:wrap; gap:6px; }
  .lead-box .lead-ouverts .liens-lead .btn { padding:5px 10px; font-size:12px; }
  @media (max-width: 900px) {
    .lead-box .lead-ligne > .cel { flex:1 1 40%; }
  }
  .kpi .libelle { font-size:11.5px; color:var(--texte-doux); text-transform:uppercase; letter-spacing:.03em; }
  .kpi .valeur { font-family:var(--police-titre); font-size:30px; font-weight:700; color:var(--texte); margin-top:4px; }
  .kpi .sous { font-size:12px; color:var(--texte-doux); margin-top:4px; }
  .kpi.accent { background:linear-gradient(135deg,#0f1b2d,#111827); border:none; }
  .kpi.accent .libelle { color:rgba(255,255,255,.55); }
  .kpi.accent .valeur { color:var(--marque); }
  .kpi.accent .sous { color:rgba(255,255,255,.55); }

  /* Flèche de tendance vs semaine précédente (compacte) */
  .trend { font-size:.5em; font-weight:800; vertical-align:middle; margin-left:5px;
           line-height:1; letter-spacing:-.02em; display:inline-block; }
  .trend.up   { color:#15794d; }   /* vert foncé : lisible sur fond blanc (le vert charte ne l'est pas) */
  .trend.down { color:#b91c1c; }
  .trend.flat { color:var(--gris); }
  /* Dans les tableaux : un peu plus petite, collée au chiffre */
  td .trend { font-size:10.5px; margin-left:3px; }
  /* Icône « meilleur de l'équipe » */
  /* « Meilleur de l'équipe » : le chiffre est ENTOURÉ à la main (double boucle
     tracée au stylo rouge), à la place de l'ancienne coupe posée à côté.
     Le tracé est en SVG posé PAR-DESSUS la valeur en position absolue : il ne
     décale ni le chiffre ni la largeur des colonnes. Le rouge est fixe (encre
     de stylo) et non celui des statuts, qui reste réservé au « en retard ». */
  .top { position:relative; display:inline-block; padding:1px 7px; }
  .top > svg { position:absolute; left:-7%; top:-26%; width:114%; height:152%;
               overflow:visible; pointer-events:none; transform:rotate(-1.6deg); }
  .top > svg path { fill:none; stroke:#e0413a; stroke-width:2.1;
                    stroke-linecap:round; stroke-linejoin:round;
                    vector-effect:non-scaling-stroke;
                    /* pathLength=100 → le trait se dessine de 100 à 0 */
                    stroke-dasharray:100; stroke-dashoffset:100;
                    animation:top-tracer .5s cubic-bezier(.55,.1,.35,1) forwards; }
  /* La 2ᵉ boucle démarre quand la 1ʳᵉ se termine : le geste « j'insiste ». */
  .top > svg path.p2 { stroke-width:1.8; opacity:.9;
                       animation-duration:.46s; animation-delay:.4s; }
  @keyframes top-tracer { to { stroke-dashoffset:0; } }
  /* Animations désactivées par l'utilisateur : l'entourage reste visible,
     simplement il ne se dessine pas. */
  @media(prefers-reduced-motion:reduce){
    .top > svg path { animation:none; stroke-dashoffset:0; }
  }

  /* Jauge de progression du CA sur le mois */
  .jauge { cursor:default; }
  .jauge-bar { height:20px; background:#d5dce8; border-radius:10px; overflow:hidden; display:flex; }
  .jauge-bar .seg { height:100%; }  /* couleur en inline (dégradé doux entre tranches) */
  /* Bout droit de la partie REMPLIE arrondi (comme le début), tant que < 100 % */
  .jauge-bar .remplir > :last-child { border-radius:0 10px 10px 0; overflow:hidden; }
  /* Remplissage animé au chargement (JS retire puis remet .anime) */
  .jauge-bar .remplir { display:flex; width:100%; height:100%; transform-origin:left center; }
  .jauge-bar .remplir.anime { animation: jauge-remplit 1s cubic-bezier(.25,.8,.35,1) both; }
  @keyframes jauge-remplit { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @media(prefers-reduced-motion:reduce){ .jauge-bar .remplir.anime { animation:none!important; } }
  .jauge-info { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
  .pcent-ligne { display:flex; align-items:baseline; gap:8px; }
  /* Largeur réservée : le chiffre qui compte de 0 à N ne pousse pas la fusée */
  .pcent-ligne .pcent { display:inline-block; min-width:76px; font-variant-numeric:tabular-nums; }
  .jauge-info .pcent { font-family:var(--police-titre); font-size:26px; font-weight:700; line-height:1; }
  .jauge-info .pcent.statut-vert, .jauge-info .pcent.statut-ok { color:var(--st-vert-tx, var(--vert)); }
  .jauge-info .pcent.statut-orange { color:var(--st-orange-tx, var(--orange)); }
  .jauge-info .pcent.statut-rouge { color:var(--st-rouge-tx, var(--rouge)); }
  /* Le CHIFFRE reste VERT au-delà du seuil : seule la jauge change de couleur */
  .jauge-info .pcent.statut-depasse { color:var(--st-vert-tx, var(--vert)); }
  .jauge-info .montant { font-weight:700; font-size:15px; }
  .jauge-info .montant .sur { color:var(--texte-doux); font-weight:400; }

  /* Cartes de taux à fond noir : toutes les flèches en blanc + légère animation */
  .kpi.accent .trend { color:#ffffff; }
  /* Animation UNIQUE à l'arrivée : la flèche parcourt toute la hauteur du chiffre
     (bas → haut pour ▲, haut → bas pour ▼) puis s'arrête. */
  .kpi.accent .trend.up   { animation: arrive-up 1.4s ease-out 1 both; }
  .kpi.accent .trend.down { animation: arrive-down 1.4s ease-out 1 both; }
  @keyframes arrive-up   { from{ transform:translateY(24px);  opacity:0 } 60%{ opacity:1 } to{ transform:translateY(0); opacity:1 } }
  @keyframes arrive-down { from{ transform:translateY(-24px); opacity:0 } 60%{ opacity:1 } to{ transform:translateY(0); opacity:1 } }
  @media(prefers-reduced-motion:reduce){ .kpi.accent .trend{animation:none!important} }

  /* Barre de progression vs objectif */
  .prog { margin-bottom:14px; }
  .prog .haut { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
  .prog .haut b { font-weight:600; }
  .prog .barre { height:10px; background:#eef1f6; border-radius:6px; overflow:hidden; }
  .prog .barre i { display:block; height:100%; border-radius:6px; background:var(--marque); }
  .prog .barre i.depasse { background:var(--vert); }
  .prog .barre i.faible { background:var(--orange); }

  /* Navigation par semaine */
  .semnav { display:flex; align-items:center; gap:10px; margin-left:auto; }
  .semnav .lbl { font-weight:600; font-size:14px; background:var(--marque-clair);
                 padding:7px 14px; border-radius:8px; position:relative; cursor:pointer;
                 user-select:none; }
  .semnav .lbl:hover { background:#d4fbe3; }
  .semnav .lbl input[type="week"],
  .semnav .lbl input[type="date"] { position:absolute; inset:0; width:100%; height:100%;
                 opacity:0; cursor:pointer; border:none; padding:0; margin:0; }
  .semnav a, .semnav button.evo-arrow { text-decoration:none; background:var(--carte);
              border:1px solid var(--bordure); font-size:13.5px; cursor:pointer;
              border-radius:8px; padding:7px 11px; font-weight:700; color:var(--texte); }
  .semnav a:hover, .semnav button.evo-arrow:hover { border-color:var(--marque); background:var(--carte); }

  /* Mini graphe d'évolution (barres) */
  .spark { display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:10px;
           overflow-x:auto; scroll-behavior:smooth; }
  .spark .col { flex:0 0 52px; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
  .spark .col.col-mois { flex:0 0 64px; }
  .spark .col .bar.bar-mois { background:var(--bleu); }
  .spark .col .s.lbl-mois { color:var(--bleu); font-weight:700; }
  .evo-arrow { cursor:pointer; }
  .spark .col .bar { width:60%; max-width:34px; background:var(--marque); border-radius:5px 5px 0 0; min-height:3px; }
  .spark .col .bar.vide { background:#e6e9f0; }
  .spark .col .v { font-size:12px; font-weight:700; }
  .spark .col .s { font-size:11px; color:var(--texte-doux); }

  /* Boutons / formulaires */
  button,.btn { background:var(--marque); color:var(--marque-txt); border:none; padding:9px 18px; border-radius:8px;
                cursor:pointer; font-size:13.5px; font-weight:700; font-family:var(--police-corps);
                text-decoration:none; display:inline-block; transition:.15s; }
  button:hover,.btn:hover { background:var(--marque-fonce); }
  button:disabled, .btn:disabled { opacity:.55; cursor:not-allowed; }
  button:disabled:hover { background:var(--marque); }
  .btn.ghost { background:var(--carte); border:1px solid var(--bordure); color:var(--texte); }
  .btn.ghost:hover { border-color:var(--marque); background:#fff; }
  button.danger { background:var(--rouge); color:#fff; } button.danger:hover { filter:brightness(.92); }
  input,select,textarea { padding:9px 11px; border:1px solid var(--bordure); border-radius:8px;
                          font-size:13.5px; font-family:var(--police-corps); background:#fff; }
  input:focus,select:focus,textarea:focus { outline:none; border-color:var(--marque-fonce);
                                            box-shadow:0 0 0 3px rgba(47,230,115,.3); }
  /* Focus clavier visible partout (liens, boutons, résumés de menus) */
  a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
    outline:2px solid #0f7a44; outline-offset:2px; border-radius:4px; }
  .sidebar a:focus-visible, .login-card a:focus-visible, .login-card button:focus-visible,
  .login-card summary:focus-visible { outline-color:var(--marque); }
  textarea { width:100%; min-height:70px; resize:vertical; }
  label.champ { display:block; font-size:12.5px; color:var(--texte-doux); margin-bottom:4px; font-weight:600; }
  .grille-saisie { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
  .grille-saisie input { width:100%; }
  .input-mini { width:78px !important; padding:7px 8px; }

  .message { background:#e7f7ef; border:1px solid #b6e3cd; color:#1c7a52; padding:12px 16px;
             border-radius:8px; margin-bottom:18px; word-break:break-word; }
  .alerte { background:#fdf2e6; border:1px solid #f3d2a0; color:#8a5200; padding:12px 16px;
            border-radius:8px; margin-bottom:18px; }
  .hint { font-size:12.5px; color:var(--texte-doux); margin-top:8px; max-width:75ch; }
  /* Ligne de formulaire : champs alignés en bas, retour à la ligne sur mobile */
  .form-ligne { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
  details { margin-bottom:8px; border:1px solid var(--bordure); border-radius:8px; padding:6px 14px; }
  summary { cursor:pointer; font-weight:600; padding:6px 0; }
  .droits-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; margin:12px 0; }

  /* ---- Page de connexion ---- */
  .login-pg { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0c1117; padding:24px; }
  .login-card { width:100%; max-width:420px; background:#111827;
                border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:48px 40px;
                animation:login-fade .35s cubic-bezier(.16,1,.3,1) both; }
  @keyframes login-fade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
  @media(prefers-reduced-motion:reduce){.login-card{animation:none}}
  .login-brand { display:flex; justify-content:center; align-items:center; margin-bottom:36px; }
  .login-brand img { width:70%; height:auto; display:block; }
  .login-brand-name { font-family:var(--police-titre); font-size:15px; font-weight:700; color:#fff; line-height:1.2; }
  .login-brand-sub { font-size:11.5px; color:rgba(255,255,255,.62); margin-top:2px; }
  .login-card h1 { font-family:var(--police-titre); font-size:22px; font-weight:700; color:#fff; margin:0 0 4px; }
  .login-card .login-sub { color:rgba(255,255,255,.62); font-size:13px; margin:0 0 28px; }
  .login-card .alerte { background:rgba(224,65,58,.12); border-color:rgba(224,65,58,.3); color:#f87171; }
  .login-field { margin-bottom:12px; }
  .login-card input[type="email"],.login-card input[type="password"],.login-card input[type="text"] {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:#fff; border-radius:10px; padding:12px 14px; font-size:14px; box-sizing:border-box; }
  .login-card input::placeholder { color:rgba(255,255,255,.55); }
  .login-card input:focus { outline:none; border-color:var(--marque); background:rgba(96,250,150,.05); }
  .login-card .btn-login { width:100%; margin-top:8px; background:var(--marque); color:var(--marque-txt);
    border:none; border-radius:10px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; display:block; }
  .login-card .btn-login:hover { background:var(--marque-fonce); }

  /* ---- Hamburger / overlay mobile ---- */
  .btn-hamburger { display:none; align-items:center; justify-content:center;
    width:38px; height:38px; flex-shrink:0; background:var(--carte);
    border:1px solid var(--bordure); border-radius:8px; cursor:pointer;
    font-size:20px; color:var(--texte); padding:0; line-height:1;
    font-family:inherit; font-weight:400; }
  .sidebar-overlay { display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:199; cursor:pointer; }

  /* ---- Breakpoints responsive ---- */
  /* Confort tactile + reduced-motion (compléments) */
  @media(pointer:coarse){
    .pseg-cal .cal-nav { padding:8px 10px; }
    .semnav a, .semnav button.evo-arrow { padding:10px 14px; }
    .pseg { padding:9px 14px; }
  }
  @media(prefers-reduced-motion:reduce){
    .sidebar { transition:none!important; }
    .spark { scroll-behavior:auto; }
    .prog .barre i, button, .btn, .pseg, .sidebar nav a { transition:none!important; }
  }
  @media(max-width:760px){
    .sidebar { position:fixed; top:0; left:0; bottom:0; z-index:200;
      width:260px; flex-direction:column; transform:translateX(-100%);
      transition:transform .25s cubic-bezier(.4,0,.2,1); }
    body.nav-ouverte .sidebar { transform:translateX(0); }
    body.nav-ouverte .sidebar-overlay { display:block; }
    .contenu { margin:8px; min-height:calc(100vh - 16px); }
    main { padding:14px 16px; }
    .topbar { padding:10px 14px; gap:10px; }
    .topbar h1 { font-size:16px; flex:1; min-width:0;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .btn-hamburger { display:flex; }
  }
  @media(max-width:600px){
    .pseg { padding:5px 9px; font-size:11.5px; }
    .pseg-cal { padding:5px 8px; }
    .periode-toggle { flex-wrap:wrap; }
    .filtre-dd .panneau { right:auto; left:0; width:calc(100vw - 28px); max-width:320px; }
    .topbar { flex-wrap:wrap; }
  }
  @media(max-width:500px){
    .grille-saisie.compacte { grid-template-columns:1fr; }
    .kpi .valeur { font-size:24px; }
    .kpis.cols-8 .kpi .valeur { font-size:18px; }
    .col-saisie button[type="submit"] { width:100%; }
    .jauge-info { flex-direction:column; gap:4px; align-items:flex-start; }
    .semnav { flex-wrap:wrap; gap:6px; }
    .semnav .lbl { font-size:12.5px; }
    .carte { padding:16px; }
    .kpi { padding:14px; }
  }

  /* ============================================================
     ENVIRONNEMENTS GRAPHIQUES (Paramètres → Environnement graphique)
     CSS PUR : la classe theme-<clé> posée sur <body> rhabille les
     pages sans toucher aux gabarits ni aux données. « classique »
     = aucune surcharge (présentation d'origine).
     ============================================================ */

  /* ---- Le sélecteur de la page Paramètres (indépendant du thème actif) ---- */
  .themes-choix { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
  .theme-opt { display:flex; flex-direction:column; gap:5px; border:1.5px solid var(--bordure);
               border-radius:10px; padding:14px 16px; cursor:pointer; background:var(--carte);
               transition:border-color .15s, box-shadow .15s; }
  .theme-opt:hover { border-color:var(--texte-doux); }
  .theme-opt:has(input:checked) { border-color:var(--marque-fonce);
                                  box-shadow:0 0 0 3px var(--marque-clair); }
  .theme-opt .t-titre { font-family:var(--police-titre); font-weight:700; font-size:14px;
                        display:flex; align-items:center; gap:8px; }
  .theme-opt .t-desc { font-size:12.5px; color:var(--texte-doux); font-weight:400; line-height:1.45; }

  /* ---- Thème CHIFFRE ROI (inspiration Stripe) : le CA en très grand
     à gauche, les autres KPI en liste fine à droite, le tout sur une
     seule surface blanche. La couleur ne sert plus de décor. ---- */
  /* Gabarit dédié de la Vue équipe (fidèle à la maquette validée) :
     héros CA + jauge d'objectif à gauche, liste fine à droite. */
  .cr-zone { display:grid; grid-template-columns:1.25fr 1fr; gap:0 44px; padding:24px 30px; }
  .cr-hero { display:flex; flex-direction:column; justify-content:center; padding:10px 0; }
  .cr-lib { font-size:12.5px; color:var(--texte-doux); }
  .cr-val { font:650 48px/1.1 var(--police-corps); letter-spacing:-.02em; margin:6px 0 2px; }
  .cr-obj { font-size:22px; font-weight:500; color:var(--texte-doux); letter-spacing:0; }
  /* Deux références d'objectif : agence (défaut) / challenge (au survol ou clic
     du « / objectif »). Les deux corps sont rendus, un seul est visible. */
  .cr-hero .cr-v-challenge { display:none; }
  .cr-hero.cr-challenge .cr-v-agence { display:none; }
  .cr-hero.cr-challenge .cr-v-challenge { display:block; }
  /* Ligne « Challenge … » sous le rythme : texte + sélecteur neutre à deux
     positions (Objectif agence | Challenge) qui pilote la référence de la jauge. */
  .cr-chal { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--texte); }
  .cr-chal-lib { font-weight:600; }
  .cr-chal-indispo { color:var(--texte-doux); font-size:12px; }
  .cr-switch { display:inline-flex; border:1px solid #c9cfd8; border-radius:999px; overflow:hidden; background:#fff; }
  .cr-sw { border:0; background:transparent; color:#4b5563; padding:4px 12px; font:600 12px/1.4 var(--police-corps);
           letter-spacing:0; cursor:pointer; }
  .cr-sw + .cr-sw { border-left:1px solid #c9cfd8; }
  .cr-sw:hover { background:#f1f3f6; }
  .cr-sw.actif, .cr-sw.actif:hover { background:#374151; color:#fff; }
  /* « modifier » : simple lien texte (on neutralise le style global des details). */
  .cr-chal details { display:inline; border:0; padding:0; margin:0; background:none; }
  .cr-chal details > summary { display:inline; cursor:pointer; color:var(--texte-doux); font-size:12px;
                               font-weight:400; padding:0; list-style:none; }
  .cr-chal details > summary::-webkit-details-marker { display:none; }
  .cr-chal details > summary::marker { content:""; }
  .cr-chal details > summary:hover { text-decoration:underline; }
  .cr-chal details[open] { display:block; flex-basis:100%; width:100%; }
  .cr-chal details[open] > summary { display:none; }
  .cr-chal details > form { margin-top:4px; }
  .cr-hero.cr-challenge .cr-meter i { background:#b8860b; }
  .cr-hero.cr-challenge .cr-meter { background:#fbf1d6; }
  .cr-meter { position:relative; height:8px; border-radius:4px; background:#e3f3ea; margin:18px 0 6px; }
  .cr-meter i { position:absolute; top:0; bottom:0; left:0; display:block;
                background:#178a54; border-radius:4px; }
  .cr-meter b { position:absolute; top:-5px; bottom:-5px; width:2px;
                background:var(--texte); opacity:.55; }
  .cr-meter-leg { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
                  font-size:12px; color:var(--texte-doux); }
  .cr-rythme { margin-top:14px; font-size:13.5px; font-weight:600; }
  .cr-rythme.ok { color:#178a54; }
  .cr-rythme.retard { color:#b45309; }
  .cr-terrain { color:var(--texte-doux); font-weight:400; margin-left:10px; }
  /* La liste : libellé · mini-courbe · valeur · comparaison — 4 colonnes nettes */
  .cr-liste { display:flex; flex-direction:column; justify-content:center; }
  .cr-row { display:flex; align-items:center; gap:14px; padding:11px 0;
            border-bottom:1px solid var(--bordure); }
  .cr-row:last-child { border-bottom:none; }
  .cr-row .l { flex:1; min-width:0; font-size:13.5px; font-weight:600; }
  .cr-row .v { font-size:16.5px; font-weight:700; min-width:74px; text-align:right;
               font-variant-numeric:tabular-nums; }
  /* Mini-courbe : gris recessif, dernier point en accent (largeur réservée
     même quand la courbe est absente, pour que les colonnes restent alignées) */
  .cr-spark { display:block; width:64px; height:20px; flex:none; }
  .cr-spark polyline { fill:none; stroke:#c9cedb; stroke-width:2;
                       stroke-linecap:round; stroke-linejoin:round;
                       vector-effect:non-scaling-stroke; }
  .cr-spark circle { fill:#178a54; stroke:var(--carte); stroke-width:2; }
  /* Un petit point par mois sur la courbe (le dernier reste le point accent) */
  .cr-spark circle.pt { fill:#9aa3b2; stroke:var(--carte); stroke-width:1; }
  .cr-chip { font-size:12px; font-weight:700; width:82px; text-align:right; flex:none; }
  .cr-chip.up { color:#178a54; }
  .cr-chip.down { color:#b45309; }
  .cr-chip.flat { color:var(--gris); font-weight:400; }
  @media(max-width:860px){
    .cr-zone { grid-template-columns:1fr; gap:14px; }
    .cr-val { font-size:34px; }
  }
  @media(max-width:560px){
    .cr-spark { display:none; }
    .cr-chip { width:auto; }
  }
  /* Les rangées de cartes restantes (leads / annulations / perdues, activité
     du commercial…) : cartes aplaties, sans fond de couleur — la couleur ne
     sert plus à catégoriser, seulement à signaler. */
  body.theme-chiffre-roi .kpis { gap:0; background:var(--carte); padding:4px 8px;
    border:1px solid var(--bordure); border-radius:var(--rayon); box-shadow:var(--ombre); }
  body.theme-chiffre-roi .kpi { background:none; border:none; box-shadow:none;
    border-radius:0; border-left:1px solid var(--bordure); }
  body.theme-chiffre-roi .kpi:first-child { border-left:none; }
  body.theme-chiffre-roi .kpi .libelle { font-size:11px; letter-spacing:.06em; }
  body.theme-chiffre-roi .kpi .valeur { font-size:25px; font-weight:650; }
  body.theme-chiffre-roi .kpi.accent { background:none; }
  body.theme-chiffre-roi .kpi.accent .valeur { color:var(--texte); }
  body.theme-chiffre-roi .kpi.accent .libelle,
  body.theme-chiffre-roi .kpi.accent .sous { color:var(--texte-doux); }
  body.theme-chiffre-roi .kpi.k-vert, body.theme-chiffre-roi .kpi.k-rouge,
  body.theme-chiffre-roi .kpi.k-orange { background:none; }
  body.theme-chiffre-roi .kpi.k-rouge .valeur,
  body.theme-chiffre-roi .kpi.k-orange .valeur { color:var(--texte); }
  /* Flèches de tendance : la carte accent n'a plus de fond sombre, le blanc
     d'origine y serait invisible. */
  body.theme-chiffre-roi .kpi.accent .trend.up { color:#15794d; }
  body.theme-chiffre-roi .kpi.accent .trend.down { color:#b91c1c; }
  body.theme-chiffre-roi .kpi.accent .trend.flat { color:var(--gris); }
  @media(max-width:640px){
    body.theme-chiffre-roi .kpi { border-left:none; border-top:1px solid var(--bordure); }
    body.theme-chiffre-roi .kpi:first-child { border-top:none; }
  }

  /* ---- Le tableau « Détail par commercial », même écriture graphique que le
     bloc de tête : pas de remplissage, des filets fins, les chiffres alignés,
     et une mini-jauge sous le CA pour lire l'écart à l'objectif d'un coup
     d'œil (le seul élément coloré de la ligne). ---- */
  body.theme-chiffre-roi .equipe-table th {
    background:var(--carte); color:var(--texte-doux); font-size:10.5px;
    letter-spacing:.07em; font-weight:600; border-bottom:1.5px solid var(--bordure);
    padding-bottom:9px; }
  body.theme-chiffre-roi .equipe-table td { border-bottom:1px solid var(--bordure); }
  body.theme-chiffre-roi .equipe-table tbody tr:hover td,
  body.theme-chiffre-roi .equipe-table tr:hover td:first-child:not([colspan]) {
    background:var(--marque-clair); }
  body.theme-chiffre-roi .equipe-table td:first-child:not([colspan]) { font-weight:600; }
  /* Total équipe : signalé par un filet épais, pas par un aplat vert */
  body.theme-chiffre-roi .total-row td,
  body.theme-chiffre-roi .equipe-table .total-row td:first-child,
  body.theme-chiffre-roi .total-row:hover td,
  body.theme-chiffre-roi .equipe-table .total-row:hover td:first-child {
    background:var(--carte); border-top:2px solid var(--texte);
    border-bottom:none; font-weight:700; }
  /* Prévision : une note de bas de ligne, pas une bande grise */
  body.theme-chiffre-roi .sousligne td, body.theme-chiffre-roi .sousligne:hover td {
    background:var(--carte); border-bottom:1px solid var(--bordure);
    color:var(--texte-doux); padding-top:0; }
  body.theme-chiffre-roi .equipe-table .sc { color:var(--texte-doux); opacity:.85; }
  /* Mini-jauge CA / objectif dans la cellule CA */
  .mini-obj { display:block; height:3px; border-radius:2px; background:var(--bordure);
              margin:4px 0 0 auto; width:56px; }
  .mini-obj > i { display:block; height:100%; border-radius:2px; background:#178a54; }
  .mini-obj.sous > i { background:#b45309; }

  /* Rappel de la période affichée, à l'arrivée sur une page (demande du
     11/09/2026 : la période est mémorisée d'une page à l'autre). Pas de badge
     à part, pas de centrage : c'est la VRAIE pastille active (barre du haut,
     couleur de la marque déjà en place) qui grossit légèrement avec un halo,
     puis redescend à sa taille normale. Pur CSS — se rejoue tout seul à
     chaque chargement de page puisque l'élément est recréé à chaque fois. */
  .periode-toggle .pseg.actif { animation:pseg-arrivee 1s cubic-bezier(.34,1.56,.64,1); }
  @keyframes pseg-arrivee {
    0%   { transform:scale(1);    box-shadow:var(--ombre), 0 0 0 0 rgba(47,230,115,0); }
    35%  { transform:scale(1.18); box-shadow:var(--ombre), 0 0 0 9px rgba(47,230,115,.45); }
    70%  { transform:scale(1.04); box-shadow:var(--ombre), 0 0 0 4px rgba(47,230,115,.15); }
    100% { transform:scale(1);    box-shadow:var(--ombre), 0 0 0 0 rgba(47,230,115,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .periode-toggle .pseg.actif { animation:none; }
  }

  /* ---- Recherche d'un compte (page Utilisateurs) -------------------------
     La liste des comptes fait plusieurs centaines de lignes : on tape les
     premières lettres, une liste déroulante propose les personnes, un clic
     ouvre la fiche. */
  .recherche-compte { position:relative; max-width:440px; margin-bottom:16px; }
  .recherche-compte input { width:100%; }
  .recherche-liste { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
        margin:0; padding:4px; list-style:none; background:var(--carte);
        border:1px solid var(--bordure); border-radius:10px;
        box-shadow:0 8px 24px rgba(20,20,50,.14); max-height:300px; overflow-y:auto; }
  .recherche-liste li { padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13.5px; }
  .recherche-liste li.vide { color:var(--texte-doux); cursor:default; }
  .recherche-liste li:hover, .recherche-liste li.actif { background:var(--marque-clair); }
  .recherche-liste .ancien { margin-left:8px; font-size:11px; color:var(--texte-doux); }

  /* ---- Bloc replié derrière un bouton (ex. anciens commerciaux) ---- */
  .bloc-repliable { border:0; padding:0; margin:0; }
  .bloc-repliable > summary { display:inline-block; list-style:none; }
  .bloc-repliable > summary::-webkit-details-marker { display:none; }
  .bloc-repliable > summary::marker { content:""; }
  .bloc-repliable > summary .si-ouvert { display:none; }
  .bloc-repliable[open] > summary .si-ferme { display:none; }
  .bloc-repliable[open] > summary .si-ouvert { display:inline; }
  .bloc-repliable > .bloc-contenu { margin-top:14px; }

  /* Leads AF Communication en FONCÉ, couleurs inversées (JC 09/10/2026) ;
     la case verte reste verte, la liste dépliable des leads reste claire. */
  .lead-box { background:#1f2937; border-color:#1f2937; }
  .lead-box .lead-title { color:#f3f4f6; border-bottom-color:#334155; gap:10px; }
  .lead-box .lead-periode { color:#60FA96; }
  .lead-box .lead-ligne > .cel { background:#273444; border-color:#334155; }
  .lead-box .lead-ligne > .cel.total { background:#2d3b4d; }
  .lead-box .lead-ligne > .cel .lib, .lead-box .lead-ligne > .cel .sous-m { color:#a3adbb; }
  .lead-box .lead-ligne > .cel .val { color:#ffffff; }
  .lead-box .lead-ligne > .cel-action { background:var(--vert); }
  .lead-box .lead-ligne > .cel-action .lib, .lead-box .lead-ligne > .cel-action .sous-m,
  .lead-box .lead-ligne > .cel-action .val { color:#ffffff; }
  .lead-box .lead-ouverts { background:var(--carte); color:var(--texte); }
  /* Icône « détail » : grossit vite au survol, rapetisse lentement (comme la fiche du Trombinoscope). */
  .lead-plus { width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; background:#60FA96; color:#0b3d22; text-decoration:none;
    transition:transform .7s ease-out; }
  .lead-plus:hover, .lead-plus:focus-visible { transform:scale(1.35); transition:transform .15s ease-out; }
  .lead-plus:focus-visible { outline:2px solid #ffffff; outline-offset:2px; }
  @media (prefers-reduced-motion: reduce) { .lead-plus, .lead-plus:hover { transition:none; } }

  /* Filtre de période (JC 09/10/2026) : type · sélecteur · flèches, plage sur deux calendriers. */
  .fp { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .fp-types { display:inline-flex; background:#eef1f6; border-radius:10px; padding:3px; gap:2px; }
  .fp-type { border:0; background:transparent; color:var(--texte-doux); padding:6px 13px; border-radius:8px;
    font:600 13px var(--police-corps); cursor:pointer; text-decoration:none; white-space:nowrap; }
  .fp-type:hover { color:var(--texte); }
  .fp-type.actif { background:#60FA96; color:#0b3d22; }
  .fp-choix { position:relative; display:inline-flex; align-items:center; border:1px solid var(--bordure);
    border-radius:10px; background:var(--carte); min-height:36px; }
  .fp-fl { width:30px; text-align:center; color:var(--texte); text-decoration:none; font-size:16px; line-height:34px; }
  .fp-fl:hover { background:#f3f5f7; }
  .fp-choix .calsem { border-left:1px solid var(--bordure); border-right:1px solid var(--bordure); }
  .fp-plage-lbl { display:flex; align-items:center; gap:8px; border:0; background:none; padding:0 12px; height:34px;
    font:600 13.5px var(--police-corps); color:var(--texte); cursor:pointer; }
  .fp-plage-lbl svg { color:var(--texte-doux); }
  .fp-pop { position:absolute; top:42px; right:0; z-index:60; background:var(--carte); border:1px solid var(--bordure);
    border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.16); padding:14px; width:max-content; max-width:calc(100vw - 32px); }
  .fp-deux { display:flex; gap:18px; flex-wrap:wrap; }
  .fp-titre { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--texte-doux); }
  .fp-mois { display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:6px; text-transform:capitalize; }
  .fp-mois button { border:0; background:none; width:28px; height:28px; border-radius:6px; cursor:pointer; color:var(--texte); font-size:15px; padding:0; }
  .fp-mois button:hover { background:#f3f5f7; }
  .fp-jours { display:grid; grid-template-columns:repeat(7, 32px); gap:2px; text-align:center; }
  .fp-jours span { font-size:11px; color:var(--texte-doux); }
  .fp-jours button { border:0; background:none; height:30px; border-radius:7px; cursor:pointer; color:var(--texte);
    font:500 13px var(--police-corps); padding:0; }
  .fp-jours button.hors { opacity:.4; }
  .fp-jours button:hover { background:#f3f5f7; }
  .fp-jours button.dans { background:#dcfce7; }
  .fp-jours button.debut, .fp-jours button.fin { background:#15703F; color:#fff; }
  .fp-note { font-size:12px; color:var(--texte-doux); margin:10px 0 0; max-width:480px; }
  .fp-pied { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--bordure); }
  .fp-racc { display:flex; gap:6px; flex-wrap:wrap; }
  .fp-racc button { border:1px solid var(--bordure); background:var(--carte); border-radius:20px; padding:4px 10px;
    font:500 12px var(--police-corps); cursor:pointer; color:var(--texte); }
  .fp-appliquer { border:0; background:#60FA96; color:#0b3d22; border-radius:8px; padding:8px 14px; font:700 13px var(--police-corps); cursor:pointer; }

  /* Photos d'équipe en VIGNETTE RONDE (JC 09/10/2026) : les images fournies sont
     carrées avec un cercle dessiné dedans ; on ne montre que le disque, sans les coins. */
  img.tb-photo, img.pf-avatar, img.ud-ava, img.an-photo, img.fiche-photo {
    border-radius:50%; object-fit:cover; clip-path:circle(48.5% at 50% 50%); background:transparent; }

  /* Vignette du commercial dans « Détail par commercial » (JC 09/10/2026) :
     colonne figée à gauche, sur ses deux lignes (chiffres + prévision) ; le nom
     reste figé juste à côté. */
  .equipe-table .eq-vign { width:56px; min-width:56px; max-width:56px; text-align:center; vertical-align:middle;
    padding:4px 6px; border-bottom:1px solid var(--bordure); }
  .equipe-table th.eq-nom, .equipe-table td.eq-nom { position:sticky; left:56px; z-index:2; background:var(--carte); }
  .equipe-table thead th.eq-nom { z-index:4; }
  .equipe-table td.eq-nom { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
  .equipe-table tr:hover td.eq-nom { background:#fafbff; }
  .equipe-table .total-row td.eq-nom, .equipe-table .total-row:hover td.eq-nom { background:var(--marque-clair); }
  .equipe-table .sousligne td[colspan] { padding-left:5px; }
  .eq-ava { width:40px; height:40px; border-radius:50%; object-fit:cover; display:inline-flex; align-items:center;
    justify-content:center; background:#e8f5ee; color:#15703F; font-weight:700; font-size:13px; vertical-align:middle; }
  img.eq-ava { clip-path:circle(48.5% at 50% 50%); background:transparent; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }