/* Jordan STIEN - (c) 2026 - Usage Pédagogique
 *
 * Charte des applications éditées par Améthyste, société fictive du module.
 * - Astreinte (plateforme de l'escape game, côté étudiants) : thème sombre « nuit », classe .theme-nuit
 * - Verdict (validation et notation, côté intervenant) : thème clair, classe .theme-verdict
 *
 * Police de marque : Cabin, auto-hébergée (aucun CDN : la CSP reste stricte, aucune IP ne part chez un tiers).
 * Copier le dossier polices/ à côté de cette feuille, ou ajuster les url().
 */

@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('polices/cabin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cabin';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('polices/cabin-italic.woff2') format('woff2');
}

:root {
  /* Marque Améthyste */
  --primary: #4a1a8a;
  --primary-light: #6b3fa0;
  --primary-hover: #5a2599;
  --primary-dark: #3a1070;
  --accent-start: #8b5cf6;
  --accent-end: #6366f1;
  --accent-cyan: #06b6d4;
  --secondary: #4361ee;
  --success: #8db549;
  --dark: #0f0a1a;

  /* États. Contrastes WCAG AA vérifiés avec la couleur de texte prévue par chaque pastille. */
  --etat-ok: #8db549;
  --etat-attention: #d4a72c;
  --etat-critique: #c9303a;
  --etat-info: #06b6d4;

  /* Priorités d'incident P1 à P4 */
  --p1: #c9303a;
  --p2: #f08c2e;
  --p3: #d4a72c;
  --p4: #6b7280;

  /* Thème clair par défaut */
  --heading-color: #1a1033;
  --body-color: #4a4560;
  --muted-color: #6f6a85;
  --light-bg: #f3f0fb;
  --border-color: #ddd8ee;
  --surface: #ffffff;
  --surface-hover: #f7f5fd;
  --lien: #6d28d9;

  /* Typographie */
  --font-brand: 'Cabin', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'DejaVu Sans Mono', monospace;
  --line-height-base: 1.65;

  /* Formes */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --shadow-sm: 0 2px 8px rgba(74, 26, 138, 0.08);
  --shadow-md: 0 8px 30px rgba(74, 26, 138, 0.13);
  --shadow-lg: 0 20px 60px rgba(74, 26, 138, 0.18);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.20);
  --gradient-marque: linear-gradient(135deg, #4a1a8a, #7c3aed);
  --gradient-nuit: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
}

/* Astreinte : la nuit d'astreinte, sombre et concentrée */
.theme-nuit {
  --heading-color: #f0ecf8;
  --body-color: #c9c5d8;
  --muted-color: #938fa8;
  --light-bg: #0a0a1a;
  --border-color: #2a2150;
  --surface: #150f28;
  --surface-hover: #201840;
  --lien: #a78bfa;
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Verdict : l'espace intervenant, clair et sobre pour relire et noter */
.theme-verdict {
  color-scheme: light;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: var(--line-height-base);
  color: var(--body-color);
  background: var(--light-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  color: var(--heading-color);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
h3 { font-size: 1.15rem; }

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--heading-color); }

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: 3px solid var(--accent-start);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Structure */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-color);
}

.entete .logo { height: 40px; width: auto; color: var(--heading-color); }

.conteneur { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem; }

.pied {
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted-color);
  border-top: 1px solid var(--border-color);
}

/* Composants */
.carte {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: var(--radius-pill);
  font: 600 1rem var(--font-brand);
  color: #fff;
  background: var(--gradient-marque);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.bouton.secondaire { background: transparent; color: var(--heading-color); border: 1px solid var(--border-color); box-shadow: none; }

.champ {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--heading-color);
  font: 1rem var(--font-brand);
}

.champ.code-saisie {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pastille {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary-light);
}

.pastille.ok { background: var(--etat-ok); color: #1a1033; }
.pastille.attention { background: var(--etat-attention); color: #1a1033; }
.pastille.critique { background: var(--etat-critique); }
.pastille.p1 { background: var(--p1); }
.pastille.p2 { background: var(--p2); color: #1a1033; }
.pastille.p3 { background: var(--p3); color: #1a1033; }
.pastille.p4 { background: var(--p4); }

/* Progression des 20 checkpoints */
.progression {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
}

.progression .etape {
  height: 10px;
  border-radius: 3px;
  background: var(--border-color);
}

.progression .etape.validee { background: var(--gradient-nuit); }
.progression .etape.courante { background: var(--accent-start); box-shadow: var(--shadow-glow); }
.progression .etape.en-attente { background: var(--etat-attention); }

/* Bandeau d'acte illustré */
.bandeau {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}

.bandeau::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 26, 0) 30%, rgba(10, 10, 26, 0.85) 100%);
}

.bandeau > * { position: relative; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}