:root{--ink:#06202F;--ink2:#0B3249;--or:#FF6A13;--or2:#FF8A3D;--cy:#22C7F2;--bg:#F2F7FA;--mut:#4A6272;--ln:#BFD6E3;--r:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.55 'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);padding-bottom:76px}
a{color:inherit;text-decoration:none}img{max-width:100%}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;margin:0;line-height:1.02;letter-spacing:-.03em}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px}
.w{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;font-weight:700;font-size:18px;background:var(--or);color:#fff;box-shadow:0 8px 0 #B94700;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(3px);box-shadow:0 5px 0 #B94700}
.btn.ghost{background:transparent;color:#fff;box-shadow:none;border:2px solid rgba(255,255,255,.55)}
.btn.dark{background:var(--ink);box-shadow:0 8px 0 #000}
.btn svg{width:22px;height:22px;flex:none}
.bar{background:var(--or);color:#fff;font-weight:700;font-size:14px;text-align:center;padding:8px 12px}
header.top{background:#fff;border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20}
.hd{display:flex;align-items:center;gap:18px;padding:8px 20px;max-width:1180px;margin:0 auto}
.hd img.logo{height:58px;width:auto}
.hd .tel{margin-left:auto;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;white-space:nowrap}
.hero{background:radial-gradient(circle at 90% 0,rgba(255,106,19,.35),transparent 45%),radial-gradient(circle at 0 100%,rgba(34,199,242,.28),transparent 50%),var(--ink);color:#fff;padding:72px 0 88px;position:relative;overflow:hidden}
.hero .g{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(44px,7vw,92px);text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--or2)}
.hero p.lead{font-size:20px;color:#C6D8E4;max-width:540px;margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:16px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;color:#C6D8E4;font-size:15px;font-weight:500}
.proof b{color:#fff}
.deal{background:#fff;color:var(--ink);border-radius:28px;padding:30px;text-align:center;transform:rotate(2deg);box-shadow:14px 14px 0 var(--or)}
.deal small{display:block;font-weight:700;color:var(--mut)}
.deal .old{font-size:22px;text-decoration:line-through;color:var(--mut);font-weight:700;margin-top:6px}
.deal .new{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(64px,9vw,104px);line-height:1;letter-spacing:-.05em;color:var(--or)}
.deal .new span{font-size:.4em;letter-spacing:0}
.deal .row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.deal .row img{height:64px}
.sec{padding:84px 0}.sec h2{font-size:clamp(34px,5vw,58px);margin-bottom:12px}
.sec .sub{color:var(--mut);font-size:19px;max-width:640px;margin:0 0 40px}
.dark{background:var(--ink);color:#fff}.dark .sub{color:#C6D8E4}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:26px;box-shadow:6px 6px 0 var(--ink)}
.card svg{width:40px;height:40px;stroke:var(--or);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:24px;margin:14px 0 8px}.card p{margin:0;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:s}
.step{border-top:6px solid var(--or);padding-top:18px;counter-increment:s}
.step:before{content:counter(s);font:800 72px/1 'Bricolage Grotesque';color:var(--or2)}
.step h3{font-size:26px;margin:6px 0}.step p{margin:0;color:#C6D8E4}
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pc{background:#fff;color:var(--ink);border-radius:var(--r);padding:28px}
.pc.hot{background:var(--or);color:#fff;transform:scale(1.04)}
.pc h3{font-size:22px}.pc .a{font-weight:700;margin-top:10px;opacity:.8}
.pc .b{font:800 64px/1 'Bricolage Grotesque';letter-spacing:-.04em;margin-top:4px}
.pc .b span{font-size:20px;letter-spacing:0}
.note{margin-top:28px;color:#C6D8E4;max-width:760px}
.band{background:var(--cy);color:var(--ink);padding:56px 0}
.band .w{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(30px,4.5vw,50px)}
.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{background:#fff;border:2px solid var(--ln);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
details{background:#fff;border:3px solid var(--ink);border-radius:16px;margin-bottom:12px;padding:0 22px}
summary{cursor:pointer;font-weight:700;font-size:19px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary:after{content:"+";font-size:26px;line-height:1;color:var(--or)}details[open] summary:after{content:"–"}
details p{margin:0 0 18px;color:var(--mut)}
.final{background:var(--or);color:#fff;text-align:center;padding:80px 0}
.final h2{font-size:clamp(38px,6.5vw,84px);text-transform:uppercase}
.final .cta{justify-content:center;margin-top:30px}.final .btn{background:var(--ink);box-shadow:0 8px 0 #000}
.final .btn.ghost{background:#fff;color:var(--ink);border:0;box-shadow:0 8px 0 #B94700}
footer{background:var(--ink);color:#C6D8E4;padding:44px 0 24px;font-size:15px}
footer .f{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:center}
footer .f img{height:70px;margin-right:10px;background:none;padding:0}
footer a{color:var(--or2);font-weight:700}
footer .c{text-align:center;margin-top:28px;border-top:1px solid #25506B;padding-top:18px;font-size:13px}
.stick{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:10px;background:var(--ink);border-top:3px solid var(--or)}
.stick a{flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-weight:700;background:var(--or);color:#fff}
.stick a+a{background:#fff;color:var(--ink)}
@media(min-width:900px){body{padding-bottom:0}.stick{display:none}}
@media(max-width:899px){.hero .g,.split{grid-template-columns:1fr}.hd .tel{margin-left:auto;margin-left:auto;padding:10px 14px;font-size:14px}.hd img.logo{height:46px}.hero{padding:44px 0 60px}.deal{transform:none;box-shadow:8px 8px 0 var(--or)}.pc.hot{transform:none}.sec{padding:56px 0}}
@media(max-width:520px){.btn{width:100%}.cta{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.nb{background:transparent;padding:6px 20px 16px;border-bottom:0}
.nbi{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nb a{flex:0 1 auto;text-align:center;padding:12px 26px;border-radius:999px;font-weight:700;font-size:16px;color:#16222C;border:2px solid #7C8B98;background:linear-gradient(180deg,#FFFFFF 0%,#DCE5EC 100%);transition:background .15s,color .15s,border-color .15s}
.nb a:hover{background:#22C7F2;border-color:#0B3249;color:#06202F}
.nb a[aria-current=page]{color:#fff;border-color:#B94700;background:linear-gradient(180deg,#FF9A4D 0%,#FF6A13 100%)}
@media(max-width:899px){header.top{position:static}.nb{padding:12px}.nbi{gap:8px}.nb a{flex:1 1 calc(33.33% - 8px);padding:11px 4px;font-size:15px}}

.ph{background:radial-gradient(circle at 92% 0,rgba(255,106,19,.35),transparent 45%),radial-gradient(circle at 0 100%,rgba(34,199,242,.25),transparent 50%),var(--ink);color:#fff;padding:64px 0 72px}
.ph h1{font-size:clamp(38px,6vw,72px);text-transform:uppercase;max-width:900px}
.ph p{font-size:20px;color:#C6D8E4;max-width:640px;margin:18px 0 0}
.feat{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:28px;box-shadow:6px 6px 0 var(--ink);margin-top:18px}
.feat>div{flex:1 1 380px}.feat h3{font-size:26px;margin-bottom:8px}.feat p{margin:0 0 14px;color:var(--mut)}
.tbl{overflow-x:auto;background:#fff;border:3px solid var(--ink);border-radius:var(--r)}
.tbl table{width:100%;min-width:480px;border-collapse:collapse;text-align:left}
.tbl th,.tbl td{padding:16px 24px}.tbl th{background:var(--ink);color:#fff}.tbl th:last-child{background:var(--or)}
.tbl td{border-top:1px solid var(--ln)}.tbl td:last-child{background:#FFF1E6;font:800 24px 'Bricolage Grotesque';color:var(--or)}
.box{background:var(--cy);border:3px solid var(--ink);border-radius:var(--r);padding:30px;box-shadow:6px 6px 0 var(--ink)}
.box h2{font-size:clamp(26px,3.5vw,38px);margin-bottom:10px}.box p{margin:0 0 8px}
.box ul{margin:10px 0 0;padding-left:20px}
.tel2{font:800 clamp(34px,5vw,52px)/1.1 'Bricolage Grotesque';letter-spacing:-.03em;margin:8px 0 18px}
.card small{font-weight:700;color:var(--mut)}
.hd .tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.hd .t1{margin:0;font:800 clamp(18px,2.1vw,26px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.hd .t2{margin:0;display:inline-block;align-self:flex-start;background:var(--or);color:#fff;font-weight:700;font-size:clamp(14px,1.4vw,17px);padding:3px 12px;border-radius:999px}
@media(max-width:899px){.hd{flex-wrap:wrap;gap:8px 12px}.hd .tt{flex:1 1 200px}.hd .t1{font-size:17px}.hd .t2{font-size:13px;line-height:1.3}.hd .tel{width:100%;text-align:center;margin-left:0}}
.hd .tels{display:flex;gap:8px;margin-left:auto}
.hd .tel{margin-left:0;display:inline-flex;align-items:center;gap:8px}
.hd .tel svg{width:20px;height:20px;flex:none}
.hd .tel.mob{background:var(--or)}
@media(max-width:899px){.hd .tels{width:100%;margin-left:0}.hd .tel{width:auto;flex:1;justify-content:center;padding:10px 8px;font-size:14px}}
.tags a{background:#fff;border:2px solid var(--ln);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px;transition:background .15s,border-color .15s}
.tags a:hover{background:var(--cy);border-color:var(--ink)}
.tags a[aria-current=page]{background:var(--or);color:#fff;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:899px){.two{grid-template-columns:1fr}}
header.top,footer{color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22200%22 viewBox=%220 0 320 200%22%3E%3Cg fill=%22none%22 stroke=%22%239BE4FF%22 stroke-opacity=%220.5%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 40H70L100 70H190L220 100H320%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M0 40H70L100 70H190L220 100H320%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M0 40H70L100 70H190L220 100H320%22 transform=%22translate(14 14)%22/%3E%3Cpath d=%22M60 0V50L90 80V130L60 160V200%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M60 0V50L90 80V130L60 160V200%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M60 0V50L90 80V130L60 160V200%22 transform=%22translate(14 14)%22/%3E%3Cpath d=%22M320 20H250L220 -10%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M320 20H250L220 -10%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M320 20H250L220 -10%22 transform=%22translate(14 14)%22/%3E%3Cpath d=%22M130 200V170L160 140H260L290 170V200%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M130 200V170L160 140H260L290 170V200%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M130 200V170L160 140H260L290 170V200%22 transform=%22translate(14 14)%22/%3E%3C/g%3E%3Ccircle cx=%2270%22 cy=%2240%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%2270%22 cy=%2240%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22190%22 cy=%2270%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22190%22 cy=%2270%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%2290%22 cy=%2280%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%2290%22 cy=%2280%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22160%22 cy=%22140%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22160%22 cy=%22140%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22250%22 cy=%2220%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22250%22 cy=%2220%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%2260%22 cy=%22160%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%2260%22 cy=%22160%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%22260%22 viewBox=%220 0 520 260%22%3E%3Cg fill=%22none%22 stroke=%22%239BE4FF%22 stroke-opacity=%220.38%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 180H120L160 140H300L340 100H520%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M0 180H120L160 140H300L340 100H520%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M0 180H120L160 140H300L340 100H520%22 transform=%22translate(14 14)%22/%3E%3Cpath d=%22M200 0V60L240 100V180L200 220V260%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M200 0V60L240 100V180L200 220V260%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M200 0V60L240 100V180L200 220V260%22 transform=%22translate(14 14)%22/%3E%3Cpath d=%22M400 260V210L430 180H520%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M400 260V210L430 180H520%22 transform=%22translate(7 7)%22/%3E%3Cpath d=%22M400 260V210L430 180H520%22 transform=%22translate(14 14)%22/%3E%3C/g%3E%3Ccircle cx=%22120%22 cy=%22180%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22120%22 cy=%22180%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22300%22 cy=%22140%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22300%22 cy=%22140%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22240%22 cy=%22100%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22240%22 cy=%22100%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22430%22 cy=%22180%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22430%22 cy=%22180%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%22200%22 cy=%2260%22 r=%229%22 fill=%22%237FDCFF%22 fill-opacity=%22.18%22/%3E%3Ccircle cx=%22200%22 cy=%2260%22 r=%223.2%22 fill=%22%23E6FAFF%22 fill-opacity=%22.95%22/%3E%3C/svg%3E"),radial-gradient(ellipse at 45% 35%,rgba(70,205,255,.55) 0%,rgba(70,205,255,0) 60%),linear-gradient(90deg,#03356A 0%,#0A6FB5 55%,#1596D6 100%);background-size:320px 200px,520px 260px,100% 100%,100% 100%;background-position:0 0,140px 40px,0 0,0 0}
.hd img.logo{height:58px;background:none;padding:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.45))}
.hd .t1{color:#fff;text-shadow:0 2px 8px rgba(0,30,70,.55)}
.hd .tel{background:#fff;color:var(--ink)}
.hd .tel.mob{background:var(--or);color:#fff}
@media(max-width:899px){.hd img.logo{height:46px}}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);background:var(--ink);isolation:isolate}
.tile svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s}
.tile:hover svg{transform:scale(1.08)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;color:#fff;background:linear-gradient(180deg,transparent 0%,rgba(4,24,38,.88) 55%)}
.tile h3{font-size:21px;line-height:1.1;margin:0 0 4px}
.tile p{margin:0;font-size:14px;line-height:1.35;color:#D5E6F0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}
.tile:hover p,.tile:focus-visible p{max-height:80px;opacity:1}
@media(hover:none){.tile p{max-height:none;opacity:1}.tile .cap{padding-top:70px}}
@media(prefers-reduced-motion:reduce){.tile svg,.tile p{transition:none}}
.tile.show p{max-height:none;opacity:1}.tile.show .cap{padding-top:60px}
.tile .num{position:absolute;top:12px;left:12px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--or);color:#fff;font:800 24px/42px 'Bricolage Grotesque',sans-serif;text-align:center;border:3px solid #fff}
footer .f img[alt="AS2i Informatique"]{filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.4))}
/* Boutons téléphone harmonisés avec l'en-tête : fixe sur fond blanc, mobile sur fond orange */
.btn.tfix,.final .btn.tfix{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 8px 0 var(--ink)}
.btn.tfix:hover,.final .btn.tfix:hover{box-shadow:0 5px 0 var(--ink)}
.btn.tmob{background:var(--or);color:#fff;border:2px solid var(--or);box-shadow:0 8px 0 #B94700}
.btn.tmob:hover{box-shadow:0 5px 0 #B94700}
.stick a{gap:8px}.stick a svg{width:20px;height:20px;flex:none}
.stick a.sfix{background:#fff;color:var(--ink)}
.stick a.smob{background:var(--or);color:#fff}
.card .btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2}
/* Pied de page : boutons téléphone identiques à l'en-tête */
footer{border-top:3px solid var(--ink)}
footer .fc{text-align:right}
footer .ftels{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-bottom:10px}
footer a.tel{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:12px 20px;border-radius:999px;font-weight:700;white-space:nowrap}
footer a.tel.mob{background:var(--or);color:#fff}
footer a.tel svg{width:20px;height:20px;flex:none}
footer .c{border-top-color:rgba(255,255,255,.35)}
footer .fc>div:last-child,footer .c{text-shadow:0 1px 4px rgba(0,30,70,.6)}
@media(max-width:899px){footer .fc{text-align:left;width:100%}footer .ftels{justify-content:flex-start}footer a.tel{flex:1;justify-content:center;padding:10px 8px;font-size:14px}}
.final .btn.tmob{background:var(--or);color:#fff;border:2px solid #fff;box-shadow:0 8px 0 #B94700}
/* Navigation : bulles plus compactes, ajustées au texte */
.nb{padding:2px 20px 10px}
.nbi{gap:6px}
.nb a{padding:5px 14px;font-size:15px;line-height:1.3;border-width:1.5px}
@media(max-width:899px){.nb{padding:4px 12px 10px}.nbi{gap:6px}.nb a{flex:0 0 auto;padding:5px 12px;font-size:14px}}