/* ═══════════════════════════════════════════════════════════════════
   LA TECHNOLOGIE VIENT À VOUS — Design System Global
   style.css — v1.0
   Site : latechnologievientavous.free.fr
   Auteur : Professeur de Technologie

   TABLE DES MATIÈRES
   ──────────────────────────────────────────────────────────────────
   01. VARIABLES CSS (tokens de design)
   02. RESET & BASE
   03. TYPOGRAPHIE
   04. MISE EN PAGE (layout, conteneurs)
   05. COMPOSANT — Barre de navigation
   06. COMPOSANT — Hero (page d'accueil)
   07. COMPOSANT — Grille des catégories
   08. COMPOSANT — Fil d'Ariane
   09. COMPOSANT — Page de cours (sidebar + contenu)
   10. COMPOSANT — Blocs de code
   11. COMPOSANT — Boutons
   12. COMPOSANT — Étiquettes (tags)
   13. COMPOSANT — Footer
   14. UTILITAIRES
   15. MODE VIDÉOPROJECTEUR (overrides)
   16. RESPONSIVE (tablettes & mobiles)
   ═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   01. VARIABLES CSS
   Modifier ici pour changer tout le design d'un coup.
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Couleurs principales (mode Retro-Geek par défaut) ── */
  --bg-root        : #090d09;   /* fond de page, quasi-noir verdâtre        */
  --bg-surface     : #0d120d;   /* cartes, panneaux                         */
  --bg-nav         : #0f150f;   /* barre de navigation                      */
  --bg-topbar      : #0b100b;   /* bandeau système en haut de page          */
  --bg-code        : #060c06;   /* blocs de code                            */
  --bg-inset       : #0a0f0a;   /* zones enfoncées, code en ligne           */

  /* ── Texte ── */
  --text-primary   : #3fdf6f;   /* texte courant vert vif                   */
  --text-bright    : #4afa6a;   /* titres, éléments actifs                  */
  --text-mid       : #2db85a;   /* texte secondaire, items de liste         */
  --text-dim       : #1a6b35;   /* texte très discret, décoration           */
  --text-accent    : #ffb300;   /* ambre — titres de cartes, accents        */
  --text-white     : #e8ffe8;   /* texte clair sur fond très sombre         */

  /* ── Bordures ── */
  --border-default : #1a3d1a;   /* bordure standard                         */
  --border-hover   : #2a5a2a;   /* bordure au survol                        */
  --border-active  : #4afa6a;   /* bordure élément actif/sélectionné        */
  --border-accent  : #3a2c00;   /* bordure lien YouTube (ambre sombre)      */

  /* ── Typographie ── */
  --font-main      : Verdana, Geneva, Tahoma, sans-serif;   /* dyslexia-friendly */
  --font-code      : 'Courier New', Courier, monospace;     /* blocs de code     */

  /* ── Tailles de police ── */
  --fs-xs          : 1.25rem;   /* ×2 — topbar, étiquettes                  */
  --fs-sm          : 1.375rem;  /* ×2 — nav links, items de liste           */
  --fs-base        : 1.5rem;    /* ×2 — texte courant                       */
  --fs-md          : 1.625rem;  /* ×2 — nav brand, titres secondaires       */
  --fs-lg          : 1.75rem;   /* ×2 — titres de contenu                   */
  --fs-xl          : 2rem;      /* ×2 — titre d'activité                    */
  --fs-2xl         : 2.375rem;  /* ×2 — titre hero                          */
  --fs-logo        : 2.5rem;    /* ×2 — logo texte navbar                   */

  /* ── Espacement ── */
  --space-xs       : 0.25rem;   /* 4px  */
  --space-sm       : 0.5rem;    /* 8px  */
  --space-md       : 0.75rem;   /* 12px */
  --space-lg       : 1rem;      /* 16px */
  --space-xl       : 1.25rem;   /* 20px */
  --space-2xl      : 1.5rem;    /* 24px */
  --space-3xl      : 2rem;      /* 32px */

  /* ── Bordures arrondies ── */
  --radius-sm      : 2px;
  --radius-md      : 4px;
  --radius-lg      : 6px;

  /* ── Transitions ── */
  --transition     : 150ms ease;

  /* ── Largeur maximale du contenu ── */
  --max-width      : 1100px;
  --max-width-cours: 960px;

  /* ── Émojis par catégorie (référence, pas utilisés en CSS) ──
     5ème       : 🔧
     4ème       : 💻
     3ème       : 🤖
     Robotique  : 🦾
     EVARS      : 💝                                           */
}


/* ══════════════════════════════════════════════════════════════════
   02. RESET & BASE
   ══════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
}

body {
  background-color : var(--bg-root);
  color            : var(--text-primary);
  font-family      : var(--font-main);
  font-size        : var(--fs-base);
  line-height      : 1.7;
  min-height       : 100vh;
  /* Anti-aliasing pour Verdana sur écrans LCD */
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

a {
  color           : var(--text-mid);
  text-decoration : none;
  transition      : color var(--transition), border-color var(--transition);
}

a:hover,
a:focus {
  color : var(--text-bright);
}

a:focus-visible {
  outline        : 2px solid var(--border-active);
  outline-offset : 3px;
  border-radius  : var(--radius-md);
}

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

ul, ol {
  list-style : none;
}

/* Curseur clignotant — décoration Retro-Geek */
.cursor-blink::after {
  content   : '_';
  animation : blink 1.2s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════
   03. TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family : var(--font-main);
  font-weight : bold;
  line-height : 1.3;
  color       : var(--text-accent);
  letter-spacing: 1px;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl);  }
h3 { font-size: var(--fs-lg);  }
h4 { font-size: var(--fs-md);  }
h5 { font-size: var(--fs-base);}
h6 { font-size: var(--fs-sm);  }

p {
  color       : var(--text-mid);
  font-size   : var(--fs-base);
  line-height : 1.8;
  margin-bottom: var(--space-md);
}

/* Texte en surbrillance verte */
strong, b {
  color       : var(--text-bright);
  font-weight : bold;
}

/* Petite mise en évidence ambre */
.highlight {
  color       : var(--text-accent);
  font-weight : bold;
}

/* Bandeau système (topbar décoratif) */
.topbar {
  background   : var(--bg-topbar);
  border-bottom: 1px solid var(--border-default);
  padding      : 3px var(--space-lg);
  color        : var(--text-dim);
  font-size    : var(--fs-xs);
  letter-spacing: 3px;
  text-align   : center;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════
   04. MISE EN PAGE
   ══════════════════════════════════════════════════════════════════ */

.container {
  width     : 100%;
  max-width : var(--max-width);
  margin    : 0 auto;
  padding   : 0 var(--space-lg);
}

.container--cours {
  max-width : var(--max-width-cours);
}

/* Séparateur horizontal style terminal */
.divider {
  border     : none;
  border-top : 1px solid var(--border-default);
  margin     : var(--space-xl) 0;
}


/* ══════════════════════════════════════════════════════════════════
   05. COMPOSANT — Barre de navigation
   ══════════════════════════════════════════════════════════════════ */

.navbar {
  background   : var(--bg-nav);
  border-bottom: 1px solid var(--border-default);
  position     : sticky;
  top          : 0;
  z-index      : 100;
}

.navbar__inner {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : var(--space-xs);
  padding     : var(--space-sm) var(--space-lg);
  max-width   : var(--max-width);
  margin      : 0 auto;
}

/* Logo texte dans la navbar */
.navbar__brand {
  color          : var(--text-bright);
  font-size      : var(--fs-md);
  font-weight    : bold;
  letter-spacing : 1px;
  margin-right   : auto;
  white-space    : nowrap;
}

.navbar__brand span {
  color : var(--text-accent);
}

/* Liens de navigation */
.navbar__link {
  color      : var(--text-mid);
  font-size  : var(--fs-sm);
  padding    : var(--space-xs) var(--space-sm);
  border     : 1px solid transparent;
  border-radius: var(--radius-md);
  transition : color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.navbar__link:hover,
.navbar__link:focus {
  color         : var(--text-bright);
  border-color  : var(--border-hover);
}

.navbar__link--active {
  color         : var(--text-bright);
  border-color  : var(--border-active);
}

/* Lien YouTube — vert vif */
.navbar__link--youtube {
  color         : #4afa6a;
  border-color  : rgba(74,250,106,0.2);
}

.navbar__link--youtube:hover,
.navbar__link--youtube:focus {
  color         : #4afa6a;
  border-color  : rgba(74,250,106,0.6);
}

/* Liens de navigation — disposition horizontale (desktop) */
.navbar__links {
  display     : flex;
  align-items : center;
  gap         : var(--space-xs);
}

/* Menu hamburger mobile (JS requis pour toggle) */
.navbar__toggle {
  display     : none;
  background  : transparent;
  border      : 1px solid var(--border-default);
  color       : var(--text-primary);
  cursor      : pointer;
  padding     : var(--space-xs) var(--space-sm);
  font-size   : var(--fs-lg);
  border-radius: var(--radius-md);
}


/* ══════════════════════════════════════════════════════════════════
   06. COMPOSANT — Hero (page d'accueil)
   ══════════════════════════════════════════════════════════════════ */

.hero {
  padding      : var(--space-3xl) var(--space-lg) var(--space-2xl);
  text-align   : center;
  border-bottom: 1px solid var(--border-default);
}

/* Cadre logo */
.hero__logo-frame {
  display       : inline-block;
  border        : 2px solid var(--border-default);
  padding       : var(--space-md) var(--space-xl);
  margin-bottom : var(--space-xl);
  background    : var(--bg-surface);
}

.hero__logo {
  height     : 80px;
  width      : auto;
  margin     : 0 auto;
  /* Halo vert subtil autour du logo */
  filter     : drop-shadow(0 0 8px rgba(74, 250, 106, 0.35));
}

.hero__title {
  color          : var(--text-accent);
  font-size      : var(--fs-2xl);
  letter-spacing : 2px;
  margin-bottom  : var(--space-sm);
  text-transform : uppercase;
}

.hero__subtitle {
  color          : var(--text-mid);
  font-size      : var(--fs-sm);
  letter-spacing : 2px;
  text-transform : uppercase;
}


/* ══════════════════════════════════════════════════════════════════
   07. COMPOSANT — Grille des catégories
   ══════════════════════════════════════════════════════════════════ */

.cat-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : var(--space-md);
  padding               : var(--space-lg);
}

.cat-card {
  background    : var(--bg-surface);
  border        : 1px solid var(--border-default);
  padding       : var(--space-md);
  transition    : border-color var(--transition);
  cursor        : pointer;
}

.cat-card:hover,
.cat-card:focus-within {
  border-color : var(--border-hover);
}

.cat-card__header {
  display        : flex;
  align-items    : center;
  gap            : var(--space-sm);
  color          : var(--text-accent);
  font-size      : var(--fs-sm);
  font-weight    : bold;
  border-bottom  : 1px solid var(--border-default);
  padding-bottom : var(--space-sm);
  margin-bottom  : var(--space-sm);
  letter-spacing : 1px;
  text-transform : uppercase;
}

.cat-card__emoji {
  font-size   : 1rem;
  line-height : 1;
  flex-shrink : 0;
}

.cat-card__item {
  color       : var(--text-mid);
  font-size   : var(--fs-xs);
  padding     : 2px 0;
  line-height : 1.7;
}

.cat-card__item::before {
  content : '> ';
  color   : var(--text-dim);
}

/* Carte "Accès rapide" — variante pointillés */
.cat-card--quick {
  border-style : dashed;
  border-color : var(--border-hover);
}

.cat-card--quick .cat-card__header {
  color : var(--text-bright);
}

.cat-card__link-accent {
  color       : var(--text-accent);
  font-size   : var(--fs-xs);
  padding     : 3px 0;
  line-height : 1.8;
  display     : block;
}

.cat-card__link-accent::before {
  content : '> ';
  color   : var(--text-dim);
}


/* ══════════════════════════════════════════════════════════════════
   07b. COMPOSANT — Menu dépliant Retro-Geek (catégorie cards)
   ══════════════════════════════════════════════════════════════════ */

/* Bouton toggle "Demi-groupe" */
.cat-submenu-toggle {
  display       : flex;
  align-items   : center;
  gap           : var(--space-xs);
  width         : 100%;
  background    : none;
  border        : none;
  text-align    : left;
  cursor        : pointer;
  color         : var(--text-mid);
  font-family   : var(--font-main);
  font-size     : var(--fs-xs);
  padding       : 4px 0;
  letter-spacing: 0.5px;
  user-select   : none;
  transition    : color var(--transition);
}

.cat-submenu-toggle:hover,
.cat-submenu-toggle:focus {
  color : var(--text-bright);
  outline: none;
}

/* Puce █ fixe au repos, clignotante quand ouvert */
.cat-submenu-bullet {
  color       : var(--text-accent);
  font-family : var(--font-code);
  font-size   : var(--fs-xs);
  flex-shrink : 0;
}

.cat-submenu-toggle.open .cat-submenu-bullet {
  animation : blink 1.2s step-end infinite;
}

/* Flèche ▶ qui pivote à 90° quand ouvert */
.cat-submenu-arrow {
  color       : var(--text-dim);
  font-family : var(--font-code);
  margin-left : auto;
  font-size   : var(--fs-xs);
  transition  : transform var(--transition);
}

.cat-submenu-toggle.open .cat-submenu-arrow {
  transform : rotate(90deg);
}

/* Contenu du menu (masqué par défaut) */
.cat-submenu {
  display      : none;
  padding-left : var(--space-md);
  margin       : 2px 0 var(--space-xs);
  border-left  : 1px solid var(--border-default);
}

.cat-submenu.open {
  display : block;
}

/* Items de séquences sans lien actif — grisés */
.cat-card__item--inactive {
  opacity : 0.4;
}


/* ══════════════════════════════════════════════════════════════════
   07c. COMPOSANT — Cadre écran CRT / Minitel / Pip-Boy
   ══════════════════════════════════════════════════════════════════ */

.screen-frame {
  max-width     : 1100px;
  margin        : var(--space-3xl) auto;
  border        : 2px solid var(--border-default);
  border-radius : 16px;
  overflow      : hidden;
  box-shadow    :
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    inset 0 0 120px rgba(63, 223, 111, 0.03),
    0 0 28px rgba(63, 223, 111, 0.08),
    0 10px 40px rgba(0, 0, 0, 0.65);
}


/* ══════════════════════════════════════════════════════════════════
   07d. VARIANTE — Cartes catégories ambre-bronze
   (5ème, 4ème, Club Robotique, EVARS)
   ══════════════════════════════════════════════════════════════════ */

.cat-card--amber .cat-card__header {
  color : var(--text-accent);
}

/* Texte problématique sous les séquences */
.submenu-problematique {
  font-size     : 0.8em;
  color         : rgba(63,223,111,0.7);
  font-style    : italic;
  margin-bottom : 0.5rem;
  line-height   : 1.4;
}


/* ══════════════════════════════════════════════════════════════════
   08. COMPOSANT — Fil d'Ariane
   ══════════════════════════════════════════════════════════════════ */

.breadcrumb {
  background   : var(--bg-topbar);
  padding      : var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
  color        : var(--text-dim);
  font-size    : var(--fs-xs);
  letter-spacing: 0.5px;
}

.breadcrumb__sep {
  color   : var(--text-dim);
  margin  : 0 var(--space-xs);
}

.breadcrumb__item {
  color : var(--text-bright);
}

.breadcrumb__current {
  color       : var(--text-accent);
  font-weight : bold;
}


/* ══════════════════════════════════════════════════════════════════
   09. COMPOSANT — Page de cours (sidebar + contenu)
   ══════════════════════════════════════════════════════════════════ */

/* Mise en page à deux colonnes */
.cours-layout {
  display               : grid;
  grid-template-columns : 200px 1fr;
  min-height            : calc(100vh - 120px);
}

/* ── Sidebar de navigation ── */
.cours-sidebar {
  background   : var(--bg-surface);
  border-right : 1px solid var(--border-default);
  padding      : var(--space-md);
  position     : sticky;
  top          : 42px;    /* hauteur navbar */
  height       : calc(100vh - 42px);
  overflow-y   : auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.cours-sidebar::-webkit-scrollbar       { width: 4px; }
.cours-sidebar::-webkit-scrollbar-track { background: transparent; }
.cours-sidebar::-webkit-scrollbar-thumb { background-color: var(--border-default); }

.sidebar__title {
  color          : var(--text-accent);
  font-size      : var(--fs-xs);
  font-weight    : bold;
  letter-spacing : 1px;
  text-transform : uppercase;
  margin-bottom  : var(--space-sm);
}

.sidebar__group {
  color          : var(--text-mid);
  font-size      : var(--fs-xs);
  letter-spacing : 1px;
  text-transform : uppercase;
  margin         : var(--space-sm) 0 var(--space-xs);
}

.sidebar__group--active {
  color : var(--text-accent);
}

.sidebar__item {
  display     : block;
  color       : var(--text-mid);
  font-size   : var(--fs-xs);
  padding     : 2px 0 2px var(--space-sm);
  line-height : 1.8;
  transition  : color var(--transition);
}

.sidebar__item::before {
  content : '├─ ';
  color   : var(--text-dim);
  font-family: var(--font-code);
}

.sidebar__item:last-of-type::before {
  content : '└─ ';
}

.sidebar__item:hover,
.sidebar__item:focus {
  color : var(--text-bright);
}

.sidebar__item--active {
  color       : var(--text-bright);
  font-weight : bold;
}

.sidebar__item--active::before {
  color : var(--text-bright);
}

/* ── Zone de contenu principal ── */
.cours-content {
  padding : var(--space-lg);
}

.cours-content__title {
  color          : var(--text-accent);
  font-size      : var(--fs-xl);
  font-weight    : bold;
  border-bottom  : 1px solid var(--border-default);
  padding-bottom : var(--space-sm);
  margin-bottom  : var(--space-md);
  letter-spacing : 1px;
}

.cours-content__section-label {
  color          : var(--text-bright);
  font-size      : var(--fs-sm);
  font-weight    : bold;
  margin-bottom  : var(--space-xs);
  letter-spacing : 1px;
}

.cours-content__text {
  color       : var(--text-mid);
  font-size   : var(--fs-sm);
  line-height : 1.9;
}

/* Bloc PDF intégré */
.pdf-embed {
  width         : 100%;
  height        : 500px;
  border        : 1px solid var(--border-default);
  margin        : var(--space-md) 0;
  background    : var(--bg-inset);
}

/* Bloc vidéo YouTube responsive */
.video-wrapper {
  position      : relative;
  padding-bottom: 56.25%; /* 16:9 */
  height        : 0;
  overflow      : hidden;
  margin        : var(--space-md) 0;
  border        : 1px solid var(--border-default);
}

.video-wrapper iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
  border   : none;
}


/* ══════════════════════════════════════════════════════════════════
   10. COMPOSANT — Blocs de code
   Conservent Courier New même en mode Vidéoproj.
   ══════════════════════════════════════════════════════════════════ */

.code-block {
  background    : var(--bg-code);
  border        : 1px solid var(--border-default);
  padding       : var(--space-md);
  margin        : var(--space-md) 0;
  font-family   : var(--font-code);
  font-size     : var(--fs-sm);
  line-height   : 1.9;
  overflow-x    : auto;
  white-space   : pre;
}

/* Nom de fichier en en-tête du bloc */
.code-block__filename {
  color        : var(--text-dim);
  margin-bottom: var(--space-xs);
  font-size    : var(--fs-xs);
}

/* Coloration syntaxique */
.code-kw   { color: var(--text-accent);  }  /* mots-clés, balises ouvrantes  */
.code-tag  { color: var(--text-bright);  }  /* noms de balises HTML          */
.code-str  { color: #7fe07f;             }  /* chaînes de caractères         */
.code-cmt  { color: var(--text-dim);     }  /* commentaires                  */
.code-num  { color: #a0d4ff;             }  /* nombres                       */
.code-fn   { color: #ffd080;             }  /* noms de fonctions Python      */

/* Code inline dans du texte */
code {
  font-family  : var(--font-code);
  font-size    : 0.9em;
  color        : var(--text-bright);
  background   : var(--bg-inset);
  border       : 1px solid var(--border-default);
  padding      : 1px 5px;
  border-radius: var(--radius-sm);
}


/* ══════════════════════════════════════════════════════════════════
   11. COMPOSANT — Boutons
   ══════════════════════════════════════════════════════════════════ */

.btn {
  display       : inline-block;
  font-family   : var(--font-main);
  font-size     : var(--fs-sm);
  font-weight   : bold;
  padding       : var(--space-sm) var(--space-md);
  border        : 1px solid currentColor;
  border-radius : var(--radius-sm);
  cursor        : pointer;
  background    : transparent;
  text-align    : center;
  letter-spacing: 0.5px;
  transition    : background-color var(--transition), color var(--transition);
  text-transform: uppercase;
}

/* Bouton principal — vert */
.btn--primary {
  color : var(--text-bright);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color : rgba(74, 250, 106, 0.12);
  color            : var(--text-bright);
}

/* Bouton secondaire — ambre (ex: lien vidéo) */
.btn--accent {
  color : var(--text-accent);
}

.btn--accent:hover,
.btn--accent:focus {
  background-color : rgba(255, 179, 0, 0.12);
  color            : var(--text-accent);
}

/* Bouton désactivé */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity : 0.4;
  cursor  : not-allowed;
}


/* ══════════════════════════════════════════════════════════════════
   12. COMPOSANT — Étiquettes (tags / badges)
   ══════════════════════════════════════════════════════════════════ */

.tag {
  display       : inline-block;
  background    : var(--bg-surface);
  border        : 1px solid var(--border-default);
  color         : var(--text-mid);
  font-size     : var(--fs-xs);
  padding       : 2px var(--space-sm);
  border-radius : var(--radius-sm);
  margin-right  : var(--space-xs);
  margin-bottom : var(--space-xs);
  white-space   : nowrap;
}

.tag--accent {
  color        : var(--text-accent);
  border-color : var(--border-accent);
}

/* Groupe de tags */
.tag-group {
  display     : flex;
  flex-wrap   : wrap;
  gap         : var(--space-xs);
  margin      : var(--space-sm) 0;
}


/* ══════════════════════════════════════════════════════════════════
   13. COMPOSANT — Footer
   ══════════════════════════════════════════════════════════════════ */

.footer {
  background    : var(--bg-topbar);
  border-top    : 1px solid var(--border-default);
  padding       : var(--space-sm) var(--space-lg);
  text-align    : center;
  color         : var(--text-dim);
  font-size     : var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════
   14. UTILITAIRES
   ══════════════════════════════════════════════════════════════════ */

.sr-only {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0,0,0,0);
  white-space: nowrap;
  border    : 0;
}

.text-accent  { color: var(--text-accent) !important; }
.text-bright  { color: var(--text-bright) !important; }
.text-dim     { color: var(--text-dim)    !important; }

.mt-sm  { margin-top: var(--space-sm);  }
.mt-md  { margin-top: var(--space-md);  }
.mt-lg  { margin-top: var(--space-lg);  }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }


/* ══════════════════════════════════════════════════════════════════
   15. MODE VIDÉOPROJECTEUR
   Activé en ajoutant la classe .mode-vp sur <body>
   ou en passant ?vp=1 dans l'URL (géré par JS dans chaque page).
   ══════════════════════════════════════════════════════════════════ */

body.mode-vp {
  /* Fond blanc, textes sombres, police agrandie */
  --bg-root      : #ffffff;
  --bg-surface   : #f5f5f5;
  --bg-nav       : #1a1a2e;
  --bg-topbar    : #f0f0f0;
  --bg-code      : #f8f8f8;
  --bg-inset     : #eeeeee;

  --text-primary : #1a1a2e;
  --text-bright  : #1a1a2e;
  --text-mid     : #333333;
  --text-dim     : #666666;
  --text-accent  : #e94560;
  --text-white   : #1a1a2e;

  --border-default: #cccccc;
  --border-hover  : #1a1a2e;
  --border-active : #e94560;
  --border-accent : #e94560;

  /* Tailles de police ×2 puis ×1.2 pour lisibilité à distance */
  --fs-xs   : 1.8rem;
  --fs-sm   : 2.1rem;
  --fs-base : 2.4rem;
  --fs-md   : 2.7rem;
  --fs-lg   : 3rem;
  --fs-xl   : 3.6rem;
  --fs-2xl  : 4.5rem;
}

/* Smileys ×2 en mode VP */
body.mode-vp .cat-card__emoji {
  font-size : 2rem;
}

/* Grille pleine largeur en mode VP */
body.mode-vp .container {
  max-width : 100%;
}

/* Cadre CRT désactivé en mode VP */
body.mode-vp .screen-frame {
  max-width     : 100%;
  margin        : 0;
  border-radius : 0;
  box-shadow    : none;
  border-color  : var(--border-default);
}

/* Navbar — texte lisible sur fond navy en mode VP */
body.mode-vp .navbar__link {
  color : #e8ffe8;
}

body.mode-vp .navbar__link:hover,
body.mode-vp .navbar__link:focus {
  color        : #ffffff;
  border-color : #ffffff;
}

body.mode-vp .navbar__link--youtube {
  color : #ffffff;
}

/* Logo masqué en mode VP (override inline style) */
body.mode-vp .navbar__brand img {
  display : none !important;
}

/* Problématique lisible sur fond blanc en VP */
body.mode-vp .submenu-problematique {
  color : rgba(51,51,51,0.7);
}

body.mode-vp .navbar__toggle {
  color        : #e8ffe8;
  border-color : #e8ffe8;
}

/* Le logo retrouve son filtre normal en mode VP */
body.mode-vp .hero__logo {
  filter : none;
}

/* Blocs de code restent en Courier New même en VP */
body.mode-vp .code-block {
  background   : #1a1a2e;
  color        : #e8ffe8;
  border-color : #333366;
}

body.mode-vp code {
  background : #1a1a2e;
  color      : #4afa6a;
}

/* Indicateur visuel mode VP */
body.mode-vp::before {
  content    : 'MODE VIDÉOPROJECTEUR ACTIF';
  display    : block;
  background : #e94560;
  color      : white;
  text-align : center;
  font-size  : 12px;
  font-weight: bold;
  padding    : 4px;
  letter-spacing: 2px;
  position   : sticky;
  top        : 0;
  z-index    : 200;
}


/* ══════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablette (≤ 768px) ── */
@media (max-width: 768px) {

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cours-layout {
    grid-template-columns: 1fr;
  }

  .cours-sidebar {
    position  : static;
    height    : auto;
    border-right : none;
    border-bottom: 1px solid var(--border-default);
  }

  .navbar__toggle {
    display : block;
  }

  .navbar__links {
    display       : none;
    width         : 100%;
    flex-direction: column;
    padding-bottom: var(--space-sm);
  }

  .navbar__links.is-open {
    display : flex;
  }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {

  .cat-grid {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size    : var(--fs-xl);
    letter-spacing: 1px;
  }

  .hero__logo {
    height : 56px;
  }

  .btn {
    display : block;
    width   : 100%;
    margin  : var(--space-xs) 0;
  }

  .cours-content {
    padding: var(--space-sm);
  }

  .pdf-embed {
    height : 300px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   §17 — ACTIVITÉS DIAPORAMA — HEADER (desktop ≥ 768px)
   Reconstruit from scratch — remplace tout header précédent.

   Structure HTML attendue :
     <header class="diapo-header">
       <a href="[racine]" class="diapo-header__home">
         <img class="diapo-header__logo" src="[logo]" alt="…">
       </a>
       <!-- bouton correction présent uniquement sur les pages consignes -->
       <button id="diapo-correction" class="diapo-header__correction">
         🔐 Correction
       </button>
     </header>

   Vérifications transversales :
   - body.mode-vp : fond blanc, textes navy (géré par §15)
   - Mobile (≤ 767px) : règles inchangées, header se réduit proprement
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  .diapo-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0.5rem 1.25rem;
    height          : 56px;
    width           : 100%;
    align-self      : stretch;
    background      : var(--bg-nav);
    border-bottom   : 2px solid var(--border-default);
    flex-shrink     : 0;
    z-index         : 100;
  }

  .diapo-header__home {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    text-decoration : none;
    flex-shrink : 0;
  }

  .diapo-header__logo {
    height     : 36px;
    width      : auto;
    display    : block;
    border     : 1px solid var(--border-default);
    border-radius : var(--radius-md);
    padding    : 3px;
    filter     : drop-shadow(0 0 4px rgba(74, 250, 106, 0.2));
    transition : filter var(--transition);
  }

  .diapo-header__home:hover .diapo-header__logo {
    filter : drop-shadow(0 0 6px rgba(74, 250, 106, 0.5));
    border-color : var(--border-hover);
  }

  .diapo-header__correction {
    background    : transparent;
    color         : var(--text-accent);
    border        : 1px solid var(--border-accent);
    border-radius : var(--radius-md);
    padding       : 0.35rem 0.9rem;
    font-family   : var(--font-main);
    font-size     : 0.85rem;
    font-weight   : 700;
    cursor        : pointer;
    letter-spacing: 0.04em;
    transition    : background var(--transition), border-color var(--transition), color var(--transition);
  }

  .diapo-header__correction:hover {
    background   : rgba(255, 179, 0, 0.12);
    border-color : var(--text-accent);
  }

  .diapo-header__correction:focus-visible {
    outline       : 2px solid var(--text-accent);
    outline-offset: 2px;
  }

  /* Mode vidéoprojecteur */
  body.mode-vp .diapo-header {
    background   : #ffffff;
    border-color : #c0cfe0;
  }

  body.mode-vp .diapo-header__correction {
    color        : #e94560;
    border-color : #e94560;
  }

  body.mode-vp .diapo-header__correction:hover {
    background : rgba(233, 69, 96, 0.08);
  }

}


/* ══════════════════════════════════════════════════════════════════
   §18 — ACTIVITÉS DIAPORAMA — NAVIGATION FLÈCHES (desktop ≥ 768px)
   Barre fixe en bas de la zone de contenu de slide.

   Structure HTML attendue :
     <nav class="diapo-nav" aria-label="Navigation diaporama">
       <button id="diapo-prev" class="diapo-nav__btn" aria-label="Slide précédente">←</button>
       <span   id="diapo-counter" class="diapo-nav__counter" aria-live="polite">1 / N</span>
       <button id="diapo-next" class="diapo-nav__btn" aria-label="Slide suivante">→</button>
     </nav>

   Positionnement : flex-shrink:0 dans un body flex-column.
   Ne masque jamais le contenu.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  .diapo-nav {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 1rem;
    padding         : 0.5rem 1rem;
    height          : 52px;
    width           : 100%;
    align-self      : stretch;
    background      : var(--bg-nav);
    border-top      : 2px solid var(--border-default);
    flex-shrink     : 0;
    z-index         : 100;
  }

  .diapo-nav__btn {
    background    : var(--bg-surface);
    color         : var(--text-primary);
    border        : 1px solid var(--border-default);
    border-radius : var(--radius-md);
    padding       : 0.35rem 1rem;
    font-family   : var(--font-main);
    font-size     : 1.1rem;
    font-weight   : 700;
    cursor        : pointer;
    transition    : background var(--transition), border-color var(--transition), color var(--transition);
    min-width     : 52px;
    line-height   : 1;
  }

  .diapo-nav__btn:hover:not(:disabled) {
    background   : rgba(74, 250, 106, 0.08);
    border-color : var(--border-hover);
    color        : var(--text-bright);
  }

  .diapo-nav__btn:focus-visible {
    outline       : 2px solid var(--border-active);
    outline-offset: 2px;
  }

  .diapo-nav__btn:disabled {
    opacity : 0.3;
    cursor  : not-allowed;
  }

  .diapo-nav__counter {
    font-family : var(--font-main);
    font-size   : 0.95rem;
    color       : var(--text-mid);
    min-width   : 64px;
    text-align  : center;
    font-weight : 600;
    letter-spacing: 0.05em;
  }

  /* Mode vidéoprojecteur */
  body.mode-vp .diapo-nav {
    background   : #f0f4f8;
    border-color : #c0cfe0;
  }

  body.mode-vp .diapo-nav__btn {
    background : #ffffff;
    color      : #1a1a2e;
    border-color : #c0cfe0;
  }

  body.mode-vp .diapo-nav__btn:hover:not(:disabled) {
    background   : #e8f0fe;
    border-color : #1a1a2e;
  }

  body.mode-vp .diapo-nav__counter {
    color : #1a1a2e;
  }

}


/* ══════════════════════════════════════════════════════════════════
   §19 — ACTIVITÉS DIAPORAMA — CORRECTIONS DÉBORDEMENTS (desktop)
   Règles défensives appliquées à l'intérieur des slides diaporama.
   Cibles : tableaux larges, images, textes longs, blocs code, iframes.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Wrapper de scroll horizontal pour les tableaux */
  .diapo-table-scroll {
    overflow-x : auto;
    width      : 100%;
    -webkit-overflow-scrolling : touch;
  }

  /* Images responsive dans les slides */
  .slide img,
  .slide-wrapper img,
  .sv img {
    max-width  : 100%;
    height     : auto;
    display    : block;
  }

  /* Textes longs et URLs */
  .slide,
  .slide-wrapper,
  .sv {
    overflow-wrap : break-word;
    word-break    : break-word;
  }

  /* Blocs pre/code */
  .slide pre,
  .slide-wrapper pre,
  .sv pre {
    overflow-x    : auto;
    white-space   : pre;
    max-width     : 100%;
  }

  /* Iframes (vidéos YouTube, etc.) : ratio 16/9 préservé */
  .slide iframe,
  .slide-wrapper iframe,
  .sv iframe {
    max-width : 100%;
    height    : auto;
    aspect-ratio : 16 / 9;
  }

  /* Empêche tout scroll horizontal non voulu sur la page */
  .slide-wrapper,
  .slideshow,
  .sv {
    overflow-x : hidden;
  }

}


/* ══════════════════════════════════════════════════════════════════
   FIN DU FICHIER — style.css
   ══════════════════════════════════════════════════════════════════ */