/* ============================================================
   FICHIER CSS — Doctrine des Apôtres
   Chaque règle est commentée pour ta compréhension
   ============================================================ */

/* ===== VARIABLES CSS (couleurs et valeurs réutilisables) ===== */
:root {
  /* :root = toute la page, les variables sont définies une fois et utilisées partout */
  --bleu-marine: #1a3567;       /* Bleu marine principal — style uniforme lycée */
  --bleu-fonce: #0f2244;        /* Version encore plus foncée pour les hover */
  --bleu-clair: #2a4d8f;        /* Version plus claire pour les dégradés */
  --or: #c9a84c;                /* Couleur or/dorée pour les accents et décorations */
  --or-clair: #e8c96e;          /* Or plus clair pour les hover */
  --blanc: #ffffff;             /* Blanc pur */
  --blanc-casse: #f8f6f1;       /* Blanc légèrement crème pour les fonds de section */
  --gris-clair: #f0f4f8;        /* Gris très clair pour les backgrounds */
  --gris-texte: #6b7280;        /* Gris moyen pour le texte secondaire */
  --noir-doux: #1a1a2e;         /* Noir profond pour les titres */
  --ombre: 0 10px 40px rgba(26, 53, 103, 0.15);  /* Ombre bleue douce */
  --ombre-forte: 0 20px 60px rgba(26, 53, 103, 0.25); /* Ombre plus prononcée */
  --radius: 16px;               /* Rayon des coins arrondis */
  --transition: all 0.35s ease; /* Transition fluide pour les animations */
}

/* ===== RESET ET BASE ===== */
* {
  margin: 0;         /* Supprime les marges par défaut du navigateur */
  padding: 0;        /* Supprime les espacements internes par défaut */
  box-sizing: border-box; /* Les paddings/borders sont inclus dans la taille totale */
}

html {
  scroll-behavior: smooth; /* Défilement fluide quand on clique sur un lien ancre */
}

body {
  font-family: 'Crimson Pro', Georgia, serif; /* Police principale du site */
  background-color: var(--blanc);             /* Fond blanc de base */
  color: var(--noir-doux);                    /* Couleur de texte par défaut */
  overflow-x: hidden;                         /* Empêche le défilement horizontal */
  line-height: 1.7;                           /* Hauteur de ligne confortable pour la lecture */
}

/* ===== CONTENEUR CENTRÉ ===== */
.container {
  max-width: 1200px;    /* Largeur maximale du contenu */
  margin: 0 auto;       /* Centre horizontalement */
  padding: 0 24px;      /* Espace sur les côtés gauche et droit */
}

/* ===== EN-TÊTE DE SECTION (titre + ligne décorative) ===== */
.section-header {
  text-align: center;   /* Tout centré */
  margin-bottom: 60px;  /* Espace sous l'en-tête avant les cartes */
}

.section-label {
  font-family: 'Montserrat', sans-serif; /* Police différente pour le petit label */
  font-size: 0.8rem;     /* Petite taille */
  letter-spacing: 3px;   /* Espacement entre les lettres */
  color: var(--or);      /* Couleur dorée */
  text-transform: uppercase; /* Tout en majuscules */
  margin-bottom: 12px;   /* Espace sous le label */
}

.section-title {
  font-family: 'Playfair Display', serif; /* Police élégante pour les titres */
  font-size: clamp(2rem, 4vw, 3rem);     /* Taille dynamique selon l'écran */
  color: var(--bleu-marine);              /* Couleur bleue marine */
  font-weight: 700;                       /* Gras */
  margin-bottom: 16px;                    /* Espace sous le titre */
}

.title-line {
  width: 60px;             /* Largeur de la ligne */
  height: 3px;             /* Épaisseur de la ligne */
  background: var(--or);   /* Couleur dorée */
  margin: 0 auto;          /* Centré */
  border-radius: 2px;      /* Légèrement arrondie */
}

/* ===== BOUTON "LIRE PLUS" ===== */
.btn-lire {
  display: inline-block;              /* Permet de définir la largeur/hauteur */
  padding: 10px 24px;                 /* Espace intérieur */
  border: 2px solid var(--bleu-marine); /* Bordure bleue */
  color: var(--bleu-marine);          /* Texte bleu */
  background: transparent;            /* Fond transparent */
  text-decoration: none;              /* Pas de soulignement */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;                /* Coins très arrondis = pilule */
  transition: var(--transition);       /* Animation fluide au survol */
  margin-top: 16px;
}

.btn-lire:hover {
  /* Style quand la souris est dessus */
  background: var(--bleu-marine);     /* Fond devient bleu */
  color: var(--blanc);                /* Texte devient blanc */
  transform: translateY(-2px);        /* Monte légèrement */
  box-shadow: var(--ombre);           /* Ombre apparaît */
}

/* ===================================================
   MODAL DE BIENVENUE
   =================================================== */
.modal-overlay {
  position: fixed;          /* Fixé sur l'écran, même au scroll */
  inset: 0;                 /* Couvre tout l'écran (top/right/bottom/left = 0) */
  background: rgba(10, 20, 50, 0.85); /* Fond très sombre semi-transparent */
  display: flex;             /* Flexbox pour centrer le contenu */
  align-items: center;       /* Centre verticalement */
  justify-content: center;   /* Centre horizontalement */
  z-index: 9999;             /* Au-dessus de tout */
  backdrop-filter: blur(4px); /* Flou derrière le modal */
  animation: fadeIn 0.5s ease; /* Apparition progressive */
}

.modal-overlay.hidden {
  display: none; /* Cache le modal quand la classe "hidden" est ajoutée par JS */
}

.modal-card {
  background: var(--blanc);     /* Fond blanc */
  border-radius: var(--radius); /* Coins arrondis */
  padding: 50px 60px;           /* Espace intérieur généreux */
  max-width: 500px;             /* Largeur maximale */
  width: 90%;                   /* 90% sur mobile */
  text-align: center;           /* Texte centré */
  position: relative;           /* Pour positionner la croix */
  border-top: 5px solid var(--or); /* Bordure dorée en haut */
  box-shadow: var(--ombre-forte);  /* Ombre prononcée */
  animation: slideUp 0.5s ease;   /* Animation d'apparition du bas */
}

.modal-cross {
  font-size: 2.5rem;    /* Grosse croix */
  color: var(--or);     /* Couleur dorée */
  margin-bottom: 16px;  /* Espace sous la croix */
}

.modal-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--gris-texte);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--bleu-marine);
  margin-bottom: 20px;
  line-height: 1.4;
}

.modal-title span {
  color: var(--or); /* Le mot "Vérité qui Libère" en doré */
}

.modal-verse {
  font-style: italic;     /* Texte en italique */
  color: var(--gris-texte);
  font-size: 0.95rem;
  margin-bottom: 30px;
  padding: 0 10px;
  border-left: 3px solid var(--or); /* Trait doré à gauche du verset */
  text-align: left;
  line-height: 1.6;
}

.modal-btn {
  background: var(--bleu-marine);  /* Fond bleu */
  color: var(--blanc);             /* Texte blanc */
  border: none;                    /* Pas de bordure */
  padding: 14px 40px;              /* Espace intérieur */
  border-radius: 50px;             /* Pilule arrondie */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;                 /* Curseur main au survol */
  letter-spacing: 1px;
  transition: var(--transition);
}

.modal-btn:hover {
  background: var(--or);          /* Fond doré au survol */
  transform: scale(1.05);         /* Légèrement agrandi */
}

/* ===================================================
   NAVBAR (BARRE DE NAVIGATION)
   =================================================== */
.navbar {
  position: fixed;        /* Fixée en haut de l'écran même au scroll */
  top: 0;                 /* Tout en haut */
  left: 0;                /* Tout à gauche */
  width: 100%;            /* Toute la largeur */
  z-index: 1000;          /* Au-dessus du contenu */
  padding: 20px 0;        /* Espace vertical */
  background: transparent; /* Transparent au départ */
  transition: var(--transition); /* Animation de changement de couleur */
}

.navbar.scrolled {
  /* Classe ajoutée par JS quand on scroll */
  background: rgba(255, 255, 255, 0.97); /* Fond blanc au scroll */
  backdrop-filter: blur(10px);           /* Légèrement flouté */
  box-shadow: 0 2px 30px rgba(26, 53, 103, 0.1); /* Ombre discrète */
  padding: 14px 0;                        /* Moins d'espace vertical */
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;             /* Les éléments sont en ligne */
  align-items: center;       /* Alignés verticalement au centre */
  justify-content: space-between; /* Logo à gauche, liens à droite */
}

/* LOGO dans la navbar */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;         /* Espace entre logo et texte */
  text-decoration: none;
}

.logo-img {
  height: 48px;      /* Hauteur du logo */
  width: auto;       /* Largeur proportionnelle */
  transition: var(--transition);
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blanc);        /* Blanc quand navbar transparente */
  transition: var(--transition);
  white-space: nowrap;        /* Pas de retour à la ligne */
}

.navbar.scrolled .logo-text {
  color: var(--bleu-marine);  /* Bleu quand navbar blanche */
}

/* LIENS DE NAVIGATION */
.nav-links {
  display: flex;         /* Les liens en ligne */
  align-items: center;
  gap: 8px;              /* Espace entre chaque lien */
  list-style: none;      /* Supprime les puces de liste */
}

.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9); /* Blanc semi-transparent sur fond transparent */
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar.scrolled .nav-link {
  color: var(--bleu-marine); /* Bleu quand navbar blanche */
}

.nav-link:hover {
  background: rgba(201, 168, 76, 0.15); /* Fond doré léger au survol */
  color: var(--or);                      /* Texte doré au survol */
}

.arrow {
  font-size: 0.65rem;  /* Petite flèche du sous-menu */
  transition: var(--transition);
}

/* LIEN ZOOM spécial */
.zoom-link {
  color: var(--or) !important; /* Toujours doré */
  font-weight: 600;
}

/* LIEN CONTACT spécial */
.nav-contact {
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
}

.navbar.scrolled .nav-contact {
  border-color: var(--bleu-marine);
}

/* SOUS-MENUS DÉROULANTS */
.dropdown {
  position: relative; /* Nécessaire pour positionner le sous-menu */
}

.dropdown-menu {
  position: absolute;   /* Positionné par rapport au parent .dropdown */
  top: calc(100%); /* 10px sous le lien parent */
  left: 0;
  background: var(--blanc);
  border-radius: 12px;
  box-shadow: var(--ombre-forte);
  list-style: none;
  min-width: 250px;
  padding: 10px 0;
  opacity: 0;              /* Invisible par défaut */
  pointer-events: none;    /* Pas cliquable quand invisible */
  transform: translateY(-10px); /* Légèrement au-dessus */
  transition: var(--transition);
  border-top: 3px solid var(--or); /* Bordure dorée en haut */
}

.dropdown:hover .dropdown-menu {
  /* Quand on survole le parent, le sous-menu apparaît */
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu li a {
  display: block;        /* Toute la largeur est cliquable */
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--noir-doux);
  text-decoration: none;
  transition: var(--transition);
  border-left: 3px solid transparent; /* Bordure gauche invisible au départ */
}

.dropdown-menu li a:hover {
  background: var(--gris-clair);
  color: var(--bleu-marine);
  border-left-color: var(--or); /* Bordure gauche dorée au survol */
  padding-left: 26px;            /* Léger décalage vers la droite */
}

/* MENU HAMBURGER (mobile) */
.hamburger {
  display: none;        /* Caché sur desktop */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--blanc);  /* Barres blanches sur fond transparent */
  transition: var(--transition);
  border-radius: 2px;
}

.navbar.scrolled .hamburger span {
  background: var(--bleu-marine); /* Barres bleues sur fond blanc */
}

/* ===================================================
   SECTION HERO — SLIDER PRINCIPAL
   =================================================== */
.hero {
  position: relative;   /* Pour positionner le texte par-dessus */
  height: 100vh;        /* 100% de la hauteur de l'écran */
  overflow: hidden;     /* Cache ce qui dépasse */
}

/* CONTENEUR DU SLIDER */
.slider-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120px); /* Hauteur moins la zone des miniatures */
  overflow: hidden;
}

/* CHAQUE SLIDE */
.slide {
  position: absolute;   /* Superposées les unes sur les autres */
  inset: 0;             /* Remplissent tout le conteneur */
  opacity: 0;           /* Invisible par défaut */
  transition: opacity 0.8s ease; /* Fondu progressif */
}

.slide.active {
  opacity: 1; /* Visible quand active */
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* L'image remplit tout sans déformation */
  object-position: center; /* Centrée */
}

/* COUCHE SOMBRE SUR L'IMAGE */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 20, 50, 0.3) 0%,    /* Légèrement sombre en haut */
    rgba(10, 20, 50, 0.6) 60%,   /* Plus sombre au milieu */
    rgba(10, 20, 50, 0.8) 100%   /* Très sombre en bas pour le texte */
  );
  /* Dégradé sombre pour que le texte soit lisible sur l'image */
}

/* TEXTE SUR LE SLIDER */
.slider-text {
  position: absolute; /* Par-dessus les images */
  bottom: 80px;       /* En bas du slider */
  left: 60px;         /* Décalé à gauche */
  z-index: 10;        /* Au-dessus du overlay */
  max-width: 650px;   /* Largeur maximale du texte */
}

.slider-pretitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: var(--or);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.slider-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem); /* Taille dynamique responsive */
  color: var(--blanc);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3); /* Ombre sur le texte pour lisibilité */
  margin-bottom: 16px;
}

.slider-verset {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--or);          /* Couleur dorée pour le verset */
  font-style: italic;        /* Italique */
  letter-spacing: 1px;
  animation: fadeIn 0.5s ease; /* Animation quand le verset change */
}

/* BOUTONS PRÉCÉDENT / SUIVANT */
.slider-btn {
  position: absolute;    /* Positionnés sur les côtés */
  top: 50%;              /* Verticalement centré */
  transform: translateY(-50%); /* Ajustement fin du centrage */
  background: rgba(255, 255, 255, 0.15); /* Fond blanc très transparent */
  border: 2px solid rgba(255,255,255,0.3);
  color: var(--blanc);
  font-size: 2.5rem;
  width: 55px;
  height: 55px;
  border-radius: 50%;    /* Rond */
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px); /* Légèrement flouté */
}

.slider-btn:hover {
  background: var(--or);    /* Fond doré au survol */
  border-color: var(--or);
  transform: translateY(-50%) scale(1.1); /* Légèrement agrandi */
}

.prev { left: 20px; }   /* Bouton gauche */
.next { right: 20px; }  /* Bouton droit */

/* MINIATURES EN BAS DU SLIDER */
.slider-thumbnails {
  display: flex;          /* Les miniatures en ligne */
  gap: 10px;             /* Espace entre chaque miniature */
  padding: 12px 20px;    /* Espace intérieur */
  background: var(--bleu-fonce); /* Fond bleu très foncé */
  overflow-x: auto;      /* Défilement horizontal si trop de miniatures */
  justify-content: center;
}

.thumb {
  flex-shrink: 0;         /* Ne rétrécit pas */
  width: 100px;           /* Largeur fixe */
  height: 65px;           /* Hauteur fixe */
  border-radius: 8px;     /* Coins arrondis */
  overflow: hidden;       /* Cache ce qui dépasse */
  cursor: pointer;        /* Curseur main */
  border: 3px solid transparent; /* Bordure invisible par défaut */
  transition: var(--transition);
  opacity: 0.6;           /* Semi-transparent par défaut */
}

.thumb:hover,
.thumb.active {
  border-color: var(--or);  /* Bordure dorée quand active ou survolée */
  opacity: 1;               /* Pleinement visible */
  transform: scale(1.05);   /* Légèrement agrandi */
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================================
   SECTION MESSAGE DU MINISTÈRE
   =================================================== */
.section-message {
  padding: 80px 0;
  background: var(--bleu-marine); /* Fond bleu marine */
  position: relative;
  overflow: hidden;
}

.section-message::before {
  /* Cercle décoratif en arrière-plan */
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.07); /* Cercle doré très transparent */
}

.message-card {
  background: rgba(255, 255, 255, 0.05); /* Fond blanc très transparent */
  border: 1px solid rgba(201, 168, 76, 0.3); /* Bordure dorée discrète */
  border-radius: var(--radius);
  padding: 50px 60px;
  text-align: center;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
}

.message-quote-icon {
  font-family: 'Playfair Display', serif;
  font-size: 8rem;           /* Très grand guillemet décoratif */
  color: var(--or);
  opacity: 0.3;              /* Semi-transparent */
  line-height: 0.5;          /* Réduit l'espace vertical */
  margin-bottom: 20px;
  display: block;
}

.message-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
  line-height: 2;
  font-style: italic;
  margin-bottom: 24px;
}

.message-signature {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--or);
  letter-spacing: 1px;
}

.message-decoration {
  width: 80px;
  height: 2px;
  background: var(--or);
  margin: 24px auto 0;
}

/* ===================================================
   SECTION PUBLICATIONS (CARTES)
   =================================================== */
.section-publications {
  padding: 100px 0;
  background: var(--blanc-casse); /* Fond crème légèrement coloré */
}

/* GRILLE DES CARTES */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  /* auto-fit = nombre de colonnes automatique selon la taille */
  /* minmax = minimum 320px, maximum 1fr (fraction disponible) */
  gap: 30px; /* Espace entre les cartes */
}

/* CHAQUE CARTE DE PUBLICATION */
.pub-card {
  background: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;          /* Cache les coins de l'image */
  box-shadow: var(--ombre);  /* Ombre douce */
  transition: var(--transition);
  display: flex;
  flex-direction: column;    /* Image en haut, texte en bas */
}

.pub-card:hover {
  transform: translateY(-8px);      /* Monte de 8px au survol */
  box-shadow: var(--ombre-forte);   /* Ombre plus prononcée */
}

/* IMAGE DE LA CARTE */
.card-image-box {
  position: relative;  /* Pour positionner le badge catégorie */
  height: 220px;       /* Hauteur fixe de l'image */
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease; /* Animation de zoom sur l'image */
}

.pub-card:hover .card-img {
  transform: scale(1.08); /* Zoom léger au survol de la carte */
}

/* BADGE DE CATÉGORIE SUR L'IMAGE */
.card-category {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--or);
  color: var(--blanc);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
}

/* CORPS TEXTUEL DE LA CARTE */
.card-body {
  padding: 28px;
  flex: 1;              /* Prend l'espace disponible */
  display: flex;
  flex-direction: column;
}

.card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--bleu-marine);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

.card-excerpt {
  font-size: 0.9rem;
  color: var(--gris-texte);
  line-height: 1.6;
  flex: 1;  /* Prend l'espace pour pousser le bouton en bas */
}

/* ===================================================
   SECTION ENSEIGNEMENTS
   =================================================== */
.section-enseignements {
  padding: 100px 0;
  background: var(--blanc);
}

.enseignements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* CARTE D'ENSEIGNEMENT */
.ens-card {
  display: flex;           /* Numéro à gauche, texte à droite */
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  background: var(--blanc-casse);
  border-radius: var(--radius);
  border-left: 4px solid var(--or); /* Bordure gauche dorée distinctive */
  transition: var(--transition);
}

.ens-card:hover {
  background: var(--bleu-marine); /* Fond bleu au survol */
  transform: translateX(6px);     /* Glisse légèrement à droite */
}

.ens-card:hover .ens-title,
.ens-card:hover .ens-date,
.ens-card:hover .ens-excerpt {
  color: var(--blanc); /* Texte blanc au survol */
}

.ens-card:hover .btn-lire {
  border-color: var(--or); /* Bouton doré au survol */
  color: var(--or);
}

/* NUMÉRO DÉCORATIF */
.ens-number {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--or);
  opacity: 0.5;
  line-height: 1;
  flex-shrink: 0; /* Ne rétrécit pas */
}

.ens-content { flex: 1; } /* Prend tout l'espace disponible */

.ens-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ens-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--bleu-marine);
  margin: 8px 0;
  font-weight: 700;
  line-height: 1.4;
  transition: var(--transition);
}

.ens-excerpt {
  font-size: 0.85rem;
  color: var(--gris-texte);
  line-height: 1.6;
  margin-bottom: 4px;
  transition: var(--transition);
}

/* ===================================================
   SECTION VIDÉO
   =================================================== */
.section-video {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--bleu-fonce) 0%, var(--bleu-marine) 100%);
  /* Dégradé diagonal bleu foncé vers bleu marine */
}

.section-video .section-title {
  color: var(--blanc); /* Titre blanc sur fond bleu */
}

.section-video .title-line {
  background: var(--or);
}

/* CONTENEUR VIDÉO + INFOS */
.video-showcase {
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* Vidéo plus large que le texte */
  gap: 50px;
  align-items: center;
}

/* WRAPPER RESPONSIF DE LA VIDÉO */
.video-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); /* Ombre prononcée */
  border: 3px solid rgba(201, 168, 76, 0.3);   /* Bordure dorée discrète */
  position: relative;
}

.main-video {
  width: 100%;     /* Prend toute la largeur */
  display: block;  /* Supprime l'espace sous la vidéo */
  border-radius: calc(var(--radius) - 3px); /* Coins légèrement arrondis */
}

/* INFOS À CÔTÉ DE LA VIDÉO */
.video-tag {
  display: inline-block;
  background: var(--or);
  color: var(--blanc);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.video-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--blanc);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 16px;
}

.video-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 8px;
}

.video-info .btn-lire {
  border-color: var(--or);
  color: var(--or);
}

.video-info .btn-lire:hover {
  background: var(--or);
  color: var(--blanc);
}

/* ===================================================
   SECTION ZOOM
   =================================================== */
.section-zoom {
  padding: 100px 0;
  background: var(--blanc-casse);
}

/* GRANDE CARTE ZOOM */
.zoom-card {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
  gap: 60px;
  align-items: center;
  background: var(--blanc);
  border-radius: 24px;
  padding: 60px;
  box-shadow: var(--ombre-forte);
  border-top: 5px solid var(--bleu-marine);
}

.zoom-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: var(--bleu-marine);
  font-weight: 900;
  margin-bottom: 20px;
}

.zoom-desc {
  color: var(--gris-texte);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* BADGES DES JOURS */
.zoom-days {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.zoom-day {
  background: var(--gris-clair);
  color: var(--bleu-marine);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  border: 2px solid var(--bleu-marine);
}

/* BOUTON REJOINDRE ZOOM */
.btn-zoom {
  display: inline-block;
  background: var(--bleu-marine);
  color: var(--blanc);
  padding: 16px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: var(--transition);
  box-shadow: 0 8px 24px rgba(26, 53, 103, 0.3);
}

.btn-zoom:hover {
  background: var(--or);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(201, 168, 76, 0.4);
}

.zoom-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--ombre);
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  background: var(--noir-doux);  /* Fond très sombre */
  padding: 80px 0 0;
}

/* GRILLE 3 COLONNES DU FOOTER */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Première colonne plus large */
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ligne séparatrice discrète */
}

.footer-logo {
  height: 50px;
  margin-bottom: 16px;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.8;
}

.footer-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
}

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

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--or); /* Doré au survol */
  padding-left: 6px; /* Légèrement décalé */
}

/* ICÔNES RÉSEAUX SOCIAUX */
.social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.social-icon svg {
  width: 20px;
  height: 20px;
}

.facebook {
  background: #1877f2; /* Couleur officielle Facebook */
  color: var(--blanc);
}

.youtube {
  background: #ff0000; /* Couleur officielle YouTube */
  color: var(--blanc);
}

.social-icon:hover {
  transform: translateY(-4px) scale(1.1); /* Monte et s'agrandit */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.footer-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* BAS DU FOOTER */
.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* ===================================================
   ANIMATIONS CSS
   =================================================== */

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

/* Apparition du bas vers le haut */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================
   RESPONSIVE — MOBILE ET TABLETTE
   =================================================== */

/* TABLETTE (moins de 1024px) */
@media (max-width: 1024px) {
  .video-showcase {
    grid-template-columns: 1fr; /* Une seule colonne sur tablette */
  }

  .zoom-card {
    grid-template-columns: 1fr;
    padding: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr; /* 2 colonnes sur tablette */
  }
}

/* MOBILE (moins de 768px) */
@media (max-width: 768px) {

  /* NAVBAR MOBILE */
  .hamburger {
    display: flex; /* Affiche le bouton hamburger */
  }

  .nav-links {
    position: fixed;   /* Menu plein écran sur mobile */
    inset: 0;
    background: var(--bleu-marine);
    flex-direction: column; /* Liens en colonne */
    align-items: center;
    justify-content: center;
    gap: 20px;
    transform: translateX(100%); /* Caché hors écran à droite */
    transition: var(--transition);
    z-index: 10000;
  }

  .nav-links.open {
    transform: translateX(0); /* Visible quand ouvert */
  }

  .nav-link {
    font-size: 1.2rem;
    color: var(--blanc) !important;
  }

  .dropdown-menu {
    position: static; /* Non absolu sur mobile */
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: rgba(255,255,255,0.1);
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--or);
    margin-left: 20px;
    display: none; /* Caché par défaut sur mobile */
  }

  .dropdown.active .dropdown-menu {
    display: block; /* Affiché quand actif */
  }

  /* SLIDER MOBILE */
  .slider-text {
    left: 20px;
    right: 20px;
    bottom: 60px;
  }

  .slider-title {
    font-size: 2rem;
  }

  /* FOOTER MOBILE */
  .footer-grid {
    grid-template-columns: 1fr; /* Une seule colonne */
    gap: 30px;
  }

  /* CARTES MOBILE */
  .cards-grid {
    grid-template-columns: 1fr; /* Une seule colonne */
  }

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

  /* MESSAGE MOBILE */
  .message-card {
    padding: 30px 24px;
  }

  .message-text {
    font-size: 1rem;
  }
}

/* BOUTON CROIX FERMETURE MENU MOBILE */
.close-menu-btn {
  display: none;           /* Caché sur desktop */
  position: absolute;      /* Positionné par rapport au menu */
  top: 24px;               /* En haut du menu */
  right: 24px;             /* À droite */
  background: rgba(255,255,255,0.15); /* Fond blanc transparent */
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--blanc);
  font-size: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;      /* Rond */
  cursor: pointer;
  transition: var(--transition);
  align-items: center;
  justify-content: center;
  z-index: 10000; /* Au-dessus de tout */
}

.close-menu-btn:hover {
  background: var(--or);    /* Fond doré au survol */
  border-color: var(--or);
}

/* Affiche la croix uniquement sur mobile */
@media (max-width: 768px) {
  .close-menu-btn {
    display: flex; /* Visible sur mobile */
  }
}



/* FOOTER NAVIGATION ACCORDÉON */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Lien simple */
.footer-nav-link {
  display: block;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  padding: 9px 0;
  transition: var(--transition);
}

.footer-nav-link:hover {
  color: var(--or);
  padding-left: 6px;
}

/* BOUTON ACCORDÉON */
.footer-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  padding: 9px 0;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.footer-accordion-btn:hover {
  color: var(--or);
}

/* Flèche du bouton */
.footer-accordion-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Rotation de la flèche quand ouvert */
.footer-accordion.open .footer-accordion-arrow {
  transform: rotate(180deg);
  color: var(--or);
}

/* Texte doré quand ouvert */
.footer-accordion.open .footer-accordion-btn {
  color: var(--or);
}

/* SOUS-MENU ACCORDÉON — caché par défaut */
.footer-accordion-menu {
  list-style: none;
  padding: 0 0 6px 12px;
  margin: 0;
  display: none; /* Caché par défaut */
  border-left: 2px solid var(--or);
  margin-left: 4px;
}

/* Visible quand ouvert */
.footer-accordion.open .footer-accordion-menu {
  display: block;
}

.footer-accordion-menu li a {
  display: block;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  padding: 6px 8px;
  transition: var(--transition);
  border-radius: 4px;
}

.footer-accordion-menu li a:hover {
  color: var(--or);
  background: rgba(255,255,255,0.05);
  padding-left: 14px;
}