/* ============================================================
   STYLE PARTAGÉ — toutes les galeries thématiques
   ============================================================ */
:root {
  --encre:#1c1a14; --terre:#6b5c45; --mousse:#5a6e4a;
  --lin:#f2ead8; --parchemin:#faf6ee; --or:#b8903a;
  --ombre:rgba(28,26,20,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--parchemin); color:var(--encre); font-family:'EB Garamond',Georgia,serif; font-size:18px; line-height:1.75; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }

/* ── NAVIGATION ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:1.1rem 3rem; background:rgba(250,246,238,0.93); backdrop-filter:blur(8px); border-bottom:1px solid rgba(107,92,69,0.15); }
.nav-retour { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--terre); text-decoration:none; transition:color 0.2s; }
.nav-retour:hover { color:var(--mousse); }
.nav-titre { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--or); }

/* ── EN-TÊTE ── */
.entete { padding:10rem 2rem 4rem; text-align:center; position:relative; z-index:1; }
.entete-ornement { width:1px; height:60px; background:linear-gradient(to bottom,transparent,var(--or),transparent); margin:0 auto 2.5rem; }
.entete-etiquette { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--or); display:block; margin-bottom:1rem; }
.entete h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,7vw,5rem); font-weight:300; color:var(--encre); line-height:1.05; }
.entete h1 em { color:var(--mousse); font-style:italic; }
.separateur { width:50px; height:1px; background:var(--or); margin:1.5rem auto; }
.entete-sous { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-style:italic; color:var(--terre); max-width:520px; margin:0 auto 0.5rem; }
.entete-intro { font-size:1rem; color:var(--terre); opacity:0.75; max-width:480px; margin:0 auto; }
.entete-compte { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.2em; color:var(--or); margin-top:1.5rem; display:block; }

/* ── MOSAÏQUE ── */
.galerie-conteneur { max-width:1300px; margin:0 auto; padding:2rem 1.5rem 6rem; position:relative; z-index:1; }

/* Rangées (et non colonnes) : la lecture suit l'ordre des photos,
   de gauche à droite puis vers le bas. */
.mosaique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  align-items: start;
}
@media(max-width:700px) { .mosaique { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media(max-width:400px) { .mosaique { grid-template-columns: 1fr; } }

.photo-bloc {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--lin);
}
.photo-bloc img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s, filter 0.4s;
  filter: brightness(0.95);
}
.photo-bloc:hover img {
  transform: scale(1.03);
  filter: brightness(0.8);
}
.photo-legende-voile {
  position: absolute; inset:0;
  background: linear-gradient(to top, rgba(28,26,20,0.78) 0%, rgba(28,26,20,0.1) 45%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem 1rem 0.9rem;
  pointer-events: none;
}
.photo-bloc:hover .photo-legende-voile { opacity: 1; }
.photo-legende-texte {
  font-family:'Cormorant Garamond',serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--lin);
  line-height: 1.3;
}
.photo-legende-indice {
  font-family:'Cinzel',serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242,234,216,0.6);
  margin-top: 0.3rem;
  line-height: 1.7;
}
.photo-bloc.avec-desc { cursor: pointer; }
/* La légende et « Lire l'histoire » doivent recevoir les clics malgré le pointer-events:none du voile */
.photo-bloc.avec-desc .photo-legende-texte,
.lire-histoire { pointer-events: auto; cursor: pointer; }
.photo-bloc.avec-desc .photo-legende-texte { text-decoration: underline dotted rgba(242,234,216,0.5); text-underline-offset: 3px; }
.lire-histoire { color: var(--or, #b8903a); }
.lire-histoire:hover { text-decoration: underline; }

/* Message galerie vide */
.galerie-vide {
  text-align:center; padding:5rem 2rem;
  font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-style:italic; color:var(--terre); opacity:0.6;
}

/* ── MODAL DESCRIPTION ── */
.desc-modal { display:none; position:fixed; inset:0; background:rgba(28,26,20,0.72); z-index:400; align-items:center; justify-content:center; padding:2rem; }
.desc-modal.actif { display:flex; }
.desc-modal-corps { background:var(--parchemin); max-width:580px; width:100%; padding:3rem 3.5rem; position:relative; border:1px solid rgba(184,144,58,0.3); max-height:85vh; overflow-y:auto; }
.desc-modal-titre { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; font-style:italic; color:var(--encre); margin-bottom:1rem; line-height:1.15; }
.desc-modal-sep { width:40px; height:1px; background:var(--or); margin:0 0 1.5rem; }
.desc-modal-texte { color:rgba(28,26,20,0.82); line-height:1.95; font-size:1.05rem; white-space:pre-wrap; }
.desc-modal-fermer { position:absolute; top:1rem; right:1rem; background:none; border:1px solid rgba(107,92,69,0.3); color:var(--terre); font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; cursor:pointer; padding:0.3rem 0.7rem; transition:all 0.2s; }
.desc-modal-fermer:hover { background:var(--terre); color:var(--parchemin); }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:500; align-items:center; justify-content:center; padding:2rem; }
.lightbox.actif { display:flex; }
.lightbox-corps { display:flex; align-items:center; justify-content:center; gap:0; max-width:1280px; width:100%; }
.lightbox-media { display:flex; flex-direction:column; align-items:center; gap:0.9rem; min-width:0; }
.lightbox-img { max-width:88vw; max-height:82vh; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,0.8); cursor:zoom-out; }
.lightbox-corps.avec-texte .lightbox-img { max-width:46vw; max-height:78vh; }
.lightbox-panneau { display:none; }
.lightbox-corps.avec-texte .lightbox-panneau { display:block; background:var(--parchemin); max-width:460px; width:38vw; max-height:78vh; overflow-y:auto; padding:2.6rem 2.4rem; border:1px solid rgba(184,144,58,0.3); margin-left:1.5rem; }
.lightbox-legende { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:rgba(242,234,216,0.6); text-align:center; }
.lightbox-description { color:rgba(28,26,20,0.85); font-size:1.05rem; line-height:1.95; white-space:pre-wrap; text-align:left; }
.lightbox-fermer { position:absolute; top:1.5rem; right:1.5rem; background:none; border:1px solid var(--or); color:var(--or); font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; cursor:pointer; text-transform:uppercase; padding:0.4rem 0.9rem; transition:all 0.2s; z-index:501; }
.lightbox-fermer:hover { background:var(--or); color:var(--encre); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(184,144,58,0.25); border:1px solid rgba(184,144,58,0.5); color:var(--or); font-size:1.5rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; }
.lightbox-nav:hover { background:rgba(184,144,58,0.6); }
.lightbox-prev { left:1.5rem; }
.lightbox-next { right:1.5rem; }

/* ── PIED ── */
footer { background:var(--encre); color:var(--lin); text-align:center; padding:3rem 2rem; position:relative; z-index:1; }
.footer-marque { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.2em; color:var(--or); margin-bottom:0.5rem; }
.footer-sous { font-size:0.85rem; opacity:0.4; font-style:italic; }
.footer-lien { display:inline-block; margin-top:1.2rem; font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--or); text-decoration:none; border:1px solid var(--or); padding:0.45rem 1.1rem; transition:all 0.2s; }
.footer-lien:hover { background:var(--or); color:var(--encre); }

/* ── APPARITION ── */
.apparaitre { opacity:0; transform:translateY(18px); transition:opacity 0.55s ease, transform 0.55s ease; }
.apparaitre.visible { opacity:1; transform:translateY(0); }

@media(max-width:900px) {
  .lightbox { padding:1rem; }
  .lightbox-corps { flex-direction:column; gap:0; }
  .lightbox-corps.avec-texte .lightbox-img { max-width:88vw; max-height:42vh; }
  .lightbox-corps.avec-texte .lightbox-panneau { width:100%; max-width:100%; margin:1rem 0 0; max-height:38vh; padding:1.6rem 1.4rem; }
  .lightbox-nav { top:22vh; bottom:auto; transform:none; width:40px; height:40px; }
}

@media(max-width:600px) {
  nav { padding:1rem 1.2rem; }
  .entete { padding:8rem 1.5rem 3rem; }
  .galerie-conteneur { padding:1.5rem 0.8rem 4rem; }
  .desc-modal-corps { padding:2rem 1.5rem; }
}