/* OCALL — feuille de style commune */
html,body{margin:0}
/* Layout : version blanche ; l'anneau du logo en fibres 3D qui ondulent à droite du titre ; sections alternées blanc / lavande très pâle ; une couleur du logo par offre ; bandeau nuit (fond de l'Obox) pour le secours 4G ; maquette d'espace client interactive */
:root{
--bg:#FFFFFF; --bg-2:#F6F5FB; --bg-3:#EEECF6; --ink:#141A33; --soft:#5A5E7E; --rule:#E5E3EF;
--night:#011432; --night-2:#0A2048; --on-night:#F2F4FB; --on-night-soft:#9FB0D2;
--cyan:#26D1E3; --cyan-ink:#0E8C9A; --purple:#9715D7; --magenta:#C802AD; --coral:#EA4857; --orange:#F56438; --orange-ink:#C8461C;
--ok:#14A06B; --warn:#E08A00;
--brand:linear-gradient(100deg, var(--orange) 0%, var(--coral) 22%, var(--magenta) 48%, var(--purple) 72%, var(--cyan) 100%);
--f:"Outfit", "Futura", "Century Gothic", system-ui, sans-serif;
--gl:max(20px, env(safe-area-inset-left, 0px)); --gr:max(20px, env(safe-area-inset-right, 0px));
color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--f); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--purple); outline-offset:3px; border-radius:6px}
.wrap{max-width:1240px; margin:0 auto; padding-left:var(--gl); padding-right:var(--gr)}
h1,h2,h3,h4{font-weight:500; letter-spacing:-.025em; line-height:1.05; text-wrap:balance; margin:0}
.grad{background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.sym{background:url(img/logo-symbole.png) center/contain no-repeat; display:inline-block}
.word{background:url(img/logo-ocall.png) center/contain no-repeat; display:inline-block}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.btn{font:500 16px var(--f); border:0; cursor:pointer; border-radius:999px; padding:15px 26px; text-decoration:none; display:inline-flex; gap:10px; align-items:center; transition:transform .25s, box-shadow .25s, background .25s}
.btn-brand{color:#fff; background:linear-gradient(100deg, var(--orange), var(--magenta) 60%, var(--purple)); box-shadow:0 14px 30px -14px rgba(200,2,173,.7)}
.btn-brand:hover{transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(200,2,173,.85)}
.btn-line{color:var(--ink); background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--bg)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate;
background:radial-gradient(55% 70% at 80% 38%, rgba(151,21,215,.10), transparent 70%), radial-gradient(35% 45% at 95% 85%, rgba(245,100,56,.10), transparent 70%), radial-gradient(30% 40% at 62% 92%, rgba(38,209,227,.10), transparent 70%), var(--bg)}
.visual{position:absolute; z-index:-1; top:28px; right:max(20px, calc((100% - 1240px) / 2 + 20px)); width:min(44%, 560px); aspect-ratio:1}
#ring{position:absolute; inset:-30%; -webkit-mask-image:radial-gradient(closest-side, #000 48%, transparent 92%); mask-image:radial-gradient(closest-side, #000 48%, transparent 92%)}
#ring canvas{display:block; width:100%; height:100%}
#hero-logo{position:absolute; left:26%; top:27%; width:48%; height:auto; filter:drop-shadow(0 26px 36px rgba(151,21,215,.22)); will-change:transform}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .sym{width:40px; height:46px}
.brand .word{width:108px; height:21px}
.pill{padding:9px 16px; border-radius:999px; font-weight:500; font-size:15px; white-space:nowrap; user-select:all; background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; border:1.5px solid transparent}
.hero-body{padding-block:64px 88px; display:flex; flex-direction:column; gap:28px; max-width:620px}
.hero h1{font-size:clamp(42px, 5.8vw, 78px); font-weight:400}
.hero p{font-size:21px; font-weight:300; line-height:1.5; color:var(--soft); margin:0; max-width:34ch}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
@media (max-width:860px){
#ring{inset:-16%}
.visual{top:18px; left:50%; right:auto; width:300px; margin-left:-150px}
.hero-body{padding-block:300px 48px}
}
@media (max-width:520px){.pill{display:none}}
/* ---------- Sections ---------- */
section{padding-block:110px}
.alt{background:var(--bg-2)}
.kicker{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.kicker i{width:10px; height:10px; border-radius:50%; background:var(--c, var(--purple))}
.head{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:44px}
.head h2{font-size:clamp(34px, 4.6vw, 58px); max-width:16ch; margin-top:12px}
.head p{margin:0; max-width:58ch; color:var(--soft); font-weight:300; font-size:19px; line-height:1.55}
.head h2{max-width:22ch}
.why-pills{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none}
.why-pills li{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border:1px solid var(--rule); border-radius:999px; background:#fff; font-size:14.5px; color:var(--ink)}
.why-pills li i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); font-style:normal; font-size:12px}
.note{font-size:13px; color:var(--soft); margin:18px 0 0}
/* Internet */
.plans{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.plan{background:var(--bg); border:1px solid var(--rule); border-radius:24px; padding:34px; display:flex; flex-direction:column; gap:18px; min-width:0}
.plan.feat{border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; box-shadow:0 30px 60px -40px rgba(151,21,215,.45)}
.plan .badge{align-self:flex-start; font-size:13px; font-weight:500; padding:5px 12px; border-radius:999px; background:var(--bg-3)}
.plan-img{display:block; height:150px; width:auto; max-width:100%; object-fit:contain; align-self:center; filter:drop-shadow(0 18px 22px rgba(20,26,51,.25))}
.plan h3{font-size:30px}
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.price b{font-size:52px; font-weight:500; letter-spacing:-.03em; line-height:1}
.price span{color:var(--soft); font-size:15px}
.plan ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; color:var(--soft)}
.plan li{display:flex; gap:10px}
.plan li::before{content:""; flex:none; width:18px; height:18px; margin-top:4px; border-radius:50%; background:var(--c, var(--cyan)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain}
.plan .btn{align-self:flex-start; margin-top:auto}
@media (max-width:860px){.plans{grid-template-columns:1fr} .plan{padding:26px}}
.why{margin-top:56px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.why-txt,.fair{grid-column:1/-1; max-width:70ch}
.why h3{font-size:clamp(26px, 3vw, 34px); margin-bottom:12px}
.why p{margin:0 0 10px; color:var(--soft); font-weight:300; font-size:18px}
.why p strong{color:var(--ink); font-weight:500}
.schema{margin:0; background:#141A33; color:#F2F4FB; border-radius:24px; padding:24px 22px 18px; display:flex; flex-direction:column; gap:10px; min-width:0; position:relative; overflow:hidden; isolation:isolate}
.schema::before{content:""; position:absolute; inset:auto -20% -40% auto; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(76,111,224,.25), transparent 70%); z-index:-1}
.schema.good{box-shadow:0 0 0 1.5px transparent, 0 30px 60px -30px rgba(200,2,173,.55); background:linear-gradient(#141A33,#141A33) padding-box, var(--brand) border-box; border:1.5px solid transparent}
.schema.good::before{background:radial-gradient(circle, rgba(200,2,173,.3), transparent 70%)}
.schema figcaption{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.schema figcaption b{display:block; font-size:21px; font-weight:500}
.schema figcaption span{color:#9FB0D2; font-size:15px; display:block}
.schema figcaption em{font-style:normal; font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap}
.schema figcaption em.bad{background:rgba(234,72,87,.16); color:#FF9AA6}
.schema figcaption em.ok{background:rgba(63,211,154,.14); color:#3FD39A}
.schema svg{width:100%; height:auto; display:block; font-family:var(--f)}
.fair{background:var(--bg-2); border-radius:22px; padding:26px 28px; max-width:none}
@media (max-width:860px){.why{grid-template-columns:1fr} .schema{padding:16px}}
.licences{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-bottom:40px}
.licence{border:1px solid var(--rule); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:14px; background:var(--bg); min-width:0}
.licence.conv{border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; box-shadow:0 30px 60px -40px rgba(151,21,215,.45)}
.devices{display:flex; align-items:center; gap:6px; height:64px}
.devices span{font-size:22px; color:var(--soft)}
.licence h3{font-size:28px}
.licence > p{margin:0; color:var(--soft); font-weight:300; font-size:17px}
.licence ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.licence .for{font-size:15px; color:var(--ink); font-weight:400}
.licence .price{margin-top:auto}
.licence .price b{font-size:40px}
@media (max-width:860px){.licences{grid-template-columns:1fr} .licence{padding:24px}}
/* Secours / Obox */
.secours{background:var(--night); color:var(--on-night)}
.secours .wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center}
.secours h2{font-size:clamp(32px, 4.2vw, 54px); margin:12px 0 22px}
.secours .kicker{color:var(--on-night-soft)}
.secours p{color:var(--on-night-soft); margin:0 0 14px; max-width:44ch; font-weight:300; font-size:18px}
.obox-side{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0}
.obox{display:block; width:100%; max-width:300px; height:auto; margin-bottom:18px}
.diag{width:100%; height:auto; display:block}
.diag text{font-family:var(--f); fill:var(--on-night-soft); font-size:14px}
.diag .lbl{fill:var(--on-night); font-weight:500; font-size:15px}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.opts span{font-size:14px; padding:6px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:var(--on-night)}
@media (max-width:860px){.secours .wrap{grid-template-columns:1fr; gap:24px}}
/* Mobile */
.mtop{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-bottom:24px}
.nets-card,.need{background:var(--bg); border:1px solid var(--rule); border-radius:24px; padding:30px; display:flex; flex-direction:column; gap:18px; min-width:0}
.signal{display:flex; align-items:flex-end; gap:6px; height:48px}
.signal i{width:12px; border-radius:4px; background:linear-gradient(180deg, var(--magenta), var(--orange)); animation:sig 2.4s ease-in-out infinite}
.signal i:nth-child(1){height:20%} .signal i:nth-child(2){height:40%; animation-delay:.15s} .signal i:nth-child(3){height:60%; animation-delay:.3s} .signal i:nth-child(4){height:80%; animation-delay:.45s} .signal i:nth-child(5){height:100%; animation-delay:.6s}
@keyframes sig{0%,100%{opacity:1; transform:none} 40%{opacity:.35; transform:scaleY(.6)}}
.signal i{transform-origin:bottom}
.slots{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.slot{height:96px; border-radius:18px; background:var(--bg-2); border:1.5px dashed var(--rule); display:grid; place-items:center; padding:12px; text-align:center; transition:transform .3s, box-shadow .3s}
.slot img{max-width:100%; max-height:64px; object-fit:contain}
.slot span{font-size:17px; font-weight:500; color:var(--ink)}
.slot:hover{transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(20,26,51,.45)}
.nets-card p{margin:0; color:var(--soft); font-weight:300}
.perks{display:flex; flex-wrap:wrap; gap:8px}
.perks span{font-size:14px; font-weight:500; padding:6px 13px; border-radius:999px; background:var(--bg-2)}
.perks span:last-child{background:var(--ink); color:#fff}
.need label{font-size:19px; font-weight:500}
.need-val{display:flex; align-items:baseline; gap:8px}
.need-val b{font-size:72px; font-weight:500; letter-spacing:-.04em; line-height:1; background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.need-val span{font-size:22px; color:var(--soft)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:10px; padding:0; border:0; background:linear-gradient(90deg, var(--orange), var(--magenta), var(--purple)) 0/var(--p,12%) 100% no-repeat, var(--bg-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--magenta); box-shadow:0 4px 12px rgba(200,2,173,.35); cursor:pointer}
input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--magenta); cursor:pointer}
.ticks{display:flex; justify-content:space-between; font-size:12px; color:var(--soft); margin-top:-8px}
.reco{margin:0; font-size:17px; color:var(--soft)}
.reco b{color:var(--ink); font-weight:500}
.forfaits{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px}
.ff{position:relative; background:var(--bg); border:1.5px solid var(--rule); border-radius:18px; padding:16px 12px 14px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; min-width:0; cursor:pointer}
.ff:hover{transform:translateY(-4px)}
.ff.on{border-color:transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(200,2,173,.55)}
.ff.on::before{content:"Conseillé"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:500; color:#fff; padding:3px 12px; border-radius:999px; background:linear-gradient(100deg, var(--orange), var(--magenta))}
.gauge{width:52px; height:52px; transform:rotate(-90deg); margin:4px 0 4px}
.gauge circle{fill:none; stroke:var(--bg-3); stroke-width:9}
.gauge .v{stroke:url(#gg); stroke-linecap:round; stroke-dasharray:213.6; stroke-dashoffset:calc(213.6 * (1 - var(--f))); animation:fill 1.4s cubic-bezier(.2,.7,.2,1) both}
.ff.on .gauge .v{animation:fill 1.4s cubic-bezier(.2,.7,.2,1) both, glow 2.4s ease-in-out 1.4s infinite}
@keyframes fill{from{stroke-dashoffset:213.6}}
@keyframes glow{50%{stroke-width:10}}
.ff .go{font-size:30px; font-weight:500; letter-spacing:-.03em; line-height:1}
.ff .go small{font-size:14px; font-weight:400; margin-left:3px}
.ff .p{font-size:17px; font-weight:500; margin-top:2px}
.ff .p small{font-size:12px; color:var(--soft); font-weight:400}
@media (prefers-reduced-motion: reduce){.signal i,.gauge .v{animation:none!important}}
@media (max-width:980px){.forfaits{grid-template-columns:repeat(3, minmax(0,1fr))} .mtop{grid-template-columns:1fr}}
@media (max-width:560px){.forfaits{grid-template-columns:repeat(2, minmax(0,1fr))} .ff:last-child{grid-column:1/-1} .nets-card,.need{padding:22px} .need-val b{font-size:56px}}
/* Téléphonie */
.tel-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:28px; align-items:start}
.lic{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.lic div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; padding:22px 0; border-bottom:1px solid var(--rule)}
.lic h3{font-size:22px}
.lic .pr{font-size:22px; font-weight:500; text-align:right; white-space:nowrap}
.lic .pr small{display:block; font-size:13px; color:var(--soft); font-weight:400}
.lic p{grid-column:1/-1; margin:0; color:var(--soft); font-weight:300; font-size:16px}
.calc{background:var(--ink); color:#fff; border-radius:26px; padding:32px; display:flex; flex-direction:column; gap:20px}
.calc h3{font-size:24px}
.seg{display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.08); border-radius:999px; padding:4px}
.seg button{font:500 15px var(--f); border:0; border-radius:999px; padding:10px; cursor:pointer; background:transparent; color:#C9CDE4}
.seg button[aria-pressed="true"]{background:#fff; color:var(--ink)}
.stepper{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12)}
.stepper label{font-size:15px; color:#C9CDE4}
.st-min{display:block; font-size:12px; color:#8F96BE}
.stepper .ctl{display:flex; align-items:center; gap:4px}
.stepper button{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font:500 20px var(--f); cursor:pointer}
.stepper button:hover{background:rgba(255,255,255,.1)}
.stepper output{min-width:42px; text-align:center; font-size:22px; font-weight:500}
.total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.total b{font-size:50px; font-weight:500; letter-spacing:-.03em; line-height:1}
.total span{color:#C9CDE4; font-size:15px}
.detail{font-size:14px; color:#AEB3D3; margin:0}
@media (max-width:860px){.tel-grid{grid-template-columns:1fr} .calc{padding:24px}}
/* Espace client */
.ec{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:start}
.feats{display:flex; flex-direction:column; gap:20px; margin:0; padding:0; list-style:none}
.feats li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px}
.feats .ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff}
.feats h4{font-size:19px; margin-bottom:4px}
.feats p{margin:0; color:var(--soft); font-weight:300; font-size:16px}
.app{background:var(--bg); border:1px solid var(--rule); border-radius:24px; box-shadow:0 40px 80px -50px rgba(20,26,51,.45); overflow:hidden; min-width:0}
.app-top{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--rule); background:var(--bg-2)}
.app-top .sym{width:24px; height:28px}
.app-top b{font-weight:500; font-size:15px}
.app-top span:last-child{margin-left:auto; font-size:12px; color:var(--soft); background:var(--bg-3); padding:3px 10px; border-radius:999px}
.tabs{display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--rule); overflow-x:auto}
.tabs button{font:500 14px var(--f); border:0; background:transparent; color:var(--soft); padding:10px 14px; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--purple)}
.pane{padding:20px; display:flex; flex-direction:column; gap:16px}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.kpi{background:var(--bg-2); border-radius:14px; padding:14px; min-width:0}
.kpi small{display:block; font-size:12px; color:var(--soft)}
.kpi b{font-size:24px; font-weight:500}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:999px}
.chip.ok{background:#E3F6EE; color:#0B7A50}
.chip.wait{background:#FFF1DA; color:#995E00}
.chip i{width:6px; height:6px; border-radius:50%; background:currentColor}
.list{display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:14px; overflow:hidden}
.list > div{display:flex; align-items:center; gap:12px; padding:12px 14px; font-size:14px}
.list > div + div{border-top:1px solid var(--rule)}
.list .grow{flex:1; min-width:0}
.list small{display:block; color:var(--soft); font-size:12px}
.sw{position:relative; width:42px; height:24px; border-radius:999px; border:0; background:var(--bg-3); cursor:pointer; flex:none; transition:background .2s}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s}
.sw[aria-checked="true"]{background:var(--purple)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.tbl{overflow-x:auto; border:1px solid var(--rule); border-radius:14px}
.tbl table{width:100%; border-collapse:collapse; font-size:13px; min-width:420px}
.tbl th{text-align:left; font-weight:500; color:var(--soft); background:var(--bg-2); padding:9px 12px}
.tbl td{padding:9px 12px; border-top:1px solid var(--rule)}
.chart{display:block; width:100%; height:auto}
.chart text{font-family:var(--f); font-size:11px; fill:var(--soft)}
.legend{display:flex; gap:16px; font-size:12px; color:var(--soft)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:3px}
.meter{height:8px; border-radius:8px; background:var(--bg-3); overflow:hidden; margin-top:6px}
.meter i{display:block; height:100%; border-radius:8px}
.sample{font-size:12px; color:var(--soft); margin:0}
@media (max-width:980px){.ec{grid-template-columns:1fr}}
@media (max-width:520px){.cards{grid-template-columns:1fr 1fr} .pane{padding:14px}}
.mob{margin-top:72px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center}
.mob h3{font-size:clamp(28px, 3.4vw, 40px); margin:12px 0 14px}
.mob p{margin:0 0 16px; color:var(--soft); font-weight:300; font-size:18px; max-width:46ch}
.mob ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.phone{justify-self:center; width:290px; max-width:100%; aspect-ratio:290/560; border-radius:46px; background:var(--ink); padding:12px; box-shadow:0 50px 80px -40px rgba(20,26,51,.55)}
.screen{height:100%; border-radius:36px; overflow:hidden; padding:20px 14px; display:flex; flex-direction:column; gap:12px; background:radial-gradient(120% 60% at 50% 0%, #F3E6FF, #FFFFFF 60%)}
.ph-top{display:flex; align-items:center; gap:8px; font-size:13px}
.ph-top .sym{width:20px; height:23px}
.ph-top span:last-child{margin-left:auto; color:var(--soft)}
.ph-state{border-radius:20px; padding:16px; color:#fff; background:linear-gradient(130deg, var(--orange), var(--magenta) 60%, var(--purple))}
.ph-state small{display:block; font-size:12px; opacity:.85}
.ph-state b{display:block; font-size:21px; font-weight:500; margin:2px 0}
.ph-state span{font-size:12px; opacity:.9}
.notif{display:flex; gap:10px; background:#fff; border-radius:16px; padding:11px 12px; box-shadow:0 8px 20px -12px rgba(20,26,51,.35); font-size:12px; line-height:1.4}
.notif i{flex:none; width:8px; height:8px; border-radius:50%; margin-top:5px}
.notif b{display:block; font-weight:500; font-size:13px}
.notif span{color:var(--soft)}
.notif{animation:pop 9s infinite both}
.n2{animation-delay:.6s} .n3{animation-delay:1.2s} .n4{animation-delay:1.8s}
@keyframes pop{0%,100%{transform:none; opacity:1} 4%{transform:translateY(-3px) scale(1.02)} 8%{transform:none}}
@media (prefers-reduced-motion: reduce){.notif{animation:none}}
@media (max-width:860px){.mob{grid-template-columns:1fr; gap:36px}}
.cta-band{margin-top:48px; border-radius:24px; padding:28px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; background:var(--ink); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.cta-band::before{content:""; position:absolute; inset:-40% -10% auto auto; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(200,2,173,.55), rgba(151,21,215,.15) 50%, transparent 70%); z-index:-1; animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-120px, 40px)}}
.cta-band b{display:block; font-size:clamp(22px, 2.4vw, 28px); font-weight:500; letter-spacing:-.02em}
.cta-band > div:first-child span{color:#C9CDE4; font-weight:300}
.cta-act{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.cta-act span{color:#C9CDE4; font-size:15px}
.star{margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center}
.star h3{font-size:clamp(26px, 3vw, 36px); margin:12px 0 14px}
.star p{margin:0 0 14px; color:var(--soft); font-weight:300; font-size:18px}
.star ul{margin:0 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.star .warn{background:#FFF4E5; border-radius:16px; padding:14px 16px; font-size:16px; color:var(--ink); font-weight:400}
.star .warn b{font-weight:600}
.sat{width:100%; height:auto; display:block}
.why-us{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:18px}
.why-us li{display:flex; gap:10px}
.why-us li::before{content:""; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23C802AD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.float{position:fixed; z-index:30; right:max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:500; text-decoration:none; color:#fff; background:linear-gradient(100deg, var(--orange), var(--magenta) 60%, var(--purple)); box-shadow:0 16px 34px -12px rgba(200,2,173,.7); transition:transform .3s, opacity .3s}
.float .dot{width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.8); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.float.hide{opacity:0; transform:translateY(20px); pointer-events:none}
@media (prefers-reduced-motion: reduce){.cta-band::before,.float .dot{animation:none}}
@media (max-width:860px){.star{grid-template-columns:1fr} .cta-band{padding:24px 20px}}
.wazo{margin-top:56px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:36px; align-items:center; background:var(--bg-2); border-radius:26px; padding:36px}
.wazo-logo{aspect-ratio:auto; padding:34px 28px; max-width:300px; border-radius:22px; background:var(--bg); border:1.5px dashed var(--rule); display:grid; place-content:center; text-align:center; gap:4px}
.wazo-logo img{width:100%; height:auto; margin:auto}
.wazo-logo span{font-size:38px; font-weight:600; letter-spacing:-.03em; background:linear-gradient(100deg, #26D1E3, #4C6FE0); -webkit-background-clip:text; background-clip:text; color:transparent}
.wazo-logo small{font-size:12px; color:var(--soft)}
.wazo h3{font-size:clamp(26px, 3vw, 36px); margin:12px 0 12px}
.wazo p{margin:0 0 16px; color:var(--soft); font-weight:300; font-size:18px; max-width:56ch}
.handsets{margin-top:28px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.hs{border:1px solid var(--rule); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:10px; background:var(--bg); transition:transform .3s, box-shadow .3s; min-width:0}
.hs:hover{transform:translateY(-5px); box-shadow:0 30px 50px -36px rgba(20,26,51,.5)}
.hs svg{width:100%; height:190px; max-height:190px; background:linear-gradient(160deg, var(--bg-2), var(--bg)); border-radius:18px}
.hs .tag{font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-top:6px}
.hs h4{font-size:26px}
.hs p{margin:0; color:var(--soft); font-weight:300}
.hs ul{margin:4px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:15px}
@media (max-width:980px){.handsets{grid-template-columns:1fr 1fr} .handsets .hs:last-child{grid-column:1/-1}}
@media (max-width:640px){.handsets{grid-template-columns:1fr} .wazo{grid-template-columns:1fr; padding:24px} .wazo-logo{max-width:240px; padding:22px}}
.ph-media{position:relative}
.ph-media img{display:none; width:100%; height:190px; object-fit:contain; background:linear-gradient(160deg, var(--bg-2), var(--bg)); border-radius:18px; padding:12px}
.ph-media.has-img img{display:block}
.ph-media.has-img svg{display:none}
.wazo-logo img,.slot img{display:none}
.wazo-logo.has-img img,.slot.has-img img{display:block}
.wazo-logo.has-img span,.wazo-logo.has-img small,.slot.has-img span{display:none}
.wazo-logo.has-img,.slot.has-img{border-style:solid}
.slot.has-img{background:#fff}
.slot[data-net=orange] img{max-height:64px; border-radius:6px}
.slot[data-net=bouygues] img{max-height:58px}
.ct{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; border-radius:28px; padding:56px; background:linear-gradient(135deg, #F0FBF6, #F6F5FB 55%, #FBF1FA)}
.ct h2{font-size:clamp(32px, 4vw, 52px); margin:12px 0 16px}
.ct p{margin:0; color:var(--soft); font-weight:300; font-size:18px; max-width:44ch}
.ct-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ct-list li{display:flex; align-items:center; gap:14px; background:var(--bg); border-radius:18px; padding:16px 18px; box-shadow:0 14px 30px -24px rgba(20,26,51,.4)}
.ct-ic{flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff}
.ct-list div{flex:1; min-width:0}
.ct-list b{display:block; font-weight:500; font-size:17px}
.ct-list small{color:var(--soft); font-size:14px}
.ct-list em{font-style:normal; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; background:#F1E4FB; color:#7A12AE; white-space:nowrap}
.ct-list em.ok{background:#E3F6EE; color:#0B7A50}
@media (max-width:860px){.ct{grid-template-columns:1fr; padding:32px 20px; gap:28px} .ct-list li{display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:14px; row-gap:10px; align-items:start} .ct-list em{grid-column:2; justify-self:start}}
.cards.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.speed{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.speed > div{border:1px solid var(--rule); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0}
.speed small{font-size:12px; color:var(--soft)}
.speed b{font-size:22px; font-weight:500; line-height:1}
.speed b span{font-size:13px; color:var(--soft); font-weight:400}
.speed .chip{align-self:flex-start}
.speed .meter{margin-top:2px}
.mini{font:500 12px var(--f); border:1px solid var(--rule); background:var(--bg); color:var(--ink); border-radius:999px; padding:5px 11px; cursor:pointer; align-self:flex-start; white-space:nowrap}
.mini:hover{border-color:var(--purple); color:var(--purple)}
.mini:disabled{opacity:.5; cursor:default}
.tels .tel-row{flex-wrap:wrap}
.tdot{flex:none; width:10px; height:10px; border-radius:50%}
.tdot.ok{background:#14A06B} .tdot.call{background:var(--purple); animation:ping2 1.6s infinite} .tdot.bad{background:var(--coral)} .tdot.wait{background:var(--warn)}
@keyframes ping2{50%{box-shadow:0 0 0 5px rgba(151,21,215,.18)}}
.chip.call{background:#F1E4FB; color:#7A12AE}
.chip.bad{background:#FDECEE; color:#B42335}
@media (max-width:520px){.speed{grid-template-columns:1fr 1fr} .tels .tel-row .grow{flex-basis:calc(100% - 26px)} .tels .tel-row .st{margin-left:22px}}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.elig-sec{padding-block:72px 40px}
.elig{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; border-radius:30px; padding:48px; background:#141A33; color:#F2F4FB; overflow:hidden; isolation:isolate}
.elig::before{content:""; position:absolute; z-index:-1; width:520px; aspect-ratio:1; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(200,2,173,.45), rgba(151,21,215,.12) 50%, transparent 70%)}
.elig::after{content:""; position:absolute; z-index:-1; width:420px; aspect-ratio:1; left:-160px; bottom:-220px; border-radius:50%; background:radial-gradient(circle, rgba(38,209,227,.28), transparent 70%)}
.elig .kicker{color:#9FB0D2}
.elig h2{font-size:clamp(32px, 4vw, 52px); margin:12px 0 14px}
.elig-txt > p{margin:0 0 24px; color:#C9CDE4; font-weight:300; font-size:18px; max-width:44ch}
.elig-form{position:relative; display:block; background:none; padding:0; border-radius:0; box-shadow:none; color:inherit}
.elig-field{position:relative; display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:6px 6px 6px 18px; color:var(--soft); box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.elig-field input{flex:1; min-width:0; border:0; background:transparent; padding:12px 4px; font:16px var(--f); color:var(--ink)}
.elig-field input:focus{outline:none}
.elig-field:focus-within{box-shadow:0 0 0 3px rgba(200,2,173,.45), 0 20px 40px -24px rgba(0,0,0,.6)}
.elig-sugg{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5; list-style:none; margin:0; padding:6px; background:#fff; border-radius:18px; box-shadow:0 24px 50px -20px rgba(0,0,0,.5)}
.elig-sugg li{padding:10px 14px; border-radius:12px; color:var(--ink); cursor:pointer; font-size:15px}
.elig-sugg li small{color:var(--soft); margin-left:6px}
.elig-sugg li[aria-selected="true"],.elig-sugg li:hover{background:var(--bg-2)}
.elig-err{margin:10px 0 0; min-height:1.4em; color:#FF9AA6; font-size:14px}
.elig-res{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:14px; backdrop-filter:blur(8px)}
.elig-head{display:flex; align-items:center; gap:12px}
.elig-pin{width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg, var(--orange), var(--magenta), var(--purple)); position:relative}
.elig-pin::after{content:""; position:absolute; inset:12px; border-radius:50%; background:#fff}
.elig-head small{display:block; color:#9FB0D2; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.elig-head b{font-size:19px; font-weight:500}
.elig-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.elig-list li{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); border-radius:14px; padding:10px 12px; transition:background .3s}
.elig-list li > div{flex:1; min-width:0}
.elig-list b{display:block; font-weight:500; font-size:15px}
.elig-list small{color:#9FB0D2; font-size:13px}
.ei{flex:none; width:52px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--c)}
.elig-list .chip{white-space:nowrap}
.elig-list .chip.load{background:rgba(255,255,255,.1); color:#C9CDE4}
.elig-list .chip.load i{animation:blink .8s infinite}
@keyframes blink{50%{opacity:.2}}
.elig-cta{align-self:flex-start}
.elig-acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.elig-acts .btn[hidden]{display:none}
@media (max-width:900px){.elig{grid-template-columns:1fr; padding:32px 20px; gap:28px} .elig-field .btn{padding:13px 18px}}
@media (max-width:560px){.elig-list li{flex-wrap:wrap} .elig-list li > div{flex-basis:calc(100% - 64px)} .elig-list .chip{margin-left:64px} .elig-res{padding:16px} .giga-list{grid-template-columns:1fr!important}}
.guide{margin-top:64px; display:flex; flex-direction:column; gap:24px}
.guide-head h3{font-size:clamp(28px, 3.4vw, 42px); margin-bottom:10px}
.guide-head p{margin:0; color:var(--soft); font-weight:300; font-size:18px; max-width:60ch}
.ftt{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.ftt-card{border:1px solid var(--rule); border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:10px; background:var(--bg); min-width:0}
.ftt-card.dedic{border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; box-shadow:0 30px 60px -40px rgba(151,21,215,.45)}
.ftt-card svg{width:100%; height:auto; background:var(--bg-2); border-radius:18px; margin-bottom:8px; font-family:var(--f)}
.ftt-card h4{font-size:24px}
.ftt-card p{margin:0; color:var(--soft); font-weight:300}
.cmp table{min-width:520px}
.cmp th{font-size:14px}
.cmp th:nth-child(2){color:#0E8C9A} .cmp th:nth-child(3){color:#7A12AE}
.cmp td{font-size:15px; padding:12px}
.cmp td:first-child{color:var(--soft); font-weight:500}
.cmp td b{font-weight:600}
.gtr-note{margin:0; padding:18px 20px; border-radius:18px; background:#F1E4FB; color:var(--ink); font-size:16px}
.gtr-note b{font-weight:600}
.giga{margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center}
.giga h3{font-size:clamp(28px, 3.4vw, 42px); margin:12px 0 10px}
.giga-txt > p{margin:0 0 18px; color:var(--soft); font-weight:300; font-size:18px}
.giga-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.giga-list li{background:var(--bg-2); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.giga-list b{font-size:22px; font-weight:500; background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.giga-list span{font-size:14px; color:var(--soft)}
.race{background:#141A33; color:#F2F4FB; border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:16px}
.race-top{display:flex; justify-content:space-between; align-items:center}
.race-top b{font-weight:500; font-size:18px}
.race .mini{background:transparent; color:#F2F4FB; border-color:rgba(255,255,255,.25)}
.lane{display:grid; grid-template-columns:96px minmax(0,1fr) 64px; gap:12px; align-items:center}
.ln{font-size:13px; color:#9FB0D2}
.track2{height:12px; border-radius:12px; background:rgba(255,255,255,.08); overflow:hidden}
.bar{display:block; height:100%; width:0; border-radius:12px}
.bar.adsl{background:#5A5E7E} .bar.g4{background:linear-gradient(90deg, var(--orange), var(--coral))} .bar.giga1{background:linear-gradient(90deg, var(--cyan), var(--magenta), var(--purple)); box-shadow:0 0 14px rgba(200,2,173,.6)}
.race.run .bar.adsl{animation:fillw 14s linear forwards} .race.run .bar.g4{animation:fillw 4s linear forwards} .race.run .bar.giga1{animation:fillw .6s ease-out forwards}
@keyframes fillw{to{width:100%}}
.rt{font-size:13px; text-align:right; color:#C9CDE4}
.race .sample{color:#9FB0D2}
@media (prefers-reduced-motion: reduce){.bar{width:100%!important; animation:none!important}}
@media (max-width:860px){.ftt,.giga{grid-template-columns:1fr} .giga-list{grid-template-columns:1fr 1fr} .ftt-card{padding:22px} .lane{grid-template-columns:78px minmax(0,1fr) 54px}}
/* ---------- En-tête et menus ---------- */
.site-head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; border-bottom:1px solid var(--rule)}
.site-head::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.headbar{display:flex; align-items:center; gap:18px; height:72px}
.mainnav{display:flex; align-items:center; gap:2px; margin-left:auto}
.dd{position:relative}
.dd-btn,.nav-link{display:flex; align-items:center; gap:6px; font:400 15px var(--f); color:var(--soft); background:none; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap}
.dd-btn:hover,.nav-link:hover,.dd:focus-within .dd-btn,.dd.open .dd-btn{color:var(--ink); background:var(--bg-2)}
.dd.cur .dd-btn,.nav-link.cur{color:var(--ink); font-weight:500}
.dd.cur .dd-btn::after,.nav-link.cur::after{content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px; background:var(--brand)}
.dd-btn,.nav-link{position:relative}
.chev{transition:transform .2s}
.dd:hover .chev,.dd.open .chev{transform:rotate(180deg)}
.dd-menu{position:absolute; top:calc(100% + 6px); left:-8px; min-width:290px; padding:8px; background:#fff; border:1px solid var(--rule); border-radius:18px; box-shadow:0 30px 60px -30px rgba(20,26,51,.45); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s}
.dd-menu::before{content:""; position:absolute; inset:-12px 0 auto; height:12px}
.dd:hover .dd-menu,.dd.open .dd-menu{opacity:1; visibility:visible; transform:none}
.dd-menu a{display:block; padding:10px 12px 10px 26px; border-radius:12px; text-decoration:none; position:relative}
.dd-menu a::before{content:""; position:absolute; left:11px; top:17px; width:7px; height:7px; border-radius:50%; background:var(--c)}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--bg-2)}
.dd-menu b{display:block; font-weight:500; font-size:15px}
.dd-menu small{display:block; color:var(--soft); font-size:13px}
.site-head .acc{font-size:14px; padding:9px 16px}
.burger{display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:12px; background:var(--bg-2); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed; left:0; right:0; top:calc(72px + env(safe-area-inset-top, 0px)); bottom:0; border-top:1px solid var(--rule); background:#fff; overflow:auto; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom, 0px)}
.mnav .wrap{padding-block:12px 24px; display:flex; flex-direction:column}
.mnav details{border-bottom:1px solid var(--rule)}
.mnav summary{list-style:none; display:flex; justify-content:space-between; align-items:center; padding:14px 4px; font-size:17px; font-weight:500; cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav details[open] .chev{transform:rotate(180deg)}
.mnav details a{display:block; padding:10px 14px; color:var(--soft); text-decoration:none; border-radius:10px}
.mnav details a:hover{background:var(--bg-2); color:var(--ink)}
.mnav details[open]{padding-bottom:8px}
.m-home{display:block; padding:14px 4px; font-size:17px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--rule)}
.m-acts{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px}
.m-acts span{color:var(--soft)}
@media (max-width:1180px){.site-head .pill{display:none}}
@media (max-width:1040px){.mainnav,.site-head .acc{display:none} .burger{display:flex}}
/* ---------- Pages ---------- */
[id]{scroll-margin-top:90px}
.view{animation:vin .35s ease both}
@keyframes vin{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){.view{animation:none}}
.phead{position:relative; overflow:hidden; isolation:isolate; padding-block:44px 30px; background:linear-gradient(180deg, var(--bg-2), var(--bg)); border-bottom:1px solid var(--rule)}
.phead::before{content:""; position:absolute; z-index:-1; right:-120px; top:-180px; width:460px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%)}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--soft)}
.crumb a{color:var(--soft); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.phead h1{font-size:clamp(36px, 5vw, 60px); font-weight:400; margin:12px 0 10px}
.phead p{margin:0; color:var(--soft); font-weight:300; font-size:19px; max-width:52ch}
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.subnav a{font-size:14px; font-weight:500; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--rule); text-decoration:none; transition:border-color .2s, color .2s}
.subnav a:hover{border-color:var(--c); color:var(--ink)}
.view > section:first-of-type{padding-top:64px}
.view#accueil > section:first-of-type{padding-top:0}
/* ---------- Accueil ---------- */
.univers{padding-block:96px 80px}
.uni-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.uni{position:relative; display:flex; flex-direction:column; gap:6px; padding:26px; border:1px solid var(--rule); border-radius:22px; text-decoration:none; background:var(--bg); transition:transform .25s, box-shadow .25s, border-color .25s; min-width:0}
.uni:hover{transform:translateY(-4px); box-shadow:0 30px 50px -36px rgba(20,26,51,.5); border-color:var(--c)}
.uni-ic{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff; background:var(--c); margin-bottom:10px}
.uni b{font-size:21px; font-weight:500}
.uni span{color:var(--soft); font-size:15px}
.uni em{font-style:normal; font-weight:500; font-size:14px; margin-top:8px; color:var(--ink)}
.uni > svg:last-child{position:absolute; right:22px; top:30px; color:var(--soft); transition:transform .25s, color .25s}
.uni:hover > svg:last-child{transform:translateX(4px); color:var(--ink)}
.pourquoi{padding-block:96px}
.why-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.why-grid a{display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:20px; background:#fff; text-decoration:none; border:1px solid var(--rule); transition:transform .25s}
.why-grid a:hover{transform:translateY(-3px)}
.why-grid b{font-size:18px; font-weight:500}
.why-grid span{color:var(--soft); font-size:15px}
@media (max-width:980px){.uni-grid{grid-template-columns:1fr 1fr} .why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.uni-grid,.why-grid{grid-template-columns:1fr}}
.ff{position:relative}
.ff .tech{position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--bg-2); color:var(--soft)}
.ff .tech.t5{background:linear-gradient(100deg, var(--orange), var(--magenta)); color:#fff}
.ff .eu{font-size:12px; color:var(--soft); margin-bottom:2px}
.incl{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px}
.incl li{display:flex; flex-direction:column; gap:10px; background:var(--bg); border:1px solid var(--rule); border-radius:18px; padding:18px; min-width:0}
.ii{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--c)}
.incl b{display:block; font-weight:500; font-size:16px}
.incl small{color:var(--soft); font-size:14px}
.freepro{margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-radius:18px; background:var(--bg); border:1px dashed var(--rule)}
.freepro b{display:block; font-size:19px; font-weight:500; margin-top:4px}
.freepro small{color:var(--soft); font-size:14px}
.fp-price{text-align:right}
.fp-price b{font-size:26px}
.porta{margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; background:var(--bg); border-radius:28px; padding:44px; border:1px solid var(--rule)}
.porta h3{font-size:clamp(28px, 3.4vw, 40px); margin:12px 0 14px}
.porta p{margin:0 0 14px; color:var(--soft); font-weight:300; font-size:18px}
.porta .rio{background:#FFF1E8; color:var(--ink); font-weight:400; font-size:16px; padding:14px 16px; border-radius:14px}
.porta .rio b{font-weight:600}
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:51px; top:20px; bottom:70px; width:3px; border-radius:3px; background:var(--bg-3)}
.tl::after{content:""; position:absolute; left:51px; top:20px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--orange), var(--magenta), var(--purple)); height:0; animation:tlg 3.2s .3s ease-in-out forwards}
@keyframes tlg{to{height:calc(100% - 90px)}}
.tl li{position:relative; z-index:1; display:flex; gap:16px; align-items:flex-start; padding:10px 0}
.tl-d{flex:none; width:90px; display:flex; justify-content:center}
.tl-d{font-size:13px; font-weight:700}
.tl li .tl-d{min-height:40px; align-items:center; background:var(--bg); border:2px solid var(--rule); border-radius:999px; padding:0 10px; width:auto; min-width:105px; white-space:nowrap; animation:tlp .4s both}
.tl li:nth-child(1) .tl-d{animation-delay:.3s} .tl li:nth-child(2) .tl-d{animation-delay:1.1s} .tl li:nth-child(3) .tl-d{animation-delay:1.9s} .tl li:nth-child(4) .tl-d{animation-delay:2.9s}
@keyframes tlp{from{border-color:var(--rule)} to{border-color:var(--magenta)}}
.tl li.last .tl-d{background:linear-gradient(100deg, var(--orange), var(--magenta), var(--purple)); color:#fff; border-color:transparent}
.tl b{display:block; font-weight:500; font-size:17px; margin-top:8px}
.tl small{color:var(--soft); font-size:15px}
@media (prefers-reduced-motion: reduce){.tl::after{animation:none; height:calc(100% - 90px)}}
@media (max-width:1100px){.incl{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:860px){.porta{grid-template-columns:1fr; padding:26px 20px; gap:24px} .incl{grid-template-columns:1fr 1fr} .fp-price{text-align:left} .fp-go{justify-content:flex-start}}
@media (max-width:480px){.incl{grid-template-columns:1fr} .tl-d{min-width:92px!important; font-size:12px!important} .tl::before,.tl::after{left:44px}}
.gbadge{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:9px 16px 9px 12px; border-radius:999px; background:#fff; border:1px solid var(--rule); text-decoration:none; box-shadow:0 10px 24px -18px rgba(20,26,51,.5); font-size:14px; color:var(--soft); transition:transform .2s}
.gbadge:hover{transform:translateY(-2px)}
.gbadge b{color:var(--ink); font-size:16px; font-weight:600}
.stars{display:inline-flex; gap:1px}
.stars svg{width:15px; height:15px}
.gbadge.small{margin-top:14px; padding:6px 12px 6px 9px; font-size:13px}
.gbadge.small .stars svg{width:13px; height:13px}
.greviews{display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; align-items:center; background:#fff; border:1px solid var(--rule); border-radius:26px; padding:34px; margin-bottom:28px}
.gr-score{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:20px; border-radius:20px; background:var(--bg-2)}
.gr-score b{font-size:58px; font-weight:500; line-height:1; letter-spacing:-.03em}
.gr-score b small{font-size:20px; color:var(--soft); font-weight:400}
.stars.big svg{width:24px; height:24px}
.gr-score > span:last-child{color:var(--soft); font-size:14px}
.gr-txt h3{font-size:clamp(26px, 3vw, 34px); margin-bottom:10px}
.gr-txt p{margin:0 0 20px; color:var(--soft); font-weight:300; font-size:18px}
.gr-acts{display:flex; flex-wrap:wrap; gap:12px}
.gr-list{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:20px}
.gr-card{background:var(--bg-2); border-radius:16px; padding:16px; font-size:15px; display:flex; flex-direction:column; gap:8px}
.gr-card p{margin:0; color:var(--ink); font-size:15px; font-weight:400; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.gr-card small{color:var(--soft)}
.addr{margin:22px 0 0; font-size:15px; color:rgba(255,255,255,.9); line-height:1.6}
@media (max-width:860px){.greviews{grid-template-columns:1fr; padding:22px} .gr-list{grid-template-columns:1fr}}
.gift{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; color:#fff; font-size:14px; font-weight:600; background:linear-gradient(100deg, var(--orange), var(--magenta) 60%, var(--purple)); box-shadow:0 12px 24px -14px rgba(200,2,173,.8)}
.packs-lab{margin:4px 0 -6px!important; font-size:14px!important; color:var(--soft)}
/* ---------- Ajustements mobile ---------- */
@media (max-width:600px){
body{font-size:16px}
section,.univers,.pourquoi{padding-block:56px}
.view > section:first-of-type{padding-top:40px}
.phead{padding-block:28px 22px}
.phead p{font-size:17px}
.subnav{margin-top:18px}
.head{margin-bottom:28px}
.head h2{font-size:31px}
.head p{font-size:16px}
.cta-band{margin-top:32px}
.guide{margin-top:40px}
.star,.mob,.porta,.wazo{margin-top:40px}
.why{margin-top:40px}
.greviews{padding:18px; gap:20px}
.gr-score{padding:14px}
.gr-score b{font-size:46px}
.elig-sec{padding-block:40px 24px}
.contact .band{padding:32px 18px}
.big{font-size:40px}
.proche .box{padding:32px 20px}
.proche h2{font-size:52px}
.ct{padding:26px 18px}
.ct h2{font-size:32px}
.ct-list li{padding:14px}
.uni{padding:20px}
.plan,.licence,.hs,.ftt-card,.nets-card,.need{padding:20px}
.plan .price b{font-size:44px}
.lic div{padding:16px 0}
.lic .pr{font-size:19px}
.calc{padding:20px}
.total b{font-size:42px}
.race{padding:20px}
.giga-list b{font-size:20px}
.schema{padding:16px 12px 12px}
.schema figcaption b{font-size:18px}
.secours{padding-block:56px}
.obox{max-width:220px}
.speed{gap:8px}
.speed b{font-size:19px}
.stop{padding-bottom:28px}
footer .wrap{padding-block:40px 28px; gap:24px}
/* tableau FTTH / FTTO empilé */
.cmp{overflow:visible; border:0}
.cmp table{min-width:0; display:block}
.cmp thead{display:none}
.cmp tbody{display:flex; flex-direction:column; gap:10px}
.cmp tr{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--bg)}
.cmp td{border:0; padding:10px 12px; font-size:14px}
.cmp td:first-child{grid-column:1/-1; background:var(--bg-2); font-size:13px; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px}
.cmp td[data-l]::before{content:attr(data-l); display:block; font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:4px}
.cmp td[data-l="FTTH"]::before{color:#0E8C9A}
.cmp td[data-l="FTTO"]{border-left:1px solid var(--rule)}
.cmp td[data-l="FTTO"]::before{color:#7A12AE}
}
/* ---------- Page Free Pro ---------- */
.freepro{text-decoration:none; transition:border-color .2s, transform .2s}
.freepro:hover{border-color:#E2231A; transform:translateY(-2px)}
.fp-price small{display:block}
.fp-go{display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:6px; font-size:14px; font-weight:600; color:#C11B13}
.fm-hero{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center}
.fm-card{position:relative; overflow:hidden; isolation:isolate; border-radius:30px; padding:36px; color:#fff; background:linear-gradient(150deg, #2B0B0A, #141A33 60%); display:flex; flex-direction:column; gap:10px; box-shadow:0 40px 70px -40px rgba(226,35,26,.55)}
.fm-card::before{content:""; position:absolute; z-index:-1; width:380px; aspect-ratio:1; right:-120px; top:-140px; border-radius:50%; background:radial-gradient(circle, rgba(226,35,26,.55), transparent 70%); animation:drift 8s ease-in-out infinite alternate}
.fm-tag{align-self:flex-start; font-size:13px; font-weight:700; letter-spacing:.06em; padding:6px 12px; border-radius:999px; background:#E2231A}
.fm-go{display:flex; align-items:baseline; gap:8px; margin-top:6px}
.fm-go b{font-size:110px; font-weight:500; letter-spacing:-.05em; line-height:.9}
.fm-go span{font-size:34px; font-weight:400}
.fm-sub{margin:0; color:#E6C9C8}
.fm-roam{display:flex; align-items:baseline; gap:10px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.08); margin-top:6px}
.fm-roam b{font-size:22px; font-weight:600; white-space:nowrap}
.fm-roam span{color:#E6C9C8; font-size:14px}
.fm-price{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; margin-top:14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15)}
.fm-p1 b{font-size:46px; font-weight:500; letter-spacing:-.03em; line-height:1}
.fm-p1 small,.fm-p2 small{display:block; color:#E6C9C8; font-size:13px; line-height:1.4}
.fm-p2 b{font-size:22px; font-weight:500; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.4); color:#C8B5B4}
.fm-noeng{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:14px; font-weight:600; color:#3FD39A}
.fm-txt h2{font-size:clamp(30px, 3.8vw, 46px); margin:12px 0 16px}
.fm-txt > p{margin:0 0 18px; color:var(--soft); font-weight:300; font-size:18px}
.fm-points{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px}
.fm-points li{display:flex; gap:10px; align-items:flex-start}
.fm-points svg{flex:none; color:#14A06B; margin-top:3px}
.fm-points b{font-weight:600}
.fm-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:18px}
.fm-box{background:#fff; border:1px solid var(--rule); border-radius:22px; padding:26px; min-width:0}
.fm-box h3{font-size:22px; margin-bottom:10px}
.fm-box > p{margin:0 0 12px; color:var(--soft)}
.fm-flags{display:flex; flex-wrap:wrap; gap:8px}
.fm-flags span{font-size:14px; padding:6px 12px; border-radius:999px; background:var(--bg-2); border:1px solid var(--rule)}
.fm-more{margin:14px 0 0!important; font-size:15px}
.fm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.fm-list li{display:flex; flex-direction:column}
.fm-list b{font-size:26px; font-weight:500; color:#C11B13}
.fm-list span{color:var(--soft); font-size:15px}
.fm-fleet{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.fm-fleet h2{font-size:clamp(30px, 3.8vw, 46px); margin:12px 0 14px}
.fm-fleet > div > p{margin:0 0 18px; color:var(--soft); font-weight:300; font-size:18px}
.fm-dash{background:#fff; border:1px solid var(--rule); border-radius:22px; padding:18px; box-shadow:0 40px 80px -50px rgba(20,26,51,.45); display:flex; flex-direction:column; gap:6px}
.fd-top{display:flex; justify-content:space-between; align-items:center; padding:4px 6px 12px; border-bottom:1px solid var(--rule); margin-bottom:6px}
.fd-top span{font-size:12px; color:var(--soft); background:var(--bg-3); padding:3px 10px; border-radius:999px}
.fd-row{display:grid; grid-template-columns:10px minmax(0,1fr) 90px 62px; gap:12px; align-items:center; padding:10px 6px; border-radius:12px}
.fd-row:hover{background:var(--bg-2)}
.fd-row b{display:block; font-weight:500; font-size:15px}
.fd-row small{color:var(--soft); font-size:12px}
.fd-dot{width:10px; height:10px; border-radius:50%} .fd-dot.ok{background:#14A06B} .fd-dot.off{background:var(--coral)}
.fd-m{height:8px; border-radius:8px; background:var(--bg-3); overflow:hidden}
.fd-m i{display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, #E2231A, var(--magenta))}
.fd-v{font-size:13px; text-align:right; color:var(--ink)}
.fd-v.blk{color:#B42335; font-weight:600}
.fm-cmp th:nth-child(2){color:#C11B13} .fm-cmp th:nth-child(3){color:#7A12AE}
@media (max-width:980px){.fm-hero,.fm-fleet{grid-template-columns:1fr; gap:32px} .fm-grid{grid-template-columns:1fr}}
@media (max-width:600px){.fm-card{padding:24px} .fm-go b{font-size:86px} .fm-box{padding:20px} .fd-row{grid-template-columns:10px minmax(0,1fr) 54px} .fd-m{display:none}
.fm-cmp td[data-l="Free Pro"]::before{color:#C11B13} .fm-cmp td[data-l="OCALL Pro"]::before{color:#7A12AE} .fm-cmp td[data-l="OCALL Pro"]{border-left:1px solid var(--rule)}}
.fm-note,.ec-scope{display:flex; gap:10px; align-items:flex-start; margin:0; padding:14px 16px; border-radius:14px; font-size:15px; line-height:1.5; color:var(--ink)}
.fm-note{background:#FDECEB; margin-top:4px}
.fm-note svg{flex:none; color:#C11B13; margin-top:1px}
.ec-scope{background:#fff; border:1px solid var(--rule); margin-bottom:28px; max-width:860px}
.ec-scope svg{flex:none; color:var(--purple); margin-top:1px}
.ec-scope b{font-weight:600}
.elig-mode{display:inline-flex; gap:4px; padding:4px; margin-bottom:12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.elig-mode button{display:inline-flex; align-items:center; gap:8px; font:500 14px var(--f); color:#C9CDE4; background:transparent; border:0; border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .2s, color .2s}
.elig-mode button[aria-pressed="true"]{background:#fff; color:var(--ink)}
.elig-sugg li b{display:block; font-weight:500}
.elig-sugg li small{display:block; margin-left:0!important}
.elig-sugg li.sg-off b{color:var(--purple)}
.sg-co{float:right; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:#F1E4FB; color:#7A12AE}
.elig-company{margin-top:12px; display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.elig-company b{font-weight:600}
.elig-company span{color:#C9CDE4; font-size:14px}
.elig-company small{color:#9FB0D2; font-size:12px; letter-spacing:.04em}
.elig-src{margin:4px 0 0; font-size:12px; color:#9FB0D2}
@media (max-width:420px){.elig-mode button{padding:8px 12px; font-size:13px}}
.elig-map{position:relative; height:300px; cursor:grab; touch-action:none; user-select:none; border-radius:18px; overflow:hidden; background:#2E3B33 linear-gradient(135deg, #38463B, #26302C); isolation:isolate}
.em-tiles{position:absolute; inset:0; z-index:1}
.em-tiles img{position:absolute; width:256px; height:256px; max-width:none; pointer-events:none; -webkit-user-drag:none; opacity:0; transition:opacity .35s}
.em-tiles img.on{opacity:1}
.em-tiles.em-under img{width:1024px; height:1024px; filter:blur(1.5px); transition:none}
.em-tiles.em-under{z-index:0}
.elig-map.drag{cursor:grabbing}
.em-ctl{position:absolute; z-index:4; right:10px; top:10px; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.em-ctl button{width:36px; height:36px; border:0; background:#fff; color:#141A33; font:500 20px/1 var(--f); cursor:pointer}
.em-ctl button+button{border-top:1px solid #E4E6F0}
.em-layer{position:absolute; z-index:4; left:10px; top:10px; display:flex; background:#fff; border-radius:999px; padding:3px; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.em-layer button{border:0; background:none; font:500 13px var(--f); color:#141A33; padding:6px 12px; border-radius:999px; cursor:pointer}
.em-layer button[aria-pressed="true"]{background:linear-gradient(90deg,#F56438,#C802AD); color:#fff}
@media (max-width:640px){.elig-map{height:260px}}
.em-fallback{position:absolute; inset:0; z-index:0; background:
radial-gradient(circle at 50% 50%, rgba(200,2,173,.25), transparent 45%),
linear-gradient(32deg, transparent 47%, rgba(255,255,255,.10) 47.5%, rgba(255,255,255,.10) 49%, transparent 49.5%),
linear-gradient(-58deg, transparent 30%, rgba(255,255,255,.07) 30.5%, rgba(255,255,255,.07) 31.5%, transparent 32%),
linear-gradient(90deg, transparent 64%, rgba(255,255,255,.06) 64.5%, rgba(255,255,255,.06) 65.5%, transparent 66%),
repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px), #121A3C}
.elig-map.has-tiles .em-fallback{display:none}
.em-pin{position:absolute; z-index:3; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:linear-gradient(135deg, var(--orange), var(--magenta)); border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.em-pin i{position:absolute; inset:-12px; border-radius:50%; border:2px solid rgba(200,2,173,.7); animation:pinp 2s ease-out infinite}
@keyframes pinp{from{transform:scale(.4); opacity:1} to{transform:scale(2.4); opacity:0}}
.em-attr{position:absolute; z-index:3; right:6px; bottom:4px; font-size:10px; color:#333; background:rgba(255,255,255,.75); padding:1px 6px; border-radius:6px}
.elig-map:not(.has-tiles) .em-attr{display:none}
.elig-mob{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); padding-top:32px; display:flex; flex-direction:column; gap:20px}
.em-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px 32px}
.em-head .kicker{color:#9FB0D2}
.em-head h3{font-size:clamp(22px, 2.6vw, 30px); margin-top:8px}
.em-head p{margin:0; color:#C9CDE4; font-weight:300; max-width:44ch}
.op-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.op{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:16px}
.op-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.op-name{font-weight:700; font-size:15px; padding:6px 12px; border-radius:10px; background:var(--oc); color:#fff}
.op-lvl{margin-left:auto; font-size:14px; color:#C9CDE4}
.sig{display:inline-flex; align-items:flex-end; gap:3px; height:22px}
.sig i{width:6px; border-radius:2px; background:rgba(255,255,255,.18)}
.sig i:nth-child(1){height:20%} .sig i:nth-child(2){height:40%} .sig i:nth-child(3){height:60%} .sig i:nth-child(4){height:80%} .sig i:nth-child(5){height:100%}
.op[data-sig="1"] .sig i:nth-child(-n+1),.op[data-sig="2"] .sig i:nth-child(-n+2),.op[data-sig="3"] .sig i:nth-child(-n+3),.op[data-sig="4"] .sig i:nth-child(-n+4),.op[data-sig="5"] .sig i:nth-child(-n+5){background:#3FD39A}
.op-rows{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.op-rows div{background:rgba(255,255,255,.05); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.op-rows b{font-size:14px; font-weight:600}
.op-note{margin:0; font-size:13px; color:#9FB0D2}
.op-note a{color:#fff}
@media (max-width:700px){.op-grid{grid-template-columns:1fr} .elig-mob{padding-top:24px} .op{padding:16px} .op-lvl{margin-left:0; width:100%} .op-rows{grid-template-columns:1fr; gap:6px} .op-rows div{flex-direction:row; justify-content:space-between; align-items:center; padding:8px 12px}}
.elig-pin{flex:none}
/* ---------- Pages offres fibre ---------- */
.plan-link{color:inherit; text-decoration:none}
.plan-link:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.plan-acts{margin-top:auto; display:flex; flex-wrap:wrap; gap:10px}
.of-hero{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center}
.of-visual{position:relative; border-radius:30px; aspect-ratio:1.15; display:grid; place-items:center; padding:40px; isolation:isolate; overflow:hidden}
.of-visual::before{content:""; position:absolute; z-index:-1; inset:15%; border-radius:50%; filter:blur(30px); opacity:.55}
.of-visual.fb{background:linear-gradient(150deg, #FFF1F0, #F6F5FB)}
.of-visual.fb::before{background:#E2231A; opacity:.25}
.of-visual.obx{background:radial-gradient(120% 90% at 20% 0%, #F7F1FF, #fff 60%), #fff; border:1px solid var(--rule)}
.of-visual.obx::before{inset:22%; background:linear-gradient(135deg, var(--orange), var(--magenta), var(--purple)); opacity:.28; filter:blur(50px)}
.of-visual img{width:100%; max-width:380px; height:auto; filter:drop-shadow(0 30px 30px rgba(20,26,51,.35)); animation:float 5s ease-in-out infinite}
.of-visual.obx img{width:58%; max-width:280px; filter:drop-shadow(0 30px 28px rgba(20,26,51,.28))}
.obx-chip{position:absolute; display:flex; align-items:center; gap:10px; padding:9px 14px 9px 11px; border-radius:14px; background:rgba(255,255,255,.92); border:1px solid var(--rule); box-shadow:0 14px 30px -16px rgba(20,26,51,.35); font-size:12.5px; color:var(--soft); line-height:1.25; animation:float 6s ease-in-out infinite; backdrop-filter:blur(6px)}
.obx-chip b{display:block; color:var(--ink); font-weight:500; font-size:14px}
.obx-chip > i{width:10px; height:10px; border-radius:50%; flex:none}
.obx-chip > i.ok{background:#1DB46A; box-shadow:0 0 0 4px rgba(29,180,106,.18)}
.obx-chip > i.bk{background:var(--orange); box-shadow:0 0 0 4px rgba(245,100,56,.18)}
.obx-chip > svg{color:var(--purple); flex:none}
.obx-chip.c1{right:18px; top:22%}
.obx-chip.c2{left:18px; bottom:24%; animation-delay:-2s}
.obx-chip.c3{right:24px; bottom:9%; animation-delay:-4s}
@media (max-width:600px){.obx-chip{font-size:11.5px; padding:7px 10px} .obx-chip b{font-size:13px} .obx-chip.c1{right:10px; top:18%} .obx-chip.c2{left:10px} .obx-chip.c3{right:10px; bottom:6%}}
@keyframes float{50%{transform:translateY(-10px)}}
.of-badge{position:absolute; left:18px; top:18px; font-size:13px; font-weight:600; color:#fff; padding:6px 12px; border-radius:999px; background:var(--c)}
.of-txt h2{font-size:clamp(32px, 4.2vw, 52px); margin:12px 0 16px}
.of-txt > p{margin:0 0 20px; color:var(--soft); font-weight:300; font-size:18px; max-width:52ch}
.of-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.of-price b{font-size:52px; font-weight:500; letter-spacing:-.03em; line-height:1}
.of-price span{color:var(--soft); font-size:15px}
.of-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.of-f{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--rule); border-radius:20px; padding:22px; min-width:0}
.of-ic{flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--c)}
.of-ic.of-lg{width:60px; height:60px; border-radius:18px}
.of-ic svg{position:static!important; width:22px; height:22px; transform:none!important}
.of-ic.of-lg svg{width:28px; height:28px}
.of-f b{display:block; font-weight:500; font-size:18px; margin-bottom:4px}
.of-f p{margin:0; color:var(--soft); font-size:15px}
.of-f a{color:var(--purple); font-weight:500}
.of-warn{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:center; border-radius:28px; padding:40px; background:#FFF4EC; border:1px solid #FBD9C4}
.of-warn h3{font-size:clamp(26px, 3vw, 36px); margin:10px 0 12px}
.of-warn p{margin:0 0 14px; color:var(--ink); font-size:17px; font-weight:300}
.of-vs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.of-vs li{display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:14px 16px; font-size:15px}
.of-vs b{font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px}
.of-vs b.y{background:#E3F6EE; color:#0B7A50} .of-vs b.n{background:#FDECEE; color:#B42335}
.of-manage{display:flex; gap:22px; align-items:flex-start; background:#fff; border:1px solid var(--rule); border-radius:24px; padding:30px}
.of-manage h3{font-size:24px; margin-bottom:8px}
.of-manage p{margin:0 0 14px; color:var(--soft); font-size:17px; font-weight:300; max-width:70ch}
.of-partners{display:flex; flex-wrap:wrap; gap:10px}
.of-partners span{font-size:15px; font-weight:500; padding:10px 16px; border-radius:14px; background:#fff; border:1px solid var(--rule)}
@media (max-width:980px){.of-hero,.of-warn{grid-template-columns:1fr; gap:28px} .of-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.of-grid,.of-grid.three{grid-template-columns:1fr} .of-visual{padding:28px; aspect-ratio:1.3} .of-warn{padding:24px 18px} .of-manage{flex-direction:column; padding:22px} .of-f{padding:18px} .of-price b{font-size:42px}}
.dsp{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; background:#fff; border:1px solid var(--rule); border-radius:28px; padding:40px; margin-bottom:28px}
.dsp h3{font-size:clamp(26px, 3vw, 36px); margin-bottom:14px}
.dsp-txt p{margin:0 0 14px; color:var(--soft); font-size:17px; font-weight:300}
.dsp-txt b{color:var(--ink); font-weight:600}
.dsp-txt .dsp-bzh{margin:0; padding:12px 14px; border-radius:14px; background:var(--bg-2); color:var(--ink); font-weight:400; font-size:15px}
.dsp-flow{display:flex; flex-direction:column; align-items:stretch}
.df{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:var(--bg-2)}
.df.ocall{background:linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand) border-box; border:1.5px solid transparent}
.df-ic{flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; background:var(--c)}
.df b{display:block; font-weight:500}
.df small{color:var(--soft); font-size:14px}
.df-arrow{position:relative; height:34px; display:flex; align-items:center; padding-left:34px}
.df-arrow i{position:absolute; left:36px; top:2px; bottom:2px; width:2px; background:repeating-linear-gradient(180deg, var(--purple) 0 5px, transparent 5px 9px); background-size:2px 18px; animation:dash 1s linear infinite}
@keyframes dash{to{background-position:0 18px}}
.df-arrow i::after{content:""; position:absolute; left:-4px; bottom:-2px; border:5px solid transparent; border-top-color:var(--purple); border-bottom:0}
.df-arrow em{font-style:normal; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-left:24px}
.of-plab{margin:0 0 10px; font-size:14px; color:var(--soft)}
@media (prefers-reduced-motion: reduce){.df-arrow i{animation:none}}
@media (max-width:980px){.dsp{grid-template-columns:1fr; padding:26px 20px; gap:24px}}
/* ---------- Wi-Fi ---------- */
.wf-visual{position:relative; border-radius:30px; padding:36px 0; background:linear-gradient(150deg, #E2F8FB, #F3E6FF); display:grid; place-items:center; overflow:hidden}
.wf-waves{position:absolute; left:50%; top:50%; width:0; height:0}
.wf-waves i{position:absolute; left:0; top:0; width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%; border:2px solid rgba(38,209,227,.55); animation:wfw 3.6s ease-out infinite}
.wf-waves i:nth-child(2){animation-delay:1.2s} .wf-waves i:nth-child(3){animation-delay:2.4s}
@keyframes wfw{from{transform:scale(.6); opacity:1} to{transform:scale(2.8); opacity:0}}
.wf-phone{position:relative; width:220px; aspect-ratio:9/17.5; border-radius:32px; background:var(--ink); padding:9px; box-shadow:0 40px 60px -30px rgba(20,26,51,.55)}
.wf-screen{height:100%; border-radius:24px; background:#fff; padding:12px 10px; display:flex; flex-direction:column; gap:5px; overflow:hidden; line-height:1.25}
.wf-brand{display:flex; justify-content:center; padding:7px; border-radius:14px; background:linear-gradient(135deg, #2E8B57, #1F6E8C)}
.wf-logo{color:#fff; font-size:11px; text-align:center; line-height:1.2}
.wf-logo b{font-size:15px}
.wf-h{font-size:15px; font-weight:600; margin-top:4px}
.wf-p{font-size:11px; color:var(--soft)}
.wf-opt{display:flex; justify-content:space-between; align-items:center; font-size:11px; padding:6px 10px; border-radius:10px; border:1.5px solid var(--rule)}
.wf-opt em{font-style:normal; color:var(--soft); font-size:10px}
.wf-opt.sel{border-color:var(--magenta); background:#FBEAF7}
.wf-btn{margin-top:auto; text-align:center; font-size:11px; font-weight:600; color:#fff; padding:7px; border-radius:999px; background:linear-gradient(100deg, var(--orange), var(--magenta), var(--purple))}
.wf-cgu{font-size:8.5px; color:var(--soft); text-align:center; line-height:1.3}
.of-grid.two{grid-template-columns:1fr 1fr; margin-top:22px}
.wf-sec{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center}
.wf-sec h2{font-size:clamp(30px, 3.8vw, 46px); margin:12px 0 14px}
.wf-sec > div > p{margin:0; color:var(--soft); font-weight:300; font-size:18px; max-width:56ch}
.wf-log{background:#0B1022; color:#C9CDE4; border-radius:22px; overflow:hidden; box-shadow:0 40px 70px -40px rgba(20,26,51,.7)}
.wl-top{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.wl-top b{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; font-weight:500; color:#fff}
.wl-top span{font-size:11px; color:#9FB0D2; background:rgba(255,255,255,.08); padding:3px 9px; border-radius:999px}
.wl-body{margin:0; padding:16px; font:12px/1.9 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-all}
.wl-body .t{color:#6F7AA8} .wl-body .ok{color:#3FD39A} .wl-body .wn{color:#FF9AA6} .wl-body .in{color:#26D1E3}
.wl-cur{display:inline-block; width:7px; height:14px; margin-left:4px; vertical-align:-2px; background:#26D1E3; animation:blink 1s steps(1) infinite}
.wl-foot{padding:10px 16px; font-size:12px; color:#9FB0D2; border-top:1px solid rgba(255,255,255,.08)}
.wf-dash{background:#fff; border:1px solid var(--rule); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:16px}
.wd-top{display:flex; justify-content:space-between; align-items:center}
.wd-top b{font-size:18px; font-weight:500}
.wd-top span{font-size:12px; color:var(--soft); background:var(--bg-3); padding:3px 10px; border-radius:999px}
.wf-dash .of-f{background:var(--bg-2); border-color:transparent}
@media (prefers-reduced-motion: reduce){.wf-waves i,.wl-cur{animation:none}}
@media (max-width:980px){.wf-sec{grid-template-columns:1fr}}
@media (max-width:600px){.of-grid.two{grid-template-columns:1fr} .wf-visual{padding:30px 0} .wf-phone{width:220px} .wf-dash{padding:16px}}
.om{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:56px; align-items:center}
.om-visual{position:relative; border-radius:30px; background:linear-gradient(160deg, #E6F2EF, #F6F5FB); display:grid; place-items:center; padding:40px 20px; overflow:hidden; isolation:isolate; min-height:440px}
.om-ap{position:relative; z-index:1; height:380px; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 30px 30px rgba(20,26,51,.25))}
.om-ring{position:absolute; left:50%; top:30%; width:0; height:0; z-index:0}
.om-ring i{position:absolute; width:180px; height:180px; margin:-90px 0 0 -90px; border-radius:50%; border:2px solid rgba(0,102,92,.35); animation:wfw 3.6s ease-out infinite}
.om-ring i:nth-child(2){animation-delay:1.8s}
.om-logo{display:block; width:170px; height:auto; margin-bottom:12px}
.om-cert{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:#004E45; color:#fff; font-size:14px; font-weight:600}
.om-cert svg{color:#5FE0C4}
.wz-cert{display:flex; width:fit-content; background:var(--ink); margin:12px 0 14px} .wz-cert svg{color:var(--cyan)}
.om-txt h2{font-size:clamp(30px, 3.8vw, 46px); margin:16px 0 14px}
.om-txt > p{margin:0 0 20px; color:var(--soft); font-weight:300; font-size:18px; max-width:56ch}
@media (prefers-reduced-motion: reduce){.om-ring i{animation:none}}
@media (max-width:860px){.om{grid-template-columns:1fr; gap:28px} .om-visual{min-height:0; padding:30px} .om-ap{height:280px}}
.wf-row{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.wf-w{display:flex; flex-direction:column; gap:1px; padding:5px 8px; border-radius:10px; background:var(--bg-2)}
.wf-w b{font-size:13px; font-weight:600}
.wf-w small,.wf-ev small{font-size:9px; color:var(--soft)}
.wf-wi{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff; background:var(--c); flex:none}
.wf-ev{display:flex; gap:8px; align-items:center; padding:5px 8px; border-radius:10px; background:var(--bg-2)}
.wf-ev b{display:block; font-size:11px; font-weight:600}
.wf-app{background:#fff; border:1px solid var(--rule); border-radius:24px; overflow:hidden; box-shadow:0 40px 80px -50px rgba(20,26,51,.45)}
.wa-top{display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--bg-2); border-bottom:1px solid var(--rule)}
.wa-top b{font-size:14px; font-weight:500}
.wa-top span:last-child{margin-left:auto; font-size:12px; color:var(--soft); background:var(--bg-3); padding:3px 10px; border-radius:999px}
.wa-dots{display:flex; gap:5px} .wa-dots i{width:9px; height:9px; border-radius:50%; background:#D9D6E5}
.wa-body{padding:18px; display:flex; flex-direction:column; gap:14px}
.wa-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px}
.wa-box{border:1px solid var(--rule); border-radius:16px; padding:14px; min-width:0}
.wa-t{display:block; font-weight:500; margin-bottom:10px}
.ap-list{display:flex; flex-direction:column}
.ap-row{display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:9px 4px; border-top:1px solid var(--rule)}
.ap-row:first-child{border-top:0}
.ap-row b{display:block; font-weight:500; font-size:14px}
.ap-row small{color:var(--soft); font-size:12px}
.ap-c{font-size:13px; color:var(--soft)}
.wa-box:last-child{display:flex; flex-direction:column}
.wa-bars{display:flex; align-items:flex-end; gap:8px; height:110px; flex:1; min-height:110px; padding-top:10px}
.wa-bars i{flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--magenta), var(--purple)); animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.wa-bars i:nth-child(odd){background:linear-gradient(180deg, var(--cyan), #4C6FE0)}
@keyframes grow{from{transform:scaleY(.1); transform-origin:bottom}}
.wa-lab{display:flex; justify-content:space-between; font-size:11px; color:var(--soft); margin-top:6px}
.cta-band .wa-acc{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
@media (max-width:860px){.wa-grid{grid-template-columns:1fr}}
@media (max-width:520px){.ap-row{grid-template-columns:10px minmax(0,1fr) auto} .ap-c{display:none} .wa-body{padding:12px}}
.wf-ad{position:relative; padding:5px 8px; border-radius:10px; background:linear-gradient(135deg, #FFF1E8, #FBEAF7); border:1px dashed #F3B6A0}
.wf-ad b{display:block; font-size:11px; font-weight:600}
.wf-ad small{font-size:9px; color:var(--soft)}
.wf-ad-tag{display:inline-block; font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#C8461C; margin-bottom:1px}
.wp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.wp h2{font-size:clamp(30px, 3.8vw, 46px); margin:12px 0 14px}
.wp-txt > p{margin:0 0 20px; color:var(--soft); font-weight:300; font-size:18px}
.wp-txt .fm-points svg{color:#14A06B}
.wp-cards{position:relative; display:flex; flex-direction:column; gap:12px; padding:26px; border-radius:28px; background:linear-gradient(150deg, #FFF1E8, #F3E6FF)}
.wp-card{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; background:#fff; border-radius:18px; padding:14px 16px; box-shadow:0 16px 30px -24px rgba(20,26,51,.45); animation:wpin .6s cubic-bezier(.2,.7,.2,1) both}
.wp-card:nth-child(2){animation-delay:.12s; margin-left:18px} .wp-card:nth-child(3){animation-delay:.24s; margin-left:36px}
@keyframes wpin{from{opacity:0; transform:translateY(10px)}}
.wp-ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--c)}
.wp-card b{display:block; font-weight:500}
.wp-card small{color:var(--soft); font-size:13px}
.wp-st{font-size:12px; color:var(--soft); text-align:right}
.wp-note{position:absolute; right:16px; bottom:8px; font-size:11px; color:var(--soft)}
@media (max-width:860px){.wp{grid-template-columns:1fr; gap:28px} .wp-cards{padding:18px 14px 26px} .wp-card:nth-child(n){margin-left:0} .wp-card{grid-template-columns:40px minmax(0,1fr)} .wp-st{grid-column:2; text-align:left}}
.pb{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:28px; align-items:start}
.pb-left{background:#fff; border:1px solid var(--rule); border-radius:26px; padding:30px; min-width:0}
.pb-left h3{font-size:22px; margin-bottom:16px}
.pb-crit{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.pb-crit > div{display:flex; flex-direction:column; gap:6px; background:var(--bg-2); border-radius:16px; padding:14px}
.pb-crit b{font-weight:500}
.pb-crit small{color:var(--soft); font-size:14px}
.pb-sub{margin:22px 0 10px; color:var(--soft); font-size:14px}
.ps-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.ps{position:relative; border:1.5px solid var(--rule); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:8px; transition:transform .25s}
.ps:hover{transform:translateY(-3px)}
.ps.hot{border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--brand) border-box}
.ps-n{font-size:17px; font-weight:600; margin-bottom:2px}
.ps-r{display:flex; align-items:center; gap:8px; font-size:14px}
.ps-i{display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--bg-2); color:var(--purple)}
.ps-p{margin-top:4px; font-size:12px; color:var(--soft)}
.up{background:#141A33; color:#F2F4FB; border-radius:26px; padding:20px; display:flex; flex-direction:column; gap:10px; box-shadow:0 40px 70px -40px rgba(20,26,51,.7)}
.up-top{display:flex; justify-content:space-between; align-items:center}
.up-top span{font-size:11px; color:#9FB0D2; background:rgba(255,255,255,.08); padding:3px 9px; border-radius:999px}
.up-state{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06)}
.up-state small{display:block; color:#9FB0D2; font-size:12px}
.up-state > div > b{font-size:20px; font-weight:500}
.up-ring{position:relative; width:84px; height:84px}
.up-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.up-ring circle{fill:none; stroke:rgba(255,255,255,.1); stroke-width:7}
.up-ring .v{stroke:var(--cyan); stroke-linecap:round; stroke-dasharray:213.6; stroke-dashoffset:184; animation:ringl 2.4s ease-out both}
@keyframes ringl{from{stroke-dashoffset:0}}
.up-ring span{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1}
.up-ring span b{font-size:15px; font-weight:600}
.up-ring span small{font-size:10px; color:#9FB0D2}
.up-meta{display:flex; gap:14px; font-size:13px; color:#C9CDE4}
.up-meta span{display:inline-flex; align-items:center; gap:6px}
.up-btn{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; text-align:left; width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; border-radius:16px; padding:10px 12px; font:inherit; cursor:pointer; transition:background .2s, border-color .2s}
.up-btn:hover{background:rgba(255,255,255,.09); border-color:var(--c)}
.up-btn .of-ic{width:36px; height:36px; border-radius:11px; background:var(--c)}
.up-btn b{display:block; font-weight:500; font-size:15px}
.up-btn small{color:#9FB0D2; font-size:12px}
.up-btn em{font-style:normal; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--c); color:#fff}
.up-note{margin:2px 0 0; font-size:12px; color:#9FB0D2}
.wacc{margin-top:28px; background:#fff; border:1px solid var(--rule); border-radius:26px; padding:30px}
.wacc h3{font-size:22px; margin-bottom:16px}
.acc-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.acc-c{display:flex; gap:14px; align-items:flex-start; background:var(--bg-2); border-radius:18px; padding:18px}
.acc-c b{display:block; font-weight:500; font-size:18px; margin-bottom:4px}
.acc-c p{margin:0; color:var(--soft); font-size:15px}
.acc-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; font-size:15px}
.acc-list li{display:flex; align-items:center; gap:8px}
.acc-list svg{color:#14A06B}
@media (prefers-reduced-motion: reduce){.up-ring .v{animation:none}}
@media (max-width:1000px){.pb{grid-template-columns:1fr}}
@media (max-width:700px){.pb-crit,.ps-grid,.acc-grid{grid-template-columns:1fr} .pb-left,.wacc{padding:20px}}
.cloud{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; background:#fff; border:1px solid var(--rule); border-radius:28px; padding:36px; margin-bottom:28px}
.cl-txt h3{font-size:clamp(28px, 3.4vw, 40px); margin:12px 0 14px}
.cl-txt > p{margin:0 0 14px; color:var(--soft); font-weight:300; font-size:17px}
.cl-txt .cl-lab{margin:18px 0 10px; font-weight:500; color:var(--ink); font-size:15px}
.cl-inc{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cl-inc > div{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; align-items:center; background:var(--bg-2); border-radius:16px; padding:12px}
.cl-inc .of-ic{grid-row:span 2}
.cl-inc b{font-weight:500; font-size:15px}
.cl-inc small{color:var(--soft); font-size:13px}
.cl-schema{display:flex; flex-direction:column; align-items:stretch; background:linear-gradient(160deg, #0E1430, #1A1E4A); border-radius:24px; padding:22px; color:#F2F4FB}
.cs-lab{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#9FB0D2; margin-bottom:10px}
.cs-dc{border:1px dashed rgba(255,255,255,.2); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px}
.cs-srv{display:grid; grid-template-columns:44px minmax(0,1fr) 12px; gap:12px; align-items:center; background:rgba(255,255,255,.06); border-radius:14px; padding:10px 12px}
.cs-srv.main{background:rgba(151,21,215,.22)}
.cs-srv b{display:block; font-weight:500; font-size:15px}
.cs-srv small{color:#9FB0D2; font-size:12px}
.cs-led{width:10px; height:10px; border-radius:50%; background:#3FD39A; box-shadow:0 0 10px #3FD39A; animation:blink 1.6s infinite}
.cs-led.alt{background:#26D1E3; box-shadow:0 0 10px #26D1E3; animation-delay:.8s}
.cs-link{position:relative; height:64px; display:flex; align-items:center; justify-content:center}
.cs-link i{position:absolute; left:50%; top:4px; bottom:4px; width:2px; margin-left:-1px; background:repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 12px); background-size:2px 24px; animation:dash2 .8s linear infinite}
@keyframes dash2{to{background-position:0 -24px}}
.cs-link span{position:relative; font-size:12px; padding:3px 10px; border-radius:999px; background:#141A33; border:1px solid rgba(255,255,255,.15); color:#C9CDE4}
.cs-office{border-radius:18px; padding:14px; background:rgba(255,255,255,.95); color:var(--ink)}
.cs-office .cs-lab{color:var(--soft)}
.cs-phones{display:flex; gap:10px}
.cs-none{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:600; color:#B42335; background:#FDECEE; padding:5px 12px; border-radius:999px}
@media (prefers-reduced-motion: reduce){.cs-led,.cs-link i{animation:none}}
@media (max-width:980px){.cloud{grid-template-columns:1fr; padding:24px 18px; gap:24px}}
@media (max-width:520px){.cl-inc{grid-template-columns:1fr}}
.degr{margin:0; font-size:14px; line-height:1.5; padding:10px 12px; border-radius:12px; background:rgba(63,211,154,.14); color:#C9F2E1}
.degr b{color:#3FD39A}
.degr a{color:#fff; font-weight:600}
.degr-hint{margin:0; font-size:13px; color:#8F96BE}
.degr-band{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; padding:22px 24px; border-radius:22px; background:linear-gradient(120deg, #E3F6EE, #EAF0FF 60%, #F3E6FF)}
.db-ic{flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, #14A06B, var(--cyan))}
.degr-band > div:nth-child(2){flex:1; min-width:240px}
.degr-band b{display:block; font-size:19px; font-weight:500; margin-bottom:2px}
.degr-band span{color:var(--soft); font-size:15px}
.cs-dcs{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch}
.cs-dcs .cs-dc{padding:12px}
.cs-dcs .cs-srv{grid-template-columns:34px minmax(0,1fr) 10px; gap:8px; padding:8px}
.cs-dcs .cs-srv .of-ic{width:34px; height:34px; border-radius:10px}
.cs-dcs .cs-srv b{font-size:13px}
.cs-dcs .cs-srv small{font-size:11px}
.cs-sync{position:relative; width:44px; display:flex; align-items:center; justify-content:center}
.cs-sync i{position:absolute; top:50%; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, var(--magenta) 0 5px, transparent 5px 10px); background-size:20px 2px; animation:sync 1s linear infinite}
@keyframes sync{to{background-position:20px 0}}
.cs-sync em{position:absolute; top:calc(50% + 6px); font-style:normal; font-size:8px; letter-spacing:.02em; color:#9FB0D2; white-space:nowrap; transform:rotate(0)}
@media (max-width:520px){.cs-dcs{grid-template-columns:1fr} .cs-sync{width:auto; height:26px} .cs-sync i{top:0; bottom:0; left:50%; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg, var(--magenta) 0 5px, transparent 5px 10px); background-size:2px 20px} .cs-sync em{top:auto; left:calc(50% + 8px)}}
/* Techno */
.techs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:22px; overflow:hidden}
.techs div{background:var(--bg); padding:26px 24px; min-width:0}
.techs h4{font-size:15px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-bottom:12px; display:flex; align-items:center; gap:8px}
.techs h4 i{width:8px; height:8px; border-radius:50%}
.techs p{margin:0; font-size:18px; line-height:1.7}
@media (max-width:860px){.techs{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.techs{grid-template-columns:1fr}}
/* Studio */
.apps{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.prod{position:relative; overflow:hidden; border-radius:26px; padding:36px; display:flex; flex-direction:column; gap:16px; min-width:0}
.prod.mylio{background:linear-gradient(150deg, #F3E6FF, #FFE9F6 60%, #FFF0E8)}
.prod.upmi{background:linear-gradient(150deg, #E2F8FB, #EAF0FF 60%, #F2E9FF)}
.prod .tag{font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.prod h3{font-size:clamp(30px, 3.4vw, 40px)}
.prod > p{margin:0; color:var(--soft); font-weight:300; font-size:18px; max-width:44ch}
.prod ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.packs{display:flex; flex-wrap:wrap; gap:10px}
.packs div{background:rgba(255,255,255,.75); border-radius:14px; padding:12px 16px; min-width:0}
.packs small{display:block; font-size:13px; color:var(--soft)}
.packs b{font-size:22px; font-weight:500}
.prod .btn{align-self:flex-start; margin-top:auto}
@media (max-width:860px){.apps{grid-template-columns:1fr} .prod{padding:26px}}
/* Méthode */
.track{display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.stop{position:relative; padding:46px 28px 0 0; min-width:0}
.stop::before{content:""; position:absolute; top:9px; left:0; right:0; height:2px; background:var(--c)}
.stop:last-child::before{right:auto; width:20px}
.stop::after{content:""; position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; background:var(--bg); border:2px solid var(--c)}
.stop:last-child::after{background:var(--c)}
.stop small{display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:6px}
.stop h3{font-size:23px; margin-bottom:8px}
.stop p{margin:0; color:var(--soft); font-weight:300}
@media (max-width:860px){
.track{grid-template-columns:1fr} .stop{padding:0 0 36px 48px}
.stop::before{top:0; bottom:0; left:9px; right:auto; width:2px; height:auto}
.stop:last-child::before{display:none}
}
/* Proximité */
.proche .box{position:relative; overflow:hidden; border-radius:28px; background:var(--bg-2); padding:68px 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center}
.proche .box > .sym{position:absolute; right:-70px; bottom:-90px; width:360px; height:420px; opacity:.12; pointer-events:none}
.proche h2{font-size:clamp(54px, 8vw, 116px); font-weight:300}
.proche .txt{position:relative}
.proche p{margin:0 0 22px; color:var(--soft); font-size:19px; font-weight:300; max-width:42ch}
.towns{display:flex; flex-wrap:wrap; gap:8px}
.towns span{font-size:14px; padding:6px 13px; border-radius:999px; background:var(--bg)}
.towns span:first-child{background:var(--ink); color:#fff}
@media (max-width:860px){.proche .box{grid-template-columns:1fr; gap:22px; padding:40px 22px}}
/* Contact */
.contact .band{border-radius:28px; padding:68px 56px; background:linear-gradient(120deg, var(--orange) 0%, var(--coral) 25%, var(--magenta) 55%, var(--purple) 100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; color:#fff}
.contact h2{font-size:clamp(34px, 4.2vw, 52px); margin-bottom:20px}
.big{display:block; font-weight:500; font-size:clamp(38px, 5.4vw, 70px); letter-spacing:-.02em; line-height:1; user-select:all; margin-bottom:18px}
.copy{font:500 15px var(--f); background:#fff; color:var(--ink); border:0; border-radius:999px; padding:11px 18px; cursor:pointer}
.quick{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.quick a{font-size:15px; font-weight:500; text-decoration:none; padding:9px 16px; border-radius:999px; border:1.5px solid rgba(255,255,255,.7)}
.quick a:hover{background:#fff; color:var(--ink)}
form{background:#fff; color:var(--ink); border-radius:22px; padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:16px; box-shadow:0 30px 70px -30px rgba(20,26,51,.5)}
form .full{grid-column:1/-1}
label.f{display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--soft)}
input,select,textarea{font:16px var(--f); color:var(--ink); background:var(--bg-2); border:1px solid var(--rule); border-radius:12px; padding:13px 14px; width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--purple); outline:none}
textarea{min-height:100px; resize:vertical}
.send{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
#status{margin:0; font-size:14px; color:var(--soft)}
@media (max-width:860px){.contact .band{grid-template-columns:1fr; padding:40px 22px} form{grid-template-columns:1fr; padding:20px}}
footer{background:var(--bg-2); border-top:1px solid var(--rule)}
footer .wrap{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:32px; padding-block:56px 40px; font-size:15px}
footer .brand .sym{width:34px; height:40px}
footer .brand .word{width:96px; height:19px}
footer p{color:var(--soft); margin:14px 0 0; max-width:32ch}
footer h4{font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-bottom:12px; font-weight:500}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
footer ul a{text-decoration:none}
footer ul a:hover{color:var(--purple)}
.legal{grid-column:1/-1; border-top:1px solid var(--rule); padding-top:20px; font-size:13px; color:var(--soft); display:flex; flex-wrap:wrap; gap:8px 24px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr 1fr} footer .wrap > div:first-child{grid-column:1/-1}}
/* galerie écrans espace client */
.ecrans{padding-top:24px}
.shots{display:grid;gap:18px}
.shot-tabs{display:flex;flex-wrap:wrap;gap:8px}
.shot-tabs button{font:inherit;font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--line,#E4E6F0);background:#fff;color:var(--ink,#141A33);cursor:pointer;transition:.2s}
.shot-tabs button[aria-pressed="true"]{background:linear-gradient(90deg,#F56438,#C802AD 55%,#9715D7);color:#fff;border-color:transparent}
.shot{margin:0}
.shot-frame{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line,#E4E6F0);box-shadow:0 30px 60px -30px rgba(20,26,51,.35),0 8px 20px -12px rgba(151,21,215,.25);max-width:840px;margin:0 auto}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F4F5FA;border-bottom:1px solid var(--line,#E4E6F0)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#D9DBE6}
.shot-bar i:nth-child(1){background:#F56438}.shot-bar i:nth-child(2){background:#F5B638}.shot-bar i:nth-child(3){background:#26D1E3}
.shot-bar span{margin-left:10px;font-size:12px;color:#5A5E7E;background:#fff;border-radius:6px;padding:3px 10px}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{max-width:840px;margin:12px auto 0;color:#5A5E7E;font-size:15px}
.shot figcaption b{color:var(--ink,#141A33);margin-right:6px}
@media (max-width:640px){.shot-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.shot-tabs button{white-space:nowrap}}
/* captures portail Wi-Fi */
.wf-row{display:flex; gap:22px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.wf-ph{margin:0; flex:0 0 220px; min-width:0; scroll-snap-align:start}
.wf-scr{border-radius:30px; padding:8px; background:#141A33; box-shadow:0 26px 50px -24px rgba(20,26,51,.55)}
.wf-scr img{display:block; width:100%; height:auto; border-radius:23px}
.wf-ph figcaption{margin-top:12px; font-size:14px; line-height:1.4}
.wf-ph figcaption b{display:block; font-weight:500; font-size:16px}
.wf-ph figcaption span{color:var(--soft)}
@media (min-width:1300px){.wf-row{overflow:visible} .wf-ph{flex:1 1 0}}
@media (max-width:640px){.wf-ph{flex-basis:200px}}
.wf-screen.wf-real{padding:0; display:block; position:relative; background:#F1EEE6}
.wf-real img{position:absolute; inset:0; width:100%; height:auto; opacity:0; animation:wfcycle 12s infinite}
.wf-real img:nth-child(1){animation-delay:0s} .wf-real img:nth-child(2){animation-delay:4s} .wf-real img:nth-child(3){animation-delay:8s}
@keyframes wfcycle{0%{opacity:0} 4%{opacity:1} 33%{opacity:1} 37%{opacity:0} 100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.wf-real img{animation:none} .wf-real img:first-child{opacity:1}}
/* test d'éligibilité : entreprise, synthèse, rappel */
.elig-co{margin-top:10px}
.elig-co input,.elig-call input[type=text],.elig-call input:not([type]),.elig-call input[type=tel],.elig-call input[type=email]{width:100%; font:15px var(--f); padding:13px 18px; border-radius:999px; border:0; background:#fff; color:var(--ink)}
.elig-co input:focus,.elig-call input:focus{outline:none; box-shadow:0 0 0 3px rgba(200,2,173,.45)}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
.elig-syn{margin:0; padding:12px 14px; border-radius:14px; background:rgba(38,209,227,.1); border:1px solid rgba(38,209,227,.3); font-size:14px; color:#DDF7FA}
.elig-syn b{display:block; color:#fff; font-weight:600; margin-bottom:2px}
.elig-call{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}
.elig-call .ec-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px} .elig-call .ec-grid input:first-child{grid-column:1/-1}
.ec-ok{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#C9CDE4} .ec-ok input{margin-top:3px; accent-color:var(--magenta)}
.elig-call .btn{align-self:flex-start}
.ec-msg{margin:0; font-size:14px; min-height:1.2em; color:#9FE6C8} .ec-msg.bad{color:#FF9AA6}
@media (max-width:560px){.elig-call .ec-grid{grid-template-columns:1fr}}
/* voile pendant le test d'éligibilité */
.elig-res{position:relative}
.elig-load{position:absolute; inset:0; z-index:10; border-radius:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
background:rgba(14,20,48,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:elFade .25s ease}
.elig-load b{font-size:22px; font-weight:500; color:#fff}
.elig-load p{margin:0; color:#C9CDE4; font-size:15px; min-height:1.4em; transition:opacity .25s}
.el-rings{position:relative; width:110px; height:110px; margin-bottom:8px}
.el-rings i{position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:var(--orange); border-right-color:var(--magenta); animation:elSpin 1.4s linear infinite}
.el-rings i:nth-child(2){inset:14px; border-top-color:var(--purple); border-right-color:var(--cyan); animation-duration:1.1s; animation-direction:reverse}
.el-rings i:nth-child(3){inset:28px; border-top-color:var(--cyan); border-right-color:var(--coral); animation-duration:.9s}
.el-rings span{position:absolute; inset:44px; border-radius:50%; background:linear-gradient(135deg, var(--orange), var(--magenta) 55%, var(--purple)); box-shadow:0 0 24px rgba(200,2,173,.6); animation:elPulse 1.2s ease-in-out infinite}
.el-steps{display:flex; gap:6px; list-style:none; margin:6px 0 0; padding:0}
.el-steps li{width:26px; height:4px; border-radius:4px; background:rgba(255,255,255,.15); transition:background .3s}
.el-steps li.on{background:linear-gradient(90deg, var(--orange), var(--magenta))}
@keyframes elSpin{to{transform:rotate(360deg)}}
@keyframes elPulse{50%{transform:scale(.8); opacity:.7}}
@keyframes elFade{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.el-rings i,.el-rings span{animation:none}}
/* Test d'éligibilité en deux temps : 1) recherche seule 2) résultat compact (infos, carte + fibre, mobile) */
.elig-new{display:none}
.elig{scroll-margin-top:96px}
.elig:not(.is-done){grid-template-columns:minmax(0,1fr); justify-items:center}
.elig:not(.is-done) .elig-res,.elig:not(.is-done) .elig-mob{display:none}
.elig:not(.is-done) .elig-txt{width:100%; max-width:720px; text-align:center}
.elig:not(.is-done) .elig-txt > p{margin-inline:auto}
.elig:not(.is-done) .elig-form{text-align:left}
.elig:not(.is-done) .elig-mode{display:flex; width:fit-content; margin-inline:auto}
.elig:not(.is-done) .elig-src{text-align:center}
.elig.is-done{grid-template-columns:minmax(0,1fr); gap:18px; padding:28px}
.elig.is-done .elig-txt{display:none}
.elig.is-done .elig-res{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-areas:"head head" "map list" "map syn" "map cta" "call call"; align-content:start; gap:12px 18px; padding:18px}
.elig.is-done .elig-head{grid-area:head; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1)}
.elig.is-done .elig-head > div{flex:1; min-width:0}
.elig.is-done .elig-head b{font-size:20px}
.elig-who{display:block; color:#C9CDE4; font-size:13px}
.elig.is-done .elig-new{display:inline-flex; flex:none; font:500 14px var(--f); color:#fff; background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:8px 16px; cursor:pointer}
.elig.is-done .elig-new:hover{border-color:#fff}
.elig.is-done .elig-map{grid-area:map; height:100%; min-height:250px}
.elig.is-done .elig-list{grid-area:list; gap:6px}
.elig.is-done .elig-list li{padding:8px 10px; gap:10px}
.elig.is-done .elig-list b{font-size:14px}
.elig.is-done .elig-list small{font-size:12px}
.elig.is-done .ei{width:44px; height:28px; font-size:10px}
.elig.is-done .elig-syn{grid-area:syn; font-size:13px; padding:10px 12px}
.elig.is-done .elig-acts{grid-area:cta} .elig.is-done .elig-acts .btn{padding:11px 18px; font-size:14px}
.elig.is-done .elig-call{grid-area:call}
.elig.is-done .elig-mob{padding-top:18px; gap:12px}
.elig.is-done .em-head h3{font-size:18px; margin-top:4px}
.elig.is-done .em-head p{font-size:13px}
.elig.is-done .op-grid{gap:12px}
.elig.is-done .op{padding:14px; gap:10px; border-radius:16px}
.elig.is-done .op-name{font-size:13px; padding:4px 10px}
.elig.is-done .op-lvl{font-size:13px}
.elig.is-done .op-rows{gap:6px}
.elig.is-done .op-rows div{padding:8px; gap:4px}
.elig.is-done .op-rows b{font-size:12px}
.elig.is-done .op-note{font-size:12px}
@media (max-width:820px){
.elig.is-done{padding:16px}
.elig.is-done .elig-res{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "map" "list" "syn" "cta" "call"; padding:14px}
.elig.is-done .elig-map{height:220px; min-height:0}
.elig.is-done .elig-head{flex-wrap:wrap}
.elig.is-done .elig-head > div{flex:1 1 calc(100% - 52px)}
.elig.is-done .elig-head b{font-size:17px}
.elig.is-done .elig-new{margin-left:50px; padding:6px 14px; font-size:13px}
.elig.is-done .op-grid{grid-template-columns:minmax(0,1fr)}
}
/* Étape 1 : recherche seule, version blanche et compacte (aucune info fibre/mobile avant « Tester ») */
.elig:not(.is-done){max-width:720px; margin-inline:auto; padding:32px 28px 24px; background:#fff; color:var(--ink); border:1px solid #E7E6F0; box-shadow:0 30px 60px -40px rgba(20,26,51,.35)}
.elig:not(.is-done)::before,.elig:not(.is-done)::after{display:none}
.elig:not(.is-done){overflow:visible; position:relative; z-index:5}
.elig .elig-sugg{z-index:40}
.elig:not(.is-done) .elig-txt > .kicker{display:none}
.elig:not(.is-done) h2{font-size:clamp(26px, 3vw, 34px); margin:8px 0 20px}
.elig:not(.is-done) .elig-txt > p{display:none}
.elig:not(.is-done) .elig-mode{background:#F3F2F8; border-color:#E7E6F0}
.elig:not(.is-done) .elig-mode button{color:var(--soft)}
.elig:not(.is-done) .elig-mode button[aria-pressed="true"]{background:var(--ink); color:#fff}
.elig:not(.is-done) .elig-field{border:1.5px solid #E7E6F0; box-shadow:none}
.elig:not(.is-done) .elig-field:focus-within{border-color:var(--magenta); box-shadow:0 0 0 3px rgba(200,2,173,.15)}
.elig:not(.is-done) .elig-co input{border:1.5px solid #E7E6F0}
.elig:not(.is-done) .elig-co input:focus{border-color:var(--magenta); box-shadow:0 0 0 3px rgba(200,2,173,.15)}
.elig:not(.is-done) .elig-company{background:#F6F5FB; border-color:#E7E6F0}
.elig:not(.is-done) .elig-company span{color:var(--ink)} .elig:not(.is-done) .elig-company small{color:var(--soft)}
.elig:not(.is-done) .elig-err{color:#C8233F}
.elig:not(.is-done) .elig-src{color:var(--soft); font-size:12px}
@media (max-width:640px){.elig:not(.is-done){padding:24px 16px 18px}}
/* Étape 2 en version blanche et réduite */
.elig.is-done{max-width:1000px; margin-inline:auto; background:#fff; color:var(--ink); border:1px solid #E7E6F0; box-shadow:0 30px 60px -40px rgba(20,26,51,.35); padding:22px}
.elig.is-done::before,.elig.is-done::after{display:none}
.elig.is-done .elig-res{background:#F7F6FB; border-color:#E7E6F0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:14px; gap:10px 14px}
.elig.is-done .elig-head{border-bottom-color:#E7E6F0; padding-bottom:10px}
.elig.is-done .elig-head small{color:var(--soft); font-size:11px}
.elig.is-done .elig-head b{font-size:17px; color:var(--ink)}
.elig.is-done .elig-pin{width:32px; height:32px; border-radius:10px} .elig.is-done .elig-pin::after{inset:10px}
.elig.is-done .elig-who{color:var(--soft); font-size:12px}
.elig.is-done .elig-new{color:var(--ink); border-color:#D9D8E4; padding:6px 14px; font-size:13px}
.elig.is-done .elig-new:hover{border-color:var(--ink)}
.elig.is-done .elig-map{min-height:210px; border-radius:14px}
.elig.is-done .elig-list li{background:#fff; border:1px solid #E7E6F0; padding:7px 10px}
.elig.is-done .elig-list b{font-size:13px}
.elig.is-done .elig-list small{color:var(--soft); font-size:12px}
.elig.is-done .elig-list .chip.load{background:#EEEDF5; color:var(--soft)}
.elig.is-done .ei{width:40px; height:26px; font-size:10px; border-radius:8px}
.elig.is-done .elig-syn{background:#EAFBFD; border-color:#BDEFF5; color:var(--ink); font-size:12.5px; padding:9px 11px}
.elig.is-done .elig-syn b{color:var(--ink)}
.elig.is-done .elig-acts .btn{padding:9px 16px; font-size:13px}
.elig.is-done .elig-call{background:#fff; border-color:#E7E6F0}
.elig.is-done .elig-call input{border:1.5px solid #E7E6F0}
.elig.is-done .ec-ok{color:var(--soft)}
.elig.is-done .ec-msg{color:#0B7A50} .elig.is-done .ec-msg.bad{color:#C8233F}
.elig.is-done .elig-mob{border-top-color:#E7E6F0; padding-top:14px; gap:10px}
.elig.is-done .em-head .kicker{color:var(--soft); font-size:12px}
.elig.is-done .em-head h3{color:var(--ink); font-size:16px}
.elig.is-done .em-head p{color:var(--soft); font-size:12.5px}
.elig.is-done .op{background:#F7F6FB; border-color:#E7E6F0; padding:12px; gap:8px; border-radius:14px}
.elig.is-done .op-name{font-size:12px; padding:3px 9px; border-radius:8px}
.elig.is-done .op-lvl{color:var(--soft); font-size:12px}
.elig.is-done .sig{height:18px} .elig.is-done .sig i{width:5px; background:#DEDDE8}
.elig.is-done .op-rows div{background:#fff; border:1px solid #E7E6F0; padding:7px}
.elig.is-done .op-rows b{font-size:11.5px; color:var(--ink)}
.elig.is-done .op .chip.load{background:#EEEDF5; color:var(--soft)}
.elig.is-done .op-note{color:var(--soft); font-size:11.5px}
.elig.is-done .op-note a{color:var(--ink)}
.elig.is-done .elig-load{background:rgba(255,255,255,.95)}
.elig.is-done .elig-load b{color:var(--ink); font-size:19px}
.elig.is-done .elig-load p{color:var(--soft); font-size:14px}
.elig.is-done .el-steps li{background:#E7E6F0}
.elig.is-done .el-steps li.on{background:linear-gradient(90deg, var(--orange), var(--magenta))}
.elig.is-loading .elig-mob{opacity:.35; filter:blur(2px); pointer-events:none; transition:opacity .3s}
.elig.is-done .el-rings{width:90px; height:90px} .elig.is-done .el-rings span{inset:36px} .elig.is-done .el-rings i:nth-child(2){inset:12px} .elig.is-done .el-rings i:nth-child(3){inset:24px}
@media (max-width:820px){.elig.is-done{padding:14px}}
/* vignettes d'offres OCALL et mobile filtré */
.elig-list small .offer{display:inline-flex; align-items:center; gap:6px; margin:3px 6px 0 0; padding:3px 4px 3px 10px; border-radius:999px; background:#E3F6EE; color:#0B7A50; font-weight:600; font-size:12px}
.elig-list small .offer em{font-style:normal; font-weight:500; font-size:11px; background:#0B7A50; color:#fff; border-radius:999px; padding:1px 8px}
.op-grid.one{grid-template-columns:minmax(0,1fr); max-width:520px}
.op-none{margin:0; padding:12px 14px; border-radius:14px; background:#FFF1DA; color:#7A4A00; font-size:13px}
/* couverture mobile : barres de signal + débit estimé */
.op-bars{display:flex; flex-direction:column; gap:10px}
.ob{display:grid; grid-template-columns:72px minmax(0,1fr) 96px; align-items:center; gap:10px; font-size:13px}
.ob b{font-weight:600}
.ob .t{height:8px; border-radius:8px; background:rgba(255,255,255,.15); overflow:hidden}
.ob .t i{display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, var(--orange), var(--magenta)); transition:width .8s cubic-bezier(.2,.8,.2,1)}
.ob em{font-style:normal; font-size:12px; color:#C9CDE4; text-align:right; white-space:nowrap}
.ob.load .t{background:linear-gradient(90deg, rgba(200,200,220,.25) 25%, rgba(200,200,220,.5) 50%, rgba(200,200,220,.25) 75%); background-size:200% 100%; animation:obShim 1.2s linear infinite}
@keyframes obShim{to{background-position:-200% 0}}
.elig.is-done .ob .t{background:#E7E6F0}
.elig.is-done .ob.load .t{background:linear-gradient(90deg, #EEEDF5 25%, #DEDDE8 50%, #EEEDF5 75%); background-size:200% 100%}
.elig.is-done .ob em{color:var(--soft)}
.elig.is-done .ob b{color:var(--ink)}
.elig.is-done .op-top{margin-bottom:2px}
@media (max-width:560px){.ob{grid-template-columns:62px minmax(0,1fr) 84px; gap:8px}}
/* formulaire de rappel, version propre */
.elig.is-done .elig-call{gap:14px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid #E7E6F0}
.ec-head b{display:block; font-size:15px; font-weight:600; color:var(--ink)}
.ec-head span{font-size:13px; color:var(--soft)}
.elig-call .ec-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.elig-call .ec-grid input:first-child{grid-column:auto}
.elig-call .ec-grid label{display:flex; flex-direction:column; gap:4px; min-width:0}
.elig-call .ec-grid label span{font-size:12px; font-weight:500; color:var(--soft)}
.elig.is-done .elig-call .ec-grid input{width:100%; height:42px; padding:0 12px; border-radius:10px; border:1.5px solid #E7E6F0; background:#FBFBFD; font:14px var(--f); color:var(--ink)}
.elig.is-done .elig-call .ec-grid input:focus{outline:none; border-color:var(--magenta); background:#fff; box-shadow:0 0 0 3px rgba(200,2,173,.12)}
.ec-foot{display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap}
.elig-call .ec-ok{display:flex; align-items:flex-start; gap:10px; margin:0; font-size:12.5px; line-height:1.4; color:var(--soft); cursor:pointer; flex:1 1 260px}
.elig-call .ec-ok input{flex:none; width:18px!important; height:18px!important; margin:1px 0 0; padding:0; border:0!important; box-shadow:none!important; accent-color:var(--magenta)}
.elig-call .ec-foot .btn{flex:none; padding:10px 22px; font-size:14px}
@media (max-width:640px){.elig-call .ec-grid{grid-template-columns:1fr} .elig-call .ec-foot .btn{width:100%; justify-content:center}}
/* icônes des rubriques : blanc sur dégradé */
.uni .uni-ic{width:52px; height:52px; border-radius:15px; color:#fff; background:linear-gradient(135deg, var(--c1, var(--c)), var(--c2, var(--c))); box-shadow:0 12px 22px -12px var(--c2, var(--c))}
.uni .uni-ic svg{width:28px; height:28px}
/* bandeau des offres sous l'accueil : 4 cartes */
.strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; padding:8px 0 28px}
.strip a{position:relative; display:flex; align-items:center; gap:14px; min-width:0; padding:16px 36px 16px 18px; border-radius:18px; background:#fff; border:1px solid var(--rule); text-decoration:none; color:var(--ink);
box-shadow:0 18px 36px -28px rgba(20,26,51,.45); transition:transform .25s, box-shadow .25s, border-color .25s}
.strip a:hover{transform:translateY(-3px); border-color:var(--c2); box-shadow:0 24px 40px -26px var(--c2)}
.st-ic{flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:0 10px 18px -10px var(--c2)}
.st-tx{display:flex; flex-direction:column; min-width:0}
.st-tx b{font-weight:500; font-size:15px; color:var(--soft)}
.st-tx > span{font-size:13px; color:var(--soft); line-height:1.3}
.st-tx strong{font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin-right:2px; white-space:nowrap}
.st-go{position:absolute; right:14px; top:14px; color:var(--soft); opacity:.6; transition:transform .25s, opacity .25s}
.strip a:hover .st-go{transform:translateX(3px); opacity:1; color:var(--c2)}
@media (max-width:960px){.strip{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.strip{gap:10px} .strip a{padding:12px; gap:10px; align-items:flex-start} .st-ic{width:36px; height:36px; border-radius:11px} .st-ic svg{width:19px; height:19px} .st-tx b{font-size:13px} .st-tx strong{display:block; font-size:19px} .st-go{display:none}}
/* Prise de rendez-vous */
.rdv{padding-block:48px 80px}
.rdv-app{max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--rule); border-radius:26px; padding:28px; box-shadow:0 40px 80px -50px rgba(20,26,51,.45)}
.rv-steps{display:flex; gap:8px; list-style:none; margin:0 0 22px; padding:0; counter-reset:s}
.rv-steps li{flex:1; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--soft); padding-bottom:12px; border-bottom:3px solid var(--rule); transition:border-color .3s}
.rv-steps li i{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font:600 13px var(--f); font-style:normal; background:var(--bg-2); color:var(--soft)}
.rv-steps li.on{color:var(--ink); border-image:linear-gradient(90deg,var(--orange),var(--magenta),var(--purple)) 1}
.rv-steps li.on i{background:linear-gradient(135deg,var(--orange),var(--magenta)); color:#fff}
.rv-steps li.ok{color:var(--ink); border-color:#BDE9D3}
.rv-steps li.ok i{background:#E3F7EC; color:#119A5B; font-size:0}
.rv-steps li.ok i::after{content:"✓"; font-size:13px}
.rv-test{display:flex; align-items:center; gap:8px; margin:-6px 0 18px; padding:10px 14px; border-radius:12px; background:#ECF9F2; color:#13744A; font-size:14px}
.rv-h{font-size:22px; font-weight:500; margin:0 0 14px}
.rv-wait{display:flex; align-items:center; gap:10px; color:var(--soft); margin:6px 0}
.rv-wait i{width:16px; height:16px; border-radius:50%; border:2px solid var(--rule); border-top-color:var(--magenta); animation:rvspin .8s linear infinite}
@keyframes rvspin{to{transform:rotate(360deg)}}
.rv-types{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.rv-type{font:inherit; color:inherit; text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--rule); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s, box-shadow .2s, transform .2s}
.rv-type:hover{border-color:color-mix(in srgb, var(--c2) 45%, var(--rule)); transform:translateY(-2px)}
.rv-type.on{border-color:var(--c2); box-shadow:0 0 0 3px color-mix(in srgb, var(--c2) 16%, transparent)}
.rv-type .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 10px 20px -10px var(--c2); margin-bottom:8px}
.rv-type b{font-size:17px; font-weight:500}
.rv-type small{color:var(--soft); font-size:14px}
.rv-adr{margin-top:18px; padding:18px; border-radius:18px; background:var(--bg-2)}
.rv-adr label{display:block; font-size:14px; color:var(--soft); margin-bottom:8px}
.rv-adr small{display:block; color:var(--soft); font-size:13px; margin-top:8px}
.rv-adr-row{display:flex; gap:10px}
.rv-ac{position:relative; flex:1}
.rv-adr input{background:#fff}
.rv-adr .btn{padding:12px 20px; font-size:15px; flex:none}
.rv-sugg{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:#fff; border:1px solid var(--rule); border-radius:14px; box-shadow:0 20px 40px -18px rgba(20,26,51,.35); overflow:hidden}
.rv-sugg button{display:block; width:100%; text-align:left; font:15px var(--f); color:var(--ink); background:none; border:0; padding:11px 14px; cursor:pointer}
.rv-sugg button:hover,.rv-sugg button:focus{background:var(--bg-2); outline:none}
.rv-err{color:#C0263A; font-size:14px; margin:12px 0 0; min-height:1px}
.rv-err:empty{margin:0}
.rv-info{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:12px 16px; border-radius:14px; background:var(--bg-2); font-size:14px; color:var(--soft); margin-bottom:16px}
.rv-info b{color:var(--ink); font-weight:500; font-size:15px}
.rv-days{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:8px; scrollbar-width:thin}
.rv-day{flex:none; min-width:76px; font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--rule); border-radius:14px; padding:8px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; line-height:1.2}
.rv-day small{font-size:12px; color:var(--soft); text-transform:capitalize}
.rv-day b{font-size:22px; font-weight:500; margin:2px 0}
.rv-day:hover{border-color:var(--purple)}
.rv-day.on{color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--magenta),var(--purple))}
.rv-day.on small{color:rgba(255,255,255,.85)}
.rv-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin-bottom:14px}
.rv-slot{font:500 15px var(--f); color:var(--ink); background:var(--bg-2); border:1.5px solid transparent; border-radius:12px; padding:11px 6px; cursor:pointer; transition:.2s}
.rv-slot:hover{background:#fff; border-color:var(--magenta); color:var(--magenta)}
.rv-back{font:500 14px var(--f); color:var(--soft); background:none; border:0; padding:6px 0; cursor:pointer}
.rv-back:hover{color:var(--ink)}
form.rv-form{display:block; background:none; padding:0; border-radius:0; box-shadow:none}
.rv-recap{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:linear-gradient(100deg, color-mix(in srgb,var(--orange) 8%,#fff), color-mix(in srgb,var(--purple) 8%,#fff)); margin-bottom:18px}
.rv-recap .ic{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2))}
.rv-recap b{display:block; font-weight:500}
.rv-recap span{color:var(--soft); font-size:14px}
.rv-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.rv-grid .full{grid-column:1/-1}
.rv-grid input.bad{border-color:#C0263A}
.rv-ok{display:flex; gap:10px; align-items:flex-start; margin:16px 0; font-size:14px; color:var(--soft); cursor:pointer}
.rv-ok input{width:18px!important; height:18px; flex:none; margin:2px 0 0; padding:0; accent-color:var(--magenta)}
.rv-hp{position:absolute!important; left:-9999px; width:1px!important; height:1px}
.rv-send{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.rv-done{text-align:center; padding:10px 0}
.rv-done .ok{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#21C07A,#0E9F6E); box-shadow:0 16px 30px -14px #0E9F6E}
.rv-done h2{font-size:28px; font-weight:500; margin:0 0 4px}
.rv-done > p{color:var(--soft); margin:6px auto; max-width:52ch}
.rv-done dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; max-width:520px; margin:18px auto; padding:18px 20px; text-align:left; border-radius:16px; background:var(--bg-2)}
.rv-done dt{color:var(--soft); font-size:14px} .rv-done dd{margin:0; font-weight:500; word-break:break-word}
.rv-done small{color:var(--soft)}
.rv-alt{text-align:center; color:var(--soft); margin:22px 0 0}
.rv-alt a{color:var(--ink); font-weight:500; text-decoration:none}
@media (max-width:640px){.rv-type{display:grid; grid-template-columns:46px 1fr; column-gap:14px; align-items:center; padding:14px} .rv-type .ic{grid-row:span 2; margin:0} .rv-type b{font-size:16px} .rdv-app{padding:18px; border-radius:20px} .rv-steps li span{display:none} .rv-steps li.on span{display:inline} .rv-grid{grid-template-columns:1fr} .rv-adr-row{flex-direction:column} .rv-adr .btn{justify-content:center}}
.rdv-app [hidden]{display:none!important}
.rdv-app.in-contact{padding:24px; box-shadow:0 30px 70px -30px rgba(20,26,51,.5); color:var(--ink)}
.rdv-app.in-contact .rv-types{grid-template-columns:1fr}
.rdv-app.in-contact .rv-type{display:grid; grid-template-columns:46px 1fr; column-gap:14px; align-items:center; padding:14px}
.rdv-app.in-contact .rv-type .ic{grid-row:span 2; margin:0}
.rdv-app.in-contact .rv-adr-row{flex-direction:column}
.rdv-app.in-contact .rv-steps li span{display:none} .rdv-app.in-contact .rv-steps li.on span{display:inline}
.rv-cancel{padding-block:64px 90px; background:linear-gradient(180deg, var(--bg-2), var(--bg))}
.rv-cx{max-width:600px; text-align:center; padding:40px 32px}
.rv-cx-ic{width:68px; height:68px; margin:0 auto 18px; border-radius:20px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--orange),var(--magenta) 60%,var(--purple)); box-shadow:0 18px 34px -16px var(--magenta)}
.rv-cx-ic.done{border-radius:50%; background:linear-gradient(135deg,#21C07A,#0E9F6E); box-shadow:0 16px 30px -14px #0E9F6E}
.rv-cx h1{font-size:clamp(28px,4vw,38px); font-weight:500; margin:0 0 8px}
.rv-cx > p{color:var(--soft); margin:0 auto; max-width:46ch}
.rv-cx-ref{margin-top:12px!important; display:inline-block; padding:6px 14px; border-radius:999px; background:var(--bg-2); font-size:14px}
.rv-cx-ref b{color:var(--ink); font-weight:500; letter-spacing:.04em}
.rv-cx-act,.rv-cx-next{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px}
.rv-cx .rv-err{text-align:center}
@media (max-width:640px){.rv-cx{padding:28px 18px} .rv-cx-act .btn,.rv-cx-next .btn{width:100%; justify-content:center}}
/* Mentions légales, cookies */
.legal{padding-block:48px 90px}
.legal-in{display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start}
.legal-toc{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; padding:18px; border:1px solid var(--rule); border-radius:18px; background:#fff}
.legal-toc b{font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-bottom:8px}
.legal-toc a{font-size:15px; color:var(--ink); text-decoration:none; padding:6px 10px; border-radius:10px}
.legal-toc a:hover{background:var(--bg-2)}
.legal-body{max-width:760px}
.legal-body article{padding:0 0 30px; margin-bottom:30px; border-bottom:1px solid var(--rule); scroll-margin-top:96px}
.legal-body article:last-child{border-bottom:0}
.legal-body h2{font-size:26px; font-weight:500; margin:0 0 14px; color:var(--ink)}
.legal-body p,.legal-body li{color:var(--soft); line-height:1.65; font-size:16.5px}
.legal-body p{margin:0 0 12px}
.legal-body b{color:var(--ink); font-weight:500}
.legal-body ul{margin:0 0 14px; padding-left:20px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--magenta)}
.legal-id{display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:0; margin:0; border:1px solid var(--rule); border-radius:16px; overflow:hidden}
.legal-id dt,.legal-id dd{margin:0; padding:12px 16px; border-bottom:1px solid var(--rule)}
.legal-id dt{color:var(--soft); font-size:14px; background:var(--bg-2)}
.legal-id dd{color:var(--ink)}
.legal-id dt:last-of-type,.legal-id dd:last-of-type{border-bottom:0}
.legal-id a{color:var(--ink)}
.legal-up{font-size:14px; margin-top:18px!important}
.ck-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px}
.ck-card{border:1px solid var(--rule); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:4px; background:#fff}
.ck-card i{font:500 34px var(--f); font-style:normal; line-height:1; background:linear-gradient(135deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px}
.ck-card b{font-size:16px}
.ck-card span{color:var(--soft); font-size:14px; line-height:1.5}
.ck-table{border:1px solid var(--rule); border-radius:16px; overflow:hidden; margin:6px 0 16px}
.ck-table [role=row]{display:grid; grid-template-columns:1.1fr 1.4fr 1fr; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); font-size:15px; color:var(--soft)}
.ck-table [role=row]:last-child{border-bottom:0}
.ck-table .ck-h{background:var(--bg-2); font-size:13px; text-transform:uppercase; letter-spacing:.06em}
@media (max-width:860px){.legal-in{grid-template-columns:1fr; gap:24px} .legal-toc{position:static; flex-direction:row; flex-wrap:wrap; gap:6px; padding:0; border:0; background:none} .legal-toc b{display:none} .legal-toc a{font-size:14px; border:1px solid var(--rule); border-radius:999px; padding:6px 12px}
.ck-cards{grid-template-columns:1fr} .legal-id{grid-template-columns:1fr} .legal-id dt{border-bottom:0; padding-bottom:2px; background:none} .legal-id dd{padding-top:0} .ck-table [role=row]{grid-template-columns:1fr 1fr} .ck-table [role=row] span:last-child{grid-column:1/-1; font-size:13px} .ck-table .ck-h span:last-child{display:none}}
/* Test de débit */
.debit{padding-block:48px 90px}
.debit-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:32px; align-items:start}
.debit-card{background:#fff; border:1px solid var(--rule); border-radius:26px; padding:24px 20px 14px; box-shadow:0 40px 80px -50px rgba(20,26,51,.45)}
.debit-credit{margin:10px 0 0; text-align:center; font-size:12px; color:var(--soft)}
.debit-credit a{color:var(--soft)}
.debit-side h2{font-size:24px; font-weight:500; margin:6px 0 16px}
.debit-tips{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:14px}
.debit-tips li{display:flex; gap:14px; align-items:flex-start}
.debit-tips .ii{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 10px 20px -10px var(--c2)}
.debit-tips b{display:block; font-weight:500}
.debit-tips small{color:var(--soft); font-size:14px}
.debit-cta{padding:20px; border-radius:20px; background:var(--bg-2); display:flex; flex-direction:column; gap:6px}
.debit-cta b{font-size:18px; font-weight:500}
.debit-cta > span{color:var(--soft); font-size:15px}
.debit-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.debit-acts .btn{padding:11px 18px; font-size:15px}
@media (max-width:900px){.debit-in{grid-template-columns:1fr} .debit-card{padding:16px 8px 12px; border-radius:20px}}
/* Mobile : vérification de couverture */
.cov{margin:34px 0 8px; padding:28px; border-radius:26px; background:#fff; border:1px solid var(--rule); box-shadow:0 40px 80px -60px rgba(20,26,51,.45)}
.cov-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:12px 32px; align-items:end; margin-bottom:18px}
.cov-head h3{font-size:clamp(24px,3vw,32px); font-weight:500; margin:10px 0 0; line-height:1.15}
.cov-head p{margin:0; color:var(--soft)}
.cov-form{display:block!important; background:none!important; padding:0!important; box-shadow:none!important; border-radius:0!important}
.cov-mode{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--bg-2); margin-bottom:12px}
.cov-mode button{font:500 14px var(--f); color:var(--soft); background:none; border:0; border-radius:999px; padding:8px 16px; cursor:pointer}
.cov-mode button.on{background:#fff; color:var(--ink); box-shadow:0 4px 12px -6px rgba(20,26,51,.35)}
.cov-row{display:flex; gap:10px}
.cov-ac{position:relative; flex:1}
.cov-row .btn{flex:none; padding:12px 26px}
.cov-sugg{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); list-style:none; margin:0; padding:4px; background:#fff; border:1px solid var(--rule); border-radius:14px; box-shadow:0 20px 40px -18px rgba(20,26,51,.35)}
.cov-sugg li{padding:9px 12px; border-radius:10px; cursor:pointer; font-size:15px}
.cov-sugg li small{display:block; color:var(--soft); font-size:13px}
.cov-sugg li:hover,.cov-sugg li.on{background:var(--bg-2)}
.cov-res{margin-top:20px}
.cov-where{margin:0 0 12px; font-size:14px; color:var(--soft)}
.cov-where b{color:var(--ink); font-weight:500}
.cov-ops{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cov-op{position:relative; border:1.5px solid var(--rule); border-radius:20px; padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.cov-op.best{border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(100deg,var(--orange),var(--magenta),var(--purple)) border-box}
.cov-op .best-t{position:absolute; top:-11px; right:16px; font-size:12px; font-weight:500; color:#fff; padding:3px 10px; border-radius:999px; background:linear-gradient(100deg,var(--orange),var(--magenta))}
.cov-op header{display:flex; align-items:center; gap:12px; height:40px}
.cov-op header img{max-height:40px; width:auto}
.cov-op header img.or{height:36px; border-radius:5px}
.cov-op header img.bt{height:30px}
.cov-l{display:grid; grid-template-columns:76px auto 1fr; align-items:center; gap:10px; font-size:14px; color:var(--soft)}
.cov-l b{color:var(--ink); font-weight:500}
.cov-l em{font-style:normal; text-align:right; white-space:nowrap}
.cov-bars{display:flex; align-items:flex-end; gap:3px; height:18px}
.cov-bars i{width:6px; border-radius:2px; background:var(--bg-3)}
.cov-bars i:nth-child(1){height:30%} .cov-bars i:nth-child(2){height:45%} .cov-bars i:nth-child(3){height:62%} .cov-bars i:nth-child(4){height:80%} .cov-bars i:nth-child(5){height:100%}
.cov-bars i.on{background:linear-gradient(180deg,var(--magenta),var(--orange))}
.cov-none{font-size:14px; color:var(--soft)}
.cov-note{margin:14px 0 0; font-size:13.5px; color:var(--soft)}
.cov-note a,.cov-link{color:var(--magenta); font-weight:500}
.cov.is-loading #cov-go{opacity:.7; pointer-events:none}
@media (max-width:760px){.cov{padding:20px 16px} .cov-head{grid-template-columns:1fr} .cov-row{flex-direction:column} .cov-row .btn{justify-content:center} .cov-ops{grid-template-columns:1fr}}
/* Téléphonie : licences et estimation, version compacte et claire */
.licences{gap:18px; margin-bottom:32px}
.licence{padding:22px 24px; gap:8px; border-radius:20px}
.devices{height:40px; gap:4px}
.devices svg{width:40px; height:40px}
.devices span{font-size:16px}
.licence h3{font-size:22px}
.licence > p{font-size:15px; line-height:1.55}
.licence ul{display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; padding-left:16px; font-size:14px; line-height:1.45; margin:4px 0}
.licence .for{font-size:13.5px; color:var(--soft); margin:0}
.licence .price{display:flex; align-items:baseline; gap:6px; margin-top:auto; padding-top:10px; border-top:1px solid var(--rule)}
.licence .price b{font-size:30px}
.licence .price span{font-size:13px; color:var(--soft)}
.tel-grid{gap:24px}
.lic div{padding:14px 0; gap:4px 20px}
.lic h3{font-size:18px}
.lic .pr{font-size:18px}
.lic .pr small{font-size:12px}
.lic p{font-size:14.5px}
.calc{background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:22px; padding:22px 24px; gap:12px; box-shadow:0 30px 60px -45px rgba(20,26,51,.4)}
.calc h3{font-size:20px}
.seg{background:var(--bg-2)}
.seg button{color:var(--soft); padding:8px; font-size:14px}
.seg button[aria-pressed="true"]{background:linear-gradient(100deg, var(--orange), var(--magenta)); color:#fff}
.stepper{padding-bottom:10px; border-bottom:1px solid var(--rule)}
.stepper label{color:var(--ink); font-size:14.5px}
.stepper label small{color:var(--soft)}
.stepper button{width:32px; height:32px; border:1px solid var(--rule); background:var(--bg-2); color:var(--ink); font-size:18px}
.stepper button:hover{background:var(--bg-3)}
.stepper output{min-width:36px; font-size:19px}
.total b{font-size:36px; background:linear-gradient(100deg, var(--orange), var(--magenta) 60%, var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
.total span{color:var(--soft); font-size:14px}
.detail{color:var(--soft); font-size:13px}
.degr{background:#E3F7EC; color:#13744A}
.degr b{color:#0E9F6E}
.degr a{color:var(--ink)}
.degr-hint{color:var(--soft)}
@media (max-width:600px){.licence ul{grid-template-columns:1fr} .licence{padding:20px}}
/* Contact : module rendez-vous */
.rdv-app.in-contact{min-width:0; max-width:100%; overflow:hidden}
.rdv-app.in-contact .rv-h{font-size:20px!important; line-height:1.3; margin:0 0 12px; color:var(--ink)}
/* Téléphonie : grille tarifaire simple */
.tp{margin-bottom:40px}
.tp-lics{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tp-lic{position:relative; border:1px solid var(--rule); border-radius:18px; padding:16px 18px; background:#fff; display:flex; flex-direction:column; gap:12px}
.tp-lic.conv{border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--brand) border-box}
.tp-tag{position:absolute; top:-10px; left:18px; font-size:11.5px; font-weight:500; color:#fff; padding:2px 10px; border-radius:999px; background:linear-gradient(100deg,var(--orange),var(--magenta))}
.tp-lic header{display:flex; align-items:center; gap:12px}
.tp-ic{flex:none; height:42px; min-width:42px; padding:0 9px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:3px; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 10px 20px -12px var(--c2)}
.tp-ic svg{width:22px; height:22px}
.tp-lic header div{flex:1; min-width:0}
.tp-lic header b{display:block; font-size:17px; font-weight:500}
.tp-lic header small{color:var(--soft); font-size:13.5px}
.tp-pr{text-align:right; white-space:nowrap}
.tp-pr b{font-size:24px; font-weight:500; letter-spacing:-.02em}
.tp-pr small{display:block; font-size:11.5px; color:var(--soft)}
.tp-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.tp-chips li{font-size:13px; padding:4px 10px; border-radius:999px; background:var(--bg-2); color:var(--ink)}
.tp-inc{display:flex; align-items:center; gap:8px; margin:12px 0 26px; font-size:14px; color:var(--soft)}
.tp-inc svg{color:#0E9F6E; flex:none}
.tp-bot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
.tp-opts{list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:18px; overflow:hidden}
.tp-opts li{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; border-bottom:1px solid var(--rule)}
.tp-opts li:last-child{border-bottom:0}
.tp-opts b{display:block; font-size:15px; font-weight:500}
.tp-opts small{color:var(--soft); font-size:13px}
.tp-opts li > span{font-size:16px; font-weight:500; white-space:nowrap; text-align:right}
.tp-opts li > span small{display:block; font-weight:400; font-size:11.5px}
.calc.tp-calc{padding:16px 18px; gap:10px; border-radius:18px; box-shadow:none}
.tp-calc-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.tp-calc h3{font-size:16px; margin:0}
.tp-calc .seg{padding:3px}
.tp-calc .seg button{padding:5px 12px; font-size:13px}
.tp-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.tp-steps .stepper{flex-direction:column; align-items:stretch; gap:6px; padding:10px; border:1px solid var(--rule); border-radius:12px}
.tp-steps .stepper label{font-size:12.5px; color:var(--soft); text-align:center}
.tp-steps .stepper .ctl{justify-content:space-between}
.tp-steps .stepper button{width:26px; height:26px; font-size:15px}
.tp-steps .stepper output{font-size:17px; min-width:24px}
.tp-calc .total{align-items:baseline}
.tp-calc .total b{font-size:28px}
.tp-calc .detail{font-size:12px}
.tp-calc .degr,.tp-calc .degr-hint{font-size:12px}
@media (max-width:860px){.tp-lics,.tp-bot{grid-template-columns:1fr}}
@media (max-width:420px){.tp-lic header{flex-wrap:wrap} .tp-pr{text-align:left; width:100%; padding-left:54px}}
.tp-lic{gap:14px; padding:18px 20px}
.tp-check{list-style:none; margin:0; padding:14px 0 0; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:8px}
.tp-check li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.4}
.tp-check li i{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; margin-top:-1px; color:#0E9F6E; background:#E3F7EC}
.tp-lic.conv .tp-check li i{color:#fff; background:linear-gradient(135deg,var(--magenta),var(--purple))}
.tp-check li.all{font-weight:500}
.tp-lics{margin-bottom:22px}
.tp-bot{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.tp-opts li{padding:9px 12px; gap:10px}
.tp-opts b{font-size:14px}
.tp-opts small{font-size:12px; line-height:1.35; display:block}
.tp-opts li > span{font-size:14px}
.tp-opts li > span small{font-size:11px}
@media (max-width:860px){.tp-bot{grid-template-columns:1fr}}
@media (max-width:520px){.tp-steps{grid-template-columns:1fr} .tp-steps .stepper{flex-direction:row; align-items:center; justify-content:space-between; padding:8px 12px} .tp-steps .stepper label{text-align:left; font-size:14px; color:var(--ink)} .tp-steps .stepper .ctl{gap:10px}}
/* Mobile : commande en ligne */
.cmd-cta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:22px 0 0; padding:18px 22px; border-radius:20px; background:linear-gradient(100deg, color-mix(in srgb,var(--orange) 9%,#fff), color-mix(in srgb,var(--purple) 10%,#fff)); border:1px solid var(--rule)}
.cmd-cta b{display:block; font-size:18px; font-weight:500}
.cmd-cta span{color:var(--soft); font-size:14.5px}
.cmd-cta[hidden],.cmd[hidden],.cmd [hidden]{display:none!important}
.cmd{margin-top:22px; background:#fff; border:1px solid var(--rule); border-radius:24px; padding:22px 24px; box-shadow:0 40px 80px -55px rgba(20,26,51,.5); scroll-margin-top:90px}
.cmd-top{display:flex; align-items:flex-start; gap:16px}
.cmd-top .rv-steps{flex:1; margin-bottom:18px}
.cmd-x{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); background:#fff; font-size:20px; line-height:1; color:var(--soft); cursor:pointer}
.cmd-x:hover{color:var(--ink); border-color:var(--ink)}
.cmd-body{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start}
.cmd h3{font-size:19px; font-weight:500; margin:0 0 12px}
.cmd-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.cmd-line{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:14px; padding:10px 14px; border:1.5px solid var(--rule); border-radius:14px; transition:border-color .2s, background .2s}
.cmd-line.on{border-color:var(--magenta); background:color-mix(in srgb,var(--magenta) 4%,#fff)}
.cmd-line b{font-size:16px; font-weight:500}
.cmd-line b small{font-size:12px; font-weight:500; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--bg-2); color:var(--soft); vertical-align:2px}
.cmd-line b small.t5{background:linear-gradient(100deg,var(--orange),var(--magenta)); color:#fff}
.cmd-line .pr{display:block; color:var(--soft); font-size:13px}
.cmd-sim{display:inline-flex; padding:3px; border-radius:999px; background:var(--bg-2)}
.cmd-sim button{font:500 12.5px var(--f); border:0; background:none; color:var(--soft); padding:5px 10px; border-radius:999px; cursor:pointer}
.cmd-net button[data-net=orange][aria-pressed="true"]{background:#FF7900; color:#fff}
.cmd-net button[data-net=bouygues][aria-pressed="true"]{background:#009DCC; color:#fff}
.cmd-sim button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 3px 10px -5px rgba(20,26,51,.4)}
.cmd-line:not(.on) .cmd-sim{opacity:.4; pointer-events:none}
.cmd-q{display:flex; align-items:center; gap:6px}
.cmd-q button{width:30px; height:30px; border-radius:50%; border:1px solid var(--rule); background:var(--bg-2); color:var(--ink); font:500 17px var(--f); cursor:pointer}
.cmd-q button:hover{background:var(--bg-3)}
.cmd-q output{min-width:26px; text-align:center; font-size:17px; font-weight:500}
.cmd-opts{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.cmd-opts .rv-ok{margin:0}
.cmd-hint{display:block; font-size:12.5px; color:var(--soft)}
.cmd-form{display:block!important; background:none!important; padding:0!important; box-shadow:none!important; border-radius:0!important}
.cmd-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cmd-grid .full{grid-column:1/-1}
.cmd-grid input.bad{border-color:#C0263A}
.cmd-ac{position:relative}
.cmd-sum{position:sticky; top:96px; border-radius:18px; background:var(--bg-2); padding:16px 18px; font-size:14px}
.cmd-sum h4{margin:0 0 10px; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.cmd-sum ul{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.cmd-sum li{display:flex; justify-content:space-between; gap:10px}
.cmd-sum li b{white-space:nowrap}
.cmd-sum li span{color:var(--soft)}
.cmd-sum .tot{display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px solid var(--rule)}
.cmd-sum .tot b{font-size:26px; font-weight:500; background:linear-gradient(100deg,var(--orange),var(--magenta) 60%,var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cmd-sum .once{display:flex; justify-content:space-between; margin-top:6px; color:var(--soft)}
.cmd-sum p{margin:10px 0 0; font-size:12.5px; color:var(--soft)}
.cmd-sum .empty{color:var(--soft); margin:0 0 6px}
.cmd-done{text-align:center; padding:6px 0}
.cmd-done .ok{width:60px; height:60px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#21C07A,#0E9F6E)}
.cmd-done h3{font-size:24px}
.cmd-done p{color:var(--soft); max-width:50ch; margin:6px auto}
@media (max-width:860px){.cmd-body{grid-template-columns:1fr} .cmd-sum{position:static; order:-1}}
@media (max-width:560px){.cmd{padding:16px} .cmd-line{grid-template-columns:1fr auto; row-gap:8px} .cmd-line .cmd-sim{grid-row:2; justify-self:start} .cmd-line .cmd-net{grid-column:1} .cmd-line .cmd-sim:not(.cmd-net){grid-column:2; justify-self:end} .cmd-line .cmd-q{grid-row:1; grid-column:2} .cmd-grid{grid-template-columns:1fr} .cmd-top .rv-steps li span{display:none} .cmd-top .rv-steps li.on span{display:inline}}
.cmd-q{padding:3px 4px 3px 10px; border-radius:999px; border:1px solid var(--rule); background:#fff}
.cmd-q span{font-size:12.5px; font-weight:500; color:var(--soft); margin-right:2px}
.cmd-q.orange.on{border-color:#FF7900; background:#FFF4EB} .cmd-q.orange.on span{color:#D96500}
.cmd-q.bouygues.on{border-color:#009DCC; background:#EAF7FC} .cmd-q.bouygues.on span{color:#0081A8}
.cmd-q button{width:26px; height:26px; font-size:15px}
.cmd-q output{min-width:20px; font-size:15px}
.cmd-line:not(.on) .cmd-sim{opacity:1; pointer-events:auto}
.cmd-body > *{min-width:0}
@media (max-width:560px){.cmd-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:8px; column-gap:8px; padding:10px} .cmd-line .cmd-sim:not(.cmd-net){grid-column:1/-1; justify-self:start} .cmd-q{padding:3px 3px 3px 8px; min-width:0; gap:2px} .cmd-q span{font-size:12px; flex:1} .cmd-q button{width:24px; height:24px} .cmd-line > div:first-child{grid-column:1/-1} .cmd-line .cmd-sim{grid-row:auto; grid-column:1/-1; justify-self:start} .cmd-line .cmd-q{grid-row:auto; grid-column:auto; justify-self:stretch; justify-content:space-between}}
.rv-cons{display:flex; align-items:center; gap:14px; margin:-4px 0 18px; padding:12px 16px; border-radius:16px; background:linear-gradient(100deg, color-mix(in srgb,var(--orange) 8%,#fff), color-mix(in srgb,var(--purple) 9%,#fff))}
.rv-av{width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:500; font-size:17px; color:#fff; background:linear-gradient(135deg,var(--orange),var(--magenta) 60%,var(--purple)); box-shadow:0 10px 20px -10px var(--magenta)}
.rv-cons small{display:block; font-size:12.5px; color:var(--soft)}
.rv-cons b{display:block; font-size:18px; font-weight:500; line-height:1.2}
.rv-cons span:not(.rv-av){display:block; font-size:13.5px; color:var(--soft)}