/* =========================================================
   ÉGLISE MEDAS — Design system
   Palette : bleu roi / or / blanc
   Polices système uniquement (aucune requête externe = plus
   rapide, plus privé, rien à charger avant l'affichage).
   ========================================================= */

:root{
  /* Couleurs — extraites de la photo du polo MEDAS (bleu roi / jaune / blanc) */
  --blue-900:#0B2A66;
  --blue-800:#123B8C;
  --blue-700:#1E56B3;
  --blue-500:#3B74D6;
  --gold-600:#B8860B;
  --gold-400:#E8B923;
  --gold-200:#F6DE8C;
  --ivory:#FAF8F2;
  --white:#FFFFFF;
  --ink-900:#14162B;
  --ink-600:#4A4D66;
  --line:#E4E1D6;

  /* Typographie */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Échelle */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 10px;
  --shadow: 0 12px 30px -12px rgba(14,26,77,0.25);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 var(--space-2);
  font-weight:700;
}
h1{ font-size:clamp(2.1rem, 4vw, 3.1rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 var(--space-2); color:var(--ink-600); }
a{ color:var(--blue-700); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--gold-600);
  outline-offset:2px;
}
img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:var(--space-3);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:var(--space-1);
}
.eyebrow svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- En-tête ---------- */
.site-header{
  background:var(--blue-900);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 0 rgba(212,175,55,0.35);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:0.8rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
  color:var(--white);
  text-decoration:none;
}
.brand-logo{ height:46px; width:auto; flex-shrink:0; }
.brand-text{ font-family:var(--font-display); line-height:1.1; }
.brand-text strong{ display:block; font-size:1.15rem; color:var(--white); letter-spacing:0.02em; }
.brand-text span{ display:block; font-size:0.68rem; color:var(--gold-200); font-family:var(--font-body); letter-spacing:0.03em; }

.nav{ display:flex; align-items:center; gap:var(--space-3); }
.nav-links{ display:flex; gap:var(--space-3); list-style:none; margin:0; padding:0; }
.nav-links a{
  color:var(--white);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:600;
  padding:0.4rem 0.1rem;
  border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-bottom-color:var(--gold-400); }
.nav-cta{
  background:var(--gold-400);
  color:var(--blue-900) !important;
  padding:0.55rem 1.1rem !important;
  border-radius:999px;
  border-bottom:none !important;
}
.nav-cta:hover{ background:var(--gold-200); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:8px;
  padding:0.4rem 0.6rem;
  color:var(--white);
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    inset-inline:0;
    top:100%;
    background:var(--blue-900);
    flex-direction:column;
    gap:0;
    padding:0.5rem var(--space-3) 1rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:0.7rem 0; border-bottom:1px solid rgba(255,255,255,0.12); width:100%; }
  .nav-cta{ display:inline-block; margin-top:0.5rem; text-align:center; }
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.5rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--gold-400); color:var(--blue-900); }
.btn-primary:hover{ background:var(--gold-600); }
.btn-outline{ border-color:var(--white); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,0.1); }
.btn-outline-blue{ border-color:var(--blue-700); color:var(--blue-700); }
.btn-outline-blue:hover{ background:var(--blue-700); color:var(--white); }

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(11,42,102,0.72), rgba(11,42,102,0.92)),
    url('../img/Culte.jfif') center/cover no-repeat,
    linear-gradient(180deg, var(--blue-900), var(--blue-800));
  color:var(--white);
  padding-block:var(--space-6) var(--space-5);
}
.hero .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero h1{
  color:var(--white);
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(2.6rem, 7vw, 4.75rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  max-width:20ch;
}
.hero p.lead{ color:rgba(255,255,255,0.85); max-width:56ch; font-size:1.1rem; }
.hero-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); justify-content:center; }
.hero-verse{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid rgba(232,185,35,0.35);
  max-width:56ch;
  margin-inline:auto;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-200);
}
.hero-verse cite{ display:block; margin-top:0.4rem; font-family:var(--font-body); font-style:normal; font-size:0.85rem; color:rgba(255,255,255,0.65); }

/* ---------- Sections génériques ---------- */
.section{ padding-block:var(--space-6); }
.section-alt{ background:var(--white); }
.section-head{ max-width:60ch; margin-bottom:var(--space-4); }

.page-hero{
  background:linear-gradient(180deg, var(--blue-900), var(--blue-800));
  color:var(--white);
  padding-block:var(--space-5) var(--space-4);
}
.page-hero h1{ color:var(--white); }
.page-hero p{ color:rgba(255,255,255,0.85); max-width:60ch; }

/* ---------- Grilles / cartes ---------- */
.grid{ display:grid; gap:var(--space-3); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3);
  box-shadow:var(--shadow);
}
.card-icon{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--blue-900);
  color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-2);
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:0.4rem; }
.card a.card-link{ font-weight:700; font-size:0.9rem; }

/* ---------- Signature : rai de lumière (motif du "salut") ---------- */
.sunburst{ width:100%; height:100%; }
.divider{
  display:flex; align-items:center; gap:0.8rem;
  color:var(--gold-600);
  margin-block:var(--space-2);
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* ---------- Bloc info (horaires / lieux / dons) ---------- */
.info-row{
  display:flex; justify-content:space-between; gap:var(--space-2);
  padding:0.9rem 0;
  border-bottom:1px solid var(--line);
}
.info-row:last-child{ border-bottom:none; }
.info-row dt{ font-weight:700; color:var(--blue-900); }
.info-row dd{ margin:0; color:var(--ink-600); text-align:right; }

.badge{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.04em;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:var(--gold-200);
  color:var(--blue-900);
}

/* ---------- État vide ---------- */
.empty-state{
  text-align:center;
  padding:var(--space-6) var(--space-3);
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.empty-state .card-icon{ margin-inline:auto; }

/* ---------- Dons ---------- */
.donate-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--shadow);
}
.donate-number{
  font-family:'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', 'Courier New', monospace;
  font-variant-numeric:tabular-nums;
  font-size:1.5rem;
  font-weight:700;
  color:var(--blue-900);
  letter-spacing:0.06em;
  margin:0.4rem 0 0.8rem;
}
.copy-btn{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.5rem 0.9rem;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
  color:var(--blue-900);
}
.copy-btn:hover{ background:var(--gold-200); }
.copy-btn[data-copied="true"]{ background:var(--gold-400); }
.placeholder-note{
  font-size:0.85rem;
  background:#FFF6E0;
  border:1px dashed var(--gold-600);
  color:#7A5B0B;
  padding:0.6rem 0.9rem;
  border-radius:8px;
  margin-top:0.6rem;
}

/* ---------- Pied de page ---------- */
.site-footer{
  background:var(--blue-900);
  color:rgba(255,255,255,0.75);
  padding-block:var(--space-5) var(--space-3);
}
.site-footer h4{ color:var(--gold-200); font-size:1rem; font-family:var(--font-body); letter-spacing:0.04em; text-transform:uppercase; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-4); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr; gap:var(--space-3); } }
.site-footer a{ color:rgba(255,255,255,0.75); }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.5rem; }
.footer-bottom{
  margin-top:var(--space-4);
  padding-top:var(--space-2);
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:0.85rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
}

/* ---------- Formulaire de contact ---------- */
.contact-form{ max-width:640px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:var(--space-3); }
.form-group label{
  display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--blue-900); margin-bottom:0.4rem;
}
.form-group input, .form-group textarea{
  width:100%; background:var(--ivory); border:1px solid var(--line); border-radius:8px;
  padding:0.8rem 1rem; font-family:var(--font-body); font-size:0.95rem; color:var(--ink-900);
}
.form-group input:focus, .form-group textarea:focus{
  outline:none; border-color:var(--blue-700); background:var(--white);
}
.form-group textarea{ resize:vertical; min-height:140px; }
.form-submit{ border:none; width:100%; justify-content:center; margin-top:0.3rem; cursor:pointer; }
.form-note{ font-size:0.82rem; color:var(--ink-600); margin-top:0.7rem; }

.prayer-callout{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  background:linear-gradient(120deg, var(--gold-200), var(--gold-400));
  border-radius:var(--radius); padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-5);
}
.prayer-callout-icon{ font-size:2rem; flex-shrink:0; }
.prayer-callout h3{ margin-bottom:0.3rem; }
.prayer-callout p{ margin:0; color:var(--blue-900); max-width:46ch; }
.prayer-callout .btn{ margin-left:auto; flex-shrink:0; }
@media (max-width:640px){
  .prayer-callout{ flex-direction:column; align-items:flex-start; }
  .prayer-callout .btn{ margin-left:0; width:100%; justify-content:center; }
}

/* ---------- Menu déroulant "Église" (nav) ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  background:none; border:none; color:var(--white); font-size:0.95rem; font-weight:600;
  font-family:var(--font-body); display:flex; align-items:center; gap:0.3rem;
  cursor:pointer; padding:0.4rem 0.1rem;
}
.nav-dropdown-toggle .caret{ width:14px; height:14px; transition:transform .2s; }
.nav-dropdown.open .caret{ transform:rotate(180deg); }
.nav-dropdown-panel{
  display:none;
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:0.5rem; width:300px; z-index:60;
}
.nav-dropdown.open .nav-dropdown-panel{ display:block; }
.nav-dropdown-item{
  display:flex; align-items:flex-start; gap:0.7rem; padding:0.7rem; border-radius:8px;
  text-decoration:none; color:var(--ink-900);
}
.nav-dropdown-item:hover{ background:var(--ivory); }
.ndi-icon{
  width:36px; height:36px; border-radius:50%; background:rgba(11,42,102,0.1); color:var(--blue-900);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ndi-icon svg{ width:18px; height:18px; }
.ndi-text strong{ display:block; font-size:0.92rem; color:var(--blue-900); }
.ndi-text small{ display:block; font-size:0.78rem; color:var(--ink-600); margin-top:0.1rem; }

@media (max-width:860px){
  .nav-dropdown-toggle{ width:100%; justify-content:space-between; padding:0.7rem 0; color:var(--white); border-bottom:1px solid rgba(255,255,255,0.12); }
  .nav-dropdown-panel{ position:static; transform:none; width:100%; box-shadow:none; border-radius:0; padding:0.3rem 0 0.3rem 0.8rem; margin-top:0; }
  .nav-dropdown-item:hover{ background:rgba(255,255,255,0.06); }
  .ndi-text strong{ color:var(--white); }
  .ndi-text small{ color:rgba(255,255,255,0.65); }
}

/* ---------- Logo dans le pied de page ---------- */
.footer-logo{ height:56px; width:auto; margin-bottom:0.8rem; }

/* ---------- Réseaux sociaux (pied de page) ---------- */
.social-links{ display:flex; gap:0.6rem; margin-top:1rem; }
.social-links a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.1); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.social-links a:hover{ background:var(--gold-400); color:var(--blue-900); }
.social-links svg{ width:18px; height:18px; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold-400); color:var(--blue-900);
  padding:0.6rem 1rem; border-radius:8px; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Bandeau de versets audio ---------- */
section.verse-banner{
  background: linear-gradient(120deg, var(--gold-600), var(--gold-400) 55%, var(--gold-200));
  color: var(--blue-900);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 2px solid var(--blue-900);
}
.verse-inner{ max-width:1120px; margin:0 auto; }
.verse-line{ margin-bottom:0.7rem; }
.verse-combo{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; line-height:1.5; color:var(--ink-900); margin:0; }
.verse-ref-inline{ color:var(--blue-900); font-weight:800; margin-right:0.35rem; }
.verse-controls-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.verse-controls{ display:flex; align-items:center; gap:0.6rem; }
.vc-btn{
  background:rgba(11,42,102,0.12); border:none; color:var(--blue-900);
  width:38px; height:38px; border-radius:50%; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.vc-btn:hover{ background:rgba(11,42,102,0.22); }
.vc-btn:focus-visible{ outline:3px solid var(--blue-900); outline-offset:2px; }
.vc-play{
  width:auto; border-radius:999px; padding:0 1.1rem; gap:0.5rem; font-weight:700; font-size:0.9rem;
  background:transparent; color:var(--blue-900);
  border:2px solid var(--blue-900);
}
.vc-play:hover{ background:rgba(11,42,102,0.1); }
/* état actif pendant la lecture : pastille bleu marine pleine, contraste fort sur le fond or */
.vc-play.is-playing{
  background:var(--blue-900); color:var(--white); border-color:var(--blue-900);
}
.vc-play.is-playing:hover{ background:var(--blue-800); }
.verse-counter{ font-size:0.8rem; font-weight:700; color:var(--blue-900); opacity:0.75; }
.verse-dots{ display:flex; gap:6px; margin-bottom:0.6rem; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(11,42,102,0.25); cursor:pointer; border:none; padding:0; }
.dot.active{ background:var(--blue-900); width:20px; border-radius:4px; }
.verse-attribution{ font-size:0.95rem; font-style:normal; font-weight:800; color:var(--blue-900); margin:0; }

@media (max-width:640px){
  .verse-controls-row{ flex-direction:column; align-items:flex-start; gap:0.6rem; }
}

/* ---------- Vidéos & Directs ---------- */
.video-live-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--blue-900);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-live-frame iframe{ width:100%; height:100%; border:0; display:block; }
.video-placeholder{ text-align:center; padding:var(--space-3); }
.video-placeholder svg{ width:52px; height:52px; margin-inline:auto; margin-bottom:var(--space-2); color:var(--gold-400); }
.video-placeholder p{ color:rgba(255,255,255,0.8); margin:0; }
.video-placeholder-sub{ font-size:0.85rem; margin-top:0.3rem !important; color:rgba(255,255,255,0.55) !important; }
.live-badge{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:#D64545; color:var(--white);
  font-size:0.75rem; font-weight:700; letter-spacing:0.04em;
  padding:0.25rem 0.7rem; border-radius:999px; margin-bottom:var(--space-2);
}
.live-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--white); }

.video-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.video-thumb{ aspect-ratio:16/9; background:var(--blue-900); display:flex; align-items:center; justify-content:center; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb-empty{ font-size:2rem; opacity:0.5; }
.video-card-body{ padding:var(--space-3); }
.video-card-body h3{ font-size:1.05rem; margin-bottom:0.3rem; }
.video-card-body p{ font-size:0.85rem; margin:0; color:var(--ink-600); }

/* ---------- Sélecteur de langue ---------- */
.lang-select{
  background:transparent;
  border:1px solid rgba(255,255,255,0.4);
  color:var(--white);
  padding:0.35rem 0.6rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.03em;
}
.lang-select option{ color:var(--ink-900); }
.lang-select:hover{ background:rgba(255,255,255,0.12); }

/* ---------- Fondateur (page À propos) ---------- */
.founder-card{
  display:flex;
  gap:var(--space-4);
  align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.founder-photo{
  width:220px;
  flex-shrink:0;
  margin-inline:auto;
}
.founder-photo img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.founder-text{ flex:1; min-width:260px; }
.founder-text h3{ margin-bottom:0.8rem; }
@media (max-width:640px){
  .founder-card{ flex-direction:column; text-align:center; }
}