/* Oqora · Suivi de vos clientes — feuille de style unique (v2)
   Registre « application » : sans-serif, beaucoup d'air, cartes douces sans
   bordures dures, coins bien arrondis, couleur franche, gros boutons pleins.
   Charte : platine (surfaces, texte) + bleu vif (accents) + navy (blocs sombres). */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Montserrat:wght@800;900&display=swap');

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root{
  /* Platine */
  --ink:#22262b;
  --ink-soft:#50575e;
  --ink-faint:#6a7178;
  --rule:#dde1e5;
  --rule-soft:#eceef1;
  --bande:#f7f8f9;
  --surface:#ffffff;
  --page-bg:#f1f3f5;
  --sidebar-bg:#fbfbfc;

  /* Bleu vif */
  --bleu:#2f6fe0;
  --bleu-dark:#2359c2;
  --bleu-tint:#eaf1fd;
  --bleu-ring:rgba(47,111,224,.32);

  /* Navy (sections sombres) */
  --navy-1:#17325e;
  --navy-2:#12203b;
  --navy-3:#0b1733;
  --navy-lede:#c9d6ee;
  --navy-eyebrow:#9fbdf0;
  --navy-grad:linear-gradient(150deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--navy-3) 100%);

  /* Couleurs de statut, franches */
  --vert:#15875a;   --vert-vif:#1aa36c; --vert-tint:#e2f5ec;
  --rouge:#d8372c;  --rouge-tint:#fdeceb;
  --ambre:#b46200;  --ambre-vif:#ec8b12; --ambre-tint:#fdf1de;
  --violet:#6348cc; --violet-tint:#efeafc;
  --rose:#c93583;   --rose-tint:#fbe7f1;
  --teal:#0b7f76;   --teal-tint:#e0f4f2;

  /* Échelle de texte */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14.5px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:clamp(28px, 2.2vw + 12px, 38px);
  --fs-stat:clamp(28px, 1.4vw + 14px, 34px);
  --fs-hero:clamp(38px, 3vw + 14px, 54px);

  /* Espacements (multiples de 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --gutter:clamp(16px, 3.2vw, 44px);

  /* Rayons */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:26px;
  --r-full:999px;

  /* Ombres légères, seulement là où elles servent */
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.04);
  --sh-2:0 2px 4px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.08);
  --sh-pop:0 24px 60px rgba(11,23,51,.24);
  --sh-bleu:0 6px 16px rgba(47,111,224,.28);

  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-brand:'Montserrat', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;

  --sidebar-w:272px;
  --tap:44px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* =========================================================================
   2. Base
   ========================================================================= */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh;
  width:100%;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11", "ss01";
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font); margin:0; letter-spacing:-.02em; line-height:1.2; color:var(--ink); }
p{ margin:0; }
button, input, textarea, select{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
ul, dl, dd{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
svg{ flex:none; }

/* Chiffres toujours alignés */
.stat-value, .nav-badge, .cnt, .heure, .montant, .num, td, .pub-chip .val, .agenda-count-pill,
.journal-duree, .rapport-chiffre .n, .rapport-stats dd, .rapport-centre-chiffres .n, .appel-chrono,
.overview-mini-item b, .ev-time, .agenda-hour-label, .month-daynum, .count, .demarrage-pct, .cours-pct{
  font-variant-numeric:tabular-nums;
}

.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }

/* Focus visible net, partout */
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; border-radius:inherit; }

/* =========================================================================
   3. Composants de base
   ========================================================================= */
/* ---- Boutons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap);
  padding:0 var(--sp-5);
  border-radius:var(--r-sm);
  border:0;
  font-size:var(--fs-base); font-weight:650; letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.btn--primary:hover{ background:var(--bleu-dark); }
.btn--ghost{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1); }
.btn--ghost:hover{ color:var(--bleu); box-shadow:inset 0 0 0 1px var(--bleu), var(--sh-1); }
.btn--sm{ min-height:40px; padding:0 var(--sp-4); font-size:var(--fs-sm); border-radius:11px; }
.btn--sm svg{ width:16px; height:16px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn--inactif{ opacity:.55; cursor:default; }

/* ---- Pastilles ---- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r-full);
  padding:7px 14px;
  font-size:var(--fs-sm); font-weight:650;
  background:var(--surface); color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--rule);
}
.pill svg{ width:15px; height:15px; }
.pill--vert{ background:var(--vert-tint); color:var(--vert); box-shadow:none; }
.pill--rouge{ background:var(--rouge-tint); color:var(--rouge); box-shadow:none; }
.pill--ambre{ background:var(--ambre-tint); color:var(--ambre); box-shadow:none; }
.pill--bleu{ background:var(--bleu-tint); color:var(--bleu); box-shadow:none; }

/* ---- Badges de statut ---- */
.tag{
  display:inline-flex; align-items:center;
  border-radius:7px;
  padding:4px 9px;
  font-size:11px; font-weight:750; line-height:1.3;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--rule-soft); color:var(--ink-soft);
  white-space:nowrap;
}
.tag--rouge{ background:var(--rouge); color:#fff; }
.tag--ambre{ background:var(--ambre-tint); color:var(--ambre); }
.tag--vert{ background:var(--vert-tint); color:var(--vert); }
.tag--bleu{ background:var(--bleu-tint); color:var(--bleu); }
.tag--neutre{ background:var(--rule-soft); color:var(--ink-soft); }

/* ---- Carte ---- */
.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-6);
}
.card h3{ font-size:var(--fs-lg); font-weight:750; }
.card h4{ font-size:var(--fs-md); font-weight:700; margin-bottom:var(--sp-2); }
.card > .muted{ font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.card > .btn{ margin-top:var(--sp-2); }
.etat-vide{ text-align:center; color:var(--ink-faint); font-weight:600; padding:var(--sp-8) var(--sp-6); }

.valeur-manquante{ color:var(--ink-faint); font-weight:700; cursor:help; border-bottom:1px dotted var(--ink-faint); }

/* =========================================================================
   4. Bandeau source + structure
   ========================================================================= */
/* Heure de mise à jour : discrète, à côté de « Recharger » (plus de bandeau). */
.maj-discrete{ font-size:var(--fs-xs); color:var(--ink-faint); white-space:nowrap; }

.shell{ width:100%; min-height:100vh; display:flex; flex-direction:column; }
.shell-body{ flex:1; display:flex; width:100%; align-items:stretch; min-height:0; }

/* ---- Menu latéral calme ---- */
.sidebar{
  width:var(--sidebar-w);
  flex:none;
  background:var(--sidebar-bg);
  box-shadow:inset -1px 0 0 var(--rule-soft);
  padding:var(--sp-6) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-6);
  overflow-y:auto;
  position:sticky; top:0; height:100vh;
}
.sidebar-top{ display:flex; flex-direction:column; gap:var(--sp-3); padding:0 var(--sp-2); }
.brand{ display:flex; align-items:center; gap:var(--sp-3); }
.brand > span:last-child{ font-family:var(--font-brand); font-weight:900; font-size:19px; letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
.brand .brand-mark, .login-brand .brand-mark, .onboard-welcome .brand-mark{
  width:40px; height:40px; border-radius:12px;
  background:var(--bleu); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-brand); font-weight:900; font-size:15px; letter-spacing:.02em;
  box-shadow:var(--sh-bleu);
}
.brand small{ display:block; font-family:var(--font); font-weight:550; color:var(--ink-faint); font-size:var(--fs-xs); letter-spacing:0; margin-top:1px; }
.btn-logout{
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  min-height:var(--tap); padding:0 var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-base); font-weight:600;
  color:var(--ink-soft); background:none; border:none; cursor:pointer; text-align:left;
}
.btn-logout svg{ width:19px; height:19px; color:var(--ink-faint); }
.btn-logout:hover{ color:var(--rouge); background:var(--rouge-tint); }
.btn-logout:hover svg{ color:var(--rouge); }

.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-group-label{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint);
  margin:var(--sp-5) 0 var(--sp-2) var(--sp-3);
}
.nav-item{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:var(--tap);
  padding:0 var(--sp-3);
  border-radius:var(--r-sm);
  color:var(--ink-soft);
  font-weight:600; font-size:var(--fs-base);
  cursor:pointer;
  border:none; background:none; width:100%; text-align:left;
  transition:background-color .12s ease, color .12s ease;
}
.nav-item > span:not(.nav-badge){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item svg{ width:19px; height:19px; color:var(--ink-faint); transition:color .12s ease; }
.nav-item:hover{ background:var(--rule-soft); color:var(--ink); }
.nav-item:hover svg{ color:var(--ink-soft); }
.nav-item .nav-badge{
  margin-left:auto;
  min-width:24px; height:22px; padding:0 7px;
  display:inline-grid; place-items:center;
  background:var(--rule-soft); color:var(--ink-soft);
  border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:700;
}
.nav-item.active{ background:var(--bleu-tint); color:var(--bleu); font-weight:700; }
.nav-item.active svg{ color:var(--bleu); }
.nav-item.active .nav-badge{ background:var(--bleu); color:#fff; }

.sidebar-foot{
  margin-top:auto;
  padding-top:var(--sp-3);
  box-shadow:inset 0 1px 0 var(--rule-soft);
  font-size:var(--fs-xs); color:var(--ink-faint); font-weight:500; line-height:1.6;
}
.sidebar-foot p{ padding:var(--sp-2) var(--sp-3) 0; }

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(11,23,51,.45);
  z-index:40;
}

/* ---- Zone principale + en-tête généreux ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-10) var(--gutter) var(--sp-6);
  flex-wrap:wrap;
  width:100%;
}
.hamburger{
  display:none;
  width:var(--tap); height:var(--tap); flex:none;
  border-radius:var(--r-sm);
  border:0;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1);
  color:var(--ink);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.hamburger svg{ width:22px; height:22px; }
.topbar-title{ flex:1 1 280px; min-width:0; display:flex; align-items:center; gap:var(--sp-3); }
.topbar-title h1{ font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.035em; line-height:1.1; min-width:0; }
/* Flèche de retour d'une sous-page (Ressources, un module de formation…), collée au titre */
.topbar-retour{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:var(--r-full);
  background:var(--surface); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1);
  cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.topbar-retour[hidden]{ display:none; }
.topbar-retour:hover{ color:var(--bleu); }
.topbar-retour svg{ width:20px; height:20px; }
.topbar-actions{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.topbar-actions .btn{ min-height:46px; padding:0 var(--sp-5); font-size:var(--fs-base); border-radius:var(--r-sm); }
.avatar{
  width:46px; height:46px; border-radius:var(--r-full);
  background:var(--navy-grad); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; flex:none;
}
.avatar--sm{ width:36px; height:36px; font-size:var(--fs-sm); }

.view-content{
  flex:1;
  padding:0 var(--gutter) 72px;
  width:100%;
}
.page-lead{ margin:0 0 var(--sp-6); font-size:var(--fs-md); color:var(--ink-soft); max-width:70ch; line-height:1.55; }

/* ---- Titres de section ---- */
.section-title{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; margin:var(--sp-10) 0 var(--sp-4); }
.section-title--first{ margin-top:var(--sp-2); }

/* ---- Onglets segmentés ---- */
.tabs{
  display:inline-flex; gap:2px;
  background:var(--rule-soft);
  border-radius:var(--r-sm);
  padding:4px;
  margin-bottom:var(--sp-6);
}
.tab-btn{
  border:none; background:none; cursor:pointer;
  min-height:38px; padding:0 var(--sp-5);
  border-radius:9px;
  font-weight:650; font-size:var(--fs-sm); color:var(--ink-soft);
  transition:background-color .12s ease, color .12s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

/* ---- Barre d'outils ---- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.toolbar--periode{ background:none; box-shadow:none; padding:0; margin-bottom:var(--sp-2); }
.toolbar--periode .tabs{ margin:0; }
.search-box{
  flex:1 1 240px;
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap);
  background:var(--bande); border-radius:var(--r-sm);
  padding:0 var(--sp-4);
  color:var(--ink-faint); font-size:var(--fs-base);
}
.search-box svg{ width:18px; height:18px; }
.search-box input{ border:none; outline:none; background:none; font:inherit; color:var(--ink); flex:1; min-width:0; }
.search-box input::placeholder{ color:var(--ink-faint); }
.select-fake{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap);
  background:var(--navy-3); color:#fff;
  border-radius:var(--r-sm); padding:0 var(--sp-5);
  font-size:var(--fs-sm); font-weight:650; cursor:pointer; border:none;
  white-space:nowrap; flex:none;
}
.select-fake svg{ width:16px; height:16px; }

/* =========================================================================
   5. Chiffres (Vue d'ensemble, Performances)
   ========================================================================= */
.objectifs{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(47,111,224,.11), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(212,175,106,.20), transparent 60%),
    var(--surface);
  box-shadow:inset 0 0 0 1px rgba(184,148,79,.30), 0 14px 34px rgba(11,23,51,.08);
  border-radius:var(--r-xl); padding:var(--sp-6); margin-bottom:var(--sp-6);
}
.objectifs-titre{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.objectifs-badge{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg, #f1dfb4, var(--or-vif) 55%, var(--or)); color:#17325e;
  box-shadow:0 6px 16px rgba(184,148,79,.38);
}
.objectifs-badge svg{ width:21px; height:21px; }
.objectifs-titre h3{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-.025em; }
.objectifs-periode{
  font-size:var(--fs-sm); font-weight:700; color:#17325e; background:rgba(47,111,224,.10);
  border-radius:var(--r-full); padding:4px 12px;
}
.objectifs-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-4); }
.objectif{
  display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius:var(--r-lg); background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1px var(--rule-soft), 0 2px 8px rgba(11,23,51,.04);
}
.objectif.is-atteint{ box-shadow:inset 0 0 0 1px rgba(184,148,79,.35), 0 4px 14px rgba(184,148,79,.14); }
.anneau-boite{ position:relative; width:128px; height:128px; flex:none; }
.anneau{ width:100%; height:100%; overflow:visible; }
.anneau-fond{ fill:none; stroke:#e6ebf4; stroke-width:11; }
.anneau-plein{
  fill:none; stroke-width:11; stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 3px 6px rgba(36,89,199,.28));
}
.objectif.is-atteint .anneau-plein{ filter:drop-shadow(0 3px 7px rgba(168,138,78,.40)); }
.anneau-cible{ stroke:#17325e; stroke-width:3.5; stroke-linecap:round; }
.anneau-centre{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.anneau-centre b{ font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.anneau-centre b small{ font-size:15px; font-weight:800; margin-left:1px; }
.anneau-centre span{ margin-top:4px; font-size:10px; font-weight:750; line-height:1.25; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.objectif-texte{ min-width:0; }
.objectif-texte h4{ font-size:var(--fs-lg); font-weight:800; letter-spacing:-.01em; }
.objectif-texte p{ font-size:var(--fs-sm); color:var(--ink-soft); margin-top:2px; }
.objectif-puce{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3);
  padding:5px 12px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:750;
}
.objectif-puce svg{ width:15px; height:15px; }
.objectif-puce--or{ background:linear-gradient(135deg, #fbf3e1, #ecd9ae); color:#6b4e16; box-shadow:inset 0 0 0 1px rgba(184,148,79,.40); }
.objectif-puce--bleu{ background:var(--bleu-tint); color:#2459c7; }
.objectif-puce--vide{ background:var(--bande); color:var(--ink-faint); font-weight:650; }
.objectif-detail{ display:block; margin-top:6px; font-size:var(--fs-sm); font-weight:600; color:var(--ink-faint); }
@media (prefers-reduced-motion: reduce){ .anneau-plein{ transition:none; } }
@media (max-width:640px){
  .objectifs{ padding:var(--sp-5); }
  .objectifs-grille{ grid-template-columns:1fr; }
  /* sur téléphone : l'anneau au-dessus, le texte centré dessous (la pastille tient sur une ligne) */
  .objectif{ flex-direction:column; text-align:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-4); }
  .anneau-boite{ width:132px; height:132px; }
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-4);
}
.stats-grid--perf{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.stats-grid--perf .stat-card--feature{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2) var(--sp-8); }
.stats-grid--perf .stat-card--feature .stat-label{ flex-basis:100%; }
.stats-grid--perf .stat-card--feature .stat-note{ margin-bottom:10px; font-size:var(--fs-base); }
.stat-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--sh-1);
  min-width:0;
  display:flex; flex-direction:column; gap:var(--sp-1);
}
.stat-card .stat-label{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.stat-card .stat-value{ font-size:var(--fs-stat); font-weight:750; letter-spacing:-.035em; line-height:1.1; margin-top:var(--sp-3); }
.stat-card .stat-note{ font-size:var(--fs-sm); color:var(--ink-soft); margin-top:var(--sp-1); }
.stat-card .stat-note .up{ color:var(--vert); font-weight:700; }

.stat-card--dark{
  background:var(--navy-grad);
  color:#fff;
  box-shadow:0 12px 30px rgba(11,23,51,.22);
  position:relative; overflow:hidden;
}
.stat-card--dark::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,111,224,.45), rgba(47,111,224,0) 70%);
  pointer-events:none;
}
.stat-card--dark .stat-label{ color:var(--navy-eyebrow); }
.stat-card--dark .stat-value{ color:#fff; font-size:var(--fs-hero); font-weight:800; }
.stat-card--dark .stat-note{ color:var(--navy-lede); }
.stat-card--dark .stat-note .up{ color:#7ee2ae; }
.stat-card--feature{ grid-column:span 2; justify-content:space-between; padding:var(--sp-8); }

/* ---- À faire aujourd'hui ---- */
.overview-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-4); }
.overview-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.overview-card{
  background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.overview-card h4{ font-size:var(--fs-md); font-weight:700; display:flex; align-items:center; gap:var(--sp-3); }
.overview-card h4 svg{
  width:40px; height:40px; padding:10px; border-radius:var(--r-sm);
  background:var(--bleu-tint); color:var(--bleu);
}
.overview-mini-list{ display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.overview-mini-item{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-base); color:var(--ink-soft); }
.overview-mini-item b{ font-size:var(--fs-2xl); font-weight:750; color:var(--ink); letter-spacing:-.03em; }
.overview-card .btn{ width:100%; }

/* ---- Publicité ---- */
.pub-card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--sp-6); margin-bottom:var(--sp-5); }
.pub-card > .muted{ font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.pub-funnel{ display:flex; align-items:stretch; flex-wrap:wrap; gap:var(--sp-2); }
.pub-chip{ flex:1 1 112px; min-width:104px; background:var(--bande); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); }
.pub-chip .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.pub-chip .val{ font-size:var(--fs-lg); font-weight:750; letter-spacing:-.02em; margin-top:var(--sp-1); }
.pub-arrow{ display:flex; align-items:center; color:var(--rule); }
.pub-arrow svg{ width:16px; height:16px; }
.pub-chip--highlight{ background:var(--bleu); box-shadow:var(--sh-bleu); }
.pub-chip--highlight .lbl{ color:#d6e4fb; }
.pub-chip--highlight .val{ color:#fff; }

/* =========================================================================
   6. Kanban (Avant bilan)
   ========================================================================= */
.kanban-scroll{
  overflow-x:auto;
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-1);
  padding:var(--sp-4);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:var(--sp-3); min-width:min-content; }
.kanban-col{
  background:var(--bande);
  border-radius:var(--r-lg);
  padding:var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-3);
  scroll-snap-align:start;
  min-width:0;
}
.kanban-col-head{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-1); }
.kanban-col-head .lbl{ font-size:var(--fs-xs); font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--col-accent-txt, var(--ink-soft)); }
.kanban-col-head::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--col-accent, var(--bleu)); }
.kanban-col-head .cnt{
  margin-left:auto; min-width:26px; height:24px; padding:0 8px;
  display:inline-grid; place-items:center;
  background:var(--surface); border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:700; color:var(--ink); box-shadow:var(--sh-1);
}
.kanban-cards{ display:flex; flex-direction:column; gap:var(--sp-2); }
.kclient{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);
  box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:var(--sp-1);
  transition:box-shadow .15s ease, transform .15s ease;
}
.kclient::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--col-accent, var(--bleu)); }
.kclient:hover{ box-shadow:var(--sh-2); }
.kclient .row1{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 var(--sp-2); align-items:baseline; }
.kclient .nom{ font-weight:700; font-size:var(--fs-md); letter-spacing:-.01em; min-width:0; overflow-wrap:break-word; }
.kclient .heure{ font-size:var(--fs-sm); color:var(--ink-faint); font-weight:600; flex:none; }
.kclient .zone{ font-size:var(--fs-sm); color:var(--ink-soft); }
.kclient .tagrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-2); }
.kclient .tagrow:empty{ display:none; }
.kclient .row2{ margin-top:var(--sp-3); }
.kanban-col--nouveau{ --col-accent:var(--bleu); --col-accent-txt:var(--bleu); }
.kanban-col--contactee{ --col-accent:var(--ambre-vif); --col-accent-txt:var(--ambre); }
.kanban-col--rdvpris{ --col-accent:var(--vert-vif); --col-accent-txt:var(--vert); }
.kanban-col--pasvenue{ --col-accent:#9aa1a8; --col-accent-txt:var(--ink-soft); }
.kanban-empty{ padding:var(--sp-8) var(--sp-3); text-align:center; color:var(--ink-faint); font-size:var(--fs-sm); font-weight:600; border-radius:var(--r-md); box-shadow:inset 0 0 0 2px var(--rule-soft); }

.mini-call-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:40px;
  border:none; background:var(--bleu-tint); color:var(--bleu);
  border-radius:11px; padding:0 var(--sp-4);
  font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  transition:background-color .12s ease, color .12s ease;
}
.mini-call-btn:hover{ background:var(--bleu); color:#fff; }
.mini-call-btn svg{ width:16px; height:16px; }

/* =========================================================================
   7. Tableaux
   ========================================================================= */
.table-wrap{ overflow-x:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:0 var(--sp-2); }
table{ width:100%; border-collapse:collapse; min-width:560px; }
thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); padding:var(--sp-5) var(--sp-4) var(--sp-3); border-bottom:1px solid var(--rule-soft);
}
tbody td{ padding:var(--sp-4); border-bottom:1px solid var(--rule-soft); font-size:var(--fs-base); }
tbody td:first-child{ font-weight:650; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--bande); }
tfoot td{ padding:var(--sp-4); background:var(--bande); font-weight:750; }
tfoot td:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
tfoot td:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
tfoot tr{ box-shadow:0 -1px 0 var(--rule-soft); }
table + *{ margin-top:0; }
.table-wrap:has(tfoot){ padding-bottom:var(--sp-2); }
td.num, th.num{ text-align:right; }
.val-vert{ color:var(--vert); font-weight:750; }
.val-ambre{ color:var(--ambre); font-weight:750; }
.val-rouge{ color:var(--rouge); font-weight:750; }

/* =========================================================================
   8. Listes (Mes appels, Après bilan)
   ========================================================================= */
.list-cards{ display:flex; flex-direction:column; gap:var(--sp-3); }
.list-item{
  background:var(--surface); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); box-shadow:var(--sh-1);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-6);
  transition:box-shadow .15s ease, opacity .2s ease;
}
.list-item:hover{ box-shadow:var(--sh-2); }
.list-item .who{ min-width:180px; flex:1 1 200px; }
.list-item .who .nom{ font-weight:700; font-size:var(--fs-md); letter-spacing:-.01em; }
.list-item .who .sub{ font-size:var(--fs-sm); color:var(--ink-soft); margin-top:2px; }
.list-item .mid{ flex:1 1 200px; font-size:var(--fs-sm); color:var(--ink-soft); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.list-item .montant{ font-weight:750; font-size:var(--fs-lg); letter-spacing:-.02em; min-width:96px; text-align:right; }
.list-item .actions{ display:flex; gap:var(--sp-2); flex:none; margin-left:auto; flex-wrap:wrap; }
.pending-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-left:auto; }
.pending-actions .btn{ white-space:nowrap; }
.list-item > .btn:last-child{ margin-left:auto; }
.list-item > .tag{ margin-left:auto; }

.nom-lien{ cursor:pointer; text-decoration-color:transparent; transition:color .12s ease; }
.nom-lien:hover{ color:var(--bleu); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; text-decoration-color:currentColor; }

/* =========================================================================
   9. Calendrier (grille semaine, blocs colorés par soin)
   ========================================================================= */
.agenda-card{ background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-1); padding:var(--sp-6); margin-bottom:var(--sp-5); }
.agenda-card-head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.agenda-card-head .icon-badge{ width:44px; height:44px; border-radius:var(--r-sm); background:var(--bleu); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-bleu); }
.agenda-card-head .icon-badge svg{ width:21px; height:21px; }
.agenda-card-head h2{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; flex:1 1 auto; min-width:120px; }
.agenda-count-pill{ display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--vert-tint); color:var(--vert); font-weight:700; font-size:var(--fs-sm); padding:0 var(--sp-4); min-height:34px; border-radius:var(--r-full); white-space:nowrap; }
.agenda-count-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--vert-vif); }



.agenda-scroll{ overflow-x:auto; margin-top:var(--sp-5); -webkit-overflow-scrolling:touch; }
.agenda-grid{ display:grid; min-width:720px; column-gap:6px; }
.agenda-corner{ height:40px; }
.agenda-head-cell{
  height:40px; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--bande); border-radius:var(--r-sm); margin-bottom:var(--sp-2);
}
.agenda-hours-col{ display:flex; flex-direction:column; }
.agenda-hours-col .agenda-corner{ margin-bottom:var(--sp-2); }
.agenda-hour-label{ font-size:11px; font-weight:600; color:var(--ink-faint); text-align:right; padding-right:var(--sp-2); transform:translateY(-8px); }
.agenda-day-col-wrap{ display:flex; flex-direction:column; min-width:0; }
.agenda-day-col{
  position:relative;
  border-radius:var(--r-sm);
  background-color:var(--surface);
  background-image:repeating-linear-gradient(to bottom, var(--rule-soft) 0, var(--rule-soft) 1px, transparent 1px, transparent var(--hh));
  box-shadow:inset 1px 0 0 var(--rule-soft);
}
.agenda-event{
  position:absolute; border-radius:10px; padding:7px 9px 7px 11px; overflow:hidden;
  font-size:var(--fs-xs); line-height:1.3;
  transition:transform .12s ease, box-shadow .12s ease;
}
.agenda-event::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ev-c, var(--bleu)); }
.agenda-event[data-ev]:hover{ box-shadow:var(--sh-2); transform:translateY(-1px); z-index:2; }
.agenda-event .ev-title{ font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-event .ev-time{ color:var(--ink-soft); margin-top:2px; font-weight:550; }
.agenda-event .ev-tag{ margin-top:3px; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.ev-vert{ background:var(--vert-tint); --ev-c:var(--vert-vif); }
.ev-violet{ background:var(--violet-tint); --ev-c:var(--violet); }
.ev-rose{ background:var(--rose-tint); --ev-c:var(--rose); }
.ev-teal{ background:var(--teal-tint); --ev-c:var(--teal); }
.ev-ambre{ background:var(--ambre-tint); --ev-c:var(--ambre-vif); }
.ev-default{ background:var(--bleu-tint); --ev-c:var(--bleu); }
/* Couleurs par statut (agenda, palette A) : rouge plein = à renseigner (en retard), bleu = à venir,
   vert = venue, orange = absente, gris barré = annulée */
.ev-rouge{ background:var(--rouge); --ev-c:#9e1f17; }
.agenda-event.ev-rouge .ev-title, .agenda-event.ev-rouge .ev-soin, .agenda-event.ev-rouge .ev-time{ color:#fff; }
.ev-bleu{ background:var(--bleu-tint); --ev-c:var(--bleu); }
.ev-orange{ background:var(--ambre-tint); --ev-c:var(--ambre-vif); }
.ev-gris{ background:#eceef1; --ev-c:#9aa1a8; }
.nav-item .nav-badge.nav-badge--alerte, .nav-item.active .nav-badge.nav-badge--alerte{ background:var(--rouge); color:#fff; }
.ev-annule{ background:var(--bande); --ev-c:var(--ink-faint); opacity:.62; }
.ev-cancelled{ opacity:.8; background-image:repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.55) 6px 12px); }
.ev-cancelled .ev-title{ text-decoration:line-through; text-decoration-color:rgba(34,38,43,.4); }

.agenda-notif{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:var(--sp-5) var(--sp-6); display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
}
.agenda-notif .icon-circle{ width:48px; height:48px; border-radius:50%; background:var(--vert-tint); color:var(--vert); display:grid; place-items:center; font-weight:800; font-size:18px; }
.agenda-notif .icon-circle svg{ width:22px; height:22px; }
.agenda-notif .txt{ flex:1 1 220px; min-width:0; }
.agenda-notif .txt b{ font-weight:700; font-size:var(--fs-md); }
.agenda-notif .txt .sub{ color:var(--ink-soft); font-size:var(--fs-sm); margin-top:2px; }
.agenda-notif .lien{ color:var(--bleu); font-weight:700; font-size:var(--fs-base); white-space:nowrap; min-height:var(--tap); display:inline-flex; align-items:center; }
.agenda-notif .lien:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   10. Guide d'appel (étapes + conseils), Formation
   ========================================================================= */
.etapes{ display:flex; flex-direction:column; gap:var(--sp-3); }
.etape{ display:flex; gap:var(--sp-5); background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); }
.etape > div:last-child{ min-width:0; flex:1; }
.etape .num{
  width:44px; height:44px; border-radius:var(--r-sm); background:var(--bleu); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-md); flex:none; box-shadow:var(--sh-bleu);
}
.etape h4{ font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--sp-1); }
.etape p{ font-size:var(--fs-base); color:var(--ink-soft); max-width:70ch; }
.etape .phrase{
  margin-top:var(--sp-4); font-size:var(--fs-base); font-weight:550; color:var(--navy-1);
  background:var(--bleu-tint); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md);
  box-shadow:inset 4px 0 0 var(--bleu);
}

.rapport-centre .eyebrow{ color:var(--navy-eyebrow); font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.conseils{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--sp-4); }
.conseil{ background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); }
.conseil svg{ width:40px; height:40px; padding:9px; border-radius:var(--r-sm); background:var(--bleu-tint); color:var(--bleu); margin-bottom:var(--sp-4); }
.conseil h4{ font-size:var(--fs-md); font-weight:700; margin-bottom:var(--sp-1); }
.conseil p{ font-size:var(--fs-base); color:var(--ink-soft); }

.cours-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--sp-4); }
.cours-carte{
  background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
}
.cours-carte:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.cours-icon{ width:44px; height:44px; border-radius:var(--r-sm); background:var(--bleu-tint); color:var(--bleu); display:grid; place-items:center; margin-bottom:var(--sp-4); }
.cours-icon svg{ width:22px; height:22px; }
.cours-carte h4{ font-size:var(--fs-md); font-weight:700; margin-bottom:var(--sp-1); }
.cours-carte .muted{ font-size:var(--fs-sm); }
.cours-carte .progress-track{ margin:var(--sp-4) 0 var(--sp-2); }
.cours-pct{ font-size:var(--fs-xs); font-weight:650; color:var(--ink-faint); }

/* =========================================================================
   11. Connexion
   ========================================================================= */
.login-shell{ min-height:100vh; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-8) var(--sp-4); background:var(--navy-grad); }
.login-card{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-pop); padding:var(--sp-10) var(--sp-8); }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-6); text-align:center; }
.login-brand .brand-mark{ width:56px; height:56px; border-radius:16px; font-size:20px; }
.login-brand h1{ font-size:var(--fs-xl); font-weight:800; }
.login-brand p{ color:var(--ink-soft); font-size:var(--fs-base); margin-top:2px; }
.login-field label{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--sp-2); }
.login-field input{
  width:100%; border:0; background:var(--bande); box-shadow:inset 0 0 0 2px var(--rule);
  border-radius:var(--r-md);
  padding:var(--sp-4); font-size:22px; font-weight:750; letter-spacing:.32em;
  text-align:center; color:var(--ink); font-variant-numeric:tabular-nums;
  transition:box-shadow .15s ease, background-color .15s ease;
}
.login-field input:focus{ background:var(--surface); box-shadow:inset 0 0 0 2px var(--bleu), 0 0 0 4px var(--bleu-ring); }
.login-error{ color:var(--rouge); font-size:var(--fs-sm); font-weight:650; margin-top:var(--sp-3); min-height:20px; }
.login-submit{ margin-top:var(--sp-4); min-height:52px; font-size:var(--fs-md); }
.login-hint{ margin-top:var(--sp-5); text-align:center; font-size:var(--fs-sm); color:var(--ink-faint); line-height:1.6; }

/* =========================================================================
   12. Espace client, questionnaire
   ========================================================================= */
.progress-track{ height:10px; border-radius:var(--r-full); background:var(--rule-soft); overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--bleu), #4f8bf0); border-radius:var(--r-full); transition:width .3s var(--ease); }

.demarrage{ margin-bottom:var(--sp-6); padding:var(--sp-8); }
.demarrage-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.demarrage-head h3{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; }
.demarrage-head .muted{ margin-top:var(--sp-1); font-size:var(--fs-base); }
.demarrage-pct{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.03em; color:var(--bleu); }
.demarrage .progress-track{ margin-bottom:var(--sp-6); }

.integ-progress-row{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.integ-progress-row .progress-track{ flex:1; }
.integ-progress-row .count{ font-size:var(--fs-sm); font-weight:700; color:var(--ink-soft); white-space:nowrap; }

.integ-etapes{ display:flex; flex-direction:column; gap:var(--sp-2); }
.integ-etape{
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--bande); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); text-align:left; width:100%;
  min-height:64px;
  transition:background-color .12s ease;
}
.integ-etape:hover{ background:var(--rule-soft); }
.integ-etape .check-circle{
  width:30px; height:30px; border-radius:50%;
  background:var(--surface); box-shadow:inset 0 0 0 2px var(--rule);
  display:grid; place-items:center; flex:none; color:transparent; cursor:pointer;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.integ-etape .check-circle:hover{ box-shadow:inset 0 0 0 2px var(--bleu); }
.integ-etape.done .check-circle{ background:var(--vert-vif); box-shadow:none; color:#fff; }
.integ-etape.done .check-circle svg{ width:16px; height:16px; }
.integ-etape .lbl{ font-weight:650; font-size:var(--fs-base); }
.integ-etape.done .lbl{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule); }
.integ-etape .det{ font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; font-weight:550; }
.integ-etape .go{ margin-left:auto; flex:none; }
.integ-etape--lien{ cursor:pointer; }
.integ-etape--lien:focus-visible{ outline:2px solid var(--bleu); outline-offset:2px; }

.espace-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); align-items:stretch; }
.espace-nav-carte{ cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; position:relative; }
.espace-nav-carte:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.espace-nav-carte::after{
  content:""; position:absolute; right:var(--sp-6); top:var(--sp-6); width:10px; height:10px;
  border-right:2px solid var(--ink-faint); border-top:2px solid var(--ink-faint); transform:rotate(45deg);
  transition:border-color .15s ease;
}
.espace-nav-carte:hover::after{ border-color:var(--bleu); }
.espace-nav-carte h3{ margin-bottom:var(--sp-1); font-size:var(--fs-lg); }
.espace-nav-carte .muted{ font-size:var(--fs-sm); margin:0; }

.drive-loom{ display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--navy-3); color:#fff; border-radius:var(--r-sm); min-height:var(--tap); padding:0 var(--sp-5); font-size:var(--fs-sm); font-weight:650; margin:var(--sp-2) 0 var(--sp-4); }
.drive-loom svg{ width:18px; height:18px; }
.drive-titre{ font-weight:700; font-size:var(--fs-base); color:var(--ink); }
.drive-checklist{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-5); }
.drive-item{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--bande); cursor:pointer; min-height:var(--tap); }
.drive-item:hover{ background:var(--rule-soft); }
.drive-item .drive-box{ width:22px; height:22px; border-radius:7px; box-shadow:inset 0 0 0 2px var(--rule); background:var(--surface); display:grid; place-items:center; flex:none; margin-top:1px; color:#fff; }
.drive-item .drive-box svg{ width:14px; height:14px; }
.drive-item.checked .drive-box{ background:var(--vert-vif); box-shadow:none; }
.drive-item span b{ font-size:var(--fs-base); font-weight:650; }
.drive-item.checked span b{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule); }
.drive-item .det{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px; font-weight:400; }
.drive-swiss label, .modal-field label{ display:block; font-size:var(--fs-sm); font-weight:650; color:var(--ink-soft); margin-bottom:var(--sp-2); }

/* Champs de saisie : un seul style */
.drive-swiss input, .acces-form input, .modal-field input, .onboard-field input[type="text"], .onboard-field textarea{
  width:100%; border:0; background:var(--bande); box-shadow:inset 0 0 0 1.5px var(--rule);
  border-radius:var(--r-sm); min-height:var(--tap); padding:var(--sp-3) var(--sp-4);
  font:inherit; font-size:var(--fs-md); color:var(--ink);
  transition:box-shadow .15s ease, background-color .15s ease;
}
.drive-swiss input:focus, .acces-form input:focus, .modal-field input:focus, .onboard-field input:focus, .onboard-field textarea:focus{
  outline:none; background:var(--surface); box-shadow:inset 0 0 0 2px var(--bleu), 0 0 0 4px var(--bleu-ring);
}
.acces-form{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); }
.card .table-wrap{ box-shadow:inset 0 0 0 1px var(--rule-soft); margin-bottom:var(--sp-4); }

.roadmap-placeholder{ border-radius:var(--r-md); padding:var(--sp-8); text-align:center; color:var(--ink-faint); font-size:var(--fs-base); background:var(--bande); box-shadow:inset 0 0 0 2px var(--rule-soft); }
.lien-ancre{ color:var(--bleu); font-weight:700; font-size:var(--fs-base); }
.contrat-row{ display:flex; align-items:center; justify-content:space-between; background:var(--bande); border-radius:var(--r-md); padding:var(--sp-4); font-weight:600; }

.onboard-shell{ max-width:660px; margin:0 auto; }
.onboard-back{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); font-size:var(--fs-sm); font-weight:650; color:var(--ink-soft); cursor:pointer; margin-bottom:var(--sp-4); border:none; background:none; padding:0; }
.onboard-back:hover{ color:var(--bleu); }
.onboard-back svg{ width:17px; height:17px; }
.onboard-welcome{ text-align:center; }
.onboard-welcome .brand-mark{ width:56px; height:56px; margin:0 auto var(--sp-4); }
.onboard-welcome h1{ font-size:var(--fs-2xl); font-weight:800; }
.onboard-welcome > p{ color:var(--ink-soft); margin:var(--sp-3) auto var(--sp-6); max-width:46ch; }
.onboard-phases{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--sp-4); text-align:left; margin-bottom:var(--sp-6); }
.onboard-phase{ background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.onboard-phase .num{ width:34px; height:34px; border-radius:10px; background:var(--bleu-tint); color:var(--bleu); display:grid; place-items:center; font-weight:800; font-size:var(--fs-base); margin-bottom:var(--sp-3); }
.onboard-phase h4{ font-size:var(--fs-md); font-weight:700; margin-bottom:var(--sp-1); }
.onboard-phase p{ font-size:var(--fs-sm); color:var(--ink-soft); }
.onboard-eyebrow{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--bleu); margin-bottom:var(--sp-3); }
.onboard-question{ font-size:clamp(22px, 2vw + 12px, 30px); font-weight:750; letter-spacing:-.03em; margin-bottom:var(--sp-6); line-height:1.25; }
.onboard-field input[type="text"]{ min-height:56px; font-size:var(--fs-lg); }
.onboard-field textarea{ min-height:140px; resize:vertical; }
.onboard-choices{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.onboard-choice{
  border:0; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--rule), var(--sh-1);
  border-radius:var(--r-md); min-height:52px; padding:0 var(--sp-6);
  font-weight:650; font-size:var(--fs-md); cursor:pointer; color:var(--ink);
  transition:box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.onboard-choice:hover{ box-shadow:inset 0 0 0 2px var(--bleu), var(--sh-1); color:var(--bleu); }
.onboard-choice.selected{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.onboard-actions{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-top:var(--sp-8); }
.onboard-actions .btn{ min-height:52px; padding:0 var(--sp-6); }
.onboard-actions .spacer{ flex:1; }
.onboard-fin{ text-align:center; padding-top:var(--sp-8); }
.onboard-fin .icon-circle{ width:72px; height:72px; border-radius:50%; background:var(--vert-tint); color:var(--vert); display:grid; place-items:center; margin:0 auto var(--sp-5); }
.onboard-fin .icon-circle svg{ width:34px; height:34px; }
.onboard-fin h2{ font-size:var(--fs-2xl); font-weight:800; margin-bottom:var(--sp-3); }
.onboard-fin p{ color:var(--ink-soft); max-width:44ch; margin:0 auto var(--sp-6); }

/* =========================================================================
   13. Coachings (calendrier mois)
   ========================================================================= */
.coach-cal-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); justify-content:space-between; margin-bottom:var(--sp-2); }
.coach-cal-nav{ display:flex; gap:var(--sp-2); order:2; }
.coach-cal-nav .btn{ min-width:40px; padding:0 var(--sp-3); }
.coach-cal-titre{ order:1; flex:1 1 200px; }
.coach-cal-titre h2{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; }
.coach-cal-titre h2::first-letter{ text-transform:uppercase; }
.coach-cal-titre p{ font-size:var(--fs-sm); margin-top:2px; }
.coach-cal-toolbar .tabs{ order:3; margin:0; }

.month-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-top:var(--sp-5); }
.month-head-cell{ text-align:center; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:var(--sp-2); }
.month-cell{ min-height:88px; border-radius:var(--r-sm); background:var(--bande); padding:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.month-cell.empty{ background:transparent; }
.month-cell.today{ background:var(--bleu-tint); box-shadow:inset 0 0 0 2px var(--bleu); }
.month-cell.today .month-daynum{ color:var(--bleu); }
.month-daynum{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); }
.month-coaching{ font-size:11px; font-weight:650; color:#fff; background:var(--bleu); border-radius:6px; padding:3px 6px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
.coaching-rdv{ margin-top:var(--sp-5); background:var(--navy-grad); box-shadow:0 12px 30px rgba(11,23,51,.2); }
.coaching-rdv .icon-circle{ background:rgba(255,255,255,.14); color:#fff; }
.coaching-rdv .txt b{ color:#fff; }
.coaching-rdv .txt .sub{ color:var(--navy-lede); }

/* =========================================================================
   14. Rapport d'appels
   ========================================================================= */
.rapport-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--sp-4); }
.rapport-perso{ display:flex; flex-direction:column; gap:var(--sp-4); }
.rapport-perso-head{ display:flex; align-items:center; gap:var(--sp-3); }
.rapport-perso-head h3{ font-size:var(--fs-lg); }
.rapport-chiffre{ display:flex; align-items:baseline; gap:var(--sp-2); }
.rapport-chiffre .n{ font-size:var(--fs-stat); font-weight:750; letter-spacing:-.035em; line-height:1; }
.rapport-chiffre .l{ font-size:var(--fs-base); color:var(--ink-soft); }
.rapport-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.rapport-stats > div{ background:var(--bande); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); }
.rapport-stats dt{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.rapport-stats dd{ font-size:var(--fs-lg); font-weight:700; margin-top:2px; letter-spacing:-.02em; }

.rapport-centre{
  margin-top:var(--sp-5);
  background:var(--navy-grad); color:#fff; border-radius:var(--r-xl); padding:var(--sp-8);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6) var(--sp-10);
  box-shadow:0 12px 30px rgba(11,23,51,.22);
}
.rapport-centre-txt{ flex:1 1 260px; }
.rapport-centre-txt h3{ color:#fff; font-size:var(--fs-xl); font-weight:750; margin-top:var(--sp-2); }
.rapport-centre-txt p:last-child{ color:var(--navy-lede); margin-top:var(--sp-1); }
.rapport-centre-chiffres{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.rapport-centre-chiffres > div{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); min-width:120px; }
.rapport-centre-chiffres .n{ display:block; font-size:var(--fs-2xl); font-weight:750; letter-spacing:-.03em; line-height:1.1; }
.rapport-centre-chiffres .l{ display:block; font-size:var(--fs-sm); color:var(--navy-lede); margin-top:2px; }
.rapport-centre-vide{ color:var(--navy-lede); font-weight:600; }

.journal{ padding:var(--sp-2) var(--sp-4); }
.journal-ligne{ display:flex; align-items:center; gap:var(--sp-3) var(--sp-4); padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--rule-soft); flex-wrap:wrap; }
.journal-ligne:last-child{ border-bottom:none; }
.journal-dot{ width:10px; height:10px; border-radius:50%; background:#b6bcc2; flex:none; }
.journal-dot.is-ok{ background:var(--vert-vif); }
.journal-qui{ flex:1 1 200px; min-width:0; }
.journal-qui .nom{ font-weight:650; }
.journal-qui .sub{ font-size:var(--fs-xs); color:var(--ink-faint); margin-top:1px; }
.journal-duree{ min-width:92px; text-align:right; font-size:var(--fs-sm); font-weight:650; color:var(--ink-soft); }

/* =========================================================================
   15. Fenêtres d'action (modales)
   ========================================================================= */
.modal-backdrop{
  position:fixed; inset:0; z-index:300;
  background:rgba(11,23,51,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  animation:fadeIn .18s ease;
}
.modal-card{
  position:relative; background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-8);
  max-width:460px; width:100%; box-shadow:var(--sh-pop); max-height:88vh; overflow:auto;
  animation:popIn .22s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-card h3{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; margin-bottom:var(--sp-1); padding-right:var(--sp-10); }
.modal-card > .muted, .modal-card .muted{ margin-bottom:var(--sp-5); font-size:var(--fs-base); }
.modal-card p.tag{ display:inline-flex; }
.modal-close{
  position:absolute; top:var(--sp-5); right:var(--sp-5);
  width:40px; height:40px; border-radius:50%; border:none;
  background:var(--bande); color:var(--ink-soft);
  display:grid; place-items:center; cursor:pointer; z-index:1;
  transition:background-color .12s ease, color .12s ease;
}
.modal-close:hover{ background:var(--rule-soft); color:var(--ink); }
.modal-close svg{ width:18px; height:18px; }
.modal-choices{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.modal-choice-btn{
  min-height:64px; padding:var(--sp-3);
  border-radius:var(--r-md); border:0;
  background:var(--bande); box-shadow:inset 0 0 0 1.5px transparent;
  font-weight:700; font-size:var(--fs-md); cursor:pointer; text-align:center; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  transition:background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.modal-choice-btn:hover{ background:var(--bleu-tint); color:var(--bleu); box-shadow:inset 0 0 0 1.5px var(--bleu); }
.modal-choice-btn.is-selected{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.modal-choice-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.choice-initiale{ width:30px; height:30px; border-radius:50%; background:var(--surface); color:var(--bleu); display:grid; place-items:center; font-size:var(--fs-sm); font-weight:800; box-shadow:var(--sh-1); }
.modal-field{ margin-top:var(--sp-4); }
.modal-actions{ display:flex; justify-content:flex-end; margin-top:var(--sp-5); }
.modal-actions .btn{ min-height:50px; padding:0 var(--sp-6); }

/* ---- Appel en direct ---- */
.appel-live{ text-align:center; padding:var(--sp-4) 0 0; }
.appel-onde{ width:96px; height:96px; margin:0 auto var(--sp-5); border-radius:50%; display:grid; place-items:center; background:var(--bleu-tint); position:relative; }
.appel-onde::before, .appel-onde::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--bleu); opacity:0; animation:onde 1.8s ease-out infinite; }
.appel-onde::after{ animation-delay:.9s; }
@keyframes onde{ from{ transform:scale(.85); opacity:.55; } to{ transform:scale(1.45); opacity:0; } }
.appel-pastille{ width:64px; height:64px; border-radius:50%; background:var(--bleu); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-bleu); }
.appel-pastille svg{ width:28px; height:28px; }
.appel-live[data-etat="en_ligne"] .appel-onde{ background:var(--vert-tint); }
.appel-live[data-etat="en_ligne"] .appel-onde::before, .appel-live[data-etat="en_ligne"] .appel-onde::after{ box-shadow:0 0 0 2px var(--vert-vif); }
.appel-live[data-etat="en_ligne"] .appel-pastille{ background:var(--vert-vif); box-shadow:0 6px 16px rgba(26,163,108,.3); }
.appel-eyebrow{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.modal-card .appel-nom{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.03em; margin:var(--sp-1) 0 var(--sp-3); padding:0; }
.appel-etat{ font-size:var(--fs-lg); font-weight:650; color:var(--bleu); min-height:28px; }
.appel-live[data-etat="en_ligne"] .appel-etat{ color:var(--vert); }
.appel-chrono{ font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.02em; margin-top:var(--sp-2); }
.appel-aide{ font-size:var(--fs-sm); color:var(--ink-faint); margin-top:var(--sp-5); }
.appel-fin{
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--vert-tint); color:var(--vert); font-weight:700; font-size:var(--fs-sm);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); margin:0 var(--sp-10) var(--sp-5) 0;
}
.appel-fin svg{ width:18px; height:18px; }
.appel-fin--manque{ background:var(--rouge-tint); color:var(--rouge); }
.appel-commandes{ display:flex; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5); }
.appel-commandes .btn{ min-height:50px; padding:0 var(--sp-5); }
.btn.appel-raccrocher{ background:var(--rouge); color:#fff; box-shadow:0 6px 16px rgba(216,55,44,.28); }
.btn.appel-raccrocher:hover{ background:#bf2e24; }
.appel-raccrocher svg{ transform:rotate(135deg); }
.btn.appel-micro.is-coupe{ background:var(--rouge-tint); color:var(--rouge); box-shadow:inset 0 0 0 1.5px var(--rouge); }
.appel-live[data-etat="fini"] .appel-onde::before, .appel-live[data-etat="fini"] .appel-onde::after,
.appel-live[data-etat="erreur"] .appel-onde::before, .appel-live[data-etat="erreur"] .appel-onde::after{ animation:none; opacity:0; }
.appel-live[data-etat="erreur"] .appel-onde{ background:var(--rouge-tint); }
.appel-live[data-etat="erreur"] .appel-pastille{ background:var(--rouge); box-shadow:none; }
.appel-live[data-etat="erreur"] .appel-etat{ color:var(--rouge); }

/* =========================================================================
   16. Panneau latéral : fiche cliente
   ========================================================================= */
.panel-backdrop{ position:fixed; inset:0; background:rgba(11,23,51,.42); z-index:350; animation:fadeIn .18s ease; }
.panel-side{
  position:fixed; top:0; right:0; bottom:0; z-index:351;
  width:min(100vw, 460px); background:var(--surface); box-shadow:var(--sh-pop);
  overflow-y:auto; padding:var(--sp-8) var(--sp-8) var(--sp-10);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  animation:panelIn .24s var(--ease);
}
@keyframes panelIn{ from{ transform:translateX(32px); opacity:0; } to{ transform:none; opacity:1; } }
.panel-side .modal-close{ top:var(--sp-6); right:var(--sp-6); }
.panel-nom{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.03em; padding-right:var(--sp-12); line-height:1.15; margin-bottom:var(--sp-3); }
.panel-etape{ display:inline-flex; }
.panel-appeler{ margin-top:var(--sp-5); min-height:52px; font-size:var(--fs-md); }
.panel-info{ display:flex; flex-direction:column; gap:2px; margin:var(--sp-5) 0 var(--sp-2); background:var(--bande); border-radius:var(--r-md); padding:var(--sp-2); font-size:var(--fs-base); color:var(--ink); }
.panel-info > div{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap); padding:0 var(--sp-3); border-radius:10px; min-width:0; }
.panel-info > div span{ min-width:0; overflow-wrap:anywhere; }
.panel-info svg{ width:18px; height:18px; color:var(--ink-faint); }
.panel-info a{ color:var(--bleu); font-weight:700; }
.panel-section-title{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:var(--sp-6) 0 var(--sp-3); }
.panel-side > .muted{ font-size:var(--fs-base); }
.panel-timeline{ display:flex; flex-direction:column; position:relative; }
.panel-tl-item{ display:flex; gap:var(--sp-3); padding:0 0 var(--sp-4); position:relative; }
.panel-tl-item:not(:last-child)::before{ content:""; position:absolute; left:5px; top:16px; bottom:0; width:2px; background:var(--rule-soft); }
.panel-tl-dot{ width:12px; height:12px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 3px var(--bleu); margin-top:4px; flex:none; }
.panel-tl-item .txt{ font-size:var(--fs-base); font-weight:550; }
.panel-tl-item .date{ font-size:var(--fs-xs); color:var(--ink-faint); font-weight:600; margin-top:2px; }
.panel-skel{ background:linear-gradient(90deg, var(--bande) 25%, var(--rule-soft) 37%, var(--bande) 63%); background-size:400% 100%; animation:skelShine 1.4s ease infinite; border-radius:8px; height:16px; margin:var(--sp-3) 0; }
@keyframes skelShine{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* =========================================================================
   17. Toasts
   ========================================================================= */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 160%);
  background:var(--navy-3); color:#fff;
  padding:var(--sp-3) var(--sp-5); min-height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  font-size:var(--fs-base); font-weight:600;
  box-shadow:var(--sh-pop);
  transition:transform .28s var(--ease);
  z-index:500; max-width:min(92vw, 520px); text-align:center;
}
.toast.show{ transform:translate(-50%, 0); }

/* =========================================================================
   18. Adaptation écrans
   ========================================================================= */
@media (max-width:1180px){
  .stats-grid--perf{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Grand écran : plus de colonnes, le chiffre du mois garde sa largeur */
@media (min-width:1600px){
  .stats-grid:not(.stats-grid--perf){ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .stats-grid:not(.stats-grid--perf) .stat-card--feature{ grid-column:span 3; }
  .etape-corps{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:var(--sp-8); }
  .etape-corps h4, .etape-corps p{ grid-column:1; }
  .etape-corps .phrase{ grid-column:2; grid-row:1 / span 2; margin-top:0; align-self:center; }
}
@media (max-width:1024px){
  .overview-grid{ grid-template-columns:1fr; }
}

/* Tiroir de menu */
@media (max-width:899px){
  .hamburger{ display:inline-flex; }
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:50; height:auto;
    width:min(86vw, 320px);
    transform:translateX(-105%);
    transition:transform .26s var(--ease);
    box-shadow:var(--sh-pop);
    background:var(--surface);
    border-radius:0 var(--r-xl) var(--r-xl) 0;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop.open{ display:block; animation:fadeIn .18s ease; }
  .topbar{ padding-top:var(--sp-6); }
  .topbar-title{ flex-basis:200px; }
  .topbar-actions{ width:100%; }
  .topbar-actions--compact{ width:auto; } /* sans « Ajouter une cliente » : reste à côté du titre */
  .pub-arrow{ display:none; }
}

/* Téléphone */
@media (max-width:640px){
  :root{ --gutter:16px; }
  body{ font-size:15px; }
  .topbar{ padding:var(--sp-4) var(--gutter) var(--sp-5); gap:var(--sp-3) var(--sp-3); align-items:center; }
  .topbar-title{ flex:1 1 0; }
  .topbar-title h1{ font-size:27px; }
  .topbar-title p{ font-size:var(--fs-base); margin-top:var(--sp-1); }
  .topbar-actions{ gap:var(--sp-2); flex-wrap:nowrap; }
  .topbar-actions .btn{ min-height:48px; }
  #btnRecharger{ width:48px; padding:0; flex:none; }
  #btnRecharger span{ display:none; }
  #btnAjouter{ flex:1; }
  .topbar-actions .avatar{ width:48px; height:48px; }
  .view-content{ padding-bottom:56px; }
  .page-lead{ font-size:var(--fs-base); margin-bottom:var(--sp-5); }
  .section-title{ font-size:20px; margin:var(--sp-8) 0 var(--sp-3); }

  .card{ padding:var(--sp-5); border-radius:var(--r-lg); }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-3); }
  .stat-card{ padding:var(--sp-4); border-radius:var(--r-md); }
  .stat-card .stat-label{ font-size:10.5px; letter-spacing:.06em; }
  .stat-card .stat-value{ font-size:26px; margin-top:var(--sp-2); }
  .stat-card .stat-note{ font-size:var(--fs-xs); }
  .stat-card--feature{ grid-column:1 / -1; padding:var(--sp-6); border-radius:var(--r-lg); }
  .stats-grid--perf{ grid-template-columns:1fr 1fr; }
  .stats-grid > .stat-card:last-child:nth-child(even){ grid-column:1 / -1; }
  .stat-card--dark .stat-value{ font-size:44px; }

  .overview-card{ padding:var(--sp-5); }
  .objectifs{ padding:var(--sp-5); }

  .toolbar{ padding:var(--sp-2); border-radius:var(--r-md); }
  .search-box{ flex-basis:100%; }
  .select-fake{ width:100%; justify-content:center; }
  .kanban-scroll{ margin:0 calc(var(--gutter) * -1); border-radius:0; box-shadow:none; background:none; padding:0 var(--gutter) var(--sp-2); scroll-padding:0 var(--gutter); }
  .kanban{ grid-auto-columns:min(84vw, 300px); }

  .list-item{ padding:var(--sp-4); gap:var(--sp-3); border-radius:var(--r-md); }
  .list-item .who, .list-item .mid{ flex-basis:100%; }
  .list-item .actions, .pending-actions{ width:100%; margin-left:0; }
  .list-item .actions .btn, .pending-actions .btn{ flex:1 1 0; min-height:48px; font-size:var(--fs-base); }
  .list-item > .btn:last-child{ width:100%; min-height:48px; margin-left:0; }
  .list-item > .tag{ margin-left:0; }
  .list-item .montant{ margin-left:auto; min-width:0; }

  .agenda-card{ padding:var(--sp-4); border-radius:var(--r-lg); }
  .agenda-card-head h2{ font-size:var(--fs-lg); }
  .agenda-notif{ padding:var(--sp-4); }

  .etape{ padding:var(--sp-5); gap:var(--sp-4); flex-direction:column; }

  .demarrage{ padding:var(--sp-5); }
  .integ-etape{ flex-wrap:wrap; padding:var(--sp-3); }
  .integ-etape > div{ flex:1 1 0 !important; min-width:0; }
  .integ-etape .go{ min-height:40px; }

  .month-grid{ gap:4px; }
  .month-cell{ min-height:52px; padding:5px; }
  .month-coaching{ font-size:0; padding:0; width:8px; height:8px; border-radius:50%; }
  .coach-cal-nav{ order:1; width:100%; }
  .coach-cal-nav .btn:nth-child(2){ flex:1; }
  .coach-cal-titre{ order:2; }

  .rapport-centre{ padding:var(--sp-6); }
  .rapport-centre-chiffres{ width:100%; }
  .rapport-centre-chiffres > div{ flex:1 1 0; min-width:0; padding:var(--sp-3); }
  .rapport-centre-chiffres .n{ font-size:var(--fs-lg); }
  .journal{ padding:var(--sp-1) var(--sp-3); }
  .journal-duree{ min-width:0; }

  .modal-backdrop{ align-items:flex-end; padding:0; }
  .modal-card{ max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--sp-6) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); max-height:92vh; animation:sheetIn .26s var(--ease); }
  @keyframes sheetIn{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
  .modal-choice-btn{ min-height:60px; }
  .modal-actions .btn{ width:100%; }

  .panel-side{ width:100vw; border-radius:0; padding:var(--sp-6) var(--sp-5) var(--sp-10); }
  .panel-side .modal-close{ top:var(--sp-5); right:var(--sp-5); }

  .onboard-actions .btn{ flex:1; }
  .login-card{ padding:var(--sp-8) var(--sp-5); }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* =========================================================================
   19. Ajouts : action recommandée, confirmations, menus, calendrier
   ========================================================================= */
.pill--neutre{ background:var(--surface); color:var(--ink-soft); }
.stat-card .stat-note .down{ color:var(--rouge); font-weight:700; }
.stat-card--dark .stat-note .down{ color:#ff9d95; }

/* Action recommandée (façon tableau Kaelys) */
.action-reco{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:var(--surface); color:var(--navy-1);
  box-shadow:inset 0 0 0 1px var(--rule);
  border-radius:8px; padding:4px 10px 4px 8px;
  font-size:var(--fs-xs); font-weight:650; line-height:1.35;
}
.action-reco::before{ content:"Action"; font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px; }
.action-reco svg{ width:14px; height:14px; color:var(--bleu); }
.kclient .action-reco{ margin-top:var(--sp-2); }
.list-item .reco{ flex:0 1 auto; display:flex; }
.list-item .reco:empty{ display:none; }
.list-item .mid .action-reco{ margin-left:0; }
.panel-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.panel-tags .action-reco{ font-size:var(--fs-sm); padding:6px 12px 6px 10px; }
.panel-tags .action-reco svg{ width:16px; height:16px; }

/* Boutons de danger et confirmations */
.btn--danger{ background:var(--rouge); color:#fff; box-shadow:0 6px 16px rgba(216,55,44,.25); }
.btn--danger:hover{ background:#b92c22; }
.modal-choices--3{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr); }
.modal-choices--3 .modal-choice-btn{ white-space:nowrap; }
.modal-choice-btn--danger{ color:var(--rouge); }
.modal-choice-btn--danger:hover{ background:var(--rouge-tint); color:var(--rouge); box-shadow:inset 0 0 0 1.5px var(--rouge); }
.modal-choice-btn[disabled]:hover{ background:var(--bande); color:var(--ink); box-shadow:none; }
.modal-actions--split{ justify-content:space-between; gap:var(--sp-2); }
.modal-actions--split .btn{ flex:1 1 0; }
.note-avenir{
  display:flex; align-items:flex-start; gap:var(--sp-2);
  background:var(--ambre-tint); color:#7b4500; border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--sp-3);
}
.note-avenir svg{ width:18px; height:18px; margin-top:1px; }
.confirm-txt{ font-size:var(--fs-md); font-weight:600; background:var(--rouge-tint); color:#8f2019; border-radius:var(--r-sm); padding:var(--sp-4); }

/* Menu ⋯ */
.more-wrap{ position:relative; flex:none; }
.btn-more{
  width:40px; height:40px; border-radius:11px; border:0; cursor:pointer;
  background:var(--bande); color:var(--ink-soft); display:grid; place-items:center;
}
.btn-more:hover, .btn-more[aria-expanded="true"]{ background:var(--rule-soft); color:var(--ink); }
.btn-more svg{ width:20px; height:20px; }
.menu-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20;
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--sh-pop);
  padding:var(--sp-1); min-width:220px;
}
.menu-pop button{
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  min-height:var(--tap); padding:0 var(--sp-3); border:0; background:none; border-radius:10px;
  font-size:var(--fs-base); font-weight:600; color:var(--ink); cursor:pointer; text-align:left;
}
.menu-pop button:hover{ background:var(--bleu-tint); color:var(--bleu); }
.menu-pop svg{ width:17px; height:17px; }

/* Filtre de colonne (vrai menu déroulant) */
.select-wrap{ position:relative; flex:none; display:inline-flex; }
.select-wrap select{
  appearance:none; -webkit-appearance:none;
  min-height:var(--tap); padding:0 var(--sp-10) 0 var(--sp-5);
  background:var(--navy-3); color:#fff; border:0; border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-sm); font-weight:650; cursor:pointer;
}
.select-wrap select:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.select-wrap svg{ position:absolute; right:14px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:#fff; pointer-events:none; }
.kanban--une-colonne{ grid-auto-columns:minmax(260px, 420px); }

/* Recharger en cours */
.btn.is-loading svg{ animation:tourne .8s linear infinite; }
@keyframes tourne{ to{ transform:rotate(360deg); } }

/* Calendrier : semaine, dates, légende */
.semaine-nav{ display:flex; gap:var(--sp-2); }
.semaine-nav .btn{ padding:0 var(--sp-4); gap:var(--sp-2); }
.semaine-nav .btn:disabled{ opacity:.4; cursor:default; }
@media (max-width:640px){
  .semaine-nav .btn[data-semaine="-1"], .semaine-nav .btn[data-semaine="1"]{ width:44px; padding:0; }
  .semaine-nav .txt-semaine{ display:none; }
}
.agenda-head-cell{ flex-direction:column; gap:0; height:52px; line-height:1.2; }
.agenda-corner{ height:52px; }
.agenda-head-cell .date{ font-size:var(--fs-sm); font-weight:650; letter-spacing:0; text-transform:none; color:var(--ink-faint); }
.agenda-head-cell.is-today{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.agenda-head-cell.is-today .date{ color:#d6e4fb; }
.agenda-legende{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--ink-soft); font-weight:550; }
.agenda-legende li{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.agenda-legende .pastille{ width:14px; height:14px; border-radius:4px; position:relative; overflow:hidden; }
.agenda-legende .pastille::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ev-c, var(--bleu)); }
.agenda-event .ev-soin{ color:var(--ink-soft); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Fiche : chronologie par type */
.panel-tl-item--rdv .panel-tl-dot{ box-shadow:inset 0 0 0 3px var(--vert-vif); }
.panel-tl-item--note .panel-tl-dot{ box-shadow:inset 0 0 0 3px #9aa1a8; }

@media (max-width:640px){
  .topbar{ padding:var(--sp-3) var(--gutter) var(--sp-4); row-gap:var(--sp-3); }
  .topbar-title h1{ font-size:24px; }
  .topbar-title p{ font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-actions .avatar{ display:none; }
  .topbar-actions .btn{ min-height:46px; }
  #btnRecharger{ width:46px; order:2; }
  .maj-discrete{ order:1; font-size:11px; }
  .topbar-actions--compact .maj-discrete{ display:none; } /* laisse toute la place au titre */
  .select-wrap, .select-wrap select{ width:100%; }
  .agenda-card-head{ gap:var(--sp-2); }
  .semaine-nav{ margin-left:auto; }
  .modal-choices--3{ grid-template-columns:1fr 1fr; }
  .modal-choices--3 .modal-choice-btn--danger{ grid-column:1 / -1; }
  .list-item .reco{ flex-basis:100%; }
  .list-item .mid .action-reco{ margin-left:0; }
  .more-wrap{ margin-left:var(--sp-2); }
}

/* Mes appels : colonnes alignées d'une ligne à l'autre sur grand écran
   (une action longue, ex. « Réessayer (autre horaire) », ne fait plus passer les boutons à la ligne). */
@media (min-width: 1100px){
  .list-cards--appels{ display:grid; grid-template-columns:minmax(170px,1.2fr) auto minmax(150px,1fr) auto; gap:var(--sp-3) var(--sp-6); }
  .list-cards--appels .list-item--appel{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center; }
  .list-cards--appels .list-item--appel .reco:empty{ display:block; }
  .list-cards--appels .list-item--appel .who, .list-cards--appels .list-item--appel .mid{ min-width:0; }
}

/* Écoute de l'enregistrement dans le rapport d'appels */
.journal-ligne{ flex-wrap:wrap; }
.journal-audio{ flex:1 1 100%; width:100%; height:36px; margin-top:var(--sp-2); }
@media (min-width:900px){ .journal-audio{ flex:0 1 320px; width:320px; margin-top:0; } }

/* =========================================================================
   Mes appels : les appels du jour, par section
   ========================================================================= */
.appels-total b{ color:var(--ink); font-weight:750; }
.appels-titre{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.appels-section + .appels-section .appels-titre{ margin-top:var(--sp-8); }
.appels-compteur{
  display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 9px;
  border-radius:999px; background:var(--bleu-tint); color:var(--bleu);
  font-size:var(--fs-sm); font-weight:750; letter-spacing:0;
}
.rdv-heure{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bleu-tint); color:var(--bleu-dark);
  font-size:var(--fs-md); font-weight:750; letter-spacing:-.01em;
  border-radius:10px; padding:6px 12px 6px 10px;
}
.rdv-heure svg{ width:18px; height:18px; flex:none; }
.appels-vide{ text-align:center; padding:var(--sp-10) var(--sp-6); }
.appels-vide-icone{
  width:64px; height:64px; margin:0 auto var(--sp-4); border-radius:50%;
  background:var(--vert-tint); color:var(--vert); display:grid; place-items:center;
}
.appels-vide-icone svg{ width:30px; height:30px; }
.appels-vide h3{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.02em; margin:0 0 var(--sp-2); }
.appels-vide p{ color:var(--ink-soft); margin:0 auto; max-width:420px; }

/* Fenêtre « Résultat de l'appel » */
.modal-aide{ display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-faint); margin:var(--sp-3) 0 0; }
.modal-aide svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.modal-question{ font-weight:700; font-size:var(--fs-md); margin:0 0 var(--sp-3); }
.modal-choices--jours{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.modal-choice-btn--2l{ flex-direction:column; gap:2px; font-size:var(--fs-base); line-height:1.25; padding:var(--sp-3) var(--sp-2); }
.choix-d{ font-size:var(--fs-xs); font-weight:600; color:var(--ink-faint); }
.modal-choice-btn:hover .choix-d{ color:inherit; }
.modal-choice-btn.is-selected .choix-d{ color:rgba(255,255,255,.85); }
.rdv-rappel{
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--bleu-tint); color:var(--bleu-dark); font-size:var(--fs-md);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 var(--sp-4);
}
.rdv-rappel svg{ width:18px; height:18px; flex:none; }
.rdv-rappel b{ font-weight:750; }
@media (max-width:640px){
  .rdv-heure{ font-size:var(--fs-base); }
  .modal-choice-btn--2l{ font-size:var(--fs-sm); }
}
/* Colonnes alignées d'une section à l'autre (grand écran) */
@media (min-width:1100px){
  .appels-section .list-cards--appels{ grid-template-columns:minmax(170px,1.2fr) minmax(240px,auto) minmax(150px,1fr) auto; }
}

/* Vidéo Loom intégrée dans l'étape « Déposer vos ressources » */
.drive-video{
  position:relative; width:100%; max-width:820px; aspect-ratio:16/9;
  border-radius:var(--r-md); overflow:hidden; background:var(--navy, #0b1733);
  margin-bottom:var(--sp-6);
}
.drive-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Fiche d'un RDV déjà traité : son résultat (présence, cure), puis les boutons de correction */
.fiche-rdv-statut{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-4) 0 var(--sp-2); }

/* Après bilan, liste : un RDV passé sans retour est en retard (rouge, comme dans l'agenda) */
.list-item--retard{ box-shadow:inset 4px 0 0 var(--rouge), var(--sh-1); }

/* Après bilan : bloc « Aujourd'hui » (les RDV du jour, dans l'ordre des heures) */
.list-item--jour{ gap:var(--sp-3) var(--sp-5); }
.list-item--jour .jour-heure{ font-weight:800; font-size:var(--fs-md); min-width:56px; font-variant-numeric:tabular-nums; }
.list-item--jour .mid{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-3); flex-wrap:wrap; color:var(--ink-soft); }
.list-item--jour .actions{ margin-left:auto; }
.jour-vide{ color:var(--ink-soft); }
@media (max-width:640px){
  .list-item--jour{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--sp-2) var(--sp-3); align-items:start; }
  .list-item--jour .jour-heure{ grid-row:span 2; padding-top:2px; }
  .list-item--jour .mid{ flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; width:auto; }
  .list-item--jour .actions{ grid-column:1 / -1; margin-left:0; width:100%; }
}

/* Après bilan, liste par date : en-tête de semaine (mêmes boutons que l'agenda), RDV en retard en tête */
.liste-semaine-head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-8) 0 0; }
.liste-semaine-head h2{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.025em; flex:1 1 auto; min-width:160px; }
.list-item--jour .jour-heure .jour-date{ display:block; font-size:var(--fs-xs); font-weight:650; color:var(--ink-soft); }
@media (max-width:640px){
  .liste-semaine-head .semaine-nav{ margin-left:auto; }
}


/* En-tête de semaine sur une seule ligne : titre, nombre de RDV, boutons */
.liste-semaine-head{ flex-wrap:nowrap; margin-bottom:var(--sp-5); }
.liste-semaine-head h2{ font-size:var(--fs-lg); flex:1 1 auto; min-width:0; }
.semaine-nav{ flex:none; }
.semaine-nav .btn{ white-space:nowrap; }
.liste-semaine-head + .card.jour-vide{ margin-top:0; }
@media (max-width:900px){
  .liste-semaine-head{ flex-wrap:wrap; }
}
/* Même chose pour l'en-tête de l'agenda (onglet Calendrier) */
@media (min-width:901px){
  .agenda-card-head{ flex-wrap:nowrap; }
  .agenda-card-head h2{ font-size:var(--fs-lg); min-width:0; }
}

/* =========================================================================
   Couleur et vie (28/09) : logotype, barre latérale en deux essais, fond de page
   teinté, blocs de date colorés, « Votre démarrage » en bleu.
   ========================================================================= */
/* Logotype OQORA (Montserrat 800), à la place du carré « OQ » */
.brand{ display:block; }
.brand-logo{ display:block; font-family:var(--font-brand); font-weight:800; font-size:22px; letter-spacing:.14em; line-height:1; color:var(--navy-3); }
.brand small{ margin-top:var(--sp-2); }
.brand-logo--grand{ font-size:30px; margin-bottom:var(--sp-4); color:var(--navy-2); }

/* Barre latérale : dégradé bleu (choisi par Jules le 28/09, l'essai crème est retiré) */
.theme-bleu{ --page-bg:#eef2f9; }
.theme-bleu .sidebar{
  background:linear-gradient(170deg, #2f6fe0 0%, #1f4fb0 32%, #17325e 72%, #0b1733 100%);
  box-shadow:none;
}
.theme-bleu .brand-logo{ color:#fff; }
.theme-bleu .brand small{ color:#c9d6ee; }
.theme-bleu .nav-group-label{ color:#9fbdf0; }
.theme-bleu .nav-item{ color:rgba(255,255,255,.86); }
.theme-bleu .nav-item svg{ color:rgba(255,255,255,.7); }
.theme-bleu .nav-item:hover{ background:rgba(255,255,255,.1); color:#fff; }
.theme-bleu .nav-item:hover svg{ color:#fff; }
.theme-bleu .nav-item.active{ background:#fff; color:var(--navy-1); }
.theme-bleu .nav-item.active svg{ color:var(--bleu); }
.theme-bleu .nav-item .nav-badge{ background:rgba(255,255,255,.16); color:#fff; }
.theme-bleu .nav-item.active .nav-badge{ background:var(--bleu); color:#fff; }
.theme-bleu .sidebar-foot{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); color:rgba(255,255,255,.55); }
.theme-bleu .btn-logout, .theme-bleu .btn-logout svg{ color:rgba(255,255,255,.8); }
.theme-bleu .btn-logout:hover{ background:rgba(255,255,255,.1); color:#fff; }
.theme-bleu .btn-logout:hover svg{ color:#fff; }


/* « Votre démarrage » (Espace client) : carte bleue, étapes en blanc */
.card.demarrage{ background:linear-gradient(135deg, #2f6fe0 0%, #1f4fb0 45%, #17325e 100%); color:#fff; box-shadow:var(--sh-bleu); }
.demarrage-head h3{ color:#fff; }
.demarrage-head .muted{ color:#dbe4f4; }
.demarrage-pct{ color:#fff; }
.demarrage .progress-track{ background:rgba(255,255,255,.22); }
.demarrage .progress-fill{ background:#fff; }
.demarrage .integ-etape{ background:#fff; color:var(--ink); }
.demarrage .integ-etape:hover{ background:#f3f7fe; }
.demarrage .integ-etape .det{ color:var(--ink-faint); }
.espace-nav-carte .cours-icon{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
/* Le compteur « en retard » reste rouge dans les deux essais */
.shell .nav-item .nav-badge.nav-badge--alerte, .shell .nav-item.active .nav-badge.nav-badge--alerte{ background:var(--rouge); color:#fff; }
/* Le fond teinté de chaque essai couvre toute la page */
.shell.theme-bleu{ background:var(--page-bg); min-height:100vh; }

/* =========================================================================
   Or de la DA Oqora (dégradé « Avant Notre Appel. », ~#a88a4e), posé à quelques endroits
   ========================================================================= */
:root{ --or:#b8944f; --or-vif:#d4af6a; --or-clair:#ecd9ae; --or-tint:#f7efdc; }


/* Barre latérale : titres de groupe et repère de la page active en or */
.theme-bleu .nav-group-label{ color:var(--or-clair); }
.theme-bleu .nav-item.active{ box-shadow:inset 4px 0 0 var(--or-vif); }

/* Chiffre d'affaires (carte sombre) : l'étiquette en or */
.stat-card--dark .stat-label{ color:var(--or-clair); }

/* « Votre démarrage » : pourcentage et barre de progression en or */
.demarrage-pct{ color:var(--or-clair); }
.demarrage .progress-fill{ background:linear-gradient(90deg, var(--or) 0%, var(--or-vif) 100%); }

/* Avatar : anneau doré */
.topbar .avatar{ box-shadow:0 0 0 2px var(--page-bg), 0 0 0 4px var(--or-vif); }

/* =========================================================================
   « Votre démarrage » en vert ; lignes de RDV sur une ligne (Jules, 28/09).
   ========================================================================= */



/* « Votre démarrage » : la barre de progression en vert */
.demarrage .progress-fill{ background:linear-gradient(90deg, #1aa36c 0%, #34d399 100%); }

/* Une ligne de RDV reste sur une ligne : ce sont les étiquettes du milieu qui passent à la ligne */
@media (min-width:641px){
  .list-item--jour{ flex-wrap:nowrap; }
  .list-item--jour .mid{ flex:1 1 0; min-width:0; }
}

/* =========================================================================
   Barres de titre en pastille (Après bilan et Mes appels du jour), réglages uniques.
   Même taille et même dégradé bleu pour tous les jours, nombre en or ; Aujourd'hui
   grandit et revient doucement ; « En retard » en rouge, sans rien d'autre.
   ========================================================================= */
.liste-semaine-head{ margin-top:var(--sp-10); margin-bottom:var(--sp-4); }
.jours-liste{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
.jour-bloc{ width:100%; }
.jour-bloc--espace{ margin-top:var(--sp-10); }
.jour-entete, .jour-entete:hover{
  width:380px; max-width:100%; min-height:48px;
  display:inline-flex; align-items:center; gap:var(--sp-3); flex-wrap:nowrap;
  padding:var(--sp-3) var(--sp-5); border:0; border-radius:var(--r-full);
  background:linear-gradient(120deg, #2459c7 0%, #17325e 100%); color:#fff;
  box-shadow:var(--sh-1); cursor:pointer; text-align:left; outline:none;
}
.jour-entete:hover{ background:linear-gradient(120deg, #2a63d8 0%, #1b3a6c 100%); box-shadow:var(--sh-2); }
.jour-entete:focus-visible{ outline:2px solid var(--or-vif); outline-offset:2px; }
.jour-titre{ font-size:var(--fs-md); font-weight:750; letter-spacing:-.01em; white-space:nowrap; }
.jour-nb{ color:var(--or-clair); font-size:var(--fs-sm); font-weight:650; white-space:nowrap; }
.jour-chevron{ margin-left:auto; display:grid; place-items:center; color:var(--or-vif); transition:transform .18s var(--ease); }
.jour-chevron svg{ width:18px; height:18px; }
.jour-bloc.ouvert .jour-chevron{ transform:rotate(90deg); }
.jour-entete--fixe, .jour-entete--fixe:hover{
  cursor:default; background:linear-gradient(120deg, #2459c7 0%, #17325e 100%); box-shadow:var(--sh-1);
}
.jour-contenu{ margin-top:var(--sp-3); padding-left:var(--sp-4); }

/* Aujourd'hui : un petit mouvement, la barre grandit légèrement puis revient */
@keyframes respire{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
.jour-bloc--auj .jour-entete{ transform-origin:left center; animation:respire 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .jour-bloc--auj .jour-entete{ animation:none; } }

/* En retard : la même pastille, en rouge */
.jour-entete--retard, .jour-entete--retard:hover{ background:linear-gradient(120deg, #e0443a 0%, #a3231b 100%); }
.jour-entete--retard .jour-nb{ color:#fff; opacity:.9; }

/* Mes appels du jour : les titres de section en pastille, comme les dates */
.appels-section .appels-titre{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  width:380px; max-width:100%; min-height:48px; padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-full); background:linear-gradient(120deg, #2459c7 0%, #17325e 100%);
  color:#fff; font-size:var(--fs-md); font-weight:750; letter-spacing:-.01em; box-shadow:var(--sh-1);
  margin:var(--sp-8) 0 var(--sp-4);
}
.appels-section .appels-titre.section-title--first{ margin-top:var(--sp-2); }
.appels-section .appels-compteur{ background:none; color:var(--or-clair); min-width:0; height:auto; padding:0; font-size:var(--fs-sm); font-weight:650; }

@media (max-width:640px){
  .jour-entete, .jour-entete:hover, .appels-section .appels-titre{ width:100%; padding:var(--sp-3) var(--sp-4); }
  .jour-contenu{ padding-left:0; }
}
/* Fiche d'un RDV : « Changer la date » sous les trois choix */
.fiche-changer-date{ margin-top:var(--sp-3); }
/* Fiche d'un RDV en correction : le statut enregistré est coché, avec une phrase courte en dessous */
.modal-choice-btn.is-selected svg{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.modal-choice-btn--danger.is-selected{ background:var(--rouge); color:#fff; }
.fiche-statut-actuel{ margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-soft); }
/* Fiche d'un RDV : les gestes possibles, les uns sous les autres */
.fiche-actions{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-4); }
.fiche-actions .btn{ justify-content:center; }
.btn--texte-rouge{ color:var(--rouge); }
.btn--texte-rouge:hover{ background:var(--rouge-tint); color:var(--rouge); }

/* =========================================================================
   Barre de période (Mes performances, Rapport d'appels) : Semaine / Mois / Dates libres,
   flèches pour reculer ou avancer, choix de la personne s'il y en a plusieurs.
   ========================================================================= */
.periode-barre{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--sp-3); margin-bottom:var(--sp-6);
}
.periode-barre .tabs{ margin:0; }
.periode-nav{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.periode-nav .btn[data-periode-pas="-1"], .periode-nav .btn[data-periode-pas="1"]{ width:44px; padding:0; justify-content:center; }
.periode-nav .btn:disabled{ opacity:.4; cursor:default; }
.periode-libelle{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; padding:0 var(--sp-2); }
.periode-libelle b{ font-size:var(--fs-md); font-weight:750; letter-spacing:-.01em; white-space:nowrap; }
.periode-encours{
  font-size:var(--fs-xs); font-weight:700; color:var(--bleu); background:var(--bleu-tint);
  border-radius:var(--r-full); padding:3px 10px; white-space:nowrap;
}
.periode-retour{ white-space:nowrap; }
.periode-libre{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.periode-libre label{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); font-weight:650; color:var(--ink-soft); }
.periode-libre input[type="date"]{
  min-height:40px; border:0; box-shadow:inset 0 0 0 1px var(--rule); border-radius:11px;
  padding:0 var(--sp-3); font:inherit; font-size:var(--fs-sm); color:var(--ink); background:var(--surface);
}
.periode-libre input[type="date"]:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:1px; }
/* On choisit dans le calendrier, pas en tapant : tout le champ est cliquable, pas de chiffre surligné */
.periode-libre input[type="date"]{ cursor:pointer; caret-color:transparent; }
.periode-libre input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; }
.periode-libre input[type="date"]::-webkit-datetime-edit-day-field:focus,
.periode-libre input[type="date"]::-webkit-datetime-edit-month-field:focus,
.periode-libre input[type="date"]::-webkit-datetime-edit-year-field:focus{ background:transparent; color:inherit; }
.periode-personne{ margin-left:auto; }
@media (max-width:760px){
  .periode-barre{ flex-direction:column; align-items:stretch; }
  .periode-modes{ display:flex; }
  .periode-modes .tab-btn{ flex:1; padding:0 var(--sp-2); }
  .periode-nav{ flex-wrap:wrap; }
  .periode-libelle{ flex:1; justify-content:center; padding:0; }
  .periode-libelle b{ white-space:normal; text-align:center; }
  .periode-retour{ width:100%; }
  .periode-libre label{ flex:1 1 140px; }
  .periode-libre input[type="date"]{ flex:1; min-width:0; }
  .periode-libre .btn{ width:100%; }
  .periode-personne{ margin-left:0; }
  .periode-personne select{ width:100%; }
}

/* =========================================================================
   Fiche du RDV : la cliente (téléphone + Appeler, repères, lien vers sa fiche complète)
   ========================================================================= */
.fiche-rdv-contact{
  display:flex; flex-direction:column; gap:var(--sp-3);
  margin:var(--sp-4) 0 var(--sp-2); padding:var(--sp-4);
  background:var(--bande); border-radius:var(--r-md);
}
.fiche-rdv-tel{
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  min-height:54px; padding:0 var(--sp-3) 0 var(--sp-4); border:0; border-radius:var(--r-sm);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule);
  font:inherit; font-size:var(--fs-md); font-weight:700; color:var(--ink); text-decoration:none; cursor:pointer;
  transition:box-shadow .12s ease;
}
.fiche-rdv-tel svg{ width:20px; height:20px; color:var(--bleu); flex:none; }
.fiche-rdv-tel-num{ flex:1; text-align:left; letter-spacing:.02em; white-space:nowrap; }
.fiche-rdv-tel-action{
  flex:none; background:var(--bleu); color:#fff; border-radius:var(--r-full);
  padding:7px 16px; font-size:var(--fs-sm); font-weight:700; box-shadow:var(--sh-bleu);
}
.fiche-rdv-tel--appel:hover{ box-shadow:inset 0 0 0 2px var(--bleu); }
.fiche-rdv-tel:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.fiche-rdv-reperes{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.fiche-rdv-reperes span{
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft);
  background:var(--surface); border-radius:var(--r-full); padding:4px 12px;
  box-shadow:inset 0 0 0 1px var(--rule-soft);
}
.fiche-rdv-lien{
  align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sp-2);
  background:none; border:0; padding:2px 0; font:inherit; font-size:var(--fs-sm); font-weight:700;
  color:var(--bleu); cursor:pointer;
}
.fiche-rdv-lien.nom-lien:hover{ text-decoration:none; }
.fiche-rdv-lien:hover span{ text-decoration:underline; text-underline-offset:3px; }
.fiche-rdv-lien svg{ width:16px; height:16px; }
.fiche-rdv-lien:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; border-radius:6px; }
.fiche-rdv-sans-tel{ display:flex; align-items:center; gap:var(--sp-2); margin:0; }
.fiche-rdv-sans-tel svg{ width:18px; height:18px; }

/* =========================================================================
   Agenda sur téléphone : un seul jour à la fois, choisi dans la rangée des jours de la semaine
   ========================================================================= */
.agenda-grid{ grid-template-columns:52px repeat(var(--nb-jours, 5), minmax(0, 1fr)); min-width:0; }
.agenda-scroll{ overflow-x:visible; }
.agenda-event .ev-time{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-jours{ display:none; }
@media (max-width:640px){
  .agenda-jours{ display:flex; gap:5px; margin-top:var(--sp-4); }
  .agenda-jour{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 0 7px; border:0; border-radius:12px; cursor:pointer; font:inherit;
    background:var(--bande); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule-soft);
    transition:background-color .12s ease, box-shadow .12s ease;
  }
  .aj-nom{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
  .aj-date{ font-size:18px; font-weight:800; line-height:1.1; color:var(--ink); }
  .aj-nb{
    min-width:20px; height:18px; padding:0 5px; border-radius:var(--r-full);
    font-size:11px; font-weight:800; line-height:18px; text-align:center;
    background:var(--or-tint); color:#7a5c22;
  }
  .aj-nb:empty{ background:transparent; }
  .aj-nb--retard{ background:#e0443a; color:#fff; }
  .agenda-jour.is-today{ box-shadow:inset 0 0 0 2px var(--bleu); }
  .agenda-jour.is-today .aj-nom{ color:var(--bleu); }
  .agenda-jour.is-choisi{ background:linear-gradient(160deg, #2459c7, #17325e); color:#d6e4fb; box-shadow:var(--sh-bleu); }
  .agenda-jour.is-choisi .aj-nom{ color:#d6e4fb; }
  .agenda-jour.is-choisi .aj-date{ color:#fff; }
  .agenda-jour.is-choisi .aj-nb{ background:var(--or-vif); color:#17325e; }
  .agenda-jour.is-choisi .aj-nb:empty{ background:transparent; }
  .agenda-jour.is-choisi .aj-nb--retard{ background:#e0443a; color:#fff; }
  .agenda-jour:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
  .agenda-scroll{ overflow-x:visible; margin-top:var(--sp-4); }
  .agenda-grid{ grid-template-columns:46px 1fr; min-width:0; }
  .agenda-day-col-wrap:not(.is-choisi){ display:none; }
}

/* « Cure signée ? » : Oui / Non / Elle réfléchit ; puis « Quand la relancer ? » en 2 × 2 */
.modal-choices--cure{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.modal-choices--relance{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:640px){
  .modal-choices--cure{ grid-template-columns:1fr 1fr; }
  .modal-choices--cure [data-cure="reflexion"]{ grid-column:1 / -1; }
}

/* =========================================================================
   Avant bilan, épuré : carte = nom · soin (ou date du RDV) · prochaine action · 4 points d'appels,
   petit bouton rond pour appeler, clic sur la carte → la fiche. Téléphone : une colonne à la fois (onglets).
   ========================================================================= */
.avant-onglets{ display:none; }
.kclient{ cursor:pointer; }
.kclient.nom-lien:hover{ color:inherit; text-decoration:none; }
.kclient:hover .nom{ color:var(--bleu); }
.kclient:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.kc-haut{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.kc-haut .nom{ font-weight:700; font-size:var(--fs-md); letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere; transition:color .12s ease; }
.kc-appel{
  width:36px; height:36px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--bleu-tint); color:var(--bleu);
  transition:background-color .12s ease, color .12s ease;
}
.kc-appel:hover{ background:var(--bleu); color:#fff; }
.kc-appel svg{ width:17px; height:17px; }
.kc-appel:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.kc-sous{ font-size:var(--fs-sm); color:var(--ink-soft); margin-top:2px; }
.kc-bas{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-3); }
.kc-action{ font-size:var(--fs-sm); font-weight:700; color:var(--col-accent-txt, var(--ink-soft)); }
.kc-appels{ display:inline-flex; gap:4px; flex:none; }
.kc-point{ width:7px; height:7px; border-radius:50%; background:var(--rule); }
.kc-point.is-fait{ background:var(--col-accent, var(--bleu)); }
@media (max-width:640px){
  .avant-onglets{ display:flex; gap:6px; overflow-x:auto; margin:0 calc(var(--gutter) * -1) var(--sp-4); padding:0 var(--gutter) 2px; scrollbar-width:none; }
  .avant-onglets::-webkit-scrollbar{ display:none; }
  .avant-onglet{
    flex:none; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 14px;
    border:0; border-radius:var(--r-full); cursor:pointer; font:inherit; font-size:var(--fs-sm); font-weight:700;
    background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule);
  }
  .avant-onglet b{ font-weight:800; color:var(--ink); }
  .avant-onglet.is-choisi{ background:linear-gradient(160deg, #2459c7, #17325e); color:#d6e4fb; box-shadow:var(--sh-bleu); }
  .avant-onglet.is-choisi b{ color:var(--or-vif); }
  .kanban-scroll{ overflow:visible; margin:0; padding:0; background:none; box-shadow:none; }
  .kanban{ display:block; min-width:0; }
  .kanban-col:not(.is-choisie){ display:none; }
  .kanban-col .kanban-col-head{ display:none; }
}

/* Fiche de la cliente : « Appeler » et « Saisir un résultat » côte à côte */
.panel-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-5); }
.panel-actions .panel-appeler{ margin-top:0; }
.panel-resultat{ min-height:52px; font-size:var(--fs-md); }
@media (max-width:380px){ .panel-actions{ grid-template-columns:1fr; } }

/* Fiche de la cliente à droite : le RDV, les résultats et la cure s'affichent dans la fiche, au-dessus de l'historique */
.panel-zone{ margin-top:var(--sp-5); }
.panel-zone .panel-actions{ margin-top:0; }
.panel-zone .panel-appeler{ margin-top:0; }
.modal-card--panneau{
  max-width:none; width:auto; max-height:none; overflow:visible; animation:none;
  padding:var(--sp-5); border-radius:var(--r-lg); background:var(--bande); box-shadow:inset 0 0 0 1px var(--rule-soft);
}
.modal-card--panneau h3{ font-size:var(--fs-lg); }
.panel-side .modal-card--panneau > .modal-close{ top:10px; right:10px; }
.panel-rdv-titre{ display:flex; align-items:flex-start; gap:8px; margin:0 0 var(--sp-3); font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
.panel-rdv-titre svg{ width:18px; height:18px; color:var(--bleu); flex:none; margin-top:1px; }
.fiche-rdv-contact--panneau{ background:none; padding:0; margin:0 0 var(--sp-3); }
.modal-card--panneau .modal-choice-btn{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.modal-card--panneau .modal-choice-btn:hover{ box-shadow:inset 0 0 0 1.5px var(--bleu); }
.modal-card--panneau .modal-choice-btn.is-selected{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.modal-card--panneau .modal-choice-btn--danger{ color:var(--rouge); }

/* =========================================================================
   Setter (rôle « setter ») : un RDV passé sans retour attend le centre (couleur neutre, jamais le rouge
   « En retard »), notes « le centre dira… », et « Écrire » à côté du bouton d'appel dans Mes appels du jour.
   Ces classes n'apparaissent jamais chez la gérante.
   ========================================================================= */
.ev-attente{ background:var(--bande); --ev-c:var(--ink-faint); box-shadow:inset 0 0 0 1px var(--rule); } /* distinct du gris barré « Annulée » */
.note-avenir--centre{ background:var(--rule-soft); color:var(--ink-soft); }
@media (max-width:640px){
  /* Appeler et Écrire côte à côte, Saisir un résultat en dessous, en pleine largeur */
  .list-item .actions--ecrire .btn{ flex:1 1 40%; }
}

/* Mes appels du jour · « Messages à répondre » (setter) : l'extrait de ce qu'elle a écrit. */
.list-item--message .appel-extrait{ font-style:italic; color:var(--ink); overflow-wrap:anywhere; }