/* =============================================================================
   BNSSA.CSS — Charte graphique unifiée
   Jeunesse & Avenir — Formation BNSSA
   Bootstrap 5.3.x + custom layer
   =============================================================================

   SOMMAIRE
   ────────────────────────────────────────────────────────────────────────────
   1.  TOKENS — Variables CSS (palette, typographie, ombres, rayons)
   2.  BASE — Reset léger, body, liens
   3.  TYPOGRAPHIE — Barlow Condensed, Inter, échelle de taille
   4.  HERO / HEADER — Section hero, navbar, wave-divider
   5.  LAYOUT — Container, sections, page-section
   6.  COMPOSANTS — Cards, Badges, Accordéons, Tables
       6a. Card générique
       6b. Card Chapter (page d'accueil)
       6c. Card Section (headers colorés)
       6d. Diplôme icon
       6e. Épreuves (vidéo thumb + numéro)
       6f. QCM
       6g. Accordéons (style plage)
       6h. Tables récapitulatives
       6i. Barre de progression
   7.  UTILITAIRES — Classes helper
   8.  FOOTER
   9.  RESPONSIVE
   10. PRINT
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS — Variables CSS
   ───────────────────────────────────────────────────────────────────────────── */

:root {

  /* Palette principale */
  --ocean: #0B3D6E;
  /* Bleu marine profond  — headers, textes forts   */
  --ocean-mid: #1464B3;
  /* Bleu marine moyen    — dégradé secondaire       */
  --ocean-light: #185FA5;
  /* Bleu soutenu         — variante claire          */
  --ocean-faint: #D8E8F2;
  /* Bleu très clair      — bordures de cards        */

  --cyan: #0DCAF0;
  /* Cyan vif             — accents, liens, arrows   */
  --cyan-lt: rgba(13, 202, 240, 0.55);
  /* Cyan demi-transparent          */
  --cyan-lt2: rgba(13, 202, 240, 0.25);
  /* Cyan très transparent          */
  --cyan-bg: #A1F3F8;
  /* Cyan très clair      — fond sections dangers    */
  --cyan-bg2: #43C4F7;
  /* Cyan moyen           — fond sections vagues     */

  --alert: #D9534F;
  /* Rouge alerte         — bouton Suite, danger     */
  --alert-dark: #7F0C0C;
  /* Rouge foncé          — responsabilité pénale    */
  --alert-mid: #B52020;
  /* Rouge moyen          — dégradé pénal            */

  --gold: #E5A800;
  /* Or                   — ACM, Jet-ski             */
  --gold-light: #F0C020;
  /* Or clair             — dégradé ACM              */
  --gold-dark: #B8860B;
  /* Or foncé             — texte sur fond clair     */

  --green: #1A7A4A;
  /* Vert                 — header-green             */
  --green-mid: #2DA562;
  /* Vert moyen           — dégradé                  */
  --green-vif: #2DC873;
  /* Vert vif             — Activités / env.         */
  --green-dark: #1B8C4F;
  /* Vert foncé           — dégradé env.            */

  --purple: #6F42C1;
  /* Violet               — header-purple            */
  --purple-mid: #8A63D2;
  /* Violet moyen         — dégradé                  */

  --slate: #2C3E50;
  /* Ardoise              — synthèse, récap          */
  --slate-mid: #4A6080;
  /* Ardoise claire       — dégradé synthèse         */

  --steel-lt: #D3D1C7;
  /* Acier clair          — responsabilité admin.    */
  --steel-mid: #B4B2A9;
  /* Acier moyen          — dégradé admin.           */

  /* Neutres */
  --bg-page: #F8F9FA;
  /* Fond de page Bootstrap bg-light                 */
  --bg-card: #FFFFFF;
  /* Fond de card                                    */
  --bg-page-alt: #EEF8FF;
  /* Fond alternatif (page Plages)                   */

  /* Gradients nommés */
  --grad-hero: linear-gradient(160deg, var(--ocean) 55%, #0E5C9E 100%);
  --grad-ocean: linear-gradient(100deg, var(--ocean), var(--ocean-mid));
  --grad-ocean-blue: linear-gradient(100deg, var(--ocean-light), #378ADD);
  --grad-gold: linear-gradient(100deg, var(--gold-dark), var(--gold));
  --grad-gold-bright: linear-gradient(100deg, var(--gold), var(--gold-light));
  --grad-green: linear-gradient(100deg, var(--green), var(--green-mid));
  --grad-green-vif: linear-gradient(100deg, var(--green-vif), var(--green-dark));
  --grad-purple: linear-gradient(100deg, var(--purple), var(--purple-mid));
  --grad-slate: linear-gradient(100deg, var(--slate), var(--slate-mid));
  --grad-alert: linear-gradient(100deg, var(--alert-dark), var(--alert-mid));
  --grad-steel: linear-gradient(100deg, var(--steel-lt), var(--steel-mid));
  --grad-plage-accord: linear-gradient(135deg, var(--ocean), var(--ocean-mid));

  /* Typographie */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Taille de texte — échelle */
  --text-xs: .72rem;
  --text-sm: .82rem;
  --text-base: .93rem;
  --text-md: .97rem;
  --text-body: 1rem;
  --text-lg: 1.05rem;
  --text-xl: 1.2rem;
  --text-2xl: 1.35rem;
  --text-3xl: clamp(2.2rem, 5vw, 3.8rem);

  /* Ombres */
  --shadow-card: 0 2px 12px rgba(11, 61, 110, .08);
  --shadow-card-lg: 0 8px 30px rgba(11, 61, 110, .12);
  --shadow-img: 0 8px 20px rgba(0, 0, 0, .15);
  --shadow-plage: 0 10px 30px rgba(0, 0, 0, .08);

  /* Rayons */
  --radius-sm: .375rem;
  /* 6px  */
  --radius-md: .75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.5rem;
  /* 24px */

  /* Transitions */
  --transition-fast: .15s ease;
  --transition-base: .25s ease;

  /* Dimensions utilitaires */
  --icon-sm: 42px;
  --icon-md: 44px;
  --icon-lg: 52px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  background-color: var(--bg-page);
  color: #212529;
  -webkit-font-smoothing: antialiased;
}

/* Variante fond plages — utilisée via classe sur <body> ou section */
body.bg-plage,
.bg-plage {
  background: linear-gradient(180deg, var(--bg-page-alt), #F8FBFD) !important;
}

a {
  color: var(--ocean);
}

a:hover {
  color: var(--cyan);
}

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

.fond-header {
  background-image: url('../Img/Site/apnee.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--grad-hero);
}



/*


─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHIE
   ───────────────────────────────────────────────────────────────────────────── */

/* Famille display — Barlow Condensed */
.ff-barlow {
  font-family: var(--font-display) !important;
}

/* Surtitre de section (ex: "Chapitres du cours") */
.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #6C757D;
  border-bottom: 2px solid currentColor;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}

/* Couleurs de texte utilitaires liées à la palette */
.text-ocean {
  color: var(--ocean) !important;
}

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

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

.text-gold {
  color: var(--gold-dark) !important;
}

.text-green-bnssa {
  color: var(--green) !important;
}

/* Lien inline discret */
.link-ocean {
  color: var(--ocean);
  text-decoration: underline dotted;
  cursor: help;
}

.link-cyan {
  color: var(--cyan);
  text-decoration: none;
}

.link-cyan:hover {
  color: var(--ocean);
}

/* Interligne de lecture */
.lh-read {
  line-height: 1.75;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. HERO / HEADER
   ───────────────────────────────────────────────────────────────────────────── */

/* Section hero principale */
.hero-bg {
  background: var(--grad-hero);
}

/* Navbar dans le hero */
.hero-bg .navbar {
  z-index: 10;
}

/* Surtitre dans le hero ("Formation BNSSA") */
.hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cyan);
  margin-bottom: .5rem;
}

/* Titre H1 hero */
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  font-size: var(--text-3xl);
  margin-bottom: .75rem;
}

.hero-title em {
  font-style: normal;
  color: var(--cyan);
}

/* Description sous le titre */
.hero-description {
  max-width: 520px;
  color: var(--cyan-lt);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0 auto 1.5rem;
}

/* Bouton "Suite" (coin nav) */
.btn-suite {
  background-color: var(--alert);
  border-radius: 3px;
  letter-spacing: .06em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: #FFFFFF;
  border: none;
  padding: .35rem .85rem;
  transition: background-color var(--transition-fast);
}

.btn-suite:hover,
.btn-suite:focus {
  background-color: var(--alert-mid);
  color: #FFFFFF;
}

/* Séparateur vague */
.wave-divider {
  line-height: 0;
  margin-bottom: -2px;
}

.wave-divider svg {
  display: block;
  width: 100%;
}

/* OffCanvas — menu des cours */
.offcanvas .nav-link:hover,
.offcanvas .nav-link:focus {
  background-color: rgba(11, 61, 110, .07);
  color: var(--ocean);
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

/* Container principal des pages cours */
main.container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Container élargi (page Plages, contenu dense) */
main.container-wide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Sticky nav d'ancres (SurvPiscines) */
.sticky-anchors {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: #FFFFFF;
  border-bottom: 1px solid #DEE2E6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  padding: .5rem 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. COMPOSANTS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 6a. Card générique ─────────────────────────────────────────────────────── */

.card {
  border-radius: var(--radius-md);
}

/* Ombres standardisées */
.card.shadow-sm {
  box-shadow: var(--shadow-card) !important;
}

.card.shadow-md {
  box-shadow: var(--shadow-card-lg) !important;
}

/* Images dans les cards */
.card img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-img);
}


/* ── 6b. Card Chapter (index.php) ───────────────────────────────────────────── */

.chapter-card {
  border-color: var(--ocean-faint);
  transition: transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg) !important;
  border-color: var(--cyan) !important;
}

.chapter-card:hover .card-arrow {
  opacity: 1 !important;
  transform: translateX(4px);
}

/* Variante mise en avant (épreuves) */
.card-highlight {
  background-color: #FFF8F5 !important;
}

.card-highlight:hover {
  border-color: var(--alert) !important;
}

.card-arrow {
  transition: opacity var(--transition-fast),
    transform var(--transition-fast);
}


/* ── 6c. Card Section — headers colorés ─────────────────────────────────────── */

/*
   Système de couleurs pour les en-têtes de sections.
   Usage : <div class="card-section-header header-COULEUR">
   Remplace TOUS les style="background:..." inline sur les card-headers.
*/

.card-section-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.5rem;
  color: #FFFFFF;
}

/* Bleu principal — le plus fréquent */
.header-blue {
  background: var(--grad-ocean);
}

/* Bleu clair (section noyade asphyxique) */
.header-blue-lt {
  background: var(--grad-ocean-blue);
}

/* Vert (surveillants, baignade syncopale) */
.header-green {
  background: var(--grad-green);
}

/* Or / Jaune (ACM, permis) */
.header-gold {
  background: var(--grad-gold-bright);
  color: #212529;
}

/* Violet (diplômes, ressources) */
.header-purple {
  background: var(--grad-purple);
}

/* Ardoise (synthèse, récap) */
.header-slate {
  background: var(--grad-slate);
}

/* Rouge (responsabilité pénale) */
.header-alert {
  background: var(--grad-alert);
}

/* Acier (responsabilité administrative) */
.header-steel {
  background: var(--grad-steel);
  color: #212529;
}

/* Vert vif (environnement marin) */
.header-green-vif {
  background: var(--grad-green-vif);
}

/* Alias legacy — conservés pour compatibilité avec les fichiers existants */
.header-yellow {
  background: var(--grad-gold-bright);
  color: #212529;
}


/* ── 6d. Diplôme / Section icon ─────────────────────────────────────────────── */

.diplome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sm);
  height: var(--icon-sm);
  font-size: 1.4rem;
  background-color: rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Variante ronde (Activités, SurvPiscines) */
.section-icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  font-size: 1.3rem;
  background-color: rgba(255, 255, 255, .25);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── 6e. Épreuves — vidéo thumb + numéro ───────────────────────────────────── */

/* Numéro d'épreuve */
.epreuve-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFFFFF;
  background-color: var(--ocean);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Thumbnail vidéo */
.video-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}

.video-thumb img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-img);
  transition: filter var(--transition-base);
}

.video-thumb:hover img {
  filter: brightness(.8);
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 61, 110, .15);
  border-radius: var(--radius-sm);
  opacity: 1;
  transition: background var(--transition-base);
}

.video-thumb:hover .play-overlay {
  background: rgba(11, 61, 110, .45);
}

.play-icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.video-thumb:hover .play-icon {
  transform: scale(1.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}


/* ── 6f. QCM ────────────────────────────────────────────────────────────────── */

/* Carte question */
.qcm-card {
  transition: box-shadow var(--transition-fast);
}

.qcm-card:target {
  scroll-margin-top: 80px;
}

/* Option cliquable */
.qcm-option {
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast);
  border-radius: var(--radius-sm);
}

.qcm-option:hover {
  background-color: rgba(13, 202, 240, .08);
  border-color: var(--cyan) !important;
}

/* Explication masquée par défaut */
.qcm-exp {
  border-left: 4px solid var(--cyan);
  background-color: #F0F7FF;
  padding: .5rem .75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-base);
  line-height: 1.65;
}

/* Barre de progression QCM */
.progress-bar-qcm {
  background-color: var(--cyan);
  transition: width .4s ease;
}

/* Résultats */
.qcm-result-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Table recap diplômes */
.recap-table th,
.recap-table td {
  vertical-align: middle;
  text-align: center;
}

.recap-table td:first-child {
  text-align: left;
}


/* ── 6g. Accordéons ─────────────────────────────────────────────────────────── */

/*
   Style "standard" — utilisé dans POSS, Noyade, Diplômes, ACM, SurvPiscines.
   Léger, pas de rayon extrême, cohérent Bootstrap.
*/
.accordion-item {
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 0 !important;
}

.accordion-item:last-child {
  border-bottom: none !important;
}

/*
   Style "plage" — utilisé sur la page Plages.php (accordéons très arrondis
   avec header bleu plein à l'ouverture).
   Activer via le parent .accordion-plage
*/
.accordion-plage .accordion-item {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-plage) !important;
}

.accordion-plage .accordion-button {
  padding: 1.25rem 1.5rem;
}

.accordion-plage .accordion-button h3 {
  margin: 0;
  font-weight: 800;
  color: var(--ocean) !important;
  font-family: var(--font-display);
}

.accordion-plage .accordion-button:not(.collapsed) {
  background: var(--grad-plage-accord);
  color: #FFFFFF;
}

.accordion-plage .accordion-button:not(.collapsed) h3 {
  color: #FFFFFF !important;
}

.accordion-plage .accordion-body {
  padding: 2rem;
  background-color: #FFFFFF;
}

/* Flèche de l'accordéon Bootstrap — harmonisation couleur */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(11, 61, 110, .2);
}


/* ── 6h. Tables récapitulatives ─────────────────────────────────────────────── */

.table-recap th {
  background-color: var(--ocean);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.table-recap td {
  vertical-align: middle;
}


/* ── 6i. Barre de progression ───────────────────────────────────────────────── */

/* Surcharge Bootstrap pour les progress bars du site */
.progress {
  border-radius: var(--radius-sm);
  background-color: #E9ECEF;
}

.progress-bar {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  transition: width .5s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. UTILITAIRES
   ───────────────────────────────────────────────────────────────────────────── */

/* Labels typographiques récurrents */
.sub-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ocean);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.point-label {
  font-style: italic;
  font-weight: 600;
  color: var(--ocean);
}

/* Tooltip texte pointillé */
.tooltip-dotted {
  cursor: help;
  text-decoration: underline dotted;
  color: var(--ocean);
}

/* Blockquote / citation pédagogique */
.citation-block {
  border-left: 4px solid var(--ocean);
  padding: .6rem 1rem;
  background-color: rgba(11, 61, 110, .06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Bloc info coloré (alerte bleue custom) */
.bloc-info {
  border-left: 4px solid var(--cyan);
  background-color: #F0F7FF;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6rem 1rem;
  font-size: var(--text-base);
  line-height: 1.65;
}

/* Facebook hover dans le footer */
.hover-opacity-100:hover {
  opacity: 1 !important;
}

/* Fond alternatif pour sections dangers (Dangers-Mer.php) */
.bg-dangers-light {
  background-color: var(--cyan-bg);
}

.bg-dangers-mid {
  background-color: var(--cyan-bg2);
}

.bg-dangers-inner {
  background: rgba(59, 173, 255, .30);
}

/* Sections colorées Dangers-Mer (remplace style="background-color:#A1F3F8") */
.section-dangers {
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.section-dangers-light {
  background-color: var(--cyan-bg);
}

.section-dangers-mid {
  background-color: var(--cyan-bg2);
}

/* Surcharge Bootstrap icons taille */
.bi-lg {
  font-size: 1.5rem;
}

.bi-xl {
  font-size: 2rem;
}

.bi-2xl {
  font-size: 2.5rem;
}

/* Largeur bouton full dans offcanvas */
.offcanvas-footer {
  padding: 1rem;
  background-color: var(--bg-page);
  border-top: 1px solid rgba(0, 0, 0, .1);
  text-align: center;
  width: 100%;
}

/* Numéros d'étapes (Role.php — journée type) */
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: #FFFFFF;
}

.step-num-1 {
  background-color: var(--ocean);
}

.step-num-2 {
  background-color: var(--cyan);
}

.step-num-3 {
  background-color: #DC3545;
}

.step-num-4 {
  background-color: #198754;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--ocean);
  color: rgba(255, 255, 255, .85);
  padding-top: .5rem;
  padding-bottom: 2rem;
}

.site-footer a {
  color: rgba(255, 255, 255, .85);
}

.site-footer a:hover {
  color: var(--cyan);
}

.site-footer .border-top {
  border-color: rgba(255, 255, 255, .2) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .card-section-header {
    padding: .75rem 1rem;
  }

  .diplome-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .chapter-card {
    padding: .75rem !important;
  }

  .accordion-plage .accordion-body {
    padding: 1.25rem;
  }

  main.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sticky-anchors .btn {
    font-size: .7rem;
    padding: .25rem .5rem;
  }

  /* Tableau responsive — texte plus compact */
  .table-recap {
    font-size: var(--text-xs);
  }
}

@media (max-width: 575.98px) {

  .hero-description {
    font-size: .9rem;
  }

  .section-eyebrow {
    font-size: .7rem;
  }

  .epreuve-num {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. PRINT
   ───────────────────────────────────────────────────────────────────────────── */

@media print {

  .hero-bg,
  .wave-divider,
  .site-footer,
  .sticky-anchors,
  .offcanvas,
  .btn-suite,
  .video-thumb .play-overlay,
  nav.navbar {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000 !important;
    font-size: 10pt;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #CCC !important;
    break-inside: avoid;
  }

  .card-section-header,
  [class*="header-"] {
    background: var(--ocean) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .75em;
    color: #555;
  }

  /* Masquer les URLs trop longues */
  a[href^="http"]::after {
    content: "";
  }
}