@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
  --couleur-accent: #6a3fa1;
  --couleur-accent-fonce: #5a3387;
  --couleur-accent-clair: #c48fe6;
  --couleur-nav: #202124;
  --couleur-fond: #ffffff;
  --police-titres: 'Roboto', Arial, sans-serif;
  --police-texte: 'Roboto', Arial, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--police-texte);
  color:#3c4043;
  background: var(--couleur-fond);
}

.wrap{ max-width: 760px; margin:0 auto; padding: 0 24px; }

a{ color: var(--couleur-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* bandeau annonce */
.bandeau{
  background:#f1f3f4;
  color:#3c4043;
  text-align:center;
  font-size:0.92rem;
  padding: 10px 18px;
}

/* nav noire */
header.site{ background: var(--couleur-nav); position:sticky; top:0; z-index:30; }
.nav-inner{
  max-width: 1000px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding: 10px 20px;
}
.burger{
  display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; padding:6px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{ width:44px; height:44px; flex-shrink:0; }
.brand .titre{ color:#e8eaed; font-size:1.05rem; font-weight:500; font-family: var(--police-titres); }
nav.links{ display:flex; gap:22px; margin-left:auto; }
nav.links a{ color:#e8eaed; font-size:0.95rem; padding:6px 2px; }
nav.links a:hover{ color:#fff; text-decoration:none; }
nav.links a.actif{ color: var(--couleur-accent-clair); font-weight:500; }
.search-icon{ color:#e8eaed; font-size:1.2rem; margin-left:10px; }

@media (max-width: 720px){
  .burger{ display:block; }
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--couleur-nav); flex-direction:column; gap:0; padding: 8px 0;
  }
  nav.links.ouvert{ display:flex; }
  nav.links a{ padding: 12px 24px; }
  header.site{ position:relative; }
}

/* bannière or */
.banniere{
  position:relative;
  background: linear-gradient(135deg, #ffd76a 0%, #f6b93b 55%, #f0a92b 100%);
  padding: 70px 0 90px;
  overflow:hidden;
}
.banniere::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
  opacity:.5;
}
.banniere h1{
  position:relative; z-index:2;
  font-family: var(--police-titres);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight:700;
  color:#202124;
  margin:0;
  line-height:1.05;
  max-width: 760px;
  margin: 0 auto; padding: 0 24px;
}
.wave{ display:block; width:100%; height:60px; margin-top:-2px; }

/* contenu */
main{ padding: 46px 0 30px; }
h2{
  text-align:center;
  color: var(--couleur-accent);
  font-family: var(--police-titres);
  font-size: 1.9rem;
  font-weight:700;
  margin: 0.4em 0 0.7em;
}
h3{ color: var(--couleur-accent); font-family: var(--police-titres); font-size:1.25rem; font-weight:700; text-align:center; margin: 1.6em 0 0.5em; }
p{ text-align:center; max-width: 620px; margin: 0 auto 1.1em; line-height:1.6; color:#3c4043; }

.contenu-img{
  max-width:100%;
  width:100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius:8px;
  display:block;
  margin: 20px auto 6px;
  background: #e8eaed;
}
.legende{ text-align:center; font-style:italic; color:#5f6368; font-size:0.9rem; margin-bottom:1.6em; }

.placeholder-photo{
  max-width:100%;
  aspect-ratio: 16/10;
  border-radius:8px;
  margin: 20px auto 6px;
  background: repeating-linear-gradient(45deg, #f1f3f4, #f1f3f4 10px, #e8eaed 10px, #e8eaed 20px);
  display:flex; align-items:center; justify-content:center;
  color:#80868b; font-size:0.9rem; text-align:center; padding: 20px;
  border: 1px dashed #c4c7c9;
}

.socials{ display:flex; gap:16px; justify-content:center; margin: 1.6em 0 0.4em; }
.socials a{
  width:44px; height:44px; border-radius:50%;
  background:#5f6368; display:flex; align-items:center; justify-content:center;
}
.socials img{ width:22px; height:22px; }

hr.sep{ border:0; border-top:1px solid #e0e0e0; margin: 2em 0 0; }

/* bande impliquez-vous */
.impliquez{ background:#f1f3f4; padding: 30px 0 46px; margin-top: 10px; }
.impliquez h3{ text-align:left; margin-top:0; }
.impliquez .liens{ display:flex; gap:16px; flex-wrap:wrap; }
.bouton{
  display:inline-block;
  background: var(--couleur-accent);
  color:#fff;
  padding: 12px 26px;
  border-radius: 22px;
  font-size:0.95rem;
  font-weight:500;
}
.bouton:hover{ background: var(--couleur-accent-fonce); text-decoration:none; }

/* tableaux (séances) */
table.horaires{ width:100%; border-collapse:collapse; margin: 1em auto; max-width:620px; }
table.horaires td{ padding:10px 12px; border-bottom:1px solid #e0e0e0; text-align:left; }
table.horaires td.label{ font-weight:600; color:#202124; width:170px; }

.embed-frame{ border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; margin: 1.2em auto; max-width:700px; }
.embed-frame iframe{ width:100%; border:0; display:block; }

footer.site{ text-align:center; font-size:0.8rem; color:#80868b; padding: 22px 0; border-top:1px solid #e0e0e0; }