/* Genesis Inventions · feuille propre au format « parcours » (s'ajoute à civ.css) */
.inv-bar{position:sticky;top:48px;z-index:50;margin:14px auto 0;width:max-content;max-width:100%;display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:99px;padding:4px;box-shadow:0 2px 14px rgba(0,0,0,.09)}
.inv-bar::-webkit-scrollbar{display:none}
.inv-bar a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:99px;padding:5px 11px 5px 5px;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.inv-bar a b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tile);color:var(--ink3);font-size:12px;font-weight:600}
.inv-bar a:hover{background:var(--tile)}
.inv-bar a.on{background:var(--tile);font-weight:600}
.inv-bar a.on b{background:var(--violet);color:#fff}
@media (max-width:760px){.inv-bar a span{display:none}.inv-bar a.on span{display:inline}.inv-bar a{padding:5px}.inv-bar a.on{padding:5px 12px 5px 5px}}

.inv-hero{position:relative;margin:18px 0 0;border-radius:30px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(24px,4vw,52px);background:linear-gradient(135deg,#f6f6f9 0%,#efe9fa 100%)}
.inv-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.02;font-weight:700;letter-spacing:-.05em;text-wrap:balance}
.inv-hero h1 span{color:var(--violet)}
.inv-hero .lede{margin-top:12px}
.inv-hero .th-tx{width:auto;padding:0;position:static}
.inv-hero.photo{display:block;padding:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.inv-hero .ph-top{--hh:clamp(340px,27.5vw,420px);--iw:min(calc(var(--hh) * 16 / 9),76%);position:relative;min-height:var(--hh);display:flex;align-items:center;padding:clamp(24px,4vw,52px)}
.inv-hero .ph-top>img{position:absolute;top:0;right:0;bottom:0;left:auto;width:var(--iw);height:100%;object-fit:cover;object-position:50% 42%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.inv-hero .ph-top .th-tx{position:relative;z-index:2;width:calc(100% - var(--iw) + 36px);max-width:560px}
.inv-hs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inv-hs .fact{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.inv-hs .fact:first-child{grid-column:1/-1}
.inv-hero.photo .inv-hs{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));padding:4px clamp(12px,2vw,22px) clamp(14px,2vw,22px)}
.inv-hero.photo .inv-hs .fact{background:var(--tile);-webkit-backdrop-filter:none;backdrop-filter:none}
.inv-hero.photo .inv-hs .fact:first-child{grid-column:auto}
@media (max-width:980px){.inv-hero{grid-template-columns:minmax(0,1fr)}.inv-hero .ph-top{min-height:0;flex-direction:column;align-items:stretch;padding:0}.inv-hero .ph-top>img{position:static;width:100%;height:auto;aspect-ratio:16/9;order:-1;-webkit-mask-image:none;mask-image:none}.inv-hero .ph-top .th-tx{max-width:none;padding:22px 20px 6px}}

.scene{padding-top:clamp(52px,7vw,92px)}
.scene-k{display:flex;align-items:center;gap:10px;font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.scene-k b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff;font-size:13px;letter-spacing:0}
.scene h2{font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.045em;margin-bottom:12px}
.scene .sd{margin-bottom:22px}
.scene .hyp{margin-top:0}

/* labos : scène blanche dans un cadre gris */
.lb{background:var(--tile);border-radius:30px;padding:clamp(14px,2.4vw,26px);display:grid;gap:14px;margin:16px 0}
.lb h4{font-size:22px;letter-spacing:-.03em}
.lb-h{font-size:15px;color:var(--ink3);line-height:1.45;max-width:44em}
.lb-stage{background:#fff;border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.lb-stage svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.lb-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.lb-row label{font-size:14.5px;color:var(--ink3);display:flex;gap:10px;align-items:center;flex:1 1 260px;min-width:0}
.lb-row label b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-row input[type=range]{flex:1;min-width:120px}
.lb-read{background:#fff;border-radius:18px;padding:14px 18px;font-size:16px;line-height:1.5;color:#3a3a3c;min-height:3.2em}
.lb-read b{color:var(--ink)}
.lb-meter{height:10px;border-radius:99px;background:#e4e4ea;overflow:hidden;flex:1 1 160px;min-width:120px}
.lb-meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f0b43c,#e2792b)}
.lb-chips{display:flex;flex-wrap:wrap;gap:6px}
.lb-chips button{border:0;background:#fff;border-radius:99px;padding:7px 14px;font-size:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.lb-chips button:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.lb-chips button.on{box-shadow:inset 0 0 0 2px var(--violet);background:var(--violet-s)}
.lb-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.lb-2{grid-template-columns:minmax(0,1fr)}}
.lb-bars{display:grid;gap:6px}
.lb-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;background:#fff;border-radius:14px;padding:9px 14px;font-size:14.5px;color:var(--ink3);transition:box-shadow .2s,color .2s}
.lb-bar b{color:var(--ink)}
.lb-bar.ok{box-shadow:inset 0 0 0 2px var(--green);color:#1d1d1f;background:#f1faf4}

/* frise */
.chr{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.chr li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:start;background:var(--tile);border-radius:24px;padding:16px 20px 18px}
.chr .y{font:700 clamp(20px,2.3vw,26px)/1.05 var(--display);letter-spacing:-.04em;color:var(--violet);font-variant-numeric:tabular-nums}
.chr .y small{display:block;font:600 12px var(--body);color:var(--ink4);letter-spacing:.02em;margin-top:4px}
.chr h4{font-size:19px;letter-spacing:-.025em;margin-bottom:4px}
.chr p{font-size:15.5px;line-height:1.5;color:#424245}
.chr p+p{margin-top:6px}
.chr a.more{display:inline-block;margin-top:6px;font-size:14.5px}
.chr li.pivot{background:#fff;box-shadow:inset 0 0 0 2px rgba(142,68,216,.3)}
@media (max-width:640px){.chr li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* conséquences */
.cons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.cons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cons{grid-template-columns:minmax(0,1fr)}}
.cons .card h4{display:flex;gap:10px;align-items:baseline}
.cons .card h4 i{font-style:normal;font:700 13px var(--body);color:var(--violet);letter-spacing:.04em}

/* bilan */
.quiz{background:var(--tile);border-radius:30px;padding:clamp(16px,2.6vw,28px);display:grid;gap:14px}
.qz-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink3)}
.qz-dots{display:flex;gap:6px}
.qz-dots i{width:10px;height:10px;border-radius:50%;background:#d8d8df}
.qz-dots i.on{background:var(--violet)}
.qz-dots i.done{background:var(--green)}
.qz-q{font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.03em;font-weight:650}
.quiz .hyp-opts button{background:#fff}
.qz-why{background:#fff;border-radius:18px;padding:14px 18px;font-size:15.5px;line-height:1.5;color:#3a3a3c}
.qz-why b{color:var(--green)}
.sticker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:#fff;border-radius:24px;padding:18px 22px}
.sticker svg{width:104px;height:104px;filter:drop-shadow(0 8px 12px rgba(40,30,80,.22));transform:rotate(-6deg)}
.sticker h4{font-size:24px;letter-spacing:-.03em}
.sticker p{font-size:15.5px;color:var(--ink3)}
.sticker.pop svg{animation:stk .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stk{from{transform:scale(.3) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(-6deg);opacity:1}}

/* hub */
.fam{display:grid;gap:12px;margin-top:6px}
.fam+.fam{margin-top:30px}
.fam h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.035em}
.fam>p{font-size:15.5px;color:var(--ink3);margin-top:-6px}
.inv-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.inv-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.inv-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inv-c{position:relative;display:grid;gap:4px;align-content:start;background:var(--tile);border-radius:22px;padding:16px 16px 18px;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;min-height:112px}
.inv-c b{font:650 18px/1.15 var(--display);letter-spacing:-.03em}
.inv-c span{font-size:13.5px;color:var(--ink3);line-height:1.35}
.inv-c em{font:600 12px var(--body);font-style:normal;letter-spacing:.02em;color:var(--ink4)}
a.inv-c:hover{transform:translateY(-3px);background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.inv-c.live{background:#fff;box-shadow:inset 0 0 0 2px var(--violet);min-height:150px}
.inv-c.live em{color:var(--violet)}
.inv-c.live b{font-size:23px}
.inv-c.ext em{color:var(--blue)}
.inv-c.soon{opacity:.6}
.inv-c.got::after{content:"✓";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;display:grid;place-items:center}

/* compléments */
.lb-cap{font-size:14px;color:var(--ink3);margin-top:10px;line-height:1.45}
.fgx-i.l{display:grid;place-items:center;font:700 38px var(--display);color:var(--violet);background:var(--violet-s)}
.cons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.cons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cons{grid-template-columns:minmax(0,1fr)}}
.chr .y.long{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.03em;overflow-wrap:anywhere}
.inv-c.soon{min-height:78px;background:#f9f9fb}
.inv-c.ext{min-height:96px}
.inv-c.live{background:linear-gradient(160deg,#fff 40%,#f1e9fb);align-content:end}
.inv-c.live::after{content:"Ouvrir →";position:absolute;right:16px;top:14px;font:600 13px var(--body);color:var(--violet)}
.inv-c.live.got::after{content:"✓";right:12px;top:12px}