/* ==========================================================================
   BÉTHANIE CULTE — SITE PUBLIC
   Inspiré du style institutionnel de la référence fournie :
   grand hero photographique, bleu profond, jaune, turquoise, typographie
   en capitales espacées, sections éditoriales et responsive.
   ========================================================================== */

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

:root{
  --navy:#203f50;
  --navy-deep:#173745;
  --navy-dark:#112d39;

  --gold:#f3c94d;
  --gold-hover:#ffd65c;

  --teal:#42b4a2;
  --teal-dark:#2f9d8e;

  --green:#0d573f;
  --green-dark:#083e2e;

  --cream:#f2f1ee;
  --offwhite:#f8f8f6;
  --white:#ffffff;

  --ink:#203f50;
  --text:#333c43;
  --muted:#69747b;

  --line:#e2e4e3;

  --container:1220px;
  --header-height:74px;

  --shadow:0 18px 55px rgba(9,35,46,.16);
}

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

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:#fff;
  color:var(--text);
  font-family:
    "Trebuchet MS",
    "Segoe UI",
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
}

body.menu-open,
body.image-lightbox-open{
  overflow:hidden;
}

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

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

button,
input{
  font:inherit;
}

button{
  color:inherit;
}

[hidden]{
  display:none !important;
}

.container{
  width:min(var(--container),calc(100% - 46px));
  margin-inline:auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(32,63,80,.98);
  color:#fff;
  box-shadow:none;
  transition:
    background .22s ease,
    box-shadow .22s ease;
}

.site-header.is-scrolled{
  background:rgba(23,55,69,.985);
  box-shadow:0 8px 30px rgba(6,25,33,.18);
}

.header-inner{
  min-height:var(--header-height);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:26px;
}

.site-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}

.site-brand-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  overflow:hidden;
  border-radius:50%;
}

.site-brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.site-brand-copy{
  min-width:0;
}

.site-brand-copy strong{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:.13em;
}

.site-brand-copy small{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.64);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.site-nav > a{
  position:relative;
  min-height:74px;
  display:flex;
  align-items:center;
  padding:0 14px;
  color:rgba(255,255,255,.91);
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:
    color .18s ease,
    background .18s ease;
}

.site-nav > a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}

.site-nav > a:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
}

.site-nav > a:hover::after{
  transform:scaleX(1);
}

.nav-admin-mobile{
  display:none !important;
}

.header-cta{
  min-width:178px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:calc((100vw - min(var(--container),calc(100vw - 46px))) / -2);
  padding:0 28px;
  background:var(--gold);
  color:var(--navy-dark);
  font-size:13px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:
    background .18s ease,
    padding .18s ease;
}

.header-cta:hover{
  background:var(--gold-hover);
}

.menu-toggle{
  display:none;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:135px 0 80px;
  background-image:var(--hero-image);
  background-position:center;
  background-size:cover;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(26,52,65,.30),
      rgba(26,52,65,.08) 45%,
      rgba(16,39,50,.34)
    );
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(23,55,69,.14),
      rgba(23,55,69,.17) 55%,
      rgba(23,55,69,.44)
    );
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:980px;
  text-align:center;
  color:#fff;
}

.hero-eyebrow{
  margin:0 0 17px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.hero h1{
  margin:0 auto;
  max-width:960px;
  color:#fff;
  font-size:clamp(54px,6.6vw,88px);
  line-height:1.12;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 3px 22px rgba(0,0,0,.17);
}

.hero h1 span{
  display:block;
}

.hero-verse{
  max-width:720px;
  margin:30px auto 0;
  color:#fff;
  font-size:18px;
  line-height:1.55;
}

.hero-verse strong{
  font-weight:400;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:70px;
  margin-top:28px;
}

.pill-button{
  min-width:235px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 26px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-align:center;
  transition:
    transform .18s ease,
    filter .18s ease;
}

.pill-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
}

.pill-button-gold{
  background:var(--gold);
  color:var(--navy-dark);
}

.pill-button-teal{
  background:var(--teal);
  color:#fff;
}

.hero-bottom-line{
  margin:28px 0 0;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* ==========================================================================
   INTRO : À PROPOS + MISSION
   ========================================================================== */

.intro-section{
  position:relative;
  z-index:5;
  margin-top:-34px;
  padding-bottom:90px;
}

.intro-grid{
  display:grid;
  grid-template-columns:1.55fr .85fr;
  align-items:stretch;
}

.about-panel{
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:65px 100px;
  background:var(--cream);
}

.section-overline{
  display:block;
  margin-bottom:14px;
  color:var(--teal-dark);
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.section-overline-light{
  color:rgba(255,255,255,.80);
}

.about-panel h2,
.section-heading h2,
.mission-container h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(34px,4vw,54px);
  line-height:1.12;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.about-panel p{
  max-width:670px;
  margin:24px 0 0;
  font-size:14px;
  line-height:1.85;
}

.text-link{
  width:max-content;
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:25px;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  color:var(--teal-dark);
  font-size:12px;
  font-weight:800;
}

.mission-feature{
  position:relative;
  min-height:390px;
  overflow:hidden;
  background:var(--green);
}

.mission-feature-image{
  position:absolute;
  inset:0;
}

.mission-feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.38;
}

.mission-feature-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(9,75,54,.68),
      rgba(4,55,39,.91)
    );
}

.mission-feature-content{
  position:relative;
  z-index:2;
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:55px;
  text-align:center;
  color:#fff;
}

.mission-feature-content h2{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.mission-feature-content p{
  max-width:330px;
  margin:27px auto 0;
  font-size:13px;
  line-height:1.55;
}

.mission-feature-content a{
  margin-top:27px;
  color:var(--teal);
  font-size:12px;
  text-decoration:underline;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section{
  padding:95px 0;
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:44px;
}

.section-heading > div{
  max-width:760px;
}

.section-heading > p{
  max-width:390px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

.section-heading-light h2,
.section-heading-light > p{
  color:#fff;
}


/* ==========================================================================
   DIRECTION
   ========================================================================== */

.leadership-section{
  background:#fff;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.leaders-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:22px;
}


/* ==========================================================================
   CARTE
   ========================================================================== */

.leader-card{
  overflow:hidden;

  background:#fff;

  border:
    1px solid
    var(--line);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}


.leader-card:hover{
  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.leader-photo{
  position:relative;

  width:100%;
  height:470px;

  display:block;

  padding:0;

  overflow:hidden;

  border:0;

  background:#e8eced;

  cursor:zoom-in;
}


.leader-photo img{
  width:100%;
  height:100%;

  object-fit:cover;

  object-position:
    center top;

  transition:
    transform .35s ease;
}


.leader-card:hover
.leader-photo img{
  transform:
    scale(1.025);
}


/* ==========================================================================
   PHOTO PAR DÉFAUT
   ========================================================================== */

.leader-photo-default{
  display:flex;

  align-items:center;
  justify-content:center;

  padding:42px;

  background:
    linear-gradient(
      145deg,
      #f4f4f1,
      #e6eceb
    );
}


.leader-photo-default img{
  width:
    min(
      280px,
      85%
    );

  height:auto;

  max-height:75%;

  object-fit:contain;

  object-position:center;

  border-radius:50%;

  box-shadow:
    0 18px 55px
    rgba(19,51,63,.16);
}


.leader-card:hover
.leader-photo-default img{
  transform:
    scale(1.03);
}


/* ==========================================================================
   PHOTO À VENIR
   ========================================================================== */

.leader-default-label{
  position:absolute;

  left:18px;
  bottom:18px;

  min-height:29px;

  display:flex;

  align-items:center;

  padding:
    0
    11px;

  background:
    rgba(32,63,80,.92);

  color:#fff;

  font-size:8px;

  font-weight:900;

  letter-spacing:.10em;

  text-transform:uppercase;

  pointer-events:none;
}


.leader-photo-default
.leader-default-label{
  right:70px;

  width:max-content;
}


/* ==========================================================================
   NUMÉRO
   ========================================================================== */

.leader-number{
  position:absolute;

  right:0;
  bottom:0;

  min-width:56px;
  height:56px;

  display:grid;

  place-items:center;

  background:
    var(--gold);

  color:
    var(--navy-dark);

  font-size:13px;

  font-weight:900;
}


/* ==========================================================================
   INFORMATIONS
   ========================================================================== */

.leader-info{
  min-height:165px;

  padding:
    25px
    26px
    28px;
}


.leader-role{
  display:block;

  color:
    var(--teal-dark);

  font-size:10px;

  font-weight:900;

  letter-spacing:.16em;

  line-height:1.45;

  text-transform:uppercase;
}


.leader-info h3{
  margin:
    9px
    0
    7px;

  color:
    var(--navy);

  font-size:25px;

  line-height:1.15;

  font-weight:900;
}


.leader-info p{
  margin:0;

  color:
    var(--muted);

  font-size:13px;

  line-height:1.55;
}


/* ==========================================================================
   BOUTONS VOIR PLUS / RÉDUIRE
   ========================================================================== */

.leaders-toggle-area{
  width:100%;

  display:flex;

  justify-content:center;
}


/*
|--------------------------------------------------------------------------
| Bouton "Voir les autres membres"
|--------------------------------------------------------------------------
*/

.leaders-toggle-area-open{
  margin-top:30px;
}


/*
|--------------------------------------------------------------------------
| Bouton "Réduire la liste"
| Il est réellement sous le dernier membre.
|--------------------------------------------------------------------------
*/

.leaders-toggle-area-close{
  margin-top:30px;
}


/* ==========================================================================
   BOUTON
   ========================================================================== */

.leaders-toggle-button{
  width:
    min(
      380px,
      100%
    );

  min-height:58px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    58px;

  align-items:stretch;

  padding:0;

  border:
    1px solid
    var(--navy);

  background:#fff;

  color:
    var(--navy);

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}


.leaders-toggle-button:hover{
  transform:
    translateY(-2px);

  background:
    var(--navy);

  color:#fff;

  box-shadow:
    0 10px 30px
    rgba(19,51,63,.12);
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.leaders-toggle-text{
  min-width:0;
  min-height:58px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:
    0
    20px;

  font-size:10px;

  line-height:1.3;

  font-weight:900;

  letter-spacing:.11em;

  text-transform:uppercase;
}


/* ==========================================================================
   COMPTEUR
   ========================================================================== */

.leaders-toggle-text strong{
  min-width:26px;
  height:26px;

  display:grid;

  place-items:center;

  padding:
    0
    5px;

  background:
    var(--gold);

  color:
    var(--navy-dark);

  font-size:9px;

  font-weight:900;
}


/* ==========================================================================
   ICÔNE
   ========================================================================== */

.leaders-toggle-icon{
  min-height:58px;

  display:grid;

  place-items:center;

  border-left:
    1px solid
    currentColor;

  font-size:23px;

  line-height:1;
}


/* ==========================================================================
   BOUTON RÉDUIRE
   ========================================================================== */

.leaders-toggle-button-close{
  background:
    var(--navy);

  color:#fff;
}


.leaders-toggle-button-close:hover{
  background:
    var(--navy-deep);

  color:#fff;
}


.leaders-toggle-icon-close{
  font-size:22px;
}


/* ==========================================================================
   AUTRES MEMBRES
   ========================================================================== */

.leaders-extra-wrapper{
  width:100%;

  margin-top:30px;
}


.leaders-extra-wrapper[hidden]{
  display:none !important;
}


.leaders-grid-extra{
  width:100%;
}


/* ==========================================================================
   ANIMATION DES MEMBRES
   ========================================================================== */

.leaders-extra-wrapper.is-open
.leader-card-extra{
  animation:
    leaderExtraAppear
    .32s
    ease
    both;
}


.leaders-extra-wrapper.is-open
.leader-card-extra:nth-child(2){
  animation-delay:.04s;
}


.leaders-extra-wrapper.is-open
.leader-card-extra:nth-child(3){
  animation-delay:.08s;
}


.leaders-extra-wrapper.is-open
.leader-card-extra:nth-child(4){
  animation-delay:.12s;
}


.leaders-extra-wrapper.is-open
.leader-card-extra:nth-child(5){
  animation-delay:.16s;
}


@keyframes leaderExtraAppear{

  from{
    opacity:0;

    transform:
      translateY(12px);
  }

  to{
    opacity:1;

    transform:none;
  }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width:1050px){

  .leaders-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .leader-photo{
    height:430px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:650px){

  .leaders-grid{
    grid-template-columns:1fr;

    gap:18px;
  }


  .leader-photo{
    height:auto;

    aspect-ratio:
      4 / 4.5;
  }


  .leader-photo-default{
    padding:35px;
  }


  .leader-photo-default img{
    width:
      min(
        240px,
        78%
      );
  }


  .leader-info{
    min-height:0;

    padding:
      21px
      20px
      24px;
  }


  .leader-info h3{
    font-size:22px;
  }


  .leader-role{
    font-size:9px;
  }


  .leader-info p{
    font-size:12px;
  }


  .leader-number{
    min-width:50px;
    height:50px;

    font-size:11px;
  }


  .leader-default-label{
    left:12px;
    bottom:12px;

    font-size:7px;
  }


  .leader-photo-default
  .leader-default-label{
    right:62px;
  }


  .leaders-toggle-area-open,
  .leaders-toggle-area-close,
  .leaders-extra-wrapper{
    margin-top:22px;
  }


  .leaders-toggle-button{
    width:100%;
  }


  .leaders-toggle-text{
    padding:
      0
      14px;

    font-size:9px;

    letter-spacing:.08em;
  }

}
/* ==========================================================================
   ÉGLISES / CARROUSEL
   ========================================================================== */

.churches-section{
  background:var(--navy);
  color:#fff;
}

.carousel-controls{
  display:flex;
  gap:8px;
}

.carousel-controls button{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.24);
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:20px;
  transition:
    background .18s ease,
    color .18s ease;
}

.carousel-controls button:hover:not(:disabled){
  background:var(--gold);
  color:var(--navy-dark);
}

.carousel-controls button:disabled{
  opacity:.30;
  cursor:not-allowed;
}

.church-carousel{
  position:relative;
}

.carousel-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:2px 1px 17px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.church-card{
  flex:0 0 calc((100% - 22px) / 2);
  min-width:0;
  scroll-snap-align:start;
  background:#fff;
  color:var(--text);
}

.church-photo{
  position:relative;
  width:100%;
  height:350px;
  display:block;
  padding:0;
  overflow:hidden;
  border:0;
  background:#dce2e3;
  cursor:zoom-in;
}

.church-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.church-card:hover .church-photo img{
  transform:scale(1.025);
}

.church-index{
  position:absolute;
  top:0;
  left:0;
  min-width:54px;
  height:54px;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:var(--navy-dark);
  font-size:12px;
  font-weight:900;
}

.church-content{
  min-height:220px;
  padding:28px 30px 31px;
}

.church-label{
  color:var(--teal-dark);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.church-content h3{
  margin:9px 0 8px;
  color:var(--navy);
  font-size:26px;
  line-height:1.15;
}

.church-city{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.church-pastor{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.church-pastor span,
.church-pastor strong{
  display:block;
}

.church-pastor span{
  color:#8a9296;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.church-pastor strong{
  margin-top:5px;
  color:var(--navy);
  font-size:14px;
}

.carousel-progress{
  height:3px;
  margin-top:10px;
  overflow:hidden;
  background:rgba(255,255,255,.20);
}

.carousel-progress-bar{
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
  transition:width .12s linear;
}

.carousel-dots{
  min-height:15px;
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:15px;
}

.carousel-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.36);
}

.carousel-dot.is-active{
  background:var(--gold);
}

/* ==========================================================================
   ÉGLISES — ÉQUIPE / RESPONSABLES
   ========================================================================== */

.church-team{
  margin-top:24px;

  padding-top:20px;

  border-top:
    1px solid
    var(--line);
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.church-team-heading{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  margin-bottom:17px;
}


.church-team-heading > span{
  color:
    var(--teal-dark);

  font-size:9px;

  line-height:1;

  font-weight:900;

  letter-spacing:.15em;

  text-transform:uppercase;
}


.church-team-heading > strong{
  min-width:27px;
  height:27px;

  display:grid;

  place-items:center;

  padding:0 6px;

  background:
    var(--gold);

  color:
    var(--navy-dark);

  font-size:9px;

  font-weight:900;
}


/* ==========================================================================
   LISTE DES MEMBRES
   ========================================================================== */

.church-team-list{
  display:grid;

  grid-template-columns:1fr;

  gap:10px;
}


/* ==========================================================================
   MEMBRE
   ========================================================================== */

.church-team-member{
  position:relative;

  min-width:0;

  display:grid;

  grid-template-columns:
    72px
    minmax(0,1fr);

  align-items:center;

  gap:15px;

  padding:
    12px
    42px
    12px
    12px;

  border:
    1px solid
    #e7e9e8;

  background:
    #fafbfa;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.church-team-member:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(66,180,162,.42);

  background:#fff;

  box-shadow:
    0 10px 30px
    rgba(9,35,46,.08);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.church-team-photo{
  position:relative;

  width:72px;
  height:72px;

  padding:0;

  overflow:hidden;

  border:
    3px solid
    #fff;

  border-radius:50%;

  outline:
    1px solid
    #dce1e0;

  background:
    #edf0ef;

  cursor:zoom-in;

  box-shadow:
    0 7px 20px
    rgba(9,35,46,.13);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    outline-color .2s ease;
}


.church-team-photo:hover{
  transform:
    scale(1.04);

  outline-color:
    var(--teal);

  box-shadow:
    0 10px 25px
    rgba(9,35,46,.18);
}


.church-team-photo img{
  width:100%;
  height:100%;

  object-fit:cover;

  object-position:
    center top;

  border-radius:50%;
}


/* ==========================================================================
   EMBLÈME / PHOTO PAR DÉFAUT
   ========================================================================== */

.church-team-photo.is-default{
  padding:6px;

  background:
    linear-gradient(
      145deg,
      #f5f5f2,
      #e8eceb
    );
}


.church-team-photo.is-default img{
  object-fit:contain;

  object-position:center;
}


/* ==========================================================================
   IDENTITÉ
   ========================================================================== */

.church-team-identity{
  min-width:0;
}


.church-team-role{
  display:block;

  margin-bottom:5px;

  color:
    var(--teal-dark);

  font-size:7px;

  line-height:1.35;

  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.church-team-name{
  display:block;

  color:
    var(--navy);

  font-size:14px;

  line-height:1.25;

  font-weight:900;

  overflow-wrap:anywhere;
}


/* ==========================================================================
   VOIR LA PHOTO
   ========================================================================== */

.church-team-view{
  width:max-content;

  max-width:100%;

  display:flex;

  align-items:center;

  gap:5px;

  margin-top:7px;

  padding:0;

  border:0;

  background:transparent;

  color:
    #8a9295;

  font-size:7px;

  line-height:1;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;

  cursor:pointer;
}


.church-team-view:hover{
  color:
    var(--teal-dark);
}


.church-team-view span{
  color:
    var(--gold);

  font-size:11px;
}


/* ==========================================================================
   NUMÉRO
   ========================================================================== */

.church-team-number{
  position:absolute;

  top:0;
  right:0;

  width:31px;
  height:31px;

  display:grid;

  place-items:center;

  background:
    var(--navy);

  color:#fff;

  font-size:7px;

  font-weight:900;
}


/* ==========================================================================
   SI LA CARTE D'ÉGLISE EST LARGE
   ========================================================================== */

@media (min-width:1180px){

  .church-team-list{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  /*
   * Si nombre impair :
   * dernier membre peut prendre toute la largeur.
   */

  .church-team-member:last-child:nth-child(odd){
    grid-column:1 / -1;
  }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width:900px){

  .church-team-member{
    grid-template-columns:
      64px
      minmax(0,1fr);

    gap:13px;

    padding:
      11px
      38px
      11px
      11px;
  }


  .church-team-photo{
    width:64px;
    height:64px;
  }


  .church-team-name{
    font-size:13px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:600px){

  .church-team{
    margin-top:20px;

    padding-top:18px;
  }


  .church-team-heading{
    margin-bottom:14px;
  }


  .church-team-list{
    gap:9px;
  }


  .church-team-member{
    grid-template-columns:
      58px
      minmax(0,1fr);

    gap:12px;

    padding:
      10px
      34px
      10px
      10px;
  }


  .church-team-photo{
    width:58px;
    height:58px;

    border-width:2px;
  }


  .church-team-role{
    margin-bottom:4px;

    font-size:6.5px;

    letter-spacing:.09em;
  }


  .church-team-name{
    font-size:13px;

    line-height:1.2;
  }


  .church-team-view{
    margin-top:5px;

    font-size:6.5px;
  }


  .church-team-number{
    width:27px;
    height:27px;

    font-size:6px;
  }

}


/* ==========================================================================
   TRÈS PETIT MOBILE
   ========================================================================== */

@media (max-width:390px){

  .church-team-member{
    grid-template-columns:
      52px
      minmax(0,1fr);

    gap:10px;
  }


  .church-team-photo{
    width:52px;
    height:52px;
  }


  .church-team-name{
    font-size:12px;
  }

}

/* ==========================================================================
   FINITION DE LA CARTE
   ========================================================================== */

.church-content{
  display:flex;

  flex-direction:column;
}


.church-card{
  height:auto;
}


/*
|--------------------------------------------------------------------------
| Empêche deux cartes d'avoir des contenus visuellement déséquilibrés
|--------------------------------------------------------------------------
*/

.carousel-track{
  align-items:stretch;
}


.church-card{
  align-self:stretch;
}



/* ==========================================================================
   MISSION / TEXTE
   ========================================================================== */

.mission-section{
  background:#fff;
}

.mission-container{
  max-width:980px;
  text-align:center;
}

.mission-container h2{
  max-width:860px;
  margin-inline:auto;
}

.mission-text{
  max-width:760px;
  margin:30px auto 0;
  text-align:left;
}

.mission-text p{
  margin:0 0 20px;
  color:#333d42;
  font-size:14px;
  line-height:1.7;
}

.mission-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:33px;
}


/* ==========================================================================
   BANDEAU INFOS
   ========================================================================== */

.contact-strip{
  background:#ececea;
  border-top:1px solid #e1e1df;
}

.contact-strip-grid{
  min-height:150px;
  display:grid;
  grid-template-columns:1fr 1.4fr auto;
  align-items:center;
  gap:55px;
}

.contact-strip-grid > div span,
.contact-strip-grid > div strong{
  display:block;
}

.contact-strip-grid > div span{
  margin-bottom:8px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.contact-strip-grid > div strong{
  color:var(--navy);
  font-size:14px;
}

.contact-strip-grid > a{
  min-width:145px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 25px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-dark);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}


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

.site-footer{
  background:#fff;
}

.footer-main{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:50%;
}

.footer-brand strong,
.footer-brand span{
  display:block;
}

.footer-brand strong{
  color:var(--navy);
  font-size:13px;
  letter-spacing:.10em;
}

.footer-brand span{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}

.footer-main nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.footer-main nav a{
  color:var(--navy);
  font-size:12px;
}

.footer-main nav a:hover{
  text-decoration:underline;
}

.footer-bottom{
  background:var(--navy);
  color:#fff;
}

.footer-bottom .container{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
}


/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  padding:22px;
}

.image-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,26,34,.92);
}

.image-lightbox-dialog{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  max-height:calc(100vh - 44px);
  overflow:hidden;
  background:#fff;
  box-shadow:0 35px 110px rgba(0,0,0,.42);
  opacity:0;
  transform:scale(.98);
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.image-lightbox.is-open .image-lightbox-dialog{
  opacity:1;
  transform:none;
}

.image-lightbox-stage{
  height:min(72vh,720px);
  display:grid;
  place-items:center;
  background:#112f3b;
}

.image-lightbox-stage img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.image-lightbox-close{
  position:absolute;
  z-index:3;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

.image-lightbox-caption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 20px;
}

.image-lightbox-caption strong{
  color:var(--navy);
}

.image-lightbox-caption span{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}


/* ==========================================================================
   AUTRES
   ========================================================================== */

.empty-state{
  padding:45px;
  text-align:center;
}

.empty-state-dark{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:900;
  width:44px;
  height:44px;
  border:0;
  background:var(--gold);
  color:var(--navy-dark);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .55s ease,
    transform .55s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/* ==========================================================================
   RESPONSIVE 1100
   ========================================================================== */

@media (max-width:1100px){

  .site-brand-copy small{
    display:none;
  }

  .site-nav > a{
    padding-inline:10px;
    font-size:12px;
  }

  .header-cta{
    min-width:145px;
    padding-inline:18px;
  }

  .about-panel{
    padding-inline:65px;
  }

  .leader-photo{
    height:405px;
  }

  .church-photo{
    height:300px;
  }
}


/* ==========================================================================
   RESPONSIVE 900 — TABLETTE / MENU MOBILE
   ========================================================================== */

@media (max-width:900px){

  :root{
    --header-height:68px;
  }

  html{
    scroll-padding-top:85px;
  }

  .container{
    width:min(100% - 30px,var(--container));
  }

  .header-inner{
    min-height:68px;
    grid-template-columns:1fr auto;
    gap:15px;
  }

  .site-brand-logo{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .site-brand-copy strong{
    font-size:13px;
  }

  .site-nav{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:9px;
    background:var(--navy);
    box-shadow:0 20px 55px rgba(9,35,46,.24);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:
      opacity .18s ease,
      visibility .18s ease,
      transform .18s ease;
  }

  .site-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .site-nav > a{
    min-height:50px;
    justify-content:flex-start;
    padding:0 15px;
    font-size:13px;
  }

  .site-nav > a::after{
    display:none;
  }

  .nav-admin-mobile{
    display:flex !important;
    margin-top:6px;
    background:var(--gold);
    color:var(--navy-dark) !important;
    font-weight:900 !important;
    text-transform:uppercase;
    letter-spacing:.10em;
  }

  .header-cta{
    display:none;
  }

  .menu-toggle{
    width:44px;
    height:44px;
    display:block;
    padding:0;
    border:1px solid rgba(255,255,255,.28);
    background:transparent;
    cursor:pointer;
  }

  .menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    margin:4px auto;
    background:#fff;
    transition:
      transform .2s ease,
      opacity .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .hero{
    min-height:590px;
    padding-top:118px;
  }

  .hero h1{
    font-size:clamp(46px,9vw,70px);
  }

  .hero-buttons{
    gap:18px;
  }

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

  .about-panel{
    min-height:auto;
    padding:60px 55px;
  }

  .mission-feature,
  .mission-feature-content{
    min-height:360px;
  }

  .section{
    padding:80px 0;
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:17px;
  }

  .leaders-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .leader-card:last-child{
    grid-column:1/-1;
    width:calc(50% - 11px);
  }

  .church-card{
    flex-basis:72%;
  }

  .contact-strip-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding-block:35px;
  }

  .contact-strip-grid > a{
    width:max-content;
  }
}


/* ==========================================================================
   RESPONSIVE 680 — MOBILE
   ========================================================================== */

@media (max-width:680px){

  .container{
    width:min(100% - 22px,var(--container));
  }

  .site-brand-copy strong{
    font-size:12px;
    letter-spacing:.10em;
  }

  .hero{
    min-height:575px;
    padding:105px 0 62px;
  }

  .hero-eyebrow{
    margin-bottom:15px;
    font-size:9px;
    line-height:1.55;
  }

  .hero h1{
    font-size:clamp(38px,12vw,54px);
    letter-spacing:.10em;
  }

  .hero-verse{
    margin-top:24px;
    font-size:15px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .pill-button{
    width:min(310px,100%);
    min-width:0;
  }

  .hero-bottom-line{
    margin-top:25px;
    font-size:9px;
    line-height:1.6;
  }

  .intro-section{
    margin-top:0;
    padding-bottom:60px;
  }

  .about-panel{
    padding:46px 28px;
  }

  .about-panel h2,
  .section-heading h2,
  .mission-container h2{
    font-size:32px;
    letter-spacing:.09em;
  }

  .mission-feature,
  .mission-feature-content{
    min-height:350px;
  }

  .mission-feature-content{
    padding:38px 26px;
  }

  .mission-feature-content h2{
    font-size:29px;
  }

  .section{
    padding:65px 0;
  }

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

  .leader-card:last-child{
    grid-column:auto;
    width:auto;
  }

  .leader-photo{
    height:auto;
    aspect-ratio:4/4.7;
  }

  .church-card{
    flex-basis:92%;
  }

  .church-photo{
    height:auto;
    aspect-ratio:16/11;
  }

  .church-content{
    min-height:205px;
    padding:24px 22px 26px;
  }

  .church-content h3{
    font-size:22px;
  }

  .mission-actions{
    flex-direction:column;
    align-items:center;
  }

  .contact-strip-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .footer-main{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding-block:40px;
  }

  .footer-main nav{
    flex-wrap:wrap;
    gap:18px 24px;
  }

  .footer-bottom .container{
    min-height:74px;
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:6px;
  }

  .image-lightbox{
    padding:10px;
  }

  .image-lightbox-stage{
    height:70vh;
  }

  .image-lightbox-caption{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .image-lightbox-caption span{
    text-align:left;
  }
}


/* ==========================================================================
   PETITS TÉLÉPHONES
   ========================================================================== */

@media (max-width:390px){

  .site-brand-logo{
    width:33px;
    height:33px;
    flex-basis:33px;
  }

  .site-brand-copy strong{
    font-size:10.5px;
  }

  .hero h1{
    font-size:35px;
  }

  .about-panel h2,
  .section-heading h2,
  .mission-container h2{
    font-size:28px;
  }

  .carousel-controls button{
    width:42px;
    height:42px;
  }
}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}


/* ==========================================================================
   LIGHTBOX PREMIUM — CORRECTION IMAGE COMPLÈTE + TEXTE LISIBLE
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| CONTENEUR GLOBAL
|--------------------------------------------------------------------------
*/

.image-lightbox{
  position:fixed;
  inset:0;

  z-index:9999;

  display:grid;
  place-items:center;

  padding:20px;

  overflow:hidden;
}


/*
|--------------------------------------------------------------------------
| FOND SOMBRE
|--------------------------------------------------------------------------
*/

.image-lightbox-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(5,22,29,.94);

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);
}


/*
|--------------------------------------------------------------------------
| FENÊTRE
|--------------------------------------------------------------------------
*/

.image-lightbox-dialog{
  position:relative;
  z-index:2;

  width:
    min(
      1180px,
      calc(100vw - 40px)
    );

  /*
   * IMPORTANT :
   * toute la fenêtre reste contenue dans l'écran.
   */
  height:min(92vh,920px);
  height:min(92dvh,920px);

  max-height:
    calc(100vh - 40px);

  display:grid;

  /*
   * L'image prend l'espace disponible
   * et la légende possède sa propre ligne.
   */
  grid-template-rows:
    minmax(0,1fr)
    auto;

  overflow:hidden;

  background:#ffffff;

  border:
    1px solid
    rgba(255,255,255,.18);

  box-shadow:
    0 35px 120px
    rgba(0,0,0,.48);

  opacity:0;

  transform:
    translateY(10px)
    scale(.985);

  transition:
    opacity .22s ease,
    transform .22s ease;
}


.image-lightbox.is-open
.image-lightbox-dialog{
  opacity:1;

  transform:none;
}


/*
|--------------------------------------------------------------------------
| ZONE DE LA PHOTO
|--------------------------------------------------------------------------
*/

.image-lightbox-stage{
  position:relative;

  width:100%;

  /*
   * Très important :
   * on retire les anciens 72vh fixes.
   */
  height:auto;
  min-height:0;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  padding:18px;

  background:
    radial-gradient(
      circle at center,
      #1c4556 0%,
      #112f3b 55%,
      #081f29 100%
    );
}


/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/

.image-lightbox-stage img{
  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  /*
   * C'EST LA CORRECTION PRINCIPALE :
   * l'image entière est toujours affichée.
   */
  object-fit:contain;

  object-position:center;

  border:0;

  background:transparent;

  box-shadow:
    0 15px 55px
    rgba(0,0,0,.20);
}


/*
|--------------------------------------------------------------------------
| BOUTON FERMER
|--------------------------------------------------------------------------
*/

.image-lightbox-close{
  position:absolute;

  z-index:10;

  top:16px;
  right:16px;

  width:46px;
  height:46px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius:50%;

  background:
    rgba(13,35,45,.84);

  color:#ffffff;

  font-size:27px;

  line-height:1;

  cursor:pointer;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.20);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

  transition:
    background .18s ease,
    transform .18s ease;
}


.image-lightbox-close:hover{
  background:#f3c94d;

  color:#173745;

  transform:
    rotate(5deg)
    scale(1.04);
}


/*
|--------------------------------------------------------------------------
| LÉGENDE
|--------------------------------------------------------------------------
*/

.image-lightbox-caption{
  position:relative;

  z-index:5;

  width:100%;

  display:grid;

  grid-template-columns:
    minmax(0,.85fr)
    minmax(0,1.15fr);

  align-items:center;

  gap:30px;

  min-height:84px;

  padding:
    18px
    24px;

  border-top:
    4px solid
    #f3c94d;

  background:#ffffff;

  color:#203f50;
}


/*
|--------------------------------------------------------------------------
| NOM DE L'ÉGLISE
|--------------------------------------------------------------------------
*/

.image-lightbox-caption strong{
  display:block;

  min-width:0;

  color:#203f50;

  font-size:18px;

  line-height:1.3;

  font-weight:900;

  letter-spacing:.035em;

  overflow-wrap:anywhere;
}


/*
|--------------------------------------------------------------------------
| VILLE + PASTEUR
|--------------------------------------------------------------------------
*/

.image-lightbox-caption span{
  display:block;

  min-width:0;

  color:#626d72;

  font-size:13px;

  line-height:1.55;

  font-weight:600;

  text-align:right;

  overflow-wrap:anywhere;

  white-space:normal;
}


/*
|--------------------------------------------------------------------------
| PETITE DÉCORATION
|--------------------------------------------------------------------------
*/

.image-lightbox-caption::before{
  content:"";

  position:absolute;

  top:-4px;
  left:24px;

  width:72px;
  height:4px;

  background:#42b4a2;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width:900px){

  .image-lightbox{
    padding:14px;
  }


  .image-lightbox-dialog{
    width:
      calc(100vw - 28px);

    height:
      calc(100vh - 28px);

    height:
      calc(100dvh - 28px);

    max-height:none;
  }


  .image-lightbox-stage{
    padding:12px;
  }


  .image-lightbox-caption{
    grid-template-columns:1fr;

    gap:5px;

    min-height:auto;

    padding:
      17px
      20px
      19px;
  }


  .image-lightbox-caption strong{
    font-size:16px;
  }


  .image-lightbox-caption span{
    font-size:12px;

    text-align:left;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:600px){

  .image-lightbox{
    padding:8px;
  }


  .image-lightbox-dialog{
    width:
      calc(100vw - 16px);

    height:
      calc(100vh - 16px);

    height:
      calc(100dvh - 16px);
  }


  .image-lightbox-stage{
    padding:8px;
  }


  .image-lightbox-stage img{
    width:100%;
    height:100%;

    object-fit:contain;
  }


  .image-lightbox-close{
    top:10px;
    right:10px;

    width:42px;
    height:42px;

    font-size:24px;
  }


  .image-lightbox-caption{
    padding:
      15px
      17px
      17px;

    border-top-width:3px;
  }


  .image-lightbox-caption::before{
    top:-3px;

    left:17px;

    width:55px;
    height:3px;
  }


  .image-lightbox-caption strong{
    font-size:15px;

    line-height:1.3;
  }


  .image-lightbox-caption span{
    margin-top:2px;

    font-size:11px;

    line-height:1.45;
  }

}


/* ==========================================================================
   MOBILE EN MODE PAYSAGE
   ========================================================================== */

@media
(max-height:600px)
and
(orientation:landscape){

  .image-lightbox{
    padding:7px;
  }


  .image-lightbox-dialog{
    width:
      calc(100vw - 14px);

    height:
      calc(100dvh - 14px);

    grid-template-columns:
      minmax(0,1fr)
      300px;

    grid-template-rows:1fr;
  }


  .image-lightbox-caption{
    grid-template-columns:1fr;

    align-content:center;

    gap:8px;

    border-top:0;

    border-left:
      4px solid
      #f3c94d;
  }


  .image-lightbox-caption span{
    text-align:left;
  }


  .image-lightbox-caption::before{
    display:none;
  }

}

/* ==========================================================================
   HEADER MOBILE — CORRECTION FINALE
   Hamburger aligné + menu pleine largeur + zéro espace
   ========================================================================== */

@media (max-width:900px){

  /* =========================================================
     HEADER
     ========================================================= */

  .site-header{
    width:100%;
    height:68px;

    background:#203f50;

    border:0;
    box-shadow:none;
  }


  /*
   * IMPORTANT :
   * on annule la largeur .container uniquement
   * pour le header.
   *
   * Le reste du site garde son container normal.
   */
  .site-header .header-inner{
    width:100% !important;
    max-width:none !important;

    height:68px;
    min-height:68px;

    margin:0 !important;

    padding:0 0 0 10px;

    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      68px;

    align-items:center;

    gap:0;
  }


  /* =========================================================
     LOGO
     ========================================================= */

  .site-brand{
    min-width:0;

    height:68px;

    display:flex;

    align-items:center;

    gap:10px;

    overflow:hidden;
  }


  .site-brand-logo{
    width:38px;
    height:38px;

    flex:0 0 38px;

    margin:0;

    border-radius:50%;

    overflow:hidden;

    background:#fff;
  }


  .site-brand-logo img{
    width:100%;
    height:100%;

    object-fit:cover;
  }


  .site-brand-copy{
    min-width:0;
  }


  .site-brand-copy strong{
    display:block;

    margin:0;

    overflow:hidden;

    color:#fff;

    font-size:12px;

    line-height:1.1;

    font-weight:900;

    letter-spacing:.11em;

    white-space:nowrap;

    text-overflow:ellipsis;
  }


  .site-brand-copy small{
    display:none;
  }


  /* =========================================================
     BOUTON ADMIN DESKTOP
     ========================================================= */

  .header-cta{
    display:none;
  }


  /* =========================================================
     HAMBURGER
     ========================================================= */

  .menu-toggle{
    width:68px;
    height:68px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin:0;
    padding:0;

    border:0;

    border-left:
      1px solid
      rgba(255,255,255,.25);

    border-radius:0;

    background:
      rgba(255,255,255,.025);

    box-shadow:none;

    cursor:pointer;
  }


  .menu-toggle:hover{
    background:
      rgba(255,255,255,.07);
  }


  /*
   * On neutralise les anciennes marges
   * des trois traits.
   */
  .menu-toggle > span{
    display:block;

    width:23px;
    height:2px;

    margin:0 !important;

    border-radius:0;

    background:#fff;

    transform-origin:center;

    transition:
      transform .22s ease,
      opacity .18s ease;
  }


  /* =========================================================
     HAMBURGER -> CROIX
     ========================================================= */

  .menu-toggle[aria-expanded="true"]
  span:nth-child(1){
    transform:
      translateY(7px)
      rotate(45deg);
  }


  .menu-toggle[aria-expanded="true"]
  span:nth-child(2){
    opacity:0;
  }


  .menu-toggle[aria-expanded="true"]
  span:nth-child(3){
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /* =========================================================
     MENU MOBILE PLEINE LARGEUR
     ========================================================= */

  .site-nav{
    /*
     * FIXED permet de sortir complètement du .container
     * et d'utiliser toute la largeur de l'écran.
     */
    position:fixed;

    top:68px;
    left:0;
    right:0;

    width:100vw;

    max-width:none;

    max-height:
      calc(100vh - 68px);

    max-height:
      calc(100dvh - 68px);

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    justify-content:flex-start;

    gap:0;

    /*
     * ZÉRO ESPACE autour du menu
     */
    margin:0 !important;
    padding:0 !important;

    border:0;

    background:#203f50;

    box-shadow:
      0 14px 30px
      rgba(7,25,34,.20);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    /*
     * petite animation verticale,
     * mais aucun espace physique.
     */
    transform:
      translateY(-8px);

    transition:
      opacity .20s ease,
      visibility .20s ease,
      transform .20s ease;
  }


  /* =========================================================
     MENU OUVERT
     ========================================================= */

  .site-nav.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);
  }


  /* =========================================================
     LIENS
     ========================================================= */

  .site-nav > a{
    position:relative;

    width:100%;

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    margin:0 !important;

    padding:
      0
      22px !important;

    border:0;

    border-bottom:
      1px solid
      rgba(255,255,255,.075);

    background:#203f50;

    color:#fff;

    font-size:13px;

    font-weight:500;

    line-height:1;

    white-space:normal;

    transition:
      background .18s ease,
      color .18s ease,
      padding-left .18s ease;
  }


  /*
   * On désactive le trait du menu desktop
   */
  .site-nav > a::after{
    display:none !important;
  }


  .site-nav > a:hover,
  .site-nav > a:focus-visible{
    padding-left:27px !important;

    background:#173745;

    color:#fff;
  }


  /* =========================================================
     ADMINISTRATION
     ========================================================= */

  .site-nav > .nav-admin-mobile{
    width:100%;

    min-height:64px;

    display:flex !important;

    align-items:center;

    justify-content:flex-start;

    margin:0 !important;

    padding:
      0
      22px !important;

    border:0;

    background:#f3c94d;

    color:#112d39 !important;

    font-size:12px;

    font-weight:900 !important;

    letter-spacing:.12em;

    text-transform:uppercase;
  }


  .site-nav > .nav-admin-mobile:hover{
    padding-left:27px !important;

    background:#ffd65c;

    color:#112d39 !important;
  }

}


/* ==========================================================================
   PETITS MOBILES
   ========================================================================== */

@media (max-width:480px){

  .site-header,
  .site-header .header-inner{
    height:64px;
    min-height:64px;
  }


  .site-header .header-inner{
    grid-template-columns:
      minmax(0,1fr)
      64px;

    padding-left:9px;
  }


  .site-brand{
    height:64px;
  }


  .site-brand-logo{
    width:35px;
    height:35px;

    flex-basis:35px;
  }


  .site-brand-copy strong{
    font-size:11px;

    letter-spacing:.10em;
  }


  .menu-toggle{
    width:64px;
    height:64px;
  }


  .site-nav{
    top:64px;

    max-height:
      calc(100vh - 64px);

    max-height:
      calc(100dvh - 64px);
  }


  .site-nav > a{
    min-height:60px;

    padding:
      0
      20px !important;
  }


  .site-nav > .nav-admin-mobile{
    min-height:62px;

    padding:
      0
      20px !important;
  }

}


/* ==========================================================================
   FORMULAIRE ADHÉSION
   ========================================================================== */

.membership-trigger{
  border:0;
  cursor:pointer;
}


/* MODALE */

.membership-modal{
  position:fixed;
  inset:0;

  z-index:12000;

  display:grid;
  place-items:center;

  padding:22px;
}


.membership-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(7,28,37,.88);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}


/* FENÊTRE */

.membership-dialog{
  position:relative;
  z-index:2;

  width:min(1180px,100%);

  height:min(90vh,850px);
  height:min(90dvh,850px);

  display:grid;

  grid-template-columns:
    .78fr
    1.22fr;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 35px 120px
    rgba(0,0,0,.38);

  opacity:0;

  transform:
    translateY(12px)
    scale(.985);

  transition:
    opacity .24s ease,
    transform .24s ease;
}


.membership-modal.is-open
.membership-dialog{
  opacity:1;

  transform:none;
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.membership-aside{
  position:relative;

  overflow:hidden;

  color:#fff;

  background:
    #173745
    url("images/embleme-bethanie.jpg")
    center / cover
    no-repeat;
}


.membership-aside-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      145deg,
      rgba(23,55,69,.95),
      rgba(23,55,69,.86) 55%,
      rgba(13,87,63,.88)
    );
}


.membership-aside-content{
  position:relative;
  z-index:2;

  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:42px;
}


/* LOGO */

.membership-brand{
  width:max-content;
  max-width:100%;

  display:flex;

  align-items:center;

  gap:11px;
}


.membership-brand img{
  width:44px;
  height:44px;

  flex:0 0 44px;

  object-fit:cover;

  border-radius:50%;
}


.membership-brand strong,
.membership-brand span{
  display:block;
}


.membership-brand strong{
  color:#fff;

  font-size:13px;

  font-weight:900;

  letter-spacing:.11em;
}


.membership-brand span{
  margin-top:4px;

  color:
    rgba(255,255,255,.62);

  font-size:8px;

  letter-spacing:.11em;

  text-transform:uppercase;
}


/* TEXTE */

.membership-overline{
  display:block;

  margin-bottom:10px;

  color:#2f9d8e;

  font-size:9px;

  font-weight:900;

  letter-spacing:.18em;

  text-transform:uppercase;
}


.membership-aside
.membership-overline{
  color:#f3c94d;
}


.membership-aside-main h2{
  margin:0;

  color:#fff;

  font-size:
    clamp(
      38px,
      4vw,
      58px
    );

  line-height:1.06;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.membership-aside-main h2 span{
  display:block;

  color:#f3c94d;
}


.membership-aside-main p{
  max-width:430px;

  margin:
    22px
    0
    0;

  color:
    rgba(255,255,255,.76);

  font-size:13px;

  line-height:1.75;
}


.membership-aside-footer{
  padding-top:20px;

  border-top:
    1px solid
    rgba(255,255,255,.17);
}


.membership-aside-footer span{
  display:block;

  margin-bottom:7px;

  color:
    rgba(255,255,255,.50);

  font-size:8px;

  font-weight:900;

  letter-spacing:.14em;

  text-transform:uppercase;
}


.membership-aside-footer strong{
  color:#fff;

  font-size:12px;

  line-height:1.65;

  letter-spacing:.06em;
}


/* ==========================================================================
   FORMULAIRE
   ========================================================================== */

.membership-form-side{
  min-width:0;

  overflow-y:auto;

  padding:
    40px
    45px
    45px;

  background:#fff;

  scrollbar-width:thin;

  scrollbar-color:
    #c6cdce
    transparent;
}


.membership-form-header{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:25px;
}


.membership-form-header h2{
  margin:0;

  color:#203f50;

  font-size:35px;

  line-height:1.1;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.membership-close{
  width:44px;
  height:44px;

  flex:0 0 44px;

  display:grid;

  place-items:center;

  padding:0;

  border:1px solid #d7dada;

  background:#fff;

  color:#203f50;

  font-size:26px;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}


.membership-close:hover{
  border-color:#203f50;

  background:#203f50;

  color:#fff;
}


.membership-intro{
  margin:
    12px
    0
    32px;

  color:#717a7e;

  font-size:13px;

  line-height:1.6;
}


/* TITRES DES ÉTAPES */

.membership-section-title{
  display:flex;

  align-items:center;

  gap:14px;

  margin:
    32px
    0
    19px;

  padding-bottom:14px;

  border-bottom:
    1px solid #e2e4e3;
}


.membership-section-title:first-of-type{
  margin-top:0;
}


.membership-section-title > span{
  width:39px;
  height:39px;

  flex:0 0 39px;

  display:grid;

  place-items:center;

  background:#f3c94d;

  color:#173745;

  font-size:10px;

  font-weight:900;
}


.membership-section-title strong,
.membership-section-title small{
  display:block;
}


.membership-section-title strong{
  color:#203f50;

  font-size:13px;

  font-weight:900;

  letter-spacing:.07em;

  text-transform:uppercase;
}


.membership-section-title small{
  margin-top:3px;

  color:#8a9295;

  font-size:10px;
}


/* GRID */

.membership-row{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:15px;
}


.membership-row-address{
  grid-template-columns:
    .45fr
    1.55fr;
}


/* CHAMPS */

.membership-field{
  margin-bottom:17px;
}


.membership-field label{
  display:block;

  margin-bottom:7px;

  color:#203f50;

  font-size:10px;

  font-weight:900;

  letter-spacing:.07em;

  text-transform:uppercase;
}


.membership-field input,
.membership-field select,
.membership-field textarea{
  width:100%;

  min-height:50px;

  padding:
    0
    13px;

  border:
    1px solid
    #ccd1d1;

  border-radius:0;

  outline:0;

  background:#fff;

  color:#313b40;

  font-family:inherit;

  font-size:13px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.membership-field select{
  cursor:pointer;
}


.membership-field textarea{
  min-height:125px;

  padding:
    13px;

  resize:vertical;

  line-height:1.55;
}


.membership-field input:focus,
.membership-field select:focus,
.membership-field textarea:focus{
  border-color:#42b4a2;

  box-shadow:
    0 0 0 3px
    rgba(66,180,162,.11);
}


/* CHECKBOX */

.membership-checkbox{
  display:flex;

  align-items:flex-start;

  gap:11px;

  margin-top:14px;

  cursor:pointer;
}


.membership-checkbox input{
  width:17px;
  height:17px;

  flex:0 0 17px;

  margin-top:2px;

  accent-color:#2f9d8e;
}


.membership-checkbox span{
  color:#636d72;

  font-size:11px;

  line-height:1.55;
}


/* BOUTON */

.membership-submit-area{
  margin-top:28px;

  padding-top:25px;

  border-top:
    1px solid #e2e4e3;
}


.membership-submit{
  width:100%;

  min-height:54px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:13px;

  padding:
    0
    25px;

  border:0;

  background:#f3c94d;

  color:#173745;

  font-size:11px;

  font-weight:900;

  letter-spacing:.13em;

  text-transform:uppercase;

  cursor:pointer;

  transition:
    background .18s ease;
}


.membership-submit:hover{
  background:#ffd65c;
}


.membership-submit span{
  font-size:18px;
}


.membership-submit-area p{
  margin:
    11px
    0
    0;

  color:#8a9295;

  font-size:10px;

  line-height:1.5;

  text-align:center;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width:900px){

  .membership-dialog{
    grid-template-columns:
      .68fr
      1.32fr;
  }


  .membership-aside-content{
    padding:30px;
  }


  .membership-form-side{
    padding:
      34px
      30px
      40px;
  }

}


/* ==========================================================================
   MOBILE — PREND 100 % DE L'ÉCRAN
   ========================================================================== */

@media (max-width:700px){

  .membership-modal{
    display:block;

    padding:0;
  }


  .membership-dialog{
    position:absolute;

    inset:0;

    width:100vw;
    height:100vh;
    height:100dvh;

    max-width:none;
    max-height:none;

    display:block;

    overflow:hidden;

    transform:
      translateY(20px);

    background:#fff;
  }


  .membership-modal.is-open
  .membership-dialog{
    transform:none;
  }


  /*
   * On cache le grand panneau gauche.
   * Toutes les informations importantes
   * restent dans le formulaire.
   */
  .membership-aside{
    display:none;
  }


  .membership-form-side{
    width:100%;
    height:100%;

    overflow-y:auto;

    padding:0;

    background:#fff;
  }


  /* HEADER MOBILE FIXE */

  .membership-form-header{
    position:sticky;

    top:0;

    z-index:20;

    min-height:78px;

    align-items:center;

    padding:
      14px
      15px;

    border-bottom:
      1px solid
      rgba(255,255,255,.15);

    background:#203f50;

    color:#fff;
  }


  .membership-form-header
  .membership-overline{
    margin-bottom:5px;

    color:#f3c94d;

    font-size:8px;
  }


  .membership-form-header h2{
    color:#fff;

    font-size:18px;

    letter-spacing:.06em;
  }


  .membership-close{
    width:46px;
    height:46px;

    flex-basis:46px;

    border:
      1px solid
      rgba(255,255,255,.28);

    background:transparent;

    color:#fff;
  }


  .membership-close:hover{
    background:#f3c94d;

    color:#173745;
  }


  .membership-intro{
    margin:0;

    padding:
      22px
      18px
      4px;

    font-size:12px;
  }


  .membership-form{
    padding:
      0
      18px
      35px;
  }


  .membership-row,
  .membership-row-address{
    grid-template-columns:1fr;

    gap:0;
  }


  .membership-section-title{
    margin-top:29px;
  }


  .membership-field input,
  .membership-field select{
    min-height:52px;

    font-size:16px;
  }


  /*
   * 16px empêche iPhone/Safari
   * de zoomer automatiquement
   * quand on touche un input.
   */
  .membership-field textarea{
    font-size:16px;
  }


  .membership-submit-area{
    padding-bottom:
      env(safe-area-inset-bottom);
  }


  .membership-submit{
    min-height:56px;
  }

}


/* ==========================================================================
   PETIT MOBILE
   ========================================================================== */

@media (max-width:390px){

  .membership-form{
    padding-inline:14px;
  }


  .membership-form-header{
    padding-inline:12px;
  }


  .membership-form-header h2{
    font-size:16px;
  }


  .membership-section-title strong{
    font-size:12px;
  }

}

body.membership-modal-open{
  overflow:hidden;
}

/* ==========================================================================
   NOTIFICATIONS / TOASTS
   ========================================================================== */

.site-notifications{
  position:fixed;

  z-index:15000;

  top:92px;
  right:22px;

  width:min(430px,calc(100vw - 44px));

  display:flex;
  flex-direction:column;
  gap:12px;

  pointer-events:none;
}


/* NOTIFICATION */

.site-toast{
  position:relative;

  width:100%;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    38px;

  align-items:center;

  gap:13px;

  overflow:hidden;

  padding:
    16px
    15px
    17px;

  border:1px solid #dfe3e3;

  background:#fff;

  color:#203f50;

  box-shadow:
    0 18px 55px
    rgba(9,35,46,.18);

  pointer-events:auto;

  animation:
    siteToastIn
    .35s
    cubic-bezier(.2,.7,.2,1)
    both;
}


/* SUCCESS */

.site-toast--success{
  border-left:
    5px solid
    #42b4a2;
}


/* ERROR */

.site-toast--error{
  border-left:
    5px solid
    #c94242;
}


/* INFO */

.site-toast--info{
  border-left:
    5px solid
    #f3c94d;
}


/* ICÔNE */

.site-toast-icon{
  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border-radius:50%;

  font-size:18px;
  font-weight:900;
}


.site-toast--success
.site-toast-icon{
  background:#e7f7f3;
  color:#238976;
}


.site-toast--error
.site-toast-icon{
  background:#fff0ef;
  color:#b42318;
}


.site-toast--info
.site-toast-icon{
  background:#fff8df;
  color:#9f7c19;
}


/* TEXTE */

.site-toast-content{
  min-width:0;
}


.site-toast-content strong{
  display:block;

  margin-bottom:4px;

  color:#203f50;

  font-size:13px;

  font-weight:900;

  letter-spacing:.05em;

  text-transform:uppercase;
}


.site-toast-content p{
  margin:0;

  color:#616b70;

  font-size:12px;

  line-height:1.55;
}


/* FERMETURE */

.site-toast-close{
  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  padding:0;

  border:0;

  background:transparent;

  color:#8b9295;

  font-size:23px;

  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease;
}


.site-toast-close:hover{
  background:#f2f3f3;
  color:#203f50;
}


/* BARRE DE TEMPS */

.site-toast-progress{
  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:3px;

  transform-origin:left;

  animation:
    siteToastProgress
    7s
    linear
    forwards;
}


.site-toast--success
.site-toast-progress{
  background:#42b4a2;
}


.site-toast--error
.site-toast-progress{
  background:#c94242;
}


.site-toast--info
.site-toast-progress{
  background:#f3c94d;
}


/* DISPARITION */

.site-toast.is-leaving{
  animation:
    siteToastOut
    .25s
    ease
    forwards;
}


/* ANIMATIONS */

@keyframes siteToastIn{

  from{
    opacity:0;

    transform:
      translateX(25px);
  }

  to{
    opacity:1;

    transform:none;
  }

}


@keyframes siteToastOut{

  from{
    opacity:1;

    transform:none;
  }

  to{
    opacity:0;

    transform:
      translateX(25px);
  }

}


@keyframes siteToastProgress{

  from{
    transform:
      scaleX(1);
  }

  to{
    transform:
      scaleX(0);
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:700px){

  .site-notifications{
    top:76px;

    left:10px;
    right:10px;

    width:auto;
  }


  .site-toast{
    grid-template-columns:
      40px
      minmax(0,1fr)
      34px;

    gap:10px;

    padding:
      13px
      11px
      15px;
  }


  .site-toast-icon{
    width:38px;
    height:38px;

    font-size:16px;
  }


  .site-toast-content strong{
    font-size:11px;
  }


  .site-toast-content p{
    font-size:11px;

    line-height:1.45;
  }

}