/* UvaConnect — page d'accueil. Hérite des variables de wiflow.css ; aucune ressource externe. */
.lp{--hero:#111A47;--hero-2:#1B2A6B;--wrap:1120px;overflow-x:hidden}
.lp .wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.lp a.skip{position:absolute;left:12px;top:-60px;background:var(--saffron);color:var(--on-saffron);padding:10px 14px;border-radius:10px;font-weight:700;z-index:50}
.lp a.skip:focus{top:12px}

/* ---------- En-tête ---------- */
.lp-head{position:absolute;inset:0 0 auto 0;z-index:10}
.lp-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.lp-head .brandmark{color:#fff}
.lp-nav{display:flex;align-items:center;gap:6px}
.lp-nav a{color:#D5DBFF;text-decoration:none;font-weight:600;padding:10px 12px;border-radius:10px}
.lp-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.lp-nav a.btn{color:var(--on-saffron);background:var(--saffron);margin-left:6px}
.lp-nav a.btn:hover{background:var(--saffron);filter:brightness(1.06)}
@media (max-width:760px){.lp-nav a.hide-sm{display:none}}
@media (max-width:480px){.lp-nav a{padding:8px}.lp-nav a.btn{padding:8px 12px}.hide-xs{display:none}}

/* ---------- Héros ---------- */
.lp-hero{position:relative;background:radial-gradient(120% 90% at 85% 30%,var(--hero-2) 0%,var(--hero) 62%);color:#fff;padding:128px 0 88px;isolation:isolate;overflow:hidden}
.lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:radial-gradient(circle at 14px 0,#0000 13px,var(--paper) 14.5px) 0 0/28px 14px repeat-x}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.lp-hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem);line-height:1.04;letter-spacing:-.025em;font-weight:850;max-width:18ch;text-wrap:balance}
.lp-hero p.lead{margin-top:20px;font-size:clamp(1.05rem,1.8vw,1.22rem);color:#D5DBFF;max-width:46ch;line-height:1.55}
.lp-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lp-hero .note{margin-top:16px;color:#AEB9F2;font-size:.95rem}
.lp-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.lp-hero .btn.ghost:hover{background:rgba(255,255,255,.1)}
.lp-hero .bgarcs{position:absolute;right:-8%;bottom:-36%;width:min(90vw,940px);aspect-ratio:1;color:#8FA0FF;opacity:.2;z-index:-1;pointer-events:none}
.lp-hero .bgarcs path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:5}
.lp-hero .bgarcs circle{fill:currentColor}
@media (max-width:900px){
  .lp-hero{padding:108px 0 72px}
  .lp-hero .wrap{grid-template-columns:1fr;gap:40px}
}

/* Le ticket du héros : seul élément animé de la page, une fois, au chargement */
.lp-stage{position:relative;display:flex;justify-content:center;padding-top:22px}
.lp-slot{position:absolute;top:0;left:50%;width:min(100%,430px);height:14px;transform:translateX(-50%);border-radius:8px;background:#060A24;box-shadow:inset 0 -3px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.35)}
.lp-ticket{--bg:var(--hero);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 108px;width:min(100%,430px);background:#FFFDF6;color:#131B3A;border-radius:18px;filter:drop-shadow(0 22px 28px rgba(3,6,28,.45));transform:rotate(-2.5deg);margin-top:6px}
.lp-ticket .main{padding:22px 22px 20px 24px}
.lp-ticket .logo{display:flex;align-items:center;gap:8px;font-weight:800;color:#1B2A6B}
.lp-ticket .logo svg{width:26px;height:26px}
.lp-ticket .plan{margin-top:16px;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.lp-ticket .spec{margin-top:4px;color:#5A6485;font-size:.95rem}
.lp-ticket .code{margin-top:18px;display:inline-block;font:700 clamp(1.5rem,5.4vw,2rem)/1 var(--mono);letter-spacing:.12em;padding:12px 14px;border-radius:10px;background:#EEF1FB;border:2px dashed #AAB4E0}
.lp-ticket .small{margin-top:12px;font-size:.85rem;color:#5A6485}
.lp-ticket .stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#F5B301;border-radius:0 18px 18px 0;color:#1A1400;padding:16px 8px;text-align:center;font-weight:800;font-size:.85rem}
.lp-ticket .stub svg{width:58px;height:58px}
.lp-ticket .stub svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:12}
.lp-ticket .stub svg circle{fill:currentColor}
.lp-ticket::before,.lp-ticket::after{content:"";position:absolute;right:99px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.lp-ticket::before{top:-11px}
.lp-ticket::after{bottom:-11px}
.lp-ticket .stub::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;border-left:3px dotted rgba(26,20,0,.45)}

@media (prefers-reduced-motion:no-preference){
  .lp-hero .bgarcs path{stroke-dasharray:1;stroke-dashoffset:1;animation:lp-draw 1.1s cubic-bezier(.3,.7,.2,1) forwards}
  .lp-hero .bgarcs path:nth-of-type(1){animation-delay:.15s}
  .lp-hero .bgarcs path:nth-of-type(2){animation-delay:.45s}
  .lp-hero .bgarcs path:nth-of-type(3){animation-delay:.75s}
  .lp-hero .bgarcs circle{opacity:0;animation:lp-fade .4s .1s forwards}
  .lp-ticket{animation:lp-print 1s cubic-bezier(.2,.8,.2,1) 1.1s both}
  .lp-slot{animation:lp-fade .4s .9s both}
}
@keyframes lp-draw{to{stroke-dashoffset:0}}
@keyframes lp-fade{from{opacity:0}to{opacity:1}}
@keyframes lp-print{from{transform:translateY(-70%) rotate(-2.5deg);opacity:0;clip-path:inset(60% 0 0 0)}to{transform:rotate(-2.5deg);opacity:1;clip-path:inset(0 0 0 0)}}

@media (max-width:480px){
  .lp-ticket{grid-template-columns:minmax(0,1fr) 84px}
  .lp-ticket::before,.lp-ticket::after{right:75px}
  .lp-ticket .main{padding:18px 14px 16px 18px}
  .lp-ticket .stub svg{width:44px;height:44px}
}

/* ---------- Sections ---------- */
.lp section.block{padding:84px 0}
.lp .sec-head{max-width:640px}
.lp .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:850;letter-spacing:-.02em;line-height:1.08}
.lp .sec-head p{margin-top:14px;color:var(--muted);font-size:1.08rem;max-width:56ch}

/* Rangées de fonctionnalités : texte d'un côté, preuve de l'autre */
.lp-rows{margin-top:52px;display:grid;gap:72px}
.lp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lp-row:nth-child(even) .copy{order:2}
.lp-row h3{font-size:1.5rem;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.lp-row .copy p{margin-top:12px;color:var(--muted);font-size:1.04rem;max-width:46ch}
.lp-row .copy ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.lp-row .copy li{display:flex;gap:10px;align-items:baseline}
.lp-row .copy li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--saffron);transform:translateY(-1px)}
.lp-vis{background:var(--indigo-l);border-radius:24px;padding:28px;display:flex;justify-content:center;align-items:center;min-height:300px}
.lp-vis.warm{background:color-mix(in srgb,var(--saffron) 20%,var(--surface))}
@media (max-width:900px){
  .lp section.block{padding:64px 0}
  .lp-rows{gap:52px}
  .lp-row{grid-template-columns:1fr;gap:24px}
  .lp-row:nth-child(even) .copy{order:0}
  .lp-vis{padding:20px;min-height:0}
}

/* Visuel : portail sur téléphone */
.ph{width:216px;flex:none;border:6px solid #131B3A;border-radius:28px;background:#EEF1F9;overflow:hidden;box-shadow:var(--shadow);color:#131B3A;font-size:.8rem}
.ph .top{background:linear-gradient(135deg,#1B2A6B,#2438D9);color:#fff;padding:18px 14px 20px}
.ph .top b{display:block;font-size:.98rem}
.ph .top span{opacity:.8;font-size:.76rem}
.ph .plans{padding:10px;display:grid;gap:7px}
.ph .p{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:9px 10px;font-weight:700}
.ph .p small{display:block;font-weight:500;color:#5A6485;font-size:.7rem}
.ph .p i{font-style:normal;background:#F5B301;border-radius:8px;padding:5px 9px;font-size:.72rem;color:#1A1400}
.ph .help{margin:2px 10px 12px;padding:8px;border:2px solid #AAB4E0;border-radius:10px;text-align:center;font-weight:700;color:#1B2A6B}
.swatch-row{display:flex;gap:10px;flex-wrap:wrap;margin-left:24px;max-width:160px}
.swatch-row span{display:block;width:44px;height:44px;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 2px 6px rgba(19,27,58,.2);position:relative}
.swatch-row span::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:6px;border-radius:3px;background:var(--a)}
@media (max-width:480px){.swatch-row{margin-left:12px;max-width:120px}.swatch-row span{width:34px;height:34px}.swatch-row span::after{left:6px;right:6px;bottom:6px;height:5px}}

/* Visuel : modèles de ticket */
.tk4{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;width:100%;max-width:440px}
.tk4 figure{margin:0;display:grid;gap:8px;justify-items:center;align-content:end}
.tk4 figcaption{font-weight:700;font-size:.9rem}
.mini{background:#FFFDF6;border-radius:8px;box-shadow:var(--shadow);position:relative;color:#131B3A}
.mini b{font:700 .82rem/1 var(--mono);letter-spacing:.08em}
.mini.carte{width:150px;height:88px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;border-left:6px solid #1B2A6B}
.mini.carte small{font-size:.66rem;color:#5A6485}
.mini.bande{width:62px;height:120px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;background:#fff;border-top:5px solid #F5B301;border-radius:3px 3px 0 0;-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 7px repeat-x;mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 7px repeat-x}
.mini.bande b{font-size:.6rem;letter-spacing:.04em;word-break:break-all}
.mini.bande small{font-size:.58rem;color:#5A6485}
.mini.planche{width:140px;height:96px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:4px;background:#fff}
.mini.planche i{border:1.5px dashed #AAB4E0;border-radius:3px;background:#F3F5FC}
.mini.num{width:76px;height:128px;border:5px solid #131B3A;border-radius:16px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#EEF1F9}
.mini.num .q{width:46px;height:46px;border-radius:6px;background:
  linear-gradient(90deg,#131B3A 50%,#0000 0) 0 0/10px 10px,linear-gradient(#131B3A 50%,#0000 0) 0 0/10px 10px;opacity:.85;outline:5px solid #fff;outline-offset:-1px}
.mini.num small{font-size:.58rem;font-weight:700}

/* Visuel : SMS + chat */
.chat{width:100%;max-width:380px;display:grid;gap:10px}
.chat .m{max-width:84%;padding:10px 13px;border-radius:16px;font-size:.95rem;line-height:1.4;box-shadow:0 1px 2px rgba(19,27,58,.12)}
.chat .in{justify-self:start;background:#fff;color:#131B3A;border-bottom-left-radius:4px}
.chat .out{justify-self:end;background:#1B2A6B;color:#fff;border-bottom-right-radius:4px}
.chat .who{font-size:.74rem;color:var(--muted);margin:2px 4px 0}
.chat .who.r{justify-self:end}
.chat code{font:700 .95rem var(--mono);letter-spacing:.08em;background:rgba(245,179,1,.28);padding:1px 6px;border-radius:5px;color:inherit}
.chat .out code{background:rgba(245,179,1,.3)}
.flow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.flow span{font-size:.78rem;font-weight:700;background:#fff;color:#1B2A6B;border-radius:999px;padding:4px 10px}
.flow i{font-style:normal;color:#5A6485}

/* Visuel : script */
.code-win{width:100%;max-width:520px;background:#0D1338;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.code-win .bar{display:flex;gap:6px;padding:10px 12px;background:#161E52}
.code-win .bar i{width:10px;height:10px;border-radius:50%;background:#3A4690}
.code-win pre{margin:0;padding:16px;overflow-x:auto;font:.82rem/1.65 var(--mono);color:#D5DBFF;white-space:pre}
.code-win .c{color:#7C89C9}
.code-win .k{color:#F5B301}
.code-win .s{color:#8FE3C2}

/* Visuel : abonnés PPPoE */
.tbl{width:100%;max-width:460px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.tbl .r{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);font-size:.92rem}
.tbl .r:first-child{border-top:0}
.tbl .r small{display:block;color:var(--muted);font-size:.78rem}
.tbl .tag{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.tbl .ok{background:var(--ok-bg);color:var(--ok)}
.tbl .soon{background:var(--warn-bg);color:var(--warn)}
.tbl .off{background:var(--bad-bg);color:var(--bad)}
@media (max-width:480px){.tbl .r{grid-template-columns:1fr auto}.tbl .r .mid{display:none}}

/* ---------- Étapes (vraie séquence : numérotées) ---------- */
.lp-steps{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s;position:relative}
.lp-steps li{position:relative;padding-top:68px}
.lp-steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:850;font-size:1.2rem;z-index:1}
.lp-steps li::after{content:"";position:absolute;top:23px;left:58px;right:-18px;border-top:3px dotted var(--line-2)}
.lp-steps li:last-child::after{display:none}
.lp-steps h3{font-size:1.15rem}
.lp-steps p{margin-top:8px;color:var(--muted);font-size:.98rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-steps li::before{color:#0B1030}}
@media (max-width:900px){
  .lp-steps{grid-template-columns:1fr;gap:0}
  .lp-steps li{padding:0 0 32px 68px;min-height:64px}
  .lp-steps li::after{top:54px;bottom:6px;left:23px;right:auto;border-top:0;border-left:3px dotted var(--line-2)}
}

/* ---------- Sous le capot ---------- */
.lp-deep{background:var(--hero);color:#fff;position:relative;isolation:isolate}
.lp-deep .sec-head p{color:#B9C3F5}
.lp-deep dl{margin:44px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.lp-deep dl>div{padding:0 28px;border-left:2px solid rgba(255,255,255,.16)}
.lp-deep dl>div:first-child{padding-left:0;border-left:0}
.lp-deep dt{font-weight:800;font-size:1.15rem;color:var(--saffron)}
.lp-deep dd{margin:10px 0 0;color:#D5DBFF;max-width:36ch}
@media (max-width:900px){
  .lp-deep dl{grid-template-columns:1fr;gap:26px}
  .lp-deep dl>div{padding:0 0 0 18px;border-left:3px solid var(--saffron)}
  .lp-deep dl>div:first-child{padding-left:18px;border-left:3px solid var(--saffron)}
}

/* ---------- Appel final ---------- */
.lp-cta{background:var(--saffron);color:var(--on-saffron)}
.lp-cta .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:64px 0}
.lp-cta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:850;max-width:22ch;line-height:1.1}
.lp-cta p{margin-top:10px;max-width:46ch}
.lp-cta .row{gap:12px}
.lp-cta .btn{background:#131B3A;color:#fff}
.lp-cta .btn.ghost{background:transparent;color:var(--on-saffron);border-color:rgba(26,20,0,.5)}
.lp-cta .btn.ghost:hover{background:rgba(26,20,0,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-cta .btn{color:#fff}}

/* ---------- Pied de page ---------- */
.lp-foot{padding:36px 0 44px}
.lp-foot .wrap{display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.lp-foot .brandmark{color:var(--indigo)}
.lp-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.lp-foot a{color:var(--muted);font-weight:600;text-decoration:none}
.lp-foot a:hover{color:var(--ink);text-decoration:underline}
.lp-foot small{display:block;width:100%;color:var(--muted)}
.lp-foot .lp-legal{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.lp-foot .lp-legal small{width:auto}
.lp-foot .lp-legal a{font-size:.9rem}

/* Illustrations */
.lp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center}
.lp-art{display:block;width:100%;max-width:520px;height:auto;aspect-ratio:4/3;justify-self:end}
.cta-art{display:block;width:min(300px,100%);height:auto;aspect-ratio:4/3;flex:none}
@media (max-width:860px){.lp-split{grid-template-columns:1fr;gap:26px}.lp-art{justify-self:start;max-width:440px}.cta-art{display:none}}