/* Fichier issu de la feuille de l'accueil, le 2026-09-02 : le sélecteur ayant sa
propre page, ses styles n'avaient plus rien à faire sur l'accueil.
Il vient APRÈS article.css, qui porte les variables et l'ossature. */
/* ===== Sélecteur de jantes ===== */
.sel-grille{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media(max-width:900px){.sel-grille{grid-template-columns:1fr}}
#selecteur .etiquette{margin-bottom:1.1rem}
/* ---------- Filtres ---------- */
.filtres{position:sticky;top:1rem;background:var(--blanc);border:1px solid var(--trait)}
@media(max-width:900px){.filtres{position:static}}
.filtres-tete{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem;border-bottom:1px solid var(--trait)}
.filtres-tete h2{font-size:1.05rem}
.raz{background:none;border:0;color:var(--orange-fonce);font-size:0.82rem;cursor:pointer;text-decoration:underline;padding:0}
.facette{border-bottom:1px solid var(--trait);padding:1rem 1.1rem}
.facette:last-child{border-bottom:0}
.facette h3{font-family:var(--mono);font-size:0.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);font-weight:500;margin-bottom:.7rem;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.facette h3 i{font-style:normal;font-size:0.72rem;letter-spacing:.06em;text-transform:none;color:var(--orange-fonce)}
.facette.cle{background:var(--orange-pale)}
.facette.cle h3{color:var(--orange-fonce)}
.opt{display:flex;align-items:center;gap:.6rem;padding:.32rem 0;cursor:pointer;font-size:0.92rem}
.opt input{accent-color:var(--orange);width:16px;height:16px;flex:0 0 auto;margin:0}
.opt .n{margin-left:auto;font-family:var(--mono);font-size:0.74rem;color:var(--gris)}
.opt.vide{opacity:.32;cursor:not-allowed}
.opt.vide .n{color:var(--gris)}
.opt.coche{font-weight:600;color:var(--orange-fonce)}
/* ---------- Résultats ---------- */
.barre{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.25rem}
.compte{font-family:var(--display);font-weight:800;font-size:1.25rem}
.jeton{display:inline-flex;align-items:center;gap:.4rem;background:var(--orange-pale);border:1px solid var(--orange);color:var(--orange-fonce);font-size:0.8rem;padding:.25rem .6rem;border-radius:99px}
.jeton button{background:none;border:0;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}
/* Les zones d'une vignette s'alignent sur celles de ses voisines : photo,
titre, caractéristiques, description, largeur. Sans ça, une description
de deux lignes décale la pastille de largeur d'une carte à l'autre.
Cinq emplacements exactement — un sixième enfant tomberait dans une
ligne de hauteur nulle et deviendrait invisible. */
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1rem}
.vignette{position:relative;background:var(--blanc);border:1px solid var(--trait);padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.vignette:hover{border-color:var(--orange);transform:translateY(-2px)}
.vignette.choisie{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-pale)}
/* Le vrai bouton, transparent, étendu sur toute la carte. En position
absolue, il ne consomme aucun emplacement de la sous-grille. Le
liseré de focus se dessine à l'intérieur, sur le bord de la carte. */
.vignette .ouvre{position:absolute;inset:0;z-index:1;
background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit}
.vignette .ouvre:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* Le libellé du bouton : lu par les lecteurs d'écran, invisible à
l'écran. Sans lui, le bouton n'aurait aucun nom accessible. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.profil{background:linear-gradient(160deg,#F7F8F9,#ECEFF2);padding:1.1rem .8rem .6rem;display:flex;align-items:flex-end;justify-content:center;min-height:118px;position:relative}
.profil svg{max-width:100%;height:auto}
.profil.photo{padding:.5rem;min-height:132px;height:calc(118px + 1rem);
background:var(--blanc);align-items:center}
/* Le profil de secours, dessiné, tient dans la même boîte. */
.profil.photo svg{max-height:100%}
.profil.photo img{max-width:100%;max-height:118px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.corps .resume{display:block;font-size:0.8rem;color:var(--gris);line-height:1.5;margin-top:.5rem}
.opt-lg .det.resume{color:#9FB0C4;margin-top:.5rem}
.opt-lg .teintes{position:static;display:block;margin-top:.7rem}
.opt-lg .teintes:empty{margin:0}
.opt-lg .liens{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:.7rem}
/* Même allure que le lien voisin : c'est une commande de texte, pas un
bouton plein, sinon elle prendrait le pas sur « Choisir cette jante ». */
/* Ce bouton vit sur les cartes sombres du panneau : même arbitrage que
les intitulés de rôle, l'orange clair au lieu de l'orange de charte. */
.opt-lg .fiche{display:inline-block;font-family:var(--mono);font-size:0.72rem;color:var(--orange-clair);text-decoration:underline}
/* Texte marine sur le kraft : le blanc n'y donnait que 2,29:1, le pire
contraste du site. En marine, 6,88:1. */
/* Étiquettes de vignette. Elles signalent, elles ne crient pas : plus de
capitales forcées — « Tubeless Ready » se lit mieux tel qu'il s'écrit —,
graisse allégée, interlettrage resserré, angles adoucis. Le fond garde
sa densité : c'est lui qui porte la lisibilité par-dessus la photo, et
le blanc sur le marine tient 13,28:1. */
.badge{position:absolute;top:.5rem;right:.5rem;font-family:var(--mono);font-weight:500;font-size:0.64rem;letter-spacing:.02em;line-height:1.35;padding:.2rem .5rem;border-radius:999px;background:var(--kraft);color:var(--marine-nuit);box-shadow:0 1px 3px rgba(23,32,43,.14)}
/* Le badge tubeless a un fond marine : son texte doit rester blanc,
sinon on obtient du marine sur du marine — 2,05:1, illisible.
En blanc : 13,28:1. */
.badges-g{position:absolute;top:.5rem;left:.5rem;z-index:2;
display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.badges-g .badge{position:static;top:auto;left:auto;right:auto}
.badge.tl{background:var(--marine);color:var(--blanc)}
/* Une gamme annoncée avant d'être à la boutique. En orange plein, au-dessus
du badge Tubeless : c'est la première chose à savoir sur cette jante, et
la seule qui ne se lise nulle part ailleurs sur la vignette. Texte encre
sur #FE5000 : 6,1:1. */
.badge.neuf{background:var(--orange);color:var(--encre);font-weight:600}
/* Le stock, sur la vignette. Deux poids différents, et c'est voulu : le
cas normal — disponible — se dit à voix basse, en vert pâle ; l'exception
— sur commande — se dit fort, en orange plein. Vingt-cinq badges verts
pleins auraient couvert les photos sans rien apprendre à personne.
Le mot est toujours écrit : la couleur seule ne porte jamais le sens. */
/* Le badge reprend la chasse fixe et le marine des autres badges de la
vignette : la jauge apporte la couleur, le texte reste du texte. */
.badge.stk.ok{background:var(--blanc);color:var(--marine-nuit);
border:1px solid var(--trait);box-shadow:0 1px 3px rgba(23,32,43,.14);
display:inline-flex;align-items:center;gap:.34rem;font-weight:600}
/* Posé sur la ligne de la pastille de largeur, à l'opposé d'elle : la
carte y est vide, et la photo de la jante reste dégagée. Les valeurs
reprennent les marges du corps de la vignette (.9rem sur les côtés,
1rem en bas) pour tomber exactement sur la même ligne que « 13C ». */
.vignette .badge.stk{top:auto;left:auto;right:.9rem;bottom:.95rem;z-index:2;
box-shadow:none}
.badge.stk .jauge{height:10px}
.badge.stk .jauge i{width:3px}
.badge.stk .jauge i:nth-child(1){height:4px}
.badge.stk .jauge i:nth-child(2){height:5.5px}
.badge.stk .jauge i:nth-child(3){height:7px}
.badge.stk .jauge i:nth-child(4){height:8.5px}
.badge.stk .jauge i:nth-child(5){height:10px}
.badge.stk.cmde{background:var(--orange-fonce);color:var(--blanc)}
/* --- La jauge de stock : cinq barres, comme un signal de réseau ------
Les barres ne portent JAMAIS le sens à elles seules : le palier est
toujours écrit à côté (« +20 jantes »). Elles sont donc décoratives au
sens de la WCAG, et marquées aria-hidden. */
.jauge{display:inline-flex;align-items:flex-end;gap:1.5px;height:13px;
flex:0 0 auto}
.jauge i{display:block;width:3.5px;background:#D7DADD;border-radius:.5px}
.jauge i:nth-child(1){height:5px}
.jauge i:nth-child(2){height:7px}
.jauge i:nth-child(3){height:9px}
.jauge i:nth-child(4){height:11px}
.jauge i:nth-child(5){height:13px}
/* Les couleurs franches d'un indicateur de réseau : rouge, orange, jaune,
vert clair, vert. Elles peuvent être vives parce qu'elles ne portent
AUCUNE information à elles seules — le palier est écrit en toutes
lettres juste à côté, et les barres sont marquées aria-hidden. C'est ce
qui les dispense du seuil de contraste : elles décorent une valeur déjà
lisible, elles ne la remplacent pas. */
.jauge.j1 i.on{background:#E03A2F}
.jauge.j2 i.on{background:#F2761B}
.jauge.j3 i.on{background:#F5B301}
.jauge.j4 i.on{background:#8CC63F}
.jauge.j5 i.on{background:#3DAE4B}
/* « Sur commande » : le kraft des badges dirait « option », le marine
dirait « caractéristique ». Celui-ci est une réserve, il prend donc
l'orange sombre de la charte, sur lequel le blanc tient 5,3:1. */
.badge.cmde{background:var(--orange-fonce);color:var(--blanc)}
/* Dans la fiche, la mention suit le titre au lieu de flotter. */
.fi-cmde{display:inline-block;font-family:var(--mono);font-size:.72rem;
letter-spacing:.04em;padding:.2rem .5rem;border-radius:999px;
background:var(--orange-fonce);color:var(--blanc);margin-left:.5rem;
vertical-align:middle}
.corps{padding:.85rem .9rem 1rem}
.corps .gamme{font-family:var(--display);font-weight:800;font-size:1rem;display:block}
.corps .det{display:block;font-family:var(--mono);font-size:0.72rem;color:var(--gris);margin-top:.3rem;line-height:1.55}
.corps .lg{display:inline-block;font-family:var(--mono);font-size:0.72rem;background:var(--encre);color:#fff;padding:.12rem .4rem;margin-top:.5rem}
/* Filet, valable partout : la carte est une colonne flexible, le corps
s'étire, et la pastille de largeur est poussée en bas. Les cartes
d'une même rangée ayant la même hauteur, les pastilles s'alignent —
même sans sous-grille. */
.vignette .corps{display:flex;flex-direction:column;flex:1 1 auto}
.vignette .corps .lg{margin-top:auto;align-self:flex-start}
/* Alignement complet — titre, caractéristiques, description, largeur —
là où la sous-grille existe : Safari 16, Chrome 117, Firefox 71.
Cinq emplacements exactement ; un sixième enfant tomberait dans une
ligne de hauteur nulle et deviendrait invisible.
ATTENTION : ce bloc doit rester APRÈS .vignette{display:flex}, sinon
la règle de base l'écrase et rien ne s'aligne. */
@supports (grid-template-rows: subgrid){
.vignettes{grid-auto-rows:auto}
.vignette{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.vignette .corps{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:0}
.vignette .corps > *{margin-inline:.9rem}
.vignette .corps .gamme{margin-top:.85rem}
.vignette .corps .lg{margin-top:.5rem;margin-bottom:1rem;align-self:end;justify-self:start}
}
.teintes{position:absolute;left:.55rem;bottom:.5rem;display:flex;gap:.25rem}
.teintes .pt{width:13px;height:13px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.22)}
/* Sur la vignette : au-dessus du bouton d'ouverture (z-index 1), en
dessous de « Comparer » (3). Et un peu plus grosses qu'avant : à
13 px, personne ne devine qu'on peut cliquer. */
.vignette .teintes{z-index:2}
.vignette .teintes .pt{width:17px;height:17px;padding:0;
transition:box-shadow .12s ease,transform .12s ease}
.vignette .teintes .pt:hover{transform:scale(1.12);box-shadow:0 0 0 2px var(--orange-clair)}
@media(hover:none){.vignette .teintes .pt{width:20px;height:20px}}
.pt{cursor:pointer}
.pt.pris{box-shadow:0 0 0 2px var(--orange)}
.pt-txt{font-family:var(--mono);font-size:.72rem;color:#8894A6;cursor:pointer;
padding:.1rem .35rem;border:1px solid transparent;border-radius:2px;margin-left:0}
.pt-txt:hover{color:var(--blanc)}
.pt-txt.pris{color:var(--orange);border-color:var(--orange)}
.pt-rang{display:flex;align-items:center;gap:.35rem}
/* --- Là où il y a un choix à faire, ça doit se voir ---------------------
Les pastilles étaient de simples points, sans rien pour dire qu'on
pouvait cliquer dessus : le visiteur les prenait pour un rappel des
teintes disponibles. Dans les panneaux — rayons et jante —, le choix
s'entoure d'un filet et se fait désormais sur des boutons NOMMÉS (voir
plus bas). Sur les vignettes, les pastilles restent de simples repères
et ne changent pas. */
/* box-sizing:border-box — sans lui, le padding s'ajoutait à la largeur
déjà imposée par la sous-grille : le cadre débordait de 9 px à droite et
ne s'alignait plus sur le texte au-dessus ni sur les liens en dessous. */
.ray-carte .teintes,.opt-lg .teintes.choix{background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.18);border-radius:3px;padding:.5rem .6rem;
box-sizing:border-box}
.pt-titre{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--alu);margin-bottom:.4rem}
/* Le libellé « au choix » des rayons est lui aussi une commande : on lui
laisse son filet en permanence, et non seulement une fois retenu. */
.ray-carte .pt-txt,.opt-lg .teintes.choix .pt-txt{border-color:rgba(255,255,255,.28);
padding:.22rem .5rem}
.ray-carte .pt-txt:hover,.opt-lg .teintes.choix .pt-txt:hover{
border-color:var(--orange-clair);color:var(--blanc)}
.ray-carte .pt-txt.pris,.opt-lg .teintes.choix .pt-txt.pris{background:rgba(254,80,0,.16)}
/* --- UNE COULEUR SE CHOISIT SUR UN BOUTON NOMMÉ -------------------------
Dans les panneaux, la couleur se donnait par des pastilles nues suivies
d'un « argent ou noir » en gris : trois signes qui, ensemble, se lisent
comme un RAPPEL des teintes disponibles, pas comme une question posée.
La fiche produit, elle, était claire — parce qu'elle écrit « Argent »
et « Noir » sur des boutons, la pastille en tête. C'est ce geste-là
qui est repris ici, à l'identique.
LE GRIS #8894A6 EST GARDÉ POUR LES VIGNETTES, où ces mêmes classes ne
sont que des repères ; dans les panneaux il passe à --alu : sur le
marine, le gris d'origine plafonnait à 4,4:1 et donnait à des boutons
bien vivants l'air d'être désactivés. */
.pt-nom{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.pt-nom .rond{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
border:1.5px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.ray-carte .pt-txt,.opt-lg .teintes.choix .pt-txt{color:var(--alu)}
.ray-carte .pt-txt.pris,.opt-lg .teintes.choix .pt-txt.pris{color:var(--orange-clair)}
/* Les cartes sont étroites : à trois boutons nommés, la rangée doit
pouvoir passer à la ligne plutôt que déborder. */
.ray-carte .pt-rang,.opt-lg .teintes.choix .pt-rang{flex-wrap:wrap;row-gap:.3rem}
.pt-txt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.pt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* --- ORANGE SUR FOND SOMBRE : LEQUEL ---------------------------------
Les cartes du panneau ont un fond marine, et la carte retenue reçoit en
plus un voile orange. L'orange de la charte (#FE5000) n'y donne que
4,31:1 — sous le seuil de 4,5. L'orange clair passe à 5,28:1 sans
changer la couleur perçue. Les fonds CLAIRS, eux, gardent l'orange
foncé : sur du blanc, c'est l'inverse qui est vrai.
Les règles concernées sont corrigées une par une, plus bas : posée
ici, une règle groupée aurait été écrasée par les leurs, à
spécificité égale et plus loin dans la feuille. */
/* Le libellé retenu se lit sur le voile orange de la carte active :
l'orange clair (#FF8040) y retombe à 4,01:1. Un cran plus clair, et il repasse. */
.ray-carte .pt-txt.pris,.opt-lg .teintes.choix .pt-txt.pris{color:var(--orange-lisible)}
.rien{background:var(--blanc);border:1px dashed var(--trait);padding:2.5rem;text-align:center;color:var(--gris)}
/* ---------- Panneau largeurs ---------- */
.panneau{margin-top:2rem;background:var(--marine-nuit);color:#fff;padding:clamp(1.25rem,2.5vw,2rem)}
.panneau h2{color:#fff;font-size:1.3rem;margin-bottom:.4rem}
.panneau > p{color:var(--alu);font-size:0.93rem;margin-bottom:1.5rem}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:820px){}
.facette.replie{padding-block:.7rem}
/* #8894A6 sur blanc ne donnait que 3,07:1 à 12 px. #6B7688 en donne
4,58:1, sans changer l'impression de gris discret. */
.etrto{font-family:var(--mono);font-size:.75rem;font-style:italic;color:#6B7688;margin-left:.3rem}
.facette.bloquee{opacity:.42}
.facette.bloquee .opt{cursor:not-allowed}
.facette.bloquee h3 i{color:#8894A6}
.facette.replie .opt{padding:.15rem 0}
.modif{background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:0.72rem;letter-spacing:.06em;text-transform:none;color:var(--orange-fonce);text-decoration:underline}
.modif:hover{color:var(--orange-fonce)}
/* Deux blocs distincts : le fond de jante, puis les autres largeurs */
#panneau > .panneau + .panneau{margin-top:1.25rem}
.opt-lg .role{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.alt{margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.16)}
.alt h2{font-size:1.3rem;margin-bottom:.5rem}
.fdj h3{margin-bottom:1.1rem}
.fdj{margin:0;padding:0;border:0}
/* ---------- Rayons ---------- */
.ray{padding:0}
/* ---------- Appel à remplir la fiche ---------- */
/* ---------- Les coordonnées du client ----------
Les champs sont plus clairs que le fond : à 6 % de blanc ils se
confondaient avec le panneau, on ne voyait pas où écrire. À 14 % ils se
lisent comme des champs, et le texte blanc y garde 11,9:1.
Les écarts sont resserrés : sept champs qui tiennent sous les yeux
valent mieux qu'un bloc qu'il faut faire défiler. */
.cli h2{font-size:clamp(1.05rem,1.5vw,1.28rem);margin:0 0 .2rem;line-height:1.25}
.cli-sous{color:var(--alu);font-size:.88rem;line-height:1.4;margin:0 0 .8rem;max-width:56ch}
.cli-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .8rem}
.cli-champ{margin:0;display:flex;flex-direction:column;gap:.18rem}
.cli-champ.large{grid-column:1 / -1}
.cli-champ label{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
line-height:1.2;text-transform:uppercase;color:var(--alu)}
.cli-champ label b{color:var(--orange-clair);font-weight:400}
.cli-champ input,.cli-champ textarea{
font-family:inherit;font-size:.94rem;line-height:1.3;color:var(--blanc);
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
border-radius:3px;padding:.42rem .6rem;width:100%;
transition:border-color .15s,background-color .15s}
.cli-champ textarea{resize:vertical;min-height:2.9rem;line-height:1.35}
.cli-champ input::placeholder,.cli-champ textarea::placeholder{color:#9FB0C4}
.cli-champ input:hover,.cli-champ textarea:hover{background:rgba(255,255,255,.18)}
.cli-champ input:focus,.cli-champ textarea:focus{
outline:2px solid var(--orange);outline-offset:1px;
border-color:var(--orange);background:rgba(255,255,255,.2)}
.cli-champ.manque input,.cli-champ.manque textarea{border-color:var(--orange)}
.cli-champ.manque label{color:var(--orange-lisible)}
.cli-note{color:var(--alu);font-size:.8rem;line-height:1.4;margin:.6rem 0 0;max-width:64ch}
.cli-alerte{margin:.55rem 0 0;padding:.5rem .7rem;font-size:.86rem;line-height:1.35;
color:var(--encre);background:var(--orange);border-radius:3px}
@media(max-width:560px){.cli-grille{grid-template-columns:minmax(0,1fr)}}
.fiche-appel{margin-top:1.25rem;background:var(--orange);padding:1.4rem 1.5rem;text-align:center}
/* LES DEUX BOUTONS SONT DE MÊME TAILLE. Superposés, ils ne peuvent pas
avoir deux largeurs ni deux hauteurs : la même largeur imposée, la même
graisse, la même marge intérieure — et un filet transparent sur le
premier, pour compenser au pixel près le filet plein du second, que
box-sizing compte dans la hauteur. */
.bouton-fiche{display:flex;align-items:center;justify-content:center;gap:.55rem;
width:100%;max-width:27rem;margin-inline:auto;
background:var(--encre);color:#fff;border:2px solid transparent;cursor:pointer;
font-family:var(--display);font-weight:700;font-size:1.05rem;
padding:.95rem 1.8rem;border-radius:3px;
transition:background-color .15s ease,transform .15s ease}
.bouton-fiche:hover:not(:disabled){background:#000;transform:translateY(-1px)}
.bouton-fiche:disabled{opacity:.75;cursor:progress}
.bouton-fiche:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
/* Le second bouton, sous le premier : même geste, plus la boutique. En
blanc bordé plutôt qu'en plein, parce que sur ce fond orange deux
boutons noirs superposés se disputeraient le regard — celui du haut
reste l'action principale, la fiche étant obligatoire dans le colis. */
/* display:flex et non inline-flex : le second bouton doit passer À LA
LIGNE sous le premier. En inline, les deux se rangeaient côte à côte et
l'ordre — la fiche d'abord — ne se lisait plus. */
.bouton-fiche-2{margin-top:.7rem;background:#fff;
color:var(--marine-nuit);border-color:var(--encre)}
.bouton-fiche-2:hover:not(:disabled){background:var(--encre);color:#fff}
.bouton-fiche-2:focus-visible{outline-color:#fff}
.fiche-appel .fiche-note2{margin-top:.35rem;font-size:.82rem}
.fiche-appel p{margin:.85rem 0 0;font-size:.9rem;color:var(--encre);font-weight:500}
.bouton-fiche .etat{display:inline-block;min-width:15ch}
.carte-choix{cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.carte-choix.actif{border-color:var(--orange);background:rgba(254,80,0,.1)}
.carte-choix:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.carte-choix .fiche{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--orange-clair);text-decoration:underline}
.carte-choix .fiche:hover{color:var(--orange-clair)}
.ray h3{color:var(--blanc);font-size:1.15rem;margin-bottom:1.1rem}
.ray-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ray-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:.9rem}
.ray-carte .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-clair);display:block;margin-bottom:.6rem}
.ray-img{display:flex;align-items:center;justify-content:center;background:var(--blanc);height:96px;margin-bottom:.7rem;padding:.35rem;overflow:hidden}
.ray-img img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.ray-nom{display:block;font-family:var(--display);font-weight:700;color:#fff;font-size:.95rem}
.ray-spec{display:block;font-family:var(--mono);font-size:.72rem;color:var(--alu);margin-top:.25rem;line-height:1.6}
.ray-txt{display:block;font-size:.82rem;color:var(--alu);margin-top:.55rem;line-height:1.55}
.ray-fiche{display:block;margin-top:.55rem;min-height:1.15rem}
.ray-fiche .fiche{background:none;border:0;padding:0;cursor:pointer;
font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
color:var(--orange-clair);text-decoration:underline;text-underline-offset:3px}
.ray-fiche .fiche:hover{color:var(--orange-lisible)}
.ray-carte .teintes{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;margin-top:.7rem}
.pt-lg{font-family:var(--mono);font-size:.72rem;color:#8894A6;margin-left:.15rem}
@media(max-width:820px){.trio{grid-template-columns:1fr}}
.opt-lg{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:1rem;
position:relative}
/* La carte entière ouvre la fiche — même geste que sur les vignettes de
la liste, et pour la même raison : on hésite entre trois largeurs, on
veut voir les cotes de celle-là. Le bouton est transparent et couvre la
carte ; en position absolue, il ne prend aucun emplacement de la
sous-grille. Le survol éclaire légèrement le fond : sans ce signal,
rien ne dirait que la carte est cliquable. */
.opt-lg .ouvre-lg{position:absolute;inset:0;z-index:1;background:none;border:0;
padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;
transition:background-color .15s}
.opt-lg .ouvre-lg:hover{background:rgba(255,255,255,.05)}
.opt-lg .ouvre-lg:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* Ce qui doit garder son propre clic passe au-dessus du calque.
left/top remis à auto, et ce n'est pas une précaution : sur la vignette,
.teintes est en position ABSOLUE avec left:.5rem. En la repassant en
« relative » pour lui donner un z-index, ce left redevenait un
déplacement — le cadre des couleurs se décalait de 9 px vers la droite
et ne s'alignait plus ni sur le texte au-dessus ni sur les liens en
dessous. */
.opt-lg .teintes,.opt-lg .liens{position:relative;left:auto;right:auto;
top:auto;bottom:auto;z-index:2}
.opt-lg.courante{border-color:var(--orange);background:rgba(254,80,0,.1)}
.opt-lg .role{font-family:var(--mono);font-size:0.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-clair);display:block;margin-bottom:.6rem}
.opt-lg .nuance{background:var(--kraft);color:#fff;font-weight:500;padding:.1rem .35rem;margin-left:.4rem}
.opt-lg .vide{line-height:1.6}
.fdj h3{color:var(--blanc);font-size:1.15rem;margin-bottom:1.1rem}
.fdj-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:820px){
.ray-cartes,.fdj-cartes,.trio{grid-template-columns:repeat(auto-fit,minmax(0,190px))}
}
@media(max-width:720px){.fdj-cartes{grid-template-columns:1fr}}
.fdj-carte{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:.85rem;text-decoration:none;transition:border-color .15s}
.fdj-carte:hover{border-color:var(--orange)}
.fdj-carte .role{font-family:var(--mono);font-size:0.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--orange-clair);display:block;margin-bottom:.6rem}
.fdj-img{display:flex;align-items:center;justify-content:center;background:var(--blanc);height:88px;margin-bottom:.7rem;padding:.35rem}
.fdj-img img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.fdj-ref{display:block;font-family:var(--display);font-weight:700;color:#fff;font-size:0.9rem}
.fdj-mm{display:block;font-family:var(--mono);font-size:0.72rem;color:var(--alu);margin-top:.2rem}
.fdj-prix{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;
color:var(--orange-clair);margin-top:.45rem}
/* #8894A6 mesurait 4,45:1 sur le fond composé de la carte — cinq
centièmes sous le minimum de 4,5:1. Le gris est éclairci d'un cran :
4,89:1, et la note reste secondaire à l'œil. */
.fdj-note{display:block;font-size:.76rem;color:#A3AEBE;margin-top:.4rem;line-height:1.45}
/* Une référence comme F70016HPS00 ou une adresse longue ne doit jamais
déborder de sa carte sur un écran étroit. */
.fdj-ref,.fdj-mm,.ray-nom,.ray-spec,.corps .det,.opt-lg .det,.expedition address,
.jeton,.pt-lg,.vignette .gamme{overflow-wrap:anywhere}
.sans-fond{display:flex;flex-direction:column;justify-content:center;min-height:150px}
/* ---------- Alignement en colonnes ----------
Chaque carte partage la grille de son conteneur : les rôles, les visuels,
les noms, les cotes et les pastilles se retrouvent sur la même ligne d'une
carte à l'autre. Sans « subgrid », les cartes restent en colonne simple. */
.fdj-img.vide,.ray-img.vide{background:none}
.profil.vide{background:none;border:0;min-height:0}
.sans-visuel .ray-img{background:none}
.det.vide{color:#8894A6;font-style:italic}
.fiche.vide{display:block}
@supports (grid-template-rows: subgrid){
/* On ne déclare PAS grid-template-rows sur le conteneur : les lignes sont
créées à la demande. Avec un nombre fixe, une quatrième carte qui passe
à la ligne tomberait hors de la grille déclarée et cesserait d'être
alignée. Ainsi, chaque rangée de cartes partage ses propres lignes. */
.trio{gap:0 1rem}
/* SEPT depuis l'ajout de la ligne de couleur. Un enfant de plus que la
valeur déclarée tomberait dans une ligne de hauteur nulle et
deviendrait invisible — c'est le piège maison. */
.opt-lg{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
/* Les cartes de rayons et de fonds de jante ne sont plus alignées par
sous-grille : elles sont passées en format compact, photo à gauche
(voir « Cartes compactes », en fin de fichier). */
.sans-fond{min-height:0}
}
.sans-fond .fdj-ref{margin-top:.2rem}
.vide-f{color:var(--alu);font-size:0.88rem;font-style:italic;margin:0}
.opt-lg .profil{position:relative;background:var(--blanc);min-height:108px;margin-bottom:.8rem;
display:flex;align-items:center;justify-content:center;padding:.5rem;overflow:hidden}
.opt-lg .profil.dessin{background:linear-gradient(160deg,#F7F8F9,#E8ECEF)}
.opt-lg .profil img{max-height:94px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.opt-lg .det{display:block}
.opt-lg .badge{top:.4rem;right:.4rem;font-size:0.62rem;letter-spacing:.02em;padding:.18rem .45rem}
.opt-lg .gamme{color:#fff;font-family:var(--display);font-weight:800;font-size:1rem;display:block}
.opt-lg .det{font-family:var(--mono);font-size:0.72rem;color:var(--alu);margin-top:.3rem;line-height:1.55}
.opt-lg .vide{color:var(--alu);font-size:0.9rem;font-style:italic}
/* ---------- Prix ---------- */
.prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0}
.prix b{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.3rem);
color:var(--orange);line-height:1;letter-spacing:-.02em}
.prix span{font-family:var(--mono);font-size:.82rem;color:var(--alu)}
.prix em{flex:1 1 100%;font-style:normal;font-size:.9rem;color:var(--alu);margin-top:.3rem}
.prix-lien{flex:1 1 100%;font-size:.86rem;color:var(--alu);text-decoration:underline;
text-underline-offset:3px;margin-top:.45rem}
.prix-lien:hover{color:var(--orange-clair)}
.prix-pro{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
color:var(--gris);margin-bottom:.9rem}
.sel-prix{font-family:var(--mono);font-size:.78rem;color:var(--gris);margin:0 0 1rem}
/* =====================================================================
FICHE PRODUIT ET COMPARATEUR
=====================================================================
Deux ajouts qui partagent la même boîte : la fiche s'ouvre au clic sur
une jante, le comparateur au clic sur le bouton de la barre du bas.
Une seule modale à la fois, un seul mécanisme d'ouverture et de
fermeture, donc un seul endroit à corriger. */
/* --- le bouton « Comparer », posé sur la photo de la vignette ---------
Il vit DANS .profil, qui est déjà en position:relative et accueille
déjà les étiquettes. L'y mettre évite d'ajouter un sixième enfant à
.vignette, qui est une sous-grille à cinq emplacements exactement. */
.cmp{position:absolute;right:.5rem;bottom:.5rem;z-index:3;
display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
font-family:var(--mono);font-size:0.66rem;letter-spacing:.02em;line-height:1;
padding:.34rem .5rem;border-radius:999px;
background:rgba(255,255,255,.92);border:1px solid var(--trait);color:var(--gris);
box-shadow:0 1px 3px rgba(23,32,43,.14);
transition:background-color .15s,border-color .15s,color .15s}
.cmp:hover{border-color:var(--orange);color:var(--orange-fonce)}
.cmp[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--encre);font-weight:500}
.cmp:disabled{opacity:.4;cursor:not-allowed}
.cmp:disabled:hover{border-color:var(--trait);color:var(--gris)}
.cmp .x{font-size:.85rem;line-height:1}
/* Dans le bloc des largeurs voisines, la pastille n'est pas posée sur
une photo mais dans la ligne de liens : elle reprend le fil. */
.opt-lg .liens .cmp{position:static;right:auto;bottom:auto;z-index:3}
/* Les pastilles de couleur occupent le bas gauche de la même photo. La
M550 en porte neuf : sur la colonne la plus étroite (217 px), la
rangée passait sous le bouton. On la borne, et les pastilles en trop
remontent d'un cran au lieu de se glisser dessous. */
.vignette .teintes{max-width:calc(100% - 8.6rem);flex-wrap:wrap-reverse;row-gap:.25rem}
/* Au doigt, pas de survol : la cible doit être confortable d'emblée. */
@media(hover:none){.cmp{padding:.45rem .6rem}}
/* --- Cibles tactiles ---------------------------------------------------
Sur écran tactile, une cible de moins de 24 px se rate une fois sur
trois — c'est le minimum que demande le WCAG 2.2. Les pastilles de
couleur et les deux liens de texte du panneau passaient en dessous.
On agit sur la taille des pastilles et sur le remplissage des liens :
rien ne grossit visuellement au pointeur. */
@media(hover:none){
.vignette .teintes .pt{width:24px;height:24px}
.vignette .teintes{gap:.3rem;max-width:calc(100% - 8.6rem)}
.opt-lg .fiche,.fi-fonds a,.carte-choix .fiche,#raz,.modif,
.cp-tete .liens button,.cp-tete .liens a{
min-height:24px;display:inline-flex;align-items:center}
.pt-txt{min-height:24px;display:inline-flex;align-items:center}
.cmp-jeton button{min-width:26px;min-height:26px;justify-content:center;display:inline-flex;align-items:center}
.cmp-jeton{padding-block:.35rem}
}
/* Une pastille ne doit jamais être comprimée par la ligne qui la porte :
sans cela, la rangée « argent / noir » rendait des ovales de 18 px. */
.vignette .teintes .pt{flex:0 0 auto}
/* --- la barre du comparateur, en bas de l'écran -----------------------
Elle ne s'affiche que lorsqu'une jante y est. Sur mobile elle se pose
AU-DESSUS de la barre d'appel, qui garde sa place au ras du bord. */
.cmp-barre{position:fixed;left:0;right:0;bottom:0;z-index:80;
background:var(--marine-nuit);color:#fff;border-top:2px solid var(--orange);
box-shadow:0 -6px 24px rgba(23,32,43,.28);
transform:translateY(110%);transition:transform .2s ease;
padding:.7rem clamp(.9rem,4vw,2rem)}
.cmp-barre.visible{transform:none}
/* Tant que la barre est là, elle mange le bas de la page : on rend la
hauteur au document, sinon la dernière rangée de vignettes reste
dessous et paraît inaccessible. */
body.cmp-actif{padding-bottom:76px}
@media(max-width:760px){body.cmp-actif{padding-bottom:132px}}
.cmp-barre-int{max-width:var(--large);margin:0 auto;display:flex;align-items:center;
gap:.8rem;flex-wrap:wrap}
.cmp-barre h3{font-size:.82rem;font-family:var(--mono);font-weight:400;
letter-spacing:.1em;text-transform:uppercase;color:var(--alu);flex:0 0 auto}
.cmp-jetons{display:flex;gap:.5rem;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.cmp-jeton{display:inline-flex;align-items:center;gap:.45rem;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
padding:.3rem .3rem .3rem .55rem;max-width:100%}
.cmp-jeton b{font-family:var(--display);font-weight:700;font-size:.82rem;
overflow-wrap:anywhere}
.cmp-jeton i{font-family:var(--mono);font-style:normal;font-size:.7rem;color:var(--alu)}
.cmp-jeton button{background:none;border:0;color:var(--alu);cursor:pointer;
font-size:1.05rem;line-height:1;padding:.15rem .3rem}
.cmp-jeton button:hover{color:var(--orange)}
.cmp-actions{display:flex;gap:.5rem;flex:0 0 auto}
.cmp-barre .bouton{padding:.6rem 1.1rem;font-size:.88rem}
.cmp-vider{background:none;border:1px solid rgba(255,255,255,.28);color:var(--alu);
font-family:var(--display);font-weight:700;font-size:.88rem;padding:.6rem 1.1rem;
border-radius:3px;cursor:pointer}
.cmp-vider:hover{border-color:var(--orange);color:#fff}
@media(max-width:760px){
.cmp-barre{bottom:58px}
.cmp-barre h3{display:none}
.cmp-barre-int{gap:.55rem}
.cmp-jeton i{display:none}
}
/* --- la boîte modale --------------------------------------------------
Fond assombri + panneau blanc. Le défilement se fait DANS le panneau :
la page derrière est figée le temps de la lecture. */
.velox-modale{position:fixed;inset:0;z-index:100;display:none;
align-items:flex-start;justify-content:center;padding:clamp(.5rem,3vw,2.5rem)}
.velox-modale.ouverte{display:flex}
.velox-voile{position:absolute;inset:0;background:rgba(23,32,43,.72);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* dvh plutôt que vh : sur iPhone, la barre d'adresse rétractable fait que
100vh dépasse l'écran, et le pied de la fiche — donc ses trois boutons —
tombe sous le bord. dvh suit la hauteur réellement visible ; la ligne vh
reste au-dessus pour les navigateurs qui l'ignorent. */
.velox-boite{position:relative;background:var(--papier);width:min(1080px,100%);
max-height:calc(100vh - clamp(1rem,6vw,5rem));
max-height:calc(100dvh - clamp(1rem,6vw,5rem));display:flex;flex-direction:column;
box-shadow:0 24px 60px rgba(23,32,43,.4);border-top:3px solid var(--orange)}
/* La barre du bas n'a plus rien à dire pendant que le tableau est ouvert :
elle répète ce qu'on a sous les yeux. */
.cmp-barre.masquee{transform:translateY(110%)}
.velox-tete{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem clamp(1rem,3vw,1.9rem);
background:var(--blanc);border-bottom:1px solid var(--trait);flex:0 0 auto}
.velox-tete .titre{flex:1 1 auto;min-width:0}
.velox-tete h2{font-size:clamp(1.3rem,3vw,1.75rem);overflow-wrap:anywhere}
.velox-tete .sous{display:block;font-family:var(--mono);font-size:.74rem;color:var(--gris);
margin-top:.4rem;line-height:1.6;overflow-wrap:anywhere}
.velox-fermer{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--trait);
background:var(--blanc);color:var(--encre);cursor:pointer;font-size:1.3rem;line-height:1;
border-radius:3px}
.velox-fermer:hover{border-color:var(--orange);color:var(--orange-fonce)}
.velox-corps{overflow:auto;padding:clamp(1rem,3vw,1.9rem);flex:1 1 auto;
-webkit-overflow-scrolling:touch}
.velox-pied{flex:0 0 auto;background:var(--blanc);border-top:1px solid var(--trait);
padding:.9rem clamp(1rem,3vw,1.9rem);display:flex;gap:.6rem;flex-wrap:wrap;
align-items:center;justify-content:flex-end}
.velox-pied .source{margin:0;flex:1 1 14rem;font-size:.76rem;color:var(--gris);
font-family:var(--mono);line-height:1.55}
.velox-pied .bouton{padding:.7rem 1.2rem;font-size:.9rem}
/* --- la fiche ---------------------------------------------------------
Deux colonnes : les visuels à gauche, tout le reste à droite. */
.fi-grille{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:clamp(1rem,2.5vw,2rem);align-items:start}
.fi-visuels{display:flex;flex-direction:column;gap:.8rem}
/* Hauteur figée plutôt que min-height : la photo arrive après le texte,
et une boîte qui grandit à ce moment-là fait sauter toute la fiche. */
.fi-photo{background:var(--blanc);border:1px solid var(--trait);padding:1rem;
display:flex;align-items:center;justify-content:center;position:relative;
min-height:200px;height:calc(230px + 2rem + 2px)}
.fi-photo img{max-height:230px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.fi-coupe{background:linear-gradient(160deg,#F7F8F9,#E8ECEF);border:1px solid var(--trait);
padding:1rem;text-align:center}
.fi-coupe svg{margin-inline:auto;max-width:100%;height:auto}
/* Le dessin coté du fabricant est un trait fin sur fond clair : il
respire mieux sur du blanc franc, et mérite toute la largeur. */
.fi-coupe.vraie{background:var(--blanc);padding:.8rem}
/* La largeur est posée en ligne par coupe(), en millimètres réels à
3,6 px/mm : deux jantes de largeurs différentes ne peuvent plus
sortir du même gabarit. Le max-width n'est plus qu'un garde-fou
pour les écrans étroits. */
.fi-coupe.vraie img{max-width:100%;height:auto;margin-inline:auto;display:block}
.fi-coupe .lg{display:block;font-family:var(--mono);font-size:.7rem;color:var(--gris);
letter-spacing:.08em;text-transform:uppercase;margin-top:.6rem}
.fi-teintes{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.fi-teintes .pt{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;
box-shadow:0 0 0 1px rgba(0,0,0,.22);cursor:default}
.fi-teintes span.nom{font-family:var(--mono);font-size:.72rem;color:var(--gris)}
.fi-desc{font-size:.98rem;line-height:1.65;margin:0 0 1.4rem}
.fi-desc p{margin:0 0 .8rem}
.fi-desc p:last-child{margin-bottom:0}
.fi-bloc{margin-bottom:1.5rem}
.fi-bloc:last-child{margin-bottom:0}
.fi-bloc > h3{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--orange-fonce);margin-bottom:.7rem}
/* Les caractéristiques, en colonnes de couples libellé / valeur.
La VALEUR ne se coupe jamais : « 28/29″ · ETRTO 622 » repassait à la
ligne au milieu, et un nombre coupé en deux se lit mal. C'est le
libellé qui cède la place s'il en manque — c'est de la prose, il
supporte d'aller à la ligne. Les colonnes sont assez larges pour que
le cas reste rare. */
.fi-carac{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:0 1.6rem;margin:0}
/* Les deux colonnes sont deux listes, et non plus un seul flux qui se
répartit tout seul : c'est ce qui permet d'imposer ce qui va à
gauche et ce qui va à droite. */
.fi-carac dl{margin:0}
.fi-carac div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
padding:.42rem 0;border-bottom:1px solid var(--trait)}
.fi-carac dt{color:var(--gris);font-size:.86rem;flex:1 1 auto;min-width:0}
.fi-carac dd{margin:0;font-family:var(--mono);font-size:.82rem;font-weight:500;
text-align:right;white-space:nowrap;flex:0 0 auto}
/* Le tableau des charges : trois colonnes, chiffres à droite. */
.fi-tab{width:100%;border-collapse:collapse;font-size:.85rem}
.fi-tab th,.fi-tab td{padding:.42rem .5rem;border-bottom:1px solid var(--trait);text-align:left}
.fi-tab th{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--gris)}
/* Le pictogramme au-dessus de son libellé, tous deux calés à droite comme
les chiffres de la colonne. Il est décoratif : le nom de la colonne est
écrit dessous, et le svg est aria-hidden. */
.fi-lien{color:var(--orange-fonce);text-decoration:underline;white-space:nowrap}
.fi-lien:hover{color:var(--orange)}
.fi-tab .ch-t{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.35rem}
/* Assez grand pour qu'on VOIE la différence entre une roue seule et un
vélo entier — à 22 px, les deux dessins se ressemblaient. Posés sur une
pastille kraft, ils se détachent du tableau au lieu d'y flotter. */
.fi-tab .ch-ic{width:44px;height:44px;color:var(--marine);stroke-width:2;
background:var(--kraft-pale,#F4F1EC);border-radius:6px;padding:3px;
box-sizing:border-box}
/* Le terme international — Axe Load, Max Load — se pose sous le
libellé traduit : c'est celui qu'on lit sur les catalogues et les
normes, et il reste en anglais dans les six langues. Il ne compte
pas comme du texte à traduire, seulement comme un repère. */
/* #8894A6 sur le papier ne donne que 2,94:1 à 11 px : illisible pour
beaucoup. #66717F y donne 4,75:1, sans cesser d'être discret. */
.fi-tab th i,.cp-tab th i{display:block;font-style:normal;font-weight:400;
text-transform:none;letter-spacing:0;color:#66717F;margin-top:.15rem}
.fi-tab th i{font-size:.95em}
.cp-tab th i{font-family:var(--mono);font-size:.72rem}
/* LE « NE COUPE PAS » NE VAUT QUE POUR LES VALEURS. « 110 kg » ou
« n.c. » doivent rester d'un bloc ; les INTITULÉS, eux, ont le droit
de passer à la ligne. Sans cette distinction, « Poids système
(Max Load) » tenait la colonne à sa largeur d'un seul tenant et le
tableau des charges débordait de la fiche sur un écran de 320 px —
34 px en espagnol, où l'intitulé est plus long encore. */
.fi-tab td:not(:first-child){text-align:right;font-family:var(--mono);white-space:nowrap}
.fi-tab th:not(:first-child){text-align:right;font-family:var(--mono)}
/* Filet de sécurité : si un jour un intitulé plus long revenait, le
tableau défile dans sa boîte plutôt que de pousser la fiche. */
@media(max-width:400px){.fi-tab{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.fi-note{font-size:.78rem;color:var(--gris);margin:.6rem 0 0;line-height:1.55}
/* La disponibilité : un perçage par ligne, la quantité à droite. Le point
coloré porte l'information, mais jamais seul — « En stock » et « Sur
commande » sont écrits en toutes lettres à côté (WCAG 1.4.1 : la
couleur ne doit pas être le seul véhicule du sens). */
/* Le haut de la fiche : les choix à gauche, la disponibilité à droite, sur
la même ligne. C'est là que le client décide — il ne doit pas avoir à
faire défiler la fiche pour savoir si la jante est en stock. */
.fi-haut{display:flex;gap:1.4rem;align-items:flex-start;margin-bottom:1.5rem}
.fi-haut-g{flex:1 1 auto;min-width:0}
.fi-haut-g .fi-bloc:last-child{margin-bottom:0}
.fi-haut-d{flex:0 0 14.5rem;max-width:14.5rem}
.fi-haut-d .fi-bloc{margin-bottom:0;border:1px solid var(--trait);border-radius:3px;
padding:.6rem .8rem .7rem;background:#FFF}
/* La note du bloc étroit : plus petite et plus serrée que les autres
notes de la fiche, sinon six lignes de gris pèsent plus lourd que les
deux quantités qu'elles accompagnent. */
.fi-haut-d .fi-note{font-size:.7rem;line-height:1.45;margin-top:.6rem;
padding-top:.55rem;border-top:1px solid var(--trait)}
/* En dessous de 640 px la fiche n'a plus la place de deux colonnes : la
disponibilité repasse dessous, pleine largeur. */
@media (max-width:640px){
.fi-haut{display:block}
.fi-haut-g .fi-bloc:last-child{margin-bottom:1.5rem}
.fi-haut-d{max-width:none}
}
.fi-dispo{list-style:none;margin:.1rem 0 0;padding:0}
.fi-dispo li{display:flex;align-items:center;gap:.6rem;
padding:.36rem 0;border-bottom:1px solid var(--trait);font-size:.86rem}
.fi-dispo li:last-child{border-bottom:0}
.fi-dispo .pc{font-family:var(--mono);font-size:.82rem;color:var(--marine-nuit);
flex:0 0 auto;min-width:2.6rem}
/* Aligné à GAUCHE, sur une colonne commune, et non poussé à droite : au
fer à droite, « Sur commande » et « +50 jantes » ne commençaient pas au
même endroit et l'oeil ne pouvait plus comparer deux lignes d'un coup.
Et les libellés les plus longs — l'allemand, le néerlandais — venaient
buter contre le bord du cadre ; à gauche, ils s'allongent vers
l'intérieur, où il y a de la place. */
.fi-dispo .et{display:inline-flex;align-items:center;gap:.45rem;
flex:1 1 auto;min-width:0}
/* Le libellé est une VALEUR de la fiche, au même titre que « 598 mm » ou
« 490 g » : il prend donc la même chasse fixe, la même taille et le même
marine que toutes les valeurs de la colonne d'à côté. En vert et en
linéale, il sortait de nulle part au milieu d'une fiche entièrement
composée en chasse fixe. La couleur, c'est la jauge qui la porte. */
/* Pas de nowrap : un libellé long doit passer à la ligne DANS le cadre
plutôt que d'en sortir. C'est la seule protection qui tienne pour six
langues dont on ne maîtrise pas la longueur des mots. */
.fi-dispo .et .lb{font-family:var(--mono);font-size:.8rem;
font-weight:600;color:var(--marine-nuit);line-height:1.3;min-width:0;
overflow-wrap:anywhere}
/* Une seule exception, et c'est un état, pas une quantité : « Sur
commande » doit se voir sans être cherché. */
.fi-dispo li.n0 .lb{color:#9C4715}
/* La ligne du perçage retenu : c'est celle qui part en commande. Le fond
la désigne, le perçage passe en gras — deux marques, pas une couleur
seule. */
/* Un fond kraft plein écrasait le libellé : « Sur commande » y tombait à
3,0:1. Un liseré orange et un fond très clair marquent aussi bien la
ligne sans toucher aux couleurs qui portent l'information. */
.fi-dispo li.sel{background:#F4F1EC;margin:0 -.55rem;
padding-left:.45rem;padding-right:.55rem;border-radius:2px;
border-left:3px solid var(--orange)}
.fi-dispo li.sel .pc{font-weight:700}
/* « #N/A » n'est pas une valeur : il ne doit pas se lire comme une.
Gris, en chasse fixe, il se distingue au premier coup d'oeil des
chiffres de la colonne d'à côté. */
.na{font-family:var(--mono);font-size:.86em;color:#66717F;cursor:help}
.fi-carac-na{margin:.2rem 0 0}
/* Les choix de la fiche — le diamètre, la couleur. Une base commune,
.fi-choix, et deux variantes : garder .fi-taille pour les deux
revenait à confondre cinq diamètres et deux couleurs dans la même
sélection. */
.fi-tailles{display:flex;flex-wrap:wrap;gap:.4rem}
.fi-choix{cursor:pointer;padding:.34rem .7rem;border:1px solid var(--trait);
background:var(--blanc);color:var(--encre);border-radius:3px}
.fi-choix:hover{border-color:var(--orange);color:var(--orange-fonce)}
.fi-choix.actif{background:var(--orange);border-color:var(--orange);
color:var(--encre);font-weight:500}
.fi-taille{font-family:var(--mono);font-size:.8rem;min-width:3.4rem}
/* La couleur se choisit sur des boutons nommés, pas sur de simples
points : « Argent » et « Noir » écrits en toutes lettres, avec la
pastille en tête. */
.fi-couleur{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--texte);
font-size:.86rem;padding:.4rem .8rem}
.fi-couleur .rond{width:14px;height:14px;border-radius:50%;
border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:0 0 auto}
/* Le rappel : ni alarmant ni discret au point d'être manqué. */
.fi-note.oblig{color:var(--orange-fonce);font-weight:500}
/* Le bloc encadré tant qu'il attend : c'est là que la flèche du pied
envoie, il faut le reconnaître d'un coup d'œil. */
.fi-bloc.attend{border:1px solid var(--orange);border-radius:3px;
padding:.8rem .9rem;background:rgba(254,80,0,.05)}
.fi-bloc.attend > h3{margin-bottom:.55rem}
/* LE RAPPEL EST UN BANDEAU, PAS UNE NOTE.
Il a d'abord été une ligne de texte alignée à droite au-dessus des
boutons : trop discrète. Le client voyait « Choisir cette jante »
grisé, ne lisait pas la ligne, et concluait que le site était en
panne. Il occupe donc toute la largeur, sur fond orangé, avec un
pictogramme — on ne peut plus le manquer. */
.velox-pied .rappel{margin:0 0 .2rem;flex:1 1 100%;display:flex;gap:.55rem;
align-items:flex-start;text-align:left;font-size:.9rem;font-weight:600;
/* --orange-fonce et non --orange-lisible : ce dernier (#FFA173) est
l'orange clair des fonds SOMBRES. Posé ici il tombait à 1,82:1,
illisible. #C63A00 sur #FFF3ED donne 4,82:1. */
color:var(--orange-fonce);line-height:1.45;background:#FFF3ED;
border:1px solid var(--orange);border-left:4px solid var(--orange);
border-radius:4px;padding:.6rem .8rem}
.velox-pied .rappel .ic{width:19px;height:19px;flex:0 0 auto;margin-top:.1rem;
stroke:var(--orange-fonce)}
/* Le bouton reste CLIQUABLE tant que le choix n'est pas fait : c'est ce
qui lève le soupçon de panne. Il ne commande pas — il emmène au bloc
qui attend, et le fait clignoter. Son aspect dit l'attente : contour
plein, fond pâle, et non le plein orange des boutons qui agissent. */
/* #FFEDE4 et non #FFE7DA : deux teintes plus clair, le seul écart qui
fasse passer le libellé de 4,42:1 à 4,61:1. */
.velox-pied .bouton.attente{background:#FFEDE4;color:var(--orange-fonce);
border-color:var(--orange)}
.velox-pied .bouton.attente:hover{background:var(--orange);color:var(--encre);
transform:none}
.velox-pied .bouton:disabled{opacity:.45;cursor:not-allowed}
.velox-pied .bouton:disabled:hover{transform:none;background:var(--orange)}
/* Le clignotement du bloc où le choix se fait : deux battements, puis
l'encadré orange permanent de .attend reprend la main. */
@keyframes velox-appel{
0%,100%{box-shadow:0 0 0 0 rgba(254,80,0,0)}
30% {box-shadow:0 0 0 6px rgba(254,80,0,.30)}
}
.fi-bloc.appel{animation:velox-appel 1.1s ease-out 2}
@media(prefers-reduced-motion:reduce){.fi-bloc.appel{animation:none;
box-shadow:0 0 0 4px rgba(254,80,0,.28)}}
.fi-pratiques{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.fi-pratiques li{font-family:var(--mono);font-size:.72rem;background:var(--kraft-pale);
color:var(--marine-fonce);border:1px solid var(--kraft);padding:.22rem .55rem;border-radius:999px}
/* TROIS AU PLUS, ET JAMAIS ÉTIRÉS.
auto-fit étirait la carte unique sur toute la largeur de la fiche : un
fond de jante de 25 mm occupait 700 px, sa photo perdue au milieu d'un
grand vide. Deux garde-fous, et non un :
· la piste est BORNÉE à 220 px — une carte seule garde sa taille ;
· le bloc est borné à trois pistes — au-delà, les cartes défilaient
sur une seule ligne de plus en plus fine sur grand écran.
auto-fill plutôt qu'auto-fit : auto-fit réduit les pistes vides à zéro
et rend l'étirement à la carte restante, ce qu'on veut justement
éviter. justify-content:start colle le tout à gauche. */
.fi-fonds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));
justify-content:start;gap:.7rem;list-style:none;margin:0;padding:0;
max-width:calc(220px * 3 + .7rem * 2)}
/* La carte, elle, ne dépasse jamais 220 px : c'est ce qui l'empêche de
s'étirer quand elle est seule. Le min() protège les très petits
écrans — une piste minimale de 170 px dans une boîte de 150 la ferait
déborder de sa propre grille. */
.fi-fonds li{max-width:220px}
.fi-fonds li{background:var(--blanc);border:1px solid var(--trait);padding:.7rem}
.fi-fonds .role{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--orange-fonce);margin-bottom:.3rem}
.fi-fonds .vue{display:block;background:var(--papier);height:74px;margin-bottom:.45rem;
display:flex;align-items:center;justify-content:center;padding:.3rem}
.fi-fonds .vue img{max-height:66px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.fi-fonds .vue.vide{background:repeating-linear-gradient(135deg,#F2F4F6,#F2F4F6 6px,#EAEDF0 6px,#EAEDF0 12px)}
.fi-fonds b{font-family:var(--mono);font-size:.82rem;display:block;overflow-wrap:anywhere}
.fi-fonds i{font-style:normal;font-size:.78rem;color:var(--gris);display:block;margin-top:.15rem}
.fi-fonds a{display:inline-block;margin-top:.4rem;font-family:var(--mono);font-size:.7rem;
color:var(--orange-fonce);text-decoration:underline}
/* ATTENTION À L'ORDRE : ce bloc doit rester APRÈS les règles de base
qu'il corrige. Une requête média n'ajoute aucune priorité — placée
au-dessus, elle est écrasée par le .fi-visuels{display:flex} qui
suit, et la fiche reste en une colonne sur téléphone. */
@media(max-width:820px){
/* minmax(0,1fr) et non 1fr : une piste « 1fr » garde pour minimum la
largeur MINIMALE de son contenu, et le contenu de la fiche — un
tableau de cotes en chasse fixe, des libellés insécables — la fixait
à 532 px. Sur un téléphone de 390, le corps de la fiche défilait
donc latéralement de 180 px. Le zéro autorise la piste à descendre
plus bas que son contenu, à charge pour le contenu de se replier. */
.fi-grille{grid-template-columns:minmax(0,1fr)}
/* Sur un téléphone, la photo puis la coupe l'une sous l'autre
occupaient tout l'écran : le descriptif ne commençait qu'après deux
glissements de doigt. Côte à côte, il arrive tout de suite. */
.fi-visuels{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:start}
/* SANS min-width:0, LA FICHE DÉBORDE DE L'ÉCRAN. Une piste « 1fr » ne
descend jamais sous la largeur minimale de son contenu, et la coupe
est un SVG sans dimension propre : le navigateur lui prête alors ses
300 px par défaut. Deux pistes de 300 px dans une boîte de 301,
et le corps de la fiche se mettait à défiler latéralement de 250 px
sur un téléphone — sans que la page, elle, ne déborde : le défaut
restait invisible tant qu'on ne l'ouvrait pas.
C'est le piège classique de la grille CSS, et il ne se voit qu'en
dessous de 820 px. */
.fi-visuels > *{min-width:0}
.fi-coupe img,.fi-photo img{max-width:100%;height:auto}
.fi-photo{min-height:0;padding:.6rem;height:calc(150px + 1.2rem + 2px)}
.fi-photo img{max-height:150px}
.fi-coupe{padding:.6rem}
.fi-teintes{grid-column:1 / -1}
}
/* --- le tableau du comparateur ---------------------------------------
Une colonne par jante, une ligne par critère. Le tableau défile
horizontalement dans sa boîte plutôt que de déborder de la page. */
/* Pas d'overflow ici, et c'est voulu : « overflow-x:auto » faisait de
cette boîte un conteneur de défilement sur LES DEUX axes — la règle
CSS force overflow-y à auto dès que l'un des deux ne vaut plus
visible. Une cellule collante en haut s'y référait alors, dans une
boîte qui ne défile jamais verticalement : elle ne collait à rien.
C'est le corps de la modale, qui défile déjà, qui porte les deux
axes ; le tableau garde sa largeur minimale et le pousse à défiler
horizontalement sur les petits écrans, comme avant. */
.cp-defile{-webkit-overflow-scrolling:touch}
/* Colonnes de largeur égale : c'est ce qui permet de donner aux coupes
de jante une largeur en pourcentage et de les tenir vraiment à la
même échelle, quelle que soit la place disponible. */
.cp-tab{border-collapse:collapse;width:100%;min-width:520px;background:var(--blanc);
table-layout:fixed}
.cp-tab th,.cp-tab td{border:1px solid var(--trait);padding:.55rem .7rem;vertical-align:top;
text-align:left;font-size:.86rem}
/* Aligné par le haut : « bottom » posait les trois photos à des hauteurs
différentes dès qu'un nom passait sur deux lignes. */
.cp-tab thead th{background:var(--marine-nuit);color:#fff;vertical-align:top}
.cp-tab thead th:first-child{background:var(--marine-fonce)}
/* La colonne des critères reste sous les yeux pendant qu'on fait défiler
les jantes horizontalement : sans elle, on lit trois chiffres sans
savoir de quoi ils parlent. Le filet est repeint à l'ombre — une
cellule collante perd sa bordure droite dans un tableau fusionné. */
.cp-tab tbody th,.cp-tab thead th:first-child{position:sticky;left:0;z-index:1;
box-shadow:1px 0 0 var(--trait)}
.cp-tab tbody th{width:11.5rem;font-weight:400;color:var(--gris);background:var(--papier);
font-size:.84rem}
@media(max-width:700px){
.cp-tab{min-width:0}
.cp-tab tbody th{width:7.5rem;font-size:.79rem}
.cp-tab th,.cp-tab td{padding:.45rem .5rem}
}
.cp-tab td{font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere}
.cp-tab td.prose{font-family:var(--texte);font-size:.85rem;overflow-wrap:break-word}
.cp-tab tr.diff th{color:var(--orange-fonce);font-weight:600}
.cp-tab tr.diff td{background:rgba(254,80,0,.06)}
/* La ligne de rappel : le nom et la cote, rien d'autre, collés en haut
du corps de la modale. z-index au-dessus des cellules courantes, et
au-dessus de la colonne des critères pour son propre coin. */
/* Sélecteurs volontairement longs : la règle qui rend la colonne des
critères collante à gauche — « .cp-tab thead th:first-child » — est
plus spécifique qu'un simple « .cp-rappel th » et lui imposait son
z-index de 1. La barre passait alors SOUS les lignes du tableau, qui
défilaient par-dessus elle. */
/* La marge du haut descend d'un cran : du corps vers son premier bloc.
Le point de collage de la barre se confond alors avec le bas de
l'en-tête, sans interstice où du tableau pourrait défiler. */
.velox-corps.a-rappel{padding-top:0}
.velox-corps.a-rappel > :first-child{margin-top:clamp(1rem,3vw,1.9rem)}
.cp-tab thead .cp-rappel th{position:sticky;top:0;z-index:3;padding:.42rem .7rem;
border-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
/* Le fond est REDIT ici, et pas seulement hérité du thead : une
cellule collante se détache du flux, et si elle est transparente,
les lignes du tableau défilent par-dessous et deviennent illisibles.
L'ombre portée fait le reste — elle dit que la barre flotte. */
background:var(--marine-nuit);
box-shadow:0 3px 7px rgba(23,32,43,.22)}
.cp-tab thead .cp-rappel th:first-child{left:0;z-index:4;background:var(--marine-fonce);
box-shadow:1px 0 0 rgba(255,255,255,.12), 0 3px 7px rgba(23,32,43,.22)}
.cp-tab .cp-rappel .rn{font-family:var(--display);font-weight:800;font-size:.86rem;
color:#fff;line-height:1.1}
.cp-tab .cp-rappel .rd{font-family:var(--mono);font-size:.66rem;color:var(--alu);
margin-left:.45rem}
/* Lu par les lecteurs d'écran, invisible à l'oeil : la cellule de tête
de la ligne de rappel doit dire ce qu'elle intitule. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap}
.cp-tete{display:flex;flex-direction:column;gap:.4rem}
.cp-tete .photo{background:var(--blanc);height:96px;display:flex;align-items:center;
justify-content:center;padding:.3rem}
.cp-tete .photo img{max-height:88px;width:auto;object-fit:contain;mix-blend-mode:multiply}
/* break-word et non anywhere : « ROAD RUNNER » se coupait en
« ROAD RUNN / ER » alors qu'il y avait une espace pour le faire. */
.cp-tete .nom{font-family:var(--display);font-weight:800;font-size:.98rem;color:#fff;
line-height:1.2;overflow-wrap:break-word}
.cp-tete .det{font-family:var(--mono);font-size:.7rem;color:var(--alu);font-weight:400}
.cp-tete .liens{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;margin-top:.15rem}
.cp-tete .liens button,.cp-tete .liens a{background:none;border:0;padding:0;cursor:pointer;
font-family:var(--mono);font-size:.68rem;color:var(--orange);text-decoration:underline}
/* La disponibilité dans le comparateur : la jauge de la fiche, le
libellé en chasse fixe, et — quand la couleur regardée manque mais
qu'une autre est là — la pastille de cette autre couleur. */
/* Toutes les déclinaisons, une par ligne : la pastille de la couleur,
la déclinaison, la jauge, le mot. Une grille plutôt qu'un flex, pour
que les jauges des quatre lignes tombent au même endroit. */
/* La grille est portée par la LISTE, pas par chaque ligne : avec une
grille par ligne, « Argent · 32T » et « Noir · 32T » n'ayant pas la
même longueur, les jauges tombaient à des abscisses différentes.
Les se fondent dans la grille de leur parent — d'où
display:contents — et les quatre colonnes s'alignent d'elles-mêmes. */
.cp-decl{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:auto auto auto auto 1fr;align-items:center;
gap:.24rem .45rem;font-family:var(--mono);font-size:.74rem;
color:var(--marine-nuit)}
.cp-decl li{display:contents}
/* Le filet entre deux couleurs : il traverse les cinq colonnes de la
grille, sinon quatre lignes d'affilée se lisent comme un pâté. */
.cp-decl li.sep .filet{grid-column:1 / -1;height:1px;background:var(--trait);
margin:.22rem 0}
/* Dans la fiche, la même liste, un cran plus grande — elle y est
l'information principale, pas une ligne de tableau. Et la déclinaison
qui partira en commande passe en gras. */
/* La colonne de la fiche est étroite : le libellé y passait sur deux
lignes — « +30 » puis « jantes » — et la liste reprenait la hauteur
qu'on venait de lui faire gagner. Corps et gouttières resserrés, et
surtout pas de coupure dans le libellé. */
.fi-decl{font-size:.72rem;gap:.26rem .34rem}
.fi-decl .pastille{width:10px;height:10px}
.fi-decl .lb{white-space:nowrap;overflow-wrap:normal}
.cp-decl li.sel .dp,.cp-decl li.sel .lb{font-weight:700}
.cp-decl li.sel .dp{color:var(--marine-nuit)}
.cp-decl .dc,.cp-decl .dp{color:var(--gris);white-space:nowrap}
.cp-decl .lb{font-weight:600;overflow-wrap:anywhere;min-width:0}
.cp-decl li.n0 .lb{color:#9C4715}
.cp-decl .pastille{width:10px;height:10px;border-radius:50%;
flex:0 0 auto;border:1px solid rgba(0,0,0,.25)}
/* SUR UN ÉCRAN ÉTROIT, la grille de cinq colonnes ne peut pas tenir :
une colonne de valeurs y fait cent dix pixels, et
« Argent 32T ▮▮▮ +50 jantes » en demande cent soixante-quinze.
⚠ LE REPLI EN FLUX SOUPLE ÉTAIT UNE ERREUR (corrigée le 13/09/2026,
sur capture d'iPhone : « les barres de stock ne sont pas alignées »).
Chaque redevenait un flex à lui seul, donc chaque jauge tombait
après le nom qui la précédait : « Noir » et « Argent » n'ayant pas la
même longueur, les quatre jauges d'une même colonne se décalaient, et
l'œil ne pouvait plus les comparer — ce que la grille du grand écran
avait justement été écrite pour éviter.
On garde donc la grille, portée par la LISTE comme sur grand écran,
mais à TROIS colonnes : chaque déclinaison occupe deux rangées, la
couleur et le perçage en haut, la jauge et le mot en dessous. La jauge
étant forcée en première colonne, toutes tombent à la même abscisse,
quelle que soit la longueur du nom du dessus. */
@media(max-width:700px){
.cp-tab .cp-decl{grid-template-columns:auto auto 1fr;
gap:.1rem .3rem;font-size:.66rem}
.cp-tab .cp-decl .pastille{grid-column:1;width:8px;height:8px}
.cp-tab .cp-decl .jauge{grid-column:1}
/* Le mot occupe les deux colonnes qui restent, et ne se coupe pas :
« +30 jantes » replié en « +30 » puis « jantes » ajoutait une
troisième rangée à chaque déclinaison, et la cellule doublait de
hauteur pour rien. Deux colonnes lui laissent quatre-vingts pixels,
le plus long libellé en demande soixante-cinq. */
.cp-tab .cp-decl .lb{grid-column:2 / -1;white-space:nowrap}
/* Deux rangées par déclinaison : l'air se met SOUS la seconde, sinon
les deux moitiés d'une même ligne se retrouvent aussi espacées que
deux déclinaisons différentes, et on ne sait plus ce qui va avec
quoi. */
.cp-tab .cp-decl .jauge,
.cp-tab .cp-decl .lb{margin-bottom:.3rem}
}
.cp-coupe{background:linear-gradient(160deg,#F7F8F9,#E8ECEF);padding:.5rem;text-align:center}
.cp-coupe svg{display:block;width:100%;height:auto}
.cp-coupe.vraie{background:var(--blanc)}
.cp-coupe img{display:block;width:100%;height:auto}
.cp-options{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
justify-content:space-between;margin-bottom:1rem}
/* L'export, à droite de la ligne : une commande qui produit un document,
et non un réglage d'affichage — d'où le trait et le pictogramme. */
.cp-pdf{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
color:var(--encre);background:var(--blanc);border:1px solid var(--encre);
border-radius:3px;padding:.5rem .85rem}
.cp-pdf svg{width:17px;height:17px;flex:0 0 auto;color:var(--orange-fonce)}
.cp-pdf:hover{background:var(--orange-pale);border-color:var(--orange)}
.cp-options label{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;
cursor:pointer}
.cp-vide{background:var(--blanc);border:1px dashed var(--trait);padding:2.5rem;
text-align:center;color:var(--gris)}
/* --- impression -----------------------------------------------------
Les filtres, la barre du comparateur et la modale n'ont pas de sens
sur le papier ; la fiche que le visiteur imprime, si. */
@media print{
.filtres,.cmp,.cmp-barre,.velox-modale{display:none !important}
.sel-grille{grid-template-columns:1fr}
}
/* ==================================================================
CARTES COMPACTES — rayons, fonds de jante, assurance (3 sept. 2026)
==================================================================
Les cartes empilaient rôle, photo, nom, cotes, texte, lien et couleurs
sur 460 px de haut, avec des zones vides là où une carte n'avait pas
de photo. La photo passe à gauche, en 64 px, le texte à droite ; les
boutons de couleur tiennent sur une rangée. Même chose pour les fonds
de jante. Les cartes de largeur gardent leur sous-grille, mais serrée. */
.panneau{padding:clamp(1rem,2vw,1.4rem)}
#panneau > .panneau + .panneau{margin-top:.75rem}
.ray h3,.fdj h3{font-size:1.05rem;margin-bottom:.6rem}
.ray-cartes{gap:.75rem}
.ray-carte{display:grid;grid-template-columns:64px minmax(0,1fr);
grid-template-areas:"role role" "img nom" "img spec" "img txt" "fiche fiche" "teintes teintes";
grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
column-gap:.7rem;row-gap:0;padding:.65rem .75rem .7rem}
.ray-carte .role{grid-area:role;margin-bottom:.4rem}
.ray-img{grid-area:img;width:64px;height:64px;margin:0;padding:.25rem;align-self:start}
.ray-nom{grid-area:nom}
.ray-spec{grid-area:spec;margin-top:.15rem;line-height:1.45}
.ray-txt{grid-area:txt;margin-top:.3rem;font-size:.8rem;line-height:1.45}
.ray-fiche{grid-area:fiche;margin-top:.35rem;min-height:0}
.ray-fiche:empty{display:none}
.ray-carte .teintes{grid-area:teintes;flex-direction:row;flex-wrap:wrap;align-items:center;
gap:.3rem .45rem;margin-top:.55rem;padding:.4rem .5rem}
.ray-carte .pt-titre{width:100%;margin:0 0 .1rem}
.sans-visuel .ray-img{display:none}
.sans-visuel .ray-nom,.sans-visuel .ray-spec,.sans-visuel .ray-txt{grid-column:1 / -1}
.sans-visuel .ray-spec:empty{display:none}
.fdj-cartes{gap:.75rem}
.fdj-carte{display:grid;grid-template-columns:64px minmax(0,1fr);
grid-template-areas:"role role" "img ref" "img mm" "img prix" "note note" "fiche fiche";
grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
column-gap:.7rem;row-gap:0;padding:.65rem .75rem .7rem}
.fdj-carte .role{grid-area:role;margin-bottom:.4rem}
.fdj-img{grid-area:img;width:64px;height:64px;margin:0;padding:.25rem;align-self:start}
.fdj-ref{grid-area:ref}
.fdj-mm{grid-area:mm}
.fdj-prix{grid-area:prix;margin-top:.2rem}
.fdj-note{grid-area:note;margin-top:.3rem}
.fdj-note:empty{display:none}
.fdj-carte .fiche{grid-area:fiche;margin-top:.35rem}
.fdj-carte .fiche.vide{display:none}
.sans-fond{min-height:0}
.sans-fond .fdj-img{display:none}
.sans-fond .fdj-ref,.sans-fond .fdj-mm,.sans-fond .fdj-prix{grid-column:1 / -1}
.sans-fond .fdj-mm:empty,.sans-fond .fdj-prix:empty{display:none}
/* Le bloc des largeurs voisines vit seul dans son panneau : le filet et
la marge qui le séparaient d'un bloc au-dessus ne séparaient plus rien,
ils faisaient 100 px de vide sous le bord du panneau. */
.panneau > .alt{margin-top:0;padding-top:0;border-top:0}
.alt h2{font-size:1.15rem;margin-bottom:.25rem}
.alt > p{margin-bottom:.8rem}
.opt-lg{padding:.8rem}
.opt-lg .role{margin-bottom:.45rem}
.opt-lg .profil{min-height:84px;height:calc(72px + .8rem);margin-bottom:.6rem;padding:.4rem}
.opt-lg .profil img{max-height:72px}
.opt-lg .det{margin-top:.25rem;line-height:1.45}
.opt-lg .det.resume{margin-top:.4rem}
.opt-lg .teintes{margin-top:.5rem}
.opt-lg .teintes.choix{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;padding:.35rem .5rem}
.opt-lg .teintes.choix .pt-titre{display:inline-block;width:auto;margin:0 .15rem 0 0}
.opt-lg .liens{margin-top:.5rem}
/* ---------- L'assurance du colis retour ---------- */
.ass{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.16)}
.fdj:empty + .ass,.panneau > .ass:first-child{margin-top:0;padding-top:0;border-top:0}
.ass h3{color:var(--blanc);font-size:1.05rem;margin-bottom:.2rem}
.ass-sous{color:var(--alu);font-size:.86rem;line-height:1.5;margin:0 0 .6rem;max-width:62ch}
.ass-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:660px}
.ass-carte{display:grid;grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"role role" "nom prix" "note note";column-gap:.6rem;align-items:baseline;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:.65rem .75rem .7rem}
.ass-carte .role{grid-area:role;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--orange-clair);display:block;margin-bottom:.4rem}
.ass-nom{grid-area:nom;font-family:var(--display);font-weight:700;color:#fff;font-size:.95rem}
.ass-prix{grid-area:prix;font-family:var(--display);font-weight:700;font-size:.95rem;
color:var(--orange-clair);white-space:nowrap}
.ass-note{grid-area:note;font-size:.78rem;color:#A3AEBE;margin-top:.3rem;line-height:1.45}
@media(max-width:820px){
.ray-cartes,.fdj-cartes{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}
@media(max-width:720px){.fdj-cartes{grid-template-columns:1fr}}
@media(max-width:560px){.ass-cartes{grid-template-columns:1fr}}
/* La liste des jantes est fabriquée en JavaScript : la page s'affiche
d'abord vide, le pied de page monte à hauteur d'écran, puis les
vingt-trois vignettes arrivent et le repoussent d'un coup. Réserver
un écran de hauteur tant que la liste est vide supprime ce saut ;
la règle s'annule d'elle-même dès que le premier élément est posé. */
#resultats:empty{min-height:100vh}
#facettes:empty{min-height:38rem}
/* ==================================================================
COMPARER LES TROIS LARGEURS D'UN COUP — 5 septembre 2026
==================================================================
Cocher « + Comparer » trois fois de suite pour voir côte à côte les
trois cartes qu'on a déjà sous les yeux était une corvée. Le bouton
les prend toutes les trois et ouvre le tableau. */
.alt-tete{display:flex;align-items:baseline;justify-content:space-between;
gap:1rem;flex-wrap:wrap}
.alt-tete h2{margin:0}
.alt-trois{flex:0 0 auto}
.alt-trois button{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
background:var(--orange);color:var(--encre);border:0;border-radius:3px;
padding:.62rem 1.15rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.alt-trois button:hover{background:var(--orange-clair)}
.alt-trois button:disabled{background:transparent;color:var(--alu);
border:1px solid rgba(198,205,214,.35);cursor:default}
/* ==================================================================
EXPORT PDF DU COMPARATEUR — 5 septembre 2026
==================================================================
Pas de fabricant de PDF embarque : c'est le navigateur qui ecrit le
document, par sa propre fenetre d'impression. On y gagne les vraies
polices du site, les dessins cotes en vectoriel, et — le point qui
comptait — des LIENS CLIQUABLES vers la fiche de chaque jante, que
Chrome, Safari et Firefox conservent en annotations dans le PDF.
Un fabricant embarque aurait coute 250 ko de bibliotheque et une
remise en page a la main, pour un resultat moins fidele. */
.cp-impression{display:none}
@media print{
/* Hors export, la modale ne s'imprime pas : la regle est plus haut.
Ici on inverse, et SEUL le comparatif reste sur le papier. */
/* Le fond crème du site débordait sous la boîte de la modale et
ressemblait à un grand pied de page vide. Sur le papier, tout est
blanc. */
body.impression-cmp,
body.impression-cmp .velox-corps,
body.impression-cmp .velox-boite{background:#fff !important}
body.impression-cmp .velox-modale{display:block !important;position:static;
inset:auto;background:none;padding:0;overflow:visible}
body.impression-cmp .velox-boite{width:100%;max-width:none;max-height:none;
box-shadow:none;border:0;border-radius:0;background:#fff;display:block}
body.impression-cmp .velox-corps{overflow:visible;padding:0;max-height:none}
/* Le voile sombre de la modale : rendu statique, il se repositionnait
sur le haut de la page et grisait le logotype. Il n'a de toute façon
rien à faire sur du papier. */
body.impression-cmp .velox-voile,
body.impression-cmp .confiance,
body.impression-cmp .menu,
body.impression-cmp #langue,
body.impression-cmp .fil,
body.impression-cmp .tete,
body.impression-cmp .sel-grille,
body.impression-cmp .cmp-barre,
body.impression-cmp .velox-tete,
body.impression-cmp .velox-pied,
body.impression-cmp .cp-options,
body.impression-cmp .cp-tete .liens button,
body.impression-cmp footer.pied{display:none !important}
/* Le logotype de l'en-tete reste : c'est lui qui signe le document,
plutot qu'une image ajoutee pour l'occasion. article.css masque
.entete a l'impression — d'ou le !important, qui ne vaut que
pendant un export. */
body.impression-cmp .entete{display:block !important;position:static;
border:0;background:#fff;margin:0 0 .2rem;padding:0;box-shadow:none}
body.impression-cmp .marque{color:var(--encre);text-decoration:none}
body.impression-cmp .marque span{color:var(--gris);border-left-color:var(--trait)}
body.impression-cmp .entete-int{display:block;height:auto}
body.impression-cmp .logo-velox{height:50px;width:auto}
body.impression-cmp .cp-impression{display:flex;align-items:flex-start;
justify-content:space-between;gap:1.2rem;
border-top:2px solid var(--encre);border-bottom:1px solid var(--trait);
padding:.55rem 0 .7rem;margin:0 0 .8rem}
body.impression-cmp .cp-imp-txt{flex:1 1 auto;min-width:0}
body.impression-cmp .cp-imp-txt h3{font-family:var(--display);font-weight:800;
font-size:1.35rem;margin:0 0 .18rem}
body.impression-cmp .cp-imp-txt p{margin:0;font-size:.76rem;line-height:1.45;
color:var(--gris);max-width:46em}
body.impression-cmp .cp-imp-date{font-family:var(--mono);font-size:.7rem;
letter-spacing:.06em;margin-top:.25rem !important;color:var(--gris)}
body.impression-cmp .cp-imp-qr{flex:0 0 auto;text-align:center}
body.impression-cmp .cp-imp-qr{width:112px;flex:0 0 112px}
body.impression-cmp .cp-imp-qr img{display:block;width:78px;height:78px;margin-inline:auto}
body.impression-cmp .cp-imp-qr span{display:block;font-family:var(--mono);
font-size:.58rem;letter-spacing:.02em;color:var(--gris);margin-top:.25rem;
white-space:nowrap}
/* Le tableau sur plusieurs pages : l'en-tete se repete, et aucune
ligne n'est coupee en deux. */
body.impression-cmp .cp-defile{overflow:visible}
/* Sur le papier rien ne défile : la ligne de rappel n'a plus d'objet. */
body.impression-cmp .cp-rappel{display:none}
body.impression-cmp .cp-tab{min-width:0;width:100%;font-size:.72rem}
body.impression-cmp .cp-tab thead{display:table-header-group}
body.impression-cmp .cp-tab tr{break-inside:avoid}
body.impression-cmp .cp-tete .photo{height:64px}
body.impression-cmp .cp-tete .photo img{max-height:58px}
body.impression-cmp .cp-coupe img,
body.impression-cmp .cp-coupe svg{max-height:150px;width:auto;margin-inline:auto}
/* Les liens restent des liens : c'est tout l'interet du document. */
body.impression-cmp .cp-tete .liens a{color:var(--orange-fonce);
text-decoration:underline}
}
/* ==================================================================
BOUTONS VOISINS DE MÊME TAILLE — 5 septembre 2026
==================================================================
Deux commandes posées côte à côte ou l'une sous l'autre doivent avoir
la même hauteur et, quand elles sont empilées, la même largeur. Sans
quoi l'œil lit une hiérarchie qui n'existe pas. */
/* Les trois commandes du pied de fiche : même largeur minimale ET même
hauteur. Le lien « Fiche velox.fr » est une ancre, il héritait de
l'interligne du corps de texte (23,3 px) là où les deux boutons
étaient à « normal » — huit pixels d'écart, visibles. */
.velox-pied .bouton{min-width:11rem;justify-content:center;line-height:1.2}
@media(max-width:560px){
.velox-pied .bouton{flex:1 1 100%;min-width:0}
}
/* 22 octobre 2026 — quatre commandes depuis le bouton « Fiche technique ».
Une grille à colonnes égales : chaque bouton prend la largeur du plus
long de la rangée, dans toutes les langues (« velox.fr product page ↗ »
dépassait les 11rem en anglais, et la rangée n'était plus régulière). */
.velox-pied .pied-boutons{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}
@media(max-width:560px){
.velox-pied .pied-boutons{grid-auto-flow:row;grid-auto-columns:auto;width:100%}
}
/* 22 octobre 2026 — « fait des vrais boutons avec de joli petit icones ».
Les deux liens (fiche technique, fiche velox.fr) prennent le filet de
« Comparer » : quatre vrais boutons, un pictogramme chacun, à gauche du
libellé. Le libellé ne passe JAMAIS sur deux lignes : quand la rangée
ne tient pas, c'est la grille qui change — selecteur.js, ajusterPied,
pose data-cols : « rangee », « 2 » (2 × 2) ou « 1 ». */
.velox-pied .pied-boutons .bouton{white-space:nowrap;gap:.5rem;padding:.7rem 1.1rem}
.velox-pied .pied-boutons .pic{width:18px;height:18px;flex:0 0 auto;pointer-events:none}
.velox-pied .pied-boutons[data-cols="rangee"]{display:inline-grid;grid-auto-flow:column;
grid-auto-columns:1fr;width:auto;flex:0 0 auto}
.velox-pied .pied-boutons[data-cols="2"],
.velox-pied .pied-boutons[data-cols="1"]{display:grid;grid-auto-flow:row;width:100%}
.velox-pied .pied-boutons[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.velox-pied .pied-boutons[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
.velox-pied .pied-boutons[data-cols="2"] .bouton,
.velox-pied .pied-boutons[data-cols="1"] .bouton{min-width:0}
/* « Comparer » grisé (trois jantes déjà retenues) ne vire plus à l'orange
au survol : la règle visait l'ancien « Choisir » désactivé. */
.velox-pied .bouton-vide:disabled:hover{background:transparent;color:var(--encre)}
/* Les pastilles de pratique dans le tableau du comparateur : le même
dessin que sur la fiche, en un peu plus serré — la colonne est
étroite et la ligne se lit en balayage. */
.cp-puces .fi-pratiques{gap:.3rem}
.cp-puces .fi-pratiques li{font-size:.68rem;padding:.18rem .5rem}
@media print{
body.impression-cmp .cp-puces .fi-pratiques li{font-size:.62rem;padding:.12rem .4rem}
}
/* SUR TÉLÉPHONE, l'arrondi complet ne va plus (corrigé le 13/09/2026 :
« l'habillage des pratiques bien trop arrondi »). Le coin de 999 px
suppose un libellé sur UNE ligne ; dans une colonne de cent pixels,
« e-Trekking / e-City » en prend trois, et la pastille devient un
ovale — un ballon posé dans un tableau. On revient donc au coin de
3 px du site, et chaque pastille prend toute la largeur de sa colonne :
une petite étiquette empilée sous la précédente, alignée à gauche
comme le reste de la cellule, au lieu de bulles de tailles inégales. */
@media(max-width:700px){
.cp-tab .cp-puces .fi-pratiques{gap:.25rem}
.cp-tab .cp-puces .fi-pratiques li{width:100%;border-radius:3px;
padding:.2rem .35rem;font-size:.64rem;line-height:1.3;text-align:left;
/* « Cargo / Triporteur » ne tient pas en cinquante pixels, quelle que
soit la taille : le mot seul en demande soixante. Plutôt que de le
couper en « Triporte / ur », on laisse la césure faire son travail
— la page est en français, le navigateur sait où couper. */
hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}
/* ==================================================================
LE COMPARATIF SUR PAPIER — 5 septembre 2026
==================================================================
Ce bloc n'existe que pour l'impression : à l'écran on fait défiler un
tableau, sur le papier on embrasse une page. Photos et coupes montent
donc en bandeau, les coupes à une echelle VRAIE — 1,05 mm de papier
par millimetre de jante, elles sont donc comparables a la regle —,
et le tableau suit. Charte Velox : titre bleu nuit, barre orange
courte sous le bloc de titre, etiquette de section en mono orange,
valeurs qui different en orange. */
.cp-papier{display:none}
@media print{
body.impression-cmp .cp-papier{display:block}
/* Le tableau de l'ecran ne s'imprime plus : le document le remplace. */
body.impression-cmp .cp-defile,
body.impression-cmp .barre-mobile,
body.impression-cmp .cp-impression{display:none !important}
body.impression-cmp .pp-tete{display:flex;align-items:flex-start;
justify-content:space-between;gap:1.2rem}
body.impression-cmp .pp-sur{font-family:var(--mono);font-size:.6rem;
letter-spacing:.15em;text-transform:uppercase;color:var(--orange-fonce);
margin-bottom:.15rem}
body.impression-cmp .pp-titre{font-family:var(--display);font-weight:800;
font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;color:var(--marine-nuit);
margin:0}
body.impression-cmp .pp-sous{font-size:.72rem;line-height:1.45;color:var(--gris);
margin:.2rem 0 0;max-width:34em}
body.impression-cmp .pp-droite{flex:0 0 auto;display:flex;align-items:flex-start;
gap:.6rem;text-align:right}
body.impression-cmp .pp-droite span{font-family:var(--mono);font-size:.6rem;
line-height:1.6;color:var(--gris);letter-spacing:.04em;padding-top:.15rem}
body.impression-cmp .pp-droite img{width:74px;height:74px;display:block}
/* Le trait orange, sur toute la largeur : c'est lui qui ferme le bloc
de titre et ouvre le document. */
body.impression-cmp .pp-regle{width:100%;height:3px;background:var(--orange);
margin:.5rem 0 .1rem}
body.impression-cmp .pp-bande{display:grid;grid-template-columns:repeat(3,1fr);
gap:.6rem;margin-top:.6rem}
body.impression-cmp .pp-col{text-align:center}
body.impression-cmp .pp-photo{height:64px;display:flex;align-items:center;
justify-content:center;border:.5px solid var(--trait);background:#fff}
body.impression-cmp .pp-photo img{max-height:58px;max-width:94%;width:auto;
object-fit:contain;mix-blend-mode:multiply}
body.impression-cmp .pp-nom{font-family:var(--display);font-weight:800;
font-size:.98rem;margin-top:.3rem;color:var(--marine-nuit)}
body.impression-cmp .pp-det{font-family:var(--mono);font-size:.62rem;
color:var(--gris);letter-spacing:.03em}
/* L'adresse de la fiche prend l'allure d'un bouton : filet marine,
libellé en mono, comme les commandes du site. Le lien reste bien un
lien — c'est lui qui devient cliquable dans le PDF. */
body.impression-cmp .pp-lien{margin-top:.3rem}
body.impression-cmp .pp-lien a{display:inline-block;font-family:var(--mono);
font-size:.6rem;letter-spacing:.04em;line-height:1;color:var(--marine-nuit);
text-decoration:none;border:1px solid var(--marine-nuit);border-radius:2px;
padding:.28rem .7rem;background:#fff}
body.impression-cmp .pp-coupes{display:grid;grid-template-columns:repeat(3,1fr);
gap:.6rem;align-items:end;margin-top:.55rem;padding:.5rem 0 .45rem;
border-top:.5px solid var(--trait);border-bottom:.5px solid var(--trait)}
body.impression-cmp .pp-cell{display:flex;align-items:flex-end;justify-content:center}
body.impression-cmp .pp-cell img{height:auto;display:block}
body.impression-cmp .pp-eti{font-family:var(--mono);font-size:.58rem;
letter-spacing:.13em;text-transform:uppercase;color:var(--orange-fonce);
margin:.7rem 0 .25rem}
body.impression-cmp .pp-tab{width:100%;border-collapse:collapse;
table-layout:fixed;font-size:.7rem;line-height:1.32}
body.impression-cmp .pp-tab th,
body.impression-cmp .pp-tab td{padding:.16rem .35rem;vertical-align:top;
text-align:left;border-bottom:.5px solid var(--trait)}
body.impression-cmp .pp-tab th{font-weight:500;color:var(--gris);width:23.5%}
body.impression-cmp .pp-tab td{font-family:var(--mono);font-size:.66rem;width:25.5%}
body.impression-cmp .pp-tab td.prose{font-family:var(--texte);font-size:.66rem}
body.impression-cmp .pp-tab tr.diff td{color:var(--orange-fonce)}
body.impression-cmp .pp-tab tr{break-inside:avoid}
body.impression-cmp .pp-tab .fi-pratiques li{font-size:.56rem;padding:.08rem .32rem}
}
/* --- le mode intégré ---------------------------------------------------
Page affichée dans un cadre de velox.fr et appelée avec « ?integre » :
la classe « integre » est posée sur par le petit script du
de selecteur.html, et seulement quand la page est réellement
dans un cadre. La boutique apporte déjà son bandeau, son en-tête, son
fil d'Ariane et son pied de page ; garder les nôtres montrerait deux
sites l'un dans l'autre.
Écran seulement : l'impression, la fiche et le PDF du comparatif ne
changent pas d'un pixel. */
@media screen{
html.integre .confiance,
html.integre header.entete,
html.integre .fil,
html.integre footer.pied,
html.integre .barre-mobile{display:none !important}
/* Rien ne précède plus le titre : un peu d'air au-dessus. La ligne du
dessous rend à la barre du comparateur la place que la règle ci-dessus
lui prendrait (même sur mobile, où une autre règle la porte à 132 px
pour laisser la barre d'appel — absente ici). */
html.integre body{padding-top:20px;padding-bottom:20px}
html.integre body.cmp-actif{padding-bottom:76px}
/* La colonne des filtres mesure près de deux mille pixels, plus que le
cadre. Collée en haut, sa moitié basse resterait hors d'atteinte
jusqu'à la fin des résultats : elle défile donc avec la page, comme
elle le fait déjà sur mobile. */
html.integre .filtres{position:static}
/* Le cadre a la hauteur de l'écran, mais la boutique qui le porte en
occupe le haut : à l'ouverture, ses derniers pixels sont sous le bord
de la fenêtre. Une barre ou une boîte collée au bas du cadre serait
là, hors de vue. Le script du mode intégré (selecteur.js) mesure la
part du cadre réellement visible et la donne dans --vis-haut et
--vis-bas ; sans mesure (navigateur trop ancien), les deux valent 0
et rien ne change. Le voile, lui, garde tout le cadre. */
html.integre .cmp-barre{bottom:var(--vis-bas,0px)}
html.integre .velox-modale{
padding-top:calc(var(--vis-haut,0px) + clamp(.5rem,3vw,2.5rem));
padding-bottom:calc(var(--vis-bas,0px) + clamp(.5rem,3vw,2.5rem))}
html.integre .velox-boite{max-height:100%}
}
@media screen and (max-width:760px){
html.integre body{padding-top:16px;padding-bottom:16px}
}
/* --- les cadres étroits --------------------------------------------------
Sur un téléphone de 360 px la boutique laisse au cadre 298 px ; sur un
téléphone de 320 px, 258 px. À cette largeur quelques pistes de grille,
qui gardent pour minimum la taille de leur contenu, ne rentraient plus
et poussaient la page vers la droite :
- la colonne unique de .sel-grille : « 1fr » ne descend jamais sous la
largeur minimale de son contenu, 282 px pour la colonne des filtres ;
- les cartes des rayons et des fonds de jante : colonnes de 250 px au
moins, et la dernière sortait du cadre ;
- les caractéristiques de la fiche : même minimum de 250 px ;
- le bouton « Comparer les trois largeurs », qui ne rétrécissait pas.
Chaque règle ne joue que s'il manque de la place : min(250px,100%) vaut
250px tant que le cadre les contient, et minmax(0,1fr) vaut 1fr tant
que le contenu tient. À partir de 328 px de cadre (un téléphone de
390 px), rien ne bouge. Un navigateur qui ignore min() laisse la règle
d'origine. */
@media screen and (max-width:900px){
html.integre .sel-grille{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:820px){
html.integre .ray-cartes,
html.integre .fdj-cartes{
grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
}
@media screen and (max-width:720px){
html.integre .fdj-cartes{grid-template-columns:minmax(0,1fr)}
}
@media screen{
html.integre .fi-carac{
grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
html.integre .alt-trois{max-width:100%}
}