/* ObsoStop Theme Variables - Phase 1 Foundation
   These are the default values, overridden by JS from site_config API.
   New code should use var(--primary), var(--secondary), etc. */
:root {
  --primary: #4836ed;
  --primary-rgb: 72,54,237;
  --secondary: #7273f9;
  --secondary-rgb: 114,115,249;
  --accent: #4ade80;
  --accent-rgb: 74,222,128;
  --success: #22c55e;
  --success-rgb: 34,197,94;
  --success-light: #86efac;
  --danger: #ef4444;
  --danger-rgb: 239,68,68;
  --danger-light: #fca5a5;
  --warning: #f59e0b;
  --warning-rgb: 245,158,11;
  --warning-light: #fde68a;
  --bg: #1a1a2e;
  --bg-deep: #141425;
  --bg-card: #2a2a40;
  --bg-hover: #32324e;
  --bg-alt: #1e1e32;
  --bg-tinted: #f0f0f8;
  --text: #ffffff;
  --text-primary: var(--text);
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --border: #2a2a40;
  --overlay-rgb: 255,255,255;
  --border-dark: rgba(var(--overlay-rgb),0.08);
  --gold: #facc15;
  --cyan: #06b6d4;
  --info: #60a5fa;
  --info-rgb: 96,165,250;
  --info-light: #93c5fd;
  --pink: #ec4899;
  --pink-rgb: 236,72,153;
  --violet: #8b5cf6;
  --violet-rgb: 139,92,246;
  --discord: #5865F2;
  --discord-hover: #4752C4;
  --code-highlight: #d63384;
  --violet-light: var(--secondary);
  --bg-surface: var(--bg-alt);
  --border-warm: var(--border);
  --font: Arial, sans-serif;

  /* Typography scale */
  --fs-2xs: 0.68rem;
  --fs-xs: 0.72rem;
  --fs-sm: 0.78rem;
  --fs-base: 0.85rem;
  --fs-md: 0.92rem;
  --fs-lg: 1rem;
  --fs-xl: 1.15rem;
  --fs-2xl: 1.3rem;
  --fs-3xl: 1.8rem;
  --fs-4xl: 2.5rem;

  /* Spacing scale */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-8: 24px;
  --sp-10: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Border radius */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 99px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.2);

  /* Button tokens */
  --btn-text: #ffffff;
  --btn-text-secondary: var(--secondary);
  --btn-text-ghost: var(--text);
  --btn-radius: var(--radius);
  --btn-font: var(--fs-base);
  --btn-padding: 0.5rem 1rem;
  --btn-padding-sm: 0.375rem 0.75rem;
  --btn-padding-lg: 0.75rem 1.5rem;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, var(--font)); }

/* ═══════════════════════════════════════════
   BUTTON SYSTEM — Base commune
   Tous les éléments avec "btn" dans leur classe
   héritent de ces propriétés de base.
   Les classes individuelles ne définissent que
   couleurs et padding spécifiques.
   ═══════════════════════════════════════════ */
.btn,
button[class*="btn-"],
a[class*="btn-"],
button[class*="-btn"],
a[class*="-btn"] {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: var(--btn-radius);
  cursor: pointer;
  border: none;
  transition: opacity 0.18s, background 0.18s, transform 0.1s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.4;
}
.btn:active,
button[class*="btn-"]:active,
a[class*="btn-"]:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); color: var(--btn-text); padding: var(--btn-padding); }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { background: rgba(var(--secondary-rgb), 0.12); color: var(--secondary); border: 1px solid rgba(var(--secondary-rgb), 0.3); padding: var(--btn-padding); }
.btn-secondary:hover { background: rgba(var(--secondary-rgb), 0.22); }
.btn-danger { background: rgba(var(--danger-rgb), 0.1); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.3); padding: var(--btn-padding); }
.btn-danger:hover { background: rgba(var(--danger-rgb), 0.2); }
.btn-success { background: rgba(var(--success-rgb), 0.1); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.3); padding: var(--btn-padding); }
.btn-success:hover { background: rgba(var(--success-rgb), 0.2); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(var(--overlay-rgb), 0.15); padding: var(--btn-padding); }
.btn-ghost:hover { background: rgba(var(--overlay-rgb), 0.06); }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: var(--btn-padding); }
.btn-outline:hover { background: rgba(var(--primary-rgb), 0.08); }
.btn-sm { font-size: var(--fs-sm); padding: var(--btn-padding-sm); }
.btn-lg { font-size: var(--fs-lg); padding: var(--btn-padding-lg); }
.btn-full { width: 100%; }
.btn-icon { padding: 8px; min-width: 36px; min-height: 36px; }







/* obso-utils.css - Classes utilitaires dynamiques (couleurs, fonds, bordures)
   Toutes les couleurs passent par les CSS variables configurables dans l'admin.
   Support theme clair/sombre automatique. */

/* === TEXTE === */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-accent { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: rgba(var(--overlay-rgb),0.5) !important; }
.text-body { color: var(--text, #fff) !important; }
.text-cyan { color: var(--cyan, var(--info)) !important; }
.text-violet-light { color: var(--violet-light, var(--primary)) !important; }
.text-gold { color: var(--gold, var(--warning)) !important; }
.text-white { color: #fff !important; }

/* === FOND === */
.bg-primary { background: var(--primary) !important; }
.bg-secondary { background: var(--secondary) !important; }
.bg-accent { background: var(--success) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-warning { background: var(--warning) !important; }
.bg-page { background: var(--bg) !important; }
.bg-card { background: var(--bg-card) !important; }
.bg-subtle { background: rgba(var(--overlay-rgb),0.04) !important; }

/* Fonds légers (pour badges, tags, hover) */
.bg-primary-soft { background: rgba(var(--primary-rgb),0.12) !important; }
.bg-secondary-soft { background: rgba(var(--secondary-rgb),0.12) !important; }
.bg-accent-soft { background: rgba(var(--success-rgb),0.12) !important; }
.bg-danger-soft { background: rgba(var(--danger-rgb),0.12) !important; }
.bg-warning-soft { background: rgba(var(--warning-rgb),0.12) !important; }

/* === BORDURES === */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-accent { border-color: var(--success) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-subtle { border-color: rgba(var(--overlay-rgb),0.08) !important; }

/* === BADGES === */
.badge-primary { background: rgba(var(--primary-rgb),0.15); color: var(--primary); padding: 0.125rem 0.5rem; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight: 600; }
.badge-secondary { background: rgba(var(--secondary-rgb),0.15); color: var(--secondary); padding: 0.125rem 0.5rem; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight: 600; }
.badge-accent { background: rgba(var(--success-rgb),0.15); color: var(--success); padding: 0.125rem 0.5rem; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight: 600; }
.badge-danger { background: rgba(var(--danger-rgb),0.15); color: var(--danger); padding: 0.125rem 0.5rem; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight: 600; }
.badge-warning { background: rgba(var(--warning-rgb),0.15); color: var(--warning); padding: 0.125rem 0.5rem; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight: 600; }

/* === BOUTONS === */
.btn-primary-fill { background: var(--primary); color: var(--btn-text); border: none; padding: 0.5rem 1rem; border-radius: var(--radius, 8px); font-weight: 600; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
.btn-primary-fill:hover { filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25); }
.btn-primary-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 0.5rem 1rem; border-radius: var(--radius, 8px); font-weight: 600; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.btn-primary-outline:hover { background: rgba(var(--primary-rgb), 0.08); transform: translateY(-1px); }
.btn-accent-fill { background: var(--success); color: var(--btn-text); border: none; padding: 0.5rem 1rem; border-radius: var(--radius, 8px); font-weight: 600; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
.btn-accent-fill:hover { filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25); }
.btn-danger-fill { background: var(--danger); color: var(--btn-text); border: none; padding: 0.5rem 1rem; border-radius: var(--radius, 8px); font-weight: 600; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
.btn-danger-fill:hover { filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--danger-rgb), 0.25); }
.btn-primary-fill:active, .btn-primary-outline:active, .btn-accent-fill:active, .btn-danger-fill:active { transform: scale(0.97); }
.btn-primary-fill:disabled, .btn-primary-outline:disabled, .btn-accent-fill:disabled, .btn-danger-fill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btn-primary-fill:focus-visible, .btn-primary-outline:focus-visible, .btn-accent-fill:focus-visible, .btn-danger-fill:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* === UTILITAIRES LAYOUT === */
.gap-8 { gap: 0.5rem; }
.gap-16 { gap: 1rem; }
.rounded { border-radius: var(--radius, 8px); }
.rounded-full { border-radius:var(--radius-full); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: var(--fs-base); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-xl); }
.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }

/* Extra spacing */
.mb-24 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.125rem; }
.mt-4 { margin-top: 0.25rem; }
.mt-12 { margin-top: 0.75rem; }
.mt-14 { margin-top: 0.875rem; }
.mt-16 { margin-top: 1rem; }
.mt-20 { margin-top: 1.25rem; }
.gap-10 { gap: 0.625rem; }
.gap-18 { gap: 1.125rem; }
.gap-20 { gap: 1.25rem; }
.gap-24 { gap: 1.5rem; }

/* Flex utilities */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.self-start { align-self: flex-start; }
.w-full { width: 100%; }
.whitespace-nowrap { white-space: nowrap; }
.font-mono { font-family: var(--font-mono); }

/* Display */
.d-grid { display: grid; }

/* Text sizes */
.text-2xl { font-size: var(--fs-3xl); }

/* Visibility hidden (for body flash prevention) */
.visibility-hidden { visibility: hidden; }

/* ══════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM - Single source of truth
   All button aliases map to 6 types. Colors from CSS vars → admin.
   ══════════════════════════════════════════════════════════════ */

/* === PRIMARY: fond primary, texte blanc === */
.btn-primary, .btn-dash-primary, .btn-nav-cta,
.btn-save, .btn-terrain, .admin-btn-add, .cfg-btn-save,
.btn-discord, .btn-inscrire, .footer-newsletter-btn, .btn-confirm,
.btn-accept, .btn-go, .btn-submit, .btn-done {
  background: var(--primary) !important;
  color: var(--btn-text) !important;
  border: none !important;
}

/* === SECONDARY: fond léger, texte secondary === */
.btn-secondary, .btn-dash-secondary,
.btn-add, .btn-preview, .btn-violet {
  background: rgba(var(--secondary-rgb), 0.12) !important;
  color: var(--btn-text-secondary) !important;
  border: 1px solid rgba(var(--secondary-rgb), 0.25) !important;
}

/* === GHOST: transparent, bordure, texte courant === */
.btn-ghost, .btn-cancel, .btn-edit, .btn-export,
.btn-back, .btn-retour, .btn-skip, .btn-reset,
.btn-next, .btn-prev, .btn-prev-c, .btn-next-c {
  background: transparent !important;
  color: var(--btn-text-ghost) !important;
  border: 1px solid var(--border) !important;
}

/* === DANGER: fond rouge léger, texte rouge === */
.btn-danger, .btn-dash-danger,
.btn-delete, .btn-rm, .btn-refuse, .btn-action-red {
  background: rgba(var(--danger-rgb), 0.10) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(var(--danger-rgb), 0.25) !important;
}

/* === SUCCESS: fond vert léger, texte vert === */
.btn-success, .btn-dash-success, .btn-action-green {
  background: rgba(var(--success-rgb), 0.10) !important;
  color: var(--success) !important;
  border: 1px solid rgba(var(--success-rgb), 0.25) !important;
}

/* === WARNING: fond orange léger, texte orange === */
.btn-warning {
  background: rgba(var(--warning-rgb), 0.10) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(var(--warning-rgb), 0.25) !important;
}

/* === SIZE: small === */
.btn-sm {
  padding: 0.3125rem 0.75rem !important;
  font-size: var(--fs-sm) !important;
}

/* === SHARED: transitions + cursor === */
.btn-primary, .btn-dash-primary, .btn-nav-cta,
.btn-ghost, .btn-secondary,
.btn-danger, .btn-dash-danger,
.btn-success, .btn-dash-success,
.btn-warning, .btn-outline,
.btn-save, .btn-cancel, .btn-edit, .btn-add, .btn-delete, .btn-rm,
.btn-export, .btn-back, .btn-retour, .admin-btn-add, .cfg-btn-save,
.btn-terrain, .btn-discord {
  cursor: pointer !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: var(--fs-md) !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: var(--radius, 8px) !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

/* === HOVER === */
/* NOTE: .btn-dash-primary:hover est géré par
   dash-dynamic.js _injectRoleColor() avec la couleur du rôle */
.btn-primary:hover,
.btn-nav-cta:hover, .btn-save:hover, .btn-terrain:hover,
.admin-btn-add:hover, .cfg-btn-save:hover, .btn-discord:hover,
.footer-newsletter-btn:hover,
.ar-params-save:hover, .pp-save-btn:hover,
.ad-btn-add:hover, .obso-modal-btn-primary:hover, .photo-add-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.92) !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25) !important;
  color: var(--btn-text) !important;
}

.btn-ghost:hover, .btn-cancel:hover,
.btn-edit:hover, .btn-export:hover, .btn-back:hover, .btn-retour:hover,
.obso-modal-btn-cancel:hover {
  transform: translateY(-1px) !important;
  background: rgba(var(--overlay-rgb), 0.06) !important;
}

.btn-secondary:hover, .btn-add:hover,
.btn-preview:hover, .btn-violet:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.93) !important;
}

.btn-outline:hover {
  transform: translateY(-1px) !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.15) !important;
}

.btn-danger:hover, .btn-dash-danger:hover,
.btn-delete:hover, .btn-rm:hover, .obso-modal-btn-danger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--danger-rgb), 0.25) !important;
}

.btn-success:hover, .btn-dash-success:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25) !important;
}

.btn-warning:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--warning-rgb), 0.25) !important;
}

/* === ACTIVE (clic) === */
.btn-primary:active, .btn-dash-primary:active,
.btn-ghost:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active,
.btn-warning:active,
.btn-outline:active,
.btn-dash-danger:active, .btn-dash-success:active,
.btn-nav-cta:active, .admin-btn-add:active, .cfg-btn-save:active,
.btn-save:active, .btn-cancel:active, .btn-add:active,
.btn-delete:active, .btn-rm:active, .btn-edit:active,
.btn-export:active, .btn-back:active, .btn-retour:active,
.btn-terrain:active, .btn-discord:active {
  transform: scale(0.97) !important;
}

/* === DISABLED === */
.btn-primary:disabled,
.btn-ghost:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-outline:disabled,
.btn-dash-primary:disabled, .btn-dash-danger:disabled, .btn-dash-success:disabled,
.btn-nav-cta:disabled, .admin-btn-add:disabled, .cfg-btn-save:disabled,
.btn-save:disabled, .btn-cancel:disabled, .btn-edit:disabled,
.btn-add:disabled, .btn-delete:disabled, .btn-rm:disabled,
.btn-export:disabled, .btn-back:disabled, .btn-retour:disabled,
.btn-terrain:disabled, .btn-discord:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* === FOCUS VISIBLE (a11y) === */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-outline:focus-visible,
.btn-dash-primary:focus-visible, .btn-dash-danger:focus-visible, .btn-dash-success:focus-visible,
.btn-nav-cta:focus-visible, .btn-save:focus-visible, .btn-cancel:focus-visible,
.btn-edit:focus-visible, .btn-add:focus-visible, .btn-delete:focus-visible,
.btn-rm:focus-visible, .btn-export:focus-visible, .btn-back:focus-visible,
.btn-retour:focus-visible, .btn-terrain:focus-visible,
.btn-discord:focus-visible, .admin-btn-add:focus-visible, .cfg-btn-save:focus-visible {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 2px !important;
}

/* === STATUS BADGES (aussi texte blanc sur fond) === */
.statut-paid, .statut-emitted, .statut-cancelled, .statut-overdue {
  color: #fff !important;
}

/* === Remove/delete icon button === */
.btn-remove-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--danger-rgb), 0.08);
  color: var(--danger);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.btn-remove-x:hover {
  background: rgba(var(--danger-rgb), 0.2);
  transform: scale(1.1);
}
.btn-remove-x:active {
  transform: scale(0.9);
}

/* ══════════════════════════════════════════════
   UTILITAIRES DISPLAY / SPACING / TEXTE
   ══════════════════════════════════════════════ */

/* Display */
.d-none { display: none; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.text-center { text-align: center; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.justify-between { justify-content: space-between; }
.clickable { cursor: pointer; }

/* Margins - valeurs en rem pour accessibilité */
.m-0 { margin: 0; }
.mb-16 { margin-bottom: 1rem; }
.mb-64 { margin-bottom: 4rem; }
.mt-36 { margin-top: 2.25rem; }
.mt-48 { margin-top: 3rem; }

/* Texte utilitaire */
.label-muted-sm { font-size: var(--fs-base); color: var(--text-muted); }
.tag-optional { font-weight: 400; font-size:var(--fs-base); color: var(--text-muted); }
.tag-dim { font-size: var(--fs-sm); color: var(--text-dim); }
.text-dim-sm { color: var(--text-dim); font-size: var(--fs-base); }
.section-subtitle { color: var(--text-muted); font-size: var(--fs-lg); }
.section-header-center { text-align: center; margin-bottom: 1.875rem; }
.list-unstyled { list-style: none; padding: 0; margin: 0; }

/* Layout utilitaire */
.btn-nowrap { white-space: nowrap; flex-shrink: 0; }
.btn-full-width { width: 100%; }
.btn-modal-sm { font-size: var(--fs-base); padding: 0.5625rem 1.125rem; }
.section-surface { background: var(--bg-surface); }
.content-narrow { max-width: 47.5rem; }

/* Liens */

/* Social */
.social-links--centered { justify-content: center; }
.social-links--inline { display: inline-flex; }

/* Nav user button (connecte) */
.nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius:var(--radius-full);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-user-btn:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-1px);
}
.nav-user-icon { font-size:var(--fs-lg); }
.nav-user-name { font-weight: 700; }
.nav-user-arrow {
  font-size: var(--fs-sm);
  opacity: 0.6;
  transition: transform 0.15s;
}
.nav-user-btn:hover .nav-user-arrow {
  transform: translateX(2px);
  opacity: 1;
}
[data-theme="light"] .nav-user-btn:not(.btn-nav-cta) {
  background: rgba(var(--primary-rgb), 0.08) !important;
  color: var(--primary) !important;
}
[data-theme="light"] .nav-user-btn:not(.btn-nav-cta):hover {
  background: rgba(var(--primary-rgb), 0.15) !important;
}
[data-theme="light"] .nav-links .btn-nav-cta,
[data-theme="light"] .nav-links .btn-nav-cta:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Loading placeholder */
.loading-placeholder {
  text-align: center;
  color: var(--text-dim);
  padding: 2.5rem 0;
  font-family: var(--font);
}

/* ══════════════════════════════════════════════
   ADMIN JS TEMPLATE UTILITIES
   Classes extracted from inline styles in admin JS files
   ══════════════════════════════════════════════ */

/* Loading / empty states — définitions principales dans obso-admin.css */
.admin-empty { text-align: center; padding: 2.5rem; color: var(--text-dim); }
.admin-error { color: var(--danger); }

/* Flex rows (supplement to unified flex utilities above) */
.flex-row { display: flex; gap: 8px; }
.flex-row-center { display: flex; align-items: center; gap: 8px; }
.flex-row-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.align-self-center { align-self: center; }
.nowrap { white-space: nowrap; }
.flex-end { justify-content: flex-end; }

/* Extra margin */
.mr-6 { margin-right: 6px; }

/* Admin section header — définitions principales dans obso-admin.css */

/* Inline form field wrapper & label (admin infra/config) */
.infra-field { margin-bottom: 10px; }
.infra-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; }
.infra-input { width: 100%; padding: 8px 10px; background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); color: var(--text); font-size: var(--fs-base); box-sizing: border-box; }
.infra-input-password { padding-right: 36px; }
.infra-hint { margin-top: 12px; padding: 10px; border-radius:var(--radius); font-size:var(--fs-base); color: var(--text-muted); }
.infra-hint-secondary { background: rgba(var(--secondary-rgb),0.06); }
.infra-hint-warning { background: rgba(var(--warning-rgb),0.06); }

/* Central client form input */
.cc-input { width: 100%; padding: 8px; background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color: var(--text,#fff); font-size: var(--fs-base); margin-bottom: 8px; box-sizing: border-box; }

/* Revenue stat card */
.stat-card { background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); padding: 20px; text-align: center; }
.stat-card-value { font-size: var(--fs-4xl); font-weight: 800; }
.stat-card-label { font-size: var(--fs-base); color: var(--text-dim); }

/* Tarif/plan card */
.plan-card { background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); padding: 20px; }
.plan-card-name { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 8px; }

/* Grid layouts */
.grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }

/* Facture / list item row */
.admin-row-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(var(--overlay-rgb),0.03); border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); }
.admin-row-clickable { cursor: pointer; }
.admin-row-title { font-weight: 600; color: var(--text); }
.admin-row-sub { font-size: var(--fs-sm); color: var(--text-dim); }
.admin-row-price { font-weight: 700; color: var(--violet-light,var(--secondary)); }

/* Small inline badge */
.badge-inline { font-size: var(--fs-sm); padding: 3px 8px; border-radius:var(--radius-sm); }

/* Tag badges for status indicators */
.tag-success { display:inline-block; font-size:var(--fs-xs,0.7rem); padding:2px 8px; border-radius:var(--radius-sm,4px); background:rgba(var(--success-rgb,40,167,69),0.12); color:var(--success,#28a745); font-weight:600; }
.tag-warning { display:inline-block; font-size:var(--fs-xs,0.7rem); padding:2px 8px; border-radius:var(--radius-sm,4px); background:rgba(var(--warning-rgb,255,193,7),0.15); color:var(--warning,#e6a800); font-weight:600; }

/* Section divider line */
.divider-line { height: 1px; background: rgba(var(--overlay-rgb),0.08); margin: 10px 0; }

/* Section label (uppercase dim) */
.section-label-sm { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin: 4px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Info row in detail panels */
.info-block { margin: 12px 0; padding: 12px; background: rgba(var(--secondary-rgb),0.08); border-radius:var(--radius); }

/* Supervision detail section cards */
.sup-section { padding: 14px; border-radius:var(--radius-lg); margin-bottom: 14px; }
.sup-section-header { font-weight: 600; font-size: var(--fs-base); margin: 0 0 8px; padding: 8px 12px; border-radius:var(--radius); }

/* Apparence form field */
.app-field { margin-bottom: 12px; }
.app-field-label { font-size: var(--fs-base); font-weight: 600; }
.app-field-desc { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 6px; }
.app-field-input { width: 100%; padding: 8px; background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color: var(--text,#fff); font-size: var(--fs-base); box-sizing: border-box; }

/* Toggle button / eye button */
.btn-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size:var(--fs-lg); padding: 4px; color: var(--text-muted); }

/* Close panel button */
.btn-close-panel { background: none; border: none; font-size: var(--fs-3xl); cursor: pointer; color: var(--text); }

/* Stripe / CF options label */
.option-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; font-size: var(--fs-base); color: var(--text); }
.option-checkbox { width: 16px; height: 16px; accent-color: var(--success); }

/* Radio card (stripe mode) */

/* Warning memo box */
.warning-box { padding: 10px; background: rgba(var(--warning-rgb),0.08); border: 1px solid rgba(var(--warning-rgb),0.2); border-radius:var(--radius); font-size: var(--fs-base); color: var(--warning); }

/* Border top separator */
.border-top-subtle { border-top: 1px solid rgba(var(--overlay-rgb),0.06); }
.border-top-dim { border-top: 1px solid rgba(var(--overlay-rgb),0.08); }

/* Padding top */
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }

/* Supervision stat mini card */
.sup-stat-card { flex: 1; min-width: 80px; padding: 10px 14px; border-radius:var(--radius); text-align: center; }
.sup-stat-value { font-size: var(--fs-xl); font-weight: 700; }
.sup-stat-label { font-size: var(--fs-xs); color: var(--text-muted); }

/* Module checkbox label (central client form) */
.mod-checkbox-label { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(var(--overlay-rgb),0.03); border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); cursor: pointer; font-size: var(--fs-sm); }

/* Side panel overlay */
.admin-side-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 9000; display: flex; justify-content: flex-end; }
.admin-side-panel { width: min(560px,90vw); height: 100%; background: var(--bg); overflow-y: auto; padding: 24px; box-shadow: var(--shadow-lg); }

/* Panel header row */
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }

/* Flex column detail item rows */
.detail-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(var(--overlay-rgb),0.04); font-size: var(--fs-base); }

/* Position relative wrapper */
.pos-relative { position: relative; }

/* ══════════════════════════════════════════════
   TEMPLATE-STRING UTILITIES - batch 2
   Replaces inline styles in app-renderers, hub-stats, anim-parcours, etc.
   ══════════════════════════════════════════════ */

/* Flex helpers (supplements) */
.flex-center-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center-gap10 { display: flex; align-items: center; gap: 10px; }
.flex-center-gap12 { display: flex; align-items: center; gap: 12px; }
.flex-col-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.flex-wrap-gap8 { display: flex; flex-wrap: wrap; gap: 8px; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1-min0 { flex: 1; min-width: 0; }

/* Text dim variants */
.text-dim-072 { font-size: var(--fs-xs); color: var(--text-dim); }
.text-dim-075 { font-size: var(--fs-sm); color: var(--text-dim); }
.text-dim-078 { font-size: var(--fs-sm); color: var(--text-dim); }
.text-dim-082 { font-size: var(--fs-base); color: var(--text-dim); }
.text-dim-085 { font-size: var(--fs-base); color: var(--text-dim); }
.text-body-bold { font-weight: 700; color: var(--text); }

/* Parcours / accordion blocks */
.parc-block { margin-bottom: 8px; border: 1px solid var(--border); border-radius:var(--radius-lg); overflow: hidden; }
.parc-block-lg { margin-bottom: 10px; border: 1.5px solid var(--border); border-radius:var(--radius-lg); overflow: hidden; }
.parc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; background: rgba(var(--overlay-rgb), 0.02); }
.parc-header-lg { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; background: rgba(var(--overlay-rgb), 0.02); }
.parc-body-hidden { display: none; padding: 10px 14px; border-top: 1px solid var(--border); }
.parc-body-hidden-lg { display: none; padding: 12px 16px; border-top: 1px solid var(--border); }
.parc-section-bg { padding: 12px 16px; background: rgba(var(--secondary-rgb), 0.05); }

/* Progress tracks */
.progress-track { background: rgba(var(--overlay-rgb), 0.08); border-radius:var(--radius-sm); height: 4px; }
.progress-track-pill { height: 4px; background: rgba(var(--overlay-rgb), 0.06); border-radius:var(--radius-full); overflow: hidden; margin-bottom: 12px; }

/* Inline link badges (secondary / danger) */
.inline-badge-secondary { background: rgba(var(--secondary-rgb), 0.1); border: 1px solid rgba(var(--secondary-rgb), 0.3); border-radius:var(--radius); color: var(--secondary); padding: 6px 14px; font-size: var(--fs-base); text-decoration: none; display: inline-block; }
.inline-badge-danger { background: rgba(var(--danger-rgb), 0.1); border: 1px solid rgba(var(--danger-rgb), 0.3); border-radius:var(--radius); color: var(--danger); padding: 6px 14px; font-size: var(--fs-base); text-decoration: none; display: inline-block; }

/* Pill badges (prix / gratuit / places) */
.pill-warning { background: rgba(var(--warning-rgb), 0.12); border: 1px solid rgba(var(--warning-rgb), 0.3); border-radius:var(--radius-full); padding: 3px 10px; font-size: var(--fs-sm); color: var(--warning); }
.pill-success { background: rgba(var(--success-rgb), 0.10); border: 1px solid rgba(var(--success-rgb), 0.25); border-radius:var(--radius-full); padding: 3px 10px; font-size: var(--fs-sm); color: var(--success); }
.pill-overlay { background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.12); border-radius:var(--radius-full); padding: 3px 10px; font-size: var(--fs-xs); font-weight: 600; }

/* Status badges (small, in lists) */
.status-badge-primary { background: rgba(var(--primary-rgb), 0.15); color: var(--violet-light); padding: 2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight: 600; }
.status-badge-success { background: rgba(var(--success-rgb), 0.15); color: var(--success); padding: 2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight: 600; }
.status-badge-danger { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); padding: 2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight: 600; }
.status-badge-warning { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); padding: 2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight: 600; }

/* Dynamic color/width via CSS custom properties */
.dynamic-color { color: var(--dc); }
.dynamic-bg { background: var(--db); }
.progress-fill { width: var(--w); height: 100%; border-radius: inherit; }

/* Filter pill buttons — style unique pour tous les filtres du dashboard */
.filtre-pill {
  border-radius: var(--radius-xl);
  padding: 6px 16px;
  font-size: var(--fs-base);
  cursor: pointer;
  font-family: var(--font);
  border: 1px solid rgba(var(--overlay-rgb), 0.12);
  background: rgba(var(--overlay-rgb), 0.04);
  color: rgba(var(--overlay-rgb), 0.6);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}
.filtre-pill:hover {
  background: rgba(var(--overlay-rgb), 0.08);
  border-color: rgba(var(--overlay-rgb), 0.2);
  color: rgba(var(--overlay-rgb), 0.8);
}
.filtre-pill.filtre-actif {
  background: rgba(var(--secondary-rgb), 0.15);
  border-color: rgba(var(--secondary-rgb), 0.4);
  color: var(--secondary);
}
.filtre-pill.filtre-actif:hover {
  background: rgba(var(--secondary-rgb), 0.22);
}
[data-theme="light"] .filtre-pill {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .filtre-pill:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.7);
}
[data-theme="light"] .filtre-pill.filtre-actif {
  background: rgba(var(--secondary-rgb), 0.12);
  border-color: rgba(var(--secondary-rgb), 0.35);
  color: var(--secondary);
}
[data-theme="light"] .filtre-pill.filtre-actif:hover {
  background: rgba(var(--secondary-rgb), 0.18);
}

/* Drag handle icon */

/* Stat card grid (hub-stats) */
.stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat-card-item { background: rgba(var(--secondary-rgb), 0.08); border: 1px solid rgba(var(--secondary-rgb), 0.2); border-radius:var(--radius-lg); padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; }
.stat-card-item:hover { background: rgba(var(--secondary-rgb), 0.15); }
.stat-card-emoji { font-size: var(--fs-3xl); margin-bottom: 4px; }
.stat-card-num { font-size: var(--fs-3xl); font-weight: 700; color: var(--secondary); }

/* Stat list items */
.stat-list-item { padding: 12px 14px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius:var(--radius); margin-bottom: 8px; }
.stat-list-item-sm { padding: 12px 14px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius:var(--radius); margin-bottom: 6px; }

/* Pick items (parcours/fiches selectors) */
.pick-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(var(--overlay-rgb), 0.03); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius:var(--radius); margin-bottom: 4px; cursor: pointer; }
.pick-item-text { font-size: var(--fs-base); color: rgba(var(--overlay-rgb), 0.7); }
.pick-empty { color: rgba(var(--overlay-rgb), 0.25); font-size: var(--fs-base); text-align: center; padding: 8px; }

/* Drag card */
.drag-card { background: var(--bg-card); border: 1px solid var(--border); border-radius:var(--radius-lg); padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; cursor: grab; }

/* Step number circles */
.step-num-circle { width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--secondary-rgb), 0.15); color: var(--secondary); font-size: var(--fs-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-num-circle-sm { width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--success-rgb), 0.15); color: var(--success); font-size: var(--fs-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Chevron dim */
.chevron-dim { color: var(--text-dim); transition: transform 0.2s; }

/* Btn retour secondary */
.btn-retour-secondary { padding: 6px 14px; background: rgba(var(--secondary-rgb), 0.15); border: 1px solid rgba(var(--secondary-rgb), 0.3); border-radius:var(--radius); color: var(--secondary); cursor: pointer; font-size: var(--fs-base); font-family: var(--font); }

/* Drag handle */
.drag-handle { color: var(--text-dim); font-size: var(--fs-md); cursor: grab; flex-shrink: 0; }

/* Ressource / slot items */
.ressource-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius:var(--radius); margin-bottom: 6px; }
.slot-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(var(--info-rgb), 0.08); border: 1px solid rgba(var(--info-rgb), 0.2); border-radius:var(--radius); }

/* Link secondary underline */
.link-secondary-underline { color: var(--secondary); text-decoration: underline; }

/* Separator line */
.hr-subtle { height: 1px; background: rgba(var(--overlay-rgb), 0.1); margin: 18px 0; }

/* User avatar circle */
.user-avatar-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-lg); flex-shrink: 0; }

/* Theme row card */
.theme-row-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius:var(--radius-lg); }

/* Section group label */
.section-group-label { font-size: var(--fs-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

/* Success box */
.success-box { background: rgba(var(--success-rgb), 0.08); border: 1px solid rgba(var(--success-rgb), 0.3); border-radius:var(--radius-lg); padding: 14px; }

/* Pre-wrap text */
.pre-wrap { white-space: pre-wrap; }

/* Description block inside detail panel */
.desc-block { margin-top: 10px; padding: 10px 12px; background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius:var(--radius); }

/* ══════════════════════════════════════════════
   JS TEMPLATE INLINE STYLE REPLACEMENTS (batch 2)
   ══════════════════════════════════════════════ */
.cart-empty-state { text-align:center; padding:40px 20px; color:var(--text-dim); }
.cart-empty-icon { font-size: var(--fs-4xl); margin-bottom:8px; }
.cart-section-title { font-size: var(--fs-xl); font-weight:700; margin-bottom:14px; }
.cart-vendor-card { display:flex; align-items:center; gap:8px; padding:10px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.06); border-radius:var(--radius); margin-bottom:8px; }
.cart-vendor-icon { font-size: var(--fs-xl); }
.cart-vendor-name { color:var(--text); font-size: var(--fs-base); }
.cart-vendor-sub { font-size: var(--fs-xs); color:var(--text-dim); }
.cart-item-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.06); cursor:pointer; }
.cart-item-thumb { width:48px; height:48px; border-radius:var(--radius); object-fit:cover; border:1px solid rgba(var(--overlay-rgb),0.1); }
.cart-item-thumb-ph { width:48px; height:48px; border-radius:var(--radius); background:rgba(var(--overlay-rgb),0.05); display:flex; align-items:center; justify-content:center; font-size: var(--fs-2xs); color:var(--text-dim); }
.cart-item-title { font-size: var(--fs-base); font-weight:600; color:var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-sub { font-size: var(--fs-sm); color:var(--text-dim); }
.cart-item-price-col { text-align:right; white-space:nowrap; }
.cart-item-price { font-weight:700; color:var(--text); }
.cart-remove-btn { background:none; border:none; color:var(--danger); font-size: var(--fs-xs); cursor:pointer; padding:2px; }
.cart-subtotal { text-align:right; font-size: var(--fs-base); color:var(--text-muted); padding:6px 0; }
.cart-grand-total { border-top:2px solid rgba(var(--overlay-rgb),0.1); padding-top:12px; text-align:right; font-size: var(--fs-xl); font-weight:700; color:var(--accent,var(--success)); }
.cart-unavail-msg { font-size: var(--fs-xs); color:var(--danger); margin-top:2px; }
.cart-add-btn-style { padding:10px 20px; border:1px solid rgba(var(--secondary-rgb),0.3); background:rgba(var(--secondary-rgb),0.1); color:var(--secondary); border-radius:var(--radius); font-weight:600; font-size: var(--fs-md); cursor:pointer; }
.confirm-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.confirm-box { background:var(--bg); border-radius:var(--radius-xl); padding:40px; max-width:520px; width:100%; text-align:center; border:1px solid rgba(var(--overlay-rgb),0.1); box-shadow:var(--shadow-lg); }
.confirm-icon { font-size:var(--fs-4xl); margin-bottom:16px; }
.confirm-recap { text-align:left; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); padding:14px; margin:16px 0; }
.confirm-recap-label { font-size: var(--fs-base); color:var(--text-muted); margin-bottom:8px; font-weight:600; }
.confirm-recap-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.05); font-size: var(--fs-md); color:var(--border); }
.confirm-info { color:var(--text-muted); font-size: var(--fs-md); }
.confirm-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.confirm-link-ghost { padding:12px 24px; background:rgba(var(--overlay-rgb),0.08); color:var(--text); border-radius:var(--radius); text-decoration:none; font-weight:600; font-size: var(--fs-md); border:1px solid rgba(var(--overlay-rgb),0.15); }
.confirm-link-accent { padding:12px 24px; background:var(--accent,var(--success)); color:#000; border-radius:var(--radius); text-decoration:none; font-weight:700; font-size: var(--fs-md); }
.cart-timer-badge { position:fixed; top:16px; right:72px; z-index:9990; color:var(--text); padding:6px 12px; border-radius:var(--radius-xl); font-size: var(--fs-sm); font-weight:700; display:flex; align-items:center; gap:6px; }
.activity-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.activity-stat-card { padding:16px 14px; border:1px solid; border-radius:var(--radius-lg); text-align:center; }
.activity-stat-value { font-size: var(--fs-4xl); font-weight:700; line-height:1; }
.activity-stat-label { font-size: var(--fs-sm); color:var(--text-muted); margin-top:4px; }
.activity-info-box { padding:14px 16px; background:rgba(var(--overlay-rgb),0.03); border-radius:var(--radius-lg); margin-bottom:14px; }
.activity-section-title { font-weight:700; color:var(--text); margin:16px 0 8px; font-size: var(--fs-lg); }
.activity-detail-box { padding:12px 14px; background:rgba(var(--overlay-rgb),0.03); border:1px solid var(--border); border-radius:var(--radius); font-size: var(--fs-base); }
.activity-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.activity-action-link { flex:1; min-width:140px; padding:10px 16px; text-align:center; background:transparent; border-radius:var(--radius); text-decoration:none; font-size: var(--fs-base); font-weight:600; }
.dispo-day-card { padding:0.875rem 1rem; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); margin-bottom:0.75rem; }
.dispo-slot-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.04); }
.dispo-slot-time { font-size: var(--fs-base); color:var(--secondary); font-weight:600; min-width:100px; }
.dispo-slot-type { font-size: var(--fs-sm); color:var(--text-dim); flex:1; }
.dispo-empty-msg { font-size:var(--fs-base); color:var(--text-dim); font-style:italic; }
.dispo-exception-card { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(var(--danger-rgb),0.05); border:1px solid rgba(var(--danger-rgb),0.15); border-radius:var(--radius); }
.diag-progress-wrap { max-width:400px; margin:20px auto; text-align:center; }
.diag-step-label { margin-bottom:12px; font-size: var(--fs-md); color:var(--text); }
.diag-bar-track { height:6px; background:rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-full); overflow:hidden; }
.diag-detail-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.06); }
.diag-detail-icon { font-size: var(--fs-2xl); flex-shrink:0; }
.diag-reco-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.04); }
.ventes-stats-banner { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ventes-stat-card { flex:1; min-width:140px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); padding:14px 18px; display:flex; align-items:center; gap:10px; }
.ventes-stat-icon { font-size: var(--fs-2xl); }
.ventes-stat-value { font-size: var(--fs-xl); font-weight:700; }
.ventes-stat-label { font-size: var(--fs-sm); color:rgba(var(--overlay-rgb),0.45); text-transform:uppercase; letter-spacing:0.03em; }
.photo-zoom-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:99999; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.photo-zoom-img { max-width:90%; max-height:90%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.stripe-status-box { display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--radius); margin-bottom:14px; }
.stripe-status-icon { font-size: var(--fs-3xl); }
.stripe-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size: var(--fs-base); margin-bottom:14px; }
.stripe-grid-item { padding:8px; background:rgba(var(--overlay-rgb),0.03); border-radius:var(--radius-sm); }
.stripe-grid-label { color:var(--text-dim); font-size: var(--fs-sm); }
.stripe-info-tip { padding:10px; margin-top:10px; background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.3); border-radius:var(--radius); color:var(--violet-light); font-size: var(--fs-base); }
.mod-pdf-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.mod-pdf-label { font-size: var(--fs-base); font-weight:600; color:var(--text-muted); display:block; margin-bottom:4px; }
.fiche-card-icon { font-size: var(--fs-3xl); }
.inscrit-card { background:rgba(var(--overlay-rgb),0.05); border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.apprenants-item-msg { color:var(--text-dim); font-size:var(--fs-base); margin-top:4px; font-style:italic; }
.actions-banner-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:linear-gradient(135deg,rgba(var(--secondary-rgb),0.18),rgba(var(--primary-rgb),0.12)); border:1px solid rgba(var(--secondary-rgb),0.35); border-radius:var(--radius-lg); }
.actions-banner-items { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.facture-type-badge-cls { display:inline-block; font-size: var(--fs-xs); font-weight:600; padding:2px 10px; border-radius:var(--radius-full); margin-left:8px; vertical-align:middle; }
.rdv-pending-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:12px; }
.rdv-pending-inner { display:flex; justify-content:space-between; align-items:start; gap:16px; flex-wrap:wrap; }
.rdv-pending-info { flex:1; min-width:220px; }
.rdv-pending-actions { display:flex; gap:8px; flex-wrap:wrap; }
.rdv-warn-box { background:rgba(var(--warning-rgb),0.08); border:1px solid rgba(var(--warning-rgb),0.3); border-radius:var(--radius-lg); padding:14px; margin-top:8px; }
.section-label-dim { font-size: var(--fs-sm); color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }

/* ══════════════════════════════════════════════
   TEMPLATE-STRING UTILITIES - batch 3
   Replaces inline styles in remaining 24 JS files.
   ══════════════════════════════════════════════ */

/* Boutique detail */
.boutique-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.boutique-photo-thumb { width:100%; height:120px; object-fit:cover; border-radius:var(--radius); border:1px solid rgba(var(--overlay-rgb),0.1); cursor:pointer; }
.boutique-photo-main { width:100%; max-height:280px; object-fit:contain; border-radius:var(--radius-lg); border:1px solid rgba(var(--overlay-rgb),0.1); cursor:pointer; margin-bottom:8px; }
.boutique-section-divider { border-top:1px solid var(--border); padding-top:16px; margin-top:16px; }
.boutique-form-input { width:100%; padding:10px 12px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color:var(--text); font-family:var(--font); margin-bottom:8px; box-sizing:border-box; }
.boutique-qty-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.boutique-qty-label { font-size: var(--fs-base); color:var(--text-muted); }
.boutique-qty-select { padding:8px 12px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color:var(--text); font-family:var(--font); }
.boutique-qty-hint { font-size:var(--fs-base); color:var(--text-dim); }
.photo-popup-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; padding:20px; cursor:pointer; }
.photo-popup-img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

/* Planning list */
.planning-list-wrap { display:flex; flex-direction:column; gap:8px; }
.planning-list-card { padding:12px 14px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); display:flex; align-items:center; gap:12px; cursor:pointer; }
.planning-item-title { font-weight:600; font-size: var(--fs-md); }
.planning-item-meta { font-size:var(--fs-base); color:var(--text-dim); margin-top:2px; }
.planning-item-type { font-size: var(--fs-xs); margin-top:3px; }
.planning-detail-row { display:flex; align-items:center; gap:10px; }
.planning-detail-name { font-size: var(--fs-md); }

/* Shared link style */
.link-secondary { color:var(--secondary); }

/* Mon-espace */
.hub-quick-sep { margin:0 10px; opacity:0.4; }
.hub-card-disabled { opacity:0.55; cursor:default; }
.hub-newneed-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.hub-newneed-btn { padding:9px 14px; border-radius:var(--radius); text-decoration:none; font-size: var(--fs-base); font-weight:600; text-align:center; border:1px solid; }
.hub-newneed-btn-scan { background:rgba(var(--secondary-rgb),0.10); color:var(--secondary); border-color:rgba(var(--secondary-rgb),0.35); }
.hub-newneed-btn-declare { background:rgba(var(--warning-rgb),0.08); color:var(--warning); border-color:rgba(var(--warning-rgb),0.35); }
.hub-cta-link { display:inline-block; margin-top:8px; padding:6px 12px; border-radius:var(--radius); text-decoration:none; font-size:var(--fs-base); font-weight:600; }
.hub-cta-link-client { background:rgba(var(--secondary-rgb),0.14); color:var(--secondary); }
.hub-cta-link-student { background:rgba(var(--success-rgb),0.14); color:var(--success); }
.hub-link-lms { color:var(--warning); }

/* Info box */
.info-box-soft { margin-top:20px; padding:16px; background:rgba(var(--info-rgb),0.08); border-radius:var(--radius-lg); border:1px solid rgba(var(--info-rgb),0.2); }
.info-box-soft strong { color:var(--cyan); }
.info-box-soft p { margin-top:8px; color:var(--text-muted); font-size: var(--fs-md); }
.info-box-soft a { color:var(--cyan); }

/* Wizard font patch */
.wiz-block-mb16 { margin-bottom:16px; }
.wiz-label-sm { font-size: var(--fs-md); font-weight:600; }
.wiz-hint-sm { font-size: var(--fs-sm); color:var(--text-dim); margin-bottom:8px; }
.wiz-btn-row { display:flex; gap:8px; }
.wiz-size-row { display:flex; align-items:center; gap:12px; }
.wiz-size-btn { width:40px; height:40px; border-radius:var(--radius); border:1px solid rgba(var(--overlay-rgb),0.2); background:rgba(var(--overlay-rgb),0.05); color:var(--text); font-size: var(--fs-xl); cursor:pointer; }
.wiz-size-val { font-size: var(--fs-xl); font-weight:700; min-width:60px; text-align:center; }

/* Tech intervention */
.sap-info-badge { padding:8px 12px; background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.2); border-radius:var(--radius); font-size: var(--fs-base); color:var(--success); }
.rep-actions-row { display:flex; gap:8px; flex-wrap:wrap; }

/* Wizard roles patch */
.wiz-role-row-inner { display:flex; gap:10px; align-items:center; margin-bottom:10px; padding:12px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); }
.wiz-color-col { display:flex; flex-direction:column; gap:3px; flex-shrink:0; align-items:center; }
.wiz-color-pick { width:30px; height:30px; border:none; border-radius:var(--radius); cursor:pointer; background:none; padding:0; }
.wiz-color-label { font-size:var(--fs-2xs); opacity:0.35; }
.wiz-role-name-input { flex:1; padding:10px 12px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color:var(--text, #fff); font-size: var(--fs-md); }
.wiz-role-remove-btn { padding:8px 12px; background:rgba(var(--danger-rgb),0.1); border:1px solid rgba(var(--danger-rgb),0.3); border-radius:var(--radius); color:var(--danger); cursor:pointer; flex-shrink:0; }
.wiz-add-role-btn { margin-top:8px; padding:10px 20px; background:rgba(var(--overlay-rgb),0.06); border:1px dashed rgba(var(--overlay-rgb),0.2); border-radius:var(--radius); cursor:pointer; font-size: var(--fs-base); color:var(--text-muted); }

/* Signature */
.sig-field { padding:14px; }
.sig-field-mb12 { margin-bottom:12px; }
.sig-canvas-wrap { background:#fff; border-radius:var(--radius); padding:4px; position:relative; }
.sig-actions-row { display:flex; justify-content:space-between; margin-top:8px; }
.sig-status { font-size: var(--fs-sm); color:var(--text-dim); }
.sig-legal-box { margin-top:12px; padding:10px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); font-size: var(--fs-sm); color:var(--text-muted); }

/* Carte map */
.carte-popup { font-family:var(--font); }
.carte-popup-type { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:0.04em; font-weight:700; margin-bottom:2px; }
.carte-popup-label { font-size: var(--fs-md); font-weight:600; color:var(--text); margin-bottom:2px; }
.carte-popup-ville { font-size: var(--fs-sm); color:var(--text-muted); }
.carte-map-dot { border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow); }
.carte-map-dot-sm { border-radius:50%; border:2px solid #fff; box-shadow:var(--shadow-sm); }
.carte-map-dot-sq { border-radius:var(--radius-sm); border:2px solid #fff; box-shadow:var(--shadow-sm); }

/* Stock specs */
.spec-group-header { font-size: var(--fs-base); font-weight:700; color:rgba(var(--secondary-rgb),0.8); text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:6px; }
.spec-group-emoji { font-size: var(--fs-xl); }
.spec-detail-group-header { font-size: var(--fs-sm); font-weight:700; color:rgba(var(--secondary-rgb),0.7); text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:5px; }
.spec-detail-emoji { font-size: var(--fs-lg); }

/* Catalogue tech */
.cat-form-row { display:flex; gap:12px; margin-top:12px; }
.cat-form-col { flex:1; }
.cat-form-check { margin-top:12px; }
.cat-form-check label { display:flex; align-items:center; gap:8px; cursor:pointer; }

/* ══════════════════════════════════════════════
   TEMPLATE-STRING UTILITIES - batch 4
   Replaces inline styles in app-renderers, obs-stock,
   tech-devis-detail, boutique-enhancer, obs-demande-detail
   ══════════════════════════════════════════════ */

/* app-renderers */
.participation-row { font-size: var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.participation-check { color:var(--success); }
.participation-session { color:rgba(var(--overlay-rgb),0.75); font-weight:600; }
.btn-primary-block { display:block; text-align:center; margin-top:8px; padding:9px; font-size: var(--fs-base); }
.btn-primary-block-lg { display:block; text-align:center; margin-top:10px; padding:10px; font-size: var(--fs-md); }
.btn-primary-cta { font-size: var(--fs-md); padding:12px 26px; }
.btn-primary-sm-insc { font-size: var(--fs-base); padding:10px 20px; background:var(--bg-card); }
.parcours-footer-mt { margin-top:12px; }
.opacity-half { opacity:0.5; }
.opacity-dimmed { opacity:0.45; }
.locked-grayscale { opacity:0.4; filter:grayscale(0.5); }
.btn-locked { background:var(--bg-card); color:var(--text-muted); font-size: var(--fs-base); padding:8px 14px; }
.btn-opacity-half { opacity:0.5; }
.insc-margin-bot { margin-bottom:10px; }
.cursor-pointer { cursor:pointer; }
.atelier-thema-left-flex { flex:1; }
.gap-zero { gap:0; }
.btn-avis-sm { font-size: var(--fs-base); padding:6px 14px; }
.btn-avis-tiny { font-size: var(--fs-xs); padding:3px 8px; }
.hint-dim { font-size: var(--fs-sm); color:var(--text-dim); margin-top:6px; }

/* boutique-enhancer fullscreen overlay */
.pf-overlay { position:fixed; inset:0; z-index:99990; background:var(--bg,var(--bg)); overflow:hidden; display:flex; flex-direction:column; }
.pf-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; border-bottom:1px solid rgba(var(--overlay-rgb),0.08); flex-shrink:0; }
.pf-topbar-label { font-size: var(--fs-base); color:var(--text-muted); }
.pf-close-btn { background:none; border:none; color:var(--text-muted); font-size: var(--fs-3xl); cursor:pointer; padding:4px 8px; line-height:1; }
.pf-col-photos { padding:24px; overflow-y:auto; border-right:1px solid rgba(var(--overlay-rgb),0.06); }
.pf-main-photo { width:100%; max-height:50vh; object-fit:contain; border-radius:var(--radius-lg); border:1px solid rgba(var(--overlay-rgb),0.1); cursor:pointer; margin-bottom:12px; }
.pf-thumb-row { display:flex; gap:8px; }
.pf-thumb { width:calc(33% - 6px); height:80px; object-fit:cover; border-radius:var(--radius); border:1px solid rgba(var(--overlay-rgb),0.1); cursor:pointer; opacity:0.7; transition:opacity 0.15s; }
.pf-eco-box { margin-top:16px; padding:12px; background:rgba(var(--success-rgb),0.06); border:1px solid rgba(var(--success-rgb),0.15); border-radius:var(--radius-lg); font-size: var(--fs-base); color:var(--text-muted); display:flex; align-items:center; gap:10px; }
.pf-eco-box-nophoto { margin-bottom:16px; padding:12px; background:rgba(var(--success-rgb),0.06); border:1px solid rgba(var(--success-rgb),0.15); border-radius:var(--radius-lg); font-size: var(--fs-base); color:var(--text-muted); display:flex; align-items:center; gap:10px; }
.pf-eco-icon { font-size: var(--fs-2xl); }
.pf-col-info { padding:24px; overflow-y:auto; border-right:1px solid rgba(var(--overlay-rgb),0.06); }
.pf-title-block { margin-bottom:16px; }
.pf-title { margin:0 0 8px; font-size: var(--fs-3xl); font-weight:700; color:var(--text); }
.pf-price-big { font-size: var(--fs-3xl); font-weight:800; color:var(--accent,var(--success)); }
.pf-badge-etat { padding:4px 12px; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight:600; }
.pf-badge-info { padding:4px 12px; border-radius:var(--radius-full); font-size: var(--fs-sm); font-weight:600; background:rgba(var(--info-rgb),0.12); color:var(--info); }
.pf-desc-box { margin-bottom:16px; padding:12px; background:rgba(var(--overlay-rgb),0.03); border-radius:var(--radius); font-size: var(--fs-md); color:var(--text-muted); line-height:1.5; }
.pf-vendeur-box { padding:12px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.06); border-radius:var(--radius-lg); }
.pf-vendeur-icon { font-size: var(--fs-3xl); }
.pf-vendeur-sub { font-size: var(--fs-sm); color:var(--text-dim); }
.pf-garantie-box { padding:10px 12px; background:rgba(var(--success-rgb),0.05); border:1px solid rgba(var(--success-rgb),0.12); border-radius:var(--radius-lg); font-size:var(--fs-base); }
.pf-garantie-icon { font-size: var(--fs-xl); }
.pf-specs-wrap { margin-bottom:20px; }
.pf-actions-bar { display:flex; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid rgba(var(--overlay-rgb),0.06); }
.pf-btn-cart { flex:1; padding:14px; background:var(--accent,var(--success)); color:var(--btn-text); border:none; border-radius:var(--radius-lg); font-weight:700; font-size:var(--fs-lg); cursor:pointer; }
.pf-btn-buy { padding:14px 20px; background:rgba(var(--overlay-rgb),0.06); color:var(--text-muted); border:1px solid rgba(var(--overlay-rgb),0.12); border-radius:var(--radius-lg); font-size: var(--fs-base); cursor:pointer; }
.pf-similar-wrap { margin-top:20px; padding-top:16px; border-top:1px solid rgba(var(--overlay-rgb),0.06); }
.pf-similar-card { cursor:pointer; padding:10px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); text-align:center; transition:border-color 0.2s; }
.pf-similar-card:hover { border-color:rgba(var(--secondary-rgb),0.4); }
.pf-similar-img { width:100%; height:70px; object-fit:contain; border-radius:var(--radius); margin-bottom:6px; }
.pf-similar-name { font-size: var(--fs-sm); color:rgba(var(--overlay-rgb),0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-similar-price { font-size: var(--fs-base); font-weight:700; color:var(--accent,var(--success)); margin-top:4px; }
.pf-spec-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.04); font-size: var(--fs-base); }
.pf-spec-key { color:var(--text-muted); }
.pf-spec-val { color:var(--border); }
.pf-spec-row-grouped { display:flex; justify-content:space-between; padding:6px 10px; font-size: var(--fs-base); border-bottom:1px solid rgba(var(--overlay-rgb),0.03); border-radius:var(--radius-sm); }
.pf-spec-key-grouped { color:rgba(var(--overlay-rgb),0.45); }
.pf-spec-val-grouped { color:var(--border); font-weight:500; }
.pf-spec-group-title { font-size: var(--fs-xs); font-weight:700; color:rgba(var(--secondary-rgb),0.7); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.pf-spec-group-first { /* no top margin */ }
.pf-spec-group-sep { margin-top:10px; padding-top:8px; border-top:1px solid rgba(var(--overlay-rgb),0.06); }
.pf-spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 40px; }

/* obs-stock extras */
.stock-stat-alert { cursor:pointer; }
.stock-vente-photo { max-width:100%; max-height:200px; border-radius:var(--radius-lg); border:1px solid rgba(var(--overlay-rgb),0.1); }
.stock-reuse-box { margin-top:10px; padding:10px; background:rgba(var(--secondary-rgb),0.06); border:1px solid rgba(var(--secondary-rgb),0.2); border-radius:var(--radius); }
.stock-reuse-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size: var(--fs-base); color:var(--secondary,var(--secondary)); font-weight:600; }
.stock-reuse-preview { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.stock-reuse-thumb { height:50px; border-radius:var(--radius-sm); }
.stock-vente-photos-row { display:flex; gap:8px; flex-wrap:wrap; }
.stock-vente-photo-sm { height:80px; border-radius:var(--radius); border:1px solid rgba(var(--overlay-rgb),0.1); }

/* tech-devis-detail extras */
.devis-line-card { padding:14px; }
.devis-line-type-btn { font-size:var(--fs-base); padding:5px 12px; }
.devis-remise-row { display:flex; align-items:flex-end; gap:8px; margin-top:8px; }
.devis-total-right { text-align:right; margin-top:6px; }
.devis-line-through { text-decoration:line-through; margin-right:8px; }
.devis-tva-dim { font-size:var(--fs-base); color:var(--text-dim); }
.devis-total-ttc-label { font-size: var(--fs-xl); }
.devis-total-ttc-value { text-align:right; font-size: var(--fs-xl); color:var(--dash-accent, var(--success)); }
.bonus-repair-box { background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.2); border-radius:var(--radius); padding:12px; }
.bonus-repair-title { color:var(--success); margin:0 0 6px; }
.bonus-repair-amount { font-size: var(--fs-md); color:var(--success); font-weight:700; }
.bonus-repair-net { font-size:var(--fs-base); color:var(--success); margin-top:4px; }
.signature-bg { background:#fff; border-radius:var(--radius); padding:12px; display:inline-block; }
.signature-img { max-width:300px; max-height:150px; }
.pending-review-box { padding:12px; background:rgba(99,102,241,0.12); border-left:4px solid var(--indigo); border-radius:var(--radius); color:var(--secondary); }

/* obs-demande-detail extras */
.phase-box { padding:10px 14px; margin-bottom:14px; border-radius:var(--radius); }
.phase-label { font-weight:600; font-size: var(--fs-md); }
.phase-next { font-size:var(--fs-base); color:var(--text-muted); margin-top:4px; }
.creneaux-box { margin-top:12px; padding:10px 12px; background:rgba(var(--secondary-rgb),0.06); border:1px solid rgba(var(--secondary-rgb),0.15); border-radius:var(--radius); }
.creneaux-title { font-size:var(--fs-base); color:var(--secondary,var(--secondary)); font-weight:600; margin-bottom:8px; }
.creneau-item { padding:8px 10px; }
.creneau-date { font-weight:600; color:var(--text); }
.creneau-accepted { color:var(--success); font-size: var(--fs-sm); font-weight:600; }
.creneau-proposed { color:var(--text-dim); font-size: var(--fs-sm); }
.creneau-accept-btn { background:rgba(var(--success-rgb),0.12); border:1px solid rgba(var(--success-rgb),0.3); border-radius:var(--radius); color:var(--success); cursor:pointer; padding:5px 14px; font-size:var(--fs-base); font-family:var(--font); font-weight:600; }
.status-info-box { font-size: var(--fs-base); padding:8px 12px; margin-top:6px; border-radius:var(--radius); }
.status-info-sent { background:rgba(var(--info-rgb),0.06); border:1px solid rgba(var(--info-rgb),0.15); color:rgba(var(--info-rgb),0.8); }
.status-info-accepted { background:rgba(var(--success-rgb),0.06); border:1px solid rgba(var(--success-rgb),0.15); color:rgba(var(--success-rgb),0.8); }
.status-info-refused { background:rgba(var(--danger-rgb),0.06); border:1px solid rgba(var(--danger-rgb),0.15); color:rgba(var(--danger-rgb),0.8); }
.note-cloture-box { margin-top:8px; padding:8px 12px; background:rgba(var(--success-rgb),0.06); border:1px solid rgba(var(--success-rgb),0.15); border-radius:var(--radius); font-size: var(--fs-base); color:rgba(var(--success-rgb),0.8); }
/* close-form-wrap / edit-client-form kept inline: JS toggles via el.style.display */
.edit-field-label { font-size:var(--fs-base); color:var(--text-dim); font-weight:500; margin-bottom:4px; }
.edit-ref-label { font-size:var(--fs-base); color:var(--text-dim); font-weight:500; }
.waiting-msg { font-size: var(--fs-base); color:var(--text-muted); }
.label-sm-dim { font-size: var(--fs-base); color:var(--text-muted); }
.divider-line-full { grid-column:1/-1; }
.font-semibold-k { font-weight:600; }

/* Apercu */
.apercu-wrap { padding:24px 32px; overflow-x:hidden; word-break:break-word; }
.apercu-title { font-size: var(--fs-3xl); margin:0 0 12px 0; color:var(--text, #fff); }
.apercu-duree { font-size: var(--fs-base); color:var(--text-muted, #aaa); margin-bottom:12px; }
.apercu-video-mb { margin-bottom:16px; }
.apercu-content { font-size: var(--fs-md); line-height:1.7; color:var(--text, #ddd); }

/* Boutique filters */
.bf-input { flex:1; min-width:150px; padding:10px 14px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color:var(--text); font-size: var(--fs-md); }
.bf-select { padding:10px; background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color:var(--text); font-size: var(--fs-base); }
.bf-count { font-size:var(--fs-base); color:var(--text-dim); width:100%; }
.bf-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; align-items:center; }

/* Modal admin */
.obso-modal-card { background:var(--bg-card, var(--bg)); border-radius:var(--radius-xl); width:100%; padding:0; position:relative; box-shadow:var(--shadow-lg); border:1px solid var(--border, #333); max-height:calc(100vh - 40px); overflow-y:auto; }
.obso-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--border, #333); position:sticky; top:0; background:var(--bg-card, var(--bg)); z-index:1; border-radius:var(--radius-xl) 16px 0 0; }
.obso-modal-header-title { font-size: var(--fs-base); color:var(--text-muted, #888); font-weight:600; }
.obso-modal-header-actions { display:flex; gap:8px; }

/* Wizard config pro */
.ob-wizard-desc-text { font-size: var(--fs-base); color:var(--text-muted); margin:0 0 16px; line-height:1.5; }
.wiz-logo-img { max-width:180px; max-height:90px; border-radius:var(--radius); border:1px solid rgba(var(--overlay-rgb),0.1); }
.wiz-logo-del-btn { margin-left:10px; padding:4px 10px; background:rgba(var(--danger-rgb),0.1); color:var(--danger); border:1px solid rgba(var(--danger-rgb),0.25); border-radius:var(--radius); cursor:pointer; font-size:var(--fs-base); }
.wiz-logo-dropzone { border:2px dashed rgba(var(--overlay-rgb),0.15); border-radius:var(--radius-lg); padding:20px; text-align:center; cursor:pointer; }
.wiz-logo-drop-text { font-size: var(--fs-base); color:var(--text-muted); }
.wiz-logo-drop-hint { font-size: var(--fs-sm); color:var(--text-dim); margin-top:4px; }

/* Declarer appareil success */
.dec-success { text-align:center; padding:40px 24px; }
.dec-success-icon { font-size: var(--fs-4xl); margin-bottom:14px; }
.dec-success-title { color:var(--success); margin:0 0 10px; }
.dec-success-msg { color:var(--text-muted); line-height:1.6; }
.dec-success-cta { margin-top:22px; }

/* Creneau selection */
.creneau-sel-wrap { margin-top:10px; padding:10px 14px; background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.2); border-radius:6px; }
.creneau-sel-wrap > strong { font-size:0.82rem; color:var(--success); }
.creneau-sel-item { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(var(--overlay-rgb),0.05); font-size:0.82rem; }
.creneau-rm-btn { background:none; border:none; color:var(--danger); cursor:pointer; font-size: var(--fs-base); }

/* Bundle-core a11y */
.a11y-controls { display:flex; align-items:center; gap:6px; }
.a11y-separator { width:1px; height:20px; background:rgba(var(--overlay-rgb),0.15); margin:0 2px; }

/* Obs cours articles */
.obs-pick-item-inner { display:flex; flex-direction:column; gap:2px; padding:10px 14px; margin-bottom:6px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.06); border-radius:var(--radius); cursor:pointer; }
.obs-pick-title { font-size: var(--fs-md); color:rgba(var(--overlay-rgb),0.8); font-weight:500; }
.obs-pick-meta { font-size: var(--fs-sm); color:var(--text-dim); }

/* Ressources video */
.wiki-card-img-placeholder { background:rgba(var(--secondary-rgb),0.08); display:flex; align-items:center; justify-content:center; font-size: var(--fs-4xl); }

/* Page disabled */
.page-disabled { min-height:60vh; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--text); font-family:var(--font); text-align:center; padding:60px 20px; }
.page-disabled-inner { max-width:480px; }
.page-disabled-icon { font-size:4.5rem; margin-bottom:16px; line-height:1; }
.page-disabled-title { margin:0 0 12px; font-size:var(--fs-2xl); font-weight:700; }
.page-disabled-text { color:var(--text-dim); font-size:var(--fs-base); line-height:1.6; margin:0 0 28px; }
.page-disabled-cta { display:inline-block; margin-top:4px; padding:12px 28px; background:var(--secondary); color:var(--btn-text); border-radius:var(--radius); text-decoration:none; font-weight:600; transition:opacity .15s, transform .15s; }
.page-disabled-cta:hover { opacity:.9; transform:translateY(-1px); }
.page-disabled-wave { width:60px; height:3px; background:var(--accent); border-radius:2px; margin:0 auto 20px; opacity:.6; }

/* Social icons */
.social-icon-link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--text); text-decoration:none; transition:transform 0.15s, opacity 0.15s; }
.social-icon-link:hover { transform:scale(1.15); }
.social-icons-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ECO source */
.eco-source-sm { font-size: var(--fs-sm); color:var(--text-dim); }

/* Empty grid */
.empty-grid-msg { text-align:center; padding:40px; color:var(--text-dim); }

/* ══════════════════════════════════════════════
   HTML PAGE INLINE STYLE REPLACEMENTS
   Classes extracted from gestion-inscription, course, login,
   materiel-recherche, new-password, reset-password
   ══════════════════════════════════════════════ */

/* Topbar (gestion-inscription) */
.obs-topbar-fixed { position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--bg); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem, 4%, 3.75rem); height:5.625rem; box-sizing:border-box; overflow:visible; }
.obs-topbar-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; flex-shrink:0; margin:-1.5625rem 0 -2.8125rem 0; margin-left:-0.625rem; }
.obs-topbar-logo-img { height:10rem; width:auto; }
.obs-topbar-cta { padding:0.5rem 1rem; font-size: var(--fs-base); font-weight:600; color:var(--text); text-decoration:none; background:var(--primary); border-radius:var(--radius); }
.spacer-90 { height:5.625rem; }

/* Parcours block (gestion-inscription) */
.parcours-block { background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--secondary-rgb),0.2); border-radius:var(--radius); padding:0.875rem 1.125rem; margin-bottom:1.5rem; }
.parcours-block-label { font-size: var(--fs-base); font-weight:700; color:var(--secondary); margin-bottom:0.5rem; }
.parcours-item-line { font-size: var(--fs-md); color:rgba(var(--overlay-rgb),0.75); margin-bottom:0.25rem; }

/* Success view extras (gestion-inscription) */
.btn-retour-mt20 { margin-top:1.25rem; display:inline-block; }
.btn-espace-wrapper { margin-top:0.75rem; }
.btn-primary-sm { font-size: var(--fs-base); padding:0.5625rem 1.125rem; }
.lieu-link { color:var(--secondary); }

/* Course page */
.course-layout-pt { padding-top:2rem; }
.video-title-label { font-size: var(--fs-md); color:rgba(var(--overlay-rgb),0.90); margin-bottom:0.25rem; font-weight:700; }
.sidebar-nav-scroll { padding:0.5rem 0.625rem; flex:1; overflow-y:auto; }
.btn-full-center { width:100%; justify-content:center; }
.btn-full-center-mb8 { width:100%; justify-content:center; margin-bottom:0.5rem; }
.btn-full-center-mb12 { width:100%; justify-content:center; margin-bottom:0.75rem; }
.flex-gap8 { display:flex; gap:0.5rem; }
.flex-1-center-sm { flex:1; justify-content:center; font-size: var(--fs-base); }
.no-resource-msg { font-size: var(--fs-base); color:var(--text-dim); text-align:center; padding:0.625rem 0; }

/* Course JS - blocked parcours overlay */
.blocked-overlay { min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--font); }
.blocked-card { background:rgba(var(--overlay-rgb),0.05); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius-lg); padding:2.5rem; max-width:30rem; text-align:center; }
.blocked-icon { font-size: var(--fs-4xl); margin-bottom:1rem; }
.blocked-title { color:var(--text); margin-bottom:0.75rem; }
.blocked-desc { color:var(--text-muted); margin-bottom:1.5rem; line-height:1.6; }
.blocked-btn-inscrire { display:inline-block; background:var(--primary); color:var(--text); text-decoration:none; padding:0.75rem 1.75rem; border-radius:var(--radius); font-weight:700; margin-right:0.75rem; }
.blocked-btn-retour { display:inline-block; color:var(--text-muted); text-decoration:none; padding:0.75rem; }

/* Course JS - video placeholder */
.video-soon-wrap { text-align:center; padding:3rem 1.5rem; }
.video-soon-icon { font-size: var(--fs-4xl); margin-bottom:0.75rem; }
.video-soon-cta { margin-top:0.5rem; font-size: var(--fs-base); padding:0.625rem 1.25rem; }

/* Course JS - iframe/video embed */
.embed-responsive { width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); border:none; }
.video-native { width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); background:var(--bg-deep); }

/* Login page */
.login-logo-img { height:8.75rem; width:auto; margin:-0.9375rem 0; }
.pwd-wrapper { position:relative; }
.pwd-input-padded { padding-right:2.5rem; }
.btn-eye-toggle, .btn-eye-toggle:hover, .btn-eye-toggle:active { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%) !important; background:none !important; border:none; cursor:pointer; font-size: var(--fs-xl); color:var(--text-dim); padding:0.25rem; line-height:1; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; transition:none !important; }
.btn-eye-toggle:hover { opacity:0.7; }
.login-forgot-wrap { text-align:center; margin-top:0.75rem; }
.login-forgot-link { font-size: var(--fs-base); color:rgba(var(--overlay-rgb),0.45); text-decoration:none; }

/* Reset / New password logo */
.reset-logo-img { height:8.75rem; width:auto; margin:-1.25rem auto; display:block; }
.reset-logo-img-center { height:8.75rem; width:auto; display:block; margin:0 auto; }

/* Materiel-recherche page */
.hero-checklist { text-align:center; margin-top:1.25rem; color:var(--text-muted); font-size: var(--fs-md); }
.section-bg-surface { background:var(--bg-surface); }
.config-box-wrap { max-width:42.5rem; margin:2rem auto 0; text-align:center; }
.config-box-inline { display:inline-block; padding:1.125rem 1.75rem; text-align:left; }
.config-box-label { margin-bottom:0.5rem; }
.config-box-text { font-size: var(--fs-md); color:var(--text); line-height:1.7; }
.refus-block { max-width:42.5rem; margin:0 auto; text-align:center; color:var(--text-muted); font-size: var(--fs-md); line-height:1.7; }
.indicatif-note { text-align:center; margin-top:1.25rem; color:var(--text-muted); font-size: var(--fs-md); }
.cta-center { text-align:center; }
.cta-note { color:var(--text-muted); font-size: var(--fs-md); margin-bottom:0.875rem; }

/* ══════════════════════════════════════════════
   TEMPLATE-STRING UTILITIES - batch 4
   obs-rdv-direct.js, tech-reparations.js, anim-apercus.js
   ══════════════════════════════════════════════ */

/* RDV direct */
.rdv-warning-hint { font-size: var(--fs-base); color:var(--warning); line-height:1.4; }
.rdv-sub-hint { font-size:var(--fs-sm); opacity:.9; display:block; margin-top:4px; }
.rdv-link-warning { color:var(--warning); text-decoration:underline; font-size:var(--fs-sm); display:inline-block; margin-top:6px; }
.rdv-scrollbox { background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); }
.rdv-min80 { min-width:80px; }
.rdv-min90 { min-width:90px; }
.rdv-section-border-top { margin-top:16px; padding-top:14px; border-top:1px solid rgba(var(--overlay-rgb),0.1); }
.rdv-group-title { font-weight:600; font-size: var(--fs-md); margin-bottom:10px; }
.rdv-group-box { gap:0; border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); overflow:hidden; }
.rdv-radio-left { flex:1; border-radius:var(--radius) 0 0 6px; }
.rdv-radio-right { flex:1; border-radius:0 6px 6px 0; }
.rdv-label-muted { font-size: var(--fs-base); color:var(--text-muted); margin-bottom:8px; }
.rdv-nowrap-sm { white-space:nowrap; font-size:var(--fs-base); }
.rdv-checkbox-row { display:flex; align-items:center; gap:8px; margin-top:16px; cursor:pointer; font-size: var(--fs-md); }
.rdv-w-auto { width:auto; }
.rdv-btn-bare { background:none; border:none; padding:2px 6px; }
.rdv-empty-italic { padding:10px; font-size:var(--fs-sm); font-style:italic; opacity:.6; }
.rdv-pick-item { padding:8px 10px; cursor:pointer; border-bottom:1px solid rgba(var(--overlay-rgb),0.05); font-size: var(--fs-base); transition:background .15s; display:flex; align-items:center; gap:8px; }
.rdv-pick-item:hover { background:rgba(var(--secondary-rgb),0.08); }
.rdv-pick-dim { font-size: var(--fs-sm); opacity:.65; white-space:nowrap; }
.rdv-grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:10px; }
.rdv-w80 { width:80px; }
.rdv-section-label { font-size: var(--fs-md); color:var(--violet-light); }
.rdv-toggle-box { display:none; margin-top:8px; padding:12px; background:rgba(var(--primary-rgb),0.04); border:1px solid rgba(var(--secondary-rgb),0.15); border-radius:var(--radius); }
.rdv-success-msg { display:none; margin-top:8px; padding:10px 14px; background:rgba(var(--success-rgb),0.1); border:1px solid rgba(var(--success-rgb),0.3); border-radius:var(--radius); font-size: var(--fs-base); color:var(--success); font-weight:600; }
.rdv-upload-card-active { padding:14px; border:1px solid rgba(var(--secondary-rgb),0.5); background:rgba(var(--secondary-rgb),0.06); border-radius:var(--radius); cursor:pointer; text-align:center; }
.rdv-upload-card-neutral { padding:14px; border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); cursor:pointer; text-align:center; }
.rdv-emoji-lg { font-size: var(--fs-xl); }
.rdv-caption-sm { font-size: var(--fs-base); margin-top:4px; }
.rdv-warning-box { margin-top:8px; padding:12px; background:rgba(var(--warning-rgb),0.1); border:1px solid rgba(var(--warning-rgb),0.3); border-radius:var(--radius); font-size: var(--fs-base); color:var(--warning); }
.rdv-info-box { margin-top:12px; padding:12px; background:rgba(var(--info-rgb),0.1); border:1px solid rgba(var(--info-rgb),0.3); border-radius:var(--radius); font-size: var(--fs-base); color:var(--info-light); }
.rdv-secondary-bold { color:var(--secondary,var(--secondary)); font-size: var(--fs-base); font-weight:600; }
.rdv-pick-row { padding:8px 12px; cursor:pointer; border-bottom:1px solid rgba(var(--overlay-rgb),0.05); display:flex; align-items:center; gap:8px; transition:background .15s; }
.rdv-pick-row:hover { background:rgba(var(--secondary-rgb),0.08); }
.rdv-pick-row-dim { font-size: var(--fs-sm); opacity:.7; white-space:nowrap; }

/* Tech reparations */
.tech-phase-sub { font-size:var(--fs-base); color:var(--text-muted); margin-top:4px; }
.tech-warning-box { margin-top:10px; padding:10px 14px; background:rgba(var(--warning-rgb),0.1); border:1px solid rgba(var(--warning-rgb),0.3); border-radius:var(--radius); color:var(--warning); font-size: var(--fs-base); }
.tech-toggle-section { display:none; margin-top:10px; background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); padding:12px; }
.tech-flex-col-gap8 { display:flex; flex-direction:column; gap:8px; }
.tech-flex-gap6 { display:flex; gap:6px; }
.tech-grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:8px; }
.tech-divider { height:1px; background:rgba(var(--overlay-rgb),0.08); margin:4px 0; }
.tech-flex-center-gap6 { display:flex; gap:6px; align-items:center; }
.tech-text-dim-088 { font-size: var(--fs-md); color:rgba(var(--overlay-rgb),0.8); }
.tech-info-block { margin-top:10px; padding:10px 12px; background:rgba(var(--info-rgb),0.06); border:1px solid rgba(var(--info-rgb),0.2); border-radius:var(--radius); }
.tech-info-label { font-size: var(--fs-sm); color:var(--info); font-weight:600; margin-bottom:6px; }
.tech-info-item { font-size: var(--fs-base); color:rgba(var(--overlay-rgb),0.7); padding:2px 0; }
.tech-secondary-block { margin-top:10px; padding:10px 14px; background:rgba(var(--secondary-rgb),0.08); border:1px solid rgba(var(--secondary-rgb),0.2); border-radius:var(--radius); }
.tech-secondary-bold { font-size: var(--fs-base); color:var(--secondary,var(--secondary)); font-weight:600; }
.tech-rep-card { margin-bottom:8px; padding:8px 10px; background:rgba(var(--overlay-rgb),0.02); border:1px solid rgba(var(--overlay-rgb),0.06); border-radius:var(--radius); }
.tech-rep-row { display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.tech-badge-devis-ok { font-size: var(--fs-2xs); padding:2px 6px; border-radius:var(--radius-sm); background:rgba(var(--success-rgb),0.1); color:rgba(var(--success-rgb),0.7); pointer-events:none; }
.tech-btn-sm-mt4 { margin-top:4px; font-size: var(--fs-sm); padding:2px 8px; }
.tech-detail-row { font-size: var(--fs-sm); margin-top:6px; padding:6px 8px; background:rgba(var(--overlay-rgb),0.02); border-radius:var(--radius-sm); }
.tech-detail-row-success { font-size: var(--fs-sm); margin-top:6px; padding:6px 8px; background:rgba(var(--success-rgb),0.06); border:1px solid rgba(var(--success-rgb),0.15); border-radius:var(--radius-sm); }
.tech-detail-label { color:var(--text-dim); font-weight:500; }
.tech-detail-value-success { color:rgba(var(--success-rgb),0.8); }
.tech-detail-label-success { color:rgba(var(--success-rgb),0.7); font-weight:500; }
.tech-devis-row { display:flex; justify-content:space-between; align-items:center; }
.tech-success-block { padding:8px 12px; background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.2); border-radius:var(--radius); font-size: var(--fs-base); color:var(--success); }
.tech-actions-section { display:none; margin-top:10px; }
.tech-flex-gap8-wrap { display:flex; gap:8px; flex-wrap:wrap; }
.tech-filters-row { margin-bottom:12px; display:flex; gap:8px; flex-wrap:wrap; }
.tech-filter-input { flex:1; min-width:180px; }
.tech-filter-select { max-width:170px; }

/* Anim apercus */
.apercu-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:10000; display:flex; align-items:center; justify-content:center; }
.apercu-modal-box { background:var(--bg-card,var(--bg-alt)); border-radius:var(--radius-lg); width:90%; max-width:500px; padding:24px; max-height:80vh; overflow-y:auto; }
.apercu-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.apercu-modal-title { margin:0; font-size: var(--fs-lg); color:var(--text,#fff); }
.apercu-session-card { background:rgba(var(--overlay-rgb),0.04); border:1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius-lg); padding:14px; margin-bottom:8px; cursor:pointer; transition:all 0.15s; }
.apercu-session-name { font-weight:600; color:var(--text); margin-bottom:4px; }
.apercu-session-meta { font-size:var(--fs-base); color:var(--text-muted); }
.apercu-session-date { font-size: var(--fs-sm); color:var(--text-dim); margin-top:4px; }
.apercu-new-session-card { background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.25); border-radius:var(--radius-lg); padding:14px; margin-top:4px; cursor:pointer; text-align:center; transition:all 0.15s; }
.apercu-new-session-label { font-weight:600; color:var(--success); }
.apercu-badge-primary { background:rgba(var(--primary-rgb),0.15); color:var(--violet-light); padding:2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight:600; }
.apercu-badge-success { background:rgba(var(--success-rgb),0.15); color:var(--success); padding:2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight:600; }
.apercu-badge-danger { background:rgba(var(--danger-rgb),0.15); color:var(--danger); padding:2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight:600; }
.apercu-badge-warning { background:rgba(var(--warning-rgb),0.15); color:var(--warning); padding:2px 8px; border-radius:var(--radius-sm); font-size: var(--fs-2xs); font-weight:600; }
.apercu-card-pad { padding:18px 20px; margin-bottom:10px; }
.apercu-min200 { min-width:200px; }
.apercu-mb3 { margin-bottom:3px; }
.apercu-pad12 { padding:12px; }
.apercu-parcours-badge { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(var(--secondary-rgb),0.08); border:1px solid rgba(var(--secondary-rgb),0.2); border-radius:var(--radius); margin-bottom:6px; }
.apercu-parcours-text { color:var(--text-dim); font-size: var(--fs-base); }
.apercu-block-section { background:rgba(var(--overlay-rgb),0.03); border:1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-lg); padding:16px; margin-bottom:10px; }
.apercu-block-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.apercu-block-title { font-weight:600; color:var(--secondary,var(--secondary)); font-size: var(--fs-md); }
.apercu-grid-4col { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.apercu-tab-row { display:flex; gap:8px; margin-bottom:10px; }
.apercu-spinner { display:inline-block; width:28px; height:28px; border:3px solid rgba(var(--overlay-rgb),0.1); border-top-color:var(--secondary,var(--secondary)); border-radius:50%; animation:spin 0.8s linear infinite; }
.apercu-spinner-text { color:var(--text-muted); margin-top:8px; font-size: var(--fs-base); }
.apercu-drag-handle { color:var(--text-dim); font-size: var(--fs-base); cursor:grab; }
.apercu-pick-empty { color:rgba(var(--overlay-rgb),0.25); font-size: var(--fs-base); text-align:center; padding:8px; }

/* ══════════════════════════════════════════════
   JS TEMPLATE INLINE STYLE REPLACEMENTS
   Utility classes for hub-admin JS files
   ══════════════════════════════════════════════ */

/* Layout helpers */
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mt-8 { margin-top: 8px; }
.pl-36 { padding-left: 36px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-success { color: var(--success) !important; }
.lh-relaxed { line-height: 1.6; }

/* Admin dons-stock */
.ds-article-card { border: 1px solid rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); padding: 12px; margin-bottom: 10px; background: rgba(var(--overlay-rgb),0.02); }
.ds-article-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ds-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-col-full { grid-column: 1 / -1; }
.ds-specs-zone { margin-top: 8px; }

/* Admin licence */
.plan-price-lg { font-size: var(--fs-3xl); font-weight: 800; }
.plan-price-suffix { font-weight: 400; opacity: 0.5; }
.plan-modules-dim { opacity: 0.5; margin: 4px 0 8px; }
.plan-desc-dim { opacity: 0.4; }
.plan-footer-dim { opacity: 0.5; }

/* Nav/footer row */
.nav-footer-row { display: flex; gap: 8px; align-items: center; cursor: grab; }
.nav-toggle-icon { font-size: var(--fs-xl); }

/* Admin wizard */
.wiz-field-wrap { margin-bottom: 14px; }
.wiz-input-full { width: 100%; padding: 10px 12px; background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color: var(--text,#fff); font-size: var(--fs-md); margin-top: 6px; box-sizing: border-box; }
.wiz-color-row { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.wiz-launch-btn { padding: 12px 30px; background: var(--success); color: var(--btn-text); border: none; border-radius:var(--radius); cursor: pointer; font-weight: 700; font-size:var(--fs-lg); transition: transform 0.15s ease, filter 0.15s ease; }
.wiz-launch-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.wiz-launch-btn:active { transform: scale(0.97); }
.wiz-launch-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
.wiz-launch-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.wiz-social-url { flex: 1; }
.wiz-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: var(--fs-2xs); font-weight: 700; flex-shrink: 0; }

/* Admin apparence */
.app-layout-split { height: calc(100vh - 120px); }
.app-panel-left { flex: 1.5; overflow-y: auto; padding-right: 16px; }
.app-panel-right { overflow-y: auto; border-left: 1px solid rgba(var(--overlay-rgb),0.08); padding-left: 16px; }
.app-radio-card { padding: 12px; border-radius:var(--radius); }
.app-color-input { width: 40px; height: 32px; border: none; background: none; cursor: pointer; }
.app-hex-input { width: 90px; padding: 6px 8px; background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius); color: var(--text,#fff); font-size: var(--fs-base); }
.app-range-val { min-width: 50px; }
.app-preview-box { padding: 16px; border-radius:var(--radius-lg); }

/* CMS inline removals */
.cms-flex-col-gap4 { display: flex; flex-direction: column; gap: 4px; }
.cms-flex-col-gap6 { display: flex; flex-direction: column; gap: 6px; }
.cms-link-box { background: rgba(var(--success-rgb),0.08); border: 1px solid rgba(var(--success-rgb),0.3); border-radius:var(--radius-lg); padding: 14px; margin-bottom: 18px; }
.cms-link-label { font-size: var(--fs-sm); color: var(--success); margin-bottom: 8px; }
.cms-link-code { word-break: break-all; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--success-light); background: rgba(0,0,0,0.3); padding: 10px; border-radius:var(--radius); }

/* Hub admin textes */
.txt-section-mt16 { margin-top: 16px; }

/* Hub admin supervision */
.sup-search-input { font-size: var(--fs-base); flex: 1; min-width: 150px; }

/* Admin roles */
.roles-grid-auto { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .roles-grid-auto { grid-template-columns: 1fr; } }
.role-color-picker { width: 32px; height: 32px; border: none; }
.role-icon-input { width: 40px; font-size: var(--fs-xl); padding: 4px; }
.perm-table { width: 100%; border-collapse: collapse; }
.perm-cell { padding: 2px 4px; }
.perm-cell-sm { padding: 3px 4px; }
.perm-checkbox { width: 13px; height: 13px; }
.role-mod-checkbox { width: 14px; height: 14px; }

/* Admin stock categories */
.sc-btn-pad { padding: 4px 8px; }
.sc-btn-add-pad { padding: 4px 10px; margin-left: 6px; }
.sc-inh-checkbox { width: 18px; height: 18px; accent-color: var(--accent,var(--success)); cursor: pointer; margin-top: 2px; }

/* Admin bonus */
.bonus-euro-sm { font-size: var(--fs-sm); color: var(--success); }
.bonus-toggle-sm { font-size: var(--fs-2xs); color: rgba(var(--overlay-rgb),0.25); cursor: pointer; }
.bonus-input-montant { width: 60px; text-align: right; color: var(--success); font-weight: 600; }

/* Mon config tech */
.cfg-link-violet { color: var(--violet-light); }

/* ══════════════════════════════════════════════
   INLINE-STYLE CLEANUP UTILITIES
   ══════════════════════════════════════════════ */

/* Text style helpers */
.italic { font-style: italic; }
.whitespace-pre-line { white-space: pre-line; }

/* Font size one-offs */
.text-105 { font-size: var(--fs-lg); }

/* Margin helpers (supplements) */
.mt-40 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   JS MODULE INLINE-STYLE CLEANUP - batch 5
   ══════════════════════════════════════════════ */

/* Bonus link */
.link-bonus-more { text-decoration:underline; margin-left:6px; font-size:var(--fs-base); }

/* Atelier date badge month */
.atelier-num-month { font-size:var(--fs-2xs); font-weight:400; }

/* Anim cours row inside parcours */
.anim-cours-row { display:flex; align-items:center; gap:6px; padding:4px 10px; background:rgba(var(--secondary-rgb),0.06); border-radius:var(--radius); font-size: var(--fs-sm); color:var(--text-muted); }
.anim-cours-num { font-weight:600; font-size: var(--fs-2xs); min-width:16px; color:var(--secondary); }

/* Catalogue form check label */
.cat-form-check-label { display:flex; align-items:center; gap:8px; cursor:pointer; }

/* Config pro error list */
.cfg-error-list { margin:6px 0 0 22px; }

/* Inline badge success (supplement) */
.inline-badge-success { background:rgba(var(--success-rgb),0.1); border:1px solid rgba(var(--success-rgb),0.3); border-radius:var(--radius); color:var(--success); padding:6px 14px; font-size: var(--fs-base); }

/* Margin/layout extras */
.mb-12 { margin-bottom:0.75rem; }
.mb-14 { margin-bottom:0.875rem; }
.d-inline-block { display:inline-block; }
.inline-block-mt12 { margin-top:12px; display:inline-block; }
.progress-track-lg { background:rgba(var(--overlay-rgb),0.08); border-radius:var(--radius); height:5px; }
.mb-8 { margin-bottom:0.5rem; }
.mt-6 { margin-top:0.375rem; }
.mt-10 { margin-top:0.625rem; }
.text-dim-07 { font-size: var(--fs-2xs); color:var(--text-dim); }
.text-body-bold-lg { font-weight:700; font-size:var(--fs-lg); color:var(--text); }
.text-body-088 { font-size: var(--fs-md); font-weight:700; color:var(--text); }
.text-body-092 { font-size: var(--fs-md); font-weight:700; color:var(--text); }
.text-muted-085 { font-size: var(--fs-base); color:var(--text-muted); }
.text-base { font-size:var(--fs-lg); }

/* ══════════════════════════════════════════════
   TEMPLATE-STRING UTILITIES - batch 3
   Textarea, image, embed helpers
   ══════════════════════════════════════════════ */
.textarea-tall { min-height: 100px; resize: vertical; }
.textarea-md { min-height: 80px; resize: vertical; }
.img-rounded { max-width: 100%; border-radius:var(--radius); margin: 12px 0; }
.thumb-sm { height: 50px; border-radius:var(--radius-sm); }
.font-weight-500 { font-weight: 500; }

/* ══════════════════════════════════════════════
   GENERIC HOVER / ACTIVE - Catch-all for any btn- class
   that has cursor:pointer but no specific :hover rule.
   Uses low-specificity so explicit per-button hovers win.
   ══════════════════════════════════════════════ */
[class*="btn-"]:hover:not(:disabled),
[class*="-btn"]:hover:not(:disabled),
[class*="-cta"]:hover:not(:disabled),
.submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.92);
}
[class*="btn-"]:active:not(:disabled),
[class*="-btn"]:active:not(:disabled),
[class*="-cta"]:active:not(:disabled),
.submit-btn:active:not(:disabled) {
  transform: scale(0.97);
}
/* ══════════════════════════════════════════════
   BASE RESET - Global resets, root variables, scrollbar, body
   Source: decomposed from bundle-common.min.css
   All sizes in rem for A+/A- accessibility scaling
   ══════════════════════════════════════════════ */

/* === KEYFRAMES === */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === ROOT VARIABLES (layout + aliases) === */
/* Les couleurs de base sont dans theme-vars.css.
   Ici on ne définit que les aliases historiques et variables de layout. */
:root {
  color-scheme: dark;
  --header-height: 140px;
  --nav-h: 90px;
  --radius-lg: 1rem;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 0.22s;
  /* Aliases historiques → CSS vars modernes */
  --violet-dark: var(--bg-card);
  --violet-mid: var(--bg-surface, var(--bg-alt));
  --violet-card: var(--bg-hover);
  --violet-card-h: var(--bg-hover);
  --violet-main: var(--primary);
  --violet-light: var(--secondary);
  --bg-pale: var(--bg-tinted);
  --gray-light: var(--border-warm, var(--border));
  --bg-surface: var(--bg-alt);
  --bg-card-h: var(--bg-hover);
  --border-h: rgba(var(--secondary-rgb), 0.40);
  /* --text-dim défini dans theme-vars.css (var(--text-dim)) — pas d'override ici */
  --a1: var(--success);
  --a2: var(--info, #06b6d4);
  --a3: var(--primary);
  --a4: var(--secondary);
  --a5: var(--danger);
  --a6: var(--success);
  --indigo: #4338ca;
}

/* === BOX SIZING RESET === */
*,
::after,
::before {
  box-sizing: border-box;
}

/* === HTML === */
html {
  scroll-behavior: smooth;
}

/* === BODY === */
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  padding-top: var(--nav-h, 90px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.home {
  padding-top: 0 !important;
}
body.home::before {
  display: none !important;
}

/* === BASE ELEMENTS === */
a, button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--overlay-rgb), 0.15);
  border-radius:var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--overlay-rgb), 0.25);
}

/* === LIGHT THEME SCROLLBAR === */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(var(--overlay-rgb), 0.2);
}

/* === SELECTION === */
::selection {
  background: rgba(var(--primary-rgb, 72, 54, 237), 0.3);
  color: #fff;
}
/* ══════════════════════════════════════════════
   BASE NAV - Navigation bar, logo, links, dropdown
   Source: decomposed from bundle-common.min.css
   All sizes in rem - buttons handled by obso-utils.css
   ══════════════════════════════════════════════ */

/* === NAV CONTAINER === */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 4%, 3.75rem);
  gap: 0.75rem;
  background: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
  overflow: visible;
}

nav.scrolled {
  background: rgba(36, 36, 56, 0.9) !important;
  border-color: var(--border);
  backdrop-filter: blur(10px) !important;
}

nav:not(.scrolled) {
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* === LOGO === */
.logo-mark, .nav-logo {
  color: var(--text);
  flex-shrink: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}


.nav-logo-img {
  height: 10rem;
  width: auto;
  display: block;
  margin: -1.5rem 0 -2.5rem 0;
}

/* footer-logo-img gere dans base-footer.css */


/* === NAV LINKS === */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(var(--overlay-rgb), 0.55);
  border-radius:var(--radius);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}

.nav-links a:hover {
  color: var(--text);
  background: rgba(var(--overlay-rgb), 0.06);
}

.nav-links a.active {
  color: var(--text);
  background: rgba(var(--secondary-rgb), 0.18);
  font-weight: 600;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0.6875rem;
  right: 0.6875rem;
  height: 2px;
  background: var(--violet-light, var(--secondary));
  border-radius:var(--radius-sm) 2px 0 0;
}

/* === NAV CTA BUTTON (layout only - colors in obso-utils.css) === */
.btn-nav-cta {
  padding: 0.5rem 1rem;
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-nav-cta:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(var(--primary-rgb, 72, 54, 237), 0.3);
}

/* === NAV DROPDOWN === */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  cursor: pointer;
}

.dropdown-arrow {
  font-size:var(--fs-2xs);
  transition: transform 0.2s;
  display: inline-block;
}

.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet-card, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.375rem 0;
  min-width: 12.5rem;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: 0;
  right: 0;
  height: 0.375rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu li {
  width: 100%;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.7);
  border-radius:var(--radius);
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown-menu a:hover {
  background: rgba(var(--overlay-rgb), 0.06);
  color: var(--text);
}

/* === NAV TOGGLE (hamburger) === */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 0.3125rem;
  cursor: pointer;
  padding: 0.375rem;
  z-index: 201;
}

.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 0.125rem;
  background: var(--text);
  border-radius: 0.125rem;
  transition: transform 0.2s, opacity 0.2s;
}

/* ══════════════════════════════════════════════
   BASE SECTIONS - Section layout, headers, page-hero, filters, animations
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === SECTION BASE === */
section {
  padding: 5rem clamp(1.25rem, 5%, 5rem);
  width: 100%;
}


/* === SECTION LABEL (small category tag) === */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: rgba(var(--primary-rgb, 72, 54, 237), 0.1);
  border: 1px solid rgba(var(--primary-rgb, 72, 54, 237), 0.2);
  padding: 0.3125rem 0.75rem;
  border-radius:var(--radius-full);
  margin-bottom: 1rem;
}

/* === SECTION HEADER === */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 43.75rem;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-family: var(--font);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.section-header p {
  font-family: var(--font);
  font-size: var(--fs-lg);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.6;
}

/* === PAGE HERO (sub-pages) === */
.page-hero {
  text-align: center;
  padding: 2.5rem clamp(1rem, 5%, 5rem) 2.5rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-family: var(--font);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.page-hero p {
  font-family: var(--font);
  font-size: clamp(0.9rem, 2vw, 1.125rem);
  color: rgba(var(--overlay-rgb), 0.6);
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.6;
}

.page-hero .hero-description {
  margin-top: 0.75rem;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  opacity: 0.75;
}

.page-hero .hero-icon {
  font-size: var(--fs-4xl);
  line-height: 1;
  display: block;
  margin-top: 0.625rem;
}

.page-hero .hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* === FILTER BAR === */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* === FADE-UP ANIMATION === */
.fade-up {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === CONTACT GRID === */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.5rem;
  max-width: 62.5rem;
  margin: 0 auto;
}
/* ══════════════════════════════════════════════
   BASE CARDS - How-grid, fiche, public, service, niveau, forum, discord, obso-card
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === HOW GRID (3 steps) === */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 62.5rem;
  margin: 0 auto;
}

.how-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.how-step:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}

.how-step h3 {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  margin: 0.75rem 0 0.5rem;
}

.how-step p {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.5;
}

/* === FICHE CARDS === */
.fiche-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.fiche-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}

.fiche-header {
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.fiche-icon {
  font-size: var(--fs-3xl);
  flex-shrink: 0;
}

.fiche-badge {
  display: inline-block;
  font-size:var(--fs-2xs);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius:var(--radius-full);
  background: rgba(var(--primary-rgb, 72, 54, 237), 0.12);
  color: var(--primary);
}

.fiche-footer {
  padding: 0.75rem 1.25rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-base);
}

.fiche-meta {
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb), 0.4);
}

/* === PUBLIC CARDS === */
.public-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.public-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.public-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 0.75rem;
}

.public-card h3 {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.public-card p {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.5;
}

/* === FEATURE GRID CALLOUT === */
.feature-footer-callout {
  max-width: 40rem;
  margin: 2rem auto 0;
  padding: 1.5rem 2rem;
  background: rgba(var(--secondary-rgb), 0.04);
  border-left: 3px solid var(--secondary);
  border-radius: var(--radius);
}
.feature-footer-title {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
}
.feature-footer-text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-style: italic;
  line-height: 1.6;
}

/* === SERVICE CTA CARDS === */
.services-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 62.5rem;
  margin: 0 auto;
}

.services-prestations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1.25rem;
}

.service-cta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.service-cta-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}

.service-cta-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 0.25rem;
}

.service-cta-card h3 {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.service-cta-card p {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.5;
}

/* === NIVEAU CARDS (parcours levels) === */

.niveau-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.niveau-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.niveau-num {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.niveau-titre {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.niveau-body {
  padding: 1.25rem 1.5rem;
}

.niveau-body p {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.niveau-atelier,
a.niveau-atelier {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border-radius:var(--radius);
  margin-bottom: 0.5rem;
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.7);
  text-decoration: none;
  transition: background 0.15s;
}

.niveau-atelier:hover {
  background: rgba(var(--overlay-rgb), 0.06);
}

.niveau-cta {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* === FORUM CARD === */
.forum-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.forum-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}

/* === DISCORD BLOCK === */
.discord-block {
  background: linear-gradient(135deg, var(--discord), var(--discord-hover));
  border-radius:var(--radius);
  padding: 2rem 2.5rem;
  text-align: center;
  color: #fff;
}

.discord-block h3 {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.discord-block p {
  font-family: var(--font);
  font-size: var(--fs-md);
  opacity: 0.9;
  margin-bottom: 1.25rem;
}

/* === BADGE PARCOURS === */
.badge-parcours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(var(--primary-rgb, 72, 54, 237), 0.08);
  border: 1px solid rgba(var(--primary-rgb, 72, 54, 237), 0.2);
  border-radius:var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

/* === OBSO CARD (generic reusable) === */
.obso-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.obso-card:hover {
  transform: translateY(-0.0625rem);
  box-shadow: var(--shadow-lg);
}
/* ══════════════════════════════════════════════
   BASE ATELIERS - Pedagogy banner, accordion, activities, modules, parcours
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === PEDAGOGY BANNER === */
.pedagogy-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, rgba(var(--secondary-rgb), 0.05) 100%);
  border: 1px solid rgba(var(--secondary-rgb), 0.12);
  border-radius: 1rem;
}

.pedagogy-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pedagogy-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.1);
}

.pedagogy-item.highlight {
  background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.06) 100%);
  border-color: rgba(var(--secondary-rgb), 0.3);
  box-shadow: 0 4px 16px rgba(var(--secondary-rgb), 0.12);
}
.pedagogy-item.highlight .pedagogy-title {
  color: var(--secondary);
}

.pedagogy-icon {
  font-size: 2rem;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--secondary-rgb), 0.08);
}

.pedagogy-title {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.pedagogy-sub {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.pedagogy-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
  opacity: 0.7;
}

/* === ATELIERS ACCORDION === */
.ateliers-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 60rem;
  margin: 0 auto;
}
#ateliers-dynamic {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.atelier-thema {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 1rem);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.atelier-thema:hover {
  border-color: rgba(var(--secondary-rgb), 0.3);
}

.atelier-thema.open {
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: var(--shadow-lg);
}

/* === ATELIER HEADER === */
.atelier-thema-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s;
  gap: 1rem;
}

.atelier-thema-header:hover {
  background: rgba(var(--overlay-rgb), 0.03);
}

.atelier-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-2xs);
  font-weight: 700;
  padding: 0.1875rem 0.625rem;
  border-radius:var(--radius);
  background: rgba(var(--primary-rgb, 72, 54, 237), 0.12);
  color: var(--primary);
  white-space: nowrap;
}

.atelier-thema-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.atelier-emoji {
  font-size: var(--fs-3xl);
  flex-shrink: 0;
}

.atelier-thema-title {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.atelier-thema-sub {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.5);
  margin-top: 0.125rem;
}

.atelier-chevron {
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.4);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.atelier-thema.open .atelier-chevron {
  transform: rotate(180deg);
}

/* === ATELIER BODY (accordion content) === */
.atelier-thema-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  border-top: 1px solid transparent;
}

.atelier-thema.open .atelier-thema-body {
  max-height: 62.5rem; /* 1000px — large enough for any content */
  border-top-color: var(--border);
}

/* === ACTIVITY BLOCKS === */
.atelier-thema-body-inner {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.activity-block {
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius:var(--radius);
  padding: 1rem 1.25rem;
}


.block-label {
  font-family: var(--font);
  font-size:var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--overlay-rgb), 0.4);
  margin-bottom: 0.375rem;
}

.activity-text {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.7);
  line-height: 1.5;
}

/* === MODULES BLOCK === */
.modules-block {
  padding: 1rem 1.5rem;
}

.modules-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.module-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  background: rgba(var(--overlay-rgb), 0.06);
  color: rgba(var(--overlay-rgb), 0.65);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
}

/* === FICHES BLOCK === */
.fiches-block {
  padding: 1rem 1.5rem;
}

.fiches-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fiche-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.65);
  background: rgba(var(--overlay-rgb), 0.03);
  border-radius:var(--radius);
  transition: background 0.15s;
  text-decoration: none;
}

.fiche-item:hover {
  background: rgba(var(--overlay-rgb), 0.06);
}

/* === PARCOURS NIVEAUX GRID === */
.parcours-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.5rem;
}

/* ══════════════════════════════════════════════
   ATELIERS - Responsive (3 breakpoints)
   Cartes ateliers, sessions, pédagogie
   ══════════════════════════════════════════════ */

/* Desktop large */
@media (max-width: 1200px) {
  .atelier-thema-body-inner {
    grid-template-columns: 1fr 1fr;
  }
  .how-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablette */
@media (max-width: 900px) {
  .pedagogy-banner {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
  }
  .pedagogy-item {
    flex: 1 1 40%;
    padding: 1.25rem 0.75rem;
  }
  .pedagogy-sep {
    flex: 0 0 auto;
    width: auto;
    font-size: 1.25rem;
  }
  .parcours-niveaux {
    grid-template-columns: 1fr;
  }
  .badge-parcours {
    flex-direction: column;
    text-align: center;
  }
  .badge-parcours .btn-primary {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 640px) {
  /* Grilles */
  .atelier-thema-body-inner {
    grid-template-columns: 1fr;
  }
  .how-grid {
    grid-template-columns: 1fr;
  }

  /* Cartes ateliers */
  .atelier-thema-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 1.25rem;
    position: relative;
  }
  .atelier-thema-left {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    gap: 0.5rem;
  }
  .atelier-emoji {
    align-self: center;
    font-size: var(--fs-4xl);
  }
  .atelier-thema-left > div {
    align-self: center;
    text-align: center;
    width: 100%;
  }
  .atelier-thema-title {
    font-size: var(--fs-lg);
    text-align: center;
  }
  .atelier-thema-sub {
    font-size: var(--fs-base);
    text-align: center;
  }
  .atelier-thema-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    width: 100%;
  }
  .atelier-thema-right .btn-ghost {
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-md);
  }
  .atelier-chevron {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: var(--fs-sm);
  }

  /* Accordion spacing */
  .ateliers-accordion {
    gap: 0.875rem;
    padding: 0 0.5rem;
  }
  .atelier-thema {
    border-radius:var(--radius);
    margin-bottom: 1.125rem;
  }
  .atelier-num-badge {
    align-self: flex-start;
    font-size: var(--fs-xs);
    padding: 0.1875rem 0.625rem;
    border-radius:var(--radius);
    margin-bottom: 0.25rem;
  }

  /* Pedagogy */
  .pedagogy-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem;
  }
  .pedagogy-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 0.25rem 0;
    font-size: 1.25rem;
  }
  .pedagogy-item {
    padding: 1.25rem;
    flex: none;
    width: 100%;
  }

  /* Session cards */
  .session-card {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  .session-date {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(var(--secondary-rgb), 0.25);
    gap: 0.125rem;
  }
  .session-day {
    font-size: var(--fs-2xl);
  }
  .session-cta {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 0.875rem 1.125rem;
    min-width: unset;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .session-body {
    padding: 0.875rem 1.125rem;
  }

  /* Niveau ateliers */
  .niveau-atelier,
  a.niveau-atelier {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    gap: 0.5rem;
  }
  .niveau-atelier .na-num {
    font-size: var(--fs-2xs);
  }
  .niveau-atelier .na-arrow {
    display: none;
  }
}
/* ══════════════════════════════════════════════
   BASE FOOTER - Footer layout, brand, columns, newsletter, bottom bar
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === FOOTER CONTAINER === */
footer {
  padding: 3.5rem 2rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt, var(--bg-alt));
}

/* === FOOTER INNER === */
.footer-inner {
  max-width: 75rem;
  margin: 0 auto;
}

/* === FOOTER BRAND (centré, compact) === */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.footer-brand p {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.45);
  line-height: 1.4;
  margin: 0;
}

.footer-brand .social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.footer-brand .social-links a {
  color: rgba(var(--overlay-rgb), 0.35);
  font-size:var(--fs-lg);
  transition: color 0.2s;
}

.footer-brand .social-links a:hover {
  color: var(--text);
}

/* === FOOTER COLUMNS (grille en dessous) === */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

/* === FOOTER COLUMNS === */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col h4 {
  font-family: var(--font);
  font-size:var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--overlay-rgb), 0.35);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.6);
  padding: 0.25rem 0;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text);
}

/* === FOOTER NEWSLETTER === */
.footer-newsletter {
  grid-column: 1 / -1;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 0.5rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-newsletter-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font);
}

.footer-newsletter-emoji {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
}

.footer-newsletter-text strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--text);
}

.footer-newsletter-sub {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb), 0.45);
  margin-top: 0.125rem;
}

.footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.footer-newsletter-input {
  font-family: var(--font);
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-base);
  background: rgba(var(--overlay-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  color: var(--text);
  min-width: 14rem;
  outline: none;
  transition: border-color 0.2s;
}

.footer-newsletter-input::placeholder {
  color: rgba(var(--overlay-rgb), 0.35);
}

.footer-newsletter-input:focus {
  border-color: var(--primary);
}

.footer-newsletter-btn {
  font-family: var(--font);
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-base);
  font-weight: 600;
  background: var(--primary);
  color: var(--btn-text);
  border: none;
  border-radius:var(--radius);
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.footer-newsletter-btn:hover {
  opacity: 0.9;
}

.footer-newsletter-msg {
  font-size: var(--fs-base);
  margin-top: 0.5rem;
  text-align: center;
}

/* === FOOTER BOTTOM === */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb), 0.3);
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-bottom-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer-bottom-links a {
  color: rgba(var(--overlay-rgb), 0.5);
  font-size:var(--fs-base);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom-links a:hover {
  color: var(--text);
}

.footer-bottom a {
  color: rgba(var(--overlay-rgb), 0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-ecoindex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-ecoindex img, .footer-ecoindex svg { height: 1.5rem; width: auto; }

.footer-bottom a:hover {
  color: var(--text);
}

/* === FOOTER LOGO === */
.footer-logo-img {
  height: 6rem;
  width: auto;
  display: block;
}

/* === RESPONSIVE FOOTER === */
@media (max-width: 900px) {
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .footer-newsletter-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .footer-newsletter-form {
    width: 100%;
    flex-direction: column;
  }
  .footer-newsletter-input {
    min-width: auto;
    width: 100%;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}
/* ══════════════════════════════════════════════
   BASE FORMS - Service forms, inputs, labels, tabs, badges, spinners
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === KEYFRAMES === */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-0.375rem); }
  40%, 80% { transform: translateX(0.375rem); }
}
.form-shake { animation: form-shake 0.5s ease-in-out; }

/* === SERVICE FORM SECTION === */
.service-form-section {
  max-width: none;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.service-form-section > .section-header {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.service-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 2.5rem 2rem;
}

.service-form-title {
  font-family: var(--font);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-align: center;
}

.service-form-sub {
  font-family: var(--font);
  font-size: var(--fs-md);
  color: rgba(var(--overlay-rgb), 0.5);
  text-align: center;
  margin-bottom: 2rem;
}

.service-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.service-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.service-form-group label {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(var(--overlay-rgb), 0.6);
}

.service-form-group input:not([type="checkbox"]):not([type="radio"]),
.service-form-group select,
.service-form-group textarea {
  font-family: var(--font);
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-base);
  background: rgba(var(--overlay-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.service-form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.service-form-group select:focus,
.service-form-group textarea:focus {
  border-color: var(--primary);
}

.service-form-group textarea {
  resize: vertical;
  min-height: 6rem;
}

.service-form-msg {
  display: none;
}

.service-form-error {
  font-size: var(--fs-sm);
  color: var(--danger);
  margin-top: 0.25rem;
}

/* === SERVICE BRIDGE (divider with text) === */
.service-bridge {
  text-align: center;
  padding: 2.5rem 2rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border-radius:var(--radius);
  margin: 2rem 0;
}

/* === COMMUNITY SPLIT === */
.community-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 62.5rem;
  margin: 0 auto;
}

.community-text h2 {
  font-family: var(--font);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.community-text p {
  font-family: var(--font);
  font-size:var(--fs-lg);
  color: rgba(var(--overlay-rgb), 0.6);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* === STATS ROW === */
.stats-row-sm {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
}

.stat-item .stat-num {
  font-family: var(--font);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.stat-item .stat-label {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb), 0.5);
  margin-top: 0.25rem;
}

/* === FORM HONEYPOT & CONSENT === */
.form-honeypot {
  position: absolute;
  left: -9999rem;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.5);
  margin-top: 1rem;
  cursor: pointer;
}
.form-consent label { cursor: pointer; line-height: 1.5; }
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  border: 2px solid var(--border);
  border-radius: 0.3rem;
  background: rgba(var(--overlay-rgb), 0.04);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  vertical-align: middle;
  flex-shrink: 0;
}
input[type="checkbox"]:checked {
  background: var(--secondary);
  border-color: var(--secondary);
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}
.form-consent input[type="checkbox"] {
  margin-top: 0.15rem;
}

/* === SUBMIT BUTTON (layout - colors via obso-utils.css) === */
.submit-btn {
  font-family: var(--font);
  width: 100%;
  padding: 0.875rem;
  font-size:var(--fs-lg);
  font-weight: 700;
  border-radius:var(--radius);
  border: none;
  cursor: pointer;
  margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--btn-text);
  box-shadow: 0 0.375rem 1.25rem rgba(var(--primary-rgb), 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.92);
  box-shadow: 0 0.625rem 1.75rem rgba(var(--primary-rgb), 0.45);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === SELECT STYLING === */
select {
  font-family: var(--font);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  padding-right: 2rem;
}

/* === ROLE BADGE === */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size:var(--fs-2xs);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius:var(--radius-full);
  background: rgba(var(--secondary-rgb, 114, 115, 249), 0.12);
  color: var(--secondary);
}

/* === SPINNER === */
.obso-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.125rem solid rgba(var(--overlay-rgb), 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* === EMPTY STATE === */
.obso-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: rgba(var(--overlay-rgb), 0.4);
  font-family: var(--font);
  font-size: var(--fs-md);
}
/* ══════════════════════════════════════════════
   BASE ADMIN UI - Admin buttons, modals, lists, editors, autocomplete
   Source: decomposed from bundle-common.min.css
   All sizes in rem for accessibility scaling
   ══════════════════════════════════════════════ */

/* === ADMIN BUTTONS === */

.admin-btn-delete:hover {
  background: rgba(var(--danger-rgb, 239, 68, 68), 0.2);
}


.admin-btn-edit:hover {
  background: rgba(var(--overlay-rgb), 0.1);
}

/* === ACTION BUTTONS (colored) === */

.btn-action-green:hover {
  opacity: 0.85;
}


.btn-action-red:hover {
  opacity: 0.85;
}


.btn-action-violet:hover {
  opacity: 0.85;
}

/* === ADMIN LIST ITEM === */

.admin-list-item:hover {
  background: rgba(var(--overlay-rgb), 0.03);
}

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

/* === MODAL WRAPPERS (admin patterns) === */
.modal-wrapper-sm {
  max-width: 25rem;
}

.modal-wrapper-md {
  max-width: 37.5rem;
}

.modal-wrapper-lg {
  max-width: 50rem;
}



/* === OBSO MODAL (generic overlay pattern) === */

.obso-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* === AUTOCOMPLETE === */

.obso-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius, 0.5rem) var(--radius, 0.5rem);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 50;
  box-shadow: var(--shadow-lg);
}


.obso-autocomplete-item:hover {
  background: rgba(var(--overlay-rgb), 0.06);
}

/* === MODAL DIVIDER / SECTION === */


.obso-modal-section h4 {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(var(--overlay-rgb), 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════
   MOD-* - Admin text-editor / config UI classes
   Extracted from inline styles in JS templates
   ══════════════════════════════════════════════ */

/* --- Text inputs (admin config forms) --- */
.mod-txt-input {
  padding: 0.375rem 0.5rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-sm);
  color: var(--text, #fff);
  font-size: var(--fs-base);
  font-family: var(--font);
  box-sizing: border-box;
}
.mod-txt-input-sm {
  padding: 0.25rem 0.5rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-sm);
  color: var(--text, #fff);
  font-size: var(--fs-sm);
  font-family: var(--font);
  box-sizing: border-box;
}
.mod-txt-full { width: 100%; box-sizing: border-box; }
.mod-txt-area { resize: vertical; }
.mod-txt-mono { font-family: var(--font-mono); }
.mod-txt-search {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  color: var(--text, #fff);
  font-size: var(--fs-md);
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* --- Grid rows (key/value editors) --- */
.mod-grid-row {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3125rem 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
  font-size: var(--fs-base);
}
.mod-grid-header {
  display: grid;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.mod-grid-3col-200 { grid-template-columns: 12.5rem 1fr 1fr; }
.mod-grid-3col-180 { grid-template-columns: 11.25rem 1fr 1fr; }
.mod-grid-3col-160 { grid-template-columns: 10rem 1fr 1fr; }
.mod-grid-3col-140 { grid-template-columns: 8.75rem 1fr 1fr; }
.mod-grid-2col-200 { grid-template-columns: 12.5rem 1fr; }
.mod-grid-2col-180 { grid-template-columns: 11.25rem 1fr; }
.mod-grid-2col-160 { grid-template-columns: 10rem 1fr; }
.mod-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.mod-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.mod-grid-catalogue { grid-template-columns: 1fr 5rem 3.75rem 5rem 1.875rem; gap: 0.375rem; }

/* --- Section titles (uppercase label) --- */
.mod-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

/* --- Field labels --- */
.mod-field-label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(var(--overlay-rgb), 0.7);
  display: block;
  margin-bottom: 0.375rem;
}
.mod-field-label-spaced { margin: 1.25rem 0 0.375rem; }
.mod-field-label-spaced-sm { margin: 0.75rem 0 0.375rem; }
.mod-field-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

/* --- Code key (monospace key label) --- */
.mod-code-key {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Legal article card --- */
.mod-legal-card {
  margin-bottom: 0.5rem;
  padding: 0.625rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border: 1px solid rgba(var(--overlay-rgb), 0.06);
  border-radius:var(--radius);
}

/* --- About row --- */
.mod-about-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
  font-size: var(--fs-base);
}

/* --- Grab handle --- */
.mod-grab-handle {
  color: var(--text-dim);
  cursor: grab;
}

/* --- Help text (small muted) --- */
.mod-help-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 0 0 0.5rem;
}

/* --- Divider section --- */
.mod-divider-section {
  margin-top: 2rem;
  border-top: 2px solid rgba(var(--overlay-rgb), 0.08);
  padding-top: 1.25rem;
}

/* --- Inline message --- */
.mod-msg {
  font-size: var(--fs-base);
}

/* --- Page title --- */
.mod-page-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}

/* --- Color picker (small) --- */
.mod-color-picker {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius:var(--radius-sm);
  cursor: pointer;
  background: transparent;
}

/* ══════════════════════════════════════════════
   WIZ-* - Setup wizard classes
   ══════════════════════════════════════════════ */
.wiz-container { max-width: 43.75rem; margin: 0 auto; padding: 2.5rem 1.5rem; width: 100%; }
.wiz-header { margin-bottom: 1.875rem; }
.wiz-emoji { font-size: var(--fs-4xl); margin-bottom: 0.5rem; }
.wiz-progress { display: flex; gap: 0.25rem; margin-bottom: 1.875rem; }
.wiz-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.wiz-step-title { margin: 0 0 0.25rem; }
.wiz-step-desc { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 1.25rem; }
.wiz-welcome-title { margin: 0; font-size: var(--fs-3xl); }
.wiz-welcome-sub { color: var(--text-muted); margin: 0.5rem 0 0; }
.wiz-field { margin-bottom: 0.875rem; }
.wiz-label { font-size: var(--fs-md); font-weight: 600; }
.wiz-hint { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.wiz-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  color: var(--text, #fff);
  font-size: var(--fs-md);
  margin-top: 0.375rem;
  box-sizing: border-box;
}
.wiz-color-picker { width: 2.5rem; height: 2rem; border: none; cursor: pointer; }
.wiz-subsection {
  margin-top: 1rem;
  border-top: 1px solid rgba(var(--overlay-rgb), 0.08);
  padding-top: 0.75rem;
}
.wiz-sub-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.wiz-soc-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
}
.wiz-mod-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius);
  cursor: pointer;
}
.wiz-checkbox { accent-color: var(--success); width: 1.125rem; height: 1.125rem; }
.wiz-radio-card {
  flex: 1;
  padding: 0.75rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  cursor: pointer;
  text-align: center;
}
.wiz-role-card {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 0.875rem;
  padding: 0.75rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius);
}
.wiz-role-color {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius:var(--radius);
  cursor: pointer;
  background: none;
  padding: 0;
  flex-shrink: 0;
}
.wiz-role-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0.5;
  display: block;
  margin-bottom: 0.1875rem;
}
.wiz-upload-btn {
  padding: 0.625rem 1.25rem;
  background: rgba(var(--overlay-rgb), 0.06);
  border: 1px dashed rgba(var(--overlay-rgb), 0.2);
  border-radius:var(--radius);
  cursor: pointer;
}
.wiz-logo-preview {
  max-height: 8.75rem;
  border-radius:var(--radius);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
}
.wiz-finish { padding: 2.5rem 0; }
.wiz-finish-emoji { font-size:var(--fs-4xl); margin-bottom: 1rem; }
.wiz-finish-title { margin: 0 0 0.5rem; }
.wiz-finish-desc { color: var(--text-muted); margin-bottom: 1.25rem; }
.wiz-recap-card {
  text-align: left;
  max-width: 22.5rem;
  margin: 0 auto;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  padding: 1rem 1.25rem;
}
.wiz-recap-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06);
  font-size: var(--fs-md);
}
.wiz-recap-row-last { border-bottom: none; }
/* ══════════════════════════════════════════════
   BASE RESPONSIVE - Remaining responsive rules from bundle-common.min.css
   Only rules NOT already in responsive-nav.css, responsive-ateliers.css,
   responsive-grids.css, or responsive-apropos.css
   ══════════════════════════════════════════════ */

/* === TABLET (max-width: 900px) === */
@media (max-width: 56.25rem) {
  /* Profile sidebar */
  .sidebar-profile {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .sidebar-profile .sidebar-avatar {
    margin: 0 auto;
  }

  /* Stats & community */
  .stats-row-sm {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* === MOBILE (max-width: 640px) === */
@media (max-width: 40rem) {
  /* Section padding */
  section {
    padding: 3rem 1rem;
  }

  .section-header h2 {
    font-size: var(--fs-3xl);
  }

  /* page-hero responsive handled by base-sections.css */

  /* Discord block */
  .discord-block {
    padding: 1.5rem;
  }

  /* Community */
  .community-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
/* ══════════════════════════════════════════════
   NAV - Responsive (3 breakpoints: 640, 900, 1200)
   ══════════════════════════════════════════════ */

/* Tablette - nav compacte */
/* nav-h identique en desktop et responsive — supprimé l'override */

/* Mobile - hamburger menu */
@media (max-width: 640px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(var(--bg-rgb, 26, 26, 46), 0.99);
    padding: 0.625rem 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    gap: 0.125rem;
    z-index: 199;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 0.6875rem 0.875rem;
    width: 100%;
    white-space: normal;
  }
  .nav-links a.active::after {
    display: none;
  }
  .btn-nav-cta {
    width: 100%;
    text-align: center;
    margin-top: 0.25rem;
  }
  .nav-toggle {
    display: flex;
  }
  /* Dropdown mobile */
  .nav-dropdown-menu {
    display: none;
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1rem;
    min-width: 0;
  }
  .nav-dropdown-menu::before {
    display: none;
  }
  .nav-dropdown-menu a {
    padding: 0.5625rem 0.875rem;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  /* Theme clair - menu mobile */
  [data-theme="light"] .nav-links {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--border-dark);
    box-shadow: var(--shadow-lg);
  }
  [data-theme="light"] .nav-links a {
    color: var(--text-muted);
  }
  [data-theme="light"] .nav-links a:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  [data-theme="light"] .nav-links a.active {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
  }
}
/* ══════════════════════════════════════════════
   HERO (ancien) - Responsive (3 breakpoints)
   Note: hero-impact.css gère le nouveau hero
   Ce fichier gère les pages avec l'ancien .hero
   ══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero:not(.hero-impact),
  .hcm-wrap,
  .diag-wrap,
  .tf-wrap,
  .hub-wrap,
  .legal-wrap {
    margin-top: 1.25rem;
    padding-top: 1rem;
  }
  .hero:not(.hero-impact) {
    padding-bottom: 2.5rem;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-eyebrow {
    margin-top: 0.375rem;
    margin-bottom: 0.9375rem;
  }
  .hero:not(.hero-impact) h1 {
    margin-top: 0.625rem;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero-actions a {
    width: 100%;
    max-width: 20rem;
    text-align: center;
  }
}
/* ══════════════════════════════════════════════
   GRIDS & CARDS - Responsive (3 breakpoints)
   Services, contact, publics, community
   ══════════════════════════════════════════════ */

/* Tablette */
@media (max-width: 900px) {
  .services-cta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .community-split {
    grid-template-columns: 1fr;
  }
  .publics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .services-cta-grid {
    grid-template-columns: 1fr;
  }
  .publics-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* Forms */
  .service-form-row,
  .dec-flex-row {
    flex-direction: column;
  }
  .service-form-row {
    grid-template-columns: 1fr;
  }
  .service-form-card {
    padding: 1.25rem 0.75rem;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .service-form-section {
    padding: 1.25rem 0;
  }
  .service-form-section > .section-header {
    padding: 0 0.75rem;
  }
  .dec-card {
    padding: 1.25rem 0.75rem;
    max-width: 100%;
  }
  .dec-wrap {
    max-width: 100%;
    padding: 0 0.5rem 3rem;
  }
  #atelier-personnalise {
    padding: 1.25rem 0 !important;
  }
  #atelier-personnalise > div {
    max-width: none !important;
    width: 100% !important;
  }
  /* Modal inscription */
  .modal-box {
    padding: 1.5rem 1rem;
    max-width: 100%;
    border-radius: var(--radius);
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
  /* Analyser-mon-pc */
  .service-form-section .section-header {
    padding: 0 0.5rem;
  }
  .service-bridge {
    padding: 2rem 1.5rem;
  }
  /* Créneaux planning picker */
  .creneau-panel {
    padding: 10px;
  }
  .creneau-week-row {
    flex-wrap: wrap;
    gap: 3px;
  }
  .creneau-day-btn {
    min-width: 0;
    flex: 1 1 calc(33.33% - 3px);
    padding: 6px 2px;
    font-size: 0.7rem;
  }
  .creneau-slot-btn {
    flex: 0 0 auto;
    min-width: 42px;
    font-size: 0.68rem;
  }
  .creneaux-section {
    padding: 0.75rem;
  }
  .creneau-sel-wrap {
    padding: 8px 10px;
  }
  /* Inline grid/flex dans formulaires don/ateliers */
  #don-org-block [style*="grid-template-columns"],
  #atelier-personnalise [style*="grid-template-columns"],
  #dap-structure-fields [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Carte */
  .carte-map {
    height: 25rem;
    border-radius:var(--radius-lg);
  }
  .carte-hero {
    padding: 1.25rem 1rem 0.875rem;
  }
  .carte-section-map {
    height: 18.75rem;
  }
  /* Catalogue */
  .cat-grid {
    grid-template-columns: 1fr;
  }
  /* Newsletter footer */
  .footer-newsletter-inner {
    flex-direction: column;
    gap: 0.8rem;
  }
  .footer-newsletter-form {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .footer-newsletter-input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .footer-newsletter-btn {
    width: 100%;
  }
  .footer-newsletter-text {
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
  }
  .footer-newsletter {
    overflow: hidden;
  }
}
/* ══════════════════════════════════════════════
   SECTIONS ALTERNANCE - fond clair/sombre
   Appliqué automatiquement pair/impair
   ══════════════════════════════════════════════ */

/* Toutes les sections vitrine après le hero (sauf carte et constat) */
body.home section:not(.hero-impact):not(.carte-section):not(.constat-section) {
  padding: 3.5rem clamp(1.25rem, 5%, 5rem);
}
body.home .carte-section {
  padding: 3.5rem 0 0;
}

/* Alternance gérée par pb-bg-a / pb-bg-b dans le Page Builder */

.dec-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem
}
#main-content + .dec-wrap {
  background: var(--bg-surface);
  max-width: none;
  padding-top: 2rem;
}
#main-content + .dec-wrap > .dec-card {
  max-width: 50rem;
  margin: 0 auto;
}
.dec-form label {
  display:block;
  font-size: var(--fs-sm);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.375rem;
  font-weight:600
}
.dec-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.dec-form select,.dec-form textarea {
  width:100%;
  box-sizing:border-box;
  padding:0.8125rem 0.875rem;
  margin-bottom:1rem;
  background:rgba(var(--overlay-rgb),0.06);
  border:1.5px solid rgba(var(--overlay-rgb),0.22);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-lg);
  outline:none;
  transition:border-color 0.15s, background 0.15s
}
.dec-form input:not([type="checkbox"]):not([type="radio"]):focus,.dec-form select:focus,.dec-form textarea:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.dec-form textarea {
  min-height:5.625rem;
  resize:vertical
}
.service-form-card {
  max-width:50rem;
  margin:0 auto
}
.service-form label {
  display:block;
  font-size: var(--fs-sm);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.375rem;
  font-weight:600
}
.service-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.service-form select,.service-form textarea {
  width:100%;
  box-sizing:border-box;
  padding:0.8125rem 0.875rem;
  margin-bottom:1rem;
  background:rgba(var(--overlay-rgb),0.04);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-lg);
  outline:none
}
.service-form input:not([type="checkbox"]):not([type="radio"]):focus,.service-form select:focus,.service-form textarea:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.service-form textarea {
  min-height:5.625rem;
  resize:vertical
}
.service-form-submit {
  display:block;
  width:100%;
  text-align:center;
  margin-top:1rem
}
.service-form-row {
  display:flex;
  gap:0.625rem
}
.service-form-row>div {
  flex:1
}
.dec-flex-row {
  display:flex;
  gap:0.625rem
}
.dec-flex-1 {
  flex:1
}
.dec-hidden {
  display:none
}
.btn-creneau-toggle {
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  width: 100%;
  text-align: left;
  transition: all var(--t);
}
.btn-creneau-toggle:hover {
  background: rgba(var(--overlay-rgb), 0.06);
  border-color: rgba(var(--overlay-rgb), 0.15);
}
.creneau-panel {
  margin-top: 12px;
  padding: 16px;
  background: rgba(var(--overlay-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.creneau-panel h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--text);
}
.creneau-panel p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.creneau-day-btn {
  flex: 1;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.73rem;
  font-family: var(--font, inherit);
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.10);
  color: var(--text);
}
.creneau-day-btn:hover {
  background: rgba(var(--overlay-rgb), 0.08);
  border-color: rgba(var(--overlay-rgb), 0.18);
}
.creneau-day-btn.active {
  background: rgba(var(--overlay-rgb), 0.10);
  border-color: rgba(var(--overlay-rgb), 0.25);
  font-weight: 700;
}
.creneau-day-btn.creneau-busy {
  background: rgba(var(--warning-rgb), 0.08);
  border-color: rgba(var(--warning-rgb), 0.25);
  color: var(--warning);
}
.creneau-day-btn.creneau-busy:hover {
  background: rgba(var(--warning-rgb), 0.12);
  border-color: rgba(var(--warning-rgb), 0.35);
}
.creneau-day-btn.creneau-ferie {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
  color: var(--violet-light);
}
.creneau-day-btn.creneau-unavail {
  background: rgba(var(--danger-rgb), 0.06);
  border-color: rgba(var(--danger-rgb), 0.18);
  color: var(--danger);
  opacity: 0.7;
  cursor: default;
}
.creneau-day-btn.creneau-selected {
  background: rgba(var(--overlay-rgb), 0.10);
  border-color: rgba(var(--overlay-rgb), 0.25);
  font-weight: 700;
}
[data-theme="light"] .creneau-day-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .creneau-day-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .creneau-day-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .creneau-day-btn.creneau-selected {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.22);
}
.creneau-slot-btn {
  flex: none;
  min-width: 48px;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 0.72rem;
}
.creneau-week-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.creneau-week-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 8px 0 4px;
  font-weight: 500;
}
.creneau-detail-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.dec-section-sep {
  margin-top:1.5rem;
  padding-top:1.125rem;
  border-top:1px solid var(--border)
}
.dec-section-heading {
  font-size:var(--fs-lg);
  margin:0 0 0.75rem;
  color:var(--text)
}
.dec-hint {
  font-size: var(--fs-sm);
  color:var(--text-muted);
  margin-top:0.25rem
}
.dec-optional-label {
  color:var(--text-muted);
  font-weight:400;
  text-transform:none
}
.dec-btn-row {
  display:flex;
  gap:0.75rem;
  margin-top:1.5rem;
}
.dec-btn-row button {
  flex:1 !important;
  height:3.25rem !important;
  padding:0 1rem !important;
  font-family:var(--font) !important;
  font-size:var(--fs-lg) !important;
  font-weight:700 !important;
  border-radius:var(--radius) !important;
  cursor:pointer;
  box-sizing:border-box !important;
  border:1.5px solid var(--border) !important;
  line-height:1 !important;
  margin:0 !important;
  width:auto !important;
}
.dec-btn-row .submit-btn {
  border-color:transparent !important;
}
.dec-btn-back {
  flex:1;
  padding:0.875rem;
  background:transparent;
  border:1.5px solid var(--border);
  color:var(--text-muted);
  border-radius:var(--radius);
  cursor:pointer;
  font-family:var(--font);
  font-size:var(--fs-md);
  font-weight:600;
  transition:border-color 0.15s, color 0.15s, background 0.15s;
}
.dec-btn-back:hover {
  border-color:rgba(var(--overlay-rgb),0.25);
  color:var(--text);
  background:rgba(var(--overlay-rgb),0.04);
}
.dec-link-alt {
  display:block;
  text-align:center;
  margin-top:1.5rem;
  padding:0.75rem 1.25rem;
  font-size:var(--fs-sm);
  color:var(--text-muted);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color 0.15s, color 0.15s;
}
.dec-link-alt:hover {
  border-color:var(--secondary);
  color:var(--secondary);
}
.dec-btn-next {
  flex:1;
}
.dec-consent {
  margin-top:1.125rem
}
.dec-lieu-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.375rem;
  cursor:pointer;
  padding:1.25rem 0.875rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all 0.15s
}
.dec-lieu-card:hover {
  border-color:rgba(var(--secondary-rgb),0.4);
  background:rgba(var(--secondary-rgb),0.04)
}
.dec-lieu-emoji {
  font-size: var(--fs-4xl)
}
.dec-lieu-title {
  font-weight:600;
  font-size: var(--fs-lg)
}
.dec-lieu-desc {
  font-size: var(--fs-sm);
  color:var(--text-muted)
}
.dec-adresse-block {
  margin-top:0.875rem;
  padding:0.875rem;
  background:rgba(var(--overlay-rgb),0.03);
  border-radius:var(--radius)
}
.dec-cp-col {
  flex:0 0 8.75rem
}
.success-box {
  text-align:center;
  padding:2.5rem 1.5rem
}
.success-box .check {
  font-size: var(--fs-4xl);
  margin-bottom:0.875rem
}
.success-box h2 {
  color:var(--success);
  margin:0 0 0.625rem
}
.dec-success-text {
  color:var(--text-muted);
  line-height:1.6
}
.dec-success-actions {
  margin-top:1.375rem;
  display:flex;
  gap:0.625rem;
  justify-content:center;
  flex-wrap:wrap
}
.error-box {
  background:rgba(var(--danger-rgb),0.10);
  border:1px solid rgba(var(--danger-rgb),0.3);
  color:var(--danger-light);
  padding:0.75rem 1rem;
  border-radius:var(--radius);
  font-size: var(--fs-md);
  margin-bottom:0.875rem
}
.dec-form select,.service-form select {
  background-color:var(--bg-card)!important;
  color:var(--text)!important
}
.dec-form select option,.service-form select option {
  background-color:var(--bg-card)!important;
  color:var(--text)!important
}
.cfg-wrap {
  max-width:56.25rem;
  margin:0 auto;
  padding:0 clamp(1.25rem,5%,5rem)
}
.cfg-progress-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem 1.375rem;
  margin-bottom:1.375rem
}
.cfg-progress-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: var(--fs-md);
  color:var(--text-muted);
  margin-bottom:0.625rem
}
.cfg-progress-head strong {
  color:var(--text);
  font-size:var(--fs-lg)
}
.cfg-progress-bar {
  height:0.5rem;
  background:rgba(var(--overlay-rgb),0.06);
  border-radius:var(--radius-full);
  overflow:hidden
}
.cfg-progress-bar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--violet-main),var(--secondary));
  border-radius:var(--radius-full);
  transition:width 0.3s ease
}
.cfg-alert {
  padding:0.875rem 1.125rem;
  border-radius:var(--radius);
  margin-bottom:1.25rem;
  font-size: var(--fs-md);
  display:flex;
  align-items:flex-start;
  gap:0.75rem
}
.cfg-alert-warn {
  background:rgba(var(--warning-rgb),0.10);
  border:1px solid rgba(var(--warning-rgb),0.30);
  color:var(--warning)
}
.cfg-alert-success {
  background:rgba(var(--success-rgb),0.10);
  border:1px solid rgba(var(--success-rgb),0.30);
  color:var(--success)
}
.cfg-alert ul {
  margin:0.375rem 0 0 1.375rem;
  padding:0;
  font-size: var(--fs-base)
}
.cfg-section {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:1.25rem;
  overflow:hidden
}
.cfg-section-head {
  padding:1.125rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:0.75rem
}
.cfg-section-head h2 {
  font-size:var(--fs-lg);
  font-weight:700;
  margin:0;
  color:var(--text)
}
.cfg-section-icon {
  font-size: var(--fs-2xl)
}
.cfg-section-body {
  padding:1.375rem 1.5rem
}
.cfg-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.875rem 1.25rem;
  margin-bottom:0.875rem
}
.cfg-row.single {
  grid-template-columns:1fr
}
.cfg-row.triple {
  grid-template-columns:1fr 1fr 1fr
}
.cfg-field label {
  display:block;
  font-size: var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  margin-bottom:0.375rem;
  font-weight:600
}
.cfg-field label .req {
  color:var(--danger);
  margin-left:0.1875rem
}
.cfg-field input:not([type="checkbox"]):not([type="radio"]),.cfg-field select,.cfg-field textarea {
  width:100%;
  box-sizing:border-box;
  padding:0.625rem 0.75rem;
  background:rgba(var(--overlay-rgb),0.04);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-md);
  outline:none;
  transition:border-color 0.15s
}
.cfg-field input:not([type="checkbox"]):not([type="radio"]):focus,.cfg-field select:focus,.cfg-field textarea:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.cfg-field input.invalid,.cfg-field select.invalid {
  border-color:rgba(var(--danger-rgb),0.55)
}
.cfg-field textarea {
  min-height:5rem;
  resize:vertical
}
.cfg-field .help {
  font-size: var(--fs-sm);
  color:var(--text-muted);
  margin-top:0.25rem;
  line-height:1.4
}
.cfg-field .error-msg {
  font-size: var(--fs-sm);
  color:var(--danger);
  margin-top:0.25rem;
  display:none
}
.cfg-field.has-error .error-msg {
  display:block
}
.cfg-check {
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  padding:0.625rem 0
}
.cfg-check input[type="checkbox"] {
  width:1.125rem;
  height:1.125rem;
  margin-top:0.125rem;
  cursor:pointer
}
.cfg-check label {
  flex:1;
  font-size: var(--fs-md);
  color:var(--text);
  cursor:pointer;
  text-transform:none;
  letter-spacing:normal;
  font-weight:500
}
.cfg-check label .sub {
  display:block;
  font-size: var(--fs-sm);
  color:var(--text-muted);
  margin-top:0.1875rem;
  font-weight:normal
}
.cfg-radios {
  display:flex;
  flex-direction:column;
  gap:0.625rem
}
.cfg-radio {
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  padding:0.625rem 0.875rem;
  background:rgba(var(--overlay-rgb),0.03);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color 0.15s
}
.cfg-radio:hover {
  border-color:rgba(var(--secondary-rgb),0.35)
}
.cfg-radio input[type="radio"] {
  margin-top:0.1875rem;
  cursor:pointer
}
.cfg-radio-label {
  flex:1;
  font-size: var(--fs-md);
  color:var(--text);
  font-weight:600
}
.cfg-radio-sub {
  display:block;
  font-size:var(--fs-base);
  color:var(--text-muted);
  margin-top:0.1875rem;
  font-weight:normal
}
.cfg-conditional {
  display:none;
  margin-top:0.625rem;
  padding:0.875rem 1rem;
  background:rgba(var(--secondary-rgb),0.05);
  border-left:3px solid rgba(var(--secondary-rgb),0.4);
  border-radius:0 0.5rem 0.5rem 0
}
.cfg-conditional.show {
  display:block
}
.cfg-save-bar {
  position:static;
  bottom:0;
  background:transparent;
  border-top:1px solid var(--border);
  padding:1.25rem 0;
  margin-top:1.25rem;
  display:flex;
  gap:0.75rem;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap
}
.cfg-save-status {
  font-size: var(--fs-base);
  color:var(--text-muted);
  flex:1;
  min-width:12.5rem
}
.cfg-btn-save {
  padding:0.75rem 1.75rem;
  font-family:var(--font);
  font-size: var(--fs-lg);
  font-weight:700;
  cursor:pointer
}
.cfg-toast {
  position:fixed;
  bottom:1.875rem;
  right:1.875rem;
  padding:0.875rem 1.375rem;
  border-radius:var(--radius);
  font-size: var(--fs-md);
  font-weight:600;
  z-index:9999;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(1.25rem);
  transition:opacity 0.2s,transform 0.2s;
  pointer-events:none
}
.cfg-toast.show {
  opacity:1;
  transform:translateY(0)
}
.cfg-toast-success {
  background:rgba(var(--success-rgb),0.95);
  color:var(--bg-deep)
}
.cfg-toast-error {
  background:rgba(var(--danger-rgb),0.95);
  color:var(--bg-deep)
}
@media (max-width:640px) {
  .cfg-save-bar {
    justify-content:stretch
  }
  .cfg-btn-save {
    width:100%
  }
}
.cfg-field select {
  background-color:var(--bg-alt)!important;
  color:var(--text)!important
}
.cfg-field select option {
  background-color:var(--bg-alt)!important;
  color:var(--text)!important
}
.don-machine-card {
  background:rgba(var(--overlay-rgb),0.03);
  border:1px solid rgba(var(--overlay-rgb),0.08);
  border-radius:var(--radius-lg);
  padding:1rem;
  margin-bottom:0.75rem
}
.don-machine-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.75rem
}
.don-machine-card-header strong {
  font-size: var(--fs-md)
}
.don-machine-card-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.625rem
}
.don-machine-card-grid input:not([type="checkbox"]):not([type="radio"]),.don-machine-card-grid select {
  width:100%;
  box-sizing:border-box
}
.don-spec-group {
  margin: 10px 0 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--overlay-rgb), 0.06);
}
.don-spec-group-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.pm-specs-zone {
  margin-top: 8px;
}
.obso-input {
  width:100%;
  padding:0.625rem 0.875rem;
  background:rgba(var(--overlay-rgb),0.06);
  border:1.5px solid var(--border,rgba(var(--overlay-rgb),0.1));
  border-radius:var(--radius);
  color:var(--text);
  font-size:inherit;
  font-family:var(--font);
  outline:none;
  transition:border-color 0.2s;
  box-sizing:border-box
}
.obso-input:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.obso-input::placeholder {
  color:rgba(var(--overlay-rgb),0.3)
}
.obso-textarea {
  width:100%;
  padding:0.625rem 0.875rem;
  background:rgba(var(--overlay-rgb),0.06);
  border:1.5px solid var(--border,rgba(var(--overlay-rgb),0.1));
  border-radius:var(--radius);
  color:var(--text);
  font-size:inherit;
  font-family:var(--font);
  outline:none;
  transition:border-color 0.2s;
  box-sizing:border-box;
  resize:vertical;
  min-height:5rem
}
.obso-textarea:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.obso-select {
  width:100%;
  padding:0.625rem 0.875rem;
  background:rgba(var(--overlay-rgb),0.06);
  border:1.5px solid var(--border,rgba(var(--overlay-rgb),0.1));
  border-radius:var(--radius);
  color:var(--text);
  font-size:inherit;
  font-family:var(--font);
  outline:none;
  transition:border-color 0.2s;
  box-sizing:border-box;
  cursor:pointer
}
.obso-select:focus {
  border-color:rgba(var(--secondary-rgb),0.6)
}
.obso-label {
  display:block;
  font-size:var(--fs-base);
  font-weight:600;
  color:var(--text-muted,rgba(var(--overlay-rgb),0.5));
  margin-bottom:0.375rem
}
.obso-form-group {
  margin-bottom:0.875rem
}
.obso-form-row>.obso-form-group {
  flex:1
}
.obso-form-actions {
  display:flex;
  gap:0.5rem;
  justify-content:flex-end;
  margin-top:1.125rem;
  flex-wrap:wrap
}
.dec-form input[type="text"],.dec-form input[type="email"],.dec-form input[type="tel"],.dec-form input[type="number"],.dec-form input[type="password"],.dec-form select,.dec-form textarea,.service-form input[type="text"],.service-form input[type="email"],.service-form input[type="tel"],.service-form input[type="number"],.service-form select,.service-form textarea {
  padding:0.625rem 0.875rem;
  border:1.5px solid rgba(var(--overlay-rgb),0.22);
  border-radius:var(--radius);
  font-size: var(--fs-lg)
}
@media (max-width: 640px) {
  .cfg-row { grid-template-columns: 1fr !important; }
  .cfg-row.triple { grid-template-columns: 1fr !important; }
  .obso-form-row { flex-direction: column; }
  .dec-flex-row { flex-direction: column; }
  .form-submit-row { flex-direction: column; }
  .form-submit-row button {
    width: 100%;
  }
}
.ob-wizard-hint{font-size: var(--fs-sm);color:rgba(var(--overlay-rgb),0.38);margin-top:4px;line-height:1.4}

/* ══════════════════════════════════════════════
   RADIO CARD - Civilité M./Mme toggle (partagé ateliers, don, declarer, analyser)
   ══════════════════════════════════════════════ */
.radio-card {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius:var(--radius);
  flex: 1;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--fs-md);
  transition: border-color 0.15s, background 0.15s;
}
.radio-card:hover {
  border-color: rgba(var(--secondary-rgb), 0.4);
  background: rgba(var(--secondary-rgb), 0.04);
}
.radio-card-input { display: none; }
.radio-card:has(input:checked) {
  border-color: rgba(var(--secondary-rgb), 0.5);
  background: rgba(var(--secondary-rgb), 0.06);
}

/* ══════════════════════════════════════════════
   FORM CONDITIONAL BLOCK - Blocs conditionnels (organisation, etc.)
   ══════════════════════════════════════════════ */
.form-conditional-block {
  display: none;
  margin-top: 0.625rem;
  padding: 0.875rem 1rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius);
}
.form-conditional-block.show { display: block; }

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
@media (max-width: 640px) {
  .form-grid-2col { grid-template-columns: 1fr; }
}
.form-grid-2col.form-grid-1-2 { grid-template-columns: 1fr 2fr; }
.dec-lieu-card-active,
.dec-lieu-card:has(input:checked) { border-color: rgba(var(--secondary-rgb),0.5); background: rgba(var(--secondary-rgb),0.06); }

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.form-msg {
  font-size: var(--fs-base);
  display: none;
  font-family: var(--font);
}

.dec-section-sep--flat {
  border: none;
  padding-top: 0;
  margin-top: 0;
}

/* ══════════════════════════════════════════════
   BTN RDV TOGGLE - Bouton "Choisir un créneau RDV"
   ══════════════════════════════════════════════ */
.btn-rdv-toggle {
  background: rgba(var(--secondary-rgb), 0.08);
  border: 1px solid rgba(var(--secondary-rgb), 0.2);
  border-radius:var(--radius);
  color: var(--secondary);
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.btn-rdv-toggle:hover {
  background: rgba(var(--secondary-rgb), 0.14);
}

/* ══════════════════════════════════════════════
   CRENEAUX - Sélection de créneaux RDV
   ══════════════════════════════════════════════ */
.creneaux-section {
  display: none;
  margin-top: 0.75rem;
  padding: 1rem;
  background: rgba(var(--secondary-rgb), 0.04);
  border: 1px solid rgba(var(--secondary-rgb), 0.15);
  border-radius:var(--radius);
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.creneaux-heading {
  margin: 0 0 0.5rem;
  font-size: var(--fs-md);
  color: var(--secondary);
  font-family: var(--font);
}
.creneaux-hint {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.creneaux-selected-box {
  display: none;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--success-rgb), 0.08);
  border: 1px solid rgba(var(--success-rgb), 0.2);
  border-radius:var(--radius);
}
.creneaux-selected-label {
  font-size: var(--fs-base);
  color: var(--success);
  font-weight: 700;
}
.creneaux-selected-list {
  font-size: var(--fs-base);
  margin-top: 0.25rem;
}
.creneaux-loader {
  text-align: center;
  padding: 1.25rem;
  color: var(--text-dim);
  font-family: var(--font);
}
.creneaux-container { display: none; overflow-x: auto; max-width: 100%; }
.creneaux-jours {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.creneaux-empty-msg {
  color: var(--text-dim);
  font-family: var(--font);
}
.creneaux-counter {
  margin-bottom: 0.375rem;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.creneaux-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.05);
}
.creneaux-remove-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--fs-base);
}

/* ══════════════════════════════════════════════
   SESSION BADGES - Prix, gratuit
   ══════════════════════════════════════════════ */
.session-price-badge {
  background: rgba(var(--warning-rgb), 0.12);
  border: 1px solid rgba(var(--warning-rgb), 0.3);
  border-radius:var(--radius);
  padding: 0.1875rem 0.625rem;
  font-size: var(--fs-sm);
  color: var(--warning);
}
.session-free-badge {
  background: rgba(var(--success-rgb), 0.10);
  border: 1px solid rgba(var(--success-rgb), 0.25);
  border-radius:var(--radius);
  padding: 0.1875rem 0.625rem;
  font-size: var(--fs-sm);
  color: var(--success);
}

/* ══════════════════════════════════════════════
   MODAL RECAP - Bloc récapitulatif inscription
   ══════════════════════════════════════════════ */
.modal-recap-block {
  display: none;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--secondary-rgb), 0.2);
  border-radius:var(--radius);
  padding: 1.125rem 1.25rem;
}
.modal-parcours-block {
  display: none;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(var(--overlay-rgb), 0.08);
}
.modal-parcours-label {
  font-size: var(--fs-sm);
  color: var(--secondary);
  font-weight: 700;
  margin-bottom: 0.375rem;
  font-family: var(--font);
}
.modal-hint-sm {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 0.875rem;
}

/* Success icons */
.success-icon--success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.success-icon--warning { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.success-icon--danger { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); }

/* Recap rows */
.parcours-list-item {
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), 0.75);
  margin-bottom: 0.1875rem;
}
.session-atelier-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 0.0625rem;
}
.session-cta-full {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.session-cta-full .btn-inscrire:hover,
.session-cta-full .btn-ghost:hover { transform: none !important; box-shadow: 0 2px 10px rgba(var(--primary-rgb),0.35) !important; }

/* Sessions loading */
.sessions-loading {
  text-align: center;
  padding: 2.5rem;
  color: rgba(var(--overlay-rgb), 0.45);
  font-size: var(--fs-md);
  font-family: var(--font);
}

/* ══════════════════════════════════════════════
   ATELIERS-SPECIFIC - CTA banner, perso section
   ══════════════════════════════════════════════ */
.atelier-cta-banner {
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--secondary-rgb), 0.20);
  padding: 2.5rem 2rem;
  text-align: center;
}
.cta-banner-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.cta-banner-desc { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: 1.5rem; }
.cta-banner-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.atelier-cta-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.1875rem;
  font-family: var(--font);
}
.atelier-cta-sub {
  font-size: var(--fs-base);
  color: var(--text-muted);
  font-family: var(--font);
}
.atelier-perso-section {
  padding: 3.75rem clamp(1.25rem, 5%, 5rem);
  background: rgba(var(--secondary-rgb), 0.04);
  border-top: 1px solid rgba(var(--secondary-rgb), 0.1);
}
.atelier-perso-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0.625rem 0;
  font-family: var(--font);
}
.scroll-offset {
  scroll-margin-top: calc(var(--nav-h) + 1.25rem);
}

/* ══════════════════════════════════════════════
   ADDRESS LAYOUT - Partagé don-materiel, declarer
   ══════════════════════════════════════════════ */
.addr-row { display: flex; gap: 0.625rem; }
.addr-cp-col { flex: 0 0 8.75rem; }
.addr-city-col { flex: 1; }

/* ══════════════════════════════════════════════
   UPLOAD ZONE - Photos declarer-appareil
   ══════════════════════════════════════════════ */
.upload-icon { font-size: var(--fs-3xl); }
.upload-text { font-size: var(--fs-base); color: var(--text-muted); font-family: var(--font); }
.upload-hint { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--font); }

/* ══════════════════════════════════════════════
   DON INTRO - Texte intro don-materiel
   ══════════════════════════════════════════════ */
.don-intro-text {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: var(--fs-md);
  max-width: 42.5rem;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font);
}
.don-cta-bottom {
  margin-top: 1.25rem;
  text-align: center;
}

/* ══════════════════════════════════════════════
   CRENEAUX RESPONSIVE - prevent planning picker overflow on mobile
   ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .creneaux-section > div,
  .creneaux-container > div {
    max-width: 100%;
  }
  /* Planning picker week rows: flex buttons should wrap on small screens */
  .creneaux-section div[style*="display:flex"],
  .creneaux-container div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  .creneaux-section button,
  .creneaux-container button {
    min-width: 0 !important;
    flex: 1 1 3.5rem !important;
  }
  /* Machine card grid collapse */
  .don-machine-card-grid {
    grid-template-columns: 1fr;
  }
}

/* obso-modals.css - deminified for development */

.obso-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 20, .7);
  backdrop-filter: blur(4px);
}

.obso-modal-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#account-modal > div::-webkit-scrollbar,
#content-modal > div::-webkit-scrollbar,
#theme-form-modal > div::-webkit-scrollbar,
#themes-modal > div::-webkit-scrollbar,
#user-form-modal > div::-webkit-scrollbar,
#users-modal > div::-webkit-scrollbar,
.obso-modal-scroll::-webkit-scrollbar {
  display: none;
}

.obso-modal-box {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding: 1.75rem 1.625rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  box-sizing: border-box;
}

.obso-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border-radius:var(--radius);
  background: rgba(var(--overlay-rgb), .06);
  color: var(--text);
  border: 0;
  cursor: pointer;
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}




#activity-modal > div,
#admin-stats-modal > div {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 2.5rem auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#activity-modal,
#admin-stats-modal {
  overflow-y: auto !important;
  display: none;
}

.modal-backdrop {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: 2.5rem 1.25rem !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#activity-modal > div::-webkit-scrollbar,
#admin-stats-modal > div::-webkit-scrollbar,
.modal-backdrop::-webkit-scrollbar {
  display: none !important;
}


.modal-backdrop.open .modal-box,
.modal-box {
  transform: none !important;
}

.ms-card:last-child,
#account-modal > div,
#content-modal > div,
#theme-form-modal > div,
#themes-modal > div,
#user-form-modal > div,
#users-modal > div {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#activity-modal > div,
#admin-stats-modal > div {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overflow-y: auto !important;
}

.obso-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border, rgba(var(--overlay-rgb), 0.15));
  border-radius:var(--radius);
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.obso-autocomplete-item {
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--overlay-rgb), .05);
  font-size: var(--fs-base);
}

.obso-autocomplete-item:hover {
  background: rgba(var(--secondary-rgb), .15);
}

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

.obso-autocomplete-empty {
  padding: 0.625rem 0.75rem;
  color: rgba(var(--overlay-rgb), .5);
  font-size: var(--fs-sm);
  font-style: italic;
}

.obso-modal-divider {
  height: 1px;
  background: var(--border, rgba(var(--overlay-rgb), 0.1));
  margin: 1.25rem 0;
}

.obso-modal-section {
  margin-top: 0.875rem;
}

.admin-btn-delete,

.admin-btn-edit {
  background: rgba(var(--secondary-rgb), .12);
  border: 1px solid rgba(var(--secondary-rgb), .3);
  color: var(--secondary);
}

.admin-btn-edit:hover {
  background: rgba(var(--secondary-rgb), .25);
}

.admin-btn-delete {
  background: rgba(var(--danger-rgb), .12);
  border: 1px solid rgba(var(--danger-rgb), .3);
  color: var(--danger);
}

.admin-btn-delete:hover {
  background: rgba(var(--danger-rgb), .25);
}

.modal-emoji {
  font-size: var(--fs-4xl);
  text-align: center;
  margin-bottom: 0.375rem;
}

.modal-title {
  text-align: center;
  margin: 0 0 0.375rem;
  font-size: var(--fs-xl);
}

.modal-body-loading,

.modal-subtitle {
  font-size: var(--fs-base);
  margin: 0 0 1.25rem;
}

.modal-body-loading {
  padding: 1.25rem;
}

.modal-section-title {
  font-size: var(--fs-lg);
  margin: 0 0 0.625rem;
  color: var(--secondary);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.modal-hr {
  border: 0;
  border-top: 1px solid rgba(var(--overlay-rgb), .08);
  margin: 1rem 0;
}

.modal-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.modal-field-label {
  font-size: var(--fs-base);
  color: rgba(var(--overlay-rgb), .5);
  font-weight: 600;
}

.modal-color-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.modal-color-picker {
  width: 2.5rem;
  height: 2rem;
  border: 0;
  background: 0 0;
  cursor: pointer;
}

.modal-msg {
  font-size: var(--fs-base);
  display: none;
}

.modal-msg-ok {
  color: var(--success);
}

.modal-msg-err {
  color: var(--danger);
}

.admin-list-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--overlay-rgb), .03);
  border: 1px solid rgba(var(--overlay-rgb), .08);
  border-radius:var(--radius);
  flex-wrap: wrap;
}

.admin-list-item:hover {
  background: rgba(var(--overlay-rgb), .05);
}

.admin-list-item .item-main {
  flex: 1;
  min-width: 120px;
}

.admin-list-item .item-title {
  font-weight: 600;
  color: var(--text);
}

.admin-list-item .item-sub {
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb), .4);
}

.admin-list-item .item-badge {
  font-size: var(--fs-sm);
  padding: 0.1875rem 0.5rem;
  border-radius:var(--radius-sm);
}

.admin-list-item .item-price {
  font-weight: 700;
  color: var(--violet-light, var(--secondary));
}

.nav-item-row {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.375rem;
  cursor: grab;
}

.nav-item-row:active {
  cursor: grabbing;
}

.nav-item-row .drag-handle {
  color: rgba(var(--overlay-rgb), .3);
  font-size:var(--fs-lg);
  cursor: grab;
}

.footer-category-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(var(--overlay-rgb), .5);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(var(--overlay-rgb), .06);
}

.footer-item-row {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.375rem;
  background: rgba(var(--overlay-rgb), .03);
  border-radius:var(--radius);
  margin-bottom: 0.1875rem;
  flex-wrap: wrap;
}

.cat-tree-group,
.spec-editor-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem;
  background: rgba(var(--overlay-rgb), .03);
  border-radius:var(--radius);
  margin-bottom: 0.25rem;
}

.cat-tree-group {
  background: rgba(var(--overlay-rgb), .04);
  border-radius:var(--radius-lg);
  overflow: hidden;
}

.cat-tree-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--secondary-rgb), .08);
  border-bottom: 1px solid rgba(var(--overlay-rgb), .06);
}

.cat-tree-subcat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  border-bottom: 1px solid rgba(var(--overlay-rgb), .04);
}

.email-preview-frame {
  margin-top: 0.875rem;
  border: 2px solid var(--secondary);
  border-radius:var(--radius);
  overflow: hidden;
  background: #fff;
}

.email-preview-frame iframe {
  width: 100%;
  min-height: 400px;
  height: 400px;
  border: 0;
  background: #fff;
}

.modal-wrapper-900 {
  width: 100%;
  max-width: 900px;
}

.modal-wrapper-750 {
  width: 100%;
  max-width: 750px;
}

.modal-wrapper-720 {
  width: 100%;
  max-width: 720px;
}

.modal-wrapper-640 {
  width: 100%;
  max-width: 640px;
}

.modal-wrapper-520 {
  width: 100%;
  max-width: 520px;
}

.modal-wrapper-480 {
  width: 100%;
  max-width: 640px;
}

.modal-form-title {
  margin: 0 0 1.25rem;
  font-size: var(--fs-xl);
}

.modal-msg-save {
  font-size: var(--fs-base);
  display: none;
}

.modal-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.btn-action-green {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(var(--success-rgb), .1);
  border: 1px solid rgba(var(--success-rgb), .3);
  border-radius:var(--radius);
  color: var(--success);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
}

.btn-action-green:hover {
  background: rgba(var(--success-rgb), .18);
}

.btn-action-green,
.btn-action-red,

.btn-action-red {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(var(--danger-rgb), .1);
  border: 1px solid rgba(var(--danger-rgb), .3);
  border-radius:var(--radius);
  color: var(--danger);
  font-size: var(--fs-md);
  font-weight: 600;
}

.btn-action-red:hover {
  background: rgba(var(--danger-rgb), .18);
}

.btn-action-violet {
  padding: 0.5625rem 1rem;
  background: rgba(var(--secondary-rgb), .12);
  color: var(--text);
  border: 1px solid rgba(var(--secondary-rgb), .35);
  border-radius:var(--radius);
  font-size: var(--fs-base);
}

.btn-action-violet:hover {
  background: rgba(var(--secondary-rgb), .22);
}

.obso-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  overflow-y: auto;
  padding: 2.5rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.obso-modal-overlay::-webkit-scrollbar {
  display: none;
}

.obso-modal-content {
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border, rgba(var(--overlay-rgb), 0.1));
  border-radius:var(--radius-lg);
  padding: 1.75rem 1.625rem;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.obs-cal-dispo-exception {
  background: rgba(var(--danger-rgb), .15) !important;
  border-left: 3px solid var(--danger) !important;
  opacity: .8;
}

.obs-cal-dispo-exception .obs-cal-dispo-types {
  color: var(--danger);
  font-size: var(--fs-2xs);
}

/* Hover pour boutons modales (obso-btn-primary/violet gérés par unified system) */
.btn-inscrire:hover,
.btn-primary-admin:hover {
  filter: brightness(0.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25) !important;
}

.urole-btn:hover {
  background: rgba(var(--primary-rgb), 0.12) !important;
  color: var(--primary) !important;
  transition: all .15s;
}

.obso-modal-btn:hover {
  filter: brightness(0.92) !important;
  transition: all .15s;
}
/* ══════════════════════════════════════════════
   BLOC CONSTAT - Chiffres choc
   Compatible accessibilité (dys, taille variable)
   Utilise rem pour scaler avec html font-size
   ══════════════════════════════════════════════ */

.constat-section {
  background: var(--bg-deep, var(--bg-deep));
  text-align: center;
  padding: 3.5rem clamp(1.25rem, 5%, 5rem);
}
[data-theme="light"] .constat-section {
  background: var(--bg-surface);
}

.constat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 60rem;
  margin: 0 auto;
}

.constat-card {
  padding: 1.5rem 1rem;
}

.constat-number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  font-family: var(--font);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.constat-text {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.constat-source {
  margin-top: 1.5rem;
  font-size:var(--fs-base);
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
}

/* Thème clair */
[data-theme="light"] .constat-number {
  color: var(--text);
}
[data-theme="light"] .constat-text {
  color: var(--text-muted);
}
[data-theme="light"] .constat-source {
  color: var(--text-dim);
}

/* Tablette */
@media (max-width: 900px) {
  .constat-grid {
    gap: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .constat-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .constat-card {
    padding: 1rem;
  }
}
/* ══════════════════════════════════════════════
   BLOC SOLUTION - 4 cartes d'action
   Compatible accessibilité (rem, var(--font))
   ══════════════════════════════════════════════ */

.solution-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.3rem;
}

.solution-sub {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  max-width: 62.5rem;
  margin: 0 auto;
}

.solution-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.2rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.solution-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.solution-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 0.8rem;
  line-height: 1;
}

.solution-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  margin: 0 0 0.5rem;
}

.solution-card p {
  font-size: var(--fs-md);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Thème clair */
[data-theme="light"] .solution-card {
  background: var(--bg-card);
  border-color: var(--border-dark);
}
[data-theme="light"] .solution-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: var(--shadow-lg);
}
[data-theme="light"] .solution-card h3 {
  color: var(--text);
}
[data-theme="light"] .solution-card p {
  color: var(--text-muted);
}

/* Tablette */
@media (max-width: 900px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .solution-card {
    padding: 1.5rem 1rem;
  }
}
/* ══════════════════════════════════════════════
   BLOC IMPACT - Vrais chiffres animés
   Compatible accessibilité (rem, var(--font))
   ══════════════════════════════════════════════ */

.impact-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.3rem;
}

.impact-sub {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 2.5rem;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.impact-card {
  padding: 1.5rem 1rem;
}

.impact-number {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  font-family: var(--font);
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.impact-label {
  font-size: var(--fs-md);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Thème clair */
[data-theme="light"] .impact-number {
  color: var(--primary);
}
[data-theme="light"] .impact-label {
  color: var(--text-muted);
}

/* Tablette */
@media (max-width: 900px) {
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .impact-card {
    padding: 1rem;
  }
}
/* ══════════════════════════════════════════════
   BLOC ATELIERS - Niveaux + prochaines sessions
   Compatible accessibilité (rem, var(--font))
   ══════════════════════════════════════════════ */

.ateliers-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.3rem;
}

.ateliers-sub {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* 3 niveaux */
.ateliers-niveaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 56.25rem;
  margin: 0 auto 2rem;
}

.niveau-card {
  text-align: center;
  padding: 2rem 1.2rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.niveau-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 0.8rem;
  line-height: 1;
}

.niveau-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  margin: 0 0 0.5rem;
}

.niveau-card p {
  font-size: var(--fs-md);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Prochaines sessions (rempli par JS) */
.prochains-ateliers {
  max-width: 56.25rem;
  margin: 0 auto 1.5rem;
}

/* CTA */
.ateliers-cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* Thème clair */
[data-theme="light"] .niveau-card {
  background: var(--bg-card);
  border-color: var(--border-dark);
}
[data-theme="light"] .niveau-card h3 {
  color: var(--text);
}
[data-theme="light"] .niveau-card p {
  color: var(--text-muted);
}

/* Tablette */
@media (max-width: 900px) {
  .ateliers-niveaux {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .ateliers-niveaux {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .niveau-card {
    padding: 1.5rem 1rem;
  }
}
/* ══════════════════════════════════════════════
   BLOC LE PROJET - Qui sommes-nous
   ══════════════════════════════════════════════ */

.whois-section {
  text-align: center;
}

.whois-wrap {
  max-width: 40rem;
  margin: 0 auto;
}

.whois-wrap h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 1rem;
}

.whois-text {
  font-size: var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.whois-wrap .btn-ghost {
  font-family: var(--font);
}

/* Thème clair */
[data-theme="light"] .whois-text {
  color: var(--text-muted);
}
/* ══════════════════════════════════════════════
   BLOC TEMOIGNAGES
   ══════════════════════════════════════════════ */

.temoignages-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 2rem;
}

.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 56.25rem;
  margin: 0 auto;
}

.temoignage-card {
  padding: 1.5rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.temoignage-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.temoignage-stars {
  color: var(--gold, var(--gold));
  font-size:var(--fs-lg);
  letter-spacing: 0.125rem;
  margin-bottom: 0.6rem;
}

.temoignage-text {
  font-size: var(--fs-md);
  font-family: var(--font);
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 0.8rem;
  font-style: italic;
}

.temoignage-auteur {
  font-size: var(--fs-base);
  font-family: var(--font);
  color: var(--text-muted);
}

/* Thème clair */
[data-theme="light"] .temoignage-card {
  background: var(--bg-card);
  border-color: var(--border-dark);
}
[data-theme="light"] .temoignage-text {
  color: var(--text);
}

/* Responsive */
@media (max-width: 900px) {
  .temoignages-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 640px) {
  .temoignages-grid {
    grid-template-columns: 1fr;
  }
}
/* ══════════════════════════════════════════════
   BLOC COMMUNAUTE + DISCORD
   ══════════════════════════════════════════════ */

.communaute-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 56.25rem;
  margin: 0 auto;
}

.communaute-text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.8rem;
}

.communaute-text p {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}

.community-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.community-social a {
  width: 44px;
  height: 44px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.community-social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Discord card */
.discord-card {
  text-align: center;
  padding: 2rem;
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius:var(--radius-lg);
}

.discord-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  margin: 0.8rem 0 0.4rem;
}

.discord-card p {
  font-size: var(--fs-md);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.btn-discord-join,
[data-theme="light"] .btn-discord-join {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--discord);
  color: var(--btn-text) !important;
  border-radius:var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font);
  font-size: var(--fs-md);
  transition: all 0.2s;
}

.btn-discord-join:hover {
  background: var(--discord-hover);
  transform: translateY(-0.125rem);
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
}

/* Thème clair */
[data-theme="light"] .discord-card {
  background: rgba(88, 101, 242, 0.05);
  border-color: rgba(88, 101, 242, 0.15);
}
[data-theme="light"] .discord-card h3 {
  color: var(--text);
}

/* Responsive */
@media (max-width: 640px) {
  .communaute-wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* ══════════════════════════════════════════════
   BLOC BOUTIQUE PREVIEW - Articles reconditionnés
   ══════════════════════════════════════════════ */

.boutique-preview-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.3rem;
}

.boutique-preview-sub {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.boutique-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
}

.boutique-preview-card {
  display: flex;
  flex-direction: column;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}

.boutique-preview-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.boutique-preview-img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  background: rgba(var(--overlay-rgb), 0.06);
}

.boutique-preview-body {
  padding: 1rem;
}

.boutique-preview-body h3 {
  font-size:var(--fs-lg);
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  margin: 0 0 0.3rem;
}

.boutique-preview-body .price {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-family: var(--font);
  color: var(--primary);
}

.boutique-preview-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-family: var(--font);
  grid-column: 1 / -1;
}

.boutique-preview-cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* Thème clair */
[data-theme="light"] .boutique-preview-card {
  background: var(--bg-card);
  border-color: var(--border-dark);
}
[data-theme="light"] .boutique-preview-body h3 {
  color: var(--text);
}

/* Responsive */
@media (max-width: 900px) {
  .boutique-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .boutique-preview-grid {
    grid-template-columns: 1fr;
  }
}
/* ══════════════════════════════════════════════
   BLOC WIKI PREVIEW - Derniers articles
   ══════════════════════════════════════════════ */

.wiki-preview-section .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  margin: 0 0 0.3rem;
}

.wiki-preview-sub {
  font-size:var(--fs-lg);
  font-family: var(--font);
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.wiki-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
}

.wiki-preview-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}

.wiki-preview-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.wiki-preview-card h3 {
  font-size:var(--fs-lg);
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  margin: 0 0 0.5rem;
}

.wiki-preview-card p {
  font-size: var(--fs-md);
  font-family: var(--font);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.wiki-preview-card .wiki-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-family: var(--font);
  padding: 0.2rem 0.6rem;
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
  border-radius: 0.3rem;
  margin-bottom: 0.6rem;
}

.wiki-preview-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-family: var(--font);
  grid-column: 1 / -1;
}

.wiki-preview-cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* Thème clair */
[data-theme="light"] .wiki-preview-card {
  background: var(--bg-card);
  border-color: var(--border-dark);
}
[data-theme="light"] .wiki-preview-card h3 {
  color: var(--text);
}

/* Responsive */
@media (max-width: 900px) {
  .wiki-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .wiki-preview-grid {
    grid-template-columns: 1fr;
  }
}
/* ══════════════════════════════════════════════════════════
   HERO IMPACT - Image plein écran + overlay + texte centré
   Version stable - pas de position fixed, pas de margin négatif
   ══════════════════════════════════════════════════════════ */

.hero-impact {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  text-align: center;
}

/* Background image */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.85) 100%);
}

/* Content */
.hero-impact .hero-center {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  padding: calc(var(--nav-h, 120px) + 5rem) 1.5rem 3.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.hero-title-impact {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Subtitle */
.hero-lead-impact {
  font-size:var(--fs-lg);
  font-family: var(--font);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 1.2rem;
  max-width: 40rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Buttons */
.hero-actions-impact {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-hero-primary,
[data-theme="light"] .btn-hero-primary {
  padding: 0.6rem 1.4rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--btn-text) !important;
  background: var(--primary) !important;
  border: none;
  border-radius:var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font);
}
.btn-hero-primary:hover {
  filter: brightness(0.92);
  transform: translateY(-0.125rem);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35);
}
.btn-hero-ghost,
[data-theme="light"] .btn-hero-ghost {
  padding: 0.6rem 1.4rem;
  font-size:var(--fs-base);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius:var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font);
}
.btn-hero-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--btn-text) !important;
}

/* Scroll hint */
.hero-scroll-hint {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-2xs);
  font-family: var(--font);
  animation: hero-bounce 2s ease infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5rem); }
}

/* ═══ RESPONSIVE ═══ */

@media (max-width: 900px) {
  body.has-hero-impact {
    padding-top: 0 !important;
  }
  .hero-impact {
    margin-top: calc(-1 * var(--nav-h, 90px));
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hero-impact .hero-center {
    padding: calc(var(--nav-h, 90px) + 8rem) 1rem 2rem;
  }
  body.has-hero-impact #obs-nav:not(.scrolled) {
    background: transparent !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 640px) {
  .hero-title-impact {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }
  .hero-lead-impact {
    font-size: var(--fs-md);
  }
  .hero-actions-impact {
    flex-direction: column;
    width: 100%;
    padding: 0 1rem;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
  }
  .hero-scroll-hint {
    margin-top: 1rem;
  }
  body.has-hero-impact .nav-links.open {
    background: rgba(0, 0, 0, 0.95) !important;
  }
  body.has-hero-impact .nav-links.open a {
    color: #fff !important;
  }
}

/* ═══ NAV TRANSPARENTE ═══ */

body.has-hero-impact #obs-nav:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.has-hero-impact #obs-nav:not(.scrolled) a,
body.has-hero-impact #obs-nav:not(.scrolled) .nav-links a,
body.has-hero-impact #obs-nav:not(.scrolled) .btn-nav-cta {
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
body.has-hero-impact #obs-nav:not(.scrolled) .nav-toggle span {
  background: #fff !important;
}

/* ═══ FORCE BLANC DEUX THÈMES ═══ */

.hero-impact .hero-title-impact,
[data-theme="light"] .hero-impact .hero-title-impact,
[data-theme="light"] .hero-impact h1 {
  color: #fff !important;
}
.hero-impact .hero-lead-impact,
[data-theme="light"] .hero-impact .hero-lead-impact,
[data-theme="light"] .hero-impact p {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* ══════════════════════════════════════════════
   A PROPOS - Content & Components
   ══════════════════════════════════════════════ */

.ap-content { max-width: 720px; margin: 0 auto; }
.ap-content .section-header { margin-bottom: 24px; }
.ap-content .section-header h2 { font-size: var(--fs-2xl); }
.ap-block { margin-bottom: 52px; }

.ap-section-intro { color: rgba(var(--overlay-rgb), 0.60); line-height: 1.8; font-size: var(--fs-lg); }
.ap-section-intro + .ap-section-intro { margin-top: 16px; }

.ap-piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.pilier-card { background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius: var(--radius-lg); padding: 28px 22px; }
.pilier-card .pilier-icon { font-size: var(--fs-4xl); margin-bottom: 12px; }
.pilier-card h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.pilier-card p { font-size: var(--fs-base); color: rgba(var(--overlay-rgb), 0.55); line-height: 1.65; }

.ap-etapes { display: flex; flex-direction: column; gap: 12px; }
.etape-card { display: flex; gap: 16px; align-items: flex-start; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius: var(--radius-lg); padding: 18px 20px; }
.etape-num { min-width: 36px; height: 36px; background: rgba(var(--primary-rgb), 0.20); border: 1px solid rgba(var(--secondary-rgb), 0.30); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 700; color: var(--secondary); flex-shrink: 0; }
.etape-card h4 { font-weight: 600; margin-bottom: 4px; }
.etape-desc { font-size: var(--fs-base); color: rgba(var(--overlay-rgb), 0.55); }

.ap-cta { text-align: center; padding: 40px; background: rgba(var(--primary-rgb), 0.10); border: 1px solid rgba(var(--secondary-rgb), 0.25); border-radius: var(--radius-xl); }
.ap-cta h3 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 10px; }
.ap-cta p { color: rgba(var(--overlay-rgb), 0.55); font-size: var(--fs-md); margin-bottom: 24px; }
.ap-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

#contact { border-top: 1px solid rgba(var(--overlay-rgb), 0.08); padding: 3rem 1.5rem; margin-bottom: 36px; }
.ap-contact-wrap { max-width: 50rem; margin: 0 auto; text-align: center; }
.ap-contact-wrap h3 { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.02em; }
.ap-contact-wrap > p { font-size: var(--fs-base); color: rgba(var(--overlay-rgb), 0.50); margin-bottom: 20px; }
#contact-form { display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 40rem; margin: 0 auto; }
#contact-form .btn-primary { align-self: center; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-input { padding: 11px 14px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: var(--fs-md); color: var(--text); outline: none; transition: border-color 0.22s, box-shadow 0.22s; }
.ap-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.20); }
textarea.ap-input { resize: vertical; }
#contact-success { display: none; text-align: center; color: var(--secondary); font-size: var(--fs-md); font-weight: 600; padding: 8px; }

.pb-contact-form { max-width: 40rem; margin: 1.5rem auto 0; }
.pb-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pb-contact-input { width: 100%; padding: 11px 14px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: var(--fs-md); color: var(--text); outline: none; transition: border-color 0.22s, box-shadow 0.22s; margin-bottom: 12px; box-sizing: border-box; }
.pb-contact-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.20); }
textarea.pb-contact-input { resize: vertical; }
.pb-contact-success { text-align: center; color: var(--secondary); font-size: var(--fs-md); font-weight: 600; padding: 12px 0; }
@media (max-width: 640px) { .pb-contact-grid { grid-template-columns: 1fr; } }

#nos-actions { max-width: 50rem; margin: 0 auto; padding: 3rem 1.5rem; }
.ap-section-header { text-align: center; margin-bottom: 32px; }
.ap-section-header h2 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); margin: 8px 0 6px; }
.ap-section-header p { color: var(--text-muted); font-size: var(--fs-md); }
.ap-actions-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: start; }
#actions-tabs { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.action-tab { padding: 11px 18px; border: none; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; background: none; color: var(--text-muted); font-size: var(--fs-base); font-family: var(--font); cursor: pointer; transition: all 0.15s; font-weight: 500; text-align: left; }
.action-tab:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.04); }
.action-tab.active { color: var(--secondary); font-weight: 600; border-left-color: var(--secondary); background: rgba(var(--secondary-rgb), 0.06); }
#actions-content { padding: 8px 0 20px 32px; border-left: 1px solid var(--border); min-height: 200px; }

.ap-article-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.3; }
.ap-article-body { color: var(--text); line-height: 1.8; font-size: var(--fs-md); overflow-wrap: break-word; word-break: break-word; }
.ap-article-body h2 { font-size: var(--fs-xl); margin-top: 24px; margin-bottom: 10px; }
.ap-article-body h3 { font-size: var(--fs-lg); margin-top: 18px; margin-bottom: 8px; }
.ap-article-body p { margin-bottom: 12px; }
.ap-article-body ul, .ap-article-body ol { padding-left: 28px; margin-bottom: 14px; }
.ap-article-body li { margin-bottom: 6px; }
.ap-article-body li.sub { margin-left: 20px; }
.ap-article-body code { background: rgba(var(--secondary-rgb), 0.1); padding: 2px 5px; border-radius: var(--radius-sm); font-size: var(--fs-base); }
.ap-article-body pre { background: rgba(var(--overlay-rgb), 0.04); padding: 14px; border-radius: var(--radius-lg); overflow-x: auto; margin: 14px 0; white-space: pre-wrap; word-break: break-word; }
.ap-article-body pre code { background: none; padding: 0; }
.ap-article-body a { color: var(--secondary); }
.ap-article-body a:hover { text-decoration: underline; }
.ap-article-body blockquote { border-left: 3px solid var(--secondary); margin: 14px 0; padding: 10px 16px; background: rgba(var(--secondary-rgb), 0.05); border-radius: 0 8px 8px 0; color: var(--text-muted); font-style: italic; }
.ap-article-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.ap-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: var(--fs-md); }
.ap-table thead th { text-align: left; padding: 7px 10px; background: rgba(var(--secondary-rgb), 0.06); font-weight: 600; border-bottom: 2px solid var(--border); }
.ap-table tbody td { padding: 6px 10px; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04); }
.ap-loading { text-align: center; color: var(--text-muted); padding: 40px; }
/* ══════════════════════════════════════════════
   A PROPOS - Responsive (3 breakpoints)
   ══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .ap-actions-layout {
    grid-template-columns: 1fr;
  }
  #actions-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    gap: 0;
    margin-bottom: 0.75rem;
  }
  .action-tab {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 0.5rem 0.875rem;
    font-size: var(--fs-sm);
  }
  .action-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--secondary);
  }
  #actions-content {
    padding: 0.875rem 0;
    border-left: none;
  }
  .ap-piliers {
    grid-template-columns: 1fr;
  }
  .ap-cta {
    padding: 1.75rem 1.25rem;
  }
}
/* obso-404.css - Scoped to body.page-404 */
body.page-404{margin:0;background:var(--bg-deep);color:var(--border);font-family:var(--font);display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;}
body.page-404 .e404-container{max-width:400px;padding:40px 20px;}
body.page-404 h1{font-size:var(--fs-4xl);margin:0;color:var(--secondary);}
body.page-404 p{color:var(--text-muted);font-size: var(--fs-xl);margin:16px 0 32px;}
body.page-404 a{display:inline-block;background:var(--secondary);color:var(--text);padding:12px 28px;border-radius:var(--radius);text-decoration:none;font-weight:600;}
body.page-404 a:hover{background:var(--secondary);}
/* ══════════════════════════════════════════════
   ANALYSER MON PC - Résultats diagnostic, barres, coûts, CTA
   Toutes les tailles en rem, font-family: var(--font)
   ══════════════════════════════════════════════ */

/* Container résultats */
.result-container {
  max-width: 45rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5%, 5rem);
}

/* Box principale de verdict */
.result-box {
  border: 1.5px solid;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.result-emoji {
  font-size: var(--fs-4xl);
  line-height: 1;
  margin-bottom: 0.875rem;
}
.result-message {
  font-size: var(--fs-3xl);
  font-weight: 700;
  margin-bottom: 0.625rem;
  line-height: 1.3;
  font-family: var(--font);
}
.result-grade {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font);
}

/* Barre de progression */
.result-bar-wrap { max-width: 21.25rem; margin: 0 auto 1.125rem; }
.result-bar-track {
  height: 0.5rem;
  background: rgba(var(--overlay-rgb), 0.08);
  border-radius:var(--radius-full);
  overflow: hidden;
}
.result-bar-fill {
  width: 0%;
  height: 100%;
  border-radius:var(--radius-full);
  transition: width 0.6s ease;
  background: var(--success);
}
.result-bar-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font);
}

/* Usage recommandé */
.result-usage {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--text);
  max-width: 35rem;
  margin: 0 auto;
  font-family: var(--font);
}

/* Sections de détail */
.result-section-wrap {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border: 1px solid rgba(var(--overlay-rgb), 0.06);
  border-radius: var(--radius);
}
.result-section-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-family: var(--font);
}

/* Détails diagnostics */
.result-detail-wrap {
  margin-bottom: 1.25rem;
  padding: 1.375rem 1.625rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.result-detail-label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-family: var(--font);
}
.result-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.05);
  font-size: var(--fs-base);
  font-family: var(--font);
}
.result-detail-key { color: var(--text-muted); }
.result-detail-value { font-weight: 600; }

/* Section "Pourquoi" */
.result-why-wrap {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border-radius: var(--radius);
}

/* Urgence */
.result-urgency-wrap {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: var(--radius);
}

/* Après amélioration */
.result-after-wrap {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(var(--success-rgb), 0.04);
  border: 1px solid rgba(var(--success-rgb), 0.12);
  border-radius: var(--radius);
}

/* Comparaison avant/après */
.result-compare-wrap {
  margin-bottom: 1.25rem;
  padding: 1.375rem 1.625rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.result-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.compare-before-label,
.compare-before-label { color: var(--text-muted); }
.compare-after-label { color: var(--success); }
.compare-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: var(--fs-base);
  font-family: var(--font);
}

@media (max-width: 640px) {
  .result-compare-grid { grid-template-columns: 1fr; }
}

/* CTA inline */
.result-inline-cta {
  display: none;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Coûts */
.result-cost-wrap {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border: 1px solid rgba(var(--overlay-rgb), 0.06);
  border-radius: var(--radius);
}
.result-cost-item {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: var(--fs-base);
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
  font-family: var(--font);
}
.result-cost-total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 2px solid rgba(var(--overlay-rgb), 0.1);
  font-weight: 700;
  font-size:var(--fs-lg);
  font-family: var(--font);
}
.result-cost-value { font-weight: 700; }
.result-cost-insight {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-top: 0.75rem;
  line-height: 1.5;
  font-family: var(--font);
}

/* Valeur résiduelle */
.result-value-wrap {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--overlay-rgb), 0.02);
  border: 1px solid rgba(var(--overlay-rgb), 0.06);
  border-radius: var(--radius);
}
.result-value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  font-size: var(--fs-md);
  font-family: var(--font);
}
.result-value-euro {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--success);
}

/* Score éco */
.result-eco-wrap {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--success-rgb), 0.04);
  border: 1px solid rgba(var(--success-rgb), 0.12);
  border-radius: var(--radius);
  text-align: center;
}
.result-eco-score {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--success);
  margin-bottom: 0.5rem;
  font-family: var(--font);
}
.result-eco-bar {
  height: 0.5rem;
  border-radius:var(--radius-full);
  overflow: hidden;
  background: rgba(var(--overlay-rgb), 0.08);
  max-width: 20rem;
  margin: 0.75rem auto;
}

/* Recommandations */
.result-reco-wrap {
  margin-bottom: 1.25rem;
  padding: 1.375rem 1.625rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* CTA bottom */
.result-bottom-heading {
  text-align: center;
  margin-bottom: 1rem;
  font-family: var(--font);
}
.result-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.result-trust {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-family: var(--font);
}

/* Email box */
.result-email-box {
  max-width: 28rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  border-radius: var(--radius);
  text-align: center;
}
.result-email-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.result-email-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
}

/* Disclaimer */
.result-disclaimer {
  text-align: center;
  font-size:var(--fs-base);
  color: var(--text-muted);
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(var(--overlay-rgb), 0.06);
  line-height: 1.5;
  font-family: var(--font);
}

/* Micro-copy conversion */
.result-micro-copy {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
  margin-top: 0.5rem;
  font-family: var(--font);
}
.result-trust-line {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
  font-family: var(--font);
}

/* Tech mode */
.tech-mode-link {
  color: var(--secondary);
  text-decoration: underline;
  font-size:var(--fs-base);
  font-family: var(--font);
}

/* Exit-intent popup */
.exit-popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.exit-popup-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 28rem;
  width: 90%;
  text-align: center;
  position: relative;
}
[data-theme="light"] .exit-popup-body {
  background: var(--bg-card);
}
.exit-popup-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: var(--font);
}
.exit-btn-price,
.exit-btn-trust,
.exit-btn-price {
  background: rgba(var(--success-rgb), 0.08);
  border: 1px solid rgba(var(--success-rgb), 0.25);
  color: var(--success);
}
.exit-btn-trust {
  background: rgba(var(--info-rgb), 0.08);
  border: 1px solid rgba(var(--info-rgb), 0.25);
  color: var(--info);
}
.exit-btn-specific {
  background: rgba(var(--secondary-rgb), 0.08);
  border: 1px solid rgba(var(--secondary-rgb), 0.25);
  color: var(--secondary);
}
.exit-btn-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  cursor: pointer;
  margin-top: 0.75rem;
  font-family: var(--font);
}
.exit-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
}

/* Section résultats hidden par défaut */
.section-surface-hidden {
  background: var(--bg-surface);
  display: none;
}

/* Formulaire details/summary */
.form-details {
  margin-top: 0.75rem;
}
.form-details-summary {
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--secondary);
  font-family: var(--font);
}
.field-hint-inline {
  color: var(--text-muted);
  font-weight: 400;
  font-size:var(--fs-base);
}

/* Responsive */
@media (max-width: 640px) {
  .result-box { padding: 1.5rem 1rem; }
  .result-email-form { flex-direction: column; }
  .result-ctas { flex-direction: column; align-items: center; }
}
/* Apercu page styles */
.apercu-topbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,4%,60px);
  height:90px;
  overflow:visible
}
.apercu-topbar-logo {
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  margin:-25px 0 -45px -10px
}
.apercu-topbar-logo img {
  height:160px;
  width:auto
}
.apercu-topbar-link {
  padding:10px 20px;
  font-size: var(--fs-md);
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  background:var(--primary);
  border:none;
  border-radius:var(--radius)
}
.apercu-hero {
  padding:20px 24px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:90px
}
.apercu-hero-logo {
  width:64px;
  height:64px;
  border-radius:var(--radius-xl);
  object-fit:cover;
  margin-bottom:16px;
  border:2px solid var(--border)
}
.apercu-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(var(--primary-rgb),0.25);
  border:1px solid rgba(var(--secondary-rgb),0.3);
  border-radius:var(--radius-full);
  padding:8px 24px;
  font-size:var(--fs-lg);
  color:var(--violet-light);
  margin-bottom:12px;
  font-weight:500
}
.apercu-hero h1 {
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
  color:var(--text)
}
.apercu-hero-sub {
  font-size:var(--fs-lg);
  color:var(--text-dim);
  max-width: 640px;
  margin:0 auto 10px
}
.apercu-hero-message {
  max-width: 640px;
  margin:0 auto 10px;
  padding:14px 20px;
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.7);
  line-height:1.7;
  text-align:left
}
.apercu-hero-anim {
  font-size: var(--fs-base);
  color:var(--text-dim);
  margin-top:16px
}
.apercu-stats {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  padding:20px 24px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:100%;
  max-width: 640px;
  margin-top:20px
}
.apercu-stat {
  text-align:center;
  flex:1;
  min-width:80px
}
.apercu-stat-num {
  font-size: var(--fs-3xl);
  font-weight:700;
  color:var(--text)
}
.apercu-stat-label {
  font-size: var(--fs-sm);
  color:var(--text-dim);
  margin-top:2px
}
.apercu-container {
  max-width:900px;
  margin:0 auto;
  padding:0 20px 40px
}
.apercu-top-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
  margin-bottom:24px
}
.apercu-top-row .apercu-b2b,.apercu-top-row .apercu-actions {
  margin-bottom:0
}
@media (max-width: 640px) {
  .apercu-top-row {
    grid-template-columns:1fr
  }
  .apercu-container {
    max-width:680px
  }
}
.apercu-b2b {
  display:none;
  margin-bottom:24px
}
.apercu-b2b.visible {
  display:block
}
.apercu-b2b-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px
}
.apercu-b2b-title {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size: var(--fs-xl);
  font-weight:700;
  color:var(--text)
}
.apercu-b2b-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px
}
.apercu-b2b-item {
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.2);
  border-radius:var(--radius-lg);
  padding:14px;
  text-align:center
}
.apercu-b2b-item--green {
  background:rgba(var(--success-rgb),0.08);
  border-color:rgba(var(--success-rgb),0.2)
}
.apercu-b2b-item--orange {
  background:rgba(var(--warning-rgb),0.08);
  border-color:rgba(var(--warning-rgb),0.2)
}
.apercu-b2b-item--neutral {
  background:rgba(var(--overlay-rgb),0.03);
  border-color:var(--border)
}
.apercu-b2b-item-label {
  font-size: var(--fs-sm);
  color:var(--text-dim);
  margin-bottom:4px
}
.apercu-b2b-item-value {
  font-size: var(--fs-2xl);
  font-weight:700
}
.apercu-b2b-item-value--accent {
  color:var(--violet-light)
}
.apercu-b2b-item-value--green {
  color:var(--success)
}
.apercu-b2b-item-value--orange {
  color:var(--warning)
}
.apercu-b2b-item-value--text {
  color:var(--text)
}
.apercu-b2b-extra {
  display:none;
  margin-top:16px;
  padding:14px;
  background:rgba(var(--overlay-rgb),0.02);
  border:1px solid var(--border);
  border-radius:var(--radius-lg)
}
.apercu-b2b-extra.visible {
  display:block
}
.apercu-b2b-extra-label {
  font-size:var(--fs-base);
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:6px
}
.apercu-b2b-extra-text {
  color:var(--text);
  font-size: var(--fs-md)
}
.apercu-status {
  display:none;
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  margin-bottom:24px
}
.apercu-status.visible {
  display:block
}
.apercu-status--accepted {
  background:rgba(var(--success-rgb),0.1);
  border:1px solid rgba(var(--success-rgb),0.3)
}
.apercu-status--refused {
  background:rgba(var(--danger-rgb),0.1);
  border:1px solid rgba(var(--danger-rgb),0.3)
}
.apercu-status--modifs {
  background:rgba(var(--warning-rgb),0.1);
  border:1px solid rgba(var(--warning-rgb),0.3)
}
.apercu-status-text {
  font-size:var(--fs-lg);
  font-weight:600
}
.apercu-status--accepted .apercu-status-text {
  color:var(--success)
}
.apercu-status--refused .apercu-status-text {
  color:var(--danger)
}
.apercu-status--modifs .apercu-status-text {
  color:var(--warning)
}
.apercu-actions {
  display:none;
  margin-bottom:24px
}
.apercu-actions.visible {
  display:block
}
.apercu-actions-card {
  background:linear-gradient(135deg,rgba(var(--primary-rgb),0.08),rgba(var(--success-rgb),0.05));
  border:1px solid rgba(var(--primary-rgb),0.2);
  border-radius:var(--radius);
  padding:24px;
  text-align:center
}
.apercu-actions-title {
  font-size: var(--fs-xl);
  font-weight:700;
  color:var(--text);
  margin-bottom:8px
}
.apercu-actions-sub {
  color:var(--text-dim);
  font-size: var(--fs-base);
  margin-bottom:20px
}
.apercu-actions-btns {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap
}
.apercu-btn-accept {
  background:var(--success);
  color:#000;
  border:none;
  border-radius:var(--radius-lg);
  padding:12px 28px;
  font-size: var(--fs-lg);
  font-weight:700;
  cursor:pointer;
  font-family:var(--font)
}
.apercu-btn-modifs {
  background:rgba(var(--warning-rgb),0.15);
  color:var(--warning);
  border:1px solid rgba(var(--warning-rgb),0.3);
  border-radius:var(--radius-lg);
  padding:12px 28px;
  font-size: var(--fs-lg);
  font-weight:600;
  cursor:pointer;
  font-family:var(--font)
}
.apercu-btn-refuse {
  background:rgba(var(--danger-rgb),0.1);
  color:var(--danger);
  border:1px solid rgba(var(--danger-rgb),0.3);
  border-radius:var(--radius-lg);
  padding:12px 28px;
  font-size: var(--fs-lg);
  font-weight:600;
  cursor:pointer;
  font-family:var(--font)
}
.apercu-message-zone {
  display:none;
  margin-top:16px
}
.apercu-message-zone.visible {
  display:block
}
.apercu-message-textarea {
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-md);
  resize:vertical
}
.apercu-btn-confirm {
  margin-top:10px;
  background:var(--primary);
  color:var(--text);
  border:none;
  border-radius:var(--radius);
  padding:10px 24px;
  font-size: var(--fs-md);
  font-weight:600;
  cursor:pointer;
  font-family:var(--font)
}
.apercu-action-result {
  display:none;
  margin-top:16px;
  padding:16px;
  border-radius:var(--radius-lg);
  font-size:var(--fs-lg);
  font-weight:600;
  text-align:center
}
.apercu-action-result.visible {
  display:block
}
.apercu-action-result--success {
  background:rgba(var(--success-rgb),0.1);
  color:var(--success)
}
.apercu-action-result--error {
  background:rgba(var(--danger-rgb),0.1);
  color:var(--danger)
}
.apercu-section-title {
  font-size: var(--fs-2xl);
  font-weight:700;
  margin:32px 0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
.apercu-section-count {
  background:rgba(var(--primary-rgb),0.25);
  border:1px solid rgba(var(--secondary-rgb),0.25);
  border-radius:var(--radius-full);
  padding:2px 12px;
  font-size: var(--fs-sm);
  color:var(--violet-light);
  font-weight:500
}
.apercu-parcours-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:24px;
  overflow:hidden;
  transition:border-color 0.3s
}
.apercu-parcours-card:hover {
  border-color:rgba(var(--secondary-rgb),0.25)
}
.apercu-parcours-header {
  padding:24px 28px 20px;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:16px
}
.apercu-parcours-emoji {
  font-size: var(--fs-4xl);
  flex-shrink:0;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--overlay-rgb),0.04);
  border-radius:var(--radius-lg)
}
.apercu-parcours-info {
  flex:1
}
.apercu-parcours-title {
  font-size: var(--fs-xl);
  font-weight:700;
  margin-bottom:4px
}
.apercu-parcours-meta {
  font-size: var(--fs-base);
  color:var(--text-dim);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:6px
}
.apercu-parcours-desc {
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.6);
  line-height:1.6
}
.apercu-parcours-toggle {
  color:var(--text-dim);
  font-size: var(--fs-xl);
  transition:transform 0.3s;
  flex-shrink:0;
  margin-top:4px
}
.apercu-parcours-card.open .apercu-parcours-toggle {
  transform:rotate(180deg)
}
.apercu-cours-list {
  display:none;
  padding:0 28px 24px
}
.apercu-parcours-card.open .apercu-cours-list {
  display:block
}
.apercu-cours-item {
  background:rgba(var(--overlay-rgb),0.03);
  border:1px solid rgba(var(--overlay-rgb),0.06);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:10px;
  max-width: 640px;
  margin-left:auto;
  margin-right:auto;
  transition:border-color 0.2s
}
.apercu-cours-item:hover {
  border-color:rgba(var(--secondary-rgb),0.2)
}
.apercu-cours-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer
}
.apercu-cours-titre {
  font-size: var(--fs-lg);
  font-weight:600
}
.apercu-cours-duree {
  font-size: var(--fs-sm);
  color:var(--text-dim);
  white-space:nowrap;
  background:rgba(var(--overlay-rgb),0.04);
  padding:3px 10px;
  border-radius:var(--radius-full)
}
.apercu-cours-contenu {
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(var(--overlay-rgb),0.06);
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.65);
  line-height:1.7
}
.apercu-cours-item.open .apercu-cours-contenu {
  display:block
}
.apercu-cours-contenu h3 {
  font-size: var(--fs-lg);
  color:var(--text);
  margin:16px 0 8px;
  font-weight:600
}
.apercu-cours-contenu ul {
  padding-left:20px;
  margin:8px 0
}
.apercu-cours-contenu li {
  margin-bottom:6px
}
.apercu-cours-contenu strong {
  color:var(--text)
}
.apercu-cours-video-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(var(--warning-rgb),0.1);
  border:1px solid rgba(var(--warning-rgb),0.25);
  border-radius:var(--radius-full);
  padding:3px 10px;
  font-size: var(--fs-sm);
  color:var(--warning);
  margin-top:8px
}
.apercu-fiche-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.15);
  border-radius:var(--radius);
  color:var(--violet-light);
  font-size: var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  margin-right:6px;
  margin-bottom:4px
}
.apercu-fiches {
  display:none
}
.apercu-loading {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  gap:16px;
  margin-top:90px
}
.apercu-spinner {
  width:40px;
  height:40px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:apercu-spin 0.8s linear infinite
}
@keyframes apercu-spin {
  to {
    transform:rotate(360deg)
  }
}
.apercu-loading-text {
  color:var(--text-dim);
  font-size: var(--fs-md)
}
.apercu-error {
  display:none;
  text-align:center;
  padding:80px 20px;
  margin-top:90px
}
.apercu-error-emoji {
  font-size: var(--fs-4xl);
  margin-bottom:16px
}
.apercu-error h2 {
  font-size: var(--fs-2xl);
  margin-bottom:8px
}
.apercu-error p {
  color:var(--text-dim)
}
.hidden {
  display:none!important
}
.apercu-stats.fade-up {
  opacity:0;
  transform:translateY(20px);
  animation:apercu-fadeUp 0.5s ease forwards
}
@keyframes apercu-fadeUp {
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media (max-width:640px) {
  .apercu-hero {
    padding:16px 16px 10px
  }
  .apercu-parcours-header {
    padding:18px 16px 14px
  }
  .apercu-cours-list {
    padding:0 16px 18px
  }
  .apercu-stats {
    gap:12px;
    padding:16px
  }
  .apercu-stat-num {
    font-size: var(--fs-2xl)
  }
  .apercu-b2b-grid {
    grid-template-columns:1fr 1fr
  }
  .apercu-actions-btns {
    flex-direction:column
  }
}
.apercu-cours-top-left {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1
}
.apercu-cours-fiches-block {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(var(--overlay-rgb),0.06)
}
.apercu-fiche-link--block {
  display:block;
  margin-bottom:8px
}
.bonus-page {
  min-height:100vh;
  padding-top:5.625rem
}
.bonus-hero {
  text-align:center;
  padding:2.5rem 1.5rem 1.875rem
}
.bonus-hero-badge {
  display:inline-block;
  background:rgba(var(--success-rgb),0.12);
  border:1px solid rgba(var(--success-rgb),0.3);
  border-radius:var(--radius-full);
  padding:0.5rem 1.25rem;
  font-size: var(--fs-base);
  font-weight:600;
  color:var(--success);
  margin-bottom:1rem
}
.bonus-hero-title {
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:700;
  color:var(--text);
  margin-bottom:0.75rem
}
.bonus-hero-sub {
  font-size: var(--fs-lg);
  color:rgba(var(--overlay-rgb),0.6);
  max-width:32.5rem;
  margin:0 auto;
  line-height:1.6
}
.bonus-hero-sub strong {
  color:var(--success);
  font-size: var(--fs-xl)
}
.bonus-container {
  max-width:45rem;
  margin:0 auto;
  padding:0 1.25rem 3.75rem
}
.bonus-section-title {
  font-size: var(--fs-2xl);
  font-weight:700;
  color:var(--text);
  margin-bottom:1rem
}
.bonus-explain {
  margin-bottom:2.5rem
}
.bonus-steps {
  display:flex;
  flex-direction:column;
  gap:1rem
}
.bonus-step {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.25rem;
  background:var(--bg-card,var(--bg-hover));
  border:1px solid rgba(var(--overlay-rgb),0.08);
  border-radius:var(--radius)
}
.bonus-step-num {
  width:2.25rem;
  height:2.25rem;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--success-rgb),0.12);
  border:1px solid rgba(var(--success-rgb),0.3);
  border-radius:50%;
  font-weight:700;
  color:var(--success);
  font-size: var(--fs-lg)
}
.bonus-step-content h3 {
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--text);
  margin-bottom:0.25rem
}
.bonus-step-content p {
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.55);
  line-height:1.5
}
.bonus-catalog-section {
  margin-bottom:2.5rem
}
.bonus-catalog-section-title {
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--text);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:0.5rem
}
.bonus-catalog-sub {
  color:rgba(var(--overlay-rgb),0.5);
  font-size: var(--fs-md);
  margin-bottom:1rem
}
.bonus-catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));
  gap:0.75rem
}
.bonus-catalog-card {
  background:var(--bg-card,var(--bg-hover));
  border:1px solid rgba(var(--overlay-rgb),0.08);
  border-radius:var(--radius-lg);
  padding:1rem
}
.bonus-catalog-category {
  font-size: var(--fs-xs);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.375rem
}
.bonus-catalog-label {
  font-size: var(--fs-md);
  font-weight:600;
  color:var(--text);
  margin-bottom:0.5rem
}
.bonus-catalog-amount {
  font-size: var(--fs-xl);
  font-weight:700;
  color:var(--success)
}
.bonus-loading {
  grid-column:1 / -1;
  text-align:center;
  color:rgba(var(--overlay-rgb),0.4);
  padding:1.25rem
}
.bonus-cta-section {
  text-align:center;
  padding:1.875rem;
  background:linear-gradient(135deg,rgba(var(--success-rgb),0.08),rgba(var(--primary-rgb),0.05));
  border:1px solid rgba(var(--success-rgb),0.2);
  border-radius:var(--radius-lg);
  margin-bottom:2.5rem
}
.bonus-cta-text {
  color:rgba(var(--overlay-rgb),0.6);
  font-size: var(--fs-lg);
  margin-bottom:1.25rem
}
.bonus-cta-btn {
  display:inline-block;
  background:var(--success);
  color:#000;
  padding:0.875rem 2rem;
  border-radius:var(--radius);
  font-weight:700;
  font-size:var(--fs-lg);
  text-decoration:none;
  font-family:var(--font)
}
.bonus-container-wide {
  max-width:56.25rem;
  padding:2.5rem clamp(1.25rem,5%,5rem)
}
.bonus-legal {
  padding:1.25rem;
  background:rgba(var(--overlay-rgb),0.02);
  border:1px solid rgba(var(--overlay-rgb),0.06);
  border-radius:var(--radius-lg)
}
.bonus-legal-title {
  font-size: var(--fs-md);
  font-weight:600;
  color:rgba(var(--overlay-rgb),0.6);
  margin-bottom:0.75rem
}
.bonus-legal-list {
  list-style:none;
  padding:0
}
.bonus-legal-list li {
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.45);
  line-height:1.6;
  padding-left:1rem;
  position:relative;
  margin-bottom:0.375rem
}
.bonus-legal-list li::before {
  content:"•";
  position:absolute;
  left:0;
  color:rgba(var(--overlay-rgb),0.25)
}
.bonus-legal-list a {
  color:var(--secondary);
  text-decoration:none
}
.boutique-badge {
  display:inline-block;
  background:rgba(var(--success-rgb),0.12);
  border:1px solid rgba(var(--success-rgb),0.3);
  border-radius:var(--radius-full);
  padding:0.375rem 1.125rem;
  font-size: var(--fs-base);
  font-weight:600;
  color:var(--success);
  margin-bottom:0.875rem
}
.boutique-container {
  max-width:60rem;
  margin:0 auto;
  padding:2.5rem clamp(1.25rem,5%,5rem) 3.75rem
}
.boutique-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
  gap:1.125rem
}
.boutique-loading {
  grid-column:1/-1;
  text-align:center;
  color:rgba(var(--overlay-rgb),0.4);
  padding:2.5rem
}
@keyframes skel-shimmer {
  0%{background-position:-30rem 0}
  100%{background-position:30rem 0}
}
.boutique-skeleton {
  background:var(--bg-card,var(--bg-hover));
  border:1px solid rgba(var(--overlay-rgb),0.08);
  border-radius:var(--radius);
  overflow:hidden
}
.skel-bar {
  background:linear-gradient(90deg,rgba(var(--overlay-rgb),0.06) 25%,rgba(var(--overlay-rgb),0.12) 50%,rgba(var(--overlay-rgb),0.06) 75%);
  background-size:60rem 100%;
  animation:skel-shimmer 1.8s infinite linear;
  border-radius:0.25rem
}
.skel-img {
  height:11.25rem;
  border-radius:0
}
.skel-body {
  padding:0.75rem
}
.skel-title {
  height:1rem;
  width:70%;
  margin-bottom:0.5rem
}
.skel-text {
  height:0.75rem;
  width:50%;
  margin-bottom:0.75rem
}
.skel-price {
  height:1.25rem;
  width:30%
}
.boutique-empty {
  text-align:center;
  color:rgba(var(--overlay-rgb),0.4);
  padding:2.5rem
}
.boutique-empty-icon {
  font-size: var(--fs-4xl);
  margin-bottom:1rem
}
.boutique-card {
  background:var(--bg-card,var(--bg-hover));
  border:1px solid rgba(var(--overlay-rgb),0.08);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.2s,transform 0.2s
}
.boutique-card:hover {
  border-color:rgba(var(--success-rgb),0.3);
  transform:translateY(-0.125rem)
}
.boutique-card-img {
  height:11.25rem;
  background:rgba(var(--overlay-rgb),0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.boutique-card-img img {
  width:100%;
  height:100%;
  object-fit:cover
}
.boutique-card-img--placeholder span {
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.3)
}
.boutique-card-body {
  padding:1rem
}
.boutique-card-cat {
  font-size: var(--fs-2xs);
  color:rgba(var(--overlay-rgb),0.4);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.25rem
}
.boutique-card-title {
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--text);
  margin-bottom:0.375rem
}
.boutique-card-specs {
  font-size: var(--fs-sm);
  color:rgba(var(--overlay-rgb),0.4);
  margin-bottom:0.625rem
}
.boutique-card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.boutique-card-etat {
  font-size: var(--fs-xs);
  padding:0.125rem 0.5rem;
  border-radius:var(--radius-sm);
  background:rgba(var(--overlay-rgb),0.05);
  color:rgba(var(--overlay-rgb),0.5)
}
.boutique-card-etat--neuf {
  background:rgba(var(--success-rgb),0.1);
  color:var(--success)
}
.boutique-card-etat--bon_etat {
  background:rgba(var(--info-rgb),0.1);
  color:var(--info)
}
.boutique-card-price {
  font-size: var(--fs-xl);
  font-weight:700;
  color:var(--success)
}
.boutique-card-garantie {
  font-size: var(--fs-xs);
  color:rgba(var(--overlay-rgb),0.35);
  margin-top:0.375rem
}
.boutique-detail-meta {
  font-size: var(--fs-sm);
  color:rgba(var(--overlay-rgb),0.4);
  margin-bottom:0.875rem
}
.boutique-detail-img {
  width:100%;
  border-radius:var(--radius);
  margin-bottom:0.875rem
}
.boutique-detail-price {
  font-size: var(--fs-3xl);
  font-weight:700;
  color:var(--success);
  margin-bottom:0.5rem
}
.boutique-detail-garantie {
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.5);
  margin-bottom:0.75rem
}
.boutique-detail-desc {
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.6);
  line-height:1.6;
  margin-bottom:0.875rem
}
.boutique-detail-specs-title {
  font-size: var(--fs-sm);
  font-weight:600;
  color:rgba(var(--overlay-rgb),0.5);
  margin-bottom:0.375rem
}
.boutique-detail-specs {
  margin-bottom:0.875rem
}
.boutique-spec {
  display:flex;
  justify-content:space-between;
  padding:0.3125rem 0;
  border-bottom:1px solid rgba(var(--overlay-rgb),0.04);
  font-size: var(--fs-base)
}
.boutique-spec-key {
  color:rgba(var(--overlay-rgb),0.4)
}
.boutique-detail-vendeur {
  font-size:var(--fs-base);
  color:rgba(var(--overlay-rgb),0.35);
  margin-bottom:1rem
}
.boutique-achat-form {
  border-top:1px solid rgba(var(--overlay-rgb),0.08);
  padding-top:1rem
}
.boutique-achat-form h3 {
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--text);
  margin:0 0 0.75rem
}
.boutique-input {
  width:100%;
  padding:0.625rem 0.75rem;
  background:rgba(var(--overlay-rgb),0.04);
  border:1px solid rgba(var(--overlay-rgb),0.1);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-md);
  margin-bottom:0.5rem;
  box-sizing:border-box
}
.boutique-btn-acheter {
  width:100%;
  padding:0.75rem;
  background:var(--success);
  color:#000;
  border:none;
  border-radius:var(--radius);
  font-weight:700;
  font-size: var(--fs-lg);
  cursor:pointer;
  font-family:var(--font)
}
.boutique-result {
  margin-top:0.5rem;
  font-size: var(--fs-base);
  text-align:center
}
.boutique-result--ok {
  color:var(--success)
}
.boutique-result--err {
  color:var(--danger)
}
.boutique-input {
  box-sizing:border-box
}
.boutique-btn-acheter {
  box-sizing:border-box
}
.boutique-detail-photo {
  width:100%;
  height:13.75rem;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:0.875rem;
  background:rgba(var(--overlay-rgb),0.03)
}
.boutique-detail-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.boutique-detail-photo--placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(var(--overlay-rgb),0.2);
  font-size:var(--fs-lg)
}
.boutique-detail-badges {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:0.75rem
}
.boutique-etat-badge {
  padding:0.25rem 0.75rem;
  border-radius:var(--radius);
  font-size: var(--fs-sm);
  font-weight:700
}
.boutique-etat-badge--neuf {
  background:rgba(var(--success-rgb),0.12);
  color:var(--success)
}
.boutique-etat-badge--tres_bon_etat {
  background:rgba(var(--info-rgb),0.12);
  color:var(--info)
}
.boutique-etat-badge--bon_etat {
  background:rgba(var(--secondary-rgb),0.12);
  color:var(--violet-light)
}
.boutique-etat-badge--etat_moyen {
  background:rgba(var(--warning-rgb),0.12);
  color:var(--warning)
}
.boutique-etat-badge--a_reparer {
  background:rgba(var(--danger-rgb),0.12);
  color:var(--danger)
}
.boutique-garantie-badge {
  padding:0.25rem 0.75rem;
  border-radius:var(--radius);
  font-size: var(--fs-sm);
  font-weight:600;
  background:rgba(var(--success-rgb),0.08);
  border:1px solid rgba(var(--success-rgb),0.2);
  color:var(--success)
}
.boutique-detail-price {
  font-size: var(--fs-3xl);
  font-weight:800;
  color:var(--success);
  margin-bottom:0.25rem
}
.boutique-detail-ref {
  font-size: var(--fs-xs);
  color:rgba(var(--overlay-rgb),0.3);
  font-family:var(--font-mono);
  margin-bottom:0.875rem
}
.boutique-detail-desc {
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.6);
  line-height:1.6;
  margin-bottom:1rem;
  padding:0.875rem;
  background:rgba(var(--overlay-rgb),0.02);
  border-radius:var(--radius)
}
.boutique-detail-section {
  margin-bottom:1rem
}
.boutique-detail-section-title {
  font-size: var(--fs-sm);
  font-weight:700;
  color:rgba(var(--overlay-rgb),0.5);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.5rem
}
.boutique-detail-eco {
  display:flex;
  gap:0.75rem;
  align-items:flex-start;
  padding:0.875rem;
  background:rgba(var(--success-rgb),0.05);
  border:1px solid rgba(var(--success-rgb),0.15);
  border-radius:var(--radius);
  margin-bottom:0.875rem;
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.6);
  line-height:1.5
}
.boutique-eco-icon {
  font-size: var(--fs-2xl);
  flex-shrink:0
}
.boutique-detail-eco strong {
  color:var(--success)
}
.boutique-detail-vendeur-card {
  display:flex;
  gap:0.75rem;
  align-items:center;
  padding:0.875rem;
  background:rgba(var(--secondary-rgb),0.05);
  border:1px solid rgba(var(--secondary-rgb),0.15);
  border-radius:var(--radius);
  margin-bottom:1rem;
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.6)
}
.boutique-vendeur-icon {
  font-size: var(--fs-2xl);
  flex-shrink:0
}
.boutique-detail-vendeur-card strong {
  color:var(--text)
}
.boutique-detail-shipping {
  font-size: var(--fs-base);
  margin-top:0.25rem;
  color:rgba(var(--overlay-rgb),0.6);
}
.boutique-detail-shipping--free{color:var(--success);}

/* ══════════════════════════════════════════════
   PANIER SIDEBAR - Cart icon, overlay, sidebar, inputs
   ══════════════════════════════════════════════ */

.cart-icon-btn {
  position: fixed;
  top: calc(var(--nav-h, 90px) + 1rem);
  right: 1rem;
  z-index: 9990;
  width: 3rem;
  height: 3rem;
  background: rgba(30, 30, 50, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
  border: none;
  font-family: var(--font);
}
[data-theme="light"] .cart-icon-btn {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
}
.cart-icon-btn:hover { transform: scale(1.1); }
.cart-icon-emoji { font-size: var(--fs-2xl); }

.cart-badge {
  display: none;
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  min-width: 1.125rem;
  height: 1.125rem;
  border-radius:var(--radius-full);
  align-items: center;
  justify-content: center;
}

.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9991;
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: -25rem;
  width: 23.75rem;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid rgba(var(--overlay-rgb), 0.1);
  z-index: 9992;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font);
}
[data-theme="light"] .cart-sidebar {
  background: var(--bg-card);
  border-left-color: var(--border-dark);
}

.cart-sidebar-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-sidebar-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-family: var(--font);
}
.cart-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-2xl);
  cursor: pointer;
}

.cart-body { padding: 1rem 1.25rem; }
.cart-footer { padding: 0 1.25rem 1.25rem; display: none; }

.cart-section-label {
  margin-bottom: 0.75rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font);
}

.cart-input,
.cart-select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  color: var(--text);
  font-size: var(--fs-base);
  margin-bottom: 0.375rem;
  box-sizing: border-box;
  font-family: var(--font);
}
[data-theme="light"] .cart-input,
[data-theme="light"] .cart-select {
  background: var(--bg-tinted);
  border-color: var(--border);
}

.cart-radio-row {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.cart-radio-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius:var(--radius);
  cursor: pointer;
  font-size:var(--fs-base);
  color: var(--text);
  font-family: var(--font);
}

.cart-addr-block { display: none; margin-bottom: 0.375rem; }
.cart-row-tight { display: flex; gap: 0.375rem; }

.cart-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.cart-btn-pay {
  flex: 1;
  padding: 0.75rem;
  background: var(--success);
  color: #000;
  border: none;
  border-radius:var(--radius);
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
  font-family: var(--font);
}
.cart-btn-devis {
  flex: 1;
  padding: 0.75rem;
  background: rgba(var(--secondary-rgb), 0.15);
  color: var(--secondary);
  border: 1px solid rgba(var(--secondary-rgb), 0.3);
  border-radius:var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  font-family: var(--font);
}

/* ============================================================
   Extracted from boutique-enhancer.js - product fullscreen responsive + light theme
   ============================================================ */
@media(max-width:900px) {
  #product-fullscreen > div:last-child {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  #product-fullscreen > div:last-child > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(var(--overlay-rgb),0.06);
  }
}
[data-theme="light"] #product-fullscreen { background: var(--bg); color: var(--text); }
[data-theme="light"] #product-fullscreen h1 { color: var(--text); }
[data-theme="light"] #product-fullscreen input,
[data-theme="light"] #product-fullscreen select {
  background: rgba(var(--overlay-rgb),0.03); border-color: rgba(var(--overlay-rgb),0.12); color: var(--text);
}
[data-theme="light"] #product-fullscreen span[style*="color:var(--border)"],
[data-theme="light"] #product-fullscreen span[style*="color: var(--border)"] { color: var(--text) !important; }
[data-theme="light"] #product-fullscreen span[style*="color:rgba(255,255,255"] { color: rgba(var(--overlay-rgb),0.5) !important; }
[data-theme="light"] #product-fullscreen strong[style*="color:var(--text)"] { color: var(--text) !important; }
[data-theme="light"] #product-fullscreen div[style*="color:var(--text)"] { color: var(--text) !important; }
[data-theme="light"] #product-fullscreen div[style*="background:rgba(var(--overlay-rgb),0.0"] { background: rgba(var(--overlay-rgb),0.02) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] #product-fullscreen div[style*="border-right:1px solid rgba(255"] { border-color: var(--border-dark) !important; }
[data-theme="light"] #product-fullscreen div[style*="border-bottom:1px solid rgba(255"] { border-color: rgba(var(--overlay-rgb),0.06) !important; }

/* ============================================================
   Extracted from boutique-filters.js - light theme filter inputs
   ============================================================ */
[data-theme="light"] #boutique-filters input,
[data-theme="light"] #boutique-filters select {
  background: rgba(var(--overlay-rgb),0.03); border-color: rgba(var(--overlay-rgb),0.12); color: var(--text);
}

/* ============================================================
   Extracted from boutique.html - cart sidebar open states + light theme
   ============================================================ */
#cart-sidebar.open { right: 0 !important; }
#cart-overlay.open { display: block !important; }
html[data-theme='light'] #cart-icon { background: var(--secondary) !important; }
html[data-theme='light'] #cart-sidebar { background: var(--bg-card); border-color: var(--border); }
html[data-theme='light'] #cart-sidebar input, html[data-theme='light'] #cart-sidebar select { background: rgba(var(--overlay-rgb),0.03); border-color: rgba(var(--overlay-rgb),0.12); color: var(--text); }
.carte-page {
  min-height:100vh;
  padding-top:5.625rem
}
.carte-hero {
  text-align:center;
  padding:1.875rem 1.5rem 1.25rem
}
.carte-title {
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:700;
  color:var(--text);
  margin-bottom:0.5rem
}
.carte-sub {
  font-size: var(--fs-lg);
  color:rgba(var(--overlay-rgb),0.55);
  margin-bottom:1rem
}
.carte-legend {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap
}
.carte-legend-item {
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  font-size: var(--fs-base);
  color:rgba(var(--overlay-rgb),0.6);
  padding:0.25rem 0.75rem;
  border-radius:var(--radius-full);
  border:1px solid rgba(var(--overlay-rgb),0.1)
}
.carte-legend-item::before {
  content:"";
  width:0.625rem;
  height:0.625rem;
  border-radius:50%;
  display:inline-block
}
.carte-legend-siege::before {
  background:var(--primary)
}
.carte-legend-atelier::before {
  background:var(--success)
}
.carte-legend-reparation::before {
  background:var(--warning)
}
.carte-container {
  max-width:56.25rem;
  margin:0 auto;
  padding:0 1.25rem 2.5rem;
  position:relative
}
.carte-map {
  width:100%;
  height:31.25rem;
  border-radius:var(--radius-lg);
  border:1px solid rgba(var(--overlay-rgb),0.08);
  overflow:hidden;
  z-index:1
}
.carte-loading {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:rgba(var(--overlay-rgb),0.6);
  font-size: var(--fs-md);
  z-index:2
}
.carte-placeholder {
  background:linear-gradient(135deg,rgba(var(--primary-rgb),0.08) 0%,rgba(var(--secondary-rgb),0.06) 50%,rgba(var(--primary-rgb),0.04) 100%);
  cursor:pointer;
  transition:filter 0.3s
}
.carte-placeholder:hover {
  filter:brightness(1.1)
}
.carte-placeholder-label {
  background:var(--primary);
  color:#fff;
  padding:8px 20px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(var(--primary-rgb),0.3)
}
.leaflet-control-zoom a {
  background:var(--bg-hover)!important;
  color:var(--text)!important;
  border-color:rgba(var(--overlay-rgb),0.1)!important
}
.leaflet-control-attribution {
  background:rgba(36,36,56,0.85)!important;
  color:rgba(var(--overlay-rgb),0.4)!important;
  font-size: var(--fs-2xs)!important
}
.leaflet-control-attribution a {
  color:rgba(var(--overlay-rgb),0.5)!important
}
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-tip {
  background: var(--bg-card) !important;
}
.leaflet-popup-close-button {
  color: var(--text-muted) !important;
}
[data-theme="light"] .leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #1a1a2e !important;
}
[data-theme="light"] .leaflet-popup-tip {
  background: #ffffff !important;
}
.carte-popup-label { color: var(--text) !important; }
.carte-popup-ville { color: var(--text-muted) !important; }
.carte-popup-title {
  font-weight:700;
  font-size: var(--fs-md);
  margin-bottom:0.25rem
}
.carte-popup-type {
  font-size: var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.125rem
}
.carte-popup-type--siege {
  color:var(--primary)
}
.carte-popup-type--atelier {
  color:var(--success)
}
.carte-popup-type--reparation {
  color:var(--warning)
}
.carte-section {
  width:100%;
  padding:3.125rem 0 0;
  background:inherit;
  border:none
}
.pb-block[data-block-type="map-leaflet"] {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  max-width: none;
}
.carte-section-header {
  text-align:center;
  margin-bottom:1rem
}
.carte-section-header h2 {
  font-size: var(--fs-2xl);
  font-weight:700;
  color:var(--text);
  margin:0.5rem 0
}
.carte-section-sub {
  font-size: var(--fs-md);
  color:rgba(var(--overlay-rgb),0.5)
}
.carte-section-legend {
  display:flex;
  gap:0.75rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:1rem
}
.carte-section-map-wrap {
  position:relative;
  margin-top:1.25rem
}
.carte-section-map {
  width:100%;
  height:26.25rem;
  border-radius:0;
  border:none;
  border:none;
  overflow:hidden;
  z-index:1
}
.carte-legend-prochain::before {
  background:var(--secondary)
}
.carte-legend-partenaire::before {
  background:var(--cyan)
}
.carte-legend-item {
  cursor:pointer;
  transition:opacity 0.2s;
  user-select:none
}
.carte-legend-item:hover {
  opacity:0.8
}
.carte-legend-item--off {
  opacity:0.3;
  text-decoration:line-through
}
/* ==========================================================   obso-course.css
   Extracted from course.html <style> blocks (2 blocks)
   Source: course.html lines 27-426 and 444-454
   ========================================================== */

    body.page-course { background: var(--violet-dark); }

    /* ── Layout ── */
    .course-layout {
      display: grid; grid-template-columns: 1fr 18.75rem;
      gap: 1.75rem; max-width: 75rem; margin: 0 auto;
      padding: 2rem clamp(1.25rem,4%,3.25rem) 3.25rem;
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: var(--fs-sm); color: rgba(var(--overlay-rgb),0.40);
      margin-bottom: 1.25rem; flex-wrap: wrap;
    }
    .breadcrumb a { color: rgba(var(--overlay-rgb),0.40); text-decoration: none; transition: color var(--t); }
    .breadcrumb a:hover { color: var(--secondary); }
    .breadcrumb-sep { color: rgba(var(--overlay-rgb),0.20); }
    .breadcrumb .current { color: rgba(var(--overlay-rgb),0.70); font-weight: 500; }

    /* ── Titre du cours ── */
    .course-header { margin-bottom: 1.5rem; }
    .course-parcours-tag {
      display: inline-flex; align-items: center; gap: 0.375rem;
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--secondary); background: rgba(var(--primary-rgb),0.15); border: 1px solid rgba(var(--secondary-rgb),0.25);
      border-radius:var(--radius-full); padding: 0.1875rem 0.625rem; margin-bottom: 0.625rem;
    }
    .course-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.375rem; }
    .course-meta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .course-meta-item { font-size: var(--fs-sm); color: rgba(var(--overlay-rgb),0.45); display: flex; align-items: center; gap: 0.3125rem; }

    /* ── Statut badge ── */
    .course-status {
      display: inline-flex; align-items: center; gap: 0.375rem;
      font-size: var(--fs-sm); font-weight: 700; padding: 0.25rem 0.75rem;
      border-radius:var(--radius-full);
    }
    .status-fait     { background: rgba(var(--success-rgb),0.12); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.25); }
    .status-en_cours { background: rgba(var(--primary-rgb),0.15);  color: var(--secondary); border: 1px solid rgba(var(--secondary-rgb),0.25); }
    .status-todo     { background: rgba(var(--overlay-rgb),0.06); color: rgba(var(--overlay-rgb),0.45); border: 1px solid rgba(var(--overlay-rgb),0.12); }

    /* ── Zone vidéo ── */
    .course-video {
      background: var(--bg-deep); border: 1px solid rgba(var(--overlay-rgb),0.08);
      border-radius:var(--radius); overflow: hidden;
      aspect-ratio: 16/9; margin-bottom: 1.5rem;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .video-placeholder {
      display: flex; flex-direction: column; align-items: center; gap: 0.875rem;
      color:var(--text-dim); text-align: center;
    }
    .video-play-btn {
      width: 4rem; height: 4rem; border-radius: 50%;
      background: rgba(var(--primary-rgb),0.25); border: 2px solid rgba(var(--secondary-rgb),0.40);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-3xl); cursor: pointer; transition: all var(--t);
    }
    .video-play-btn:hover { background: rgba(var(--primary-rgb),0.45); transform: scale(1.05); }
    .video-caption { font-size: var(--fs-base); }
    .video-caption-sub { font-size: var(--fs-sm) !important; color:var(--text)fff !important; font-weight:700 !important; }
    .video-caption-sub * { color:var(--text)fff !important; font-weight:700 !important; }
    .video-soon-text { font-size: var(--fs-md); color:var(--text)fff !important; margin-bottom:1rem; font-weight:600; }
    [data-theme="light"] .video-soon-text { color:var(--text)fff !important; }
    [data-theme="light"] .video-caption-sub { color:rgba(var(--overlay-rgb),0.80) !important; }

    /* ── Contenu texte ── */
    .course-content {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius); padding: 1.75rem; margin-bottom: 1.5rem;
    }
    .course-content h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.75rem; color: var(--text); }
    .course-content h3 { font-size: var(--fs-lg); font-weight: 600; margin: 1.125rem 0 0.5rem; color: rgba(var(--overlay-rgb),0.85); }
    .course-content p  { font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.62); line-height: 1.75; margin-bottom: 0.75rem; }
    .course-content ul { padding-left: 1.25rem; margin-bottom: 0.875rem; }
    .course-content li { font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.62); line-height: 1.7; margin-bottom: 0.25rem; }

    /* Code block */
    .code-block {
      background: var(--bg-deep); border: 1px solid rgba(var(--overlay-rgb),0.10);
      border-radius:var(--radius); padding: 1rem 1.125rem; margin: 0.875rem 0;
      font-family: var(--font-mono); font-size: var(--fs-base);
      color: var(--violet-light); overflow-x: auto; line-height: 1.6;
    }
    .code-block .cmd { color: var(--success); }
    .code-block .comment { color: rgba(var(--overlay-rgb),0.30); }

    [data-theme="light"] .code-block {
      background: var(--bg-deep) !important;
      border-color: rgba(var(--secondary-rgb),0.25) !important;
      color: var(--violet-light) !important;
    }
    [data-theme="light"] .code-block .cmd { color: var(--success) !important; }
    [data-theme="light"] .code-block .comment { color: rgba(139,148,158,0.8) !important; }
    [data-theme="light"] .code-block * { color: inherit !important; }

    /* Info box */
    .info-box {
      background: rgba(var(--primary-rgb),0.08); border: 1px solid rgba(var(--secondary-rgb),0.22);
      border-radius:var(--radius); padding: 0.875rem 1rem; margin: 1rem 0;
      display: flex; gap: 0.75rem;
    }
    .info-box-icon { font-size: var(--fs-xl); flex-shrink: 0; margin-top: 1px; }
    .info-box p { font-size: var(--fs-base); color: rgba(var(--overlay-rgb),0.60); margin: 0; line-height: 1.65; }

    /* ── Ressources ── */
    .course-resources {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius); padding: 1.375rem; margin-bottom: 1.5rem;
    }
    .course-resources h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.875rem; }
    .resource-item {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.6875rem 0.875rem; background: rgba(var(--overlay-rgb),0.03);
      border: 1px solid rgba(var(--overlay-rgb),0.07); border-radius:var(--radius);
      margin-bottom: 0.5rem; text-decoration: none; transition: all var(--t);
    }
    .resource-item:hover { border-color: rgba(var(--secondary-rgb),0.25); background: rgba(var(--primary-rgb),0.06); }
    .resource-icon { font-size: var(--fs-xl); flex-shrink: 0; }
    .resource-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); flex: 1; }
    .resource-type  { font-size: var(--fs-2xs); color: rgba(var(--overlay-rgb),0.38); font-family: var(--font-mono); }
    .resource-dl    { font-size: var(--fs-xs); color: var(--secondary); font-weight: 700; padding: 0.25rem 0.625rem; background: rgba(var(--primary-rgb),0.10); border: 1px solid rgba(var(--primary-rgb),0.20); border-radius:var(--radius); }

    /* ── Actions du cours ── */
    .course-actions {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.75rem; flex-wrap: wrap;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius); padding: 1.125rem 1.375rem;
    }
    .course-actions-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

    .btn-done {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1.375rem; background: rgba(var(--success-rgb),0.12);
      border: 2px solid rgba(var(--success-rgb),0.35); border-radius:var(--radius);
      color: var(--success); font-size: var(--fs-md); font-weight: 700;
      cursor: pointer; font-family: var(--font); transition: all var(--t);
    }
    .btn-done:hover { background: rgba(var(--success-rgb),0.20); border-color: rgba(var(--success-rgb),0.55); }
    .btn-done.checked { background: rgba(var(--success-rgb),0.20); border-color: var(--success); }

    .btn-next {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1.5rem; background: var(--primary);
      border-radius:var(--radius); color: var(--text);
      font-size: var(--fs-md); font-weight: 700;
      cursor: pointer; border: none; font-family: var(--font);
      transition: all var(--t); text-decoration: none;
    }
    .btn-next:hover { background: var(--secondary); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.35); }
    .btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

    .btn-prev {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1.25rem; background: transparent;
      border: 1.5px solid rgba(var(--overlay-rgb),0.15); border-radius:var(--radius);
      color: rgba(var(--overlay-rgb),0.60); font-size: var(--fs-md); font-weight: 600;
      cursor: pointer; font-family: var(--font); transition: all var(--t);
      text-decoration: none;
    }
    .btn-prev:hover { border-color:var(--text-dim); color: var(--text); }

    /* ── Sidebar cours ── */
    .course-sidebar { position: sticky; top: calc(var(--nav-h) + 1.5rem); height: fit-content; }
    .sidebar-box {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius); padding: 1.25rem; margin-bottom: 0.875rem;
    }
    .sidebar-box h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 0.875rem; color: var(--text); }

    /* Mini progression */
    .mini-progress-bar { height: 0.375rem; background: rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-full); overflow: hidden; margin-bottom: 0.375rem; }
    .mini-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:var(--radius-full); transition: width 0.8s var(--ease); }
    .mini-progress-label { font-size: var(--fs-xs); color: rgba(var(--overlay-rgb),0.40); }

    /* Liste des cours dans sidebar */
    .sidebar-cours-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 21.25rem; overflow-y: auto; scrollbar-width: thin; }
    .sidebar-cours-item {
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.5625rem 0.625rem; border-radius:var(--radius);
      font-size: var(--fs-base); color:var(--text-muted);
      cursor: pointer; transition: all var(--t); text-decoration: none;
    }
    .sidebar-cours-item:hover { background: rgba(var(--overlay-rgb),0.05); color: var(--text); }
    .sidebar-cours-item.active { background: rgba(var(--primary-rgb),0.18); color: var(--text); font-weight: 600; }
    .sci-status { width: 1.375rem; height: 1.375rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 700; }
    .sci-fait    { background: rgba(var(--success-rgb),0.15); color: var(--success); }
    .sci-encours { background: rgba(var(--primary-rgb),0.20); color: var(--secondary); }
    .sci-todo    { background: rgba(var(--overlay-rgb),0.06); color: rgba(var(--overlay-rgb),0.30); }

    /* ── Bouton PDF ── */
    .btn-pdf {
      display: inline-flex; align-items: center; gap: 0.4375rem;
      padding: 0.75rem 1.125rem; background: rgba(var(--overlay-rgb),0.07);
      border: 1.5px solid rgba(var(--overlay-rgb),0.20); border-radius:var(--radius);
      color: rgba(var(--overlay-rgb),0.75); font-size: var(--fs-md); font-weight: 700;
      cursor: pointer; font-family: var(--font); transition: all var(--t);
    }
    .btn-pdf:hover { background: rgba(var(--overlay-rgb),0.12); color: var(--text); border-color:var(--text-dim); }

    /* ── Impression / PDF ── */
    @media print {
      /* Masquer tout sauf le contenu du cours */
      nav, .course-sidebar, .breadcrumb, .course-video,
      .course-actions, .course-resources, .course-sidebar,
      .btn-done, .btn-pdf, .btn-next, .btn-prev,
      #a11y-widget { display: none !important; }

      body { background: #fff; color: #000; font-size:var(--fs-base); }

      .course-layout { display: block; padding: 0; }

      /* En-tête du cours */
      .course-header { margin-bottom: 16pt; }
      .course-parcours-tag { background: #eee; color: #333; border: 1px solid #ccc; padding: 3pt 8pt; border-radius:var(--radius-sm); font-size:var(--fs-2xs); }
      .course-title { font-size:var(--fs-3xl); color: #000; margin: 8pt 0 4pt; }
      .course-meta-row { font-size:var(--fs-xs); color: #555; }
      .course-status { display: none; }

      /* Contenu texte */
      .course-content { background: #fff; border: none; padding: 0; box-shadow: none; }
      .course-content h2 { font-size:var(--fs-lg); color: #000; border-bottom: 1pt solid #ccc; padding-bottom: 4pt; margin-top: 16pt; }
      .course-content h3 { font-size:var(--fs-base); color: #222; margin-top: 12pt; }
      .course-content p, .course-content li { color: #222; line-height: 1.6; }

      /* Blocs de code */
      .code-block { background: #f5f5f5; border: 1pt solid #ddd; color: #333; padding: 8pt 10pt; font-size:var(--fs-xs); border-radius:var(--radius-sm); }
      .code-block .cmd { color: var(--primary); }
      .code-block .comment { color: #888; }

      /* Info box */
      .info-box { background: var(--bg-tinted); border: 1pt solid #aac; padding: 8pt; border-radius:var(--radius-sm); }
      .info-box p { color: #333; }

      /* Pied de page impression */
      .course-content::after {
        content: "obsostop.fr";
        display: block; margin-top: 24pt; padding-top: 8pt;
        border-top: 0.5pt solid #ccc; font-size:var(--fs-2xs); color: #999;
        text-align: center;
      }
    }
    @keyframes confetti-fly {
      0%   { transform: translateY(0) scale(1); opacity: 1; }
      100% { transform: translateY(-7.5rem) scale(0.5) rotate(20deg); opacity: 0; }
    }
    @media (max-width: 900px) {
      .course-layout { grid-template-columns: 1fr; }
      .course-sidebar { position: static; }
    }
    @media (max-width: 640px) {
      .course-layout { padding: calc(var(--nav-h) + 1rem) 0.875rem 2.5rem; }
      .course-actions { flex-direction: column; align-items: stretch; }
      .course-actions-left { flex-direction: column; }
      .btn-done, .btn-next, .btn-prev { width: 100%; justify-content: center; }
    }
    .dash-layout {
      display: grid;
      grid-template-columns: 15rem 1fr;
      min-height: 100vh;
      /* Pas de padding-top : pas de nav fixe sur cette page */
    }
    .sidebar {
      background: var(--bg);
      border-right: 1px solid rgba(var(--overlay-rgb),0.07);
      position: sticky; top: 0;
      height: 100vh;
      overflow-y: auto;
      display: flex; flex-direction: column;
      scrollbar-width: thin;
    }
    .sidebar-logo {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.125rem 1.125rem 0.875rem;
      border-bottom: 1px solid rgba(var(--overlay-rgb),0.07);
    }
    .sidebar-logo-brand {
      display: flex; align-items: center; gap: 0.5rem;
      font-size:var(--fs-lg); font-weight: 700; color: var(--text);
      text-decoration: none; white-space: nowrap;
    }
    .sidebar-logo-mark {
      width: 1.75rem; height: 1.75rem; background: var(--primary); border-radius:var(--radius);
      display: grid; place-items: center; font-size: var(--fs-sm); color: var(--text); font-weight: 800; flex-shrink: 0;
    }
    .sidebar-logo-stop { color: var(--secondary); }
    .sidebar-logo-back {
      font-size: var(--fs-sm); color:var(--text-dim);
      text-decoration: none; padding: 0.3125rem 0.5625rem;
      border-radius:var(--radius); background: rgba(var(--overlay-rgb),0.06);
      transition: all var(--t); white-space: nowrap;
    }
    .sidebar-logo-back:hover { color: rgba(var(--overlay-rgb),0.70); background: rgba(var(--overlay-rgb),0.10); }
    .sidebar-profile { padding: 0 1rem 0.875rem; border-bottom: 1px solid rgba(var(--overlay-rgb),0.07); margin-bottom: 0.625rem; }
    .sidebar-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size: var(--fs-lg); color:var(--text); flex-shrink:0; }
    .sidebar-profile-top { display:flex; align-items:center; gap:0.625rem; margin-bottom:0.5rem; }
    .sidebar-name { font-size: var(--fs-md); font-weight:700; color:var(--text); margin-bottom:0.125rem; }
    .sidebar-role { display:inline-flex; align-items:center; gap:0.3125rem; font-size: var(--fs-2xs); font-weight:700; color:var(--secondary); background:rgba(var(--primary-rgb),0.15); border:1px solid rgba(var(--secondary-rgb),0.25); border-radius:var(--radius-full); padding:0.125rem 0.5625rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.05em; }
    .sidebar-progress { margin-top:0.625rem; padding:0.5625rem 0.6875rem; background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--secondary-rgb),0.15); border-radius:var(--radius); }
    .sidebar-progress-label { font-size: var(--fs-2xs); color:rgba(var(--overlay-rgb),0.45); margin-bottom:0.3125rem; display:flex; justify-content:space-between; }
    .sidebar-progress-bar-wrap { height:0.4375rem; background:rgba(var(--overlay-rgb),0.08); border-radius:var(--radius-full); overflow:hidden; }
    .sidebar-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:var(--radius-full); transition:width 1.2s var(--ease); }

    .sidebar-nav { padding:0 0.625rem; flex:1; }
    .sidebar-group-label { font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(var(--overlay-rgb),0.22); padding:0.75rem 0.625rem 0.3125rem; font-family:var(--font-mono); }

    /* Liens sidebar - taille lisible, espacement confortable */
    .sidebar-link { display:flex; align-items:center; gap:0.625rem; padding:0.6875rem 0.75rem; border-radius:var(--radius); font-size: var(--fs-md); font-weight:500; color:rgba(var(--overlay-rgb),0.60); transition:all var(--t); cursor:pointer; text-decoration:none; margin-bottom:0.1875rem; }
    .sidebar-link:hover { color:var(--text); background:rgba(var(--overlay-rgb),0.07); }
    .sidebar-link.active { color:var(--text); background:rgba(var(--primary-rgb),0.22); font-weight:700; border-left:3px solid var(--secondary); padding-left:0.5625rem; }
    .sidebar-icon { font-size: var(--fs-xl); width:1.375rem; text-align:center; flex-shrink:0; }
    .sb-count { margin-left:auto; background:rgba(var(--primary-rgb),0.30); color:var(--secondary); font-size: var(--fs-2xs); font-weight:700; padding:0.0625rem 0.4375rem; border-radius:var(--radius-full); font-family:var(--font-mono); }

    .sidebar-footer { padding:0.875rem 0.875rem 1.125rem; border-top:1px solid rgba(var(--overlay-rgb),0.07); margin-top:auto; display:flex; flex-direction:column; gap:0.5rem; }
    .sidebar-lms-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.6875rem 0.875rem; background:rgba(var(--primary-rgb),0.18); border:1px solid rgba(var(--primary-rgb),0.35); border-radius:var(--radius); color:var(--secondary); font-size: var(--fs-base); font-weight:700; text-decoration:none; transition:all var(--t); }
    .sidebar-lms-btn:hover { background:rgba(var(--primary-rgb),0.30); color:var(--text); }
    .sidebar-settings-link { display:flex; align-items:center; gap:0.5rem; padding:0.5625rem 0.75rem; border-radius:var(--radius); color:rgba(var(--overlay-rgb),0.40); font-size: var(--fs-base); text-decoration:none; transition:all var(--t); }
    .sidebar-settings-link:hover { color:rgba(var(--overlay-rgb),0.80); background:rgba(var(--overlay-rgb),0.05); }
    .sidebar-logout-btn { display:flex; align-items:center; gap:0.5rem; padding:0.5625rem 0.75rem; border-radius:var(--radius); color:rgba(var(--danger-rgb),0.65); font-size: var(--fs-base); background:none; border:none; cursor:pointer; font-family:var(--font); width:100%; text-align:left; transition:all var(--t); }
    .sidebar-logout-btn:hover { color:var(--danger); background:rgba(var(--danger-rgb),0.08); }

    /* ════ MAIN ════ */
    .dash-main { padding:2rem clamp(1.25rem,4%,3.25rem); background:var(--violet-dark); min-height:calc(100vh - var(--nav-h)); }

    /* Titre de page */
    .dash-greeting { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; letter-spacing:-0.03em; line-height:1.2; }
    .dash-greeting em { color:var(--secondary); font-style:normal; }
    .dash-sub { font-size: var(--fs-md); color:rgba(var(--overlay-rgb),0.45); margin-top:0.3125rem; }
    .dash-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.75rem; flex-wrap:wrap; gap:0.875rem; }

    /* ════ BOUTON PRINCIPAL - grand, centré, clair ════ */
    .btn-hero {
      display:flex; align-items:center; justify-content:center; gap:0.75rem;
      width:100%; padding:1.25rem 1.75rem;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      border-radius:var(--radius-lg); color:var(--text); font-size: var(--fs-xl); font-weight:800;
      border:none; cursor:pointer; font-family:var(--font);
      box-shadow:0 6px 28px rgba(var(--primary-rgb),0.40);
      transition:all 0.25s var(--ease); text-decoration:none;
      letter-spacing:-0.01em; line-height:1.3; text-align:center;
    }
    .sidebar-hamburger {
      display: none; position: fixed; top: 0.875rem; left: 0.875rem; z-index: 500;
      width: 2.5rem; height: 2.5rem; background: var(--dash-accent, var(--primary));
      border: none; border-radius:var(--radius);
      align-items: center; justify-content: center;
      cursor: pointer; flex-direction: column; gap: 0.25rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .sidebar-hamburger span { display: block; width: 1.125rem; height: 2px; background: #fff; border-radius:var(--radius-sm); transition: all 0.3s; }
    .sidebar-hamburger.open span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
    .sidebar-hamburger.open span:nth-child(2) { opacity: 0; }
    .sidebar-hamburger.open span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

    /* Overlay sombre derrière la sidebar mobile */
    .sidebar-overlay {
      display: none; position: fixed; inset: 0; z-index: 398;
      background: rgba(0,0,0,0.55);
    }
    .sidebar-overlay.open { display: block; }

    @media (max-width: 900px) {
      .dash-layout { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed; top: 0; left: -16.25rem; z-index: 399;
        width: 16.25rem; height: 100vh;
        transition: left 0.3s ease;
      }
      .sidebar.open { left: 0; }
      .sidebar-hamburger { display: flex; }
      .dash-main { padding-top: 4rem; } /* espace pour le bouton hamburger */
    }
    @media (max-width: 640px) {
      .dash-main { padding: 4rem 0.875rem 1.5rem; }
      .dash-stats { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
      .btn-hero { font-size:var(--fs-lg); padding: 1.0625rem 1.25rem; }
    }

    .sidebar-toggle-btn {
      position: fixed;
      top: 50%;
      left: 15rem;
      transform: translateY(-50%);
      width: 1.25rem; height: 3rem; border-radius: 0 0.375rem 0.375rem 0;
      background: var(--violet-card); border: 1.5px solid rgba(var(--overlay-rgb),0.12);
      border-left: none;
      color:var(--text-muted); font-size: var(--fs-sm);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 200; transition: all 0.3s;
      font-family: var(--font);
    }
    .sidebar-toggle-btn:hover { background: var(--violet-main); color: var(--text); }
    .sidebar.collapsed ~ * .sidebar-toggle-btn,
    .sidebar.collapsed + .sidebar-toggle-btn { left: 0; }
    .dash-layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
    .dash-layout.sidebar-collapsed .sidebar-toggle-btn { left: 0; }
    @media (max-width: 900px) { .sidebar-toggle-btn { display: none; } }

/* ── Hub bar (from body style block) ── */
.obso-hub-bar, .obso-hub-bar * { transition:none !important; }
.hub-back-btn:hover { opacity:0.9; }
@media (max-width:640px) { .obso-hub-bar { padding:0 1rem; height:3.5rem; } .hub-logo { } .hub-right { display:none; } .hub-back-btn { font-size: var(--fs-base); padding:0.5rem 0.875rem; } }
.dec-wrap{max-width:50rem;margin:0 auto;padding:0 clamp(1rem,5%,2.5rem) 5rem}
.dec-emoji {
  font-size: var(--fs-4xl);
  line-height:1;
  display:block;
  margin-bottom:0.625rem
}
.type-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.125rem,1fr));
  gap:0.5rem;
  margin-bottom:1rem
}
.type-card {
  padding:0.875rem 0.625rem;
  background:rgba(var(--overlay-rgb),0.03);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  text-align:center;
  cursor:pointer;
  transition:all 0.15s;
  user-select:none
}
.type-card:hover {
  border-color:rgba(var(--secondary-rgb),0.4)
}
.type-card.selected {
  background:rgba(var(--secondary-rgb),0.12);
  border-color:rgba(var(--secondary-rgb),0.7)
}
.type-card .e {
  font-size: var(--fs-3xl);
  display:block;
  margin-bottom:0.25rem
}
.type-card .l {
  font-size: var(--fs-base);
  font-weight:600;
  color:var(--text)
}
.dec-logo {
  height:10rem;
  width:auto
}
.dec-stepper {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin-bottom:1.5rem;
  padding:0 0.25rem;
}
.dec-stepper-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  flex-shrink:0;
}
.dec-stepper-circle {
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  background:rgba(var(--overlay-rgb),0.04);
  border:2px solid var(--border);
  transition:all 0.3s var(--ease);
}
.dec-stepper-check { display:none; font-size:1.1rem; font-weight:700; }
.dec-stepper-label {
  font-size:var(--fs-xs);
  color:var(--text-dim);
  font-weight:500;
  text-align:center;
  white-space:nowrap;
  transition:color 0.3s var(--ease);
}
.dec-stepper-line {
  flex:1;
  height:2px;
  background:var(--border);
  margin:1.375rem 0.35rem 0;
  transition:background 0.3s var(--ease);
  min-width:1.5rem;
}
.dec-stepper-step.active .dec-stepper-circle {
  background:rgba(var(--secondary-rgb),0.12);
  border-color:var(--secondary);
  box-shadow:0 0 0 4px rgba(var(--secondary-rgb),0.08);
}
.dec-stepper-step.active .dec-stepper-label {
  color:var(--secondary);
  font-weight:600;
}
.dec-stepper-step.done .dec-stepper-circle {
  background:rgba(var(--success-rgb),0.12);
  border-color:var(--success);
}
.dec-stepper-step.done .dec-stepper-icon { display:none; }
.dec-stepper-step.done .dec-stepper-check { display:block; color:var(--success); }
.dec-stepper-step.done .dec-stepper-label { color:var(--text-muted); }
.dec-stepper-line.done { background:var(--success); }
.dec-wiz-track {
  height:0.25rem;
  background:rgba(var(--overlay-rgb),0.06);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:1.5rem;
}
.dec-wiz-bar {
  height:100%;
  width:25%;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transition:width 0.3s ease
}
.dec-step-title {
  font-size: var(--fs-xl);
  margin:0 0 0.375rem
}
.dec-step-sub {
  color:var(--text-muted);
  font-size: var(--fs-md);
  margin:0 0 0.875rem
}
.dec-panne-block {
  margin-top:0.875rem
}
.dec-back {
  display:block;
  text-align:center;
  margin-top:1.125rem;
  color:var(--text-muted);
  text-decoration:none;
  font-size: var(--fs-base)
}
.dec-back:hover {
  color:var(--text)
}
.dec-footer-logo {
  margin-bottom:0.5rem
}
.form-select-panne {
  width:100%;
  padding:0.625rem 0.875rem;
  background:var(--input-bg,rgba(var(--overlay-rgb),0.05));
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size: var(--fs-md)
}
select.form-select-panne {
  background-color:var(--bg-card)!important;
  color:var(--text)!important
}
select.form-select-panne option {
  background-color:var(--bg-card)!important;
  color:var(--text)!important
}
.bonus-badge-hidden {
  display:none
}
.bonus-badge-visible {
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  margin-top:0.625rem;
  padding:0.625rem 1rem;
  background:rgba(var(--success-rgb),0.1);
  border:1px solid rgba(var(--success-rgb),0.3);
  border-radius:var(--radius);
  color:var(--success);
  font-size: var(--fs-md);
  font-weight:600;
  animation:bonusPulse 0.5s ease
}
@keyframes bonusPulse {
  0% {
    transform:scale(0.95);
    opacity:0
  }
  100% {
    transform:scale(1);
    opacity:1
  }
}
.photos-upload-zone {
  padding:1.25rem;
  text-align:center;
  border:2px dashed rgba(var(--overlay-rgb),0.15);
  border-radius:var(--radius);
  cursor:pointer;
  margin-bottom:0.5rem;
  transition:border-color 0.15s
}
.photos-upload-zone:hover {
  border-color:rgba(var(--secondary-rgb),0.4)
}
.dec-photos-preview {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-top:0.5rem
}
.dec-photo-thumb {
  position:relative;
  width:5rem;
  height:5rem;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(var(--overlay-rgb),0.1)
}
.dec-photo-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}
.dec-photo-rm {
  position:absolute;
  top:2px;
  right:2px;
  background:rgba(0,0,0,0.7);
  color:var(--danger);
  border:none;
  border-radius:50%;
  width:1.25rem;
  height:1.25rem;
  font-size: var(--fs-2xs);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center
}
/* ══════════════════════════════════════════════   FORCE RETURN - Scoped to body.page-force-return
   ══════════════════════════════════════════════ */

body.page-force-return {
  background: var(--bg); min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
body.page-force-return .logo-mark {
  width: 32px; height: 32px; background: var(--primary); border-radius:var(--radius);
  display: grid; place-items: center;
  font-size: var(--fs-md); color:var(--text); font-weight: 800;
}
body.page-force-return .logo-stop { color: var(--secondary); }

body.page-force-return .spinner-ring {
  width: 52px; height: 52px; margin: 0 auto 20px;
  border: 3px solid rgba(var(--secondary-rgb),0.18);
  border-top-color: var(--secondary); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

body.page-force-return .title { font-size: var(--fs-xl); font-weight: 700; color:var(--text); margin-bottom: 8px; }
body.page-force-return .sub   { font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.42); line-height: 1.6; margin-bottom: 24px; }

body.page-force-return .poll-counter {
  font-size: var(--fs-xs); color: rgba(var(--overlay-rgb),0.22);
  font-family: var(--font-mono); margin-bottom: 20px; height: 18px;
}

body.page-force-return .btn-go {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 22px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none; border-radius:var(--radius-lg); color:var(--text);
  font-size: var(--fs-lg); font-weight: 700; font-family: var(--font);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.35);
  transition: all 0.22s; margin-bottom: 12px;
}
body.page-force-return .btn-go:hover { background: linear-gradient(135deg,var(--primary),var(--secondary)); transform: translateY(-1px); }
body.page-force-return .btn-go.visible { display: flex; }

body.page-force-return .link-back {
  display: none; font-size:var(--fs-base); color: rgba(var(--overlay-rgb),0.30);
  text-decoration: none; transition: color var(--t);
}
body.page-force-return .link-back.visible { display: inline-block; }
body.page-force-return .link-back:hover { color: rgba(var(--overlay-rgb),0.60); }
/* ══════════════════════════════════════════════
   GESTION INSCRIPTION - Scoped to body.page-gestion
   ══════════════════════════════════════════════ */

body.page-gestion { font-family: var(--font); background: var(--bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
body.page-gestion .gi-card { background: rgba(var(--overlay-rgb),0.05); border: 1px solid rgba(var(--overlay-rgb),0.1); border-radius:var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 640px; width: 100%; padding: 40px; }
body.page-gestion .gi-logo { text-align: center; margin-bottom: 32px; }
body.page-gestion .gi-logo a { text-decoration: none; color:var(--text); font-size: var(--fs-2xl); font-weight: 700; }
body.page-gestion .gi-header { background: var(--bg-alt); border-radius:var(--radius-lg); padding: 24px; text-align: center; margin-bottom: 28px; }
body.page-gestion .gi-header h1 { color:var(--text); font-size: var(--fs-2xl); margin-bottom: 6px; }
body.page-gestion .gi-header p { color: var(--text-dim); font-size: var(--fs-md); }
body.page-gestion .recap { background: rgba(var(--overlay-rgb),0.06); border-left: 4px solid var(--secondary); border-radius:var(--radius); padding: 18px 20px; margin-bottom: 24px; }
body.page-gestion .recap-row { display: flex; gap: 10px; margin-bottom: 8px; font-size: var(--fs-lg); color:var(--text); }
body.page-gestion .recap-row:last-child { margin-bottom: 0; }
body.page-gestion .recap-label { color:var(--text-muted); min-width: 80px; }
body.page-gestion .motif-section { margin-bottom: 24px; }
body.page-gestion .motif-section label { display: block; font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.7); margin-bottom: 8px; font-weight: 600; }
body.page-gestion .motif-section textarea { width: 100%; border: 1px solid rgba(var(--overlay-rgb),0.15); border-radius:var(--radius); padding: 12px; font-size: var(--fs-md); font-family: var(--font); resize: vertical; min-height: 80px; outline: none; background: rgba(var(--overlay-rgb),0.06); color:var(--text); }
body.page-gestion .motif-section textarea:focus { border-color: var(--secondary); }
body.page-gestion .btn-cancel { width: 100%; background: var(--danger); color:var(--text); border: none; border-radius:var(--radius); padding: 14px; font-size:var(--fs-lg); font-weight: 700; cursor: pointer; transition: background 0.2s; }
body.page-gestion .btn-cancel:hover { background: var(--danger); }
body.page-gestion .btn-cancel:disabled { background: #aaa; cursor: not-allowed; }
body.page-gestion .btn-retour { display: block; text-align: center; margin-top: 16px; color:var(--text-muted); text-decoration: none; font-size: var(--fs-md); }
body.page-gestion .btn-retour:hover { text-decoration: underline; }
body.page-gestion .success { text-align: center; padding: 20px 0; }
body.page-gestion .success .icon { font-size: var(--fs-4xl); margin-bottom: 16px; }
body.page-gestion .success h2 { color:var(--text); margin-bottom: 10px; }
body.page-gestion .success p { color:var(--text-muted); font-size: var(--fs-lg); line-height: 1.6; }
body.page-gestion .error-box { background: rgba(var(--danger-rgb),0.15); border: 1px solid rgba(var(--danger-rgb),0.4); border-radius:var(--radius); padding: 16px; color: var(--danger); text-align: center; margin-bottom: 20px; font-size: var(--fs-md); }
body.page-gestion .gi-loading { text-align: center; color:var(--text-muted); padding: 40px 0; }
body.page-gestion .gi-footer { text-align: center; margin-top: 28px; font-size:var(--fs-base); color:var(--text-dim); }
body.page-gestion .gi-footer a { color:var(--text-muted); text-decoration: none; }

/* Theme clair - gestion inscription */
[data-theme="light"] body.page-gestion { background: var(--bg-tinted); }
[data-theme="light"] body.page-gestion .gi-card { background: var(--bg-card); border-color: rgba(var(--primary-rgb),0.15); box-shadow: var(--shadow-lg); }
[data-theme="light"] body.page-gestion .gi-logo a { color: var(--text); }
[data-theme="light"] body.page-gestion .recap { background: rgba(var(--primary-rgb),0.05); }
[data-theme="light"] body.page-gestion .recap-row { color: var(--text); }
[data-theme="light"] body.page-gestion .recap-label { color: rgba(var(--bg-rgb,26,26,46),0.5); }
[data-theme="light"] body.page-gestion .motif-section label { color: rgba(var(--bg-rgb,26,26,46),0.75); }
[data-theme="light"] body.page-gestion .motif-section textarea { background: var(--bg-tinted); border-color: rgba(var(--primary-rgb),0.22); color: var(--text); }
[data-theme="light"] body.page-gestion .motif-section textarea:focus { border-color: var(--primary); }
[data-theme="light"] body.page-gestion .btn-retour { color: rgba(var(--bg-rgb,26,26,46),0.5); }
[data-theme="light"] body.page-gestion .success h2 { color: var(--text); }
[data-theme="light"] body.page-gestion .success p { color: rgba(var(--bg-rgb,26,26,46),0.6); }
[data-theme="light"] body.page-gestion .gi-loading { color: rgba(var(--bg-rgb,26,26,46),0.5); }
[data-theme="light"] body.page-gestion .gi-footer { color: rgba(var(--bg-rgb,26,26,46),0.35); }
[data-theme="light"] body.page-gestion .gi-footer a { color: rgba(var(--bg-rgb,26,26,46),0.5); }

/* Hub bar V65 */
.obso-hub-bar { display:none; position:sticky; top:0; z-index:999; height:90px; padding:0 24px; background:var(--bg-card); border-bottom:1px solid rgba(var(--overlay-rgb),0.08); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.obso-hub-bar, .obso-hub-bar * { transition:none !important; }
.hub-left { flex:0 0 auto; display:flex; align-items:center; height:100%; } .hub-logo-link { display:inline-flex; align-items:center; text-decoration:none; } .hub-logo-link:hover { opacity:0.85; }
.hub-logo { }
.hub-center { flex:1; display:flex; justify-content:center; }
.hub-back-btn { font-size: var(--fs-md); display:inline-flex; align-items:center; gap:6px; }
.hub-back-btn:hover { opacity:0.9; }
.hub-right { flex:0 0 auto; font-size: var(--fs-base); color:var(--border-light); opacity:0.8; }
@media (max-width:640px) { .obso-hub-bar { padding:0 16px; height:56px; } .hub-logo { } .hub-right { display:none; } .hub-back-btn { font-size: var(--fs-base); padding:8px 14px; } }
/* ==========================================================
   obso-hcm.css
   Extracted from comment-ca-marche.html <style> block
   Source: comment-ca-marche.html lines 35-137
   ========================================================== */

  .hcm-wrap { max-width: 58.75rem; margin: 0 auto; padding: 0 clamp(1rem, 5%, 2.5rem) 5rem; }

  
  /* Choix des 4 parcours */
  .hcm-parcours-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 0.875rem; margin-bottom: 3.125rem;
  }
  .hcm-parcours-card {
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius:var(--radius);
    padding: 1.375rem 1.125rem; text-align: center; cursor: pointer;
    transition: border-color 0.15s, transform 0.15s; text-decoration: none; color: var(--text);
  }
  .hcm-parcours-card:hover { transform: translateY(-0.125rem); }
  .hcm-parcours-card[data-color="diag"]:hover,
  .hcm-parcours-card[data-color="diag"].active { border-color: var(--info); background: rgba(var(--info-rgb),0.06); }
  .hcm-parcours-card[data-color="rep"]:hover,
  .hcm-parcours-card[data-color="rep"].active { border-color: var(--success); background: rgba(var(--success-rgb),0.06); }
  .hcm-parcours-card[data-color="atelier"]:hover,
  .hcm-parcours-card[data-color="atelier"].active { border-color: var(--warning); background: rgba(var(--warning-rgb),0.06); }
  .hcm-parcours-card[data-color="don"]:hover,
  .hcm-parcours-card[data-color="don"].active { border-color: var(--pink); background: rgba(236,72,153,0.06); }
  .hcm-parcours-emoji { font-size: var(--fs-4xl); margin-bottom: 0.625rem; }
  .hcm-parcours-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.25rem; }
  .hcm-parcours-sub { font-size:var(--fs-base); color: var(--text-muted); line-height: 1.4; }

  /* Section d'étapes */
  .hcm-section { display: none; }
  .hcm-section.active { display: block; }
  .hcm-section-title { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 1.25rem; color: var(--text); display: flex; align-items: center; gap: 0.625rem; }

  .hcm-steps { display: flex; flex-direction: column; gap: 0.875rem; }
  .hcm-step {
    display: flex; gap: 1.25rem; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius:var(--radius); padding: 1.375rem 1.5rem; transition: border-color 0.15s;
  }
  .hcm-step:hover { border-color: rgba(var(--secondary-rgb),0.3); }
  .hcm-step-num {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 700; color:#fff;
    background: var(--primary);
  }
  .hcm-step-body h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 0.3125rem; color: var(--text); }
  .hcm-step-body p { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; margin: 0; }

  /* Couleurs par variante */
  .hcm-step-num.bonus { background: var(--success); }
  .hcm-step-num.diag { background: var(--info); }
  .hcm-step-num.rep { background: var(--success); }
  .hcm-step-num.atelier { background: var(--warning); }
  .hcm-step-num.don { background: var(--pink); }

  .hcm-cta-block {
    margin-top: 1.75rem; padding: 1.625rem 1.5rem; text-align: center;
    border: 1px solid rgba(var(--secondary-rgb),0.25); border-radius:var(--radius);
  }
  .hcm-cta-block p { color: var(--text-muted); margin: 0 0 1rem; font-size: var(--fs-lg); }
  .hcm-btn {
    display: inline-block; padding: 0.8125rem 1.75rem; color:var(--btn-text); border-radius:var(--radius);
    font-weight: 700; text-decoration: none; font-size: var(--fs-lg);
  }
  .hcm-btn:hover { filter: brightness(0.92); }
  .hcm-btn.diag { background: var(--info); }
  .hcm-btn.rep { background: var(--success); }
  .hcm-btn.atelier { background: var(--warning); }
  .hcm-btn.don { background: var(--pink); }

  .hcm-faq {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .hcm-faq-item {
    background: rgba(var(--overlay-rgb), 0.03);
    border: 1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .hcm-faq-item[open] {
    border-color: rgba(var(--secondary-rgb), 0.3);
  }
  .hcm-faq-question {
    padding: 1rem 1.5rem;
    font-size: var(--fs-lg);
    font-weight: 700;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }
  .hcm-faq-question::-webkit-details-marker { display: none; }
  .hcm-faq-question::marker { content: ""; }
  .hcm-faq-answer {
    padding: 0 1.5rem 1rem;
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    font-family: var(--font);
  }


  /* Ecosystem cards */
  .hcm-eco-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: 0.875rem; margin-bottom: 2.5rem; padding-top: 0.5rem;
  }
  .hcm-eco-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.375rem 1rem; border-radius:var(--radius);
    border: 1.5px solid var(--border); background: var(--bg-card);
    text-decoration: none; color: var(--text);
    transition: border-color 0.15s, transform 0.15s;
  }
  .hcm-eco-card:hover { transform: translateY(-0.125rem); }
  .hcm-eco-card[data-color="cyan"]:hover { border-color: var(--cyan); background: rgba(6,182,212,0.04); }
  .hcm-eco-card[data-color="purple"]:hover { border-color: var(--secondary); background: rgba(var(--secondary-rgb),0.04); }
  .hcm-eco-card[data-color="yellow"]:hover { border-color: var(--gold); background: rgba(250,204,21,0.04); }
  .hcm-eco-card[data-color="blue"]:hover { border-color: var(--info); background: rgba(var(--info-rgb),0.04); }
  .hcm-eco-emoji { font-size: var(--fs-4xl); margin-bottom: 0.625rem; }
  .hcm-eco-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 0.25rem; }
  .hcm-eco-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
  @media (max-width: 640px) {
    .hcm-parcours-grid { grid-template-columns: 1fr 1fr; }
    .hcm-step { flex-direction: column; gap: 0.75rem; }
  }
/* ==========================================================
   obso-inscription.css
   Extracted from inscription.html <style> block
   Source: inscription.html lines 26-354
   ========================================================== */

    /* ── Cartes sessions ── */
    .sessions-grid { display: flex; flex-direction: column; gap: 0.875rem; }

    .session-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      transition: all var(--t);
      display: grid; grid-template-columns: 4.5rem 1fr auto;
      align-items: stretch;
    }
    .session-card:hover { border-color: var(--border-h); box-shadow: var(--shadow-lg); transform: translateY(-0.125rem); }

    .session-date {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 1rem 0.5rem;
      background: rgba(var(--primary-rgb),0.18);
      border-right: 1px solid rgba(var(--secondary-rgb),0.25); gap: 2px;
    }
    .session-day { font-size: var(--fs-3xl); font-weight: 700; color: var(--secondary); line-height: 1; letter-spacing: -0.03em; }
    .session-month { font-size: var(--fs-2xs); color: rgba(var(--overlay-rgb),0.65); text-transform: uppercase; letter-spacing: 0.08em; }
    .session-year { font-size: var(--fs-2xs); color: rgba(var(--overlay-rgb),0.38); font-family: var(--font-mono); }

    .session-body { padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .session-header { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
    .session-num {
      font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
      color: var(--secondary); letter-spacing: 0.08em;
      background: rgba(var(--primary-rgb),0.18);
      border: 1px solid rgba(var(--secondary-rgb),0.35);
      border-radius:var(--radius); padding: 0.125rem 0.5rem;
    }
    .session-title { font-size:var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
    .session-meta { display: flex; gap: 0.875rem; flex-wrap: wrap; font-size:var(--fs-base); color: var(--text-muted); align-items: center; }
    .session-meta span { display: flex; align-items: center; gap: 0.3125rem; }
    .session-chips { display: flex; gap: 0.4375rem; flex-wrap: wrap; }
    .chip-mode { font-size: var(--fs-xs); font-weight: 600; padding: 0.1875rem 0.625rem; border-radius:var(--radius-full); border: 1px solid; }
    .chip-online   { background: rgba(var(--success-rgb),0.08);  color: var(--a1); border-color: rgba(var(--success-rgb),0.25); }
    .chip-presential{ background: rgba(var(--warning-rgb),0.08); color: var(--a3); border-color: rgba(var(--warning-rgb),0.25); }
    .chip-complet  { background: rgba(var(--danger-rgb),0.08); color: var(--a5); border-color: rgba(var(--danger-rgb),0.25); }
    .chip-places   { background: rgba(var(--overlay-rgb),0.04); color: var(--text-muted); border-color: var(--border); font-size: var(--fs-xs); font-weight: 600; padding: 0.1875rem 0.625rem; border-radius:var(--radius-full); }
    [data-theme="light"] .chip-places { background: rgba(var(--bg-rgb,26,26,46),0.06); color: var(--text) !important; border-color: rgba(var(--bg-rgb,26,26,46),0.2); }
    .session-desc { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; }

    .session-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.125rem 1.25rem; gap: 0.625rem; border-left: 1px solid var(--border); min-width: 9.375rem; }
    .btn-inscrire {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.4375rem; padding: 0.5rem 1.25rem;
      background: var(--violet-main, var(--primary)); color: var(--text);
      font-weight: 700; font-size: var(--fs-sm);
      border-radius:var(--radius); transition: all var(--t);
      white-space: nowrap; width: auto; border: none; cursor: pointer;
      font-family: var(--font);
      box-shadow: 0 2px 10px rgba(var(--primary-rgb),0.35);
    }
    .btn-inscrire:hover { background: var(--secondary); transform: translateY(-0.125rem); box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.45); }
    .btn-inscrire.complet { background: rgba(var(--overlay-rgb),0.08); color: var(--text-dim, rgba(var(--overlay-rgb),0.28)); cursor: not-allowed; box-shadow: none; }
    .btn-inscrire.complet:hover { transform: none; box-shadow: none; background: rgba(var(--overlay-rgb),0.08); }
    .session-places-left { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; line-height: 1.4; }
    .session-places-left strong { color: var(--violet-light, var(--secondary)); }

    /* ── Modal formulaire ── */
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 1100;
      background: rgba(0,0,0,0.75);
      display: flex; align-items: center; justify-content: center;
      padding: 1.25rem;
      opacity: 0; visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .modal-backdrop.open { opacity: 1; visibility: visible; }
    .modal-box {
      background: var(--bg-hover);
      border: 1.5px solid rgba(var(--secondary-rgb),0.40);
      border-radius: var(--radius-lg); padding: 2.25rem;
      width: 100%; max-width: 40rem;
      max-height: 90vh; overflow-y: auto;
      transform: translateY(1rem); transition: transform 0.25s ease;
      position: relative;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--secondary-rgb),0.15);
      scrollbar-width: none;
    }
    .modal-backdrop.open .modal-box { transform: translateY(0); }
    .modal-close {
      position: absolute; top: 1rem; right: 1rem;
      width: 1.875rem; height: 1.875rem; background: rgba(var(--overlay-rgb),0.06);
      border-radius: 50%; display: grid; place-items: center;
      font-size: var(--fs-base); color: var(--text-muted);
      transition: all var(--t); cursor: pointer; border: none;
    }
    .modal-close:hover { background: rgba(var(--overlay-rgb),0.12); color: var(--text); }
    .modal-atelier-tag {
      display: inline-flex; align-items: center; gap: 0.375rem;
      font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--secondary); margin-bottom: 0.5rem;
      background: rgba(var(--primary-rgb),0.15); border: 1px solid rgba(var(--secondary-rgb),0.30);
      padding: 0.1875rem 0.625rem; border-radius:var(--radius-full);
    }
    .modal-atelier-name {
      font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.025em;
      margin-bottom: 0.375rem; color: var(--text); line-height: 1.2;
    }
    .modal-atelier-date {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: var(--fs-base); color: rgba(var(--overlay-rgb),0.60);
      margin-bottom: 1.5rem; padding-bottom: 1.25rem;
      border-bottom: 1px solid rgba(var(--overlay-rgb),0.10);
    }
    .modal-atelier-date::before { content: ''; font-size: var(--fs-md); }

    .form-field { margin-bottom: 1rem; }
    .form-field label {
      display: block; font-size: var(--fs-base); font-weight: 600;
      color: rgba(var(--overlay-rgb),0.80); margin-bottom: 0.4375rem;
    }
    .form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea {
      width: 100%; padding: 0.6875rem 0.875rem;
      background: rgba(var(--overlay-rgb),0.06);
      border: 1.5px solid rgba(var(--overlay-rgb),0.22);
      border-radius:var(--radius); font-family: var(--font); font-size: var(--fs-md);
      color: var(--text); outline: none;
      transition: border-color var(--t), box-shadow var(--t), background var(--t);
      box-sizing: border-box;
    }
    .form-field input:not([type="checkbox"]):not([type="radio"]):hover, .form-field select:hover, .form-field textarea:hover {
      border-color:var(--text-dim);
      background: rgba(var(--overlay-rgb),0.08);
    }
    .form-field input:not([type="checkbox"]):not([type="radio"]):focus, .form-field select:focus, .form-field textarea:focus {
      border-color: var(--violet-light, var(--secondary));
      box-shadow: 0 0 0 3px rgba(var(--secondary-rgb),0.20);
      background: rgba(var(--primary-rgb),0.08);
    }
    .form-field input::placeholder { color: rgba(var(--overlay-rgb),0.30); }
    .form-field select option { background: var(--bg-hover); color: var(--text); }
    .form-field textarea { resize: vertical; min-height: 4.5rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    /* ── Bouton submit avec état loading ── */
    .btn-submit {
      width: 100%; padding: 0.8125rem;
      background: var(--violet-main, var(--primary)); color: var(--text);
      font-weight: 700; font-size: var(--fs-lg);
      border-radius:var(--radius); border: none; cursor: pointer;
      font-family: var(--font); transition: all var(--t);
      display: flex; align-items: center; justify-content: center; gap: 0.5625rem;
      margin-top: 0.25rem;
      box-shadow: 0 2px 12px rgba(var(--primary-rgb),0.40);
      letter-spacing: 0.01em;
    }
    .btn-submit:hover:not(:disabled) { background: var(--secondary); box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.50); transform: translateY(-1px); }
    .btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
    .spinner {
      width: 1rem; height: 1rem; border-radius: 50%;
      border: 2px solid rgba(var(--overlay-rgb),0.25); border-top-color: var(--text);
      animation: spin 0.7s linear infinite; display: none; flex-shrink: 0;
    }
    .btn-submit.loading .spinner { display: block; }
    .btn-submit.loading .btn-label { opacity: 0.7; }

    /* ── Message erreur inline ── */
    .form-error {
      background: rgba(var(--danger-rgb),0.1); border: 1px solid rgba(var(--danger-rgb),0.3);
      border-radius:var(--radius); padding: 0.625rem 0.875rem;
      font-size: var(--fs-base); color: var(--danger-light);
      margin-bottom: 0.875rem; display: none; align-items: center; gap: 0.5rem;
    }
    .form-error.show { display: flex; }

    /* ── Écran succès ── */
    .modal-success { display: none; text-align: center; padding: 0.5rem 0; }
    .success-icon {
      width: 4rem; height: 4rem; margin: 0 auto 1.125rem;
      background: rgba(var(--primary-rgb),0.15); border: 2px solid rgba(var(--secondary-rgb),0.40);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-3xl);
    }
    .success-title { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 0.375rem; letter-spacing: -0.025em; color: var(--text); }
    .success-subtitle { font-size: var(--fs-base); color:var(--text-muted); margin-bottom: 1rem; }
    .success-atelier {
      display: inline-flex; align-items: center; gap: 0.375rem;
      padding: 0.5rem 1.125rem;
      background: rgba(var(--primary-rgb),0.12); border: 1px solid rgba(var(--primary-rgb),0.30);
      border-radius:var(--radius-full); font-size: var(--fs-base); color: var(--secondary);
      font-weight: 600; margin-bottom: 1.125rem;
    }
    .success-text {
      font-size: var(--fs-md); color:var(--text-muted);
      line-height: 1.7; margin-bottom: 1.5rem;
      background: rgba(var(--overlay-rgb),0.04); border-radius:var(--radius); padding: 0.75rem 0.875rem;
      border: 1px solid rgba(var(--overlay-rgb),0.08); text-align: left;
    }
    .success-actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; }

    /* Note RGPD */
    .form-note { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 0.75rem; text-align: center; line-height: 1.5; }

    /* ── Thème clair : corrections inscription.html ── */
    [data-theme="light"] .modal-box {
      background: var(--bg-card);
      border-color: rgba(var(--primary-rgb),0.25);
      box-shadow: 0 24px 64px rgba(var(--overlay-rgb),0.12), 0 0 0 1px rgba(var(--primary-rgb),0.10);
    }
    [data-theme="light"] .modal-close {
      background: rgba(var(--bg-rgb,26,26,46),0.06);
      color: rgba(var(--bg-rgb,26,26,46),0.5);
    }
    [data-theme="light"] .modal-close:hover {
      background: rgba(var(--bg-rgb,26,26,46),0.10);
      color: var(--text);
    }
    [data-theme="light"] .modal-atelier-name { color: var(--text); }
    [data-theme="light"] .modal-atelier-date {
      color: rgba(var(--bg-rgb,26,26,46),0.55);
      border-bottom-color: rgba(var(--bg-rgb,26,26,46),0.10);
    }
    [data-theme="light"] .form-field label { color: rgba(var(--bg-rgb,26,26,46),0.80); }
    [data-theme="light"] .form-field input:not([type="checkbox"]):not([type="radio"]),
    [data-theme="light"] .form-field select,
    [data-theme="light"] .form-field textarea {
      background: var(--bg-tinted);
      border-color: rgba(var(--primary-rgb),0.22);
      color: var(--text);
    }
    [data-theme="light"] .form-field input:not([type="checkbox"]):not([type="radio"]):hover,
    [data-theme="light"] .form-field select:hover,
    [data-theme="light"] .form-field textarea:hover {
      border-color: rgba(var(--primary-rgb),0.40);
      background: var(--bg-tinted);
    }
    [data-theme="light"] .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
    [data-theme="light"] .form-field select:focus,
    [data-theme="light"] .form-field textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12);
      background: var(--bg-card);
    }
    [data-theme="light"] .form-field input::placeholder { color: rgba(var(--bg-rgb,26,26,46),0.35); }
    [data-theme="light"] .form-field select option { background: var(--bg-card); color: var(--text); }
    [data-theme="light"] .btn-inscrire {
      color: #fff !important;
    }
    [data-theme="light"] .btn-submit,
    [data-theme="light"] button.btn-submit,
    [data-theme="light"] button.btn-submit * {
      color: #fff !important;
    }
    [data-theme="light"] .btn-inscrire.complet {
      background: rgba(var(--bg-rgb,26,26,46),0.08);
      color: rgba(var(--bg-rgb,26,26,46),0.35) !important;
    }
    [data-theme="light"] .form-error {
      background: rgba(var(--danger-rgb),0.06);
      border-color: rgba(var(--danger-rgb),0.20);
      color: var(--danger);
    }
    [data-theme="light"] .success-title { color: var(--text); }
    [data-theme="light"] .success-subtitle { color: rgba(var(--bg-rgb,26,26,46),0.55); }
    [data-theme="light"] .success-text {
      color: rgba(var(--bg-rgb,26,26,46),0.65);
      background: rgba(var(--bg-rgb,26,26,46),0.04);
      border-color: rgba(var(--bg-rgb,26,26,46),0.08);
    }
    [data-theme="light"] .session-month { color: rgba(var(--bg-rgb,26,26,46),0.65); }
    [data-theme="light"] .session-year { color: rgba(var(--bg-rgb,26,26,46),0.40); }
    [data-theme="light"] .session-date {
      background: rgba(var(--primary-rgb),0.10);
      border-right-color: rgba(var(--primary-rgb),0.15);
    }

    /* Responsive mobile - only rules NOT in responsive-ateliers.css */
    @media (max-width: 640px) {
      .session-places-left { text-align: left; }
      .btn-inscrire { width: auto; padding: 0.625rem 1.125rem; font-size: var(--fs-base); }
      .form-row { grid-template-columns: 1fr; }
      .modal-box { padding: 1.25rem 1rem; }
      .session-meta { gap: 0.5rem; }
      .session-chips { gap: 0.3125rem; }
    }
/* ══════════════════════════════════════════════
   LEGAL PAGES - Shared styles for cgv, mentions-legales, confidentialite
   Extracted from cgv.html, mentions-legales.html, confidentialite.html
   ══════════════════════════════════════════════ */

.legal-wrap { max-width: 48.75rem; margin: 0 auto; padding: 1.5625rem clamp(1rem,5%,2.5rem) 5rem; }
.legal-wrap h1 { font-size: var(--fs-3xl); margin: 0 0 0.5rem; }
.legal-wrap h2 { font-size: var(--fs-xl); font-weight: 700; margin: 1.75rem 0 0.625rem; color: var(--text); }
.legal-wrap p, .legal-wrap li { font-size: var(--fs-lg); line-height: 1.7; color: var(--text-muted); }
.legal-wrap ul { padding-left: 1.375rem; }
.legal-wrap strong { color: var(--text); }
.legal-wrap .legal-intro {
  padding: 1rem 1.25rem; background:var(--bg-surface);
  border-left: 3px solid rgba(var(--success-rgb),0.35); border-radius:var(--radius);
  margin-bottom: 1.5rem;
}
.legal-wrap .legal-box {
  padding: 0.875rem 1.125rem; background: rgba(var(--overlay-rgb),0.03);
  border: 1px solid var(--border); border-radius:var(--radius); margin: 0.875rem 0;
}
.legal-wrap blockquote {
  padding: 0.875rem 1.125rem; background: rgba(var(--overlay-rgb),0.03);
  border: 1px solid var(--border); border-radius:var(--radius); margin: 0.875rem 0;
  font-style: normal;
}
.legal-wrap a { color: var(--secondary); }
/* ══════════════════════════════════════════════
   LOGIN / PASSWORD PAGES - Scoped to body.page-auth
   ══════════════════════════════════════════════ */

body.page-auth { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); padding:2rem 1rem; box-sizing:border-box; }
.reset-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.75rem 2.25rem; max-width:26.25rem; width:100%; margin:1.25rem; }
.reset-logo { text-align:center; margin-bottom:0.75rem; }
.reset-title { font-size: var(--fs-xl); font-weight:700; color:var(--text, #fff); margin-bottom:0.5rem; text-align:center; }
.reset-sub { font-size: var(--fs-md); color:var(--text-muted); text-align:center; margin-bottom:0.75rem; line-height:1.6; }
.form-group { margin-bottom:1rem; }
.form-label { font-size: var(--fs-base); color:var(--text-muted); display:block; margin-bottom:0.375rem; }
.form-input { width:100%; padding:0.75rem 0.875rem; background:rgba(var(--overlay-rgb),0.06); border:1px solid rgba(var(--overlay-rgb),0.12); border-radius:var(--radius); color:var(--text); font-size: var(--fs-lg); box-sizing:border-box; font-family:var(--font); }
.btn-reset { width:100%; padding:0.8125rem; background:linear-gradient(135deg,var(--primary),var(--secondary)); border:none; border-radius:var(--radius); color:var(--text); font-size:var(--fs-lg); font-weight:700; cursor:pointer; font-family:var(--font); margin-top:0.5rem; }
.reset-msg { text-align:center; padding:0.75rem; border-radius:var(--radius); font-size: var(--fs-md); margin-top:1rem; display:none; }
.reset-msg.success { background:rgba(var(--success-rgb),0.12); border:1px solid rgba(var(--success-rgb),0.3); color:var(--success); }
.reset-msg.error { background:rgba(var(--danger-rgb),0.12); border:1px solid rgba(var(--danger-rgb),0.3); color:var(--danger); }
.back-link { text-align:center; margin-top:1.25rem; }
.back-link a { font-size: var(--fs-base); color:var(--text-muted); text-decoration:none; }
body.page-auth .btn-retour { display:block; text-align:center; margin-top:16px; color:var(--text-muted); text-decoration:none; font-size:var(--fs-md); }
body.page-auth .btn-retour:hover { text-decoration:underline; }
[data-theme="light"] body.page-auth .btn-retour { color: rgba(var(--bg-rgb,26,26,46),0.5); }

/* ==========================================================
   LOGIN PAGE styles - Extracted from login.html <style> block
   Source: login.html lines 21-144
   ========================================================== */

    .login-box {
      width: 100%; max-width: 25rem;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius-xl); padding: 1.75rem 2.25rem;
      box-shadow: var(--shadow-lg);
      text-align: center;
    }

    .login-logo {
      display: inline-flex; align-items: center; gap: 0.625rem;
      font-size: var(--fs-xl); font-weight: 700; color:var(--text);
      text-decoration: none; margin-bottom: 0.75rem;
    }
    .login-logo-mark {
      width: 2.25rem; height: 2.25rem; background: var(--primary); border-radius:var(--radius);
      display: grid; place-items: center;
      font-size:var(--fs-lg); color:var(--text); font-weight: 800;
    }
    .login-logo-stop { color: var(--secondary); }

    .spinner-ring {
      width: 3rem; height: 3rem;
      border: 3px solid rgba(var(--secondary-rgb),0.20);
      border-top-color: var(--secondary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 1rem;
    }

    .login-checking {
      display: flex; flex-direction: column;
      align-items: center; gap: 1rem;
    }
    .checking-label { font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.45); }

    .login-form { display: none; text-align: left; }
    .login-icon  { font-size: var(--fs-4xl); margin-bottom: 0.75rem; display: block; text-align: center; }
    .login-title {
      font-size: var(--fs-xl); font-weight: 700; color:var(--text);
      margin-bottom: 0.5rem; letter-spacing: -0.02em; text-align: center;
    }
    .login-subtitle {
      font-size: var(--fs-md); color: rgba(var(--overlay-rgb),0.48);
      margin-bottom: 0.75rem; line-height: 1.6; text-align: center;
    }

    .btn-connect {
      display: flex; align-items: center; justify-content: center; gap: 0.625rem;
      width: 100%; padding: 1rem 1.5rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border: none; border-radius:var(--radius-lg); color:var(--text);
      font-size: var(--fs-lg); font-weight: 700; font-family: var(--font);
      cursor: pointer; transition: all 0.25s;
      box-shadow: 0 0.375rem 1.5rem rgba(var(--primary-rgb),0.40);
      text-decoration: none; margin-top: 0.5rem; margin-bottom: 0.75rem;
    }
    .btn-connect:hover {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      transform: translateY(-0.125rem);
    }
    .btn-connect:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    [data-theme="light"] .btn-connect,
    [data-theme="light"] #btn-connect { color: var(--btn-text) !important; background: linear-gradient(135deg,var(--primary),var(--secondary)) !important; }

    .btn-spinner {
      display: none; width: 1.25rem; height: 1.25rem;
      border: 2.5px solid rgba(var(--overlay-rgb),0.30);
      border-top-color:var(--text); border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    .btn-connect.going .btn-label  { display: none; }
    .btn-connect.going .btn-spinner { display: block; }

    .login-error {
      display: none; background: rgba(var(--danger-rgb),0.12);
      border: 1px solid rgba(var(--danger-rgb),0.30);
      border-radius:var(--radius); padding: 0.75rem 1rem;
      font-size: var(--fs-base); color: var(--danger);
      margin-bottom: 0.75rem; text-align: center;
    }

    .login-info {
      background: rgba(var(--primary-rgb),0.08);
      border: 1px solid rgba(var(--secondary-rgb),0.18);
      border-radius:var(--radius); padding: 0.875rem 1rem;
      font-size: var(--fs-base); color: rgba(var(--overlay-rgb),0.50);
      line-height: 1.6; margin-bottom: 1.5rem;
    }
    .login-info strong { color: rgba(var(--overlay-rgb),0.75); }
    [data-theme="light"] .login-info { color: rgba(var(--bg-rgb,26,26,46),0.7) !important; }
    [data-theme="light"] .login-info strong { color: var(--text) !important; }

    .login-back {
      font-size: var(--fs-base); color: rgba(var(--overlay-rgb),0.32);
      text-decoration: none; transition: color var(--t); display: block; text-align: center;
    }
    .login-back:hover { color: rgba(var(--overlay-rgb),0.65); }
/* ==========================================================
   obso-rdv-accept.css
   Extracted from rdv-accept.html <style> block
   Source: rdv-accept.html lines 21-159
   ========================================================== */

    body.page-rdv-accept {
      background: var(--bg); min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 24px;
    }
    [data-theme="light"] body.page-rdv-accept { background: var(--bg-tinted); }

    .rdv-box {
      width: 100%; max-width: 640px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius:var(--radius-xl); padding: 44px 40px;
      box-shadow: var(--shadow-lg);
      text-align: center;
    }
    .rdv-logo {
      display: inline-block;
      margin-bottom: 16px;
      text-align: center;
    }
    .rdv-logo img { height: 180px; width: auto; margin: -30px 0; }

    .rdv-title {
      font-size: var(--fs-2xl);
      font-weight: 700;
      color: var(--text);
      margin: 16px 0 8px 0;
    }
    .rdv-subtitle {
      font-size: var(--fs-lg);
      color: var(--text-muted);
      margin: 0 0 24px 0;
    }

    .rdv-details {
      background: rgba(var(--info-rgb),0.08);
      border-left: 4px solid var(--info);
      border-radius:var(--radius);
      padding: 18px 20px;
      margin: 20px 0;
      text-align: left;
    }
    .rdv-details p { margin: 6px 0; color: var(--text); line-height: 1.5; }
    .rdv-details strong { color: var(--accent-primary, var(--secondary)); }

    .rdv-btn {
      display: block;
      width: 100%;
      padding: 14px 20px;
      border-radius:var(--radius-lg);
      border: none;
      font-size:var(--fs-lg);
      font-weight: 600;
      cursor: pointer;
      margin: 12px 0;
      text-align: center;
      text-decoration: none;
      font-family: inherit;
      transition: filter 0.15s, transform 0.1s;
      box-sizing: border-box;
    }
    .rdv-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
    .rdv-btn-accept { background: linear-gradient(135deg, var(--success), var(--success)); color:var(--text); }
    .rdv-btn-reschedule { background: linear-gradient(135deg, var(--warning), var(--warning)); color:var(--text); }
    .rdv-btn-cancel {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .rdv-link {
      display: inline-block;
      color: var(--accent-primary, var(--secondary));
      text-decoration: none;
      padding: 10px 16px;
      font-size: var(--fs-md);
      margin-top: 10px;
    }
    .rdv-link:hover { text-decoration: underline; }

    .rdv-success {
      background: rgba(var(--success-rgb),0.1);
      border-left: 4px solid var(--success);
      padding: 24px;
      border-radius:var(--radius-lg);
    }
    .rdv-success h2 { color: var(--success); margin: 0 0 10px 0; font-size: var(--fs-2xl); }
    .rdv-success p { color: var(--text-muted); margin: 0; }

    .rdv-error {
      background: rgba(var(--danger-rgb),0.1);
      border-left: 4px solid var(--danger);
      padding: 20px;
      border-radius:var(--radius-lg);
      color: var(--danger);
    }

    .rdv-loader { padding: 40px 20px; color: var(--text-muted); }

    .rdv-form { text-align: left; }
    .rdv-form label {
      display: block;
      margin: 14px 0 6px 0;
      color: var(--text);
      font-size: var(--fs-md);
      font-weight: 600;
    }
    .rdv-form input[type="datetime-local"],
    .rdv-form textarea {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input, rgba(var(--overlay-rgb),0.05));
      border: 1px solid var(--border);
      border-radius:var(--radius);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-lg);
      box-sizing: border-box;
    }
    .rdv-form textarea { resize: vertical; min-height: 80px; }

    .rdv-form-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .rdv-form-actions .rdv-btn { margin: 0; }
    .rdv-form-actions .rdv-btn-cancel { flex: 0 0 auto; padding: 14px 24px; }
    .rdv-form-actions .rdv-btn-reschedule { flex: 1; min-width: 200px; }

    @media (max-width: 640px) {
      .rdv-box { padding: 32px 24px; }
      .rdv-logo img { height: 140px; margin: -20px 0; }
      .rdv-title { font-size: var(--fs-xl); }
      .rdv-form-actions .rdv-btn-cancel { flex: 1; }
    }
/* obso-ressources.css - deminified for development */

/* ============================================================
   WRAPPER
   ============================================================ */
.wiki-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3%, 32px) 60px;
}


.wiki-hero-search {
  max-width: 580px;
  margin: 1.5rem auto 0;
  position: relative;
}
.wiki-hero-search::before {
  content: '\1F50D';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: 0.5;
  pointer-events: none;
}

.wiki-search-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  box-sizing: border-box;
  background: rgba(var(--overlay-rgb), 0.06);
  border: 1.5px solid rgba(var(--overlay-rgb), 0.12);
  border-radius: 50px;
  color: var(--text);
  font-size: var(--fs-xl);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .wiki-search-input {
  background: rgba(255,255,255,0.85);
  border-color: rgba(var(--primary-rgb), 0.15);
}

.wiki-search-input:focus {
  border-color: rgba(var(--secondary-rgb), 0.5);
  box-shadow: 0 0 0 4px rgba(var(--secondary-rgb), 0.12);
  background: rgba(var(--overlay-rgb), 0.1);
}
[data-theme="light"] .wiki-search-input:focus {
  background: #ffffff;
}

.wiki-search-input::placeholder {
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

/* ============================================================
   LAYOUT: sidebar + content
   ============================================================ */
.wiki-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.wiki-sidebar {
  position: sticky;
  top: 140px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--secondary-rgb), 0.2) transparent;
}

.wiki-sidebar-toggle {
  display: none;
  /* shown on mobile */
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius:var(--radius-lg);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
}

.wiki-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiki-sidebar-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding: 0 4px;
}

.wiki-sidebar-title:first-child,
.wiki-nav-section .wiki-sidebar-title {
  margin-top: 0;
}

/* Section nav buttons */
.wiki-nav-section {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.wiki-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius:var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.wiki-nav-btn:hover {
  background: rgba(var(--secondary-rgb), 0.06);
  color: var(--text);
}

.wiki-nav-btn.active {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

.wiki-nav-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: rgba(var(--secondary-rgb), 0.12);
  color: var(--secondary);
  padding: 2px 7px;
  border-radius:var(--radius-lg);
  font-weight: 600;
}

/* Filter groups */
.wiki-filter-group {
  padding-bottom: 8px;
}

.wiki-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius:var(--radius);
  font-size: var(--fs-base);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}

.wiki-filter-check:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.wiki-filter-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.wiki-filter-check input[type="radio"]:checked {
  border-color: var(--secondary);
  background: var(--secondary);
  box-shadow: inset 0 0 0 2.5px var(--bg-card);
}

/* Category list (dynamic checkboxes) */
#category-list {
  display: flex;
  flex-direction: column;
}

.wiki-cat-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-radius:var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.wiki-cat-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.wiki-cat-btn.active {
  background: rgba(var(--secondary-rgb), 0.08);
  color: var(--secondary);
  font-weight: 600;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.wiki-main {
  min-width: 0;
  /* prevent grid blowout */
}

/* Breadcrumb */
.wiki-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 12px;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

.wiki-bc-link {
  color: var(--secondary);
  text-decoration: none;
  cursor: pointer;
}

.wiki-bc-link:hover {
  text-decoration: underline;
}

.wiki-bc-sep {
  color: var(--text-muted);
  opacity: 0.5;
  margin: 0 2px;
}

.wiki-bc-current {
  color: var(--text);
  font-weight: 600;
}

/* Results bar */
.wiki-results-bar {
  margin-bottom: 14px;
}

.wiki-results-count {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

/* ============================================================
   CARDS GRID (articles list)
   ============================================================ */
.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.wiki-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.wiki-card:hover {
  border-color: rgba(var(--secondary-rgb), 0.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.wiki-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wiki-card-emoji {
  font-size: var(--fs-3xl);
}

.wiki-card-badges {
  display: flex;
  gap: 6px;
}

.wiki-badge {
  padding: 2px 8px;
  border-radius:var(--radius-lg);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.wiki-badge-must {
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
}

.wiki-badge-oblig {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

.wiki-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wiki-card-resume {
  font-size:var(--fs-base);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
  flex-grow: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wiki-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.wiki-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wiki-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius:var(--radius-lg);
  font-size: var(--fs-2xs);
  font-weight: 600;
  background: rgba(var(--overlay-rgb), 0.06);
  color: var(--text-muted);
}

.wiki-tag-theme {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

.wiki-tag-green {
  background: rgba(74, 222, 128, 0.12);
  color: var(--success);
}

.wiki-tag-yellow {
  background: rgba(251, 191, 36, 0.12);
  color: var(--gold);
}

.wiki-tag-red {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

.wiki-card-os {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============================================================
   ARTICLE READER (inline, replaces grid)
   ============================================================ */
.wiki-reader {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding: 32px clamp(20px, 4%, 40px) 24px;
}

.wiki-reader-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.wiki-reader-head h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text);
  margin: 8px 0 10px;
  line-height: 1.3;
}

.wiki-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.wiki-reader-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wiki-btn-secondary {
  background: rgba(var(--secondary-rgb), 0.08);
  border: 1px solid rgba(var(--secondary-rgb), 0.2);
  color: var(--secondary);
  padding: 9px 18px;
  border-radius:var(--radius);
  font-size: var(--fs-base);
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}

.wiki-btn-secondary:hover {
  background: rgba(var(--secondary-rgb), 0.15);
}

/* Article content styling */
.wiki-reader-content {
  color: var(--text);
  line-height: 1.8;
  font-size: var(--fs-lg);
  overflow-wrap: break-word;
  word-break: break-word;
}

.wiki-reader-content h2 {
  font-size: var(--fs-xl);
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text);
}

.wiki-reader-content h3 {
  font-size: var(--fs-lg);
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--text);
}

.wiki-reader-content p {
  margin-bottom: 14px;
}

.wiki-reader-content ul {
  padding-left: 28px;
  margin-bottom: 14px;
}

.wiki-reader-content ol {
  padding-left: 28px;
  margin-bottom: 14px;
}

.wiki-reader-content li {
  margin-bottom: 6px;
}

.wiki-reader-content code {
  background: rgba(var(--secondary-rgb), 0.1);
  padding: 0.125rem 0.375rem;
  border-radius:var(--radius-sm);
  font-size: var(--fs-base);
  font-family: var(--font-mono);
}

.wiki-reader-content pre {
  background: rgba(var(--overlay-rgb), 0.06);
  border: 1px solid rgba(var(--overlay-rgb), 0.08);
  padding: 1rem;
  border-radius:var(--radius);
  overflow-x: auto;
  margin: 1rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.wiki-reader-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Theme clair - code blocks */
[data-theme="light"] .wiki-reader-content code {
  background: rgba(var(--overlay-rgb), 0.06);
  color: var(--code-highlight);
}

[data-theme="light"] .wiki-reader-content pre {
  background: #f6f8fa;
  border-color: var(--border);
}

[data-theme="light"] .wiki-reader-content pre code {
  color: #24292f;
}

.wiki-reader-content a {
  color: var(--secondary);
  overflow-wrap: break-word;
  word-break: break-all;
}

.wiki-reader-content a:hover {
  text-decoration: underline;
}

.wiki-reader-content blockquote {
  border-left: 3px solid var(--secondary);
  margin: 14px 0;
  padding: 10px 16px;
  background: rgba(var(--secondary-rgb), 0.05);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-style: italic;
}

.wiki-reader-content li.wiki-sub {
  margin-left: 20px;
}

.wiki-reader-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.wiki-reader-content img {
  max-width: 100%;
  border-radius:var(--radius-lg);
  margin: 16px 0;
}

/* Internal article link (clickable inline) */
.wiki-internal-link {
  color: var(--secondary);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--secondary-rgb), 0.4);
}

.wiki-internal-link:hover {
  border-bottom-style: solid;
}

/* Articles associes section */
.wiki-assoc-section {
  margin-top: 32px;
  padding: 20px;
  background: rgba(var(--secondary-rgb), 0.04);
  border: 1px solid rgba(var(--secondary-rgb), 0.15);
  border-radius:var(--radius-lg);
}

.wiki-assoc-section h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.wiki-assoc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wiki-assoc-list p {
  margin: 0;
}

.wiki-assoc-list a {
  display: block;
  padding: 10px 16px;
  background: rgba(var(--secondary-rgb), 0.08);
  border: 1px solid rgba(var(--secondary-rgb), 0.25);
  border-radius:var(--radius-lg);
  color: var(--secondary) !important;
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: pointer;
  transition: all 0.15s;
}

.wiki-assoc-list a:hover {
  background: rgba(var(--secondary-rgb), 0.15);
  border-color: rgba(var(--secondary-rgb), 0.4);
}

/* Markdown tables inside articles */
.wiki-md-table,
.wiki-reader-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: var(--fs-md);
}

.wiki-md-table thead th,
.wiki-reader-content table th {
  text-align: left;
  padding: 8px 10px;
  background: rgba(var(--secondary-rgb), 0.06);
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  font-size: var(--fs-base);
}

.wiki-md-table tbody td,
.wiki-reader-content table td {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  vertical-align: top;
}

.wiki-md-table thead th,
.wiki-reader-content table th {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-md-table tbody tr:hover,
.wiki-reader-content table tr:hover {
  background: rgba(var(--secondary-rgb), 0.03);
}

/* ============================================================
   LOGICIELS TABLE
   ============================================================ */
.wiki-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.wiki-table thead th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-xs);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card, var(--bg));
}

.wiki-table tbody td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
  color: var(--text);
  vertical-align: top;
}

.wiki-table tbody tr:hover {
  background: rgba(var(--secondary-rgb), 0.03);
}

.wiki-td-desc {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.wiki-td-sm {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.wiki-td-nowrap {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.wiki-td-icon {
  white-space: nowrap;
  text-align: center;
}

.obs-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: obs-hint-pulse 2s ease-in-out infinite;
  margin-bottom: 6px;
}

@keyframes obs-hint-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.wiki-cat-badge {
  display: inline-block;
  background: rgba(var(--secondary-rgb), 0.08);
  color: var(--secondary);
  padding: 2px 8px;
  border-radius:var(--radius-lg);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.wiki-ext-link {
  color: var(--secondary);
  text-decoration: none;
  font-size: var(--fs-xl);
}

.wiki-ext-link:hover {
  color: var(--secondary);
}

.wiki-tuto-link {
  color: var(--success);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-xl);
  transition: transform 0.15s;
  display: inline-block;
}

.wiki-tuto-link:hover {
  transform: scale(1.2);
}

/* OS badges (logiciels table) */
.wiki-os-badges {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.wiki-os-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius:var(--radius);
  font-size: var(--fs-2xs);
  background: rgba(var(--overlay-rgb), 0.06);
  color: var(--text-muted);
  white-space: nowrap;
}

.wiki-os-badge.multi {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

/* ============================================================
   EMPTY / LOADING STATES
   ============================================================ */
.wiki-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 50px 20px;
  font-size: var(--fs-md);
}

.wiki-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 50px 20px;
  font-size: var(--fs-md);
}

/* ============================================================
   RESPONSIVE - Mobile
   ============================================================ */
@media (max-width: 900px) {
  .wiki-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wiki-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 16px;
  }

  .wiki-sidebar-toggle {
    display: block;
  }

  .wiki-sidebar-inner {
    display: none;
    padding: 12px 0;
  }

  .wiki-sidebar-inner.open {
    display: flex;
  }

  .wiki-grid {
    grid-template-columns: 1fr;
  }

  .wiki-reader {
    padding: 20px 16px 16px;
  }

  .wiki-reader-foot {
    flex-direction: column;
    gap: 10px;
  }

  .wiki-reader-foot .wiki-btn-secondary {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .wiki-card {
    padding: 14px;
  }

  .wiki-table {
    font-size:var(--fs-base);
  }
}

/* ============================================================
   LOGICIELS FILTER SELECTS
   ============================================================ */

.wiki-filter-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
  max-width: 220px;
}

.wiki-filter-lbl {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* Responsive */
@media (max-width: 640px) {
  .wiki-filters-selects {
    flex-direction: column;
  }

  .wiki-filter-item {
    max-width: 100%;
  }
}

/* Card images */
.wiki-card-img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-radius:var(--radius) 8px 0 0;
  margin: -12px -14px 12px -14px;
  width: calc(100% + 28px);
}

.wiki-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* obso-return.css - Scoped to body.page-return */
body.page-return { background:var(--bg); color:var(--secondary); font-family:var(--font);
       display:flex; min-height:100vh; align-items:center; justify-content:center; margin:0; }
body.page-return .box { text-align:center; padding:30px; }
body.page-return .spinner {
  width:42px; height:42px; margin:0 auto 16px;
  border:3px solid rgba(var(--secondary-rgb),0.18);
  border-top-color:var(--secondary); border-radius:50%;
  animation:s .8s linear infinite;
}
@keyframes s { to { transform: rotate(360deg); } }
body.page-return a { color:var(--secondary); }
/* ══════════════════════════════════════════════
   TARIFS - Extracted from tarifs.html
   ══════════════════════════════════════════════ */

.tf-wrap { max-width: 56.25rem; margin: 0 auto; padding: 0 clamp(1rem, 5%, 2.5rem) 2rem; }

.tf-free {
  margin: 0 auto 2.125rem; max-width: 40rem;
  padding: 1.375rem 1.625rem; background: rgba(var(--success-rgb),0.08);
  border: 1.5px solid rgba(var(--success-rgb),0.35); border-radius:var(--radius);
  text-align: center;
}
.tf-free h2 { color: var(--success); font-size: var(--fs-xl); margin: 0 0 0.375rem; font-weight: 700; }
.tf-free p { color: var(--text-muted); font-size: var(--fs-md); margin: 0; }

.tf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.tf-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius:var(--radius); padding: 1.375rem 1.5rem;
}
.tf-card h3 {
  font-size:var(--fs-lg); font-weight: 700; margin: 0 0 0.5rem; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem;
}
.tf-price {
  font-size: var(--fs-3xl); font-weight: 700; color: var(--violet-light);
  margin: 0.25rem 0 0.625rem;
}
.tf-price small { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; margin-left: 0.25rem; }
.tf-card p { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.55; margin: 0; }

.tf-promise {
  margin-top: 2.25rem; padding: 1.75rem 1.875rem;
  background: linear-gradient(135deg, rgba(var(--secondary-rgb),0.10), rgba(var(--warning-rgb),0.08));
  border: 1px solid rgba(var(--secondary-rgb),0.3); border-radius:var(--radius-lg); text-align: center;
}
.tf-promise h2 { font-size: var(--fs-xl); margin: 0 0 0.625rem; color: var(--text); }
.tf-promise p { color: var(--text-muted); margin: 0 0 1.125rem; font-size: var(--fs-lg); line-height: 1.55; }
.tf-btn {
  display: inline-block; padding: 0.8125rem 1.75rem;
  background: var(--primary); color: var(--btn-text); border-radius:var(--radius);
  font-weight: 700; text-decoration: none;
}
.tf-btn:hover { filter: brightness(0.9); }
.wiki-select {
  padding:9px 14px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-size: var(--fs-base);
  font-family:inherit;
  cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath fill=rgba(var(--overlay-rgb),0.4) d=M6 8L1 3h10z/%3E%3C/svg%3E);
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px
}
.wiki-select:hover {
  border-color:var(--border-h)
}
.wiki-select:focus {
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(var(--secondary-rgb),0.15);
  outline:none
}
.wiki-select option {
  background:var(--bg);
  color:var(--text)
}
/* ══════════════════════════════════════════════════════════════
/* === CRITICAL: CSS Variable overrides for light theme === */
/* These MUST be first - all other rules depend on these values */
[data-theme="light"],
[data-theme="light"] {
  --bg: #f5f5f5 !important;
  --bg-card: #ffffff !important;
  --bg-hover: #e8e8f4 !important;
  --bg-alt: #f0f0f0 !important;
  --bg-tinted: #f8f7ff !important;
  --bg-deep: #fafafa !important;
  --bg-surface: #f0f0f5 !important;
  --text: #111111 !important;
  --text-muted: #555555 !important;
  --text-dim: #888888 !important;
  --border: rgba(0,0,0,0.10) !important;
  --border-dark: rgba(0,0,0,0.08) !important;
  --border-light: #e0e0e0 !important;
  --border-warm: #d6d3cd !important;
  --overlay-rgb: 0,0,0 !important;
  color-scheme: light !important;
}

   ObsoStop Light Theme - Comprehensive overrides
   Loaded LAST on all pages to override dark defaults
   ══════════════════════════════════════════════════════════════ */

/* === 1. GLOBAL === */
[data-theme="light"] { color-scheme: light; }
[data-theme="light"] body { background: var(--bg) !important; color: var(--text) !important; }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--text) !important; }
[data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] td,
[data-theme="light"] label { color: var(--text-muted); }
[data-theme="light"] a:not(.btn-hero) { color: var(--primary); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(var(--overlay-rgb),0.2); }

/* === 2. NAVIGATION === */
[data-theme="light"] nav { background: rgba(255,255,255,0.95) !important; }
[data-theme="light"] nav.scrolled { background: rgba(255,255,255,0.98) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .nav-links a { color: var(--text-muted) !important; }
[data-theme="light"] .nav-links a:hover { color: var(--text) !important; }
[data-theme="light"] .nav-links a.active { color: var(--primary) !important; }
[data-theme="light"] .nav-toggle span { background: var(--text-muted) !important; }

/* === 3. FOOTER === */
[data-theme="light"] footer { background: var(--bg-alt) !important; }
[data-theme="light"] .footer-col h4 { color: rgba(var(--overlay-rgb),0.4) !important; }
[data-theme="light"] .footer-col a { color: var(--text-muted) !important; }
[data-theme="light"] .footer-col a:hover { color: var(--primary) !important; }
[data-theme="light"] .footer-bottom { color: rgba(var(--overlay-rgb),0.3) !important; }
[data-theme="light"] .footer-brand p { color: var(--text-muted) !important; }

/* === 4. CARDS & CONTAINERS === */
[data-theme="light"] .card, [data-theme="light"] .public-card,
[data-theme="light"] .service-cta-card, [data-theme="light"] .hub-card,
[data-theme="light"] .parcours-card, [data-theme="light"] .cours-item,
[data-theme="light"] .seance-card, [data-theme="light"] .badge-card,
[data-theme="light"] .stat-card, [data-theme="light"] .forum-card,
[data-theme="light"] .atelier-thema, [data-theme="light"] .fiche-card,
[data-theme="light"] .how-step, [data-theme="light"] .pilier-card,
[data-theme="light"] .etape-card, [data-theme="light"] .niveau-card,
[data-theme="light"] .cfg-section, [data-theme="light"] .don-machine-card {
  background: var(--bg-card) !important;
  border-color: var(--border-dark) !important;
  color: var(--text) !important;
}
[data-theme="light"] .card h3, [data-theme="light"] .public-card h3,
[data-theme="light"] .service-cta-card h3, [data-theme="light"] .fiche-card h4,
[data-theme="light"] .how-step h3 { color: var(--text) !important; }
[data-theme="light"] .card p, [data-theme="light"] .public-card p,
[data-theme="light"] .service-cta-card p, [data-theme="light"] .fiche-card p,
[data-theme="light"] .how-step p { color: var(--text-muted) !important; }
[data-theme="light"] .legal-intro, [data-theme="light"] .legal-box,
[data-theme="light"] .sc-info-banner { background: rgba(var(--overlay-rgb),0.02) !important; border-color: var(--border-dark) !important; }

/* === 5. FORMS & INPUTS === */
[data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"], [data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"], [data-theme="light"] input[type="search"],
[data-theme="light"] input[type="date"], [data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] select, [data-theme="light"] textarea,
[data-theme="light"] .obso-input, [data-theme="light"] .obso-select,
[data-theme="light"] .obso-textarea, [data-theme="light"] .dec-form input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .dec-form select, [data-theme="light"] .dec-form textarea,
[data-theme="light"] .cfg-field input:not([type="checkbox"]):not([type="radio"]), [data-theme="light"] .cfg-field select,
[data-theme="light"] .cfg-field textarea, [data-theme="light"] .service-form input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .service-form select, [data-theme="light"] .service-form textarea,
[data-theme="light"] .tr-search, [data-theme="light"] .tr-select,
[data-theme="light"] .infra-input {
  background: transparent !important;
  border-color: rgba(var(--overlay-rgb),0.12) !important;
  color: var(--text) !important;
}
[data-theme="light"] option {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
[data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder,
[data-theme="light"] .obso-input::placeholder, [data-theme="light"] .obso-textarea::placeholder {
  color: rgba(var(--overlay-rgb),0.35) !important;
}
[data-theme="light"] input:focus, [data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: rgba(var(--primary-rgb),0.5) !important;
}
[data-theme="light"] .obso-label, [data-theme="light"] .dec-form label,
[data-theme="light"] .cfg-field label, [data-theme="light"] .service-form label {
  color: var(--text-muted) !important;
}

/* === 6. TABLES === */
[data-theme="light"] thead th, [data-theme="light"] .tr-table-full thead th,
[data-theme="light"] .ar-table thead th {
  background: rgba(var(--primary-rgb),0.08) !important;
  color: var(--primary) !important;
}
[data-theme="light"] tbody td { border-color: rgba(var(--overlay-rgb),0.06) !important; color: var(--text-muted) !important; }
[data-theme="light"] tbody tr:hover { background: rgba(var(--overlay-rgb),0.02) !important; }
[data-theme="light"] tbody tr:nth-child(even) td { background: rgba(var(--overlay-rgb),0.01) !important; }

/* === 7. BUTTONS (white text on colored bg) === */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-dash-primary, [data-theme="light"] .btn-nav-cta,
[data-theme="light"] .btn-save, [data-theme="light"] .admin-btn-add,
[data-theme="light"] .cfg-btn-save, [data-theme="light"] .btn-discord,
[data-theme="light"] .footer-newsletter-btn,
[data-theme="light"] .btn-terrain {
  color: var(--btn-text) !important;
}
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-cancel, [data-theme="light"] .btn-edit {
  color: var(--text-muted) !important;
  border-color: rgba(var(--overlay-rgb),0.15) !important;
  background: rgba(var(--overlay-rgb),0.03) !important;
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-cancel:hover, [data-theme="light"] .btn-edit:hover {
  background: rgba(var(--overlay-rgb),0.07) !important;
}
[data-theme="light"] .btn-outline {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: transparent !important;
}
[data-theme="light"] .btn-outline:hover {
  background: rgba(var(--primary-rgb), 0.06) !important;
}
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-add, [data-theme="light"] .btn-preview {
  background: rgba(var(--secondary-rgb), 0.08) !important;
}
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-delete, [data-theme="light"] .btn-rm {
  background: rgba(var(--danger-rgb), 0.08) !important;
}
[data-theme="light"] .btn-success {
  background: rgba(var(--success-rgb), 0.08) !important;
}
[data-theme="light"] .btn-warning {
  background: rgba(var(--warning-rgb), 0.08) !important;
}

/* === 8. BADGES & STATUS === */
[data-theme="light"] .statut-paid, [data-theme="light"] .statut-emitted,
[data-theme="light"] .statut-cancelled, [data-theme="light"] .statut-overdue { color: #fff !important; }
[data-theme="light"] .tr-badge-public { background: rgba(var(--success-rgb),0.1) !important; color: var(--success) !important; }
[data-theme="light"] .tr-badge-interne { background: rgba(var(--warning-rgb),0.1) !important; color: var(--warning) !important; }
[data-theme="light"] .tr-badge-equipe { background: rgba(var(--info-rgb),0.1) !important; color: var(--info) !important; }
[data-theme="light"] .tag, [data-theme="light"] .wiki-tag { border-color: var(--border) !important; }
[data-theme="light"] .section-label { background: rgba(var(--primary-rgb),0.06) !important; color: var(--primary) !important; border-color: rgba(var(--primary-rgb),0.15) !important; }

/* === 9. DASHBOARD === */
[data-theme="light"] .obs-topbar { background: rgba(255,255,255,0.95) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .sidebar { background: var(--bg-deep) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .sidebar-link { color: var(--text-muted) !important; }

[data-theme="light"] .sidebar-link.active { color: var(--primary) !important; background: rgba(var(--primary-rgb),0.1) !important; }
[data-theme="light"] .sidebar-name { color: var(--text) !important; }
[data-theme="light"] .sidebar-section-title { color: rgba(var(--overlay-rgb),0.4) !important; }
[data-theme="light"] .sidebar-avatar { color: #fff !important; }
html[data-theme="light"] .sidebar-role,
html[data-theme="light"] .sidebar-role .sidebar-role-icon,
html[data-theme="light"] .sidebar-role .sidebar-role-label,
html[data-theme="light"] .sidebar-role:hover,
html[data-theme="light"] .sidebar-role:hover .sidebar-role-icon,
html[data-theme="light"] .sidebar-role:hover .sidebar-role-label,
html[data-theme="light"] .sidebar-role:active,
html[data-theme="light"] .sidebar-role:active .sidebar-role-icon,
html[data-theme="light"] .sidebar-role:active .sidebar-role-label,
html[data-theme="light"] .sidebar-role:focus,
html[data-theme="light"] .sidebar-role:focus .sidebar-role-icon,
html[data-theme="light"] .sidebar-role:focus .sidebar-role-label { color: #fff !important; background: var(--role-color, var(--primary)) !important; border-color: var(--role-color, var(--primary)) !important; }
html[data-theme="light"] .sidebar-role::selection,
html[data-theme="light"] .sidebar-role .sidebar-role-icon::selection,
html[data-theme="light"] .sidebar-role .sidebar-role-label::selection { color: #fff !important; background: var(--role-color, var(--primary)) !important; }
[data-theme="light"] .dash-main { background: var(--bg) !important; }
[data-theme="light"] .dash-section { background: var(--bg-card) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .dash-section-title { color: var(--text) !important; }
[data-theme="light"] .detail-panel, [data-theme="light"] .drawer,
[data-theme="light"] .side-panel { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="light"] .detail-panel *, [data-theme="light"] .drawer * { color: var(--text-muted) !important; }
[data-theme="light"] .detail-close { background: rgba(var(--overlay-rgb),0.05) !important; color: var(--text-muted) !important; }
[data-theme="light"] .detail-overlay { background: rgba(var(--overlay-rgb),0.3) !important; }

/* === 10. ADMIN === */
[data-theme="light"] .admin-sidebar { background: var(--bg-deep) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .admin-nav-item { color: var(--text-muted) !important; }

[data-theme="light"] .admin-nav-item.active { background: rgba(var(--primary-rgb),0.1) !important; color: var(--primary) !important; }
[data-theme="light"] .admin-nav-group-title { color: rgba(var(--overlay-rgb),0.3) !important; }
[data-theme="light"] .admin-main { background: var(--bg) !important; }
[data-theme="light"] .admin-sidebar-logo { color: var(--text) !important; }
[data-theme="light"] .admin-sidebar-sub { color: rgba(var(--overlay-rgb),0.3) !important; }

/* === 11. MODALS === */
[data-theme="light"] .obso-modal-scroll { background: rgba(var(--overlay-rgb),0.3) !important; }
[data-theme="light"] .obso-modal-box, [data-theme="light"] .obso-modal-content,
[data-theme="light"] .admin-modal-card { background: var(--bg-card) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="light"] .obso-modal-close { background: rgba(var(--overlay-rgb),0.05) !important; color: var(--text-muted) !important; }
[data-theme="light"] .obso-modal-box h2, [data-theme="light"] .obso-modal-box h3 { color: var(--text) !important; }
[data-theme="light"] .obso-modal-box p, [data-theme="light"] .obso-modal-box label { color: var(--text-muted) !important; }

/* === 12. WIKI / RESSOURCES === */
[data-theme="light"] .wiki-card { background: var(--bg-card) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .wiki-card-title { color: var(--text) !important; }
[data-theme="light"] .wiki-card-resume { color: var(--text-muted) !important; }
[data-theme="light"] .tr-card { background: var(--bg-card) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .tr-card-title { color: var(--text) !important; }
[data-theme="light"] .tr-tabs .tr-tab { color: var(--text-muted) !important; }
[data-theme="light"] .tr-tabs .tr-tab.active { color: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="light"] .tr-reader-body { color: var(--text-muted) !important; }
[data-theme="light"] .tr-reader-body h2, [data-theme="light"] .tr-reader-body h3 { color: var(--text) !important; }

/* === 13. HERO / VITRINE === */
[data-theme="light"] .hero h1 { color: var(--text) !important; }
[data-theme="light"] .hero h1 em { color: var(--primary) !important; }
[data-theme="light"] .hero-lead { color: var(--text-muted) !important; }
[data-theme="light"] .hero-eyebrow { color: var(--primary) !important; border-color: rgba(var(--primary-rgb),0.2) !important; }
[data-theme="light"] .section-header h2 { color: var(--text) !important; }
[data-theme="light"] .section-header p { color: var(--text-muted) !important; }
[data-theme="light"] .community-text h2 { color: var(--text) !important; }
[data-theme="light"] .community-text p { color: var(--text-muted) !important; }
[data-theme="light"] .stat-item .stat-num { color: var(--primary) !important; }
[data-theme="light"] .stat-item .stat-label { color: var(--text-muted) !important; }
[data-theme="light"] .page-hero h1 { color: var(--text) !important; }
[data-theme="light"] .page-hero p { color: var(--text-muted) !important; }

/* === 14. FILTERS & SEARCH === */
[data-theme="light"] .wiki-select, [data-theme="light"] .wiki-filter-lbl { color: var(--text-muted) !important; }

/* === 15. MISC === */
[data-theme="light"] .strip-pill { color: var(--text-muted) !important; background: var(--bg-card) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .discord-block h3, [data-theme="light"] .discord-block p { color: #fff !important; }
[data-theme="light"] .empty-state p { color: var(--text-muted) !important; }
[data-theme="light"] .cfg-toast-success { color: var(--text) !important; }
[data-theme="light"] .cfg-toast-error { color: var(--text) !important; }
[data-theme="light"] code { background: rgba(var(--overlay-rgb),0.06) !important; color: #d63384 !important; border-radius:var(--radius-sm); padding: 0.125rem 0.375rem; }
[data-theme="light"] pre { background: #f6f8fa !important; color: #24292f !important; border: 1px solid var(--border) !important; }
[data-theme="light"] pre code { background: none !important; color: #24292f !important; padding: 0 !important; }
[data-theme="light"] blockquote { background: rgba(var(--overlay-rgb),0.02) !important; border-color: var(--border-dark) !important; }
[data-theme="light"] .obso-notif-message { color: var(--text-muted) !important; }
[data-theme="light"] .cfg-progress-bar { background: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .ob-wizard-overlay { background: rgba(245,245,250,0.97) !important; }

/* === 16. INLINE STYLE OVERRIDES === */
[data-theme="light"] [style*="color:var(--text)"] { color: var(--text) !important; }
[data-theme="light"] [style*="color:rgba(var(--overlay-rgb)"] { color: rgba(var(--overlay-rgb),0.5) !important; }
[data-theme="light"] [style*="background:rgba(var(--overlay-rgb)"] { background: rgba(var(--overlay-rgb),0.03) !important; }

/* === 17. ADMIN TABS & HOVER === */
[data-theme="light"] .apptab-panel label { color: var(--text-muted) !important; }
[data-theme="light"] .apptab-panel input[type="text"], [data-theme="light"] .apptab-panel select {
  background: rgba(var(--overlay-rgb),0.03) !important; border-color: rgba(var(--overlay-rgb),0.12) !important; color: var(--text) !important;
}

/* === 18. ADMIN CONTENT === */
[data-theme="light"] #admin-content { color: var(--text-muted) !important; }
[data-theme="light"] #admin-content h2, [data-theme="light"] #admin-content h3 { color: var(--text) !important; }
[data-theme="light"] #admin-content p { color: var(--text-muted) !important; }
[data-theme="light"] #admin-content strong { color: var(--text) !important; }
[data-theme="light"] .hl { color: var(--primary) !important; }
[data-theme="light"] .admin-stat-card { background: var(--bg-card) !important; }

/* Audience Dashboard */
.aud-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 1.75rem; }
.aud-stat-card { background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--overlay-rgb), 0.07); border-radius: var(--radius); padding: 1.1rem 0.75rem; text-align: center; border-left: 3px solid var(--secondary); }
.aud-stat-val { font-size: 1.6rem; font-weight: 800; color: var(--secondary); line-height: 1.1; }
.aud-stat-lbl { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.aud-section { background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--overlay-rgb), 0.07); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.aud-section-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); color: var(--text); }
.aud-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 8px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.aud-bar-col { flex: 1; min-width: 12px; max-width: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.aud-bar { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--secondary), rgba(var(--secondary-rgb), 0.4)); border-radius: 3px 3px 0 0; transition: height 0.3s; }
.aud-bar-col:hover .aud-bar { background: var(--secondary); }
.aud-bar-label { font-size: 0.6rem; color: var(--text-dim); margin-top: 4px; white-space: nowrap; }
.aud-table { display: flex; flex-direction: column; gap: 4px; }
.aud-table-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 6px; overflow: hidden; background: rgba(var(--secondary-rgb), 0.04); }
.aud-table-bar { display: none; }
.aud-table-page { position: relative; z-index: 1; font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.aud-table-num { position: relative; z-index: 1; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.aud-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--overlay-rgb), 0.07); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.aud-row > .aud-section-title, .aud-row > h3 { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.aud-col { background: rgba(var(--overlay-rgb), 0.03); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: var(--radius); padding: 1rem; }
.aud-pie-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.85rem; }
.aud-pie-val { font-weight: 600; color: var(--secondary); }
.aud-stat-trend { font-size: 0.7rem; margin-top: 4px; font-weight: 600; }
.aud-trend-up { color: var(--success, #22c55e); }
.aud-trend-down { color: var(--danger, #ef4444); }
.aud-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.aud-source-card { display: flex; align-items: center; gap: 12px; background: rgba(var(--overlay-rgb), 0.03); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: var(--radius); padding: 14px; }
.aud-source-icon { font-size: 1.5rem; }
.aud-source-info { flex: 1; min-width: 0; }
.aud-source-label { font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.aud-source-bar-wrap { height: 6px; background: rgba(var(--secondary-rgb), 0.1); border-radius: 3px; overflow: hidden; }
.aud-source-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.aud-source-num { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.aud-nr-bar { display: flex; height: 24px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.aud-nr-new { background: var(--secondary); transition: width 0.4s; }
.aud-nr-ret { background: rgba(var(--secondary-rgb), 0.25); transition: width 0.4s; }
.aud-nr-legend { font-size: 0.8rem; color: var(--text-muted); }
.aud-nr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.aud-nr-dot-new { background: var(--secondary); }
.aud-nr-dot-ret { background: rgba(var(--secondary-rgb), 0.25); }
.aud-source-detail { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.aud-detail-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.8rem; }
.aud-detail-name { min-width: 90px; font-weight: 500; white-space: nowrap; }
.aud-detail-bar-wrap { flex: 1; height: 6px; background: rgba(var(--secondary-rgb), 0.08); border-radius: 3px; overflow: hidden; }
.aud-detail-bar { height: 100%; background: var(--secondary); border-radius: 3px; transition: width 0.3s; }
.aud-detail-num { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; min-width: 55px; text-align: right; }
.aud-chart-hours .aud-bar-col { min-width: 16px; }
.aud-bar-hour { background: linear-gradient(180deg, var(--secondary), rgba(var(--secondary-rgb), 0.4)) !important; }
.aud-chart-hours .aud-bar-col:hover .aud-bar-hour { background: var(--secondary) !important; }
.aud-user-card { background: rgba(var(--overlay-rgb), 0.03); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: var(--radius); padding: 1rem; margin-bottom: 10px; }
.aud-user-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.aud-user-email { font-weight: 700; font-size: 0.92rem; }
.aud-user-last { font-size: 0.72rem; color: var(--text-muted); }
.aud-user-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; margin-bottom: 10px; color: var(--text-muted); }
.aud-user-stats span { background: rgba(var(--secondary-rgb), 0.08); padding: 2px 8px; border-radius: 10px; }
.aud-user-sub { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.8rem; }
.aud-user-sub strong { display: block; margin-bottom: 4px; font-size: 0.78rem; color: var(--text-muted); }
.admin-home-section-title { display: none; }
.stat-item-expandable { cursor: pointer; transition: background 0.15s; }
.stat-item-expandable:hover { background: rgba(var(--secondary-rgb), 0.04); }
.stat-item-expandable.stat-item-open { background: rgba(var(--secondary-rgb), 0.06); border-left: 3px solid var(--secondary); }
.stat-item-chevron { display: inline-block; font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; margin-left: 6px; }
.stat-item-open .stat-item-chevron { transform: rotate(180deg); }
.stat-item-details { display: none; padding-top: 8px; margin-top: 6px; border-top: 1px solid rgba(var(--overlay-rgb), 0.06); }
.stat-item-open .stat-item-details { display: block; }
.stat-item-actions { margin-top: 8px; padding-top: 6px; display: flex; gap: 8px; }
.aud-realtime-box { background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--secondary-rgb), 0.3); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.aud-realtime-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aud-realtime-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success, #22c55e); animation: aud-pulse 2s infinite; }
@keyframes aud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.aud-realtime-count { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.aud-realtime-label { font-size: 0.85rem; color: var(--text-muted); }
.aud-realtime-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aud-realtime-col { font-size: 0.82rem; }
.aud-realtime-col strong { display: block; margin-bottom: 6px; font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 600px) { .aud-realtime-body { grid-template-columns: 1fr; } }
@media print { .aud-realtime-box, #aud-toolbar, .admin-sidebar, .admin-hamburger, .admin-overlay, .admin-user-bar, #a11y-widget { display: none !important; } .admin-main { margin-left: 0 !important; padding: 20px !important; } .aud-section { break-inside: avoid; } body { background: #fff !important; color: #000 !important; } }
[data-theme="light"] .admin-stat-value { color: var(--text) !important; }
[data-theme="light"] .admin-stat-value.zero { color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .admin-stat-label { color: var(--text-muted) !important; }
[data-theme="light"] .admin-home-section { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .admin-home-section-header h3 { color: var(--text); }
[data-theme="light"] .admin-home-section-icon { background: rgba(var(--secondary-rgb),0.08); }
[data-theme="light"] .admin-stat-card { background: var(--bg); border-color: var(--border); }
[data-theme="light"] .aud-section { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .aud-stat-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .aud-row { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .aud-realtime-box { background: var(--bg-card); }
[data-theme="light"] .aud-col { background: rgba(0,0,0,0.02); }

/* === 19. DASHBOARD EXTRA === */
[data-theme="light"] .dash-greeting, [data-theme="light"] .dash-sub { color: var(--text) !important; }
[data-theme="light"] .stat-num { color: var(--primary) !important; }
[data-theme="light"] .stat-label { color: var(--text-muted) !important; }
[data-theme="light"] .parcours-title, [data-theme="light"] .cours-title { color: var(--text) !important; }
[data-theme="light"] .parcours-desc, [data-theme="light"] .seance-desc { color: var(--text-muted) !important; }
[data-theme="light"] .login-title { color: var(--text) !important; }
[data-theme="light"] .login-subtitle { color: var(--text-muted) !important; }

/* === 20. MODULE CARDS ADMIN === */
[data-theme="light"] .mod-card { background: var(--bg-card) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .mod-card span { color: var(--text-muted) !important; }
[data-theme="light"] .role-card { background: var(--bg-card) !important; border-color: rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .role-card input[type="text"] { background: rgba(var(--overlay-rgb),0.03) !important; color: var(--text) !important; }
[data-theme="light"] .role-card label { color: var(--text-muted) !important; }
[data-theme="light"] .txt-row code { color: rgba(var(--overlay-rgb),0.4) !important; }
[data-theme="light"] .txt-row input[type="text"] { background: rgba(var(--overlay-rgb),0.03) !important; color: var(--text) !important; }

/* === 21. CATCH-ALL white text (exclude avatars/badges on colored bg) === */
[data-theme="light"] div[style*="color:#fff"]:not([id*="avatar"]):not([class*="avatar"]):not([class*="badge"]),
[data-theme="light"] span[style*="color:#fff"]:not([class*="avatar"]):not([class*="badge"]),
[data-theme="light"] p[style*="color:#fff"], [data-theme="light"] label[style*="color:#fff"] { color: var(--text) !important; }
[data-theme="light"] div[style*="color:white"]:not([id*="avatar"]):not([class*="avatar"]),
[data-theme="light"] span[style*="color:white"]:not([class*="avatar"]) { color: var(--text) !important; }

/* === FORCE white text on ALL colored buttons in light theme === */
[data-theme="light"] button[style*="background:var(--primary"],
[data-theme="light"] button[style*="background: var(--primary"],
[data-theme="light"] button[style*="background:var(--secondary"],
[data-theme="light"] button[style*="background:var(--success"],
[data-theme="light"] button[style*="background:var(--danger"],
[data-theme="light"] button[style*="background:var(--warning"],
[data-theme="light"] button[style*="background:linear-gradient"],
[data-theme="light"] a[style*="background:var(--primary"],
[data-theme="light"] a[style*="background:var(--secondary"],
[data-theme="light"] a[style*="background:linear-gradient"],
[data-theme="light"] [style*="background:var(--primary)"][style*="color:var(--text)"],
[data-theme="light"] [style*="background:var(--secondary)"][style*="color:var(--text)"],
[data-theme="light"] [style*="background:var(--violet-main)"][style*="color:var(--text)"] {
  color: var(--btn-text) !important;
}

/* Admin resource buttons */
[data-theme="light"] .ar-params-save,
[data-theme="light"] .pp-save-btn { color: var(--btn-text) !important; }

/* === Dashboard flash fix === */
[data-theme="light"] .obs-topbar { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(var(--overlay-rgb),0.06) !important; }
[data-theme="light"] .obs-topbar .topbar-logo { filter: none !important; }
[data-theme="light"] .obs-topbar .espace-btn { color: var(--btn-text) !important; }
[data-theme="light"] .dash-layout { background: var(--bg) !important; }
[data-theme="light"] body.dashboard-page { background: var(--bg) !important; }

/* === GLOBAL: Tous les boutons a fond colore = texte blanc === */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-nav-cta,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-terrain,
[data-theme="light"] .btn-discord,
[data-theme="light"] .btn-inscrire,
[data-theme="light"] .btn-confirm,
[data-theme="light"] .btn-accept,
[data-theme="light"] .btn-go,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-done,
[data-theme="light"] .btn-next,
[data-theme="light"] .btn-save-profile,
[data-theme="light"] .btn-save-prefs,
[data-theme="light"] .submit-btn,
[data-theme="light"] .cfg-btn-save,
[data-theme="light"] .admin-btn-add,
[data-theme="light"] .footer-newsletter-btn,
[data-theme="light"] .boutique-btn-acheter,
[data-theme="light"] .cart-btn-pay,
[data-theme="light"] .bonus-cta-btn,
[data-theme="light"] .hcm-btn,
[data-theme="light"] .tf-btn,
[data-theme="light"] .btn-hero-primary,
[data-theme="light"] .obso-modal-btn-primary,
[data-theme="light"] .obso-modal-btn-danger,
[data-theme="light"] .obs-topbar-cta,
[data-theme="light"] .blocked-btn-inscrire,
[data-theme="light"] .wiz-launch-btn,
[data-theme="light"] .anim-fs-save,
[data-theme="light"] .nav-user-btn,
[data-theme="light"] .page-disabled-cta {
  color: var(--btn-text) !important;
}


/* Mobile: all fixed-column grids → single column */
@media (max-width: 640px) {
  .pf-spec-grid,
  .boutique-photo-grid,
  .apercu-grid-4col,
  .rdv-grid-1-2, .tech-grid-1-2,
  .stripe-grid, .ds-grid-fields,
  .activity-stat-grid, .mod-pdf-grid,
  .mod-grid-2col, .mod-grid-3col,
  .mod-grid-2col-200, .mod-grid-2col-180, .mod-grid-2col-160,
  .mod-grid-3col-200, .mod-grid-3col-180, .mod-grid-3col-160, .mod-grid-3col-140 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
 * obso-runtime-overrides.css
 * Extracted from injectFooterCss() in js/obso-runtime.js
 * Contains functional overrides that are NOT covered by
 * the standard CSS files (base-*.css, obso-*.css, etc.)
 * ========================================================== */

/* --- Footer login toggle (JS-driven visibility) --- */
footer .footer-login { visibility: hidden; }
footer .footer-login.obso-visible { visibility: visible; }
footer .footer-login.obso-hidden { display: none !important; }

/* --- Accessibility bar positioning --- */
.accessibility-bar {
  position: fixed !important;
  bottom: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  z-index: 1000 !important;
}

/* --- Feedback FAB positioning --- */
#obso-feedback-fab {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  z-index: 1000;
}

.dash-quickaccess-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
.dash-quickaccess-grid > .dash-td {
  display: flex; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 4px !important; padding: 14px 10px !important; box-sizing: border-box !important;
  border-radius: var(--radius-lg) !important; text-align: center !important; cursor: pointer !important;
  text-decoration: none !important; font-size: var(--fs-sm) !important;
}
.dash-quickaccess-grid > .dash-td strong { font-size: var(--fs-sm) !important; font-weight: 600 !important; }
.dash-quickaccess-grid .dash-card-title { font-size: 1.4rem !important; line-height: 1 !important; }
.dash-quickaccess-grid .dash-card-meta { font-size: var(--fs-xs) !important; color: rgba(255,255,255,0.7) !important; font-weight: 400 !important; }
@media (max-width: 640px) {
  .dash-quickaccess-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dash-quickaccess-grid > .dash-td { padding: 12px 8px !important; }
  .accessibility-bar { bottom: 4.375rem !important; }
  #obso-feedback-fab { bottom: 1rem !important; }
}

/* --- Hide Frappe default chrome --- */
#id-bar { display: none !important; }
body > .navbar.page-head:not(nav),
body > .frappe-navbar,
body > .page-head:not(nav) { display: none !important; }
nav.navbar, body > nav { display: flex !important; }

/* --- Page load transition (FOUC prevention) --- */
body { opacity: 0; transition: opacity 0.12s ease; }
body.page-loaded { opacity: 1; }
html:not(.js) body { opacity: 1 !important; }
.js body { transition: opacity 0.12s ease; }

/* ═══════════════════════════════════════
   PAGE BUILDER: Block layout & alternance
   ═══════════════════════════════════════ */
.pb-block { padding: 3rem 1.5rem; }
.pb-block.pb-pad-compact { padding: 1.5rem; }
.pb-block.pb-pad-large { padding: 5rem 1.5rem; }
.pb-block.pb-full-width { max-width: none; padding-left: 0; padding-right: 0; }
.pb-block.pb-bg-card { background: var(--bg-card); }
.pb-block.pb-bg-accent { background: rgba(var(--secondary-rgb), 0.04); }
.pb-block.pb-bg-inverse { background: var(--bg); color: var(--text); }
.pb-block.pb-bg-a { background: var(--bg); }
.pb-block.pb-bg-b { background: #252545; }
[data-theme="light"] .pb-block.pb-bg-a { background: #ffffff; }
[data-theme="light"] .pb-block.pb-bg-b { background: #e4e7f2; }
.pb-block.atelier-cta-banner.pb-bg-a { background: var(--bg); border: none; }
.pb-block.atelier-cta-banner.pb-bg-b { background: #252545; border: none; }
[data-theme="light"] .pb-block.atelier-cta-banner.pb-bg-a { background: #ffffff; }
[data-theme="light"] .pb-block.atelier-cta-banner.pb-bg-b { background: #e4e7f2; }
.pb-app-embed .service-form-section { max-width: none; }

/* Team Grid */
/* Team Editor - Photo dropzone */
.te-photo-dropzone {
  border: 2px dashed rgba(var(--overlay-rgb), 0.15);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.te-photo-dropzone:hover { border-color: rgba(var(--secondary-rgb), 0.4); }
.te-drop-active { border-color: var(--secondary); background: rgba(var(--secondary-rgb), 0.06); }

/* Team Grid */
.team-section { text-align: center; }
.team-section .section-header { margin-bottom: 0; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 1000px; margin: 1.5rem auto 0; }
.team-card {
  flex: 0 1 calc(50% - 0.75rem); min-width: 300px;
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  padding: 1.75rem 2rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--secondary-rgb), 0.18), 0 2px 8px rgba(0,0,0,0.06);
  border-color: rgba(var(--secondary-rgb), 0.25);
}
.team-card-photo {
  width: 90px; height: 90px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 3px solid transparent;
  background-origin: border-box; background-clip: content-box, border-box;
  background-image: linear-gradient(var(--card-bg, var(--bg)), var(--card-bg, var(--bg))), linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.2);
  transition: box-shadow 0.3s, transform 0.3s;
}
.team-card:hover .team-card-photo { box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.3); transform: scale(1.05); }
.team-card-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-size: 1.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.2);
  transition: box-shadow 0.3s, transform 0.3s;
}
.team-card:hover .team-card-avatar { box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.3); transform: scale(1.05); }
.team-card-info { flex: 1; min-width: 0; }
.team-card-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.team-card-title {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--secondary); font-weight: 600;
  display: inline-block; margin-bottom: 0.5rem;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: rgba(var(--secondary-rgb), 0.1);
}
.team-card-bio { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.team-loading { text-align: center; padding: 2rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .team-card { flex-direction: column; text-align: center; padding: 1.5rem; }
  .team-card-title { margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════
   PAGE BUILDER: Banner Alert (.pb-banner-*)
   ═══════════════════════════════════════ */
.pb-banner-wrap { width: 100%; }
.pb-banner-bar {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.875rem 1.25rem; border-radius: var(--radius);
  font-size: var(--fs-md); line-height: 1.5;
}
.pb-banner-info { background: rgba(var(--info-rgb), 0.12); color: var(--info); border: 1px solid rgba(var(--info-rgb), 0.25); }
.pb-banner-warning { background: rgba(var(--warning-rgb), 0.12); color: var(--warning); border: 1px solid rgba(var(--warning-rgb), 0.25); }
.pb-banner-success { background: rgba(var(--success-rgb), 0.12); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.25); }
.pb-banner-promo { background: rgba(var(--violet-rgb), 0.12); color: var(--violet); border: 1px solid rgba(var(--violet-rgb), 0.25); }
.pb-banner-icon { font-size: 1.25rem; flex-shrink: 0; }
.pb-banner-msg { flex: 1; }
.pb-banner-link {
  font-weight: 600; text-decoration: underline; white-space: nowrap;
  color: inherit; transition: opacity var(--t);
}
.pb-banner-link:hover { opacity: 0.8; }
.pb-banner-close {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: inherit; opacity: 0.6; padding: 0 0.25rem;
  transition: opacity var(--t);
}
.pb-banner-close:hover { opacity: 1; }

@media (max-width: 640px) {
  .pb-banner-bar { flex-wrap: wrap; padding: 0.75rem 1rem; font-size: var(--fs-sm); }
  .pb-banner-link { width: 100%; margin-top: 0.5rem; }
}

/* ═══════════════════════════════════════
   PAGE BUILDER: Callout Box (.pb-callout-*)
   ═══════════════════════════════════════ */
.pb-callout { max-width: 720px; margin: 0 auto; }
.pb-callout-inner {
  border-radius: 12px;
  padding: 1.5rem 2rem;
  border: 1px solid;
  border-left: 4px solid;
  backdrop-filter: blur(4px);
}
.pb-callout-warning .pb-callout-inner { background: rgba(234,88,12,0.08); border-color: rgba(234,88,12,0.25); border-left-color: var(--warning); }
.pb-callout-danger .pb-callout-inner { background: rgba(var(--danger-rgb),0.08); border-color: rgba(var(--danger-rgb),0.2); border-left-color: var(--danger); }
.pb-callout-info .pb-callout-inner { background: rgba(var(--secondary-rgb),0.08); border-color: rgba(var(--secondary-rgb),0.2); border-left-color: var(--secondary); }
.pb-callout-success .pb-callout-inner { background: rgba(var(--success-rgb),0.08); border-color: rgba(var(--success-rgb),0.2); border-left-color: var(--success); }
.pb-callout-tip .pb-callout-inner { background: rgba(var(--primary-rgb),0.08); border-color: rgba(var(--primary-rgb),0.2); border-left-color: var(--primary); }
.pb-callout-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.pb-callout-icon { font-size: 1.5rem; }
.pb-callout-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.pb-callout-body { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.8; }
.pb-callout-body ul { margin: 0.75rem 0; padding-left: 1.5rem; list-style: disc; }
.pb-callout-body li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.pb-callout-body li::marker { color: var(--danger); }
.pb-callout-body p { margin: 0.75rem 0; }
.pb-callout-body p:first-child { margin-top: 0; }
.pb-callout-body p:last-child { margin-bottom: 0; opacity: 0.85; font-style: italic; }

[data-theme="light"] .pb-callout-warning .pb-callout-inner { background: rgba(234,88,12,0.05); border-color: rgba(234,88,12,0.2); }
[data-theme="light"] .pb-callout-danger .pb-callout-inner { background: rgba(var(--danger-rgb),0.05); border-color: rgba(var(--danger-rgb),0.15); }
[data-theme="light"] .pb-callout-info .pb-callout-inner { background: rgba(var(--secondary-rgb),0.04); border-color: rgba(var(--secondary-rgb),0.15); }
[data-theme="light"] .pb-callout-success .pb-callout-inner { background: rgba(var(--success-rgb),0.04); border-color: rgba(var(--success-rgb),0.15); }
[data-theme="light"] .pb-callout-tip .pb-callout-inner { background: rgba(var(--primary-rgb),0.04); border-color: rgba(var(--primary-rgb),0.15); }
[data-theme="light"] .pb-callout-body li::marker { color: var(--danger); }

/* ═══════════════════════════════════════
   PAGE BUILDER: Video Embed (.pb-video-*)
   ═══════════════════════════════════════ */
.pb-video-wrap { width: 100%; }
.pb-video-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 0 0 1rem; }
.pb-video-container {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--bg-card);
  cursor: pointer;
}
.pb-video-thumb {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.pb-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: none; border: none; cursor: pointer;
  transition: transform var(--t), opacity var(--t); opacity: 0.9;
}
.pb-video-play:hover { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
.pb-video-iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: none;
}
.pb-video-error {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-dim); font-size: var(--fs-sm);
}

@media (max-width: 640px) {
  .pb-video-title { font-size: var(--fs-lg); }
}

/* ═══════════════════════════════════════
   PAGE BUILDER: Embed HTML (.pb-embed-*)
   ═══════════════════════════════════════ */
.pb-embed-wrap { width: 100%; }
.pb-embed-container { margin: 0 auto; width: 100%; }
.pb-embed-full { max-width: 100%; }
.pb-embed-medium { max-width: 48rem; }
.pb-embed-narrow { max-width: 36rem; }
.pb-embed-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 0 0 1rem; }
.pb-embed-content { line-height: 1.6; color: var(--text); }
.pb-embed-content iframe { max-width: 100%; border-radius: var(--radius); }

/* ═══════════════════════════════════════
   PAGE BUILDER: Divider (.pb-divider-*)
   ═══════════════════════════════════════ */
.pb-divider-wrap { width: 100%; }
.pb-divider {
  display: flex; align-items: center; justify-content: center; width: 100%;
}
/* Heights */
.pb-divider-h-small { padding: 0.5rem 0; }
.pb-divider-h-medium { padding: 1.25rem 0; }
.pb-divider-h-large { padding: 2.5rem 0; }
/* Colors */
.pb-divider-c-default { --pb-div-color: var(--border); }
.pb-divider-c-primary { --pb-div-color: var(--primary); }
.pb-divider-c-muted { --pb-div-color: var(--text-dim); }
/* Styles */
.pb-divider-line { border-top: 1px solid var(--pb-div-color); }
.pb-divider-space { border: none; }
.pb-divider-dots { border: none; }
.pb-divider-dots .pb-divider-dots { font-size: 1.5rem; letter-spacing: 0.75rem; color: var(--pb-div-color); }
.pb-divider-icon { border: none; }
.pb-divider-icon-content { font-size: 1.5rem; }

@media (max-width: 640px) {
  .pb-divider-h-large { padding: 1.5rem 0; }
}

/* --- Accessibility: focus-visible --- */
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════
   FORM BUILDER (.fb-*)
   ═══════════════════════════════════════ */
.form-builder-section { padding: var(--sec-py) 0; }
.fb-wrap {
  max-width: 40rem; margin: 0 auto; padding: 1.75rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.fb-title {
  font-size: var(--fs-2xl); font-weight: 800; margin-bottom: 0.5rem;
  color: var(--text); text-align: center;
}
.fb-desc {
  font-size: var(--fs-md); color: var(--text-dim); margin-bottom: 2rem;
  line-height: 1.6; text-align: center;
}

/* Progress dots */
.fb-progress { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
.fb-step-dot {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
  background: rgba(var(--overlay-rgb), 0.06); color: var(--text-dim);
  border: 2px solid transparent; transition: all var(--t);
}
.fb-step-dot.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fb-step-dot.done { background: rgba(var(--success-rgb), 0.15); color: var(--success); border-color: rgba(var(--success-rgb), 0.4); }
.fb-step-line { width: 2rem; height: 2px; background: var(--border); border-radius: 1px; }
.fb-step-line.done { background: rgba(var(--success-rgb), 0.4); }

/* Step panels */
.fb-step-panel { display: none; }
.fb-step-panel.active { display: block; animation: fbFadeIn 0.25s ease; }
@keyframes fbFadeIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.fb-step-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.25rem; color: var(--text); }
.fb-step-desc { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 1.5rem; }

/* Fields grid */
.fb-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; }
.fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
.fb-field.fb-half { grid-column: span 1; }
.fb-field:not(.fb-half) { grid-column: 1 / -1; }
.fb-heading {
  grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1.125rem;
  border-top: 1px solid var(--border);
}
.fb-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fb-heading h4 {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text);
  margin: 0 0 0.5rem;
}
.fb-html-block { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; }
.fb-alt-link { display: block; text-align: center; margin-top: 0.5rem; color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none; transition: color 0.15s; }
.fb-alt-link:hover { color: var(--accent); }

/* Conditional fields */
.fb-field[data-condition] {
  padding: 0.875rem 1rem; background: rgba(var(--overlay-rgb), 0.03);
  border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius: var(--radius);
}

/* Labels & required */
.fb-label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.125rem;
}
.fb-req { color: var(--danger); }

/* Inputs shared */
.fb-input, .fb-textarea, .fb-select {
  width: 100%; box-sizing: border-box;
  padding: 0.8125rem 0.875rem; font-size: var(--fs-md); font-family: var(--font);
  background: rgba(var(--overlay-rgb), 0.04); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
  border-color: rgba(var(--secondary-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.08);
}
.fb-input.fb-error, .fb-textarea.fb-error, .fb-select.fb-error,
[required].fb-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb, 220, 38, 38), 0.12); }
.fb-textarea { resize: vertical; min-height: 5.625rem; }
.fb-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; }

/* Radio — card style */
.fb-radio-group { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.fb-radio {
  display: flex; align-items: center; gap: 0.375rem;
  cursor: pointer; padding: 0.5rem 0.875rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  flex: 1; justify-content: center;
  font-family: var(--font); font-size: var(--fs-md); color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.fb-radio:hover {
  border-color: rgba(var(--secondary-rgb), 0.4);
  background: rgba(var(--secondary-rgb), 0.04);
}
.fb-radio input { display: none; }
.fb-radio:has(input:checked) {
  border-color: rgba(var(--secondary-rgb), 0.5);
  background: rgba(var(--secondary-rgb), 0.06);
  font-weight: 600;
}
/* Checkbox */
.fb-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-md); color: var(--text); cursor: pointer; line-height: 1.5; }
.fb-checkbox input { accent-color: var(--primary); width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; flex-shrink: 0; }

/* Grid select */
.fb-grid-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; }
.fb-grid-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.375rem; padding: 1rem 0.5rem; border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--bg-card);
  cursor: pointer; transition: all var(--t); text-align: center;
}
.fb-grid-item:hover { border-color: rgba(var(--primary-rgb), 0.4); transform: translateY(-2px); }
.fb-grid-item.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15); }
.fb-grid-icon { font-size: 1.75rem; }
.fb-grid-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

/* File upload */
.fb-file-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; transition: all var(--t); }
.fb-file-zone.dragover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.04); }
.fb-file-drop { font-size: var(--fs-sm); color: var(--text-dim); cursor: pointer; }
.fb-file-link { color: var(--primary); font-weight: 600; text-decoration: underline; }
.fb-file-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.fb-file-thumb { position: relative; width: 4rem; height: 4rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--text-dim); background: var(--bg-card); }
.fb-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-file-rm { position: absolute; top: 0; right: 0; width: 1.25rem; height: 1.25rem; background: var(--danger); color: #fff; border: none; border-radius: var(--radius-full); font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fb-file-info { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.5rem; }

/* Repeater */
.fb-repeater { display: flex; flex-direction: column; gap: 0.5rem; }
.fb-repeater-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: rgba(var(--overlay-rgb), 0.03); border-radius: var(--radius); border: 1px solid var(--border); }
.fb-repeater-row-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; }
.fb-repeater-row-fields .fb-input, .fb-repeater-row-fields .fb-select { flex: 1; min-width: 8rem; padding: 0.5rem 0.75rem; font-size: var(--fs-sm); }
.fb-repeater-rm { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: rgba(var(--danger-rgb, 220, 38, 38), 0.1); color: var(--danger); border: none; cursor: pointer; font-size: 0.875rem; flex-shrink: 0; }
.fb-repeater-rm:hover { background: rgba(var(--danger-rgb, 220, 38, 38), 0.2); }
.fb-repeater-add { align-self: flex-start; margin-top: 0.25rem; }

/* Creneaux */
.fb-creneaux-loading { font-size: var(--fs-sm); color: var(--text-dim); padding: 1rem 0; }
.fb-creneaux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; }
.fb-creneaux-empty { font-size: var(--fs-sm); color: var(--text-dim); padding: 1rem 0; }
.fb-creneau-item {
  padding: 0.625rem 0.75rem; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: var(--fs-sm); text-align: center; cursor: pointer; transition: all var(--t);
}
.fb-creneau-item:hover { border-color: rgba(var(--primary-rgb), 0.4); }
.fb-creneau-item.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); font-weight: 600; }

/* Actions */
.fb-actions { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.fb-btn-prev, .fb-btn-next, .fb-btn-submit { font-family: var(--font); font-size: var(--fs-md); font-weight: 700; border: none; cursor: pointer; padding: 0.75rem 1.5rem; border-radius: var(--radius); transition: all var(--t); }
.fb-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Message */
.fb-msg { margin-top: 1rem; padding: 0; font-size: var(--fs-sm); border-radius: var(--radius); transition: all var(--t); }
.fb-msg:empty { display: none; }
.fb-msg-ok { padding: 0.875rem 1rem; background: rgba(var(--success-rgb), 0.1); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.3); }
.fb-msg-err { padding: 0.875rem 1rem; background: rgba(var(--danger-rgb, 220, 38, 38), 0.08); color: var(--danger); border: 1px solid rgba(var(--danger-rgb, 220, 38, 38), 0.2); }

/* Responsive */
@media (max-width: 640px) {
  .fb-wrap { padding: 1.25rem 1rem; }
  .fb-fields-grid { grid-template-columns: 1fr; }
  .fb-field.fb-half { grid-column: 1 / -1; }
  .fb-grid-select { grid-template-columns: repeat(2, 1fr); }
  .fb-creneaux-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-actions { flex-direction: column; align-items: stretch; }
  .fb-actions button { text-align: center; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE FINAL — Formulaires pleine largeur mobile
   Placé en fin de fichier pour gagner la cascade
   ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pb-block.pb-app-embed {
    padding: 0 !important;
  }
  .service-form-card,
  .dec-card,
  .dec-wrap,
  .modal-box,
  #atelier-personnalise > div {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .service-form-section {
    padding: 1.25rem 0 !important;
  }
  .service-form-card {
    padding: 1.25rem 0.75rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .service-form-card > .dec-card {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
  }
  .dec-wrap {
    padding: 0 0 3rem;
  }
  .dec-card {
    padding: 1.25rem 0.75rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #main-content + .dec-wrap {
    padding-top: 1.25rem;
  }
  .modal-box {
    padding: 1.5rem 1rem;
    border-radius: var(--radius);
  }
  .form-row,
  .service-form-row {
    grid-template-columns: 1fr !important;
  }
  .service-form-row,
  .dec-flex-row {
    flex-direction: column;
  }
}

/* Share button & toast */
.obs-share-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--text-dim,rgba(255,255,255,0.25));color:var(--text-dim,rgba(255,255,255,0.6));border-radius:6px;padding:5px 8px;cursor:pointer;transition:all 0.2s;font-size:0.78rem;gap:4px;vertical-align:middle;}
.obs-share-btn:hover{color:var(--primary,#7273f9);border-color:var(--primary,#7273f9);background:rgba(var(--primary-rgb,114,115,249),0.08);}
.obs-share-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--primary,#7273f9);color:#fff;padding:10px 24px;border-radius:8px;font-size:0.88rem;font-weight:600;opacity:0;transition:all 0.3s;z-index:99999;pointer-events:none;}
.obs-share-toast--visible{opacity:1;transform:translateX(-50%) translateY(0);}