/* ====== CNRD 2004 — feuille locale (propre) ====== */
.cnrd-2004{
  --max: min(1200px, 96vw);
  --gap: 16px;
  --r: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --panel: #f5f2ea;
  --bleu: #e9f0fb;
  --bleu-line: #cfe0ff;
  --ink: #111418;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.cnrd-2004.page-content{ max-width: var(--max); margin: 0 auto; padding: 16px 0; }
.cnrd-2004 p{ margin-bottom: .8rem; }

/* ===== Bandeau titre façon g1418 ===== */
.g1418-page{ --bleu: #1f4f7a; }
.g1418-header{
  background: var(--bleu);
  color:#fff;
  border-radius:.5rem;
  padding:.65rem .9rem;
  margin: 8px 0 16px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.2);
}
.g1418-header .page-title{ margin:0 0 .25rem; line-height:1.25; text-align:center; }
.g1418-header .page-subtitle{
  margin:0; text-align:center; font-style: italic;
  font-size: clamp(1.25rem, .85vw + 1.2rem, 1.55rem); color:#f0f4fa;
}

/* ===== Diaporama JPG ===== */
.cnrd-2004 .slides{ display:grid; gap: var(--gap); }
.cnrd-2004 .slide-figure{
  margin:0; background:#fff; border-radius: var(--r);
  box-shadow: var(--shadow); overflow:hidden;
}
.cnrd-2004 .slide-figure img{ display:block; width:100%; height:auto; }

/* ===== Footer Sommaire / Pages (CSS-only, sans styles inline) ===== */
/* HTML attendu :
<footer id="slidesFooter">
  <a class="sommaire-link" href="/concours_resistance_ffl/concours_resistance_ffl.php">⟵ Sommaire</a>
  <nav class="slides-index" aria-label="Pages">
    <span class="pages-label">Pages</span>
    <!-- liens 1..n -->
  </nav>
</footer>
*/
#slidesFooter{
  position: relative;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 6px 0;
}

/* Sommaire ABSOLUMENT à gauche et désincrusté de .btn global */
#slidesFooter .sommaire-link{
  position:absolute; left:0; top:50%; transform: translateY(-50%);
  display:inline-block; white-space:nowrap; margin:0;
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0; text-decoration:underline; cursor:pointer; z-index:1;
}

/* “Pages …” CENTRÉ en absolu */
#slidesFooter .slides-index{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  width:auto; text-align:center; justify-content:center;
}
#slidesFooter .pages-label{ font-weight:600; margin-right:4px; }
#slidesFooter .slide-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--bleu-line); text-decoration:none;
}
#slidesFooter .slide-link:hover{ transform: translateY(-1px); }

/* ===== Utilitaires (au cas où) ===== */
.clickable{ cursor: pointer !important; }
.no-click { pointer-events: none !important; cursor: default !important; }

/* ===== Neutralisations locales (si l’ancien PDF était présent) ===== */
.cnrd-2004 .pdf-actions{ display: contents !important; }

/* On ne désactive QUE le clic du lien autour de l'image */
.cnrd-2004 .slide-figure > a.img-link { pointer-events: none; cursor: default; }

/* Les hotspots par-dessus l'image */
.cnrd-2004 .slide-figure.has-hotspots { position: relative; }
.cnrd-2004 .slide-figure .hotspots {
  position: absolute; inset: 0; /* occupe tout le cadre image */
}

/* Un hotspot cliquable et accessible */
.cnrd-2004 .slide-figure .hotspot {
  position: absolute;
  display: block;
  outline: none;
  cursor: pointer;
}

/* Feedback visuel au survol / focus clavier */
.cnrd-2004 .slide-figure .hotspot::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid var(--bleu-line);
  box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset, 0 2px 8px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .12s ease;
}
.cnrd-2004 .slide-figure .hotspot:hover::after,
.cnrd-2004 .slide-figure .hotspot:focus-visible::after {
  opacity: 1;
}

/* Ne pas montrer la main NI le clic sur le lien QUI ENVELOPPE l'image */
.cnrd-2004 .slide-figure > a.img-link {
  pointer-events: none !important;
  cursor: default !important;
}

/* Hotspots sur la DERNIÈRE image : cliquables + main visible */
.cnrd-2004 .slide-figure.has-hotspots { position: relative; }
.cnrd-2004 .slide-figure.has-hotspots .hotspots { position: absolute; inset: 0; }
.cnrd-2004 .slide-figure.has-hotspots .hotspot {
  position: absolute;
  display: block;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 3;
}

/* Sécurité : tout lien dans un slide qui n'est PAS l'image reprend la main */
.cnrd-2004 .slide-figure a:not(.img-link) {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Neutralise l'outline natif (dont Firefox) */
.cnrd-2004 .slide-figure .hotspot { outline: none; }
.cnrd-2004 .slide-figure .hotspot:focus { outline: none; }
.cnrd-2004 .slide-figure .hotspot:-moz-focusring { outline: none; } /* FF */

/* On retire notre liseré blanc et l'effet hover */
.cnrd-2004 .slide-figure .hotspot::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid transparent;      /* plus de bord visible par défaut */
  box-shadow: 0 2px 8px rgba(0,0,0,.12);  /* ombre douce uniquement */
  opacity: 0; transition: opacity .12s ease;
}

/* Afficher SEULEMENT au focus clavier */
@supports selector(:focus-visible) {
  .cnrd-2004 .slide-figure .hotspot:hover::after { opacity: 0; }     /* pas d’effet au survol souris */
  .cnrd-2004 .slide-figure .hotspot:focus-visible::after {
    border-color: #2563eb;     /* bleu discret, change si besoin */
    opacity: 1;
  }
}

/* Focus clavier visible sur les hotspots (tous navigateurs) */
.cnrd-2004 .slide-figure .hotspot { outline: none; }

/* Base invisible par défaut */
.cnrd-2004 .slide-figure .hotspot::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .12s ease;
}

/* Afficher l’anneau au focus (clavier) */
.cnrd-2004 .slide-figure .hotspot:focus-visible::after,
.cnrd-2004 .slide-figure .hotspot:focus::after,          /* fallback */
.cnrd-2004 .slide-figure .hotspot:-moz-focusring::after { /* Firefox */
  border-color: #2563eb;
  opacity: 1;
}

/* Assure une pile propre au-dessus de l'image */
.cnrd-2004 .slide-figure { position: relative; overflow: hidden; }

/* Le lien autour de l'image reste en dessous */
.cnrd-2004 .slide-figure > a.img-link {
  position: relative; 
  z-index: 1; 
  pointer-events: none !important; 
  cursor: default !important;
}

/* Le calque des hotspots passe au-dessus de l'image */
.cnrd-2004 .slide-figure.has-hotspots .hotspots {
  position: absolute; inset: 0;
  z-index: 5;             /* > 1 pour passer devant l'image */
  pointer-events: none;   /* laisse passer les événements aux <a> enfants */
}

/* Chaque hotspot est cliquable et au-dessus */
.cnrd-2004 .slide-figure.has-hotspots .hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;   /* re-active le clic pour le lien lui-même */
  cursor: pointer;
  z-index: 6;             /* au-dessus du conteneur */
  outline: none;
}

/* Anneau visible (hover + focus clavier) */
.cnrd-2004 .slide-figure.has-hotspots .hotspot::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid #2563eb;
  background: transparent;
  opacity: 0;
  transition: opacity .12s ease;
}

/* Affichage de l'anneau */
.cnrd-2004 .slide-figure.has-hotspots .hotspot:hover::after,
.cnrd-2004 .slide-figure.has-hotspots .hotspot:focus-visible::after,
.cnrd-2004 .slide-figure.has-hotspots .hotspot:focus::after,
.cnrd-2004 .slide-figure.has-hotspots .hotspot:-moz-focusring::after {
  opacity: 1;
}

/* Slides */
.cnrd-2004 .slide-figure { margin:0; background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); overflow:hidden; }
.cnrd-2004 .slide-figure img { display:block; width:100%; height:auto; }

/* Hotspot vidéo */
.cnrd-2004 .slide-figure.has-hotspot { position: relative; }
.cnrd-2004 .slide-figure .hotspot.play{
  position:absolute; display:block; z-index:3; cursor: pointer; outline: none;
}
.cnrd-2004 .slide-figure .hotspot.play::after{
  content:""; position:absolute; inset:0;
  border: 2px solid rgba(37,99,235,.9);
  background: rgba(37,99,235,.08);
  opacity:0; transition:.12s ease;
}
.cnrd-2004 .slide-figure .hotspot.play:hover::after,
.cnrd-2004 .slide-figure .hotspot.play:focus-visible::after{ opacity:1; }

/* Modale vidéo */
#videoModal[hidden]{ display:none; }
#videoModal{ position: fixed; inset: 0; z-index: 1000; }
#videoModal .vm-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
#videoModal .vm-dialog{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width:min(92vw, 1000px); background:#000; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.35);
}
#videoModal .vm-close{
  position:absolute; top:8px; right:10px; background:#111; color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; width:36px; height:36px; font-size:20px; line-height:34px; cursor:pointer;
}
#videoModal .vm-body{ padding: 12px; }
#videoModal video{ display:block; width:100%; height:auto; max-height:80vh; background:#000; border-radius:8px; }

/* Corps sans marge pour que la vidéo colle au cadre */
#videoModal .vm-body{ padding: 0; }

/* ===== Modal vidéo – Thème ivoire + noir doux ===== */

/* Active ce thème en ajoutant class="theme-light" sur #videoModal */
#videoModal.theme-light .vm-dialog{
  background: var(--panel, #f5f2ea);  /* ivoire */
  padding: 12px;                      /* cadre visible autour de la vidéo */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Vidéo sur "noir doux" (moins dur que #000) + léger cadre */
#videoModal.theme-light video{
  background: #111;                   /* noir adouci */
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85); /* mince liseré clair */
  max-height: 80vh;
}

/* Bouton fermer bien visible */
#videoModal .vm-close{
  background:#111; color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; width:36px; height:36px;
  font-size:20px; line-height:34px; cursor:pointer;
}
#videoModal .vm-close:hover{ filter:brightness(1.1); }

/* Corps sans marge pour coller la vidéo au cadre ivoire */
#videoModal .vm-body{ padding:0; }

/* ===== Voile de fond : deux options ===== */

/* (A) Voile sombre + flou (la page reste visible très atténuée) */
#videoModal.theme-light .vm-backdrop{
  background: rgba(15, 23, 42, .72);     /* slate-900 à ~72% */
  backdrop-filter: blur(4px);             /* floutage si supporté */
  -webkit-backdrop-filter: blur(4px);
}

/* (B) Fond clair qui masque quasiment tout derrière
   -> pour activer, ajoute aussi la classe "backdrop-light" au #videoModal */
#videoModal.theme-light.backdrop-light .vm-backdrop{
  background: rgba(245, 242, 234, .96);   /* ivoire quasi plein */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Voile bleu sombre/vert + flou (page visible mais très atténuée) */
#videoModal.theme-light.backdrop-dark .vm-backdrop{
  background: rgba(7, 31, 44, .82);     /* bleu-vert nuit (#071F2C) */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Vignette douce pour mieux isoler la fenêtre */
#videoModal.theme-light.backdrop-dark .vm-backdrop::after{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 140px rgba(0,0,0,.35);
  pointer-events:none;
}

.cnrd-2004 .slide-figure.has-hotspot { position: relative; }
.cnrd-2004 .slide-figure .hotspot.play,
.cnrd-2004 .slide-figure .hotspot.sound {
  position:absolute; display:block; z-index:3; cursor:pointer; outline:none;
}

/* Survol distinct (optionnel) */
.cnrd-2004 .slide-figure .hotspot.play::after{
  content:""; position:absolute; inset:0;
  border:2px solid rgba(37,99,235,.9); background: rgba(37,99,235,.10);
  opacity:0; transition:.12s ease;
}
.cnrd-2004 .slide-figure .hotspot.sound::after{
  content:""; position:absolute; inset:0;
  border:2px solid rgba(16,185,129,.9); background: rgba(16,185,129,.10);
  opacity:0; transition:.12s ease;
}
.cnrd-2004 .slide-figure .hotspot.play:hover::after,
.cnrd-2004 .slide-figure .hotspot.play:focus-visible::after,
.cnrd-2004 .slide-figure .hotspot.sound:hover::after,
.cnrd-2004 .slide-figure .hotspot.sound:focus-visible::after { opacity:1; }

/* ===== Panneau d'intro court (entre header et première image) ===== */
.cnrd-topic-intro {
  /* Couleur modifiable si besoin */
  --intro-bg: #f5f2ea;            /* fond clair (ivoire) */
  --intro-bd: #e3ded4;            /* bordure assortie */
  --r: 12px;                      /* arrondi */
  --shadow: 0 6px 18px rgba(0,0,0,.08);

  background: var(--intro-bg);
  border: 1px solid var(--intro-bd);
  border-radius: var(--r);
  box-shadow: var(--shadow);

  max-width: min(1200px, 96vw);
  margin: 10px auto 14px;         /* réduit l'espace avant la 1re image */
  padding: clamp(12px, 1vw + 10px, 20px);
}

.cnrd-topic-intro p {
  margin: 0;
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.18rem);
  line-height: 1.6;
}

/* Variante bleutée (si tu préfères) */
.cnrd-topic-intro.is-blue {
  --intro-bg: #e9f0fb;            /* bleu très doux */
  --intro-bd: #cfe0ff;
}
/* ================================
   CNRD 2004 — Harmonisation FFL
   Scope : .cnrd-2004
   ================================ */
.cnrd-2004 {
  --paper:  #f6f7f9;        /* fond neutre très clair */
  --panel:  #e9f0fb;        /* panneaux (bleu très doux) */
  --line:   #e2e6ee;        /* traits/bordures */
  --ink:    #1f2937;        /* texte */
  --accent: #2f5fa7;        /* bleu d’accent commun (boutons/links) */
  --r:      12px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Fond général de la page concours (facultatif) */
.cnrd-2004.page-content {
  background: transparent;  /* ou var(--paper) si tu veux teinter la page */
}

/* 1) En-tête : rectangle titre unifié (bleu doux) */
.cnrd-2004 .g1418-header {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(12px, 2vw, 20px);
  text-align: center;
  margin: 10px auto 14px;
}

.cnrd-2004 .g1418-header .page-title {
  margin: 0 0 .25em;
  color: var(--ink);
  font-size: clamp(1.6rem, 1.5vw + 1rem, 2.1rem);
  line-height: 1.2;
}
.cnrd-2004 .g1418-header .page-subtitle {
  margin: 0;
  color: #334155;
  font-weight: 500;
}

/* 2) Panneau d’intro (court) assorti */
.cnrd-2004 .cnrd-topic-intro {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-width: min(1200px, 96vw);
  margin: 8px auto 12px;
  padding: clamp(12px, 1.2vw + 8px, 18px);
}
.cnrd-2004 .cnrd-topic-intro p {
  margin: 0;
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.18rem);
  line-height: 1.6;
}

/* 3) Diaporama : cadre image neutre et cohérent */
.cnrd-2004 .slides-viewer { background: transparent; }
.cnrd-2004 .slides { max-width: min(1200px, 96vw); margin: 0 auto; }
.cnrd-2004 .slide-figure {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 10px 0 14px;
  background: #fff; /* image sur fond blanc */
}
.cnrd-2004 .slide-figure .img-link { display:block; line-height:0; }

/* 4) Hotspots : invisibles, pas de liseré au focus */
.cnrd-2004 .hotspots { position: absolute; inset: 0; }
.cnrd-2004 .hotspot  { position: absolute; display:block; outline: none; }

/* 5) Footer nav (Sommaire + pagination) — même style */
.cnrd-2004 #slidesFooter {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  max-width: min(1200px, 96vw);
  margin: 10px auto 8px;
}

/* Bouton sommaire */
.cnrd-2004 .sommaire-link {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  font-weight: 600;
}
.cnrd-2004 .sommaire-link:hover { filter: brightness(1.04); }

/* Pagination */
.cnrd-2004 .slides-index {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cnrd-2004 .slides-index .pages-label {
  font-size: .95rem; color: #475569; margin-right: 4px;
}
.cnrd-2004 .slides-index .slide-link {
  display: inline-block;
  min-width: 34px; text-align: center;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #0f172a;
  background: #fff;
  border: 1px solid var(--line);
}
.cnrd-2004 .slides-index .slide-link:hover { background: #f8fafc; }
.cnrd-2004 .slides-index .slide-link[aria-current="page"] {
  background: var(--accent);
  color: #fff; border-color: transparent; pointer-events: none;
}

/* 6) (Option) Bandeau photo "full-bleed" sans bandes latérales */
.hero--bleed img {
  width: 100%;
  height: clamp(180px, 23vw, 320px);
  object-fit: cover;   /* remplit, centre-crop propre */
  display: block;
}

/* ====== FFL — Forcer bandeaux bleu nuit + texte blanc (titre + footer) ====== */
.cnrd-2004{
  --ffl-blue:     #1B4E93;   /* bleu nuit */
  --ffl-blue-bd:  #455a7a;   /* bordure */
  --ffl-fg:       #ffffff;   /* texte blanc */
}

/* Titre */
.cnrd-2004 .g1418-header{
  background: var(--ffl-blue) !important;
  color: var(--ffl-fg) !important;
  border: 1px solid var(--ffl-blue-bd) !important;
}

/* Neutraliser toute “carte blanche” interne qui recrée un 2e rectangle */
.cnrd-2004 .g1418-header .page-title,
.cnrd-2004 .g1418-header .page-subtitle{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  margin: 0;
}

/* Footer nav */
.cnrd-2004 #slidesFooter{
  background: var(--ffl-blue) !important;
  color: var(--ffl-fg) !important;
  border: 1px solid var(--ffl-blue-bd) !important;
}

/* Bouton “Sommaire” dans le footer : garde un bleu lisible sur fond bleu nuit */
.cnrd-2004 #slidesFooter .sommaire-link{
  background: #2f5fa7 !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Libellés et pagination : pas de cartons blancs parasite */
.cnrd-2004 #slidesFooter .pages-label{
  color: #e6eef9 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}