/* ============================================================
   FICHIER CSS —
   ============================================================ */


/* ===================================================
   1. NAVBAR AUTONOME —
   =================================================== */

/* Barre fixée tout en haut de l'écran */
.ens-navbar {
  position: fixed;              /* Reste visible même quand l'utilisateur scrolle */
  top: 0;                       /* Collée en haut — pas d'espace au-dessus */
  left: 0;                      /* Collée à gauche — couvre toute la largeur */
  width: 100%;                  /* Prend toute la largeur de la fenêtre */
  z-index: 1000;                /* Au-dessus de TOUT le contenu de la page */
  background: rgba(255, 255, 255, 0.97); /* Blanc à 97% — légèrement transparent */
  backdrop-filter: blur(10px);  /* Flou derrière la navbar pour un effet verre */
  box-shadow: 0 2px 30px rgba(26, 53, 103, 0.1); /* Ombre bleue discrète sous la navbar */
  padding: 14px 0;              /* Espace interne haut et bas — épaisseur de la navbar */
  transition: all 0.35s ease;  /* Animation fluide si on change des propriétés via JS */
}

/* Conteneur intérieur de la navbar */
.ens-nav-conteneur {
  max-width: 1200px;            /* Limite la largeur — contenu jamais plus large que 1200px */
  margin: 0 auto;               /* 0 haut/bas, auto gauche/droite = centrage horizontal */
  padding: 0 24px;              /* Marges latérales pour ne pas coller aux bords */
  display: flex;                /* Flexbox = logo et menu côte à côte */
  align-items: center;          /* Aligne verticalement logo et menu au centre */
  justify-content: space-between; /* Logo à gauche, menu à droite */
}

/* Logo — zone cliquable entière */
.ens-logo {
  display: flex;                /* Image et texte côte à côte */
  align-items: center;          /* Aligne image et texte verticalement */
  gap: 10px;                    /* Espace de 10px entre l'image et le texte */
  text-decoration: none;        /* Supprime le soulignement du lien */
}

/* Image du logo */
.ens-logo-img {
  height: 44px;                 /* Hauteur fixe — ne change jamais */
  width: auto;                  /* Largeur proportionnelle à la hauteur */
  border-radius: 4px;           /* Légèrement arrondi */
}

/* Texte "Doctrine des Apôtres" */
.ens-logo-texte {
  font-family: 'Playfair Display', serif; /* Police élégante pour le nom du site */
  font-size: 1.05rem;           /* Légèrement plus grand que la base */
  font-weight: 700;             /* Gras */
  color: var(--bleu-marine);    /* Couleur définie dans style.css */
  white-space: nowrap;          /* Empêche le texte de passer à la ligne */
}

/* Liste du menu desktop */
.ens-menu {
  display: flex;                /* Liens alignés horizontalement */
  align-items: center;          /* Alignés verticalement au centre */
  gap: 4px;                     /* Petit espace entre chaque item */
  list-style: none;             /* Supprime les puces • */
  margin: 0;                    /* Supprime la marge par défaut du ul */
  padding: 0;                   /* Supprime le padding par défaut du ul */
}

/* Chaque élément du menu */
.ens-item {
  position: relative;           /* Nécessaire pour positionner le sous-menu en absolu */
}

/* Lien ou bouton du menu principal */
.ens-lien {
  font-family: 'Montserrat', sans-serif; /* Police sans-serif pour la navigation */
  font-size: 0.78rem;           /* Petit — discret mais lisible */
  font-weight: 500;             /* Demi-gras */
  letter-spacing: 0.3px;       /* Légèrement espacé pour la lisibilité */
  color: var(--bleu-marine);   /* Couleur du texte */
  text-decoration: none;        /* Pas de soulignement */
  background: none;             /* Boutons sans fond par défaut */
  border: none;                 /* Boutons sans bordure par défaut */
  cursor: pointer;              /* Curseur main au survol */
  padding: 8px 12px;            /* Espace intérieur — agrandit la zone cliquable */
  border-radius: 6px;           /* Coins légèrement arrondis */
  transition: all 0.3s ease;   /* Animation fluide au survol */
  display: flex;                /* Texte et flèche côte à côte */
  align-items: center;          /* Alignés verticalement */
  gap: 4px;                     /* Espace entre le texte et la flèche */
}

/* État survolé d'un lien */
.ens-lien:hover {
  background: rgba(201, 168, 76, 0.12); /* Fond doré très léger */
  color: var(--or);             /* Texte doré au survol */
}

/* Section active — Enseignements est actif car on est dans cette section */
.ens-actif > .ens-lien,
.ens-actif > .ens-toggle {
  color: var(--or);             /* Texte doré */
  font-weight: 600;             /* Plus gras que les autres */
  border-bottom: 2px solid var(--or); /* Soulignement doré distinctif */
}

/* Lien actif dans le sous-menu (Enseignements Audios) */
.ens-actif-lien {
  color: var(--or) !important;  /* !important pour écraser la couleur par défaut */
  font-weight: 600 !important;  /* Gras pour distinguer la page actuelle */
}

/* Flèche SVG dans les boutons dropdown */
.ens-fleche {
  width: 11px;                  /* Largeur de la flèche */
  height: 11px;                 /* Hauteur de la flèche */
  transition: transform 0.3s ease; /* Animation fluide de rotation */
  flex-shrink: 0;               /* La flèche ne rétrécit jamais */
}

/* Rotation de la flèche quand le sous-menu est ouvert */
.ens-avec-dropdown:hover .ens-fleche {
  transform: rotate(180deg);    /* La flèche pointe vers le haut */
}

/* Lien Zoom — toujours doré et gras */
.ens-zoom {
  color: var(--or) !important;
  font-weight: 600;
}

/* Lien Contact — style pilule arrondi */
.ens-contact {
  border: 2px solid var(--bleu-marine); /* Bordure bleue */
  border-radius: 50px;          /* Complètement arrondi = pilule */
  padding: 6px 16px;            /* Espace intérieur adapté */
}

.ens-contact:hover {
  background: var(--bleu-marine); /* Fond bleu au survol */
  color: var(--blanc) !important; /* Texte blanc au survol */
}


/* ===================================================
   SOUS-MENUS — apparaissent au survol sur desktop
   =================================================== */

/* Le sous-menu caché par défaut */
.ens-dropdown {
  position: absolute;           /* Positionné par rapport à son parent .ens-item */
  top: calc(100% + 6px);        /* 6px sous le bouton parent */
  left: 0;                      /* Aligné à gauche du bouton parent */
  background: var(--blanc);     /* Fond blanc */
  border-radius: 12px;          /* Coins arrondis */
  box-shadow: 0 20px 60px rgba(26, 53, 103, 0.2); /* Ombre portée prononcée */
  list-style: none;             /* Pas de puces */
  min-width: 260px;             /* Largeur minimale */
  padding: 8px 0;               /* Espace intérieur haut/bas */
  opacity: 0;                   /* Invisible par défaut */
  pointer-events: none;         /* Non cliquable quand invisible */
  transform: translateY(-8px);  /* Légèrement décalé vers le haut */
  transition: all 0.3s ease;   /* Animation d'apparition fluide */
  border-top: 3px solid var(--or); /* Barre dorée en haut du sous-menu */
  z-index: 999;                 /* Au-dessus du contenu, sous la navbar */
}

/* Le sous-menu devient visible au survol du parent */
.ens-avec-dropdown:hover .ens-dropdown {
  opacity: 1;                   /* Visible */
  pointer-events: auto;         /* Cliquable */
  transform: translateY(0);     /* Position normale */
}

/* Chaque lien du sous-menu */
.ens-sous-lien {
  display: block;               /* Toute la ligne est cliquable */
  padding: 10px 20px;           /* Espace intérieur */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--noir-doux);      /* Texte sombre */
  text-decoration: none;
  border-left: 3px solid transparent; /* Bordure invisible par défaut */
  transition: all 0.2s ease;
}

.ens-sous-lien:hover {
  background: var(--gris-clair); /* Fond gris clair au survol */
  color: var(--bleu-marine);
  border-left-color: var(--or); /* Bordure dorée gauche apparaît */
  padding-left: 26px;           /* Décale le texte vers la droite */
}


/* ===================================================
   HAMBURGER ≡ — visible uniquement sur mobile
   =================================================== */

/* Le bouton hamburger ≡ */
.ens-burger {
  display: none;                /* CACHÉ sur desktop — flex sur mobile via media query */
  flex-direction: column;       /* Barres empilées verticalement */
  gap: 5px;                     /* Espace entre les 3 barres */
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  z-index: 1001;                /* Au-dessus de la navbar */
}

/* Chaque barre horizontale du ≡ */
.ens-barre {
  display: block;               /* Élément de bloc pour la largeur */
  width: 24px;                  /* Largeur fixe */
  height: 2px;                  /* Très fine */
  background: var(--bleu-marine); /* Bleue — navbar toujours blanche sur sous-page */
  border-radius: 2px;           /* Extrémités arrondies */
  transition: all 0.3s ease;   /* Pour une future animation de croix si besoin */
}

/* Bouton croix ✕ — créé et injecté par JavaScript */
.ens-croix {
  display: none;                /* Invisible par défaut — JS le met en flex sur mobile */
  position: absolute;           /* Positionné dans le menu plein écran */
  top: 18px;                    /* 18px du haut du menu */
  right: 18px;                  /* 18px de la droite */
  background: rgba(255, 255, 255, 0.15); /* Fond blanc transparent */
  border: 2px solid rgba(255, 255, 255, 0.4); /* Bordure blanche semi-transparente */
  color: var(--blanc);          /* Croix blanche */
  font-size: 1.3rem;            /* Taille du caractère ✕ */
  width: 46px;                  /* Taille du bouton rond */
  height: 46px;
  border-radius: 50%;           /* Rond */
  cursor: pointer;
  align-items: center;          /* Centrage du ✕ */
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1002;                /* Au-dessus du menu plein écran */
  line-height: 1;               /* Évite un décalage vertical du ✕ */
}

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


/* ===================================================
   2. BANNIÈRE DE LA PAGE
   Dégradé bleu sans photo — propre et sobre
   =================================================== */

.ens-banniere {
  background: linear-gradient(
    135deg,
    var(--bleu-fonce) 0%,     /* Bleu très foncé en haut à gauche */
    var(--bleu-marine) 60%,   /* Bleu marine au centre */
    var(--bleu-clair) 100%    /* Bleu plus clair en bas à droite */
  );
  padding: 140px 0 60px;       /* 140px haut = dégage sous la navbar fixe (72px) + espace */
  position: relative;           /* Permet le cercle décoratif en absolute */
  overflow: hidden;             /* Cache les débordements du cercle décoratif */
}

/* Cercle décoratif abstrait en arrière-plan */
.ens-cercle-deco {
  position: absolute;           /* Flotte par rapport à la bannière */
  top: -100px;                  /* Partiellement hors de la bannière */
  right: -100px;                /* Partiellement hors à droite */
  width: 500px;                 /* Grand cercle */
  height: 500px;
  border-radius: 50%;           /* Parfaitement rond */
  border: 2px solid rgba(201, 168, 76, 0.12); /* Cercle doré très discret */
  pointer-events: none;         /* Non interactif — purement décoratif */
}

/* Second cercle plus petit à l'intérieur */
.ens-cercle-deco::after {
  content: '';                  /* Pseudo-élément — nécessite content: '' */
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.08); /* Encore plus discret */
}


/* ===================================================
   3. FIL D'ARIANE
   Accueil › Enseignements › Enseignements Audios
   =================================================== */

.ens-breadcrumb {
  margin-bottom: 28px;          /* Espace sous le fil d'ariane avant le titre */
}

/* Liste horizontale — list-style: none supprime les numéros automatiques */
.ens-bc-liste {
  display: flex;                /* Éléments côte à côte horizontalement */
  align-items: center;          /* Alignés verticalement */
  flex-wrap: wrap;              /* Passe à la ligne sur petit écran */
  gap: 4px;                     /* Espace entre chaque élément */
  list-style: none;             /* CRUCIAL — supprime "1. 2. 3." automatiques */
  padding: 0;                   /* Supprime le padding par défaut du ol */
  margin: 0;                    /* Supprime la marge par défaut du ol */
}

/* Chaque élément du fil d'ariane */
.ens-bc-item {
  display: flex;                /* Pour aligner l'icône et le texte */
  align-items: center;
}

/* Lien cliquable dans le fil d'ariane */
.ens-bc-lien {
  display: flex;                /* Icône et texte côte à côte */
  align-items: center;
  gap: 5px;                     /* Espace entre l'icône et le texte */
  color: rgba(255, 255, 255, 0.75); /* Blanc à 75% — lisible sur fond bleu */
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;           /* Petit — fil d'ariane est discret */
  font-weight: 500;
  padding: 4px 10px;            /* Zone cliquable plus grande */
  border-radius: 20px;          /* Pilule arrondie */
  transition: all 0.3s ease;
  border: 1px solid transparent; /* Invisible par défaut */
}

.ens-bc-lien:hover {
  color: var(--blanc);          /* Blanc pur au survol */
  background: rgba(255, 255, 255, 0.1); /* Fond blanc léger */
  border-color: rgba(255, 255, 255, 0.2); /* Bordure légère */
}

/* Icône maison SVG — TAILLE FIXÉE pour éviter qu'elle soit géante */
.ens-bc-maison {
  width: 13px;                  /* 13px exactement — sans ça elle prend tout l'espace */
  height: 13px;
  flex-shrink: 0;               /* Ne rétrécit jamais dans le flex */
}

/* Séparateur › entre les niveaux */
.ens-bc-sep {
  color: rgba(255, 255, 255, 0.35); /* Très discret */
  font-size: 0.9rem;
  padding: 0 2px;
  user-select: none;            /* Non sélectionnable quand on copie du texte */
}

/* Page actuelle — dorée, non cliquable */
.ens-bc-actuel {
  color: var(--or);             /* Doré pour se distinguer des liens */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;             /* Plus gras que les liens */
  padding: 4px 12px;
  background: rgba(201, 168, 76, 0.15); /* Fond doré translucide */
  border-radius: 20px;
  border: 1px solid rgba(201, 168, 76, 0.3); /* Bordure dorée subtile */
  max-width: 200px;             /* Limite la largeur */
  white-space: nowrap;          /* Pas de retour à la ligne */
  overflow: hidden;             /* Cache le débordement */
  text-overflow: ellipsis;      /* "..." si le texte est trop long */
}

/* Badge catégorie au-dessus du titre */
.ens-badge-categorie {
  display: inline-block;        /* Prend la largeur de son contenu */
  background: rgba(201, 168, 76, 0.2);
  color: var(--or);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;          /* Espacement entre lettres = effet uppercase lisible */
  text-transform: uppercase;    /* Tout en majuscules */
  padding: 5px 16px;
  border-radius: 50px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  margin-bottom: 16px;          /* Espace sous le badge avant le titre */
}

.ens-banniere-contenu {
  text-align: left;             /* Aligné à gauche dans la bannière */
}

/* Titre principal h1 */
.ens-titre-banniere {
  font-family: 'Playfair Display', serif; /* Police élégante pour le titre */
  font-size: clamp(2.2rem, 5vw, 3.4rem); /* clamp = taille fluide : min, préféré, max */
  color: var(--blanc);          /* Blanc sur fond bleu */
  font-weight: 900;             /* Maximum de gras */
  line-height: 1.2;             /* Interligne serré pour les grands titres */
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); /* Légère ombre pour la lisibilité */
}

/* Sous-titre descriptif */
.ens-sous-titre-banniere {
  font-family: 'Crimson Pro', serif; /* Police de texte courant */
  font-size: 1.15rem;
  font-style: italic;           /* Italique pour le sous-titre */
  color: rgba(255, 255, 255, 0.75); /* Blanc à 75% — hiérarchie visuelle */
  margin: 0;                    /* Pas de marge supplémentaire */
}


/* ===================================================
   4. CORPS PRINCIPAL
   =================================================== */

.ens-main {
  background: var(--blanc-casse); /* Fond légèrement crème — plus doux que blanc pur */
  padding: 60px 0 100px;        /* 60px haut, 100px bas pour espacer du footer */
}

/* En-tête de la section avec titre et compteur */
.ens-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Titre à gauche, icône à droite */
  margin-bottom: 40px;          /* Espace sous l'en-tête avant les blocs */
  padding-bottom: 24px;         /* Espace intérieur bas */
  border-bottom: 2px solid rgba(26, 53, 103, 0.1); /* Ligne de séparation discrète */
}

/* Titre "Tous les Enseignements" */
.ens-section-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--bleu-marine);
  margin-bottom: 6px;           /* Espace sous le titre avant le compteur */
}

/* Texte "X enseignements disponibles" */
.ens-section-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--gris-texte);
}

/* Le nombre dans le compteur — mis en valeur */
#ensCompteurEnseignements {
  font-weight: 700;             /* Gras */
  color: var(--or);             /* Doré */
}

/* Icône casque audio décorative à droite */
.ens-icone-deco {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(26, 53, 103, 0.08), rgba(201, 168, 76, 0.12));
  border-radius: 50%;           /* Cercle */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bleu-marine);
  opacity: 0.6;                 /* Légèrement transparent */
}

.ens-icone-deco svg {
  width: 32px;                  /* Taille de l'icône SVG intérieure */
  height: 32px;
}


/* ===================================================
   5. GRILLE DES BLOCS D'ENSEIGNEMENTS
   Flex vertical — s'adapte à n'importe quel nombre de blocs
   =================================================== */

.ens-grille-enseignements {
  display: flex;                /* Flexbox */
  flex-direction: column;       /* Blocs empilés verticalement */
  gap: 32px;                    /* 32px d'espace entre chaque bloc */
  margin-bottom: 64px;          /* Espace sous la grille avant les commentaires */
}


/* ===================================================
   6. BLOC ENSEIGNEMENT — carte complète
   =================================================== */

.ens-bloc-enseignement {
  background: var(--blanc);     /* Fond blanc */
  border-radius: 20px;          /* Coins bien arrondis */
  overflow: hidden;             /* Cache les coins de l'en-tête bleu qui dépasseraient */
  box-shadow: 0 4px 24px rgba(26, 53, 103, 0.08); /* Ombre légère */
  border: 1px solid rgba(26, 53, 103, 0.08); /* Bordure très discrète */
  transition: all 0.3s ease;   /* Animation fluide au survol */
}

.ens-bloc-enseignement:hover {
  box-shadow: 0 8px 40px rgba(26, 53, 103, 0.14); /* Ombre plus prononcée */
  transform: translateY(-3px);  /* Légère élévation — effet de carte qui se soulève */
}


/* ===================================================
   7. EN-TÊTE DU BLOC — numéro + titre + badges
   =================================================== */

.ens-ens-header {
  display: flex;                /* Numéro et méta côte à côte */
  align-items: flex-start;      /* Aligne en haut — le méta peut être plus haut */
  gap: 20px;                    /* Espace entre le numéro et le méta */
  padding: 28px 32px 24px;      /* Espace intérieur : haut, côtés, bas */
  background: linear-gradient(135deg, var(--bleu-marine) 0%, #1e4a8a 100%); /* Dégradé bleu */
}

/* Numéro de l'enseignement dans un carré doré */
.ens-ens-num {
  display: flex;
  align-items: center;
  justify-content: center;      /* Centré horizontalement et verticalement */
  width: 52px;                  /* Largeur fixe */
  height: 52px;                 /* Hauteur fixe = carré */
  min-width: 52px;              /* Empêche le rétrécissement en flex */
  background: linear-gradient(135deg, var(--or), #e8c060); /* Dégradé doré */
  color: var(--bleu-marine);    /* Numéro bleu sur fond doré */
  border-radius: 14px;          /* Coins très arrondis */
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 900;             /* Maximum de gras pour le numéro */
  flex-shrink: 0;               /* Ne rétrécit jamais */
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.4); /* Ombre dorée */
}

/* Zone titre + badges d'info */
.ens-ens-meta {
  flex: 1;                      /* Prend tout l'espace restant */
}

/* Titre de l'enseignement */
.ens-ens-titre {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem); /* Fluide selon la largeur */
  font-weight: 700;
  color: var(--blanc);          /* Blanc sur fond bleu */
  line-height: 1.4;             /* Interligne confortable */
  margin-bottom: 12px;          /* Espace sous le titre avant les badges */
}

/* Ligne des badges d'information */
.ens-ens-infos {
  display: flex;
  flex-wrap: wrap;              /* Les badges passent à la ligne si besoin */
  gap: 8px;                     /* Espace entre les badges */
  align-items: center;
}

/* Badge générique — base commune à tous les badges */
.ens-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;                     /* Espace entre l'icône et le texte */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;           /* Très petit — badge compact */
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;          /* Pilule */
  white-space: nowrap;          /* Texte sur une seule ligne */
}

/* Badge date — fond blanc semi-transparent */
.ens-badge-date {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85); /* Blanc légèrement transparent */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Badge nombre d'audios — idem */
.ens-badge-nb-audios {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Badge sujet — doré semi-transparent */
.ens-badge-sujet {
  background: rgba(201, 168, 76, 0.2); /* Fond doré translucide */
  color: var(--or);             /* Texte doré */
  border: 1px solid rgba(201, 168, 76, 0.4);
}


/* ===================================================
   8. ZONE AUDIOS — liste des parties
   =================================================== */

.ens-audio-liste {
  padding: 24px 32px;           /* Espace autour de la liste d'audios */
  display: flex;
  flex-direction: column;       /* Parties empilées verticalement */
  gap: 16px;                    /* Espace entre chaque partie */
  background: var(--blanc);     /* Fond blanc pour contraster avec l'en-tête bleu */
}


/* ===================================================
   9. ITEM AUDIO — chaque partie individuelle
   =================================================== */

.ens-audio-item {
  background: var(--gris-clair); /* Fond gris très clair */
  border-radius: 14px;          /* Coins arrondis */
  overflow: hidden;             /* Masque les débordements */
  border: 1px solid rgba(26, 53, 103, 0.08); /* Bordure très discrète */
}

/* Barre supérieure : "Partie X" + durée */
.ens-audio-label {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Nom à gauche, durée à droite */
  padding: 12px 20px;           /* Espace intérieur */
  background: var(--blanc);     /* Fond blanc distinct du bloc gris */
  border-bottom: 1px solid rgba(26, 53, 103, 0.08); /* Ligne de séparation */
}

/* Nom de la partie */
.ens-audio-partie {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bleu-marine);
  display: flex;
  align-items: center;
  gap: 8px;                     /* Espace entre le point coloré et le texte */
}

/* Point coloré avant le nom de la partie */
.ens-audio-partie::before {
  content: '';                  /* Pseudo-élément — nécessite content: '' */
  display: inline-block;
  width: 8px;                   /* Petit cercle de 8px */
  height: 8px;
  border-radius: 50%;           /* Rond parfait */
  background: var(--or);        /* Doré */
  flex-shrink: 0;               /* Ne rétrécit jamais */
}

/* Durée à droite */
.ens-audio-duree {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gris-texte);
  background: rgba(26, 53, 103, 0.07); /* Fond bleu très léger */
  padding: 3px 10px;
  border-radius: 50px;          /* Pilule */
}


/* ===================================================
   10. MESSAGE "AUDIO BIENTÔT DISPONIBLE"
   Beau visuel — pas un simple texte brut
   =================================================== */

.ens-audio-indisponible {
  display: flex;                /* Icône et texte côte à côte */
  align-items: center;
  gap: 18px;                    /* Espace entre l'icône et le texte */
  padding: 20px 24px;           /* Espace intérieur confortable */
  /* Dégradé subtil bleu-doré pour un fond élégant */
  background: linear-gradient(
    135deg,
    rgba(26, 53, 103, 0.04) 0%,   /* Bleu très légèrement teinté */
    rgba(201, 168, 76, 0.06) 100% /* Doré très légèrement teinté */
  );
}

/* Cercle pointillé autour de l'icône */
.ens-indispo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;                  /* Cercle de 56px */
  height: 56px;
  min-width: 56px;              /* Empêche le rétrécissement */
  border-radius: 50%;           /* Rond parfait */
  border: 2px dashed rgba(26, 53, 103, 0.2); /* Pointillés discrets */
  background: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent */
  color: rgba(26, 53, 103, 0.35); /* Icône bleue très discrète */
  flex-shrink: 0;               /* Ne rétrécit jamais */
}

/* Zone de texte */
.ens-indispo-texte {
  flex: 1;                      /* Prend tout l'espace restant */
}

/* "Audio bientôt disponible" */
.ens-indispo-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bleu-marine);
  margin-bottom: 4px;           /* Petit espace avant le sous-texte */
  opacity: 0.7;                 /* Légèrement estompé */
}

/* "Le fichier audio sera mis en ligne prochainement" */
.ens-indispo-sous {
  font-family: 'Crimson Pro', serif;
  font-size: 0.88rem;
  font-style: italic;           /* Italique — note secondaire */
  color: var(--gris-texte);
  margin: 0;
  opacity: 0.8;
}

/* Badge "⏳ Bientôt" affiché automatiquement à droite via ::after */
.ens-audio-indisponible::after {
  content: '⏳ Bientôt';        /* Texte du badge généré en CSS */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--or);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 4px 10px;
  border-radius: 50px;
  white-space: nowrap;          /* Sur une ligne */
  align-self: center;           /* Centré verticalement dans le flex */
}


/* ===================================================
   11. LECTEUR AUDIO (quand les audios seront disponibles)
   Ces styles s'activeront automatiquement quand Java injecte
   le HTML avec .ens-lecteur-zone à la place de .ens-audio-indisponible
   =================================================== */

.ens-lecteur-zone {
  padding: 16px 20px;           /* Espace autour du lecteur */
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* Espace entre le lecteur et le bouton download */
}

/* Lecteur HTML5 natif */
.ens-lecteur {
  width: 100%;                  /* Pleine largeur */
  height: 44px;                 /* Hauteur fixe */
  border-radius: 50px;          /* Lecteur en pilule */
  outline: none;                /* Pas de contour focus */
  accent-color: var(--bleu-marine); /* Couleur de la barre de progression */
}

/* Bouton de téléchargement */
.ens-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bleu-marine);
  text-decoration: none;
  opacity: 0.7;                 /* Discret par défaut */
  transition: opacity 0.2s ease;
}

.ens-btn-download:hover {
  opacity: 1;                   /* Pleinement visible au survol */
}


/* ===================================================
   12. COMMENTAIRES
   =================================================== */

.ens-commentaires {
  margin-top: 20px;
  padding-top: 52px;            /* Espace en haut de la section */
  border-top: 2px solid rgba(26, 53, 103, 0.1); /* Ligne de séparation */
}

.ens-com-header {
  margin-bottom: 32px;
}

/* Titre "Commentaires" avec icône et compteur */
.ens-com-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--bleu-marine);
  font-weight: 800;
  margin-bottom: 8px;
}

.ens-com-icone {
  width: 28px;
  height: 28px;
  color: var(--or);             /* Icône dorée */
}

/* Badge compteur de commentaires */
.ens-com-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;              /* Minimum 28px même pour "0" */
  height: 28px;
  padding: 0 8px;
  background: var(--or);        /* Fond doré */
  color: var(--blanc);          /* Chiffre blanc */
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.ens-com-sous-titre {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--gris-texte);
  font-style: italic;
}

/* Boîte du formulaire */
.ens-formulaire {
  background: var(--blanc);
  border: 1px solid rgba(26, 53, 103, 0.1);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(26, 53, 103, 0.06);
}

/* Titre du formulaire */
.ens-form-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;    /* Majuscules */
  color: var(--bleu-marine);
  margin-bottom: 24px;
  padding-bottom: 12px;         /* Espace avant la ligne */
  border-bottom: 2px solid var(--or); /* Ligne dorée sous le titre */
}

/* Grille 2 colonnes : Nom + Email */
.ens-form-grille {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
  gap: 16px;                    /* Espace entre les colonnes */
  margin-bottom: 16px;
}

/* Groupe label + input */
.ens-form-groupe {
  display: flex;
  flex-direction: column;       /* Label au-dessus de l'input */
  gap: 6px;                     /* Espace entre le label et l'input */
  margin-bottom: 16px;
}

/* Label du champ */
.ens-form-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gris-texte);
}

/* Champ texte et email */
.ens-form-input {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;    /* Bordure gris clair par défaut */
  border-radius: 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--noir-doux);
  background: var(--blanc);
  outline: none;                /* Pas de contour bleu par défaut */
  transition: all 0.3s ease;
}

.ens-form-input:focus {
  border-color: var(--bleu-marine); /* Bordure bleue au focus */
  box-shadow: 0 0 0 3px rgba(26, 53, 103, 0.08); /* Halo bleu discret */
}

/* Zone de texte multi-lignes */
.ens-form-textarea {
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--noir-doux);
  background: var(--blanc);
  outline: none;
  resize: vertical;             /* Redimensionnable uniquement en hauteur */
  min-height: 130px;            /* Hauteur minimum */
  transition: all 0.3s ease;
  line-height: 1.6;
}

.ens-form-textarea:focus {
  border-color: var(--bleu-marine);
  box-shadow: 0 0 0 3px rgba(26, 53, 103, 0.08);
}

/* Bouton publier */
.ens-btn-publier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bleu-marine);
  color: var(--blanc);
  border: none;
  padding: 14px 32px;
  border-radius: 50px;          /* Pilule */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.ens-btn-publier:hover {
  background: var(--or);        /* Fond doré au survol */
  transform: translateY(-2px);  /* Légère élévation */
  box-shadow: 0 8px 24px rgba(26, 53, 103, 0.25);
}

/* Message de succès après soumission */
.ens-form-succes {
  margin-top: 14px;
  padding: 12px 20px;
  background: rgba(34, 197, 94, 0.1); /* Fond vert très léger */
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #16a34a;               /* Vert lisible */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Conteneur de la liste des commentaires */
.ens-liste-coms {
  display: flex;
  flex-direction: column;
  gap: 20px;                    /* Espace entre les cartes */
}

/* Message "soyez le premier" */
.ens-aucun-com {
  text-align: center;
  padding: 48px 20px;
  color: var(--gris-texte);
}

.ens-aucun-icone {
  font-size: 3rem;
  margin-bottom: 12px;
}

.ens-aucun-com p {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  font-style: italic;
}

/* Carte d'un commentaire individuel (créée par JS) */
.ens-com-carte {
  background: var(--blanc);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(26, 53, 103, 0.06);
  border-left: 4px solid var(--bleu-marine); /* Accent bleu à gauche */
  transition: all 0.3s ease;
}

.ens-com-carte:hover {
  box-shadow: var(--ombre);
  transform: translateX(4px);   /* Glisse légèrement à droite */
}

/* En-tête de la carte : avatar + infos */
.ens-com-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Avatar avec l'initiale du nom */
.ens-com-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;           /* Rond */
  background: var(--bleu-marine);
  color: var(--or);             /* Initiale dorée sur fond bleu */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ens-com-infos { flex: 1; }

.ens-com-nom {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bleu-marine);
}

.ens-com-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--gris-texte);
  margin-top: 2px;
}

/* Texte du commentaire */
.ens-com-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: #374151;
  line-height: 1.75;
  margin: 0;
}


/* ===================================================
   13. RESPONSIVE TABLETTE (max 1024px)
   =================================================== */

@media (max-width: 1024px) {

  .ens-ens-header {
    padding: 24px;              /* Réduit l'espace intérieur */
  }

  .ens-audio-liste {
    padding: 20px 24px;         /* Réduit aussi */
  }

}


/* ===================================================
   14. RESPONSIVE MOBILE (max 768px)
   C'est ici que le hamburger s'active
   =================================================== */

@media (max-width: 768px) {

  /* Affiche le bouton hamburger ≡ */
  .ens-burger {
    display: flex;              /* Visible sur mobile */
  }

  /* Affiche le bouton croix ✕ créé par JS */
  .ens-croix {
    display: flex;              /* Visible sur mobile */
  }

  /* Menu plein écran qui glisse depuis la droite */
  .ens-menu {
    position: fixed;            /* Couvre tout l'écran */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--bleu-marine); /* Fond bleu marine plein écran */
    flex-direction: column;     /* Liens empilés verticalement */
    align-items: center;
    justify-content: center;    /* Centré verticalement */
    gap: 8px;
    transform: translateX(100%); /* HORS ÉCRAN à droite par défaut */
    transition: transform 0.35s ease; /* Animation fluide */
    z-index: 1000;
    overflow-y: auto;           /* Scroll si beaucoup de liens */
    padding: 80px 20px 40px;    /* Espace pour la croix en haut */
    list-style: none;
  }

  /* Classe ajoutée par JS pour ouvrir le menu */
  .ens-menu.ens-ouvert {
    transform: translateX(0);   /* Glisse dans l'écran */
  }

  /* Liens dans le menu mobile */
  .ens-item > .ens-lien,
  .ens-item > .ens-toggle {
    font-size: 1.1rem;          /* Plus grand sur mobile */
    color: var(--blanc) !important; /* Blanc sur fond bleu */
    padding: 12px 24px;
    width: 100%;                /* Pleine largeur */
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Séparateur discret */
    border-radius: 0;           /* Pas d'arrondi sur mobile */
    justify-content: center;
  }

  .ens-item > .ens-lien:hover,
  .ens-item > .ens-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--or) !important;
  }

  /* Sous-menus en accordéon sur mobile */
  .ens-dropdown {
    position: static;           /* Plus absolu sur mobile */
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.08); /* Fond légèrement plus clair */
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--or); /* Trait doré à gauche */
    margin-left: 20px;
    display: none;              /* Caché par défaut */
    border-radius: 8px;
    margin-top: 4px;
    min-width: auto;
    padding: 6px 0;
  }

  /* Visible quand le parent a la classe ens-ouvert */
  .ens-avec-dropdown.ens-ouvert .ens-dropdown {
    display: block;             /* Le CSS l'affiche */
  }

  .ens-sous-lien {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.88rem;
    padding: 10px 16px;
    border-left: none;
    text-align: left;
  }

  .ens-sous-lien:hover {
    color: var(--or) !important;
    background: rgba(255, 255, 255, 0.05);
    padding-left: 22px;
  }

  .ens-contact {
    border-color: rgba(255, 255, 255, 0.4) !important;
  }

  /* Bannière mobile */
  .ens-banniere {
    padding: 120px 0 40px;      /* Réduit le padding haut */
  }

  .ens-titre-banniere {
    font-size: 1.9rem;          /* Titre plus petit sur mobile */
  }

  /* En-tête du bloc moins spacieux */
  .ens-ens-header {
    padding: 20px;
    gap: 14px;
  }

  .ens-ens-num {
    width: 42px;                /* Plus petit sur mobile */
    height: 42px;
    min-width: 42px;
    font-size: 1rem;
  }

  .ens-ens-titre {
    font-size: 0.95rem;         /* Plus compact */
  }

  .ens-audio-liste {
    padding: 16px;
  }

  /* Cache le badge "⏳ Bientôt" sur petit écran pour économiser l'espace */
  .ens-audio-indisponible::after {
    display: none;
  }

  .ens-audio-indisponible {
    padding: 16px;
    gap: 12px;
  }

  .ens-indispo-icone {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  /* En-tête section empilé verticalement */
  .ens-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ens-icone-deco {
    display: none;              /* Cache l'icône décorative sur mobile */
  }

  /* Formulaire : une seule colonne */
  .ens-form-grille {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  }

  .ens-formulaire {
    padding: 20px;              /* Moins d'espace intérieur */
  }

  /* Fil d'ariane raccourci */
  .ens-bc-actuel {
    max-width: 140px;           /* Réduit et ajoute "..." si trop long */
  }

}