/* ===================================================================== FOLDISK · feuille de style unique Un seul message : un SSD qui a la forme d'un dossier. Deux thèmes complets, sombre et clair, pilotés par [data-theme] sur . ===================================================================== */ /* ---------- Polices auto-hébergées ---------- Fichiers attendus dans /fonts (voir fonts/README.md) : Chillax-Variable.woff2, Switzer-Variable.woff2, MartianMono-Variable.woff2 Tant qu'ils ne sont pas déposés, la pile de secours prend le relais. */ @font-face{ font-family:"Chillax"; src:url("../fonts/Chillax-Variable.woff2") format("woff2-variations"); font-weight:200 700; font-display:swap; font-style:normal; } @font-face{ font-family:"Switzer"; src:url("../fonts/Switzer-Variable.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; font-style:normal; } @font-face{ font-family:"Martian Mono"; src:url("../fonts/MartianMono-Variable.woff2") format("woff2-variations"); font-weight:300 700; font-display:swap; font-style:normal; } /* ===================================================================== JETONS Les deux thèmes exposent exactement les mêmes noms. Aucun composant plus bas ne connaît la couleur qu'il utilise, ce qui garde le switch fiable. --inv-* décrit la section qui inverse le thème dominant : claire quand le site est sombre, sombre quand il est clair. ===================================================================== */ :root{ color-scheme:dark; /* Constantes de marque, identiques dans les deux thèmes */ --blue:#2B6BFF; --blue-d:#0B3DBF; --cyan:#57D9FF; --bg:#06070A; --bg-2:#0B0E14; --surface:#141922; --ink:#F4F6FA; --muted:#8D97A8; --muted-2:#636C7C; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --accent:var(--cyan); --grad-mid:var(--cyan); --grad-end:var(--blue); --trame:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 5px); --ph-bg:#141922; --ph-tint:rgba(43,107,255,.07); --ph-note-ink:var(--cyan); --ph-note-bg:rgba(6,7,10,.72); --ph-note-line:rgba(87,217,255,.28); --glow:rgba(43,107,255,.32); --glow-2:rgba(43,107,255,.11); --glow-blur:12px; --obj-shadow:0 26px 30px rgba(0,0,0,.75); --obj-glow:0 0 46px rgba(43,107,255,.4); --floor:rgba(43,107,255,.5); --scrim:6,7,10; --btn-ink:#fff; --inv-bg:#ECEEF2; --inv-ink:#0B0E14; --inv-muted:#5A6270; --inv-line:rgba(11,14,20,.16); --inv-trame:repeating-linear-gradient(180deg,rgba(11,14,20,.045) 0 1px,transparent 1px 5px); --inv-ph:#D6DAE3; --inv-note-ink:#134BD6; --inv-note-bg:rgba(255,255,255,.88); --inv-note-line:rgba(19,75,214,.3); } :root[data-theme="light"]{ color-scheme:light; --bg:#F4F5F8; --bg-2:#EAECF1; --surface:#FFFFFF; --ink:#080B12; --muted:#59616F; --muted-2:#8891A0; --line:rgba(8,11,18,.1); --line-2:rgba(8,11,18,.2); --accent:#1552E0; --grad-mid:var(--blue); --grad-end:var(--blue-d); --trame:repeating-linear-gradient(180deg,rgba(8,11,18,.04) 0 1px,transparent 1px 5px); --ph-bg:#DFE2E9; --ph-tint:rgba(43,107,255,.09); --ph-note-ink:#134BD6; --ph-note-bg:rgba(255,255,255,.88); --ph-note-line:rgba(19,75,214,.3); --glow:rgba(43,107,255,.17); --glow-2:rgba(43,107,255,.05); /* Sur fond clair, un dégradé radial large fait apparaître des anneaux de quantification. Un flou franc les efface sans coûter de repaint. */ --glow-blur:52px; --obj-shadow:0 26px 36px rgba(12,26,70,.22); --obj-glow:0 6px 24px rgba(43,107,255,.22); --floor:rgba(43,107,255,.3); --scrim:244,245,248; --btn-ink:#fff; --inv-bg:#0A0D14; --inv-ink:#F4F6FA; --inv-muted:#8D97A8; --inv-line:rgba(255,255,255,.12); --inv-trame:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px); --inv-ph:#171C26; --inv-note-ink:var(--cyan); --inv-note-bg:rgba(6,7,10,.7); --inv-note-line:rgba(87,217,255,.3); } :root{ --f-display:"Chillax","Chillax Fallback",Avenir Next,Segoe UI,system-ui,sans-serif; --f-text:"Switzer","Switzer Fallback",Segoe UI,system-ui,-apple-system,sans-serif; --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Consolas,monospace; /* Le titre se cale sur la largeur ET sur la hauteur d'écran, pour que le bloc d'achat reste toujours au-dessus de la ligne de flottaison. */ --t-hero:clamp(2.7rem,min(10.5vw,8.6svh),6.6rem); --t-2:clamp(1.9rem,5.4vw,3.6rem); --t-body:clamp(1rem,.96rem + .3vw,1.125rem); --pad:clamp(1.25rem,5vw,2.5rem); --sec-y:clamp(5.5rem,13vw,10.5rem); --max:1180px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,p,figure,dl,dd,ul,fieldset{margin:0} fieldset{border:0;padding:0} ul{list-style:none;padding:0} img,svg,video{display:block;max-width:100%} a{color:inherit} button{font:inherit} html{scroll-behavior:smooth;scroll-padding-top:5rem} body{ background:var(--bg); color:var(--ink); font-family:var(--f-text); font-size:var(--t-body); line-height:1.6; font-weight:380; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .45s var(--ease),color .45s var(--ease); } ::selection{background:var(--blue);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;top:1rem;left:1rem;width:auto;height:auto;clip-path:none;z-index:200; background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:999px} /* ---------- Structures ---------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .wrap--narrow{max-width:760px} .sec{position:relative;padding-block:var(--sec-y)} /* ---------- Typo commune ---------- */ .label,.eyebrow{ font-family:var(--f-mono); font-size:.64rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); } .eyebrow{color:var(--muted)} .label{margin-bottom:1.5rem;display:flex;align-items:center;gap:.85rem} .label::before{content:"";width:1.75rem;height:1px;background:var(--line-2)} .t2{ font-family:var(--f-display); font-size:var(--t-2); font-weight:500; line-height:1.04; letter-spacing:-.03em; text-wrap:balance; } .t2 em{font-style:italic;color:var(--accent)} .lead{font-size:clamp(1.1rem,1rem + .8vw,1.4rem);line-height:1.5;color:var(--ink)} .note{ margin-top:clamp(2rem,5vw,3.5rem); max-width:60ch; font-size:.86rem; line-height:1.65; color:var(--muted-2); } .grad{ background:linear-gradient(96deg,var(--ink) 8%,var(--grad-mid) 55%,var(--grad-end) 96%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- Boutons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.8rem 1.4rem; border-radius:999px; background:var(--blue); color:var(--btn-ink); font-family:var(--f-text); font-weight:520; font-size:.95rem; letter-spacing:-.01em; text-decoration:none; position:relative; isolation:isolate; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out); box-shadow:0 10px 30px -12px rgba(43,107,255,.9); } .btn::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 62%); opacity:.8; } .btn--sm{padding:.55rem 1.05rem;font-size:.85rem} .btn--lg{padding:1.05rem 2rem;font-size:1.02rem} .btn--block{display:flex;width:100%} @media (hover:hover){ .btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(43,107,255,.12),0 18px 40px -14px rgba(43,107,255,1)} } .btn:active{transform:translateY(0) scale(.985)} /* ===================================================================== NAV ===================================================================== */ .nav{ position:fixed;inset:0 0 auto;z-index:100; transition:background .4s var(--ease),border-color .4s var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ /* Assez opaque pour rester lisible au-dessus de la section inversée */ background:rgba(var(--scrim),.9); backdrop-filter:saturate(150%) blur(18px); -webkit-backdrop-filter:saturate(150%) blur(18px); border-bottom-color:var(--line); } .nav__in{ max-width:var(--max);margin-inline:auto;padding:.85rem var(--pad); display:flex;align-items:center;gap:.9rem; } .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto} .brand__mark{width:26px;height:auto;overflow:visible} .brand__word{ font-family:var(--f-display); font-weight:600;font-size:1.02rem;letter-spacing:.12em; } .mk__body,.mk__bub path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round} .mk__bub circle{fill:currentColor} .mk__bub{transition:transform .5s var(--ease-out)} @media (hover:hover){ .brand:hover .mk__bub{transform:translate(3px,-4px)} } .nav__links{display:none;gap:1.6rem;margin-right:.7rem;font-size:.9rem;color:var(--muted)} .nav__links a{text-decoration:none;transition:color .25s} .nav__links a:hover{color:var(--ink)} .nav .btn{display:none} @media (min-width:800px){ .nav__links{display:flex} .nav .btn{display:inline-flex} } /* ---------- Sélecteur de langue ---------- */ .lang{ display:flex;align-items:center;gap:.35rem;margin-right:.3rem; font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em; color:var(--muted-2); } .lang a{color:inherit;text-decoration:none;transition:color .25s} .lang a:hover{color:var(--ink)} .lang [aria-current]{color:var(--ink);font-weight:600} .lang__sep{opacity:.4} /* ---------- Bascule de thème ---------- */ .tog{ flex:none; width:52px;height:28px;padding:3px; border:1px solid var(--line-2);border-radius:999px; background:var(--surface); cursor:pointer; display:flex;align-items:center; transition:background .35s var(--ease),border-color .35s var(--ease); } .tog__knob{ width:20px;height:20px;border-radius:50%; background:var(--ink); display:grid;place-items:center; transition:transform .4s var(--ease-out),background .35s var(--ease); } .tog__knob::after{ content:"";width:9px;height:9px;border-radius:50%; background:var(--surface); transform:translateX(-3px); transition:transform .4s var(--ease-out),width .4s var(--ease-out),height .4s var(--ease-out); } :root[data-theme="light"] .tog__knob{transform:translateX(24px);background:var(--blue)} :root[data-theme="light"] .tog__knob::after{width:0;height:0;transform:none} @media (hover:hover){.tog:hover{border-color:var(--blue)}} /* ===================================================================== HERO ===================================================================== */ .hero{ position:relative; min-height:100svh; display:grid;place-items:center; padding:5.5rem 0 3rem; overflow:hidden; text-align:center; } .hero__glow{ position:absolute;left:50%;top:52%;translate:-50% -50%; width:min(150vw,1100px);aspect-ratio:1; background:radial-gradient(circle,var(--glow) 0%,var(--glow-2) 34%,transparent 66%); filter:blur(var(--glow-blur)); animation:breathe 9s var(--ease) infinite; pointer-events:none; } @keyframes breathe{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.06}} .hero__in{position:relative;padding-inline:var(--pad);width:100%;max-width:var(--max);margin-inline:auto} .hero__title{ font-family:var(--f-display); font-size:var(--t-hero); font-weight:500; line-height:.94; letter-spacing:-.045em; margin:1.1rem 0 0; } .hero__sub{ margin:1.6rem auto 0;max-width:38ch; color:var(--muted);font-size:1.02rem;line-height:1.55; } .hero__cta{margin-top:1.9rem;display:flex;flex-direction:column;align-items:center;gap:.9rem} .hero__from{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted-2)} .hero__from b{color:var(--ink);font-weight:500} @media (min-width:800px){ .hero__cta{flex-direction:row;justify-content:center;gap:1.6rem} } /* --- Le produit, rendu vectoriel en attendant la photo --- */ .hero__stage{ position:relative; margin:clamp(1.4rem,4vw,2.4rem) auto 0; width:min(74vw,400px,40svh); perspective:1100px; } .obj{ transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); transition:transform .6s var(--ease-out); } .obj__svg{ width:100%;height:auto; filter:drop-shadow(var(--obj-shadow)) drop-shadow(var(--obj-glow)); } .hero__stage::after{ content:"";position:absolute;left:50%;bottom:-4%;translate:-50% 0; width:64%;height:12px;border-radius:50%; background:radial-gradient(ellipse,var(--floor),transparent 70%); filter:blur(8px); } /* Hero en 3D interactive () */ .hero__stage--3d{ width:min(92vw,560px); margin-top:clamp(.2rem,1vw,.7rem); perspective:none; } .hero__stage--3d::after{display:none} .hero__mv{ display:block; width:100%; height:min(40svh,320px); background:transparent; --poster-color:transparent; --progress-bar-height:0px; } .hero__mv .obj{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); width:60%;max-width:300px;margin:0; } /* ===================================================================== PLACEHOLDERS PHOTO ===================================================================== */ .ph{ position:relative; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,var(--ph-tint),transparent),var(--ph-bg); display:grid;place-items:center; overflow:hidden; } .ph::before{content:"";position:absolute;inset:0;background:var(--trame);opacity:.5} .ph--16x9{aspect-ratio:16/9} .ph--4x5{aspect-ratio:4/5} .ph--1x1{aspect-ratio:1} .ph img{position:relative;width:100%;height:100%;object-fit:cover;display:block} .ph__note{ position:relative; margin:0;padding:.55rem .8rem; max-width:min(90%,34ch); font-family:var(--f-mono); font-size:.575rem; line-height:1.5; letter-spacing:.03em; text-transform:uppercase; color:var(--ph-note-ink); background:var(--ph-note-bg); border:1px solid var(--ph-note-line); border-radius:8px; text-align:center; } .ph__note--hero{margin:.9rem auto 0;max-width:32ch} .notes-hidden .ph__note{display:none} .notes-toggle{ position:fixed;right:.75rem;bottom:.75rem;z-index:120; padding:.4rem .7rem; font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-2);background:rgba(var(--scrim),.86); border:1px solid var(--line);border-radius:999px;cursor:pointer; backdrop-filter:blur(8px); } .notes-toggle:hover{color:var(--ink)} @media (max-width:799px){ .notes-toggle{bottom:4.6rem} } /* ===================================================================== LE CONCEPT ===================================================================== */ .br-d{display:none} @media (min-width:700px){.br-d{display:inline}} .morph{ margin:clamp(2.5rem,7vw,4.5rem) 0; display:grid;gap:1.5rem; align-items:center; grid-template-columns:1fr; } @media (min-width:760px){ .morph{grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,3.5rem)} } .morph__side{margin:0;display:grid;gap:.9rem} .morph__side figcaption{ font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2); } .morph__flat{ aspect-ratio:1; border:1px solid var(--line);border-radius:14px; background:var(--bg-2); display:grid;place-items:center; padding:22%; perspective:900px; } .morph__flat svg{ width:100%;height:auto;color:var(--blue);overflow:visible; transform:rotateY(-38deg) scale(.9); opacity:.55; transition:transform 1.1s var(--ease-out),opacity 1.1s var(--ease-out),color 1.1s var(--ease-out); } .morph.is-in .morph__flat svg{transform:rotateY(0) scale(1);opacity:1;color:var(--accent)} .morph__arrow{display:grid;place-items:center;padding:.5rem 0} .morph__arrow span{ display:block;width:2px;height:38px; background:linear-gradient(180deg,transparent,var(--blue),transparent); } @media (min-width:760px){ .morph__arrow span{width:100%;min-width:56px;height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent)} } .cols{display:grid;gap:1.2rem;max-width:64ch} .cols p:not(.lead){color:var(--muted)} @media (min-width:900px){ .cols{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);max-width:none} } /* ===================================================================== BANDES (le détail, le prix) ===================================================================== */ .sec--band{background:var(--bg-2)} .sec--band::before,.sec--band::after{ content:"";position:absolute;left:0;right:0;height:1px;background:var(--line) } .sec--band::before{top:0} .sec--band::after{bottom:0} .trame{position:absolute;inset:0;background:var(--trame);opacity:.5;pointer-events:none} .sec--band .wrap{position:relative} .detail{margin-top:clamp(2rem,6vw,3.5rem);display:grid;gap:clamp(1.5rem,4vw,3rem)} @media (min-width:900px){.detail{grid-template-columns:1.35fr 1fr;align-items:center}} .facts{display:grid;gap:0;border-top:1px solid var(--line)} .facts li{ display:grid;gap:.15rem; padding:1rem 0;border-bottom:1px solid var(--line); } @media (min-width:520px){.facts li{grid-template-columns:9rem 1fr;gap:1rem;align-items:baseline}} .facts__k{ font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2); } .facts__v{color:var(--ink);font-size:.98rem} /* ===================================================================== SECTION INVERSÉE (galerie) Claire quand le site est sombre, sombre quand il est clair. ===================================================================== */ .sec--inv{background:var(--inv-bg);color:var(--inv-ink)} .sec--inv .label{color:var(--inv-muted)} .sec--inv .label::before{background:var(--inv-line)} .sec--inv .ph{ border-color:var(--inv-line); background:linear-gradient(135deg,var(--ph-tint),transparent),var(--inv-ph); } .sec--inv .ph::before{background:var(--inv-trame)} .sec--inv .ph__note{ color:var(--inv-note-ink);background:var(--inv-note-bg);border-color:var(--inv-note-line); } .gal{margin-top:clamp(2rem,6vw,3.5rem);display:grid;gap:clamp(.8rem,2.5vw,1.4rem)} @media (min-width:820px){ .gal{grid-template-columns:repeat(2,1fr)} .gal__a{grid-column:1/-1} } /* ---------- Galerie « Ailleurs » ---------- */ .life{ margin-top:clamp(2rem,6vw,3.5rem); display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(.7rem,2.2vw,1.1rem); } .life__item{ position:relative;margin:0;aspect-ratio:4/5; border:1px solid var(--line);border-radius:14px;overflow:hidden; background:var(--surface); } .life__item img{display:block;width:100%;height:100%;object-fit:cover} /* ===================================================================== FICHE TECHNIQUE ===================================================================== */ .spec{margin-top:clamp(2rem,6vw,3.5rem);border-top:1px solid var(--line)} .spec>div{ display:grid;gap:.15rem; padding:1.05rem 0; border-bottom:1px solid var(--line); } @media (min-width:620px){ .spec>div{grid-template-columns:minmax(10rem,16rem) 1fr;gap:1.5rem;align-items:baseline} } .spec dt{ font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2); } .spec dd{margin:0;font-size:1rem} /* ===================================================================== COMPARATIF ===================================================================== */ .bars{margin-top:clamp(2.2rem,6vw,3.5rem);display:grid;gap:clamp(1.4rem,4vw,2.2rem)} .bar__head{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; margin-bottom:.6rem; } .bar__head span{font-size:.85rem;color:var(--muted)} .bar__head b{ font-family:var(--f-display);font-size:clamp(1.5rem,4.5vw,2.4rem); font-weight:500;letter-spacing:-.03em;line-height:1; } .bar__track{height:12px;border-radius:99px;background:var(--line);overflow:visible} .bar__fill{height:100%;width:0;border-radius:99px;transition:width 1.25s var(--ease-out)} .bars.is-in .bar__fill{width:var(--w)} .bar--them .bar__fill{background:linear-gradient(90deg,var(--muted-2),var(--muted))} .bar--them b{color:var(--muted)} .bar--us .bar__fill{ background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 22px -2px rgba(43,107,255,.85); } .bar--us b{color:var(--ink)} /* ===================================================================== CONFIGURATEUR ===================================================================== */ .conf{margin-top:clamp(2rem,6vw,3rem)} .conf fieldset{display:grid;gap:.6rem} .opt{display:block;cursor:pointer} .opt input{position:absolute;opacity:0;width:0;height:0} .opt__in{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.05rem 1.25rem; border:1px solid var(--line);border-radius:12px; background:var(--surface); transition:border-color .3s var(--ease),background .3s var(--ease); } @media (hover:hover){.opt:hover .opt__in{border-color:var(--line-2)}} .opt input:checked + .opt__in{ border-color:var(--blue); background:linear-gradient(180deg,rgba(43,107,255,.14),rgba(43,107,255,.05)); box-shadow:0 0 0 1px var(--blue),0 14px 40px -22px rgba(43,107,255,1); } .opt input:focus-visible + .opt__in{outline:2px solid var(--accent);outline-offset:3px} .opt__name{font-family:var(--f-display);font-size:1.15rem;font-weight:500;letter-spacing:-.02em} .opt__sub{ display:block;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2);margin-top:.25rem; } .opt__price{font-family:var(--f-display);font-size:1.15rem;font-weight:500;white-space:nowrap} /* ---------- Carte achat : économie + prix + CTA, un seul bloc ---------- */ .conf__card{ margin-top:1.1rem; padding:1.25rem 1.25rem 1.4rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:grid;gap:1.1rem; } /* ---------- Économie réalisée ---------- */ .save{display:grid;gap:1rem} .save[hidden]{display:none} .save__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap} .save__lbl{ font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:600; } .save__num{ font-family:var(--f-display); font-size:clamp(1.7rem,5.5vw,2.3rem); font-weight:500;letter-spacing:-.035em;line-height:1; font-variant-numeric:tabular-nums; } .save__rows{display:grid;gap:.7rem} .save__row{ display:grid;gap:.3rem .9rem; grid-template-columns:1fr auto; align-items:center; } .save__cap{font-size:.8rem;color:var(--muted)} .save__val{ font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em; color:var(--muted);text-align:right; } .save__track{ grid-column:1/-1; height:7px;border-radius:99px;background:var(--line);overflow:hidden; } .save__track i{ display:block;height:100%;width:var(--w,0);border-radius:99px; background:linear-gradient(90deg,var(--muted-2),var(--muted)); transition:width .75s var(--ease-out); } .save__row--us .save__cap,.save__row--us .save__val{color:var(--ink)} .save__row--us .save__track i{ background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 18px -2px rgba(43,107,255,.8); } @media (min-width:560px){ .save__row{grid-template-columns:11rem 1fr auto} .save__track{grid-column:auto} } .save__none{ text-align:center; font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-2); } .save__none[hidden]{display:none} .conf__foot{ display:grid;gap:.9rem;justify-items:center; padding-top:1.15rem;border-top:1px solid var(--line); } .conf__sum{ font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2); } .conf__legal{max-width:44ch;margin-inline:auto;text-align:center;font-size:.78rem;line-height:1.6;color:var(--muted-2)} .conf__card + .conf__legal{margin-top:1.4rem} .conf__legal + .conf__legal{margin-top:.7rem} /* ===================================================================== FAQ ===================================================================== */ .faq{margin-top:clamp(2rem,6vw,3rem);border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative; font-family:var(--f-display); font-size:clamp(1.02rem,2.6vw,1.25rem); font-weight:500;letter-spacing:-.02em;line-height:1.3; transition:color .25s; } .faq summary::-webkit-details-marker{display:none} .faq summary::after,.faq summary::before{ content:"";position:absolute;right:.4rem;top:50%; width:13px;height:1.5px;background:var(--muted);border-radius:2px; transition:transform .35s var(--ease-out),background .25s; } .faq summary::before{transform:translateY(-50%) rotate(90deg)} .faq summary::after{transform:translateY(-50%)} .faq details[open] summary{color:var(--accent)} .faq details[open] summary::before{transform:translateY(-50%) rotate(0)} .faq details[open] summary::after,.faq details[open] summary::before{background:var(--accent)} .faq__body{padding:0 0 1.4rem;max-width:62ch;color:var(--muted);font-size:.96rem} .faq__body a{color:var(--accent);text-underline-offset:3px} /* ===================================================================== CLOTURE ===================================================================== */ .close{position:relative;overflow:hidden;padding-block:clamp(6rem,16vw,11rem);text-align:center} .close__glow{ position:absolute;left:50%;bottom:-40%;translate:-50% 0; width:min(160vw,1200px);aspect-ratio:1; background:radial-gradient(circle,var(--glow),transparent 62%); filter:blur(var(--glow-blur)); pointer-events:none; } .close .wrap{position:relative;display:grid;gap:2.2rem;justify-items:center} .close .t2{font-size:clamp(2.2rem,7vw,4.6rem)} /* ===================================================================== FOOTER ===================================================================== */ .foot{ border-top:1px solid var(--line); padding:clamp(3rem,8vw,4.5rem) 0 calc(clamp(3rem,8vw,4.5rem) + env(safe-area-inset-bottom)); background:var(--bg-2); } .foot__top{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-bottom:2rem} .brand--foot .brand__mark{width:22px} .foot__claim{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .foot__links{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;font-size:.88rem;color:var(--muted)} .foot__links a{text-decoration:none;transition:color .25s} .foot__links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .foot__fine{margin-top:2.2rem;max-width:70ch;font-size:.72rem;line-height:1.65;color:var(--muted-2)} /* ===================================================================== BARRE D'ACHAT MOBILE ===================================================================== */ .buybar{ position:fixed;left:0;right:0;bottom:0;z-index:110; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom)); background:rgba(var(--scrim),.85); backdrop-filter:saturate(150%) blur(18px); -webkit-backdrop-filter:saturate(150%) blur(18px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .45s var(--ease-out); } .buybar.is-on{transform:translateY(0)} .buybar__price{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:var(--muted-2)} .buybar__price b{color:var(--ink);font-weight:500} @media (min-width:800px){.buybar{display:none}} /* ===================================================================== REVEALS ===================================================================== */ .reveal{opacity:0;transform:translateY(14px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} /* ===================================================================== PAGES LEGALES ===================================================================== */ .legal{padding:9rem 0 6rem} .legal h1{font-family:var(--f-display);font-size:clamp(2rem,6vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.05} .legal h2{font-family:var(--f-display);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin:2.6rem 0 .7rem} .legal p,.legal li{color:var(--muted);font-size:.96rem;margin-bottom:.8rem} .legal ul{list-style:disc;padding-left:1.2rem} .legal a{color:var(--accent)} .legal .todo{ display:inline-block;padding:.05rem .45rem;border-radius:5px; font-family:var(--f-mono);font-size:.72em;letter-spacing:.06em; color:#B07800;background:rgba(255,176,0,.12);border:1px solid rgba(255,176,0,.35); } :root:not([data-theme="light"]) .legal .todo{color:#FFD166} .legal .back{ display:inline-block;margin-top:3rem;font-family:var(--f-mono); font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2); text-decoration:none; } .legal .back:hover{color:var(--ink)} /* ===================================================================== ACCESSIBILITE : mouvement réduit ===================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{opacity:1;transform:none} .morph__flat svg{transform:none;opacity:1;color:var(--accent)} .bars .bar__fill{width:var(--w)} }