/* ============================================================
   SignaFlow — thème moderne (sur base Bootstrap 5)
   ============================================================ */

:root {
  /* == Lumina Pro (design.md) == */
  --sf-accent: #0071e3;             /* primary-container : bleu action vif */
  --sf-accent-dark: #0059b5;        /* primary */
  --sf-accent-soft: #d7e2ff;        /* primary-fixed */
  --sf-sidebar-bg: #1b1b1d;         /* charbon profond */
  --sf-sidebar-hover: #303032;
  --sf-body-bg: #fcf8fb;            /* surface */
  --sf-card-bg: #ffffff;
  --sf-surface-low: #f6f3f5;
  --sf-surface: #f0edef;
  --sf-text: #1b1b1d;
  --sf-text-muted: #414753;
  --sf-border: #e4e2e4;             /* hair-lines */
  --sf-outline: #c1c6d6;
  --sf-radius: 16px;                /* base Lumina */
  --sf-radius-lg: 24px;
  --sf-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
  --sf-shadow-lg: 0px 10px 40px rgba(0, 0, 0, 0.10);
  --sf-glass: rgba(255, 255, 255, 0.72);
  --sf-sidebar-w: 264px;
  --sf-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html, body { height: 100%; }

body {
  font-family: var(--sf-font);
  background: var(--sf-body-bg);
  color: var(--sf-text);
  font-size: .925rem;
}

h1, h2, h3, h4, h5 { font-weight: 700; }

/* ---------- Structure ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sf-sidebar-w);
  padding: 28px 32px 48px;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sf-sidebar-w);
  background: linear-gradient(180deg, var(--sf-sidebar-bg) 0%, #111c33 100%);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  z-index: 1030;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px;
}

.brand-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--sf-accent), #8b5cf6);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px -6px var(--accent-a70,rgba(0, 113, 227, .7));
}

.brand-icon.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 1.4rem; margin: 0 auto; }

.brand-text { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.brand-text span { color: #9ec5ff; }

.sidebar-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }

.nav-section {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #475569;
  font-weight: 700;
  padding: 16px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.nav-item i { width: 18px; text-align: center; font-size: .9rem; opacity: .8; }

.nav-item:hover { background: var(--sf-sidebar-hover); color: #fff; }

.nav-item.active {
  background: linear-gradient(90deg, var(--accent-a22,rgba(0, 113, 227, .22)), var(--accent-a8,rgba(0, 113, 227, .08)));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--sf-accent);
}

.nav-item.disabled { color: #475569; cursor: default; }
.nav-item.disabled:hover { background: transparent; }

.badge-soon {
  margin-left: auto;
  font-size: .62rem;
  background: rgba(148, 163, 184, .15);
  color: #94a3b8;
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 600;
}

.sidebar-footer { padding: 14px 14px 18px; border-top: 1px solid rgba(148, 163, 184, .12); }

.user-chip { display: flex; align-items: center; gap: 10px; }

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sf-accent);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}

.user-meta { line-height: 1.2; min-width: 0; }
.user-name { color: #fff; font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: #64748b; font-size: .72rem; text-transform: capitalize; }

.btn-logout {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #64748b;
  padding: 8px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.btn-logout:hover { color: #f87171; background: rgba(248, 113, 113, .1); }

/* ---------- En-têtes de page ---------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.page-title { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: 2px; }
.page-subtitle { color: var(--sf-text-muted); margin-bottom: 0; }

.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: .82rem; margin-bottom: 14px; color: var(--sf-text-muted); }
.breadcrumbs a { color: var(--sf-text-muted); text-decoration: none; font-weight: 500; }
.breadcrumbs a:hover { color: var(--sf-accent); }
.breadcrumbs .sep { font-size: .6rem; opacity: .6; }

/* ---------- Cartes / panneaux ---------- */
.card.panel {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
  background: var(--sf-card-bg);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sf-border);
}

.panel-title { font-size: .95rem; margin: 0; display: flex; align-items: center; }
.panel-title i { color: var(--sf-accent); }

.panel-empty { padding: 34px 20px; text-align: center; color: var(--sf-text-muted); }

/* ---------- Stat cards ---------- */
.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
  padding: 18px 20px;
  height: 100%;
}

.stat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.i-indigo { background: #e8f2ff; color: var(--acc-b,#0071e3); }
.i-cyan   { background: #ecfeff; color: #0891b2; }
.i-amber  { background: #fffbeb; color: #d97706; }
.i-rose   { background: #fff1f2; color: #e11d48; }

.stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { color: var(--sf-text-muted); font-size: .8rem; font-weight: 500; }

/* ---------- Tableaux ---------- */
.app-table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-text-muted);
  font-weight: 700;
  background: #fafbfe;
  border-bottom: 1px solid var(--sf-border);
  padding: 12px 20px;
}

.app-table tbody td { padding: 13px 20px; border-color: #f0f2f8; }
.app-table tbody tr.row-clickable { cursor: pointer; }
/* hover déplacé vers design-system.css (source unique) */

.row-link { color: var(--sf-text); text-decoration: none; }
.row-link:hover { color: var(--sf-accent); }

/* ---------- Badges & pills ---------- */
.badge-status {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 11px;
  background: #f1f5f9;
  color: #64748b;
  white-space: nowrap;
}

.badge-status.lg { font-size: .8rem; padding: 6px 14px; }

.st-afaire  { background: #f1f5f9; color: #64748b; }
.st-encours { background: #e8f2ff; color: var(--acc-bd,#0059b5); }
.st-termine { background: #ecfdf5; color: #059669; }
.st-archive { background: #f8fafc; color: #94a3b8; }
.st-bloque  { background: #fef2f2; color: #dc2626; }

.pill-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 20px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-dark);
  font-weight: 700;
  font-size: .78rem;
}

/* ---------- Boutons ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  box-shadow: 0 6px 14px -6px var(--accent-a55,rgba(0, 113, 227, .55));
}
.btn-primary:hover, .btn-primary:focus { background: var(--sf-accent-dark); border-color: var(--sf-accent-dark); }
.btn-outline-primary { color: var(--sf-accent-dark); border-color: var(--acc-pale,#bcd8ff); }
.btn-outline-primary:hover { background: var(--sf-accent); border-color: var(--sf-accent); }
.btn-outline-secondary { border-color: var(--sf-border); color: var(--sf-text); }
.btn-outline-secondary:hover { background: #f1f5f9; border-color: var(--sf-border); color: var(--sf-text); }

.btn-light-icon {
  background: transparent;
  border: 0;
  color: #94a3b8;
  border-radius: 8px;
}
.btn-light-icon:hover { background: #f1f5f9; color: var(--sf-accent-dark); }
.btn-light-icon.text-danger:hover { background: #fef2f2; color: #dc2626 !important; }

/* ---------- Formulaires ---------- */
.form-control, .form-select { border-radius: 10px; border-color: var(--sf-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 .2rem var(--accent-a12,rgba(0, 113, 227, .12));
}
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: 5px; }
.form-label.sm { font-size: .72rem; color: var(--sf-text-muted); margin-bottom: 3px; }

.search-box { position: relative; max-width: 320px; flex: 1; }
.search-box i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: .82rem;
}
.search-box .form-control { padding-left: 36px; border-radius: 10px; }

/* ---------- Modales ---------- */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .3); }
.modal-header { border-bottom: 1px solid var(--sf-border); padding: 18px 24px; }
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-title i { color: var(--sf-accent); }
.modal-body { padding: 22px 24px; }
.modal-footer { border-top: 1px solid var(--sf-border); padding: 14px 24px; }

.hint-box {
  background: var(--sf-accent-soft);
  border: 1px solid #e0e7ff;
  color: var(--acc-bd,#0059b5);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .8rem;
}
.hint-box i { opacity: .8; }

/* ---------- Grille de sites (fiche client) ---------- */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  padding: 18px 20px;
}

.site-card {
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.site-card:hover { box-shadow: var(--sf-shadow); border-color: var(--acc-pale,#bcd8ff); transform: translateY(-2px); }

.site-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.site-name { font-weight: 700; color: var(--sf-text); text-decoration: none; }
.site-name:hover { color: var(--sf-accent); }
.site-card-body { font-size: .82rem; margin-bottom: 12px; }
.site-card-foot { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Fiche : lignes d'info ---------- */
.info-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed #eef1f8;
  font-size: .86rem;
}
.info-line:last-child { border-bottom: 0; }
.info-label { color: var(--sf-text-muted); font-weight: 500; flex-shrink: 0; }

/* ---------- Timeline du dossier ---------- */
.timeline { position: relative; padding-left: 6px; }

.tl-item { position: relative; display: flex; gap: 16px; padding-bottom: 20px; }

.tl-item::before {
  content: '';
  position: absolute;
  left: 21px; top: 44px; bottom: 2px;
  width: 2px;
  background: var(--sf-border);
}
.tl-item:last-child::before { display: none; }
.tl-item.done::before { background: #a7f3d0; }

.tl-marker {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #94a3b8;
  border: 2px solid var(--sf-border);
  z-index: 1;
  font-size: .95rem;
}

.tl-item.current .tl-marker {
  background: var(--sf-accent-soft);
  color: var(--sf-accent-dark);
  border-color: var(--acc-pale,#bcd8ff);
  box-shadow: 0 0 0 5px var(--accent-a10,rgba(0, 113, 227, .1));
}

.tl-item.done .tl-marker { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.tl-item.blocked .tl-marker { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.tl-content {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  padding: 13px 16px;
  background: #fff;
}

.tl-item.current .tl-content { border-color: var(--acc-pale,#bcd8ff); box-shadow: var(--sf-shadow); }

.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.tl-title { font-weight: 700; }

.vt-item {
  display: flex;
  align-items: center;
  font-size: .82rem;
  padding: 8px 10px;
  border: 1px solid var(--sf-border);
  border-radius: 9px;
  margin-bottom: 6px;
}
.vt-item i { color: var(--sf-accent); }

/* ---------- Page de connexion ---------- */
.auth-body {
  background: radial-gradient(1200px 600px at 80% -10%, var(--accent-a18,rgba(0, 113, 227, .18)), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(139, 92, 246, .14), transparent 60%),
              var(--sf-sidebar-bg);
  min-height: 100vh;
}

.auth-wrapper { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 38px 36px 28px;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, .45);
}

.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand h1 { font-size: 1.5rem; font-weight: 800; margin: 14px 0 2px; letter-spacing: -.02em; }
.auth-brand h1 span { color: var(--sf-accent); }
.auth-hint { text-align: center; font-size: .75rem; margin: 18px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  :root { --sf-sidebar-w: 76px; }
  .brand-text, .nav-item span, .nav-section, .user-meta, .badge-soon { display: none; }
  .nav-item { justify-content: center; }
  .nav-item i { font-size: 1.05rem; }
  .sidebar-brand { justify-content: center; padding: 18px 8px; }
  .user-chip { justify-content: center; }
  .btn-logout { margin-left: 0; }
  .app-main { padding: 20px 16px 40px; }
}

/* ============================================================
   V2 — cartes clients, onglets, stepper, activité, documents
   ============================================================ */

.title-count { color: var(--sf-text-muted); font-weight: 600; font-size: 1.1rem; }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Compteurs (dashboard) ---------- */
.counter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.counter-card {
  background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow); padding: 14px 16px;
}
.counter-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.counter-label { font-size: .76rem; color: var(--sf-text-muted); font-weight: 600; }
.counter-card.c-vt { background: #eff6ff; border-color: #dbeafe; }
.counter-card.c-maquette { background: #fffbeb; border-color: #fde68a; }
.counter-card.c-mairie { background: #fdf4ff; border-color: #f5d0fe; }
.counter-card.c-be { background: #ecfeff; border-color: #a5f3fc; }
.counter-card.c-pose { background: #ecfdf5; border-color: #a7f3d0; }

/* ---------- Cartes clients ---------- */
/* v1106 : cartes un peu plus etroites, pour poser 5 dossiers par rangee la ou il
   n'en tenait que 4. Le logo, lui, ne bouge pas : sa hauteur reste de 54 px.
   v1130 : CINQ PAR RANGEE, ET PAS PLUS. « auto-fill » remplissait la largeur :
   plus l'ecran etait grand, plus il ajoutait de colonnes — 11 cartes de 206 px
   sur un 2560, c'est-a-dire des vignettes. On fixe donc le nombre de colonnes
   et on descend par paliers quand l'ecran retrecit : une carte occupe toujours
   un cinquieme de la rangee, et grandit avec l'ecran au lieu de maigrir. */
.client-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
  /* v1130 : LARGEUR FIXE. Cinq colonnes, mais la rangee ne s'etire pas avec
     l'ecran : une carte fait 240 px sur un 27 pouces comme sur un portable.
     5 x 240 + 4 x 14 d'ecart = 1256. Sur un ecran etroit, les colonnes
     retrecissent au lieu de deborder. */
  max-width: 1256px; }
@media (max-width: 1239px) { .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1010px) { .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 790px)  { .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .client-grid { grid-template-columns: minmax(0, 1fr); } }
.client-card { cursor: pointer;
  border: 1px solid rgba(15, 23, 42, .06); border-radius: 18px; padding: 15px;
  box-shadow: var(--sf-shadow); transition: transform .15s, box-shadow .15s; position: relative;
  /* Hauteur commune a toutes les cartes : un nom sur deux lignes ne fait plus
     grandir sa carte, la grille reste reguliere. */
  min-height: 172px; display: flex; flex-direction: column;
}
.client-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px -8px rgba(15, 23, 42, .18); z-index: 2; }
/* Le menu contextuel doit passer au-dessus des cartes suivantes de la grille.
   La classe is-menu est posee par le script de la page ; le selecteur :has sert
   de doublure pour les navigateurs qui le connaissent. */
.client-card.is-menu, .client-card:has(.dropdown-menu.show) { z-index: 30; }
.client-card.is-menu .card-menu { background: #fff; color: var(--sf-text); }
.client-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.client-logo {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; font-weight: 800; text-transform: uppercase;
  color: var(--sf-text);
  /* Plus de bordure grise ni d'ombre : sur une carte coloree, le fond blanc
     de la case dessine le lisere ; sur une carte blanche, la case se fond et
     seul le logo se voit. C'est le meme rendu propre partout. */
}
.client-logo.lg { width: auto; height: auto; max-width: 168px; border-radius: 16px; font-size: 1.2rem; padding: 3px; overflow: hidden; }
/* Sur les cartes et dans les panneaux, la case recoit un logo. Beaucoup de
   logos sont en longueur : enfermes dans un carre ils devenaient minuscules et
   cernes de blanc. La case n'impose donc plus aucune dimension propre : c'est
   le logo qui la dimensionne, en largeur comme en hauteur, dans une limite qui
   preserve l'equilibre de la carte. Il ne reste qu'un lisere blanc de 3 pixels,
   rigoureusement identique sur les quatre cotes, quelle que soit la forme. */
.client-card .client-logo, .logo-prev {
  width: auto; height: auto; max-width: 152px;
  border-radius: 15px; padding: 3px;
  font-size: 1.02rem; letter-spacing: .02em; overflow: hidden;
}
.client-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 7px; }
/* Beaucoup de logos sont livres dans un fichier plus petit que la place
   disponible. On leur impose donc une hauteur, pas une simple limite : le logo
   remplit toute la hauteur offerte, sa largeur suit ses proportions, et la
   largeur maximale ne fait que retenir les formats tres allonges (auquel cas
   la hauteur redescend d'elle-meme, sans jamais deformer l'image). */
.client-card .client-logo img, .logo-prev img { width: auto; height: 54px; max-width: 144px; border-radius: 12px; }
.client-logo.lg img { width: auto; height: 56px; max-width: 160px; border-radius: 13px; }
/* Le recadrage a besoin de l'image chargee pour la mesurer : sans cela on
   verrait le logo apparaitre a la taille du fichier de style, puis sauter a sa
   place definitive. Il reste donc invisible le temps d'etre pose. La regle ne
   s'applique que si le script est bien en place. */
.sf-fit .client-card .client-logo img:not([data-sf-fit]),
.sf-fit .logo-prev img:not([data-sf-fit]),
.sf-fit .client-logo.lg img:not([data-sf-fit]) { opacity: 0; }
.client-logo-txt, .logo-prev-txt { display: block; line-height: 1; }
/* Le carre des initiales, tenu par le texte lui-meme dans les deux sens : la
   case n'impose plus aucun minimum, donc le lisere reste identique sur les
   quatre cotes quelle que soit la forme du logo. */
.client-card .client-logo > .client-logo-txt, .logo-prev > .logo-prev-txt { min-width: 54px; min-height: 54px; display: grid; place-items: center; }
/* Sur une carte restee blanche, des initiales sans case flotteraient : elles
   gardent un carre doux, invisible des qu'un vrai logo prend la place. */
.client-card[data-couleur="#ffffff"] .client-logo > .client-logo-txt { background: #f1f2f5; border-radius: 12px; }
.client-logo.lg > .client-logo-txt { min-width: 56px; min-height: 56px; display: grid; place-items: center; }
/* Avant qu'un fichier soit choisi, la case de creation garde son carre :
   le repere visuel reste stable. Des qu'une image est posee, la contrainte
   se libere et la case epouse la forme du logo. */
#logoFieldNew:not(.has-local) .logo-prev { min-width: 60px; min-height: 60px; }
.card-menu { display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.85); border: 1px solid rgba(15,23,42,.06); border-radius: 50%; width: 32px; height: 32px; padding: 0; color: #64748b; line-height:1; transition: background .14s ease, color .14s ease; }
.card-menu:hover { background: #fff; color: var(--sf-text); }
/* v1106 : les cartes etant un peu plus etroites, le nom dispose d'une ligne de
   plus avant d'etre coupe. Une carte au nom court garde exactement sa hauteur. */
.client-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-weight: 700; color: var(--sf-text); text-decoration: none;
  text-transform: uppercase; font-size: .92rem; line-height: 1.3;
}
.client-name:hover { color: var(--sf-accent-dark); }
/* Le vide de la carte se loge sous le nom, jamais entre la pastille et le nom :
   le pied descend au bas de la carte, le titre reste colle a son logo. */
.client-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.client-card > .client-sites { margin-top: auto; padding-top: 8px; }
.client-sites { display: flex; align-items: center; gap: 7px; color: #475569; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.client-sites .dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
/* Pied de carte : la categorie remonte pour laisser la date se glisser sous
   elle, en plus discret encore. */
.client-meta { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: -4px; }
.client-cree { font-size: .5rem; font-weight: 600; line-height: 1; color: rgba(15, 23, 42, .26); white-space: nowrap; text-align: right; }
.client-card.is-dark .client-cree { color: rgba(255, 255, 255, .42); }
.client-cat {
  font-size: .455rem; font-weight: 700; line-height: 1;
  color: rgba(15, 23, 42, .34); text-transform: uppercase; letter-spacing: .05em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}

/* ---------- Champ logo des panneaux (page Dossiers projets) ---------- */
/* Le fichier choisi n'est envoye qu'a l'enregistrement : l'apercu local se
   superpose donc a l'apercu distant tant que le formulaire n'est pas valide. */
.logo-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-field [hidden] { display: none !important; }
.logo-prev { flex: none; }
.logo-prev .logo-prev-ico { width: 24px; height: 24px; color: var(--sf-outline); }
.logo-prev-local { display: none; }
.logo-field.has-local .logo-prev-local { display: block !important; }
.logo-field.has-local .logo-prev-remote,
.logo-field.has-local .logo-prev-txt,
.logo-field.has-local .logo-prev-ico { display: none !important; }
.logo-field.is-cleared .logo-prev-remote { display: none !important; }
.logo-field.is-cleared .logo-prev-txt { display: block !important; }
#logoFieldNew .logo-prev-txt { display: none; }
#logoFieldNew.has-ini .logo-prev-txt { display: block; }

/* Fond de carte sombre : le titre et les mentions passent en blanc. La
   detection est faite par sf-ui.js, qui compare le contraste reel du texte
   sombre de la charte et celui du blanc sur la couleur choisie. */
.client-card.is-dark .client-name,
.client-card.is-dark .client-name:hover { color: #ffffff; }
.client-card.is-dark .client-sites { color: rgba(255, 255, 255, .78); }
.client-card.is-dark .client-sites .dot { background: rgba(255, 255, 255, .55); }
.client-card.is-dark .client-cat { color: rgba(255, 255, 255, .55); }

#logoFieldNew.has-ini .logo-prev-ico { display: none; }
.logo-field-acts { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.logo-field-input { display: none; }
.logo-field-hint { flex-basis: 100%; margin: 0; font-size: .72rem; line-height: 1.45; color: var(--sf-text-muted); }
.btn-logo {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--sf-border); color: var(--sf-text);
  font-weight: 600; font-size: .82rem; padding: 8px 14px; border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .15s, box-shadow .15s;
}
.btn-logo:hover {
  background: var(--sf-surface-low); border-color: var(--sf-outline); color: var(--sf-text);
  transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .28);
}
.btn-logo:active { transform: translateY(0) scale(.98); }
.btn-logo svg { width: 16px; height: 16px; flex: none; }
.btn-logo-del { background: transparent; border-color: transparent; box-shadow: none; color: var(--sf-text-muted); }
.btn-logo-del:hover { background: rgba(248, 113, 113, .1); border-color: transparent; color: #f87171; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-logo, .btn-logo:hover, .btn-logo:active { transition: none; transform: none; }
}

/* ---------- Sections par categorie (page Dossiers projets) ---------- */
/* La section garde un fond clair pour rassembler ses cartes, mais allege :
   fond blanc translucide, filet de 0.5px, pas d'ombre. L'en-tete n'est plus une
   barre pleine largeur, c'est un intitule suivi d'un filet gris qui file vers la
   droite jusqu'aux deux actions de la categorie. */
.cat-list { display: flex; flex-direction: column; gap: 16px; }
.cat-sec {
  background: rgba(255, 255, 255, .62);
  border: .5px solid var(--sf-border);
  border-radius: 18px;
  box-shadow: none;
  padding: 13px 16px 16px;
}
.cat-sum {
  display: flex; align-items: center; gap: 10px; padding: 0 2px;
  cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none;
}
.cat-sum::-webkit-details-marker { display: none; }
.cat-chev {
  flex: none; width: 10px; text-align: center; font-size: .62rem;
  color: var(--sf-text-muted); opacity: .55;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.cat-sec[open] .cat-chev { transform: rotate(90deg); }
.cat-nom {
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--sf-text-muted); white-space: nowrap;
}
.cat-nb {
  font-size: .72rem; font-weight: 600; color: var(--sf-text-muted); opacity: .6;
  font-variant-numeric: tabular-nums;
}
.cat-line { flex: 1; min-width: 14px; height: 1px; background: var(--sf-border); }
.cat-sum:hover .cat-nom { color: var(--sf-text); }
/* Les actions sont toujours visibles : elles se contentent de s'affirmer au survol. */
.cat-acts { flex: none; display: flex; gap: 2px; }
.cat-act {
  width: 26px; height: 26px; flex: none; border: 0; border-radius: 9px;
  background: transparent; color: var(--sf-text-muted); opacity: .5; font-size: .72rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.cat-sum:hover .cat-act { opacity: .8; }
.cat-act:hover, .cat-act:focus-visible { opacity: 1; background: var(--sf-surface); color: var(--sf-text); }
.cat-act-del:hover, .cat-act-del:focus-visible { background: rgba(248, 113, 113, .1); color: #f87171; }
.cat-sec > .client-grid { padding: 14px 0 0; }
.cat-sec[open] > .client-grid { animation: catOpen .32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes catOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cat-vide { grid-column: 1 / -1; padding: 2px; color: var(--sf-text-muted); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) {
  .cat-chev { transition: none; }
  .cat-sec[open] > .client-grid { animation: none; }
}

/* ---------- Boutons d'en-tete de la page Dossiers projets ---------- */
/* Pastille blanche autour du + du bouton principal. */
.btn-plus { display: inline-flex; align-items: center; gap: 9px; padding-left: 12px; }
.btn-plus__ic {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: #fff; color: var(--sf-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; line-height: 1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.btn-plus__ic i { margin: 0; }
/* Action secondaire : fond blanc, filet leger, meme hauteur que le bouton principal. */
.btn-cat-new,
.btn-sf-ghost {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid var(--sf-border); color: var(--sf-text);
  font-weight: 600; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: background .16s ease, border-color .16s ease, transform .15s, box-shadow .15s;
}
.btn-cat-new:hover,
.btn-sf-ghost:hover {
  background: var(--sf-surface-low); border-color: var(--sf-outline); color: var(--sf-text);
  transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .28);
}
.btn-cat-new:active,
.btn-sf-ghost:active { transform: translateY(0); }
.btn-cat-new i,
.btn-sf-ghost i { color: var(--sf-text-muted); }

.client-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 8px;
  font-size: .74rem; font-weight: 700; color: #1b1b1d; border: 1px solid rgba(15,23,42,.06);
}

.ref-chip {
  display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
  font-size: .72rem; font-weight: 600; border-radius: 7px; padding: 2px 8px; font-family: ui-monospace, monospace;
}

/* ---------- Voile colore du dossier projet (page /client) ---------- */
/* Un aplat a la couleur du dossier, tres attenue, qui part du haut de la page
   et s'efface completement avant le tableau. La couleur est posee en ligne sur
   .pf-dossier-hero__bg depuis scClient.data.client.couleur ; le fondu et
   l'opacite restent ici pour que la teinte ne domine jamais le contenu. */
.pf-dossier-hero { position: relative; z-index: 0; }
.pf-dossier-hero__bg {
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--sf-content-pt, 16px) * -1);
  left: calc(var(--sf-content-px, 22px) * -1);
  right: calc(var(--sf-content-px, 22px) * -1);
  height: 268px;
  background-color: var(--sf-accent);
  opacity: .16; /* valeur de repli : recalculee par la page selon la couleur */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 52%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 52%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 991.98px) {
  .pf-dossier-hero__bg { height: 300px; }
}

/* ---------- Onglets ---------- */
.app-tabs { border-bottom: 1px solid var(--sf-border); margin-bottom: 18px; gap: 6px; }
.app-tabs .nav-link {
  border: 0; color: var(--sf-text-muted); font-weight: 600; font-size: .86rem;
  padding: 9px 15px; border-radius: 10px; margin-bottom: 0; border-bottom: none;
  background: transparent; transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
.app-tabs .nav-link:hover { color: var(--sf-accent-dark); background: var(--sf-accent-soft); }
.app-tabs .nav-link:focus, .app-tabs .nav-link:focus-visible { outline: none; box-shadow: none; }
.app-tabs .nav-link.active { color: #fff; background: var(--sf-accent); box-shadow: 0 3px 12px var(--accent-a28,rgba(0,113,227,.28)); border-bottom: none; }
.app-tabs .nav-link.active:hover { color: #fff; background: var(--sf-accent-dark); }
.app-tabs .nav-link, .app-tabs .nav-link:hover, .app-tabs .nav-link:focus, .app-tabs .nav-link:active, .app-tabs .nav-link:focus-visible {
  outline: none !important; box-shadow: none !important; border: 0 !important; --bs-nav-link-hover-color: inherit;
}
.app-tabs .nav-link.active { box-shadow: 0 3px 12px var(--accent-a28,rgba(0,113,227,.28)) !important; }

/* ---------- Chips de filtre ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--sf-border);
  background: #fff; border-radius: 20px; padding: 6px 13px; font-size: .78rem; font-weight: 600; color: #475569;
  transition: all .12s;
}
.chip:hover { border-color: var(--acc-pale,#bcd8ff); color: var(--sf-accent-dark); }
.chip.active { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; }
.chip.active .chip-dot { background: #fff !important; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; }
.d-vt { background: #3b82f6; } .d-maquette { background: #f59e0b; } .d-mairie { background: #d946ef; }
.d-be { background: #06b6d4; } .d-pose { background: #10b981; }

/* ---------- Badge étape ---------- */
.badge-etape {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
  border-radius: 20px; padding: 4px 11px; white-space: nowrap; background: #f1f5f9; color: #64748b;
}
.badge-etape.sm { font-size: .64rem; padding: 2px 8px; }
.e-vt { background: #eff6ff; color: #2563eb; }
.e-maquette { background: #fffbeb; color: #d97706; }
.e-validation { background: #f5f3ff; color: #7c3aed; }
.e-mairie { background: #fdf4ff; color: #c026d3; }
.e-be { background: #ecfeff; color: #0891b2; }
.e-pose { background: #ecfdf5; color: #059669; }
.e-termine { background: #f0fdf4; color: #16a34a; }
/* v1132 — l'état de FIN d'un projet, dans les tableaux : « Finalisé » (figé) et
   « Archivé » (rangé). Ils prennent la place de l'étape, qui ne veut plus rien
   dire une fois le projet clos. */
.e-fige { background: #e7f6ec; color: #16803c; box-shadow: inset 0 0 0 1px #c4e8d1; }
.e-archive { background: #eef1f5; color: #5b6474; box-shadow: inset 0 0 0 1px #dde2ea; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-top: 1px solid var(--sf-border); }
.pager-info { font-size: .8rem; color: var(--sf-text-muted); font-weight: 500; }

/* ---------- Stepper workflow (vue site) ---------- */
.stepper {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px;
}
.step-card {
  background: #fff; border: 1px solid var(--sf-border); border-radius: 14px; padding: 14px 10px;
  text-align: center; cursor: pointer; transition: all .13s; position: relative;
}
.step-card:hover { border-color: var(--acc-pale,#bcd8ff); box-shadow: var(--sf-shadow); }
.step-card.active { border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--accent-a14,rgba(0, 113, 227, .14)), var(--sf-shadow); }
.step-icon {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 11px; display: grid; place-items: center;
  background: #f1f5f9; color: #94a3b8; font-size: .95rem;
}
.step-card.s-done .step-icon { background: #ecfdf5; color: #059669; }
.step-card.s-current .step-icon { background: var(--sf-accent-soft); color: var(--sf-accent-dark); }
.step-card.s-blocked .step-icon { background: #fef2f2; color: #dc2626; }
.step-title { font-size: .78rem; font-weight: 700; line-height: 1.25; }
.step-status { font-size: .68rem; font-weight: 600; color: #94a3b8; margin-top: 4px; }
.step-status.t-done { color: #059669; } .step-status.t-current { color: var(--sf-accent-dark); } .step-status.t-blocked { color: #dc2626; }

.module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- Carte VT ---------- */
.vt-card { border: 1px solid var(--sf-border); border-left: 4px solid #94a3b8; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.vt-card.vt-validee { border-left-color: var(--sf-accent); }
.vt-card.vt-finalisee { border-left-color: #10b981; }
.vt-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Fil d'activité ---------- */
.feed { display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto; }
.feed-item { display: flex; gap: 11px; padding: 9px 4px; border-bottom: 1px dashed #eef1f8; }
.feed-item:last-child { border-bottom: 0; }
.feed-icon {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #e8f2ff; color: var(--sf-accent-dark); font-size: .78rem;
}
.feed-icon.is-comment { background: #fffbeb; color: #d97706; }
.feed-body { min-width: 0; }
.feed-site { font-weight: 700; font-size: .78rem; color: var(--sf-accent-dark); text-decoration: none; }
.feed-text { font-size: .82rem; line-height: 1.35; }
.feed-date { font-size: .7rem; color: #94a3b8; margin-top: 2px; }

.comment-box { display: flex; gap: 8px; }

/* ---------- Documents ---------- */
.upload-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fafbfe; border: 1px dashed var(--acc-pale,#bcd8ff); border-radius: 12px; padding: 12px; }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--sf-border); border-radius: 11px; padding: 10px 13px; }
.doc-item:hover { border-color: var(--acc-pale,#bcd8ff); }
.doc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--sf-accent-soft); color: var(--sf-accent-dark); display: grid; place-items: center; flex-shrink: 0; }
.doc-meta { min-width: 0; flex: 1; }
.doc-name { font-weight: 600; font-size: .85rem; color: var(--sf-text); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-name:hover { color: var(--sf-accent-dark); }
.doc-sub { font-size: .72rem; color: #94a3b8; }

.pill-count.sm { min-width: 20px; height: 20px; font-size: .68rem; }

/* ============================================================
   V3 — aperçu du site, onglets latéraux, rôles utilisateurs
   ============================================================ */

/* ---------- Aperçu du site (colonne gauche) ---------- */
.site-preview { position: relative; }
.preview-label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(15, 23, 42, .65); color: #fff; font-size: .68rem; font-weight: 600;
  border-radius: 7px; padding: 4px 10px;
}
.preview-img {
  height: 190px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #f4f6fb, #f4f6fb 12px, #eef1f8 12px, #eef1f8 24px);
  color: #cbd5e1; font-size: 3rem; overflow: hidden;
}
.preview-img img { width: 100%; height: 100%; object-fit: cover; }
.preview-upload { position: absolute; bottom: 10px; right: 10px; z-index: 2; margin: 0; }
.btn-photo {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(15, 23, 42, .65); color: #fff; transition: background .15s; margin: 0;
}
.btn-photo:hover { background: var(--sf-accent); }

/* ---------- Onglets latéraux (Activités / Info site) ---------- */
.side-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.side-tab {
  border: 1px solid var(--sf-border); background: #fff; border-radius: 9px;
  padding: 7px 12px; font-size: .78rem; font-weight: 600; color: #475569; transition: all .12s;
}
.side-tab:hover { border-color: var(--acc-pale,#bcd8ff); color: var(--sf-accent-dark); }
.side-tab.active { background: var(--sf-accent-soft); border-color: var(--acc-pale,#bcd8ff); color: var(--sf-accent-dark); }

.side-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #eef1f8;
  font-size: .72rem; color: #94a3b8;
}

/* ---------- Badges de rôle ---------- */
.badge-role {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
  border-radius: 20px; padding: 4px 11px; background: #f1f5f9; color: #64748b; white-space: nowrap;
}
.r-admin { background: #f5f3ff; color: #7c3aed; }
.r-surveyeur { background: #eff6ff; color: #2563eb; }
.r-poseur { background: #ecfdf5; color: #059669; }
.r-collaborateur { background: #f1f5f9; color: #475569; }
.r-client { background: #fffbeb; color: #d97706; }
.r-fournisseur { background: #fdf4ff; color: #c026d3; }

.user-avatar.sm { width: 32px; height: 32px; font-size: .72rem; background: var(--sf-accent-soft); color: var(--sf-accent-dark); }
.row-inactive td { opacity: .5; }

/* ============================================================
   V4 — design F2S : sidebar fine à icônes, topbar, hovers
   ============================================================ */

:root { --sf-sidebar-w: 72px; --sf-topbar-h: 64px; }

/* ---------- Sidebar fine ---------- */
.app-sidebar { width: var(--sf-sidebar-w); align-items: center; }
.sidebar-brand { padding: 16px 0 10px; display: grid; place-items: center; text-decoration: none; }
.sidebar-brand .brand-icon { transition: transform .18s, box-shadow .18s; }
.sidebar-brand:hover .brand-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 22px -6px var(--accent-a80,rgba(0, 113, 227, .8)); }

.sidebar-nav { width: 100%; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sidebar-nav .nav-item {
  width: 46px; height: 46px; padding: 0; margin: 0;
  display: grid; place-items: center; border-radius: 13px;
  transition: background .16s, color .16s, transform .16s;
}
.sidebar-nav .nav-item i { width: auto; font-size: 1.05rem; opacity: .85; }
.sidebar-nav .nav-item:hover { background: var(--sf-sidebar-hover); color: #fff; transform: translateY(-1px); }
.sidebar-nav .nav-item.active {
  background: linear-gradient(135deg, var(--accent-a32,rgba(0, 113, 227, .32)), var(--accent-a14,rgba(0, 113, 227, .14)));
  color: #fff; box-shadow: inset 0 0 0 1px var(--accent-a45,rgba(0, 113, 227, .45));
}
.nav-sep { width: 30px; height: 1px; background: rgba(148, 163, 184, .2); margin: 10px 0; }

.sidebar-footer {
  border-top: 1px solid rgba(148, 163, 184, .12);
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 14px;
}
.sidebar-footer .btn-logout { margin: 0; }
.version-badge { text-align: center; line-height: 1.1; }
.version-badge strong { display: block; color: #e2e8f0; font-size: .82rem; font-style: italic; }
.version-badge span { color: #475569; font-size: .62rem; }

/* ---------- Topbar ---------- */
.app-main { display: flex; flex-direction: column; margin-left: var(--sf-sidebar-w); padding: 0; }

.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--sf-topbar-h);
  display: flex; align-items: center; gap: 18px;
  background: #fff; border-bottom: 1px solid var(--sf-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 0 22px;
}

.topbar-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; min-width: 0; }
.topbar-title i { color: var(--sf-text); opacity: .8; }

/* Retour en arriere : pastille blanche filetee, comme les boutons ronds de la
   charte. Elle n'apparait que sur les ecrans qui ont un niveau superieur. */
.topbar-back {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: var(--sf-card-bg); border: 1px solid var(--sf-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  color: var(--sf-text); text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .18s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.topbar-back svg { width: 17px; height: 17px; }
.topbar-back:hover { background: var(--sf-surface-low); border-color: var(--sf-outline); color: var(--sf-text); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .28); }
.topbar-back:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.topbar-back:active { transform: scale(.92); }
.topbar-back[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .topbar-back, .topbar-back:active { transition: none; transform: none; }
}

.app-content { padding: 26px 30px 48px; }

/* ---------- Recherche globale ---------- */
.global-search { position: relative; flex: 1; max-width: 380px; margin: 0 auto; }
.gs-input { position: relative; display: flex; align-items: center; }
.gs-input i {
  position: absolute; left: 15px; color: #94a3b8; font-size: .85rem; pointer-events: none;
}
.gs-input input {
  width: 100%; border: 1px solid var(--sf-border); border-radius: 24px;
  padding: 9px 86px 9px 40px; font-size: .86rem; background: #fafbfe;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gs-input input:focus {
  outline: none; background: #fff; border-color: var(--sf-accent);
  box-shadow: 0 0 0 .2rem var(--accent-a12,rgba(0, 113, 227, .12));
}
.kbd {
  position: absolute; right: 10px;
  border: 1px solid var(--sf-border); border-bottom-width: 2px; border-radius: 7px;
  background: #fff; color: #64748b; font-size: .66rem; font-weight: 700; padding: 3px 8px;
  pointer-events: none;
}

.gs-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .3);
  max-height: 420px; overflow-y: auto; padding: 6px;
}
.gs-section {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: #94a3b8; font-weight: 700; padding: 8px 12px 4px;
}
.gs-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--sf-text);
  transition: background .12s;
}
.gs-item:hover { background: var(--sf-accent-soft); color: var(--sf-accent-dark); }
.gs-avatar {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .72rem; text-transform: uppercase;
  color: #1b1b1d; border: 1px solid rgba(15, 23, 42, .06);
}
.gs-main { min-width: 0; flex: 1; }
.gs-name { display: block; font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { display: block; font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-type { color: #cbd5e1; font-size: .78rem; }
.gs-empty { padding: 18px 12px; text-align: center; color: #94a3b8; font-size: .82rem; }

/* ---------- Chip utilisateur (topbar) ---------- */
.topbar-user { margin-left: auto; }
.topbar-user .user-chip {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid transparent; border-radius: 30px; padding: 5px 10px 5px 5px;
  transition: background .15s, border-color .15s;
}
.topbar-user .user-chip:hover { background: #f6f7fb; border-color: var(--sf-border); }
.topbar-user .user-avatar { width: 38px; height: 38px; font-size: .8rem; }
.topbar-user .user-name { color: var(--sf-text); display: block; font-size: .84rem; text-align: left; }
.topbar-user .user-role { color: var(--sf-text-muted); display: block; font-size: .7rem; text-align: left; text-transform: capitalize; }
.user-caret { font-size: .6rem; color: #94a3b8; }

/* ---------- Hovers & micro-interactions généralisés ---------- */
.counter-card { transition: transform .16s, box-shadow .16s; cursor: default; }
.counter-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(15, 23, 42, .18); }

.step-card { user-select: none; }
.step-card:hover { transform: translateY(-2px); }
.step-card:active { transform: translateY(0) scale(.98); }

.doc-item, .vt-item, .feed-item { transition: background .13s, border-color .13s; }
.feed-item:hover { background: #fafbff; border-radius: 10px; }

.chip:active, .side-tab:active { transform: scale(.96); }
.btn { transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px var(--accent-a60,rgba(0, 113, 227, .6)); }
.btn-primary:active { transform: translateY(0); }

.app-table tbody tr { transition: background .12s; }
.clickable-row { cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; }
.clickable-row:hover { background-color: #f8fafc; }
.badge-etape, .badge-status, .badge-role { transition: transform .12s; }
tr:hover .badge-etape { transform: scale(1.04); }

.card.panel { transition: box-shadow .18s; }

/* scrollbars fins */
.feed::-webkit-scrollbar, .gs-results::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb, .gs-results::-webkit-scrollbar-thumb { background: #d5dae6; border-radius: 6px; }

/* ---------- Page Mes VT ---------- */
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.vt-mission {
  background: #fff; border: 1px solid var(--sf-border); border-left: 4px solid var(--sf-accent);
  border-radius: 14px; padding: 16px; box-shadow: var(--sf-shadow);
  transition: transform .16s, box-shadow .16s;
}
@media (hover:hover) and (pointer:fine){.vt-mission:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .2); } }
.vt-mission.vt-finalisee { border-left-color: #10b981; opacity: .82; }
.vt-mission-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.vt-mission-site { font-weight: 700; color: var(--sf-text); text-decoration: none; }
@media (hover:hover) and (pointer:fine){.vt-mission-site:hover{ color: var(--sf-accent-dark); } }
.vt-mission-body { font-size: .82rem; }
.vt-line { display: flex; gap: 8px; color: #475569; margin-bottom: 5px; }
.vt-line i { color: #94a3b8; width: 14px; text-align: center; margin-top: 2px; }
.vt-dates { display: flex; flex-wrap: wrap; gap: 12px; font-size: .76rem; color: #64748b; margin: 8px 0; }
.vt-travail {
  background: #fafbfe; border: 1px dashed var(--sf-border); border-radius: 9px;
  padding: 8px 11px; font-size: .78rem; color: #475569; margin-bottom: 8px;
}
.vt-mission-form { border-top: 1px dashed var(--sf-border); padding-top: 10px; margin-top: 4px; }
.vt-mission-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* ---------- Responsive v4 ---------- */
@media (max-width: 991.98px) {
  .app-content { padding: 18px 14px 40px; }
  .topbar-title span { display: none; }
}

/* ============================================================
   V5 — Design Apple / Stripe & Refonte Vue Site (Polished)
   ============================================================ */

/* --- Améliorations Globales (Style Moderne Apple/Stripe) --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card.panel {
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01), 0 12px 24px -10px rgba(15, 23, 42, 0.04) !important;
  background: #ffffff;
}

.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 16px;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.85rem;
}

.btn-primary {
  background: var(--acc-bd,#0059b5);
  border-color: var(--acc-bd,#0059b5);
  color: #fff;
}
.btn-primary:hover {
  background: var(--acc-bd,#0059b5);
  border-color: var(--acc-bd,#0059b5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-secondary {
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #ffffff;
}
.btn-outline-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e2935;
}

.form-control, .form-select {
  border-radius: 10px;
  border-color: #e2e8f0;
  background-color: #f8fafc;
  font-size: 0.85rem;
  padding: 9px 12px;
  transition: all 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
  background-color: #ffffff;
  border-color: var(--acc-b,#0071e3);
  box-shadow: 0 0 0 3px var(--accent-a10,rgba(0, 113, 227, 0.1));
}

/* --- Layout Full Viewport Vue Site (Compense le main layout) --- */
.site-detail-container {
  position: absolute;
  top: var(--sf-topbar-h);
  left: var(--sf-sidebar-w);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
  z-index: 100;
}

/* En-tête de la page site (Sleek Apple style) */
.site-header {
  min-height: 72px;               /* fluide : les chips/boutons ne débordent plus */
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 24px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.site-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.site-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.site-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.btn-sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: grid;
  place-items: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sidebar-toggle:hover {
  background: #f8fafc;
  color: #1b1b1d;
  border-color: #cbd5e1;
}

.site-client-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.site-title-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.site-title-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.site-title-sub {
  font-size: 0.76rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.site-header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.site-hdr-badge {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-family: ui-monospace, monospace;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.circle-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.circle-action-btn:hover {
  background: #f8fafc;
  color: #1b1b1d;
  border-color: #cbd5e1;
}

.badge-version {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Corps de la page site */
.site-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Colonne Gauche (350px wide) */
.site-col-left {
  width: 350px;
  border-right: 1px solid rgba(15, 23, 42, 0.05);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
}

.left-photo-container {
  padding: 16px 16px 8px;
  flex-shrink: 0;
}
.left-photo-card {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.left-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.left-photo-placeholder {
  width: 100%;
  height: 100%;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 2.5rem;
}
.left-photo-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.left-photo-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.left-photo-btn:hover {
  background: var(--acc-bd,#0059b5);
}

/* Tabs: Prevents layout breaking */
.left-tabs-container {
  padding: 4px 16px 8px;
  flex-shrink: 0;
}
.left-tabs-pills {
  display: flex;
  gap: 2px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
}
.left-tab-pill {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.left-tab-pill.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.left-tab-pill i {
  font-size: 0.8rem;
}

/* Comment Box */
.left-comment-container {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.comment-hint {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-bottom: 6px;
}
.comment-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 10px;
}
.comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
}
.comment-composer input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 0.82rem;
  padding: 4px 0;
  color: #334155;
}
.comment-composer input::placeholder {
  color: #94a3b8;
}
.btn-comment-at {
  background: transparent;
  border: 0;
  color: var(--acc-b,#0071e3);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
}
.btn-comment-send {
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.btn-comment-send:hover {
  color: var(--acc-bd,#0059b5);
}

/* Scroll Feed Log */
.left-feed-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.modern-timeline {
  position: relative;
  padding-left: 20px;
}
.modern-timeline-line {
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #f1f5f9;
}
.modern-tl-item {
  position: relative;
  padding-bottom: 18px;
}
.modern-tl-item:last-child {
  padding-bottom: 0;
}
.modern-tl-marker {
  position: absolute;
  left: -20px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: all 0.2s;
}
.modern-tl-marker i {
  font-size: 0.5rem;
  display: none;
}
.modern-tl-item.is-comment .modern-tl-marker {
  border-color: #f59e0b;
  background: #fffbeb;
}
.modern-tl-item.is-log .modern-tl-marker {
  border-color: #3b82f6;
  background: #eff6ff;
}
.modern-tl-marker-active {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}
.modern-tl-item.is-comment .modern-tl-marker-active {
  background: #d97706;
}
.modern-tl-item.is-log .modern-tl-marker-active {
  background: #2563eb;
}

.modern-tl-content {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #334155;
}
.modern-tl-meta {
  color: #94a3b8;
  font-size: 0.7rem;
  margin-bottom: 2px;
}
.modern-tl-user {
  font-weight: 700;
  color: #1b1b1d;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

.modern-info-list {
  display: flex;
  flex-direction: column;
}
.modern-info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
}
.modern-info-row:last-child {
  border-bottom: 0;
}
.modern-info-lbl {
  color: #64748b;
  font-weight: 500;
}
.modern-info-val {
  color: #0f172a;
  font-weight: 600;
}

.left-foot-date {
  font-size: 0.7rem;
  color: #94a3b8;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  margin-top: 12px;
}

/* Colonne Droite */
.site-col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.right-stepper-container {
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}

.modern-stepper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.modern-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.modern-step-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-2px);
}
.modern-step-card:active {
  transform: translateY(0);
}

.modern-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.modern-step-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1b1b1d;
  line-height: 1.25;
}

.modern-step-badge {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid transparent;
}

/* Stepper States style matching mockup screen */
/* Completed Step (Blue) */
.modern-step-card.is-completed {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.modern-step-card.is-completed .modern-step-icon {
  background: #dbeafe;
  color: #2563eb;
}
.modern-step-card.is-completed .modern-step-badge {
  background: #dbeafe;
  color: #1e40af;
}

/* Active Step (Highlighted Orange/Yellow) */
.modern-step-card.is-active {
  background: #ffffff;
  border: 2px solid #f97316;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.08);
}
.modern-step-card.is-active .modern-step-icon {
  background: #ffedd5;
  color: #ea580c;
}
.modern-step-card.is-active .modern-step-badge {
  background: #ffedd5;
  color: #c2410c;
}

/* Ignored Step (Greyed out) */
.modern-step-card.is-ignored {
  opacity: 0.55;
  background: #f1f5f9;
}
.modern-step-card.is-ignored .modern-step-icon {
  background: #e2e8f0;
  color: #94a3b8;
}
.modern-step-card.is-ignored .modern-step-badge {
  background: #e2e8f0;
  color: #64748b;
}

/* Document Step Badge */
.modern-step-card.is-docs .modern-step-badge {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
  border-color: #bfdbfe;
}

/* Active Selection Highlight border */
.modern-step-card.active-selection {
  box-shadow: 0 0 0 2px var(--acc-bd,#0059b5);
  border-color: var(--acc-bd,#0059b5) !important;
}

/* Scroll Area for Step Contents */
.right-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* --- Premium Step Card matching screenshot layout --- */
.step-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.step-content-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}
.step-content-state-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  background: #ffedd5;
  color: #c2410c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #fed7aa;
}

.premium-step-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 12px 24px -10px rgba(15, 23, 42, 0.04);
  margin-bottom: 24px;
  overflow: hidden;
  border-left: 4px solid #f97316; /* active stage accent */
}
.premium-step-card.c-terminee { border-left-color: #10b981; }
.premium-step-card.c-bloquee { border-left-color: #ef4444; }
.premium-step-card.c-a_faire { border-left-color: #94a3b8; }

.premium-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.premium-card-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.premium-card-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff7ed;
  color: #ea580c;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.premium-step-card.c-terminee .premium-card-icon-circle { background: #ecfdf5; color: #059669; }
.premium-step-card.c-bloquee .premium-card-icon-circle { background: #fef2f2; color: #dc2626; }
.premium-step-card.c-a_faire .premium-card-icon-circle { background: #f1f5f9; color: #475569; }

.premium-card-title-text {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1b1b1d;
}
.premium-card-ref-badge {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  background: #f1f5f9;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.premium-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.premium-card-act-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s;
}
.premium-card-act-btn:hover {
  background: #e2e8f0;
  color: #1b1b1d;
}

.premium-card-body {
  padding: 20px;
}

.premium-card-flex {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* Blue Box on Left matching screen */
.premium-module-open-box {
  width: 240px;
  height: 140px;
  border-radius: 12px;
  background: #f4f9ff;
  border: 1px solid #dbeafe;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.premium-module-open-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  background: #ebf4ff;
  border-color: #bfdbfe;
}
.premium-open-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #2563eb;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06);
}
.premium-open-link-text {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: underline;
}
.premium-open-provider {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 4px;
}

/* Dates box on Right matching screen */
.premium-dates-column {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.premium-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 12px;
}
.premium-date-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.premium-date-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.85rem;
}
.premium-date-details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.premium-date-lbl {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}
.premium-date-val {
  font-size: 0.88rem;
  color: #0f172a;
  font-weight: 700;
}

.premium-card-footer {
  padding: 16px 20px;
  background: #fafbfe;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.btn-red-outline {
  border: 1px solid #fecaca;
  color: #dc2626;
  background: #fef2f2;
  padding: 8px 16px;
}
.btn-red-outline:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.btn-valider-card {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 8px 16px;
}
.btn-valider-card.ready {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.btn-valider-card.ready:hover {
  background: #059669;
  border-color: #059669;
}

/* Step Documents Section matching screen */
.step-docs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 12px;
}
.step-docs-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1b1b1d;
  margin: 0;
}

.modern-doc-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modern-doc-card-item {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s;
}
.modern-doc-card-item:hover {
  border-color: #cbd5e1;
}

/* Modals Modern UI overrides */
.modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25);
}
.modal-header {
  border-bottom: 1px solid #f1f5f9;
  padding: 18px 24px;
}
.modal-footer {
  border-top: 1px solid #f1f5f9;
  padding: 14px 24px;
}

/* ==========================================================================
   VT Cartography Module — Styles (Premium Apple/Stripe Design)
   ========================================================================== */

/* Override: remove app-content padding when VT map is displayed */
.app-content:has(.vt-module-container) {
  padding: 0 !important;
  overflow: hidden;
}
.app-content:has(.vt-module-container) > main {
  height: 100%;
}

/* Layout global 100% viewport */
.vt-module-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: #fdfdfd;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Barre du module VT : sur tablette chaque pixel de hauteur revient a la
   carte. Seul l'air autour des boutons se resserre (14 -> 9 px) ; les boutons
   eux-memes gardent leur taille, leur mot et leur place.
   Matiere : blanc translucide + flou de fond, comme une barre systeme. Le
   repli @supports rend un blanc plein la ou le flou n'existe pas. */
.vt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 24px;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  z-index: 100;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vt-header { background: #ffffff; }
}

/* La carte passe SOUS la barre : c'est ce qui donne au verre quelque chose a
   flouter, et la carte gagne toute la hauteur de la barre.
   Le calage tient en trois gestes et ne touche a rien d'autre :
     - la barre sort du flux et se pose sur le module ;
     - la zone du dessous reprend exactement sa hauteur en marge interne, donc
       la liste et le cadre de la carte ne bougent pas d'un pixel ;
     - seule la carte reprend cette hauteur en marge negative pour se glisser
       sous la barre. Elle deborde dans la marge interne de la zone, qui ne la
       rogne pas (overflow rogne au bord de la boite de remplissage).
   Les panneaux flottants sont accroches au cadre de la carte, qui n'a pas
   bouge : ils restent ou ils sont. En dessous de 901 px la barre revient dans
   le flux, car elle passe sur deux lignes et la liste passe au-dessus de la
   carte. La mesure exacte vit dans --vt-head-h, tenue par vtBarreVerre()
   (views/vt-detail.ejs) ; la valeur ci-dessous n'est qu'un repli. */
.vt-module-container { position: relative; --vt-head-h: 54px; }
@media (min-width: 901px) {
  .vt-header { position: absolute; top: 0; left: 0; right: 0; }
  .vt-body { padding-top: var(--vt-head-h); }
  .vt-map-wrapper > #map { margin-top: calc(-1 * var(--vt-head-h)); }
  /* garde : une commande Leaflet ancree en haut resterait sous la barre */
  .vt-map-wrapper > #map .leaflet-top { padding-top: var(--vt-head-h); }

  /* --- liste en verre --- exactement le meme geste, sur le cote : la liste
     sort du flux, la zone recupere sa largeur en marge interne, et seule la
     carte reprend cette largeur pour se glisser dessous. Plus transparente
     que la barre : c'est une grande surface, et les cartes de repere, elles,
     restent opaques — on lit les cartes, c'est le fond entre elles qui
     s'ouvre. Liste repliee : plus rien a compenser. */
  .vt-body { padding-left: var(--vt-side); }
  .vt-body.vt-liste-pliee { padding-left: 0; }
  /* « !important » sur les fonds seulement : design-system.css repeint
     .vt-sidebar plus loin dans la chaine, et .vt-sidebar-head est repeint
     plus bas dans ce fichier meme. On ne peut leur repondre qu'ainsi.
     Le bord droit reste celui de la charte : il est deja pose ailleurs. */
  .vt-sidebar {
    position: absolute; left: 0; top: var(--vt-head-h); bottom: 0;
    background: rgba(255, 255, 255, .34) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
  }
  .vt-sidebar-head, .vt-sidebar-list { background: transparent !important; }
  /* La largeur de #map est posee a 100 % : une marge negative la deplacerait
     sans l'agrandir, et il resterait autant de vide a droite. On rend donc
     a la carte, en largeur, ce qu'on lui prend en marge. */
  .vt-map-wrapper > #map { margin-left: calc(-1 * var(--vt-side));
    width: calc(100% + var(--vt-side)); }
  .vt-body.vt-liste-pliee .vt-map-wrapper > #map { margin-left: 0; width: 100%; }
  /* garde : une commande Leaflet ancree a gauche resterait sous la liste */
  .vt-map-wrapper > #map .leaflet-left { padding-left: var(--vt-side); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vt-sidebar { background: #ffffff !important; }
}

.vt-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748b;
  background: #f1f5f9;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
}
@media (hover:hover) and (pointer:fine){.vt-back-btn:hover{
  background: #e2e8f0;
  color: #0f172a;
  transform: translateX(-2px);
} }



.vt-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.vt-body {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

/* Sidebar gauche */
.vt-sidebar {
  width: 380px;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 20;
}

.vt-sidebar-head {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: #ffffff;
}

.vt-sidebar-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafbfe;
}

/* Custom Scrollbar */
.vt-sidebar-list::-webkit-scrollbar {
  width: 6px;
}
.vt-sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}
.vt-sidebar-list::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}
@media (hover:hover) and (pointer:fine){.vt-sidebar-list::-webkit-scrollbar-thumb:hover{
  background: #cbd5e1;
} }

/* Repère Card en sidebar */
.repere-item-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 16px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01);
}

@media (hover:hover) and (pointer:fine){.repere-item-card:hover{
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
} }

.repere-item-card.active {
  border-color: var(--acc-b,#0071e3);
  background: #ffffff;
  box-shadow: 0 12px 30px -10px var(--accent-a18,rgba(0, 113, 227, 0.18)), 0 2px 8px -2px var(--accent-a6,rgba(0, 113, 227, 0.06));
}

.repere-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.repere-badge {
  background: var(--acc-b,#0071e3);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.72rem;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.repere-item-card.active .repere-badge {
  background: #10b981;
}

.repere-action-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.repere-action-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.repere-preview-img {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 4px;
}

.repere-coords {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

/* Empty State */
.vt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    /* v722 : le fond etait TRANSPARENT et le panneau laisse passer la carte —
       un texte gris clair sur une photo satellite ne se lit pas. Fond blanc
       (a peine translucide) : le message se detache quelle que soit la carte
       derriere, et le pointille reste visible. */
    background: rgba(255, 255, 255, 0.92);
    border: 2px dashed #cbd5e1;
    border-radius: 20px;
    margin: 10px 0;
}
.vt-empty-state i {
  font-size: 2rem;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.vt-empty-state p {
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px 0;
  font-size: 0.88rem;
}
.vt-empty-state span {
    font-size: 0.75rem;
    /* v722 : #94a3b8 (gris tres clair) etait illisible ; ce gris fonce passe
       tres largement les seuils de lisibilite sur le fond blanc ci-dessus. */
    color: #475569;
    line-height: 1.45;
}

/* Carte Leaflet (Right side) */
.vt-map-wrapper {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#map {
  width: 100%;
  flex: 1;
  min-height: 300px;
  background: #cbd5e1;
  z-index: 1;
  transition: cursor 0.2s ease;
}
#map.crosshair-cursor,
#map.crosshair-cursor .leaflet-grab,
#map.crosshair-cursor .leaflet-container {
  cursor: crosshair !important;
}

/* Float tools on map */
.map-float-tools {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.map-btn-tool {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.95rem;
}

@media (hover:hover) and (pointer:fine){.map-btn-tool:hover{
  color: #0f172a;
  transform: scale(1.05);
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
} }

.map-btn-tool.active {
  background: var(--acc-b,#0071e3);
  color: #ffffff;
  border-color: var(--acc-b,#0071e3);
  box-shadow: 0 4px 12px var(--accent-a35,rgba(0, 113, 227, 0.35));
}

.map-tool-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 8px;
}

.map-btn-tool.loading i {
  animation: fa-spin 2s infinite linear;
}
.map-btn-tool.flash {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  animation: map-pulse-green 0.8s ease-out;
}
@keyframes map-pulse-green {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Bottom toolbar inside map (Stripe/Apple inspired floating card) */
.map-bottom-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 650;
  width: auto;
  max-width: min(92%, 760px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 8px 12px 8px 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-section {
  width: 100%;
}

.bar-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 2px;
}

.bar-subtitle {
  font-size: 0.78rem;
  color: #64748b;
}

/* Action buttons */




/* Banner Alert in Add Mode */


@keyframes pulse-red-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




/* Edit Mode Layout */
.repere-badge-edit {
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-btn-save {
  background: #10b981;
  color: #ffffff;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}
@media (hover:hover) and (pointer:fine){.vt-btn-save:hover{
  background: #059669;
  transform: translateY(-1px);
} }

.vt-btn-ghost {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (hover:hover) and (pointer:fine){.vt-btn-ghost:hover{
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
} }

.bar-edit-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #64748b;
  font-size: 0.74rem;
}

/* Custom Marker Leaflet */
.custom-div-icon {
  position: relative;
  text-align: center;
}
/* La bulle est plus petite qu'avant (26 au lieu de 30) : sur un releve dense
   on en voit plus a l'ecran. Sa pointe reste calee au meme endroit — c'est
   elle qui designe le point exact. */
.marker-pin {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--acc-b,#0071e3);
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -13px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px var(--accent-a30,rgba(0, 113, 227, 0.3));
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Bulle plus petite, mais numero PLUS GROS : c'est lui qu'on lit.
   La goutte occupe 4..34 dans la boite : son centre est a 19. Le numero est
   pose dessus, a peine au-dessus — sinon il monte dans le bord blanc et se
   perd, surtout a deux chiffres. */
.custom-div-icon span {
  position: absolute;
  width: 30px;
  font-size: 12.5px;
  line-height: 14px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  left: 0;
  top: 10px;
  font-family: 'Inter', sans-serif;
}
.custom-div-icon.selected .marker-pin {
  background: #10b981;
  transform: rotate(-45deg) scale(1.15);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* ---------- Fullscreen VT/Site Module Override ---------- */
.app-shell.fullscreen-vt .app-sidebar,
.app-shell.fullscreen-vt .app-topbar {
  display: none !important;
}
.app-shell.fullscreen-vt .app-main {
  margin-left: 0 !important;
}

/* Specific to VT map page */
.app-shell.fullscreen-vt:has(.vt-module-container) .app-main,
.app-shell.fullscreen-vt:has(.vt-module-container) .app-content {
  padding: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.app-shell.fullscreen-vt:has(.vt-module-container) .vt-module-container {
  height: 100vh !important;
}

/* Specific to Site details page */
.app-shell.fullscreen-vt:not(:has(.vt-module-container)) .app-content {
  padding: 24px 32px 48px !important;
  min-height: 100vh;
  background: var(--sf-body-bg);
}

/* ---------- Map Status Overlay (Stripe Style) ---------- */
.map-status-overlay {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  width: 90%;
  max-width: 480px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.04);
  pointer-events: auto;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.status-indicator i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.status-details {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.status-details strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.status-details span {
  font-size: 0.72rem;
  color: #64748b;
}

/* Offline state */
.status-indicator.offline-mode {
  border-color: rgba(234, 179, 8, 0.2);
  background: rgba(254, 252, 232, 0.92);
}
.status-indicator.offline-mode i {
  color: #ca8a04;
}

/* Syncing state */
.status-indicator.syncing-mode {
  border-color: var(--accent-a20,rgba(0, 113, 227, 0.2));
  background: rgba(245, 243, 255, 0.92);
}
.status-indicator.syncing-mode i {
  color: var(--acc-bd,#0059b5);
}

/* Synced state */
.status-indicator.synced-mode {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(240, 253, 250, 0.92);
}
.status-indicator.synced-mode i {
  color: #059669;
}

/* Micro-animations */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}