/* =========================================================================
   ACCUEIL DENSE — feuille commune aux options A et B
   Principe : des grilles côte à côte au lieu de longues sections empilées.
   ========================================================================= */

/* --- Bouton « Faire un don » permanent dans l'en-tête --- */
.nav__don{background:var(--gold);color:#3a2a00;border-radius:999px;padding:.5rem 1.1rem;
  font-weight:800;font-size:.9rem;white-space:nowrap;min-height:44px;display:inline-flex;
  align-items:center;gap:.35rem;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.nav__don:hover{filter:brightness(1.06)}
@media (max-width:900px){ .nav__don{padding:.45rem .8rem;font-size:.82rem} }

/* --- Hero court --- */
.heroC{background:linear-gradient(160deg,#161C4F 0%,#232E80 55%,#0B6FB8 100%);color:#fff;
  padding:2.4rem 1.25rem 2rem;text-align:center;position:relative;overflow:hidden}
.heroC__in{max-width:1100px;margin:0 auto;display:grid;gap:1.4rem;align-items:center}
@media (min-width:940px){ .heroC__in{grid-template-columns:1.15fr .85fr;text-align:left} }
.heroC__devise{display:inline-block;background:var(--red);color:#fff;font-weight:800;
  letter-spacing:.06em;font-size:.72rem;padding:.35rem .9rem;border-radius:999px;text-transform:uppercase}
.heroC h1{font-family:Georgia,serif;font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.12;margin:.7rem 0 .4rem}
.heroC h1 em{font-style:normal;color:var(--gold);display:block}
.heroC__ref{color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:.08em}
.heroC__lead{color:#dbe3f7;font-size:1rem;line-height:1.6;margin:.7rem 0 1.2rem;max-width:56ch}
.heroC__btns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
@media (min-width:940px){ .heroC__btns{justify-content:flex-start} }
.heroC__logo{max-width:270px;width:100%;margin:0 auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
@media (max-width:939px){ .heroC__logo{max-width:170px} }

/* --- Bandes de sections compactes --- */
.bandeC{padding:2.2rem 1.25rem}
.bandeC--tint{background:var(--ivory-2,#F4EFE1)}
.bandeC__in{max-width:1160px;margin:0 auto}
.titreC{font-family:Georgia,serif;color:var(--navy);font-size:1.35rem;margin:0 0 .2rem;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.titreC a{font-family:inherit;font-size:.82rem;font-weight:700;color:var(--blue);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.sousC{color:var(--ink-soft);font-size:.9rem;margin:.1rem 0 1rem}

/* --- Deux colonnes générique --- */
.duoC{display:grid;gap:1.4rem}
@media (min-width:940px){ .duoC{grid-template-columns:1.25fr .75fr} }
@media (min-width:940px){ .duoC--egal{grid-template-columns:1fr 1fr} }

/* --- Carte blanche --- */
.carteC{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}

/* --- Réseaux en pastilles (inspiré des sites de ministère) --- */
.reseaux{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:520px){ .reseaux{grid-template-columns:repeat(4,1fr)} }
@media (min-width:940px){ .reseaux{grid-template-columns:repeat(2,1fr)} }
.reseau{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  padding:.8rem .5rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  text-decoration:none;color:var(--navy);font-weight:700;font-size:.84rem;min-height:44px}
.reseau:hover{border-color:var(--blue);transform:translateY(-2px);transition:.2s}
.reseau span{font-size:.72rem;color:var(--ink-soft);font-weight:500}
.reseau .rond{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1rem;font-weight:800}

/* --- Prédications en vignettes --- */
.predsC{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){ .predsC{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .predsC{grid-template-columns:repeat(3,1fr)} }

/* --- Événements compacts --- */
.evC{display:flex;gap:.8rem;align-items:center;padding:.75rem;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:.6rem}
.evC__date{flex:0 0 58px;text-align:center;background:var(--navy);color:#fff;border-radius:10px;padding:.45rem .2rem}
.evC__date b{display:block;font-size:1.15rem;line-height:1}
.evC__date span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}
.evC__txt{flex:1;min-width:0}
.evC__txt strong{display:block;color:var(--navy);font-size:.96rem}
.evC__txt small{color:var(--ink-soft);font-size:.8rem;display:block;margin-top:.15rem}

/* --- Nos actions : grille serrée --- */
.actionsC{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media (min-width:640px){ .actionsC{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .actionsC{grid-template-columns:repeat(6,1fr)} }
.actionsC figure{margin:0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.actionsC img{width:100%;height:118px;object-fit:cover;display:block}
.actionsC figcaption{font-size:.74rem;padding:.4rem .5rem;color:var(--ink-soft);line-height:1.3}

/* --- Transparence des dons --- */
.transp{background:#fff;border-left:4px solid var(--gold);border-radius:10px;padding:.8rem 1rem;
  font-size:.88rem;color:var(--ink-soft);margin-top:1rem;line-height:1.55}

/* --- Pied de page riche --- */
.footC{background:var(--navy);color:#cdd6f2;padding:2.2rem 1.25rem 1.2rem}
.footC__in{max-width:1160px;margin:0 auto;display:grid;gap:1.6rem}
@media (min-width:760px){ .footC__in{grid-template-columns:1.4fr 1fr 1fr 1.2fr} }
.footC h4{color:#fff;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .7rem}
.footC a{color:#cdd6f2;text-decoration:none;display:block;padding:.22rem 0;font-size:.88rem}
.footC a:hover{color:var(--gold)}
.footC p{font-size:.86rem;line-height:1.6;margin:0}
.footC__bas{max-width:1160px;margin:1.6rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}

/* Mobile : listes et galerie plus courtes sur l'accueil */
@media (max-width:939px){
  .actionsC img{height:104px}
  .actionsC figure:nth-child(n+5){display:none}
  .bandeC{padding:1.6rem 1rem}
  .heroC{padding:1.8rem 1rem 1.5rem}
  .footC{padding:1.6rem 1rem 1rem}
  .footC__in{gap:1rem}
}

/* Zones tactiles : liens du pied de page et des réseaux */
.footC a{min-height:44px;display:flex;align-items:center}
.footC__bas a{display:inline-flex;min-height:44px;align-items:center}
.titreC a{min-height:44px}

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

/* =========================================================================
   NOS INVITÉS — 3 présentations au choix (réglées dans config.js)
   ========================================================================= */
/* 1) « cartes » (défaut) : grille de fiches */
.guests[data-vue="cartes"]{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:640px){ .guests[data-vue="cartes"]{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .guests[data-vue="cartes"]{grid-template-columns:repeat(3,1fr)} }

/* 2) « liste » : compact, une ligne par invité (idéal si beaucoup d'invités) */
.guests[data-vue="liste"]{display:flex;flex-direction:column;gap:.5rem}
.guests[data-vue="liste"] .guest{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;max-width:none}
.guests[data-vue="liste"] .guest__photo{width:46px;height:46px;flex:0 0 46px;margin:0;border-radius:50%}
.guests[data-vue="liste"] .guest h3{margin:0;font-size:.98rem}
.guests[data-vue="liste"] .guest p{margin:.1rem 0 0;font-size:.84rem}

/* 3) « defilant » : bande horizontale qui glisse (gain de place maximal) */
.guests[data-vue="defilant"]{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.5rem;scrollbar-width:thin}
.guests[data-vue="defilant"] .guest{flex:0 0 230px;scroll-snap-align:start;max-width:none;text-align:center}
.guests[data-vue="defilant"] .guest__photo{width:64px;height:64px;margin:0 auto .4rem;border-radius:50%}

/* Message urgent : bandeau rouge, visible mais respectueux */
.annonce--urgent{background:var(--red);color:#fff;font-weight:800;
  animation:urgent 2.4s ease-in-out infinite}
.annonce--urgent a{color:#fff;text-decoration:underline}
.annonce--urgent::before{content:"⚠ ";}
@keyframes urgent{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media (prefers-reduced-motion:reduce){ .annonce--urgent{animation:none} }

/* Pied de page court des pages dédiées : zone tactile suffisante */
.footC__bas a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}

/* =========================================================================
   IMAGES — RÈGLE LONG TERME
   -------------------------------------------------------------------------
   « entiere » (par défaut) : l'image est vue EN ENTIER, jamais coupée.
       Le cadre garde une taille fixe et le vide est comblé par un fond doux.
       → obligatoire pour les AFFICHES (elles contiennent du texte).
   « remplir »  : l'image remplit le cadre et peut être rognée sur les bords.
       → acceptable pour les photos d'ambiance, jamais pour du texte.
   Le choix se fait image par image dans l'espace admin.
   ========================================================================= */
.img--entiere,
.guest__photo.img--entiere{
  object-fit:contain !important;
  background:var(--ivory-2,#F4EFE1);
}

/* Par défaut : les photos REMPLISSENT le cadre (cover) — demandé par le client.
   (placé après .img--entiere : à spécificité égale, cette règle l'emporte) */
.carou__slide img{object-fit:contain;background:#161C4F}
.event__img{object-fit:cover !important;background:var(--ivory-2,#F4EFE1)}
.pred__thumb{object-fit:cover !important;background:#161C4F}

/* Galerie : images qui remplissent le cadre */
.actionsC img,#liste-galerie .shot img{object-fit:cover !important;background:var(--ivory-2,#F4EFE1)}

/* Agrandissement au clic : rien n'est jamais perdu */
.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(10,14,40,.92);display:grid;place-items:center;
  z-index:300;padding:1.2rem}
.lightbox img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:10px;
  box-shadow:0 12px 48px rgba(0,0,0,.5)}
.lightbox__leg{color:#fff;text-align:center;margin-top:.8rem;font-size:.92rem;max-width:70ch}
.lightbox__x{position:absolute;top:1rem;right:1rem;background:#fff;border:none;border-radius:50%;
  width:46px;height:46px;font-size:1.3rem;cursor:pointer;color:var(--navy)}

/* =========================================================================
   IMAGES : JAMAIS COUPÉES — solution long terme
   -------------------------------------------------------------------------
   Vos images vont du portrait très haut (0,46) au paysage large (2,22).
   Aucun cadre fixe ne peut toutes les contenir sans rogner.
   Solution : l'image entière est affichée (contain), et le vide autour est
   comblé par une copie floutée de la MÊME image. Résultat : rien n'est
   coupé, et le cadre reste régulier quel que soit le format envoyé.
   Cela fonctionnera aussi pour toutes vos futures photos.
   ========================================================================= */
.media{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  background-image:none !important;                 /* plus de bande grise floutée */
  background:var(--ivory-2,#F4EFE1);
  border-radius:10px 10px 0 0}
.media::before{content:none}                         /* voile sombre supprimé */
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}

/* Galerie « Nos actions » : cadre carré, image entière */
.actionsC .media,#liste-galerie .media{aspect-ratio:1/1}
#liste-galerie .shot img{height:auto}

/* Affiches (portrait) : cadre plus haut, affiche entière visible */
.media--affiche{aspect-ratio:3/4;border-radius:0;height:100%}
.carou__slide{height:auto}
.carou__slide .media--affiche{aspect-ratio:3/4;max-height:min(52vh,460px)}
@media (max-width:640px){ .carou__slide .media--affiche{max-height:44vh} }

/* Affiche « Nos rendez-vous » : fond flouté de l'affiche pour combler les bandes
   vides — l'affiche entière reste nette au-dessus (rien n'est rogné). */
.carou__slide .media--affiche{background:#161C4F;overflow:hidden}
.carou__slide .media--affiche::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--aff) center/cover no-repeat;filter:blur(22px) brightness(.5);
  transform:scale(1.14)}
.carou__slide .media--affiche>img{position:relative;z-index:1;background:none}

/* =========================================================================
   CORRECTIF : classes utilisées par les nouvelles pages mais jamais définies
   (c'est ce qui cassait l'en-tête et laissait des blocs sans mise en forme)
   ========================================================================= */

/* --- EN-TÊTE --- */
.nav__in{
  width:min(1240px, calc(100% - 40px));
  margin-inline:auto;
  padding:.6rem 0;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:nowrap;
}
.brand__logo{width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:8px}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt strong{font-family:Georgia,serif;font-size:1.08rem;color:var(--navy)}
.brand__txt span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600}
.nav__links{margin-left:auto;font-size:.94rem;gap:1.15rem}
.nav__in .lang{flex:0 0 auto}
.nav__in .nav__don{flex:0 0 auto}

@media (max-width:1100px){
  .nav__links{gap:.8rem;font-size:.86rem}
  .nav__in{gap:.7rem}
}
@media (max-width:880px){
  .nav__in{flex-wrap:wrap;gap:.5rem .8rem;padding:.5rem 0}
  .nav__links{order:3;width:100%;margin-left:0;overflow-x:auto;white-space:nowrap;
    padding-bottom:.2rem;scrollbar-width:none}
  .nav__links::-webkit-scrollbar{display:none}
  .lang{margin-left:auto}
}

/* --- BLOCS DES NOUVELLES PAGES --- */
.live__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#0f1430;box-shadow:var(--shadow)}
.live__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.carrousel{margin-top:.4rem}
.give__card--form{height:100%}

.priere__form,.contact__form{width:100%}
.chk{display:flex;align-items:center;gap:.5rem;margin:.25rem 0;font-size:.9rem;cursor:pointer}
.chk input{width:18px;height:18px;flex:0 0 auto;margin:0}

.retour{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:600;
  text-decoration:none;margin-bottom:.6rem}
.pg{width:min(1160px, calc(100% - 40px));margin-inline:auto;padding:1.6rem 0 3rem}
.pg__head{margin-bottom:1.2rem}
.barre{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.barre input[type=search]{flex:1;min-width:190px;padding:.6rem .8rem;border:1.5px solid var(--line);
  border-radius:10px;font-size:.95rem}
.barre select{padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;
  font-size:.9rem;background:#fff;min-height:44px}
.cpt{font-size:.85rem;color:var(--ink-soft);margin:.2rem 0 1rem}

/* --- LARGEUR : utiliser tout l'écran disponible --- */
.bandeC__in{width:min(1240px, calc(100% - 40px));max-width:none;margin-inline:auto}
.heroC__in{width:min(1240px, calc(100% - 40px));max-width:none;margin-inline:auto}
.footC__in,.footC__bas{width:min(1240px, calc(100% - 40px));max-width:none;margin-inline:auto}

/* =========================================================================
   ÉVÉNEMENTS : cartes lisibles (le texte était écrasé à ~70px de large)
   ========================================================================= */
#liste-evenements .event{
  display:grid;
  /* affiche · pastille de date · TEXTE (le texte prend toute la place restante) */
  grid-template-columns:auto auto minmax(0,1fr);
  gap:.9rem;align-items:start;
  padding:1rem;height:auto;
}
#liste-evenements .event__img{width:96px;height:96px;flex:none;border-radius:10px}
#liste-evenements .event__date{width:96px;min-width:0;padding:.5rem .3rem;border-radius:10px}
#liste-evenements .event__body{min-width:0}   /* autorise le texte à s'étendre */
#liste-evenements .event h3{font-size:1.05rem;margin:.15rem 0 .3rem;line-height:1.25}
#liste-evenements .event p{font-size:.88rem;line-height:1.5}
#liste-evenements .event__meta{font-size:.84rem;line-height:1.6}

/* Quand il y a À LA FOIS une affiche et un bloc date, on empile les deux visuels */
#liste-evenements .event__visuels{display:flex;flex-direction:column;gap:.4rem;width:96px}

/* Un seul événement par ligne tant que la place manque */
@media (max-width:1200px){ #liste-evenements{grid-template-columns:1fr} }
@media (max-width:520px){
  #liste-evenements .event{grid-template-columns:auto minmax(0,1fr);gap:.7rem;padding:.8rem}
  #liste-evenements .event__date{display:none}   /* trop étroit : on garde l'affiche seule */
  #liste-evenements .event__img,#liste-evenements .event__date,
  #liste-evenements .event__visuels{width:72px}
  #liste-evenements .event__img{height:72px}
}

/* La liste d'événements occupe déjà une demi-colonne : une seule carte par ligne */
#liste-evenements{grid-template-columns:minmax(0,1fr) !important;max-width:none}

/* Très petit écran : l'affiche passe au-dessus, le texte prend toute la largeur */
@media (max-width:400px){
  #liste-evenements .event{grid-template-columns:minmax(0,1fr)}
  #liste-evenements .event__img{width:100%;height:150px}
  #liste-evenements .event__date{display:none}
}

/* =========================================================================
   INSCRIPTION : libellés visibles (ils étaient invisibles)
   ========================================================================= */
.join__row{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:640px){ .join__row{grid-template-columns:1fr 1fr} }
.join__row label{display:block;margin:0}
.join__row label > span{display:block;font-weight:600;font-size:.88rem;margin-bottom:.3rem;color:var(--navy)}
.join__row input{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;font-size:1rem}
#join .chk{margin:.7rem 0 1rem;font-size:.88rem;color:var(--ink-soft)}
#join .chk input{accent-color:var(--navy)}

/* =========================================================================
   NOS INVITÉS : cartes compactes, 4 par ligne (avant : très hautes)
   ========================================================================= */
#liste-invites{display:grid !important;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
#liste-invites .guest{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.35rem;padding:.9rem .7rem;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;max-width:none;height:auto;min-height:0;
}
#liste-invites .guest__photo{width:58px;height:58px;flex:0 0 58px;margin:0;border-radius:50%;object-fit:cover}
#liste-invites .guest h3{margin:.15rem 0 0;font-size:.95rem;line-height:1.25}
#liste-invites .guest p{margin:0;font-size:.8rem;line-height:1.4;color:var(--ink-soft)}
#liste-invites .guest__role{font-size:.74rem;font-weight:700;color:var(--blue);letter-spacing:.02em}
@media (max-width:520px){ #liste-invites{grid-template-columns:repeat(2,1fr)} }

/* Invités : au maximum 4 par ligne, texte de présentation limité à 3 lignes */
@media (min-width:1040px){ #liste-invites{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:640px) and (max-width:1039px){ #liste-invites{grid-template-columns:repeat(3,minmax(0,1fr))} }
#liste-invites .guest h3{font-size:.92rem}
#liste-invites .guest p:not(.guest__role){
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.78rem;line-height:1.35
}
#liste-invites .guest__photo--empty{display:grid;place-items:center;background:var(--navy);color:var(--gold);font-size:1.2rem}

/* Prédication visée depuis l'accueil : mise en évidence */
.pred--vise{outline:3px solid var(--gold);outline-offset:3px;border-radius:14px;
  animation:visee 2.2s ease-out 1}
@keyframes visee{0%{background:#fff8e1}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.pred--vise{animation:none}}
.pred__lien{color:inherit;text-decoration:none}
.pred__lien:hover{color:var(--blue);text-decoration:underline}

/* Titre de prédication cliquable : zone tactile suffisante */
.pred__lien{display:inline-flex;align-items:center;min-height:44px}

/* Compteur quand une légende porte plusieurs photos (2/5, 3/5…) */
.shot__n{display:inline-block;background:var(--ivory-2,#F4EFE1);color:var(--ink-soft);
  font-size:.68rem;font-weight:700;padding:.05rem .4rem;border-radius:99px;margin-left:.2rem}

/* =========================================================================
   3) INSCRIPTION : les champs n'avaient pas de bordure (règle border:0)
   ========================================================================= */
.join__form .join__row input[type=text],
.join__form .join__row input[type=email]{
  border:1.5px solid var(--line) !important;
  border-radius:10px;background:#fff;color:var(--ink);
  padding:.7rem .8rem;width:100%;
}
.join__form .join__row input:focus{outline:2px solid var(--blue);outline-offset:1px}
#join .join__row label > span{color:var(--navy)}

/* =========================================================================
   4) NOS ACTIONS : plus de bande de fond visible sous la photo
      Le cadre prend la couleur de la carte : l'image reste entière,
      mais on ne voit plus de « partie grise ».
   ========================================================================= */
.actionsC img,
#liste-galerie .shot img,
#liste-galerie .shot .media,
.actionsC .media{background:#fff !important}
#liste-galerie .shot,.actionsC figure{background:#fff}

/* Groupe de photos partageant une légende */
.shot__n{display:inline-block;font-size:.68rem;font-weight:700;color:var(--ink-soft);
  background:#eceef5;border-radius:99px;padding:.05rem .4rem;margin-left:.2rem}
/* Vignettes dans l'espace admin */
.multi-liste{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.multi-vig{position:relative;display:inline-block}
.multi-vig img{width:74px;height:56px;object-fit:cover;border-radius:8px;border:1.5px solid var(--line)}
.multi-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:none;background:#B71C1C;color:#fff;font-size:.7rem;cursor:pointer;line-height:1}

/* =========================================================================
   HYBRIDE — Nos émissions (étagère), Événements pleine largeur, Participez
   ========================================================================= */

/* --- Nos émissions : étagère horizontale qui défile (flèches sur le bord) --- */
.emrail{position:relative}
.emtrack{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.2rem .2rem .6rem}
.emtrack::-webkit-scrollbar{display:none}
.emcard{flex:0 0 auto;width:180px;scroll-snap-align:start;text-align:center;text-decoration:none}
.emposter{position:relative;height:228px;border-radius:14px;overflow:hidden;
  display:flex;align-items:flex-end;box-shadow:0 4px 12px rgba(0,0,0,.10)}
.emposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.emposter__glow{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.5) 100%)}
.emposter__title{position:relative;z-index:2;padding:.7rem;color:#fff;text-align:left;width:100%;
  font-family:Georgia,serif;font-weight:800;font-size:1.12rem;line-height:1.06;
  text-shadow:0 1px 4px rgba(0,0,0,.45)}
.emposter__title small{display:block;font-family:inherit;font-weight:600;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.92;margin-top:.25rem}
.emcard__label{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.6rem;
  font-weight:700;color:var(--navy);font-size:.9rem;min-height:44px}
.emcard__ic{width:20px;height:20px;border-radius:50%;flex:none}
.emedge{position:absolute;top:114px;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);font-size:1.3rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.16);z-index:5}
.emedge:hover{background:var(--navy);color:#fff}
.emedge:active{transform:translateY(-50%) scale(.95)}
.emedge--l{left:-8px}
.emedge--r{right:-8px}
@media (max-width:520px){
  .emcard{width:150px}
  .emposter{height:196px}
  .emedge{top:98px}
}

/* --- Événements : pleine largeur, grille multi-colonnes + 1re carte « à la une »
       (limité à l'ACCUEIL via #events ; la page evenements.html reste inchangée) --- */
#events #liste-evenements{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr)) !important;
  gap:1rem;max-width:none;margin:0;
}
@media (max-width:720px){ #events #liste-evenements{grid-template-columns:1fr !important} }
@media (min-width:940px){
  #events #liste-evenements .event:first-child{grid-column:1 / -1}
  #events #liste-evenements .event:first-child .event__img,
  #events #liste-evenements .event:first-child .event__date{width:150px}
  #events #liste-evenements .event:first-child .event__img{height:150px}
}

/* --- Participez : sous-titres + colonnes équilibrées alignées en haut --- */
.titreC--sub{font-size:1.1rem;margin-top:.2rem}
.participezC{align-items:start}

/* ---- Don : champ à remplir/corriger mis en rouge ---- */
.champ-invalide{
  border-color:#c0392b !important;
  background:#fdecea !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.16) !important;
}

/* ---- Prédications (accueil) : cartes captivantes, cliquables vers la page ---- */
#liste-predications .pred{
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
#liste-predications .pred:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(20,29,71,.16);
}
#liste-predications .pred__media{display:flex;align-items:center;justify-content:center}
#liste-predications .pred__thumb{object-fit:cover;background:#161C4F}   /* la vignette remplit le cadre */
#liste-predications .pred__playicon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.32);transition:transform .18s ease;
}
#liste-predications .pred:hover .pred__playicon{transform:translate(-50%,-50%) scale(1.12)}
#liste-predications .pred__cta{
  display:inline-block;margin-top:.55rem;color:var(--blue,#3d76d6);font-weight:600;font-size:.92rem;
}
#liste-predications .pred:hover .pred__cta{text-decoration:underline}
.give__solo{max-width:560px;margin:0 auto}

/* ============================================================
   CORRECTIFS (cover complet, live 16:9, cohérence tailles)
   ============================================================ */

/* 1) Photos remplissent leur cadre — SANS les événements (vignette 96px gérée à part) */
.emposter img,
#liste-predications .pred__thumb,
#liste-galerie .shot img,
.actionsC img{ object-fit:cover !important; width:100% !important; height:100% !important; }
/* Événements : la vignette garde sa taille propre (cover, sans forcer 100%) */
#liste-evenements .event__img,
#liste-evenements .event__visuels img{ object-fit:cover !important; }

/* Vignette prédication : cadre à hauteur fixe pour un rendu homogène */
#liste-predications .pred__media{ min-height:0; aspect-ratio:1/1; }
@media (max-width:760px){ #liste-predications .pred__media{ aspect-ratio:16/10; } }

/* Page prédications : la grande image d'en-tête ne doit pas déborder l'écran */
.pred__media img, .pred-detail img, .pred__hero img{ object-fit:cover; }

/* 2) « En direct » : iframe en ratio 16:9 propre, jamais géant */
.live__frame{ position:relative; width:100%; max-width:640px; aspect-ratio:16/9; height:auto !important;
  border-radius:14px; overflow:hidden; background:#0d1233; }
.live__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 3) Émissions : mêmes tailles/positions, cartes régulières */
#liste-emissions .emcard{ width:176px; }
@media (max-width:640px){ #liste-emissions .emcard{ width:150px; } }

/* 4) Alignement mobile : rien ne dépasse */
img{ max-width:100%; }

/* ===== « En direct » : vignette de repli cliquable ===== */
.live__poster{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,#1a2a6b,#0d1233);overflow:hidden;padding:0}
.live__poster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.28;filter:saturate(1.1)}
.live__poster-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(13,18,51,.25),rgba(13,18,51,.72))}
.live__poster-play{position:relative;z-index:2;width:66px;height:66px;border-radius:50%;
  background:var(--gold,#e8ab30);color:#0d1233;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:transform .18s ease}
.live__poster:hover .live__poster-play{transform:scale(1.1)}
.live__poster-txt{position:relative;z-index:2;color:#fff;font-weight:600;font-size:1rem;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.live__fallback{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;
  background:rgba(13,18,51,.82);color:#fff;font-size:.85rem;padding:.5rem;text-decoration:none}
.live__fallback:hover{text-decoration:underline}

/* ===== 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:110px;border:1px solid #e7e0d0;border-radius:8px;background:#f7f4ec;padding:.4rem .3rem;font-size:.95rem}
.tel-field__num{flex:1 1 auto;min-width:0}

/* ===== Don : mention de transparence ===== */
.don-transparence{margin-top:1rem;padding-top:.9rem;border-top:1px solid #ece4d2;
  font-size:.82rem;line-height:1.5;color:#6b6b72}
.don-transparence p{margin:.35rem 0}
.don-transparence p:first-child{color:#4a4a55}

/* ===== Don : bouton info ⓘ + sélecteur de devise ===== */
.don-info-btn{border:0;background:none;color:var(--blue,#3d76d6);font-size:1rem;cursor:pointer;
  margin-left:.4rem;line-height:1;vertical-align:middle;padding:.2rem}
.don-info-btn:hover{opacity:.75}
.donate__cur-lbl{display:flex;align-items:center;gap:.5rem;margin:.4rem 0 .2rem;font-size:.85rem;color:#6b6b72}
.donate__currency{border:1px solid #e7e0d0;border-radius:8px;background:#f7f4ec;padding:.45rem .5rem;font-size:.95rem;min-height:40px}