/* ==========================================================================
   ATLA CRM — feuille de style principale
   Extraite de public/index.html le 2026-09-03 (découpage phase 1).

   ORDRE DE CHARGEMENT CRITIQUE : ce fichier doit être lié AVANT theme.css.
   theme.css redéfinit les mêmes tokens à spécificité égale et ne gagne la
   cascade que parce qu'il vient après. Inverser les deux <link> désactive
   toute la refonte cyan sans lever la moindre erreur.
   ========================================================================== */

  :root{
    --black:#0b0d10;
    --off-black:#12151a;
    --white:#ffffff;
    --gray-50:#f6f6f6;
    --gray-100:#ececec;
    --gray-300:#c9c9c9;
    --gray-500:#8a92a0;
    --gray-700:#3d3d3d;
    --line:#1e222a;
    --gold:#c9a24a;
    --gold-light:#e2bd6a;
    --wine:#5c0f16;
    --wine-light:#7a1420;
    --parchment:#eef0f3;
    --surface:#151920;
    --surface-2:#1b202a;
    --radius:4px;
    --ease:cubic-bezier(.2,.7,.3,1);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:
      linear-gradient(160deg, rgba(201,162,74,0.05), transparent 40%),
      linear-gradient(180deg, #0e1116 0%, #0b0d10 100%);
    background-attachment:fixed;
    color:var(--parchment);
    -webkit-font-smoothing:antialiased;
    position:relative;
    font-weight:500;
  }
  .container, #appRoot{position:relative;z-index:1;}
  .headline, .wordmark, h1, h2{
    font-family:'Montserrat','Inter',sans-serif;
    font-weight:800;
    letter-spacing:.2px;
  }

  /* ---------- AUTH GATE ---------- */
  #roleGate{
    position:fixed;
    inset:0;
    background:var(--black);
    color:var(--white);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    z-index:220;
    text-align:center;
    padding:20px;
  }
  #roleGate .gate-sub{
    font-family:'Montserrat',serif;
    font-size:13px;
    letter-spacing:3px;
    color:var(--gold-light);
    text-transform:uppercase;
    border-top:1px solid var(--gold);
    border-bottom:1px solid var(--gold);
    padding:10px 24px;
  }
  .role-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:26px 32px;
    color:var(--parchment);
    font-size:14px;
    font-weight:800;
    min-width:130px;
  }
  .role-card .ic{font-size:34px;}
  .role-card:hover{border-color:var(--gold);color:var(--gold-light);}

  #authGate{
    position:fixed;
    inset:0;
    background:var(--black);
    color:var(--white);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    z-index:200;
    text-align:center;
    padding:20px;
  }
  #authGate .gate-sub{
    font-family:'Montserrat',serif;
    font-size:13px;
    letter-spacing:3px;
    color:var(--gold-light);
    text-transform:uppercase;
    border-top:1px solid var(--gold);
    border-bottom:1px solid var(--gold);
    padding:10px 24px;
  }
  .btn-google{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--gold);
    color:var(--black);
    border:none;
    border-radius:var(--radius);
    padding:13px 22px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    cursor:pointer;
    transition:background .18s var(--ease);
  }
  .btn-google:hover{background:var(--gold-light);}
  .gate-form{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:300px;
  }
  .gate-input{
    width:100%;
    padding:12px 14px;
    border:1.5px solid var(--gold);
    border-radius:2px;
    background:#161010;
    color:var(--white);
    font-size:14px;
    font-family:'Inter',sans-serif;
  }
  .gate-input::placeholder{color:var(--gray-500);}
  .gate-input:focus{outline:none;border-color:var(--gold-light);}
  .gate-toggle{
    background:none;
    border:none;
    color:var(--gray-300);
    font-size:11.5px;
    text-decoration:underline;
    cursor:pointer;
    padding:4px;
    letter-spacing:.3px;
    text-transform:none;
    font-weight:600;
  }
  .gate-toggle:hover{color:var(--white);}
  #authGate .gate-status{
    font-size:11.5px;
    color:var(--gray-500);
    min-height:16px;
    letter-spacing:.5px;
  }
  #appRoot{display:none;}
  .sync-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-300);
  }
  .sync-dot{
    width:7px;height:7px;border-radius:50%;
    background:#4caf50;
    display:inline-block;
  }
  .sync-dot.offline{background:#c0392b;}
  .user-chip{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11.5px;
    color:var(--gray-300);
  }
  .user-chip img{width:24px;height:24px;border-radius:50%;}

  /* ---------- HERO / HEADER ---------- */
  .hero{
    background:
      radial-gradient(ellipse at top right, rgba(92,15,22,0.4) 0%, transparent 55%),
      var(--black);
    color:var(--white);
    position:relative;
    overflow:hidden;
    padding:0 0 46px;
    clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
    border-bottom:2px solid var(--gold);
  }
  .hero-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 28px 0;
    flex-wrap:wrap;
    gap:14px;
    position:relative;
    z-index:2;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand .divider{
    width:1px;
    height:26px;
    background:var(--gray-700);
  }
  .brand .tag{
    font-family:'Montserrat',serif;
    font-size:11px;
    letter-spacing:3px;
    color:var(--gold-light);
    font-weight:700;
  }
  .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .nav-tabs{
    display:flex;
    gap:2px;
    border:1px solid var(--gold);
    border-radius:2px;
    overflow:hidden;
    margin-right:6px;
  }
  .nav-tab{
    background:transparent;
    color:var(--gold-light);
    border:none;
    border-radius:0;
    padding:9px 14px;
    font-size:11px;
  }
  .nav-tab.active{
    background:var(--gold);
    color:var(--black);
  }
  .nav-tab:not(.active):hover{background:rgba(201,162,74,0.1);}
  .profit-positive{color:#3fbf6a;}

  /* Sous-onglets de la page fusionnée Ventes & Marketing (2026-08-28)
     — navigation de premier niveau à l'intérieur d'une page, donc plus
     marquée que .nav-tab (utilisé pour des bascules secondaires comme
     Liste/Funnel) : plus grand, icône+texte, indicateur actif en trait
     doré sous le bouton plutôt qu'un simple fond plein. */
  .subtab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;}
  .subtab-btn{background:transparent;border:none;border-radius:0;color:var(--gray-500);font-size:13.5px;font-weight:700;padding:12px 18px 14px;white-space:nowrap;position:relative;letter-spacing:.2px;}
  .subtab-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;border-radius:2px 2px 0 0;}
  .subtab-btn:hover{color:var(--gold-light);}
  .subtab-btn.active{color:var(--gold-light);}
  .subtab-btn.active::after{background:var(--gold);}
  /* Lead Acquisition (2026-08-28) — Stats Meta à gauche + Stats de ventes
     à droite, pleine largeur comme le funnel (voir .funnel-board) plutôt
     qu'empilées verticalement. min-width:0 empêche les tableaux internes
     de forcer la colonne à s'élargir au-delà de sa part de flex. */
  .lead-acq-grid{display:flex;gap:28px;align-items:flex-start;}
  .lead-acq-col{flex:1;min-width:0;}
  @media (max-width:900px){
    .lead-acq-grid{flex-direction:column;}
  }
  .profit-negative{color:#e05555;}
  .hero-headline{
    padding:34px 28px 0;
    position:relative;
    z-index:2;
  }
  .hero-headline .headline{
    font-size:44px;
    line-height:1.05;
    margin:0;
    color:var(--white);
    font-weight:800;
  }
  .hero-headline .headline .accent{
    color:var(--gold);
  }
  .hero-headline .sub{
    margin-top:10px;
    font-family:'Montserrat',sans-serif;
    font-weight:500;
    font-size:14px;
    color:var(--gray-300);
    letter-spacing:.2px;
    max-width:520px;
  }
  .diag-stripe{
    position:absolute;
    top:-40%;
    right:-6%;
    width:46%;
    height:220%;
    background:repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.045) 0px,
      rgba(255,255,255,0.045) 2px,
      transparent 2px,
      transparent 34px
    );
    z-index:1;
    pointer-events:none;
  }

  button{
    font-family:'Montserrat',sans-serif;
    cursor:pointer;
    border:1.5px solid transparent;
    border-radius:var(--radius);
    padding:10px 18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.3px;
    transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
  }
  .btn-primary{
    background:var(--gold);
    color:var(--black);
  }
  .btn-primary:hover{background:var(--gold-light);}
  .btn-outline{
    background:transparent;
    border-color:var(--line);
    color:var(--gray-300);
  }
  .btn-outline:hover{border-color:var(--gold);color:var(--gold-light);}
  .btn-ghost{
    background:transparent;
    color:var(--gray-500);
    padding:8px 10px;
  }
  .btn-ghost:hover{color:var(--gold-light);}
  .btn-danger{
    background:var(--wine);
    color:var(--white);
    border-color:var(--wine);
  }
  .btn-danger:hover{background:var(--wine-light);}
  .btn-small{padding:7px 12px;font-size:11px;}
  button:active{transform:scale(0.97);}
  button:disabled{opacity:.5;cursor:not-allowed;}

  /* ---------- APP SHELL / SIDEBAR (nav verticale) ---------- */
  .app-shell{
    display:flex;
    align-items:stretch;
    min-height:100vh;
  }
  .sidebar{
    width:232px;
    flex-shrink:0;
    background:var(--black);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    z-index:20;
  }
  .sidebar-brand{
    padding:22px 18px 14px;
    border-bottom:1px solid var(--line);
  }
  .sidebar-brand .tag{
    font-family:'Montserrat',serif;
    font-size:11px;
    letter-spacing:2.5px;
    color:var(--gold-light);
    font-weight:800;
  }
  .personne-chip{
    margin-top:12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:20px;
    padding:6px 12px 6px 8px;
    font-size:12px;
    font-weight:700;
    color:var(--parchment);
    cursor:pointer;
  }
  .personne-chip .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--gold);
    flex-shrink:0;
  }
  .sidebar-nav{
    flex:1;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .sidebar-nav-group-label{
    font-size:9.5px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--gray-500);
    padding:16px 10px 6px;
  }
  .side-nav-btn{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    text-align:left;
    background:transparent;
    border:1.5px solid transparent;
    border-radius:8px;
    padding:11px 12px;
    font-size:13px;
    font-weight:700;
    color:var(--gray-300);
    letter-spacing:.2px;
    text-decoration:none;
  }
  .side-nav-btn:hover{background:rgba(201,162,74,0.08);color:var(--gold-light);}
  .side-nav-btn.active{
    background:var(--gold);
    color:var(--black);
  }
  .sidebar-footer{
    padding:12px 10px 16px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .sidebar-footer .side-nav-btn{font-size:12px;padding:9px 12px;}
  .main-col{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .topbar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    background:var(--off-black);
  }
  .topbar .spacer{flex:1;}

  /* ---------- CONTAINER ---------- */
  /* TROUVAILLE 2026-08-26 : 1120px laissait énormément d'espace vide sur les
     écrans larges (le CRM est utilisé sur ordinateur de bureau) — élargi à
     1600px. Les grilles de cartes utilisent déjà `repeat(auto-fit/auto-fill,
     minmax(...))`, donc elles se réorganisent automatiquement en plus de
     colonnes pour remplir l'espace, aucun changement nécessaire là. */
  /* width:100% ajouté le 2026-09-01. .main-col est un conteneur flex en
     colonne : dans ce contexte, « margin:0 auto » sur l'axe transversal
     annule l'étirement par défaut et le conteneur se réduit à la largeur
     de son contenu. Résultat mesuré avant correctif : 803px de contenu au
     milieu d'un écran de 1920, avec deux grandes bandes vides. Le
     max-width de 1600px n'était donc jamais atteint — il ne servait à
     rien. La largeur suit maintenant l'écran, plafonnée à 1600px. */
  .container{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:24px 32px 70px;
  }

  /* ---------- Barre d'onglets mobile (<768px) ---------- */
  .bottom-tabbar{
    display:none;
  }
  @media (max-width:900px){
    .sidebar{
      position:fixed;
      left:0; top:0; bottom:0;
      transform:translateX(-100%);
      transition:transform .2s var(--ease);
      width:78%;
      max-width:300px;
      box-shadow:20px 0 40px rgba(0,0,0,0.5);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-scrim{
      display:none;
      position:fixed; inset:0;
      background:rgba(0,0,0,0.5);
      z-index:19;
    }
    .sidebar-scrim.open{display:block;}
    .bottom-tabbar{
      display:flex;
      position:fixed;
      left:0; right:0; bottom:0;
      background:var(--black);
      border-top:1px solid var(--line);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      z-index:21;
      gap:2px;
    }
    .bottom-tabbar button{
      flex:1;
      background:none;
      border:none;
      color:var(--gray-500);
      font-size:9.5px;
      font-weight:700;
      padding:7px 2px;
      border-radius:8px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:2px;
    }
    .bottom-tabbar button.active{color:var(--gold-light);background:rgba(201,162,74,0.1);}
    .bottom-tabbar .ic{font-size:16px;}
    .container{padding-bottom:88px;}
    input, select, textarea{font-size:16px !important;}
    #quickActionsWrap{bottom:calc(76px + env(safe-area-inset-bottom)) !important;}
    #assistantFab{bottom:calc(76px + env(safe-area-inset-bottom)) !important;}
    #assistantPanel{
      right:0 !important; left:0 !important; bottom:0 !important;
      width:100% !important; max-width:100% !important;
      height:88vh !important; max-height:88vh !important;
      border-radius:16px 16px 0 0 !important;
      padding-bottom:env(safe-area-inset-bottom);
    }
  }
  .assistant-msg{max-width:80%;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.4;white-space:pre-wrap;}
  .assistant-msg.user{align-self:flex-end;background:var(--gold);color:var(--black);}
  .assistant-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);color:var(--parchment);}
  .assistant-msg.systeme{align-self:center;color:var(--gray-500);font-size:11px;font-style:italic;text-align:center;}
  .assistant-vide{color:var(--gray-500);text-align:center;padding:30px 14px;font-size:12.5px;}
  .carte-convo{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px;}
  .carte-convo .recu{color:var(--gray-500);font-size:12px;margin-bottom:6px;}
  .carte-convo textarea{width:100%;min-height:60px;padding:8px;border-radius:6px;border:1px solid var(--line);background:var(--off-black);color:var(--parchment);font-size:12px;font-family:inherit;resize:vertical;}
  .btn-envoyer-reponse{padding:6px 12px;border:none;border-radius:6px;background:var(--green);color:#0f1a12;font-weight:700;cursor:pointer;font-size:11.5px;margin-top:6px;}
  .badge-envoye{color:var(--green);font-size:11px;font-weight:700;}
  #btnSidebarToggle{display:none;}
  @media (max-width:900px){
    #btnSidebarToggle{display:inline-flex;}
  }

  /* ---------- TABLEAU DE BORD (refonte 2026-09-01, demande d'Ulrik :
     « remplace le aujourd'hui par un tableau de bord comme expav »).
     Modèle : le vueTableau() d'Expav — l'état de l'entreprise en un écran,
     dense, sans défilement pour l'essentiel.

     RETENUE CHROMATIQUE : contrairement à .stat-card, dont le chiffre est
     toujours cyan, un chiffre de KPI est NEUTRE par défaut. La couleur ne
     sert qu'à porter un sens — rouge un problème, vert un bon résultat,
     ambre une réserve, bleu une information. Huit cartes toutes cyan ne
     hiérarchisent rien, ce qui est exactement ce que la fondation
     interdit. ---------- */
  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
    gap:12px;
    margin-bottom:12px;
  }
  .kpi-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:15px 16px;
  }
  .kpi-card .kpi-lbl{
    font-size:10px;text-transform:uppercase;letter-spacing:.9px;
    color:var(--gray-500);font-weight:700;
  }
  .kpi-card .kpi-val{
    font-size:25px;font-weight:800;letter-spacing:-.6px;margin:5px 0 3px;
    font-variant-numeric:tabular-nums;color:var(--parchment);
  }
  .kpi-card .kpi-sub{font-size:11.5px;color:var(--gray-700);line-height:1.45;}
  .kpi-val.rouge{color:var(--red-light);}
  .kpi-val.vert{color:var(--green-light);}
  .kpi-val.ambre{color:var(--amber-light);}
  .kpi-val.bleu{color:var(--info-light);}

  /* Bandeau : signale un vrai problème actionnable. Volontairement distinct
     d'une note neutre — si tout est en rouge, plus rien n'est une alerte. */
  .dash-bandeau{
    background:var(--surface);
    border:1px solid var(--line);
    border-left:3px solid var(--red);
    border-radius:var(--radius);
    padding:11px 15px;margin-bottom:10px;
    font-size:12.5px;color:var(--gray-300);line-height:1.5;
  }
  .dash-bandeau b{color:var(--parchment);}
  .dash-bandeau.info{border-left-color:var(--info);}

  /* Rentabilité par chantier (2026-09-01, demande d'Ulrik, modèle Expav) */
  .rent-note{
    background:var(--surface);border:1px solid var(--line);
    border-left:3px solid var(--info);
    border-radius:var(--radius);padding:11px 15px;margin-bottom:12px;
    font-size:12.5px;color:var(--gray-300);line-height:1.5;
  }
  .rent-note b{color:var(--parchment);}
  .rent-etat{
    display:inline-block;padding:2px 8px;border-radius:20px;
    font-size:10.5px;font-weight:650;white-space:nowrap;
  }
  .rent-marge-sous{font-size:10.5px;color:var(--gray-700);font-variant-numeric:tabular-nums;}

  .soum-2col{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:14px;align-items:start;
  }
  @media(max-width:940px){ .soum-2col{grid-template-columns:1fr;} }
  .soum-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:620px){ .soum-parties{grid-template-columns:1fr;} }
  .soum-partie{
    background:var(--surface-2);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:11px 13px;
    font-size:12px;line-height:1.6;color:var(--gray-300);
  }
  .soum-partie-titre{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;
    color:var(--gray-500);font-weight:700;margin-bottom:6px;
  }
  .soum-partie b{color:var(--parchment);font-weight:600;}
  .soum-prod{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
    margin-bottom:6px;font-size:12.5px;
  }
  .soum-prod .p-nom{color:var(--parchment);font-weight:600;}
  .soum-prod .p-description{color:var(--gray-500);font-size:11px;line-height:1.45;margin-top:4px;max-width:680px;}
  .soum-prod .p-description-vide{font-style:italic;}
  .soum-prod .p-prix{color:var(--gray-500);font-variant-numeric:tabular-nums;white-space:nowrap;}

  .dash-2col{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:12px;margin-top:14px;
  }
  .dash-bloc{
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:15px 16px;
  }
  .dash-bloc h3{
    font-size:11px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--gray-500);font-weight:700;margin:0 0 10px;
  }
  .dash-vide{color:var(--gray-700);font-size:12.5px;font-style:italic;padding:10px 0;}
  .marge-barre{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:70px;}
  .marge-barre i{display:block;height:100%;border-radius:3px;}

  .stats-row{
    display:flex;
    gap:1px;
    background:var(--gold);
    margin:-30px 0 26px;
    position:relative;
    z-index:5;
    border:1px solid var(--gold);
    flex-wrap:wrap;
  }
  .stat-card{
    flex:1;
    min-width:140px;
    background:var(--surface);
    padding:16px 18px;
  }
  .stat-card .num{
    font-family:'Montserrat',sans-serif;font-weight:800;
    font-size:26px;
    color:var(--gold-light);
  }
  .stat-card .label{
    font-size:10.5px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--gray-500);
    margin-top:2px;
    font-weight:700;
  }
  .stat-card.warn .num{color:#000;}
  .stat-card.warn{background:linear-gradient(180deg, var(--off-black), var(--black));}
  .stat-card.warn .num{color:var(--gold-light);}
  .stat-card.warn .label{color:var(--gray-300);}

  /* ---------- STATS ROW PRETTY (cartes attrayantes) ---------- */
  /* ---------- TENDANCES MARKETING ---------- */
  .tendance-bar-row{
    display:grid;
    grid-template-columns:70px 1fr 220px;
    align-items:center;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
  }
  .tendance-mois{
    font-size:11.5px;
    font-weight:700;
    color:var(--gray-300);
    text-transform:uppercase;
    letter-spacing:.4px;
  }
  .tendance-bar-track{
    height:18px;
    background:var(--surface-2);
    border-radius:3px;
    overflow:hidden;
  }
  .tendance-bar-fill{
    height:100%;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius:3px;
    transition:width .4s ease;
  }
  .tendance-chiffres{
    font-size:11px;
    color:var(--gray-500);
    white-space:nowrap;
    text-align:right;
  }

  .stats-row-pretty{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin-bottom:24px;
  }
  .stats-row-pretty .stat-card{
    position:relative;
    min-width:0;
    background:linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 100%);
    border:1px solid var(--line);
    border-radius:8px;
    padding:18px 20px 18px 22px;
    overflow:hidden;
    transition:transform .15s ease, border-color .15s ease;
  }
  .stats-row-pretty .stat-card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
    background:var(--gold);
  }
  .stats-row-pretty .stat-card:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
  }
  .stats-row-pretty .stat-card .num{
    font-size:32px;
    font-weight:900;
    line-height:1;
  }
  .stats-row-pretty .stat-card .label{
    font-size:10px;
    margin-top:8px;
  }
  .stats-row-pretty .stat-card.warn::before{background:#e05555;}
  .stats-row-pretty .stat-card:nth-child(1)::before{background:var(--gold);}
  .stats-row-pretty .stat-card:nth-child(2)::before{background:#3fbf6a;}
  .stats-row-pretty .stat-card:nth-child(3)::before{background:#4a90d9;}

  /* ---------- PIPELINES ROW (côte à côte, compact) ---------- */
  .pipelines-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
    margin-bottom:20px;
  }
  .pipeline-block{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
  }

  /* ---------- PIPELINE ---------- */
  .pipeline{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-bottom:26px;
  }
  .pipeline-card{
    background:var(--surface);
    padding:16px 18px;
  }
  .pipeline-card .p-label{
    font-size:10.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gray-500);
    font-weight:800;
    margin-bottom:8px;
  }
  .pipeline-card .p-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:8px;
  }
  .pipeline-card .p-pct{
    font-family:'Montserrat',sans-serif;font-weight:800;
    font-size:24px;
  }
  .pipeline-card .p-count{
    font-size:11.5px;
    color:var(--gray-500);
    font-weight:600;
  }
  .pipeline-bar{
    height:6px;
    background:var(--gray-100);
    border-radius:0;
    overflow:hidden;
  }
  .pipeline-bar-fill{
    height:100%;
    background:var(--gold);
  }
  /* Pipeline par étape : la BARRE prend la couleur pleine (elle ne porte
     aucun texte, le contraste n'y est pas en jeu), le POURCENTAGE prend la
     variante claire — une couleur pleine en texte sur fond sombre descend
     sous le seuil de lisibilité. Même distinction que dans le CSS d'Expav
     entre un aplat et du texte. Ces 10 valeurs étaient en dur et seraient
     restées dans l'ancienne palette après la refonte. */
  .pipeline-card[data-etape="closé"] .p-pct{color:var(--green-light);}
  .pipeline-card[data-etape="closé"] .pipeline-bar-fill{background:var(--green);}
  .pipeline-card[data-etape="fumble"] .p-pct{color:var(--red-light);}
  .pipeline-card[data-etape="fumble"] .pipeline-bar-fill{background:var(--red);}
  .pipeline-card[data-etape="soumissionné"] .p-pct{color:var(--amber-light);}
  .pipeline-card[data-etape="soumissionné"] .pipeline-bar-fill{background:var(--amber);}
  .pipeline-card[data-etape="rendez-vous fixé"] .p-pct{color:var(--info-light);}
  .pipeline-card[data-etape="rendez-vous fixé"] .pipeline-bar-fill{background:var(--info);}
  .pipeline-card[data-etape="à appeler"] .p-pct{color:var(--violet-light);}
  .pipeline-card[data-etape="à appeler"] .pipeline-bar-fill{background:var(--violet);}

  .etape-tag{
    font-size:9.5px;
    font-weight:800;
    padding:4px 9px;
    text-transform:uppercase;
    letter-spacing:.6px;
    border:1.3px solid var(--gray-300);
    color:var(--gray-700);
    display:inline-block;
    margin-top:6px;
  }
  /* PASTILLES D'ÉTAPE (refonte 2026-08-28, référence Expav).
     Avant : texte foncé sur fond crème — des pastilles de thème CLAIR posées
     sur une interface sombre. Mesuré en production : 46 à l'écran d'un coup,
     fond rgb(253,248,227). Elles n'avaient jamais été adaptées au fond noir,
     même avant la refonte cyan ; theme.css ne les atteignait pas parce qu'il
     cible des composants génériques (.badge, .p-*) et que celles-ci vivent
     dans un sélecteur spécifique qu'il ne nomme jamais.

     Fond translucide à 16 % + texte en variante claire, comme les pastilles
     du thème. color-mix() plutôt qu'un rgba() en dur : si --green change un
     jour, le fond suit. Un rgba figé recréerait exactement le problème qu'on
     corrige ici (texte au nouveau ton sur fond resté à l'ancien).

     AUCUNE étape ne prend le cyan : cinq étapes, c'est du catégoriel, alors
     que le cyan est réservé à l'action, à l'état actif et à l'alerte. Une
     étape n'est pas une action. */
  /* Double déclaration : la ligne rgba() est un repli pour un navigateur qui
     ne connaît pas color-mix() — il ignore la seconde et garde la première.
     Sans ce repli, un fond non calculé serait TRANSPARENT, donc une pastille
     invisible plutôt que simplement mal teintée. */
  .etape-tag[data-etape="closé"]{border-color:transparent;color:var(--green-light);background:rgba(46,163,107,.16);background:color-mix(in srgb, var(--green) 16%, transparent);}
  .etape-tag[data-etape="fumble"]{border-color:transparent;color:var(--red-light);background:rgba(224,48,74,.16);background:color-mix(in srgb, var(--red) 16%, transparent);}
  .etape-tag[data-etape="soumissionné"]{border-color:transparent;color:var(--amber-light);background:rgba(217,154,43,.16);background:color-mix(in srgb, var(--amber) 16%, transparent);}
  .etape-tag[data-etape="rendez-vous fixé"]{border-color:transparent;color:var(--info-light);background:rgba(61,135,217,.16);background:color-mix(in srgb, var(--info) 16%, transparent);}
  /* --violet-light en texte et jamais --violet : Technique a mesuré qu'aucune
     couleur de texte ne passe le seuil de contraste sur le violet plein. */
  .etape-tag[data-etape="à appeler"]{border-color:transparent;color:var(--violet-light);background:rgba(139,92,246,.16);background:color-mix(in srgb, var(--violet) 16%, transparent);}
  .etape-tag[data-etape="à soumissionner"],
  .etape-tag[data-etape="l'an prochain"]{border-color:transparent;color:var(--gray-500);background:rgba(154,163,173,.14);background:color-mix(in srgb, var(--gray-500) 14%, transparent);}

  .client-card .radioactive-badge{
    position:absolute;
    top:10px;
    right:10px;
    font-size:16px;
    line-height:1;
    filter:drop-shadow(0 0 2px rgba(255,140,0,0.6));
  }

  /* ---------- MONTANTS TABLE ---------- */
  .montants-table{
    width:100%;
    border-collapse:collapse;
    border:1px solid var(--gold);
    margin-bottom:26px;
    background:var(--surface);
  }
  .montants-table th, .montants-table td{
    padding:12px 16px;
    text-align:left;
    border-bottom:1px solid rgba(201,162,74,0.2);
    font-size:13px;
    color:var(--parchment);
  }
  .montants-table th{
    font-size:10.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gray-500);
    font-weight:800;
    border-bottom:2px solid var(--gold);
  }
  .montants-table td.mt-label{font-weight:700;}
  /* Chiffres tabulaires : sinon un « 1 » est plus étroit qu'un « 8 » et les
     montants d'une colonne ne s'alignent pas verticalement — impossible de
     comparer deux lignes d'un coup d'œil. Repris du CSS d'Expav (.num). */
  .montants-table td.mt-amount{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;}
  .montants-table td.mt-pct{color:var(--gray-500);font-weight:700;font-variant-numeric:tabular-nums;}
  .montants-table tr.mt-total td{
    border-top:2px solid var(--gold);
    border-bottom:none;
    font-weight:800;
    color:var(--gold-light);
  }
  /* Variantes "-light" et non les couleurs pleines : sur fond sombre, un
     --green/--red plein descend sous le seuil de lisibilité pour du texte.
     Même distinction que dans le CSS d'Expav (aplat vs texte). Ces trois
     couleurs étaient codées en dur et n'auraient pas suivi la refonte. */
  .montants-table tr[data-etape="closé"] td.mt-amount{color:var(--green-light);}
  .montants-table tr[data-etape="fumble"] td.mt-amount{color:var(--red-light);}
  .montants-table tr[data-etape="soumissionné"] td.mt-amount{color:var(--amber-light);}

  /* ---------- EMPLOYÉS : BILAN ET FICHES ---------- */
  #employesView .cw-panel{margin-bottom:18px;}
  .employes-anomalies{border-color:rgba(217,154,43,.45);}
  .employes-etat{padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--gray-500);font-size:13px;}
  .employes-ok{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:50%;background:rgba(63,191,106,.14);color:var(--green-light);font-weight:900;}
  .employes-bilan-filtres{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
  .employes-bilan-filtres label{display:grid;gap:7px;min-width:min(100%,260px);color:var(--gray-500);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
  .employes-bilan-filtres select{min-height:42px;}
  .employes-mode{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);}
  .employes-mode .active{border-color:var(--gold);background:rgba(201,162,74,.16);color:var(--gold-light);}
  .employes-bilan-navigation{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:12px;margin:0 0 16px;padding:12px 0;border-block:1px solid var(--line);}
  .employes-bilan-navigation>div{text-align:center;}
  .employes-bilan-navigation strong{display:block;font-size:15px;text-transform:capitalize;}
  #bilanPeriodeAujourdhui{margin-top:3px;padding:0;border:0;background:transparent;color:var(--gold-light);font:inherit;font-size:11px;cursor:pointer;}
  .employes-kpis{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:9px;margin:0 0 14px;}
  .employes-kpi{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
  .employes-kpi strong{display:block;overflow-wrap:anywhere;font-family:'Montserrat',sans-serif;font-size:18px;font-variant-numeric:tabular-nums;}
  .employes-kpi span{display:block;margin-top:5px;color:var(--gray-500);font-size:10.5px;line-height:1.35;}
  .employes-kpi.accent{border-color:var(--gold);background:rgba(201,162,74,.09);}
  .employes-note{margin:0 0 12px;color:var(--gray-500);font-size:12px;line-height:1.55;}
  .employes-paie-table{min-width:2750px;margin-bottom:0;}
  .employes-paie-table th,.employes-paie-table td{padding:10px 12px;white-space:nowrap;}
  .employes-paie-table th:first-child,.employes-paie-table td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:8px 0 14px rgba(0,0,0,.16);}
  .employes-paie-table th:first-child{z-index:2;}
  .employes-nom-lien,.employes-fiche-nom{padding:0;border:0;background:transparent;color:var(--parchment);font:inherit;font-weight:800;text-align:left;cursor:pointer;}
  .employes-nom-lien:hover,.employes-fiche-nom:hover{color:var(--gold-light);}
  .employes-marqueur{display:inline-block;margin:5px 0 0 7px;padding:2px 6px;border-radius:12px;background:rgba(201,162,74,.12);color:var(--gold-light);font-size:9px;vertical-align:middle;}
  .employes-marqueur.alerte,.employes-a-completer{color:var(--amber-light);}
  .employes-table-vide{text-align:center!important;color:var(--gray-500)!important;font-style:italic;padding:18px!important;}
  .employes-total{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .employes-total-groupe{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);}
  .employes-total-groupe.accent{border-color:var(--gold);background:rgba(201,162,74,.08);}
  .employes-total-groupe h4{margin:0 0 12px;color:var(--gold-light);font-size:13px;}
  .employes-total-groupe>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(201,162,74,.12);font-size:11.5px;}
  .employes-total-groupe>div:last-child{border-bottom:0;}
  .employes-total-groupe span{color:var(--gray-500);}
  .employes-total-groupe strong{text-align:right;font-variant-numeric:tabular-nums;}
  .employes-fiches-toolbar{align-items:center;justify-content:space-between;margin-bottom:14px;}
  .employes-fiches-toolbar h3{margin:0;font-size:22px;}
  .employes-fiches-toolbar p{margin:5px 0 0;color:var(--gray-500);font-size:12.5px;}
  .employes-fiches{display:grid;gap:10px;}
  .employes-banque-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .employes-banque-carte{display:grid;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);}
  .employes-banque-carte.inactif{opacity:.58;}
  .employes-banque-carte>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .employes-banque-carte span{font-size:13px;font-weight:800;}
  .employes-banque-carte strong{color:var(--gold-light);font-family:'Montserrat',sans-serif;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .employes-banque-carte button{justify-self:start;}
  .employes-fiche-ligne{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(360px,2fr) auto;align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
  .employes-fiche-ligne.inactif{opacity:.58;}
  .employes-fiche-ligne>div:first-child{display:flex;align-items:center;gap:9px;min-width:0;}
  .employes-fiche-nom{overflow:hidden;text-overflow:ellipsis;font-size:16px;white-space:nowrap;}
  .employes-statut{padding:3px 7px;border-radius:20px;background:rgba(154,163,173,.12);color:var(--gray-500);font-size:9px;font-weight:800;text-transform:uppercase;}
  .employes-statut.actif{background:rgba(63,191,106,.12);color:var(--green-light);}
  .employes-fiche-ligne dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;}
  .employes-fiche-ligne dl>div{min-width:0;}
  .employes-fiche-ligne dt{color:var(--gray-500);font-size:10px;text-transform:uppercase;}
  .employes-fiche-ligne dd{margin:4px 0 0;overflow-wrap:anywhere;font-size:12px;font-weight:700;}
  @media(max-width:1050px){
    .employes-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
    .employes-total{grid-template-columns:repeat(2,minmax(0,1fr));}
    .employes-fiche-ligne{grid-template-columns:1fr auto;}
    .employes-fiche-ligne dl{grid-column:1/-1;grid-row:2;}
    .employes-banque-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:650px){
    .employes-bilan-filtres label{width:100%;}
    .employes-mode{width:100%;}
    .employes-mode button{flex:1;}
    .employes-bilan-navigation{grid-template-columns:1fr 1fr;}
    .employes-bilan-navigation>div{grid-column:1/-1;grid-row:1;}
    .employes-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
    .employes-total{grid-template-columns:1fr;}
    .employes-fiches-toolbar{align-items:flex-start;}
    .employes-fiche-ligne{grid-template-columns:1fr;}
    .employes-fiche-ligne dl{grid-column:auto;grid-row:auto;grid-template-columns:1fr;}
    .employes-fiche-ligne>button{justify-self:start;}
    .employes-banque-grid{grid-template-columns:1fr;}
  }

  /* Alignement des montants et sous-texte des cartes KPI : REMONTÉS DANS
     LA FONDATION (theme.css) le 2026-08-28. Deux sections les avaient
     découverts indépendamment — signal que la règle appartenait au
     système de design, pas à une section. Les sélecteurs scopés par id
     qui vivaient ici sont retirés : du CSS de section qui redit une
     règle globale finit toujours par diverger d'elle.
     Contrepartie assumée : la fondation cible th.num/th.mt-amount, donc
     les en-têtes numériques de MES tableaux portent maintenant class="num"
     dans le balisage — c'est le contrat à respecter, pas une exception. */

  /* ---------- LISTE DES SOUMISSIONS D'UN CLIENT ---------- */
  .soum-item{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-left:3px solid var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    margin-bottom:8px;
  }
  /* La soumission ouverte dans l'éditeur prend l'accent : c'est un ÉTAT ACTIF,
     l'un des trois usages réservés au cyan avec l'action et l'alerte. */
  .soum-item.actif{border-left-color:var(--gold);background:var(--surface);}
  .soum-item-haut{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .soum-nom{font-weight:700;font-size:13.5px;color:var(--parchment);}
  .soum-statut{
    font-size:9.5px;font-weight:800;letter-spacing:.5px;
    padding:2px 7px;border-radius:20px;white-space:nowrap;
  }
  /* Pastilles : fond translucide + texte en variante claire, comme partout
     ailleurs. Replis rgba pour les navigateurs sans color-mix. */
  .soum-statut.s-en-jeu{background:rgba(61,135,217,.16);background:color-mix(in srgb, var(--info) 16%, transparent);color:var(--info-light);}
  .soum-statut.s-hors-jeu{background:rgba(154,163,173,.14);background:color-mix(in srgb, var(--gray-500) 14%, transparent);color:var(--gray-500);}
  /* Statut inconnu : volontairement VISIBLE en ambre. Une donnée qu'on ne sait
     pas classer doit se voir, pas se fondre dans le décor. */
  .soum-statut.s-inconnu{background:rgba(217,154,43,.16);background:color-mix(in srgb, var(--amber) 16%, transparent);color:var(--amber-light);}
  .soum-item-bas{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px;}
  .soum-total{font-weight:800;font-size:14px;color:var(--gold-light);font-variant-numeric:tabular-nums;}
  .soum-date{font-size:11px;color:var(--gray-500);font-variant-numeric:tabular-nums;}
  .soum-alerte{font-size:11px;font-weight:700;color:var(--amber-light);}
  .soum-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  /* État vide : gris tertiaire, seconde ligne en retrait — même traitement que
     les colonnes vides du funnel. Il dit par où commencer plutôt que de crier. */
  .soum-vide{
    color:var(--gray-700);font-size:12.5px;line-height:1.6;
    padding:14px 12px;text-align:center;
  }
  .soum-vide span{display:block;margin-top:3px;font-size:11px;opacity:.75;}

  /* ---------- RENTABILITÉ PAR PRODUIT ---------- */
  .rentabilite-row{cursor:pointer;}
  .rentabilite-row:hover td{background:rgba(201,162,74,0.05);}
  .rentabilite-row .rp-chevron{
    display:inline-block;
    width:10px;
    transition:transform .15s ease;
    color:var(--gold);
    margin-right:6px;
  }
  .rentabilite-row.expanded .rp-chevron{transform:rotate(90deg);}
  .rentabilite-mini-bar{
    height:4px;
    background:var(--gray-100);
    border-radius:2px;
    overflow:hidden;
    margin-top:4px;
    width:100%;
  }
  .rentabilite-mini-bar-fill{height:100%;background:var(--gold);}
  .rentabilite-detail-row td{
    background:var(--surface-2);
    padding:0 !important;
  }
  .rentabilite-detail-inner{padding:10px 14px 14px 34px;}
  .rentabilite-detail-inner table{width:100%;border-collapse:collapse;}
  .rentabilite-detail-inner td{
    padding:5px 8px;
    font-size:11.5px;
    color:var(--gray-300);
    border-bottom:1px solid var(--line);
  }
  .rentabilite-detail-inner tr:last-child td{border-bottom:none;}

  /* ---------- DEPENSES EDITOR ---------- */
  .depenses-editor{
    width:100%;
    border-collapse:collapse;
    background:var(--surface-2);
    border:1px solid rgba(201,162,74,0.3);
    margin-bottom:14px;
  }
  .depenses-editor th{
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-500);
    text-align:left;
    padding:8px 8px;
    border-bottom:1.5px solid var(--gold);
  }
  .depenses-editor td{
    padding:6px 8px;
    border-bottom:1px solid rgba(201,162,74,0.15);
  }
  .depenses-editor tr:last-child td{border-bottom:none;}
  .depenses-editor select, .depenses-editor input{
    width:100%;
    padding:7px 8px;
    border:1px solid rgba(201,162,74,0.25);
    border-radius:2px;
    background:var(--off-black);
    color:var(--parchment);
    font-size:12.5px;
    font-family:inherit;
  }
  .depenses-editor select:focus, .depenses-editor input:focus{
    outline:none;
    border-color:var(--gold-light);
  }
  .depenses-editor td.dep-actions{width:34px;text-align:center;}
  .depenses-empty-row td{
    color:var(--gray-500);
    font-style:italic;
    font-size:12.5px;
    padding:12px 8px;
    text-align:center;
  }

  /* ---------- PRODUITS ---------- */
  .produits-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:16px;
  }
  .produit-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px;
    transition:border-color .18s var(--ease);
  }
  .produit-card:hover{border-color:var(--gold);}
  .produit-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .produit-nom{
    font-weight:800;
    font-size:15px;
    color:var(--parchment);
  }
  .produit-taux{
    font-weight:700;
    font-size:14px;
    color:var(--gold-light);
    white-space:nowrap;
  }
  .produit-label{
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-500);
    margin:10px 0 4px;
  }
  .produit-text{
    font-size:13px;
    line-height:1.5;
    color:var(--gray-300);
    margin:0;
  }
  .produit-actions{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:flex-end;
  }

  /* ---------- PHOTOS ---------- */
  .photos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    gap:8px;
  }
  .photo-thumb{
    position:relative;
    aspect-ratio:1/1;
    border-radius:4px;
    overflow:hidden;
    border:1px solid var(--line);
    cursor:pointer;
  }
  .photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .photo-thumb .photo-tag{
    position:absolute;
    bottom:0;left:0;right:0;
    /* rgba figé = --black à 85 %, correct aujourd'hui par coïncidence mais
       qui ne suivrait pas si le token bougeait. Motif de theme.css : repli
       rgba d'abord (navigateurs sans color-mix — ces vignettes s'affichent
       aussi sur les téléphones des employés, d'âge inconnu), dérivation
       ensuite. L'ordre compte : inversé, le repli gagnerait toujours et la
       dérivation serait morte. verifier.sh surveille automatiquement toute
       paire de ce type dans public/, sans liste à tenir à jour. */
    background:rgba(11,13,16,0.85);
    background:color-mix(in srgb, var(--black) 85%, transparent);
    color:var(--gold-light);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:3px 5px;
    text-align:center;
  }
  .photos-empty{
    font-size:12.5px;
    color:var(--gray-500);
    font-style:italic;
  }

  /* ---------- FUNNEL ---------- */
  /* Funnel horizontal de gauche à droite (2026-08-28, Ulrik : "je veux
     un funnel de gauche à droite... mets tout de gauche à droite" +
     "optimise tout l'espace où y'a rien, grossis les caractères au
     pire, c'est trop dense") — remplace la grille auto-fit qui
     étalait 2 colonnes énormes par ligne avec plein d'espace vide dans
     chaque carte : maintenant un vrai kanban en une seule rangée,
     largeur de colonne fixe (jamais démesurée), défilement horizontal
     si les 7 étapes dépassent la largeur de l'écran, caractères plus
     gros pour combler l'espace qu'une colonne large libérait. */
  /* Liste unique et continue (demande d'Ulrik, 2026-09-01) : « je ne veux
     plus de menu déroulant, juste une liste fixe et longue où l'on voit tous
     mes clients en descendant ».
     Avant : des colonnes côte à côte, chacune plafonnée à 600px avec SON
     PROPRE défilement interne. Voir un client au bas d'une étape demandait de
     faire défiler dans une petite boîte, puis de défiler horizontalement pour
     l'étape suivante — deux défilements imbriqués pour une seule lecture.
     Maintenant : les étapes s'empilent, chacune montre TOUS ses clients, et
     la page seule défile. */
  /* Funnel de gauche à droite (demande d'Ulrik) : les étapes se lisent dans
     l'ordre du parcours de vente, comme un vrai entonnoir. Ce qui reste du
     changement précédent, et qui était le vrai irritant : plus AUCUN
     défilement interne. Chaque colonne montre tous ses clients et s'étire
     autant qu'il le faut — c'est la page qui défile, une seule fois.
     align-items:flex-start empêche les colonnes courtes d'être étirées à la
     hauteur de la plus longue. */
  .funnel-board{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
    padding-bottom:8px;
  }
  .funnel-col{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-width:0;
  }
  /* Sous 1100px, sept colonnes deviendraient illisibles : on repasse en
     étapes empilées, pleine largeur. */
  @media (max-width:1100px){
    .funnel-board{flex-direction:column;gap:20px;}
    .funnel-col{width:100%;}
  }
  .funnel-col.dragover{border-color:var(--gold);background:var(--surface-2);}
  /* En-tête collant : dans une liste longue, il faut savoir à quelle étape
     appartient la carte qu'on est en train de lire sans remonter. */
  .funnel-col-header{
    padding:14px 16px;
    border-bottom:2px solid var(--line);
    flex-shrink:0;
    position:sticky;
    top:0;
    z-index:2;
    background:var(--surface);
    border-radius:var(--radius) var(--radius) 0 0;
  }
  .funnel-col-header .fc-titre{
    font-size:13.5px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--gold-light);
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .funnel-col-header .fc-total{
    font-size:17px;
    font-weight:800;
    color:var(--parchment);
    margin-top:4px;
  }
  /* Plus de overflow-y : la hauteur suit le contenu, aucun défilement
     interne. C'est la page qui défile. */
  .funnel-col-body{
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .funnel-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:12px 14px;
    cursor:grab;
    transition:border-color .15s ease, opacity .15s ease;
    animation:cardFadeIn .28s var(--ease) both;
  }
  .funnel-card:active{cursor:grabbing;}
  .funnel-card.dragging{opacity:.4;}
  .funnel-card:hover{border-color:var(--gold);}
  .funnel-card .fcard-nom{font-size:16px;font-weight:700;color:var(--parchment);}
  .funnel-card .fcard-entreprise{font-size:13px;color:var(--gray-500);margin-top:3px;}
  .funnel-card .fcard-montant{font-size:15px;font-weight:800;color:var(--gold-light);margin-top:8px;}
  .funnel-card .fcard-relance{
    font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
    margin-top:8px;padding:3px 8px;border-radius:3px;display:inline-block;
  }
  /* Fond et texte étaient tous deux figés sur l'ancienne palette et ne
     suivaient plus --red / --amber. Texte en variante claire (une couleur
     pleine sur fond sombre passe sous le seuil), fond en color-mix pour
     qu'il suive si le token bouge, repli rgba pour les navigateurs sans
     color-mix — sans lui le fond serait transparent et le badge
     disparaîtrait au lieu d'être mal teinté. */
  .funnel-card .fcard-relance.overdue{background:rgba(224,48,74,.15);background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red-light);}
  .funnel-card .fcard-relance.today{background:rgba(217,154,43,.15);background:color-mix(in srgb, var(--amber) 15%, transparent);color:var(--amber-light);}
  .funnel-card .fcard-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .funnel-card .fcard-btn{
    background:var(--surface-2);border:1px solid var(--gold);color:var(--gold-light);
    font-size:12.5px;font-weight:700;padding:7px 10px;border-radius:3px;cursor:pointer;
    font-family:inherit;
  }
  /* rgba figé sur l'ANCIEN doré (#c9a24a) : le survol serait resté ambre
     alors que tout le reste est passé au cyan. Repli conservé. */
  .funnel-card .fcard-btn:hover{background:rgba(34,211,238,.15);background:color-mix(in srgb, var(--gold) 15%, transparent);}
  /* État vide : gris TERTIAIRE et pas secondaire. Un « aucun client » n'est
     pas une donnée, il ne doit pas peser autant qu'un nom de client dans la
     colonne d'à côté. Modèle : le .vide d'Expav. L'italique est retiré —
     il signalait déjà la mise en retrait, le gris le fait mieux et sans
     dégrader la lisibilité. */
  .funnel-empty-col{
    font-size:12.5px;color:var(--gray-700);
    text-align:center;padding:20px 10px;line-height:1.6;
  }
  /* Seconde ligne (le pourquoi du vide) : encore un cran en retrait. */
  .funnel-empty-col span{
    display:block;margin-top:3px;font-size:11px;opacity:.75;
  }

  /* ---------- PLAN 2D ---------- */
  .plan2d-toolbar{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:8px 10px;
  }
  .plan2d-tool-btn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--gray-300);
    padding:6px 10px;
    font-size:11px;
    font-weight:700;
    border-radius:4px;
  }
  .plan2d-tool-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold);}
  .plan2d-sep{width:1px;height:20px;background:var(--line);margin:0 4px;}

  /* ---------- CALENDRIER ---------- */
  .calendrier-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .calendrier-day{
    background:var(--surface);
    min-height:140px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .calendrier-day.today{background:var(--surface-2);border-top:2px solid var(--gold);}
  .calendrier-day-header{
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--gray-500);
    margin-bottom:4px;
  }
  /* RETENUE CHROMATIQUE (refonte 2026-08-28, référence Expav) : le numéro
     du jour est neutre par défaut. Le cyan ne marque QUE aujourd'hui — quand
     chaque jour porte l'accent, l'accent ne distingue plus rien. Chiffres
     tabulaires pour que les dates s'alignent en colonne. */
  .calendrier-day-header .num{color:var(--parchment);font-size:13px;margin-left:4px;font-variant-numeric:tabular-nums;}
  .calendrier-day.today .calendrier-day-header .num{color:var(--gold-light);}
  .affectation-chip{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:6px;
    padding:5px 7px;
    font-size:10.5px;
    line-height:1.4;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:4px;
  }
  .affectation-chip .aff-info{flex:1;}
  /* Chiffres tabulaires : sans ça les heures (09:00 / 14:30) dansent d'une
     pastille à l'autre — un des signaux les plus lisibles de logiciel bâclé. */
  .affectation-chip .aff-projet{font-weight:700;color:var(--parchment);font-variant-numeric:tabular-nums;}
  /* Gris secondaire, plus cyan : ce sous-titre apparaît sur CHAQUE pastille,
     l'accent y était donc noyé — exactement ce que la fondation interdit. */
  .affectation-chip .aff-emp{color:var(--gray-500);}
  .affectation-chip button{
    background:none;border:none;color:var(--gray-500);
    cursor:pointer;font-size:11px;padding:0;line-height:1;
  }
  .affectation-chip button:hover{color:var(--red-light);}
  /* Le violet a été promu dans theme.css (--violet / --violet-light) le
     2026-08-28 : le token local n'a plus lieu d'être. Usage ici = bordure
     gauche, donc NON textuel — c'est --violet qui convient. Contrainte
     mesurée par Technique : --violet ne passe pas comme couleur de texte
     (3,85 sur carte) et aucune couleur de texte ne passe dessus ; il n'a
     droit qu'aux fonds, bordures et éléments muets. */

  /* État vide du calendrier — volontairement SOBRE, à l'inverse de
     .empty-state (bordure cyan pointillée), qui est un composant partagé par
     8 écrans et relève de la fondation, pas de moi. Modèle : le .vide
     d'Expav — gris tertiaire, sans bordure, sans majuscules criardes. Un
     écran vide ne doit pas crier ; il doit dire par où commencer. */
  .calendrier-vide{
    color:var(--gray-700);
    font-size:12.5px;
    line-height:1.6;
    text-align:center;
    padding:18px 20px;
    margin-top:12px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
  }
  .calendrier-vide b{color:var(--gray-500);font-weight:650;}

  @media(max-width:900px){
    .calendrier-grid{grid-template-columns:repeat(1,1fr);}
  }

  /* ---------- TOOLBAR ---------- */
  .toolbar{
    display:flex;
    gap:10px;
    margin-bottom:22px;
    flex-wrap:wrap;
    align-items:center;
  }
  .search-box{
    flex:1;
    min-width:220px;
    position:relative;
  }
  .search-box input{
    width:100%;
    padding:12px 14px 12px 36px;
    border:1.5px solid var(--gold);
    border-radius:2px;
    font-size:13.5px;
    background:var(--surface);
    color:var(--parchment);
    font-weight:500;
  }
  .search-box input::placeholder{color:var(--gray-500);}
  .search-box input:focus{outline:none;border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(201,162,74,0.15);}
  .search-box::before{
    content:"⌕";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gray-500);
    font-size:17px;
  }
  select.filter{
    padding:11px 12px;
    border:1.5px solid var(--gold);
    border-radius:2px;
    font-size:13px;
    background:var(--surface);
    color:var(--parchment);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
  }

  /* ---------- CLIENT GRID ---------- */
  .section-label{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gold-light);
  }
  .section-label::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  .client-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:14px;
  }
  .client-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:0;
    cursor:pointer;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    position:relative;
    overflow:hidden;
    animation:cardFadeIn .28s var(--ease) both;
  }
  .client-card:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
  }
  .client-card .cc-body{padding:16px 16px 14px;}
  .client-card .row1{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
  }
  .client-card .row1-left{display:flex;align-items:flex-start;gap:10px;min-width:0;}
  .cc-avatar{
    flex-shrink:0;
    width:36px;height:36px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:#0a0a0a;
    letter-spacing:.3px;
  }
  .client-card .name{font-size:16px;font-weight:800;color:var(--parchment);letter-spacing:.2px;}
  .client-card .company{font-size:11.5px;color:var(--gray-500);margin-top:2px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
  mark.search-hit{
    background:rgba(201,162,74,0.32);
    color:var(--gold-light);
    border-radius:2px;
    padding:0 1px;
  }
  @keyframes cardFadeIn{
    from{ opacity:0; transform:translateY(7px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .fade-swap{
    animation:fadeSwapIn .22s var(--ease) both;
  }
  @keyframes fadeSwapIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  #searchResultsCount{
    font-size:11px;
    color:var(--gray-500);
    margin-top:6px;
    padding-left:2px;
    min-height:14px;
  }
  #searchResultsCount.has-query{color:var(--gold-light);}
  .badge{
    font-size:9.5px;
    font-weight:800;
    padding:4px 9px;
    border-radius:0;
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.8px;
    border:1.3px solid var(--black);
  }
  .badge-prospect{background:transparent;color:var(--gold-light);border-color:var(--gold);}
  .badge-actif{background:var(--gold);color:var(--black);border-color:var(--gold);}
  .badge-inactif{background:var(--gray-100);color:var(--gray-500);border-color:var(--gray-300);}

  .client-card .meta{
    margin-top:12px;
    font-size:12px;
    color:var(--gray-300);
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:500;
  }
  /* Faits chiffrés d'une carte : étiquette à gauche, valeur à droite,
     chiffres tabulaires (refonte 2026-08-28, motif dl.faits d'Expav).
     Sans tabular-nums, les montants dansent d'une carte à l'autre parce
     que le « 1 » est plus étroit que les autres chiffres — c'est un des
     signaux les plus lisibles de logiciel bâclé, et il disparaît dès que
     les colonnes s'alignent. L'étiquette est grise et la valeur claire :
     en balayant une liste de chantiers, on lit les montants, pas les mots
     qui se répètent à l'identique sur chaque carte. */
  .client-card .fait{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
  .client-card .fait .lbl{color:var(--gray-500);font-weight:600;}
  .client-card .fait .val{
    color:var(--parchment);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .client-card .meta span.ic{display:inline-block;width:14px;color:var(--gray-500);}

  .relance-stamp{
    margin-top:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    padding:5px 9px;
    border:1.5px solid var(--black);
  }
  .relance-stamp.upcoming{background:var(--gray-50);color:var(--black);}
  .relance-stamp.today{background:var(--black);color:var(--white);}
  .relance-stamp.overdue{
    background:var(--black);
    color:var(--white);
    animation:pulse-stamp 1.6s ease-in-out infinite;
  }
  @keyframes pulse-stamp{
    0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0.0);}
    50%{box-shadow:0 0 0 4px rgba(0,0,0,0.08);}
  }

  .empty-state{
    text-align:center;
    padding:70px 20px;
    color:var(--gray-500);
    border:1.5px dashed var(--gold);
    background:rgba(26,20,20,0.4);
  }
  .empty-state .big{font-size:13px;letter-spacing:2px;font-weight:800;text-transform:uppercase;color:var(--gold-light);margin-bottom:8px;}

  /* ---------- MODAL ---------- */
  .overlay{
    position:fixed;
    inset:0;
    background:rgba(10,10,10,0.6);
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:30px 14px;
    overflow-y:auto;
    z-index:50;
  }
  .overlay.open{display:flex;}
  @media (max-width:768px){
    .overlay{
      align-items:flex-end;
      padding:0;
    }
    .panel{
      max-width:100% !important;
      border-radius:16px 16px 0 0 !important;
      max-height:92vh;
      overflow-y:auto;
      padding-bottom:calc(26px + env(safe-area-inset-bottom));
    }
  }
  .panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    width:100%;
    max-width:640px;
    padding:0 0 26px;
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
  }
  .panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px;
    background:var(--off-black);
    color:var(--white);
    border-bottom:1px solid var(--line);
  }
  .panel-header h2{font-size:16px;margin:0;font-family:'Montserrat',serif;letter-spacing:1px;color:var(--gold-light);}
  .panel-header-actions{display:flex;align-items:center;gap:9px;}
  .panel-header-actions a{text-decoration:none;white-space:nowrap;}
  .close-x{
    background:none;
    border:none;
    font-size:20px;
    color:var(--gray-300);
    cursor:pointer;
    padding:2px 6px;
  }
  .close-x:hover{color:var(--white);}

  .panel-body{padding:22px 24px 0;}

  .field{margin-bottom:14px;}
  .field label{
    display:block;
    font-size:10.5px;
    font-weight:800;
    color:var(--gray-500);
    margin-bottom:5px;
    text-transform:uppercase;
    letter-spacing:1px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    padding:10px 12px;
    border:1.5px solid rgba(201,162,74,0.3);
    border-radius:2px;
    font-size:14px;
    font-family:inherit;
    background:var(--surface-2);
    color:var(--parchment);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--gold-light);
    background:#2a2222;
  }
  .field textarea{resize:vertical;min-height:60px;}
  .two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .section-title{
    font-size:11.5px;
    font-weight:800;
    color:var(--gold-light);
    margin:22px 0 12px;
    padding-top:16px;
    border-top:1.5px solid var(--gold);
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-transform:uppercase;
    letter-spacing:1.2px;
  }

  .contact-item, .note-item{
    background:var(--surface-2);
    border:1.3px solid rgba(201,162,74,0.25);
    border-radius:2px;
    padding:11px 12px;
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
  }
  .contact-item .ci-name{font-weight:700;font-size:13.5px;color:var(--parchment);}
  .contact-item .ci-detail{font-size:12px;color:var(--gray-500);margin-top:2px;}
  .note-item .ni-date{font-size:10.5px;color:var(--gray-500);margin-bottom:3px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
  .note-item .ni-text{font-size:13.5px;white-space:pre-wrap;color:var(--parchment);}
  .item-actions{display:flex;gap:4px;flex-shrink:0;}
  .icon-btn{
    background:none;
    border:none;
    color:var(--gray-500);
    cursor:pointer;
    font-size:14px;
    padding:2px 5px;
  }
  .icon-btn:hover{color:var(--gold-light);}

  .inline-add-form{
    display:none;
    background:var(--surface-2);
    border:1.5px dashed var(--gold);
    border-radius:2px;
    padding:14px;
    margin-bottom:10px;
  }
  .inline-add-form.open{display:block;}
  .inline-add-form .two-col{margin-bottom:8px;}
  .form-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:20px;
    padding:0 24px;
  }
  .form-actions.in-panel-body{padding:0;}

  footer{
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-weight:500;
    font-size:12px;
    color:var(--gray-500);
    padding:26px 20px;
    letter-spacing:.2px;
    border-top:1px solid var(--line);
    margin-top:20px;
  }

  @media (max-width:480px){
    .two-col{grid-template-columns:1fr;}
    .hero-headline .headline{font-size:32px;}
  }
  /* ---------- VAULT LOADER ---------- */
  #vaultLoader{
    position:fixed;
    inset:0;
    z-index:99999;
    background:radial-gradient(circle at center, #14161a 0%, #050607 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
  }
  .vault-svg{
    filter:drop-shadow(0 0 18px rgba(201,162,74,0.25));
  }
  .vault-outer-ring{
    fill:none;
    stroke:#2a2d33;
    stroke-width:3;
  }
  .vault-dial{
    transform-origin:100px 100px;
    animation:vaultDialSpin 1.15s cubic-bezier(.22,.85,.15,1) forwards;
  }
  .vault-tick{
    fill:var(--gray-500);
    transition:fill .3s ease;
  }
  #vaultLoader.unlocked .vault-tick{
    fill:var(--gold);
  }
  .vault-inner-circle{
    fill:var(--surface);
    stroke:var(--gold);
    stroke-width:1.5;
    opacity:.9;
  }
  .vault-monogram{
    opacity:0;
    animation:vaultMonogramIn .5s ease forwards;
    animation-delay:.75s;
  }
  .vault-flash-ring{
    fill:none;
    stroke:var(--gold);
    stroke-width:2;
    opacity:0;
  }
  #vaultLoader.unlocked .vault-flash-ring{
    animation:vaultFlash .5s ease-out forwards;
  }
  .vault-wordmark{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:15px;
    letter-spacing:4px;
    color:var(--parchment);
    opacity:0;
    animation:vaultTextIn .5s ease forwards;
    animation-delay:.95s;
  }
  .vault-status{
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:10.5px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray-500);
    opacity:0;
    animation:vaultTextIn .5s ease forwards;
    animation-delay:1.1s;
    transition:color .3s ease;
  }
  #vaultLoader.unlocked .vault-status{
    color:var(--gold-light);
  }
  #vaultLoader.opening{
    animation:vaultIrisOpen .65s cubic-bezier(.6,0,.4,1) forwards;
    pointer-events:none;
  }
  @keyframes vaultDialSpin{
    0%{ transform:rotate(0deg); }
    70%{ transform:rotate(788deg); }
    100%{ transform:rotate(720deg); }
  }
  @keyframes vaultMonogramIn{
    from{ opacity:0; transform:scale(.7); }
    to{ opacity:1; transform:scale(1); }
  }
  @keyframes vaultTextIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes vaultFlash{
    0%{ opacity:1; stroke-width:2; r:62; }
    100%{ opacity:0; stroke-width:0; r:95; }
  }
  @keyframes vaultIrisOpen{
    from{ clip-path:circle(150% at 50% 50%); opacity:1; }
    to{ clip-path:circle(0% at 50% 50%); opacity:0; }
  }