/* Accueil, connexion, pages de texte : thème clair (blanc, bleu clair, bleu marine) */
:root{color-scheme:light;
  --bg:#F4F8FD;--surface:#fff;--ink:#0B1F3A;--ink2:#31465F;--gray:#5A6C84;
  --line:#E1E9F4;--line2:#CBD8EA;
  --blue:#087BFF;--blue2:#20A4FF;--brand:#0A6AE8;--brand-d:#0858C4;--link:#0A5FD0;
  --tint:#EAF3FF;--tint2:#D9E9FF;--tint-ink:#0A4FA8;
  --ok:#0F8A5F;--ok-bg:#E6F6EF;--warn:#9A5B07;--warn-bg:#FFF3DF;--bad:#C62828;--bad-bg:#FDECEC;
  --shadow:0 1px 2px rgba(11,31,58,.05),0 8px 24px -12px rgba(11,31,58,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.02em}

/* Navigation */
nav.top{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(255,255,255,.88);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}.brand img{width:36px;height:36px}.brand b{color:var(--brand)}
nav.top .links{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.top .links a{padding:.45rem .85rem;border-radius:8px;color:var(--ink2);font-weight:600;font-size:.95rem}nav.top .links a:hover{color:var(--ink);background:var(--tint)}
nav.top .links a.btn{color:#fff;padding:.55rem 1.1rem;min-height:40px;margin-left:6px}nav.top .links a.btn:hover{background:var(--brand-d)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.7rem 1.3rem;border-radius:10px;font-weight:650;border:1px solid var(--line2);background:var(--surface);color:var(--ink);min-height:44px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--tint);border-color:#9CC3F3}
.btn.main{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(10,106,232,.3),0 8px 20px -10px rgba(10,106,232,.6)}.btn.main:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.big{padding:.95rem 1.7rem;font-size:1.03rem;min-height:50px}
.btn.wide{width:100%}

/* Accueil : en-tête */
main{position:relative}
main:before{content:"";position:absolute;left:0;right:0;top:0;height:720px;z-index:-1;background:radial-gradient(900px 440px at 82% 0%,#D7E8FF,transparent 70%),linear-gradient(180deg,#EDF4FF,var(--bg))}
.hero{padding:64px 0 36px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.pill{display:inline-block;padding:.28rem .8rem;border-radius:99px;border:1px solid #BFD9FF;background:#fff;color:var(--tint-ink);font-size:.85rem;font-weight:650}
h1{font-size:clamp(2.2rem,4.8vw,3.5rem);line-height:1.06;margin:18px 0;letter-spacing:-.03em}h1 em{font-style:normal;color:var(--brand)}
.lead{color:var(--ink2);font-size:1.12rem;max-width:34em}.ctas{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 16px}
.checks{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--gray);font-size:.92rem}.checks span:before{content:"✓ ";color:var(--brand);font-weight:800}
.devices{position:relative;padding:0 0 46px;overflow:visible}
.laptop{position:relative;width:90%;border-radius:12px;border:1px solid var(--line2);background:#fff;overflow:hidden;box-shadow:0 30px 70px -28px rgba(11,31,58,.45),0 2px 6px rgba(11,31,58,.06)}.laptop img{display:block;width:100%;height:auto}
.phone{position:absolute;right:0;bottom:0;width:23%;border-radius:22px;border:5px solid var(--ink);background:#000;box-shadow:0 24px 50px -16px rgba(11,31,58,.55);overflow:hidden}.phone img{display:block;width:100%;height:auto}
.demo{display:block;margin-top:34px;color:var(--gray);font-size:.8rem;text-align:left}

/* Sections */
section{padding:68px 0}#univers,#offres{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(1.6rem,3vw,2.15rem);margin:0 0 10px;text-align:center}h2.left{text-align:left}.sub{color:var(--gray);text-align:center;margin:0 auto 34px;max-width:40em}.sub.gap{margin-top:22px}
.muted{color:var(--gray);margin:0}.lnk{color:var(--link)}
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px;box-shadow:var(--shadow)}
.ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--tint);color:var(--brand)}
.ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.world{display:flex;gap:16px;align-items:center}.world .ic{flex:none;width:52px;height:52px}.world .ic svg{width:25px;height:25px}
.world h3{margin:0}.world p{margin:4px 0 0;color:var(--gray);font-size:.94rem}
.world .go{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:99px;border:1px solid var(--line2);color:var(--brand);flex:none}
a.card:hover{border-color:#9CC3F3}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{padding:22px}.tile .ic{margin-bottom:14px}.tile h3{margin:0 0 6px;font-size:1.05rem}.tile p{margin:0;color:var(--gray);font-size:.93rem}
.soon{display:inline-block;margin-left:6px;font-size:.7rem;padding:.1rem .5rem;border-radius:99px;border:1px solid #EFD3A0;background:var(--warn-bg);color:var(--warn);vertical-align:middle;font-weight:650}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.plans.five{grid-template-columns:repeat(5,1fr)}.plan{padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.plan.hot{border:2px solid var(--brand);box-shadow:0 18px 40px -22px rgba(10,106,232,.55)}
.plan h3{margin:0;font-size:1.05rem}.price{font-size:1.75rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}.price small{font-size:.8rem;color:var(--gray);font-weight:500;letter-spacing:0}
.pdesc{margin:0;color:var(--gray);font-size:.9rem}
.plan ul{list-style:none;margin:10px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--ink2);font-size:.92rem}.plan li:before{content:"✓ ";color:var(--brand);font-weight:800}
.notice{border:1px solid #EFD3A0;background:var(--warn-bg);color:#7A4A05;border-radius:10px;padding:12px 16px;margin:0 auto 26px;max-width:760px;text-align:center;font-size:.93rem}
.assist{display:grid;grid-template-columns:auto 1fr 1fr;gap:24px;align-items:center;padding:28px}.assist .spark{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--tint);color:var(--brand)}.assist .spark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assist ul{list-style:none;margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:grid;gap:8px;font-size:.93rem}.assist li:before{content:"✓ ";color:var(--brand);font-weight:800}
footer{padding:34px 0 50px;color:var(--gray);font-size:.88rem;text-align:center;border-top:1px solid var(--line);background:var(--surface)}

@media(max-width:1100px){.plans.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){.hero{grid-template-columns:1fr}.plans,.plans.five{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:1fr 1fr}.assist{grid-template-columns:1fr}.devices{margin-bottom:30px}}
@media(max-width:620px){.two,.plans,.plans.five,.tiles{grid-template-columns:1fr}nav.top .links a:not(.btn){display:none}.phone{width:27%}.laptop{width:92%}section{padding:50px 0}}

/* ===== Mouvement (CSS seul ; aucune animation si l'appareil demande « réduire les animations ») ===== */
.intro{display:none}
@media(prefers-reduced-motion:no-preference){
/* Arrivée : le logo apparaît, puis le rideau s'ouvre en deux (≈ 2 s) */
.intro{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:introGone 0s linear 2s forwards}
@keyframes introGone{to{visibility:hidden}}
.intro .half{position:absolute;left:0;right:0;height:50.5%;background:#fff}
.intro .half.t{top:0;border-bottom:1px solid #BFD9FF;animation:curtainUp .75s cubic-bezier(.77,0,.18,1) 1.15s forwards}
.intro .half.b{bottom:0;border-top:1px solid #BFD9FF;animation:curtainDown .75s cubic-bezier(.77,0,.18,1) 1.15s forwards}
@keyframes curtainUp{to{transform:translateY(-101%)}}
@keyframes curtainDown{to{transform:translateY(101%)}}
.intro .mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:markOut .4s ease-in .95s forwards}
@keyframes markOut{to{opacity:0;transform:scale(.94)}}
.intro .mark img{width:80px;height:80px;filter:drop-shadow(0 12px 22px rgba(11,31,58,.25));animation:logoIn .8s cubic-bezier(.2,1.2,.3,1) both}
@keyframes logoIn{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:none}}
.intro .mark span{font-weight:800;font-size:1.7rem;color:var(--ink);animation:wordIn .7s ease-out .3s both}
.intro .mark b{color:var(--brand)}
@keyframes wordIn{from{opacity:0;letter-spacing:.3em}to{opacity:1;letter-spacing:-.01em}}
.intro .bar{width:150px;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:barIn .7s ease-out .3s both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Le haut de page se met en place juste après */
.intro+nav.top{animation:navIn .7s cubic-bezier(.2,.8,.2,1) 1.2s both}
@keyframes navIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.hero>div:first-child>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero>div:first-child>:nth-child(1){animation-delay:1.3s}.hero>div:first-child>:nth-child(2){animation-delay:1.42s}.hero>div:first-child>:nth-child(3){animation-delay:1.56s}.hero>div:first-child>:nth-child(4){animation-delay:1.7s}.hero>div:first-child>:nth-child(5){animation-delay:1.84s}
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* Les captures arrivent, puis flottent doucement */
.laptop{animation:lapIn 1.1s cubic-bezier(.2,.8,.2,1) 1.45s both,fl 7s ease-in-out 2.7s infinite}
.phone{animation:phoneIn 1s cubic-bezier(.2,.9,.3,1.1) 1.9s both,fl 7s ease-in-out 3.1s infinite}
@keyframes lapIn{from{opacity:0;transform:perspective(1200px) translateY(60px) rotateX(14deg) scale(.94)}to{opacity:1;transform:perspective(1200px) none}}
@keyframes phoneIn{from{opacity:0;transform:translate(90px,50px) rotate(7deg)}to{opacity:1;transform:none}}
@keyframes fl{50%{transform:translateY(-6px)}}

/* Bouton principal : un éclat de lumière de temps en temps */
.btn.main.big{position:relative;overflow:hidden}
.btn.main.big:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-130%);animation:shine 5s ease-in-out 3.2s infinite}
@keyframes shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* Survols et apparition au défilement */
.card{transition:translate .25s ease,box-shadow .25s ease,border-color .25s ease}
.tile:hover,.plan:hover,.world:hover{translate:0 -4px;box-shadow:0 18px 36px -20px rgba(11,31,58,.3)}
.world .go{transition:translate .25s ease,background .25s ease}.world:hover .go{translate:5px 0;background:var(--tint)}
.tile:hover .ic{animation:wiggle .5s ease}
@keyframes wiggle{25%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(6deg) scale(1.08)}}
.assist .spark{animation:fl 6s ease-in-out infinite}
.btn:active{transform:scale(.97)}
@supports (animation-timeline:view()){
  section h2,section .sub,section .notice,.card{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}
}

.plan li.next{color:var(--gray);font-style:italic}
.plan .pick{margin-top:auto;justify-content:center;text-align:center}.plan ul{margin-bottom:12px}
.intro{overflow:hidden;max-width:100vw}
html{overflow-x:hidden;max-width:100%}body{max-width:100vw}
@media(max-width:520px){.brand span{white-space:nowrap}}

/* Installer sur le téléphone */
.mob-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 auto}
.mob{padding:22px}.mob h3{margin:0 0 10px;font-size:1.1rem}.mob ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--gray)}
@media(max-width:640px){.mob-grid{grid-template-columns:1fr}}