/* =================================================================
   MARIE ARNAUD ISRAËL MINISTRIES — Feuille de style
   Version : 1.6
   Charte  : bleu royal · orange · blanc · gris clair
   Typo    : Sora (titres) · Inter (corps)

   Cette feuille est organisée par blocs. Les couches successives
   des versions 1.1 à 1.5 ont été fusionnées : chaque sélecteur
   n'apparaît plus qu'une seule fois, à sa place logique.

   SOMMAIRE
     01. Variables de la charte
     02. Base et réinitialisation
     03. Mise en page et utilitaires
     04. Boutons
     05. En-tête et navigation
     06. Bannières (hero)
     07. Sections
     08. Cartes et piliers
     09. Fondateur et parcours
     10. Activités
     11. Bloc RIJ, programme et intervenants
     12. Témoignages
     13. Actualités, pagination et article
     14. Galerie et vidéos
     15. Emplacements médias
     16. Formulaires et billetterie
     17. Messages système
     18. Carte de localisation
     19. Pied de page
     20. Page d'erreur
     21. Accessibilité
   ================================================================= */

/* =================================================================
   01. VARIABLES DE LA CHARTE
   ================================================================= */
:root {
  --royal-900: #14235c;
  --royal:     #1e3a8a;
  --royal-600: #2545a8;
  --royal-500: #2563eb;
  --royal-050: #eef2ff;

  --orange:     #f97316;
  --orange-600: #ea6a0a;
  --orange-050: #fff3e9;
  --orange-800: #9a4a06; /* texte : 5,8:1 sur --orange-050 */
  --muted-fort: #55637a; /* --muted, mais tenable sur fond teinte */

  --ink:    #0f172a;
  --muted:  #64748b;
  --line:   #e2e8f0;
  --paper:  #f1f5f9;
  --white:  #ffffff;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow:    0 18px 40px -22px rgba(20, 35, 92, .45);
  --shadow-sm: 0 8px 24px -16px rgba(20, 35, 92, .5);
  --shadow-card: 0 16px 40px rgba(17, 42, 78, .07);
  --container: 1180px;
}

/* =================================================================
   02. BASE ET RÉINITIALISATION
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  margin: 0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--royal-900);
}

a { color: var(--royal-500); text-decoration: none; }
a:hover { color: var(--royal); }

img { max-width: 100%; height: auto; }

/* =================================================================
   03. MISE EN PAGE ET UTILITAIRES
   ================================================================= */
.container-x {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.text-muted-x { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.prose { max-width: 760px; }
.prose p { margin-bottom: 1rem; }

.badge-soft {
  background: var(--orange-050); color: var(--orange-600);
  border-radius: 999px; padding: .25rem .7rem;
  font-size: .78rem; font-weight: 600;
}

/* Sur-titre orange présent au-dessus de la plupart des titres */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Sora", sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-600);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--orange);
  display: inline-block;
}

/* Citation encadrée */
.quote-x {
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--orange);
  background: var(--orange-050);
  font-family: "Sora", sans-serif;
  color: var(--royal-900);
}

@media (max-width: 620px) {
  .text-muted-x { font-size: .96rem; }
}

/* =================================================================
   04. BOUTONS
   ================================================================= */
.btn {
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  padding: .72rem 1.5rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-royal { background: var(--royal); color: #fff; }
.btn-royal:hover { background: var(--royal-600); color: #fff; box-shadow: var(--shadow-sm); }

.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-600); color: #fff; box-shadow: var(--shadow-sm); }

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

.btn-light-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-light-ghost:hover { background: #fff; color: var(--royal); }

.btn-block { width: 100%; }

/* =================================================================
   05. EN-TÊTE ET NAVIGATION
   ================================================================= */
.site-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-bar { min-height: 72px; }

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}
.site-logo picture { display: block; line-height: 0; }
.site-logo img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 270px;
  object-fit: contain;
}

.nav-links { display: flex; gap: .8rem; align-items: center; }
.nav-links a {
  color: var(--ink); font-weight: 500; font-size: .93rem;
  padding: .5rem .8rem; border-radius: 8px;
}
.nav-links a:hover { background: var(--royal-050); color: var(--royal); }
.nav-links a.active { color: var(--royal); font-weight: 600; }

.nav-cta { white-space: nowrap; font-size: .86rem; padding: .72rem 1rem; }

.nav-toggle { display: none; background: none; border: 0; padding: .4rem; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--royal-900); margin: 5px 0; border-radius: 2px;
}

@media (max-width: 1199px) {
  .site-logo img { height: 40px; max-width: 215px; }
  .nav-links { gap: .62rem; }
  .nav-links > a:not(.nav-cta) { font-size: .82rem; }
}

@media (max-width: 992px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .6rem 20px 1rem; gap: .2rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem .8rem; }
  .site-logo img { height: 40px; max-width: 220px; }
}

@media (max-width: 991px) {
  .nav-cta { margin-top: .6rem; width: 100%; text-align: center; }
}

@media (max-width: 620px) {
  .nav-cta { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .site-logo img { height: 36px; max-width: 185px; }
}

/* =================================================================
   06. BANNIÈRES (HERO)
   ================================================================= */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(249,115,22,.35), transparent 60%),
    linear-gradient(135deg, var(--royal-900), var(--royal) 55%, var(--royal-600));
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .4;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.7rem); margin: .6rem 0 1rem; }
.hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,.86); max-width: 620px; }
.hero .eyebrow { color: #ffd7b0; }
.hero .eyebrow::before { background: #ffd7b0; }

.hero-inner { position: relative; padding: 5.5rem 0 5rem; z-index: 2; }

/* Variante compacte : billetterie, contact, mentions légales */
.hero-compact { padding: 3.5rem 20px 3rem; position: relative; z-index: 2; }
.hero-compact h1 { margin-top: .6rem; }

/* Hero avec photo de fond */
.hero-media { min-height: 620px; display: flex; align-items: center; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,25,70,.94) 0%, rgba(20,35,92,.78) 48%, rgba(20,35,92,.2) 100%);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.hero-badge {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius); padding: 1rem 1.2rem; backdrop-filter: blur(6px);
  max-width: 260px;
  display: flex; flex-direction: column;
}
.hero-badge strong { font-size: 1.15rem; }
.hero-badge span { font-size: .88rem; color: rgba(255,255,255,.76); }
.mini-label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #ffd7b0;
}

/* Bannière des pages intérieures */
.inner-hero {
  background: linear-gradient(135deg, var(--royal-900), var(--royal));
  color: #fff; position: relative; overflow: hidden;
}
.inner-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.inner-hero p { color: rgba(255,255,255,.82); font-size: 1.08rem; }
.media-inner-hero { min-height: 430px; display: flex; align-items: end; }
.inner-hero-content { position: relative; z-index: 2; padding-bottom: 4rem; }

@media (max-width: 900px) {
  .hero-media { min-height: 680px; }
  .hero-overlay { background: rgba(20,35,92,.82); }
}
@media (max-width: 768px) {
  .hero-badge { display: none; }
}
@media (max-width: 620px) {
  .hero-media { min-height: 620px; }
}

/* =================================================================
   07. SECTIONS
   ================================================================= */
.section { padding: 5.5rem 0; }
.section.paper { background: var(--paper); }

.section-head { max-width: 760px; margin-bottom: 3.25rem; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: .5rem 0 .6rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

.section-title-sm { font-size: 1.5rem; }
.section-title-xs { font-size: 1.3rem; margin-bottom: 1rem; }

@media (max-width: 991px) { .section { padding: 4.5rem 0; } }
@media (max-width: 900px) { .section { padding: 4rem 0; } }

/* =================================================================
   08. CARTES ET PILIERS
   ================================================================= */
.card-x {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; height: 100%;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card-x:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card-x h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.card-x p { color: var(--muted); margin: 0; font-size: .96rem; }
.card-x .card-heading { font-size: 1.4rem; }

/* Encadré informatif sans effet de survol */
.card-soft {
  background: var(--royal-050); border: none; border-radius: var(--radius);
  padding: 1.6rem; height: 100%;
}
.card-soft .card-soft-title {
  font-family: "Sora", sans-serif; font-weight: 600; color: var(--royal-900);
}

/* Vision / Mission / Valeurs */
.pillar { border-left: 3px solid var(--orange); padding-left: 1.1rem; }
.pillar h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.pillar p { color: var(--muted); margin: 0; }

/* Listes d'informations pratiques */
.info-list { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: .95rem; }
.info-list-lg { list-style: none; padding: 0; margin-top: .75rem; line-height: 2; }
.step-list {
  padding-left: 1.1rem; margin: .6rem 0 0;
  color: var(--muted); font-size: .92rem; line-height: 1.8;
}

/* =================================================================
   09. FONDATEUR ET PARCOURS
   ================================================================= */
.founder-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) 1.15fr;
  gap: 4rem;
  align-items: center;
}
.founder-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 3rem;
  align-items: center;
  padding: 4.5rem 0;
}
.founder-hero-grid .portrait-placeholder {
  min-height: 520px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}
.founder-hero-grid .portrait-placeholder strong,
.founder-hero-grid .portrait-placeholder span { color: rgba(255,255,255,.55); }

.timeline-x { margin-top: 2rem; display: grid; gap: 1rem; }
.timeline-x > div {
  display: grid; grid-template-columns: 58px 1fr; gap: .8rem 1rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: 14px;
}
.timeline-x span {
  grid-row: 1/3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--royal); color: #fff; font-weight: 700;
}
.timeline-x h3, .timeline-x p { margin: 0; }
.timeline-x p { color: var(--muted); }

@media (max-width: 900px) {
  .founder-grid, .founder-hero-grid { grid-template-columns: 1fr; }
  .founder-hero-grid { padding: 3rem 0; }
}
@media (max-width: 620px) {
  .founder-grid { gap: 2rem; }
}

/* =================================================================
   10. ACTIVITÉS
   ================================================================= */
.activity-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; height: 100%;
  box-shadow: var(--shadow-card);
}
.activity-card h3 { font-size: 1.08rem; }
.activity-card p { color: var(--muted); margin: 0; }

/* =================================================================
   11. BLOC RIJ, PROGRAMME ET INTERVENANTS
   ================================================================= */
.rij {
  background: linear-gradient(135deg, var(--royal), var(--royal-600));
  color: #fff; border-radius: var(--radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 1.1fr .9fr;
  box-shadow: var(--shadow);
}
.rij .body { padding: 2.6rem; }
.rij .body h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.rij .meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0 1.6rem; }
.rij .meta div { min-width: 120px; }
.rij .meta .k {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #ffd7b0;
}
.rij .meta .v { font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.05rem; }
.rij .poster { background: var(--orange); display: grid; place-items: center; padding: 1.4rem; }
.rij .poster img { border-radius: 14px; box-shadow: var(--shadow); }

@media (max-width: 900px) { .rij { grid-template-columns: 1fr; } }

/* Programme jour par jour */
.programme { display: grid; gap: 1rem; }
.programme-day {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow-card);
}
.programme-day > h3 {
  font-size: 1.05rem; margin: 0 0 .9rem;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.programme-day .day-tag {
  background: var(--royal-050); color: var(--royal);
  border-radius: 999px; padding: .15rem .7rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.programme-slots { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.programme-slots li {
  display: grid; grid-template-columns: 110px 1fr; gap: 1rem;
  padding-bottom: .55rem; border-bottom: 1px dashed var(--line);
  font-size: .94rem; color: var(--muted);
}
.programme-slots li:last-child { border-bottom: 0; padding-bottom: 0; }
.programme-slots .hour {
  font-family: "Sora", sans-serif; font-weight: 600; color: var(--royal-900);
}

@media (max-width: 560px) {
  .programme-slots li { grid-template-columns: 1fr; gap: .15rem; }
}

/* Orateurs et chantres */
.speakers-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem;
}
.speaker { text-align: center; }
.speaker .speaker-photo {
  aspect-ratio: 1; border-radius: 50%; margin-bottom: .9rem; overflow: hidden;
}
.speaker h3 { font-size: 1rem; margin: 0 0 .2rem; }
.speaker p { color: var(--muted); font-size: .88rem; margin: 0; }

/* =================================================================
   12. TÉMOIGNAGES
   ================================================================= */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
.testimonial {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.6rem 1.5rem; position: relative;
  box-shadow: var(--shadow-card);
}
.testimonial::before {
  content: "“";
  font-family: "Sora", sans-serif; font-size: 3.4rem; line-height: 1;
  color: var(--orange); opacity: .35;
  position: absolute; top: .6rem; left: 1.2rem;
}
.testimonial blockquote {
  margin: 1.2rem 0 1.2rem; padding: 0; border: 0;
  color: var(--ink); font-size: .98rem; line-height: 1.75;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: .8rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}
.testimonial .avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
}
.testimonial .who {
  font-family: "Sora", sans-serif; font-weight: 600;
  color: var(--royal-900); font-size: .93rem;
}
.testimonial .where { color: var(--muted); font-size: .82rem; }

/* =================================================================
   13. ACTUALITÉS, PAGINATION ET ARTICLE
   ================================================================= */
.news-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .18s, box-shadow .18s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card .content { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-card .date {
  font-size: .78rem; color: var(--orange-600); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Le niveau de titre varie selon la page : h2 sur la liste des
   actualités, h3 lorsque les cartes sont imbriquées dans une section. */
.news-card h2, .news-card h3 { font-size: 1.12rem; margin: 0; }
.news-card h2 a, .news-card h3 a { color: inherit; }
.news-card h2 a:hover, .news-card h3 a:hover { color: var(--royal-500); }
.news-card p { color: var(--muted); font-size: .94rem; margin: 0; }
.news-card .more {
  margin-top: auto; font-weight: 600; font-family: "Sora", sans-serif; font-size: .9rem;
}

/* Pagination */
.pagination-x {
  display: flex; justify-content: center; align-items: center;
  gap: .4rem; margin-top: 3rem; flex-wrap: wrap;
}
.pagination-x a, .pagination-x span {
  min-width: 42px; height: 42px; padding: 0 .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  font-family: "Sora", sans-serif; font-weight: 600; font-size: .9rem;
}
.pagination-x a:hover { border-color: var(--royal-500); color: var(--royal); }
.pagination-x [aria-current="page"] {
  background: var(--royal); border-color: var(--royal); color: #fff;
}
.pagination-x .is-disabled { color: var(--muted); opacity: .5; pointer-events: none; }

/* Page détail d'un article */
.article-header { max-width: 780px; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
  align-items: center; margin-bottom: 1rem;
  font-size: .85rem; color: rgba(255,255,255,.8);
}
.article-meta .tag {
  background: rgba(255,255,255,.14); border-radius: 999px; padding: .2rem .8rem;
}
.article-cover { min-height: 420px; border-radius: var(--radius-lg); }
.article-body { max-width: 760px; }
.article-body h2 { font-size: 1.4rem; margin: 2.2rem 0 .8rem; }
.article-body p { color: var(--muted); margin-bottom: 1rem; }
.article-share {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem;
}
.article-back { margin-top: 2rem; }

/* =================================================================
   14. GALERIE ET VIDÉOS
   ================================================================= */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem;
}
.gallery-item {
  border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1;
  background: var(--paper); position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .cap {
  position: absolute; inset: auto 0 0 0; padding: .6rem .8rem;
  background: linear-gradient(transparent, rgba(15,23,42,.75));
  color: #fff; font-size: .85rem;
  z-index: 4;
}

.cat-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.cat-tab {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .4rem 1rem; font-size: .9rem; font-weight: 600;
  color: var(--muted); cursor: pointer; font-family: "Sora", sans-serif;
}
.cat-tab.active { background: var(--royal); color: #fff; border-color: var(--royal); }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

/* Grande vidéo accompagnée de deux photos */
.feature-video-layout {
  display: grid; grid-template-columns: 1.45fr .75fr; gap: 1.5rem; align-items: stretch;
}
.feature-video-layout > .video-placeholder { min-height: 430px; aspect-ratio: auto; }
.feature-photo-stack { display: grid; gap: 1.25rem; }
.feature-photo-stack .wide-media { min-height: 202px; }

.media-feature-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; }

@media (max-width: 900px) {
  .media-feature-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .feature-video-layout { grid-template-columns: 1fr; }
  .feature-video-layout > .video-placeholder { min-height: auto; aspect-ratio: 16/9; }
  .feature-photo-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .video-grid { grid-template-columns: 1fr; }
  .feature-photo-stack { grid-template-columns: 1fr; }
}

/* =================================================================
   15. EMPLACEMENTS MÉDIAS
   Un emplacement affiche un repère tant que le fichier attendu est
   absent. Dès que l'image ou la vidéo est déposée au chemin indiqué
   par data-media-path, elle recouvre le repère automatiquement.
   ================================================================= */
.media-placeholder {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: .45rem;
  border: 1px solid rgba(15,42,79,.1);
  background: linear-gradient(145deg, #eef3f9, #dfe8f3);
  color: var(--royal);
  overflow: hidden;
}
.media-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,58,138,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,138,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.media-placeholder > * { position: relative; z-index: 1; }
.media-placeholder strong { font-family: "Sora", sans-serif; font-size: .82rem; letter-spacing: .12em; }
.media-placeholder span { font-size: .78rem; color: var(--muted); max-width: 80%; }
.media-icon { font-size: 2rem; }
.play-circle {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--royal); color: #fff; padding-left: 4px;
  box-shadow: var(--shadow-sm);
}

/* Substitution automatique du média.
   Le média est présent dans le document mais transparent tant que le
   fichier n'est pas confirmé chargé : le repère reste donc visible, sans
   aplat gris intermédiaire. On utilise l'opacité et non display:none,
   car un élément sans boîte ne déclenche jamais le chargement différé
   (loading="lazy") ni le préchargement des vidéos. */
.media-slot { position: relative; }
.media-slot > .media-file {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 3; background: #e8edf7;
  opacity: 0; pointer-events: none;
}
.media-slot > .media-video { object-fit: contain; background: #0f172a; }
.media-slot.media-loaded > .media-file { opacity: 1; pointer-events: auto; }
.media-slot.media-loaded > :not(.media-file) { opacity: 0; pointer-events: none; }
.media-slot > * { transition: opacity .2s ease; }
.media-file[alt=""] { color: transparent; }

/* Déclinaisons par emplacement */
.hero-placeholder {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  background: linear-gradient(135deg, #182b6a, #244aa4);
}
.hero-placeholder strong,
.hero-placeholder span,
.hero-placeholder .media-icon { color: rgba(255,255,255,.32); }

.page-banner {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  background: linear-gradient(135deg, #183070, #315ac1);
}
.page-banner strong, .page-banner span { color: rgba(255,255,255,.3); }

.portrait-placeholder { min-height: 470px; border-radius: var(--radius-lg); }
.activity-media {
  aspect-ratio: 4/3; border: 0; border-radius: 0;
  border-bottom: 1px dashed rgba(37,99,235,.2);
}
.news-media {
  aspect-ratio: 16/10; border: 0; border-radius: 0;
  border-bottom: 1px dashed rgba(37,99,235,.2);
}
.wide-media { min-height: 360px; border-radius: 22px; }
.video-placeholder { aspect-ratio: 16/9; border-radius: 18px; }
.gallery-ph { height: 280px; border: 0; border-radius: 0; }
.contact-banner { min-height: 360px; border-radius: var(--radius-lg); }
.qr-placeholder {
  width: min(260px, 100%); aspect-ratio: 1/1;
  margin: 1.2rem auto 0; border-radius: 18px;
}
.qr-placeholder > .media-file { object-fit: contain; background: #fff; padding: .5rem; }

@media (max-width: 900px) {
  .portrait-placeholder { min-height: 380px; }
}
@media (max-width: 620px) {
  .media-placeholder span { font-size: .72rem; }
  .gallery-ph { height: 220px; }
}

/* =================================================================
   16. FORMULAIRES ET BILLETTERIE
   ================================================================= */
.form-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem;
}
.form-label { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: .3rem; }
.form-control, .form-select {
  border-radius: var(--radius-sm); border: 1px solid var(--line); padding: .65rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--royal-500); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.req { color: var(--orange-600); }
.form-step-title { font-size: 1.15rem; }

/* Champ leurre : invisible à l'écran, mais rempli par les robots.
   On ne l'enlève pas du flux avec display:none, que certains automates
   détectent — il est simplement déplacé hors de l'écran. */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Formules de participation */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plan {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; cursor: pointer; display: block;
  transition: border-color .15s, background .15s;
}
.plan:hover { border-color: var(--royal-500); }
.plan input { position: absolute; opacity: 0; }
/* Le bouton radio est masqué : le contour de focus est reporté sur la carte. */
.plan:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.plan-inner { display: block; }
.plan .name, .plan .price, .plan .plan-detail { display: block; }
.plan .name { font-family: "Sora", sans-serif; font-weight: 700; color: var(--royal-900); }
.plan .price {
  font-size: 1.5rem; font-weight: 700; color: var(--royal); font-family: "Sora", sans-serif;
}
.plan .price small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.plan .plan-detail { color: var(--muted); font-size: .85rem; }
.plan.selected { border-color: var(--royal); background: var(--royal-050); }

@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* Options facultatives s'ajoutant au billet */
.option-grid { display: grid; gap: .7rem; }
.option-ligne {
  display: flex; align-items: center; gap: .9rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1.1rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.option-ligne:hover { border-color: var(--royal-500); }
.option-ligne:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.option-ligne:has(input:checked) { border-color: var(--royal); background: var(--royal-050); }
.option-texte { flex: 1; min-width: 0; }
.option-nom {
  display: block; font-family: "Sora", sans-serif;
  font-weight: 600; color: var(--royal-900);
}
.option-detail { display: block; color: var(--muted); font-size: .85rem; }
.option-prix {
  flex: 0 0 auto; font-family: "Sora", sans-serif;
  font-weight: 700; color: var(--royal);
}

/* Total récapitulatif */
.total-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: var(--royal-900); color: #fff;
}
.total-box span {
  font-family: "Sora", sans-serif; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: .8rem;
  color: rgba(255, 255, 255, .75);
}
.total-box strong { font-family: "Sora", sans-serif; font-size: 1.6rem; }

/* Opérateurs Mobile Money */
.op-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.op {
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: .8rem; text-align: center; cursor: pointer;
  font-weight: 600; font-size: .88rem; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.op input { position: absolute; opacity: 0; }
.op:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.op .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.op.selected { border-color: var(--royal); background: var(--royal-050); }

/* Opérateur dont le numéro n'a pas encore été renseigné par l'organisation */
.op-indisponible { opacity: .5; cursor: not-allowed; }
.op-note {
  display: block; font-weight: 500; font-size: .72rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.op.orange .dot { background: #f97316; }
.op.mtn   .dot { background: #facc15; }
.op.wave  .dot { background: #1dc4ff; }
.op.moov  .dot { background: #0ea5e9; }

@media (max-width: 640px) { .op-grid { grid-template-columns: repeat(2, 1fr); } }

/* Encart de paiement généré dynamiquement */
.pay-box {
  background: var(--royal-050); border: 1px dashed var(--royal-500);
  border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; margin-top: 1rem;
  display: none;
}
.pay-box.show { display: block; }
.pay-box .pay-title {
  font-family: "Sora", sans-serif; font-weight: 600;
  color: var(--royal-900); margin-bottom: .5rem;
}
.pay-box .row-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .35rem 0;
}
.pay-box .field-label { font-size: .78rem; color: var(--muted); }
.pay-box .num {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.2rem;
  color: var(--royal-900); letter-spacing: .02em;
}
.copy-btn {
  border: 0; background: var(--royal); color: #fff; border-radius: 8px;
  padding: .35rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.copy-btn.done { background: #16a34a; }

/* =================================================================
   17. MESSAGES SYSTÈME
   ================================================================= */
.flash-zone { padding-top: 1.5rem; }
.flash {
  border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: 1rem;
  font-size: .95rem; border: 1px solid transparent;
}
.flash.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.flash.error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Panneau de confirmation d'inscription */
.confirm-panel {
  border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: var(--radius);
  padding: 2rem 1.8rem; text-align: center;
}
.confirm-panel .confirm-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  background: #16a34a; color: #fff; font-size: 1.8rem;
}
.confirm-panel h3 { color: #065f46; font-size: 1.25rem; margin: 0 0 .6rem; }
.confirm-panel p { color: #047857; margin: 0 auto; max-width: 460px; }

/* Référence d'inscription mise en avant sur la page de confirmation */
.reference-box {
  margin-top: 1rem; padding: 1rem 1.2rem;
  border: 2px dashed var(--royal-500); border-radius: var(--radius-sm);
  background: var(--royal-050);
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: .08em; color: var(--royal-900);
  text-align: center; word-break: break-all;
}

/* Pastilles de statut d'une inscription */
.badge-statut {
  display: inline-block; border-radius: 999px;
  padding: .18rem .7rem; font-size: .78rem; font-weight: 600;
  font-family: "Sora", sans-serif; white-space: nowrap;
}
.badge-en_attente { background: #fff7ed; color: #9a3412; }
.badge-valide     { background: #ecfdf5; color: #065f46; }
.badge-refuse     { background: #fef2f2; color: #991b1b; }
.badge-annule     { background: var(--paper); color: var(--muted); }

/* Avertissements de la maquette */
.demo-warning {
  padding: 1rem 1.2rem; border-radius: 14px;
  background: #fff3e9; border: 1px solid #fed7aa; color: #9a3412;
}
.demo-note {
  margin: .35rem 0 .9rem; padding: .7rem .9rem; border-radius: 10px;
  background: #fff7ed; color: #9a3412; font-size: .88rem;
}
.media-support-section { padding-top: 3rem; padding-bottom: 3rem; }

/* =================================================================
   18. CARTE DE LOCALISATION
   ================================================================= */
.map-embed {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  aspect-ratio: 16/7; min-height: 320px;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; padding: 2rem;
  background: linear-gradient(145deg, #eef3f9, #dfe8f3); color: var(--royal);
}
.map-fallback strong { font-family: "Sora", sans-serif; font-size: .82rem; letter-spacing: .12em; }
.map-fallback span { font-size: .82rem; color: var(--muted); max-width: 420px; }

/* =================================================================
   19. PIED DE PAGE
   ================================================================= */
.site-footer {
  background: var(--royal-900); color: rgba(255,255,255,.8); padding: 3.2rem 0 1.6rem;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }

.footer-logo {
  display: inline-flex; align-items: center; margin-bottom: 1rem; text-decoration: none;
}
.footer-logo picture { display: block; line-height: 0; }
.footer-logo img {
  display: block; width: auto; height: 48px; max-width: 250px; object-fit: contain;
}

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-about { font-size: .93rem; max-width: 280px; }
.footer-list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .93rem;
}

.social { display: flex; gap: .5rem; }
.social a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: #fff;
}
.social a:hover { background: var(--orange); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.4rem; padding-top: 1.2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .85rem; color: rgba(255,255,255,.6);
}
.footer-bottom strong { color: #fff; }

@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo img { height: 42px; max-width: 220px; }
}

/* =================================================================
   20. PAGE D'ERREUR
   ================================================================= */
.error-page { text-align: center; padding: 6rem 0; }
.error-code {
  font-family: "Sora", sans-serif; font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 9rem); line-height: 1;
  color: var(--royal-050);
  -webkit-text-stroke: 2px var(--royal-500);
}
.error-page h1 { margin: 1rem 0 .8rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.error-page p { color: var(--muted); max-width: 520px; margin: 0 auto 2rem; }
.error-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* =================================================================
   21. ACCESSIBILITÉ
   ================================================================= */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--royal); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--radius-sm) 0;
  font-family: "Sora", sans-serif; font-weight: 600;
}
.skip-link:focus {
  left: 0; color: #fff;
}

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}

/* === Logo officiel MAIK / adaptation V1 projet 11 === */
.site-nav .nav-bar { min-height: 94px; }
.site-logo img { height: 78px; max-width: 150px; width: auto; object-fit: contain; }
.footer-logo { background:#fff; padding:.45rem .65rem; border-radius:12px; }
.footer-logo img { height: 82px; max-width: 160px; width:auto; object-fit:contain; }
@media (max-width: 1199px) { .site-logo img { height: 68px; max-width: 132px; } }
@media (max-width: 992px) { .site-nav .nav-bar { min-height: 82px; } .site-logo img { height: 62px; max-width: 122px; } }
@media (max-width: 560px) { .site-logo img { height: 54px; max-width: 108px; } }
.client-data-note { font-size:.82rem; color:var(--muted); margin-top:.6rem; }

/* Portrait officiel Frère Marie Arnaud Israël — intégration V1 */
.founder-grid .portrait-placeholder .media-image {
  object-fit: contain;
  object-position: center bottom;
  background: #eef1f4;
}
.founder-hero-grid .portrait-placeholder .media-image {
  object-fit: cover;
  object-position: center 16%;
}
@media (max-width: 900px) {
  .founder-grid .portrait-placeholder { min-height: 560px; }
  .founder-hero-grid .portrait-placeholder { min-height: 620px; }
}
@media (max-width: 620px) {
  .founder-grid .portrait-placeholder,
  .founder-hero-grid .portrait-placeholder { min-height: 500px; }
}

/* Ajustement du hero accueil pour la photo officielle générée le 14/08/2026 */
.hero-media .hero-placeholder .media-image {
  object-position: center center;
}
.hero-media .hero-inner {
  max-width: 720px;
}
@media (max-width: 900px) {
  .hero-media .hero-placeholder .media-image {
    object-position: 68% center;
  }
  .hero-overlay {
    background: linear-gradient(90deg, rgba(13,25,70,.95) 0%, rgba(20,35,92,.84) 58%, rgba(20,35,92,.50) 100%);
  }
}
@media (max-width: 620px) {
  .hero-media .hero-placeholder .media-image {
    object-position: 72% center;
  }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(13,25,70,.82) 0%, rgba(13,25,70,.9) 58%, rgba(13,25,70,.96) 100%);
  }
}


/* =================================================================
   AJUSTEMENTS PRODUCTION — 14/08/2026
   ================================================================= */

/* Navigation desktop : une seule ligne, sans compression du CTA. */
.site-nav .container-x {
  max-width: 1560px;
  padding-inline: 24px;
}
@media (min-width: 1101px) {
  .site-nav .nav-bar,
  .site-nav > .container-x {
    flex-wrap: nowrap !important;
  }
  .site-logo img {
    height: 52px;
    max-width: 235px;
  }
  .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: .12rem;
    min-width: 0;
  }
  .nav-links a {
    font-size: .80rem;
    padding: .46rem .48rem;
    white-space: nowrap;
  }
  .nav-cta {
    flex: 0 0 auto;
    font-size: .76rem;
    padding: .62rem .78rem;
    margin-left: .25rem !important;
  }
}

/* Dès que l'espace devient insuffisant, on passe au hamburger au lieu de
   laisser les éléments du menu revenir à la ligne. */
@media (min-width: 993px) and (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: .6rem 20px 1rem;
    gap: .2rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem .8rem; font-size: .9rem; }
  .nav-cta { width: 100%; text-align: center; margin-top: .5rem; }
}

/* Emplacements média : aspect éditorial, pas écran d'erreur. */
.media-placeholder {
  background:
    radial-gradient(circle at 18% 18%, rgba(37,99,235,.13), transparent 38%),
    linear-gradient(145deg, #f8fbff, #eef4fb);
  border-color: #d8e4f0;
}
.media-placeholder strong {
  color: var(--royal-900);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
}
.media-placeholder span {
  color: #718198;
}
.media-placeholder .media-icon {
  color: #8fa6c1;
}
.activity-media,
.news-media,
.gallery-ph {
  border-bottom: 1px solid #dbe6f1;
}

/* Informations encore en attente de validation. */
.footer-pending {
  margin: .7rem 0 0;
  max-width: 260px;
  color: rgba(255,255,255,.58);
  font-size: .82rem;
  line-height: 1.5;
}


/* HEADER LOGO V3 + HERO TEXTE */
@media (min-width:1101px){
  .site-logo img{
    width:310px!important;
    max-width:310px!important;
    height:auto!important;
    max-height:76px!important;
    object-fit:contain;
  }
  .site-nav .container-x,.site-nav .nav-bar{flex-wrap:nowrap!important}
  .nav-links{flex-wrap:nowrap!important;white-space:nowrap;gap:.10rem!important}
  .nav-links a{white-space:nowrap;font-size:.78rem!important;padding-inline:.44rem!important}
  .nav-cta{white-space:nowrap;flex:0 0 auto}
}
.hero,.home-hero{position:relative}
.hero-content{position:relative;z-index:3;max-width:650px}
.hero-kicker{
  display:inline-block;margin-bottom:1rem;color:#d8a92f;
  font-size:.82rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase
}
.hero-content h1,.hero h1{
  margin:0 0 1rem;max-width:760px;color:#fff;
  font-size:clamp(2.5rem,4.9vw,4.8rem);line-height:1.04;
  letter-spacing:-.035em;text-shadow:0 3px 18px rgba(0,0,0,.28)
}
.hero-lead{
  max-width:610px;margin:0 0 1.7rem;color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.65
}
.hero::after,.home-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(3,18,40,.78) 0%,rgba(3,18,40,.58) 28%,rgba(3,18,40,.20) 53%,rgba(3,18,40,0) 72%)
}
.hero>* ,.home-hero>*{position:relative;z-index:2}
@media(max-width:1100px){
  .site-logo img{width:235px!important;max-width:235px!important;height:auto!important}
}
@media(max-width:720px){
  .site-logo img{width:195px!important;max-width:195px!important}
  .hero-content{max-width:100%}
  .hero-content h1,.hero h1{font-size:clamp(2.1rem,10vw,3.25rem)}
  .hero::after,.home-hero::after{
    background:linear-gradient(90deg,rgba(3,18,40,.80) 0%,rgba(3,18,40,.62) 52%,rgba(3,18,40,.28) 100%)
  }
}


/* =========================================================
   CORRECTION HERO — 14/08/2026
   La photo reste le fond plein cadre du Hero.
   ========================================================= */
.hero,
.home-hero,
.hero-section {
  position: relative !important;
  overflow: hidden !important;
}

/* Cas de la structure actuelle : l'image du Hero ne doit jamais être
   rendue comme une vignette dans le flux. */
.hero > img,
.home-hero > img,
.hero-section > img,
.hero-media > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
}

/* Si le Hero est défini par background-image dans la feuille d'origine. */
.hero,
.home-hero {
  background-image:
    linear-gradient(90deg,rgba(3,18,40,.84) 0%,rgba(3,18,40,.66) 30%,rgba(3,18,40,.22) 56%,rgba(3,18,40,.04) 76%),
    url("../img/hero/hero-main.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* L'ancien pseudo-overlay est neutralisé car le gradient est maintenant
   directement associé au background. */
.hero::after,
.home-hero::after {
  display: none !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 720px !important;
}

.hero-kicker {
  display: block !important;
  margin: 0 0 16px !important;
  color: #e5b64c !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.hero-content h1,
.hero h1 {
  max-width: 720px !important;
  margin: 0 0 18px !important;
  font-size: clamp(2.65rem,4.25vw,4.15rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  color: #fff !important;
}

.hero-lead {
  max-width: 600px !important;
  margin-bottom: 24px !important;
  font-size: clamp(1rem,1.25vw,1.15rem) !important;
  line-height: 1.55 !important;
}

@media (min-width: 1200px) {
  .hero-content h1,
  .hero h1 {
    font-size: 3.75rem !important;
  }
}

@media (max-width: 720px) {
  .hero,
  .home-hero {
    background-position: 58% center !important;
  }
  .hero-content h1,
  .hero h1 {
    font-size: clamp(2.15rem,10vw,3rem) !important;
  }
}


/* ============================================================
   CORRECTION FINALE HERO + LOGO HEADER
   ============================================================ */

/* Logo agrandi sans casser le menu */
@media (min-width: 1101px) {
  .site-logo img {
    width: 355px !important;
    max-width: 355px !important;
    height: auto !important;
    max-height: 82px !important;
    object-fit: contain !important;
  }

  .site-nav .container-x,
  .site-nav .nav-bar {
    flex-wrap: nowrap !important;
  }

  .nav-links {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .08rem !important;
  }

  .nav-links a {
    white-space: nowrap !important;
    font-size: .77rem !important;
    padding-left: .42rem !important;
    padding-right: .42rem !important;
  }

  .nav-cta {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* Le Hero utilise uniquement le background, aucune vignette */
.hero,
.home-hero,
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg, rgba(3,18,40,.84) 0%, rgba(3,18,40,.64) 31%, rgba(3,18,40,.22) 56%, rgba(3,18,40,.03) 74%),
    url("../img/hero/hero-main.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Au cas où un ancien élément média subsiste dans le DOM */
.hero img[src*="hero-main"],
.home-hero img[src*="hero-main"],
.hero-section img[src*="hero-main"],
.hero-media,
.hero-image,
.hero-visual {
  display: none !important;
}

.hero::after,
.home-hero::after,
.hero-section::after {
  display: none !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 700px !important;
}

.hero-kicker {
  margin: 0 0 14px !important;
  color: #e2b24d !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.hero-content h1,
.hero h1 {
  margin: 0 0 18px !important;
  max-width: 700px !important;
  color: #fff !important;
  font-size: clamp(2.55rem, 4vw, 3.95rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.26) !important;
}

.hero-lead {
  max-width: 590px !important;
  margin-bottom: 24px !important;
  color: rgba(255,255,255,.94) !important;
  font-size: clamp(1rem, 1.2vw, 1.14rem) !important;
  line-height: 1.58 !important;
}

@media (max-width: 1100px) {
  .site-logo img {
    width: 250px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 720px) {
  .site-logo img {
    width: 205px !important;
    max-width: 205px !important;
  }

  .hero,
  .home-hero,
  .hero-section {
    background-position: 58% center !important;
  }

  .hero-content h1,
  .hero h1 {
    font-size: clamp(2.05rem, 9vw, 3rem) !important;
  }
}


/* ============================================================
   HERO RESTAURÉ — structure simplifiée et indépendante
   ============================================================ */
.hero-fixed{
  position:relative!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(2,16,37,.90) 0%,rgba(2,16,37,.72) 30%,rgba(2,16,37,.34) 54%,rgba(2,16,37,.08) 76%),
    url("../img/hero/hero-main.jpg") center center / cover no-repeat!important;
}
.hero-fixed::before,
.hero-fixed::after{
  display:none!important;
}
.hero-fixed .hero-inner{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:2rem!important;
  padding-top:48px!important;
  padding-bottom:48px!important;
}
.hero-fixed .hero-copy{
  max-width:690px!important;
}
.hero-fixed .hero-kicker{
  margin:0 0 15px!important;
  color:#e1b34e!important;
  font-size:.78rem!important;
  line-height:1.3!important;
  letter-spacing:.12em!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.hero-fixed h1{
  margin:0 0 18px!important;
  max-width:690px!important;
  color:#fff!important;
  font-size:clamp(2.6rem,4vw,3.95rem)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  text-shadow:0 3px 18px rgba(0,0,0,.28)!important;
}
.hero-fixed .lead{
  max-width:590px!important;
  margin:0 0 25px!important;
  color:rgba(255,255,255,.94)!important;
  font-size:clamp(1rem,1.25vw,1.15rem)!important;
  line-height:1.58!important;
}
.hero-fixed .hero-cta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.8rem!important;
}
.hero-fixed .hero-badge{
  position:static!important;
  flex:0 0 245px!important;
  align-self:center!important;
  margin:0!important;
  padding:18px 20px!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:16px!important;
  background:rgba(16,38,88,.58)!important;
  backdrop-filter:blur(8px)!important;
  color:#fff!important;
}
.hero-fixed .hero-badge strong,
.hero-fixed .hero-badge span{
  display:block!important;
}
.hero-fixed .hero-badge .mini-label{
  color:#f3c76b!important;
}
@media(max-width:900px){
  .hero-fixed{
    min-height:520px!important;
    background-position:58% center!important;
  }
  .hero-fixed .hero-inner{
    min-height:520px!important;
    align-items:flex-end!important;
  }
  .hero-fixed .hero-badge{
    display:none!important;
  }
}
@media(max-width:640px){
  .hero-fixed{
    min-height:500px!important;
    background:
      linear-gradient(90deg,rgba(2,16,37,.92) 0%,rgba(2,16,37,.72) 58%,rgba(2,16,37,.38) 100%),
      url("../img/hero/hero-main.jpg") 62% center / cover no-repeat!important;
  }
  .hero-fixed .hero-inner{
    min-height:500px!important;
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  .hero-fixed h1{
    font-size:clamp(2.1rem,10vw,3rem)!important;
  }
}

/* Header : logo légèrement agrandi, menu toujours sur une seule ligne */
@media(min-width:1101px){
  .site-logo img{
    width:360px!important;
    max-width:360px!important;
    height:auto!important;
    max-height:84px!important;
  }
}


/* ============================================================
   HEADER — AJUSTEMENT SELON LA MAQUETTE VALIDÉE
   Logo plus présent + menus plus lisibles sur une seule ligne
   ============================================================ */
@media (min-width: 1101px) {
  .site-nav > .container-x,
  .site-nav .container-x {
    max-width: 1560px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    min-height: 76px !important;
  }

  .site-logo {
    flex: 0 0 auto !important;
    margin-right: 26px !important;
  }

  .site-logo img {
    width: 390px !important;
    max-width: 390px !important;
    height: auto !important;
    max-height: 86px !important;
    object-fit: contain !important;
  }

  .nav-links {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .16rem !important;
    min-width: 0 !important;
  }

  .nav-links > a:not(.nav-cta) {
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    padding: .58rem .52rem !important;
    white-space: nowrap !important;
  }

  .nav-cta {
    flex: 0 0 auto !important;
    margin-left: .34rem !important;
    padding: .72rem .94rem !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* Entre 1101 et 1260 px : léger resserrement pour garder une seule ligne. */
@media (min-width: 1101px) and (max-width: 1260px) {
  .site-logo img {
    width: 350px !important;
    max-width: 350px !important;
  }

  .site-logo {
    margin-right: 15px !important;
  }

  .nav-links {
    gap: .06rem !important;
  }

  .nav-links > a:not(.nav-cta) {
    font-size: .79rem !important;
    padding-left: .38rem !important;
    padding-right: .38rem !important;
  }

  .nav-cta {
    font-size: .78rem !important;
    padding-left: .72rem !important;
    padding-right: .72rem !important;
  }
}

/* === RIJ 2026 CAMPAIGN MODE === */
.rij-campaign{background:#fff}.rij-hero{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(1,18,48,.96) 0%,rgba(1,24,62,.83) 34%,rgba(4,34,88,.36) 61%,rgba(4,34,88,.08) 100%),url("../img/rij/jour1/salle-temoignages.jpg") 50% 42%/cover no-repeat}.rij-hero-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:70px;padding-bottom:70px}.rij-hero-copy{max-width:720px;color:#fff}.rij-edition,.campaign-kicker{font-size:.8rem;letter-spacing:.15em;font-weight:800;color:#f6b800}.rij-hero h1{font-size:clamp(3.2rem,5.6vw,5.7rem);line-height:.93;letter-spacing:-.055em;margin:15px 0 22px;color:#fff;text-transform:uppercase}.rij-hero h1 span{color:#ff7a0a}.rij-theme{font-size:1.2rem;font-weight:600;max-width:610px;border-left:3px solid #f6b800;padding-left:16px}.rij-date-line{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0;color:#fff}.rij-date-line strong{font-size:1.15rem}.rij-date-line span{opacity:.9}.rij-count-card{min-width:220px;padding:22px;border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(7,25,68,.66);backdrop-filter:blur(10px);color:#fff}.rij-count-card span,.rij-count-card small{display:block}.rij-count-card span{font-size:.68rem;font-weight:800;color:#f6b800;letter-spacing:.1em}.rij-count-card strong{display:block;font-size:3rem;line-height:1;margin:10px 0}.rij-manifesto{padding:85px 0;background:linear-gradient(135deg,#071b4c,#064bb5);color:#fff;text-align:center}.rij-manifesto h2{font-size:clamp(2.7rem,5vw,5rem);text-transform:uppercase;margin:12px 0;color:#fff}.rij-manifesto p{max-width:760px;margin:0 auto;font-size:1.12rem;opacity:.9}.manifesto-word{margin-top:34px;font-size:clamp(1.3rem,2.5vw,2.3rem);font-weight:700}.manifesto-word strong{color:#ffbf00}.rij-experience .section-head,.rij-program .section-head{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}.rij-photo-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:270px 270px;gap:16px}.rij-photo{position:relative;overflow:hidden;border-radius:22px;margin:0}.rij-photo-large{grid-row:1/3}.rij-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s transform}.rij-photo:hover img{transform:scale(1.025)}.rij-photo figcaption{position:absolute;inset:auto 0 0;padding:55px 25px 22px;background:linear-gradient(transparent,rgba(1,16,45,.92));color:#fff}.rij-photo figcaption strong{display:block;font-size:1.45rem}.rij-photo figcaption span{opacity:.88}.rij-program{background:#f3f7ff}.rij-program-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}.rij-program-grid article{background:#fff;border-radius:22px;padding:28px;border:1px solid #dce6fa}.program-day{display:flex;align-items:center;gap:13px;color:#0d3182}.program-day b{font-size:3.5rem;line-height:1}.program-day span{font-size:.78rem;font-weight:800;letter-spacing:.08em}.rij-program-grid h3{margin-top:20px}.program-note{text-align:center;margin:25px auto 0;color:#667085;font-size:.9rem}.ticket-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.ticket-copy h2{font-size:clamp(2.5rem,4vw,4.2rem);margin:10px 0}.ticket-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.ticket-prices div{padding:20px;border-radius:16px;background:#071b4c;color:#fff}.ticket-prices span{display:block;color:#f6b800;font-size:.72rem;font-weight:800;letter-spacing:.08em}.ticket-prices strong{display:block;margin-top:7px;font-size:1.1rem}.ticket-warning{font-size:.82rem;color:#667085}.ticket-poster img{width:100%;border-radius:22px;box-shadow:0 25px 55px rgba(6,28,76,.18)}.rij-practical{background:#061a49;color:#fff}.rij-practical h2{color:#fff}.practical-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.practical-grid>div{padding:22px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.06)}.practical-grid span,.practical-grid b,.practical-grid small{display:block}.practical-grid span{font-size:1.6rem;margin-bottom:12px}.practical-grid small{margin-top:5px;opacity:.7}.rij-final{padding:90px 0;text-align:center;background:linear-gradient(135deg,#0759ca,#061a49);color:#fff}.rij-final>div>span{color:#f6b800;font-weight:800;font-size:.75rem;letter-spacing:.1em}.rij-final h2{font-size:clamp(3rem,5vw,5.4rem);line-height:.95;text-transform:uppercase;color:#fff;margin:18px 0}.rij-final p{font-size:1.1rem;margin-bottom:28px}
@media(max-width:900px){.rij-hero{min-height:650px;background-position:60% center}.rij-hero-inner{align-items:flex-end}.rij-count-card{display:none}.rij-photo-grid{grid-template-columns:1fr;grid-template-rows:420px 280px 280px}.rij-photo-large{grid-row:auto}.ticket-layout{grid-template-columns:1fr}.practical-grid{grid-template-columns:1fr 1fr}.rij-program-grid{grid-template-columns:1fr}}
@media(max-width:600px){.rij-hero{min-height:620px;background:linear-gradient(90deg,rgba(1,18,48,.96),rgba(1,24,62,.74)),url("../img/rij/jour1/salle-temoignages.jpg") 62% center/cover no-repeat}.rij-hero h1{font-size:clamp(2.8rem,14vw,4rem)}.rij-date-line{display:block}.rij-date-line>*{display:block;margin-bottom:5px}.rij-photo-grid{grid-template-rows:340px 240px 240px}.ticket-prices,.practical-grid{grid-template-columns:1fr}.rij-manifesto,.rij-final{padding:65px 0}}

/* RIJ 2026 — countdown détaillé + responsive smartphone */
.rij-count-card{min-width:390px!important;padding:24px!important;border-radius:22px!important;background:rgba(6,25,70,.80)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 44px rgba(0,0,0,.22)!important;backdrop-filter:blur(12px)!important}
.count-label{display:block;margin-bottom:14px;color:#f6b800;font-size:.72rem;font-weight:800;letter-spacing:.11em}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.count-unit{padding:13px 8px 11px;text-align:center;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.count-unit strong{display:block;color:#fff;font-size:2.15rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.count-unit small{display:block;margin-top:7px;color:rgba(255,255,255,.72);font-size:.58rem;font-weight:800;letter-spacing:.08em}
.count-sub{display:block;margin-top:12px;color:rgba(255,255,255,.82);font-size:.78rem}

@media(max-width:1100px){
.site-nav{position:sticky!important;top:0!important;z-index:1000!important;background:#fff!important;box-shadow:0 5px 18px rgba(7,27,76,.08)!important}
.site-nav .container-x{min-height:68px!important;padding-left:16px!important;padding-right:16px!important}
.site-logo img{width:220px!important;max-width:220px!important;max-height:58px!important}
.nav-toggle{width:46px!important;height:46px!important;border-radius:12px!important;border:1px solid #dce4ef!important;background:#fff!important;flex:0 0 46px!important}
.nav-links{position:absolute!important;top:100%!important;left:0!important;right:0!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:14px 16px 18px!important;background:#fff!important;border-bottom:1px solid #e3e8f0!important;box-shadow:0 18px 30px rgba(7,27,76,.12)!important;max-height:calc(100vh - 68px)!important;overflow-y:auto!important}
.nav-links.open{display:flex!important}.nav-links a{min-height:48px!important;display:flex!important;align-items:center!important;padding:12px 13px!important;border-radius:10px!important;font-size:.98rem!important}.nav-cta{width:100%!important;min-height:50px!important;margin:7px 0 0!important}
.rij-hero-inner{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}.rij-count-card{display:block!important;width:min(100%,520px)!important;min-width:0!important}
}

@media(max-width:640px){
body{overflow-x:hidden!important;padding-bottom:82px!important}.container-x{padding-left:16px!important;padding-right:16px!important}.site-logo img{width:185px!important;max-width:185px!important;max-height:52px!important}
.rij-hero{min-height:auto!important;background:linear-gradient(90deg,rgba(1,18,48,.96),rgba(1,24,62,.82)),url("../img/rij/jour1/salle-temoignages.jpg") 68% center/cover no-repeat!important}
.rij-hero-inner{padding-top:42px!important;padding-bottom:38px!important;gap:22px!important}.rij-hero h1{font-size:clamp(2.55rem,13vw,3.55rem)!important}.rij-theme{font-size:1rem!important;line-height:1.45!important}.rij-date-line{display:grid!important;gap:7px!important;margin:18px 0 20px!important}
.hero-cta{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.hero-cta .btn{width:100%!important;min-height:52px!important;font-size:1rem!important}
.rij-count-card{width:100%!important;padding:17px!important}.countdown-grid{gap:6px}.count-unit{padding:10px 4px 8px}.count-unit strong{font-size:1.6rem}.count-unit small{font-size:.48rem}
.rij-manifesto,.section,.rij-final{padding-top:56px!important;padding-bottom:56px!important}.rij-photo-grid,.rij-program-grid,.ticket-layout,.ticket-prices,.practical-grid{grid-template-columns:1fr!important}.rij-photo-grid{grid-template-rows:none!important}.rij-photo,.rij-photo-large{grid-row:auto!important;min-height:290px!important}.ticket-poster{order:-1!important}
.rij-mobile-sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;border-radius:17px;background:linear-gradient(135deg,#ff7a00,#ff9800);box-shadow:0 12px 30px rgba(255,122,0,.34);color:#fff;text-decoration:none}.rij-mobile-sticky-cta span{font-size:.72rem;font-weight:700}.rij-mobile-sticky-cta strong{font-size:.95rem}
}
@media(min-width:641px){.rij-mobile-sticky-cta{display:none!important}}

/* RIJ TIMER EVENT V3 */
.rij-count-event{position:relative!important;min-width:450px!important;max-width:500px!important;padding:26px 25px 23px!important;overflow:hidden!important;border:1px solid rgba(255,158,0,.9)!important;background:radial-gradient(circle at 100% 0%,rgba(255,122,0,.17),transparent 35%),linear-gradient(145deg,rgba(2,18,50,.97),rgba(4,26,70,.94))!important;box-shadow:0 0 28px rgba(255,122,0,.24),0 22px 50px rgba(0,0,0,.3)!important}
.count-badge{display:table;margin:0 auto 10px;padding:7px 15px 6px;border-radius:7px;background:#f6b800;color:#061a49;font-size:.78rem;font-weight:900;letter-spacing:.06em;transform:rotate(-1deg)}
.count-title{text-align:center;color:#fff;font-size:1.25rem;line-height:1.05;font-weight:900;font-style:italic;margin-bottom:18px}.count-title strong{color:#ff7417;font-size:1.42em}
.rij-count-event .countdown-grid{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr!important;align-items:center;gap:5px!important}.rij-count-event .count-unit{padding:14px 5px 11px!important;border-radius:10px!important;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.24)!important}.rij-count-event .count-unit strong{font-size:2.55rem!important;font-weight:900!important}.rij-count-event .count-unit small{color:#ffc400!important;font-size:.57rem!important}
.count-sep{color:#ff7417;font-style:normal;font-size:2.25rem;font-weight:900;line-height:1;margin-top:-15px;animation:rijBlink 1s steps(1,end) infinite;text-shadow:0 0 12px rgba(255,116,23,.55)}.count-seconds strong{animation:rijPulse 1s ease-out infinite}.rij-count-event .count-sub{text-align:center;color:#fff!important;font-size:.92rem!important;font-style:italic;font-weight:700;margin-top:17px!important}.count-brush{display:block;width:145px;height:4px;margin:9px auto 0;border-radius:50%;background:#f6b800;transform:skewX(-25deg);box-shadow:18px 3px 0 -1px #ff7417}
@keyframes rijBlink{0%,48%{opacity:1}49%,100%{opacity:.25}}@keyframes rijPulse{0%{transform:scale(1)}18%{transform:scale(1.07);color:#ffd33d}45%{transform:scale(1)}}
@media(max-width:1100px){.rij-count-event{width:min(100%,520px)!important;max-width:520px!important;min-width:0!important}}
@media(max-width:640px){.rij-count-event{width:100%!important;padding:19px 12px 17px!important;border-radius:17px!important}.count-badge{font-size:.68rem;padding:6px 12px}.count-title{font-size:1rem;margin-bottom:14px}.rij-count-event .countdown-grid{gap:3px!important}.rij-count-event .count-unit{padding:11px 2px 9px!important}.rij-count-event .count-unit strong{font-size:clamp(1.55rem,8vw,2.05rem)!important}.rij-count-event .count-unit small{font-size:.44rem!important}.count-sep{font-size:1.55rem;margin-top:-13px}.rij-count-event .count-sub{font-size:.8rem!important;margin-top:13px!important}}
@media(prefers-reduced-motion:reduce){.count-sep,.count-seconds strong{animation:none!important}}

/* RIJ 2026 — prédicateurs */
.rij-speakers{background:linear-gradient(180deg,#fff 0%,#f4f8ff 100%);overflow:hidden}
.rij-speakers .section-head{text-align:center;max-width:820px;margin:0 auto 34px}
.speaker-track{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:16px;align-items:stretch}
.speaker-card{position:relative;overflow:hidden;border-radius:22px;background:#071b4c;box-shadow:0 16px 38px rgba(7,27,76,.14);min-height:420px;isolation:isolate}
.speaker-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;display:block;transition:transform .35s ease}
.speaker-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(3,17,52,.92));z-index:1}
.speaker-card>div{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;color:#fff}
.speaker-card span{display:inline-block;background:#ff7108;padding:5px 8px;font-size:.62rem;font-weight:900;letter-spacing:.08em;border-radius:5px}
.speaker-card h3{color:#fff;font-size:1.12rem;line-height:1.16;margin:9px 0 0}
.speaker-card:hover img{transform:scale(1.025)}
.speaker-cta{margin-top:30px;padding:22px 26px;border-radius:20px;background:#071b4c;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.speaker-cta p{margin:0}.speaker-cta strong{font-size:1.12rem;color:#fff}
@media(max-width:1100px){.speaker-track{grid-template-columns:repeat(3,1fr)}.speaker-card{min-height:480px}}
@media(max-width:700px){.rij-speakers{padding-left:0;padding-right:0}.rij-speakers .section-head{padding:0 20px}.speaker-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 20px 18px;scrollbar-width:none}.speaker-track::-webkit-scrollbar{display:none}.speaker-card{flex:0 0 78vw;max-width:330px;min-height:455px;scroll-snap-align:center}.speaker-cta{margin:16px 20px 0;display:block;text-align:center;padding:20px}.speaker-cta .btn{margin-top:15px;width:100%}}


/* PRODUCTION — marie-arnaud-israel.org */
.production-ticket-box{
  margin-top:24px;
  padding:22px;
  border-radius:18px;
  background:#f5f8ff;
  border:1px solid #dce5f5;
}
.production-ticket-box h3{margin:0 0 14px;color:#071b4c}
.production-ticket-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.production-ticket-prices>div{padding:16px;border-radius:14px;background:#071b4c;color:#fff}
.production-ticket-prices span{display:block;color:#f6b800;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.production-ticket-prices strong{display:block;margin-top:6px;font-size:1.05rem}
.ticket-detail-note{font-size:.82rem;color:#667085}
@media(max-width:640px){.production-ticket-prices{grid-template-columns:1fr}}

/* Production RIJ — référence biblique */
.verse-ref{display:inline-block;margin-left:.35rem;font-size:.78em;font-weight:700;opacity:.82;white-space:nowrap}
@media(max-width:640px){.verse-ref{display:block;margin:.3rem 0 0}}

/* RIJ 2026 — packages */
.rij-packages{background:#f7f9ff}
.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.package-card{background:#fff;border:1px solid #e3e8f5;border-radius:20px;padding:24px;box-shadow:0 12px 30px rgba(11,35,84,.07);position:relative;overflow:hidden}
.package-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:#ff6b00}
.package-card.featured{border-color:#ffb276}
.package-name{display:block;font-weight:800;color:#102a63;letter-spacing:.04em;margin-bottom:10px}
.package-card strong{display:block;font-size:1.85rem;color:#f05a19;margin-bottom:14px}
.package-card p{font-weight:650;line-height:1.65;margin:0 0 8px;color:#17213b}
.package-card small{color:#68738b}
.package-action,.package-contact{text-align:center;margin-top:24px}
.package-contact{font-size:1.05rem}
@media(max-width:900px){.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.package-grid{grid-template-columns:1fr;gap:14px}.package-card{padding:20px}.package-card strong{font-size:1.65rem}}

/* Réseaux sociaux officiels — production 18/08 */
.footer-social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px auto 0;padding:0 16px 18px}
.social-link{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;text-decoration:none;font-size:.82rem;font-weight:700}
.social-link.facebook,.btn-facebook{background:#1877f2!important;color:#fff!important;border-color:#1877f2!important}
.social-f{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1877f2;font-family:Arial,sans-serif;font-size:17px;font-weight:900;line-height:1}
.social-follow-section{background:#f5f8ff}
.social-page-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 30px;background:#fff;border:1px solid #dfe7f5;border-radius:20px;box-shadow:0 12px 30px rgba(11,35,84,.06)}
.social-page-cta h2{margin:.35rem 0 .5rem}
.btn-facebook{display:inline-flex!important;align-items:center!important;gap:8px!important;white-space:nowrap!important}
.contact-social-panel{background:#f5f8ff}
.contact-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:850px;margin:25px auto 0}
.contact-social-grid>a{display:flex;align-items:center;gap:14px;padding:20px;border-radius:18px;background:#1877f2;color:#fff;text-decoration:none;box-shadow:0 12px 28px rgba(24,119,242,.18)}
.contact-social-grid .social-f{flex:0 0 34px;width:34px;height:34px;font-size:24px}
.contact-social-grid strong,.contact-social-grid small{display:block}
.contact-social-grid small{margin-top:3px;color:rgba(255,255,255,.82)}
@media(max-width:700px){.social-page-cta{flex-direction:column;align-items:flex-start;padding:22px}.social-page-cta .btn{width:100%;justify-content:center}.contact-social-grid{grid-template-columns:1fr}.footer-social-links{align-items:stretch}.social-link{justify-content:center}}

/* WhatsApp officiel RIJ 2026 */
.btn-whatsapp{background:#25D366!important;border-color:#25D366!important;color:#fff!important}
.ticket-contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.whatsapp-float{position:fixed;right:20px;bottom:22px;z-index:1250;display:flex;align-items:center;gap:9px;padding:10px 14px 10px 10px;border-radius:999px;background:#25D366;color:#fff!important;text-decoration:none!important;box-shadow:0 12px 30px rgba(0,0,0,.22);font-weight:800}
.wa-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#128C7E;font-size:.68rem;font-weight:900}
.wa-label{font-size:.85rem}
.contact-wa-card{background:#25D366!important}
@media(max-width:640px){
 .whatsapp-float{right:14px;bottom:88px;width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
 .whatsapp-float .wa-icon{width:38px;height:38px}
 .whatsapp-float .wa-label{display:none}
 .ticket-contact-actions{display:grid;grid-template-columns:1fr}
 .ticket-contact-actions .btn{width:100%}
}

/* =================================================================
   Rattachement à la Communauté Mère du Divin Amour — 20 août 2026
   Le ministère, Jeunesse 2000 et le RIJ en sont issus ; le site ne
   le disait nulle part.
   ================================================================= */
.footer-affiliation {
  font-size: .85rem;
  max-width: 300px;
  margin-top: .7rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.6;
}
.footer-affiliation a {
  color: rgba(255, 255, 255, .85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-affiliation a:hover { color: #fff; }

/* Précise où mène le bouton « S'inscrire en ligne » : il quitte le site. */
.ticket-note {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted, #64748b);
  margin: .5rem 0 0;
}

/* =================================================================
   PROGRAMME DU RIJ 2026 — 20 août 2026

   Pensé pour un téléphone tenu debout dans une salle : gros repères
   d'heure, séquence en cours bien visible, passé effacé.

   Quatre vues sous une barre collante — synthèse, samedi, dimanche,
   intervenants — avec recherche et filtres par famille. Sans JavaScript,
   tout s'affiche à la suite et reste lisible.
   ================================================================= */

.programme-hero .programme-lieu {
  margin-top: .6rem; color: rgba(255, 255, 255, .78);
  font-size: .95rem; font-weight: 600;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------
   La barre : onglets, outils, recherche
   --------------------------------------------------------------- */
.pg-barre {
  position: sticky; top: var(--hauteur-entete, 0px); z-index: 1035;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(17, 42, 78, .06);
}
.pg-barre .container-x { padding-top: .55rem; padding-bottom: .55rem; }

/* Les outils et la recherche, eux, defilent avec la page : on ne s en sert
   qu a l arrivee, et les garder colles couterait un cinquieme de l ecran. */
.pg-atelier {
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.pg-atelier .container-x { padding-top: .8rem; padding-bottom: .8rem; }

/* --- Onglets --- */
.pg-onglets {
  display: flex; gap: .45rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pg-onglets::-webkit-scrollbar { display: none; }
.pg-onglet {
  flex: 0 0 auto; text-align: left; cursor: pointer;
  border: 2px solid var(--line); background: var(--white); color: var(--muted);
  border-radius: 14px; padding: .5rem .85rem;
  font-family: inherit; line-height: 1.25;
  transition: background .18s, border-color .18s, color .18s;
}
.pg-onglet b {
  display: block; font-family: "Sora", sans-serif;
  font-weight: 700; font-size: .95rem; color: var(--ink);
}
.pg-onglet span { display: block; font-size: .72rem; opacity: .8; }
.pg-onglet:hover { border-color: var(--royal-500); }
.pg-onglet.actif {
  background: var(--royal); border-color: var(--royal); color: rgba(255, 255, 255, .8);
}
.pg-onglet.actif b { color: #fff; }

/* --- Outils --- */
.pg-outils {
  display: flex; gap: .4rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pg-outils::-webkit-scrollbar { display: none; }
.pg-outil {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: .38rem .85rem;
  min-height: 40px; display: inline-flex; align-items: center;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  transition: background .18s, border-color .18s, color .18s;
}
.pg-outil i { font-style: normal; margin-right: .18rem; }
.pg-outil:hover { border-color: var(--royal-500); background: var(--royal-050); }
.pg-outil.actif {
  background: var(--royal); border-color: var(--royal); color: #fff;
}
.pg-partage { margin-left: auto; }

/* --- Recherche --- */
.pg-recherche { position: relative; margin-top: .6rem; }
.pg-recherche input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem 2.4rem .6rem .9rem;
  font-family: inherit; font-size: .92rem; color: var(--ink);
  background: var(--paper);
}
.pg-recherche input:focus {
  outline: none; border-color: var(--royal-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.pg-effacer {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: var(--line); color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.pg-effacer:hover { background: var(--orange); color: #fff; }
.pg-resultat {
  margin: .5rem 0 0; font-size: .82rem; color: var(--royal);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Bandeau « en ce moment »
   --------------------------------------------------------------- */
.maintenant {
  position: sticky; top: calc(var(--hauteur-entete, 0px) + var(--hauteur-barre, 0px));
  z-index: 1030;
  background: var(--royal-900); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.maintenant .container-x {
  display: flex; align-items: center; gap: .7rem;
  padding-top: .65rem; padding-bottom: .65rem;
}
.maintenant-puce {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .35); flex: 0 0 auto;
}
.maintenant-texte {
  flex: 1 1 auto; font-size: .88rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maintenant-lien {
  flex: 0 0 auto; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); background: none; color: #fff;
  border-radius: 999px; padding: .22rem .85rem; min-height: 34px;
  font-family: inherit; font-size: .8rem; font-weight: 700;
}
.maintenant-lien:hover { background: rgba(255, 255, 255, .16); }
.maintenant.est-actif {
  background: var(--orange); color: var(--royal-900);
  border-bottom-color: rgba(20, 35, 92, .25);
}
.maintenant.est-actif .maintenant-puce {
  background: var(--royal-900); animation: pulsation 2s ease-in-out infinite;
}
.maintenant.est-actif .maintenant-lien {
  color: var(--royal-900); border-color: rgba(20, 35, 92, .45);
}
.maintenant.est-actif .maintenant-lien:hover { background: rgba(20, 35, 92, .12); }
@keyframes pulsation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.5); }
}

/* ---------------------------------------------------------------
   Vues
   --------------------------------------------------------------- */
.programme-section { padding-top: 2rem; }
.pg-titre {
  font-size: 1.35rem; margin: 0 0 .3rem;
}
.pg-chapeau { color: var(--muted); margin: 0 0 1.4rem; font-size: .95rem; }
.pg-note {
  margin-top: 1.6rem; font-size: .84rem; color: var(--muted); line-height: 1.6;
}

/* ---- Synthèse ---- */
.synth-theme {
  background: var(--royal-900); color: #fff;
  border-radius: var(--radius-lg); padding: 1.8rem 1.6rem;
  text-align: center; margin-bottom: 1.2rem;
}
.synth-theme .eyebrow { color: var(--orange); }
.synth-citation {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem); line-height: 1.35;
  margin: .7rem 0 .4rem;
}
.synth-ref { margin: 0; color: rgba(255, 255, 255, .7); font-size: .9rem; }

.synth-chiffres {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
}
.synth-chiffres li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem .5rem; text-align: center;
}
.synth-chiffres b {
  display: block; font-family: "Sora", sans-serif;
  font-size: 1.5rem; color: var(--royal);
}
.synth-chiffres span { font-size: .72rem; color: var(--muted); }

.phares { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .6rem; }
.phare {
  display: grid; grid-template-columns: 76px 1fr; gap: .9rem;
  align-items: start; cursor: pointer;
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--radius-sm); padding: .85rem .95rem;
  transition: box-shadow .18s, transform .18s;
}
.phare:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.phare-quand {
  border-right: 1px dashed var(--line); padding-right: .7rem;
  font-family: "Sora", sans-serif; line-height: 1.3;
}
.phare-quand b { display: block; font-size: .78rem; color: var(--royal); }
.phare-quand span { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.phare-etiquette {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-fort); margin-bottom: .2rem;
}
.phare-etiquette i { font-style: normal; margin-right: .2rem; }
.phare h3 { font-size: 1rem; margin: 0 0 .2rem; line-height: 1.35; }
.phare-qui { margin: 0; font-size: .84rem; font-weight: 700; color: var(--orange-800); }

.synth-jours { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.synth-jour {
  cursor: pointer; text-align: left;
  background: var(--royal-050); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem;
  font-family: inherit; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.synth-jour:hover { border-color: var(--royal-500); background: var(--white); }
.synth-jour b {
  display: block; font-family: "Sora", sans-serif;
  font-size: 1.05rem; margin-bottom: .15rem;
}
.synth-jour span { display: block; font-size: .85rem; color: var(--royal); font-weight: 600; }
.synth-jour em { display: block; font-size: .8rem; color: var(--muted-fort); font-style: normal; }

/* ---- En-tête de journée ---- */
.jour-entete {
  display: flex; gap: 1rem; align-items: flex-start;
  background: linear-gradient(135deg, var(--royal-050) 0%, var(--white) 70%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.jour-badge {
  flex: 0 0 auto; background: var(--royal); color: #fff;
  border-radius: 999px; padding: .35rem .8rem;
  font-family: "Sora", sans-serif; font-size: .78rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
}
.jour-entete h2 { font-size: 1.2rem; margin: 0 0 .25rem; }
.jour-lieu { margin: 0; font-size: .85rem; color: var(--royal); font-weight: 600; }
.jour-resume { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------
   Les créneaux
   --------------------------------------------------------------- */
.creneaux { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.creneau {
  display: grid; grid-template-columns: 84px 1fr; gap: .9rem;
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem .95rem;
  transition: opacity .2s, box-shadow .2s, border-color .2s;
}
.creneau-heure {
  border-right: 1px dashed var(--line); padding-right: .7rem;
  font-family: "Sora", sans-serif; line-height: 1.25;
}
.creneau-heure time {
  display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.creneau-fin { display: block; font-size: .8rem; color: var(--muted-fort); }
.creneau-duree {
  display: block; margin-top: .25rem;
  font-size: .68rem; color: var(--muted-fort); opacity: .85;
}
.creneau-etiquette {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-fort); margin-bottom: .2rem;
}
.creneau-etiquette i { font-style: normal; margin-right: .2rem; }
.creneau h3 { font-size: 1rem; margin: 0; line-height: 1.4; }
.creneau-verset {
  margin: .3rem 0 0; font-size: .88rem; font-style: italic;
  color: var(--muted-fort); line-height: 1.5;
}
.creneau-reference {
  margin: .15rem 0 0; font-size: .8rem; color: var(--royal); font-weight: 600;
}
.creneau-intervenant {
  margin: .35rem 0 0; font-size: .87rem; font-weight: 700; color: var(--orange-800);
}

/* --- Couleur par famille --------------------------------------------------
   La bordure gauche porte l'information : elle se lit du coin de l'œil, en
   défilant, sans avoir à relire les étiquettes. */
.creneau-enseignement { border-left-color: var(--orange); background: var(--orange-050); }
.creneau-atelier      { border-left-color: #7c3aed; background: #f7f3ff; }
.creneau-messe        { border-left-color: #b8860b; background: #fdf8e7; }
.creneau-louange      { border-left-color: #0f9b5c; background: #f0fbf5; }
.creneau-priere       { border-left-color: #0f9b5c; background: #f6fbf8; }
.creneau-temps-fort   { border-left-color: var(--royal-500); background: var(--royal-050); }
.creneau-concert      { border-left-color: #db2777; background: #fdf2f8; }
.creneau-pause        { border-left-color: #94a3b8; background: var(--paper); }
.creneau-accueil      { border-left-color: #94a3b8; }

.creneau-enseignement .creneau-etiquette { color: var(--orange-800); }
.creneau-atelier .creneau-etiquette      { color: #6d28d9; }
.creneau-messe .creneau-etiquette        { color: #7d5f00; }
.creneau-louange .creneau-etiquette,
.creneau-priere .creneau-etiquette       { color: #0b7a48; }
.creneau-temps-fort .creneau-etiquette   { color: var(--royal); }
.creneau-concert .creneau-etiquette      { color: #be185d; }

/* --- États ---------------------------------------------------------------- */
.creneau.est-passe { opacity: .45; }
.creneau.est-suivant { border-color: var(--royal-500); box-shadow: var(--shadow-sm); }
.creneau.est-en-cours {
  border-color: var(--orange); border-left-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
  position: relative;
}
.creneau.est-en-cours::after {
  content: "en cours"; position: absolute; top: -9px; right: 12px;
  background: var(--orange); color: #fff;
  border-radius: 999px; padding: .1rem .55rem;
  font-family: "Sora", sans-serif; font-size: .65rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}

/* --- Recherche et filtres ------------------------------------------------- */
.creneau.hors-recherche, .creneau.hors-filtre { display: none; }
.creneau.trouve { border-color: var(--royal-500); box-shadow: var(--shadow-sm); }
/* Pendant un tri, les deux journées s'affichent ensemble et leurs en-têtes
   deviennent des séparateurs. Le lieu et le résumé chiffré, eux, décriraient
   une journée que la liste ne montre plus : ils s'effacent. Et une journée
   dont il ne reste rien disparaît tout entière. */
.pg-en-recherche .jour-resume, .pg-en-filtre .jour-resume,
.pg-en-recherche .jour-lieu,   .pg-en-filtre .jour-lieu { display: none; }
.pg-en-recherche .jour-entete, .pg-en-filtre .jour-entete { padding: .7rem 1rem; }
.pg-vue.est-vide { display: none; }

/* ---------------------------------------------------------------
   Intervenants
   --------------------------------------------------------------- */
.quis {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.qui {
  display: grid; grid-template-columns: 76px 1fr; gap: .9rem; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem;
}
.qui-portrait {
  width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--royal-050); display: grid; place-items: center;
}
.qui-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qui-initiales {
  font-family: "Sora", sans-serif; font-size: 1.5rem; font-weight: 800;
  color: var(--royal); opacity: .55;
}
.qui.sans-photo .qui-portrait { border: 1px dashed var(--line); }
.qui h3 { font-size: .98rem; margin: 0 0 .2rem; line-height: 1.3; }
.qui-role { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.qui-quand {
  margin: .25rem 0 0; font-size: .78rem; font-weight: 700; color: var(--orange-800);
}

/* ---------------------------------------------------------------
   Légende
   --------------------------------------------------------------- */
.pg-legende {
  list-style: none; margin: 1.8rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
}
.leg {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--muted); font-weight: 600;
}
.leg i { font-style: normal; }
.leg::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--line);
}
.leg-enseignement::before { background: var(--orange); }
.leg-atelier::before      { background: #7c3aed; }
.leg-messe::before        { background: #b8860b; }
.leg-louange::before,
.leg-priere::before       { background: #0f9b5c; }
.leg-temps-fort::before   { background: var(--royal-500); }
.leg-concert::before      { background: #db2777; }
.leg-pause::before,
.leg-accueil::before      { background: #94a3b8; }

/* ---------------------------------------------------------------
   Sans JavaScript
   --------------------------------------------------------------- */
.pg-barre, .pg-atelier { display: none; }
.js-programme .pg-barre, .js-programme .pg-atelier { display: block; }
/* Sans script, les quatre vues s'enchaînent — c'est le programme complet. */
.pg-vue + .pg-vue { margin-top: 2.5rem; }
.js-programme .pg-vue + .pg-vue { margin-top: 0; }

/* ---------------------------------------------------------------
   Petits écrans — c'est là que la page sera surtout lue
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .synth-chiffres { grid-template-columns: repeat(2, 1fr); }
  .synth-jours { grid-template-columns: 1fr; }
  .creneau { grid-template-columns: 66px 1fr; gap: .7rem; padding: .75rem .8rem; }
  .creneau-heure time { font-size: .95rem; }
  .creneau-duree { display: none; }
  .phare { grid-template-columns: 62px 1fr; gap: .7rem; }
  .jour-entete { flex-direction: column; gap: .6rem; }
  .pg-onglet b { font-size: .88rem; }
  .pg-outil { min-height: 42px; }
  .quis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .maintenant.est-actif .maintenant-puce { animation: none; }
  .phare, .creneau { transition: none; }
}

/* ---------------------------------------------------------------
   Impression — le programme sur papier, à afficher dans la salle
   --------------------------------------------------------------- */
@media print {
  .maintenant, .pg-barre, .pg-atelier, .site-nav, .site-footer, .rij-mobile-cta,
  .programme-hero, .pg-legende { display: none !important; }
  .pg-vue[hidden] { display: block !important; }
  .pg-vue + .pg-vue { margin-top: 1.5rem; page-break-before: always; }
  .creneau {
    break-inside: avoid; opacity: 1 !important;
    box-shadow: none !important; background: #fff !important;
  }
  .creneau.est-en-cours::after { display: none; }
  .synth-theme { background: none !important; color: #000 !important; }
  .synth-theme .synth-ref { color: #444 !important; }
}

/* =================================================================
   QR code vers le programme
   ================================================================= */
.qr-programme {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow-card);
}
.qr-programme img {
  width: 190px; height: 190px; display: block;
  border-radius: 10px; background: #fff;
}
.qr-programme h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.qr-programme p { margin: 0; color: var(--muted); font-size: .92rem; }
.qr-programme .qr-adresse {
  margin-top: .6rem; font-family: "Sora", sans-serif;
  font-size: .82rem; color: var(--royal); word-break: break-all;
}
@media (max-width: 560px) {
  .qr-programme { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* --- Hero du samedi : le programme prend la place du compte à rebours ------
   Même carte, même encombrement : seul le contenu change. */
.rij-hero-programme .count-title { margin-bottom: 1.1rem; }
.hero-programme-jours {
  list-style: none; margin: 0 0 1.3rem; padding: 0;
  display: grid; gap: .55rem;
}
.hero-programme-jours li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .6rem .9rem;
  background: rgba(255,255,255,.12); border-radius: 12px;
}
.hero-programme-jours b { font-family: "Sora", sans-serif; font-size: 1rem; }
.hero-programme-jours span { font-size: .9rem; opacity: .85; }

/* --- Bandeau d'aperçu ------------------------------------------------------
   Il n'apparaît que sur les pages apercu-samedi, jamais sur le site public.
   Volontairement voyant : personne ne doit confondre l'aperçu avec le site. */
.apercu-bandeau {
  background: repeating-linear-gradient(45deg, #111 0 14px, #1b1b1b 14px 28px);
  color: #fff; font-size: .88rem; line-height: 1.5;
  border-bottom: 3px solid #ff7108;
}
.apercu-bandeau .container-x { padding-top: .8rem; padding-bottom: .8rem; }
.apercu-bandeau b { color: #ffb066; }
.apercu-bandeau span { opacity: .7; }
.apercu-bandeau a {
  display: inline-block; margin-left: .6rem; color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: .2rem .8rem; text-decoration: none; white-space: nowrap;
}
.apercu-bandeau a:hover { background: #ff7108; border-color: #ff7108; }
@media print { .apercu-bandeau { display: none; } }

/* Rôle sous un nom, dans la liste des intervenants de Jeunesse 2000. */
.card-x .card-role {
  margin: .35rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted-fort, #55637a);
}

/* Le fondateur de la CMDA donne lui-même l'enseignement n° 6. La fiche le dit. */
.qui-distinction {
  margin: 0 0 .2rem;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--royal);
}

/* =================================================================
   Couvertures des pages intérieures — 21 août 2026

   Une image de fond, et un dégradé qui court de gauche à droite : le
   texte de la page tient dans la partie sombre, la photographie
   respire à droite.
   ================================================================= */
.a-couverture {
  background-image:
    linear-gradient(90deg,
      rgba(1, 18, 48, .95) 0%,
      rgba(1, 24, 62, .84) 34%,
      rgba(4, 34, 88, .40) 62%,
      rgba(4, 34, 88, .10) 100%),
    var(--couverture);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  min-height: 380px;
}
/* Le voile est porté par la section : le calque interne ferait double emploi
   et assombrirait deux fois. */
.a-couverture .hero-overlay { display: none; }

/* --- Voile renforcé -------------------------------------------------------
   Les deux bannières fournies par l'organisation portent, imprimé dans
   l'image, « DE 07H30 À 17H30 ». Le programme officiel donne 08h00 – 18h25 le
   samedi et 08h00 – 18h10 le dimanche : la mention est fausse depuis, et la
   laisser lisible contredirait le programme affiché juste en dessous.

   Plutôt que de retoucher l'image de l'organisation, on la couvre là où le
   texte se trouve. Mesuré sur les deux fichiers : le contraste du texte tombe
   de 7–10:1 à 1,1:1 — plus lisible — tandis que les visages, à droite, se
   tiennent au-dessus de 1,7:1.

   À remplacer par le voile normal le jour où l'organisation fournit des
   bannières aux bons horaires. */
.a-couverture.voile-fort {
  background-image:
    linear-gradient(90deg,
      rgba(1, 18, 48, .95) 0%,
      rgba(1, 18, 48, .93) 38%,
      rgba(1, 22, 56, .90) 58%,
      rgba(4, 34, 88, .34) 84%,
      rgba(4, 34, 88, .12) 100%),
    var(--couverture);
}

@media (max-width: 780px) {
  /* Sur un téléphone, le cadrage à droite ne montrerait qu'un morceau de
     visage : on recentre, et le voile couvre toute la largeur. */
  .a-couverture {
    background-position: center;
    min-height: 300px;
  }
  .a-couverture.voile-fort {
    background-image:
      linear-gradient(180deg,
        rgba(1, 18, 48, .92) 0%,
        rgba(1, 22, 56, .88) 55%,
        rgba(4, 34, 88, .82) 100%),
      var(--couverture);
  }
}

/* =================================================================
   Hero de l'accueil sur téléphone — 21 août 2026

   Le compte à rebours doit se voir sans défiler. Sur un écran de
   812 px, l'en-tête collant en prend 69 : il reste 743 px, et le hero
   en réclamait 1001. Il fallait en rendre 258.

   Mesuré poste par poste, plutôt que rapetissé au jugé :

     titre         264 px → 149  (trois lignes, corps de 45 px)
     thème          85 px → 78
     ligne de date 150 px → 130
     boutons       143 px → 52   (côte à côte au lieu d'empilés)
     marges du bloc 80 px → 38
     écart          22 px → 14
     carte         272 px → 230  (la grille des chiffres reste intacte)

   La grille du compte à rebours n'est pas touchée : c'est elle qu'on
   vient lire. Ce sont ses alentours qui cèdent la place.

   Ce sont les deux boutons qui financent le titre. Empilés, ils prenaient
   112 px pour deux lignes de texte ; côte à côte, 52. Les 60 px récupérés
   rendent au titre sa présence.
   ================================================================= */
@media (max-width: 640px) {
  .rij-hero-inner {
    padding-top: 20px !important;
    padding-bottom: 18px !important;
    gap: 14px !important;
  }

  .rij-hero h1 {
    /* 12 vw, et pas un de plus : la mesure montre une falaise nette. À 12 vw
       le titre tient en trois lignes ; à 12,5 « rendez-vous » déborde et le
       titre passe à quatre. Comme le corps et la largeur dépendent tous deux
       de vw, la coupure tombe au même endroit d'un téléphone à l'autre. */
    font-size: clamp(1.75rem, 11.5vw, 3rem) !important;
    line-height: 1.1 !important;
    margin: 10px 0 14px !important;
  }

  .rij-theme {
    font-size: .95rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .rij-date-line {
    gap: 5px !important;
    margin: 12px 0 12px !important;
    font-size: .92rem !important;
  }

  /* Deux colonnes plutôt qu'une : « Je prends ma place » et « Découvrir le
     RIJ » tiennent côte à côte, à condition de resserrer le rembourrage et
     d'interdire le retour à la ligne dans le bouton. */
  .rij-hero .hero-cta {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .rij-hero .hero-cta .btn {
    padding: .78rem 12px !important;
    font-size: 14.5px !important;
    white-space: nowrap !important;
  }

  /* La carte : on resserre l'habillage, pas les chiffres. */
  .rij-count-card { padding: 14px 12px !important; }
  .count-badge { margin-bottom: 8px !important; }
  .count-title { font-size: .92rem !important; margin-bottom: 10px !important; }
  .rij-count-event .count-sub { margin-top: 8px !important; }
  /* Coup de pinceau décoratif : 13 px que la carte rend volontiers. */
  .count-brush { display: none !important; }

  /* La carte du samedi, qui remplace le compte à rebours, suit la même
     discipline — elle aussi doit tenir dans l'écran. */
  .hero-programme-jours { gap: .4rem !important; margin-bottom: 1rem !important; }
  .hero-programme-jours li { padding: .45rem .8rem !important; }
}

/* --- Écrans courts ---------------------------------------------------------
   Un 360 × 640 ne laisse que 571 px sous l'en-tête : même resserré, le hero
   n'y tient pas. Ce qui cède ici, c'est la citation du thème — elle est
   reprise plus bas dans la page, sur la page programme et sur l'affiche. Le
   compte à rebours, lui, est ce que la personne est venue voir.

   La contrainte étant verticale, la règle l'est aussi : c'est la hauteur qui
   décide, pas la largeur. */
@media (max-width: 640px) and (max-height: 720px) {
  .rij-theme { display: none !important; }
  .rij-hero-inner { padding-top: 14px !important; padding-bottom: 12px !important; }
  /* Le titre garde ses trois lignes ; c'est le corps qui cède, pas la
     structure — un titre qui change de découpe d'un téléphone à l'autre ne
     se reconnaît plus. */
  .rij-hero h1 {
    font-size: clamp(1.4rem, 8.5vw, 2.2rem) !important;
    line-height: 1.08 !important;
    margin: 6px 0 10px !important;
  }
  .rij-date-line { margin: 10px 0 10px !important; font-size: .86rem !important; }
  .rij-hero .hero-cta { margin-top: 12px !important; }
  .rij-hero .hero-cta .btn { padding: .6rem 10px !important; font-size: 13.5px !important; }
  .count-title { font-size: .85rem !important; margin-bottom: 8px !important; }
  .rij-count-event .count-sub { display: none !important; }
}

/* --- La carte du samedi tient 312 px là où celle du compteur en tient 237 ---
   Deux lignes de journée, un bouton et une phrase de plus. Comme c'est elle
   qui prendra la place à partir de samedi matin, elle doit passer la même
   épreuve : être lue sans défiler. */
@media (max-width: 640px) {
  .rij-hero-programme .count-title { font-size: .82rem !important; margin-bottom: 8px !important; }
  .rij-hero-programme .count-badge { margin-bottom: 6px !important; }
  .hero-programme-jours { gap: .35rem !important; margin-bottom: .65rem !important; }
  .hero-programme-jours li { padding: .35rem .75rem !important; }
  .hero-programme-jours b { font-size: .92rem !important; }
  .hero-programme-jours span { font-size: .84rem !important; }
  /* Le bouton dit déjà « Ouvrir le programme » : la phrase sous la carte
     répète ce que la page montrera d'elle-même. */
  .rij-hero-programme .count-sub { display: none !important; }
}

@media (max-width: 640px) and (max-height: 720px) {
  /* Sur un écran court, l'étiquette « EN DIRECT » cède aussi : la carte
     annonce déjà le programme, et c'est le contenu qu'on vient chercher. */
  .rij-hero-programme .count-badge { display: none !important; }
}

/* =================================================================
   Histoire de Jeunesse 2000 — 21 août 2026
   ================================================================= */

/* Repères chiffrés, dans la colonne restée vide du premier bloc. */
.j2000-chiffres {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
.j2000-chiffres li {
  background: var(--royal-050); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem .9rem;
}
.j2000-chiffres b {
  display: block; font-family: "Sora", sans-serif;
  font-size: 1.5rem; color: var(--royal); line-height: 1.1;
}
.j2000-chiffres span { font-size: .8rem; color: var(--muted-fort, #55637a); }

/* --- La chronologie -------------------------------------------------------
   Un filet vertical relie les étapes : l'œil suit la continuité avant de
   lire les dates. Le filet est tracé sur la liste, pas sur chaque élément,
   pour ne pas dépasser après la dernière étape. */
.histoire-section .chrono {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  position: relative;
}
.chrono::before {
  content: ""; position: absolute;
  left: 84px; top: .6rem; bottom: 2.2rem; width: 2px;
  background: linear-gradient(180deg, var(--royal-500), var(--line));
}
.chrono-etape {
  position: relative;
  display: grid; grid-template-columns: 84px 1fr; gap: 1.6rem;
  padding-bottom: 1.9rem;
}
.chrono-etape:last-child { padding-bottom: 0; }
.chrono-an {
  font-family: "Sora", sans-serif; font-weight: 800;
  font-size: .95rem; color: var(--royal);
  text-align: right; padding-top: .1rem; line-height: 1.3;
}
/* La pastille se pose sur le filet. */
.chrono-etape::before {
  content: ""; position: absolute;
  left: 79px; top: .5rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white);
  border: 3px solid var(--royal-500);
}
.chrono-etape.est-courante::before { border-color: var(--orange); }
.chrono-corps h3 { font-size: 1.08rem; margin: 0 0 .3rem; }
.chrono-corps p { margin: 0; color: var(--muted-fort, #55637a); line-height: 1.65; }
.chrono-etape.est-courante .chrono-an { color: var(--orange-800, #9a4a06); }
.chrono-source {
  margin-top: 2rem; font-size: .82rem; color: var(--muted); font-style: italic;
}

/* --- Les responsables ----------------------------------------------------- */
.bergers {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: .5rem;
}
.bergers li {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; align-items: baseline;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.bergers-periode {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: .88rem; color: var(--royal);
}
.bergers-nom { font-size: 1rem; }
.bergers li.est-courant {
  border-left-color: var(--orange); background: var(--orange-050);
}
.bergers li.est-courant .bergers-periode { color: var(--orange-800, #9a4a06); }
.bergers li.est-courant .bergers-nom { font-weight: 700; }

@media (max-width: 640px) {
  .j2000-chiffres { grid-template-columns: repeat(2, 1fr); }
  .chrono::before { left: 7px; }
  .chrono-etape { grid-template-columns: 1fr; gap: .3rem; padding-left: 34px; }
  .chrono-etape::before { left: 2px; top: .35rem; }
  .chrono-an { text-align: left; }
  .bergers li { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Très courts (moins de 600 px de haut) ---------------------------------
   Un 320 × 568 ne laisse que 499 px sous l'en-tête. À ce point, la mention
   « RIJ · ÉDITION 2026 » double le titre qui la suit : elle cède. */
@media (max-width: 640px) and (max-height: 600px) {
  .rij-edition { display: none !important; }
  .rij-hero h1 { font-size: clamp(1.3rem, 8vw, 2rem) !important; margin: 2px 0 8px !important; }
  .rij-date-line { margin: 8px 0 8px !important; font-size: .82rem !important; }
  .rij-hero .hero-cta { margin-top: 10px !important; }
  .rij-count-card { padding: 11px 10px !important; }
  .rij-count-event .count-unit strong { font-size: clamp(1.35rem, 7vw, 1.8rem) !important; }
}

/* =================================================================
   Textes signés — mot du fondateur, édito
   ================================================================= */
.message {
  display: grid; grid-template-columns: 260px 1fr; gap: 2.6rem;
  align-items: start;
}
.message--sans-portrait { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.message-portrait {
  background: linear-gradient(160deg, var(--royal-050), var(--white));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; position: sticky; top: 110px;
}
.message-portrait img { width: 100%; height: auto; display: block; }
.message-corps h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.3; margin: .4rem 0 1.4rem;
}
.message-corps p {
  margin: 0 0 1.05rem; line-height: 1.75; color: var(--ink);
  font-size: 1.02rem;
}
.message-adresse { font-weight: 700; }
.message-envoi { font-style: italic; color: var(--muted-fort, #55637a); }
.message-signature {
  margin-top: 1.6rem !important; padding-top: 1.2rem;
  border-top: 2px solid var(--orange);
}
.message-signature b {
  display: block; font-family: "Sora", sans-serif; font-size: 1.05rem;
}
.message-signature span { font-size: .88rem; color: var(--muted-fort, #55637a); }

/* L'emblème du mouvement, au-dessus des repères chiffrés. */
.j2000-embleme { text-align: center; margin-bottom: 1.4rem; }
.j2000-embleme img { width: 132px; height: auto; }
.j2000-embleme p {
  margin: .5rem 0 0; font-size: .82rem;
  color: var(--muted-fort, #55637a); font-style: italic;
}

@media (max-width: 860px) {
  .message { grid-template-columns: 1fr; gap: 1.6rem; }
  .message-portrait {
    position: static; max-width: 240px; margin: 0 auto;
  }
  .message-corps p { font-size: .98rem; line-height: 1.7; }
}

/* Montage des éditions précédentes. */
.souvenirs { margin: 2rem 0 0; }
.souvenirs img {
  width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.souvenirs figcaption {
  margin-top: .9rem; text-align: center;
  font-size: .82rem; color: var(--muted); font-style: italic;
}

/* L'emblème de la communauté, dans le pied de page. */
.footer-embleme {
  width: 34px; height: auto; float: left; margin: 0 .6rem .2rem 0;
  opacity: .95;
}

/* =================================================================
   Enregistrement des participants — 21 août 2026

   Un voile devant le programme, à la première visite seulement. Il est
   volontairement sobre : on demande deux informations, on dit pourquoi,
   on s'efface.
   ================================================================= */





/* Le champ leurre : hors de l'écran, hors du parcours au clavier, invisible
   des lecteurs d'écran. Seuls les robots qui remplissent tout le trouvent. */



/* =================================================================
   Le direct — annonce et point clé, pilotés depuis les coulisses
   ================================================================= */
.direct-annonce {
  background: var(--royal-050);
  border-bottom: 3px solid var(--royal-500);
  color: var(--ink);
}
.direct-annonce.est-important {
  background: var(--orange-050);
  border-bottom-color: var(--orange);
}
.direct-annonce-corps {
  padding-top: .85rem; padding-bottom: .85rem;
  font-size: .95rem; line-height: 1.55;
}
.direct-annonce-corps b {
  display: block;
  font-family: "Sora", sans-serif; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--royal); margin-bottom: .15rem;
}
.direct-annonce.est-important .direct-annonce-corps b { color: var(--orange-800, #9a4a06); }

/* Le point clé : ce que l'intervenant vient de dire, à recopier. */
.direct-point-cle {
  background: var(--royal-900); color: #fff;
  padding: 1.3rem 0;
}
.direct-point-cle .eyebrow { color: var(--orange); }
.direct-citation {
  margin: .5rem 0 0;
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 3.2vw, 1.45rem); line-height: 1.4;
}
.direct-reference {
  margin: .4rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .72);
}

@media print {
  .direct-annonce, .direct-point-cle { display: none !important; }
}

/* =================================================================
   Le hero des deux journées — 22 août 2026

   Pendant le rassemblement, le hero cesse d'annoncer un rendez-vous à
   venir et raconte la journée : bienvenue, ce qui se passe en ce
   moment, puis les temps forts, l'un après l'autre.

   Le fond d'origine de la section reste dessous, intact : si les
   calques ne se posaient pas, la page garderait son hero habituel.
   ================================================================= */

/* Le titre est masqué avant même le premier affichage : sans cela, on le
   verrait s'écrire, puis disparaître, puis remonter. Le garde-fou qui retire
   cette classe est dans la page — le titre ne peut pas rester invisible si
   le script ne se charge pas. */
html.rij-anime .rij-hero h1,
html.rij-anime .rij-hero .rij-edition { opacity: 0; }

.hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-fond {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  /* Une seule et même courbe pour les deux sens, et c’est ce qui suffit :
     l’entrante va de 0 à 1, la sortante de 1 à 0. Sous la même courbe p(t),
     l’une vaut p et l’autre 1 − p — leur somme fait 1 à chaque instant, si
     bien que le calque de base ne transparaît jamais.

     La courbe démarre vite : à mi-course l’entrante est déjà aux trois
     quarts, la sortante au quart. On ne passe donc pas par la surimpression
     à parts égales, qui donne l’air d’une double exposition.

     J’avais d’abord donné à la sortante la courbe miroir, croyant compenser
     son inversion. C’était la compenser deux fois : mesuré, cela laissait
     les deux photographies à 0,87 ensemble. */
  transition: opacity 1.25s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity;
}
.hero-fond.est-la {
  opacity: 1;
}

/* L'image vit dans le calque, pas sur lui : le fondu travaille l'opacité du
   calque, le mouvement travaille l'échelle de l'image. Sur un même élément,
   les deux se disputaient la même propriété, et la photographie sortante
   sautait à sa taille de départ au milieu du fondu. */
.hero-fond > i {
  position: absolute; inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* L'état de repos est celui d'arrivée de l'animation : un calque qui perd
     son animation ne bouge donc pas d'un pixel. */
  transform: scale(1.005);
  transform-origin: 50% 45%;
  will-change: transform;
}

/* L'entrée et la dérive lente sont une seule et même animation : l'image
   arrive un peu plus grande et se pose, sur dix secondes — plus long que la
   durée d'un temps, pour qu'elle ne s'immobilise jamais sous les yeux du
   visiteur.

   Ni flou ni filtre : sur un calque plein écran ils coûtent cher, et cette
   page s'ouvre sur des téléphones d'entrée de gamme dans une salle bondée.
   L'opacité et l'échelle, elles, sont traitées par le compositeur. */
.hero-fond > i.entre { animation: hero-entree 10s cubic-bezier(.16, .68, .3, 1) both; }
@keyframes hero-entree {
  from { transform: scale(1.085); }
  to   { transform: scale(1.005); }
}

/* Le calque de base est opaque et ne se fond jamais : pendant les fondues,
   on verrait sinon le dégradé de la section ET celui du voile se superposer,
   et le hero s'assombrirait à chaque changement de temps. */
.hero-fond-base { opacity: 1; transition: none; }
/* Le calque de base porte la photographie qui ouvre le carrousel, et son
   cadrage : dès le premier pixel peint, avant même que le script démarre,
   c'est déjà la bonne couverture — et rien ne saute quand le calque du
   carrousel prend le relais.

   Sur une seule ligne : le contrôle d'envoi la lit avec grep, ligne par
   ligne. Coupée en deux, elle passerait pour absente. */
.hero-fond-base > i { background-image: url("../img/rij/jour1/salle-temoignages.jpg"); background-position: 50% 42%; }

/* Le voile reprend la teinte de la section : le texte tient dans la partie
   sombre, la photographie respire à droite. */
.hero-voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(1, 18, 48, .96) 0%,
    rgba(1, 24, 62, .84) 34%,
    rgba(4, 34, 88, .38) 61%,
    rgba(4, 34, 88, .10) 100%);
}
.rij-hero-inner { position: relative; z-index: 2; }
.rij-hero [hidden] { display: none !important; }

/* --- Les lignes du titre ---------------------------------------------------
   Chaque ligne a son cache : le texte monte de dessous. Le rembourrage
   compense la hauteur de ligne serrée du hero, sinon les accents des
   capitales — À, É — seraient rognés par le cache. */
.rij-hero h1 .hero-ligne {
  display: block;
  overflow: hidden;
  padding: .08em 0;
  margin: -.08em 0;
}
.rij-hero h1 .hero-ligne > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .72s cubic-bezier(.19, .93, .27, 1), opacity .45s ease;
}
.rij-hero h1 .hero-ligne.est-la > i { transform: none; opacity: 1; }
.rij-hero h1 .hero-ligne.sort > i {
  transform: translateY(-105%); opacity: 0;
  transition-duration: .42s, .3s;
}

/* La taille suit la longueur du titre. « Nous sommes une nation sainte, un
   corps sanctifié par le sang de Jésus » fait soixante-quinze signes : à la
   taille d'annonce, il couvrirait l'écran. Trois paliers, et l'important
   reste lisible d'un coup d'œil.

   Le !important n'est pas une facilité : les règles de hauteur du hero sur
   téléphone en portent déjà, et sans lui le titre long garderait la taille
   d'un titre court. */
.rij-hero h1.est-long {
  font-size: clamp(2rem, 3.5vw, 3.4rem) !important;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.rij-hero h1.est-tres-long {
  font-size: clamp(1.55rem, 2.7vw, 2.55rem) !important;
  letter-spacing: -.02em;
  line-height: 1.08;
}

/* --- La sous-ligne ---------------------------------------------------------
   Elle prend la place du verset : chaque temps porte la sienne — celui qui
   enseigne, et la parole qui le porte. */
.hero-sous {
  display: flex; align-items: center; gap: 12px;
  max-width: 610px; margin: 14px 0 0;
  color: #fff; font-size: 1.02rem; line-height: 1.45;
  border-left: 3px solid #f6b800; padding-left: 16px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.hero-sous.est-la { opacity: 1; transform: none; }
.hero-dit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-qui { font-weight: 700; font-size: 1.05rem; letter-spacing: -.005em; }
.hero-parole { font-style: italic; font-size: .93rem; opacity: .86; }
.hero-portrait {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
}

/* --- Les points ------------------------------------------------------------
   Ils disent combien de temps il reste à voir, et permettent d'y aller
   directement. Les toucher arrête le défilement : la page ne doit pas
   repartir sous les doigts de quelqu'un qui lit. */
.hero-points {
  display: flex; gap: 9px; align-items: center;
  margin: 20px 0 0; padding: 0;
}
.hero-points button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.hero-points button:hover { background: rgba(255, 255, 255, .6); }
.hero-points button.est-la { background: #ff7a0a; width: 26px; border-radius: 5px; }
.hero-points button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* La toile des confettis ne reçoit aucun clic : elle passe par-dessus la
   page sans jamais s'interposer. */
.fete-toile {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none;
}

@media (max-width: 600px) {
  /* Sur téléphone, le voile couvre toute la largeur : le cadrage ne montre
     qu'une portion de l'image, et le texte doit y tenir partout. */
  .hero-voile {
    background: linear-gradient(90deg,
      rgba(1, 18, 48, .96), rgba(1, 24, 62, .80));
  }
  .hero-fond > i { background-position: 62% center; }
  .hero-sous { font-size: .92rem; margin-top: 11px; padding-left: 12px; }
  .hero-portrait { width: 38px; height: 38px; flex-basis: 38px; }
  .hero-points { margin-top: 14px; }
}

/* Écrans courts : le hero y est déjà compté au pixel près pour que la carte
   de droite tienne sans défiler. La sous-ligne et les points s'y font
   discrets plutôt que de repousser tout le reste. */
@media (max-height: 720px) and (max-width: 900px) {
  .hero-sous { font-size: .86rem !important; margin-top: 9px !important; }
  .hero-portrait { width: 32px; height: 32px; flex-basis: 32px; }
  .hero-points { margin-top: 11px !important; }
}

/* Le mouvement rend certaines personnes malades. Les temps ne défilent alors
   plus tout seuls — ils se parcourent avec les points — et fete.js ne lance
   aucun confetti. */
@media (prefers-reduced-motion: reduce) {
  .hero-fond,
  .hero-fond.est-la { transition-duration: .01ms; }
  /* L’image ne dérive plus et reste à sa taille de repos. */
  .hero-fond > i.entre { animation: none; }
  .hero-fond > i { transform: none; }
  .rij-hero h1 .hero-ligne > i,
  .hero-sous { transition-duration: .01ms; }
}

/* --- Le hero sur un téléphone court ----------------------------------------
   Le hero de l'accueil est compté au pixel près pour que la carte de droite
   tienne sans défiler. Mesuré sur un écran de 667 px : le titre le plus long
   du programme, « Nous sommes une nation sainte, un corps sanctifié par le
   sang de Jésus », repoussait la carte 52 px sous la ligne de flottaison.

   Trois économies, prises là où elles coûtent le moins :

     - la parole d'Écriture disparaît. Sur 375 px de large elle prend trois
       lignes ; le nom de celui qui enseigne, lui, reste toujours. La parole
       est sur la page programme, à un doigt de là.
     - les deux tailles de titre long descendent d'un cran.
     - la sous-ligne et les points se resserrent.

   Ensemble : 54 px rendus. La carte revient dans l'écran. */
@media (max-height: 720px) and (max-width: 900px) {
  .hero-parole { display: none !important; }
  .hero-qui { font-size: .92rem; }
  .hero-sous { margin-top: 8px !important; padding-left: 12px !important; }
  .hero-points { margin-top: 10px !important; }
  .hero-portrait { width: 32px; height: 32px; flex-basis: 32px; }

  .rij-hero h1.est-long {
    font-size: clamp(1.6rem, 6.6vw, 2.1rem) !important;
    line-height: 1.04;
  }
  .rij-hero h1.est-tres-long {
    font-size: clamp(1.28rem, 5.4vw, 1.75rem) !important;
    line-height: 1.1;
  }
}

/* Les six derniers pixels. Le carrousel ajoute une sous-ligne et des points
   là où il n'y avait rien : sur un écran de 667 px, la carte du programme
   dépassait encore de six pixels. On les reprend sur les marges du hero, et
   seulement pendant les deux journées — hors carrousel, le réglage d'origine
   reste intact. */
@media (max-height: 720px) and (max-width: 900px) {
  .rij-hero.hero-anime .rij-hero-inner {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
  }
}

/* Une marge nulle n'est pas une marge : il suffit d'une police substituée ou
   d'une barre d'adresse un peu plus haute pour que la carte repasse sous la
   ligne. Deux titres tenaient au pixel près sur 667 px — l'ouverture, qui
   garde la taille pleine, et le plus long du programme. On leur donne de
   l'air, sans toucher aux autres.

   Le :not() n'est pas une élégance gratuite : sans lui, cette règle
   écraserait les tailles des titres longs, qui ont la même spécificité et
   sont écrites plus haut. */
@media (max-height: 720px) and (max-width: 900px) {
  .rij-hero.hero-anime h1.est-tres-long {
    font-size: clamp(1.2rem, 5vw, 1.62rem) !important;
  }
}

/* Le doublon qui coûtait vingt et un pixels.

   Pendant les deux journées, le hero porte « Voir le programme » et la carte
   juste dessous porte « Ouvrir le programme » : le même geste, écrit deux
   fois. Sur un téléphone court, ce doublon poussait la carte — celle qui
   porte les horaires — sous la ligne de flottaison.

   On garde la carte, qui dit quelque chose, et l'on retire les boutons, qui
   le répètent. Ailleurs — écran large, ou hors carrousel — rien ne change. */
@media (max-height: 720px) and (max-width: 900px) {
  .rij-hero.hero-anime .hero-cta { display: none !important; }
}

/* Les très petits écrans — un 320 × 568 en porte encore beaucoup à Abidjan.
   Il manquait quatre pixels sur les deux titres les plus longs. On les prend
   sur la sous-ligne, qui reste lisible : rien n'est retiré, tout se resserre.
   Les points restent, en particulier : chez qui a demandé des animations
   réduites, ils sont le seul moyen de passer d'un temps à l'autre. */
@media (max-height: 600px) and (max-width: 900px) {
  .hero-qui { font-size: .84rem; }
  .hero-sous { margin-top: 5px !important; padding-left: 10px !important; gap: 9px; }
  .hero-portrait { width: 28px; height: 28px; flex-basis: 28px; }
  .hero-points { margin-top: 7px !important; }
}

/* Deux pixels de marge ne sont pas une marge : un téléphone réglé sur une
   police plus grande, ou une police de repli un peu plus large, et la carte
   repasse dessous. Les titres longs descendent d'un cran de plus sur les
   écrans de moins de 600 px de haut — ils y restent parfaitement lisibles,
   et l'on gagne une dizaine de pixels. */
@media (max-height: 600px) and (max-width: 900px) {
  .rij-hero.hero-anime h1.est-long {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
  }
  .rij-hero.hero-anime h1.est-tres-long {
    font-size: clamp(1.12rem, 4.7vw, 1.5rem) !important;
  }
}

/* =================================================================
   L'intervenant, mis en valeur — 21 août 2026

   Un médaillon de 46 px et un nom en corps de texte : celui qui donne
   l'enseignement passait pour une note de bas de page. Il est le sujet
   de la diapositive, il en prend la place.

   Le médaillon monte à 118 px. C'est une limite mesurée, pas choisie :
   sept portraits sur huit font mille pixels ou plus, mais celui du Père
   Donnadieu N'DOUBA n'en fait que trois cents. Au-delà de 150 px
   d'affichage, il serait le seul à paraître flou — et ce serait à lui
   que cela se verrait.
   ================================================================= */
.hero-sous {
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  border-left: 0;
  padding-left: 0;
}
.hero-portrait {
  width: 118px; height: 118px; flex-basis: 118px;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(2, 12, 38, .55), 0 0 0 6px rgba(249, 115, 22, .28);
  background: rgba(255, 255, 255, .12);
  /* Les portraits sont cadrés sur le visage, un peu haut : on garde la tête
     dans le médaillon plutôt que de centrer sur le buste. */
  object-position: 50% 22%;
}
.hero-dit { gap: 5px; }
.hero-qui {
  font-size: 1.45rem; font-weight: 800; line-height: 1.15;
  letter-spacing: -.01em;
}
.hero-parole {
  font-size: 1rem; opacity: .9;
  border-left: 3px solid #f6b800; padding-left: 13px;
}

/* Pendant les deux journées, le hero et la carte juste dessous portent le
   même bouton. Sur téléphone, on garde la carte — qui donne les horaires —
   et l'on rend la place aux visages. */
@media (max-width: 900px) {
  .rij-hero.hero-anime .hero-cta { display: none !important; }
  .hero-sous { gap: 14px; margin-top: 14px; }
  .hero-portrait {
    width: 78px; height: 78px; flex-basis: 78px;
    border-width: 2px;
    box-shadow: 0 10px 26px rgba(2, 12, 38, .5), 0 0 0 4px rgba(249, 115, 22, .3);
  }
  .hero-qui { font-size: 1.12rem; }
  .hero-parole { font-size: .9rem; padding-left: 10px; }
}

@media (max-height: 720px) and (max-width: 900px) {
  .hero-sous { gap: 11px; margin-top: 10px !important; padding-left: 0 !important; }
  .hero-portrait { width: 62px; height: 62px; flex-basis: 62px; }
  .hero-qui { font-size: 1rem; }
}

@media (max-height: 600px) and (max-width: 900px) {
  .hero-sous { gap: 9px; margin-top: 8px !important; }
  .hero-portrait {
    width: 46px; height: 46px; flex-basis: 46px;
    box-shadow: 0 6px 16px rgba(2, 12, 38, .45), 0 0 0 3px rgba(249, 115, 22, .3);
  }
  .hero-qui { font-size: .9rem; }
}

/* Le mot du fondateur — une parole rapportée, pas une annonce.

   Le hero met ses titres en capitales : c'est juste pour « DIEU DONNE
   RENDEZ-VOUS », ce l'est beaucoup moins pour une phrase entre guillemets
   signée d'un homme. Ce temps-là garde sa casse, resserre son interligne et
   respire un peu plus. */
.rij-hero h1.est-citation {
  text-transform: none !important;
  letter-spacing: -.015em;
  line-height: 1.14;
  font-weight: 700;
}

/* La citation du fondateur garde sa casse et respire davantage : trois lignes
   à interligne 1,14 au lieu de 1,02. Sur un 320 × 568, il ne restait que cinq
   pixels sous la carte du programme. Elle descend donc d'un cran là — et le
   titre long d'un demi-cran, tant qu'on y est. */
@media (max-height: 600px) and (max-width: 900px) {
  .rij-hero.hero-anime h1.est-citation {
    font-size: clamp(1.1rem, 4.6vw, 1.45rem) !important;
    line-height: 1.12;
  }
  .rij-hero.hero-anime h1.est-long {
    font-size: clamp(1.32rem, 5.7vw, 1.72rem) !important;
  }
}

/* La citation porte deux classes à la fois : « est-long » pour sa longueur,
   « est-citation » pour sa nature. À spécificité égale, c'est la règle écrite
   la dernière qui gagne — et c'était celle du titre long. On nomme donc les
   deux classes ensemble, pour que la citation l'emporte sans ambiguïté. */
@media (max-height: 600px) and (max-width: 900px) {
  .rij-hero.hero-anime h1.est-long.est-citation,
  .rij-hero.hero-anime h1.est-tres-long.est-citation {
    font-size: clamp(1.1rem, 4.6vw, 1.45rem) !important;
    line-height: 1.12;
  }
}
@media (max-height: 720px) and (min-height: 601px) and (max-width: 900px) {
  .rij-hero.hero-anime h1.est-long.est-citation,
  .rij-hero.hero-anime h1.est-tres-long.est-citation {
    font-size: clamp(1.35rem, 5.6vw, 1.8rem) !important;
    line-height: 1.12;
  }
}

/* Les téléphones hauts — 375 × 812 et au-delà. Les règles ci-dessus ne
   couvrent que les écrans courts ; ici la citation gardait la taille pleine
   d'un titre long, et ses trois lignes ne laissaient que quatorze pixels sous
   la carte.

   Le « min-height: 721px » n'est pas décoratif : sans lui, cette règle,
   écrite en dernier, écraserait celles des écrans courts et y rendrait la
   citation plus grande, pas plus petite. */
@media (max-width: 900px) and (min-height: 721px) {
  .rij-hero.hero-anime h1.est-long.est-citation,
  .rij-hero.hero-anime h1.est-tres-long.est-citation {
    font-size: clamp(1.55rem, 6.4vw, 2rem) !important;
    line-height: 1.13;
  }
}

/* La case d'accord du formulaire d'enregistrement.

   Elle n'est jamais cochée d'avance : la coche est le geste de la personne.
   Sa zone cliquable couvre tout le texte — sur un téléphone, viser un carré
   de treize pixels avec le pouce est une épreuve, pas un consentement. */

/* Le visage dans le créneau — 22 août 2026

   La page programme est l'outil des deux journées : on y revient dix fois,
   on la parcourt vite. Un nom se lit ; un visage se reconnaît. Les neuf
   créneaux qui ont un intervenant connu portent son portrait. */
.creneau-intervenant {
  display: flex; align-items: center; gap: .55rem;
}
.creneau-visage {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%; object-fit: cover;
  /* Les portraits sont cadrés un peu haut : on garde la tête dans le rond. */
  object-position: 50% 20%;
  border: 2px solid var(--white, #fff);
  box-shadow: 0 3px 10px rgba(17, 42, 78, .18), 0 0 0 1px var(--line, #e2e8f0);
  background: var(--paper, #f1f5f9);
}
.creneau.est-phare .creneau-visage {
  width: 46px; height: 46px;
  box-shadow: 0 4px 14px rgba(17, 42, 78, .22), 0 0 0 3px rgba(249, 115, 22, .22);
}

@media (max-width: 600px) {
  .creneau-visage { width: 34px; height: 34px; }
  .creneau.est-phare .creneau-visage { width: 40px; height: 40px; }
}

/* Sur une feuille imprimée, un rond gris ne dit rien : on garde le nom. */
@media print {
  .creneau-visage { display: none; }
}

/* Le visage sur les cartes de la synthèse.

   La synthèse est l'onglet d'arrivée : c'est ce qu'on voit en ouvrant le
   programme. Elle n'avait que du texte. */
.phare-qui {
  display: flex; align-items: center; gap: .5rem;
}
.phare-visage {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  object-position: 50% 20%;
  border: 2px solid var(--white, #fff);
  box-shadow: 0 3px 12px rgba(17, 42, 78, .2), 0 0 0 2px rgba(249, 115, 22, .22);
  background: var(--paper, #f1f5f9);
}

@media (max-width: 600px) {
  .phare-visage { width: 34px; height: 34px; }
}

@media print {
  .phare-visage { display: none; }
}

/* =================================================================
   Les deux mots — 22 août 2026

   Le fondateur, puis le Berger Général, annoncés dans le bloc « Un
   message pour ta génération ». Ils s'empilent plutôt que de se
   côtoyer : c'est l'ordre voulu, et une colonne n'a rien à réarranger
   sur un téléphone.

   Le bloc est sur fond bleu ; les cartes sont donc des voiles clairs
   posés dessus, pas des cartes blanches qui trancheraient.
   ================================================================= */
.mots {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 42rem; margin: 34px auto 0;
  text-align: left;
}
.mot {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius, 16px);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff; text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mot:hover, .mot:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  transform: translateY(-2px);
}
.mot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.mot-visage { flex: 0 0 auto; }
.mot-visage img {
  width: 66px; height: 66px; display: block;
  border-radius: 50%; object-fit: cover;
  object-position: 50% 20%;
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 6px 18px rgba(2, 12, 38, .35);
}
.mot-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mot-role {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #f6b800;
}
.mot-titre { font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.mot-qui { font-size: .84rem; opacity: .82; line-height: 1.4; }
.mot-lire {
  margin-top: 4px; font-size: .82rem; font-weight: 700; color: #ffb570;
}
.mot-lire i { font-style: normal; transition: transform .25s ease; display: inline-block; }
.mot:hover .mot-lire i { transform: translateX(4px); }

@media (max-width: 560px) {
  .mots { gap: 11px; margin-top: 26px; }
  .mot { padding: 13px 14px; gap: 12px; align-items: flex-start; }
  .mot-visage img { width: 54px; height: 54px; }
  .mot-titre { font-size: .95rem; }
  .mot-qui { font-size: .79rem; }
}

/* --- La page du mot du fondateur -------------------------------------------
   Elle réutilise le gabarit « message » de la page du Berger Général : même
   portrait, même colonne de texte, mêmes marges. */
.message-portrait img {
  width: 132px; height: 132px;
  border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 3px solid var(--white, #fff);
  box-shadow: 0 14px 34px rgba(2, 12, 38, .25), 0 0 0 5px rgba(249, 115, 22, .18);
}
@media (max-width: 700px) {
  .message-portrait img { width: 92px; height: 92px; }
}

/* =================================================================
   Le débordement latéral sur téléphone — 22 août 2026

   Quatre pages — Frère Marie Arnaud, Jeunesse 2000, Ministère et
   Contact — pouvaient glisser de huit pixels sur le côté. On croit à
   une main maladroite ; c'est la page qui est trop large.

   La cause est arithmétique. La gouttière « g-5 » de Bootstrap vaut
   3 rem, soit 48 px, et la rangée compense par une marge négative de
   la moitié — 24 px de chaque côté. Le conteneur, lui, n'offre que
   20 px de rembourrage. Il manque donc 4 px par côté, 8 px en tout,
   exactement l'écart mesuré.

   Sur téléphone, les colonnes s'empilent : la gouttière horizontale
   n'espace plus rien et peut se réduire sans rien coûter. La verticale,
   elle, reste à 3 rem — c'est elle qui sépare les blocs empilés.
   ================================================================= */
@media (max-width: 767.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 2rem; }
}

/* =================================================================
   Le manifeste, en deux colonnes — 22 août 2026

   Mesuré sur 1344 × 760 : la section faisait 799 px de haut — plus que
   l'écran — pendant que 508 px de largeur restaient vides de part et
   d'autre des cartes. On quittait un hero dense pour une étendue bleue
   où la seconde annonce tombait sous la ligne de flottaison.

   Le texte prend la gauche, les deux mots la droite. Ils restent
   empilés l'un sous l'autre : c'est l'ordre voulu, et c'est aussi la
   disposition qui les rend visibles ensemble.
   ================================================================= */
.manifesto-source {
  margin: 12px 0 0;
  font-size: .92rem; font-style: italic;
  color: rgba(255, 255, 255, .72);
}

@media (min-width: 992px) {
  .rij-manifesto { padding: 72px 0; }

  .rij-manifesto .container-x {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: 3.2rem;
    align-items: center;
    text-align: left;
  }

  /* Un texte centré dans une colonne étroite se lit mal : chaque ligne
     commence ailleurs que la précédente. */
  .rij-manifesto .manifesto-dit { text-align: left; }
  .rij-manifesto h2 { font-size: clamp(2.4rem, 3.4vw, 3.5rem); margin-top: 10px; }
  .rij-manifesto p { margin-left: 0; margin-right: 0; max-width: 34rem; }
  .rij-manifesto .manifesto-word { margin-top: 26px; font-size: clamp(1.5rem, 2vw, 2rem); }

  .rij-manifesto .mots { margin: 0; max-width: none; }
  .mot-titre { font-size: .98rem; }
}

/* Entre 992 et 1180 px, la colonne des mots se resserre : on rend au texte
   la place que le portrait ne prend plus. */
@media (min-width: 992px) and (max-width: 1180px) {
  .rij-manifesto .container-x { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 2.4rem; }
  .mot-visage img { width: 56px; height: 56px; }
}

/* =================================================================
   Ce qui s'est dit hier — 23 août 2026

   Au matin du second jour, la page ne peut plus se contenter d'annoncer :
   la première journée a eu lieu. Six paroles entendues hier, quatre
   photographies de la salle, et la mention de ce qu'il reste à vivre.

   Placée juste après le hero : quelqu'un qui arrive veut savoir où en
   est le rassemblement avant qu'on lui parle d'autre chose.
   ================================================================= */
.hier-section { background: var(--paper, #f1f5f9); }

.hier-mots {
  list-style: none; padding: 0;
  margin: 2.2rem 0 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.hier-mot {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 16px);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-card, 0 16px 40px rgba(17, 42, 78, .07));
}
.hier-mot blockquote { margin: 0; flex: 1; }
.hier-mot blockquote p {
  margin: 0; font-size: 1.02rem; line-height: 1.5;
  color: var(--royal-900, #14235c); font-weight: 600;
}
.hier-qui {
  display: flex; align-items: center; gap: 11px;
  padding-top: 13px; border-top: 1px solid var(--line, #e2e8f0);
}
.hier-qui img {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 2px solid var(--white, #fff);
  box-shadow: 0 0 0 1px var(--line, #e2e8f0);
}
.hier-qui span { display: flex; flex-direction: column; min-width: 0; }
.hier-qui b { font-size: .92rem; color: var(--ink, #0f172a); }
.hier-qui small { font-size: .8rem; color: var(--muted, #64748b); }

/* --- Les photographies -----------------------------------------------------
   Recadrées large : le bandeau incrusté en bas des originaux portait un
   horaire faux, il a été écarté au découpage. */
.hier-images {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.hier-images li { margin: 0; }
.hier-images img {
  width: 100%; height: 190px; display: block;
  object-fit: cover; object-position: 50% 42%;
  border-radius: var(--radius-sm, 10px);
  background: var(--line, #e2e8f0);
}
.hier-note {
  margin: 18px 0 0; text-align: center;
  font-size: .82rem; color: var(--muted, #64748b);
}

@media (max-width: 600px) {
  .hier-mot { padding: 16px 16px 14px; }
  .hier-mot blockquote p { font-size: .96rem; }
  .hier-images img { height: 155px; }
}

/* =================================================================
   La page du rassemblement — 23 août 2026

   « RIJ 2026 · Infos » ne donnait que des informations pratiques. Elle
   raconte désormais : ce qu'est le RIJ, comment se déroulent les deux
   journées, et à quoi cela ressemble en images.
   ================================================================= */
.recit {
  max-width: 44rem; margin: 0 auto;
  font-size: 1.06rem; line-height: 1.68;
}
.recit p { margin: 0 0 1.1rem; }
.recit-source {
  font-size: .86rem; color: var(--muted, #64748b);
  font-style: italic; margin-top: 1.4rem !important;
}

/* --- Le déroulement --------------------------------------------------------
   Une liste numérotée : l'ordre des moments compte, et le chiffre le dit
   mieux qu'une puce. */
.deroule {
  list-style: none; counter-reset: etape;
  padding: 0; margin: 2rem auto 0; max-width: 46rem;
  display: flex; flex-direction: column; gap: 14px;
}
.deroule li {
  counter-increment: etape;
  position: relative;
  padding: 18px 20px 18px 62px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-card, 0 16px 40px rgba(17, 42, 78, .07));
}
.deroule li::before {
  content: counter(etape);
  position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--royal-050, #eef2ff);
  color: var(--royal, #1e3a8a);
  font-weight: 800; font-size: .92rem;
}
.deroule b {
  display: block; margin-bottom: 4px;
  color: var(--royal-900, #14235c); font-size: 1.04rem;
}
.deroule span { color: var(--muted-fort, #55637a); line-height: 1.55; }

/* --- La galerie ------------------------------------------------------------
   Les photographies ont été recadrées pour écarter le bandeau incrusté en bas
   des originaux, qui porte un horaire faux. */
.galerie {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.galerie li { margin: 0; }
.galerie img {
  width: 100%; height: 210px; display: block;
  object-fit: cover; object-position: 50% 42%;
  border-radius: var(--radius-sm, 10px);
  background: var(--line, #e2e8f0);
}
/* La première occupe deux colonnes là où il y en a assez : une grille
   entièrement régulière fait planche-contact, pas récit. */
@media (min-width: 60rem) {
  .galerie li:first-child { grid-column: span 2; }
  .galerie li:first-child img { height: 100%; min-height: 210px; }
}

@media (max-width: 600px) {
  .recit { font-size: 1rem; }
  .deroule li { padding: 15px 16px 15px 56px; }
  .galerie img { height: 170px; }
}

/* --- Le bilan du premier jour, dans les mots de l'organisation -------------- */
.bilan {
  max-width: 44rem; margin: 2rem auto 0;
  padding: 22px 24px;
  border-left: 4px solid var(--orange, #f97316);
  background: var(--white, #fff);
  border-radius: 0 var(--radius, 16px) var(--radius, 16px) 0;
  box-shadow: var(--shadow-card, 0 16px 40px rgba(17, 42, 78, .07));
}
.bilan p {
  margin: 0; font-size: 1.06rem; line-height: 1.6;
  color: var(--royal-900, #14235c); font-weight: 600;
}
.bilan footer {
  margin-top: .8rem; font-size: .84rem;
  color: var(--muted, #64748b); font-style: italic;
}

/* --- Le fil des générations ------------------------------------------------ */
.origines {
  max-width: 44rem; margin: 2.4rem auto 0;
  padding: 20px 22px;
  background: var(--royal-050, #eef2ff);
  border-radius: var(--radius, 16px);
}
.origines h3 { margin: .4rem 0 .6rem; color: var(--royal-900, #14235c); }
.origines p { margin: 0; line-height: 1.6; color: var(--muted-fort, #55637a); }

/* --- Les canaux, sous le numéro principal ---------------------------------- */
.package-contact a { color: inherit; text-decoration: underline; }
.canaux {
  display: block; margin-top: .5rem;
  font-size: .84rem; font-weight: 400; opacity: .85; line-height: 1.5;
}

@media (max-width: 600px) {
  .bilan { padding: 18px 18px; }
  .bilan p { font-size: 1rem; }
  .origines { padding: 16px 17px; }
}

/* --- Le hero respire d'un temps à l'autre ---------------------------------
   La ligne de dates et le bouton ne sont plus fixes : chaque temps écrit les
   siens. Sans transition ils sauteraient à chaque tour, et le changement se
   verrait plus que le contenu. */
.rij-hero .rij-date-line,
.rij-hero .hero-cta {
  transition: opacity .5s ease, transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rij-hero .rij-date-line,
  .rij-hero .hero-cta { transition-duration: .01ms; }
}

/* Un temps qui ne porte pas de ligne de dates la retire vraiment : sans
   ce !important, display:flex — et display:grid sur petit ecran —
   l'emporterait sur l'attribut hidden, et la ligne garderait sa hauteur
   et ses marges tout en etant vide. */
.rij-hero .est-masque { display: none !important; }

/* === Le téléphone retrouve ce que le direct lui avait pris ==================

   Ces règles ne vivent que sous 900 px de large : le bureau ne peut pas les
   atteindre, et n'est donc pas touché.

   PENDANT LES DEUX JOURNÉES, le hero partageait l'écran avec la carte du
   programme et le compte à rebours. Pour faire tenir les horaires au-dessus
   de la ligne de flottaison, on avait rendu deux choses : la hauteur du hero
   — de 650 px à « auto », soit 354 px mesurés — et les boutons, qui faisaient
   doublon avec ceux de la carte.

   LA CARTE N'EXISTE PLUS. Le doublon non plus. Ce qui restait n'était donc
   plus une économie, mais une perte sèche : sur téléphone, le carrousel
   n'affichait AUCUN bouton — ni « Revivre le RIJ 2026 », ni « Découvrir
   Jeunesse 2000 », ni « Découvrir le ministère » — et sa photo se réduisait
   à un bandeau. On rend les deux. */
@media (max-width: 900px) {

  /* Le bouton du temps affiché revient. Une seule colonne : il n'y a plus
     qu'un bouton par temps, deux colonnes le laisseraient à mi-largeur. */
  .rij-hero.hero-anime .hero-cta {
    display: flex !important;
    grid-template-columns: none !important;
    margin-top: 16px !important;
  }
  .rij-hero.hero-anime .hero-cta .btn {
    width: auto !important;
    padding: .85rem 22px !important;
    font-size: 15px !important;
    margin: 0 !important;
  }

  /* Les points de navigation faisaient 9 × 9 px : on les visait au pixel.
     Le dessin ne change presque pas ; c'est la zone sensible qui s'élargit,
     par un pseudo-élément qui déborde le point sans le grossir — 26 px de
     large sur 42 px de haut, ce qui tient sous un pouce. L'écart entre les
     points passe à 18 px pour que ces zones ne se chevauchent pas. */
  .hero-points { gap: 18px; }
  .hero-points button { width: 10px; height: 10px; position: relative;
                        background: rgba(255, 255, 255, .42); }
  .hero-points button.est-la { width: 30px; }
  .hero-points button::after {
    content: ""; position: absolute;
    top: -16px; bottom: -16px; left: -8px; right: -8px;
  }

  /* L'étiquette « PRÉDICATEUR » tombait à 9,9 px — sous le seuil de lecture
     confortable sur un écran tenu à bout de bras. */
  .speaker-card span { font-size: .7rem !important; padding: 5px 9px !important; }
}

/* La hauteur du hero ne revient que là où il y a la place : sous 640 px de
   haut — un 320 × 568 en porte encore beaucoup à Abidjan — le réglage serré
   du direct reste le bon, et rien ne change. */
@media (max-width: 900px) and (min-height: 640px) {
  .rij-hero { min-height: min(66vh, 560px) !important; }
}

/* === Les fraternités =======================================================

   Le brief est explicite : « sur smartphone, ce seraient de grosses cartes
   faciles à toucher ». Tout ce qui suit part donc du téléphone, et s'élargit
   ensuite — l'inverse de ce que fait le reste de la feuille, mais c'est le
   bon sens ici : un annuaire se consulte debout, dans la rue, d'une main.  */

.frat-appel { background: linear-gradient(135deg, #071b4c, #064bb5); color: #fff; }
.frat-relais { background: linear-gradient(135deg, #0759ca, #061a49); color: #fff; }
.frat-appel .eyebrow, .frat-relais .eyebrow { color: #f6b800; }
.frat-appel h2, .frat-relais h2 { color: #fff; }
.frat-appel-corps { max-width: 760px; margin: 0 auto; text-align: center; }
.frat-appel-corps p { font-size: 1.12rem; opacity: .92; margin: 14px 0 26px; }

/* Un appel principal qui se voit et se touche : 54 px de haut au doigt. */
.btn-lg-frat { padding: .95rem 30px; font-size: 1.02rem; }

/* --- L'annuaire ----------------------------------------------------------- */
.frat-communes {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 30px; padding: 0;
}
.frat-communes a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid #dce6fa; background: #fff;
  color: #0d3182; font-weight: 700; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.frat-communes a:hover { background: #f3f7ff; border-color: #b9cdf3; }
.frat-communes a b {
  background: #ff7108; color: #fff; border-radius: 999px;
  min-width: 22px; padding: 1px 7px; font-size: .78rem; text-align: center;
}

.frat-groupe { margin-top: 34px; }
.frat-commune-titre {
  font-size: 1.5rem; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid #f0f4fd; color: #071b4c;
}
.frat-grille { display: grid; grid-template-columns: 1fr; gap: 16px; }

.frat-carte {
  background: #fff; border: 1px solid #dce6fa; border-radius: 22px;
  padding: 22px; box-shadow: 0 12px 30px rgba(7, 27, 76, .07);
  display: flex; flex-direction: column;
}
.frat-tete h3 { margin: 0; font-size: 1.32rem; color: #071b4c; line-height: 1.15; }
.frat-lieu { margin: 6px 0 0; color: #667085; font-weight: 600; }

.frat-infos { list-style: none; margin: 18px 0 0; padding: 0; flex: 1; }
.frat-infos li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid #f2f6fd;
}
.frat-infos li:first-child { border-top: 0; padding-top: 0; }
.frat-infos b { display: block; color: #071b4c; }
.frat-infos small { display: block; margin-top: 2px; color: #667085; }
.frat-infos small a { color: #0d3182; font-weight: 700; }
.frat-icone { flex: 0 0 22px; font-size: 1.05rem; line-height: 1.5; }

/* Les deux actions vraiment utiles : écrire, et y aller. */
.frat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.frat-actions .btn { padding: .82rem 10px; font-size: .96rem; text-align: center; }
.btn-ghost-frat {
  border: 1.5px solid #0d3182; color: #0d3182; background: transparent;
  border-radius: 12px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.btn-ghost-frat:hover { background: #0d3182; color: #fff; }
.frat-relais .btn-ghost-frat { border-color: rgba(255,255,255,.7); color: #fff; }
.frat-relais .btn-ghost-frat:hover { background: #fff; color: #071b4c; }

/* --- Quand l'annuaire est encore vide ------------------------------------- */
.frat-vide {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: #f3f7ff; border: 1px solid #dce6fa;
  border-radius: 24px; padding: 40px 24px;
}
.frat-vide h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 10px 0 14px; }
.frat-vide p { color: #4a5568; margin: 0 auto 24px; max-width: 560px; }
.frat-vide-note { font-size: .9rem; color: #667085; margin: 18px auto 0 !important; }

/* --- Les quatre pas -------------------------------------------------------- */
.frat-pas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.frat-pas li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid #dce6fa; border-radius: 18px; padding: 20px;
}
.frat-pas b {
  flex: 0 0 42px; height: 42px; border-radius: 50%;
  background: #071b4c; color: #f6b800;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.frat-pas strong { display: block; color: #071b4c; font-size: 1.1rem; }
.frat-pas p { margin: 5px 0 0; color: #4a5568; }

/* --- Puis les écrans plus larges ------------------------------------------ */
@media (min-width: 760px) {
  .frat-grille { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .frat-pas { grid-template-columns: repeat(2, 1fr); }
  .frat-actions { grid-template-columns: auto auto; justify-content: start; }
  .frat-actions .btn { padding: .82rem 26px; }
}
@media (min-width: 1100px) {
  .frat-grille { grid-template-columns: repeat(3, 1fr); }
  .frat-pas { grid-template-columns: repeat(4, 1fr); }
  .frat-pas li { flex-direction: column; }
}

/* === La page des activités ================================================
   « Programme » au menu ne voulait plus rien dire : c'était le programme d'UNE
   activité présenté comme celui du ministère. La rubrique devient « Activités »,
   et le programme redescend dans la fiche de son rassemblement.

   Les cartes reprennent la grammaire des fraternités — même rayon, mêmes
   bordures, mêmes actions — parce que ce sont les deux endroits où le visiteur
   choisit où aller. Une seule chose les distingue : la pastille de phase. */

.act-pub-grille { display: grid; grid-template-columns: 1fr; gap: 18px; }

.act-pub {
  background: #fff; border: 1px solid #dce6fa; border-radius: 22px;
  padding: 24px; box-shadow: 0 12px 30px rgba(7, 27, 76, .07);
  display: flex; flex-direction: column;
}
.act-pub-tete h3 { margin: 10px 0 0; font-size: 1.45rem; color: #071b4c; line-height: 1.15; }
.act-pub-theme { margin: 8px 0 0; color: #4a5568; font-style: italic; }

/* La phase se lit en un mot, pas seulement à sa couleur. */
.act-pub-phase {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid currentColor;
}
.act-pub-phase.ph-avant   { color: #a87c00; }
.act-pub-phase.ph-encours { color: #c4530a; background: rgba(255, 113, 8, .08); }
.act-pub-phase.ph-revivre { color: #0d3182; }
.act-pub-phase.ph-archive { color: #667085; }

.act-pub-infos { list-style: none; margin: 18px 0 0; padding: 0; flex: 1; }
.act-pub-infos li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid #f2f6fd; color: #4a5568;
}
.act-pub-infos li:first-child { border-top: 0; padding-top: 0; }
.act-pub-infos li > span:first-child { flex: 0 0 22px; }

.act-pub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.act-pub-actions .btn { padding: .82rem 10px; font-size: .96rem; text-align: center; }
.act-pub-actions .btn:only-child { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .act-pub-grille { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .act-pub-actions { grid-template-columns: auto auto; justify-content: start; }
  .act-pub-actions .btn { padding: .82rem 26px; }
}
@media (min-width: 1100px) {
  .act-pub-grille { grid-template-columns: repeat(3, 1fr); }
}

/* === Galeries — §8 =========================================================
   Une grille qui se remplit d'elle-même, des vignettes légères, et l'image
   pleine au clic. Les dimensions sont posées sur chaque image : sans elles, la
   page saute pendant le chargement — c'est le défaut relevé le 28 août sur
   /rij-2026, où 39 images sur 41 n'en avaient pas. */
.gal-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gal-photo { margin: 0; }
.gal-photo a { display: block; border-radius: 16px; overflow: hidden; background: #eef2fb; }
.gal-photo img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  transition: transform .35s ease;
}
.gal-photo a:hover img { transform: scale(1.03); }
.gal-photo figcaption { margin-top: 8px; font-size: .88rem; color: #4a5568; }
.gal-photo figcaption small { color: #667085; }
@media (min-width: 760px) { .gal-photo img { height: 230px; } }

/* === Enseignements — §10 ==================================================
   Les cartes reprennent la grammaire des fraternités et des activités : c'est
   le troisième endroit où le visiteur choisit où aller, et il n'a pas à
   réapprendre une mise en forme à chaque fois. */
.ens-grille { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
.ens-carte {
  background: #fff; border: 1px solid #dce6fa; border-radius: 22px; padding: 24px;
  box-shadow: 0 12px 30px rgba(7, 27, 76, .07); display: flex; flex-direction: column;
}
.ens-carte h3 { margin: 8px 0 0; font-size: 1.3rem; line-height: 1.2; }
.ens-carte h3 a { color: #071b4c; text-decoration: none; }
.ens-carte h3 a:hover { color: #0d3182; text-decoration: underline; text-underline-offset: 3px; }
.ens-qui { margin: 8px 0 0; color: #667085; font-weight: 600; font-size: .92rem; }
.ens-extrait { margin: 12px 0 0; color: #4a5568; flex: 1; }
.ens-carte .btn { margin-top: 18px; align-self: flex-start; padding: .7rem 22px; }

.ens-fiche { max-width: 68ch; margin: 0 auto; }
.ens-verset {
  font-weight: 700; color: #0d3182; border-left: 3px solid #f6b800;
  padding-left: 16px; margin-bottom: 20px;
}
.ens-resume { font-size: 1.12rem; color: #4a5568; }
.ens-texte { margin-top: 24px; line-height: 1.75; }
/* Le cadre vidéo garde ses proportions : sans cela, la page saute au chargement. */
.ens-video { position: relative; aspect-ratio: 16 / 9; margin: 26px 0; }
.ens-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 18px; background: #071b4c;
}
@media (min-width: 760px)  { .ens-grille { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1100px) { .ens-grille { grid-template-columns: repeat(3, 1fr); } }

/* === Vidéos — §9 ===========================================================
   La carte est celle des enseignements, avec une vignette au-dessus. On ne
   crée pas une quatrième grammaire de carte pour un quatrième contenu. */
.v-carte { padding: 0; overflow: hidden; }
.v-carte .eyebrow, .v-carte h3, .v-carte .ens-qui { padding-inline: 24px; }
.v-carte h3 { margin-top: 6px; }
.v-carte .ens-qui { padding-bottom: 24px; }
.v-vignette {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: #071b4c; margin-bottom: 16px;
}
.v-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le triangle dit que ça se regarde, pas que ça se lit. */
.v-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.4rem; color: #fff; text-shadow: 0 2px 14px rgba(7, 27, 76, .6);
  transition: transform .18s ease;
}
.v-carte:hover .v-play { transform: scale(1.12); }

/* === Témoignages — §15 =====================================================
   Une colonne plus étroite que les autres grilles : on lit un témoignage, on
   ne le parcourt pas. */
.temo-grille { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
.temo-carte {
  background: #fff; border: 1px solid #dce6fa; border-radius: 22px; padding: 26px 28px;
  box-shadow: 0 12px 30px rgba(7, 27, 76, .07);
}
.temo-carte h3 { margin: 0 0 12px; font-size: 1.2rem; color: #071b4c; line-height: 1.25; }
.temo-carte blockquote {
  margin: 0; padding-left: 18px; border-left: 3px solid #f6b800;
  color: #33415c; line-height: 1.7;
}
.temo-avant { border-color: #ffd9b0; box-shadow: 0 16px 36px rgba(255, 113, 8, .13); }
.temo-qui { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.temo-qui img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.temo-qui span { font-weight: 700; color: #071b4c; display: flex; flex-direction: column; }
.temo-qui small { font-weight: 500; color: #667085; }
.temo-carte .btn { margin-top: 18px; }
.temo-appel {
  margin-top: 40px; background: #f4f7ff; border: 1px solid #dce6fa;
  border-radius: 22px; padding: 28px;
}
.temo-appel h2 { margin: 0 0 10px; }
.temo-appel p { color: #4a5568; max-width: 60ch; }
@media (min-width: 760px)  { .temo-grille { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .temo-appel { padding: 34px 40px; } }