/* ============================================================
   ÉGLISE SAINTE-LIBAIRE — LA BROQUE
   Feuille de style principale · Palette bleue & dorée
   ============================================================

   TABLE DES MATIÈRES
   ──────────────────
   1.  Imports & Variables
   2.  Reset & Base
   3.  Typographie
   4.  Navigation
   5.  Hero
   6.  Sections & Conteneurs
   7.  Grilles
   8.  Cartes (cards)
   9.  Frise chronologique (timeline)
  10.  Vitraux
  11.  Orgue
  12.  Cloches
  13.  Sainte Libaire
  14.  Curés
  15.  Galerie
  16.  Accordéon
  17.  Onglets (tabs)
  18.  Composants divers
       (badge INS, blockquote, infobox, highlight-box, photo-placeholder)
  19.  Lightbox
  20.  Pied de page (footer)
  21.  Utilitaires
  22.  Responsive
   ============================================================ */


/* ============================================================
   1. IMPORTS & VARIABLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600&display=swap');

:root {
  /* — Fonds — */
  --fond-principal:   #F5F2EA;   /* beige clair — fond de page */
  --fond-section:     #E8EEF7;   /* bleu très pâle — sections alternées */
  --fond-section-alt: #D4DFF0;   /* bleu pâle soutenu */

  /* — Bleus — */
  --bois-fonce:  #1E3A5F;        /* nav, titres forts */
  --bois:        #2A5298;        /* bleu principal */
  --bois-clair:  #4A72B8;        /* accents secondaires */

  /* — Gris — */
  --sol:         #6B7280;
  --sol-fonce:   #4A5568;

  /* — Dorés — */
  --dore:        #C8A96A;        /* filets, badges */
  --dore-clair:  #E8D5A3;        /* doré adouci */

  /* — Accents — */
  --vitrail:       #2A5298;      /* liens */
  --vitrail-rouge: #D27D5B;      /* terracotta, ponctuel */

  /* — Texte — */
  --texte:       #2C3E50;        /* texte principal */
  --texte-doux:  #4A5568;        /* corps courant */
  --texte-clair: #6B7280;        /* légendes, méta */

  /* — Divers — */
  --bordure:     #B8C8E0;
  --blanc:       #FFFFFF;

  /* — Typographie — */
  --font-titre: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-corps: Calibri, Arial, 'Helvetica Neue', sans-serif;
  --font-serif: 'IM Fell English', Georgia, serif; /* citations, décoratif */

  /* — Espacements — */
  --radius:    6px;
  --radius-lg: 12px;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-corps);
  color: var(--texte-doux);
  background: var(--fond-principal);
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: var(--vitrail);
  text-decoration: none;
}
a:hover {
  color: var(--bois-clair);
  text-decoration: underline;
}

/* Éviter tout débordement horizontal */
*,
section,
.container,
.grid-2,
.grid-3,
.grid-4 {
  max-width: 100%;
}


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

h1, h2, h3, h4, h5 {
  font-family: var(--font-titre);
  color: var(--bois-fonce);
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: clamp(1.8rem, 5vw,   3.2rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p {
  margin-bottom: 1em;
  color: var(--texte-doux);
}
p:last-child { margin-bottom: 0; }

blockquote {
  border-left: 3px solid var(--dore);
  padding: 0.9rem 1.3rem;
  background: var(--fond-section);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texte);
  margin: 1.25rem 0;
}
blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-corps);
  font-size: 0.78rem;
  color: var(--texte-clair);
  margin-top: 0.5rem;
}

blockquote.inscription {
  font-size: 0.9rem;
  margin: 0.9rem 0;
}



/* ============================================================
   4. NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bois-fonce);
  border-bottom: 2px solid var(--dore);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  position: relative; /* ancrage du menu mobile */
}

.nav-logo {
  font-family: var(--font-titre);
  font-size: 1rem;
  color: var(--dore);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  gap: 0.2rem;
  list-style: none;
}

.nav-links a {
  color: rgba(245, 242, 234, 0.8);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--dore);
  background: rgba(200, 169, 106, 0.15);
  text-decoration: none;
}

/* Hamburger mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dore);
  margin: 5px 0;
  transition: all 0.3s;
}


/* ============================================================
   5. HERO
   ============================================================ */

.hero {
  position: relative;
  height: 90vh; /* L'image prend 90% de la hauteur de la fenêtre */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bois-fonce);
}

.hero-photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 58, 95, 0.2)  0%,
    rgba(30, 58, 95, 0.65) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 750px;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-corps);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dore-clair);
  margin-bottom: 1rem;
  padding: 0.3rem 1rem;
  border: 1px solid rgba(200, 169, 106, 0.45);
  border-radius: 2rem;
}

.hero h1 {
  color: var(--fond-principal);
  font-family: var(--font-titre);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.6rem;
}

.hero-subtitle {
  color: rgba(245, 242, 234, 0.8);
  font-size: 1rem;
  font-family: var(--font-corps);
  margin-bottom: 1.5rem;
}

.hero-divider {
  width: 56px;
  height: 2px;
  background: var(--dore);
  margin: 0 auto 1.25rem;
}

.hero-date {
  color: var(--dore-clair);
  font-family: var(--font-corps);
  font-style: italic;
  font-size: 0.95rem;
}


/* ============================================================
   6. SECTIONS & CONTENEURS
   ============================================================ */

.section {
  padding: 4.5rem 1.25rem;
}

.section-alt  { background: var(--fond-section); }

.section-dark { background: var(--bois-fonce); }
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--dore); }
.section-dark p   { color: rgba(245, 242, 234, 0.8); }

/* Adaptation automatique sur fond sombre */
.section-dark .text-dore,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark .section-label { color: var(--dore-clair) !important; }
.section-dark .section-divider { background-color: var(--dore-clair); }

.container        { max-width: 1100px; margin: 0 auto; }
.container-narrow { max-width: 760px;  margin: 0 auto; }

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.section-header h2 { margin-bottom: 0.6rem; }

.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dore);
  font-family: var(--font-corps);
  margin-bottom: 0.4rem;
}

.section-divider {
  width: 44px;
  height: 2px;
  background: var(--dore);
  margin: 1.1rem auto 0;
}

/* En-tête de page intérieure */
.page-header {
  background: var(--bois-fonce);
  border-bottom: 2px solid var(--dore);
  padding: 3.5rem 1.25rem 2.5rem;
  text-align: center;
}
.page-header h1 { color: var(--fond-principal); }
.page-header .breadcrumb {
  color: rgba(245, 242, 234, 0.55);
  font-size: 0.82rem;
  margin-top: 0.6rem;
}
.page-header .breadcrumb a {
  color: var(--dore);
  text-decoration: none;
}


/* ============================================================
   7. GRILLES
   ============================================================ */

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }


/* ============================================================
   8. CARTES (CARDS)
   ============================================================ */

.card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bordure);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(30, 58, 95, 0.12);
}

.card-img {
  width: 100%;       /* L'image prend toute la largeur de la carte */
  height: 350px;     /* Augmentez cette valeur (ex: de 200px à 350px) */
  object-fit: cover; /* Très important pour ne pas déformer le Saint Antoine */
  display: block;
}
.card-body { padding: 1.25rem; }

.card-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dore);
  font-family: var(--font-corps);
  margin-bottom: 0.4rem;
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}


/* ============================================================
   9. FRISE CHRONOLOGIQUE (TIMELINE)
   ============================================================ */

.timeline {
  position: relative;
  padding-left: 2rem;
  margin-top: 2rem;
}

/* Ligne verticale dégradée */
.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--dore), var(--dore-clair), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
}

/* Puce dorée */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dore);
  border: 2px solid var(--fond-principal);
  box-shadow: 0 0 0 2px var(--dore);
  z-index: 2;
}

.timeline-date {
  font-family: var(--font-corps);
  font-weight: 700;
  color: var(--dore);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.timeline-item h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.timeline-item p {
  font-size: 0.88rem;
  margin: 0;
}


/* ============================================================
   10. VITRAUX
   ============================================================ */

.vitrail-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
}

.vitrail-card {
  background: var(--blanc);
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s;
}
.vitrail-card:hover { transform: translateY(-2px); }

.vitrail-img-wrap {
  background: var(--fond-section);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vitrail-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.vitrail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  color: var(--vitrail);
}
.vitrail-placeholder .icon {
  font-size: 1.8rem;
  opacity: 0.45;
  margin-bottom: 0.4rem;
}

.vitrail-body    { padding: 0.6rem 0.5rem; }
.vitrail-body h4 { font-size: 0.8rem;  color: var(--bois-fonce); margin-bottom: 0.2rem; line-height: 1.25; }
.vitrail-body p  { font-size: 0.72rem; color: var(--texte-clair); margin: 0; }

.vitrail-side {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dore);
  font-weight: 700;
  font-family: var(--font-corps);
  margin-bottom: 0.2rem;
}


/* ============================================================
   11. ORGUE
   ============================================================ */

.orgue-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin: 1.75rem 0;
}

.spec-box {
  background: var(--fond-section);
  border-left: 3px solid var(--dore);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.spec-box .num {
  font-family: var(--font-titre);
  font-size: 1.7rem;
  color: var(--bois-fonce);
  line-height: 1;
}
.spec-box .label {
  font-size: 0.78rem;
  color: var(--texte-clair);
  margin-top: 0.15rem;
}


/* ============================================================
   12. CLOCHES
   ============================================================ */

.cloche-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--dore);
}
.cloche-card h3 { margin-bottom: 0.6rem; }

.cloche-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.cloche-badge {
  background: var(--fond-section);
  color: var(--bois-fonce);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-corps);
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  border: 1px solid var(--bordure);
}


/* ============================================================
   13. SAINTE LIBAIRE
   ============================================================ */

.sainte-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 3.5rem;
  align-items: start;
}

.sainte-portrait {
  background: var(--fond-section);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bordure);
  padding: 1.75rem;
  text-align: center;
}
.sainte-portrait img {
  border-radius: var(--radius);
  margin: 0 auto 0.9rem;
  max-height: 320px;
  object-fit: cover;
}
.sainte-portrait .titre {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bois-fonce);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.sainte-portrait .fete {
  font-size: 0.75rem;
  color: var(--texte-clair);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-corps);
}

.fiche-info {
  background: var(--bois-fonce);
  color: var(--blanc);
  padding: 1.25rem;
  border-radius: var(--radius);
  margin-top: 0.9rem;
}
.fiche-info p        { color: rgba(245, 242, 234, 0.8); font-size: 0.87rem; margin: 0.25rem 0; }
.fiche-info strong   { color: var(--dore); }


/* ============================================================
   14. CURÉS
   ============================================================ */

.cures-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.9rem;
}

.cure-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--blanc);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--fond-section-alt);
  transition: border-left-color 0.2s;
}
.cure-item:hover { border-left-color: var(--dore); }

.cure-years {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--dore);
  font-size: 0.82rem;
  min-width: 85px;
  line-height: 1.4;
}
.cure-name { font-weight: 700; color: var(--bois-fonce); font-size: 0.92rem; }
.cure-note { font-size: 0.78rem; color: var(--texte-clair); margin-top: 0.15rem; }


/* ============================================================
   15. GALERIE
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* Force une hauteur de base pour chaque "étage" */
  gap: 0.9rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
  cursor: pointer;
}

/* On force l'image à prendre 100% de la hauteur du parent */
.gallery-item img {
  width: 100%;
  height: 100%; 
  object-fit: cover; /* Recadre proprement pour remplir le cadre */
  transition: transform 0.35s;
}

.gallery-item--tall {
  grid-row: span 2; /* Prend 2 étages, soit 400px + le gap */
}
.gallery-item:hover img { transform: scale(1.04); }

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(30, 58, 95, 0.82));
  color: var(--fond-principal);
  padding: 1.25rem 0.9rem 0.65rem;
  font-size: 0.82rem;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

.gallery-item--tall {
  grid-row: span 2;
  height: 100%; /* S'assure que le container prend toute la place */
}

.gallery-item--tall img {
  aspect-ratio: auto; /* Annule le 3/2 */
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   16. ACCORDÉON
   ============================================================ */

.accordion {
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
  overflow: hidden;
}

.accordion-item { border-bottom: 1px solid var(--bordure); }
.accordion-item:last-child { border-bottom: none; }

.accordion-btn {
  width: 100%;
  background: var(--blanc);
  border: none;
  text-align: left;
  padding: 1rem 1.25rem;
  font-family: var(--font-titre);
  font-size: 0.98rem;
  color: var(--bois-fonce);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.accordion-btn:hover      { background: var(--fond-section); }
.accordion-btn.open       { background: var(--bois-fonce); color: var(--dore); }

.accordion-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.accordion-btn.open .accordion-icon { transform: rotate(45deg); }

.accordion-body      { display: none; padding: 1.1rem 1.25rem; background: var(--fond-section); font-size: 0.92rem; }
.accordion-body.open { display: block; }


/* ============================================================
   17. ONGLETS (TABS)
   ============================================================ */

.tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.tab-btn {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  color: var(--texte-clair);
  padding: 0.45rem 1.1rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-corps);
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover  { background: var(--fond-section); color: var(--bois); }
.tab-btn.active { background: var(--bois-fonce); border-color: var(--bois-fonce); color: var(--dore); }

.tab-panel        { display: none; }
.tab-panel.active { display: block; }


/* ============================================================
   18. COMPOSANTS DIVERS
   ============================================================ */

/* Badge Inscription */
.badge-ins {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--dore);
  color: var(--bois-fonce);
  padding: 0.35rem 0.9rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-corps);
  letter-spacing: 0.05em;
}

/* Infobox */
.infobox {
  background: var(--fond-section);
  border-left: 4px solid var(--vitrail);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
}
.infobox.dore { background: #FBF7EC; border-left-color: var(--dore); }
.infobox h4   { font-size: 0.88rem; color: var(--bois-fonce); margin-bottom: 0.4rem; }

/* Highlight box */
.highlight-box {
  background: var(--bois-fonce);
  color: var(--fond-principal);
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid var(--dore);
}
.highlight-box h3 { color: var(--dore); margin-bottom: 0.6rem; }
.highlight-box p  { color: rgba(245, 242, 234, 0.8); max-width: 580px; margin: 0 auto; }

/* Photo placeholder */
.photo-placeholder {
  background: var(--fond-section);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--texte-clair);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
  padding: 1rem;
  border: 1px dashed var(--bordure);
  border-radius: var(--radius);
}
.photo-placeholder .ph-icon { font-size: 2.2rem; opacity: 0.35; }


/* ============================================================
   19. LIGHTBOX
   ============================================================ */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(245, 242, 234, 0.15);
  border: none;
  color: var(--fond-principal);
  font-size: 1.4rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-caption {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: var(--fond-principal);
  padding: 0.45rem 1.1rem;
  border-radius: 2rem;
  font-size: 0.87rem;
  white-space: nowrap;
}


/* ============================================================
   20. PIED DE PAGE (FOOTER)
   ============================================================ */

footer {
  background: var(--bois-fonce);
  color: rgba(245, 242, 234, 0.65);
  padding: 3rem 1.25rem 1.75rem;
  border-top: 2px solid var(--dore);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}

footer h4 {
  color: var(--dore);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-corps);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

footer p,
footer li    { font-size: 0.85rem; color: rgba(245, 242, 234, 0.6); line-height: 1.65; }
footer ul    { list-style: none; }
footer ul li { margin-bottom: 0.35rem; }
footer ul a  { color: rgba(245, 242, 234, 0.6); text-decoration: none; transition: color 0.2s; }
footer ul a:hover { color: var(--dore); text-decoration: none; }

.footer-bottom {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(245, 242, 234, 0.1);
  text-align: center;
  font-size: 0.78rem;
  color: rgba(245, 242, 234, 0.3);
}


/* ============================================================
   21. UTILITAIRES
   ============================================================ */

.text-center { text-align: center; }
.text-dore   { color: var(--dore); }
.text-bois   { color: var(--bois); }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-2 { margin-top:    2rem; }

/* Boutons */
.btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary { 
  background: var(--dore) !important; 
  color: #f5f2ea !important; /* Retrait du var() ici */
  border-color: var(--dore) !important;
  transition: all 0.3s ease; /* Pour que l'effet de survol soit fluide */
}

.btn-primary:hover {
  background: var(--dore-clair) !important;
  color: #f5f2ea !important; /* Retrait du var() ici */
  text-decoration: none;
  transform: translateY(-2px); /* Un peu plus marqué pour l'effet visuel */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Petit bonus pour la profondeur */
}

.btn-outline { background: transparent; color: var(--fond-principal); border: 1.5px solid rgba(245, 242, 234, 0.45); }
.btn-outline:hover {
  border-color: var(--dore);
  color: var(--dore);
  text-decoration: none;
}


/* ============================================================
   22. RESPONSIVE
   ============================================================ */

/* — Tablette (≤ 900 px) — */
@media (max-width: 900px) {
  .vitrail-grid  { grid-template-columns: repeat(3, 1fr); }
  .sainte-layout { grid-template-columns: 1fr; gap: 2rem; }
  .footer-inner  { grid-template-columns: 1fr 1fr; }
}

/* — Mobile large (≤ 700 px) — */
@media (max-width: 700px) {
  /* Menu hamburger */
  .nav-toggle  { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bois-fonce);
    border-bottom: 2px solid var(--dore);
    padding: 0.75rem 1rem 1rem;
    gap: 0.25rem;
  }
  .nav-links.open { display: flex; }

  .vitrail-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero         { height: clamp(300px, 70vw, 420px); }
}

/* — Mobile (≤ 600 px) — */
@media (max-width: 600px) {
  .choeur-img-wrap-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .section  { padding: 3rem 1rem; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.05rem; }
  p  { font-size: 0.93rem; }

  .container,
  .container-narrow { padding: 0 0.75rem; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; gap: 1.25rem; }

  .card-body    { padding: 1rem; }
  .orgue-specs  { grid-template-columns: repeat(2, 1fr); }

  .hero-content  { padding: 1.25rem 1rem; }
  .hero-subtitle { font-size: 0.9rem; }

  footer { padding: 2.25rem 1rem 1.5rem; text-align: center; }

  /* Légende galerie toujours visible sur mobile */
  .gallery-caption {
    transform: translateY(0);
    font-size: 0.78rem;
    padding: 0.9rem 0.7rem 0.5rem;
  }
  
  .gallery {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-item img {
  aspect-ratio: 4 / 3;
}

  .btn { width: 100%; text-align: center; padding: 0.8rem; }

  .lightbox img     { max-width: 95vw; max-height: 80vh; }
  .lightbox-caption { font-size: 0.78rem; bottom: 0.9rem; white-space: normal; text-align: center; max-width: 85vw; }
}

/* — Très petit mobile (≤ 500 px) — */
@media (max-width: 500px) {
  /* Vitraux : défilement horizontal pour préserver les cartes */
  .vitrail-grid {
    display: flex;
    overflow-x: auto;
    gap: 0.65rem;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--dore) var(--fond-section);
  }
  .vitrail-card { min-width: 140px; flex: 0 0 auto; }
}

/* ============================================================
   PATCH GLOBAL — À INTÉGRER À LA FIN DE style.css
   Corrections : texte blanc sur fonds colorés, badges, 
   boutons, lightbox universelle, versets bibliques
   ============================================================ */

/* ── 1. Texte toujours blanc sur fond coloré ── */

/* Badges dorés : texte toujours sombre (lisible sur doré) */
.badge-ins {
  color: var(--bois-fonce) !important;
}

/* Boutons primaires : toujours blanc sur doré */
.btn-primary,
.btn-primary:visited,
.btn-primary:hover {
  color: #ffffff !important;
  background: var(--dore) !important;
}
.btn-primary:hover {
  background: #b8944f !important;
}

/* Onglets actifs : toujours doré sur fond sombre */
.tab-btn.active {
  background: var(--bois-fonce) !important;
  border-color: var(--bois-fonce) !important;
  color: var(--dore) !important;
}
.tab-btn.active:hover {
  color: var(--dore-clair) !important;
}

/* Badges cloche : si fond bleu → texte blanc */
.cloche-badge[style*="background:var(--bleu)"],
.cloche-badge[style*="background: var(--bleu)"] {
  color: #ffffff !important;
}

/* Infobox gold : texte sombre pour rester lisible */
.infobox.gold,
.infobox.dore {
  background: #FBF7EC;
  border-left-color: var(--dore);
}
.infobox.gold h4,
.infobox.dore h4 {
  color: var(--bois-fonce) !important;
}
.infobox.gold p,
.infobox.dore p {
  color: var(--texte-doux) !important;
}

/* Highlight-box : toujours blanc sur fond sombre */
.highlight-box p,
.highlight-box h3 {
  color: rgba(245, 242, 234, 0.9) !important;
}
.highlight-box h3 {
  color: var(--dore) !important;
}

/* Section dark : tout en blanc/doré */
.section-dark .card-tag {
  color: var(--dore-clair) !important;
}

/* Badge cure avec highlight doré */
.cure-item[style*="border-left-color:var(--dore)"] .cure-name {
  color: var(--bois-fonce) !important;
}

/* ── 2. Lightbox universelle — s'active sur tout img cliquable ── */

/* Toutes les images dans des wrappers cliquables (gallery-item) */
.gallery-item,
.historic-photo-card .historic-photo-frame,
.card img,
.choeur-img-wrap img {
  cursor: pointer;
}

/* Légère transition au survol pour signaler la cliquabilité */
.card img:hover,
.choeur-img-wrap img:hover {
  filter: brightness(1.06);
  transition: filter 0.25s;
}

/* ── 3. Verset biblique (si pas déjà dans les pages) ── */
.verset {
  background: linear-gradient(135deg, #1E3A5F 0%, #2A5298 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.verset::before {
  content: '❝';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-size: 5rem;
  color: rgba(200,169,106,0.2);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.verset blockquote {
  background: none;
  border: none;
  color: rgba(255,255,255,0.92);
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  padding: 0;
}
.verset cite {
  display: block;
  color: var(--dore);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 4. Diocèse grid ── */
.diocese-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.diocese-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.diocese-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .diocese-grid   { grid-template-columns: repeat(2, 1fr); }
  .diocese-grid-2 { grid-template-columns: 1fr; }
  .diocese-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .diocese-grid,
  .diocese-grid-2,
  .diocese-grid-3 { grid-template-columns: 1fr; }
}

.diocese-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bordure);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diocese-card-header {
  background: var(--bois-fonce);
  color: #ffffff !important;
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-corps);
}

.diocese-card-body {
  padding: 1.1rem;
  flex: 1;
}

.diocese-card-body h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.diocese-card-body p  { font-size: 0.84rem; color: var(--texte-clair); margin: 0; }

/* ── 5. Ouverture badge (page messes) ── */
.ouverture-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-corps);
}
.ouverture-badge::before { content: '●'; font-size: 0.6rem; }

/* ── 6. Correction : jamais de texte bleu sur fond doré ── */
[style*="background:var(--dore)"] *,
[style*="background: var(--dore)"] * {
  color: var(--bois-fonce) !important;
}
.badge-ins * { color: var(--bois-fonce) !important; }

p { text-align: justify; }

@media (max-width: 768px) {
  footer, footer * {
    text-align: center !important;
  }
}