/* Typo self-host — Clash Display (display) + Satoshi (corps), WOFF2, font-display:swap */ :root{ --ink:#0E0E0E; --bone:#F5F3EE; --volt:#C8FF00; --ash:#6B6B6B; --red:#E4002B; --line:#e6e3db; --ink2:#181818; --mute:#b9b6ae; --ease:cubic-bezier(.2,.7,.2,1); --gut:clamp(16px,4vw,24px); /* gouttière fluide 8-grid : 16px petit tel → 24px grand écran */ --display:'Clash Display','Arial Narrow',sans-serif; --body:'Satoshi',system-ui,'Segoe UI',Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} /* garde-fou overflow horizontal SANS casser position:sticky (clip ≠ scroll container) */ html{overflow-x:clip} @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}} body{background:var(--bone);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased; padding-bottom:calc(118px + env(safe-area-inset-bottom))} @media(min-width:961px){body{padding-bottom:0}} button{font-family:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:4px} .wm{font-family:var(--display);font-size:18px;text-transform:lowercase;transform:skewX(-8deg);letter-spacing:.02em; color:var(--bone);text-decoration:none;display:inline-block} .wm .s{color:var(--volt)} main.wrap{max-width:1240px;margin:0 auto;padding:20px var(--gut) 70px} /* ===== langage gsec partagé ===== */ .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-weight:700;margin-bottom:6px} .tag{background:var(--volt);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; border-radius:6px;padding:3px 8px;transform:skewX(-8deg);display:inline-block} .gsec{margin-top:64px} .gsec h2{font-family:var(--display);font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:1.05} .gsec h2 .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)} .gsec .sub{font-size:14.5px;color:var(--ash);margin-top:6px;max-width:62ch} .gsec .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap} .seeall{font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--volt); text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;transition:background .15s var(--ease); min-height:44px;display:inline-flex;align-items:center} .seeall:hover{background:var(--volt)} /* ===== révélation scroll-driven NATIVE (compositor-only, INP-safe) ===== Progressive enhancement : sans support, tout est visible d'emblée. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .sd{animation:sdin linear both;animation-timeline:view();animation-range:entry 5% entry 42%} .sd2{animation:sdin linear both;animation-timeline:view();animation-range:entry 12% entry 55%} @keyframes sdin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} } } /* ===== HERO SPLIT haut-contraste : panneau ink (typo) · panneau bone (produit) ===== */ /* full-bleed : fond bord-à-bord, contenu aligné sur le container 1240 via --bleed (best-practice 2026) */ .hero-h{--bleed:clamp(22px,5vw,88px); display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);margin-top:16px;align-items:stretch; width:100vw;margin-inline:calc(50% - 50vw)} @media(max-width:960px){.hero-h{grid-template-columns:1fr;gap:14px}} /* V4 — couture diagonale : ink peint par ::before clippé en biais, keyline volt en ::after, la photo remplit l'angle */ .hpanel{background:transparent;color:var(--bone);z-index:2;margin-right:-88px; padding:clamp(32px,4.4vw,64px) clamp(80px,10vw,130px) clamp(32px,4.4vw,64px) var(--bleed); display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;min-height:480px} .hpanel::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1; clip-path:polygon(0 0,100% 0,calc(100% - 88px) 100%,0 100%)} .hpanel::after{content:"";position:absolute;inset:0;background:var(--volt);pointer-events:none; clip-path:polygon(calc(100% - 5px) 0,100% 0,calc(100% - 88px) 100%,calc(100% - 93px) 100%)} @media(max-width:960px){ /* mobile empilé : le biais rend mal en stack → ink plein rectangle + fine keyline volt entre les blocs */ .hpanel{min-height:0;padding:30px 24px 28px;margin-right:0;margin-bottom:0} .hpanel::before{clip-path:none} .hpanel::after{clip-path:none;inset:auto 0 0 0;height:4px} .hshot .him img{padding:6%} } .hpanel .kicker{color:var(--mute)} /* clin d'œil visiteur qui revient (JS localStorage) */ .hwb{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-bottom:14px; background:var(--ink2);border:1px solid #333;border-radius:99px;padding:6px 14px 6px 8px; font-size:12.5px;font-weight:600;color:var(--bone);animation:wbin .4s var(--ease) .2s both} /* espace réservé même caché (visibility, pas display:none) : le reveal JS ne pousse pas le titre = zéro CLS */ .hwb[hidden]{display:inline-flex;visibility:hidden} .hwb .d{width:8px;height:8px;border-radius:2px;background:var(--volt);transform:skewX(-8deg);flex:none} @keyframes wbin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* typo cinétique : chaque ligne monte de son clip — 300–450ms, easing unique, une fois au load */ .h1{font-family:var(--display);font-size:clamp(40px,5.8vw,76px);line-height:.96;text-transform:uppercase; letter-spacing:.005em;margin-top:10px} .h1 .row{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .h1 .kin{display:inline-block;animation:kinup .42s var(--ease) both} .h1 .row:nth-child(2) .kin{animation-delay:.07s} .h1 .row:nth-child(3) .kin{animation-delay:.14s} @keyframes kinup{from{opacity:0;transform:translateY(104%)}to{opacity:1;transform:none}} .h1 .vv{color:transparent;-webkit-text-stroke:1.5px var(--volt)} .hsub{font-size:16px;color:#cfccc2;margin-top:16px;max-width:46ch} .hsub b{color:var(--bone)} .hactions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px} .hcta{display:inline-flex;align-items:center;gap:10px;background:var(--volt);color:var(--ink); font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.04em; min-height:52px;padding:0 26px;border-radius:12px;text-decoration:none; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .hcta:hover{transform:translateY(-2px);box-shadow:0 10px 24px #c8ff0040} .hcta:active{transform:scale(.98)} .hcta .arr{display:inline-block;transition:transform .2s var(--ease)} .hcta:hover .arr{transform:translateX(4px)} .hlink{color:var(--bone);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--volt);text-decoration-thickness:2px;transition:color .15s var(--ease); min-height:44px;display:inline-flex;align-items:center} .hlink:hover{color:var(--volt)} /* confiance visible AVANT le scroll */ .hmini{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid #2a2a2a; font-size:12.5px;font-weight:600;color:var(--mute)} .hmini li{display:flex;align-items:center;gap:7px} .hmini .chk{width:16px;height:16px;border-radius:50%;background:var(--volt);color:var(--ink); display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex:none} /* MOBILE-FIRST hero : CTA pleine largeur dans le flux du pouce, lien secondaire dessous, zéro overflow */ @media(max-width:960px){ .h1{font-size:clamp(38px,11vw,60px)} .hactions{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px} .hcta{justify-content:center;font-size:18px;min-height:54px;width:100%} .hlink{justify-content:center;text-align:center;padding:6px 0} .hmini{gap:12px 16px;margin-top:20px;padding-top:14px} } /* panneau produit (LCP) */ /* Hero tournant — les diapositives sont EMPILÉES en grille (même cellule), pas en absolu : la pile garde ainsi la hauteur de la plus grande, donc aucun saut de mise en page quand on passe d'une paire à l'autre (CLS = 0). Les diapositives masquées gardent leur place mais sortent du calque interactif (visibility + pointer-events), et le JS leur pose aria-hidden/tabindex=-1 : on ne tabule pas dans un lien qu'on ne voit pas. */ .hstack{display:grid;position:relative} .hstack > .hshot{grid-area:1/1} .hstack[data-rotate] > .hshot{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .5s var(--ease),visibility .5s} .hstack[data-rotate] > .hshot.is-on{opacity:1;visibility:visible;pointer-events:auto} /* Sans JS, la 1re diapositive doit rester visible : c'est elle qui porte le LCP. */ .no-js .hstack[data-rotate] > .hshot:first-child{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){ .hstack[data-rotate] > .hshot{transition:none} } .hshot{position:relative;background:#fff;overflow:hidden;display:flex;flex-direction:column;z-index:1} .hshot .him{position:relative;flex:1;min-height:340px;background:#fff} @media(max-width:960px){.hshot .him{min-height:250px}} .hshot .him img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:6% 6% 6% 14%; transition:transform .3s var(--ease)} .hshot:hover .him img{transform:scale(1.05)} .hshot .tag{position:absolute;top:18px;left:18px;font-size:12px;padding:5px 12px;z-index:2} .hshot .hnew{position:absolute;top:18px;right:max(18px,var(--bleed));z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--ash);border:1px solid var(--line);border-radius:6px;padding:4px 9px;background:#fffffff2} .hbuy{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; border-top:1.5px solid var(--line);background:var(--bone);padding:16px 20px;padding-right:max(20px,var(--bleed));position:relative;z-index:2} .hbuy .n{min-width:0} .hbuy .pb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700} .hbuy .pn{font-family:var(--display);font-size:19px;text-transform:uppercase;line-height:1.1;color:var(--ink)} .hbuy .pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .hbuy .now{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)} .hbuy .was{color:var(--red);text-decoration:line-through;font-size:14px;font-weight:600} .hbuy .hsave{align-self:center;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap; background:linear-gradient(transparent 55%,var(--volt) 55%);padding:0 3px;border-radius:1px} .hbuy .go{font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--ink);white-space:nowrap} .hbuy .go:hover{background:var(--volt)} /* ===== TRUST STRIP — 4 piliers ===== */ /* trust strip = ticker numérique (bande ink façon bandeau boursier : garanties + tokens chiffrés) */ /* full-bleed : bande ticker bord-à-bord (élément visuel, pas de texte à lire) */ .t1{background:var(--ink);overflow:hidden;min-height:92px;display:flex;align-items:center;margin-top:24px; width:100vw;margin-inline:calc(50% - 50vw); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .t1-track{display:flex;width:max-content;animation:t1scroll 32s linear infinite} .t1:hover .t1-track,.t1:focus-within .t1-track{animation-play-state:paused} @keyframes t1scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .t1-group{display:flex;align-items:center;flex:none;padding:20px 0} .t1-pill{display:inline-flex;align-items:center;gap:12px;padding:0 26px;white-space:nowrap} .t1-chip{width:38px;height:38px;flex:none;border-radius:10px;background:var(--volt);color:var(--ink);display:grid;place-items:center;transform:skewX(-8deg)} .t1-chip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:skewX(8deg)} .t1-pill b{font-family:var(--display);font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--bone);display:block;line-height:1.15} .t1-pill small{display:block;font-size:12.5px;font-weight:500;color:#cfccc2} .t1-slash{flex:none;width:3px;height:30px;border-radius:2px;background:var(--volt);transform:skewX(-8deg)} .t1-stat{display:inline-flex;flex-direction:column;justify-content:center;padding:0 26px;white-space:nowrap;line-height:1} .t1-stat .num{font-family:var(--display);font-size:30px;color:var(--bone);line-height:1;letter-spacing:.01em} .t1-stat .num .u{color:var(--volt)} .t1-stat .slab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9c988f;margin-top:6px;font-weight:700} @media(prefers-reduced-motion:reduce){ .t1-track{width:auto;flex-wrap:wrap} .t1-group{flex-wrap:wrap;gap:12px 0;padding:14px 0} .t1-group[aria-hidden]{display:none} } /* ===== LE DROP DU MOMENT — motif carte produit (répliqué de cardHTML PLP, statique) ===== */ .dropgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:20px} @media(max-width:520px){.dropgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}} /* PC : carousel une-ligne à défilement auto (JS : track .droptrack animée en transform, compositor-only), cartes largeur fixe, scrollbar masquée. Sans JS : simple rangée overflow-x scrollable. */ @media(min-width:961px){ .dropgrid{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-behavior:auto; -ms-overflow-style:none;scrollbar-width:none} .dropgrid::-webkit-scrollbar{display:none} .dropgrid .pcard{flex:0 0 clamp(228px,19vw,264px)} .droptrack{display:flex;gap:16px;width:max-content;will-change:transform} } .pcard{position:relative;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:10px; display:flex;flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .pcard:hover,.pcard:focus-within{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 16px 34px -18px #0005} /* FOND BLANC, comme l'image qu'il porte. Le beige était invisible tant que la photo occupait 100 % de la boîte ; depuis qu'elle recule à 86 % au survol, il apparaît en deux bandes sur les côtés. Mesuré aux pixels le 20/08 : 0 colonne beige au repos, 72 au survol, teinte (236,234,223) — soit exactement ce #eceadf. La feuille des pages de liste mettait déjà #fff ici ; c'est le même composant, il lui faut le même fond. Les cartes sans photo gardent leur propre dégradé, porté par `.pph`. */ .pmedia{position:relative;display:block;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#fff} .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block;z-index:2; transition:transform .3s var(--ease)} /* AU SURVOL, LA PHOTO SE RETIRE — elle ne grossit plus. `scale(1.08)` était le comportement d'origine, et il est faux depuis que la carte porte une barre « Aperçu / Panier » : la barre s'installe PAR-DESSUS l'image, et en grossissant le sujet descendait vers elle. Mesuré le 20/08 sur l'accueil, cartes de l'édit rose : bas de la photo à 415 px, haut de la barre à 349 px, soit **66 px de recouvrement**. Les pages de liste avaient déjà été corrigées, pas l'accueil : la règle vivait dans ds-plp.css, qui n'y est pas chargée. On fait donc l'inverse : le produit recule et remonte, la barre s'installe dans la place libérée. Rien au repos, transform seul, aucun recalcul de mise en page. */ .pcard:hover .pimg,.pcard:focus-within .pimg{transform:translateY(-24px) scale(.86)} .pph{object-fit:unset} .pdisc{position:absolute;top:10px;left:10px;z-index:3;font-size:11px} .lslbl{position:absolute;left:10px;bottom:10px;z-index:3;font-size:10.5px;font-weight:600;color:var(--ink); background:#fffffff2;border:1px solid var(--line);border-radius:8px;padding:4px 10px;max-width:calc(100% - 20px)} .pinfo{padding:10px 4px 4px;display:flex;flex-direction:column;gap:3px;flex:1} .pbrand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700} .pname{font-family:var(--display);font-size:16px;text-transform:uppercase;line-height:1.12} a{color:inherit;text-decoration:none} .pname a{color:inherit;text-decoration:none} .pname a::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:4} .prate{font-size:12px;color:var(--ash)} .prate b{color:var(--ink)} .pprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px} .pnow{font-family:var(--display);font-size:19px} .pwas{color:var(--red);text-decoration:line-through;font-size:12.5px;font-weight:600} .pwas-lab{color:var(--ash);font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;margin-right:4px;text-decoration:none} .peco{font-size:11px;font-weight:700;color:var(--eco)} /* ===== SHOP PAR MARQUE — chips texte only (compliance), réutilise .bchip du header ===== Grille responsive (et non un flex qui s'étale) : colonnes régulières, chips de largeur égale → lecture en balayage propre. Marques triées par volume de stock (ds_brand_terms) donc les majors tombent en premières cases. */ .brandrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;margin-top:20px; /* les chips sont des parallélogrammes (skewX) : leur tracé déborde la cellule d'environ 4px de chaque côté. On réserve cette marge pour que la 1re/dernière colonne ne soit pas rognée ni ne crée de scroll-x. */ padding-inline:6px} .brandrow .bchip{font-size:14px;min-height:56px;padding:0 18px;width:100%;justify-content:center} /* « Toutes les marques » : pleine largeur, détachée, ferme la grille comme une action */ .brandrow .bchip--all{grid-column:1/-1;margin-top:2px} @media (max-width:600px){ /* mobile : 2 colonnes fixes — assez pour balayer les 15 marques sans mur de choix, cibles tactiles ≥56px (Baymard : ≥44px, on prend de la marge) */ .brandrow{grid-template-columns:1fr 1fr;gap:10px} .brandrow .bchip{min-height:54px;padding:0 12px;font-size:13.5px} } /* carousel de marques (décoratif, texte only — compliance) : bandeau d'énergie en tête de la section marque */ .marq{margin:52px 0 0;border-block:1.5px solid var(--line);background:#fff;overflow:hidden; padding:14px 0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marq-track{display:flex;width:max-content;gap:0;animation:marq 26s linear infinite;will-change:transform} .marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marq-item{display:inline-flex;align-items:center;gap:22px;padding:0 22px;flex:none; font-family:var(--display);font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)} .marq-item .dot{width:9px;height:9px;background:var(--volt);transform:skewX(-8deg);flex:none} .marq-item .out{color:transparent;-webkit-text-stroke:1.4px var(--ink)} .marq-item a{color:inherit;text-decoration:none;transition:color .15s var(--ease),-webkit-text-stroke-color .15s var(--ease)} .marq-item a:hover,.marq-item a:focus-visible{color:var(--volt);-webkit-text-stroke-color:var(--volt)} .brandnote{font-size:12px;color:var(--ash);margin-top:14px} /* ===== PROVENANCE / « POURQUOI CE PRIX » — bloc éditorial ink (l'UNIQUE mention du concept) ===== */ /* full-bleed : le manifesto est un moment-déclaration → fond ink bord-à-bord, contenu aligné au container 1240 */ .prov{background:var(--ink);color:var(--bone);margin-top:64px;overflow:hidden; width:100vw;margin-inline:calc(50% - 50vw); padding-block:clamp(26px,3.2vw,44px);padding-inline:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)))} .prov .kicker{color:var(--mute)} .prov .pvtitle{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3vw,36px);line-height:1;letter-spacing:.01em;margin-top:8px;color:var(--bone)} .prov .pvtitle .q{color:var(--volt)} .prov .fine{font-size:11.5px;color:#9c988f;margin-top:22px;max-width:70ch} /* --- Manifesto LUX (croyance / identité, shout streetwear) : anaphore « ON REFUSE… », lignes qui montent de leur clip, ratures rouges tracées scaleX, credo volt pop + shine. Base CSS = ÉTAT FINAL visible (couche reduced-motion n°2 par construction). --- */ .pv4-man{list-style:none;margin-top:clamp(16px,3vw,30px)} .pv4-man li{font-family:var(--display);text-transform:uppercase;line-height:.98;letter-spacing:.004em;overflow-wrap:break-word; font-size:clamp(22px,3.4vw,42px);padding:clamp(6px,1vw,10px) 0;border-bottom:1px solid #262626;overflow:hidden} .pv4-man li:last-of-type{border-bottom:0} .pv4-man .ln{display:block;padding-bottom:.09em;margin-bottom:-.09em} .pv4-man .rf{color:transparent;-webkit-text-stroke:1.3px var(--bone)} .pv4-man .obj{color:var(--bone)} .pv4-man s{display:inline-block;text-decoration:none;position:relative;white-space:nowrap} .pv4-man s::after{content:"";position:absolute;left:-.05em;right:-.05em;top:calc(50% - .04em);height:clamp(2px,.5vw,5px); border-radius:2px;background:var(--red);transform:skewX(-8deg) scaleX(1);transform-origin:left center} .pv4-man li.creed{padding-top:clamp(13px,2.4vw,22px)} .pv4-man li.creed .hl{background:var(--volt);color:var(--ink);transform:skewX(-8deg);display:inline-block; padding:.06em .22em;margin-top:.1em;position:relative;overflow:hidden} .pv4-man li.creed .hl .sheen{position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(340%)} .pv4-sub{font-size:13.5px;color:var(--mute);margin-top:clamp(13px,2.2vw,20px);max-width:56ch} .pv4-sub b{color:var(--bone)} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .pv4-man li .ln{animation:mrise linear both;animation-timeline:view();animation-range:entry 6% entry 32%} .pv4-man li:nth-child(2) .ln{animation-range:entry 12% entry 40%} .pv4-man li:nth-child(3) .ln{animation-range:entry 18% entry 48%} .pv4-man li.creed .ln{animation-range:entry 20% entry 50%} @keyframes mrise{from{opacity:0;transform:translateY(106%)}to{opacity:1;transform:none}} .pv4-man s::after{animation:mstrike linear both;animation-timeline:view();animation-range:entry 34% entry 56%} .pv4-man li:nth-child(2) s::after{animation-range:entry 40% entry 62%} .pv4-man li:nth-child(3) s::after{animation-range:entry 46% entry 68%} @keyframes mstrike{from{transform:skewX(-8deg) scaleX(0)}to{transform:skewX(-8deg) scaleX(1)}} .pv4-man li.creed .hl{animation:mpop linear both;animation-timeline:view();animation-range:entry 34% entry 58%} @keyframes mpop{0%{opacity:0;transform:skewX(-8deg) scale(.94)}62%{opacity:1;transform:skewX(-8deg) scale(1.02)}100%{opacity:1;transform:skewX(-8deg) scale(1)}} .pv4-man li.creed .hl .sheen{animation:msheen linear both;animation-timeline:view();animation-range:entry 58% entry 86%} @keyframes msheen{from{transform:translateX(-120%)}to{transform:translateX(340%)}} } } /* --- ticket strike : mini preuve « ailleurs / ici » — prix barré rayé rouge, prix volt qui claque --- */ .pv4-tkt{margin-top:clamp(16px,2.6vw,26px);display:inline-flex;align-items:stretch;max-width:100%; border:1px solid #2a2a2a;border-radius:14px;background:var(--ink2);overflow:hidden} .tkt-cell{padding:clamp(11px,1.8vw,16px) clamp(15px,2.4vw,23px)} .tkt-cell + .tkt-cell{border-left:1px dashed #3a3a3a} .pv4-tkt .cl{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8a877e;margin-bottom:3px} .tkt-now .cl{color:var(--volt)} .pv4-tkt .prc{font-family:var(--display);font-size:clamp(23px,3.4vw,34px);line-height:1;white-space:nowrap} .tkt-was .prc{color:var(--mute);position:relative;display:inline-block} .tkt-was .prc::after{content:"";position:absolute;left:-.08em;right:-.08em;top:calc(50% - .03em);height:3px; border-radius:2px;background:var(--red);transform:skewX(-8deg) scaleX(1);transform-origin:left center} .tkt-now .prc{color:var(--volt);display:inline-block} .pv4-tkt .pcs{display:block;font-size:10.5px;color:#8a877e;margin-top:3px} .tkt-now .pcs{color:var(--mute)} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .pv4-tkt{animation:sdin linear both;animation-timeline:view();animation-range:entry 14% entry 44%} .tkt-was .prc::after{animation:mstrike linear both;animation-timeline:view();animation-range:entry 38% entry 58%} .tkt-now .prc{animation:tpop linear both;animation-timeline:view();animation-range:entry 50% entry 72%} @keyframes tpop{0%{opacity:0;transform:scale(.9)}64%{opacity:1;transform:scale(1.045)}100%{opacity:1;transform:scale(1)}} } } @media(max-width:640px){ .pv4-man{margin-top:12px} .pv4-man li{font-size:clamp(21px,6.4vw,26px);padding:7px 0} .pv4-man .rf{-webkit-text-stroke-width:1px} .pv4-sub{font-size:12px;margin-top:11px} .pv4-tkt{margin-top:12px;border-radius:11px} .tkt-cell{padding:9px 12px} .pv4-tkt .prc{font-size:21px} .pv4-tkt .pcs{display:none} } /* ===== CATÉGORIES — Layout bento « Duo featured » (réutilise .btile/.featd/.bg/.blob/.lab du header Bento) ===== 2 accroches côte à côte (teaser produit .featd + Running en 2×2) puis 4 tuiles compactes. */ /* Hauteurs de rangée : la maquette les avait calibrées pour des tuiles à DÉGRADÉ, où rien n'occupait la boîte. Depuis qu'on y met de vrais packshots, 132 px ne tenaient plus le visuel — la chaussure était peinte sur 207 px de haut dans 132 px de boîte, et la pastille mangeait ce qui restait. */ .cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:208px;gap:14px;margin-top:20px} .cats .duo{grid-column:span 2;grid-row:span 2} @media(max-width:1020px){.cats{grid-auto-rows:180px}} @media(max-width:620px){ .cats{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(196px,auto)} .cats .duo{grid-column:1/-1;grid-row:auto;min-height:270px} } /* Tuiles PHOTO — les visuels produit sont des DÉTOURES CATALOGUE sur fond blanc. En « cover » ils se font rogner de travers (rendu bizarre) → on les rend comme une CARTE PRODUIT : fond blanc + chaussure entière (contain), centrée un peu haut pour laisser la place à la pastille. Aucun recadrage. */ /* même teinte que le fond studio du .bg : la bande de la pastille prolonge la tuile sans couture, maintenant que .bg ne la couvre plus. */ .btile.photo{background:#EAE6DB} /* Packshot sur fond BLANC posé sur un fond studio doux : background-blend-mode:multiply efface le blanc dans le ton, le produit reste CONTENU (jamais recadré), grand et centré. Remplit visuellement la tuile sans boîte blanche ni crop (cf. currency check 27/07). */ /* `72% auto` dimensionnait sur la LARGEUR : sur une tuile 288×132 ça peignait la photo sur 207 px de haut, soit 57 % de trop — le packshot sortait de la boîte par le haut ET par le bas, et `center 38%` cadrait en plus sur le vide au-dessus de la chaussure. Résultat : semelles coupées, et la sandale de la tuile 4 réduite à un liseré. Le commentaire ci-dessus disait « contain, aucun recadrage » — c'est maintenant ce que fait le code. La pastille ne passe plus PAR-DESSUS la photo : sur une tuile photo, .bg quitte le positionnement absolu et devient un item de flex qui mange toute la place au-dessus d'elle. La bande réservée s'ajuste donc TOUTE SEULE à la hauteur réelle de la pastille — « Trail & randonnée » sur 2 lignes à 1020 px, « Sandales & détente » sur 3 lignes en 172 px de large : une valeur fixe se faisait déborder par les deux. `contain` et pas `cover` — la raison a changé le 10/08/2026. Avant, ds_cat_thumb() tirait un produit AU HASARD toutes les 12 h : tout cadrage réglé sur le vide d'un packshot précis décapitait le suivant. Depuis, la sélection tire dans les quinze images les MIEUX REMPLIES du rayon (meta _ds_occup, cf. pipeline/cadrage-indexer.php) et les tuiles sont servies entre 48 % et 86 % de remplissage au lieu d'une médiane de 47 % tous rayons confondus. `contain` reste néanmoins le bon choix : le remplissage varie encore d'un rayon à l'autre (le trail plafonne à 49 %, faute de photo plus généreuse au catalogue), et `cover` entamerait le produit sur les tuiles les mieux remplies. */ .btile.photo .bg{position:relative;inset:auto;z-index:auto;flex:1 1 auto;min-height:0; background-size:contain;background-position:center;background-repeat:no-repeat; background-color:#EAE6DB;background-blend-mode:multiply} /* La pastille débordait la tuile bien avant cette refonte — « Trail & randonnée » mesure 161 px dans une tuile de 153 à 172 px — mais overflow:hidden la coupait sans bruit. On la borne à la tuile et on réduit la fonte là où les tuiles sont étroites (4 colonnes entre 620 et 860 px, 2 colonnes en dessous). */ .cats .btile .lab{max-width:calc(100% - 28px);overflow-wrap:anywhere} @media(max-width:860px){.cats .btile .lab{font-size:12.5px;padding:7px 10px;gap:6px}} .btile.photo .lab{background:var(--ink);color:var(--bone);border-color:var(--ink)} .btile.photo .lab .arr{color:var(--volt)} .btile.photo:hover .lab,.btile.photo:focus-visible .lab{box-shadow:3px 3px 0 var(--volt)} .btile.photo .hn-sub{color:var(--ash)} /* ===== RAIL « POUR TOI » — perso, scroll-snap horizontal, WHY-FIRST ===== Peek garanti via --pv (nb de cartes visibles, fractionnaire → la suivante dépasse). */ .rail{--pv:4.5;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:20px 4px 10px;margin:0 -4px;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .rail>*{flex:0 0 calc((100% - (var(--pv) - 1)*14px)/var(--pv));scroll-snap-align:start} @media(max-width:960px){.rail{--pv:3.3}} @media(max-width:640px){.rail{--pv:2.2}} @media(max-width:480px){.rail{--pv:1.55}} .rmini{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:16px;background:#fff; padding:10px;color:var(--ink);text-decoration:none; transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .rmini:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 16px 34px -18px #0005} .rmini .rim{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#eceadf} .rmini .rim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block} .rmini .why{position:absolute;top:16px;left:16px;z-index:2;font-size:10px} .rmini .ri{padding:10px 4px 4px;display:flex;flex-direction:column} .rmini .rb{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700} .rmini .rn{font-family:var(--display);font-size:15px;text-transform:uppercase;line-height:1.12} .rmini .rp{display:flex;align-items:baseline;gap:7px;margin-top:4px} .rmini .rp .pnow{font-size:17px} /* WHY-FIRST : la raison devient le héros de la carte, au-dessus du visuel (levier reco expliquée +19 pts) */ .rmini-why{padding-top:12px} .rmini-why .whyhero{display:flex;align-items:flex-start;gap:9px;font-family:var(--display);font-size:14.5px; line-height:1.18;text-transform:uppercase;color:var(--ink);padding:0 4px 10px;min-height:48px} .rmini-why .wtick{flex:none;width:10px;height:10px;margin-top:4px;background:var(--volt); transform:skewX(-8deg);box-shadow:0 0 0 1.5px var(--ink)} .rmini-why:hover .wtick{background:var(--ink);box-shadow:0 0 0 1.5px var(--volt)} /* nav rail (mécanique reprise du carousel avis) — flèches groupées 48px + compteur + progression */ .rlctrls{display:flex;align-items:center;gap:16px;margin-top:6px} .rlctrls .rvprog{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden} .rlctrls .rvprog-fill{display:block;height:100%;width:100%;background:var(--ink);border-radius:3px; transform:scaleX(.2);transform-origin:0 50%;transition:transform .3s var(--ease)} /* mobile : swipe natif, flèches + compteur masqués ≤768px ; la barre de progression reste (découvrabilité passive) */ @media(max-width:768px){.rlctrls .rvnav{display:none}} /* ===== AVIS / PREUVE SOCIALE ===== */ .rsumline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:18px} .rsumline .big{font-family:var(--display);font-size:52px;line-height:.9} .rsumline .stars{color:var(--ink);letter-spacing:2px;font-size:15px} .rsumline .cnt{font-size:13px;color:var(--ash)} /* avis = carousel une-card percutant (best-practice 2026 : focus, nav groupée, pas de dots, transparence) */ .rvcar{margin-top:20px} .rvcar-vp{overflow:hidden;border-radius:18px} .rvcar-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; -ms-overflow-style:none;scrollbar-width:none;margin:0;padding:0;list-style:none} .rvcar-track::-webkit-scrollbar{display:none} .rvslide{flex:0 0 100%;scroll-snap-align:start;min-width:0;box-sizing:border-box} /* PC/tablette : 2 avis côte à côte (mobile reste 1 à la fois) */ @media(min-width:721px){ .rvcar-track{gap:18px} .rvslide{flex:0 0 calc((100% - 18px)/2)} } .rvbig{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden; padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column;gap:16px;min-height:100%} .rvbig .rvquote{position:absolute;top:6px;right:22px;font-family:var(--display);font-size:120px;line-height:1; color:var(--volt);pointer-events:none;user-select:none;z-index:0} .rvbig .rvstars{color:var(--ink);letter-spacing:3px;font-size:19px;position:relative;z-index:1} .rvbig .rvtext{font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink);font-weight:500;max-width:54ch;position:relative;z-index:1} .rvbig .rvwho{display:flex;align-items:center;gap:13px;margin-top:auto;flex-wrap:wrap;position:relative;z-index:1} .rvbig .rvav{flex:none;width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--bone); font-family:var(--display);font-size:15px;display:flex;align-items:center;justify-content:center;transform:skewX(-8deg)} .rvbig .rvav span{transform:skewX(8deg)} .rvbig .rvid{display:flex;flex-direction:column;min-width:0} .rvbig .rvid b{font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;color:var(--ink)} .rvbig .rvid small{font-size:12px;color:var(--ash);margin-top:2px} .rvbig .rvverif{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700; color:var(--ink);background:var(--volt);border-radius:999px;padding:5px 11px;white-space:nowrap} .rvctrls{display:flex;align-items:center;gap:16px;margin-top:16px} .rvprog{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden} .rvprog-fill{display:block;height:100%;width:100%;background:var(--ink);border-radius:3px; transform:scaleX(.2);transform-origin:0 50%;transition:transform .3s var(--ease)} .rvnav{display:flex;align-items:center;gap:10px} .rvcount{font-family:var(--display);font-size:15px;letter-spacing:.04em;color:var(--ash);white-space:nowrap} .rvcount b{color:var(--ink)} .rvbtn{width:48px;height:48px;flex:none;border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink); font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} .rvbtn:hover{background:var(--ink);color:var(--bone)} .rvbtn:active{transform:scale(.94)} .rvbtn:focus-visible{outline:3px solid var(--volt);outline-offset:2px} .rvbtn[disabled]{opacity:.32;cursor:default;pointer-events:none} @media(max-width:520px){.rvbig .rvquote{font-size:84px;top:2px;right:16px}.rvbig .rvverif{margin-left:0}} /* ===== NEWSLETTER / BONS PLANS — MIX : incitatif −10% (layout V2) + capture préférences (chips marques + pointure, V4) ===== */ /* full-bleed : fond CTA bord-à-bord, contenu aligné sur le container 1240 (padding calc) */ .nl{background:var(--ink);color:var(--bone);margin-top:64px;overflow:hidden; width:100vw;margin-inline:calc(50% - 50vw); padding-block:clamp(40px,5vw,64px);padding-inline:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))); display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,54px);align-items:center} @media(max-width:900px){.nl{grid-template-columns:1fr}} .nl .kicker{color:var(--mute)} /* colonne gauche : l'incitatif −10% (gros chiffre volt skewé) + pill code masquée */ .nl .pct{font-family:var(--display);font-size:clamp(56px,7vw,96px);line-height:.88;color:var(--volt); transform:skewX(-8deg);display:inline-block;letter-spacing:.01em} .nl .pctlab{font-family:var(--display);font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;line-height:1.05; color:var(--bone);display:block;margin-top:6px} .nl .pctlab .vv{color:transparent;-webkit-text-stroke:1.5px var(--volt)} .nl .nls{font-size:15px;color:#cfccc2;margin-top:12px;max-width:44ch} .nl .nls b{color:var(--bone)} .nl .codepill{display:inline-flex;align-items:center;gap:12px;margin-top:20px;border:2px dashed #454545;border-radius:12px; padding:11px 17px;background:var(--ink2);max-width:100%} .nl .codepill[hidden]{display:none} .nl .codepill .cd{font-family:var(--display);font-size:18px;letter-spacing:.32em;color:#8f8c84;white-space:nowrap} .nl .codepill .lk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--volt);white-space:nowrap} /* activation post-inscription (Option A, front-only) : la pill se change en bloc « unlocked » actionnable */ .nl .codeunlock{margin-top:20px;border:2px solid var(--volt);border-radius:12px;background:var(--ink2); padding:14px 16px;position:relative;overflow:hidden;max-width:420px} .nl .codeunlock[hidden]{display:none} .nl .codeunlock.is-on{animation:cupop .4s var(--ease) both} @keyframes cupop{0%{opacity:0;transform:scale(.94)}62%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}} /* sheen volt une passe au reveal (compositor-only) */ .nl .codeunlock::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(200,255,0,.32) 50%,transparent 62%);transform:translateX(-120%)} .nl .codeunlock.is-on::after{animation:cusheen .9s var(--ease) .15s both} @keyframes cusheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}} .cul-head{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap} .cul-lab{flex-basis:100%;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700} .cul-code{font-family:var(--display);font-size:22px;letter-spacing:.22em;color:var(--volt);transform:skewX(-8deg);display:inline-block} .cul-copy{min-height:40px;padding:0 15px;border:1.5px solid var(--volt);border-radius:9px;background:transparent; color:var(--volt);font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.03em; display:inline-flex;align-items:center;gap:6px;margin-left:auto; transition:background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)} .cul-copy:hover{background:var(--volt);color:var(--ink)} .cul-copy:active{transform:scale(.96)} .cul-copy.copied{background:var(--volt);color:var(--ink)} .cul-cond{font-size:11px;color:#8f8c84;margin-top:11px} .cul-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:46px;padding:0 20px; background:var(--volt);color:var(--ink);font-family:var(--display);font-size:15px;text-transform:uppercase; letter-spacing:.04em;border-radius:11px;text-decoration:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .cul-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px #c8ff0040} .cul-cta:active{transform:scale(.98)} .cul-cta .arr{display:inline-block;transition:transform .2s var(--ease)} .cul-cta:hover .arr{transform:translateX(4px)} /* preuve sociale (chiffre balisé DÉMO en commentaire markup) */ /* colonne droite : le form empilé (préférences optionnelles + e-mail requis) */ .nlform{display:flex;flex-direction:column;align-items:stretch;gap:14px} .nlform fieldset{border:0;min-width:0;padding:0;margin:0} .plab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;display:block;margin-bottom:9px} .plab .opt{color:#8f8c84;letter-spacing:.04em;text-transform:none;font-weight:500} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{min-height:44px;padding:0 16px;border:1.5px solid #3a3a3a;border-radius:99px;background:var(--ink2); color:var(--bone);font-family:var(--body);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px; transition:transform .15s var(--ease),background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)} .chip:hover{border-color:var(--bone);transform:translateY(-1px)} .chip:active{transform:scale(.97)} .chip .tick{display:none;font-weight:800} .chip[aria-pressed="true"]{background:var(--volt);color:var(--ink);border-color:var(--volt);font-weight:700} .chip[aria-pressed="true"] .tick{display:inline} /* pointures : chips compactes (grille dense qui wrap, cibles ≥44px) */ .chips-size{gap:7px} .chip-sz{min-height:44px;min-width:48px;padding:0 10px;justify-content:center;gap:5px;font-size:13px;letter-spacing:.01em} .nlform .frow{display:flex;gap:10px;flex-wrap:wrap} .nlform input[type=email]{flex:1;min-width:200px} .nlform input{min-height:52px;border:2px solid #333;border-radius:12px;background:var(--ink2); color:var(--bone);font:inherit;font-size:16px;padding:0 16px;outline:none; /* ≥16px : pas de zoom iOS au focus */ transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .nlform input::placeholder{color:#8f8c84} .nlform input:focus{border-color:var(--volt);box-shadow:0 0 0 3px #c8ff0033} .nlform button[type=submit]{background:var(--volt);color:var(--ink);border:none;font-family:var(--display);font-size:15px; text-transform:uppercase;letter-spacing:.04em;min-height:52px;padding:0 22px;border-radius:12px; position:relative;overflow:hidden; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .nlform button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 10px 24px #c8ff0040} .nlform button[type=submit]:active{transform:scale(.98)} .nlform button[type=submit]::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);transform:translateX(-110%)} .nlform button[type=submit]:hover::after{animation:sweep .85s var(--ease)} .nl .nlnote{font-size:11.5px;color:#969289;margin-top:12px;max-width:52ch} .nl .nlnote a{color:#cfccc2;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt);text-decoration-thickness:2px} .nl .nlnote a:hover{color:var(--volt)} /* état succès (révélé au submit — aria-live, aucun envoi réel) */ .nlok{display:flex;align-items:flex-start;gap:14px;background:var(--ink2);border:1px solid #2f2f2f;border-radius:14px; padding:18px 20px;animation:okin .35s var(--ease) both} .nlok[hidden]{display:none} .nlok .okc{flex:none;width:36px;height:36px;border-radius:10px;background:var(--volt);color:var(--ink); display:grid;place-items:center;transform:skewX(-8deg);font-weight:800;font-size:15px} .nlok .okc span{transform:skewX(8deg)} .nlok b{font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:.02em;display:block;line-height:1.15} .nlok p{font-size:13px;color:var(--mute);margin-top:5px;max-width:46ch} .nlok p strong{color:var(--bone)} .nlok .okcode{display:inline-block;font-family:var(--display);font-size:17px;letter-spacing:.26em;background:var(--volt); color:var(--ink);transform:skewX(-8deg);padding:5px 14px 5px 16px;border-radius:6px;margin-top:9px} @keyframes okin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ===== FOOTER ===== */ /* ===== FOOTER V1 — STATEMENT / MANIFESTE ===== S'ouvre sur la clôture émotionnelle en gros Clash, volt en accents francs. Liens des colonnes en Clash Display (choix éditorial), lisibles + hover volt. */ /* primitives trust partagées */ .fwm{font-family:var(--display);text-transform:lowercase;transform:skewX(-8deg);display:inline-block;line-height:1;color:var(--ink);text-decoration:none} .fwm .s{color:var(--volt);-webkit-text-stroke:1px var(--ink)} .policy{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px} .policy li{font-size:13px;font-weight:500;color:#3a3a37;display:inline-flex;align-items:center;gap:7px} .policy .tick{width:16px;height:16px;background:var(--ink);color:var(--volt);border-radius:4px;display:inline-grid;place-items:center; font-size:10px;font-weight:800;transform:skewX(-8deg);flex:none} .pay{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .pay li{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3a3a37; border:1.5px solid var(--line);border-radius:8px;padding:6px 12px;background:#fff} .demo-note{font-size:10.5px;color:var(--ash);border:1px dashed var(--mute);border-radius:6px;padding:4px 8px;display:inline-block;margin-top:8px} .soc{display:flex;gap:10px;list-style:none} .soc a{width:44px;height:44px;display:inline-grid;place-items:center;border:1.5px solid var(--ink);border-radius:10px;color:var(--ink); transition:transform .18s var(--ease),background .18s var(--ease)} .soc a:hover{background:var(--volt);transform:translateY(-2px) skewX(-8deg)} .soc svg{display:block;width:20px;height:20px} .soc li:nth-child(1) svg{width:22px;height:22px} .soc li:nth-child(2) svg{width:17px;height:17px} .fcontact{font-size:13px;color:#3a3a37} .fcontact a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:2px;text-underline-offset:3px} .fcontact a:hover{background:var(--volt)} .flegal{font-size:11.5px;color:var(--ash);line-height:1.6} /* structure V1 */ .f1{margin-top:64px;background:var(--bone);border-top:3px solid var(--ink)} .f1-in{max-width:1240px;margin:0 auto;padding:52px 22px 34px} .f1 .man-tag{background:var(--volt);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; border-radius:6px;padding:4px 10px;transform:skewX(-8deg);display:inline-block;margin-bottom:16px} .f1 .man{font-family:var(--display);font-size:clamp(34px,6.4vw,74px);text-transform:uppercase;line-height:.98;letter-spacing:.005em; max-width:16ch;overflow-wrap:break-word} .f1 .man .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)} .f1 .man .u{box-shadow:inset 0 -0.28em 0 var(--volt)} .f1 .man-sub{font-size:15px;color:var(--ash);margin-top:14px;max-width:52ch} .f1-brands{border-top:1.5px solid var(--ink);margin-top:36px;padding-top:22px} .f1-brands .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-weight:700;display:block;margin-bottom:12px} .f1-brands ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px} .f1-brands a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:10px; background:#fff;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-decoration:none; transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .f1-brands a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:3px 3px 0 var(--volt)} .f1-cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:30px;padding:32px 0;border-top:1px solid var(--line);margin-top:26px} @media(max-width:860px){.f1-cols{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:480px){.f1-cols{grid-template-columns:1fr;gap:24px}} .f1-col h4{font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px; display:inline-block;transform:skewX(-8deg);border-bottom:3px solid var(--volt);padding-bottom:3px} .f1-col ul{list-style:none;display:flex;flex-direction:column} /* liens de colonnes en Clash Display — lisibles, hover volt conservé */ .f1-col li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0;font-size:14.5px;font-weight:500; letter-spacing:0;line-height:1.3;color:#2c2c29;text-decoration:none;transition:color .15s var(--ease)} .f1-col li a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:3px;text-underline-offset:4px} .f1 .fwm{font-size:30px} .f1 .ftag{font-size:13px;color:var(--ash);margin-top:12px;max-width:32ch;line-height:1.55} .f1-col .fcontact{margin-top:14px} .f1-col .soc{margin-top:16px} .f1-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px; border-top:1px solid var(--line);padding:20px 0} .f1-bot{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;justify-content:space-between} .f1-bot .sign{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.06em;transform:skewX(-8deg);display:inline-block} .f1-bot .sign .s{color:var(--ink);background:var(--volt);padding:0 6px;border-radius:4px} /* ===== CTA STICKY MOBILE — thumb-zone, empilé, safe-area, apparaît APRÈS le hero ===== Le body réserve l'espace (padding-bottom) : la barre ne masque jamais le contenu ni le footer. */ .homebar{position:fixed;left:0;right:0;bottom:0;z-index:26;background:var(--ink);color:var(--bone); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center; border-top:1.5px solid #262626;box-shadow:0 -14px 30px -18px rgba(0,0,0,.55); transform:translateY(120%);visibility:hidden; transition:transform .32s var(--ease),visibility .32s} .homebar.is-visible{transform:none;visibility:visible} @media(min-width:961px){.homebar{display:none}} .homebar .hbtxt{font-size:11.5px;color:var(--mute);line-height:1.3;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .homebar .hbtxt b{font-family:var(--display);font-size:14px;color:var(--volt);letter-spacing:.03em;text-transform:uppercase} .homebar .hbtxt .sep{color:#3a3a3a} /* CTA pleine largeur, centrée dans la zone du pouce, 52px, shine sweep */ .homebar .hbcta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px; width:100%;min-height:52px;background:var(--volt);color:var(--ink); font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.04em; border-radius:13px;text-decoration:none;transition:transform .18s var(--ease)} .homebar .hbcta:active{transform:scale(.98)} .homebar .hbcta .arr{display:inline-block;transition:transform .2s var(--ease)} .homebar .hbcta::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); transform:translateX(-110%);animation:sweep 3.4s var(--ease) 1.2s infinite} /* ===== WOW STREETWEAR — tous compositor-only (transform/opacity) ===== */ /* shine sweep réutilisable (CTA premium 2026) */ @keyframes sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}} /* le slash volt de la marque se TRACE dans le hero (accent signature, une passe) */ .h1 .slash{color:var(--volt);display:inline-block;transform:skewX(-8deg); -webkit-text-stroke:0;text-shadow:1px 0 0 var(--ink); animation:slashdraw .5s var(--ease) .5s both} @keyframes slashdraw{from{opacity:0;transform:skewX(-8deg) translateY(60%) scaleY(.2)} 60%{opacity:1;transform:skewX(-8deg) translateY(0) scaleY(1.12)} to{opacity:1;transform:skewX(-8deg) scaleY(1)}} /* CTA hero magnétique + shine sweep */ .hcta{position:relative;overflow:hidden} .hcta::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); transform:translateX(-110%)} .hcta:hover::after{animation:sweep .85s var(--ease)} .hcta.mag{transition:transform .18s var(--ease),box-shadow .2s var(--ease)} /* soulignés volt qui se TRACENT au scroll (titres de section) */ .gsec h2{position:relative;display:inline-block;padding-bottom:8px} .gsec h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:clamp(46px,10vw,88px); background:var(--volt);transform:scaleX(0);transform-origin:left} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .gsec h2::after{animation:uline linear both;animation-timeline:view();animation-range:entry 8% entry 46%} @keyframes uline{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* clip-reveal des titres de section : le titre se dévoile par un masque montant */ .gsec .shead>div .kicker,.gsec>.kicker{animation:kmask linear both;animation-timeline:view();animation-range:entry 4% entry 34%} @keyframes kmask{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } } /* sans scroll-driven : souligné visible d'emblée (pas de titre décoré caché) */ @supports not (animation-timeline: view()){.gsec h2::after{transform:scaleX(1)}} /* micro-interaction carte enrichie : le tag -X% « claque » légèrement au hover carte */ .pcard:hover .pdisc{animation:tagpop .3s var(--ease)} @keyframes tagpop{0%{transform:skewX(-8deg) scale(1)}45%{transform:skewX(-8deg) scale(1.12)}100%{transform:skewX(-8deg) scale(1)}} /* ===== TOAST STREETWEAR — notifications HONNÊTES uniquement (voir commentaire HTML/JS) ===== Desktop : bas-gauche. Mobile : AU-DESSUS de la CTA sticky (jamais par-dessus la conversion). */ .toasts{position:fixed;left:16px;bottom:16px;z-index:24;width:min(340px,calc(100vw - 32px)); display:flex;flex-direction:column;gap:10px;pointer-events:none} @media(max-width:960px){ /* remonte au-dessus de la barre sticky réservée en bas */ .toasts{left:12px;right:12px;width:auto;bottom:calc(126px + env(safe-area-inset-bottom))} } .toast{pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:12px; background:var(--ink);color:var(--bone);border:1.5px solid #2a2a2a;border-left:3px solid var(--volt); border-radius:14px;padding:13px 44px 13px 14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.6); transform:translateX(-118%);opacity:0;transition:transform .34s var(--ease),opacity .34s var(--ease)} @media(max-width:960px){.toast{transform:translateY(16px)}} .toast.in{transform:none;opacity:1} .toast.out{transform:translateX(-118%);opacity:0} @media(max-width:960px){.toast.out{transform:translateY(16px)}} .toast .tic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--ink2);border:1px solid #333; display:flex;align-items:center;justify-content:center;color:var(--volt)} .toast .tic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .toast .tbody{min-width:0} .toast .tk{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:2px} .toast .tt{font-size:13.5px;line-height:1.35;font-weight:600} .toast .tt b{color:var(--volt);font-weight:700} .toast .tt a{color:var(--volt);text-decoration:underline;text-underline-offset:2px;font-weight:700} .toast.hold .tprog{animation-play-state:paused} .toast .tx{position:absolute;top:6px;right:6px;width:34px;height:34px;border:none;background:none;color:var(--mute); font-size:19px;line-height:1;border-radius:8px;display:flex;align-items:center;justify-content:center; transition:color .18s var(--ease),transform .18s var(--ease)} .toast .tx:hover{color:var(--bone);transform:rotate(90deg)} /* piste d'auto-dismiss (barre volt qui se vide) — cosmétique, GPU */ .toast .tprog{position:absolute;left:0;bottom:0;height:2px;background:var(--volt);width:100%;transform-origin:right; transform:scaleX(1)} .toast.in .tprog{transition:transform var(--tdur,6s) linear;transform:scaleX(0)} /* ===== prefers-reduced-motion — couche 1 : kill-switch + états finaux visibles ===== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .sd,.sd2,.h1 .kin,.h1 .slash,.hwb,.gsec>.kicker,.gsec .shead>div .kicker{opacity:1!important;transform:none!important} /* newsletter activation (Option A) — reveal instantané, code lisible d'emblée */ .nl .codeunlock.is-on{opacity:1!important;transform:none!important} .h1 .slash{transform:skewX(-8deg)!important} .gsec h2::after{transform:scaleX(1)!important} .homebar .hbcta::after,.hcta::after{display:none!important} /* la barre sticky s'affiche sans transition (couche 2 : état final visible) */ .homebar.is-visible{transform:none!important;visibility:visible!important} /* manifesto lux #prov — couche 2 : états finaux visibles */ .pv4-man .ln,.pv4-tkt,.tkt-now .prc{opacity:1!important;transform:none!important} .pv4-man s::after,.tkt-was .prc::after{transform:skewX(-8deg) scaleX(1)!important} .pv4-man li.creed .hl{opacity:1!important;transform:skewX(-8deg)!important} .pv4-man li.creed .hl .sheen{transform:translateX(340%)!important} } /* ============================================================================ LE RENDEZ-VOUS — événement daté (patterns/home.php, inc/promo-rdv.php) ============================================================================ Parti pris : le luxe ne crie pas une urgence, il fixe un rendez-vous et tient parole. D'où la règle de hiérarchie qui sépare ce bloc d'une vente flash de dropshipping — LE COMPTEUR N'EST JAMAIS L'ÉLÉMENT LE PLUS GROS. En `avant` c'est le titre qui domine, en `pendant` c'est le prix ; le compteur reste deuxième dans les deux cas. Le volt est tenu en réserve : la section est entièrement bone/mute tant que la promo n'a pas ouvert. L'arrivée du volt EST la bascule — la couleur d'action apparaît quand l'action devient possible. Aucun aplat volt, jamais de volt sur les chiffres. Full-bleed : même mécanique que .prov, pour que les deux bandes sombres s'alignent. */ .rdv{background:linear-gradient(140deg,#242424 0%,var(--ink) 70%);color:var(--bone); margin-top:64px;overflow:hidden; width:100vw;margin-inline:calc(50% - 50vw); padding-block:clamp(48px,7vw,104px); padding-inline:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)))} .rdv-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:center} @media (max-width:860px){.rdv-in{grid-template-columns:1fr}} .rdv-kick{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--mute);display:flex;align-items:center;gap:8px;margin:0} .rdv[data-etat="pendant"] .rdv-kick{color:var(--volt)} /* La seule boucle autorisée de la section : lente comme une respiration, pas comme une alarme. 2 s, et l'opacité ne descend qu'à .45 — en dessous ça clignote. */ .rdv-dot{width:8px;height:8px;border-radius:50%;background:var(--volt);flex:none; animation:rdvBreathe 2s ease-in-out infinite} @keyframes rdvBreathe{0%,100%{opacity:.45}50%{opacity:1}} .rdv-h{font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(38px,6.5vw,84px);line-height:.95;letter-spacing:.005em;margin:14px 0 0} .rdv-h .l1,.rdv-h .l2{display:block} /* Ligne 2 évidée — le motif du thème (.gsec h2 .v), transposé sur fond sombre. */ .rdv-h .l2{color:transparent;-webkit-text-stroke:1.5px var(--bone)} .rdv-sub{font-size:17px;line-height:1.55;max-width:52ch;color:rgba(245,243,238,.78);margin:18px 0 0} .rdv-sub b{color:var(--bone);font-weight:700} .rdv-when{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--bone);margin:14px 0 0} .rdv-rule{height:1px;background:rgba(245,243,238,.16);margin:clamp(22px,3vw,34px) 0 0; transform-origin:left center} /* ---- Compteur : horlogerie de gare, pas flip-clock ---- */ .rdv-clock{margin-top:clamp(18px,2.4vw,26px);padding-bottom:clamp(18px,2.4vw,26px); border-bottom:1px solid rgba(245,243,238,.16)} .rdv-clab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500; color:var(--mute);margin:0 0 10px} /* Les groupes s'alignent par le BAS, jamais par le haut : les secondes sont volontairement plus petites, et un alignement haut décale leur libellé d'une demi-ligne sous les autres. Comme le bloc sous les chiffres (libellé + marge) est identique partout, aligner les bas aligne d'un seul coup les libellés ET les pieds de chiffres. Hauteur de ce bloc = 19px (11px de libellé à line-height:1 + 8px de marge) ; le séparateur, qui n'a pas de libellé, la reprend en margin-bottom pour rester au niveau des chiffres. */ /* L'air entre les groupes passe par le `gap`, pas par un `margin-right` sur les groupes : la ligne alterne groupe / « : » / groupe, et une marge posée d'un seul côté donnerait plus d'espace avant chaque deux-points qu'après. Le gap écarte les deux côtés à égalité. */ .rdv-digits{display:flex;align-items:flex-end;gap:clamp(10px,1.3vw,18px);font-family:var(--display)} .rdv-digits .g{display:flex;flex-direction:column;align-items:center} .rdv-digits em{font-family:var(--body);font-style:normal;font-size:11px;letter-spacing:.12em; line-height:1;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:8px} .rdv-digits .sep{font-size:clamp(28px,4vw,52px);line-height:1;color:var(--mute); margin-bottom:19px} .rdv-digits .d{display:flex;font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1;color:var(--bone)} /* Chaque chiffre dans une cellule à LARGEUR FIXE : sans ça, un « 1 » plus étroit qu'un « 8 » fait respirer toute la ligne à chaque seconde. `overflow:hidden` cadre le glissement. LARGEUR MESURÉE, PAS ESTIMÉE. .62em était une estimation, et elle rognait 8 chiffres sur 10 : dans Clash Display, l'encre du « 0 » et du « 4 » fait .694em, celle du « 1 » .375em. La glyphe étant centrée, le dépassement était coupé des DEUX côtés — 5,3 px de chaque bord sur un « 0 » à 72px. Seuls le 1 et le 7 passaient, ce qui rendait le défaut intermittent selon l'heure affichée, donc facile à prendre pour un effet de police. .78em = l'avance la plus large (.722em) plus une marge d'encre. À revérifier si la police d'affichage change : c'est une valeur propre à Clash Display, pas une constante. */ .rdv-digits .d i{font-style:normal;display:block;width:.78em;text-align:center; overflow:hidden;position:relative;height:1em} .rdv-digits .d i span{display:block;transition:transform .24s var(--ease),opacity .24s var(--ease)} .rdv-digits .d i .out{position:absolute;inset:0} /* Les secondes en retrait : elles bougent tout le temps, elles ne doivent pas capter l'œil. */ .rdv-digits .g.s .d{font-size:clamp(24px,3.6vw,43px);color:var(--mute)} /* ---- Prix ---- */ .rdv-price{margin-top:clamp(20px,2.6vw,28px);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .rdv-now{font-family:var(--display);font-size:clamp(60px,9vw,120px);line-height:.9;color:var(--bone)} .rdv-badge{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.04em; background:var(--volt);color:var(--ink);padding:5px 11px;border-radius:6px; transform:skewX(-8deg);white-space:nowrap} .rdv-plain{font-size:20px;font-weight:700;color:var(--bone)} /* AVANT : deux faits au même corps, sans barré et sans pourcentage. Le lecteur fait la division lui-même — la remise qu'on calcule soi-même est celle qu'on croit. */ .rdv-two{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:20px} .rdv-two b{font-weight:700;color:var(--bone)} .rdv-two .ar{color:var(--mute)} .rdv-two .fu{font-weight:400;color:var(--mute)} /* Étroit : la ligne se coupait entre la flèche et le prix d'après, laissant la flèche pendre en fin de première ligne — elle pointait vers le vide. On empile, et la flèche tourne pour désigner ce qu'elle annonce. */ @media (max-width:600px){ .rdv-two{flex-direction:column;align-items:center;gap:2px} .rdv-two .ar{transform:rotate(90deg);display:inline-block;line-height:1;margin:2px 0} } .rdv-legal{font-size:13px;color:var(--mute);margin:10px 0 0;max-width:60ch} /* ---- Actions ---- */ .rdv-acts{margin-top:clamp(22px,3vw,30px);display:flex;align-items:center;gap:18px;flex-wrap:wrap} .rdv-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:10px; font-weight:800;font-size:15px;text-decoration:none;transform:skewX(-8deg); border:2px solid var(--bone);color:var(--bone);background:transparent; transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease)} .rdv-cta:hover{transform:skewX(-8deg) translateY(-4px)} .rdv-cta.full{background:var(--volt);border-color:var(--volt);color:var(--ink)} .rdv-alt{font-size:13.5px;font-weight:700;color:var(--bone);text-decoration:underline; text-decoration-color:var(--volt);text-decoration-thickness:2px;text-underline-offset:3px} .rdv-mini{font-size:13px;color:var(--mute);margin:18px 0 0} /* ---- Visuel : carte bone sur encre = l'écho inversé des cartes blanches sur bone. Pas de skew sur une photo de chaussure : ça la fait paraître cassée. ---- */ .rdv-shot{display:flex;flex-direction:column;gap:10px} /* ---- Ajout au panier depuis l'accueil (composant qadd, cf. patterns/home.php) ---- Le composant place `.qa` en absolu et `.qsz` en `inset:0` : il lui faut un contexte de positionnement, sinon les deux se calent sur la section entière et le sélecteur de taille recouvre le titre. `.qa` est à `opacity:0` par défaut et n'est révélé que par `.pcard:hover` — règle des cartes produit, où le bouton ne doit pas encombrer une grille. Ici il n'y a pas de `.pcard` : sans cette surcharge le bouton est présent dans le DOM, mesurable, et parfaitement invisible. C'est une offre unique mise en avant, elle s'affiche d'emblée. */ .rdv-qhost{position:relative;display:block} .rdv-qhost .qa{opacity:1;transform:none;left:auto;right:14px;bottom:14px;width:auto} .rdv-qhost .qa .qadd{flex:0 0 auto;padding:0 18px;min-height:44px;border-radius:12px; box-shadow:0 8px 20px -8px rgba(14,14,14,.45)} /* le panneau épouse le rayon de la carte, pas celui des cartes produit */ .rdv-qhost .qsz{border-radius:16px;padding:clamp(14px,2vw,22px)} @media(hover:none){ .rdv-qhost .qa{right:10px;bottom:10px} } /* En colonne unique la photo est le DERNIER bloc de la section, et la barre collante `#homebar` couvre le bas de l'écran : un bouton calé en bas de la photo passe dessous. Mesuré à 390px avant correction. On le remonte en haut de la photo, où rien ne passe. */ @media(max-width:860px){ .rdv-qhost .qa{top:12px;bottom:auto;right:12px} } .rdv-card{display:block;background:var(--bone);border-radius:16px;padding:clamp(14px,2vw,26px); line-height:0} .rdv-card img{width:100%;height:auto;border-radius:8px} .rdv-cap{font-size:12px;color:var(--mute);margin:0;text-align:right} @media (max-width:860px){.rdv-shot{order:2}.rdv-cap{text-align:left}} /* ---- Téléphone : la colonne se centre ---------------------------------------- Sur écran large la section est une colonne de texte à côté d'un visuel : le bord gauche commun donne l'alignement, et centrer casserait cette arête. Sous 600px il n'y a plus de seconde colonne — le bord gauche ne tient plus rien, et la ligne du compteur, le prix et le bouton flottent chacun à une largeur différente. Centrer leur redonne un axe. Ce bloc vient APRÈS les règles étroites précédentes (notamment `.rdv-cap` à 860px et `.rdv-two` à 600px) : à spécificité égale, c'est le dernier qui gagne. Le déplacer plus haut annulerait silencieusement le centrage. */ /* Sous 400px, l'élargissement des cellules ne rentre plus : mesuré à 360px, le compteur débordait de 15,7px et les SECONDES étaient coupées par l'overflow:hidden de .rdv — sans barre de défilement ni erreur, donc invisible autrement qu'à la mesure. C'est l'écart qui cède, pas la largeur des chiffres : un chiffre tronqué est un défaut, un intervalle plus serré est un choix. Au-dessus de 400px l'écart aéré est conservé. */ @media (max-width:400px){ .rdv-digits{gap:8px} .rdv-digits .sep{font-size:clamp(22px,3.4vw,52px)} } /* Deux paliers plutôt qu'un : à 390px il restait 50px de marge, et un palier unique à 400px y resserrait l'écart pour rien. On ne paie le resserrement que là où il est dû. */ @media (max-width:370px){ .rdv-digits{gap:5px} } /* Sous 360px (iPhone SE 1re génération et assimilés), resserrer l'écart ne suffit plus : le plancher de 40px du corps des chiffres est lui-même trop grand une fois les cellules à leur vraie largeur. Mesuré à 320px : 19,7px de débordement avec le seul gap réduit. */ @media (max-width:359px){ /* Proportionnel plutôt qu'une valeur fixe : à 34px fixes il ne restait qu'1px de marge à 320px, soit une largeur de trait entre « lisible » et « coupé ». */ .rdv-digits .d{font-size:clamp(28px,9.5vw,40px)} .rdv-digits .g.s .d{font-size:clamp(17px,5.7vw,24px)} } @media (max-width:600px){ /* Le kick repasse en flux normal. En flex, le texte est un item anonyme qui occupe toute la largeur restante : `text-align:center` le centre DANS son item et laisse la pastille collée au bord gauche, à 60px du premier mot. En bloc, la pastille redevient un caractère de la phrase et suit le centrage. */ .rdv-kick{display:block;text-align:center} .rdv-kick .rdv-dot{display:inline-block;vertical-align:middle;margin-right:8px} .rdv-h,.rdv-when,.rdv-clab,.rdv-mini,.rdv-cap{text-align:center} .rdv-sub,.rdv-legal{text-align:center;margin-inline:auto} .rdv-digits,.rdv-price,.rdv-acts{justify-content:center} /* Le trait se révèle par scaleX : depuis le bord gauche il partirait hors axe. */ .rdv-rule{transform-origin:center} } /* ---- D · LE CODE SOUS LE PRIX ---- Filet volt à gauche plutôt qu'un aplat : le seul aplat volt de cette section doit rester le bouton « Choisir ma pointure ». Deux aplats dans le même écran et l'action principale perd son statut — c'est précisément le reproche fait à la variante A. */ .rdv-code{margin-top:clamp(14px,1.8vw,20px);border-left:3px solid var(--volt); padding-left:14px;display:flex;flex-direction:column;gap:3px} .rdv-code .l{font-size:15px;line-height:1.45;color:var(--bone)} .rdv-code .l b{font-weight:700} .rdv-code .l .cd{font-family:var(--display);letter-spacing:.05em;color:var(--volt)} .rdv-code .s{font-size:12.5px;line-height:1.4;color:var(--mute)} @media (max-width:600px){ .rdv-code{border-left:0;border-top:2px solid var(--volt);padding:10px 0 0;text-align:center} } /* ---- B · LE CODE COMME VIGNETTE DE LA RANGÉE ---- Même gabarit que les cartes produit voisines (rayon, coins, hauteur), couleurs inversées. Ni ni