/* ============================================================================
   CFRC.FR - STYLESHEET PRINCIPAL
   ============================================================================
   
   VERSION: 2025
   MAINTENANCE: Voir TABLE DES MATIÈRES ci-dessous
   
   ============================================================================
   TABLE DES MATIÈRES
   ============================================================================
   
   1. IMPORTS & FONTS........................... Ligne ~5
   2. ACCESSIBILITY (WCAG 2.1 AAA)............ Ligne ~10
   3. CSS VARIABLES............................ Ligne ~100
      3.1 PALETTE DE BASE
      3.2 MODE CLAIR (Variables)
      3.3 MODE SOMBRE (Variables)
   4. BASE STYLES & RESET...................... Ligne ~420
   5. LAYOUT UTILITIES......................... Ligne ~600
   6. TYPOGRAPHY............................... Ligne ~700
      6.1 Headings, Paragraphs
      6.2 Lists, Links, Focus
   7. NAVIGATION............................... Ligne ~900
      7.1 Top Bar
      7.2 Header / Main Navigation
      7.3 Mobile Menu (Hamburger)
   8. HERO SECTION............................. Ligne ~1500
   9. BUTTONS & FORMS.......................... Ligne ~1700
   10. CARDS & COMPONENTS...................... Ligne ~1900
   11. SECTIONS SPÉCIFIQUES.................... Ligne ~2100
       11.1 About
       11.2 Targets (Accès par public)
       11.3 News & Events
       11.4 Highlight
       11.5 Recommendations
       11.6 First Aid
   12. FOOTER.................................. Ligne ~2600
   13. UTILITIES............................... Ligne ~2800
       13.1 Scroll to Top
       13.2 Animations
       13.3 Scrollbars
   14. CONTACT & FORMS......................... Ligne ~3000
   15. PAGE-SPECIFIC STYLES.................... Ligne ~3200
       15.1 Links Page (TOC, Resources)
       15.2 Congress
       15.3 Navigation (Reanimation, Grand Public)
       15.4 Content Articles
   16. DARK MODE OVERRIDES..................... Ligne ~4000
       16.1 @media prefers-color-scheme: dark
       16.2 html[data-theme="dark"]
   17. RESPONSIVE BREAKPOINTS................. Ligne ~4300
       17.1 Tablet (48rem - 56.25rem)
       17.2 Mobile (37.5rem)
       17.3 Small Screens (32rem)
   
   ============================================================================
   TIPS POUR LA MAINTENANCE
   ============================================================================
   
   • Utiliser Ctrl+F pour chercher par numéro (ex: "11.2 Mobile Menu")
   • Ne pas supprimer les variables CSS (@media blocks)
   • Toujours tester les changements en mode clair ET sombre
   • Vérifier le responsive après chaque modification
   • En cas de doublon, fusionner les règles
   
   ============================================================================
/* ------------------------------------------------------------------
   IMPORT GOOGLE FONTS
------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Amaranth:wght@400;700&display=swap");

/* ------------------------------------------------------------------
   ACCESSIBILITY - WCAG 2.1 AAA
------------------------------------------------------------------ */

/* Skip-to-main link (caché visuellement mais accessible au clavier) */
.skip-to-main-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--palette-blue);
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}

.skip-to-main-link:focus {
  top: 0;
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .skip-to-main-link {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    color: transparent;
    position: absolute;
    top: -40px;
    left: 0;
  }

  .skip-to-main-link:focus {
    outline: 3px solid var(--palette-blue) !important;
    outline-offset: 2px;
    background: var(--palette-blue);
    color: white;
    top: 0;
  }

  .section h1 {
    color: var(--text-primary);
  }

  h2,
  .section h2 {
    color: var(--text-primary) !important;
  }
    color: var(--text-normal);
  .section h3 {
    color: var(--text-primary);
  }

  .content-article strong {
    color: var(--text-primary) !important;
  }

  .page-title {
    color: var(--text-normal);
  }

  .logo-badge {
    background-color: var(--white);
  }
}

/* Focus visible amélioré (WCAG 2.4.7) */
*:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--palette-blue);
  outline-offset: 2px;
}

/* Réduction du mouvement pour accessibilité (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   TABLE DES MATIÈRES
------------------------------------------------------------------ */
/*
   1. VARIABLES & THEME (LIGHT/DARK)
   2. GLOBAL STYLES & RESET
   3. NAVIGATION (Header, Menu, Top bar)
   4. HERO SECTION
   5. SECTIONS & LAYOUT
   6. BUTTONS & FORMS
   7. CARDS & COMPONENTS
   8. FOOTER
   9. DARK MODE (@media prefers-color-scheme: dark)
   10. RESPONSIVE BREAKPOINTS
   
   NOTE: Dark mode est géré par @media (prefers-color-scheme: dark)
         Les styles html[data-theme="dark"] sont réservés pour futur toggle manuel (si implémenté)
*/

/* ------------------------------------------------------------------
   VARIABLES CSS - REFACTORISATION COMPLÈTE
   
   STRUCTURE:
   1. PALETTE DE BASE (Couleurs institutionnelles françaises)
   2. MODE CLAIR (Thème par défaut) - Textes, fonds, composants
   3. TYPOGRAPHIE (Tailles, hauteurs, poids)
   4. LAYOUT (Espacements, largeurs, dimensions)
   5. MODE SOMBRE (Surcharges @media prefers-color-scheme: dark)
   
   MAINTENANCE: Les variables sont organisées par thème pour faciliter
   les modifications. Chaque section a des commentaires explicatifs.
   ------------------------------------------------------------------ */

:root {
  /* =================================================================
     1. PALETTE DE BASE - Couleurs institutionnelles
     ================================================================= */

  /* Couleurs primaires officielles (drapeau français) */
  --palette-blue: #233767; /* Bleu français - couleur primaire */
  --palette-red: #c85247; /* Rouge français - accent */
  --palette-gold: #d4af37; /* Or réservé - accent luxe/important */

  /* Neutrals de base (pour opacités) */
  --white: #ffffff; /* Blanc pur */
  --black: #000000; /* Noir pur */

  /* =================================================================
     2. MODE CLAIR (Thème par défaut - Opacités sur blanc)
     ================================================================= */

  /* --- COULEURS DE TEXTE --- */
  /* Hiérarchie: #222 (titles/crucial), #666 (body), plus clair pour secondary */
  --text-primary: #222222; /* Titres, texte crucial, forte lisibilité */
  --text-normal: #666666; /* Texte corps, texte régulier */
  --text-secondary: #888888; /* Texte moins important, métadonnées */
  --text-tertiary: #aaaaaa; /* Texte très léger, indices */
  --text-disabled: #cccccc; /* Texte pour éléments désactivés */

  /* --- FONDS (opacités sur blanc) --- */
  /* Hiérarchie d'élévation via opacités : plus clair = plus en avant */
  --bg-primary: rgba(0, 0, 0, 0.02); /* Très clair (fond principal page) */
  --bg-secondary: rgba(
    0,
    0,
    0,
    0.05
  ); /* Léger (sections alt-1, secondary cards) */
  --bg-tertiary: rgba(0, 0, 0, 0.08); /* Plus contrasté (sections alt-0 alt) */
  --bg-section-alt-0: var(--bg-primary); /* Sections paires */
  --bg-section-alt-1: var(--bg-secondary); /* Sections impaires */

  /* --- COMPOSANTS --- */
  --card-bg: rgba(
    255,
    255,
    255,
    0.87
  ); /* Cartes (blanc adouci, élévation maximale) */
  --card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04),
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.06);

  /* --- LIENS ET BOUTONS --- */
  --link: var(--palette-blue); /* Lien normal */
  --link-hover: var(--palette-red); /* Lien survolé */

  --btn-primary-bg: var(--palette-red); /* Bouton primaire (fond rouge) */
  --btn-primary-text: rgba(
    255,
    255,
    255,
    0.87
  ); /* Bouton primaire (texte blanc adouci) */
  --btn-primary-hover: #b8403a; /* Bouton primaire hover */
  --btn-primary-bg-hover: #b8403a; /* Bouton primaire fond au survol */

  --btn-secondary-bg: rgba(
    255,
    255,
    255,
    0.87
  ); /* Bouton secondaire (fond blanc adouci) */
  --btn-secondary-text: var(
    --palette-blue
  ); /* Bouton secondaire (texte bleu) */
  --btn-secondary-hover: #e3e7f5; /* Bouton secondaire hover */

  /* --- BORDURES --- */
  --border-subtle: rgba(0, 0, 0, 0.08); /* Bordures discrètes */
  --border-color: #d0d3da; /* Bordures standard */

  /* --- HEADER / NAVIGATION --- */
  --header-bg: var(--palette-blue); /* Header fond bleu */
  --header-text: rgba(255, 255, 255, 0.87); /* Header texte blanc adouci */
  --topbar-bg: #141d33; /* Top bar fond très foncé */
  --topbar-text: #f9fbff; /* Top bar texte blanc cassé */

  /* --- ALERTES (Mode clair - Bootstrap style) --- */
  --alert-success-bg: #d4edda; /* Fond succès (vert clair) */
  --alert-success-border: #28a745; /* Bordure succès */
  --alert-success-text: #155724; /* Texte succès */

  --alert-danger-bg: #f8d7da; /* Fond danger (rose clair) */
  --alert-danger-border: #dc3545; /* Bordure danger */
  --alert-danger-text: #721c24; /* Texte danger */

  --alert-info-bg: #e7f3ff; /* Fond info (bleu très clair) */
  --alert-info-border: var(--palette-blue); /* Bordure info */
  --alert-info-text: #122033; /* Texte info */

  /* --- AUTRES --- */
  --gray-inactive: #b0b5bf; /* Gris pour éléments inactifs */
  --footer-text: #f5f6fa; /* Texte footer (blanc cassé) */

  /* =================================================================
     3. TYPOGRAPHIE (Partagée light/dark)
     ================================================================= */

  --font-family-base: "Roboto", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-family-display: "Amaranth", sans-serif;

  --line-height-base: 1.6; /* Hauteur de ligne standard (light) */
  --line-height-tight: 1.4; /* Hauteur serrée pour titres */
  --line-height-relaxed: 1.8; /* Hauteur relâchée pour lisibilité */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-bold-dark: 600; /* Plus léger en mode sombre (voir @media) */

  /* Tailles de texte clamp() pour responsive */
  --h1-size: clamp(1.8rem, 2.4vw, 2.3rem);
  --h2-size: clamp(1.5rem, 2vw, 1.8rem);
  --h3-size: clamp(1.2rem, 1.5vw, 1.5rem);

  /* =================================================================
     4. LAYOUT - Espacements et dimensions
     ================================================================= */

  /* --- CONTENEUR --- */
  --page-max-width: 75rem; /* 1200px */
  --page-max-width-narrow: 68.75rem; /* 1100px - pour containers légèrement plus étroits */
  --page-horizontal-padding: 1rem; /* Padding gauche/droite page */

  /* --- SECTIONS --- */
  --section-padding-y: 1.7rem; /* Padding vertical sections */

  /* --- HEADER --- */
  --header-padding-y: 0.5rem;
  --nav-padding-y: 0.75rem;
  --nav-gap: 1rem;
  --nav-group-gap: 1.7rem;
  --topbar-min-height: 2rem;
  --topbar-padding-y: 0.3rem;
  --topbar-font-size: 0.8rem;

  /* --- BADGE LOGO --- */
  --badge-height: 3.75rem; /* 60px */
  --badge-radius: 0.875rem; /* ~14px */
  --badge-padding-y: 0.375rem; /* 6px */
  --badge-padding-x: 0.625rem; /* 10px */
  --logo-height: 3rem; /* 48px */

  /* --- HERO --- */
  --hero-min-height: 25rem; /* 400px */

  /* --- CARDS --- */
  --radius-card: 0.75rem; /* 12px */
  --radius-badge: 0.875rem;

  /* =================================================================
     5. ALIASES POUR COMPATIBILITÉ (Variables anciennes pointant aux nouvelles)
     ================================================================= */

  /* Dégradés et variables héritées */
  --white-very-light: #f9f9fb; /* Blanc cassé (boutons) */
  --white-off: #f5f6fa; /* Blanc très doux (fonds) */
  --white-pale: #e3e7f5; /* Blanc pâle (hover) */
  --blue-light: #3f5487; /* Bleu clair (dégradés) */
  --blue-dark: #141d33; /* Bleu très foncé (topbar) */

  /* Anciennes variables - aliases vers nouvelles */
  --text-muted: var(--text-secondary); /* Alias pour compatibilité */
  --card-bg-secondary: rgba(
    0,
    0,
    0,
    0.07
  ); /* Cards légèrement plus foncées en sections alt-1 */
  --badge-bg: rgba(255, 255, 255, 0.87); /* Fond blanc adouci pour badge */
  --badge-border: var(--border-subtle); /* Alias pour compatibilité */
}

/* ------------------------------------------------------------------
   MODE SOMBRE - Variables surchargées (@media prefers-color-scheme: dark)
   
   DESIGN PHILOSOPHY (Dark Mode):
   - Fonds: #121212 (primary) et #2D3C73 (secondary/hierachie)
   - Textes: Blanc avec opacités (87% crucial, 60% normal, 38% tertiary)
   - Pas de blanc pur (#fff), tout en rgba(255,255,255,opacity)
   - Couleurs désaturées (white 40% overlay sur blue/red - Material Design)
   - Font-weight: 600 (pas 700) pour éviter sur-emphase
   - Line-height: 1.7 pour meilleure lisibilité
   - Hiérarchie par background elevation (plus clair = plus foreground)
   ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    /* --- MODE SOMBRE: FONDS --- */
    --bg-primary: #121212; /* Fond principal très foncé (gris confortable) */
    --bg-secondary: #2d3c73; /* Fond secondaire bleu-foncé (hiérarchie) */
    --bg-tertiary: #1a2847; /* Fond tertiaire (légèrement plus clair que primary) */
    --bg-section-alt-0: #121212; /* Sections paires (très foncé) */
    --bg-section-alt-1: #2d3c73; /* Sections impaires (bleu-foncé pour contraste) */

    /* --- MODE SOMBRE: TEXTES (opacités sur blanc) --- */
    --text-primary: rgba(
      255,
      255,
      255,
      0.87
    ); /* Titres, texte crucial (87% white) */
    --text-normal: rgba(
      255,
      255,
      255,
      0.6
    ); /* Corps texte normal (60% white) */
    --text-secondary: rgba(
      255,
      255,
      255,
      0.48
    ); /* Texte moins important (48% white) */
    --text-tertiary: rgba(
      255,
      255,
      255,
      0.38
    ); /* Texte léger, indices (38% white) */
    --text-disabled: rgba(
      255,
      255,
      255,
      0.25
    ); /* Éléments désactivés (25% white) */

    /* --- MODE SOMBRE: COMPOSANTS --- */
    --card-bg: #1e1e1e; /* Cartes (légèrement plus clair que bg-primary) */
    --card-bg-secondary: #2d3c73; /* Cartes pour sections alt-1 (bleu-foncé) */
    --card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2),
      0 0.625rem 1.875rem rgba(0, 0, 0, 0.4); /* Ombre halo en mode sombre */

    /* --- MODE SOMBRE: LIENS ET BOUTONS --- */
    --btn-primary-text: rgba(255, 255, 255, 0.87); /* Texte bouton blanc */
    --btn-secondary-text: rgba(
      255,
      255,
      255,
      0.87
    ); /* Texte secondaire blanc */
    --btn-secondary-hover: rgba(255, 255, 255, 0.15); /* Hover subtle */

    /* --- MODE SOMBRE: COULEURS DÉSATURÉES (white 40% overlay) --- */
    /* Appliquer 40% white overlay sur couleurs (Material Design: désaturation) */
    --palette-blue: #233767; /* Bleu français original pour header et composants */
    --palette-blue-light: #7aa7ff; /* Bleu clair pour titres h2/h3 en mode sombre */
    --blue-dark-mode: rgba(0, 71, 171, 0.6); /* Bleu avec 40% white overlay */
    --red-dark-mode: rgba(200, 82, 71, 0.6); /* Rouge avec 40% white overlay */

    /* --- MODE SOMBRE: ALERTES --- */
    --alert-success-bg: rgba(76, 175, 80, 0.2); /* Vert très discret */
    --alert-success-border: rgba(76, 175, 80, 0.6); /* Bordure vert subtle */
    --alert-success-text: rgba(144, 232, 168, 1); /* Texte vert clair */

    --alert-danger-bg: rgba(244, 67, 54, 0.15); /* Rouge très discret */
    --alert-danger-border: rgba(244, 67, 54, 0.6); /* Bordure rouge subtle */
    --alert-danger-text: rgba(255, 171, 145, 1); /* Texte orange-rouge clair */

    --alert-info-bg: rgba(0, 71, 171, 0.15); /* Bleu très discret */
    --alert-info-border: rgba(0, 71, 171, 0.6); /* Bordure bleu subtle */
    --alert-info-text: rgba(184, 212, 255, 1); /* Texte bleu clair */

    /* --- MODE SOMBRE: AUTRES --- */
    --header-bg: #1a1a1a; /* Header très foncé */
    --topbar-bg: #0d0d0d; /* Topbar encore plus foncé */
    --footer-text: rgba(
      255,
      255,
      255,
      0.7
    ); /* Footer texte légèrement transparent */
    --border-subtle: rgba(255, 255, 255, 0.08); /* Bordures très subtiles */

    /* --- MODE SOMBRE: TYPOGRAPHIE --- */
    --line-height-base: 1.7; /* Augmenter hauteur pour lisibilité */
    --font-weight-bold-dark: 600; /* Moins lourd pour éviter sur-emphase */
  }
}

/* ------------------------------------------------------------------
   BASE GÉNÉRALE
------------------------------------------------------------------ */

html {
  font-size: 1rem; /* 1rem = 16px, standard moderne */
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

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

body {
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  background-color: var(--bg-primary);
  color: var(--text-normal);
}

a {
  color: var(--palette-blue);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease;
}

a:hover {
  color: var(--palette-red);
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  a {
    color: var(--text-primary);
  }

  a:hover {
    color: var(--palette-red);
  }
}

/* Exception : pas de soulignement pour les liens du menu mobile */
.nav-group a:hover {
  text-decoration: none;
  color: inherit;
}

/* Exception : pas de soulignement pour le cadenas admin */
.top-bar-admin:hover {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--palette-red);
  outline-offset: 0.125rem;
}

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

/* TITRES GLOBAUX */

h1,
h2,
h3 {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0;
}

/* Titre principal (page) */
h1 {
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  line-height: 1.25;
  font-weight: 700;
}

/* Titres de section */
.section h2 {
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: var(--palette-blue);
}

/* Sous-titres / titres de bloc (cartes, news, agenda…) */
.section h3 {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* LISTES */

ul,
ol {
  margin: 1rem 0;
  padding-left: 2rem;
  color: var(--text-normal);
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

/* Appliquer la couleur du texte des listes non ordonnées sur tout le site */
/* Les puces/tirets suivent la couleur du texte (inherit) */
ul li::before,
ul li::marker {
  color: inherit;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

li p {
  margin: 0.25rem 0;
}

/* Mode mobile : réduire l'indentation des listes */
@media (max-width: 37.5rem) {
  ul,
  ol {
    padding-left: 0.7rem;
  }
}

/* Conteneur générique */

.container {
  width: min(var(--page-max-width-narrow), 100% - 2rem);
  margin: 0 auto;
}

.section {
  padding: var(--section-padding-y) 0;
}

/* Paragraphes dans les sections */

.section p {
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-normal);
}

/* Pour les paragraphes d’intro "synthèse" en haut de section */
.section > .container > p,
.section > .container > .partners-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  /* OPTIMIZED: Removed over-specified selector */
}

.section > .container > h2 {
  margin-bottom: 0.75rem;
}

.section-targets h2,
.section-news h2,
.section-ksl h2,
.section-partners h2,
.section-about h2 {
  margin-bottom: 0.75rem;
  /* si tu veux, tu peux les surligner légèrement, mais c’est optionnel */
}

/* Liens type texte */

.text-link {
  color: var(--palette-blue);
  font-weight: 600;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: var(--palette-red) !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   HEADER / TOP BAR
------------------------------------------------------------------ */

/* barre fine au-dessus du header principal */
.top-bar {
  background-color: var(--topbar-bg);
  color: var(--topbar-text);
  font-size: var(--topbar-font-size);
}

@media (max-width: 37.5rem) {
  .top-bar {
    display: none;
  }
}

/* largeur et alignement du contenu */
.top-bar-inner {
  width: min(var(--page-max-width), 100% - 2rem);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: var(--topbar-padding-y) 0;
  min-height: var(--topbar-min-height);
}

/* texte à gauche */
.top-bar-left {
  opacity: 0.9;
}

/* bloc admin à droite */
.top-bar-right {
  display: flex;
  align-items: center;
}

.top-bar-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--topbar-text);
  text-decoration: none;
  font-weight: 500;
}

/* cadenas (emoji ou futur icône SVG) */
.lock-icon {
  font-size: 0.9rem;
  line-height: 1;
}

/* Bouton toggle dark mode */
.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--topbar-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.dark-mode-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.dark-mode-toggle[aria-pressed="true"] .dark-mode-icon {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------
   HEADER / NAVIGATION
------------------------------------------------------------------ */

.site-header {
  background-color: var(--header-bg);
  color: var(--header-text);
}

.nav-container {
  width: min(var(--page-max-width), 100% - 2rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  padding: var(--header-padding-y) 0;
}

/* Navigation principale en ligne sur grand écran */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Groupes de liens */
.nav-group {
  list-style: none;
  display: flex;
  gap: var(--nav-group-gap);
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}

/* Masquer les catégories et séparateurs en mode desktop */
.nav-category,
.nav-separator {
  display: none;
}

/* Pastille blanche arrondie pour le logo CFRC */
.logo-badge {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--badge-bg);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-radius);
  border: 0.125rem solid var(--badge-border); /* 2px */

  height: var(--badge-height);
  box-sizing: border-box;
}

.logo-badge img {
  height: var(--logo-height);
  width: auto;
  display: block;
}

/* Liens du menu principal */

.main-nav a {
  color: var(--header-text);
  font-weight: 500;
  position: relative;
  padding: 0.25rem 0.25rem;
  text-decoration: none;
}

/* Soulignement + couleur au survol */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 0.125rem; /* 2px */
  background: linear-gradient(
    90deg,
    var(--palette-blue) 0%,
    var(--palette-red) 50%,
    var(--palette-blue) 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.main-nav a:hover {
  color: var(--palette-red); /* changement de couleur au survol */
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

/* Lien de page active : soulignement sans changement de couleur */

.main-nav a.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------
   NAVIGATION RESPONSIVE (menu hamburger) — BASE
   (les media queries sont regroupées plus bas)
------------------------------------------------------------------ */

/* Bouton hamburger : caché par défaut (visible en mobile) */
.nav-toggle {
  display: none; /* sera activé en @media */
  background: transparent;
  border: 0.0625rem solid var(--border-subtle); /* 1px */
  border-radius: 999px;
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bar {
  position: relative;
  width: 1.125rem; /* 18px */
  height: 0.125rem; /* 2px */
  background: var(--header-text);
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.125rem;
  height: 0.125rem;
  background: var(--header-text);
  border-radius: 999px;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bar::before {
  top: -0.375rem; /* -6px */
}

.nav-toggle-bar::after {
  top: 0.375rem; /* 6px */
}

/* État "ouvert" du menu (croix) */
body.nav-open .nav-toggle-bar {
  background: transparent;
}

body.nav-open .nav-toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
}

body.nav-open .nav-toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------
   HERO (bandeau d’accueil)
------------------------------------------------------------------ */

.hero {
  position: relative;
  color: var(--hero-text-color);
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
}

.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../images/hero/hero-rcp.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
}

.hero-content {
  position: relative;
  width: min(56.25rem, 100% - 2rem); /* 900px */
  margin: 0 auto;
}

.hero-tagline {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-title {
  font-size: 2.5rem;
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.87);
}

.hero-text {
  max-width: 35rem; /* 560px */
  margin-bottom: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------
   BOUTONS
------------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-card);
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.05s ease;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.2); /* 0 8px 18px */
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
  text-decoration: none;
  transform: translateY(-0.0625rem); /* -1px */
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 0.0625rem solid var(--border-subtle); /* 1px */
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   SECTIONS SPÉCIFIQUES
------------------------------------------------------------------ */

/* Alternance générique des fonds de section */
.section.section-alt-0 {
  background-color: var(--bg-primary);
}

.section.section-alt-1 {
  background-color: var(--bg-tertiary);
}

/* Cards avec couleurs adaptées aux sections alternées (mode clair) */
.section.section-alt-0 .event-card,
.section.section-alt-0 .news-card,
.section.section-alt-0 .recommendation-card,
.section.section-alt-0 .first-aid-card {
  background-color: var(--card-bg);
}

.section.section-alt-1 .event-card,
.section.section-alt-1 .news-card,
.section.section-alt-1 .recommendation-card,
.section.section-alt-1 .first-aid-card {
  background-color: var(--card-bg-secondary);
}

/* À propos */

.section-about {
  background-color: var(--bg-primary);
}

/* Layout 2/3 – 1/3 pour la section À propos */
.about-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.about-text h2 {
  margin-top: 0;
}

.about-text p {
  margin-bottom: 1rem;
  max-width: 46rem;
}

/* Logo ERC à droite */
.about-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-logo img {
  max-width: 21.25rem; /* 340px */
  height: auto;
}

/* Accès par public (Professionnels / Secouristes / Public) */

.section-targets {
  background-color: var(--bg-tertiary);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.card h3 {
  margin-top: 0;
}

.card:hover {
  transform: translateY(-0.125rem); /* -2px */
  border-color: var(--border-subtle);
}

.card-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--palette-blue);
  transition: color 0.2s ease;
}

.card-link:hover {
  color: var(--palette-red);
}

/* Cartes dans les sections --bg-tertiary : utiliser la teinte plus foncée */
.section-targets .card,
.section-news .news-card,
.section-news .event-card {
  background-color: var(--card-bg-secondary);
}

/* Bloc Recommandations ERC 2025 */

.section-highlight {
  background: linear-gradient(
    90deg,
    var(--palette-blue) 0%,
    var(--blue-dark) 40%,
    var(--palette-red) 100%
  );
  color: var(--bg-primary);
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25);
  padding: var(--section-padding-y) var(--page-horizontal-padding);
}

.highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-horizontal-padding);
  padding-right: var(--page-horizontal-padding);
}

.highlight-text p {
  margin-bottom: 0;
}

.section-highlight p {
  color: var(--white-very-light);
}

.section.section-highlight h2 {
  color: rgba(255, 255, 255, 0.87) !important;
}

.section-highlight a:hover {
  color: var(--red-light); /* rouge très léger au survol */
}

.section-highlight .btn {
  background: linear-gradient(
    90deg,
    var(--palette-blue) 0%,
    var(--blue-light) 100%
  );
  color: var(--topbar-text);
  border: none;
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.25);
}

.section-highlight .btn:hover {
  filter: brightness(1.15);
}

/* Actualités & Agenda */

.section-news {
  background-color: var(--bg-tertiary);
}

/* News & Agenda : cartes (publication / événement) */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.news-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
}
.news-card h3 {
  margin-top: 0;
}
.news-card p {
  margin-bottom: 0.5rem;
}

/* Button Row */
.btn-row {
  text-align: center;
  padding: 2rem 1rem;
}

/* Troncature responsive des titres de publications (2 lignes max sur petits écrans) */
@media (max-width: 37.5rem) {
  .news-card h3,
  .event-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
  }
}

/* Indicateur visuel pour les titres tronqués : petit dégradé en bas du titre */
@media (max-width: 37.5rem) {
  .news-card h3,
  .event-card h3 {
    position: relative;
  }

  .news-card h3::after,
  .event-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.1rem;
    pointer-events: none;
    z-index: 2;
    display: none;
  }
}

/* Mode sombre : supprimer le dégradé */
@media (prefers-color-scheme: dark) and (max-width: 37.5rem) {
  .news-card h3::after,
  .event-card h3::after {
    display: none;
  }
}

/* Mode clair : supprimer le dégradé */
@media (prefers-color-scheme: light) and (max-width: 37.5rem) {
  .news-card h3::after,
  .event-card h3::after {
    display: none;
  }
}

.two-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
}

/* Liste des événements */
.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.event-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  border-left: 0.25rem solid var(--palette-blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.event-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 2rem rgba(0, 71, 171, 0.15);
  border-left-color: var(--palette-red);
}

.event-card h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  color: var(--palette-blue);
  font-weight: 600;
}

/* Mode sombre : h3 des event-cards en couleur primaire pour contraste */
@media (prefers-color-scheme: dark) {
  .event-card h3 {
    color: var(--text-primary) !important;
  }
}

.event-card p {
  margin: 0;
}

.event-card .event-date {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-normal);
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.event-card .event-location {
  font-size: 0.9rem;
  color: var(--text-normal);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.event-card .text-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--palette-blue);
  border-top: 0.0625rem solid var(--border-subtle);
  padding-top: 1rem;
  margin-top: 0.5rem;
  transition: color 0.2s ease;
}

.event-card .text-link:hover {
  color: var(--palette-red);
}

/* Highlight image wrapper - light mode */
.highlight-action {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 0.125rem solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06),
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
  max-width: 14rem;
  display: block;
  margin: 1rem auto;
  border-radius: 0.75rem;
  padding: 0.5rem;
}

.highlight-action .highlight-image-link {
  display: block;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  h2 {
    color: var(--palette-blue-light) !important;
  }

  .event-card {
    border-left-color: var(--palette-blue);
  }

  .event-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(219, 228, 255, 0.1);
    border-left-color: var(--palette-red);
  }

  .event-card h3 {
    color: var(--palette-blue);
  }

  .text-link {
    color: var(--text-normal) !important;
  }

  .card-link {
    color: var(--text-normal) !important;
  }

  .card-link:hover {
    color: var(--palette-red) !important;
  }

  .event-card .text-link {
    color: var(--text-normal) !important;
    border-top: 0.0625rem solid var(--border-subtle);
  }

  .event-card .text-link:hover {
    color: var(--palette-red) !important;
  }

  /* Titres h2 en blanc clair en mode sombre */
  .section h2 {
    color: var(--text-primary) !important;
  }

  /* Highlight image wrapper en mode sombre */
  .highlight-action {
    background: rgba(255, 255, 255, 0.2);
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2),
      0 0.625rem 1.875rem rgba(0, 0, 0, 0.4);
    max-width: 14rem;
    display: block;
    margin: 1rem auto;
    border-radius: 0.75rem;
    padding: 0.5rem;
  }

  .highlight-action .highlight-image-link {
    display: block;
  }

  .highlight-action .highlight-image-link img {
    filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.08));
  }
}

@media (max-width: 37.5rem) {
  .highlight-action .highlight-image-link img {
    max-width: 10rem;
  }
}

.news-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Removed unused classes: section-ksl, ksl, section-partners */

/* PARTENAIRES : grille, grayscale, responsive, dark-mode friendly */

.partner-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonnes symétriques */
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

/* Liens = “cases” centrées */
.partner-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Logos : même hauteur, grayscale au repos, transition douce */
.partner-logos img {
  width: auto;
  height: clamp(3.75rem, 5vw, 5.625rem);
  object-fit: contain;

  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

/* Survol / focus : logo en couleur, un peu plus présent */
.partner-logos a:hover img,
.partner-logos a:focus-visible img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-0.0625rem);
}

.partners-intro {
  margin: 0 auto 2rem;
  text-align: left;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   SECTION RECOMMANDATIONS (PROFILES)
------------------------------------------------------------------ */

.section-recommendations {
  background-color: var(--bg-primary);
}

.section-intro {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 50rem;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.recommendation-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.recommendation-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.recommendation-card p {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.recommendation-card:hover {
  transform: translateY(-0.125rem);
  border-color: var(--border-subtle);
}

/* ------------------------------------------------------------------
   SECTION PREMIERS SECOURS / FIRST AID
------------------------------------------------------------------ */

.section-first-aid {
  background-color: var(--bg-primary);
}

.first-aid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.first-aid-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
  position: relative;
}

.first-aid-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.first-aid-card p {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.first-aid-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--border-subtle);
}

/* ------------------------------------------------------------------
   SECTION SOCIÉTÉS SAVANTES (RENAMED PARTNERS)
------------------------------------------------------------------ */

.section-societies {
  background-color: var(--bg-primary);
}

/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------ */

.site-footer {
  color: var(--footer-text);
  font-size: 0.95rem;
}

/* Footer plein écran, avec fond rouge (2/3) + bleu (1/3) */
.footer-main {
  background: linear-gradient(
    90deg,
    var(--palette-red) 0%,
    var(--palette-red) 60%,
    var(--palette-blue) 60%,
    var(--palette-blue) 100%
  );
}

/* Le container reste celui du layout global :
   width: min(var(--page-max-width), 100% - 2rem); */

/* 3 colonnes dans le container */
.footer-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: flex-start;
}

/* Colonne générique (texte) */
.footer-col {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  /* IMPORTANT : pas de background ici, on laisse
     transparaître le rouge/bleu du .footer-main */
  background: transparent;
  /* Pas de séparateurs en mode desktop (3 colonnes) */
  border-bottom: none;
  margin-bottom: 0;
}

/* Titres de colonnes */
.footer-right h3,
.footer-nav h3,
.footer-legal h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--footer-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Texte contact */
.footer-right p {
  margin: 0;
  line-height: 1.6;
}

/* Espacement uniforme entre CFRC, titre et adresse */
.contact-org,
.contact-title {
  display: inline;
}

/* Listes de liens */
.footer-nav ul,
.footer-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Colonnes dans Navigation et Ressources (mobile) */
.footer-nav-columns,
.footer-resources-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.footer-nav-columns ul,
.footer-resources-columns ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-nav a,
.footer-legal a {
  color: var(--footer-text);
  font-size: 0.92rem;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-legal a:hover {
  text-decoration: underline;
}

/* Bandeau du bas = même couleur que la top-bar */
.footer-bottom {
  background-color: var(--topbar-bg);
  border-top: 0.0625rem solid var(--overlay-white-light);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------
   MODE SOMBRE
------------------------------------------------------------------ */

/* Mode sombre auto (selon les préférences du système) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050712;
    --bg-secondary: #0b1020;
    --bg-tertiary: #111729;

    --text: #e5e9ff;
    --text-muted: #a4afd0;

    --header-bg: #050712;
    --header-text: #f9fbff;

    --badge-bg: rgba(
      255,
      255,
      255,
      0.87
    ); /* blanc adouci adapté au mode sombre */
    --badge-border: #d8dce8;

    --card-bg: #1a2847;
    --card-bg-secondary: #162038; /* Plus foncé mais lisible */
    --card-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.45); /* 0 10px 30px */

    --link: #dbe4ff;
    --link-hover: #c85247; /* comme (--red:) à la palce de #ffb8ac; */

    --btn-primary-bg: #c85247;
    --btn-primary-text: var(--white-very-light);
    --btn-primary-bg-hover: #e17369;

    --btn-secondary-bg: #1b2340;
    --btn-secondary-text: #f4f5ff;
    --btn-secondary-bg-hover: #252f52;

    --border-subtle: var(--border-subtle);

    --topbar-bg: #050712;
    --topbar-text: #f9fbff;

    /* Nouvelles couleurs pour dark mode */
    --white-very-light: #e5e9ff;
    --white-disabled: #253051;
    --red-light: #ff8f8f;
    --red-disabled: #e17369;
    --blue-muted-light: #dbe4ff;
    --gray-inactive: #6b7085;
    --green-light: #90e8a8;

    /* Alertes en mode sombre */
    --alert-success-bg: #1e4620;
    --alert-success-border: #28a745;
    --alert-success-text: #a8d5ba;
    --alert-success-link: var(--green-light);

    --alert-danger-bg: #4a1f24;
    --alert-danger-border: #dc3545;
    --alert-danger-text: #f5a8b3;
    --alert-danger-link: #ff9aaa;
  }

  /* Assombrir l’image en mode sombre automatique */
  .hero-image {
    filter: brightness(0.45);
  }

  .hero-title {
    color: var(--blue-muted-light); /* un blanc/bleu plus doux que #fff */
  }

  /* --- Mode sombre automatique : on éclaire légèrement les logos --- */
  .partner-logos img {
    /* toujours en grayscale au repos, mais un peu plus lumineux */
    filter: grayscale(100%) brightness(1.15);
    opacity: 0.9;
  }

  .partner-logos a:hover img,
  .partner-logos a:focus-visible img {
    filter: grayscale(0%) brightness(1.15);
    opacity: 1;
  }

  /* --- Mode sombre automatique : Footer --- */

  .footer-main {
    background: linear-gradient(
      90deg,
      var(--palette-red) 0%,
      var(--palette-red) 60%,
      var(--blue-dark) 60%,
      var(--blue-dark) 100%
    );
  }
}

/* Mode clair forcé via attribut data-theme="light" sur <html> */
html[data-theme="light"] {
  /* Force mode clair même si système préfère dark */
  color-scheme: light;

  /* Surcharge les variables pour forcer le thème clair */
  /* (important pour éviter que @media (prefers-color-scheme: dark) ne s'applique) */

  --bg-primary: rgba(0, 0, 0, 0.02);
  --bg-secondary: rgba(0, 0, 0, 0.05);
  --bg-tertiary: rgba(0, 0, 0, 0.08);
  --bg-section-alt-0: rgba(0, 0, 0, 0.02);
  --bg-section-alt-1: rgba(0, 0, 0, 0.05);

  --text-primary: #222222;
  --text-normal: #666666;
  --text-secondary: #888888;
  --text-tertiary: #aaaaaa;
  --text-disabled: #cccccc;

  --header-bg: var(--palette-blue);
  --header-text: rgba(255, 255, 255, 0.87);
  --topbar-bg: #141d33;
  --topbar-text: #f9fbff;

  --card-bg: rgba(255, 255, 255, 0.87);
  --card-bg-secondary: rgba(0, 0, 0, 0.07);
  --card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04),
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.06);

  --btn-primary-bg: var(--palette-red);
  --btn-primary-text: rgba(255, 255, 255, 0.87);
  --btn-primary-hover: #b8403a;
  --btn-secondary-bg: rgba(255, 255, 255, 0.87);
  --btn-secondary-text: var(--palette-blue);
  --btn-secondary-hover: #e3e7f5;

  --link: var(--palette-blue);
  --border-subtle: rgba(0, 0, 0, 0.08);
}

/* Mode sombre forcé via attribut data-theme="dark" sur <html> (toggle manuel) */
html[data-theme="dark"] {
  /* Force mode sombre même si système préfère light */
  color-scheme: dark;

  /* Surcharge avec variables sombres (voir @media (prefers-color-scheme: dark) plus haut) */
  --bg-primary: #121212;
  --bg-secondary: #2d3c73;
  --bg-tertiary: #1a2847;
  --bg-section-alt-0: #121212;
  --bg-section-alt-1: #2d3c73;

  --text-primary: rgba(255, 255, 255, 0.87);
  --text-normal: rgba(255, 255, 255, 0.6);
  --text-secondary: rgba(255, 255, 255, 0.48);
  --text-tertiary: rgba(255, 255, 255, 0.38);
  --text-disabled: rgba(255, 255, 255, 0.25);

  --header-bg: #1a1a1a;
  --header-text: rgba(255, 255, 255, 0.87);
  --topbar-bg: #0d0d0d;
  --topbar-text: rgba(255, 255, 255, 0.87);

  --card-bg: #1e1e1e;
  --card-bg-secondary: #2d3c73; /* Pour sections alt-1 en mode sombre (bleu-foncé) */
  --card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2),
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.4);

  --btn-primary-bg: var(--palette-red);
  --btn-primary-text: rgba(255, 255, 255, 0.87);
  --btn-secondary-bg: rgba(255, 255, 255, 0.1);
  --btn-secondary-text: rgba(255, 255, 255, 0.87);
  --btn-secondary-hover: rgba(255, 255, 255, 0.15);

  --link: #89b7ff;
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Compatibilité avec anciennes variables */
  --white-very-light: rgba(255, 255, 255, 0.87);
  --white-off: #121212;
  --blue-light: #5a7fbf;
  --blue-pale: rgba(184, 212, 255, 0.3);
}

/* Ajustements visuels en mode sombre forcé */
html[data-theme="dark"] .logo-badge img {
  filter: none;
}

/* Assombrir l’image si l’utilisateur force le mode sombre */
html[data-theme="dark"] .hero-image {
  filter: brightness(0.45);
}

/* --- Mode sombre forcé via .dark-mode sur <body> --- */
html[data-theme="dark"] .partner-logos img {
  filter: grayscale(100%) brightness(1.15);
  opacity: 0.9;
}

html[data-theme="dark"] .footer-main {
  background: linear-gradient(
    90deg,
    var(--palette-red) 0%,
    var(--palette-red) 60%,
    var(--blue-dark) 60%,
    var(--blue-dark) 100%
  );
}

/* ------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------ */

/* ================== IPAD : max-width 48rem (768px) ================== */

@media (max-width: 48rem) {
  /* Adaptations pour iPad portrait et petit desktop */

  .card-grid,
  .recommendations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .first-aid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-layout {
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
  }

  .two-columns,
  .ksl {
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
  }
}

/* ================== TABLETTE : max-width 56.25rem (900px) ================== */

@media (max-width: 56.25rem) {
  /* HEADER / NAVIGATION */

  .nav-container {
    flex-wrap: wrap;
    align-items: center;
  }

  /* Logo à gauche, burger à droite, nav en dessous */
  .logo-badge {
    order: 1;
  }

  .nav-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .main-nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;

    /* Menu replié par défaut */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  /* Quand le menu est ouvert (classe sur le body via JS) */
  body.nav-open .main-nav {
    max-height: 31.25rem; /* 500px */
  }

  .nav-group {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  /* Annuler les margins des items du menu mobile */
  .nav-group li {
    margin: 0;
  }

  /* Titres de catégories (uniquement en mobile) */
  .nav-category {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(
      --blue-very-pale
    ); /* Blanc très clair pour meilleur contraste sur fond bleu */
    padding: 0.75rem 0 0.5rem 1.25rem;
    margin-top: 0.5rem;
  }

  /* Mode sombre : catégories visibles */
  @media (prefers-color-scheme: dark) {
    .nav-category {
      color: rgba(
        255,
        255,
        255,
        0.87
      ) !important;
    }
  }

  .nav-category:first-child {
    margin-top: 0;
  }

  /* Mode clair : catégories plus blanches que les liens */
  html[data-theme="light"] .nav-category {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 700 !important;
  }

  /* Séparateurs (uniquement en mobile) */
  .nav-separator {
    display: block;
    height: 0.125rem; /* 2px au lieu de 1px */
    background: var(--text-muted); /* Plus visible que border-subtle */
    margin: 0.75rem 1.25rem;
    opacity: 0.4; /* Adoucir l'effet sans perdre la visibilité */
  }

  /* Items de navigation */
  .nav-group li a {
    display: block;
    padding: 0.375rem 0 0.375rem 1.25rem;
    text-decoration: none;
    font-weight: 400; /* Normal au lieu du poids par défaut */
    color: var(--blue-light-text); /* Blanc moins intense que les titres */
    transition: background-color 0.2s ease;
  }

  /* Mode clair : liens du menu en blanc */
  html[data-theme="light"] .nav-group li a {
    color: rgba(255, 255, 255, 0.87) !important;
  }

  .nav-group li a:hover {
    background-color: var(--black-overlay-light);
    text-decoration: none;
    color: var(--palette-red); /* Rouge au hover */
  }

  /* Annuler l'effet .main-nav a:hover pour le menu mobile */
  .main-nav a:hover {
    color: var(--palette-red) !important;
  }

  .main-nav a:hover::after {
    transform: scaleX(0) !important;
  }

  /* Réduire l'espacement entre les items de référentiels */
  .nav-item-ref a,
  .nav-item-form a,
  .nav-item-about a {
    padding: 0.3rem 0 0.3rem 1.25rem;
  }

  /* HERO */

  .hero {
    min-height: unset;
    padding: 3rem 0;
  }

  .hero-content {
    width: min(42rem, 100% - 2rem);
  }

  .hero-text {
    max-width: 100%;
  }

  /* SECTIONS : grilles adaptées tablette */

  .about-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .recommendations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .first-aid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .two-columns {
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
  }

  .ksl {
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
  }

  .card p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-normal);
  }

  .highlight {
    flex-direction: column;
    align-items: flex-start;
  }

  /* PARTENAIRES */

  .partner-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  /* FOOTER */

  .footer-content {
    grid-template-columns: 1.2fr 1.1fr 1.1fr;
  }

  .footer-col {
    padding: 1.75rem 1.5rem;
  }
}

/* ================== SMARTPHONE : max-width 37.5rem (600px) ================== */

@media (max-width: 37.5rem) {
  /* Conteneur légèrement plus large par rapport au bord */

  .container {
    width: min(100% - 1.5rem, 40rem);
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  /* HERO : centrer le bouton */

  .hero {
    padding: 2.5rem 0;
  }

  .hero-content {
    text-align: center;
  }

  .hero-tagline {
    font-size: 1.2rem;
  }

  .hero-title {
    font-size: 1.6rem;
  }

  .page-title {
    font-size: 1.6rem !important;
  }

  .hero-text {
    font-size: 0.98rem;
  }

  /* À PROPOS : une seule colonne */

  .about-layout {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about-logo {
    margin-top: 1rem;
    justify-content: flex-start;
  }

  /* CARTES : une seule colonne */

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

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

  .first-aid-grid {
    grid-template-columns: 1fr;
  }

  /* ACTUALITÉS & AGENDA : une colonne + centrer bouton */

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

  .btn-row {
    text-align: center;
  }

  .btn-primary {
    width: auto;
    display: inline-block;
  }

  /* HIGHLIGHT : centrer l'image */

  .highlight {
    flex-direction: column;
    align-items: center;
  }

  .highlight-action {
    text-align: center;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 0.125rem solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06),
      0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
    max-width: 14rem;
    margin: 1rem auto;
    border-radius: 0.75rem;
    padding: 0.5rem;
  }

  .highlight-action .highlight-image-link {
    max-width: 20rem;
    display: block;
    margin: 0 auto;
  }

  /* KIDS SAVE LIVES : une colonne */

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

  /* PARTENAIRES : 2 colonnes */

  .partner-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /* FOOTER : colonnes empilées + fond uniforme */

  .footer-main {
    background: var(--palette-blue);
  }

  /* Mode sombre mobile : fond uniforme */
  html[data-theme="dark"] .footer-main {
    background: var(--bg-secondary);
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  /* Styles de base pour les colonnes */
  .footer-col {
    padding: 1.5rem 1.25rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.2);
    margin-bottom: 0;
  }

  /* Première colonne : pas de padding-top */
  .footer-col:first-child {
    padding-top: 1.25rem;
  }

  /* Dernière colonne : pas de séparateur ni margin */
  .footer-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  /* Afficher les sous-colonnes Navigation et Ressources en 2 colonnes */
  .footer-nav-columns,
  .footer-resources-columns {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .footer-nav a,
  .footer-legal a {
    font-size: 0.95rem;
  }
}

/* ========== TRÈS PETIT ÉCRAN : max-width 32rem (512px) ========== */

@media (max-width: 32rem) {
  /* Partenaires : une seule colonne */

  .partner-logos {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 2.25rem 0;
  }

  .hero-title {
    font-size: 1.45rem;
  }
}

/* ========== NOTE SOURCE ========== */

.note-source {
  display: block;
  text-align: right;
  font-style: italic;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  opacity: 0.8;
}

/* ========== LISTES AÉRÉES ========== */

/* Liste des ressources */
.liste-ressources li {
  margin-bottom: 0.75rem !important;
  line-height: 1.6;
}

/* Listes des points clés - tous les <ul> dans les sections de recommandations */
.section ul li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* SAUF pour les sections légales (mentions-légales et ligne-editoriale) */
.section-alt-0 ul li,
.section-alt-1 ul li,
.section-alt-0 ol li,
.section-alt-1 ol li {
  margin-bottom: 0.05rem;
  line-height: 1.25;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

/* Mais pas trop pour les listes dans les paragraphes */
.section > .container > p + ul li {
  margin-bottom: 1rem;
}

/* EXCEPTION : listes compactes dans les sections légales, même après un paragraphe */
.section-alt-0 > .container > p + ul li,
.section-alt-1 > .container > p + ul li {
  margin-bottom: 0.05rem;
  line-height: 1.25;
}

/* Icône de lien externe */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  background-image: url("/images/icons/external-link.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.15em;
  opacity: 0.6;
}

html[data-theme="light"] a[target="_blank"]::after {
  background-image: url("/images/icons/external-link.svg") !important;
  opacity: 0.6 !important;
}

html[data-theme="dark"] a[target="_blank"]::after {
  background-image: url("/images/icons/external-link-light.svg") !important;
  opacity: 0.8 !important;
}

@media (prefers-color-scheme: dark) {
  a[target="_blank"]::after {
    background-image: url("/images/icons/external-link-light.svg");
    opacity: 0.8;
  }
}

/* Exception : pas d'icône pour les liens contenant uniquement des images ou picture */
a[target="_blank"]:has(> img:only-child)::after,
a[target="_blank"]:has(> picture:only-child)::after,
.congress-links a[target="_blank"]::after {
  display: none;
}

/* Image pour lightbox - Style par défaut */
.lightbox-trigger img {
  display: block;
  max-width: 80%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 1.5rem auto;
  /* box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Figure et légende pour images de contenu */
.content-figure {
  margin: 2rem auto;
  text-align: center;
}

.content-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  text-decoration: none !important;
}

/* Figcaption dans les liens (lightbox) */
a figcaption,
.lightbox-trigger figcaption,
a.dark-mode-switch figcaption {
  font-size: 0.75rem;
  color: var(--text-muted) !important;
  font-style: italic;
  line-height: 1.5;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  outline: none !important;
  margin-top: 0.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: 100%;
}

a:hover figcaption,
a:focus figcaption,
a:active figcaption,
.lightbox-trigger:hover figcaption {
  text-decoration: none !important;
}

.content-figure figcaption a {
  color: var(--palette-blue);
  text-decoration: none;
  font-weight: 500;
}

.content-figure figcaption a:hover {
  color: var(--palette-red);
  text-decoration: underline;
}

/* Responsive - Figure */
@media (max-width: 52.5rem) {
  .content-figure {
    margin: 1.5rem auto;
  }

  .content-figure figcaption {
    font-size: 0.75rem;
  }
}

@media (max-width: 37.5rem) {
  .content-figure {
    margin: 1rem auto;
  }

  .content-figure figcaption {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

/* Images de contenu - Style formaté */
.content-image {
  display: block;
  max-width: 80%;
  height: auto;
  margin: 2rem auto;
  border-radius: 0.5rem;
  /* box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.15);
}

/* Responsive - Tablette et petits écrans */
@media (max-width: 52.5rem) {
  .content-image {
    margin: 1.5rem auto;
    max-width: 85%;
  }
}

/* Responsive - Mobile */
@media (max-width: 37.5rem) {
  .content-image {
    margin: 1rem auto;
    max-width: 100%;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  }

  .content-image:hover {
    transform: scale(1.01);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  }
}

/* Lien déclencheur lightbox */
.lightbox-trigger {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}

.lightbox-trigger:hover img {
  transform: scale(1.02);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* Modal lightbox - Affiche l'image en plein écran */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  animation: fadeIn 0.3s ease;
  padding: 2rem;
  overflow: auto;
}

.lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Conteneur du contenu de la lightbox */
.lightbox-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 95vh;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* Bouton de fermeture */
.lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.2s ease;
  z-index: 10000;
}

.lightbox-close:hover {
  color: var(--palette-red);
}

/* Mode sombre : croix pour meilleure visibilité */
@media (prefers-color-scheme: dark) {
  .lightbox-close {
    color: rgba(255, 255, 255, 0.9);
  }

  .lightbox-close:hover {
    color: var(--palette-red);
  }
}

html[data-theme="dark"] .lightbox-close {
  color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .lightbox-close:hover {
  color: var(--palette-red);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive - Mobile */
@media (max-width: 37.5rem) {
  .lightbox {
    padding: 1rem;
  }

  .lightbox-trigger img {
    margin: 1rem auto;
  }

  .lightbox img {
    max-height: 70vh;
  }

  .lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
  }
}

/* Note: Les anciennes classes .algo-image, .algo-trigger, .algo-lightbox* 
   ont été remplacées par les classes génériques .lightbox* pour réutilisabilité */

/* ------------------------------------------------------------------
   CARTES DE PERSONNES / GOUVERNANCE
------------------------------------------------------------------ */

.person-card {
  background-color: var(--card-bg-secondary);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border-left: 0.25rem solid var(--palette-red);
  box-shadow: var(--card-shadow);
}

.person-card h3 {
  color: var(--palette-red);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.person-card p {
  margin: 0;
  line-height: 1.6;
}

.person-title {
  color: var(--text-muted);
  font-size: 0.95rem;
  display: block;
  margin-top: 0.1rem;
}

/* Contact Info */
.contact-info {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border-left: 0.25rem solid var(--palette-blue);
  font-style: normal;
  line-height: 1.8;
}

.contact-info strong {
  color: var(--palette-blue);
  display: block;
  margin-bottom: 0.5rem;
}

/* Layout 2 colonnes pour cards avec image */
.person-card-with-image {
  display: grid;
  grid-template-columns: 1fr 0.175fr;
  gap: 1.5rem;
  align-items: flex-start;
}

.person-content {
  flex: 1;
}

.person-image {
  flex: 0 0 auto;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.person-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .person-card {
    background-color: var(--card-bg-secondary);
    border-left-color: var(--palette-red);
  }

  .person-card h3 {
    color: var(--red-dark-mode-light);
  }

  .contact-info {
    background-color: var(--card-bg-secondary);
    border-left-color: var(--palette-blue);
  }

  .contact-info strong {
    color: var(--blue-dark-mode-light);
  }

  .person-image {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  }

  .contact-card h3 {
    color: var(--palette-blue);
  }

  .contact-card a {
    color: var(--palette-blue);
  }

  .contact-card a:hover {
    color: var(--palette-red);
  }

  .contact-warning {
    background-color: rgba(200, 82, 71, 0.2);
    border-left-color: var(--palette-red);
    color: var(--red-dark-mode-light);
  }

  .contact-warning h2 {
    color: var(--red-dark-mode-light);
  }

  .contact-warning p,
  .contact-warning li {
    color: var(--red-dark-mode-light);
  }
}

/* Responsive */
@media (max-width: 52.5rem) {
  .person-card-with-image {
    grid-template-columns: 1fr 0.2fr;
    gap: 1rem;
  }

  .person-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .contact-info {
    padding: 1rem;
  }
}

@media (max-width: 37.5rem) {
  .person-card-with-image {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .person-image {
    max-width: 4.6875rem;
    margin: 0 auto;
  }

  .person-image img {
    aspect-ratio: 3 / 4;
  }

  .person-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .contact-info {
    padding: 1rem;
  }
}

/* ------------------------------------------------------------------
   SCROLL TO TOP - Bouton retour en haut
------------------------------------------------------------------ */

.scroll-to-top-btn {
  /* Position fixe, bas droit */
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;

  /* Dimensions */
  width: 3rem;
  height: 3rem;
  border-radius: 50%;

  /* Styling */
  background-color: var(--palette-red);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);

  /* Transition fluide */
  transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;

  /* SVG icon */
  text-decoration: none;
}

/* État visible */
.scroll-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hover effect */
.scroll-to-top-btn:hover {
  background-color: var(--red-disabled);
  transform: scale(1.1);
  box-shadow: 0 0.5rem 1.5rem rgba(200, 82, 71, 0.3);
}

/* Active/Focus pour accessibilité */
.scroll-to-top-btn:focus {
  outline: 0.125rem solid var(--palette-blue);
  outline-offset: 0.25rem;
}

.scroll-to-top-btn:active {
  transform: scale(0.95);
}

/* SVG Icon */
.scroll-to-top-icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Responsive - Tablet */
@media (max-width: 52.5rem) {
  .scroll-to-top-btn {
    width: 2.875rem;
    height: 2.875rem;
    bottom: 1.75rem;
    right: 1.75rem;
  }

  .scroll-to-top-icon {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 37.5rem) {
  .scroll-to-top-btn {
    width: 2.5rem;
    height: 2.5rem;
    bottom: 1rem;
    right: 1rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
  }

  .scroll-to-top-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Meilleure zone cliquable sur mobile */
  .scroll-to-top-btn::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: 50%;
  }
}

/* ------------------------------------------------------------------
   FORMULAIRE DE CONTACT
------------------------------------------------------------------ */

.contact-section {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Avertissement important */
.contact-warning {
  background-color: rgba(200, 82, 71, 0.1);
  border-left: 0.3125rem solid var(--palette-red);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.contact-warning h2 {
  color: var(--palette-red);
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
}

.contact-warning p {
  color: var(--palette-red);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.contact-warning ul {
  list-style: disc;
  margin: 0.25rem 0;
  padding-left: 1.5rem;
  color: var(--palette-red);
}

.contact-warning li {
  margin: 0 !important;
  padding: 0;
  line-height: 1.1;
}

/* Classe d'alerte générique (pour mentions-légales, ligne-éditoriale) */
.alert-danger {
  background-color: var(--alert-danger-bg);
  border-left: 0.3125rem solid var(--alert-danger-border);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  color: var(--alert-danger-text);
}

.alert-danger p {
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--alert-danger-text);
}

.alert-danger h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--alert-danger-text);
}

.alert-danger a {
  color: var(--alert-danger-link);
  font-weight: 600;
  text-decoration: underline;
}

.alert-danger a:hover {
  color: var(--alert-danger-text);
  text-decoration: underline;
}

/* Conteneur formulaire + plume */
.contact-form-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  margin-bottom: 2rem;
  margin-top: 8rem;
}

.contact-form {
  background-color: var(--card-bg-secondary);
  padding: 4rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.05);
}

/* Plume décoration - à cheval sur le bord supérieur à droite */
.contact-plume {
  position: absolute;
  top: -6.875rem;
  right: 1.25rem;
  z-index: 20;
}

.contact-plume img {
  width: 37.5rem;
  height: auto;
  display: block;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.15));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.contact-plume img:hover {
  filter: drop-shadow(0 0.375rem 0.75rem rgba(0, 0, 0, 0.25));
  transform: scale(1.02);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-normal);
}

.form-group label span {
  color: var(--palette-red);
  font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--white);
  color: var(--text-normal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--palette-blue);
  box-shadow: 0 0 0 0.1875rem rgba(35, 55, 103, 0.1);
}

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

.form-group.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.form-group.checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 0.25rem;
  cursor: pointer;
}

.form-group.checkbox label {
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.form-group.checkbox label a {
  color: var(--palette-blue);
  text-decoration: none;
}

.form-group.checkbox label a:hover {
  color: var(--palette-red);
  text-decoration: underline;
}

/* Actions du formulaire - Utilise .btn, .btn-primary, .btn-secondary (voir section BOUTONS) */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.form-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1rem;
  text-align: center;
}

/* Informations de contact directes */
.contact-info-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
}

.contact-info-section h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.contact-card {
  background-color: var(--card-bg-secondary);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border-left: 0.25rem solid var(--palette-blue);
}

.contact-card h3 {
  color: var(--palette-blue);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.contact-card p {
  margin: 0;
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 52.5rem) {
  .contact-form-wrapper {
    margin-bottom: 2rem;
  }

  .contact-plume {
    width: 100%;
    right: 0;
    top: -5rem;
  }

  .contact-plume img {
    width: 80%;
    max-width: 25rem;
    margin-left: auto;
    margin-right: 1.25rem;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .btn-row > .btn {
    width: auto;
  }
}

@media (max-width: 37.5rem) {
  .contact-warning {
    padding: 1rem;
  }

  .contact-warning h2 {
    font-size: 1.1rem;
  }

  .contact-form {
    padding: 1rem;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .contact-info-section {
    margin-top: 2rem;
  }
}

/* ========== ALERTES ========== */
.alert {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}

.alert-success {
  background-color: var(--alert-success-bg);
  border-left: 0.25rem solid var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-success a {
  color: var(--alert-success-link);
  font-weight: 600;
  text-decoration: underline;
}

.alert-success a:hover {
  color: var(--alert-success-text);
  text-decoration: underline;
}

.alert-info {
  background-color: var(--alert-info-bg);
  border-left: 0.25rem solid var(--alert-info-border);
  color: var(--alert-info-text);
}

.alert-info a {
  color: var(--alert-info-link);
  font-weight: 600;
  text-decoration: underline;
}

.alert-info a:hover {
  color: var(--alert-info-border);
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .alert-info {
    background-color: var(--bg-secondary);
    color: var(--text-normal);
    border-left-color: var(--palette-blue);
  }

  .alert-info a {
    color: var(--palette-blue);
  }

  .alert-info a:hover {
    color: var(--palette-red);
  }
}

/* Liens dans formulaire en mode clair */
.form-group a,
.form-note a,
.contact-card a {
  color: var(--palette-blue);
  text-decoration: none;
}

/* Mode sombre : liens de contact et formulaire visibles */
@media (prefers-color-scheme: dark) {
  .form-group a,
  .form-note a,
  .contact-card a {
    color: var(--text-normal) !important;
  }
}

.form-group a:hover,
.form-note a:hover,
.contact-card a:hover {
  color: var(--palette-red);
  text-decoration: underline;
}

/* Compact address spacing - reduce line-height for br elements */
.compact-address {
  line-height: 1.3;
}

/* Sections légales - listes compactes */
.section-alt-0 ul,
.section-alt-1 ul,
.section-alt-0 ol,
.section-alt-1 ol {
  line-height: 1.4;
  margin-bottom: 0.9rem;
}

.section-alt-0 ul li,
.section-alt-1 ul li,
.section-alt-0 ol li,
.section-alt-1 ol li {
  margin-bottom: 0.3rem;
}

/* ------------------------------------------------------------------
   STYLES PAGE LIENS - TABLE DES MATIÈRES ET RESSOURCES
------------------------------------------------------------------ */

/* Table des matières sticky */
.toc-sticky {
  position: sticky;
  top: 2rem;
  background: var(--bg-tertiary);
  border-left: 0.25rem solid var(--palette-blue);
  padding: 1.5rem;
  border-radius: 0.25rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.toc-sticky h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--palette-blue);
  text-transform: uppercase;
  margin-bottom: 1rem;
  letter-spacing: 0.03125rem;
}

.toc-sticky ul {
  list-style: none;
  padding: 0;
}

.toc-sticky li {
  margin-bottom: 0.75rem;
}

.toc-sticky a {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.toc-sticky a:hover {
  color: var(--palette-red);
}

.toc-sticky-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--palette-blue);
  text-transform: uppercase;
  letter-spacing: 0.03125rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 0;
  align-self: center;
}

/* Grille de ressources - 2 colonnes */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Responsive: 2 colonnes sur tablette, 1 colonne sur mobile */
@media (max-width: 52.5rem) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 37.5rem) {
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .toc-sticky-title {
    font-size: 0.7rem;
    width: auto;
    line-height: 0.7;
    padding: 0;
    min-height: unset;
    flex: 0 0 auto;
    min-width: 1.5rem;
  }

  .toc-sticky ul {
    flex: 1 1 auto;
  }
}

/* Cartes de ressources */
.resource-card {
  background: var(--card-bg);
  border-left: 0.25rem solid var(--palette-blue);
  padding: 1.5rem;
  border-radius: 0.25rem;
  transition: box-shadow 0.2s ease;
}

.section-alt-1 .resource-card {
  background: var(--card-bg-secondary);
}

.resource-card:hover {
  box-shadow: var(--card-shadow);
}

.resource-card h4 {
  font-size: 1.1rem;
  color: var(--palette-blue);
  margin-bottom: 0.5rem;
}

.resource-title {
  font-weight: 700;
}

.resource-card p {
  font-size: 0.95rem;
  color: var(--text-normal);
  margin-bottom: 1rem;
}

.resource-card a {
  display: inline-block;
  color: var(--palette-blue);
  font-weight: 500;
  transition: color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .resource-title {
    color: var(--text-primary) !important;
  }

  .resource-card a {
    color: var(--text-normal) !important;
  }

  .resource-card {
    color: var(--text-normal) !important;
  }

  .resource-card h4 {
    color: var(--text-primary) !important;
  }
}

.resource-card a:hover {
  color: var(--palette-red);
}

/* Variante de couleur pour les cartes de ressources - accent rouge */
.resource-card-highlight {
  background: var(--card-bg);
  border-left-color: var(--palette-red);
}

.section-alt-1 .resource-card-highlight {
  background: var(--card-bg-secondary);
}

.resource-card-highlight h4 {
  color: var(--palette-red);
}

.resource-card-highlight a {
  color: var(--palette-red);
}

.resource-card-highlight a:hover {
  color: var(--red-disabled);
}

/* Layout flexbox pour la carte guide avec image */
.resource-card-with-image {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.resource-card-image {
  flex: 0 0 auto;
  width: 14rem;
  height: auto;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.resource-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.resource-card-content {
  flex: 1;
}

.resource-card-highlight.resource-card-with-title {
  padding: 2rem;
}

.resource-card-title-top {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

@media (max-width: 52.5rem) {
  .resource-card-with-image {
    flex-direction: column;
    gap: 1.5rem;
  }

  .resource-card-image {
    width: 100%;
    max-width: 16rem;
    margin: 0 auto;
  }
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.badge-fr {
  background-color: rgba(35, 55, 103, 0.5);
  color: #ffffff;
}

.badge-int {
  background-color: rgba(90, 63, 143, 0.5);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .badge-fr {
    background-color: rgba(35, 55, 103, 0.3);
    color: var(--text-normal);
  }

  .badge-int {
    background-color: rgba(90, 63, 143, 0.3);
    color: var(--text-normal);
  }
}

/* Layout trois colonnes avec TOC centrée */
.three-columns-center {
  display: grid;
  grid-template-columns: 1fr minmax(17.5rem, 1fr) 1fr;
  gap: 2rem;
}

/* Layout deux colonnes responsive */
.two-columns {
  display: grid;
  grid-template-columns: 1fr 18.75rem;
  gap: 2rem;
}

@media (max-width: 52.5rem) {
  .three-columns-center {
    grid-template-columns: 1fr;
  }

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

  .toc-sticky {
    position: static;
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .toc-sticky ul {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    flex: 1;
  }
}

/* Titres de sections */
.section-title {
  font-size: 1.5rem;
  color: var(--palette-blue);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.125rem solid var(--border-subtle);
}

/* Cartes de congrès */
.congress-card {
  background: var(--card-bg);
  border-left: 0.25rem solid var(--palette-blue);
  padding: 1.5rem;
  border-radius: 0.25rem;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.congress-card:hover {
  box-shadow: var(--card-shadow);
}

.congress-card.past {
  border-left-color: var(--gray-inactive);
  background-color: var(--bg-tertiary);
  opacity: 0.45;
}

.congress-card.past,
.congress-card.past p,
.congress-card.past span,
.congress-card.past .congress-location,
.congress-card.past .congress-public,
.congress-card.past .congress-themes ul,
.congress-card.past .congress-themes li {
  color: var(--text-muted) !important;
}

.congress-card.past h3 {
  color: var(--text-muted);
}

.congress-date {
  display: inline-block;
  font-weight: 500;
  color: var(--palette-blue);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.congress-card h3 {
  font-size: 1.15rem;
  color: var(--palette-blue);
  margin-bottom: 0.5rem;
}

.congress-card.past .congress-date {
  color: var(--text-muted);
}

.congress-location {
  display: block;
  color: var(--text-normal);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
  .congress-date {
    color: var(--palette-blue);
  }

  .congress-card {
    background: var(--card-bg);
    border-left-color: var(--palette-blue);
  }

  .congress-card h3 {
    color: var(--text-primary);
  }

  .congress-card .congress-location,
  .congress-card .congress-public,
  .congress-card .congress-themes ul {
    color: var(--text-normal);
  }

  .congress-links a {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
  }

  .congress-links a:hover {
    background-color: var(--btn-primary-bg-hover);
  }

  /* Adaptation des cards selon la section */
  .section-alt-1 .congress-card:not(.past) {
    background: var(--card-bg-secondary);
  }

  .section-alt-0 .congress-card:not(.past) {
    background: var(--card-bg);
  }

  /* Couleurs pour les cards passées selon leur section */
  .section-alt-1 .congress-card.past {
    background: var(--bg-secondary);
  }

  .section-alt-0 .congress-card.past {
    background: #2a2a2a;
  }
}

.congress-public {
  display: block;
  color: var(--text-normal);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.congress-themes {
  margin-bottom: 1rem;
}

.congress-themes ul {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
  color: var(--text-normal);
}

.congress-themes li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.congress-themes li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--palette-blue);
  font-weight: bold;
}

.congress-card.past .congress-themes li:before {
  color: var(--gray-inactive);
}

.section-alt-1 .congress-card,
.section-alt-1 .congress-card p,
.section-alt-1 .congress-card span,
.section-alt-1 .congress-location,
.section-alt-1 .congress-public,
.section-alt-1 .congress-themes ul,
.section-alt-1 .congress-themes li {
  color: var(--text-normal) !important;
}

.congress-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.congress-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0.0625rem solid var(--btn-primary-bg);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}

.congress-links a:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg-hover);
}

.congress-card.past .congress-links a {
  background-color: var(--white-disabled);
  color: var(--text-muted);
  border-color: var(--gray-inactive);
}

.congress-card.past .congress-links a:hover {
  background-color: var(--gray-light-alt);
  color: var(--text-muted);
}

.badge-past {
  display: inline-block;
  padding: 0.35rem 1rem;
  background-color: var(--white-disabled);
  color: var(--gray-text-disabled);
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

/* Layout congrès - grille responsive */
.congress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr));
  gap: 2rem;
}

@media (max-width: 52.5rem) {
  .congress-grid {
    grid-template-columns: 1fr;
  }
}

/* Navigation réanimation (3 pages avec flux) */
.reanimation-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0;
  background-color: transparent;
  border-radius: 0.25rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.nav-btn {
  padding: 0.35rem 0.75rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 6.25rem;
  text-align: center;
}

.nav-btn:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(200, 82, 71, 0.2);
}

.nav-btn:disabled,
.nav-btn.disabled {
  background-color: var(--gray-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.nav-breadcrumb {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}

.nav-breadcrumb a {
  padding: 0.35rem 0.75rem;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--palette-blue);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.nav-breadcrumb a:hover {
  background-color: var(--white-pale);
  border-color: var(--palette-blue);
}

.nav-breadcrumb a.active {
  background-color: var(--palette-blue);
  color: var(--white);
  border-color: var(--palette-blue);
  font-weight: 600;
}

/* Mode sombre : améliorer la lisibilité des boutons */
@media (prefers-color-scheme: dark) {
  .nav-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 0.0625rem solid var(--btn-primary-bg);
  }

  .nav-btn:hover {
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
  }

  .nav-breadcrumb a {
    background-color: var(--bg-primary);
    border-color: var(--border-subtle);
    color: var(--palette-blue);
  }

  .nav-breadcrumb a:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--palette-blue);
  }

  .nav-breadcrumb a.active {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
  }
}

@media (max-width: 52.5rem) {
  .reanimation-nav {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .nav-btn {
    width: 100%;
  }

  .nav-breadcrumb {
    width: 100%;
    gap: 0.25rem;
  }

  .nav-breadcrumb a {
    flex: 1 1 auto;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Navigation grand-public (3 pages avec flux) */
.grand-public-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0;
  background-color: transparent;
  border-radius: 0.25rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.grand-public-nav .nav-btn {
  padding: 0.5rem 1rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 6.25rem;
  text-align: center;
}

.grand-public-nav .nav-btn:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(200, 82, 71, 0.2);
}

.grand-public-nav .nav-btn:disabled,
.grand-public-nav .nav-btn.disabled {
  background-color: var(--gray-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.grand-public-nav .nav-breadcrumb {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}

.grand-public-nav .nav-breadcrumb a {
  padding: 0.35rem 0.75rem;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--palette-blue);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.grand-public-nav .nav-breadcrumb a:hover {
  background-color: var(--white-pale);
  border-color: var(--palette-blue);
}

.grand-public-nav .nav-breadcrumb a.active {
  background-color: var(--palette-blue);
  color: var(--white);
  border-color: var(--palette-blue);
  font-weight: 600;
}

/* Mode sombre : améliorer la lisibilité des boutons grand-public */
@media (prefers-color-scheme: dark) {
  .grand-public-nav .nav-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 0.0625rem solid var(--btn-primary-bg);
  }

  .grand-public-nav .nav-btn:hover {
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
  }

  .grand-public-nav .nav-breadcrumb a {
    background-color: var(--bg-primary);
    border-color: var(--border-subtle);
    color: var(--palette-blue);
  }

  .grand-public-nav .nav-breadcrumb a:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--palette-blue);
  }

  .grand-public-nav .nav-breadcrumb a.active {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
  }
}

@media (max-width: 52.5rem) {
  .grand-public-nav {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .grand-public-nav .nav-btn {
    width: 100%;
  }

  .grand-public-nav .nav-breadcrumb {
    width: 100%;
    gap: 0.25rem;
  }

  .grand-public-nav .nav-breadcrumb a {
    flex: 1 1 auto;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Articles de contenu long (réanimation, recommandations, etc.) */
.content-article {
  line-height: 1.8;
  color: var(--text-normal);
}

.content-article h2 {
  font-size: 1.5rem;
  color: var(--palette-blue);
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 0.125rem solid var(--border-subtle);
}

.content-article h3 {
  font-size: 1.2rem;
  color: var(--blue-light);
  margin: 1.5rem 0 0.75rem 0;
}

.content-article h4 {
  font-size: 1rem;
  color: var(--text-normal);
  margin: 1rem 0 0.5rem 0;
  font-weight: 600;
}

.content-article p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.content-article ul,
.content-article ol {
  margin-left: 0;
  margin-bottom: 1rem;
}

.content-article ul li {
  list-style-type: none;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1rem;
}

.content-article ul li::before {
  content: "— ";
  position: absolute;
  left: 0;
  color: inherit;
  font-weight: 600;
}

/* Le texte des listes conserve la couleur normale ; le tiret reste bleu */

/* Liste sans tirets - optimized */
.no-bullets li {
  list-style-type: none;
  padding-left: 0;
}

.no-bullets li::before {
  content: none;
}

.content-article ol li {
  margin-bottom: 0.5rem;
}

.content-article li {
  margin-bottom: 0.5rem;
}

.content-article strong {
  color: var(--text-primary);
  font-weight: 600;
}

.content-article em {
  font-style: italic;
  color: var(--text-muted);
}

.content-article blockquote {
  border-left: 0.25rem solid var(--palette-blue);
  padding-left: 1.5rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-style: italic;
}

.content-article code {
  background-color: var(--bg-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
}

.content-article pre {
  background-color: var(--bg-primary);
  padding: 1rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  border-left: 0.25rem solid var(--palette-blue);
}

.content-article pre code {
  background: none;
  padding: 0;
}

.content-article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.content-article table th,
.content-article table td {
  border: 0.0625rem solid var(--border-subtle);
  padding: 0.75rem;
  text-align: left;
}

.content-article table th {
  background-color: var(--palette-blue);
  color: white;
  font-weight: 600;
}

.content-article table tr:nth-child(even) {
  background-color: var(--white-off);
}

/* Mode sombre : améliorer la lisibilité des tables */
@media (prefers-color-scheme: dark) {
  .content-article h2 {
    color: var(--palette-blue-light);
  }

  .content-article h3 {
    color: var(--text-normal);
  }

  .content-article table th,
  .content-article table td {
    border-color: var(--border-subtle);
    color: var(--text-normal);
  }

  .content-article table th {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
  }

  .content-article table tr:nth-child(even) {
    background-color: var(--bg-tertiary);
  }

  .content-article table tr:nth-child(odd) {
    background-color: var(--bg-primary);
  }
}

@media (prefers-color-scheme: dark) {
  .about-text h2 {
    color: var(--palette-blue-light);
  }
}

.content-article a {
  color: var(--palette-blue);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.content-article a:hover {
  color: var(--palette-red);
  text-decoration: none;
}

/* Mode sombre : liens utilisant text-normal comme les autres pages */
@media (prefers-color-scheme: dark) {
  .content-article a {
    color: var(--text-normal) !important;
  }

  .content-article a:hover {
    color: var(--palette-red) !important;
  }
}

/* Navigation sections - compact variant */
.section-nav-compact {
  padding: 0;
}

/* Page title section */
.page-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--palette-blue);
}

.page-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* ================================================================
   TABLE OF CONTENTS SIDEBAR - Menu Latéral Fixe
================================================================ */

#toc-sidebar {
  position: fixed;
  left: 0;
  top: var(--header-height, 10.625rem);
  width: 10.625rem;
  height: calc(100vh - var(--header-height, 12.5rem) - 6.875rem);
  background-color: var(--bg-secondary);
  border-right: 0.0625rem solid var(--border-subtle);
  overflow: hidden;
  z-index: 999;
  font-size: 0.9rem;
}

#toc-sidebar .toc-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 0;
}

/* Scrollbar personnalisée pour le menu */
#toc-sidebar .toc-nav::-webkit-scrollbar {
  width: 0.375rem;
}

#toc-sidebar .toc-nav::-webkit-scrollbar-track {
  background: transparent;
}

#toc-sidebar .toc-nav::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 0.1875rem;
  opacity: 0.4;
}

#toc-sidebar .toc-nav::-webkit-scrollbar-thumb:hover {
  opacity: 0.6;
}

/* Scrollbar styling - webkit (Chrome, Safari, Edge) */
#toc-sidebar .toc-nav::-webkit-scrollbar {
  width: 0.5rem;
}

#toc-sidebar .toc-nav::-webkit-scrollbar-track {
  background: transparent;
}

#toc-sidebar .toc-nav::-webkit-scrollbar-thumb {
  background-color: var(--text-secondary);
  border-radius: 0.25rem;
}

/* Firefox scrollbar - ignored by other browsers */
#toc-sidebar .toc-nav {
  scrollbar-color: var(--text-secondary) transparent;
  scrollbar-width: thin;
}

/* Lien actif dans le TOC */
#toc-sidebar .toc-nav a.active {
  text-decoration: underline !important;
  color: var(--palette-red) !important;
}

/* Removed unused classes: toc-list, toc-item, toc-link, toc-level-1-4 */

/* Responsive : Cacher le menu sur petit écran */
@media (max-width: 1400px) {
  #toc-sidebar {
    display: none;
  }

  main {
    margin-left: 0 !important;
  }
}

/* Navigation entre pages (Secouriste, Réanimation) */
.subnav-pages {
  background-color: transparent;
  border-bottom: none;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
}

.subnav-pages ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.subnav-pages li {
  flex: 0 1 auto;
  min-width: auto;
}

.subnav-pages a {
  display: block;
  padding: 0.5rem 1rem;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  text-decoration: none;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.95rem;
}

.subnav-pages a:hover {
  color: var(--palette-red);
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--palette-red);
}

.subnav-pages a.active {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

@media (prefers-color-scheme: dark) {
  .subnav-pages {
    background-color: transparent;
    border-bottom-color: transparent;
  }

  .subnav-pages a {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--border-subtle);
  }

  .subnav-pages a:hover {
    background-color: var(--btn-secondary-bg-hover);
    border-color: var(--palette-blue);
  }

  .subnav-pages a.active {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
  }
}

/* Le menu est en overlay, pas de décalage du contenu */
main {
  margin-left: 0;
}

/* ============================================================ */
/* FILTRES DE TRI - PAGE TEXTES RÉGLEMENTAIRES */
/* ============================================================ */

/* Removed unused classes: sorting-filters, sort-btn */

/* ============================================================ */
/* STYLES TEXTES RÉGLEMENTAIRES - PAGE SECOURISME-TEXTES */
/* ============================================================ */

.textes-warning {
  background-color: var(--bg-tertiary);
  border-left: 0.25rem solid var(--btn-primary-bg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.25rem;
}

.textes-warning p {
  margin-bottom: 1rem;
  color: var(--text-normal);
}

.textes-warning p:last-child {
  margin-bottom: 0;
}

.textes-warning strong {
  color: var(--btn-primary-bg);
}

.textes-warning a {
  color: var(--palette-blue);
  text-decoration: underline;
}

.textes-warning a:hover {
  color: var(--palette-red);
}
/* Removed unused classes: textes-filters, filter-buttons, filter-btn */

.content-article ul li {
  line-height: 1.7;
  margin-bottom: 0.7rem;  /* 1.2rem */
}

strong a {
  color: var(--palette-blue);
  text-decoration: none;
}

strong a:hover {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  strong a {
    color: var(--text-primary);
  }

  .textes-warning {
    background-color: var(--bg-tertiary);
    border-left-color: var(--btn-primary-bg);
  }
}
/* ------------------------------------------------------------------
   SECTION TÉLÉCHARGER L'APP ERC
------------------------------------------------------------------ */

.app-download-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

/* Colonne avec les liens des stores */
.app-stores-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.app-store-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-store-link:hover {
  transform: translateY(-0.125rem);
  border-color: var(--palette-blue);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 71, 171, 0.15);
}

.app-store-icon,
.play-store-icon {
  width: auto;  /* 2.5rem; */
  height: 5rem;  /* 2.5rem; */
  flex-shrink: 0;
  color: var(--palette-blue);
  transition: color 0.2s ease;
}

/* Icône "Dernière édition" pour les référentiels */
.latest-edition-icon {
  display: inline;
  width: 24px;
  height: 24px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

@media (min-width: 37.5rem) {
  .latest-edition-icon {
    width: 32px;
    height: 32px;
  }
}

/* Afficher/masquer les images selon le mode sombre/clair */
.dark-mode-switch .dark-img {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .dark-mode-switch .light-img {
    display: none;
  }

  .dark-mode-switch .dark-img {
    display: block;
  }
}

html[data-theme="dark"] .dark-mode-switch .light-img {
  display: none;
}

html[data-theme="dark"] .dark-mode-switch .dark-img {
  display: block;
}

.app-store-link:hover .app-store-icon,
.app-store-link:hover .play-store-icon {
  color: var(--palette-red);
}

/* Colonne avec le QR Code */
.app-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-image {
  max-width: 100%;
  width: clamp(200px, 100%, 300px);
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  border: 0.0625rem solid transparent;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  .app-store-link {
    background-color: var(--card-bg);
  }

  .app-store-link:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(219, 228, 255, 0.1);
  }
}

/* Responsive : mobile (max-width 37.5rem / 600px) */
@media (max-width: 37.5rem) {
  .app-download-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .app-stores-links {
    align-items: center;
  }

  .app-qrcode {
    order: -1; /* QR code en haut sur mobile */
    justify-content: center;
  }

  .qrcode-image {
    width: clamp(150px, 100%, 250px);
  }

  .app-store-link {
    padding: 1rem;
    font-size: 0.95rem;
    justify-content: center;
  }

  .app-store-icon,
  .play-store-icon {
    width: 60%;
    height: auto;
  }
}

/* Illustrations réduites à 40% */
.illustration-reduced-40 {
  max-width: 40%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.1));
}

/* Illustrations réduites à 60% */
.illustration-reduced-60 {
  max-width: 60%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.1));
}

/* Illustrations réduites à 80% */
.illustration-reduced-80 {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.1));
}

.illustration-reduced img {
  border-radius: var(--radius-card);
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive : tablette et mobile */
@media (max-width: 48rem) {
  .illustration-reduced {
    max-width: 80%;
  }
}

@media (max-width: 37.5rem) {
  .illustration-reduced {
    max-width: 100%;
    margin: 1rem auto;
  }
}