/* ==========================================================================
   HERO — texte à gauche, visuel sur la moitié droite.
   Calques : fond · particules · planète + halo · anneaux · logo · relief ·
   silhouette · annotations. Mesures maquette (px de 1086) :
   planète centre 722,195 r 110 · logo 676 → 773 / 133 → 265 ·
   titre x 152, PENSÉ 92, POUR 141, MARQUER. 192 · chiffres y 354.
   ========================================================================== */
.hero{position:relative;min-height:calc(398 * var(--m));padding:calc(59 * var(--m)) 0 calc(12 * var(--m));overflow:hidden;background:#060606;isolation:isolate}

/* ---- fond ---------------------------------------------------------------- */
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__sky{position:absolute;inset:0;background:
  radial-gradient(calc(330 * var(--m)) calc(260 * var(--m)) at calc(735 * var(--m)) calc(200 * var(--m)),rgba(150,14,26,.34),transparent 70%),
  radial-gradient(calc(260 * var(--m)) calc(200 * var(--m)) at calc(1000 * var(--m)) calc(70 * var(--m)),rgba(70,70,76,.20),transparent 70%),
  radial-gradient(calc(420 * var(--m)) calc(160 * var(--m)) at calc(900 * var(--m)) calc(380 * var(--m)),rgba(120,10,20,.28),transparent 70%),
  radial-gradient(calc(300 * var(--m)) calc(200 * var(--m)) at calc(60 * var(--m)) calc(260 * var(--m)),rgba(90,8,16,.18),transparent 70%)}
.hero__streak{position:absolute;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(246,43,62,.55),transparent);filter:blur(1.2px);opacity:.55;transform-origin:left center}
.hero__streak--a{left:calc(38 * var(--m));top:calc(192 * var(--m));width:calc(110 * var(--m));transform:rotate(24deg)}
.hero__streak--b{left:calc(8 * var(--m));top:calc(318 * var(--m));width:calc(90 * var(--m));transform:rotate(-12deg);opacity:.35}
.hero__bokeh{position:absolute;border-radius:50%;background:rgba(246,43,62,.55);filter:blur(3px)}
.hero__bokeh--a{left:calc(38 * var(--m));top:calc(200 * var(--m));width:calc(7 * var(--m));height:calc(7 * var(--m))}
.hero__bokeh--b{left:calc(120 * var(--m));top:calc(252 * var(--m));width:calc(6 * var(--m));height:calc(6 * var(--m));opacity:.6}
.hero__particles{position:absolute;inset:0;width:100%;height:100%}

/* ---- planète, halo, anneaux, logo --------------------------------------- */
.hero__orbit{position:absolute;left:calc(516 * var(--m));top:calc(-14 * var(--m));width:calc(420 * var(--m));height:calc(420 * var(--m))}
.hero__halo{position:absolute;inset:calc(96 * var(--m));border-radius:50%;box-shadow:0 0 calc(34 * var(--m)) calc(6 * var(--m)) rgba(246,43,62,.36),0 0 calc(110 * var(--m)) calc(20 * var(--m)) rgba(200,20,36,.22)}
.hero__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__rings .r{fill:none;stroke-linecap:round}
.hero__rings .ring-in{transform-origin:210px 210px}
.hero__rings .spin{transform-origin:210px 210px;animation:orbit 140s linear infinite}
.hero__rings .spin--rev{animation-duration:220s;animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
.hero__planet{position:absolute;left:calc(98 * var(--m));top:calc(98 * var(--m));width:calc(224 * var(--m));height:calc(224 * var(--m));border-radius:50%;overflow:hidden}
.hero__planet img{width:100%;height:100%;filter:brightness(.5) saturate(1.05) contrast(1.12)}
/* la planète tourne sur elle-même, l'ombre et la lumière restent fixes (Yann, 10/10) : la surface
   (hero-planet-surface.webp, éclairage aplani par tools/planete-texture.py) tourne sous le voile ::after */
.hero__planet img{animation:hSpin 60s linear infinite;will-change:transform}
@keyframes hSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero__planet img{animation:none}}
.hero__planet::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 76% 24%,rgba(255,64,76,.17),transparent 48%),radial-gradient(circle at 36% 58%,rgba(4,2,3,.9),rgba(4,2,3,.62) 38%,rgba(4,2,3,.18) 62%,transparent 74%),radial-gradient(circle at 80% 22%,transparent 55%,rgba(255,70,80,.18) 72%,transparent 80%);box-shadow:inset calc(-6 * var(--m)) calc(4 * var(--m)) calc(12 * var(--m)) rgba(255,60,72,.32)}
.hero__logo{position:absolute;left:calc(157 * var(--m));top:calc(149 * var(--m));width:calc(100 * var(--m));height:auto;filter:drop-shadow(0 0 calc(10 * var(--m)) rgba(0,0,0,.55))}

/* ---- relief et silhouette ----------------------------------------------- */
.hero__relief{position:absolute;left:calc(520 * var(--m));top:calc(200 * var(--m));width:calc(566 * var(--m));height:calc(198 * var(--m));max-width:none;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hero__figglow{position:absolute;left:calc(760 * var(--m));top:calc(170 * var(--m));width:calc(230 * var(--m));height:calc(200 * var(--m));background:radial-gradient(closest-side,rgba(230,36,52,.55),rgba(200,20,36,.22) 55%,transparent);filter:blur(calc(6 * var(--m)))}
.hero__figure{position:absolute;left:calc(842 * var(--m));top:calc(227 * var(--m));width:calc(74 * var(--m));height:auto;max-width:none;filter:brightness(.42) contrast(1.25)}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:calc(70 * var(--m));background:linear-gradient(transparent,rgba(6,6,6,.85))}

/* ---- annotations ---------------------------------------------------------- */
.hero__note{position:absolute;z-index:2;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:2.1}
.hero__note--a{left:calc(846 * var(--m));top:calc(55 * var(--m))}
.hero__note--b{left:calc(957 * var(--m));top:calc(161 * var(--m))}
.hero__note--b li{text-decoration:underline;text-decoration-color:rgba(245,243,238,.35);text-underline-offset:3px}
.hero__note--c{left:calc(558 * var(--m));top:calc(263 * var(--m))}
.hero__tick{position:absolute;z-index:2;width:1px;background:linear-gradient(transparent,var(--line-2) 25%,var(--line-2) 75%,transparent)}
.hero__tick--c{left:calc(540 * var(--m));top:calc(212 * var(--m));height:calc(110 * var(--m))}
.hero__tick--r{left:calc(1040 * var(--m));top:calc(180 * var(--m));height:calc(110 * var(--m))}
.hero__idx{position:absolute;z-index:2;left:calc(535 * var(--m));top:calc(326 * var(--m));font-family:var(--f-mono);font-size:var(--fs-nano);color:var(--red);letter-spacing:.08em}
.hero__rail{position:absolute;left:calc(82 * var(--m));top:calc(65 * var(--m));height:calc(84 * var(--m));width:1px;background:linear-gradient(var(--line-2),rgba(255,255,255,.07))}
.hero__rail::after{content:"+";position:absolute;left:50%;top:100%;transform:translate(-50%,10%);font:300 12px/1 var(--f-text);color:var(--ink-3)}

/* ---- texte ---------------------------------------------------------------- */
.hero__content{position:relative;z-index:3;padding-left:calc(152 * var(--m));max-width:max(calc(560 * var(--m)),calc(152 * var(--m) + var(--mins) * 420px));min-height:calc(273 * var(--m))}
.hero__badge{display:inline-flex;align-items:center;gap:max(calc(var(--mins) * 9px),calc(6 * var(--m)));margin-left:calc(-17 * var(--m));padding:max(calc(var(--mins) * 5px),calc(3 * var(--m))) max(calc(var(--mins) * 12px),calc(7 * var(--m))) max(calc(var(--mins) * 5px),calc(3 * var(--m))) max(calc(var(--mins) * 10px),calc(6 * var(--m)));border:1px solid var(--line-2);border-left-color:rgba(246,43,62,.5);background:linear-gradient(90deg,rgba(246,43,62,.08),transparent 40%);font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--red);line-height:1.3}
.hero__badge .dot{width:5px;height:5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px rgba(255,210,31,.7);flex:none}
.hero__title{margin-top:max(calc(var(--mins) * 16px),calc(17 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:calc(var(--fs-h1) * 1.2);line-height:.815;letter-spacing:.02em;text-transform:uppercase}
.hero__title .t-pense,.hero__title .t-pour{-webkit-text-stroke:.018em currentColor}
.hero__title > span{display:block}
.hero__title .t-pense{color:var(--ink)}
.hero__title .t-pour{-webkit-text-stroke-color:var(--red)}
.hero__title .t-pour{color:var(--red)}
.hero__title .t-marquer{color:transparent;-webkit-text-stroke:max(1px,calc(1.1 * var(--m))) var(--ink);paint-order:stroke}
.hero__lede{margin-top:max(calc(var(--mins) * 18px),calc(11 * var(--m)));max-width:max(calc(var(--mins) * 400px),calc(232 * var(--m)));font-size:var(--fs-body);line-height:1.62;color:var(--ink-2)}
.hero__lede strong{color:var(--ink);font-weight:500}
.hero__ctas{display:flex;flex-wrap:wrap;gap:max(calc(var(--mins) * 12px),calc(13 * var(--m)));margin-top:max(calc(var(--mins) * 26px),calc(14 * var(--m)))}
.hero__ctas .btn--red{min-width:calc(117 * var(--m))}
.hero__ctas .btn--ghost{min-width:calc(97 * var(--m))}

/* ---- chiffres -------------------------------------------------------------- */
.stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,max(calc(119.5 * var(--m)),calc(var(--mins) * 158px)));margin-top:max(calc(var(--mins) * 34px),calc(22 * var(--m)));padding-left:calc(50 * var(--m))}
.stat{position:relative;padding-left:calc(10 * var(--m));min-height:calc(31 * var(--m))}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.45)}
.stat__n{display:flex;align-items:baseline;font-family:var(--f-text);font-weight:400;font-size:max(calc(var(--mins) * 26px),calc(17 * var(--m)));line-height:1;color:var(--red);letter-spacing:-.02em}
.stat__n small{font-size:.6em;margin-left:.06em}
.stat__n svg{height:.62em;width:auto;margin-top:.12em}
.stat__l{display:block;margin-top:max(calc(var(--mins) * 7px),calc(5 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);line-height:1.35}

/* ---- ouverture : rien de long, la page est utilisable tout de suite ------ */
@keyframes hRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes hLine{from{opacity:0;transform:translate3d(0,.5em,0);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}}
@keyframes hFade{from{opacity:0}to{opacity:1}}
@keyframes hPlanet{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes hHalo{0%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hRing{from{opacity:0;transform:rotate(-28deg) scale(.97)}to{opacity:1;transform:none}}
html.js .hdr__logo{animation:hFade .8s var(--ease-out) .2s both}
html.js .hero__badge{animation:hRise .8s var(--ease-out) .4s both}
html.js .hero__title .t-pense{animation:hLine .9s var(--ease-out) .5s both}
html.js .hero__title .t-pour{animation:hLine .9s var(--ease-out) .65s both}
html.js .hero__title .t-marquer{animation:hLine .9s var(--ease-out) .8s both}
html.js .hero__lede{animation:hRise .9s var(--ease-out) 1s both}
html.js .hero__ctas{animation:hRise .9s var(--ease-out) 1.1s both}
html.js .stats{animation:hRise .9s var(--ease-out) 1.2s both}
html.js .hero__planet{animation:hPlanet 1.6s var(--ease-out) .15s both}
html.js .hero__halo{animation:hHalo 1.8s var(--ease-out) 1.1s both}
html.js .hero__rings .ring-in{animation:hRing 2.2s var(--ease-out) 1.1s both}
html.js .hero__particles{animation:hFade 1.6s var(--ease-out) 1.1s both}
html.js .hero__figure{animation:hRise 1.2s var(--ease-out) 1.1s both}
html.js .hero__logo{animation:hPlanet 1.2s var(--ease-out) 1.1s both}
html.js .hero__note,html.js .hero__tick,html.js .hero__idx{animation:hFade 1.4s var(--ease-out) 1.3s both}

/* Parallaxe (pilotée par hero.js, transform seulement) */
.hero [data-depth]{will-change:transform}

/* ==========================================================================
   Tablette et mobile : le visuel passe au-dessus, le texte dessous.
   ========================================================================== */
@media (max-width:1023px){
  .hero{min-height:0;padding:calc(var(--hdr) + 12px) 0 40px}
  .hero__bg{position:relative;inset:auto;height:min(118vw,640px);margin:0 0 -4vw;z-index:0}
  .hero__orbit{left:50%;top:0;width:min(100vw,560px);height:min(100vw,560px);transform:translateX(-50%)}
  .hero__orbit .hero__halo{inset:22.86%}
  .hero__planet{left:23.33%;top:23.33%;width:53.33%;height:53.33%}
  .hero__logo{left:37.38%;top:35.48%;width:23.81%}
  .hero__relief{left:-8vw;right:auto;top:auto;bottom:0;width:116vw;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero__figure{left:auto;right:6vw;top:auto;bottom:15.5vw;width:12vw}
  .hero__figglow{left:auto;right:0;top:auto;bottom:0;width:60vw;height:50vw}
  .hero__fade{height:22%;background:linear-gradient(transparent,#060606 90%)}
  .hero__streak,.hero__bokeh,.hero__note,.hero__tick,.hero__idx,.hero__rail{display:none}
  .hero__content{padding:0 24px;max-width:640px;position:relative;z-index:3}
  .hero__badge{margin-left:0;font-size:10px;letter-spacing:.16em}
  .hero__title{font-size:clamp(62px,18vw,125px)}   /* +20 % (Yann, 10/10) */
  .hero__lede{max-width:520px;font-size:16px}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px 16px;padding:0 24px;margin-top:40px}
  .stat{padding-left:14px;min-height:0}
  .stat__n{font-size:30px}
  .stat__l{font-size:10px}
}
@media (max-width:420px){
  .hero__ctas .btn{flex:1 1 100%}
}