/* ============================================
   Personnalisations pour Église Saint-Martin
   Site sobre et élégant pour une église
   ============================================

   TABLE DES MATIÈRES
   ==================
   1. PALETTE DE COULEURS ........... ligne ~50
   2. VARIABLES CSS ................. ligne ~50
   3. STYLES DE BASE ................ ligne ~108
   4. EN-TÊTE DU SITE ............... ligne ~165
   5. ANNOUNCEMENT BANNER ........... ligne ~245
   6. HERO SECTION .................. ligne ~265
   7. SECTIONS DE CONTENU ........... ligne ~295
   8. GRILLES (grid-portrait) ....... ligne ~335
   9. CARTES D'ÉVÉNEMENTS ........... ligne ~405
   10. MISE EN AVANT (highlight) .... ligne ~430
   11. FOOTER ....................... ligne ~455
   12. FORMULAIRE DE CONTACT ........ ligne ~545
   13. NAVIGATION RESPONSIVE ........ ligne ~565
   14. GALERIES PHOTOS .............. ligne ~640
   15. TIMELINE DES TRAVAUX ......... ligne ~690
   16. TEXTE INTRO (lead) ........... ligne ~730
   17. LIENS DE NAVIGATION .......... ligne ~740
   18. BOUTONS CTA .................. ligne ~780
   19. BADGES ....................... ligne ~810
   20. GALLERY HERO ................. ligne ~835
   21. GALLERY MASONRY .............. ligne ~920
   22. LIGHTBOX ..................... ligne ~965
   23. GALLERY COLLECTION ........... ligne ~1055
   24. GALLERY LIVRES ............... ligne ~1135
   25. IMAGES CONTENU ............... ligne ~1175
   26. RWD-FITGRID .................. ligne ~1190
   27. LETTER STYLING ............... ligne ~1255

   ============================================ */

/* ============================================
   PALETTE DE COULEURS - Inspirée du vitrail et du clocher
   ============================================

   Couleurs du clocher SVG :
   - #2b1f17 - Brun foncé (contours, détails)
   - #c79a78 - Beige/tan (façade claire)
   - #94775d - Brun moyen (ombres)

   Couleurs du vitrail :
   - #1e3a5f - Bleu cobalt (primaire)
   - #8b1a1a - Rouge bordeaux (accent)
   - #2d6b4f - Vert émeraude (succès)
   - #c9a227 - Or/jaune (highlight)

   ============================================
   COLOR CONTRAST PALETTE (Palette de contraste)
   ============================================

   Référence rapide : quelle couleur utiliser sur quel fond ?

   SUR FOND BLEU (#1e3a5f / #2d4a6f) :
   ├── Texte principal : #ffffff (blanc)
   ├── Texte secondaire : #e8e4df (gris très clair)
   ├── Liens : #f5ebe0 (beige clair)
   ├── Liens hover : #ffffff (blanc)
   └── Sous-titres : #c79a78 (beige/tan)

   SUR FOND CLAIR (#faf8f6 / #ffffff) :
   ├── Texte principal : #2b1f17 (brun foncé)
   ├── Texte secondaire : #5c4a3d (brun moyen-foncé)
   ├── Titres h1/h2 : #2b1f17 (brun foncé)
   ├── Titres h3 : #1e3a5f (bleu cobalt)
   ├── Liens : #1e3a5f (bleu cobalt)
   └── Liens hover : #152a45 (bleu foncé)

   ACCENTS / BORDURES :
   ├── Bordure accent : #94775d (brun moyen)
   ├── Bordure primaire : #1e3a5f (bleu cobalt)
   └── Fond highlight : #faf5f0 (crème)

   ============================================ */

/* Variables de couleurs - thème église */
:root,
:root:not([data-theme="dark"]),
[data-theme="light"] {
  /* Couleur primaire - Bleu cobalt du vitrail */
  --pico-primary: #1e3a5f;
  --pico-primary-background: #1e3a5f;
  --pico-primary-border: #1e3a5f;
  --pico-primary-underline: rgba(30, 58, 95, 0.5);
  --pico-primary-hover: #152a45;
  --pico-primary-hover-background: #152a45;
  --pico-primary-hover-border: #152a45;
  --pico-primary-hover-underline: #152a45;
  --pico-primary-focus: rgba(30, 58, 95, 0.25);
  --pico-primary-inverse: #ffffff;

  /* Couleurs du clocher (brun) */
  --clocher-brun-fonce: #2b1f17;
  --clocher-beige: #c79a78;
  --clocher-brun-moyen: #94775d;

  /* Couleurs du vitrail */
  --vitrail-bleu: #1e3a5f;
  --vitrail-rouge: #8b1a1a;
  --vitrail-vert: #2d6b4f;
  --vitrail-or: #c9a227;

  /* Arrière-plans - léger ton chaud */
  --pico-background-color: #faf8f6;
  --pico-card-background-color: #ffffff;

  /* Texte - brun foncé pour meilleur contraste */
  --pico-color: #2b1f17;
  --pico-muted-color: #5c4a3d;

  /* Titres - brun foncé, bien visible */
  --pico-h1-color: #2b1f17;
  --pico-h2-color: #2b1f17;
  --pico-h3-color: #3d2e24;
  --pico-h4-color: #4a3a2f;
  --pico-h5-color: #5c4a3d;
  --pico-h6-color: #5c4a3d;

  /* Bordures - ton chaud */
  --pico-muted-border-color: #ddd5cc;

  /* Formulaires - fond blanc et texte foncé pour bon contraste */
  --pico-form-element-background-color: #ffffff;
  --pico-form-element-active-background-color: #ffffff;
  --pico-form-element-focus-color: #ffffff;
  --pico-form-element-disabled-background-color: #f5f5f5;
  --pico-form-element-color: #2b1f17;
  --pico-form-element-placeholder-color: #94775d;
  --pico-form-element-invalid-active-border-color: #8b1a1a;
  --pico-form-element-valid-active-border-color: #2d6b4f;
  --pico-form-element-active-border-color: #1e3a5f;
  --pico-switch-checked-background-color: #1e3a5f;
}

/* Forcer les liens en bleu cobalt partout */
a {
  color: #1e3a5f;
}

a:hover {
  color: #152a45;
}

/* Titres - assurer le brun foncé */
h1, h2, h3, h4, h5, h6 {
  color: var(--clocher-brun-fonce);
}

/* Boutons - bleu cobalt */
button,
[type="submit"],
[type="button"],
[role="button"] {
  --pico-background-color: #1e3a5f;
  --pico-border-color: #1e3a5f;
  --pico-color: #ffffff;
}

button:hover,
[type="submit"]:hover,
[type="button"]:hover,
[role="button"]:hover {
  --pico-background-color: #152a45;
  --pico-border-color: #152a45;
}

/* Bouton secondaire (outline) avec brun */
button.secondary,
[role="button"].secondary {
  --pico-background-color: transparent;
  --pico-border-color: var(--clocher-brun-moyen);
  --pico-color: var(--clocher-brun-fonce);
}

button.secondary:hover,
[role="button"].secondary:hover {
  --pico-background-color: var(--clocher-brun-fonce);
  --pico-border-color: var(--clocher-brun-fonce);
  --pico-color: #ffffff;
}

/* Focus des champs de formulaire */
input:focus,
select:focus,
textarea:focus {
  --pico-border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.2);
}

/* ============================================
   EN-TÊTE DU SITE
   ============================================ */

header.site-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
  color: white;
  padding: 0.5rem 0; /* Padding réduit pour banner plus fin */
  margin-bottom: 1rem;
  position: relative;
  z-index: 10;
  overflow: visible; /* Permet au logo de dépasser */
}

header.site-header a {
  color: white;
  text-decoration: none;
}

header.site-header a:hover {
  color: var(--clocher-beige);
}

header.site-header nav ul {
  margin: 0;
  padding: 0;
}

/* Logo dans le header - GRAND, couleurs originales */
.logo-link {
  display: flex;
  align-items: center; /* Texte centré verticalement par rapport au logo */
  gap: 1.25rem;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

/* Supprimer le padding du li contenant le logo */
header.site-header nav ul li:has(.logo-link) {
  padding-top: 0;
  padding-bottom: 0;
}

.logo-img {
  height: 175px;
  width: auto;
  transition: transform 0.3s ease;
  transform-origin: bottom center; /* Le zoom part du bas, le bas reste fixe */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

/* Inline SVG fill colors - default: white church, brun-moyen hill */
.logo-img #church {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.logo-img #church .hill {
  fill: var(--clocher-brun-moyen);
  transition: fill 0.3s ease;
}

.logo-link:hover .logo-img {
  transform: scale(1.03);
}

/* On hover: entire logo becomes brun-moyen */
.logo-link:hover .logo-img #church,
.logo-link:hover .logo-img #church .hill {
  fill: var(--clocher-brun-moyen);
}

/* Title SVG in header - inline for CSS control */
.logo-title {
  height: 100px;
  width: auto;
  align-self: center;
  pointer-events: none; /* Allow clicks to pass through to parent link */
}

/* Title SVG fill colors - default: white for top 2 lines, brun-moyen for Villar d'Arène */
.logo-title .title-top {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.logo-title .title-bottom {
  fill: var(--clocher-brun-moyen);
  transition: fill 0.3s ease;
}

/* On hover: entire title becomes brun-moyen */
.logo-link:hover .logo-title .title-top,
.logo-link:hover .logo-title .title-bottom {
  fill: var(--clocher-brun-moyen);
}

/* Screen reader only - hidden visually but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Navigation active */
.nav-menu a.active {
  border-bottom: 2px solid var(--clocher-beige);
  padding-bottom: 0.25rem;
}

/* ============================================
   ANNOUNCEMENT BANNER - Bannière d'annonce
   ============================================ */

.announcement-banner {
  background: linear-gradient(135deg, #c9a227 0%, #e8c547 50%, #c9a227 100%);
  color: #2b1f17;
  text-align: center;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 0.5rem;
  margin: -1rem -1rem 1rem -1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

/* ============================================
   HERO SECTION - Page d'accueil
   ============================================ */

.hero {
  background: linear-gradient(rgba(30, 58, 95, 0.55), rgba(30, 58, 95, 0.65)),
              url('../images/site/vitrail.jpg') center/cover;
  color: white;
  padding: 4rem 2rem;
  text-align: center;
  margin: 0 -1rem 2rem -1rem;
  border-radius: 1rem;
}

.hero h1 {
  color: white;
  font-size: 2.2rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* TEXTE HERO BIEN VISIBLE - beige clair sur fond bleu */
.hero p {
  color: #f5ebe0;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   SECTIONS DE CONTENU
   ============================================ */

.content-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.content-section:last-child {
  border-bottom: none;
}

/* Titres de section avec accent brun */
.content-section h2 {
  color: var(--clocher-brun-fonce);
  border-left: 4px solid var(--clocher-brun-moyen);
  padding-left: 1rem;
  margin-left: -0.75rem;
}

.content-section h3 {
  color: var(--vitrail-bleu);
}

/* Images dans les grilles de contenu - style par défaut */
.content-section .grid img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

.content-section .grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.15);
}

/* Grille avec image portrait - image prend moins de largeur, plus de hauteur */
.grid-portrait {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 2rem;
  align-items: center;
}

.grid-portrait.reverse {
  grid-template-columns: 200px 1fr;
}

.grid-portrait img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

.grid-portrait img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.15);
}

/* Variante auto - l'image utilise sa taille naturelle */
.grid-portrait.auto {
  grid-template-columns: 1fr auto;
  align-items: start; /* Texte aligne en haut */
}

.grid-portrait.auto.reverse {
  grid-template-columns: auto 1fr;
}

.grid-portrait.auto img {
  width: auto;
  max-width: 100%;
  max-height: 500px;
}

/* Variante pour aligner le titre avec le haut de l'image */
.grid-portrait.auto h2:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .grid-portrait,
  .grid-portrait.reverse,
  .grid-portrait.auto {
    grid-template-columns: 1fr;
  }

  .grid-portrait img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }

  .grid-portrait.auto img {
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }
}

/* ============================================
   CARTES D'ÉVÉNEMENTS
   ============================================ */

.event-card {
  background: var(--pico-card-background-color);
  border-left: 4px solid var(--clocher-brun-moyen);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.08);
}

.event-card h4 {
  margin: 0 0 0.5rem 0;
  color: var(--vitrail-bleu);
}

.event-card p {
  margin: 0;
  color: var(--pico-muted-color);
}

/* ============================================
   MISE EN AVANT - Prix, actualités importantes
   ============================================ */

.highlight-box {
  background: linear-gradient(135deg, #faf5f0 0%, #fff 100%);
  border: 2px solid var(--clocher-brun-moyen);
  border-left-width: 6px;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(43, 31, 23, 0.08);
}

.highlight-box h2,
.highlight-box h3 {
  color: var(--clocher-brun-fonce);
  margin-top: 0;
}

.highlight-box p {
  color: var(--clocher-brun-fonce);
}

/* ============================================
   FOOTER
   ============================================ */

footer.site-footer {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
  color: #ffffff;
  padding: 2rem 0;
  margin-top: 1rem;
}

footer.site-footer a {
  color: #f5ebe0; /* Beige clair - bon contraste sur bleu */
  text-decoration: underline;
  text-decoration-color: rgba(245, 235, 224, 0.4);
}

footer.site-footer a:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

footer.site-footer h4 {
  color: #ffffff;
  margin-bottom: 1rem;
}

footer.site-footer p,
footer.site-footer li {
  color: #e8e4df; /* Gris très clair - lisible sur bleu */
}

footer.site-footer ul,
footer.site-footer ul li {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

/* Bouton CTA sur fond sombre (footer) - utilise l'or du vitrail */
footer.site-footer .cta-button {
  background: #c9a227; /* Or/jaune du vitrail */
  color: #ffffff !important; /* Blanc pour contraste */
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
  text-decoration: none;
}

/* Centrer toutes les colonnes du footer */
footer.site-footer .footer-content > div {
  text-align: center;
}

footer.site-footer .cta-button:hover {
  background: #d4af37; /* Or plus clair au hover */
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.8;
}

.footer-bottom p {
  margin-bottom: 0;
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.footer-badge {
  height: 60px;
  width: auto;
  border-radius: 0.25rem;
}

/* ============================================
   FORMULAIRE DE CONTACT
   ============================================ */

.contact-form {
  max-width: 600px;
}

.contact-info {
  background: var(--pico-card-background-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--clocher-brun-moyen);
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.08);
}

.contact-info h3 {
  margin-top: 0;
  color: var(--clocher-brun-fonce);
}

/* ============================================
   NAVIGATION RESPONSIVE
   ============================================ */

/* Tablette - header stacks vertically */
@media (max-width: 1024px) {
  header.site-header nav {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .logo-link {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .logo-img {
    height: 220px;
  }

  .logo-title {
    height: 90px;
  }

  /* Nav items s'adaptent */
  header.site-header nav ul.nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  header.site-header {
    margin-bottom: 1rem;
  }

  header.site-header nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    margin-left: 0;
    margin-right: 0;
  }

  .announcement-banner {
    border-radius: 0.5rem;
    margin-left: 0;
    margin-right: 0;
  }

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

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

  .footer-content {
    text-align: center;
  }
}

/* ============================================
   GALERIE PHOTOS
   ============================================ */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

.gallery img {
  width: auto;
  height: auto;
  max-height: 300px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

.gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.15);
}

/* Galerie avec légendes */
.gallery figure {
  margin: 0;
}

.gallery figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-top: 0.5rem;
  font-style: italic;
}

/* Galerie dépliant - taille lisible sans cliquer */
.gallery-depliant img {
  max-height: none;
  max-width: 100%;
}

/* Galerie grande (images plus hautes) */
.gallery-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.gallery-large img {
  height: 220px;
}

/* ============================================
   TIMELINE DES TRAVAUX
   ============================================ */

.timeline-item {
  background: var(--pico-card-background-color);
  border-left: 4px solid var(--vitrail-bleu);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.08);
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 1.5rem;
  width: 16px;
  height: 16px;
  background: var(--vitrail-bleu);
  border-radius: 50%;
  border: 3px solid var(--pico-background-color);
}

.timeline-item h3 {
  margin-top: 0;
  color: var(--vitrail-bleu);
}

.timeline-item ul {
  margin-bottom: 0.5rem;
}

.timeline-item > p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

/* ============================================
   TEXTE INTRO (LEAD)
   ============================================ */

.lead {
  font-size: 1.15rem;
  color: var(--pico-muted-color);
  margin-bottom: 2rem;
}

/* ============================================
   LIENS DE NAVIGATION SECONDAIRE
   ============================================ */

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  list-style: none;
  list-style-type: none;
  margin: 0;
}

.nav-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--clocher-brun-fonce);
  transition: all 0.2s;
}

.nav-links a:hover {
  background: var(--vitrail-bleu);
  border-color: var(--vitrail-bleu);
  color: white;
}

/* ============================================
   BOUTON D'APPEL À L'ACTION
   ============================================ */

.cta-button {
  display: inline-block;
  background: var(--vitrail-bleu);
  color: white !important;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
}

.cta-button:hover {
  background: var(--pico-primary-hover);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
  transform: translateY(-1px);
}

/* Bouton secondaire avec brun */
.cta-button.secondary {
  background: var(--clocher-brun-moyen);
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.2);
}

.cta-button.secondary:hover {
  background: var(--clocher-brun-fonce);
}

.cta-button + .cta-button {
  margin-left: 1rem;
}

@media (max-width: 768px) {
  .highlight-box .cta-button {
    display: block;
    text-align: center;
  }

  .cta-button + .cta-button {
    margin-left: 0;
    margin-top: 0.75rem;
  }
}

/* ============================================
   BADGES ET ACCENTS
   ============================================ */

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 1rem;
}

.badge-primary {
  background: var(--vitrail-bleu);
  color: white;
}

.badge-accent {
  background: var(--vitrail-or);
  color: var(--clocher-brun-fonce);
}

.badge-success {
  background: var(--vitrail-vert);
  color: white;
}

/* ============================================
   GALERIE HERO - Image et texte cote a cote
   ============================================ */

.gallery-hero-section {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.gallery-hero-image {
  margin: 0;
}

.gallery-hero-image img {
  max-height: 450px;
  width: auto;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(43, 31, 23, 0.15);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-hero-image img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(43, 31, 23, 0.2);
}

.gallery-hero-text {
  padding: 1rem 0;
}

.gallery-hero-text h1 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.gallery-hero-text .lead {
  margin-bottom: 1rem;
}

.gallery-hero-caption {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  font-style: italic;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

@media (max-width: 900px) {
  .gallery-hero-section {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* Sur mobile: image en premier, puis texte */
  .gallery-hero-image {
    order: 1;
  }

  .gallery-hero-text {
    order: 2;
  }

  .gallery-hero-image img {
    max-height: 350px;
    max-width: 100%;
  }

  /* Caption plus discrete sur mobile */
  .gallery-hero-caption {
    margin-top: 1rem;
  }
}

/* ============================================
   GALERIE MASONRY - Images sans recadrage
   ============================================ */

.gallery-masonry {
  column-count: 4;
  column-gap: 1rem;
  margin: 2rem 0;
}

.gallery-masonry figure {
  break-inside: avoid;
  margin: 0 0 1rem 0;
}

.gallery-masonry img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

.gallery-masonry img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.15);
}

.gallery-masonry figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-top: 0.5rem;
  font-style: italic;
}

@media (max-width: 1200px) {
  .gallery-masonry { column-count: 3; }
}

@media (max-width: 768px) {
  .gallery-masonry { column-count: 2; }
}

@media (max-width: 480px) {
  .gallery-masonry { column-count: 1; }
}

/* ============================================
   LIGHTBOX - Affichage plein ecran
   ============================================ */

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: white;
  font-size: 2.5rem;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  line-height: 1;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  border-radius: 0.5rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 0.9rem;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
}

/* ============================================
   GALERIE COLLECTION - Marques-pages et posters
   Format portrait, images complètes sans recadrage
   ============================================ */

.gallery-bookmarks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-bookmarks figure {
  margin: 0;
  text-align: center;
}

.gallery-bookmarks img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.15);
  background: #f5f5f5;
}

.gallery-bookmarks img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.25);
}

.gallery-bookmarks figcaption {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin-top: 0.5rem;
}

/* Galerie posters - taille naturelle, centré */
.gallery-posters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin: 2rem 0;
}

.gallery-posters figure {
  margin: 0;
  text-align: center;
}

.gallery-posters img {
  width: auto;
  height: auto;
  max-height: 400px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.15);
}

.gallery-posters img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(43, 31, 23, 0.25);
}

.gallery-posters figcaption {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-top: 0.5rem;
}

/* ============================================
   GALERIE LIVRES - Couvertures de livres
   ============================================ */

.gallery-books {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}

.gallery-books figure {
  margin: 0;
}

.gallery-books img {
  width: auto;
  height: auto;
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

.gallery-books img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(43, 31, 23, 0.2);
}

/* Variante single - livre unique, plus grand */
.gallery-books.single img {
  max-height: 280px;
}

/* ============================================
   IMAGES DANS LE CONTENU - Styles generaux
   ============================================ */

/* Images autonomes (pas dans une grille) */
main img {
  cursor: pointer;
}

/* Empêcher le recadrage sur les images de livres/art */
.content-section .grid .gallery-books img,
.content-section .gallery-books img {
  height: auto;
  max-height: 250px;
  object-fit: contain;
}

/* ============================================
   RWD-FITGRID - Layout responsive avec image laterale
   Utilise fitgrid mais avec gap augmente pour les
   images a gauche. Mobile-compatible.

   Breakpoints utilises dans ce site:
   - 480px  : Tres petit mobile (masonry 1 col)
   - 768px  : Mobile/tablette (grilles empilees)
   - 900px  : Tablette (gallery-hero empile)
   - 1200px : Petit desktop (masonry 3 cols)
   ============================================ */

.rwd-fitgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  /* align-items non defini - chaque element peut utiliser align-self */
}

/* Le texte commence en haut */
.rwd-fitgrid > div:not(:has(img)) {
  align-self: start;
}

/* Variante avec titre a cote de l'image */
.rwd-fitgrid.with-title {
  align-items: start;
}

.rwd-fitgrid.with-title h2 {
  margin-top: 0;
}

.rwd-fitgrid img {
  width: auto;
  max-width: 100%;
  max-height: 700px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
  /* Espacement egal haut/bas automatique via align-self */
  align-self: center;
}

/* Pour les images tres hautes, on les aligne en haut */
.rwd-fitgrid.align-top img {
  align-self: start;
}

@media (max-width: 768px) {
  .rwd-fitgrid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .rwd-fitgrid img {
    max-width: 250px;
    margin: 0 auto;
    order: -1; /* Image en premier sur mobile */
    display: block;
  }

  /* Retablir l'alignement du texte */
  .rwd-fitgrid > div:not(:has(img)) {
    text-align: left;
  }
}

/* ============================================
   PROGRAMME LAYOUT - Image flottante en L
   Image à droite, contenu s'enroule autour
   ============================================ */

/* Grille programme : événements à gauche, affiche à droite centrée */
.programme-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.programme-layout .event-card:last-child {
  margin-bottom: 0;
}

.programme-aside-img {
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.1);
}

/* Grille 2x2 pour les événements restants */
.event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.event-grid .event-card {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .programme-layout {
    grid-template-columns: 1fr;
  }

  .programme-aside-img {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }

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

/* ============================================
   LETTER STYLING (Lettres officielles)
   ============================================ */

.letter {
  background-color: #fdfcfa;
  border: 1px solid var(--clocher-brun-moyen);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(43, 31, 23, 0.08);
}

.letter p {
  margin-bottom: 1rem;
  text-align: justify;
}

.letter-greeting {
  font-size: 1.1rem;
  margin-bottom: 1.5rem !important;
}

.letter-closing {
  margin-top: 1.5rem !important;
  font-style: italic;
}

.letter-signature {
  margin-top: 1.5rem !important;
  text-align: right !important;
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .letter {
    padding: 1rem 1.25rem;
  }
}