:root{
  /* AMOPA palette (tons du logo) */
  --amopa-950:#2E2546;
  --amopa-900:#45386A;  /* violet profond */
  --amopa-700:#5B478F;  /* violet brand */
  --amopa-500:#887AAD;  /* mauve moyen */
  --amopa-200:#B0A3D3;  /* lavande */
  --amopa-50:#E7E0F5;   /* lavande très claire */

  --bg:#0e0b18;
  --paper:#ffffff;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.74);
  --line:rgba(255,255,255,.12);

  --ink:#16112a;
  --subink:rgba(22,17,42,.72);

  --accent:var(--amopa-700);
  --accent2:var(--amopa-200);

  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.40);
  --shadow2:0 12px 32px rgba(22,17,42,.14);
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 12% 8%, rgba(91,71,143,.38), transparent 62%),
    radial-gradient(900px 480px at 86% 12%, rgba(176,163,211,.22), transparent 62%),
    radial-gradient(1000px 620px at 45% 92%, rgba(136,122,173,.16), transparent 62%),
    var(--bg);
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(69,56,106,.70);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.logo{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, var(--amopa-700), var(--amopa-900));
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}
.brand .title{display:flex;flex-direction:column;line-height:1.1}
.brand strong{font-weight:900;letter-spacing:.2px}
.brand span{font-size:12.5px;color:rgba(255,255,255,.80)}

.menu{display:flex;align-items:center;gap:18px;padding:0;margin:0;list-style:none}
.menu a{
  font-weight:800;font-size:14px;
  color:rgba(255,255,255,.90);
  padding:10px 12px;border-radius:12px
}
.menu a:hover{background:rgba(255,255,255,.10)}
.actions{display:flex;align-items:center;gap:10px;min-width:260px;justify-content:flex-end}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:42px;padding:0 14px;border-radius:14px;
  font-weight:900;font-size:14px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.94);
}
.btn.secondary:hover{background:rgba(255,255,255,.14)}
.btn.primary{
  background: linear-gradient(135deg, var(--amopa-700), var(--amopa-900));
  color:#fff;
  box-shadow: 0 14px 34px rgba(91,71,143,.30);
}
.btn.primary:hover{box-shadow: 0 18px 44px rgba(91,71,143,.40)}
.btn.ghost{
  background:transparent;
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.burger{display:none}

/* Hero */
.hero{padding:56px 0 26px}
.heroCard{
  border-radius:calc(var(--radius) + 8px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(91,71,143,.55), transparent 60%),
    radial-gradient(700px 360px at 86% 18%, rgba(176,163,211,.28), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}
.heroInner{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
  padding:42px;
  align-items:start;
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;font-size:13px;color:rgba(255,255,255,.94);
  width:fit-content;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--amopa-200);
  box-shadow: 0 0 0 6px rgba(176,163,211,.18);
}
h1{
  font-family:"Playfair Display",serif;
  font-size:54px;line-height:1.05;margin:16px 0 12px;letter-spacing:.2px;
}
.lead{
  margin:0 0 18px;
  font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);
  max-width:72ch;
}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap}

/* Hero right logo block */
.heroSideLogo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  min-height:260px;
}
.heroSideLogo img{
  max-width:100%;
  width:250px;
  height:auto;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

/* Sections */
.section{padding:26px 0 56px}
.sectionHeader{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px
}
.sectionHeader h2{
  margin:0;font-family:"Playfair Display",serif;font-size:34px;letter-spacing:.2px
}
.sectionHeader p{margin:0;color:rgba(255,255,255,.78);max-width:62ch;line-height:1.5}

/* Upcoming activities */
.featuredGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  margin-bottom:16px;
}
.featured{
  border-radius: var(--radius);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: var(--shadow2);
  border: 1px solid rgba(22,17,42,.10);
  overflow:hidden;
  position:relative;
  min-height: 270px;
  padding: 18px;
}
.featured:before{
  content:"";
  position:absolute;inset:-80px -120px auto auto;
  width:260px;height:260px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(91,71,143,.26), transparent 60%);
  pointer-events:none;
}
.featuredTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background: rgba(176,163,211,.28);
  color: var(--amopa-900);
  font-weight: 1000;
  font-size: 13px;
  width: fit-content;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(22,17,42,.10);
  background: rgba(22,17,42,.04);
  font-size: 12.5px;
  font-weight: 1000;
  color: rgba(22,17,42,.78);
  width: fit-content;
}
.featured h3{margin:0 0 8px;font-size:22px;line-height:1.2}
.featured .meta{
  display:flex;flex-wrap:wrap;gap:10px 14px;
  color: rgba(22,17,42,.78);
  font-size: 14px;
}
.featured .desc{margin:10px 0 0;color:rgba(22,17,42,.72);line-height:1.6;max-width:72ch}
.featuredBottom{
  margin-top: 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top: 12px;border-top:1px solid rgba(22,17,42,.10);
}
.price{font-weight: 1000; font-size: 16px}

.btnCard{
  height:40px;padding:0 12px;border-radius:12px;font-weight:1000;
  border:1px solid rgba(91,71,143,.28);
  background: rgba(176,163,211,.26);
  color: var(--amopa-900);
}
.btnCard:hover{
  background: rgba(176,163,211,.34);
  border-color: rgba(91,71,143,.36);
}
.btnCard.disabled{opacity:.55;pointer-events:none}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.card{
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  border: 1px solid rgba(22,17,42,.10);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.card:hover{transform: translateY(-3px); box-shadow: 0 18px 52px rgba(22,17,42,.18)}
.cardBody{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.cardTitle{font-weight:1000;font-size:18px;line-height:1.25;margin:0}
.metaSmall{display:flex;flex-wrap:wrap;gap:10px 14px;color:rgba(22,17,42,.72);font-size:13.5px;line-height:1.35}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(22,17,42,.10);
  background: rgba(22,17,42,.04);
  font-size:12.5px;font-weight:1000;color: rgba(22,17,42,.78);
  width:fit-content;
}
.tag{
  position:absolute;top:14px;right:14px;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:1000;color:#fff;
  background: linear-gradient(135deg, var(--amopa-700), var(--amopa-900));
}
.tag.full{ background: linear-gradient(135deg, #7a1f2b, #b91c1c); }
.cardFooter{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:8px;border-top:1px solid rgba(22,17,42,.10);
}

.sectionCtaRow{display:flex;justify-content:center;margin-top:18px}
.btnWide{
  height:46px;padding:0 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  font-weight: 1000;
}
.btnWide:hover{background: rgba(255,255,255,.14)}

/* Partners with photos */
.partners{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.partnerCard{
  border-radius: calc(var(--radius) + 8px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  display:grid;
  grid-template-columns: 160px 1fr;
  min-height: 150px;
  position:relative;
}
.partnerCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 240px at 20% 20%, rgba(91,71,143,.18), transparent 62%);
  pointer-events:none;
}
.partnerCard img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter: saturate(1.05) contrast(1.05);
}
.partnerBody{padding:16px;position:relative}
.partnerBody h3{margin:0 0 6px;font-size:18px}
.partnerBody p{margin:0 0 12px;color: rgba(255,255,255,.82);line-height:1.5}
.partnerBody .btn{height:40px;border-radius:12px}

/* Quiz */
.quizGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Quiz cards with images */
.quizCard{overflow:hidden;}
.quizThumb{
  position: relative;
  height: 140px;
  width: 100%;
  overflow: hidden;
}
.quizThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
.quizThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(22,17,42,.55) 100%),
    radial-gradient(420px 240px at 20% 20%, rgba(91,71,143,.18), transparent 60%);
  pointer-events:none;
}
.quizBadge{
  position:absolute;
  left:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  color:#fff;
  background: linear-gradient(135deg, var(--amopa-700), var(--amopa-900));
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
}

/* Footer */
footer{
  border-top:1px solid rgba(255,255,255,.14);
  padding:34px 0 46px;
  color:rgba(255,255,255,.82);
  background: rgba(69,56,106,.18);
}
.footerGrid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
.footerTitle{font-weight:1000;color:rgba(255,255,255,.96);margin:0 0 10px}
.small{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.links a{display:block;padding:6px 0;color:rgba(255,255,255,.82)}
.links a:hover{color:rgba(255,255,255,.98)}

@media (max-width: 980px){
  .menu{display:none}
  .burger{display:inline-flex}
  .actions{min-width:auto}
  .heroInner{grid-template-columns:1fr;padding:30px}
  h1{font-size:42px}
  .heroSideLogo{min-height:auto}
  .heroSideLogo img{width:210px}
  .featuredGrid{grid-template-columns:1fr}
  .grid,.partners,.quizGrid{grid-template-columns:1fr}
  .partnerCard{grid-template-columns:120px 1fr}
  .footerGrid{grid-template-columns:1fr}
}

/* Dropdown wrapper */
.amopaDropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Menu caché par défaut */
.amopaDropdownMenu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;              /* pratique côté header */
  min-width: 280px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(22,17,42,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);

  display: none;
  z-index: 9999;         /* ? au-dessus de tout */
}

/* Classe "open" = visible */
.amopaDropdown.open .amopaDropdownMenu{
  display: block;
}

/* Items */
.amopaDropdownItem{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.amopaDropdownItem:hover{
  background: rgba(255,255,255,.10);
}