/* =============================================================================
   style.css — Feuille de style UNIFIÉE pour le site PWA-Site
   =============================================================================
   v0.5.0-beta — Application du thème riche (validé v0.5.0-alpha sur /2a/) à
   l'ensemble du site : splash racine, couloir 1A, couloir 2A.

   Source : style-2a.css (extrait de l'ancien site PWA 2 validé visuellement
   par Stéphane le 18/05/2026) + ajouts pour les patterns splash et 1A.

   Aucun HTML modifié : les pages 1A et le splash gardent leur structure
   actuelle, ce CSS leur donne juste le nouveau look. Voir ADR-0011.
============================================================================= */

:root {
  --bleu: #003366;
  --bleu-fonce: #002244;
  --or: #ff6f00;
  --or-clair: #ffb300;
  --vert: #2e7d32;
  --violet: #667eea;
  --violet-fonce: #764ba2;
  --gris: #f5f7fa;
  --gris-fonce: #555;
  --radius: 20px;
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.12);

  /* Aliases historiques (pour rétrocompatibilité avec d'éventuelles règles
     anciennes éparses qui référenceraient --bleu-sorbonne / --or-sorbonne) */
  --bleu-sorbonne: var(--bleu);
  --or-sorbonne: var(--or);
  --gris-clair: var(--gris);
  --blanc: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--gris);
  color: #333;
  line-height: 1.7;
  min-height: 100vh;
}

/* ===========================================================================
   HEADER + NAV (commun splash / 1A / 2A)
   =========================================================================== */
header {
  background: var(--bleu);
  color: white;
  padding: 1.8rem 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.logo {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  color: white;
}

.logo-sub {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 0.3rem;
}

nav ul {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  list-style: none;
  padding: 0 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 500;
  transition: all 0.3s;
}

nav a:hover,
nav a:focus { background: rgba(255, 255, 255, 0.3); outline: none; }
nav a.current { background: var(--or); color: white; }

/* Bouton "Connexion prof" en haut à droite du header (uniquement 2A) */
.auth-corner {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.auth-corner button {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.auth-corner button:hover { background: rgba(255, 255, 255, 0.3); }

.badge-prof {
  background: var(--or);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===========================================================================
   MAIN + TITRES
   =========================================================================== */
main {
  max-width: 1300px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

h1 {
  text-align: center;
  color: var(--bleu);
  font-size: 2.8rem;
  margin: 1.5rem 0;
}

.subtitle {
  text-align: center;
  font-size: 1.3rem;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.cours-status {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--or);
  background: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 2.5rem auto;
  max-width: 800px;
}

/* ===========================================================================
   SPLASH RACINE — 2 grandes cartes 1A / 2A
   =========================================================================== */
.splash-hero {
  text-align: center;
  margin: 3rem auto 4rem;
  max-width: 900px;
}

.splash-hero h1 {
  font-size: 3.2rem;
  margin-bottom: 1rem;
}

.splash-hero .subtitle {
  font-size: 1.25rem;
  margin: 0;
  color: var(--gris-fonce);
  font-weight: 500;
}

.splash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
}

.splash-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 28px;
  padding: 3rem 2.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
  border-top: 6px solid var(--bleu);
}

.splash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(0,51,102,0) 0%, rgba(0,51,102,0.04) 100%);
  pointer-events: none;
}

.splash-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  border-top-color: var(--or);
}

.splash-card-level {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  background: rgba(255, 111, 0, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

.splash-card-level sup {
  font-size: 0.7em;
  vertical-align: super;
}

.splash-card h2 {
  font-size: 1.9rem;
  color: var(--bleu);
  margin-bottom: 1rem;
  text-align: left;
}

.splash-card > p {
  color: var(--gris-fonce);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.splash-card-tags {
  font-size: 0.95rem;
  color: var(--bleu);
  font-weight: 500;
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  background: var(--gris);
  border-radius: 14px;
  border-left: 4px solid var(--bleu);
  flex-grow: 1;
}

.splash-card-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 1.05rem;
  color: white;
  background: var(--bleu);
  padding: 1rem 1.8rem;
  border-radius: 999px;
  transition: all 0.3s;
  align-self: flex-start;
}

.splash-card:hover .splash-card-arrow {
  background: var(--or);
  transform: translateX(4px);
}

/* ===========================================================================
   WORKSPACE CLOUD RUN (page 2A)
   =========================================================================== */
.workspace-access { margin: 2.5rem auto 0; max-width: 900px; }

.workspace-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.8rem 2rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #003366, #0b74de);
  color: #fff;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

.workspace-icon { font-size: 2.8rem; flex-shrink: 0; }
.workspace-text h2 { font-size: 1.7rem; margin-bottom: 0.4rem; color: white; }
.workspace-text p { margin: 0.1rem 0; font-size: 0.98rem; opacity: 0.9; }

.workspace-link-btn {
  margin-left: auto;
  background: var(--or-clair);
  color: #1a1a1a;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.workspace-link-btn:hover { background: #ffdd55; transform: translateY(-2px); }
.workspace-link-btn span { font-size: 1.2rem; }

/* ===========================================================================
   SESSION GRID — grille de tuiles (CM/TP 2A et parties 1A)
   =========================================================================== */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.2rem;
  margin: 3rem 0;
  padding: 0 0.5rem;
}

.session-icon {
  background: var(--bleu);
  color: white;
  padding: 2rem 1rem;
  border-radius: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.4s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: block;
}

.session-icon:hover:not(.locked) {
  transform: scale(1.12);
  background: var(--or);
  color: white;
}

.session-icon.locked { background: #999; cursor: not-allowed; opacity: 0.7; }

/* ===========================================================================
   GRID CARTES (QCM / Mock API / 1A définitions etc.)
   =========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow);
  transition: transform 0.4s;
}

.card:hover { transform: translateY(-10px); }

.card h2,
.card h3 {
  color: var(--bleu);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
}

.card h3 { font-size: 1.25rem; }
.card p { color: var(--gris-fonce); }

/* ===========================================================================
   QCM (page 2A)
   =========================================================================== */
.qcm-list { display: grid; gap: 1rem; margin-top: 1.2rem; }

.qcm-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 1.8rem;
  background: #f8f9fa;
  border-radius: 16px;
  border-left: 10px solid var(--bleu);
  font-size: 1.1rem;
  gap: 0.8rem;
}

.qcm-item a { color: var(--bleu); font-weight: 700; text-decoration: none; }
.qcm-item a:hover { color: var(--or); }

.status {
  padding: 0.5rem 1rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.status-open   { background: #d4edda; color: var(--vert); }
.status-soon   { background: #fff3cd; color: #856404; }
.status-locked { background: #f8d7da; color: #721c24; }

/* ===========================================================================
   GAMES SECTION (page 2A, violet dégradé)
   =========================================================================== */
.games-section {
  background: linear-gradient(135deg, var(--violet), var(--violet-fonce));
  color: white;
  border-radius: 28px;
  padding: 3.5rem 2rem;
  text-align: center;
  margin: 4rem 0;
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.4);
}

.games-section h2 { color: white; font-size: 2.4rem; margin-bottom: 2rem; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.game-card {
  background: rgba(255, 255, 255, 0.18);
  padding: 2rem;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  transition: all 0.4s;
}

.game-card:hover { transform: translateY(-12px); }
.game-card a { color: white; font-size: 1.7rem; font-weight: 700; text-decoration: none; }
.game-card p { opacity: 0.9; margin-top: 0.8rem; font-size: 1.1rem; }

/* Mock API toggle */
.msw-toggle {
  background: var(--or);
  color: white;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.1rem;
}

.msw-toggle.active { background: var(--vert); }

/* ===========================================================================
   FOOTER (commun)
   =========================================================================== */
footer {
  text-align: center;
  padding: 3.5rem 1rem;
  background: white;
  color: var(--gris-fonce);
  margin: 5rem 1rem 1rem;
  border-radius: 28px;
  box-shadow: var(--shadow);
  font-size: 1rem;
}

footer p { margin: 0.3rem 0; }

/* ===========================================================================
   MODAL LOGIN (Connexion prof — page 2A)
   =========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal-box {
  background: white;
  padding: 3rem 2.5rem;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 420px;
  width: 90%;
}

.modal-box h2 { color: var(--bleu); font-size: 2rem; margin-bottom: 1.5rem; }
.modal-box p  { color: var(--gris-fonce); margin-bottom: 1.2rem; font-size: 0.95rem; }

.modal-box input {
  width: 100%;
  padding: 1rem;
  margin: 0.6rem 0;
  border: 2px solid #ddd;
  border-radius: 14px;
  font-size: 1.1rem;
  font-family: inherit;
  transition: border 0.3s;
}

.modal-box input:focus { border-color: var(--bleu); outline: none; }

.modal-box .modal-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}

.modal-box button {
  flex: 1;
  border: none;
  padding: 1rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}

.modal-box .btn-submit { background: var(--bleu); color: white; }
.modal-box .btn-submit:hover { background: var(--bleu-fonce); }
.modal-box .btn-cancel { background: #e5e7eb; color: #333; }
.modal-box .btn-cancel:hover { background: #d1d5db; }

.modal-error {
  color: #c62828;
  font-weight: 600;
  margin-top: 0.8rem;
  display: none;
}

.modal-error.show { display: block; }

/* ===========================================================================
   PAGES 1A — séance (Partie N : ...) + 2A — CM/TP page interne
   =========================================================================== */
.session-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 1.8rem;
  background: white;
  border-radius: 18px;
  box-shadow: var(--shadow);
  font-size: 1rem;
  color: var(--gris-fonce);
}

.session-meta strong { color: var(--bleu); }

.session-meta .pdf-link,
.pdf-link {
  margin-left: auto;
  background: var(--or);
  color: white !important;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s;
  white-space: nowrap;
}

.session-meta .pdf-link:hover,
.pdf-link:hover { background: var(--bleu); transform: translateY(-2px); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.2rem 1.8rem;
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.session-date { font-weight: 500; color: var(--gris-fonce); }

/* Section pédagogique (utilisée massivement dans 1A) */
.section-block {
  background: white;
  padding: 2.2rem 2.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 1.5rem 0;
}

.section-block h2 {
  color: var(--bleu);
  font-size: 1.7rem;
  margin-bottom: 1rem;
  text-align: left;
}

.section-block h3 {
  color: var(--bleu);
  margin: 1.4rem 0 0.7rem;
  font-size: 1.25rem;
}

.section-block p,
.section-block li { color: #333; }

.section-block strong { color: var(--bleu); }

.section-block ul,
.section-block ol {
  margin: 0.6rem 0 1rem 1.5rem;
}

.section-block li { margin: 0.3rem 0; }

/* Tableaux des pages 1A (utilisé pour les comparatifs CSS, JS, etc.) */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  background: var(--gris);
  border-radius: 12px;
  overflow: hidden;
}

th, td {
  border: 1px solid #e5e7eb;
  padding: 0.8rem 1rem;
  text-align: left;
}

th { background: var(--bleu); color: white; font-weight: 600; }

tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.7); }

/* Code blocks et inline code */
pre {
  background: #1e1e2e;
  color: #d4d4d8;
  padding: 1.2rem;
  border-radius: 12px;
  overflow-x: auto;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 1rem 0;
}

code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0, 51, 102, 0.08);
  color: var(--bleu);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

pre code { background: none; color: inherit; padding: 0; }

/* Notice "Contenu en cours de migration" (utilisée par les placeholder 2A) */
.placeholder-notice {
  background: linear-gradient(135deg, #fff7e6, #ffe7b3);
  border-left: 6px solid var(--or);
  padding: 1.5rem 2rem;
  border-radius: 14px;
  margin: 2rem 0;
  color: #5d3d00;
}

.placeholder-notice strong { color: var(--bleu); }

/* ===========================================================================
   NAVIGATION ENTRE SÉANCES (en bas des pages 1A partie-N)
   =========================================================================== */
.session-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 1rem;
  padding: 1.4rem 1.8rem;
  background: white;
  border-radius: 18px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.session-nav a {
  color: var(--bleu);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  background: rgba(0, 51, 102, 0.08);
  transition: all 0.3s;
}

.session-nav a:hover { background: var(--or); color: white; }

.session-nav .index-link {
  background: var(--bleu);
  color: white;
}

.session-nav .index-link:hover { background: var(--or); }

/* ===========================================================================
   ANIMATIONS + RESPONSIVE
   =========================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 768px) {
  h1 { font-size: 2.4rem; }
  .splash-hero h1 { font-size: 2.4rem; }
  .subtitle { font-size: 1.1rem; }
  .auth-corner { position: static; justify-content: center; margin-top: 1rem; }
  .workspace-card { flex-direction: column; align-items: flex-start; }
  .workspace-link-btn { margin: 1rem 0 0 0; width: 100%; justify-content: center; }
  .session-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .session-icon { padding: 1.5rem 0.8rem; font-size: 1.2rem; }
  .qcm-item { flex-direction: column; text-align: center; padding: 1.2rem; }
  .game-grid { grid-template-columns: 1fr; }
  .games-section { padding: 3rem 1.5rem; }
  .card { padding: 2rem; }
  .splash-card { padding: 2.5rem 1.8rem; }
  .splash-grid { gap: 1.5rem; }
  .section-block { padding: 1.8rem 1.5rem; }
  .session-meta { flex-direction: column; align-items: flex-start; }
  .session-meta .pdf-link { margin-left: 0; }
  .session-nav { flex-direction: column; }
  .session-nav a { width: 100%; text-align: center; }
}

/* ===========================================================================
   ACCESSIBILITÉ — focus ring or
   =========================================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 2px;
}

/* ===========================================================================
   PAGES CM/TP — Accordéons + encarts pédagogiques (v0.5.0-rc1)
   =============================================================================
   Source : extrait du <style> inline des pages CM/TP de l'archive 2A.
   Intégré dans le CSS unifié pour ne plus dupliquer ce CSS dans chaque page.
============================================================================= */

/* --- Conteneur d'accordéon (section pliable) --- */
.section {
  background: white;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* --- Header cliquable de l'accordéon --- */
.section-header {
  background: var(--bleu);
  color: white;
  padding: 1.2rem 1.8rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
  user-select: none;
}

.section-header:hover { background: var(--bleu-fonce); }

/* Badge "Ouvrir" / "Fermer" à droite du header */
.section-header::after {
  content: "Ouvrir";
  font-size: 0.85rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  margin-left: 1rem;
  background: rgba(0, 0, 0, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.section-header[aria-expanded="true"]::after { content: "Fermer"; }

/* --- Contenu pliable --- */
.section-content {
  padding: 1.8rem;
  display: none;
  background: var(--gris);
  border-top: 1px solid #ddd;
}

.section-content.visible {
  display: block;
  animation: fadeIn 0.5s;
}

.section-content > p,
.section-content > ul,
.section-content > ol,
.section-content > pre,
.section-content > .pro-tip,
.section-content > .demo { margin-bottom: 1rem; }

.section-content > :last-child { margin-bottom: 0; }

/* --- Encart "Pro tip" (vert pâle) --- */
.pro-tip {
  background: #e8f5e9;
  border-left: 6px solid var(--vert);
  padding: 1.2rem 1.4rem;
  border-radius: 0 12px 12px 0;
  margin: 1.5rem 0;
  font-weight: 600;
  color: #1b5e20;
}

.pro-tip strong { color: #0d3d10; }

/* --- Encart "Demo" (bleu pâle) --- */
.demo {
  background: #e3f2fd;
  border-left: 6px solid var(--bleu);
  padding: 1.2rem 1.4rem;
  border-radius: 0 12px 12px 0;
  margin: 1.5rem 0;
  color: #0d2d4e;
}

.demo strong { color: var(--bleu); }

/* --- QCM intra-CM (moteur en v0.5.0-final, structure préparée) --- */
.qcm-container { margin-top: 2rem; }

/* Override du .qcm-item du splash (ligne 399, display:flex) : pour le moteur
   QCM intra-CM on a besoin du flux block normal sinon les labels s'alignent
   en row au lieu d'être en colonne. */
.qcm-item {
  display: block;
  background: white;
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  /* reset des propriétés flex héritées */
  flex-wrap: initial;
  justify-content: initial;
  align-items: initial;
  gap: 0;
}

.qcm-item p { font-weight: 600; margin-bottom: 0.8rem; color: var(--bleu); }

.qcm-item label {
  display: block;
  margin: 0.5rem 0;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  transition: background 0.2s;
}

.qcm-item label:hover { background: var(--gris); }

.qcm-item input[type="radio"] { margin-right: 0.6rem; }

.feedback {
  margin-top: 0.6rem;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
}

.feedback.correct { background: #d4edda; color: var(--vert); }
.feedback.incorrect { background: #f8d7da; color: #721c24; }

/* --- Variable --rouge (utilisée par .time dans les pages TP) --- */
:root { --rouge: #c62828; }

/* --- Pages TP — méta horaire et note d'intro --- */
.time {
  font-weight: 600;
  color: var(--rouge);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.intro-note {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--gris-fonce);
  padding: 1rem 1.2rem;
  background: rgba(0, 51, 102, 0.04);
  border-radius: 10px;
  border-left: 4px solid var(--bleu);
}

.intro-note strong { color: var(--bleu); }

/* ===========================================================================
   v0.5.0-rc2 — Classes complémentaires utilisées dans les fragments CM2-5 + TP2-5
   =============================================================================
   Extraites des <style> inline des pages sources de l'archive 2A
   (ADR-0013). Définitions originales préservées, alignées sur la palette
   unifiée du thème (--bleu, --or, --vert, --rouge, --violet).
============================================================================= */

/* Variable additionnelle utilisée par .danger-zone (CM2 Sécurité) */
:root { --danger-bg: #ffebee; }

/* --- Sections : titres décomposés (utilisés par CM3+, header avec time-badge) --- */
.section-title { flex: 1; }

.section-time {
  font-size: 0.9rem;
  opacity: 0.85;
  font-weight: 400;
}

.time-badge,
.toggle-label {
  font-size: 0.8rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Encart anecdote (informations contextuelles) --- */
.anecdote {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border-left: 6px solid var(--violet);
  padding: 1.4rem;
  border-radius: 0 14px 14px 0;
  margin: 1.8rem 0;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
  color: #4a148c;
}

/* --- Encart défi / mini-jeu / atelier --- */
.defi,
.mini-jeu,
.atelier {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-left: 6px solid var(--or);
  padding: 1.4rem;
  border-radius: 0 14px 14px 0;
  margin: 1.8rem 0;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
  color: #5d3d00;
}

.defi strong,
.mini-jeu strong,
.atelier strong { color: var(--or); }

/* --- Challenge (orange clair) --- */
.challenge {
  background: #fff3e0;
  border-left: 4px solid #ff8f00;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-size: 0.95rem;
}

/* --- Danger zone (sécurité, CM2) --- */
.danger-zone {
  background: var(--danger-bg);
  border-left: 6px solid var(--rouge);
  padding: 1.4rem;
  border-radius: 0 12px 12px 0;
  margin: 1.8rem 0;
  color: #721c24;
}

.danger-zone strong { color: var(--rouge); }

/* --- Highlight (jaune) --- */
.highlight {
  background: #fff3cd;
  border-left: 4px solid var(--or);
  padding: 1rem;
  border-radius: 10px;
  margin: 1rem 0;
}

/* --- Warning (orange clair) --- */
.warning {
  background: #fff3e0;
  border-left: 4px solid #ff8f00;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}

/* --- Note (gris neutre) --- */
.note {
  background: #f5f5f5;
  border-left: 4px solid #757575;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}

/* --- Carte objectifs (TP, début de page) --- */
.objectifs-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem 2rem;
  margin-bottom: 2rem;
  border-left: 6px solid var(--bleu);
}

.objectifs-card h2,
.objectifs-card h3 { color: var(--bleu); margin-bottom: 1rem; }

/* --- Grille de compétences (skill-grid) --- */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin: 1.1rem 0 0.6rem;
}

.skill-badge {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.skill-badge:hover { background: var(--gris); border-color: var(--bleu); }
.skill-badge.checked { background: #e8f5e9; border-color: var(--vert); }

/* --- XSS demo (CM2 Sécurité) --- */
.xss-demo {
  background: #fff8e1;
  border: 2px dashed var(--or-clair);
  padding: 1.5rem;
  border-radius: 16px;
  text-align: center;
  margin: 2rem 0;
}

.xss-output {
  margin-top: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  min-height: 60px;
  border: 1px solid #ddd;
}

/* --- Moteur QCM intra-CM : intro + score --- */
.qcm-intro {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  color: var(--gris-fonce);
}

.qcm-score {
  font-weight: 700;
  margin: 1.5rem 0 0.8rem;
  font-size: 1.1rem;
  color: var(--bleu);
  text-align: center;
  padding: 1rem;
  background: var(--gris);
  border-radius: 12px;
}

.qcm-score.perfect { background: #d4edda; color: var(--vert); }

/* Bouton valider QCM */
.qcm-submit {
  display: block;
  margin: 1.5rem auto 0;
  background: var(--bleu);
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
  font-family: inherit;
}

.qcm-submit:hover { background: var(--or); transform: translateY(-2px); }
.qcm-submit:disabled { background: #999; cursor: not-allowed; transform: none; }

/* ===========================================================================
   v0.5.0-rc4 — Page de login étudiant (templates/login.html)
   =============================================================================
   Carte centrée façon "premium" cohérente avec le splash, avec badge année
   en pill or, header bleu sticky standard, erreur en rouge.
============================================================================= */

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}

.login-card {
  background: white;
  border-radius: 28px;
  padding: 3rem 2.5rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
  max-width: 480px;
  width: 100%;
  border-top: 6px solid var(--bleu);
  position: relative;
}

.login-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  background: rgba(255, 111, 0, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  margin-bottom: 1.5rem;
}

.login-badge sup {
  font-size: 0.7em;
  vertical-align: super;
}

.login-card h2 {
  color: var(--bleu);
  font-size: 2rem;
  margin: 0.5rem 0 1rem;
}

.login-instructions {
  color: var(--gris-fonce);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.login-card input[type="password"] {
  width: 100%;
  padding: 1.1rem 1.2rem;
  margin: 0.5rem 0;
  border: 2px solid #ddd;
  border-radius: 14px;
  font-size: 1.05rem;
  font-family: inherit;
  transition: border 0.2s;
}

.login-card input[type="password"]:focus {
  border-color: var(--bleu);
  outline: none;
}

.login-error {
  color: var(--rouge);
  font-weight: 600;
  margin: 0.8rem 0;
  padding: 0.6rem;
  border-radius: 10px;
  display: none;
  font-size: 0.95rem;
}

.login-error.show {
  display: block;
  background: rgba(198, 40, 40, 0.08);
}

.login-submit {
  display: block;
  width: 100%;
  background: var(--bleu);
  color: white;
  border: none;
  padding: 1.1rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s;
  font-family: inherit;
}

.login-submit:hover { background: var(--or); transform: translateY(-2px); }
.login-submit:disabled { background: #999; cursor: not-allowed; transform: none; }

.login-hint {
  margin-top: 1.8rem;
  font-size: 0.95rem;
}

.login-hint a {
  color: var(--bleu);
  text-decoration: none;
  font-weight: 600;
}

.login-hint a:hover { color: var(--or); text-decoration: underline; }

@media (max-width: 480px) {
  .login-card { padding: 2.2rem 1.5rem; }
  .login-card h2 { font-size: 1.6rem; }
}

/* ===========================================================================
   v0.6.0 — Encarts pédagogiques réutilisables (1A et 2A)
   =============================================================================
   5 types d'encarts pour enrichir les pages cours, posés directement dans
   le HTML statique ou dans les templates Jinja2. Pattern :

     <aside class="encart encart-retenir">
       <div class="encart-titre">📌 À retenir</div>
       <div class="encart-corps">…</div>
     </aside>

   Variantes :
     .encart-retenir     → bleu Sorbonne — résumé en fin de section
     .encart-piege       → orange         — erreur fréquente
     .encart-vocabulaire → vert           — terme technique
     .encart-astuce      → violet         — astuce dev/devtools
     .encart-defi        → or             — mini-défi mental
============================================================================= */
.encart {
  display: block;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  border-left: 5px solid;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-size: 0.97rem;
  line-height: 1.55;
}

.encart .encart-titre {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.encart .encart-corps { color: var(--gris-fonce, #333); }
.encart .encart-corps p:first-child { margin-top: 0; }
.encart .encart-corps p:last-child  { margin-bottom: 0; }
.encart .encart-corps code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
}
.encart .encart-corps ul { margin: 0.4rem 0 0.2rem 1.2rem; }
.encart .encart-corps li { margin: 0.15rem 0; }

/* Variantes par type */
.encart-retenir     { border-left-color: var(--bleu, #003366);   background: #f3f7fb; }
.encart-retenir     .encart-titre { color: var(--bleu, #003366); }

.encart-piege       { border-left-color: var(--or, #ff6f00);     background: #fff8f0; }
.encart-piege       .encart-titre { color: #c75300; }

.encart-vocabulaire { border-left-color: var(--vert, #2e7d32);   background: #f1f8f2; }
.encart-vocabulaire .encart-titre { color: var(--vert, #2e7d32); }

.encart-astuce      { border-left-color: var(--violet, #667eea); background: #f5f3fb; }
.encart-astuce      .encart-titre { color: #4c5db8; }

.encart-defi        { border-left-color: #d4a017;                 background: #fdf9ec; }
.encart-defi        .encart-titre { color: #a07b00; }

/* ===========================================================================
   v0.6.0 — Schémas SVG pédagogiques inline
   =============================================================================
   Bloc-conteneur pour encadrer un SVG explicatif avec une légende, posé dans
   les pages 1A/2A. Pattern :

     <figure class="schema">
       <svg viewBox="0 0 800 300">…</svg>
       <figcaption>Légende du schéma</figcaption>
     </figure>
============================================================================= */
.schema {
  margin: 1.6rem 0;
  padding: 1.4rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.schema svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.schema figcaption {
  margin-top: 0.9rem;
  font-style: italic;
  color: var(--gris-fonce, #555);
  font-size: 0.93rem;
}

/* SVG styles communs (cohérent avec le thème) */
.schema svg .schema-box       { fill: white; stroke: var(--bleu, #003366); stroke-width: 2; }
.schema svg .schema-box-or    { fill: white; stroke: var(--or, #ff6f00);   stroke-width: 2.5; }
.schema svg .schema-text      { font-family: Inter, sans-serif; font-weight: 600; fill: var(--bleu, #003366); }
.schema svg .schema-text-sm   { font-family: Inter, sans-serif; font-size: 13px; fill: #555; }
.schema svg .schema-arrow     { stroke: var(--bleu, #003366); stroke-width: 2.5; fill: none; }
.schema svg .schema-arrow-or  { stroke: var(--or, #ff6f00);   stroke-width: 2.5; fill: none; }
.schema svg .schema-hi        { fill: var(--or, #ff6f00); }
.schema svg .schema-stack     { fill: white; stroke: var(--bleu, #003366); stroke-width: 1.5; }
.schema svg .schema-stack-hi  { fill: rgba(255, 111, 0, 0.15); stroke: var(--or, #ff6f00); stroke-width: 2; }

/* ===========================================================================
   v0.6.0 — Cheat-sheet imprimable (mode @media print)
   =============================================================================
   Page A4 condensée : retire header/footer/nav, force le format A4 portrait,
   réduit les tailles de police, optimise pour impression noir-et-blanc.
============================================================================= */
.cheat-sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}
.cheat-sheet h1 { font-size: 1.6rem; margin: 0 0 0.4rem; }
.cheat-sheet h2 { font-size: 1.15rem; margin: 1.2rem 0 0.5rem; }
.cheat-sheet h3 { font-size: 1rem; margin: 0.8rem 0 0.3rem; color: var(--or, #ff6f00); }
.cheat-sheet .cs-meta { font-size: 0.85rem; color: #666; margin-bottom: 1rem; }
.cheat-sheet .cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 0.6rem 0;
}
.cheat-sheet .cs-card {
  background: #f8f9fb;
  border-left: 3px solid var(--bleu, #003366);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.cheat-sheet .cs-card strong { color: var(--bleu, #003366); }
.cheat-sheet ul { margin: 0.3rem 0 0.5rem 1.2rem; font-size: 0.92rem; }
.cheat-sheet li { margin: 0.15rem 0; }
.cheat-sheet table {
  font-size: 0.88rem;
  margin: 0.5rem 0;
  border-collapse: collapse;
  width: 100%;
}
.cheat-sheet table th, .cheat-sheet table td {
  border: 1px solid #ddd;
  padding: 0.35rem 0.6rem;
  text-align: left;
}
.cheat-sheet table th { background: var(--bleu, #003366); color: white; font-size: 0.85rem; }

.cs-print-btn {
  display: inline-block;
  background: var(--bleu, #003366);
  color: white;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.95rem;
  margin: 0.5rem 0 1rem;
}
.cs-print-btn:hover { background: var(--or, #ff6f00); }

@media print {
  header, footer, nav, .cs-print-btn { display: none !important; }
  body { background: white; padding: 0; margin: 0; }
  .cheat-sheet { box-shadow: none; padding: 0.5cm; max-width: 100%; }
  .cheat-sheet h1 { font-size: 14pt; }
  .cheat-sheet h2 { font-size: 11pt; }
  .cheat-sheet h3 { font-size: 10pt; }
  .cheat-sheet, .cheat-sheet * { font-size: 9pt; line-height: 1.3; }
  .cheat-sheet table th { background: #ddd !important; color: black !important; -webkit-print-color-adjust: exact; }
  @page { size: A4; margin: 1.2cm; }
}

/* ===========================================================================
   v0.6.0 — Mini-jeu HTTP Codes (carte unique + scoring)
============================================================================= */
.jeu-codes-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}
.jeu-codes-intro h1 { color: var(--bleu, #003366); margin-bottom: 0.5rem; }
.jeu-codes-intro p { color: var(--gris-fonce, #555); margin-bottom: 1.5rem; }

.jeu-codes-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1rem 0 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.jeu-codes-stats .stat-block {
  background: white;
  padding: 0.8rem 1.4rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.jeu-codes-stats .stat-label { color: #666; font-size: 0.85rem; display: block; font-weight: 400; }
.jeu-codes-stats .stat-value { color: var(--bleu, #003366); font-size: 1.6rem; }
.jeu-codes-stats .stat-timer { color: var(--rouge, #c62828); }

.jeu-codes-card {
  background: white;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  margin: 1.5rem 0;
}
.jeu-codes-card .code-display {
  font-size: 5rem;
  font-weight: 800;
  color: var(--bleu, #003366);
  font-family: 'Courier New', monospace;
  margin: 0.5rem 0;
  letter-spacing: 0.1em;
}
.jeu-codes-card .code-category {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.jeu-codes-card .cat-2xx { background: rgba(46, 125, 50, 0.15); color: var(--vert, #2e7d32); }
.jeu-codes-card .cat-3xx { background: rgba(102, 126, 234, 0.15); color: #4c5db8; }
.jeu-codes-card .cat-4xx { background: rgba(255, 111, 0, 0.15);  color: #c75300; }
.jeu-codes-card .cat-5xx { background: rgba(198, 40, 40, 0.15);  color: var(--rouge, #c62828); }

.jeu-codes-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.jeu-codes-options button {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  color: var(--gris-fonce, #333);
}
.jeu-codes-options button:hover:not(:disabled) { border-color: var(--bleu, #003366); transform: translateY(-1px); }
.jeu-codes-options button.correct  { background: rgba(46, 125, 50, 0.12); border-color: var(--vert, #2e7d32); color: var(--vert, #2e7d32); }
.jeu-codes-options button.wrong    { background: rgba(198, 40, 40, 0.10); border-color: var(--rouge, #c62828); color: var(--rouge, #c62828); }
.jeu-codes-options button:disabled { cursor: default; }

.jeu-codes-final {
  background: white;
  border-radius: 24px;
  padding: 3rem 2rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}
.jeu-codes-final h2 { color: var(--bleu, #003366); margin-bottom: 1rem; }
.jeu-codes-final .score-final { font-size: 4rem; font-weight: 800; color: var(--or, #ff6f00); margin: 1rem 0; }
.jeu-codes-final button {
  background: var(--bleu, #003366);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 1rem;
}
.jeu-codes-final button:hover { background: var(--or, #ff6f00); }