/* ============================================================ ATB — Apple-style dark reference ============================================================ */ /* Inter, servie depuis notre propre domaine : aucune requête ne part chez Google, donc aucune adresse IP de visiteur ne lui est transmise. Fichier variable — un seul fichier couvre toutes les graisses. Licence SIL Open Font 1.1, l'auto-hébergement est autorisé. */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* Colors — surfaces claires (Apple light), rôles conservés */ --obsidian:#ffffff; /* fond de page */ --graphite:#fbfbfd; /* fond alterné */ --carbon:#f5f5f7; /* surface de carte */ --steel:#d2d2d7; /* filet 1px */ --slate:#aeaeb2; /* bordure / tertiaire */ --ash:#6e6e73; /* texte secondaire */ --porcelain:#1d1d1f; /* texte principal */ --white:#ffffff; /* Palette du logo, relevée sur le fichier source */ --ink:#232c35; /* anthracite du logo */ --gold:#b8863c; /* or du logo */ --gold-deep:#7a5820; /* or assombri : 5,2:1 minimum sur toutes nos teintes */ --gold-pale:#e7d5b4; /* Anciens noms, redirigés vers la palette du logo pour ne pas avoir à renommer les 60 usages répartis dans la feuille. */ --blue:var(--ink); /* boutons d'achat */ --link:var(--gold-deep); /* lien sur fond clair */ --cobalt:var(--gold-deep); --copper:#a9641f; --yellow:var(--gold); --green:var(--gold-deep); /* Teintes de section, dérivées des deux couleurs du logo : ardoise = famille anthracite · champagne = famille or · sauge = neutre tiède */ --sky-1:#e3e7ed; --sky-2:#f4f6f9; --sand-1:#f7ecd9; --sand-2:#fdf9f2; --mint-1:#e9e7e0; --mint-2:#f7f6f2; --grad-sky:linear-gradient(180deg,var(--sky-1),var(--sky-2)); --grad-sand:linear-gradient(180deg,var(--sand-1),var(--sand-2)); --grad-mint:linear-gradient(180deg,var(--mint-1),var(--mint-2)); /* Scènes produit : tuiles sombres posées sur la page claire */ --stage-bg:#0a0a0c; --stage-bg-2:#000000; --on-stage:#f5f5f7; --on-stage-dim:#86868b; --stage-line:rgba(255,255,255,.12); --stage-link:#d2a456; --grad-carbon:linear-gradient(#f5f5f7,#ffffff 288px); /* Type */ --sf-text:'SF Pro Text',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --sf-display:'SF Pro Display',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* Radius */ --r-card:28px; --r-nav:20px; --r-pill:9999px; --r-btn:170px; --r-input:980px; --r-compact:36px; /* Shadow (1px keylines only) */ --key:rgb(210,210,215) 0 0 0 1px; --key-2:rgb(174,174,178) 0 0 0 1px; /* Layout */ --gut:clamp(20px,4vw,48px); --maxw:1220px; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{ background:var(--obsidian); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; } body{ margin:0; background:var(--obsidian); color:var(--porcelain); font-family:var(--sf-text); font-size:17px; line-height:1.47; letter-spacing:-.374px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{overflow:hidden} img,svg{display:block;max-width:100%} a{color:var(--link);text-decoration:none} button{font:inherit;color:inherit} ::selection{background:rgba(184,134,60,.3);color:#fff} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} .skiplink{ position:fixed;top:-100px;left:16px;z-index:999; background:var(--blue);color:#fff;padding:10px 18px;border-radius:var(--r-pill); font-size:14px;transition:top .25s var(--ease); } .skiplink:focus{top:12px} /* ---------- Typography helpers ---------- */ .display{ font-family:var(--sf-display);font-weight:600; font-size:clamp(40px,7.6vw,80px);line-height:1.05;letter-spacing:-1.2px; margin:0;color:var(--porcelain); } .display--sm{font-size:clamp(34px,5.6vw,62px);letter-spacing:-.9px} .h2{ font-family:var(--sf-display);font-weight:600; font-size:clamp(30px,4.6vw,56px);line-height:1.07;letter-spacing:-.84px; margin:0;color:var(--porcelain); } .eyebrow{ font-family:var(--sf-display);font-weight:600;font-size:19px;line-height:1.21;letter-spacing:.228px; color:var(--link);margin:0 0 18px; } .lead{ font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.3px; color:var(--ash);max-width:62ch;margin:22px 0 0; } .lead--center{margin-inline:auto;text-align:center} .muted{color:var(--ash);font-size:14px;line-height:1.43;letter-spacing:-.224px;margin:10px 0 0} .stat{ font-family:var(--sf-display);font-weight:600;font-size:clamp(32px,3.4vw,44px); line-height:1;letter-spacing:-.6px;margin:0;color:var(--porcelain); font-variant-numeric:tabular-nums; } .stat--lg{font-size:clamp(40px,4.4vw,56px);letter-spacing:-.84px} .legal{ font-size:12px;line-height:1.5;letter-spacing:-.12px;color:var(--slate); max-width:80ch;margin:48px 0 0; } .legal--tight{margin-top:20px} .link{ display:inline-block;margin-top:16px;font-size:17px;letter-spacing:-.374px; color:var(--link);transition:opacity .2s var(--ease); } .link:hover{text-decoration:underline;opacity:.82} .tag-new{color:var(--copper);font-weight:600;font-size:12px;letter-spacing:-.12px;margin-right:8px} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .wrap--narrow{max-width:860px} .ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px} .ticks li{ position:relative;padding-left:30px;font-size:17px;letter-spacing:-.374px;color:var(--porcelain); } .ticks li::before{ content:"";position:absolute;left:0;top:7px;width:17px;height:10px; border-left:2px solid var(--link);border-bottom:2px solid var(--link); transform:rotate(-45deg);border-radius:1px; } /* ---------- Loader ---------- */ .loader{ position:fixed;inset:0;z-index:200;background:var(--obsidian); display:grid;place-items:center; transition:opacity .7s var(--ease),visibility .7s; } .loader.is-done{opacity:0;visibility:hidden} .loader__mark{display:grid;place-items:center;gap:20px} .loader__path{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.1s var(--ease-out) forwards} .loader__dot{opacity:0;transform-origin:60px 72px;animation:pop .6s .55s var(--ease-out) forwards} .loader__logo{ width:min(260px,62vw);opacity:0; animation:fadeUp .8s .15s var(--ease-out) forwards; } @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ============================================================ LOGO ATB Le fichier source contient deux éléments : le sigle seul et le lockup complet avec la baseline. On les recadre en CSS plutôt que de découper l'image, pour garder un seul fichier. Zones mesurées dans l'original 1254×1254 : sigle x 66 y 369 1113×356 complet x 64 y 369 1126×519 ------------------------------------------------------------ L'image n'a pas de transparence : multiply fait disparaître son fond blanc sur les surfaces claires tout en gardant l'anthracite et l'or intacts. ============================================================ */ .logo{ display:block;background-image:url('logo-atb.webp'); background-repeat:no-repeat;mix-blend-mode:multiply; } .logo--sigle{ aspect-ratio:1113/356; background-size:112.67% 352.25%; background-position:46.81% 41.09%; } .logo--complet{ aspect-ratio:1126/519; background-size:111.37% 241.62%; background-position:50% 50.2%; } /* ---------- Scroll progress ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none} .progress span{ display:block;height:100%;width:0; background:linear-gradient(90deg,var(--blue),var(--link)); box-shadow:0 0 12px rgba(184,134,60,.6); } /* ---------- Custom cursor ---------- */ .cursor{position:fixed;top:0;left:0;z-index:150;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s} .cursor.is-on{opacity:1} .cursor__ring,.cursor__dot{ position:absolute;border-radius:50%;translate:-50% -50%; } .cursor__ring{ width:34px;height:34px;border:1px solid rgba(0,0,0,.45); transition:width .28s var(--ease),height .28s var(--ease),background .28s,border-color .28s; } .cursor__dot{width:4px;height:4px;background:#1d1d1f} .cursor.is-hot .cursor__ring{width:58px;height:58px;background:rgba(0,0,0,.08);border-color:transparent} .cursor.is-hot .cursor__dot{opacity:0} @media (pointer:coarse){.cursor{display:none}} /* ============================================================ NAVIGATION ============================================================ */ .unav{ position:relative;z-index:60;height:44px;background:var(--graphite); border-bottom:1px solid var(--steel); } .unav__inner{ max-width:1024px;height:44px;margin:0 auto;padding:0 20px; display:flex;align-items:center;gap:8px; } .unav__logo,.unav__glyph{color:var(--ash);display:grid;place-items:center;padding:6px;transition:color .2s} .unav__logo:hover,.unav__glyph:hover{color:var(--porcelain)} .unav__list{ list-style:none;display:flex;flex:1;justify-content:space-around;margin:0;padding:0 24px;gap:4px; } .unav__list a{ font-size:12px;line-height:1.33;letter-spacing:-.12px;color:var(--ash); padding:6px 8px;border-radius:6px;transition:color .2s var(--ease); } .unav__list a:hover{color:var(--porcelain)} @media(max-width:860px){.unav__list{display:none}.unav__inner{justify-content:space-between}} .announce{ position:relative;z-index:59;background:var(--carbon); padding:18px var(--gut);text-align:center; } .announce p{ margin:0;font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--porcelain); } .announce a{color:var(--link)} .announce a:hover{text-decoration:underline} .localnav{position:sticky;top:0;z-index:58;padding:10px var(--gut) 0} .localnav__bar{ max-width:var(--maxw);margin:0 auto;height:56px; display:flex;align-items:center;gap:24px; padding:0 10px 0 22px;border-radius:var(--r-nav); background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px); box-shadow:var(--key); transition:height .35s var(--ease),background .35s var(--ease),transform .4s var(--ease); } .localnav.is-stuck .localnav__bar{height:48px;background:rgba(255,255,255,.92)} .localnav__name{ display:block;width:84px;flex:none; } .localnav.is-stuck .localnav__name{width:76px;transition:width .35s var(--ease)} .localnav__links{display:flex;gap:4px;flex:1;justify-content:flex-end} .localnav__links a{ position:relative;font-size:17px;font-weight:500;line-height:1.47;letter-spacing:-.374px; color:var(--porcelain);padding:6px 12px;border-radius:10px; transition:color .25s var(--ease),background .25s var(--ease); } .localnav__links a::after{ content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px; background:var(--link);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease-out); } .localnav__links a:hover{color:var(--link)} .localnav__links a:hover::after,.localnav__links a.is-current::after{transform:scaleX(1)} .localnav__links a.is-current{color:var(--link)} .localnav__actions{display:flex;align-items:center;gap:8px} @media(max-width:1060px){ .localnav__links{display:none} /* en mode burger : « ATB » à gauche, traits à droite, pas de CTA dans la barre */ .unav{display:none} .localnav__actions{margin-left:auto} .localnav__actions .pill{display:none} } .burger{ display:none;width:40px;height:40px;background:none;border:0;border-radius:50%; position:relative;cursor:pointer; } .burger span{ position:absolute;left:11px;width:18px;height:1.5px;background:var(--porcelain);border-radius:2px; transition:transform .4s var(--ease),opacity .3s; } .burger span:first-child{top:17px} .burger span:last-child{top:23px} .burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)} @media(max-width:1060px){.burger{display:block}} .mobilemenu{ position:fixed;inset:0;z-index:57;background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px); padding:calc(var(--chrome, 150px) + 20px) var(--gut) 48px;overflow-y:auto; } .mobilemenu[hidden]{display:none} .mobilemenu nav{display:grid;gap:4px;border-bottom:1px solid var(--steel);padding-bottom:28px;margin-bottom:28px} .mobilemenu a{ opacity:0;transform:translateY(24px); animation:menuIn .6s var(--ease-out) forwards;animation-delay:calc(var(--i)*.045s + .05s); } /* typographie des liens seulement : le .pill garde son padding et sa taille */ .mobilemenu nav a{ font-family:var(--sf-display);font-weight:600;font-size:clamp(24px,5vw,32px);letter-spacing:-.5px; color:var(--porcelain);padding:10px 0; } .mobilemenu nav a:hover{color:var(--link)} .mobilemenu .pill{justify-self:start} @keyframes menuIn{to{opacity:1;transform:none}} /* ---------- Pills & capsules ---------- */ .pill{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--sf-text);font-size:12px;line-height:16px;letter-spacing:-.12px; padding:7px 14px;border-radius:var(--r-btn);white-space:nowrap; transition:background .25s var(--ease),transform .4s var(--ease-out),color .25s,box-shadow .35s; } .pill--blue{background:var(--blue);color:#fff} .pill--blue:hover{background:#2f3a45} .pill--ghost{background:transparent;color:var(--link);box-shadow:var(--key-2);border-radius:var(--r-pill)} .pill--ghost:hover{background:rgba(35,44,53,.06);box-shadow:0 0 0 1px var(--blue)} .pill--lg{font-size:17px;line-height:1.3;letter-spacing:-.374px;padding:13px 26px} .pill--submit{border:0;cursor:pointer;width:100%;margin-top:8px} .pill:active{transform:scale(.97)} .capsule{ display:inline-flex;align-items:center;gap:6px; background:var(--carbon);color:var(--ash);box-shadow:var(--key); font-size:12px;line-height:16px;letter-spacing:-.12px; padding:9px 18px;border-radius:var(--r-compact); } .capsule strong{color:var(--porcelain);font-weight:600} .badge{ display:inline-block;font-size:12px;line-height:16px;letter-spacing:-.12px; color:var(--ash);border:1px solid var(--steel);padding:4px 10px;border-radius:var(--r-pill); } .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none} /* Couleurs officielles des tranches MaPrimeRénov' : elles nomment le barème (Bleu, Jaune, Violet, Rose) et ne suivent donc pas la charte du logo. */ .dot--bleu{background:#2f7fd4} .dot--jaune{background:#ffd500} .dot--violet{background:#a86cff} .dot--rose{background:#ff6482} /* ============================================================ REVEAL / SPLIT ANIMATIONS ============================================================ */ [data-reveal]{ opacity:0;transform:translateY(34px); transition:opacity .9s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s); } [data-reveal].is-in{opacity:1;transform:none} .splitline{display:block;overflow:hidden} .splitline > i{ display:block;font-style:normal;transform:translateY(110%); transition:transform 1.05s var(--ease-out) var(--d,0s); } .is-in .splitline > i,.splitline.is-in > i{transform:none} .splitword{display:inline-block;overflow:hidden;vertical-align:top} .splitword > i{ display:inline-block;font-style:normal;transform:translateY(105%);opacity:0; transition:transform .9s var(--ease-out) var(--d,0s),opacity .6s linear var(--d,0s); } .is-in .splitword > i{transform:none;opacity:1} /* ============================================================ 1. HERO ============================================================ */ .hero{ background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--obsidian) 100%); padding:clamp(40px,5vw,68px) 0 clamp(56px,7vw,92px); } .hero__inner{ max-width:var(--maxw);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(28px,3.4vw,48px); align-items:center; } @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} .hero__copy{position:relative;z-index:2} .hero__eyebrow{ display:flex;align-items:center;gap:9px;margin:0 0 18px; font-size:14px;font-weight:500;letter-spacing:-.016em;color:var(--ash); } .hero__rge{ font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--white); background:var(--ink);padding:3px 7px;border-radius:5px; } .hero__title{ font-family:var(--sf-display);font-weight:600; font-size:clamp(31px,3.7vw,48px);line-height:1.07;letter-spacing:-.018em; color:var(--porcelain);margin:0 0 20px; } .hero__title em{font-style:normal;color:var(--gold-deep);white-space:nowrap} .hero__sub{ font-size:clamp(15px,1.3vw,18px);line-height:1.5;letter-spacing:-.012em; color:var(--ash);max-width:50ch;margin:0 0 22px; } .hero__sub strong{color:var(--porcelain);font-weight:600} .hero__claim{ display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 26px; font-family:var(--sf-display);font-weight:600; font-size:clamp(18px,1.8vw,23px);line-height:1.15;letter-spacing:-.015em; color:var(--porcelain); } .hero__claim em{font-style:normal;font-size:1.4em;color:var(--gold-deep);white-space:nowrap} .hero__proof{ list-style:none;margin:0 0 28px;padding:0; display:flex;flex-wrap:wrap;gap:10px 22px; } .hero__proof li{ position:relative;padding-left:23px; font-size:14.5px;letter-spacing:-.016em;color:var(--porcelain); } .hero__proof li::before{ content:"";position:absolute;left:0;top:50%;width:15px;height:15px;translate:0 -50%; border-radius:50%;background:var(--gold-deep); } .hero__proof li::after{ content:"";position:absolute;left:5px;top:50%;width:4px;height:7px; translate:0 -62%;rotate:42deg; border-right:1.6px solid #fff;border-bottom:1.6px solid #fff; } .hero__cta{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-bottom:22px} .hero__zone{ display:flex;align-items:flex-start;gap:9px;margin:0 0 30px; font-size:14px;line-height:1.45;letter-spacing:-.012em;color:var(--ash); } .hero__zone svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--green)} .hero__zone strong{color:var(--porcelain);font-weight:600;white-space:nowrap} .link--lg{font-size:17px;letter-spacing:-.374px} .hero__trust{ display:flex;flex-wrap:wrap;gap:14px 34px; padding-top:24px;border-top:1px solid var(--steel); } .hero__trust b{ display:block;font-family:var(--sf-display);font-weight:600; font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--porcelain); } .hero__trust span{display:block;margin-top:6px;font-size:12.5px;color:var(--ash)} /* ---------- Hero : photo d'ambiance ---------- */ .herophoto{ position:relative;z-index:2;margin:0;align-self:center; border-radius:var(--r-card);overflow:hidden;box-shadow:var(--key); } .herophoto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} /* En une seule colonne, un 4/5 pleine largeur occuperait tout l'écran : on recadre, en gardant la famille et l'unité extérieure dans le champ. */ @media(max-width:980px){ .herophoto img{aspect-ratio:3/2;object-position:50% 42%} } /* ---------- Bandeau produit sur scène sombre ---------- */ .pstage{background:var(--obsidian);padding:0 var(--gut) clamp(40px,5vw,72px)} .pstage__inner{ max-width:var(--maxw);margin:0 auto;border-radius:var(--r-card); background:linear-gradient(165deg,var(--stage-bg),var(--stage-bg-2) 70%); padding:clamp(32px,4vw,60px); display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center; } .pstage__copy .eyebrow{color:var(--stage-link)} .pstage__copy .h2{color:var(--on-stage)} .pstage__muted{ font-size:17px;line-height:1.47;letter-spacing:-.374px; color:var(--on-stage-dim);margin:16px 0 20px;max-width:46ch; } .link--onstage{color:var(--stage-link)} .stage{ position:relative;z-index:2;width:100%; display:grid;place-items:center; } .stage__glow{ position:absolute;left:50%;top:52%;width:118%;aspect-ratio:1.6;translate:-50% -50%; background:radial-gradient(ellipse,rgba(184,134,60,.3),transparent 62%); filter:blur(22px);pointer-events:none; } .pacunit{ width:auto;height:auto;max-width:100%;max-height:100%; filter:drop-shadow(0 40px 70px rgba(0,0,0,.9)); } .fan{animation:spin 2.6s linear infinite} .fan--sm{animation-duration:1.6s} @keyframes spin{to{transform:rotate(360deg)}} .fan-guard{opacity:.5} .pac-led{animation:ledPulse 3.4s ease-in-out infinite} @keyframes ledPulse{0%,100%{opacity:.35}50%{opacity:1}} @media(max-width:980px){ .hero__inner{grid-template-columns:1fr;gap:34px} .pstage__inner{grid-template-columns:1fr;gap:28px} .pstage__copy{order:2} } @media(max-width:620px){ .hero__title{font-size:clamp(29px,8vw,38px)} .hero__trust{gap:14px 22px} } /* ============================================================ 2. MARQUEE STRIP ============================================================ */ .strip{background:var(--graphite);padding:28px 0;border-top:1px solid var(--steel);border-bottom:1px solid var(--steel)} .marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee__track{display:flex;align-items:center;gap:26px;width:max-content;will-change:transform} .strip .marquee__track span{ font-family:var(--sf-display);font-weight:500;font-size:clamp(15px,1.5vw,19px);letter-spacing:.228px; color:var(--ash);transition:color .3s var(--ease);white-space:nowrap; } .strip .marquee__track span:hover{color:var(--porcelain)} .strip .marquee__track i{color:var(--steel);font-style:normal} /* ============================================================ BANDS ============================================================ */ .band{padding:clamp(90px,13vw,160px) 0;background:var(--obsidian);position:relative} .band--carbon{background:var(--grad-carbon)} .band--sky{background:var(--grad-sky)} .band--sand{background:var(--grad-sand)} .band--mint{background:var(--grad-mint)} .secthead{margin-bottom:clamp(48px,6vw,80px);max-width:900px} .secthead--center{margin-inline:auto;text-align:center} .secthead--center .lead{margin-top:26px} /* ---------- Tiles ---------- */ .tiles{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))} .tiles--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:72px} .tile{ position:relative;background:var(--obsidian);border-radius:var(--r-card); padding:28px 24px 30px;box-shadow:var(--key);overflow:hidden; transform-style:preserve-3d; transition:box-shadow .5s var(--ease),transform .5s var(--ease-out),background .5s; } .tile::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(184,134,60,.14),transparent 62%); transition:opacity .45s var(--ease); } .tile:hover::before{opacity:1} .tile:hover{box-shadow:0 0 0 1px rgba(110,110,115,.9)} .tile--flat{background:var(--carbon)} .tile__visual{height:112px;display:grid;place-items:center;margin-bottom:22px} .tile__visual svg{height:112px;width:112px} .tile__title{ font-family:var(--sf-display);font-weight:600;font-size:21px;line-height:1.19;letter-spacing:.231px; margin:14px 0 0;color:var(--porcelain); } .tile .stat{font-size:clamp(28px,2.6vw,40px)} .chip__traces{animation:traces 3s ease-in-out infinite} @keyframes traces{0%,100%{opacity:.3}50%{opacity:.9}} .chip__core{animation:core 2.6s ease-in-out infinite} @keyframes core{0%,100%{opacity:.16}50%{opacity:.45}} .gauge__arc{stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset 1.6s var(--ease-out) .2s} .is-in .gauge__arc{stroke-dashoffset:102} .drops__set{animation:float 4s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .bars__set rect{transform-origin:bottom;transform:scaleY(.2);transition:transform 1.1s var(--ease-out)} .bars__set rect:nth-child(2){transition-delay:.1s} .bars__set rect:nth-child(3){transition-delay:.2s} .is-in .bars__set rect{transform:none} /* ---------- KPIs ---------- */ .kpis{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:44px 0 8px} .kpis div{display:grid;gap:6px} .kpis strong{ font-family:var(--sf-display);font-weight:600;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.6px; color:var(--link);font-variant-numeric:tabular-nums; } .kpis .muted{margin:0;max-width:22ch} /* ---------- Split layout ---------- */ .split{display:grid;gap:clamp(48px,6vw,88px);grid-template-columns:1.05fr .95fr;align-items:center} @media(max-width:940px){.split{grid-template-columns:1fr}} .split__visual{display:grid;place-items:center} .building{ width:min(420px,80%);border-radius:var(--r-card);padding:24px; background:var(--obsidian);box-shadow:var(--key); } .rooftop .spin{animation:spin 3.4s linear infinite;transform-box:fill-box;transform-origin:center} .riser{clip-path:inset(100% 0 0 0);transition:clip-path 2s var(--ease-out) .3s} .is-in .riser,.split__visual.is-in .riser{clip-path:inset(0 0 0 0)} .bwindows rect{fill:#0a0a0d;stroke:rgba(255,255,255,.08)} .is-in .bwindows rect{animation:lit 5.5s ease-in-out infinite;animation-delay:calc(var(--w)*.22s)} @keyframes lit{ 0%,100%{fill:#0a0a0d} 45%{fill:#ffd500;opacity:.36} 55%{fill:#ffd500;opacity:.26} } /* ============================================================ 4. STORY (pinned) ============================================================ */ .story{height:380vh;position:relative;background:var(--grad-carbon)} .story__sticky{ position:sticky;top:0;height:100vh;overflow:hidden; display:grid;align-items:center; grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px); max-width:var(--maxw);margin:0 auto;padding:96px var(--gut) 72px; } .story__visual{position:relative;display:grid;place-items:center} .story__halo{ position:absolute;inset:-10%; background:radial-gradient(circle at 30% 50%,rgba(184,134,60,.18),transparent 60%); filter:blur(10px); } .house{width:100%;height:auto;position:relative} .airflow path{ stroke-dasharray:90;stroke-dashoffset:90; animation:airflow 2.6s linear infinite;animation-delay:calc(var(--a)*.45s); } @keyframes airflow{0%{stroke-dashoffset:90;opacity:0}20%{opacity:.9}100%{stroke-dashoffset:-90;opacity:0}} .pipe{animation:dash 1.4s linear infinite} @keyframes dash{to{stroke-dashoffset:-40}} .floorheat{stroke-dasharray:4 8;animation:dash 2.4s linear infinite} .windows rect{fill:#0a0a0d;stroke:rgba(255,255,255,.08)} .story.is-live .windows rect{animation:lit 4.5s ease-in-out infinite;animation-delay:calc(var(--w)*.3s)} /* mise en valeur selon l'étape active */ .sc{transition:opacity .7s var(--ease),transform .8s var(--ease-out)} .story:not(.is-b0) .sc-air{opacity:.14} .story:not(.is-b1) .sc-emit{opacity:.16} .sc-ctrl{opacity:0;transform:translateY(16px)} .story.is-b2 .sc-ctrl{opacity:1;transform:none} .story__beats{position:relative;min-height:420px} .beat{ position:absolute;inset:0;display:grid;align-content:center; opacity:0;transform:translateY(40px) scale(.98);pointer-events:none; transition:opacity .7s var(--ease-out),transform .8s var(--ease-out); } .beat.is-active{opacity:1;transform:none;pointer-events:auto} .beat .lead{margin-top:20px} .story__dots{ position:absolute;left:var(--gut);bottom:52px;display:flex;gap:8px; } .story__dots span{width:26px;height:3px;border-radius:2px;background:var(--steel);transition:background .4s,width .4s var(--ease)} .story__dots span.is-on{background:var(--link);width:46px} @media(max-width:940px){ .story{height:300vh} .story__sticky{grid-template-columns:1fr;grid-template-rows:minmax(0,.9fr) auto;gap:20px;padding-top:88px} .story__visual{align-self:end} .house{max-width:460px} .story__beats{min-height:340px} .story__dots{left:50%;translate:-50% 0;bottom:24px} } /* ============================================================ 5. HORIZONTAL SCROLL ============================================================ */ .hscroll{height:360vh;position:relative;background:var(--obsidian)} .hscroll__sticky{ position:sticky;top:0;height:100vh;overflow:hidden; display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:28px; padding:clamp(88px,11vh,130px) 0 56px; } .hscroll__head{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gut)} .hscroll__head .h2{font-size:clamp(26px,3.4vw,44px)} .hscroll__track{ display:flex;gap:24px;align-items:stretch;padding:0 var(--gut);width:max-content; will-change:transform; } .card{ position:relative;width:min(440px,82vw);background:var(--carbon); border-radius:var(--r-card);padding:28px;box-shadow:var(--key); display:flex;flex-direction:column;overflow:hidden; transition:box-shadow .5s var(--ease),background .5s var(--ease); } .card::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(184,134,60,.16),transparent 60%); transition:opacity .45s; } .card:hover::before{opacity:1} .card:hover{box-shadow:var(--key-2)} /* Carte « Pack ATB » : seule carte sombre du jeu, dans l'anthracite du logo, pour signaler l'offre haut de gamme. Tout son contenu est repris en clair — sans ça le texte resterait foncé sur foncé. */ .card--combo{ background:linear-gradient(158deg,#2d3845,#1a212a 62%); box-shadow:0 0 0 1px rgba(255,255,255,.10); } .card--combo:hover{box-shadow:0 0 0 1px rgba(210,164,86,.42)} /* .card h3 a la même spécificité et vient plus bas : on double la classe. */ .card.card--combo h3{color:var(--white)} .card--combo .muted{color:rgba(255,255,255,.64)} .card--combo .card__rank{color:rgba(255,255,255,.10)} .card--combo .specs{border-top-color:rgba(255,255,255,.15)} .card--combo .specs div{border-bottom-color:rgba(255,255,255,.15)} .card--combo .specs dt{color:rgba(255,255,255,.58)} .card--combo .specs dd{color:var(--white)} .card--combo .link{color:var(--stage-link)} .card--combo .card__art{ background:#151b22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } .card--end{width:min(360px,82vw);justify-content:center;background:var(--obsidian)} .card--end h3{font-size:32px;margin-bottom:12px} .card--end .pill{align-self:flex-start;margin-top:28px} .card--end .link{margin-top:18px;padding-top:0} .card__rank{ position:absolute;top:22px;right:26px; font-family:var(--sf-display);font-weight:600;font-size:48px;letter-spacing:-.24px; color:rgba(29,29,31,.09);line-height:1; } .card h3{ font-family:var(--sf-display);font-weight:600;font-size:28px;line-height:1.08;letter-spacing:.196px; margin:0 0 4px;color:var(--porcelain); } .card .muted{flex:none;max-width:40ch} .card__art{ height:150px;border-radius:20px;margin-bottom:22px;background:var(--obsidian); position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } .card__art::after{ content:"";position:absolute;inset:0; background-repeat:no-repeat;background-position:center;background-size:62% auto; transition:transform .8s var(--ease-out),filter .8s; } .card:hover .card__art::after{transform:scale(1.09)} /* chaque produit porte la teinte de sa famille */ .card__art--pac{background:var(--sky-1)} .card__art--collectif{background:var(--mint-1)} .card__art--solaire{background:var(--sand-1)} .card__art--pac::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Crect x='14' y='22' width='172' height='96' rx='16' fill='%23191a1e' stroke='rgba(255,255,255,.16)'/%3E%3Ccircle cx='74' cy='70' r='40' fill='%2307080b' stroke='rgba(255,255,255,.12)'/%3E%3Cg stroke='%23d2a456' stroke-width='2' fill='none'%3E%3Ccircle cx='74' cy='70' r='22'/%3E%3Ccircle cx='74' cy='70' r='33'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,.2)'%3E%3Cpath d='M132 42h40M132 56h40M132 70h40M132 84h40M132 98h40'/%3E%3C/g%3E%3C/svg%3E"); } .card__art--collectif::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Crect x='56' y='26' width='88' height='104' rx='10' fill='%23191a1e' stroke='rgba(255,255,255,.14)'/%3E%3Cg fill='%23d2a456' opacity='.5'%3E%3Crect x='68' y='40' width='22' height='16' rx='3'/%3E%3Crect x='110' y='40' width='22' height='16' rx='3'/%3E%3Crect x='68' y='66' width='22' height='16' rx='3'/%3E%3Crect x='110' y='66' width='22' height='16' rx='3'/%3E%3Crect x='68' y='92' width='22' height='16' rx='3'/%3E%3Crect x='110' y='92' width='22' height='16' rx='3'/%3E%3C/g%3E%3Cg fill='%232a2a30' stroke='rgba(255,255,255,.16)'%3E%3Crect x='46' y='8' width='34' height='16' rx='5'/%3E%3Crect x='86' y='8' width='34' height='16' rx='5'/%3E%3Crect x='126' y='8' width='34' height='16' rx='5'/%3E%3C/g%3E%3C/svg%3E"); } .card__art--solaire::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Crect x='18' y='34' width='118' height='78' rx='12' fill='%232a2a30'/%3E%3Crect x='26' y='42' width='102' height='62' rx='7' fill='%23070b12'/%3E%3Cg stroke='%23a9641f' stroke-width='3' opacity='.8'%3E%3Cpath d='M34 54h86M34 66h86M34 78h86M34 90h86'/%3E%3C/g%3E%3Ccircle cx='168' cy='40' r='14' fill='%23ffd500' opacity='.8'/%3E%3Crect x='150' y='64' width='34' height='52' rx='16' fill='%232a2a30' stroke='rgba(255,255,255,.14)'/%3E%3Crect x='156' y='88' width='22' height='24' rx='11' fill='%23a9641f' opacity='.6'/%3E%3C/svg%3E"); } .card__art--combo::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Crect x='12' y='52' width='84' height='60' rx='12' fill='%23232c35' stroke='rgba(255,255,255,.18)'/%3E%3Ccircle cx='46' cy='82' r='22' fill='%23141a21'/%3E%3Ccircle cx='46' cy='82' r='13' fill='none' stroke='%23d2a456' stroke-width='2'/%3E%3Crect x='104' y='28' width='84' height='54' rx='10' fill='%23232c35' stroke='rgba(255,255,255,.18)'/%3E%3Crect x='110' y='34' width='72' height='42' rx='6' fill='%23141a21'/%3E%3Cg stroke='%23d2a456' stroke-width='2.4' opacity='.85'%3E%3Cpath d='M116 44h60M116 54h60M116 64h60'/%3E%3C/g%3E%3Cpath d='M100 100h64' stroke='%23d2a456' stroke-width='3' stroke-dasharray='6 6'/%3E%3C/svg%3E"); } .specs{display:grid;gap:0;margin:22px 0 0;border-top:1px solid var(--steel)} .specs div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--steel)} .specs dt{color:var(--ash);font-size:14px;letter-spacing:-.224px;margin:0} .specs dd{margin:0;font-size:14px;font-weight:600;letter-spacing:-.224px;color:var(--porcelain)} .card .link{margin-top:auto;padding-top:20px} .hscroll__rail{ max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gut); } .hscroll__rail span{display:block;height:2px;background:var(--steel);position:relative;border-radius:2px} .hscroll__rail span::after{ content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,0%); background:var(--link);border-radius:2px; } @media(max-width:860px){ .hscroll{height:auto} .hscroll__sticky{position:static;height:auto;padding-bottom:0} .hscroll__track{ width:auto;transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:24px;-webkit-overflow-scrolling:touch; } .hscroll__track .card{scroll-snap-align:center;flex:none} .hscroll__rail{display:none} } /* ============================================================ 7. SOLAIRE ============================================================ */ .solar{padding:clamp(90px,13vw,160px) 0;background:var(--grad-sand);overflow:hidden} .solar__scene{ position:relative;margin:clamp(48px,7vw,88px) auto 0;max-width:900px; background:var(--carbon);border-radius:var(--r-card); padding:clamp(32px,5vw,56px);box-shadow:var(--key); } .sun{position:absolute;top:-36px;left:6%;width:120px;height:120px;pointer-events:none} .sun__core{ position:absolute;inset:28px;border-radius:50%; background:radial-gradient(circle,#fff 0%,#ffd500 42%,rgba(255,213,0,.1) 72%,transparent 78%); animation:sunPulse 4.5s ease-in-out infinite; } .sun__rays{ position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,rgba(255,213,0,.5) 0 2deg,transparent 2deg 30deg); mask-image:radial-gradient(circle,transparent 34%,#000 38%,#000 62%,transparent 66%); -webkit-mask-image:radial-gradient(circle,transparent 34%,#000 38%,#000 62%,transparent 66%); animation:spin 22s linear infinite; } @keyframes sunPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}} .panel{width:100%;height:auto} .glare{animation:glare 5.5s ease-in-out infinite} @keyframes glare{0%{transform:skewX(-22deg) translateX(0)}55%,100%{transform:skewX(-22deg) translateX(760px)}} .loopflow{animation:dash 1.6s linear infinite} .loopflow--back{animation-duration:2.4s;animation-direction:reverse} .tankfill{transform-origin:bottom;transform:scaleY(0);transition:transform 2.4s var(--ease-out) .4s} .solar__scene.is-in .tankfill{transform:scaleY(1)} .thermo{ position:absolute;right:clamp(24px,4vw,44px);bottom:clamp(24px,4vw,40px); display:grid;gap:8px;justify-items:end; } .thermo__val{ font-family:var(--sf-display);font-weight:600;font-size:28px;line-height:1;letter-spacing:.196px; color:var(--porcelain);font-variant-numeric:tabular-nums; } .thermo__bar{display:block;width:140px;height:4px;border-radius:2px;background:var(--steel);overflow:hidden} .thermo__bar i{ display:block;height:100%;width:0;border-radius:2px; background:linear-gradient(90deg,var(--link),var(--yellow),var(--copper)); transition:width 2s var(--ease-out) .5s; } .solar__scene.is-in .thermo__bar i{width:82%} .thermo__cap{font-size:12px;letter-spacing:-.12px;color:var(--ash)} @media(max-width:700px){.thermo{position:static;justify-items:start;margin-top:28px}.sun{left:auto;right:12px;top:-28px;width:92px;height:92px}} /* ============================================================ 8. AIDES PANEL ============================================================ */ .panel{ background:var(--carbon);border-radius:var(--r-card); padding:clamp(28px,4vw,52px); } .panel__grid{display:grid;gap:20px;grid-template-columns:1fr 1fr} .aid{ position:relative;background:var(--obsidian);border-radius:var(--r-card); padding:30px 28px 34px;box-shadow:var(--key);overflow:hidden; transition:box-shadow .5s var(--ease); } .aid::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(184,134,60,.13),transparent 62%); transition:opacity .45s; } .aid:hover::before{opacity:1} .aid:hover{box-shadow:0 0 0 1px rgba(110,110,115,.9)} .aid__top{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-bottom:22px} .aid h3{ font-family:var(--sf-display);font-weight:600;font-size:32px;line-height:1.13;letter-spacing:.128px; margin:0;color:var(--porcelain); } .aid .stat{margin-bottom:4px} .brackets{list-style:none;margin:26px 0 0;padding:0;display:grid;border-top:1px solid var(--steel)} .brackets li{ display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--steel); font-size:14px;letter-spacing:-.224px;color:var(--ash); transition:color .3s var(--ease),padding-left .4s var(--ease); } .brackets li:hover{color:var(--porcelain);padding-left:6px} .brackets b{margin-left:auto;color:var(--porcelain);font-weight:600;font-variant-numeric:tabular-nums} .aid-extra{grid-column:1/-1;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .minitile{ position:relative;background:var(--obsidian);border-radius:var(--r-card);padding:24px 22px 26px; box-shadow:var(--key);overflow:hidden;transition:box-shadow .5s,transform .5s var(--ease-out); } .minitile::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(184,134,60,.12),transparent 62%); transition:opacity .4s; } .minitile:hover::before{opacity:1} .minitile:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(110,110,115,.9)} .minitile h4{ font-family:var(--sf-display);font-weight:600;font-size:19px;line-height:1.21;letter-spacing:.228px; margin:0;color:var(--porcelain); } @media(max-width:860px){.panel__grid{grid-template-columns:1fr}} /* ============================================================ 9. SIMULATEUR ============================================================ */ .sim{ display:grid;grid-template-columns:1.08fr .92fr;gap:20px;align-items:start; } .sim__form{background:var(--obsidian);border-radius:var(--r-card);padding:clamp(26px,3.4vw,40px);box-shadow:var(--key)} .field{border:0;margin:0 0 34px;padding:0} .field:last-child{margin-bottom:0} .field legend{ font-size:14px;font-weight:600;letter-spacing:-.224px;color:var(--ash); margin-bottom:16px;padding:0; } .field legend b{color:var(--link);font-variant-numeric:tabular-nums} .choices{display:grid;gap:10px;grid-template-columns:1fr 1fr} .choices--3{grid-template-columns:repeat(3,1fr)} .choices--4{grid-template-columns:repeat(4,1fr)} .choice{ position:relative;text-align:left;cursor:pointer; background:var(--white);border:1px solid var(--steel);color:var(--porcelain); border-radius:18px;padding:15px 18px;display:grid;gap:4px; font-size:15px;letter-spacing:-.3px; transition:border-color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease-out),box-shadow .3s; } .choice span{font-size:12px;letter-spacing:-.12px;color:var(--ash);transition:color .3s} .choice:hover{background:var(--carbon);border-color:var(--slate);transform:translateY(-2px)} .choice.is-on{ border-color:var(--blue);background:rgba(35,44,53,.06); box-shadow:0 0 0 1px var(--blue); } .choice.is-on span{color:var(--link)} .choice--sm{ display:flex;align-items:center;gap:8px;justify-content:center; border-radius:var(--r-pill);padding:12px 10px;font-size:14px; } .choice--profil{padding:14px 16px} .choice--profil b{display:flex;align-items:center;gap:8px;font-weight:600} .choice--profil span{font-variant-numeric:tabular-nums} .stepper{display:flex;align-items:center;gap:16px} .stepper__btn{ width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer; background:var(--white);border:1px solid var(--steel);color:var(--porcelain); font-size:19px;line-height:1; transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out); } .stepper__btn:hover:not(:disabled){border-color:var(--blue);color:var(--link)} .stepper__btn:active:not(:disabled){transform:scale(.92)} .stepper__btn:disabled{opacity:.35;cursor:not-allowed} .stepper__val{ margin:0;font-size:17px;letter-spacing:-.374px;color:var(--porcelain); font-variant-numeric:tabular-nums; } .stepper__val b{font-family:var(--sf-display);font-weight:600;font-size:22px} .hint{font-size:12px;letter-spacing:-.12px;color:var(--slate);margin:14px 0 0;min-height:1.4em;transition:opacity .3s} @media(max-width:620px){.choices,.choices--3,.choices--4{grid-template-columns:1fr 1fr}} .slider{ -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px; background:linear-gradient(90deg,var(--blue) var(--fill,35%),var(--steel) var(--fill,35%)); outline:none;cursor:pointer; } .slider::-webkit-slider-thumb{ -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff; box-shadow:0 0 0 1px var(--slate);border:0;cursor:grab; transition:transform .25s var(--ease),box-shadow .25s; } .slider::-webkit-slider-thumb:hover{transform:scale(1.14);box-shadow:0 0 0 1px var(--blue),0 0 0 8px rgba(35,44,53,.14)} .slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--slate);border:0;cursor:grab} .slider__scale{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--slate)} .sim__out{ background:linear-gradient(170deg,#15161a,#0a0a0c 62%); border-radius:var(--r-card);padding:clamp(26px,3.4vw,40px); position:sticky;top:120px;color:var(--on-stage); } .sim__kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stage-link);margin:0 0 14px} .sim__total{ font-family:var(--sf-display);font-weight:600;font-size:clamp(52px,7vw,80px);line-height:1; letter-spacing:-1.2px;margin:0;color:var(--white);font-variant-numeric:tabular-nums; } .sim__total em{font-style:normal;font-size:.44em;color:var(--stage-link);margin-left:6px} .sim__totalcap{font-size:14px;letter-spacing:-.224px;color:var(--on-stage-dim);margin:10px 0 28px} .sim__lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--stage-line)} .sim__lines li{ display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--stage-line); font-size:14px;letter-spacing:-.224px;color:var(--on-stage-dim); } .sim__lines b{color:var(--on-stage);font-variant-numeric:tabular-nums;font-weight:600} .sim__lines .is-sum{color:var(--on-stage);font-weight:600} .sim__lines .is-sum b{color:var(--stage-link);font-size:17px} .sim__bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin:26px 0 12px} .sim__bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--stage-link));transition:width .9s var(--ease-out)} .sim__note{font-size:12px;letter-spacing:-.12px;color:var(--on-stage-dim);margin:0 0 24px} .sim__note b{color:var(--on-stage)} @media(max-width:940px){.sim{grid-template-columns:1fr}.sim__out{position:static}} /* ============================================================ 10. TIMELINE ============================================================ */ .timeline{position:relative;padding-left:clamp(36px,6vw,80px)} .timeline__line{position:absolute;left:0;top:10px;bottom:10px;width:4px;height:auto} .timeline__draw{stroke-dasharray:1000;stroke-dashoffset:1000} .steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,5vw,64px)} .step{position:relative} .step::before{ content:"";position:absolute;left:calc(clamp(36px,6vw,80px) * -1);top:12px; width:11px;height:11px;border-radius:50%;background:var(--carbon); box-shadow:0 0 0 1px var(--steel);translate:-3.5px 0; transition:background .5s var(--ease),box-shadow .5s var(--ease); } .step.is-in::before{background:var(--link);box-shadow:0 0 0 4px rgba(184,134,60,.2)} .step h3{ font-family:var(--sf-display);font-weight:600;font-size:clamp(21px,2.4vw,32px);line-height:1.13; letter-spacing:.128px;margin:10px 0 0;color:var(--porcelain); } .step .muted{font-size:17px;line-height:1.47;letter-spacing:-.374px;max-width:64ch;margin-top:12px} .step__num{ font-family:var(--sf-display);font-weight:600;font-size:14px;letter-spacing:.1em;color:var(--link); } /* ============================================================ 11. PALE COMPARISON ============================================================ */ .pale{background:var(--carbon);color:var(--porcelain);padding:clamp(90px,13vw,160px) 0} .pale .lead{color:var(--ash)} .compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.6vw,32px);align-items:center} .pcard{ background:var(--white);border-radius:var(--r-card);padding:clamp(26px,3vw,36px); box-shadow:var(--key); transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s; } .pcard--after{box-shadow:0 0 0 1px var(--blue)} .pcard__tag{ font-size:12px;font-weight:600;letter-spacing:-.12px;color:var(--ash);margin:0 0 18px; text-transform:uppercase; } .pcard__tag--on{color:var(--cobalt)} .pcard h3{ font-family:var(--sf-display);font-weight:600;font-size:clamp(21px,2.2vw,28px);letter-spacing:.196px; margin:0;color:var(--porcelain); } .pcard__big{ font-family:var(--sf-display);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1; letter-spacing:-1px;margin:18px 0 26px;color:var(--porcelain);font-variant-numeric:tabular-nums; } .pcard__big em{font-style:normal;font-size:.34em;color:var(--ash);letter-spacing:-.2px} .pcard--after .pcard__big{color:var(--cobalt)} .pcard dl{margin:0;border-top:1px solid rgba(0,0,0,.1)} .pcard dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08)} .pcard dt{color:var(--ash);font-size:14px;letter-spacing:-.224px;margin:0} .pcard dd{margin:0;font-size:14px;font-weight:600;letter-spacing:-.224px} .pcard__aid{ margin:22px 0 0;font-size:12px;line-height:1.5;letter-spacing:-.12px;color:var(--ash); background:rgba(0,102,204,.07);border-radius:14px;padding:14px 16px; } .pcard__aid b{color:var(--cobalt)} .compare__arrow{width:clamp(60px,8vw,120px)} .compare__arrow svg{width:100%;height:auto} .arrowdraw{stroke-dasharray:94;stroke-dashoffset:94} @media(max-width:860px){ .compare{grid-template-columns:1fr} .compare__arrow{justify-self:center;rotate:90deg;width:70px} } /* ============================================================ 13. FAQ ============================================================ */ .acc{border-top:1px solid var(--steel)} .acc__item{border-bottom:1px solid var(--steel)} .acc__item summary{ list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative; font-family:var(--sf-display);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.3; letter-spacing:.231px;color:var(--porcelain); transition:color .3s var(--ease); } .acc__item summary::-webkit-details-marker{display:none} .acc__item summary:hover{color:var(--link)} .acc__item summary::after{ content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;translate:0 -50%; background: linear-gradient(var(--link),var(--link)) center/14px 1.6px no-repeat, linear-gradient(var(--link),var(--link)) center/1.6px 14px no-repeat; transition:transform .4s var(--ease),opacity .3s; } .acc__item[open] summary::after{transform:rotate(90deg);background-size:14px 1.6px,0 0} .acc__body{overflow:hidden} .acc__body p{ margin:0 0 28px;max-width:72ch;font-size:17px;line-height:1.52;letter-spacing:-.374px;color:var(--ash); } .acc__item[open] .acc__body{animation:accIn .5s var(--ease-out)} @keyframes accIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} /* ============================================================ 14. CTA + FORM ============================================================ */ .cta{position:relative;padding:clamp(90px,13vw,160px) 0;background:var(--grad-sky);overflow:hidden} .cta__bloom{ position:absolute;top:-10%;left:50%;width:min(1000px,120vw);aspect-ratio:1;translate:-50% 0; background:radial-gradient(circle,rgba(184,134,60,.18),transparent 62%);pointer-events:none; animation:breathe 10s ease-in-out infinite; } .form{ position:relative;margin-top:clamp(40px,5vw,56px); background:var(--carbon);border-radius:var(--r-card);padding:clamp(28px,4vw,48px); display:grid;gap:14px;box-shadow:var(--key); } .form__row{display:grid;gap:14px;grid-template-columns:1fr 1fr} @media(max-width:620px){.form__row{grid-template-columns:1fr}} .inp{position:relative} .inp input,.inp select,.inp textarea{ width:100%;background:var(--white);border:1px solid var(--steel); color:var(--porcelain);font-family:var(--sf-text);font-size:17px;letter-spacing:-.374px; padding:22px 24px 10px;border-radius:var(--r-input); transition:border-color .3s var(--ease),background .3s,box-shadow .3s; appearance:none; } .inp textarea{border-radius:24px;resize:vertical;min-height:96px} .inp label{ position:absolute;left:25px;top:18px;pointer-events:none; font-size:17px;letter-spacing:-.374px;color:var(--ash); transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s; transform-origin:left top; } .inp input:focus,.inp select:focus,.inp textarea:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:var(--white); } .inp input:focus + label,.inp input:not(:placeholder-shown) + label, .inp textarea:focus + label,.inp textarea:not(:placeholder-shown) + label, .inp select:focus + label,.inp select:valid + label{ transform:translateY(-10px) scale(.72);color:var(--link); } .inp--select::after{ content:"";position:absolute;right:26px;top:50%;width:9px;height:9px; border-right:1.6px solid var(--ash);border-bottom:1.6px solid var(--ash); translate:0 -70%;rotate:45deg;pointer-events:none; } .inp select{cursor:pointer;color:var(--porcelain)} .inp select:invalid{color:transparent} .inp select option{background:var(--carbon);color:var(--porcelain)} .check{display:flex;gap:12px;align-items:flex-start;margin:8px 0 0;cursor:pointer} /* La notice RGPD est hors du