/* =====================================================================
   VISION PME — Site public (landing + pages)
   ===================================================================== */

.site { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.site main { flex: 1; }

.container { width: min(1180px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) { .container { width: calc(100% - 36px); } }

/* ==================== NAVBAR ==================== */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  transition: background var(--dur-slow) var(--ease), box-shadow var(--dur-slow), border-color var(--dur-slow);
  border-bottom: 1px solid transparent;
}
.site-nav .container { display: flex; align-items: center; gap: var(--s-8); height: 76px; }
.site-nav .brand-logo { height: 30px; width: auto; cursor: pointer; }

.site-nav.solid, .site-nav.always-solid {
  background: var(--nav-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px -18px rgba(12, 23, 19, 0.25);
}
/* sur hero sombre : logo + liens blancs tant que transparent */
.site-nav.on-hero:not(.solid) .nav-link { color: rgba(255, 255, 255, 0.82); }
.site-nav.on-hero:not(.solid) .nav-link:hover,
.site-nav.on-hero:not(.solid) .nav-link.active { color: #fff; }
.site-nav.on-hero:not(.solid) .brand-logo { background-color: #fff; }
.site-nav.on-hero:not(.solid) .nav-burger { color: #fff; }

.nav-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-link {
  position: relative; padding: 9px 13px; border-radius: var(--r-sm);
  font: 500 var(--fs-sm)/1 var(--font-body); color: var(--text-muted);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast);
}
.nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); font-weight: 600; }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-burger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; }
.nav-burger .icon { width: 26px; height: 26px; }

@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; place-items: center; }
  .nav-actions .btn-outline { display: none; }
}

/* tiroir mobile */
.nav-drawer {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) + 1);
  background: rgba(5, 12, 9, 0.5); backdrop-filter: blur(4px);
  animation: fade-in var(--dur);
}
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--elevated); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6);
  animation: drawer-in var(--dur-slow) var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.nav-drawer-panel .nav-link { font-size: var(--fs-base); padding: 13px 10px; }
.nav-drawer-panel .btn { margin-top: var(--s-2); }
.nav-drawer-close { align-self: flex-end; }

/* ==================== HERO ==================== */
.hero {
  position: relative; overflow: hidden;
  min-height: min(92dvh, 880px);
  display: flex; align-items: center;
  background: var(--night);
  color: #fff;
  padding: 140px 0 96px;
}
.hero-video {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: max(100vw, 178vh); height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%);
  border: 0;
}
.hero-video .video-fallback { position: absolute; inset: 0; background: radial-gradient(900px 600px at 70% 20%, #16352A, var(--night)); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(7, 14, 11, 0.92) 8%, rgba(7, 14, 11, 0.72) 46%, rgba(7, 14, 11, 0.45) 100%),
              linear-gradient(to top, rgba(7, 14, 11, 0.9), transparent 36%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 760px; display: grid; gap: var(--s-6); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--fs-xs)/1 var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--green); }
.hero .kicker { color: rgba(255, 255, 255, 0.85); }

.hero h1 { font-size: var(--fs-display); font-weight: 700; color: #fff; max-width: 16ch; }
.hero h1 .grad {
  background: linear-gradient(92deg, var(--green) 10%, #7CF5C8 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.78); max-width: 56ch; line-height: 1.65; }
.hero-ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.hero-note { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); }
.hero-note a { color: rgba(255, 255, 255, 0.8); }

.hero .btn-hero-ghost {
  background: rgba(255, 255, 255, 0.07); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}
.hero .btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }

.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%);
  color: rgba(255,255,255,0.55); animation: hint-bob 2.2s var(--ease) infinite;
}
.hero-scroll-hint .icon { width: 22px; height: 22px; }
@keyframes hint-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ==================== BANDE STATS ==================== */
.stats-band { position: relative; z-index: 3; margin-top: -56px; }
.stats-band .grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-lg);
  padding: var(--s-8);
}
.stat-big { display: grid; gap: 4px; padding: var(--s-2) var(--s-4); border-left: 3px solid var(--green); }
.stat-big .num { font: 700 clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -0.02em; }
.stat-big .lbl { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) { .stats-band .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats-band .grid { grid-template-columns: 1fr; padding: var(--s-6); } }

/* ==================== SECTIONS GÉNÉRIQUES ==================== */
.section { padding: var(--s-24) 0; }
.section.tight { padding: var(--s-16) 0; }
.section-head { max-width: 720px; display: grid; gap: var(--s-4); margin-bottom: var(--s-12); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head h2 { font-size: var(--fs-h1); }
.section-head h2 em { font-style: normal; color: var(--green-text); }
.section-head .lead { color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.6; }
.kicker.green { color: var(--green-text); }

/* section sombre */
.section-dark { background: var(--night); color: #fff; }
.section-dark .section-head .lead { color: rgba(255, 255, 255, 0.7); }
.section-dark .kicker { color: rgba(255, 255, 255, 0.85); }

/* fond teinté */
.section-tint { background: var(--surface-2); }
[data-theme="dark"] .section-tint { background: var(--surface-1); }

/* ==================== MISSION ==================== */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; }
@media (max-width: 920px) { .mission-grid { grid-template-columns: 1fr; gap: var(--s-10); } }
.mission-copy { display: grid; gap: var(--s-5); }
.mission-copy h2 { font-size: var(--fs-h1); }
.mission-copy p { color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.65; }
.mission-points { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.mission-points li { display: flex; gap: 12px; align-items: flex-start; list-style: none; color: var(--text-muted); }
.mission-points .icon { width: 20px; height: 20px; color: var(--green-text); flex: none; margin-top: 2px; }
ul.mission-points { padding: 0; margin: 0; }

.video-frame {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--night);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: linear-gradient(135deg, var(--green), transparent 50%);
  border-radius: inherit; opacity: 0.5;
}

/* ==================== CARTES ACTIONS ==================== */
.actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 1020px) { .actions-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .actions-grid { grid-template-columns: 1fr; } }
.action-card {
  position: relative; overflow: hidden;
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-8) var(--s-6);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.action-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(0, 206, 134, 0.4); }
.action-card .ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--green-text);
  transition: transform var(--dur) var(--ease-spring), background var(--dur), color var(--dur);
}
.action-card:hover .ico { background: var(--green); color: var(--green-ink); transform: scale(1.06) rotate(-4deg); }
.action-card .ico .icon { width: 24px; height: 24px; }
.action-card h3 { font-size: var(--fs-h3); }
.action-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.action-card .num {
  position: absolute; top: var(--s-4); right: var(--s-5);
  font: 700 2.6rem/1 var(--font-display); color: var(--surface-3);
  transition: color var(--dur);
}
.action-card:hover .num { color: var(--ok-soft); }

/* ==================== BOURSES ==================== */
.bourses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 920px) { .bourses-grid { grid-template-columns: 1fr; } }
.bourse-card {
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-8); border-radius: var(--r-xl);
  background: var(--surface-1); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.bourse-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(0, 206, 134, 0.45); }
.bourse-card .top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.bourse-card .montant { font: 700 2rem/1 var(--font-display); color: var(--green-text); letter-spacing: -0.02em; }
.bourse-card h3 { font-size: var(--fs-h3); }
.bourse-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.bourse-card .meta { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-subtle); }
.bourse-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.bourse-card .meta .icon { width: 14px; height: 14px; }

/* ==================== PARCOURS (timeline) ==================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); counter-reset: step; }
@media (max-width: 1020px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-8) var(--s-6);
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out);
}
.step:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 206, 134, 0.5); transform: translateY(-4px); }
.step .n {
  counter-increment: step;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: var(--green-ink);
  font: 700 var(--fs-base)/1 var(--font-display);
}
.step .n::before { content: counter(step); }
.step h3 { font-size: var(--fs-h3); color: #fff; }
.step p { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); line-height: 1.6; }
.step .link-arrow { color: var(--green); }

/* ==================== GALAS ==================== */
.galas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 920px) { .galas-grid { grid-template-columns: 1fr; } }
.gala-card {
  position: relative; overflow: hidden;
  display: grid; gap: var(--s-3); align-content: end;
  min-height: 320px; padding: var(--s-8) var(--s-6) var(--s-6);
  border-radius: var(--r-xl); color: #fff;
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
  cursor: pointer;
}
.gala-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.gala-card .bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #143226 0%, var(--night) 90%), radial-gradient(420px 300px at 80% 0%, rgba(0, 206, 134, 0.35), transparent 70%);
  background-color: var(--night-2);
  transition: transform var(--dur-slow) var(--ease-out);
}
.gala-card:hover .bg { transform: scale(1.04); }
.gala-card > :not(.bg) { position: relative; z-index: 1; }
.gala-card .date-pill {
  position: absolute; top: var(--s-5); left: var(--s-5); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font: 600 var(--fs-xs)/1 var(--font-body);
}
.gala-card .date-pill .icon { width: 14px; height: 14px; color: var(--green); }
.gala-card h3 { font-size: 1.5rem; }
.gala-card .lieu { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); }
.gala-card .lieu .icon { width: 15px; height: 15px; color: var(--green); }
.gala-card p { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); }

/* ==================== PARTENAIRES ==================== */
.partner-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-16); align-items: center; }
@media (max-width: 920px) { .partner-band { grid-template-columns: 1fr; } }
.partner-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ptype {
  display: flex; align-items: center; gap: 12px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
  font: 600 var(--fs-sm)/1.3 var(--font-body);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.ptype:hover { border-color: rgba(0, 206, 134, 0.5); transform: translateX(3px); }
.ptype .icon { width: 19px; height: 19px; color: var(--green-text); flex: none; }
@media (max-width: 560px) { .partner-types { grid-template-columns: 1fr; } }

/* ==================== ÉQUIPE ==================== */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 1020px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  display: grid; gap: var(--s-2); justify-items: center; text-align: center;
  padding: var(--s-8) var(--s-5);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.team-card .avatar { width: 86px; height: 86px; font-size: 1.5rem; border: 3px solid var(--ok-soft); }
.team-card h3 { font-size: var(--fs-base); margin-top: var(--s-2); }
.team-card .role { color: var(--green-text); font: 600 var(--fs-xs)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; }

/* ==================== CTA FINAL ==================== */
.cta-final {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(120deg, #0E241B, var(--night) 65%);
  border: 1px solid rgba(0, 206, 134, 0.25);
  padding: var(--s-20) var(--s-8);
  text-align: center; color: #fff;
  display: grid; gap: var(--s-6); justify-items: center;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 320px at 50% -10%, rgba(0, 206, 134, 0.28), transparent 70%);
  pointer-events: none;
}
.cta-final > * { position: relative; }
.cta-final h2 { font-size: var(--fs-h1); max-width: 22ch; }
.cta-final p { color: rgba(255, 255, 255, 0.7); max-width: 58ch; font-size: var(--fs-lg); }
.cta-final .hero-ctas { justify-content: center; }

/* ==================== GAGNANTS ==================== */
.gagnants-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 920px) { .gagnants-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gagnants-grid { grid-template-columns: 1fr; } }
.gagnant-card {
  display: grid; gap: var(--s-3); padding: var(--s-6);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.gagnant-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gagnant-card .head { display: flex; align-items: center; gap: var(--s-3); }
.gagnant-card h3 { font-size: var(--fs-base); }
.gagnant-card .ent { color: var(--text-subtle); font-size: var(--fs-xs); }
.gagnant-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ==================== CONTACT ==================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-16); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: var(--s-5); }
.contact-line { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-line .ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--ok-soft); color: var(--green-text);
}
.contact-line .ico .icon { width: 20px; height: 20px; }
.contact-line b { display: block; font-weight: 600; }
.contact-line span { color: var(--text-muted); font-size: var(--fs-sm); }
.contact-form { display: grid; gap: var(--s-4); padding: var(--s-8); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ==================== PAGE HEADER (sous-pages) ==================== */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--night); color: #fff;
  padding: 168px 0 88px;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 420px at 85% 0%, rgba(0, 206, 134, 0.22), transparent 65%);
}
.page-hero .container { position: relative; display: grid; gap: var(--s-4); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 20ch; }
.page-hero .lead { color: rgba(255, 255, 255, 0.72); max-width: 60ch; font-size: var(--fs-lg); }
.page-hero .kicker { color: rgba(255, 255, 255, 0.85); }

/* ==================== FOOTER ==================== */
.site-footer { background: var(--night); color: rgba(255, 255, 255, 0.72); margin-top: auto; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s-10);
  padding: var(--s-20) 0 var(--s-12);
}
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col { display: grid; gap: var(--s-3); align-content: start; }
.footer-col .brand-logo { height: 28px; background-color: #fff; }
.footer-col h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-2); }
.footer-col a { display: block; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); text-decoration: none; padding: 3px 0; cursor: pointer; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--green); }
.footer-col p { font-size: var(--fs-sm); line-height: 1.65; color: rgba(255, 255, 255, 0.6); }
.footer-contact { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: rgba(255,255,255,0.7); }
.footer-contact .icon { width: 15px; height: 15px; color: var(--green); flex: none; }
.newsletter { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.newsletter .input { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); color: #fff; }
.newsletter .input::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.45);
}
.footer-bottom .links { display: flex; gap: var(--s-5); }
.footer-bottom a { color: rgba(255, 255, 255, 0.55); text-decoration: none; cursor: pointer; }
.footer-bottom a:hover { color: var(--green); }