/* =========================================================
   Paroisse Cité d'Abraham de Djègan-Kpévi — Feuille de style
   ========================================================= */

:root{
  /* Palette — blancs et tons neutres, accents tirés de l'emblème */
  --ivory:#FAF6EF;
  --beige:#F1EAD9;
  --stone:#E4DDCE;
  --ink:#2A2620;
  --ink-soft:#665F52;
  --celeste:#2C6E8E;      /* bleu des tenues de chœur */
  --celeste-deep:#20465C;
  --gold:#C79A3E;          /* couronne / croix de l'emblème */
  --gold-soft:#E7D6A6;

  --font-display:'Poppins', sans-serif;
  --font-body:'Open Sans', sans-serif;

  --radius:14px;
  --shadow-soft:0 14px 34px -18px rgba(42,38,32,.35);
  --shadow-card:0 10px 26px -14px rgba(42,38,32,.28);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

html,body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.18;
  letter-spacing:-.01em;
}

p{ margin:0 0 1em; color:var(--ink-soft); }

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* -------------------- Reusable bits -------------------- */

.eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--celeste);
  margin:0 0 .8rem;
  position:relative;
  padding-bottom:.7rem;
}
.eyebrow::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:56px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#2B3A67,#2C6E8E,#4A8F5B,#D6A93C,#B4522F,#2C6E8E,#2B3A67);
  background-size:220% 100%;
  animation:shimmerLine 5s linear infinite;
}
@keyframes shimmerLine{
  0%{ background-position:0% 0; }
  100%{ background-position:-220% 0; }
}
.eyebrow-light{ color:#F1EAD9; }
.eyebrow-light::after{
  background:linear-gradient(90deg,#93A6E0,#7FC0DD,#8FCB9C,#E6C468,#E29B72);
}

.section-intro{
  max-width:640px;
  font-size:1.02rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.85em 1.7em;
  border-radius:100px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  position:relative;
  overflow:hidden;
  background:var(--celeste);
  color:#fff;
  box-shadow:var(--shadow-card);
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ background:var(--celeste-deep); }

.btn-outline{
  background:transparent;
  color:var(--celeste);
  border-color:var(--celeste);
}
.btn-outline:hover{ background:var(--celeste); color:#fff; }

.btn-ghost-light{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.18); }

.btn-header{
  background:var(--gold);
  color:#2A2013;
  padding:.65em 1.4em;
  font-size:.88rem;
}
.btn-header:hover{ background:#B98A2E; }

/* -------------------- Scroll progress bar -------------------- */

.scroll-progress{
  position:fixed;
  top:0; left:0;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,#2B3A67,#2C6E8E,#4A8F5B,#D6A93C,#B4522F);
  z-index:1000;
  transition:width .12s linear;
}

/* -------------------- Header -------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,246,239,.86);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--stone);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding-top:14px;
  padding-bottom:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-right:auto;
}
.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 0 0 1px var(--stone);
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.brand-mark-footer{
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.site-header .brand-mark{
  animation:logoGlow 4.5s ease-in-out infinite;
}

@keyframes logoGlow{
  0%, 100%{ box-shadow:0 0 0 1px var(--stone); }
  50%{ box-shadow:0 0 0 5px rgba(199,154,62,.32); }
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-text strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
}
.brand-text em{
  font-style:normal;
  font-size:.72rem;
  color:var(--ink-soft);
  letter-spacing:.03em;
}

.main-nav ul{
  display:flex;
  gap:1.9rem;
}
.main-nav a{
  font-family:var(--font-display);
  font-weight:500;
  font-size:.92rem;
  color:var(--ink);
  position:relative;
  padding:.2rem 0;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:2.4px;
  width:100%;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}

/* -------------------- Hero -------------------- */

.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
}

.hero-media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 22%;
  animation:heroPan 22s ease-in-out infinite alternate;
}

@keyframes heroPan{
  0%{ transform:scale(1.02) translateY(0); }
  100%{ transform:scale(1.09) translateY(-1.5%); }
}

.hero-veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,36,.55) 0%, rgba(20,26,36,.62) 45%, rgba(20,26,36,.86) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  padding-top:6rem;
  padding-bottom:8rem;
  max-width:760px;
}

.hero-content .eyebrow-light,
.hero-content .hero-lead,
.hero-content .hero-actions{
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .8s ease forwards;
}
.hero-content .eyebrow-light{ animation-delay:.15s; }
.hero-content .hero-lead{ animation-delay:.75s; }
.hero-content .hero-actions{ animation-delay:.95s; }

@keyframes heroFadeUp{
  to{ opacity:1; transform:translateY(0); }
}

.hero h1{
  color:#fff;
  font-weight:700;
  font-size:clamp(2.1rem, 5.4vw, 3.4rem);
  margin-bottom:.55em;
  animation:heroMarquee 3s ease-in-out infinite;
}

.hero-line{
  display:inline-block;
}
.hero-line-2{
  color:var(--gold-soft);
}

@keyframes heroMarquee{
  0%{ opacity:0; transform:translateX(70px); }
  14%{ opacity:1; transform:translateX(0); }
  78%{ opacity:1; transform:translateX(0); }
  100%{ opacity:0; transform:translateX(-70px); }
}

.hero-lead{
  color:rgba(255,255,255,.92);
  font-size:1.08rem;
  max-width:520px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.6rem;
}

.hero-arc-divider{
  position:absolute;
  left:0; right:0; bottom:-2px;
  width:100%;
  height:70px;
  z-index:2;
}

/* Particules lumineuses flottantes */
.hero-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}
.hero-particles span{
  position:absolute;
  bottom:-10%;
  width:6px; height:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(231,214,166,.95) 0%, rgba(231,214,166,0) 70%);
  animation:particleRise linear infinite;
}
.hero-particles span:nth-child(1){ left:8%;  width:5px; height:5px; animation-duration:9s;  animation-delay:0s; }
.hero-particles span:nth-child(2){ left:22%; width:7px; height:7px; animation-duration:12s; animation-delay:1.5s; }
.hero-particles span:nth-child(3){ left:41%; width:4px; height:4px; animation-duration:8s;  animation-delay:3s; }
.hero-particles span:nth-child(4){ left:63%; width:6px; height:6px; animation-duration:11s; animation-delay:.8s; }
.hero-particles span:nth-child(5){ left:78%; width:5px; height:5px; animation-duration:10s; animation-delay:2.4s; }
.hero-particles span:nth-child(6){ left:90%; width:8px; height:8px; animation-duration:13s; animation-delay:4s; }

@keyframes particleRise{
  0%{   transform:translateY(0) translateX(0);   opacity:0; }
  10%{  opacity:.9; }
  50%{  transform:translateY(-52vh) translateX(12px); }
  90%{  opacity:.4; }
  100%{ transform:translateY(-96vh) translateX(-8px); opacity:0; }
}

/* -------------------- Verse band -------------------- */

.verse-band{
  background:var(--celeste-deep);
  color:var(--gold-soft);
  text-align:center;
  padding:2.1rem 0;
}
.verse-band p{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1rem, 2vw, 1.2rem);
  color:var(--gold-soft);
  max-width:760px;
  margin:0 auto;
}

/* -------------------- Sections -------------------- */

.section{
  padding:5.5rem 0;
}
.section-alt{
  background:var(--beige);
}

.section h2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  font-weight:700;
}

/* Mission */

.mission-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  margin-top:2.4rem;
  perspective:1000px;
}

.mission-card{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:var(--radius);
  padding:2rem 1.8rem;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
  transform-style:preserve-3d;
}
.mission-card:hover{
  transform:translateY(-6px) rotateX(4deg) rotateY(-3deg);
  box-shadow:var(--shadow-soft);
}

.mission-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--beige);
  margin-bottom:1.2rem;
  transition:transform .35s ease, background .35s ease;
}
.mission-card:hover .mission-icon{
  transform:scale(1.1) rotate(-6deg);
  background:var(--gold-soft);
}

.mission-card h3{
  font-size:1.12rem;
  margin-bottom:.5rem;
}
.mission-card p{
  font-size:.95rem;
  margin:0;
}

/* About / histoire */

.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3.2rem;
  align-items:center;
}

.about-image{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:6px solid #fff;
}
.about-image img{
  width:100%;
  height:auto;
  transition:transform .7s ease;
}
.about-image:hover img{
  transform:scale(1.06);
}

.about-points{
  margin-top:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.about-points li{
  position:relative;
  padding-left:1.6rem;
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
}
.about-points li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold);
}

.about-cta{
  margin-top:1.8rem;
}

/* Rencontres / horaires */

.schedule{
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.3rem;
}
.schedule-day-block{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease;
}
.schedule-day-block:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
}
.schedule-day-block--monthly{
  background:var(--celeste-deep);
  border-color:var(--celeste-deep);
}
.schedule-day-block--monthly .schedule-day,
.schedule-day-block--monthly .event-label{
  color:#fff;
}
.schedule-day-block--monthly .schedule-time{
  color:var(--gold-soft);
}
.schedule-day-block--monthly .schedule-events li{
  border-bottom-color:rgba(255,255,255,.15);
}

.schedule-day{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--celeste);
  margin:0 0 .9rem;
}

.monthly-badge{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--celeste-deep);
  background:var(--gold-soft);
  padding:.25em .65em;
  border-radius:100px;
}
.schedule-day-block--monthly .monthly-badge{
  color:#3a2e12;
}

.schedule-events{
  display:flex;
  flex-direction:column;
}
.schedule-events li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--stone);
}
.schedule-events li:last-child{ border-bottom:none; }

.event-label{
  color:var(--ink);
  font-weight:600;
  font-size:.94rem;
}
.schedule-time{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  color:var(--gold);
  white-space:nowrap;
  flex-shrink:0;
}

.schedule-note{
  margin-top:1.6rem;
  font-size:.88rem;
  color:var(--ink-soft);
  font-style:italic;
}

/* Galerie */

.gallery-feature{
  margin-top:1rem;
  width:100%;
  background:#EFE7D8;
  display:flex;
  justify-content:center;
}
.gallery-feature img{
  width:100%;
  max-width:1180px;
  height:auto;
  max-height:82vh;
  object-fit:contain;
}

/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.4rem;
  align-items:start;
}

.contact-list{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-bottom:1.9rem;
}
.contact-list li{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
}
.contact-list li div{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.contact-list li strong{
  font-family:var(--font-display);
  font-size:.85rem;
  color:var(--ink);
}
.contact-list a{
  color:var(--celeste);
  font-weight:600;
}
.contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--beige);
  color:var(--celeste);
  flex-shrink:0;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.8rem;
}

.social-row{
  display:flex;
  gap:.7rem;
}
.social-btn{
  width:42px; height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.social-btn:hover{
  background:var(--celeste);
  transform:translateY(-2px) rotate(-8deg) scale(1.06);
}

.contact-map{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:6px solid #fff;
}
.contact-map iframe{
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  display:block;
}

/* -------------------- Footer -------------------- */

.site-footer{
  background:var(--ink);
  color:#EDE6D9;
}

.footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  padding:2.6rem 24px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.footer-brand strong{
  display:block;
  font-family:var(--font-display);
  font-size:.98rem;
  color:#fff;
}
.footer-brand span{
  font-size:.78rem;
  color:#B9AF9C;
}

.footer-nav{
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
}
.footer-nav a{
  font-size:.88rem;
  color:#D9D1BF;
  transition:color .18s ease;
}
.footer-nav a:hover{ color:var(--gold-soft); }

.footer-social{
  display:flex;
  gap:.6rem;
}
.footer-social a{
  width:36px; height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#EDE6D9;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.footer-social a:hover{
  background:var(--gold);
  color:#231C10;
  transform:rotate(-8deg) scale(1.08);
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem;
  padding:1.1rem 24px;
  font-size:.8rem;
  color:#9A9182;
}
.footer-credit{
  color:#9A9182;
}

/* =========================================================
   Pop-up événement
   ========================================================= */

.event-popup{
  position:fixed;
  inset:0;
  z-index:1500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.event-popup.is-open{
  opacity:1;
  visibility:visible;
}
.event-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,18,24,.72);
  backdrop-filter:blur(3px);
}
.event-popup-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.55);
  padding:1.3rem 1.3rem 1.6rem;
  text-align:center;
  transform:translateY(24px) scale(.96);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease;
}
.event-popup.is-open .event-popup-card{
  transform:translateY(0) scale(1);
  opacity:1;
}

.event-popup-close{
  position:absolute;
  top:.7rem; right:.7rem;
  z-index:2;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--ivory);
  border:1px solid var(--stone);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.event-popup-close:hover{
  background:var(--celeste);
  color:#fff;
  transform:rotate(90deg);
}

.event-popup-badge{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#B4522F;
  background:#FCEAE2;
  padding:.4em 1em;
  border-radius:100px;
  margin-bottom:1rem;
}
.event-popup-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#D3502C;
  animation:eventDotPulse 1.4s ease-in-out infinite;
}
@keyframes eventDotPulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(1.4); }
}

.event-popup-card img{
  width:100%;
  border-radius:12px;
  box-shadow:var(--shadow-card);
}

.event-popup-info{
  margin-top:1.1rem;
}
.event-popup-info p{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
  margin-bottom:1rem;
}
.event-popup-info .btn{ width:100%; }

.event-countdown{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.5rem;
  margin-bottom:1.2rem;
}
.countdown-box{
  background:var(--celeste-deep);
  border-radius:10px;
  padding:.6rem .2rem .55rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.countdown-value{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
  color:var(--gold-soft);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.countdown-label{
  margin-top:.3rem;
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#C9C2B2;
}

@media (prefers-reduced-motion: reduce){
  .event-popup, .event-popup-card{ transition:none; }
  .event-popup-dot{ animation:none; }
}

@media (max-width:480px){
  .event-popup-card{ padding:1.1rem 1rem 1.4rem; }
}

/* -------------------- Floating WhatsApp -------------------- */

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px -8px rgba(37,211,102,.6);
  z-index:200;
  transition:transform .2s ease;
  animation:whatsappBounceIn .7s cubic-bezier(.34,1.56,.64,1) 1.1s backwards;
}
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  animation:pulseRing 2.6s ease-out infinite;
  z-index:-1;
}
.whatsapp-float:hover{ transform:scale(1.08); }

@keyframes whatsappBounceIn{
  0%{ transform:scale(0) translateY(30px); opacity:0; }
  70%{ transform:scale(1.12) translateY(0); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}

@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* =========================================================
   Galerie avec visionneuse (lightbox)
   ========================================================= */

.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:170px;
  grid-auto-flow:dense;
  gap:.85rem;
  margin-top:2.2rem;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  background:var(--stone);
  border:1px solid rgba(0,0,0,.04);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}
.gallery-item:hover img{ transform:scale(1.08); }

.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(20,26,36,.65) 0%, rgba(20,26,36,0) 42%);
  opacity:0;
  transition:opacity .3s ease;
}
.gallery-item:hover::after{ opacity:1; }

.gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.7rem .9rem;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  z-index:1;
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }

.gallery-zoom-icon{
  position:absolute;
  top:.6rem; right:.6rem;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--celeste-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.7);
  transition:opacity .25s ease, transform .25s ease;
  z-index:1;
}
.gallery-item:hover .gallery-zoom-icon{ opacity:1; transform:scale(1); }

/* Tailles variées façon mosaïque */
.gallery-item--wide{ grid-column:span 2; }
.gallery-item--tall{ grid-row:span 2; }
.gallery-item--big{ grid-column:span 2; grid-row:span 2; }

/* Visionneuse plein écran */
.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,18,24,.94);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  padding:5vh 4vw;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox-figure{
  max-width:1100px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:scale(.96);
  transition:transform .3s ease;
}
.lightbox.is-open .lightbox-figure{ transform:scale(1); }
.lightbox-figure img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  height:auto;
  border-radius:8px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.lightbox-caption{
  margin-top:1.1rem;
  color:#EDE6D9;
  font-family:var(--font-display);
  font-size:.95rem;
  text-align:center;
  max-width:640px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background:rgba(255,255,255,.22); }

.lightbox-close{ top:22px; right:22px; }
.lightbox-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:18px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover{ transform:translateY(-50%) scale(1.08); }

@media (max-width:860px){
  .gallery-mosaic{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:150px;
  }
  .gallery-item--big{ grid-column:span 2; grid-row:span 2; }
  .gallery-item--wide{ grid-column:span 2; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}
@media (max-width:520px){
  .gallery-mosaic{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:130px;
  }
}

/* -------------------- Reveal animation -------------------- */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

.mission-grid .reveal:nth-child(1){ transition-delay:0s; }
.mission-grid .reveal:nth-child(2){ transition-delay:.12s; }
.mission-grid .reveal:nth-child(3){ transition-delay:.24s; }

.schedule .reveal:nth-child(1){ transition-delay:0s; }
.schedule .reveal:nth-child(2){ transition-delay:.08s; }
.schedule .reveal:nth-child(3){ transition-delay:.16s; }
.schedule .reveal:nth-child(4){ transition-delay:.24s; }
.schedule .reveal:nth-child(5){ transition-delay:.32s; }
.schedule .reveal:nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover, .mission-card:hover, .social-btn:hover, .footer-social a:hover{ transform:none; }
  .hero-media{ animation:none; }
  .hero-content .eyebrow-light,
  .hero-content .hero-lead,
  .hero-content .hero-actions,
  .hero-line{ opacity:1; transform:none; animation:none; }
  .hero h1{ animation:none; opacity:1; transform:none; }
  .hero-particles{ display:none; }
  .eyebrow::after{ animation:none; background-position:0 0; }
  .whatsapp-float{ animation:none; }
  .whatsapp-float::before{ animation:none; }
  .site-header .brand-mark{ animation:none; }
  .about-image:hover img{ transform:none; }
  .btn-primary::after{ display:none; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; }
  .about-image{ max-width:420px; margin:0 auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .mission-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:70px;
    left:0; right:0;
    background:var(--ivory);
    border-bottom:1px solid var(--stone);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.is-open{ max-height:400px; }
  .main-nav ul{
    flex-direction:column;
    gap:0;
    padding:.5rem 24px 1rem;
  }
  .main-nav a{
    display:block;
    padding:.8rem 0;
    border-bottom:1px solid var(--stone);
  }
  .btn-header{ display:none; }
  .nav-toggle{ display:flex; }
}

@media (max-width:640px){
  .section{ padding:3.6rem 0; }
  .mission-grid{ grid-template-columns:1fr; }
  .schedule{ grid-template-columns:1fr; }
  .hero{ min-height:100vh; }
  .hero-content{ padding-top:5rem; padding-bottom:5rem; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .hero-actions .btn{ width:100%; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-bottom-inner{ flex-direction:column; text-align:left; }
}

/* =========================================================
   Page Historique
   ========================================================= */

.hero--compact{
  min-height:62vh;
}
.hero--compact .hero-content{
  padding-top:5.5rem;
  padding-bottom:6rem;
}

.main-nav a.is-current{
  color:var(--celeste);
}
.main-nav a.is-current::after{
  transform:scaleX(1);
  background:var(--celeste);
}

/* Sommaire */
.history-toc{
  position:sticky;
  top:73px;
  z-index:40;
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--stone);
}
.history-toc-inner{
  display:flex;
  gap:.4rem;
  overflow-x:auto;
  padding:.9rem 24px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.history-toc-inner::-webkit-scrollbar{ display:none; }
.history-toc-inner a{
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  color:var(--ink-soft);
  padding:.5em 1em;
  border-radius:100px;
  border:1px solid var(--stone);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.history-toc-inner a:hover{
  background:var(--celeste);
  color:#fff;
  border-color:var(--celeste);
}

/* Contenu narratif */
.history-section{ scroll-margin-top:130px; }
.history-container{
  max-width:760px;
}
.history-container p{
  font-size:1.02rem;
  color:var(--ink);
  opacity:.86;
}

.drop-cap::first-letter{
  font-family:var(--font-display);
  font-weight:700;
  font-size:3.4em;
  float:left;
  line-height:.82;
  margin:.04em .1em 0 0;
  color:var(--celeste);
}

.pull-quote{
  margin:2rem 0;
  padding:1.4rem 1.8rem;
  border-left:4px solid var(--gold);
  background:var(--beige);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
}
.pull-quote cite{
  display:block;
  margin-top:.6rem;
  font-style:normal;
  font-size:.82rem;
  font-weight:600;
  color:var(--celeste);
}
.pull-quote--center{
  text-align:center;
  border-left:none;
  border-top:3px solid var(--gold);
  border-radius:var(--radius);
  background:var(--celeste-deep);
  color:var(--gold-soft);
  font-size:1.15rem;
}

/* Timeline */
.timeline{
  list-style:none;
  margin:2.2rem 0 0;
  padding:0 0 0 1.4rem;
  border-left:2px solid var(--stone);
}
.timeline li{
  position:relative;
  padding:0 0 1.6rem 1.6rem;
}
.timeline li:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  left:-1.53rem;
  top:.15rem;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--celeste);
  box-shadow:0 0 0 4px var(--ivory);
}
.section-alt .timeline-dot{ box-shadow:0 0 0 4px var(--beige); }
.timeline li div{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.timeline li strong{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
}
.timeline li span{
  font-size:.85rem;
  color:var(--ink-soft);
}
.timeline-current .timeline-dot{
  background:var(--gold);
  width:15px; height:15px;
  left:-1.6rem;
  top:.08rem;
  animation:logoGlow 2.4s ease-in-out infinite;
}
.timeline-current strong{ color:var(--celeste); }

/* Hommage — grilles de noms */
.honor-title{
  margin-top:2.2rem;
  font-size:1.05rem;
  font-weight:700;
  color:var(--celeste);
}
.honor-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
  padding:0;
  list-style:none;
}
.honor-grid li{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:100px;
  padding:.45em 1.05em;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.honor-grid li:hover{
  background:var(--celeste);
  color:#fff;
  transform:translateY(-2px);
}
.honor-grid--gold li:hover{
  background:var(--gold);
  color:#2A2013;
}
.honor-note{
  margin-top:1rem;
  font-size:.85rem;
  font-style:italic;
  color:var(--ink-soft);
}

/* Statistiques */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.1rem;
  margin-top:2.4rem;
}
.stat-card{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:var(--radius);
  padding:1.5rem 1.2rem;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.stat-card strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.8rem;
  color:var(--celeste);
  margin-bottom:.3rem;
}
.stat-card span{
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.35;
}

/* Paroisses filles */
.parish-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.9rem;
  margin-top:1.6rem;
  padding:0;
  list-style:none;
}
.parish-grid li{
  background:#fff;
  border:1px solid var(--stone);
  border-left:3px solid var(--gold);
  border-radius:10px;
  padding:.85rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.parish-grid li:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}
.parish-grid li strong{
  font-family:var(--font-display);
  font-size:.92rem;
  color:var(--ink);
}
.parish-grid li span{
  font-size:.8rem;
  color:var(--ink-soft);
}

/* Photos en interlude */
.photo-interlude{
  margin:0;
  padding:3.4rem 24px;
  background:var(--beige);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.photo-interlude img{
  max-width:520px;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  border:6px solid #fff;
}
.photo-interlude figcaption{
  margin-top:1rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.88rem;
  color:var(--ink-soft);
  text-align:center;
}

.photo-interlude--archive{
  position:relative;
}
.photo-interlude--archive img{
  position:relative;
}
.photo-interlude--archive::before{
  content:"Archives";
  position:relative;
  display:inline-block;
  margin-bottom:1rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--gold);
  padding:.4em 1.1em;
  border-radius:100px;
}

/* Carte-portrait (responsable / devancier) */
.portrait-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:2.2rem auto;
  text-align:center;
}
.portrait-card img{
  width:150px; height:150px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid #fff;
  box-shadow:var(--shadow-soft), 0 0 0 3px var(--gold-soft);
}
.portrait-card figcaption{
  margin-top:1rem;
}
.portrait-card strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
}
.portrait-card span{
  display:block;
  margin-top:.2rem;
  font-size:.82rem;
  font-style:italic;
  color:var(--celeste);
}

/* Photo encadrée plus petite, insérée dans le texte */
.history-photo-inline{
  margin:2.4rem auto;
  max-width:420px;
  text-align:center;
}
.history-photo-inline img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  border:6px solid #fff;
  transition:transform .5s ease;
}
.history-photo-inline:hover img{ transform:scale(1.03); }
.history-photo-inline figcaption{
  margin-top:.9rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.85rem;
  color:var(--ink-soft);
}

/* CTA de fin de page */
.history-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
}
.history-cta-btn{
  color:#2A2013;
}

@media (max-width:640px){
  .stat-row{ grid-template-columns:repeat(2, 1fr); }
  .parish-grid{ grid-template-columns:1fr; }
  .drop-cap::first-letter{ font-size:2.6em; }
  .history-toc{ top:70px; }
}

.nav-toggle.is-active span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }