/* ============================================================
   YH Brands — site Brand House · feuille de style partagée
   Double mode clair/sombre · charte officielle · épuré/conversion
   ============================================================ */
:root{
  --display:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --magenta:#E6008A; --violet:#5B1A8C; --violet-deep:#3A0E63;
  --grad:linear-gradient(112deg,#3A0E63 0%,#5B1A8C 28%,#E6008A 100%);
  --maxw:1180px; --r:14px; --ease:cubic-bezier(.22,.61,.36,1);
}
/* CLAIR — 2/3 clair, 1/3 sombre via .contrast */
:root[data-theme="light"]{
  --bg:#F4F1EA; --bg-soft:#ECE7DD; --surface:#FBF9F4;
  --text:#0B0B0E; --text-soft:#56544F; --muted:#8A877F;
  --border:rgba(11,11,14,.12); --border-strong:rgba(11,11,14,.2);
  --accent:#E6008A; --accent-ink:#B7006F;
  --contrast-bg:#ECE7DD; --contrast-surface:#FBF9F4; --contrast-text:#0B0B0E; --contrast-soft:#56544F; --contrast-border:rgba(11,11,14,.10);
  --star:rgba(11,11,14,.32); --star-rgb:11,11,14; --stars-opacity:0;
}
/* SOMBRE — 2/3 sombre (jamais noir pur), 1/3 clair via .contrast */
:root[data-theme="dark"]{
  --bg:#14141A; --bg-soft:#1B1B22; --surface:#25242A;
  --text:#FAF8F3; --text-soft:#C8C4BB; --muted:#928E86;
  --border:rgba(244,241,234,.13); --border-strong:rgba(244,241,234,.24);
  --accent:#FF2EA6; --accent-ink:#FF2EA6;
  --contrast-bg:rgba(255,255,255,.06); --contrast-surface:rgba(255,255,255,.085); --contrast-text:#FAF8F3; --contrast-soft:#C8C4BB; --contrast-border:rgba(244,241,234,.14);
  --star:rgba(244,241,234,.45); --star-rgb:244,241,234; --stars-opacity:.9;
}
/* SOMBRE = cosmos : fond profond + nébuleuse, sections translucides pour révéler les étoiles */
:root[data-theme="dark"]{ --bg:#0A0910; --bg-soft:#0E0C15; }
:root[data-theme="dark"] body{ background:#0A0910; }
:root[data-theme="dark"] body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(45% 38% at 14% 16%, rgba(var(--season-2),.20), transparent 70%),
    radial-gradient(42% 36% at 86% 84%, rgba(var(--season-rgb),.14), transparent 70%); }
:root[data-theme="dark"] .soft{ background:rgba(255,255,255,.03) }
:root[data-theme="dark"] .card{ background:rgba(255,255,255,.05); }
/* Jour : texture chaude sur les sections « feature » (anti-fade) */
:root[data-theme="light"] .contrast::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 16% 32%, rgba(255,198,120,.5) 1.6px, transparent 6px),
    radial-gradient(circle at 60% 18%, rgba(230,0,138,.16) 2px, transparent 7px),
    radial-gradient(circle at 82% 66%, rgba(91,26,140,.14) 1.6px, transparent 6px),
    radial-gradient(circle at 38% 82%, rgba(255,198,120,.4) 1.6px, transparent 6px),
    radial-gradient(circle at 90% 30%, rgba(255,198,120,.38) 1.5px, transparent 6px) }
:root[data-theme="dark"] header::before{ background:color-mix(in srgb,#0A0910 70%,transparent); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--display); background:var(--bg); color:var(--text); line-height:1.6; letter-spacing:.005em; transition:background .35s var(--ease),color .35s var(--ease); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.mono{font-family:var(--mono); font-weight:400; letter-spacing:.12em; text-transform:uppercase; font-size:11px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
h1,h2,h3{font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(38px,6vw,72px); font-weight:700}
h2{font-size:clamp(27px,3.6vw,44px)}
h3{font-size:20px; font-weight:600}
p{margin:0}
.lede{font-size:clamp(17px,1.7vw,21px); color:var(--text-soft); font-weight:300; line-height:1.55}
.mt{margin-top:26px}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}
.center .cta-row{justify-content:center}
/* Paragraphes justifiés (lecture plus nette) — on préserve le centrage, le hero et les libellés mono */
p{text-align:justify; text-justify:inter-word}
.center p, .center .lede, [class*="center"] p, .hero p, .hero .lede, footer p,
.eyebrow, .num, .label, .cp-dom, .join-note, .news-note, .constel-hint, .prep-lab,
.sk-name, .ck-d-n, .member p, .kpi .lab, .kpi .val, .soon p, .e404 p{text-align:inherit}
/* IMPORTANT : largeurs en px (les unités ch sur le conteneur valaient ~256px → titres écrasés) */
.section-head{max-width:680px}
.section-head .lede{max-width:480px}
.section-head.center{margin:0 auto}
.section-head.center .lede{margin-left:auto; margin-right:auto}
.section-head.wide{max-width:none}
.section-head.wide h2{white-space:nowrap}
@media(max-width:760px){.section-head,.section-head .lede{max-width:100%} .section-head.wide h2{white-space:normal}}

section{padding:clamp(68px,10vh,140px) 0; position:relative}
.contrast{background:var(--contrast-bg); color:var(--contrast-text)}
.contrast .lede{color:var(--contrast-soft)}
.contrast .card,.contrast .offer,.contrast .mcard,.contrast .logo-chip{background:var(--contrast-surface); border-color:var(--contrast-border)}
.soft{background:var(--bg-soft)}
.rule{height:1px; background:var(--border); border:0; margin:0}

/* HEADER */
header{position:sticky; top:0; z-index:80; border-bottom:1px solid var(--border)}
/* flou porté par un ::before pour que <header> ne devienne PAS le bloc conteneur du tiroir fixe (sinon le menu mobile reste coincé à la hauteur du header) */
header::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px)}
.nav{display:flex; align-items:center; gap:26px; height:68px}
.brand{font-weight:700; letter-spacing:.02em; font-size:18px; display:flex; align-items:center; gap:9px}
.brand .mark{width:46px; height:46px; color:var(--text); display:grid; place-items:center}
.brand .mark svg{width:100%; height:100%; fill:currentColor; display:block}
.brand .bh{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-left:1px solid var(--border); padding-left:10px; margin-left:4px}
@media(max-width:560px){.brand .bh{display:none}}
.menu{display:flex; gap:23px; margin-left:12px}
.menu a{font-size:14px; color:var(--text-soft); transition:color .2s}
.menu a:hover,.menu a.on{color:var(--text)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.lang{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text-soft); cursor:pointer}
.lang .cur{display:inline-flex; align-items:center; gap:5px; padding:7px 6px; border-radius:8px}
.lang:hover .cur{color:var(--text)}
.lang .submenu{position:absolute; top:100%; right:0; margin-top:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px 0; min-width:62px; display:none; flex-direction:column; box-shadow:0 12px 28px rgba(0,0,0,.18); z-index:90}
.lang:hover .submenu,.lang:focus-within .submenu{display:flex}
.lang .submenu a{padding:7px 14px; color:var(--text-soft)}
.lang .submenu a:hover{color:var(--accent)}
.nav-sep{width:1px; height:20px; background:var(--border-strong); margin:0 4px; flex:none}

/* Trajectoire : préparation au sol (chariot + bonhomme) puis fusée qui suit la courbe */
.trajectory{position:relative; margin-top:34px}
.traj-svg{width:100%; height:auto; display:block; overflow:visible}
.tdash{fill:none; stroke:url(#trajGrad); stroke-width:3; stroke-dasharray:1 11; stroke-linecap:round}
.tnode circle{fill:var(--contrast-text)}
.tnode text{fill:var(--surface); font-family:var(--mono); font-weight:500; font-size:14px; text-anchor:middle; dominant-baseline:central}
.tlabel{fill:var(--contrast-soft); font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-anchor:middle}
.trkt-body{fill:var(--contrast-text)}
.trkt-win{fill:var(--accent)}
.trkt-fin{fill:var(--accent)}
.tcart{fill:var(--accent)}
.tsmoke circle{fill:var(--contrast-soft); opacity:0}
@keyframes smoke{0%,100%{opacity:.08; transform:translateY(0)} 50%{opacity:.2; transform:translateY(-4px)}}
.prep-bar{display:flex; align-items:center; gap:16px; margin-top:24px}
.prep-lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--contrast-soft); white-space:nowrap}
.prep-track{flex:1; height:8px; border-radius:100px; background:var(--contrast-border); overflow:hidden}
.prep-fill{height:100%; width:100%; background:var(--grad); border-radius:inherit; transform-origin:left; animation:prep 8s var(--ease) infinite}
@keyframes prep{0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.trkt,.tcart,.tsmoke circle{display:none} .prep-fill{animation:none; transform:scaleX(1)}}
@media(max-width:680px){.tlabel{font-size:20px} .tnode text{font-size:20px}}
.toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; transition:.25s; padding:0}
.toggle:hover{border-color:var(--accent); color:var(--accent)}
.toggle svg{width:17px; height:17px}
.toggle .moon{display:none}
:root[data-theme="dark"] .toggle .moon{display:block}
:root[data-theme="dark"] .toggle .sun{display:none}
/* au survol : on montre l'icône du mode vers lequel on bascule (soleil en nuit, lune en jour) */
:root[data-theme="dark"] #themeBtn:hover .moon{display:none}
:root[data-theme="dark"] #themeBtn:hover .sun{display:block}
:root:not([data-theme="dark"]) #themeBtn:hover .sun{display:none}
:root:not([data-theme="dark"]) #themeBtn:hover .moon{display:block}

/* BUTTONS — CTA « vivants » (dégradé en mouvement + reflet + halo) */
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:15px; padding:14px 25px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s, color .25s, background-position .6s var(--ease); white-space:nowrap; overflow:hidden; isolation:isolate}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-solid{background:var(--grad); background-size:200% 200%; background-position:0% 50%; color:#fff; border-color:transparent; box-shadow:0 8px 24px -12px rgba(230,0,138,.7)}
.btn-solid:hover{background-position:100% 50%; box-shadow:0 14px 32px -10px rgba(230,0,138,.85); transform:translateY(-2px)}
.btn-solid::after{content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; z-index:-1; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .65s var(--ease)}
.btn-solid:hover::after{left:125%}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
/* CTA couleur secondaire (violet) — moins proéminent que le CTA principal */
.btn-2{background:color-mix(in srgb,var(--violet) 14%,transparent); color:var(--text); border-color:var(--violet)}
:root[data-theme="dark"] .btn-2{color:#e8daf6}
.btn-2:hover{background:var(--violet); color:#fff; border-color:var(--violet); transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(91,26,140,.8)}
.contrast .btn-ghost{color:var(--contrast-text); border-color:var(--contrast-border)}
.contrast .btn-ghost:hover{border-color:var(--contrast-text)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}

/* HERO */
.hero{padding-top:clamp(56px,8vh,104px)}
.hero h1{max-width:15ch}
.hero h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{max-width:54ch; margin-top:26px}

/* LAYOUT HELPERS */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.cas-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.cas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cas-grid{grid-template-columns:1fr}}
/* 4 cas : titres alignés (même hauteur) + paragraphes justifiés */
.cas-grid .card{display:flex; flex-direction:column}
.cas-grid .card h3{min-height:2.6em; margin-bottom:8px}
.cas-grid .card p{text-align:justify; margin:0}
@media(max-width:560px){.cas-grid .card h3{min-height:0}}
/* fiches détail : aligner les listes à puces avec le bloc texte (pas collées en haut) */
#lancer .detail,#construire .detail,#alliance .detail{align-items:center}
#lancer .detail .lede,#construire .detail .lede{text-align:justify}
.split{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}

/* CARDS */
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:0 1px 2px rgba(11,11,14,.03), 0 16px 40px -26px rgba(11,11,14,.22)}
:root[data-theme="dark"] .card{box-shadow:none}
.card h3{margin-bottom:10px}
.card p{color:var(--text-soft); font-size:15px; font-weight:300}
.num{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--accent); margin-bottom:16px; display:block}

/* OFFERS */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px}
.offer{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; transition:.3s var(--ease); box-shadow:0 1px 2px rgba(11,11,14,.03), 0 16px 40px -26px rgba(11,11,14,.2)}
:root[data-theme="dark"] .offer{box-shadow:none}
.offer:hover{transform:translateY(-5px); border-color:var(--accent)}
.offer.feat{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.offer .tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.offer .name{font-size:24px; font-weight:700; margin:6px 0 4px}
/* deux formules mises en avant (plus grandes, plus présentes) */
.offers-hero{margin-top:30px}
.offers-hero .offer{padding:40px 36px 56px; border-radius:22px}
.offers-hero .offer .name{font-size:clamp(30px,3.4vw,40px); margin:10px 0 6px}
.offers-hero .offer .price{font-size:16px}
.offers-hero .offer .desc{font-size:16px; margin-bottom:30px}
.offers-hero .offer.feat{box-shadow:0 0 0 1px var(--accent), 0 24px 60px -34px rgba(230,0,138,.5)}
.offer .price{font-family:var(--mono); font-size:15px; color:var(--accent); margin-bottom:18px}
.offer .desc{font-size:14.5px; color:var(--text-soft); font-weight:300; flex:1; margin-bottom:22px}
.contrast .offer .desc{color:var(--contrast-soft)}
a.offer{position:relative; padding-bottom:54px; text-decoration:none}
a.offer::after{content:"Voir le détail  →"; position:absolute; left:28px; bottom:26px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:.7; transition:.25s var(--ease)}
a.offer:hover::after{opacity:1; transform:translateX(3px)}

/* DETAIL (offre / pilier) */
.detail{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.detail .price-lg{font-family:var(--mono); color:var(--accent); font-size:16px; margin-top:8px}
.detail h2 .for{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:400}
.feature-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.feature-list li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--text-soft); font-weight:300}
.feature-list .ck{flex:none; width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--accent) 16%,transparent); display:grid; place-items:center; margin-top:2px}
.feature-list .ck svg{width:12px; height:12px; stroke:var(--accent); fill:none; stroke-width:3}

/* Little Star — bloc « ce qui est inclus » sous les 3 cas */
.ls-incl{margin-top:48px; padding-top:30px; border-top:1px solid var(--border)}
.ls-incl-h{font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 20px}
.ls-incl-list{grid-template-columns:1fr 1fr; gap:14px 44px}
@media(max-width:680px){.ls-incl-list{grid-template-columns:1fr}}
.ls-incl-note{margin-top:22px; font-size:15px; color:var(--text-soft); font-weight:300; max-width:76ch}

/* STEPS (voyage) */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px}
.step .num{font-family:var(--mono); color:var(--accent); font-size:13px; letter-spacing:.1em; margin:0}
.step h3{margin:10px 0 8px; font-size:18px}
.step p{font-size:14px; color:var(--text-soft); font-weight:300}

/* BANDES (9 piliers) */
.bands{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px}
.band{border:1px solid var(--border); border-radius:var(--r); padding:24px; background:var(--surface); transition:.25s var(--ease)}
.band:hover{border-color:var(--accent); transform:translateY(-3px)}
.band .num{margin-bottom:12px}
.band h3{font-size:17px; margin-bottom:6px}
.band p{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; line-height:1.7}
.contrast .band{background:var(--contrast-surface); border-color:var(--contrast-border)}
/* Capacités cliquables → grande carte détail */
.band[data-cap]{cursor:pointer; position:relative}
.band[data-cap]::after{content:"+"; position:absolute; top:16px; right:18px; font-family:var(--mono); font-size:16px; color:var(--accent); opacity:.45; transition:.2s}
.band[data-cap]:hover::after{opacity:1; transform:rotate(90deg)}
/* indice discret : les cartes s'animent à tour de rôle pour montrer qu'elles sont dynamiques */
@keyframes bandHint{ 0%,90%,100%{ border-color:var(--border); box-shadow:none } 95%{ border-color:color-mix(in srgb,var(--accent) 32%,var(--border)); box-shadow:0 6px 20px -12px rgba(230,0,138,.5) } }
@keyframes bandHintPlus{ 0%,90%,100%{ opacity:.45; transform:none } 95%{ opacity:.95; transform:rotate(90deg) } }
.bands .band[data-cap]{ animation:bandHint 18s ease-in-out infinite }
.bands .band[data-cap]::after{ animation:bandHintPlus 18s ease-in-out infinite }
.bands .band[data-cap]:nth-child(1),.bands .band[data-cap]:nth-child(1)::after{ animation-delay:0s }
.bands .band[data-cap]:nth-child(2),.bands .band[data-cap]:nth-child(2)::after{ animation-delay:1.8s }
.bands .band[data-cap]:nth-child(3),.bands .band[data-cap]:nth-child(3)::after{ animation-delay:3.6s }
.bands .band[data-cap]:nth-child(4),.bands .band[data-cap]:nth-child(4)::after{ animation-delay:5.4s }
.bands .band[data-cap]:nth-child(5),.bands .band[data-cap]:nth-child(5)::after{ animation-delay:7.2s }
.bands .band[data-cap]:nth-child(6),.bands .band[data-cap]:nth-child(6)::after{ animation-delay:9s }
.bands .band[data-cap]:nth-child(7),.bands .band[data-cap]:nth-child(7)::after{ animation-delay:10.8s }
.bands .band[data-cap]:nth-child(8),.bands .band[data-cap]:nth-child(8)::after{ animation-delay:12.6s }
.bands .band[data-cap]:nth-child(9),.bands .band[data-cap]:nth-child(9)::after{ animation-delay:14.4s }
.bands .band[data-cap]:hover{ animation:none }
.bands .band[data-cap]:hover::after{ animation:none }
@media(prefers-reduced-motion:reduce){ .bands .band[data-cap],.bands .band[data-cap]::after{ animation:none } }
.cap-stage{margin-top:42px}
.cap-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); background:transparent; border:0; cursor:pointer; padding:6px 0; margin-bottom:18px}
.cap-back:hover{color:var(--accent)}
.cap-card{border:1px solid var(--border); border-radius:20px; background:var(--surface); padding:clamp(28px,4vw,48px); box-shadow:0 1px 2px rgba(11,11,14,.03), 0 24px 60px -40px rgba(11,11,14,.3); animation:capin .35s var(--ease)}
:root[data-theme="dark"] .cap-card{background:rgba(255,255,255,.05); box-shadow:none}
@keyframes capin{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.cap-card .cap-head{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.cap-card .cap-head .num{margin:0}
.cap-card .cap-head h3{font-size:clamp(22px,3vw,32px)}
.cap-card .cap-lead{font-size:clamp(17px,1.8vw,21px); color:var(--text-soft); font-weight:300; max-width:60ch; margin-bottom:22px}
.cap-card ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; max-width:720px}
.cap-card li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--text-soft); font-weight:300}
.cap-card li::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:8px}
@media(max-width:680px){.cap-card ul{grid-template-columns:1fr}}

/* MARQUES (grille) */
.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px}
.mcard{border:1px solid var(--border); border-radius:var(--r); padding:24px; background:var(--surface); transition:.25s var(--ease)}
.mcard:hover{border-color:var(--accent); transform:translateY(-3px)}
.mcard .logo{font-weight:700; font-size:18px; margin-bottom:6px}
.mcard p{font-size:14px; color:var(--text-soft); font-weight:300}
.bandgroup{margin-top:46px}
.bandgroup .lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}

/* LOGO WALL — vignettes lisibles (auto-fit), nom en typo display */
.logos{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:14px; margin-top:40px}
.logo-chip{min-height:90px; border:1px solid var(--border-strong); border-radius:16px; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.01em; color:var(--text-soft); background:var(--surface); text-align:center; padding:18px; transition:.25s var(--ease)}
.logo-chip:hover{border-color:var(--accent); color:var(--text); transform:translateY(-3px); box-shadow:0 18px 32px -24px rgba(230,0,138,.55)}
:root[data-theme="dark"] .logo-chip{background:rgba(255,255,255,.05)}

/* VIDEO */
.video{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; background:#0B0B0E; cursor:pointer; border:1px solid var(--border)}
.video .poster{position:absolute; inset:0; background:radial-gradient(120% 140% at 30% 20%,#3A0E63,#0B0B0E 70%); display:grid; place-items:center}
.video .play{width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; transition:.25s; backdrop-filter:blur(4px)}
.video:hover .play{background:var(--accent); border-color:var(--accent); transform:scale(1.06)}
.video .play svg{width:24px; height:24px; fill:#fff; margin-left:3px}
.video .label{position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.82); text-transform:uppercase}
.video video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}

/* CERCLE / RÔLES */
.roles{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px}
.role{border:1px solid var(--border); border-radius:var(--r); padding:24px; background:var(--surface)}
.role h3{font-size:17px; margin-bottom:6px}
.role p{font-size:14px; color:var(--text-soft); font-weight:300}
/* Rejoindre la communauté : icônes réseaux + note */
.social-row{display:flex; gap:16px; justify-content:center; margin-top:28px}
.soc-ic{width:54px; height:54px; border-radius:50%; border:1px solid var(--contrast-border); display:inline-flex; align-items:center; justify-content:center; color:var(--contrast-text); transition:.2s var(--ease)}
.soc-ic svg{width:22px; height:22px}
.soc-ic:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px)}
.join-note{text-align:center; margin:18px auto 0; max-width:56ch; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--contrast-soft); text-transform:none}
.contrast .role{background:var(--contrast-surface); border-color:var(--contrast-border)}

/* ÉQUIPE */
/* ÉQUIPE — avatars ronds, disposition 4·4·3 centrée (façon référence) */
.team{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:34px 46px; margin:44px auto 0; max-width:860px}
.member{width:152px; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:default}
.member .ph{flex:none; width:114px; height:114px; margin:0 auto 14px; border-radius:50%; background:radial-gradient(130% 130% at 30% 24%, #2b2633, #0b0a10 82%); display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid var(--border-strong); transition:.25s var(--ease)}
.member:hover .ph{border-color:rgba(var(--season-rgb),.65); transform:translateY(-4px); box-shadow:0 0 0 2px rgba(var(--season-rgb),.32), 0 10px 32px rgba(var(--season-rgb),.34)}
.member .ph .ini{font-family:var(--display); font-weight:200; font-size:46px; line-height:1; color:rgba(255,255,255,.45); text-transform:lowercase}
.member .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.member .ph .pl{display:none}
.member:hover .ph .pl{opacity:1; transform:none}
.member .ph .pl svg{width:12px; height:12px; fill:#fff; margin-left:1px}
.member b{font-size:18px; font-weight:500; display:block; margin-bottom:3px}
.member span{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* FORM */
.form{display:grid; gap:16px; max-width:560px; margin-top:30px}
.form label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block}
.form input,.form textarea,.form select{width:100%; font-family:var(--display); font-size:15px; padding:14px 16px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text)}
.form textarea{min-height:130px; resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--accent)}

/* QUOTE */
.big-quote{font-size:clamp(26px,3.4vw,42px); font-weight:300; letter-spacing:-.01em; line-height:1.3; max-width:20ch; margin:0 auto}
.big-quote b{font-weight:700}
.sig{font-size:clamp(24px,3.2vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1.18; max-width:18ch}
.sig em{font-style:normal; color:var(--accent)}

/* FOOTER */
footer{background:var(--contrast-bg); color:var(--contrast-text); padding:70px 0 36px}
.fcols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px; align-items:start}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr; gap:36px}}
footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--contrast-soft); margin:0 0 16px; font-weight:500}
footer a{display:block; color:var(--contrast-text); opacity:.8; font-size:14px; padding:5px 0; transition:opacity .2s}
footer a:hover{opacity:1; color:var(--accent)}
.fbase{font-size:21px; font-weight:600; max-width:18ch; line-height:1.25}
.social{display:flex; gap:12px; margin-top:20px}
.social a{width:40px; height:40px; border-radius:50%; border:1px solid var(--contrast-border); display:grid; place-items:center; color:var(--contrast-text); opacity:.85; transition:.22s var(--ease)}
.social a:hover{border-color:var(--accent); color:var(--accent); opacity:1; transform:translateY(-2px)}
.social svg{width:18px; height:18px}
.fbot{margin-top:48px; padding-top:22px; border-top:1px solid var(--contrast-border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--contrast-soft)}

/* KPIs / COMPTEUR */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.kpi{text-align:center}
.kpi .val{font-size:clamp(42px,5.4vw,68px); font-weight:700; letter-spacing:-.02em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.kpi .lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:12px}
.contrast .kpi .lab{color:var(--contrast-soft)}

/* NEWSLETTER */
.news{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; max-width:520px}
.news input{flex:1; min-width:190px; padding:13px 18px; border-radius:100px; border:1px solid var(--contrast-border); background:transparent; color:var(--contrast-text); font-family:var(--display); font-size:14px}
.news input::placeholder{color:var(--contrast-soft)}
.news button{border:0; border-radius:100px; padding:13px 22px; background:var(--accent); color:#fff; font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer}
.news button:hover{background:var(--accent-ink)}
.news-note{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--contrast-soft); margin-top:12px; text-transform:none}

/* SOLEIL derrière les sections à texte clair (.contrast) */
.contrast{position:relative; overflow:hidden}
.contrast::before{content:""; position:absolute; top:-32%; right:-8%; width:620px; height:620px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(230,0,138,.18), rgba(91,26,140,.12) 42%, transparent 68%); animation:sunspin 120s linear infinite}
.contrast > .wrap{position:relative; z-index:1}
@media(prefers-reduced-motion:reduce){.contrast::before{animation:none}}

/* VALEURS sur une ligne (×5) */
.values5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:42px}
.value{text-align:left}
.value h3{font-size:16px; margin-bottom:8px}
.value p{font-size:13px; font-weight:300; color:var(--text-soft); line-height:1.5}
.contrast .value p{color:var(--contrast-soft)}

/* TECH highlight */
.tech-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.tech-badges span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:7px 13px; border-radius:100px; border:1px solid var(--border-strong)}

/* CADRAN FM (tuner de navigation, à droite — façon référence) */
.dial-nav{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:60; font-family:var(--mono); font-weight:500; user-select:none}
.dial-nav .readout{display:block; text-align:right; font-size:11px; letter-spacing:.14em; color:var(--accent); margin-bottom:14px}
.dial-nav .items{position:relative; display:flex; flex-direction:column; gap:13px; padding-left:14px; border-left:1px solid var(--border-strong)}
.dial-nav .needle{position:absolute; left:-1px; top:0; width:2px; height:18px; background:var(--grad); transition:top .18s ease-out}
.dial-nav a{display:flex; align-items:baseline; gap:8px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); transition:color .2s; cursor:pointer}
.dial-nav a i{font-style:normal; font-size:9.5px; color:var(--text-soft); opacity:.8; min-width:32px; transition:color .2s, opacity .2s}
.dial-nav a:hover,.dial-nav a.on,.dial-nav a.on b{color:var(--text)}
.dial-nav a.on i{color:var(--accent); opacity:1}
/* compact par défaut (n'empiète pas) : les libellés n'apparaissent qu'au survol */
.dial-nav a b{max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .28s var(--ease), opacity .2s}
.dial-nav:hover a b{max-width:180px; opacity:1}
@media(max-width:1400px){.dial-nav{display:none}}

/* RESERVATION (Fluent Forms côté WP) */
.booking{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:560px; margin-top:26px}
.booking .full{grid-column:1 / -1}
.booking input,.booking select{width:100%; font-family:var(--display); font-size:15px; padding:14px 16px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text)}
.booking input:focus,.booking select:focus{outline:none; border-color:var(--accent)}
.contrast .booking input,.contrast .booking select{background:var(--contrast-surface); border-color:var(--contrast-border); color:var(--contrast-text)}
.ff-note{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); margin-top:10px; text-transform:none}

/* NOYAU — système solaire (anneaux + orbites) */
.noyau-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:center}
.rings-wrap{display:flex; justify-content:center}
.rings-svg{width:100%; max-width:420px; height:auto; display:block}
.ring-c{fill:none; stroke:var(--border-strong); stroke-dasharray:3 6}
.ring-label{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; fill:var(--muted); text-anchor:middle; text-transform:uppercase}
.orb{transform-origin:210px 210px; animation:orbit 70s linear infinite}
.orb.orb-2{animation-duration:105s; animation-direction:reverse}
.orb.orb-3{animation-duration:150s}
.orb.orb-4{animation-duration:120s}
.orb.orb-5{animation-duration:90s; animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
.orb .planet{fill:var(--text)}
.orb .planet.mg{fill:var(--accent)}
/* lunes en orbite autour de certaines planètes */
.moon{fill:var(--text); opacity:.55}
.moon-orb{animation:orbit 9s linear infinite}
.moon-orb.m-2{transform-origin:153px 153px; animation-duration:8s}
.moon-orb.m-3{transform-origin:292px 292px; animation-duration:11s; animation-direction:reverse}
.moon-orb.m-4{transform-origin:58px 210px; animation-duration:7s}
.moon-orb.m-4b{transform-origin:58px 210px; animation-duration:13s; animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.moon-orb{animation:none}}
.sun-halo{fill:rgba(230,0,138,.20)}
.sun-ring{fill:none; stroke:var(--accent); stroke-width:1.2}
.sun-core{fill:var(--accent)}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}

/* CONSTELLATION reliée (carte des synergies) */
.constelwrap{margin-top:42px; border:1px solid var(--contrast-border); border-radius:var(--r); overflow:hidden; background:rgba(0,0,0,.14)}
.constel{display:block; width:100%; height:auto}
.constel .lk{stroke:var(--contrast-soft); stroke-width:1; opacity:.16; transition:opacity .2s, stroke .2s}
.constel .nd{cursor:pointer}
.constel .nd circle{fill:var(--contrast-text); transition:fill .2s, r .2s}
.constel .nd.major circle{fill:var(--magenta)}
.constel .nd text{fill:var(--contrast-soft); font-family:var(--mono); font-size:13px; letter-spacing:.02em; pointer-events:none; transition:fill .2s, opacity .2s}
.constel .nd.major text{fill:var(--contrast-text); font-weight:500}
.constel .nd:hover circle,.constel .nd:focus circle{fill:var(--magenta)}
.constel.dim .lk{opacity:.05}
.constel.dim .nd{opacity:.22}
.constel.dim .nd.hot{opacity:1}
.constel .lk.hot{opacity:.75; stroke:var(--magenta); stroke-width:1.4}

/* SKINS PLANÈTES — palette de ciel + accent + dégradé + teinte d'étoiles.
   data-planet="" = thème de base (magenta) par défaut ; les autres sont des skins. */
:root{ --season-rgb:230,0,138; --season-2:91,26,140; --ray-rgb:255,212,160; }
/* Vénus — fournaise dorée, nuages d'acide */
:root[data-planet="venus"]{ --season-rgb:255,196,110; --season-2:214,138,58; --ray-rgb:255,226,168;
  --accent:#E8A33C; --accent-ink:#C9852A; --grad:linear-gradient(112deg,#7a3b10 0%,#c9852a 42%,#ffcf7a 100%); }
/* Terre — océans, nuages, continents */
:root[data-planet="terre"]{ --season-rgb:90,170,230; --season-2:74,196,150; --ray-rgb:200,230,255;
  --accent:#2E9BE6; --accent-ink:#1E7FC2; --grad:linear-gradient(112deg,#0b3a63 0%,#1E7FC2 42%,#46d39a 100%); }
/* Jupiter — bandes & grande tache rouge */
:root[data-planet="jupiter"]{ --season-rgb:240,168,108; --season-2:178,86,58; --ray-rgb:255,208,166;
  --accent:#E07A3C; --accent-ink:#C25E2A; --grad:linear-gradient(112deg,#5b2a14 0%,#c25e2a 45%,#f3b574 100%); }
/* Saturne — or pâle & anneaux */
:root[data-planet="saturne"]{ --season-rgb:232,202,140; --season-2:182,150,92; --ray-rgb:246,230,184;
  --accent:#D9B45A; --accent-ink:#B8923A; --grad:linear-gradient(112deg,#5a4520 0%,#b8923a 45%,#f0d89a 100%); }

/* (1) Ciel teinté par le skin — haut-droit + bas-gauche */
body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 80% 2%, rgba(var(--season-rgb),.14), transparent 72%),
    radial-gradient(46% 34% at 8% 96%, rgba(var(--season-2),.07), transparent 70%);
  transition:background .8s ease }
:root[data-theme="light"] body::after{
  background:
    radial-gradient(60% 50% at 82% -2%, rgba(var(--ray-rgb),.30), transparent 66%),
    radial-gradient(58% 46% at 78% 4%, rgba(var(--season-rgb),.16), transparent 72%),
    radial-gradient(54% 42% at 4% 102%, rgba(var(--ray-rgb),.18), transparent 72%) }
/* (1bis) Nuit : les étoiles prennent la teinte du skin */
:root[data-theme="dark"][data-planet="venus"]{ --star-rgb:255,224,176; }
:root[data-theme="dark"][data-planet="terre"]{ --star-rgb:206,228,255; }
:root[data-theme="dark"][data-planet="jupiter"]{ --star-rgb:248,210,172; }
:root[data-theme="dark"][data-planet="saturne"]{ --star-rgb:246,228,176; }
/* (2) Matière UI : léger voile coloré du skin sur les cartes (mode clair) */
:root[data-planet="terre"][data-theme="light"] .card,:root[data-planet="terre"][data-theme="light"] .offer,:root[data-planet="terre"][data-theme="light"] .band,:root[data-planet="terre"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(206,230,255,.5), var(--surface) 70%); border-color:rgba(90,170,230,.34) }
:root[data-planet="venus"][data-theme="light"] .card,:root[data-planet="venus"][data-theme="light"] .offer,:root[data-planet="venus"][data-theme="light"] .band,:root[data-planet="venus"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(255,224,170,.5), var(--surface) 72%); border-color:rgba(214,138,58,.34) }
:root[data-planet="jupiter"][data-theme="light"] .card,:root[data-planet="jupiter"][data-theme="light"] .offer,:root[data-planet="jupiter"][data-theme="light"] .band,:root[data-planet="jupiter"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(255,212,170,.5), var(--surface) 72%); border-color:rgba(178,86,58,.32) }
:root[data-planet="saturne"][data-theme="light"] .card,:root[data-planet="saturne"][data-theme="light"] .offer,:root[data-planet="saturne"][data-theme="light"] .band,:root[data-planet="saturne"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(246,230,184,.55), var(--surface) 72%); border-color:rgba(182,150,92,.34) }
.season-btn .seas-ic{font-size:15px; line-height:1; display:block}
#season-fx{position:fixed; inset:0; z-index:0; pointer-events:none}

/* RÉVÉLATIONS AU SCROLL */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* VAGUE animée (manifeste) */
.wave-wrap{margin:34px 0 6px; max-width:560px}
.wave-wrap svg{width:100%; height:54px; display:block; overflow:visible}

/* RAYONS DE SOLEIL fixes qui traversent la page (mode clair) — origine coin haut-droit */
.bg-sun{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-sun .rays{position:absolute; top:-30%; right:-30%; width:150vmax; height:150vmax; transform-origin:100% 0%;
  background:repeating-conic-gradient(from 190deg at 100% 0%, rgba(var(--ray-rgb),.05) 0deg .7deg, transparent .7deg 10deg);
  filter:blur(1.5px); transition:background .8s ease;
  -webkit-mask:radial-gradient(62% 62% at 100% 0%, #000, rgba(0,0,0,.5) 42%, transparent 78%);
          mask:radial-gradient(62% 62% at 100% 0%, #000, rgba(0,0,0,.5) 42%, transparent 78%)}
.bg-sun .core{position:absolute; top:-220px; right:-180px; width:640px; height:640px; border-radius:50%; transition:background .8s ease;
  background:radial-gradient(circle, rgba(var(--ray-rgb),.55) 0 8%, rgba(var(--ray-rgb),.22) 22%, rgba(var(--ray-rgb),.06) 40%, transparent 66%)}
:root[data-theme="dark"] .bg-sun{display:none}  /* en sombre : ce sont les étoiles */
@keyframes sunspin{to{transform:rotate(360deg)}}

/* CONSTELLATION BG */
#stars{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--stars-opacity,.6)}
section{z-index:1; position:relative}
/* footer au-dessus des éléments fixes (cadran, planètes) : il les recouvre proprement en bas de page */
footer{z-index:67; position:relative}
:root[data-theme="dark"] footer{background:#0A0910}
header{z-index:90}

/* ============================================================
   RÉSERVATION — widget calendrier (simulation, façon Réalisons)
   ============================================================ */
.bw{display:grid; grid-template-columns:.82fr 1.18fr; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--surface); margin-top:30px; box-shadow:0 1px 2px rgba(11,11,14,.03), 0 28px 64px -40px rgba(11,11,14,.34)}
:root[data-theme="dark"] .bw{background:rgba(255,255,255,.04); box-shadow:none}
.bw-side{padding:34px 30px; border-right:1px solid var(--border)}
.bw-brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; margin-bottom:24px}
.bw-brand .mark{width:24px; height:24px; color:var(--accent)} .bw-brand .mark svg{width:100%; height:100%; fill:currentColor; display:block}
.bw-side h3{font-size:23px; margin-bottom:20px}
.bw-meta{display:flex; flex-direction:column; gap:13px; margin-bottom:22px}
.bw-meta .row{display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--text-soft)}
.bw-meta .row svg{width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.7; flex:none}
.bw-side p{font-size:14.5px; color:var(--text-soft); font-weight:300; line-height:1.65}
.bw-cal{padding:30px}
.bw-calhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.bw-calhead .mo{font-size:20px; font-weight:600} .bw-calhead .mo span{color:var(--muted); font-weight:400}
.bw-nav{display:flex; gap:8px}
.bw-nav button{width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; transition:.2s}
.bw-nav button:hover{border-color:var(--accent); color:var(--accent)}
.bw-nav svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2}
.bw-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center}
.bw-grid .dow{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-bottom:10px}
.bw-day{aspect-ratio:1; display:grid; place-items:center; border-radius:11px; font-size:15px; color:var(--muted); position:relative}
.bw-day.muted{opacity:.32}
.bw-day.av{background:var(--bg-soft); color:var(--text); cursor:pointer; font-weight:500; transition:.18s}
:root[data-theme="dark"] .bw-day.av{background:rgba(255,255,255,.07)}
.bw-day.av:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.bw-day.sel{background:var(--accent); color:#fff}
.bw-day.today::after{content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent)}
.bw-day.sel.today::after{background:#fff}
.bw-tz{margin-top:24px}
.bw-tz label{display:block; font-size:14px; color:var(--text-soft); margin-bottom:8px}
.bw-tz .sel-wrap{position:relative}
.bw-tz select{width:100%; font-family:var(--display); font-size:15px; padding:13px 16px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); appearance:none}
:root[data-theme="dark"] .bw-tz select{background:rgba(255,255,255,.05)}
.bw-tz select:focus{outline:none; border-color:var(--accent)}
.bw-slots{margin-top:18px; display:none; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px}
.bw-slots.on{display:grid}
.bw-slot{padding:11px 8px; border:1px solid var(--border-strong); border-radius:10px; background:transparent; color:var(--text); font-family:var(--mono); font-size:13px; cursor:pointer; transition:.18s}
.bw-slot:hover{border-color:var(--accent); color:var(--accent)}
.bw-slot.sel{border-color:var(--accent); background:var(--accent); color:#fff}
.bw-confirm{margin-top:18px; display:none}
.bw-confirm.on{display:block}
.bw-note{font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); margin-top:14px; text-transform:none}

/* ============================================================
   COOKIES — préférences (modale, façon Réalisons)
   ============================================================ */
.cookie-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px}
.cookie-modal.on{display:flex}
.cookie-modal .ck-backdrop{position:absolute; inset:0; background:rgba(10,9,16,.55); backdrop-filter:blur(4px)}
.cookie-card{position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:32px 30px; box-shadow:0 50px 100px -34px rgba(0,0,0,.55); animation:ckpop .3s var(--ease)}
@media(max-width:560px){
  .cookie-modal{padding:12px}
  .cookie-card{padding:20px 18px; border-radius:18px; max-height:92vh}
  .cookie-card h3{font-size:19px}
  .cookie-card .ck-intro{font-size:13px; margin-bottom:16px}
  .ck-opt{padding:12px 14px; margin-bottom:10px}
  .ck-opt .txt span{font-size:12px}
  .cookie-actions{margin-top:18px}
}
:root[data-theme="dark"] .cookie-card{background:#17151f}
@keyframes ckpop{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.cookie-card h3{font-size:22px; margin-bottom:8px}
.cookie-card .ck-intro{font-size:14px; color:var(--text-soft); font-weight:300; margin-bottom:22px}
.ck-opt{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border); border-radius:14px; margin-bottom:12px; background:var(--bg-soft)}
:root[data-theme="dark"] .ck-opt{background:rgba(255,255,255,.04)}
.ck-opt .txt{flex:1}
.ck-opt .txt b{display:block; font-size:15px; margin-bottom:3px}
.ck-opt .txt span{font-size:13px; color:var(--text-soft); font-weight:300; line-height:1.5}
.ck-sw{position:relative; width:46px; height:27px; flex:none; margin-top:2px}
.ck-sw input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; width:100%; height:100%}
.ck-sw .track{position:absolute; inset:0; border-radius:100px; background:var(--border-strong); transition:.2s}
.ck-sw .track::after{content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.22s var(--ease)}
.ck-sw input:checked + .track{background:var(--accent)}
.ck-sw input:checked + .track::after{transform:translateX(19px)}
.ck-sw input:disabled{cursor:not-allowed}
.ck-sw input:disabled + .track{opacity:.55}
.cookie-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap}
/* Bannière cookies (premier passage) */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:190; display:none; padding:16px clamp(16px,4vw,40px); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -12px 40px rgba(0,0,0,.22)}
:root[data-theme="dark"] .cookie-banner{background:#17151f}
.cookie-banner.on{display:block; animation:ckbup .35s var(--ease)}
.cookie-banner .ckb-in{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.cookie-banner .ckb-txt{flex:1; min-width:280px}
.cookie-banner .ckb-txt b{display:block; font-size:15px; margin-bottom:4px}
.cookie-banner .ckb-txt p{font-size:13px; color:var(--text-soft); font-weight:300; line-height:1.55; margin:0; text-align:left}
.cookie-banner .ckb-txt a{color:var(--accent)}
.cookie-banner .ckb-act{display:flex; gap:12px; flex:none; flex-wrap:wrap}
@keyframes ckbup{from{transform:translateY(100%)} to{transform:none}}
@media(max-width:560px){ .cookie-banner .ckb-act{width:100%} .cookie-banner .ckb-act .btn{flex:1; justify-content:center} }
/* Cockpit : bouton masqué sous 1280px (réservé aux grands écrans) */
@media(max-width:1279px){ #expertBtn{ display:none !important } }

/* ============================================================
   PAGES LÉGALES + 404
   ============================================================ */
section.legal-hero{padding-bottom:0}
section.legal-hero + section{padding-top:clamp(20px,3vh,36px)}
.legal{max-width:760px}
.legal h2{font-size:23px; margin:38px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px; margin:24px 0 8px}
.legal p{font-size:15.5px; color:var(--text-soft); font-weight:300; line-height:1.7; margin-bottom:14px}
.legal ul{margin:0 0 16px; padding-left:20px}
.legal li{font-size:15.5px; color:var(--text-soft); font-weight:300; line-height:1.7; margin-bottom:6px}
.legal a{color:var(--accent)}
.legal .upd{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:30px}
.legal .lead{font-size:15.5px; color:var(--text-soft); font-weight:300; line-height:1.7; margin-bottom:14px}
.e404{min-height:62vh; display:grid; place-items:center; text-align:center}
.e404 .code{font-size:clamp(96px,20vw,220px); font-weight:700; line-height:.9; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ============================================================
   HEADER 3 PILIERS + MÉGA-MENUS + DRAWER MOBILE
   ============================================================ */
.menu{display:flex; gap:4px; margin-left:14px; align-items:center}
.navitem{position:static}
.navlink{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--text-soft); padding:10px 13px; border-radius:9px; transition:color .2s, background .2s; cursor:pointer}
.navlink:hover,.navlink.on{color:var(--text)}
.navlink .caret{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.55; transition:transform .25s var(--ease)}
.navitem:hover .navlink .caret,.navitem:focus-within .navlink .caret{transform:rotate(180deg); opacity:1}
.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-shadow:0 30px 56px -34px rgba(11,11,14,.45); opacity:0; visibility:hidden; transform:translateY(-8px); transition:.22s var(--ease); z-index:70}
:root[data-theme="dark"] .mega{background:#141220; box-shadow:0 30px 56px -30px rgba(0,0,0,.6)}
/* pont invisible : couvre l'espace entre l'onglet et le panneau (pas de zone morte) */
.mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.navitem:hover .mega,.navitem:focus-within .mega,.navitem.open .mega{opacity:1; visibility:visible; transform:none}
.navitem.open .navlink .caret{transform:rotate(180deg); opacity:1}
.mega-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:22px 0}
.mega-link{display:flex; gap:13px; align-items:flex-start; padding:16px; border-radius:14px; border:1px solid transparent; transition:.2s var(--ease)}
.mega-link .mi{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--border); color:var(--accent); background:var(--bg-soft); transition:.2s}
:root[data-theme="dark"] .mega-link .mi{background:rgba(255,255,255,.04)}
.mega-link .mi svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.mega-link .mt{display:flex; flex-direction:column; gap:4px}
.mega-link .mt b{font-size:15.5px; font-weight:600}
.mega-link .mt span{font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--muted); line-height:1.45; text-transform:none}
.mega-link:hover{background:var(--bg-soft); border-color:var(--border)}
:root[data-theme="dark"] .mega-link:hover{background:rgba(255,255,255,.05)}
.mega-link:hover b{color:var(--accent)}
.mega-link:hover .mi{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* Burger + drawer mobile */
.burger{display:none; width:40px; height:40px; border:1px solid var(--border-strong); border-radius:10px; background:transparent; color:var(--text); cursor:pointer; align-items:center; justify-content:center; padding:0; flex:none}
.burger span{display:block; width:17px; height:2px; background:currentColor; position:relative; border-radius:2px}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:2px; background:currentColor; border-radius:2px; transition:.2s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.drawer{position:fixed; inset:0; z-index:130; background:var(--bg); display:none; flex-direction:column; padding:84px 26px 30px; overflow-y:auto; gap:6px}
.drawer.open{display:flex}
.drawer-cta{justify-content:center; margin-bottom:18px}
.drawer .drawer-top{font-size:21px; font-weight:600; padding:16px 4px; border-top:1px solid var(--border)}
.acc{border-top:1px solid var(--border)}
.acc-h{width:100%; text-align:left; background:transparent; border:0; color:var(--text); font-family:var(--display); font-size:21px; font-weight:600; padding:16px 4px; cursor:pointer; display:flex; justify-content:space-between; align-items:center}
.acc-h::after{content:"+"; font-weight:300; color:var(--accent)}
.acc.open .acc-h::after{content:"–"}
.acc-b{display:none; flex-direction:column; padding:0 4px 12px}
.acc.open .acc-b{display:flex}
.acc-b a{font-size:16px; color:var(--text-soft); padding:9px 0}
.acc-b a:hover{color:var(--accent)}
.drawer-close{position:absolute; top:22px; right:24px; width:40px; height:40px; border:1px solid var(--border-strong); border-radius:10px; background:transparent; color:var(--text); font-size:20px; cursor:pointer}

/* ===== VARIANTE : accent par univers + sous-nav contextuelle sticky ===== */
:root{ --uni:#E6008A; }
:root[data-universe="brandhouse"]{ --uni:#E6008A; }
:root[data-universe="univers"]{ --uni:#4F9DF0; }
:root[data-universe="societe"]{ --uni:#D9A441; }
header{ border-top:0 }
/* on remplace les méga-menus par la sous-nav : on masque les panneaux */
.mega{ display:none !important; }
.navlink .caret{ display:none; }
.navlink.on{ color:var(--uni) }
.subnav{position:sticky; top:67px; z-index:75; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--border)}
.subnav-in{display:flex; align-items:center; gap:6px; height:52px; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.subnav .uni-label{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--uni); margin-right:8px; white-space:nowrap}
.subnav .uni-label::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--uni); box-shadow:0 0 10px var(--uni)}
.subnav .uni-sep{width:1px; height:18px; background:var(--border-strong); margin-right:4px; flex:none}
.subnav a.sn{font-size:14px; color:var(--text-soft); padding:8px 12px; border-radius:8px; white-space:nowrap; position:relative; transition:color .2s}
.subnav a.sn:hover{color:var(--text)}
.subnav a.sn.on{color:var(--text)}
.subnav a.sn.on::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--uni); border-radius:2px}
.subnav .sn-cta{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap; padding:8px 4px}
.subnav .sn-cta:hover{color:var(--accent-ink)}
@media(max-width:760px){ .subnav-in{overflow-x:auto; gap:2px; -webkit-overflow-scrolling:touch} .subnav .uni-label,.subnav .uni-sep{display:none} .subnav .sn-cta{display:none} }

/* ===== PAGES D'ACCUEIL DE PILIER (cartes) ===== */
.pillar-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:46px}
.pcard{display:flex; gap:18px; align-items:flex-start; padding:28px; border:1px solid var(--border); border-radius:18px; background:var(--surface); transition:.25s var(--ease); position:relative}
:root[data-theme="dark"] .pcard{background:rgba(255,255,255,.05)}
.pcard:hover{border-color:var(--uni,var(--accent)); transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(230,0,138,.5)}
.pcard .mi{flex:none; width:50px; height:50px; border-radius:13px; display:grid; place-items:center; border:1px solid var(--border); color:var(--uni,var(--accent)); background:var(--bg-soft); transition:.2s}
:root[data-theme="dark"] .pcard .mi{background:rgba(255,255,255,.04)}
.pcard:hover .mi{border-color:var(--uni,var(--accent)); background:color-mix(in srgb,var(--uni,var(--accent)) 12%,transparent)}
.pcard .mi svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pcard h3{font-size:19px; margin-bottom:6px}
.pcard p{font-size:14.5px; color:var(--text-soft); font-weight:300; line-height:1.5; max-width:34ch}
.pcard .go{position:absolute; top:26px; right:24px; color:var(--uni,var(--accent)); opacity:.45; transition:.2s var(--ease)}
.pcard:hover .go{opacity:1; transform:translateX(3px)}
@media(max-width:760px){.pillar-grid{grid-template-columns:1fr}}

/* ===== FORMULAIRE QUALIFIÉ (Démarrer mon projet) ===== */
.qform{display:grid; gap:26px; max-width:680px; margin-top:8px}
.qfield > .qlabel{display:block; font-size:15px; font-weight:600; margin-bottom:12px}
.qopts{display:flex; flex-wrap:wrap; gap:10px}
.qopt{position:relative}
.qopt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.qopt span{display:inline-flex; padding:11px 16px; border:1px solid var(--border-strong); border-radius:100px; font-size:14px; color:var(--text-soft); cursor:pointer; transition:.18s}
.qopt input:checked + span{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent)}
.qopt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.qgrid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform input[type=url],.qform textarea{width:100%; font-family:var(--display); font-size:15px; padding:14px 16px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text)}
:root[data-theme="dark"] .qform input,:root[data-theme="dark"] .qform textarea{background:rgba(255,255,255,.05)}
.qform textarea{min-height:120px; resize:vertical}
.qform input:focus,.qform textarea:focus{outline:none; border-color:var(--accent)}
.qhint{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:8px; text-transform:none; letter-spacing:0}

/* ===== ENCART « BIENTÔT » ===== */
.soon{border:1px dashed var(--border-strong); border-radius:20px; padding:clamp(32px,5vw,60px); text-align:center; max-width:620px; margin:0 auto; background:var(--surface)}
:root[data-theme="dark"] .soon{background:rgba(255,255,255,.04)}
.soon .badge{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.soon h3{font-size:clamp(20px,2.6vw,28px); margin-bottom:12px}
.soon p{color:var(--text-soft); font-weight:300; max-width:42ch; margin:0 auto 22px}
.soon .news{justify-content:center; margin-left:auto; margin-right:auto}

/* ===== FONDATEUR (Société) ===== */
.founder{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center}
.founder .portrait{aspect-ratio:4/5; border-radius:18px; background:radial-gradient(130% 130% at 30% 20%,var(--violet),#0b0a10 80%); border:1px solid var(--border-strong); display:grid; place-items:center; overflow:hidden}
.founder .portrait .ini{font-family:var(--display); font-weight:200; font-size:80px; color:rgba(255,255,255,.4)}
.founder .portrait img{width:100%; height:100%; object-fit:cover}
.thisisyan{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text-soft); margin-top:18px; text-transform:none; border-bottom:1px solid var(--border-strong); padding-bottom:3px}
.thisisyan:hover{color:var(--accent); border-color:var(--accent)}
.flink{color:var(--accent)}

/* RESPONSIVE */
@media(max-width:980px){
  .menu,.lang{display:none}
  .burger{display:inline-flex}
  .qgrid2{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
}
@media(max-width:900px){
  .g2,.g3,.g4,.split,.offers,.detail,.steps,.bands,.mgrid,.roles,.kpis,.booking,.noyau-grid{grid-template-columns:1fr}
  .values5{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .bw{grid-template-columns:1fr}
  .bw-side{border-right:0; border-bottom:1px solid var(--border)}
  .bg-sun{width:360px; height:360px; top:-150px; right:-130px}
}
@media(max-width:600px){
  .fcols{grid-template-columns:1fr; gap:30px; max-width:none}
  .news{max-width:none}
  .wrap{padding:0 20px}
  .roles{grid-template-columns:1fr !important}
  .team{grid-template-columns:repeat(2,1fr) !important}
}
/* carte des étoiles : trop dense sur petit écran → on la rend lisible et défilable horizontalement */
@media(max-width:700px){
  .constelwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .constelwrap .constel{width:720px; min-width:720px}
  .constel-tabs{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.bg-sun .rays{animation:none}}

/* ============================================================
   MINI-JEU « Mise en orbite » (modale cosmos + canvas)
   ============================================================ */
.game-modal{position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:20px}
.game-modal.on{display:flex}
.game-modal .gm-backdrop{position:absolute; inset:0; background:rgba(8,6,14,.74); backdrop-filter:blur(6px)}
.game-card{position:relative; width:100%; max-width:420px; background:#0d0b16; border:1px solid rgba(230,0,138,.42); border-radius:22px; padding:18px;
  box-shadow:0 44px 110px -34px rgba(230,0,138,.55), 0 0 0 1px rgba(255,255,255,.04); animation:ckpop .3s var(--ease)}
.gm-x{position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; font-size:18px; cursor:pointer; z-index:3; line-height:1}
.gm-x:hover{border-color:var(--magenta); color:var(--magenta)}
.gm-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:2px 6px 12px}
.gm-title{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--magenta)}
.gm-score{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.55)}
.gm-score b{color:#fff; font-weight:600}
.gm-stage{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.07)}
#gmCanvas{display:block; width:100%; height:auto; background:#0b0a14; touch-action:none; cursor:crosshair}
.gm-overlay{position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; pointer-events:none}
.gm-overlay.on{display:flex; pointer-events:auto; background:rgba(8,6,14,.55); backdrop-filter:blur(2px)}
.gm-panel{padding:24px}
.gm-panel h3{color:#fff; font-size:22px; margin:6px 0 8px; font-weight:600}
.gm-panel p{color:rgba(255,255,255,.72); font-size:14px; margin-bottom:18px}
.gm-panel .btn{font-size:14px}
.gm-rk{font-size:42px; margin-bottom:4px; animation:gmfloat 2.4s ease-in-out infinite}
@keyframes gmfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.gm-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:rgba(255,255,255,.45); text-align:left; margin:12px 4px 2px; padding-left:104px; text-transform:none}
@media(prefers-reduced-motion:reduce){.gm-rk{animation:none}}

/* ============================================================
   SKINS PLANÈTES — corps célestes réalistes en arrière-plan
   ============================================================ */
:root[data-planet="soleil"]{ --season-rgb:255,170,60; --season-2:255,120,40; --ray-rgb:255,210,150;
  --accent:#FF8A1E; --accent-ink:#E06A10; --grad:linear-gradient(112deg,#7a2a0a 0%,#e06a10 45%,#ffce86 100%); }
:root[data-theme="dark"][data-planet="soleil"]{ --star-rgb:255,224,170; }

#skinPlanet,#skinMoon,#skinRing{position:fixed; z-index:0; pointer-events:none; display:none; transform-origin:50% 50%}
#skinPlanet{left:-150px; bottom:-210px; width:540px; height:540px; border-radius:50%; opacity:.62}
:root[data-planet="venus"] #skinPlanet,:root[data-planet="terre"] #skinPlanet,:root[data-planet="neptune"] #skinPlanet,:root[data-planet="jupiter"] #skinPlanet,:root[data-planet="saturne"] #skinPlanet,:root[data-planet="soleil"] #skinPlanet{display:block}

/* — NEPTUNE — bleu profond, bandes subtiles + tache sombre */
:root[data-planet="neptune"] #skinPlanet{ overflow:hidden; background:radial-gradient(circle at 36% 30%, #5aa0e6 0%, #2f6fd0 32%, #1f4fb0 56%, #15357e 80%, #0c2050 100%);
  box-shadow:inset -42px -32px 92px rgba(4,10,30,.84), inset 28px 22px 70px rgba(150,200,255,.20), 0 0 100px 18px rgba(70,120,230,.28)}
:root[data-planet="neptune"] #skinPlanet::before{content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:overlay; opacity:.45;
  background:repeating-linear-gradient(4deg, rgba(210,230,255,.10) 0 7%, rgba(18,46,110,.22) 7% 15%)}
:root[data-planet="neptune"] #skinPlanet::after{content:""; position:absolute; width:58px; height:36px; left:28%; top:60%; border-radius:50%; transform:rotate(-6deg);
  background:radial-gradient(circle at 50% 45%, #0a1f4a, rgba(10,31,74,0) 76%); opacity:.7}
@keyframes planetSpin{to{transform:rotate(360deg)}}

/* — TERRE — océans profonds + continents verts (statique : pas de halos qui défilent) */
:root[data-planet="terre"] #skinPlanet{ background:radial-gradient(circle at 36% 30%, #6fb6e8 0%, #2f7bc0 32%, #18548f 56%, #0a2e53 80%, #05203c 100%);
  box-shadow:inset -42px -32px 92px rgba(4,12,28,.84), inset 30px 24px 72px rgba(150,210,255,.18), 0 0 96px 16px rgba(80,165,230,.22)}
:root[data-planet="terre"] #skinPlanet::before{content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen;
  background:
   radial-gradient(74px 58px at 37% 40%, rgba(58,150,86,.82), rgba(44,118,70,.42) 58%, transparent 78%),
   radial-gradient(98px 62px at 63% 57%, rgba(64,150,92,.74), rgba(40,110,66,.36) 60%, transparent 80%),
   radial-gradient(52px 46px at 29% 66%, rgba(74,162,102,.72), transparent 74%),
   radial-gradient(62px 42px at 71% 31%, rgba(54,138,84,.64), transparent 76%),
   radial-gradient(44px 36px at 51% 50%, rgba(92,172,112,.5), transparent 72%),
   radial-gradient(34px 28px at 21% 45%, rgba(60,140,86,.56), transparent 72%),
   radial-gradient(30px 24px at 80% 64%, rgba(66,148,92,.5), transparent 74%)}
:root[data-planet="terre"] #skinPlanet::after{content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen; opacity:.45;
  background:radial-gradient(42px 14px at 33% 29%, rgba(255,255,255,.30), transparent 70%),radial-gradient(58px 16px at 66% 64%, rgba(255,255,255,.22), transparent 72%),radial-gradient(30px 12px at 50% 79%, rgba(255,255,255,.26), transparent 70%)}
/* Lune (cratères) */
#skinMoon{left:300px; bottom:150px; width:120px; height:120px; border-radius:50%; opacity:.85;
  background:radial-gradient(circle at 38% 34%, #e9e7e0 0%, #bbb8ae 46%, #6f6c64 78%, #403d37 100%);
  box-shadow:inset -15px -11px 28px rgba(8,8,12,.72), 0 0 28px 4px rgba(220,222,232,.12)}
#skinMoon::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(11px 11px at 40% 36%, rgba(60,58,52,.6), transparent 62%),radial-gradient(7px 7px at 61% 50%, rgba(60,58,52,.55), transparent 62%),radial-gradient(5px 5px at 50% 67%, rgba(60,58,52,.5), transparent 62%),radial-gradient(8px 8px at 30% 60%, rgba(60,58,52,.5), transparent 62%),radial-gradient(4px 4px at 68% 30%, rgba(60,58,52,.5), transparent 62%),radial-gradient(6px 6px at 56% 24%, rgba(60,58,52,.45), transparent 62%)}
:root[data-planet="terre"] #skinMoon{display:block}

/* — VÉNUS — */
:root[data-planet="venus"] #skinPlanet{ background:radial-gradient(circle at 36% 32%, #ffe6b0 0%, #f0c270 36%, #d79a3e 62%, #9c6320 82%, #6b3f12 100%);
  box-shadow:inset -40px -30px 90px rgba(60,34,8,.72), inset 26px 20px 70px rgba(255,236,190,.3), 0 0 120px 24px rgba(240,180,90,.3)}
:root[data-planet="venus"] #skinPlanet::after{content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:overlay; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(255,240,200,0) 0deg, rgba(255,228,170,.5) 9deg, rgba(180,120,50,0) 20deg);
  animation:planetSpin 150s linear infinite}

/* — JUPITER — bandes + grande tache rouge */
:root[data-planet="jupiter"] #skinPlanet{ overflow:hidden;
  background:radial-gradient(circle at 36% 28%, rgba(255,228,194,.28), transparent 58%),repeating-linear-gradient(7deg, #ecc6a0 0 5%, #c9885a 5% 10%, #e6b889 10% 15%, #a9683f 15% 20%, #efcea6 20% 26%, #bf8154 26% 31%);
  box-shadow:inset -44px -32px 96px rgba(48,24,10,.74), inset 28px 22px 70px rgba(255,224,180,.2), 0 0 100px 18px rgba(220,150,90,.26)}
:root[data-planet="jupiter"] #skinPlanet::before{content:""; position:absolute; width:108px; height:66px; left:26%; top:60%; border-radius:50%; transform:rotate(7deg);
  background:radial-gradient(circle at 50% 45%, #c8432a, #8f2e1d 62%, rgba(150,47,30,0) 100%); opacity:.85; filter:blur(1px)}

/* — SATURNE — sphère + anneaux */
:root[data-planet="saturne"] #skinPlanet{
  background:radial-gradient(circle at 36% 30%, rgba(255,242,206,.28), transparent 58%),repeating-linear-gradient(5deg, #efdcae 0 7%, #d9c084 7% 13%, #ecd7a4 13% 21%, #cdb074 21% 27%);
  box-shadow:inset -40px -30px 90px rgba(60,46,18,.72), inset 26px 20px 66px rgba(255,240,200,.2), 0 0 90px 16px rgba(220,196,130,.24)}
#skinRing{left:-340px; bottom:-400px; width:920px; height:920px; border-radius:50%;
  transform:rotate(-20deg) scaleY(.30);
  background:radial-gradient(closest-side, transparent 55%, rgba(232,208,150,.0) 56%, rgba(232,208,150,.55) 59%, rgba(196,166,108,.7) 66%, rgba(232,208,150,0) 68%, transparent 71%, rgba(220,196,140,.45) 74%, rgba(180,150,96,.5) 78%, transparent 82%);
  opacity:.75}
:root[data-planet="saturne"] #skinRing{display:block}

/* — SOLEIL — */
:root[data-planet="soleil"] #skinPlanet{ left:-230px; bottom:-270px; width:700px; height:700px;
  background:radial-gradient(circle at 50% 50%, #fff6d8 0%, #ffd86b 26%, #ff9e2c 52%, #f0641a 76%, #b83410 100%);
  box-shadow:0 0 180px 70px rgba(255,150,40,.4), 0 0 90px 24px rgba(255,200,80,.5), inset -18px -18px 80px rgba(150,40,10,.4)}
:root[data-planet="soleil"] #skinPlanet::after{content:""; position:absolute; inset:-7%; border-radius:50%; mix-blend-mode:screen; opacity:.5;
  background:repeating-conic-gradient(from 0deg, rgba(255,220,120,0) 0deg, rgba(255,210,110,.5) 4deg, rgba(255,160,40,0) 9deg);
  animation:planetSpin 60s linear infinite}

@media(prefers-reduced-motion:reduce){#skinPlanet::after{animation:none}}
@media(max-width:760px){#skinPlanet{width:380px; height:380px; left:-130px; bottom:-150px} #skinMoon,#skinRing{display:none!important}}

/* ===== CTA header à la hauteur des toggles ===== */
.cta-head{height:38px; padding:0 18px; font-size:14px}
/* ===== Newsletter compacte (champ + bouton sur une ligne) ===== */
.news{flex-wrap:nowrap}
.news input{min-width:0}
.news button{flex:none}
/* ===== Carte capacité : croix de fermeture ===== */
.cap-card{position:relative}
.cap-x{position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--text); cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center; transition:.2s}
.cap-x:hover{border-color:var(--accent); color:var(--accent)}
/* ===== Constellations : sélecteur + panneau ===== */
.constel-tabs{display:none; flex-wrap:wrap; gap:8px; margin:6px 0 18px}
.constel-tab{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--contrast-soft); border:1px solid var(--contrast-border); background:transparent; padding:8px 14px; border-radius:100px; cursor:pointer; transition:.2s}
.constel-tab:hover{color:var(--contrast-text); border-color:var(--accent)}
.constel-tab.on{color:#fff; background:var(--accent); border-color:var(--accent)}
/* carte des étoiles : pleine largeur, fiche pleine largeur au clic (façon savoir-faire) */
.constel-stage{display:block; position:relative}
.constelwrap{width:100%}
.constel{width:100%; height:auto; display:block}
.constel .nd.off{opacity:.1}
.constel .lk.off{opacity:.02}
.constel .nd.sel circle{ r:8; fill:var(--accent) }
.constel .nd.sel text{ fill:#fff }
.constel-hint{ text-align:center; margin:16px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--contrast-soft) }
/* la fiche recouvre toute la carte des constellations */
.constel-panel[hidden]{ display:none !important }
.constel-panel{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px solid rgba(var(--season-rgb),.5); border-radius:var(--r); background:rgba(8,5,16,.93); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:clamp(40px,6vw,80px) clamp(48px,8vw,120px); animation:capin .3s var(--ease) }
:root[data-theme="light"] .constel-panel{ background:rgba(251,249,244,.97); border-color:rgba(11,11,14,.12) }
:root[data-theme="light"] .constel-panel .cp-logo{ background:#fff; border-color:rgba(0,0,0,.08) }
:root[data-theme="light"] .constel-panel .cp-close{ background:rgba(11,11,14,.04) }
.constel-panel .cp-close{ position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--contrast-border); background:rgba(255,255,255,.04); color:var(--contrast-text); font-size:22px; line-height:1; cursor:pointer; transition:.18s; z-index:2 }
.constel-panel .cp-logo{ width:120px; height:120px; border-radius:22px; border:1px solid rgba(0,0,0,.08); background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; padding:12px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.18) }
.constel-panel .cp-logo img{ max-width:100%; max-height:100%; object-fit:contain }
.constel-panel .cp-logo.cp-logo-dark{ background:#14141A; border-color:rgba(255,255,255,.14) }
.constel-panel .cp-link{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#fff; background:var(--accent); border-radius:100px; padding:10px 18px; transition:.2s var(--ease) }
.constel-panel .cp-link:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.constel-panel .cp-logo .cp-mono{ font-family:var(--display); font-weight:700; font-size:40px; color:var(--accent) }
.constel-panel .cp-close:hover{ border-color:var(--accent); color:var(--accent) }
.constel-panel p{text-align:center}
.constel-panel .cp-dom{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.constel-panel .cp-name{font-size:clamp(24px,3vw,34px); font-weight:700; margin-bottom:12px; line-height:1.08}
.constel-panel .cp-desc{color:var(--contrast-soft); font-weight:300; font-size:clamp(15px,1.6vw,18px); max-width:58ch; margin-left:auto; margin-right:auto; text-align:center; line-height:1.6}
.constel-panel .cp-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--contrast-border); background:rgba(255,255,255,.04); color:var(--contrast-text); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.18s; z-index:2 }
.constel-panel .cp-prev{ left:14px } .constel-panel .cp-next{ right:14px }
.constel-panel .cp-nav:hover{ border-color:var(--accent); color:var(--accent) }
:root[data-theme="light"] .constel-panel .cp-nav{ background:rgba(11,11,14,.04) }
.constel-panel .cp-count{ position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--contrast-soft); margin:0 }
.constel-nav{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px }
.cn-btn{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#fff; background:var(--accent); border:1px solid var(--accent); padding:11px 20px; border-radius:100px; cursor:pointer; transition:.2s var(--ease) }
.cn-btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.cn-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--contrast-soft) }
.cn-partner{ margin-left:auto; min-width:120px; height:48px; border:1px dashed var(--contrast-border); border-radius:12px; display:grid; place-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--contrast-soft); opacity:.7 }
@media(max-width:600px){ .cn-partner{ margin-left:0 } .constel-panel .cp-nav{ width:36px; height:36px; font-size:20px } }
/* ===== Journal : carrousel ===== */
.jcar{display:flex; gap:18px; overflow-x:auto; padding-bottom:10px; margin-top:38px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
#journal .section-head .lede,#evenements .section-head .lede{margin-top:16px}
.jcard{flex:0 0 296px; scroll-snap-align:start; border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; transition:.25s var(--ease)}
:root[data-theme="dark"] .jcard{background:rgba(255,255,255,.05)}
.jcard:hover{transform:translateY(-4px); border-color:var(--accent)}
.jcard .jthumb{height:148px; background:linear-gradient(135deg,var(--violet),var(--magenta))}
.jcard .jbody{padding:18px}
.jcard .jtag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.jcard h3{font-size:17px; margin:7px 0 7px}
.jcard p{font-size:14px; color:var(--text-soft); font-weight:300}
.jcard-link{display:block; text-decoration:none; color:inherit; cursor:pointer}
.jcard-more{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); transition:.2s var(--ease)}
.jcard-link:hover .jcard-more{transform:translateX(3px)}

/* Pages détail : article de journal & fiche événement */
.article{max-width:800px; margin:0 auto}
.art-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:26px}
.art-back:hover{color:var(--accent)}
.art-meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--text-soft); margin-bottom:18px}
.art-tag{color:var(--accent); text-transform:uppercase; letter-spacing:.14em}
.art-hero-img{aspect-ratio:16/9; width:100%; border-radius:var(--r); margin:30px 0; background:linear-gradient(135deg, rgba(91,26,140,.5), rgba(230,0,138,.4)); border:1px solid var(--border); position:relative}
.art-hero-img::after,.ev-hero-img::after{content:"Image 16:9"; position:absolute; bottom:12px; right:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.5)}
.article-body p{font-size:17px; line-height:1.75; color:var(--text-soft); font-weight:300; margin:0 0 22px; max-width:70ch}
.article-body h2{font-size:24px; margin:36px 0 14px}
.ev-hero-img{aspect-ratio:16/9; width:100%; border-radius:var(--r); margin:30px 0; background:radial-gradient(120% 140% at 20% 0%, rgba(230,0,138,.5), rgba(58,14,99,.55) 60%, rgba(10,9,16,.6)); border:1px solid var(--border); position:relative}
.ev-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 30px}
.ev-fact{border:1px solid var(--border); border-radius:14px; padding:18px 20px; background:var(--surface)}
:root[data-theme="dark"] .ev-fact{background:rgba(255,255,255,.04)}
.ev-fact .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.ev-fact .v{font-size:17px; font-weight:600}
.ev-prog{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:12px}
.ev-prog li{display:flex; gap:18px; align-items:baseline; border-bottom:1px solid var(--border); padding-bottom:12px}
.ev-prog .t{font-family:var(--mono); font-size:13px; color:var(--accent); min-width:62px}
@media(max-width:680px){ .ev-facts{grid-template-columns:1fr} }

/* ===== Jeu : formulaire cadeau + classement ===== */
.gm-form{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
.gm-form input{font-family:var(--display); font-size:14px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff}
.gm-form input::placeholder{color:rgba(255,255,255,.5)}
.gm-form .btn{justify-content:center}
.gm-lb{margin:6px 0 12px; text-align:left}
.gm-lb-t{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); margin-bottom:6px}
.gm-lb-r{display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.8); padding:3px 0; border-bottom:1px solid rgba(255,255,255,.07)}
.gm-lb-r b{color:#fff}
.gm-replay{background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:100px; padding:9px 18px; cursor:pointer; font-family:var(--display); font-size:13px}
.gm-replay:hover{border-color:var(--magenta); color:var(--magenta)}
.gm-thx{color:#46d39a; font-size:14px; margin:6px 0 12px}

/* ===== Formules : double mise en avant (violet + magenta) ===== */
.offer.feat-v{border-color:var(--violet); box-shadow:0 0 0 1px var(--violet)}
.offer.feat-v:hover{border-color:var(--violet)}

/* ===== Jeu : ne pas chevaucher la croix de fermeture + note confidentialité ===== */
.gm-head{padding-right:40px}
.gm-priv{font-size:10.5px; line-height:1.45; color:rgba(255,255,255,.45); margin:4px 0 0; text-align:left}
/* ===== Configurateur Little Star ===== */
.cfg{max-width:760px}
.cfg-opts{display:grid; gap:10px}
.cfg-opt{display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); cursor:pointer; transition:border-color .2s, transform .2s}
:root[data-theme="dark"] .cfg-opt{background:rgba(255,255,255,.05)}
.cfg-opt:hover{border-color:var(--accent)}
.cfg-opt input{width:18px; height:18px; accent-color:var(--accent); flex:none; cursor:pointer}
.cfg-opt input:disabled{opacity:.6}
.cfg-opt > span{flex:1; display:flex; flex-direction:column; gap:3px}
.cfg-opt > span b{font-size:15px; font-weight:600}
.cfg-opt > span i{font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.cfg-opt em{font-style:normal; font-family:var(--mono); font-size:14px; color:var(--accent); white-space:nowrap}
.cfg-total{display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:16px 20px; border-radius:14px; background:var(--bg-soft)}
:root[data-theme="dark"] .cfg-total{background:rgba(255,255,255,.06)}
.cfg-total span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cfg-total b{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--text)}

/* ===== Tooltips élégants sur les toggles (jour/nuit · skin · jeu) ===== */
.toggle[data-tip]{position:relative}
.toggle[data-tip]::after{content:attr(data-tip); position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:9px; padding:5px 11px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s .3s, transform .2s .3s; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); z-index:120}
.toggle[data-tip]:hover::after{opacity:1; transform:translateX(-50%) translateY(0)}
.toggle:hover{background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); color:var(--accent)}
@media(max-width:980px){.toggle[data-tip]::after{display:none}}
/* Avertissement « zone de danger » sur le bouton mode expert (réciproque : ça donne envie de cliquer) */

/* ===== Menu actif plus visible ===== */
.navlink{position:relative}
.navlink.on{color:var(--accent)}
.navlink.on::after{content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; background:var(--accent); border-radius:2px}

/* ===== CTA header : supprimer le liseré/point au repos ===== */
.cta-head{background-size:100% 100%}
.cta-head::after{display:none}

/* ===== JUPITER — bandes horizontales + relief sphérique ===== */
:root[data-planet="jupiter"] #skinPlanet{
  background:
    radial-gradient(120% 95% at 42% 34%, rgba(255,232,200,.28), transparent 52%),
    radial-gradient(140% 130% at 50% 50%, transparent 56%, rgba(24,10,2,.6) 100%),
    repeating-linear-gradient(1.5deg, #ecc6a0 0 15px, #c88a5a 15px 27px, #e7ba8a 27px 44px, #aa6a40 44px 58px, #f0cfa8 58px 78px, #bd7f52 78px 92px);
  box-shadow:inset -44px -32px 96px rgba(40,18,6,.78), inset 26px 20px 64px rgba(255,228,186,.2), 0 0 100px 18px rgba(220,150,90,.26)}

/* ===== BLACK HOLE — tout devient noir, rayons qui aspirent ===== */
:root[data-planet="blackhole"]{ --season-rgb:18,14,26; --season-2:8,6,14; --ray-rgb:60,40,90; --accent:#b061ff; --accent-ink:#8a3fe0; --grad:linear-gradient(112deg,#1a0b2e 0%,#5B1A8C 60%,#b061ff 100%); }
:root[data-theme="dark"][data-planet="blackhole"]{ --star-rgb:120,90,160; }
:root[data-planet="blackhole"] body{background:#000}
:root[data-planet="blackhole"] #stars{opacity:0 !important}
:root[data-planet="blackhole"] body::before,:root[data-planet="blackhole"] body::after{display:none !important}
:root[data-planet="blackhole"] .bg-sun{display:none}
:root[data-planet="blackhole"] #skinMoon,:root[data-planet="blackhole"] #skinRing{display:none !important}
:root[data-planet="blackhole"] #skinPlanet{display:block; left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:min(86vw,640px); height:min(86vw,640px); opacity:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #000 0 27%, rgba(176,97,255,.0) 28%, rgba(176,97,255,.4) 31%, rgba(230,0,138,.28) 35%, rgba(0,0,0,0) 48%);
  box-shadow:0 0 160px 60px rgba(0,0,0,.95), inset 0 0 70px 24px #000}
:root[data-planet="blackhole"] #skinPlanet::before{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,#000 0 27%, transparent 28%)}
:root[data-planet="blackhole"] #skinPlanet::after{content:""; position:absolute; inset:-26%; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(176,97,255,0) 0deg, rgba(176,97,255,.22) 5deg, rgba(0,0,0,0) 12deg);
  -webkit-mask:radial-gradient(circle, transparent 27%, #000 40%, transparent 70%); mask:radial-gradient(circle, transparent 27%, #000 40%, transparent 70%);
  animation:planetSpin 16s linear infinite}

/* ============================================================
   PLANÈTES v2 — plus grandes/dans le coin, reliefs, anneaux, atténuation
   ============================================================ */
#skinPlanet{ width:600px; height:600px; left:-200px; bottom:-260px }
@media(max-width:760px){ #skinPlanet{ width:420px; height:420px; left:-160px; bottom:-190px } }

/* VÉNUS — continents (relief) en plus du voile */
:root[data-planet="venus"] #skinPlanet::before{ content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:multiply; opacity:.55;
  background:
    radial-gradient(54px 38px at 40% 36%, rgba(150,88,28,.55), transparent 70%),
    radial-gradient(70px 44px at 63% 60%, rgba(140,78,24,.5), transparent 72%),
    radial-gradient(38px 30px at 30% 66%, rgba(150,90,30,.45), transparent 70%),
    radial-gradient(44px 28px at 73% 30%, rgba(128,72,20,.45), transparent 72%),
    radial-gradient(30px 22px at 52% 50%, rgba(120,66,18,.4), transparent 72%) }

/* JUPITER — bandes plus dégradées à l'intérieur */
:root[data-planet="jupiter"] #skinPlanet{
  background:
    radial-gradient(120% 95% at 42% 34%, rgba(255,232,200,.26), transparent 52%),
    radial-gradient(140% 130% at 50% 50%, transparent 56%, rgba(24,10,2,.6) 100%),
    repeating-linear-gradient(1.5deg, #e9c39a 0, #c98a5c 22px, #ecc8a2 44px, #ab6a40 66px, #e9c39a 92px) }

/* SATURNE — corps lisse + anneaux qui tournent, perspective (haut atténué) */
:root[data-planet="saturne"] #skinPlanet{
  background:radial-gradient(circle at 38% 32%, #f3e0b4 0%, #dcc488 42%, #b8975a 70%, #6e5630 100%) }
#skinRing{ left:-390px; bottom:-450px; width:980px; height:980px;
  -webkit-mask:linear-gradient(to bottom, transparent 0 46%, #000 60%); mask:linear-gradient(to bottom, transparent 0 46%, #000 60%) }
#skinRing::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0 5deg, rgba(255,240,210,.16) 5deg 8deg, rgba(0,0,0,0) 8deg 15deg);
  -webkit-mask:radial-gradient(closest-side, transparent 54%, #000 58% 80%, transparent 84%); mask:radial-gradient(closest-side, transparent 54%, #000 58% 80%, transparent 84%);
  animation:planetSpin 46s linear infinite }

/* SOLEIL — plus grand, plus dans le coin */
:root[data-planet="soleil"] #skinPlanet{ width:820px; height:820px; left:-330px; bottom:-390px }

/* BLACK HOLE — atténué + rayons plus lents */
:root[data-planet="blackhole"] #skinPlanet{
  background:radial-gradient(circle at 50% 50%, #000 0 29%, rgba(176,97,255,0) 30%, rgba(176,97,255,.22) 33%, rgba(230,0,138,.14) 37%, rgba(0,0,0,0) 50%);
  box-shadow:0 0 130px 46px rgba(0,0,0,.9), inset 0 0 70px 24px #000 }
:root[data-planet="blackhole"] #skinPlanet::after{
  background:repeating-conic-gradient(from 0deg, rgba(176,97,255,0) 0deg, rgba(176,97,255,.11) 5deg, rgba(0,0,0,0) 14deg);
  animation-duration:44s }

/* Bouton son du jeu */
.gm-snd{position:absolute; top:12px; right:54px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; color:rgba(255,255,255,.6); font-size:14px; line-height:1; cursor:pointer; z-index:3}
.gm-snd:hover{color:#fff; border-color:var(--magenta)}
.gm-snd.on{color:#fff; border-color:var(--magenta); box-shadow:0 0 10px rgba(230,0,138,.5)}

/* ============================================================
   NOUVEAUX SKINS — Mars · Neptune (planètes) + ambiances
   (Voie lactée · Nébuleuse · Comète · Hyperespace · Trou de ver · Subatomique)
   ============================================================ */

/* --- Palettes --- */
:root[data-planet="mars"]{ --season-rgb:226,122,74; --season-2:150,60,40; --ray-rgb:255,184,142; }
:root[data-planet="neptune"]{ --season-rgb:78,128,224; --season-2:38,58,150; --ray-rgb:176,202,255; }
:root[data-planet="milkyway"]{ --season-rgb:198,180,240; --season-2:120,96,180; --ray-rgb:226,216,255; }
:root[data-planet="nebula"]{ --season-rgb:214,70,170; --season-2:96,40,150; --ray-rgb:255,180,230; }
:root[data-planet="comet"]{ --season-rgb:122,182,255; --season-2:60,110,200; --ray-rgb:198,224,255; }
:root[data-planet="warp"]{ --season-rgb:206,206,255; --season-2:120,120,200; --ray-rgb:228,228,255; }
:root[data-planet="wormhole"]{ --season-rgb:176,97,255; --season-2:110,40,180; --ray-rgb:226,170,255; }
:root[data-planet="atom"]{ --season-rgb:127,182,255; --season-2:60,100,200; --ray-rgb:198,222,255; }

:root[data-theme="dark"][data-planet="mars"]{ --star-rgb:255,196,160; }
:root[data-theme="dark"][data-planet="neptune"]{ --star-rgb:188,210,255; }
:root[data-theme="dark"][data-planet="milkyway"]{ --star-rgb:228,220,255; }
:root[data-theme="dark"][data-planet="nebula"]{ --star-rgb:255,200,236; }
:root[data-theme="dark"][data-planet="comet"]{ --star-rgb:206,228,255; }
:root[data-theme="dark"][data-planet="warp"]{ --star-rgb:228,228,255; }
:root[data-theme="dark"][data-planet="wormhole"]{ --star-rgb:222,180,255; }
:root[data-theme="dark"][data-planet="atom"]{ --star-rgb:200,224,255; }

/* Les ambiances vivent sur le canvas FX ; on atténue les étoiles de fond
   là où l'effet porte déjà le mouvement. */
:root[data-planet="warp"] #stars,
:root[data-planet="wormhole"] #stars{ opacity:.18 !important }
:root[data-planet="atom"] #stars{ opacity:.4 !important }

/* --- MARS : planète rouge, calottes + maria sombres --- */
:root[data-planet="mars"] #skinPlanet,
:root[data-planet="neptune"] #skinPlanet{ display:block }
:root[data-planet="mars"] #skinPlanet{
  background:
    radial-gradient(20px 14px at 60% 40%, rgba(90,30,18,.5), transparent 70%),
    radial-gradient(34px 22px at 38% 64%, rgba(90,30,18,.42), transparent 72%),
    radial-gradient(circle at 36% 30%, #f0a06a 0%, #d8703e 38%, #b14a26 62%, #7c2f17 84%, #511c0e 100%);
  overflow:hidden }
:root[data-planet="mars"] #skinPlanet::before{ content:""; position:absolute; left:50%; top:-7%; width:54%; height:18%; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(closest-side, rgba(255,244,238,.85), rgba(255,244,238,0) 75%) }
:root[data-planet="mars"] #skinPlanet::after{ content:""; position:absolute; left:50%; bottom:-7%; width:46%; height:16%; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(closest-side, rgba(255,244,238,.8), rgba(255,244,238,0) 75%) }

/* --- NEPTUNE : bleu profond, bandes douces, grande tache --- */
:root[data-planet="neptune"] #skinPlanet{ overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.04) 2px 5px),
    radial-gradient(circle at 36% 30%, #7fb0f5 0%, #3f74d6 36%, #2450ac 62%, #163571 84%, #0c1f48 100%) }
:root[data-planet="neptune"] #skinPlanet::before{ content:""; position:absolute; width:96px; height:58px; left:30%; top:58%;
  border-radius:50%; transform:rotate(-8deg); background:radial-gradient(closest-side, rgba(8,18,46,.9), rgba(8,18,46,0) 78%) }

/* Teintes cartes en mode clair (cohérence) */
:root[data-planet="mars"][data-theme="light"] .card,:root[data-planet="mars"][data-theme="light"] .offer,:root[data-planet="mars"][data-theme="light"] .band,:root[data-planet="mars"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(255,206,176,.5), var(--surface) 72%); border-color:rgba(178,74,38,.32) }
:root[data-planet="neptune"][data-theme="light"] .card,:root[data-planet="neptune"][data-theme="light"] .offer,:root[data-planet="neptune"][data-theme="light"] .band,:root[data-planet="neptune"][data-theme="light"] .logo-chip{ background:linear-gradient(170deg, rgba(176,202,255,.5), var(--surface) 72%); border-color:rgba(63,116,214,.32) }

/* ============================================================
   MÉGA-MENU DES SKINS (survol du bouton skin)
   ============================================================ */
.skin-menu{ position:fixed; z-index:120; top:64px; left:auto; right:14px; width:340px; max-width:calc(100vw - 24px);
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(165deg, rgba(20,12,30,.96), rgba(10,6,18,.97));
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(230,0,138,.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s }
.skin-menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto }
:root[data-theme="light"] .skin-menu{ background:linear-gradient(165deg, rgba(255,255,255,.98), rgba(248,244,252,.98)); border-color:rgba(20,10,30,.12); box-shadow:0 24px 60px rgba(40,20,60,.22) }
.skin-menu-h{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin:2px 4px 11px; font-weight:700 }
.skin-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.sk{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:9px 6px 8px; cursor:pointer;
  border-radius:12px; border:1px solid transparent; background:transparent; color:inherit; transition:.16s }
.sk:hover{ border-color:rgba(230,0,138,.4); background:rgba(230,0,138,.06); transform:translateY(-2px) }
.sk.on{ border-color:var(--magenta); background:rgba(230,0,138,.12); box-shadow:inset 0 0 0 1px rgba(230,0,138,.35) }
.sk-name{ font-size:11px; line-height:1.1; text-align:center; opacity:.92 }
.sk-sw{ width:46px; height:46px; border-radius:50%; position:relative; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); background:#0a0612 }

/* --- Aperçus (swatches) --- */
.sk-sw[data-sw="base"]{ background:radial-gradient(circle at 50% 50%, #1a0b2e, #07030f); }
.sk-sw[data-sw="base"]::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(1.5px 1.5px at 28% 32%, #fff, transparent),radial-gradient(1.5px 1.5px at 68% 26%, #ffd0ec, transparent),radial-gradient(1.5px 1.5px at 52% 60%, #fff, transparent),radial-gradient(1.5px 1.5px at 34% 72%, #cdb6ff, transparent),radial-gradient(1.5px 1.5px at 76% 66%, #fff, transparent) }
.sk-sw[data-sw="mars"]{ background:radial-gradient(circle at 36% 32%, #f0a06a, #d8703e 40%, #b14a26 66%, #7c2f17 100%); }
.sk-sw[data-sw="venus"]{ background:radial-gradient(circle at 36% 32%, #ffe6b0, #f0c270 40%, #d79a3e 70%, #9c6320 100%); }
.sk-sw[data-sw="terre"]{ background:radial-gradient(circle at 36% 30%, #7cc1ee, #3b86c9 42%, #1c5594 66%, #07203d 100%); }
.sk-sw[data-sw="terre"]::after{ content:""; position:absolute; inset:0; background:radial-gradient(8px 5px at 40% 44%, rgba(80,200,140,.7), transparent 70%),radial-gradient(7px 5px at 64% 64%, rgba(80,200,140,.6), transparent 70%) }
.sk-sw[data-sw="neptune"]{ background:radial-gradient(circle at 36% 30%, #7fb0f5, #3f74d6 40%, #2450ac 66%, #0c1f48 100%); }
.sk-sw[data-sw="jupiter"]{ background:repeating-linear-gradient(8deg, #e9c39a 0 6px, #c98a5c 6px 12px, #ab6a40 12px 18px); }
.sk-sw[data-sw="jupiter"]::after{ content:""; position:absolute; width:14px; height:9px; left:30%; top:58%; border-radius:50%; background:#9c4a32 }
.sk-sw[data-sw="saturne"]{ background:radial-gradient(circle at 38% 32%, #f3e0b4, #dcc488 44%, #b8975a 72%, #6e5630 100%); }
.sk-sw[data-sw="saturne"]::after{ content:""; position:absolute; left:-12%; right:-12%; top:48%; height:7px; transform:rotate(-18deg);
  border-radius:50%; background:linear-gradient(90deg, transparent, rgba(255,240,210,.85), transparent); box-shadow:0 0 0 1px rgba(0,0,0,.2) }
.sk-sw[data-sw="soleil"]{ background:radial-gradient(circle at 50% 50%, #fff3c4, #ffd35a 36%, #ff9b2e 64%, #e8631a 100%); box-shadow:0 0 14px 2px rgba(255,150,40,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.sk-sw[data-sw="milkyway"]{ background:radial-gradient(circle at 50% 50%, #14102a, #06040f); }
.sk-sw[data-sw="milkyway"]::after{ content:""; position:absolute; inset:-30%; transform:rotate(-30deg);
  background:linear-gradient(0deg, transparent 40%, rgba(206,190,255,.55) 50%, transparent 60%) }
.sk-sw[data-sw="nebula"]{ background:radial-gradient(circle at 38% 40%, rgba(230,60,170,.75), transparent 60%),radial-gradient(circle at 66% 64%, rgba(110,60,200,.7), transparent 60%),radial-gradient(circle at 50% 50%, #14082a, #05030f); }
.sk-sw[data-sw="comet"]{ background:radial-gradient(circle at 50% 50%, #0c1430, #05060f); }
.sk-sw[data-sw="comet"]::after{ content:""; position:absolute; width:34px; height:3px; left:8px; top:18px; transform:rotate(24deg);
  border-radius:3px; background:linear-gradient(90deg, transparent, rgba(160,200,255,.9), #fff) }
.sk-sw[data-sw="warp"]{ background:radial-gradient(circle at 50% 50%, #11122a 0 14%, #05060f 70%); }
.sk-sw[data-sw="warp"]::after{ content:""; position:absolute; inset:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(220,220,255,.6) 0 1deg, transparent 1deg 16deg);
  -webkit-mask:radial-gradient(circle, transparent 12%, #000 60%); mask:radial-gradient(circle, transparent 12%, #000 60%) }
.sk-sw[data-sw="wormhole"]{ background:repeating-radial-gradient(circle at 50% 50%, #b061ff 0 2px, transparent 2px 6px, #e6008a 6px 8px, transparent 8px 12px), #06030f; }
.sk-sw[data-sw="atom"]{ background:radial-gradient(circle at 50% 50%, #0c1330, #05060f); }
.sk-sw[data-sw="atom"]::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; background:#e6008a; box-shadow:0 0 8px #e6008a }
.sk-sw[data-sw="atom"]::after{ content:""; position:absolute; inset:8px; border-radius:50%;
  border:1.5px solid rgba(127,182,255,.6); transform:rotate(30deg) scaleY(.5) }
.sk-sw[data-sw="blackhole"]{ background:radial-gradient(circle at 50% 50%, #000 0 36%, rgba(176,97,255,.5) 42%, rgba(230,0,138,.4) 52%, #05030f 72%); box-shadow:inset 0 0 12px 4px #000; }

@media(max-width:760px){ .skin-grid{ grid-template-columns:repeat(3,1fr) } .skin-menu{ width:300px } }

/* ============================================================
   PACKS CONSTELLATION (configurateur Little Star)
   ============================================================ */
.cfg-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px }
.cfg-presets-l{ font-size:12px; letter-spacing:.04em; opacity:.7; margin-right:2px }
.cfg-preset{ font:inherit; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(var(--season-rgb),.4); background:rgba(var(--season-rgb),.05); color:inherit; transition:.16s }
.cfg-preset:hover{ border-color:rgba(var(--season-rgb),.8); background:rgba(var(--season-rgb),.12); transform:translateY(-1px) }
.cfg-preset.on{ background:var(--magenta); border-color:var(--magenta); color:#fff; box-shadow:0 4px 14px rgba(230,0,138,.35) }

/* ============================================================
   SKINS EXOTIQUES — Aurore boréale · Pluie de météores · Supernova
   (ambiances sur canvas FX)
   ============================================================ */
:root[data-planet="aurora"]{ --season-rgb:70,220,150; --season-2:120,90,230; --ray-rgb:174,255,214; }
:root[data-planet="meteors"]{ --season-rgb:150,190,255; --season-2:80,120,210; --ray-rgb:212,228,255; }
:root[data-planet="supernova"]{ --season-rgb:255,168,88; --season-2:230,90,50; --ray-rgb:255,214,150; }
:root[data-theme="dark"][data-planet="aurora"]{ --star-rgb:200,255,224; }
:root[data-theme="dark"][data-planet="meteors"]{ --star-rgb:206,224,255; }
:root[data-theme="dark"][data-planet="supernova"]{ --star-rgb:255,214,172; }

/* Aperçus méga-menu */
.sk-sw[data-sw="aurora"]{ background:radial-gradient(circle at 50% 80%, #0a1228, #05060f); }
.sk-sw[data-sw="aurora"]::after{ content:""; position:absolute; left:-10%; right:-10%; top:18%; height:60%;
  background:linear-gradient(180deg, rgba(70,220,150,.7), rgba(120,90,230,.25) 55%, transparent);
  -webkit-mask:repeating-linear-gradient(95deg, #000 0 5px, transparent 5px 9px); mask:repeating-linear-gradient(95deg, #000 0 5px, transparent 5px 9px);
  filter:blur(1px) }
.sk-sw[data-sw="meteors"]{ background:radial-gradient(circle at 50% 50%, #0a1024, #05060f); }
.sk-sw[data-sw="meteors"]::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(28deg, transparent 46%, rgba(255,255,255,.9) 49%, transparent 51%),
    linear-gradient(28deg, transparent 22%, rgba(180,210,255,.7) 25%, transparent 27%),
    linear-gradient(28deg, transparent 68%, rgba(200,220,255,.7) 71%, transparent 73%) }
.sk-sw[data-sw="supernova"]{ background:radial-gradient(circle at 50% 50%, #fff4d6 0 10%, #ffb059 24%, #e8631a 44%, #3a1407 78%, #05030f 100%); box-shadow:0 0 14px 2px rgba(255,150,60,.5), inset 0 0 10px 3px rgba(0,0,0,.4); }

/* ===== Skin PULSAR ===== */
:root[data-planet="pulsar"]{ --season-rgb:150,190,255; --season-2:80,120,210; --ray-rgb:200,222,255; }
:root[data-theme="dark"][data-planet="pulsar"]{ --star-rgb:200,222,255; }
.sk-sw[data-sw="pulsar"]{ background:radial-gradient(circle at 50% 50%, #0a1024, #05060f); }
.sk-sw[data-sw="pulsar"]::before{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:#cfe0ff; box-shadow:0 0 9px 1px #bcd4ff; z-index:2 }
.sk-sw[data-sw="pulsar"]::after{ content:""; position:absolute; left:50%; top:-20%; width:12px; height:140%; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(150,190,255,.55) 45%, rgba(150,190,255,.55) 55%, transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 50%,transparent); mask:linear-gradient(90deg,transparent,#000 50%,transparent) }

/* ===== Jeu : bouton son en interrupteur ON/OFF ===== */
.gm-snd{ position:absolute; top:auto; bottom:12px; left:14px; right:auto; width:auto; height:26px; padding:0 9px 0 5px; display:flex; align-items:center; gap:7px;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:rgba(255,255,255,.65);
  font:inherit; font-size:11px; line-height:1; cursor:pointer; z-index:3; box-shadow:none }
.gm-snd .gm-sw{ position:relative; width:30px; height:16px; border-radius:999px; background:rgba(255,255,255,.18); transition:.2s; flex:none }
.gm-snd .gm-knob{ position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:.2s }
.gm-snd .gm-sndt{ font-size:11px; letter-spacing:.02em }
.gm-snd:hover{ color:#fff; border-color:rgba(255,255,255,.4) }
.gm-snd.on{ color:#fff; border-color:var(--magenta); box-shadow:none }
.gm-snd.on .gm-sw{ background:var(--magenta) }
.gm-snd.on .gm-knob{ left:16px }

/* ============================================================
   MODE EXPERT — bouton + cockpit léger (surcouche HUD)
   ============================================================ */
.expert-btn.on{ color:var(--magenta); border-color:var(--magenta) }
.expert-btn.on svg{ filter:drop-shadow(0 0 5px rgba(230,0,138,.6)) }
/* survol du bouton cockpit : un petit signal intriguant (radar qui balaie + onde) */
#expertBtn{ position:relative; overflow:visible }
#expertBtn:hover{ color:var(--magenta); border-color:var(--magenta) }
#expertBtn:hover svg{ animation:ckRadar 4.5s linear infinite; transform-origin:50% 50% }
#expertBtn::after{ content:""; position:absolute; inset:-4px; border-radius:999px; border:1px solid rgba(230,0,138,.55); opacity:0; pointer-events:none }
#expertBtn:hover::after{ animation:ckPing 1.7s ease-out infinite }
@keyframes ckRadar{ to{ transform:rotate(360deg) } }
@keyframes ckPing{ 0%{ transform:scale(.82); opacity:.55 } 70%{ transform:scale(1.45); opacity:0 } 100%{ opacity:0 } }
@media(prefers-reduced-motion:reduce){ #expertBtn:hover svg{ animation:none } #expertBtn:hover::after{ animation:none } }

#cockpit{ position:fixed; inset:0; z-index:60; pointer-events:none; display:none }
:root[data-expert] #cockpit{ display:block }
:root[data-expert][data-theme="light"] #cockpit{ display:none } /* le cockpit suit la nuit */

.ck-grid{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(var(--season-rgb),.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--season-rgb),.5) 1px, transparent 1px);
  background-size:46px 46px; opacity:.04;
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 30%, #000 100%); mask:radial-gradient(circle at 50% 50%, transparent 30%, #000 100%) }
.ck-corner{ position:absolute; width:34px; height:34px; border:2px solid rgba(var(--season-rgb),.55) }
.ck-corner.tl{ top:78px; left:16px; border-right:0; border-bottom:0; border-top-left-radius:6px }
.ck-corner.tr{ top:78px; right:16px; border-left:0; border-bottom:0; border-top-right-radius:6px }
.ck-corner.bl{ bottom:16px; left:16px; border-right:0; border-top:0; border-bottom-left-radius:6px }
.ck-corner.br{ bottom:16px; right:16px; border-left:0; border-top:0; border-bottom-right-radius:6px }
.ck-hud{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; min-width:118px;
  color:rgba(var(--season-rgb),.92); background:rgba(8,4,14,.42); border:1px solid rgba(var(--season-rgb),.3);
  border-radius:12px; padding:11px 13px; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
.ck-row{ display:flex; align-items:baseline; gap:8px; padding:3px 0 }
.ck-row span{ width:30px; opacity:.6; font-size:9.5px; letter-spacing:.14em }
.ck-row b{ color:#fff; font-weight:600; margin-left:auto; font-variant-numeric:tabular-nums }
.ck-row i{ font-style:normal; opacity:.5; font-size:9px }
.ck-row.sys{ margin-top:5px; padding-top:7px; border-top:1px solid rgba(var(--season-rgb),.18) }
.ck-row.sys b{ color:#46d39a; margin-left:0 }
.ck-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#46d39a; box-shadow:0 0 7px #46d39a; animation:ckPulse 1.8s ease-in-out infinite }
@keyframes ckPulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
@media(max-width:1180px){ .ck-hud{ display:none } }
@media(max-width:640px){ .ck-corner{ width:24px; height:24px } }
@media(prefers-reduced-motion:reduce){ .ck-dot{ animation:none } }

/* ============================================================
   MODE EXPERT — skins/jeu réservés à l'expert + boot + ambiance
   ============================================================ */
/* En mode normal : seuls jour/nuit + bouton expert sont visibles */
/* skin/jeu pilotés depuis le tableau de bord expert : boutons d'en-tête masqués */
#seasonBtn, #gameBtn{ display:none !important }

/* bouton « Jeu » du tableau de bord expert : plus engageant (accent + respiration) */
.ck-cmd-b.ck-game{ border-color:rgba(230,0,138,.55); background:linear-gradient(120deg, rgba(230,0,138,.16), rgba(91,26,140,.16)); color:#ffd7ee; animation:ckGameBreathe 3.4s ease-in-out infinite }
.ck-cmd-b.ck-game svg{ color:var(--magenta) }
.ck-cmd-b.ck-game:hover{ border-color:var(--magenta); background:linear-gradient(120deg, rgba(230,0,138,.28), rgba(91,26,140,.24)); box-shadow:0 8px 26px -10px rgba(230,0,138,.7); animation:none }
@keyframes ckGameBreathe{ 0%,100%{ box-shadow:0 0 0 rgba(230,0,138,0) } 50%{ box-shadow:0 6px 22px -10px rgba(230,0,138,.6) } }
@media(prefers-reduced-motion:reduce){ .ck-cmd-b.ck-game{ animation:none } }

/* Séquence de boot du cockpit */
#ck-boot{ position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, #0a0614, #000); }
#ck-boot.play{ animation:ckBootBg 2.7s ease forwards }
@keyframes ckBootBg{ 0%{opacity:1} 82%{opacity:1} 100%{opacity:0} }
.ck-boot-in{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-family:var(--mono); color:rgba(var(--season-rgb),.95); opacity:0; max-width:88vw }
#ck-boot.play .ck-boot-in{ animation:ckBootIn 2.7s ease forwards }
@keyframes ckBootIn{ 0%{opacity:0} 8%{opacity:1} 86%{opacity:1} 100%{opacity:0} }
.ck-boot-l{ font-size:19px; letter-spacing:.30em; margin-bottom:16px }
.ck-boot-s{ font-size:15px; letter-spacing:.12em; margin-top:16px; color:#46d39a; line-height:1.5 }
.ck-boot-bar{ width:260px; max-width:66vw; height:3px; border-radius:3px; background:rgba(var(--season-rgb),.18); overflow:hidden; margin:0 auto }
.ck-boot-bar i{ display:block; height:100%; width:0; background:var(--grad) }
#ck-boot.play .ck-boot-bar i{ animation:ckBootBar 2.1s ease forwards }
@keyframes ckBootBar{ 0%{width:0} 100%{width:100%} }
@media(prefers-reduced-motion:reduce){ #ck-boot{ display:none } }

/* Interrupteur ambiance sonore (dans le cockpit, bas-droite) */
.ck-snd{ position:absolute; right:62px; bottom:14px; display:none; align-items:center; gap:8px; pointer-events:auto;
  padding:6px 12px 6px 7px; border-radius:999px; border:1px solid rgba(var(--season-rgb),.32); background:rgba(8,4,14,.4);
  color:rgba(var(--season-rgb),.85); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; cursor:pointer;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
:root[data-expert][data-theme="dark"] .ck-snd{ display:flex }
.ck-snd .ck-sw{ position:relative; width:28px; height:15px; border-radius:999px; background:rgba(255,255,255,.18); transition:.2s; flex:none }
.ck-snd .ck-knob{ position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:#fff; transition:.2s }
.ck-snd.on{ color:#fff; border-color:var(--magenta) }
.ck-snd.on .ck-sw{ background:var(--magenta) }
.ck-snd.on .ck-knob{ left:15px }
@media(max-width:640px){ .ck-snd{ right:12px; bottom:12px } }

/* ============================================================
   COCKPIT — layout gauche (info) / droite (commandes) + extras
   ============================================================ */
/* INSTRUMENTS à GAUCHE (plus gros) — télémétrie + cadran secteurs */
.ck-hud{ left:16px; right:auto; top:88px; bottom:auto; transform:none; min-width:166px; font-size:12px; padding:14px 16px; background:rgba(10,5,18,.72) }
.ck-hud .ck-row{ padding:4px 0 }
.ck-hud .ck-row span{ font-size:10px }
.ck-hud-t{ font-size:9px; letter-spacing:.26em; opacity:.55; margin-bottom:8px }
:root[data-expert] .dial-nav{ left:18px; right:auto }
:root[data-expert] .dial-nav .readout{ text-align:left; font-size:12px }
:root[data-expert] .dial-nav a{ font-size:11px }
:root[data-expert] .dial-nav a i{ font-size:10px; min-width:40px }

/* COMMANDES à DROITE — barre verticale */
#ck-rail{ position:fixed; right:18px; left:auto; top:50%; transform:translateY(-50%); z-index:70; display:none; flex-direction:column; gap:10px; align-items:center }
:root[data-expert] #ck-rail{ display:flex }
#ck-rail::before{ content:"COMMANDES"; position:absolute; top:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; opacity:.5 }
#ck-rail .toggle{ background:rgba(8,4,14,.42); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
:root[data-theme="light"] #ck-rail .toggle{ background:rgba(255,255,255,.7) }
.ck-cmd.on{ color:var(--magenta); border-color:var(--magenta) }
.ck-cmd .snd-w{ opacity:0; transition:opacity .2s }
.ck-cmd.on .snd-w{ opacity:1 }

/* Joystick parallaxe (fond uniquement), bas-droite — bien visible */
#ck-stick{ position:fixed; right:59px; left:auto; bottom:84px; width:104px; height:104px; z-index:70; display:none; cursor:grab; touch-action:none }
:root[data-expert][data-theme="dark"] #ck-stick{ display:block }
#ck-stick:active{ cursor:grabbing }
#ck-stick::after{ content:"PILOTAGE"; position:absolute; bottom:-19px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; color:rgba(var(--season-rgb),.7) }
.ck-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(var(--season-rgb),.5); background:rgba(8,4,14,.5); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); box-shadow:0 0 18px rgba(var(--season-rgb),.25), inset 0 0 22px rgba(var(--season-rgb),.12) }
.ck-ring::after{ content:""; position:absolute; inset:30%; border-radius:50%; border:1px dashed rgba(var(--season-rgb),.32) }
.ck-knob2{ position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(var(--season-rgb),1), rgba(var(--season-rgb),.4)); box-shadow:0 5px 16px rgba(0,0,0,.55), 0 0 16px rgba(var(--season-rgb),.4), inset 0 0 0 1px rgba(255,255,255,.2) }

/* Étoiles : transition douce du parallaxe au relâché */
#stars{ transition:transform .12s linear }

/* Arrêt du temps */
#ck-freeze{ position:fixed; inset:0; z-index:55; pointer-events:none; display:none;
  background:linear-gradient(rgba(120,180,255,.10),rgba(120,180,255,.10));
  backdrop-filter:saturate(.55) brightness(1.04); -webkit-backdrop-filter:saturate(.55) brightness(1.04);
  box-shadow:inset 0 0 240px 70px rgba(120,180,255,.22) }
:root[data-timestop] #ck-freeze{ display:block; animation:ckFzIn .3s ease }
@keyframes ckFzIn{ from{opacity:0} to{opacity:1} }
.ck-fz-l{ position:absolute; left:50%; top:84px; transform:translateX(-50%); white-space:nowrap; pointer-events:auto; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:#bcdcff;
  background:rgba(8,12,24,.6); padding:9px 20px; border-radius:999px; border:1px solid rgba(120,180,255,.45); transition:.2s }
.ck-fz-l:hover{ color:#fff; border-color:#bcdcff; background:rgba(20,30,55,.7); box-shadow:0 0 18px rgba(120,180,255,.35) }
:root[data-timestop] .bg-sun .rays,
:root[data-timestop] #skinPlanet, :root[data-timestop] #skinPlanet::after, :root[data-timestop] #skinPlanet::before,
:root[data-timestop] #skinRing, :root[data-timestop] #skinRing::before,
:root[data-timestop] .ck-dot, :root[data-timestop] [class*="constel"], :root[data-timestop] .orb, :root[data-timestop] .moon-orb{ animation-play-state:paused !important }

@media(max-width:1180px){ #ck-stick{ display:none !important } }
@media(max-width:760px){ #ck-rail{ right:10px } }

/* ============================================================
   SAUT HYPERSPATIAL (changement de destination) + fade de page
   ============================================================ */
/* très léger : un doux assombrissement (vignette) + rayons à peine visibles, on change de skin pendant, puis on revient */
#ck-jump{ position:fixed; inset:0; z-index:210; pointer-events:none; display:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(8,5,16,0) 32%, rgba(4,2,9,.5) 100%) }
#ck-jump.play{ display:block; animation:ckJumpVeil 1s ease forwards }
@keyframes ckJumpVeil{ 0%{opacity:0} 45%{opacity:1} 62%{opacity:1} 100%{opacity:0} }
.ck-jump-streaks{ position:absolute; inset:0; opacity:0; transform:scale(.4);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(206,212,255,0) 0deg, rgba(206,212,255,.16) .4deg, rgba(206,212,255,0) 2.4deg);
  -webkit-mask:radial-gradient(circle, transparent 10%, #000 66%); mask:radial-gradient(circle, transparent 10%, #000 66%) }
#ck-jump.play .ck-jump-streaks{ animation:ckJumpZoom 1s ease-out forwards }
@keyframes ckJumpZoom{ 0%{opacity:0; transform:scale(.4)} 30%{opacity:.5} 60%{opacity:.35; transform:scale(2)} 100%{opacity:0; transform:scale(2.8)} }
.ck-jump-l{ position:absolute; left:50%; bottom:88px; transform:translateX(-50%); opacity:0; white-space:nowrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:#cfe0ff }
#ck-jump.play .ck-jump-l{ animation:ckJumpL 1s ease forwards }
@keyframes ckJumpL{ 0%{opacity:0} 20%{opacity:1} 60%{opacity:1} 100%{opacity:0} }
@media(prefers-reduced-motion:reduce){ #ck-jump{ display:none !important } }

/* Fondu doux à chaque changement de page — OPACITÉ UNIQUEMENT
   (aucun transform sur le body : sinon il devient le bloc conteneur des position:fixed et casse cadran/cockpit/boot) */
@keyframes pageIn{ from{opacity:0} to{opacity:1} }
body{ animation:pageIn .5s ease both }
/* Mode basique : fondu doux en sortie de page (pas de halo, pas de transform) */
:root.page-leave body{ opacity:0; transition:opacity .3s ease }
@media(prefers-reduced-motion:reduce){ body{ animation:none } :root.page-leave body{ transition:none } }

/* ============================================================
   TABLEAU DE BORD DESTINATIONS (droite) + cadran toujours ouvert
   ============================================================ */
#ck-dash{ position:fixed; right:16px; top:78px; z-index:70; display:none; flex-direction:column; width:190px; max-height:calc(100vh - 300px); overflow:hidden;
  padding:12px; border-radius:14px; border:1px solid rgba(var(--season-rgb),.28); background:rgba(10,5,18,.74);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 18px 44px rgba(0,0,0,.45) }
:root[data-expert][data-theme="dark"] #ck-dash{ display:flex }
.ck-dash-h{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; opacity:.55; margin:2px 2px 9px }
.ck-dest{ display:grid; grid-template-columns:1fr 1fr; gap:6px; overflow-y:auto; flex:1 1 auto; min-height:0; margin:-2px -4px 0; padding:2px 4px }
.ck-d{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 4px; cursor:pointer; border-radius:10px; border:1px solid transparent; background:transparent; color:inherit; font:inherit; transition:.15s }
.ck-d:hover{ border-color:rgba(var(--season-rgb),.5); background:rgba(var(--season-rgb),.08); transform:translateY(-1px) }
.ck-d.on{ border-color:var(--magenta); background:rgba(230,0,138,.14) }
.ck-d .sk-sw{ width:34px; height:34px }
.ck-d-n{ font-size:9.5px; line-height:1.12; text-align:center; opacity:.92 }
.ck-dash-cmd{ display:flex; flex-direction:column; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(var(--season-rgb),.18); flex:none }
.ck-dash-cmd-top{ margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:12px; border-top:none; border-bottom:1px solid rgba(var(--season-rgb),.18) }
.ck-cmd-b{ display:flex; align-items:center; gap:9px; padding:11px 12px; cursor:pointer; border-radius:10px; border:1px solid rgba(var(--season-rgb),.3); background:rgba(var(--season-rgb),.06); color:inherit; font:inherit; font-size:12.5px; letter-spacing:.02em; transition:.15s; white-space:nowrap }
.ck-cmd-b svg{ width:18px; height:18px; flex:none }
.ck-cmd-b:hover{ border-color:rgba(var(--season-rgb),.7); background:rgba(var(--season-rgb),.14) }
.ck-ts.on{ border-color:#7fb6ff; color:#bcdcff; background:rgba(120,180,255,.16); box-shadow:0 0 14px rgba(120,180,255,.32) }

/* Bouton « quitter le plein écran » — visible uniquement en plein écran */
#fs-exit{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:216; display:none; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; border:1px solid rgba(var(--season-rgb),.42); background:rgba(10,5,18,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#e3ebff; font-family:var(--mono); font-size:11px; letter-spacing:.12em; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.5) }
#fs-exit svg{ width:15px; height:15px; flex:none }
#fs-exit:hover{ border-color:rgba(var(--season-rgb),.85); background:rgba(16,9,26,.92) }
:root.is-fs #fs-exit{ display:inline-flex }

/* Cadran de navigation : toujours déplié en mode expert */
:root[data-expert] .dial-nav a b{ max-width:170px; opacity:1 }

@media(max-width:1180px){ #ck-dash{ display:none !important } }

/* ============================================================
   JEU « Vol stellaire » — plein écran (pseudo-3D)
   ============================================================ */
.fly-modal{ position:fixed; inset:0; z-index:300; display:none; background:#06040e }
.fly-modal.on{ display:block }
#flyCv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none }
.fly-frame{ position:absolute; inset:0; pointer-events:none }
.fly-frame .fc{ position:absolute; width:42px; height:42px; border:2px solid rgba(230,0,138,.5) }
.fly-frame .fc.tl{ top:18px; left:18px; border-right:0; border-bottom:0 }
.fly-frame .fc.tr{ top:18px; right:18px; border-left:0; border-bottom:0 }
.fly-frame .fc.bl{ bottom:18px; left:18px; border-right:0; border-top:0 }
.fly-frame .fc.br{ bottom:18px; right:18px; border-left:0; border-top:0 }
.fly-hud{ position:absolute; left:50%; bottom:52px; transform:translateX(-50%); display:flex; gap:28px; flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.85); pointer-events:none }
.fly-hud span{ opacity:.5; font-size:10px } .fly-hud b{ color:#fff; font-variant-numeric:tabular-nums }
.fly-x{ position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:6 }
.fly-x:hover{ border-color:var(--magenta); color:#fff }
.fly-hint{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.45); pointer-events:none; white-space:nowrap; max-width:96vw; overflow:hidden; text-overflow:ellipsis }
.fly-overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(6,4,14,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:5 }
.fly-overlay.on{ display:flex }
.fly-panel{ text-align:center; max-width:400px; padding:26px 24px }
.fly-rk{ font-size:44px; line-height:1 }
.fly-panel h3{ font-size:25px; margin:8px 0 6px }
.fly-panel p{ color:var(--text-soft); font-size:14px; line-height:1.5; margin-bottom:18px }
.fly-form{ display:flex; flex-direction:column; gap:9px; margin-top:6px; text-align:left }
.fly-form input{ width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border-strong); background:rgba(255,255,255,.05); color:var(--text); font:inherit; font-size:14px }
.fly-form input:focus{ outline:none; border-color:var(--magenta) }
.fly-form .btn{ justify-content:center; margin-top:2px }
.fly-priv{ font-size:10px; opacity:.5; line-height:1.45; margin-top:2px }
.fly-lb{ margin-top:16px; text-align:left }
.fly-lb-t{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; opacity:.55; margin-bottom:7px }
.fly-lb-r{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; border-bottom:1px solid var(--border) }
.fly-lb-r b{ color:var(--accent) }
.fly-replay{ margin-top:16px; background:none; border:1px solid var(--border-strong); color:var(--text); border-radius:999px; padding:9px 20px; cursor:pointer; font:inherit; font-size:13px }
.fly-replay:hover{ border-color:var(--magenta) }
.fly-thx{ font-size:15px; margin-top:8px }
@media(max-width:600px){ .fly-hint{ font-size:9.5px } .fly-hud{ gap:16px; font-size:11px } }

/* ============================================================
   RESPONSIVE COCKPIT + en-tête
   ============================================================ */
/* Mobile : le CTA quitte la barre (il reste dans le tiroir) → le hamburger tient */
@media(max-width:760px){ .cta-head{ display:none } }

/* En mode expert, le bouton Jour/Nuit est masqué (le cockpit vit en nuit) */
:root[data-expert] #themeBtn{ display:none }

/* Desktop : bouton expert oblong quand activé (on a la place, plus de jour/nuit) */
.expert-btn .exp-lbl{ display:none }
@media(min-width:1181px){
  .expert-btn.on{ width:auto; border-radius:999px; padding:0 16px 0 11px; gap:8px; display:inline-flex; align-items:center }
  .expert-btn.on .exp-lbl{ display:inline; font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.02em; white-space:nowrap }
}
/* Tablettes / iPad : pas de cockpit fixe (<1180) → on rend les commandes accessibles
   via le hamburger dès qu'on est en mode expert (corrige la zone morte 981–1180) */
@media(max-width:1180px){
  :root[data-expert] .menu{ display:none }
  :root[data-expert] .burger{ display:inline-flex }
  :root[data-expert] .dial-nav{ display:none !important }
}

/* Sur petits écrans, on n'affiche pas le cadre cockpit fixe (cockpit allégé) */
@media(max-width:1180px){ #cockpit{ display:none !important } }

/* Commandes du cockpit repliées dans le tiroir mobile */
.drawer-cockpit{ display:none }
:root[data-expert] .drawer-cockpit{ display:block; margin-top:16px; border-top:1px solid var(--border); padding-top:18px }
.dc-h{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; opacity:.55; margin-bottom:12px }
.drawer-dest{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.drawer-cockpit .ck-d{ background:rgba(255,255,255,.03) }
.drawer-cmd{ display:flex; gap:8px; flex-wrap:wrap }
.drawer-cmd .ck-cmd-b{ flex:1; justify-content:center; min-width:130px }
.dc-quit{ display:block; width:100%; margin-top:14px; padding:13px; border-radius:10px; border:1px solid rgba(255,90,90,.4); background:rgba(255,90,90,.08); color:#ff9a9a; font:inherit; font-size:14px; cursor:pointer }
.dc-quit:hover{ border-color:#ff9a9a; background:rgba(255,90,90,.14) }

/* ============================================================
   EXPÉRIENCE AVANCÉE — styles des add-ons
   ============================================================ */
/* Toast retour visiteur */
.yhb-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px); z-index:140; opacity:0; pointer-events:none; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  background:rgba(8,4,14,.85); color:#fff; border:1px solid rgba(230,0,138,.4); border-radius:999px; padding:11px 20px; font-size:13.5px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 14px 36px rgba(0,0,0,.4); transition:opacity .4s var(--ease), transform .4s var(--ease) }
.yhb-toast.on{ opacity:1; transform:translate(-50%,0) }
@media(max-width:760px){ .yhb-toast{ display:none !important } }
.yhb-toast b{ color:var(--accent) }
:root[data-theme="light"] .yhb-toast{ background:rgba(255,255,255,.94); color:var(--text) }

/* Transition « en vol » entre pages */
.warp-nav{ position:fixed; inset:0; z-index:215; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle at 50% 50%, rgba(8,5,16,0) 30%, rgba(4,2,9,.55) 100%) }
.warp-nav.on{ opacity:1 }
.wn-streaks{ position:absolute; inset:0; opacity:0; transform:scale(.4);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(206,212,255,0) 0deg, rgba(206,212,255,.22) .4deg, rgba(206,212,255,0) 2.4deg);
  -webkit-mask:radial-gradient(circle, transparent 8%, #000 64%); mask:radial-gradient(circle, transparent 8%, #000 64%) }
.warp-nav.on .wn-streaks{ animation:wnZoom .6s ease-out forwards }
@keyframes wnZoom{ 0%{opacity:0; transform:scale(.4)} 60%{opacity:.6; transform:scale(1.8)} 100%{opacity:0; transform:scale(2.6)} }

/* Curseur fusée (expert) — sur les éléments cliquables */
.spiral-cursor{ position:fixed; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; z-index:300; pointer-events:none; opacity:0; transition:opacity .18s; color:#ffd7ee }
.rocket-cursor svg{ width:26px; height:26px; filter:drop-shadow(0 0 6px rgba(230,0,138,.6)) }
.spiral-cursor.on{ opacity:1 }
@media(pointer:fine){ :root[data-expert] a, :root[data-expert] button, :root[data-expert] [role="button"], :root[data-expert] summary, :root[data-expert] label.qopt, :root[data-expert] .ck-d{ cursor:none } }
@media(pointer:coarse){ .spiral-cursor{ display:none !important } }

/* Trou noir → indice + transmission secrète */
.secret-hint{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%) scale(.6); z-index:120; opacity:0; pointer-events:none;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(176,97,255,.6); background:rgba(8,4,14,.5); color:#cdb6ff; font-size:20px; cursor:pointer; transition:opacity .3s, transform .3s; backdrop-filter:blur(6px) }
.secret-hint.show{ opacity:1; transform:translateX(-50%) scale(1); pointer-events:auto; animation:secretPulse 2.4s ease-in-out infinite }
@keyframes secretPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(176,97,255,.45) } 50%{ box-shadow:0 0 0 12px rgba(176,97,255,0) } }
.secret-hint:hover{ color:#fff; border-color:#cdb6ff }
.secret-modal{ position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(4,2,10,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.secret-modal.on{ display:flex }
.secret-card{ position:relative; max-width:540px; padding:40px 36px; border-radius:18px; border:1px solid rgba(176,97,255,.4); background:linear-gradient(165deg, rgba(20,8,40,.96), rgba(8,4,16,.98)); box-shadow:0 30px 80px rgba(0,0,0,.6) }
.secret-x{ position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-size:20px; cursor:pointer }
.secret-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:#cdb6ff; text-transform:uppercase; margin-bottom:14px }
.secret-card h3{ font-size:28px; line-height:1.16; margin-bottom:16px }
.secret-card p{ color:var(--text-soft); font-size:16px; line-height:1.6 }
.secret-sign{ margin-top:18px !important; font-family:var(--mono); font-size:13px; color:var(--accent) !important }

/* Fog of war (cadran) */
:root[data-expert] .dial-nav a:not(.explored){ opacity:.34 }
:root[data-expert] .dial-nav a.explored{ opacity:1 }

/* Inspection (arrêt du temps) — repères de secteur */
.inspect-tag{ display:none; position:absolute; top:10px; right:14px; z-index:5; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#bcdcff; background:rgba(8,12,24,.6); border:1px solid rgba(120,180,255,.4); border-radius:6px; padding:3px 8px }
body.ck-inspect .inspect-tag{ display:inline-block }

/* Atterrissage page contact */
#reserver.landing{ animation:landSeq 1s ease both }
@keyframes landSeq{ 0%{ transform:translateY(26px) scale(.99); opacity:.35; filter:blur(2px) } 100%{ transform:none; opacity:1; filter:none } }
@media(prefers-reduced-motion:reduce){ #reserver.landing{ animation:none } }

/* Carte d'embarquement (récompense du mini-jeu) */
.gm-pass{ margin-top:6px; border:1px dashed rgba(230,0,138,.5); border-radius:12px; padding:14px 16px; background:rgba(230,0,138,.06); text-align:left }
.gm-pass-h{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px }
.gm-pass-b{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; border-bottom:1px solid var(--border) }
.gm-pass-b span{ font-size:11px; opacity:.6; font-family:var(--mono); letter-spacing:.1em }
.gm-pass-b b{ font-size:14px }
.gm-pass-n{ font-size:11px; color:var(--text-soft); margin-top:10px; line-height:1.5 }