/* ═══════════════════════════════════════════════════════════
   EVO Revamp (evo_ab=B) — Part of com_evo, the branch-B redesign. No equivalent in com_neo (branch A).
   EVO Back-office — Design System v2 (Wave 1)
   ═══════════════════════════════════════════════════════════
   Port direct des tokens from docs/specs/design_handoff_evo_revamp/
   design-reference/evo/tokens.css. Aucun calcul SCSS, juste des
   custom properties — partner branding overridable via :root override.

   Wave 1 ne ship que ce qui est utilisé par les écrans de la wave
   (Connection cette branche, Dashboard et Wizard à venir). Les atoms
   manquants seront ajoutés au fil des branches suivantes.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Brand (white-label, overridable per partner) */
  --evo-brand-primary: #4adbc4;
  --evo-brand-primary-ink: #0e3a32;
  --evo-brand-primary-50: #e8faf6;
  --evo-brand-primary-100: #d2f5ed;
  --evo-brand-primary-200: #a8ecdf;
  --evo-brand-primary-600: #2db8a0;
  --evo-brand-primary-700: #1f9784;
  --evo-brand-primary-900: #0e3a32;
  --evo-brand-accent: #fae04d;
  --evo-brand-accent-ink: #6b5400;

  /* Office palette */
  --evo-teal: #4adbc4;
  --evo-yellow: #fae04d;
  --evo-blue: #0c60ea;
  --evo-red: #ff585f;
  --evo-purple: #bf4bc4;
  --evo-red-50: #fff0f1;
  --evo-red-200: #ffc1c4;
  --evo-red-500: var(--evo-red);  /* alias — brand red as 500 step */
  --evo-red-600: #e63d44;         /* used by destructive solid variants */
  --evo-red-700: #c92027;         /* used by destructive hover state */
  --evo-blue-50: #e7f0fe;
  --evo-yellow-50: #fffbe5;
  --evo-yellow-200: #fdf0a3;

  /* Neutrals */
  --evo-ink-900: #222223;
  --evo-ink-700: #3a3a3c;
  --evo-ink-600: #4a4d51;  /* between ink-500 and ink-700 — used by stepper "done" labels */
  --evo-ink-500: #5a5e62;
  --evo-ink-400: #818a8f;
  --evo-ink-300: #a3a9ad;
  --evo-ink-200: #c2c6c8;
  --evo-line: #d1d4d3;
  --evo-line-strong: #b8bcbb;
  --evo-paper-3: #ececec;
  --evo-paper-2: #f4f4f4;
  --evo-paper: #fafafa;
  --evo-card: #ffffff;

  /* Type */
  --evo-font-sans: 'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --evo-font-display: 'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --evo-font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Radii */
  --evo-r-sm: 4px;
  --evo-r-md: 6px;
  --evo-r-lg: 10px;
  --evo-r-xl: 14px;
  --evo-r-pill: 999px;

  /* Shadows */
  --evo-sh-xs: 0 1px 0 rgba(34,34,35,.04);
  --evo-sh-sm: 0 1px 2px rgba(34,34,35,.06), 0 0 0 1px rgba(34,34,35,.04);
  --evo-sh-md: 0 2px 6px rgba(34,34,35,.08), 0 0 0 1px rgba(34,34,35,.04);
  --evo-sh-lg: 0 8px 24px rgba(34,34,35,.10), 0 0 0 1px rgba(34,34,35,.04);
  --evo-sh-focus: 0 0 0 3px rgba(74,219,196,.30);

  /* Spacing */
  --evo-s-1: 4px;
  --evo-s-2: 8px;
  --evo-s-3: 12px;
  --evo-s-4: 16px;
  --evo-s-5: 20px;
  --evo-s-6: 24px;
  --evo-s-8: 32px;

  /* v1→v2 aliases (kept for forward compat) */
  --evo-emerald-50:  var(--evo-brand-primary-50);
  --evo-emerald-100: var(--evo-brand-primary-100);
  --evo-emerald-200: var(--evo-brand-primary-200);
  --evo-emerald-500: var(--evo-brand-primary);
  --evo-emerald-600: var(--evo-brand-primary-600);
  --evo-emerald-700: var(--evo-brand-primary-700);
  --evo-emerald-800: var(--evo-brand-primary-900);  /* alias — kept for compat */
  --evo-emerald-900: var(--evo-brand-primary-900);
  --evo-gold-100: #fffbe5;
  --evo-gold-500: var(--evo-yellow);
  --evo-gold-700: #8a6e00;
  /* `--evo-red-500` is declared once above in the office palette. */
  --evo-ink-800: var(--evo-ink-900);
}

/* ── Reset minimal scoped à la zone .evo ──────────────────── */
.evo, .evo *, .evo *::before, .evo *::after { box-sizing: border-box; }
.evo { font-family: var(--evo-font-sans); color: var(--evo-ink-900); font-feature-settings: 'cv11', 'ss01'; }
.evo a { color: inherit; text-decoration: none; }
.evo button { font: inherit; cursor: pointer; background: none; border: 0; padding: 5px; color: inherit; }
.evo input, .evo select, .evo textarea { font: inherit; color: inherit; }

/* ── Type ramp ─────────────────────────────────────────── */
.evo-display { font-family: var(--evo-font-display); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; }
.evo-h1 { font-family: var(--evo-font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
.evo-h2 { font-family: var(--evo-font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.evo-h3 { font-family: var(--evo-font-sans); font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; }
.evo-body { font-size: 14px; line-height: 1.55; color: var(--evo-ink-700); }
.evo-small { font-size: 12px; line-height: 1.5; color: var(--evo-ink-400); }
.evo-overline { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--evo-ink-400); }
.evo-mono { font-family: var(--evo-font-mono); font-feature-settings: 'tnum'; }
/* Policy number cell — design MoreScreens.jsx:138 — mono + emerald, clickable. */
.evo-policy-num { font-family: var(--evo-font-mono); font-weight:500; color:var(--evo-emerald-700); text-decoration:none; font-size:12px; }
.evo-policy-num:hover { text-decoration:underline; }
/* Status pill with leading dot — visual signal of liveness. */
.evo-badge--dot { padding-left:6px; }
.evo-badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; margin-right:2px; flex-shrink:0; }
/* Compact input variant for filter bars */
.evo-input--sm { padding:6px 8px; font-size:12px; height:32px; max-width:140px; }
/* Date range cluster in the filter bar */
.evo-filter-daterange { display:inline-flex; align-items:center; gap:6px; }
.evo-num { font-variant-numeric: tabular-nums; }

/* ── Scroll ──────────────────────────────────────────────── */
.evo-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.evo-scroll::-webkit-scrollbar-thumb { background: var(--evo-line); border-radius: 999px; }
.evo-scroll::-webkit-scrollbar-track { background: transparent; }

/* ─── ATOMS ────────────────────────────────────────────────
   Wave 1 atoms : Btn, Field/Input, Card. Plus à venir.
   ─────────────────────────────────────────────────────── */

/* -- Btn -------------------------------------------------
   Scoped under `.evo` (classe racine commune à `.evo-app` ET
   `.evo-connection` — le login override est en evo-connection donc
   le scope plus large couvre les deux). `appearance: none` neutralise
   les resets `button { ... }` du template parent. */
.evo .evo-btn,
a.evo-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--evo-s-2);
  padding: 10px 16px; border-radius: var(--evo-r-md);
  font-weight: 600; font-size: 14px; line-height: 1;
  border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s;
  cursor: pointer; user-select: none;
  text-decoration: none;
  font-family: inherit;
  background: transparent;
}
.evo .evo-btn:focus-visible { outline: none; box-shadow: var(--evo-sh-focus); }
.evo .evo-btn[disabled],
.evo .evo-btn:disabled,
.evo .evo-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* `.evo-btn--primary` text color is `--evo-brand-primary-ink` (#0e3a32, dark teal),
   not the white from Atoms.jsx. Brand primary #4adbc4 is a light teal; with
   #fff text the contrast ratio is ~2.0 (WCAG fail). With dark-ink text the
   contrast is ~7.8 (WCAG AAA). tokens.css does not define a `--evo-btn-primary-fg`,
   so we keep the accessible variant. Update Atoms.jsx if the tokens change. */
/* Sélecteur racine `.evo` (= classe commune à `.evo-app` ET `.evo-connection`)
   au lieu de `.evo-app` seul → couvre aussi les boutons de la page login
   override où le container racine est `.evo evo-connection`. */
.evo .evo-btn--primary,
a.evo-btn--primary { background: var(--evo-brand-primary); color: var(--evo-brand-primary-ink); }
.evo .evo-btn--primary:hover,
a.evo-btn--primary:hover { background: var(--evo-brand-primary-600); }

.evo .evo-btn--secondary,
a.evo-btn--secondary { background: var(--evo-card); color: var(--evo-ink-900); border-color: var(--evo-line); }
.evo .evo-btn--secondary:hover,
a.evo-btn--secondary:hover { background: var(--evo-paper-2); }

.evo .evo-btn--ghost,
a.evo-btn--ghost { background: transparent; color: var(--evo-ink-700); }
.evo .evo-btn--ghost:hover,
a.evo-btn--ghost:hover { background: var(--evo-paper-2); }

.evo .evo-btn--dark,
a.evo-btn--dark { background: var(--evo-ink-900); color: #fff; }
.evo .evo-btn--dark:hover,
a.evo-btn--dark:hover { background: var(--evo-ink-700); }

.evo .evo-btn--danger,
a.evo-btn--danger { background: var(--evo-card); color: var(--evo-red); border-color: var(--evo-red-200); }
.evo .evo-btn--danger:hover,
a.evo-btn--danger:hover { background: var(--evo-red-50); }

.evo .evo-btn--sm,
a.evo-btn--sm { padding: 6px 10px; font-size: 12px; }
.evo .evo-btn--lg,
a.evo-btn--lg { padding: 14px 20px; font-size: 15px; }
.evo .evo-btn--full,
a.evo-btn--full { width: 100%; min-height: 48px; }

/* -- Field / Input --------------------------------------
   Single canonical Field + Label rule. Templates use
   `<label class="evo-label">…</label>` inside `.evo-field`.
   The legacy `.evo-field__label` BEM class was never wired in — dropped. */
.evo-field { display: flex; flex-direction: column; gap: 8px; }
/* Label EVO — design pro propre. Spécificité 2 classes pour battre les
   sélecteurs Bootstrap (`label`, `.col-form-label`) du template parent
   qui ajoutaient des margins erratiques côté override login. */
.evo-field > .evo-field__label,
.evo-field__label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--evo-ink-700);
    text-transform: none;
}
.evo-field__label .evo-required {
    color: var(--evo-red, #dc2626);
    font-weight: 700;
    margin-left: 2px;
}
.evo-label { font-size: 12px; font-weight: 500; color: var(--evo-ink-700); }
/* Required-field marker — small, brand-colored, never wraps with the label.
   Sized down a touch and positioned with a thin space so it reads as a
   subtle annotation rather than a typo. Visible everywhere the `evo-required`
   class is used, plus on labels rendered without an explicit class. */
.evo-required {
    display: inline-block;
    margin-left: 3px;
    color: var(--evo-red, #dc2626);
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1;
    transform: translateY(-1px);
    user-select: none;
}
.evo-required::before { content: ''; display: inline-block; width: 1px; }
.evo-label .evo-required { color: var(--evo-red); margin-left: 2px; }
.evo-field-hint { font-size: 11px; color: var(--evo-ink-500); }
.evo-field-error { font-size: 11px; color: var(--evo-red); }

.evo-input,
.evo-select,
.evo-textarea {
  display: block; width: 100%;
  padding: 10px 12px;
  background: var(--evo-card);
  border: 1px solid var(--evo-line);
  border-radius: var(--evo-r-md);
  font-size: 13px; line-height: 1.4;
  color: var(--evo-ink-900);
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
}
.evo-input,
.evo-select { height: 40px; padding: 0 12px; }
.evo-select { cursor: pointer; }
.evo-input:focus,
.evo-select:focus,
.evo-textarea:focus { outline: none; border-color: var(--evo-brand-primary); box-shadow: var(--evo-sh-focus); }
.evo-input::placeholder { color: var(--evo-ink-400); }
.evo-input--readonly,
.evo-input--locked,
.evo-input:disabled { background: var(--evo-paper-2); color: var(--evo-ink-500); cursor: default; }

/* Champ obligatoire vide après une tentative de submit invalide.
   Apparaît sur les inputs gated par `:class="{'is-invalid': ...}"` côté
   wizard step 3 — Adil 2026-05-11. La bordure rouge + bg tinté + ring
   guident l'agent vers ce qu'il faut compléter. Disparait dès que l'agent
   tape une valeur (la binding se ré-évalue). */
.evo-input.is-invalid,
.evo-select.is-invalid,
.evo-textarea.is-invalid {
  border-color: var(--evo-red-500) !important;
  background: var(--evo-red-50);
  box-shadow: 0 0 0 3px rgba(255, 88, 95, 0.12);
}
.evo-input.is-invalid:focus,
.evo-select.is-invalid:focus,
.evo-textarea.is-invalid:focus {
  border-color: var(--evo-red-600) !important;
  box-shadow: 0 0 0 3px rgba(255, 88, 95, 0.20);
}

/* Spécificité montée à 2+ classes pour battre les sélecteurs Bootstrap
   / template parent (`[type="text"]`, `.form-control`) qui résettent
   souvent le padding et écraseraient le padding-left 38px du wrap-icon. */
.evo-input-wrap { position: relative; display: block; }
.evo-input.evo-input--with-icon,
.evo-input-wrap .evo-input--with-icon { padding-left: 38px; }
/* Si le wrap contient un suffix (bouton show/hide password), on réserve
   l'espace côté droit aussi pour éviter que le placeholder/value passe
   sous l'icône eye. */
.evo-input-wrap:has(> .evo-input-suffix) > .evo-input { padding-right: 42px; }
.evo-input-wrap > .evo-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--evo-ink-400);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    line-height: 0;            /* évite décalage vertical SVG inline */
    z-index: 2;
}
.evo-input-wrap > .evo-input-icon svg { display: block; }
.evo-input-wrap > .evo-input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--evo-ink-400);
    display: inline-flex;
    align-items: center;
    line-height: 0;
    z-index: 2;
}
.evo-input-wrap > .evo-input-suffix.is-button {
    cursor: pointer;
    pointer-events: auto;
    padding: 4px;
    border-radius: var(--evo-r-sm);
    background: transparent;
    border: 0;
}
.evo-input-wrap > .evo-input-suffix.is-button:hover { background: var(--evo-paper-2); }
.evo-input-wrap > .evo-input-suffix svg { display: block; }

/* Loading spinner shown over a disabled select while a cascade fetch is
   in flight. Sits at the right edge of the wrap, before the native select
   chevron, so users see "this is loading" instead of just a greyed control. */
.evo-input-wrap.is-loading .evo-select { padding-right: 36px; }
.evo-input-spinner {
  position: absolute;
  right: 32px;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid var(--evo-line);
  border-top-color: var(--evo-brand-primary);
  border-radius: 50%;
  pointer-events: none;
  animation: evo-spin .7s linear infinite;
}
@keyframes evo-spin { to { transform: rotate(360deg); } }

/* Vanilla Calendar Pro — emerald-themed light palette.
   VCP v3 ships its colors via Tailwind utility classes (no CSS variables),
   so we override the actual selectors VCP renders for selected/today/hover.
   The lib already provides a `theme:'light'` mode (data-vc-theme="light") —
   we keep its base + repaint the accent. */
[data-vc-theme="light"].vc,
[data-vc-theme="light"] .vc *,
[data-vc=calendar],
[data-vc=calendar] * {
  font-family: var(--evo-font-sans) !important;
  font-feature-settings: normal;
}
[data-vc-theme="light"].vc {
  background-color: var(--evo-card);
  color: var(--evo-ink-800);
  border: 1px solid var(--evo-line);
  font-size: 13px;
}
[data-vc-theme="light"].vc[data-vc-input] {
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  border-radius: var(--evo-r-md);
  /* Sit above .evo-modal-overlay (z-index:9999) so the picker is visible
     when used inside the step-3 "ajouter un assuré" modal. The previous
     1100 made VanillaCalendar render BEHIND the overlay → user clicked
     the input and nothing appeared. */
  z-index: 10001;
}

/* Today — emerald text on light tint instead of cyan. */
[data-vc-theme="light"] [data-vc-date-today] .vc-date__btn,
[data-vc-theme="light"] [data-vc-date-today] .vc-date__btn:hover {
  background-color: var(--evo-emerald-50) !important;
  color: var(--evo-emerald-700) !important;
}
/* Selected day — solid emerald, white text (was rose/cyan). */
[data-vc-theme="light"] [data-vc-date-selected] .vc-date__btn,
[data-vc-theme="light"] [data-vc-date-selected] .vc-date__btn:hover {
  background-color: var(--evo-brand-primary) !important;
  color: #fff !important;
  --tw-bg-opacity: 1 !important;
}
/* Hover on a non-selected day — neutral light. */
[data-vc-theme="light"] .vc-date__btn:hover {
  background-color: var(--evo-paper-2);
  color: var(--evo-ink-900);
}
/* Weekend days — emerald (was red #f43f5e in VCP default). Selected weekend
   stays solid emerald like any other selected day. */
[data-vc-theme="light"] [data-vc-date-weekend] .vc-date__btn,
[data-vc-theme="light"] [data-vc-date-weekend] .vc-date__btn:hover {
  color: var(--evo-emerald-700) !important;
}
[data-vc-theme="light"] [data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,
[data-vc-theme="light"] [data-vc-date-weekend][data-vc-date-selected] .vc-date__btn:hover {
  background-color: var(--evo-brand-primary) !important;
  color: #fff !important;
  --tw-bg-opacity: 1 !important;
}
/* Header arrows + month/year buttons — neutral, no cyan. */
[data-vc-theme="light"] .vc-arrow:hover,
[data-vc-theme="light"] .vc-month:hover,
[data-vc-theme="light"] .vc-year:hover {
  color: var(--evo-emerald-700);
}
/* Focus outline — emerald, not orange. */
[data-vc-theme="light"].vc:focus-visible,
[data-vc-theme="light"].vc button:focus-visible,
[data-vc-theme="light"].vc [tabindex="0"]:focus-visible {
  outline-color: var(--evo-emerald-500) !important;
}

/* Date input — small calendar icon on the right so the user sees it's
   pickable. The native chevron disappears once we flip type="text". */
.evo-input--calendar {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2370747a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
  cursor: pointer;
}
.evo-input--calendar:disabled { cursor: default; opacity: .6; }

.evo-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: var(--evo-ink-700); }
.evo-checkbox input { width: 16px; height: 16px; accent-color: var(--evo-brand-primary); }

/* -- Card ---------------------------------------------- */
.evo-card {
  background: var(--evo-card);
  border: 1px solid var(--evo-line);
  border-radius: var(--evo-r-lg);
  box-shadow: var(--evo-sh-sm);
}
.evo-card--padded { padding: var(--evo-s-5); }
/* Group recap variant — gold left border to flag a group/masse subscription. */
.evo-card--gold-edge { border-left: 3px solid var(--evo-gold-500, var(--evo-gold-700)); }

/* Compact recap table — used by the wizard step 2 group recap. */
.evo-table { border-collapse: collapse; width: 100%; }
.evo-table th,
.evo-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--evo-line); font-size: 13px; }
.evo-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--evo-ink-500); font-weight: 600; }
.evo-table tbody tr:last-child td { border-bottom: 0; }
.evo-table--compact th,
.evo-table--compact td { padding: 6px 8px; }

/* -- Badge --------------------------------------------- */
.evo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--evo-r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.evo-badge--emerald { background: var(--evo-brand-primary-50); color: var(--evo-brand-primary-700); }
.evo-badge--gold    { background: var(--evo-yellow-50); color: var(--evo-gold-700); }
.evo-badge--red     { background: var(--evo-red-50); color: var(--evo-red); }
.evo-badge--neutral { background: var(--evo-paper-3); color: var(--evo-ink-700); }
.evo-badge--dark    { background: var(--evo-ink-900); color: #fff; }
.evo-badge--outline { background: transparent; color: var(--evo-ink-700); border: 1px solid var(--evo-line); }

/* ─── CONNECTION SCREEN ──────────────────────────────── */

.evo-connection {
  min-height: 100vh;
  display: flex;
  background: var(--evo-card);
}

/* Variante full-bleed — utilisée par l'override Joomla du com_users login
   pour casser le chrome du template parent (header + sidebar + container
   Bootstrap qui empilent leurs paddings/margins). On épingle la page en
   position fixed pour recouvrir toute la viewport et ignorer le wrap
   imposé par /index.php?option=com_users&view=login.

   Le scroll est INTERNE au panel form droit — le panel brand gauche reste
   fixe quand on scrolle un long arbre de scopes. */
.evo-connection--bleed {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--evo-card);
}
.evo-connection--bleed .evo-connection__brand {
  height: 100vh;
  overflow: hidden;
}
.evo-connection--bleed .evo-connection__form {
  height: 100vh;
  overflow-y: auto;
}

/* Logout dans le panel brand sombre (scopeselect) — pill épinglée en
   haut-gauche, couleur claire pour rester lisible sur fond ink-900.
   Hover : passe en blanc plein pour signaler l'action. */
.evo-connection__brand-logout {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.evo-connection__brand-logout:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  text-decoration: none;
}
.evo-connection__brand-logout svg { flex: 0 0 auto; }

/* Logout — pill épinglée en haut-droit du wrapper full-bleed,
   accessible à tout moment sans dépendre du scroll du tree. */
.evo-connection__logout-corner {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--evo-ink-700);
  background: var(--evo-card);
  border: 1px solid var(--evo-line);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.evo-connection__logout-corner:hover {
  background: var(--evo-red-50, #fef2f2);
  color: var(--evo-red, #dc2626);
  border-color: var(--evo-red-200, #fecaca);
  text-decoration: none;
  box-shadow: 0 2px 6px -2px rgba(220, 38, 38, .15);
}
.evo-connection__logout-corner svg { flex: 0 0 auto; }

/* Row search bar du scope picker — input + bouton "Tout réduire". */
.evo-connection .evo-scope-search-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.evo-connection .evo-scope-search-row .evo-btn {
  flex: 0 0 auto;
  height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
/* Bouton bascule "Tout réduire" / "Tout ouvrir" — l'icône SVG flip
   horizontalement quand on passe en état "collapsed" (= prochain
   clic ré-ouvre tout). Feedback visuel léger sans changer le SVG. */
.evo-scope-toggle-all__icon { transition: transform .18s ease; }
#evo-scope-toggle-all[data-state="collapsed"] .evo-scope-toggle-all__icon {
  transform: scale(-1, -1);
}

/* ─── Scope picker — design dédié au tree dans evo-connection.
   Card par row, toggle +/− visible en pill, indentation graphique
   marquée par une ligne emerald, bouton Sélectionner pill emerald. */
.evo-connection .evo-sc-tree-wrap {
  background: transparent;
  padding: 0;
}
.evo-connection .evo-sc-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.evo-connection .evo-sc-tree .evo-sc-tree {
  margin: 4px 0 4px 16px;
  padding-left: 20px;
  border-left: 2px solid var(--evo-emerald-100, #d1fae5);
}
.evo-connection .evo-sc-item { margin: 4px 0; }

.evo-connection .evo-sc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--evo-card);
  border: 1px solid var(--evo-line);
  border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
/* Row selectable — cursor + hover effet uniquement quand le scope peut
   être choisi par l'utilisateur (data-can-select="1"). Les rows non
   selectables (descendants non rattachés / scopes désactivés) restent
   neutres au clic. */
.evo-connection .evo-sc-row.is-selectable { cursor: pointer; }
.evo-connection .evo-sc-row.is-selectable:hover {
  border-color: var(--evo-emerald-500);
  background: var(--evo-emerald-50);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, .15);
  transform: translateY(-1px);
}
.evo-connection .evo-sc-row.is-selectable:hover .evo-sc-label {
  color: var(--evo-emerald-700);
}

/* Toggle +/− : pill ronde 28×28 emerald-soft au repos, plein au hover.
   `bi-plus-lg` / `bi-dash-lg` injectées par le PHP (template) + le JS
   (toggle au clic, auto-open via la recherche). */
.evo-connection .evo-sc-toggle {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--evo-ink-400);
  padding: 0;
  cursor: default;
}
.evo-connection .evo-sc-toggle.has-children {
  cursor: pointer;
  background: var(--evo-emerald-50);
  color: var(--evo-emerald-700);
  border: 1px solid var(--evo-emerald-100);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.evo-connection .evo-sc-toggle.has-children:hover {
  background: var(--evo-emerald-600);
  color: #fff;
  border-color: var(--evo-emerald-600);
  transform: scale(1.05);
}
/* Chevron SVG inline — pointe à droite quand fermé, rotation 90° (vers
   le bas) quand `.is-open`. Transition douce pour le feedback. */
.evo-connection .evo-sc-toggle.has-children .evo-sc-toggle__icon {
  display: inline-block;
  transition: transform .18s ease;
}
.evo-connection .evo-sc-toggle.has-children.is-open .evo-sc-toggle__icon {
  transform: rotate(90deg);
}
.evo-connection .evo-sc-toggle.is-leaf {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.evo-connection .evo-sc-toggle.is-leaf::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--evo-ink-300);
}

.evo-connection .evo-sc-label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--evo-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evo-connection .evo-sc-item.is-inactive > .evo-sc-row .evo-sc-label {
  color: var(--evo-ink-400);
  text-decoration: line-through;
}
.evo-connection .evo-sc-badge {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Bouton Sélectionner : pill discret au repos → plein au hover. */
.evo-connection .evo-sc-select-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px;
  background: var(--evo-emerald-50);
  color: var(--evo-emerald-700);
  border: 1px solid var(--evo-emerald-100);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.evo-connection .evo-sc-row:hover .evo-sc-select-btn {
  background: var(--evo-emerald-600);
  color: #fff;
  border-color: var(--evo-emerald-600);
  box-shadow: 0 2px 6px -2px rgba(16, 185, 129, .35);
}
.evo-connection .evo-sc-select-btn:hover {
  transform: translateX(2px);
}

/* Left brand panel — dark, fixed 50% on desktop, hidden on small screens */
.evo-connection__brand {
  flex: 1 1 50%;
  background: var(--evo-ink-900);
  color: #fff;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* bloc principal centré verticalement */
  position: relative;
}
/* Fineprint épinglée en bas du panel via position absolute — sort du
   flow pour ne pas désaxer le centrage du bloc principal. */
.evo-connection__brand-fineprint {
    position: absolute;
    left: 64px;
    right: 64px;
    bottom: 32px;
    margin: 0;
}
.evo-connection__brand::after {
  /* subtle teal accent stripe */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--evo-brand-primary) 0%, var(--evo-yellow) 100%);
}
.evo-connection__brand-logo { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; }
.evo-connection__brand-logo-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--evo-brand-primary); color: var(--evo-brand-primary-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.evo-connection__brand-headline { font-size: 56px; font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; max-width: 520px; margin: 0 0 24px; }
.evo-connection__brand-lead { color: rgba(255,255,255,.7); max-width: 460px; line-height: 1.55; margin: 0; }
.evo-connection__brand-fineprint { color: rgba(255,255,255,.5); font-size: 12px; }

/* Right form panel */
.evo-connection__form {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  padding: 56px 32px;
  background: var(--evo-card);
}
/* Centrage horizontal + vertical via `margin: auto` plutôt que
   `justify-content: center` — quand le contenu est petit (page login) il
   se centre dans les 2 axes (margin auto LR + TB), quand il déborde
   (long scope tree) la margin TB collapse à 0 et le scroll fonctionne
   normalement sans clipper le haut. */
.evo-connection__form > * { margin: auto; width: 100%; }
.evo-connection__form-card {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}
/* Form en card visuelle : background, border léger, shadow soft. Donne
   du relief au bloc de droite et le démarque clairement du panel sombre
   à gauche. Padding interne unifié pour absorber les marges du flex. */
.evo-connection__form-card-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 32px 44px;
    background: var(--evo-card, #fff);
    border: 1px solid var(--evo-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
                0 12px 32px -16px rgba(15, 23, 42, .12);
}
/* Header — titre + sous-titre. On serre le gap interne pour qu'ils ne
   soient pas trop écartés ; le flex-gap parent gère l'espace avec les
   champs en dessous. */
.evo-connection__form-card-inner > header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
.evo-connection__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--evo-ink-900);
    margin: 0;
}
.evo-connection__subtitle {
    color: var(--evo-ink-500);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}
.evo-connection__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.evo-connection__link {
    color: var(--evo-brand-primary-700);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    padding: 2px 0 4px;
    display: inline-block;
}
.evo-connection__link:hover { text-decoration: underline; }
/* Espace sous le bloc remember/forgot avant le bouton submit. Le flex
   gap parent (18px) reste mais on ajoute un padding-bottom doux pour
   marquer la rupture visuelle entre les liens et le CTA principal. */
.evo-connection__form-card-inner > .evo-connection__row { padding-bottom: 4px; }
/* Alt-links (reset / register) sous le bouton submit — centrés, séparés
   par un petit point gris. Marge top discrète pour aérer après le btn. */
.evo-connection__alt-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
}
.evo-connection__sep {
    color: var(--evo-ink-300);
    user-select: none;
}
/* Override des marges héritées Joomla sur le form lui-même quand il
   sert de card-inner. Annule le ` margin-bottom: 1rem` Bootstrap. */
.evo-connection form.evo-connection__form-card-inner { margin: 0; }
.evo-connection__error {
  background: var(--evo-red-50); color: var(--evo-red);
  border: 1px solid var(--evo-red-200);
  border-radius: var(--evo-r-md);
  padding: 10px 12px; font-size: 13px;
}

/* Scope picker (State B) */
.evo-connection__scope-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.evo-connection__scope-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--evo-card);
  border: 1px solid var(--evo-line);
  border-radius: var(--evo-r-lg);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
  text-align: left; width: 100%;
}
.evo-connection__scope-card:hover {
  background: var(--evo-paper-2);
  border-color: var(--evo-line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .08);
}
.evo-connection__scope-card:focus-visible { outline: none; box-shadow: var(--evo-sh-focus); }
.evo-connection__scope-card.is-last-used { border-color: var(--evo-brand-primary); }
.evo-connection__scope-card.is-last-used::before {
  /* small "last used" emerald dot */
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--evo-brand-primary);
  position: absolute; top: 10px; right: 10px;
}

/* CTA "Sélectionner →" visible sur chaque ligne — c'est l'élément qui dit
   à l'agent "clique ici". Pill emerald-soft au repos qui se remplit au hover.
   Bordure subtile pour qu'il apparaisse comme un vrai bouton et pas juste
   du texte. Demande Adil 2026-05-10 : l'agent ne devinait pas qu'il fallait
   cliquer sur la carte — il manquait un CTA explicite. */
.evo-scope-select-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--evo-r-md);
  background: var(--evo-emerald-50);
  color: var(--evo-emerald-700);
  border: 1px solid var(--evo-emerald-100);
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.evo-scope-select-cta svg { width: 12px; height: 12px; stroke-width: 2.5; }

/* Au hover (sur la card / la row) le CTA se remplit pour confirmer l'action. */
.evo-connection__scope-card:hover .evo-scope-select-cta,
.evo-scope-tree__select:hover .evo-scope-select-cta {
  background: var(--evo-emerald-600);
  color: #fff;
  border-color: var(--evo-emerald-600);
  transform: translateX(2px);
}

/* Mode tree : ligne dense → CTA plus compact + caché jusqu'au hover/focus
   (sinon ça pollue les centaines de lignes pour les super users). */
.evo-scope-tree__select .evo-scope-select-cta {
  padding: 3px 8px;
  font-size: 11px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s, border-color .12s, transform .12s;
}
.evo-scope-tree__select:hover .evo-scope-select-cta,
.evo-scope-tree__select:focus-visible .evo-scope-select-cta {
  opacity: 1;
}
.evo-connection__scope-pill {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: var(--evo-r-md);
  background: var(--evo-yellow-50); color: var(--evo-gold-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  /* Safety net : si la View renvoie un code > 2 chars (cas observé sur les
     scopes "AUDIT_TEST", "LEAD-CI"…), on coupe au lieu de déborder. La View
     fait déjà le truncate côté serveur — c'est une ceinture-bretelles. */
  overflow: hidden; white-space: nowrap;
  padding: 0 2px;
  text-overflow: clip;
}
.evo-connection__scope-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evo-connection__scope-name { font-weight: 600; font-size: 14px; color: var(--evo-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-connection__scope-meta { font-size: 12px; color: var(--evo-ink-400); display: flex; gap: 10px; align-items: center; }
.evo-connection__scope-share { font-variant-numeric: tabular-nums; }
.evo-connection__scope-chevron { flex: 0 0 auto; color: var(--evo-ink-300); }
.evo-connection__scope-card:hover .evo-connection__scope-chevron { color: var(--evo-ink-700); }

.evo-connection__no-results, .evo-connection__no-access {
  text-align: center; padding: 32px 16px;
  color: var(--evo-ink-400); font-size: 13px;
  border: 1px dashed var(--evo-line); border-radius: var(--evo-r-lg);
}

/* Tree mode — dense picker, brand reduced to an identity sidebar ─────── */
.evo-connection--tree .evo-connection__brand { flex: 0 0 24%; padding: 32px 24px; min-height: 100vh; }
.evo-connection--tree .evo-connection__brand-headline { font-size: 28px; line-height: 1.1; max-width: 100%; }
.evo-connection--tree .evo-connection__brand-lead { font-size: 12px; line-height: 1.55; max-width: 100%; }

/* Tree form panel: left-aligned, full height, no centering waste */
.evo-connection--tree .evo-connection__form {
  flex: 1 1 76%;
  align-items: flex-start;       /* content anchored to top-left */
  justify-content: flex-start;
  padding: 40px 48px 40px 40px;
}
.evo-connection--tree .evo-connection__form-card {
  max-width: none;
  width: 100%;
  gap: var(--evo-s-3);
}
.evo-connection--tree .evo-connection__title { font-size: 22px; margin-bottom: 2px; }
.evo-connection--tree .evo-connection__subtitle { font-size: 13px; }

/* Scope tree (super admin / manager picker) ─────────────────────────────
   Density target: 28–30px per row. Mirrors Linear / Notion sidebar density.
   Indent step: 12px per level. Connector line stays subtle (--evo-line).
   Whole row clickable, chevron-action revealed on hover.
*/
.evo-scope-tree, .evo-scope-tree__children { list-style: none; padding: 0; margin: 0; }
/* 12 rows max visible before scroll. 1 row ≈ 28px + 4px gap ≈ 32px.
   12 × 32px = 384px. Header + search take ~100px → tree gets the rest.
   The container scrolls; the page stays full-height (no page-level scroll). */
.evo-scope-tree { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.evo-scope-tree__children { padding-left: 12px; border-left: 1px solid var(--evo-line); margin-left: 10px; }
.evo-scope-tree__children[hidden] { display: none; }

.evo-scope-tree__row {
  display: flex; align-items: center; gap: 2px;
  padding: 0;
  border-bottom: 1px solid var(--evo-paper-2);
}
.evo-scope-tree__node:last-child > .evo-scope-tree__row { border-bottom: none; }
.evo-scope-tree__node[data-evo-hidden] { display: none; }

.evo-scope-tree__toggle {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--evo-r-sm);
  color: var(--evo-ink-400);
  transition: transform .15s, color .12s, background .12s;
}
.evo-scope-tree__toggle:hover { color: var(--evo-ink-700); background: var(--evo-paper-3); }
.evo-scope-tree__toggle[aria-expanded="true"] { transform: rotate(90deg); }
.evo-scope-tree__toggle.is-leaf { cursor: default; }
.evo-scope-tree__toggle.is-leaf:hover { background: transparent; }

/* The whole row — except the chevron toggle — is one big submit button */
.evo-scope-tree__select-form { flex: 1 1 auto; min-width: 0; }
.evo-scope-tree__select {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--evo-r-md);
  background: transparent; border: 1px solid transparent;
  text-align: left;
  transition: background .12s, border-color .12s;
  cursor: pointer;
  color: inherit;
  min-height: 28px;
}
.evo-scope-tree__select:hover { background: var(--evo-paper-2); border-color: var(--evo-line); }
.evo-scope-tree__select:focus-visible { outline: none; box-shadow: var(--evo-sh-focus); }

.evo-scope-tree__select .evo-connection__scope-pill {
  width: 26px; height: 26px;
  font-size: 10px; letter-spacing: 0.04em; font-weight: 700;
  flex-shrink: 0;
}
.evo-scope-tree__info { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.3; }
/* All levels share 15px — hierarchy is shown by weight, not by font size.
   This gives a consistent, scannable reading rhythm (Tufte information density). */
.evo-scope-tree__name { font-weight: 400; font-size: 15px; color: var(--evo-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-scope-tree__node[data-level="0"] > .evo-scope-tree__row .evo-scope-tree__name { font-weight: 700; color: var(--evo-ink-900); }
.evo-scope-tree__node[data-level="1"] > .evo-scope-tree__row .evo-scope-tree__name { font-weight: 600; }
.evo-scope-tree__meta { font-size: 12px; color: var(--evo-ink-400); white-space: nowrap; flex-shrink: 0; }
.evo-scope-tree__chevron {
  flex: 0 0 auto; color: var(--evo-ink-300);
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  opacity: 0; transition: opacity .12s, color .12s;
}
.evo-scope-tree__select:hover .evo-scope-tree__chevron,
.evo-scope-tree__select:focus-visible .evo-scope-tree__chevron { opacity: 1; color: var(--evo-brand-primary-700); }

/* ─── APP CHROME ──────────────────────────────────────
   Full-screen layout: sidebar + main content area.
   Desktop-first ≥1280px (back-office).
*/
/* Alpine x-cloak — cache les éléments tant qu'Alpine n'a pas booté ses
 * directives. Sans ça, les `x-show` sont visibles brièvement (bandeaux
 * d'alerte vides du wizard, options de select pas encore filtrées, etc.).
 * Adil 2026-05-12. */
[x-cloak] { display: none !important; }

/* VanillaCalendarPro cache son picker via `opacity:0; pointer-events:none`
 * mais laisse l'élément en `position:absolute` dans le DOM. Le picker
 * reste positionné en bas de la page (top:961px par ex.) → étire
 * artificiellement la hauteur du document de plusieurs centaines de pixels,
 * d'où le grand espace blanc en bas du wizard signalé Adil 2026-05-12.
 * On force `display:none` quand hidden — la transition d'opacité native
 * de VCP est perdue (acceptable, ouverture/fermeture instantanées). */
.vc[data-vc-calendar-hidden] { display: none !important; }

.evo-app { display: flex; min-height: 100vh; background: var(--evo-paper); }
/* min-height: 100vh sur .evo-app__main est défensif : .evo-app porte déjà
 * `min-height: 100vh` mais sur certains navigateurs / certaines pages la
 * propagation cross-axis (align-items: stretch) ne descend pas jusqu'aux
 * enfants → la sidebar et la zone main s'arrêtent à la hauteur du
 * contenu. Le verrouillage explicite garantit que la zone main fait au
 * moins la viewport, ce qui à son tour permet à .evo-page (flex:1) de
 * remplir, et au footer sticky du wizard de coller au bas du viewport. */
.evo-app__main { flex: 1 1 auto; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* -- Sidebar -- */
.evo-sidebar {
  width: 232px; flex: 0 0 232px;
  background: var(--evo-ink-900);
  color: rgba(255,255,255,.9);
  display: flex; flex-direction: column;
  /* Sticky positioning so the brand/scope/nav/footer stay visible while
     the main page content scrolls. height:100vh + position:sticky:top:0
     pins the sidebar inside its flex parent (.evo-app) without forcing
     the whole document to overflow. The nav itself becomes the scroll
     surface (`flex:1 1 auto + min-height:0` on `__nav`) so the footer
     (logout / "ancienne expérience") is always reachable. */
  height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  padding: 0;
  overflow: hidden;
}
/* Nav becomes the scroll surface inside the sidebar — `min-height:0` is
   the fix that lets a flex child shrink below its content's intrinsic
   height. Without it, the nav grows tall and pushes the footer off-screen. */
.evo-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; padding: 8px 0; margin: 0; }
.evo-sidebar__footer { flex: 0 0 auto; }
.evo-sidebar__brand,
.evo-sidebar__scope { flex: 0 0 auto; }
.evo-sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.evo-sidebar__brand-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--evo-brand-primary); color: var(--evo-brand-primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.evo-sidebar__brand-text { color: #fff; }
.evo-sidebar__brand-dot { opacity: .4; margin: 0 2px; }

.evo-sidebar__scope {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none; cursor: pointer;
  transition: background .12s;
}
.evo-sidebar__scope:hover { background: rgba(255,255,255,.1); }
.evo-sidebar__scope-switch { margin-left: auto; color: rgba(255,255,255,.3); flex-shrink: 0; }
.evo-sidebar__scope:hover .evo-sidebar__scope-switch { color: rgba(255,255,255,.6); }
.evo-sidebar__scope-chip {
  width: 26px; height: 26px; border-radius: var(--evo-r-sm);
  background: var(--evo-brand-primary-900); color: var(--evo-brand-primary-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.03em;
}
.evo-sidebar__scope-name {
  font-size: 12px; color: rgba(255,255,255,.7); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* (Old `.evo-sidebar__nav` rule replaced by the sticky-aware variant above.) */
.evo-sidebar__nav-item { }
.evo-sidebar__nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  font-size: 14px; color: rgba(255,255,255,.7);
  border-radius: 0;
  transition: background .1s, color .1s;
}
.evo-sidebar__nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.evo-sidebar__nav-item.is-active > .evo-sidebar__nav-link {
  color: #fff; background: rgba(255,255,255,.1);
  border-left: 3px solid var(--evo-brand-primary);
  padding-left: 17px;
}
.evo-sidebar__nav-item.is-primary > .evo-sidebar__nav-link {
  color: var(--evo-brand-primary);
}

.evo-sidebar__footer {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.evo-sidebar__logout { color: rgba(255,255,255,.5) !important; font-size: 13px; }
.evo-sidebar__logout:hover { color: rgba(255,255,255,.8) !important; }
.evo-sidebar__ab-toggle { padding: 8px 20px 12px; }
.evo-sidebar__ab-link { font-size: 11px; color: rgba(255,255,255,.35); }
.evo-sidebar__ab-link:hover { color: rgba(255,255,255,.6); text-decoration: underline; }

/* -- TopBar -- */
.evo-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px 12px;
  border-bottom: 1px solid var(--evo-line);
  background: var(--evo-card);
  min-height: 64px;
}
.evo-topbar__left { display: flex; flex-direction: column; gap: 2px; }
.evo-topbar__right { display: flex; align-items: center; gap: 16px; }
.evo-topbar__breadcrumb { color: var(--evo-ink-400); font-size: 11px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; }
.evo-topbar__breadcrumb-link { color: var(--evo-ink-500); text-decoration: none; transition: color .12s; }
.evo-topbar__breadcrumb-link:hover,
.evo-topbar__breadcrumb-link:focus { color: var(--evo-brand-primary, #047857); text-decoration: underline; }
.evo-topbar__breadcrumb-sep { padding: 0 6px; color: var(--evo-ink-300, #d1d5db); }
.evo-topbar__breadcrumb > span:last-child:not(.evo-topbar__breadcrumb-sep) { color: var(--evo-ink-700); font-weight: 500; }
.evo-topbar__title { color: var(--evo-ink-900); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.evo-topbar__actions { display: flex; align-items: center; gap: 10px; }

/* Burger — hidden on desktop, revealed in the ≤960px media query below.
   3 horizontal bars, classic mobile pattern. Sits at the start of
   .evo-topbar__left, before the breadcrumb. */
.evo-topbar__burger {
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 0; margin-right: 4px;
    background: transparent;
    border: 1px solid var(--evo-line, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--evo-ink-700, #374151);
    transition: background .12s, border-color .12s;
}
.evo-topbar__burger:hover  { background: var(--evo-paper-2); }
.evo-topbar__burger:focus-visible { outline: 2px solid var(--evo-brand-primary, #047857); outline-offset: 2px; }
.evo-topbar__burger-bar {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Backdrop — hidden by default, fades in when sidebar is open on mobile. */
.evo-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1099;
    opacity: 0;
    transition: opacity .2s ease-out;
}
.evo-sidebar-backdrop.is-visible { display: block; opacity: 1; }
body.evo-sidebar-open { overflow: hidden; }

/* Language switcher */
.evo-lang-switcher {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--evo-r-pill);
  background: var(--evo-paper-2); border: 1px solid var(--evo-line);
}
.evo-lang-switcher__btn {
  padding: 4px 10px; border-radius: var(--evo-r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--evo-ink-400);
  transition: background .1s, color .1s;
  text-decoration: none; line-height: 1.6;
}
.evo-lang-switcher__btn:hover { color: var(--evo-ink-900); }
.evo-lang-switcher__btn.is-active {
  background: var(--evo-card); color: var(--evo-ink-900);
  box-shadow: var(--evo-sh-xs);
}

/* ─── DASHBOARD ──────────────────────────────────────── */
.evo-dashboard { padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; }

.evo-dashboard__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.evo-dashboard__partner-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--evo-ink-900); display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.evo-path-sep { color: var(--evo-ink-300); font-weight: 400; font-size: 20px; margin: 0 6px; }
.evo-path-seg { color: var(--evo-ink-500); font-weight: 500; font-size: 20px; }
.evo-path-seg.is-current { color: var(--evo-ink-900); font-weight: 700; font-size: 24px; }

.evo-period-tabs { display: flex; gap: 4px; background: var(--evo-paper-2); border-radius: var(--evo-r-pill); padding: 4px; }
.evo-period-tab {
  padding: 6px 14px; border-radius: var(--evo-r-pill);
  font-size: 13px; font-weight: 500; color: var(--evo-ink-500);
  transition: background .12s, color .12s; white-space: nowrap;
}
.evo-period-tab:hover { color: var(--evo-ink-900); }
.evo-period-tab.is-active { background: var(--evo-card); color: var(--evo-ink-900); box-shadow: var(--evo-sh-sm); }

/* KPI strip */
.evo-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Dashboard variant — seulement 2 KPIs (polices souscrites + prime brute) depuis
   le retrait des cartes Taux de conversion & Sinistres → layout 50/50. La base
   4 colonnes reste pour le superadmin (qui utilise .evo-kpi-strip nu). */
.evo-kpi-strip--2col { grid-template-columns: repeat(2, 1fr); }
.evo-kpi-card {
  background: var(--evo-card); border: 1px solid var(--evo-line);
  border-radius: var(--evo-r-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--evo-sh-xs);
}
.evo-kpi-card__header { display: flex; align-items: flex-start; justify-content: space-between; }
.evo-kpi-card__label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--evo-ink-400); }
.evo-kpi-card__value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--evo-ink-900); line-height: 1; }
.evo-kpi-card__value--na { font-size: 22px; color: var(--evo-ink-300); }
.evo-kpi-card__unit { font-size: 14px; font-weight: 500; color: var(--evo-ink-400); margin-right: 4px; }
.evo-kpi-card__delta { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.evo-kpi-card__delta.is-positive { color: var(--evo-brand-primary-700); }
.evo-kpi-card__delta.is-negative { color: var(--evo-red); }
.evo-kpi-card__delta-label { font-weight: 400; color: var(--evo-ink-400); font-size: 11px; }
.evo-kpi-card__subtitle { font-size: 11px; color: var(--evo-ink-400); margin-top: 2px; }
.evo-kpi-card__na-reason { font-size: 11px; color: var(--evo-ink-300); font-style: italic; margin-top: 4px; }

/* Quick actions — spec Dashboard.jsx: 4 clickable tiles, icon + label + description */
.evo-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.evo-quick-action {
  background: var(--evo-card); border: 1px solid var(--evo-line); border-radius: var(--evo-r-lg);
  padding: 24px 16px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  color: var(--evo-ink-900);
  box-shadow: var(--evo-sh-xs); transition: box-shadow .15s, border-color .15s, transform .12s;
  text-decoration: none;
}
.evo-quick-action:hover {
  box-shadow: var(--evo-sh-md); border-color: var(--evo-brand-primary);
  transform: translateY(-2px);
}
.evo-quick-action--primary { border-color: var(--evo-brand-primary-200); background: var(--evo-brand-primary-50); }
.evo-quick-action--primary:hover { background: var(--evo-card); }
.evo-quick-action__icon { margin-bottom: 4px; }
.evo-quick-action__label { font-size: 14px; font-weight: 700; color: var(--evo-ink-900); line-height: 1.2; }
.evo-quick-action__desc { font-size: 12px; color: var(--evo-ink-400); line-height: 1.4; }

/* Recent activity table */
.evo-recent-activity { background: var(--evo-card); border: 1px solid var(--evo-line); border-radius: var(--evo-r-lg); overflow: hidden; box-shadow: var(--evo-sh-xs); }
.evo-recent-activity__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--evo-line); }
.evo-recent-activity__title { margin: 0; }
.evo-recent-activity__count { color: var(--evo-ink-400); }
.evo-recent-activity__empty { padding: 24px 20px; color: var(--evo-ink-400); font-size: 14px; margin: 0; }
.evo-table__col--nowrap { white-space: nowrap; }
.evo-table td.is-negative { color: var(--evo-red); }

/* Pagination */
.evo-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--evo-line); }
.evo-pagination__btn { font-size: 13px; font-weight: 500; color: var(--evo-brand-primary-700); padding: 6px 14px; border-radius: var(--evo-r-pill); border: 1px solid var(--evo-brand-primary-200); background: var(--evo-brand-primary-50); transition: background .1s, border-color .1s; text-decoration: none; }
.evo-pagination__btn:hover { background: var(--evo-brand-primary-100); border-color: var(--evo-brand-primary); }
.evo-pagination__btn.is-disabled { color: var(--evo-ink-300); background: var(--evo-paper-2); border-color: var(--evo-line); cursor: not-allowed; pointer-events: none; }
.evo-pagination__info { color: var(--evo-ink-400); font-size: 12px; }
.evo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.evo-table th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--evo-ink-400); background: var(--evo-paper); border-bottom: 1px solid var(--evo-line); }
.evo-table td { padding: 12px 16px; border-bottom: 1px solid var(--evo-paper-2); color: var(--evo-ink-900); vertical-align: middle; }
.evo-table tr:last-child td { border-bottom: none; }
.evo-table tr:hover td { background: var(--evo-paper); }
.evo-table__col--num { text-align: right; }
.evo-table__currency { font-size: 11px; color: var(--evo-ink-400); margin-left: 3px; }

/* AB toggle footer (visible on every com_evo screen) */
.evo-ab-footer {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--evo-card); border: 1px solid var(--evo-line);
  border-radius: var(--evo-r-pill);
  padding: 6px 12px 6px 16px;
  display: inline-flex; align-items: center; gap: 12px;
  box-shadow: var(--evo-sh-md);
  font-size: 12px; color: var(--evo-ink-500);
  z-index: 1000;
}
.evo-ab-footer__btn { font-weight: 600; color: var(--evo-brand-primary-700); }
.evo-ab-footer__btn:hover { text-decoration: underline; }

/* Responsive — desktop-first ≥1280px ; below, brand panel collapses */
@media (max-width: 960px) {
  .evo-connection__brand { display: none; }
  .evo-connection__form { padding: 32px 20px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Wave 1/03 — CreateEntry screen
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tab bar — pill switcher */
/* Segmented tab control — design Reports.jsx:118 pattern. The selectors are
   scoped to .evo-app to win over the os-basetemplate `button` reset, and the
   container uses paper-2 + a 1px border so the pill is visible against any
   page background. */
.evo-app .evo-tab-bar {
  display:inline-flex;
  gap:2px;
  padding:3px;
  background:var(--evo-paper-2);
  border:1px solid var(--evo-line);
  border-radius:var(--evo-r-lg);
  width:fit-content;
}
.evo-app .evo-tab {
  appearance:none;
  -webkit-appearance:none;
  padding:8px 16px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  border:none;
  cursor:pointer;
  background:transparent;
  color:var(--evo-ink-500);
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
  white-space:nowrap;
  transition:background .15s, color .15s, box-shadow .15s;
  box-shadow:none;
}
.evo-app .evo-tab:hover:not(.is-active) { background:rgba(255,255,255,.6); color:var(--evo-ink-800); }
.evo-app .evo-tab.is-active {
  background:var(--evo-card);
  color:var(--evo-emerald-700);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.evo-app .evo-tab-count {
  font-size:10px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--evo-emerald-50);
  color:var(--evo-emerald-700);
  font-family:var(--evo-font-mono);
  font-weight:500;
}

/* Branch tile grid */
.evo-branch-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.evo-branch-tile { position:relative; text-align:left; padding:18px; border-radius:var(--evo-r-lg); background:var(--evo-card); border:1.5px solid var(--evo-line); cursor:pointer; font-family:inherit; display:block; text-decoration:none; color:inherit; transition:box-shadow .15s, border-color .15s; }
.evo-branch-tile--active { background:var(--evo-emerald-50); border-color:var(--evo-emerald-500); box-shadow:0 0 0 4px var(--evo-emerald-50); }
.evo-branch-tile--disabled { opacity:.55; cursor:not-allowed; }
.evo-branch-tile:not(.evo-branch-tile--disabled):hover { box-shadow:var(--evo-sh-md); }
.evo-branch-icon { width:36px; height:36px; border-radius:var(--evo-r-md); background:var(--evo-paper-3); color:var(--evo-ink-700); display:grid; place-items:center; margin-bottom:12px; }
.evo-branch-icon--primary { background:var(--evo-emerald-500); color:#fff; }
.evo-branch-title { font-size:15px; font-weight:600; }
.evo-branch-count { font-size:11px; color:var(--evo-ink-400); margin-bottom:8px; }
.evo-branch-desc { font-size:12px; color:var(--evo-ink-500); line-height:1.5; margin-bottom:14px; }
.evo-branch-cta { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--evo-emerald-700); font-weight:600; }

/* Info strip */
.evo-info-strip { padding:10px 14px; background:var(--evo-paper-2); border-radius:var(--evo-r-md); font-size:11px; color:var(--evo-ink-500); display:flex; align-items:center; gap:10px; }

/* Devis row */
.evo-devis-row { padding:14px 18px; display:flex; align-items:center; gap:14px; }

/* Activity row kind marker (devis vs policy) — couleur sémantique:
   - devis = gold/amber (en cours, brouillon)
   - policy = emerald (validé, actif) */
.evo-row-kind-icon { margin-right:6px; font-size:13px; vertical-align:-1px; }
.evo-row-kind-icon--devis  { color: var(--evo-gold-600,#b88500); }
.evo-row-kind-icon--policy { color: var(--evo-emerald-700,#0e7c5a); }

/* Devis search bar (above the rows card) — same density as filter cards. */
.evo-devis-search-bar { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.evo-devis-search-bar .evo-input-wrap { flex:1 1 320px; min-width:220px; }

/* Wrapped input with leading icon (search) — purely cosmetic. */
.evo-input-wrap { position:relative; display:block; }
.evo-input-wrap--icon .evo-input { padding-left:32px; }
.evo-input-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--evo-ink-400); pointer-events:none; }

/* Devis pagination footer */
.evo-devis-pager { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; padding:6px 0; }
.evo-devis-pager .evo-btn[disabled] { opacity:.4; cursor:not-allowed; }

/* Bulk steps */
.evo-bulk-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.evo-bulk-step { padding:16px; border-radius:var(--evo-r-lg); background:var(--evo-paper-2); border:1px solid var(--evo-line); }
.evo-step-num { width:22px; height:22px; border-radius:50%; background:var(--evo-ink-800); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:600; font-family:var(--evo-font-mono); flex-shrink:0; }

/* Dropzone */
.evo-dropzone { display:block; padding:28px; border:2px dashed var(--evo-line); border-radius:var(--evo-r-lg); text-align:center; background:var(--evo-paper-2); text-decoration:none; color:inherit; transition:border-color .15s; }
.evo-dropzone:hover { border-color:var(--evo-emerald-500); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Wave 1/04-05 — Wizard
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Stepper bar */
.evo-stepper { padding:20px 32px 0; background:var(--evo-card); border-bottom:1px solid var(--evo-line); }
.evo-stepper-inner { display:flex; align-items:flex-start; justify-content:space-between; max-width:920px; margin:0 auto; position:relative; padding-bottom:20px; }
.evo-stepper-line { position:absolute; top:15px; left:32px; right:32px; height:1px; background:var(--evo-line); }
.evo-stepper-item { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:1; flex:1; }
.evo-stepper-dot { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--evo-paper-3); color:var(--evo-ink-400); font-size:13px; font-weight:600; font-family:var(--evo-font-sans); transition:background .2s, color .2s; }
.evo-stepper-dot.is-active, .evo-stepper-dot.is-done { background:var(--evo-emerald-500); color:#fff; }
.evo-stepper-label { font-size:12px; font-weight:500; color:var(--evo-ink-400); text-align:center; max-width:110px; line-height:1.3; }
.evo-stepper-label.is-active { font-weight:600; color:var(--evo-ink-900); }
.evo-stepper-label.is-done { color:var(--evo-ink-600); }

/* Wizard grid: form + recap sidebar */
.evo-wizard-grid { display:grid; grid-template-columns:1fr 300px; gap:28px; }
.evo-wizard-form { display:flex; flex-direction:column; gap:22px; }
/* Right-rail recap — wrapper. Lets the grid item stretch to the form's
   height (default align-self:stretch) so the inner Devis card has enough
   vertical room to stay sticky while the agent scrolls the long
   beneficiary list. The sticky behavior lives on the inner card, not on
   this wrapper. */
.evo-wizard-recap { /* default flow */ }

/* Field row helper — wizard uses auto-fit grid for compact field rows */
.evo-field-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:18px; margin-top:20px; }

/* Dynamic-fields grid — utilisée par les blocs `dynamicBeneficiaryExtras()`
   qui rendent N fields configurés par produit. Grille 12 colonnes (style
   Bootstrap) pour permettre 1/3, 1/2, 2/3, full sans gap. L'algo JS
   `_buildDynamicLayout()` calcule le span par cellule selon ce qui vient
   après (packing + expansion last-fill). Spans utilisés : 4 (1/3), 6 (1/2),
   8 (2/3), 12 (full). */
.evo-dynamic-fields-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:14px 18px; }
.evo-dynamic-fields-grid .evo-col-4  { grid-column: span 4; }
.evo-dynamic-fields-grid .evo-col-6  { grid-column: span 6; }
.evo-dynamic-fields-grid .evo-col-8  { grid-column: span 8; }
.evo-dynamic-fields-grid .evo-col-12 { grid-column: span 12; }
/* Responsive — sous 820px on collapse 1/3 et 2/3 vers 1/2, sous 520px tout
   plein largeur. La modal hérite des memes regles (largeur viewport identique
   au container parent). */
@media (max-width: 820px) {
    .evo-dynamic-fields-grid .evo-col-4 { grid-column: span 6; }
    .evo-dynamic-fields-grid .evo-col-8 { grid-column: span 12; }
}
@media (max-width: 520px) {
    .evo-dynamic-fields-grid .evo-col-4,
    .evo-dynamic-fields-grid .evo-col-6,
    .evo-dynamic-fields-grid .evo-col-8,
    .evo-dynamic-fields-grid .evo-col-12 { grid-column: span 12; }
}
/* (Earlier flat-color rule — preserved for any older usage; the rich version
   at line 202 takes precedence via specificity since it appears earlier
   in the cascade order.) */

/* Chip group */
/* Chip group — pill list of choices (categories, destinations, durations,
   composition). Scoped under .evo-app so the os-basetemplate `button` reset
   doesn't strip the pill chrome (same fix pattern as the tab bar). */
.evo-app .evo-chip-group { display:flex; flex-wrap:wrap; gap:8px; }
.evo-app .evo-chip {
  appearance:none;
  -webkit-appearance:none;
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid var(--evo-line);
  background:var(--evo-card);
  color:var(--evo-ink-700);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
  box-shadow:none;
}
.evo-app .evo-chip:hover:not(.is-selected) { border-color:var(--evo-ink-400); }
.evo-app .evo-chip.is-selected {
  border-color:var(--evo-emerald-500);
  background:var(--evo-emerald-50);
  color:var(--evo-emerald-700);
}

/* Section header */
.evo-section-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.evo-section-num { width:28px; height:28px; border-radius:50%; background:var(--evo-ink-800); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; font-family:var(--evo-font-mono); flex-shrink:0; }
.evo-section-title { font-size:15px; font-weight:600; color:var(--evo-ink-800); }
.evo-section-sub { font-size:12px; color:var(--evo-ink-500); margin-top:2px; }

/* Beneficiary rows */
.evo-benef-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--evo-paper-2); border-radius:var(--evo-r-md); margin-bottom:8px; }
.evo-benef-avatar { width:34px; height:34px; border-radius:50%; background:var(--evo-emerald-100); color:var(--evo-emerald-700); display:grid; place-items:center; font-size:12px; font-weight:600; flex-shrink:0; }
.evo-benef-form { padding:16px; background:var(--evo-paper-2); border-radius:var(--evo-r-lg); border:1px solid var(--evo-line); margin-top:8px; }
.evo-app .evo-icon-btn { appearance:none; -webkit-appearance:none; border:none; background:transparent; cursor:pointer; padding:4px; color:var(--evo-ink-400); border-radius:4px; font-family:inherit; }
.evo-app .evo-icon-btn:hover { background:var(--evo-paper-3); color:var(--evo-red-500); }

/* Small drop zone */
.evo-dropzone-sm { position:relative; display:flex; align-items:center; padding:10px 14px; border:1.5px dashed var(--evo-line); border-radius:var(--evo-r-md); cursor:pointer; }
.evo-dropzone-sm:hover { border-color:var(--evo-emerald-500); }

/* Group sub-forms (spouse / children / adultsupp) */
.evo-subform { border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); padding:14px 16px; margin-top:14px; background:var(--evo-card); }
.evo-subform-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.evo-subform-title { font-size:13px; font-weight:600; color:var(--evo-ink-700); text-transform:uppercase; letter-spacing:.04em; }
.evo-subform-row { margin-top:8px; }
.evo-stepper-mini { display:inline-flex; align-items:center; gap:8px; }
.evo-app .evo-stepper-btn { appearance:none; -webkit-appearance:none; width:26px; height:26px; border-radius:6px; border:1px solid var(--evo-line); background:var(--evo-paper-2); color:var(--evo-ink-700); font-weight:600; cursor:pointer; font-family:inherit; }
.evo-app .evo-stepper-btn:hover:not(:disabled) { border-color:var(--evo-emerald-500); color:var(--evo-emerald-700); }
.evo-app .evo-stepper-btn:disabled { opacity:.4; cursor:not-allowed; }
.evo-stepper-count { min-width:24px; text-align:center; font-size:14px; font-weight:600; color:var(--evo-ink-800); font-family:var(--evo-font-mono); }
.evo-group-upload { padding:14px 16px; border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); background:var(--evo-paper-2); }
/* `.is-disabled` handling is folded into the scoped .evo-btn block above. */

/* Toggle */
.evo-toggle-label { display:flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; }
.evo-toggle-input { appearance:none; width:36px; height:20px; border-radius:var(--evo-r-pill); background:var(--evo-paper-3); transition:background .2s; cursor:pointer; position:relative; }
.evo-toggle-input:checked { background:var(--evo-emerald-500); }
.evo-toggle-track { display:none; }

/* Products grid */
.evo-products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.evo-product-card { position:relative; padding:20px; border-radius:var(--evo-r-lg); border:1.5px solid var(--evo-line); background:var(--evo-card); transition:border-color .15s, box-shadow .15s; }
.evo-product-card.is-selected { border-color:var(--evo-emerald-500); box-shadow:0 0 0 3px var(--evo-emerald-50); }
.evo-product-card.is-best { border-color:var(--evo-gold-500, var(--evo-gold-700)); }
.evo-product-card.is-best.is-selected { border-color:var(--evo-emerald-500); }
/* "Meilleur tarif" badge — anchored top-right of the cheapest product card. */
.evo-product-best-badge {
  position:absolute; top:-10px; right:14px;
  padding:3px 10px; border-radius:var(--evo-r-pill);
  background:var(--evo-yellow-50); color:var(--evo-gold-700);
  font-size:11px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--evo-gold-700);
}
/* Coverage highlights list inside a product card. Tight spacing, mono-feel green ticks. */
.evo-product-benefits { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
.evo-product-benefits li { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--evo-ink-700); }

/* Conditions générales link inside a product card — same role as com_neo's
   `.attachmentLink`: opens the contract PDF in a new tab so agents can read
   the full coverage before picking a product. Reused class name keeps any
   downstream styling/hooks consistent across both components. */
.attachmentLink {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; padding:6px 10px;
  border-radius:var(--evo-r-md);
  background:var(--evo-paper-2);
  color:var(--evo-emerald-700);
  font-size:12px; font-weight:500;
  text-decoration:none;
  border:1px solid var(--evo-line);
  transition:background .12s, border-color .12s;
}
.attachmentLink:hover { background:var(--evo-emerald-50); border-color:var(--evo-emerald-500); }
.attachmentLink__label { word-break:break-word; }

/* Policydetail dynamic fields container — stacks the AJAX-rendered
   evo-card evo-detail-card blocks (one per holder/beneficiary/spouse/...). */
#subscription-fields { display:flex; flex-direction:column; gap:14px; }
/* Grid variant of the KV list for the dynamic fields card — auto-fit so
   2-3 columns appear depending on width, while preserving the dt/dd
   typography of .evo-kv-list. Compound selector raises specificity over
   the base `.evo-kv-list { display:flex }` rule defined later in the file. */
.evo-kv-list.evo-kv-list--grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px 24px;
}
/* Sub-section inside a beneficiary card (spouses / children / vehicles).
   Visual: separator line above + smaller title to keep parent hierarchy. */
.evo-detail-card__sub {
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--evo-line);
}
.evo-detail-card__subtitle {
  font-size:11px;
  font-weight:600;
  color:var(--evo-ink-500);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:10px;
}
/* Empty state card — centered, padded, used when the quote API returned zero products. */
.evo-empty-state { padding:40px 24px; text-align:center; }
.evo-product-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.evo-product-name { font-size:15px; font-weight:600; color:var(--evo-ink-800); }
.evo-product-price-amount { font-size:20px; font-weight:700; color:var(--evo-ink-900); }
.evo-product-price-currency { font-size:12px; color:var(--evo-ink-500); margin-left:4px; }
.evo-product-desc { font-size:12px; color:var(--evo-ink-500); line-height:1.5; margin-bottom:12px; }
.evo-addon-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--evo-paper-3); cursor:pointer; }
.evo-addon-check { width:14px; height:14px; accent-color:var(--evo-emerald-500); flex-shrink:0; }

/* Recap list */
.evo-recap-list { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12px; margin:0; padding:0; list-style:none; }
.evo-recap-list dt { color:var(--evo-ink-400); font-weight:500; }
.evo-recap-list dd { color:var(--evo-ink-800); font-weight:500; margin:0; }

/* Summary blocks (step 4) */
.evo-summary-block { padding:16px; border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); margin-bottom:14px; }
.evo-summary-block-header { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--evo-ink-700); margin-bottom:12px; }
/* Inline edit link inside a summary block header — used by step 4 to jump back to the right step. */
.evo-link { background:none; border:0; padding:0; font-size:12px; color:var(--evo-brand-primary-700); cursor:pointer; font-weight:500; text-decoration:underline; }
.evo-link:hover { color:var(--evo-brand-primary); }
/* Mono variant for IDs and references — pairs with quote ref display in the recap. */
.evo-text-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }

/* Alert */
.evo-alert { padding:12px 16px; border-radius:var(--evo-r-md); font-size:13px; }
.evo-alert--error   { background:var(--evo-red-50);    color:var(--evo-red-700); border:1px solid var(--evo-red-200); }
.evo-alert--success { background:var(--evo-emerald-50); color:var(--evo-emerald-800); border:1px solid var(--evo-emerald-200); }

/* ── Confirmation screen (step 5) ──────────────────────────── */
.evo-conf-page { max-width:640px; margin:0 auto; padding:0 0 48px; }

/* Hero */
.evo-conf-hero { text-align:center; padding:40px 24px 28px; }
.evo-conf-hero__icon { width:64px; height:64px; border-radius:50%; background:var(--evo-emerald-500); color:#fff; display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 4px 14px rgba(16,185,129,.25); }

/* Section card pattern */
.evo-conf-section { background:var(--evo-card); border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); padding:20px; margin-top:12px; }
.evo-conf-section__label { font-size:11px; font-weight:600; color:var(--evo-ink-400); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:flex; align-items:center; gap:6px; }

/* KV grid inside POLICE card */
.evo-conf-kv-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.evo-conf-kv { display:flex; flex-direction:column; gap:2px; }
.evo-conf-kv__k { font-size:10px; font-weight:500; color:var(--evo-ink-300); text-transform:uppercase; letter-spacing:.06em; }
.evo-conf-kv__v { font-size:13px; font-weight:600; color:var(--evo-ink-800); }

/* Person row (holder / principal) */
.evo-conf-person { display:flex; align-items:flex-start; gap:12px; }
.evo-conf-person__info { flex:1; }
.evo-conf-avatar { width:40px; height:40px; min-width:40px; border-radius:50%; background:var(--evo-brand-primary); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; text-transform:uppercase; }
.evo-conf-avatar--sm { width:30px; height:30px; min-width:30px; font-size:11px; }

/* Nested beneficiaries list */
.evo-conf-benef-list { margin-top:12px; padding-top:12px; border-top:1px solid var(--evo-line); }
.evo-conf-benef-row { display:flex; align-items:center; gap:8px; padding:6px 0; }

/* Dark premium card */
.evo-conf-premium { background:#111827; color:#fff; border-radius:var(--evo-r-lg); padding:24px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.evo-conf-premium__label { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-bottom:4px; }
.evo-conf-premium__amount { font-size:32px; font-weight:700; letter-spacing:-.02em; }

/* Documents tiles */
.evo-conf-docs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.evo-conf-doc-tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; background:var(--evo-paper-2); border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); text-decoration:none; color:var(--evo-ink-800); transition:border-color .12s, background .12s; }
.evo-conf-doc-tile:hover { border-color:var(--evo-brand-primary); background:var(--evo-card); }
.evo-conf-doc-tile--sent { cursor:default; }
.evo-conf-doc-tile--sent:hover { border-color:var(--evo-line); background:var(--evo-paper-2); }
.evo-conf-doc-tile svg { color:var(--evo-ink-400); }

/* Footer actions */
.evo-conf-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:28px; flex-wrap:wrap; }

/* Legacy selectors kept for any old step-5 refs still in other templates */
.evo-confirmation-hero { text-align:center; padding:48px 32px 24px; }
.evo-confirmation-icon { width:64px; height:64px; border-radius:50%; background:var(--evo-emerald-500); color:#fff; display:grid; place-items:center; margin:0 auto 20px; }
.evo-conf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.evo-conf-card { padding:18px; background:var(--evo-card); border-radius:var(--evo-r-lg); border:1px solid var(--evo-line); }
.evo-conf-card-label { font-size:11px; font-weight:500; color:var(--evo-ink-400); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.evo-conf-card-value { font-size:14px; font-weight:600; color:var(--evo-ink-800); }
.evo-doc-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--evo-r-md); border:1px solid var(--evo-line); margin-bottom:6px; color:var(--evo-ink-800); text-decoration:none; transition:background .12s, border-color .12s; }
.evo-doc-row:hover { background:var(--evo-paper-2); border-color:var(--evo-brand-primary); }
.evo-doc-row:last-child { margin-bottom:0; }

/* Wizard footer */
.evo-wizard-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 32px; background:var(--evo-card); border-top:1px solid var(--evo-line); position:sticky; bottom:0; z-index:10; }

/* Spinner */
@keyframes evo-spin { to { transform:rotate(360deg); } }
.evo-spinner { animation:evo-spin 1s linear infinite; display:block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Wave 2 — PolicyList + PolicyDetail
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Page header */
.evo-page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
/* `.evo-h1--sm` modifier — when a denser page header is needed (PolicyList etc.). */
.evo-h1--sm { font-size:22px; line-height:1.2; }

/* Filter bar */
.evo-filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.evo-search-wrap { position:relative; flex:1; min-width:200px; }
.evo-search-wrap > svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--evo-ink-400); pointer-events:none; }
.evo-search-input { height:36px; width:100%; padding:0 10px 0 32px; border:1px solid var(--evo-line); border-radius:var(--evo-r-md); font-size:13px; font-family:inherit; background:var(--evo-card); color:var(--evo-ink-800); outline:none; box-sizing:border-box; }
.evo-search-input:focus { border-color:var(--evo-emerald-500); }

/* Settings hub — 7 cards in a responsive grid. Each card is a clickable
   <a> with icon + title + desc + chevron. Hover lifts the card slightly
   for a tactile feedback consistent with the rest of the EVO UI. */
.evo-settings-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}
.evo-settings-card {
    display:flex; align-items:flex-start; gap:14px;
    padding:18px 20px;
    background:var(--evo-card);
    border:1px solid var(--evo-line);
    border-radius:var(--evo-r-lg, 12px);
    color:inherit; text-decoration:none;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.evo-settings-card:hover {
    transform:translateY(-1px);
    border-color:var(--evo-emerald-500);
    box-shadow:0 4px 14px rgba(15, 23, 42, 0.06);
    text-decoration:none;
}
.evo-settings-card__icon {
    flex:0 0 auto;
    width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    background:rgba(16, 185, 129, 0.08);
    color:var(--evo-emerald-600, #059669);
    font-size:20px;
}
.evo-settings-card__body { flex:1 1 auto; min-width:0; }
.evo-settings-card__title { font-weight:600; font-size:14px; color:var(--evo-ink-800); margin-bottom:4px; }
.evo-settings-card__desc  { font-size:12px; color:var(--evo-ink-500, #6b7280); line-height:1.45; }
.evo-settings-card__chevron {
    flex:0 0 auto; align-self:center;
    color:var(--evo-ink-300, #d1d5db);
    font-size:22px; line-height:1;
    transition:transform .12s ease, color .12s ease;
}
.evo-settings-card:hover .evo-settings-card__chevron {
    color:var(--evo-emerald-500); transform:translateX(2px);
}

@media (max-width: 1100px) { .evo-settings-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .evo-settings-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   Filter card — list pages (Polices, Companies, Agreements …)
   --------------------------------------------------------------------------
   Editorial-admin pattern. One cohesive panel that bundles:
     1. the input grid                       (.evo-filter-grid)
     2. an integrated segmented event strip  (.evo-filter-segrow)
     3. an active-chip bar (when any filter) (.evo-filter-chips)
     4. the actions footer                   (.evo-filter-actions)
   The grid uses `auto-fit minmax(220px, 1fr)` so a 2-field form (Companies)
   spreads across the row instead of leaving dead whitespace, while a dense
   8-field form (Polices) settles at 4 columns ≈ 268px each at 1440px.
   ========================================================================== */
.evo-filter-card {
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--evo-card);
    border: 1px solid var(--evo-line);
    border-radius: var(--evo-r-lg, 10px);
    box-shadow: var(--evo-sh-sm);
}
.evo-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}
.evo-filter-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.evo-filter-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--evo-ink-500);
    line-height: 1.2;
}
.evo-filter-cell .evo-input--sm,
.evo-filter-cell .evo-input,
.evo-filter-cell .evo-select {
    /* Override the global `.evo-input--sm { max-width:140px }` cap (line 124).
       Inside a filter cell the input must stretch to the full grid track. */
    height: 40px; width: 100%; max-width: 100%; box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--evo-line);
    border-radius: var(--evo-r-md);
    font-size: 13.5px; font-family: inherit;
    background: var(--evo-card);
    color: var(--evo-ink-900);
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.evo-filter-cell .evo-input--sm:hover,
.evo-filter-cell .evo-input:hover,
.evo-filter-cell .evo-select:hover { border-color: var(--evo-ink-300); }
.evo-filter-cell .evo-input--sm:focus,
.evo-filter-cell .evo-input:focus,
.evo-filter-cell .evo-select:focus {
    border-color: var(--evo-brand-primary);
    box-shadow: var(--evo-sh-focus);
}
.evo-filter-cell input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.evo-filter-cell input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Search-input variant — magnifier glyph nested inside the hero free-text
   filter (policy number / search). Padding leaves clear space for the
   16px glyph + a 12px inner gutter. */
.evo-filter-cell--search { position: relative; }
.evo-filter-cell--search > .evo-input,
.evo-filter-cell--search > .evo-input--sm { padding-left: 38px; }
.evo-filter-cell--search > .evo-filter-cell__icon {
    position: absolute;
    left: 14px; bottom: 13px;
    color: var(--evo-ink-400);
    font-size: 13px;
    pointer-events: none;
}

/* Segmented event-filter strip — replaces the old underline-tab pattern
   that lived below the filter card. It now sits INSIDE the card as a hero
   row just under the grid: a tiny eyebrow label on the left, a magnetic
   pill-tab control in the middle, the result count on the right.

   The active state is a white pill with a soft floating shadow — feels
   like the active filter is "lifted out" of the inset trough. Inspired
   by macOS segmented controls and Linear's filter chips. */
.evo-filter-segrow {
    display: flex; align-items: center;
    gap: 12px;
    padding: 2px 0 0;
}
.evo-segctl {
    display: inline-flex; align-items: center;
    gap: 8px;
    padding: 4px;
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 999px;
    flex: 1 1 auto;
    min-width: 0;
}
.evo-segctl__label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--evo-ink-400);
    white-space: nowrap;
    padding: 0 4px 0 12px;
}
.evo-segctl__tabs {
    display: inline-flex;
    gap: 2px;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.evo-segctl__tabs::-webkit-scrollbar { display: none; }
.evo-segctl__tab {
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 500;
    color: var(--evo-ink-500);
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s, color .14s, box-shadow .14s;
}
.evo-segctl__tab:hover {
    color: var(--evo-ink-900);
    background: rgba(255, 255, 255, .55);
    text-decoration: none;
}
.evo-segctl__tab--active,
.evo-segctl__tab[aria-selected="true"] {
    background: var(--evo-card);
    color: var(--evo-ink-900);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(34,34,35,.10), 0 0 0 1px rgba(34,34,35,.05);
}
.evo-segctl__count {
    font-size: 11.5px;
    color: var(--evo-ink-500);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-right: 4px;
}

/* ── Mode picker — two large option cards side by side. ─────────
   Used in step 3 to switch between manual entry and XLSX upload.
   Bigger, more prominent than `.evo-segctl` (which targets compact
   filter chips). Layout is icon + title + sub-label per option. */
.evo-modepick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.evo-modepick__opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--evo-line);
    border-radius: var(--evo-r-md);
    background: var(--evo-paper-2);
    cursor: pointer;
    text-align: left;
    color: var(--evo-ink-700);
    transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
    font: inherit;
    min-width: 0;
}
.evo-modepick__opt:hover {
    border-color: var(--evo-line-strong);
    background: var(--evo-card);
}
.evo-modepick__opt--active {
    border-color: var(--evo-brand-primary-600);
    background: var(--evo-card);
    color: var(--evo-ink-900);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--evo-brand-primary-600);
}
.evo-modepick__opt svg {
    flex-shrink: 0;
    color: var(--evo-ink-400);
    transition: color .15s;
    margin-top: 1px;
}
.evo-modepick__opt:hover svg { color: var(--evo-ink-600); }
.evo-modepick__opt--active svg { color: var(--evo-brand-primary-700); }
.evo-modepick__text { min-width: 0; }
.evo-modepick__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.evo-modepick__sub {
    font-size: 11.5px;
    color: var(--evo-ink-500);
    margin-top: 3px;
    line-height: 1.35;
}
@media (max-width: 640px) {
    .evo-modepick { grid-template-columns: 1fr; }
}

/* Actions row — checkbox-meta on the left, button cluster on the right. */
.evo-filter-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed var(--evo-line);
}
.evo-filter-actions__buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evo-filter-actions .evo-btn--sm { height: 36px; padding: 0 14px; }

/* Active-filter chip bar — pop-out helpers to remove a single filter
   without clearing all of them. Pattern shared with `.evo-agr-filters__chips`.
   Lives just above the actions row whenever ≥1 filter is active. */
.evo-filter-chips {
    display: flex; align-items: center;
    gap: 6px; flex-wrap: wrap;
    padding: 4px 0 0;
}
.evo-filter-chips__label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--evo-ink-400);
    margin-right: 4px;
}
.evo-filter-chip {
    display: inline-flex; align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 12px;
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--evo-ink-700);
}
.evo-filter-chip__name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.evo-filter-chip__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: transparent; border: 0; padding: 0;
    color: var(--evo-ink-400);
    cursor: pointer; line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
}
.evo-filter-chip__close:hover {
    background: rgba(0,0,0,.06);
    color: var(--evo-ink-900);
    text-decoration: none;
}

.evo-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
    font-size: 13px; color: var(--evo-ink-700);
}
.evo-checkbox input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--evo-emerald-500);
    cursor: pointer; margin: 0;
}

/* Table */
.evo-table-wrap { overflow-x:auto; }
.evo-table { width:100%; border-collapse:collapse; font-size:13px; }
.evo-table th { padding:10px 14px; text-align:left; font-size:11px; font-weight:600; color:var(--evo-ink-400); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--evo-line); background:var(--evo-paper-2); white-space:nowrap; }
.evo-table-row td { padding:12px 14px; border-bottom:1px solid var(--evo-line); vertical-align:middle; }
.evo-table-row:last-child td { border-bottom:none; }
.evo-table-row:hover { background:var(--evo-paper-2); }
.evo-text-right { text-align:right; }
.evo-u-identity { display:inline-flex; align-items:center; gap:10px; }
.evo-u-identity .evo-policy-num { font-weight:600; }

/* Pagination */
.evo-pagination { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-top:1px solid var(--evo-line); }

/* PolicyDetail */
.evo-detail-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; }
.evo-card-label { font-size:11px; font-weight:600; color:var(--evo-ink-400); text-transform:uppercase; letter-spacing:.06em; }
.evo-breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--evo-ink-400); margin-bottom:2px; }
.evo-breadcrumb-link { color:var(--evo-emerald-700); text-decoration:none; }
.evo-breadcrumb-sep { color:var(--evo-ink-300); }
.evo-avenant-row { display:flex; align-items:center; gap:12px; padding:12px 16px; }

/* Two-column layout inside a detail card — pairs of <dl>s side by side. */
.evo-detail-twocol { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }

/* Sticky aside for the policy detail right rail. */
.evo-detail-aside { display:flex; flex-direction:column; gap:14px; position:sticky; top:24px; align-self:flex-start; }

/* Dark hero card variant — used by the premium summary block. */
.evo-card--dark { background:var(--evo-ink-800); color:#fff; border:none; }
.evo-card--dark .evo-overline { color:rgba(255,255,255,.55); }

/* Timeline rendering for the avenant history. Each row gets a colored dot
   on the left rail; rail itself is drawn as a 1px column behind the dots. */
.evo-timeline { position:relative; padding-left:18px; }
.evo-timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--evo-line); }
.evo-timeline-row { display:grid; grid-template-columns:14px 130px 1fr 1fr auto; gap:12px; padding:8px 0; align-items:center; }
.evo-timeline-row--link {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 -8px;
    padding: 8px;
    transition: background .12s;
}
.evo-timeline-row--link:hover {
    background: var(--evo-paper-2);
    text-decoration: none;
    color: inherit;
}
.evo-timeline-dot { width:13px; height:13px; border-radius:50%; border:3px solid var(--evo-card); box-shadow:0 0 0 1px var(--evo-line); margin-left:-12px; }
.evo-timeline-dot--emerald { background:var(--evo-emerald-500); }
.evo-timeline-dot--gold    { background:var(--evo-gold-500, var(--evo-gold-700)); }
.evo-timeline-dot--red     { background:var(--evo-red-500, var(--evo-red)); }
.evo-timeline-dot--neutral { background:var(--evo-ink-300); }

/* Action row inside the "Avenants disponibles" sidebar card. Behaves as a link. */
.evo-action-row { display:flex; align-items:center; gap:12px; padding:10px 0; text-decoration:none; color:inherit; }
.evo-action-row--bordered { border-bottom:1px dashed var(--evo-line); }
.evo-action-row.is-disabled { opacity:.55; pointer-events:none; }
.evo-action-row:hover:not(.is-disabled) { background:var(--evo-paper-2); }

/* Avenant context band — always-visible reminder of the policy being amended.
   Three regions: identity (icon + number), facts grid, back-link. */
.evo-context-band {
  background:var(--evo-card);
  border:1px solid var(--evo-line);
  border-left:3px solid var(--evo-emerald-500);
  border-radius:var(--evo-r-lg);
  padding:14px 18px;
  margin-bottom:18px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.evo-context-band__id { display:flex; align-items:center; gap:12px; min-width:280px; }
.evo-context-band__icon { width:40px; height:40px; border-radius:8px; background:var(--evo-ink-800); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.evo-context-band__overline { font-size:11px; color:var(--evo-ink-400); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; }
.evo-context-band__title { font-size:15px; margin-top:2px; }
.evo-context-band__facts { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; min-width:380px; }
.evo-context-band__back { margin-left:auto; }

/* Inline overline row — used by Reports to label the analytical hierarchy. */
.evo-overline-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ─── Wizard step 4 — Tarification recap (design 260427) ──────────
   Stacked cards: POLICE meta grid, SOUSCRIPTEUR with avatar, ASSURÉ
   PRINCIPAL with avatar + bénéficiaires list, dark prime block,
   T&Cs download mock. Centered max-720 column. */
.evo-recap-stack {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.evo-recap-card { padding: 22px; }
.evo-recap-card__title { margin-bottom: 14px; }

.evo-recap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
}
@media (max-width: 600px) {
  .evo-recap-grid { grid-template-columns: 1fr 1fr; }
}

/* Person row — avatar + identity + optional Modifier link. */
.evo-recap-person {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.evo-recap-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--evo-emerald-100);
  color: var(--evo-emerald-700);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.evo-recap-avatar--sm { width: 32px; height: 32px; font-size: 11px; }
.evo-recap-person__name { font-size: 16px; font-weight: 700; color: var(--evo-ink-900); margin-bottom: 2px; }

/* Hairline separator between identity row and beneficiaries list. */
.evo-recap-divider {
  border: 0;
  border-top: 1px solid var(--evo-line);
  margin: 16px 0 14px;
}

/* Beneficiary mini-row inside the assuré principal card. Subtle paper-2
   stripe with avatar + relationship label. */
.evo-recap-benef-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--evo-r-md);
  background: var(--evo-paper-2);
  margin-bottom: 6px;
}
.evo-recap-benef-row:last-child { margin-bottom: 0; }

/* Dark prime block — full-width. */
.evo-recap-prime { padding: 22px; }
.evo-recap-prime__overline { color: rgba(255,255,255,.55); margin-bottom: 6px; }
.evo-recap-prime__amount { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.evo-recap-prime__meta { color: rgba(255,255,255,.7); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }

/* T&Cs download mock — emerald-50 tint to set it apart from the meta
   cards above. The hover state hints at the deferred wiring. */
.evo-recap-tcs {
  padding: 18px;
  background: var(--evo-emerald-50);
  border-color: var(--evo-emerald-100);
}
.evo-recap-tcs__icon {
  width: 40px; height: 40px;
  border-radius: var(--evo-r-md);
  background: #fff;
  color: var(--evo-emerald-700);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* Wizard step 2 — top trip recap bar (Branche / Destination / Durée /
   Période / Âge max + Modifier). Always visible at the top of Choix du
   produit so the user can sanity-check what filtered the eligible list. */
.evo-trip-recap {
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:18px 24px;
  background:var(--evo-paper);
  border:1px solid var(--evo-line);
  border-radius:var(--evo-r-lg);
}
.evo-trip-recap > .evo-overline { letter-spacing:.06em; }
.evo-trip-recap__items {
  flex:1; display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px 28px; min-width:0;
}
.evo-trip-recap__items > div {
  display:flex; flex-direction:column; gap:6px;
  padding-left:14px;
  border-left:1px solid var(--evo-line);
}
.evo-trip-recap__items > div:first-child {
  padding-left:0;
  border-left:0;
}
.evo-trip-recap__items .evo-overline { line-height:1.2; }
.evo-trip-recap__items .evo-text-sm  { line-height:1.35; }
@media (max-width: 900px) {
  .evo-trip-recap { padding:16px; gap:16px; }
  .evo-trip-recap__items { grid-template-columns:repeat(2, 1fr); gap:14px 18px; }
  .evo-trip-recap__items > div { padding-left:0; border-left:0; }
}

/* ─── Wizard step 2 — design WizardStep2.jsx components ──────────── */

/* Each section sits in its own card, full width, stacked. */
.evo-section-card { background:var(--evo-card); border:1px solid var(--evo-line); border-radius:var(--evo-r-lg); }

/* "L'assuré principal est le souscripteur" — mint-tinted inheritance box.
   Active state (checkbox checked): emerald background + check icon visible. */
.evo-mint-box {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:1.5px solid var(--evo-line);
  border-radius:var(--evo-r-lg);
  background:var(--evo-paper);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.evo-mint-box.is-active { border-color:var(--evo-emerald-500); background:var(--evo-emerald-50); }
.evo-mint-box__check { position:absolute; opacity:0; pointer-events:none; }
.evo-mint-box__icon {
  width:22px; height:22px; border-radius:50%;
  background:var(--evo-card); border:1.5px solid var(--evo-line);
  display:grid; place-items:center; flex-shrink:0;
  color:transparent;
}
.evo-mint-box.is-active .evo-mint-box__icon { background:var(--evo-emerald-500); border-color:var(--evo-emerald-500); color:#fff; }
.evo-mint-box__body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.evo-mint-box__title { font-size:13px; font-weight:600; color:var(--evo-ink-800); }
.evo-mint-box__sub   { font-size:12px; color:var(--evo-ink-500); line-height:1.45; }
.evo-mint-box__avatar { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }

/* Empty state inside the beneficiaries card — centered icon + caption. */
.evo-empty-bench {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 0 20px;
  text-align:center;
}

/* Full-width dashed "+ Add" button used by the beneficiaries section. */
.evo-app .evo-add-dashed {
  appearance:none; -webkit-appearance:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:12px 16px;
  border:1.5px dashed var(--evo-line);
  border-radius:var(--evo-r-md);
  background:transparent;
  color:var(--evo-ink-700);
  font-size:13px; font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, background .15s, color .15s;
}
.evo-app .evo-add-dashed:hover { border-color:var(--evo-emerald-500); color:var(--evo-emerald-700); background:var(--evo-emerald-50); }

/* "Autres assurés" — two cards side by side. */
.evo-other-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px) { .evo-other-grid { grid-template-columns:1fr; } }
.evo-app .evo-other-card {
  appearance:none; -webkit-appearance:none;
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  border:1.5px solid var(--evo-line);
  border-radius:var(--evo-r-lg);
  background:var(--evo-card);
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.evo-app .evo-other-card:hover { border-color:var(--evo-emerald-500); background:var(--evo-emerald-50); }
.evo-other-card__icon {
  width:28px; height:28px; border-radius:8px;
  background:var(--evo-paper-2); color:var(--evo-ink-700);
  display:grid; place-items:center; flex-shrink:0;
}
.evo-other-card__body { display:flex; flex-direction:column; gap:2px; }
.evo-other-card__title { font-size:13px; font-weight:600; color:var(--evo-ink-800); }
.evo-other-card__sub   { font-size:12px; color:var(--evo-ink-500); line-height:1.45; }

/* Recap "Total" row — slightly bolder than the other dt/dd pairs. */
.evo-recap-list dt.evo-recap-total,
.evo-recap-list dd.evo-recap-total {
  font-weight:700;
  color:var(--evo-ink-900);
  border-top:1px solid var(--evo-line);
  padding-top:8px;
  margin-top:6px;
}

/* SuperAdmin restricted-zone banner — dark strip at the top of the page,
   reinforces that operator users should never see this. Design MoreScreens.jsx:455. */
.evo-superadmin-banner {
  background:var(--evo-ink-900);
  color:#fff;
  padding:10px 28px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--evo-ink-900);
}
.evo-superadmin-banner svg { color:var(--evo-yellow, var(--evo-gold-700)); flex-shrink:0; }
@media (max-width:900px) {
  .evo-context-band__facts { grid-template-columns:1fr; }
}

/* `.evo-btn--sm` and `.evo-btn--danger` are defined in the canonical Btn atom
   block above (ghost-style danger per Atoms.jsx spec). Wave 2 had a solid-red
   redefinition here that has been removed to keep a single source of truth. */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Wave 3 — Reports + SuperAdmin
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Period tabs */
.evo-period-tabs { display:flex; gap:4px; background:var(--evo-paper-3); border-radius:var(--evo-r-md); padding:3px; }
.evo-period-tab { padding:6px 12px; border-radius:6px; font-size:12px; font-weight:500; color:var(--evo-ink-500); text-decoration:none; transition:background .15s, color .15s; }
.evo-period-tab.is-active { background:var(--evo-card); color:var(--evo-ink-800); box-shadow:var(--evo-sh-sm); }

/* Reports grid */
.evo-reports-grid { display:grid; grid-template-columns:1fr 320px; gap:16px; }

/* `.evo-kpi-strip--flex` modifier — Reports page wraps 5 KPIs with N/A states.
   Dashboard keeps the default grid-4col layout. */
.evo-kpi-strip--flex { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; grid-template-columns:none; }
.evo-kpi-strip--flex > .evo-kpi-card { flex:1; min-width:140px; padding:16px; border-radius:var(--evo-r-lg); }
/* Reports-only label/value classes (Dashboard uses BEM-style .evo-kpi-card__*) */
.evo-kpi-label { font-size:11px; font-weight:600; color:var(--evo-ink-400); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.evo-kpi-value { font-size:24px; font-weight:700; color:var(--evo-ink-900); line-height:1; }
.evo-kpi-value--na { color:var(--evo-ink-300); }
.evo-kpi-unit { font-size:14px; font-weight:500; color:var(--evo-ink-500); }
.evo-kpi-na { font-size:11px; color:var(--evo-ink-400); margin-top:4px; }

/* Generic page wrapper — pairs with `.evo-app__main`. Without these rules
   the new com_evo views (createpolicy, policylist, policydetail, avenant,
   reports, superadmin) render invisible because they sit in a flex column
   with no flex grow/scroll setup of their own. */
.evo-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* evo-scroll: laisse `overflow: visible` pour que le scroll se fasse sur
   <body> et que `position: sticky` fonctionne sur les descendants (le
   scroll ancestor doit être le viewport, pas evo-scroll). Le contenu peut
   déborder librement — l'app scrolle naturellement via body. */
.evo-page > .evo-scroll { flex: 1 1 auto; min-height: 0; }
.evo-page-body { padding:28px 32px; max-width:1200px; margin:0 auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Utilities — small set of margin/padding/flex helpers. Used to replace
   the most common inline `style="…"` patterns across templates so the
   design-token contract holds. Numbers map to the spacing scale where
   possible (1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.evo-mt-1 { margin-top: 4px; }
.evo-mt-2 { margin-top: 8px; }
.evo-mt-3 { margin-top: 12px; }
.evo-mt-4 { margin-top: 16px; }
.evo-mt-5 { margin-top: 20px; }
.evo-mt-6 { margin-top: 24px; }
.evo-mb-1 { margin-bottom: 4px; }
.evo-mb-2 { margin-bottom: 8px; }
.evo-mb-3 { margin-bottom: 12px; }
.evo-mb-4 { margin-bottom: 16px; }
.evo-mb-5 { margin-bottom: 20px; }
.evo-mb-6 { margin-bottom: 24px; }
.evo-p-4 { padding: 16px; }
.evo-p-5 { padding: 20px; }
.evo-p-6 { padding: 24px; }
.evo-p-7 { padding: 28px; }

.evo-flex { display: flex; }
.evo-flex-col { display: flex; flex-direction: column; }
.evo-flex-center { display: flex; align-items: center; }
.evo-flex-between { display: flex; align-items: center; justify-content: space-between; }
.evo-gap-1 { gap: 4px; }
.evo-gap-2 { gap: 8px; }
.evo-gap-3 { gap: 12px; }
.evo-gap-4 { gap: 16px; }

.evo-text-sm  { font-size: 13px; line-height: 1.5; }
.evo-text-xs  { font-size: 11px; line-height: 1.4; }
.evo-text-bold   { font-weight: 600; }
.evo-text-muted  { color: var(--evo-ink-500); }
.evo-text-faded  { color: var(--evo-ink-400); }
.evo-text-center { text-align: center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Responsive — desktop-first ≥1280px. Below 960px the multi-column grids
   collapse to single column and the sidebar becomes off-canvas.
   The Connection screen has its own ≤960px rule above (brand panel hidden).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 960px) {
    /* Sidebar — off-canvas on small screens. Toggled by media/com_evo/js/screens/chrome.js
       which adds `.is-open` on the nav and `.is-visible` on the backdrop. */
    .evo-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 80vw; flex: 0 0 auto;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        z-index: 1100;
    }
    .evo-sidebar.is-open { transform: translateX(0); }
    .evo-app__main { width: 100%; }

    /* Burger appears in the topbar on mobile only. */
    .evo-topbar__burger { display: inline-flex; }

    /* Multi-column grids → single column */
    .evo-kpi-strip,
    .evo-quick-actions,
    .evo-branch-grid,
    .evo-conf-cards,
    .evo-bulk-steps,
    .evo-products-grid { grid-template-columns: 1fr; }
    .evo-wizard-grid,
    .evo-detail-grid,
    .evo-reports-grid { grid-template-columns: 1fr; }

    /* Recap sidebar — release sticky positioning so it doesn't overlap */
    .evo-wizard-recap { position: static; }

    /* Tighter page padding */
    .evo-page-body { padding: 16px; }
    .evo-dashboard { padding: 20px 16px; }
    .evo-topbar { padding: 12px 16px 10px; }
    .evo-stepper { padding: 16px 16px 0; }
    .evo-wizard-footer { padding: 12px 16px; }

    /* Page header wraps; period tabs scroll horizontally */
    .evo-period-tabs { overflow-x: auto; max-width: 100%; }
    .evo-page-header { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
    /* Stepper labels hidden on tiny screens — keep the dots only */
    .evo-stepper-label { display: none; }
    /* Path breadcrumb truncates long scope chains */
    .evo-dashboard__partner-name { font-size: 18px; }
    .evo-path-seg, .evo-path-sep { font-size: 16px; }
    .evo-path-seg.is-current { font-size: 18px; }
}

/* ───────── A11y: visually-hidden labels (for screen readers only) ───── */
.evo-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dashboard commercial-model badge — only renders for Morocco scopes (cf
   spec 02_dashboard §10.7). Inline-block so it lives on the same line as the
   partner name in the dashboard header. */
.evo-dashboard__model-badge { margin-left: 12px; vertical-align: middle; font-size: 11px; }

/* Bulk-vs-group disambiguation banner — gold-tinted (info, not error). Per
   spec design CreatePolicy.jsx:207-212: prevents partners conflating bulk
   import (N independent policies) with a group policy (1 policy, many
   insured). Surfaced inside the bulk tab below the dropzone. */
.evo-bulk-warning {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: var(--evo-gold-100, #fff8e8);
  border: 1px solid var(--evo-yellow-200, #fdf0a3);
  border-radius: var(--evo-r-md);
  font-size: 11px; line-height: 1.55;
  color: var(--evo-ink-700);
}
.evo-bulk-warning > svg { color: var(--evo-gold-700); flex-shrink: 0; margin-top: 2px; }

/* Step 1 duration chips — special "custom" chip uses a dashed border to signal
   it's a different mode (manual end-date entry) per design CreatePolicy.jsx:330. */
.evo-chip--custom {
  border-style: dashed;
  display: inline-flex; align-items: center; gap: 6px;
}
.evo-chip--custom > svg { opacity: .85; }

/* Computed end-date strip — green-tinted callout under the duration chips. */
.evo-end-date-strip {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--evo-r-md);
  background: var(--evo-emerald-50);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  gap: 12px;
}
.evo-end-date-strip__value {
  font-weight: 600; color: var(--evo-emerald-700);
}
.evo-end-date-strip__input {
  width: auto; max-width: 160px;
  padding: 4px 8px; font-size: 12px;
  border-color: var(--evo-emerald-500);
  background: var(--evo-card);
  font-family: var(--evo-font-mono);
}
/* Pill suffix on the right side of the strip — `· 183 jours`. Emerald-
 * tinted background so it reads as part of the same module as the date
 * value, but a notch lighter on the type so the date stays primary. */
.evo-end-date-strip__days {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--evo-emerald-100, #d1fae5);
  color: var(--evo-emerald-700);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  font-family: var(--evo-font-mono);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Product catalogue (Wave 2) — list table + structured detail view.
 * Scoped under `.evo-app` so the Joomla template never touches these styles.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Compact composition pills row */
.evo-app .evo-compo-pills { display:flex; flex-wrap:wrap; gap:4px; }

/* Beneficiary slot row in the list — compact "S0 C2 A0 V0" indicator */
.evo-app .evo-slot-row { display:flex; gap:4px; align-items:center; }
.evo-app .evo-slot {
    display:inline-flex; align-items:baseline; gap:2px;
    padding:2px 6px; min-width:34px; border-radius:6px;
    background:var(--evo-paper-3); color:var(--evo-ink-500, #999);
    font-family: var(--evo-font-mono); font-size:11px; line-height:1;
}
.evo-app .evo-slot__k { font-weight:700; opacity:.7; }
.evo-app .evo-slot__n { font-weight:500; }
.evo-app .evo-slot.is-on { background:var(--evo-brand-primary-50); color:var(--evo-brand-primary-700); }
.evo-app .evo-slot.is-on .evo-slot__k { opacity:1; }

/* Catalog table tweaks — tighter vertical density than the policy table */
.evo-app .evo-table--catalog th { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--evo-ink-500, #777); }
.evo-app .evo-table--catalog td { vertical-align:middle; padding:10px 12px; }

/* Detail card — sections in the product detail view */
.evo-app .evo-detail-card { padding:18px 20px; margin-bottom:14px; }
.evo-app .evo-detail-card .evo-section-title {
    font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--evo-ink-500, #666); margin:0 0 12px; font-weight:600;
}
.evo-app .evo-detail-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px 20px;
}
.evo-app .evo-detail-grid > div { display:flex; flex-direction:column; gap:2px; }
.evo-app .evo-detail-k { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--evo-ink-500, #888); }
.evo-app .evo-detail-v { font-size:14px; color:var(--evo-ink-900); }

/* Beneficiary rule rows */
.evo-app .evo-bench-grid { display:flex; flex-direction:column; gap:8px; }
.evo-app .evo-bench-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border:1px solid var(--evo-line); border-radius:8px;
    background:var(--evo-paper-2);
}
.evo-app .evo-bench-row__label { font-weight:500; color:var(--evo-ink-900); }
.evo-app .evo-bench-row__rule { font-family:var(--evo-font-mono); font-size:13px; color:var(--evo-ink-700); }

/* Document list (per-language T&C files) */
.evo-app .evo-doc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.evo-app .evo-doc-list li {
    display:flex; gap:12px; align-items:baseline;
    padding:8px 12px; background:var(--evo-paper-2); border-radius:6px;
}
.evo-app .evo-doc-list__lang {
    display:inline-block; min-width:60px;
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:var(--evo-brand-primary-700);
}
.evo-app .evo-doc-list__file { color:var(--evo-ink-700); font-size:13px; }

/* Pagination row — shared with policy list when extracted, scoped here for now */
.evo-app .evo-pagination { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:14px; }

/* ───────────────────────────────────────────────────────────────────────────
 * Wizard Step 3 — Section 4 (Véhicules) + Section 5 (Assurés)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Vehicle row — pre-seeded, ready-to-fill form. Compact 4-col layout. */
.evo-app .evo-vehicle-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px; margin-bottom: 8px;
    background: var(--evo-paper-2); border: 1px solid var(--evo-line);
    border-radius: 8px;
}
.evo-app .evo-vehicle-row__num {
    flex-shrink: 0; width: 28px; height: 28px;
    border-radius: 50%; background: var(--evo-brand-primary-50);
    color: var(--evo-brand-primary-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; font-family: var(--evo-font-mono);
    margin-top: 24px;
}
.evo-app .evo-vehicle-row__fields { flex: 1; min-width: 0; }
.evo-app .evo-vehicle-row .evo-icon-btn { margin-top: 24px; flex-shrink: 0; }

/* ── Insured cards (Section 5) — collapsible header + body. ─────── */
.evo-app .evo-insured-card {
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.evo-app .evo-insured-card.is-expanded {
    border-color: var(--evo-brand-primary-200, var(--evo-brand-primary-50));
    background: var(--evo-card);
}
.evo-app .evo-insured-card__header {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    background: transparent; border: 0;
    text-align: left; cursor: pointer;
    color: inherit; font: inherit;
}
.evo-app .evo-insured-card__header:hover { background: var(--evo-paper-3); }

.evo-app .evo-insured-card__chev {
    display: inline-flex; flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--evo-ink-500, #888);
    transition: transform .15s ease;
}
.evo-app .evo-insured-card__chev.is-rot { transform: rotate(90deg); }

.evo-app .evo-insured-card__avatar {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--evo-brand-primary-50); color: var(--evo-brand-primary-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.evo-app .evo-insured-card__body {
    padding: 8px 16px 16px 46px;  /* aligned with chevron + avatar gutter */
    border-top: 1px solid var(--evo-line);
}

/* Recap grid inside the principal card (read-only) */
.evo-app .evo-insured-recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px;
    padding: 10px 0;
}
.evo-app .evo-insured-recap > div { display: flex; flex-direction: column; gap: 2px; }
.evo-app .evo-insured-recap .evo-detail-k {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--evo-ink-500, #888);
}
.evo-app .evo-insured-recap .evo-detail-v { font-size: 13px; color: var(--evo-ink-900); }

/* Indented "attached" list — beneficiaries + vehicles tied to the principal. */
.evo-app .evo-insured-attached {
    margin-top: 12px; padding: 10px 12px;
    border-left: 2px solid var(--evo-brand-primary-50);
    background: var(--evo-paper-2);
    border-radius: 0 6px 6px 0;
}
.evo-app .evo-insured-attached__head {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--evo-ink-500); margin-bottom: 6px;
}
.evo-app .evo-insured-attached__list { list-style: none; padding: 0; margin: 0; }
.evo-app .evo-insured-attached__list li {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 13px;
}
.evo-app .evo-insured-attached__dot {
    flex-shrink: 0; width: 6px; height: 6px;
    border-radius: 50%; background: var(--evo-brand-primary-500, var(--evo-brand-primary-700));
}
.evo-app .evo-insured-attached__dot--vehicle {
    background: var(--evo-gold-500, var(--evo-gold-700));
}

/* Action row at the bottom of Section 5 */
.evo-app .evo-insured-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 14px;
}

/* Masse mode summary card variant */
.evo-app .evo-insured-card--masse .evo-insured-card__header {
    cursor: default;
}
.evo-app .evo-insured-card--masse .evo-insured-card__header:hover { background: transparent; }

/* ───────────────────────────────────────────────────────────────────────────
 * Wizard Step 3 — restructure 2026-04-27
 * Section 2 (Assuré principal) hosts nested sub-cards for beneficiaries
 * and vehicles. Section 3 (Ajouter un autre assuré) is a flat list of
 * inline editable rows + 3-action footer.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Nested sub-card inside Section 2's main insured. Visually distinct from
 * top-level evo-section-card by softer background + indent. */
.evo-app .evo-subcard {
    margin-top: 16px;
    padding: 16px;
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 10px;
}
.evo-app .evo-subcard__header {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
}
.evo-app .evo-subcard__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--evo-brand-primary-50);
    color: var(--evo-brand-primary-700);
    display: flex; align-items: center; justify-content: center;
}
.evo-app .evo-subcard__title {
    font-size: 14px; font-weight: 600; color: var(--evo-ink-900);
}

/* Section 3 — additional-insureds list. Each adultsupp row is a numbered
 * inline form (no collapse). Layout mirrors evo-vehicle-row for visual
 * consistency between nested vehicles and additional insureds. */
.evo-app .evo-insured-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px; margin-bottom: 8px;
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 8px;
}
.evo-app .evo-insured-row__num {
    flex-shrink: 0; width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--evo-brand-primary-50);
    color: var(--evo-brand-primary-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; font-family: var(--evo-font-mono);
    margin-top: 24px;
}
.evo-app .evo-insured-row__fields { flex: 1; min-width: 0; }
.evo-app .evo-insured-row .evo-icon-btn { margin-top: 24px; flex-shrink: 0; }

/* Compact masse-import summary banner (replaces what was an evo-insured-card). */
.evo-app .evo-import-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--evo-paper-2);
    border: 1px dashed var(--evo-brand-primary-200, var(--evo-line));
    border-radius: 10px;
    margin-bottom: 12px;
}
.evo-app .evo-import-summary__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--evo-gold-50, var(--evo-paper-3));
    color: var(--evo-gold-700, var(--evo-ink-900));
    display: flex; align-items: center; justify-content: center;
}

/* ─── Modals (confirm + insured pop-in) ──────────────
   Shared shell. Both the step-4 "Issue the policy?" confirm dialog and
   the step-3 insured add/edit pop-in use the same .evo-modal-overlay /
   .evo-modal markup with BEM-style __header / __body / __footer parts.
   .evo-modal--sm narrows to ~440px for confirm-style dialogs;
   default width is ~640px for forms. */
.evo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    padding: 60px 20px 20px;
    overflow-y: auto;
    backdrop-filter: blur(2px);
}
.evo-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: evo-modal-in .14s ease-out;
}
.evo-modal--sm { max-width: 440px; }

/* Old-cert toggle (policy detail) — uses native <details>/<summary> so it
   works without Alpine. The summary itself is the clickable button; we
   restyle it as a small ghost pill. The chevron rotates 90° when open
   and the show/hide label spans swap based on the [open] attribute. */
.evo-old-certs > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none; /* hide native disclosure triangle */
    padding: 6px 12px;
    border-radius: var(--evo-r-md);
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--evo-ink-700);
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.evo-old-certs > summary::-webkit-details-marker { display: none; }
.evo-old-certs > summary::marker { content: ''; }
.evo-old-certs > summary:hover {
    background: var(--evo-card);
    border-color: var(--evo-ink-300);
    color: var(--evo-ink-900);
}
.evo-old-certs__chevron { transition: transform .15s ease; flex: 0 0 auto; }
.evo-old-certs[open] .evo-old-certs__chevron { transform: rotate(90deg); }
.evo-old-certs .evo-old-certs__lbl-hide,
.evo-old-certs:not([open]) .evo-old-certs__lbl-hide { display: none; }
.evo-old-certs[open] .evo-old-certs__lbl-show { display: none; }
.evo-old-certs[open] .evo-old-certs__lbl-hide { display: inline; }
@keyframes evo-modal-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.evo-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--evo-line);
}
.evo-modal__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--evo-brand-primary-50);
    color: var(--evo-brand-primary-700);
    display: flex; align-items: center; justify-content: center;
}
.evo-modal__icon--warn {
    background: var(--evo-yellow-50, #fff7e6);
    color: var(--evo-gold-700, #b07b00);
}
.evo-modal__title {
    margin: 0;
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    color: var(--evo-ink-900);
    letter-spacing: -0.01em;
}
.evo-modal__body {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--evo-ink-700, #444);
    overflow-y: auto;
    flex: 1 1 auto;
}
.evo-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 22px;
    border-top: 1px solid var(--evo-line);
    background: var(--evo-paper-2);
    border-radius: 0 0 14px 14px;
}

/* Legacy single-dash classes — kept as no-op aliases so any other consumer
   that still uses .evo-modal-title / -body / -actions doesn't visually
   regress. New code uses __header / __body / __footer. */
.evo-modal-title    { font-size: 17px; font-weight: 600; color: var(--evo-ink-900); margin: 0 0 10px; }
.evo-modal-body     { font-size: 14px; line-height: 1.55; color: var(--evo-ink-700, #444); margin-bottom: 18px; }
.evo-modal-actions  { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── Insureds table (Section 2 group mode) ─────────────────── */
.evo-app .evo-insureds-table-wrap { margin-bottom: 16px; }
.evo-app .evo-insureds-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
}
.evo-app .evo-insureds-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--evo-ink-500, #777); font-weight: 600;
    padding: 8px 12px; text-align: left;
    border-bottom: 1px solid var(--evo-line);
}
.evo-app .evo-insureds-table tbody td {
    padding: 12px; border-bottom: 1px solid var(--evo-line);
    vertical-align: middle;
}
.evo-app .evo-insureds-row { cursor: pointer; transition: background .12s ease; }
.evo-app .evo-insureds-row:hover { background: var(--evo-paper-2); }
.evo-app .evo-insureds-row--main { background: var(--evo-brand-primary-50); }
.evo-app .evo-insureds-row--main:hover { background: var(--evo-brand-primary-100, var(--evo-brand-primary-50)); }
.evo-app .evo-insureds-row__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%; background: var(--evo-paper-3); color: var(--evo-ink-700);
    font-family: var(--evo-font-mono); font-size: 11px; font-weight: 600;
}
.evo-app .evo-insureds-row--main .evo-insureds-row__num {
    background: var(--evo-brand-primary-700); color: #fff;
}
.evo-app .evo-insureds-table__addrow td { padding: 0; border-bottom: 0; }
.evo-app .evo-insureds-table__addrow .evo-add-dashed { margin-top: 8px; }

/* Attachment pills in the table row (spouses / children / vehicles count). */
.evo-app .evo-attach-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.evo-app .evo-attach-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    background: var(--evo-brand-primary-50); color: var(--evo-brand-primary-700);
    font-size: 11px; font-weight: 500;
}
.evo-app .evo-attach-pill--vehicle {
    background: var(--evo-yellow-50, var(--evo-paper-3));
    color: var(--evo-gold-700, var(--evo-ink-900));
}

/* Nested benefs editor inside the insured modal — design cards-in-card.
 * Chaque section (Conjoints / Enfants / Adultes Sup. / Véhicules) est une
 * carte avec un header (titre + compteur + bouton "+ Ajouter"). À l'intérieur,
 * chaque sous-benef est une sous-carte avec son propre header (#1, #2…) +
 * bouton supprimer, et un grid 2-col de champs. Mirror compact du design
 * principal du wizard pour rester cohérent. */
.evo-app .evo-modal-nested {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--evo-line);
    display: flex; flex-direction: column; gap: 16px;
}
.evo-app .evo-modal-nested__block {
    background: var(--evo-paper-2);
    border: 1px solid var(--evo-line);
    border-radius: 10px;
    padding: 12px 14px;
}
.evo-app .evo-modal-nested__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.evo-app .evo-modal-nested__title {
    font-size: 11px; font-weight: 700;
    color: var(--evo-ink-900); text-transform: uppercase; letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 8px;
}
.evo-app .evo-modal-nested__count {
    font-size: 11px; font-weight: 600;
    color: var(--evo-ink-500);
    padding: 2px 8px; border-radius: 999px;
    background: var(--evo-paper);
    border: 1px solid var(--evo-line);
}
.evo-app .evo-modal-nested__add {
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    color: var(--evo-brand-primary);
    background: transparent;
    border: 1px dashed var(--evo-brand-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease;
}
.evo-app .evo-modal-nested__add:hover { background: var(--evo-brand-primary-tint, rgba(0,0,0,.04)); }
.evo-app .evo-modal-nested__add:disabled { opacity: .4; cursor: not-allowed; }
/* Carte sous-benef — une par instance (Conjoint #1, Enfant #2…) */
.evo-app .evo-modal-nested__item {
    background: var(--evo-card, #fff);
    border: 1px solid var(--evo-line);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.evo-app .evo-modal-nested__item:last-child { margin-bottom: 0; }
.evo-app .evo-modal-nested__item-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--evo-line);
}
.evo-app .evo-modal-nested__item-label {
    font-size: 12px; font-weight: 600;
    color: var(--evo-ink-700);
}
.evo-app .evo-modal-nested__item-label-num {
    color: var(--evo-brand-primary); font-weight: 700;
}
.evo-app .evo-modal-nested__item-remove {
    padding: 4px;
    color: var(--evo-ink-400);
    background: transparent; border: none; cursor: pointer;
    border-radius: 4px;
    transition: color 120ms ease, background 120ms ease;
}
.evo-app .evo-modal-nested__item-remove:hover {
    color: var(--evo-red-600, #d33);
    background: rgba(255,0,0,.05);
}
/* Grid 2-col par défaut (modal est étroite). Pareil que .evo-dynamic-fields-grid
   mais en 6-col scale pour avoir plus de flexibilité 1/3, 1/2, 2/3, full. */
.evo-app .evo-modal-nested__fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 12px;
}
.evo-app .evo-modal-nested__fields > .evo-field { grid-column: span 3; }
.evo-app .evo-modal-nested__fields > .evo-field--full { grid-column: span 6; }
.evo-app .evo-modal-nested__fields .evo-input,
.evo-app .evo-modal-nested__fields .evo-select { font-size: 13px; padding: 6px 8px; }
.evo-app .evo-modal-nested__fields .evo-select { height: 32px; }
.evo-app .evo-modal-nested__fields .evo-label { font-size: 11px; font-weight: 600; color: var(--evo-ink-600); }
@media (max-width: 560px) {
    .evo-app .evo-modal-nested__fields > .evo-field { grid-column: span 6; }
}

.evo-app .evo-add-dashed--sm {
    padding: 6px 10px; font-size: 12px;
    margin-top: 4px;
}

/* ── Policy Detail — redesign (Wave 2/02) ────────────────────────────── */
.evo-page-body--detail { padding: 0 28px 40px; }

/* Hero header */
.evo-detail-header { padding: 20px 0 16px; margin-bottom: 20px; border-bottom: 1px solid var(--evo-line); }
.evo-detail-title { font-size: 22px; font-weight: 700; color: var(--evo-ink-900); margin: 6px 0 8px; letter-spacing: -.02em; }
.evo-detail-product-name { font-size: 15px; font-weight: 600; color: var(--evo-ink-800); }
.evo-detail-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.evo-detail-meta-sep { color: var(--evo-ink-300); }
.evo-detail-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.evo-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.evo-detail-actions__primary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Status badge (with dot) */
.evo-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.evo-status-badge--emerald { background: var(--evo-emerald-50,#ecfdf5); color: var(--evo-emerald-700,#047857); }
.evo-status-badge--red     { background: #fef2f2; color: var(--evo-red-700,#b91c1c); }
.evo-status-badge--gold    { background: #fffbeb; color: #92400e; }
.evo-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Date badge */
.evo-date-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--evo-paper-2); color: var(--evo-ink-500); border: 1px solid var(--evo-line); }
.evo-date-badge strong { color: var(--evo-ink-800); font-weight: 600; }

/* Detail card */
.evo-detail-card { padding: 18px 20px; margin-bottom: 14px; }
.evo-detail-card__title { font-size: 13px; font-weight: 700; color: var(--evo-ink-800); margin-bottom: 14px; }
.evo-detail-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* KV list — label/value pairs in two-column layout */
.evo-kv-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.evo-kv-row dt { font-size: 11px; font-weight: 600; color: var(--evo-ink-400); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.evo-kv-row dd { font-size: 13px; color: var(--evo-ink-800); margin: 0; font-weight: 500; }

/* Avenants disponibles card items */
.evo-avenant-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; }
.evo-avenant-row--bordered { border-bottom: 1px solid var(--evo-line); }
.evo-avenant-row.is-disabled { opacity: .5; pointer-events: none; }
.evo-avenant-row:hover:not(.is-disabled) { opacity: .85; }

/* Document list */
.evo-doc-list { display: flex; flex-direction: column; gap: 8px; }
.evo-doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--evo-paper-2); border-radius: var(--evo-r-md); }
.evo-doc-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.evo-doc-info { flex: 1; min-width: 0; }

/* Avatar */
.evo-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.evo-avatar--sm { width: 32px; height: 32px; font-size: 11px; }
.evo-avatar--emerald { background: var(--evo-emerald-100,#d1fae5); color: var(--evo-emerald-700,#047857); }

/* Link */
.evo-link { color: var(--evo-brand-primary); text-decoration: none; }
.evo-link:hover { text-decoration: underline; }

/* ─── Policy list — avenant-type tab bar ─────────────────────────────────── */
.evo-tabs-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 0; border-bottom: 1px solid var(--evo-line); padding-bottom: 0; }
.evo-tabs-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--evo-ink-400); text-transform: uppercase; white-space: nowrap; margin-right: 4px; }
.evo-tabs { display: flex; gap: 0; }
.evo-tab { display: inline-block; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--evo-ink-500); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .1s, border-color .1s; }
.evo-tab:hover { color: var(--evo-ink-900); }
.evo-tab--active { color: var(--evo-brand-primary-700); border-bottom-color: var(--evo-brand-primary); font-weight: 600; }
.evo-tabs-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--evo-ink-400); white-space: nowrap; padding-bottom: 10px; }

/* ─── Policy list — search kbd hint ─────────────────────────────────────── */
.evo-kbd { display: inline-flex; align-items: center; padding: 1px 5px; font-size: 10px; font-family: var(--evo-font-mono, monospace); color: var(--evo-ink-400); background: var(--evo-paper-2); border: 1px solid var(--evo-line); border-radius: 4px; margin-left: 6px; line-height: 1.4; pointer-events: none; }

/* ─── Policy list — "…" icon button ─────────────────────────────────────── */
.evo-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--evo-r-sm); color: var(--evo-ink-400); text-decoration: none; transition: background .1s, color .1s; }
.evo-btn-icon:hover { background: var(--evo-paper-2); color: var(--evo-ink-800); }

/* ─── Page label (POLICES eyebrow) ───────────────────────────────────────── */
.evo-page-header .evo-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--evo-ink-400); margin-bottom: 2px; }

/* ─── WhatsApp share popover (policy detail action bar) ──────────────────── */
.evo-wa-share { position: relative; display: inline-block; }
.evo-wa-share__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 280px; padding: 10px 12px; background: var(--evo-paper-1, #fff); border: 1px solid var(--evo-line); border-radius: var(--evo-r-md, 8px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.evo-wa-share__label { display: block; font-size: 11px; font-weight: 600; color: var(--evo-ink-600); margin-bottom: 4px; }
.evo-wa-share__row { display: flex; gap: 6px; align-items: stretch; }
.evo-wa-share__input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; line-height: 1.3; color: var(--evo-ink-800); background: var(--evo-paper-1, #fff); border: 1px solid var(--evo-line); border-radius: var(--evo-r-sm, 4px); }
.evo-wa-share__input:focus { outline: none; border-color: #25D366; box-shadow: 0 0 0 2px rgba(37,211,102,0.2); }
.evo-wa-share__hint { margin: 6px 0 0; font-size: 11px; color: var(--evo-ink-400); line-height: 1.4; }

/* ─── Resend-by-email popover (memes regles que WA share, accent indigo) ─── */
.evo-resend-share { position: relative; display: inline-block; }
.evo-resend-share__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 320px; padding: 10px 12px; background: var(--evo-paper-1, #fff); border: 1px solid var(--evo-line); border-radius: var(--evo-r-md, 8px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.evo-resend-share__label { display: block; font-size: 11px; font-weight: 600; color: var(--evo-ink-600); margin-bottom: 4px; }
.evo-resend-share__row { display: flex; gap: 6px; align-items: stretch; }
.evo-resend-share__input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; line-height: 1.3; color: var(--evo-ink-800); background: var(--evo-paper-1, #fff); border: 1px solid var(--evo-line); border-radius: var(--evo-r-sm, 4px); }
.evo-resend-share__input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.18); }
.evo-resend-share__hint { margin: 6px 0 0; font-size: 11px; color: var(--evo-ink-400); line-height: 1.4; }
.evo-resend-share__hint--success { color: #15803d; font-weight: 600; }
.evo-resend-share__hint--error   { color: #b91c1c; font-weight: 600; }

/* ─── Certificate template editor (settings/certificate-generator?_m=edit) ──────────── */
.evo-cert-editor { display: block; width: 100%; max-width: 100%; min-width: 0; }
.evo-cert-editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .evo-cert-editor__grid { grid-template-columns: 1fr; } }
.evo-cert-editor__left, .evo-cert-editor__right { min-width: 0; max-width: 100%; }
.evo-cert-editor__attr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.evo-attr-list, .evo-attr-new-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.evo-attr-new-list:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--evo-line); }
.evo-attr-row { padding: 12px; border: 1px solid var(--evo-line); border-radius: var(--evo-r-md, 8px); background: var(--evo-paper-1, #fff); min-width: 0; max-width: 100%; }
.evo-attr-row--new { background: rgba(0, 122, 204, 0.04); border-color: rgba(0, 122, 204, 0.25); }
.evo-attr-row__head { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: end; }
.evo-attr-row__name, .evo-attr-row__page { min-width: 0; }
.evo-attr-row__name select, .evo-attr-row__name input { width: 100%; max-width: 100%; }
.evo-attr-row__del { padding: 6px 9px; color: #b91c1c; }
.evo-attr-row__del:hover { background: rgba(220, 38, 38, 0.08); }
.evo-attr-row__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.evo-attr-row__grid > div { min-width: 0; }
.evo-attr-row__grid input, .evo-attr-row__grid select { width: 100%; max-width: 100%; }
@media (max-width: 700px) { .evo-attr-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evo-cert-pdf-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--evo-paper-2, #f7f8fa); border: 1px solid var(--evo-line); border-bottom: none; border-radius: var(--evo-r-md) var(--evo-r-md) 0 0; }
.evo-cert-pdf-wrap { border: 1px solid var(--evo-line); border-radius: 0 0 var(--evo-r-md) var(--evo-r-md); overflow: hidden; max-height: 80vh; background: #2a2a2a; padding: 12px; min-width: 0; max-width: 100%; box-sizing: border-box; }
#evo-pdf-viewer { display: block; margin: 0 auto; cursor: crosshair; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); max-width: 100%; }
.evo-cert-html-frame { width: 100%; height: 70vh; border: 1px solid var(--evo-line); border-radius: var(--evo-r-md); background: #fff; }
.evo-pdf-coords { position: absolute; padding: 4px 8px; background: #b91c1c; color: #fff; font-size: 11px; font-family: var(--evo-font-mono, monospace); border-radius: 4px; pointer-events: none; z-index: 9999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

/* ─── Users — nested scope tree (mirrors com_neo's parent_id hierarchy) ─── */
/* ─── Users form scope tree (evo-stf) ──────────────────────
   Distinct namespace from the connection-picker `.evo-scope-tree__*`
   classes (which reuse the same root name with a totally different
   row/select layout). Rendering: toolbar with selected count + bulk
   actions, then a row-per-node tree where the chevron is decoupled
   from the checkbox. */
.evo-stf {
    background: var(--evo-card);
    border: 1px solid var(--evo-line);
    border-radius: var(--evo-r-md);
    overflow: hidden;
}
.evo-stf__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--evo-paper-2);
    border-bottom: 1px solid var(--evo-line);
}
.evo-stf__count {
    font-size: 12px; color: var(--evo-ink-700);
    display: inline-flex; align-items: center; gap: 4px;
}
.evo-stf__count strong {
    color: var(--evo-brand-primary-700);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 1ch;
}
.evo-stf__count-total { color: var(--evo-ink-400); }
.evo-stf__actions { display: inline-flex; align-items: center; gap: 2px; }
.evo-stf__action {
    appearance: none; -webkit-appearance: none;
    width: 30px; height: 30px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--evo-ink-700);
    border-radius: var(--evo-r-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.evo-stf__action:hover {
    background: var(--evo-card);
    border-color: var(--evo-line);
    color: var(--evo-brand-primary-700);
}
.evo-stf__sep {
    width: 1px; height: 18px;
    background: var(--evo-line);
    margin: 0 6px;
}

.evo-stf__tree { padding: 6px 8px; }
.evo-stf__list { list-style: none; margin: 0; padding: 0; }
.evo-stf__item { margin: 0; padding: 0; }
.evo-stf__row {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px;
    border-radius: var(--evo-r-sm);
    transition: background .12s ease;
}
.evo-stf__row:hover { background: var(--evo-paper-2); }
.evo-stf__row.is-checked { background: var(--evo-brand-primary-50); }
.evo-stf__row.is-checked:hover { background: var(--evo-brand-primary-100); }

.evo-stf__chevron {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--evo-ink-500);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    padding: 0;
    transition: background .12s ease, color .12s ease;
}
.evo-stf__chevron:hover { background: var(--evo-card); color: var(--evo-ink-900); }
.evo-stf__chevron > i { transition: transform .15s ease; line-height: 1; display: inline-block; }
.evo-stf__chevron[aria-expanded="true"] > i { transform: rotate(90deg); }
.evo-stf__chevron--leaf {
    cursor: default;
    pointer-events: none;
    background: transparent;
}
.evo-stf__chevron--leaf:hover { background: transparent; }

.evo-stf__label {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px;
}
.evo-stf__label input[type="checkbox"] { flex-shrink: 0; }
.evo-stf__label-text {
    font-size: 13px;
    color: var(--evo-ink-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evo-stf__row.is-checked .evo-stf__label-text {
    color: var(--evo-ink-900);
    font-weight: 500;
}

.evo-stf__children {
    margin-left: 18px;
    padding-left: 12px;
    border-left: 1px dashed var(--evo-line);
}
.evo-stf__children[hidden] { display: none; }

/* ─── Users wizard — 3-tab single-page form (mirrors com_neo) ─── */
.evo-user-form {
    background: var(--evo-card);
    border-radius: var(--evo-r-lg);
    border: 1px solid var(--evo-line);
    box-shadow: var(--evo-sh-sm);
    overflow: hidden;
}
.evo-user-tabs {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 30px 56px 26px;
    background: var(--evo-card);
    border-bottom: 1px solid var(--evo-line);
}
.evo-user-tabs__tab {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--evo-ink-500);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    position: relative;
    transition: color .15s ease;
}
.evo-user-tabs__tab:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--evo-line);
    z-index: 0;
    transition: background .2s ease;
}
.evo-user-tabs__tab.is-done::after { background: var(--evo-brand-primary); }
.evo-user-tabs__tab:hover:not(.is-active):not(.is-done) { color: var(--evo-ink-800); }
.evo-user-tabs__tab:hover:not(.is-active):not(.is-done) .evo-user-tabs__num { border-color: var(--evo-ink-400); }

.evo-user-tabs__num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--evo-card);
    border: 2px solid var(--evo-line);
    color: var(--evo-ink-500);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.evo-user-tabs__tab.is-active {
    color: var(--evo-ink-900);
    font-weight: 600;
}
.evo-user-tabs__tab.is-active .evo-user-tabs__num {
    background: var(--evo-brand-primary);
    border-color: var(--evo-brand-primary);
    color: var(--evo-brand-primary-ink);
    box-shadow: 0 0 0 4px var(--evo-brand-primary-50);
}
.evo-user-tabs__tab.is-done { color: var(--evo-ink-700); }
.evo-user-tabs__tab.is-done .evo-user-tabs__num {
    background: var(--evo-brand-primary);
    border-color: var(--evo-brand-primary);
    color: transparent;
}
.evo-user-tabs__tab.is-done .evo-user-tabs__num::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 6px;
    margin: -5px 0 0 -7px;
    border-left: 2px solid var(--evo-brand-primary-ink);
    border-bottom: 2px solid var(--evo-brand-primary-ink);
    transform: rotate(-45deg);
}

.evo-user-tabs__panel { display: none; padding: 36px 48px 32px; }
.evo-user-tabs__panel.is-active { display: block; }
.evo-user-tabs__panel > h3,
.evo-user-tabs__panel > h4 {
    margin: 0 0 18px;
    color: var(--evo-ink-900);
}
.evo-user-tabs__panel > h4 { margin-top: 28px; }
.evo-user-tabs__panel .evo-filter-grid { row-gap: 18px; }
.evo-user-tabs__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--evo-line);
}

@media (max-width: 720px) {
    .evo-user-tabs { padding: 22px 16px 18px; }
    .evo-user-tabs__tab { font-size: 11.5px; gap: 8px; }
    .evo-user-tabs__num { width: 32px; height: 32px; font-size: 13px; }
    .evo-user-tabs__tab:not(:last-child)::after { top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); }
    .evo-user-tabs__panel { padding: 22px 18px; }
}

/* ─── Drag & drop file zone — wrappe un <input type="file"> hidden.
   Cliquer sur la zone ouvre le picker natif ; drag&drop injecte le
   fichier dans input.files via JS (media/com_evo/js/dropzone.js). */
.evo-dropzone {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border: 2px dashed var(--evo-line);
    border-radius: 10px;
    background: var(--evo-paper-2);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    margin: 0;
}
.evo-dropzone:hover {
    border-color: var(--evo-ink-500);
    background: var(--evo-paper-3);
}
.evo-dropzone.is-dragover {
    border-color: var(--evo-emerald-500);
    background: var(--evo-emerald-50);
}
.evo-dropzone.is-filled {
    border-style: solid;
    border-color: var(--evo-emerald-500);
    background: var(--evo-emerald-50);
}
.evo-dropzone__icon {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: var(--evo-ink-400);
    transition: color .15s;
}
.evo-dropzone.is-dragover .evo-dropzone__icon,
.evo-dropzone.is-filled .evo-dropzone__icon {
    color: var(--evo-emerald-600);
}
.evo-dropzone__text {
    flex: 1 1 auto;
    min-width: 0;
}
.evo-dropzone__text strong {
    display: block;
    font-size: 13px;
    color: var(--evo-ink-900);
    margin-bottom: 2px;
}
.evo-dropzone__hint {
    font-size: 12px;
    color: var(--evo-ink-500);
}
.evo-dropzone__filename {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid var(--evo-emerald-200, #a7f3d0);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--evo-emerald-700);
    max-width: 280px;
}
.evo-dropzone__filename span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Scopes filter toolbar — meta-count à gauche + segctl à droite. */
.evo-scopes-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--evo-line);
    background: var(--evo-card, #fff);
}
.evo-scopes-toolbar__meta {
    display: flex; align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--evo-ink-600);
    min-width: 0;
}
.evo-scopes-toolbar__meta > i {
    font-size: 14px;
    color: var(--evo-ink-400);
    margin-right: 2px;
}
.evo-scopes-toolbar__count {
    display: inline-flex; align-items: baseline; gap: 5px;
    white-space: nowrap;
}
.evo-scopes-toolbar__count strong {
    font-size: 14px; font-weight: 700;
    color: var(--evo-ink-900);
    font-variant-numeric: tabular-nums;
}
.evo-scopes-toolbar__count--muted { color: var(--evo-ink-400); }
.evo-scopes-toolbar__count--muted strong { color: var(--evo-ink-700); font-weight: 600; }
.evo-scopes-toolbar__sep {
    color: var(--evo-ink-300);
    font-size: 12px;
    user-select: none;
}
@media (max-width: 640px) {
    .evo-scopes-toolbar {
        flex-direction: column; align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }
    .evo-scopes-toolbar__meta { justify-content: flex-start; }
}

/* Segctl override dédié à la toolbar scopes — boutons espacés, états
   colorés (vert pour Actifs, sombre pour Tous), petit dot indicateur
   sur Actifs pour signifier visuellement le statut on/off. */
.evo-scopes-toolbar .evo-segctl {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0;
}
.evo-scopes-toolbar .evo-segctl__tabs {
    gap: 10px;
}
.evo-scopes-toolbar .evo-segctl__tab {
    display: inline-flex; align-items: center;
    padding: 8px 18px;
    border: 1px solid var(--evo-line);
    border-radius: 8px;
    background: var(--evo-paper-2);
    color: var(--evo-ink-600);
    font-size: 13px; font-weight: 500;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.evo-scopes-toolbar .evo-segctl__tab:hover {
    background: var(--evo-paper-3, #eef0f3);
    color: var(--evo-ink-900);
    border-color: var(--evo-ink-300, #c0c0c0);
}
/* Dot indicateur sur « Actifs » — gris quand off, vert plein quand on. */
.evo-scopes-toolbar .evo-segctl__tab[data-filter="active"]::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--evo-ink-300, #c0c0c0);
    transition: background .15s, box-shadow .15s;
}
/* État actif — « Actifs » : palette verte. */
.evo-scopes-toolbar .evo-segctl__tab[data-filter="active"].evo-segctl__tab--active,
.evo-scopes-toolbar .evo-segctl__tab[data-filter="active"][aria-selected="true"] {
    background: var(--evo-emerald-50);
    color: var(--evo-emerald-700);
    border-color: var(--evo-emerald-500);
    box-shadow: 0 1px 2px rgba(16,185,129,.18), 0 0 0 3px rgba(16,185,129,.08);
    font-weight: 600;
}
.evo-scopes-toolbar .evo-segctl__tab[data-filter="active"].evo-segctl__tab--active::before,
.evo-scopes-toolbar .evo-segctl__tab[data-filter="active"][aria-selected="true"]::before {
    background: var(--evo-emerald-500);
    box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}
/* État actif — « Tous » : palette sombre pour différencier de « Actifs ». */
.evo-scopes-toolbar .evo-segctl__tab[data-filter="all"].evo-segctl__tab--active,
.evo-scopes-toolbar .evo-segctl__tab[data-filter="all"][aria-selected="true"] {
    background: var(--evo-ink-900, #222);
    color: #fff;
    border-color: var(--evo-ink-900, #222);
    box-shadow: 0 1px 2px rgba(34,34,35,.20), 0 0 0 3px rgba(34,34,35,.06);
    font-weight: 600;
}

/* ─── Scopes tree list (mirrors com_neo's lazy-loaded tree) ─── */
.evo-sc-tree { list-style: none; margin: 0; padding: 0; }
.evo-sc-tree .evo-sc-tree { margin-left: 22px; padding-left: 8px; border-left: 1px dashed var(--evo-line); }
.evo-sc-item { padding: 0; }
.evo-sc-item.is-hidden { display: none; }
.evo-sc-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--evo-line); transition: background .1s; }
.evo-sc-row:hover { background: var(--evo-paper-2, #f7f8fa); }
.evo-sc-toggle { background: transparent; border: 0; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--evo-ink-400); cursor: default; flex-shrink: 0; }
.evo-sc-toggle.has-children { cursor: pointer; transition: transform .12s; }
.evo-sc-toggle.has-children:hover { color: var(--evo-ink-800); }
.evo-sc-toggle.is-open { transform: rotate(90deg); }
.evo-sc-leaf { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--evo-ink-300, #c0c0c0); }
.evo-sc-label { flex: 1; font-size: 14px; color: var(--evo-ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-sc-item.is-inactive .evo-sc-label { color: var(--evo-ink-400); text-decoration: line-through; }
.evo-sc-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(220, 38, 38, 0.1); color: #b91c1c; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.evo-sc-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.evo-sc-row:hover .evo-sc-actions { opacity: 1; }
.evo-sc-filter.is-active { background: var(--evo-accent, #007bff); color: #fff; }
.evo-sc-loader { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
/* `display: flex` above outranks the user-agent rule for [hidden]; restore it explicitly. */
.evo-sc-loader[hidden] { display: none !important; }

/* ─── Scope form — IP allowlist rows (admin) ─── */
.evo-sc-ips { display: flex; flex-direction: column; gap: 8px; }
.evo-sc-ip-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: stretch; }
.evo-sc-ip-buttons { display: flex; gap: 4px; }
/* The IP inputs and the product search box live outside a `.evo-filter-cell`,
   so the global `.evo-input--sm { max-width:140px }` cap (line 124) keeps them
   tiny. Let them fill their container/grid track instead. */
.evo-sc-ip-row .evo-input--sm,
#evo-sc-prod-search.evo-input--sm { width: 100%; max-width: 100%; box-sizing: border-box; }
.evo-sc-prod-table input[type="date"] { font-size: 12px; padding: 4px 6px; }

/* ─── Product detail — addons strip ─── */
.evo-addon-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }

/* ─── Joomla <joomla-alert> reskin (Joomla 4 flash messages) ───
   The vendor file at media/vendor/joomla-custom-elements/css/joomla-alert.css
   ships defaults via `--jui-alert-*` CSS variables and rules that target the
   close button with `position:relative; float:right`. We override both:
   1) the brand-color variables (clean way the vendor expects)
   2) layout/positioning with !important since the vendor cascade lands later. */
joomla-alert[role="alert"] {
    /* Vendor variables — color overrides per type */
    --jui-alert-success-color:            #14532d;
    --jui-alert-success-background-color: #ecfdf5;
    --jui-alert-success-border-color:     #10b981;
    --jui-alert-success-link-color:       #047857;

    --jui-alert-info-color:               #064e3b;
    --jui-alert-info-background-color:    #ecfdf5;
    --jui-alert-info-border-color:        #047857;
    --jui-alert-info-link-color:          #047857;

    --jui-alert-warning-color:            #7c2d12;
    --jui-alert-warning-background-color: #fffbeb;
    --jui-alert-warning-border-color:     #d97706;
    --jui-alert-warning-link-color:       #b45309;

    --jui-alert-danger-color:             #7f1d1d;
    --jui-alert-danger-background-color:  #fef2f2;
    --jui-alert-danger-border-color:      #dc2626;
    --jui-alert-danger-link-color:        #b91c1c;

    /* Geometry — must beat vendor !important: */
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    z-index: 1100 !important;
    max-width: 420px !important;
    min-width: 280px !important;
    margin: 0 0 10px !important;
    padding: 13px 44px 13px 48px !important;
    border: 1px solid transparent !important;
    border-left: 4px solid currentColor !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06) !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    animation: evo-alert-slide-in .22s ease-out both !important;
}

/* Coloured icon dot — rendered via ::before on the alert itself so we
   don't fight the heading element's various default rules.
   ⚠ Background MUST be a literal color (not `currentColor`), because
   `currentColor` inside a ::before resolves to the ::before's own
   `color` (which we set to white), making the dot invisible. */
joomla-alert[role="alert"]::before {
    content: "i";
    position: absolute;
    top: 13px;
    left: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #6b7280;            /* fallback grey if type missing */
    color: #fff !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px !important;
    text-align: center;
    font-style: normal;
    box-sizing: border-box;
}
joomla-alert[role="alert"][type="success"]::before { content: "\2713"; background: #10b981; }
joomla-alert[role="alert"][type="info"]::before,
joomla-alert[role="alert"][type="notice"]::before  { content: "i";    background: #047857; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
joomla-alert[role="alert"][type="warning"]::before { content: "!";    background: #d97706; }
joomla-alert[role="alert"][type="danger"]::before,
joomla-alert[role="alert"][type="error"]::before   { content: "\2715"; background: #dc2626; }

/* Hide the heading spans the vendor markup emits — we use the dot above instead. */
joomla-alert[role="alert"] .alert-heading { display: none !important; }
joomla-alert[role="alert"] .visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* Message body */
joomla-alert[role="alert"] .alert-wrapper { display: block !important; }
joomla-alert[role="alert"] .alert-message {
    margin: 0 !important;
    color: inherit !important;
    font-weight: 500;
    word-wrap: break-word;
}
joomla-alert[role="alert"] .alert-message:not(:first-child) { margin-top: 4px !important; }
joomla-alert[role="alert"] .alert-link,
joomla-alert[role="alert"] .alert-message a { color: inherit !important; text-decoration: underline; }

/* Close button — vendor sets `position:relative; float:right; top:-.5rem`.
   We pin it absolute top-right and reset the float. */
joomla-alert[role="alert"] .joomla-alert--close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    float: none !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(0, 0, 0, .35) !important;
    text-shadow: none !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
joomla-alert[role="alert"] .joomla-alert--close:hover,
joomla-alert[role="alert"] .joomla-alert--close:focus {
    background: rgba(0, 0, 0, .06) !important;
    color: rgba(0, 0, 0, .7) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* When several flash messages stack, give them air. */
joomla-alert[role="alert"] + joomla-alert[role="alert"] { top: auto !important; position: relative !important; }

@keyframes evo-alert-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    joomla-alert[role="alert"] {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        max-width: none !important;
    }
}