/* ==========================================================================
   FormateurPro — Design System « Atelier » 2026
   Couche de modernisation non destructive.
   Aucune règle ne modifie la logique applicative : uniquement typographie,
   densité, rythme, états d'interaction et chrome de l'interface.
   Les couleurs héritées sont retokenisées à l'exécution par
   assets/theme-formateurpro-2026.js
   ========================================================================== */

:root {
  /* --- Encres et surfaces --- */
  --fp-ink: #0E1B24;
  --fp-ink-2: #152530;
  --fp-ink-3: #1D323D;
  --fp-canvas: #EEF2F4;
  --fp-surface: #FFFFFF;
  --fp-surface-2: #F7F9FA;
  --fp-line: #DCE4E8;
  --fp-line-strong: #C3D0D6;

  /* --- Signalétique --- */
  --fp-brand: #0B6E7F;        /* action principale */
  --fp-brand-600: #095A68;
  --fp-brand-soft: #DDEEF0;
  --fp-signal: #E8A33D;       /* repère actif, jalon */
  --fp-signal-soft: #FBEED8;
  --fp-valid: #4FB88B;
  --fp-alert: #D2574B;
  --fp-study: #7C5CD6;

  /* --- Texte --- */
  --fp-text: #0E1B24;
  --fp-text-2: #33454F;
  --fp-text-muted: #5A6B76;
  --fp-text-faint: #8CA0AA;

  /* --- Rythme --- */
  --fp-r-xs: 6px;
  --fp-r-sm: 10px;
  --fp-r-md: 14px;
  --fp-r-lg: 18px;
  --fp-r-xl: 24px;

  --fp-elev-1: 0 1px 2px rgba(14, 27, 36, .06), 0 2px 8px rgba(14, 27, 36, .05);
  --fp-elev-2: 0 2px 4px rgba(14, 27, 36, .06), 0 12px 28px -12px rgba(14, 27, 36, .18);
  --fp-elev-3: 0 8px 20px -6px rgba(14, 27, 36, .22), 0 24px 60px -24px rgba(14, 27, 36, .30);

  /* --- Typographie --- */
  --fp-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --fp-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fp-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fp-speed: .18s;
  --fp-ease: cubic-bezier(.4, .14, .3, 1);
}

/* Mode sombre : les valeurs sont remappées par le moteur JS,
   ces variables pilotent le chrome propre à la couche moderne. */
html[data-fp-mode="sombre"] {
  --fp-canvas: #0E1B24;
  --fp-surface: #152530;
  --fp-surface-2: #182C36;
  --fp-line: #2C4552;
  --fp-line-strong: #32505E;
  --fp-text: #EAF1F3;
  --fp-text-2: #C5D4DA;
  --fp-text-muted: #8FA7B3;
  --fp-text-faint: #6E8895;
  --fp-brand-soft: #123A42;
  --fp-signal-soft: #3A2E17;
  --fp-elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --fp-elev-2: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 30px -14px rgba(0, 0, 0, .6);
  --fp-elev-3: 0 10px 24px -8px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   1. Fondations
   ========================================================================== */

html, body {
  background: var(--fp-canvas) !important;
}

body,
#root,
#root * {
  font-family: var(--fp-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

#root {
  font-size: 15px;
  letter-spacing: -0.003em;
}

/* Titres : la face display porte l'identité, avec retenue */
#root h1, #root h2, #root h3, #root h4,
#root .fp-display {
  font-family: var(--fp-font-display) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.18 !important;
}

/* Données chiffrées, codes, compteurs : face technique */
#root .fp-data {
  font-family: var(--fp-font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em !important;
}

/* Étiquettes de section : la « règle graduée » de l'interface */
#root .fp-eyebrow {
  font-family: var(--fp-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

::selection { background: var(--fp-signal); color: var(--fp-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fp-line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fp-text-faint); background-clip: content-box; }

/* Accessibilité : anneau de focus unique et lisible partout */
#root button:focus-visible,
#root a:focus-visible,
#root input:focus-visible,
#root select:focus-visible,
#root textarea:focus-visible,
#root [tabindex]:focus-visible {
  outline: 2px solid var(--fp-signal) !important;
  outline-offset: 2px !important;
  border-radius: var(--fp-r-sm);
}

/* ==========================================================================
   2. Composants retravaillés (classes posées par le moteur JS)
   ========================================================================== */

/* --- Boutons --- */
#root .fp-btn {
  font-family: var(--fp-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  transition: transform var(--fp-speed) var(--fp-ease),
              box-shadow var(--fp-speed) var(--fp-ease),
              filter var(--fp-speed) var(--fp-ease) !important;
  will-change: transform;
}
#root .fp-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--fp-elev-2);
  filter: saturate(1.05);
}
#root .fp-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--fp-elev-1);
  filter: brightness(.95);
}
#root .fp-btn:disabled { opacity: .5; }

/* --- Champs --- */
#root .fp-field {
  transition: border-color var(--fp-speed) var(--fp-ease),
              box-shadow var(--fp-speed) var(--fp-ease) !important;
}
#root .fp-field:hover:not(:disabled) { border-color: var(--fp-line-strong) !important; }
#root .fp-field:focus {
  outline: none !important;
  border-color: var(--fp-brand) !important;
  box-shadow: 0 0 0 3px var(--fp-brand-soft) !important;
}
#root .fp-field::placeholder { color: var(--fp-text-faint) !important; }

/* --- Cartes --- */
#root .fp-card {
  transition: box-shadow .22s var(--fp-ease), transform .22s var(--fp-ease) !important;
}
#root .fp-card:hover { box-shadow: var(--fp-elev-2) !important; }
#root .fp-card-interactive:hover { transform: translateY(-2px); }

/* --- Éléments de navigation latérale --- */
#root .fp-navitem {
  position: relative;
  transition: background var(--fp-speed) var(--fp-ease),
              color var(--fp-speed) var(--fp-ease),
              padding-left var(--fp-speed) var(--fp-ease) !important;
}
#root .fp-navitem::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--fp-signal);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height var(--fp-speed) var(--fp-ease);
}
#root .fp-navitem:hover { padding-left: 24px !important; }
#root .fp-navitem.fp-navitem-active::before { height: 22px; }

/* --- Tableaux --- */
#root table { border-collapse: separate !important; border-spacing: 0 !important; }
#root th {
  font-family: var(--fp-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
#root tbody tr { transition: background var(--fp-speed) var(--fp-ease); }

/* --- Barres de progression : léger relief --- */
#root .fp-progress { overflow: hidden; }
#root .fp-progress > div { transition: width .6s var(--fp-ease) !important; }

/* ==========================================================================
   3. Chrome de la couche moderne
   ========================================================================== */

/* Sélecteur d'apparence — pastille flottante discrète */
#fp-appearance {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: 99px;
  box-shadow: var(--fp-elev-2);
  font-family: var(--fp-font-mono);
}
#fp-appearance button {
  border: 0;
  background: transparent;
  color: var(--fp-text-muted);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--fp-speed) var(--fp-ease), color var(--fp-speed) var(--fp-ease);
}
#fp-appearance button:hover { color: var(--fp-text); }
#fp-appearance button[aria-pressed="true"] {
  background: var(--fp-ink);
  color: #fff;
}
html[data-fp-mode="sombre"] #fp-appearance button[aria-pressed="true"] {
  background: var(--fp-signal);
  color: var(--fp-ink);
}

/* Séquence d'apparition au chargement */
@keyframes fp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#root > * { animation: fp-rise .45s var(--fp-ease) both; }

@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  #root .fp-btn:hover, #root .fp-card-interactive:hover { transform: none; }
}

/* ==========================================================================
   4. Module e-learning intégré
   ========================================================================== */

.fp-module-shell {
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-lg);
  overflow: hidden;
  background: var(--fp-ink);
  box-shadow: var(--fp-elev-2);
}
.fp-module-frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 560px;
  border: 0;
  background: var(--fp-ink);
}
.fp-module-metric {
  font-family: var(--fp-font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 900px) {
  #root { font-size: 14.5px; }
  .fp-module-frame { height: 70vh; min-height: 440px; }
  #fp-appearance { right: 12px; bottom: 12px; }
}


/* V6 — Interactivité Formateur ↔ Apprenant */
.fp-interaction-layout { min-width: 0; }
.fp-interaction-layout > * { min-width: 0; }
@media (max-width: 820px) {
  .fp-interaction-layout { grid-template-columns: 1fr !important; }
  .fp-interaction-two-col { grid-template-columns: 1fr !important; }
}