/* ==================================================================
   REFONTE ESTHÉTIQUE — passe 1 : accès sécurisé, sidebar, header, accueil
   ==================================================================
   Feuille ADDITIVE, chargée après app.css. Aucune règle existante n'est
   modifiée : retirer la ligne <link> de index.html suffit à revenir à
   l'état antérieur. Aucun changement fonctionnel.

   Les visuels ne sont posés qu'aux emplacements prévus par le brief :
   fond de l'écran d'accès, et hero d'accueil. Aucune photo derrière une
   donnée réelle, un tableau, un formulaire ou une liste.                */

/* ---------- 1. ÉCRAN D'ACCÈS SÉCURISÉ ---------- */

.app-lock-overlay {
  background:
    linear-gradient(104deg, rgba(6, 19, 41, 0.94) 0%, rgba(6, 19, 41, 0.72) 42%, rgba(6, 19, 41, 0.34) 100%),
    url("/v5/assets/ambiance/acces-securise.jpg") center / cover no-repeat,
    var(--navy-950, #061329);
  /* Carte vers le centre-gauche, comme demandé, plutôt que centrée. */
  display: grid;
  place-items: center start;
  padding: 0 clamp(24px, 9vw, 140px);
}

/* ============================================================
   Rentabilité & automatisations — extension du langage existant
   ============================================================ */
.profitability-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.profitability-filters label { display: grid; gap: 6px; min-width: 0; }
.profitability-filters label > span { color: var(--color-text-muted, #66758d); font-size: .78rem; font-weight: 750; }
.profitability-filters input,
.profitability-filters select { width: 100%; min-width: 0; }
.profitability-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(125px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.profitability-kpis article { padding: 16px; min-width: 0; }
.profitability-kpis span { color: var(--color-text-muted, #66758d); font-size: .78rem; }
.profitability-kpis strong { display: block; margin-top: 8px; font-size: clamp(1rem, 1.4vw, 1.35rem); overflow-wrap: anywhere; }
.profitability-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .9fr); gap: 16px; align-items: start; }
.profitability-layout > main,
.profitability-layout > aside { display: grid; gap: 16px; min-width: 0; }
.profitability-job-list,
.suggestion-list,
.maintenance-list { display: grid; gap: 10px; }
.profitability-job {
  width: 100%;
  border: 1px solid var(--color-border, #dbe4ef);
  border-radius: var(--radius-md, 16px);
  background: #fff;
  color: inherit;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(82px, .7fr)) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.profitability-job:hover { border-color: var(--color-primary, #0877f9); box-shadow: 0 8px 26px rgb(11 76 153 / 8%); }
.profitability-job > span { min-width: 0; }
.profitability-job span strong { display: block; overflow-wrap: anywhere; }
.profitability-job small { display: block; color: var(--color-text-muted, #738299); margin-top: 3px; }
.analytics-table { overflow-x: auto; }
.analytics-table > div { min-width: 720px; display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(90px, 1fr)); gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--color-border, #e4eaf1); }
.analytics-table .analytics-head { color: var(--color-text-muted, #66758d); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.objective-actual { margin-bottom: 16px; }
.objective-actual .analytics-table > div { min-width: 520px; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(90px, 1fr)); }
.suggestion-list article { border: 1px solid var(--color-border, #e0e7f0); border-radius: var(--radius-md, 16px); padding: 14px; }
.suggestion-list article p { margin: 7px 0 10px; color: var(--color-text-muted, #66758d); line-height: 1.45; }
.suggestion-list article small { display: block; color: var(--color-primary, #0877f9); margin-top: 3px; }
.maintenance-list article { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px 0; border-bottom: 1px solid var(--color-border, #e4eaf1); }
.maintenance-list article span { color: var(--color-text-muted, #66758d); }
.maintenance-list article small { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.profitability-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.profitability-mini p { margin: 0; display: grid; gap: 3px; }
.profitability-mini p span { color: var(--color-text-muted, #66758d); font-size: .75rem; }
.profitability-missing { display: block; margin-top: 10px; color: #9a6100; line-height: 1.4; }
.planning-intelligence { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 16px; margin-bottom: 16px; }
.planning-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.planning-summary-day { border: 1px solid var(--color-border, #e0e7f0); border-radius: var(--radius-md, 16px); padding: 12px; display: grid; gap: 4px; }
.planning-summary-day span { color: var(--color-text-muted, #66758d); font-size: .8rem; }
.planning-weather-alerts article { background: #fff8e8; border: 1px solid #f2d79a; border-radius: var(--radius-md, 16px); padding: 12px; margin-top: 8px; }
.planning-weather-alerts article p { margin: 5px 0; }
.calendar-weather { display: block; margin-top: 4px; font-size: .68rem; opacity: .82; }
.calendar-weather.is-warning { color: #a45d00; font-weight: 800; }

@media (max-width: 1180px) {
  .profitability-kpis { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
  .profitability-job { grid-template-columns: minmax(180px, 1.3fr) repeat(2, minmax(90px, .7fr)) auto; }
  .profitability-job > span:nth-child(4), .profitability-job > span:nth-child(5) { display: none; }
}

@media (max-width: 820px) {
  .profitability-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profitability-filters label:last-child { grid-column: 1 / -1; }
  .profitability-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profitability-layout,
  .planning-intelligence { grid-template-columns: 1fr; }
  .profitability-job { grid-template-columns: 1fr auto; }
  .profitability-job > span:nth-child(n+2) { display: none; }
  .profitability-job .status-badge { justify-self: end; }
}

@media (max-width: 520px) {
  .profitability-filters { grid-template-columns: 1fr; padding: 12px; }
  .profitability-filters label:last-child { grid-column: auto; }
  .profitability-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .profitability-kpis article { padding: 12px; }
  .profitability-mini { grid-template-columns: 1fr; }
  .suggestion-list .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .suggestion-list .button-row .button:first-child { grid-column: 1 / -1; }
}

/* ============================================================
   Chantiers & interventions — même langage visuel DRONELIA
   ============================================================ */
:root { --navy: var(--navy-950); --blue: var(--blue-600); --muted: var(--ink-600); --success: var(--green-700); --shadow: var(--shadow-md); }
.chantier-list-view,
.chantier-cockpit,
.checklist-view,
.field-view { display: grid; gap: 20px; min-width: 0; }
.chantier-filters { display: grid; grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 12px; padding: 16px; }
.chantier-filters select { min-width: 0; width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; color: var(--navy); }
.chantier-tabs { display: flex; gap: 6px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; scrollbar-width: thin; }
.chantier-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 750; }
.chantier-tabs button.is-active { background: var(--blue); color: #fff; }
.chantier-tabs button span { margin-left: 5px; font-size: 11px; opacity: .8; }
.chantier-list { display: grid; gap: 12px; min-width: 0; }
.chantier-row { display: grid; grid-template-columns: 90px minmax(170px, 1.25fr) minmax(180px, 1.25fr) minmax(150px, 1fr) auto auto; gap: 18px; align-items: center; padding: 18px; min-width: 0; }
.chantier-row > div { min-width: 0; display: grid; gap: 4px; }
.chantier-row strong { overflow-wrap: anywhere; }
.chantier-row span:not(.status-badge) { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.chantier-time { padding-right: 14px; border-right: 1px solid var(--line); }
.chantier-hero { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 18px; color: #fff; background: linear-gradient(110deg, #061a36, #0b315f); box-shadow: var(--shadow); }
.chantier-hero h1 { margin: 3px 0; font-size: clamp(24px, 3vw, 34px); }
.chantier-hero p, .chantier-hero span { margin: 0; color: #b9c9df; }
.chantier-hero .status-badge { color: inherit; }
.chantier-cockpit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.chantier-cockpit-grid > main, .chantier-cockpit-grid > aside { display: grid; gap: 16px; min-width: 0; }
.chantier-cockpit-grid > aside { position: sticky; top: calc(var(--topbar-height, 88px) + 18px); }
.chantier-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cockpit-card, .cockpit-wide, .chantier-cockpit-grid > aside > .card { padding: 20px; min-width: 0; }
.cockpit-card > p, .cockpit-card > strong { display: block; margin: 7px 0; overflow-wrap: anywhere; }
.cockpit-card .muted, .cockpit-wide .muted { color: var(--muted); }
.weather-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.weather-values span { display: grid; gap: 3px; padding: 9px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 12px; }
.weather-values b { color: var(--navy); }
.weather-advice { width: fit-content; padding: 6px 10px; border-radius: 999px; color: var(--success); background: #e9f8ef; font-weight: 750; }
.compact-list { display: grid; gap: 8px; }
.compact-list > span { display: grid; padding: 10px; border-radius: 10px; background: var(--surface-soft); }
.compact-list small { color: var(--muted); }
.chantier-actions { display: grid; gap: 10px; }
.chantier-actions .section-title { margin-bottom: 4px; }
.chantier-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.chantier-media-grid button { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.chantier-media-grid img { display: block; width: 100%; height: 96px; object-fit: cover; background: var(--surface-soft); }
.chantier-media-grid span { display: block; padding: 8px 10px; font-weight: 700; }
.client-chantier-row { width: 100%; grid-template-columns: 1fr auto auto; text-align: left; }

.checklist-heading { display: grid; grid-template-columns: 1fr minmax(180px, 260px); gap: 20px; align-items: end; }
.checklist-heading h1 { margin: 4px 0; font-size: clamp(28px, 4vw, 40px); }
.checklist-heading p { margin: 0; color: var(--muted); }
.checklist-progress { display: grid; gap: 4px; }
.checklist-progress strong { font-size: 28px; }
.checklist-progress span { color: var(--muted); }
.checklist-progress progress { width: 100%; accent-color: var(--blue); }
.checklist-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.checklist-layout > main, .checklist-layout > aside { display: grid; gap: 12px; min-width: 0; }
.checklist-layout > aside { position: sticky; top: calc(var(--topbar-height, 88px) + 18px); }
.checklist-layout > aside .card { padding: 18px; }
.checklist-layout > aside p { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.checklist-section { padding: 0 18px 8px; overflow: hidden; }
.checklist-section > header { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; }
.checklist-section > header > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 800; }
.checklist-section h2 { margin: 0; font-size: 17px; }
.checklist-section header strong { color: var(--success); }
.checklist-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 46px; border-top: 1px solid var(--line); cursor: pointer; }
.checklist-item input { width: 22px; height: 22px; accent-color: var(--success); }
.checklist-item svg { color: var(--success); }
.checklist-notes { display: grid; gap: 8px; padding: 18px; font-weight: 750; }
.checklist-notes textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; font-weight: 400; }
.checklist-actions { position: sticky; z-index: 4; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

.field-view { max-width: 860px; margin-inline: auto; }
.field-mission { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #061a36, #0b315f); }
.field-mission .dossier-back { color: #fff; }
.field-mission > div { display: grid; min-width: 0; }
.field-mission > div strong, .field-mission > div span { overflow-wrap: anywhere; }
.field-mission > div span { color: #b9c9df; }
.field-panel { padding: 22px; }
.field-panel > header { display: flex; justify-content: space-between; gap: 16px; }
.field-panel > header h1 { margin: 0; }
.field-panel > header p { margin: 4px 0; color: var(--muted); }
.field-panel > header > strong { align-self: start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.field-progress { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; }
.field-progress::before { content: ""; position: absolute; }
.field-progress span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-weight: 800; }
.field-progress span.done { border-color: var(--blue); color: #fff; background: var(--blue); }
.field-progress span.active { border-color: var(--blue); color: var(--blue); }
.field-steps { display: grid; gap: 10px; }
.field-steps article { display: grid; grid-template-columns: 28px 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; }
.field-steps article > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--muted); font-size: 12px; font-weight: 800; }
.field-steps article > svg { width: 38px; height: 38px; padding: 9px; border-radius: 10px; color: var(--blue); background: #edf5ff; }
.field-steps article > div { display: grid; min-width: 0; }
.field-steps small { color: var(--muted); overflow-wrap: anywhere; }
.field-sync { display: flex; gap: 10px; margin: 16px 0 0; padding: 14px; border-radius: 12px; color: #19539a; background: #edf5ff; }

@media (max-width: 1100px) {
  .chantier-row { grid-template-columns: 80px 1fr 1fr auto; }
  .chantier-row > div:nth-child(4) { display: none; }
  .chantier-cockpit-grid, .checklist-layout { grid-template-columns: 1fr; }
  .chantier-cockpit-grid > aside, .checklist-layout > aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .chantier-filters { grid-template-columns: 1fr 1fr; }
  .chantier-filters .inline-search { grid-column: 1 / -1; }
  .chantier-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
  .chantier-row > div:nth-child(3), .chantier-row > div:nth-child(4) { grid-column: 2 / -1; }
  .chantier-row > div:nth-child(5) { grid-column: 2; }
  .chantier-row > .button { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .chantier-time { grid-row: 1 / 3; }
  .chantier-hero { grid-template-columns: 1fr auto; padding: 18px; }
  .chantier-hero .button { grid-column: 1 / -1; width: 100%; }
  .chantier-card-grid { grid-template-columns: 1fr; }
  .chantier-cockpit-grid > aside, .checklist-layout > aside { grid-template-columns: 1fr; }
  .checklist-heading { grid-template-columns: 1fr; }
  .checklist-actions { display: grid; grid-template-columns: 1fr; }
  .checklist-actions .button { width: 100%; }
  .field-panel { padding: 14px; }
  .field-steps article { grid-template-columns: 26px 36px minmax(0, 1fr); }
  .field-steps article > .button { grid-column: 2 / -1; width: 100%; min-height: 44px; }
  .field-mission { grid-template-columns: 1fr auto; }
  .field-mission .dossier-back { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 480px) {
  .chantier-filters { grid-template-columns: 1fr; }
  .chantier-row { grid-template-columns: 54px minmax(0, 1fr); }
  .chantier-row > .button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .chantier-row > div:nth-child(5) { grid-column: 2; }
  .weather-values { grid-template-columns: 1fr; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .checklist-actions { position: static; }
  .field-panel { padding: 12px; }
  .field-steps article { min-height: 60px; }
}

.app-lock-overlay .app-lock-card {
  width: min(410px, 100%);
  /* Verre dépoli : translucide, jamais un aplat blanc opaque. */
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow:
    0 32px 90px rgba(3, 11, 26, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 34px 32px 28px;
}

.app-lock-overlay .app-lock-card > img {
  width: 116px;
  height: auto;
  margin-bottom: 20px;
}

.app-lock-overlay .app-lock-card .eyebrow {
  color: var(--blue-600, #0969e8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.app-lock-overlay .app-lock-card h2 {
  margin: 6px 0 8px;
  font-size: 26px;
  line-height: 1.15;
}

.app-lock-overlay .app-lock-card #appLockHelp {
  margin: 0 0 20px;
  color: var(--slate-600, #5f6f86);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- 2. SIDEBAR ---------- */

.app-shell .sidebar {
  /* Bleu nuit légèrement plus profond que l'actuel. */
  background: linear-gradient(180deg, #04101f 0%, #061529 58%, #071a33 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.app-shell .sidebar .nav-item {
  position: relative;
  border-radius: 9px;
  color: #9fb2ca;
  font-weight: 600;
  transition: background-color 0.16s ease, color 0.16s ease;
}

/* Les icônes sont des <img> : « currentColor » y retombe sur du noir et
   ne peut pas être héritée. On les teinte donc par filtre — gris-bleu au
   repos, blanches sur l'élément actif. C'est ce qui les rendait ternes. */
/* Plus aucun filtre : le SVG inline hérite de la couleur du bouton, qui vient
   des jetons. Une seule mécanique pour toute l'application. */
.app-shell .sidebar .nav-item > svg.ic {
  width: 18px;
  height: 18px;
}

.app-shell .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #d5e2f2;
}

.app-shell .sidebar .nav-item.is-active {
  /* Fond bleu atténué, pas un gros pavé plein. */
  background: rgba(22, 128, 255, 0.14);
  color: #ffffff;
}

/* Barre lumineuse à gauche de l'élément actif. */
.app-shell .sidebar .nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: var(--blue-500, #1680ff);
  box-shadow: 0 0 10px rgba(22, 128, 255, 0.75);
}

/* L'icône active suit simplement la couleur blanche du bouton. */

.app-shell .sidebar .sidebar-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

/* Profil utilisateur plus compact. */
.app-shell .sidebar .operator-card {
  padding: 8px 10px;
  gap: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
}
.app-shell .sidebar .operator-card .operator-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.app-shell .sidebar .operator-card strong { font-size: 12.5px; }
.app-shell .sidebar .operator-card small { font-size: 10.5px; opacity: 0.66; }

/* ---------- 3. HEADER GLOBAL ---------- */

.workspace > .topbar {
  background: rgba(248, 251, 255, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(15, 45, 90, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* Recherche en capsule. */
.workspace > .topbar .global-search {
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.1);
  box-shadow: 0 1px 2px rgba(10, 32, 66, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.workspace > .topbar .global-search:focus-within {
  border-color: rgba(22, 128, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(22, 128, 255, 0.13);
}

/* Météo en capsule compacte. */
.workspace > .topbar .topbar-weather {
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.1);
}
.workspace > .topbar .topbar-weather strong { font-size: 13px; }
.workspace > .topbar .topbar-weather small { font-size: 10.5px; }

/* Synchronisation : une pastille, pas un gros bloc. */
.workspace > .topbar .topbar-sync {
  border-radius: 999px;
  padding: 6px 13px;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.1);
  font-size: 12.5px;
  font-weight: 650;
}
/* Deux lignes : l'état sur la première, l'ancienneté réelle sur la seconde,
   en plus petit. On ne remplace jamais l'une par l'autre. */
.workspace > .topbar .topbar-sync .sync-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
}
.workspace > .topbar .topbar-sync .sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink, #0f172a);
}
.workspace > .topbar .topbar-sync small {
  font-size: 10.5px;
  font-weight: 550;
  color: var(--muted, #64748b);
}
.workspace > .topbar .topbar-sync .sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
.workspace > .topbar .topbar-sync .sync-dot.is-stale {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.workspace > .topbar .topbar-sync .sync-dot.is-idle {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

/* ---------- 4. HERO D'ACCUEIL ---------- */

/* Petit hero d'outil — 150 à 190 px — et non un hero de site vitrine.
   La photo occupe la droite et se fond dans le bleu nuit vers la gauche,
   là où se trouve le texte : aucune donnée réelle n'est posée dessus. */
.page-heading.page-heading--accueil {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  padding: 26px 30px;
  border-radius: 18px;
  background:
    linear-gradient(96deg, #061329 0%, #071e3c 44%, rgba(7, 30, 60, 0.55) 68%, rgba(7, 30, 60, 0.1) 100%),
    var(--hero-photo) right center / cover no-repeat,
    #061329;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 44px rgba(6, 19, 41, 0.16);
}
.page-heading--accueil { --hero-photo: url("/v5/assets/ambiance/accueil-hero.jpg"); }

.page-heading.page-heading--accueil .eyebrow { color: #7fb0ff; }
.page-heading.page-heading--accueil h1 { color: #ffffff; }
.page-heading.page-heading--accueil > div > p {
  color: rgba(224, 234, 249, 0.82);
  max-width: 46ch;
}

/* Les actions restent lisibles sur le fond sombre. */
.page-heading.page-heading--accueil .heading-actions .button:not(.primary) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

@media (max-width: 900px) {
  .page-heading.page-heading--accueil {
    min-height: 0;
    background-image: linear-gradient(96deg, #061329 0%, #071e3c 78%, rgba(7, 30, 60, 0.7) 100%);
  }
  .app-lock-overlay { place-items: center; padding: 0 20px; }
}


/* ---------- 5. ICÔNES : SVG inline piloté par les jetons ----------
   icon() rend désormais un <svg class="ic"> au lieu d'une <img>. Le tracé
   utilise stroke="currentColor" : sa couleur suit donc celle du texte, donc
   les jetons du thème. Dans une <img>, currentColor retombait toujours sur du
   noir — c'est ce qui rendait tous les pictogrammes ternes.

   Les règles historiques ciblaient « img » ; on les redéclare à l'identique
   pour le SVG afin que tailles, marges et alignements ne bougent nulle part. */

svg.ic {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  color: inherit;
}

.compose-signature-notice > svg.ic { width: 20px; height: 20px; }
.nav-item svg.ic { width: 19px; height: 19px; opacity: 0.66; }
.nav-item.is-active svg.ic { opacity: 1; }
.operator-card .icon-button svg.ic { opacity: 0.65; }
.global-search > svg.ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: 0.58; }
.search-result svg.ic { width: 17px; height: 17px; }
.topbar-weather > svg.ic { width: 24px; height: 24px; }
.notification-item > svg.ic { width: 18px; height: 18px; margin-top: 2px; }
.inline-search > svg.ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.55; }
.appointment-card > svg.ic,
.task-card > svg.ic,
.request-card > svg.ic { width: 17px; height: 17px; opacity: 0.55; }
.weather-current > svg.ic { width: 45px; height: 45px; }
.client-card-footer svg.ic { width: 14px; height: 14px; }
.client-card-footer > svg.ic { width: 16px; height: 16px; opacity: 0.55; }
.dossier-back svg.ic { width: 16px; height: 16px; }
.next-action-icon svg.ic { width: 23px; height: 23px; }
.contact-item svg.ic { width: 17px; height: 17px; opacity: 0.7; }
.site-card > span svg.ic { width: 17px; height: 17px; }
.site-card > svg.ic { width: 15px; height: 15px; opacity: 0.5; }
.document-card > span svg.ic,
.payment-card > span svg.ic { width: 17px; height: 17px; }
.document-card > svg.ic,
.payment-card > svg.ic { width: 15px; height: 15px; opacity: 0.55; }
.media-card svg.ic { width: 100%; height: 100%; object-fit: cover; }
.media-video-placeholder svg.ic { }
.prospect-row.header svg.ic,
.prospect-row:not(.header) span svg.ic { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.mail-folder svg.ic { width: 16px; height: 16px; }
.attachment-card > svg.ic { width:18px; }
.media-settings svg.ic { width:15px; }
.mail-empty svg.ic { width: 28px; height: 28px; margin-bottom: 10px; opacity: 0.55; }
.module-card > span svg.ic { width: 19px; height: 19px; }
.module-card > svg.ic { width: 16px; height: 16px; opacity: 0.5; margin: 14px 0 0 auto; }
.topbar-sync > svg.ic { width: 16px; height: 16px; opacity: 0.7; }
.topbar-sync.is-syncing > svg.ic { animation: dn-sync-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .topbar-sync.is-syncing > svg.ic { animation: none; } }
.prospect-alerte svg.ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.prospect-section-title svg.ic { width: 14px; height: 14px; }
.prospect-sync svg.ic { width: 13px; height: 13px; }
.button svg.ic { width: 17px; height: 17px; }
.icon-button svg.ic { width: 18px; height: 18px; }
.section-icon svg.ic { width: 18px; height: 18px; }
.field-icon svg.ic { width: 100%; height: 100%; opacity: .55; }
.empty-state svg.ic { width: 24px; height: 24px; margin: 0 auto 11px; opacity: 0.72; }
.viewer-body iframe,
.viewer-body svg.ic,
.viewer-body video { width: 100%; height: 100%; object-fit: contain; border: 0; }
.viewer-body svg.ic { transition: transform 160ms ease; }
.toast svg.ic { width: 18px; height: 18px; }
.menu-item svg.ic { width: 16px; height: 16px; }
.row-trash svg.ic { width: 17px; height: 17px; }
svg.ic { max-width: 100%; display: block; }

/* ---------- 6. ÉTATS VIDES ----------
   Plus de grand fond illustré. Un état vide est un message de travail :
   compact, un pictogramme dans une pastille, une phrase claire, et
   éventuellement une action. Il ne prend jamais la place d'une carte
   pleine. Le support `visuel` d'emptyState() reste disponible mais aucun
   écran ne s'en sert : plus aucune image fantôme derrière du texte.      */
.empty-state {
  padding: 26px 22px 28px;
  text-align: center;
}
.empty-state > svg.ic {
  width: 20px;
  height: 20px;
  margin: 0 auto 12px;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 12px;
  background: var(--dn-niveau2, #e3ebf8);
  color: var(--blue-700, #1d4ed8);
  opacity: 1;
}
.empty-state h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  color: var(--ink-950, #101b2d);
}
.empty-state p {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-600, #5f6f86);
}
/* Si un visuel est un jour repassé en paramètre, il reste discret et dans
   un coin — jamais un fond de carte. */
.empty-state.has-illus .empty-illus {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.5;
}
.empty-state.has-illus { position: relative; }

/* ---------- 7. CARTES DE LIGNE : LA QUATRIÈME COLONNE ----------
   La corbeille de ligne a été ajoutée après coup dans les cartes de tâche,
   alors que la grille n'avait que trois colonnes : la flèche passait à la
   ligne suivante et la carte gagnait une trentaine de pixels de hauteur.
   Une colonne de plus suffit ; les cartes à trois enfants ne bougent pas.  */
.appointment-card,
.task-card,
.request-card {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* ---------- 8. CLIENTS ----------
   La carte existante est bonne : on ne la refait pas. On remonte seulement
   la lisibilité (sous-titre à 11 px, trop petit) et on sépare le pied de
   carte par un filet, pour que l'œil distingue l'identité de l'action.   */
.client-card > p {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.client-card h2 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
}
.client-card-footer {
  padding-top: 11px;
  border-top: 1px solid rgba(15, 45, 90, 0.08);
}
.client-card { min-height: 196px; }
/* Bandeau des demandes du site : surface propre et cliquable, pas un aplat. */
.request-band .request-mini,
.request-band-list > * {
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.09);
  border-radius: 13px;
}

/* ---------- 9. PLANNING ----------
   Aucun visuel derrière la grille : c'est une donnée, elle reste sur une
   surface propre. Le travail porte sur la lisibilité — plusieurs libellés
   étaient à 8 ou 9 px, en dessous du seuil confortable — et sur le repère
   du jour courant, qui doit se voir d'un coup d'œil.                      */
.calendar-day-head span {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
}
.calendar-day-head strong {
  margin-top: 4px;
  font-size: 17px;
}
/* Le jour courant : une pastille sur le quantième plutôt qu'un aplat sur
   toute la colonne, qui écrasait les rendez-vous du jour. */
.calendar-day-head.today {
  background: transparent;
}
.calendar-day-head.today span {
  color: var(--blue-700, #1d4ed8);
}
.calendar-day-head.today strong {
  min-width: 30px;
  padding: 3px 0;
  border-radius: 999px;
  background: var(--blue-600, #2563eb);
  color: #fff;
}
.calendar-time {
  padding-top: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.calendar-event {
  border-radius: 10px;
  padding: 8px 9px;
}
.calendar-event strong {
  font-size: 11.5px;
}
.calendar-event span {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-700, #334155);
}
/* La colonne du jour reste identifiable sans voiler les cellules. */
.calendar-week .calendar-day-head.today {
  box-shadow: inset 0 -2px 0 var(--blue-600, #2563eb);
}

/* ---------- 10. PROSPECTION ----------
   Le repli des filtres avait été posé sans habillage : le navigateur
   affichait son propre triangle sur une ligne à part, au-dessus du libellé.
   On lui donne la forme d'un bouton discret, marqueur compris.           */
.prospect-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 13px;
  border: 1px solid rgba(15, 45, 90, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink-700, #334155);
  font: 650 12.5px var(--font-display);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.prospect-filters > summary::-webkit-details-marker,
.prospect-filters > summary::marker {
  display: none;
  content: "";
}
.prospect-filters > summary:hover {
  border-color: #bfd5ef;
  background: #f6faff;
}
/* Le compteur de filtres actifs : une pastille, pas de l'italique. */
.prospect-filters > summary em {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--blue-600, #2563eb);
  color: #fff;
  font: 700 11px var(--font-display);
  font-style: normal;
}
/* Chevron maison, orienté selon l'état du repli. */
.prospect-filters > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.prospect-filters[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.prospect-filters[open] > summary {
  margin-bottom: 12px;
}

/* ---------- 10 bis. PROSPECTION : LA LISTE ----------
   C'est l'écran où l'on descend le plus loin (plusieurs milliers de fiches).
   Trois gênes concrètes : l'en-tête de colonnes disparaît au défilement, la
   ligne survolée ne se distingue pas assez pour suivre l'œil jusqu'au bout
   de la ligne, et une fiche cochée ne se voit qu'à sa case.               */
.prospect-row.header {
  position: sticky;
  top: var(--topbar, 64px);
  z-index: 3;
  padding: 9px 15px;
  font-size: 9.5px;
  color: var(--muted, #64748b);
  /* Fond opaque : sans lui les lignes défilantes passent au travers. */
  background: var(--bg, #eef2fa);
  box-shadow: 0 6px 10px -8px rgba(15, 45, 90, 0.28);
}
/* Le point de collage ne tombe pas exactement sous la barre du haut : une
   bande de quelques pixels resterait transparente et laisserait défiler les
   lignes au travers. Ce bandeau la bouche sans dépendre d'un écart exact. */
.prospect-row.header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
  background: var(--bg, #eef2fa);
}
.prospect-row:not(.header) {
  padding: 10px 14px;
}
.prospect-row:not(.header):hover {
  background: #f7fbff;
  border-color: #bfd5ef;
}
/* Fiche cochée : la ligne entière le dit, pas seulement la case. */
.prospect-row:not(.header):has(.prospect-checkbox:checked) {
  border-color: var(--blue-600, #2563eb);
  background: var(--blue-50, #eff6ff);
  box-shadow: inset 3px 0 0 var(--blue-600, #2563eb);
}
/* Les lignes secondaires étaient à 9 px : sous le seuil de lecture confortable. */
.prospect-row strong { font-size: 12.5px; }
.prospect-row span { margin-top: 2px; font-size: 10.5px; }
.prospect-row.header > span { font-size: 9.5px; }
.prospect-list { gap: 6px; }
/* Pagination : un vrai bloc de navigation, pas trois éléments flottants. */
.pagination {
  margin-top: 20px;
  padding: 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.09);
  width: fit-content;
  margin-inline: auto;
}
.pagination span { font-size: 12px; font-weight: 600; }

/* Carte sans en-tête (messagerie non connectée) : l'illustration occupe la
   carte entière, donc les quatre coins sont arrondis et le haut remonte
   jusqu'au bord. Sur les cartes à en-tête, seul le bas est concerné.     */
.card > .empty-state.has-illus:first-child {
  margin-top: -22px;
  border-radius: 19px;
  min-height: 260px;
}
.card > .empty-state.has-illus:first-child .empty-illus {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- 11. « PLUS » : LES HUIT CARTES ----------
   Le lot de visuels fournit une image par carte, nommée d'après sa
   destination. On les pose en fond, avec un voile blanc appuyé du côté du
   texte : le sujet ne se lit qu'à droite, jamais sous le titre. Ce sont des
   tuiles de navigation, pas des cartes de données — aucun chiffre métier
   n'est posé sur une image.                                              */
.module-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 200px;
  border-color: rgba(15, 45, 90, 0.13);
  box-shadow: 0 8px 22px rgba(15, 45, 90, 0.09);
  /* La zone de texte ne mord jamais sur l'image. */
  padding-right: 44%;
}
/* Le visuel occupe réellement la droite de la carte, sans voile épais. */
.module-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  z-index: -2;
  background-image: var(--carte-fond, none);
  background-size: cover;
  background-position: center;
  transition: transform 0.35s var(--ease, ease);
}
/* Les visuels « format carte » sont sombres et contrastés : un voile blanc
   par-dessus créerait un halo laiteux sur l'image et écraserait le sujet.
   On garde donc une coupe franche entre la zone texte et la zone visuelle,
   soulignée d'un simple filet — plus net, et plus premium. */
.module-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 44%;
  width: 1px;
  z-index: -1;
  background: rgba(15, 45, 90, 0.12);
}
/* Léger dégradé sombre en bas du visuel : il assied la carte et évite que
   l'image paraisse posée sans poids. */
.module-card::before {
  box-shadow: inset 0 -28px 34px -22px rgba(4, 16, 31, 0.55);
}
.module-card:hover {
  border-color: #b6d0ee;
  box-shadow: 0 14px 32px rgba(15, 45, 90, 0.14);
}
.module-card:hover::before { transform: scale(1.05); }
.module-card[data-route="facturation"]  { --carte-fond: url("/v5/assets/ambiance/cartes/facturation.jpg"); }
.module-card[data-route="drone"]        { --carte-fond: url("/v5/assets/ambiance/cartes/drone.jpg"); }
.module-card[data-route="produits"]     { --carte-fond: url("/v5/assets/ambiance/cartes/produits.jpg"); }
.module-card[data-route="documents"]    { --carte-fond: url("/v5/assets/ambiance/cartes/documents.jpg"); }
.module-card[data-route="sauvegardes"]  { --carte-fond: url("/v5/assets/ambiance/cartes/sauvegardes.jpg"); }
.module-card[data-route="corbeille"]    { --carte-fond: url("/v5/assets/ambiance/cartes/corbeille.jpg"); }
.module-card[data-route="etat-systeme"] { --carte-fond: url("/v5/assets/ambiance/cartes/etat-systeme.jpg"); }
.module-card[data-route="vehicule"]     { --carte-fond: url("/v5/assets/ambiance/cartes/vehicule.png?v=2"); }
.module-card[data-route="vehicule"] > span {
  background: url("/v5/assets/ambiance/cartes/vehicule-icone.png") center / 58px 58px no-repeat;
  border: 0;
  border-radius: 0;
}
.module-card[data-route="vehicule"] > span svg { opacity: 0; }

/* La page Véhicule réemploie le composant de bandeau éprouvé du parc, mais
   avec son propre visuel déjà livré : aucun second modèle de header. */
.page--vehicule .page-heading--drone {
  --bandeau-photo: url("/v5/assets/ambiance/cartes/vehicule.png?v=2");
  background-position: center, right 58%, center;
}

.prospection-heading-actions,
.prospect-heading-sync {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.prospection-heading-actions { gap: 10px; }
.prospect-heading-sync .prospect-sync {
  max-width: 28ch;
  color: rgba(232, 240, 252, 0.82);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}
.prospect-heading-sync .prospect-sync.tone-erreur { color: #fecaca; }
.prospect-heading-sync .prospect-sync.tone-inactif { color: #fde68a; }
@media (max-width: 900px) {
  .prospection-heading-actions,
  .prospect-heading-sync { align-items: flex-start; }
  .prospect-heading-sync .prospect-sync { text-align: left; }
}

.vehicle-form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: var(--surface-soft);
}
.vehicle-form-section.full,
.vehicle-api-note.full { grid-column: 1 / -1; }
.vehicle-form-section legend { padding: 0 7px; color: var(--ink-700); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.vehicle-api-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #cfe0f4; border-radius: 12px; background: #f6faff; color: var(--ink-700); }
.vehicle-api-note svg.ic { width: 16px; height: 16px; color: var(--blue-600); flex: none; }
.equipment-timeline { position: relative; padding-left: 20px; }
.equipment-timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #c9ddf4; }
.equipment-timeline > .data-row { position: relative; background: #fff; }
.equipment-timeline > .data-row::before { content: ""; position: absolute; left: -18px; top: 20px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 2px #a8c7ec; }
@media (max-width: 560px) { .vehicle-form-section { grid-template-columns: 1fr; } }

.billing-row > .status-badge { width: max-content; max-width: 100%; white-space: nowrap; justify-self: start; }
.finance-actions-menu { position: relative; justify-self: end; }
.finance-actions-menu > summary { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 10px; list-style: none; cursor: pointer; }
.finance-actions-menu > summary::-webkit-details-marker { display: none; }
.finance-actions-menu > summary svg.ic { width: 18px; height: 18px; }
.finance-actions-menu[open] > div { position: absolute; z-index: 30; right: 0; top: 42px; width: 240px; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(15, 45, 90, .18); }
.finance-actions-menu[open] .button { width: 100%; justify-content: flex-start; }
.finance-legal-action { display: flex; gap: 7px; align-items: flex-start; padding: 8px 9px; color: var(--ink-500); font-size: 10px; line-height: 1.35; }
.finance-legal-action svg.ic { width: 14px; height: 14px; flex: none; }
.touchid-settings-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; }
.touchid-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--blue-600); background: var(--blue-100); }
.touchid-mark svg.ic { width: 21px; height: 21px; }
.system-control-actions { margin-top: 18px; }
.page .card.panel .button-row.system-control-actions { gap: 16px; }
.settings-list .settings-row,
.page--parametres > .settings-row {
  grid-template-columns: minmax(0, 1fr) 106px auto;
}
.settings-list .settings-row > .status-badge,
.page--parametres > .settings-row > .status-badge {
  justify-self: stretch;
  justify-content: center;
}
@media (max-width: 680px) {
  .touchid-settings-row { grid-template-columns: auto 1fr; }
  .touchid-settings-row > .status-badge,
  .touchid-settings-row > .button { grid-column: 1 / -1; justify-self: start; }
  .finance-actions-menu[open] > div { position: fixed; right: 18px; left: 18px; top: auto; bottom: 18px; width: auto; }
}

.module-subnav {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.address-autocomplete { position: relative; }
.address-suggestions {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #d8e4f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 45, 90, 0.12);
}
.address-suggestions[hidden] { display: none; }
.address-suggestion {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.address-suggestion:hover,
.address-suggestion:focus-visible { background: #eef6ff; outline: none; }
.address-suggestion span { color: #64748b; font-size: 0.82rem; }

/* ---------- 12. FACTURATION & QONTO ----------
   Le bandeau reprend le bleu nuit de l'application ; la lueur violette
   reste, elle signale Qonto sans faire basculer l'écran dans une autre
   palette. Le paragraphe passe de 11 à 12,5 px comme partout ailleurs.  */
.qonto-hero {
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0, rgba(124, 99, 255, 0.42), transparent 44%),
    linear-gradient(96deg, #061329 0%, #0a2247 58%, #10305e 100%);
  box-shadow: 0 18px 44px rgba(6, 19, 41, 0.18);
}
.qonto-hero p {
  font-size: 12.5px;
  color: rgba(224, 234, 249, 0.84);
}

/* ---------- 13. ÉTAT DU SYSTÈME ---------- */
/* Les pastilles d'état étaient étirées à la largeur de leur colonne : de
   loin elles ressemblaient à des barres vides plutôt qu'à un statut. */
.data-row .status-badge {
  width: fit-content;
  max-width: 100%;
}


/* ---------- 14. HIÉRARCHIE DES SURFACES ----------
   Trois niveaux, appliqués partout :
     1. bleu nuit   → navigation, heros, éléments forts ;
     2. bleu-gris   → sections secondaires, états vides, surfaces d'appui ;
     3. blanc       → la donnée réelle : listes, tableaux, formulaires, mails.
   Le fond d'application était presque blanc : les cartes blanches s'y
   fondaient. Il est assombri d'un cran pour que le blanc redevienne un
   signal — « ici il y a de la donnée » — et non la couleur par défaut.   */
:root {
  --dn-niveau1: #061329;
  --dn-niveau2: #e3ebf8;
  --dn-niveau3: #ffffff;
  --canvas: #e7edf7;
}
/* Surfaces d'appui : elles passent du blanc cassé au bleu-gris. */
.surface-soft,
.settings-row,
.calendar-top,
.page-toolbar,
.prospect-filters[open] > div,
.request-band {
  background: var(--dn-niveau2, #e3ebf8);
}
/* La donnée reste sur blanc franc, avec un contour un peu plus présent
   qu'auparavant pour se détacher du nouveau fond. */
.card {
  border-color: rgba(15, 45, 90, 0.1);
}


/* ---------- FACTURATION & QONTO : LE BLOC « PRESTATAIRE DE PAIEMENT » ----------
   Deux règles se contredisaient. La carte Qonto est sombre et met tous ses
   textes en blanc ; la hiérarchie des surfaces, elle, donne à toute
   .settings-row un fond bleu-gris clair. Le bloc imbriqué héritait donc du
   texte blanc ET du fond clair : « Prestataire de paiement » ressortait à un
   rapport de contraste de 1,2 et sa description à 1,01 — autant dire
   invisible, ce que l'écran confirmait.
   La carte sombre reste sombre : c'est le bloc qui devient une surface
   translucide posée dessus, comme les tuiles de la météo. Rien ne change
   pour les .settings-row des écrans clairs.                              */
.qonto-hero .settings-row {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 14px;
}
.qonto-hero .settings-row h3 { color: #ffffff; }
.qonto-hero .settings-row p { color: rgba(226, 235, 250, 0.88); }
/* Le bouton d'action du bloc suit la même logique que ceux des bandeaux :
   lisible sur fond sombre, et qui reste lisible au survol et au focus. */
.qonto-hero .settings-row .button:not(.primary) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.qonto-hero .settings-row .button:not(.primary):hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}
.qonto-hero .settings-row .button:not(.primary):focus-visible {
  outline: 2px solid #9dc0ff;
  outline-offset: 2px;
}
.qonto-hero .settings-row .button:disabled,
.qonto-hero .settings-row .button[aria-disabled="true"] {
  /* Un bouton inactif doit rester lisible : on baisse le contraste du fond,
     pas celui du texte au point de le faire disparaître. */
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(233, 240, 252, 0.72);
  cursor: not-allowed;
}

/* ---------- 15. ACTIVITÉ : AUCUNE PHOTO ----------
   Les repères restent des tuiles claires. Seule une teinte sémantique
   discrète en tête de tuile distingue les quatre natures de montant.     */
.metric-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 90, 0.1);
}
.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--repere, #94a3b8);
}
.metric-card[data-financial-kind="revenue"] { --repere: #16a34a; }
.metric-card[data-financial-kind="deposit"] { --repere: #f59e0b; }
.metric-card[data-financial-kind="balance"] { --repere: #2563eb; }
.metric-card[data-financial-kind="quotes"]  { --repere: #7c3aed; }
.metric-card strong { color: var(--ink-950, #101b2d); }


/* ---------- 16. BANDEAUX D'EN-TÊTE DE PAGE ----------
   Un seul langage d'en-tête pour toutes les pages secondaires : un bandeau
   plein qui touche les deux bords de la zone de contenu et se referme sur un
   filet bleu, juste au-dessus du contenu. L'accueil garde son hero en carte,
   c'est le seul écran qui s'en distingue — et c'est voulu.
   La photo passe par une seule variable (--bandeau-photo) : quand une image
   existe pour une page, c'est une ligne à ajouter, rien d'autre.         */
:root { --page-pad-x: clamp(22px, 3.1vw, 48px); }

.page-heading--clients,
.page-heading--planning,
.page-heading--prospection,
.page-heading--messagerie,
.page-heading--plus,
.page-heading--facturation,
.page-heading--drone,
.page-heading--vehicule,
.page-heading--produits,
.page-heading--documents,
.page-heading--sauvegardes,
.page-heading--corbeille,
.page-heading--parametres,
.page-heading--etat-systeme {
  position: relative;
  margin: -32px calc(-1 * var(--page-pad-x)) 26px;
  padding: 0 calc(var(--page-pad-x) + 2px);
  min-height: 158px;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #ffffff;
  /* Ordre des couches : la photo est SOUS le voile, sinon elle le recouvre
     et le sous-titre devient illisible. Le voile est opaque à gauche, là où
     se trouve le texte, et s'ouvre vers la droite sur l'image. Sans photo,
     la couleur de repli garde le bandeau franc sur toute sa largeur. */
  background:
    radial-gradient(70% 120% at 97% -20%, rgba(37, 99, 235, 0.22) 0%, transparent 52%),
    var(--bandeau-voile, linear-gradient(100deg, #04101f 0%, #061a33 40%, rgba(6, 26, 51, 0.72) 62%, rgba(6, 26, 51, 0.28) 100%)),
    var(--bandeau-photo, none),
    #061a33;
  background-size: auto, auto, cover, auto;
  background-position: center, center, right center, center;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-heading--clients::after,
.page-heading--planning::after,
.page-heading--prospection::after,
.page-heading--messagerie::after,
.page-heading--plus::after,
.page-heading--facturation::after,
.page-heading--drone::after,
.page-heading--vehicule::after,
.page-heading--produits::after,
.page-heading--documents::after,
.page-heading--sauvegardes::after,
.page-heading--corbeille::after,
.page-heading--parametres::after,
.page-heading--etat-systeme::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600, #2563eb), rgba(37, 99, 235, 0));
}
.page-heading--clients .eyebrow,
.page-heading--planning .eyebrow,
.page-heading--prospection .eyebrow,
.page-heading--messagerie .eyebrow,
.page-heading--plus .eyebrow,
.page-heading--facturation .eyebrow,
.page-heading--drone .eyebrow,
.page-heading--vehicule .eyebrow,
.page-heading--produits .eyebrow,
.page-heading--documents .eyebrow,
.page-heading--sauvegardes .eyebrow,
.page-heading--corbeille .eyebrow,
.page-heading--parametres .eyebrow,
.page-heading--etat-systeme .eyebrow { color: #7fb0ff; }
.page-heading--clients h1,
.page-heading--planning h1,
.page-heading--prospection h1,
.page-heading--messagerie h1,
.page-heading--plus h1,
.page-heading--facturation h1,
.page-heading--drone h1,
.page-heading--vehicule h1,
.page-heading--produits h1,
.page-heading--documents h1,
.page-heading--sauvegardes h1,
.page-heading--corbeille h1,
.page-heading--parametres h1,
.page-heading--etat-systeme h1 { color: #ffffff; }
.page-heading--clients > div > p,
.page-heading--planning > div > p,
.page-heading--prospection > div > p,
.page-heading--messagerie > div > p,
.page-heading--plus > div > p,
.page-heading--facturation > div > p,
.page-heading--drone > div > p,
.page-heading--vehicule > div > p,
.page-heading--produits > div > p,
.page-heading--documents > div > p,
.page-heading--sauvegardes > div > p,
.page-heading--corbeille > div > p,
.page-heading--parametres > div > p,
.page-heading--etat-systeme > div > p {
  max-width: 52ch;
  color: rgba(224, 234, 249, 0.82);
}
.page-heading--clients .heading-actions .button:not(.primary),
.page-heading--planning .heading-actions .button:not(.primary),
.page-heading--prospection .heading-actions .button:not(.primary),
.page-heading--messagerie .heading-actions .button:not(.primary),
.page-heading--plus .heading-actions .button:not(.primary),
.page-heading--facturation .heading-actions .button:not(.primary),
.page-heading--drone .heading-actions .button:not(.primary),
.page-heading--vehicule .heading-actions .button:not(.primary),
.page-heading--produits .heading-actions .button:not(.primary),
.page-heading--documents .heading-actions .button:not(.primary),
.page-heading--sauvegardes .heading-actions .button:not(.primary),
.page-heading--corbeille .heading-actions .button:not(.primary),
.page-heading--parametres .heading-actions .button:not(.primary),
.page-heading--etat-systeme .heading-actions .button:not(.primary) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}
/* Toutes les pages porteuses d'une photo ont la même hauteur généreuse que
   les headers validés : ce sont de vrais bandeaux, pas des cartes posées. */
.page-heading--clients,
.page-heading--prospection,
.page-heading--drone,
.page-heading--vehicule,
.page-heading--facturation,
.page-heading--sauvegardes,
.page-heading--corbeille,
.page-heading--etat-systeme,
.page-heading--parametres,
.page-heading--documents,
.page-heading--produits { min-height: 176px; }
.page-heading--planning,
.page-heading--messagerie,
.page-heading--plus { min-height: 150px; }

/* Les huit visuels de headers_dronelia portent déjà leur propre zone sombre
   à gauche. Un voile épais les effacerait : on n'en pose qu'un léger, juste
   assez pour tenir le contraste du titre et du sous-titre. */
.page-heading--facturation,
.page-heading--sauvegardes,
.page-heading--corbeille,
.page-heading--etat-systeme,
.page-heading--parametres,
.page-heading--documents,
.page-heading--produits,
.page-heading--drone,
.page-heading--vehicule {
  --bandeau-voile: linear-gradient(100deg, rgba(4, 14, 28, 0.9) 0%, rgba(5, 18, 36, 0.74) 34%, rgba(5, 18, 36, 0.34) 62%, rgba(5, 18, 36, 0.12) 100%);
  /* Les sources sont en 3:1, le bandeau en ~7:1 : le recadrage se fait en
     hauteur. Les sujets sont posés au sol ou sur un plan, donc dans le bas
     de l'image — on descend l'ancrage pour ne pas les couper. */
  background-position: center, right 72%, center;
}
/* Messagerie, Prospection, Planning, Clients et Plus reçoivent à leur tour
   leur visuel. Même facture que les huit autres : sujet à droite, zone sombre
   à gauche déjà présente dans l'image, donc voile léger et ancrage bas. */
.page-heading--messagerie,
.page-heading--prospection,
.page-heading--planning,
.page-heading--clients,
.page-heading--plus {
  --bandeau-voile: linear-gradient(100deg, rgba(4, 14, 28, 0.9) 0%, rgba(5, 18, 36, 0.74) 34%, rgba(5, 18, 36, 0.34) 62%, rgba(5, 18, 36, 0.12) 100%);
  /* Ces cinq sources sont en 8:3 et leur sujet est posé sur un plan de
     travail, donc plus bas dans le cadre que les huit précédentes. L'ancrage
     à 72 % coupait le sujet par le haut ; à 62 % la bande visible tombe sur
     l'objet et son reflet. */
  background-position: center, right 62%, center;
  /* Même hauteur que les autres bandeaux photo : à 150 px, ces visuels très
     riches ne montraient qu'une tranche illisible. */
  min-height: 176px;
}
.page-heading--messagerie   { --bandeau-photo: url("/v5/assets/ambiance/headers/messagerie.jpg"); }
.page-heading--prospection  { --bandeau-photo: url("/v5/assets/ambiance/headers/prospection.jpg"); }
.page-heading--planning     { --bandeau-photo: url("/v5/assets/ambiance/headers/planning.jpg"); }
.page-heading--clients      { --bandeau-photo: url("/v5/assets/ambiance/headers/clients.jpg"); }
.page-heading--plus         { --bandeau-photo: url("/v5/assets/ambiance/headers/plus.jpg"); }

.page-heading--facturation  { --bandeau-photo: url("/v5/assets/ambiance/headers/facturation.jpg"); }
.page-heading--sauvegardes  { --bandeau-photo: url("/v5/assets/ambiance/headers/sauvegardes.jpg"); }
.page-heading--corbeille    { --bandeau-photo: url("/v5/assets/ambiance/headers/corbeille.jpg"); }
.page-heading--etat-systeme { --bandeau-photo: url("/v5/assets/ambiance/headers/etat-systeme.jpg"); }
.page-heading--parametres   { --bandeau-photo: url("/v5/assets/ambiance/headers/parametres.jpg"); }
.page-heading--documents    { --bandeau-photo: url("/v5/assets/ambiance/headers/documents.jpg"); }
.page-heading--produits     { --bandeau-photo: url("/v5/assets/ambiance/headers/produits.jpg"); }
.page-heading--drone        { --bandeau-photo: url("/v5/assets/ambiance/headers/drone.jpg"); }
.page-heading--vehicule     { --bandeau-photo: url("/v5/assets/ambiance/headers/vehicule.png"); }
@media (max-width: 900px) {
  .page-heading--clients,
.page-heading--planning,
.page-heading--prospection,
.page-heading--messagerie,
.page-heading--plus,
.page-heading--facturation,
.page-heading--drone,
.page-heading--vehicule,
.page-heading--produits,
.page-heading--documents,
.page-heading--sauvegardes,
.page-heading--corbeille,
.page-heading--parametres,
.page-heading--etat-systeme {
    min-height: 0;
    padding-block: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    /* Le voile des 13 bandeaux est un dégradé horizontal : sombre à gauche,
       ouvert à droite sur la photo. En colonne, le texte cesse d'occuper la
       seule moitié gauche et s'étale sur toute la largeur — le sous-titre
       finissait donc sur la partie claire, là où le voile s'est déjà ouvert.
       On bascule le dégradé dans l'axe où le texte se trouve désormais :
       appuyé en haut, derrière l'accroche, le titre et le sous-titre, puis
       relâché vers le bas où la photo reste franchement lisible. Le desktop
       ne voit rien de tout cela : la règle ne vit que sous 900 px. */
    /* Le voile général reste léger : la photo doit rester une photo.
       Le contraste du texte n'est plus son affaire — c'est le renfort local
       posé juste en dessous qui s'en charge. */
    --bandeau-voile: linear-gradient(
      178deg,
      rgba(4, 14, 28, 0.62) 0%,
      rgba(5, 18, 36, 0.46) 58%,
      rgba(5, 18, 36, 0.30) 100%
    );
    /* Le sujet des visuels est à droite ; en colonne on le ramène au centre,
       sinon la vignette ne montre qu'un bord de l'image. */
    background-position: center, center, center 62%, center;
  }
}

/* Petit mobile : le sous-titre passe sur trois ou quatre lignes et descend
   plus bas que sur un écran standard. Le palier clair du voile est repoussé
   d'autant, sans quoi la dernière ligne retomberait sur la photo. */
@media (max-width: 430px) {
  .page-heading--clients,
.page-heading--planning,
.page-heading--prospection,
.page-heading--messagerie,
.page-heading--plus,
.page-heading--facturation,
.page-heading--drone,
.page-heading--vehicule,
.page-heading--produits,
.page-heading--documents,
.page-heading--sauvegardes,
.page-heading--corbeille,
.page-heading--parametres,
.page-heading--etat-systeme {
    /* Écran étroit : un cran de plus sur le voile général, le renfort local
       faisant le reste. */
    --bandeau-voile: linear-gradient(
      178deg,
      rgba(4, 14, 28, 0.68) 0%,
      rgba(5, 18, 36, 0.52) 58%,
      rgba(5, 18, 36, 0.34) 100%
    );
  }
  /* La largeur de lecture confortable du desktop (52ch) n'a plus de sens ici :
     elle laissait le texte se serrer en colonne étroite. */
  .page-heading--clients > div > p,
.page-heading--planning > div > p,
.page-heading--prospection > div > p,
.page-heading--messagerie > div > p,
.page-heading--plus > div > p,
.page-heading--facturation > div > p,
.page-heading--drone > div > p,
.page-heading--vehicule > div > p,
.page-heading--produits > div > p,
.page-heading--documents > div > p,
.page-heading--sauvegardes > div > p,
.page-heading--corbeille > div > p,
.page-heading--parametres > div > p,
.page-heading--etat-systeme > div > p {
    max-width: none;
    color: rgba(232, 240, 252, 0.92);
  }
}


/* ---------- BANDEAUX : RENFORT LOCAL DERRIÈRE LE TEXTE (MOBILE) ----------
   Caler le voile sur la hauteur du bandeau ne pouvait pas marcher : les 13
   n'ont ni la même hauteur ni le même sous-titre, et un palier juste pour
   Clients tombait en plein milieu du texte de Documents ou de Facturation.
   Le renfort est donc porté par le bloc de texte lui-même : il fait
   exactement sa taille, qu'il tienne sur deux lignes ou sur quatre.
   C'est une ombre portée douce, sans bord franc — le dégradé radial s'éteint
   avant les bords, de sorte que la photo reste franchement visible autour et
   qu'aucun rectangle sombre n'apparaît.                                    */
@media (max-width: 900px) {
  .page-heading--clients > div:first-child,
.page-heading--planning > div:first-child,
.page-heading--prospection > div:first-child,
.page-heading--messagerie > div:first-child,
.page-heading--plus > div:first-child,
.page-heading--facturation > div:first-child,
.page-heading--drone > div:first-child,
.page-heading--vehicule > div:first-child,
.page-heading--produits > div:first-child,
.page-heading--documents > div:first-child,
.page-heading--sauvegardes > div:first-child,
.page-heading--corbeille > div:first-child,
.page-heading--parametres > div:first-child,
.page-heading--etat-systeme > div:first-child {
    position: relative;
  }
  .page-heading--clients > div:first-child::before,
.page-heading--planning > div:first-child::before,
.page-heading--prospection > div:first-child::before,
.page-heading--messagerie > div:first-child::before,
.page-heading--plus > div:first-child::before,
.page-heading--facturation > div:first-child::before,
.page-heading--drone > div:first-child::before,
.page-heading--vehicule > div:first-child::before,
.page-heading--produits > div:first-child::before,
.page-heading--documents > div:first-child::before,
.page-heading--sauvegardes > div:first-child::before,
.page-heading--corbeille > div:first-child::before,
.page-heading--parametres > div:first-child::before,
.page-heading--etat-systeme > div:first-child::before {
    content: "";
    position: absolute;
    /* Déborde jusqu'au bord gauche du bandeau et large autour du texte, pour
       que l'ombre commence avant la première lettre et finisse après la
       dernière. */
    inset: -18px -28px -16px calc(-1 * var(--page-pad-x) - 2px);
    background: radial-gradient(
      118% 132% at 8% 45%,
      rgba(3, 11, 24, 0.94) 0%,
      rgba(3, 11, 24, 0.88) 42%,
      rgba(3, 11, 24, 0.58) 74%,
      rgba(3, 11, 24, 0) 100%
    );
    pointer-events: none;
  }
  .page-heading--clients > div:first-child > *,
.page-heading--planning > div:first-child > *,
.page-heading--prospection > div:first-child > *,
.page-heading--messagerie > div:first-child > *,
.page-heading--plus > div:first-child > *,
.page-heading--facturation > div:first-child > *,
.page-heading--drone > div:first-child > *,
.page-heading--vehicule > div:first-child > *,
.page-heading--produits > div:first-child > *,
.page-heading--documents > div:first-child > *,
.page-heading--sauvegardes > div:first-child > *,
.page-heading--corbeille > div:first-child > *,
.page-heading--parametres > div:first-child > *,
.page-heading--etat-systeme > div:first-child > * {
    position: relative;
  }
}

/* ---------- 17. MÉTÉO ET ACTIVITÉ : MÊME FAMILLE ----------
   La météo était le bloc le plus saturé de l'écran et attirait tout l'œil.
   Elle rejoint le bleu nuit du hero : elle reste identifiable, elle ne
   domine plus. En face, Activité cesse d'être un aplat blanc nu — ses
   quatre repères passent sur la surface de niveau 2, ce qui donne au bloc
   une structure interne au lieu d'un vide.                               */
.weather-panel {
  background:
    radial-gradient(120% 140% at 90% 0%, rgba(37, 99, 235, 0.38) 0%, transparent 60%),
    linear-gradient(150deg, #071b38 0%, #0a2547 58%, #0c2c56 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(6, 19, 41, 0.18);
}
.weather-metrics > div {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.metric-card {
  background: var(--dn-niveau2, #e3ebf8);
  border-color: rgba(15, 45, 90, 0.08);
}
.metric-card:hover {
  background: #ffffff;
  border-color: #bfd5ef;
}

/* ---------- 18. PLANNING : PASTILLE DU JOUR ----------
   Le quantième était un bloc à largeur minimale : le texte n'était pas
   centré dans la pastille. C'est maintenant un cercle de taille fixe qui
   centre son contenu sur les deux axes.                                  */
.calendar-day-head.today strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}

/* ---------- 19. FORMULAIRES ET MODALES ----------
   Même hiérarchie que les écrans : l'en-tête et le pied d'une modale sont
   des surfaces d'appui (niveau 2), le corps du formulaire reste blanc parce
   qu'on y saisit de la donnée réelle. Sans cela, la modale est un aplat
   blanc de bout en bout et rien n'ancre le titre ni les actions.        */
.modal-header {
  background: var(--dn-niveau2, #e3ebf8);
  border-bottom: 1px solid rgba(15, 45, 90, 0.1);
}
.modal-footer {
  background: var(--dn-niveau2, #e3ebf8);
  border-top: 1px solid rgba(15, 45, 90, 0.1);
}
.modal-body {
  background: #ffffff;
}
/* Les champs se détachent du blanc du corps sans devenir des boîtes grises. */
.modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal-body select,
.modal-body textarea {
  border-color: rgba(15, 45, 90, 0.16);
}
.modal-body input:focus-visible,
.modal-body select:focus-visible,
.modal-body textarea:focus-visible {
  border-color: var(--blue-600, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: none;
}
/* L'étiquette de champ était au même gris que l'aide : on distingue les deux. */
.modal-body label > span:first-child,
.form-field > span:first-child {
  color: var(--ink-700, #3d4d64);
  font-weight: 650;
}

/* ---------- 20. JOURS FÉRIÉS ----------
   Repère, pas interdiction : on peut toujours poser un rendez-vous un jour
   férié si c'est voulu. La colonne reste cliquable et lisible.          */
.calendar-day-head.is-ferie {
  background: rgba(220, 76, 76, 0.06);
  box-shadow: inset 0 -2px 0 rgba(200, 60, 60, 0.5);
}
.calendar-day-head.is-ferie span { color: #b23b3b; }
.calendar-day-head .ferie-marque {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  font: 700 8.5px var(--font-display);
  font-style: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b23b3b;
}
/* Le jour courant garde la priorité s'il tombe un jour férié. */
.calendar-day-head.today.is-ferie strong { background: var(--blue-600, #2563eb); }
.calendar-month-day.is-ferie {
  background: rgba(220, 76, 76, 0.05);
}
.calendar-month-day.is-ferie > strong {
  color: #b23b3b;
}

/* ---------- 21. ITINÉRAIRE DEPUIS LA FICHE CLIENT ----------
   Le bloc ne s'affiche que si une adresse existe. « Copier » est le repli
   quand ni Waze ni Maps ne sont installés — le lien Maps reste une URL web
   universelle, il fonctionne donc toujours dans un navigateur.          */
.itineraire {
  margin: 14px 0 0;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--dn-niveau2, #e3ebf8);
  border: 1px solid rgba(15, 45, 90, 0.09);
}
.itineraire-adresse {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800, #25344a);
}
.itineraire-adresse svg.ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.itineraire-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.itineraire-actions .button { background: #ffffff; }
.site-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.site-card-row .icon-button { width: 36px; height: 36px; }
.site-card-row.is-selected .site-card {
  border-color: rgba(17, 102, 217, 0.42);
  background: rgba(17, 102, 217, 0.07);
  box-shadow: inset 3px 0 0 var(--blue-600, #1166d9);
}
.selected-site-label {
  margin: 14px 0 0;
  color: var(--ink-600, #526078);
  font-size: 11.5px;
}
.site-map {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 45, 90, 0.12);
  border-radius: 14px;
  background: #eef3f9;
}
.site-map iframe {
  display: block;
  width: 100%;
  height: 210px;
  border: 0;
  background: #eef3f9;
}
.site-map > small {
  display: block;
  padding: 7px 10px;
  overflow-wrap: anywhere;
  color: var(--ink-600, #526078);
  background: #fff;
  font-size: 10px;
}
.site-map-state {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 76px;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed rgba(15, 45, 90, 0.18);
  border-radius: 14px;
  color: var(--ink-600, #526078);
  background: var(--dn-niveau2, #eaf0f8);
  font-size: 11.5px;
}
.site-map-state > svg.ic { width: 18px; height: 18px; flex: none; }
.site-map-state > span { min-width: 0; flex: 1; }
.site-map-state strong,
.site-map-state small { display: block; }
.site-map-state small { margin-top: 3px; line-height: 1.4; }
.site-map-state.is-unlocated { color: var(--ink-700, #3d4d64); }

.request-project-card { overflow: hidden; }
.request-essential-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.request-essential { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line-soft, #dce6f2); border-radius: 14px; background: var(--surface-soft, #f4f7fb); }
.request-essential > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; color: var(--blue-700, #0a65dc); background: #e8f2ff; }
.request-essential > span:last-child,
.request-essential small,
.request-essential strong { display: block; min-width: 0; }
.request-essential small { color: var(--ink-500, #72819a); font-size: 10px; font-weight: 750; }
.request-essential strong { margin-top: 3px; color: var(--ink-900, #101e34); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.request-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.request-group { min-width: 0; padding: 14px; border: 1px solid var(--line-soft, #dce6f2); border-radius: 14px; }
.request-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink-800, #24344d); font-size: 12px; }
.request-group h4 svg { width: 16px; height: 16px; color: var(--blue-700, #0a65dc); }
.request-group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 0; }
.request-group dl > div { min-width: 0; }
.request-group dt,
.request-group dd { margin: 0; }
.request-group dt { color: var(--ink-500, #72819a); font-size: 9px; font-weight: 750; }
.request-group dd { margin-top: 2px; color: var(--ink-800, #24344d); font-size: 11px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.project-note { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; color: var(--ink-700, #3d4d64); background: #f4f7fb; }
.project-note > span:first-child { color: var(--blue-700, #0a65dc); }
.project-note strong,
.project-note small { display: block; }
.project-note strong { font-size: 11px; }
.project-note small { margin-top: 3px; font-size: 10px; line-height: 1.45; }
@media (max-width: 520px) {
  .request-essential-grid,
  .request-breakdown { grid-template-columns: 1fr; }
  .request-group dl { grid-template-columns: 1fr 1fr; }
  .site-map iframe { height: 185px; }
  .site-map-state { align-items: flex-start; flex-wrap: wrap; }
  .site-map-state .button { width: 100%; }
}

/* ---------- 22. ALBUMS DE LA GALERIE CLIENT ---------- */
.media-folder-grid,
.document-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.media-folder-card,
.document-folder-card {
  min-width: 0;
  min-height: 126px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 17px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f5f9ff);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.media-folder-card:hover,
.document-folder-card:hover { border-color: #a9c8ee; transform: translateY(-1px); }
.media-folder-card > span,
.document-folder-card > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-600);
  background: var(--blue-100);
}
.media-folder-card svg.ic,
.document-folder-card svg.ic { width: 20px; height: 20px; }
.media-folder-card strong,
.document-folder-card strong { align-self: end; font-size: 13px; line-height: 1.25; }
.media-folder-card em,
.document-folder-card em { align-self: start; color: var(--ink-500); font: 600 10.5px var(--font-display); font-style: normal; }
.document-folder-card small { grid-column: 1 / -1; align-self: end; color: var(--ink-500); font-size: 10px; }
.folder-view-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.folder-view-heading strong { font-size: 13px; }
.folder-view-heading .button svg.ic { width: 14px; height: 14px; }

/* Cartes Produits : photo et informations métier d'abord, actions dans un
   menu unique. Les commandes et leurs data-action restent inchangées. */
.product-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 15px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15, 45, 90, 0.045);
}
.product-card + .product-label-history { margin: -4px 10px 12px; }
.product-card .product-photo {
  width: 96px;
  height: 96px;
  min-height: 96px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-soft);
}
.product-card .product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-card .product-photo.is-empty { display: grid; place-items: center; color: var(--blue-600); }
.product-card .product-photo.is-empty svg.ic { width: 25px; height: 25px; }
.product-card-main { min-width: 0; }
.product-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-card-heading strong,
.product-card-heading span { display: block; }
.product-card-heading strong { font-size: 14px; line-height: 1.25; color: var(--ink-900); }
.product-card-heading span { margin-top: 3px; color: var(--ink-500); font-size: 10.5px; }
.product-card-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.product-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.product-card-facts > div { min-width: 0; padding: 9px 10px; border-radius: 11px; background: var(--surface-soft); }
.product-card-facts span,
.product-card-facts strong,
.product-card-facts small { display: block; }
.product-card-facts span { color: var(--ink-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.product-card-facts strong { margin-top: 3px; color: var(--ink-900); font-size: 11.5px; }
.product-card-facts small { margin-top: 2px; color: var(--ink-500); font-size: 9.5px; overflow-wrap: anywhere; }
.product-documents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.product-actions-menu { position: relative; align-self: start; }
.product-actions-menu > summary { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink-700); }
.product-actions-menu > summary::-webkit-details-marker { display: none; }
.product-actions-menu > summary svg.ic { width: 18px; height: 18px; }
.product-actions-menu[open] > div { position: absolute; z-index: 20; right: 0; top: 42px; width: 210px; display: grid; gap: 3px; padding: 7px; border: 1px solid var(--line-soft); border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(15, 45, 90, .18); }
.product-actions-menu[open] .button { width: 100%; justify-content: flex-start; }
.product-event-history { margin-top: 10px; }
.product-event-history > summary { color: var(--ink-700); font-weight: 700; }
.product-event-row {
  grid-template-columns: minmax(120px, .7fr) minmax(180px, 1.4fr) auto;
  border: 1px solid #c8d9ee;
  background: #f7fbff;
  color: var(--ink-900);
}
.product-event-row strong { color: var(--ink-900); }
.product-event-row span { color: var(--ink-600); }

@media (max-width: 760px) {
  .product-card { grid-template-columns: 82px minmax(0, 1fr) auto; }
  .product-card .product-photo { width: 82px; height: 82px; min-height: 82px; }
  .product-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .product-card { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .product-card .product-photo { width: 72px; height: 72px; min-height: 72px; }
  .product-card-heading { display: block; }
  .product-card-status { justify-content: flex-start; margin-top: 6px; }
  .product-card-facts { grid-column: 1 / -1; grid-template-columns: 1fr; }
}

.media-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.media-filtre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(15, 45, 90, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink-700, #3d4d64);
  font: 650 11.5px var(--font-display);
  cursor: pointer;
}
.media-filtre em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #64748b);
}
.media-filtre:hover { border-color: #bfd5ef; background: #f7fbff; }
.media-filtre.is-active {
  background: var(--blue-600, #2563eb);
  border-color: var(--blue-600, #2563eb);
  color: #ffffff;
}
.media-filtre.is-active em { color: rgba(255, 255, 255, 0.78); }

.request-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.request-info-block {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: var(--surface-soft);
}
.request-info-block header { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.request-info-block header svg.ic { width: 17px; height: 17px; color: var(--blue-600); }
.request-info-block h3 { margin: 0; font-size: 12px; }
.request-info-block dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 0; }
.request-info-block dl > div { min-width: 0; }
.request-info-block dt { color: var(--ink-500); font-size: 9.5px; font-weight: 700; }
.request-info-block dd { margin: 3px 0 0; color: var(--ink-900); font-size: 11.5px; font-weight: 650; overflow-wrap: anywhere; }
.quote-pricing-summary {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #cfe0f5;
  border-radius: 13px;
  background: #f5f9ff;
}
.quote-pricing-summary strong { color: var(--ink-900); font-size: 12px; }
.quote-pricing-summary span { color: var(--blue-700); font-size: 11px; font-weight: 750; }
.quote-pricing-summary small { color: var(--ink-600); font-size: 10px; line-height: 1.45; }
.modal-card.is-quote { width: min(980px, calc(100vw - 32px)); }
.modal-card.is-guided { width: min(900px, calc(100vw - 32px)); }
.modal-footer.is-quote-hidden { display: none; }
.quote-wizard { display: grid; grid-column: 1 / -1; width: 100%; gap: 18px; min-width: 0; }
.quote-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.quote-progress li { display: grid; justify-items: center; gap: 5px; color: var(--ink-400); font-size: 10px; font-weight: 750; }
.quote-progress li::before { content: ""; position: relative; top: 15px; z-index: 0; width: 100%; height: 2px; background: var(--line); }
.quote-progress li:first-child::before { width: 50%; justify-self: end; }
.quote-progress li:last-child::before { width: 50%; justify-self: start; }
.quote-progress li span { position: relative; z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; margin-top: -8px; border: 2px solid var(--line); border-radius: 50%; background: white; }
.quote-progress li.is-active { color: var(--blue-700); }
.quote-progress li.is-active::before { background: var(--blue-300); }
.quote-progress li.is-active span { border-color: var(--blue-500); background: var(--blue-50); }
.quote-step { display: grid; gap: 18px; min-width: 0; }
.quote-step[hidden] { display: none !important; }
.quote-step > header { display: grid; gap: 4px; }
.quote-step > header h3 { margin: 0; color: var(--ink-900); font-size: clamp(21px, 2.3vw, 29px); }
.quote-step > header p:not(.eyebrow) { margin: 0; color: var(--ink-500); }
.quote-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quote-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-choice { min-width: 0; cursor: pointer; }
.quote-choice > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.quote-choice > span { display: flex; height: 100%; min-height: 76px; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 17px; background: #fff; color: var(--ink-700); transition: .16s ease; }
.quote-choice strong { min-width: 0; overflow-wrap: anywhere; }
.quote-choice .ic { width: 23px; height: 23px; color: var(--blue-600); }
.quote-choice input:checked + span { border-color: var(--blue-500); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(27, 116, 241, .09); color: var(--ink-900); }
.quote-choice input:focus-visible + span { outline: 3px solid rgba(27, 116, 241, .22); outline-offset: 2px; }
.quote-service-details { display: grid; gap: 14px; }
.quote-service-details fieldset { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-subtle); }
.quote-service-details fieldset[hidden] { display: none; }
.quote-service-details legend { display: flex; align-items: center; gap: 8px; padding: 0 7px; color: var(--ink-900); font-weight: 800; }
.quote-choice-line > span { display: flex; align-items: center; gap: 9px; }
.quote-step-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.quote-summary-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 15px; border-radius: 18px 18px 0 0; background: var(--ink-900); color: white; }
.quote-summary-head > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.quote-summary-head .ic { grid-row: 1 / 3; width: 21px; color: var(--blue-300); }
.quote-summary-head small { color: rgba(255,255,255,.68); }
.quote-summary-head > span:last-child { justify-items: end; font-size: 18px; }
.quote-summary-lines { display: grid; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; background: white; }
.quote-summary-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border-top: 1px solid var(--line-soft); }
.quote-summary-lines > div:first-child { border-top: 0; }
.quote-summary-lines span { display: grid; gap: 2px; }
.quote-summary-lines small { color: var(--ink-500); }
.quote-summary-warning { display: flex; gap: 9px; margin-top: 10px; padding: 11px 13px; border-radius: 13px; background: var(--amber-50, #fff7e6); color: var(--ink-700); font-size: 11px; }
.quote-summary-warning .ic { flex: 0 0 auto; color: var(--amber-600, #b96b00); }
.quote-add-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed #b9d0ec;
  border-radius: 13px;
  background: #f8fbff;
}
.quote-add-service label { display: grid; gap: 6px; min-width: 0; color: var(--ink-700); font-size: 10px; font-weight: 750; }
.quote-add-service select { width: 100%; min-width: 0; }
.quote-add-service small { grid-column: 1 / -1; color: var(--ink-500); font-size: 9.5px; }

/* Formulaires de création guidés : même rythme que le devis, sans dupliquer
   les champs ni leur logique d'enregistrement. */
.guided-form {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  gap: 22px;
}
.guided-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guided-progress li {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 750;
}
.guided-progress li::before {
  content: "";
  position: relative;
  top: 17px;
  z-index: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.guided-progress li:first-child::before { width: 50%; justify-self: end; }
.guided-progress li:last-child::before { width: 50%; justify-self: start; }
.guided-progress li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-top: -9px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-600);
}
.guided-progress li.is-active { color: var(--blue-700); }
.guided-progress li.is-active::before { background: var(--blue-300); }
.guided-progress li.is-active > span { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-700); }
.guided-step { display: grid; gap: 22px; min-width: 0; }
.guided-step[hidden] { display: none !important; }
.guided-step > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  align-items: center;
}
.guided-step-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 18px;
  background: var(--blue-50);
  color: var(--blue-600);
}
.guided-step-icon .ic { width: 30px; height: 30px; }
.guided-step > header .eyebrow { margin: 0 0 2px; }
.guided-step > header h3 { margin: 0; color: var(--ink-900); font-size: clamp(24px, 2.8vw, 34px); }
.guided-step > header p:not(.eyebrow) { margin: 3px 0 0; color: var(--ink-500); font-size: 13px; }
.guided-step > .form-grid { gap: 14px; }
.guided-step .form-field > span { font-size: 11px; }
.guided-step .form-field input:not([type="checkbox"]):not([type="radio"]),
.guided-step .form-field select { min-height: 54px; font-size: 14px; }
.guided-step .form-field textarea { min-height: 118px; font-size: 14px; }
.guided-step-actions { display: flex; justify-content: flex-end; gap: 10px; }
.guided-step-actions .button { min-height: 48px; }
.company-search-field { text-align: center; }
.company-search-field .button { justify-self: center; }
.company-search-field .field-hint { text-align: center; }
.billing-same-toggle {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-soft);
}
.billing-same-toggle > span { display: flex; align-items: center; gap: 9px; }
.billing-same-toggle input { width: 18px; height: 18px; margin: 0; }
[data-billing-address-fields] { grid-column: 1 / -1; }
.portal-message-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.portal-message-row > div:first-child { min-width: 0; }
.portal-message-row > div:first-child span { overflow-wrap: anywhere; }
.portal-message-row .button { white-space: nowrap; }
.portal-message-row.is-outgoing { margin-left: min(8%, 56px); border-color: rgba(0, 111, 255, 0.28); background: rgba(0, 111, 255, 0.055); }
.portal-reply-context blockquote { margin: 8px 0 0; padding: 12px 14px; border-left: 3px solid var(--blue); border-radius: 8px; background: var(--surface-soft); white-space: pre-wrap; }

@media (max-width: 760px) {
  .quote-progress small { display: none; }
  .quote-choice-grid, .quote-services { grid-template-columns: 1fr 1fr; }
  .quote-choice > span { min-height: 64px; padding: 11px; }
  .quote-summary-head { grid-template-columns: 1fr; }
  .quote-summary-head > span:last-child { justify-items: start; }
  .quote-step-actions .button { flex: 1; }
  .guided-progress small { display: none; }
  .guided-step > .form-grid { grid-template-columns: 1fr; }
  .guided-step > .form-grid > * { grid-column: 1 / -1; }
  .guided-step-actions .button { flex: 1; }
  .media-folder-grid,
  .document-folder-grid,
  .request-info-grid,
  .request-essential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .quote-add-service { grid-template-columns: 1fr; align-items: stretch; }
  .quote-add-service .button { width: 100%; }
  .quote-add-service small { grid-column: auto; }
  .media-folder-grid,
  .document-folder-grid,
  .request-info-grid,
  .request-essential-grid,
  .request-breakdown,
  .request-info-block dl { grid-template-columns: 1fr; }
  .portal-message-row { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- 23. NOTIFICATIONS : CODE COULEUR SÉMANTIQUE ----------
   Une barre fine à gauche et une pastille teintée derrière le pictogramme.
   Pas d'aplat coloré : la couleur informe, elle ne crie pas, et le texte
   reste sur fond neutre donc parfaitement lisible.                       */
.notification-item {
  position: relative;
  padding-left: 16px;
}
.notification-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--nature, #94a3b8);
}
.notification-item > svg.ic {
  padding: 7px;
  box-sizing: content-box;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nature, #94a3b8) 14%, transparent);
  color: var(--nature, #94a3b8);
}
.notification-item.nature-demande  { --nature: #0891b2; }
.notification-item.nature-echeance { --nature: #f59e0b; }
.notification-item.nature-rdv      { --nature: #7c3aed; }
.notification-item.nature-paiement { --nature: #16a34a; }
.notification-item.nature-alerte   { --nature: #dc2626; }
.notification-item.nature-systeme  { --nature: #64748b; }
/* Une notification lue s'efface sans perdre son repère de nature. */
.notification-item.is-read::before { opacity: 0.4; }
.notification-item.is-read > svg.ic { opacity: 0.6; }

/* ---------- 24. HEADER DE FICHE CLIENT ----------
   Bleu acier intermédiaire, distinct du bleu marine des grands bandeaux :
   une fiche n'est pas une page de section. La photo dépend du profil —
   habitat pour un particulier, tertiaire pour tout le reste (société,
   syndic, copropriété, collectivité). Elle reste en fond, à droite, sous
   un voile qui garde le nom du client parfaitement lisible.             */
.dossier-hero {
  position: relative;
  overflow: hidden;
  /* Le header fait partie du haut de la fiche : ni coins arrondis, ni ombre
     portée. Il touche les deux bords de la zone de contenu. */
  border-radius: 0;
  margin: -32px calc(-1 * var(--page-pad-x)) 24px;
  padding: 20px calc(var(--page-pad-x) + 2px) 22px;
  color: #ffffff;
  background:
    linear-gradient(100deg, #2a5478 0%, #315e86 38%, rgba(49, 94, 134, 0.72) 62%, rgba(84, 127, 165, 0.34) 100%),
    var(--photo-profil, none),
    #315e86;
  background-size: auto, cover, auto;
  background-position: center, right center, center;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.dossier-hero[data-profil="particulier"]   { --photo-profil: url("/v5/assets/ambiance/clients/particulier.jpg"); }
.dossier-hero[data-profil="professionnel"] { --photo-profil: url("/v5/assets/ambiance/clients/professionnel.jpg"); }

/* La photo d'habitat est très claire — ciel voilé et maison blanche. Sous le
   même voile bleu que la photo tertiaire, qui est sombre et contrastée, elle
   disparaissait complètement : le header d'un particulier semblait n'avoir
   aucune image alors que le fichier se chargeait bien. On lui donne donc son
   propre dosage : voile plus court à droite pour que la maison ressorte, et
   un léger assombrissement uniforme pour que « Appeler / Email / SMS »
   restent lisibles par-dessus les zones les plus claires. */
.dossier-hero[data-profil="particulier"] {
  background:
    linear-gradient(100deg, #2a5478 0%, #315e86 36%, rgba(49, 94, 134, 0.55) 58%, rgba(43, 74, 104, 0.12) 100%),
    linear-gradient(0deg, rgba(22, 44, 70, 0.2), rgba(22, 44, 70, 0.2)),
    var(--photo-profil),
    #315e86;
  background-size: auto, auto, cover, auto;
  background-position: center, center, right center, center;
}
/* Type pas encore choisi : aucun visuel, un bleu ardoise sobre. On n'affirme
   rien sur un dossier qu'on n'a pas encore qualifié. */
.dossier-hero[data-profil="indefini"] {
  --photo-profil: none;
  background: linear-gradient(100deg, #33455c 0%, #3d5169 60%, #47607c 100%);
}
.dossier-hero h1 { color: #ffffff; }
.dossier-hero .dossier-back,
.dossier-hero .dossier-identity p { color: rgba(226, 238, 250, 0.86); }
.dossier-hero .client-avatar {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
/* Les actions restent lisibles sur le bleu acier ; l'accent reste électrique. */
.dossier-hero .button:not(.primary) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}
.dossier-hero .button.primary {
  background: #2f7ef0;
  border-color: #2f7ef0;
}
/* Le bouton « … » gardait son fond blanc et faisait une pastille aveugle. */
.dossier-hero .icon-button {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}
.dossier-hero .icon-button:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- 25. LOGO DE LA BARRE LATÉRALE ----------
   Le fichier d'origine contenait 2172 x 724 px pour un dessin de 1645 x 233 :
   les deux tiers de la hauteur étaient du vide transparent. À 142 px de
   large, le logo ne mesurait que 15 px de haut réels. Le fichier détouré
   rend la même largeur nettement plus lisible, sans élargir la barre.
   Le badge V5 est supprimé, il ne portait aucune information utile.      */
.sidebar .brand {
  height: auto;
  padding: 6px 4px 2px;
}
.sidebar .brand img {
  width: 100%;
  max-width: 198px;
  height: auto;
}

/* ---------- 26. PAVÉ HORAIRE DE L'ACCUEIL ----------
   « RENDEZ-VOUS » est le plus long des libellés de type et ne tenait pas
   dans les 61 px du pavé : il passait à la ligne et déportait l'ensemble
   vers le bas. On corrige le composant, pas ce rendez-vous-là : le pavé
   s'élargit, le libellé se resserre, et heure et type restent centrés sur
   les deux axes quel que soit le type affiché.                          */
.time-tile {
  width: 70px;
  height: auto;
  min-height: 56px;
  padding: 7px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}
.time-tile strong {
  font-size: 15px;
  line-height: 1.1;
}
.time-tile span {
  display: block;
  width: 100%;
  font-size: 7.5px;
  letter-spacing: 0.03em;
  line-height: 1.15;
  /* Un type long se resserre plutôt que de casser au milieu d'un mot. */
  word-break: keep-all;
  hyphens: manual;
}

/* ---------- 27. MODÈLES DE MAILS ----------
   Chaque modèle occupait 110 px : la grille de `data-row` étalait ses quatre
   colonnes et empilait les deux boutons au milieu du vide. Onze modèles
   faisaient 1210 px de liste. Une ligne par modèle suffit — nom, objet,
   badge, actions à droite — et le contenu complet reste où il était, dans
   la fiche qui s'ouvre au clic sur l'engrenage.                          */
.mail-templates .data-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 9px 13px;
}
.mail-templates .data-row > div:first-child {
  flex: 1;
  min-width: 0;
}
.mail-templates .data-row strong {
  display: block;
  font-size: 13px;
}
/* L'objet du mail sur une seule ligne : il sert de repère, pas de lecture. */
.mail-templates .data-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}
.mail-templates .status-badge { flex: none; }
.mail-templates .button-row {
  flex: none;
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin: 0;
}
.mail-templates .icon-button { width: 30px; height: 30px; }

/* ---------- 28. LOGO DE LA BARRE LATÉRALE ----------
   Le logo complet — monogramme DN, DRONELIA et sa signature — remplace le seul
   monogramme. Il est détouré : son fond est celui de la barre, aucun aplat
   noir n'est ajouté. Le rapport 1,6 lui permet de tenir dans la largeur de la
   barre en gardant la signature lisible ; on le pose sur la largeur plutôt que
   sur la hauteur, sans quoi le lettrage deviendrait minuscule.            */
.sidebar .brand {
  justify-content: center;
  padding: 14px 10px 10px;
}
.sidebar .brand img {
  width: 100%;
  max-width: 168px;
  height: auto;
}

/* Invocation sous « Bonjour Malik » : l'arabe garde son sens de lecture,
   la translittération reste nettement plus discrète. */
.page-heading--accueil > div > p:not(.eyebrow):not(.heading-translitteration) {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(233, 241, 252, 0.94);
}
.page-heading--accueil > div > p.heading-translitteration {
  margin: 2px 0 0;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(201, 218, 241, 0.6);
}

/* ============================================================
   Coffre documentaire — pièces d'entreprise
   ============================================================
   L'écran affichait 52 lignes toutes intitulées « Document », centrées et
   sans action utile. La liste est maintenant nommée, groupée par catégorie,
   filtrable, et l'action est explicite : Consulter, jamais Télécharger. */

.document-recherche {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
}
.document-recherche-champ {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: #fff;
}
.document-recherche-champ:focus-within {
  border-color: #9dbde4;
  box-shadow: 0 0 0 3px rgba(18, 105, 223, 0.1);
}
.document-recherche-champ svg.ic {
  width: 16px;
  height: 16px;
  opacity: 0.45;
  flex: none;
}
.document-recherche-champ input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink-900);
}
.document-recherche-champ input::-webkit-search-cancel-button {
  cursor: pointer;
}
.document-recherche-compte {
  flex: none;
  font-size: 11px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.document-groupe + .document-groupe {
  margin-top: 20px;
}
.document-groupe > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.document-groupe > h3 > em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--ink-500);
}

/* La carte redevient une ligne lisible : icône, texte aligné à gauche,
   action à droite. Le titre ne peut plus être centré par héritage. */
.document-list .document-card {
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 11px 13px;
  text-align: left;
}
.document-card-icone {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--violet-100);
  flex: none;
}
.document-card-icone svg.ic {
  width: 16px;
  height: 16px;
}
/* app.css impose à tout « .document-card > span » un carré violet de 37 px
   centré : le titre s'en trouvait centré et la mention d'aperçu se retrouvait
   dans une pastille. Seule l'icône garde ce traitement. */
.document-list .document-card > .document-card-texte,
.document-list .document-card > .document-card-inerte {
  width: auto;
  height: auto;
  background: transparent;
  place-items: initial;
}
.document-list .document-card > .document-card-texte {
  display: block;
}
.document-list .document-card > .document-card-inerte {
  display: inline-flex;
  align-items: center;
}
.document-card-texte {
  display: block;
  min-width: 0;
  text-align: left;
}
.document-card-texte strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.document-card-texte small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-500);
}
.document-card-action {
  flex: none;
  white-space: nowrap;
}
.document-card-action svg.ic {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.document-list .document-card > .icon-button[data-action="delete-document"] {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}
.document-list .document-card > .document-card-action,
.document-list .document-card > .document-card-inerte {
  grid-column: 2 / 4;
  grid-row: 2;
  justify-self: start;
}

/* Format que la visionneuse ne sait pas rendre : on l'annonce, on ne
   propose pas un bouton qui ouvrirait un cadre vide. */
.document-card-inerte {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  color: var(--ink-500);
  padding: 5px 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 9px;
  background: transparent;
}
.document-card-inerte svg.ic {
  width: 13px;
  height: 13px;
  opacity: 0.55;
}

/* ============================================================
   Prospection — statut non étayé
   ============================================================
   Un statut d'étape avancée sans envoi ni réponse daté ne décrit pas une
   prospection réelle. On ne le réécrit pas — on le marque, discrètement mais
   sans ambiguïté, pour qu'il ne se lise jamais comme un échange constaté. */

.prospect-row .prospect-sans-preuve,
.prospect-sans-preuve {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #e6c98a;
  background: #fdf6e7;
  /* .prospect-row span impose une couleur d'appoint : on la reprend ici,
     sinon l'avertissement se fond dans les métadonnées de la ligne. */
  color: #8a6321;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.prospect-row .prospect-sans-preuve { color: #8a6321; }
.prospect-sans-preuve svg.ic {
  width: 11px;
  height: 11px;
}
.pipeline-card.est-sans-preuve {
  border-left: 3px solid #e0b45f;
}
.pipeline-alerte {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 5px;
  color: #b8862f;
}
.pipeline-alerte svg.ic {
  width: 12px;
  height: 12px;
}

/* L'état et son éventuel avertissement occupent une seule cellule de la
   grille : sans cela l'avertissement passait à la ligne, sous la case à
   cocher, loin du statut qu'il qualifie. */
.prospect-row > .prospect-etat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* ============================================================
   Réglages — respiration et sections repliables
   ============================================================
   Les blocs se touchaient presque : la page se lisait comme une seule masse.
   Les marges au coup par coup (style="margin-top:18px") sont remplacées par
   un espacement unique porté par la page. */

.page--parametres > .card,
.page--parametres > .settings-list,
.page--parametres > details.section-repliable {
  margin-top: 26px;
}
.page--parametres .settings-list {
  display: grid;
  gap: 14px;
}

/* Toutes les informations d'entreprise déjà connues tiennent sur deux
   colonnes : on les voit d'un coup d'œil sans ouvrir le formulaire. */
.contact-list--entreprise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* Section repliable : fermée par défaut, s'ouvre au clic sur son titre. */
details.section-repliable {
  padding: 0;
  overflow: hidden;
}
details.section-repliable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 19px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.section-repliable > summary::-webkit-details-marker {
  display: none;
}
details.section-repliable > summary:hover {
  background: var(--blue-50);
}
details.section-repliable > summary:focus-visible {
  outline: 2px solid #9dbde4;
  outline-offset: -2px;
}
.section-repliable-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.section-repliable-titre > svg.ic {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.65;
}
.section-repliable-titre strong {
  display: block;
  font-size: 13px;
  color: var(--ink-900);
}
.section-repliable-titre small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-500);
}
.section-repliable-chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ink-500);
  transition: transform 0.18s ease;
}
.section-repliable-chevron svg.ic {
  width: 16px;
  height: 16px;
}
details.section-repliable[open] > summary .section-repliable-chevron {
  transform: rotate(180deg);
}
.section-repliable-corps {
  padding: 0 19px 19px;
  border-top: 1px solid var(--line-soft);
  margin-top: -1px;
  padding-top: 16px;
}
.section-repliable-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .section-repliable-chevron { transition: none; }
}

/* ============================================================
   Cartes Clients — pastille de type et équilibre vertical
   ============================================================
   Le pied de carte était positionné en absolu sur une hauteur minimale de
   196 px : avatar, nom et informations restaient collés en haut d'un grand
   vide, et l'ensemble donnait l'impression de flotter trop bas. La carte
   devient une colonne : le contenu se pose en haut, le pied est poussé en
   bas par la mise en page elle-même, et la hauteur suit le contenu. */

.client-card {
  display: flex;
  flex-direction: column;
  min-height: 172px;
}
.client-card h2 {
  margin: 13px 0 6px;
}
.client-card > p {
  margin: 0;
}
.client-card .client-card-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: auto;
  padding-top: 12px;
}

/* Ligne d'identité : le type devient une pastille, la ville reste du texte.
   L'un qualifie le dossier, l'autre le situe — ils ne se lisent pas pareil. */
.client-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.client-card-ville {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.client-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.client-type--particulier {
  background: #eef4fd;
  border-color: #cfe0f6;
  color: #2f5c8d;
}
.client-type--professionnel {
  background: #eef2f7;
  border-color: #d3dce8;
  color: #3f5470;
}
/* Type pas encore choisi : on ne l'habille pas d'une couleur qui laisserait
   croire à une qualification. Trait discontinu, gris — c'est une lacune. */
.client-type--indefini {
  background: transparent;
  border: 1px dashed #c8d2df;
  color: #74839a;
  font-weight: 500;
}

/* ============================================================
   Pictogrammes météo
   ============================================================
   La couleur vit dans le tracé (attribut stroke), pas dans une règle CSS :
   le pictogramme reste juste s'il est copié ailleurs. On ne fixe ici que sa
   taille et son alignement — et surtout on neutralise les règles qui
   forçaient « currentColor » sur toutes les icônes du bloc. */

svg.ic-meteo {
  color: inherit;
}
svg.ic-meteo path,
svg.ic-meteo circle,
svg.ic-meteo g {
  fill: none;
}
.weather-current svg.ic-meteo {
  width: 46px;
  height: 46px;
  flex: none;
}
.weather-chantier-resume {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.weather-chantier-resume svg.ic-meteo {
  width: 34px;
  height: 34px;
  flex: none;
}
.weather-chantier-resume strong {
  font: 700 22px var(--font-display);
  color: var(--ink-900);
}
.weather-chantier-resume span {
  font-size: 12px;
  color: var(--ink-500);
}
.topbar-weather svg.ic-meteo {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Pièce du coffre consultée sans la barre du visualiseur : le zoom du CRM
   agrandit le cadre lui-même, il faut donc pouvoir faire défiler autour. */
.viewer-body:has(iframe[style*="scale"]) { place-items: start center; }
.viewer-body iframe { transition: transform 160ms ease; }

/* ---------- RÉFÉRENCES FINANCIÈRES : BARRE D'OUTILS ET PAGINATION ----------
   La section n'avait aucun outil : elle déroulait la collection entière.
   La barre reprend la facture des autres écrans de liste — champ de
   recherche à gauche, filtres alignés, tout passe à la ligne sur mobile. */
.finance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.finance-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 12px;
  background: var(--dn-niveau3, #ffffff);
  border: 1px solid rgba(15, 45, 90, 0.14);
  border-radius: 11px;
}
.finance-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}
.finance-search input:focus { outline: none; }
.finance-search:focus-within {
  border-color: var(--blue-600, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.finance-toolbar select,
.finance-periode input {
  padding: 8px 10px;
  background: var(--dn-niveau3, #ffffff);
  border: 1px solid rgba(15, 45, 90, 0.14);
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  color: inherit;
}
.finance-periode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-600, #4a5b73);
}
.finance-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-600, #4a5b73);
}
.finance-pagination .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* La ligne entière ouvre la pièce : elle doit le dire au survol et au
   clavier, sans quoi rien ne signale qu'elle est cliquable. */
.billing-row.is-openable { cursor: pointer; }
.billing-row.is-openable:hover { background: var(--dn-niveau2, #e3ebf8); }
.billing-row.is-openable:focus-visible {
  outline: 2px solid var(--blue-600, #2563eb);
  outline-offset: -2px;
}
@media (max-width: 720px) {
  .finance-toolbar select,
  .finance-periode,
  .finance-search { flex: 1 1 100%; }
}

/* ---------- PARC MATÉRIEL : LIGNE CLIQUABLE ET FICHE ----------
   La liste du parc ouvre la fiche de l'équipement ; la fiche montre son
   identité puis ses historiques, chacun dans sa propre section. */
.equipment-row { cursor: pointer; }
.equipment-row:hover { background: var(--dn-niveau2, #e3ebf8); }
.equipment-row:focus-visible {
  outline: 2px solid var(--blue-600, #2563eb);
  outline-offset: -2px;
}
.equipment-row.is-active {
  background: var(--dn-niveau2, #e3ebf8);
  box-shadow: inset 3px 0 0 var(--blue-600, #2563eb);
}
.equipment-fiche { margin-top: 16px; }
.equipment-identite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.equipment-identite > div {
  padding: 10px 12px;
  background: var(--dn-niveau2, #e3ebf8);
  border-radius: 12px;
}
.equipment-identite span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-600, #4a5b73);
}
.equipment-identite strong { font-size: 13px; }
.equipment-histo { margin-top: 14px; }

/* ---------- PRODUITS : PHOTO ET ALERTES MÉTIER ---------- */
.product-row {
  grid-template-columns: 54px minmax(180px, 1.3fr) repeat(3, minmax(105px, .6fr)) auto auto;
}
.product-photo {
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--dn-niveau2, #e3ebf8);
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-photo.is-empty img { width: 18px; height: 18px; opacity: .5; }
@media (max-width: 900px) {
  .product-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .product-row > :nth-child(n+3):not(:last-child) { grid-column: 2 / -1; }
}

/* ---------- MOBILE : TITRES DE SECTION QUI SE CHEVAUCHAIENT ----------
   `.section-title` aligne le titre et ses actions sur une seule ligne, sans
   flex-wrap. Sur un écran étroit, un titre un peu long et deux boutons ne
   tiennent pas : le badge passait par-dessus le texte du titre et les boutons
   sortaient de la carte. Vu sur Documents entreprise (« Coffre ouvert »
   recouvrant le titre à 85 %), mais la règle est commune à tous les écrans.
   Le bloc titre prend la largeur, les actions passent dessous et s'enroulent
   entre elles. Rien ne change au-dessus de 720 px.                        */
@media (max-width: 720px) {
  .section-title {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 8px;
  }
  .section-title > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Un intitulé long ne doit pas pousser les actions hors de la carte. */
  .section-title h2,
  .section-title h3 { overflow-wrap: anywhere; }
  /* Les boutons d'action deviennent des éléments de plein droit : ils se
     répartissent sur la largeur au lieu de se marcher dessus. */
  .section-title > .button,
  .section-title > .status-badge,
  .section-title > .icon-button { flex: 0 0 auto; }
}

/* ---------- PROSPECTION : LES FILTRES REPLIÉS RESTAIENT À L'ÉCRAN ----------
   « Filtres de recherche » est un <details>. Le navigateur masque le contenu
   d'un <details> fermé — sauf si une règle impose un display à cet enfant, ce
   que fait `.filter-row { display: grid }`. Le bloc restait donc affiché,
   volet replié, et venait se poser sur la liste des prospects : « Filtrer »
   recouvrait une ligne à 96 %, « Réinitialiser » une autre à 100 %.
   On rétablit le comportement attendu du repli.                           */
.prospect-filters:not([open]) > .filter-row { display: none; }

/* ---------- MOBILE : LA BARRE DU PLANNING ÉTAIT COUPÉE ----------
   `.calendar-top` et `.calendar-nav` sont en flex sans retour à la ligne, et
   la coque du calendrier masque ce qui dépasse. Sur un écran de 390 px, la
   date était tronquée en plein milieu et surtout « Aujourd'hui » et la flèche
   « semaine suivante » se retrouvaient hors du cadre, donc inatteignables :
   impossible de changer de semaine depuis un téléphone. Les deux barres
   s'enroulent désormais, et la date prend la largeur qui lui reste.       */
@media (max-width: 720px) {
  .calendar-top {
    flex-wrap: wrap;
    gap: 10px;
  }
  .calendar-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  /* La période reste sur une ligne à elle : c'est le repère de lecture. */
  .calendar-nav > strong {
    flex: 1 1 100%;
    order: -1;
    text-align: center;
  }
}

/* ---------- MOBILE : LES ACTIONS DU BANDEAU D'ACCUEIL ÉTAIENT ROGNÉES ----------
   Les boutons du hero reçoivent `flex: 1` en mobile, mais un élément flex ne
   descend pas sous la largeur de son contenu : « Ajouter une tâche » et
   « Nouveau client » réclamaient plus que la largeur de l'écran, et le second
   sortait du cadre — on lisait « Nouveau c… ». Sous 430 px, chacun prend une
   ligne entière ; entre 430 et 900 px ils restent côte à côte mais peuvent
   enfin se serrer.                                                        */
@media (max-width: 900px) {
  .heading-actions { flex-wrap: wrap; }
  .heading-actions .button { min-width: 0; }
}
@media (max-width: 430px) {
  .heading-actions .button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------- ÉCRAN D'ACCÈS : TOUCH ID ----------
   Le raccourci doit se voir depuis l'écran de connexion, sans avoir à le
   chercher ailleurs : un bouton plein, sous le code, avec l'icône d'empreinte.
   Et tant qu'il n'est pas armé, une proposition discrète permet de l'activer
   avec le code que l'on est justement en train de saisir.
   Le pavé de code reste toujours au-dessus : c'est lui la référence.      */
.app-lock-touchid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  font-weight: 600;
}
.app-lock-touchid .touchid-icone {
  flex: 0 0 auto;
  opacity: 0.9;
}
.app-lock-touchid:disabled {
  opacity: 0.6;
  cursor: progress;
}
.app-lock-forgot {
  display: block;
  width: max-content;
  margin: 10px auto 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--blue-600, #0969e8);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.app-lock-forgot:disabled {
  opacity: 0.55;
  cursor: progress;
}
.app-lock-touchid-offre {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  /* La carte d'accès est un verre dépoli clair : ces trois valeurs venaient
     d'un fond sombre — le libellé ressortait blanc sur blanc, donc illisible,
     et le cadre disparaissait complètement. */
  border: 1px solid rgba(15, 32, 61, 0.14);
  border-radius: 11px;
  background: rgba(15, 32, 61, 0.04);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-700, #35405a);
  cursor: pointer;
  text-align: left;
}
.app-lock-touchid-offre input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}

/* ---------- ÉCRAN D'ACCÈS : PLUS AUCUN DÉBORDEMENT ----------
   La carte est une grille ; ses enfants ont donc `min-width: auto` et
   refusent de descendre sous la largeur de leur contenu. Le champ de code
   (lettres très espacées) et surtout le bouton « Touch ID — Déverrouiller
   avec votre empreinte », en `white-space: nowrap`, imposaient ainsi une
   largeur supérieure à la carte : tout sortait par la droite.
   On corrige la cause — les enfants peuvent se contraindre, le libellé du
   bouton peut passer à la ligne — plutôt que de fixer une largeur au doigt
   mouillé.                                                                */
.app-lock-card > * {
  min-width: 0;
}
/* La case à cocher de Touch ID est exclue : cette règle l'étirait à toute la
   largeur de la carte — d'où le grand carré blanc et le libellé rejeté à la
   ligne suivante. Elle garde les 16 px définis plus haut. */
.app-lock-card input:not([type="checkbox"]),
.app-lock-card .button,
.app-lock-card .app-lock-touchid-offre {
  width: 100%;
  box-sizing: border-box;
}
.app-lock-card .button {
  white-space: normal;
  text-align: center;
}
.app-lock-touchid {
  /* Le libellé est long à dessein : il doit rester lisible et tenir dans la
     carte, quitte à occuper deux lignes sur une fenêtre étroite. */
  min-height: 46px;
  padding: 10px 14px;
  line-height: 1.3;
}
.app-lock-card label {
  min-width: 0;
}
.app-lock-card input:not([type="checkbox"]) {
  /* L'espacement des caractères ne doit pas fixer une largeur minimale
     supérieure à la carte sur les petites fenêtres. */
  letter-spacing: normal;
  text-align: left;
  padding-right: 88px;
}
.app-lock-password-wrap,
.password-field-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.app-lock-password-toggle,
.password-visibility-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 2;
  min-height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  padding: 5px 9px;
  background: #edf4fc;
  color: #173963;
  font: inherit;
  font-size: .75rem;
  font-weight: 750;
  cursor: pointer;
}
.password-field-wrap input {
  width: 100%;
  padding-right: 88px !important;
}
@media (max-width: 430px) {
  .app-lock-card {
    padding: 24px 20px;
  }
  .app-lock-card input {
    font-size: 18px;
    letter-spacing: normal;
  }
}

/* ---------- ESPACEMENTS SIGNALÉS ----------
   Facturation & Qonto : « Configurer Qonto », le bloc « Prestataire de
   paiement » et la section « Références financières » se touchaient. On leur
   donne la même respiration que le reste du CRM, sans écarter davantage.  */
.qonto-hero .button {
  margin-top: 20px;
}
.qonto-hero .settings-row {
  margin-top: 20px;
}
.page .card.qonto-hero + .card.panel {
  margin-top: 24px !important;
}

/* État du système : les quatre boutons d'action étaient collés les uns aux
   autres, et la rangée collée au bloc de sauvegarde au-dessus. */
.page .card.panel .button-row {
  gap: 12px;
  flex-wrap: wrap;
}
.page .card.panel .data-list + .button-row {
  margin-top: 22px !important;
}

/* EAN produit : saisie, recherche locale et caméra restent dans le même
   champ, sans agrandir inutilement la modale. */
.product-ean-field > span > .ic {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}
.product-ean-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.product-ean-actions .button {
  min-height: 44px;
  white-space: nowrap;
}
.product-ean-proposal {
  padding: 14px;
  border: 1px solid rgba(75, 142, 255, 0.32);
  border-radius: 14px;
  background: rgba(31, 79, 151, 0.12);
}
.product-ean-proposal > strong {
  display: block;
  margin-bottom: 10px;
}
.product-ean-scanner {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.45fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(75, 142, 255, 0.32);
  border-radius: 14px;
  background: #061328;
}
.product-ean-scanner:not([hidden]) {
  display: grid;
}
.product-ean-scanner video {
  display: block;
  width: 100%;
  max-height: 280px;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}
@media (max-width: 720px) {
  .product-ean-actions {
    grid-template-columns: 1fr 1fr;
  }
  .product-ean-actions > input {
    grid-column: 1 / -1;
  }
  .product-ean-scanner {
    grid-template-columns: 1fr;
  }
}

.product-photo-preview {
  display: block;
  grid-column: 1 / -1;
  width: min(100%, 520px);
  max-height: 280px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 142, 255, 0.28);
  border-radius: 14px;
  background: #061328;
  cursor: zoom-in;
}
.product-photo-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
}
.product-photo-camera {
  padding: 14px;
  border: 1px solid rgba(75, 142, 255, 0.32);
  border-radius: 14px;
  background: #061328;
}
.product-photo-camera:not([hidden]) {
  display: grid;
  gap: 12px;
}
.product-photo-camera video {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

.product-event-history {
  margin: -4px 0 14px 64px;
  padding: 12px 14px;
  border: 1px solid rgba(75, 142, 255, 0.2);
  border-radius: 12px;
  background: rgba(7, 21, 43, 0.42);
}
.product-event-history > summary {
  cursor: pointer;
  font-weight: 750;
}
.product-event-history[open] > summary {
  margin-bottom: 10px;
}
.product-event-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-event-photos button {
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 142, 255, 0.28);
  border-radius: 9px;
  background: #061328;
  cursor: zoom-in;
}
.product-event-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-label-history {
  margin: -4px 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--line, #dfe7f0);
  border-radius: 14px;
  background: #fbfdff;
}
.product-label-history > summary { cursor: pointer; font-weight: 700; }
.product-label-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.product-label-photo { position: relative; display: inline-flex; }
.product-label-photo > button:first-child { border: 0; padding: 0; background: none; cursor: pointer; }
.product-label-photo img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid #dbe5f0; }
.product-label-photo > .icon-button { position: absolute; top: 4px; right: 4px; background: rgba(255, 255, 255, 0.94); }
@media (max-width: 720px) {
  .product-event-history {
    margin-left: 0;
  }
}

.equipment-main-photo {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.equipment-main-photo > button:first-child,
.equipment-main-photo > span:first-child {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 142, 255, 0.25);
  border-radius: 14px;
  background: #061328;
}
.equipment-main-photo > button:first-child {
  cursor: zoom-in;
}
.equipment-main-photo img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.equipment-main-photo.is-empty > span {
  gap: 8px;
  color: var(--ink-500);
}
.equipment-event-media {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.equipment-profile-fields {
  display: contents;
}
.equipment-profile-fields[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .equipment-main-photo {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   MOBILE / PWA — fondations partagées
   Les règles ci-dessous corrigent les composants responsables (barre haute,
   lignes de données, modales, visionneuse et messagerie) plutôt que chaque
   écran qui les consomme. Le desktop conserve les grilles détaillées.
   ======================================================================== */

.app-shell { min-height: 100dvh; }
.workspace,
.page-host,
.page,
.panel,
.card,
.data-list,
.data-row,
.section-title,
.section-title > div,
.heading-actions,
.bulk-bar { min-width: 0; }

.workspace > .topbar {
  height: calc(var(--topbar) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-right: calc(30px + var(--safe-right));
  padding-left: calc(30px + var(--safe-left));
}
.sidebar {
  padding-top: calc(25px + var(--safe-top));
  padding-bottom: calc(18px + var(--safe-bottom));
  padding-left: calc(17px + var(--safe-left));
}
.page-host {
  min-height: calc(100dvh - var(--topbar) - var(--safe-top));
  padding-right: calc(clamp(22px, 3.1vw, 48px) + var(--safe-right));
  padding-bottom: calc(56px + var(--safe-bottom));
  padding-left: calc(clamp(22px, 3.1vw, 48px) + var(--safe-left));
}
.notification-panel {
  top: max(16px, var(--safe-top));
  right: max(16px, var(--safe-right));
  bottom: max(16px, var(--safe-bottom));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
}
.toast-region {
  top: max(22px, var(--safe-top));
  right: max(22px, var(--safe-right));
}

/* Le bandeau Véhicule utilise le visuel horizontal livré dans DIST. Sa zone
   sombre native reste à gauche ; le véhicule et son cadrage restent à droite. */
.page-heading--vehicule {
  background-position: center, center, right center, center;
}

/* La légende fait désormais partie de la barre du planning, juste après les
   flèches. Aucun fond blanc ni ombre ne lui donne l'apparence d'une carte. */
.calendar-center {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.calendar-center .calendar-legend {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Le dialog reste un cadre fixe, tandis que son corps est la seule zone qui
   défile. En portrait comme en paysage, Annuler/Fermer reste donc atteignable. */
.modal-card {
  width: min(640px, calc(100dvw - var(--safe-left) - var(--safe-right) - 32px));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
}
.modal-header,
.modal-footer { flex: 0 0 auto; }
.modal-header > div { min-width: 0; }
.modal-header h2 { overflow-wrap: anywhere; }
.modal-body {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-footer { flex-wrap: wrap; }

/* Visionneuse : le header s'adapte au titre, le corps reçoit tout l'espace
   restant et le PDF n'est jamais redimensionné en transformant son iframe. */
.viewer {
  width: min(1180px, calc(100dvw - var(--safe-left) - var(--safe-right) - 16px));
  height: min(820px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px));
  max-width: 100%;
  max-height: 100%;
  flex-direction: column;
}
.viewer[open] { display: flex; }
.viewer.is-fullscreen {
  width: 100dvw;
  height: 100dvh;
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}
.viewer > header {
  flex: 0 0 auto;
  height: auto;
  min-height: 72px;
}
.viewer > header > div:first-child { min-width: 0; }
.viewer h2 { overflow-wrap: anywhere; }
.viewer-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.viewer-body iframe { transform: none !important; }

.mail-mobile-back { display: none; }

@media (max-width: 900px) {
  :root { --page-pad-x: 18px; }
  .workspace > .topbar {
    padding-right: calc(18px + var(--safe-right));
    padding-left: calc(18px + var(--safe-left));
  }
  .page-host {
    padding-right: calc(18px + var(--safe-right));
    padding-left: calc(18px + var(--safe-left));
  }
  .page-heading--vehicule { background-position: center, center, 76% center, center; }
}

@media (max-width: 700px) {
  .button { max-width: 100%; white-space: normal; text-align: center; }
  .button-row { min-width: 0; flex-wrap: wrap; }
  .button-row > .button { min-width: 0; }

  /* Une ligne métier devient une carte verticale commune. Les quelques lignes
     dotées d'un menu ou d'une case gardent une seconde colonne dédiée. */
  .data-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }
  .data-row > * { min-width: 0; max-width: 100%; }
  .data-row strong,
  .data-row span { overflow-wrap: anywhere; }
  .data-row .status-badge { justify-self: start; white-space: normal; }

  .equipment-row,
  .billing-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .equipment-row > div:nth-child(2),
  .equipment-row > div:nth-child(3),
  .billing-row > div:nth-child(2),
  .billing-row > div:nth-child(3),
  .billing-row > .status-badge { grid-column: 1 / -1; }
  .equipment-row > .status-badge,
  .billing-row > .finance-actions-menu { grid-column: 2; grid-row: 1; }
  .equipment-row > svg.ic {
    position: absolute;
    right: 12px;
    bottom: 12px;
  }
  .finance-actions-menu[open] > div {
    position: fixed;
    z-index: 110;
    right: calc(8px + var(--safe-right));
    bottom: calc(8px + var(--safe-bottom));
    top: auto;
    width: calc(100dvw - var(--safe-left) - var(--safe-right) - 16px);
    max-width: 420px;
  }

  .page--corbeille .data-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .page--corbeille .data-row > input { grid-column: 1; grid-row: 1; }
  .page--corbeille .data-row > div:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .page--corbeille .data-row > div:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .page--corbeille .data-row > .button-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page--corbeille .data-row > .button-row > * { width: 100%; }

  .qonto-hero .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }
  .qonto-hero .settings-row > div:first-child { grid-column: 1 / -1; }
  .qonto-hero .settings-row > .status-badge {
    grid-column: 1;
    justify-self: start;
  }
  .qonto-hero .settings-row > .button {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  .mail-templates .data-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .mail-templates .data-row > div:first-child { grid-column: 1; }
  .mail-templates .data-row > .status-badge { grid-column: 2; grid-row: 1; }
  .mail-templates .data-row > .button-row {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .prospect-row.header { display: none; }
  .prospect-row:not(.header) { min-width: 0; }
  .prospect-row:not(.header) > * { min-width: 0; }

  .calendar-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .calendar-center {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    gap: 8px;
  }
  .calendar-nav { flex-wrap: nowrap; }
  .calendar-nav > strong {
    order: initial;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 112px;
    font-size: 11px;
  }
  .calendar-center .calendar-legend {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .calendar-center .calendar-legend::-webkit-scrollbar { display: none; }
  .calendar-center .calendar-legend span { flex: 0 0 auto; }

  .viewer {
    width: calc(100dvw - var(--safe-left) - var(--safe-right) - 8px);
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px);
    border-radius: 16px;
  }
  .viewer > header {
    min-height: 0;
    padding: 9px 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .viewer > header > div:first-child { flex: 1 1 100%; }
  .viewer > header .eyebrow { display: none; }
  .viewer h2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 1.25;
  }
  .viewer-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
    gap: 6px;
  }
  .viewer-actions > * { width: 100%; min-width: 0; min-height: 44px; padding: 0 8px; }
  #viewerDownload { padding: 0; font-size: 0; }
  #viewerDownload svg.ic { margin: auto; }
  #viewerFullscreen { overflow: hidden; text-overflow: ellipsis; }

  /* Messagerie : une seule vue à la fois, comme une application mail. */
  .mail-page .mail-shell { min-height: 0; }
  .mail-page:not(.has-current) .mail-reader { display: none; }
  .mail-page.has-current .mail-folders,
  .mail-page.has-current .mail-list,
  .mail-page.has-current .mail-resizer,
  .mail-page.has-current .mail-bulk-bar { display: none; }
  .mail-page.has-current .mail-reader { display: flex; min-height: min(620px, calc(100dvh - 110px)); }
  .mail-mobile-back { display: inline-flex; }
  .mail-reader-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px;
  }
  .mail-reader-head .mail-mobile-back { grid-column: 1; }
  .mail-reader-head > div { grid-column: 2; }
  .mail-reader-head > .button:last-child,
  .mail-reader-head > .button-row { grid-column: 3; }
  .mail-body { padding: 14px; }
  .mail-html-frame { min-height: 480px; padding: 0; }
  .mail-bulk-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .mail-bulk-bar > .button { width: 100%; margin: 0; }
  .mail-bulk-bar > .mail-secondary-action { display: none; }
  .mail-bulk-bar > .button.secondary,
  .mail-bulk-bar > .button.danger { grid-column: auto; }
}

@media (max-width: 520px) {
  :root { --page-pad-x: 13px; }
  .workspace > .topbar {
    height: calc(66px + var(--safe-top));
    gap: 8px;
    padding-right: calc(10px + var(--safe-right));
    padding-left: calc(10px + var(--safe-left));
  }
  .workspace > .topbar .global-search { min-width: 0; }
  .workspace > .topbar .global-search input {
    min-width: 0;
    padding-right: 12px;
    text-overflow: ellipsis;
  }
  .workspace > .topbar .global-search kbd { display: none; }
  .workspace > .topbar .topbar-sync {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .workspace > .topbar .topbar-sync .sync-stack { display: none; }
  .workspace > .topbar .topbar-sync::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px #fff;
  }
  .workspace > .topbar .mobile-menu,
  .workspace > .topbar .notification-trigger { flex: 0 0 44px; width: 44px; height: 44px; }
  .page-host {
    padding-top: 22px;
    padding-right: calc(13px + var(--safe-right));
    padding-bottom: calc(38px + var(--safe-bottom));
    padding-left: calc(13px + var(--safe-left));
    min-height: calc(100dvh - 66px - var(--safe-top));
  }
  .page--corbeille .data-row > .button-row { grid-template-columns: 1fr; }
  .page--corbeille .bulk-bar { display: grid; grid-template-columns: 1fr; }
  .page--corbeille .bulk-bar > * { width: 100%; margin: 0; }
  .mail-bulk-bar { grid-template-columns: 1fr 1fr; }
  .mail-bulk-bar > label { grid-column: 1; }
  .mail-bulk-bar > strong { grid-column: 2; text-align: right; }
  .mail-reader-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mail-reader-head > .button:last-child,
  .mail-reader-head > .button-row { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .modal-card {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px);
    border-radius: 15px;
  }
  .modal-header,
  .modal-footer { padding: 10px 14px; }
  .modal-body { padding: 12px 14px; }
  .photo-crop-frame { max-height: 42dvh; }
  .photo-crop-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .viewer {
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 4px);
  }
  .viewer > header > div:first-child { display: none; }
  .viewer-actions { margin-left: auto; }
}
/* LOT D — Carte chantier & diagnostic visuel. Le vocabulaire reste celui des
   cartes DRONELIA ; aucun thème parallèle n'est introduit. */
.visual-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:8px 0 20px}.visual-page-heading h1{margin:3px 0;font-size:clamp(1.7rem,3vw,2.45rem);color:var(--navy,#0b172b)}.visual-page-heading p{margin:0;color:#65758d}.sync-visual{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #d8e3f0;border-radius:999px;background:#fff;color:#40516a;font-weight:700}.visual-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.visual-map-layout>aside{display:grid;gap:16px}.map-workspace{padding:16px;min-width:0}.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.map-toolbar>div{display:flex;gap:7px}.chantier-map-canvas{height:min(62vh,650px);min-height:460px;position:relative;overflow:hidden;border:1px solid #cfdbea;border-radius:18px;background:#e9eff7;touch-action:none;user-select:none}.chantier-map-canvas.is-drawing{cursor:crosshair}.chantier-map-tiles,.chantier-map-overlays{position:absolute;inset:0}.chantier-map-tiles img{position:absolute;width:256px;height:256px;max-width:none}.chantier-map-overlays{z-index:2;width:100%;height:100%;pointer-events:none}.chantier-map-attribution{position:absolute;right:8px;bottom:7px;z-index:3;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.85);font-size:.65rem;color:#506078}.map-drawing-actions{display:flex;align-items:center;gap:10px;padding:12px;margin-top:10px;border-radius:12px;background:#eef6ff}.map-drawing-actions strong{margin-right:auto}.map-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.map-feature-list{display:grid;gap:8px}.map-feature-list article{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:10px;border:1px solid #e1e9f3;border-radius:12px}.map-feature-list article div{min-width:0}.map-feature-list strong,.map-feature-list small,.map-feature-list span{display:block}.map-feature-list small,.map-feature-list span{color:#708099;font-size:.75rem}.map-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#53637a;flex:0 0 auto}.map-dot.is-takeoff{background:#1c9b68}.map-dot.is-water,.map-dot.is-treatment-area{background:#1475e8}.map-dot.is-vehicle-access{background:#7557d8}.map-dot.is-obstacle,.map-dot.is-vegetation,.map-dot.is-high-element{background:#e58a18}.map-dot.is-power-line,.map-dot.is-public-zone{background:#d94848}.map-legend p{display:flex;align-items:center;gap:9px;margin:8px 0;color:#46566d}.visual-filters{display:flex;gap:6px;overflow-x:auto;padding:5px;margin-bottom:14px;scrollbar-width:thin}.visual-filters button{white-space:nowrap;border:0;border-radius:999px;padding:9px 15px;background:#edf3fa;color:#4d5e76;font-weight:700}.visual-filters button.active{background:#1475e8;color:#fff}.diagnostic-section{padding:18px;margin-bottom:16px}.diagnostic-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}.diagnostic-gallery>article{min-width:0;padding:9px;border:1px solid #dfe8f2;border-radius:15px;background:#fff}.diagnostic-photo{display:block;width:100%;height:145px;padding:0;border:0;border-radius:11px;overflow:hidden;background:#edf3f9}.diagnostic-photo img{display:block;width:100%;height:100%;object-fit:cover}.diagnostic-gallery>article>div:not(.compact-actions){display:flex;justify-content:space-between;gap:8px;margin-top:8px}.diagnostic-gallery p{margin:5px 0;color:#718097;font-size:.75rem}.report-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:#4d5e76}.report-toggle input{width:18px;height:18px}.diagnostic-columns{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.comparison-list,.anomaly-list,.annotation-list{display:grid;gap:12px}.comparison-card,.anomaly-list article,.annotation-list article{padding:12px;border:1px solid #dfe8f2;border-radius:14px}.comparison-card header{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}.comparison-card header>div{display:flex;align-items:center;gap:8px}.before-after{position:relative;height:260px;overflow:hidden;border-radius:12px;background:#edf2f8}.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.before-after img.after{clip-path:inset(0 calc(100% - var(--compare)) 0 0)}.before-after input{position:absolute;z-index:3;inset:auto 5% 10px;width:90%;accent-color:#1475e8}.anomaly-list article,.annotation-list article{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:9px;align-items:center}.annotation-list article{grid-template-columns:auto minmax(0,1fr) auto auto auto}.anomaly-list p,.annotation-list p{margin:4px 0;color:#697991}.annotation-pin{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eaf3ff;color:#1475e8}.annotation-editor{position:relative;min-height:280px;max-height:55vh;overflow:hidden;border-radius:15px;background:#eaf0f7;cursor:crosshair}.annotation-editor img{display:block;width:100%;height:100%;max-height:55vh;object-fit:contain}.annotation-editor>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:#e22;filter:drop-shadow(0 1px 2px #fff);pointer-events:none}.annotation-editor>span svg{width:30px;height:30px}.report-selection{display:grid;gap:7px;max-height:48vh;overflow:auto;padding-right:5px}.report-selection h3{margin:13px 0 2px;color:#102039}.report-choice{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #e1e9f2;border-radius:11px}.report-choice input{width:20px;height:20px}.report-choice span,.report-choice strong,.report-choice small{display:block}.report-choice small{color:#75849a}.field-visual-capture{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding:12px;border-radius:14px;background:#eff6ff}.field-visual-capture strong{width:100%;color:#18304f}
@media(max-width:1000px){.visual-map-layout,.diagnostic-columns{grid-template-columns:1fr}.visual-map-layout>aside{grid-template-columns:repeat(2,minmax(0,1fr))}.map-add-panel{grid-column:1/-1}.chantier-map-canvas{height:55vh}.before-after{height:330px}}
@media(max-width:620px){.visual-page-heading{align-items:stretch;flex-direction:column}.visual-page-heading .compact-actions{display:grid;grid-template-columns:1fr}.visual-page-heading .button{width:100%}.visual-map-layout>aside{grid-template-columns:1fr}.map-toolbar{align-items:stretch;flex-direction:column}.map-toolbar>div{justify-content:space-between}.chantier-map-canvas{min-height:380px;height:52vh;border-radius:13px}.map-category-grid{grid-template-columns:1fr}.map-drawing-actions{align-items:stretch;flex-direction:column}.map-drawing-actions .button{width:100%}.diagnostic-section{padding:12px}.diagnostic-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.diagnostic-photo{height:120px}.diagnostic-gallery .compact-actions{flex-wrap:wrap}.comparison-card{padding:8px}.before-after{height:240px}.anomaly-list article,.annotation-list article{grid-template-columns:1fr auto}.annotation-list article>.annotation-pin{display:none}.anomaly-list article>div,.annotation-list article>div{grid-column:1/-1}.report-toggle{min-height:36px}.annotation-editor{min-height:220px}.sync-visual{align-self:flex-start}}
@media(max-width:390px){.diagnostic-gallery{grid-template-columns:1fr}.diagnostic-photo{height:190px}}