/* ═══════════════════════════════════════════════════════════════
   SITE VITRINE — bilans de compétences de La Bulle d'Équilibre
   Même monde que l'outil : la nuit qui s'éclaircit, le nuage de
   points, titres d'une seule couleur dont les lettres se posent.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --night:#070b16; --deep:#0e1628; --navy:#162035; --gold:#C9A84C; --gold-hi:#f0dc9f; --gold-ink:#8a6d22; --sky:#7BAFD4;
  --text:#e9edf4; --mute:#94a3ba; --line:rgba(233,237,244,.12);
  --cold:#eef2f7; --paper:#fbfaf6; --ink:#162035; --stone:#5b6a80; --pline:#e1e6ee;
  --f-d:'Clash Grotesk','Arial Narrow',system-ui,sans-serif;
  --f-b:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.w{max-width:1200px;margin:0 auto}
.narrow{max-width:780px;margin:0 auto}
.t1{font-family:var(--f-d);font-weight:500;letter-spacing:-.035em;line-height:.95;font-size:clamp(44px,6.6vw,104px);text-wrap:balance}
.t2{font-family:var(--f-d);font-weight:500;letter-spacing:-.03em;line-height:1;font-size:clamp(34px,4.4vw,64px);text-wrap:balance}
.t3{font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;line-height:1.08;font-size:clamp(22px,2vw,28px)}
.t1 .wd,.t2 .wd{display:inline-block;white-space:nowrap}
.t1 .ch,.t2 .ch{display:inline-block}
.lede{font-size:clamp(18px,1.5vw,21px);opacity:.78;max-width:56ch}
.mute{color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
.kicker{font-size:14px;color:var(--gold);font-weight:500;letter-spacing:.01em}

/* en-tête */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
.top.solid{background:rgba(7,11,22,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.top .w{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:15px}
.logo svg{width:30px;height:30px}
.logo small{display:block;font-size:11.5px;color:var(--mute);font-weight:400}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;padding:9px 14px;border-radius:999px;font-size:14.5px;color:var(--mute);transition:color .25s,background .25s}
.nav a:hover{color:var(--text)}
.nav a[aria-current=page]{color:var(--text);background:rgba(255,255,255,.06)}
.nav a.espace{border:1px solid rgba(201,168,76,.45);color:var(--gold-hi);margin-left:6px}
.nav a.cta{background:var(--gold);color:#162035;font-weight:600}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:none;place-items:center;cursor:pointer}
.burger span{display:block;width:18px;height:1.6px;background:var(--text);margin:3px auto;transition:transform .3s}
@media (max-width:900px){
  .burger{display:grid}
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;padding:14px 20px 22px;background:rgba(7,11,22,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .45s var(--e)}
  .nav.open{transform:none}
  .nav a{padding:14px 12px;font-size:17px}
  .nav a.espace,.nav a.cta{margin:6px 0 0;text-align:center}
}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15.5px;text-decoration:none;border:1px solid var(--line);transition:transform .4s var(--e),box-shadow .4s var(--e),background .3s;cursor:pointer;background:none}
.btn.gold{background:linear-gradient(180deg,#e2c773,#c9a84c);color:#162035;border-color:transparent;box-shadow:0 18px 40px -18px rgba(201,168,76,.8)}
.btn.gold:hover{transform:translateY(-2px)}
.btn.ink{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .4s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* héros épinglé */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .cap{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));text-align:center;font-family:var(--f-d);font-size:clamp(18px,1.8vw,26px);letter-spacing:-.01em;transition:opacity .35s;padding:0 20px}
.hero .bar{position:absolute;left:50%;bottom:calc(52px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:6px}
.hero .bar i{width:40px;height:3px;border-radius:2px;background:rgba(233,237,244,.16);overflow:hidden;position:relative}
.hero .bar i b{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.hero .hint{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:13px;color:var(--mute);text-decoration:none;padding:6px 10px}
.hero .hint:hover{color:var(--gold-hi)}
.hero .bar i{cursor:pointer;height:14px;background:none}
.hero .bar i::before{content:"";position:absolute;left:0;right:0;top:5px;height:3px;border-radius:2px;background:rgba(233,237,244,.16)}
.hero .bar i b{top:5px;bottom:auto;height:3px;border-radius:2px}

/* sections */
.sec{position:relative;padding-block:120px}
.sec.tight{padding-block:80px}
.light{background:var(--cold);color:var(--ink);color-scheme:light}
.light .mute,.paper .mute{color:var(--stone)}
.light .lede,.paper .lede{opacity:.85}
.paper{background:var(--paper);color:var(--ink);color-scheme:light}
.intro{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.facts b{font-family:var(--f-d);font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--gold-hi);min-width:2.2ch}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tile{border-radius:22px;padding:26px 24px;background:#fff;border:1px solid var(--pline);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(22,32,53,.45)}
.tile h3{font-family:var(--f-d);font-weight:500;font-size:23px;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.tile p{font-size:15.5px;color:var(--stone)}
.tile .ico{width:44px;height:44px;border-radius:14px;background:var(--navy);display:grid;place-items:center;margin-bottom:18px}
.tile .ico svg{width:22px;height:22px;fill:none;stroke:var(--gold-hi);stroke-width:1.5}
.phases{margin-top:56px;display:grid;gap:0}
.phase{display:grid;grid-template-columns:120px 1fr 1.2fr;gap:30px;padding:34px 0;border-top:1px solid var(--line);align-items:start}
.phase .n{font-family:var(--f-d);font-size:84px;font-weight:300;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--gold)}
.phase h3{font-family:var(--f-d);font-weight:500;font-size:32px;letter-spacing:-.025em;line-height:1}
.phase .h{margin-top:12px;font-size:14px;color:var(--mute)}
.phase ul{margin:0;padding-left:18px;color:var(--text);opacity:.86}
.phase li{margin-bottom:6px}
.prism-box{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.prism-box canvas{width:100%;max-width:480px;aspect-ratio:1;display:block;margin:0 auto;cursor:grab;touch-action:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;background:none;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.chip.on{background:var(--gold);color:#162035;border-color:var(--gold)}
.note{font-size:13.5px;color:var(--mute);margin-top:16px}
.phone{width:340px;max-width:100%;margin:0 auto;padding:11px;border-radius:52px;background:linear-gradient(150deg,#dfe3ea,#939cab 40%,#eceef2 70%,#7f8898);box-shadow:0 60px 100px -50px rgba(22,32,53,.6)}
.phone .s{border-radius:42px;overflow:hidden;background:var(--paper);color:var(--ink);height:640px;display:flex;flex-direction:column}
.phone .hd{background:linear-gradient(160deg,#162035,#24345a);color:#fff;padding:54px 22px 22px}
.phone .hd p{font-size:12.5px;opacity:.75}
.phone .hd h4{font-family:var(--f-d);font-size:32px;font-weight:500;letter-spacing:-.03em;margin-top:4px}
.phone .bd{padding:14px;display:grid;gap:10px}
.phone .mc{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 10px 30px -22px rgba(22,32,53,.45);border:1px solid #eef0f4}
.phone .mc span{font-size:11.5px;color:var(--stone)}
.phone .mc b{display:block;font-family:var(--f-d);font-weight:500;font-size:18px;letter-spacing:-.01em;margin-top:2px}
.list-check{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.list-check li{display:grid;grid-template-columns:26px 1fr;gap:12px}
.list-check li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:3px;background:radial-gradient(circle at center,var(--gold) 0 4px,rgba(201,168,76,.18) 5px)}
.quote{font-family:var(--f-d);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.2;letter-spacing:-.02em;max-width:26ch}

/* formules */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.form{position:relative;border-radius:28px;padding:30px 26px;background:#fff;border:1px solid var(--pline);display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.form.reco{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-10px)}
.form.reco .mute{color:#aab7cb}
.form .badge{position:absolute;top:18px;right:18px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--gold);color:#162035}
.form h3{font-family:var(--f-d);font-weight:500;font-size:30px;letter-spacing:-.025em}
.form .prix{font-family:var(--f-d);font-weight:500;font-size:56px;letter-spacing:-.04em;line-height:1}
.form .prix small{font-family:var(--f-b);font-size:14px;font-weight:400;letter-spacing:0;margin-left:6px;opacity:.7}
.form ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px}
.form li{padding-left:22px;position:relative}
.form li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.form .btn{margin-top:auto;justify-content:center}
.form.reco .btn{background:var(--gold);color:#162035;border-color:var(--gold)}
.ph-split{display:flex;border-radius:12px;overflow:hidden;height:30px;font-size:11.5px;font-weight:600}
.ph-split span{display:grid;place-items:center;color:#162035;white-space:nowrap;overflow:hidden}
.table{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:24px}
.table th{text-align:left;font-weight:600;padding:12px;border-bottom:2px solid var(--ink);font-size:14px}
.table td{padding:12px;border-bottom:1px solid var(--pline);vertical-align:top}
.table td.n,.table th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
.box{border-radius:22px;padding:24px 26px;border:1px solid var(--pline);background:#fff}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--pline)}
.faq details{border-bottom:1px solid var(--pline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 4px;font-family:var(--f-d);font-weight:500;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--pline);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.6px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.6px 12px no-repeat;transition:transform .4s var(--e)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 26px;color:var(--stone);max-width:70ch}
.faq .a p+p{margin-top:10px}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.coord{display:grid;gap:12px;margin-top:26px}
.coord div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;border-radius:16px;border:1px solid var(--pline);background:#fff}
.coord b{font-family:var(--f-d);font-weight:500;font-size:22px;letter-spacing:-.01em;user-select:all}
.coord span{font-size:13px;color:var(--stone)}
.copy{border:1px solid var(--pline);background:none;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer}
form.f{display:grid;gap:14px;padding:30px;border-radius:28px;background:#fff;border:1px solid var(--pline);box-shadow:0 40px 80px -60px rgba(22,32,53,.5)}
.f label{display:grid;gap:7px;font-size:13.5px;color:var(--stone)}
.f input,.f select,.f textarea{width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--pline);background:var(--paper);color:var(--ink);font-size:16px}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,168,76,.15)}
.f .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f .check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px}
.f .check input{width:auto;margin-top:3px;accent-color:var(--navy)}
.f .pot{position:absolute;left:-9999px}
.f .err{color:#b4442f;font-size:14px;min-height:20px}
.ok{padding:30px;border-radius:28px;background:var(--navy);color:#fff}
.ok h3{font-family:var(--f-d);font-weight:500;font-size:30px;letter-spacing:-.02em}
.about{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;margin-top:56px;padding-top:40px;border-top:1px solid var(--pline)}
.about .mk{width:84px;height:84px;border-radius:24px;background:var(--navy);display:grid;place-items:center}

/* pages de texte */
.doc h2{font-family:var(--f-d);font-weight:500;font-size:28px;letter-spacing:-.02em;margin:40px 0 10px}
.doc p,.doc li{color:#3a4658;font-size:16px}
.doc p+p{margin-top:10px}
.pagehead{padding-block:150px 70px}

/* pied */
.foot{background:var(--night);color:var(--mute);padding-block:70px 40px;font-size:14px}
.foot .w{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot a{text-decoration:none;color:var(--text);opacity:.8}
.foot a:hover{opacity:1}
.foot ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;font-size:12.5px;line-height:1.6}
.foot h4{font-family:var(--f-d);color:var(--text);font-weight:500;font-size:18px}

.reveal{transition:transform 1s var(--e),opacity 1s var(--e)}
.reveal.pre{transform:translateY(26px);opacity:.01}

@media (max-width:980px){
  .intro,.grid2,.prism-box,.contact,.foot .w{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3,.formules{grid-template-columns:1fr}
  .form.reco{transform:none}
  .phase{grid-template-columns:70px 1fr;gap:16px}
  .phase .n{font-size:56px}
  .phase ul{grid-column:2}
  .sec{padding-block:84px}
}
@media (max-width:640px){
  body{font-size:16px}
  .top .w{height:60px}
  .nav{inset:60px 0 auto 0}
  .logo small{display:none}
  .hero{height:88svh;min-height:480px}
  .hero .cap{bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:17px}
  .hero .bar{bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  .hero .bar i{width:34px}
  .t1{font-size:clamp(38px,11vw,52px)}
  .t2{font-size:clamp(30px,8.6vw,40px)}
  .lede{font-size:17px}
  .sec{padding-block:68px}
  .sec.tight{padding-block:52px}
  .pagehead{padding-block:110px 40px}
  .grid4{grid-template-columns:1fr;margin-top:34px;gap:12px}
  .tile{padding:22px 20px}
  .facts b{font-size:34px}
  .phases{margin-top:34px}
  .phase{grid-template-columns:52px 1fr;gap:6px 14px;padding:24px 0}
  .phase .n{font-size:46px}
  .phase h3{font-size:25px}
  .phase ul{grid-column:1/-1;margin-top:10px}
  .prism-box canvas{max-width:340px}
  .phone{width:290px;border-radius:44px;padding:9px}
  .phone .s{height:540px;border-radius:36px}
  .formules{margin-top:34px;gap:14px}
  .form{padding:24px 20px}
  .form .prix{font-size:46px}
  .table{font-size:14px}
  .table th,.table td{padding:10px 8px}
  .faq summary{padding:20px 2px;font-size:19px}
  .coord div{flex-wrap:wrap}
  .coord b{font-size:19px;word-break:break-all}
  form.f{padding:22px 18px;border-radius:22px}
  .f .two{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:16px}
  .btn{padding:14px 20px}
  .row .btn{flex:1 1 auto;justify-content:center}
  .quote{font-size:26px}
  .foot{padding-block:52px 32px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.reveal.pre{transform:none;opacity:1}html{scroll-behavior:auto}}