/* ================================================================
   DTONAIR V3 — même film, réalisation supérieure.
   DA : « la nuit de régie » — grain cinéma, langage lumineux
   bleu/cyan/violet, tout respire, rien ne crie.
   Scénario, textes et hiérarchie : STRICTEMENT ceux de la V2.
   ================================================================ */
:root{
  --void:#020409; --deep:#05080F; --panel:#0A0F19; --panel2:#0D1420;
  --line:rgba(140,165,210,.12); --line2:rgba(140,165,210,.22);
  --ink:#F0F4FA; --mut:#8A96AA; --dim2:#576274;
  --sig:#1E63FF; --sig2:#4D8DFF; --sig3:#A9C6FF;
  --tally:#FF3B30; --phos:#2DD4BF; --amber:#F5B544; --viol:#B08CFF;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --disp:-apple-system,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:9px;
  --glow-sig:0 0 0 1px rgba(120,170,255,.42),0 0 90px rgba(30,99,255,.55);
  --ease:cubic-bezier(.19,.7,.22,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font:16px/1.65 var(--disp);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* grain cinéma — au-dessus de tout sauf le boot */
body::after{content:"";position:fixed;inset:-40px;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
::selection{background:rgba(30,99,255,.4)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--sig2);outline-offset:3px;border-radius:6px}
.skip{position:fixed;top:-60px;left:20px;z-index:300;background:var(--sig);color:#fff;padding:10px 18px;border-radius:10px;font-weight:700;transition:top .3s}
.skip:focus{top:14px}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.3em;color:var(--sig2);text-transform:uppercase;display:flex;align-items:center;gap:14px;justify-content:center}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--sig))}
.eyebrow::after{background:linear-gradient(90deg,var(--sig),transparent)}
.h2{font-size:clamp(38px,5.6vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:24px 0 14px;text-wrap:balance;text-align:center}
.h2 .g{background:linear-gradient(120deg,#4D8DFF,#B08CFF 55%,#2DD4BF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mut);font-size:18px;max-width:56ch;margin:0 auto;text-align:center}
.sec{padding:160px 0}
/* respiration entre chapitres : ligne d'horizon lumineuse */
.cine-div{position:relative;height:1px;max-width:680px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(77,141,255,.4),transparent)}
.cine-div::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);background:var(--sig2);box-shadow:0 0 16px rgba(77,141,255,.9)}
/* reveal */
.rv{opacity:0;transform:translateY(30px) scale(.995);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:16px 30px;font-weight:680;font-size:15.5px;transition:transform .3s cubic-bezier(.2,.7,.3,1.4),box-shadow .3s;cursor:pointer;border:0;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px) scale(1.015)}
.btn-sig{background:linear-gradient(180deg,#347BFF,#1E63FF);color:#fff;box-shadow:0 0 0 1px rgba(120,170,255,.4),0 1px 0 rgba(255,255,255,.25) inset,0 18px 46px -14px rgba(30,99,255,.65);animation:btnbreathe 5s ease-in-out infinite}
@keyframes btnbreathe{50%{box-shadow:0 0 0 1px rgba(120,170,255,.55),0 1px 0 rgba(255,255,255,.25) inset,0 22px 60px -14px rgba(30,99,255,.85)}}
.btn-sig::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-sig:hover::after{transform:translateX(120%)}
.btn-ghost{background:rgba(140,165,210,.07);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(140,165,210,.13)}
@media (prefers-reduced-motion:reduce){.btn-sig{animation:none}}
/* ============ BOOT ============ */
#boot{position:fixed;inset:0;z-index:200;background:var(--void);display:grid;place-items:center;transition:opacity .8s,visibility .8s}
#boot.off{opacity:0;visibility:hidden}
#boot .b-in{font:500 13px/2.2 var(--mono);letter-spacing:.18em;color:var(--dim2);min-width:min(420px,84vw)}
#boot .b-in div{opacity:0;transform:translateY(4px);animation:bline .4s forwards}
#boot .b-in div:nth-child(2){animation-delay:.35s}
#boot .b-in div:nth-child(3){animation-delay:.7s}
#boot .ok{color:var(--phos)} #boot .on{color:var(--tally);font-weight:700}
@keyframes bline{to{opacity:1;transform:none}}
/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);background:rgba(2,4,9,.5);transition:background .4s}
.nav.sc{background:rgba(2,4,9,.85)}
.nav .bar{position:absolute;bottom:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--sig),var(--viol),var(--phos));transition:width .15s linear}
.nav-in{max-width:1320px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.06em}
.logo .m{color:var(--sig2);font-size:22px;text-shadow:0 0 20px rgba(30,99,255,.9);animation:logobeat 6s ease-in-out infinite}
@keyframes logobeat{50%{text-shadow:0 0 30px rgba(30,99,255,1)}}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--mut)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:0;background:var(--sig2);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav-cta .login{font-size:14px;color:var(--mut)}
.nav-cta .login:hover{color:var(--ink)}
.nav .btn{padding:10px 20px;font-size:13.5px;border-radius:11px}
@media(max-width:900px){.nav-links{display:none}}
@media (prefers-reduced-motion:reduce){.logo .m{animation:none}}
/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
#globe{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1200px 600px at 50% 122%,rgba(30,99,255,.15),transparent 62%),
  linear-gradient(180deg,rgba(2,4,9,.5),transparent 26%,transparent 60%,var(--void) 97%)}
.hero .flare{position:absolute;top:14%;left:50%;width:min(900px,120vw);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,170,255,.32),transparent);filter:blur(.4px)}
.hero .flare::after{content:"";position:absolute;left:50%;top:-30px;width:120px;height:60px;transform:translateX(-50%);
  background:radial-gradient(60px 26px at 50% 100%,rgba(120,170,255,.2),transparent 70%)}
.hero-in{position:relative;z-index:2;text-align:center;padding:110px 24px 60px;max-width:1060px}
.hero .tag{font:600 12px/1 var(--mono);letter-spacing:.34em;color:var(--sig3);text-transform:uppercase}
.hero h1{font-size:clamp(44px,7.6vw,104px);font-weight:830;letter-spacing:-.04em;line-height:1.0;margin:30px 0 0;text-wrap:balance;
  background:linear-gradient(180deg,#fff 22%,#AFC6F2 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 70px rgba(30,99,255,.3))}
.hero h1 em{font-style:normal;background:linear-gradient(110deg,#4D8DFF,#B08CFF 60%,#2DD4BF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--mut);font-size:clamp(17px,2.1vw,22px);max-width:44ch;margin:26px auto 0;line-height:1.6}
.hero .sub b{color:var(--ink);font-weight:640}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.hero .fine{margin-top:24px;font:500 12px/1.9 var(--mono);letter-spacing:.16em;color:var(--dim2);text-transform:uppercase}
.hud{position:absolute;z-index:3;font:600 11.5px var(--mono);letter-spacing:.16em;color:var(--dim2);display:flex;gap:10px;align-items:center}
.hud.tl{top:88px;left:30px}.hud.tr{top:88px;right:30px}
.hud .dot{width:8px;height:8px;border-radius:50%;background:var(--tally);box-shadow:0 0 12px var(--tally);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@media(max-width:700px){.hud{display:none}}
@media (prefers-reduced-motion:reduce){.hud .dot{animation:none}}
/* ============ COLLAPSE (scroll story) ============ */
.story{position:relative;height:380vh}
.story .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.story .layer{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 24px;pointer-events:none}
.story .t-big{font-size:clamp(42px,7vw,96px);font-weight:820;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.story .t-sub{color:var(--mut);font-size:clamp(15px,1.9vw,20px);margin-top:18px;max-width:52ch}
.story .chip{position:absolute;left:0;top:0;font:600 12.5px var(--mono);letter-spacing:.05em;color:#C4D1E8;background:rgba(12,18,30,.9);box-shadow:inset 0 0 0 1px var(--line2),0 10px 30px -10px rgba(0,0,0,.8);border-radius:11px;padding:10px 16px;white-space:nowrap;will-change:transform,opacity}
.story .core2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font:700 44px var(--mono);color:#fff;
  background:radial-gradient(circle at 35% 30%,#1a2c5e,#0A1020);box-shadow:var(--glow-sig),inset 0 0 30px rgba(30,99,255,.4);opacity:0;will-change:transform,opacity}
.story .endline{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.story .endline i{font:600 12px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--sig3);background:rgba(30,99,255,.12);box-shadow:inset 0 0 0 1px rgba(77,141,255,.4);border-radius:99px;padding:8px 16px}
.story .down{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--dim2);font:600 10px var(--mono);letter-spacing:.34em}
/* ============ PILLARS ============ */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;perspective:1400px}
@media(max-width:920px){.pillars{grid-template-columns:1fr}}
.pill{position:relative;border-radius:var(--r-xl);padding:0;background:linear-gradient(180deg,var(--panel),var(--deep));box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.pill::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 340px at var(--gx,25%) -10%,var(--glow),transparent 62%);transition:opacity .4s;opacity:.85;z-index:1;pointer-events:none}
.pill:hover::before{opacity:1.4}
.pill:hover{box-shadow:inset 0 0 0 1px var(--line2),0 40px 90px -40px rgba(0,0,0,.9)}
.pill .viz{height:230px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pill .body{padding:30px 34px 34px;position:relative;z-index:2}
.pill .idx{font:600 11px var(--mono);letter-spacing:.3em;color:var(--ac)}
.pill h3{font-size:28px;font-weight:780;letter-spacing:-.02em;margin:12px 0 4px}
.pill .role{color:var(--ac);font-weight:620;font-size:14.5px;margin:0 0 10px}
.pill p{color:var(--mut);font-size:14.5px;margin:0;max-width:52ch}
.pill.studio{--ac:#4D8DFF;--glow:rgba(77,141,255,.2)}
.pill.reporter{--ac:#2DD4BF;--glow:rgba(45,212,191,.16)}
.pill.concierge{--ac:#F5B544;--glow:rgba(245,181,68,.13)}
.pill.connectp{--ac:#B08CFF;--glow:rgba(176,140,255,.18)}
/* plan cinéma : mur de moniteurs en perspective (régie & mission control) */
.wall{position:absolute;inset:0;overflow:hidden;opacity:.5}
.wall::before{content:"";position:absolute;left:-20%;right:-20%;top:-46%;height:130%;transform:perspective(600px) rotateX(58deg);
  background:
    repeating-linear-gradient(90deg,rgba(70,120,220,.16) 0 34px,transparent 34px 42px),
    repeating-linear-gradient(0deg,rgba(70,120,220,.13) 0 20px,transparent 20px 27px);
  animation:walldrift 26s linear infinite}
@keyframes walldrift{to{background-position:0 -270px,0 -270px}}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.1),rgba(5,8,15,.92) 78%)}
@media (prefers-reduced-motion:reduce){.wall::before{animation:none}}
/* viz : studio (régie vivante) */
.viz-regie{position:absolute;inset:18px;display:grid;grid-template-columns:1fr 1fr 74px;gap:10px;z-index:1}
.viz-regie .mon{border-radius:10px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line2)}
.viz-regie .mon i{position:absolute;inset:0;background:linear-gradient(115deg,#123068,#0a1830 45%,#12395c);background-size:260% 260%;animation:feed 8s ease-in-out infinite}
.viz-regie .mon.pv i{background:linear-gradient(115deg,#1a2750,#101b33 45%,#26497a);animation-duration:11s}
@keyframes feed{0%,100%{background-position:0 40%}50%{background-position:100% 60%}}
.viz-regie .mon b{position:absolute;top:8px;left:9px;font:700 9px var(--mono);letter-spacing:.2em;padding:3px 7px;border-radius:4px;background:rgba(255,59,48,.9);display:flex;align-items:center;gap:5px}
.viz-regie .mon b::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.3s infinite}
.viz-regie .mon.pv b{background:rgba(45,212,191,.22);color:var(--phos);box-shadow:inset 0 0 0 1px rgba(45,212,191,.5)}
.viz-regie .mon.pv b::before{display:none}
.viz-regie .lt{position:absolute;left:9px;bottom:16px;height:14px;width:56%;border-radius:3px;background:linear-gradient(90deg,var(--sig),transparent);border-left:2px solid #fff;animation:ltin 5s ease-in-out infinite}
@keyframes ltin{0%,18%,92%,100%{transform:translateX(-130%)}30%,80%{transform:none}}
.viz-regie .tln{position:absolute;left:9px;right:9px;bottom:7px;height:3px;border-radius:2px;background:rgba(140,165,210,.14);overflow:hidden}
.viz-regie .tln::after{content:"";position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:2px;background:linear-gradient(90deg,var(--sig2),var(--phos));animation:tprog 8s linear infinite}
@keyframes tprog{from{width:6%}to{width:96%}}
/* banc de faders */
.faders{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(8,12,20,.7);display:flex;gap:9px;align-items:flex-end;justify-content:center;padding:12px 8px 10px}
.faders .f{width:7px;height:100%;border-radius:4px;background:rgba(140,165,210,.12);position:relative}
.faders .f::before{content:"";position:absolute;left:0;right:0;bottom:0;border-radius:4px;background:linear-gradient(180deg,var(--phos),rgba(45,212,191,.25));height:52%;animation:fmove var(--ft,3s) ease-in-out infinite}
.faders .f::after{content:"";position:absolute;left:-4px;right:-4px;height:7px;border-radius:3px;background:#C9D6EE;box-shadow:0 2px 6px rgba(0,0,0,.7);bottom:52%;animation:fcap var(--ft,3s) ease-in-out infinite}
@keyframes fmove{50%{height:var(--fh,70%)}}
@keyframes fcap{50%{bottom:var(--fh,70%)}}
@media (prefers-reduced-motion:reduce){.viz-regie .mon i,.viz-regie .lt,.viz-regie .tln::after,.faders .f::before,.faders .f::after,.viz-regie .mon b::before{animation:none}}
/* viz : reporter (téléphone vivant) */
.viz-rep{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.viz-rep .ph{width:88px;height:164px;border-radius:18px;background:#0B111C;box-shadow:inset 0 0 0 1.5px var(--line2),0 20px 40px -16px rgba(0,0,0,.9);position:relative;overflow:visible}
.viz-rep .ph .scr{position:absolute;inset:6px;border-radius:12px;overflow:hidden}
.viz-rep .ph .scr i{position:absolute;inset:0;background:linear-gradient(140deg,#0f2c56,#0a1a33 55%,#134a63);background-size:240% 240%;animation:feed 7s ease-in-out infinite}
.viz-rep .ph b{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:700 8px var(--mono);letter-spacing:.22em;color:#fff;background:rgba(255,59,48,.92);border-radius:3px;padding:2px 6px;display:flex;gap:4px;align-items:center;z-index:2}
.viz-rep .ph b::before{content:"";width:4px;height:4px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.viz-rep .notif{position:absolute;top:34px;left:50%;width:150px;transform:translateX(-50%);z-index:3;border-radius:9px;padding:7px 10px;background:rgba(14,22,38,.96);box-shadow:inset 0 0 0 1px rgba(45,212,191,.4),0 10px 26px -10px rgba(0,0,0,.9);font:600 8.5px var(--mono);letter-spacing:.08em;color:#B8F0E4;opacity:0;animation:notif 7s ease-in-out infinite}
.viz-rep .notif span{display:block;color:var(--dim2);margin-top:2px;font-weight:500}
@keyframes notif{0%,14%{opacity:0;transform:translateX(-50%) translateY(-8px)}20%,60%{opacity:1;transform:translateX(-50%)}68%,100%{opacity:0;transform:translateX(-50%) translateY(-4px)}}
.viz-rep .gps{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:600 9.5px var(--mono);letter-spacing:.14em;color:rgba(45,212,191,.85);white-space:nowrap}
.viz-rep .wave{position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(45,212,191,.3);animation:wv 3s ease-out infinite}
.viz-rep .wave:nth-child(2){animation-delay:1s}.viz-rep .wave:nth-child(3){animation-delay:2s}
@keyframes wv{from{transform:scale(.36);opacity:.9}to{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.viz-rep .ph .scr i,.viz-rep .wave,.viz-rep .notif,.viz-rep .ph b::before{animation:none}.viz-rep .notif{opacity:1}}
/* viz : concierge (suite chaleureuse) */
.viz-tv{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.viz-tv::before{content:"";position:absolute;inset:0;background:
  radial-gradient(300px 200px at 88% 0%,rgba(245,181,68,.14),transparent 60%),
  radial-gradient(240px 180px at 6% 100%,rgba(245,140,60,.08),transparent 60%)}
.viz-tv .tv{width:80%;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(130deg,#241a08,#0f0b04 55%,#2c1e07);box-shadow:inset 0 0 0 1.5px rgba(245,181,68,.3),0 24px 46px -18px rgba(0,0,0,.9);position:relative;overflow:hidden;padding:15px 18px}
.viz-tv .tv::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 140px at 80% 0%,rgba(245,181,68,.16),transparent 60%)}
.viz-tv .hi{font:620 15px var(--disp);letter-spacing:-.01em;color:#FBE3B0;overflow:hidden;white-space:nowrap;border-right:2px solid rgba(245,181,68,.7);width:0;animation:type 7s steps(26) infinite}
@keyframes type{0%{width:0}40%,88%{width:24ch}100%{width:0}}
.viz-tv .sv{margin-top:11px;display:flex;gap:8px}
.viz-tv .sv i{font-style:normal;font-size:11px;display:grid;place-items:center;width:40px;height:28px;border-radius:6px;background:rgba(245,181,68,.09);box-shadow:inset 0 0 0 1px rgba(245,181,68,.26);opacity:0;animation:svin .5s forwards}
.viz-tv .sv i:nth-child(1){animation-delay:1.2s}.viz-tv .sv i:nth-child(2){animation-delay:1.5s}.viz-tv .sv i:nth-child(3){animation-delay:1.8s}.viz-tv .sv i:nth-child(4){animation-delay:2.1s}
@keyframes svin{to{opacity:1}}
.viz-tv .meteo{position:absolute;right:16px;bottom:12px;font:600 10px var(--mono);letter-spacing:.1em;color:rgba(251,227,176,.8)}
@media (prefers-reduced-motion:reduce){.viz-tv .hi{animation:none;width:24ch}.viz-tv .sv i{animation:none;opacity:1}}
/* viz : connect (mini constellation) */
.viz-cn{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.viz-cn .c{position:absolute;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:700 22px var(--mono);color:var(--sig3);background:radial-gradient(circle at 35% 30%,#1a2450,#0A0F20);box-shadow:0 0 0 1px rgba(176,140,255,.45),0 0 46px rgba(150,110,255,.5);animation:corebeat 4s ease-in-out infinite}
.viz-cn .sat{position:absolute;left:50%;top:50%;width:0;height:0;animation:spin var(--t) linear infinite}
.viz-cn .sat i{position:absolute;transform:translate(-50%,-50%) translateX(var(--r));width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes corebeat{50%{box-shadow:0 0 0 1px rgba(176,140,255,.6),0 0 70px rgba(150,110,255,.75)}}
@media (prefers-reduced-motion:reduce){.viz-cn .sat,.viz-cn .c{animation:none}}
/* ============ CONNECT ============ */
.cn-stage{position:relative;margin-top:70px;height:min(760px,96vw);border-radius:30px;overflow:hidden;background:
  radial-gradient(900px 520px at 50% 42%,rgba(60,80,255,.14),transparent 62%),
  radial-gradient(600px 400px at 18% 8%,rgba(176,140,255,.1),transparent 60%),var(--deep);
  box-shadow:inset 0 0 0 1px var(--line)}
#cnx{position:absolute;inset:0;width:100%;height:100%}
.cn-core{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3;text-align:center}
.cn-core .gly{width:120px;height:120px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font:700 46px var(--mono);color:#fff;
  background:radial-gradient(circle at 35% 30%,#1c2a60,#0A1020);box-shadow:0 0 0 1px rgba(120,170,255,.5),0 0 100px rgba(60,90,255,.75),inset 0 0 34px rgba(60,90,255,.4);animation:corebeat2 4s ease-in-out infinite}
@keyframes corebeat2{50%{box-shadow:0 0 0 1px rgba(120,170,255,.6),0 0 150px rgba(60,90,255,.95),inset 0 0 34px rgba(60,90,255,.5)}}
.cn-core b{display:block;margin-top:14px;font:700 12px var(--mono);letter-spacing:.34em;color:var(--sig3)}
.cn-note{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:500 11.5px var(--mono);letter-spacing:.2em;color:var(--dim2);text-transform:uppercase;z-index:3}
@media (prefers-reduced-motion:reduce){.cn-core .gly{animation:none}}
/* ============ SCENES ============ */
.scenes{margin-top:64px;overflow-x:auto;padding:6px 4px 20px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.scenes-track{display:flex;gap:20px;min-width:max-content;padding:0 max(28px,calc((100vw - 1200px)/2))}
.scene{scroll-snap-align:center;width:min(430px,86vw);flex:0 0 auto;height:490px;border-radius:26px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:34px;transition:transform .4s var(--ease),box-shadow .4s}
.scene:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--line2),0 40px 80px -40px rgba(0,0,0,.9)}
.scene::before{content:"";position:absolute;inset:0;background:
  radial-gradient(480px 300px at 75% 10%,var(--sc1),transparent 65%),
  radial-gradient(400px 400px at 10% 90%,var(--sc2),transparent 60%),
  linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,4,9,.74))}
.scene .stage{position:absolute;inset:0 0 46%;z-index:1}
.scene .big-ic{position:absolute;top:30px;left:32px;font-size:44px;filter:drop-shadow(0 8px 30px rgba(0,0,0,.7));z-index:2}
.scene .live-chip{position:absolute;top:38px;right:32px;z-index:2;font:700 10px var(--mono);letter-spacing:.24em;color:#fff;background:rgba(255,59,48,.85);border-radius:5px;padding:5px 10px;display:flex;gap:7px;align-items:center}
.scene .live-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.scene h4{position:relative;z-index:2;margin:0 0 8px;font-size:29px;font-weight:790;letter-spacing:-.02em}
.scene p{position:relative;z-index:2;margin:0;color:#B9C4D6;font-size:14.5px;max-width:40ch}
.scene .k{position:relative;z-index:2;margin-top:16px;font:600 11px var(--mono);letter-spacing:.2em;color:var(--sig3)}
/* micro-scènes vivantes */
.mini{position:absolute;font:600 9.5px var(--mono);letter-spacing:.12em;color:#C9D6EE;background:rgba(9,14,24,.92);box-shadow:inset 0 0 0 1px var(--line2);border-radius:7px;padding:5px 9px;z-index:1;white-space:nowrap}
.mini.ok{color:#A8E8DA;box-shadow:inset 0 0 0 1px rgba(45,212,191,.4)}
.onair-sign{position:absolute;top:96px;left:32px;z-index:1;font:800 11px var(--mono);letter-spacing:.3em;color:#FFD9D6;background:rgba(120,20,16,.55);box-shadow:inset 0 0 0 1px rgba(255,90,80,.6),0 0 30px rgba(255,59,48,.35);border-radius:7px;padding:8px 14px;animation:signglow 2.4s ease-in-out infinite}
@keyframes signglow{50%{box-shadow:inset 0 0 0 1px rgba(255,90,80,.9),0 0 46px rgba(255,59,48,.55)}}
.vu-s{position:absolute;display:flex;gap:4px;align-items:flex-end;height:34px;z-index:1}
.vu-s i{width:5px;border-radius:2px;background:linear-gradient(180deg,var(--tally) 0 10%,var(--amber) 10% 30%,var(--phos) 30% 100%);animation:vu 1.2s ease-in-out infinite;transform-origin:bottom}
.vu-s i:nth-child(2){animation-delay:.15s}.vu-s i:nth-child(3){animation-delay:.32s}.vu-s i:nth-child(4){animation-delay:.08s}
.lt-s{position:absolute;z-index:1;height:16px;width:52%;border-radius:3px;background:linear-gradient(90deg,rgba(255,91,77,.85),transparent);border-left:2px solid #fff;animation:ltin 6s ease-in-out infinite}
.route{position:absolute;z-index:1;inset:auto 30px 52% 32px;height:64px}
.route svg{width:100%;height:100%}
.route .moto{offset-path:path("M2,58 C60,10 150,60 220,22 C280,-6 330,30 366,12");offset-rotate:0deg;position:absolute;width:9px;height:9px;border-radius:50%;background:var(--phos);box-shadow:0 0 12px var(--phos);animation:ride 9s linear infinite}
.route .moto.m2{background:var(--sig2);box-shadow:0 0 12px var(--sig2);animation-duration:9s;animation-delay:-1.6s}
@keyframes ride{to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.onair-sign,.vu-s i,.lt-s,.route .moto,.scene .live-chip::before{animation:none}}
/* ============ MISSION CONTROL ============ */
.mc{margin-top:70px;border-radius:28px;background:var(--deep);box-shadow:inset 0 0 0 1px var(--line),0 80px 160px -70px rgba(0,0,0,.95);overflow:hidden;position:relative}
.mc .wall{opacity:.24}
.mc-bar{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:2}
.mc-bar .ttl{font:700 12px var(--mono);letter-spacing:.28em;color:var(--sig3)}
.mc-bar .tabs{display:flex;gap:6px;margin-left:14px}
.mc-bar .tabs i{font:600 10px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--dim2);padding:5px 11px;border-radius:7px}
.mc-bar .tabs i.on{color:#fff;background:rgba(30,99,255,.2);box-shadow:inset 0 0 0 1px rgba(77,141,255,.45)}
.mc-bar .right{margin-left:auto;display:flex;gap:18px;align-items:center;font:600 11px var(--mono);letter-spacing:.14em;color:var(--mut)}
.mc-bar .lat{color:var(--phos)}
.mc-bar .onair{color:var(--tally);display:flex;gap:8px;align-items:center}
.mc-bar .onair::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tally);box-shadow:0 0 10px var(--tally);animation:blink 1.4s infinite}
.mc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:18px;position:relative;z-index:2}
.w{background:rgba(10,15,25,.88);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:16px 18px;min-height:120px;backdrop-filter:blur(4px)}
.w h6{margin:0 0 10px;font:600 10px var(--mono);letter-spacing:.26em;color:var(--dim2);text-transform:uppercase;display:flex;justify-content:space-between}
.w h6 em{font-style:normal;color:var(--phos)}
.w-map{grid-column:span 5;grid-row:span 2;position:relative;min-height:300px;overflow:hidden}
.w-map .grid-bg{position:absolute;inset:44px 16px 16px;background:
  repeating-linear-gradient(0deg,rgba(140,165,210,.06) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,rgba(140,165,210,.06) 0 1px,transparent 1px 34px);border-radius:10px}
.ping{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--phos);box-shadow:0 0 12px var(--phos)}
.ping::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(45,212,191,.5);animation:wv 2.4s ease-out infinite}
.ping.blue{background:var(--sig2);box-shadow:0 0 12px var(--sig2)}
.ping.blue::after{border-color:rgba(77,141,255,.5)}
.ping b{position:absolute;left:16px;top:-4px;font:600 9.5px var(--mono);letter-spacing:.1em;color:#BFD2F0;white-space:nowrap}
.w-vu{grid-column:span 3}
.bars{display:flex;gap:6px;align-items:flex-end;height:72px}
.bars i{flex:1;background:linear-gradient(180deg,var(--tally) 0 8%,var(--amber) 8% 26%,var(--phos) 26% 100%);border-radius:3px;animation:vu 1.25s ease-in-out infinite;transform-origin:bottom}
.bars i:nth-child(2){animation-delay:.14s;animation-duration:1.02s}
.bars i:nth-child(3){animation-delay:.31s;animation-duration:1.44s}
.bars i:nth-child(4){animation-delay:.07s;animation-duration:.92s}
.bars i:nth-child(5){animation-delay:.22s;animation-duration:1.18s}
@keyframes vu{0%,100%{transform:scaleY(.4)}42%{transform:scaleY(.95)}70%{transform:scaleY(.58)}}
.w-bit{grid-column:span 4;position:relative}
#spark{width:100%;height:76px;display:block}
.w-view{grid-column:span 3;display:flex;flex-direction:column}
.w-view .n{font:750 40px/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px}
.w-view .up{margin-top:8px;font:600 11px var(--mono);color:var(--phos)}
.w-dest{grid-column:span 4}
.dest{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);color:var(--mut);padding:6px 0}
.dest::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--phos);box-shadow:0 0 9px rgba(45,212,191,.9)}
.dest b{margin-left:auto;color:#BFD2F0;font-weight:600}
.w-alert{grid-column:span 4}
.al{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:12.5px;color:var(--mut);border-bottom:1px dashed var(--line);animation:alin .5s var(--ease)}
@keyframes alin{from{opacity:0;transform:translateY(-6px)}}
.al:last-child{border-bottom:0}
.al i{font-style:normal;flex:0 0 auto}
.w-ai{grid-column:span 4}
.w-ai .txt{font:500 12.5px/1.8 var(--mono);color:#A8E7DC;min-height:66px}
.w-ai .txt::after{content:"▌";animation:blink 1s infinite;color:var(--phos)}
.w-cn{grid-column:span 3}
.cnl{display:flex;flex-wrap:wrap;gap:7px}
.cnl i{font:600 10px var(--mono);letter-spacing:.08em;font-style:normal;color:#BFD2F0;background:rgba(140,165,210,.07);box-shadow:inset 0 0 0 1px var(--line);border-radius:99px;padding:4px 10px;display:flex;gap:6px;align-items:center}
.cnl i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--phos)}
@media(max-width:1000px){.w-map{grid-column:span 12}.w-vu,.w-view,.w-cn{grid-column:span 6}.w-bit,.w-dest,.w-alert,.w-ai{grid-column:span 6}}
@media(max-width:620px){.mc-grid > *{grid-column:span 12 !important}}
@media (prefers-reduced-motion:reduce){.bars i,.ping::after,.mc-bar .onair::before,.al{animation:none}}
/* ============ NUMBERS ============ */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);margin-top:64px}
@media(max-width:920px){.nums{grid-template-columns:repeat(2,1fr)}}
.num{background:var(--deep);padding:44px 34px;position:relative;overflow:hidden}
.num::before{content:"";position:absolute;inset:0;background:radial-gradient(320px 200px at 50% -30%,rgba(30,99,255,.1),transparent 70%);opacity:0;transition:opacity .5s}
.num:hover::before{opacity:1}
.num b{display:block;font:800 52px/1 var(--disp);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.num b small{font-size:24px;color:var(--sig2);font-weight:750}
.num span{display:block;margin-top:10px;color:var(--mut);font-size:13.5px}
.num .u{color:var(--sig2)}
.num .trace{display:flex;gap:3px;align-items:flex-end;height:22px;margin-top:14px}
.num .trace i{flex:1;border-radius:2px;background:rgba(77,141,255,.3);animation:trc 2.6s ease-in-out infinite;transform-origin:bottom}
.num .trace i:nth-child(odd){animation-delay:.5s}
.num .trace i:nth-child(3n){animation-delay:1.1s;background:rgba(45,212,191,.32)}
@keyframes trc{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.num .trace i{animation:none;transform:scaleY(.7)}}
/* ============ FOUNDERS ============ */
.founders{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:64px}
@media(max-width:1040px){.founders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.founders{grid-template-columns:1fr}}
.fd{border-radius:20px;padding:28px 24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;transition:transform .35s var(--ease)}
.fd:hover{transform:translateY(-6px)}
.fd::before{content:"";position:absolute;inset:0;background:radial-gradient(280px 160px at 50% -20%,var(--fc,rgba(77,141,255,.12)),transparent 65%)}
.fd .ic{font-size:30px}
.fd h5{margin:14px 0 4px;font-size:15.5px;font-weight:740}
.fd p{margin:0;color:var(--dim2);font:500 11px var(--mono);letter-spacing:.16em}
.fd .slot{margin-top:18px;height:44px;border-radius:10px;border:1px dashed var(--line2);display:grid;place-items:center;font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--dim2)}
/* ============ PRICING ============ */
.trial-banner{margin:64px auto 26px;max-width:760px;text-align:center;border-radius:22px;padding:34px 30px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0B1428,#070C18);box-shadow:inset 0 0 0 1px rgba(77,141,255,.4),0 40px 100px -50px rgba(30,99,255,.55)}
.trial-banner::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 60%,rgba(77,141,255,.16),transparent 80%);animation:spin 9s linear infinite}
.trial-banner b{position:relative;display:block;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em}
.trial-banner span{position:relative;display:block;margin-top:6px;color:var(--sig3);font:600 13px var(--mono);letter-spacing:.22em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.trial-banner::before{animation:none}}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
@media(max-width:900px){.prices{grid-template-columns:1fr}}
.price{position:relative;background:var(--deep);border-radius:24px;padding:44px 38px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;overflow:hidden;transition:transform .35s var(--ease)}
.price:hover{transform:translateY(-6px)}
.price::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 320px at var(--mx,50%) var(--my,0%),rgba(77,141,255,.12),transparent 60%);opacity:0;transition:opacity .3s}
.price:hover::before{opacity:1}
.price.mid{background:linear-gradient(180deg,#0B1326,#060B15);box-shadow:inset 0 0 0 1px rgba(77,141,255,.45),0 50px 110px -50px rgba(30,99,255,.5)}
.price.mid::after{content:"RECOMMANDÉ";position:absolute;top:22px;right:22px;font:700 9.5px var(--mono);letter-spacing:.26em;color:var(--sig3);background:rgba(30,99,255,.16);box-shadow:inset 0 0 0 1px rgba(77,141,255,.45);padding:6px 11px;border-radius:99px}
.price h4{margin:0;font-size:16px;font-weight:720;letter-spacing:.02em}
.price .amt{margin:24px 0 4px;font:800 56px/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .amt small{font:500 14px var(--mono);color:var(--mut)}
.price .for{color:var(--mut);font-size:13.5px;margin:6px 0 28px}
.price ul{list-style:none;margin:0 0 32px;padding:0;flex:1}
.price li{padding:9px 0;font-size:14px;color:var(--mut);border-bottom:1px dashed var(--line)}
.price li b{color:var(--ink);font-weight:620}
.price li::before{content:"✓";color:var(--phos);margin-right:10px;font-weight:700}
/* ============ FINAL ============ */
.final{position:relative;text-align:center;padding:190px 0 160px;overflow:hidden}
#final-net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 540px at 50% 108%,rgba(30,99,255,.24),transparent 62%)}
.final h2{position:relative;font-size:clamp(38px,6.4vw,84px);font-weight:830;letter-spacing:-.04em;margin:0 0 16px;line-height:1.02;
  background:linear-gradient(180deg,#fff,#A9C0EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.final p{position:relative;color:var(--mut);font-size:18px;margin:0 auto 46px;max-width:44ch}
.final .row1{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.final .row2{position:relative;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.final .row2 a{font-size:14px;color:var(--mut);border-bottom:1px solid var(--line2);padding-bottom:3px;transition:color .25s}
.final .row2 a:hover{color:var(--sig2)}
/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);background:var(--deep);padding:74px 0 36px}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px}
@media(max-width:960px){.f-grid{grid-template-columns:repeat(2,1fr)}}
.f-brand p{color:var(--mut);font-size:13.5px;max-width:30ch;margin:14px 0 0}
.f-col h6{margin:0 0 14px;font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--dim2)}
.f-col a{display:block;color:var(--mut);font-size:13.5px;padding:5px 0;transition:color .25s}
.f-col a:hover{color:var(--ink)}
.f-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;align-items:center;color:var(--dim2);font:500 12px var(--mono);letter-spacing:.1em}
.f-bottom .tcf{margin-left:auto;color:var(--sig2)}

/* ================================================================
   PHOTOTHÈQUE — campagne DTONAIR (photos premium).
   REMPLACER UNE PHOTO = remplacer UNE SEULE data URI ci-dessous.
   Slots posés dans la page (un div.photo par slot) :
     #ph-studio   → pilier Studio Cloud (plateau TV DTONAIR)
     #ph-reporter → pilier Reporter Cloud (reporter cyclisme)
     #ph-radio    → scène Radio (régie radio ON AIR)
     #ph-mc       → fond Mission Control (salle d'exploitation)
   Slots PRÊTS pour les prochaines photos (déjà câblés, vides) :
     #ph-tv #ph-fast #ph-hotel #ph-stade #ph-cyclisme
     #ph-mairie #ph-dept #ph-univ #ph-ent #ph-hero
   ================================================================ */
.photo{position:absolute;inset:0;background-image:var(--img,none);background-size:cover;background-position:var(--pos,center 30%);border-radius:inherit}
.photo::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(2,4,9,.18),rgba(2,4,9,.05) 32%,rgba(3,6,12,.8) 90%),
  radial-gradient(130% 90% at 50% 0%,transparent 55%,rgba(2,4,9,.5))}
.photo::after{content:"";position:absolute;inset:0;background:rgba(23,55,140,.10);mix-blend-mode:overlay}
.photo .corner{position:absolute;right:0;bottom:0;width:42%;height:22%;background:radial-gradient(130% 150% at 100% 100%,rgba(2,4,9,.94),rgba(2,4,9,0) 72%)}
.credit{position:absolute;right:10px;bottom:8px;z-index:4;font:600 8.5px var(--mono);letter-spacing:.24em;color:rgba(200,216,242,.55);background:rgba(4,7,13,.9);box-shadow:inset 0 0 0 1px rgba(140,165,210,.18);border-radius:6px;padding:5px 11px;pointer-events:none}
.live-tag{position:absolute;top:14px;left:16px;z-index:3;font:700 9.5px var(--mono);letter-spacing:.22em;color:#fff;background:rgba(255,59,48,.9);border-radius:5px;padding:4px 9px;animation:blink 1.5s infinite}
.viz-rep .photo ~ .notif{left:24%;top:16px}
.scene .photo{z-index:0}
.scene .credit{bottom:10px;right:12px}
#ph-mc{opacity:.5}
#ph-mc::before{background:linear-gradient(180deg,rgba(2,4,9,.6),rgba(2,4,9,.88))}
@media (prefers-reduced-motion:reduce){.live-tag{animation:none}}
#ph-studio{--img:url(img/studio-plateau.jpg)}
#ph-reporter{--img:url(img/reporter-terrain.jpg)}
#ph-radio{--img:url(img/scene-radio-regie.jpg)}
#ph-mc{--img:url(img/mission-control-salle.jpg)}


/* Lot 2 — CAPTURES PRODUIT RÉELLES (barre navigateur recadrée à la source).
   .ui  = grade allégé (les couleurs de l'interface restent fidèles)
   .fit = interface montrée EN ENTIER (aucun écran coupé), letterbox nuit */
.photo.ui::after{background:rgba(23,55,140,.05)}
.photo.ui::before{background:linear-gradient(180deg,rgba(2,4,9,.08),rgba(2,4,9,.04) 40%,rgba(3,6,12,.82) 92%)}
.photo.fit{background-size:contain;background-repeat:no-repeat;background-position:center 34%;background-color:#03050A}
.scene.wide{width:min(600px,92vw)}
#ph-hotel{--img:url(img/scene-hotel-concierge.jpg)}
#ph-dept{--img:url(img/scene-departement-carte.jpg)}
#ph-tv{--img:url(img/scene-television-regie.jpg)}