/* ==========================================================================
   STYLE.CSS — CAT CDC HABITAT
   Syndicat professionnel — Site responsive (Mobile / Tablette / Desktop)

   TABLE DES MATIÈRES :
   1.  Variables CSS & Reset
   2.  Typographie de base
   3.  Utilitaires
   4.  Conteneur
   5.  Boutons
   6.  Header & Navigation
   7.  Menu mobile
   8.  Section Hero (bannière d'accueil)
   9.  Sections générales
   10. Grille des combats (cards)
   11. Timeline (historique)
   12. Actualités (news)
   13. Simulateur (formulaire)
   14. Footer
   15. Lightbox (galerie photo)
   16. Media Queries (Responsive)
========================================================================== */


/* ==========================================================================
   1. VARIABLES CSS & RESET
   Toutes les couleurs, tailles et effets sont centralisés ici.
   Modifier une variable suffit pour changer le design partout.
========================================================================== */
:root {
  /* Couleurs principales */
  --color-primary: #FFF800;
  /* Jaune CAT */
  --color-primary-dark: #E6DC00;
  /* Jaune foncé (hover) */
  --color-secondary: #1E5AA8;
  /* Bleu CAT */
  --color-secondary-dark: #164A8A;
  /* Bleu foncé (hover) */

  /* Couleurs de fond et de texte */
  --color-bg: #ffffff;
  --color-bg-alt: #f4f7fb;
  /* Fond gris clair pour sections alternées */
  --color-border: #d9e4f2;
  --color-text: #123E75;
  /* Texte principal (bleu foncé) */
  --color-text-muted: #355b86;
  /* Texte secondaire (moins contrasté) */

  /* Mise en page */
  --container-width: 1400px;
  --border-radius: 4px;

  /* Ombres portées */
  --shadow-sm: 0 2px 8px rgba(30, 90, 168, 0.08);
  --shadow-md: 0 5px 20px rgba(30, 90, 168, 0.12);
  --shadow-lg: 0 10px 40px rgba(30, 90, 168, 0.18);

  /* Transition globale réutilisable */
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Hauteur du header (réduite sur mobile via media queries) */
  --header-height: 75px;
}

/* Reset universel : supprime marges/paddings par défaut du navigateur */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Défilement fluide lors des ancres (#section) */
  font-size: 16px;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   2. TYPOGRAPHIE DE BASE
   Police Barlow Condensed pour tous les titres, Roboto pour le corps.
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.1;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
.hamburger:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}


/* ==========================================================================
   3. UTILITAIRES
   Classes réutilisables dans le HTML pour ajustements rapides.
========================================================================== */
.text-yellow {
  color: var(--color-primary);
}

.text-blue {
  color: var(--color-secondary);
}

/* Renommé : "text-red" était trompeur */
.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.font-huge {
  font-size: 4rem;
}

.font-big {
  font-size: 2.5rem;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.text-muted-light {
  color: #aaa;
}

.flex-center-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-block {
  width: 100%;
  margin-top: 20px;
}

.w-800-center {
  max-width: 800px;
  margin: 0 auto;
}

.media-preview-card {
  margin-bottom: 30px;
  display: none;
}

.media-preview-wrapper {
  height: auto;
  max-height: 500px;
}

.media-preview-img {
  width: 100%;
  height: auto;
}

.result-intro {
  font-size: 1.2rem;
}

.result-value {
  font-size: 3rem;
  font-weight: 900;
}

.text-white-bold {
  color: #fff;
  font-weight: bold;
}

.btn-spacing-right {
  margin-right: 15px;
}

.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.is-clickable {
  cursor: pointer;
}

.is-visible {
  display: block !important;
}

.logo-header-img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

.btn-header-cta {
  padding: 10px 25px;
  font-size: 1rem;
}

.footer-brand-title {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.btn-footer-mail {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: var(--color-text);
}



/* ==========================================================================
   4. CONTENEUR
   Limite la largeur du contenu et le centre horizontalement.
========================================================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}


/* ==========================================================================
   5. BOUTONS
   Deux variantes : jaune (primaire) et bleu (secondaire).
   Le clip-path crée l'effet de coin coupé caractéristique.
========================================================================== */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  /* Coin coupé en haut-gauche et bas-droite */
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Bouton jaune — appel à l'action principal */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 248, 0, 0.4);
}

/* Bouton bleu — action secondaire */
.btn-secondary {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  color: #fff;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 6px 20px rgba(30, 90, 168, 0.3);
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   Header fixe en haut, passe par-dessus le contenu (z-index: 1000).
   L'effet de flou (backdrop-filter) donne un aspect "verre dépoli".
========================================================================== */
header {
  background-color: rgba(255, 255, 255, 0.97);
  height: var(--header-height);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--color-primary);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

/* Zone logo : image + nom du syndicat */
.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  color: var(--color-text);
  flex-shrink: 0;
  /* Empêche le logo de rétrécir sur petits écrans */
}

.logo-area img {
  height: 48px;
  width: auto;
}

.logo-area span {
  font-size: 1.7rem;
  white-space: nowrap;
}

/* Liens de navigation desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 35px;
}

.nav-link {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
  position: relative;
}

/* Soulignement animé au survol */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--color-secondary);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--color-secondary);
}

.nav-link.active::after {
  width: 100%;
}

/* Icône hamburger (3 barres) — visible uniquement sur mobile */
.hamburger {
  display: none;
  cursor: pointer;
  padding: 5px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text);
  margin: 5px 0;
  transition: 0.4s;
}


/* ==========================================================================
   7. MENU MOBILE
   Quand l'utilisateur clique sur le hamburger, la classe .active s'ajoute.
   Le menu se déploie verticalement sous le header.
========================================================================== */
.nav-links.active {
  display: flex !important;
  /* Écrase le display:none du mobile */
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid var(--color-primary);
  gap: 0;
}

/* Chaque lien occupe toute la largeur avec séparateur */
.nav-links.active li {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-links.active li:last-child {
  border-bottom: none;
}


/* ==========================================================================
   8. SECTION HERO (BANNIÈRE D'ACCUEIL)
   Pleine hauteur de fenêtre avec image de fond et overlay bleu.
   L'animation fadeInUp donne l'effet d'apparition du texte.
========================================================================== */
.hero {
  min-height: 100vh;
  /* On met un fond bleu de secours au cas où la vidéo met du temps à charger */
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--header-height);
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  /* Empêche la vidéo de déborder de la zone */
}

/* La vidéo de fond */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Permet à la vidéo de remplir tout l'écran sans se déformer */
  z-index: 0;
  /* On la met tout au fond */
}

/* Le filtre bleu par-dessus la vidéo */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 62, 117, 0.82), rgba(18, 62, 117, 0.72));
  z-index: 1;
  /* Juste au-dessus de la vidéo */
}

/* Le texte et les boutons */
.hero-content {
  position: relative;
  z-index: 2;
  /* Au-dessus du filtre bleu, pour être lisible et cliquable */
  max-width: 900px;
  padding: 0 20px;
  animation: fadeInUp 1s ease-out;
}

/* Flèche animée en bas du hero */
.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  z-index: 2;
  /* Au-dessus du filtre bleu */
}

/* Badge jaune au-dessus du titre */
.badge-hero {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text);
  padding: 6px 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 5rem;
  color: #fff;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.4rem;
  color: #e0e8f5;
  margin-bottom: 40px;
}

/* Flèche animée en bas du hero — invite à défiler */
.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-down svg {
  width: 30px;
  fill: var(--color-primary);
}

/* Animation de rebond vertical */
@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  40% {
    transform: translateX(-50%) translateY(-20px);
  }

  60% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* Animation d'apparition de bas en haut */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation d'apparition simple (utilisée dans le simulateur) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ==========================================================================
   9. SECTIONS GÉNÉRALES
   Classes réutilisables pour le padding, le fond et les titres de section.
========================================================================== */
.section-padding {
  padding: 90px 0;
}

/* Section fond blanc */
.section-dark {
  background-color: var(--color-bg);
}

/* Section fond gris clair avec bordures discrètes */
.section-grey {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Titre de section centré avec ligne jaune en dessous */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 3rem;
  color: var(--color-secondary);
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}

/* Barre jaune décorative sous le titre (centrée sur 50% de la largeur) */
.section-title h2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4px;
  background-color: var(--color-primary);
}


/* ==========================================================================
   10. GRILLE DES COMBATS (CARDS)
   3 colonnes sur desktop, 2 sur tablette, 1 sur mobile (via media queries).
========================================================================== */
.combats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.combat-card {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.combat-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

/* Zone image de la card avec hauteur fixe */
.card-img-wrapper {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

/* Zoom de l'image au survol */
.combat-card:hover .card-img-wrapper img {
  transform: scale(1.08);
}

/* Badge catégorie en haut à droite de l'image */
.card-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--color-primary);
  color: var(--color-text);
  padding: 4px 10px;
  font-weight: bold;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.card-body {
  padding: 25px;
}

.card-body h3 {
  font-size: 1.6rem;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.card-body p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* Lien "En savoir plus" avec flèche animée */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-text);
}

.link-arrow svg {
  width: 18px;
  fill: var(--color-secondary);
  transition: 0.3s;
}

.link-arrow:hover {
  color: var(--color-secondary);
}

.link-arrow:hover svg {
  transform: translateX(5px);
  fill: var(--color-primary);
}


/* ==========================================================================
   11. TIMELINE (HISTORIQUE / DATES CLÉS)
   Frise chronologique verticale avec axe central.
   Sur tablette/mobile, l'axe bascule à gauche (voir media queries).
========================================================================== */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* Ligne verticale centrale */
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background-color: var(--color-secondary);
}

.timeline-item {
  padding: 10px 45px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
}

/* Boîte de contenu avec bordure jaune */
.timeline-content {
  padding: 20px 25px;
  background: #fff;
  border-radius: 4px;
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Côté droit : bordure à droite au lieu de gauche */
.timeline-item.right .timeline-content {
  border-left: none;
  border-right: 4px solid var(--color-primary);
}

/* Badge de date */
.date-badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text);
  padding: 3px 10px;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Point circulaire sur l'axe de la timeline */
.timeline-item::after {
  content: '';
  position: absolute;
  top: 22px;
  width: 18px;
  height: 18px;
  background-color: var(--color-primary);
  border: 4px solid var(--color-secondary);
  border-radius: 50%;
  z-index: 1;
}

.left::after {
  right: -13px;
}

.right::after {
  left: -13px;
}


/* ==========================================================================
   12. ACTUALITÉS (NEWS)
   Liste verticale d'articles avec date mise en avant sur fond bleu.
========================================================================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item {
  display: flex;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
}

.news-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Bloc date à gauche (fond bleu) */
.news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 20px;
  background-color: var(--color-secondary);
  color: #fff;
}

.news-date .day {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}

.news-date .month {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* Contenu textuel de l'actualité */
.news-info {
  flex-grow: 1;
  padding: 18px 22px;
}

.news-info h4 {
  font-size: 1.1rem;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.news-info p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}


/* ==========================================================================
   13. SIMULATEUR (FORMULAIRE DE CALCUL)
   Formulaire à deux colonnes avec fond dégradé.
   Le résultat (.result-box) est caché par défaut et révélé via JavaScript.
========================================================================== */
.simulator-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 45px;
  background: linear-gradient(135deg, #fff 0%, #eef5ff 100%);
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

/* Grille 2 colonnes pour les champs du formulaire */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--color-secondary);
}

.form-control {
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-secondary);
}

/* Zone résultat — affichée par JS après soumission */
.result-box {
  display: none;
  /* Rendu visible via JS : display: block */
  margin-top: 25px;
  padding: 25px;
  background-color: var(--color-secondary);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  animation: fadeIn 0.5s;
}


/* ==========================================================================
   14. FOOTER
   Fond bleu avec grille 4 colonnes sur desktop.
   Réduit à 2 colonnes (tablette) puis 1 colonne (mobile).
========================================================================== */
footer {
  background: var(--color-secondary);
  color: #fff;
  border-top: 4px solid var(--color-primary);
  padding-top: 70px;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-col h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.footer-col p {
  color: rgba(255, 255, 255, 0.8);
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--color-primary);
  padding-left: 5px;
  /* Légère indentation au survol */
}

/* Icônes réseaux sociaux */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: 0.3s;
}

.social-icon svg {
  width: 18px;
  fill: #fff;
}

.social-icon:hover {
  background: var(--color-primary);
}

.social-icon:hover svg {
  fill: var(--color-text);
}

/* Bande de copyright en bas */
.copyright {
  padding: 25px 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.copyright a {
  color: var(--color-primary);
}


/* ==========================================================================
   15. LIGHTBOX (VISIONNEUSE D'IMAGES)
   Recouvre tout l'écran avec un fond sombre semi-opaque.
   Activée via JS en ajoutant la classe .active.
========================================================================== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  animation: fadeInLightbox 0.3s ease;
}

@keyframes fadeInLightbox {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-content img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: var(--color-text);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.lightbox-close:hover {
  background: #fff;
}

.lightbox-counter {
  position: absolute;
  top: -45px;
  left: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
}

.lightbox-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgba(18, 62, 117, 0.95);
  border-radius: 0 0 8px 8px;
}

.lightbox-caption span {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.lb-date {
  color: var(--color-primary);
  font-size: 0.85rem;
}

.lightbox-prev,
.lightbox-next {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin: 0 15px;
  background: var(--color-primary);
  color: var(--color-text);
  border: none;
  border-radius: 50%;
  font-size: 2.5rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: #fff;
  transform: scale(1.1);
}


/* ==========================================================================
   16. MEDIA QUERIES — RESPONSIVE
   Ordre : du plus large au plus étroit (mobile-last approach).
   Les breakpoints correspondent aux tailles d'écrans courantes.
========================================================================== */

/* ── Tablette large / petit laptop (≤ 1200px) ── */
@media (max-width: 1200px) {
  .combats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ── Tablette (iPad, Surface — ≤ 992px) ── */
@media (max-width: 992px) {
  :root {
    --header-height: 64px;
  }

  .logo-area img {
    height: 40px;
  }

  .logo-area span {
    font-size: 1.4rem;
  }

  /* Bouton CTA masqué dans la nav pour gagner de la place */
  .navbar .btn-primary {
    display: none;
  }

  .hero h1 {
    font-size: 3.5rem;
  }

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

  .section-title h2 {
    font-size: 2.5rem;
  }

  .section-padding {
    padding: 70px 0;
  }

  /* Timeline : l'axe passe à gauche sur tablette */
  .timeline::after {
    left: 28px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 65px;
    padding-right: 20px;
  }

  .timeline-item.left {
    text-align: left;
  }

  .timeline-item.right {
    left: 0;
  }

  /* Les deux côtés adoptent la même bordure gauche */
  .left::after,
  .right::after {
    left: 18px;
    right: auto;
  }

  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    border-left: 4px solid var(--color-primary);
    border-right: none;
  }
}

/* ── Mobile large (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --header-height: 58px;
  }

  /* Navigation : liens masqués, hamburger visible */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .logo-area img {
    height: 36px;
  }

  .logo-area span {
    font-size: 1.25rem;
  }

  .logo-area {
    gap: 8px;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .hero p {
    font-size: 1.1rem;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .section-padding {
    padding: 55px 0;
  }

  /* Grilles passent en colonne unique */
  .combats-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

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

  /* News : de horizontal à vertical */
  .news-item {
    flex-direction: column;
  }

  .news-date {
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }

  .simulator-wrapper {
    padding: 25px 18px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
    margin: 0 8px;
  }
}

/* ── Petit mobile (≤ 480px) ── */
@media (max-width: 480px) {
  :root {
    --header-height: 54px;
  }

  .logo-area img {
    height: 32px;
  }

  .logo-area span {
    font-size: 1.1rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .section-title h2 {
    font-size: 1.7rem;
  }

  .section-padding {
    padding: 40px 0;
  }

  .btn {
    padding: 12px 22px;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}