* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* Zone haute en gris chaud, le reste en blanc — signature du thème "minimal".
     Fondu centré au milieu de l'écran, fixé au viewport (attachment: fixed)
     pour que le fond ne bouge pas : le contenu défile par-dessus. */
  background: linear-gradient(to bottom, var(--color-bg-top) 0%, var(--color-bg-top) 35%, var(--color-bg) 65%, var(--color-bg) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 17px; font-weight: 600; color: var(--color-text); }
p { margin: 0 0 var(--space-3); }

/* ---------- Header ---------- */

.app-header {
  background: var(--color-bg-top);
  position: relative;
  z-index: 20;
}

.app-header__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
}

.app-header__spacer { flex: 1; }

/* Bouton Menu : pilule "☰ Menu ▾" sur bureau, rond hamburger sur mobile. */

.app-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.app-header__menu-btn:hover,
.app-header__menu-btn[aria-expanded='true'] { background: var(--color-surface); }
.app-header__menu-btn svg { width: 16px; height: 16px; flex: none; }
.app-header__menu-chevron { font-size: 10px; color: var(--color-text-muted); transition: transform 0.15s ease; }
.app-header__menu-btn[aria-expanded='true'] .app-header__menu-chevron { transform: rotate(180deg); }

.app-header__menu {
  position: absolute;
  top: calc(100% - 6px);
  left: var(--space-5);
  width: min(760px, calc(100vw - 2 * var(--space-5)));
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-float);
  z-index: 40;
}

.app-header__menu.is-open { display: flex; }

.app-header__menu a,
.app-header__menu button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.app-header__menu a svg { width: 18px; height: 18px; flex-shrink: 0; }

.app-header__menu a:hover,
.app-header__menu button:hover { background: var(--color-surface-hollow); color: var(--color-text); }
.app-header__menu a.active { background: var(--color-ink); color: var(--color-ink-contrast); }

.app-header__menu-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.app-header__menu-group { display: flex; flex-direction: column; gap: 2px; }

.app-header__menu-section {
  padding: var(--space-1) var(--space-4) var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.app-header__menu-backdrop { display: none; }
.app-header__menu-head { display: none; }


.app-header__logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.app-header__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.app-header__brand-sub { color: var(--color-text-faint); }

.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.app-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.app-header__identity { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; font-weight: 600; }
.app-header__role { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }

.app-header__user .app-header__theme {
  height: 36px;
  width: 36px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
}

.app-header__notif-btn { position: relative; display: flex; align-items: center; justify-content: center; }
.app-header__notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-status-danger);
  border: 1.5px solid var(--color-surface);
}

/* Menu profil : ouvert par clic sur l'avatar, plutôt qu'une identité + un
   bouton "Déconnexion" à plat dans la barre — regroupe nom, Paramètres et
   déconnexion, et remplace aussi le doublon qui vivait dans le tiroir mobile
   (menu hamburger = navigation pure désormais). */
.app-header__profile { position: relative; }
.app-header__profile-btn { padding: 0; border: none; background: none; border-radius: var(--radius-pill); cursor: pointer; line-height: 0; }

.app-header__profile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 70;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.app-header__profile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.app-header__profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border-soft);
}

.app-header__profile-menu a,
.app-header__profile-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.app-header__profile-menu a:hover,
.app-header__profile-menu button:hover { background: var(--color-surface-hollow); }
.app-header__profile-menu svg { flex-shrink: 0; color: var(--color-text-muted); }

@media (max-width: 960px) {
  .app-header__brand { display: none; }
}

/* ---------- Barre date + tâches (DateTaskBar du thème minimal), sous la barre de nav ---------- */

.app-datebar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-5) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Regroupe cercle + libellé + bouton tâches + icône calendrier comme un seul
   bloc rigide : au scroll (mobile), c'est ce bloc entier qui se rétrécit et
   se déplace d'une seule pièce vers le header — jamais ses enfants
   indépendamment (voir body.is-scrolled plus bas et layout.js). */
.app-datebar__groupe { display: flex; align-items: center; gap: var(--space-4); }

.app-datebar__circle {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.app-datebar__label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.app-datebar__divider { width: 1px; height: 40px; background: var(--color-border); }

.app-datebar__tasks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 16px 14px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.app-datebar__tasks:hover { background: var(--color-accent-hover); }
.app-datebar__tasks svg { width: 16px; height: 16px; }

.app-datebar__calendar {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  text-decoration: none;
}

.app-datebar__calendar:hover { background: var(--color-surface-hollow); }
.app-datebar__calendar svg { width: 18px; height: 18px; }

.app-datebar__dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.app-datebar__spacer { flex: 1; }

/* Accroche IA + micro (AIGreetingBanner du thème minimal) : déclencheur du Copilote. */

.app-aibanner { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }

.app-aibanner__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.app-aibanner__text form { width: 100%; min-width: 0; }

.app-aibanner__line1,
.app-aibanner__line2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: inherit;
}

.app-aibanner__line1 {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.app-aibanner__line2 {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  caret-color: var(--color-accent);
}

.app-aibanner__line2::placeholder { color: var(--color-text-faint); }
.app-aibanner__line2:focus { outline: none; }

.app-aibanner__mic {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.app-aibanner__mic:hover { box-shadow: 0 6px 20px rgba(17, 23, 39, 0.12); transform: translateY(-1px); }
.app-aibanner__mic svg { width: 24px; height: 24px; }

@media (max-width: 960px) {
  .app-aibanner__line1, .app-aibanner__line2 { font-size: 22px; }
  .app-aibanner__mic { width: 60px; height: 60px; }
}

/* ---------- Layout ---------- */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}

.page__header h1 { margin-bottom: var(--space-1); }
.page__subtitle { color: var(--color-text-muted); font-size: 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

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

/* ---------- Card / widget ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.card--flat { border: none; box-shadow: none; padding: 0; }

/* ---------- Paramètres : boutons en carte (icône + nom en dessous), même
   disposition que les cartes du menu mobile (.app-header__menu a) mais en
   version claire pour une page normale plutôt que le tiroir sombre flouté. ---------- */

.icon-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 720px) {
  .icon-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 96px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-card:hover { border-color: var(--color-text-muted); background: var(--color-surface-hollow); }
.icon-card svg { width: 24px; height: 24px; color: var(--color-text-muted); flex-shrink: 0; }

/* ---------- Paramètres : notifications (statut push + préférences) ---------- */

.push-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-hollow);
}
.push-status__text { font-size: 13px; color: var(--color-text-muted); }

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.pref-row__label { font-size: 14px; font-weight: 500; color: var(--color-text); }
.pref-row__desc { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); }

.pref-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.pref-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pref-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
  pointer-events: none;
}
.pref-toggle__track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--surf-blanc);
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pref-toggle input:checked + .pref-toggle__track { background: var(--color-accent); }
.pref-toggle input:checked + .pref-toggle__track::before { transform: translateX(18px); }

.card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title h2 { margin: 0; }

.card__title a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.card__title a:hover { color: var(--color-text); background: var(--color-surface-hollow); }

.empty-state {
  color: var(--color-text-faint);
  font-size: 13px;
  padding: var(--space-3) 0;
}

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 14px;
}

.list-row:last-child { border-bottom: none; }
.list-row--flush { border-bottom: none; padding-bottom: var(--space-1); }
.list-row__title { font-weight: 500; }
.list-row__meta { color: var(--color-text-muted); font-size: 12px; }
.list-row__value { color: var(--color-text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }

/* ---------- Suivi : devis signés, mini tendance (même esprit que le
   sparkline CA de Comptabilité, en compact) ---------- */

.devis-trend__spark { display: block; width: 100%; height: 44px; margin-top: var(--space-2); }
.devis-trend__sub { margin: var(--space-1) 0 0; font-size: 12px; color: var(--color-text-muted); }

/* ---------- Suivi : projets par étape, bulles concentriques ---------- */

.stage-bubbles__title { margin: 0 0 var(--space-4); font-size: 15px; font-weight: 600; color: var(--color-text); }

.stage-bubbles__stage {
  position: relative;
  width: min(220px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}

.stage-bubbles__bubble {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  padding-top: 10%;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

.stage-bubbles__bubble--1 { width: 100%; height: 100%; background: #FBE0D6; color: #B45333; }
.stage-bubbles__bubble--2 { width: 75%; height: 75%; background: #F6B79B; color: #7A3115; }
.stage-bubbles__bubble--3 { width: 50%; height: 50%; background: #EE8358; color: #ffffff; }
.stage-bubbles__bubble--4 { width: 28%; height: 28%; background: var(--color-accent); color: var(--color-accent-contrast); }

.stage-bubbles__legend { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-4); }
.stage-bubbles__legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--color-text-muted); }
.stage-bubbles__legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-bubbles__legend-dot--1 { background: #FBE0D6; }
.stage-bubbles__legend-dot--2 { background: #F6B79B; }
.stage-bubbles__legend-dot--3 { background: #EE8358; }
.stage-bubbles__legend-dot--4 { background: var(--color-accent); }

/* ---------- Suivi : anneau de complétion des tâches du jour ---------- */

.growth-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.growth-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.growth-ring__svg circle:last-child { transition: stroke-dashoffset 0.6s ease; }
.growth-ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.growth-ring__pct { margin: 0; font-weight: 700; color: var(--color-text); }

.growth-ring--header { width: 46px; height: 46px; flex-shrink: 0; }
.growth-ring--header .growth-ring__pct { font-size: 11px; }

/* En-tête de la liste des tâches : pas de .card (les tâches en dessous en
   sont déjà) — juste un titre + anneau, à plat sur le fond de page. */
.tache-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.tache-section-header .stat { margin: 0; }

/* Mêmes .tabs que les filtres de statut Devis/Facturation — juste empilées
   plutôt que sur une seule ligne, une rangée par critère. Repliées par
   défaut (même mécanique grid-rows que .tache-item__detail-wrap) : trois
   rangées de .tabs prennent trop de place affichées en permanence. */
.tache-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: var(--space-1) 0;
  margin-bottom: var(--space-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}
.tache-filters-toggle:hover { color: var(--color-text); }
.tache-filters-toggle__chevron { transition: transform 0.2s ease; }
.tache-filters-toggle.is-open .tache-filters-toggle__chevron { transform: rotate(180deg); }

.tache-filters-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.tache-filters-wrap.is-open { grid-template-rows: 1fr; }
.tache-filters-inner { overflow: hidden; min-height: 0; }

.tache-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding-top: var(--space-1); }
.tache-filters .tabs { margin-bottom: 0; }

/* ---------- Suivi : tâches du jour, en accordéon (même mécanique que
   .demarche-item — voir Administratif) avec assignation, et un chrono qui
   démarre/s'arrête sur glissement (persisté en base via debut_chrono, donc
   continue de tourner même en quittant l'app — jamais un minuteur JS). ---------- */

.tache-list { display: flex; flex-direction: column; gap: var(--space-3); }

.tache-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.tache-item__bandeau {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease;
}

/* Même bloc date que .demarche-item__date (Administratif/Comptabilité) : le
   jour de l'échéance en gros plutôt qu'un simple indicateur de statut — la
   couleur porte l'urgence (retard/aujourd'hui/à venir), un halo pulsé
   pendant que le chrono tourne. */
.tache-item__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; flex-shrink: 0; }
.tache-item__jour-nb { font-size: 24px; font-weight: 700; line-height: 1; color: var(--color-text); transition: color 0.2s ease; }
.tache-item__jour-nom { margin-top: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); transition: color 0.2s ease; }

.tache-item__date--danger .tache-item__jour-nb, .tache-item__date--danger .tache-item__jour-nom { color: var(--color-status-danger); }
.tache-item__date--warning .tache-item__jour-nb, .tache-item__date--warning .tache-item__jour-nom { color: var(--color-accent); }
.tache-item__date--success .tache-item__jour-nb, .tache-item__date--success .tache-item__jour-nom { color: var(--color-status-success); }

.tache-item__date--pulse { border-radius: var(--radius); animation: tache-pulse 1.6s ease-in-out infinite; }

@keyframes tache-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-light); }
  50% { box-shadow: 0 0 0 6px var(--color-accent-light); }
}

.tache-item__titre-bloc { flex: 1; min-width: 0; }
.tache-item__titre { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); transition: color 0.2s ease; }
.tache-item.is-termine .tache-item__titre { color: var(--color-text-muted); text-decoration: line-through; }
.tache-item__meta { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); transition: color 0.2s ease; }
.tache-item__chrono { font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 600; }
/* Noir en clair / blanc en sombre, toujours, quel que soit le fond derrière
   (piste du slide ou bouton) — pas le rouge/blanc contextuel utilisé pour le
   bandeau ouvert (règle ci-dessous, désormais bien scopée au bandeau),
   sinon illisible sur la piste claire du slide. */
.tache-item__chrono--big { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); }

.tache-item__assignee-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.tache-item.is-open .tache-item__assignee-avatar { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.tache-item__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.tache-item.is-open .tache-item__chevron { transform: rotate(180deg); }

.tache-item.is-open .tache-item__bandeau { background: var(--color-accent); }
.tache-item.is-open .tache-item__titre,
.tache-item.is-open .tache-item__chevron { color: var(--color-accent-contrast); }
.tache-item.is-open .tache-item__meta { color: rgba(255, 255, 255, 0.75); }
.tache-item.is-open .tache-item__bandeau .tache-item__chrono { color: #ffffff; }
.tache-item.is-open .tache-item__jour-nb,
.tache-item.is-open .tache-item__jour-nom { color: var(--color-accent-contrast); }

.tache-item__detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.tache-item.is-open .tache-item__detail-wrap { grid-template-rows: 1fr; }
.tache-item__detail { overflow: hidden; min-height: 0; }
.tache-item__detail-inner { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.tache-item__description { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text); }

.tache-item__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tache-item__duree { font-size: 13px; color: var(--color-text-muted); }
.tache-item__footer { display: flex; justify-content: flex-end; margin-top: var(--space-1); }

/* ---------- Suivi : historique des conversations Copilote, en cartes ---------- */

.conversation-list { display: flex; flex-direction: column; gap: var(--space-3); }

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.conversation-item:hover { border-color: var(--color-border); background: var(--color-surface-hollow); }

.conversation-item__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conversation-item__icone svg { width: 18px; height: 18px; }
.conversation-item__icone--texte { background: color-mix(in srgb, var(--color-status-info) 14%, transparent); color: var(--color-status-info); }
.conversation-item__icone--vocal { background: var(--color-accent-light); color: var(--color-accent); }

.conversation-item__corps { flex: 1; min-width: 0; }
.conversation-item__apercu {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.conversation-item__vide { color: var(--color-text-muted); font-style: italic; }
.conversation-item__meta { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); }

.conversation-item__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); }

/* ---------- Transferts : dépôt de documents type WeTransfer, en accordéon
   (même mécanique que .tache-item) ---------- */

.colis-list { display: flex; flex-direction: column; gap: var(--space-3); }

.colis-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.colis-item__bandeau {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease;
}

.colis-item__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-accent-light);
  color: var(--color-accent);
  transition: background 0.2s ease, color 0.2s ease;
}
.colis-item__icone svg { width: 18px; height: 18px; }
.colis-item.is-open .colis-item__icone { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.colis-item__corps { flex: 1; min-width: 0; }
.colis-item__titre-ligne { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.colis-item__titre { font-size: 15px; font-weight: 600; color: var(--color-text); transition: color 0.2s ease; }
.colis-item__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-muted); transition: color 0.2s ease; }

.colis-item__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.colis-item.is-open .colis-item__chevron { transform: rotate(180deg); }

.colis-item.is-open .colis-item__bandeau { background: var(--color-accent); }
.colis-item.is-open .colis-item__titre,
.colis-item.is-open .colis-item__chevron { color: var(--color-accent-contrast); }
.colis-item.is-open .colis-item__meta { color: rgba(255, 255, 255, 0.75); }

.colis-item__detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.colis-item.is-open .colis-item__detail-wrap { grid-template-rows: 1fr; }
.colis-item__detail { overflow: hidden; min-height: 0; }
.colis-item__detail-inner { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.colis-item__message { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text); font-style: italic; }

.colis-item__fichiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.colis-item__fichier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: var(--space-2) 4px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-hollow);
  border: 1px solid var(--color-border-soft);
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
  transition: border-color 0.15s ease, background 0.2s ease, transform 0.15s ease;
}
.colis-item__fichier:hover { border-color: var(--color-accent); background: var(--color-accent-light); transform: translateY(-2px); }

.colis-item__fichier.is-telecharge { border-color: var(--color-status-success); background: color-mix(in srgb, var(--color-status-success) 12%, var(--color-surface-hollow)); }
.colis-item__fichier.is-telecharge:hover { border-color: var(--color-status-success); background: color-mix(in srgb, var(--color-status-success) 18%, var(--color-surface-hollow)); }
.colis-item__fichier.is-telecharge .colis-item__fichier-icone { color: var(--color-status-success); }

.colis-item__fichier-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.colis-item__fichier-icone svg { width: 22px; height: 22px; }

.colis-item__fichier-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-status-success);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.colis-item__fichier-check svg { width: 8px; height: 8px; }
.colis-item__fichier.is-telecharge .colis-item__fichier-check { opacity: 1; transform: scale(1); }

/* Animation jouée au clic (déclenchement du téléchargement natif) : l'icône
   "tombe" légèrement puis rebondit, le badge vert apparaît avec un petit pop. */
.colis-item__fichier.is-downloading .colis-item__fichier-icone { animation: colis-fichier-bounce 0.6s ease; }
@keyframes colis-fichier-bounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(5px) scale(0.9); }
  55% { transform: translateY(-6px) scale(1.08); }
  80% { transform: translateY(1px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}
.colis-item__fichier.is-downloading .colis-item__fichier-check { animation: colis-fichier-check-pop 0.5s ease 0.15s backwards; }
@keyframes colis-fichier-check-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  65% { opacity: 1; transform: scale(1.2) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.colis-item__fichier-nom {
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  word-break: break-word;
}
.colis-item__fichier-taille { font-size: 10px; color: var(--color-text-muted); white-space: nowrap; }

.colis-item__destinataires { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--color-border-soft); }
.colis-item__destinataire { font-size: 12px; color: var(--color-text-muted); }
.colis-item__destinataire--ok { color: var(--color-status-success); }

.colis-item__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.colis-item__fichier.is-loading { opacity: 0.5; pointer-events: none; }

/* ---------- Rappels personnalisés (Paramètres → Rappels) ---------- */

.rappel-list { display: flex; flex-direction: column; gap: var(--space-3); }

.rappel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}
.rappel-item.is-envoye { opacity: 0.6; }

.rappel-item__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.rappel-item__icone svg { width: 18px; height: 18px; }

.rappel-item__corps { flex: 1; min-width: 0; }
.rappel-item__titre { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.rappel-item__meta { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); }
.rappel-item__message { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text); }

/* ---------- Dashboard : grille des widgets, réordonnable au doigt
   directement sur la grille — pas de flèches dans une modale) ---------- */

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

.dashboard-grid .card__title h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid .card__title a { flex-shrink: 0; }

.dashboard-grid[data-dragging] > [data-widget] { transition: none; }
.dashboard-grid > [data-widget] {
  touch-action: pan-y;
  /* Sans ça, une grille CSS élargit sa colonne jusqu'à la largeur du
     contenu le plus long qu'elle contient (ex. "FAC-2026-0006 — Marie
     Dupont" sur une ligne) au lieu de le laisser passer à la ligne — la
     page entière débordait horizontalement une fois les cartes réduites
     à deux par ligne. */
  min-width: 0;
}

.widget-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--color-text-faint);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.widget-drag-handle svg { width: 16px; height: 16px; }
.widget-drag-handle:hover { color: var(--color-text-muted); }

[data-widget].is-dragging {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-lg);
  transform: scale(1.03);
  opacity: 0.96;
}

/* ---------- Dashboard : bouton "Modifier" + choix des widgets ---------- */

.dashboard-modifier { display: flex; justify-content: center; margin-top: var(--space-6); }

.widget-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

.widget-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.widget-preview-card:hover { border-color: rgba(255, 255, 255, 0.25); }
.widget-preview-card.is-selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }

.widget-preview-card__coche {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1;
}
.widget-preview-card__coche svg { width: 12px; height: 12px; }
.widget-preview-card.is-selected .widget-preview-card__coche { opacity: 1; transform: scale(1); }

/* Zone d'aperçu : contenu réel en miniature, non-interactif (le clic doit
   toujours sélectionner/désélectionner la carte, jamais suivre un lien). */
.widget-preview-card__mini {
  height: 92px;
  padding: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.widget-preview-card__mini-ligne { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; overflow: hidden; }
.widget-preview-card__mini-ligne span:first-child { overflow: hidden; text-overflow: ellipsis; color: var(--color-text); font-weight: 500; }
.widget-preview-card__mini-ligne span:last-child { color: var(--color-text-muted); flex-shrink: 0; }
.widget-preview-card__mini-vide { color: var(--color-text-faint); font-style: italic; }
.widget-preview-card__mini-chiffre { font-size: 20px; font-weight: 700; color: var(--color-text); }
.widget-preview-card__mini-spark { width: 100%; height: 28px; }

.widget-preview-card__mini-heatmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.widget-preview-card__mini-heatmap span { aspect-ratio: 1; border-radius: 1px; }

.widget-preview-card__mini-bulles { display: flex; align-items: center; justify-content: space-around; flex: 1; }
.widget-preview-card__mini-bulle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

.widget-preview-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 10px; background: rgba(255, 255, 255, 0.06); }
.widget-preview-card__titre { font-size: 12px; font-weight: 600; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-preview-card__page { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 420px) {
  .widget-preview-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
}

/* Compte à rebours d'archivage : un colis entièrement récupéré reste visible
   dans la liste principale avec ce bandeau quelques secondes avant de
   rejoindre les archives — jamais un retrait instantané. */
.colis-item.is-archivage { border-color: var(--color-status-success); }
.colis-item__archivage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--space-5) var(--space-4);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-status-success);
}
.colis-item__archivage-track { height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-status-success) 20%, transparent); overflow: hidden; }
.colis-item__archivage-fill { display: block; height: 100%; background: var(--color-status-success); border-radius: var(--radius-pill); transition: width 1s linear; }

.colis-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: var(--space-2) 0;
  margin-top: var(--space-4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}
.colis-archive-toggle:hover { color: var(--color-text); }
.colis-archive-toggle__chevron { transition: transform 0.2s ease; }
.colis-archive-toggle.is-open .colis-archive-toggle__chevron { transform: rotate(180deg); }

.colis-archive-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.colis-archive-wrap.is-open { grid-template-rows: 1fr; }
.colis-archive-inner { overflow: hidden; min-height: 0; }
.colis-list--archive { padding-top: var(--space-3); opacity: 0.7; }

/* ---------- Modale nouveau transfert : dropzone + chips + barre de progression ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-6) var(--space-4);
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); outline: none; }
.dropzone.is-dragover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.dropzone__icon { width: 28px; height: 28px; color: rgba(255, 255, 255, 0.55); transition: transform 0.2s ease; }
.dropzone.is-dragover .dropzone__icon { color: var(--color-accent); transform: translateY(-3px); }
.dropzone__label { margin: 0; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.dropzone__hint { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.45); }

.file-chip-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  animation: file-chip-in 0.2s ease;
}
@keyframes file-chip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.file-chip__nom { flex: 1; min-width: 0; font-size: 12px; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip__taille { font-size: 11px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.file-chip__retirer {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.file-chip__retirer:hover { background: var(--color-status-danger); color: #ffffff; }

.upload-progress { margin-top: var(--space-4); }
.upload-progress__row { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; }
.upload-progress__track { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.upload-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  background-size: 200% 100%;
  animation: upload-progress-shimmer 1.4s linear infinite;
  transition: width 0.2s ease;
}
@keyframes upload-progress-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Dashboard : "présence équipe" (dernière activité des autres
   comptes) — en premier sur la page, directement sur le fond (pas de module
   englobant : chaque ligne porte déjà son propre fond). ---------- */

.team-presence-section { margin-bottom: var(--space-5); }
.team-presence-section h2 { margin: 0 0 var(--space-3); font-size: 15px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.team-presence-list { display: flex; flex-direction: column; gap: var(--space-3); }

.team-presence {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-hollow);
}

.team-presence__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.team-presence__corps { flex: 1; min-width: 0; }
.team-presence__nom { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-presence__fonction { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-presence__statut { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.team-presence__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-faint); flex-shrink: 0; }
.team-presence__dot--online {
  background: var(--color-status-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-success) 22%, transparent);
  animation: team-presence-pulse 2s ease-in-out infinite;
}
@keyframes team-presence-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-success) 22%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-status-success) 10%, transparent); }
}

/* ---------- Badges (statuts) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.badge--neutral { background: var(--color-surface-hollow); color: var(--color-text-muted); }
.badge--info { background: color-mix(in srgb, var(--color-status-info) 14%, transparent); color: var(--color-status-info); }
.badge--success { background: color-mix(in srgb, var(--color-status-success) 14%, transparent); color: var(--color-status-success); }
.badge--warning { background: var(--color-accent-light); color: var(--color-accent); }
.badge--danger { background: color-mix(in srgb, var(--color-status-danger) 14%, transparent); color: var(--color-status-danger); }

/* ---------- Buttons / forms ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover { background: var(--color-surface-hollow); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
  height: 36px;
  min-width: 36px;
  padding: 0 var(--space-3);
}

.btn--ghost:hover { background: var(--color-surface-hollow); color: var(--color-text); }

.btn--danger { color: var(--color-status-danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--color-status-danger) 10%, transparent); }
.btn--block { width: 100%; }

.form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.form-field label { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input[type='search'] { border-radius: var(--radius-pill); padding-left: 18px; }
.form-field input[type='color'] { padding: 4px; height: 42px; }
.form-field textarea { resize: vertical; min-height: 80px; border-radius: var(--radius); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-faint); font-weight: 400; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.form-row > .form-field { flex: 1; }
.form-field--narrow { flex: 0 0 80px; }

/* ---------- Tabs (contrôle segmenté en pilule) ---------- */

.tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-hollow);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.tabs button:hover { color: var(--color-text); }
.tabs button.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }

/* ---------- Table ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 12px;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}
td { padding: 14px var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background 0.1s ease; }
tbody tr:hover { background: var(--color-surface-hollow); }

/* ---------- Modal ---------- */

/* Feuille qui part du bas : le fond derrière la page reste net (juste
   légèrement assombri, sans flou — on ne veut pas flouter toute la page),
   seul le panneau du modal porte son propre fond flou (verre dépoli). Le
   panneau glisse depuis le bord inférieur de l'écran (transform, pas
   display) et glisse à nouveau vers le bas à la fermeture — jamais un
   show/hide direct. Piloté par la classe .is-open (voir openModal/closeModal
   des pages) plutôt que par [hidden] pendant la transition, sinon
   [hidden]{display:none !important} coupe l'animation net — même leçon que
   pour le menu mobile et le panneau Copilote. Le panneau ne prend jamais
   plus des 3/4 de l'écran (max-height) : au-delà, il défile en interne. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-7) 0 0;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Carte en verre dépoli : le flou (backdrop-filter) s'applique seulement
   derrière ce panneau, pas sur toute la page. Les champs (input/select/
   textarea) gardent leur propre fond clair donc restent lisibles ; tout le
   texte "nu" du modal (labels, titre, notes, en-têtes de tableau) passe en
   clair pour rester lisible sur ce fond sombre — voir les règles ci-dessous. */
.modal {
  background: rgba(26, 26, 30, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: none;
  border-right: none;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: none;
  padding: 28px var(--space-5);
  padding-bottom: calc(28px + var(--space-6));
  max-height: 75vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-backdrop.is-open .modal { transform: translateY(0); }

/* Variante "descend du haut" (panneau Notifications) plutôt que "monte du
   bas" (tous les autres modals) — même mécanique is-open/transform,
   inversée verticalement : ancré en haut, coins arrondis en bas, ombre
   projetée vers le bas. */
.modal-backdrop--haut { align-items: flex-start; padding: 0 0 var(--space-7); }
.modal-backdrop--haut .modal {
  border-radius: 0 0 20px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(-100%);
}

.modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.modal__header h2 { margin: 0; font-size: 18px; color: #ffffff; }
.modal__header [data-close] {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.modal__header [data-close]:hover { background: rgba(255, 255, 255, 0.22); }

.modal .form-field label { color: rgba(255, 255, 255, 0.6); }
.modal .u-note { color: rgba(255, 255, 255, 0.55); }

.modal .pref-row__label { color: #ffffff; }
.modal .pref-row__desc { color: rgba(255, 255, 255, 0.55); }
.modal .push-status { background: rgba(255, 255, 255, 0.08); }
.modal .push-status__text { color: rgba(255, 255, 255, 0.75); }
.modal .list-row__meta { color: rgba(255, 255, 255, 0.55); }

/* ---------- Panneau notifications + rappels (cloche du header) ---------- */

.modal h2 { color: #ffffff; }

.notif-panel__actions { display: flex; align-items: center; justify-content: space-between; margin: var(--space-4) 0 var(--space-3); }
.notif-panel__actions--centre { justify-content: center; margin: var(--space-4) 0 0; }
.notif-panel__soustitre { margin: 0; font-size: 15px; }
.notif-panel__soustitre--espace { margin-top: var(--space-6); }

/* ---------- Fil de notifications (cloche du header) ----------
   Une carte par notification (regroupées sous un libellé de jour, sans
   panneau partagé) — icône ronde pleine teintée par "tonalite"
   (info/succes/alerte/argent/neutre, indépendante de la catégorie : un
   devis émis et un devis signé partagent la même icône mais pas la même
   couleur), phrase claire, temps relatif. Lue = carte atténuée. */
.notif-list { display: flex; flex-direction: column; gap: var(--space-5); }
.notif-day-label {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.notif-day-group { display: flex; flex-direction: column; gap: var(--space-3); }

.notif-item {
  --tonalite-color: var(--color-status-neutral);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.notif-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.notif-item:not(.is-non-lue) { opacity: 0.55; }

.notif-item[data-tonalite='info'] { --tonalite-color: var(--color-status-info); }
.notif-item[data-tonalite='succes'] { --tonalite-color: var(--color-status-success); }
.notif-item[data-tonalite='alerte'] { --tonalite-color: var(--color-status-danger); }
.notif-item[data-tonalite='argent'] { --tonalite-color: var(--color-accent); }
.notif-item[data-tonalite='neutre'] { --tonalite-color: var(--color-status-neutral); }

.notif-item__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tonalite-color);
  color: #ffffff;
}
.notif-item__icone svg { width: 18px; height: 18px; }

.notif-item__corps { flex: 1; min-width: 0; padding-top: 2px; }
.notif-item__titre { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--color-text); }
.notif-item__meta { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); }
.notif-item__temps { flex-shrink: 0; font-size: 11.5px; color: var(--color-text-faint); padding-top: 3px; white-space: nowrap; }

/* Champs semi-transparents plutôt que blancs pleins, pour rester dans
   l'esprit verre dépoli du panneau plutôt que de trancher dessus. */
.modal .form-field input,
.modal .form-field select,
.modal .form-field textarea {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.modal .form-field input::placeholder,
.modal .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.modal .form-field select { color-scheme: dark; }
.modal .form-field input:focus,
.modal .form-field select:focus,
.modal .form-field textarea:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.modal table th { color: rgba(255, 255, 255, 0.45); border-bottom-color: rgba(255, 255, 255, 0.15); }
.modal table td { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.15); }
.modal .btn--ghost { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.modal .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.modal--wide { max-width: none; }

[hidden] { display: none !important; }

/* ---------- Devis / Facture : aperçu façon PDF, fond flou + deux cartes flottantes ---------- */

.doc-overlay {
  background: rgba(15, 15, 17, 0.72);
  backdrop-filter: blur(10px);
  align-items: center;
  overflow-y: auto;
}

.doc-overlay__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 860px;
  margin: auto 0;
  padding-top: 56px;
}

.doc-overlay__close {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s ease;
}
.doc-overlay__close:hover { background: rgba(255, 255, 255, 0.22); }

.doc-overlay__titre { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

.doc-viewer { display: flex; flex-direction: column; }
.doc-viewer__panel { display: none; }
.doc-viewer__panel.is-active { display: block; }

.doc-infos-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 28px;
}

.doc-viewer__actions { display: flex; gap: var(--space-3); }
.doc-action-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  border: none;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: background 0.15s ease, color 0.15s ease;
}
.doc-action-btn:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.doc-action-btn--danger:hover { background: var(--color-status-danger); color: #ffffff; }

@media (min-width: 860px) {
  .doc-viewer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
  .doc-viewer__panel { display: block !important; }
  .doc-btn-toggle { display: none; }
}

/* Document façon PDF */
.doc-preview {
  background: var(--surf-blanc);
  color: #14161c;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-6);
  font-size: 13px;
  box-shadow: var(--shadow-card);
}
/* Aperçu = le vrai PDF (devis, puis factures), rendu page par page en
   <canvas> via pdf.js — pas la visionneuse native du navigateur (barre
   d'outils/miniatures minuscules, cf. pdf-pager.js). Une page = un cadre
   plein cadre du carrousel horizontal à défilement par page
   (scroll-snap) ; les boutons d'action restent les nôtres, en dehors. */
.doc-preview--pdf { padding: 0; overflow: hidden; }
.pdf-pager { display: flex; flex-direction: column; gap: var(--space-3); }
.pdf-pager__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  height: 75vh;
  min-height: 560px;
  background: var(--color-border-soft);
}
.pdf-pager__track::-webkit-scrollbar { display: none; }
.pdf-pager__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.pdf-pager__page canvas { max-width: 100%; max-height: 100%; box-shadow: var(--shadow-card); background: var(--surf-blanc); }
.pdf-pager__dots { display: flex; justify-content: center; gap: var(--space-2); padding-bottom: var(--space-2); }
.pdf-pager__dots:has(> :only-child) { display: none; }
.pdf-pager__dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--color-border); cursor: pointer; }
.pdf-pager__dot.is-active { background: var(--color-accent); }
.pdf-pager__loading { display: flex; align-items: center; justify-content: center; height: 75vh; min-height: 560px; color: var(--color-text-muted); font-size: 13px; }
.doc-preview__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.doc-preview__marque { margin: 0 0 4px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.doc-preview__emetteur p { margin: 0; color: #666; }
.doc-preview__titre-bloc { text-align: right; }
.doc-preview__titre-bloc h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: 0.04em; }
.doc-preview__titre-bloc p { margin: 0; color: #666; }
.doc-preview__label { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; }
.doc-preview__client { margin-bottom: var(--space-5); }
.doc-preview__client p { margin: 0; }
.doc-preview__objet { font-weight: 600; margin: 0 0 var(--space-4); }
.doc-preview__table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: var(--space-4); }
.doc-preview__table th, .doc-preview__table td { padding: 8px 3px; border-bottom: 1px solid #eee; text-align: left; font-size: 11px; overflow-wrap: break-word; white-space: normal; }
.doc-preview__table th { color: #999; font-weight: 500; text-transform: uppercase; font-size: 9px; letter-spacing: 0.03em; }
.doc-preview__table th:nth-child(1), .doc-preview__table td:nth-child(1) { width: 28%; }
.doc-preview__table th:nth-child(2), .doc-preview__table td:nth-child(2) { width: 10%; }
.doc-preview__table th:nth-child(3), .doc-preview__table td:nth-child(3) { width: 31%; white-space: nowrap; }
.doc-preview__table th:nth-child(4), .doc-preview__table td:nth-child(4) { width: 31%; white-space: nowrap; }
.doc-preview__table th:nth-child(2), .doc-preview__table th:nth-child(3), .doc-preview__table th:nth-child(4),
.doc-preview__table td:nth-child(2), .doc-preview__table td:nth-child(3), .doc-preview__table td:nth-child(4) { text-align: right; }
.doc-preview__totaux { margin-left: auto; width: 220px; display: flex; flex-direction: column; gap: 4px; }
.doc-preview__totaux div { display: flex; justify-content: space-between; }
.doc-preview__ttc { font-weight: 700; font-size: 14px; padding-top: 6px; margin-top: 4px; border-top: 1px solid #ddd; }
.doc-preview__validite { margin-top: var(--space-5); color: #999; font-size: 11px; }

/* ---------- Changement de statut (Devis, Facturation) ---------- */

.statut-overlay { opacity: 0; transition: opacity 0.25s ease; }
.statut-overlay.is-open { opacity: 1; }

.statut-changer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding: var(--space-6) var(--space-4);
}

.statut-changer__icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.statut-changer__titre { margin: 0; font-size: 17px; font-weight: 600; color: #fff; text-align: center; }

.statut-changer__infos { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.statut-changer__info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.statut-changer__info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); }
.statut-changer__info-valeur { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }

.statut-changer__timeline { position: relative; width: 100%; --n: 3; }

/* La ligne va du centre du premier point au centre du dernier : chaque
   colonne de .statut-changer__step fait une largeur égale (flex: 1 1 0), le
   point y est centré, donc son centre est à 100%/(2n) du bord — c'est
   exactement l'inset qu'on donne à la ligne pour qu'elle s'arrête pile sur
   les points aux deux extrémités, au lieu de les déborder. */
.statut-changer__timeline-line {
  position: absolute;
  top: 4px;
  left: calc(100% / (var(--n) * 2));
  right: calc(100% / (var(--n) * 2));
  height: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.statut-changer__timeline-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-accent); }
.statut-changer__timeline-steps { position: relative; z-index: 1; display: flex; }
.statut-changer__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.statut-changer__step-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease; }
.statut-changer__step.is-done .statut-changer__step-dot { background: var(--color-accent); }
.statut-changer__step.is-actuel .statut-changer__step-dot { box-shadow: 0 0 0 4px rgba(226, 96, 60, 0.25); }
.statut-changer__step-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); text-align: center; }
.statut-changer__step.is-done .statut-changer__step-label { color: rgba(255, 255, 255, 0.9); }

.statut-changer__bouton { width: 100%; height: 48px; }
.statut-changer__slider { display: none; }

.statut-changer__secondaires { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.statut-changer__secondaire {
  height: 40px;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.statut-changer__secondaire:hover { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 720px) {
  .statut-changer__bouton { display: none; }
  .statut-changer__slider {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 52px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .statut-changer__slider-fill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
  }
  .statut-changer__slider-label {
    position: relative;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
  }
  .statut-changer__slider-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: grab;
  }
}

@media print {
  #app-header-mount, main.page { display: none !important; }
  .doc-overlay { position: static; background: none; backdrop-filter: none; padding: 0; }
  .doc-overlay__close,
  .doc-overlay__titre,
  .doc-viewer__actions,
  .doc-viewer__panel--infos { display: none !important; }
  .doc-viewer__panel--apercu { display: block !important; }
  .doc-preview { border: none; box-shadow: none; border-radius: 0; }
}

/* ---------- Utilitaires (évitent tout style="" inline, cf CSP — SECURITE.md règle 62) ---------- */

.u-card-flush { padding: 0; overflow: auto; }
.u-p-4 { padding: var(--space-4); }
.u-max-w-sm { max-width: 320px; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mt-4 { margin-top: var(--space-4); }
.u-my-3 { margin: var(--space-3) 0; }
.u-text-right { text-align: right; }
.u-section { margin-top: var(--space-6); }
.u-note { font-size: 12px; color: var(--color-text-muted); }
.u-actions-column { display: flex; flex-direction: column; gap: var(--space-2); }
.u-input-qty { width: 70px; }
.u-input-price { width: 90px; }
#lignes-table td { padding: var(--space-1) var(--space-2); }
#lignes-table input { width: 100%; padding: 8px 12px; font-family: inherit; font-size: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

/* Éditeur de lignes de devis — une carte par ligne (catégorie + titre + qté
   + prix sur une rangée, description à puces en dessous), remplace le
   tableau simple utilisé par les autres modules (ligne trop riche ici pour
   tenir dans une seule cellule de tableau). Les champs restent des
   .form-field standard pour hériter du style "verre dépoli" du modal. */
.ligne-item { border: 1px solid var(--color-border-soft); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.modal .ligne-item { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
.ligne-item__row { display: flex; gap: var(--space-2); align-items: flex-end; }
.ligne-item__row > .form-field { flex: 1; min-width: 0; margin-bottom: 0; }
.ligne-item__categorie { flex: 0 0 128px; }
.ligne-item__qte { flex: 0 0 64px; }
.ligne-item__prix { flex: 0 0 84px; }
.ligne-item__remove { flex: 0 0 auto; margin-bottom: 0; }
.ligne-item__desc { margin-top: var(--space-2); margin-bottom: 0; }
.ligne-item__desc textarea { min-height: 56px; }
@media (max-width: 720px) {
  .ligne-item__row { flex-wrap: wrap; }
  .ligne-item__categorie, .ligne-item__qte, .ligne-item__prix { flex: 1 1 45%; }
}

/* ---------- Cartes de liste (remplacent les tableaux des pages métier) ----------
   .cards--sm : devis, factures — 3 par ligne sur téléphone, jusqu'à 7 sur grand écran.
   .cards--lg : projets, abonnements — 2 par ligne sur téléphone, 3-4 sur PC.
   Clients utilise .client-list (liste sans contour ni fond, voir plus bas). */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.cards--lg {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* ---------- Liste clients ("biblio-dnav" adapté : pas de carte, une ligne
   par client — avatar + nom/rôle à gauche, contact + statut + bouton rond
   à droite). ---------- */

.client-list { display: flex; flex-direction: column; }

.client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius);
}

.client-row:hover { background: var(--color-surface-hollow); }

.client-row__groupe { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.client-row__groupe--droite { flex-shrink: 0; }

.client-row__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.client-row__titre { min-width: 0; }
.client-row__titre p { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-row__role { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }

.client-row__contact { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }

.circle-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.circle-btn:hover { background: var(--color-surface-hollow); }

.circle-btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); box-shadow: none; }
.circle-btn--primary:hover { background: var(--color-accent-hover); }
.circle-btn--danger { color: var(--color-status-danger); }
.circle-btn--danger:hover { background: var(--color-status-danger); color: #ffffff; }

.page__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page__title-row h1 { margin-bottom: 0; }

/* ---------- Fiche client (page dédiée) ---------- */

.fiche-retour {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}
.fiche-retour:hover { color: var(--color-text); }

/* Avatar au-dessus, tout centré (photo, titre, badge/bouton modifier,
   sous-titre) plutôt que côte à côte — flex:1 pour que ce centrage porte sur
   toute la largeur de .page__header, pas seulement sur la largeur propre du
   contenu (qui se serait contenté de rester collé à gauche). */
.fiche-entete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); min-width: 0; flex: 1 1 auto; }

.fiche-entete__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* flex-wrap + h1 en flex-basis 100% : le titre prend toujours toute la
   largeur de la ligne en premier, ce qui repousse le badge et le bouton
   modifier sur une ligne en dessous s'il ne reste pas de place — sans ça, un
   titre long se retrouvait écrasé à la largeur d'un seul mot (flex-shrink
   par défaut) pour laisser de la place au badge/bouton à côté, et
   s'affichait un mot par ligne. Le line-clamp évite qu'un titre vraiment
   très long pousse le reste de la fiche trop bas. */
.fiche-entete__ligne { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.fiche-entete__ligne h1 {
  margin-bottom: 0;
  flex: 1 1 100%;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.circle-btn--sm { width: 30px; height: 30px; box-shadow: none; border: 1px solid var(--color-border); }

/* ---------- Carte "streak" (jours du mois pris par des clients) ---------- */

.streak-card {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  box-sizing: border-box;
}

.streak-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.streak-card__texte { flex-shrink: 0; }
.streak-card__jours { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; }
.streak-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }

.streak-card__dots {
  flex: 1 1 240px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
  align-content: center;
  gap: 8px;
}
.streak-card__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-border); }
.streak-card__dot.on { background: var(--color-accent); }

/* ---------- Widget Renouvellements (page Gestion des projets) : slider tactile ---------- */

.renouv-widget { width: 100%; }

.renouv-widget__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}
.renouv-widget__track::-webkit-scrollbar { display: none; }

.renouv-widget__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: var(--space-5);
  box-sizing: border-box;
}

.renouv-widget__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.renouv-widget__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.renouv-widget__label { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.renouv-widget__total { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }
.renouv-widget__sub { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); }

.renouv-widget__bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.renouv-widget__bar { flex: 1; min-width: 2px; height: 8px; border-radius: 2px; background: var(--color-border); transition: height 0.2s ease, background 0.2s ease; }
.renouv-widget__bar.on { height: 100%; background: var(--color-accent); }

.renouv-widget__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-3); }
.renouv-widget__dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: var(--color-border); cursor: pointer; }
.renouv-widget__dot.is-active { background: var(--color-accent); width: 16px; border-radius: var(--radius-pill); transition: width 0.2s ease, background 0.2s ease; }

/* ---------- Administratif : calendrier vertical dépliant ---------- */

.demarche-list { display: flex; flex-direction: column; gap: var(--space-3); }

.demarche-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.demarche-item__bandeau {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease;
}

.demarche-item__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; flex-shrink: 0; }
.demarche-item__jour-nb { font-size: 24px; font-weight: 700; line-height: 1; color: var(--color-text); transition: color 0.2s ease; }
.demarche-item__jour-nom { margin-top: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); transition: color 0.2s ease; }

.demarche-item__titre-bloc { flex: 1; min-width: 0; }
.demarche-item__titre { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); transition: color 0.2s ease; }
.demarche-item__meta { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; }

.demarche-item__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.demarche-item.is-open .demarche-item__chevron { transform: rotate(180deg); }

.demarche-item.is-open .demarche-item__bandeau { background: var(--color-accent); }
.demarche-item.is-open .demarche-item__jour-nb,
.demarche-item.is-open .demarche-item__titre,
.demarche-item.is-open .demarche-item__chevron { color: var(--color-accent-contrast); }
.demarche-item.is-open .demarche-item__jour-nom,
.demarche-item.is-open .demarche-item__meta { color: rgba(255, 255, 255, 0.75); }

.demarche-item__detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.demarche-item.is-open .demarche-item__detail-wrap { grid-template-rows: 1fr; }
.demarche-item__detail { overflow: hidden; min-height: 0; }
.demarche-item__detail-inner { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

.demarche-item__infos { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.demarche-item__description-bloc { display: flex; flex-direction: column; gap: 4px; }
.demarche-item__description { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.demarche-item__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.fait-bouton { flex: 1; }

/* Glissement pour confirmer (mobile) : même gabarit que le bouton "Modifier"
   à côté duquel il vit (hauteur de .btn = 40px), remplace le bouton sur
   petit écran plutôt qu'un switch — voir la media query "Téléphone". */
.fait-slide {
  display: none;
  position: relative;
  flex: 1;
  align-items: center;
  height: 40px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  overflow: hidden;
}
.fait-slide__fill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: var(--radius-pill); background: var(--color-accent); }
.fait-slide__label { position: relative; width: 100%; text-align: center; font-size: 12px; font-weight: 500; color: var(--color-text-muted); pointer-events: none; }
.fait-slide__handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}

@media (max-width: 720px) {
  .fait-bouton { display: none; }
  .fait-slide { display: flex; }
}

/* Sous-menu de la fiche client : même idiome que .tabs (piste arrondie,
   pastille active), en ligne unique qui défile horizontalement plutôt que
   de retomber à la ligne — et collé en haut au scroll pour rester
   atteignable sur une fiche longue. */
.fiche-nav {
  position: sticky;
  top: calc(var(--header-height) + 90px);
  z-index: 15;
  display: flex;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-hollow);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
  scrollbar-width: none;
}

.fiche-nav::-webkit-scrollbar { display: none; }

.fiche-nav a {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.fiche-nav a:hover { color: var(--color-text); }
.fiche-nav a.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }

#section-infos, #section-kpi, #section-abonnement, #section-devis, #section-factures, #section-projets, #section-rdv {
  scroll-margin-top: calc(var(--header-height) + 90px);
}

/* ---------- Fiche client : coordonnées avec icônes ---------- */

.coord-list { display: flex; flex-direction: column; gap: var(--space-4); }
.coord-row { display: flex; align-items: center; gap: var(--space-3); }
.coord-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coord-row__icon svg { width: 16px; height: 16px; }
.coord-row__texte { min-width: 0; }
.coord-row__label { margin: 0; font-size: 11px; color: var(--color-text-muted); }
.coord-row__valeur { margin: 2px 0 0; font-size: 14px; color: var(--color-text); overflow-wrap: break-word; }
.coord-row__valeur a { color: inherit; }
.coord-row--vide .coord-row__valeur { color: var(--color-text-faint); }

.tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.tile--lg { padding: var(--space-4); border-radius: var(--radius-lg); gap: var(--space-2); }

.tile--clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.tile--clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 23, 39, 0.08); }

.tile__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile--lg .tile__title { font-size: 16px; }

.tile__meta {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__value { font-size: 14px; font-weight: 700; white-space: nowrap; }

.tile__footer {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tile__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tile__headtext { min-width: 0; flex: 1; }

.tile__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.tile__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tile__stat-label { font-size: 11px; color: var(--color-text-muted); }
.tile__stat-value { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tile__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }
.tile__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Comptabilité ---------- */

.stat { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }

.gauge { margin-bottom: var(--space-4); }
.gauge__label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.gauge__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-hollow); overflow: hidden; }
.gauge__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-status-success); }
.gauge__fill.warning { background: var(--color-accent); }
.gauge__fill.danger { background: var(--color-status-danger); }

/* ---------- Finstats (Brut / Net, comptabilité) ---------- */

.finstats {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.finstats__row { padding: var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
.finstats__row:last-child { border-bottom: none; }

.finstats__row--accent { background: var(--color-accent); }

.finstats__row-top { display: flex; align-items: center; justify-content: space-between; }
.finstats__row-bottom { margin-top: var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }

.finstats__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.finstats__icon--accent { background: rgba(255, 255, 255, 0.22); color: var(--color-accent-contrast); }

.finstats__pill {
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.finstats__pill:hover { color: var(--color-text); background: var(--color-surface-hollow); }

.finstats__pill--accent {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-accent-contrast);
}

.finstats__pill--accent:hover { background: rgba(255, 255, 255, 0.16); }

.finstats__label { margin: var(--space-4) 0 0; font-size: 14px; color: var(--color-text-muted); }
.finstats__amount { margin: var(--space-1) 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }

.finstats__label--accent { color: rgba(255, 255, 255, 0.75); }
.finstats__amount--accent { color: var(--color-accent-contrast); }

.finstats__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-accent-contrast);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.finstats__link-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-contrast);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Stocks (Chiffre d'affaires, comptabilité) ---------- */

.stocks {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.stocks__head { display: flex; align-items: center; justify-content: space-between; }

.stocks__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hollow);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.stocks__amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stocks__amount { font-size: 20px; font-weight: 700; color: var(--color-text); }
.stocks__amount-charges { font-size: 12px; font-weight: 600; color: var(--color-status-info); }

.stocks__spark { margin-top: var(--space-4); width: 100%; height: 56px; }

.stocks__legende { margin-top: var(--space-2); display: flex; gap: var(--space-4); }
.stocks__legende-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.stocks__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.stocks__dot--ca { background: var(--color-accent); }
.stocks__dot--charges { background: var(--color-status-info); }

.stocks__foot { margin-top: var(--space-2); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.stocks__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text); }
.stocks__sub { margin: 0; font-size: 14px; color: var(--color-text-muted); }

.stocks__badge {
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.stocks__badge--hausse { background: var(--color-accent-light); color: var(--color-accent); }
.stocks__badge--baisse { background: rgba(201, 54, 54, 0.14); color: var(--color-status-danger); }

/* ---------- Yearchart (prévisionnel mensuel) ---------- */

/* Un seul bouton segmenté (même piste, sans espace ni contour individuel
   entre les options) plutôt que 3 pilules séparées — cohérent avec .tabs. */
.yearchart-controls {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-hollow);
  border-radius: var(--radius-pill);
}

.yearchart-controls__btn {
  height: 26px;
  min-width: 34px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.yearchart-controls__btn:hover { color: var(--color-text); }

.yearchart-controls__btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.yearchart {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-hollow);
  background-image:
    linear-gradient(var(--color-border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px);
  background-size: 22px 22px;
  padding: var(--space-5);
  box-sizing: border-box;
  overflow: hidden;
}

/* Vignette : estompe la grille vers les bords pour donner de la profondeur
   plutôt qu'un quadrillage plat façon tableur. */
.yearchart::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, transparent 0%, var(--color-surface-hollow) 92%);
  pointer-events: none;
}

/* Variante "rectangle" : le graphique EST la carte (pas de wrapper .card
   autour), posée en pleine largeur — utilisée sur la page Facturation.
   Titre + montant total en haut à gauche, sélecteur de période en haut à
   droite, directement sur la grille du graphique. */
.yearchart--large {
  height: 240px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-soft);
}

.yearchart__topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.yearchart__label { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.yearchart__total { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }

.yearchart__icon {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.yearchart__aire {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.yearchart__pin {
  position: absolute;
  z-index: 2;
  bottom: var(--space-5);
  height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transition: height 0.55s cubic-bezier(0.34, 1.2, 0.4, 1), left 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.yearchart__pin.is-hidden { opacity: 0; pointer-events: none; }

/* Lueur douce derrière le mois en cours, pour attirer l'œil sans surcharger. */
.yearchart__pin::before {
  content: '';
  position: absolute;
  top: -10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  filter: blur(18px);
  transition: opacity 0.4s ease;
  z-index: -1;
}

.yearchart__pin.is-actuel::before { opacity: 0.35; }

.yearchart__pin-label {
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
  transition: background 0.3s, color 0.3s, transform 0.25s ease;
}

.yearchart__pin-label small { font-weight: 500; opacity: 0.8; }

.yearchart__pin.is-actuel .yearchart__pin-label { background: var(--color-accent); color: var(--color-accent-contrast); }

.yearchart__pin:hover .yearchart__pin-label { transform: scale(1.1); }

.yearchart__pin-stem {
  margin-top: 4px;
  flex: 1;
  width: 2px;
  min-height: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background 0.3s;
}

.yearchart__pin.is-actuel .yearchart__pin-stem { width: 3px; background: var(--color-accent); }

.gauge__note { font-size: 11px; color: var(--color-text-faint); margin-top: var(--space-2); }

/* ---------- Timeline projet (avancement, lecture seule) ---------- */

/* Stepper vertical plutôt qu'horizontal : avec des libellés français de
   longueur très inégale ("Test" vs "Développement"), une ligne de 4 colonnes
   force un retour à la ligne qui fait se chevaucher les libellés voisins.
   En pleine page (contrairement à l'overlay statut-changer, à l'étroit dans
   sa modale), rien n'empêche d'empiler les étapes verticalement — chaque
   libellé garde toute la largeur de la page pour lui seul. La progression se
   change via le bouton "Changer l'étape" (statut-changer.js) donc cet
   affichage n'est plus cliquable. */
.progress-stepper { display: flex; flex-direction: column; margin-bottom: var(--space-5); }

.progress-stepper__step { display: flex; align-items: stretch; gap: var(--space-3); }

.progress-stepper__rail { display: flex; flex-direction: column; align-items: center; }
.progress-stepper__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease; }
.progress-stepper__step.is-actuel .progress-stepper__dot { box-shadow: 0 0 0 4px var(--color-accent-light); }
.progress-stepper__step.is-done .progress-stepper__dot { background: var(--color-accent); }
.progress-stepper__connector { width: 2px; flex: 1; min-height: var(--space-5); background: var(--color-border); margin: 4px 0; }
.progress-stepper__step.is-done .progress-stepper__connector { background: var(--color-accent); }

.progress-stepper__label { padding-top: 1px; padding-bottom: var(--space-4); font-size: 14px; font-weight: 500; color: var(--color-text-faint); }
.progress-stepper__step.is-done .progress-stepper__label { color: var(--color-text-muted); }
.progress-stepper__step.is-actuel .progress-stepper__label { color: var(--color-text); font-weight: 600; }
.progress-stepper__step:last-child .progress-stepper__label { padding-bottom: 0; }

/* Le stepper ne prend que la largeur de son contenu (labels) : le bouton
   "Changer l'étape" vient occuper l'espace resté vide à droite plutôt que
   d'être une pleine largeur au-dessus. */
.avancement-layout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.avancement-layout .progress-stepper { flex: 0 1 auto; max-width: 320px; margin-bottom: 0; }
.avancement-layout .circle-btn { flex-shrink: 0; }

/* ---------- Calendrier ---------- */

.cal-toolbar { display: flex; gap: var(--space-2); }

.cal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
/* .tabs porte normalement sa propre marge basse (pour s'empiler seule
   au-dessus d'un contenu) ; ici elle est un item flex parmi d'autres et
   cette marge asymétrique décale son centrage vertical avec ses voisins
   (align-items centre la boîte de marge, pas la boîte visible). */
.cal-controls #cal-view-tabs { margin-bottom: 0; }

#cal-container { touch-action: pan-y; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}

.cal-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.cal-legend__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; }

.cal-density-legend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}

.cal-density-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-hollow);
  display: inline-block;
}

/* ---------- Activité : un carré par jour du mois en cours (autant de carrés
   que de jours), qui s'étirent pour occuper toute la largeur du widget —
   pas un calendrier aligné sur les semaines. ---------- */

.cal-activite { margin-bottom: var(--space-5); }
.cal-activite h2 { margin-bottom: var(--space-4); }

.cal-activite__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
  gap: 6px;
}

.cal-activite__jour { aspect-ratio: 1; border-radius: 4px; }

/* Quatre niveaux seulement : gris (rien), orange très clair (1), orange (2),
   orange foncé (3 ou plus) — pas un dégradé plus fin. */
.cal-activite__niveau--0, .cal-activite__jour--0 { background: var(--color-surface-hollow); }
.cal-activite__niveau--1, .cal-activite__jour--1 { background: var(--color-accent-light); }
.cal-activite__niveau--2, .cal-activite__jour--2 { background: var(--color-accent); }
.cal-activite__niveau--3, .cal-activite__jour--3 { background: var(--color-accent-hover); }

.cal-activite__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2);
  column-gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--color-text-muted);
}
.cal-activite__legende-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.cal-activite__swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; }

/* Vue Mois */

.cal-month__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border-soft);
}

.cal-month__weekdays span {
  padding: var(--space-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 108px;
}

.cal-month__day {
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  padding: var(--space-2);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-month__day:nth-child(7n) { border-right: none; }
.cal-month__day:hover { background: var(--color-surface-hollow); }
.cal-month__day.is-other-month { color: var(--color-text-faint); }
.cal-month__day-number { font-size: 12px; font-weight: 600; }
.cal-month__day.is-today .cal-month__day-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-contrast);
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Densité d'activité (nombre d'événements du jour) : plus la teinte est
   soutenue, plus la journée est chargée — 1 événement = clair, 2 = normal,
   3 et plus = fort. */
.cal-month__day--n1 { background: var(--color-accent-light); }
.cal-month__day--n2 { background: var(--color-accent); }
.cal-month__day--n3 { background: var(--color-accent-hover); }

.cal-month__day--n2 .cal-month__day-number,
.cal-month__day--n3 .cal-month__day-number,
.cal-month__day--n2 .u-note,
.cal-month__day--n3 .u-note {
  color: var(--color-accent-contrast);
}

.cal-month__day--n2:hover, .cal-month__day--n3:hover { filter: brightness(1.05); }

.cal-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
}

.cal-month__day.is-drop-target { background: var(--color-accent-light); }

/* Vue liste (mobile, Semaine / Mois) */

.cal-daylist__jour { border-bottom: 1px solid var(--color-border-soft); }
.cal-daylist__jour:last-child { border-bottom: none; }
.cal-daylist__jour.is-today .cal-daylist__date { color: var(--color-accent); font-weight: 700; }

.cal-daylist__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cal-daylist__date { font-size: 14px; font-weight: 600; color: var(--color-text); text-transform: capitalize; }

.cal-daylist__droite { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.cal-daylist__compteur {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-daylist__compteur.cal-month__day--n2,
.cal-daylist__compteur.cal-month__day--n3 {
  color: var(--color-accent-contrast);
}

.cal-daylist__ajouter {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.cal-daylist__ajouter:hover { background: var(--color-surface-hollow); color: var(--color-text); }

.cal-daylist__chevron {
  color: var(--color-text-faint);
  transition: transform 0.2s ease;
  font-size: 12px;
}

.cal-daylist__chevron.is-open { transform: rotate(180deg); }

.cal-daylist__body { padding: 0 var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

.cal-daylist__event {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-hollow);
  cursor: pointer;
}

.cal-daylist__event-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.cal-daylist__event-titre { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-daylist__event-heure { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }

/* Agenda Communication : liste verticale jour par jour, une carte par
   shooting/post (miniature colorée + titre + méta), plutôt qu'une grille
   mensuelle — bandeau de dates façon "semaine sélectionnée" en haut. */

.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.agenda-mois-select {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: capitalize;
  cursor: pointer;
  padding: 0;
}

.agenda-today-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}
.agenda-today-btn:hover { background: var(--color-surface-hollow); }

.agenda-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

/* Rangée flex (et non grid) à largeur de colonne fixe en %, pour rester
   alignée avec .agenda-weekdays quand il y a exactement 7 jours (le cas
   Communication) tout en devenant défilable horizontalement dès qu'il y en
   a plus (le cas calendrier.js, qui affiche plusieurs semaines pour pouvoir
   feuilleter les jours au doigt plutôt que seulement via les onglets). */
.agenda-datestrip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-5);
  scrollbar-width: none;
}
.agenda-datestrip::-webkit-scrollbar { display: none; }

.agenda-datestrip__day {
  flex: 0 0 14.2857%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.agenda-datestrip__day.is-today { background: var(--color-ink); color: var(--color-ink-contrast); }
.agenda-datestrip__day.is-selected:not(.is-today) { background: var(--color-surface-hollow); }

.agenda-list { display: flex; flex-direction: column; }

.agenda-jour {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.agenda-jour:last-child { border-bottom: none; }

.agenda-jour__label {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-1);
}
.agenda-jour__nb { font-size: 22px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.agenda-jour__dow { font-size: 12px; color: var(--color-text-muted); }
.agenda-jour.is-today .agenda-jour__nb,
.agenda-jour.is-today .agenda-jour__dow { color: var(--color-accent); }

.agenda-jour__contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.agenda-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.agenda-card__icone {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.agenda-card__corps { flex: 1; min-width: 0; }
.agenda-card__titre { font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-card__meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agenda-card__menu {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-faint);
  cursor: pointer;
}

.agenda-card--vide {
  background: none;
  border: none;
  padding: var(--space-2) 0;
  color: var(--color-text-faint);
  font-size: 13px;
  gap: var(--space-2);
}
.agenda-card--vide:hover { color: var(--color-text-muted); }
.agenda-card__plus { font-size: 16px; line-height: 1; }

/* Vue Semaine / Jour */

.cal-time-grid { display: flex; }
.cal-time-gutter { flex: 0 0 56px; }
.cal-time-gutter__slot { height: 48px; font-size: 11px; font-weight: 500; color: var(--color-text-faint); text-align: right; padding-right: var(--space-2); transform: translateY(-6px); }

.cal-time-days { flex: 1; display: flex; }
.cal-time-day { flex: 1; border-left: 1px solid var(--color-border-soft); position: relative; }
.cal-time-day__header { height: 43px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-border-soft); font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.cal-time-day__header.is-today { font-weight: 700; color: var(--color-accent); }
.cal-time-day__slots { position: relative; height: 672px; } /* 14 créneaux d'1h (7h-21h) x 48px */
.cal-time-slot { height: 48px; border-bottom: 1px solid var(--color-border-soft); }
.cal-time-slot.is-drop-target { background: var(--color-accent-light); }

.cal-time-event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  overflow: hidden;
  cursor: grab;
  z-index: 5;
}

/* ---------- Placeholder page ---------- */

.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- Auth pages ---------- */

body:has(.auth-shell) { background: var(--color-bg-top); }

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow: hidden;
}

/* Taches douces en fond, purement décoratives — dérivées de l'accent, jamais
   assez marquées pour nuire à la lisibilité du formulaire au-dessus. */
.auth-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent-light);
  filter: blur(70px);
  opacity: 0.8;
  pointer-events: none;
  animation: auth-blob-float 12s ease-in-out infinite;
}
.auth-blob--1 { width: 340px; height: 340px; top: -100px; left: -100px; }
.auth-blob--2 { width: 280px; height: 280px; bottom: -90px; right: -90px; animation-delay: -6s; }
@keyframes auth-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(16px, -20px) scale(1.08); }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow: 0 24px 60px -24px rgba(17, 23, 39, 0.18), var(--shadow-card);
  animation: auth-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  margin: 0 auto var(--space-5);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.auth-card h1 { text-align: center; margin: 0 0 8px; font-size: 26px; }
.auth-subtitle { text-align: center; margin: 0 0 var(--space-6); font-size: 14px; line-height: 1.5; color: var(--color-text-muted); padding: 0 var(--space-2); }

.auth-error { color: var(--color-status-danger); font-size: 13px; margin-bottom: var(--space-3); min-height: 18px; }
.auth-error.is-shake { animation: auth-shake 0.4s ease; }
@keyframes auth-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.auth-card .form-field label { text-align: center; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap svg { position: absolute; left: 16px; width: 16px; height: 16px; color: var(--color-text-faint); pointer-events: none; transition: color 0.15s ease; }
.auth-input-wrap input {
  width: 100%;
  padding-left: 42px !important;
  height: 46px;
  border-radius: var(--radius-pill) !important;
  background: var(--color-surface-hollow) !important;
  border-color: transparent !important;
}
.auth-input-wrap input:focus { background: var(--color-surface) !important; border-color: var(--color-accent) !important; }
.auth-input-wrap:focus-within svg { color: var(--color-accent); }

#login-submit {
  height: 48px;
  margin-top: var(--space-2);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--color-accent) 65%, transparent);
}

.auth-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-2);
  animation: auth-card-in 0.3s ease;
}
.auth-success p { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.auth-success__check { width: 64px; height: 64px; }
.auth-success__circle {
  stroke: var(--color-status-success);
  stroke-width: 2;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: auth-draw-circle 0.4s ease forwards;
}
.auth-success__path {
  stroke: var(--color-status-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: auth-draw-check 0.3s 0.35s ease forwards;
}
@keyframes auth-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes auth-draw-check { to { stroke-dashoffset: 0; } }

/* ---------- Copilote (mode Texte, plein écran) ----------
   Même traitement que l'overlay vocal immersif (.copilote-voix-overlay
   plus bas) : page assombrie/floutée derrière, pas de carte avec contour,
   bouton "Terminer" en bas — voir .copilote-overlay__stop, partagé par les
   deux overlays. */

.copilote-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(15, 15, 17, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.copilote-panel.is-open { opacity: 1; pointer-events: auto; }

/* Onglets Texte/Vocal fixés en haut à gauche. */
.copilote-panel__tabs-fixe { width: 100%; max-width: 720px; flex-shrink: 0; }

/* Zone de conversation : occupe toute la hauteur restante entre les onglets
   (haut) et la saisie + le bouton Terminer (bas). */
.copilote-panel__zone {
  width: 100%;
  max-width: 720px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#copilote-mode-texte,
#copilote-mode-vocal { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Saisie + bouton Terminer, fixés en bas, centrés. */
.copilote-panel__bas {
  width: 100%;
  max-width: 720px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.copilote-panel__bas .copilote-chat-form { width: 100%; }

.copilote-panel audio { width: 100%; }

/* Contexte sombre : le fond assombri est toujours sombre quel que soit le
   thème clair/sombre de l'appli (même logique que l'overlay vocal), donc on
   fixe des couleurs plutôt que d'utiliser les tokens --color-* qui suivent
   le thème. Portée à .copilote-panel uniquement : la bulle/chat de base
   reste inchangée pour .copilote-chat--modal (relecture d'une conversation
   passée sur la page Suivi, elle, posée sur une carte claire normale). */

.copilote-panel .tabs { background: rgba(255, 255, 255, 0.1); }
.copilote-panel .tabs button { color: rgba(255, 255, 255, 0.6); }
.copilote-panel .tabs button.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: none; }

.copilote-panel .copilote-chat { flex: 1; min-height: 200px; max-height: none; }
.copilote-panel .copilote-chat .empty-state { color: rgba(255, 255, 255, 0.55); }
.copilote-panel .copilote-bubble--user { background: var(--color-accent); color: var(--color-accent-contrast); }
.copilote-panel .copilote-bubble--assistant { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.copilote-panel .copilote-bubble--assistant.is-loading { color: rgba(255, 255, 255, 0.6); }

.copilote-panel .copilote-chat-form input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.copilote-panel .copilote-chat-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.copilote-panel .copilote-chat-form input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(226, 96, 60, 0.35); }

.copilote-panel .u-note,
.copilote-panel #copilote-voix-statut { color: rgba(255, 255, 255, 0.7); }

/* ---------- Mode Texte : conversation ---------- */

.copilote-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 360px;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: var(--space-3);
}

.copilote-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.copilote-bubble--user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-bottom-right-radius: 4px;
}

.copilote-bubble--assistant {
  align-self: flex-start;
  background: var(--color-surface-hollow);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}

.copilote-bubble--assistant.is-loading { color: var(--color-text-muted); font-style: italic; }
.copilote-chat--modal { max-height: 60vh; margin-bottom: 0; }

/* ---------- Carte de confirmation d'action (écriture proposée par le
   Copilote — jamais exécutée sans ce clic explicite) ---------- */

.copilote-action-card {
  align-self: flex-start;
  max-width: 92%;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: copilote-action-card-in 0.25s ease;
}
@keyframes copilote-action-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.copilote-action-card__resume {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
}
.copilote-action-card__icone { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-accent); margin-top: 1px; }

.copilote-action-card__actions { display: flex; gap: var(--space-2); }
.copilote-action-card__actions .btn { flex: 1; height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.copilote-action-card__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.copilote-action-card__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

.copilote-action-card__statut { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; }
.copilote-action-card__statut svg { width: 15px; height: 15px; }

.copilote-action-card.is-confirmee { border-color: var(--color-status-success); }
.copilote-action-card.is-confirmee .copilote-action-card__statut { color: var(--color-status-success); }

.copilote-action-card.is-annulee { opacity: 0.65; }
.copilote-action-card.is-annulee .copilote-action-card__resume { text-decoration: line-through; }
.copilote-action-card.is-annulee .copilote-action-card__statut { color: rgba(255, 255, 255, 0.55); }

.copilote-action-card.is-erreur .copilote-action-card__statut { color: var(--color-status-danger); }

.copilote-chat-form { display: flex; gap: var(--space-2); }
.copilote-chat-form input {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
}
.copilote-chat-form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
.copilote-chat-form .btn { height: auto; padding: 0 var(--space-4); }

/* ---------- Mode Vocal ---------- */

.copilote-voix-transcript {
  min-height: 60px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.copilote-voix-transcript .copilote-bubble { max-width: 100%; }

/* ---------- Mode Vocal immersif (overlay plein écran, ouvert par le micro) ---------- */

.copilote-voix-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: rgba(15, 15, 17, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.copilote-voix-overlay.is-open { opacity: 1; pointer-events: auto; }

.copilote-voix-overlay__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 480px;
  width: 100%;
}

.copilote-voix-orb {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--color-accent-hover), var(--color-accent));
  box-shadow: 0 0 40px rgba(226, 96, 60, 0.35);
  transform: scale(1);
  transition: box-shadow 0.15s ease-out, background 0.4s ease;
  animation: iron-orb-connexion 1.6s ease-in-out infinite;
}

.copilote-voix-orb.is-actif { animation: none; }
.copilote-voix-orb.is-ia-parle { background: radial-gradient(circle at 35% 30%, #ffffff, var(--color-accent-light)); }

@keyframes iron-orb-connexion {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.04); opacity: 1; }
}

.copilote-voix-overlay__statut { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-align: center; }

.copilote-voix-overlay__transcript {
  width: 100%;
  max-height: 30vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.copilote-voix-overlay__transcript .copilote-bubble--assistant { color: #ffffff; font-weight: 500; }
.copilote-voix-overlay__transcript .copilote-bubble { background: none; padding: 0; }

/* Bouton "Terminer" partagé par les deux overlays plein écran (Texte et Vocal). */
.copilote-overlay__stop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.copilote-overlay__stop:hover { background: rgba(255, 255, 255, 0.2); }
.copilote-overlay__stop svg { width: 16px; height: 16px; }

/* ---------- Téléphone (≤ 640px) ---------- */

@media (max-width: 720px) {
  h1 { font-size: 24px; }
  .page { padding: var(--space-4) var(--space-4) var(--space-7); }

  /* Header compact : hamburger rond à gauche, logo, puis Copilote / thème / avatar.
     La déconnexion passe dans le tiroir du menu. */
  .app-header__inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .app-header__menu-btn { order: -1; width: 40px; padding: 0; background: var(--color-surface); }
  .app-header__menu-label, .app-header__menu-chevron { display: none; }

  /* Menu plein écran, centré, fond flouté assombri — même traitement que le
     Copilote (.copilote-panel) plutôt qu'un tiroir latéral. Le hidden natif
     coupe la transition (display:none direct) : on le réinterprète ici en
     opacité 0 pour pouvoir animer l'ouverture/fermeture en fondu. */
  .app-header__menu {
    position: fixed;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    background: rgba(15, 15, 17, 0.72);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .app-header__menu.is-open { opacity: 1; pointer-events: auto; }

  .app-header__menu-head { display: block; }
  .app-header__menu-head .app-header__logo,
  .app-header__menu-brand { display: none; }
  .app-header__menu .app-header__menu-close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }
  .app-header__menu .app-header__menu-close:hover { background: rgba(255, 255, 255, 0.2); }
  .app-header__menu-groups { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); width: 100%; max-width: 360px; }
  .app-header__menu-group { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .app-header__menu-section { grid-column: 1 / -1; padding: 0 0 var(--space-1); color: rgba(255, 255, 255, 0.4); }
  .app-header__menu a {
    flex-direction: column;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 84px;
    padding: var(--space-3);
    gap: var(--space-2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    background: transparent;
    font-size: 12px;
    text-align: center;
    white-space: normal;
    color: rgba(255, 255, 255, 0.8);
  }
  .app-header__menu a svg { width: 22px; height: 22px; }
  .app-header__menu a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
  .app-header__menu a.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
  .app-header__menu-backdrop { display: none; }

  /* En-tête de page empilé, action principale pleine largeur. */
  .page__header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .page__header > .btn, .page__header > .cal-toolbar > .btn { width: 100%; }
  .page__header > .cal-toolbar { flex-wrap: wrap; }
  .page__header > .cal-toolbar > .btn { flex: 1 1 140px; width: auto; }

  /* Formulaires en colonne. */
  .form-row { flex-direction: column; gap: 0; align-items: stretch; }
  .form-field--narrow { flex: none; }
  .form-field input[type='color'] { width: 100%; }

  /* Tableaux : lignes sur une seule ligne, défilement horizontal dans la carte. */
  th, td { white-space: nowrap; }
  th { padding: var(--space-3) var(--space-4); }
  td { padding: var(--space-3) var(--space-4); }

  .list-row { flex-wrap: wrap; }

  /* Modales : feuille pleine largeur, toujours ancrée en bas (le slide vient
     du bord inférieur — cf. règle de base .modal-backdrop), plafonnée aux
     3/4 de l'écran comme sur desktop. */
  .modal-backdrop { padding: var(--space-3) 0 0; }
  .modal { padding: var(--space-4); padding-bottom: calc(var(--space-4) + var(--space-6)); max-height: 75vh; }
  .modal__actions { justify-content: stretch; }
  .modal__actions .btn { flex: 1 1 auto; }
  /* Panneau Notifications : reste ancré en haut même sur mobile (cf. règle
     de base .modal-backdrop--haut), la règle ci-dessus ne s'applique qu'aux
     feuilles classiques ancrées en bas. */
  .modal-backdrop--haut { padding: 0 0 var(--space-3); }
  .u-input-qty { width: 56px; }
  .u-input-price { width: 72px; }
  #lignes-table td { padding: var(--space-1); }

  /* Barre date + tâches compactée : on garde la même ligne que le composant
     d'origine (cercle, bouton, icône calendrier), juste réduite en taille —
     jamais de retour à la ligne ni de bouton pleine largeur. */
  .app-datebar__inner { padding: var(--space-1) var(--space-4) var(--space-4); gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
  .app-datebar__groupe { gap: var(--space-2); }
  .app-datebar__circle { width: 56px; height: 56px; font-size: 17px; flex-shrink: 0; }
  .app-datebar__label { font-size: 11px; min-width: 0; overflow: hidden; }
  .app-datebar__label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-datebar__divider { display: none; }
  .app-datebar__tasks { flex: 0 1 auto; min-width: 0; padding: 10px 14px; font-size: 12px; }
  .app-datebar__tasks span, .app-datebar__tasks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-datebar__tasks svg { display: none; }
  .app-datebar__calendar { width: 40px; height: 40px; flex-shrink: 0; }
  .app-datebar__spacer { display: none; }
  /* order:-1 fait passer le bandeau IA avant le groupe date/tâches, sans
     toucher au DOM (l'ordre desktop, côte à côte, reste inchangé). */
  .app-aibanner { order: -1; flex-basis: 100%; flex-direction: column; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
  .app-aibanner__text { align-items: center; }
  .app-aibanner__line1, .app-aibanner__line2 { font-size: 15px; white-space: nowrap; text-align: center; }

  /* Comportement au scroll (mobile uniquement) : header ET barre date restent
     fixés en haut (le header au-dessus, la barre date juste en dessous). Le
     bandeau IA (maintenant en premier) reste toujours visible ; c'est le
     groupe date/tâches/calendrier (en dessous) qui s'efface pour rendre de
     la place à la page. */
  #app-header-mount { position: sticky; top: 0; z-index: 30; background: var(--color-bg-top); }
  .app-header { position: sticky; top: 0; z-index: 30; }
  .app-datebar {
    position: sticky;
    top: var(--header-height);
    z-index: 25;
    background: var(--color-bg-top);
    transition: box-shadow 0.2s ease;
  }
  body.is-scrolled .app-datebar { box-shadow: 0 4px 16px rgba(17, 23, 39, 0.08); }

  .app-datebar__inner { transition: padding 0.25s ease, gap 0.25s ease; }
  body.is-scrolled .app-datebar__inner { padding-top: 4px; padding-bottom: var(--space-2); }

  .app-datebar__groupe { overflow: hidden; max-height: 90px; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; }
  body.is-scrolled .app-datebar__groupe { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }

  /* Juste l'icône micro, sans bouton rond autour (fond/ombre retirés). */
  .app-aibanner__mic { width: auto; height: auto; background: none; box-shadow: none; color: var(--color-text-muted); }
  .app-aibanner__mic:hover { box-shadow: none; transform: none; color: var(--color-accent); }
  .app-aibanner__mic svg { width: 26px; height: 26px; }

  /* Cartes de liste : 3 petites / 2 grandes par ligne, contenu compacté. */
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .cards--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .tile { padding: 10px; border-radius: 16px; gap: 4px; }
  .tile--lg { padding: 12px; }
  .tile__kicker { font-size: 10px; }
  .tile__title { font-size: 12px; }
  .tile--lg .tile__title { font-size: 14px; }
  .tile__meta { font-size: 11px; }
  .tile__value { font-size: 12px; }
  .tile .badge { font-size: 10px; padding: 3px 7px; }
  .tile__avatar { width: 32px; height: 32px; font-size: 11px; }
  .tile__stats { grid-template-columns: 1fr; }

  /* Liste clients : contact masqué (nom + rôle suffisent), éléments resserrés. */
  .client-row { padding: var(--space-2); gap: var(--space-2); }
  .client-row__contact { display: none; }
  .client-row__avatar, .circle-btn { width: 36px; height: 36px; }
  .client-row__titre p { font-size: 14px; }

  /* Timeline projet en 2 × 2. */
  .timeline { flex-wrap: wrap; }
  .timeline__step { flex: 1 1 45%; }

  /* Calendrier : cases plus basses. */
  .cal-month__grid { grid-auto-rows: 76px; }
  .cal-month__day { padding: var(--space-1); }
  .cal-month__weekdays span { padding: var(--space-2) var(--space-1); font-size: 10px; text-align: center; }
  .cal-month__day-number { font-size: 11px; }
  .cal-chip { font-size: 10px; padding: 1px 6px; }
  .cal-time-gutter { flex-basis: 44px; }

  /* Vue Jour : une seule colonne, occupe toute la largeur — pas de
     défilement horizontal forcé (contrairement à avant). */
  .cal-time-grid--jour { min-width: 0; }

  /* Vue Semaine : deux jours visibles à la fois, on balaie latéralement pour
     dérouler le reste de la semaine (scroll-snap plutôt qu'un vrai geste
     personnalisé, pour rester fluide/natif). */
  .cal-time-grid--semaine { min-width: 0; }
  .cal-time-grid--semaine .cal-time-days {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* #cal-container (l'ancêtre) restreint le pan au vertical pour laisser le
       geste JS gérer le changement de semaine/mois/jour — ici on le rouvre à
       l'horizontal pour que le défilement natif entre les jours fonctionne. */
    touch-action: pan-x pan-y;
  }
  .cal-time-grid--semaine .cal-time-day {
    flex: 0 0 calc(50% - 1px);
    scroll-snap-align: start;
  }

  /* Copilote : overlay plein écran, padding resserré sur mobile. */
  .copilote-panel { padding: var(--space-4); }
}

/* ---------- Messagerie (IMAP/SMTP) — mobile-first façon Gmail mobile,
   3 colonnes (dossiers / liste / lecture) façon Gmail desktop à partir de
   860px. ---------- */

.page--mail { display: flex; flex-direction: column; }

.mail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.mail-sidebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mail-sidebar::-webkit-scrollbar { display: none; }

.mail-compose-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: background 0.15s ease;
}
.mail-compose-btn:hover { background: var(--color-accent-hover); }

.mail-folders { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.mail-folders::-webkit-scrollbar { display: none; }

.mail-folder {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--color-surface-hollow);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mail-folder.is-active { background: var(--color-ink); color: var(--color-ink-contrast); }

.mail-list-pane {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.mail-list-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}
.mail-list-pane__head h2 { margin: 0; font-size: 15px; }

.mail-list { display: flex; flex-direction: column; }

.mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-soft);
  transition: background 0.15s ease;
}
.mail-row:hover { background: var(--color-surface-hollow); }
.mail-row:last-child { border-bottom: none; }

.mail-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mail-row__expediteur {
  width: 180px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row__sujet {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row__date { flex-shrink: 0; font-size: 12px; color: var(--color-text-faint); width: 64px; text-align: right; }

.mail-row.is-non-lue .mail-row__expediteur,
.mail-row.is-non-lue .mail-row__sujet { font-weight: 700; color: var(--color-text); }

.mail-row__etoile {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  display: flex;
  padding: 2px;
}
.mail-row__etoile.is-active { color: #D9A428; }

.mail-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: 12px;
  color: var(--color-text-muted);
}

.mail-reading-pane {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  flex-direction: column;
}

.mail-reading-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-faint);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.mail-reading__toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.mail-reading__toolbar-spacer { flex: 1; }

.mail-reading__sujet { margin: 0 0 var(--space-4); font-size: 19px; }

.mail-reading__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-4);
}

.mail-reading__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mail-reading__meta-texte { flex: 1; min-width: 0; }
.mail-reading__de { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.mail-reading__a { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); }
.mail-reading__date { flex-shrink: 0; font-size: 12px; color: var(--color-text-muted); }

.mail-reading__corps { font-size: 14px; color: var(--color-text); }
.mail-reading__iframe { width: 100%; border: none; min-height: 120px; }
.mail-reading__texte { white-space: pre-wrap; word-wrap: break-word; }

.mail-reading__pieces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.mail-piece {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-surface-hollow);
  color: var(--color-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}
.mail-piece:hover { background: var(--color-accent-light); color: var(--color-accent); }

/* Mobile : la lecture d'un message s'ouvre en plein écran par-dessus la
   liste (façon Gmail mobile) plutôt qu'en second panneau juxtaposé. */
.mail-layout--lecture .mail-sidebar,
.mail-layout--lecture .mail-list-pane { display: none; }
.mail-layout--lecture .mail-reading-pane {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  border-radius: 0;
  border: none;
  overflow-y: auto;
  padding-top: max(var(--space-5), env(safe-area-inset-top));
}

@media (min-width: 860px) {
  .mail-layout {
    display: grid;
    grid-template-columns: 200px 360px 1fr;
    align-items: start;
    gap: var(--space-4);
  }
  .mail-sidebar { flex-direction: column; align-items: stretch; overflow: visible; grid-row: 1 / 3; }
  .mail-compose-btn { justify-content: center; }
  .mail-folders { flex-direction: column; }
  .mail-folder { justify-content: flex-start; }
  .mail-list-pane { grid-column: 2; height: calc(100vh - var(--header-height) - 220px); min-height: 420px; overflow-y: auto; }
  .mail-list-pane__head { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
  .mail-reading-pane {
    grid-column: 3;
    display: flex !important;
    position: static;
    height: calc(100vh - var(--header-height) - 220px);
    min-height: 420px;
    overflow-y: auto;
  }
  .mail-layout--lecture .mail-sidebar,
  .mail-layout--lecture .mail-list-pane { display: flex; }
  .mail-layout--lecture .mail-reading-pane {
    position: static;
    inset: auto;
    z-index: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    padding-top: var(--space-5);
  }
  #mail-btn-retour { display: none; }
}

@media (max-width: 720px) {
  .mail-compose-btn {
    position: fixed;
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    z-index: 40;
  }
  .mail-compose-btn span { display: none; }
  .mail-row__expediteur { width: auto; flex: 1 1 auto; order: 1; }
  .mail-row__date { order: 2; }
  .mail-row__sujet { order: 3; flex-basis: 100%; width: 100%; }
  .mail-row__etoile { order: 4; }
}