/* ============================================================================
   gecko IPTV — feuille de style unique du site.
   Remplace les 4 blocs <style> qui vivaient dans chaque page (335 lignes, dont
   33 strictement identiques entre premium et playlists).

   RÈGLE DE NOMMAGE : un composant = un nom, jamais deux sens. L'ancien `.card`
   désignait à la fois une tuile de fonctionnalité et le conteneur de page :
   ce sont désormais `.tile` et `.app-shell`.

   Les valeurs sont alignées sur l'app Flutter (lib/core/theme/gecko_theme.dart)
   pour que le site soit le prolongement visuel de l'application.
   ========================================================================== */

@layer tokens, base, layout, components, pages, utilities;

/* ---------------------------------------------------------------- polices */
/* Auto-hébergées : sous-ensemble latin servi par Google, récupéré une fois.
   65 Ko au total, contre 287 Ko pour les TTF de l'app. Supprime deux origines
   tierces du chemin critique et permet un Cache-Control immutable. */
@font-face {
  font-family: "Sora";
  src: url(/assets/fonts/sora-latin.woff2) format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url(/assets/fonts/lexend-latin.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    /* Marque — valeurs de GeckoColors */
    --accent: #3ddc84;
    --accent-dark: #1fa968;
    --accent-ink: #04140a;
    /* Vert CUIT dans l'icône des stores. Décor uniquement, jamais du texte :
       ce n'est PAS --accent, et « corriger » l'un vers l'autre serait faux. */
    --accent-logo: #59d878;

    /* Fonds */
    --bg-0: #070b0a;
    --bg-1: #0c1311;
    --grad-top: #14241c;
    --grad-mid: #0a0f0d;
    --grad-bottom: #060807;
    --bg-page: radial-gradient(120% 90% at 80% -10%, var(--grad-top) 0%,
        var(--grad-mid) 55%, var(--grad-bottom) 100%);

    /* États */
    --error: #ff6b6b;
    --warn: #ffb454;

    /* Encres — remplacent une trentaine de rgba() écrits à la main */
    --ink: #fff;
    --ink-80: rgba(255, 255, 255, .8);
    --ink-72: rgba(255, 255, 255, .72);
    --ink-60: rgba(255, 255, 255, .6);
    --ink-45: rgba(255, 255, 255, .45);
    --ink-32: rgba(255, 255, 255, .32);

    /* Surfaces et lignes */
    --surface-1: rgba(255, 255, 255, .035);
    --surface-2: rgba(255, 255, 255, .06);
    --surface-3: rgba(255, 255, 255, .1);
    --header-bg: rgba(6, 8, 7, .72);
    --line-1: rgba(255, 255, 255, .06);
    --line-2: rgba(255, 255, 255, .1);
    --line-3: rgba(255, 255, 255, .16);
    --accent-wash: rgba(61, 220, 132, .1);
    --accent-line: rgba(61, 220, 132, .28);
    --accent-ring: rgba(61, 220, 132, .25);
    --warn-wash: rgba(255, 180, 84, .1);
    --warn-line: rgba(255, 180, 84, .3);
    --error-wash: rgba(255, 107, 107, .14);

    /* Rayons — 11 valeurs disparates ramenées à 7, calées sur GeckoRadii */
    --r-xs: 9px;
    --r-sm: 11px;   /* GeckoRadii.key */
    --r-md: 13px;   /* GeckoRadii.tab / field */
    --r-lg: 14px;   /* GeckoRadii.submit */
    --r-xl: 20px;
    --r-2xl: 26px;
    --r-pill: 999px;

    /* Ombres */
    --shadow-mark: 0 8px 24px rgba(61, 220, 132, .4);
    --shadow-hero: 0 30px 80px rgba(61, 220, 132, .28);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .35);

    /* Espacements — échelle de 4 */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px; --s-16: 80px;
    --s-20: 112px;

    /* Typographie */
    --font-display: "Sora", system-ui, -apple-system, sans-serif;
    --font-text: "Lexend", system-ui, -apple-system, sans-serif;
    --fs-h1: clamp(36px, 6.4vw, 64px);
    --fs-h2: clamp(26px, 3.6vw, 40px);
    --fs-h3: 19px;
    --fs-app-h1: clamp(22px, 5.5vw, 28px);
    --fs-price: clamp(28px, 7vw, 34px);
    --fs-body: 16px;
    --fs-sm: 14.5px;
    --fs-xs: 13px;
    --ls-display: -.5px;
    --ls-wordmark: -.3px;

    /* Chrome */
    --header-h: 68px;
    --wrap-wide: 1120px;
    --wrap-doc: 820px;
    --wrap-app: 460px;
    --focus-ring: 0 0 0 3px var(--accent-ring);
    --dur: .16s;
    --ease: cubic-bezier(.2, .6, .2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur: 0s; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
  }

  body {
    min-height: 100vh;
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg-page) fixed;
    background-color: var(--bg-0);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: var(--ls-display);
    line-height: 1.12;
  }

  a { color: var(--accent); text-decoration: none; }
  img, svg { max-width: 100%; }
  img { height: auto; }

  /* L'ancien site n'avait d'anneau de focus que sur les champs : la navigation
     au clavier était invisible partout ailleurs. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  :focus:not(:focus-visible) { outline: none; }
}

@layer layout {
  .wrap { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s-6); }
  .wrap-doc { max-width: var(--wrap-doc); }
  .wrap-app { max-width: var(--wrap-app); }

  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-1);
  }
  .site-header .bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); min-height: var(--header-h);
  }
  .site-header nav { display: flex; align-items: center; gap: var(--s-2); }

  .site-footer {
    border-top: 1px solid var(--line-1);
    margin-top: var(--s-20);
    padding: var(--s-10) 0 var(--s-12);
  }
  .site-footer .links {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
    margin: var(--s-5) 0 var(--s-4);
  }
  .site-footer .links a { color: var(--ink-60); font-size: var(--fs-sm); transition: color var(--dur); }
  .site-footer .links a:hover { color: var(--ink); }
  .site-footer .copy { color: var(--ink-45); font-size: var(--fs-xs); }

  /* Page applicative (playlists, premium) : une carte centrée, pas de header. */
  .app-page { display: flex; justify-content: center; padding: var(--s-8) var(--s-5) var(--s-12); }
  .app-shell { width: 100%; max-width: var(--wrap-app); }
}

@layer components {
  /* Marque ------------------------------------------------------------- */
  /* Le mot est CUIT dans l'icône des stores : en dessous de 96 px on n'affiche
     que le glyphe (plaque + gecko) et le mot revient en HTML, lisible. */
  .brand { display: inline-flex; align-items: center; gap: var(--s-3); }
  .brand img { border-radius: var(--r-md); flex: none; }
  .brand.sm img { border-radius: var(--r-sm); }
  .wordmark { font-size: 19px; letter-spacing: var(--ls-wordmark); color: var(--ink); white-space: nowrap; }
  .wordmark b { color: var(--accent); font-weight: 800; }
  .brand.sm .wordmark { font-size: 16px; }

  /* Boutons ------------------------------------------------------------ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 46px; padding: 0 var(--s-5); border: none; border-radius: var(--r-md);
    font-family: var(--font-text); font-size: 15px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: transform .1s var(--ease), background var(--dur), border-color var(--dur);
  }
  .btn:active { transform: scale(.985); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); }
  .btn.primary:hover { background: #4ee594; }
  .btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-3); }
  .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn.quiet { background: var(--surface-2); color: var(--ink); }
  .btn.lg { height: 54px; padding: 0 var(--s-6); font-size: 16px; }
  .btn.block { width: 100%; }
  .btn:disabled { opacity: .5; cursor: default; transform: none; }

  /* Lien secondaire, volontairement effacé face à un CTA accent. */
  .link-quiet {
    color: var(--ink-60); font-size: var(--fs-xs); cursor: pointer;
    border-bottom: 1px solid var(--line-3); padding-bottom: 1px;
    transition: color var(--dur), border-color var(--dur);
  }
  .link-quiet:hover { color: var(--ink-80); border-color: var(--ink-45); }

  /* Champs ------------------------------------------------------------- */
  label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-60); margin: var(--s-4) 0 7px; }
  input {
    width: 100%; height: 52px; padding: 0 var(--s-4);
    border-radius: var(--r-md); border: 1.5px solid var(--line-2);
    background: var(--surface-2); color: var(--ink);
    font-family: var(--font-text); font-size: 16px; outline: none;
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
  input::placeholder { color: var(--ink-32); }
  /* Le code de gestion : XXXX-XXXX, centré et espacé. */
  .code-field { text-align: center; letter-spacing: 6px; font-weight: 600; text-transform: uppercase; }

  /* Surfaces ----------------------------------------------------------- */
  .panel {
    background: var(--surface-1); border: 1.5px solid var(--line-1);
    border-radius: 16px; padding: var(--s-4);
  }
  .tile {
    background: var(--surface-1); border: 1.5px solid var(--line-1);
    border-radius: var(--r-xl); padding: var(--s-6);
    transition: border-color var(--dur), transform var(--dur) var(--ease);
  }
  .tile:hover { border-color: var(--line-3); transform: translateY(-2px); }
  .tile .ico {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent);
    margin-bottom: var(--s-4);
  }
  .tile h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
  .tile p { color: var(--ink-60); font-size: var(--fs-sm); }

  .pill {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 7px var(--s-4); border-radius: var(--r-pill);
    border: 1px solid var(--accent-line); background: var(--accent-wash);
    color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
  }

  .badge { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--accent-wash); color: var(--accent); }
  .badge.off { background: var(--surface-2); color: var(--ink-60); }
  .badge.warn { background: var(--warn-wash); color: var(--warn); }

  .banner {
    padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
    border: 1.5px solid var(--accent-line); background: var(--accent-wash);
    color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
    margin-bottom: var(--s-4);
  }
  .banner.info { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-80); }
  .banner.warn { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn); }

  /* Bandeau d'abonnement : tout le bloc est cliquable, d'où la pleine largeur. */
  .sub-banner {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 13px 15px; border-radius: var(--r-lg);
    border: 1.5px solid var(--accent-line); background: var(--accent-wash);
    color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
    margin-bottom: var(--s-5);
    transition: background var(--dur), border-color var(--dur);
  }
  .sub-banner:hover { background: rgba(61, 220, 132, .16); border-color: rgba(61, 220, 132, .45); }
  .sub-banner .sb-txt { flex: 1; min-width: 0; }
  .sub-banner .sb-go { font-size: 19px; line-height: 1; opacity: .65; }
  .sub-banner.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); }

  .err { color: var(--error); font-size: var(--fs-sm); margin-top: var(--s-3); min-height: 18px; }

  /* Onglets (identifiants / URL Xtream) -------------------------------- */
  .toggle { display: flex; gap: 6px; margin: var(--s-5) 0 var(--s-1); padding: 5px; border-radius: var(--r-md); background: var(--surface-1); }
  .toggle button {
    flex: 1; height: 42px; border: none; border-radius: var(--r-xs); cursor: pointer;
    background: transparent; color: var(--ink-60);
    font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600;
  }
  .toggle button.active { background: var(--accent); color: var(--accent-ink); }

  /* Ligne de playlist -------------------------------------------------- */
  .pl {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); margin-bottom: 10px;
    border-radius: var(--r-lg); background: var(--surface-2); border: 1.5px solid var(--line-1);
  }
  .pl .info { flex: 1; min-width: 0; }
  .pl .name { font-weight: 600; }
  .pl .host { font-size: 12.5px; color: var(--ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl .del {
    height: 38px; padding: 0 var(--s-3); border: none; border-radius: var(--r-sm); cursor: pointer;
    background: var(--error-wash); color: var(--error);
    font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600;
  }

  /* En-tête interne des pages applicatives.
     Le débordement vient de l'absence de gap/wrap : un titre plus deux liens
     réclamaient ~365 px pour 320 px utiles sur un écran de 360. */
  .app-topbar {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  }
  .app-topbar h1 { font-size: var(--fs-app-h1); }
  .app-topbar nav { display: flex; gap: var(--s-4); white-space: nowrap; }

  /* Badges des stores -------------------------------------------------- */
  .store-badge {
    display: inline-flex; align-items: center; gap: var(--s-3);
    height: 58px; padding: 0 var(--s-5);
    border: 1.5px solid var(--line-3); border-radius: var(--r-lg);
    color: var(--ink); transition: border-color var(--dur), background var(--dur);
  }
  .store-badge:hover { border-color: var(--accent); background: var(--surface-1); }
  .store-badge small { display: block; font-size: 11px; color: var(--ink-60); line-height: 1.2; }
  .store-badge strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; }

  /* Bascule de langue -------------------------------------------------- */
  .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-1); }
  .lang-switch a, .lang-switch button {
    border: none; background: transparent; cursor: pointer;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--ink-60);
  }
  .lang-switch [aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
}

@layer pages {
  /* Documents légaux (privacy, terms) ---------------------------------- */
  .doc { padding: var(--s-12) 0 var(--s-16); }
  .doc h1 { font-size: clamp(30px, 5.5vw, 44px); margin-bottom: var(--s-2); }
  .doc .updated { color: var(--ink-45); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
  .doc h2 { font-size: 22px; margin: var(--s-10) 0 var(--s-3); }
  .doc h3 { font-size: 17px; margin: var(--s-6) 0 var(--s-2); }
  .doc p, .doc li { color: var(--ink-80); line-height: 1.7; }
  .doc p { margin-bottom: var(--s-3); }
  .doc ul { margin: 0 0 var(--s-3) var(--s-5); }
  .doc li { margin-bottom: 6px; }
  .doc .callout {
    background: var(--surface-1); border: 1.5px solid var(--line-1);
    border-radius: var(--r-lg); padding: var(--s-5); margin: var(--s-5) 0;
  }
  .doc .callout h2 { margin-top: 0; font-size: 19px; }

  /* Pages applicatives (playlists, premium) ---------------------------- */
  .app-head { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s-3); margin-bottom: var(--s-6); }
  .app-shell h1 { font-size: var(--fs-app-h1); margin-bottom: 6px; }
  .app-shell h3 { font-size: 16px; margin-bottom: var(--s-1); }
  /* Sous-titre et état vide : le même rôle sur les deux pages. */
  .sub { color: var(--ink-60); font-size: 15px; margin-bottom: var(--s-6); }
  .panel .sub { margin-bottom: 0; }
  .app-shell .btn { margin-top: var(--s-4); }
  .app-shell .toggle .btn, .app-shell .toggle button { margin-top: 0; }
  .price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price); }
  .feat { list-style: none; margin: var(--s-4) 0; }
  .feat li { position: relative; padding-left: 26px; margin-bottom: 6px; color: var(--ink-80); font-size: var(--fs-sm); }
  .feat li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  .spin { text-align: center; color: var(--ink-45); padding: var(--s-8) 0; font-size: var(--fs-sm); }

  /* Vitrine ------------------------------------------------------------ */
  .hero { padding: var(--s-16) 0 var(--s-12); text-align: center; }
  .hero h1 { font-size: var(--fs-h1); margin: var(--s-5) 0 var(--s-4); }
  .hero .lead { font-size: clamp(17px, 2.4vw, 20px); color: var(--ink-72); max-width: 640px; margin: 0 auto var(--s-6); }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-5); }
  .stores { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
  .shot {
    border-radius: var(--r-2xl); border: 1px solid var(--line-2);
    box-shadow: var(--shadow-hero); display: block; margin: var(--s-12) auto 0;
  }
  .shot.portrait { border-radius: var(--r-xl); box-shadow: var(--shadow-card); }

  .section { padding: var(--s-16) 0; }
  .section-head { text-align: center; max-width: 680px; margin: 0 auto var(--s-10); }
  .section-head .eyebrow { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
  .section-head h2 { font-size: var(--fs-h2); margin: var(--s-3) 0 var(--s-3); }
  .section-head p { color: var(--ink-60); }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }

  /* Blocs alternés texte / visuel */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; margin-bottom: var(--s-16); }
  .split:nth-child(even) .split-text { order: 2; }
  .split h3 { font-size: clamp(22px, 3vw, 30px); margin-bottom: var(--s-3); }
  .split p { color: var(--ink-60); }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .step { display: flex; gap: var(--s-4); }
  .step .num {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-display); font-weight: 800;
  }
  .step h3 { font-size: 17px; margin-bottom: 4px; }
  .step p { color: var(--ink-60); font-size: var(--fs-sm); }

  .notice {
    border: 1px solid var(--line-2); border-radius: 18px;
    padding: var(--s-5); background: var(--surface-1);
    color: var(--ink-60); font-size: var(--fs-sm); margin-top: var(--s-10);
  }

  .faq details {
    border: 1.5px solid var(--line-1); border-radius: var(--r-lg);
    background: var(--surface-1); padding: var(--s-4) var(--s-5); margin-bottom: 10px;
  }
  .faq summary { cursor: pointer; font-weight: 600; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; float: right; color: var(--accent); font-size: 20px; line-height: 1; }
  .faq details[open] summary::after { content: "−"; }
  .faq p { color: var(--ink-60); font-size: var(--fs-sm); margin-top: var(--s-3); }

  .cta-final {
    border: 1.5px solid var(--accent-line); background: var(--accent-wash);
    border-radius: var(--r-2xl); padding: var(--s-12) var(--s-6); text-align: center;
  }
  .cta-final h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: var(--s-3); }
  .cta-final p { color: var(--ink-72); margin-bottom: var(--s-6); }
}

@layer utilities {
  .hidden { display: none !important; }
  .center { text-align: center; }
  .muted { color: var(--ink-60); }
  .sm { font-size: var(--fs-sm); }
  .xs { font-size: var(--fs-xs); }
  .stack-2 > * + * { margin-top: var(--s-2); }
  .stack-4 > * + * { margin-top: var(--s-4); }
  .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;
  }
  /* Lien d'évitement : premier élément focusable de chaque page. */
  .skip {
    position: absolute; left: -9999px; top: var(--s-2); z-index: 100;
    background: var(--accent); color: var(--accent-ink);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font-weight: 600;
  }
  .skip:focus { left: var(--s-4); }
}

/* --------------------------------------------------------------- adaptatif */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-12); }
  .split:nth-child(even) .split-text { order: 0; }
}
@media (max-width: 640px) {
  .grid, .grid-2 { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--s-4); }
  .hero { padding: var(--s-12) 0 var(--s-10); }
  .section { padding: var(--s-12) 0; }
  .stores { flex-direction: column; align-items: stretch; }
  .store-badge { justify-content: center; }
}

/* En-tête étroit : l'ancienne vitrine masquait « Fonctionnalités » ET
   « Premium » sous 820 px, rendant /premium inatteignable ailleurs que dans le
   pied de page. Réduire les boutons ne suffit pas non plus — à 375 px les
   quatre éléments réclament plus que la largeur disponible et le dernier est
   coupé. On passe donc la barre sur DEUX lignes : marque au-dessus, navigation
   complète en dessous. Rien n'est masqué, rien n'est tronqué. */
@media (max-width: 760px) {
  .site-header .bar {
    flex-wrap: wrap;
    min-height: 0;
    /* Uniquement l'axe vertical : `padding: 10px 0` remettrait à zéro la marge
       horizontale héritée de .wrap et collerait les boutons aux bords. */
    padding-block: 10px;
    row-gap: 10px;
  }
  /* wrap : la somme des libellés peut dépasser la largeur (≈1030 px de contenu
     pour 1048 disponibles à 360 dp). Sans lui, le dernier élément est rogné. */
  .site-header nav { width: 100%; gap: 6px; flex-wrap: wrap; }
  .site-header nav .btn { flex: 1 1 auto; height: 38px; padding: 0 10px; font-size: 13.5px; }
  .site-header .lang-switch { flex: 0 0 auto; margin-left: auto; }
  .site-header .wordmark { font-size: 17px; }
}
@media (max-width: 380px) {
  /* Écrans très étroits : le libellé le plus long passe en deux mots courts. */
  .site-header nav .btn { font-size: 12.5px; padding: 0 8px; }
}