:root{
  --ink:#1D1D1F; --ink-2:#424549; --grey:#6E6E73; --grey-2:#86868B;
  --paper:#FFFFFF; --wash:#F5F5F7; --wash-2:#FAFAFC; --line:#E5E5E8;
  --blue:#0A7AAD; --blue-lit:#15A1DC; --orange:#F68E39; --orange-dk:#D9741A;
  --night:#0B1D2E; --creme:#AD9889;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
.wide{max-width:1240px;margin:0 auto;padding:0 22px}
img{max-width:100%}

/* ---------- lien d'évitement (clavier, lecteurs d'écran) ---------- */
.skip{position:absolute;left:-9999px;top:10px;z-index:1000;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15);font-size:14px}
.skip:focus{left:12px}
.pos a.h{display:block}

/* ---------- barre du haut : menu « Mon compte » et langue ---------- */
.switchbar .sp{align-items:center}
.switchbar .dd{position:relative;display:flex;align-items:center;height:40px}
.switchbar .dd-btn{background:none;border:0;font:inherit;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.62);padding:0 18px;height:40px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:color .2s}
.switchbar .dd-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.switchbar .dd-btn:hover,.switchbar .dd.open .dd-btn{color:#fff}
.switchbar .dd.open .dd-btn svg{transform:rotate(180deg)}
.switchbar .dd-menu{position:absolute;right:8px;top:42px;min-width:190px;background:#fff;border-radius:14px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);display:none;z-index:95}
.switchbar .dd.open .dd-menu{display:block}
@media (hover:hover){.switchbar .dd:hover .dd-menu{display:block}}
.switchbar .dd-menu a{display:block;height:auto;padding:10px 12px;border-radius:9px;color:var(--ink);font-size:13.5px;font-weight:500}
.switchbar .dd-menu a:hover{background:var(--wash);color:var(--ink)}
.switchbar .dd-menu a.on::after{display:none}
.switchbar .lang{display:flex;align-items:center;gap:3px;margin-left:10px;padding-left:12px;border-left:1px solid rgba(255,255,255,.14);height:22px}
.switchbar .lang a,.switchbar .lang span{height:auto;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.55);display:inline-flex}
.switchbar .lang a.on{background:rgba(255,255,255,.16);color:#fff}
.switchbar .lang a.on::after{display:none}
.switchbar .lang span{opacity:.45;cursor:default}
.mnav .mnav-sec{flex-wrap:wrap;row-gap:6px}
.mnav .mnav-sec a{white-space:nowrap}
.mnav-lang{display:flex;gap:6px;padding:14px 0 4px}
.mnav-lang a,.mnav-lang span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--grey);background:var(--wash)}
.mnav-lang a.on{background:var(--blue);color:#fff}
.mnav-lang span{opacity:.5}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav .wide{display:flex;align-items:center;gap:32px;height:52px}
.logo{display:flex;align-items:center;gap:7px;flex:none}
.logo svg{height:21px;width:auto;display:block}
.logo b{font-weight:700;font-size:17px;letter-spacing:-.035em;line-height:1;color:var(--blue)}
.logo b i{font-style:normal;color:var(--orange)}
.menu{display:flex;gap:26px;font-size:12.5px;font-weight:400;color:var(--ink)}
.menu a{opacity:.86;transition:opacity .2s}
.menu a:hover{opacity:1}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:12.5px;color:var(--ink)}
.nav .right a{opacity:.86}
.nav .right a:hover{opacity:1}
.pill{background:var(--blue);color:#fff;border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:500;opacity:1!important}
.pill:hover{background:var(--blue-lit)}

/* ---------- type ---------- */
.h-xl{font-weight:700;font-size:clamp(44px,7.6vw,88px);line-height:1.05;letter-spacing:-.035em;margin:0;text-wrap:balance}
.h-lg{font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1.07;letter-spacing:-.032em;margin:0;text-wrap:balance}
.h-md{font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.026em;margin:0}
.sub{font-size:clamp(18px,1.9vw,22px);color:var(--ink-2);line-height:1.42;margin:14px auto 0;max-width:42ch;font-weight:400;letter-spacing:-.014em}
.eyebrow{font-size:19px;font-weight:600;color:var(--orange);letter-spacing:-.02em;margin-bottom:8px}
.eyebrow.b{color:var(--blue)}
.center{text-align:center}
.links{display:flex;gap:28px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.lnk{color:var(--blue);font-size:19px;font-weight:400;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:3px}
.lnk:hover{text-decoration:underline}
.lnk::after{content:"›";font-size:21px;line-height:1;transform:translateY(-1px)}
.lnk.on-dark{color:#5AC8FA}
.lnk.o{color:var(--orange-dk)}

/* ---------- sections ---------- */
section{padding:0 0 12px}
.sec-pad{padding:100px 0 88px}

/* ---------- annonce (hero temporaire, style campagne FiberSky) ---------- */
.annonce{background:var(--creme);color:#0E0E0E;text-align:center;padding:58px 0 0;overflow:hidden}
.annonce .kick{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;color:#0E0E0E;background:rgba(255,255,255,.6);border-radius:999px;padding:6px 15px}
.annonce h2,.annonce h1{font-size:clamp(38px,6vw,72px);font-weight:700;letter-spacing:-.038em;line-height:1.04;margin:20px 0 0;text-wrap:balance}
.annonce h2 i,.annonce h1 i{font-style:normal;color:#FF6A13}
/* charte campagne FiberSky : tuiles et bandes crème, point orange dans le nom */
.fs-creme{background:var(--creme);color:#0E0E0E}
.fs-creme .eyebrow{color:#C24E05}
.fs-creme p,.fs-creme .sub,.fs-creme .bullets li{color:#2A2A26}
.fs-creme .lnk{color:#0E0E0E}
.cta-strip.fs-creme{margin-top:60px}
.tile.creme{background:#B5A392;color:#0E0E0E}
.tile.creme .eyebrow{color:#C24E05}
.eyebrow i,.tile.creme .eyebrow i{font-style:normal;color:#FF6A13}
.tile.creme .sub,.tile.creme .price{color:#2A2A26}
.tile.creme .price b,.tile.creme .nums .n{color:#0E0E0E}
.tile.creme .lnk{color:#0E0E0E}
.tile.creme .shot{margin:auto -40px 0;padding-top:24px}
.tile.creme .shot img{width:100%;max-height:none;mix-blend-mode:normal;border-radius:0;display:block;background:none;padding:0}
.annonce .an-sub{font-size:clamp(17px,1.9vw,21px);color:#2A2A26;margin:14px auto 0;max-width:44ch;line-height:1.42}
.annonce .links{margin-top:20px}
.annonce .lnk{color:#0E0E0E}
.annonce .lnk.o{color:#C24E05}
.an-shot{margin-top:24px;display:block;width:100%;height:auto}
@media (max-width:940px){.annonce{padding-top:40px}}

/* ---------- hero ---------- */
.hero{text-align:center;padding:88px 0 0;background:var(--paper)}
.hero .h-xl em{font-style:normal;color:var(--blue)}
.hero .h-xl em i{font-style:normal;color:var(--orange)}
.hero-stage{margin-top:34px;position:relative;height:400px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#fff,var(--wash-2) 70%,var(--wash))}
#wave{position:absolute;inset:0;width:100%;height:100%}
.hero-dev{position:relative;z-index:2;width:min(460px,78vw);mix-blend-mode:multiply}

/* ---------- coverage ---------- */
.cov-sec{background:var(--wash);padding:0 0 92px}
.cov{background:var(--paper);border-radius:22px;padding:40px;max-width:700px;margin:0 auto;transform:translateY(-46px);box-shadow:0 2px 6px rgba(0,0,0,.04),0 18px 44px rgba(0,0,0,.07)}
.cov-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--grey);margin-bottom:6px}
.field input{width:100%;background:var(--wash);border:1px solid transparent;border-radius:12px;padding:14px 16px;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.field input::placeholder{color:#A1A1A6}
.field input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(21,161,220,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font-family:inherit;font-weight:500;font-size:16px;padding:14px 26px;cursor:pointer;letter-spacing:-.01em;transition:background .2s,opacity .2s}
.btn-o{background:var(--orange);color:#fff}
.btn-o:hover{background:var(--orange-dk)}
.btn-b{background:var(--blue);color:#fff}
.btn-b:hover{background:var(--blue-lit)}
.btn-w{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn-w:hover{background:var(--wash)}
.btn-lite{background:rgba(255,255,255,.16);color:#fff}
.btn-lite:hover{background:rgba(255,255,255,.26)}
.btn-full{width:100%;margin-top:18px}
.cov .note{font-size:13.5px;color:var(--grey);margin-top:14px;text-align:center}
.cov-out{margin-top:14px;border-radius:12px;padding:14px 17px;font-size:15px;display:none;background:#EAF4EE;color:#14603C}
.cov-out.show{display:block}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.plan{background:var(--wash);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;transition:background .25s}
.plan:hover{background:#EFEFF2}
.plan.feat{background:#FFF6EC}
.plan .flag{align-self:flex-start;color:var(--orange-dk);font-size:12.5px;font-weight:600;margin-bottom:10px}
.plan .nm{font-size:21px;font-weight:600;letter-spacing:-.024em}
.plan .for{font-size:14.5px;color:var(--grey);margin-top:5px;min-height:42px;line-height:1.4}
.dl{margin-top:20px;display:flex;align-items:baseline;gap:7px}
.dl b{font-size:54px;font-weight:600;letter-spacing:-.045em;line-height:.92;color:var(--blue)}
.dl span{font-size:15px;font-weight:500;color:var(--ink-2)}
.ul{font-size:14px;color:var(--grey);margin-top:7px}
.pr{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;gap:5px}
.pr b{font-size:29px;font-weight:600;letter-spacing:-.03em}
.pr span{font-size:14.5px;color:var(--grey)}
.plan .btn{margin-top:16px;width:100%;padding:12px;font-size:15px}

/* ---------- apple tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.tile{border-radius:22px;padding:56px 40px 0;text-align:center;overflow:hidden;background:var(--wash);display:flex;flex-direction:column;min-height:520px}
.tile.white{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.tile.blue{background:linear-gradient(160deg,#00568B,#0079BE 60%,#0A8BD4);color:#fff}
.tile.blue .sub{color:rgba(255,255,255,.84)}
.tile.blue .eyebrow{color:#FFD3A6}
.tile h3{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0}
.tile .sub{font-size:18px;margin-top:12px}
.tile .links{margin-top:18px}
.tile .shot{margin-top:auto;padding-top:34px}
.tile .shot img{max-height:250px;width:auto;margin:0 auto;display:block;mix-blend-mode:multiply}
.tile.blue .shot img{mix-blend-mode:normal;background:#fff;border-radius:20px 20px 0 0;padding:22px 26px 0;max-height:270px}
.tile .nums{display:flex;justify-content:center;gap:52px;margin-top:26px;flex-wrap:wrap}
.tile .nums .n{font-size:48px;font-weight:600;letter-spacing:-.04em;line-height:1}
.tile .nums .l{font-size:14px;opacity:.8;margin-top:5px}
.tile .price{margin-top:16px;font-size:16px;color:var(--grey)}
.tile .price b{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em}

/* full-width dark tile */
.tile-wide{border-radius:22px;background:linear-gradient(155deg,#071626,#0B2841 55%,#103A5C);color:#fff;padding:66px 56px;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;margin-top:14px;overflow:hidden}
.tile-wide .sub{color:rgba(255,255,255,.82);margin-left:0;max-width:44ch}
.tile-wide .eyebrow{color:#FFB870}
.sky-art{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
#sat{width:100%;height:100%;display:block}
.steps{margin-top:26px}
.st{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.14)}
.st .n{font-size:14px;font-weight:600;color:#FFB870}
.st b{display:block;font-size:16.5px;font-weight:500}
.st p{margin:3px 0 0;font-size:15px;color:rgba(255,255,255,.66)}

/* ---------- lte table ---------- */
.tw{overflow-x:auto;margin-top:14px;border-radius:22px;background:var(--wash)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:16px}
th{text-align:left;font-size:13px;font-weight:500;color:var(--grey);padding:22px 30px 16px}
th.n{text-align:right}
td{padding:18px 30px;border-top:1px solid rgba(0,0,0,.07);font-variant-numeric:tabular-nums;color:var(--ink-2)}
td.nm{color:var(--ink);font-weight:500}
td.n{text-align:right;white-space:nowrap}
td .amt{font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:56px;text-align:center}
.why .n{font-size:52px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--blue)}
.why .n.o{color:var(--orange)}
.why b{display:block;margin-top:10px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.why p{margin:5px 0 0;font-size:15px;color:var(--grey);line-height:1.45}

/* ---------- telehaiti : deux bandes défilantes collées ---------- */
.thm{padding:0 0 12px;overflow:hidden}
.th-rows{display:flex;flex-direction:column;gap:10px;margin-top:44px}
.th-row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.th-row.grab{cursor:grabbing}
.th-row.top{--h:300px;--ar:16/9;--dur:150s}
.th-row.bot{--h:600px;--ar:16/9;--dur:220s}
.th-track{display:flex;gap:10px;width:max-content;animation:th-scroll var(--dur) linear infinite;will-change:transform}
.th-row.bot .th-track{animation-direction:reverse}
.js .th-track{animation:none}
.th-track img{display:block;flex:none;height:var(--h);aspect-ratio:var(--ar);width:auto;object-fit:cover;border-radius:14px;background:var(--wash);pointer-events:none;-webkit-user-drag:none}
@keyframes th-scroll{to{transform:translateX(calc(-50% - 5px))}}
.thm .links{margin-top:34px}

/* ---------- page TV (modèle Apple TV & Home) ---------- */
.chap{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;padding:22px 0 10px}
.chap a{display:flex;flex-direction:column;align-items:center;gap:9px;width:108px;padding:12px 6px 10px;border-radius:14px;font-size:12px;line-height:1.25;color:var(--ink-2);text-align:center;transition:background .2s}
.chap a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.chap a.on{background:rgba(0,0,0,.06);color:var(--ink);font-weight:600}
.chap svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.5}
.chap a.apple svg{width:auto;height:34px;stroke:none;color:var(--ink)}
.dev.stick{width:120px;height:18px;border-radius:9px;background:#1D1D1F;margin-top:20px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.tile.night{background:linear-gradient(160deg,#0B1D2E,#12304A 60%,#173F60);color:#fff}
.tile.night .sub{color:rgba(255,255,255,.82)}
.tile.night .eyebrow{color:#FFB870}
.tile.night .price,.tile.blue .price{color:rgba(255,255,255,.78)}
.tile.night .price b,.tile.blue .price b{color:#fff}
.tile .shot .dev{margin-bottom:-40px}
.tile .shot .dev img{mix-blend-mode:normal;max-height:none;width:100%;height:100%;margin:0;padding:0;border-radius:0;background:none}
.dev{position:relative;margin:0 auto;overflow:hidden;background:#000}
.dev img{display:block;width:100%;height:100%;object-fit:cover}
.dev.tv{width:min(320px,86%);aspect-ratio:16/9;border:5px solid #1D1D1F;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.dev.phone{width:min(170px,50%);aspect-ratio:9/19;border:6px solid #1D1D1F;border-radius:28px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.dev.box{width:120px;height:26px;border-radius:9px;background:#1D1D1F;margin-top:16px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.galw{position:relative;margin:42px -22px 0}
.gal{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal::-webkit-scrollbar{display:none}
.gcard{flex:0 0 360px;scroll-snap-align:start;background:var(--paper);border-radius:20px;padding:30px 26px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;min-height:440px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.band-white .gcard{background:var(--wash)}
.gcard h4{font-size:21px;font-weight:600;letter-spacing:-.024em;margin:0}
.gcard p{font-size:15px;color:var(--grey);line-height:1.45;margin:8px 0 0;max-width:30ch}
.gcard .lnk{font-size:16px;margin-top:10px}
.gcard .gvis{margin-top:auto;padding-top:26px;width:100%;display:flex;flex-direction:column;align-items:center}
.gcard .gimg{max-height:190px;width:auto;mix-blend-mode:multiply}
.gcard .gimg.tall{max-height:290px}
.gcard .gimg.wide{max-height:230px;width:100%;object-fit:contain}
.tile .shot img.cutout{mix-blend-mode:normal;max-height:none;width:min(230px,62%);margin-bottom:-70px}
.tile .shot img.cutout.box{width:min(340px,72%);margin:0 auto 36px}
.tile .shot img.cutout.tv{width:min(440px,90%);margin:0 auto 30px;mix-blend-mode:multiply}
.tile.blue .shot img.cutout.tv,.tile.night .shot img.cutout.tv{mix-blend-mode:normal}
.tile.blue .shot img.cutout{background:none;padding:0;border-radius:0;max-height:none}
.gcard.opt{padding-top:0;overflow:hidden}
.gcard .gart{width:calc(100% + 52px);margin:0 -26px 22px;aspect-ratio:16/9;overflow:hidden}
.gcard .gart img{width:100%;height:100%;object-fit:cover;display:block}
.gcard .price{margin-top:12px;font-size:15px;color:var(--grey)}
.gcard .price b{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.gnav{display:flex;justify-content:flex-end;gap:10px;padding:0 22px}
.gnav button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.07);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;transition:background .2s}
.gnav button:hover{background:rgba(0,0,0,.14)}

/* ---------- contact ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.ct{background:var(--wash);border-radius:20px;padding:32px;transition:background .25s}
.ct:hover{background:#EFEFF2}
.ct .ic{width:42px;height:42px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ct .ic svg{width:21px;height:21px;stroke:var(--blue);fill:none;stroke-width:1.7}
.ct b{font-size:18px;font-weight:600;letter-spacing:-.022em}
.ct p{font-size:15px;color:var(--grey);margin:7px 0 0;line-height:1.45}
.ct .v{margin-top:13px;font-size:17px;color:var(--blue)}

/* ---------- footer ---------- */
footer{background:var(--wash);padding:44px 0 32px;font-size:12px;color:var(--grey);line-height:1.55;margin-top:70px}
.fnote{padding-bottom:18px;border-bottom:1px solid var(--line);max-width:62ch}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding:26px 0 30px}
.fcol h4{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 10px}
.fcol a{display:block;color:var(--grey);padding:4px 0}
.fcol a:hover{color:var(--ink);text-decoration:underline}
.fbot{padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:940px){
  .plans,.three,.tiles,.tile-wide{grid-template-columns:1fr}
  .why{grid-template-columns:1fr 1fr;gap:26px}
  .cov-row{grid-template-columns:1fr}
  .nav .right .hide-s{display:none}
  .nav .wide{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:0;gap:0 18px}
  .nav .logo{order:1}
  .nav .right{order:2;margin-left:auto}
  .menu{order:3;width:100%;margin:9px -20px 0;padding:0 20px 10px;gap:20px;
        overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;font-size:13.5px}
  .menu a.on{opacity:1;font-weight:600;color:var(--blue)}
  .sec-pad{padding:70px 0 60px}
  .tile{min-height:430px;padding:42px 26px 0}
  .tile-wide{padding:40px 26px}
  .hero-stage{height:270px}
  .fgrid{grid-template-columns:1fr 1fr}
  .th-row.top{--h:200px}
  .th-row.bot{--h:400px}
  .chap{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -22px;padding:16px 22px 8px;scrollbar-width:none}
  .chap::-webkit-scrollbar{display:none}
  .chap a{flex:0 0 92px;width:auto}
  .gcard{flex-basis:78vw;min-height:400px}
  .gnav{justify-content:center}
  .tile.creme .shot{margin:auto -26px 0}
}
@media (max-width:820px){
  .chap,.galw{margin-left:-20px;margin-right:-20px}
  .chap{padding-left:20px;padding-right:20px}
  .gal{padding-left:20px;padding-right:20px}
  .gnav{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html:not(.js) .th-row{overflow-x:auto;scrollbar-width:none}}

/* ================= additions v2 ================= */
.page-head{padding:76px 0 56px;text-align:center;background:var(--wash)}
.crumb{font-size:13px;color:var(--grey)}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.band-white{background:var(--paper)}
.band-wash{background:var(--wash)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}.rv.d5{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* offer cards */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px;text-align:left}
.offers.c3{grid-template-columns:repeat(3,1fr)}
.offers.c2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.off{position:relative;background:var(--wash);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .3s}
.off:hover{transform:translateY(-6px);background:#EFEFF2;box-shadow:0 22px 46px rgba(17,20,24,.10)}
.off.feat{background:#FFF6EC;box-shadow:0 0 0 1.5px var(--orange) inset}
.off.feat:hover{background:#FFF1E2}
.off .badge{position:absolute;top:-11px;left:24px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:4px 12px;border-radius:999px}
.off .cls{font-size:12.5px;font-weight:600;color:var(--blue);letter-spacing:.01em}
.off .nm{font-size:19px;font-weight:600;letter-spacing:-.024em;margin-top:5px;line-height:1.2}
.off .spd{margin-top:16px;display:flex;align-items:baseline;gap:6px}
.off .spd b{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:.95;color:var(--ink)}
.off .spd span{font-size:14px;font-weight:500;color:var(--grey)}
.inc{list-style:none;margin:16px 0 0;padding:0}
.inc li{position:relative;padding:7px 0 7px 24px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.inc li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.off .money{margin-top:auto;padding-top:22px}
.off .was{font-size:14px;color:var(--grey);text-decoration:line-through}
.off .now{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.off .now b{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.off .now span{font-size:14.5px;color:var(--grey)}
.off .cred{font-size:12.5px;color:var(--orange-dk);font-weight:500;margin-top:6px}
.off .btn{margin-top:14px;width:100%;padding:12px;font-size:15px}

/* tabs */
.tabs{display:inline-flex;background:var(--wash);border-radius:999px;padding:5px;margin-top:30px;gap:4px;flex-wrap:wrap;justify-content:center}
.tabs button{border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink-2);padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.tabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09);font-weight:600}
.tabpane{display:none}
.tabpane.on{display:block;animation:fadeUp .5s cubic-bezier(.2,.7,.2,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabpane.on{animation:none}}

/* classes table */
.ctab{overflow-x:auto;margin-top:38px;border-radius:22px;background:var(--wash)}
.ctab table{border-collapse:collapse;width:100%;min-width:720px;font-size:15.5px;text-align:left}
.ctab th{font-size:12.5px;font-weight:600;color:var(--grey);padding:20px 26px 14px}
.ctab td{padding:18px 26px;border-top:1px solid rgba(0,0,0,.07);color:var(--ink-2);vertical-align:top}
.ctab td.k{color:var(--ink);font-weight:600;white-space:nowrap}
.ctab td.sp{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctab tbody tr{transition:background .2s}
.ctab tbody tr:hover{background:rgba(21,161,220,.06)}

/* steps / zones */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px;text-align:left}
.zone{background:var(--wash);border-radius:20px;padding:26px;transition:transform .3s,background .25s}
.zone:hover{transform:translateY(-5px);background:#EFEFF2}
.zone .t{font-size:12.5px;font-weight:600;color:var(--orange);letter-spacing:.01em}
.zone h4{font-size:18px;font-weight:600;letter-spacing:-.022em;margin:8px 0 0}
.zone .pair{margin-top:14px;font-size:14px;color:var(--ink-2)}
.zone .pair b{color:var(--ink);font-weight:600}
.zone p{margin:12px 0 0;font-size:14px;color:var(--grey);line-height:1.45}

/* rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:58px 0}
.row2.rev>div:first-child{order:2}
.row2 .shotbox{background:var(--wash);border-radius:24px;padding:48px;display:flex;align-items:center;justify-content:center;min-height:340px;overflow:hidden}
.row2 .shotbox img{max-height:250px;width:auto;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.row2 .shotbox:hover img{transform:scale(1.05)}
.row2 h3{font-size:clamp(26px,3.1vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:8px 0 0}
.row2 p{font-size:17px;color:var(--ink-2);margin:12px 0 0;max-width:46ch;line-height:1.5}
.bullets{margin:20px 0 0;padding:0;list-style:none}
.bullets li{position:relative;padding:10px 0 10px 26px;font-size:16px;color:var(--ink-2);border-top:1px solid var(--line)}
.bullets li:first-child{border-top:0}
.bullets li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* equipment grid */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.item{background:var(--wash);border-radius:20px;padding:28px 22px;text-align:center;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .3s}
.item:hover{transform:translateY(-6px);background:#EFEFF2;box-shadow:0 20px 40px rgba(17,20,24,.09)}
.item .ph{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.item .ph img{max-height:150px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.item:hover .ph img{transform:scale(1.07)}
.item h4{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0}
.item .d{font-size:13.5px;color:var(--grey);margin-top:7px;line-height:1.4;min-height:56px}
.item .p{margin-top:10px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.item .p.q{font-size:15px;color:var(--grey);font-weight:500}

/* faq accordion */
.faq{max-width:820px;margin:42px auto 0;text-align:left}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;font-family:inherit;text-align:left;padding:22px 40px 22px 0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);cursor:pointer;position:relative}
.q button::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.q.open button::after{transform:translateY(-25%) rotate(225deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.q.open .a{max-height:340px}
.q .a p{margin:0 0 22px;font-size:16px;color:var(--grey);line-height:1.55;max-width:66ch}

/* generic lists */
.tw{overflow-x:auto;margin-top:34px;border-radius:22px;background:var(--wash)}
table.simple{border-collapse:collapse;width:100%;min-width:600px;font-size:16px;text-align:left}
table.simple th{font-size:12.5px;font-weight:600;color:var(--grey);padding:20px 26px 14px}
table.simple td{padding:17px 26px;border-top:1px solid rgba(0,0,0,.07);color:var(--ink-2)}
table.simple td.k{color:var(--ink);font-weight:600}
table.simple td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.simple td .amt{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
table.simple tbody tr:hover{background:rgba(21,161,220,.06)}

.cta-strip{background:var(--wash);border-radius:24px;padding:56px;text-align:center;margin-top:60px}
.cta-strip.blue{background:linear-gradient(150deg,#00568B,#0079BE 60%,#0A8BD4);color:#fff}
.cta-strip.blue .sub{color:rgba(255,255,255,.85)}
.cta-strip.blue .lnk{color:#8AD4FF}
.pos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;text-align:left}
.pos div{background:var(--wash);border-radius:18px;padding:24px;transition:background .25s}
.pos div:hover{background:#EFEFF2}
.pos b{font-size:16.5px;font-weight:600}
.pos p{margin:6px 0 0;font-size:14.5px;color:var(--grey);line-height:1.45}
.pos .h{margin-top:10px;font-size:14px;color:var(--blue)}
.note-line{font-size:13.5px;color:var(--grey);margin-top:22px;max-width:72ch;margin-left:auto;margin-right:auto;line-height:1.5}
.menu a.on{opacity:1;font-weight:600;color:var(--blue)}

@media (max-width:980px){
  .offers,.offers.c3,.offers.c2,.zones,.grid4{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr;gap:30px;padding:36px 0}
  .row2.rev>div:first-child{order:0}
  .pos{grid-template-columns:1fr}
  .cta-strip{padding:36px 24px}
}
@media (max-width:620px){
  .offers,.offers.c3,.offers.c2,.zones,.grid4{grid-template-columns:1fr}
}

/* ================= barre Particulier / Entreprise ================= */
.switchbar{background:#0A1626;border-bottom:1px solid rgba(255,255,255,.09)}
.switchbar .wide{display:flex;align-items:center;gap:0;height:40px}
.switchbar a{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.62);padding:0 18px;height:40px;display:inline-flex;align-items:center;position:relative;transition:color .2s}
.switchbar a:hover{color:#fff}
.switchbar a.on{color:#fff}
.switchbar a.on::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--orange)}
.switchbar .sp{margin-left:auto;display:flex}

/* ================= thème entreprise ================= */
body.biz{
  --ink:#F3F7FB; --ink-2:#C6D3E0; --grey:#8FA0B3;
  --paper:#0A1626; --wash:#0E1E33; --line:rgba(255,255,255,.11);
  --blue:#2B9BE0; --blue-lit:#6CC5F7;
  background:#0A1626;color:#F3F7FB
}
body.biz .nav{background:rgba(10,22,38,.82);border-bottom:1px solid rgba(255,255,255,.10)}
.logo img{height:26px;width:auto;display:block}
.logo svg{display:none}
body.biz .logo{padding-right:2px}
body.biz .menu a{color:rgba(255,255,255,.78)}
body.biz .menu a:hover,body.biz .menu a.on{color:#fff}
body.biz .menu a.on{color:var(--blue-lit)}
body.biz .nav .right a{color:rgba(255,255,255,.78)}
body.biz .pill{background:var(--orange);color:#fff}
body.biz .pill:hover{background:#FFA043}
body.biz .page-head{background:linear-gradient(180deg,#0E1E33,#0A1626)}
body.biz .band-white{background:#0A1626}
body.biz .band-wash{background:#0C1B2E}
body.biz .btn-w{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)}
body.biz .btn-w:hover{background:rgba(255,255,255,.14)}
body.biz .off,body.biz .item,body.biz .zone,body.biz .ct,body.biz .pos div,body.biz .tw,body.biz .ctab,body.biz .cta-strip{background:#0E1E33}
body.biz .off:hover,body.biz .item:hover,body.biz .zone:hover,body.biz .ct:hover,body.biz .pos div:hover{background:#132741}
body.biz .off.feat{background:#1B1A22;box-shadow:0 0 0 1.5px var(--orange) inset}
body.biz .row2 .shotbox{background:#0E1E33}
body.biz .row2 .shotbox img,body.biz .item .ph img,body.biz .tile .shot img{mix-blend-mode:normal;background:#fff;border-radius:14px;padding:14px}
body.biz .hero-dev{mix-blend-mode:normal;background:#fff;border-radius:22px;padding:26px;width:min(380px,72vw)}
body.biz .hero-stage{background:linear-gradient(180deg,#0A1626,#0E1E33 70%,#12253C)}
body.biz .ct .ic{background:rgba(43,155,224,.14)}
body.biz .cov{background:#0E1E33;box-shadow:0 20px 50px rgba(0,0,0,.5)}
body.biz .field input{background:#0A1626;border-color:rgba(255,255,255,.14);color:#fff}
body.biz .field input::placeholder{color:#6B7C90}
body.biz .cov-out.show{background:rgba(43,155,224,.12);color:#CFEAFF}
body.biz footer{background:#081220;border-top:1px solid rgba(255,255,255,.09)}
body.biz .q button{color:#fff}
body.biz .q button::after{border-color:#8FA0B3}
body.biz table.simple td,body.biz .ctab td{border-top-color:rgba(255,255,255,.09)}
body.biz table.simple tbody tr:hover,body.biz .ctab tbody tr:hover{background:rgba(43,155,224,.09)}
body.biz .tile.white{background:#0E1E33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
body.biz .tile{background:#0E1E33}
body.biz .inc li::before{border-color:var(--blue-lit)}

/* cartes services entreprise */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px;text-align:left}
.svc .s{background:var(--wash);border-radius:20px;padding:32px;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s}
.svc .s:hover{transform:translateY(-5px)}
.svc .s .ico{width:44px;height:44px;border-radius:13px;background:rgba(43,155,224,.16);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.svc .s .ico svg{width:21px;height:21px;stroke:var(--blue-lit);fill:none;stroke-width:1.7}
.svc .s h3{font-size:21px;font-weight:600;letter-spacing:-.024em;margin:0}
.svc .s p{font-size:15.5px;color:var(--grey);margin:10px 0 0;line-height:1.5}
.svc .s .more{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:15px;color:var(--blue-lit)}
.svc .s:hover .more{gap:9px}

/* produits entreprise */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;text-align:left}
.prod{background:var(--wash);border-radius:20px;padding:30px;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s}
.prod:hover{transform:translateY(-5px)}
.prod .tag{font-size:12.5px;font-weight:600;color:var(--orange);letter-spacing:.01em}
.prod h3{font-size:23px;font-weight:700;letter-spacing:-.028em;margin:8px 0 0}
.prod p{font-size:15px;color:var(--grey);margin:10px 0 0;line-height:1.5}
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;text-align:left}
.kit{background:var(--wash);border-radius:20px;padding:28px;transition:transform .3s,background .25s}
.kit:hover{transform:translateY(-5px)}
.kit .k{font-size:12.5px;font-weight:600;color:var(--blue-lit)}
.kit h4{font-size:20px;font-weight:600;letter-spacing:-.024em;margin:7px 0 0}
.kit p{font-size:14.5px;color:var(--grey);margin:9px 0 0;line-height:1.45}
.hero-dev.maison{width:min(980px,94vw);mix-blend-mode:normal;filter:drop-shadow(0 30px 46px rgba(17,20,24,.17))}
.hero-stage{height:auto;min-height:0;align-items:flex-end;padding:26px 0 0;background:none}
.hero-stage #wave{opacity:.5}
.cov-act{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cov-act .btn{flex:1;min-width:190px;margin-top:0}
@media (max-width:980px){.svc,.prods,.kits{grid-template-columns:1fr}.cut{padding:22px;min-height:0}}

/* ---------- photos entreprise ---------- */
.svc .s{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svc .s .ph{height:190px;overflow:hidden;background:#0A1626}
.svc .s .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.svc .s:hover .ph img{transform:scale(1.05)}
.svc .s .bd{padding:28px 30px 32px;flex:1;display:flex;flex-direction:column}
.svc .s .ico{margin:-42px 0 16px;position:relative;z-index:2;background:#16294180;backdrop-filter:blur(14px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.svc .s .more{margin-top:auto;padding-top:14px}
.svc .s.plain .bd{padding-top:32px}
.svc .s.plain .ico{margin:0 0 18px}

.shotbox.render{padding:0;background:none;min-height:0}
.shotbox.render img{width:100%;height:auto;max-height:none;mix-blend-mode:normal;filter:drop-shadow(0 22px 38px rgba(17,20,24,.15))}
.shotbox.photo{padding:0;background:#0A1626}
.shotbox.photo img{width:100%;height:100%;max-height:none;object-fit:cover;display:block;
  mix-blend-mode:normal;background:none;border-radius:0;padding:0}
body.biz .row2 .shotbox.photo img{mix-blend-mode:normal;background:none;border-radius:0;padding:0}
.row2 .shotbox.photo{min-height:400px}

.bizhero{position:relative;margin-top:38px;border-radius:0;overflow:hidden;height:min(52vw,520px)}
.bizhero img{width:100%;height:100%;object-fit:cover;display:block}
.bizhero.flat{height:min(34vw,380px);margin-top:0}
.bizhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,38,.55),rgba(10,22,38,0) 26%,rgba(10,22,38,0) 66%,rgba(10,22,38,.94))}

.photoband{position:relative;border-radius:24px;overflow:hidden;margin-top:56px;min-height:360px;
  display:flex;align-items:flex-end}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,18,32,.94) 6%,rgba(8,18,32,.72) 46%,rgba(8,18,32,.12))}
.photoband .cap{position:relative;z-index:2;padding:44px 46px;max-width:56ch;text-align:left}
.photoband .cap p{font-size:17px;color:rgba(255,255,255,.86);margin:12px 0 0;line-height:1.5}
.photoband .cap .eyebrow{color:var(--orange);margin:0}
.photoband .cap h3{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;margin:8px 0 0;color:#fff;line-height:1.12}

.prod{padding:0;overflow:hidden}
.prod .ph{height:172px;overflow:hidden;background:#0A1626}
.prod .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.prod:hover .ph img{transform:scale(1.05)}
.prod .bd{padding:26px 28px 30px}
/* cartes zones avec photo */
.zone{padding:0;overflow:hidden;display:flex;flex-direction:column}
.zone .ph{height:150px;overflow:hidden;background:var(--wash)}
.zone .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.zone:hover .ph img{transform:scale(1.05)}
.zone .bd{padding:24px 26px 28px;flex:1}
.zone:hover{background:var(--wash)}
.zone:hover .bd{background:transparent}

/* bandeau photo pleine largeur, thème clair */
.lifeband{position:relative;overflow:hidden;height:min(46vw,460px);margin:0}
.lifeband img{width:100%;height:100%;object-fit:cover;display:block}
.lifeband .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 0 40px;
  background:linear-gradient(180deg,rgba(6,14,26,0),rgba(6,14,26,.86))}
.lifeband .cap .wide{text-align:left}
.lifeband .cap .eyebrow{color:#FFB870;margin:0}
.lifeband .cap h3{font-size:clamp(24px,3.2vw,38px);font-weight:700;letter-spacing:-.032em;
  color:#fff;margin:8px 0 0;line-height:1.1;max-width:22ch}
.lifeband .cap p{font-size:16.5px;color:rgba(255,255,255,.84);margin:10px 0 0;max-width:52ch;line-height:1.5}
.scene{position:relative;height:165vh;height:165svh;background:#06041a;color:#fff;margin:0;padding:0}
.scene .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.scene .sat{position:absolute;left:50%;top:5%;width:18%;max-width:520px;transform:translateX(-50%);will-change:transform;pointer-events:none;z-index:1}
.scene .sat img{display:block;width:100%;height:auto}
.scene .beam{position:absolute;left:50%;top:18%;height:68%;width:10px;margin-left:-5px;border-radius:6px;transform-origin:50% 0%;will-change:transform;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(255,175,95,.95),rgba(255,135,60,.85) 60%,rgba(255,120,50,.6));box-shadow:0 0 16px 5px rgba(255,140,60,.42);animation:beampulse 2.6s ease-in-out infinite}
.scene .beam::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;border-radius:3px;
  background:repeating-linear-gradient(to bottom,rgba(255,230,195,.15) 0%,rgba(255,255,245,1) 10%,rgba(255,230,195,.15) 22%,rgba(255,230,195,.15) 50%);background-size:100% 120px;animation:beamflow 1.2s linear infinite}
@keyframes beamflow{from{background-position:0 0}to{background-position:0 120px}}
@keyframes beampulse{0%,100%{box-shadow:0 0 16px 5px rgba(255,140,60,.42)}50%{box-shadow:0 0 26px 9px rgba(255,150,70,.6)}}
.scene .cap{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:3}
.scene .cap .wide{width:100%}
.scene .cap .wide > *{will-change:transform,opacity}
.scene .house-shade,.scene .house-light{position:absolute;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.scene .house-shade{background:radial-gradient(ellipse,#060510 25%,rgba(6,5,16,.9) 45%,transparent 72%)}
.scene .house-light{background:radial-gradient(ellipse,rgba(255,201,108,.62),rgba(255,150,52,.28) 38%,transparent 70%);mix-blend-mode:screen}
.scene:not(.scene-active) .beam,.scene:not(.scene-active) .beam::after{animation-play-state:paused}
.scene .eyebrow{color:#FFB870;margin:0}
.scene h2{font-size:clamp(28px,3.6vw,50px);font-weight:700;letter-spacing:-.032em;line-height:1.06;margin:8px 0 0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.scene h2{max-width:15ch}
.scene .cap p:not(.eyebrow){font-size:17px;color:rgba(255,255,255,.86);margin:16px 0 0;max-width:38ch;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.6)}

@media (max-width:980px){.bizhero{height:64vw}.photoband{min-height:300px}.photoband .cap{padding:32px 26px}
  .lifeband{height:62vw}.lifeband .cap{padding:28px 0 24px}
  .scene{min-height:1050px}.scene .stage{min-height:700px}
  .scene .cap{align-items:flex-start;padding-top:82px}.scene .cap p:not(.eyebrow){max-width:48ch;font-size:16px}}
@media (prefers-reduced-motion:reduce){.scene{height:100vh;height:100svh;min-height:700px}.scene .stage{position:relative}.scene .beam,.scene .beam::after{animation:none!important}}
@media (max-width:980px){
  .fibersky-scene-active .hn-pill{width:48px;height:48px;padding:0;justify-content:center}
  .fibersky-scene-active .hn-pill span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ================= agent flottant ================= */
#hn-agent{position:fixed;left:auto;right:22px;bottom:20px;transform:none;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
#hn-agent>*{pointer-events:auto}
#hn-agent.hn-drag{user-select:none}
#hn-agent.hn-drag .hn-panel,#hn-agent.hn-drag .hn-pill{transition:none}

.hn-pill{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;
  border:0;border-radius:999px;cursor:grab;touch-action:none;font:500 14.5px Inter,system-ui,sans-serif;
  letter-spacing:-.01em;color:#fff;background:var(--blue);
  box-shadow:0 10px 30px rgba(10,122,173,.34),0 2px 6px rgba(17,20,24,.14);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background .2s}
.hn-pill:hover{background:var(--blue-lit);transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(10,122,173,.38)}
.hn-pill .hn-ico{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linejoin:round}
.hn-pill .hn-ico circle{fill:#fff;stroke:none}
#hn-agent.on .hn-pill{opacity:0;transform:translateY(10px) scale(.94);pointer-events:none}

.hn-panel{width:min(430px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 110px));
  background:var(--paper);border-radius:20px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 30px 70px rgba(17,20,24,.22),0 0 0 1px var(--line);
  animation:hnUp .26s cubic-bezier(.2,.7,.2,1)}
#hn-agent.on .hn-panel{display:flex}
@keyframes hnUp{from{opacity:0;transform:translateY(14px) scale(.985)}
                to{opacity:1;transform:none}}

.hn-head{display:flex;align-items:center;gap:10px;padding:14px 14px 13px 16px;cursor:grab;touch-action:none;
  border-bottom:1px solid var(--line)}
.hn-dot{width:9px;height:9px;border-radius:50%;background:#34C759;flex:none;
  box-shadow:0 0 0 3px rgba(52,199,89,.18)}
.hn-id{flex:1;min-width:0;line-height:1.25}
.hn-id b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hn-id i{display:block;font-style:normal;font-size:12px;color:var(--grey);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hn-agent.hn-drag .hn-pill,#hn-agent.hn-drag .hn-head{cursor:grabbing}
.hn-head .hn-x{cursor:pointer}
.hn-reset{border:0;background:none;color:var(--grey);cursor:pointer;padding:5px;
  border-radius:8px;display:flex;align-items:center;transition:color .18s,background .18s}
.hn-reset svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hn-reset:hover{color:var(--blue);background:var(--wash)}
.hn-x{border:0;background:none;font-size:22px;line-height:1;color:var(--grey);cursor:pointer;
  padding:2px 4px;border-radius:8px}
.hn-x:hover{color:var(--ink);background:var(--wash)}

.hn-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.hn-m{font-size:14.5px;line-height:1.5;max-width:88%;border-radius:14px;padding:10px 13px;
  letter-spacing:-.008em;word-wrap:break-word}
.hn-m.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.hn-m.bot{align-self:flex-start;background:var(--wash);color:var(--ink);
  border-bottom-left-radius:5px}
.hn-m strong{font-weight:600}
.hn-wait{display:flex;gap:4px;align-items:center;padding:14px 15px}
.hn-wait i{width:6px;height:6px;border-radius:50%;background:var(--grey);opacity:.5;
  animation:hnDot 1.3s ease-in-out infinite}
.hn-wait i:nth-child(2){animation-delay:.18s}
.hn-wait i:nth-child(3){animation-delay:.36s}
@keyframes hnDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:.9}}

.hn-hit{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.hn-hit:first-of-type{margin-top:10px}
.hn-hit a{display:block;font-size:14px;font-weight:600;color:var(--blue);
  letter-spacing:-.015em;line-height:1.3}
.hn-hit a:hover{text-decoration:underline}
.hn-hit a span{display:block;font-size:11px;font-weight:500;color:var(--grey);
  margin-top:2px;letter-spacing:.01em;text-transform:uppercase}
.hn-hit p{margin:5px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* carte d'offre citée par l'agent */
.hn-off{margin:11px 0 0;padding:13px 14px;border-radius:13px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line)}
.hn-off b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hn-sp{font-size:12.5px;color:var(--grey);margin-top:3px;line-height:1.35}
.hn-pr{display:flex;align-items:baseline;gap:7px;margin-top:9px}
.hn-pr s{font-size:13px;color:var(--grey)}
.hn-pr em{font-style:normal;font-size:23px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.hn-pr span{font-size:12.5px;color:var(--grey)}
.hn-cr{font-size:11.5px;color:var(--orange);margin-top:4px}
.hn-alt{font-size:12px;color:var(--grey);margin-top:9px;line-height:1.55}
.hn-t{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.hn-t td{padding:5px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.hn-t td:last-child{text-align:right;white-space:nowrap;color:var(--ink)}
.hn-t tr:first-child td{border-top:0}

.hn-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.hn-b{flex:1;min-width:130px;text-align:center;padding:9px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;background:var(--blue);color:#fff}
.hn-b.w{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

.hn-chips{display:flex;gap:7px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* le dégradé dit que la bande se fait défiler, au lieu d'un mot tranché */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.hn-chips::-webkit-scrollbar{display:none}
.hn-chips button{white-space:nowrap;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-2);font:500 12.5px Inter,system-ui,sans-serif;padding:7px 12px;
  border-radius:999px;cursor:pointer;transition:background .18s,color .18s}
.hn-chips button:hover{background:var(--wash);color:var(--ink)}

.hn-form{display:flex;align-items:center;gap:8px;padding:12px 12px 14px;
  border-top:1px solid var(--line)}
.hn-form input{flex:1;height:40px;border:1px solid var(--line);background:var(--wash);
  border-radius:12px;padding:0 13px;font:400 14.5px Inter,system-ui,sans-serif;
  color:var(--ink);outline:none;transition:border-color .18s,background .18s;min-width:0}
.hn-form input::placeholder{color:var(--grey)}
.hn-form input:focus{border-color:var(--blue);background:var(--paper)}
.hn-form button{width:40px;height:40px;flex:none;border:0;border-radius:12px;cursor:pointer;
  background:var(--blue);display:flex;align-items:center;justify-content:center}
.hn-form button:hover{background:var(--blue-lit)}
.hn-form button svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

body.biz .hn-panel{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
body.biz .hn-m.bot{background:#132741}
body.biz .hn-chips button,body.biz .hn-b.w,body.biz .hn-off{background:#0E1E33}

@media (max-width:620px){
  #hn-agent{left:12px;right:12px;bottom:14px;transform:none;align-items:stretch}
  .hn-pill{align-self:flex-end}
  .hn-panel{width:100%;max-height:calc(100vh - 90px)}
}
@media (prefers-reduced-motion:reduce){
  .hn-panel{animation:none}
  .hn-pill{transition:none}
}

/* ================= panneau « Demander cette offre » ================= */
.hn-ask{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(17,20,24,.42);backdrop-filter:blur(3px)}
.hn-ask.on{display:flex}
.hn-ask-box{position:relative;width:min(430px,100%);max-height:calc(100vh - 36px);overflow-y:auto;
  background:var(--paper);border-radius:20px;padding:26px 24px 22px;
  box-shadow:0 30px 70px rgba(17,20,24,.28),0 0 0 1px var(--line);
  animation:hnAskUp .24s cubic-bezier(.2,.7,.2,1)}
@keyframes hnAskUp{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.hn-ask-box h3{font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin:0}
.hn-ask-o{margin:6px 0 18px;font-size:14px;color:var(--blue);font-weight:500;letter-spacing:-.01em}
.hn-ask-box .field{margin-bottom:12px}
.hn-ask-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:24px;line-height:1;
  color:var(--grey);cursor:pointer;padding:2px 6px;border-radius:9px}
.hn-ask-x:hover{color:var(--ink);background:var(--wash)}
.hn-ask-note{margin-top:12px;font-size:12.5px;color:var(--grey);line-height:1.55}
.hn-ask-ok{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.hn-ask-ok.err{color:var(--orange)}
.hn-ask-ok.done{color:#1E8E4A;font-weight:500}
body.ask-open{overflow:hidden}
body.biz .hn-ask-box{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){.hn-ask-box{animation:none}}

/* ================================================================
   TELEPHONE
   Le site n'est pas une page de bureau retrecie. Sous 820 px on
   change le rythme vertical, l'echelle typographique, l'alignement
   et la navigation. Tout ce qui se touche fait au moins 46 px.
   ================================================================ */

/* ---- le tiroir n'existe pas sur grand ecran ---- */
.burger{display:none}
.mnav{display:none}

@media (max-width:820px){

  /* --- en-tete compact et colle en haut --------------------------------- */
  .switchbar{display:none}                     /* ses liens passent dans le tiroir */
  .nav{position:sticky;top:0;z-index:800;height:58px;
       background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
       border-bottom:1px solid var(--line)}
  body.biz .nav{background:rgba(10,22,38,.86)}
  .nav .wide{height:58px;display:flex;align-items:center;gap:12px;
             flex-wrap:nowrap;padding:0 16px}
  .nav .logo{order:0;margin:0}
  .nav .logo img{height:26px}
  html.js .nav .menu{display:none}            /* remplacee par le tiroir */
  html:not(.js) .burger,html:not(.js) .mnav{display:none}  /* filet de securite */
  .nav .right{order:1;margin-left:auto;display:flex;align-items:center;gap:8px}
  .nav .right .pill{font-size:13px;padding:9px 15px;min-height:38px;display:inline-flex;
                    align-items:center}

  html.js .burger{display:inline-flex;align-items:center;justify-content:center;
          width:44px;height:44px;margin-right:-8px;border:0;background:none;cursor:pointer}
  .burger svg{width:23px;height:23px;fill:none;stroke:var(--ink);stroke-width:1.9;
              stroke-linecap:round}

  /* --- le tiroir --------------------------------------------------------- */
  .mnav{display:block;position:fixed;inset:0;z-index:1100;background:var(--paper);
        overflow-y:auto;-webkit-overflow-scrolling:touch;
        padding:0 20px calc(28px + env(safe-area-inset-bottom));
        transform:translateY(-8px);opacity:0;pointer-events:none;
        transition:opacity .2s ease,transform .2s ease}
  .mnav.on{opacity:1;transform:none;pointer-events:auto}
  .mnav-head{display:flex;align-items:center;justify-content:space-between;
             height:58px;margin:0 -20px;padding:0 16px 0 20px;
             border-bottom:1px solid var(--line)}
  .mnav-head .logo{min-height:44px;align-items:center}
  .mnav-head .logo img{height:26px}
  .mnav-x{width:44px;height:44px;border:0;background:none;cursor:pointer;
          display:flex;align-items:center;justify-content:center}
  .mnav-x svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;
              stroke-linecap:round}

  .mnav-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:20px 0 4px;
            padding:4px;background:var(--wash);border-radius:12px}
  .mnav-seg a{text-align:center;padding:11px 0;border-radius:9px;font-size:14.5px;
              font-weight:500;color:var(--ink-2)}
  .mnav-seg a.on{background:var(--paper);color:var(--ink);font-weight:600;
                 box-shadow:0 1px 3px rgba(17,20,24,.10)}

  .mnav-links{margin-top:14px}
  .mnav-links a{display:flex;align-items:center;justify-content:space-between;
                min-height:56px;padding:0 2px;font-size:20px;font-weight:600;
                letter-spacing:-.028em;color:var(--ink);
                border-bottom:1px solid var(--line)}
  .mnav-links a.on{color:var(--blue)}
  .mnav-links a span{font-size:22px;font-weight:400;color:var(--grey)}

  .mnav-sec{display:flex;gap:22px;margin-top:18px}
  .mnav-sec a{min-height:44px;display:inline-flex;align-items:center;
              font-size:15px;color:var(--ink-2)}
  .mnav-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .mnav-note{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--grey)}
  body.menu-open{overflow:hidden}

  /* --- rythme vertical --------------------------------------------------- */
  .wide{padding:0 20px}
  .sec-pad{padding:56px 0 48px}
  .hero{padding:30px 0 0;text-align:left}
  .hero-stage{height:230px;margin-top:24px}
  .annonce{padding-top:26px}
  .row2{padding:30px 0;gap:26px}
  .cta-strip{padding:30px 22px}
  .photoband .cap,.lifeband .cap{padding:24px 0 22px}

  /* --- echelle typographique --------------------------------------------- */
  .h-xl{font-size:35px;line-height:1.08;letter-spacing:-.032em}
  .h-lg{font-size:30px;line-height:1.1;letter-spacing:-.03em}
  .h-md{font-size:23px;line-height:1.16;letter-spacing:-.024em}
  .sub{font-size:16.5px;line-height:1.5;max-width:none;margin-left:0;margin-right:0}
  .eyebrow{font-size:14.5px}
  .lnk{font-size:16.5px;min-height:44px;align-items:center}
  .btn{font-size:15.5px;padding:13px 22px;min-height:48px}

  /* --- a gauche, pas au centre -------------------------------------------
     Un paragraphe centre sur 335 px de large donne des bords en dents de
     scie et casse la lecture. */
  .center,.hero .wide,.sub.center,.h-md.center,.cov h2,.cov .sub{text-align:left}
  .cov .sub{margin-left:0}
  .hero .links,.annonce .links{justify-content:flex-start}

  /* --- les offres deviennent une bande qu'on fait glisser ------------------
     Quatorze cartes empilees, c'est un couloir sans fin. En rail, on en voit
     une entiere et le bord de la suivante : on comprend qu'il y en a d'autres. */
  .offers,.offers.c2,.offers.c3{display:flex;grid-template-columns:none;
    gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:4px 20px 8px}
  .offers::-webkit-scrollbar{display:none}
  .offers>*{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .off,.offers .off{scroll-snap-align:center}

  /* --- tableaux : dire qu'ils glissent ------------------------------------ */
  .tw{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
              mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)}

  /* --- cibles tactiles ---------------------------------------------------- */
  .fcol a,.fbot a{min-height:44px;display:flex;align-items:center}
  .q button{min-height:52px}

  /* --- le bouton de l'en-tete tient sur une ligne -------------------------
     « Vérifier ma zone » passait sur deux lignes et mangeait la moitie de la
     barre. On le resserre au lieu de le laisser gonfler. */
  .nav .right .pill{white-space:nowrap;font-size:12.5px;padding:9px 13px;
                    letter-spacing:-.012em}

  /* --- l'annonce s'aligne comme le reste ---------------------------------- */
  .annonce{text-align:left;padding-top:26px}
  .annonce h2{font-size:34px;letter-spacing:-.034em;margin-top:14px}
  .an-sub{font-size:16.5px;max-width:none;margin-left:0;margin-right:0}
  .wrap{padding:0 20px}

  /* --- les liens d'action se serrent -------------------------------------- */
  .links{gap:8px 20px;margin-top:16px;justify-content:flex-start}
  .annonce .an-shot{margin-top:18px}

  /* --- tout ce qui restait centre passe a gauche --------------------------
     Il restait des blocs concus pour une colonne de 1240 px : en-tetes de
     page, bandes d'appel a l'action, tuiles, chiffres. Centres sur 335 px,
     ils donnent des bords en dents de scie et un texte qui saute. */
  .page-head{padding:26px 0 24px;text-align:left}
  .page-head .crumb{margin-bottom:6px}
  .cta-strip{text-align:left;margin-top:36px;border-radius:18px}
  .cta-strip .sub{margin-left:0}
  .tile{text-align:left;padding:30px 22px 0;min-height:0;border-radius:18px}
  .tile .sub{margin-left:0}
  .why{text-align:left;gap:22px;margin-top:32px}
  .nums{justify-content:flex-start;gap:26px;margin-top:20px}
  .price{text-align:left}
  .ctab{margin-top:24px;border-radius:18px}

  /* le tableau des classes glisse aussi : on le dit avec le meme degrade */
  .ctab{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
                mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)}

  /* --- cibles tactiles : rien en dessous de 44 px -------------------------- */
  .nav .logo{min-height:44px;align-items:center}
  .nav .right .pill{min-height:40px}
  .tabs button{min-height:44px;padding:11px 18px}
  .crumb a{min-height:38px;display:inline-flex;align-items:center}

  /* --- l'assistant ne doit pas manger le pied de page ---------------------- */
  #hn-agent{bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* --- prose des pages legales ---------------------------------------------- */
.prose{max-width:66ch}
.prose h2{font-size:21px;font-weight:600;letter-spacing:-.024em;color:var(--ink);
          margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 12px}
.prose a{color:var(--blue)}
.prose .bullets{margin:8px 0 14px}
.prose .maj{margin-top:30px;font-size:13.5px;color:var(--grey)}