/* =========================================================
   Color Room — Espace licencié (MVP)
   Design system et styles
   ========================================================= */

:root {
  /* Color Room — Charte graphique officielle */
  --cr-blue: #6ea4ff;       /* Couleur #1 — primaire */
  --cr-yellow: #face4e;     /* Couleur #2 — progression / énergie */
  --cr-coral: #fa6457;      /* Couleur #3 — alerte / action */
  --cr-green: #7bc656;      /* Accent tertiaire (conservé pour badges success) */
  --cr-orange: #fa9c4e;     /* Alias warm — utilisé wordmark + gradients + threshold warn */
  --cr-red: var(--cr-coral); /* Alias danger pour gradient logo + threshold */

  /* Primaire = bleu Color Room */
  --color-primary: var(--cr-blue);
  --color-primary-hover: #5690ee;
  --color-primary-light: #eaf2ff;
  --color-primary-dark: #2d64c8;

  /* Alias accent warm / danger */
  --color-warm: var(--cr-yellow);
  --color-warm-light: #fef6d9;
  --color-warm-dark: #b48a10;

  --color-danger: var(--cr-coral);
  --color-danger-light: #fde3e0;
  --color-danger-dark: #c13d31;

  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-alt: #f1efe8;

  --color-text: #1a1a1a;
  --color-text-muted: #6b6b66;
  --color-text-tertiary: #9b9b95;
  /* V=443 : variables utilisees sans fallback a de nombreux endroits mais
     jamais definies -> le texte "attenue" tombait en couleur pleine heritee
     (hierarchie visuelle perdue en clair ET en nuit). --color-text-soft =
     valeur du fallback deja present sur 145 autres usages ; --color-muted =
     alias historique de --color-text-muted. */
  --color-text-soft: #6a6a75;
  --color-muted: #6b6b66;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Tuiles ressources : accents basés sur la palette logo */
  --color-accent-coral-bg: #fde3e0;
  --color-accent-coral-fg: #c13d31;

  --color-accent-purple-bg: #eaf2ff;
  --color-accent-purple-fg: #2d64c8;

  --color-accent-pink-bg: #fde3e0;
  --color-accent-pink-fg: #c13d31;

  --color-accent-teal-bg: #e7f6de;
  --color-accent-teal-fg: #3e7826;

  --color-accent-amber-bg: #fef6d9;
  --color-accent-amber-fg: #8a6808;

  --color-accent-gray-bg: #f1efe8;
  --color-accent-gray-fg: #444441;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Typographie Color Room :
     - Titres (display) : Fraunces, serif éditorial chaleureux
     - Body             : Manrope, sans-serif très lisible
     - Logo wordmark    : Fredoka (bold/playful, conservé pour le logo uniquement) */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-logo: "Fredoka", "Fraunces", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   MODE NUIT — Activé par data-theme="dark" sur <html>.
   Gardons les couleurs de marque (bleu, jaune, corail) vives.
   Inversons fond et textes pour confort de lecture nocturne.
   ========================================================= */
html[data-theme="dark"] {
  /* Fond : charbon doux, surfaces avec écart visible pour la hiérarchie */
  --color-bg: #16161d;
  --color-surface: #22232c;
  --color-surface-alt: #2c2d37;

  /* Textes : plus lumineux pour confort de lecture nocturne (WCAG AAA) */
  --color-text: #f7f6f1;
  --color-text-muted: #c2c1ba;     /* +20% lumino vs avant */
  --color-text-tertiary: #8e8d86;  /* +20% lumino vs avant */
  /* V=443 : versions nuit des variables ajoutees en :root (cf. commentaire
     la-bas). Sans ca, le texte "soft"/"muted" restait sombre sur fond nuit. */
  --color-text-soft: #b4b3ac;
  --color-muted: #c2c1ba;

  /* Bordures plus contrastées pour bien délimiter les cards */
  --color-border: rgba(255, 255, 255, 0.16);

  /* Primaire : bleu Color Room remonté pour lisibilité sur fond sombre */
  --color-primary-light: rgba(110, 164, 255, 0.22);
  --color-primary-hover: #9bc1ff;
  --color-primary-dark: #6ea4ff;

  --color-warm-light: rgba(250, 206, 78, 0.22);
  --color-danger-light: rgba(250, 100, 87, 0.22);

  /* Tuiles ressources : alpha 0.28 (au lieu de 0.18) pour plus de présence
     et meilleur contraste du texte qui se pose dessus. */
  --color-accent-coral-bg: rgba(250, 100, 87, 0.28);
  --color-accent-coral-fg: #ffb1ad;

  --color-accent-purple-bg: rgba(110, 164, 255, 0.28);
  --color-accent-purple-fg: #b8d2ff;

  --color-accent-pink-bg: rgba(250, 100, 87, 0.28);
  --color-accent-pink-fg: #ffb1ad;

  --color-accent-teal-bg: rgba(123, 198, 86, 0.28);
  --color-accent-teal-fg: #c5eeb0;

  --color-accent-amber-bg: rgba(250, 206, 78, 0.28);
  --color-accent-amber-fg: #ffe79a;

  --color-accent-gray-bg: rgba(255, 255, 255, 0.08);
  --color-accent-gray-fg: #d8d7d2;

  /* Ombres adaptées au fond sombre */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* Patches de lisibilité ciblés pour les patterns CSS qui utilisent des
   couleurs hardcodées difficiles à atteindre via les vars. */
html[data-theme="dark"] .muted { color: var(--color-text-muted); }
html[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.08);
  color: #ffe79a;
}
html[data-theme="dark"] hr { border-color: var(--color-border); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-tertiary);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}
/* Cards qui utilisent fond #fff hardcodé : on les force au surface dark.
   Liste exhaustive des composants identifiés ; à compléter si on en
   trouve d'autres au fil des pages. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .part-card,
html[data-theme="dark"] .part-reco-card,
html[data-theme="dark"] .part-galaxy-core,
html[data-theme="dark"] .part-bubble,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .tm-row,
html[data-theme="dark"] .tm-section {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="dark"] .part-bubble--locked,
html[data-theme="dark"] .tm-avatar {
  background: var(--color-surface-alt);
}
html[data-theme="dark"] .part-reco-card {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .part-reco-logo {
  background: var(--color-surface-alt);
}
/* Liens : éviter le bleu vif foncé hardcodé qui devient illisible */
html[data-theme="dark"] a {
  color: var(--color-primary-hover);
}

/* Override des cards à gradient pastel-vers-blanc qui partent du début
   d'un dégradé tinté (vert, ambre, jaune) -- inadapté au fond sombre.
   On les bascule en surface uniforme sombre. */
html[data-theme="dark"] .urg-fourn-card--surdiscount,
html[data-theme="dark"] .urg-fourn-card--amazon,
html[data-theme="dark"] .approv-card,
html[data-theme="dark"] .commande-card,
html[data-theme="dark"] [class*="-card--surdiscount"],
html[data-theme="dark"] [class*="-card--amazon"] {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Tab nav (Peinture / Toiles) : fond clair par défaut */
html[data-theme="dark"] .tab,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-nav,
html[data-theme="dark"] [role="tablist"] {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
html[data-theme="dark"] [role="tab"][aria-selected="true"],
html[data-theme="dark"] .tab--active {
  background: var(--color-surface);
  color: var(--color-text);
}

/* V=443 : patch nuit pour des composants a couleurs codees en dur (#fff /
   #1a1a1a) qui devenaient illisibles en mode sombre (blanc sur blanc dans le
   tableau BP, l'historique de commandes et le selecteur de devise ; titres
   noirs sur fond sombre sur la page Concept ; confirmation login noire sur
   carte sombre). On rebranche ces surfaces/textes sur les variables de theme. */
html[data-theme="dark"] .login-sent-text { color: var(--color-text); }
html[data-theme="dark"] .concept-hero-title,
html[data-theme="dark"] .concept-hero-stat strong,
html[data-theme="dark"] .concept-section-title,
html[data-theme="dark"] .concept-pilier-title,
html[data-theme="dark"] .concept-valeur--amber,
html[data-theme="dark"] .concept-raison-title,
html[data-theme="dark"] .concept-avantage-title,
html[data-theme="dark"] .concept-process-title,
html[data-theme="dark"] .concept-team-name {
  color: var(--color-text);
}
html[data-theme="dark"] .bp-monthly-table-wrap,
html[data-theme="dark"] .cs-cmd,
html[data-theme="dark"] .me-currency-btn {
  background: var(--color-surface);
}
html[data-theme="dark"] .bp-monthly-table thead th {
  background: var(--color-surface-alt);
}
html[data-theme="dark"] .bp-monthly-table tbody td {
  border-bottom-color: var(--color-border);
}
html[data-theme="dark"] .bp-monthly-table tbody tr:nth-child(even) td {
  background: var(--color-surface-alt);
}
html[data-theme="dark"] .bp-monthly-table tbody tr:hover td {
  background: var(--color-surface);
}

/* Transition douce sur le bg/color du body pour un switch fluide */
html, body {
  transition: background-color 220ms ease, color 220ms ease;
}

/* Si le navigateur déclare prefers-color-scheme: dark ET que l'utilisateur
   n'a pas encore choisi de thème (data-theme absent), on bascule en dark
   automatiquement au premier visit. JavaScript va aussi gérer ça. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

/* Inversion subtile pour la carte Leaflet en mode nuit (les tuiles
   OpenStreetMap sont claires par défaut). Filter CSS plutôt que tile
   layer dédié pour pas alourdir le bundle. */
html[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(1.05);
}
html[data-theme="dark"] .leaflet-marker-icon,
html[data-theme="dark"] .leaflet-marker-shadow {
  /* Les markers sont des images colorées, on les laisse intacts */
  filter: none;
}

/* ---------- Reset léger ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Scrollbars toujours visibles (v=188) — par defaut macOS les masque
     en overlay et l'utilisateur ne sait pas qu'il y a du contenu en dessous.
     scrollbar-gutter reserve l'espace en permanence pour eviter le shift
     de layout quand la scrollbar apparait. */
  scrollbar-gutter: stable;
  /* Firefox : scrollbar fine + couleur custom (thumb / track) */
  scrollbar-width: thin;
  scrollbar-color: #c4c8d2 transparent;
}

/* WebKit (Safari, Chrome) — scrollbar discrete mais toujours visible.
   On rend le thumb un peu plus contraste au hover pour le retour visuel. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: #c4c8d2;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  min-height: 40px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: #9aa1ad;
  background-clip: content-box;
}

/* Boutons fleche en haut/bas masques (look plus moderne) */
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Utilitaires ---------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.muted {
  color: var(--color-text-muted);
}

.tertiary {
  color: var(--color-text-tertiary);
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-md);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

/* Logo Color Room — wordmark multicolor façon charte */
.logo-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
}

.logo-wordmark .cr-color {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 1px;
}

.logo-wordmark .cr-color span:nth-child(1) { color: var(--cr-blue); }
.logo-wordmark .cr-color span:nth-child(2) { color: var(--cr-orange); }
.logo-wordmark .cr-color span:nth-child(3) { color: var(--cr-orange); }
.logo-wordmark .cr-color span:nth-child(4) { color: var(--cr-red); }
.logo-wordmark .cr-color span:nth-child(5) { color: var(--cr-green); }

.logo-wordmark .cr-room {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--color-text);
  margin-top: -4px;
  letter-spacing: 0.5px;
}

/* Version compacte pour le header */
.logo-wordmark--sm .cr-color { font-size: 22px; }
.logo-wordmark--sm .cr-room { font-size: 13px; margin-top: -3px; }

/* Version grande pour le login */
.logo-wordmark--lg .cr-color { font-size: 48px; letter-spacing: 2px; }
.logo-wordmark--lg .cr-room { font-size: 26px; margin-top: -6px; }

.login-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-align: center;
}

.login-subtitle {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.field input {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s;
  width: 100%;
}

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

.btn-primary:active {
  transform: translateY(1px);
}

/* V263 : safety net pour les SVG inline dans les boutons. Sans
   width/height explicites, un <svg viewBox="0 0 24 24"> peut etre
   etire a 100% du conteneur dans certains contextes (bug Profil
   "Exporter ma progression" a 1500px de hauteur). On les contraint
   par defaut a 16px ; les overrides specifiques (.backup-actions
   .btn-primary svg = 14px, .tuto-actions .btn-primary svg = ...)
   restent prioritaires. */
.btn-primary > svg,
.btn-secondary > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form-error {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--color-accent-pink-bg);
  color: var(--color-accent-pink-fg);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
}

.form-error[hidden] {
  display: none;
}

.login-forgot {
  display: block;
  margin: 10px auto 0;
  text-align: center;
  font-size: 13px;
}

/* Magic link UI : étape "lien envoyé" */
.login-sent-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 8px 0 12px;
  text-align: center;
}
.login-sent-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #1a1a1a;
}
.login-sent-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b6b6b;
}

/* V=369 : compteur live + bouton Renvoyer sur l'ecran "lien envoye" */
.login-sent-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 6px 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 12.5px;
  color: #065f46;
}

.login-sent-timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: loginTimerPulse 1.4s ease-in-out infinite;
}

.login-sent-timer-text strong {
  font-weight: 600;
}

@keyframes loginTimerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.login-sent-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.login-resend-btn {
  min-width: 200px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

.login-resend-feedback {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.login-resend-feedback--ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.login-resend-feedback--err {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.login-hint-magic {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

/* Feedback connexion accès prospect (#/acces) — V=470 */
.login-shared-feedback {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-muted);
}
.login-shared-feedback.is-error {
  color: #c0392b;
}

/* =========================================================
   TUTO overlay + modales plein écran
   ========================================================= */

.tuto-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(3px);
  animation: tuto-fade-in 0.2s ease;
}

@keyframes tuto-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tuto-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 36px 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: tuto-scale-in 0.25s ease;
}

@keyframes tuto-scale-in {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.tuto-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tuto-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.tuto-step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.tuto-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--color-text);
}

.tuto-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 24px;
}

.tuto-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.tuto-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.2s, transform 0.2s;
}

.tuto-dot--active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.tuto-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.tuto-actions .btn-primary,
.tuto-actions .btn-secondary {
  flex: 1;
  width: auto;
  padding: 10px 16px;
  font-size: 14px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.tuto-actions .btn-primary svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 520px) {
  .tuto-card {
    padding: 28px 22px 22px;
  }
  .tuto-title {
    font-size: 22px;
  }
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(140%) blur(8px);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* V351+ : brand cliquable = bouton Home implicite. Hover discret pour
   indiquer l'interaction sans casser le visuel sobre du header. */
a.brand--link {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.15s ease, transform 0.12s ease;
}
a.brand--link:hover {
  background: var(--color-surface-alt);
}
a.brand--link:active {
  transform: scale(0.98);
}
a.brand--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Bouton recherche dans le header (V351+) === */
.header-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.header-search-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.header-search-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.header-search-label { font-weight: 500; }
.header-search-kbd {
  font-family: inherit;
  font-size: 10.5px;
  padding: 1px 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-tertiary);
}
@media (max-width: 720px) {
  .header-search-label, .header-search-kbd { display: none; }
  .header-search-btn { padding: 8px; }
}

/* === Palette de recherche modale (Cmd+K) === */
.cr-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 22, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: cr-search-fade-in 0.18s ease-out;
}
.cr-search-overlay--out { animation: cr-search-fade-out 0.18s ease-in forwards; }
@keyframes cr-search-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-search-fade-out { from { opacity: 1; } to { opacity: 0; } }
.cr-search-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cr-search-slide-in 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes cr-search-slide-in {
  from { transform: translateY(-20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.cr-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.cr-search-icon { color: var(--color-text-muted); display: flex; }
.cr-search-icon svg { width: 18px; height: 18px; }
.cr-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text);
  min-height: 24px;
  padding: 0;
}
.cr-search-input::placeholder { color: var(--color-text-tertiary); }
.cr-search-kbd, .cr-search-footer kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
}
.cr-search-results { flex: 1; overflow-y: auto; padding: 6px; }
.cr-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  transition: background 0.1s;
}
.cr-search-row:hover,
.cr-search-row--active { background: var(--color-surface-alt); }
.cr-search-row-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.cr-search-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cr-search-row-label {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-search-row-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-search-row-kind {
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cr-search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}
.cr-search-footer {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}
@media (max-width: 540px) {
  .cr-search-overlay { padding-top: 8vh; }
  .cr-search-modal { width: calc(100vw - 16px); max-height: 80vh; }
  .cr-search-row-kind { display: none; }
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.brand-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.centre-name {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  white-space: nowrap;
}

/* Selecteur multi-site dans le header (V=374 : composant custom remplace
   le <select> natif qui rendait mal). Bouton vert visible avec icone +
   label "Centre" + valeur + chevron, dropdown stylé. */
.centre-switcher-wrap {
  position: relative;
  display: inline-flex;
}

.centre-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
  box-shadow: 0 1px 2px rgba(6, 95, 70, 0.06);
}

.centre-switcher-btn:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #34d399;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.15);
}

.centre-switcher-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
  border-color: #10b981;
}

.centre-switcher-btn:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

.centre-switcher-icon {
  font-size: 14px;
  filter: saturate(1.1);
}

.centre-switcher-pre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.centre-switcher-val {
  font-weight: 700;
  color: #064e3b;
}

.centre-switcher-chev {
  margin-left: 2px;
  font-size: 11px;
  transition: transform 160ms;
  opacity: 0.7;
}

.centre-switcher-btn[aria-expanded="true"] .centre-switcher-chev {
  transform: rotate(180deg);
}

.centre-switcher-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  animation: centreSwitcherFadeIn 140ms ease-out;
}

@keyframes centreSwitcherFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.centre-switcher-dropdown-head {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
}

.centre-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  transition: background 100ms;
}

.centre-switcher-item:hover {
  background: #f3f4f6;
}

.centre-switcher-item--active {
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
}

.centre-switcher-item--active:hover {
  background: #d1fae5;
}

.centre-switcher-item-check {
  color: #10b981;
  font-weight: 700;
  font-size: 14px;
}

html[data-theme="dark"] .centre-switcher-dropdown {
  background: #1f2937;
  border-color: #374151;
}

html[data-theme="dark"] .centre-switcher-dropdown-head {
  color: #9ca3af;
  border-bottom-color: #374151;
}

html[data-theme="dark"] .centre-switcher-item {
  color: #e5e7eb;
}

html[data-theme="dark"] .centre-switcher-item:hover {
  background: #374151;
}

html[data-theme="dark"] .centre-switcher-item--active {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent-purple-bg);
  color: var(--color-accent-purple-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}

.icon-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ---------- Main ---------- */
.dashboard-main {
  flex: 1;
  padding: 32px 0 64px;
}

.section {
  margin-top: 32px;
}

.section:first-child {
  margin-top: 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: var(--color-text);
}

.section-count {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Welcome ---------- */
.welcome {
  background: var(--color-surface-alt);
  border-radius: var(--radius-xl);
  padding: 32px;
}

.welcome-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.welcome-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Ressources ---------- */
.resources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.resource-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  color: inherit;
  /* V305 : flex column + min-height pour eviter qu'une tuile orpheline
     (alone sur sa rangee, ex: Partenariats en 5e position quand le grid
     est en 4 colonnes) soit plus petite que les autres. Le grid stretch
     par defaut les tuiles a la hauteur de la rangee la plus haute, mais
     une rangee a une seule tuile prend juste sa propre hauteur de
     contenu. Le min-height aligne tout, peu importe la longueur de la
     description. */
  display: flex;
  flex-direction: column;
  min-height: 168px;
}

.resource-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-text-muted);
}

.resource-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.resource-icon svg {
  width: 20px;
  height: 20px;
}

.resource-icon.coral {
  background: var(--color-accent-coral-bg);
  color: var(--color-accent-coral-fg);
}
.resource-icon.purple {
  background: var(--color-accent-purple-bg);
  color: var(--color-accent-purple-fg);
}
.resource-icon.pink {
  background: var(--color-accent-pink-bg);
  color: var(--color-accent-pink-fg);
}
.resource-icon.teal {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
}
.resource-icon.amber {
  background: var(--color-accent-amber-bg);
  color: var(--color-accent-amber-fg);
}
.resource-icon.gray {
  background: var(--color-accent-gray-bg);
  color: var(--color-accent-gray-fg);
}

.resource-name {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--color-text);
}

.resource-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ---------- Assistance ---------- */
.assistance-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.assistance-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.assistance-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.assistance-icon svg {
  width: 22px;
  height: 22px;
}

.assistance-title {
  margin: 0 0 2px;
  font-weight: 500;
  font-size: 15px;
}

.assistance-sub {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Contacts ---------- */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-card {
  display: block;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  color: inherit;
  transition: background 0.15s, transform 0.15s;
}

.contact-card:hover {
  background: #e9e7df;
  transform: translateY(-1px);
}

.contact-role {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}

.contact-name {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--color-text);
}

.contact-email {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
  word-break: break-all;
}

/* =========================================================
   COMMANDES
   ========================================================= */

.container--wide {
  max-width: 1280px;
}

/* Fil d'Ariane + bouton retour proeminent (V348+) */
.bc-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.bc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, gap 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bc-back-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.bc-back-btn:hover {
  background: var(--color-primary, #6ea4ff);
  border-color: var(--color-primary, #6ea4ff);
  color: #fff;
  gap: 10px;
}
.bc-back-btn:hover svg {
  transform: translateX(-2px);
}
.bc-back-btn--home:hover svg {
  transform: scale(1.08);
}
.bc-back-btn--home svg {
  width: 17px;
  height: 17px;
}
html[data-theme="dark"] .bc-back-btn {
  background: var(--color-surface);
  color: var(--color-text);
}
html[data-theme="dark"] .bc-back-btn:hover {
  background: var(--cr-blue, #6ea4ff);
  color: #14141a;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.crumb {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

a.crumb:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.crumb--current {
  color: var(--color-text);
  font-weight: 500;
}

.crumb-sep {
  color: var(--color-text-tertiary);
  user-select: none;
}

/* Bouton retour */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}

.back-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.back-btn svg {
  width: 16px;
  height: 16px;
}

/* Landing commandes */
.commandes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.commande-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  font-family: inherit;
}

.commande-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-text-muted);
}

.commande-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.commande-tile-icon svg {
  width: 26px;
  height: 26px;
}

.commande-tile-icon--alt {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
}

.commande-tile--primary {
  border-color: var(--color-primary);
  border-width: 2px;
}

.commande-tile--primary:hover {
  border-color: var(--color-primary-hover);
}

.commande-tile-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  color: var(--color-text);
}

.commande-tile-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.commande-tile-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 6px;
}

.commandes-help {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  font-size: 14px;
}

.commandes-help p {
  margin: 0 0 8px;
}

.commandes-help ol,
.commandes-help ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.commandes-help li {
  margin-bottom: 4px;
}

.commandes-help code {
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-text);
}

/* Formulaire commande */
.commande-form {
  margin-top: 24px;
}

.commande-rooms {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-primary-light);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.commande-rooms input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.cat-block {
  margin-bottom: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cat-title {
  margin: 0;
  padding: 14px 18px;
  background: var(--color-surface-alt);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.articles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.articles-table th,
.articles-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.articles-table tbody tr:last-child td {
  border-bottom: none;
}

.articles-table th {
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: none;
  background: var(--color-surface-alt);
}

.articles-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.articles-table .qty-cell {
  width: 160px;
  text-align: center;
}

.art-name {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}

.art-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-bottom: 3px;
}

.art-ref {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
}

.art-contenance {
  padding: 1px 0;
}

.art-min {
  font-size: 11px;
  color: var(--color-text-muted);
}

.art-public {
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}

/* === Bandeau "Ta dernière commande" — affiché en haut du formulaire ===
   Replié par défaut (<details>). Permet au licencié de revoir sa dernière
   commande envoyée et de pré-remplir le formulaire avec les mêmes quantités. */
.last-commande-banner {
  margin: 0 0 24px;
  background: linear-gradient(135deg, #f1f6ff 0%, #fefcf7 100%);
  border: 1px solid #c8d8f0;
  border-radius: 12px;
  overflow: hidden;
}
.last-commande-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.last-commande-summary::-webkit-details-marker { display: none; }
.last-commande-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.last-commande-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--color-text);
}
.last-commande-text small {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 400;
}
.last-commande-prefill {
  flex-shrink: 0;
  white-space: nowrap;
}
.last-commande-chevron {
  font-size: 18px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.last-commande-banner[open] .last-commande-chevron {
  transform: rotate(90deg);
}
.last-commande-body {
  padding: 0 18px 18px 52px;
  font-size: 13px;
  color: var(--color-text);
}
.last-cmd-cat {
  margin: 8px 0;
}
.last-cmd-cat h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft, #6a6a75);
}
.last-cmd-cat ul {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
}
.last-cmd-cat li {
  margin: 2px 0;
  line-height: 1.5;
}
.last-cmd-cat li small {
  color: var(--color-text-soft, #6a6a75);
}

.qty-select {
  width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 28px;
}

.qty-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.qty-select:hover {
  border-color: var(--color-text-muted);
}

.line-total {
  font-weight: 500;
}

/* Rappel règles en haut du formulaire */
.welcome-rules {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.welcome-rules li {
  margin-bottom: 2px;
}

/* Badge conditionnement par article */
.art-cond {
  margin-top: 4px;
}

.art-cond-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Tip métier sur un article (ex. "Le blanc part 2× plus vite…") — affiché
   sous le badge Paquet, en post-it jaune léger pour attirer l'œil sans
   surcharger. Limité à ~2 lignes en pratique. */
.art-tip {
  margin: 8px 0 0;
  padding: 6px 10px;
  background: #fff8e6;
  border-left: 3px solid #f0b400;
  border-radius: 6px;
  font-size: 11.5px;
  color: #6a4f00;
  line-height: 1.4;
  max-width: 380px;
}

/* Note */
.commande-note {
  margin-top: 24px;
}

.commande-note label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.commande-note textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background: var(--color-surface);
}

.commande-note textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* === Recap commande Cléopâtre — sticky bottom ===
   2 lignes : (1) hero (Total HT + breakdown) à gauche + CTA Envoyer à
   droite, (2) KPIs métier en row pleine largeur. Pas de SVG (émoji ✈
   pour le bouton — taille naturelle, pas de risque de blow-up). */
.commande-totals {
  position: sticky;
  bottom: 16px;
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}

/* Ligne 1 : hero total à gauche, CTA à droite */
.ct-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ct-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 320px;
}
.ct-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-soft, #6a6a75);
}
.ct-hero-amount {
  font-family: var(--font-logo);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 2px 0;
}
.ct-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  font-variant-numeric: tabular-nums;
}
.ct-breakdown strong {
  font-weight: 600;
  color: var(--color-text);
}
.ct-breakdown .discount {
  color: var(--cr-green);
}
.ct-breakdown .ct-sep {
  opacity: 0.5;
}
.ct-breakdown [hidden] {
  display: none !important;
}

/* CTA Envoyer — auto-width pour éviter qu'il s'étire à 100 %.
   Override explicite de .btn-primary { width: 100% } global. */
.ct-send-btn {
  width: auto !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.ct-send-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: rotate(45deg);
}

/* Ligne 2 : KPIs métier en row */
.ct-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border, #e9e9ee);
}
.ct-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fafaf7 0%, #f5f1ea 100%);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.ct-kpi--sessions {
  background: linear-gradient(135deg, #eaf2ff 0%, #fefcf7 100%);
}
.ct-kpi--economies {
  background: linear-gradient(135deg, #e8f8e9 0%, #fefcf7 100%);
}
.ct-kpi-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.ct-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.ct-kpi-body strong {
  font-family: var(--font-logo);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text);
  transition: color 0.18s ease;
}
.ct-kpi-body .ct-kpi-label {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.2;
}
.ct-kpi-body small {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  margin-top: 2px;
  font-style: italic;
}
.ct-kpi--economies .ct-kpi-body strong { color: #2d8a3a; }
.ct-kpi--sessions .ct-kpi-body strong { color: #1f4ea8; }

/* Animation pulse au changement de valeur (KPIs) */
@keyframes totalsKpiPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.totals-kpi-pulse {
  animation: totalsKpiPulse 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive : KPIs en colonne sur mobile, CTA full-width en bas */
@media (max-width: 720px) {
  .ct-row-main {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .ct-send-btn {
    width: 100% !important;
  }
  .ct-hero-amount { font-size: 34px; }
  .ct-kpis { grid-template-columns: 1fr; }
}

/* Cellules sessions / économie dans la table articles */
.line-sessions, .line-econo {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.line-cell--zero {
  color: var(--color-text-soft, #aaa);
  font-weight: 400;
}
.art-na {
  color: var(--color-text-soft, #aaa);
  font-size: 14px;
}
/* Élargir un peu la table pour les 2 colonnes en plus */
.articles-table--with-stats th,
.articles-table--with-stats td {
  font-size: 13px;
}
.articles-table--with-stats th.num,
.articles-table--with-stats td.num {
  white-space: nowrap;
}

/* Message seuil de commande (sous le breakdown du recap) — affiché en
   warning si en dessous de 600 € HT, en ok si ≥ 600 € HT. */
.threshold-msg {
  font-size: 12px;
  margin-top: 6px;
  color: var(--color-text-soft, #6a6a75);
}
.threshold-msg .warn { color: var(--cr-red); font-weight: 600; }
.threshold-msg .ok { color: var(--cr-green); font-weight: 600; }

/* =========================================================
   ADMIN — Back Siège
   ========================================================= */

.header-admin-btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s;
}

.header-admin-btn:hover {
  background: #000;
}

/* KPIs en grille */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 860px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.admin-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-kpi-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.admin-kpi-value--small {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 500;
}

.admin-kpi-sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* Cards admin neutres */
.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.admin-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}

.admin-breakdown-row:last-child {
  border-bottom: none;
}

.admin-breakdown-row strong {
  font-variant-numeric: tabular-nums;
}

/* Actions admin */
.admin-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .admin-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-action-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.admin-action-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.admin-action-icon {
  font-size: 28px;
  line-height: 1;
}

.admin-action-title {
  margin: 2px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.admin-action-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.admin-warning {
  background: var(--color-accent-amber-bg);
  border: 1px solid var(--color-accent-amber-fg);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  color: var(--color-accent-amber-fg);
}

.admin-warning p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.55;
}

.admin-warning p:last-child {
  margin-bottom: 0;
}

/* Liste des licenciés (tableau responsive en flex rows) */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.5fr 1.5fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.admin-row:hover {
  transform: translateY(-1px);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.admin-row-name strong {
  font-weight: 500;
}

.admin-row-email {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.admin-row-centre,
.admin-row-parcours {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-row-prog {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.admin-row-prog-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-row-prog-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.admin-row-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cr-orange), var(--cr-red));
  border-radius: 999px;
}

.admin-row-prog-fill--mk {
  background: linear-gradient(90deg, var(--cr-green), var(--cr-blue));
}

.admin-row-prog-val {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.admin-row-chevron {
  font-size: 20px;
  color: var(--color-text-tertiary);
}

@media (max-width: 960px) {
  .admin-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Détail licencié */
.admin-detail-actions {
  margin-top: 10px;
}

.admin-detail-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .admin-detail-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}

.admin-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-lesson-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
}

.admin-lesson-item--done {
  background: var(--color-accent-teal-bg);
  border-color: rgba(8, 80, 65, 0.2);
}

.admin-lesson-item--hidden {
  opacity: 0.5;
}

.admin-lesson-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

.admin-lesson-item--done .admin-lesson-num {
  background: var(--color-accent-teal-fg);
  color: #fff;
}

.admin-lesson-status {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.admin-lesson-item--done .admin-lesson-status {
  color: var(--color-accent-teal-fg);
}

/* Checklist marketing */
.admin-mk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 960px) {
  .admin-mk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-mk-phase {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.admin-mk-phase h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.admin-mk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-mk-item {
  padding: 4px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-mk-item--done {
  color: var(--color-text);
  font-weight: 500;
}

/* =========================================================
   MARKETING — Checklist + kits + outils + playbooks
   ========================================================= */

/* Partage des rôles Siège vs Licencié */
.mk-roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 860px) {
  .mk-roles {
    grid-template-columns: 1fr 1fr;
  }
}

.mk-role {
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.mk-role--hq {
  background: var(--color-accent-purple-bg);
  border-color: rgba(60, 52, 137, 0.15);
}

.mk-role--lic {
  background: var(--color-primary-light);
  border-color: rgba(245, 166, 35, 0.25);
}

.mk-role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  margin-bottom: 10px;
}

.mk-role-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-text);
}

.mk-role-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mk-role-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

.mk-role-list li {
  margin-bottom: 3px;
}

/* Envoyer du contenu au Siège */
.mk-envoi {
  padding: 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mk-envoi-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.mk-envoi-icon {
  font-size: 32px;
  line-height: 1;
}

.mk-envoi-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.mk-envoi-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--color-accent-amber-bg);
  color: var(--color-accent-amber-fg);
  border-radius: 999px;
  margin-top: 4px;
}

.mk-envoi-desc {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.mk-envoi-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.mk-envoi-list li {
  margin-bottom: 2px;
}

/* === AUDIENCE RÉSEAU MARKETING ===
   Bloc en haut de la page Marketing affichant les compteurs d'abonnes
   des comptes nationaux Color Room (Insta / FB / TikTok / LinkedIn).
   Stats animees en count-up via animateAllCountUps() au mount. */
.mk-audience-section {
  background: linear-gradient(135deg, #fafaf7 0%, #f5f1ea 100%);
  border-radius: 18px;
  padding: 24px;
}
.mk-audience-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mk-audience-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--color-text);
}
.mk-audience-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  max-width: 600px;
}
.mk-audience-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.mk-audience-total strong {
  font-family: var(--font-logo);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mk-audience-total span {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: 4px;
}
.mk-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.mk-audience-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.mk-audience-card:hover {
  transform: translateY(-2px);
}
.mk-audience-card--link {
  text-decoration: none;
  cursor: pointer;
}
.mk-audience-card--link:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.mk-audience-card-arrow {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}
.mk-audience-card--link:hover .mk-audience-card-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.mk-audience-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.mk-audience-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mk-audience-card-body strong {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mk-audience-card-name {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}
.mk-audience-card-handle {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 1px;
}
.mk-audience-foot {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  text-align: right;
  font-style: italic;
}
@media (max-width: 640px) {
  .mk-audience-head {
    flex-direction: column;
    gap: 12px;
  }
  .mk-audience-total {
    align-items: flex-start;
  }
  .mk-audience-total strong {
    font-size: 28px;
  }
}

/* Subnav Marketing : entry-cards vers Influenceurs + Revue de presse
   (anciennes tuiles du dashboard, fusionnees ici car sous-ensembles) */
.mk-subnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.mk-subnav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mk-subnav-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(20, 40, 80, 0.06);
}
.mk-subnav-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.mk-subnav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mk-subnav-body strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.mk-subnav-body span {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.4;
}
.mk-subnav-arrow {
  color: var(--color-primary);
  font-size: 18px;
  flex-shrink: 0;
}

.mk-envoi-cta {
  align-self: flex-start;
  width: auto;
  padding: 10px 18px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mk-envoi-cta svg {
  width: 14px;
  height: 14px;
}

/* Ligne avec les 2 CTAs : Drive (primary) + Email (secondary) */
.mk-envoi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.mk-envoi-cta--drive {
  /* Garde le primary (.btn-primary), juste pour cibler si besoin futur */
}
.mk-envoi-cta--mail {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border, #e9e9ee);
}
.mk-envoi-cta--mail:hover {
  background: #f6f6f8;
  border-color: var(--color-primary);
}
.mk-envoi-foot {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}
.mk-envoi-foot strong {
  color: var(--color-text);
  font-weight: 600;
}

.mk-checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}

/* ── Checklist de lancement : FAB + drawer latéral ────────────── */
/* Sortie du flux Marketing : bouton flottant bas-droite qui ouvre
   un panneau latéral (style .plat-drawer). Évite de polluer la
   page tout en restant accessible aux centres pré-lancement. */
.mk-launch-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  background: var(--color-text, #1a1a1f);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mk-launch-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.mk-launch-fab-icon {
  font-size: 20px;
  line-height: 1;
}
.mk-launch-fab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.mk-launch-fab-text strong {
  font-weight: 600;
  font-size: 13px;
}
.mk-launch-fab-text small {
  font-size: 11px;
  opacity: 0.75;
}

.mk-launch-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  animation: mk-launch-fade-in 0.18s ease;
}
.mk-launch-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  background: var(--color-surface);
  z-index: 999;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  animation: mk-launch-slide-in 0.22s ease;
}
body.mk-launch-drawer-open {
  overflow: hidden;
}
.mk-launch-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border, #e9e9ee);
  background: var(--color-surface);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--color-text);
  transition: all 0.12s;
}
.mk-launch-drawer-close:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.mk-launch-drawer-content {
  padding: 22px 28px 32px;
}
.mk-launch-drawer-head {
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--color-border, #e9e9ee);
  margin-bottom: 18px;
}
.mk-launch-drawer-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.mk-launch-drawer-sub {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 12px;
}
.mk-launch-drawer-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mk-launch-drawer-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

@keyframes mk-launch-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mk-launch-slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 720px) {
  .mk-launch-fab {
    bottom: 16px;
    right: 16px;
    padding: 10px 14px 10px 12px;
  }
  .mk-launch-fab-text strong {
    font-size: 12px;
  }
  .mk-launch-drawer {
    width: 100vw;
  }
  .mk-launch-drawer-content {
    padding: 18px 18px 24px;
  }
}

.mk-phase {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mk-phase-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.mk-phase-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  padding: 4px 10px;
  border-radius: 999px;
}

.mk-phase-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.mk-phase-items {
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}

.mk-item:last-child {
  border-bottom: none;
}

.mk-item input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.mk-item--done span {
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
  color: var(--color-text-muted);
}

/* Kits grid */
.mk-kits-grid,
.mk-outils-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .mk-kits-grid,
  .mk-outils-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mk-kits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .mk-outils-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mk-kit-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.mk-kit-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.mk-kit-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}

.mk-kit-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

.mk-kit-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mk-kit-cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
}

/* Preview visuel optionnel en haut de la card (v=183).
   Affiché uniquement si previewImage est renseigné dans config.kits.
   Le téléchargement HD reste via Drive (CTA "Ouvrir dans Drive"). */
.mk-kit-card--with-preview {
  padding: 0;
  overflow: hidden;
}

.mk-kit-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  overflow: hidden;
  display: block;
}

.mk-kit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.mk-kit-card--with-preview:hover .mk-kit-preview img {
  transform: scale(1.04);
}

.mk-kit-card--with-preview .mk-kit-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* État "Bientôt disponible" : card non-cliquable, opacité légère, badge ambré.
   Utilisé quand un kit n'a pas encore de Drive configuré côté Siège. */
.mk-kit-card--soon {
  cursor: default;
  opacity: 0.85;
}

.mk-kit-card--soon:hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow: none;
}

.mk-kit-cta--soon {
  color: #b47500;
  background: #fff8e6;
  border: 1px solid #f3c969;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  align-self: flex-start;
  margin-top: 8px;
  padding-top: 3px;
}

/* Outils */
.mk-outil-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mk-outil-card:hover {
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.mk-outil-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.mk-outil-body {
  min-width: 0;
  flex: 1;
}

.mk-outil-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.mk-outil-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--color-accent-amber-bg);
  color: var(--color-accent-amber-fg);
  border-radius: 999px;
  margin-bottom: 4px;
}

.mk-outil-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Playbooks */
.mk-playbooks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .mk-playbooks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mk-playbook-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.mk-playbook-card--soon {
  background: var(--color-surface-alt);
  opacity: 0.82;
}

.mk-playbook-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.mk-playbook-body {
  min-width: 0;
  flex: 1;
}

.mk-playbook-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.mk-playbook-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mk-playbook-status {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.mk-playbook-status--ok {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
  font-weight: 500;
}

/* ─── Playbook commercial enrichi (expandable) ─── */
.mk-playbook-card--rich {
  display: block;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mk-playbook-card--rich[open] {
  border-color: var(--color-primary, #6ea4ff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.com-pb-summary {
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  cursor: pointer;
}
.com-pb-summary::-webkit-details-marker { display: none; }
.com-pb-summary:hover { background: rgba(0, 0, 0, 0.02); }
.com-pb-chevron {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--color-text-muted, #6a6a75);
  transition: transform 0.2s;
  line-height: 1;
}
.mk-playbook-card--rich[open] .com-pb-chevron {
  transform: rotate(90deg);
}
.com-pb-body {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--color-border, #e9e9ee);
  margin-top: -2px;
  background: var(--color-surface-alt);
}
.com-pb-section { margin-top: 18px; }
.com-pb-section h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.com-pb-section p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
.com-pb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.com-pb-list li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
  padding-left: 16px;
  position: relative;
}
.com-pb-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--color-primary, #6ea4ff);
  font-weight: 700;
}
.com-pb-list--warn li::before {
  content: "⚠";
  color: #c13d31;
  left: 0;
}
.com-pb-formule {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
}
.com-pb-formule-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--color-text);
}
.com-pb-formule-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 10px;
}
.com-pb-formule-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.com-pb-formule-meta div {
  font-size: 12px;
}
.com-pb-formule-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #6a6a75);
  margin: 0 0 2px;
}
.com-pb-formule-meta dd {
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}
.com-pb-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: pb-step;
}
.com-pb-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.com-pb-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary, #6ea4ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.com-pb-step-body {
  flex: 1;
  min-width: 0;
}
.com-pb-step-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--color-text);
}
.com-pb-step-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.com-pb-cal {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.com-pb-cal th, .com-pb-cal td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border, #e9e9ee);
}
.com-pb-cal th {
  font-weight: 500;
  color: var(--color-text-muted, #6a6a75);
  width: 130px;
}
.com-pb-cal tr:last-child th, .com-pb-cal tr:last-child td {
  border-bottom: none;
}
.com-pb-kpi {
  background: #f0fdf4;
  border-left: 3px solid #1a8a4d;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
}
.mk-playbook-card--rich .mk-playbook-card--rich[open] {
  border-color: var(--color-primary, #6ea4ff);
}
.mk-playbooks-grid:has(.mk-playbook-card--rich) {
  grid-template-columns: 1fr;
}

/* ─── Textes commerciaux & légal (page Marketing) ─── */
.txc-intro {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 18px;
  line-height: 1.5;
  max-width: 820px;
}
.txc-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.txc-group-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.txc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.txc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.txc-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.txc-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.1;
}
.txc-meta {
  flex: 1;
  min-width: 0;
}
.txc-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.txc-hint {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  line-height: 1.4;
}
.txc-copy {
  flex-shrink: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  color: var(--color-text);
}
.txc-copy:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.txc-input {
  width: 100%;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--color-surface-alt);
  color: var(--color-text);
  resize: vertical;
}
.txc-input:focus {
  outline: 2px solid var(--color-primary, #6ea4ff);
  outline-offset: 1px;
  background: var(--color-surface);
  border-color: var(--color-primary, #6ea4ff);
}
.txc-input--ta {
  min-height: 110px;
  font-family: var(--font-mono);
  font-size: 12px;
}
/* V356+ : Mode apercu/edition pour les champs avec template reseau */
.txc-card--preview-mode .txc-input--ta { display: none; }
.txc-card--preview-mode.txc-card--editing .txc-preview,
.txc-card--preview-mode.txc-card--editing .txc-preview-controls { display: none; }
.txc-card--preview-mode.txc-card--editing .txc-editor { display: block !important; }
.txc-card--preview-mode.txc-card--editing .txc-input--ta { display: block; min-height: 320px; }

.txc-preview {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 110px;
  overflow: hidden;
  position: relative;
}
.txc-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--color-surface-alt));
  pointer-events: none;
}
.txc-preview-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.txc-preview-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-style: italic;
}
.txc-preview-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.txc-preview-controls .btn-secondary {
  font-size: 12.5px;
  padding: 6px 12px;
}
.txc-editor {
  display: none;
}
.txc-editor-done {
  margin-top: 10px;
  font-size: 12.5px;
  padding: 7px 14px;
}
.txc-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.txc-counter {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.txc-counter--warn { color: #b47500; }
.txc-counter--over {
  color: #c13d31;
  font-weight: 600;
}
.txc-utilise {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 10px;
  color: var(--color-text-soft, #6a6a75);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.txc-utilise li {
  background: #f0f4ff;
  color: #2a4d99;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.txc-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.txc-status {
  font-size: 12px;
  color: #1a8a4d;
  font-weight: 500;
}

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

/* Sauvegarde export/import progression */
.backup-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-items: flex-start;
}

.backup-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.backup-body {
  flex: 1;
  min-width: 0;
}

.backup-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.backup-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.backup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.backup-actions .btn-primary,
.backup-actions .btn-secondary {
  padding: 8px 16px;
  font-size: 13px;
  width: auto;
}

.backup-actions .btn-primary svg {
  width: 14px;
  height: 14px;
}

.backup-import-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   COMMERCIAL — 4 canaux + actions + KPIs
   ========================================================= */

/* Bannière "Vitesse de réponse = enjeu n°1" en haut de page Commercial.
   Affichée juste après le hero pour cadrer le mindset avant les segments. */
.com-speed-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(135deg, #fff8e6 0%, #fff2d1 100%);
  border: 1px solid #f3c969;
  border-left: 5px solid #e8a93b;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 26px;
}

.com-speed-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.com-speed-content {
  flex: 1;
  min-width: 0;
}

.com-speed-title {
  margin: 0 0 8px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: #6b4a0f;
}

.com-speed-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5a4216;
}

.com-speed-text strong {
  color: #3d2c0a;
}

.com-speed-targets {
  margin: 0 0 12px 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #5a4216;
}

.com-speed-targets li + li {
  margin-top: 2px;
}

.com-speed-targets strong {
  color: #3d2c0a;
}

.com-speed-tip {
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  color: #4a3410;
}

@media (max-width: 600px) {
  .com-speed-banner {
    flex-direction: column;
    gap: 10px;
    padding: 18px;
  }
  .com-speed-icon {
    font-size: 30px;
  }
  .com-speed-title {
    font-size: 17px;
  }
}

/* Section Prospection sortante / Scraping B2B (v=171, déplacée depuis Marketing) */
.prospection-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.prospection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.prospection-summary::-webkit-details-marker {
  display: none;
}

.prospection-summary > div {
  flex: 1;
  min-width: 0;
}

.prospection-summary strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}

.prospection-intro {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.prospection-chevron {
  font-size: 22px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.prospection-card[open] .prospection-chevron {
  transform: rotate(90deg);
}

.prospection-body {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--color-border);
}

.prospection-etapes {
  list-style: none;
  margin: 0;
  padding: 18px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prospection-etape {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.prospection-etape-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prospection-etape-body {
  flex: 1;
  min-width: 0;
}

.prospection-etape-titre {
  margin: 0 0 4px 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.prospection-etape-desc {
  margin: 0 0 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.prospection-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prospection-outil-chip {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.prospection-etape--soon {
  opacity: 0.75;
  position: relative;
}

.prospection-etape--soon .prospection-etape-num {
  background: #d1d5db;
  color: #4b5563;
}

.prospection-etape--soon .prospection-etape-titre {
  color: var(--color-text-muted);
}

.prospection-etape-soon {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  background: #fff8e6;
  color: #5a4216;
  border: 1px solid #f3d68b;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.prospection-kpi,
.prospection-attention {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
}

.prospection-kpi {
  background: #eef7ff;
  border: 1px solid #b9dcff;
}

.prospection-attention {
  background: #fff4e6;
  border: 1px solid #f3c969;
  color: #5a4216;
}

.prospection-attention strong {
  color: #3d2c0a;
}

.com-canaux-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 720px) {
  .com-canaux-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .com-canaux-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.com-canal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card avec contenu détaillé : devient une <details> cliquable.
   Le summary reprend les mêmes blocs internes (head/desc/kpis/CTA),
   et le body s'ouvre dessous avec le détail (formules, process, etc.). */
.com-canal-card--rich {
  display: block;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.com-canal-card--rich[open] {
  border-color: var(--color-primary, #6ea4ff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.com-canal-summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
}
.com-canal-summary::-webkit-details-marker { display: none; }
.com-canal-summary:hover { background: rgba(0, 0, 0, 0.02); }
.com-canal-card--rich .com-pb-body {
  border-top: 1px solid var(--color-border, #e9e9ee);
  background: var(--color-surface-alt);
  padding: 4px 18px 18px;
}
.com-canal-chevron {
  margin-left: auto;
  font-size: 22px;
  color: var(--color-text-muted, #6a6a75);
  transition: transform 0.2s;
  line-height: 1;
}
.com-canal-card--rich[open] .com-canal-chevron {
  transform: rotate(90deg);
}

.com-canal-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.com-canal-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.com-canal-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.com-canal-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.com-canal-kpis {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--color-surface-alt);
  border-radius: 10px;
  font-size: 12px;
}

.com-canal-kpi {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.com-canal-kpi-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 78px;
}

.com-canal-kpi strong {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 500;
}

.com-canal-bonus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  align-self: flex-start;
}

.com-canal-bonus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.com-pb-section--mecenat {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 18px;
}

.com-pb-section--mecenat h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #065f46;
}

.com-pb-section--mecenat h5 {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
}

.com-pb-section--mecenat p,
.com-pb-section--mecenat li {
  color: #1f2937;
}

.com-pb-mecenat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.com-pb-mecenat-warn {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 13px;
  color: #78350f;
}

.com-pb-mecenat-warn strong {
  color: #78350f;
}

.com-canal-cta {
  display: inline-block;
  margin-top: auto;
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  padding-top: 4px;
}

.com-canal-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Actions courantes */
.com-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .com-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.com-action {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.com-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.com-action-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.com-action-freq {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--color-accent-purple-bg);
  color: var(--color-accent-purple-fg);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.com-action-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* KPIs */
.com-kpis-intro {
  font-size: 13px;
  margin: 0 0 12px;
}

.com-kpis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .com-kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .com-kpis-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.com-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.com-kpi-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.com-kpi-desc {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.com-kpi-cibles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  margin-top: 6px;
}

.com-kpi-cibles div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.com-kpi-cibles .muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.com-kpi-cibles strong {
  font-size: 13px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.com-drive-link {
  display: inline-block;
  padding: 10px 18px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.com-drive-link:hover {
  background: var(--color-primary-light);
}

/* Kit emails */
.email-kit-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.email-kit-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-kit-step-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 14px;
  background: #1a1a1a;
  color: #fff;
  border-radius: var(--radius-md);
}
.email-kit-step-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
}
.email-kit-step-count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  grid-column: 2;
  grid-row: 1;
}
.email-kit-step-desc {
  font-size: 12.5px;
  opacity: 0.78;
  margin: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.45;
}
.email-kit-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-template {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.email-template[open] {
  border-color: var(--color-text-muted);
}

.email-template-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.email-template-head::-webkit-details-marker {
  display: none;
}

.email-template-head:hover {
  background: var(--color-surface-alt);
}

.email-template-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.email-template-info {
  flex: 1;
  min-width: 0;
}

.email-template-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.email-template-usage {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.email-template-chevron {
  font-size: 20px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.email-template[open] .email-template-chevron {
  transform: rotate(90deg);
}

.email-template-body {
  padding: 4px 18px 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.email-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.email-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.email-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.email-field-value {
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
  word-break: break-word;
}

.email-field-value--pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

.email-copy-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.email-copy-btn:hover {
  background: var(--color-primary-hover);
}

.email-copy-btn--done {
  background: var(--cr-green);
}

.email-hint {
  padding: 8px 12px;
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-primary-dark);
}

.email-hint code {
  background: var(--color-surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* Guide outils d'envoi */
.email-warning {
  padding: 14px 18px;
  background: var(--color-accent-amber-bg);
  border: 1px solid rgba(99, 56, 6, 0.22);
  border-radius: var(--radius-md);
  color: var(--color-accent-amber-fg);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* Tableau comparatif outils d'envoi (v=188).
   Remplace les 3 cartes détaillées : décision en 5s grâce au verdict
   ✅/❌/⚠️ par use case et par outil. La colonne "recommandée" (Brevo)
   est mise en valeur via une bordure et un badge. Sur mobile (<720px),
   le wrap autorise le scroll horizontal pour préserver la lisibilité. */
.email-cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.email-cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 560px;
}

.email-cmp-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

.email-cmp-th {
  padding: 14px 12px 12px;
  text-align: center;
  vertical-align: bottom;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.email-cmp-th--corner {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.email-cmp-th--reco {
  background: var(--color-primary-light);
  border-bottom-color: var(--color-primary);
}

.email-cmp-th-icon {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}

.email-cmp-th-name {
  display: block;
  font-size: 13px;
}

.email-cmp-th-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-cmp-row-label {
  text-align: left;
  font-weight: 500;
  color: var(--color-text);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  width: 50%;
}

.email-cmp-td {
  text-align: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.email-cmp-cell {
  font-size: 18px;
  line-height: 1;
}

.email-cmp-row-info .email-cmp-row-label {
  background: var(--color-surface-alt);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.email-cmp-td--info {
  background: var(--color-surface-alt);
  font-size: 12px;
  color: var(--color-text-muted);
}

.email-cmp-table tbody tr:last-child .email-cmp-row-label,
.email-cmp-table tbody tr:last-child .email-cmp-td {
  border-bottom: none;
}

/* Mise en valeur de la colonne recommandée sur tout le tableau.
   On cible la 4e cellule (3 outils + 1 col label) : si l'ordre des
   outils change dans config.js, il faudra ajuster. */
.email-cmp-table tbody td:nth-child(4) {
  background: rgba(110, 164, 255, 0.05);
}

.email-cmp-row-info .email-cmp-td:nth-child(4) {
  background: rgba(110, 164, 255, 0.10);
}

.email-reco {
  margin: 14px 0 0;
  padding: 14px 18px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-primary-dark);
  line-height: 1.55;
  font-weight: 500;
}

/* =========================================================
   SUPPORT TECHNIQUE — FAQ + guides + canaux
   ========================================================= */

/* Canaux de contact (top) */
.canaux-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 860px) {
  .canaux-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.canal-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.canal-icon {
  font-size: 30px;
  line-height: 1;
}

.canal-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.canal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.canal-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.canal-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.canal-cta {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 14px;
}

/* FAQ accordéon */
.faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Catégorie FAQ : <details> repliable. La <summary> contient le titre,
   le compteur et le chevron. Cliquable sur toute la ligne. */
.faq-cat {
  border-bottom: 1px solid var(--color-border);
}

.faq-cat:last-child {
  border-bottom: none;
}

.faq-cat-title {
  margin: 0;
  padding: 12px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.15s ease;
  border-radius: var(--radius-md);
}

.faq-cat-title::-webkit-details-marker {
  display: none;
}

.faq-cat-title:hover {
  background: var(--color-surface-alt);
}

.faq-cat-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.faq-cat-label {
  flex: 1;
  min-width: 0;
}

.faq-cat-count {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Le chevron tourne quand la catégorie est ouverte */
.faq-cat-chevron {
  font-size: 22px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.faq-cat[open] > .faq-cat-title > .faq-cat-chevron {
  transform: rotate(90deg);
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 12px;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}

.faq-item[open] {
  border-color: var(--color-text-muted);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  list-style: none;
  user-select: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q:hover {
  background: var(--color-surface-alt);
}

.faq-q-text {
  flex: 1;
  min-width: 0;
}

.faq-chevron {
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(90deg);
}

.faq-a {
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 0;
}

/* Guides outils */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

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

@media (min-width: 960px) {
  .guides-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.guide-card {
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}

.guide-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

.guide-desc {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.guide-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.guide-link {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}

.guide-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   ONBOARDING — Timeline + Outils + Team
   ========================================================= */

/* Timeline verticale (mobile) + horizontale (desktop) */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

.timeline-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 14px 0;
  position: relative;
  border-left: 2px dashed var(--color-border);
  margin-left: 40px;
  padding-left: 24px;
}

.timeline-step:last-child {
  border-left-color: transparent;
}

.timeline-step-marker {
  position: absolute;
  left: -16px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.timeline-step-body {
  grid-column: 2;
}

.timeline-step-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.timeline-step-date {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.timeline-step-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.timeline-step--done .timeline-step-marker {
  background: var(--color-accent-teal-bg, #d1f4e0);
  border-color: var(--color-accent-teal-fg, #1e8449);
}

.timeline-step--done .timeline-step-label {
  color: var(--color-accent-teal-fg, #1e8449);
}

/* V253 : check ✓ visible dans le marker des steps passés (remplace le label
   M-3 / M-2 / etc. quand done — la date suffit dans le body). */
.timeline-step--done .timeline-step-check {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent-teal-fg, #1e8449);
  line-height: 1;
}

.timeline-step--done .timeline-step-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
  text-decoration-thickness: 1.5px;
}

.timeline-step--done .timeline-step-desc {
  color: var(--color-text-tertiary, #999);
  opacity: 0.75;
}

.timeline-step--current .timeline-step-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.timeline-step--current .timeline-step-label {
  color: #fff;
}

.timeline-step--current .timeline-step-body {
  background: var(--color-primary-light);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: -4px;
}

.timeline-step--pivot .timeline-step-marker {
  transform: scale(1.15);
}

.timeline-step:last-child {
  padding-bottom: 4px;
}

/* Outils grid */
.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

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

@media (min-width: 960px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.tool-icon {
  font-size: 28px;
  line-height: 1;
}

.tool-name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.tool-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-radius: 999px;
  margin-bottom: 4px;
}

.tool-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.tool-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--color-surface-alt);
  color: var(--color-primary-dark);
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.tool-cta:hover {
  background: var(--color-primary-light);
}

/* Partenaires grid */
.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

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

@media (min-width: 960px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.partner-card:hover {
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
}

.partner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.partner-icon {
  font-size: 28px;
  line-height: 1;
}

.partner-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partner-status--obligatoire {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.partner-status--offert {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
}

.partner-status--reduit {
  background: var(--color-accent-amber-bg);
  color: var(--color-accent-amber-fg);
}

.partner-status--actif {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
}

.partner-status--optionnel {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.partner-cat {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.partner-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
  line-height: 1.2;
}

.partner-avantage {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-dark);
  padding: 6px 10px;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  margin: 4px 0 2px;
  line-height: 1.4;
}

.partner-desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.partner-cta {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.partner-cta:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

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

@media (min-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.team-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.team-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-purple-bg);
  color: var(--color-accent-purple-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}

.team-avatar--emoji {
  background: var(--color-accent-coral-bg);
  font-size: 22px;
}

.team-avatar--photo {
  background: var(--color-surface-alt, #f1f1f1);
  overflow: hidden;
  position: relative;
  padding: 0;
}

.team-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-avatar-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-purple-bg);
  color: var(--color-accent-purple-fg);
  font-weight: 600;
  font-size: 15px;
}

.team-body {
  min-width: 0;
  flex: 1;
}

.team-role {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.team-name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.team-resp {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.team-email {
  font-size: 12px;
  color: var(--color-primary);
  word-break: break-all;
}

/* =========================================================
   PAGE "MON ÉQUIPE" — gestion des accès staff (route #/team)
   Préfixe .tm-* pour éviter conflit avec les .team-card du dashboard.
   ========================================================= */

.page-tm {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.tm-section {
  margin-bottom: 24px;
  padding: 24px;
}

.tm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.tm-section-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.tm-counter {
  font-size: 13px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 10px;
  border-radius: 12px;
}

.tm-banner {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.5;
}
.tm-banner--ok { background: #ecfdf5; color: #065f46; border-left: 3px solid #10b981; }
.tm-banner--warn { background: #fffbeb; color: #78350f; border-left: 3px solid #f59e0b; }
.tm-banner--err { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }

.tm-error {
  background: #fef2f2;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  margin: 12px 0;
}

.tm-loading {
  color: var(--color-text-muted);
  font-size: 13.5px;
  padding: 12px 0;
}

.tm-empty {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px 0;
}

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

.tm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-blue-bg, #dbeafe);
  color: var(--color-accent-blue-fg, #1e40af);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.tm-info {
  flex: 1;
  min-width: 0;
}
.tm-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.tm-email {
  font-size: 12.5px;
  color: var(--color-text-muted);
  word-break: break-all;
}
.tm-meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.tm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}
.tm-badge--ok { background: #d1fae5; color: #065f46; }
.tm-badge--off { background: #fee2e2; color: #991b1b; }

.tm-actions {
  flex-shrink: 0;
}

.tm-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .tm-form-row { grid-template-columns: 1fr; }
  .tm-row { flex-wrap: wrap; }
  .tm-actions { width: 100%; }
}
.tm-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Page admin Sécurité — filtres + tables logs */
.sec-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.sec-filter-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}
.sec-filter-row select,
.sec-filter-row input[type="text"] {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--color-surface);
}
.sec-feed-table .muted {
  color: var(--color-text-muted);
  font-size: 11.5px;
}

/* === Heatmap usage admin (V326+) === */
.hm-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .hm-summary-grid { grid-template-columns: 1fr; }
}
.hm-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.hm-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-rank-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.hm-rank-list li:last-child { border-bottom: 0; }
.hm-rank-label { color: var(--color-text); }
.hm-rank-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hm-table-wrap {
  overflow-x: auto;
  padding: 12px;
}
.hm-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}
.hm-table th,
.hm-table td {
  padding: 6px 10px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.hm-table thead th {
  background: var(--color-surface-alt);
  font-weight: 500;
  vertical-align: bottom;
  position: sticky;
  top: 0;
}
.hm-corner {
  background: var(--color-surface-alt) !important;
  text-align: left !important;
  position: sticky;
  left: 0;
  z-index: 1;
}
.hm-col-label {
  white-space: nowrap;
  max-width: 180px;
  font-weight: 500;
}
.hm-col-label span {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-row-label {
  text-align: left !important;
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  white-space: nowrap;
}
.hm-row-label .muted { font-size: 11px; }
.hm-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 50px;
  transition: filter 0.12s;
}
.hm-cell:hover { filter: brightness(1.15); }
.hm-row-total {
  font-weight: 700;
  background: var(--color-surface-alt);
}

/* V350+ : colonnes temps passe + temps moyen / session */
.hm-time-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-alt);
  padding: 8px 10px;
  text-align: center;
}
.hm-time-cell .muted { font-size: 11px; display: block; }

.hm-time-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.hm-time-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border-radius: 10px;
}
.hm-time-stat-num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hm-time-stat-lbl {
  font-size: 12px;
  color: var(--color-text-muted, #6b6f7a);
}
@media (max-width: 720px) {
  .hm-time-totals { grid-template-columns: 1fr; gap: 8px; }
}

/* === RESPONSIVE GRANDS ECRANS (V329+) ===
   Adaptation au-dessus de 1440px (laptop premium, 27", iMac, 4K). Le
   container reste lisible (limite ~80 caracteres de texte) mais on
   gagne en respiration et densite ou ca compte (cards, grids). */

/* Laptop premium 1440-1700px : container un peu plus large + paddings aeres */
@media (min-width: 1440px) {
  .container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
  .resources-grid { gap: 24px; }
  .admin-actions-grid { gap: 24px; }
  .part-galaxy-stage { max-width: 1080px; }
}

/* Desktop large 1700-2200px : 5 colonnes resources possibles */
@media (min-width: 1700px) {
  .container { max-width: 1400px; }
  .resources-grid {
    /* On reste sur 4 colonnes mais avec gap plus large pour respirer */
    gap: 28px;
  }
  .part-galaxy-stage {
    max-width: 1200px;
    /* Ne pas trop ecarter : la constellation doit rester homogene */
  }
}

/* Ultra-wide / 4K 2200px+ : limite a 1500px max pour la lisibilite,
   centrage dans l'ecran avec generous whitespace lateral. */
@media (min-width: 2200px) {
  .container { max-width: 1500px; }
  /* Le dashboard reste centre, on n'agrandit plus pour eviter les
     lignes de texte trop longues (>80 chars = inconfort lecture). */
}

/* FLUID TYPOGRAPHY : les titres scalent doucement avec la viewport
   pour eviter qu'ils paraissent petits sur un 27" ou enormes sur petit
   ecran. clamp(min, fluid, max). */
.page-title { font-size: clamp(22px, 2.2vw, 32px); }
.welcome-title { font-size: clamp(20px, 2vw, 28px); }

/* === RESPONSIVE FIXES MOBILE (V328+) ===
   Patches finaux pour les 5% restants identifies en test reel iPhone. */

/* 1. HEADER mobile : trop d'elements (lang+theme+admin+centre+avatar+logout)
   sur petit ecran. On masque progressivement le moins critique. */
@media (max-width: 640px) {
  .app-header-inner {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-right { gap: 6px; flex-wrap: nowrap; }
  .header-right .centre-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  .brand-text .brand-subtitle {
    /* "Espace licencié" prend trop de place */
    display: none;
  }
}
@media (max-width: 480px) {
  .header-right .centre-name { display: none; }
  .header-right .lang-switcher { display: none; }
  .header-admin-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  .theme-toggle { width: 32px; height: 32px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* 2. INPUTS / SELECT touch-friendly sur mobile (cible 44px min hauteur,
   16px font-size pour eviter le zoom auto iOS). */
@media (max-width: 540px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
    padding: 10px 12px;
  }
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* 3. KPI HISTORY TABLE - manquait wrapper overflow sur mobile */
.kpi-history-table { width: 100%; border-collapse: collapse; }
@media (max-width: 720px) {
  .kpi-history-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .kpi-history-table thead,
  .kpi-history-table tbody,
  .kpi-history-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}

/* 4. ONBOARDING TIMELINE : empeche le debordement horizontal sur mobile */
@media (max-width: 720px) {
  .onb-timeline,
  .onb-quest-timeline,
  .onb-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
}

/* 5. TABLES ADMIN GENERIQUES sur mobile - reduire la font */
@media (max-width: 720px) {
  .admin-table,
  .me-table,
  .me-benchmark-table { font-size: 12px; }
}

/* 6. HEATMAP ADMIN - compresse paddings sur mobile */
@media (max-width: 540px) {
  .hm-table th,
  .hm-table td { padding: 4px 6px; font-size: 11px; }
  .hm-cell { min-width: 36px; }
  .hm-row-label .muted { display: none; }
  .hm-summary-grid { gap: 12px; }
}

/* 7. CONTAINER global - reduire padding lateral pour gagner de la place */
@media (max-width: 540px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .page-tm,
  .dashboard-main { padding-left: 12px; padding-right: 12px; }
  .page-header h1.page-title { font-size: 22px; }
  .welcome-title { font-size: 20px; }
}

/* 8. CARTES qui debordent : forcer max-width: 100% partout */
@media (max-width: 540px) {
  .resource-card,
  .part-card,
  .part-reco-card,
  .admin-card,
  .card,
  .tm-row,
  .tm-section { max-width: 100%; box-sizing: border-box; }
  .resources-grid { grid-template-columns: 1fr !important; }
}

/* 9. MODALS plein ecran sur mobile */
@media (max-width: 540px) {
  .tuto-card,
  .modal-card,
  .cms-modal-content,
  .presse-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px;
  }
}

/* 10. KEY ANTI-DEBORDEMENT : empeche horizontal scroll global */
html, body {
  overflow-x: hidden;
}

/* Bloc Alertes (scraping, connexions anormales) du dashboard sécurité */
.sec-alerts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  background: rgba(0, 0, 0, 0.02);
}
.sec-alert--high {
  background: #fef2f2;
  border-left-color: #ef4444;
}
.sec-alert--medium {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
.sec-alert--low {
  background: #f0f9ff;
  border-left-color: #0ea5e9;
}
.sec-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.sec-alert-body { flex: 1; min-width: 0; }
.sec-alert-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.sec-alert-email {
  font-size: 12.5px;
  color: var(--color-text);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.sec-alert-msg {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* =========================================================
   FORMATION — Section Dashboard
   ========================================================= */

.fprog-section {
  margin-top: 32px;
}

.fprog-card {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fprog-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.fprog-text {
  flex: 1;
  min-width: 200px;
}

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

.fprog-lock-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-primary-dark);
  font-weight: 500;
}

.fprog-percent {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.fprog-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.fprog-bar--lg {
  height: 14px;
  margin-top: 16px;
}

.fprog-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cr-orange), var(--cr-red));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.fprog-summary {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}

.fprog-cta {
  align-self: flex-start;
  width: auto;
  padding: 10px 22px;
}

/* Écran de choix de parcours */
.parcours-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 860px) {
  .parcours-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.parcours-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.parcours-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.parcours-card-icon {
  font-size: 32px;
}

.parcours-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.parcours-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}

.parcours-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.parcours-card-meta {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.parcours-card-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.parcours-hint {
  font-size: 12px;
  margin: 16px 0 0;
}

/* Badge parcours dans la page Formation */
.parcours-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 10px 0 4px;
}

.parcours-badge-icon {
  font-size: 16px;
}

.parcours-badge strong {
  color: var(--color-text);
  font-weight: 500;
}

/* Bouton lien en ligne (changer de parcours) */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 10px;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-btn:hover {
  color: var(--color-primary-hover);
}

/* Section Formation — page liste */
.flesson-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flesson-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.flesson-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-text-muted);
}

.flesson-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.flesson-main {
  flex: 1;
  min-width: 0;
}

.flesson-title {
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.flesson-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.flesson-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.flesson-status--done {
  background: var(--color-accent-teal-bg);
  color: var(--color-accent-teal-fg);
  font-weight: 500;
}

/* Page Leçon — Loom iframe */
.welcome-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Layout vertical : video en haut, slides qui defilent dessous (v=188).
   Avant : 2 colonnes (slides a gauche, video sticky a droite) - moins
   lisible, slides etroites, video petite. Maintenant la video occupe
   toute la largeur disponible et le texte scrolle naturellement. */
.lesson-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 24px 0;
}

.lesson-video-col {
  width: 100%;
  /* Centre la video sur les grands ecrans pour eviter qu'elle soit trop
     large et difficile a regarder en entier (max 900px = ~50ch). */
  max-width: 900px;
  margin: 0 auto;
}

.lesson-slides-col {
  min-width: 0;
  width: 100%;
}

.loom-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}

.loom-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.loom-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.loom-placeholder-icon {
  font-size: 28px;
}

/* Slides dans une leçon */
.slides-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0 32px;
}

.slide {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.slide--hero {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
  padding: 48px 40px;
  text-align: center;
}

.slide--conclusion {
  background: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.slide-kicker {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.slide-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--color-text);
}

.slide--hero .slide-title {
  font-size: 40px;
}

.slide-subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-primary-dark);
  margin: 0 0 16px;
}

.slide-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 20px;
  max-width: 760px;
}

.slide--hero .slide-intro {
  margin: 0 auto 20px;
}

.slide-items {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.slide-items--1 { grid-template-columns: 1fr; }
.slide-items--2 { grid-template-columns: repeat(2, 1fr); }
.slide-items--3 { grid-template-columns: 1fr; }
.slide-items--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .slide-items--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Layout vertical (v=188) : on profite de la largeur pleine pour les
   grilles de slides - 3 cards = 3 cols, 4 cards = 4 cols sur desktop,
   pas de cap a 2 cols comme avant. */
@media (min-width: 760px) {
  .lesson-slides-col .slide-items--3 { grid-template-columns: repeat(3, 1fr); }
  .lesson-slides-col .slide-items--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .lesson-slides-col .slide-items--4 { grid-template-columns: repeat(4, 1fr); }
}

.slide-item {
  padding: 16px 18px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.slide--conclusion .slide-item {
  background: var(--color-surface);
}

.slide-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.slide-item-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.slide-footer {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  font-size: 14px;
  color: var(--color-primary-dark);
  font-style: italic;
}

/* Actions bas de leçon */
.lesson-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.btn-mark-done {
  padding: 14px 24px;
  font-size: 15px;
  width: 100%;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.btn-secondary svg {
  width: 14px;
  height: 14px;
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Verrou tuile Ressources */
.resource-card {
  position: relative;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.resource-card--locked {
  opacity: 0.72;
}

.resource-card--locked:hover {
  transform: none;
  box-shadow: none;
}

.resource-lock {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 18px;
}

.resource-card--coming {
  cursor: not-allowed;
  position: relative;
}
.resource-card--coming:hover {
  transform: none;
  box-shadow: none;
}
.resource-coming-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .lesson-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .btn-mark-done {
    width: auto;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 640px) {
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contacts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .commandes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .resources-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-main {
    padding: 40px 0 80px;
  }
}

/* 7+ tuiles : passer en 4 colonnes au-delà de 1200px pour éviter l'orphelin */
@media (min-width: 1200px) {
  .resources-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  .centre-name {
    display: none;
  }
  .welcome {
    padding: 24px;
  }
  .welcome-title {
    font-size: 22px;
  }
  .login-card {
    padding: 32px 24px;
  }
  .login-title {
    font-size: 28px;
  }
}

/* =========================================================
   VALIDATION FINALE — Module 14
   ========================================================= */

.flesson-row--locked {
  opacity: 0.72;
  cursor: not-allowed;
}
.flesson-row--cert {
  border: 2px solid #c9a227;
  background: linear-gradient(135deg, #fff9e6 0%, var(--color-surface) 60%);
}

.val-attempts {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

.val-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}
.val-rule {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.val-rule strong {
  font-size: 16px;
  color: var(--color-text);
}
.val-rule span {
  font-size: 13px;
  color: var(--color-muted);
}
.val-rule--success {
  background: #fff9e6;
  border-color: #c9a227;
}
.val-rule--success strong { color: #8c5c0a; }

.val-part {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.val-part-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.val-part-title {
  font-size: 18px;
  margin: 0;
}
.val-part-max {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 500;
}
.val-part-desc {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.val-questions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.val-question {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.val-question:first-child {
  border-top: none;
  padding-top: 0;
}
.val-q-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.val-q-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.val-q-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}
.val-expected {
  background: var(--color-surface-alt);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 10px 40px;
  line-height: 1.5;
}
.val-expected strong {
  color: var(--color-text);
}
.val-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 40px;
}
.val-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-surface);
}
.val-option:hover {
  border-color: var(--color-primary);
  background: #fef8ee;
}
.val-option--checked {
  border-color: var(--color-primary);
  background: #fef8ee;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}
.val-option input[type="radio"] {
  accent-color: var(--color-primary);
}
.val-option-label {
  font-size: 14px;
}

.val-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Résultat */
.val-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  margin: 20px 0;
  text-align: center;
}
.val-result-card--success {
  background: linear-gradient(135deg, #fff9e6 0%, var(--color-surface) 60%);
  border-color: #c9a227;
}
.val-result-card--warn {
  background: #fff5e1;
  border-color: #f0b83a;
}
.val-result-card--danger {
  background: #fdecec;
  border-color: #d14242;
}
.val-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.val-badge-icon {
  font-size: 48px;
}
.val-badge-text h3 {
  margin: 0;
  font-size: 20px;
  color: #8c5c0a;
}
.val-badge-text p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--color-muted);
}
.val-result-title {
  font-size: 20px;
  margin: 0 0 8px;
}
.val-result-msg {
  font-size: 14px;
  margin: 0 auto 16px;
  max-width: 560px;
  line-height: 1.55;
  color: var(--color-muted);
}
.val-score-big {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-top: 8px;
}
.val-score-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}
.val-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.val-breakdown-row {
  display: grid;
  grid-template-columns: 1.4fr auto 2fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.val-breakdown-label {
  font-weight: 500;
}
.val-breakdown-score {
  color: var(--color-muted);
  font-size: 13px;
}
.val-breakdown-bar {
  height: 8px;
  background: #f0eee6;
  border-radius: 4px;
  overflow: hidden;
}
.val-breakdown-bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s;
}
.val-breakdown-pct {
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .val-rules { grid-template-columns: 1fr; }
  .val-breakdown-row { grid-template-columns: 1fr; gap: 4px; }
  .val-options, .val-expected { margin-left: 0; }
  .val-actions { flex-direction: column; }
  .val-actions button { width: 100%; }
}

/* Validation — Version banner + score par domaine + parcours correctif */
.val-version-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--color-warm-light);
  border: 1px solid var(--color-warm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-warm-dark);
  font-weight: 500;
}

.val-domains {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.val-domain-row {
  display: grid;
  grid-template-columns: 1.6fr 2fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.val-domain-row:last-child { border-bottom: none; }
.val-domain-row--weak {
  background: #fdecec;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-bottom: none;
  border: 1px solid #f5a9a9;
}
.val-domain-label { font-weight: 500; }
.val-domain-bar {
  height: 10px;
  background: #f0eee6;
  border-radius: 5px;
  overflow: hidden;
}
.val-domain-bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.4s ease;
}
.val-domain-row--weak .val-domain-bar-fill { background: #d14242; }
.val-domain-pct { font-size: 14px; font-weight: 700; min-width: 44px; text-align: right; }
.val-domain-score { font-size: 12px; color: var(--color-muted); min-width: 76px; text-align: right; }

.val-corrective-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.val-corrective-card {
  background: var(--color-warm-light);
  border: 1px solid var(--color-warm);
  border-radius: var(--radius-md);
  padding: 18px;
}
.val-corrective-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.val-corrective-title { margin: 0; font-size: 16px; color: var(--color-warm-dark); }
.val-corrective-pct { font-size: 14px; font-weight: 700; color: var(--color-danger-dark); }
.val-corrective-desc { font-size: 13px; color: var(--color-muted); margin: 0 0 14px; line-height: 1.5; }
.val-corrective-section { margin-bottom: 12px; font-size: 13px; }
.val-corrective-section strong { display: block; margin-bottom: 6px; color: var(--color-text); }
.val-corrective-section ul { margin: 0; padding-left: 20px; }
.val-corrective-section li { margin-bottom: 4px; line-height: 1.5; }
.val-corrective-section a { color: var(--color-primary); text-decoration: none; }
.val-corrective-section a:hover { text-decoration: underline; }

.val-result-msg--success {
  color: #5a7c2f;
  font-weight: 500;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .val-domain-row { grid-template-columns: 1fr; gap: 4px; }
  .val-domain-pct, .val-domain-score { text-align: left; }
}

/* =========================================================
   ADMIN — Envoi d'emails (mailto + templates)
   ========================================================= */
.admin-email-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-email-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  transition: all 0.15s;
}
.admin-email-tab:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.admin-email-tab--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}
.admin-email-tab-icon { font-size: 16px; }
.admin-email-template-desc {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-email-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-email-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-items: center;
}
.admin-email-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-email-licencie {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-email-licencie strong { font-size: 15px; }
.admin-email-centre {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 2px 8px;
  background: var(--color-surface-alt);
  border-radius: 10px;
}
.admin-email-address {
  font-size: 13px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.admin-email-password {
  font-size: 12px;
  margin-top: 2px;
}
.admin-email-password code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}
.admin-email-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-email-actions a,
.admin-email-actions button {
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  border: 1px solid var(--color-border);
  font-family: inherit;
}
.admin-email-actions a.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.admin-email-actions a.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
}
.admin-email-actions .btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.admin-email-actions a:hover,
.admin-email-actions button:hover { opacity: 0.85; }
.admin-email-actions button:disabled { opacity: 0.5; cursor: default; }

.admin-email-preview {
  margin: 0 0 16px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.admin-email-preview summary {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--color-text-muted);
  list-style: none;
}
.admin-email-preview summary::-webkit-details-marker { display: none; }
.admin-email-preview[open] summary {
  border-bottom: 1px dashed var(--color-border);
}
.admin-email-preview-body { padding: 12px 16px; }
.admin-email-preview-head {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-email-preview-pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--color-text);
  background: transparent;
}

@media (max-width: 768px) {
  .admin-email-row { grid-template-columns: 1fr; }
  .admin-email-actions { justify-content: flex-start; }
}

/* =========================================================
   TICKETING SUPPORT
   ========================================================= */
.ticket-note {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ticket-note--warn {
  background: var(--color-warm-light);
  border-color: var(--color-warm);
  color: var(--color-warm-dark);
}

.ticket-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ticket-form-row--grid-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}
.ticket-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ticket-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.ticket-form input[type="text"],
.ticket-form select,
.ticket-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s;
}
.ticket-form input[type="text"]:focus,
.ticket-form select:focus,
.ticket-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.ticket-form textarea {
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
  line-height: 1.5;
}

.ticket-priorities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ticket-priority-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-surface);
  position: relative;
}
.ticket-priority-option:hover {
  border-color: var(--color-primary);
}
.ticket-priority-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.ticket-priority-option:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.ticket-priority-label {
  font-size: 13px;
  font-weight: 600;
}
.ticket-priority-desc {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.ticket-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  flex-wrap: wrap;
}
.ticket-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.ticket-history {
  margin-top: 20px;
}
.ticket-history-heading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.ticket-empty {
  margin: 0;
  padding: 16px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  text-align: center;
}
.ticket-history-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.ticket-history-head {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  list-style: none;
}
.ticket-history-head::-webkit-details-marker { display: none; }
.ticket-history-title strong { display: block; font-size: 14px; margin-bottom: 2px; }
.ticket-history-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ticket-sync {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.ticket-sync--ok {
  background: #e7f6de;
  color: #3e7826;
}
.ticket-sync--pending {
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
}
.ticket-history-body {
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.ticket-history-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .ticket-form-row--grid-2 { grid-template-columns: 1fr; }
  .ticket-priorities { grid-template-columns: 1fr; }
}

/* =========================================================
   DASHBOARD — Quick actions (KPI + Changelog)
   ========================================================= */
.dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.15s;
  position: relative;
}
.quick-action:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.quick-action-icon { font-size: 28px; line-height: 1; }
.quick-action-body { display: flex; flex-direction: column; gap: 2px; }
.quick-action-body strong { font-size: 15px; color: var(--color-text); }
.quick-action-body span { font-size: 13px; color: var(--color-text-muted); }
.quick-action-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  background: var(--color-danger);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.quick-action--badge {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 70%);
}
/* Version "hero" du quick-action : légèrement mise en avant (Revue de presse)
   mais alignée en taille sur les 2 autres tuiles pour une rangée équilibrée
   et compacte (v=481 : avant, padding 26/32 + icône 44 gonflaient la hauteur
   de toute la rangée et laissaient les cartes KPI/Support à moitié vides). */
.quick-action--hero {
  padding: 16px 20px;
  gap: 16px;
  border-radius: var(--radius-md);
}
.quick-action--hero .quick-action-icon { font-size: 30px; }
.quick-action--hero .quick-action-body { gap: 3px; }
.quick-action--hero .quick-action-body strong { font-size: 16px; font-weight: 700; }
.quick-action--hero .quick-action-body span { font-size: 13px; line-height: 1.4; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* =========================================================
   KPI LICENCIÉ — Dashboard de pilotage
   ========================================================= */
.kpi-period-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--color-surface);
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.kpi-period-bar label {
  font-size: 13px;
  font-weight: 600;
}
.kpi-period-bar select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  background: var(--color-surface);
  cursor: pointer;
}
/* V326 : select disabled (saisie verrouillee sur M-1). On garde
   l'apparence proche de l'actif mais avec un cursor not-allowed et
   une opacity legere pour indiquer que c'est volontairement bloque. */
.kpi-period-bar select:disabled {
  cursor: not-allowed;
  opacity: 0.78;
  background: var(--color-bg, #fafaf7);
}
.kpi-period-hint {
  font-size: 12px;
  color: var(--color-text-muted, #6a6a75);
  font-style: italic;
}
.link-inline {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  margin-left: auto;
}
.link-inline:hover { text-decoration: underline; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.kpi-icon { font-size: 28px; line-height: 1; }
.kpi-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.kpi-target-label { margin: 2px 0 0; font-size: 11.5px; color: var(--color-text-muted); }
.kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi-value strong { font-size: 30px; }
.kpi-unit { font-size: 14px; color: var(--color-text-muted); font-weight: 500; }
.kpi-empty {
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-style: italic;
  font-weight: 400;
}
.kpi-target {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 10px;
  width: fit-content;
}
.kpi-target--ok { background: #e7f6de; color: #3e7826; }
.kpi-target--low { background: var(--color-danger-light); color: var(--color-danger-dark); }
.kpi-target--high { background: var(--color-warm-light); color: var(--color-warm-dark); }
.kpi-trend {
  font-size: 12px;
  font-weight: 500;
}
.kpi-trend--up { color: #3e7826; }
.kpi-trend--down { color: var(--color-danger-dark); }
.kpi-trend--flat { color: var(--color-text-muted); }
.kpi-tip {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 4px;
}
.kpi-tip summary {
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}
.kpi-tip summary::-webkit-details-marker { display: none; }
.kpi-tip p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.kpi-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.kpi-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.kpi-field { display: flex; flex-direction: column; gap: 4px; }
.kpi-field-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.kpi-field-unit { color: var(--color-text-muted); font-weight: 400; }
.kpi-field input {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}
.kpi-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.kpi-field-desc {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
  line-height: 1.35;
}
.kpi-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.kpi-history-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.kpi-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kpi-history-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.kpi-history-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.kpi-history-table tbody tr:last-child td { border-bottom: none; }
.kpi-history-empty {
  margin: 0;
  padding: 16px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

/* =========================================================
   CHANGELOG
   ========================================================= */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.changelog-entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.changelog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.changelog-date {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.changelog-version {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-surface-alt);
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.changelog-tag {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.changelog-tag--new { background: var(--color-primary-light); color: var(--color-primary-dark); }
.changelog-tag--launch { background: #e7f6de; color: #3e7826; }
.changelog-tag--improve { background: var(--color-warm-light); color: var(--color-warm-dark); }
.changelog-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.changelog-items {
  margin: 0;
  padding-left: 18px;
}
.changelog-items li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.55;
}

/* Certificat PDF — bouton d'action */
.val-cert-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.val-cert-actions .btn-primary {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================
   NOTIFICATIONS BELL — header dropdown
   ========================================================= */
.notif-wrap {
  position: relative;
  display: inline-flex;
}
.notif-trigger {
  font-size: 18px;
  line-height: 1;
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1;
  border: 2px solid #fff;
}
.notif-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 100;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-popover[hidden] { display: none; }
.notif-popover-head {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.notif-mark-all {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0eee6;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s;
  align-items: start;
}
.notif-item:hover { background: var(--color-bg); }
.notif-item:last-child { border-bottom: none; }
.notif-item--unread {
  background: var(--color-primary-light);
  position: relative;
}
.notif-item--unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}
.notif-item--unread:hover { background: #d9e7ff; }
.notif-icon { font-size: 18px; line-height: 1.2; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body strong { font-size: 13.5px; font-weight: 600; }
.notif-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-date {
  font-size: 11px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.notif-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* FAQ — barre de recherche */
.faq-search-wrap {
  margin-bottom: 18px;
}
.faq-search {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.faq-search-meta {
  margin: 8px 4px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Admin tickets */
.admin-ticket-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.admin-ticket-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.admin-ticket-stat strong { font-size: 22px; color: var(--color-primary); }
.admin-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-ticket-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.admin-ticket-summary {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.admin-ticket-summary::-webkit-details-marker { display: none; }
.admin-ticket-main strong { display: block; font-size: 14px; margin-bottom: 2px; }
.admin-ticket-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.btn-small { padding: 6px 12px; font-size: 12px; }
.admin-ticket-body {
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.admin-ticket-body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  white-space: pre-wrap;
  margin: 8px 0 12px;
  font-family: inherit;
}
.admin-ticket-ids {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
}
.admin-ticket-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

/* =========================================================
   ADMIN — KPI réseau agrégé
   ========================================================= */
.admin-kpi-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--color-surface);
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.admin-kpi-toolbar-left,
.admin-kpi-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-kpi-toolbar label {
  font-size: 13px;
  font-weight: 600;
}
.admin-kpi-toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  background: var(--color-surface);
}

.admin-kpi-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.admin-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-kpi-icon { font-size: 22px; line-height: 1; }
.admin-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.admin-kpi-avg {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.admin-kpi-empty {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-style: italic;
  font-weight: 400;
}
.admin-kpi-range {
  font-size: 11.5px;
  color: var(--color-text-muted);
  min-height: 14px;
}
.admin-kpi-target {
  font-size: 11px;
  color: var(--color-text-tertiary);
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}

.admin-kpi-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.admin-kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-kpi-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-muted);
}
.admin-kpi-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.admin-kpi-row-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.admin-kpi-row--empty td { color: var(--color-text-muted); }
.admin-kpi-nodata {
  font-style: italic;
  text-align: center;
  color: var(--color-text-tertiary);
}
.admin-kpi-cell--ok {
  background: rgba(62, 120, 38, 0.08);
  color: #3e7826;
  font-weight: 600;
}
.admin-kpi-cell--low {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  font-weight: 600;
}
.admin-kpi-cell--high {
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
  font-weight: 600;
}
.admin-kpi-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-kpi-badge--ok { background: #e7f6de; color: #3e7826; }
.admin-kpi-badge--mid { background: var(--color-warm-light); color: var(--color-warm-dark); }
.admin-kpi-badge--bad { background: var(--color-danger-light); color: var(--color-danger-dark); }
.admin-kpi-badge--warn { background: var(--color-surface-alt); color: var(--color-text-muted); }

.admin-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.admin-alert-body { display: flex; flex-direction: column; gap: 2px; }
.admin-alert-body strong { font-size: 14px; }
.admin-alert-body span { font-size: 12.5px; color: var(--color-text-muted); }
.admin-alert--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}
.admin-alert--warn {
  border-color: var(--color-warm);
  background: var(--color-warm-light);
}
.admin-alert--info {
  border-left: 4px solid var(--color-primary);
}
.admin-kpi-empty-box {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .admin-kpi-toolbar { flex-direction: column; align-items: stretch; }
  .admin-kpi-toolbar-left, .admin-kpi-toolbar-right { justify-content: space-between; }
}

/* =========================================================
   SUPPORT — Refonte compacte v1.5.1
   ========================================================= */
.support-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.support-hero-text { flex: 1; min-width: 260px; }
.support-hero-actions { flex: 0 0 auto; }
.support-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s, transform 0.15s;
}
.support-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

/* Bandeau "Pas trouve dans la FAQ ?" entre la FAQ et le ticket form.
   Discret mais clair : la FAQ doit etre lue en premier. */
.support-ticket-intro {
  margin: 18px 0 10px;
  padding: 10px 16px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.support-ticket-intro p { margin: 0; }

/* =========================================================
   ASSISTANT KB — widget chat-style sans IA generative.
   ========================================================= */
.kbot-section { margin: 0 0 22px; }
.kbot-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.kbot-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.kbot-avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.kbot-header-text { flex: 1; min-width: 0; }
.kbot-title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #1a1a1f);
}
.kbot-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft, #6a6a75);
}
.kbot-conversation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  max-height: 480px;
  overflow-y: auto;
}
.kbot-conversation:empty { display: none; }
.kbot-bubble {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}
.kbot-bubble--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.kbot-bubble--bot {
  align-self: flex-start;
  background: var(--color-bg);
  color: var(--color-text, #1a1a1f);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
  width: 100%;
  max-width: 100%;
}
.kbot-bubble--bot p { margin: 0 0 10px; }
.kbot-bubble--bot p:last-child { margin-bottom: 0; }
.kbot-intro-line { font-size: 13px; color: var(--color-text-soft, #6a6a75); }
.kbot-noresult { font-size: 14px; }
.kbot-noresult-cta { font-size: 13.5px; }
.kbot-fallback {
  font-size: 12.5px;
  color: var(--color-text-soft, #6a6a75);
  margin-top: 10px !important;
}
.kbot-link {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}
.kbot-link:hover { text-decoration: none; }

.kbot-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: 8px 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.kbot-result[open] { border-color: var(--color-primary); }
.kbot-result-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.kbot-result-summary::-webkit-details-marker { display: none; }
.kbot-result-summary:hover { background: var(--color-bg); }
.kbot-result-cat {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kbot-result-q {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text, #1a1a1f);
  line-height: 1.35;
}
.kbot-result-chevron {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.2s;
}
.kbot-result[open] > .kbot-result-summary > .kbot-result-chevron {
  transform: rotate(90deg);
}
.kbot-result-a {
  padding: 0 14px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text, #1a1a1f);
  white-space: pre-wrap;
}

.kbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
}
.kbot-suggest-label {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin-right: 4px;
}
.kbot-chip {
  font: inherit;
  padding: 6px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--color-text, #1a1a1f);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kbot-chip:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.kbot-form {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.kbot-input {
  flex: 1;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text, #1a1a1f);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.kbot-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.kbot-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.kbot-send:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

@media (max-width: 600px) {
  .kbot-card { padding: 14px 14px 12px; }
  .kbot-result-summary { flex-wrap: wrap; }
  .kbot-result-cat { width: 100%; }
}

/* Sous-titre dans le panneau "Contacter le Siege" */
.support-subhead {
  margin: 18px 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft, #6a6a75);
}
.support-subhead:first-child { margin-top: 0; }

/* Hint sous la liste de l'equipe : rappelle le bon canal (ticket
   plutot que mail direct, qu'on n'expose volontairement pas). */
.support-team-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fff8e6;
  border-left: 3px solid #face4e;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #5a4400;
}
.support-team-hint a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* Variante "info-only" des team-card : pas cliquable, pas de mail */
.team-card--info {
  cursor: default;
}
.team-card--info:hover {
  transform: none;
  box-shadow: none;
}

/* Sections collapsables compactes */
.support-collapse {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.support-collapse:hover { border-color: var(--color-primary); }
.support-collapse[open] { border-color: var(--color-primary); }
.support-collapse-summary {
  list-style: none;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
.support-collapse-summary::-webkit-details-marker { display: none; }
.support-collapse-icon { font-size: 20px; line-height: 1; }
.support-collapse-title { font-weight: 600; }
.support-collapse-count {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--color-surface-alt);
}
.support-collapse-chevron {
  font-size: 22px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  line-height: 1;
}
.support-collapse[open] .support-collapse-chevron { transform: rotate(90deg); }
.support-collapse-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

/* Bouton sticky flottant */
.support-sticky-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 22px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(110, 164, 255, 0.4);
  z-index: 50;
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.support-sticky-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(110, 164, 255, 0.55);
}
.support-sticky-cta--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

@media (max-width: 640px) {
  .support-hero-actions { width: 100%; }
  .support-hero-actions .support-cta { width: 100%; justify-content: center; }
  .support-sticky-cta { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13.5px; }
}

/* =========================================================
   AVIS GOOGLE — bloc auto-fill licencié + dashboard admin
   ========================================================= */
.kpi-google-auto {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 60%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.kpi-google-auto-icon { font-size: 28px; line-height: 1; }
.kpi-google-auto-body { flex: 1; min-width: 0; }
.kpi-google-auto-body strong { font-size: 14px; display: block; margin-bottom: 2px; }
.kpi-google-auto-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.admin-google-avis-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 20px;
}
.admin-google-avis-loading,
.admin-google-avis-empty {
  margin: 0;
  padding: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}
.admin-avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.admin-avis-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-avis-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.admin-avis-head strong { font-size: 14px; }
.admin-avis-updated { font-size: 11px; color: var(--color-text-tertiary); }
.admin-avis-score { font-size: 14px; }
.admin-avis-top {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}
.admin-avis-err { color: var(--color-danger-dark); font-size: 12px; }

/* =========================================================
   ADMIN — Gestion licenciés (source Sheet + formulaire add)
   ========================================================= */
.welcome-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.welcome-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-source {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}
.admin-source--sheet {
  background: #e7f6de;
  color: #3e7826;
}
.admin-source--static {
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
}
.admin-add-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.admin-add-form--disabled { opacity: 0.7; }
.admin-add-warn {
  background: var(--color-warm-light);
  border: 1px solid var(--color-warm);
  color: var(--color-warm-dark);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
  font-size: 13px;
}
.admin-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.admin-add-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-add-field .req { color: var(--color-danger); }
.admin-add-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}
.admin-add-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.admin-add-field input:disabled {
  background: var(--color-surface-alt);
  cursor: not-allowed;
}
.admin-add-field small {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.admin-add-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================================================
   ADMINISTRATIF — sections fiscalite / contrats / assurance
   ========================================================= */
.adm-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 22px 22px;
  margin-bottom: 22px;
}
.adm-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
.adm-section-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
}
.adm-section-titre {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.adm-section-desc {
  font-size: 13.5px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  line-height: 1.5;
}
.adm-section-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.adm-doc {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  background: var(--color-bg);
}
.adm-doc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.adm-doc-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.adm-doc-titre {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--color-text);
  line-height: 1.3;
}
.adm-doc-meta {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  line-height: 1.4;
}
.adm-doc-resume {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 14px;
}

.adm-doc-points {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.adm-doc-points-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 10px;
}
.adm-points-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adm-point {
  padding: 10px 12px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 0 8px 8px 0;
}
.adm-point-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.adm-point-taux {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
  background: var(--color-surface);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.adm-point-badge {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef0e8;
  color: #6a6a75;
}
.adm-point-badge--principal { background: #e8efff; color: #2c5fd6; }
.adm-point-badge--B2B { background: #ffe8d9; color: #c44a16; }
.adm-point-badge--restauration { background: #fff4d9; color: #8a6818; }
.adm-point-badge--pack { background: #f0e8ff; color: #6033c0; }
.adm-point-badge--obligation { background: #ffe0de; color: #c4221b; }
.adm-point-titre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  flex: 1 1 auto;
  min-width: 200px;
}
.adm-point-detail {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.adm-doc-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 0 4px;
}
.adm-doc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s, transform 0.15s;
}
.adm-doc-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.adm-doc-cta-icon { font-size: 16px; line-height: 1; }
.adm-doc-link {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: underline;
}
.adm-doc-link:hover { text-decoration: none; }
.adm-doc-size {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin-left: auto;
}
.adm-doc-disclaimer {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
  line-height: 1.5;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

@media (max-width: 600px) {
  .adm-section { padding: 16px 16px 18px; }
  .adm-doc { padding: 14px; }
  .adm-doc-size { margin-left: 0; width: 100%; }
}

/* =========================================================
   OPÉRATIONS — Hub + fiche markdown
   ========================================================= */
.op-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 18px;
}
.op-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.op-section-title { display: flex; align-items: center; gap: 10px; }
.op-section-title h3 { margin: 0; font-size: 18px; font-weight: 600; }
.op-section-icon { font-size: 22px; line-height: 1; }
.op-section-count {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 3px 10px;
  border-radius: 10px;
}
.op-section-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.op-fiches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.op-fiche-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
}
.op-fiche-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.op-fiche-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.op-fiche-num {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
}
.op-fiche-icon { font-size: 20px; }
.op-fiche-duree {
  margin-left: auto;
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.op-fiche-nom { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.op-fiche-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
  flex: 1;
}
.op-fiche-cta {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 500;
  margin-top: 2px;
}

/* Bannieres "outil express" sur le hub RH : utilisees pour promouvoir des
   ressources/outils prioritaires (URSSAF live + Modeles de contrat) hors
   du flux normal des cards op-fiche-card. Les modifiers --urssaf et
   --contrats permettent un fine-tuning si besoin. */
.rh-banner {
  margin: 32px 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-sm);
}
.rh-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rh-banner-text { flex: 1 1 360px; }
.rh-banner-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: 999px;
}
.rh-banner-title {
  margin: 8px 0 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.rh-banner-sub {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 620px;
}
.rh-banner-cta { flex-shrink: 0; align-self: flex-start; }
.rh-banner-frame {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.rh-banner-frame iframe {
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
}
/* Le body de la banniere Modeles de contrat hebergeait initialement la
   sous-titre + grille de cards rh-contract-compact ; on ne reset rien de
   special ici, les classes rh-grid + rh-contract-compact font deja le job. */
.rh-banner--contrats .rh-banner-body { margin-top: 4px; }

/* Fiche détail */
.op-fiche-container { max-width: 820px; }
.op-fiche-hero {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 80%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.op-fiche-hero-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-dark);
  font-weight: 600;
  margin-bottom: 10px;
}
.op-fiche-hero-duree { font-weight: 500; }
.op-fiche-hero-title {
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.2;
  font-family: var(--font-display);
}
.op-fiche-hero-sub {
  font-size: 14.5px;
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}

.op-fiche-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  font-size: 15px;
  line-height: 1.7;
}
.op-fiche-body h1 { font-size: 26px; margin: 0 0 16px; font-family: var(--font-display); font-weight: 500; }
.op-fiche-body h2 { font-size: 20px; margin: 28px 0 12px; font-weight: 600; color: var(--color-primary-dark); }
.op-fiche-body h3 { font-size: 16px; margin: 22px 0 8px; font-weight: 600; }
.op-fiche-body p { margin: 0 0 12px; }
.op-fiche-body ul, .op-fiche-body ol { margin: 0 0 14px; padding-left: 22px; }
.op-fiche-body li { margin-bottom: 6px; }
.op-fiche-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 24px 0;
}
.op-fiche-body strong { font-weight: 600; color: var(--color-text); }
.op-fiche-body em { font-style: italic; }
.op-fiche-body code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-mono);
}
.op-fiche-body pre {
  background: var(--color-surface-alt);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 13px;
}
.op-fiche-body pre code { background: transparent; padding: 0; }
.op-fiche-body a { color: var(--color-primary); text-decoration: underline; }

/* Task lists GitHub-style ("- [ ]" et "- [x]") rendues comme cases à cocher visuelles */
.op-fiche-body ul.op-task-list {
  list-style: none;
  padding-left: 4px;
}
.op-fiche-body ul.op-task-list .op-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.op-fiche-body ul.op-task-list .op-task-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  position: relative;
  display: inline-block;
}
.op-fiche-body ul.op-task-list .op-task-item--checked .op-task-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.op-fiche-body ul.op-task-list .op-task-item--checked .op-task-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.op-fiche-body ul.op-task-list .op-task-text { flex: 1 1 auto; }

/* Bloc dépliable ":::details[Titre]" ... ":::" — encadré visible, ouvert par défaut */
.op-fiche-body details.op-details {
  margin: 18px 0;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  overflow: hidden;
}
.op-fiche-body details.op-details > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.op-fiche-body details.op-details > summary::-webkit-details-marker { display: none; }
.op-fiche-body details.op-details > summary::before {
  content: "▼";
  font-size: 11px;
  transition: transform 0.15s;
  display: inline-block;
}
.op-fiche-body details.op-details:not([open]) > summary::before {
  transform: rotate(-90deg);
}
.op-fiche-body details.op-details > .op-details-body {
  padding: 14px 18px;
}
.op-fiche-body details.op-details > .op-details-body > :first-child { margin-top: 0; }
.op-fiche-body details.op-details > .op-details-body > :last-child { margin-bottom: 0; }

.op-table-wrap { overflow-x: auto; margin: 14px 0; }
.op-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.op-table th, .op-table td {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
}
.op-table th {
  background: var(--color-surface-alt);
  font-weight: 600;
}

.op-fiche-loading {
  text-align: center;
  padding: 40px;
  color: var(--color-text-muted);
  font-size: 14px;
}
.op-fiche-error {
  padding: 20px;
  background: var(--color-danger-light);
  border-radius: var(--radius-sm);
  color: var(--color-danger-dark);
}

.op-fiche-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 24px;
}
.op-fiche-nav-btn {
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  background: var(--color-surface);
  transition: all 0.15s;
  text-align: center;
}
.op-fiche-nav-btn--prev { text-align: left; }
.op-fiche-nav-btn--next { text-align: right; }
.op-fiche-nav-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.op-fiche-nav-btn--home { background: var(--color-surface-alt); }

@media (max-width: 640px) {
  .op-fiche-body { padding: 22px 18px; }
  .op-fiche-hero-title { font-size: 22px; }
  .op-fiche-nav { grid-template-columns: 1fr; }
  .op-fiche-nav-btn { text-align: center !important; }
}

/* =========================================================
   LOGIN — Remember me + Forgot password auto
   ========================================================= */
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.login-remember span { user-select: none; }

.forgot-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.forgot-form .field { margin-bottom: 0; }
.forgot-form .field label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.forgot-form .field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}
.forgot-form .field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.forgot-status {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}
.forgot-status--info {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.forgot-status--success {
  background: #e7f6de;
  color: #3e7826;
  border: 1px solid #b4d99c;
}
.forgot-status--error {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

/* Hero fiche Opérations — ligne avec bouton Imprimer */
.op-fiche-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.op-fiche-print {
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.op-fiche-print:hover {
  background: var(--color-primary-light);
}

/* =========================================================
   IMPRESSION — fiche Opérations (PDF via print natif)
   ========================================================= */
@media print {
  /* Quand body a la classe print-op-fiche, on masque tout sauf le contenu fiche */
  body.print-op-fiche {
    background: var(--color-surface) !important;
  }
  body.print-op-fiche .app-header,
  body.print-op-fiche .breadcrumb,
  body.print-op-fiche .bc-wrap,
  body.print-op-fiche .tuto-overlay,
  body.print-op-fiche .support-sticky-cta,
  body.print-op-fiche .notif-popover,
  body.print-op-fiche .op-fiche-print,
  body.print-op-fiche .op-fiche-nav {
    display: none !important;
  }
  body.print-op-fiche .dashboard-main {
    padding: 0 !important;
  }
  body.print-op-fiche .container,
  body.print-op-fiche .op-fiche-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.print-op-fiche .op-fiche-hero {
    background: #f8f8f4 !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
  }
  body.print-op-fiche .op-fiche-hero-title {
    font-size: 24px !important;
  }
  body.print-op-fiche .op-fiche-hero-sub {
    font-size: 13px !important;
  }
  body.print-op-fiche .op-fiche-body {
    border: none !important;
    padding: 0 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  body.print-op-fiche .op-fiche-body h1 {
    font-size: 20pt !important;
    margin-top: 0 !important;
  }
  body.print-op-fiche .op-fiche-body h2 {
    font-size: 14pt !important;
    margin-top: 18pt !important;
    page-break-after: avoid;
  }
  body.print-op-fiche .op-fiche-body h3 {
    font-size: 12pt !important;
    page-break-after: avoid;
  }
  body.print-op-fiche .op-fiche-body p,
  body.print-op-fiche .op-fiche-body li {
    orphans: 3;
    widows: 3;
  }
  body.print-op-fiche .op-table {
    page-break-inside: avoid;
    font-size: 10pt !important;
  }
  /* Ajout d'un pied de page impression */
  @page {
    margin: 18mm 15mm 18mm 15mm;
    size: A4;
  }
}

/* Brief atelier (Loom / texte / placeholder à venir) */
.op-fiche-brief {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.op-fiche-brief--loom {
  background: linear-gradient(135deg, #fef6d9 0%, var(--color-surface) 80%);
  border-color: var(--color-warm);
}
.op-fiche-brief--text {
  background: var(--color-bg);
}
.op-fiche-brief--placeholder {
  background: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
}
.op-fiche-brief-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.op-fiche-brief-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.op-fiche-brief-icon { font-size: 22px; line-height: 1; }
.op-fiche-brief-intro,
.op-fiche-brief-placeholder-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.op-fiche-brief-placeholder-text { margin: 0; }
.op-fiche-brief-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.op-fiche-brief-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.op-fiche-brief-content {
  font-size: 14px;
  line-height: 1.55;
}
.op-fiche-brief-content p { margin: 0 0 10px; }

@media print {
  body.print-op-fiche .op-fiche-brief {
    background: var(--color-surface-alt) !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  body.print-op-fiche .op-fiche-brief--placeholder,
  body.print-op-fiche .op-fiche-brief-video {
    display: none !important;
  }
}

/* =========================================================
   PLAYBOOKS GROWTH (Marketing)
   ========================================================= */
.section-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: -6px 0 14px;
  line-height: 1.5;
}
.growth-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.growth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.growth-card:hover { border-color: var(--color-primary); }
.growth-card[open] { border-color: var(--color-primary); }
.growth-card--draft { opacity: 0.92; }
.growth-card-head {
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.growth-card-head::-webkit-details-marker { display: none; }
.growth-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.growth-card-info { min-width: 0; }
.growth-card-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}
.growth-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.growth-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.growth-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.growth-badge--draft {
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
}
.growth-badge--ready {
  background: #e7f6de;
  color: #3e7826;
}
.growth-chevron {
  font-size: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  line-height: 1;
}
.growth-card[open] .growth-chevron { transform: rotate(90deg); }
.growth-card-body {
  padding: 16px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.growth-placeholder {
  padding: 14px;
  background: var(--color-warm-light);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.55;
}
.growth-placeholder p { margin: 0 0 6px; }
.growth-placeholder p:last-child { margin-bottom: 0; color: var(--color-text-muted); }
.growth-content {
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .growth-card-head {
    grid-template-columns: auto 1fr;
  }
  .growth-card-status {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

/* =========================================================
   KPI CARDS ÉDITABLES (refonte v1.7.2)
   ========================================================= */
.kpi-card--editable {
  transition: border-color 0.15s;
  position: relative;
}
.kpi-card--editable:hover {
  border-color: var(--color-primary);
}
.kpi-card--editable:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.kpi-card--auto .kpi-input {
  background: linear-gradient(135deg, #fef6d9 0%, var(--color-surface) 60%);
}
.kpi-card .kpi-card-head {
  position: relative;
}
.kpi-auto-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-warm-dark);
  background: var(--color-warm-light);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-warm);
  white-space: nowrap;
}
.kpi-auto-badge--active {
  background: #e7f6de;
  color: #3e7826;
  border-color: #b4d99c;
}

.kpi-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0 2px;
}
.kpi-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
}
.kpi-input::-webkit-outer-spin-button,
.kpi-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kpi-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.kpi-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 15px;
}
/* V237 : message d'erreur inline sous l'input KPI quand la saisie est
   invalide (lettres, decimales sur un champ entier, valeur negative). */
.kpi-input-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #c4221b;
  line-height: 1.4;
}
.kpi-input-unit {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.kpi-cards-form {
  margin-bottom: 24px;
}
.kpi-cards-form .kpi-form-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.btn-kpi-save {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
}

.kpi-period-bar {
  gap: 10px;
  flex-wrap: wrap;
}
.kpi-google-sync {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
  border-radius: 10px;
  font-weight: 500;
}

/* Les anciens styles sont retirés (doublon supprimé) */

/* =========================================================
   PARTENARIATS — offres Siège négociées
   ========================================================= */

/* === Galaxy view : Color Room au centre + bulles catégorie en orbite === */
.part-galaxy {
  margin: 8px 0 48px;
  padding: 32px 16px 24px;
}
.part-galaxy-stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  /* Hauteur calculée pour que les bulles entrent toujours dans le stage :
     2 × orbit-radius (haut + bas) + 2 × bubble-radius (80px) + 40px de marge. */
  height: 760px;
  min-height: 760px;
  /* Distance centre <-> bulle en pixels absolus, hardcodée par breakpoint
     (clamp() était mal interprété par certains moteurs CSS dans translate()). */
  --orbit-radius: 300px;
}
.part-galaxy-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.part-galaxy-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed var(--color-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.part-galaxy-ring--1 {
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
}
.part-galaxy-ring--2 {
  width: calc(var(--orbit-radius) * 1.2);
  height: calc(var(--orbit-radius) * 1.2);
  border-color: var(--color-text-muted);
}

/* V283 : toile d'araignee - fils pointilles du core central vers chaque
   bulle. Chaque .part-galaxy-thread est un span absolument positionne
   au centre du stage, transform-origin gauche (= centre), pivote a son
   angle de bulle, largeur = orbit-radius. background lineaire pointille
   pour l'effet "tisse". Z-index sous les bulles, au-dessus des rings. */
.part-galaxy-web {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Pas de z-index : le DOM order assure que les threads passent SOUS
     le core (rendu apres) et SOUS les bulles (rendues apres aussi),
     mais AU-DESSUS des rings (rendus avant). */
}
.part-galaxy-thread {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-radius);
  height: 1px;
  transform-origin: 0 50%;
  transform: rotate(var(--thread-angle, 0deg));
  /* Pointilles : background-image = serie de petits ronds.
     repeating-linear-gradient cree des pointilles legers et nets. */
  background-image: repeating-linear-gradient(
    to right,
    var(--color-text-muted, #6a6a75) 0,
    var(--color-text-muted, #6a6a75) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity: 0.35;
  /* Animation deploy : le fil grandit du core vers la bulle pendant
     l'animation constellation (V237). Cale sur le timing des bulles. */
  animation: part-thread-grow 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
  animation-delay: calc(0.3s + var(--thread-index, 0) * 0.12s);
}
.part-galaxy-thread--locked {
  opacity: 0.2;
}
@keyframes part-thread-grow {
  from {
    transform: rotate(var(--thread-angle, 0deg)) scaleX(0);
    opacity: 0;
  }
  to {
    transform: rotate(var(--thread-angle, 0deg)) scaleX(1);
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .part-galaxy-thread { animation: none; }
}
/* Mode dark : pointilles plus claires pour rester visibles sur fond sombre. */
html[data-theme="dark"] .part-galaxy-thread {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.32) 0,
    rgba(255, 255, 255, 0.32) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity: 0.55;
}
.part-galaxy-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  z-index: 2;
  animation: part-core-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes part-core-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.part-galaxy-logo {
  width: 96px;
  height: auto;
  display: block;
}
.part-galaxy-core-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

.part-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
             rotate(var(--bubble-angle))
             translate(var(--orbit-radius))
             rotate(calc(var(--bubble-angle) * -1));
  width: 160px;
  height: 160px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  /* Animation deploy : naissent au centre (scale 0) puis filent vers leur orbite.
     --bubble-index est posé inline par le rendu ; on le multiplie par 0.12s pour
     un effet de cascade après le pulse du core (0.4s). */
  animation: part-bubble-deploy 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(0.4s + var(--bubble-index, 0) * 0.12s);
}
@keyframes part-bubble-deploy {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%)
               rotate(var(--bubble-angle))
               translate(var(--orbit-radius))
               rotate(calc(var(--bubble-angle) * -1));
    opacity: 1;
  }
}
.part-bubble:hover {
  transform: translate(-50%, -50%)
             rotate(var(--bubble-angle))
             translate(var(--orbit-radius))
             rotate(calc(var(--bubble-angle) * -1))
             scale(1.06);
  border-color: var(--color-text-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Bulle verrouillée "à venir" : grisée, pas cliquable, pas d'effet hover.
   Garde la même animation de déploiement pour s'intégrer dans la cascade. */
.part-bubble--locked {
  background: #f4f3ef;
  border-style: dashed;
  border-color: var(--color-text-muted);
  cursor: default;
  box-shadow: none;
  opacity: 0.78;
}
.part-bubble--locked:hover {
  transform: translate(-50%, -50%)
             rotate(var(--bubble-angle))
             translate(var(--orbit-radius))
             rotate(calc(var(--bubble-angle) * -1));
  opacity: 0.92;
  box-shadow: none;
  border-color: var(--color-text-muted);
}
.part-bubble--locked .part-bubble-cat,
.part-bubble--locked .part-bubble-count {
  color: var(--color-text-muted);
}
.part-bubble-preview--locked {
  font-size: 28px;
  filter: grayscale(0.4);
}

/* Indicateur visuel : trait qui part du centre vers la bulle pendant l'animation */
.part-bubble-orbit-line {
  display: none;
}

/* === Section Recommandations (enseignes utiles, pas de partenariat) ===
   Style allégé pour bien différencier des vrais partenaires negocies.
   Carte horizontale : logo + texte + lien, fond plus pâle. */
.part-reco-section {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px dashed var(--color-border);
}
.part-reco-header {
  margin-bottom: 20px;
}
.part-reco-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.part-reco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.part-reco-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background 0.15s, border-color 0.15s;
}
.part-reco-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-text-muted);
}
.part-reco-logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.part-reco-logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.part-reco-fallback {
  display: none;
  font-size: 28px;
}
.part-reco-emoji {
  font-size: 28px;
}
.part-reco-body {
  flex: 1;
  min-width: 0;
}
.part-reco-nom {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.part-reco-cat {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.part-reco-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
.part-reco-cta {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-primary, #1a1a1a);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.15s;
}
.part-reco-cta:hover {
  opacity: 0.7;
}

/* Bouton flottant "remonter en haut", visible dès qu'on a scrollé.
   Évite de piéger l'utilisateur en bas après un click sur bulle. */
.part-fab-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s, box-shadow 0.15s, background 0.15s;
  z-index: 90;
  padding: 0;
}
.part-fab-top svg {
  width: 22px;
  height: 22px;
}
.part-fab-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.part-fab-top:hover {
  background: #000;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}
.part-fab-top:active {
  transform: translateY(0);
}
.part-fab-top:focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}
@media (max-width: 520px) {
  .part-fab-top {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }
}

/* Hint apparaît après que toutes les bulles soient déployées */
.part-galaxy-hint {
  animation: part-galaxy-hint-fade 0.5s ease-out 1.5s backwards;
}
@keyframes part-galaxy-hint-fade {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Respect des préférences utilisateur : pas d'animation si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .part-galaxy-core,
  .part-bubble,
  .part-galaxy-hint {
    animation: none !important;
  }
}
.part-bubble:focus-visible {
  outline: 2px solid var(--color-primary, #1a1a1a);
  outline-offset: 4px;
}
.part-bubble-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  width: 100%;
}
.part-bubble-preview {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 2px;
}
.part-bubble-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.part-bubble-cat {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.part-bubble-count {
  font-size: 10.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.part-galaxy-hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

@media (max-width: 1080px) {
  .part-galaxy-stage {
    --orbit-radius: 240px;
    height: 660px;
    min-height: 660px;
  }
}

@media (max-width: 760px) {
  .part-galaxy-stage {
    --orbit-radius: 200px;
    max-width: 640px;
    height: 580px;
    min-height: 580px;
  }
  .part-galaxy-core {
    width: 130px;
    height: 130px;
  }
  .part-galaxy-logo { width: 82px; }
  .part-bubble {
    width: 130px;
    height: 130px;
  }
  .part-bubble-cat { font-size: 12px; }
}

@media (max-width: 520px) {
  .part-galaxy-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    max-width: none;
  }
  .part-galaxy-rings,
  .part-galaxy-core,
  .part-galaxy-web {
    display: none;
  }
  .part-bubble {
    position: static;
    transform: none !important;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    justify-content: flex-start;
  }
  .part-bubble:hover { transform: none !important; }
  .part-bubble-inner {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    text-align: left;
  }
  .part-bubble-preview { margin-bottom: 0; }
}

.part-section--flash {
  animation: part-section-flash 1.4s ease-out;
}
@keyframes part-section-flash {
  0%   { background: rgba(255, 213, 79, 0.0); }
  20%  { background: rgba(255, 213, 79, 0.18); }
  100% { background: rgba(255, 213, 79, 0.0); }
}

.part-section {
  margin-bottom: 40px;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  transition: background 0.4s;
}
.part-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.part-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.part-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
  border-color: var(--color-primary);
}
.part-card--teal { border-left: 4px solid var(--color-accent-teal-fg); }
.part-card--amber { border-left: 4px solid #b47500; }
.part-card--purple { border-left: 4px solid var(--color-accent-purple-fg); }
.part-card--coral { border-left: 4px solid var(--color-accent-coral-fg); }
.part-card--gray { border-left: 4px solid #6a6a75; }

.part-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.part-logo {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.part-header-text {
  flex: 1;
  min-width: 0;
}
.part-nom {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.part-cat {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: 500;
}
.part-description {
  color: var(--color-text-soft, #444);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.part-offre {
  background: var(--color-primary-light, #eaf2ff);
  border-radius: 12px;
  padding: 12px 14px;
}
.part-offre-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  display: block;
  margin-bottom: 4px;
}
.part-offre p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}

.part-modalite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.part-modalite-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 600;
}
.part-code {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border, #d5d7e0);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}
.part-copy-btn {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.part-copy-btn:hover {
  background: var(--color-primary);
  color: #fff;
}
.part-copy-btn--ok {
  background: var(--color-accent-teal-fg);
  border-color: var(--color-accent-teal-fg);
  color: #fff;
}
.part-contact-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
}
.part-contact-link:hover {
  text-decoration: underline;
}
.part-modalite--tbd {
  color: var(--color-text-soft, #9a9aa0);
  font-size: 13px;
}
.part-validite {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  font-style: italic;
}

/* =========================================================
   PLATEFORMES — référencement externe
   ========================================================= */

.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.plat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Badge "🧪 En cours de test" positionne en haut a droite, au-dessus du
   header normal. Carte en mode test : fond legerement chaud + sticker
   bien visible pour que le licencie ne lance pas encore l'inscription. */
.plat-card--test {
  background: #fffaf0;
  border-color: #f7d488;
}
.plat-statut {
  position: absolute;
  top: -10px;
  right: 16px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(180, 117, 0, 0.18);
}
.plat-statut--test {
  background: linear-gradient(135deg, #ffce4d 0%, #ffb020 100%);
  color: #5a3500;
  border: 1px solid #f0a500;
}

/* CTA "S'inscrire" en mode disabled : la plateforme est en cours de test
   par le Siege, le licencie ne doit pas se lancer dans l'inscription */
.plat-cta--disabled {
  background: #d6d6dc !important;
  color: #8a8a92 !important;
  cursor: not-allowed !important;
  pointer-events: auto; /* on garde le hover pour le tooltip */
  border: none;
  box-shadow: none !important;
  font-weight: 500;
}
.plat-cta--disabled:hover {
  background: #d6d6dc !important;
  transform: none !important;
}
.plat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
  border-color: var(--color-primary);
}
.plat-card--critique { border-top: 3px solid #c13d31; }
.plat-card--haute { border-top: 3px solid #b47500; }
.plat-card--moyenne { border-top: 3px solid var(--color-primary); }
.plat-card--optionnelle { border-top: 3px solid #9a9aa0; }

.plat-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.plat-logo {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
/* Variante image : conteneur fixe 44px avec coins arrondis pour ressembler
   à un app-icon. Permet aussi de cacher le fallback emoji par défaut. */
.plat-logo--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.plat-logo--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plat-logo-fallback {
  display: none;
  font-size: 28px;
  line-height: 1;
}
.plat-header-text {
  flex: 1;
  min-width: 0;
}
.plat-nom {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.plat-cat {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: 500;
}
.plat-priorite {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.plat-priorite--critique {
  background: #fde3e0;
  color: #c13d31;
}
.plat-priorite--haute {
  background: #fff1d0;
  color: #b47500;
}
.plat-priorite--moyenne {
  background: var(--color-primary-light, #eaf2ff);
  color: var(--color-primary-dark);
}
.plat-priorite--optionnelle {
  background: var(--color-surface-alt);
  color: #6a6a75;
}

.plat-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.plat-cout {
  background: var(--color-surface-alt);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 500;
}
.plat-pourquoi {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.plat-pourquoi strong {
  color: var(--color-primary-dark);
}
.plat-etapes {
  background: var(--color-surface-alt);
  border-radius: 12px;
  padding: 14px 16px;
}
.plat-etapes h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 10px;
  font-weight: 700;
}
.plat-etapes ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plat-etapes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}
.plat-etape-n {
  background: var(--color-primary);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.plat-tips {
  background: #fff9e4;
  border-left: 3px solid #b47500;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #5d4300;
}
.plat-tips strong {
  color: #b47500;
}
.plat-cta {
  align-self: flex-start;
  margin-top: 4px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-soft, #6a6a75);
  background: var(--color-surface-alt);
  border-radius: 16px;
}

@media (max-width: 560px) {
  .part-grid,
  .plat-grid {
    grid-template-columns: 1fr;
  }
  .part-header,
  .plat-header {
    flex-wrap: wrap;
  }
  .plat-priorite {
    order: 3;
  }
}

/* =========================================================
   PLATEFORMES — chips de filtre + tuiles compactes + drawer
   ========================================================= */

.plat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 22px;
  padding: 4px 0;
}
.plat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  transition: all 0.15s ease;
}
.plat-chip:hover {
  border-color: var(--color-primary, #6ea4ff);
  color: var(--color-text);
}
.plat-chip--active {
  background: var(--color-text, #111);
  border-color: var(--color-text, #111);
  color: #fff;
}
.plat-chip-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.plat-chip--active .plat-chip-count {
  background: rgba(255, 255, 255, 0.2);
}

.plat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.plat-tile {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  font-family: inherit;
  color: inherit;
}
.plat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary, #6ea4ff);
}
.plat-tile:focus-visible {
  outline: 2px solid var(--color-primary, #6ea4ff);
  outline-offset: 2px;
}
.plat-tile--critique { border-top: 3px solid #c13d31; }
.plat-tile--haute { border-top: 3px solid #b47500; }
.plat-tile--moyenne { border-top: 3px solid var(--color-primary, #6ea4ff); }
.plat-tile--optionnelle { border-top: 3px solid #9a9aa0; }
.plat-tile--cse { border-top: 3px solid #2da7a4; background: linear-gradient(180deg, #f5fbfb 0%, var(--color-surface) 50%); }
.plat-tile--test { background: #fffaf0; border-color: #f7d488; }
.plat-tile--waiting { opacity: 0.6; }

.plat-tile-sticker {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.plat-tile-sticker--test {
  background: linear-gradient(135deg, #ffce4d 0%, #ffb020 100%);
  color: #5a3500;
}
.plat-tile-sticker--waiting {
  background: #e5e7eb;
  color: #4b5563;
}

.plat-tile-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plat-tile-logo .plat-logo {
  margin: 0;
  font-size: 32px;
}
.plat-tile-logo .plat-logo--img {
  width: 56px;
  height: 56px;
  padding: 4px;
}
.plat-tile-logo .plat-logo--img img {
  max-width: 100%;
  max-height: 100%;
}
.plat-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  justify-content: center;
}
.plat-tile-nom {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.2;
}
.plat-tile-cat {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  line-height: 1.3;
}
.plat-tile-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.plat-tile-priorite {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
}
.plat-tile-priorite--critique { background: #fde7e4; color: #9a2d22; }
.plat-tile-priorite--haute { background: #fdf0d8; color: #8a5a00; }
.plat-tile-priorite--moyenne { background: #e8f0ff; color: #2a4d99; }
.plat-tile-priorite--optionnelle { background: var(--color-surface-alt); color: var(--color-text-muted); }
.plat-tile-priorite--cse { background: #d8f0ef; color: #1a6a68; }
.plat-tile-cout {
  font-size: 10px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 500;
}

/* Drawer overlay + panneau latéral */
.plat-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  animation: plat-fade-in 0.18s ease;
}
.plat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: var(--color-surface);
  z-index: 999;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  animation: plat-slide-in 0.22s ease;
}
body.plat-drawer-open {
  overflow: hidden;
}
.plat-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border, #e9e9ee);
  background: var(--color-surface);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--color-text);
  transition: all 0.12s;
}
.plat-drawer-close:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.plat-drawer-content {
  padding: 22px 28px 32px;
}
.plat-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--color-border, #e9e9ee);
  margin-bottom: 18px;
}
.plat-drawer-head .plat-logo {
  flex-shrink: 0;
}
.plat-drawer-head-text {
  flex: 1;
  min-width: 0;
}
.plat-drawer-nom {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.plat-drawer-cat {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
}
.plat-drawer-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.plat-drawer-body > * + * {
  margin-top: 14px;
}

@keyframes plat-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes plat-slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 720px) {
  .plat-drawer {
    width: 100vw;
  }
  .plat-drawer-content {
    padding: 0 18px 24px;
  }
  .plat-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .plat-tile {
    padding: 14px 10px;
  }
  .plat-tile-logo {
    width: 56px;
    height: 56px;
  }
  .plat-tile-nom {
    font-size: 14px;
  }
}

/* =========================================================
   KPI BANNER — dashboard haut de page
   ========================================================= */

.kpi-banner {
  background: linear-gradient(135deg, #fbfcff 0%, #f2f5fb 100%);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 24px;
}

.kpi-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-banner-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.kpi-banner-sub {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 2px 0 0;
}
.kpi-banner-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.kpi-banner-link:hover {
  text-decoration: underline;
}

.kpi-banner-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.kpi-banner-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.kpi-banner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 40, 80, 0.05);
  border-color: var(--color-primary);
}
.kpi-banner-card--empty {
  opacity: 0.5;
}
.kpi-banner-card-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.kpi-banner-card-body {
  flex: 1;
  min-width: 0;
}
.kpi-banner-card-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}
.kpi-banner-card-label {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-banner-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1;
}
.kpi-banner-badge--ok {
  background: #e7f6de;
  color: #3e7826;
}
.kpi-banner-badge--warn {
  background: #fde3e0;
  color: #c13d31;
}
.kpi-banner-badge--high {
  background: #fff1d0;
  color: #b47500;
}

/* État vide (aucune saisie) */
.kpi-banner--empty {
  background: linear-gradient(135deg, #fff9e4 0%, #fde3e0 100%);
}
.kpi-banner-empty-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.kpi-banner-empty-icon {
  font-size: 42px;
  flex-shrink: 0;
}
.kpi-banner-empty-text {
  flex: 1;
  min-width: 220px;
}
.kpi-banner-empty-text h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
}
.kpi-banner-empty-text p {
  font-size: 14px;
  color: var(--color-text-soft, #555);
  margin: 0;
  line-height: 1.4;
}
.kpi-banner-cta {
  flex-shrink: 0;
}

@media (max-width: 1000px) {
  .kpi-banner-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .kpi-banner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-banner-card-value {
    font-size: 16px;
  }
}

/* ─── Setup chips intégrés dans le KPI banner (header du dashboard) ─── */
.kpi-banner-setup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.kpi-banner-setup-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.12s;
}
.kpi-banner-setup-chip--filled {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.kpi-banner-setup-chip--missing {
  background: var(--color-surface);
  border: 1px dashed var(--color-border, #e9e9ee);
  color: var(--color-text-soft, #6a6a75);
}
.kpi-banner-setup-chip--missing:hover {
  border-color: var(--color-primary, #6ea4ff);
  color: var(--color-text);
}
.kpi-banner-setup-chip-cta {
  color: var(--color-primary, #6ea4ff);
  font-weight: 500;
  margin-left: 4px;
}

/* ─── Setup centre — prompt dashboard + carte page Mes KPI ─── */
.kpi-setup-prompt {
  margin-bottom: 24px;
  border-radius: 18px;
  padding: 18px 22px;
}
.kpi-setup-prompt--empty {
  background: linear-gradient(135deg, #eef4ff 0%, #fff8ee 100%);
  border: 1px solid #d8e3ff;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.kpi-setup-prompt-icon {
  font-size: 36px;
  flex-shrink: 0;
}
.kpi-setup-prompt-text {
  flex: 1;
  min-width: 220px;
}
.kpi-setup-prompt-text h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.kpi-setup-prompt-text p {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 6px;
  line-height: 1.4;
}
.kpi-setup-prompt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kpi-setup-prompt-list li {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
}
.kpi-setup-prompt-cta {
  flex-shrink: 0;
}
.kpi-setup-prompt--filled {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border, #e9e9ee);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px 18px;
}
.kpi-setup-prompt-summary {
  font-size: 14px;
  color: var(--color-text);
}
.kpi-setup-prompt-edit {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

/* ─── V=234 : Prompt completion centre (multi-sections) ─── */
.kpi-setup-prompt--multi {
  background: linear-gradient(135deg, #fff8ee 0%, #f0f4ff 100%);
  border: 1px solid #f0d39c;
  display: block;
}
.kpi-setup-prompt-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.kpi-setup-prompt-progress {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.kpi-setup-prompt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #facc15 0%, #f97316 50%, #1f9a4d 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.kpi-setup-prompt-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-setup-section {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, transform 0.15s;
}
.kpi-setup-section:hover {
  border-color: var(--color-primary, #6ea4ff);
  transform: translateY(-1px);
}
.kpi-setup-section-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.kpi-setup-section-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kpi-setup-section-body strong {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.kpi-setup-section-body span {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.4;
}
.kpi-setup-section-cta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-primary, #6ea4ff);
  font-weight: 500;
  white-space: nowrap;
}
.kpi-setup-prompt-edit:hover {
  text-decoration: underline;
}

/* Carte setup sur la page Mes KPI */
.kpi-setup-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.kpi-setup-head {
  margin-bottom: 12px;
}
.kpi-setup-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
}
.kpi-setup-sub {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 2px 0 0;
}
.kpi-setup-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.kpi-setup-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e9e9ee);
}
.kpi-setup-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.kpi-setup-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kpi-setup-text strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.kpi-setup-text small {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.3;
}
.kpi-setup-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.kpi-setup-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  font-size: 14px;
  text-align: right;
  background: var(--color-surface);
}
.kpi-setup-input:focus {
  outline: 2px solid var(--color-primary, #6ea4ff);
  outline-offset: 1px;
  border-color: var(--color-primary, #6ea4ff);
}
.kpi-setup-unit {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
}
.kpi-setup-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kpi-setup-status {
  font-size: 12px;
  color: #1a8a4d;
  font-weight: 500;
}

@media (max-width: 560px) {
  .kpi-setup-prompt--empty {
    padding: 16px;
  }
  .kpi-setup-field {
    flex-wrap: wrap;
  }
}

/* =========================================================
   CARTE RÉSEAU — France
   ========================================================= */

.carte-legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.carte-legende-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carte-legende-item strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  display: block;
}
.carte-legende-item span {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.carte-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.15);
}
.carte-dot--ouvert {
  background: #3e7826;
  border: 3px solid #c7e3b4;
}
.carte-dot--signe {
  background: #b47500;
}
.carte-dot--rdv2 {
  background: var(--color-primary);
}
.carte-dot--prospect {
  background: #9a9aa0;
}
/* Pastille pour la ligne "Cercles d'exclusivité" : reproduit visuellement
   un cercle pointillé pour faire écho aux cercles dessinés sur la carte. */
.carte-dot--exclusivity {
  background: transparent;
  border: 2px dashed #3e7826;
  box-shadow: none;
}

/* Ligne dédiée au toggle d'exclusivité dans la légende — léger séparateur
   visuel pour différencier le contrôle d'affichage (cercles) des filtres
   par statut (markers). */
.carte-legende-item--toggle {
  border-top: 1px dashed var(--color-border, #e9e9ee);
  padding-top: 10px;
  margin-top: 4px;
}

@media (min-width: 720px) {
  .carte-legende-item--toggle {
    border-top: none;
    border-left: 1px dashed var(--color-border, #e9e9ee);
    padding-top: 0;
    padding-left: 14px;
    margin-top: 0;
    margin-left: 4px;
  }
}

/* Cercles Leaflet d'exclusivité — surcharge visuelle douce.
   Note : Leaflet applique l'inline style en priorité (color, fillColor…),
   on ne touche donc pas aux couleurs ici, juste à des effets génériques. */
.carte-exclusivity-circle {
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.carte-container {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  overflow: hidden;
}
.carte-svg {
  width: 100%;
  height: auto;
  max-height: 720px;
  display: block;
}

.carte-point {
  cursor: pointer;
  transition: transform 0.15s ease;
  transform-origin: center;
}
.carte-point:hover {
  transform: scale(1.3);
}
.carte-point-halo {
  fill: currentColor;
  opacity: 0.15;
  transition: opacity 0.15s;
}
.carte-point:hover .carte-point-halo {
  opacity: 0.3;
}
.carte-point-dot {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 2;
}
.carte-point-inner {
  fill: #fff;
}

.carte-point--ouvert {
  color: #3e7826;
}
.carte-point--signe {
  color: #b47500;
}
.carte-point--rdv2 {
  color: #2d64c8;
}
.carte-point--prospect {
  color: #9a9aa0;
}

/* Popup détails */
.carte-popup {
  position: absolute;
  min-width: 180px;
  max-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.15);
  pointer-events: none;
  z-index: 20;
}
.carte-popup-statut {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 600;
  margin-bottom: 4px;
}
.carte-popup-ville {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.carte-popup-details {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-soft, #555);
  line-height: 1.4;
}
.carte-popup-interesses {
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(110, 164, 255, 0.12);
  color: #2b5fc7;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.carte-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}
.carte-footer-note {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
}
.carte-footer-admin {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  background: #fff9e4;
  padding: 6px 10px;
  border-radius: 8px;
}
.carte-footer code {
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .carte-container {
    padding: 12px;
  }
  .carte-popup {
    min-width: 140px;
    max-width: 200px;
    padding: 10px 12px;
  }
  .carte-popup-ville {
    font-size: 15px;
  }
}

/* =========================================================
   MOBILE POLISH — v70
   Corrections responsive finales pour iPhone (320-480px) :
   padding container, header compact, bottom-sheet popups,
   tap targets et overflow tables.
   ========================================================= */

@media (max-width: 480px) {
  /* Container — plus de place pour le contenu */
  .container {
    padding: 0 14px;
  }

  /* Header compact */
  .app-header-inner {
    padding: 10px 14px;
    gap: 8px;
  }
  .brand-subtitle {
    display: none;
  }

  /* Titres de page : pas trop gros sur mobile */
  .page-title {
    font-size: 22px;
    line-height: 1.2;
  }
  .page-sub {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Dashboard : légère compression */
  .dashboard-main {
    padding: 16px 0 48px;
  }
  .welcome {
    padding: 20px;
  }
  .welcome-title {
    font-size: 20px;
  }

  /* Quick actions plus verticales */
  .dashboard-quick-actions {
    flex-direction: column;
  }

  /* KPI banner : header compact */
  .kpi-banner {
    padding: 16px;
  }
  .kpi-banner-title {
    font-size: 17px;
  }
  .kpi-banner-sub {
    font-size: 11px;
  }
  .kpi-banner-header {
    gap: 6px;
  }
  .kpi-banner-link {
    font-size: 12px;
  }

  /* Partenariats / Plateformes cards */
  .part-card,
  .plat-card {
    padding: 16px;
  }
  .part-nom,
  .plat-nom {
    font-size: 17px;
  }

  /* Légende carte : 2 cols au lieu de 4 */
  .carte-legende {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 14px;
    gap: 10px;
  }
  .carte-legende-item strong {
    font-size: 18px;
  }
  .carte-container {
    padding: 8px;
  }

  /* Tap targets minimum 44px */
  .btn-primary,
  .btn-secondary,
  .part-copy-btn,
  .kpi-banner-link,
  .carte-point {
    min-height: 40px;
  }
  .btn-primary,
  .btn-secondary {
    padding: 12px 18px;
    font-size: 14px;
  }

  /* Footer carte : passer en col */
  .carte-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Bottom-sheet popup pour la carte réseau sur mobile/tablette
   (curseur = doigt, donc popup flottant est masqué) */
@media (max-width: 768px) {
  .carte-popup {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    max-width: none !important;
    padding: 16px 18px !important;
    border-radius: 16px;
    box-shadow: 0 -8px 30px rgba(20, 40, 80, 0.2);
    pointer-events: auto;
    animation: popupSlideUp 0.2s ease;
  }
  .carte-popup-statut {
    font-size: 12px;
  }
  .carte-popup-ville {
    font-size: 18px;
  }
  .carte-popup-details {
    font-size: 14px;
  }
}

@keyframes popupSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Tables longues (admin-tickets, admin-kpi, etc.) : scroll horizontal
   plutôt que de casser la mise en page */
@media (max-width: 640px) {
  .table-scroll,
  table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Wrapping mot de passe / email long dans les forms */
  .part-contact-link,
  .contact-email {
    word-break: break-all;
  }
}

/* iPhone SE (320px) — dernières protections */
@media (max-width: 340px) {
  .container {
    padding: 0 10px;
  }
  .app-header-inner {
    padding: 8px 10px;
  }
  .kpi-banner-grid {
    grid-template-columns: 1fr;
  }
  .kpi-banner-card {
    padding: 12px 10px;
  }
  .carte-legende {
    grid-template-columns: 1fr;
  }
}

/* Prévention overflow horizontal global (safety net) */
html, body {
  overflow-x: hidden;
}
.page, .dashboard-page, .main, .dashboard-main {
  max-width: 100vw;
  overflow-x: hidden;
}

/* =========================================================
   ACTUALITÉS
   ========================================================= */

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

.actu-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  padding: 24px 26px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.actu-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.05);
}
.actu-card--important {
  border-left: 4px solid var(--color-primary);
  background: linear-gradient(90deg, #f8fbff 0%, var(--color-surface) 50%);
}

.actu-header {
  margin-bottom: 14px;
}
.actu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.actu-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.actu-cat--teal { background: var(--color-accent-teal-bg, #e7f6de); color: var(--color-accent-teal-fg, #3e7826); }
.actu-cat--amber { background: #fff1d0; color: #b47500; }
.actu-cat--coral { background: var(--color-accent-coral-bg, #fde3e0); color: var(--color-accent-coral-fg, #c13d31); }
.actu-cat--purple { background: var(--color-accent-purple-bg, #eaf2ff); color: var(--color-accent-purple-fg, #2d64c8); }
.actu-cat--gray { background: var(--color-surface-alt); color: #6a6a75; }

.actu-date {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 500;
}
.actu-badge-new {
  background: #c13d31;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.actu-titre {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.actu-resume {
  font-size: 15px;
  color: var(--color-text-soft, #555);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

.actu-corps {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
}
.actu-corps p {
  margin: 0 0 12px;
}
.actu-corps p:last-child {
  margin-bottom: 0;
}
.actu-corps strong {
  font-weight: 600;
}
.actu-corps ul {
  margin: 10px 0;
  padding-left: 20px;
}
.actu-corps li {
  margin-bottom: 6px;
}
.actu-corps code {
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-mono);
}

.actu-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border, #e9e9ee);
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
}

@media (max-width: 560px) {
  .actu-card {
    padding: 18px 18px;
  }
  .actu-titre {
    font-size: 20px;
  }
}

/* =========================================================
   VUE PROSPECT — bandeau + leçons verrouillées
   ========================================================= */

.prospect-banner {
  background: linear-gradient(135deg, #fff9e4 0%, #fef3d5 100%);
  border: 1px solid #f0dfa0;
  border-radius: 20px;
  padding: 22px 26px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.prospect-banner-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}
.prospect-banner-body {
  flex: 1;
  min-width: 0;
}
.prospect-banner-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 6px;
  color: #5d4300;
  letter-spacing: -0.01em;
}
.prospect-banner-text {
  font-size: 14px;
  color: #5d4300;
  margin: 0 0 10px;
  line-height: 1.5;
}
.prospect-banner-text strong {
  font-weight: 600;
}
.prospect-banner-cta {
  font-size: 13px;
  margin: 0;
  color: #5d4300;
}
.prospect-banner-cta a {
  color: #b47500;
  font-weight: 500;
  text-decoration: none;
}
.prospect-banner-cta a:hover {
  text-decoration: underline;
}

/* Leçon verrouillée pour prospect */
.flesson-row--locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-surface-alt);
}
.flesson-row--locked:hover {
  background: var(--color-surface-alt);
}
.flesson-status--locked {
  background: #fff9e4;
  color: #b47500;
  font-weight: 600;
}

/* Leçon "bientôt disponible" (ex. module IA à venir) */
.flesson-row--soon {
  opacity: 0.85;
  cursor: not-allowed;
  background: linear-gradient(135deg, #f5f7ff 0%, #faf7ff 100%);
  border: 1px dashed rgba(110, 164, 255, 0.4);
}
.flesson-row--soon:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #f3eeff 100%);
}
.flesson-row--soon .flesson-num {
  background: rgba(110, 164, 255, 0.15);
  color: #5a7ebf;
}
.flesson-status--soon {
  background: linear-gradient(90deg, rgba(110, 164, 255, 0.18), rgba(160, 110, 255, 0.18));
  color: #4f4bb0;
  font-weight: 600;
  white-space: nowrap;
}

/* Carton invitation "bientôt dispo" — style bouton disabled */
.com-canal-soon {
  display: block;
  padding: 10px 14px;
  background: #fff9e4;
  color: #b47500;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px dashed #f0dfa0;
  margin-top: 8px;
}
.com-canal-soon em {
  font-style: italic;
  opacity: 0.8;
}

.com-canal-cta--alt {
  background: var(--color-accent-coral-bg, #fde3e0);
  color: var(--color-accent-coral-fg, #c13d31);
}
.com-canal-cta--alt:hover {
  background: #fbd5d0;
}

@media (max-width: 560px) {
  .prospect-banner {
    flex-direction: column;
    padding: 18px 18px;
    gap: 12px;
  }
  .prospect-banner-icon {
    font-size: 32px;
  }
}

/* =========================================================
   CARTE LEAFLET V2 — override et polish
   ========================================================= */

/* Override : la légende devient interactive (checkboxes) */
.carte-legende-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.carte-legende-item {
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s;
  user-select: none;
}
.carte-legende-item:hover {
  background: var(--color-surface-alt, #f5f5f7);
}

/* Toolbar (recherche) */
.carte-toolbar {
  margin-bottom: 16px;
}
.carte-search {
  position: relative;
}
#carte-search-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
#carte-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light, #eaf2ff);
}
.carte-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.12);
  list-style: none;
  padding: 6px;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
}
.carte-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 14px;
}
.carte-search-result:hover {
  background: var(--color-primary-light, #eaf2ff);
}
.carte-search-result .carte-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.carte-search-result span:nth-child(2) {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}
.carte-search-result small {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.carte-search-empty {
  padding: 14px 12px;
  color: var(--color-text-soft, #6a6a75);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  list-style: none;
}

/* Container Leaflet */
.carte-leaflet-wrap {
  position: relative;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  overflow: hidden;
  background: #f2f5fb;
  margin-bottom: 20px;
}
.carte-leaflet {
  width: 100%;
  height: 640px;
  background: #e7ecf5;
}
@media (max-width: 768px) {
  .carte-leaflet {
    height: 540px;
  }
}
@media (max-width: 480px) {
  .carte-leaflet {
    height: 480px;
  }
  .carte-leaflet-wrap {
    border-radius: 14px;
  }
}

/* Loader pendant que Leaflet charge depuis le CDN */
.carte-leaflet-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(242, 245, 251, 0.92);
  z-index: 10;
  pointer-events: none;
}
.carte-leaflet-loading p {
  margin: 0;
  color: var(--color-text-soft, #6a6a75);
  font-size: 14px;
}
.carte-leaflet-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-primary-light, #eaf2ff);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: carteSpin 0.8s linear infinite;
}
@keyframes carteSpin {
  to {
    transform: rotate(360deg);
  }
}
.carte-err {
  color: var(--color-accent-coral-fg, #c13d31);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

/* Popup Leaflet — style Color Room */
.carte-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.15);
  padding: 2px;
}
.carte-leaflet-popup .leaflet-popup-content {
  margin: 14px 18px;
  font-family: inherit;
}
.carte-popup-ct {
  min-width: 180px;
}
.carte-popup-ct .carte-popup-statut {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.carte-popup-ct .carte-popup-ville {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.carte-popup-ct .carte-popup-details {
  font-size: 13px;
  color: var(--color-text-soft, #555);
  line-height: 1.4;
  margin-bottom: 10px;
}
.carte-popup-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.carte-popup-link:hover {
  text-decoration: underline;
}

/* Marker circle : pulse léger sur les centres ouverts */
.carte-marker--ouvert {
  animation: cartePulseOuvert 2.2s ease-in-out infinite;
}
@keyframes cartePulseOuvert {
  0%, 100% {
    stroke-opacity: 1;
    stroke-width: 2.5;
  }
  50% {
    stroke-opacity: 0.7;
    stroke-width: 4;
  }
}

/* Leaflet attribution : plus discret */
.leaflet-container .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 4px 0 0 0;
}

/* =========================================================
   ADRESSE DE LIVRAISON — form commande
   ========================================================= */

.commande-adresse {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 24px 0;
}
.commande-adresse-header {
  margin-bottom: 14px;
}
.commande-adresse-header h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.commande-adresse-sub {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.adresse-warning {
  background: #fff9e4;
  border-left: 3px solid #b47500;
  color: #5d4300;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.adresse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adresse-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.adresse-field--full {
  grid-column: 1 / -1;
}
.adresse-field > span {
  font-weight: 500;
  color: var(--color-text);
}
.adresse-field .req {
  color: var(--color-accent-coral-fg, #c13d31);
}
.adresse-field small {
  font-weight: 400;
  color: var(--color-text-soft, #6a6a75);
  margin-left: 4px;
}
.adresse-field small.adresse-jour-note {
  display: block;
  margin-left: 0;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
}
.adresse-field input {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  background: var(--color-surface);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.adresse-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light, #eaf2ff);
}
@media (max-width: 560px) {
  .adresse-grid {
    grid-template-columns: 1fr;
  }
  .commande-adresse {
    padding: 16px 16px;
  }
}

/* =========================================================
   DASHBOARD — Admin Pulse (stats réseau temps réel)
   ========================================================= */

.admin-pulse {
  background: linear-gradient(135deg, #0f1729 0%, #1a2744 100%);
  color: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

/* Bandeau finance admin (MRR + CA cumulé) */
.admin-finance {
  margin-bottom: 24px;
}
.admin-finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .admin-finance-grid { grid-template-columns: 1fr; }
}
.admin-finance-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
}
.admin-finance-card--mrr {
  background: linear-gradient(135deg, #f4fff0 0%, var(--color-surface) 100%);
  border-color: rgba(141, 217, 104, 0.35);
}
.admin-finance-card--ca {
  background: linear-gradient(135deg, #f5f7ff 0%, var(--color-surface) 100%);
  border-color: rgba(110, 164, 255, 0.35);
}
.admin-finance-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.admin-finance-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--color-primary-dark);
  line-height: 1;
  letter-spacing: -0.01em;
}
.admin-finance-num small {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-soft);
  margin-left: 2px;
}
.admin-finance-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-soft);
}
.admin-finance-potential {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(141, 217, 104, 0.14);
  color: #3e7826;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}
.admin-finance-warning {
  margin: 10px 0 0;
  font-size: 11px;
  color: #a66a00;
  background: rgba(255, 196, 87, 0.14);
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
}
.admin-pulse::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(110, 164, 255, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.admin-pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}
.admin-pulse-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.admin-pulse-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 3px 0 0;
}
.admin-pulse-link {
  color: #6ea4ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.admin-pulse-link:hover {
  color: #fff;
}

.admin-pulse-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  position: relative;
}
.admin-pulse-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 12px;
  text-decoration: none;
  color: #fff;
  transition: background 0.15s, transform 0.12s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-pulse-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.admin-pulse-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.admin-pulse-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.admin-pulse-card--green .admin-pulse-num { color: #8dd968; }
.admin-pulse-card--amber .admin-pulse-num { color: #f4c151; }
.admin-pulse-card--blue .admin-pulse-num { color: #6ea4ff; }
.admin-pulse-card--gray .admin-pulse-num { color: #b5b9c5; }
.admin-pulse-card--alert {
  background: rgba(250, 100, 87, 0.18);
  border-color: rgba(250, 100, 87, 0.35);
}
.admin-pulse-card--alert .admin-pulse-num {
  color: #ffb1a6;
  animation: pulseNumAlert 2s ease-in-out infinite;
}
@keyframes pulseNumAlert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@media (max-width: 1000px) {
  .admin-pulse-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .admin-pulse {
    padding: 18px;
  }
  .admin-pulse-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-pulse-num {
    font-size: 24px;
  }
}

/* =========================================================
   DASHBOARD — Mini-carte réseau (preview)
   ========================================================= */

.dash-map-preview {
  margin-bottom: 24px;
}
.dash-map-link {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dash-map-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.06);
  transform: translateY(-2px);
}

.dash-map-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-map-svg {
  width: 100%;
  height: auto;
  max-height: 260px;
  display: block;
}

.dash-map-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.dash-map-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.dash-map-sub {
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
}
.dash-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.dash-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.dash-map-legend-item strong {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
}
.dash-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-map-dot--ouvert { background: #3e7826; }
.dash-map-dot--signe { background: #b47500; }
.dash-map-dot--rdv2 { background: #2d64c8; }
.dash-map-dot--prospect { background: #9a9aa0; }

.dash-map-cta {
  display: inline-block;
  margin-top: 6px;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 13px;
}

@media (max-width: 720px) {
  .dash-map-link {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .dash-map-svg {
    max-height: 280px;
  }
}

/* =========================================================
   EFFET WAHOU — intro cinématique première connexion
   ========================================================= */

body.wahou-active {
  overflow: hidden;
}

.wahou-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0a1028 0%, #15234a 50%, #2a1540 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: wahouFadeIn 0.6s ease-out;
}
.wahou-overlay--out {
  animation: wahouFadeOut 0.5s ease-in forwards;
}
@keyframes wahouFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wahouFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.04); }
}

/* Fond animé — blobs et particules */
.wahou-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.wahou-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: wahouBlob 16s ease-in-out infinite;
}
.wahou-blob--1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, #6EA4FF 0%, transparent 70%);
}
.wahou-blob--2 {
  bottom: -20%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, #FA6457 0%, transparent 70%);
  animation-delay: -5s;
}
.wahou-blob--3 {
  top: 30%;
  right: 20%;
  width: 35vw;
  height: 35vw;
  background: radial-gradient(circle, #FACE4E 0%, transparent 70%);
  animation-delay: -9s;
  opacity: 0.35;
}
@keyframes wahouBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.1); }
  66% { transform: translate(-6%, 8%) scale(0.92); }
}

.wahou-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* Contenu central */
.wahou-content {
  position: relative;
  max-width: 720px;
  width: 90%;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.wahou-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  animation: wahouLogoFlash 0.8s ease-out 0.2s both;
}
.wahou-logo-c { color: #6EA4FF; }
.wahou-logo-o1 { color: #fff; }
.wahou-logo-l { color: #fff; }
.wahou-logo-o2 { color: #fff; }
.wahou-logo-r { color: #8dd968; }
.wahou-logo-room {
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
@keyframes wahouLogoFlash {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stage des slides */
.wahou-stage {
  position: relative;
  min-height: 360px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wahou-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* FIX : l'attribut hidden doit vraiment cacher, le display: flex au-dessus
   l'override sinon et on voit toutes les slides empilées. */
.wahou-slide[hidden] {
  display: none !important;
}
.wahou-slide--in .wahou-slide-inner {
  animation: wahouSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wahou-slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 540px;
}
@keyframes wahouSlideIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.wahou-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.wahou-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--color-surface) 0%, #d0dfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wahou-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  font-weight: 400;
  max-width: 480px;
}
.wahou-illus {
  width: 240px;
  max-width: 70vw;
  height: auto;
  margin-top: 12px;
}
.wahou-illus--map { width: 280px; max-width: 60vw; }
.wahou-illus--progress { width: 220px; height: 60px; }
.wahou-illus--tools { width: 280px; }
.wahou-illus--go { width: 200px; height: 80px; }

/* Contrôles bas */
.wahou-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.wahou-dots {
  display: flex;
  gap: 8px;
}
.wahou-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.wahou-dot:hover {
  transform: scale(1.3);
  background: rgba(255, 255, 255, 0.5);
}
.wahou-dot--active {
  background: var(--color-surface);
  transform: scale(1.25);
}

.wahou-cta {
  background: var(--color-surface);
  color: #0a1028;
  border: none;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s, background 0.15s;
  pointer-events: none;
}
.wahou-cta--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: wahouCtaPulse 2.2s ease-in-out infinite;
}
.wahou-cta:hover {
  background: #f0f4fe;
  transform: translateY(-2px);
}
@keyframes wahouCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

.wahou-skip {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.15s;
}
.wahou-skip:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .wahou-title { font-size: 32px; }
  .wahou-subtitle { font-size: 15px; }
  .wahou-logo { font-size: 22px; }
  .wahou-logo-room { font-size: 18px; }
  .wahou-stage { min-height: 320px; }
  .wahou-illus { width: 180px; }
}

/* =========================================================
   WAHOU INTRO v202 — refonte des animations & illustrations
   - Plus de SVG <animate> (popcorn)
   - CSS keyframes GPU + transform/opacity uniquement
   - Layout aere : gap accru entre logo et stage
   ========================================================= */

/* Layout : aerer entre logo et premiere slide */
.wahou-content { gap: 48px; }
.wahou-stage { min-height: 380px; }
.wahou-slide-inner { gap: 28px; }

/* Particules CSS-only (plus de SVG <animate>) */
.wahou-particles { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }
.wahou-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: wahouParticleFloat var(--dur, 12s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes wahouParticleFloat {
  0% { opacity: 0; transform: translateY(0); }
  20%, 80% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-60px); }
}

/* SLIDE "spark" — 3 anneaux concentriques pulsants */
.wahou-spark-core {
  transform-origin: center;
  animation: wahouSparkCore 2.4s ease-in-out infinite;
  will-change: transform;
}
.wahou-spark-ring {
  transform-origin: center;
  opacity: 0;
  animation: wahouSparkRing 2.4s ease-out infinite;
  will-change: transform, opacity;
}
.wahou-spark-ring--3 { animation-delay: 0.4s; }
@keyframes wahouSparkCore {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes wahouSparkRing {
  0% { transform: scale(0.65); opacity: 0.7; }
  70% { opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* SLIDE "map" — France + Corse + dots pulsants en CSS */
.wahou-map-france,
.wahou-map-corse {
  fill: url(#wahouMapFill);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(110, 164, 255, 0.18));
}
.wahou-map-pin { opacity: 0; animation: wahouPinIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s) forwards; }
.wahou-map-pin--ouvert .wahou-map-dot { fill: #8dd968; }
.wahou-map-pin--ouvert .wahou-map-halo { fill: #8dd968; }
.wahou-map-pin--signe .wahou-map-dot { fill: #f4c151; }
.wahou-map-pin--signe .wahou-map-halo { fill: #f4c151; }
.wahou-map-halo {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: wahouMapHalo 2.4s ease-out calc(var(--delay, 0s) + 0.6s) infinite;
  will-change: transform, opacity;
}
@keyframes wahouPinIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wahouMapHalo {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 0.5; }
  85%, 100% { opacity: 0; transform: scale(1.4); }
}

/* SLIDE "progress" — barres de modules formation, montent en stagger */
.wahou-progress-bar {
  fill: #FA6457;
  transform-origin: bottom center;
  transform-box: fill-box;
  transform: scaleY(0);
  animation: wahouProgressIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) var(--delay, 0s) forwards;
  will-change: transform;
}
@keyframes wahouProgressIn {
  to { transform: scaleY(1); }
}

/* SLIDE "tools" — 3 cercles flottants */
.wahou-tool {
  transform-origin: center;
  animation: wahouToolFloat 3s ease-in-out infinite;
  will-change: transform;
}
.wahou-tool--1 { animation-delay: 0s; }
.wahou-tool--2 { animation-delay: 0.4s; }
.wahou-tool--3 { animation-delay: 0.8s; }
@keyframes wahouToolFloat {
  0%, 100% { transform: translate(60px, 60px); }
  50% { transform: translate(60px, 50px); }
}
.wahou-tool--2 {
  animation-name: wahouToolFloat2;
}
@keyframes wahouToolFloat2 {
  0%, 100% { transform: translate(140px, 60px); }
  50% { transform: translate(140px, 70px); }
}
.wahou-tool--3 {
  animation-name: wahouToolFloat3;
}
@keyframes wahouToolFloat3 {
  0%, 100% { transform: translate(220px, 60px); }
  50% { transform: translate(220px, 50px); }
}

/* SLIDE "go" — fleche qui se trace */
.wahou-go-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: wahouGoTrace 1s ease-out 0.2s forwards;
}
.wahou-go-arrow {
  opacity: 0;
  animation: wahouGoArrow 0.4s ease-out 1.1s forwards;
}
@keyframes wahouGoTrace {
  to { stroke-dashoffset: 0; }
}
@keyframes wahouGoArrow {
  to { opacity: 1; }
}

/* =========================================================
   MINI-CARTE DASHBOARD — Leaflet lecture seule (V3)
   Remplace le SVG bricolé par une vraie carte CartoDB propre.
   ========================================================= */

.dash-map-card {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 20px;
  padding: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
  align-items: stretch;
}
.dash-map-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.05);
}

.dash-map-leaflet-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f5fb;
  min-height: 280px;
  height: 100%;
}
.dash-map-leaflet {
  width: 100%;
  height: 100%;
  min-height: 280px;
  cursor: default;
}
/* Désactive les contrôles visibles sur la mini-carte */
.dash-map-leaflet-wrap .leaflet-control-attribution,
.dash-map-leaflet-wrap .leaflet-control-zoom {
  display: none !important;
}

.dash-map-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 245, 251, 0.9);
  z-index: 2;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Toggle France / Monde flottant en haut à gauche de la mini-carte. */
.dash-map-zone-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dash-map-zone-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.08s ease;
  font-family: inherit;
  line-height: 1.1;
  white-space: nowrap;
}

.dash-map-zone-btn:hover {
  color: var(--color-text);
}

.dash-map-zone-btn.is-active {
  background: var(--color-primary, #6ea4ff);
  color: #fff;
  box-shadow: 0 1px 4px rgba(110, 164, 255, 0.35);
}

.dash-map-zone-btn:active {
  transform: scale(0.96);
}
.dash-map-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-primary-light, #eaf2ff);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: carteSpin 0.8s linear infinite;
}
.dash-map-err {
  color: var(--color-text-soft, #6a6a75);
  font-size: 13px;
}

.dash-map-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
}
.dash-map-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.dash-map-sub {
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
}
.dash-map-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  width: fit-content;
}
.dash-map-cta:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .dash-map-card {
    grid-template-columns: 1fr;
  }
  .dash-map-leaflet-wrap {
    min-height: 240px;
  }
  .dash-map-leaflet {
    min-height: 240px;
  }
}

/* =========================================================
   TOGGLE France/Monde sur /reseau
   ========================================================= */

.carte-view-toggle {
  display: inline-flex;
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 12px;
}
.carte-view-btn {
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.carte-view-btn:hover {
  color: var(--color-text);
}
.carte-view-btn--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.08);
}

/* =========================================================
   CLUSTERS LEAFLET — custom Color Room
   ========================================================= */

/* Reset des styles par défaut Leaflet.markercluster */
.carte-cluster-wrap {
  background: none !important;
  border: none !important;
}
.marker-cluster,
.marker-cluster div {
  background: none !important;
  border: none !important;
  color: inherit !important;
}
.marker-cluster {
  background-clip: padding-box;
}

/* Notre bulle custom */
.carte-cluster {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(20, 40, 80, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.95);
  position: relative;
  animation: clusterPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.carte-cluster::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0.25;
  background: inherit;
  animation: clusterRipple 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes clusterPop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes clusterRipple {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.carte-cluster--ouvert {
  background: radial-gradient(circle at 30% 30%, #6cad4d, #3e7826);
}
.carte-cluster--signe {
  background: radial-gradient(circle at 30% 30%, #d29c2e, #b47500);
}
.carte-cluster--rdv2 {
  background: radial-gradient(circle at 30% 30%, #4a82e0, #2d64c8);
}
.carte-cluster--prospect {
  background: radial-gradient(circle at 30% 30%, #a8adbd, #7c8091);
}

/* Animation spiderfy (quand on clique sur un cluster verrouillé) */
.leaflet-marker-icon.leaflet-marker-draggable,
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.4s ease-out, opacity 0.3s ease-in;
}

/* Mini-cluster pour le dashboard (taille réduite) */
.carte-cluster--mini {
  font-size: 12px;
  border-width: 2px;
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.15);
}
.carte-cluster--mini::before {
  display: none;
}

/* =========================================================
   INVITATION — page publique d'activation
   ========================================================= */

.invitation-page .login-card {
  max-width: 520px;
}
.invitation-logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: 0.06em;
}
.invitation-logo .logo-c { color: #6EA4FF; }
.invitation-logo .logo-o1 { color: var(--color-text); }
.invitation-logo .logo-l { color: var(--color-text); }
.invitation-logo .logo-o2 { color: var(--color-text); }
.invitation-logo .logo-r { color: #8dd968; }
.invitation-logo .logo-room {
  font-style: italic;
  font-size: 20px;
  color: var(--color-text-soft);
  margin-left: 4px;
}

.invitation-loading {
  text-align: center;
  padding: 30px 0;
  color: var(--color-text-soft);
}
.invitation-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 14px;
  border: 3px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: carteSpin 0.8s linear infinite;
}

.invitation-error {
  padding: 20px 0;
  text-align: center;
}
.invitation-error h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--color-accent-coral-fg, #c13d31);
}

.invitation-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.invitation-sub {
  color: var(--color-text-soft);
  margin: 0 0 24px;
  line-height: 1.5;
  font-size: 15px;
}
.invitation-readonly {
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  cursor: not-allowed;
}
.invitation-pwd-hint {
  font-size: 12px;
  color: var(--color-text-soft);
  margin: -4px 0 12px;
  padding: 8px 12px;
  background: #fff9e4;
  border-radius: 8px;
}

/* =========================================================
   MON PROFIL
   ========================================================= */

.profil-grid {
  display: grid;
  gap: 22px;
}
.profil-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  padding: 22px 24px;
}
.profil-block-head {
  margin-bottom: 16px;
}
.profil-block-head h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.profil-block-sub {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0;
}
.profil-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.profil-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.profil-field--full {
  grid-column: 1 / -1;
}
.profil-field > span {
  font-weight: 500;
  color: var(--color-text);
}
.profil-field small {
  font-weight: 400;
  color: var(--color-text-soft);
  margin-left: 4px;
}
.profil-field input {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  background: var(--color-surface);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.profil-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light, #eaf2ff);
}
.profil-readonly {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-soft);
  cursor: not-allowed;
}
.profil-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.profil-status {
  font-size: 13px;
  transition: opacity 0.2s;
}
.profil-status--info { color: var(--color-text-soft); }
.profil-status--success { color: var(--color-accent-teal-fg, #3e7826); font-weight: 500; }
.profil-status--error { color: var(--color-accent-coral-fg, #c13d31); font-weight: 500; }

.profil-warn {
  background: #fff9e4;
  border-left: 3px solid #b47500;
  color: #5d4300;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.avatar--link {
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s;
}
.avatar--link:hover {
  transform: scale(1.08);
  background: var(--color-accent-purple-bg);
}

@media (max-width: 560px) {
  .profil-form { grid-template-columns: 1fr; }
}

/* =========================================================
   ADMIN — Publication d'actualité
   ========================================================= */

.admin-actu-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  padding: 22px 24px;
}
.admin-actu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.admin-actu-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.admin-actu-field--full {
  grid-column: 1 / -1;
}
.admin-actu-field > span {
  font-weight: 500;
  color: var(--color-text);
}
.admin-actu-field small {
  font-weight: 400;
  color: var(--color-text-soft);
  margin-left: 4px;
}
.admin-actu-field input,
.admin-actu-field select,
.admin-actu-field textarea {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  background: var(--color-surface);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-actu-field textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 180px;
}
.admin-actu-field input:focus,
.admin-actu-field select:focus,
.admin-actu-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light, #eaf2ff);
}
.admin-actu-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.admin-actu-checkbox input {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-primary);
}
.admin-actu-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.admin-actu-preview-wrap {
  margin-top: 24px;
  background: var(--color-surface-alt);
  border-radius: 16px;
  padding: 20px 24px;
}
.admin-actu-preview-wrap h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-add-info {
  background: var(--color-primary-light, #eaf2ff);
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary-dark);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.admin-add-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .admin-actu-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MINI-CARTE DASHBOARD — fluide
   Pas de CSS transform sur les markers Leaflet (conflit avec ses
   transforms internes de positionnement). L'effet cinématique
   repose uniquement sur map.flyTo() côté JS.
   ========================================================= */

/* Fade-in progressif des tiles au chargement initial */
.dash-map-leaflet .leaflet-tile-pane {
  animation: dashTilesFadeIn 0.7s ease-out both;
}
@keyframes dashTilesFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Lors du zoom (flyTo), les tiles se chargent progressivement.
   On force une transition plus smooth que le défaut Leaflet. */
.dash-map-leaflet .leaflet-tile {
  transition: opacity 0.35s ease-out;
}

/* =========================================================
   INFLUENCEURS — cards licencié + admin list
   ========================================================= */

.influ-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
}
.influ-stat {
  font-size: 13px;
  color: var(--color-text-soft);
}
.influ-stat strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin-right: 4px;
}

.influ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.influ-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.influ-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.05);
}

.influ-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.influ-handle {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.influ-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fa6457 0%, #6ea4ff 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}
.influ-handle-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.influ-handle-text strong {
  font-size: 15px;
  color: var(--color-text);
}
.influ-nom {
  font-size: 12px;
  color: var(--color-text-soft);
}
.influ-ig-ext {
  font-size: 14px;
  color: var(--color-text-soft);
  margin-left: auto;
}
.influ-handle:hover strong {
  color: var(--color-primary);
}

.influ-statut {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.influ-statut--amber { background: #fff1d0; color: #b47500; }
.influ-statut--blue { background: var(--color-primary-light, #eaf2ff); color: var(--color-primary-dark); }
.influ-statut--purple { background: #f0e7ff; color: #5e3fc0; }
.influ-statut--green { background: #e7f6de; color: #3e7826; }
.influ-statut--gray { background: var(--color-surface-alt); color: #6a6a75; }

.influ-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.influ-chip {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  color: var(--color-text-soft);
  font-weight: 500;
  white-space: nowrap;
}

.influ-brief {
  background: #fbf7ed;
  border-left: 3px solid #d2a24a;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #5d4300;
}
.influ-brief strong {
  color: #b47500;
}

.influ-contacts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.influ-contact-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.influ-contact-link:hover {
  text-decoration: underline;
}

.influ-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--color-border, #e9e9ee);
}
.influ-status-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-soft);
}
.influ-status-select select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  cursor: pointer;
}
.influ-post-link {
  color: var(--color-primary);
  font-size: 12px;
  text-decoration: none;
  font-weight: 500;
}
.influ-post-link:hover { text-decoration: underline; }

.influ-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--color-surface-alt);
  border-radius: 20px;
  color: var(--color-text-soft);
  grid-column: 1 / -1;
}
.influ-empty-icon {
  font-size: 52px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.influ-empty h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-text);
}
.influ-empty p {
  font-size: 14px;
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ─── ADMIN liste ─── */
.admin-influ-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.admin-influ-list-header {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1.5fr 0.5fr;
  gap: 14px;
  padding: 14px 18px;
  background: var(--color-surface-alt);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-soft);
}
.admin-influ-row {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1.5fr 0.5fr;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border);
  align-items: center;
  font-size: 13px;
}
.admin-influ-row:hover { background: var(--color-surface-alt); }
.admin-influ-handle strong { display: block; color: var(--color-text); }
.admin-influ-handle .muted { font-size: 11px; }
.admin-influ-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-influ-centres { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-influ-centre-chip {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 500;
}
.admin-influ-centres-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.admin-influ-centre-cb {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.admin-influ-centre-cb input { accent-color: var(--color-primary); }

@media (max-width: 720px) {
  .admin-influ-list-header { display: none; }
  .admin-influ-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .influ-card { padding: 16px; }
  .influ-actions { flex-direction: column; align-items: stretch; }
}

/* Resource card pink (pour la tuile Influenceurs dashboard) */
.resource-icon.pink {
  background: var(--color-accent-pink-bg, #fde3e0);
  color: var(--color-accent-pink-fg, #c13d31);
}

/* =========================================================
   REVUE DE PRESSE — cards multi-plateformes
   ========================================================= */

/* KPIs en haut */
.presse-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #0f1729 0%, #1a2744 100%);
  color: #fff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.presse-kpis::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(250, 100, 87, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.presse-kpi {
  position: relative;
  text-align: center;
}
.presse-kpi strong {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--color-surface) 0%, #fa6457 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.presse-kpi span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Filtres */
.presse-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.presse-search-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.presse-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.presse-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.presse-chip {
  background: var(--color-surface-alt);
  border: 1px solid transparent;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.presse-chip:hover {
  background: #ebedf3;
  color: var(--color-text);
}
.presse-chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.presse-ville-select {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--color-surface);
  cursor: pointer;
  max-width: 280px;
}

.presse-results-count {
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 14px;
  font-weight: 500;
}

/* Grid de cards */
.presse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.presse-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.presse-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.08);
  border-color: var(--color-primary);
}

.presse-visual {
  display: block;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.presse-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-out;
}
.presse-visual:hover img {
  transform: scale(1.05);
}
.presse-visual--youtube::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
}
.presse-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 2;
  transition: transform 0.2s;
}
.presse-visual--youtube:hover .presse-play {
  transform: scale(1.15);
}
.presse-visual--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
.presse-platform-icon {
  font-size: 44px;
  margin-bottom: 6px;
}
.presse-platform-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

.presse-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.presse-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.presse-type {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.presse-type--influence { background: #fde3e0; color: #c13d31; }
.presse-type--presse { background: var(--color-primary-light); color: var(--color-primary-dark); }
.presse-type--tv { background: #f0e7ff; color: #5e3fc0; }
.presse-type--radio { background: #e7f6de; color: #3e7826; }
.presse-type--presseblog { background: #fff1d0; color: #b47500; }

.presse-brand {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: #6a6a75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.presse-brand--color { background: #e7f6de; color: #3e7826; }
.presse-brand--brick { background: #fde3e0; color: #c13d31; }

.presse-ville {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-left: auto;
}

.presse-media {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}

/* V=514 : legende du post (3 lignes max) et likes / commentaires sur l'image */
.presse-caption {
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.presse-visual--ig { overflow: hidden; }
.presse-visual-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 36px 14px 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.presse-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-soft);
}
.presse-followers { font-weight: 500; }
.presse-date {
  font-style: italic;
}

.presse-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}
.presse-link {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.12s;
}
.presse-link:hover {
  transform: translateY(-1px);
}
.presse-link--instagram { background: #fde3e0; color: #c13d31; }
.presse-link--tiktok { background: #1a1a1a; color: #fff; }
.presse-link--youtube { background: #ffe4e4; color: #ba0000; }
.presse-link--article { background: var(--color-primary-light); color: var(--color-primary-dark); }

.presse-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  background: var(--color-surface-alt);
  border-radius: 20px;
  color: var(--color-text-soft);
}
.presse-empty-icon {
  font-size: 52px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.presse-empty h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-text);
}

@media (max-width: 560px) {
  .presse-kpi strong { font-size: 24px; }
  .presse-filter-chips { gap: 6px; }
  .presse-chip { font-size: 12px; padding: 5px 11px; }
}

/* =========================================================
   PRESSE PREVIEW MODAL — embed live
   ========================================================= */

body.presse-modal-open {
  overflow: hidden;
}

.presse-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: presseModalIn 0.2s ease-out;
}
.presse-modal--closing {
  animation: presseModalOut 0.2s ease-in forwards;
}
@keyframes presseModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes presseModalOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.presse-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 40, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.presse-modal-content {
  position: relative;
  background: var(--color-surface);
  border-radius: 20px;
  max-width: 720px;
  width: 92%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  animation: presseModalSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
@keyframes presseModalSlideUp {
  from {
    transform: translateY(20px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.presse-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border);
}
.presse-modal-title {
  flex: 1;
  min-width: 0;
}
.presse-modal-title h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 6px 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
  word-break: break-word;
  line-height: 1.2;
}
.presse-modal-sub {
  font-size: 13px;
  color: var(--color-text-soft);
}
.presse-modal-close {
  background: var(--color-surface-alt);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.presse-modal-close:hover {
  background: #ebedf3;
  color: var(--color-text);
}

.presse-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.presse-modal-loader {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-soft);
}
.presse-modal-loader .carte-leaflet-spinner {
  margin: 0 auto 14px;
}
.presse-modal-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-soft);
}

.presse-modal-tabs {
  display: flex;
  gap: 6px;
  background: var(--color-surface-alt);
  padding: 4px;
  border-radius: 10px;
  width: fit-content;
  margin: 0 auto 4px;
}
.presse-modal-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.presse-modal-tab:hover { color: var(--color-text); }
.presse-modal-tab--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.1);
}

.presse-modal-embed-wrap {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 0;
}
.presse-modal-embed {
  display: none;
  width: 100%;
}
.presse-modal-embed--active {
  display: flex;
  justify-content: center;
  animation: embedFadeIn 0.3s ease-out;
}
@keyframes embedFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* YouTube iframe responsive */
.presse-embed-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 640px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.presse-embed-youtube .presse-embed-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.presse-embed-ig,
.presse-embed-tiktok {
  width: 100%;
  display: flex;
  justify-content: center;
}
.presse-embed-iframe--ig {
  width: 100%;
  max-width: 480px;
  height: 70vh;
  max-height: 760px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}
.presse-embed-iframe--tiktok {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.presse-embed-fallback--social { display: block; width: 100%; }

/* V=510 : apercu reel de la publication dans la carte (embed Instagram).
   L'en-tete de l'embed Instagram (avatar + compte) est
   rogne pour ne garder que le visuel ; un calque transparent capte le clic. */
.presse-visual--live {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.presse-visual--instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.presse-visual--live iframe {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.presse-visual--live iframe.is-loaded { opacity: 1; }
.presse-visual--instagram iframe {
  top: -55px;
  height: calc(100% + 400px);
}
.presse-visual-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.presse-visual-hit:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}
.presse-visual--image img { background: #f3f1ee; }

/* Article — iframe avec fallback si bloqué */
.presse-embed-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.presse-embed-article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  border-radius: 10px;
  font-size: 13px;
}
.presse-embed-article-domain {
  font-weight: 500;
  color: var(--color-text);
}
.presse-embed-article-open {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.presse-embed-article-open:hover { text-decoration: underline; }
.presse-embed-article .presse-embed-iframe {
  width: 100%;
  height: 60vh;
  max-height: 600px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
/* Les iframes qui sont bloqués (X-Frame-Options) → on les masque */
.presse-embed-article:not(.loaded) .presse-embed-iframe {
  opacity: 0.4;
}
.presse-embed-article-fallback {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: var(--color-surface-alt);
  border-radius: 12px;
  color: var(--color-text-soft);
}
.presse-embed-article-fallback p {
  margin: 0 0 16px;
}
.presse-embed-article.error .presse-embed-iframe { display: none; }
.presse-embed-article.error .presse-embed-article-fallback { display: block; }

.presse-modal-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
}
.presse-modal-open-external {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.presse-modal-open-external:hover { text-decoration: underline; }

/* Play overlay sur les placeholders non-YouTube */
.presse-visual {
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: inherit;
  position: relative;
}
.presse-play-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.15s;
}
.presse-visual:hover .presse-play-overlay {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.08);
}

@media (max-width: 560px) {
  .presse-modal-content {
    width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    align-self: flex-end;
  }
  .presse-modal-title h2 { font-size: 18px; }
  .presse-embed-article .presse-embed-iframe { height: 70vh; }
}

/* =========================================================
   BACK-OFFICE CONTRIBUTIF — CMS admin (Playbooks/Kits/Partenariats)
   ========================================================= */

.cms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cms-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cms-row:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(20, 40, 80, 0.04);
}
.cms-row-main {
  flex: 1;
  min-width: 0;
}
.cms-row-title {
  font-size: 15px;
  margin-bottom: 2px;
  color: var(--color-text);
}
.cms-row-desc {
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}
.cms-row-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cms-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn-danger {
  border-color: #fde3e0 !important;
  color: #c13d31 !important;
}
.btn-danger:hover {
  background: #fde3e0 !important;
}

.cms-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: #6a6a75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cms-badge--ready { background: #e7f6de; color: #3e7826; }
.cms-badge--draft { background: #fff1d0; color: #b47500; }
.cms-badge--standard { background: var(--color-primary-light); color: var(--color-primary-dark); }
.cms-badge--growth { background: #fde3e0; color: #c13d31; }
.cms-badge--loom { background: #f0e7ff; color: #5e3fc0; }

/* Kits inline editor */
.cms-kits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cms-kit-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
}
.cms-kit-icon {
  width: 48px;
  height: 48px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-alt);
  font-size: 24px;
}
.cms-kit-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-kit-main input {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
}
.cms-kit-main input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.cms-kit-title { font-weight: 500; }
.cms-kit-url { font-family: var(--font-mono); font-size: 12px; }
.cms-kit-actions {
  display: flex;
  align-items: center;
}
@media (max-width: 640px) {
  .cms-kit-row {
    grid-template-columns: 1fr;
  }
  .cms-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .cms-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* =========================================================
   PAGES LÉGALES — Politique de confidentialité + Mentions légales
   ========================================================= */

.legal-page {
  min-height: 100vh;
  background: var(--color-bg, #fafaf7);
  display: flex;
  flex-direction: column;
}

/* === Page CGV modele reseau (V354+) === */
.cgv-modele-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cgv-modele-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cgv-modele-actions .btn-secondary {
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
}
.btn-secondary--ok {
  background: rgba(123, 198, 86, 0.18) !important;
  color: var(--color-accent-teal-fg, #3e7826) !important;
  border-color: var(--color-accent-teal-fg, #3e7826) !important;
}
.cgv-modele-banner {
  background: rgba(250, 206, 78, 0.18);
  border-left: 4px solid var(--cr-yellow, #face4e);
  padding: 14px 18px;
  margin: 16px 0 24px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}
.cgv-modele-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
}
.cgv-modele-body h1 {
  font-size: 26px;
  margin: 32px 0 14px;
}
.cgv-modele-body h2 {
  font-size: 20px;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.cgv-modele-body h3 { font-size: 16px; margin: 20px 0 10px; }
.cgv-modele-body p { margin: 0 0 12px; }
.cgv-modele-body ul, .cgv-modele-body ol { margin: 0 0 12px 24px; }
.cgv-modele-body li { margin-bottom: 6px; }
.cgv-modele-body strong { color: var(--color-text); }
.cgv-modele-body blockquote {
  border-left: 3px solid var(--cr-blue, #6ea4ff);
  padding: 8px 16px;
  margin: 14px 0;
  background: var(--color-surface-alt);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.cgv-modele-body hr {
  border: 0;
  border-top: 1px dashed var(--color-border);
  margin: 32px 0;
}
.legal-loading,
.legal-error {
  text-align: center;
  padding: 40px 16px;
  color: var(--color-text-muted);
}
.legal-error { color: var(--color-danger, #c13d31); }

@media (max-width: 540px) {
  .cgv-modele-toolbar { flex-direction: column; }
  .cgv-modele-actions { width: 100%; }
  .cgv-modele-actions .btn-secondary { flex: 1; text-align: center; }
}

.legal-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.legal-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.legal-logo .logo-c { color: #6EA4FF; }
.legal-logo .logo-o { color: var(--color-text); }
.legal-logo .logo-l { color: var(--color-text); }
.legal-logo .logo-r { color: #8dd968; }
.legal-logo .logo-room {
  font-style: italic;
  font-size: 17px;
  color: var(--color-text-soft);
  margin-left: 4px;
}
.legal-nav {
  display: flex;
  gap: 18px;
}
.legal-nav a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.legal-nav a:hover {
  color: var(--color-primary);
}

.legal-main {
  flex: 1;
  padding: 40px 24px 60px;
}
.legal-container {
  max-width: 780px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 18px;
  padding: 40px 48px;
  border: 1px solid var(--color-border);
}
.legal-breadcrumb {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0 0 16px;
}
.legal-breadcrumb a {
  color: var(--color-text-soft);
  text-decoration: none;
}
.legal-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.legal-container h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.legal-updated {
  font-size: 13px;
  color: var(--color-text-soft);
  font-style: italic;
  margin: 0 0 32px;
}
.legal-container section {
  margin-bottom: 32px;
}
.legal-container h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.legal-container h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--color-text);
}
.legal-container p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--color-text);
}
.legal-container ul {
  font-size: 15px;
  line-height: 1.7;
  padding-left: 22px;
  margin: 0 0 14px;
  color: var(--color-text);
}
.legal-container li {
  margin-bottom: 4px;
}
.legal-container a {
  color: var(--color-primary);
  font-weight: 500;
}
.legal-container strong {
  font-weight: 600;
}

.legal-footer-nav {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft);
}
.legal-footer-nav a {
  color: var(--color-text-soft);
  text-decoration: none;
  margin: 0 6px;
  font-weight: 500;
}
.legal-footer-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.legal-sep {
  color: var(--color-text-soft);
  opacity: 0.5;
  margin: 0 4px;
}

@media (max-width: 640px) {
  .legal-container {
    padding: 28px 22px;
    border-radius: 14px;
  }
  .legal-container h1 { font-size: 26px; }
  .legal-container h2 { font-size: 18px; }
}

/* =========================================================
   FOOTER GLOBAL — toutes les pages connectées
   ========================================================= */

.global-footer {
  margin-top: auto;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 20px 24px;
}
.global-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-soft);
}
.global-footer-nav {
  display: flex;
  gap: 18px;
}
.global-footer-nav a {
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.global-footer-nav a:hover {
  color: var(--color-primary);
}

/* Liens légaux sur la page login */
.login-legal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 12px;
}
.login-legal a {
  color: var(--color-text-soft);
  text-decoration: none;
  margin: 0 4px;
}
.login-legal a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .global-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================================
   LOGOS Color Room — section Marketing
   ========================================================= */

.mk-logo-group {
  margin-bottom: 22px;
}
.mk-logo-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.mk-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.mk-logo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mk-logo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 40, 80, 0.06);
  border-color: var(--color-primary);
}
.mk-logo-preview {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 500;
  overflow: hidden;
}
/* Vraie image vectorielle/bitmap centrée et contenue */
.mk-logo-img {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Badge format (SVG / PNG / etc.) en bas à droite du preview */
.mk-logo-format {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: #1a1a1a;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  pointer-events: none;
}
.mk-logo-card--dark .mk-logo-format {
  background: rgba(20, 25, 50, 0.82);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.mk-logo-format--svg,
.mk-logo-format--ai,
.mk-logo-format--eps,
.mk-logo-format--pdf {
  /* tous vectoriels — accent bleu discret */
  color: #1f4ea8;
}
.mk-logo-card--dark .mk-logo-format--svg,
.mk-logo-card--dark .mk-logo-format--ai,
.mk-logo-card--dark .mk-logo-format--eps,
.mk-logo-card--dark .mk-logo-format--pdf {
  color: #aac8ff;
}
.mk-logo-card--color .mk-logo-preview {
  background: linear-gradient(135deg, #eaf2ff 0%, #fde3e0 50%, #fff9e4 100%);
  color: var(--color-text);
}
.mk-logo-card--color .mk-logo-ghost {
  background: linear-gradient(120deg, #6EA4FF 0%, #FA6457 50%, #8dd968 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mk-logo-card--light .mk-logo-preview {
  background: var(--color-surface-alt);
  color: #0a1028;
}
.mk-logo-card--dark .mk-logo-preview {
  background: linear-gradient(135deg, #0a1028 0%, #1a2744 100%);
  color: #fff;
}
.mk-logo-ghost .roomSuffix,
.mk-logo-ghost {
  /* Le 'Room' en italique */
  font-style: normal;
}
.mk-logo-body {
  padding: 12px 14px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mk-logo-body strong {
  font-size: 14px;
  color: var(--color-text);
}
.mk-logo-body span {
  color: var(--color-text-soft);
  line-height: 1.4;
}
.mk-logo-open {
  margin-top: 4px;
  color: var(--color-primary) !important;
  font-weight: 500;
  font-size: 12px;
}
.mk-logos-drive {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* =========================================================
   PROFIL — Bloc "Mes documents Siège" (dossier Drive perso)
   ========================================================= */

.profil-block--docs {
  background: linear-gradient(135deg, #fafbff 0%, #f4f7fd 100%);
  border-color: var(--color-primary-light);
}
.profil-block--muted {
  background: var(--color-surface-alt);
}
.profil-docs-empty {
  font-size: 14px;
  color: var(--color-text-soft);
  margin: 10px 0 0;
  padding: 14px 16px;
  background: #fff9e4;
  border-left: 3px solid #b47500;
  border-radius: 8px;
}
.profil-docs-empty a {
  color: #b47500;
  font-weight: 500;
}
.profil-docs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.profil-docs-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px;
}
.profil-docs-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profil-docs-item strong {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
}
.profil-docs-item small {
  color: var(--color-text-soft);
  font-size: 11px;
}
.profil-docs-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.profil-docs-note {
  font-size: 12px;
  color: var(--color-text-soft);
}
.profil-docs-note a {
  color: var(--color-primary);
}

/* =========================================================
   ADMIN — Bouton dossier Drive dans la liste licenciés
   ========================================================= */

.admin-row-drive {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.admin-drive-btn {
  background: var(--color-primary-light);
  border: 1px solid transparent;
  color: var(--color-primary);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, transform 0.1s;
}
.admin-drive-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.08);
}
.admin-drive-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: var(--color-text-soft);
  opacity: 0.5;
  cursor: help;
}

/* =========================================================
   MODÈLE ÉCONOMIQUE — preview + full + simulateur BP
   ========================================================= */

/* === PREVIEW (prospects non-NDA) === */
.me-preview-intro {
  background: linear-gradient(135deg, #fff9e4 0%, #fde3e0 100%);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.me-preview-intro h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-text);
}
.me-preview-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5d4300;
}
.me-preview-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.me-preview-stats div {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.me-preview-stats strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
}
.me-preview-stats span {
  font-size: 13px;
  color: var(--color-text-soft);
}

.me-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.me-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.me-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.me-card-icon {
  font-size: 32px;
}
.me-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}
.me-card-duree {
  font-size: 12px;
  color: var(--color-text-soft);
}
.me-card-range {
  margin-top: 4px;
  padding: 10px 12px;
  background: #e7f6de;
  border-radius: 10px;
}
.me-card-range strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #3e7826;
  letter-spacing: -0.01em;
}
.me-card-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.me-card-price {
  font-size: 14px;
  color: var(--color-text);
}
.me-card-price small {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-left: 4px;
  font-weight: 400;
}

/* CTA NDA */
.me-nda-cta {
  margin-top: 30px;
  background: linear-gradient(135deg, #0f1729 0%, #1a2744 100%);
  color: #fff;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.me-nda-cta::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(110, 164, 255, 0.2) 0%, transparent 60%);
  pointer-events: none;
}
.me-nda-cta::after {
  content: "";
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(250, 100, 87, 0.2) 0%, transparent 60%);
  pointer-events: none;
}
.me-nda-cta-icon {
  font-size: 48px;
  position: relative;
  z-index: 2;
}
.me-nda-cta h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 12px 0 10px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.me-nda-cta p {
  max-width: 580px;
  margin: 0 auto 18px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 2;
}
.me-nda-cta-btn {
  position: relative;
  z-index: 2;
  background: var(--color-surface) !important;
  color: #0a1028 !important;
  padding: 14px 28px !important;
  font-weight: 600;
  font-size: 15px;
}
.me-nda-cta-btn:hover {
  background: #f0f4fe !important;
  transform: translateY(-2px);
}
.me-nda-cta-sub {
  margin-top: 14px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
/* Lien vers l'agenda de Benjamin sous le bouton NDA (parcours prospect) */
.me-nda-cta-agenda {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.me-nda-cta-agenda:hover { color: #cfe0ff; }

/* === FULL (licenciés + prospects NDA) === */
.me-licence {
  background: linear-gradient(135deg, #fafbff 0%, #f4f7fd 100%);
  border: 1px solid var(--color-primary-light);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.me-licence-icon {
  font-size: 40px;
  flex-shrink: 0;
}
.me-licence-body {
  flex: 1;
}
.me-licence-body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--color-text);
}
.me-licence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.me-licence-grid > div {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 14px 16px;
}
.me-licence-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.me-licence-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}
.me-licence-grid small {
  font-size: 11px;
  color: var(--color-text-soft);
}
.me-licence-note {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* Mini-table paliers redevance (zones de chalandise) */
.me-licence-zones {
  margin-top: 14px;
  background: var(--color-surface);
  border-radius: 12px;
  padding: 14px 16px;
}
.me-licence-zones-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
/* V399 : chip "Durée : 36 mois" a coté du titre (remplace colonne Duree) */
.me-licence-zones-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.me-licence-zones-duree {
  display: inline-block;
  padding: 3px 10px;
  background: #eef3ff;
  color: #2a4d8f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.me-zones-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.me-zones-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}
.me-zones-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f0f1f5;
  vertical-align: middle;
}
.me-zones-table tr:last-child td { border-bottom: none; }

.me-zone-price strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary-dark);
}
.me-zone-price small {
  font-size: 11px;
  color: var(--color-text-soft);
}
.me-zone-duree {
  font-size: 12px;
  color: var(--color-text-soft);
}

.me-zone-row--mine {
  background: linear-gradient(90deg, rgba(110, 164, 255, 0.12), rgba(110, 164, 255, 0.04));
  border-left: 3px solid #6ea4ff;
}
.me-zone-row--mine td:first-child {
  padding-left: 10px;
}
.me-zone-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #2b5fc7;
  background: rgba(110, 164, 255, 0.18);
  border-radius: 10px;
  letter-spacing: 0.03em;
}

/* Tableau pricing */
.me-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.me-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 620px;
}
.me-table th {
  background: var(--color-surface-alt);
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.me-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f2;
  vertical-align: middle;
}
.me-table tr:last-child td { border-bottom: 0; }
.me-table td strong { color: var(--color-text); }
.me-table small { color: var(--color-text-soft); font-size: 11px; }
.me-pct {
  background: #e7f6de;
  color: #3e7826;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.me-pax-sub td { padding-top: 6px; padding-bottom: 6px; }

/* Benchmark réseau */
.me-benchmark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.me-benchmark-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}
.me-benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.me-benchmark-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f2;
}
.me-benchmark-table tr:last-child td { border-bottom: 0; }
.me-benchmark-table tr:nth-child(even) { background: var(--color-surface-alt); }
.me-bench-typique { text-align: right; }
.me-bench-typique strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-primary-dark);
}
.me-chart-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.me-chart-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.me-chart-svg { width: 100%; height: auto; display: block; }
.me-chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-soft);
  margin: 10px 0 0;
  align-items: center;
}
/* V409 : disclaimer saisonnalite indoor sous la legende du graphe */
.me-chart-seasonality {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fff7e6;
  border-left: 3px solid #b47500;
  border-radius: 8px;
  font-size: 11.5px;
  color: #5d4300;
  line-height: 1.5;
}
/* Simulateur BP */
.bp-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 22px 24px;
}
.bp-subsection {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  margin: 0 0 12px;
}
.bp-inputs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.bp-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-input-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.bp-input-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-slider {
  flex: 1;
  accent-color: var(--color-primary);
}
.bp-number {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  text-align: right;
}
.bp-unit {
  font-size: 11px;
  color: var(--color-text-soft);
  min-width: 95px;
}
/* v=190 : hint cadence reservation/jour sous chaque slider du simulateur BP. */
.bp-resa-hint {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  min-height: 14px;
}
.bp-resa-hint:empty {
  display: none;
}

.bp-charges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bp-charge-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.bp-charge-field > span {
  color: var(--color-text-soft);
  font-weight: 500;
}
.bp-charge-field > div {
  display: flex;
  gap: 6px;
  align-items: center;
}
.bp-charge-field input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  text-align: right;
  background: var(--color-surface);
}
.bp-charge-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.bp-charge-field > div > span {
  color: var(--color-text-soft);
  font-size: 13px;
}

.bp-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bp-kpi {
  background: var(--color-surface-alt);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.bp-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bp-kpi strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bp-kpi small {
  display: block;
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 2px;
}
.bp-kpi--ca { background: #eaf2ff; }
.bp-kpi--ca strong { color: #2d64c8; }
.bp-kpi--marge { background: #e7f6de; }
.bp-kpi--marge strong { color: #3e7826; }
.bp-kpi--charges { background: #fff1d0; }
.bp-kpi--charges strong { color: #b47500; }
.bp-kpi--resultat { background: #fde3e0; }
.bp-kpi--resultat strong { color: #c13d31; }
.bp-kpi--resultat strong.bp-pos { color: #3e7826; }
.bp-kpi--resultat { transition: background 0.2s; }
.bp-kpi--resultat:has(strong.bp-pos) { background: #e7f6de; }

.bp-proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.bp-proj {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
}
.bp-proj span {
  display: block;
  color: var(--color-text-soft);
  font-size: 11px;
  margin-bottom: 2px;
}
.bp-proj strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-text);
}
.bp-chart-wrap {
  background: var(--color-surface-alt);
  border-radius: 14px;
  padding: 14px 16px;
}
.bp-chart {
  width: 100%;
  height: auto;
  display: block;
}
.me-disclaimer {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff9e4;
  border-left: 3px solid #b47500;
  border-radius: 8px;
  font-size: 12px;
  color: #5d4300;
  line-height: 1.5;
}

/* V389+V393 : bouton "Télécharger le BP (PDF)".
   La variante --block est utilisée en bas de la colonne inputs (V393),
   l'ancien header bp-outputs-head reste pour compat éventuelle. */
.bp-outputs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bp-outputs-head .bp-subsection { margin: 0; }
/* V393 : sous-section "Investissement initial" (Licence + Travaux) */
.bp-initial-grid {
  background: #fff7e6;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed #ffd886;
}
.bp-initial-grid .bp-charge-field span:first-child { color: #5d4300; }

/* V500 : scénario de référence du BP (courbes Lyon / Paris du graphe) */
.bp-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bp-scenario {
  flex: 1 1 180px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid #c5cadb;
  border-radius: 10px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bp-scenario--moyen { border-left-color: #6ea4ff; }
.bp-scenario--grand { border-left-color: #9B7BF7; }
.bp-scenario:hover { border-color: var(--color-primary); }
.bp-scenario.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  font-weight: 600;
}
.bp-scenario--moyen.is-active { border-left-color: #6ea4ff; }
.bp-scenario--grand.is-active { border-left-color: #9B7BF7; }
.bp-scenario-hint {
  display: block;
  margin: 8px 0 4px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  line-height: 1.45;
}
.bp-scenario-hint:empty { display: none; }

/* V396 : selecteur redevance par zone (sous Investissement initial) */
.bp-redev-field {
  margin-top: 12px;
  padding: 14px 16px;
  background: #fff7e6;
  border: 1px dashed #ffd886;
  border-radius: 10px;
}
.bp-redev-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5d4300;
  margin-bottom: 8px;
}
.bp-redev-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bp-redev-select {
  flex: 1;
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid #d4d6de;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.bp-redev-select:focus {
  outline: none;
  border-color: var(--color-primary, #6ea4ff);
  box-shadow: 0 0 0 3px rgba(110, 164, 255, 0.15);
}
.bp-redev-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ffd886;
}
.bp-redev-value strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #5d4300;
}
.bp-redev-value small {
  font-size: 11px;
  color: #8a6a2d;
}
.bp-redev-duree {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #8a6a2d;
  font-style: italic;
}

/* V393 : input prix éditable a coté de chaque activité */
.bp-input-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.bp-input-prix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 4px 8px;
  border: 1px solid var(--color-border-soft, #e5e7ee);
  border-radius: 8px;
  font-size: 12px;
}
.bp-input-prix-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted, #6a6a75);
}
.bp-prix-input {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid var(--color-border, #d4d6de);
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bp-prix-input:focus {
  outline: none;
  border-color: var(--color-primary, #6ea4ff);
}
.bp-prix-suffix {
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  font-weight: 500;
  white-space: nowrap;
}

/* V385 : tableau mois par mois sous le graphe trésorerie */
.bp-monthly-wrap { margin-top: 22px; }
.bp-monthly-sub {
  font-size: 12px;
  color: var(--color-muted, #6a6a75);
  margin: 0 0 10px;
}
.bp-monthly-table-wrap {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--color-border-soft, #e5e7ee);
  border-radius: 10px;
  background: #fff;
}
.bp-monthly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bp-monthly-table thead th {
  position: sticky;
  top: 0;
  background: #f4f6fb;
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted, #6a6a75);
  border-bottom: 1px solid var(--color-border-soft, #e5e7ee);
  z-index: 1;
}
.bp-monthly-table thead th.num { text-align: right; }
.bp-monthly-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid #f1f2f6;
  white-space: nowrap;
}
.bp-monthly-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bp-monthly-table tbody tr:nth-child(even) td { background: #fafbfd; }
.bp-monthly-table tbody tr:hover td { background: #eef3ff; }
.bp-monthly-mois { font-weight: 600; color: var(--color-text); }
.bp-monthly-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #fff0e0;
  color: #a25a00;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.bp-monthly-net--pos { color: #3e7826; }
.bp-monthly-net--neg { color: #c13d31; }
.bp-monthly-treso--pos { color: #3e7826; font-weight: 500; }
.bp-monthly-treso--neg { color: #c13d31; font-weight: 500; }
@media (max-width: 560px) {
  .bp-monthly-table-wrap { max-height: 280px; }
  .bp-monthly-table thead th,
  .bp-monthly-table tbody td { padding: 6px 8px; font-size: 11.5px; }
}

/* === Sélecteur de devise (prospect/admin) — variante proéminente V384 ===
   Demande Paul "il faut que ça soit plus visible" : ancien <select>
   discret remplacé par un bloc gradient + boutons drapeau actifs/inactifs
   visuellement contrastés. */
.me-currency-switcher--prominent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #eef3ff 0%, #f7eafd 100%);
  border: 1px solid var(--color-primary-light, #c5d7ff);
  border-radius: 18px;
  box-shadow: 0 8px 24px -12px rgba(110, 164, 255, 0.45);
  position: relative;
  overflow: hidden;
}
.me-currency-switcher--prominent::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.me-currency-switcher-head {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.me-currency-switcher-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(110, 164, 255, 0.4));
}
.me-currency-switcher-text { flex: 1; min-width: 0; }
.me-currency-switcher-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}
.me-currency-switcher-sub {
  font-size: 13px;
  color: #5b6480;
  margin-top: 3px;
  line-height: 1.4;
}
.me-currency-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.me-currency-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  min-width: 130px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.me-currency-btn:hover {
  border-color: var(--color-primary-light, #c5d7ff);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(110, 164, 255, 0.25);
}
.me-currency-btn-flag { font-size: 28px; line-height: 1; }
.me-currency-btn-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.me-currency-btn-symbol {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}
.me-currency-btn-code {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-muted, #6a6a75);
}
.me-currency-btn--active {
  background: var(--color-primary, #6ea4ff);
  border-color: var(--color-primary, #6ea4ff);
  box-shadow: 0 6px 18px rgba(110, 164, 255, 0.45);
  transform: translateY(-1px);
}
.me-currency-btn--active:hover {
  background: var(--color-primary-dark, #5a8fe6);
  border-color: var(--color-primary-dark, #5a8fe6);
}
.me-currency-btn--active .me-currency-btn-symbol,
.me-currency-btn--active .me-currency-btn-code {
  color: #fff;
}
.me-currency-note {
  font-size: 11px;
  color: #5b6480;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid rgba(110, 164, 255, 0.25);
  position: relative;
  z-index: 1;
}

@media (max-width: 560px) {
  .me-currency-switcher--prominent { padding: 18px 20px; }
  .me-currency-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
  }
  .me-currency-btn-flag { font-size: 24px; }
  .me-currency-btn-symbol { font-size: 18px; }
}

@media (max-width: 960px) {
  .me-preview-intro { grid-template-columns: 1fr; }
  .me-benchmark-grid { grid-template-columns: 1fr; }
  .bp-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bp-charges-grid { grid-template-columns: 1fr; }
  .bp-kpi-grid { grid-template-columns: 1fr; }
  .bp-proj-grid { grid-template-columns: 1fr; }
  .me-licence-grid { grid-template-columns: 1fr; }
  .me-licence { flex-direction: column; }
}

/* =========================================================
   LANG SWITCHER — pill toggle avec slider coulissant
   ========================================================= */

/* Toggle theme jour/nuit (icône lune ou soleil dans le header) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-text-muted);
  transform: rotate(15deg);
}
html[data-theme="dark"] .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Override en dark mode du switcher de langue (background pâle inadapté) */
html[data-theme="dark"] .lang-switcher {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .lang-switcher-slider {
  background: rgba(255, 255, 255, 0.14);
}

.lang-switcher {
  position: relative;
  display: inline-flex;
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  flex-shrink: 0;
  isolation: isolate;
}
.lang-switcher-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc((100% - 6px) / 2);
  background: var(--color-surface);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.12);
  transform: translateX(calc(var(--lang-idx, 0) * 100%));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.lang-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  min-height: 28px;
}
.lang-btn:hover { color: var(--color-text); }
.lang-btn--active { color: var(--color-text); }
.lang-btn-flag {
  font-size: 14px;
  line-height: 1;
  filter: grayscale(0.3);
  transition: filter 0.2s, transform 0.2s;
}
.lang-btn--active .lang-btn-flag {
  filter: grayscale(0);
  transform: scale(1.1);
}
.lang-btn-code {
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* Switcher sur page login (position absolue top-right) */
.login-lang-corner {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 560px) {
  .login-lang-corner {
    top: 12px;
    right: 12px;
  }
  .lang-btn { padding: 5px 9px; }
  .lang-btn-code { font-size: 10px; }
}

/* Masque le switcher dans le header sur très petits écrans (priorité à l'avatar/logout) */
@media (max-width: 420px) {
  .header-right .lang-switcher .lang-btn-code {
    display: none;
  }
}

/* Page login : repositionnement pour le switcher */
.login-page {
  position: relative;
}

/* ═══════════════════════════════════════════════════════
   Toast de détection de nouvelle version déployée
   Affiché par version-check.js
   ═══════════════════════════════════════════════════════ */
#cr-version-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: #0f1729;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15, 23, 41, 0.3);
  padding: 16px 20px;
  min-width: 280px;
  max-width: 360px;
  animation: crToastIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(110, 164, 255, 0.25);
}
@keyframes crToastIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.cr-version-toast__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.cr-version-toast__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.cr-version-toast__btn {
  background: #6ea4ff;
  color: #0f1729;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.cr-version-toast__btn:hover {
  background: #8fbbff;
}
@media (max-width: 480px) {
  #cr-version-toast {
    bottom: 12px;
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════
   Page Actualités : badge "Original FR" + bouton Traduire
   ═══════════════════════════════════════════════════════ */
.actu-translate-btn {
  margin-left: auto;
  background: rgba(110, 164, 255, 0.12);
  color: #2b5fc7;
  border: 1px solid rgba(110, 164, 255, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.actu-translate-btn:hover {
  background: rgba(110, 164, 255, 0.22);
  border-color: rgba(110, 164, 255, 0.55);
}
.actu-translate-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.actu-original-badge {
  display: inline-block;
  margin: 6px 0 8px;
  padding: 3px 10px;
  background: #fef6d9;
  color: #8a6808;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.02em;
}

/* Toast transitoire (erreurs / infos) */
.cr-transient-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  animation: crTransientIn 0.25s ease-out, crTransientOut 0.25s ease-in 3.6s forwards;
}
.cr-transient-toast--info { background: #1a2744; color: #fff; }
.cr-transient-toast--warning { background: #fff9e4; color: #8a6808; border: 1px solid rgba(180, 117, 0, 0.3); }
.cr-transient-toast--error { background: #fde3e0; color: #c13d31; border: 1px solid rgba(193, 61, 49, 0.3); }
@keyframes crTransientIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes crTransientOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ═══════════════════════════════════════════════════════
   Logo SVG officiel — 4 tailles (sm/md/lg/xl)
   Ratio natif 951.65 × 484.29 ≈ 1.96:1
   ═══════════════════════════════════════════════════════ */
.logo-svg {
  display: block;
  height: auto;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-svg--sm { height: 32px; max-width: 80px; }    /* Header app + legal header */
.logo-svg--md { height: 56px; max-width: 130px; }   /* Page invitation */
.logo-svg--lg { height: 72px; max-width: 160px; }   /* Page login */
.logo-svg--xl { height: 110px; max-width: 240px; }  /* Wahou intro */

@media (max-width: 560px) {
  .logo-svg--lg { height: 56px; max-width: 130px; }
  .logo-svg--xl { height: 80px; max-width: 180px; }
}

/* Sous-texte sous l'item "Implantations · Zones verrouillées" dans la légende carte */
.carte-legende-locked {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-soft, #6b6b66);
  font-weight: 400;
  font-style: italic;
}

/* =========================================================
   PAGE CONCEPT — Présentation Color Room
   Hero · Piliers · Valeurs · Raisons · Avantages · Process · Équipe · CTAs
   ========================================================= */

.concept-page .main {
  padding-top: 8px;
}

/* ── HERO ───────────────────────────────────────────── */
.concept-hero {
  position: relative;
  margin: 24px 0 48px;
  padding: 64px 32px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(250, 100, 87, 0.18), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(110, 164, 255, 0.18), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(250, 196, 78, 0.16), transparent 55%),
    linear-gradient(135deg, #fefcf7 0%, #f7f1e8 100%);
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* v=190 : variante hero avec photo full-bleed (ambiance Color Room).
   On garde la même structure mais on switch en mode photo + overlay
   sombre pour garder le texte blanc lisible. */
.concept-hero--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  padding: 96px 32px;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concept-hero--photo .concept-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 12, 35, 0.62) 0%, rgba(70, 30, 90, 0.55) 100%);
  z-index: 0;
}
.concept-hero--photo .concept-hero-eyebrow {
  color: #b8d4ff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.concept-hero--photo .concept-hero-title,
.concept-hero--photo .concept-hero-tagline,
.concept-hero--photo .concept-hero-sub {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.concept-hero--photo .concept-hero-tagline {
  color: rgba(255, 255, 255, 0.88);
}
.concept-hero--photo .concept-hero-sub {
  color: rgba(255, 255, 255, 0.92);
}
.concept-hero--photo .concept-hero-stat strong {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.concept-hero--photo .concept-hero-stat span {
  color: rgba(255, 255, 255, 0.78);
}
.concept-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.concept-hero-eyebrow {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  color: #6EA4FF;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.concept-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: #1a1a1a;
  font-weight: 500;
  font-style: italic;
}
.concept-hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 18px);
  color: #6b6b66;
  margin: 0 0 24px;
}
.concept-hero-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 32px;
}
.concept-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.concept-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.concept-hero-stat strong {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 32px;
  color: #1a1a1a;
}
.concept-hero-stat span {
  font-family: var(--font-body);
  font-size: 12px;
  color: #6b6b66;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── SECTION GENERIQUE ──────────────────────────────── */
.concept-section {
  padding: 56px 0;
}
.concept-section--alt {
  background: var(--color-bg);
  margin: 0 -24px;
  padding: 56px 24px;
  border-radius: 16px;
}
.concept-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.concept-section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 500;
  margin: 0 0 12px;
  color: #1a1a1a;
}
.concept-section-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b66;
  margin: 0;
}

/* ── KPIs RESEAU (v=190) ────────────────────────────── */
.concept-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.concept-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 18px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.concept-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.concept-kpi strong {
  display: block;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 42px);
  color: #6EA4FF;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.concept-kpi span {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #6b6b66;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.4;
}

/* ── GALERIE AMBIANCE (v=190) ────────────────────────── */
.concept-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.concept-gallery-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
}
.concept-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.concept-gallery-item:hover img {
  transform: scale(1.04);
}
/* Première image : double colonne et double rangée pour casser la grille */
.concept-gallery-item--tall {
  grid-row: span 2;
  grid-column: span 2;
}
@media (max-width: 720px) {
  .concept-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .concept-gallery-item--tall {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 9;
    grid-row: span 1;
  }
}

/* ── 4 PILIERS ──────────────────────────────────────── */
.concept-piliers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.concept-pilier {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.concept-pilier:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.concept-pilier-icon {
  font-size: 40px;
  margin-bottom: 16px;
  line-height: 1;
}
.concept-pilier-title {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 10px;
  color: #1a1a1a;
}
.concept-pilier-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── 3 VALEURS ──────────────────────────────────────── */
.concept-valeurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.concept-valeur {
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.concept-valeur--coral {
  background: linear-gradient(135deg, #fa6457 0%, #ff8a7d 100%);
}
.concept-valeur--teal {
  background: linear-gradient(135deg, #6EA4FF 0%, #8fc1ff 100%);
}
.concept-valeur--amber {
  background: linear-gradient(135deg, #face4e 0%, #ffe28a 100%);
  color: #1a1a1a;
}
.concept-valeur-icon {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}
.concept-valeur-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 12px;
}
.concept-valeur-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.95;
}

/* ── 3 RAISONS (parc indoor) ────────────────────────── */
.concept-raisons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.concept-raison {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
}
.concept-raison-icon {
  font-size: 36px;
  margin-bottom: 12px;
  line-height: 1;
}
.concept-raison-title {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.concept-raison-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── AVANTAGES LICENCE ──────────────────────────────── */
.concept-avantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.concept-avantage {
  display: flex;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  align-items: flex-start;
}
.concept-avantage-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, #6EA4FF 0%, #face4e 100%);
  border-radius: 14px;
}
.concept-avantage-body {
  flex: 1;
}
.concept-avantage-title {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
  color: #1a1a1a;
}
.concept-avantage-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── PROCESS TIMELINE ───────────────────────────────── */
.concept-process-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  position: relative;
  counter-reset: process;
}
.concept-process-step {
  position: relative;
  padding: 24px 16px 16px;
  text-align: center;
  border-top: 2px dashed rgba(110, 164, 255, 0.4);
}
.concept-process-step:first-child {
  border-top-left-radius: 12px;
}
.concept-process-step:last-child {
  border-top-right-radius: 12px;
}
.concept-process-day {
  display: inline-block;
  background: #6EA4FF;
  color: #fff;
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.concept-process-dot {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid #6EA4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 14px;
  color: #6EA4FF;
}
.concept-process-title {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.concept-process-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: #6b6b66;
  margin: 0;
}

/* ── ÉQUIPE ─────────────────────────────────────────── */
.concept-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.concept-team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.2s ease;
}
.concept-team-card:hover {
  transform: translateY(-3px);
}
.concept-team-photo {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6EA4FF 0%, #fa6457 100%);
}
.concept-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.concept-team-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 1px;
}
.concept-team-name {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
  color: #1a1a1a;
}
.concept-team-role {
  font-family: var(--font-body);
  font-size: 12px;
  color: #6EA4FF;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
  font-weight: 600;
}
.concept-team-bio {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── CTAs FINAUX ────────────────────────────────────── */
.concept-cta-block {
  margin: 56px 0 32px;
  padding: 56px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: #fff;
  text-align: center;
}
.concept-cta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 12px;
}
.concept-cta-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 32px;
}
.concept-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.concept-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.concept-cta-btn:hover {
  transform: translateY(-2px);
}
.concept-cta-btn--primary {
  background: #6EA4FF;
  color: #fff;
  box-shadow: 0 8px 24px rgba(110, 164, 255, 0.4);
}
.concept-cta-btn--primary:hover {
  box-shadow: 0 12px 32px rgba(110, 164, 255, 0.55);
}
.concept-cta-btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.concept-cta-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}
.concept-cta-foot {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 720px) {
  .concept-hero {
    padding: 40px 20px;
  }
  .concept-hero-stats {
    gap: 24px;
  }
  .concept-hero-stat strong {
    font-size: 26px;
  }
  .concept-section {
    padding: 40px 0;
  }
  .concept-section--alt {
    padding: 40px 16px;
  }
  .concept-process-step {
    border-top: none;
    border-left: 2px dashed rgba(110, 164, 255, 0.4);
    text-align: left;
    padding: 16px 0 16px 32px;
  }
  .concept-process-dot {
    top: 16px;
    left: -16px;
    transform: none;
  }
  .concept-cta-block {
    padding: 40px 20px;
  }
  .concept-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   CATALOGUE MATÉRIEL — Centrale d'achat (hors Cléopâtre)
   2 modes : "ouverture" (checklist setup) et "reassort" (catalogue libre)
   ========================================================= */

/* Toggle de mode (Reassort / Ouverture) en haut */
.mat-mode-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}
.mat-liens-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--color-primary-light, #eaf2ff);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft, #4a4a55);
}
.mat-liens-note a {
  color: var(--color-primary);
  font-weight: 600;
}
.mat-mode-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mat-mode-btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.mat-mode-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light, #eaf2ff);
  box-shadow: 0 4px 12px rgba(110, 164, 255, 0.18);
}
.mat-mode-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.mat-mode-btn span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mat-mode-btn strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.mat-mode-btn small {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
}

/* Bandeau résumé (Rooms + total + progress) en mode Ouverture */
.mat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  padding: 20px 22px;
  background: var(--color-bg);
  border-radius: 14px;
  margin-bottom: 18px;
  align-items: center;
}
.mat-summary--reassort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mat-summary-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mat-summary-rooms label {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
}
.mat-summary-rooms small {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
}
.mat-rooms-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.mat-rooms-stepper input {
  width: 60px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-logo);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  outline: none;
}
.mat-rooms-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-primary-light, #eaf2ff);
  color: var(--color-primary-dark);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}
.mat-rooms-btn:hover {
  background: var(--color-primary);
  color: #fff;
}
.mat-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mat-summary-stat strong {
  font-family: var(--font-logo);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mat-summary-stat small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 600;
}
.mat-progress-bar {
  margin-top: 6px;
  height: 6px;
  background: var(--color-border, #e9e9ee);
  border-radius: 3px;
  overflow: hidden;
}
.mat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6EA4FF 0%, #8dd968 100%);
  transition: width 0.3s ease;
}
.mat-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.mat-summary-hint {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  flex: 1;
  min-width: 200px;
}

/* Filtres */
.mat-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.mat-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
}
.mat-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(110, 164, 255, 0.15);
}
.mat-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mat-chip {
  padding: 6px 12px;
  border: 1px solid var(--color-border, #e9e9ee);
  background: var(--color-surface);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mat-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.mat-chip.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.mat-chip--fourn.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
}
.mat-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  user-select: none;
}

/* Grille produits */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.mat-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.mat-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(20, 40, 80, 0.04);
}
.mat-card--done {
  background: #f4faef;
  border-color: #c8e3b0;
  opacity: 0.85;
}
.mat-card--done .mat-card-title {
  text-decoration: line-through;
  color: var(--color-text-soft, #6a6a75);
}
.mat-card--optionnel {
  border-style: dashed;
}
.mat-card-check {
  flex-shrink: 0;
  cursor: pointer;
}
.mat-card-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mat-card-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-surface);
  border: 2px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: transparent;
  transition: all 0.15s;
}
.mat-card-check input:checked + .mat-card-check-box {
  background: #2d8a3a;
  border-color: #2d8a3a;
  color: #fff;
}
.mat-card-check:hover .mat-card-check-box {
  border-color: var(--color-primary);
}
.mat-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mat-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.mat-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  line-height: 1.3;
}
.mat-card-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.mat-card-tag--obligatoire {
  background: #fde3e0;
  color: #c13d31;
}
.mat-card-tag--optionnel {
  background: var(--color-surface-alt);
  color: #6a6a75;
}
.mat-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mat-card-cat {
  font-weight: 600;
}
.mat-card-sep {
  opacity: 0.4;
}
.mat-card-comment {
  font-size: 12px;
  margin-top: 2px;
}
.mat-card-comment summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 500;
  list-style: none;
}
.mat-card-comment summary::-webkit-details-marker {
  display: none;
}
.mat-card-comment p {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--color-bg);
  border-radius: 6px;
  color: var(--color-text-soft, #6a6a75);
  white-space: pre-wrap;
  line-height: 1.5;
  font-style: italic;
}
.mat-card-pricing {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dashed var(--color-border, #e9e9ee);
  border-bottom: 1px dashed var(--color-border, #e9e9ee);
  margin: 4px 0;
  flex-wrap: wrap;
}
.mat-card-price, .mat-card-qty, .mat-card-total {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mat-card-price strong, .mat-card-qty strong {
  font-family: var(--font-logo);
  font-size: 15px;
  color: var(--color-text);
}
.mat-card-total strong {
  font-family: var(--font-logo);
  font-size: 17px;
  color: var(--color-primary-dark);
}
.mat-card-pricing small {
  font-size: 10px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mat-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mat-card-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 10px;
  background: var(--color-primary-light, #eaf2ff);
  border-radius: 8px;
  transition: background 0.15s;
}
.mat-card-link:hover {
  background: var(--color-primary);
  color: #fff;
}
.mat-card-link--alt {
  background: var(--color-surface-alt);
  color: var(--color-text-soft, #6a6a75);
}
.mat-card-link--alt:hover {
  background: #1a1a1a;
  color: #fff;
}
.mat-card-link--disabled {
  background: var(--color-surface-alt);
  color: #aaa;
  cursor: not-allowed;
}
.mat-card-link--tuto {
  background: #f3e8ff;
  color: #7c3aed;
}
.mat-card-link--tuto:hover {
  background: #7c3aed;
  color: #fff;
}
.mat-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
}

/* Print : nettoyer la page (header, footer, toolbar, stepper) */
@media print {
  .app-header, .global-footer, .breadcrumb, .back-btn,
  .mat-mode-toggle, .mat-toolbar, .mat-summary-actions,
  .mat-card-check, .mat-card-link {
    display: none !important;
  }
  .mat-card { break-inside: avoid; border: 1px solid #ccc; }
  .mat-summary { background: var(--color-surface) !important; border: 1px solid #ccc; }
  .mat-grid { grid-template-columns: 1fr 1fr; }
  /* Force toutes les sections <details> à imprimer leur contenu, qu'elles
     soient ouvertes ou fermées à l'écran. Sinon les sections collapsées
     sortent vides du PDF. */
  .mat-section .mat-section-grid { display: grid !important; }
  .mat-section .mat-section-chevron { display: none !important; }
}

/* Section retractable avec <details> — utilise pour la "Checklist de
   lancement" qu'on masque aux licencies actifs (peut-etre depliee
   au cas ou ils ouvrent un 2e centre). */
.section--collapsible {
  background: var(--color-bg);
  border: 1px dashed var(--color-border, #e9e9ee);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.section--collapsible summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.section--collapsible summary::-webkit-details-marker {
  display: none;
}
.section--collapsible summary::after {
  content: "▸";
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.section--collapsible[open] summary::after {
  transform: rotate(90deg);
}
.section--collapsible[open] {
  background: var(--color-surface);
  border-style: solid;
}

/* Kicker "1er reseau mondial" — petit chip en haut du titre Reseau */
.page-kicker--leader {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #face4e 0%, #ffb020 100%);
  color: #5a3500;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(255, 176, 32, 0.25);
}
/* Phrase d'appartenance sous le titre — italique, ton chaleureux */
.page-appartenance {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-text);
  font-weight: 400;
}

/* Kicker version dashboard mini-carte — plus discret. V331 : ordre
   inverse (badge SOUS le titre Reseau Color Room), donc margin reset
   a 0 (le gap 10px du parent .dash-map-content gere l'espacement). */
.dash-map-kicker {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  background: linear-gradient(135deg, #face4e 0%, #ffb020 100%);
  color: #5a3500;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
}

/* === CLUSTERS DE RESSOURCES (Dashboard) === */
.resource-cluster {
  margin-bottom: 28px;
}
.resource-cluster:last-child {
  margin-bottom: 0;
}
.resource-cluster-head {
  margin: 18px 0 14px;
  padding: 0 4px;
}
.resource-cluster-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.resource-cluster-sub {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}

/* Tuile Add-on (service Siège payant) — liseré jaune doré + chip */
.resource-card--addon {
  border: 1px solid #f0a500;
  background: linear-gradient(180deg, #fffaf0 0%, var(--color-surface) 50%);
}
.resource-card--addon:hover {
  border-color: #e08a00;
  box-shadow: 0 6px 20px rgba(240, 165, 0, 0.18);
}
.resource-addon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffce4d 0%, #ffb020 100%);
  color: #5a3500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 176, 32, 0.25);
}

/* === PAGE GESTION DES PUBLICITÉS === */
.gp-hero {
  margin: 24px 0 40px;
  padding: 56px 32px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(250, 196, 78, 0.22), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(110, 164, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #fffaf0 0%, #fefcf7 100%);
  text-align: center;
  border: 1px solid var(--color-border);
}
.gp-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.gp-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ffce4d 0%, #ffb020 100%);
  color: #5a3500;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(255, 176, 32, 0.25);
}
.gp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: #1a1a1a;
  font-weight: 500;
  font-style: italic;
}
.gp-hero-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
  line-height: 1.55;
}
.gp-hero-pricing {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  padding: 12px 20px;
  border-radius: 14px;
  margin: 0 0 28px;
  border: 1px solid var(--color-border);
}
.gp-hero-pricing strong {
  font-family: var(--font-logo);
  font-size: 32px;
  font-weight: 700;
  color: #1f4ea8;
}
.gp-hero-pricing span {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.gp-hero-pricing small {
  font-size: 12px;
  color: #6a6a75;
  font-style: italic;
}
.gp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, #fa6457 0%, #ff7a6f 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(250, 100, 87, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.gp-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(250, 100, 87, 0.4);
}

.gp-section {
  padding: 40px 0;
}
.gp-section--alt {
  background: var(--color-bg);
  margin: 0 -24px;
  padding: 40px 24px;
  border-radius: 16px;
}
.gp-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.gp-section-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
}
.gp-section-head p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.55;
}

/* Bénéfices (3 cards) */
.gp-benef-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.gp-benef {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}
.gp-benef-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.gp-benef h3 {
  font-family: var(--font-logo);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}
.gp-benef p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-soft, #6a6a75);
}

/* Périmètre (5 services) */
.gp-perimetre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.gp-perimetre-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
}
.gp-perimetre-card--wip {
  background: #fff8e6;
  border-color: #f0d68a;
}
.gp-perimetre-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.gp-perimetre-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gp-perimetre-body strong {
  font-family: var(--font-logo);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.gp-perimetre-body span {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
}
.gp-perimetre-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fde3a8;
  color: #7a4f00;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gp-perimetre-tag--ready {
  background: #d4edda;
  color: #2d8a3a;
}

/* Pricing */
.gp-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.gp-pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
}
.gp-pricing-card--primary {
  border: 2px solid #1f4ea8;
  background: linear-gradient(180deg, #f6faff 0%, var(--color-surface) 100%);
}
.gp-pricing-card--option {
  background: var(--color-bg);
  border-style: dashed;
}
.gp-pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}
.gp-pricing-amount strong {
  font-family: var(--font-logo);
  font-size: 32px;
  font-weight: 700;
  color: #1f4ea8;
}
.gp-pricing-amount small {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.gp-pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
}
.gp-pricing-card h4 {
  font-family: var(--font-logo);
  font-size: 15px;
  margin: 0 0 6px;
}
.gp-pricing-optional {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 400;
  font-style: italic;
}
.gp-pricing-card--option p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-soft, #6a6a75);
}

/* CTA final */
.gp-cta-block {
  margin: 40px 0 32px;
  padding: 48px 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: #fff;
  text-align: center;
}
.gp-cta-block h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 10px;
}
.gp-cta-block p {
  margin: 0 0 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.gp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, #fa6457 0%, #ff7a6f 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(250, 100, 87, 0.4);
  transition: transform 0.15s;
}
.gp-cta-btn:hover {
  transform: translateY(-2px);
}
.gp-cta-foot {
  margin: 18px 0 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-style: italic;
}

/* === CATALOGUE MATÉRIEL — Toolbar compacte + sections par catégorie === */

/* Toolbar : recherche compacte + filtres fournisseur + reste à acheter sur 1 ligne */
.mat-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  margin-bottom: 18px;
}
.mat-toolbar-search {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
}
.mat-toolbar-search .mat-search {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-bg);
}
.mat-toolbar-search .mat-search:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(110, 164, 255, 0.12);
}
.mat-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.mat-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-surface-alt);
}
.mat-toolbar-toggle:hover {
  background: #ebebeb;
}

/* Section par sous-catégorie : <details> avec en-tête bien visible */
.mat-section {
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  overflow: hidden;
}
.mat-section-head {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fafaf7 0%, var(--color-surface) 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mat-section-head::-webkit-details-marker {
  display: none;
}
.mat-section[open] .mat-section-head {
  border-bottom-color: var(--color-border, #e9e9ee);
  background: linear-gradient(180deg, #f3f5fa 0%, #fafaf7 100%);
}
.mat-section-head:hover {
  background: var(--color-surface-alt);
}
.mat-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  flex: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.mat-section-count {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 500;
  background: var(--color-surface);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e9e9ee);
  white-space: nowrap;
}
.mat-section-chevron {
  font-size: 18px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.mat-section[open] .mat-section-chevron {
  transform: rotate(90deg);
}
.mat-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 16px;
}

@media (max-width: 600px) {
  .mat-toolbar-search {
    max-width: 100%;
  }
  .mat-section-grid {
    grid-template-columns: 1fr;
  }
}

/* === PAGE GESTION DES PUBLICITÉS — v2 sobre === */
.gp2-page .main { padding-top: 8px; }

/* Header compact : titre à gauche, CTA à droite */
.gp2-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 16px 0 20px;
}
.gp2-head-text {
  flex: 1;
  min-width: 280px;
}
.gp2-head-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft, #6a6a75);
}
.gp2-head-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.gp2-head-sub {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}
.gp2-head-pricing {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}
.gp2-head-pricing strong {
  font-family: var(--font-logo);
  font-size: 18px;
  font-weight: 700;
  color: #1f4ea8;
  margin-right: 4px;
}
.gp2-head-pricing-engagement {
  color: var(--color-text-soft, #6a6a75);
  font-size: 13px;
}
.gp2-head-cta {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* Grid 2 colonnes : Inclus | Comment ça marche */
.gp2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.gp2-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.gp2-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--color-text);
}

/* ─── Jauge budget interactive (v=185) ────────────────────────────
   Slider + input + summary live de la commission Siege (10%) et du
   reglement 3 mois. Persiste en localStorage, injecte la valeur dans
   le mailto des CTA. */
.gp2-budget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary, #6ea4ff);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin: 0 0 24px;
}

.gp2-budget-head {
  margin-bottom: 16px;
}

.gp2-budget-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
}

.gp2-budget-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.gp2-budget-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.gp2-budget-slider-wrap {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* Track contenant le slider + le marker "moyenne réseau" superposé. */
.gp2-budget-slider-track {
  position: relative;
  padding-top: 38px; /* espace pour le label du marker au-dessus */
}

/* Marker visuel "moyenne réseau 600 €" positionné en absolu sur la barre.
   Position en % via inline style (20% = 600/3000, depuis v=189). */
.gp2-budget-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.gp2-budget-marker-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 7px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.25;
  margin-bottom: 4px;
  box-shadow: 0 1px 3px rgba(20, 40, 80, 0.06);
}

.gp2-budget-marker-label strong {
  display: block;
  font-size: 12px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* v=189 : barre verticale en pointillés (avant : petite barre solide).
   Plus visible et + lisible comme "ligne de référence" qui traverse le
   track du slider. border-left: dotted donne un rendu de pointillés
   réguliers plus net que dashed à cette épaisseur. */
.gp2-budget-marker-dot {
  width: 0;
  height: 26px;
  border-left: 2px dotted var(--color-text-tertiary, #8a8a95);
  margin-bottom: -13px; /* descend pour traverser le track du slider */
}

#gp-budget-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-primary, #6ea4ff) 0%,
    var(--color-primary, #6ea4ff) var(--gp-slider-pct, 6%),
    #e3e8f0 var(--gp-slider-pct, 6%),
    #e3e8f0 100%
  );
  outline: none;
  cursor: pointer;
}

#gp-budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-primary, #6ea4ff);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(110, 164, 255, 0.35);
  transition: transform 0.15s ease;
}

#gp-budget-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}

#gp-budget-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-primary, #6ea4ff);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(110, 164, 255, 0.35);
}

.gp2-budget-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-tertiary, #8a8a95);
  font-variant-numeric: tabular-nums;
}

.gp2-budget-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  min-width: 180px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gp2-budget-input-wrap:focus-within {
  border-color: var(--color-primary, #6ea4ff);
  box-shadow: 0 0 0 3px rgba(110, 164, 255, 0.18);
}

#gp-budget-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  outline: none;
  width: 90px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  text-align: right;
  -moz-appearance: textfield;
}

#gp-budget-input::-webkit-outer-spin-button,
#gp-budget-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gp2-budget-unit {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 500;
}

/* Summary live de la facturation calculee a partir du budget. */
.gp2-budget-summary {
  background: linear-gradient(135deg, #eef5ff 0%, #f4f8ff 100%);
  border: 1px solid #d8e3fa;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--color-text);
}

.gp2-budget-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.gp2-budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 700px) {
  .gp2-budget-summary-grid {
    grid-template-columns: 1fr;
  }
}

.gp2-budget-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
}

.gp2-budget-summary-cell small {
  font-size: 11px;
  color: var(--color-text-tertiary, #8a8a95);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.gp2-budget-summary-cell strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.gp2-budget-summary-detail {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: var(--color-muted, #6a6a75);
  letter-spacing: 0.2px;
}
.gp2-budget-summary-cell--accent .gp2-budget-summary-detail {
  color: rgba(255, 255, 255, 0.85);
}

.gp2-budget-summary-cell--accent {
  background: var(--color-primary, #6ea4ff);
  color: #fff;
}

.gp2-budget-summary-cell--accent small {
  color: rgba(255, 255, 255, 0.85);
}

.gp2-budget-summary-cell--accent strong {
  color: #fff;
}

/* Liste "Ce qui est inclus" */
.gp2-incl {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gp2-incl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f3f3;
}
.gp2-incl-item:last-child {
  border-bottom: none;
}
.gp2-incl-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.gp2-incl-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gp2-incl-label strong {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}
.gp2-incl-label small {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
}
.gp2-incl-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff8e6;
  color: #7a4f00;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Bloc option (tracking dédié) */
.gp2-option {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border, #e9e9ee);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp2-option strong {
  font-family: var(--font-logo);
  font-size: 14px;
  color: #1f4ea8;
}
.gp2-option > span {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}
.gp2-option em {
  font-style: italic;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 400;
}
.gp2-option small {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}
.gp2-option-benefices {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp2-option-benefices li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text, #1a1a1a);
  padding: 8px 10px;
  background: #f3fbf6;
  border-left: 3px solid #84d3a3;
  border-radius: 6px;
}
.gp2-option-timing {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: #fff8e6;
  border-left: 3px solid #f0b400;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #5a4216;
}

/* Comment ça marche : 3 étapes numérotées */
.gp2-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gp2-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gp2-steps-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light, #eaf2ff);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 14px;
}
.gp2-steps > li > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gp2-steps strong {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 600;
}
.gp2-steps span {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}

/* CTA expert + bouton Calendly — collé juste sous les 3 étapes (v=205).
   Anciennement margin-top:auto pour pinning bas de colonne, mais le résultat
   créait un grand blanc entre l'étape 3 et la card. On préfère un flow
   naturel : CTA visible immédiatement sous "Reporting mensuel". Le
   déséquilibre éventuel des colonnes est moins gênant qu'un trou. */
.gp2-card-cta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e9e9ee);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gp2-card-cta .gp2-expert-fallback-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gp2-card-cta .gp2-expert-fallback-text strong {
  font-size: 14px;
  color: var(--color-text);
}
.gp2-card-cta .gp2-expert-fallback-text span {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.gp2-foot-cta {
  padding: 10px 18px;
  font-size: 14px;
  text-align: center;
  white-space: normal;
}

/* Carte expert (Paul Barbe) — affichée à côté du CTA Calendly */
.gp2-expert {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}
.gp2-expert-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cr-blue, #6ea4ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  font-size: 18px;
}
.gp2-expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gp2-expert-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}
.gp2-expert-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gp2-expert-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
}
.gp2-expert-info span {
  font-size: 12.5px;
  color: var(--color-muted, #6a6a75);
}
.gp2-expert-info small {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-soft, #6a6a75);
}

@media (max-width: 540px) {
  .gp2-expert { flex-direction: row; align-items: flex-start; }
  .gp2-foot-cta { width: 100%; text-align: center; }
}

/* Disclaimer HT — bas de page Gestion des publicités */
.gp2-disclaimer {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-muted, #6a6a75);
}
.gp2-disclaimer strong { color: var(--color-text, #1a1a1a); }

/* Items "Sur devis" : prix non fixé (impression à la demande, lots variables) */
.mat-card-devis {
  color: #b47500 !important;
  font-style: italic;
  font-weight: 600 !important;
}
.mat-card-total--devis strong {
  color: var(--color-text-soft, #6a6a75) !important;
  font-weight: 400 !important;
}

/* =========================================================
   ÉQUIPE & RH — module licencié (v164)
   Réutilise les tokens existants. Polish design plus tard.
   ========================================================= */
.rh-container { padding-bottom: 60px; }

.rh-disclaimer {
  background: var(--color-warm-light);
  border-left: 4px solid var(--color-warm);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 0 22px;
  color: var(--color-warm-dark);
}
.rh-disclaimer strong { color: var(--color-warm-dark); }

.rh-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.rh-anchors a {
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.rh-anchors a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.rh-section {
  margin: 36px 0;
  scroll-margin-top: 100px;
}
.rh-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}
.rh-section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-display);
}
.rh-section-tag {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.rh-section-tag--alert {
  background: #fde3e0;
  color: #c13d31;
}
.rh-section-sub {
  margin: 6px 0 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ─── Cards "Plateformes de recrutement" (fiche /rh/fiche/recruter-urgence)
   V=278 layout horizontal premium : 1 colonne pleine largeur, logo a
   gauche en grand format, contenu structure a droite. Mobile : stack
   vertical. Plus de grid 3 cols qui rendait les textes serres. */
.rh-plat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rh-plat-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: stretch;
  padding: 28px 30px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.rh-plat-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px -16px rgba(20, 20, 26, 0.18);
  transform: translateY(-1px);
}

.rh-plat-aside {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.rh-plat-logo {
  width: 116px;
  height: 116px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.04);
}
.rh-plat-logo--placeholder {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}
.rh-plat-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
}

.rh-plat-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rh-plat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rh-plat-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.rh-plat-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.rh-plat-badge--urgent {
  background: rgba(232, 101, 77, 0.14);
  color: #b94426;
}
.rh-plat-badge--annonce {
  background: var(--color-primary-light);
  color: var(--color-primary-dark, #1f5bce);
}

.rh-plat-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 62ch;
}

.rh-plat-meta {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
@media (max-width: 760px) {
  .rh-plat-meta { grid-template-columns: 1fr; }
}
.rh-plat-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rh-plat-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.rh-plat-meta-value {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}

.rh-plat-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.rh-plat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--color-text);
  color: var(--color-bg, #ffffff);
  border: 1px solid transparent;
  transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.rh-plat-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(20, 20, 26, 0.4);
}
.rh-plat-cta:active { transform: translateY(0); }
.rh-plat-cta--urgent {
  background: #c13d31;
  color: #ffffff;
}
.rh-plat-cta--urgent:hover { background: #a82e23; color: #ffffff; }
.rh-plat-cta--annonce {
  background: var(--color-primary, #2164f3);
  color: #ffffff;
}
.rh-plat-cta--annonce:hover { background: var(--color-primary-dark, #1f5bce); color: #ffffff; }
.rh-plat-cta-text { color: inherit; }
.rh-plat-cta-icon { transition: transform 0.18s ease; }
.rh-plat-cta:hover .rh-plat-cta-icon { transform: translate(2px, -2px); }

@media (max-width: 760px) {
  .rh-plat-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }
  .rh-plat-aside { justify-content: flex-start; }
  .rh-plat-logo { width: 88px; height: 88px; border-radius: 18px; }
  .rh-plat-logo img { padding: 12px; }
  .rh-plat-name { font-size: 22px; }
  .rh-plat-foot { justify-content: stretch; }
  .rh-plat-cta { width: 100%; justify-content: center; }
}

/* Tile "Recruter en urgence" dans les Quick Actions du module RH */
.rh-qa-tile--urgent {
  border-color: #f5c5c0;
  background: linear-gradient(180deg, var(--color-surface) 0%, #fff5f3 100%);
}
.rh-qa-tile--urgent .rh-qa-icon {
  background: #fde3e0;
}
.rh-section-intro {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 12px 0 18px;
  max-width: 780px;
}
.rh-subtitle {
  margin: 26px 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}

.rh-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.rh-card--hero {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.rh-card--soft {
  background: var(--color-surface-alt);
}
.rh-card--embed { padding: 14px; }
.rh-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.rh-card-meta {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.rh-grid {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}
.rh-grid--contracts,
.rh-grid--fiches { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.rh-grid--presets { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rh-grid--saas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.rh-table-wrap { overflow-x: auto; margin: 8px 0; }
.rh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.rh-table th,
.rh-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.rh-table th {
  background: var(--color-surface-alt);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.rh-list { margin: 8px 0 4px 1.4em; padding: 0; }
.rh-list li { margin: 4px 0; line-height: 1.55; font-size: 14px; }

.rh-contract-tag {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.rh-contract-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.rh-contract-meta div { display: flex; flex-direction: column; gap: 2px; }
.rh-contract-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.rh-contract-meta dd { margin: 0; font-size: 13.5px; line-height: 1.5; }

.rh-contract-warn {
  background: var(--color-danger-light);
  border-left: 3px solid var(--color-danger);
  padding: 10px 14px;
  border-radius: var(--radius-sm, 6px);
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger-dark);
}
.rh-contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}
.rh-contract-body {
  margin-top: 14px;
  border-top: 1px dashed var(--color-border);
  padding-top: 12px;
}
.rh-contract-body summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-primary-dark);
  padding: 6px 0;
}
.rh-contract-content {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm, 6px);
}
.rh-contract-content h3,
.rh-contract-content h4 { margin-top: 18px; }
.rh-contract-content code {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12.5px;
}
.rh-contract-block { margin-bottom: 8px; }
.rh-contract-h3 { font-size: 16px; font-weight: 600; margin: 10px 0 4px; }
.rh-contract-h4 { font-size: 14.5px; font-weight: 600; margin: 14px 0 4px; }
.rh-contract-annex { margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--color-border); }

.rh-fiche-block { margin: 14px 0 4px; }
.rh-fiche-block h4 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rh-urssaf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 22px;
}
.rh-preset-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
}
.rh-preset-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06));
}
.rh-preset-icon { font-size: 26px; line-height: 1; }
.rh-preset-label { margin: 0; font-size: 14.5px; font-weight: 600; }
.rh-preset-cas { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.rh-preset-params {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 6px 10px;
  border-radius: 6px;
  font-style: italic;
}
.rh-iframe-wrap {
  position: relative;
  width: 100%;
  min-height: 700px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.rh-iframe-wrap iframe {
  width: 100%;
  height: 700px;
  border: 0;
  display: block;
}

/* ─── Onglets URSSAF (v=187) - 3 simulateurs intégrés en iframe ─── */
.rh-urssaf-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}

.rh-urssaf-tab {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.08s ease;
}

.rh-urssaf-tab:hover {
  background: var(--color-surface-alt);
  border-color: rgba(110, 164, 255, 0.4);
}

.rh-urssaf-tab:active {
  transform: scale(0.98);
}

.rh-urssaf-tab.is-active {
  background: var(--color-primary, #6ea4ff);
  border-color: var(--color-primary, #6ea4ff);
  color: #fff;
  box-shadow: 0 2px 8px rgba(110, 164, 255, 0.25);
}

.rh-urssaf-tab-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.rh-urssaf-tab-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rh-urssaf-tab-text strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.rh-urssaf-tab-text small {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
  margin-top: 2px;
}

.rh-urssaf-panel {
  display: none;
}

.rh-urssaf-panel.is-active {
  display: block;
}

.rh-urssaf-external {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: right;
}

.rh-urssaf-external a {
  color: var(--color-primary);
  text-decoration: none;
}

.rh-urssaf-external a:hover {
  text-decoration: underline;
}

.rh-saas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rh-saas-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.rh-saas-link { font-size: 12.5px; }
.rh-saas-positionnement { margin: 0; font-size: 13.5px; line-height: 1.5; }
.rh-saas-meta { display: grid; gap: 6px; margin: 6px 0 0; }
.rh-saas-meta div { display: flex; flex-direction: column; gap: 2px; }
.rh-saas-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.rh-saas-meta dd { margin: 0; font-size: 13px; line-height: 1.45; }

.rh-pending {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-surface-alt);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px dashed var(--color-border);
}

/* === Profils à recruter (top of module RH) === */
.rh-recrut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 14px 0 18px;
}
.rh-recrut-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rh-recrut-col--ok { border-left: 4px solid var(--cr-green, #7bc656); }
.rh-recrut-col--ko { border-left: 4px solid var(--color-warm); }
.rh-recrut-col-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.rh-profil {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
}
.rh-profil--ok { background: #f3fbf0; }
.rh-profil--ko { background: #fef6d9; }
.rh-profil-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.rh-profil-why {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}
.rh-profil-signal {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}

@media (max-width: 640px) {
  .rh-section-title { font-size: 18px; }
  .rh-card { padding: 16px; }
  .rh-grid--contracts,
  .rh-grid--fiches,
  .rh-grid--presets,
  .rh-grid--saas { grid-template-columns: 1fr; }
  .rh-anchors { font-size: 12px; gap: 6px; padding: 10px; }
  .rh-anchors a { padding: 5px 10px; }
  .rh-iframe-wrap iframe { height: 600px; }
  .rh-recrut-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================
   ÉQUIPE & RH — refonte v195 (layout aligne sur Marketing)
   - .welcome standard du dashboard (carre arrondi sobre)
   - .rh-subnav cards (pattern .mk-subnav) pour naviguer entre parcours
   - .section + .section-header standard pour chaque parcours

   v193 hero immersif + parcours numerotes : abandonne (overengineered
   vs reste du dashboard). Legacy v175 (rh-quick-actions etc) : styles
   plus instancies, peuvent etre nettoyes plus tard.
   ========================================================= */

/* Disclaimer juridique discret integre dans le .welcome */
.rh-welcome-disclaimer {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 12px;
  background: var(--color-warm-light);
  border-left: 3px solid var(--color-warm);
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  color: var(--color-warm-dark);
  line-height: 1.45;
}

/* Nav 3 cartes parcours (calque sur .mk-subnav de la page Marketing) */
.rh-subnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rh-subnav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rh-subnav-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(110, 164, 255, 0.12);
}
.rh-subnav-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.rh-subnav-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rh-subnav-body strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
}
.rh-subnav-body span {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.rh-subnav-arrow {
  font-size: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.rh-subnav-card:hover .rh-subnav-arrow {
  transform: translateX(2px);
  color: var(--color-primary);
}

/* Wrapper d'un parcours : scroll-margin pour la nav + override du
   .section-title pour que le titre de parcours soit plus dominant que
   les .rh-section-title (22px Fraunces) des sous-sections. Sinon
   hierarchie inversee : parent moins gros que enfant. */
.rh-parcours-section {
  scroll-margin-top: 90px;
}
/* v=205 : on masque les headers de parcours dans le flux. Les cards
   .rh-subnav du haut servent deja de repere visuel + de navigation, le
   doublon en gros Fraunces italic dans le corps etait redondant et peu
   esthetique. On garde la balise pour l'accessibilite (sr-only) et le
   wrapper .rh-parcours-section pour l'ancre scroll. */
.rh-parcours-section > .section-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .rh-subnav { grid-template-columns: 1fr; gap: 8px; }
}

.rh-page-head { margin: 4px 0 18px; }
.rh-page-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
}
.rh-page-sub {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.rh-disclaimer-compact {
  background: var(--color-warm-light);
  border-left: 3px solid var(--color-warm);
  padding: 8px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  color: var(--color-warm-dark);
  line-height: 1.45;
}

/* ── 4 Quick Actions tiles ── */
.rh-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 26px;
}
.rh-qa-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s;
}
.rh-qa-tile:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(110, 164, 255, 0.12);
}
.rh-qa-icon { font-size: 22px; line-height: 1; }
.rh-qa-label { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.rh-qa-sub { margin: 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.rh-qa-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rh-qa-cta,
.rh-qa-cta-alt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  background: none;
}
.rh-qa-cta {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.rh-qa-cta:hover { background: var(--color-primary-hover); }
.rh-qa-cta--pending {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
  font-style: italic;
  border-style: dashed;
}
.rh-qa-cta-alt {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
.rh-qa-cta-alt:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ── Anchor nav sticky ── */
.rh-anchors--sticky {
  position: sticky;
  top: 70px;
  z-index: 40;
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin: 0 0 22px;
}

/* ── Sections compactes ── */
.rh-section { margin: 28px 0; scroll-margin-top: 130px; }
.rh-section-intro-compact {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 8px 0 14px;
  max-width: 780px;
}

/* ── Profils à recruter : scan en 1 ligne + détail repliable ── */
.rh-scan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 12px;
}
.rh-scan-line { margin: 0; font-size: 14px; line-height: 1.5; }
.rh-scan-line strong { margin-right: 6px; }
.rh-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 2px;
  white-space: nowrap;
}
.rh-chip--ok {
  background: #e7f7e1;
  color: #2c6b1d;
  border: 1px solid #b5e0a3;
}
.rh-chip--ko {
  background: var(--color-warm-light);
  color: var(--color-warm-dark);
  border: 1px solid #f0d68a;
}

.rh-profil-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.rh-profil-row {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  border-left: 3px solid var(--color-border);
}
.rh-profil-row--ok { border-left-color: #7bc656; background: #f3fbf0; }
.rh-profil-row--ko { border-left-color: var(--color-warm); background: var(--color-warm-light); }
.rh-profil-row-title { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.rh-profil-row-why { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--color-text); }
.rh-profil-row-signal {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
  line-height: 1.4;
}

/* ── Convention : hero compact + accordéons ── */
.rh-conv-hero {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 14px;
}
.rh-conv-hero-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.rh-conv-hero-meta { margin: 0; font-size: 13px; color: var(--color-primary-dark); }
.rh-conv-hero-meta a { color: inherit; font-weight: 600; }

/* ── Accordéons réutilisables (<details> natifs) ── */
.rh-collapse {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 8px 0;
  overflow: hidden;
}
.rh-collapse[open] { padding-bottom: 12px; }
.rh-collapse > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  position: relative;
}
.rh-collapse > summary::-webkit-details-marker { display: none; }
.rh-collapse > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--color-text-muted);
  transition: transform 0.15s;
  display: inline-block;
}
.rh-collapse[open] > summary::before { transform: rotate(90deg); }
.rh-collapse > summary:hover { background: var(--color-surface-alt); }
.rh-collapse > *:not(summary) { padding: 0 16px; }
.rh-collapse > .rh-table-wrap { padding: 0 16px; }
.rh-collapse--soft { background: var(--color-surface-alt); }
.rh-collapse--inline { margin-top: 12px; }
.rh-collapse-intro {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 6px 0 10px;
  line-height: 1.5;
}

/* ── Contrats compacts ── */
.rh-grid--contracts-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.rh-contract-compact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rh-contract-head { margin-bottom: 4px; }
.rh-contract-title { margin: 4px 0 2px; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.rh-contract-sub { margin: 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.rh-contract-cas { margin: 0; font-size: 13px; line-height: 1.5; }
.rh-contract-cas strong { color: var(--color-text); }
.rh-contract-meta-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rh-contract-meta-chip {
  display: inline-block;
  background: var(--color-surface-alt);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.rh-contract-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}
.rh-contract-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.rh-contract-action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.rh-contract-action--pending {
  font-style: italic;
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-style: dashed;
}
/* V228 : layout deux CTA cote a cote (Dupliquer + Voir lecture seule). */
.rh-planning-tpl-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rh-contract-action-secondary {
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.12s;
}
.rh-contract-action-secondary:hover {
  color: var(--color-primary-dark);
}

/* ── Fiches de poste : cards depliees par defaut (v=262) ── */
.rh-fiche-list { display: flex; flex-direction: column; gap: 18px; }
.rh-fiche-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.rh-fiche-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border);
}
.rh-fiche-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.rh-fiche-card-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.rh-fiche-meta-line { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ── URSSAF : iframe + accordéon ── */
.rh-section-intro-compact a { color: var(--color-primary-dark); font-weight: 500; }

/* ── Planning compact ── */
.rh-planning-tpl {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 12px 0;
}
.rh-planning-tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rh-subtitle-compact {
  margin: 24px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.rh-saas-list { display: flex; flex-direction: column; gap: 6px; }
.rh-saas-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); }
.rh-saas-row > summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.rh-saas-row > summary::-webkit-details-marker { display: none; }
.rh-saas-row > summary strong { font-weight: 600; }
.rh-saas-sub { color: var(--color-text-muted); font-size: 12.5px; flex: 1; }
.rh-saas-row .rh-saas-link { font-size: 12px; color: var(--color-primary-dark); text-decoration: none; }
.rh-saas-row .rh-saas-link:hover { text-decoration: underline; }
.rh-saas-row[open] .rh-saas-meta { padding: 0 14px 14px; margin-top: 4px; }

/* ── Footer ressources ── */
.rh-footer-ressources {
  margin: 32px 0 16px;
  padding: 18px 0 0;
  border-top: 1px solid var(--color-border);
}
.rh-footer-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.rh-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.rh-footer-link {
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  transition: all 0.12s;
}
.rh-footer-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.rh-meta-secondary {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 8px 0 0;
}

@media (max-width: 960px) {
  .rh-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rh-quick-actions { grid-template-columns: 1fr; }
  .rh-grid--contracts-compact { grid-template-columns: 1fr; }
  .rh-page-title { font-size: 22px; }
  .rh-anchors--sticky { top: 60px; }
  .rh-planning-tpl-head { flex-direction: column; align-items: flex-start; }
}

/* === Image produit catalogue matériel === */
.mat-card {
  /* Reorganise pour accommoder l'image */
  flex-wrap: nowrap;
}
.mat-card-image {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border, #e9e9ee);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.mat-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.mat-card-image-fallback {
  display: none;
  font-size: 26px;
}
.mat-card-image--fallback {
  background: linear-gradient(135deg, #f0f0f2 0%, #fafaf7 100%);
  font-size: 26px;
}

@media (max-width: 600px) {
  .mat-card-image {
    width: 56px;
    height: 56px;
  }
}

/* === Logos officiels partenaires === */
.part-logo--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.part-logo--img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.part-logo-fallback {
  display: none;
  font-size: 28px;
  line-height: 1;
}

/* Card partenaire flagué urgent (Staff Me notamment) → en avant */
.part-card--urgent {
  border: 2px solid #fa6457;
  box-shadow: 0 4px 14px rgba(250, 100, 87, 0.18);
}
.part-card--urgent::before {
  content: "🆘 Besoin urgent";
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 16px;
  background: linear-gradient(135deg, #fa6457 0%, #ff7a6f 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(250, 100, 87, 0.3);
}
.part-card { position: relative; }

/* === Contacts référents Siège sur les cards Plateformes === */
.plat-contacts {
  margin: 12px 0;
  padding: 12px 14px;
  background: #f6faff;
  border: 1px solid #d4e5ff;
  border-radius: 10px;
}
.plat-contacts-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.plat-contacts-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
  line-height: 1.4;
}
.plat-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 6px;
  transition: border-color 0.15s, transform 0.15s;
  font-size: 12px;
}
.plat-contact:last-child { margin-bottom: 0; }
.plat-contact:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.plat-contact--principal {
  border-color: #face4e;
  background: linear-gradient(180deg, #fffaf0 0%, var(--color-surface) 100%);
}
.plat-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.plat-contact-info strong {
  font-size: 13px;
  font-weight: 600;
}
.plat-contact-info span {
  font-size: 11px;
  color: var(--color-text-soft, #6a6a75);
}
.plat-contact-email {
  font-size: 11px;
  color: var(--color-primary);
  font-family: var(--font-mono);
}

/* === KITS MARKETING — preview inline avec <details> + iframe Drive === */
/* Override des styles existants pour les nouvelles cards <details> */
details.mk-kit-card {
  display: block;
  padding: 0;
  cursor: default;
}
details.mk-kit-card .mk-kit-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.mk-kit-card .mk-kit-summary::-webkit-details-marker {
  display: none;
}
details.mk-kit-card .mk-kit-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
}
details.mk-kit-card .mk-kit-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
details.mk-kit-card .mk-kit-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
}
details.mk-kit-card .mk-kit-desc {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
  line-height: 1.45;
}
.mk-kit-toggle {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.2s;
}
details.mk-kit-card[open] .mk-kit-toggle {
  transform: rotate(180deg);
}
details.mk-kit-card[open] {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(110, 164, 255, 0.12);
}
.mk-kit-body {
  border-top: 1px solid var(--color-border, #e9e9ee);
  padding: 14px 14px 16px;
  background: var(--color-bg);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.mk-kit-iframe {
  width: 100%;
  height: 480px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
  background: var(--color-surface);
  display: block;
}
.mk-kit-fullscreen {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.mk-kit-fullscreen:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light, #eaf2ff);
}
.mk-kit-empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
}

/* === Logos sur 1 ligne (3 colonnes côte à côte) v166 === */
.mk-logos-grid--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .mk-logos-grid--row {
    /* Force exactement 3 colonnes sur desktop pour les 3 versions */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CTA Drive complet mis en avant (au lieu des liens individuels) */
.mk-logos-drive--prominent {
  margin-top: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #fffaf0 0%, #fefcf7 100%);
  border: 1px dashed #f0a500;
  border-radius: 12px;
  text-align: center;
}
.mk-logos-drive-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(110, 164, 255, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mk-logos-drive-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(110, 164, 255, 0.35);
}
.mk-logos-drive-cta small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  font-style: italic;
}

/* === TIMELINE HORIZONTALE — Kit emails commercial (v168) === */
.email-timeline {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 16px 0 20px;
  overflow-x: auto;
  padding-bottom: 6px;
  /* Scrollbar discrète sur mobile */
  scrollbar-width: thin;
}
.email-timeline::-webkit-scrollbar { height: 6px; }
.email-timeline::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.email-step-node {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px 10px;
  background: var(--color-surface);
  border: 2px solid var(--color-border, #e9e9ee);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: center;
  position: relative;
}
.email-step-node:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.email-step-node.is-active {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
  box-shadow: 0 6px 18px rgba(110, 164, 255, 0.18);
}
.email-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-primary-light, #eaf2ff);
  color: var(--color-primary-dark);
  border-radius: 50%;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.email-step-node.is-active .email-step-num {
  background: var(--color-primary);
  color: #fff;
}
.email-step-icon {
  font-size: 22px;
  line-height: 1;
}
.email-step-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}
.email-step-count {
  font-size: 10px;
  color: var(--color-text-soft, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.email-step-arrow {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: var(--color-text-soft, #aaa);
  flex-shrink: 0;
}

/* Panneau de templates de l'étape active */
.email-step-panel {
  display: none;
  animation: emailPanelFade 0.2s ease;
}
.email-step-panel.is-active {
  display: block;
}
@keyframes emailPanelFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.email-step-desc {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0 0 14px;
  line-height: 1.5;
  font-style: italic;
}
.email-step-templates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Responsive : sur mobile, scroll horizontal */
@media (max-width: 640px) {
  .email-timeline {
    gap: 4px;
  }
  .email-step-node {
    min-width: 130px;
    padding: 10px 8px 8px;
  }
  .email-step-arrow {
    font-size: 16px;
  }
}

/* =========================================================
   WAHOU POLISH — v=171
   Couche d'enrichissement progressif : micro-interactions,
   transitions plus douces, anims de page, focus ring branded.
   N'écrase rien, complète seulement les styles existants.
   Désactivé pour les utilisateurs avec prefers-reduced-motion.
   ========================================================= */

/* ── Animation d'entrée de page ── */
@keyframes wahou-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-main > .container,
.main > .container {
  animation: wahou-page-fade-in 0.42s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}

/* ── Stagger d'apparition pour les grilles principales ──
   Anime chaque card avec un léger décalage pour donner du flow.
   On limite aux 12 premiers enfants (les suivants apparaissent
   instantanément sans pénalité visuelle). */
@keyframes wahou-card-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resources-grid > .resource-card,
.com-canaux-grid > .com-canal-card,
.com-kpis-grid > .com-kpi-card,
.mk-playbooks-grid > .mk-playbook-card,
.partenaires-grid > .partenaire-card {
  animation: wahou-card-rise 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  animation-delay: 0.05s;
}

.resources-grid > .resource-card:nth-child(2),
.com-canaux-grid > .com-canal-card:nth-child(2),
.com-kpis-grid > .com-kpi-card:nth-child(2),
.mk-playbooks-grid > .mk-playbook-card:nth-child(2),
.partenaires-grid > .partenaire-card:nth-child(2) {
  animation-delay: 0.10s;
}
.resources-grid > .resource-card:nth-child(3),
.com-canaux-grid > .com-canal-card:nth-child(3),
.com-kpis-grid > .com-kpi-card:nth-child(3),
.mk-playbooks-grid > .mk-playbook-card:nth-child(3),
.partenaires-grid > .partenaire-card:nth-child(3) {
  animation-delay: 0.15s;
}
.resources-grid > .resource-card:nth-child(4),
.com-canaux-grid > .com-canal-card:nth-child(4),
.com-kpis-grid > .com-kpi-card:nth-child(4),
.mk-playbooks-grid > .mk-playbook-card:nth-child(4),
.partenaires-grid > .partenaire-card:nth-child(4) {
  animation-delay: 0.20s;
}
.resources-grid > .resource-card:nth-child(5),
.com-canaux-grid > .com-canal-card:nth-child(5),
.com-kpis-grid > .com-kpi-card:nth-child(5),
.mk-playbooks-grid > .mk-playbook-card:nth-child(5),
.partenaires-grid > .partenaire-card:nth-child(5) {
  animation-delay: 0.25s;
}
.resources-grid > .resource-card:nth-child(n + 6),
.com-canaux-grid > .com-canal-card:nth-child(n + 6),
.com-kpis-grid > .com-kpi-card:nth-child(n + 6),
.mk-playbooks-grid > .mk-playbook-card:nth-child(n + 6),
.partenaires-grid > .partenaire-card:nth-child(n + 6) {
  animation-delay: 0.30s;
}

/* ── Hover plus tactile sur les cards principales ──
   On override la durée et la courbe pour un feel plus "lift".
   Les translations Y existantes restent (juste plus douces). */
.resource-card,
.com-canal-card,
.mk-playbook-card,
.partenaire-card,
.com-kpi-card {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.65, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.2, 0.65, 0.3, 1),
    border-color 0.22s ease;
}

.com-canal-card:hover,
.mk-playbook-card:hover,
.partenaire-card:hover,
.com-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(20, 40, 80, 0.07);
}

.resource-card:hover {
  transform: translateY(-3px);
}

/* ── Press feedback : léger scale-down sur clic des CTAs ── */
.btn-primary:active,
.btn-secondary:active,
.com-canal-cta:active,
.com-drive-link:active {
  transform: scale(0.98);
  transition: transform 0.08s ease-out;
}

/* ── Focus ring branded ──
   Plus visible et accessible sans casser le design existant. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary, #6ea4ff);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Shimmer sur les nombres data-countup ──
   Les chiffres mettent en avant les KPI : on ajoute une transition
   subtile entre les valeurs pour que le countup soit plus liquide. */
[data-countup] {
  transition: color 0.3s ease;
  font-variant-numeric: tabular-nums;
}

/* ── Sections : fade-in léger de leur contenu ──
   Les sections individuelles fade-in si chargées dynamiquement
   (re-render après navigation). */
.section {
  animation: wahou-page-fade-in 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  animation-delay: 0.06s;
}

/* ── Welcome hero : letterspacing optical refinement ──
   Améliore subtilement la typo Fraunces sur les titres de page. */
.welcome-title,
.page-title {
  font-feature-settings: "ss01", "ss02";
}

/* ── Smooth pour les details/summary toggles (accordéons) ── */
details > summary {
  transition: background-color 0.2s ease;
}

/* ── Banner Speed Commercial : subtle pulse on the icon to draw attention ── */
@keyframes wahou-pulse-soft {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.com-speed-icon {
  animation: wahou-pulse-soft 2.4s ease-in-out infinite;
  transform-origin: center;
}

/* ── Skip animations si l'utilisateur préfère le mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  .dashboard-main > .container,
  .main > .container,
  .resources-grid > .resource-card,
  .com-canaux-grid > .com-canal-card,
  .com-kpis-grid > .com-kpi-card,
  .mk-playbooks-grid > .mk-playbook-card,
  .partenaires-grid > .partenaire-card,
  .section,
  .com-speed-icon {
    animation: none !important;
  }
  .resource-card,
  .com-canal-card,
  .mk-playbook-card,
  .partenaire-card,
  .com-kpi-card {
    transition: none !important;
  }
}

/* =========================================================
   KIT VITRINE — modules low-cost terrain (v=180)
   Cards riches : photo exemple + benefits + CTA Amazon + tips setup
   ========================================================= */

.kit-vitrine-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
}

.kit-vitrine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 880px) {
  .kit-vitrine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kit-vitrine-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.65, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.kit-vitrine-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 40, 80, 0.08);
}

/* Photo : ratio 4:3, object-fit cover, légère teinte au survol */
.kit-vitrine-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.kit-vitrine-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.kit-vitrine-card:hover .kit-vitrine-photo img {
  transform: scale(1.03);
}

.kit-vitrine-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kit-vitrine-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kit-vitrine-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.kit-vitrine-title {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  min-width: 0;
}

.kit-vitrine-cout {
  flex-shrink: 0;
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.kit-vitrine-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kit-vitrine-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary, #8a8a95);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kit-vitrine-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text);
}

.kit-vitrine-list li {
  margin: 0;
}

/* CTA Amazon : action directe → bouton plein avec accent */
.kit-vitrine-section--cta {
  background: #fff8e6;
  border: 1px solid #f3c969;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 2px;
}

.kit-vitrine-section--cta .kit-vitrine-section-title {
  color: #6b4a0f;
}

.kit-vitrine-amazon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #ff9900;
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    transform 0.08s ease;
  width: fit-content;
}

.kit-vitrine-amazon:hover {
  background: #e68a00;
}

.kit-vitrine-amazon:active {
  transform: scale(0.98);
}

.kit-vitrine-amazon-arrow {
  font-size: 16px;
  transition: transform 0.18s ease;
}

.kit-vitrine-amazon:hover .kit-vitrine-amazon-arrow {
  transform: translateX(3px);
}

.kit-vitrine-amazon-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5a4216;
}

/* Watermark utilisateur retiré (auth par mail rend la trace moins utile).
   La règle est conservée vide au cas où un node legacy traîne en DOM. */
.user-watermark { display: none !important; }

/* ─── PLATEFORMES — enrichissements v=193 ──────────────────────
   - Sections (autonome / CSE)
   - Bandeau interlocuteur unique (Mathéo)
   - Badges (parrainage, restriction, calendly, formulaire, exemples)
   - CTA row (S'inscrire + Guide complet)
   - Cartes CSE (status, mailto activation)
   - Page détail plateforme (univers, créneaux, scénarios, KPIs, rituels)
*/

.plat-section {
  margin-top: 28px;
}
.plat-section + .plat-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border, #e9e9ee);
}
.plat-section-head {
  margin-bottom: 18px;
}
.plat-section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text, #1a1a1a);
}
.plat-section-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted, #6a6a75);
  margin: 0;
}
/* V277 : encart explicatif "Pourquoi 50 €" sous le sub-title CSE.
   Style discret, transparence sur la valeur du service. */
.plat-section-note {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: rgba(110, 164, 255, 0.08);
  border-left: 3px solid var(--cr-blue, #6ea4ff);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text, #1a1a1a);
}
.plat-section-note p { margin: 0; }
.plat-section-note strong { color: var(--color-text, #1a1a1a); }

/* V337 : header plateformes avec CTA ticket fusionné à droite. */
.page-header--plat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-header--plat .page-header-text {
  flex: 1 1 480px;
  min-width: 0;
}
.plat-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fff8e6 0%, var(--color-surface) 100%);
  border: 1px solid #f0d97a;
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--color-text, #1a1a1a);
  flex-shrink: 0;
  max-width: 360px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.plat-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 217, 122, 0.35);
  border-color: #e6c956;
}
.plat-header-cta-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.plat-header-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  min-width: 0;
}
.plat-header-cta-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
}
.plat-header-cta-text span {
  font-size: 12px;
  color: var(--color-muted, #6a6a75);
  font-weight: 500;
}
.plat-header-cta-arrow {
  font-size: 18px;
  color: var(--color-text, #1a1a1a);
  flex-shrink: 0;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.plat-header-cta:hover .plat-header-cta-arrow {
  transform: translateX(3px);
}
@media (max-width: 720px) {
  .plat-header-cta {
    width: 100%;
    max-width: none;
  }
}

/* Bandeau parrainage (GYG) */
.plat-parrainage {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #e7f7ee 0%, #f3fbf6 100%);
  border: 1px solid #84d3a3;
  border-radius: 10px;
  margin: 12px 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plat-parrainage:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(40, 100, 60, 0.12);
}
.plat-parrainage-icon { font-size: 20px; flex-shrink: 0; }
.plat-parrainage-text { flex: 1; font-size: 13px; line-height: 1.4; }
.plat-parrainage-text strong { display: block; color: #2a6c43; }
.plat-parrainage-text small { display: block; font-size: 11.5px; color: #406b53; margin-top: 2px; }
.plat-parrainage-arrow { font-size: 18px; color: #2a6c43; }
.plat-parrainage--xl { padding: 18px 22px; margin: 16px 0 24px; }
.plat-parrainage--xl .plat-parrainage-icon { font-size: 28px; }
.plat-parrainage--xl .plat-parrainage-text { font-size: 14.5px; }

/* Bandeaux Calendly + Formulaire */
.plat-calendly,
.plat-formulaire {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 10px;
  margin: 8px 0;
  text-decoration: none;
  color: var(--color-text, #1a1a1a);
  font-size: 13px;
  transition: background 0.15s ease;
}
.plat-calendly:hover,
.plat-formulaire:hover { background: #e9ecf6; }

/* Badge restriction (Outlist) */
.plat-restriction {
  margin: 8px 0;
  padding: 8px 12px;
  background: #fff8e6;
  border-left: 3px solid #f0b400;
  border-radius: 6px;
  font-size: 12.5px;
  color: #5a4216;
  line-height: 1.4;
}

/* Exemples de fiches (BAT) */
.plat-exemples {
  margin: 8px 0;
}
.plat-exemples > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--color-muted, #6a6a75);
  padding: 6px 0;
  user-select: none;
}
.plat-exemples > summary::-webkit-details-marker { display: none; }
.plat-exemples > summary:hover { color: var(--cr-blue, #6ea4ff); }
.plat-exemples ul {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  list-style: "↗  ";
}
.plat-exemples li { margin: 4px 0; }
.plat-exemples a { color: var(--cr-blue, #6ea4ff); text-decoration: none; }
.plat-exemples a:hover { text-decoration: underline; }

/* CTA row : Inscription + Guide complet côte à côte */
.plat-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.plat-cta-row .plat-cta { flex: 1; text-align: center; min-width: 140px; }
.plat-cta-guide {
  background: var(--color-surface);
  color: var(--color-text, #1a1a1a);
  border: 1px solid var(--color-border, #d6dbed);
}
.plat-cta-guide:hover {
  border-color: var(--cr-blue, #6ea4ff);
  color: var(--cr-blue, #6ea4ff);
}

/* ─── Cartes CSE — différenciation visuelle ─── */
.plat-card--cse {
  border: 1px solid #d6dbed;
  background: linear-gradient(180deg, #fafbff 0%, var(--color-surface) 100%);
  position: relative;
}
.plat-card--cse .plat-priorite--cse {
  background: #1a1a1a;
  color: #fff;
}
.plat-statut--cse {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
}
.plat-statut--waiting {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #d6dbed;
  color: #4a4f5e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
}
.plat-card--waiting { opacity: 0.7; }
.plat-section--cse {
  background: linear-gradient(180deg, #fafbff 0%, transparent 200px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 24px 20px 8px;
  border-radius: 18px;
}
.plat-contact-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  font-style: italic;
}

/* ─── PAGE DÉTAIL PLATEFORME (guideDetaille) ──────────────── */

.plat-detail-hero {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 18px;
  margin: 16px 0 18px;
}
.plat-detail-hero-logo {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.plat-detail-hero-logo img {
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
}
.plat-detail-hero-emoji {
  font-size: 40px;
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.plat-detail-hero-text { flex: 1; min-width: 0; }
.plat-detail-hero-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text, #1a1a1a);
}
.plat-detail-hero-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted, #6a6a75);
  margin: 0 0 14px;
}
.plat-detail-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.plat-detail-stat {
  display: inline-flex;
  flex-direction: column;
  padding: 8px 14px;
  background: var(--color-surface-alt);
  border-radius: 8px;
}
.plat-detail-stat strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
}
.plat-detail-stat small {
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

.plat-detail-block {
  margin-top: 28px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 16px;
}
.plat-detail-h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}
.plat-detail-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted, #6a6a75);
  margin: 0 0 16px;
}
.plat-detail-tip {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #f3fbf6;
  border-left: 3px solid #84d3a3;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.plat-detail-warn {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fff5f5;
  border-left: 3px solid #fa6457;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* Univers (FICHE 1 + FICHE 2) */
.plat-univers {
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
}
.plat-univers-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.plat-univers-head::-webkit-details-marker { display: none; }
.plat-univers-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: #1a1a1a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.plat-univers-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}
.plat-univers-chevron {
  font-size: 20px;
  color: var(--color-muted, #6a6a75);
  transition: transform 0.2s ease;
}
.plat-univers[open] .plat-univers-chevron {
  transform: rotate(90deg);
}
.plat-univers-body {
  padding: 0 18px 18px;
}
.plat-univers-sub {
  font-size: 12.5px;
  color: var(--color-muted, #6a6a75);
  margin-bottom: 14px;
}
.plat-univers-pill {
  display: inline-block;
  padding: 3px 9px;
  background: var(--color-surface);
  border: 1px solid #d6dbed;
  border-radius: 20px;
  font-size: 11.5px;
  margin: 0 4px 4px 0;
}

/* Bloc copy (description, points forts) */
.plat-copy-block {
  margin: 12px 0;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
}
.plat-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.plat-copy-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted, #6a6a75);
}
.plat-copy-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text, #1a1a1a);
  white-space: pre-wrap;
}
.plat-copy-hint {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--color-muted, #6a6a75);
}
.plat-copy-hint code {
  background: var(--color-surface-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.plat-pf-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
}
.plat-pf-list li { margin-bottom: 4px; }

/* Mots-clés */
.plat-mots-cles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.plat-mc-chip {
  display: inline-block;
  padding: 5px 11px;
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 16px;
  font-size: 12.5px;
  color: var(--color-text, #1a1a1a);
}
.plat-mc-chip--warn {
  background: #fff5f5;
  border-color: #fcc8c2;
  color: #8b3a30;
}

/* Inclus / Non inclus */
.plat-inclus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.plat-inclus-col {
  padding: 14px;
  background: #f3fbf6;
  border: 1px solid #c7e8d4;
  border-radius: 10px;
}
.plat-inclus-col h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #2a6c43;
}
.plat-inclus-col ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
}
.plat-inclus-col li { margin: 3px 0; }
.plat-inclus-col--non {
  background: #fff5f5;
  border-color: #fcc8c2;
}
.plat-inclus-col--non h4 { color: #8b3a30; }

/* Créneaux table */
.plat-creneaux-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 10px;
}
.plat-creneaux-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.plat-creneaux-table th,
.plat-creneaux-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e9e9ee);
  vertical-align: top;
}
.plat-creneaux-table th {
  background: var(--color-surface-alt);
  font-weight: 600;
  color: var(--color-muted, #6a6a75);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.plat-creneaux-table th[scope="row"] {
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  white-space: nowrap;
}
.plat-creneaux-table code {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #1a1a1a);
  background: transparent;
}

/* Scénarios opérationnels */
.plat-scenarios-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.plat-scenario {
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 10px;
  overflow: hidden;
}
.plat-scenario > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.plat-scenario > summary::-webkit-details-marker { display: none; }
.plat-scenario-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.plat-scenario-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.plat-scenario-body {
  padding: 0 16px 16px 16px;
}
.plat-scenario-sub {
  font-size: 12.5px;
  color: var(--color-muted, #6a6a75);
  margin: 0 0 10px;
  font-style: italic;
}
.plat-scenario-etapes {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}
.plat-scenario-etapes li { margin-bottom: 6px; }
.plat-roles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 10px;
}
.plat-roles-table th,
.plat-roles-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e9e9ee);
}
.plat-roles-table th {
  background: var(--color-surface-alt);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-muted, #6a6a75);
  letter-spacing: 0.3px;
}

/* KPIs grid */
.plat-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.plat-kpi {
  padding: 14px;
  background: linear-gradient(180deg, #f3f5fb 0%, #fafbff 100%);
  border: 1px solid #d6dbed;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.plat-kpi-cible {
  font-size: 18px;
  font-weight: 700;
  color: var(--cr-blue, #6ea4ff);
}
.plat-kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}
.plat-kpi-source {
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  line-height: 1.3;
}

/* Rituels */
.plat-rituels-list {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
}
.plat-rituels-list li { margin-bottom: 6px; }
.plat-rituels-list strong { color: var(--color-text, #1a1a1a); }

/* Guides officiels */
.plat-guides-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.plat-guides-list li { margin: 0; }
.plat-guides-list a {
  display: block;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  border: 1px solid #d6dbed;
  border-radius: 8px;
  color: var(--color-text, #1a1a1a);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.plat-guides-list a:hover {
  background: var(--color-surface-alt);
  border-color: var(--cr-blue, #6ea4ff);
}

/* CTA finaux */
.plat-detail-cta-final {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.plat-detail-cta-final .plat-cta {
  min-width: 200px;
  text-align: center;
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .plat-detail-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }
  .plat-detail-hero-logo {
    width: 60px;
    height: 60px;
  }
  .plat-detail-hero-title { font-size: 22px; }
  .plat-detail-block { padding: 18px; }
  .plat-section--cse {
    margin-left: 0;
    margin-right: 0;
    padding: 18px 14px 4px;
  }
}

/* ─── Admin Tickets V2 (v208) — badges status + style resolved ── */
.admin-ticket-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.admin-ticket-status--open {
  background: #fff8e6;
  color: #8a5a00;
  border: 1px solid #f0b400;
}
.admin-ticket-status--resolved {
  background: #e7f7ee;
  color: #2a6c43;
  border: 1px solid #84d3a3;
}
.admin-ticket-row--resolved { opacity: 0.75; }
.admin-ticket-row--resolved .admin-ticket-summary strong {
  text-decoration: line-through;
  text-decoration-color: rgba(42, 108, 67, 0.3);
}

/* =========================================================
   APPROVISIONNEMENT D'URGENCE (#/commandes/urgence)
   Page dépannage avec : 2 cartes fournisseurs (Surdiscount/Amazon),
   puis sections par catégorie (Acrylique, Médiums, Gouache 5L, etc.)
   chacune contenant des "rows" avec les 2 options + reco mise en avant.
   ========================================================= */

/* Tuile dédiée sur la landing /commandes — fond rouge léger */
.commande-tile--urgence {
  background: linear-gradient(135deg, #fff4ee 0%, var(--color-surface) 100%);
  border-color: #f4c8b3;
}
.commande-tile--urgence:hover {
  border-color: #e88560;
}
.commande-tile-icon--urgence {
  background: linear-gradient(135deg, #ffe0d0 0%, #ffcdb3 100%);
  color: #b04a1f;
  font-size: 26px;
}

/* Hero + h2 secondaire */
.urg-h2 {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 36px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border, #e9e9ee);
}

/* Cartes fournisseurs (Surdiscount / Amazon) */
.urg-fournisseurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.urg-fourn-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.urg-fourn-card--surdiscount {
  background: linear-gradient(135deg, #f5fff8 0%, var(--color-surface) 100%);
  border-color: #c8e8d2;
}
.urg-fourn-card--amazon {
  background: linear-gradient(135deg, #fff8e6 0%, var(--color-surface) 100%);
  border-color: #f0d6a0;
}
.urg-fourn-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.urg-fourn-emoji {
  font-size: 28px;
  line-height: 1;
}
.urg-fourn-name {
  font-family: var(--font-logo);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.urg-fourn-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
}
.urg-fourn-meta strong {
  color: var(--color-text);
  font-weight: 600;
}
.urg-fourn-desc {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
.urg-fourn-link {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.urg-fourn-link:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* Sections (Acrylique, Médiums, Gouache 5L, Accessoires, Fluo) */
.urg-section {
  margin-bottom: 28px;
}
.urg-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.urg-section-rows {
  display: grid;
  gap: 12px;
}

/* Row : 1 produit avec head (nom + ref + reco) puis 2 cells (Amazon, Surdiscount) */
.urg-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.urg-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.urg-row-nom {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 2px;
}
.urg-row-ref {
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  margin: 0;
}
.urg-row-ref code {
  background: var(--color-surface-alt, #f5f3ee);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Badge "À privilégier" — accroche visuelle pour la reco */
.urg-reco-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.urg-reco-badge--amazon {
  background: #fff4dc;
  color: #8a5a00;
}
.urg-reco-badge--surdiscount {
  background: #e0f5e6;
  color: #1f6b32;
}

/* Cells Amazon vs Surdiscount */
.urg-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.urg-cell {
  padding: 10px 12px;
  background: var(--color-surface-alt, #fafaf7);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urg-cell--amazon { border-left: 3px solid #f0a818; }
.urg-cell--surdiscount { border-left: 3px solid #2d8a3a; }
.urg-cell.is-reco {
  background: #fffef0;
  border-color: #e8d575;
  box-shadow: 0 1px 4px rgba(232, 213, 117, 0.3);
}
.urg-cell--surdiscount.is-reco {
  background: #f5fff8;
  border-color: #a8d9b6;
  box-shadow: 0 1px 4px rgba(168, 217, 182, 0.3);
}
.urg-cell-prix {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.4;
}
.urg-cell-link {
  align-self: flex-start;
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  background: var(--color-primary-light, #eaf2ff);
  border-radius: 6px;
  transition: background 0.15s;
}
.urg-cell-link:hover {
  background: var(--color-primary);
  color: #fff;
}
.urg-cell-link--disabled {
  background: var(--color-surface-alt);
  color: #aaa;
  cursor: not-allowed;
}

.urg-row-notes {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: #fff8e6;
  border-left: 3px solid #f0b400;
  border-radius: 6px;
  font-size: 12.5px;
  color: #6a4f00;
  line-height: 1.5;
}

/* Section toiles (placeholder) */
.urg-section--toiles .urg-toiles-notice {
  padding: 16px 18px;
  background: linear-gradient(135deg, #f5f5fa 0%, var(--color-surface) 100%);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
  margin: 0;
}

/* Responsive : passe en colonne sur mobile */
@media (max-width: 720px) {
  .urg-row-grid {
    grid-template-columns: 1fr;
  }
  .urg-row-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Toiles d'urgence — cards avec badge de situation ===
   Affichées en grille 3 colonnes (responsive). Badge différent par situation
   (★ recommandé / économique / premium / petite quantité). */
.urg-intro {
  font-size: 13.5px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
  margin: -8px 0 18px;
  max-width: 860px;
}
.urg-toiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.urg-toile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Variantes par situationType : on garde le badge en haut comme seul
   signal coloré. Les fonds + bordures restent neutres pour pas saturer
   visuellement (8 cards à l'écran = besoin d'uniformité). */
.urg-toile-card--reco,
.urg-toile-card--economic,
.urg-toile-card--premium,
.urg-toile-card--small {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
}
.urg-toile-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urg-toile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.35;
}
.urg-toile-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.urg-toile-badge--reco {
  background: #fff4dc;
  color: #8a5a00;
}
.urg-toile-badge--economic {
  background: #e0f5e6;
  color: #1f6b32;
}
.urg-toile-badge--premium {
  background: #ede5f5;
  color: #5a3d8a;
}
.urg-toile-badge--small {
  background: var(--color-surface-alt);
  color: #5a5a6a;
}
.urg-toile-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--color-text-soft, #6a6a75);
}
.urg-toile-meta strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Notes simplifiées : texte gris sans fond ni bordure colorée. Le post-it
   jaune sur 8 cards créait un effet "sapin de Noël". */
.urg-toile-notes {
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.45;
  font-style: italic;
}
.urg-toile-link {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.15s;
}
.urg-toile-link:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* Wrap pour cartes avec plusieurs liens (ex. magasins locaux : Cultura,
   Géant des Beaux-Arts, Hema). Les boutons s'empilent en flex-wrap. */
.urg-toile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.urg-toile-link--small {
  padding: 6px 10px;
  font-size: 11.5px;
  margin-top: 0;
}

/* === Onglets Peinture / Toiles sur la page urgence ===
   2 boutons pleine largeur en haut de page, sticky pour rester visibles
   pendant le scroll. Compteur intégré (15 réfs / 5 options). */
.urg-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 22px;
  background: var(--color-surface-alt, #f5f3ee);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--color-border, #e9e9ee);
  position: sticky;
  top: 12px;
  z-index: 4;
}
.urg-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-soft, #6a6a75);
  transition: background 0.15s, color 0.15s;
}
.urg-tab:hover {
  background: rgba(0, 0, 0, 0.03);
}
.urg-tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.urg-tab-icon {
  font-size: 22px;
  line-height: 1;
}
.urg-tab-label {
  font-size: 16px;
}
.urg-tab-count {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  background: var(--color-surface-alt, #eeeae0);
  color: var(--color-text-soft, #6a6a75);
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.urg-tab.is-active .urg-tab-count {
  background: var(--color-primary-light, #eaf2ff);
  color: var(--color-primary-dark);
}
.urg-tab-panel[hidden] { display: none; }

@media (max-width: 540px) {
  .urg-tab-label { font-size: 13px; }
  .urg-tab-count { display: none; }
}

/* État désactivé du bouton "Envoyer la commande au Siège" — actif tant que
   le seuil 600 € HT n'est pas atteint, pour éviter envoi commande non valide. */
.ct-send-btn:disabled,
.ct-send-btn[disabled] {
  background: #c8c8d0 !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.85;
}
.ct-send-btn:disabled:hover,
.ct-send-btn[disabled]:hover {
  background: #c8c8d0 !important;
}

/* Mise en avant du prix dans les cards toiles d'urgence — un poil plus fort
   que les autres meta pour que le licencié repère vite le coût. */
.urg-toile-prix strong {
  color: var(--color-primary-dark);
}
.urg-toile-prix {
  color: var(--color-text);
}

/* Carte fournisseur avec plusieurs locators (Magasin loisirs créatifs) :
   les boutons s'empilent en flex-wrap, plus petits que le bouton principal. */
.urg-fourn-card--magasin-local {
  background: linear-gradient(135deg, #f5fff8 0%, var(--color-surface) 100%);
  border-color: #c8e8d2;
}
.urg-fourn-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.urg-fourn-link--small {
  padding: 6px 12px;
  font-size: 12px;
}

/* =========================================================
   ONBOARDING (refonte v253) — quest log + progress bar + timeline reléguée
   ========================================================= */

.onb-hero {
  background: linear-gradient(135deg, var(--color-primary-light, #eaf2ff) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.onb-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.onb-progress-stat {
  text-align: right;
  flex-shrink: 0;
}
.onb-progress-pct {
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.onb-progress-pct span {
  font-size: 18px;
  font-weight: 500;
  margin-left: 2px;
}
.onb-progress-fraction {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.onb-progress-auto {
  font-size: 11px;
  color: var(--color-text-tertiary, #999);
  margin-top: 2px;
  cursor: help;
}
.onb-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.onb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark, var(--color-primary)));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.onb-progress-fill--done {
  background: linear-gradient(90deg, #27ae60, #1e8449);
}

/* Quest cards : grille responsive */
.onb-quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.onb-quest-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.onb-quest-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.onb-quest-card--done {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  opacity: 0.72;
}
.onb-quest-card--done .onb-quest-label {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Carte auto-validée (étape pré-ouverture sur centre déjà ouvert) :
   apparence done + badge "Auto" + checkbox non interactive (disabled). */
.onb-quest-card--auto .onb-quest-check {
  cursor: default;
}
.onb-quest-card--auto .onb-quest-check input:disabled + .onb-quest-box {
  opacity: 0.7;
}
.onb-quest-auto {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}

.onb-quest-card--compact {
  padding: 10px 14px;
}

.onb-quest-check {
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
  margin-top: 2px;
}
.onb-quest-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.onb-quest-box {
  width: 24px;
  height: 24px;
  border: 2px solid #b8c2cc;
  border-radius: 6px;
  background: #f7f9fc;
  display: inline-block;
  position: relative;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  box-sizing: border-box;
}
.onb-quest-check:hover .onb-quest-box {
  border-color: var(--color-primary);
  background: #fff;
  transform: scale(1.06);
}
.onb-quest-check input:checked + .onb-quest-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.onb-quest-check input:checked + .onb-quest-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.onb-quest-body {
  flex: 1;
  min-width: 0;
}
.onb-quest-step {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.onb-quest-label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 8px;
}
.onb-quest-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 4px 0;
}
.onb-quest-cta:hover {
  text-decoration: underline;
}

.onb-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

/* "Voir toutes les actions" : details dépliable */
.onb-all-actions {
  margin-top: 18px;
  border-top: 1px dashed var(--color-border);
  padding-top: 14px;
}
.onb-all-actions > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  user-select: none;
  list-style: none;
}
.onb-all-actions > summary::-webkit-details-marker { display: none; }
.onb-all-actions > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
  margin-right: 4px;
}
.onb-all-actions[open] > summary::before {
  transform: rotate(90deg);
}
.onb-all-actions-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* Timeline reléguée en bas : version condensée, opacité légère */
.onb-timeline-section {
  opacity: 0.92;
}
.onb-timeline-section .timeline {
  padding-top: 8px;
}

/* Animation : carte qui sort de la grille active quand cochée. Donne le
   feeling "j'ai accompli, ça part de ma todo". */
.onb-quest-card--exit {
  animation: onbQuestExit 0.32s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes onbQuestExit {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
    max-height: 200px;
  }
  60% {
    transform: translateX(40px) scale(0.96);
    opacity: 0.4;
    max-height: 200px;
  }
  100% {
    transform: translateX(80px) scale(0.9);
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}

/* Pop sur la case cochée : feedback tactile à la validation */
.onb-quest-check input:checked + .onb-quest-box {
  animation: onbBoxPop 0.28s ease-out;
}
@keyframes onbBoxPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Glow sur la barre de progression quand elle remplit, pour attirer l'œil */
.onb-progress-fill {
  box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
  animation: onbBarGlow 1.6s ease-out;
}
@keyframes onbBarGlow {
  0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
  30% { box-shadow: 0 0 12px 3px rgba(74, 144, 226, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
}
.onb-progress-fill--done {
  animation: onbBarGlowDone 1.6s ease-out;
}
@keyframes onbBarGlowDone {
  0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
  30% { box-shadow: 0 0 16px 4px rgba(39, 174, 96, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

/* Pourcentage : pulse sur le chiffre quand il change */
.onb-progress-pct {
  animation: onbPctPulse 0.5s ease-out;
}
@keyframes onbPctPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* =========================================================
   ENHANCEMENTS UX (v=229+) - Toasts, Command palette, Tour,
   Wrapped, Hover preview, Parallax tilt, Notif dot, Birthday
   ========================================================= */

/* --- 1. Toast notifications --- */
.cr-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.cr-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-left: 4px solid #6ea4ff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  min-width: 280px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.4;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 220ms;
}
.cr-toast--show {
  transform: translateX(0);
  opacity: 1;
}
.cr-toast--success { border-left-color: #2ecc71; }
.cr-toast--error { border-left-color: #e74c3c; }
.cr-toast--warn { border-left-color: #f39c12; }
.cr-toast--info { border-left-color: #6ea4ff; }
.cr-toast--achievement {
  border-left-color: #f39c12;
  background: linear-gradient(135deg, #fff8e6 0%, #fff 100%);
}
.cr-toast-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
}
.cr-toast--success .cr-toast-icon { background: #d4f4dd; color: #1e8449; }
.cr-toast--error .cr-toast-icon { background: #fadbd8; color: #c0392b; }
.cr-toast--warn .cr-toast-icon { background: #fdebd0; color: #b9770e; }
.cr-toast--achievement .cr-toast-icon { background: transparent; font-size: 22px; }
.cr-toast-msg {
  flex: 1;
  color: #1a1a1a;
}
.cr-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
}
.cr-toast-close:hover { color: var(--color-text-muted); }

/* --- 2. Command palette ⌘K --- */
.cr-cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: crCmdFadeIn 180ms ease-out;
}
@keyframes crCmdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cr-cmd-modal {
  background: #fff;
  border-radius: 14px;
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: crCmdSlideIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes crCmdSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cr-cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.cr-cmd-search-icon {
  font-size: 18px;
  opacity: 0.6;
}
.cr-cmd-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  color: #1a1a1a;
}
.cr-cmd-input::placeholder { color: #999; }
.cr-cmd-results {
  overflow-y: auto;
  max-height: 50vh;
  padding: 8px;
}
.cr-cmd-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  padding: 12px 12px 6px;
  font-weight: 600;
}
.cr-cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  color: #1a1a1a;
  transition: background 80ms;
}
.cr-cmd-item--active,
.cr-cmd-item:hover {
  background: var(--color-surface-alt);
}
.cr-cmd-item--active {
  background: #e8efff;
}
.cr-cmd-item-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.cr-cmd-item-body {
  flex: 1;
  min-width: 0;
}
.cr-cmd-item-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-cmd-item-label mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.cr-cmd-item-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-cmd-item-sub mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.cr-cmd-item-enter {
  opacity: 0;
  font-size: 16px;
  color: #6ea4ff;
}
.cr-cmd-item--active .cr-cmd-item-enter {
  opacity: 1;
}
.cr-cmd-empty {
  padding: 32px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
.cr-cmd-footer {
  display: flex;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid #eee;
  font-size: 11px;
  color: #999;
  background: var(--color-surface-alt);
}
.cr-cmd-footer kbd {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}

/* --- 3. Tour overlay --- */
.cr-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99996;
  pointer-events: auto;
  animation: crTourFadeIn 240ms ease-out;
}
@keyframes crTourFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cr-tour-spotlight {
  position: fixed;
  z-index: 99997;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.55),
    0 0 0 4px rgba(255,255,255,0.4),
    0 0 32px rgba(110,164,255,0.6);
  pointer-events: none;
  transition: top 240ms, left 240ms, width 240ms, height 240ms;
}
.cr-tour-tooltip {
  position: fixed;
  z-index: 99998;
  background: #fff;
  border-radius: 12px;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  animation: crTourTooltipIn 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes crTourTooltipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cr-tour-step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6ea4ff;
  font-weight: 700;
  margin-bottom: 6px;
}
.cr-tour-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.cr-tour-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.cr-tour-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.cr-tour-skip {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 4px;
  font-family: inherit;
}
.cr-tour-skip:hover { color: var(--color-text-muted); }
.cr-tour-next {
  padding: 10px 18px;
  font-size: 14px;
}

/* --- 4. Wrapped overlay --- */
.cr-wrapped-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #6ea4ff 0%, #a29bfe 50%, #ff6b9d 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  animation: crWrappedFadeIn 400ms ease-out;
  overflow: hidden;
}
@keyframes crWrappedFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cr-wrapped-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,235,180,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.cr-wrapped-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.2);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms;
  z-index: 10;
}
.cr-wrapped-close:hover { background: rgba(255,255,255,0.3); }
.cr-wrapped-slide-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 24px;
}
.cr-wrapped-slide {
  text-align: center;
  color: #fff;
  max-width: 720px;
  transition: opacity 320ms, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.cr-wrapped-emoji {
  font-size: 88px;
  line-height: 1;
  margin-bottom: 24px;
  animation: crWrappedEmoji 700ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes crWrappedEmoji {
  from { transform: scale(0); }
  60% { transform: scale(1.2); }
  to { transform: scale(1); }
}
.cr-wrapped-kicker {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  margin: 0 0 16px;
  opacity: 0.85;
}
.cr-wrapped-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 120px);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 24px;
  letter-spacing: -2px;
  text-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.cr-wrapped-sub {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.95;
  font-weight: 400;
}
.cr-wrapped-progress {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 80px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.cr-wrapped-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.cr-wrapped-progress-bar--filled {
  background: rgba(255,255,255,0.95);
}
.cr-wrapped-progress-bar--active {
  background: rgba(255,255,255,0.3);
}
.cr-wrapped-progress-bar--active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.95);
  animation: crWrappedProgress 6s linear forwards;
}
@keyframes crWrappedProgress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.cr-wrapped-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- 5. Hover preview - RETIRE en V278 (redondant avec le clic
   immediat sur la tuile). CSS supprime. --- */

/* --- 8. Notification dot - RETIRE en V277 (doublonnait avec
   renderHeader > .notif-trigger natif). CSS supprime. --- */

/* --- Birthday banner + confetti --- */
.cr-bday-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  background: linear-gradient(135deg, #ff6b9d 0%, #feca57 100%);
  color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(255,107,157,0.4);
  z-index: 99997;
  font-size: 14px;
  font-weight: 500;
  max-width: calc(100vw - 32px);
  transition: transform 480ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.cr-bday-banner--show {
  transform: translateX(-50%) translateY(0);
}
.cr-bday-emoji {
  font-size: 22px;
  animation: crBdayBounce 1.4s ease-in-out infinite;
}
@keyframes crBdayBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.cr-bday-text {
  flex: 1;
}
.cr-bday-close {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cr-bday-close:hover { background: rgba(255,255,255,0.4); }

.cr-confetti-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99996;
  overflow: hidden;
}
.cr-confetti {
  position: absolute;
  top: -10px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: crConfettiFall linear forwards;
  transform-origin: center;
}
@keyframes crConfettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
}

/* --- Streak badge dans le header (cf. dashboard pour show) --- */
.cr-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255,94,98,0.3);
}
.cr-streak-badge::before {
  content: "🔥";
}

/* === Suivi commandes Cléopâtre — bandeau en haut du formulaire ===
   Liste les 5 dernières commandes avec statut auto-calculé (envoyée /
   en cours / livrée / ancienne) et rappel du processus 10 jours. */
.cs-block {
  margin: 0 0 24px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f1f6ff 0%, #fefcf7 100%);
  border: 1px solid #c8d8f0;
  border-radius: 12px;
}
.cs-head {
  margin-bottom: 12px;
}
.cs-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.cs-info {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}
.cs-info strong { color: var(--color-text); font-weight: 600; }
.cs-ticket-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
}
.cs-ticket-link:hover { text-decoration: underline; }

.cs-empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.6);
  padding: 12px 14px;
  border-radius: 8px;
}
.cs-empty strong { color: var(--color-text); font-weight: 600; }

/* Liste des commandes — chaque entrée est un <details> repliable. */
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-cmd {
  background: #fff;
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  overflow: hidden;
}
.cs-cmd--latest {
  border-color: #c8d8f0;
}
.cs-cmd-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  flex-wrap: wrap;
}
.cs-cmd-summary::-webkit-details-marker { display: none; }
.cs-cmd-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}
.cs-cmd-meta small {
  font-size: 11.5px;
  color: var(--color-text-soft, #6a6a75);
  font-weight: 400;
}
.cs-prefill-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.cs-cmd-chevron {
  font-size: 16px;
  color: var(--color-text-soft, #6a6a75);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cs-cmd[open] .cs-cmd-chevron {
  transform: rotate(90deg);
}
.cs-cmd-body {
  padding: 0 14px 14px 14px;
  border-top: 1px dashed var(--color-border, #e9e9ee);
  font-size: 13px;
  color: var(--color-text);
}
.cs-cmd-cat {
  margin: 8px 0;
}
.cs-cmd-cat h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft, #6a6a75);
}
.cs-cmd-cat ul {
  margin: 0;
  padding: 0 0 0 16px;
}
.cs-cmd-cat li {
  margin: 2px 0;
  line-height: 1.5;
  font-size: 12.5px;
}
.cs-cmd-cat li small {
  color: var(--color-text-soft, #6a6a75);
}

/* Timeline d'historique d'une commande (progression des étapes) */
.cs-timeline {
  margin: 10px 0 12px;
}
.cs-tl-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft, #6a6a75);
}
.cs-tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.cs-tl-step {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0 0 12px 0;
}
/* trait vertical reliant les points */
.cs-tl-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -2px;
  width: 2px;
  background: var(--color-border, #e9e9ee);
}
.cs-tl-step:last-child::before {
  display: none;
}
.cs-tl-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 2px;
  background: var(--color-border, #d7d7de);
  box-shadow: 0 0 0 3px var(--color-surface, #fff);
  z-index: 1;
}
.cs-tl-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-tl-label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text);
}
.cs-tl-date {
  color: var(--color-text-soft, #6a6a75);
  font-weight: 400;
}
.cs-tl-detail {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-soft, #6a6a75);
}
/* états */
.cs-tl-step--done .cs-tl-dot {
  background: #2e9e5b;
}
.cs-tl-step--current .cs-tl-dot {
  background: #2f7fed;
  box-shadow: 0 0 0 3px var(--color-surface, #fff), 0 0 0 5px rgba(47, 127, 237, 0.25);
}
.cs-tl-step--current .cs-tl-label {
  font-weight: 600;
}
.cs-tl-step--pending .cs-tl-dot {
  background: transparent;
  border: 2px dashed var(--color-border, #b9b9c2);
}
.cs-tl-step--pending .cs-tl-label {
  color: var(--color-text-soft, #6a6a75);
}
.cs-tl-step--incident .cs-tl-dot {
  background: #e0952a;
}
.cs-tl-step--incident .cs-tl-label {
  color: #b26a00;
  font-weight: 600;
}

/* Statut visuel — pill colorée par état (envoyée / en-cours / livrée / ancienne) */
.cs-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-statut-emoji { font-size: 14px; line-height: 1; }
.cs-statut--envoyee {
  background: #e0eaff;
  color: #1f4ea8;
}
.cs-statut--en-cours {
  background: #fff4dc;
  color: #8a5a00;
}
.cs-statut--livree {
  background: #e0f5e6;
  color: #1f6b32;
}
.cs-statut--attendue {
  background: #fdebd3;
  color: #8a4a00;
}
.cs-statut--ancienne {
  background: #f0e0e0;
  color: #8a3a3a;
}

/* Responsive : cache le label du statut sur petit écran (emoji seul reste) */
@media (max-width: 540px) {
  .cs-statut-label { display: none; }
}

/* =========================================================
   ENHANCEMENTS v=265+ — Stagger reveal, page fade, shooting
   star login, smooth transitions
   ========================================================= */

/* --- Stagger fade-in cascade --- */
.cr-stagger-in {
  animation: crStaggerIn 540ms cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
  animation-delay: calc(var(--stagger-index, 0) * 60ms);
}
@keyframes crStaggerIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Page fade-in entre routes (V278 : retire le translateY pour
   ne pas perturber la position de scroll percue) --- */
#app.cr-fade-in {
  animation: crPageFadeIn 180ms ease-out;
}
@keyframes crPageFadeIn {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* --- Shooting star login : RETIRE en V287 ---
   "Animation de survol ne sert a rien a la connexion" - le user. */

/* --- Smooth scroll : RETIRE en V278 ---
   Causait conflit avec les scrollTo({top:0, behavior:'instant'}) du
   navigateTo / handleHashChange (V276) : sur certains navigateurs la
   regle CSS l'emportait sur le hint 'instant' et on voyait la page
   "remonter" apres avoir atterri en bas du nouveau DOM. Sans la regle,
   behavior:'instant' fait son boulot proprement et l'utilisateur
   atterrit pile en haut. Smooth scroll reste possible au cas par cas
   avec scrollTo({behavior:'smooth'}) explicite. */
@media (prefers-reduced-motion: reduce) {
  .cr-stagger-in, #app.cr-fade-in { animation: none !important; }
  .cr-stagger-in { opacity: 1; transform: none; }
}

/* --- Counters animation hint (pas d'animation CSS, juste une classe
       optionnelle quand on veut un highlight pendant le countup) --- */
[data-countup] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Bonus : hover boost sur les boutons primary --- */
.btn-primary {
  transition: transform 120ms cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 120ms, filter 120ms;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* =========================================================
   ENHANCEMENTS v=268+ — Streak inline, Heatmap, Profile badges
   ========================================================= */

/* --- Streak inline dans le welcome --- */
.cr-streak-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3);
  animation: crStreakPulse 2.4s ease-in-out infinite;
}
.cr-streak-flame {
  display: inline-block;
  animation: crFlameFlicker 1.6s ease-in-out infinite;
}
@keyframes crStreakPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3); }
  50% { box-shadow: 0 2px 14px rgba(255, 94, 98, 0.5); }
}
@keyframes crFlameFlicker {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.06); }
}

/* --- Activity heatmap GitHub-style --- */
.cr-heatmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 8px;
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  overflow-x: auto;
}
.cr-heatmap-months {
  display: grid;
  grid-template-columns: repeat(53, 14px);
  column-gap: 2px;
  padding-left: 22px;
}
.cr-heatmap-months span {
  font-size: 10px;
  letter-spacing: 0.3px;
  text-align: left;
  white-space: nowrap;
}
.cr-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(53, 14px);
  grid-auto-rows: 14px;
  grid-auto-flow: column;
  column-gap: 2px;
  row-gap: 2px;
}
.cr-heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ebedf0;
  transition: transform 100ms;
}
.cr-heatmap-cell:hover {
  transform: scale(1.4);
  z-index: 2;
  outline: 1px solid #fff;
  outline-offset: 1px;
}
.cr-heatmap-cell--empty { background: transparent; pointer-events: none; }
.cr-heatmap-cell--lvl0 { background: #ebedf0; }
.cr-heatmap-cell--lvl1 { background: #c6e48b; }
.cr-heatmap-cell--lvl2 { background: #7bc96f; }
.cr-heatmap-cell--lvl3 { background: #239a3b; }
.cr-heatmap-cell--lvl4 { background: #196127; }
html[data-theme="dark"] .cr-heatmap-cell--lvl0 { background: #2a2a30; }
.cr-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 22px;
  margin-top: 4px;
}
.cr-heatmap-legend span {
  font-size: 10px;
  margin: 0 4px;
}

/* --- Profile badges grid --- */
.cr-profile-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
.cr-profile-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  opacity: 0.5;
  transition: all 200ms;
}
.cr-profile-badge--unlocked {
  opacity: 1;
  background: linear-gradient(135deg, #fff8e6 0%, #fffefa 100%);
  border-color: #f0b400;
  box-shadow: 0 2px 8px rgba(240, 180, 0, 0.15);
}
html[data-theme="dark"] .cr-profile-badge--unlocked {
  background: linear-gradient(135deg, rgba(240,180,0,0.12) 0%, rgba(240,180,0,0.04) 100%);
}
.cr-profile-badge-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.cr-profile-badge strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--color-text);
}
.cr-profile-badge small {
  font-size: 11px;
  color: var(--color-muted, #6a6a75);
  line-height: 1.3;
  display: block;
}
.cr-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* =========================================================
   ENHANCEMENTS v=269+ — Keyboard shortcuts panel
   ========================================================= */

.cr-shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: crCmdFadeIn 200ms ease-out;
}
.cr-shortcuts-modal {
  background: #fff;
  border-radius: 14px;
  width: min(480px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.12);
  animation: crCmdSlideIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.cr-shortcuts-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #eee;
}
.cr-shortcuts-modal header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}
.cr-shortcuts-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
}
.cr-shortcuts-close:hover { color: #333; }
.cr-shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 12px 8px;
}
.cr-shortcuts-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 100ms;
}
.cr-shortcuts-list li:hover { background: #f3f5fb; }
.cr-shortcuts-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cr-shortcuts-keys kbd {
  display: inline-block;
  padding: 4px 8px;
  background: #fafaf7;
  border: 1px solid #ddd;
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #333;
  min-width: 22px;
  text-align: center;
}
.cr-shortcuts-plus {
  color: #999;
  font-size: 11px;
  margin: 0 2px;
}
.cr-shortcuts-desc {
  font-size: 13px;
  color: #555;
  margin-left: 16px;
  text-align: right;
}
.cr-shortcuts-modal footer {
  padding: 12px 22px 18px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}
.cr-shortcuts-modal footer kbd {
  display: inline-block;
  padding: 2px 6px;
  background: #fafaf7;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #555;
}

/* Dark mode */
html[data-theme="dark"] .cr-shortcuts-modal {
  background: #1a1a1d;
  color: #f0f0f5;
}
html[data-theme="dark"] .cr-shortcuts-modal header h2 { color: #f0f0f5; }
html[data-theme="dark"] .cr-shortcuts-modal header { border-bottom-color: #2a2a30; }
html[data-theme="dark"] .cr-shortcuts-modal footer { border-top-color: #2a2a30; }
html[data-theme="dark"] .cr-shortcuts-keys kbd { background: #2a2a30; border-color: #3a3a40; color: #ddd; }
html[data-theme="dark"] .cr-shortcuts-list li:hover { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .cr-shortcuts-desc { color: #ccc; }
html[data-theme="dark"] .cr-cmd-modal { background: #1a1a1d; color: #f0f0f5; }
html[data-theme="dark"] .cr-cmd-input-wrap { border-bottom-color: #2a2a30; }
html[data-theme="dark"] .cr-cmd-input { color: #f0f0f5; }
html[data-theme="dark"] .cr-cmd-item { color: #f0f0f5; }
html[data-theme="dark"] .cr-cmd-item:hover, html[data-theme="dark"] .cr-cmd-item--active { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .cr-cmd-footer { background: #14141a; border-top-color: #2a2a30; color: #999; }
html[data-theme="dark"] .cr-cmd-footer kbd { background: #2a2a30; border-color: #3a3a40; color: #ddd; }
html[data-theme="dark"] .cr-toast { background: #1a1a1d; color: #f0f0f5; }
html[data-theme="dark"] .cr-toast-msg { color: #f0f0f5; }
html[data-theme="dark"] .cr-tour-tooltip { background: #1a1a1d; color: #f0f0f5; }
html[data-theme="dark"] .cr-tour-title { color: #f0f0f5; }
html[data-theme="dark"] .cr-tour-body { color: #ccc; }

/* =========================================================
   ENHANCEMENTS v=279+ — Photo profil, TV mode, custom cursor
   wahou, live pulse, empty state SVG
   ========================================================= */

/* --- 19. Photo de profil customisable --- */
.cr-avatar-uploader {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cr-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-surface-alt, #f3f5fb) center/cover no-repeat;
  border: 2px dashed var(--color-border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-muted, #999);
}
.cr-avatar-preview span { padding: 0 8px; text-align: center; }
.cr-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Avatar header : remplace l'initiale par la photo si presente */
.avatar.avatar--has-photo {
  background: transparent !important;
  overflow: hidden;
  position: relative;
}
.avatar .cr-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.avatar--has-photo > *:not(.cr-avatar-img) {
  opacity: 0;
}

/* --- 22. Mode TV / Présentation --- */
.cr-tv-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #1a1a1d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
  animation: crCmdFadeIn 350ms ease-out;
  overflow: hidden;
}
.cr-tv-close {
  position: absolute;
  top: 32px;
  right: 32px;
  background: rgba(255,255,255,0.15);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 160ms;
}
.cr-tv-close:hover { background: rgba(255,255,255,0.3); }
.cr-tv-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  padding: 60px 40px;
  transition: opacity 250ms ease-in-out, background 1500ms ease-in-out;
  position: relative;
}
.cr-tv-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,235,180,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.cr-tv-emoji {
  font-size: 120px;
  line-height: 1;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  animation: crTvBounce 2.5s ease-in-out infinite;
}
@keyframes crTvBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}
.cr-tv-kicker {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  margin: 0 0 24px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
.cr-tv-big {
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 240px);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 32px;
  letter-spacing: -3px;
  text-shadow: 0 6px 24px rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
.cr-tv-big--text {
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -1px;
  max-width: 1100px;
  line-height: 1.15;
}
.cr-tv-sub {
  font-size: clamp(18px, 2.4vw, 28px);
  margin: 0;
  opacity: 0.95;
  font-weight: 400;
  max-width: 800px;
  position: relative;
  z-index: 1;
}
.cr-tv-progress {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 100px;
  display: flex;
  gap: 8px;
  z-index: 5;
}
.cr-tv-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.cr-tv-progress-bar--filled {
  background: rgba(255,255,255,0.85);
}
.cr-tv-progress-bar--active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  animation: crTvFill 8s linear forwards;
}
@keyframes crTvFill {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.cr-tv-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* --- 21. Custom cursor wahou intro (CSS-only sur body.wahou-active) --- */
body.wahou-active,
body.wahou-active * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="6" fill="%23ff6b9d" opacity="0.85"/><circle cx="16" cy="16" r="10" fill="none" stroke="%23feca57" stroke-width="2" opacity="0.7"/></svg>') 16 16, auto;
}

/* --- 23. Live activity pulse ticker --- */
.cr-pulse-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 12px 0 18px;
  background: linear-gradient(135deg, rgba(110, 164, 255, 0.08) 0%, rgba(255, 107, 157, 0.06) 100%);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 12px;
  font-size: 13px;
  color: var(--color-text);
  overflow: hidden;
}
.cr-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1dd1a1;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(29, 209, 161, 0.7);
  animation: crPulseDot 2s ease-in-out infinite;
}
@keyframes crPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(29, 209, 161, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(29, 209, 161, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 209, 161, 0); }
}
.cr-pulse-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1dd1a1;
  background: rgba(29, 209, 161, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cr-pulse-msg {
  flex: 1;
  transition: opacity 240ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-pulse-emoji { margin-right: 4px; }

/* --- 24. Empty state animated SVG --- */
.cr-empty-illu-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.cr-empty-illu {
  display: block;
}
.cr-empty-circle {
  transform-origin: center;
  animation: crEmptyFloat 4s ease-in-out infinite;
}
.cr-empty-circle--1 { animation-delay: 0s; }
.cr-empty-circle--2 { animation-delay: 0.4s; }
.cr-empty-circle--3 { animation-delay: 0.8s; }
.cr-empty-circle--4 { animation-delay: 1.2s; }
.cr-empty-circle--5 { animation-delay: 1.6s; }
@keyframes crEmptyFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(0, -6px) scale(1.06); opacity: 0.9; }
}

/* Sound toggle dans le profil (si on l'ajoute plus tard) */
.cr-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e9e9ee);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
}
.cr-sound-toggle--on { background: rgba(29, 209, 161, 0.12); border-color: #1dd1a1; }

/* === Partenariats fournisseurs en cours ===
   Tuile sur landing /commandes (couleur bleue collaboration) +
   page dédiée /commandes/partenariats avec grid de cards. */

/* Tuile landing */
.commande-tile--partenariats {
  background: linear-gradient(135deg, #f1f6ff 0%, #fff 100%);
  border-color: #c8d8f0;
}
.commande-tile--partenariats:hover {
  border-color: #6b8cd6;
}
.commande-tile-icon--partenariats {
  background: linear-gradient(135deg, #d8e4ff 0%, #b8c8e8 100%);
  color: #2d4a8a;
  font-size: 26px;
}

/* Page dédiée — grid de cards */
.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.part-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.part-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.part-card-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.part-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.part-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.35;
}
.part-card-statut {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.part-card-statut--en-cours {
  background: #fff4dc;
  color: #8a5a00;
}
.part-card-statut--default {
  background: #f0f0f5;
  color: #5a5a6a;
}
.part-card-desc {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
  margin: 0;
}
.part-card-eta {
  font-size: 13px;
  color: var(--color-text);
  padding: 8px 12px;
  background: var(--color-surface-alt, #fafaf7);
  border-radius: 8px;
  border-left: 3px solid #6b8cd6;
}
.part-card-eta strong { color: var(--color-primary-dark); font-weight: 600; }
.part-card-cta {
  font-size: 12px;
  color: #2d4a8a;
  margin: 0;
  padding: 6px 10px;
  background: #e0eaff;
  border-radius: 6px;
  font-style: italic;
}

/* Section CTA en bas de page : aide-nous à remonter les volumes */
.part-cta-section {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #f1f6ff 0%, #fefcf7 100%);
  border: 1px solid #c8d8f0;
  border-radius: 12px;
  margin-top: 12px;
}
.part-cta-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}
.part-cta-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.part-cta-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.part-cta-body p {
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
  margin: 0;
}
.part-cta-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  width: auto !important;
}

@media (max-width: 640px) {
  .part-cta-section {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Volume estimé sur les cards partenariats ===
   Input number avec label + unité (boîtes/an, oursons/an, etc.) */
.part-card-volume {
  margin-top: auto;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f1f6ff 0%, #fefcf7 100%);
  border-radius: 10px;
  border: 1px solid #c8d8f0;
}
.part-card-volume-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d4a8a;
  margin-bottom: 8px;
}
.part-card-volume-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.part-card-volume-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.part-card-volume-input input:focus {
  outline: none;
  border-color: #6b8cd6;
  box-shadow: 0 0 0 3px rgba(107, 140, 214, 0.15);
}
.part-card-volume-unite {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft, #6a6a75);
  white-space: nowrap;
}

/* Message de confirmation après envoi des volumes */
.part-saved-msg {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.part-saved-msg--ok {
  background: #e0f5e6;
  color: #1f6b32;
}
.part-saved-msg--warn {
  background: #fff4dc;
  color: #8a5a00;
}

/* === Historique commandes Cléopâtre (extrait des mails) ===
   Sous-section dans le bandeau "Suivi de tes commandes Cléopâtre",
   affichée en dessous des commandes plateforme. Contient les
   commandes antérieures consolidées par audit manuel des mails. */
.cs-subtitle {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft, #6a6a75);
}
.cs-cmd--historique {
  background: #fafaf7;
}
.cs-cmd-probleme {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: #fde7e4;
  border-left: 3px solid #d93025;
  border-radius: 6px;
  font-size: 12.5px;
  color: #6a2a26;
  line-height: 1.5;
}
.cs-cmd-compensation {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #e0f5e6;
  border-left: 3px solid #1f9a4d;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1f6b32;
  line-height: 1.5;
}
.cs-cmd-notes {
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
  line-height: 1.5;
}

/* === Admin Volumes Partenariats (/#/admin/partenariats-volumes) ===
   Tableau agrégé : 1 card par partenariat avec total réseau + détail
   par licencié (table responsive). */

.apv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.apv-card {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f1f6ff 0%, #fefcf7 100%);
  border: 1px solid #c8d8f0;
  border-radius: 12px;
}
.apv-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.apv-card-emoji {
  font-size: 24px;
  line-height: 1;
}
.apv-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.apv-card-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apv-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.apv-stat strong {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 700;
  color: #2d4a8a;
  line-height: 1.05;
}
.apv-stat span {
  font-size: 11.5px;
  color: var(--color-text-soft, #6a6a75);
}
.apv-stat--annual strong { color: #1f6b32; }
.apv-stat--count strong { color: #8a5a00; }

/* Table détail */
.apv-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.apv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.apv-table thead {
  background: var(--color-surface-alt, #fafaf7);
  border-bottom: 1px solid var(--color-border);
}
.apv-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft, #6a6a75);
  white-space: nowrap;
}
.apv-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}
.apv-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #2d4a8a;
}
.apv-table-empty {
  color: var(--color-text-soft, #aaa);
  font-weight: 400;
}
.apv-table-empty-row {
  text-align: center;
  padding: 30px 12px;
  color: var(--color-text-soft, #6a6a75);
  font-style: italic;
}
.apv-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
.apv-table small {
  color: var(--color-text-soft, #6a6a75);
}

/* === Mode preview-as : admin visualise la plateforme comme un licencié ===
   Bandeau sticky en haut de page (fixed top) + section dédiée sur le
   dashboard admin pour choisir le licencié. */

.preview-as-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #fff4dc 0%, #ffe0b3 100%);
  border-bottom: 2px solid #f0a818;
  font-size: 13px;
  color: #6a4f00;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.pa-banner-label { font-weight: 600; }
.pa-banner-exit {
  padding: 6px 14px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pa-banner-exit:hover { background: #333; }

/* Quand le bandeau est actif, on pousse tout le body vers le bas */
body.has-preview-banner {
  padding-top: 44px;
}

/* Section preview-as sur le dashboard admin */
.preview-as-section {
  background: linear-gradient(135deg, #fffef0 0%, #fff 100%);
  border: 1px solid #e8d575;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.preview-as-help {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text-soft, #6a6a75);
  line-height: 1.5;
}
.preview-as-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.preview-as-select {
  flex: 1;
  min-width: 240px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
}
.preview-as-go-btn {
  width: auto !important;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   FEEDBACK POPUP (campagne 1 mois - V326+)
   Carte flottante bas droit du dashboard. Compacte, lisible,
   1 seule typo (Manrope) pour ne pas concurrencer le contenu.
   ───────────────────────────────────────────────────────── */
.feedback-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 20px 22px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow:
    0 24px 48px -16px rgba(15, 23, 42, 0.22),
    0 8px 16px -8px rgba(15, 23, 42, 0.10);
  font-family: "Manrope", system-ui, sans-serif;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
  overflow: hidden;
}
.feedback-popup--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.feedback-popup--out {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}

/* Accent vertical Color Room sur le bord gauche - signature de marque */
.feedback-popup-accent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--cr-blue, #6ea4ff) 0%,
    var(--cr-yellow, #face4e) 50%,
    var(--cr-coral, #fa6457) 100%
  );
}

.feedback-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--color-text-muted, #9ca3af);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.feedback-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text, #111);
}

/* Icone ampoule dans un cercle bleu Color Room */
.feedback-popup-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(110, 164, 255, 0.18) 0%,
    rgba(250, 206, 78, 0.18) 100%
  );
  color: var(--cr-blue, #6ea4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.feedback-popup-icon svg {
  width: 22px;
  height: 22px;
}

.feedback-popup-content {
  flex: 1;
  min-width: 0;
  padding-right: 20px; /* reserve pour la croix */
}

.feedback-popup-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text, #111);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.feedback-popup-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 14px;
}
.feedback-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-text, #1a1a1a);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, gap 0.15s ease;
}
.feedback-popup-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.feedback-popup-cta:hover {
  background: var(--cr-blue, #6ea4ff);
  transform: translateY(-1px);
  gap: 8px;
}
.feedback-popup-cta:hover svg {
  transform: translateX(2px);
}

@media (max-width: 520px) {
  .feedback-popup {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    padding: 16px 18px 16px;
  }
}

html[data-theme="dark"] .feedback-popup {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.6),
    0 8px 16px -8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .feedback-popup-close:hover {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .feedback-popup-icon {
  background: linear-gradient(
    135deg,
    rgba(110, 164, 255, 0.28) 0%,
    rgba(250, 206, 78, 0.22) 100%
  );
  color: #b8d2ff;
}
html[data-theme="dark"] .feedback-popup-cta {
  background: var(--cr-blue, #6ea4ff);
  color: #14141a !important;
}
html[data-theme="dark"] .feedback-popup-cta:hover {
  background: var(--cr-yellow, #face4e);
}

/* =========================================================
   ADMIN - Page Equipes des licencies (#/admin/team)
   ========================================================= */

.admin-team-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
}

.admin-team-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-team-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 180px;
}

.admin-team-field--full {
  flex-basis: 100%;
}

.admin-team-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-team-field input,
.admin-team-field select {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}

.admin-team-field input:focus,
.admin-team-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 157, 252, 0.15);
}

.admin-team-feedback {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}

.admin-team-feedback--ok {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.admin-team-feedback--err {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}

.admin-team-feedback--warn {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
}

.admin-team-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.admin-team-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.admin-team-block-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.admin-team-members {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-team-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-surface-alt);
  border-radius: 8px;
  font-size: 13.5px;
  flex-wrap: wrap;
}

.admin-team-member-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-team-member-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-team-badge {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-team-badge--ok {
  background: #d1fae5;
  color: #065f46;
}

.admin-team-badge--off {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-team-badge--admin {
  background: #ede9fe;
  color: #5b21b6;
}

/* =========================================================
   V=371 - Tracking local des envois admin emails
   ========================================================= */

.admin-email-row--sent {
  background: linear-gradient(180deg, #f0fdf4 0%, var(--color-surface) 30%);
  border-left: 3px solid #10b981;
}

.admin-email-sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px 5px 8px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  width: fit-content;
}

.admin-email-sent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-email-sent-text {
  white-space: nowrap;
}

.admin-email-sent-unmark {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #065f46;
  padding: 0 4px;
  opacity: 0.65;
  transition: opacity 120ms;
}

.admin-email-sent-unmark:hover {
  opacity: 1;
}

/* Compteur global "X / Y envoyés" */
.admin-email-sent-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-email-sent-counter--active {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.admin-email-sent-counter-num {
  font-weight: 700;
  font-size: 14px;
}

.admin-email-sent-counter-sep {
  margin: 0 1px;
  opacity: 0.5;
}

.admin-email-sent-counter-total {
  font-weight: 500;
  margin-right: 4px;
}

.admin-email-sent-counter-reset {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: inherit;
  padding: 0 2px 0 6px;
  margin-left: 4px;
  opacity: 0.6;
  border-left: 1px solid currentColor;
  transition: opacity 120ms;
}

.admin-email-sent-counter-reset:hover {
  opacity: 1;
}

/* =========================================================
   V=373 - Preparation envoi en masse + bulk send progress
   ========================================================= */

.admin-email-prep {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 20px 24px;
}

.admin-email-prep-head {
  margin-bottom: 12px;
}

.admin-email-prep-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
}

.admin-email-prep-steps {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  color: #78350f;
  line-height: 1.7;
  font-size: 13.5px;
}

.admin-email-prep-steps li {
  margin-bottom: 8px;
}

.admin-email-prep-steps li:last-child {
  margin-bottom: 0;
}

.admin-email-prep-steps strong {
  color: #5b2e09;
}

.admin-email-prep-steps code {
  background: rgba(120, 53, 15, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: #5b2e09;
}

.admin-email-prep-steps em {
  background: rgba(255, 255, 255, 0.55);
  padding: 2px 8px;
  border-radius: 5px;
  font-style: normal;
  font-weight: 500;
}

.admin-email-prep-steps button {
  margin-left: 8px;
  vertical-align: middle;
}

/* Compteur + bouton bulk side by side */
.admin-email-counter-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.admin-email-bulk-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-email-all-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Zone de progression du bulk send */
.admin-email-bulk-progress {
  margin: 12px 0 18px;
  padding: 14px 18px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-email-bulk-progress--active {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  animation: bulkProgressPulse 1.6s ease-in-out infinite;
}

.admin-email-bulk-progress--done {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}

@keyframes bulkProgressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.admin-email-bulk-progress-email {
  font-family: var(--font-mono, monospace);
  color: var(--color-text);
  font-weight: 500;
}

.admin-email-bulk-progress-ok {
  margin-left: 12px;
  color: #065f46;
  font-weight: 600;
}

.admin-email-bulk-progress-err {
  margin-left: 12px;
  color: #7f1d1d;
  font-weight: 600;
}

.admin-email-bulk-progress details ul {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
}

.admin-email-bulk-progress details code {
  background: rgba(127, 29, 29, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11.5px;
}

/* === V386 : catalogue Cléopâtre read-only (prospect NDA + admin) === */
.cat-ro-info-box {
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #fff7e6 0%, #fff3d6 100%);
  border: 1px solid #ffd886;
  border-radius: 14px;
}
.cat-ro-info-icon { font-size: 26px; flex-shrink: 0; line-height: 1.2; }
.cat-ro-info-body { flex: 1; min-width: 0; }
.cat-ro-info-body h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #5d4300;
}
.cat-ro-info-body ul {
  margin: 0;
  padding-left: 18px;
  color: #5d4300;
  font-size: 13px;
  line-height: 1.55;
}
.cat-ro-info-body li { margin-bottom: 4px; }

.cat-ro-tables { display: flex; flex-direction: column; gap: 28px; margin-bottom: 32px; }
.cat-ro-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft, #e5e7ee);
  border-radius: 14px;
  padding: 18px 22px;
}
.cat-ro-cat-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 14px;
}
.cat-ro-table-wrap { overflow-x: auto; }
.cat-ro-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cat-ro-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted, #6a6a75);
  border-bottom: 1px solid var(--color-border-soft, #e5e7ee);
  background: #fafbfd;
}
.cat-ro-table thead th.num { text-align: right; }
.cat-ro-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid #f1f2f6;
  vertical-align: middle;
}
.cat-ro-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-ro-table tbody tr:last-child td { border-bottom: none; }
.cat-ro-table tbody tr:hover td { background: #fafbfd; }

.cat-ro-name { font-weight: 500; color: var(--color-text); line-height: 1.3; }
.cat-ro-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cat-ro-ref, .cat-ro-contenance {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  background: #f4f5f8;
  border-radius: 4px;
  color: var(--color-muted, #6a6a75);
  letter-spacing: 0.02em;
}
.cat-ro-prix-net {
  font-size: 16px;
  font-family: var(--font-display);
  color: var(--color-primary, #6ea4ff);
  font-weight: 600;
}
.cat-ro-prix-public {
  font-size: 12.5px;
  color: #9a9aa0;
  text-decoration: line-through;
}
.cat-ro-econo {
  display: inline-block;
  padding: 3px 9px;
  background: #e7f6de;
  color: #3e7826;
  font-weight: 600;
  font-size: 12px;
  border-radius: 6px;
}
.cat-ro-min {
  font-weight: 500;
  color: var(--color-text);
}

.cat-ro-cta {
  padding: 32px 28px;
  text-align: center;
  background: linear-gradient(135deg, #eef3ff 0%, #f7eafd 100%);
  border: 1px solid var(--color-primary-light, #c5d7ff);
  border-radius: 18px;
  box-shadow: 0 8px 24px -12px rgba(110, 164, 255, 0.4);
}
.cat-ro-cta-icon { font-size: 44px; margin-bottom: 10px; }
.cat-ro-cta h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--color-text);
}
.cat-ro-cta p {
  font-size: 14px;
  color: #4a5067;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}
.cat-ro-cta-sub {
  margin-top: 14px !important;
  font-size: 11.5px !important;
  color: var(--color-muted, #6a6a75) !important;
  font-style: italic;
}

@media (max-width: 700px) {
  .cat-ro-table { font-size: 12.5px; }
  .cat-ro-table thead th,
  .cat-ro-table tbody td { padding: 8px 10px; }
  .cat-ro-prix-net { font-size: 14px; }
  .cat-ro-cta { padding: 24px 18px; }
}

/* =========================================================
   BP - Telechargement PDF (V=444)
   Bouton "Telecharger le BP" + impression isolee de la section.
   Remplace l'ancien export PDF/Excel retire en v407/v409 par une
   approche legere : window.print() + @media print qui masque tout
   sauf la section business plan.
   ========================================================= */
.bp-download-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.bp-download-btn {
  white-space: nowrap;
}
.bp-download-hint {
  font-size: 12px;
  color: var(--color-text-soft);
}
/* En-tete d'impression : masque a l'ecran, visible seulement en PDF */
.bp-print-header { display: none; }

@media print {
  /* On masque tout, puis on ne re-affiche que la section BP.
     Limite aux pages qui contiennent le BP : sans ce filtre, toute autre
     impression (fiches process animateur, materiel...) sortait blanche.
     :where() garde une specificite nulle pour que la regle ci-dessous gagne. */
  :where(body:has(.bp-print-root)) * { visibility: hidden; }
  .bp-print-root,
  .bp-print-root * { visibility: visible; }
  .bp-print-root {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    background: #fff;
    color: #000;
  }
  /* Elements ecran inutiles au PDF */
  .bp-download-row,
  .bp-intro-screen,
  .bp-slider,
  .bp-resa-hint,
  .me-currency-btn-group,
  .section-count { display: none !important; }
  /* En-tete PDF */
  .bp-print-header {
    display: block;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 2px solid #1a1a1a;
  }
  .bp-print-brand {
    display: block;
    font-family: var(--font-display, Georgia, serif);
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
  }
  .bp-print-doc {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 2px;
  }
  .bp-print-meta {
    display: block;
    font-size: 11px;
    color: #555;
    margin-top: 2px;
  }
  /* Layout single-column pour le PDF */
  .bp-wrap {
    display: block !important;
    gap: 0 !important;
  }
  .bp-inputs,
  .bp-outputs {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bp-inputs { margin-bottom: 18px; }
  /* Les number inputs restent lisibles, sans bordure lourde */
  .bp-number,
  .bp-prix-input,
  .bp-charge-field input,
  .bp-redev-select {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Le tableau mensuel ne doit pas etre coupe : hauteur libre */
  .bp-monthly-table-wrap {
    max-height: none !important;
    overflow: visible !important;
  }
  .bp-kpi,
  .bp-proj,
  .bp-monthly-wrap,
  .bp-chart-wrap { break-inside: avoid; }
  /* Force les couleurs a l'impression (sinon navigateurs les retirent) */
  .bp-print-root {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =========================================================
   BRICK ROOM - section commande Ivazio Bordeaux (V=453)
   Tuile + vue avec catalogue Metabase embarqué + étapes de commande.
   ========================================================= */
.commande-tile-icon--brickroom {
  background: #E7F0FD;
  color: #2E63C7;
}
html[data-theme="dark"] .commande-tile-icon--brickroom {
  background: rgba(110, 164, 255, 0.18);
}
.br-order-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.br-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.br-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary, #6ea4ff);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-code {
  display: inline-block;
  padding: 1px 8px;
  background: #FACE4E;
  color: #1A1A1A;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--font-mono, monospace);
}
.br-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.br-embed-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}
.br-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.br-embed-note {
  font-size: 12px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .br-order-steps { grid-template-columns: 1fr; }
  .br-embed-wrap { height: 80vh; }
}

/* V=489 : étapes réelles d'une commande Cléopâtre + n° BC */
.cs-bc { color: #1f4ea8; }
.cs-etapes {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-etape {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: #f2f2ee;
  color: #8a8a85;
}
.cs-etape small { font-size: 11px; }
.cs-etape--done { background: #e0f5e6; color: #1f6b32; font-weight: 600; }
.cs-admin-statut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  background: #f6f8ff;
  border-radius: 8px;
  font-size: 12.5px;
}
.cs-admin-statut input[type="text"] { width: 110px; }
.cs-retard { color: #b3261e; font-weight: 600; }
.admin-ticket-commande {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #eef4ff;
  border-left: 3px solid #1a73e8;
  border-radius: 6px;
  font-size: 13px;
}
.me-chart-b2b-note {
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  line-height: 1.45;
}
/* V500 : graphe benchmark année 1 / année 2 par centre */
.me-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.me-chart-tab {
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-soft);
  cursor: pointer;
}
.me-chart-tab:hover { border-color: var(--color-primary); }
.me-chart-tab.is-active { color: #fff; font-weight: 600; }
.me-chart-tab--grand.is-active { background: #5B3FC4; border-color: #5B3FC4; }
.me-chart-tab--moyen.is-active { background: #2E63C7; border-color: #2E63C7; }
.me-chart-tab--petit.is-active { background: #3E7826; border-color: #3E7826; }
.me-chart-sq {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.me-chart-sq--estime {
  background: transparent;
  border: 1px dashed;
}
.me-chart-totaux {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-text-soft);
}
.me-chart-totaux strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-text);
  margin-left: 4px;
}
.me-chart-evol {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f6de;
  color: #3e7826;
  font-weight: 600;
}
.me-chart-body { position: relative; }
.me-chart-hit { cursor: pointer; }
.me-chart-hit:hover { fill: rgba(30, 40, 70, 0.05); }
.me-chart-legend > span { display: inline-flex; align-items: center; }
.me-chart-totaux small { font-size: 11px; color: var(--color-text-soft); margin-left: 2px; }
.me-chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: 9px 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 30, 60, 0.14);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.me-chart-tip[hidden] { display: none; }
.me-chart-tip strong { font-size: 11px; color: var(--color-text-soft); font-weight: 600; }
.me-chart-tip .me-chart-tip-total { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.me-chart-tip i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}
.me-chart-tip em { font-style: normal; color: var(--color-text-soft); }
.me-chart-tip-jauge {
  display: flex;
  height: 6px;
  margin-top: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: #eef0f5;
}
.me-chart-tip-jauge b { display: block; height: 100%; }

/* ==========================================================================
   Preview mouvement (home) : règles Emil Kowalski / Apple Motion.
   Bloc isolé, supprimable d'un coup. Ne touche que le mouvement, pas la charte.
   - transitions ciblées au lieu de "all", courbe ease-out forte
   - retour au toucher (scale à l'appui) sur boutons et tuiles
   - survol réservé aux pointeurs fins (pas de lift au doigt)
   - entrée douce des tuiles de la home, jamais bloquante
   - prefers-reduced-motion : plus de déplacement, opacité conservée
   ========================================================================== */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

.quick-action,
.resource-card,
.kpi-banner-card {
  transition:
    transform 160ms var(--ease-out-strong),
    box-shadow 160ms var(--ease-out-strong),
    border-color 160ms ease;
}
.btn-primary,
.btn-secondary,
.header-search-btn,
.header-admin-btn {
  transition:
    transform 120ms var(--ease-out-strong),
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.btn-primary:active,
.btn-secondary:active,
.header-search-btn:active,
.header-admin-btn:active {
  transform: scale(0.97);
}
.quick-action:active,
.resource-card:not(.resource-card--locked):not(.resource-card--coming):active,
.kpi-banner-card:active {
  transform: scale(0.985);
  box-shadow: none;
}

/* Pas de lift au survol sur écran tactile (le hover y reste collé après un tap). */
@media (hover: none) {
  .quick-action:hover,
  .resource-card:hover,
  .kpi-banner-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Entrée de la home : fondu + 6px de montée, décalage de 35 ms, 260 ms. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cr-rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .dashboard-main .welcome,
  .dashboard-main .kpi-banner,
  .dashboard-main .dashboard-quick-actions .quick-action,
  .dashboard-main .resources-grid .resource-card {
    animation: cr-rise-in 260ms var(--ease-out-strong) backwards;
  }
  .dashboard-main .kpi-banner { animation-delay: 35ms; }
  .dashboard-main .dashboard-quick-actions .quick-action:nth-child(1) { animation-delay: 70ms; }
  .dashboard-main .dashboard-quick-actions .quick-action:nth-child(2) { animation-delay: 105ms; }
  .dashboard-main .dashboard-quick-actions .quick-action:nth-child(3) { animation-delay: 140ms; }
  .dashboard-main .resources-grid .resource-card:nth-child(1) { animation-delay: 140ms; }
  .dashboard-main .resources-grid .resource-card:nth-child(2) { animation-delay: 175ms; }
  .dashboard-main .resources-grid .resource-card:nth-child(3) { animation-delay: 210ms; }
  .dashboard-main .resources-grid .resource-card:nth-child(4) { animation-delay: 245ms; }
  .dashboard-main .resources-grid .resource-card:nth-child(n+5) { animation-delay: 280ms; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-action:hover,
  .resource-card:hover,
  .kpi-banner-card:hover,
  .quick-action:active,
  .resource-card:active,
  .kpi-banner-card:active,
  .btn-primary:active,
  .btn-secondary:active {
    transform: none;
  }
}

/* ==========================================================================
   Preview "Apple" de la home : matière, profondeur, grande typo, révélation
   au défilement. Bloc isolé (supprimable d'un coup), limité à la home grâce à
   :has(.dash-map-preview). Garde la charte : couleurs, Fraunces et Manrope.
   ========================================================================== */
.dashboard-page:has(.dash-map-preview) {
  --ap-radius: 28px;
  --ap-shadow:
    0 1px 1px rgba(20, 30, 60, 0.04),
    0 6px 12px rgba(20, 30, 60, 0.04),
    0 22px 44px rgba(20, 30, 60, 0.07);
  --ap-shadow-hover:
    0 2px 2px rgba(20, 30, 60, 0.05),
    0 14px 28px rgba(20, 30, 60, 0.09),
    0 40px 80px rgba(20, 30, 60, 0.14);
  background:
    radial-gradient(60% 38% at 10% 0%, rgba(110, 164, 255, 0.26), transparent 70%),
    radial-gradient(50% 34% at 94% 4%, rgba(250, 206, 78, 0.28), transparent 70%),
    radial-gradient(46% 30% at 72% 42%, rgba(250, 100, 87, 0.09), transparent 70%),
    var(--color-bg);
  background-attachment: fixed;

  /* Barre du haut en verre dépoli */
  .app-header {
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(20, 30, 60, 0.07);
    box-shadow: none;
  }

  /* Accueil : très grande typo, sans boîte */
  .welcome {
    background: none;
    border: none;
    box-shadow: none;
    padding: 56px 0 20px;
  }
  .welcome-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--color-text);
    margin: 0;
  }

  /* Ticker LIVE : pastille de verre */
  .cr-pulse-ticker {
    width: fit-content;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(20, 30, 60, 0.06);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(20, 30, 60, 0.05);
    padding: 8px 18px 8px 14px;
  }

  /* Cartes : grands rayons, ombres en couches, plus de bordure */
  .dash-map-card,
  .kpi-banner,
  .fprog-card,
  .quick-action,
  .resource-card {
    border: none;
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
  }
  .dash-map-card { overflow: hidden; }
  .dash-map-leaflet-wrap { border-radius: 20px; overflow: hidden; }
  .kpi-banner { padding: 28px; }
  .fprog-card { padding: 26px; }
  .quick-action { padding: 22px 24px; gap: 18px; }
  .quick-action--hero { padding: 22px 24px; }
  .resource-card { padding: 24px; border-radius: 24px; }

  .quick-action:hover,
  .resource-card:hover,
  .kpi-banner-card:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: var(--ap-shadow-hover);
    border: none;
  }
  .quick-action:active,
  .resource-card:not(.resource-card--locked):not(.resource-card--coming):active {
    transform: scale(0.975);
    box-shadow: var(--ap-shadow);
  }
  .resource-card--locked:hover,
  .resource-card--coming:hover {
    transform: none;
    box-shadow: var(--ap-shadow);
  }

  /* Pictos en squircle teinté */
  .quick-action-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 18px;
    background: rgba(110, 164, 255, 0.14);
    font-size: 28px;
  }
  .quick-action--hero .quick-action-icon { background: rgba(250, 206, 78, 0.28); }
  .resource-icon { border-radius: 16px; }

  /* Titres de section façon éditorial */
  .section { margin-top: 56px; }
  .section-header { align-items: baseline; margin-bottom: 18px; }
  .section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.08;
  }
  .section-count { font-size: 13px; color: var(--color-text-muted); }
  .resource-cluster-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -0.02em;
  }
  .resource-cluster { margin-top: 40px; }

  /* Boutons en capsule */
  .btn-primary,
  .fprog-card .btn-primary,
  .kpi-banner .btn-primary {
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(110, 164, 255, 0.38);
  }
  .btn-primary:hover { box-shadow: 0 10px 24px rgba(110, 164, 255, 0.46); }
}

/* Révélation au défilement (CSS pur, sans JS) : zoom et montée à l'entrée dans l'écran */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ap-reveal {
      from { opacity: 0; transform: translateY(48px) scale(0.95); }
      to { opacity: 1; transform: none; }
    }
    .dashboard-page:has(.dash-map-preview) :is(.dash-map-preview, .kpi-banner, .fprog-section, .dashboard-quick-actions, .resource-cluster) {
      animation: ap-reveal linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .dashboard-page:has(.dash-map-preview) .resource-cluster .resource-card,
    .dashboard-page:has(.dash-map-preview) .dashboard-quick-actions .quick-action {
      animation: none;
    }
    /* Le titre d'accueil s'efface en douceur quand on défile */
    @keyframes ap-hero-out {
      to { opacity: 0; transform: translateY(-28px) scale(0.97); filter: blur(4px); }
    }
    .dashboard-page:has(.dash-map-preview) .welcome-title {
      animation: ap-hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 320px;
    }
  }
}

/* Essai police : pile Apple sur toute la home (supprimable d'un coup). */
.dashboard-page:has(.dash-map-preview),
.dashboard-page:has(.dash-map-preview) * {
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dashboard-page:has(.dash-map-preview) :is(.welcome-title, .section-title, .resource-cluster-title, .dash-map-title) {
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Carte réseau de la home : texte épuré (sans emoji), badge discret, chiffres lisibles */
.dashboard-page:has(.dash-map-preview) {
  .dash-map-content {
    padding: 4px 2px 2px;
    gap: 14px;
  }
  .dash-map-title {
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .dash-map-kicker {
    background: rgba(250, 206, 78, 0.28);
    color: #7a5200;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 12px;
  }
  .dash-map-sub {
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }
  .dash-map-legend { gap: 10px 22px; margin-top: 2px; }
  .dash-map-legend-item { font-size: 14px; gap: 7px; }
  .dash-map-legend-item strong {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .dash-map-dot { width: 8px; height: 8px; }
  .dash-map-cta { font-size: 15px; font-weight: 600; margin-top: 2px; color: var(--color-primary-dark); }
}

/* Reste de la home : icônes en trait, badges discrets, ticker sans emoji */
.dashboard-page:has(.dash-map-preview) {
  /* Pictos d'actions rapides et de bandeau KPI en trait, teintés */
  .quick-action-icon { color: var(--color-primary-dark); }
  .quick-action--hero .quick-action-icon { color: var(--color-warm-dark); }
  .quick-action-icon svg { width: 26px; height: 26px; }
  .kpi-banner-empty-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-primary-dark);
    box-shadow: 0 4px 14px rgba(20, 30, 60, 0.06);
  }
  .kpi-banner-empty-icon svg { width: 28px; height: 28px; }
  .kpi-banner-empty-text h2 { font-size: clamp(20px, 2.2vw, 24px); }

  /* Ticker LIVE : texte seul, sans emoji */
  .cr-pulse-emoji { display: none; }

  /* Badges : pastilles douces, sans majuscules */
  .resource-coming-badge {
    background: rgba(26, 26, 26, 0.07);
    color: rgba(26, 26, 26, 0.62);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 10px;
  }
  .resource-addon {
    background: rgba(250, 206, 78, 0.3);
    color: #7a5200;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 4px 10px;
    top: 12px;
    right: 12px;
  }

  /* Cartes ressources : même rythme d'espacement partout */
  .resource-card { gap: 2px; }
  .resource-icon { margin-bottom: 14px; }
  .resource-cluster-head { margin-bottom: 16px; }
}
.dashboard-page:has(.dash-map-preview) .resource-cluster-head { padding-inline: 0; margin-inline: 0; }

/* Actions rapides façon cartes Apple Store : picto en trait sans fond, au-dessus du texte */
.dashboard-page:has(.dash-map-preview) {
  .dashboard-quick-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .quick-action {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 22px;
    min-height: 150px;
    padding: 26px 26px 24px;
  }
  .quick-action--hero { padding: 26px 26px 24px; gap: 22px; }
  .quick-action-icon,
  .quick-action--hero .quick-action-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: block;
  }
  .quick-action-icon svg { width: 34px; height: 34px; stroke-width: 1.6; }
  .quick-action-body { gap: 4px; }
}

/* Cartes Ressources : même picto en trait sans fond que les actions rapides */
.dashboard-page:has(.dash-map-preview) {
  .resource-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .resource-icon svg { width: 34px; height: 34px; stroke-width: 1.6; }
}

/* ==========================================================================
   Style Apple, socle commun à toutes les pages (:is(.dashboard-page, .page)) : fond,
   header en verre, titre de page, cartes, boutons, champs, police.
   La home garde ses règles propres (bloc plus haut, plus spécifique).
   Bloc isolé, supprimable d'un coup.
   ========================================================================== */
:root {
  --ap-shadow-soft:
    0 1px 1px rgba(20, 30, 60, 0.04),
    0 4px 10px rgba(20, 30, 60, 0.04),
    0 14px 30px rgba(20, 30, 60, 0.06);
  --ap-shadow-line: 0 1px 2px rgba(20, 30, 60, 0.05), 0 4px 14px rgba(20, 30, 60, 0.05);
  --ap-font: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:is(.dashboard-page, .page) {
  background:
    radial-gradient(60% 34% at 10% 0%, rgba(110, 164, 255, 0.2), transparent 70%),
    radial-gradient(50% 30% at 94% 4%, rgba(250, 206, 78, 0.22), transparent 70%),
    var(--color-bg);
  background-attachment: fixed;

  .app-header {
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(20, 30, 60, 0.07);
    box-shadow: none;
  }

  /* Titre de page : grand, sans boîte grise */
  .welcome {
    background: none;
    border: none;
    box-shadow: none;
    padding: 36px 0 12px;
  }
  .welcome-title {
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-text);
    margin: 0;
    text-wrap: balance;
  }
  .welcome-sub {
    font-size: 17px;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 62ch;
    margin-top: 10px;
  }
  .section-title { font-weight: 400; letter-spacing: -0.025em; }

  /* Cartes : grands rayons, plus de bordure, ombre douce */
  :is(.mk-kit-card, .team-card, .cat-block, .profil-block, .kpi-card, .part-card, .mat-section,
      .email-template, .commande-tile, .kit-vitrine-card, .com-canal-card, .com-pb-formule,
      .commande-adresse, .flesson-row, .fprog-card) {
    border: none;
    border-radius: 22px;
    box-shadow: var(--ap-shadow-soft);
  }
  .commande-tile--primary { box-shadow: 0 0 0 1.5px var(--color-primary), var(--ap-shadow-soft); }
  /* Listes denses (presse, catalogue, urgence) : rayon plus fin, ombre légère */
  :is(.presse-card, .mat-card, .urg-row) {
    border: none;
    border-radius: 16px;
    box-shadow: var(--ap-shadow-line);
  }

  /* Boutons en capsule */
  .btn-primary {
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(110, 164, 255, 0.34);
  }
  .btn-secondary { border-radius: 999px; font-weight: 600; }

  /* Champs : coins plus doux */
  :is(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
    border-radius: 12px;
  }
}

/* Police Apple sur toutes les pages (hors blocs de code) */
:is(.dashboard-page, .page),
:is(.dashboard-page, .page) *:not(code, pre, kbd, samp) {
  font-family: var(--ap-font);
}

/* Les polices de l'interface passent par ces variables : on les redirige vers la pile Apple */
:is(.dashboard-page, .page) {
  --font-display: var(--ap-font);
  --font-body: var(--ap-font);

  /* Kicker "1er réseau mondial" : pastille douce comme sur la home */
  .page-kicker--leader {
    background: rgba(250, 206, 78, 0.28);
    color: #7a5200;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
  }
  .mk-audience-section { border-radius: 24px; box-shadow: var(--ap-shadow-soft); border: none; }
}

/* Pages à structure ".page" (Réseau, Presse, Profil...) : titre de page */
.page {
  .page-header { padding: 28px 0 10px; }
  .page-title {
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-text);
    text-wrap: balance;
  }
  .page-appartenance {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: var(--color-text);
  }
  .page-sub {
    font-size: 17px;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 62ch;
  }
}

/* Pictos des tuiles Centrale d'achat : même trait sans fond que la home */
:is(.dashboard-page, .page) .commande-tile-icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: block;
  margin-bottom: 18px;
}
:is(.dashboard-page, .page) .commande-tile-icon svg { width: 34px; height: 34px; stroke-width: 1.6; }

/* ==========================================================================
   Densité standard (zoom 100 %) : titres, cartes, marges et boutons plus
   compacts, pour voir plus de contenu avant de défiler. Dernier bloc du
   fichier, donc prioritaire sur les blocs Apple plus haut. Supprimable.
   ========================================================================== */
:is(.dashboard-page, .page) {
  .app-header-inner { padding-top: 8px; padding-bottom: 8px; }
  .dashboard-main, main.main { padding-top: 10px; }

  .welcome { padding: 14px 0 6px; }
  .welcome-title, .page-title {
    font-size: clamp(24px, 2.1vw, 30px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
  }
  .welcome-sub, .page-sub { font-size: 14px; line-height: 1.4; margin-top: 4px; }
  .page-header { padding: 10px 0 6px; }
  .page-appartenance { font-size: 15px; }

  .section { margin-top: 24px; }
  .section-header { margin-bottom: 10px; }
  .section-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
  .section-count { font-size: 12px; }

  .btn-primary { padding: 9px 18px; font-size: 14px; box-shadow: 0 3px 10px rgba(110, 164, 255, 0.28); }
  .btn-secondary { padding: 8px 16px; font-size: 14px; }
}

/* Home */
.dashboard-page:has(.dash-map-preview) {
  --ap-radius: 18px;

  .welcome { padding: 16px 0 4px; }
  .welcome-title { font-size: clamp(26px, 2.3vw, 34px); }
  .welcome-sub { font-size: 13px; margin-top: 2px; }
  .cr-pulse-ticker { padding: 4px 12px 4px 10px; font-size: 12.5px; margin: 6px 0 10px; }

  /* Carte réseau */
  .dash-map-card { grid-template-columns: minmax(240px, 320px) 1fr; gap: 18px; padding: 10px; border-radius: 18px; }
  .dash-map-leaflet-wrap, .dash-map-leaflet { min-height: 168px; }
  .dash-map-leaflet-wrap { border-radius: 12px; }
  .dash-map-content { gap: 7px; padding: 2px 4px 2px 0; }
  .dash-map-title { font-size: 20px; }
  .dash-map-kicker { font-size: 12px; padding: 3px 10px; }
  .dash-map-sub { font-size: 13px; }
  .dash-map-legend { gap: 6px 16px; margin-top: 0; }
  .dash-map-legend-item { font-size: 13px; }
  .dash-map-legend-item strong { font-size: 16px; }
  .dash-map-cta { font-size: 13px; margin-top: 0; }

  /* Bandeau KPI */
  .kpi-banner { padding: 12px 16px; margin-top: 10px; }
  .kpi-banner-empty-inner { gap: 12px; flex-wrap: nowrap; }
  .kpi-banner-empty-icon { width: 40px; height: 40px; border-radius: 12px; }
  .kpi-banner-empty-icon svg { width: 20px; height: 20px; }
  .kpi-banner-empty-text { min-width: 0; }
  .kpi-banner-empty-text h2, .kpi-banner h2 { font-size: 16px; margin: 0 0 2px; }
  .kpi-banner-empty-text p { font-size: 13px; }
  .kpi-banner-cta { width: auto; white-space: nowrap; padding: 8px 18px; font-size: 13.5px; }

  /* Formation */
  .fprog-card { padding: 12px 16px; }
  .fprog-desc { font-size: 14px; }
  .fprog-percent { font-size: 28px; }
  .fprog-card .btn-primary { padding: 8px 18px; font-size: 13.5px; }

  /* Actions rapides : une ligne chacune */
  .dashboard-quick-actions { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 12px 0 4px; }
  .quick-action, .quick-action--hero {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
  }
  .quick-action-icon svg { width: 22px; height: 22px; }
  .quick-action-body { gap: 1px; }
  .quick-action-body strong, .quick-action--hero .quick-action-body strong { font-size: 14px; }
  .quick-action-body span, .quick-action--hero .quick-action-body span { font-size: 12.5px; line-height: 1.35; }

  /* Ressources */
  .resource-cluster { margin-top: 20px; }
  .resource-cluster-head { margin-bottom: 10px; }
  .resource-cluster-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .resource-cluster-sub { font-size: 13px; }
  .resources-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .resource-card { min-height: 0; padding: 14px 16px; border-radius: 18px; }
  .resource-icon { margin-bottom: 10px; }
  .resource-icon svg { width: 24px; height: 24px; }
  .resource-name { font-size: 14.5px; margin-bottom: 2px; }
  .resource-desc { font-size: 12.5px; line-height: 1.4; }
  .resource-coming-badge, .resource-addon { top: 10px; right: 10px; font-size: 11px; padding: 3px 9px; }
}

/* Révélation plus discrète */
@keyframes ap-reveal-compact {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dashboard-page:has(.dash-map-preview) :is(.dash-map-preview, .kpi-banner, .fprog-section, .dashboard-quick-actions, .resource-cluster) {
      animation-name: ap-reveal-compact;
    }
  }
}

/* Cartes des autres pages : même rythme resserré */
:is(.dashboard-page, .page) :is(.mk-kit-card, .team-card, .cat-block, .profil-block, .kpi-card, .part-card, .mat-section, .email-template, .commande-tile, .kit-vitrine-card, .com-canal-card, .com-pb-formule, .commande-adresse, .flesson-row, .fprog-card) {
  border-radius: 18px;
}

.dashboard-page:has(.dash-map-preview) {
  .section { margin-top: 20px; }
  .section-header { margin-bottom: 8px; }
  .section-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
}

/* Carte réseau de la home : vrai bouton en capsule + survol cohérent avec les autres blocs */
.dashboard-page:has(.dash-map-preview) {
  .dash-map-card {
    transition: transform 200ms var(--ease-out-strong), box-shadow 200ms var(--ease-out-strong);
  }
  .dash-map-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(110, 164, 255, 0.34);
    transition:
      transform 140ms var(--ease-out-strong),
      box-shadow 140ms var(--ease-out-strong),
      background-color 140ms ease;
  }
  .dash-map-cta:active { transform: scale(0.97); }
  @media (hover: hover) and (pointer: fine) {
    .dash-map-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--ap-shadow-hover);
      border-color: transparent;
    }
    .dash-map-cta:hover {
      background: var(--color-primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(110, 164, 255, 0.46);
      text-decoration: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-page:has(.dash-map-preview) :is(.dash-map-card, .dash-map-cta):is(:hover, :active) { transform: none; }
}

/* ==========================================================================
   Survol des cartes cliquables : l'effet de « Mes KPI » partout (accueil et
   pages) = soulèvement de 5 px, léger zoom, ombre large, retour à l'appui.
   Cartes désactivées (Arrive bientôt, verrouillées, vides) exclues.
   ========================================================================== */
:root {
  --ap-shadow-hover:
    0 2px 2px rgba(20, 30, 60, 0.05),
    0 14px 28px rgba(20, 30, 60, 0.09),
    0 40px 80px rgba(20, 30, 60, 0.14);
}
:is(.dashboard-page, .page) :is(
  .quick-action,
  .resource-card:not(.resource-card--locked, .resource-card--coming),
  .kpi-banner-card,
  .commande-tile,
  .mk-kit-card,
  .mk-subnav-card:not(.mk-subnav-card--empty),
  .mk-audience-card--link,
  .flesson-row:not(.flesson-row--locked)
) {
  transition:
    transform 160ms var(--ease-out-strong),
    box-shadow 160ms var(--ease-out-strong),
    border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.dashboard-page, .page) :is(
    .quick-action,
    .resource-card:not(.resource-card--locked, .resource-card--coming),
    .kpi-banner-card,
    .commande-tile,
    .mk-kit-card,
    .mk-subnav-card:not(.mk-subnav-card--empty),
    .mk-audience-card--link
  ):hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: var(--ap-shadow-hover);
  }
  /* Lignes pleine largeur : même soulèvement et même ombre, sans zoom */
  :is(.dashboard-page, .page) .flesson-row:not(.flesson-row--locked):hover {
    transform: translateY(-3px);
    box-shadow: var(--ap-shadow-hover);
  }
}
:is(.dashboard-page, .page) :is(
  .quick-action,
  .resource-card:not(.resource-card--locked, .resource-card--coming),
  .kpi-banner-card,
  .commande-tile,
  .mk-kit-card,
  .mk-subnav-card:not(.mk-subnav-card--empty),
  .mk-audience-card--link,
  .flesson-row:not(.flesson-row--locked)
):active {
  transform: scale(0.985);
  box-shadow: var(--ap-shadow-soft);
}
@media (prefers-reduced-motion: reduce) {
  :is(.dashboard-page, .page) :is(.quick-action, .resource-card, .kpi-banner-card, .commande-tile, .mk-kit-card, .mk-subnav-card, .mk-audience-card--link, .flesson-row):is(:hover, :active) {
    transform: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  :is(.dashboard-page, .page) .commande-tile.commande-tile--primary:hover {
    box-shadow: 0 0 0 1.5px var(--color-primary), var(--ap-shadow-hover);
  }
}

/* Mini-carte de la home : plus grande, cadrée sur l'Europe */
.dashboard-page:has(.dash-map-preview) {
  .dash-map-card { grid-template-columns: minmax(300px, 440px) 1fr; }
  .dash-map-leaflet-wrap, .dash-map-leaflet { min-height: 236px; }
}
@media (max-width: 720px) {
  .dashboard-page:has(.dash-map-preview) .dash-map-card { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Échelle typographique unique (toutes les vues, tous les profils).
   Huit tailles seulement, réglées par variables : titre de page, chapeau,
   titre de section, titre de carte, corps, texte secondaire, note, badge.
   Le préfixe :is(..., #cr-typo) donne à ce bloc la priorité sur les blocs
   Apple et compacts plus haut (ils restent en place pour le reste du style).
   Limité à l'écran : l'impression des fiches garde ses propres tailles.
   ========================================================================== */
:root {
  --t-title: 26px;
  --t-lead: 16px;
  --t-section: 20px;
  --t-card: 17px;
  --t-body: 15px;
  --t-small: 14px;
  --t-note: 13px;
  --t-caption: 12px;
  --t-btn: 14.5px;
}
@media (max-width: 720px) {
  :root {
    --t-title: 23px;
    --t-lead: 15px;
    --t-section: 18px;
    --t-card: 16px;
  }
}

@media screen {
  :is(.dashboard-page, .page, #cr-typo) {
    /* Titre de page */
    :is(.welcome-title, .page-title) {
      font-size: var(--t-title);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.025em;
      margin-bottom: 0;
    }

    /* Page Concept (vitrine) : bandeau et sections un cran au-dessus, même graisse */
    .concept-hero-title { font-size: calc(var(--t-title) + 8px); line-height: 1.15; letter-spacing: -0.025em; }
    :is(.concept-section-title, .concept-cta-title) {
      font-size: calc(var(--t-section) + 4px);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    /* Chapeau sous le titre */
    :is(.welcome-sub, .page-sub) {
      font-size: var(--t-lead);
      line-height: 1.45;
      margin-top: 6px;
    }
    .page-appartenance { font-size: var(--t-lead); line-height: 1.45; margin-top: 6px; }

    /* Titres de section */
    :is(.section-title, .dash-map-title, .part-section-title,
        .plat-section-title, .adm-section-titre, .mk-audience-title, .actu-titre,
        .urg-section-title, .op-section-title h3, .me-licence-body > h2, .me-preview-intro h2,
        .me-nda-cta > h2, .plat-detail-h2, .plat-drawer-nom, .cat-ro-cta h2) {
      font-size: var(--t-section);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    /* Titres de carte */
    :is(.resource-cluster-title, .resource-name, .quick-action-body strong, .mk-subnav-body strong, .commande-tile-title, .flesson-title,
        .op-fiche-nom, .kpi-setup-title, .kpi-label, .presse-media, .profil-block-head h2,
        .prospect-banner-title, .kpi-banner h2, .kpi-banner-empty-text h2, .part-nom,
        .plat-tile-nom, .mat-section-title, .mat-card-title, .cs-title, .cat-title,
        .cat-ro-cat-title, .mk-role-title, .mk-kit-title, .kit-vitrine-title, .txc-group-title,
        .com-speed-title, .com-canal-title, .com-pb-formule-title, .email-template-title,
        .prospection-etape-titre, .adm-doc-titre, .team-name, .ticket-history-heading,
        .timeline-step-title, .urg-fourn-name, .urg-row-nom, .part-card-title, .part-cta-title,
        .changelog-title, .rh-banner-title, .rh-card-title, .rh-contract-title,
        .rh-conv-hero-title, .concept-pilier-title, .concept-valeur-title,
        .concept-raison-title, .concept-avantage-title, .concept-process-title,
        .concept-team-name, .commande-adresse-header h3, .rh-contract-h3, .cat-ro-info-body h3) {
      font-size: var(--t-card);
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    /* Intertitres dans une carte : taille du corps, en gras */
    :is(.com-pb-section h4, .com-pb-step-title, .rh-contract-h4, .rh-subtitle-compact,
        .me-licence-zones-title, .bp-subsection, .txc-label) {
      font-size: var(--t-body);
      font-weight: 600;
      line-height: 1.35;
    }
    /* Surtitres en petites capitales */
    :is(.cs-subtitle, .cs-tl-title, .cs-cmd-cat h4, .kit-vitrine-section-title, .me-chart-title) {
      font-size: var(--t-caption);
    }

    /* Corps */
    :is(.prospect-banner-text, .actu-resume, .kpi-history-empty, .profil-docs-empty) {
      font-size: var(--t-body);
      line-height: 1.5;
    }

    /* Texte secondaire (descriptions de cartes, légendes) */
    :is(.resource-desc, .quick-action-body span, .mk-subnav-body span, .commande-tile-desc, .op-fiche-desc,
        .op-section-desc, .dash-map-sub, .dash-map-legend-item, .fprog-desc, .fprog-summary,
        .resource-cluster-sub, .kpi-banner-empty-text p, .kpi-banner p, .profil-block-sub,
        .kpi-setup-sub, .kpi-target-label, .part-desc, .prospect-banner-cta, .cr-pulse-ticker,
        .carte-footer-note, .mk-audience-sub, .mk-role-desc, .mk-kit-desc, .txc-intro,
        .com-speed-tip, .com-canal-desc, .com-pb-formule-desc, .com-pb-step-desc, .email-step-desc,
        .adm-point-detail, .urg-fourn-desc, .timeline-step-desc, .rh-contract-sub, .rh-contract-cas,
        .rh-collapse-intro, .team-resp, .cs-info) {
      font-size: var(--t-small);
      line-height: 1.45;
    }

    /* Notes, mentions, méta (jamais sous 13 px) */
    :is(.flesson-meta, .cs-cmd-notes, .mat-liens-note, .mat-card-comment, .urg-row-notes, .kpi-tip p,
        .kit-vitrine-amazon-note, .txc-hint, .email-template-usage, .adm-doc-meta, .adm-doc-disclaimer,
        .part-galaxy-hint, .ticket-priority-desc, .rh-welcome-disclaimer, .rh-meta-secondary,
        .rh-saas-sub, .me-licence-zones-duree, .me-chart-b2b-note, .me-chart-seasonality,
        .me-disclaimer) {
      font-size: var(--t-note);
      line-height: 1.45;
    }
    .dash-map-legend-item strong { font-size: var(--t-card); }

    /* Badges et pastilles */
    :is(.resource-coming-badge, .resource-addon, .dash-map-kicker, .page-kicker,
        .kpi-auto-badge, .actu-badge-new, .section-count, .plat-tile-cout, .rh-contract-meta-chip) {
      font-size: var(--t-caption);
    }
    .cr-pulse-label { font-size: 11px; }

    /* Boutons */
    :is(.btn-primary, .btn-secondary, .dash-map-cta, .kpi-banner-cta, .fprog-cta):not(.btn-small) {
      font-size: var(--t-btn);
    }
  }
}