/* ===================== KIT ===================== */
.mono{font-family:"Plex",ui-monospace,monospace;font-weight:500;text-transform:uppercase;letter-spacing:.2em}
.serif{font-family:"Fira",sans-serif}
.cam{position:absolute;inset:0;transform-origin:50% 50%}

/* Carton de chapitre */
.chap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.chap .flare{position:absolute;left:50%;top:50%;width:1700px;height:220px;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(50% 3% at 50% 50%,rgba(255,236,210,.95),transparent),radial-gradient(48% 22% at 50% 50%,rgba(240,162,74,.22),transparent 70%),radial-gradient(12% 40% at 50% 50%,rgba(103,139,180,.25),transparent 70%)}
.chap .cnum{font:italic 300 64px/1 "Fira",sans-serif;color:var(--ambre);margin-bottom:18px}
.chap .ctitle{font:300 172px/1 "Fira",sans-serif;letter-spacing:-.035em;color:var(--lum)}
.chap .crule{width:120px;height:2px;margin:46px 0 30px;background:linear-gradient(90deg,var(--bleu),var(--turq),var(--corail),var(--violet),var(--orange),var(--ambre));transform:scaleX(0)}
.chap .csub{font:500 20px/1 "Fira",sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--lum3)}

/* Titre éditorial */
.head{position:absolute;left:140px;top:150px}
.head .eyebrow{display:block;margin-bottom:26px}
.head h2{font:300 84px/1.04 "Fira",sans-serif;letter-spacing:-.035em;color:var(--lum)}
.head h2 .hln{display:block}
.head h2 em{font-style:italic;font-weight:300;color:var(--ambre)}

/* Étiquette CDC */
.cdc{display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 18px 0 0;background:rgba(6,26,36,.78);box-shadow:inset 0 0 0 1px rgba(195,210,214,.2);font:500 19px/1 "Fira",sans-serif;color:var(--lum);white-space:nowrap;position:relative;overflow:hidden}
.cdc b{height:100%;display:flex;align-items:center;padding:0 14px;font:500 15px/1 "Plex",monospace;letter-spacing:.12em;color:var(--void);background:var(--turq)}
.cdc.wait b{background:var(--ambre)}
.cdc i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--turq);transform-origin:left;transform:scaleX(var(--k,0))}
.cdc.wait i{background:var(--ambre)}

/* Fenêtre de navigateur */
.bw{position:absolute;background:#0E2C3A;border-radius:14px;overflow:hidden;box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(195,210,214,.20),0 1px 2px rgba(0,0,0,.4),0 18px 36px -8px rgba(0,0,0,.45),0 60px 120px -20px rgba(0,0,0,.6),0 120px 220px -40px rgba(0,30,45,.55)}
.bw::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.10),transparent 28%,transparent 72%,rgba(0,0,0,.10));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bw .bar{height:40px;display:flex;align-items:center;gap:9px;padding:0 18px;background:linear-gradient(#1B4152,#11313F);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.bw .bar i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(195,210,214,.25) 60%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.bw .bar span{margin-left:22px;padding:6px 16px;border-radius:6px;background:rgba(6,26,36,.55);font:400 15px/1 "Fira",sans-serif;letter-spacing:.04em;color:var(--lum3)}
.bw .vp{position:relative;overflow:hidden}
.bw .vp img{display:block;width:100%;height:auto;transform-origin:50% 0}
.bw .sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);mix-blend-mode:screen;pointer-events:none;transform:translateX(-60%) skewX(-18deg)}

/* ===================== ACTE I — 7AGENCY ===================== */
.ag{color:var(--creme)}
.ag .mono{color:var(--taupe)}
.ag .head .eyebrow{font-family:"Plex",monospace;font-size:16px;letter-spacing:.3em;color:var(--taupe)}
.ag .head h2,.head.ag h2{font:700 104px/.96 "Archivo N",sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--creme)}
.ag .head h2 em,.head.ag h2 em{font-style:normal;color:var(--cuivre)}

/* I.1 ident */
#a1{background:#050403}
#b1 .kq{position:absolute;left:50%;top:50%;width:100px;height:100px;background:var(--void);transform:translate(-50%,-50%) scale(0);z-index:0}
#b1 .chap,#b1 .diag{z-index:1}
#a1 .open{position:absolute;inset:0;width:1920px;height:1080px;transform-origin:50% 40%}
#a1 .src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#a1 .veil{position:absolute;inset:0;background:#000;pointer-events:none}
#a1 .wm{position:absolute;left:0;right:0;top:770px;text-shadow:0 6px 40px rgba(0,0,0,.55);text-align:center;font:700 132px/1 "Archivo N",sans-serif;letter-spacing:.02em;color:var(--creme)}
#a1 .wm .dot{display:inline-block;color:var(--cuivre);transform:scale(0);transform-origin:50% 80%}
#a1 .hair{position:absolute;left:50%;top:936px;width:560px;height:1px;background:linear-gradient(90deg,transparent,rgba(243,239,232,.5),transparent);transform:translateX(-50%) scaleX(0)}
#a1 .lab{position:absolute;left:0;right:0;top:962px;text-align:center;font-size:18px;letter-spacing:.42em;white-space:pre}

/* I.2 positionnement */
#a2 .ghost{position:absolute;right:-40px;top:50%;font:700 1300px/1 "Archivo N",sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(216,204,184,.09)}
#a2 .st,#a2 .st2{position:absolute;left:150px;top:50%;transform:translateY(-50%)}
#a2 .l1{font:700 158px/.98 "Archivo N",sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--creme)}
#a2 .l3{position:relative;display:inline-block;max-width:1640px;font:700 168px/1 "Archivo N",sans-serif;text-transform:uppercase;letter-spacing:-.015em;color:var(--cuivre);text-shadow:0 0 70px rgba(216,95,50,.35)}
#a2 .ul{position:absolute;left:0;right:0;bottom:-18px;height:6px;background:var(--cuivre);transform-origin:left;transform:scaleX(0)}
#a2 .att{margin-top:64px;font-size:18px;letter-spacing:.3em;white-space:pre}

/* I.3 posture */
#a3 .col{position:absolute;top:250px}
#a3 .col.y{left:140px}#a3 .col.n{left:1030px}
#a3 .hd{display:flex;align-items:center;gap:16px;font-size:17px;letter-spacing:.3em;margin-bottom:46px;white-space:pre;color:var(--taupe)}
#a3 .hd i{width:12px;height:12px;background:var(--cuivre)}
#a3 .n .hd i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--taupe)}
#a3 .it{position:relative;font:700 54px/1.24 "Archivo N",sans-serif;text-transform:uppercase;letter-spacing:-.005em;width:fit-content}
#a3 .y .it{color:var(--creme)}
#a3 .n .it{color:var(--champ)}
#a3 .strike{position:absolute;left:-10px;right:-10px;top:52%;height:5px;background:var(--cuivre);transform-origin:left;transform:scaleX(0)}
#a3 .vdiv{position:absolute;left:968px;top:240px;width:1px;height:640px;background:linear-gradient(transparent,rgba(216,204,184,.35),transparent);transform-origin:top;transform:scaleY(0)}

/* I.4 expertises */
#a4 .heart{position:absolute;left:80px;top:225px;width:1120px;height:630px;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
#a4 .link{position:absolute;inset:0;pointer-events:none}
#a4 .link line{stroke-width:2;filter:drop-shadow(0 0 6px currentColor)}
#a4 .core{position:absolute;left:470px;top:900px;font-size:17px;letter-spacing:.32em;display:flex;gap:14px;white-space:nowrap}
#a4 .core b{font-weight:400;color:rgba(154,147,138,.6)}
#a4 .panel{position:absolute;left:1200px;top:0;width:680px;height:1080px}
#a4 .head{left:0;top:150px}
#a4 .head h2{font-size:84px}
#a4 .rows{position:absolute;left:0;top:452px;width:640px}
#a4 .row{position:relative;display:flex;align-items:baseline;gap:22px;height:58px;padding-left:22px;border-top:1px solid rgba(216,204,184,.1)}
#a4 .row i{position:absolute;left:0;top:14px;width:4px;height:30px;background:var(--a);transform-origin:top;transform:scaleY(var(--on,0))}
#a4 .row .n{font-size:17px;color:var(--taupe);width:30px;padding-top:2px}
#a4 .row .t{white-space:nowrap;font:700 32px/58px "Archivo N",sans-serif;text-transform:uppercase;color:color-mix(in srgb,var(--creme) calc(40% + var(--on,0)*60%),transparent);transition:none}
#a4 .row.done .t{color:rgba(243,239,232,.62)}
#a4 .row .g{display:none;font-size:16px;letter-spacing:.2em;color:var(--a);opacity:var(--on,0)}
#a4 .tagline{position:absolute;left:0;top:880px;font-size:17px;letter-spacing:.3em;color:var(--champ);white-space:pre}
#a4 .tags{position:absolute;left:0;top:920px;display:flex;gap:10px}
#a4 .tags span{padding:9px 14px;font-size:16px;letter-spacing:.2em;color:var(--champ);box-shadow:inset 0 0 0 1px rgba(216,204,184,.25)}

/* I.5 méthode */
#a5 .cards{position:absolute;left:140px;top:560px;display:flex;gap:48px}
#a5 .card{position:relative;width:520px;padding-top:34px}
#a5 .card .top{position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cuivre),rgba(216,95,50,.15));transform-origin:left;transform:scaleX(0)}
#a5 .card .n{display:block;font-size:17px;color:var(--cuivre);margin-bottom:22px}
#a5 .card h3{font:700 46px/1.04 "Archivo N",sans-serif;text-transform:uppercase;color:var(--creme);margin-bottom:20px}
#a5 .card p{font:300 25px/1.45 "Fira",sans-serif;color:var(--taupe)}
#a5 .quote{position:absolute;left:140px;bottom:120px;font-size:22px;letter-spacing:.24em;color:var(--champ);white-space:pre}

/* I.6 quatre temps */
#a6 .rail{position:absolute;left:180px;top:560px;width:1380px;height:2px}
#a6 .rail .base{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(216,204,184,.25);transform-origin:left;transform:scaleX(0)}
#a6 .rail .fill{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--cuivre);box-shadow:0 0 18px rgba(216,95,50,.7);transform-origin:left;transform:scaleX(0)}
#a6 .node{position:absolute;top:0;width:380px}
#a6 .node i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:color-mix(in srgb,var(--cuivre) calc(var(--on,0)*100%),#2a2724);box-shadow:0 0 0 6px #070707}
#a6 .node .n{display:block;margin-top:48px;font-size:17px;color:var(--cuivre)}
#a6 .node h3{font:700 46px/1.02 "Archivo N",sans-serif;text-transform:uppercase;color:var(--creme);margin:18px 0 16px;max-width:340px}
#a6 .node p{font:300 23px/1.42 "Fira",sans-serif;color:var(--taupe);max-width:330px}
#a6 .foot{position:absolute;left:180px;bottom:120px;font-size:17px;letter-spacing:.24em;white-space:pre}

/* I.7 outils */
#a7 .cols{position:absolute;left:140px;top:470px;display:flex;gap:40px}
#a7 .col{width:380px}
#a7 .hd{position:relative;font-size:17px;letter-spacing:.3em;color:var(--champ);padding-bottom:20px;margin-bottom:26px;white-space:nowrap}
#a7 .hd b{color:var(--cuivre);margin-right:14px;font-weight:500}
#a7 .hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(216,204,184,.3);transform-origin:left;transform:scaleX(var(--k,0))}
#a7 .tool{display:flex;align-items:center;gap:16px;height:56px}
#a7 .tool i{width:8px;height:8px;background:#9BC6A3;box-shadow:0 0 10px #9BC6A3}
#a7 .tool span{font-size:24px;letter-spacing:.06em;text-transform:none;color:var(--creme);white-space:pre}
#a7 .stmt{position:absolute;left:140px;bottom:110px;font:700 64px/1.05 "Archivo N",sans-serif;text-transform:uppercase;color:var(--creme)}
#a7 .stmt em{font-style:normal;color:var(--cuivre)}

/* I.8 réalisations */
#a8 .persp{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 40%}
#a8 .wall{position:absolute;left:-200px;top:330px;transform-style:preserve-3d}
#a8 .r{display:flex;gap:40px;margin-bottom:96px;width:max-content}
#a8 .tile{position:relative;width:600px}
#a8 .tile img{display:block;width:600px;height:338px;object-fit:cover;border-radius:10px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(216,204,184,.16),0 20px 40px -10px rgba(0,0,0,.6),0 60px 110px -30px rgba(0,0,0,.75)}
#a8 .cap{display:flex;justify-content:space-between;margin-top:18px}
#a8 .cap span{font-size:16px;color:var(--creme);letter-spacing:.2em}
#a8 .cap em{font-style:normal;font-size:16px;color:var(--taupe)}
#a8 .head{top:110px}
#a8 .apt{position:absolute;left:50%;top:50%;width:1920px;height:1080px;overflow:hidden;opacity:0;box-shadow:0 60px 140px rgba(0,0,0,.7)}
#a8 .apt img{width:100%;height:100%;object-fit:cover}
#a8 .apl{position:absolute;left:60px;bottom:56px;padding:14px 20px;background:rgba(5,5,5,.8);color:var(--creme);font-size:22px;letter-spacing:.26em}

/* ===================== ACTE II — VISION ===================== */
#b1 .diag{position:absolute;inset:0}
#b1 .diag .eyebrow{position:absolute;left:140px;top:200px}
#b1 .stats{position:absolute;left:140px;top:330px;display:flex;gap:90px}
#b1 .stat{width:500px}
#b1 .num{font:300 250px/1 "Fira",sans-serif;letter-spacing:-.05em;color:var(--lum);font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
#b1 .num .pc{font-size:110px;margin:26px 0 0 10px;color:var(--lum3)}
#b1 .bar{height:4px;background:rgba(195,210,214,.14);margin:34px 0 34px}
#b1 .bar b{display:block;height:100%;transform-origin:left;transform:scaleX(0)}
#b1 .stat p{font:300 34px/1.3 "Fira",sans-serif;color:var(--lum2)}
#b1 .stat p strong{font-weight:600;color:var(--lum)}
#b1 .src{position:absolute;left:140px;bottom:130px;font-size:17px;letter-spacing:.24em;color:var(--lum3);white-space:pre}

#b2 .s1{position:absolute;left:0;right:0;top:330px;text-align:center;font:300 128px/1.08 "Fira",sans-serif;letter-spacing:-.035em}
#b2 .s1 em{font-style:italic;font-weight:300;color:var(--ambre)}
#b2 .s2{position:absolute;left:50%;top:690px;width:1240px;margin-left:-620px;text-align:center;font:300 40px/1.45 "Fira",sans-serif;color:var(--lum2)}
#b2 .s2 b{font-weight:600;color:var(--lum)}

#b3{color:var(--encre)}
#b3 .top{position:absolute;left:0;right:0;top:120px;text-align:center}
#b3 .top .eyebrow{color:var(--encre2);display:block;margin-bottom:22px}
#b3 .top h2{font:300 74px/1.08 "Fira",sans-serif;letter-spacing:-.03em}
#b3 .top .hln{display:block}
#b3 .top em{font-style:italic;font-weight:300;color:var(--marine)}
#b3 .lg{position:absolute;left:210px;top:330px;width:1500px;transform-origin:50% 50%}
#b3 .sq{position:absolute;left:0;top:0;width:50px;height:50px;margin:0}
#b3 .lk{position:absolute;inset:0}
#b3 .lk line{stroke:var(--encre);stroke-width:2;stroke-dasharray:2 7}
#b3 .line{position:absolute;left:0;right:0;top:780px;text-align:center;font:300 54px/1.2 "Fira",sans-serif;letter-spacing:-.02em}
#b3 .line b{font-style:italic;font-weight:300;color:var(--marine)}
#b3 .ideas .idea{position:absolute;top:600px;width:440px;text-align:center}
#b3 .ideas .idea:nth-child(1){left:300px}#b3 .ideas .idea:nth-child(2){left:740px}#b3 .ideas .idea:nth-child(3){left:1260px}
#b3 .idea .n{display:block;font:500 15px/1 "Plex",monospace;letter-spacing:.3em;color:var(--encre2);margin-bottom:20px}
#b3 .idea h3{font:400 46px/1.1 "Fira",sans-serif;letter-spacing:-.02em;margin-bottom:18px}
#b3 .idea p{font:300 26px/1.4 "Fira",sans-serif;color:var(--encre2)}
#b3 .ieb{position:absolute;left:0;right:0;top:220px;text-align:center;color:var(--encre2)}

#b4 .eb{position:absolute;left:140px;top:150px}
#b4 .nl{position:absolute;inset:0}
#b4 .nl line{stroke:rgba(195,210,214,.7);stroke-width:1}
#b4 .field i{position:absolute;left:0;top:0;width:60px;height:60px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
#b4 .cap{position:absolute;left:140px;bottom:170px;display:none}
#b4 .cap .n{display:block;font:500 16px/1 "Plex",monospace;letter-spacing:.3em;color:var(--ambre);margin-bottom:22px}
#b4 .cap .mask{font:300 76px/1.05 "Fira",sans-serif;letter-spacing:-.03em}
#b4 .fin{position:absolute;left:140px;top:250px;font:300 86px/1.08 "Fira",sans-serif;letter-spacing:-.03em}
#b4 .fin em{font-style:italic;font-weight:300;color:var(--ambre)}

/* ===================== ACTE III — DA ===================== */
#c1 .bars{position:absolute;inset:0;display:flex}
#c1 .cb{position:relative;flex:1;height:100%}
#c1 .cb .fillc{position:absolute;inset:0;background:var(--c);transform-origin:bottom;transform:scaleY(0)}
#c1 .cb:first-child .fillc{box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
#c1 .meta{position:absolute;left:28px;right:20px;bottom:120px;color:#fff}
#c1 .meta b{display:block;font:400 40px/1 "Fira",sans-serif;letter-spacing:-.02em;margin-bottom:16px}
#c1 .meta span{display:block;font-size:16px;letter-spacing:.16em;color:rgba(255,255,255,.85);margin-bottom:10px}
#c1 .meta em{display:block;font-style:normal;font-size:16px;letter-spacing:.18em;line-height:1.5;color:rgba(255,255,255,.7)}
#c1 .split{position:absolute;inset:0;opacity:0}
#c1 .split .hl{position:absolute;left:0;top:0;width:960px;height:100%;background:var(--ivoire);transform-origin:top;transform:scaleY(0)}
#c1 .split .hr{position:absolute;left:960px;top:0;width:960px;height:100%;background:radial-gradient(800px 600px at 50% 40%,#0B3346,var(--void));transform-origin:bottom;transform:scaleY(0)}
#c1 .grp i{position:absolute;left:0;top:0}
#c1 .cp{position:absolute;top:640px;font:300 64px/1.1 "Fira",sans-serif;letter-spacing:-.025em}
#c1 .cp em{font-style:italic;font-weight:300}
#c1 .cl{left:140px;color:var(--encre)}#c1 .cl em{color:var(--marine)}
#c1 .cr{left:1100px;color:var(--lum)}#c1 .cr em{color:var(--ambre)}

#c2 .pair{position:absolute;left:0;right:0;top:120px;height:640px}
#c2 .g{position:absolute;top:0;width:820px}
#c2 .ga{left:140px}#c2 .gb{left:1040px}
#c2 .g .mask{font-size:400px;line-height:1;letter-spacing:-.04em;color:var(--lum)}
#c2 .ga .mask{font-family:"Fira",sans-serif;font-weight:300}
#c2 .gb .mask{font-family:"Fira",sans-serif;font-weight:500}
#c2 .lab{margin-top:24px}
#c2 .lab b{display:block;font:500 34px/1 "Fira",sans-serif;margin-bottom:12px}
#c2 .ga .lab b{font:400 40px/1 "Fira",sans-serif}
#c2 .lab span{display:block;font:300 26px/1.3 "Fira",sans-serif;color:var(--lum2);margin-bottom:14px}
#c2 .lab em{font-style:normal;font-size:16px;letter-spacing:.2em;color:var(--lum3)}
#c2 .vd{position:absolute;left:980px;top:40px;width:1px;height:600px;background:linear-gradient(transparent,rgba(195,210,214,.35),transparent);transform-origin:top;transform:scaleY(0)}
#c2 .spec{position:absolute;left:0;right:0;top:340px;text-align:center;white-space:nowrap;font:300 112px/1.05 "Fira",sans-serif;letter-spacing:-.035em}
#c2 .spec em{font-style:italic;font-weight:300;color:var(--ambre)}
#c2 .para{position:absolute;left:50%;top:640px;width:1100px;margin-left:-550px;text-align:center;font:400 36px/1.45 "Fira",sans-serif;color:var(--lum2)}
#c2 .note{position:absolute;opacity:0}
#c2 .note i{position:absolute;left:0;bottom:100%;width:1px;height:80px;background:var(--lum3);transform-origin:bottom;transform:scaleY(0)}
#c2 .note span{display:block;padding:10px 0 0 14px;font-size:17px;letter-spacing:.2em;color:var(--lum3);white-space:pre}
#c2 .n1{left:300px;top:270px}#c2 .n1 i{top:100%;bottom:auto;transform-origin:top;height:60px}#c2 .n1 span{padding:0 0 10px 14px;transform:translateY(-100%)}
#c2 .n2{left:1180px;top:520px}
#c2 .n3{left:410px;top:780px}#c2 .n3 i{height:30px}

#c3 .txt{position:absolute;left:140px;top:200px;width:760px}
#c3 .txt .eyebrow{display:block;margin-bottom:26px}
#c3 .txt h2{font:300 88px/1.04 "Fira",sans-serif;letter-spacing:-.03em}
#c3 .txt h2 .hln{display:block}
#c3 .txt h2 em{font-style:italic;font-weight:300;color:var(--ambre)}
#c3 .cap{margin-top:40px;font:300 30px/1.45 "Fira",sans-serif;color:var(--lum2)}
#c3 .gridl b{position:absolute;background:rgba(195,210,214,.22)}
#c3 .gridl .v{top:266px;width:1px;height:512px;transform-origin:top;transform:scaleY(0)}
#c3 .gridl .h{left:996px;height:1px;width:768px;transform-origin:left;transform:scaleX(0)}
#c3 .sqs i{position:absolute;left:0;top:0;width:80px;height:80px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
#c3 .tog{position:absolute;left:996px;top:840px;display:flex;align-items:center;gap:22px;opacity:0}
#c3 .tog span{font-size:16px;letter-spacing:.14em;text-transform:none;color:var(--lum2)}
#c3 .tog b{position:relative;width:64px;height:34px;border-radius:17px;background:rgba(195,210,214,.25);transition:background .25s}
#c3 .tog b i{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:var(--lum);transition:transform .25s}
#c3 .tog.on b{background:var(--turq)}#c3 .tog.on b i{transform:translateX(30px)}
#c3 .tog em{font-style:normal;font-size:16px;letter-spacing:.2em;color:var(--lum3);opacity:0;transition:opacity .3s}
#c3 .tog.on em{opacity:1}

#c4 .persp{position:absolute;inset:0;perspective:1700px;perspective-origin:30% 50%}
#c4 .strip{position:absolute;left:980px;top:330px;display:flex;gap:44px;transform-style:preserve-3d}
#c4 .fc{width:780px;flex:none}
#c4 .fc img{display:block;width:780px;height:439px;object-fit:cover;box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(195,210,214,.16)}
#c4 .fc span{display:block;margin-top:20px;font-size:17px;letter-spacing:.24em;color:var(--lum3)}
#c4 .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,26,36,.96) 0,rgba(6,26,36,.85) 30%,transparent 55%)}
#c4 .head{top:170px}
#c4 .rows{position:absolute;left:140px;top:720px}
#c4 .ir{display:flex;align-items:center;gap:20px;height:64px;font:300 30px/1 "Fira",sans-serif;color:var(--lum2)}
#c4 .ir b{font-weight:600;color:var(--lum);min-width:270px}
#c4 .ir i{width:60px;height:1px;background:var(--ambre);transform-origin:left;transform:scaleX(0)}
#c4 .zoom{position:absolute;left:50%;top:50%;width:1920px;height:1080px;opacity:0;overflow:hidden;box-shadow:0 60px 140px rgba(0,0,0,.6)}
#c4 .zoom img{width:100%;height:100%;object-fit:cover}

/* ===================== ACTE IV — LE SITE ===================== */
.tagw{position:absolute;left:140px;bottom:110px;display:flex;gap:14px}

#d1 .tw{left:500px;top:120px;width:1360px}
#d1 .tw .vp{height:765px}
#d1 .tw .vp img{position:absolute;left:0;top:0;transform-origin:50% 40%}
#d1 .rail{position:absolute;left:140px;top:190px;width:340px}
#d1 .rail .eyebrow{display:block;font-size:18px;line-height:1.6;margin-bottom:34px;white-space:nowrap}
#d1 .ri{position:relative;display:flex;align-items:baseline;gap:18px;height:62px;border-top:1px solid rgba(195,210,214,.12);padding-top:18px}
#d1 .ri b{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--ambre);transform-origin:left;transform:scaleX(0)}
#d1 .ri .n{font:500 14px/1 "Plex",monospace;letter-spacing:.2em;color:var(--lum3)}
#d1 .ri .t{font:300 34px/1 "Fira",sans-serif;color:var(--lum3);transition:color .2s}
#d1 .ri.on .t{color:var(--lum)}#d1 .ri.on .n{color:var(--ambre)}
#d1 .tags{position:absolute;left:140px;top:740px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#d1 .tags .cdc{font-size:17px}

#d2 .head{top:120px}
#d2 .head h2{font-size:78px}
#d2 .root{position:absolute;left:0;right:0;top:400px;text-align:center}
#d2 .root span{display:inline-block;padding:16px 30px;font:400 32px/1 "Fira",sans-serif;color:var(--void);background:var(--lum)}
#d2 .root em{display:block;margin-top:14px;font:500 14px/1 "Plex",monospace;letter-spacing:.2em;font-style:normal;text-transform:uppercase;color:var(--lum3)}
#d2 .root{top:390px}
#d2 .tr{position:absolute;inset:0}
#d2 .tr path{fill:none;stroke-width:1.5}
#d2 .cols{position:absolute;left:140px;top:580px;display:flex;gap:16px}
#d2 .tc{width:320px}
#d2 .th{display:flex;align-items:center;gap:12px;font:600 26px/1 "Fira",sans-serif;color:var(--lum);margin-bottom:18px}
#d2 .th i{width:14px;height:14px;background:var(--c)}
#d2 .ts{font:300 20px/1.6 "Fira",sans-serif;color:var(--lum2);padding-left:26px;position:relative}
#d2 .ts::before{content:"";position:absolute;left:6px;top:50%;width:10px;height:1px;background:rgba(195,210,214,.4)}
#d2 .stats{position:absolute;right:140px;top:170px;display:flex;gap:56px}
#d2 .stats div{text-align:right}
#d2 .stats b{display:block;font:300 96px/1 "Fira",sans-serif;color:var(--lum);font-variant-numeric:tabular-nums}
#d2 .stats span{font:500 14px/1 "Plex",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--lum3)}
#d2 .tagw{left:auto;right:140px;bottom:96px}

#d3 .head{left:1480px;top:250px}
#d3 .head h2{font-size:64px;white-space:nowrap}
#d3 .pw{left:120px;top:250px;width:1300px}
#d3 .pw .vp{height:731px}
#d3 .ring{position:absolute;left:0;top:0;width:176px;height:176px;box-shadow:inset 0 0 0 3px var(--ambre),0 0 40px rgba(240,162,74,.5);opacity:0}
#d3 .plist{position:absolute;left:1500px;top:510px;width:380px}
#d3 .pi{display:flex;gap:18px;align-items:baseline;height:76px;border-top:1px solid rgba(195,210,214,.14);padding-top:16px;opacity:0}
#d3 .pi .n{font:500 14px/1 "Plex",monospace;color:var(--ambre);letter-spacing:.2em}
#d3 .pi b{display:block;font:400 30px/1.05 "Fira",sans-serif;color:var(--lum)}
#d3 .pi em{display:block;margin-top:6px;font:400 17px/1 "Fira",sans-serif;font-style:normal;color:var(--lum3)}
#d3 .note{margin-top:22px;font:300 21px/1.45 "Fira",sans-serif;color:var(--lum2);opacity:0}
#d3 .tagw{left:1500px;bottom:60px;flex-direction:column;align-items:flex-start;gap:10px}

#d4 .eb{position:absolute;left:140px;top:150px}
#d4 .dual{position:absolute;left:140px;top:250px;display:grid;grid-template-columns:repeat(4,auto);align-items:start;gap:0 90px;transform-origin:0 0}
#d4 .nb{width:auto;padding-top:26px;border-top:1px solid rgba(195,210,214,.25)}
#d4 .nb b{display:block;white-space:nowrap;font:300 200px/1 "Fira",sans-serif;letter-spacing:-.04em;color:var(--lum);font-variant-numeric:tabular-nums}
#d4 .nb span{display:block;max-width:300px;margin-top:18px;font:300 28px/1.35 "Fira",sans-serif;color:var(--lum2)}
#d4 .nb small{font-size:20px;color:var(--lum3)}
#d4 .src{position:absolute;left:140px;bottom:170px;font-size:18px;color:var(--lum3)}
#d4 .ne{font:300 160px/1 "Fira",sans-serif;color:var(--ambre);margin-top:40px}
#d4 .msg{position:absolute;left:140px;top:640px;font:300 64px/1.12 "Fira",sans-serif;letter-spacing:-.025em}
#d4 .msg em{font-style:italic;font-weight:300;color:var(--ambre)}
#d4 .aw{left:900px;top:220px;width:1000px;transform-origin:0 50%}
#d4 .aw .vp{height:640px}
#d4 .hlo{position:absolute;left:0;top:0;width:1000px;height:100%;pointer-events:none;transform-origin:50% 0}
#d4 .hlf{position:absolute;left:112px;width:874px;height:44px;border-radius:4px;box-shadow:inset 0 0 0 2px var(--ambre),0 0 18px rgba(240,162,74,.25);background:rgba(240,162,74,.07);transform-origin:left;opacity:0}
#d4 .hlf span{display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);padding:4px 8px;background:var(--void);font-size:17px;color:var(--ambre);letter-spacing:.2em;white-space:nowrap}
#d4 .msg{top:610px;width:720px;font-size:56px}
#d4 .tagw{bottom:90px}

#d5 .persp{position:absolute;inset:0;perspective:2200px;perspective-origin:60% 40%}
#d5 .wc{left:860px;top:160px;width:1000px}
#d5 .wc .vp{height:780px}
#d5 .wl{left:700px;top:240px;width:800px}#d5 .wl .vp{height:560px}
#d5 .wr{left:1400px;top:240px;width:600px}#d5 .wr .vp{height:520px}
#d5 .head{top:200px;z-index:3}
#d5 .head h2{font-size:80px}
#d5 .caps{position:absolute;left:140px;top:520px;width:470px}
#d5 .cp{margin-bottom:34px;padding-left:20px;border-left:2px solid var(--ambre)}
#d5 .cp b{display:block;font:400 32px/1.1 "Fira",sans-serif;margin-bottom:10px}
#d5 .cp span{font:300 22px/1.45 "Fira",sans-serif;color:var(--lum2)}
#d5 .tagw{flex-direction:column;align-items:flex-start;gap:10px;bottom:90px}
#d5 .shade5{display:none}

#d6 .head{top:260px}
#d6 .facts{position:absolute;left:140px;top:560px}
#d6 .f{display:flex;align-items:center;gap:16px;height:52px;font:300 28px/1 "Fira",sans-serif;color:var(--lum2)}
#d6 .f i{width:10px;height:10px;background:var(--turq)}
#d6 .ph{position:absolute;left:0;top:130px;width:330px;height:714px;padding:14px;border-radius:52px;background:linear-gradient(145deg,#3A4A52 0%,#141F24 38%,#0A1316 62%,#2C3B42 100%);box-shadow:inset 0 0 0 1.5px rgba(220,232,236,.28),inset 0 0 0 4px rgba(0,0,0,.6),inset 0 2px 6px rgba(255,255,255,.12),0 30px 50px -10px rgba(0,0,0,.55),0 90px 160px -30px rgba(0,0,0,.7);margin-left:-165px}
#d6 .ph::after{content:"";position:absolute;inset:14px;border-radius:40px;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 30%)}
#d6 .scr{width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff}
#d6 .scr img{display:block;width:100%;height:auto}
#d6 .notch{position:absolute;left:50%;top:26px;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#05090B}

#d7 .head{top:170px}
#d7 .head h2{font-size:68px}
#d7 .nums{position:absolute;left:140px;top:500px;display:flex;flex-direction:column;gap:22px}
#d7 .nums div{display:flex;align-items:baseline;gap:20px}
#d7 .nums b{font:300 88px/1 "Fira",sans-serif;width:110px;color:var(--lum)}
#d7 .nums span{font:300 28px/1 "Fira",sans-serif;color:var(--lum2)}
#d7 .deck{position:absolute;left:820px;top:170px;width:1000px;height:700px}
#d7 .dk{left:0;top:40px;width:1000px}
#d7 .dk .vp{height:600px}
#d7 .dcaps{position:absolute;left:820px;top:880px;width:1000px;height:100px}
#d7 .dc{position:absolute;left:0;top:0;display:grid;grid-template-columns:110px 300px 1fr;gap:20px;align-items:baseline;opacity:0}
#d7 .dc .n{font:500 17px/1 "Plex",monospace;letter-spacing:.2em;color:var(--ambre)}
#d7 .dc b{font:400 32px/1.1 "Fira",sans-serif}
#d7 .dc p{font:300 22px/1.4 "Fira",sans-serif;color:var(--lum2)}
#d7 .tagw{bottom:100px}

#d8 .head{top:170px}
#d8 .ks{position:absolute;left:140px;top:480px;display:flex;gap:70px}
#d8 .k b{display:block;font:300 170px/1 "Fira",sans-serif;letter-spacing:-.04em;color:var(--lum);font-variant-numeric:tabular-nums}
#d8 .k span{display:block;margin-top:14px;font:300 26px/1 "Fira",sans-serif;color:var(--lum2)}
#d8 .wt{position:absolute;left:140px;top:740px;width:1640px}
#d8 .wt .lb{font-size:18px;color:var(--lum3);margin-bottom:22px}
#d8 .row{display:flex;align-items:center;gap:28px;height:64px}
#d8 .row span{width:100px;font-size:18px;color:var(--lum3)}
#d8 .bb{flex:1;height:30px;background:rgba(195,210,214,.08)}
#d8 .bb b{display:block;height:100%;transform-origin:left;transform:scaleX(0)}
#d8 .w1{background:var(--corail)}#d8 .w2{background:var(--turq)}
#d8 .row em{width:180px;font:300 54px/1 "Fira",sans-serif;font-style:normal;text-align:right}
#d8 .wt p{margin-top:18px;font:300 24px/1.4 "Fira",sans-serif;color:var(--lum3)}
#d8 .tagw{left:auto;right:140px;top:200px;bottom:auto;flex-direction:column;align-items:flex-end;gap:10px}

#d9 .head{top:110px;left:0;right:0;text-align:center}
#d9 .head h2 .hln{display:inline-block;margin:0 .14em}
#d9 .gauges{position:absolute;left:0;right:0;top:380px;display:flex;justify-content:center;gap:90px}
#d9 .gl{position:absolute;left:0;right:0;top:-52px;text-align:center;font-size:18px;color:var(--lum3);white-space:nowrap}
#d9 .g{position:relative;width:330px;text-align:center}
#d9 .g svg{width:330px;height:330px;transform:rotate(-90deg)}
#d9 .g circle{fill:none;stroke-width:6}
#d9 .g .bg{stroke:rgba(195,210,214,.12)}
#d9 .g .fg{stroke:var(--turq);stroke-linecap:butt;filter:drop-shadow(0 0 8px rgba(57,181,170,.6))}
#d9 .g b{position:absolute;left:0;right:0;top:100px;font:300 124px/1 "Fira",sans-serif;letter-spacing:-.04em}
#d9 .g span{display:block;margin-top:20px;font:600 24px/1.2 "Fira",sans-serif}
#d9 .g span em{display:block;font-style:normal;font-weight:300;color:var(--lum3)}
#d9 .side{position:absolute;left:0;right:0;top:820px;display:flex;justify-content:center;gap:110px}
#d9 .s{display:flex;align-items:center;gap:24px;margin:0;max-width:520px}
#d9 .s b{font:300 96px/1 "Fira",sans-serif;min-width:0;color:var(--lum)}
#d9 .s span{font:300 24px/1.35 "Fira",sans-serif;color:var(--lum2)}
#d9 .foot{position:absolute;left:0;right:0;bottom:46px;text-align:center;font-size:17px;color:var(--lum3);white-space:pre}
#d9 .tagw{left:0;right:0;bottom:104px;justify-content:center}

#d10 .head{top:120px}
#d10 .head h2{font-size:80px}
#d10 .mx{position:absolute;left:140px;top:360px;display:grid;grid-template-columns:repeat(7,224px);gap:12px}
#d10 .cell{position:relative;height:112px;padding:16px 16px 0;background:rgba(14,44,58,.7);box-shadow:inset 0 0 0 1px rgba(195,210,214,.12);overflow:hidden}
#d10 .cell b{display:block;font-size:16px;letter-spacing:.14em;color:var(--lum3);margin-bottom:10px}
#d10 .cell span{display:block;font:400 21px/1.22 "Fira",sans-serif;color:var(--lum)}
#d10 .cell i{position:absolute;left:0;bottom:0;width:100%;height:4px;transform-origin:left;transform:scaleX(var(--f,0))}
#d10 .cell.ok i{background:var(--turq)}
#d10 .cell.wait i{background:var(--ambre);box-shadow:0 0 calc(var(--p,0)*24px) var(--ambre)}
#d10 .cell.wait{box-shadow:inset 0 0 0 1px rgba(240,162,74,calc(.15 + var(--p,0)*.5))}
#d10 .cell.ok b{color:var(--turq)}#d10 .cell.wait b{color:var(--ambre)}
#d10 .leg{position:absolute;left:140px;top:870px;display:flex;gap:120px}
#d10 .lg{display:flex;align-items:center;gap:24px}
#d10 .lg b{font:300 150px/1 "Fira",sans-serif;font-variant-numeric:tabular-nums}
#d10 .lg.ok b{color:var(--turq)}#d10 .lg.wait b{color:var(--ambre)}
#d10 .lg span{font:500 26px/1.3 "Fira",sans-serif}
#d10 .lg em{font-style:normal;font-weight:300;font-size:22px;color:var(--lum3)}

#fin .st{position:absolute;left:0;right:0;top:390px;text-align:center;font:300 106px/1.12 "Fira",sans-serif;letter-spacing:-.03em}
#fin .st em{font-style:italic;font-weight:300;color:var(--ambre)}
#fin .sqx{position:absolute;left:50%;top:50%;width:100px;height:100px;background:var(--ivoire);opacity:0}
#fin .lockup{position:absolute;left:0;right:0;top:330px;display:flex;align-items:center;justify-content:center;gap:56px}
#fin .lockup img{width:860px}
#fin .lockup .x{font:300 90px/1 "Fira",sans-serif;color:var(--encre2);opacity:0}
#fin .ag7{font:700 120px/1 "Archivo N",sans-serif;letter-spacing:.01em;color:#0A0A0B;opacity:0}
#fin .ag7 i{font-style:normal;color:var(--cuivre)}
#fin .merci{position:absolute;left:0;right:0;top:640px;text-align:center;font:italic 300 110px/1.1 "Fira",sans-serif;color:var(--marine)}
#fin .cr{position:absolute;left:0;right:0;bottom:170px;text-align:center;color:var(--encre2)}
#fin .url{position:absolute;left:0;right:0;bottom:120px;text-align:center;font-size:17px;color:var(--encre2);white-space:pre}

/* IV.5b — Une section, une entrée */
#d5b .head{top:170px}
#d5b .lede{position:absolute;left:140px;top:470px;width:560px;font:300 28px/1.45 "Fira",sans-serif;color:var(--lum2)}
#d5b .tiles{position:absolute;left:820px;top:170px;width:960px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
#d5b .tile{position:relative;height:200px;padding:34px 34px 0;background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(195,210,214,.16);overflow:hidden;opacity:0}
#d5b .tile .bar{position:absolute;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0)}
#d5b .tile .mono{display:block;font-size:17px;color:var(--lum3)}
#d5b .tile b{display:block;margin-top:26px;font:300 38px/1.1 "Fira",sans-serif;letter-spacing:-.03em;color:var(--lum)}
#d5b .tile .tw{display:inline-block;will-change:transform,filter,clip-path}
#d5b .tile .ln{display:block;height:8px;margin-top:22px;width:78%;background:rgba(195,210,214,.22);transform-origin:left;transform:scaleX(0)}
#d5b .tile .ln.s{width:52%;margin-top:12px}

/* Back-office : la barre de titre nomme chaque écran dans la mosaïque */
#d7 .dk .bar span{font-size:20px;color:var(--lum)}