@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700;800&display=swap');

/* ============================================================
   Movétan — Facelift V2 (brand-forward antillais)
   Couche ADDITIVE : design tokens + re-skin fondamental.
   Chargée APRÈS style.css / responsive.css / night-mode.css
   (donc surcharge par ordre de cascade).
   Phase 0 : couleurs + police titres (Clash Display) + rayons.
   Aucun changement de layout / taille de base ici.
   ============================================================ */

/* ── Tokens (clair) ─────────────────────────────────────── */
:root{
  --mv-ink:#19271F;        /* titres */
  --mv-body:#3F453F;       /* corps */
  --mv-muted:#7A837D;      /* secondaire */
  --mv-bg:#FCF8F3;         /* fond crème chaud */
  --mv-surface:#FFFFFF;    /* cartes */
  --mv-line:#ECE4D9;       /* bordures */
  --mv-green:#16A34A;      /* accent vert VIF (clair) — liens, icônes, highlights */
  --mv-green-btn:#16A34A;  /* bouton vert vif (clair) — texte blanc gras */
  --mv-coral:#FF5E3A;      /* accent corail */
  --mv-teal:#0B6E6E;       /* sections profondes */
  --mv-radius:14px;
  --mv-radius-sm:10px;
}

/* ── Tokens (nuit) — branchés sur TA classe .night-mode ──── */
html.night-mode{
  --mv-ink:#F2F5F1;
  --mv-body:#A7B0AA;
  --mv-muted:#828D86;
  --mv-bg:#111315;         /* on garde ton dark neutre actuel */
  --mv-surface:#1A1D1F;
  --mv-line:#272B30;
  --mv-green:#16A34A;
  --mv-green-btn:#16A34A;
  --mv-coral:#FF6E4D;
  --mv-teal:#0D4444;
}

/* ── Fond chaleureux (clair ; la nuit garde son fond via night-mode.css) ── */
/* !important pour battre style.css:333 body{background:#F5F7F9 !important} ;
   la nuit reste sombre car .night-mode body{...!important} a une specificite superieure. */
body{ background:var(--mv-bg) !important; }

/* ── Titres en Clash Display (les deux modes) ───────────── */
.main-title h3,
.event-main-title,
.hero-banner-content h1,
.hero-banner-content h2,
.featured-panel h3,
.featured-mobile-bar strong,
.storefront-section .main-title h3,
.blog-highlight-section .main-title h3,
.host-step-block .main-title h3,
.our-organisations-block .main-title h3{
  font-family:'League Spartan', sans-serif;
  letter-spacing:-.2px;
}
.main-title h3{ color:var(--mv-ink); }

/* ── Logo en League Spartan (surcharge style.css .logo-text Clash Display) ── */
/* League Spartan a une casse plus petite que Clash Display -> on remonte de ~2px */
.logo-text{ font-family:'League Spartan', sans-serif !important; letter-spacing:.2px; font-size:24px !important; }
.res-main-logo .logo-text{ font-family:'League Spartan', sans-serif !important; letter-spacing:.2px; font-size:18px !important; }

/* ── Boutons primaires : vert AA-conforme + rayon moderne ── */
.main-btn,
.btn-hover{
  background:var(--mv-green-btn);
  border-radius:var(--mv-radius-sm);
}
.main-btn:hover,
.btn-hover:hover{ background:var(--mv-green); }

/* ── Cartes : rayon adouci ──────────────────────────────── */
.main-card{ border-radius:var(--mv-radius); }
.event-thumbnail{ border-radius:var(--mv-radius) var(--mv-radius) 0 0; }
.event-thumbnail .thumbnail-img img{ border-radius:var(--mv-radius) var(--mv-radius) 0 0; }

/* ============================================================
   SECTION « 4 ÉTAPES » — bandeau teal + timeline (remplace le
   stepper plat à onglets). Badges corail, titres League Spartan
   blancs. var(--mv-teal) -> auto clair/nuit.
   ============================================================ */
.host-step-block{ background:transparent !important; }   /* le bandeau flotte sur le fond crème/nuit */
.mv-steps-band{
  background:var(--mv-teal);
  border-radius:26px;
  padding:54px 44px;
  box-shadow:0 18px 50px rgba(11,110,110,.18);
}
.night-mode .mv-steps-band{ box-shadow:0 18px 50px rgba(0,0,0,.35); }
.mv-steps-band .main-title{ margin-bottom:8px; }
.mv-steps-band .main-title h3{ color:#fff !important; }
.mv-steps-band .main-title p{ color:rgba(255,255,255,.80); }
.mv-steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:34px;
}
.mv-step{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:24px 22px;
  transition:transform .25s ease, background .25s ease;
}
.mv-step:hover{ transform:translateY(-4px); background:rgba(255,255,255,.10); }
.mv-step-num{
  width:42px; height:42px;
  border-radius:13px;
  background:var(--mv-coral);
  color:#fff;
  font-family:'League Spartan', sans-serif;
  font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  box-shadow:0 6px 16px rgba(255,94,58,.35);
}
.mv-step h4{
  color:#fff; font-size:18px; font-weight:600;
  margin:0 0 8px;
  font-family:'League Spartan', sans-serif; letter-spacing:.2px;
}
.mv-step p{ color:rgba(255,255,255,.74); font-size:14px; line-height:1.55; margin:0; }
/* connecteur « timeline » entre cartes (desktop large uniquement) */
@media (min-width:992px){
  .mv-step:not(:last-child)::after{
    content:""; position:absolute; top:45px; right:-11px;
    width:22px; height:2px; background:rgba(255,255,255,.20);
  }
}
@media (max-width:991px){ .mv-steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){
  .mv-steps-grid{ grid-template-columns:1fr; }
  .mv-steps-band{ padding:38px 22px; border-radius:20px; }
}

/* ============================================================
   POLISH bannière sponsorisée (desktop ≥745px) : texte plus
   grand + vrai centrage vertical (les tags avaient margin-top:auto
   qui collait le contenu en haut).
   ============================================================ */
@media (min-width:745px){
  .featured-panel{ padding:28px 26px !important; }
  .featured-panel h3{ font-size:28px !important; margin-bottom:16px !important; }
  .featured-panel-details p{ font-size:18px !important; }
  .featured-panel-tags{ margin-top:18px !important; }   /* groupé au contenu -> bloc vraiment centré V */
}

/* ============================================================
   CARTES EVENT — re-skin facelift (CSS only, pas de changement
   HTML). Ombres chaudes + footer nettoyé UNIQUEMENT.
   Polices / tailles / couleurs du TEXTE des cartes INCHANGÉES
   (demande Gaspard). Le hover/zoom image existant est conservé.
   ============================================================ */
.main-card{
  border:1px solid var(--mv-line);
  box-shadow:0 4px 16px rgba(25,39,31,.06);
}
.main-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(25,39,31,.13);
}
.event-footer{
  background:transparent;
  border-top:1px solid var(--mv-line);
}