/* Go-NordiK — landing go-nordik.com.
   Feuille externe (CSP stricte, aucun style inline — 4.46). */

/* DEBUT-THEMES (généré par scripts/gen-theme-css.py — ne pas éditer à la main) */
/* Thèmes saisonniers — miroir exact de l'app (source : themes/<id>/theme.json),
   activés par theme.js selon la date ou manuellement via [data-theme] sur <html>. */
:root{
  --bg:#141D1B; --surface:#1F2B28; --text:#F2F5F1; --muted:#98A19C;
  --accent:#52FF1F; --accent-dark:#2FC70A; --accent-soft:#B9FF9E; --line:#39423E;
  --neon:#52FF1F; --on-neon:#0F1A0A;
  --header-bg:rgba(20,29,27,.92);
}
[data-theme="halloween"]{
  --bg:#1A1220; --surface:#261830; --text:#F2F5F1; --muted:#A79CB0;
  --accent:#FF8A1F; --accent-dark:#9E4A0D; --accent-soft:#F3B26A; --line:#33203F;
  --neon:#FF8A1F; --on-neon:#1A0E05;
  --header-bg:rgba(26,18,32,.92);
}
[data-theme="noel"]{
  --bg:#0F1A17; --surface:#17251F; --text:#F2F5F1; --muted:#9CA8A2;
  --accent:#FF3355; --accent-dark:#8A2622; --accent-soft:#F2A9A4; --line:#21332B;
  --neon:#FF3355; --on-neon:#1A0508;
  --header-bg:rgba(15,26,23,.92);
}
[data-theme="gaulois"]{
  --bg:#171512; --surface:#221F19; --text:#F2F5F1; --muted:#A8A196;
  --accent:#FFD21F; --accent-dark:#8F701B; --accent-soft:#F0D48A; --line:#2E2A21;
  --neon:#FFD21F; --on-neon:#1A1505;
  --header-bg:rgba(23,21,18,.92);
}
[data-theme="trail"]{
  --bg:#0E1A1F; --surface:#16262C; --text:#F2F5F1; --muted:#93A6AC;
  --accent:#1FFFD6; --accent-dark:#18635E; --accent-soft:#8FD8D2; --line:#1F343C;
  --neon:#1FFFD6; --on-neon:#03201C;
  --header-bg:rgba(14,26,31,.92);
}
/* FIN-THEMES */
/* Refonte néon 2026 — identique à l'app (Theme.lancement) : --neon / --on-neon
   viennent du thème actif (bloc généré ci-dessus), vert #52FF1F en Forêt. */
:root{--elev:#2A3833;--radius:22px}
/* Thème Forêt (défaut) : l'accent EST le vert choisi #52FF1F (néon du logo) —
   liens, boutons, sélecteurs, navigation, focus. La valeur vient de
   themes/forest/theme.json (bloc généré ci-dessus) : le même vert que l'app
   iOS, jamais un autre. Les thèmes saisonniers gardent leurs propres couleurs. */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
header .wrap{display:flex;align-items:center;gap:14px;height:76px;padding:0 24px}
header img.logo{width:60px;height:60px;border-radius:50%}
header .brand{font-weight:700;font-size:1.15rem;letter-spacing:.2px}
/* Nom de l'app : toujours le wordmark officiel « GO Nordik » (SVG vectoriel). */
header img.brand-wordmark{height:41px;width:auto;display:block}
header .spacer{flex:1}
.badge{display:inline-block;background:var(--surface);border:1px solid var(--line);color:var(--accent-soft);border-radius:999px;padding:4px 14px;font-size:.85rem}
/* Héros — la photo garde son ratio d'origine (2070×1128) à toutes les
   largeurs : aucun recadrage, aucune déformation. Le texte se pose dans le
   tiers inférieur de l'image ; le voile dégradé garantit son contraste. */
.hero{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:2070/1128;padding:24px 24px 4.5%;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:url("theme-hero.jpg?v=4") center/cover no-repeat;opacity:.8}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,29,27,.10) 0%,rgba(20,29,27,.22) 52%,rgba(20,29,27,.62) 86%,var(--bg) 100%)}
.hero .inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(1.25rem,4.4vw,3.4rem);line-height:1.05;margin-bottom:12px;font-weight:900;letter-spacing:-.025em}
.hero h1 span{color:var(--neon);text-shadow:0 0 28px color-mix(in srgb,var(--neon) 35%,transparent)}
/* Sous-titre du héros : gras, blanc (jeton --text) et toujours sur UNE seule
   ligne — la taille suit la largeur du viewport (1,7 vw) pour que la phrase la
   plus longue (DE) tienne même en Arial/Helvetica Bold (46,6 em) et polices
   génériques type DejaVu/Verdana Bold (~52 em), sans déborder du cadre .hero
   (mesures CoreText 02/10/2026). */
.hero p.sub{color:var(--text);font-weight:700;font-size:clamp(.6rem,1.7vw,1.15rem);margin-bottom:20px;white-space:nowrap}
/* Marque incrustée sur la photo : médaillon + wordmark en haut à gauche.
   Wordmark « sombre » (« Nordik » en blanc) sur le ciel clair : halo sombre
   pour le décoller des nuages. Tailles généreuses (double du premier jet).
   img.wordmark sert aussi de repère à entete.js (marque de l'en-tête masquée
   tant qu'il est visible). */
.hero-marque{position:absolute;z-index:1;top:clamp(14px,2.8vw,32px);left:clamp(16px,3vw,36px);display:flex;align-items:center;gap:clamp(18px,3vw,36px);filter:drop-shadow(0 1px 2px rgba(20,29,27,.5)) drop-shadow(0 8px 26px rgba(20,29,27,.4))}
.hero-marque img{display:block;height:auto}
.hero-marque img.logo{width:clamp(80px,10.8vw,144px)}
.hero-marque img.wordmark{width:clamp(264px,42vw,520px)}
.cta{display:inline-block;background:var(--neon);color:var(--on-neon);font-weight:800;border-radius:16px;padding:15px 34px;font-size:1.05rem;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 22px color-mix(in srgb,var(--neon) 32%,transparent);transition:background .15s,box-shadow .15s,transform .15s}
.cta:hover{background:var(--neon);filter:brightness(1.12);box-shadow:0 6px 30px color-mix(in srgb,var(--neon) 45%,transparent);transform:translateY(-1px)}
.cta.small{padding:8px 20px;font-size:.9rem}
.cta-disabled{cursor:default}
.cta-note{margin-top:12px;color:var(--muted);font-size:.95rem}
section{padding:64px 0}
section h2{text-align:center;font-size:clamp(1.7rem,3.8vw,2.5rem);margin-bottom:12px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
section p.lead{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px}
/* Pastille d'icône : même rendu que PastilleFonction (app). */
.card .ico{font-size:1.5rem;width:52px;height:52px;display:grid;place-items:center;background:var(--elev);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.card h3{margin:12px 0 8px;font-size:1.15rem}
.card p{color:var(--muted);font-size:.98rem}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;align-items:stretch}
.price{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px;text-align:center;display:flex;flex-direction:column}
.price.star{border:2px solid var(--neon);position:relative;box-shadow:0 8px 30px color-mix(in srgb,var(--neon) 18%,transparent)}
.price h3{font-size:1.1rem;margin-bottom:4px}
.price .amount{font-size:2.4rem;font-weight:900;letter-spacing:-.02em;margin:8px 0}
.price.star .amount{color:var(--neon)}
.price .amount small{font-size:1rem;font-weight:400;color:var(--muted)}
.price ul{list-style:none;margin:16px 0;flex:1}
.price li{color:var(--muted);font-size:.93rem;padding:5px 0;border-top:1px solid var(--line)}
.price li:first-child{border-top:none}
/* ——— Grille v2 (28/09/2026) : argument phare « énergie » + tarifs ——— */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:-8px 0 30px}
.chips li{background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid color-mix(in srgb,var(--neon) 45%,transparent);border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:600;backdrop-filter:blur(6px)}
/* Bandeau sous le hero : points forts + compatibilité, sortis du hero pour
   garder la séquence titre → promesse → action. */
.bandeau{max-width:1080px;margin:0 auto;padding:4px 24px 0;text-align:center}
.bandeau .chips{margin:22px auto 8px}
.neon{color:var(--neon);text-shadow:0 0 28px color-mix(in srgb,var(--neon) 35%,transparent)}
.kicker{text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:800;color:var(--on-neon);background:var(--neon);width:max-content;margin:0 auto 18px;padding:5px 14px;border-radius:999px}

.energie{position:relative;overflow:hidden}
.energie::before{content:"";position:absolute;width:720px;height:720px;left:50%;top:-260px;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--neon) 16%,transparent) 0%,transparent 62%);pointer-events:none}
.energie .wrap{position:relative}
.energie-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:stretch}
.stat-card{background:linear-gradient(150deg,color-mix(in srgb,var(--neon) 20%,var(--surface)) 0%,var(--surface) 55%);border:1.5px solid color-mix(in srgb,var(--neon) 70%,transparent);border-radius:var(--radius);padding:30px;box-shadow:0 14px 50px color-mix(in srgb,var(--neon) 16%,transparent)}
.stat{font-size:clamp(4rem,11vw,6.6rem);font-weight:900;line-height:.95;letter-spacing:-.04em;color:var(--neon);text-shadow:0 0 38px color-mix(in srgb,var(--neon) 45%,transparent)}
.stat-label{font-size:1.2rem;font-weight:700;margin:8px 0 22px;max-width:28ch}
.stat-label sup,.note sup{color:var(--neon);font-weight:800}
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:9.5em 1fr 3.6em;align-items:center;gap:12px;font-size:.92rem}
.bar-name{color:var(--muted);font-weight:600}
.bar-val{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.track{height:12px;border-radius:999px;background:var(--elev);overflow:hidden}
.fill{display:block;height:100%;border-radius:999px;background:var(--muted);transform-origin:left center}
.fill.f100{width:71.4%}
.fill.f120{width:85.7%;background:var(--neon);box-shadow:0 0 16px color-mix(in srgb,var(--neon) 60%,transparent)}
.fill.f140{width:100%;background:linear-gradient(90deg,var(--neon),var(--accent-soft));box-shadow:0 0 16px color-mix(in srgb,var(--neon) 60%,transparent)}
.note{color:var(--muted);font-size:.95rem;margin-top:18px;line-height:1.5}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .fill{animation:remplir 1.1s cubic-bezier(.2,.8,.2,1) both}
  .fill.f120{animation-delay:.15s}.fill.f140{animation-delay:.3s}
  @supports (animation-timeline:view()){
    .fill{animation-timeline:view();animation-range:entry 10% cover 40%;animation-delay:0s}
  }
}
.moteurs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.moteur{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;transition:border-color .2s,transform .2s}
.moteur:hover{border-color:color-mix(in srgb,var(--neon) 70%,transparent);transform:translateY(-2px)}
.moteur-num{font-size:.8rem;font-weight:900;letter-spacing:.1em;color:var(--on-neon);background:var(--neon);width:max-content;padding:2px 9px;border-radius:8px}
.moteur h3{font-size:1.05rem;margin:12px 0 6px}
.moteur p{color:var(--muted);font-size:.93rem;line-height:1.5}
.compare{margin-top:28px;background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden}
.compare-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 9rem;align-items:center;border-top:1px solid var(--line)}
.compare-row:first-child{border-top:none}
.compare-row span{padding:14px 18px}
.compare-row span+span{text-align:center}
.compare-head{background:var(--elev);font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.compare-head .gn{color:var(--neon);white-space:nowrap}
.compare-row .gn,.compare-row .oui{background:color-mix(in srgb,var(--neon) 9%,transparent)}
.oui{color:var(--neon);font-weight:900;font-size:1.2rem}
.non{color:var(--muted)}
.card-hot{border-color:color-mix(in srgb,var(--neon) 70%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--neon) 14%,var(--surface)),var(--surface) 60%)}

/* Sélecteur Annuel / Mensuel — radios natives (clavier), sans JavaScript (CSP). */
.periode-radio{position:absolute;opacity:0;pointer-events:none}
.billing{display:flex;gap:4px;width:max-content;margin:0 auto 34px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.billing label{cursor:pointer;padding:9px 20px;border-radius:999px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.billing label em{font-style:normal;font-size:.78rem;font-weight:800;margin-left:6px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--neon) 20%,transparent);color:var(--neon)}
#periode-an:checked~.billing label[for="periode-an"],#periode-mois:checked~.billing label[for="periode-mois"]{background:var(--neon);color:var(--on-neon)}
#periode-an:checked~.billing label[for="periode-an"] em{background:var(--on-neon);color:var(--neon)}
#periode-an:focus-visible~.billing label[for="periode-an"],#periode-mois:focus-visible~.billing label[for="periode-mois"]{outline:2px solid var(--accent-soft);outline-offset:2px}
#periode-an:checked~.pricing .per-mois,#periode-mois:checked~.pricing .per-an{display:none}
.price .price-sub{color:var(--muted);font-size:.95rem;min-height:1.5em}
.price .price-sub strong{color:var(--neon)}
.price.star{transform:translateY(-8px)}
.price .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--neon);color:var(--on-neon);font-size:.78rem;font-weight:800;border-radius:999px;padding:3px 14px;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.price li.hot{color:var(--text);font-weight:700}
.unite{text-align:center;color:var(--muted);margin:26px 0 0}
.unite strong{color:var(--text)}
.club{display:flex;align-items:center;gap:18px;margin-top:26px;padding:22px 24px;border-radius:var(--radius);background:var(--surface);border:1px dashed color-mix(in srgb,var(--neon) 55%,transparent)}
.club-ico{font-size:1.6rem;width:56px;height:56px;flex:none;display:grid;place-items:center;background:var(--elev);border-radius:14px}
.club-txt{flex:1}
.club h3{font-size:1.1rem;margin-bottom:2px}
.club p{color:var(--muted);font-size:.94rem}
.legal-note{text-align:center;color:var(--muted);font-size:.92rem;margin-top:18px}
/* Marque de l'en-tête : masquée quand le wordmark de la photo d'accueil est
   visible (assets/entete.js) — sans JS, elle reste visible. */
header .logo, header .brand-wordmark{transition:opacity .2s ease}
header.marque-masquee .logo, header.marque-masquee .brand-wordmark{opacity:0;pointer-events:none}
/* Sélecteur de langue (site multilingue) : pastilles .badge existantes,
   dans l'en-tête — le choix de langue se fait sur la page d'accueil. */
@media (max-width:900px){header span.badge{display:none}}
header nav.langues{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
header nav.langues a{text-decoration:none;padding:3px 9px;font-size:.78rem}
header nav.langues a[aria-current="true"]{border-color:var(--accent);color:var(--accent)}

@media (max-width:860px){
  .energie-grid{grid-template-columns:1fr}
  .price.star{transform:none}
}
@media (max-width:600px){
  .moteurs{grid-template-columns:1fr}
  .bar{grid-template-columns:7.6em 1fr 3.2em;gap:8px;font-size:.86rem}
  .stat-card{padding:22px}
  .compare-row{grid-template-columns:minmax(0,1fr) 5.8rem 5.8rem;font-size:.9rem}
  .compare-row span{padding:12px 10px}
  .compare-head{font-size:.68rem;letter-spacing:.04em}
  .club{flex-direction:column;text-align:center}
}
/* En-tête : le logo rond fait doublon avec le wordmark sur très petit écran (débordement à 390 px). */
@media (max-width:420px){header img.logo{display:none}}

footer{border-top:1px solid var(--line);padding:32px 0;text-align:center;color:var(--muted);font-size:.9rem}
footer img{width:134px;border-radius:50%;margin-bottom:12px}
footer .legal{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:10px 0 12px}
footer .legal a{color:var(--muted)}
footer .legal a:hover{color:var(--accent-soft)}

/* Documents légaux (mentions, CGU, confidentialité) */
.doc{max-width:820px;padding:44px 24px 64px}
.doc h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:6px}
.doc .version{color:var(--muted);font-size:.9rem;margin-bottom:28px}
.doc h2{margin:28px 0 10px;font-size:1.25rem;text-align:left}
.doc h3{margin:18px 0 8px;font-size:1.05rem}
.doc p,.doc li{color:var(--muted);font-size:.98rem}
.doc li{margin:4px 0}
.doc ul{margin:8px 0 8px 22px}
.doc a{color:var(--accent)}
.doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.93rem}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;color:var(--muted)}
.doc th{color:var(--text);background:var(--surface)}
.doc .retour{display:inline-block;margin-bottom:18px;font-size:.9rem}

@media (max-width:600px){.hero{padding:16px 16px 5%}.hero p.sub{display:none}section{padding:44px 0}}
/* Petits écrans : le wordmark est plus large que l'ancien nom texte — on
   l'affine et on évite le retour à la ligne du bouton d'en-tête. */
@media (max-width:480px){header .wrap{height:64px}header img.brand-wordmark{height:29px}header img.logo{width:48px;height:48px}header .cta.small{white-space:nowrap;padding:8px 14px}header .badge{display:none}}

/* — Section « Bienfaits de la marche nordique » —
   Même grammaire que la section « Énergie » : visuel cadré néon (cf.
   .stat-card) + cartes compactes (cf. .moteur / .card .ico), encart de départ
   repris de .club, note en .legal-note. Desktop : grille 12 colonnes — le
   visuel occupe 6 colonnes × 3 rangées, 6 cartes à droite, 3 cartes dessous.
   Jetons du thème uniquement : fluide dans les 5 habillages. Sans JavaScript. */
.bienfaits-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bienfaits-figure{grid-column:1/7;grid-row:1/4;align-self:center;margin:0;border-radius:var(--radius);overflow:hidden;border:1.5px solid color-mix(in srgb,var(--neon) 70%,transparent);box-shadow:0 14px 50px color-mix(in srgb,var(--neon) 16%,transparent)}
.bienfaits-figure img{display:block;width:100%;height:auto}
.bienfait{grid-column:span 3;display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;transition:border-color .2s,transform .2s}
.bienfait:nth-of-type(n+7){grid-column:span 4}
.bienfait:hover{border-color:color-mix(in srgb,var(--neon) 70%,transparent);transform:translateY(-2px)}
.bienfait-tete{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bienfait .ico{font-size:1.2rem;width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--elev);border:1px solid rgba(255,255,255,.12);border-radius:12px}
.bienfait h3{font-size:1rem;line-height:1.25}
.bienfait p{color:var(--muted);font-size:.92rem;line-height:1.5}
.bienfait strong{color:var(--neon);font-weight:700}
@media (max-width:1000px){
  .bienfaits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bienfaits-figure{grid-column:1/-1;grid-row:auto;justify-self:center;width:100%;max-width:640px;margin-bottom:10px}
  .bienfait,.bienfait:nth-of-type(n+7){grid-column:auto}
  .bienfait:last-of-type{grid-column:1/-1}
}
/* Mobile : liste compacte (pastille à gauche, texte aligné sous le titre)
   plutôt que 9 cartes empilées — la section reste courte au pouce. */
@media (max-width:600px){
  .bienfaits-grid{grid-template-columns:1fr;gap:0}
  .bienfaits-figure{margin-bottom:18px}
  .bienfait{display:grid;grid-template-columns:40px 1fr;column-gap:14px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 2px}
  .bienfait:hover{transform:none}
  .bienfait-tete{display:contents}
  .bienfait .ico{grid-row:span 2;align-self:start}
  .bienfait h3{align-self:end;margin-bottom:2px}
  .bienfait:last-of-type{border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.bienfait{transition:none}.bienfait:hover{transform:none}}