:root{
  --ink:#0D1F22; --bg:#EDF2EF; --paper:#F8FAF8; --panel:#12292D; --muted:#C9D8D4; --accent:#FF6A57;
  --bon:#5FD3A0; --ok:#F2C14E; --crit:#FF8A9B;
  --bon-d:#137248; --ok-d:#8A5A00; --crit-d:#B3203F;
  --pad:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.disp{font-family:'Bricolage Grotesque','DM Sans',sans-serif}
.wrap{width:100%;max-width:1440px;margin:0 auto;overflow:hidden}
.acc-fill{fill:var(--accent)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:28px;letter-spacing:-.02em;text-decoration:none}
.brand .by{font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:.5em;letter-spacing:0;margin-left:4px;opacity:.7}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:16px 28px;border-radius:999px;border:2px solid var(--ink);font-family:inherit;font-size:18px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 -2px rgba(13,31,34,.9)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);font-weight:700}
.btn-dark{background:var(--ink);color:var(--bg);height:60px;font-size:19px;margin-top:6px;padding:0 28px}
.lnk{background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease;text-decoration:none;padding-bottom:3px}
.lnk:hover{background-size:100% 2px}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;padding:32px var(--pad) 72px}
.hero-text{flex:1 1 440px;min-width:0}
.hero h1{margin:0;font-weight:800;font-size:clamp(46px,6.4vw,92px);line-height:.96;letter-spacing:-.035em}
.lead{margin:28px 0 0;font-size:20px;line-height:1.5;max-width:520px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.hero-art{flex:1.15 1 520px;min-width:0}
.stage{position:relative}
.stage svg{width:100%;height:auto;display:block;overflow:visible}
.labels{position:absolute;inset:0;pointer-events:none}
.lab{position:absolute;white-space:nowrap;font-size:clamp(12px,1.55vw,21px);font-weight:500;opacity:0;transition:opacity .25s ease}
.lab.on{opacity:1;font-weight:800}
.caption{min-height:40px;margin-top:12px;text-align:center;font-weight:800;font-size:clamp(18px,2vw,26px)}
.caption.lv-bon{color:var(--bon-d)}.caption.lv-ok{color:var(--ok-d)}.caption.lv-crit{color:var(--crit-d)}

.armg{outline:none;cursor:pointer}
.arm{fill:var(--ink);transition:fill .2s ease}
.armg:hover .arm,.armg:focus-visible .arm,.armg.on .arm{fill:var(--accent)}
.suck circle{fill:var(--accent);transition:fill .2s ease}
.armg:hover .suck circle,.armg:focus-visible .suck circle,.armg.on .suck circle{fill:var(--ink)}
.dot{stroke:var(--ink);stroke-width:2;opacity:0;transition:opacity .25s ease,r .2s ease}
.dot-bon{fill:var(--bon-d)}.dot-ok{fill:var(--ok-d)}.dot-crit{fill:var(--crit-d)}
.armg:hover .dot,.armg:focus-visible .dot,.armg.on .dot{opacity:1;r:11px}
.float{animation:bob 6s ease-in-out infinite;transform-origin:50% 40%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.8deg)}}
.blink{animation:blink 5s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

/* bandeau */
.ticker-band{background:var(--accent);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker{display:inline-flex;font-weight:800;font-size:26px;padding:14px 0;letter-spacing:-.01em;animation:slide 38s linear infinite}
.ticker span{padding-right:48px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 8 points */
.points{padding:96px var(--pad) 40px}
.points h2,.report h2,.final h2{margin:0;font-weight:800;font-size:clamp(36px,4.6vw,64px);letter-spacing:-.03em;line-height:1}
.points h2{margin-bottom:48px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease}
.card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 18px 0 -6px var(--ink);background:#fff}
.card .num{font-weight:800;font-size:56px;line-height:1;display:inline-block;transition:color .25s ease,transform .25s ease}
.card:hover .num{color:var(--accent);transform:scale(1.12) rotate(-6deg)}
.card h3{margin:0;font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.card p{margin:0;font-size:16px;line-height:1.5}

/* rapport exemple */
.report{margin-top:72px;background:var(--ink);color:var(--bg);padding:96px var(--pad)}
.report-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.report-left{flex:1 1 420px;min-width:0}
.report h2{margin-bottom:16px}
.report-lead{margin:0 0 40px;font-size:19px;line-height:1.5;max-width:520px;color:var(--muted)}
.score-row{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.ring-box{position:relative;width:220px;height:220px;flex:0 0 220px}
.ring-ok{stroke:var(--ok)}.ring-bon{stroke:var(--bon)}.ring-crit{stroke:var(--crit)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-weight:800;font-size:76px;line-height:.95;letter-spacing:-.04em}
.ring-sub{font-size:15px;color:var(--muted)}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-weight:700;font-size:16px}
.legend li{display:flex;align-items:center;gap:10px}
.dotk{width:14px;height:14px;border-radius:50%}
.f-bon{background:var(--bon)}.f-ok{background:var(--ok)}.f-crit{background:var(--crit)}
.c-bon{color:var(--bon)}.c-ok{color:var(--ok)}.c-crit{color:var(--crit)}
.tiles{flex:1.2 1 460px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{background:var(--panel);border:2px solid rgba(237,242,239,.18);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,border-color .2s ease}
.tile:hover{transform:translateY(-5px);border-color:var(--bg)}
.tile-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tile-name{font-weight:700;font-size:16px}
.tile-num{font-weight:800;font-size:28px;letter-spacing:-.02em}
.bar{height:10px;background:rgba(237,242,239,.14);border-radius:999px;overflow:hidden}
.fill{display:block;height:100%;border-radius:999px}
.w-20{width:20%}.w-60{width:60%}.w-100{width:100%}
.tile-lvl{font-weight:700;font-size:14px}
.metrics{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.metric{padding:24px 28px;gap:0}
.metric-label{font-size:15px;color:var(--muted);font-weight:500}
.metric-val{margin-top:6px;font-weight:800;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.03em}
.unit{font-size:.4em;letter-spacing:0;margin-left:6px}

/* CTA final */
.final{background:var(--accent);padding:88px var(--pad);border-top:2px solid var(--ink)}
.final-grid{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.final-text{flex:1 1 380px;min-width:0}
.final-text h2{margin-bottom:16px}
.final-text p{margin:0;font-size:19px;line-height:1.5;max-width:460px}
.form{flex:1 1 420px;min-width:0;max-width:560px;display:flex;flex-direction:column;gap:14px}
.form label{font-weight:700;font-size:16px}
.form input{height:56px;border:2px solid var(--ink);border-radius:999px;padding:0 24px;font-size:18px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.form-note{margin:0;min-height:1.4em;font-weight:700}

/* pied de page */
.foot{background:var(--ink);color:var(--bg);padding:56px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end}
.foot-brand{font-weight:800;font-size:56px;letter-spacing:-.04em;line-height:1}
.foot p{margin:12px 0 0;font-size:16px;color:var(--muted);max-width:420px;line-height:1.5}
.foot-info{font-size:15px;color:var(--muted);line-height:1.7}

@media (max-width:640px){:root{--pad:20px}.ticker{font-size:20px}.foot-brand{font-size:40px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.blink,.ticker{animation:none}
  .btn,.card,.tile,.lab,.dot,.arm{transition:none}
}

/* positions des étiquettes (générées à partir de la géométrie du poulpe) */
.lab-0{left:19.79%;top:33.28%;transform:translate(-100%,-50%)}
.lab-1{left:18.74%;top:61.56%;transform:translate(-100%,-50%)}
.lab-2{left:24.84%;top:76.72%;transform:translate(-100%,-50%)}
.lab-3{left:52.21%;top:89.06%;transform:translate(0,-50%)}
.lab-4{left:68.00%;top:81.25%;transform:translate(0,-50%)}
.lab-5{left:75.05%;top:70.31%;transform:translate(0,-50%)}
.lab-6{left:79.89%;top:53.59%;transform:translate(0,-50%)}
.lab-7{left:75.37%;top:29.53%;transform:translate(0,-50%)}