/* =========================================================
   SPORT ÉDUC’ACTION — STYLES GLOBAUX
   Structure :
     00. Variables (palette & tokens)
     10. Reset & bases accessibles
     20. Typo / helpers / layout
     30. Composants (boutons, cartes, listes, formulaire)
     40. Header & nav (desktop)
     50. Menu mobile (sheet bottom)
     60. Sections "feature" (panneaux biseautés)
     70. Badges & médias
     80. CTA mobile flottant
     90. Footer
     95. Responsive (breakpoints)
     99. Thème sombre (opt-in via toggle)
   ========================================================= */

/* ========== 00. VARIABLES ========== */
:root{
  /* Palette */
  --violet-brand:#68079C;
  --violet:#2b247b;
  --bleu:#2236d2;
  --bleu-fonce:#1b1f4a;
  --orange:#ff7a2f;
  --jaune:#ffd277;
  --blanc:#ffffff;

  /* Gris UI (thème clair par défaut) */
  --g-50:#f9fafb; --g-100:#f3f4f6; --g-200:#e5e7eb;
  --g-300:#d1d5db; --g-600:#4b5563;

  /* Tokens layout */
  --container:1100px;
  --radius:20px;
  --notch:46px; /* biseau des panneaux */
}

/* ========== 10. RESET & BASES ACCESSIBLES ========== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.7; color:#222; background:#fff;
  color-scheme: light;              /* force clair par défaut */
}
img{max-width:100%;display:block}
p{margin:0 0 1rem}
a{color:#0c63e4;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid #6ea8ff; outline-offset:2px}

/* Pas de débordement horizontal */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:6px}

/* ========== 20. TYPO / HELPERS / LAYOUT ========== */
h1,h2,h3{
  font-family:'Caveat',cursive; font-weight:700; letter-spacing:.3px;
  margin:0 0 .5rem; line-height:1.25;
}
h1{color:var(--bleu-fonce);font-size:clamp(30px,4.8vw,52px)}
h2{color:var(--orange);font-size:clamp(26px,3.6vw,38px)}
h3{color:var(--bleu-fonce);font-size:clamp(20px,2.6vw,28px)}

.container{width:min(var(--container),92%);margin-inline:auto}
.section{padding:40px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stack>*+*{margin-top:.75rem}
.lead{font-size:1.08rem}
.muted{color:#6b7280}
.actions{display:flex;gap:12px;align-items:center;margin-top:.75rem}

/* ========== 30. COMPOSANTS ========== */
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius:10px;
  background:#111827; color:#fff; border:1px solid #111827;
}
.btn:hover{filter:brightness(1.05);text-decoration:none}

.link{font-weight:600}

.card{border:1px solid var(--g-200);border-radius:12px;padding:18px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.list{margin:0;padding-left:1rem}
.list li{margin:.5rem 0}

.form .field{display:grid;gap:8px;margin-bottom:14px}
.form label{font-weight:600}
.form input,.form textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--g-300);border-radius:8px;background:#fff
}
.form input:focus,.form textarea:focus{outline:2px solid #93c5fd;border-color:#93c5fd}

/* ========== 40. HEADER & NAV DESKTOP ========== */
.site-header{
  position:sticky; top:0; z-index:999; isolation:isolate;
  background:linear-gradient(90deg,var(--violet-brand) 0%, var(--bleu) 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  padding-top: env(safe-area-inset-top);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 6px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:44px;height:auto;display:block;border-radius:0;box-shadow:none;background:transparent}
.brand strong{font-family:'Caveat',cursive;font-size:1.9rem;color:var(--jaune);letter-spacing:.5px}

.menu-toggle{
  display:none; font-size:20px; line-height:1;
  padding:8px 10px; border-radius:999px;
  color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
}
.menu-toggle[aria-expanded="true"]{transform:rotate(180deg);transition:transform .18s ease}

.nav{width:100%}
.nav ul{display:flex;gap:12px;list-style:none;margin:8px 0 10px;padding:0}
.nav a{
  display:inline-block;color:#fff;font-weight:600;
  padding:10px 12px;border-radius:9999px;border:1px solid rgba(255,255,255,.22);
  background:transparent; transition:.2s ease;
}
.nav a:hover{background:rgba(255,255,255,.10);text-decoration:none;border-color:rgba(255,255,255,.35)}

.header-stripe{height:3px;background:linear-gradient(90deg,var(--violet-brand),var(--bleu));position:relative;overflow:hidden}
.header-stripe::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.6;animation:sweep 2.8s linear infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ========== 50. MENU MOBILE (SHEET BOTTOM) ========== */
.mobile-menu{position:fixed;inset:0;z-index:1000;display:block;pointer-events:none}
.mobile-menu[hidden]{display:block}
.mobile-menu__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .18s ease;pointer-events:none
}
.mobile-menu__panel{
  position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);
  border-radius:22px 22px 0 0; color:#fff;
  padding:max(14px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  /* Dégradé 4 couleurs (violet/bleu + voile blanc + touche d’orange) */
  background:
    radial-gradient(80vmax 40vmax at 80% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(145deg, rgba(255,122,47,.26) 0%, transparent 45%),
    linear-gradient(180deg, var(--violet-brand) 0%, var(--bleu) 70%);
  box-shadow:0 -8px 28px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
  pointer-events:auto;
}
.mobile-menu__panel ul{list-style:none;margin:0;padding:8px 0}
.mobile-menu__panel li+li{margin-top:8px}
.mobile-menu__panel a{
  display:block;padding:14px 14px;border-radius:12px;font-weight:700;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mobile-menu__panel a:hover,
.mobile-menu__panel a:focus-visible{
  transform:translateY(-1px);
  border-color: var(--orange);
  box-shadow:0 10px 18px rgba(255,122,47,.18), inset 0 0 0 1px rgba(255,255,255,.15);
}
.mobile-menu__panel a:active{transform:translateY(0)}
.mobile-menu.is-open .mobile-menu__panel{transform:translateY(0)}
.mobile-menu.is-open .mobile-menu__backdrop{opacity:1;pointer-events:auto}
.cta-bar.hide{visibility:hidden;opacity:0;transition:opacity .15s ease}

/* ========== 60. FEATURES (PANNEAUX) ========== */
.feature{padding:36px 0}
.feature__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}

.feature__text{
  position:relative;display:flex;flex-direction:column;gap:1rem;color:var(--blanc);
  border-radius:var(--radius);
  padding:24px calc(24px + var(--notch)) 24px 24px; /* biseau à droite */
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
  box-shadow:0 12px 28px rgba(17,24,39,.18);overflow:hidden;
}
.feature--left .feature__text{
  padding:24px 24px 24px calc(24px + var(--notch)); /* biseau à gauche */
  clip-path:polygon(var(--notch) 0,100% 0,100% 100%,var(--notch) 100%,0 50%);
}
.feature--violet .feature__text{
  background:linear-gradient(135deg, #8c21cf 0%, #5a0b8c 55%, #42066a 100%);
}
.feature--blue .feature__text{
  background:linear-gradient(135deg, #3e62ff 0%, #2948e6 45%, #1f34bb 100%);
}
.feature__text::after{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);pointer-events:none}
.feature__text h2,.feature__text h3{color:var(--jaune);margin:.2rem 0}
.feature__text .kicker{margin:0;font-weight:500;color:rgba(255,255,255,.95)}
.feature__text ul{list-style:none;margin:0;padding:0}
.feature__text li{margin:.55rem 0;color:rgba(255,255,255,.98)}

.feature__media{
  display:grid;place-items:center;padding:12px;max-width:100%;
  border-radius:var(--radius);
  aspect-ratio:4/3; min-height:260px;
  background: radial-gradient(#dbe2f1 1px, transparent 1px);
  background-size:12px 12px; border:1px solid #e5e7eb;
}
.media-img{
  max-width:min(78%,320px);height:auto;object-fit:contain;margin-inline:auto;
  filter:drop-shadow(0 10px 22px rgba(2,6,23,.18));
}

/* ========== 70. BADGES & MÉDIAS COURTS ========== */
.badges{display:flex;gap:14px;list-style:none;padding:0;margin:16px 0 0;flex-wrap:wrap;justify-content:center}
.badge{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--g-200);background:#fff}
.badge img{width:36px;height:36px}
.badge span{font-weight:700}

/* ========== 80. CTA MOBILE FLOTANT ========== */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;display:none;
  background:transparent; /* pas de bande violet/bleu */
  padding:0 14px 14px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:998; pointer-events:none;
}
.cta-btn{
  display:block;pointer-events:auto;text-align:center;width:100%;
  background:var(--orange);color:#111;font-weight:800;
  padding:14px 16px;border-radius:14px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.cta-btn:active{transform:translateY(1px)}

/* ========== 90. FOOTER ========== */
.site-footer{
  background:linear-gradient(90deg,var(--violet-brand),var(--bleu));
  color:#fff;padding:18px 0;border-top:none;box-shadow:0 -8px 18px rgba(0,0,0,.18)
}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.site-footer .muted{color:rgba(255,255,255,.92)}
.theme-toggle{
  font-size:18px;line-height:1;background:transparent;color:#ffe3a6;
  border:1px solid rgba(255,255,255,.35);padding:6px 10px;border-radius:999px;cursor:pointer
}
.theme-toggle:active{transform:translateY(1px)}

/* ========== 95. RESPONSIVE ========== */
@media (max-width:980px){ .feature__inner{grid-template-columns:1fr} }

@media (max-width:780px){
  html{font-size:18px} body{line-height:1.8}
  .btn{padding:1rem 1.1rem}
  .nav{display:none} .menu-toggle{display:inline-block}

  .section{padding:28px 0}
  h1{font-size:clamp(28px,7vw,36px)}
  .feature__text{padding:18px 18px;box-shadow:0 10px 22px rgba(16,24,40,.18)}
  .feature__media{aspect-ratio:16/9;min-height:auto;max-height:42vh}
  .grid{grid-template-columns:1fr;gap:18px}
  .cards{grid-template-columns:1fr;gap:14px}

  .badges{gap:10px}
  .badge{padding:10px 12px}
  .badge img{width:28px;height:28px}
  .badge span{font-size:.95rem}

  .cta-bar{display:block}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .site-footer{margin-bottom:calc(82px + env(safe-area-inset-bottom))}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .theme-toggle{justify-self:start}
}

/* ========== 99. THÈME SOMBRE (OPT-IN) ========== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --g-50:#0f1220; --g-100:#121526; --g-200:#1a1f36; --g-300:#24304d; --g-600:#c7ceda;
  --blanc:#e9edf7; --bleu-fonce:#cdd7ff;
}
:root[data-theme="dark"] body{background:#0d1020;color:var(--blanc)}
:root[data-theme="dark"] a{color:#8cb4ff}
:root[data-theme="dark"] .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);backdrop-filter:blur(4px)}
:root[data-theme="dark"] .form input,
:root[data-theme="dark"] .form textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--blanc)}
:root[data-theme="dark"] .form input:focus,
:root[data-theme="dark"] .form textarea:focus{outline:2px solid #6ea8ff;border-color:#6ea8ff}
:root[data-theme="dark"] .feature__text li,
:root[data-theme="dark"] .feature__text .kicker{color:rgba(255,255,255,.98)}
:root[data-theme="dark"] .feature__text::after{box-shadow:inset 0 0 0 1.3px rgba(255,255,255,.18)}
:root[data-theme="dark"] .btn{background:#0f172a;border-color:#0f172a;color:#fff}
:root[data-theme="dark"] .btn:hover{filter:brightness(1.1)}
:root[data-theme="dark"] .badge{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:#e9edf7;
}
:root[data-theme="dark"] .badge img{filter:brightness(.92) contrast(.98) saturate(.92)}
:root[data-theme="dark"] .site-footer .muted{color:#fff}

/* === Fix: le menu mobile ne doit JAMAIS apparaître quand il est fermé === */

/* 1) Quand [hidden] est présent, on coupe vraiment l’affichage */
.mobile-menu[hidden]{ display:none !important; }

/* 2) État fermé (même sans hidden pendant l’animation) : pousse bien hors écran */
.mobile-menu:not(.is-open) .mobile-menu__panel{
  transform: translateY(120%);     /* >100% évite le 1-2 px visibles sur iOS */
}

/* 3) Petit joint visuel au bas d’écran (iOS) */
.mobile-menu__panel{ bottom:-1px; }  /* évite qu’un liseré apparaisse */

/* 4) iOS Safari: évite les “glitches” lors du scroll (accélération GPU) */
.site-header{ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; }
.mobile-menu__panel{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }