/* =========================================================
   Koinonia Divine Mission — feuille de style
   Palette : ivoire, minuit/prune, or divin, sauge profonde
   ========================================================= */

:root{
  /* Palette extraite du logo Koinonia Divine Mission */
  --blue:#0B6FB8;        /* bleu de la croix */
  --navy:#232E80;        /* bleu profond du contour */
  --navy-deep:#161C4F;   /* fond sombre */
  --cyan:#20A8E0;        /* océans du globe */
  --gold:#F5C518;        /* or du bandeau */
  --orange:#F09838;      /* dégradé du bandeau */
  --gold-deep:#C28A0C;
  --gold-text:#8A5F06;   /* or lisible sur fond clair (AA) */
  --red:#D8202F;         /* bandeau de la devise */
  --green:#5F8F3F;       /* continents du globe */

  --ivory:#FBF8F0;
  --ivory-2:#F3EEE1;
  --ink:#1A2150;
  --ink-soft:#4A5480;
  --line:#E2DAC6;
  --white:#ffffff;

  --maxw:1120px;
  --radius:14px;
  --shadow:0 18px 50px -28px rgba(26,33,80,.45);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- Marque / halo (élément signature) ---------- */
.brand__mark{
  width:40px;height:40px;border-radius:8px;object-fit:contain;
  background:var(--white);flex:0 0 auto;
}
.brand__mark--sm{width:52px;height:52px;border-radius:10px}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand__text{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1;display:flex;flex-direction:column}
.brand__sub{font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-top:3px}

.nav__links{display:flex;gap:1.4rem;margin-left:auto}
.nav__links a{text-decoration:none;font-weight:500;font-size:.92rem;color:var(--ink-soft);position:relative;padding:.2rem 0}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav__links a:hover::after{width:100%}

.nav__right{display:flex;align-items:center;gap:.9rem}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang__btn{border:0;background:transparent;padding:.32rem .6rem;font-size:.75rem;font-weight:600;color:var(--ink-soft);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lang__btn.is-active{background:var(--navy);color:var(--ivory)}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.4rem;border-radius:999px;font-weight:600;font-size:.95rem;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:.2s;
}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--orange));color:#3A2A00}
.btn--gold:hover{background:linear-gradient(135deg,var(--orange),var(--gold-deep));color:#fff}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--ivory)}
.btn--full{width:100%;margin-top:.6rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,#161C4F 0%,#232E80 55%,#0B6FB8 100%);
  color:var(--ivory);
  padding:5.5rem 1.25rem 4.5rem;
}
.hero__halo{
  position:absolute;top:-30%;right:-10%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,.38) 0%, rgba(245,197,24,0) 62%);
  pointer-events:none;
}
.hero__inner{max-width:var(--maxw);margin:0 auto;position:relative;text-align:center}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin:0 0 1rem}
.hero .eyebrow{color:var(--gold)}
.hero__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.2rem,5.5vw,3.7rem);line-height:1.08;margin:0 0 1.2rem;
}
.hero__lead{max-width:640px;margin:0 auto 2rem;color:#e8e3d6;font-size:1.08rem}
.hero__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero .btn--ghost{border-color:rgba(251,247,239,.6);color:var(--ivory)}
.hero .btn--ghost:hover{background:var(--ivory);color:var(--ink)}

.next-service{
  margin-top:2.6rem;display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;color:#e8e3d6;
}
.next-service strong{color:#fff}
.next-service__dot{width:9px;height:9px;border-radius:50%;background:#63d68c;box-shadow:0 0 0 0 rgba(99,214,140,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,214,140,.6)}70%{box-shadow:0 0 0 9px rgba(99,214,140,0)}100%{box-shadow:0 0 0 0 rgba(99,214,140,0)}}

/* ---------- Sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.25rem}
.section--tint{max-width:none;background:var(--ivory-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--tint > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.section__head{text-align:center;margin-bottom:2.6rem}
.section__head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,3.5vw,2.6rem);margin:.2rem 0 0}

/* ---------- À propos ---------- */
.about__lead{max-width:720px;margin:0 auto 2.5rem;text-align:center;font-size:1.1rem;color:var(--ink-soft)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.5rem;box-shadow:var(--shadow)}
.pillar h3{font-family:var(--font-display);font-weight:600;font-size:1.35rem;margin:0 0 .5rem;color:var(--blue)}
.pillar p{margin:0;color:var(--ink-soft)}

/* ---------- Horaires ---------- */
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.time-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:.35rem;border-top:4px solid var(--gold)}
.time-card__day{font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.time-card__name{color:var(--ink-soft)}
.time-card__hour{font-weight:600;color:var(--blue)}
.times__note{text-align:center;margin-top:1.8rem;color:var(--ink-soft)}

/* ---------- En direct ---------- */
.live{display:grid;grid-template-columns:2fr 1fr;gap:1.6rem;align-items:start}
.live__player{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000}
.live__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live__side{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.live__side h3{font-family:var(--font-display);margin:0 0 1rem;font-size:1.3rem}
.live__list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.live__list li{padding-left:1.3rem;position:relative;color:var(--ink-soft)}
.live__list li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.live__list a{color:var(--blue);font-weight:600;text-decoration:none}
.live__list a:hover{text-decoration:underline}

/* ---------- Événements ---------- */
.events{display:flex;flex-direction:column;gap:1rem;max-width:760px;margin:0 auto}
.event{display:flex;gap:1.4rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.event__date{flex:0 0 88px;text-align:center;background:var(--navy);color:var(--ivory);border-radius:10px;padding:.8rem .4rem;display:flex;flex-direction:column;justify-content:center}
.event__d{font-family:var(--font-display);font-size:1.9rem;line-height:1;font-weight:600}
.event__m{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.event__body h3{font-family:var(--font-display);margin:.1rem 0 .4rem;font-size:1.25rem}
.event__body p{margin:0;color:var(--ink-soft)}

/* ---------- Dons ---------- */
.give__lead{max-width:680px;margin:0 auto 2.5rem;text-align:center;font-style:italic;font-family:var(--font-display);font-size:1.2rem;color:var(--ink-soft)}
.give__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:860px;margin:0 auto}
.give__card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.give__card h3{font-family:var(--font-display);margin:0 0 .6rem;font-size:1.35rem;color:var(--blue)}
.give__ways{padding-left:1.1rem;margin:.4rem 0 1rem;color:var(--ink-soft)}
.give__ways li{margin-bottom:.4rem}
.give__tax{font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.8rem;margin:0}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;max-width:900px;margin:0 auto}
.contact__info p{margin:0 0 1.1rem}
.contact__info strong{color:var(--blue)}
.contact__info a{color:var(--ink);text-decoration:none}
.contact__form{display:flex;flex-direction:column;gap:.9rem}
.contact__form label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.9rem}
.contact__form input,.contact__form textarea{
  font-family:inherit;font-size:1rem;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:10px;background:var(--white);color:var(--ink);
}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--gold)}

/* ---------- Pied de page ---------- */
.footer{background:var(--navy-deep);color:var(--ivory);padding:3rem 1.25rem;text-align:center}
.footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.footer__name{font-family:var(--font-display);font-size:1.3rem;margin:.4rem 0 0}
.footer__copy{color:#a9b2d8;font-size:.85rem;margin:.2rem 0 1rem}
.footer__social{display:flex;gap:1.3rem}
.footer__social a{color:var(--gold);text-decoration:none;font-weight:600;font-size:.9rem}
.footer__social a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav__links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ivory);
    padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);gap:1rem;transform:translateY(-140%);transition:.3s;margin-left:0}
  .nav__links.is-open{transform:translateY(0)}
  .nav__toggle{display:flex;margin-left:auto}
  .pillars,.times,.give__grid,.live,.contact{grid-template-columns:1fr}
  .live__player{padding-top:56.25%}
}


/* ---------- Devise du ministère (bandeau du logo) ---------- */
.motto{
  display:inline-block;margin:0 0 1.4rem;
  background:var(--red);color:#fff;
  padding:.42rem 1.5rem;border-radius:4px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;
  box-shadow:0 6px 18px -8px rgba(216,32,47,.9);
}
.motto__ref{display:block;margin-top:.7rem;font-size:.8rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;font-weight:600}
.footer__motto{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;font-weight:600;margin:.1rem 0 .3rem}

/* =========================================================
   RUBRIQUES DYNAMIQUES : annonce, prédications, invités, galerie
   ========================================================= */

/* --- Bandeau d'annonce --- */
.annonce{background:var(--red);color:#fff;text-align:center;padding:.6rem 1rem;font-weight:600;font-size:.92rem}
.annonce a{color:#fff;text-decoration:underline}

.section__sub{color:var(--ink-soft);margin:.5rem 0 0;font-size:.98rem}
.empty{text-align:center;color:var(--ink-soft);font-style:italic;padding:1.5rem 0}

/* --- Prédications --- */
.preds{display:flex;flex-direction:column;gap:1rem}
.pred{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.pred__media{position:relative;border-radius:10px;overflow:hidden;background:var(--navy);min-height:158px}
.pred__play{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:linear-gradient(140deg,var(--navy),var(--blue));display:flex;align-items:center;justify-content:center}
.pred__playicon{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:19px;padding-left:4px;transition:transform .2s}
.pred__play:hover .pred__playicon{transform:scale(1.12)}
.pred__frame{position:relative;padding-top:56.25%}
.pred__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pred__noimg{height:100%;min-height:158px;display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:2rem;background:linear-gradient(140deg,var(--navy),var(--blue))}
.pred__body h3{font-family:var(--font-display);font-size:1.35rem;margin:.2rem 0 .3rem}
.pred__meta{font-size:.82rem;letter-spacing:.04em;color:var(--blue);font-weight:600;margin:0;text-transform:uppercase}
.pred__speaker{color:var(--ink-soft);margin:0 0 .7rem}
.pred__audio{width:100%;margin:.4rem 0 .6rem;height:38px}
.pred__links{margin:0;display:flex;gap:1rem}
.pred__link{font-weight:600;color:var(--blue);text-decoration:none;font-size:.9rem}
.pred__link:hover{text-decoration:underline}

/* --- Invités --- */
.guests{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.guest{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;text-align:center;box-shadow:var(--shadow)}
.guest__photo{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto .9rem;
  border:3px solid var(--gold);display:block}
.guest__photo--empty{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--navy),var(--blue));color:var(--gold);font-size:1.8rem}
.guest h3{font-family:var(--font-display);margin:0 0 .2rem;font-size:1.2rem}
.guest__role{color:var(--blue);font-weight:600;margin:0;font-size:.9rem}
.guest__date{color:var(--ink-soft);font-size:.82rem;margin:.2rem 0 .6rem}
.guest p{color:var(--ink-soft);margin:0;font-size:.94rem}

/* --- Événements : photo --- */
.event__img{width:150px;height:110px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.event__meta{font-size:.86rem;color:var(--blue);font-weight:600;margin:.1rem 0 .4rem}

/* --- Galerie --- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.shot{margin:0;border-radius:10px;overflow:hidden;background:var(--white);border:1px solid var(--line)}
.shot img{width:100%;height:180px;object-fit:cover;display:block;transition:transform .35s}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{padding:.6rem .7rem;font-size:.85rem;color:var(--ink-soft);text-align:center}

@media (max-width:860px){
  .pred{grid-template-columns:1fr}
  .guests{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .event{flex-wrap:wrap}
  .event__img{width:100%;height:170px}
}


/* =========================================================
   ACCESSIBILITÉ & TRÈS PETITS ÉCRANS (≤ 380 px)
   ========================================================= */
@media (max-width:380px){
  .nav__inner{padding:.6rem .75rem;gap:.5rem}
  .brand__text{font-size:1rem}
  .brand__sub{font-size:.55rem;letter-spacing:.12em}
  .brand__mark{width:34px;height:34px}
  .nav__right{gap:.45rem}
  .lang__btn{padding:.3rem .42rem;font-size:.7rem}
  .section{padding:3rem .9rem}
  .hero{padding:3.5rem .9rem 3rem}
  .event{padding:1rem}
  .gallery{grid-template-columns:1fr}
}

/* Zones tactiles confortables sur écrans tactiles */
@media (pointer:coarse){
  .nav__links a{padding:.55rem 0}
  .lang__btn{min-height:44px;min-width:44px}
  .nav__toggle{min-height:44px;min-width:44px}
  .pred__link,.live__list a{display:inline-block;padding:.4rem 0}
}

/* Lien d'évitement pour la navigation au clavier */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.7rem 1.2rem;border-radius:0 0 8px 0;z-index:100;font-weight:600}
.skip:focus{left:0}

/* =========================================================
   GRANDS ÉCRANS & TÉLÉVISEURS
   Le contenu s'élargit et le texte grossit pour rester
   lisible à plusieurs mètres de distance.
   ========================================================= */
@media (min-width:1800px){
  :root{--maxw:1400px}
  body{font-size:1.12rem}
}
@media (min-width:2400px){
  :root{--maxw:1800px}
  body{font-size:1.35rem;line-height:1.6}
  .hero__title{font-size:4.6rem}
  .hero__lead{max-width:900px;font-size:1.35rem}
  .section{padding:6rem 2rem}
  .section__head h2{font-size:3.2rem}
  .btn{padding:1rem 2rem;font-size:1.15rem}
  .gallery{grid-template-columns:repeat(5,1fr)}
  .shot img{height:240px}
}
@media (min-width:3200px){
  :root{--maxw:2400px}
  body{font-size:1.7rem}
  .hero__title{font-size:6rem}
  .section__head h2{font-size:4rem}
  .btn{padding:1.3rem 2.6rem;font-size:1.4rem}
  .shot img{height:320px}
}

/* Navigation à la télécommande (TV) : le focus doit être très visible */
@media (min-width:1800px){
  :focus-visible{outline:5px solid var(--gold);outline-offset:4px;border-radius:6px}
}

/* =========================================================
   ZONES TACTILES : au moins 44 px sur écrans tactiles
   (recommandation Apple/Google pour le confort au doigt)
   ========================================================= */
@media (pointer:coarse){
  .live__list a,
  .pred__link,
  .footer__social a,
  .contact__info a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .live__list li{margin:.15rem 0}
  .footer__social{gap:1.1rem;flex-wrap:wrap;justify-content:center}
  .contact__info a{min-height:44px}
  .pred__links{gap:1.4rem}
}

/* Le logo-lien de l'en-tête doit aussi être confortable au doigt */
@media (pointer:coarse){
  .brand{min-height:44px}
}

/* =========================================================
   CARROUSEL (photos qui défilent)
   ========================================================= */
.carou{position:relative;max-width:520px;margin:0 auto;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);background:var(--navy)}
.carou__track{display:flex;transition:transform .5s ease}
.carou__slide{min-width:100%;position:relative;height:min(64vh,560px);
  display:flex;align-items:center;justify-content:center;background:var(--navy)}
.carou__slide img{width:100%;height:100%;object-fit:contain;display:block}
.carou__slide a{display:block;width:100%;height:100%}
.carou__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(transparent,rgba(22,28,79,.92));color:#fff;font-weight:600;font-size:1rem}
.carou__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.85);color:var(--navy);
  font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.carou__nav:hover{background:#fff}
.carou__prev{left:10px} .carou__next{right:10px}
.carou__dots{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem}
.carou__dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.carou__dot.is-on{background:var(--gold)}

/* =========================================================
   ÉVÉNEMENTS enrichis : thème, catégorie, Zoom, récurrence
   ========================================================= */
.event__tag{display:inline-block;background:var(--blue);color:#fff;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;padding:.18rem .6rem;border-radius:999px;margin-bottom:.3rem}
.cat-special .event__tag{background:var(--red)}
.cat-priere .event__tag{background:var(--gold-deep)}
.cat-enseignement .event__tag{background:var(--sage,#2E5E57)}
.event__theme{font-family:var(--font-display);font-style:italic;color:var(--ink);margin:.1rem 0 .4rem;font-size:1.05rem}
.event__d--rec{font-size:1.15rem;text-transform:capitalize}
.event__actions{margin:.7rem 0 0}
.event__zoom{display:inline-flex;align-items:center;gap:.4rem;background:#2D8CFF;color:#fff;
  padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none}
.event__zoom:hover{background:#1a7ae8}
.event__zoom--info{background:var(--ivory-2);color:var(--ink);cursor:default;font-size:.82rem}

/* Filtres de catégorie */
.event-filters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:-1rem 0 2rem}
.event-filters button{border:1.5px solid var(--line);background:var(--white);color:var(--ink-soft);
  padding:.4rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;min-height:44px}
.event-filters button.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* =========================================================
   INSCRIPTION (newsletter)
   ========================================================= */
.section--join{max-width:none;background:linear-gradient(160deg,#161C4F,#232E80 60%,#0B6FB8);
  border-top:1px solid var(--line)}
.join{max-width:640px;margin:0 auto;text-align:center;color:#fff}
.join h2{font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 .5rem;color:#fff}
.join__lead{color:#e6ebf7;margin:0 auto 1.6rem;max-width:520px}
.join__form{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);padding:1.6rem}
.join__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.join__form input[type=text],.join__form input[type=email]{width:100%;padding:.8rem .9rem;border:0;
  border-radius:10px;font-size:1rem;font-family:inherit}
.join__cats{border:0;margin:0 0 1.1rem;padding:0;text-align:left}
.join__cats legend{font-weight:600;color:#e6ebf7;margin-bottom:.5rem;font-size:.9rem}
.join__cats label{display:inline-flex;align-items:center;gap:.4rem;margin:0 1rem .4rem 0;color:#f0f3fb;font-size:.92rem}
.join__cats input{width:18px;height:18px;accent-color:var(--gold)}
.join__note{color:#c3cbe8;font-size:.8rem;margin:.9rem 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (max-width:640px){ .join__row{grid-template-columns:1fr} }

/* Zones tactiles : puces du carrousel (visuel 9px, zone tactile 44px) */
@media (pointer:coarse){
  .carou__dots{gap:.1rem}
  .carou__dot{position:relative;background:transparent;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .carou__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5)}
  .carou__dot.is-on::after{background:var(--gold)}
  /* le libellé entier des cases à cocher est déjà tactile et haut d'au moins 44px */
  .join__cats label{min-height:44px}
}

/* =========================================================
   DENSITÉ : page plus courte (sections plus compactes)
   ========================================================= */
.section{padding:3.2rem 1.25rem}
.section__head{margin-bottom:1.8rem}
.hero{padding:4rem 1.25rem 3.2rem}

/* Cartes d'événement compactes */
.event{padding:1rem;gap:1rem}
.event__img{width:120px;height:120px}
.event__body h3{font-size:1.2rem;margin:.2rem 0 .3rem}
.event__theme{font-size:.98rem;margin:.1rem 0 .3rem}
.event__meta{margin:.15rem 0 .35rem}
.event__body p{margin:.3rem 0}
.event__actions{margin:.5rem 0 0}

/* Prédications compactes */
.pred{grid-template-columns:200px 1fr;gap:1rem;padding:1rem}
.pred__media{min-height:120px}
.pred__noimg{min-height:120px}

/* Invités compacts : en ligne plutôt qu'en grande carte */
.guests{grid-template-columns:repeat(3,1fr);gap:1rem}
.guest{padding:1.2rem}
.guest__photo{width:80px;height:80px;margin-bottom:.6rem}

/* Bande d'inscription fine */
.section--join{padding:2.4rem 1.25rem}
.join__form{padding:1.2rem}

@media (max-width:860px){
  .event__img{width:100%;height:150px}
  .pred{grid-template-columns:1fr}
  .guests{grid-template-columns:1fr}
}

/* =========================================================
   ÉVÉNEMENTS ultra-compacts sur mobile (cartes horizontales)
   ========================================================= */
@media (max-width:860px){
  .event{flex-wrap:nowrap;align-items:center;gap:.8rem;padding:.9rem}
  .event__img{width:74px;height:74px;flex:0 0 auto}
  .event__date{flex:0 0 58px;padding:.5rem .3rem}
  .event__d{font-size:1.4rem}
  .event__d--rec{font-size:.95rem}
  .event__body h3{font-size:1.05rem}
  .event__theme{font-size:.9rem}
  .event__meta{font-size:.8rem}
  /* description limitée à 2 lignes pour raccourcir */
  .event__body > p:not(.event__meta):not(.event__theme):not(.event__actions){
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .event__zoom{padding:.45rem .8rem;font-size:.82rem}
}

/* Compactions finales */
.about__lead{margin-bottom:1.6rem;font-size:1.05rem}
.pillar{padding:1.3rem 1.2rem}
.give__lead{margin-bottom:1.6rem;font-size:1.1rem}
.give__card{padding:1.4rem}
.carou__slide{height:min(56vh,470px)}
.section__head h2{margin-top:0}
.live__side{padding:1.3rem}

/* Message d'inscription (Supabase) */
.join__status{min-height:1.3em;margin:.4rem 0 0;font-weight:600;font-size:.92rem}
.join__status.is-ok{color:#8ff0b0}
.join__status.is-err{color:#ffd0c8}

/* =========================================================
   INVITÉS : s'adapte au nombre (1 invité = centré, pas de vide)
   ========================================================= */
.guests{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
.guests .guest{flex:0 1 300px;max-width:340px}
@media (max-width:860px){ .guests .guest{flex:1 1 100%} }

/* Fiche invité horizontale (met l'orateur en valeur, remplit l'espace) */
@media (min-width:861px){
  .guests .guest{flex:0 1 560px;max-width:600px;display:grid;grid-template-columns:120px 1fr;
    gap:1.2rem;text-align:left;align-items:center}
  .guests .guest .guest__photo{margin:0}
  .guests .guest h3{margin-top:0}
}

/* Badge pays sur les photos de dons */
.shot__pays{display:inline-block;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;
  padding:.1rem .5rem;border-radius:99px;margin-left:.3rem;vertical-align:middle}

/* Champ pot de miel : invisible aux humains, piège à robots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form__status{min-height:1.3em;margin:.5rem 0 0;font-weight:600;font-size:.9rem}
.form__status.is-ok{color:var(--sage,#2E5E57)} .form__status.is-err{color:var(--red)}

/* =========================================================
   FORMULAIRE DE DON (montant + fréquence)
   ========================================================= */
.donate{margin-top:1rem}
.donate__freq{display:flex;gap:.5rem;margin-bottom:.8rem}
.donate__f{flex:1;padding:.6rem;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-weight:600;cursor:pointer;color:var(--ink-soft)}
.donate__f.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.donate__amounts{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:.7rem}
.donate__a{padding:.6rem .2rem;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-weight:700;cursor:pointer;min-height:44px}
.donate__a.is-on{background:var(--gold);border-color:var(--gold);color:#3a2a00}
.donate__custom{width:100%;padding:.7rem .8rem;border:1.5px solid var(--gold);border-radius:10px;font-size:1rem;margin-bottom:.7rem}
.donate__row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.donate__row input{padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;font-size:.95rem;width:100%}
.donate .btn{margin-bottom:.5rem}
@media (max-width:520px){ .donate__amounts{grid-template-columns:repeat(3,1fr)} .donate__row{grid-template-columns:1fr} }

/* =========================================================
   BANDE LIVE — Prière du matin (tout en haut)
   ========================================================= */
.livebar{background:linear-gradient(90deg,#161C4F,#232E80);color:#fff}
.livebar__in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:.9rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.livebar__dot{width:11px;height:11px;border-radius:50%;background:#ff4d4d;flex:0 0 auto;box-shadow:0 0 0 0 rgba(255,77,77,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 10px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@media (prefers-reduced-motion:reduce){.livebar__dot{animation:none}}
.livebar__txt{margin:0;display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:180px}
.livebar__txt strong{font-size:1rem}
.livebar__txt span{font-size:.82rem;color:#cdd6f2}
.livebar__btn{padding:.5rem 1.1rem}
.livebar__link{padding:.5rem 1.1rem}

/* Moyens de don manuels (CashApp / Venmo / Zelle) révélés au clic */
.donate__manual{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.donate__manual-title{font-size:.9rem;color:var(--ink-soft);margin:0 0 .5rem}
.donate__methods{display:flex;gap:.5rem;flex-wrap:wrap}
.donate__m{flex:1;min-width:90px;padding:.6rem;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-weight:600;cursor:pointer;min-height:44px}
.donate__m.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.donate__reveal{margin:.8rem 0 0;padding:.8rem 1rem;background:var(--ivory-2,#f4efe1);border-radius:10px;font-weight:600;text-align:center;word-break:break-word}
.donate__reveal strong{display:block;font-size:1.15rem;color:var(--navy);margin-top:.2rem;user-select:all}

/* Zones tactiles : garantir 44px sur les nouveaux boutons */
.livebar__btn,.livebar__link{min-height:44px}
.event__zoom--reveal{min-height:44px}
.donate__f{min-height:44px}

/* Bandeau de consentement (confidentialité) */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:640px;margin:0 auto;background:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:1rem 1.1rem;box-shadow:0 10px 34px rgba(0,0,0,.18);
  z-index:200;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.consent__t{margin:0;flex:1;min-width:220px;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.consent__t a{color:var(--blue);font-weight:600}
.consent__b{display:flex;gap:.5rem}
.consent__b .btn{padding:.5rem 1.1rem;min-height:44px}

/* Zones tactiles : liens de confidentialité */
footer a[href="confidentialite.html"]{display:inline-block;min-height:44px;line-height:44px;padding:0 .5rem}
.consent__t a{display:inline-block;min-height:44px;line-height:44px;padding:0 .3rem}

/* =========================================================================
   DENSITÉ — page d'accueil plus compacte (moins d'espace vide, moins longue)
   Inspiré des sites de médias chrétiens : grilles denses, vignettes serrées.
   ========================================================================= */

/* 1) Sections : marges réduites */
.section{padding:2.6rem 1.25rem}
.section__head{margin-bottom:1.4rem}
.section__sub{font-size:.94rem;margin-top:.35rem}
@media (max-width:640px){ .section{padding:2rem .9rem} .section__head{margin-bottom:1.1rem} }
@media (min-width:1100px){ .section{padding:3.2rem 2rem} }

/* 2) Bandeau d'accueil plus court */
.hero{padding-top:2.4rem;padding-bottom:2rem}
.hero__title{margin-top:.4rem}
.hero__actions{margin-top:1.1rem}
@media (max-width:640px){ .hero{padding-top:1.8rem;padding-bottom:1.6rem} }

/* 3) Carrousel : hauteur plafonnée */
.carou{max-height:min(46vh,380px)}
.carou__slide img{max-height:min(46vh,380px);object-fit:contain}

/* 4) Galerie « Nos actions » : vignettes denses (2 colonnes sur mobile) */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.shot img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.shot figcaption{font-size:.8rem;padding:.35rem .1rem 0;line-height:1.3}
@media (min-width:900px){ .gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem} }

/* 5) Événements : cartes plus serrées */
.event{padding:.85rem 1rem;gap:.8rem}
.event h3{font-size:1.02rem;margin:.1rem 0 .25rem}
.event p{font-size:.9rem;margin:.15rem 0}
.events{gap:.6rem}

/* 6) Prédications : grille dense */
.preds{gap:.7rem}
.pred{padding:.85rem 1rem}

/* 7) Dons : la plus longue section — resserrée */
.give{gap:.9rem}
.give__card{padding:1.1rem 1.15rem}
.give__card h3{font-size:1.05rem;margin:0 0 .4rem}
.give__card p{font-size:.9rem;margin:.2rem 0}
.donate{margin-top:.7rem}
.donate__amounts{gap:.4rem;margin-bottom:.55rem}
.donate__a{padding:.5rem .2rem}
.donate__freq{margin-bottom:.6rem}
.donate__row{margin-bottom:.6rem}
.donate__manual{margin-top:.7rem;padding-top:.7rem}

/* 8) Contact / Inscription : plus compacts */
.contact__form label,.join__form label{margin-bottom:.5rem}
.contact__form input,.contact__form textarea{padding:.6rem .75rem}

/* Accordéon « Autres moyens de donner » (replié par défaut) */
.give__card--acc{padding:.9rem 1.15rem}
.give__card--acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-height:44px}
.give__card--acc summary::-webkit-details-marker{display:none}
.give__card--acc summary h3{margin:0;font-size:1.02rem}
.give__card--acc summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--blue);font-weight:700;line-height:1}
.give__card--acc[open] summary::after{content:"–"}
.give__acc-body{padding-top:.6rem}

/* Accueil encore plus compact */
.hero__halo{display:none}
.hero__lead{font-size:.98rem;margin:.5rem 0 0}
.hero__actions{margin-top:.9rem;gap:.5rem}
.next-service{margin-top:.7rem}
@media (max-width:640px){
  .hero{padding-top:1.4rem;padding-bottom:1.2rem}
  .hero__title{font-size:clamp(1.7rem,7vw,2.2rem)}
}

/* À propos : piliers en 2 colonnes sur mobile */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.pillars > *{padding:.9rem}
.pillars h3{font-size:1rem;margin:.2rem 0 .3rem}
.pillars p{font-size:.87rem;line-height:1.45;margin:0}

/* Contact : infos en 2 colonnes sur mobile */
.contact__grid{gap:1rem}
.contact__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.contact__info > *{padding:.7rem .8rem}

/* Carrousel : garder les diapositives contenues (pas de débordement horizontal) */
.carou{overflow:hidden}

/* Contact : éviter qu'une longue adresse email déborde */
.contact__info > *{min-width:0}
.contact__info a,.contact__info p{overflow-wrap:anywhere;word-break:break-word}

/* =========================================================================
   COMPACTAGE DE LA PAGE D'ACCUEIL
   Inspiration : sites chrétiens denses (grilles plutôt que longues sections).
   Objectif : page plus courte, information plus dense, sans rien supprimer.
   ========================================================================= */

/* 1) Sections plus serrées (le plus gros levier : 13 sections) */
.section{padding:2.6rem 1.25rem}
.section__head{margin-bottom:1.5rem}
.section__head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.section__sub{font-size:.94rem;margin-top:.3rem}

/* 2) Hero plus court : on voit le contenu tout de suite */
.hero{padding:2.8rem 1.25rem 2.2rem}
.hero__title{font-size:clamp(1.9rem,4.4vw,3rem)}
.hero__sub{font-size:1rem;margin-top:.5rem}
.hero__logo{max-width:120px}

/* 3) Sur grand écran : deux sections côte à côte au lieu d'empilées */
@media (min-width:900px){
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;
       max-width:var(--maxw);margin:0 auto;padding:2.6rem 1.25rem}
  .duo > .section{padding:0;max-width:none}
  .duo > .section .section__head{text-align:left;margin-bottom:1rem}
}

/* 4) Grilles plus denses (davantage de cartes par ligne) */
@media (min-width:900px){
  .preds{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
  .events{gap:.9rem}
}

/* 5) Pied de page plus compact (25 % de vide mesuré) */
.footer{padding:2rem 1.25rem}
.footer__nav{margin:.6rem 0}

/* 6) Carrousel un peu moins haut */
.carou__slide{height:min(46vh,400px)}

@media (max-width:640px){
  .section{padding:2.1rem 1rem}
  .section__head{margin-bottom:1.2rem}
  .hero{padding:2.2rem 1rem 1.8rem}
}

/* Deux colonnes : formulaires Contact + Inscription */
@media (min-width:900px){
  .duo--forms{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;max-width:none}
  .duo--forms > .section{padding:2.6rem 1.5rem;max-width:none;margin:0}
  .duo--forms .section__head{text-align:left;margin-bottom:1.2rem}
  .duo--forms .section--join{border-radius:0}
}
/* Mobile : n'afficher qu'un aperçu de la galerie */
/* Aperçu limité (mobile) : les éléments au-delà de la limite sont repliés */
/* Aperçu limité : le reste se déplie au clic (page plus courte) */
.is-limited > *:nth-child(n+5){display:none}
#liste-evenements.is-limited   > *:nth-child(n+3){display:none}
#liste-predications.is-limited > *:nth-child(n+4){display:none}
#liste-invites.is-limited      > *:nth-child(n+5){display:none}
#liste-galerie.is-limited      > *:nth-child(n+9){display:none}
@media (max-width:640px){ #liste-galerie.is-limited > *:nth-child(n+5){display:none} }
.voirplus{display:block;margin:1rem auto 0;padding:.7rem 1.4rem;min-height:44px;
  border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:10px;font-weight:700;cursor:pointer}
/* le bouton « Voir plus » reste utile aussi sur ordinateur */

/* =========================================================================
   COMPACTAGE MOBILE — page plus courte, tout reste accessible
   ========================================================================= */
@media (max-width:899px){
  /* Accueil : aller à l'essentiel plus vite */
  .hero{padding:1.9rem 1rem 1.6rem}
  .hero__title{font-size:clamp(1.7rem,6.4vw,2.1rem);margin:0 0 .7rem}
  .hero__lead{font-size:.96rem;margin:0 auto 1.1rem}
  .hero__logo{max-width:96px}
  .hero__halo{width:360px;height:360px}

  /* Carrousel : hauteur raisonnable */
  .carou__slide{height:min(34vh,300px)}

  /* Sections resserrées */
  .section{padding:1.8rem 1rem}
  .section__head{margin-bottom:1rem}
  .section__head h2{font-size:1.35rem}
  .section__sub{font-size:.9rem}

  /* Cartes et formulaires plus compacts */
  .card,.give__card{padding:1rem}
  .contact__form label,.join__form label{margin-bottom:.55rem}
  .contact__form input,.contact__form textarea{padding:.6rem .7rem}
  .contact__form textarea{rows:3}
  .pred__media{min-height:100px}
  .event{padding:.8rem}
  .footer{padding:1.6rem 1rem}
}

/* Garde-fou : aucun débordement horizontal, même sur très petit écran */
html{overflow-x:clip} body{overflow-x:clip}
.carou{overflow:hidden}

/* =========================================================================
   CORRECTIFS D'AFFICHAGE (retours du site en ligne)
   ========================================================================= */

/* 1) Texte d'accueil : centré comme le titre (il était décalé à gauche) */
.hero__inner{text-align:center}
.hero__lead{margin-left:auto;margin-right:auto;text-align:center}
.hero__actions{justify-content:center}

/* 2) « Nos actions » : les photos étaient énormes (pleine largeur) */
#liste-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
#liste-galerie .shot{margin:0}
#liste-galerie .shot img{width:100%;height:200px;object-fit:cover;display:block}
@media (min-width:1200px){ #liste-galerie .shot img{height:220px} }
@media (max-width:640px){
  #liste-galerie{grid-template-columns:repeat(2,1fr);gap:.6rem}
  #liste-galerie .shot img{height:140px}
}
#liste-galerie figcaption{font-size:.82rem;padding:.5rem .6rem;line-height:1.35}

/* Filtres par pays : lisibles (ils étaient minuscules) */
#pays-filters{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-bottom:1rem}
#pays-filters button{padding:.45rem 1rem;min-height:44px;font-size:.88rem;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);font-weight:600;cursor:pointer}
#pays-filters button.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 3) Case à cocher de la demande de prière : à côté du texte, pas au-dessus */
.priere__check{display:flex!important;align-items:center;gap:.6rem;flex-direction:row!important;
  margin:.2rem 0 1rem;cursor:pointer}
.priere__check input{width:20px;height:20px;margin:0;flex:0 0 auto}
.priere__check span{font-size:.94rem;color:var(--ink-soft)}

/* 4) Section Contact : plus de grand vide entre les blocs */
.contact__info{align-content:start}
.contact__info > *{margin-bottom:.9rem}

/* Vignette vidéo dans les prédications */
.pred__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pred__play{position:relative;overflow:hidden}
.pred__playicon{position:relative;z-index:2}

/* Bouton de déclaration de don (aucun enregistrement au simple clic) */
.donate__confirm{display:block;margin:.7rem auto 0;padding:.55rem 1.1rem;min-height:44px;font-size:.88rem}
.donate__confirm[disabled]{opacity:.75;cursor:default}


/* Les formulaires partagent la même présentation */
.form-base label{display:block;margin-bottom:.8rem}
.form-base label > span{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem;color:var(--navy)}
.form-base input,.form-base textarea{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);
  border-radius:10px;font-size:1rem;font-family:inherit;background:#fff}
.form-base input:focus,.form-base textarea:focus{outline:2px solid var(--blue);outline-offset:1px}


/* Case à cocher de la prière : à gauche du texte (corrige l'écrasement par .form-base) */
.form-base label.priere__check{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 1.1rem;cursor:pointer}
.form-base label.priere__check > span{display:inline;margin:0;font-weight:500;color:var(--ink-soft);font-size:.94rem}
.form-base label.priere__check input{width:20px;height:20px;flex:0 0 auto;margin:0;padding:0}

/* =========================================================================
   ÉVÉNEMENTS : centrés, 2 par ligne sur grand écran
   ========================================================================= */
#liste-evenements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;
  max-width:1000px;margin:0 auto;align-items:start}
@media (max-width:860px){ #liste-evenements{grid-template-columns:1fr;max-width:620px} }
#liste-evenements .event{margin:0;height:100%}
.event-filters{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-bottom:1.2rem}

/* Filtres pays : toujours visibles (même avec un seul pays) */
#pays-filters:empty{display:none}

/* =========================================================================
   CORRECTIFS D'AFFICHAGE (retours du 6 août)
   ========================================================================= */

/* 1) Événements : centrés, 2 par ligne sur grand écran */
#liste-evenements{display:grid;grid-template-columns:1fr;gap:1rem;max-width:1060px;margin:0 auto}
@media (min-width:900px){ #liste-evenements{grid-template-columns:repeat(2,minmax(0,1fr))} }
#liste-evenements .event{margin:0;height:100%}

/* 2) Filtres (pays et catégories) : toujours visibles et centrés */
#pays-filters,.event-filters{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:0 auto 1.1rem}
#pays-filters:empty{display:none}

/* 3) Case à cocher « demande confidentielle » : alignée avec le texte */
.priere__check{display:flex;align-items:center;gap:.6rem;justify-content:flex-start;
  margin:.3rem 0 1.1rem;cursor:pointer;text-align:left}
.priere__check input{width:20px;height:20px;margin:0;flex:0 0 auto}
.priere__check > span{display:inline;margin:0;font-weight:400;font-size:.94rem;color:var(--ink-soft)}
.form-base .priere__check > span{display:inline;margin-bottom:0}

/* 4) « À propos » et « En direct » : pleine largeur, l'un sous l'autre */
#about,#live{max-width:none}
#about .section__head,#live .section__head{text-align:center}

/* Liens email/téléphone : zone tactile suffisante (mobile) */
a[href^="mailto:"],a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}

/* ===== Page Prédications : vignette dimensionnée (l'image ne prend plus tout l'écran) ===== */
#liste .pred{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;align-items:start}
#liste .pred__media{position:relative;width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--navy);min-height:0}
#liste .pred__media img,#liste .pred__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#liste .pred__media--play{cursor:pointer}
#liste .pred__playicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 6px 18px rgba(0,0,0,.32);transition:transform .18s ease}
#liste .pred__media--play:hover .pred__playicon{transform:translate(-50%,-50%) scale(1.12)}
#liste .pred__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
#liste .pred__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){ #liste .pred{grid-template-columns:1fr} #liste .pred__media{aspect-ratio:16/10} }

/* En direct : cadre 16:9 borné (jamais géant) */
.live__frame{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;height:auto;border-radius:14px;overflow:hidden;background:#0d1233}
.live__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Champ téléphone (indicatif + numéro) */
.tel-field{display:flex;gap:.4rem;align-items:stretch}
.tel-field__code{flex:0 0 auto;max-width:120px;border:1px solid var(--line);border-radius:8px;background:var(--ivory-2,#f7f4ec);padding:.5rem .4rem}
.tel-field__num{flex:1 1 auto;min-width:0}