:root{ /* La pile mono etait recopiee a la main partout ; elle a un nom depuis le 11 sept. 2026, pour que les classes neuves n'aient plus a la deviner. */ --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ground:#EEF2F2; --surface:#FFFFFF; --sunken:#E3EAEA; --line:#CBD7D8; --line-soft:#DDE5E5; --ink:#12191A; --ink-2:#3B4E52; --muted:#6B8085; /* ⚠ KIT « FORÊT », choisi par le propriétaire le 4 septembre 2026 sur maquette. Trois couleurs, et c'est le COUPLE accent/alerte qui a été jugé, pas l'accent seul : tout l'argument du site tient dans l'écart entre « vrai rabais » et « faux rabais ». Le vert dit « tu gagnes » là où la rouille dit « on te ment ». Deux essais écartés avant celui-ci, et les deux échouaient pour la même raison de fond — trop de saturation, pas assez de profondeur : #0E8F7C sarcelle (S 84 %) — « plate », et 3,55:1 sur --ground, donc SOUS le seuil AA de 4,5 ; le gris --muted d'à côté mesurait 3,69, l'accent était donc moins contrasté que le gris qu'il côtoie et se lisait comme du gris ; #1B5FD9 bleu vif (S 78 %) — « criard ». Le vert forêt tient à 50 % de saturation et 7,01:1 sur --ground. Ne pas remonter sa saturation ni sa luminosité sans refaire la mesure. */ --live:#1F5C3D; /* vert forêt : donnée vérifiée, vrai mouvement */ /* ══ LE FEU D'ACHAT NE SUIT PLUS LE KIT DU SITE (6 sept. 2026, tranche par le proprietaire : « les couleurs doivent se rapprocher d'un feu de circulation et rien a voir avec le kit du design du site »). POURQUOI C'EST LA BONNE DECISION ET PAS UN CAPRICE. Les trois etats precedents etaient des DERIVES du kit foret : un vert tire de --live, un rouge tire de --lie, un ambre invente pour tenir entre les deux. Trois couleurs choisies pour s'accorder a une page — donc trois couleurs VOISINES, et l'histoire de ce bloc n'est qu'une suite d'echecs a les separer : 1,25 puis 1,46 puis 1,58 de separation vert/rouge, 1,72 puis 1,32 en jaune/rouge. On optimisait a l'interieur d'une contrainte qui etait elle-meme le probleme. Un feu de circulation ne cherche pas l'accord : il cherche a etre COMPRIS de loin, par tout le monde, en un dixieme de seconde. C'est exactement le travail du point dans une liste qu'on balaie. Et le lecteur arrive en connaissant deja le code. LE JEU RETENU, MESURE (trois candidats compares, celui-ci gagne partout) : vert #00A94F jaune #FDB913 rouge #D8232A Separations entre remplissages — la mesure qui compte pour un oeil deutéranope, face au jeu foret qu'il remplace : vert/jaune 1,20 -> 1,79 jaune/rouge 1,32 -> 2,89 (la demande du jour : « de bcp ») vert/rouge 1,58 -> 1,62 La paire la plus faible passe donc de 1,20 a 1,62 : +35 %, et le jaune cesse d'etre une moutarde qui se confond avec la rouille. ⚠️ LE REMPLISSAGE NE PORTE PLUS LE CONTRASTE, ET C'EST ASSUME. Sur le blanc des listes, ce jeu mesure 3,09 / 1,73 / 5,01 — le jaune est tres bas. C'EST INHERENT : un jaune de feu EST clair, un jaune sombre n'est plus un jaune, c'est du brun, et c'est precisement le defaut qu'on corrige. Le contraste est donc porte par l'ANNEAU (voir la classe feu plus bas), qui tire chaque couleur a 55 % vers le noir : vert 8,07:1 jaune 5,25:1 rouge 11,11:1 sur --surface Les trois passent AA large. Le critere WCAG d'un objet graphique demande qu'une frontiere essentielle atteigne 3:1 — pas que le remplissage le fasse. ⚠️ ET LA COULEUR N'EST TOUJOURS PAS LE SEUL PORTEUR DU SENS : le point garde son title et son aria-label. Cette regle-la ne se negocie avec aucun jeu de couleurs. */ --feu-v:#00A94F; --live-wash:#DCECE2; --lie:#A63D2F; /* rouille : le faux rabais, et lui seul désormais */ --lie-wash:#F7E2DC; /* Le rouge du feu n'est pas --lie, et ne l'est plus depuis le 6 septembre : --lie est la rouille du faux rabais, une couleur de TEXTE sous une pastille. Ici c'est un rouge de feu, franc, et sa seule fonction est d'arreter l'oeil. 5,01:1 sur le blanc des listes avant meme de compter l'anneau. */ --feu-r:#D8232A; /* L'ambre. Tout l'historique de ce jeton tenait dans un arbitrage devenu sans objet : l'eclaircir pour le separer du rouge, ou l'assombrir pour tenir 3:1 sur le fond. On ne peut pas les deux, et le kit foret obligeait a choisir. L'anneau ayant repris le contraste, on prend le jaune qu'on voulait depuis le debut : celui d'un feu. ⚠️ PAS D'ACCENT GRAVE DANS CE BLOC : tout ce CSS vit dans un litteral gabarit, et un seul backtick y ferme la chaine. Deja paye deux fois. */ --feu-j:#FDB913; --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:#6FD69A; --live-wash:#12301F; --lie:#E0765C; --lie-wash:#38201A; /* LE MEME FEU, REMONTE POUR UN FOND SOMBRE. Les valeurs du mode clair y tiennent toutes sauf le rouge, qui tombe a 3,36:1 sur --surface — juste au-dessus du seuil, sans marge. On remonte donc les trois du meme geste, en gardant les teintes : 5,0 / 11,0 / 7,9:1 sur --surface, et la paire la plus faible reste a 1,39, encore au-dessus du 1,20 que le kit foret servait en mode clair. ⚠️ L'ANNEAU NE PORTE RIEN ICI. Tire vers le noir, il se fond dans le fond sombre : il ne fait que dessiner le bord du disque. En sombre, c'est le remplissage qui porte le contraste — d'ou ces valeurs plus claires, et c'est le seul endroit du fichier ou les deux themes ne se deduisent pas l'un de l'autre. */ --feu-v:#1FCB6B; --feu-j:#FFC93C; --feu-r:#F2564E; --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:#6FD69A; --live-wash:#12301F; --lie:#E0765C; --lie-wash:#38201A; --feu-v:#1FCB6B; --feu-j:#FFC93C; --feu-r:#F2564E; --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} /* ── lien d'évitement ──────────────────────────────────────────── Hors écran tant qu'on ne l'atteint pas au clavier, visible dès qu'il a le focus. Il ne se cache PAS en display:none : un élément masqué ainsi ne peut pas recevoir le focus, et le lien ne servirait donc jamais. */ .saut{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--surface); padding:10px 16px; font-weight:600; text-decoration:none; border-radius:0 0 6px 0; } .saut:focus{left:0} /* ── rail d'état ─────────────────────────────────────────────── */ .rail{ border-bottom:1px solid var(--line); background:var(--sunken); position:sticky; top:0; z-index:20; } /* ⚠ TROIS ZONES, PAS UNE RANGEE (10 sept. 2026, demande du proprietaire : le menu de pays « dans le bandeau du haut en plein centre »). Une rangee flex avec margin-left:auto sur le dernier element ne peut pas centrer celui du milieu : pas d'accent grave ici, ce commentaire vit dans un gabarit de chaine — le centre se decale des que les compteurs changent de largeur — et ils changent a chaque pays, « 408 SHOPS » contre « 34 SHOPS ». La grille a colonnes egales de part et d'autre tient le centre quoi qu'il arrive. */ .rail-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; 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-g{display:flex; align-items:center; min-width:0} .rail-g--r{justify-content:flex-end} .rail-item{padding:0 16px; border-right:1px solid var(--line-soft); white-space:nowrap} .rail-g--l .rail-item:first-child{padding-left:0} .rail-g--l .rail-item:last-child{border-right:0} .rail-g--r .rail-item{border-right:0; 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. ⚠ LE COMMENTAIRE LE DISAIT, LA REGLE NE LE FAISAIT PAS (trouve le 3 septembre 2026, signale par le proprietaire : « le rendu sur un cell ne fonctionne pas »). nav est un enfant flex de .brandbar ; sans min-width:0, un enfant flex refuse de se retrecir sous la largeur de son contenu (min-width:auto est la valeur par defaut). Ses sept rubriques poussaient donc TOUTE LA PAGE en largeur — chaque page du site, pas seulement le menu — et un telephone rendait un site deux fois trop large, defilant horizontalement, rien de casse a l'oeil mais illisible. Pas d'accent grave dans ce commentaire : il vit dans un gabarit de chaine. */ .men .sm{display:none} nav{min-width:0; overflow-x:auto; scrollbar-width:none} nav::-webkit-scrollbar{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} /* LE MENU DE PAYS, AU CENTRE DU BANDEAU DU HAUT. Il a passe la journee dans la barre de marque, ou il tenait la rangee de droite avec la navigation : le proprietaire l'a voulu au centre du bandeau, et la navigation y a regagne toute sa largeur — .brandbar retrouve ses deux enfants et son space-between d'origine. Il s'habille comme le bandeau, pas comme un formulaire : meme fonte a chasse fixe, memes capitales, fond transparent. Un select blanc a bordure au milieu d'une bande grise se lirait comme un corps etranger colle par-dessus. Pas d'accent grave ici : ce commentaire vit dans un gabarit de chaine. */ /* ⚠ IL DOIT SE VOIR EN ARRIVANT (10 sept. 2026, demande du proprietaire : « rend cette case plus dynamique et tape a l'oeil pour etre sur de la voir en partant »). La premiere version l'habillait du bandeau — meme gris, meme discretion — et elle disparaissait dans une bande de compteurs gris. Un reglage que personne ne remarque ne sert a personne : le lecteur repart avec les prix du monde entier au lieu des siens, et ne saura jamais qu'il pouvait choisir. Il porte donc la couleur vive du site, celle du verdict verifie, et un fond plein. C'est le seul element ACTIONNABLE de cette bande — tout le reste y est un chiffre a lire — et il est maintenant le seul a etre colore. */ .cur{display:flex; align-items:center; gap:8px; flex:none} .cur-lab{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--live); font-weight:600; white-space:nowrap} .cur-sel{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.04em; color:#fff; font-weight:600; background:var(--live); border:1px solid var(--live); border-radius:5px; padding:4px 26px 4px 10px; cursor:pointer; max-width:46vw; /* La fleche est DESSINEE, pas heritee : l'habillage natif du select rend un chevron gris que le fond vert avale, et le controle perd le signe qu'il se deroule. */ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; transition:box-shadow .18s ease, transform .18s ease; } .cur-sel:hover{transform:translateY(-1px); box-shadow:0 2px 10px color-mix(in srgb,var(--live) 45%,transparent)} .cur-sel:focus-visible{outline:2px solid var(--ink); outline-offset:2px} .cur-sel option{background:var(--surface); color:var(--ink); font-weight:400} /* ⚠ L'APPEL NE BAT QUE TANT QU'AUCUN PAYS N'EST CHOISI. Une fois le choix fait, il n'y a plus rien a demander au lecteur, et une pastille qui continue de pulser au coin d'un reglage deja regle se lit comme une alerte. ⚠ ET IL DOIT SE VOIR : la premiere version ne faisait varier qu'une ombre portee sur six pixels, trois fois — « on s'apercoit presque de rien ». Une ombre qui grandit derriere un bouton se perd contre un fond gris ; ce qui attire l'oeil, c'est le MOUVEMENT du bouton lui-meme et un halo qui parcourt une vraie distance. Trois choses bougent donc ensemble, et huit fois plutot que trois : l'echelle, le halo (jusqu'a 14 px), et la luminosite du fond. Le mouvement reste petit — 4 % — parce qu'un bouton qui saute dans un bandeau collant devient penible en trois secondes ; c'est la REPETITION qui le fait remarquer, pas l'amplitude. */ .cur--neuf .cur-sel{animation:curpuls 1.5s ease-in-out 8} .cur--neuf .cur-lab{animation:curlab 1.5s ease-in-out 8} @keyframes curpuls{ 0%,100%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 70%,transparent); filter:none} 35%{transform:scale(1.04); box-shadow:0 0 0 8px color-mix(in srgb,var(--live) 26%,transparent); filter:brightness(1.12)} 70%{transform:scale(1); box-shadow:0 0 0 14px transparent; filter:none} } @keyframes curlab{ 0%,100%{opacity:.62} 35%{opacity:1} } @media (prefers-reduced-motion:reduce){ .cur--neuf .cur-sel,.cur--neuf .cur-lab{animation:none} } @media(max-width:760px){ .cur-lab{display:none} } /* La note du bandeau : elle dit le pays choisi, discrete, et ne parait que filtre. */ .pays-note{font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.5} /* ── 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} /* SANS CARTE, UNE SEULE COLONNE. Un pays peut n'avoir aucun des cinq verdicts a montrer : la colonne de droite restait alors vide sur toute la hauteur du premier ecran, et la phrase d'accroche se serrait dans une moitie de page pour rien. */ .hero--seul{grid-template-columns:minmax(0,1fr); max-width:none} .hero--seul .lede{max-width:64ch} /* 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