/* ======================================================================
   ASTERKA — GLOBAL STYLES (WHITE THEME)
   ====================================================================== */

/* ------------------------ */
/*  Font (self-hosted)     */
/* ------------------------ */
@font-face{
    font-family: "Nico Moji";
    src: url("/includes/assets/fonts/nicomoji-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ------------------------ */
/*  Reset / Base            */
/* ------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
    /* colors */
    --bg: #ffffff;
    --text: #111827;
    --muted: #4b5563;
    --text-on-hero: #ffffff;

    --primary: #c86bff;
    --secondary: #66d1ff;

    --card: #f9f9f9;
    --stroke: #eeeeee;
    --shadow: -3px 4px 4px rgba(0,0,0,.12);

    --glass: rgba(255,255,255,.92);
    --glass-border: 1px solid #eaeaea;

    /* radii */
    --radius-xl: 999px;
    --radius-lg: 18px;
    --radius-md: 14px;

    /* layout */
    --header-h: 72px;

    /* fonts */
    --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    --font-nico: "Nico Moji", var(--font-ui);
}

body{
    background: var(--bg);
    color: var(--text);
    font: 500 16px/1.5 var(--font-nico);
}

.container{
    width: min(1200px, 92%);
    margin-inline: auto;
}

/* a11y */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======================================================================
   HEADER / NAVBAR
   ====================================================================== */
.site-header, .site-header * { font-family: var(--font-ui) !important; }
.site-header{ position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 12px 0; background: transparent; }

.nav{
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    width: min(1200px, 92%); margin-inline: auto;
    padding: 10px 14px; border-radius: var(--radius-xl);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: var(--glass-border);
    box-shadow: 0 6px 18px rgba(17,24,39,.06);
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#111827; font-weight:800; letter-spacing:.3px; }
.brand img{ display:block; }
.brand-text{ display:none; } @media (min-width:520px){ .brand-text{ display:inline; } }
.nav-links{ list-style:none; margin:0; padding:0; display:flex; gap:26px; justify-content:center; }
.nav-links a{ color:#111827; text-decoration:none; font-weight:700; }
.nav-links a:hover{ color:#000; text-decoration:underline; text-underline-offset:3px; }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; line-height:1; }
@media (max-width:860px){
    .nav{ grid-template-columns: auto auto 1fr; }
    .nav-toggle{ display:block; color:#111827; }
    .nav-links{
        position:absolute; left:50%; transform:translateX(-50%); top:64px;
        background: var(--glass); border: var(--glass-border); border-radius:18px; padding:14px 18px;
        display:none; flex-direction:column; gap:14px; width:min(92vw, 420px);
        box-shadow: 0 10px 30px rgba(17,24,39,.08);
    }
    .nav-links[data-open="true"]{ display:flex; }
}

/* ======================================================================
   BUTTONS
   ====================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:800; transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; }
.btn:focus-visible{ outline: 2px solid rgba(17,24,39,.9); outline-offset: 3px; }
.btn-pill{ padding:10px 18px; border-radius: var(--radius-xl); background:#fff; color:#111827; border:2px solid #eaeaea; }
.btn-pill:hover{ filter: brightness(.98); }
.btn-gradient{ padding:12px 22px; border-radius: var(--radius-xl); background: linear-gradient(90deg, var(--primary), var(--secondary)); color:#fff; border:0; box-shadow: 0 8px 24px rgba(137,74,255,.25); }
.btn-gradient:hover{ filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(137,74,255,.3); }
.btn-gradient:active{ transform: translateY(0); }

/* ======================================================================
   HERO
   ====================================================================== */
.hero{
    min-height: 100vh; min-height: 100svh;
    position: relative; display: grid; place-items: center; text-align: left;
    background-image: var(--hero-bg, none); background-size: cover; background-position: center; background-repeat:no-repeat;
}
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 70% 0%, rgba(50,30,110,.25), transparent 60%), linear-gradient(to top, rgba(7,6,12,.55), rgba(7,6,12,.10)); }
.hero-content{
    position: relative; z-index: 1; padding-top: calc(var(--header-h) + 12px);
    width: auto; max-width: min(800px, 92vw);
    margin-left: clamp(16px, 15vw, 240px); margin-right: auto;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px; color: var(--text-on-hero);
}
.hero-titles{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.hero h1{ margin:0; font-size: clamp(30px, 4.6vw, 56px); font-weight:900; letter-spacing:.6px; text-shadow: 0 4px 28px rgba(0,0,0,.45); }
.hero p{ margin:0; font-size: clamp(16px, 2vw, 22px); opacity:.95; }
.hero .btn-gradient{ align-self:center; padding: clamp(10px,.9vw,12px) clamp(34px,3.2vw,48px); font-size: clamp(15px,1.3vw,19px); border-radius:999px; }

/* ======================================================================
   RACES
   ====================================================================== */
.races{ padding: 56px 0 80px; background: var(--bg); color: var(--text); }
.races-icons{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.6vw, 28px); margin-bottom: 26px; }
.race-card{ display:grid; place-items:center; gap:10px; background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:24px 18px; }
.race-card img{ width:90px; height:90px; object-fit:contain; }
.race-card h3{ margin:0; font-size: clamp(16px, 1.6vw, 20px); color:#111827; }
.races-title{ text-align:center; color:#111827; font-size: clamp(22px, 3.2vw, 36px); margin:10px 0 22px; }
.races-details{ display:grid; grid-template-columns:1fr; gap: clamp(28px, 3vw, 40px); }
.race-detail{ display:flex; align-items:center; justify-content:center; gap: clamp(18px, 2.4vw, 32px); }
.race-detail.reverse{ flex-direction: row-reverse; }
.race-detail-img{ flex:0 0 260px; background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:24px; display:grid; place-items:center; }
.race-detail-img img{ width:120px; height:120px; object-fit:contain; }
.race-detail-text{ flex: 0 1 680px; max-width:680px; min-width:320px; background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius-md); padding:16px 18px; box-shadow: var(--shadow); color: var(--text); }
.race-detail-text h3{ margin:0 0 8px; font-size: clamp(18px, 2.4vw, 26px); color:#111827; }
.race-detail-text p{ margin:0; font-size: clamp(14px, 1.4vw, 16px); line-height:1.55; color: var(--muted); }
@media (max-width:980px){
    .races-icons{ grid-template-columns: repeat(2, 1fr); }
    .race-detail{ flex-direction:column; text-align:left; }
    .race-detail.reverse{ flex-direction:column; }
    .race-detail-img{ flex-basis:auto; justify-self:center; }
    .race-detail-text{ min-width:auto; width:100%; }
}

/* ======================================================================
   HOW-TO (timeline center-to-center)
   ====================================================================== */
.howto{ padding: 64px 0 90px; background: var(--bg); color: var(--text); }
.howto-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(26px, 4vw, 48px); align-items:center; }
.howto-title{ margin:0 0 6px; font-size: clamp(24px, 3.2vw, 40px); font-weight:900; letter-spacing:.4px; }
.grad{ background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.howto-sub{ margin:0 0 16px; color: var(--muted); font-size: clamp(14px, 1.4vw, 16px); }
.link{ color:#2686ff; text-decoration:underline; text-underline-offset:2px; }
.steps{ --diamond: 52px; --line-color: #e5e7eb; --step-gap: 26px; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; row-gap: var(--step-gap); }
.step{ position:relative; display:grid; grid-template-columns: var(--diamond) 1fr; column-gap:16px; align-items:center; }
.step::before, .step::after{ content:""; position:absolute; left: calc(var(--diamond)/2); width:2px; background: var(--line-color); z-index:0; }
.step::before{ top: calc(-1 * var(--step-gap)/2); height: calc(50% + var(--step-gap)/2); } .step:first-child::before{ display:none; }
.step::after{ top: 50%; height: calc(50% + var(--step-gap)/2); } .step:last-child::after{ display:none; }
.diamond{ width: var(--diamond); height: var(--diamond); background: var(--card); border:1px solid var(--stroke); border-radius:12px; box-shadow: var(--shadow); transform: rotate(45deg); display:grid; place-items:center; justify-self:center; position:relative; z-index:2; }
.diamond span{ transform: rotate(-45deg); font-weight:900; font-size:20px; color:#111827; }
.step-body{ background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius-md); box-shadow: var(--shadow); padding:16px 18px; }
.step-body h3{ margin:0 0 8px; font-size: clamp(16px, 2vw, 22px); color:#111827; }
.step-body p{ margin:0; font-size: clamp(14px, 1.4vw, 16px); color: var(--muted); }
.howto-cta{ margin-top:8px; }
.mockup{ background: var(--card); border:1px solid var(--stroke); border-radius:14px; box-shadow: var(--shadow); padding:8px; }
.mockup img{ display:block; width:100%; height:auto; border-radius:10px; }
@media (max-width:980px){ .howto-grid{ grid-template-columns:1fr; } .mockup{ order:-1; } }

/* ======================================================================
   SUPPORT
   ====================================================================== */
.support{ padding: 70px 0 110px; background: var(--bg); color: var(--text); }
.section-title{ text-align:center; font-size: clamp(24px, 3vw, 40px); margin:0 0 18px; font-weight:900; }
.support-grid{ display:grid; grid-template-columns: 1fr 1.25fr; gap: clamp(26px, 5vw, 72px); align-items:center; }
.support-left{ display:grid; place-items:center; }
.support-big{ margin:0; text-align:center; font-size: clamp(18px, 2.3vw, 32px); line-height:1.25; color:#0f172a; }
.support-right{ display:grid; justify-items:center; gap:12px; }
.support-card{ display:block; width:100%; max-width:720px; border-radius:16px; background: var(--card); border:1px solid var(--stroke); box-shadow: var(--shadow), 0 14px 28px rgba(17,24,39,.08); transition: transform .15s, box-shadow .2s; }
.support-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow), 0 18px 34px rgba(17,24,39,.10); }
.support-media{ aspect-ratio: 16/9; width:100%; border-radius:16px; background-color: var(--card); background-image: var(--support-bg, none); background-size:cover; background-position:center; background-repeat:no-repeat; }
.support-cta{ margin:0; text-align:center; font-size: clamp(14px, 1.4vw, 18px); color: var(--muted); }
@media (max-width:980px){ .support-grid{ grid-template-columns:1fr; } }

/* ======================================================================
   FOOTER — FULL-WIDTH, LEFT-ALIGNED, LONG BAR
   ====================================================================== */
.site-footer{ background:#f8fafc; border-top:1px solid #eef2f7; padding:16px 0 18px; }
.site-footer .container{ width:100%; max-width:none; margin:0; padding-left:clamp(24px,6vw,120px); padding-right:clamp(24px,6vw,120px); }
.footer-grid{
    display:grid;
    grid-template-columns: 170px 1.25fr 1fr 1fr 1fr 1.2fr;
    gap: clamp(20px, 3vw, 48px);
    align-items:start;
}
/* brand */
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-brand img{ width:68px; height:68px; object-fit:contain; }
.copyright{ margin:0; color:#6b7280; font-size:12px; line-height:1.2; }
/* colonnes */
.footer-col{ text-align:left; }
.footer-col h4{ margin:0 0 8px; font-size: clamp(16px, 1.6vw, 20px); font-weight:900; text-align:left; }
.footer-text{ margin:0; color:#0f172a; font-size:13px; line-height:1.15; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; row-gap:5px; }
.footer-links a{ color:#0f172a; text-decoration:none; font-size:13.5px; }
.footer-links a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* --- reseaux : titre + texte CENTRES, grille 4/3 CENTREE --- */
.footer-social{ text-align:center; display:grid; justify-items:center; }
.footer-social h4{ text-align:center; }
.footer-social .footer-note{ margin:0 0 6px; color:#6b7280; font-size:12px; line-height:1.2; }

/* grille centrée : 4 icones en haut, 3 en bas (format ref) */
.socials{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width: calc(4 * 36px + 3 * 10px);   /* largeur pile pour 4 icones + 3 gaps */
    justify-content:center;              /* centre les 2 rangées */
    margin-inline:auto;
}
.socials a{
    display:inline-grid; place-items:center;
    width:36px; height:36px; border-radius:10px;
    background:#fff; border:1px solid #e5e7eb;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
    transition: transform .15s ease, box-shadow .2s ease;
}
.socials a:hover{ transform: translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.10); }
.socials img{ max-width:20px; max-height:20px; width:auto; height:auto; object-fit:contain; display:block; }

/* responsive */
@media (max-width:1100px){
    .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
    .site-footer .container{ padding-left:clamp(18px,4vw,40px); padding-right:clamp(18px,4vw,40px); }
}
@media (max-width:680px){
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ align-items:center; }
    .footer-col{ text-align:center; }
    .footer-social{ justify-items:center; }
    .socials{ width:auto; } /* sur mobile, on laisse respirer */
}