/* =========================================================================
   theme.css — Kit de style « Suite QVCT » (design soft UI Centauri, palette Serene Blue)

   SOURCE : Demo_QVCT/css/styles.css, extrait tel que RENDU (valeurs mesurées dans
   le navigateur, pas seulement lues dans le code). Aucune valeur n'a été inventée.
   Guide complet : STYLE-GUIDE.md · Catalogue visuel : style-preview.html

   COMMENT S'EN SERVIR
   1. <link rel="stylesheet" href="theme.css"> — et rien d'autre pour l'apparence.
   2. Choisir les classes selon le RÔLE de l'élément (tableau du STYLE-GUIDE).
   3. Ne jamais écrire de couleur, police, arrondi ou ombre dans une page : si un
      besoin manque, on l'ajoute ICI, sous un nom de rôle, pas localement.

   ORGANISATION
   1. Palette brute        — les valeurs. Jamais utilisées directement par un composant.
   2. Variables de RÔLE    — une variable par rôle (page, carte, champ, bouton…), même
                             quand deux rôles ont aujourd'hui la même couleur : changer un
                             rôle ne change pas l'autre.
   3. Base + coque         — page, barre latérale, bandeau, pied de page.
   4. Composants           — boutons, badges, cartes, champs, tableaux, menus, tiroirs…
   5. Compositions         — assemblages récurrents du modèle (carte d'action, verbatim…).
   6. Adaptatif / mouvement réduit.

   COMPORTEMENTS : theme.js (JavaScript classique, sans dépendance) remplace tout <select>, <input type="date |
   datetime-local | time | month | week | number | range | color | file"> par un composant maison. Jamais de rendu natif.
   Cases à cocher et boutons radio : habillés en CSS seul (voir .check).

   DÉPENDANCES (non embarquées) : police Inter 400/500/600/700 (Google Fonts, voir
   STYLE-GUIDE.md §Polices) ; icônes = SVG en ligne (trait 1.6–2, currentColor).
   ========================================================================= */

:root {
  /* ======================= 1. PALETTE BRUTE ======================= */
  --palette-dusk-blue: #274c77;
  --palette-steel-blue: #6096ba;
  --palette-icy-blue: #a3cef1;
  --palette-grey-olive: #8b8c89;

  --palette-ink: #16232f;
  --palette-slate: #55636d;
  --palette-slate-dim: #5e6a74;   /* 4,67:1 sur #e3edf5 — ne pas éclaircir (lisibilité) */
  --palette-white: #ffffff;
  --palette-mist: #f4f8fb;
  --palette-sky-wash: #e3edf5;
  --palette-line: hsl(206 32% 85%);
  --palette-cyan-ink: #2f6690;

  --palette-ok: #1e7a42;
  --palette-warn: #a6690a;
  --palette-danger: #c0392b;

  --palette-chart-orange: #f26419;
  --palette-chart-yellow: #f6ae2d;
  --palette-chart-green: #55a630;
  --palette-chart-magenta: #d90368;
  --palette-chart-purple: #7209b7;
  --palette-chart-turquoise: #06d6a0;

  --palette-shadow-dark: #c1c9d8;
  --palette-shadow-light: #ffffff;

  /* ======================= 2. VARIABLES DE RÔLE ======================= */

  /* ---- Texte ---- */
  --text-primary: var(--palette-ink);          /* texte courant, titres */
  --text-secondary: var(--palette-slate);      /* descriptions, valeurs secondaires */
  --text-tertiary: var(--palette-slate-dim);   /* surtitres, légendes, mentions, en-têtes de tableau */
  --text-accent: var(--palette-cyan-ink);      /* élément actif, action « lien », détail mis en avant */
  --text-brand: var(--palette-dusk-blue);      /* nom de marque */
  --text-on-accent: #ffffff;                   /* texte sur fond --accent */
  --text-on-dark: #ffffff;                     /* texte du toast */

  /* ---- Accent (action principale) ---- */
  --accent: var(--palette-dusk-blue);
  --accent-soft: color-mix(in oklab, var(--palette-icy-blue) 42%, white);
  --accent-2: var(--palette-steel-blue);       /* courbe de tendance secondaire */
  --focus-ring: var(--palette-cyan-ink);       /* anneau de focus clavier (2px) */
  --focus-halo: var(--accent-soft);            /* halo de focus d'un champ (3px) */

  /* ---- Statuts ---- */
  --status-ok: var(--palette-ok);
  --status-ok-soft: color-mix(in oklab, #55a630 16%, white);
  --status-warn: var(--palette-warn);
  --status-warn-soft: color-mix(in oklab, #f6ae2d 20%, white);
  --status-danger: var(--palette-danger);
  --status-danger-soft: color-mix(in oklab, #d90368 12%, white);

  /* ---- Surfaces (un rôle = une variable) ---- */
  --surface-page: var(--palette-white);              /* fond de la page (body) */
  --surface-shell: transparent;                      /* coque .app-shell : AUCUN fond propre */
  --surface-card: var(--palette-mist);               /* carte standard, tableau, encart, filtres, pied de page */
  --surface-card-footer: var(--palette-mist);        /* barre de pied de page */
  --surface-well: var(--palette-sky-wash);           /* zone « creusée » : chiffre clé, graphique, état vide */
  --surface-control: var(--palette-sky-wash);        /* champ, liste déroulante, déclencheur */
  --surface-raised: var(--palette-white);            /* commande en relief : puce, bouton icône, onglet actif */
  --surface-sidebar: var(--palette-white);           /* barre latérale (bureau) */
  --surface-sidebar-mobile: var(--palette-sky-wash); /* barre latérale ouverte (mobile ≤1080px) */
  --surface-workspace-card: var(--palette-white);    /* carte « espace de travail » de la barre */
  --surface-nav-hover: var(--palette-white);         /* ligne de menu survolée */
  --surface-nav-active: var(--palette-white);        /* ligne de menu active (creusée) */
  --surface-popover: var(--palette-white);           /* popover de filtres */
  --surface-menu: var(--palette-white);              /* menu déroulant */
  --surface-menu-option-hover: var(--palette-sky-wash); /* option de menu survolée */
  --surface-drawer: var(--palette-white);            /* tiroir latéral et fenêtre modale */
  --surface-table-head: var(--palette-sky-wash);     /* en-tête de tableau */
  --surface-row-hover: var(--palette-sky-wash);      /* ligne de tableau cliquable survolée */
  --surface-track: var(--palette-sky-wash);          /* piste de barre de progression */
  --surface-tab-track: var(--palette-sky-wash);      /* rail des onglets */
  --surface-tab-active: var(--palette-white);        /* onglet actif */
  --surface-avatar-photo: var(--palette-sky-wash);   /* fond derrière une photo d'avatar */
  --surface-topbar: color-mix(in oklab, var(--palette-white) 88%, transparent);
  --surface-toast: var(--palette-ink);
  --surface-scrim: rgba(22, 35, 47, 0.32);           /* voile derrière tiroir / modale */
  --surface-scrim-nav: rgba(22, 35, 47, 0.35);       /* voile derrière le menu mobile */

  /* ---- Traits fins (aucune bordure de composant : seulement des filets) ---- */
  --hairline: var(--palette-line);            /* filet entre lignes, séparateur de pied de page */
  --chart-grid-line: var(--palette-line);     /* quadrillage de graphique */
  --scrollbar-thumb: var(--palette-line);

  /* ---- Boutons ---- */
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-image: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white), transparent 65%);
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: var(--accent-soft);
  --btn-secondary-bg-hover: color-mix(in oklab, var(--palette-icy-blue) 66%, white);
  --btn-secondary-fg: var(--palette-cyan-ink);
  --btn-tertiary-bg: var(--palette-sky-wash);
  --btn-tertiary-fg: var(--palette-ink);
  --btn-icon-bg: var(--palette-white);
  --btn-icon-fg: var(--palette-ink);
  --btn-collapse-bg: var(--palette-sky-wash);
  --btn-collapse-fg: var(--palette-slate-dim);
  --btn-nav-toggle-bg: var(--palette-white);
  --btn-min-height: 40px;
  --btn-disabled-opacity: 0.5;

  /* ---- Puces de filtre ---- */
  --chip-bg: var(--palette-white);
  --chip-fg: var(--palette-slate);
  --chip-active-bg: var(--accent);
  --chip-active-fg: #ffffff;
  --chip-disabled-opacity: 0.55;
  --filter-trigger-bg: var(--palette-white);
  --filter-trigger-active-bg: var(--accent-soft);

  /* ---- Sélecteur de date (composant ajouté ; aucune couleur nouvelle) ---- */
  --datepicker-toggle-fg: var(--palette-slate-dim);
  --datepicker-day-hover-bg: var(--palette-sky-wash);
  --datepicker-outside-fg: var(--palette-slate-dim);
  --datepicker-today-ring: var(--accent);
  --datepicker-selected-bg: var(--accent);
  --datepicker-selected-fg: #ffffff;
  --datepicker-week-bg: var(--accent-soft);
  --datepicker-week-fg: var(--palette-cyan-ink);
  --check-bg: var(--palette-sky-wash);           /* case à cocher (liste multiple) */
  --check-active-bg: var(--accent);
  --check-active-fg: #ffffff;
  --check-disabled-opacity: 0.65;                /* plus haut que les boutons : la case creusée reste lisible */

  /* ---- Champ numérique, curseur, couleur, fichier (composants ajoutés ; aucune couleur nouvelle) ---- */
  --numberfield-step-bg: var(--palette-white);
  --numberfield-step-fg: var(--palette-ink);
  --slider-track-bg: var(--palette-sky-wash);
  --slider-fill: var(--accent);
  --slider-thumb-bg: var(--palette-white);
  --swatch-ring: inset 0 0 0 1.5px rgba(22, 35, 47, 0.18);      /* liseré d'une pastille de couleur */
  --colorpicker-thumb-ring: var(--palette-white);
  --colorpicker-thumb-shadow: 0 1px 5px rgba(22, 35, 47, 0.45);
  --colorpicker-black: #000000;                                  /* le modèle de couleur lui-même : noir et blanc */
  --colorpicker-white: #ffffff;                                  /* du dégradé saturation / luminosité */
  --file-item-bg: var(--palette-white);
  --file-item-fg: var(--palette-ink);

  /* ---- Badges, pastilles, variations ---- */
  --badge-bg: var(--palette-sky-wash);
  --badge-fg: var(--palette-slate);
  --badge-subtle-fg: var(--palette-slate-dim);
  --badge-accent-bg: var(--accent-soft);
  --badge-accent-fg: var(--palette-cyan-ink);
  --badge-ok-bg: var(--status-ok-soft);
  --badge-ok-fg: color-mix(in oklab, var(--status-ok) 78%, var(--text-primary));
  --badge-warn-bg: var(--status-warn-soft);
  --badge-warn-fg: color-mix(in oklab, var(--status-warn) 80%, var(--text-primary));
  --badge-danger-bg: var(--status-danger-soft);
  --badge-danger-fg: color-mix(in oklab, var(--status-danger) 76%, var(--text-primary));
  --badge-ai-bg: linear-gradient(120deg, color-mix(in oklab, var(--palette-chart-purple) 16%, white), var(--accent-soft));
  --badge-ai-ring: color-mix(in oklab, var(--palette-chart-purple) 20%, var(--hairline));
  --score-ok-bg: var(--status-ok-soft);
  --score-ok-fg: color-mix(in oklab, var(--status-ok) 80%, var(--text-primary));
  --score-warn-bg: var(--status-warn-soft);
  --score-warn-fg: color-mix(in oklab, var(--status-warn) 80%, var(--text-primary));
  --score-danger-bg: var(--status-danger-soft);
  --score-danger-fg: color-mix(in oklab, var(--status-danger) 80%, var(--text-primary));
  --delta-up-fg: color-mix(in oklab, var(--status-ok) 75%, var(--text-primary));
  --delta-down-fg: color-mix(in oklab, var(--status-danger) 72%, var(--text-primary));
  --delta-flat-fg: var(--palette-slate-dim);
  --sentiment-positive: var(--palette-chart-green);
  --sentiment-negative: var(--palette-chart-magenta);
  --sentiment-neutral: var(--palette-grey-olive);

  /* ---- Barres de progression (palette de graphique, PAS les couleurs de statut) ---- */
  --progress-fill: var(--accent);
  --progress-fill-ok: var(--palette-chart-green);
  --progress-fill-warn: var(--palette-chart-yellow);
  --progress-fill-danger: var(--palette-chart-magenta);

  /* ---- Graphiques : une couleur par série (ordre du modèle) ---- */
  --chart-1: var(--palette-chart-turquoise);
  --chart-2: var(--palette-chart-orange);
  --chart-3: var(--palette-chart-magenta);
  --chart-4: var(--palette-chart-green);
  --chart-5: var(--palette-chart-purple);
  --chart-6: var(--palette-chart-yellow);

  /* ---- Ombres (effet « soft UI » : deux ombres, une sombre, une claire) ---- */
  --shadow-dark: var(--palette-shadow-dark);
  --shadow-light: var(--palette-shadow-light);
  --shadow-raised: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);                 /* barre latérale */
  --shadow-control: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);                /* commande au repos */
  --shadow-control-hover: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);          /* commande survolée */
  --shadow-overlay: 7px 7px 14px color-mix(in oklab, var(--shadow-dark) 85%, #a9b4c6), -7px -7px 14px var(--shadow-light); /* popover, menu */
  --shadow-inset: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);      /* creusé : champ, chiffre clé */
  --shadow-flat: none;                                                                                 /* carte standard */
  --shadow-drawer: -20px 0 44px -20px rgba(22, 35, 47, 0.35);
  --shadow-toast: 0 12px 28px -8px rgba(22, 35, 47, 0.4);
  --shadow-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(47, 102, 144, 0.25), 0 4px 8px -2px rgba(47, 102, 144, 0.3);
  --ring-glass: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65);   /* liseré clair d'une pastille (logo) */
  --ring-glass-strong: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);

  /* ---- Arrondis, par rôle ---- */
  --radius-panel: 24px;          /* barre latérale, popover, fenêtre modale */
  --radius-card: 18px;           /* carte standard, chiffre clé, tableau, encart, pied de page */
  --radius-card-compact: 11px;   /* carte compacte, cadre de graphique, menu déroulant */
  --radius-button: 12px;         /* bouton standard */
  --radius-button-sm: 10px;      /* petit bouton, bouton icône */
  --radius-button-icon-sm: 8px;  /* bouton icône compact, bouton replier */
  --radius-control: 10px;        /* champ, liste, déclencheur, recherche */
  --radius-nav-item: 12px;       /* ligne de menu, rail d'onglets */
  --radius-tab: 9px;             /* onglet, déclencheur de filtre */
  --radius-menu-option: 8px;     /* option de menu déroulant */
  --radius-toast: 14px;
  --radius-pill: 999px;          /* badge, puce, pastille */
  --radius-round: 50%;           /* avatar, pastille de logo, point */

  /* ---- Typographie ---- */
  --font-body: Aptos, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-size-body: 14.5px;
  --line-height-body: 1.55;

  /* ---- Mise en page ---- */
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 62px;
  --rail-item: 38px;
  --topbar-h: 58px;
  --gutter: 14px;                /* marge de la coque et écart barre latérale / contenu */
  --grid-gap: 18px;              /* écart entre cartes d'une grille */
  --card-padding: 20px;
  --card-compact-padding: 16px;
  --content-max: 2200px;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ======================= 3. BASE ======================= */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Écran QHD / très large : on zoome toute la page (texte, cartes, espacements
   ensemble) plutôt que de laisser une mise en page standard flotter. */
@media (min-width: 2000px) {
  body { zoom: 1.15; }
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); }
h1 { font-family: var(--font-heading); font-size: clamp(1.75rem, 2.2vw, 2rem); }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 0.98rem; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button { font-family: inherit; }

/* Focus clavier homogène pour tout contrôle. */
:where(button, a[href], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px;
}
/* La zone de contenu reçoit le focus à chaque changement de page : pas d'anneau
   quand l'arrivée n'est pas au clavier. */
.content:focus:not(:focus-visible) { outline: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid var(--surface-page); }

/* ======================= 3b. COQUE D'APPLICATION ======================= */
/* Barre latérale « flottante » fixe + contenu. La coque n'a AUCUN fond : le blanc de
   la page suffit. Le bleuté (--surface-well) est réservé aux composants. */

.app-shell { display: flex; align-items: flex-start; gap: var(--gutter); min-height: 100vh; padding: var(--gutter); background: var(--surface-shell); }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 16px;
  position: fixed; top: var(--gutter); left: var(--gutter); z-index: 40;
  height: calc(100vh - (var(--gutter) * 2)); overflow: hidden;
  background: var(--surface-sidebar); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised);
  transition: width 0.22s var(--ease-soft), padding 0.22s var(--ease-soft);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; max-width: 200px; opacity: 1; overflow: hidden; transition: max-width 0.22s var(--ease-soft), opacity 0.15s ease 0.08s; }
.brand-name { font-family: var(--font-body); font-size: 0.94rem; font-weight: 600; color: var(--text-brand); white-space: nowrap; }
.brand-sub { font-size: 0.66rem; color: var(--text-tertiary); white-space: nowrap; }
.btn-sidebar-collapse {
  width: 26px; height: 26px; border-radius: var(--radius-button-icon-sm); flex-shrink: 0; border: none; cursor: pointer;
  background: var(--btn-collapse-bg); color: var(--btn-collapse-fg); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset); transition: transform 0.22s var(--ease-soft), color 0.15s ease;
}
.btn-sidebar-collapse:hover { color: var(--text-accent); }
.btn-sidebar-collapse svg { width: 13px; height: 13px; transition: transform 0.22s var(--ease-soft); }
.app-shell.sidebar-collapsed .btn-sidebar-collapse svg { transform: rotate(180deg); }
.btn-expand-sidebar {
  display: none; width: 100%; height: 30px; border-radius: 9px; border: none; cursor: pointer;
  background: var(--btn-collapse-bg); color: var(--btn-collapse-fg); align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset); margin-top: -4px;
}
.btn-expand-sidebar svg { width: 13px; height: 13px; }

.workspace-card {
  border-radius: var(--radius-card); padding: 11px 13px 11px 11px;
  background: var(--surface-workspace-card); box-shadow: var(--shadow-control);
  display: flex; align-items: center; gap: 9px; overflow: hidden;
  transition: padding 0.22s var(--ease-soft), gap 0.22s var(--ease-soft), background 0.22s var(--ease-soft), box-shadow 0.22s var(--ease-soft);
}
.workspace-card > div, .sidebar-foot > div {
  min-width: 0; max-width: 200px; opacity: 1; overflow: hidden;
  transition: max-width 0.22s var(--ease-soft), opacity 0.15s ease 0.08s;
}
.workspace-card .company-mark {
  width: 26px; height: 26px; border-radius: var(--radius-round); flex-shrink: 0; overflow: hidden;
  background: var(--accent-soft); color: var(--text-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.72rem;
  box-shadow: var(--ring-glass);
}
.workspace-card .company-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-round); }
.workspace-card b { display: block; font-size: 0.8rem; font-weight: 600; }
.workspace-card small { display: block; font-size: 0.68rem; color: var(--text-secondary); margin-top: 1px; }

.sidebar-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 16px;
  margin: 0 -14px; padding: 0 14px;
}
.nav-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin: 2px 6px 6px;
  max-width: 200px; opacity: 1; overflow: hidden;
  transition: max-width 0.22s var(--ease-soft), opacity 0.15s ease 0.08s, margin 0.22s var(--ease-soft);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-nav-item);
  background: transparent; color: var(--text-primary);
  cursor: pointer; text-align: left; border: none; width: 100%; overflow: hidden; min-width: 0;
  transition: box-shadow 0.2s var(--ease-soft), background 0.15s ease, color 0.15s ease,
    width 0.22s var(--ease-soft), padding 0.22s var(--ease-soft), gap 0.22s var(--ease-soft);
}
.nav-item:hover { background: var(--surface-nav-hover); box-shadow: var(--shadow-control); }
.nav-item .nav-ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-tertiary); display: inline-flex; }
.nav-item .nav-ic svg { width: 100%; height: 100%; }
/* Libellé sur UNE ligne, tronqué par « … » (jamais replié). */
.nav-item .nav-txt {
  flex: 1; font-size: 0.85rem; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  max-width: 200px; opacity: 1; transition: max-width 0.22s var(--ease-soft), opacity 0.15s ease 0.08s;
}
.nav-item.is-active {
  background: var(--surface-nav-active); box-shadow: var(--shadow-inset); color: var(--text-accent); font-weight: 600;
}
.nav-item.is-active .nav-ic { color: var(--accent); }

/* Pied de barre latérale : toujours ancré en bas, jamais dans la zone qui défile. */
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; flex-shrink: 0; }
.sidebar-foot b { display: block; font-size: 0.76rem; font-weight: 600; }
.sidebar-foot small { display: block; font-size: 0.66rem; color: var(--text-tertiary); }
.avatar {
  width: 28px; height: 28px; border-radius: var(--radius-round); flex-shrink: 0;
  background: var(--accent); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; box-shadow: var(--shadow-control);
  overflow: hidden;
}
.avatar-photo { width: 40px; height: 40px; background: var(--surface-avatar-photo); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 2000px) {
  /* Compense le zoom 1.15 du body pour un élément position:fixed. Doit rester
     APRÈS la règle .sidebar de base (même spécificité : c'est l'ordre qui tranche). */
  .sidebar {
    top: calc(var(--gutter) / 1.15); left: calc(var(--gutter) / 1.15);
    height: calc((100vh - (var(--gutter) * 2)) / 1.15);
  }
}

@media (min-width: 1081px) {
  /* La barre latérale est hors flux (position: fixed) : .main-col lui réserve sa place.
     Deux gouttières (marge de la coque + écart barre/contenu) = 2 × --gutter.
     Dans le modèle, la 2e gouttière venait d'un <div class="sidebar-scrim"> vide qui
     déclenchait le gap du flex ; ici elle est explicite, donc le rendu (contenu à
     x = 294px à 1440px de large) ne dépend plus de la présence de cet élément. */
  .app-shell { gap: 0; }
  .main-col { margin-left: calc(var(--sidebar-w) + var(--gutter) * 2); transition: margin-left 0.22s var(--ease-soft); }
  .app-shell.sidebar-collapsed .main-col { margin-left: calc(var(--sidebar-w-collapsed) + var(--gutter) * 2); }
  .app-shell.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); padding-left: 12px; padding-right: 12px; }
  .app-shell.sidebar-collapsed .brand { display: none; }
  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-item .nav-txt,
  .app-shell.sidebar-collapsed .workspace-card > div,
  .app-shell.sidebar-collapsed .sidebar-foot > div {
    max-width: 0; opacity: 0; margin: 0; pointer-events: none;
    transition: max-width 0.18s var(--ease-soft), opacity 0.1s ease;
  }
  .app-shell.sidebar-collapsed .workspace-card,
  .app-shell.sidebar-collapsed .nav-item,
  .app-shell.sidebar-collapsed .sidebar-foot {
    width: var(--rail-item); height: var(--rail-item);
    margin-left: auto; margin-right: auto;
    padding: 0; gap: 0; justify-content: center;
  }
  .app-shell.sidebar-collapsed .workspace-card { background: none; box-shadow: none; border-radius: var(--radius-nav-item); }
  .app-shell.sidebar-collapsed .company-mark,
  .app-shell.sidebar-collapsed .avatar { width: 32px; height: 32px; font-size: 0.7rem; }
  .app-shell.sidebar-collapsed .btn-expand-sidebar {
    display: flex; width: var(--rail-item); margin-left: auto; margin-right: auto;
  }
}

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gutter); }
/* Voile derrière le menu mobile : n'existe qu'en dessous de 1080px (voir bloc adaptatif). */
.sidebar-scrim { display: none; }

/* Bandeau « à plat » : seule la barre latérale flotte. */
.topbar {
  position: sticky; top: 0; z-index: 30; min-height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 6px;
  background: var(--surface-topbar);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.topbar > .topbar-left { max-width: var(--content-max); width: 100%; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-crumb { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.topbar-title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) {
  .topbar-crumb .topbar-eyebrow { display: none; }
}
.btn-nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--btn-nav-toggle-bg); box-shadow: var(--shadow-control); align-items: center; justify-content: center;
  border: none; cursor: pointer; color: var(--text-primary);
}

.content { flex: 1; }
.content-wrap { max-width: var(--content-max); margin: 0 auto; }

.site-footer {
  padding: 13px 22px; background: var(--surface-card-footer); border-radius: var(--radius-card); box-shadow: var(--shadow-flat);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.site-footer span { font-size: 0.76rem; color: var(--text-tertiary); }
.site-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.powered-by {
  display: flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 14px;
  border-left: 1px solid var(--hairline);
}
.powered-by span { font-size: 0.7rem; color: var(--text-tertiary); }
.powered-by img { height: 16px; width: auto; display: block; }
.powered-by b { font-size: 0.76rem; font-weight: 700; color: var(--text-brand); }

.skip {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--accent); color: var(--text-on-accent); padding: 10px 16px; border-radius: 10px;
  font-size: 0.85rem; transition: top 0.15s ease;
}
.skip:focus { top: 12px; }

/* ======================= 4. COMPOSANTS ======================= */

/* ---------- Boutons ----------
   Rang 1 = engagement (.btn-primary) · rang 2 = exploration (.btn-secondary) ·
   rang 3 = service, neutre (.btn-tertiary : Annuler, Fermer, Réinitialiser). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 0.85rem; font-weight: 500;
  min-height: var(--btn-min-height); padding: 9px 18px; border-radius: var(--radius-button); border: none; cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.3s var(--ease-soft), transform 0.15s var(--ease-soft);
  white-space: nowrap;
}
.btn:active { transition-duration: 0.05s; box-shadow: var(--shadow-inset) !important; transform: none !important; }
.btn:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; }
.btn-primary {
  background-color: var(--btn-primary-bg);
  background-image: var(--btn-primary-bg-image);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-secondary {
  background-color: var(--btn-secondary-bg); color: var(--btn-secondary-fg); font-weight: 600;
  box-shadow: var(--shadow-control);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
  box-shadow: var(--shadow-control-hover);
}
.btn-tertiary { background-color: var(--btn-tertiary-bg); color: var(--btn-tertiary-fg); box-shadow: var(--shadow-control); }
.btn-tertiary:hover:not(:disabled) { box-shadow: var(--shadow-control-hover); }
/* NB (fidélité au modèle) : .btn-sm et .btn-icon* héritent du min-height de .btn
   (--btn-min-height) — ils rendent donc 40px de haut, comme dans la démo. */
.btn-sm { padding: 7px 12px; font-size: 0.78rem; border-radius: var(--radius-button-sm); }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-button-sm); background: var(--btn-icon-bg); box-shadow: var(--shadow-control); color: var(--btn-icon-fg); }
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon-sm { width: 26px; height: 26px; border-radius: var(--radius-button-icon-sm); }
.btn-icon-sm svg { width: 13px; height: 13px; }

/* Action « lien » : texte accentué sans fond (Réinitialiser, Affiner par…).
   Avec une icône chevron : ajouter .with-icon. */
.link-action { background: none; border: none; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-accent); cursor: pointer; padding: 6px 2px; }
.link-action.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.link-action svg { width: 12px; height: 12px; transition: transform 0.2s var(--ease-soft); }

/* ---------- Badges, pastilles, variations ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; color: var(--badge-fg); background: var(--badge-bg);
  box-shadow: var(--shadow-inset); white-space: nowrap;
}
.badge-accent { color: var(--badge-accent-fg); background: var(--badge-accent-bg); box-shadow: none; }
.badge-warn { color: var(--badge-warn-fg); background: var(--badge-warn-bg); box-shadow: none; }
.badge-ok { color: var(--badge-ok-fg); background: var(--badge-ok-bg); box-shadow: none; }
.badge-danger { color: var(--badge-danger-fg); background: var(--badge-danger-bg); box-shadow: none; }
.badge-subtle { color: var(--badge-subtle-fg); }
.badge-anon { color: var(--badge-subtle-fg); background: none; box-shadow: none; font-style: italic; font-weight: 500; }
.badge-ai {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--text-accent);
  background: var(--badge-ai-bg);
  box-shadow: inset 0 0 0 1px var(--badge-ai-ring);
}
.badge-ai svg { width: 12px; height: 12px; flex-shrink: 0; }
.ai-note { font-size: 0.72rem; color: var(--text-tertiary); font-style: italic; margin-top: 4px; }

.score-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 700;
}
.score-pill.ok { background: var(--score-ok-bg); color: var(--score-ok-fg); }
.score-pill.warn { background: var(--score-warn-bg); color: var(--score-warn-fg); }
.score-pill.danger { background: var(--score-danger-bg); color: var(--score-danger-fg); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 700; }
.delta.up { color: var(--delta-up-fg); }
.delta.down { color: var(--delta-down-fg); }
.delta.flat { color: var(--delta-flat-fg); }

.sentiment-dot { width: 8px; height: 8px; border-radius: var(--radius-round); flex-shrink: 0; }
.sentiment-dot.is-positive { background: var(--sentiment-positive); }
.sentiment-dot.is-negative { background: var(--sentiment-negative); }
.sentiment-dot.is-neutral { background: var(--sentiment-neutral); }

/* ---------- Cartes ----------
   Carte standard = --surface-card (#f4f8fb), à plat, SANS ombre.
   Zone creusée   = --surface-well (#e3edf5) + ombre inset : ce qu'on vient LIRE
                    (chiffre clé, graphique) — jamais un fond de carte ordinaire. */
.card {
  position: relative; background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-flat); padding: var(--card-padding);
}
.card-compact { padding: var(--card-compact-padding); border-radius: var(--radius-card-compact); box-shadow: var(--shadow-flat); }
.card-well { background: var(--surface-well); box-shadow: var(--shadow-inset); }
.card-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.card-flag { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.card-flag-actions { display: flex; align-items: center; gap: 10px; }

/* Chiffre clé (indicateur de synthèse) : carte creusée. */
.kpi-card {
  display: flex; flex-direction: column; gap: 8px; justify-content: space-between; min-height: 0; padding: 18px 20px;
  background: var(--surface-well); border-radius: var(--radius-card); box-shadow: var(--shadow-inset);
}
.kpi-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); line-height: 1.3; display: block; min-height: 2.4em; }
.kpi-value { display: flex; align-items: baseline; gap: 6px; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.kpi-value small { font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); }
.kpi-card .kpi-value { font-size: 2rem; margin: 4px 0 6px; }
.kpi-card .kpi-value small { font-size: 1rem; }
.kpi-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0; }
.kpi-ref { font-size: 0.76rem; color: var(--text-tertiary); text-align: right; }
.kpi-row.no-delta { justify-content: flex-start; }
.kpi-row.no-delta .kpi-ref { text-align: left; }
@media (max-width: 560px) {
  .kpi-card { padding: 16px; }
  .kpi-card .kpi-value { font-size: 1.7rem; }
  .kpi-row { row-gap: 2px; }
  .kpi-ref { text-align: left; }
}

/* Encart d'information (fond carte, à plat). */
.callout {
  border-radius: var(--radius-card); padding: 13px 17px; background: var(--surface-card);
  box-shadow: var(--shadow-flat); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
}
.callout strong { color: var(--text-primary); }
.callout.callout-warn { background: var(--status-warn-soft); }

.disclosure { margin: 14px 0; border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-flat); padding: 2px 16px; }
.disclosure summary { cursor: pointer; padding: 11px 0; font-size: 0.82rem; font-weight: 600; color: var(--text-accent); }
.disclosure p { padding-bottom: 13px; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

.empty-state {
  padding: 30px 18px; text-align: center; color: var(--text-secondary); font-size: 0.84rem;
  border-radius: var(--radius-card); background: var(--surface-well); box-shadow: var(--shadow-inset);
}
.empty-state h3 { margin-bottom: 6px; color: var(--text-primary); }
.empty-state p { font-size: 0.82rem; color: var(--text-secondary); }

.card-note { border-radius: var(--radius-card-compact); padding: 10px 12px; background: var(--surface-well); font-size: 0.78rem; color: var(--text-secondary); }
.card-note b { color: var(--text-primary); }

/* ---------- Texte ---------- */
.text-fine { font-size: 0.76rem; color: var(--text-tertiary); }
.text-unavailable { font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; padding: 10px 0; }
.text-intro { font-size: 0.86rem; color: var(--text-secondary); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 34px 0 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head small { font-size: 0.76rem; color: var(--text-secondary); }
.section-head:first-child { margin-top: 0; }
.section-head-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 18px; }  /* le modèle les aligne toujours à droite */

/* ---------- Grilles ---------- */
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.kpi-grid { margin-bottom: 30px; }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Les quatre chiffres clés restent en 2×2 jusqu'au mobile. */
@media (max-width: 1200px) { .kpi-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .grid-split { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Puces de filtre, liste déroulante, sélecteur ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; min-width: 0; }
.toolbar > .chips { min-width: 0; }
.toolbar .spacer { flex: 1; }
.toolbar h2 { margin-right: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 7px 13px; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 500; color: var(--chip-fg); background: var(--chip-bg);
  box-shadow: var(--shadow-control); cursor: pointer; border: none; font-family: inherit;
}
.chip:disabled { cursor: not-allowed; opacity: var(--chip-disabled-opacity); box-shadow: var(--shadow-inset); }
.chip .chip-count { font-size: 0.7rem; font-weight: 700; opacity: 0.7; }
.chip.is-active { background: var(--chip-active-bg); color: var(--chip-active-fg); box-shadow: var(--shadow-control); font-weight: 600; }
.chip:hover:not(.is-active) { box-shadow: var(--shadow-control-hover); }

.fb-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.fb-field { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* Liste déroulante — JAMAIS le <select> natif. On écrit un <select> ordinaire ; theme.js le remplace par
   ce composant (le <select> reste masqué dans le DOM : valeur, name, required, change). Même principe
   que le sélecteur de langue du site vitrine : la largeur suit le CONTENU.
   · déclencheur : largeur de l'option la plus longue (ne bouge pas selon le choix), ellipse si le conteneur est plus étroit ;
   · menu : largeur de son contenu (jamais plus étroit que le déclencheur), s'aligne à droite s'il dépasse de l'écran,
     s'ouvre vers le haut s'il manque de la place dessous ;
   · dans un champ de formulaire (.field) ou un popover (.fp-field) : même hauteur qu'un champ de saisie, largeur selon le contenu ;
     pleine largeur seulement si on ajoute la classe dropdown-block au <select> ;
   · <select multiple> : cases à cocher, le menu reste ouvert, le déclencheur résume le choix.
   La pastille de couleur devant chaque option est optionnelle (attribut data-swatch="chart-1" sur l'<option>). */
.dropdown { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.dropdown .dropdown-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit; text-align: left;
  font-size: 0.8rem; color: var(--text-primary); padding: 8px 12px; border-radius: var(--radius-control); border: none;
  background: var(--surface-control); box-shadow: var(--shadow-inset); cursor: pointer; max-width: 100%;
}
.dropdown-trigger:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; }
.dropdown-label { display: grid; flex: 1 1 auto; min-width: 0; }
.dropdown-label > * { grid-area: 1 / 1; white-space: nowrap; }
.dropdown-value { overflow: hidden; text-overflow: ellipsis; }
.dropdown-ghost { visibility: hidden; height: 0; overflow: hidden; pointer-events: none; }
.dropdown-trigger.is-placeholder .dropdown-value { color: var(--text-tertiary); }
.dropdown-trigger svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-tertiary); transition: transform 0.15s var(--ease-soft); }
.dropdown.is-open .dropdown-trigger svg { transform: rotate(180deg); }
.dropdown-trigger i, .dropdown-option i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: max-content; min-width: 100%;
  max-width: min(360px, calc(100vw - 24px)); max-height: 260px; overflow-y: auto;
  background: var(--surface-menu); border-radius: var(--radius-card-compact); box-shadow: var(--shadow-overlay);
  padding: 6px; margin: 0; list-style: none; animation: fade 0.15s ease;
}
.dropdown.is-up .dropdown-menu { top: auto; bottom: calc(100% + 6px); }
.dropdown.is-end .dropdown-menu { left: auto; right: 0; }
.dropdown.is-fixed .dropdown-menu, .datepicker.is-fixed .datepicker-panel { position: fixed; right: auto; bottom: auto; }
.dropdown-option {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font-family: inherit; white-space: nowrap;
  font-size: 0.82rem; color: var(--text-primary); padding: 9px 10px; border-radius: var(--radius-menu-option); border: none;
  background: none; cursor: pointer;
}
.dropdown-option:hover, .dropdown-option.is-focus { background: var(--surface-menu-option-hover); }
.dropdown-option.is-active { background: var(--accent-soft); color: var(--text-accent); font-weight: 600; }
.dropdown-option:disabled { opacity: 0.5; cursor: default; }
/* Formulaire et popover : cotes d'un champ de saisie, mais LARGEUR SELON LE CONTENU (le conteneur .field est une colonne
   flex qui étire ses enfants : align-self ramène la liste à la taille de son contenu). */
.field .dropdown, .fp-field .dropdown { align-self: flex-start; }
.field .dropdown-trigger, .fp-field .dropdown-trigger { font-size: 0.86rem; padding: 10px 12px; }
.fp-field .dropdown-trigger { padding: 9px 12px; }
/* Pleine largeur (option) : classe .dropdown-block sur le <select>. */
.dropdown.dropdown-block, .field .dropdown.dropdown-block { display: block; align-self: stretch; }
.dropdown.dropdown-block .dropdown-trigger { width: 100%; }

/* Liste à sélection multiple : case à cocher devant chaque option. */
.dropdown-check {
  width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--check-bg); box-shadow: var(--shadow-inset); color: transparent;
}
.dropdown-check svg { width: 10px; height: 10px; }
.dropdown-option.is-active .dropdown-check { background: var(--check-active-bg); color: var(--check-active-fg); box-shadow: none; }
.dropdown.is-multiple .dropdown-option.is-active { background: none; color: var(--text-primary); font-weight: 600; }
.dropdown.is-multiple .dropdown-option.is-active:hover, .dropdown.is-multiple .dropdown-option.is-active.is-focus { background: var(--surface-menu-option-hover); }

/* Sélecteur de date — JAMAIS le calendrier natif. On écrit un <input type="date"> ordinaire ; theme.js le
   remplace par un champ creusé (saisie jj/mm/aaaa possible) + un calendrier dans le style du kit.
   Le <input type="date"> reste masqué dans le DOM et garde la valeur ISO (aaaa-mm-jj), name, required, min, max.
   Composant ajouté au kit à la demande : il n'existe pas dans la démo d'origine ; il n'emploie que des
   variables de rôle existantes (jour sélectionné = puce active, survol = option de menu, panneau = popover). */
.datepicker { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.datepicker .datepicker-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.datepicker-input {
  font-family: inherit; font-size: 0.86rem; color: var(--text-primary); width: 11.5em; max-width: 100%;
  padding: 10px 12px; border-radius: var(--radius-control); border: none; background: var(--surface-control); box-shadow: var(--shadow-inset);
}
.datepicker .datepicker-input { padding-right: 40px; width: 11.5em; }
.datepicker.is-datetime .datepicker-input { width: 15em; }
.datepicker.is-time .datepicker-input { width: 8em; }
.datepicker.is-month .datepicker-input { width: 9em; }
.datepicker.is-week .datepicker-input { width: 12.5em; }
.datepicker.datepicker-block, .field .datepicker.datepicker-block { display: block; align-self: stretch; }
.datepicker.datepicker-block .datepicker-input { width: 100%; }
.datepicker-input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo); }
.datepicker-input:disabled { color: var(--text-tertiary); }
.datepicker-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: none; background: none;
  border-radius: var(--radius-button-sm); color: var(--datepicker-toggle-fg); cursor: pointer;
}
.datepicker-toggle:hover, .datepicker.is-open .datepicker-toggle { color: var(--text-accent); }
.datepicker-toggle:disabled { cursor: not-allowed; opacity: var(--btn-disabled-opacity); }
.datepicker-toggle svg { width: 16px; height: 16px; }
.field .datepicker { align-self: flex-start; }
.datepicker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 296px; max-width: calc(100vw - 24px); padding: 14px;
  background: var(--surface-popover); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay);
  animation: fade 0.15s ease;
}
.datepicker-panel:focus { outline: none; }
.datepicker.is-up .datepicker-panel { top: auto; bottom: calc(100% + 6px); }
.datepicker.is-end .datepicker-panel { left: auto; right: 0; }
.datepicker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.datepicker-title {
  flex: 1; min-width: 0; padding: 6px 8px; border: none; background: none; border-radius: var(--radius-control);
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); text-transform: capitalize; cursor: pointer;
}
.datepicker-title:hover { background: var(--surface-menu-option-hover); }
.datepicker-nav {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-button-sm); background: var(--btn-icon-bg); color: var(--btn-icon-fg);
  box-shadow: var(--shadow-control); cursor: pointer;
}
.datepicker-nav:hover { box-shadow: var(--shadow-control-hover); }
.datepicker-nav:active { box-shadow: var(--shadow-inset); }
.datepicker-nav svg { width: 14px; height: 14px; }
.datepicker-weekdays, .datepicker-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.datepicker-weekdays span { text-align: center; padding: 4px 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.datepicker-day, .datepicker-month {
  padding: 0; border: none; background: none; border-radius: var(--radius-control); cursor: pointer;
  font-family: inherit; font-size: 0.82rem; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.datepicker-day { height: 34px; }
.datepicker-month { height: 38px; text-transform: capitalize; }
.datepicker-day:hover, .datepicker-month:hover { background: var(--datepicker-day-hover-bg); }
.datepicker-day.is-outside { color: var(--datepicker-outside-fg); }
.datepicker-day.is-today, .datepicker-month.is-today { box-shadow: inset 0 0 0 1.5px var(--datepicker-today-ring); }
.datepicker-day.is-selected, .datepicker-month.is-selected {
  background: var(--datepicker-selected-bg); color: var(--datepicker-selected-fg); font-weight: 600; box-shadow: var(--shadow-control);
}
.datepicker-day:disabled { opacity: 0.35; cursor: not-allowed; background: none; box-shadow: none; }
.datepicker-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.datepicker-title.is-static { cursor: default; text-align: center; }
.datepicker-title.is-static:hover { background: none; }
.datepicker-day.is-week { background: var(--datepicker-week-bg); color: var(--datepicker-week-fg); font-weight: 600; border-radius: 0; }
.datepicker-day.is-week-start { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.datepicker-day.is-week-end { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.datepicker.is-week .datepicker-days { column-gap: 0; }
.datepicker-panel.is-time { width: 224px; }
.datepicker-timecol { min-width: 0; }
.datepicker-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.datepicker-days + .datepicker-time { margin-top: 10px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--hairline); }
.datepicker-timehead { display: block; text-align: center; padding: 2px 0 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.datepicker-timelist { position: relative; display: flex; flex-direction: column; gap: 2px; max-height: 184px; overflow-y: auto; padding: 2px; }
.datepicker-days + .datepicker-time .datepicker-timelist { max-height: 124px; }
.datepicker-timeitem {
  flex-shrink: 0; height: 30px; padding: 0; border: none; background: none; border-radius: var(--radius-control); cursor: pointer;
  font-family: inherit; font-size: 0.82rem; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.datepicker-timeitem:hover { background: var(--datepicker-day-hover-bg); }
.datepicker-timeitem.is-selected { background: var(--datepicker-selected-bg); color: var(--datepicker-selected-fg); font-weight: 600; box-shadow: var(--shadow-control); }
.datepicker-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 6px; box-shadow: inset 0 1px 0 var(--hairline); }

/* Champ numérique — JAMAIS le <input type="number"> natif. theme.js le remplace : champ creusé (on peut taper ;
   la virgule décimale est acceptée) + boutons − / + en relief. ↑ ↓ changent d'un pas, Maj ou Page ↑ / ↓ de dix pas ;
   maintenir un bouton répète. min, max, step (y compris « any »), required, disabled, readonly respectés. La valeur
   envoyée reste un nombre avec un point décimal. Largeur selon le nombre de caractères attendus. */
.numberfield {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle;
  padding: 4px 4px 4px 12px; border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--shadow-inset);
}
.numberfield:focus-within { box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo); }
.numberfield .numberfield-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.numberfield .numberfield-input {
  flex: 1 1 auto; min-width: 0; width: calc(var(--nf-chars, 6) * 1ch); padding: 0; border: none; border-radius: 0; background: none; box-shadow: none;
  font-family: inherit; font-size: 0.86rem; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.numberfield .numberfield-input:focus, .numberfield .numberfield-input:focus-visible { outline: none; box-shadow: none; }
.numberfield .numberfield-input:disabled { color: var(--text-tertiary); }
.numberfield-steps { display: flex; gap: 3px; flex-shrink: 0; }
.numberfield-step {
  width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  border-radius: var(--radius-button-sm); background: var(--numberfield-step-bg); color: var(--numberfield-step-fg); box-shadow: var(--shadow-control);
}
.numberfield-step:hover:not(:disabled) { box-shadow: var(--shadow-control-hover); }
.numberfield-step:active:not(:disabled) { box-shadow: var(--shadow-inset); }
.numberfield-step:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; }
.numberfield-step svg { width: 14px; height: 14px; }
.field .numberfield { align-self: flex-start; }

/* Curseur — JAMAIS le <input type="range"> natif. Piste creusée, remplissage bleu foncé, poignée blanche en relief,
   valeur affichée à droite (unité : attribut data-unit, ex. data-unit="%"). Glisser ou cliquer sur la piste ;
   ← → ↑ ↓ changent d'un pas, Page ↑ / ↓ de dix pas, Début / Fin = bornes. « input » pendant le glissement, « change » au relâchement. */
.slider { position: relative; display: inline-flex; align-items: center; gap: 12px; width: 260px; max-width: 100%; min-height: 36px; vertical-align: middle; }
.slider .slider-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.slider-track {
  position: relative; flex: 1 1 auto; height: 7px; margin: 0 10px; border-radius: var(--radius-pill);
  background: var(--slider-track-bg); box-shadow: var(--shadow-inset); cursor: pointer; touch-action: none;
}
.slider-track::before { content: ""; position: absolute; inset: -12px -10px; } /* zone de prise plus large que la piste */
.slider-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--slider-fill); pointer-events: none; }
.slider-thumb {
  position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: var(--radius-round);
  background: var(--slider-thumb-bg); box-shadow: var(--shadow-control); cursor: grab;
}
.slider-thumb:hover { box-shadow: var(--shadow-control-hover); }
.slider.is-dragging .slider-thumb { box-shadow: var(--shadow-inset); cursor: grabbing; }
.slider-value { flex-shrink: 0; min-width: 3ch; text-align: right; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.slider.is-disabled { opacity: var(--btn-disabled-opacity); pointer-events: none; }
.slider.slider-block { display: flex; width: 100%; }
.field .slider { align-self: flex-start; }
.field .slider.slider-block { align-self: stretch; }

/* Sélecteur de couleur — JAMAIS le <input type="color"> natif. Champ hexadécimal (on peut taper #rgb ou #rrggbb) avec
   pastille ; le panneau propose une zone saturation / luminosité, une barre de teinte et les couleurs de la palette du
   kit (lues dans les variables --palette-*). Les dégradés du sélecteur sont le modèle de couleur lui-même (teinte,
   noir, blanc) : ce sont les seules couleurs « en dur » du fichier, et elles ne décorent rien. */
.colorfield { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.colorfield .colorfield-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.colorfield .colorfield-input {
  width: 9.5em; max-width: 100%; padding: 10px 12px 10px 44px; border: none; border-radius: var(--radius-control);
  background: var(--surface-control); box-shadow: var(--shadow-inset); font-family: inherit; font-size: 0.86rem; color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.colorfield .colorfield-input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo); }
.colorfield .colorfield-input:disabled { color: var(--text-tertiary); }
.colorfield-swatch {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: none;
  border-radius: 8px; box-shadow: var(--swatch-ring); cursor: pointer;
}
.colorfield-swatch:disabled { cursor: not-allowed; opacity: var(--btn-disabled-opacity); }
.field .colorfield { align-self: flex-start; }
.colorpicker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 248px; max-width: calc(100vw - 24px); padding: 14px;
  background: var(--surface-popover); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); animation: fade 0.15s ease;
}
.colorpicker-panel:focus { outline: none; }
.colorfield.is-up .colorpicker-panel { top: auto; bottom: calc(100% + 6px); }
.colorfield.is-end .colorpicker-panel { left: auto; right: 0; }
.colorfield.is-fixed .colorpicker-panel { position: fixed; right: auto; bottom: auto; }
.colorpicker-sv {
  position: relative; height: 148px; border-radius: var(--radius-card-compact); cursor: crosshair; touch-action: none;
  background-color: hsl(var(--cp-hue, 0) 100% 50%);
  background-image: linear-gradient(to top, var(--colorpicker-black), transparent), linear-gradient(to right, var(--colorpicker-white), transparent);
}
.colorpicker-hue {
  position: relative; height: 12px; margin: 14px 4px 14px; border-radius: var(--radius-pill); cursor: pointer; touch-action: none;
  background: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));
}
.colorpicker-hue::before { content: ""; position: absolute; inset: -8px -4px; }
.colorpicker-thumb {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: var(--radius-round); pointer-events: none;
  box-shadow: 0 0 0 2.5px var(--colorpicker-thumb-ring), var(--colorpicker-thumb-shadow);
}
.colorpicker-hue .colorpicker-thumb { top: 50%; }
.colorpicker-presets { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.colorpicker-preset { aspect-ratio: 1; padding: 0; border: none; border-radius: 8px; box-shadow: var(--swatch-ring); cursor: pointer; }
.colorpicker-preset:hover { box-shadow: var(--swatch-ring), 0 0 0 2px var(--datepicker-day-hover-bg); }
.colorpicker-preset.is-selected { box-shadow: var(--swatch-ring), 0 0 0 2px var(--colorpicker-thumb-ring), 0 0 0 4px var(--accent); }

/* Champ fichier — JAMAIS le <input type="file"> natif. Bouton secondaire + glisser-déposer dans une zone creusée ;
   les fichiers choisis sont listés (nom, taille, retirer). multiple, accept, required, disabled respectés. Limite : la
   fenêtre de sélection de fichiers elle-même est celle du système (aucun navigateur ne permet de la remplacer). */
.filefield {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; min-width: 0;
  padding: 10px 12px; border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--shadow-inset);
  vertical-align: middle;
}
.filefield.is-dragover { box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo); }
.filefield .filefield-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; box-shadow: none; }
.filefield-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filefield-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.filefield-hint { font-size: 0.76rem; color: var(--text-tertiary); }
.filefield-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.filefield-list:empty { display: none; }
.filefield-item {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 5px 4px 12px;
  border-radius: var(--radius-pill); background: var(--file-item-bg); color: var(--file-item-fg); box-shadow: var(--shadow-control);
}
.filefield-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 500; }
.filefield-size { flex-shrink: 0; font-size: 0.72rem; color: var(--text-tertiary); white-space: nowrap; }
.filefield-remove {
  width: 22px; height: 22px; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  border-radius: var(--radius-round); background: none; color: var(--text-tertiary);
}
.filefield-remove:hover { background: var(--surface-menu-option-hover); color: var(--text-accent); }
.filefield-remove svg { width: 12px; height: 12px; }
.filefield.is-disabled { opacity: var(--btn-disabled-opacity); }
.field .filefield { align-self: flex-start; }

/* Déclencheur de filtre (icône) + popover */
.filter-trigger {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-tab); border: none; cursor: pointer;
  background: var(--filter-trigger-bg); box-shadow: var(--shadow-control); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: box-shadow 0.2s var(--ease-soft);
}
.filter-trigger:hover { box-shadow: var(--shadow-control-hover); }
.filter-trigger svg { width: 14px; height: 14px; }
.filter-trigger.has-active { background: var(--filter-trigger-active-bg); color: var(--text-accent); }
.filter-trigger.has-active::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--filter-trigger-bg);
}
.filter-popover {
  position: fixed; z-index: 85; width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface-popover); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  animation: fade 0.15s ease;
}
.filter-popover .fp-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.filter-popover .fp-field { display: flex; flex-direction: column; gap: 5px; }
.filter-popover .fp-field label { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.filter-popover .fp-scope { font-size: 0.74rem; color: var(--text-tertiary); line-height: 1.45; padding-top: 10px; box-shadow: inset 0 1px 0 var(--hairline); }
.filter-popover .fp-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-popover .link-action { padding: 6px 4px; }
.filter-popover .fp-close { flex-shrink: 0; }

/* Recherche + bloc de filtres */
.search-input {
  font-family: inherit; font-size: 0.86rem; color: var(--text-primary); flex: 1 1 240px; max-width: 360px;
  padding: 9px 14px; border-radius: var(--radius-control); border: none; background: var(--surface-control); box-shadow: var(--shadow-inset);
}
.search-input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo); }
.filter-block { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-flat); padding: 14px 16px; margin-bottom: 16px; }
.fbk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbk-row + .fbk-row { margin-top: 12px; }
.fbk-group { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
.fbk-group > .fb-label { padding-top: 9px; flex-shrink: 0; min-width: 78px; }
.fbk-group > .chips { flex: 1 1 320px; min-width: 0; }
.fbk-more { margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--hairline); display: none; }
.filter-block.is-open .fbk-more { display: block; }
.fbk-more .fbk-group + .fbk-group { margin-top: 12px; }
.filter-block.is-open .link-action svg { transform: rotate(180deg); }
.fbk-count { font-size: 0.82rem; color: var(--text-secondary); }
.fbk-count b { color: var(--text-primary); font-weight: 600; }
.fbk-spacer { flex: 1; }
@media (max-width: 620px) {
  .fbk-group > .fb-label { min-width: 0; padding-top: 0; width: 100%; }
  /* Sous 620px : les puces défilent horizontalement (dégradé de bord = « la liste continue »). */
  .fbk-group > .chips, .toolbar > .chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 2px 2px 6px; margin: -2px -2px -6px; scrollbar-width: none;
  }
  .fbk-group > .chips::-webkit-scrollbar, .toolbar > .chips::-webkit-scrollbar { display: none; }
  .fbk-group > .chips > .chip, .toolbar > .chips > .chip { flex-shrink: 0; scroll-snap-align: start; }
  .fbk-group > .chips, .toolbar > .chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}

/* ---------- Onglets ---------- */
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-tab-track); border-radius: var(--radius-nav-item); box-shadow: var(--shadow-inset); margin-bottom: 14px; flex-wrap: wrap; }
.tab { border: none; background: transparent; padding: 7px 13px; border-radius: var(--radius-tab); font-family: inherit; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.tab.is-active { background: var(--surface-tab-active); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-control); }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 10px 0; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; min-width: 0; }
.field input, .field textarea {
  font-family: inherit; font-size: 0.86rem; color: var(--text-primary); width: 100%;
  padding: 10px 12px; border-radius: var(--radius-control); border: none;
  background: var(--surface-control); box-shadow: var(--shadow-inset);
}
.field input:disabled { color: var(--text-tertiary); }
.field textarea { resize: vertical; min-height: 56px; }
.field input:focus, .field textarea:focus {
  outline: none; box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-halo);
}
/* Défini dans le modèle mais jamais affiché par lui (validation native du navigateur). */
.field-error { font-size: 0.7rem; color: var(--status-danger); min-height: 14px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }

/* Cases à cocher et boutons radio — habillés sans script (l'élément natif reste l'élément réel : clavier, formulaire,
   lecteurs d'écran). À placer dans un <label class="check">, JAMAIS dans un .field. Groupe : .check-group. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; padding: 0; border: none;
  display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
  background: var(--check-bg); color: var(--check-active-fg); box-shadow: var(--shadow-inset);
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: var(--radius-round); }
input[type="checkbox"]::after, input[type="radio"]::after { content: ""; background: currentColor; transform: scale(0); transition: transform 0.12s ease; }
input[type="checkbox"]::after { width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
input[type="radio"]::after { width: 8px; height: 8px; border-radius: var(--radius-round); }
input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:indeterminate { background: var(--check-active-bg); box-shadow: none; }
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:indeterminate::after { width: 10px; height: 2px; border-radius: 2px; clip-path: none; transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: var(--check-disabled-opacity); cursor: not-allowed; }
label.check { display: inline-flex; align-items: center; gap: 9px; font-size: 0.86rem; line-height: 1.3; color: var(--text-primary); cursor: pointer; }
label.check:has(input:disabled) { color: var(--text-tertiary); cursor: not-allowed; }
.check-group { display: flex; flex-direction: column; gap: 8px; }
.check-group.is-inline { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }

/* ---------- Tableaux ---------- */
.table-wrap { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-flat); background: var(--surface-card); }
.table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.data-table thead th {
  text-align: left; padding: 11px 16px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary); background: var(--surface-table-head); white-space: nowrap;
}
.th-sort {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; text-transform: inherit;
  letter-spacing: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer;
}
.th-sort:hover { color: var(--text-primary); }
.th-sort.is-active { color: var(--text-accent); }
.th-sort-arrow { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.4; transition: transform 0.15s var(--ease-soft), opacity 0.15s ease; }
.th-sort-arrow-neutral { width: 11px; height: 15px; }
.th-sort:hover .th-sort-arrow { opacity: 0.7; }
.th-sort-arrow.is-asc, .th-sort-arrow.is-desc { opacity: 1; color: var(--text-accent); }
.th-sort-arrow.is-desc { transform: rotate(180deg); }
table.data-table tbody td { padding: 12px 16px; vertical-align: middle; box-shadow: inset 0 1px 0 var(--hairline); }
table.data-table tbody tr:first-child td { box-shadow: none; }
table.data-table tbody tr.is-clickable { cursor: pointer; transition: background 0.15s ease; }
table.data-table tbody tr.is-clickable:hover { background: var(--surface-row-hover); }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table td.center, table.data-table th.center { text-align: center; }
table.data-table th.num { text-align: right; }
table.data-table .cell-strong { font-weight: 600; }
table.data-table td small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-tertiary); line-height: 1.35; font-weight: 400; }
.table-hint { display: none; padding: 8px 16px; font-size: 0.74rem; color: var(--text-tertiary); background: var(--surface-well); }
@media (max-width: 900px) { .table-hint { display: block; } }

/* ---------- Progression, barres, graphiques ---------- */
.progress { height: 7px; border-radius: var(--radius-pill); background: var(--surface-track); box-shadow: var(--shadow-inset); overflow: hidden; min-width: 60px; }
.progress > i { display: block; height: 100%; background: var(--progress-fill); border-radius: inherit; }
.progress.ok > i { background: var(--progress-fill-ok); }
.progress.warn > i { background: var(--progress-fill-warn); }
.progress.danger > i { background: var(--progress-fill-danger); }

.chart-frame { background: var(--surface-well); box-shadow: var(--shadow-inset); border-radius: var(--radius-card-compact); padding: 14px 16px; }
.trendchart { width: 100%; height: auto; display: block; }
.trendchart .grid-line { stroke: var(--chart-grid-line); stroke-width: 1; }
.trendchart .axis-label { font-size: 9px; fill: var(--text-tertiary); font-family: var(--font-body); }
.trendchart .line-path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trendchart .area-path { fill: url(#trendFill); opacity: 0.35; }
.trendchart .pt { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 2; }
.trendchart .pt-label { font-size: 10px; fill: var(--text-secondary); font-weight: 600; }
.trendchart .target-line { stroke: var(--text-tertiary); stroke-width: 1.2; stroke-dasharray: 3 4; }

.bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; }
.bars.bars-compact { height: 96px; justify-content: flex-start; }
.bars.bars-compact .bar-col { max-width: 92px; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar { width: 100%; border-radius: 7px 7px 3px 3px; position: relative; min-height: 3px; }
.bars .bar-value { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); }
.bars .bar-label { font-size: 0.64rem; color: var(--text-tertiary); text-align: center; line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; }

.dim-bars { display: flex; flex-direction: column; gap: 10px; }
.dim-bar-row { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; }
.dim-bar-row .dbr-label { font-size: 0.78rem; color: var(--text-secondary); }
.dim-bar-row .dbr-track { height: 9px; border-radius: var(--radius-pill); background: var(--surface-track); box-shadow: var(--shadow-inset); overflow: hidden; position: relative; }
.dim-bar-row .dbr-fill { display: block; height: 100%; border-radius: inherit; }
.dim-bar-row .dbr-val { font-size: 0.76rem; font-weight: 700; text-align: right; }
.dim-bar-row .dbr-track .dbr-target-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-tertiary); opacity: 0.6; }
@media (max-width: 560px) { .dim-bar-row { grid-template-columns: 96px 1fr 34px; } }

.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 6px 0 10px; }
.chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-secondary); }
.chart-legend .legend-item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.chart-legend.is-start { justify-content: flex-start; margin: 10px 0 0; }

/* ---------- Anneau (donut / camembert) ---------- */
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.donutchart { width: 100%; max-width: 200px; height: auto; display: block; flex-shrink: 0; margin: 0 auto; }
.donutchart .donut-track { fill: none; stroke: var(--chart-grid-line); stroke-width: 11; }
.donutchart .donut-seg { fill: none; stroke-width: 11; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 50% 50%; }
.donutchart .donut-total { font-size: 18px; font-weight: 700; fill: var(--text-primary); font-family: var(--font-body); }
.donutchart .donut-caption { font-size: 10px; fill: var(--text-tertiary); font-family: var(--font-body); }
.donutchart .donut-seg.is-progress { stroke-linecap: round; }

/* ---------- Radar (profil multi-dimensions) ---------- */
.radarchart { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; overflow: visible; color: var(--accent); }
.radarchart .radar-ring { fill: none; stroke: var(--chart-grid-line); stroke-width: 1; }
.radarchart .radar-spoke { stroke: var(--chart-grid-line); stroke-width: 1; }
.radarchart .radar-area { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.radarchart .radar-target { fill: none; stroke: var(--text-tertiary); stroke-width: 1.3; stroke-dasharray: 3 4; stroke-linejoin: round; }
.radarchart .radar-pt { fill: var(--surface-raised); stroke: currentColor; stroke-width: 2; }
.radarchart .radar-label { font-size: 10px; fill: var(--text-secondary); font-family: var(--font-body); font-weight: 600; }
.radarchart .radar-area.is-secondary { fill: var(--chart-2); fill-opacity: 0.16; stroke: var(--chart-2); stroke-width: 2; stroke-linejoin: round; }
.radarchart .radar-pt.is-secondary { stroke: var(--chart-2); }

/* ---------- Barres horizontales (classement) ---------- */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; }
.hbar-row .hbar-label { font-size: 0.78rem; color: var(--text-secondary); text-align: right; }
.hbar-row .hbar-track { height: 16px; border-radius: 5px; background: var(--surface-well); box-shadow: var(--shadow-inset); overflow: hidden; }
.hbar-row .hbar-fill { display: block; height: 100%; border-radius: 5px 0 0 5px; }
.hbar-row .hbar-val { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .hbar-row { grid-template-columns: 88px 1fr 34px; } }

/* Variante divergente : positif/négatif depuis un axe zéro central (couleurs de statut, pas de série) */
.hbars.is-diverging .hbar-track { position: relative; overflow: visible; }
.hbars.is-diverging .hbar-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--chart-grid-line); }
.hbars.is-diverging .hbar-fill { position: absolute; top: 0; height: 100%; border-radius: 0; }
.hbars.is-diverging .hbar-fill.is-pos { left: 50%; border-radius: 0 5px 5px 0; }
.hbars.is-diverging .hbar-fill.is-neg { right: 50%; border-radius: 5px 0 0 5px; }
.hbars.is-diverging .hbar-val.is-pos { color: var(--score-ok-fg); }
.hbars.is-diverging .hbar-val.is-neg { color: var(--score-danger-fg); }

/* ---------- Barres groupées (comparaison de séries) ---------- */
.bars.is-grouped .bar-col { gap: 6px; }
.bar-cluster { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; }
.bar-cluster .bar { flex: 1; min-width: 0; }

/* ---------- Barres empilées (composition à 100 %) ---------- */
.stackedbar { display: flex; flex-direction: column; gap: 12px; }
.stackedbar-row { display: flex; flex-direction: column; gap: 6px; }
.stackedbar-row .sb-label { font-size: 0.78rem; color: var(--text-secondary); }
.stackedbar-track { display: flex; height: 20px; border-radius: 6px; overflow: hidden; background: var(--surface-well); box-shadow: var(--shadow-inset); }
.stackedbar-track .sb-seg { height: 100%; }

/* ---------- Jauge (indicateur vs objectif) ---------- */
.gaugechart { width: 100%; max-width: 210px; height: auto; display: block; margin: 0 auto; }
.gaugechart .gauge-track { fill: none; stroke: var(--chart-grid-line); stroke-width: 13; stroke-linecap: round; }
.gaugechart .gauge-fill { fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round; }
.gaugechart .gauge-target { stroke: var(--text-tertiary); stroke-width: 2.4; }
.gaugechart .gauge-value { font-size: 18px; font-weight: 700; fill: var(--text-primary); font-family: var(--font-body); }
.gaugechart .gauge-caption { font-size: 10px; fill: var(--text-tertiary); font-family: var(--font-body); }
.gaugechart .gauge-bound { font-size: 9px; fill: var(--text-tertiary); font-family: var(--font-body); }
.gaugechart.is-compact { max-width: 126px; }
.gaugechart.is-compact .gauge-track, .gaugechart.is-compact .gauge-fill { stroke-width: 7.8; }
.gauge-row { display: flex; gap: 8px; justify-content: space-around; flex-wrap: wrap; }
.gaugechart .gauge-fill.is-ok { stroke: var(--status-ok); }
.gaugechart .gauge-fill.is-warn { stroke: var(--status-warn); }
.gaugechart .gauge-fill.is-danger { stroke: var(--status-danger); }

/* ---------- Nuage de points (corrélation) ---------- */
.scatterchart { width: 100%; height: auto; display: block; }
.scatterchart .grid-line { stroke: var(--chart-grid-line); stroke-width: 1; }
.scatterchart .axis-label { font-size: 9px; fill: var(--text-tertiary); font-family: var(--font-body); }
.scatterchart .axis-title { font-size: 10px; fill: var(--text-tertiary); font-family: var(--font-body); font-weight: 600; }
.scatterchart .scatter-pt { fill: var(--chart-2); fill-opacity: 0.72; stroke: var(--surface-raised); stroke-width: 1; }
.scatterchart .scatter-pt.is-highlight { fill: var(--accent); fill-opacity: 1; stroke-width: 1.5; }
.scatterchart .quadrant-line { stroke: var(--chart-grid-line); stroke-width: 1; stroke-dasharray: 3 4; }
.scatterchart .quadrant-label { font-size: 9px; fill: var(--text-tertiary); font-family: var(--font-body); font-style: italic; }

/* ---------- Mini-courbe embarquée (sparkline) ---------- */
.sparkline { width: 100%; max-width: 160px; height: 32px; display: block; }
.sparkline .spark-path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sparkline .spark-pt { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- Heatmap (matrice colorée) ---------- */
table.heatmap { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 0.78rem; }
table.heatmap th { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 4px 6px; text-align: center; }
table.heatmap th.hm-rowhead { text-align: right; font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 0.78rem; color: var(--text-secondary); padding-right: 10px; }
table.heatmap td.hm-cell {
  text-align: center; padding: 10px 6px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); min-width: 46px;
  box-shadow: 0 1px 3px rgba(22, 35, 47, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
table.heatmap td.hm-1 { background: color-mix(in oklab, var(--accent) 14%, var(--surface-well)); }
table.heatmap td.hm-2 { background: color-mix(in oklab, var(--accent) 36%, var(--surface-well)); }
table.heatmap td.hm-3 { background: color-mix(in oklab, var(--accent) 60%, var(--surface-well)); color: var(--text-on-dark); }
table.heatmap td.hm-4 { background: color-mix(in oklab, var(--accent) 84%, var(--surface-well)); color: var(--text-on-dark); }
table.heatmap td.hm-ok { background: color-mix(in oklab, var(--progress-fill-ok) 42%, transparent); }
table.heatmap td.hm-warn { background: color-mix(in oklab, var(--progress-fill-warn) 48%, transparent); }
table.heatmap td.hm-danger { background: color-mix(in oklab, var(--progress-fill-danger) 32%, transparent); }

/* ---------- Info-bulle et survol des graphiques ----------
   Comportement : theme.js §7 (attribut data-tip). Ici : l'apparence de l'info-bulle et l'effet de survol
   de chaque type de graphique. Blanc en relief = ce qui flotte (règle du kit). */
.chart-tooltip {
  position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none;
  min-width: 132px; max-width: 280px; padding: 9px 13px 10px;
  border-radius: var(--radius-card-compact); background: var(--surface-raised); box-shadow: var(--shadow-overlay);
  font-size: 0.76rem; color: var(--text-secondary);
  opacity: 0; transform: translateY(5px); transition: opacity 0.12s ease, transform 0.16s var(--ease-soft);
}
.chart-tooltip.is-visible { opacity: 1; transform: none; }
.chart-tooltip .ct-title { display: block; margin-bottom: 5px; font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.chart-tooltip .ct-row { display: flex; align-items: center; gap: 8px; line-height: 1.65; }
.chart-tooltip .ct-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.chart-tooltip .ct-value { margin-left: auto; padding-left: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barres : la colonne / la ligne survolée ressort, les autres s'estompent */
.bars .bar, .hbar-row .hbar-fill, .dim-bar-row .dbr-fill, .stackedbar-track .sb-seg { transition: filter 0.15s ease, opacity 0.15s ease, transform 0.18s var(--ease-soft); }
.bars .bar { transform-origin: bottom; }
.hbar-row, .dim-bar-row { transition: opacity 0.15s ease; }
.bars .bar-col[data-tip]:hover .bar { filter: brightness(1.08) saturate(1.12); transform: scaleY(1.04); }
.bars:has(.bar-col[data-tip]:hover) .bar-col:not(:hover) .bar { opacity: 0.5; }
.hbar-row[data-tip]:hover .hbar-fill, .dim-bar-row[data-tip]:hover .dbr-fill { filter: brightness(1.08) saturate(1.12); }
.hbars:has(.hbar-row[data-tip]:hover) .hbar-row:not(:hover),
.dim-bars:has(.dim-bar-row[data-tip]:hover) .dim-bar-row:not(:hover) { opacity: 0.5; }
.stackedbar-track .sb-seg[data-tip]:hover { filter: brightness(1.1) saturate(1.12); }
.stackedbar-track:has(.sb-seg[data-tip]:hover) .sb-seg:not(:hover) { opacity: 0.5; }

/* Anneau : le segment survolé s'épaissit, les autres s'estompent */
.donutchart .donut-seg { transition: stroke-width 0.18s var(--ease-soft), opacity 0.18s ease; }
.donutchart .donut-seg[data-tip]:hover { stroke-width: 15; }
.donutchart:has(.donut-seg[data-tip]:hover) .donut-seg:not(:hover) { opacity: 0.5; }

/* Jauge */
.gaugechart .gauge-fill { transition: stroke-width 0.18s var(--ease-soft); }
.gaugechart .gauge-fill[data-tip]:hover { stroke-width: 16; }
.gaugechart.is-compact .gauge-fill[data-tip]:hover { stroke-width: 10; }

/* Radar : l'aire survolée s'intensifie, le sommet survolé grossit */
.radarchart .radar-area { transition: fill-opacity 0.18s ease; }
.radarchart .radar-area[data-tip]:hover { fill-opacity: 0.34; }
.radarchart .radar-pt { transition: r 0.15s var(--ease-soft); }
.radarchart .radar-pt[data-tip]:hover { r: 5; }

/* Nuage de points */
.scatterchart .scatter-pt { transition: r 0.15s var(--ease-soft), fill-opacity 0.15s ease; }
.scatterchart .scatter-pt[data-tip]:hover { r: 7; fill-opacity: 1; }

/* Courbe : repère vertical + points de la série et de l'objectif au survol d'une échéance */
.trendchart .tc-hit { fill: transparent; }
.trendchart .tc-cross { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; transition: opacity 0.15s ease; }
.trendchart .tc-tgt { fill: var(--surface-raised); stroke: var(--text-tertiary); stroke-width: 2; opacity: 0; transition: opacity 0.15s ease; }
.trendchart .tc-mark .pt { transition: r 0.15s var(--ease-soft); }
.trendchart .tc-mark:hover .tc-cross, .trendchart .tc-mark:hover .tc-tgt { opacity: 1; }
.trendchart .tc-mark:hover .pt { r: 5; }

/* Mini-courbe : point d'échéance au survol */
.sparkline .spark-hit { fill: transparent; }
.sparkline .spark-hover-pt { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.12s ease; }
.sparkline .spark-mark:hover .spark-hover-pt { opacity: 1; }

/* Heatmap : la cellule survolée se soulève */
table.heatmap td.hm-cell { transition: transform 0.15s var(--ease-soft), filter 0.15s ease, box-shadow 0.15s ease; }
table.heatmap td.hm-cell[data-tip]:hover {
  transform: scale(1.07); filter: brightness(1.04); position: relative; z-index: 1;
  box-shadow: 0 4px 10px rgba(22, 35, 47, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* ---------- Tiroir latéral et fenêtre modale ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 70; background: var(--surface-scrim);
  display: flex; justify-content: flex-end; animation: fade 0.15s ease;
}
.drawer-overlay.is-centered { justify-content: center; align-items: center; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  width: 100%; max-width: 560px; height: 100vh; overflow-y: auto;
  background: var(--surface-drawer); box-shadow: var(--shadow-drawer);
  animation: slidein 0.22s var(--ease-soft); padding: 22px 22px 40px;
}
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer:focus { outline: none; }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  position: sticky; top: -22px; z-index: 2; margin: -22px -22px 16px; padding: 22px 22px 12px;
  background: linear-gradient(var(--surface-drawer) 76%, transparent);
}
body.drawer-open { overflow: hidden; }
.drawer-head h2 { margin-bottom: 4px; }
.drawer-head p { font-size: 0.8rem; color: var(--text-secondary); }
.drawer-close { flex-shrink: 0; }
.drawer-section { margin-top: 18px; }
.drawer-section:first-of-type { margin-top: 0; }
/* Fenêtre modale centrée : mêmes classes .drawer*, recadrées. */
.drawer.is-modal {
  max-width: 640px; height: auto; max-height: 90vh; border-radius: var(--radius-panel);
  animation: fade 0.18s ease; padding-bottom: 22px; overflow-x: hidden;
}
.drawer.is-modal .drawer-head { border-radius: var(--radius-panel) var(--radius-panel) 0 0; margin-bottom: 10px; padding-bottom: 8px; }
.drawer.is-modal .drawer-head p { margin-top: 2px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: 420px; padding: 13px 20px; border-radius: var(--radius-toast);
  background: var(--surface-toast); color: var(--text-on-dark); font-size: 0.83rem;
  box-shadow: var(--shadow-toast); z-index: 95;
  animation: toast-in 0.25s var(--ease-soft);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ======================= 5. COMPOSITIONS DU MODÈLE ======================= */
/* Assemblages récurrents de la démo. Ils n'ajoutent que de la mise en page ;
   les couleurs, polices et arrondis viennent des composants ci-dessus. */

.list { display: flex; flex-direction: column; gap: 10px; }

/* Carte de témoignage */
.quote-card { display: flex; flex-direction: column; gap: 8px; }
.quote-card .quote-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quote-card .quote { font-size: 0.88rem; line-height: 1.5; color: var(--text-primary); }
.vote-count { font-size: 0.76rem; color: var(--text-tertiary); }

/* Ligne de liste séparée par un filet */
.list-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; box-shadow: inset 0 1px 0 var(--hairline); }
.list-row:first-child { box-shadow: none; }
.list-row > div:first-child { flex: 1; min-width: 220px; }
.list-row h3 { font-size: 0.88rem; margin-bottom: 4px; }
.list-row p { font-size: 0.78rem; color: var(--text-secondary); }
.deadline-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 0.84rem; box-shadow: inset 0 1px 0 var(--hairline); }
.deadline-row:first-child { box-shadow: none; padding-top: 2px; }
.deadline-row:last-child { padding-bottom: 2px; }

/* Constat (carte compacte avec fait / périmètre / piste) */
.insight-card { display: flex; flex-direction: column; gap: 6px; }
.insight-fact { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.insight-meta { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }
.insight-meta b { color: var(--text-primary); }
.insight-lead { font-size: 0.78rem; color: var(--text-accent); font-style: italic; line-height: 1.4; }
.insight-card .btn { align-self: flex-start; margin-top: 2px; }

/* Carte d'action */
.action-card { display: flex; flex-direction: column; gap: 10px; }
.action-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.action-top .at-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.action-line { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.78rem; color: var(--text-secondary); }
.action-line b { font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.03em; margin-right: 5px; }
.action-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin: 4px 0; }
.action-meta-grid > div { font-size: 0.78rem; }
.action-meta-grid small { display: block; font-size: 0.66rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
@media (max-width: 700px) { .action-meta-grid { grid-template-columns: 1fr 1fr; } }

/* ======================= 6. ADAPTATIF ET MOUVEMENT RÉDUIT ======================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .btn-primary:hover:not(:disabled) { transform: none !important; }
}

/* Barre latérale : sous 1080px elle devient un tiroir masqué (classe .nav-open sur .app-shell). */
@media (max-width: 1080px) {
  .btn-sidebar-collapse, .btn-expand-sidebar { display: none !important; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 296px;
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    transform: translateX(-100%); transition: transform 0.25s var(--ease-soft);
    box-shadow: var(--shadow-overlay); background: var(--surface-sidebar-mobile);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--surface-scrim-nav); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .app-shell.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .btn-nav-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .app-shell { padding: 10px; gap: 10px; }
  .topbar { padding: 8px 4px; height: auto; min-height: var(--topbar-h); }
  .site-footer { padding: 12px 14px; flex-direction: column; align-items: flex-start; border-radius: var(--radius-card); }
  .drawer { max-width: 100%; }
  .action-meta-grid { grid-template-columns: 1fr 1fr; }
}