/*
Theme Name: YHB Native
Theme URI: https://yanhaltey.com/
Author: Yan Haltey Brands / Réalisons
Description: Thème WordPress natif pour Yan Haltey Brands, porté depuis le prototype HTML YHB.
Version: 0.2.35
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: yhb-native
*/

/* ============================================================
   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:left}
.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 .submenu::before{content:""; position:absolute; top:-8px; left:0; right:0; height:8px} /* #117 pont anti-zone-morte */
.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)} 40%{transform:scaleX(1)} 60%{transform:scaleX(0)} 100%{transform:scaleX(0)}}
/* Le voyage (joué UNE fois à l'entrée à l'écran) : la fusée VERTICALE roule sur le chariot de 1 à 3, puis DÉCOLLE en arc vers 4.
   Deux couches : .trkt porte le roulement horizontal (repère normal), .trkt-fly porte le décollage (offset-path) — sinon le translate se ferait dans le repère pivoté et sortirait la fusée du cadre. */
.trkt{ transform:translateX(-360px) }
.trkt-fly{ offset-path:path("M480 250 C 480 165 498 138 535 122 C 645 95 770 96 820 55");
  offset-rotate:auto; offset-distance:0% }
.trkt-body{fill:var(--contrast-text)} .trkt-win,.trkt-fin{fill:var(--accent)}
.cart-deck{ fill:var(--accent) } .cart-wheel{ fill:var(--contrast-text) }
.tcart{ transform:translateX(-360px) }
@keyframes trajRoll{
  0%   { transform:translateX(-360px) }   /* étape 1, fusée verticale sur le chariot */
  40%  { transform:translateX(0px) }      /* arrivée à l'étape 3 */
  100% { transform:translateX(0px) }
}
@keyframes trajFly{
  0%,50% { offset-distance:0% }           /* reste sur le chariot jusqu'à l'étape 3 */
  100%   { offset-distance:100% }          /* décollage en arc jusqu'à l'étape 4 */
}
.trajectory.play .trkt{ animation:trajRoll 5.2s cubic-bezier(.5,0,.3,1) forwards }
.trajectory.play .trkt-fly{ animation:trajFly 5.2s cubic-bezier(.5,0,.3,1) forwards }
.trajectory.play .tcart{ animation:trajRoll 5.2s cubic-bezier(.5,0,.3,1) forwards }
@media(prefers-reduced-motion:reduce){
  .trkt{ transform:translateX(0) } .trkt-fly{ offset-distance:100% } .tcart{ transform:translateX(0) }
  .trajectory.play .trkt, .trajectory.play .trkt-fly, .trajectory.play .tcart{ animation: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:linear-gradient(112deg,#7A2CA6 0%,#A02597 50%,#E6008A 100%); background-size:200% 200%; background-position:68% 50%; color:#fff; border-color:transparent; box-shadow:0 8px 24px -12px rgba(230,0,138,.7)}
.btn-solid:hover{background-position:12% 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:none; margin-left:auto; margin-right:auto}
.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:left; 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:left}
.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 60px}
.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:14.5px; font-weight:400; max-width:34ch; line-height:1.6; color:var(--contrast-soft)}
.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; align-items:center; flex-wrap:wrap; gap:12px 24px; font-size:12.5px; color:var(--contrast-soft)}
.foot-legal{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center}
.foot-legal a{color:var(--contrast-soft); text-decoration:none}
.foot-legal a:hover{color:var(--accent)}

/* 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}

/* (Ancien système solaire du Noyau retiré : remplacé par la grille de rôles.
   On conserve uniquement l'opacité de l'icône lune du bouton de thème.) */
.toggle .moon{ opacity:.55 }

/* 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,.45)}
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; border-top:1px solid rgba(244,241,234,.08)}
/* mode jour : le footer doit se détacher du CTA final (même crème sinon → ça se confond) */
:root[data-theme="light"] footer{background:#E7DFD0; border-top:1px solid rgba(11,11,14,.12)}
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)}
section.legal-hero + section{padding-bottom:clamp(64px,9vh,120px)}
.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:15.5px; font-weight:500; 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 (le jeu vit désormais dans le footer via .foot-game) */
.toggle.season-btn, .toggle.game-btn{ 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 }

/* ============================================================
   ÉCOSYSTÈME — logos des marques (Univers · remplace la constellation)
   Panneau volontairement sombre, quel que soit le thème (logos blancs lisibles)
   ============================================================ */
.eco{ position:relative }
.eco .section-head{ margin-left:auto; margin-right:auto; text-align:center }
.eco-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:center; margin:8px 0 18px }
/* Tuiles logo : fond crème constant (logos couleur ou encre foncée toujours lisibles, sans mélange par thème) */
.eco-tile{ display:flex; align-items:center; justify-content:center; background:#F4F1EA; border:1px solid rgba(11,11,14,.10);
  border-radius:14px; transition:.25s var(--ease) }
.eco-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(11,11,14,.5); border-color:rgba(11,11,14,.18) }
.eco-base{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:6px }
.eco-card{ flex-direction:column; gap:22px; height:184px; padding:26px; text-decoration:none }
.eco-card img{ height:52px; width:auto; max-width:84% }
.eco-card .eco-role{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6B6862 }
/* Autres marques : rangées décalées, centrées, plus petites (effet constellation), dans un panneau distinct */
.eco-more{ display:flex; flex-direction:column; gap:14px; padding:34px 20px; border-radius:22px;
  background:rgba(146,142,134,.07); border:1px solid var(--border) }
:root[data-theme="light"] .eco-more{ background:rgba(11,11,14,.035) }
.eco-row{ display:flex; justify-content:center; gap:14px }
.eco-row .eco-mcard{ flex:0 0 168px; height:92px; padding:16px }
.eco-mcard img{ height:30px; width:auto; max-width:84% }
.eco-mcard.eco-ph .ph-n{ font-size:13px }
@media(prefers-reduced-motion:no-preference){
  .eco-row .eco-mcard{ animation:ecoFloat 6.5s ease-in-out infinite }
  .eco-row:nth-child(odd) .eco-mcard{ animation-duration:7.4s }
  .eco-row .eco-mcard:nth-child(2){ animation-delay:-1.6s }
  .eco-row .eco-mcard:nth-child(3){ animation-delay:-3.3s }
  .eco-row .eco-mcard:hover{ animation-play-state:paused }
  @keyframes ecoFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
}

/* Gros bouton CTA principal */
.btn.btn-lg{ padding:16px 36px; font-size:16px }
.eco-names{ margin-top:26px; color:var(--muted); font-size:14px; line-height:1.95; text-align:center }
.eco-names b{ color:var(--text-soft); font-weight:500 }
@media(max-width:980px){ .eco-base{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:640px){ .eco-base{ grid-template-columns:repeat(2,1fr) } .eco-row{ flex-wrap:wrap } .eco-row .eco-mcard{ flex-basis:140px; height:94px } }

/* ============================================================
   SÉPARATEUR STELLAIRE — courbe légère « étoile filante » entre sections
   ============================================================ */
.starsep{ margin:0 auto; max-width:1180px; padding:10px 28px; }
.starsep svg{ width:100%; height:46px; display:block; overflow:visible; opacity:.75 }
.starsep .trail{ fill:none; stroke-width:1.3; stroke-linecap:round }
.starsep .star{ fill:var(--accent) }
.starsep .glow{ fill:none; stroke:var(--accent); stroke-width:1.3; opacity:.9 }
@media(prefers-reduced-motion:no-preference){
  .starsep .star{ animation:starTw 3.2s var(--ease) infinite }
  @keyframes starTw{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
}

/* ============================================================
   FORMULES v1.1 — grille de packs (Self-Made mis en avant)
   ============================================================ */
.offers.quad{ grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px }
.offers.quad .offer{ padding:26px 24px; position:relative }
.offers.quad .offer .name{ font-size:22px }
.offer .badge{ position:absolute; top:-11px; left:24px; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--grad); padding:5px 12px; border-radius:100px; box-shadow:0 6px 18px -8px rgba(230,0,138,.7) }
.offer .incl{ list-style:none; margin:4px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1 }
.offer .incl li{ font-size:13.5px; color:var(--text-soft); font-weight:300; line-height:1.5; padding-left:20px; position:relative }
.contrast .offer .incl li{ color:var(--contrast-soft) }
.offer .incl li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%;
  background:color-mix(in srgb,var(--accent) 65%,transparent) }
.offer .incl li.plus{ color:var(--text); font-weight:500 }
.offer .incl li.plus::before{ background:var(--accent) }
.offer .btn{ width:100% }
@media(max-width:980px){ .offers.quad{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .offers.quad{ grid-template-columns:1fr } }

/* Self-Made — entrée « autonome », sortie de la grille des packs */
.selfmade{ display:grid; grid-template-columns:.82fr 1.18fr; gap:34px; align-items:center; margin-top:14px; padding:32px 38px;
  border:1px solid var(--violet); border-radius:20px; background:var(--surface) }
:root[data-theme="dark"] .selfmade{ background:color-mix(in srgb,var(--violet) 12%,transparent) }
.selfmade .sm-l .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.selfmade .sm-l .name{ font-size:clamp(26px,3vw,36px); font-weight:700; margin:8px 0 4px }
.selfmade .sm-l .price{ font-family:var(--mono); font-size:15px; color:var(--accent) }
.selfmade .sm-r .desc{ font-size:15px; color:var(--text-soft); font-weight:300; line-height:1.6; margin:0 0 16px }
.contrast .selfmade .sm-r .desc{ color:var(--contrast-soft) }
.selfmade .sm-incl{ list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px }
.selfmade .sm-incl li{ font-size:13.5px; color:var(--text-soft); font-weight:300; padding-left:20px; position:relative }
.selfmade .sm-incl li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; background:var(--violet) }
.smh{ display:flex; align-items:center; gap:14px; margin:44px 0 4px }
.smh .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap }
.smh .line{ flex:1; height:1px; background:var(--border) }
@media(max-width:760px){ .selfmade{ grid-template-columns:1fr; gap:18px; padding:26px 24px } .selfmade .sm-incl{ grid-template-columns:1fr } }

/* Bandes pleine largeur (Self-Made + sur-mesure sous la grille de packs) */
.offer-mini.band-wide{ max-width:none }

/* ============================================================
   v1.4 — Centrage global + séparation des sections + séparateurs variés
   ============================================================ */
/* Centrage de tous les héros et têtes de section (toutes pages) */
.hero .wrap{ text-align:center }
.hero .cta-row{ justify-content:center }
/* Bouton discret « Voir en vidéo » dans le hero (ouvre le lightbox) */
.hero-video{ display:inline-flex; align-items:center; gap:9px; margin:18px auto 0; padding:7px 4px; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .22s var(--ease) }
.hero-video .hv-play{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  color:var(--accent); transition:border-color .22s var(--ease), background .22s var(--ease) }
.hero-video .hv-play svg{ width:12px; height:12px; fill:currentColor; margin-left:1px }
.hero-video:hover, .hero-video:focus-visible{ color:var(--text); outline:none }
.hero-video:hover .hv-play, .hero-video:focus-visible .hv-play{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent) }
.section-head{ text-align:center; margin-left:auto; margin-right:auto }
/* Paragraphes : bloc (div) centré. Hero = texte centré (cohérence avec le titre centré) ; têtes de section = texte à gauche (lecture des intros plus longues). */
.hero .lede{ margin-left:auto; margin-right:auto; max-width:64ch; text-align:center }
.section-head .lede{ margin-left:auto; margin-right:auto; max-width:64ch; text-align:center }
/* Exception : garder à gauche le seul sous-titre vraiment long (paragraphe communauté) */
#cercle .section-head .lede{ text-align:left }

/* Badge « Recommandé » : le parent doit être positionné */
.offers .offer{ position:relative }

/* Séparation claire des bandes alternées — bordures fines visibles dans les deux thèmes */
.soft, .contrast{ border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
:root[data-theme="light"] .soft{ background:rgba(237,231,219,.55) } /* #115 translucide */
:root[data-theme="light"] .contrast{ background:rgba(228,221,206,.6) } /* #115 translucide */
:root[data-theme="light"] .soft, :root[data-theme="light"] .contrast{ border-color:rgba(11,11,14,.14) }

/* Séparateur stellaire — une seule météorite par transition, avec de la marge */
.starsep{ padding:30px 28px }
.starsep.flip svg{ transform:scaleX(-1) }
.starsep.tight svg{ height:34px }
.starsep.wide svg{ height:58px }

/* Tuile logo « à venir » — placeholder texte (marque sans logo encore) */
.eco-mcard.eco-ph{ flex-direction:column; gap:5px; text-align:center }
.eco-ph .ph-n{ font-family:var(--display); font-weight:600; font-size:15px; color:#2A2A2E; line-height:1.1 }
.eco-ph .ph-s{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#9a958c }

/* ============================================================
   v1.8 — hero pleine hauteur, cartes flip (survol), KPI x4
   ============================================================ */
/* Héros pleine hauteur de viewport (pages marketing). Pages légales : .hero.compact */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center }
.hero.compact{ min-height:auto; display:block }

/* KPI : rangée de 4 */
.kpis.k4{ grid-template-columns:repeat(4,1fr) }
.kpis.k2{ grid-template-columns:repeat(2,1fr); max-width:600px; margin-left:auto; margin-right:auto }
@media(max-width:760px){ .kpis.k4{ grid-template-columns:repeat(2,1fr); gap:30px 22px } }

/* Carte « agrandissement » au survol (front = titre/logo → back = détail), effet ressort */
.flip{ position:relative; background:transparent!important; border:0!important; padding:0!important;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) }
.flip:hover, .flip:focus-within{ transform:scale(1.12); z-index:20 }
.flip .flip-in{ position:relative; width:100%; height:100% }
.flip .flip-front, .flip .flip-back{ position:absolute; inset:0; transition:opacity .3s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border-radius:var(--r); padding:24px }
.flip .flip-back{ opacity:0 }
.flip:hover .flip-front, .flip:focus-within .flip-front{ opacity:0 }
.flip:hover .flip-back, .flip:focus-within .flip-back{ opacity:1 }
.flip:hover .flip-front, .flip:hover .flip-back, .flip:focus-within .flip-front, .flip:focus-within .flip-back{ box-shadow:0 22px 50px -24px rgba(11,11,14,.6) }

/* Savoir-faire (Singularité) : bandes qui se retournent */
.bands .band.flip{ min-height:150px }
.band.flip .flip-front, .band.flip .flip-back{ border:1px solid var(--border); background:var(--surface) }
.contrast .band.flip .flip-front, .contrast .band.flip .flip-back{ background:var(--contrast-surface); border-color:var(--contrast-border) }
.band.flip:hover .flip-front{ border-color:var(--accent) }
.band.flip .flip-front{ align-items:flex-start; justify-content:flex-start }
.band.flip .flip-front h3{ font-size:18px; margin-top:6px }
.band.flip .flip-back{ align-items:flex-start; justify-content:center }
.band.flip .flip-back p{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; line-height:1.7; text-align:left }

/* Univers — cartes base qui se retournent (logo plus grand → rôle) */
.eco-card.flip{ background:transparent!important; display:block; height:184px }
.eco-card.flip .flip-front, .eco-card.flip .flip-back{ background:#F4F1EA; border:1px solid rgba(11,11,14,.10) }
.eco-card.flip .flip-front img{ height:66px; width:auto; max-width:86% }
.eco-card.flip .flip-back .eco-role{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#2A2A2E }
.eco-card.flip .flip-back .eco-sub{ font-family:var(--display); font-weight:600; font-size:15px; color:#0B0B0E }

/* Flip savoir-faire : masquer l'indice « + » (le survol suffit) */
.band.flip::after{ display:none!important }

/* ============================================================
   v2.0 — savoir-faire : grande carte détail au survol (overlay)
   ============================================================ */
.band{ cursor:pointer }
.bands-wrap{ position:relative }
/* Overlay transparent + non bloquant : la grande carte flotte, on peut survoler n'importe quelle carte dessous */
.cap-stage{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:10px;
  opacity:0; pointer-events:none; transform:scale(.97); transform-origin:center;
  transition:opacity .24s ease, transform .4s cubic-bezier(.34,1.56,.64,1) }
.cap-stage.on{ opacity:1; transform:scale(1) }
.cap-card{ width:100%; max-width:780px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:38px 42px; box-shadow:0 30px 70px -30px rgba(11,11,14,.6) }
.cap-card .cap-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:12px }
.cap-card .cap-head .num{ color:var(--accent); font-family:var(--mono); letter-spacing:.06em }
.cap-card .cap-head h3{ font-size:clamp(22px,2.6vw,30px) }
.cap-card .cap-lead{ color:var(--text-soft); font-size:17px; line-height:1.5; margin-bottom:20px }
.cap-card ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 26px }
.cap-card ul li{ position:relative; padding-left:22px; color:var(--text-soft); font-size:14.5px; line-height:1.5 }
.cap-card ul li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--accent) }
@media(max-width:600px){ .cap-card ul{ grid-template-columns:1fr } }

/* ============================================================
   v2.1 — Mode jour un peu plus vivant (nébuleuse douce + étoiles discrètes)
   ============================================================ */
:root[data-theme="light"]{ --stars-opacity:.4 }
:root[data-theme="light"] body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 42% at 12% 8%, rgba(91,26,140,.11), transparent 66%),
    radial-gradient(46% 40% at 88% 92%, rgba(230,0,138,.09), transparent 70%),
    radial-gradient(40% 34% at 84% 2%, rgba(255,150,40,.07), transparent 72%); }

/* ============================================================
   v2.2 — nettoyage : dial-nav retiré, flou au survol, autres marques compactes/grises
   ============================================================ */
/* Indicateur « SECT … » à droite : retiré */
.dial-nav{ display:none !important }

/* Savoir-faire : flou de l'arrière-plan quand la grande carte s'ouvre */
.cap-stage.on{ background:color-mix(in srgb, var(--bg) 12%, transparent); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px) }

/* Section « Le mot du fondateur » : fond plus foncé, distinct du hero */
.founder{ background:#0B0A0F; border-top:1px solid rgba(244,241,234,.08); border-bottom:1px solid rgba(244,241,234,.08) }
.founder .eyebrow{ color:var(--accent) }

/* Autres marques : grille symétrique compacte + logos en gris (couleur au survol) */
.eco-more{ display:grid !important; grid-template-columns:repeat(5,1fr); gap:14px; padding:30px 24px }
.eco-row{ display:contents }
.eco-mcard{ height:88px; padding:14px }
.eco-mcard img{ filter:grayscale(1); opacity:.62; transition:filter .25s var(--ease), opacity .25s var(--ease) }
.eco-mcard:hover img{ filter:grayscale(0); opacity:1 }
.eco-mcard.eco-ph .ph-n{ color:#6b6862 }
@media(max-width:900px){ .eco-more{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:520px){ .eco-more{ grid-template-columns:repeat(2,1fr) } }
.founder{ padding-top:66px; padding-bottom:66px }
/* Pages légales : héros compact (contenu immédiat, pas de pleine hauteur) */
.hero.legal-hero{ min-height:auto; display:block; padding-bottom:clamp(30px,4.5vh,58px) }

/* Odyssée — bande premium mise en avant (sur-mesure grands comptes) */
.odyssee-band{ display:grid; grid-template-columns:.66fr 1.34fr; gap:34px; align-items:center; margin-top:30px; padding:42px 46px;
  border-radius:22px; border:1px solid var(--violet);
  background:linear-gradient(118deg, color-mix(in srgb,var(--violet) 16%,transparent), color-mix(in srgb,var(--accent) 9%,transparent)) }
.odyssee-band .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.odyssee-band .ob-name{ font-size:clamp(34px,4.4vw,56px); font-weight:700; letter-spacing:-.02em; margin-top:6px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.odyssee-band .ob-lead{ font-size:17.5px; color:var(--text); line-height:1.55; margin:0 0 22px; font-weight:300 }
.odyssee-band .ob-lead b{ font-weight:600 }
@media(max-width:760px){ .odyssee-band{ grid-template-columns:1fr; gap:16px; padding:32px 26px } }

/* Boîte de texte « prose » (ex : Notre histoire — Noyau) : titre au-dessus, texte dans un box centré */
.prose-box{ max-width:760px; margin:30px auto 0; padding:30px 38px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r) }
.prose-box p{ color:var(--text-soft); font-size:16.5px; line-height:1.7; text-align:left; margin:0 }

/* v2.4 — grande carte savoir-faire OPAQUE (lisible), tout l'arrière-plan flouté */
:root[data-theme="dark"] .cap-card{ background:#1b1a21 }
:root[data-theme="light"] .cap-card{ background:#FBF9F4 }
.cap-card{ box-shadow:0 40px 90px -30px rgba(0,0,0,.75) }
.cap-stage.on{ background:color-mix(in srgb, var(--bg) 34%, transparent); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px) }
/* CTA de section (Voir les constellations, etc.) : centré */
.bands-wrap ~ .cta-row, section > .wrap > .cta-row:not(.center){ justify-content:center }

/* ===== v2.6 · Reveal « blur-up » au scroll (natif, sobre) — Origine ===== */
/* Les blocs apparaissent en fondu + léger flou qui se dissipe + montée, en cascade.
   100 % CSS natif (scroll-driven). Repli : navigateurs sans support ou mouvement réduit → tout visible. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal-sec > .wrap > *:not(.grid):not(.kpis),
    .reveal-sec .grid > *,
    .reveal-sec .kpis > *{
      animation: revUp linear both; animation-timeline: view(); animation-range: entry 4% entry 48%;
    }
    .reveal-sec .grid > *:nth-child(2), .reveal-sec .kpis > *:nth-child(2){ animation-range: entry 11% entry 55% }
    .reveal-sec .grid > *:nth-child(3), .reveal-sec .kpis > *:nth-child(3){ animation-range: entry 18% entry 62% }
    .reveal-sec .grid > *:nth-child(4), .reveal-sec .kpis > *:nth-child(4){ animation-range: entry 25% entry 69% }
    @keyframes revUp{ from{ opacity:0; filter:blur(9px); transform:translateY(20px) } to{ opacity:1; filter:blur(0); transform:none } }
  }
}

/* ===== v2.6 · Bande « preuve sociale » + marquee de logos — Univers ===== */
/* Bande premium sombre (identique en clair/sombre) ; logos en blanc, ruban défilant en boucle. */
.yhb-univers{ --line:rgba(244,241,234,.14); --chalk:#F4F1EA; --soft:#d8d5ce; --mut:#918d85; --mag:#E6008A; --teal:#E6008A; --fm:var(--mono);
  color:var(--chalk); background:radial-gradient(130% 100% at 80% -10%, #1a1226 0%, #0c0b12 45%, #070709 100%);
  border-top:1px solid rgba(122,44,166,.28); border-bottom:1px solid rgba(122,44,166,.28) }
.yhb-univers .wrap{ position:relative }
.yhb-univers .eye{ font-family:var(--fm); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal) }
.yhb-univers h2{ font-weight:300; font-size:clamp(32px,4.6vw,50px); letter-spacing:-.02em; line-height:1.05; margin:10px 0 12px; max-width:20ch; color:#fff }
.yhb-univers h2 b{ font-weight:700 }
.yhb-univers h2 .dot{ color:var(--mag) }
.yhb-univers .lead{ color:var(--soft); font-size:16.5px; line-height:1.55; max-width:64ch }
.yhb-univers .lead b{ color:#fff }
.yhb-univers .stats{ display:flex; gap:40px; flex-wrap:wrap; margin:26px 0 4px }
.yhb-univers .stat .n{ font-weight:300; font-size:44px; letter-spacing:-.02em; line-height:1 }
.yhb-univers .stat .n b{ font-weight:700; color:var(--mag) }
.yhb-univers .stat .l{ font-family:var(--fm); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:4px }
/* MARQUEE */
.yhb-univers .marquee{ margin-top:30px; border-top:1px solid var(--line); padding-top:26px; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.yhb-univers .mq-track{ display:flex; width:max-content; animation: mqScroll 66s linear infinite }
@media (hover:hover){ .yhb-univers .marquee:hover .mq-track{ animation-play-state:paused } }
.yhb-univers .logo{ flex:0 0 auto; height:64px; width:152px; margin-right:14px; display:flex; align-items:center; justify-content:center; padding:12px 14px;
  border-radius:10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06) }
.yhb-univers .logo img{ max-height:100%; max-width:100%; object-fit:contain; opacity:.68; filter:brightness(0) invert(1); transition:opacity .2s var(--ease) }
.yhb-univers .logo:hover img{ opacity:1 }
img.no-mono{ filter:none !important; opacity:1 !important } /* #124 écusson R69 (PNG) : jamais de filtre monochrome */
.drawer-lang{ margin-top:26px; padding-top:20px; border-top:1px solid var(--border); display:flex; align-items:center; gap:14px } .drawer-lang .dl-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft) } .drawer-lang .dl-links{ display:flex; gap:12px; align-items:center } .drawer-lang .dl-links a{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--text-soft); text-decoration:none } .drawer-lang .dl-links a:hover{ color:var(--accent) } .drawer-lang .dl-cur{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--accent); font-weight:600 } /* #129 sélecteur langue drawer mobile */
.simple-form .fluentform{ display:block !important; width:100% } .simple-form .frm-fluent-form{ width:100% !important } .simple-form .frm-fluent-form .ff-el-form-control,.simple-form .frm-fluent-form .ff-el-group,.simple-form .frm-fluent-form .ff-el-input--content{ width:100% } /* #122 largeur formulaire Premier échange */
.news .fluentform{ width:100% !important; flex:1 1 100% !important } .news .frm-fluent-form{ width:100% !important } @media (max-width:560px){ .news .frm-fluent-form .ff-t-row{ display:block !important } .news .frm-fluent-form .ff-t-container .ff-t-cell.ff-t-column-1, .news .frm-fluent-form .ff-t-container .ff-t-cell.ff-t-column-2{ display:block !important; width:100% !important; max-width:100% !important; flex:none !important } .news .frm-fluent-form .ff-btn-submit{ width:100% !important } } /* #125 newsletter form full-width + bouton mobile */
@keyframes mqScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.yhb-univers .foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:28px }
.yhb-univers .foot .note{ color:var(--mut); font-size:14.5px; line-height:1.5; max-width:56ch }
.yhb-univers .foot .note b{ color:var(--chalk) }
.yhb-univers .foot .ucta{ display:inline-block; font-weight:700; font-size:15px; color:#0b0b0e; background:var(--chalk);
  padding:14px 26px; border-radius:10px; text-decoration:none; transition:.16s var(--ease) }
.yhb-univers .foot .ucta:hover{ transform:translateY(-2px) }
@media (prefers-reduced-motion: reduce){
  .yhb-univers .mq-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center }
  .yhb-univers .logo[aria-hidden="true"]{ display:none } /* pas de doublon quand ça ne défile pas */
}
@media(max-width:760px){ .yhb-univers .stats{ gap:26px } .yhb-univers .stat .n{ font-size:36px } }

/* ===== v2.7 · Témoignages « Ils l'ont vécu » (module réutilisable, thème-aware) ===== */
.temoins{ text-align:center }
.temoins .eye{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.temoins > h2{ margin-top:8px }
.temoins .tgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px; text-align:left; align-items:stretch }
.temoins .tcard{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 30px; position:relative; display:flex; flex-direction:column }
:root[data-theme="dark"] .temoins .tcard{ background:rgba(255,255,255,.03) }
.temoins .tcard::before{ content:"\201C"; position:absolute; top:6px; left:18px; font-size:56px; line-height:1; color:var(--accent); opacity:.35; font-family:Georgia,serif }
.temoins .tcard blockquote{ font-weight:400; font-size:16px; line-height:1.6; color:var(--text-soft); margin:6px 0 0; padding-left:4px }
.temoins .tcard blockquote b{ font-weight:700; color:var(--accent) }
.temoins .tcard cite{ display:block; margin-top:16px; font-family:var(--mono); font-style:normal; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
@media(max-width:760px){ .temoins .tgrid{ grid-template-columns:1fr } }

/* ===== v2.8 · Bandeau « Univers » COMPACT (glance de confiance — Origine) ===== */
/* Version allégée de la bande : pas de gros titre ni de stats (évite le doublon avec « En chiffres »). */
.yhb-univers.compact{ padding-top:clamp(46px,6vh,62px); padding-bottom:clamp(48px,6vh,64px) }
.yhb-univers.compact .ts-head{ text-align:center; display:flex; flex-direction:column; align-items:center }
.yhb-univers.compact .ts-head .eye{ color:var(--teal) }
.yhb-univers.compact .ts-line{ font-weight:300; font-size:clamp(20px,2.6vw,28px); line-height:1.3; letter-spacing:-.01em; color:#fff; max-width:44ch; margin:8px auto 0 }
.yhb-univers.compact .ts-line b{ font-weight:700 }
.yhb-univers.compact .marquee{ margin-top:26px }
.yhb-univers.compact .foot{ justify-content:center; text-align:center; gap:8px 26px; margin-top:22px }
.yhb-univers.compact .foot .note{ max-width:none }

/* ===== v3.0 · Composants « offres » (centralisés, partagés par toutes les pages offre) ===== */
.yhb-formules{ --line:var(--border); --surf:var(--surface); --chalk:var(--text); --soft:var(--text-soft);
  --mut:var(--muted); --mag:var(--accent); --vio:var(--violet); --teal:var(--accent); --fm:var(--mono) }
.yhb-formules *{ box-sizing:border-box }
.yhb-formules .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; align-items:stretch }
.yhb-formules .grid.g2{ grid-template-columns:repeat(2,1fr); max-width:800px; margin-left:auto; margin-right:auto }
.yhb-formules .grid.g1{ grid-template-columns:minmax(0,440px); justify-content:center }
.yhb-formules .card{ background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  display:flex; flex-direction:column; position:relative; transform:none; box-shadow:none }
:root[data-theme="dark"] .yhb-formules .card{ background:rgba(255,255,255,.03) }
.yhb-formules .card.reco{ border:1.5px solid var(--mag); background:linear-gradient(180deg,rgba(230,0,138,.08),var(--surf) 42%) }
.yhb-formules .card:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -28px rgba(230,0,138,.5) }
.yhb-formules .badge{ position:absolute; top:-13px; left:24px; font-family:var(--fm); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,var(--mag),var(--vio));
  padding:5px 13px; border-radius:20px }
.yhb-formules .eye{ font-family:var(--fm); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); line-height:1.4 }
.yhb-formules .name{ font-weight:700; font-size:26px; letter-spacing:-.01em; margin-top:6px; color:var(--chalk) }
.yhb-formules .price{ font-family:var(--fm); font-weight:500; font-size:17px; color:var(--mag); margin-top:8px }
.yhb-formules .dream{ font-weight:600; font-size:16px; line-height:1.3; color:var(--chalk); margin-top:14px }
.yhb-formules ul{ list-style:none; margin:18px 0 20px; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:10px }
.yhb-formules li{ font-size:14.5px; line-height:1.3; padding-left:22px; position:relative; color:var(--soft) }
.yhb-formules li::before{ content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%; background:var(--mag) }
.yhb-formules li.bonus{ color:var(--chalk) }
.yhb-formules li.bonus::before{ background:transparent; border:1.5px solid var(--teal) }
.yhb-formules li .tag{ font-family:var(--fm); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-left:6px }
.yhb-formules li.head{ color:var(--chalk); font-weight:600 }
.yhb-formules .guar{ display:flex; gap:11px; background:linear-gradient(90deg,rgba(230,0,138,.10),rgba(122,44,166,.05));
  border:1px solid rgba(230,0,138,.30); border-radius:12px; padding:13px 15px; margin-bottom:20px }
.yhb-formules .guar .ic{ color:var(--mag); font-size:18px; line-height:1.2 }
.yhb-formules .guar .gt{ font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mag); margin-bottom:3px }
.yhb-formules .guar .gb{ font-size:13.5px; line-height:1.35; color:var(--chalk) }
.yhb-formules .cta{ margin-top:auto; display:block; text-align:center; font-weight:700; font-size:15px; padding:14px 24px;
  border-radius:100px; text-decoration:none; transition:.16s var(--ease) }
/* Teaser « Nos solutions » (grille 2 colonnes) : espace suffisant au-dessus du bouton */
.yhb-formules .grid.g2 .cta{ margin-top:28px }
/* Cartes offres à 2 colonnes (Décollage / Orbite) : épingler la garantie et le CTA en bas
   pour qu'ils s'alignent d'une carte à l'autre même si les listes ont un nombre de puces différent. */
.yhb-formules .grid.g2 .guar{ margin-top:auto }
.yhb-formules .cta.ghost{ color:var(--chalk); border:1.5px solid var(--line) }
.yhb-formules .cta.ghost:hover{ border-color:var(--mag); color:var(--mag) }
.yhb-formules .cta.solid{ color:#fff; background:linear-gradient(90deg,var(--mag),var(--vio)) }
.yhb-formules .cta.solid:hover{ filter:brightness(1.08) }
.yhb-formules .ody{ margin-top:22px; background:radial-gradient(130% 160% at 90% 0%, #241531 0%, #130c1b 50%, #0b0812 100%);
  border:1px solid rgba(122,44,166,.4); border-radius:18px; padding:40px 42px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:center; position:relative; overflow:hidden }
.yhb-formules .ody .eye{ color:var(--teal) }
.yhb-formules .ody h3{ font-weight:300; font-size:clamp(30px,4vw,44px); letter-spacing:-.02em; margin:10px 0 4px; color:#fff }
.yhb-formules .ody h3 .dot{ color:var(--mag) }
.yhb-formules .ody p{ color:#c9c4d4; font-size:15.5px; line-height:1.55; max-width:52ch; margin-top:6px }
.yhb-formules .ody .tiers{ font-family:var(--fm); font-size:13px; color:#F4F1EA; margin-top:16px }
.yhb-formules .ody .tiers span{ color:var(--teal) }
.yhb-formules .ody .side{ border-left:1px solid rgba(244,241,234,.16); padding-left:32px }
.yhb-formules .ody .lbl{ font-family:var(--fm); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#a29db0 }
.yhb-formules .ody .frm{ font-size:14.5px; color:#a9a4b2; margin-top:6px; line-height:1.5 }
.yhb-formules .ody .frm b{ color:#fff; font-weight:600 }
.yhb-formules .ody .octa{ margin-top:20px; display:inline-block; font-weight:700; font-size:15px; color:#0b0b0e;
  background:#F4F1EA; padding:14px 24px; border-radius:100px; text-decoration:none; transition:.16s var(--ease) }
.yhb-formules .ody .octa:hover{ transform:translateY(-2px) }
.yhb-formules .eng{ display:grid; grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; gap:20px; margin-top:22px } /* #133 recentrer les 2 cartes engagements */
.yhb-formules .ec{ background:var(--surf); border:1px solid var(--line); border-radius:14px; padding:22px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px }
:root[data-theme="dark"] .yhb-formules .ec{ background:rgba(255,255,255,.03) }
.yhb-formules .ec .ei{ font-size:22px; color:var(--mag); line-height:1 }
.yhb-formules .ec .eh{ font-weight:700; font-size:16px; color:var(--chalk) }
.yhb-formules .ec .ed{ grid-column:1 / -1; color:var(--mut); font-size:14px; line-height:1.4 }
@media (max-width:900px){
  .yhb-formules .grid,.yhb-formules .grid.g2,.yhb-formules .ody,.yhb-formules .eng{ grid-template-columns:1fr }
  .yhb-formules .ody{ padding:30px 26px }
  .yhb-formules .ody .side{ border-left:none; border-top:1px solid rgba(244,241,234,.16); padding-left:0; padding-top:24px }
}

/* ===== v3.0 · Cartes de routage (auto-identification « Vous êtes… ? » + hub des 3 modes) ===== */
.route-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:34px }
.route-grid.cols3{ grid-template-columns:repeat(3,1fr) }
.route-card{ display:flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:24px 24px; transition:.2s var(--ease); position:relative }
:root[data-theme="dark"] .route-card{ background:rgba(255,255,255,.03) }
.route-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 18px 44px -28px rgba(230,0,138,.45) }
.route-card .rc-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent) }
.route-card h3{ font-size:19px; font-weight:700; margin:9px 0 6px; color:var(--text); line-height:1.2 }
.route-card p{ font-size:14px; line-height:1.5; color:var(--text-soft); margin:0 }
.route-card .rc-go{ margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent) }
@media (max-width:900px){ .route-grid,.route-grid.cols3{ grid-template-columns:1fr } }

/* ===== v3.1 · Média « Les voix de la maison » (Entredonner + Woolymood) + embeds ===== */
.media-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:34px }
.media-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:26px 28px; text-decoration:none; transition:.2s var(--ease) }
:root[data-theme="dark"] .media-card{ background:rgba(255,255,255,.03) }
.media-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 18px 44px -28px rgba(230,0,138,.4) }
.media-card .mc-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent) }
.media-card .mc-title{ font-size:24px; font-weight:700; letter-spacing:-.01em; margin:8px 0 6px; color:var(--text) }
.media-card p{ font-size:14.5px; line-height:1.55; color:var(--text-soft); margin:0 }
.media-card .mc-go{ margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent) }
.media-card .mc-tag{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:3px 10px; align-self:flex-start }
/* embed responsive 16:9 (pour épisodes podcast à venir) */
.embed-16x9{ position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#000; margin-top:16px }
.embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.embed-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--violet) 16%, transparent), transparent 60%), #0d0c11; padding:20px }
@media (max-width:760px){ .media-grid{ grid-template-columns:1fr } }

/* ===== v3.2 · Feature podcast « Ils racontent » (Entredonner) ===== */
.podcast-feature{ display:grid; grid-template-columns:300px 1fr; margin-top:34px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:.2s var(--ease) }
:root[data-theme="dark"] .podcast-feature{ background:rgba(255,255,255,.03) }
.podcast-feature:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 22px 50px -30px rgba(230,0,138,.45) }
.podcast-feature .pf-cover{ position:relative; background:#0d0c11; display:flex; align-items:center; justify-content:center; min-height:230px }
.podcast-feature .pf-cover img{ width:100%; height:100%; object-fit:cover }
.podcast-feature .pf-play{ position:absolute; width:58px; height:58px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px; padding-left:3px; box-shadow:0 10px 30px rgba(230,0,138,.5) }
.podcast-feature .pf-body{ padding:30px 34px; display:flex; flex-direction:column; justify-content:center }
.podcast-feature .pf-body .mc-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent) }
.podcast-feature .pf-body .mc-title{ font-size:26px; font-weight:700; letter-spacing:-.01em; margin:8px 0 8px; color:var(--text) }
.podcast-feature .pf-body p{ color:var(--text-soft); font-size:15px; line-height:1.6; margin:0 }
.podcast-feature .pf-body .mc-go{ margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent) }
@media(max-width:760px){ .podcast-feature{ grid-template-columns:1fr } .podcast-feature .pf-cover{ min-height:200px } }

/* ===== v3.3 · Grille persona « Vous êtes… ? » : 3 + 2 centré (fini le 4+1) ===== */
.route-grid.personas{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px }
.route-grid.personas .route-card{ flex:1 1 300px; max-width:400px }
@media (max-width:900px){ .route-grid.personas .route-card{ flex-basis:100%; max-width:none } }

/* ===== v3.4 · Chantier A — séparation par BANDES alternées (remplace les séparateurs flottants) ===== */
/* On retire l'élément « flottant » (étoile filante) et on sépare par des bandes nettes. */
/* v3.6 · Séparateur = COMÈTE pleine largeur (la traînée EST la ligne de séparation) */
.starsep{ display:block; position:relative; width:100%; max-width:none; height:1px; margin:0; padding:0; overflow:visible; opacity:1 }
.starsep svg{ display:none }                                   /* remplacé par du CSS pur, pleine largeur */
/* la traînée : ligne fine edge-to-edge, qui s'éteint aux extrémités et brille vers la tête */
.starsep::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--accent) 20%,transparent) 22%,
    color-mix(in srgb,var(--accent) 55%,transparent) 72%, var(--accent) 93%, color-mix(in srgb,var(--accent) 30%,transparent) 100%) }
/* la tête de comète : petite étoile lumineuse près de l'extrémité brillante */
.starsep::after{ content:""; position:absolute; top:0; right:6%; width:6px; height:6px; margin-top:-3px; border-radius:1px;
  background:#fff; box-shadow:0 0 11px 2px var(--accent), 0 0 3px var(--accent); transform:rotate(45deg); pointer-events:none }
.starsep.flip::before{ transform:scaleX(-1) }
.starsep.flip::after{ right:auto; left:6% }
@media (prefers-reduced-motion: no-preference){
  .starsep::after{ animation:cometTw 3.6s ease-in-out infinite }
  @keyframes cometTw{ 0%,100%{ opacity:.7; box-shadow:0 0 8px 1px var(--accent) } 50%{ opacity:1; box-shadow:0 0 13px 3px var(--accent) } }
}
/* plus de liseré plein : c'est la comète + la bande qui séparent */
:is(body, #wp--skip-link--target) > section{ border-top:0 }
:is(body, #wp--skip-link--target) > section:first-of-type{ border-top:0 }
:root[data-theme="dark"] :is(body, #wp--skip-link--target) > section:nth-of-type(even):not(.yhb-univers):not(.finalcta){ background:rgba(255,255,255,.028) }
:root[data-theme="light"] :is(body, #wp--skip-link--target) > section:nth-of-type(even):not(.yhb-univers):not(.finalcta){ background:rgba(236,230,218,.55) } /* #115 translucide */
/* la bande Univers garde son fond premium sombre, mais gagne un vrai liseré de séparation */
.yhb-univers{ border-top:1px solid rgba(122,44,166,.35) }

/* ===== v3.5 · Règle « jamais de sombre en mode jour » : bandes Univers + Odyssée theme-aware ===== */
/* Bande « Notre univers » — version claire en mode jour */
:root[data-theme="light"] .yhb-univers{
  --chalk:#1a1720; --soft:#4a4550; --mut:#7a7580;
  background:radial-gradient(130% 100% at 80% -10%, #F4EFE5 0%, #EAE3D5 55%, #E1D9C9 100%);
  border-top-color:rgba(122,44,166,.22); border-bottom-color:rgba(122,44,166,.22);
}
:root[data-theme="light"] .yhb-univers h2{ color:#1a1720 }
:root[data-theme="light"] .yhb-univers .lead b{ color:#1a1720 }
:root[data-theme="light"] .yhb-univers.compact .ts-line{ color:#1a1720 }
:root[data-theme="light"] .yhb-univers .logo{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.10) }
:root[data-theme="light"] .yhb-univers .logo img{ filter:brightness(0); opacity:.55 }
:root[data-theme="light"] .yhb-univers .foot .ucta{ background:transparent; color:var(--accent); border:1.5px solid color-mix(in srgb, var(--accent) 42%, transparent) }
:root[data-theme="light"] .yhb-univers .foot .ucta:hover{ background:transparent; border-color:var(--accent); color:var(--accent) }

/* Bande « Odyssée » — version claire en mode jour */
:root[data-theme="light"] .yhb-formules .ody{
  background:radial-gradient(130% 160% at 90% 0%, #F0EADE 0%, #E7DFD0 55%, #DED5C4 100%);
  border-color:rgba(122,44,166,.26);
}
:root[data-theme="light"] .yhb-formules .ody h3{ color:#1a1720 }
:root[data-theme="light"] .yhb-formules .ody p{ color:#4a4550 }
:root[data-theme="light"] .yhb-formules .ody .tiers{ color:#1a1720 }
:root[data-theme="light"] .yhb-formules .ody .side{ border-left-color:rgba(0,0,0,.14) }
:root[data-theme="light"] .yhb-formules .ody .lbl{ color:#7a7580 }
:root[data-theme="light"] .yhb-formules .ody .frm{ color:#4a4550 }
:root[data-theme="light"] .yhb-formules .ody .frm b{ color:#1a1720 }
:root[data-theme="light"] .yhb-formules .ody .octa{ background:var(--accent); color:#fff }

/* ===== Héros à ~70vh (un bout de la section suivante dépasse) + mobile-safe (svh) ===== */
.hero:not(.compact):not(.legal-hero){ min-height:70vh; min-height:70svh }

/* ===== v3.6 · Chantier D — Singularité : flou PLEINE PAGE au survol (tout sauf le header) ===== */
.cap-stage{ position:fixed; inset:0; z-index:70; transform:none }   /* couvre le viewport, sous le header */
.cap-stage.on{ transform:none }
.cap-stage.on{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
/* le voile s'adapte au thème (déjà via var(--bg)) ; on renforce un poil */
:root[data-theme="dark"] .cap-stage.on{ background:color-mix(in srgb, var(--bg) 42%, transparent) }
:root[data-theme="light"] .cap-stage.on{ background:color-mix(in srgb, #ffffff 45%, transparent) }
.cap-stage .cap-card{ box-shadow:0 40px 110px -30px rgba(0,0,0,.6) }

/* ===== v3.6 · Chantier D — « Le moteur » : les 5 marques cœur qui portent le savoir-faire ===== */
.core-brands{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:34px }
.core-brands .cb{ display:flex; flex-direction:column; align-items:center; gap:11px }
.core-brands .cb-logo{ width:100%; height:96px; display:flex; align-items:center; justify-content:center; padding:16px;
  background:#F4F1EA; border:1px solid var(--border); border-radius:14px; transition:.2s var(--ease) }
.core-brands .cb-logo img{ max-height:100%; max-width:100%; object-fit:contain }
.core-brands .cb:hover .cb-logo{ transform:translateY(-3px); box-shadow:0 16px 36px -22px rgba(230,0,138,.5) }
.core-brands .cb-name{ font-weight:700; font-size:15px; color:var(--text) }
.core-brands .cb-role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:-4px }
@media(max-width:760px){ .core-brands{ grid-template-columns:repeat(2,1fr) } }

/* ===== v3.7 · Corrections : séparateur auto, bande Univers distincte, CTA cohérents ===== */
/* (4) Séparateur comète AUTOMATIQUE au sommet de chaque section = cohérent partout, plus de trous */
.starsep{ display:none }                                    /* on retire les séparateurs manuels (inégaux) */
:is(body, #wp--skip-link--target) > section{ position:relative }
:is(body, #wp--skip-link--target) > section:not(.hero):not(:first-of-type)::before{
  content:""; position:absolute; top:0; left:0; right:0; height:11px; pointer-events:none; z-index:3;
  background:
    radial-gradient(9px 6px at 92% 0px, rgba(255,255,255,.95) 0%, var(--accent) 34%, transparent 72%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--accent) 16%,transparent) 22%,
      color-mix(in srgb,var(--accent) 52%,transparent) 72%, var(--accent) 92%, transparent 100%);
  background-repeat:no-repeat; background-size:100% 11px, 100% 1.5px; background-position:0 0, 0 0;
}
@media (prefers-reduced-motion: no-preference){
  :is(body, #wp--skip-link--target) > section:not(.hero):not(:first-of-type)::before{ animation:cometPulse 3.8s ease-in-out infinite }
  @keyframes cometPulse{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
}

/* (5) Bande « Notre univers » : plus de teinte violette en mode jour — la bande compacte (accueil) se fond dans la page */
:root[data-theme="light"] .yhb-univers.compact{ background:transparent; border-top-color:transparent; border-bottom-color:transparent }

/* (3) CTA cohérents avec le reste du site : Odyssée = solide magenta ; Univers = ghost (secondaire) */
.yhb-formules .ody .octa{ background:linear-gradient(90deg,var(--accent),var(--violet)); color:#fff; border:0;
  border-radius:999px; padding:14px 26px; font-weight:700 }
.yhb-formules .ody .octa:hover{ filter:brightness(1.08); transform:translateY(-2px) }
:root[data-theme="light"] .yhb-formules .ody .octa{ background:linear-gradient(90deg,var(--accent),var(--violet)); color:#fff }
.yhb-univers .foot .ucta{ background:transparent; border:1.5px solid color-mix(in srgb, currentColor 42%, transparent);
  color:currentColor; border-radius:999px; padding:12px 26px; font-weight:600 }
.yhb-univers .foot .ucta:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); background:transparent }

/* ===== v3.9 · Navigation déroulante Formules + retour offres + CTA Odyssée secondaire ===== */
/* Sous-menu Formules (survol + focus clavier) */
.navitem.has-drop{ position:relative }
.navitem.has-drop > .navlink .caret2{ display:inline-block; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4.5px solid currentColor;
  opacity:.55; margin-left:6px; transition:transform .25s var(--ease), opacity .2s }
.navitem.has-drop:hover > .navlink .caret2,
.navitem.has-drop:focus-within > .navlink .caret2{ transform:rotate(180deg); opacity:1 }
.ndrop{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); margin-top:10px;
  min-width:268px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.55); z-index:200;
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  display:flex; flex-direction:column; gap:2px }
:root[data-theme="dark"] .ndrop{ background:#141220 }
.ndrop::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px } /* pont anti-zone-morte */
.navitem.has-drop:hover .ndrop,
.navitem.has-drop:focus-within .ndrop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.ndrop a{ display:flex; flex-direction:column; gap:3px; padding:11px 14px; border-radius:10px; transition:background .16s var(--ease) }
.ndrop a b{ font-size:14.5px; font-weight:600; color:var(--text) }
.ndrop a span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--muted) }
.ndrop a:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent) }
.ndrop a:hover b{ color:var(--accent) }
.ndrop a.on{ background:color-mix(in srgb, var(--accent) 12%, transparent) }   /* #108 item sous-menu actif */
.ndrop a.on b{ color:var(--accent) }
.drawer .drawer-sub a.on{ color:var(--accent) }
@media(max-width:900px){ .ndrop{ display:none !important } } /* desktop-only : le drawer gère le mobile */

/* Bouton « Retour aux offres » (pages d'offre) */
.back-offers{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.04em; color:var(--muted); padding:8px 15px 8px 12px; border:1px solid var(--border);
  border-radius:100px; margin-bottom:22px; transition:color .2s, border-color .2s, transform .2s }
.back-offers span{ font-size:15px; line-height:1; transition:transform .2s var(--ease) }
.back-offers:hover{ color:var(--text); border-color:var(--border-strong) }
.back-offers:hover span{ transform:translateX(-3px) }

/* Odyssée : « Découvrir » en secondaire contour (harmonisé avec les 3 cartes) */
.yhb-formules .ody .octa{ display:inline-block; width:auto; background:none; color:var(--chalk);
  border:1.5px solid var(--line); margin-top:20px; padding:14px 26px; border-radius:10px; text-align:center }
.yhb-formules .ody .octa:hover{ background:none; filter:none; border-color:var(--mag); color:var(--mag); transform:translateY(-2px) }
:root[data-theme="light"] .yhb-formules .ody .octa{ background:none; color:var(--chalk); border-color:var(--line) }
:root[data-theme="light"] .yhb-formules .ody .octa:hover{ background:none; border-color:var(--accent); color:var(--accent) }

/* ===== v4.0 · Savoir-faire : dépli au clic (accessible) ===== */
.cap-src{ display:none !important }                 /* source détail : dans le DOM (indexable) mais masquée */
.cap-stage.on{ pointer-events:auto }                /* le fond capte le clic pour fermer */
.cap-stage .cap-card{ position:relative }
.cap-close{ position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--text); font-size:22px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:border-color .2s, color .2s, transform .2s }
.cap-close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg) }
/* affordance : la carte ouverte garde son « + » tourné en croix */
.band[data-cap][aria-expanded="true"]::after{ transform:rotate(45deg); opacity:1; animation:none }
.band[data-cap][aria-expanded="true"]{ border-color:var(--accent); animation:none }

/* ===== v4.1 · Personas : sélecteur visuel (tuiles + panneau) ===== */
.psel{ max-width:1000px; margin:40px auto 0 }
.psel-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
.ptile{ display:flex; flex-direction:column; align-items:center; gap:13px; padding:22px 12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; color:var(--text-soft);
  font:inherit; text-align:center; transition:transform .22s var(--ease), border-color .22s, background .22s }
.ptile .pt-ic{ width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  border:1px solid var(--border); color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent);
  transition:.22s var(--ease) }
.ptile .pt-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.ptile .pt-lab{ font-size:13px; font-weight:600; line-height:1.28; color:var(--text) }
.ptile:hover{ border-color:var(--accent); transform:translateY(-3px) }
.ptile[aria-selected="true"]{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.ptile[aria-selected="true"] .pt-ic{ background:var(--accent); color:#fff; border-color:var(--accent) }
.psel-stage{ margin-top:14px }
.ppanel[hidden]{ display:none }
.ppanel{ display:none }
.ppanel.on{ display:grid; grid-template-columns:1fr auto; gap:18px 34px; align-items:center;
  padding:28px 32px; border:1px solid var(--border); border-radius:16px; background:var(--surface);
  animation:ppin .3s var(--ease) }
@keyframes ppin{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.ppanel .pp-txt{ min-width:0 }
.ppanel h3{ font-size:clamp(20px,2.3vw,26px); margin:0 0 8px }
.ppanel p{ color:var(--text-soft); font-size:16px; line-height:1.55; max-width:62ch; margin:0 }
.ppanel .btn{ white-space:nowrap; flex:none }
@media(prefers-reduced-motion:reduce){ .ppanel.on{ animation:none } .ptile:hover{ transform:none } }
@media(max-width:820px){ .psel-tiles{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:560px){ .psel-tiles{ grid-template-columns:repeat(2,1fr) }
  .ppanel.on{ grid-template-columns:1fr; text-align:left } }

/* ===== v4.3 · Formules : colonne « On fait pour vous » avec ses 2 paliers ===== */
.yhb-formules .subtiers{ display:grid; gap:13px; margin:16px 0 20px; padding-top:16px; border-top:1px solid var(--line) }
.yhb-formules .st-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.yhb-formules .st-h b{ font-size:15.5px; color:var(--chalk); font-weight:700 }
.yhb-formules .st-h span{ font-family:var(--fm); font-size:12.5px; color:var(--mag); white-space:nowrap }
.yhb-formules .st p{ font-size:13.5px; color:var(--soft); line-height:1.45; margin:3px 0 0 }

/* ===== v4.4 · Cartes média : pochette / logo en tête ===== */
.media-card .mc-cover{ width:150px; height:150px; margin:0 auto 18px; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  border:1px solid var(--border); background:radial-gradient(120% 120% at 30% 20%, #241531, #0b0812) }
.media-card .mc-cover.art img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block }
/* Renaissance 69 (voix) : pochette PNG autoportante (écusson centré sur tuile sombre) — contenue et centrée, sans recadrage. */
.media-card .mc-cover.r69 img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block }
/* Woolymood : logo centré dans son encre, sur panneau clair (les deux thèmes) */
.media-card .mc-cover.logo{ background:#F4F1EA }
.media-card .mc-cover.logo img{ max-width:72%; max-height:72%; width:auto; filter:none; opacity:1 }
:root[data-theme="light"] .media-card .mc-cover.art{ background:radial-gradient(120% 120% at 30% 20%, #efe7f6, #e0d6ec) }
:root[data-theme="light"] .media-card .mc-cover.logo{ background:#fff }

/* ===== v4.4 · Communauté : rôles en grille (fini le 2e système orbital redondant) ===== */
.roles-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:42px }
.roles-grid .role{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:22px 20px; transition:transform .22s var(--ease), border-color .22s }
:root[data-theme="dark"] .roles-grid .role{ background:rgba(255,255,255,.03) }
.roles-grid .role:hover{ border-color:var(--border) } /* informatif, non cliquable : pas d'affordance de lien */
.roles-grid .role .ro-n{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent) }
.roles-grid .role h3{ font-size:16px; margin:9px 0 6px }
.roles-grid .role p{ font-size:13.5px; color:var(--text-soft); line-height:1.5; margin:0 }
@media(max-width:900px){ .roles-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .roles-grid{ grid-template-columns:1fr } }

/* ===== v4.5 · Sélecteur savoir-faire (9) + moteur (5) : même mécanique que « Vous êtes ? » ===== */
/* Savoir-faire : 9 tuiles compactes numéro + titre */
.psel.sf{ max-width:none }
.psel.sf .psel-tiles{ grid-template-columns:repeat(3,1fr) }
.psel.sf .ptile{ flex-direction:row; align-items:center; gap:13px; padding:15px 18px; text-align:left }
.psel.sf .ptile .pt-n{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); flex:none }
.psel.sf .ptile .pt-lab{ font-size:14px; line-height:1.2 }
.psel.sf .ppanel.on{ grid-template-columns:1fr; gap:14px }
.psel.sf .ppanel .pp-lead{ font-size:17px; color:var(--text); font-weight:600; margin:0 0 4px }
.psel.sf .ppanel ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px }
.psel.sf .ppanel li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--text-soft); line-height:1.5 }
.psel.sf .ppanel li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent) }
@media(max-width:820px){ .psel.sf .psel-tiles{ grid-template-columns:repeat(2,1fr) } .psel.sf .ppanel ul{ grid-template-columns:1fr } }
@media(max-width:520px){ .psel.sf .psel-tiles{ grid-template-columns:1fr } }

/* Moteur : 5 tuiles marque (logo + nom + rôle) */
.psel.mo{ max-width:none }
/* Moteur : cartes-logo crème, le vrai logo (couleur d'origine) remplit la tuile, sans texte */
.psel.mo .ptile{ padding:0; min-height:120px; display:grid; place-items:center; background:#F4F1EA; border-color:rgba(11,11,14,.12) }
.psel.mo .ptile img{ height:auto; width:auto; max-height:50%; max-width:70%; filter:none; opacity:1 }
.psel.mo .ptile:hover{ border-color:var(--accent); transform:translateY(-3px) }
.psel.mo .ptile[aria-selected="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
.psel.mo .ppanel.on{ grid-template-columns:1fr auto; align-items:center }
@media(max-width:820px){ .psel.mo .psel-tiles{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:520px){ .psel.mo .psel-tiles{ grid-template-columns:repeat(2,1fr) } }

/* ===== v4.7 · Phrase Univers : blanc + phrase clé en dégradé (comme la home) ===== */
.yhb-univers .uni-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ===== v4.8 · Bande « Notre univers » (complète) centrée, comme le reste du site ===== */
.yhb-univers:not(.compact){ text-align:center }
.yhb-univers:not(.compact) .eye,
.yhb-univers:not(.compact) h2,
.yhb-univers:not(.compact) .lead{ margin-left:auto; margin-right:auto }
.yhb-univers:not(.compact) .stats{ justify-content:center }
.yhb-univers:not(.compact) .foot{ flex-direction:column; justify-content:center; align-items:center; text-align:center }
.yhb-univers:not(.compact) .foot .note{ margin-left:auto; margin-right:auto }

/* ===== v4.9 → v7 · Personas : 2 colonnes (liste de tuiles à gauche, panneau à droite).
   La sélection change au survol/focus/clic ; le panneau étant à droite, aller vers son
   CTA ne repasse jamais sur une autre tuile (fini la re-sélection parasite). ===== */
.proutes{ max-width:1040px; margin:40px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch }
.proutes-tiles{ display:flex; flex-direction:column; gap:10px }
.proute{ position:relative; display:flex; flex-direction:row; align-items:center; gap:14px; padding:15px 46px 15px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; text-decoration:none; text-align:left;
  width:100%; margin:0; font:inherit; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:transform .22s var(--ease), border-color .22s, background .22s }
:root[data-theme="dark"] .proute{ background:rgba(255,255,255,.03) }
.proute .pt-ic{ flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); transition:.22s var(--ease) }
.proute .pt-ic svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.proute .pt-lab{ font-size:14px; font-weight:600; line-height:1.28; color:var(--text) }
.proute .pr-ar{ position:absolute; top:50%; right:16px; color:var(--accent); font-size:16px; line-height:1; opacity:0; transform:translateY(-50%) translateX(-4px); transition:.22s var(--ease) }
.proute:hover, .proute.on, .proute:focus-visible{ border-color:var(--accent); transform:translateX(3px); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.proute:hover .pt-ic, .proute.on .pt-ic, .proute:focus-visible .pt-ic{ background:var(--accent); color:#fff; border-color:var(--accent) }
.proute:hover .pr-ar, .proute.on .pr-ar, .proute:focus-visible .pr-ar{ opacity:1; transform:translateY(-50%) translateX(0) }
.proutes-panel{ margin:0; padding:30px 32px; border:1px solid var(--border); border-radius:16px; background:var(--surface); display:flex; flex-direction:column; justify-content:center }
:root[data-theme="dark"] .proutes-panel{ background:rgba(255,255,255,.03) }
.proutes-panel .pr-name{ font-size:clamp(20px,2.2vw,26px); margin:0 0 12px }
.proutes-panel .pr-pain{ color:var(--text-soft); font-size:16px; line-height:1.6; margin:0 0 20px }
.proutes-panel .pr-cue{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent) }
@media(prefers-reduced-motion:reduce){ .proute:hover, .proute.on, .proute:focus-visible{ transform:none } }
@media(max-width:760px){
  .proutes{ grid-template-columns:1fr; gap:16px }
}

/* ===== v5.1 · Bande Univers : titre sur 2 lignes nettes ===== */
.yhb-univers:not(.compact) h2{ max-width:none }

/* ===================== v5.5 ===================== */
/* (a) « Explorer l'Univers » : CTA secondaire neutre (noir/gris), jamais rose ; pied de bande centré empilé */
.yhb-univers.compact .foot{ flex-direction:column; align-items:center; gap:16px }
.yhb-univers .foot .ucta{ color:var(--chalk); background:transparent;
  border:1.5px solid color-mix(in srgb, var(--chalk) 32%, transparent); border-radius:999px; padding:12px 26px; font-weight:600 }
.yhb-univers .foot .ucta:hover{ color:var(--chalk); border-color:var(--chalk); background:transparent; transform:translateY(-2px) }
:root[data-theme="light"] .yhb-univers .foot .ucta{ color:#1a1720; border-color:rgba(11,11,14,.30) }
:root[data-theme="light"] .yhb-univers .foot .ucta:hover{ color:#1a1720; border-color:#1a1720 }

/* (b) CTA final : bandeau harmonisé, fond légèrement différencié (se détache de la page ET du footer) */
.finalcta{ margin:0; max-width:none;
  padding-top:clamp(56px,8vh,92px); padding-bottom:clamp(56px,8vh,92px);
  border-top:1px solid rgba(230,0,138,.20); border-bottom:1px solid rgba(230,0,138,.20) }
:root[data-theme="dark"] .finalcta{ background:radial-gradient(120% 130% at 50% 0%, rgba(230,0,138,.13), transparent 62%), #130d17 }
:root[data-theme="light"] .finalcta{ background:radial-gradient(120% 130% at 50% 0%, rgba(230,0,138,.09), transparent 60%), #F6ECF1 }
.finalcta h2{ font-size:clamp(30px,3.6vw,46px); max-width:22ch; margin-left:auto; margin-right:auto }
.finalcta .lede{ margin-left:auto; margin-right:auto }
.finalcta .cta-row{ margin-top:30px }

/* (c) Newsletter « S'abonner » : CTA secondaire (bordure + texte, pas de rose plein) */
.news button{ background:transparent; color:var(--contrast-text);
  border:1.5px solid color-mix(in srgb, var(--contrast-text) 34%, transparent) }
.news button:hover{ background:transparent; border-color:var(--contrast-text); color:var(--contrast-text) }

/* (d) Self-Made : petite note sous l'offre (déléguer au fur et à mesure) */
.yhb-formules .sub-note{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--text-soft); font-weight:300 }

/* ===================== v5.6 ===================== */
/* (a) Personas : CTA réel dans le panneau (fini la consigne « cliquez… »), panneau à droite */
.proutes-panel{ text-align:left }
.proutes-panel .pr-go{ align-self:flex-start; margin-top:2px }

/* ===== Teaser vidéo « Univers YHB » (accueil) + modal lightbox ===== */
.uni-video{ margin-top:36px }
.vteaser{ display:block; width:100%; max-width:820px; margin:0 auto; padding:0; border:0; background:transparent; cursor:pointer; appearance:none; -webkit-appearance:none }
.vteaser-media{ position:relative; display:block; border-radius:20px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border);
  background:radial-gradient(120% 140% at 30% 20%, #3A0E63, #0B0B0E 72%); transition:transform .28s var(--ease), border-color .22s, box-shadow .28s var(--ease) }
.vteaser:hover .vteaser-media, .vteaser:focus-visible .vteaser-media{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 26px 60px -34px rgba(230,0,138,.6) }
.vteaser:focus-visible{ outline:none }
.vteaser-glow{ position:absolute; inset:0; background:radial-gradient(58% 78% at 50% 48%, rgba(230,0,138,.20), transparent 70%); opacity:.65; transition:opacity .28s var(--ease) }
.vteaser:hover .vteaser-glow, .vteaser:focus-visible .vteaser-glow{ opacity:1 }
.vteaser-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); display:grid; place-items:center; backdrop-filter:blur(4px); transition:.24s var(--ease) }
.vteaser:hover .vteaser-play, .vteaser:focus-visible .vteaser-play{ background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.07) }
.vteaser-play svg{ width:26px; height:26px; fill:#fff; margin-left:4px }
.vteaser-cap{ position:absolute; left:20px; bottom:18px; max-width:60%; text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.88) }
.vteaser-tag{ position:absolute; right:20px; bottom:18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:3px 11px }
@media(max-width:520px){ .vteaser-cap{ font-size:10px; max-width:54% } .vteaser-tag{ display:none } .vteaser-play{ width:62px; height:62px } .vteaser-play svg{ width:22px; height:22px } }

.vmodal{ position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; padding:24px }
.vmodal.on{ display:flex }
.vmodal-backdrop{ position:absolute; inset:0; background:rgba(8,6,14,.8); backdrop-filter:blur(6px) }
.vmodal-card{ position:relative; width:100%; max-width:960px; animation:vmodalin .3s var(--ease) }
@keyframes vmodalin{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.vmodal-frame{ position:relative; width:100%; height:0; padding-top:56.25%; border-radius:16px; overflow:hidden; background:#000;
  border:1px solid rgba(230,0,138,.42); box-shadow:0 30px 80px -30px rgba(0,0,0,.7) }
.vmodal-focus-guard{ position:fixed; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.vmodal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.vmodal-x{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; font-size:20px; line-height:1; cursor:pointer; z-index:3; transition:border-color .2s, color .2s }
.vmodal-x:hover, .vmodal-x:focus-visible{ border-color:var(--magenta); color:var(--magenta); outline:none }
@media(max-width:560px){ .vmodal{ padding:16px } .vmodal-x{ top:-42px } }
@media(prefers-reduced-motion:reduce){ .vmodal-card{ animation:none } .vteaser:hover .vteaser-media, .vteaser:focus-visible .vteaser-media{ transform:none } .vteaser:hover .vteaser-play, .vteaser:focus-visible .vteaser-play{ transform:translate(-50%,-50%) } }
/* (b) Mini-jeu déplacé dans le footer, intégré de façon ludique */
.foot-game{ display:inline-flex; align-items:center; gap:8px; background:transparent; cursor:pointer;
  border:1px solid var(--contrast-border); border-radius:999px; padding:7px 14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--contrast-soft); transition:.22s var(--ease) }
.foot-game svg{ width:15px; height:15px }
.foot-game:hover{ color:var(--contrast-text); border-color:var(--accent); transform:translateY(-1px) }
.foot-game:hover svg{ color:var(--accent) }
.foot-game:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===================== v6.0 ===================== */
/* (a) Thème « lever de soleil » : fondu couleur TRÈS doux (~4,5 s) quand on rejoint la préférence système */
:root.theme-rise, :root.theme-rise *{
  transition: background-color 4.5s ease, color 4.5s ease, border-color 4.5s ease, fill 4.5s ease, box-shadow 4.5s ease !important;
}
@media (prefers-reduced-motion: reduce){ :root.theme-rise, :root.theme-rise *{ transition:none !important; } }

/* Pulsation douce du bouton jour/nuit pendant la bascule automatique de thème
   (feature voulue : signale brièvement que le thème est réglable ; s'arrête ~1 s après le fondu) */
@keyframes themeBtnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(230,0,138,0) }
  50%{ box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent), 0 0 20px 3px color-mix(in srgb,var(--accent) 55%,transparent) }
}
#themeBtn.theme-pulsing{ animation:themeBtnPulse 1.5s ease-in-out infinite; color:var(--accent); border-color:var(--accent) }
@media (prefers-reduced-motion: reduce){ #themeBtn.theme-pulsing{ animation:none } }

/* (b) Sous-menus responsive : accordéon Trajectoires / Formules dans le tiroir mobile */
.drawer-group{ display:flex; flex-direction:column }
.drawer .drawer-exp{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  border:0; border-top:1px solid var(--border); background:none; color:var(--text);
  font-family:inherit; font-size:21px; font-weight:600; padding:16px 4px; cursor:pointer; text-align:left }
.drawer .drawer-exp .dcaret{ flex:none; width:9px; height:9px; margin-right:6px; opacity:.7;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .25s var(--ease) }
.drawer .drawer-exp[aria-expanded="true"]{ color:var(--accent) }
.drawer .drawer-exp[aria-expanded="true"] .dcaret{ transform:rotate(-135deg); opacity:1 }
.drawer .drawer-sub{ overflow:hidden; max-height:0; transition:max-height .3s var(--ease); display:flex; flex-direction:column }
.drawer .drawer-sub.open{ max-height:420px }
.drawer .drawer-sub a{ font-size:16px; font-weight:500; color:var(--text-soft); padding:12px 4px 12px 20px; text-decoration:none }
.drawer .drawer-sub a:hover{ color:var(--accent) }

/* (c) Correctif responsive : le panneau du moteur s'empile sur mobile (sinon le texte se comprime à un mot par ligne) */
@media(max-width:560px){
  .psel.mo .ppanel.on{ grid-template-columns:1fr; gap:16px; align-items:start }
  .psel.mo .ppanel.on .btn{ justify-self:start }
}

/* (d) Ligne de réassurance sous le CTA final (non cliquable) */
.finalcta .reassure{ margin:14px 0 0; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--muted) }

/* ============================================================
   FAQ (v6.2) — page Questions fréquentes + accordéon natif
   ============================================================ */
.faq{ max-width:780px; margin:0 auto }
.faq-cat{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:38px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--border) }
.faq-cat:first-of-type{ margin-top:0 }
.qa{ border:1px solid var(--border); border-radius:14px; background:var(--surface);
  margin:10px 0; overflow:hidden; transition:border-color .2s }
.qa[open]{ border-color:var(--border-strong) }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:18px 22px; font-size:16.5px; font-weight:500; color:var(--text); line-height:1.4 }
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover{ color:var(--accent) }
.qa-ic{ flex:none; width:9px; height:9px; margin-left:auto; margin-top:-3px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform .25s ease }
.qa[open] .qa-ic{ transform:rotate(-135deg); margin-top:2px }
.qa-a{ padding:0 22px 20px }
.qa-a p{ font-size:15.5px; color:var(--text-soft); font-weight:300; line-height:1.7; margin:0 }
.qa-a a{ color:var(--accent) }
.qa-a b{ color:var(--text); font-weight:600 }
.qa[open] .qa-a{ animation:qaIn .28s ease }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .qa-ic, .qa[open] .qa-a{ transition:none; animation:none } }
@media (max-width:560px){
  .qa summary{ padding:16px 16px; font-size:15.5px; gap:12px }
  .qa-a{ padding:0 16px 18px }
}

/* Lien contextuel discret vers la FAQ (près des CTA, pages a forte intention) */
.faq-link{ display:inline-block; margin:16px 0 0; font-size:13.5px; color:var(--muted);
  text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s }
.faq-link:hover{ color:var(--accent); border-color:var(--accent) }
.faq-link .arr{ color:var(--accent) }

/* ============================================================
   Page Trajectoires (v6.3) — grille des 5 profils
   ============================================================ */
.trajs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px }
.tcard{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px 24px;
  border:1px solid var(--border); border-radius:16px; background:var(--surface); text-decoration:none; color:inherit;
  transition:transform .22s var(--ease), border-color .22s, box-shadow .22s, background .22s }
:root[data-theme="dark"] .tcard{ background:rgba(255,255,255,.03) }
.tcard:hover, .tcard:focus-visible{ border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(230,0,138,.5) }
.tc-ic{ width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  border:1px solid var(--border); color:var(--accent); transition:.22s var(--ease) }
.tc-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.tcard:hover .tc-ic, .tcard:focus-visible .tc-ic{ background:var(--accent); color:#fff; border-color:var(--accent) }
.tc-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.tcard h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--text) }
.tcard p{ font-size:14.5px; color:var(--text-soft); font-weight:300; line-height:1.6; margin:0; flex:1 }
.tc-go{ margin-top:4px; font-weight:600; font-size:14px; color:var(--accent); display:inline-flex; align-items:center; gap:7px }
.tcard:hover .tc-go .arr{ transform:translateX(3px) }
.tc-go .arr{ transition:transform .22s var(--ease) }
.trajs-note{ text-align:center; margin-top:30px; font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted) }
@media(max-width:900px){ .trajs{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .trajs{ grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce){ .tcard:hover{ transform:none } .tc-go .arr{ transition:none } }

/* ============================================================
   Triptyque interactif « Plus qu'une agence » (v6.4)
   Liste de cartes à gauche + panneau à droite (survol desktop, tap mobile)
   ============================================================ */
.tri{ display:grid; grid-template-columns:minmax(280px,1fr) 1.35fr; gap:22px; align-items:stretch; margin-top:46px }
.tri-list{ display:flex; flex-direction:column; gap:12px }
.tri-card{ display:flex; align-items:center; gap:16px; text-align:left; width:100%; margin:0; cursor:pointer;
  padding:20px 20px; border:1px solid var(--border); border-radius:16px; background:var(--surface);
  font:inherit; color:inherit; appearance:none; -webkit-appearance:none;
  transition:transform .2s var(--ease), border-color .2s, background .2s }
:root[data-theme="dark"] .tri-card{ background:rgba(255,255,255,.03) }
.tri-card .n{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); flex:none }
.tri-card .t{ font-size:16.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--text) }
.tri-card .chev{ margin-left:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-top:2px solid var(--muted);
  transform:rotate(45deg); opacity:0; transition:.2s var(--ease); flex:none }
.tri-card:hover, .tri-card.on, .tri-card:focus-visible{ border-color:var(--accent); transform:translateX(3px);
  background:color-mix(in srgb, var(--accent) 8%, transparent) }
.tri-card.on .chev, .tri-card:hover .chev{ opacity:1; border-color:var(--accent) }
.tri-panel{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:38px 36px; border:1px solid var(--border-strong); border-radius:20px;
  background:radial-gradient(120% 120% at 85% -10%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 60%), var(--surface) }
:root[data-theme="dark"] .tri-panel{ background:radial-gradient(120% 120% at 85% -10%, rgba(122,44,166,.28), transparent 60%), rgba(255,255,255,.02) }
.tri-panel .p-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.tri-panel h3{ font-size:clamp(22px,2.4vw,28px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0; color:var(--text) }
.tri-panel .p-text{ font-size:16px; font-weight:300; line-height:1.65; color:var(--text-soft); margin:0; max-width:46ch }
.tri-panel .p-cta{ margin-top:6px }
@media(min-width:761px){ .tri-card{ flex:1 1 0 } }
@media(max-width:760px){ .tri{ grid-template-columns:1fr } .tri-panel{ order:2 } .tri-list{ order:1 } }
@media(prefers-reduced-motion:reduce){ .tri-card:hover, .tri-card.on{ transform:none } }

/* Teaser Formules sur l'accueil (v6.4 · icônes + bullets v6.6) */
.fteaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px }
.foffer{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:28px 26px; border:1px solid var(--border);
  border-radius:18px; background:var(--surface); text-decoration:none; color:inherit;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s }
:root[data-theme="dark"] .foffer{ background:rgba(255,255,255,.03) }
.foffer:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(230,0,138,.55) }
.foffer .fo-ic{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--border); color:var(--accent); transition:.2s var(--ease) }
.foffer .fo-ic svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.foffer:hover .fo-ic{ background:var(--accent); color:#fff; border-color:var(--accent) }
.foffer .fo-name{ font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text) }
.foffer .fo-desc{ font-size:14px; font-weight:300; line-height:1.5; color:var(--text-soft) }
.foffer .fo-list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; align-self:stretch }
.foffer .fo-list li{ position:relative; padding-left:24px; font-size:14px; color:var(--text-soft); line-height:1.4 }
.foffer .fo-list li::before{ content:""; position:absolute; left:2px; top:5px; width:11px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg) }
.foffer .fo-go{ margin-top:4px; font-weight:600; font-size:14px; color:var(--accent); display:inline-flex; align-items:center; gap:7px }
.foffer .fo-go .arr{ transition:transform .2s var(--ease) }
.foffer:hover .fo-go .arr{ transform:translateX(3px) }
@media(max-width:820px){ .fteaser{ grid-template-columns:1fr } }

/* Chiffres fusionnés dans la bande Univers (v6.6) */
.yhb-univers .kpis-uni{ margin-top:36px; margin-bottom:4px }
.yhb-univers .kpis-uni .lab{ color:var(--mut) }
@media(max-width:640px){ .yhb-univers .kpis-uni{ grid-template-columns:repeat(3,1fr); gap:14px } .yhb-univers .kpis-uni .val{ font-size:clamp(30px,9vw,44px) } }

/* ============================================================
   Accueil v6.8 — teaser Noyau (panneau + puces profils) + avis avec marque
   ============================================================ */
.noyau-teaser{ text-align:center; max-width:920px; margin:0 auto; padding:44px 40px;
  border:1px solid var(--border-strong); border-radius:24px;
  background:radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 62%), var(--surface) }
:root[data-theme="dark"] .noyau-teaser{ background:radial-gradient(120% 130% at 50% -20%, rgba(122,44,166,.22), transparent 62%), rgba(255,255,255,.02) }
.noyau-teaser .eyebrow{ color:var(--accent) }
.noyau-teaser h2{ margin-top:8px }
.noyau-teaser .lede{ margin:12px auto 0; max-width:60ch }
/* ADN du fondateur en texte (pas de boîte dans la boîte) */
.noyau-adn{ margin:24px auto 2px; max-width:660px; display:flex; flex-direction:column; gap:11px }
.noyau-adn p{ margin:0; font-size:16px; color:var(--text-soft); line-height:1.5 }
.noyau-adn .adn-k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-right:12px }
@media(max-width:560px){ .noyau-teaser{ padding:34px 22px } }

/* Avis : carousel à défilement infini (pause au survol) */
.temoins .tcarousel{ margin-top:30px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.temoins .tcarousel-track{ display:flex; gap:20px; width:max-content; animation:tscroll 95s linear infinite; text-align:left }
@media (hover:hover){ .temoins .tcarousel:hover .tcarousel-track{ animation-play-state:paused } }
.temoins .tcarousel.paused .tcarousel-track{ animation-play-state:paused }
.temoins .tcard .ttrans{ display:block; margin-top:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:.72 }
.temoins .tcarousel .tcard{ width:340px; flex:none; margin:4px 0 }
@keyframes tscroll{ to{ transform:translateX(calc(-50% - 10px)) } }
@media(max-width:560px){ .temoins .tcarousel .tcard{ width:280px } }
@media(prefers-reduced-motion:reduce){ .temoins .tcarousel-track{ animation:none; overflow-x:auto } }
.temoins .tgrid{ grid-template-columns:repeat(auto-fit, minmax(292px,1fr)) }
.temoins .tmeta{ width:100%; margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:nowrap }
.temoins .tcard cite{ margin-top:0; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.temoins .tbrand{ flex:0 0 auto }
.temoins .tbrand{ font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:4px 11px; white-space:nowrap }

/* ============================================================
   ACCESSIBILITÉ — repère clavier + lien d'évitement (additif)
   ============================================================ */
/* Focus clavier visible partout. Les composants qui définissent déjà leur propre
   anneau (outline:none volontaire + halo) restent prioritaires par spécificité. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Lien d'évitement : masqué hors écran, net et visible au focus clavier (haut-gauche) */
.skip-to-content{ position:absolute; top:-72px; left:12px; z-index:400;
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  background:var(--surface); color:var(--text); border:2px solid var(--accent); border-radius:11px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-decoration:none; white-space:nowrap;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55); transition:top .18s var(--ease) }
.skip-to-content:focus{ top:12px }
.skip-to-content:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media(prefers-reduced-motion:reduce){ .skip-to-content{ transition:none } }

/* Complément mouvement réduit : neutralise les animations décoratives en boucle
   qui ne seraient pas déjà couvertes (motif WCAG standard, additif) */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important }
}

/* ============================================================
   COCKPIT — regroupement footer + avertissement sci-fi rouge (additif)
   ============================================================ */
/* Les deux commandes (Mise en orbite + Cockpit) partagent le même gabarit « pilule »
   dans le pied de page, regroupées à droite. */
.fbot #expertBtn{ position:relative; width:auto; height:auto; border-radius:999px; padding:7px 14px; gap:8px;
  display:inline-flex; align-items:center; overflow:visible;
  border:1px solid var(--contrast-border); background:transparent; color:var(--contrast-soft);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; transition:.22s var(--ease) }
.fbot #expertBtn .exp-lbl{ display:inline; font-family:inherit; font-weight:500; font-size:inherit; letter-spacing:inherit; text-transform:inherit }
.fbot #expertBtn svg{ width:15px; height:15px }
/* survol / focus : passage au ROUGE (zone sécurisée) */
.fbot #expertBtn:hover, .fbot #expertBtn:focus-visible{ border-color:#ff3b3b; color:#ff6b6b;
  background:color-mix(in srgb,#ff3b3b 12%,transparent); outline:none; transform:translateY(-1px) }
.fbot #expertBtn:hover svg, .fbot #expertBtn:focus-visible svg{ color:#ff5252 }
/* onde radar rouge (réutilise le ::after de ping, teinté rouge) */
.fbot #expertBtn::after{ border-color:rgba(255,59,59,.6) }
/* état actif (cockpit ouvert) : accent magenta discret */
.fbot #expertBtn.on{ border-color:var(--magenta); color:#ffd7ee }
.fbot #expertBtn.on:hover, .fbot #expertBtn.on:focus-visible{ border-color:#ff3b3b; color:#ff6b6b }
/* avertissement sci-fi affiché au survol / focus, au-dessus du bouton */
.fbot #expertBtn::before{ content:attr(data-warn); position:absolute; bottom:calc(100% + 11px); left:50%;
  transform:translateX(-50%) translateY(5px);
  background:var(--surface); color:#ff5252; border:1px solid #ff3b3b; border-radius:9px; padding:6px 12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:none; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow:0 12px 28px -10px rgba(255,40,40,.55); z-index:130 }
.fbot #expertBtn:hover::before, .fbot #expertBtn:focus-visible::before{ opacity:1; transform:translateX(-50%) translateY(0) }
@media(prefers-reduced-motion:reduce){ .fbot #expertBtn::before{ transition:none } .fbot #expertBtn:hover{ transform:none } }

/* ============================================================
   v0.2.3 — Correctifs UAT (issues #40, #43, #59, #58)
   ============================================================ */

/* #40 — Skin FluentForms : le markup réel est .ff-* (pas .qform/.booking morts).
   On mappe inputs / labels / submit sur les tokens de marque. */
.frm-fluent-form .ff-el-input--label,
.frm-fluent-form .ff-el-form-check-label{ color:var(--text); font-size:15px; font-weight:600; font-family:var(--display) }
.frm-fluent-form .ff-el-form-control{
  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); box-shadow:none;
}
:root[data-theme="dark"] .frm-fluent-form .ff-el-form-control{ background:rgba(255,255,255,.05) }
.frm-fluent-form .ff-el-form-control:focus{ outline:none; border-color:var(--accent); box-shadow:none }
.frm-fluent-form textarea.ff-el-form-control{ min-height:120px; resize:vertical }
.frm-fluent-form .ff-el-form-check input[type=radio],
.frm-fluent-form .ff-el-form-check input[type=checkbox]{ accent-color:var(--accent) }
.frm-fluent-form .ff-el-is-required.asterisk-right:after,
.frm-fluent-form .asterisk-right:after{ color:var(--accent) }
/* Bouton submit = bouton de marque (neutralise le bleu FluentForms par défaut) */
.frm-fluent-form .ff-btn-submit{
  background:var(--accent) !important; border:0 !important; color:#fff !important;
  font-family:var(--display); font-weight:700; font-size:15px; padding:14px 26px;
  border-radius:100px; cursor:pointer; box-shadow:none;
}
.frm-fluent-form .ff-btn-submit:hover{ filter:brightness(1.06) }

/* #43 — Newsletter (footer, form 2) : bouton en GHOST (bordure, pas d'aplat) */
.news .frm-fluent-form .ff-btn-submit{
  background:transparent !important; border:1px solid var(--border-strong) !important; color:var(--text) !important;
}
.news .frm-fluent-form .ff-btn-submit:hover{ border-color:var(--accent) !important; color:var(--accent) !important; filter:none }

/* #59 — Bloc « engagements » : icône À CÔTÉ du titre (pas au-dessus), desc pleine largeur */
.yhb-formules .ec{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:6px; align-items:center }
.yhb-formules .ec .ei{ grid-row:1; grid-column:1 }
.yhb-formules .ec .eh{ grid-row:1; grid-column:2; margin:0 }
.yhb-formules .ec .ed{ grid-column:1 / -1 }

/* #58 — Cartes Décollage/Orbite (grille g2) : garantie + CTA alignés en bas.
   La liste de puces absorbe l'espace (flex-grow) pour que garantie+CTA se posent
   au même niveau malgré un nombre de puces / une longueur de texte différents. */
.yhb-formules .grid.g2 .card{ display:flex; flex-direction:column }
.yhb-formules .grid.g2 .card ul{ flex:1 0 auto }
.yhb-formules .grid.g2 .guar{ margin-top:0 }

/* #67 — État actif du menu en accent (rose), desktop + tiroir mobile.
   Force au-dessus des règles génériques --text/--uni qui l'écrasaient. */
header .menu .navlink.on{ color:var(--accent); position:relative }
header .menu .navlink.on::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; background:var(--accent); border-radius:2px }
.drawer .drawer-top.on{ color:var(--accent) }

/* #66 — Cartes Trajectoires en tactile : l'état .open (posé au 1er tap) révèle
   le détail, comme le survol desktop. Sur (hover:none) uniquement. */
@media (hover: none){
  .trajs .tcard.open .tjr-reveal{ grid-template-rows:1fr; opacity:1 }
  .trajs .tcard.open .tjr-cue{ opacity:1; transform:rotate(135deg) }
}

/* #71 — Teaser « Le Noyau » : aligner Mission/Vision/Valeurs + retrait pendant
   (les valeurs qui passent à la ligne restent dans leur colonne, pas de retour marge). */
.noyau-adn p{ padding-left:74px; text-indent:-74px }
.noyau-adn .adn-k{ display:inline-block; width:74px; margin-right:0; text-indent:0 }

/* #73 — Écusson Renaissance 69 (carte voix) : version centrée autoportante (contain). */
.media-card .mc-cover.r69 img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block }

/* #77 — Plan d'accès : vraie carte Google Maps (iframe remplit .acc-map). */
.acc-map{ border:0; padding:0; overflow:hidden }
.acc-map::before{ display:none }
.acc-map iframe{ width:100%; height:100%; min-height:inherit; border:0; display:block }

/* #76.1 — Bouton .octa (bande Odyssée, accueil Formules + page Odyssée) en pilule,
   cohérent avec les CTA .btn.btn-solid. Override final (bat la règle contour 10px). */
.yhb-formules .ody .octa{ border-radius:100px }

/* #58 — Cartes Décollage/Orbite : égaliser la hauteur du bloc garantie (copie de
   longueur différente) pour aligner aussi le HAUT des blocs, pas seulement le bas. */
.yhb-formules .grid.g2 .guar{ min-height:104px }

/* #78 — Newsletter footer (FluentForms id 2) : champ ~2/3 · bouton ~1/3, bouton pilule.
   On garde la mise en page native FF (cellules côte à côte) et on ajuste les largeurs
   (width + flex-basis pour couvrir flex OU table). FF impose radius 7px -> !important. */
.news .frm-fluent-form .ff-t-cell{ padding:0 }
.news .frm-fluent-form .ff-t-cell.ff-t-column-1{ width:64% !important; max-width:64% !important; flex:0 0 64% }
.news .frm-fluent-form .ff-t-cell.ff-t-column-2{ width:36% !important; max-width:36% !important; flex:0 0 36% }
.news .frm-fluent-form .ff-el-group{ margin:0 }
.news .frm-fluent-form .ff-el-form-control{ width:100%; border-radius:100px !important }
.news .frm-fluent-form .ff-btn-submit{ border-radius:100px !important; width:100%; white-space:nowrap; padding-left:14px; padding-right:14px }

/* #82 — Sous-pages Trajectoires : retirer la flèche à côté des numéros des boîtes « gains ». */
.tgain-arr{ display:none }


/* #91 — Sélecteur de langue : items EN/DE (spans .soon du switcher WP) au même corps que les liens,
   changement de couleur seul au survol (pas d'agrandissement). */
.lang .submenu .soon{ display:block; padding:7px 14px; font-size:11px; letter-spacing:.1em; color:var(--text-soft); white-space:nowrap; cursor:default; transform:none }
.lang .submenu .soon:hover{ color:var(--accent); transform:none }

/* #148 Ambassadeurs — formulaire FluentForms compact & centré (proto = 600px) ; paires alignées desktop (Prénom/Nom, E-mail/Téléphone) */
.amb-form-sec .frm-fluent-form{ max-width:600px; margin:26px auto 0; }
.amb-form-sec .frm-fluent-form fieldset{ border:0; padding:0; margin:0; min-width:0; }
.amb-form-sec .frm-fluent-form .ff_submit_btn_wrapper{ text-align:center; }
@media(min-width:561px){
  .amb-form-sec .frm-fluent-form fieldset{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:0; }
  .amb-form-sec .frm-fluent-form fieldset > *{ grid-column:1 / -1; }
  .amb-form-sec .frm-fluent-form fieldset > .ff-el-group:nth-of-type(1){ grid-column:1 / 2; }
  .amb-form-sec .frm-fluent-form fieldset > .ff-el-group:nth-of-type(2){ grid-column:2 / 3; }
  .amb-form-sec .frm-fluent-form fieldset > .ff-el-group:nth-of-type(4){ grid-column:1 / 2; }
  .amb-form-sec .frm-fluent-form fieldset > .ff-el-group:nth-of-type(5){ grid-column:2 / 3; }
}

/* Thème verrouillé via URL (?theme=…&lock) : masquer le bouton de bascule jour/nuit */
:root[data-theme-lock] #themeBtn{ display:none !important }

/* ===== KPI · bascule écosystème → interlocuteur (V2, trait vertical) ===== */
/* 20+ Marques · 30+ Partenaires │ 1 Un seul interlocuteur — le « 1 » détaché par un filet, libellé en accent */
.kpis.kpis-flip{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(30px,5vw,58px); flex-wrap:wrap }
.kpis.kpis-flip .kvsep{ align-self:center; width:1px; height:58px; background:var(--border-strong); flex:0 0 auto }
.kpis.kpis-flip .kpi{ flex:0 0 auto }
.kpis.kpis-flip .kpi.kflip .lab{ color:var(--accent) }
@media(max-width:640px){
  .kpis.kpis-flip{ gap:24px }
  .kpis.kpis-flip .kvsep{ display:none }
}