:root{--bg:#f7f7f5;--card:#fff;--ink:#16181d;--muted:#5f6672;--line:#e3e4e8;--blue:#2457d6;--green:#16794a;--red:#c0392b;--orange:#b86100;--chip:#eef2fb;--shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--card:#171a21;--ink:#eceef2;--muted:#9aa2b1;--line:#2a2f3a;--blue:#7aa2ff;--green:#4cc38a;--red:#ff7b6e;--orange:#f0a24a;--chip:#1e2533;--shadow:none}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px}
a{color:var(--blue)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:18px}.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:700}
nav{display:flex;gap:18px;flex-wrap:wrap}nav a{color:var(--muted);text-decoration:none;font-weight:500}nav a:hover{color:var(--ink)}
main{max-width:1060px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 48px}
h1{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:.2em 0 .3em;letter-spacing:-.02em}h2{font-size:21px;margin:0 0 12px;letter-spacing:-.01em}h3{font-size:16px;margin:0 0 6px}
.lead{color:var(--muted);font-size:18px;max-width:680px}.muted{color:var(--muted)}.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);margin:0 0 18px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.tile:hover{border-color:var(--blue)}.tile b{display:block}
.search{position:relative;max-width:560px;margin:20px 0 8px}.search input{width:100%;font:inherit;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:17px}
.sugg{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:4}.sugg a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}.sugg a:hover,.sugg a:focus{background:var(--chip)}
.head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.tag{background:var(--chip);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--muted)}
.levels{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.levels button{font:inherit;border:0;background:transparent;color:var(--muted);padding:8px 14px;cursor:pointer}.levels button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.levels button:disabled{cursor:not-allowed;opacity:.55}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:14px}
.kpi{font:inherit;text-align:left;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink)}.kpi:hover{border-color:var(--blue)}.kpi .l{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}.kpi .v{font-size:22px;font-weight:650;letter-spacing:-.01em;margin:2px 0}.kpi .d{font-size:13px}
.up{color:var(--green)}.down{color:var(--red)}.warn{color:var(--orange)}.info{color:var(--blue)}
.i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid currentColor;font-size:11px;font-weight:700;color:var(--blue)}
.summary p{margin:.4em 0}.summary ul{margin:.3em 0 .6em;padding-left:20px}.badge{display:inline-block;font-size:12px;border-radius:6px;padding:1px 7px;margin-left:6px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.chart svg{width:100%;height:auto;display:block}.chart text{fill:var(--muted);font-size:11px}.chart .bar{fill:var(--blue)}.chart .neg{fill:var(--red)}.chart .zero{stroke:var(--line)}
.charts{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}thead th{color:var(--muted);font-weight:600}
td button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0;text-decoration:underline dotted var(--muted);text-underline-offset:3px}
.note{border-left:3px solid var(--orange);padding:8px 12px;background:var(--chip);border-radius:6px;font-size:14px}
.panel{position:fixed;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(0,0,0,.12);padding:24px;overflow-y:auto;z-index:10}.panel .close{position:absolute;right:14px;top:10px;font-size:26px;background:none;border:0;color:var(--muted);cursor:pointer}
.prov{font-size:13px;background:var(--chip);border-radius:10px;padding:10px 12px;margin-top:14px}.prov dt{color:var(--muted)}.prov dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:6px 0 0}.prov dd{margin:0;word-break:break-word}
.foot{border-top:1px solid var(--line);padding:20px clamp(16px,4vw,40px);color:var(--muted);font-size:14px;text-align:center}
.cmpsel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.cmpsel select{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:100%}
@media (max-width:600px){.top{gap:8px}nav{gap:12px;font-size:15px}.kpi .v{font-size:19px}}
:root{--c1:#2457d6;--c2:#0f9d8a;--c3:#e08a1e;--c4:#7c4dce;--c5:#9aa3b2}
@media (prefers-color-scheme:dark){:root{--c1:#7aa2ff;--c2:#3cc9b4;--c3:#f0a24a;--c4:#a98bf0;--c5:#69707e}}
.hero{padding:28px 0 8px}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;color:var(--blue);margin:0}
.grad{background:linear-gradient(90deg,var(--c1),var(--c4));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 26px}.stats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.stats b{display:block;font-size:24px;letter-spacing:-.02em}.stats span{font-size:13px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.steps .card{margin:0 0 18px}.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--blue);font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}.chip:hover{border-color:var(--blue)}
.secnav{display:flex;gap:6px;overflow-x:auto;position:sticky;top:61px;z-index:3;background:var(--bg);padding:10px 0;margin:6px 0 10px}.secnav button{font:inherit;font-size:14px;white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}.secnav button:hover{border-color:var(--blue)}
section[id]{scroll-margin-top:120px}.hero2{border-top:3px solid var(--c1)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.two>div{border-radius:12px;padding:14px 16px;border:1px solid var(--line)}.two ul{margin:6px 0 0;padding-left:18px}.two li{margin:6px 0}
.good{border-left:4px solid var(--green)!important}.watch{border-left:4px solid var(--orange)!important}.good h3::before{content:"▲ ";color:var(--green)}.watch h3::before{content:"● ";color:var(--orange)}
.stack{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:8px 0 12px}.stack span{display:block;height:100%}
.c1{background:var(--c1)}.c2{background:var(--c2)}.c3{background:var(--c3)}.c4{background:var(--c4)}.c5{background:var(--c5)}
.legend{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart .ln{fill:none;stroke-width:2}.chart polyline.c1,.chart circle.c1{stroke:var(--c1);fill:none}.chart circle{fill:var(--card)!important;stroke-width:2}.chart polyline.c2,.chart circle.c2{stroke:var(--c2)}.chart polyline.c5,.chart circle.c5{stroke:var(--c5)}.chart polyline{background:none}
.chart .c1f{fill:var(--c1)}.chart .c3f{fill:var(--c3)}.chart .c4f{fill:var(--c4)}
.bal{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}.bal>div{display:flex;flex-direction:column;gap:4px}.bal .col{height:170px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:8px;overflow:hidden;background:var(--chip)}.bal .col span{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.bal em{font-style:normal;font-size:11px;color:#fff;padding:0 4px}
main{max-width:1320px}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px;align-items:start}.cols2>.card,.cols2>section{margin-bottom:18px}
.charts{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.secnav button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kpis{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.more{margin-top:12px}.more summary{cursor:pointer;color:var(--blue);font-weight:500;padding:6px 0}
.fils{list-style:none;padding:0;margin:8px 0}.fil{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.fdate{color:var(--muted);font-size:13px}
@media (max-width:600px){.fil{grid-template-columns:1fr}}
.press{background:var(--chip);border-radius:12px;padding:14px 16px}.press .chip{background:var(--card)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}.filters input,.filters select{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}.filters input{flex:1;min-width:200px}
.scr{padding:0;max-height:70vh;overflow:auto}.scr thead th{position:sticky;top:0;background:var(--card);z-index:1}.scr thead th:first-child{z-index:2}.scr th button{font:inherit;font-weight:600;background:none;border:0;color:var(--muted);cursor:pointer;padding:0}.scr th button[aria-sort=descending]::after{content:" ▼";color:var(--blue)}.scr th button[aria-sort=ascending]::after{content:" ▲";color:var(--blue)}.scr td a{text-decoration:none;color:var(--ink)}.scr tbody tr:hover td{background:var(--chip)}
.eu{border-top:3px solid #2a4bd7;background:linear-gradient(180deg,rgba(42,75,215,.06),transparent 120px),var(--card)}.eu h2{color:var(--blue)}
.euf{display:inline-block;width:20px;height:14px;border-radius:2px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23039'/%3E%3Cg fill='%23fc0'%3E%3Ccircle cx='13' cy='6' r='.75'/%3E%3Ccircle cx='12.46' cy='8' r='.75'/%3E%3Ccircle cx='11' cy='9.46' r='.75'/%3E%3Ccircle cx='9' cy='10' r='.75'/%3E%3Ccircle cx='7' cy='9.46' r='.75'/%3E%3Ccircle cx='5.54' cy='8' r='.75'/%3E%3Ccircle cx='5' cy='6' r='.75'/%3E%3Ccircle cx='5.54' cy='4' r='.75'/%3E%3Ccircle cx='7' cy='2.54' r='.75'/%3E%3Ccircle cx='9' cy='2' r='.75'/%3E%3Ccircle cx='11' cy='2.54' r='.75'/%3E%3Ccircle cx='12.46' cy='4' r='.75'/%3E%3C/g%3E%3C/svg%3E") center/cover}h1 .euf{width:34px;height:23px;vertical-align:0}
/* ---------- drapeau européen animé ---------- */
.euhero{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:8px 0 18px;cursor:pointer}.euhero .euflag{width:min(100%,300px);height:auto;border-radius:14px;box-shadow:0 14px 40px rgba(0,38,128,.35)}.euhero>div{flex:1;min-width:260px}.euhero h1{margin-top:4px}
.euhead{display:flex;gap:16px;align-items:center;cursor:pointer;margin-bottom:10px}.euhead h2{margin:0 0 4px}.euflag.sm{width:96px;height:auto;flex:none;border-radius:8px;box-shadow:0 6px 18px rgba(0,38,128,.3)}
.euflag .st{transform-box:view-box;transform-origin:150px 100px;transform:rotate(var(--a)) translateY(-66px) rotate(calc(var(--a) * -1))}
@keyframes eustar{0%{transform:rotate(calc(var(--a) - 720deg)) translateY(0) rotate(calc(720deg - var(--a))) scale(.1);opacity:0}25%{opacity:1}65%{transform:rotate(calc(var(--a) - 80deg)) translateY(-82px) rotate(calc(80deg - var(--a))) scale(1.3)}100%{transform:rotate(var(--a)) translateY(-66px) rotate(calc(var(--a) * -1)) scale(1);opacity:1}}
@keyframes twinkle{50%{opacity:.65}}@keyframes sweep{0%{transform:translateX(0)}55%,100%{transform:translateX(540px)}}
/* ---------- animations du site ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}@keyframes fade{from{opacity:0}}@keyframes grow{from{transform:scaleY(0)}}@keyframes growx{from{transform:scaleX(0)}}@keyframes draw{to{stroke-dashoffset:0}}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}}@keyframes shine{to{background-position:200% center}}@keyframes float{to{transform:translate(-70px,50px) scale(1.2)}}
@media (prefers-reduced-motion:no-preference){
  .euflag .st{animation:eustar 2.8s cubic-bezier(.22,.9,.25,1) var(--d) both}.euflag .st polygon{animation:twinkle 3.2s ease-in-out calc(3.2s + var(--d)) infinite}.euflag .sweep{animation:sweep 5.5s ease-in-out 3s infinite}
  main.enter>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}main.enter>*:nth-child(2){animation-delay:.06s}main.enter>*:nth-child(3){animation-delay:.12s}main.enter>*:nth-child(4){animation-delay:.18s}main.enter>*:nth-child(5){animation-delay:.24s}main.enter>*:nth-child(n+6){animation-delay:.3s}
  .tabp:not([hidden]){animation:rise .4s ease both}.panel:not([hidden]){animation:slidein .28s cubic-bezier(.2,.8,.2,1) both}
  .tile,.kpi,.chip,.stats div{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.tile:hover,.kpi:hover,.stats div:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,30,60,.1)}.chip:hover{transform:translateY(-1px)}
  .chart rect{transform-box:fill-box;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}.chart .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s ease .15s forwards}.chart circle{animation:fade .4s ease 1.2s both}
  .stack span{transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both}.bal .col span{transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
  .grad{background-image:linear-gradient(90deg,var(--c1),var(--c4),var(--c2),var(--c1));background-size:200% auto;animation:shine 7s linear infinite}
  .hero{position:relative;isolation:isolate}.hero::before{content:"";position:absolute;top:-60px;right:-5%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(36,87,214,.16),transparent 65%);z-index:-1;animation:float 10s ease-in-out infinite alternate}
  .hero::after{content:"";position:absolute;top:120px;left:-8%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,206,.12),transparent 65%);z-index:-1;animation:float 13s ease-in-out infinite alternate-reverse}
  .scr tbody tr{animation:fade .35s ease both}
}
/* ---------- ETF : animation diversification ---------- */
.divanim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:center;cursor:pointer}@media (max-width:760px){.divanim{grid-template-columns:1fr}}
.divanim svg{width:100%;height:auto;display:block}.da-note{grid-column:1/-1;margin:0}
.dd{fill:var(--c1)}.da-st{position:relative;height:22px;margin:6px 0 10px;font-weight:600}.da-st span{position:absolute;left:0;opacity:0}.da-st .s3{opacity:1}
.gauge span{font-size:13px;color:var(--muted)}.gauge i{display:block;height:10px;border-radius:6px;margin-top:6px;background:linear-gradient(90deg,var(--c2),var(--c3),var(--red));width:22%}
.da-one{fill:none;stroke:var(--c3);stroke-width:1.6;opacity:.85}.da-etf{fill:none;stroke:var(--c1);stroke-width:3}.da-up{stroke:var(--c1);stroke-width:2.5;stroke-dasharray:3 3}
.crit{display:block;text-decoration:none;color:var(--ink)}.crit:hover{border-color:var(--blue)}code{font-size:13px;background:var(--chip);padding:1px 6px;border-radius:5px}
@keyframes dpop{from{opacity:0;transform:scale(0)}}@keyframes st1{0%,30%{opacity:1}36%,100%{opacity:0}}@keyframes st2{0%,33%{opacity:0}38%,64%{opacity:1}70%,100%{opacity:0}}@keyframes st3{0%,68%{opacity:0}74%,100%{opacity:1}}@keyframes shrink{0%,30%{width:100%}60%{width:55%}100%{width:22%}}@keyframes upin{0%,80%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .dd{transform-box:fill-box;transform-origin:center;animation:dpop .35s cubic-bezier(.3,1.6,.5,1) var(--d) both}
  .da-st .s1{animation:st1 3.6s both}.da-st .s2{animation:st2 3.6s both}.da-st .s3{animation:st3 3.6s both}.gauge i{animation:shrink 3.6s ease-out both}
  .da-one,.da-etf{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s ease .4s forwards}.da-etf{animation-delay:1.2s}.da-up{animation:upin 3.8s ease both}
}
/* ---------- thèmes ---------- */
.sech{margin:6px 0 14px;font-size:24px}.themes{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));margin-bottom:22px}
.thm{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.thm:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,30,60,.14);border-color:var(--blue)}.thm .anim{height:140px;overflow:hidden;background:#0b1a4a}.thm .anim>svg,.thm .anim .euflag{width:100%;height:100%;display:block;border-radius:0;box-shadow:none}
.thb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}.thb h3{margin:0;font-size:17px}.thb p{margin:0}.mini{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px!important}.mini span{font-size:12px;background:var(--chip);border-radius:999px;padding:2px 9px;color:var(--muted)}.cta{color:var(--blue);font-weight:600;margin-top:auto}
.themehero{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:8px 0 18px}.themehero .anim{width:min(100%,380px);height:auto;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(20,30,60,.25)}.themehero .anim svg{width:100%;height:auto;display:block}.themehero>div:last-child{flex:1;min-width:260px}
.allsec{position:static;margin-top:-8px}.allsec summary{cursor:pointer;color:var(--blue);list-style:none;display:flex;align-items:center;gap:8px}.allsec summary::-webkit-details-marker{display:none}.allsec summary::before{content:"▸";transition:transform .2s}.allsec[open] summary::before{transform:rotate(90deg)}.allsec summary b{color:var(--blue)}
.anim-svg text{font-size:10px;font-weight:600}
.sky .sk rect{fill:#d9e3ff}.sky .sk>rect:first-child{fill:#9db4f5}.sky .sk .win{fill:#fff6c9;opacity:.85}.sky text{fill:#c9d6ff}.sky .tw{fill:#fff}
.circ .tr{fill:none;stroke:#1f3b57;stroke-width:3}.circ .pu{fill:none;stroke:#4cf2c8;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 92;stroke-dashoffset:100}.circ .chip{fill:#13273d;stroke:#4cf2c8;stroke-width:2}.circ .chipt{fill:#4cf2c8;font-size:20px;font-weight:700}
.ecgs .grid{stroke:#ffd5d9;stroke-width:1}.ecgs .ecg{fill:none;stroke:#e0263a;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.ecgs .heart{fill:#e0263a;transform-box:fill-box;transform-origin:center}
.bub .b{fill:rgba(255,255,255,.55)}.sunv .rays rect{fill:#ff8c00}.sunv .rays{transform-origin:160px 70px}.sunv .core{fill:#ffcf3a;stroke:#ff9d00;stroke-width:4}
.dm .dd{fill:var(--c1)}.cmpv .ca{fill:#7c4dce;transform-box:fill-box;transform-origin:bottom}.cmpv .cb{fill:#0f9d8a;transform-box:fill-box;transform-origin:bottom}.cmpv text{fill:#5f6672}
@keyframes skgrow{from{transform:scaleY(0)}}@keyframes twk{50%{opacity:.2}}@keyframes pulse{to{stroke-dashoffset:0}}@keyframes ecgrun{0%{stroke-dashoffset:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
@keyframes rise2{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-165px);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{50%{r:25}}@keyframes cswap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}@keyframes cswap2{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .sky .sk{transform-box:fill-box;transform-origin:bottom;animation:skgrow 1s cubic-bezier(.2,.8,.2,1) var(--d) both}.sky .tw{animation:twk 2.4s ease-in-out var(--d) infinite}.sky .win{animation:twk 3s ease-in-out calc(1.2s + var(--w)) infinite}
  .circ .pu{animation:pulse 2.2s linear var(--d) infinite}.ecgs .ecg{animation:ecgrun 2.6s ease-in-out infinite}.ecgs .heart{animation:beat 1.3s ease-in-out infinite}
  .bub .b{animation:rise2 var(--t) ease-in var(--d) infinite}.sunv .rays{animation:spin 14s linear infinite}.sunv .core{animation:glow 2.5s ease-in-out infinite}
  .dm .dd{transform-box:fill-box;transform-origin:center;animation:dpop .35s cubic-bezier(.3,1.6,.5,1) var(--d) both}.cmpv .ca{animation:cswap 3s ease-in-out infinite}.cmpv .cb{animation:cswap2 3s ease-in-out infinite}
}
/* thèmes en bandes pleine largeur : animation à gauche, texte à droite */
.themes{display:flex;flex-direction:column;gap:18px}.thm{flex-direction:row;align-items:stretch;min-height:230px}
.thm .anim{flex:0 0 min(46%,460px);height:auto;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.thm .anim>svg{width:100%;height:100%;object-fit:cover}
.thm .anim .usflag,.thm .anim .euflag{width:100%;height:100%}.thb{padding:26px 30px;justify-content:center;gap:8px}.thb h3{font-size:24px;letter-spacing:-.01em}.thb>p.muted{font-size:16px;max-width:640px;line-height:1.6}.thb .cta{margin-top:6px;font-size:15px}
@media (max-width:760px){.thm{flex-direction:column}.thm .anim{flex:none;width:100%;aspect-ratio:3/2}.thb{padding:18px}.thb h3{font-size:20px}.thb>p.muted{font-size:15px}
  .levels{width:100%}.levels button{flex:1;padding:8px 6px}.secnav{top:93px}.cdesc{font-size:15px}.lead{font-size:16px}h1{font-size:26px}.kpi .v{font-size:18px}.dt th{min-width:110px}.fil{gap:2px}.euhero .euflag,.themehero .anim{width:100%}}
.usflag{display:block}
.themes.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px;margin-bottom:26px}
.themes.grid .thm{flex-direction:column;min-height:0}.themes.grid .thm .anim{flex:none;width:100%;aspect-ratio:16/9}
.themes.grid .thb{padding:14px 16px 16px;gap:6px;justify-content:flex-start}.themes.grid .thb h3{font-size:18px}
.themes.grid .thb>p.muted{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.themes.grid .mini{display:none}
.sech{margin-top:26px}
@keyframes usstar{0%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3);opacity:0}15%{opacity:1}55%{transform:translate(calc(var(--x) * -.25),calc(var(--y) * -.25)) rotate(calc(var(--r) * -1)) scale(1.6)}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){.usflag .str{transform-box:fill-box;transform-origin:left;animation:growx .6s cubic-bezier(.2,.8,.2,1) var(--d) both}.usflag .cant{animation:fade .5s ease .55s both}
  .usflag .s{transform-box:fill-box;transform-origin:center;animation:usstar 2.6s cubic-bezier(.22,.9,.25,1) var(--d) both}.usflag .sweep{animation:sweep 5.5s ease-in-out 3.6s infinite}}
.hero{position:relative;z-index:6}.hero::before,.hero::after{pointer-events:none}.search{z-index:7}.sugg{max-height:320px;overflow-y:auto;overscroll-behavior:contain;z-index:20}
.asia .lan{transform:translate(var(--x),200px)}
@keyframes lan{0%{transform:translate(var(--x),195px)}25%{transform:translate(calc(var(--x) + 8px),140px)}50%{transform:translate(calc(var(--x) - 6px),90px)}75%{transform:translate(calc(var(--x) + 6px),40px)}100%{transform:translate(var(--x),-20px)}}@keyframes sunrise{from{transform:translateY(40px)}}
@media (prefers-reduced-motion:no-preference){.asia .lan{animation:lan var(--t) linear var(--d) infinite}.asia .as-sun{animation:sunrise 2.5s cubic-bezier(.2,.8,.2,1) both}}
@media (prefers-reduced-motion:reduce){.asia .lan{transform:translate(var(--x),70px)}}
.lead2{font-size:16px;max-width:820px;margin:4px 0 16px}.dcard h3{font-size:18px}.dt th{font-weight:500;white-space:normal;min-width:150px}.dt td{white-space:normal}.dt td:first-of-type{white-space:nowrap}.dt th a{color:var(--ink);text-decoration:underline dotted var(--muted);text-underline-offset:3px}
.pill{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;background:var(--chip);margin:2px}
.quiz{margin-top:22px}.qq{padding:12px 0;border-top:1px solid var(--line)}.qq p{margin:0 0 8px}.qo{display:flex;flex-wrap:wrap;gap:8px}
.qo button{font:inherit;font-size:15px;text-align:left;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}.qo button:hover:not(:disabled){border-color:var(--blue)}.qo button:disabled{cursor:default}
.qo .good-a{border-color:var(--green);background:rgba(22,121,74,.12)}.qo .bad-a{border-color:var(--red);background:rgba(192,57,43,.10)}.qe{margin-top:8px!important}.qscore{font-size:17px;margin-top:14px}.qretry{font:inherit;margin-left:8px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--ink);cursor:pointer}
.cdesc{font-size:17px;max-width:760px;margin:4px 0 10px;line-height:1.55}
.wks{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}.wk{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}.wk:hover{border-color:var(--blue);transform:translateY(-2px)}.wk b{font-size:16px}.wk span{font-size:14px}
.sf{display:flex;flex-direction:column;gap:4px;margin:0 0 16px}.sf>span:first-child{font-weight:600;font-size:15px}.sv{display:flex;align-items:center;gap:10px}.sv input{flex:1;accent-color:var(--blue)}.sv output{min-width:64px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bigv{font-size:clamp(32px,5vw,46px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;color:var(--green)}.simtile{margin:0 0 18px;border-left:4px solid var(--green)}.simw .kpi{cursor:default}.simw .kpi .l,.simw .kpi .v,.simw .kpi .d{display:block}.chart .c2f{fill:var(--c2)}.simfee{fill:none;stroke:var(--c3);stroke-width:2.5;stroke-dasharray:6 5}
.simv .sb{transform-box:fill-box;transform-origin:bottom}@keyframes roll{0%{transform:translateX(-280px) rotate(-360deg)}100%{transform:translateX(0) rotate(0)}}
@media (prefers-reduced-motion:no-preference){.simv .sb{animation:skgrow .8s cubic-bezier(.2,.8,.2,1) var(--d) both}.simv .snow{transform-box:fill-box;transform-origin:center;animation:roll 2.2s cubic-bezier(.2,.8,.2,1) both}}
/* ---------- animations supplémentaires ---------- */
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;color:var(--blue)}.rot>span{grid-area:1/1;white-space:nowrap}
@keyframes rin{from{transform:translateY(100%);opacity:0}}@keyframes rout{to{transform:translateY(-100%);opacity:0}}.rot .rin{animation:rin .45s cubic-bezier(.2,.8,.2,1) both}.rot .rout{animation:rout .45s cubic-bezier(.2,.8,.2,1) both}
.ticker{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 0 10px 14px;margin:0 0 18px;overflow:hidden}.tklab{flex:none;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);padding-right:12px;border-right:1px solid var(--line)}
.tkwrap{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.tktrack{display:inline-flex;gap:28px;white-space:nowrap;padding-right:28px}.tk{text-decoration:none;color:var(--ink);font-size:14px}.tk:hover b{color:var(--blue)}
@keyframes tick{to{transform:translateX(-50%)}}
.fact{display:flex;align-items:center;gap:16px;border-left:4px solid #ffcc00}.fico{font-size:30px}.fact>div:nth-child(2){flex:1}.fact .eyebrow{color:#b38f00}.ftxt{margin:4px 0 0;font-size:16px;min-height:48px}.fnav{display:flex;align-items:center;gap:6px}.fnav button{font:inherit;font-size:20px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
@keyframes fin{from{opacity:0;transform:translateY(8px)}}.ftxt.fin{animation:fin .45s ease both}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--rd,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--rd,0ms)}.rv.in{opacity:1;transform:none}.rv:not(.in),.rv:not(.in) *{animation-play-state:paused!important}
.sech{position:relative;display:inline-block}.sech::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c4));transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) .2s}.sech.in::after,.sech:not(.rv)::after{transform:scaleX(1)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c1),var(--c4));transform-origin:left;transform:scaleX(0);z-index:30}
.top{transition:box-shadow .3s}.top.scrolled{box-shadow:0 6px 20px rgba(10,20,50,.08)}.logo{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}.brand:hover .logo{transform:rotate(-12deg) scale(1.12)}
.totop{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:20px;cursor:pointer;opacity:0;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s cubic-bezier(.3,1.6,.5,1);z-index:25;box-shadow:0 8px 24px rgba(0,0,0,.2)}.totop.show{opacity:1;transform:none}.totop:hover{transform:translateY(-3px)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:rip .6s ease-out;pointer-events:none}@keyframes rip{to{transform:scale(2.4);opacity:0}}
.thm .cta{transition:transform .25s}.thm:hover .cta,.tile:hover b{transform:translateX(5px)}.tile b{display:block;transition:transform .25s}.thm.tilt{transition:transform .08s linear,box-shadow .25s}
.sugg li{animation:fin .25s ease both}.sugg li:nth-child(2){animation-delay:.03s}.sugg li:nth-child(3){animation-delay:.06s}.sugg li:nth-child(4){animation-delay:.09s}.sugg li:nth-child(5){animation-delay:.12s}.sugg li:nth-child(n+6){animation-delay:.15s}
.search input{transition:box-shadow .25s,border-color .25s}.search input:focus{box-shadow:0 0 0 4px rgba(36,87,214,.15);border-color:var(--blue)}
.levels button,.secnav button{transition:background .2s,color .2s,transform .15s}.levels button:active,.secnav button:active{transform:scale(.95)}
.kpi:active{transform:scale(.97)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear both}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.skel{display:flex;flex-direction:column;gap:12px;padding-top:10px}.skel i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--chip),var(--line),var(--chip));background-size:200% 100%;animation:shine 1.2s linear infinite}.skrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.skrow i{height:70px}
@media (prefers-reduced-motion:no-preference){.tktrack{animation:tick 70s linear infinite}.ticker:hover .tktrack{animation-play-state:paused}.fico{animation:bob 2.4s ease-in-out infinite alternate}}@keyframes bob{to{transform:translateY(-4px) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.progress{display:none}}
.conv{display:flex;align-items:center;gap:6px;color:var(--muted)}.chart .qcalc{fill:var(--c1);opacity:.45}
/* ---------- studio vidéo ---------- */
body.studio-mode{background:#05070d}body.studio-mode .top,body.studio-mode .foot{display:none}body.studio-mode main{max-width:none;padding-top:14px}
.sbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-bottom:14px;color:#cfd6e6}.sbar a{color:#9fb3ff}.sbar select,.sbar button{font:inherit;font-size:14px;padding:8px 12px;border-radius:10px;border:1px solid #2a3350;background:#121a2e;color:#e8ecf6;cursor:pointer}
.sfmt{display:inline-flex;gap:0}.sfmt button{border-radius:0}.sfmt button:first-child{border-radius:10px 0 0 10px}.sfmt button:last-child{border-radius:0 10px 10px 0}.sfmt button[aria-pressed=true]{background:#2457d6;border-color:#2457d6}
.stage{margin:0 auto;background:radial-gradient(circle at 50% 20%,#1b2a5c,#070b18 70%);color:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3%;padding:5%;box-sizing:border-box}
.stage.v916{aspect-ratio:9/16;height:min(82vh,900px)}.stage.v169{aspect-ratio:16/9;width:min(100%,1200px)}.stage:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto}
.stage h2{font-size:clamp(24px,4.2vh,58px);text-align:center;margin:0;line-height:1.15;letter-spacing:-.02em}.stage .ssub{font-size:clamp(15px,2.4vh,30px);color:#c7d2ff;text-align:center;margin:0}.sbrand{margin:0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(11px,1.6vh,18px);color:#ffcc00}
.stage .sa{width:100%;display:flex;justify-content:center}.stage .sa>svg{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.stage.v169 .sa>svg{width:70%}.stage .sbox{background:#fff;color:#16181d;border-radius:16px;padding:16px;width:100%}.stage .sbox .divanim{grid-template-columns:1fr}
@media (prefers-reduced-motion:no-preference){.stage h2,.stage .ssub,.stage .sbrand{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}.stage .ssub{animation-delay:1.2s}}
body{overflow-x:clip}.steps.crits{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@keyframes popin{from{opacity:0;transform:translateY(16px) scale(.96)}}@keyframes ring{0%{box-shadow:0 0 0 0 rgba(36,87,214,.35)}100%{box-shadow:0 0 0 10px rgba(36,87,214,0)}}
@media (prefers-reduced-motion:no-preference){.crits .crit{animation:popin .5s cubic-bezier(.2,.8,.2,1) both}.crits .crit:nth-child(2){animation-delay:.08s}.crits .crit:nth-child(3){animation-delay:.16s}.crits .crit:nth-child(4){animation-delay:.24s}.crits .crit:nth-child(5){animation-delay:.32s}.crits .crit:nth-child(6){animation-delay:.4s}
  .crits .crit .num{animation:ring 1.4s ease-out .6s 2}.crits .crit:hover .num{background:var(--blue);color:#fff;transition:background .2s,color .2s}}
.lesson{max-width:760px}.lesson ol{padding-left:20px}