:root{
  --bg0:#070910;
  --bg1:#0b1020;
  --txt:#e9ecf3;
  --muted:rgba(233,236,243,.72);
  --line:rgba(255,255,255,.10);

  --a:#7c5cff;
  --b:#2ee9a6;
  --c:#ff4d8a;
  --d:#45d3ff;

  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --shadow2: 0 12px 40px rgba(0,0,0,.35);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;

  --pad: clamp(16px, 2vw, 26px);
  --gap: clamp(14px, 1.8vw, 22px);

  --maxW: 1600px;
}

.trakaContainer{
  width: min(var(--maxW), calc(100% - 2*clamp(16px, 3vw, 34px)));
  margin: 0 auto;
}

/* ====== HERO (tu gardes ton HTML, on stylise seulement si besoin) ====== */
.donPage{
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(124,92,255,.12), transparent 55%),
    radial-gradient(900px 700px at 85% 25%, rgba(46,233,166,.10), transparent 55%),
    radial-gradient(800px 700px at 40% 95%, rgba(255,77,138,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--txt);
  overflow-x:hidden;
}

.donHero{
  position: relative;
  padding: clamp(26px, 6vw, 72px) 0 clamp(18px, 4vw, 40px);
}
.donHero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1400px 900px at 20% 25%, rgba(46,233,166,.16), transparent 60%),
    radial-gradient(1200px 900px at 85% 30%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 700px at 55% 95%, rgba(255,77,138,.10), transparent 65%),
    url(var(--don-hero)) center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  opacity:.35;
}
.donHero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(7,9,16,.75), rgba(11,16,32,.92));
}
.donHero-inner{ position:relative; }

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,236,243,.85);
}
.accent{ color: rgba(46,233,166,1); }

.donHero h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 3.2vw, 54px);
  letter-spacing: -0.02em;
  max-width: 1100px;
}
.lead{
  margin: 0 0 18px;
  color: rgba(233,236,243,.78);
  line-height: 1.75;
  max-width: 920px;
}

.donHero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}

.chipBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,236,243,.92);
  font-weight: 700;
  font-size: 13px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.chipBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.chipBtn.is-hot{
  border: 0;
  color: #07121a;
  background: linear-gradient(90deg, rgba(46,233,166,1), rgba(69,211,255,1), rgba(124,92,255,1));
  box-shadow: 0 18px 70px rgba(0,0,0,.40);
}
.chipIco{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}
.chipIco svg{ width: 18px; height: 18px; }

.donHero-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 16px;
}

.metricCard{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.metricCard .mIco{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}
.metricCard svg{ width: 20px; height: 20px; }
.metricCard strong{ display:block; font-size: 14px; }
.metricCard span{ display:block; font-size: 12px; color: rgba(233,236,243,.70); }

/* ====== STAGE ====== */
.donLine{
  padding: clamp(22px, 4.8vw, 70px) 0 clamp(36px, 6vw, 90px);
}

.donLineHead{
  margin-bottom: clamp(14px, 2vw, 22px);
}

.stageChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,236,243,.85);
}
.stageChip .dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--b), var(--a));
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}
.donLineHead h2{
  margin: 10px 0 6px;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.01em;
}
.stageLead{
  margin: 0;
  color: rgba(233,236,243,.75);
  max-width: 980px;
  line-height: 1.7;
}

/* ====== ✅ 3 COLONNES ====== */
.donTriCols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

/* Panel base */
.donPanel{
  position: relative;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-width: 0;
}
.donPanel::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(124,92,255,.16), transparent 65%),
    radial-gradient(520px 260px at 90% 80%, rgba(46,233,166,.12), transparent 60%);
  opacity:.95;
}
.donPanel > *{ position: relative; }

.donPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px var(--pad);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.donPanelTitle{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.panelIco{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.panelIco.alt{ background: rgba(0,0,0,.22); }
.panelIco svg{ width: 20px; height: 20px; }

.donPanelTitle strong{ display:block; font-size: 14px; letter-spacing:.01em; }
.donPanelTitle span{
  display:grid;
  font-size: 12px;
  color: rgba(233,236,243,.68);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.miniBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  color: rgba(233,236,243,.92);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.miniBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

/* Accents per column */
.donPanel-don::before{
  background:
    radial-gradient(560px 280px at 20% 10%, rgba(46,233,166,.18), transparent 65%),
    radial-gradient(560px 280px at 90% 80%, rgba(69,211,255,.14), transparent 60%);
}
.donPanel-adh::before{
  background:
    radial-gradient(560px 280px at 20% 10%, rgba(124,92,255,.18), transparent 65%),
    radial-gradient(560px 280px at 90% 80%, rgba(46,233,166,.12), transparent 60%);
}
.donPanel-adh2::before{
  background:
    radial-gradient(560px 280px at 20% 10%, rgba(255,77,138,.14), transparent 65%),
    radial-gradient(560px 280px at 90% 80%, rgba(124,92,255,.14), transparent 60%);
}

/* Mini text */
.miniText{
  padding: 14px var(--pad) 0;
}
.miniText p{
  margin: 0;
  color: rgba(233,236,243,.76);
  line-height: 1.7;
  font-size: 13px;
}

/* ✅ “PUITS” iframe encastré (sans vide) */
.embedFrame{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(0,0,0,.32);
}

.embedFrame::before{ content:""; display:block; padding-top: 132%; }
.embedFrame.is-don::before{ padding-top: 152%; }
.embedFrame.is-adh::before{ padding-top: 152%; }
.embedFrame.is-adh2::before{ padding-top: 152%; }

.embedFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background: transparent;
}

.embedHint{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 var(--pad) 16px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(233,236,243,.70);
  font-size: 12px;
}
.hintDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c), var(--d));
  box-shadow: 0 0 0 5px rgba(255,77,138,.12);
}

/* ====== PARTNER ROW ====== */
.partnerRow{ margin-top: var(--gap); }

.donPanel-partner::before{
  background:
    radial-gradient(560px 280px at 20% 10%, rgba(255,77,138,.14), transparent 65%),
    radial-gradient(560px 280px at 90% 80%, rgba(124,92,255,.14), transparent 60%);
}

.partnerSplit{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--pad);
}

.partnerMedia{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.partnerImg{ position: relative; display:block; }
.partnerImg img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.partnerGlow{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 30% 25%, rgba(46,233,166,.22), transparent 60%),
    radial-gradient(closest-side at 75% 65%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(closest-side at 40% 95%, rgba(255,77,138,.18), transparent 65%);
  opacity:.9;
  pointer-events:none;
  mix-blend-mode: screen;
}

.partnerBody{ display:flex; flex-direction:column; gap: 12px; }
.partnerP{ margin:0; color: rgba(233,236,243,.78); line-height:1.7; }

.partnerActions{ display:flex; flex-wrap:wrap; gap: 10px; }
.btnPrimary, .btnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btnPrimary{
  color:#061018;
  border:0;
  background: linear-gradient(90deg, rgba(46,233,166,1), rgba(69,211,255,1), rgba(124,92,255,1));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.btnPrimary:hover{ transform: translateY(-1px); filter: brightness(1.04) saturate(1.05); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.btnGhost{
  color: rgba(233,236,243,.92);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.btnGhost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }

.partnerPills{ display:flex; flex-wrap:wrap; gap: 10px; }
.pill,.pill2{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(233,236,243,.74);
  font-size: 12px;
}
.pillDot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--b), var(--a));
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}

/* ====== CTA FINAL ====== */
.donFinal{
  margin-top: var(--gap);
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.finalChip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,236,243,.80);
}
.donFinal h3{ margin: 10px 0 6px; font-size: 18px; }
.donFinal p{ margin:0; color: rgba(233,236,243,.72); }
.finalRight{ display:flex; flex-wrap:wrap; gap: 10px; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1150px){
  .donHero-metrics{ grid-template-columns: 1fr; }
  .donTriCols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .embedFrame::before{ padding-top: 118%; }
  .partnerSplit{ grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 820px){
  .donTriCols{ grid-template-columns: 1fr; }
  .partnerSplit{ grid-template-columns: 1fr; }
  .embedFrame::before{ padding-top: 120%; }
}
@media (prefers-reduced-motion: reduce){
  .chipBtn,.miniBtn,.btnPrimary,.btnGhost{ transition:none !important; }
}