/* ═══════════════════════════════════════════════════════════════════ DOUBLETESCHANCES — site vitrine, fichier unique autonome ─────────────────────────────────────────────────────────────────── PALETTE : deux thèmes sont livrés. Le thème actif se change sur la balise : · "brand" (par défaut) — charte du logo : nuit profonde + dégradé jaune → vert repris de la flèche du logo. · "neon" — variante violet électrique → cyan. ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/outfit.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter.woff2) format('woff2')} :root{ --bg-1:#010E1B; --bg-2:#04182A; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075); --a1:#FAF918; --a2:#A8EF3C; --a3:#00D46D; --accent:#00D46D; --accent-soft:rgba(0,212,109,.16); --grad:linear-gradient(118deg,#FAF918 0%,#A8EF3C 46%,#00D46D 100%); --glow:rgba(0,212,109,.34); --glow-2:rgba(250,249,24,.16); --on-accent:#010E1B; --txt:#F9FAFB; --txt-2:#9CA3AF; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06); --r:16px; --maxw:1200px; --display:'Outfit',system-ui,-apple-system,sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif; } html[data-theme="neon"]{ --bg-1:#0A0E1A; --bg-2:#111827; --surface:rgba(21,27,46,.62); --surface-2:rgba(21,27,46,.86); --a1:#7C3AED; --a2:#8B5CF6; --a3:#22D3EE; --accent:#22D3EE; --accent-soft:rgba(124,58,237,.18); --grad:linear-gradient(118deg,#7C3AED 0%,#8B5CF6 46%,#22D3EE 100%); --glow:rgba(124,58,237,.42); --glow-2:rgba(34,211,238,.22); --on-accent:#0A0E1A; --line:rgba(139,92,246,.22); --line-2:rgba(34,211,238,.12); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%); background-attachment:fixed; color:var(--txt);font-family:var(--body);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} /* ── Décor ────────────────────────────────────────────────────────── */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bg .mesh{ position:absolute;inset:0; background-image: linear-gradient(to right,rgba(255,255,255,.032) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.032) 1px,transparent 1px); background-size:68px 68px; -webkit-mask-image:radial-gradient(115% 70% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(115% 70% at 50% 0%,#000,transparent 78%); } .orb{position:absolute;border-radius:50%;filter:blur(100px)} .orb.a{width:640px;height:640px;background:var(--glow);top:-280px;right:-180px;opacity:.55; animation:float 22s ease-in-out infinite} .orb.b{width:480px;height:480px;background:var(--glow-2);top:46vh;left:-240px;opacity:.5; animation:float 28s ease-in-out infinite reverse} .orb.c{width:520px;height:520px;background:var(--glow);bottom:-260px;left:38%;opacity:.28; animation:float 34s ease-in-out infinite} @keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(38px,-46px)}} .spark{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent); opacity:.5;animation:rise linear infinite} @keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.65}100%{transform:translateY(-70vh);opacity:0}} main,header,footer{position:relative;z-index:1} /* ── Structure ────────────────────────────────────────────────────── */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:96px 0} @media(max-width:720px){section{padding:64px 0}} .head{max-width:760px;margin-bottom:48px} .center{text-align:center;margin-left:auto;margin-right:auto} /* ── Typo ─────────────────────────────────────────────────────────── */ .kicker{display:inline-block;font-family:var(--display);font-weight:700;font-size:12px; letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.2vw,74px); line-height:1.02;letter-spacing:-.035em} h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.2vw,50px); line-height:1.04;letter-spacing:-.03em} h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.015em} p{color:var(--txt-2);font-size:16.5px} .lead{font-size:clamp(16px,1.55vw,19.5px);color:var(--txt-2);margin-top:22px;max-width:64ch} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} /* ── Boutons ──────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 28px;border-radius:999px;font-family:var(--display);font-weight:700; font-size:15.5px;letter-spacing:-.01em;border:1px solid var(--line); background:var(--surface-2);color:var(--txt); transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,border-color .2s} .btn:hover{transform:translateY(-2px);border-color:var(--accent); box-shadow:0 12px 34px -14px var(--glow)} .btn.primary{position:relative;color:var(--on-accent);border-color:transparent; background:var(--grad);background-size:200% 200%;animation:shift 7s ease infinite} @keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .btn.primary:hover{box-shadow:0 16px 40px -12px var(--glow);filter:brightness(1.06)} .btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line)} .btn svg{width:18px;height:18px;flex:0 0 auto} .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* ── Navigation ───────────────────────────────────────────────────── */ header.nav{position:fixed;top:0;left:0;right:0;z-index:80; background:rgba(1,14,27,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line-2);transition:background .3s} html[data-theme="neon"] header.nav{background:rgba(10,14,26,.72)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px} .logo{display:flex;align-items:center;gap:11px;flex:0 0 auto} .logo img{width:36px;height:36px} .logo span{font-family:var(--display);font-weight:800;font-size:17.5px;letter-spacing:-.02em;white-space:nowrap} .nav .links{display:flex;align-items:center;gap:6px} .nav .links a:not(.btn){padding:9px 15px;border-radius:999px;font-size:14.5px;font-weight:500; color:var(--txt-2);transition:color .18s,background .18s} .nav .links a:not(.btn):hover{color:var(--txt);background:rgba(255,255,255,.06)} .nav .links a.on{color:var(--txt);background:var(--accent-soft)} .nav .btn{padding:11px 20px;font-size:14.5px} .burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line); align-items:center;justify-content:center} .burger span{display:block;width:18px;height:2px;background:var(--txt);position:relative;transition:.25s} .burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px; background:var(--txt);transition:.25s} .burger span::before{top:-6px}.burger span::after{top:6px} .burger.open span{background:transparent} .burger.open span::before{transform:rotate(45deg);top:0} .burger.open span::after{transform:rotate(-45deg);top:0} @media(max-width:940px){ .nav .links{position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch; gap:4px;padding:16px 20px 26px;background:rgba(1,14,27,.97); border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s cubic-bezier(.2,.8,.2,1)} html[data-theme="neon"] .nav .links{background:rgba(10,14,26,.97)} .nav .links.open{transform:none} .nav .links a{padding:14px 16px;font-size:16px} .nav .links .btn{margin-top:8px} .burger{display:flex} } /* ── Pages ────────────────────────────────────────────────────────── */ .page{padding-top:72px} @keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ── Hero ─────────────────────────────────────────────────────────── */ .hero{min-height:min(calc(100vh - 72px),720px);display:flex;align-items:center;padding:64px 0 76px} .hero .lead{max-width:58ch} .badge{display:inline-flex;margin-right:auto;align-items:center;gap:9px;padding:8px 16px;border-radius:999px; border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--txt-2);margin-bottom:26px} .badge i{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 var(--glow);animation:ping 2.4s infinite} @keyframes ping{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} /* ── Cartes ───────────────────────────────────────────────────────── */ .card{position:relative;border-radius:var(--r);border:1px solid var(--line); background:var(--surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s} .card:hover{transform:translateY(-5px);border-color:var(--accent); box-shadow:0 26px 60px -30px var(--glow)} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:980px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.grid2,.grid3,.grid4{grid-template-columns:1fr}} .ic{width:50px;height:50px;border-radius:14px;background:var(--grad); display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex:0 0 auto} .ic svg{width:25px;height:25px;stroke:var(--on-accent);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .svc{padding:30px 26px 32px;display:flex;flex-direction:column;height:100%} .svc h3{margin-bottom:10px} .svc p{font-size:15px;flex:1} .svc .more{margin-top:18px;font-family:var(--display);font-weight:700;font-size:14.5px; color:var(--accent);display:inline-flex;align-items:center;gap:7px} .svc:hover .more svg{transform:translateX(4px)} .svc .more svg{width:15px;height:15px;transition:transform .22s} /* ── Compteurs ────────────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{background:var(--bg-1);padding:32px 20px;text-align:center} html[data-theme="neon"] .stat{background:#0D1322} .stat .v{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,44px); line-height:1;letter-spacing:-.035em} .stat .k{font-size:12.5px;color:var(--txt-2);margin-top:10px;text-transform:uppercase; letter-spacing:.14em;font-weight:600} /* ── Services détaillés ───────────────────────────────────────────── */ .row{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center; padding:34px;border-radius:22px;border:1px solid var(--line);background:var(--surface); margin-bottom:26px} .row.rev>.txt{order:2} @media(max-width:900px){.row{grid-template-columns:1fr;gap:26px;padding:26px}.row.rev>.txt{order:0}} .row h3{font-size:clamp(22px,2.8vw,30px);margin-bottom:14px} .row p{font-size:16px;margin-bottom:8px} .row .art{position:relative;border-radius:18px;min-height:210px;overflow:hidden; background:radial-gradient(120% 120% at 30% 0%,var(--accent-soft),transparent 62%),rgba(255,255,255,.03); border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center} .row .art .big{width:96px;height:96px;border-radius:26px;background:var(--grad); display:flex;align-items:center;justify-content:center} .row .art .big svg{width:46px;height:46px;stroke:var(--on-accent);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .row .art .ring{position:absolute;inset:auto;width:200px;height:200px;border-radius:50%; border:1px dashed var(--line);animation:spin 26s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ── Boutique ─────────────────────────────────────────────────────── */ .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} @media(max-width:940px){.packs{grid-template-columns:1fr;max-width:520px;margin:0 auto}} .pack{position:relative;padding:34px 28px 32px;display:flex;flex-direction:column;border-radius:20px} .pack.hot{border-color:var(--accent);background: radial-gradient(120% 130% at 50% 0%,var(--accent-soft),transparent 62%),var(--surface-2); box-shadow:0 24px 70px -34px var(--glow)} @media(min-width:941px){.pack.hot{transform:scale(1.045);z-index:2}.pack.hot:hover{transform:scale(1.045) translateY(-5px)}} .pack .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--grad);color:var(--on-accent);font-family:var(--display);font-weight:800; font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:7px 18px;border-radius:999px; white-space:nowrap} .pack h3{font-size:24px;margin-bottom:8px} .pack .why{font-size:14.5px;color:var(--txt-2);min-height:44px;margin-bottom:22px} .pack .price{font-family:var(--display);font-weight:800;font-size:30px;margin-bottom:22px;letter-spacing:-.03em} .pack ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1} .pack li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--txt-2)} .pack li svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;stroke:var(--accent); fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--glow))} /* ── Formulaire ───────────────────────────────────────────────────── */ .form{display:flex;flex-direction:column;gap:16px} .field label{display:block;font-size:13px;font-weight:600;color:var(--txt-2); margin-bottom:8px;letter-spacing:.02em} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:12px;font:inherit;font-size:15.5px; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt); transition:border-color .18s,box-shadow .18s,background .18s} .field textarea{min-height:130px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--accent);background:rgba(255,255,255,.07); box-shadow:0 0 0 4px var(--accent-soft)} .field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px} .field select option{background:#0B1726;color:#F9FAFB} .field.err input,.field.err select,.field.err textarea{border-color:#FF5C7A;box-shadow:0 0 0 4px rgba(255,92,122,.14)} .field .msg{display:none;font-size:12.5px;color:#FF8FA3;margin-top:7px} .field.err .msg{display:block} .two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:620px){.two{grid-template-columns:1fr}} .sent{display:none;text-align:center;padding:46px 30px} .sent.show{display:block;animation:pop .55s cubic-bezier(.2,.9,.3,1.3) both} @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} .sent .tick{width:78px;height:78px;border-radius:50%;background:var(--grad);margin:0 auto 22px; display:flex;align-items:center;justify-content:center} .sent .tick svg{width:38px;height:38px;stroke:var(--on-accent);fill:none;stroke-width:3; stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40; animation:draw .6s .2s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} .contact-info{display:flex;flex-direction:column;gap:14px} .info-row{display:flex;gap:14px;align-items:center;padding:20px;border-radius:14px; border:1px solid var(--line);background:var(--surface)} .info-row .ic{width:44px;height:44px;border-radius:12px;margin:0} .info-row .ic svg{width:21px;height:21px} .info-row .t{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.13em;font-weight:600} .info-row .v{font-family:var(--display);font-weight:700;font-size:19px;margin-top:2px} /* ── CTA final ────────────────────────────────────────────────────── */ .cta{position:relative;overflow:hidden;border-radius:26px;padding:60px 40px;text-align:center; background:radial-gradient(110% 150% at 50% 0%,var(--accent-soft),transparent 65%),var(--surface-2); border:1px solid var(--line)} .cta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)} .cta .btns{justify-content:center} /* ── WhatsApp flottant ────────────────────────────────────────────── */ .wa{position:fixed;right:20px;bottom:20px;z-index:90;width:58px;height:58px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);animation:pulse 2.6s ease-in-out infinite; transition:transform .2s} .wa:hover{transform:scale(1.08)} .wa svg{width:31px;height:31px;fill:#fff} @keyframes pulse{0%,100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.5)} 60%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 16px rgba(37,211,102,0)}} /* ── Pied de page ─────────────────────────────────────────────────── */ footer{border-top:1px solid var(--line-2);padding:56px 0 40px;margin-top:40px} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px} @media(max-width:800px){.foot{grid-template-columns:1fr;gap:28px}} .foot h4{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase; letter-spacing:.14em;margin-bottom:16px;color:var(--txt)} .foot a{display:block;font-size:15px;color:var(--txt-2);padding:5px 0;transition:color .16s} .foot a.logo{display:flex;color:var(--txt);padding:0} .foot a:hover{color:var(--accent)} .socials{display:flex;gap:10px;margin-top:16px} .socials a{width:40px;height:40px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;padding:0;transition:.2s} .socials a:hover{border-color:var(--accent);background:var(--accent-soft)} .socials svg{width:19px;height:19px;fill:currentColor} .legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-2); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between} .legal p{font-size:13.5px} /* ── Apparition au défilement ─────────────────────────────────────── */ /* Le contenu est visible par défaut : l'animation d'apparition n'est activée que si le JavaScript a pu s'exécuter (classe .js posée dans le ). Sans cette précaution, une erreur JS rendrait la page entièrement blanche. */ .js .rv{opacity:0;transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)} .js .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} .orb,.spark,.btn.primary,.wa,.badge i,.ring{animation:none!important} } /* ═══════════════════════════════════════════════════════════════════ Complément multi-pages : fil d'Ariane, contenu rédactionnel, FAQ. ═══════════════════════════════════════════════════════════════════ */ .crumbs{font-size:13.5px;color:var(--txt-2);padding:26px 0 0} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .crumbs a{color:var(--txt-2);transition:color .16s} .crumbs a:hover{color:var(--accent)} .crumbs li[aria-current]{color:var(--txt)} .crumbs li+li::before{content:'/';margin-right:8px;color:var(--line)} /* Corps rédactionnel des pages service */ .prose{max-width:70ch} .prose h2{font-size:clamp(24px,3.2vw,34px);margin:48px 0 16px} .prose h2:first-child{margin-top:0} .prose h3{font-size:20px;margin:30px 0 10px} .prose p{margin-bottom:16px;font-size:16.5px;line-height:1.72} .prose p strong,.prose li strong{color:var(--txt);font-weight:600} .prose ul{list-style:none;margin:6px 0 22px;display:flex;flex-direction:column;gap:11px} .prose ul li{position:relative;padding-left:22px;color:var(--txt-2);font-size:16px;line-height:1.62} .prose ul li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px; border-radius:50%;background:var(--grad)} .prose a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(0,212,109,.45)} .prose a:not(.btn):hover{text-decoration-color:var(--accent)} .prose>.btns{margin-top:30px} .layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start} @media(max-width:960px){.layout{grid-template-columns:1fr;gap:34px}} .aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px} @media(max-width:960px){.aside{position:static}} .aside .box{padding:26px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)} .aside h3{font-size:17px;margin-bottom:12px} .aside a.lnk{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15px;color:var(--txt-2);transition:color .16s} .aside a.lnk:last-child{border-bottom:0} .aside a.lnk:hover{color:var(--accent)} .aside a.lnk.on{color:var(--txt);font-weight:600} /* FAQ (balisée en JSON-LD FAQPage) */ details.faq{border:1px solid var(--line);border-radius:14px;padding:18px 20px; background:var(--surface);margin-bottom:12px} details.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:16.5px; list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--txt)} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:'+';color:var(--accent);font-size:23px;line-height:1;flex:0 0 auto} details.faq[open] summary::after{content:'\2013'} details.faq p{margin-top:12px;font-size:15.5px;line-height:1.65} .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0 8px} @media(max-width:660px){.tiles{grid-template-columns:1fr}} .tile{padding:22px 20px;border-radius:14px;border:1px solid var(--line);background:var(--surface)} .tile h3{font-size:16.5px;margin-bottom:7px} .tile p{font-size:14.5px;margin:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;border-radius:0 0 12px 0; background:var(--grad);color:var(--on-accent);font-weight:700} .skip:focus{left:0} /* ── Étapes de la méthode et comparateur avant / après ─────────────── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{padding:26px 22px;border-radius:var(--r);border:1px solid var(--line); background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))} .step .n{width:38px;height:38px;border-radius:50%;background:var(--grad);color:var(--ink); font-family:var(--display);font-weight:900;font-size:19px; display:flex;align-items:center;justify-content:center;margin-bottom:16px} .step h3{font-size:17px;margin-bottom:7px;text-transform:uppercase} .step p{font-size:14px} .cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center} .pan{border-radius:var(--r);padding:34px 24px 30px;text-align:center;border:1px solid var(--line); background:rgba(255,255,255,.045)} .pan .lb{font-family:var(--tech);font-weight:700;font-size:12px;letter-spacing:.26em; text-transform:uppercase;color:var(--muted-2);margin-bottom:14px} .pan .nb{font-family:var(--display);font-weight:900;font-size:clamp(56px,9vw,104px); line-height:.84;letter-spacing:-.045em;color:rgba(255,255,255,.4)} .pan .sub{margin-top:16px;font-size:14px;color:var(--muted)} .pan .sub b{color:#fff} .pan.win{border-color:rgba(0,212,109,.5); background:radial-gradient(130% 130% at 50% 0%,rgba(0,212,109,.28),rgba(0,212,109,.04) 70%)} .pan.win .lb{color:var(--green)} .pan.win .nb{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} @media(max-width:720px){.cmp{grid-template-columns:1fr;gap:14px}.cmp .mid{transform:rotate(90deg)}