:root{ --ground:#EEF2F2; --surface:#FFFFFF; --sunken:#E3EAEA; --line:#CBD7D8; --line-soft:#DDE5E5; --ink:#0D1719; --ink-2:#3B4E52; --muted:#6B8085; --live:#0E8F7C; /* teal : donnée vérifiée, vrai mouvement */ --live-wash:#D3EDE8; --lie:#B4462F; /* rouille : réservé au faux rabais, rien d'autre */ --lie-wash:#F6DED8; --grid:#D6E0E1; --shadow:0 1px 2px rgba(13,23,25,.06), 0 8px 24px -12px rgba(13,23,25,.18); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#0C1417; --surface:#131F23; --sunken:#0A1113; --line:#22343A; --line-soft:#1A2A2F; --ink:#E6EFF0; --ink-2:#B3C6C9; --muted:#7B9198; --live:#4FD6BC; --live-wash:#12332E; --lie:#E0765C; --lie-wash:#38201A; --grid:#1C2C31; --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ --ground:#0C1417; --surface:#131F23; --sunken:#0A1113; --line:#22343A; --line-soft:#1A2A2F; --ink:#E6EFF0; --ink-2:#B3C6C9; --muted:#7B9198; --live:#4FD6BC; --live-wash:#12332E; --lie:#E0765C; --lie-wash:#38201A; --grid:#1C2C31; --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.7); } *{box-sizing:border-box} body{ margin:0; background:var(--ground); color:var(--ink); font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1180px; margin:0 auto; padding:0 28px} h1,h2,h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; text-wrap:balance; margin:0} .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums} a{color:inherit} /* ── rail d'état ─────────────────────────────────────────────── */ .rail{ border-bottom:1px solid var(--line); background:var(--sunken); position:sticky; top:0; z-index:20; } .rail-in{ display:flex; align-items:center; gap:0; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); min-height:38px; } .rail-in b{color:var(--ink); font-weight:600} .rail-item{padding:0 16px; border-right:1px solid var(--line-soft); white-space:nowrap} .rail-item:first-child{padding-left:0} .rail-item:last-child{border-right:0; margin-left:auto; padding-right:0; display:flex; align-items:center; gap:7px} .pulse{width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 var(--live); animation:p 2.6s infinite} @keyframes p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){.pulse{animation:none}} /* ── entête ──────────────────────────────────────────────────── */ header{padding:26px 0 0} .brandbar{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap} /* LA MARQUE. Pas de symbole : le mot suffit, et deux CAPITALES suffisent a le decouper — ElectricSkateboard se lit d'un coup, electricskateboard non. Le sarcelle marque les deux initiales, la meme couleur que le verdict verifie. */ .brand{font-family:Archivo,sans-serif; font-weight:800; font-size:21px; letter-spacing:-.024em; color:var(--ink)} .brand b{color:var(--live); font-weight:800} .brand-tld{color:var(--muted); font-weight:500; font-size:.82em} .brand:hover b{color:var(--ink)} nav{display:flex; gap:22px; font-size:13.5px; color:var(--ink-2)} /* LE MENU DEROULANT. Il s'ouvre au survol ET au focus clavier : focus-within couvre les deux sans une ligne de script. Le panneau est en position absolue dans un .men en position relative — il ne pousse rien, et le pont invisible de 10 px (le padding-top) evite qu'il se referme quand la souris traverse l'espace entre le lien et le panneau. Pas d'accent grave ici : ce commentaire vit dans un gabarit de chaine. */ .men{position:relative; display:flex; align-items:center} .men > a{white-space:nowrap} .men .sm{position:absolute; top:100%; left:-14px; z-index:60; padding-top:10px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease, visibility 0s .12s} /* LES DERNIERS MENUS S'OUVRENT VERS L'INTERIEUR. Cale a gauche, le panneau d'« Apparels » debordait de 21 px a droite — et un panneau seulement masque occupe quand meme la place : la page entiere gagnait une barre de defilement horizontale, fermee comme ouverte. Les quatre derniers s'ancrent a droite. */ .men:nth-last-child(-n+4) .sm{left:auto; right:-14px} .men:hover .sm, .men:focus-within .sm{opacity:1; visibility:visible; transform:none; transition-delay:0s} .sm-in{background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:0 12px 28px rgba(13,23,25,.10); padding:8px; min-width:232px; display:grid; grid-template-columns:1fr; gap:1px} .sm-in a{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 10px; border-radius:3px; border-bottom:0; font-size:13px; color:var(--ink-2)} .sm-in a:hover,.sm-in a:focus-visible{background:var(--sunken); color:var(--ink); outline:none} .sm-in a span{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)} @media(max-width:900px){ /* Sur un ecran etroit il n'y a pas la place pour un panneau flottant : le bandeau garde ses sept engins et se fait defiler, les rayons restent accessibles depuis la page de chaque engin. */ .men .sm{display:none} } nav a{text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent} nav a:hover,nav a:focus-visible{border-bottom-color:var(--live); color:var(--ink); outline:none} /* ── héros ───────────────────────────────────────────────────── */ /* LE HEROS : DEUX COLONNES QUI COMMENCENT ENSEMBLE. * * La version precedente sortait le titre sur toute la largeur, au-dessus des deux * colonnes. Deux defauts en sont nes : un grand vide a droite du titre, que rien * ne remplissait, et une colonne de gauche CENTREE VERTICALEMENT contre une carte * bien plus haute — le texte flottait au milieu de nulle part. Les trois blocs se * lisaient comme trois choses separees. * * Le titre revient dans sa colonne, et les deux colonnes s'alignent en HAUT : * l'oeil part du meme trait de gauche a droite. * * DEUX LIGNES, ET LA COUPURE EST CHOISIE. La phrase bascule au point — « That * sale is a deal. » puis « Unless it isn't. ». Laisser le navigateur casser ou il * veut brisait le balancement au milieu d'une proposition. */ /* SANS L'EYEBROW, LE HEROS REMONTE. Les 52 px du haut compensaient une ligne qui n'est plus la ; le titre commence donc plus pres du bandeau, et l'air perdu en haut est rendu en bas, ou il separe le heros de la recherche. */ .hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:52px; align-items:start; padding:34px 0 58px} /* LA TAILLE DE LA PHRASE D'ACCROCHE. Elle etait descendue a 44px pour tenir dans sa colonne — resultat : le seul mot que l'oeil voyait en premier etait le verdict « Real deal. » de la carte de droite, a 58px. La promesse du site se faisait dominer par son propre exemple. Elle remonte au niveau du verdict ; la coupure au point garde les deux lignes courtes, donc la largeur tient. */ /* LA TAILLE SUIT LA LONGUEUR DU TITRE. « That sale is a deal. » remplissait la colonne a 58 px ; « Buy it now. » n'en occupe que la moitie — 276 px sur 531 — et se faisait dominer par le verdict de la carte voisine, qui fait 58 px lui aussi. Le titre le plus court doit etre le plus gros, sinon il pese moins. */ /* PAS DE CORRECTION OPTIQUE EN PIXELS FIXES. Essayee le 1er septembre : un un margin-top negatif pour aligner le trait du « B » sur le bord de la carte. Or la police est FLUIDE — de 40 a 84 px selon la largeur — et un decalage fixe est juste a une seule taille, faux partout ailleurs. Les boites s'alignent, et le leger retrait du texte dans sa boite est ce que fait n'importe quel titre du site. */ .hero-mot h1{font-size:clamp(40px,6.4vw,84px); line-height:.98} .hero-mot .lede{margin-top:24px} @media(max-width:900px){.hero{grid-template-columns:1fr; gap:30px; padding:26px 0 38px} .hero-mot h1{font-size:clamp(36px,9vw,58px)}} /* ── fil d'Ariane ────────────────────────────────────────────── */ /* IL SE LIT AVANT LE TITRE, DONC IL NE DOIT PAS LE CONCURRENCER : monospace, petit, gris, un chevron maigre entre les maillons. Le dernier maillon n'est pas un lien — on n'envoie pas le lecteur sur la page ou il est deja. Il se met a defiler horizontalement plutot qu'a passer a la ligne : quatre maillons sur deux lignes se lisent comme deux fils. */ /* PAS DE display:flex ICI — et surtout pas d'accent grave dans ce commentaire, il vit a l'interieur d'un gabarit de chaine (bug du 31 aout : le serveur ne demarrait plus). La bande contient un .wrap, qui se centre avec margin:0 auto ; un element flex a marges auto se centre sur sa LARGEUR DE CONTENU, et le fil partait donc au milieu de la page pendant que la carte du produit commencait a gauche. La bande reste un bloc, le .wrap aligne, la rangee interieure est en flex. */ .ariane{ /* display:block EST OBLIGATOIRE, PAS COSMETIQUE. La regle nue nav{display:flex} (la barre de navigation de l'en-tete) s'applique aussi a ce