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


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

/* Barre fixée en haut — toujours blanche sur sous-page */
.er-navbar {
  position: fixed;                           /* Reste visible même au scroll */
  top: 0;                                    /* Collée tout en haut */
  left: 0;                                   /* Collée à gauche */
  width: 100%;                               /* Toute la largeur de l'écran */
  z-index: 1000;                             /* Au-dessus de tout le contenu */
  background: rgba(255, 255, 255, 0.97);     /* Fond blanc légèrement transparent */
  backdrop-filter: blur(10px);               /* Flou derrière la navbar */
  box-shadow: 0 2px 30px rgba(26, 53, 103, 0.1); /* Ombre bleue discrète */
  padding: 14px 0;                           /* Espace vertical intérieur */
  transition: all 0.35s ease;               /* Animation fluide */
}

/* Conteneur centré de la navbar */
.er-nav-conteneur {
  max-width: 1200px;                         /* Largeur maximale */
  margin: 0 auto;                            /* Centré horizontalement */
  padding: 0 24px;                           /* Marges sur les côtés */
  display: flex;                             /* Éléments en ligne */
  align-items: center;                       /* Alignés verticalement */
  justify-content: space-between;            /* Logo gauche, menu droite */
}

/* Logo cliquable */
.er-logo {
  display: flex;                             /* Image et texte côte à côte */
  align-items: center;
  gap: 10px;                                 /* Espace entre image et texte */
  text-decoration: none;                     /* Pas de soulignement */
}

/* Image du logo */
.er-logo-img {
  height: 44px;                              /* Hauteur fixe */
  width: auto;                               /* Largeur proportionnelle */
  border-radius: 4px;
}

/* Texte "Doctrine des Apôtres" */
.er-logo-texte {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bleu-marine);
  white-space: nowrap;                       /* Pas de retour à la ligne */
}

/* Liste des liens desktop */
.er-menu {
  display: flex;                             /* Liens alignés horizontalement */
  align-items: center;
  gap: 4px;                                  /* Espace entre chaque lien */
  list-style: none;                          /* Pas de puces */
  margin: 0;
  padding: 0;
}

/* Chaque élément du menu */
.er-item {
  position: relative;                        /* Pour positionner le sous-menu */
}

/* Lien ou bouton de navigation */
.er-lien {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--bleu-marine);
  text-decoration: none;
  background: none;                          /* Boutons sans fond */
  border: none;                              /* Boutons sans bordure */
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Survol d'un lien */
.er-lien:hover {
  background: rgba(201, 168, 76, 0.12);
  color: var(--or);
}

/* Section active — Évangiles est actif sur cette page */
.er-actif > .er-lien,
.er-actif > .er-toggle {
  color: var(--or);
  font-weight: 600;
  border-bottom: 2px solid var(--or);        /* Soulignement doré */
}

/* Flèche SVG dans les boutons dropdown */
.er-fleche {
  width: 11px;
  height: 11px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Rotation de la flèche au survol du parent */
.er-avec-dropdown:hover .er-fleche {
  transform: rotate(180deg);
}

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

/* Lien Contact — style pilule */
.er-contact {
  border: 2px solid var(--bleu-marine);
  border-radius: 50px;
  padding: 6px 16px;
}

.er-contact:hover {
  background: var(--bleu-marine);
  color: var(--blanc) !important;
}


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

/* Le sous-menu caché par défaut */
.er-dropdown {
  position: absolute;                        /* Sous le bouton parent */
  top: calc(100% + 6px);                     /* 6px sous le bouton */
  left: 0;
  background: var(--blanc);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(26, 53, 103, 0.2);
  list-style: none;
  min-width: 260px;
  padding: 8px 0;
  opacity: 0;                                /* Invisible par défaut */
  pointer-events: none;                      /* Non cliquable quand invisible */
  transform: translateY(-8px);
  transition: all 0.3s ease;
  border-top: 3px solid var(--or);          /* Barre dorée en haut */
  z-index: 999;
}

/* Visible au survol du parent */
.er-avec-dropdown:hover .er-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Liens du sous-menu */
.er-sous-lien {
  display: block;                            /* Toute la largeur cliquable */
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--noir-doux);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.er-sous-lien:hover {
  background: var(--gris-clair);
  color: var(--bleu-marine);
  border-left-color: var(--or);
  padding-left: 26px;                        /* Décalage à droite au survol */
}


/* ===================================================
   HAMBURGER ≡ — caché sur desktop
   =================================================== */

/* Le bouton hamburger */
.er-burger {
  display: none;                             /* CACHÉ sur desktop */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  z-index: 1001;
}

/* Chaque barre du hamburger */
.er-barre {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bleu-marine);            /* Bleues — navbar toujours blanche */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Bouton croix ✕ — injecté par JS */
.er-croix {
  display: none;                             /* Affiché uniquement sur mobile par JS */
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--blanc);
  font-size: 1.3rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;                        /* Bouton rond */
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1002;
  line-height: 1;
}

.er-croix:hover {
  background: var(--or);
  border-color: var(--or);
}


/* ===================================================
   2. BANNIÈRE DE LA PAGE
   =================================================== */

/* Zone bleue avec dégradé */
.er-banniere {
  background: linear-gradient(135deg, var(--bleu-fonce) 0%, var(--bleu-marine) 60%, var(--bleu-clair) 100%);
  padding: 140px 0 50px;                    /* 140px = dégager sous la navbar */
  position: relative;
  overflow: hidden;
}

/* Cercle décoratif en arrière-plan */
.er-cercle-deco {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.12);
  pointer-events: none;                      /* Non cliquable */
}

.er-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);
}


/* ===================================================
   3. FIL D'ARIANE
   =================================================== */

/* Conteneur du fil d'ariane */
.er-breadcrumb {
  margin-bottom: 28px;
}

/* Liste horizontale — PAS de numéros ni puces */
.er-bc-liste {
  display: flex;                             /* Éléments en ligne */
  align-items: center;
  flex-wrap: wrap;                           /* Passe à la ligne sur mobile */
  gap: 4px;
  list-style: none;                         /* SUPPRIME les numéros automatiques */
  padding: 0;
  margin: 0;
}

.er-bc-item {
  display: flex;
  align-items: center;
}

/* Liens cliquables */
.er-bc-lien {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.er-bc-lien:hover {
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Icône maison — TAILLE FIXÉE pour éviter qu'elle soit géante */
.er-bc-maison {
  width: 13px;                              /* 13px exactement */
  height: 13px;
  flex-shrink: 0;
}

/* Séparateur › */
.er-bc-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
  padding: 0 2px;
  user-select: none;                        /* Non sélectionnable */
}

/* Page actuelle — dorée, non cliquable */
.er-bc-actuel {
  color: var(--or);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(201, 168, 76, 0.15);
  border-radius: 20px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                  /* "..." si texte trop long */
}

/* Badge catégorie */
.er-badge-categorie {
  display: inline-block;
  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;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  margin-bottom: 16px;
}

/* Titre h1 */
.er-titre-banniere {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);    /* Taille dynamique selon l'écran */
  color: var(--blanc);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

/* Ligne de métadonnées */
.er-meta-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.er-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
}

.er-meta-icone {
  width: 13px;
  height: 13px;
}

.er-meta-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* Badges médias */
.er-badges-medias {
  display: flex;
  gap: 6px;
}

.er-badge-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--blanc);
}

.er-banniere-contenu {
  text-align: left;
}


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

/* Zone principale sous la bannière */
.er-main {
  background: var(--blanc-casse);           /* Fond légèrement crème */
  padding: 60px 0 100px;
}

/* Layout 2 colonnes */
.er-layout {
  display: grid;
  grid-template-columns: 1fr 320px;         /* Article flexible + sidebar 320px */
  gap: 48px;
  align-items: start;
}

/* Colonne de l'article */
.er-article {
  background: var(--blanc);
  border-radius: 20px;
  padding: 48px;
  box-shadow: var(--ombre);
}


/* ===================================================
   5. ZONE VIDÉO
   =================================================== */

.er-zone-video {
  margin-bottom: 32px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 53, 103, 0.2);
  border: 2px solid rgba(26, 53, 103, 0.1);
  background: var(--bleu-fonce);
}

.er-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bleu-marine);
}

.er-video-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blanc);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}

.er-icone-play {
  width: 22px;
  height: 22px;
  color: var(--or);
}

.er-duree-video {
  background: rgba(201, 168, 76, 0.2);
  color: var(--or);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(201, 168, 76, 0.4);
}

/* Wrapper ratio 16:9 */
.er-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;               /* 56.25% = ratio 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

/* L'iframe occupe tout l'espace du wrapper */
.er-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.er-video-legende {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Crimson Pro', serif;
  font-size: 0.88rem;
  font-style: italic;
  margin: 0;
}


/* ===================================================
   6. NAVIGATION LIVRES 1 ET 2
   =================================================== */

/* Barre de navigation entre les livres */
.er-livres-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  padding: 16px 20px;
  background: var(--gris-clair);
  border-radius: 12px;
  border-left: 3px solid var(--or);
}

/* Chaque lien livre */
.er-lien-livre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(26, 53, 103, 0.2);
  color: var(--bleu-marine);
  background: var(--blanc);
  transition: all 0.3s ease;
}

.er-lien-livre:hover {
  background: var(--bleu-marine);
  color: var(--blanc);
  border-color: var(--bleu-marine);
}

/* Livre actif — style plein */
.er-livre-actif {
  background: var(--bleu-marine);
  color: var(--blanc);
  border-color: var(--bleu-marine);
}


/* ===================================================
   7. MÉDIAS DISPONIBLES
   =================================================== */

.er-medias {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 14px 20px;
  background: var(--gris-clair);
  border-radius: 10px;
  border-left: 3px solid var(--or);
  flex-wrap: wrap;
}

.er-medias-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.er-medias-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.er-media-tag {
  background: var(--bleu-marine);
  color: var(--blanc);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 50px;
}


/* ===================================================
   8. TABLE DES MATIÈRES
   =================================================== */

.er-toc {
  background: linear-gradient(135deg, rgba(26, 53, 103, 0.04), rgba(201, 168, 76, 0.06));
  border: 1px solid rgba(26, 53, 103, 0.12);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 48px;
}

.er-toc-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu-marine);
  margin-bottom: 18px;
}

.er-toc-icone {
  width: 16px;
  height: 16px;
  color: var(--or);
}

.er-toc-liste {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.er-toc-lien {
  color: var(--bleu-marine);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.er-toc-lien:hover {
  color: var(--or);
  border-bottom-color: var(--or);
  padding-left: 6px;
}


/* ===================================================
   9. SECTIONS ET CHAPITRES
   =================================================== */

.er-section {
  margin-bottom: 52px;
}

/* Titre de section avec numéro */
.er-titre-section {
  display: flex;
  align-items: center;
  gap: 14px;                                /* Espace entre numéro et texte */
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--bleu-marine);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 14px;
}

/* Numéro dans un carré bleu */
.er-num-chapitre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;                          /* Empêche le rétrécissement */
  background: var(--bleu-marine);
  color: var(--or);
  border-radius: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Titre du Livre 2 — sans numéro dans carré */
.er-titre-livre2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--or);
}

/* Ligne décorative dorée sous le titre */
.er-diviseur {
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, var(--or), transparent);
  border-radius: 2px;
  margin-bottom: 24px;
}

/* Paragraphe de texte */
.er-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 1.15rem;
  color: #2d3748;
  line-height: 2;
  margin-bottom: 20px;
  text-align: justify;
}

/* Citation biblique */
.er-verset {
  background: linear-gradient(135deg, rgba(26, 53, 103, 0.05), rgba(201, 168, 76, 0.08));
  border-left: 4px solid var(--or);
  border-radius: 0 12px 12px 0;
  padding: 20px 28px;
  margin: 28px 0;
  position: relative;
}

/* Grand guillemet décoratif */
.er-verset::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: var(--or);
  opacity: 0.2;
  line-height: 1;
}

.er-verset p {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--bleu-marine);
  line-height: 1.8;
  margin: 0;
}

/* Encadré avertissement rouge */
.er-avertissement {
  display: flex;
  gap: 16px;
  background: rgba(255, 68, 68, 0.05);
  border: 1px solid rgba(255, 68, 68, 0.2);
  border-left: 4px solid #e53e3e;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 28px 0;
}

.er-avert-icone {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.er-avertissement p {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  color: #c53030;
  line-height: 1.8;
  margin: 0;
}

/* Encadré conclusion bleu */
.er-conclusion {
  background: var(--bleu-marine);
  border-radius: 14px;
  padding: 24px 28px;
  margin-top: 28px;
}

.er-conclusion p {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin: 0;
}

.er-conclusion strong {
  color: var(--or);
}


/* ===================================================
   10. ENCADRÉ 3 CONDITIONS
   =================================================== */

.er-trois-conditions {
  background: var(--gris-clair);
  border-radius: 14px;
  padding: 28px;
  margin: 28px 0;
  border: 2px solid rgba(26, 53, 103, 0.1);
}

.er-trois-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--bleu-marine);
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

.er-trois-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.er-condition {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--blanc);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(26, 53, 103, 0.06);
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--noir-doux);
  line-height: 1.6;
}

.er-condition-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--bleu-marine);
  color: var(--or);
  border-radius: 50%;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}


/* ===================================================
   11. GRILLE DES 3 ÉLÉMENTS (mort/ensevelissement/résurrection)
   =================================================== */

.er-grille-trois {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;       /* 3 colonnes égales */
  gap: 16px;
  margin: 28px 0;
}

.er-carte-trois {
  padding: 20px;
  background: var(--gris-clair);
  border-radius: 12px;
  border-top: 3px solid var(--or);
  text-align: center;
  transition: all 0.3s ease;
}

.er-carte-trois:hover {
  background: var(--blanc);
  box-shadow: var(--ombre);
  transform: translateY(-3px);
}

.er-carte-num {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

.er-carte-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--bleu-marine);
  font-weight: 700;
  margin-bottom: 8px;
}

.er-carte-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--gris-texte);
  line-height: 1.6;
  margin: 0;
}


/* ===================================================
   12. EXEMPLES BIBLIQUES
   =================================================== */

.er-exemples-bibliques {
  background: var(--gris-clair);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 28px 0;
}

.er-exemples-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--bleu-marine);
  font-weight: 700;
  margin-bottom: 16px;
}

.er-exemple {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26, 53, 103, 0.1);
}

.er-exemple:last-child {
  border-bottom: none;
}

.er-exemple-ref {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--or);
  background: rgba(201, 168, 76, 0.1);
  padding: 2px 10px;
  border-radius: 50px;
  display: inline-block;
  width: fit-content;
}

.er-exemple-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}


/* ===================================================
   13. SÉPARATEUR LIVRE 2
   =================================================== */

.er-livre-deux {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 3px solid var(--or);
}

.er-separateur-livre {
  text-align: center;
  margin-bottom: 40px;
}

.er-separateur-texte {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bleu-marine);
  background: var(--blanc);
  padding: 8px 24px;
  border-radius: 50px;
  border: 2px solid var(--or);
  display: inline-block;
}


/* ===================================================
   14. NAVIGATION ENTRE ARTICLES
   =================================================== */

.er-nav-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--gris-clair);
}

.er-nav-art {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--gris-clair);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.er-nav-art:hover {
  background: var(--blanc);
  border-color: var(--bleu-marine);
  transform: translateY(-2px);
  box-shadow: var(--ombre);
}

.er-suivant {
  text-align: right;
}

.er-nav-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--or);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.er-nav-titre {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bleu-marine);
  line-height: 1.4;
}


/* ===================================================
   15. PARTAGE
   =================================================== */

.er-partage {
  margin-top: 32px;
  padding: 24px;
  background: var(--gris-clair);
  border-radius: 14px;
  text-align: center;
}

.er-partage-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.er-partage-boutons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.er-btn-partage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.er-icone-partage {
  width: 16px;
  height: 16px;
}

.er-facebook {
  background: #1877f2;                       /* Bleu Facebook officiel */
  color: var(--blanc);
}

.er-facebook:hover {
  background: #1565d8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
}

.er-whatsapp {
  background: #25d366;                       /* Vert WhatsApp officiel */
  color: var(--blanc);
}

.er-whatsapp:hover {
  background: #1db954;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}


/* ===================================================
   16. COMMENTAIRES
   =================================================== */

.er-commentaires {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 2px solid var(--gris-clair);
}

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

.er-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;
}

.er-com-icone {
  width: 28px;
  height: 28px;
  color: var(--or);
}

.er-com-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: var(--or);
  color: var(--blanc);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

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

/* Formulaire */
.er-formulaire {
  background: linear-gradient(135deg, rgba(26, 53, 103, 0.03), rgba(201, 168, 76, 0.04));
  border: 1px solid rgba(26, 53, 103, 0.1);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}

.er-form-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bleu-marine);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--or);
}

/* Grille 2 colonnes */
.er-form-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.er-form-groupe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.er-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);
}

.er-form-input {
  padding: 12px 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;
  transition: all 0.3s ease;
}

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

.er-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;
  transition: all 0.3s ease;
  line-height: 1.6;
}

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

.er-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;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.er-btn-publier:hover {
  background: var(--or);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 53, 103, 0.25);
}

.er-form-succes {
  margin-top: 14px;
  padding: 12px 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #16a34a;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Liste des commentaires */
.er-liste-coms {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.er-aucun-com {
  text-align: center;
  padding: 48px 20px;
  color: var(--gris-texte);
}

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

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

/* Carte d'un commentaire créée par JS */
.er-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);
  transition: all 0.3s ease;
}

.er-com-carte:hover {
  box-shadow: var(--ombre);
  transform: translateX(4px);
}

.er-com-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

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

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

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

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

.er-com-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: #374151;
  line-height: 1.75;
  margin: 0;
}


/* ===================================================
   17. SIDEBAR
   =================================================== */

.er-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;                          /* Reste visible au scroll */
  top: 100px;                                /* 100px du haut = sous la navbar */
}

.er-btn-retour {
  display: block;
  text-align: center;
  background: var(--bleu-marine);
  color: var(--blanc);
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.er-btn-retour:hover {
  background: var(--or);
  transform: translateY(-2px);
}

.er-widget {
  background: var(--blanc);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--ombre);
}

.er-widget-versets {
  border-top: 3px solid var(--or);
}

.er-widget-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu-marine);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--or);
}

.er-chapitres-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.er-chapitre-lien {
  display: block;
  color: var(--gris-texte);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.er-chapitre-lien:hover {
  background: var(--gris-clair);
  color: var(--bleu-marine);
  border-left-color: var(--or);
  padding-left: 16px;
}

.er-verset-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-clair);
}

.er-verset-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.er-verset-ref {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--or);
  background: rgba(201, 168, 76, 0.1);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 6px;
}

.er-verset-texte {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gris-texte);
  line-height: 1.6;
  margin: 0;
}

.er-lies-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.er-lie-lien {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.er-lie-lien:hover {
  background: var(--gris-clair);
  transform: translateX(4px);
}

.er-lie-titre {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  color: var(--bleu-marine);
  font-weight: 600;
  line-height: 1.4;
}

.er-lie-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--gris-texte);
}

.er-btn-coms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gris-clair);
  color: var(--bleu-marine);
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.er-btn-coms:hover {
  background: var(--blanc);
  border-color: var(--bleu-marine);
  transform: translateY(-2px);
}


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

@media (max-width: 1024px) {

  /* Une seule colonne */
  .er-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Sidebar plus sticky sur tablette */
  .er-sidebar {
    position: static;
  }

  .er-article {
    padding: 36px;
  }

  /* Grille 3 éléments — une colonne */
  .er-grille-trois {
    grid-template-columns: 1fr;
  }
}


/* ===================================================
   19. RESPONSIVE MOBILE (max 768px)
   C'est ici que le hamburger est activé
   =================================================== */

@media (max-width: 768px) {

  /* Affiche le hamburger ≡ */
  .er-burger {
    display: flex;
  }

  /* Affiche le bouton croix ✕ créé par JS */
  .er-croix {
    display: flex;
  }

  /* Menu plein écran qui glisse depuis la droite */
  .er-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 */
    flex-direction: column;                  /* Liens empilés */
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateX(100%);             /* HORS ÉCRAN par défaut */
    transition: transform 0.35s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 80px 20px 40px;
    list-style: none;
  }

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

  /* Liens dans le menu mobile — blancs sur fond bleu */
  .er-item > .er-lien,
  .er-item > .er-toggle {
    font-size: 1.1rem;
    color: var(--blanc) !important;
    padding: 12px 24px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    justify-content: center;
  }

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

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

  /* Sous-menu visible quand le parent a la classe er-ouvert */
  .er-avec-dropdown.er-ouvert .er-dropdown {
    display: block;
  }

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

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

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

  /* Bannière moins haute sur mobile */
  .er-banniere {
    padding: 120px 0 40px;
  }

  .er-titre-banniere {
    font-size: 1.7rem;
  }

  .er-article {
    padding: 24px 20px;
  }

  .er-texte {
    font-size: 1.05rem;
    line-height: 1.9;
  }

  /* Grille 3 éléments — une colonne */
  .er-grille-trois {
    grid-template-columns: 1fr;
  }

  /* Navigation articles — une colonne */
  .er-nav-articles {
    grid-template-columns: 1fr;
  }

  .er-suivant {
    text-align: left;
  }

  /* Formulaire — une colonne */
  .er-form-grille {
    grid-template-columns: 1fr;
  }

  .er-formulaire {
    padding: 20px;
  }

  .er-com-titre {
    font-size: 1.3rem;
  }

  /* Fil d'ariane réduit */
  .er-bc-actuel {
    max-width: 130px;
  }

  /* Livres nav */
  .er-livres-nav {
    flex-wrap: wrap;
  }
}