/* ══════════════════════════════════════════════════════════════════════
cryptohardware.io — feuille de style unique.
Identite : CLAIRE. Fond papier tres pale, encre presque noire, un violet
electrique comme seule couleur d'action, et l'ambre du bitcoin reserve aux
moments ou l'on parle d'argent crypto. La couleur porte donc un SENS :
violet = ce sur quoi on clique, ambre = ce qui se paie en chaine. Un site
ou tout est colore ne dit plus rien.
[!] ZERO attribut `style` dans tout le site, et ce n'est pas une coquetterie.
La CSP est `style-src 'self'` sans `'unsafe-inline'` : le navigateur ignore
alors TOUT attribut `style` du document — et il l'ignore SANS RIEN CASSER
d'apparent. Une premiere version passait le remplissage des etoiles et la
couleur des pastilles crypto par `style="--fill:80%"` / `style="--coin:…"` :
la page se rendait parfaitement, les cinq etoiles sortaient vides et les huit
pastilles sortaient de la meme couleur. Rien, dans « la page repond 200 »,
ne voit ca. Tout ce qui varie passe donc par une CLASSE, listee ici.
Corollaire pour le JavaScript : `el.style.width = …` reste autorise (la CSP
ne couvre pas le CSSOM), mais `el.setAttribute('style', …)` est bloque —
voir app.js.
══════════════════════════════════════════════════════════════════════ */
/* ── Polices ─────────────────────────────────────────────────────────── */
@font-face{
font-family:'Geist';
src:url('/assets/fonts/geist-var.woff2') format('woff2-variations');
font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Geist Mono';
src:url('/assets/fonts/geist-mono-var.woff2') format('woff2-variations');
font-weight:100 900;font-style:normal;font-display:swap;
}
/* ── Jetons ──────────────────────────────────────────────────────────── */
:root{
/* teintes */
--paper:#FFFFFF;
--canvas:#F6F7FB;
--tint:#F3F1FE;
--ink:#0D1018;
--ink-2:#3B4356;
--ink-3:#6C7488;
--ink-4:#98A0B3;
--line:#E6E8F1;
--line-2:#F0F2F8;
--v-50:#F5F2FF;
--v-100:#EBE5FF;
--v-200:#D8CDFF;
--v-500:#6D4AFF;
--v-600:#5A31F4;
--v-700:#4B1FD6;
--v-800:#3B14AC;
--amber:#F7931A;
--amber-50:#FFF5E7;
--green:#0E9F6E;
--green-50:#E7F7F1;
--red:#E02424;
--red-50:#FDECEC;
--star-on:#F5A524;
--star-off:#E1E5EF;
/* typographie */
--font:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* geometrie */
/* 1400 et non 1240 : quatre cartes produit passent de 280 a 320 px de large,
donc un titre de deux lignes au lieu de trois et des caracteristiques qui
tiennent sur une rangee de puces. */
--wrap:1600px;
/* Gouttiere des barres PLEINE LARGEUR (en-tete, navigation, mega-menu).
Plus serree que celle du contenu : une barre qui va d'un bord a l'autre
n'a pas besoin de respirer autant qu'une colonne de texte. */
--gut-wide:clamp(16px,2.2vw,40px);
/* [!] La gouttiere de `.wrap`, en VARIABLE. Le panneau du mega-menu est
positionne en absolu dans un `.wrap` et doit se caler exactement dessus :
ecrite deux fois, la valeur aurait fini par differer, et le panneau se
serait decale de quelques pixels sans que personne ne sache pourquoi. */
--wrap-pad:clamp(16px,4vw,32px);
/* Rayons volontairement RESSERRES (14/20/28 → 10/14/18). Le grand arrondi
partout est le tic visuel des pages de logiciel ; un catalogue de
distribution se lit avec des angles nets. Restent ronds : les pastilles de
monnaie (ce sont des pieces) et le compteur du panier. */
/* Rayons RESSERRES une seconde fois (10/14/18 -> 4/6/8). Le grand arrondi
generalise est LA signature des interfaces faites au kit ; un catalogue
de materiel se lit avec des angles nets. Ne restent parfaitement ronds
que deux objets, parce que leur forme porte du SENS : la pastille d'une
monnaie (c'est une piece) et la bulle de comptage du panier. */
--r-xs:2px; --r-sm:3px; --r:4px; --r-lg:6px; --r-xl:8px; --r-pill:999px;
/* ombres — toujours teintees de bleu-violet, jamais du gris pur : une
ombre grise sur un fond violet tres pale se voit « sale ». Resserrees en
meme temps que les rayons : une ombre large et diffuse fait flotter, et
rien ne doit flotter sur une page de stock. */
/* Des FILETS, pas des halos. Une ombre large et floue sous chaque carte fait
flotter toute la page ; a la place, une bordure d'un pixel delimite, et
l'ombre n'est gardee que pour ce qui doit VRAIMENT passer par-dessus le
reste (menus, volets, tiroirs). */
--sh-1:0 1px 0 rgba(20,22,40,.04);
--sh-2:0 1px 2px rgba(20,22,40,.06);
--sh-3:0 10px 28px -14px rgba(24,20,60,.30), 0 1px 2px rgba(20,22,40,.08);
--sh-v:none;
--dur:.18s;
--ease:cubic-bezier(.32,.72,.32,1);
}
/* ── Base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* [!] LE garde-fou du parc : une classe qui pose display:flex|grid|block bat
la feuille du navigateur pour [hidden] (specificite egale, la feuille
auteur gagne). Sans cette ligne, un panneau « cache » s'affiche quand meme,
vide, et personne ne comprend pourquoi. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
font-variant-numeric:tabular-nums;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:660;letter-spacing:-.022em;line-height:1.14}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:620}
s{color:var(--ink-4)}
:focus-visible{outline:2.5px solid var(--v-600);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;
padding:.7rem 1.1rem;border-radius:var(--r-sm);transition:top var(--dur)}
.skip:focus{top:12px}
.muted{color:var(--ink-3)}
/* [!] `padding-inline` et jamais le raccourci `padding` sur .wrap : un
`padding:` pose ailleurs sur le meme element ecraserait la marge laterale
et collerait le contenu aux bords — invisible en grand ecran, ou la marge
du max-width le masque, et bien visible sous 1200 px. Panne deja vue. */
/* [!] `.wrap` PUBLIE sa gouttiere dans `--wrap-x`. Elle ne vaut PAS toujours
`--wrap-pad` : sous 560 px un reglage plus bas la ramene a 14 px. Tout ce
qui doit sortir de la colonne pour toucher le bord de l'ecran — les
rangees de produits — lit donc `--wrap-x`, et non le jeton. Ecrit avec le
jeton, le decalage valait 16 a 22 px la ou le rembourrage n'en faisait
que 14 : la rangee depassait de 2 a 8 px, la page se mettait a defiler
lateralement sur telephone, et rien ne le disait a l'oeil. */
.wrap{--wrap-x:var(--wrap-pad);
width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--wrap-x)}
/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.66rem 1.05rem;border-radius:var(--r-sm);font-weight:560;font-size:.95rem;
letter-spacing:-.008em;white-space:nowrap;
transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur),border-color var(--dur),color var(--dur);
}
.btn svg{flex:none}
.btn-lg{padding:.86rem 1.4rem;font-size:1rem;border-radius:var(--r)}
.btn-sm{padding:.5rem .8rem;font-size:.87rem;gap:.4rem}
.btn-block{width:100%}
.btn-primary{
/* Aplat, pas de degrade vertical ni de halo colore : c'est ce couple-la qui
fait << bouton de page de lancement >>. */
background:var(--v-600);color:#fff;
}
.btn-primary:hover{background:var(--v-700)}
.btn-primary:active{background:var(--v-800)}
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),var(--sh-1)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--v-200),var(--sh-2);color:var(--v-700)}
.btn-quiet{background:var(--v-50);color:var(--v-700)}
.btn-quiet:hover{background:var(--v-100)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1B2030}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
color:var(--ink-2);transition:background var(--dur),color var(--dur)}
.iconbtn:hover{background:var(--v-50);color:var(--v-700)}
/* ── Surtitres et en-tetes de section ────────────────────────────────── */
.eyebrow{
display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .7rem;
font-family:var(--mono);font-size:.735rem;font-weight:560;letter-spacing:.09em;
text-transform:uppercase;color:var(--v-700);
}
.eyebrow svg{color:var(--v-600)}
.eyebrow--pill{background:var(--v-50);padding:.4rem .8rem;border-radius:var(--r-xs);
box-shadow:inset 0 0 0 1px var(--v-100)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}
.shead-txt{max-width:62ch}
.shead-title{font-size:clamp(1.65rem,1.15rem + 1.7vw,2.45rem);letter-spacing:-.03em}
.shead-lede{margin-top:.7rem;color:var(--ink-3);font-size:1.02rem}
.shead-lede a{color:var(--v-700);text-decoration:underline;text-underline-offset:3px}
.shead-link{flex:none}
.shead--center{justify-content:center;text-align:center}
.shead--center .shead-txt{margin-inline:auto}
.shead--center .eyebrow{justify-content:center}
.sec{padding-block:clamp(3.4rem,2rem + 4vw,5.6rem)}
.sec--tint{background:var(--canvas)}
.sec--ink{background:linear-gradient(180deg,#FBFAFF,#F4F1FE)}
/* == Structure de la page ================================================
Deux largeurs, comme sur les grandes boutiques (Newegg, Amazon) :
- les BARRES du haut - annonces, en-tete, navigation, mega-menu - vont
d'un bord a l'autre de l'ecran, avec une simple gouttiere ;
- le CONTENU reste dans une colonne de --wrap (1400 px), centree.
L'effet recherche : sur un grand ecran, la recherche et le panier restent
aux extremites, la ou la main les cherche, pendant que le texte garde une
longueur de ligne lisible. Une colonne de 1400 px pour l'en-tete AUSSI
laisserait deux grandes marges vides en haut de page - ce qui fait
<< site vitrine >> et pas << boutique >>.
[!] Fait ICI, en CSS, et pas en changeant les classes du gabarit : les
memes `.wrap` servent aux deux registres, seul le contexte decide. Un
`.wrap-wide` dans le HTML aurait demande de retoucher header.php a chaque
nouvelle barre, et un oubli ne se serait vu que sur un tres grand ecran.
Selecteurs a deux classes (0,2,0) a dessein : ils gagnent sur `.wrap` quel
que soit l'ordre des regles dans le fichier. */
/* [!] L'en-tete faisait la largeur de l'ecran (structure Newegg) ; il est
desormais BORNE comme le contenu, sur demande du proprietaire. Les barres
gardent leur fond pleine largeur — c'est leur contenu qui s'aligne sur la
colonne, pas le trait de separation. */
/* Le panneau du mega-menu est BORNE puis cale a GAUCHE : etale sur 2560 px,
ses quatre colonnes atteindraient 550 px chacune et la liste deviendrait
illisible ; centre, il ne serait plus aligne sous le bouton qui l'ouvre. */
.hdr .mega-in{max-width:1720px;margin-inline:0}
/* ══ Bandeau d'annonces ══════════════════════════════════════════════ */
.announce{background:var(--ink);color:#EEF0F6;font-size:.82rem}
.announce-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:38px}
.announce-msgs{position:relative;flex:1;min-width:0;height:38px}
.announce-msg{
position:absolute;inset:0;display:flex;align-items:center;gap:.5rem;
opacity:0;transform:translateY(6px);pointer-events:none;
transition:opacity .3s var(--ease),transform .3s var(--ease);
}
/* Les messages sont empiles au meme endroit : en fondu simultane, on lisait
les deux l'un SUR l'autre au milieu de la transition. Le message entrant
attend donc que le sortant ait fini de disparaitre. */
.announce-msg.is-on{opacity:1;transform:none;transition-delay:.28s}
.announce-msg svg{color:var(--v-500);flex:none}
.announce-msg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.announce-links{display:flex;gap:1.3rem;flex:none}
.announce-links a{display:inline-flex;align-items:center;gap:.4rem;color:#B9C0D2;transition:color var(--dur)}
.announce-links a:hover{color:#fff}
/* ══ En-tete ═════════════════════════════════════════════════════════ */
/* Fond OPAQUE et filet net, plutot qu'un flou d'arriere-plan translucide :
le verre depoli est l'autre signature des interfaces faites au kit, et il
rend le texte de l'en-tete moins net sur les ecrans sans sur-echantillonnage. */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);
border-bottom:1px solid var(--line)}
.hdr.is-stuck{box-shadow:var(--sh-2);border-bottom-color:transparent}
.hdr-main{display:flex;align-items:center;gap:1.1rem;min-height:74px}
.hdr-burger{display:none;width:42px;height:42px;place-items:center;border-radius:var(--r-sm);color:var(--ink)}
.brand{display:inline-flex;align-items:center;gap:.62rem;flex:none}
.brand-logo{display:block;height:29px;width:auto}
.brand-logo--sm{height:24px}
@media (max-width:640px){
.brand-logo{height:25px}
}
/* ── Recherche ───────────────────────────────────────────────────────── */
/* La recherche prend la place laissee libre par l'en-tete pleine largeur,
avec une borne : au-dela, un champ de 1200 px ne se lit plus comme un
champ, il se lit comme une barre grise. */
.search{position:relative;flex:1;max-width:880px;margin-inline:auto}
.search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-4);pointer-events:none}
.search input{
width:100%;height:46px;padding:0 52px 0 44px;border-radius:var(--r-sm);
background:var(--canvas);border:1.5px solid transparent;
transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);
}
.search input::placeholder{color:var(--ink-4)}
.search input:focus{outline:0;background:var(--paper);border-color:var(--v-200);box-shadow:0 0 0 4px var(--v-50)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-go{
position:absolute;right:4px;top:50%;transform:translateY(-50%);
display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-xs);
background:var(--v-600);color:#fff;transition:background var(--dur)
}
.search-go:hover{background:var(--v-700)}
/* Bouton de langue : le meme gabarit que celui des monnaies, en plus court.
Deux commandes de meme nature cote a cote doivent se ressembler, sinon on
croit qu'elles font deux choses de nature differente. */
.langbtn{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .6rem;
border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.86rem;
transition:background var(--dur),color var(--dur)}
.langbtn:hover{background:var(--canvas);color:var(--v-700)}
.langbtn-t{font-family:var(--mono);letter-spacing:.04em}
/* [!] Le drapeau est ROGNE par son cadre : les diagonales de l'Union Jack
partent des coins, et leur epaisseur de trait deborde du rectangle. Sans
`overflow:hidden`, quatre petits ergots rouges et blancs depassent. */
.langbtn-f{display:block;width:22px;height:16px;flex:none;border-radius:2px;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(15,17,26,.12)}
.langflag{display:block;width:100%;height:100%}
.langflag--none{display:grid;place-items:center;width:100%;height:100%;
font-family:var(--mono);font-size:.6rem;background:var(--canvas);color:var(--ink-3)}
.fxmod--lang{max-width:460px}
.fxmod--lang .fxmod-h{display:flex;align-items:center;gap:.45rem}
.fxmod--lang .langrow{grid-template-columns:1fr}
/* « Annuler » de la recherche ancree en bas. Hors de cet usage, il n'existe
pas : dans l'en-tete de bureau, le champ n'a rien a fermer. */
.search-cancel{display:none;place-items:center;flex:none;height:44px;padding:0 .2rem 0 .7rem;
color:var(--ink-3);font-size:.9rem;font-weight:550;white-space:nowrap;
background:none;border:0;cursor:pointer}
.search-cancel:hover{color:var(--v-700)}
.search-panel{
position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:70;
background:var(--paper);border-radius:var(--r);box-shadow:var(--sh-3);
border:1px solid var(--line-2);padding:.45rem;max-height:min(62vh,520px);overflow:auto
}
.sres{display:flex;align-items:center;gap:.8rem;padding:.55rem .6rem;border-radius:var(--r-xs);transition:background var(--dur)}
.sres:hover,.sres:focus-visible{background:var(--v-50)}
.sres img{width:42px;height:42px;object-fit:contain;border-radius:var(--r-xs);background:var(--canvas);flex:none}
.sres-t{min-width:0;flex:1}
.sres-t b{display:block;font-weight:540;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres-t small{color:var(--ink-3);font-size:.79rem}
.sres-p{font-weight:600;font-size:.92rem;flex:none;font-variant-numeric:tabular-nums}
.sres-none{padding:1.1rem;color:var(--ink-3);text-align:center;font-size:.92rem}
/* ── Actions d'en-tete ───────────────────────────────────────────────── */
.hdr-acts{display:flex;align-items:center;gap:.35rem;flex:none;margin-left:auto}
/* Pastille de monnaie : le LOGO OFFICIEL de la piece, servi en depuis
/assets/coins/.svg (jeu `cryptocurrency-icons`, deja utilise sur le
parc). Le disque colore et le glyphe blanc sont DANS le fichier : il n'y a
donc plus ni couleur ni lettre a tenir ici. Seule la taille reste une
classe. Le rayon 50% est un garde-fou : si un logo arrivait un jour en
carre, il serait quand meme rogne en piece. */
.coin-badge{display:block;flex:none;width:var(--sz,20px);height:var(--sz,20px);border-radius:50%}
.cb-16{--sz:16px} .cb-18{--sz:18px} .cb-20{--sz:20px}
.cb-22{--sz:22px} .cb-26{--sz:26px} .cb-30{--sz:30px}
.coinsel{position:relative}
.coinsel-btn{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .6rem 0 .5rem;
border-radius:var(--r-sm);font-family:var(--mono);font-size:.85rem;font-weight:560;
transition:background var(--dur)}
.coinsel-btn:hover{background:var(--v-50)}
.coinsel-btn svg{color:var(--ink-4)}
.coinsel-menu{
position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:262px;
background:var(--paper);border-radius:var(--r);box-shadow:var(--sh-3);
border:1px solid var(--line-2);padding:.4rem
}
.coinsel-head{padding:.5rem .6rem .35rem;font-size:.75rem;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.07em;font-family:var(--mono)}
.coinsel-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.5rem .6rem;
border-radius:var(--r-xs);text-align:left;transition:background var(--dur)}
.coinsel-item:hover{background:var(--v-50)}
.coinsel-tick{color:var(--v-600);opacity:0}
.coinsel-item.is-on .coinsel-tick{opacity:1}
.coinsel-foot{display:flex;align-items:center;gap:.4rem;padding:.6rem;margin-top:.25rem;
border-top:1px solid var(--line-2);color:var(--ink-3);font-size:.78rem}
.cartbtn{display:inline-flex;align-items:center;gap:.6rem;height:44px;padding:0 .95rem 0 .75rem;
border-radius:var(--r-sm);background:var(--ink);color:#fff;transition:background var(--dur)}
.cartbtn:hover{background:#1B2030}
.cartbtn-ico{position:relative;display:grid;place-items:center}
.cartbtn-n{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 4px;
display:grid;place-items:center;border-radius:var(--r-pill);
background:var(--v-500);color:#fff;font-family:var(--mono);font-size:.68rem;font-weight:700}
.cartbtn-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.cartbtn-txt small{font-size:.68rem;color:#A9B1C6;letter-spacing:.04em;text-transform:uppercase}
.cartbtn-txt b{font-size:.9rem;font-weight:620;font-variant-numeric:tabular-nums}
/* ── Barre de rubriques ──────────────────────────────────────────────── */
/* [!] Ni `overflow:hidden` ni `overflow:auto` sur .hdr-nav : le mega-menu est
en position absolue a l'interieur, et un ancetre defilant le rognerait —
panne deja rencontree ailleurs sur ce parc, et qui ne se voit qu'ouvert. */
.hdr-nav{position:relative;border-top:1px solid var(--line-2);background:var(--paper)}
.hdr-nav-in{display:flex;align-items:center;gap:.4rem;min-height:50px}
.allcats{display:inline-flex;align-items:center;gap:.5rem;height:36px;padding:0 .85rem;
border-radius:var(--r-sm);background:var(--v-600);color:#fff;font-weight:540;font-size:.9rem;
transition:background var(--dur)}
.allcats:hover,.allcats[aria-expanded=true]{background:var(--v-700)}
.allcats svg:last-child{transition:transform var(--dur)}
.allcats[aria-expanded=true] svg:last-child{transform:rotate(180deg)}
.navlist{display:flex;align-items:center;gap:.15rem;margin-left:.5rem;min-width:0;overflow-x:auto;
scrollbar-width:none}
.navlist::-webkit-scrollbar{display:none}
.navlist a{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;border-radius:var(--r-xs);
font-size:.92rem;color:var(--ink-2);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.navlist a:hover{background:var(--v-50);color:var(--v-700)}
.navlist a.is-accent{color:var(--amber);font-weight:560}
.navlist a.is-accent:hover{background:var(--amber-50);color:#C97612}
.navpay{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;
color:var(--ink-3);white-space:nowrap;transition:color var(--dur)}
.navpay:hover{color:var(--v-700)}
.navpay svg{color:var(--v-600)}
/* == Mega-menu A DEUX VOLETS =============================================
Seize rayons et 390 categories : la grille d'antan (une colonne par rayon,
sous-rubriques deroulees) faisait un panneau de plus de 2 000 px de haut.
Ici, la liste des rayons a gauche, et le panneau du rayon survole s'affiche
a droite PAR-DESSUS l'encart par defaut. La hauteur ne depend donc plus du
nombre de rayons, mais du plus gros d'entre eux.
[!] Le panneau est positionne par rapport a `.mega-in`, qui porte la
gouttiere pleine largeur : ses decalages valent donc `var(--gut-wide)` plus
la largeur de la liste, et non zero. Un `left:0` le collerait au bord de
l'ecran, sous la liste. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:65;
background:var(--paper);border-top:1px solid var(--line);box-shadow:var(--sh-3);
animation:mega-in .18s var(--ease)}
@keyframes mega-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* [!] La hauteur suit la LISTE, elle ne la borne pas a 560 px : les seize
rayons en font 562, et le panneau coupait donc les deux derniers en plein
milieu, avec le rail de l'accueil qui reapparaissait dessous. Un menu
deroulant ou il faut faire defiler pour voir le dernier rayon est un menu
rate. Le plafond ne sert qu'au cas ou l'arbre grossirait beaucoup. */
.mega-in{position:relative;display:grid;grid-template-columns:266px minmax(0,1fr);
min-height:min(62vh,500px)}
.mega-list{border-right:1px solid var(--line);padding:.55rem .6rem .55rem 0;
max-height:min(86vh,720px);overflow-y:auto}
.mega-cat-link{display:flex;align-items:center;gap:.55rem;padding:.4rem .6rem;
border-radius:var(--r-xs);font-size:.885rem;color:var(--ink-2);
transition:background var(--dur),color var(--dur)}
.mega-cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-cat-link>svg:last-child{color:var(--ink-4);flex:none}
.mega-cat:hover .mega-cat-link,
.mega-cat:focus-within .mega-cat-link{background:var(--v-50);color:var(--v-700)}
.mega-ico{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--r-xs);
background:var(--v-50);color:var(--v-600);transition:background var(--dur),color var(--dur)}
.mega-cat:hover .mega-ico,
.mega-cat:focus-within .mega-ico{background:var(--v-600);color:#fff}
.mega-pane{position:absolute;top:0;bottom:0;z-index:2;
left:calc(var(--wrap-pad) + 266px);right:var(--wrap-pad);
background:var(--paper);padding:1.3rem 0 1.4rem 1.7rem;overflow-y:auto;
opacity:0;visibility:hidden;
transition:opacity .12s var(--ease),visibility .12s}
.mega-cat:hover .mega-pane,
.mega-cat:focus-within .mega-pane{opacity:1;visibility:visible}
.mega-side{align-self:center;justify-self:center;max-width:440px;padding:1.8rem}
.mega-side h3,.mega-side-h{font-size:1.12rem;font-weight:640;line-height:1.25;
margin:0 0 .5rem;letter-spacing:-.025em;color:var(--ink)}
.mega-side p{color:var(--ink-3);font-size:.9rem;margin-bottom:1rem}
.mega-side-pts{margin-top:1rem;display:grid;gap:.4rem}
.mega-side-pts li{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--ink-2)}
.mega-side-pts svg{color:var(--green)}
/* == Panneau d'un rayon (partage : mega-menu ET rail de l'accueil) ========
`column-width` et non `columns:4` : le nombre de colonnes se deduit de la
largeur disponible, donc le meme panneau tient dans le mega-menu (large) et
dans le volet du rail (plus etroit) sans une seule regle de plus. */
.cpanel-head{display:flex;align-items:baseline;gap:1rem 1.4rem;flex-wrap:wrap;
margin-bottom:1.05rem;padding-bottom:.8rem;border-bottom:1px solid var(--line-2);
padding-right:1.6rem}
.cpanel-title{display:inline-flex;align-items:center;gap:.4rem;font-size:1.02rem;font-weight:620;
letter-spacing:-.02em}
.cpanel-title:hover{color:var(--v-700)}
.cpanel-blurb{flex:1;min-width:240px;color:var(--ink-3);font-size:.85rem}
.cpanel-cols{column-width:245px;column-gap:1.8rem;padding-right:1.6rem}
.cgroup{break-inside:avoid;margin-bottom:1.05rem}
.cgroup-h{display:block;font-weight:600;font-size:.87rem;margin-bottom:.3rem;letter-spacing:-.012em}
.cgroup-h:hover{color:var(--v-700)}
.cgroup ul{display:grid;gap:.1rem}
.cgroup li a{display:block;font-size:.835rem;line-height:1.45;color:var(--ink-3);
transition:color var(--dur)}
.cgroup li a:hover{color:var(--v-700)}
/* == Rail de rayons (accueil) ============================================
SEIZE rayons, donc des lignes de TEXTE sans pastille : seize icones les unes
sous les autres sont du bruit, et elles doublaient la hauteur de la colonne.
[!] Le volet se positionne par rapport au RAIL (`top:0;bottom:0`), pas par
rapport a la ligne survolee : il fait ainsi exactement la hauteur du rail,
quel que soit le rayon, au lieu de deborder vers le bas sur les derniers.
[!] Ni `.hero`, ni `.hero-in`, ni `.crail` ne doivent recevoir
`overflow:hidden` — le volet sort par la droite. */
.crail{position:relative;z-index:5;display:flex;flex-direction:column;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-2);padding:.4rem}
.crail-h{display:flex;align-items:center;gap:.45rem;padding:.5rem .6rem .55rem;
font-family:var(--mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-4);border-bottom:1px solid var(--line-2);margin-bottom:.25rem}
.crail-h svg{color:var(--v-600)}
.crail-link{display:flex;align-items:center;gap:.5rem;padding:.32rem .6rem;
border-radius:var(--r-xs);font-size:.865rem;color:var(--ink-2);
transition:background var(--dur),color var(--dur)}
.crail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crail-go{color:var(--ink-4);display:flex;flex:none;transition:transform var(--dur)}
.crail-item:hover .crail-link,
.crail-item:focus-within .crail-link{background:var(--v-50);color:var(--v-700)}
.crail-item:hover .crail-go,
.crail-item:focus-within .crail-go{transform:translateX(2px);color:var(--v-600)}
.crail-foot{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding:.65rem .6rem .45rem;
border-top:1px solid var(--line-2);font-size:.84rem;font-weight:520;color:var(--amber)}
.crail-foot span{flex:1}
.crail-foot:hover{color:#B26A08}
.crail-fly{position:absolute;left:100%;top:0;bottom:0;z-index:20;margin-left:.5rem;
width:min(940px,calc(100vw - 26rem));
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-3);padding:1.2rem 0 1.2rem 1.3rem;overflow-y:auto;
opacity:0;visibility:hidden;transform:translateX(-6px);
transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s}
.crail-item:hover .crail-fly,
.crail-item:focus-within .crail-fly{opacity:1;visibility:visible;transform:none}
/* ══ Voile + tiroirs ═════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:75;background:rgba(13,16,24,.42);
opacity:0;transition:opacity .24s var(--ease)}
.scrim.is-open{opacity:1}
.drawer{position:fixed;top:0;bottom:0;z-index:80;width:min(420px,92vw);
display:flex;flex-direction:column;background:var(--paper);box-shadow:var(--sh-3);
transition:transform .28s var(--ease)}
.drawer--right{right:0;transform:translateX(100%)}
.drawer--left{left:0;transform:translateX(-100%)}
.drawer.is-open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1rem 1.1rem;border-bottom:1px solid var(--line-2);flex:none}
.drawer-top b{display:inline-flex;align-items:center;gap:.5rem;font-size:1.02rem}
.drawer-body{flex:1;overflow-y:auto;padding:1rem 1.1rem}
.drawer-foot{flex:none;border-top:1px solid var(--line-2);padding:1.1rem;background:var(--canvas)}
.mobnav>li{border-bottom:1px solid var(--line-2)}
.mobnav summary{display:flex;align-items:center;gap:.65rem;padding:.85rem 0;font-weight:540;
cursor:pointer;list-style:none}
.mobnav summary::-webkit-details-marker{display:none}
.mobnav summary svg:last-child{margin-left:auto;color:var(--ink-4);transition:transform var(--dur)}
.mobnav details[open] summary svg:last-child{transform:rotate(180deg)}
.mobnav details ul{padding:0 0 .8rem 2.4rem;display:grid;gap:.15rem}
.mobnav details ul a{display:block;padding:.35rem 0;color:var(--ink-3);font-size:.92rem}
.mobnav--flat{margin-top:1.2rem}
.mobnav--flat li{border:0}
.mobnav--flat a{display:flex;align-items:center;gap:.65rem;padding:.7rem 0;font-weight:520}
.mobnav--flat svg{color:var(--v-600)}
/* ── Panier ──────────────────────────────────────────────────────────── */
.cart-list{display:grid;gap:.9rem}
/* Deux colonnes et DEUX RANGEES, pas trois colonnes : en une seule rangee, le
selecteur de quantite et « Remove » ecrasaient la colonne du milieu et le
prix se coupait au milieu du ticker (« 0.00725 / BTC » sur deux lignes, par
dessus la ligne suivante). La vignette enjambe les deux rangees. */
.citem{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.55rem .85rem;align-items:start;
padding-bottom:.9rem;border-bottom:1px solid var(--line-2)}
.citem img{width:64px;height:64px;object-fit:contain;background:var(--canvas);border-radius:var(--r-xs);
grid-row:1/3}
.citem>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.citem-t b{display:block;font-size:.92rem;font-weight:540;line-height:1.35}
.citem-t .citem-p{display:block;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);margin-top:.15rem}
.citem-q{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--line);
border-radius:var(--r-sm);padding:.1rem}
.citem-q button{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-xs);color:var(--ink-3)}
.citem-q button:hover{background:var(--v-50);color:var(--v-700)}
.citem-q span{min-width:22px;text-align:center;font-family:var(--mono);font-size:.85rem;font-weight:600}
.citem-x{color:var(--ink-4);font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.citem-x:hover{color:var(--red)}
/* Meme regle jusque dans l'etat vide : la grosse pastille centree mangeait
90 px de haut pour dire ce que la phrase juste en dessous disait deja. */
.cart-empty{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:center;
padding:1.2rem;border:1px dashed var(--line);border-radius:var(--r);
background:var(--canvas)}
.cart-empty-ico{grid-area:1/1;display:grid;place-items:center;width:42px;height:42px;
border-radius:var(--r-sm);background:var(--v-50);color:var(--v-600)}
.cart-empty-ico svg{width:22px;height:22px}
.cart-empty p:first-of-type{grid-area:1/2}
.cart-empty p.muted{grid-area:2/1/3/3;margin-top:.5rem;font-size:.88rem}
.cart-empty .btn{grid-area:3/1/4/3;margin-top:.9rem;justify-self:start}
.cart-sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.4rem}
.cart-sum b{font-size:1.2rem;font-weight:660;font-variant-numeric:tabular-nums}
.cart-sum--coin{color:var(--ink-3);font-size:.9rem}
.cart-sum--coin b{font-size:.98rem;color:var(--ink)}
.cart-note{display:flex;align-items:center;gap:.4rem;margin:.7rem 0 .9rem;
font-size:.79rem;color:var(--ink-3)}
.cart-note svg{color:var(--v-600);flex:none}
.cart-trust{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.7rem;
font-size:.76rem;color:var(--ink-4)}
/* == Heros ==============================================================
BORNE, comme tout le reste du contenu. La photo ne file plus d'un bord a
l'autre : elle vit dans une banniere arrondie qui occupe la colonne de
droite, et le rail de rubriques occupe celle de gauche. C'est le montage
des grandes boutiques - un menu permanent et une banniere, tous deux dans
la meme colonne de contenu.
[!] `overflow:hidden` est sur la BANNIERE, jamais sur `.hero` ni sur
`.hero-in` : le volet du rail sort par la droite, et un ancetre qui rogne
le ferait disparaitre. Panne deja vue ailleurs sur ce parc, invisible tant
qu'on n'ouvre pas le menu. */
.hero{position:relative;background:var(--canvas);border-bottom:1px solid var(--line);
padding-block:clamp(.9rem,.6rem + 1vw,1.5rem) clamp(1.3rem,1rem + 1.4vw,2rem)}
.hero-in{display:grid;grid-template-columns:284px minmax(0,1fr);
gap:clamp(.9rem,1.2vw,1.5rem);align-items:stretch}
/* [!] EMPILEMENT EN POSITIF (0 / 1 / 2), pas en negatif.
La version precedente posait la photo en `z-index:-2` et le voile en `-1`
sous un parent `isolation:isolate` : tant que ce parent n'avait pas
`overflow:hidden`, tout allait bien ; des qu'on l'a ajoute pour arrondir les
angles de la banniere, **la photo a cesse d'etre peinte**. Elle etait
pourtant chargee, dimensionnee au pixel pres et au bon endroit — seule une
mesure de pixels le montrait, aucune erreur nulle part. Un empilement en
positif n'a pas ce genre de coin sombre : la photo est le fond, le voile
par-dessus, le texte par-dessus encore. */
.herobanner{position:relative;overflow:hidden;
border-radius:var(--r-xl);border:1px solid var(--line);
display:flex;align-items:center;
padding:clamp(1.5rem,1rem + 2.2vw,3rem);
min-height:clamp(340px,24vw,430px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:64% 50%;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(97deg,#fff 0%,rgba(255,255,255,.97) 24%,rgba(255,255,255,.86) 41%,
rgba(255,255,255,.45) 62%,rgba(255,255,255,.15) 84%,rgba(255,255,255,.06) 100%),
linear-gradient(180deg,rgba(109,74,255,.08) 0%,rgba(109,74,255,0) 60%)}
.hero-txt{position:relative;z-index:2;max-width:660px}
/* Surtitre : un FILET et des capitales espacees, pas une gelule sur fond
pastel. La gelule arrondie est le tic visuel des pages de logiciel ; le
filet et la petite capitale sont le vocabulaire des catalogues. */
.tagline{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
font-family:var(--mono);font-size:.72rem;font-weight:560;letter-spacing:.15em;
text-transform:uppercase;color:var(--v-700)}
.tagline::before{content:"";width:30px;height:2px;background:var(--v-600);flex:none}
.hero h1{font-size:clamp(2.1rem,1.2rem + 2.9vw,3.2rem);letter-spacing:-.04em;
line-height:1.05;font-weight:690}
/* Violet plein et non degrade dans le texte : un titre en degrade est
exactement ce qui fait << page de lancement >>. */
.hero h1 .hl{color:var(--v-700);white-space:nowrap}
.hero-lede{margin-top:1.1rem;font-size:clamp(1rem,.95rem + .3vw,1.1rem);color:var(--ink-2);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.7rem}
/* [!] Le rembourrage vertical n'est pas decoratif : sans lui, ce lien fait
24 px de haut, soit la limite basse de WCAG 2.5.8 et la moitie de ce
qu'Apple demande. C'est la TROISIEME action du heros, posee entre deux
boutons de 48 px ; a cette taille elle se rate au doigt. */
.hero-link{display:inline-flex;align-items:center;gap:.35rem;margin-left:.35rem;font-size:.93rem;
padding-block:.6rem;
color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;
text-decoration-color:var(--v-200);transition:color var(--dur)}
.hero-link:hover{color:var(--v-700);text-decoration-color:var(--v-600)}
.hero-coins{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem .9rem;margin-top:1.8rem}
.hero-coins-lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink-4)}
.coinrow{display:flex;flex-wrap:wrap;gap:.4rem}
.coinpill{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .6rem .3rem .32rem;
border-radius:var(--r-xs);background:var(--paper);
box-shadow:inset 0 0 0 1px var(--line);
font-family:var(--mono);font-size:.76rem;font-weight:560;color:var(--ink-2)}
.coinrow--hero .coinpill{background:rgba(255,255,255,.92)}
/* == Bandeau de chiffres ================================================
Des NOMBRES separes par des filets, en carte bornee sous la banniere.
Registre de catalogue professionnel : on ne promet pas, on declare. (La
boutique vend au DETAIL - c'est le TON qui est serieux, pas la clientele.)
Le premier chiffre est CALCULE depuis le catalogue : un nombre de
references recopie a la main se met a mentir des la premiere rubrique
ajoutee. */
.herostats{display:grid;grid-template-columns:repeat(4,1fr);
margin-top:clamp(.9rem,1.2vw,1.5rem);
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.hstat{padding:1.05rem 1.2rem 1.15rem;border-left:1px solid var(--line)}
.hstat:first-child{border-left:0}
.hstat b{display:block;font-family:var(--mono);font-size:clamp(1.35rem,1.1rem + .7vw,1.75rem);
font-weight:660;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.hstat b i{font-style:normal;font-size:.6em;color:var(--ink-3);margin-left:.12em}
.hstat small{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.67rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
/* ══ Bande de reassurance ════════════════════════════════════════════ */
.usps{border-block:1px solid var(--line-2);background:var(--paper)}
/* TROIS colonnes depuis le retrait de l'argument « No account required » :
laisser `repeat(4,1fr)` pour trois elements aurait ouvert un quatrieme
emplacement vide au milieu de la bande de reassurance. */
.usps-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding-block:1.9rem}
.usp{display:flex;gap:.8rem}
.usp-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);
background:var(--v-50);color:var(--v-600)}
.usp b{display:block;font-size:.95rem;font-weight:590;margin-bottom:.15rem}
.usp p{font-size:.86rem;color:var(--ink-3);line-height:1.5}
/* ══ Tuiles de rubrique ══════════════════════════════════════════════ */
.ctiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.ctile{position:relative;display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
/* Le survol change la BORDURE, il ne souleve plus la carte : un decalage de
trois pixels sous le curseur est un tic d'interface, et il fait sautiller
toute une grille quand on la balaie. */
.ctile:hover{border-color:var(--v-600);box-shadow:var(--sh-2)}
.ctile-media{display:block;background:linear-gradient(170deg,#F7F5FF,#FFF);padding:.6rem}
/* 5/4 et non 1/1 : a 1600 px de colonne, quatre tuiles carrees feraient 370 px
de haut chacune et les deux rangees mangeraient un ecran entier. Le format
plus large garde le meme cadrage en coupant la hauteur d'un quart. */
.ctile-media img{width:100%;aspect-ratio:5/4;object-fit:contain;transition:transform .35s var(--ease)}
.ctile:hover .ctile-media img{transform:scale(1.045)}
.ctile-body{display:flex;flex-direction:column;padding:.9rem 1rem 1.05rem;border-top:1px solid var(--line-2)}
.ctile-name{font-weight:580;letter-spacing:-.02em}
.ctile-count{font-family:var(--mono);font-size:.76rem;color:var(--ink-4);margin-top:.12rem}
.ctile-go{position:absolute;right:.9rem;bottom:1rem;display:grid;place-items:center;
width:32px;height:32px;border-radius:var(--r-xs);background:var(--v-50);color:var(--v-600);
transition:background var(--dur),color var(--dur),transform var(--dur)}
.ctile:hover .ctile-go{background:var(--v-600);color:#fff;transform:translateX(2px)}
/* ══ Cartes produit ══════════════════════════════════════════════════ */
/* [!] `auto-fill` et non un nombre de colonnes par palier de largeur. La
grille sert dans TROIS contextes de largeurs differentes — pleine page sur
l'accueil, colonne de resultats a cote des filtres, bloc de repli d'une
rubrique vide — et un `repeat(4,1fr)` pilote par media query donnait quatre
colonnes dans chacun : des cartes de 320 px ici, de 190 px la, pour la meme
fenetre. La carte declare la largeur ou elle reste lisible, la grille en
met autant que la place le permet. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1rem}
/* ── Carte produit ────────────────────────────────────────────────────
Objectif : la densite. La carte precedente faisait ~620 px de haut pour
quatre par rangee ; celle-ci en fait ~390 pour six. Trois economies, dans
l'ordre de ce qu'elles rapportent :
1. la vignette passe du CARRE au 4/3. Sur 166 fichiers le rapport median
est de 1,17 et le troisieme quartile de 1,35 : le carre reservait une
bande vide en haut et en bas de la moitie du catalogue ;
2. la marque et la note PARTAGENT une ligne au lieu d'en occuper deux ;
3. la mention de stock rejoint le montant en crypto sur la meme ligne, et
le filet pointille qui les separait du prix disparait. */
.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
transition:border-color var(--dur),box-shadow var(--dur)}
.pcard:hover{border-color:var(--v-600);box-shadow:var(--sh-2)}
.pcard.is-out{opacity:.82}
/* La HAUTEUR de la boite ne bouge pas d'une carte a l'autre : dans une grille,
l'oeil descend une colonne de prix, et des vignettes inegales la font
onduler. C'est le RETRAIT qui s'adapte a la photo. */
/* [!] Fond BLANC, pas un degrade gris. Les photos du catalogue sont detourees
sur blanc : sur un fond legerement gris, chacune apparaissait comme un
rectangle blanc flottant au milieu de la boite, avec une bande grise sous
elle. Le filet du corps de carte suffit a delimiter la zone d'image. */
/* [!] `min-height:0` EST INDISPENSABLE, et son absence est muette. La boite
media est un enfant de conteneur flex : par defaut elle vaut
`min-height:auto`, c'est-a-dire « jamais plus courte que mon contenu ». Le
contenu est une image remplacee, dont le rapport intrinseque se transmet en
hauteur minimale — et cette minimale l'emporte sur `aspect-ratio`. Mesure
sur une rangee de six cartes de 241 px de large : une seule respectait les
181 px attendus (sa photo faisait justement du 4/3), les photos carrees
donnaient 236 px et une photo en hauteur 362 px. La feuille de style dit
pourtant `aspect-ratio: 4 / 3` sur les six, et le style calcule le confirme.
Meme famille que le `min-width:auto` qui faisait defiler la page en 360 px. */
.pcard-media{position:relative;aspect-ratio:4/3;min-height:0;
padding:.5rem .65rem;background:var(--paper)}
.pcard-media a{display:block;width:100%;height:100%}
.pcard-media img{width:100%;height:100%;object-fit:contain;
transition:transform .3s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.045)}
/* Une photo panoramique (un ecran ultra-large, rapport 2,00) se retrouve a
l'etroit avec le retrait lateral commun ; une photo en hauteur (une tour,
rapport 0,62) avec le retrait vertical. Chacune recupere le sien. */
.pcard--wide .pcard-media{padding:.5rem .3rem}
.pcard--tall .pcard-media{padding:.2rem .65rem}
.pcard-wish{position:absolute;top:.45rem;right:.45rem;display:grid;place-items:center;
width:28px;height:28px;border-radius:var(--r-xs);
background:rgba(255,255,255,.94);color:var(--ink-4);box-shadow:var(--sh-1);
opacity:0;transform:translateY(-4px);
transition:opacity var(--dur),transform var(--dur),color var(--dur)}
.pcard:hover .pcard-wish,.pcard-wish:focus-visible{opacity:1;transform:none}
.pcard-wish:hover,.pcard-wish.is-on{color:var(--red)}
.pcard-body{display:flex;flex-direction:column;flex:1;
padding:.6rem .7rem .7rem;border-top:1px solid var(--line-2)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
min-height:14px}
.pcard-brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-4);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-rate{display:inline-flex;align-items:center;gap:.28rem;flex:none}
.pcard-rate-n{font-size:.7rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
/* Deux lignes au plus, toujours. Un titre de source fait couramment cent
vingt caracteres : sans limite, une carte sur quatre en prenait quatre et
la rangee entiere s'alignait sur elle. */
.pcard-name{font-size:.88rem;font-weight:540;line-height:1.35;margin-top:.25rem;
letter-spacing:-.012em;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.pcard-name a:hover{color:var(--v-700)}
/* ⚠️ LA CARTE ENTIERE EST LA CIBLE, et c'est une exigence mobile avant d'etre
un confort. Le titre d'un article qui tient sur une ligne fait 18 px de
haut : au doigt, on le rate une fois sur trois, et l'on tape le vide entre
deux cartes. On etire donc le lien du titre sur toute la carte.
[!] Les commandes REMONTENT au-dessus de lui (`z-index:2`), sinon
« Add to cart » et le cœur cessent de repondre — ils seraient recouverts
par un lien invisible, et le bouton paraıtrait simplement mort. */
.pcard-name a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard-media a{position:relative;z-index:2}
.pcard .btn,.pcard-wishf,.pcard-wish{position:relative;z-index:2}
/* UNE ligne, jamais deux : ce qui depasse est coupe net. Ces puces servent a
trancher entre deux articles voisins, pas a decrire. */
.pcard-specs{display:flex;flex-wrap:nowrap;gap:.25rem;margin-top:.4rem;overflow:hidden}
.pcard-specs li{flex:0 1 auto;min-width:0;max-width:52%;
padding:.12rem .38rem;border-radius:var(--r-xs);background:var(--canvas);
font-size:.68rem;color:var(--ink-3);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* `margin-top:auto` ICI et pas sur le bouton : c'est ce qui pose le prix a la
meme hauteur d'une carte a l'autre, quel que soit le nombre de lignes du
titre. Sans lui, la grille alignait les CARTES, jamais leur contenu. */
.pcard-money{margin-top:auto;padding-top:.6rem;display:flex;flex-wrap:wrap;
align-items:center;justify-content:space-between;gap:.25rem .5rem}
/* Le prix garde SA ligne — c'est le seul element qu'on lit en diagonale. Le
montant en crypto et la disponibilite se partagent la suivante. */
.pcard-money .pprice{flex:0 0 100%}
.pprice{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
/* [!] Le prix en dollars est en SANS, pas en monospace, et c'est le rendu qui
a tranche : dans une police a chasse fixe, la virgule des milliers occupe la
largeur d'un chiffre — « $1,199 » se lisait litteralement « $1 , 199 ».
Le monospace est garde la ou il a du sens : le montant en crypto, les
tickers, les compteurs. `tabular-nums` conserve l'alignement des colonnes. */
.pprice-fiat{font-size:1.18rem;font-weight:660;letter-spacing:-.025em;
font-variant-numeric:tabular-nums}
.pprice-was{font-size:.8rem;font-variant-numeric:tabular-nums}
.pprice-off{padding:.08rem .3rem;border-radius:var(--r-xs);background:var(--red-50);color:var(--red);
font-family:var(--mono);font-size:.68rem;font-weight:640}
.pprice-coin{display:inline-flex;align-items:center;gap:.28rem;
font-family:var(--mono);font-size:.73rem;font-weight:560;color:var(--ink-3)}
.pprice-coin-s{color:var(--ink-4)}
.pcard .stock{font-size:.72rem}
.pcard .btn{margin-top:.6rem}
.stock{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:520}
.stock svg{flex:none}
.stock--in{color:var(--green)}
.stock--low{color:#B26A08}
.stock--out{color:var(--ink-4)}
.stars{display:inline-flex;gap:1px}
.star{position:relative;display:inline-block;line-height:0;color:var(--star-off)}
.star .star-fg{position:absolute;left:0;top:0;color:var(--star-on);
clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
/* Onze paliers plutot qu'une valeur libre : une note se lit au dixieme, et une
classe survit a la CSP la ou un `style="--fill:…"` serait ignore. */
.star.f0{--fill:0%} .star.f10{--fill:10%} .star.f20{--fill:20%}
.star.f30{--fill:30%} .star.f40{--fill:40%} .star.f50{--fill:50%}
.star.f60{--fill:60%} .star.f70{--fill:70%} .star.f80{--fill:80%}
.star.f90{--fill:90%} .star.f100{--fill:100%}
/* ══ Compte a rebours ════════════════════════════════════════════════ */
.shead--deals{align-items:center}
.countdown{display:flex;align-items:center;gap:.35rem;flex:none}
/* ══ Onglets de filtre ═══════════════════════════════════════════════ */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}
.tab{padding:.45rem .9rem;border-radius:var(--r-xs);font-size:.88rem;font-weight:520;
color:var(--ink-2);background:var(--canvas);transition:background var(--dur),color var(--dur)}
.tab:hover{background:var(--v-50);color:var(--v-700)}
.tab.is-on{background:var(--ink);color:#fff}
/* ══ Etapes de paiement ══════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:s}
/* [!] L'icone est SUR LA MEME LIGNE que le titre, pas au-dessus.
Empilee, elle s'offrait une ligne entiere pour elle seule : ~60 px de haut
par carte qui ne portaient aucune information, multiplies par trois cartes
ici et quatre plus bas. Le lecteur, lui, doit balayer une pastille vide
avant d'atteindre le mot qui l'interesse. En grille a deux colonnes, l'icone
et le titre partagent la premiere rangee et le paragraphe passe SOUS les
deux (`grid-area` sur toute la largeur) : le texte garde sa pleine mesure,
au lieu d'etre renfonce dans une colonne etroite. */
.step{position:relative;padding:1.5rem;border-radius:var(--r-lg);
background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);
display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center}
.step-n{position:absolute;top:1.32rem;right:1.5rem;font-family:var(--mono);font-size:1.6rem;
font-weight:700;color:var(--v-200);letter-spacing:-.04em;line-height:1}
.step-ico{grid-area:1/1;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
background:var(--v-600);color:#fff}
/* Le renfoncement a droite degage le gros numero pose en absolu dans l'angle :
sans lui, un titre un peu long passerait dessous. */
.step h3{grid-area:1/2;font-size:1.06rem;letter-spacing:-.022em;padding-right:2.4rem}
.step p{grid-area:2/1/3/3;margin-top:.8rem;color:var(--ink-3);font-size:.93rem}
.lockcard{margin-top:1.6rem;display:grid;grid-template-columns:1.25fr .95fr;gap:0;
border-radius:var(--r-xl);overflow:hidden;background:var(--paper);
border:1px solid var(--v-100);box-shadow:var(--sh-2)}
.lockcard-l{padding:clamp(1.6rem,1rem + 2vw,2.6rem)}
.lockcard-l h3{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);margin-bottom:.8rem;letter-spacing:-.03em}
.lockcard-l p{color:var(--ink-2);margin-bottom:.8rem}
.lockcard-fine{font-size:.9rem;color:var(--ink-3)}
.lockcard-r{background:linear-gradient(150deg,var(--ink),#1C1740);
display:grid;place-items:center;padding:clamp(1.4rem,1rem + 2vw,2.4rem)}
.lockdemo{width:100%;max-width:300px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-lg);padding:1.3rem;color:#fff}
.lockdemo-h{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;
text-transform:uppercase;letter-spacing:.09em;color:#A99CFF}
.lockdemo-amt{font-family:var(--mono);font-size:1.7rem;font-weight:660;margin-top:.7rem;letter-spacing:-.03em}
.lockdemo-amt b{color:#B7A8FF;font-weight:660}
.lockdemo-sub{font-size:.78rem;color:#9AA1B8;margin-top:.2rem}
.lockdemo-bar{height:5px;border-radius:var(--r-xs);background:rgba(255,255,255,.14);margin-top:1.1rem;overflow:hidden}
.lockdemo-bar span{display:block;height:100%;width:100%;border-radius:inherit;
background:linear-gradient(90deg,var(--v-500),#A78BFA)}
.lockdemo-t{font-family:var(--mono);font-size:.82rem;color:#CBD1E2;margin-top:.6rem}
.lockdemo-t span{color:#fff;font-weight:640}
/* ══ Pourquoi la crypto ══════════════════════════════════════════════ */
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
/* Meme composition que `.step` et pour la meme raison : l'icone accompagne le
titre, elle ne le precede pas d'une ligne. */
.why{padding:1.4rem;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center;
transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur) var(--ease)}
.why:hover{border-color:var(--v-200)}
.why-ico{grid-area:1/1;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
background:var(--v-50);color:var(--v-600)}
.why h3{grid-area:1/2;font-size:1rem;letter-spacing:-.02em;line-height:1.3}
.why p{grid-area:2/1/3/3;margin-top:.75rem;color:var(--ink-3);font-size:.91rem}
/* ══ Marques ═════════════════════════════════════════════════════════ */
.brands{padding-block:2.4rem;border-block:1px solid var(--line-2);background:var(--canvas)}
.brands-lbl{text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:1.1rem}
.brands-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.7rem}
.brands-row li{font-size:.97rem;font-weight:560;color:var(--ink-4);letter-spacing:-.02em;
transition:color var(--dur)}
.brands-row li:hover{color:var(--ink-2)}
/* ══ Avis ════════════════════════════════════════════════════════════ */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.rev{margin:0;padding:1.6rem 1.5rem;border-radius:var(--r-lg);background:var(--paper);
border:1px solid var(--line)}
.rev blockquote{margin:.8rem 0 1.1rem;font-size:1rem;color:var(--ink-2);line-height:1.6}
.rev figcaption{display:flex;flex-direction:column;font-size:.85rem}
.rev figcaption b{font-weight:580}
.rev figcaption span{color:var(--ink-4);font-size:.79rem}
/* ══ Questions ═══════════════════════════════════════════════════════ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
transition:border-color var(--dur),box-shadow var(--dur)}
.faq-item[open]{border-color:var(--v-200);box-shadow:var(--sh-1)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1rem 1.1rem;font-weight:540;cursor:pointer;list-style:none;letter-spacing:-.012em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-mark{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--r-xs);
background:var(--v-50);color:var(--v-600);transition:transform var(--dur),background var(--dur)}
.faq-item[open] .faq-mark{transform:rotate(45deg);background:var(--v-600);color:#fff}
.faq-a{padding:0 1.1rem 1.1rem}
.faq-a p{color:var(--ink-3);font-size:.94rem}
/* ══ Pied de page ════════════════════════════════════════════════════ */
.ftr{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(2.6rem,2rem + 2vw,4rem) 2rem}
.ftr-cols{display:grid;grid-template-columns:1.65fr 1fr 1fr 1fr 1fr;gap:2rem 1.8rem}
.ftr-brand{max-width:38ch}
.ftr-pitch{margin-top:1rem;color:var(--ink-3);font-size:.9rem}
.ftr-label{margin-top:1.3rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4)}
.ftr-trust{margin-top:1.3rem;display:grid;gap:.5rem}
.ftr-trust li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-2)}
.ftr-trust svg{color:var(--v-600);flex:none}
.ftr-h{font-size:.82rem;font-weight:620;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink);margin-bottom:.9rem}
.ftr-col ul{display:grid;gap:.42rem}
.ftr-col a{font-size:.9rem;color:var(--ink-3);transition:color var(--dur)}
.ftr-col a:hover{color:var(--v-700)}
.ftr-col a.is-accent{color:var(--amber);font-weight:540}
.ftr-nocard{display:flex;gap:.8rem;align-items:flex-start;margin-top:2.6rem;padding:1.1rem 1.3rem;
border-radius:var(--r);background:var(--v-50);color:var(--ink-2);font-size:.9rem}
.ftr-nocard svg{color:var(--v-600);flex:none;margin-top:.15rem}
.ftr-bottom{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line-2);
font-size:.83rem;color:var(--ink-4)}
.ftr-mini{display:flex;gap:1.2rem}
.ftr-mini a:hover{color:var(--v-700)}
/* ══ Page 404 ════════════════════════════════════════════════════════ */
.e404{max-width:840px;margin-inline:auto;text-align:center}
.e404 h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);letter-spacing:-.035em;margin-top:.5rem}
.e404-lede{margin:1rem auto 0;max-width:56ch;color:var(--ink-3);font-size:1.03rem}
.e404-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.9rem}
.e404-h{margin:3.4rem 0 1.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4)}
.e404-tiles{text-align:left}
/* ══ Adaptatif ═══════════════════════════════════════════════════════ */
@media (max-width:1180px){
/* [!] La liste des rayons RESTE : passer le mega-menu a une seule colonne
ferait disparaitre la colonne sur laquelle le panneau se cale, et le
panneau se poserait par-dessus les rayons. On retrecit la liste, et le
decalage du panneau suit — les deux valeurs vont toujours par paire. */
.mega-in{grid-template-columns:230px minmax(0,1fr)}
.mega-pane{left:calc(var(--wrap-pad) + 230px)}
.mega-side{display:none}
.ftr-cols{grid-template-columns:1.4fr 1fr 1fr;row-gap:2.4rem}
.ftr-brand{grid-column:1/-1;max-width:60ch}
}
@media (max-width:1024px){
/* [!] Le rail disparait ET la grille repasse a UNE colonne. Sans la seconde
ligne, le texte du heros tomberait dans la colonne de 284 px laissee
vacante par le rail masque : illisible, et invisible sur un grand ecran. */
.crail{display:none}
.hero-in{grid-template-columns:1fr}
.hero-txt{max-width:none}
/* La banniere n'a plus a tenir la hauteur du rail : elle se cale sur son
propre contenu. */
.herobanner{min-height:0;padding:clamp(1.4rem,1rem + 2vw,2.2rem)}
.usps-in{grid-template-columns:repeat(2,1fr)}
.ctiles,.whys{grid-template-columns:repeat(3,1fr)}
.steps{grid-template-columns:1fr;gap:.9rem}
.lockcard{grid-template-columns:1fr}
.lockcard-r{order:-1}
.revs{grid-template-columns:1fr}
.revs .rev:nth-child(n+3){display:none}
}
@media (max-width:860px){
/* Le voile devient VERTICAL : en dessous de cette largeur, le texte occupe
toute la colonne, donc un degrade horizontal le laisserait a moitie pose
sur la photo. Blanc presque plein en haut, la photo ne reste visible que
sous le bloc de texte. */
.hero-scrim{background:
linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 46%,rgba(255,255,255,.88) 72%,rgba(255,255,255,.72) 100%),
linear-gradient(180deg,rgba(109,74,255,.07) 0%,rgba(109,74,255,0) 55%)}
.hero-bg{object-position:74% 50%}
.herostats{grid-template-columns:repeat(2,1fr)}
.hstat{padding:.95rem 1rem 1rem}
.hstat:nth-child(odd){border-left:0}
.hstat:nth-child(n+3){border-top:1px solid var(--line)}
.announce-links li:nth-child(n+2){display:none}
.hdr-burger{display:grid}
.hdr-nav{display:none}
.search{order:3;flex-basis:100%;max-width:none;margin-bottom:.9rem}
/* Tout tient sur UNE ligne : hamburger, marque, monnaie, panier. Aux
espacements du bureau il manquait une quarantaine de pixels et le bloc
d'actions basculait seul sur une deuxieme ligne, moitie gauche vide. */
.hdr-main{flex-wrap:wrap;padding-top:.9rem;min-height:0;gap:.55rem}
.hdr-burger{width:38px;height:38px}
.brand-mark svg{width:30px;height:30px}
.coinsel-btn{padding:0 .4rem;gap:.28rem}
.hdr-wish{display:none}
.cartbtn-txt{display:none}
.cartbtn{padding-inline:.7rem;height:40px}
.ctiles,.whys{grid-template-columns:repeat(2,1fr)}
.faq{grid-template-columns:1fr}
.ftr-cols{grid-template-columns:1fr 1fr}
.shead{flex-direction:column;align-items:flex-start;gap:1.2rem}
.shead--deals .countdown{align-self:flex-start}
}
@media (max-width:560px){
.announce-links{display:none}
.usps-in{grid-template-columns:1fr;gap:1.1rem}
.ctiles{grid-template-columns:repeat(2,1fr);gap:.7rem}
/* Carte produit EN LIGNE sous 560 px : vignette a gauche, tout le reste a
droite. En pleine largeur, l'image carree faisait a elle seule la hauteur
de l'ecran et il fallait quatre gestes de defilement par article — on ne
compare plus rien. Ici quatre articles tiennent dans un ecran. */
.pgrid{grid-template-columns:1fr;gap:.6rem}
.pcard{flex-direction:row;align-items:stretch}
/* La vignette redevient CARREE ici : en ligne, c'est sa largeur qui est
contrainte, plus sa hauteur — le 4/3 ne ferait que la retrecir. */
.pcard-media{width:118px;flex:none;aspect-ratio:1;padding:.45rem;
border-right:1px solid var(--line-2)}
.pcard--wide .pcard-media,.pcard--tall .pcard-media{padding:.45rem}
.pcard-wish{display:none}
.pcard-body{border-top:0;padding:.6rem .7rem .65rem}
.pcard-specs li:nth-child(n+2){display:none}
/* [!] DANS UNE RANGEE, LA CARTE RESTE VERTICALE. La carte « en ligne »
ci-dessus est faite pour la GRILLE, ou l'on compare quatre articles
empiles sur un ecran. Dans une rangee horizontale elle donne une vignette
de 118 px collee a deux lignes de texte comprimees — et surtout elle fait
perdre le seul repere qui dit qu'il y a une suite : la carte suivante qui
depasse du bord. Rien ne se casse, tout s'affiche : c'est simplement la
mauvaise carte au mauvais endroit. */
/* Les deux micro-libelles de la carte remontent au-dessus du plancher de
lisibilite : la marque tombait a 10,6 px et les puces a 10,9 px. Un demi
pixel de plus ne change rien a la mise en page — les chaınes sont deja
bornees a vingt caracteres cote PHP — et beaucoup a ce qu'on arrive a
lire d'un telephone tenu a bout de bras. */
.pcard-brand{font-size:.7rem}
.pcard-specs li{font-size:.7rem}
/* La pastille de remise avec eux : c'est le seul chiffre de la carte qui
dise « c'est moins cher qu'avant », et il etait le plus petit. */
.pprice-off{font-size:.7rem}
.rail-track > .pcard{flex-direction:column}
.rail-track > .pcard .pcard-media{width:auto;aspect-ratio:4/3;border-right:0;padding:.5rem}
.rail-track > .pcard .pcard-body{border-top:1px solid var(--line-2);padding:.7rem .8rem .8rem}
.pprice-fiat{font-size:1.1rem}
.whys{grid-template-columns:1fr}
.ftr-cols{grid-template-columns:1fr}
.ftr-bottom{flex-direction:column;align-items:flex-start}
/* 🔴 QUATRE COLONNES SUR UN TELEPHONE. Le bandeau de chiffres gardait sa
grille de bureau : sur un ecran de 320 px, chaque case recevait 80 px, et
la seule facon d'y faire tenir « dispatch on stock lines » sur une ligne
etait de descendre le libelle a 10 px. Personne ne lit un libelle
capitale-espacee de 10 px sur un telephone tenu a bout de bras — et la
page ne signalait rien, puisque tout tenait.
Deux colonnes : chaque case double de largeur, le libelle remonte a une
taille lisible, et il tient toujours sur une ligne. */
.herostats{grid-template-columns:repeat(2,1fr)}
.hstat{padding:.9rem 1rem 1rem}
.hstat:nth-child(odd){border-left:0}
.hstat:nth-child(-n+2){border-bottom:1px solid var(--line)}
.hstat small{letter-spacing:.07em;font-size:.72rem}
/* Le surtitre : il se coupait au milieu de « on-chain » a taille de bureau.
Il est raccourci en ESPACEMENT, plus en taille — sous 11 px un texte tout
en capitales espacees demande un effort qu'un surtitre ne merite pas. Et
il a le droit de passer a la ligne : c'est un chapeau, pas un bouton. */
.tagline{font-size:.72rem;letter-spacing:.08em;gap:.5rem;flex-wrap:wrap}
.hero-coins-lbl{font-size:.72rem;letter-spacing:.1em}
.tagline::before{width:22px}
/* [!] Les HUIT pieces restent affichees. Une regle masquait les deux
dernieres sous 560 px — mais le bandeau de chiffres declare juste en
dessous « 8 assets settled on-chain ». Le visiteur en comptait six : la
page se contredisait elle-meme, et seule une lecture sur telephone
pouvait le montrer. */
}
/* ══ Confort et impression ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
.announce,.hdr,.drawer,.scrim,.hero-bg,.hero-scrim{display:none!important}
body{background:#fff}
}
/* Pastille de remplacement dans la recherche, pour les entrees sans vignette
(rayons et allees). Meme boite que l'image, pour que les lignes s'alignent. */
.sres-glyph{display:grid;place-items:center;width:42px;height:42px;flex:none;
border-radius:var(--r-xs);background:var(--v-50);color:var(--v-600);
font-weight:660;font-size:1rem}
/* Le compteur porte par chaque onglet de filtre. */
.tab{display:inline-flex;align-items:center;gap:.4rem}
.tab-n{font-family:var(--mono);font-size:.72rem;color:var(--ink-4)}
.tab.is-on .tab-n{color:rgba(255,255,255,.62)}
/* ══ Fiche produit ════════════════════════════════════════════════════
Trois colonnes : la galerie, l'identite, le bloc d'achat. L'acheteur a
trois questions dans cet ordre — est-ce le bon article, combien et quand,
et si ca se passe mal — et chaque colonne en tient une. Le bloc d'achat est
COLLANT : sur une fiche longue, le prix et le bouton ne doivent jamais
sortir de l'ecran. */
.crumb{border-bottom:1px solid var(--line-2);background:var(--paper)}
.crumb-in{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
padding-block:.7rem;font-size:.82rem;color:var(--ink-3)}
.crumb-in a{color:var(--ink-3);transition:color var(--dur)}
.crumb-in a:hover{color:var(--v-700)}
.crumb-in svg{color:var(--ink-4);flex:none}
.crumb-in span[aria-current]{color:var(--ink);font-weight:520;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch}
.pdp{padding-block:clamp(1.4rem,1rem + 1.4vw,2.2rem) clamp(2rem,1.4rem + 2vw,3rem)}
.pdp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 348px;
gap:clamp(1.4rem,2vw,2.4rem);align-items:start}
/* ── Galerie ───────────────────────────────────────────────────────── */
.pgal-main{position:relative;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-lg);padding:1.2rem;display:grid;place-items:center;
min-height:320px}
.pgal-main img{width:100%;max-height:min(58vh,520px);object-fit:contain}
.pgal-none{display:grid;justify-items:center;gap:.6rem;color:var(--ink-4);font-size:.85rem}
.pgal-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.pgal-thumb{display:block;width:72px;height:72px;padding:.3rem;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-xs);
transition:border-color var(--dur)}
.pgal-thumb img{width:100%;height:100%;object-fit:contain}
.pgal-thumb:hover{border-color:var(--v-200)}
.pgal-thumb.is-on{border-color:var(--v-600);box-shadow:inset 0 0 0 1px var(--v-600)}
/* ── Identite ──────────────────────────────────────────────────────── */
.pdp-brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-4)}
.pdp-title{font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);letter-spacing:-.028em;
line-height:1.22;margin-top:.3rem}
.pdp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:.7rem;
font-size:.82rem;color:var(--ink-3)}
.pdp-rate{display:inline-flex;align-items:center;gap:.4rem}
.pdp-rate b{color:var(--ink)}
.pdp-rate a{color:var(--v-700);text-decoration:underline;text-underline-offset:3px}
.pdp-sku{font-family:var(--mono);font-size:.76rem;color:var(--ink-4)}
.pdp-sku b{color:var(--ink-2);font-weight:560}
.pdp-lede{margin-top:.9rem;color:var(--ink-2);font-size:1rem;max-width:60ch}
.pdp-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.4rem;
margin-top:1.1rem}
.pdp-chips li{display:flex;flex-direction:column;gap:.1rem;padding:.5rem .65rem;
background:var(--canvas);border-radius:var(--r-xs)}
.pdp-chips b{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-4);font-weight:560}
.pdp-chips span{font-size:.86rem;color:var(--ink-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Declinaisons ──────────────────────────────────────────────────── */
.pdp-variant{margin-top:1.2rem}
.pdp-variant-h{font-size:.82rem;color:var(--ink-3);margin-bottom:.45rem}
.pdp-variant-h span{color:var(--ink);font-weight:560}
.vopts{display:flex;flex-wrap:wrap;gap:.4rem}
.vopt{display:inline-flex;align-items:center;padding:.4rem .7rem;border-radius:var(--r-xs);
font-size:.85rem;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
color:var(--ink-2);transition:box-shadow var(--dur),color var(--dur)}
a.vopt:hover{box-shadow:inset 0 0 0 1.5px var(--v-600);color:var(--v-700)}
.vopt.is-on{box-shadow:inset 0 0 0 1.5px var(--v-600);color:var(--v-700);font-weight:560;
background:var(--v-50)}
/* Une option que nous ne vendons pas est MONTREE mais barree, jamais cliquable :
la source liste les declinaisons de son propre catalogue, en faire des liens
fabriquerait des impasses par dizaines. */
.vopt.is-off{color:var(--ink-4);text-decoration:line-through;
text-decoration-color:var(--line);cursor:not-allowed}
.pdp-bullets{display:grid;gap:.4rem;margin-top:1.2rem}
.pdp-bullets li{display:flex;gap:.5rem;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.pdp-bullets svg{color:var(--green);flex:none;margin-top:.2rem}
.pdp-bullets--wide{margin-top:.8rem}
/* ── Bloc d'achat ──────────────────────────────────────────────────── */
.buybox{position:sticky;top:9.5rem;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-lg);padding:1.2rem 1.2rem 1.3rem;box-shadow:var(--sh-2)}
.buybox-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.bb-now{font-size:1.9rem;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bb-was{font-size:.95rem;font-variant-numeric:tabular-nums}
.bb-off{padding:.14rem .4rem;border-radius:var(--r-xs);background:var(--red-50);color:var(--red);
font-family:var(--mono);font-size:.75rem;font-weight:640}
.bb-coin{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.5rem .6rem;
border-radius:var(--r-xs);background:var(--canvas);font-family:var(--mono);font-size:.88rem}
.bb-coin b{font-weight:640}
.bb-coin small{margin-left:auto;font-family:var(--font);font-size:.72rem;color:var(--ink-4)}
.bb-stock{margin-top:.8rem}
.bb-buy{display:grid;grid-template-columns:auto 1fr;gap:.5rem;margin-top:.9rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm)}
.qty button{width:34px;height:44px;display:grid;place-items:center;color:var(--ink-3);
font-size:1.05rem;transition:background var(--dur),color var(--dur)}
.qty button:hover{background:var(--v-50);color:var(--v-700)}
.qty input{width:40px;height:44px;border:0;text-align:center;background:none;
font-family:var(--mono);font-weight:600;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:0}
.bb-lock{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.78rem;color:var(--ink-3)}
.bb-lock svg{color:var(--v-600);flex:none}
.bb-trust{display:grid;gap:.55rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.bb-trust li{display:flex;gap:.55rem;font-size:.82rem;color:var(--ink-3);line-height:1.45}
.bb-trust b{color:var(--ink-2);font-weight:560}
.bb-trust svg{color:var(--v-600);flex:none;margin-top:.1rem}
/* ── Description + caracteristiques ────────────────────────────────── */
.pdp-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:clamp(1.6rem,3vw,3.2rem);align-items:start}
.pdp-h2{font-size:1.15rem;letter-spacing:-.022em;margin-bottom:.9rem}
.pdp-h3{font-size:.98rem;margin:1.6rem 0 .2rem}
.pdp-prose p{color:var(--ink-2);margin-bottom:.8rem;max-width:68ch}
.spectable{width:100%;border-collapse:collapse;font-size:.87rem;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden}
.spectable tr:not(:last-child){border-bottom:1px solid var(--line-2)}
.spectable th{width:38%;text-align:left;font-weight:540;color:var(--ink-3);
padding:.55rem .8rem;vertical-align:top}
.spectable td{padding:.55rem .8rem;color:var(--ink);vertical-align:top}
.spectable tr:nth-child(even){background:var(--canvas)}
@media (max-width:1180px){
.pdp-in{grid-template-columns:minmax(0,1fr) 330px}
.pdp-gallery{grid-column:1}
.pdp-main{grid-column:1}
.buybox{grid-column:2;grid-row:1/3}
}
@media (max-width:860px){
.pdp-in{grid-template-columns:minmax(0,1fr)}
.buybox{position:static;grid-column:1;grid-row:auto}
.pdp-cols{grid-template-columns:1fr}
.pgal-thumb{width:60px;height:60px}
}
.vopts-note{margin-top:.4rem;font-size:.76rem;color:var(--ink-4)}
/* Description : une mise en forme IDENTIQUE que le texte ait ete reecrit ou
non. Le premier paragraphe repond a << qu'est-ce que c'est >>, les renvois
de bas de page passent en petits caracteres au lieu de hacher le discours. */
.pdp-prose{max-width:68ch}
.pdp-prose p{margin-bottom:.85rem;color:var(--ink-2);line-height:1.65}
.pdp-prose .pdp-lead{font-size:1.04rem;color:var(--ink);line-height:1.6}
.pdp-prose .pdp-fine{margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--line-2);
font-size:.78rem;color:var(--ink-4);line-height:1.5}
/* ── Pages de rubrique ─────────────────────────────────────────────────── */
.chead{border-bottom:1px solid var(--line);background:var(--paper)}
/* [!] `padding-block`, JAMAIS le raccourci `padding: 1.4rem 0 1.15rem`. Ces
blocs portent aussi la classe `.wrap`, qui pose le retrait lateral de la
page ; le raccourci le remet a zero et tout le contenu vient coller aux
bords de l'ecran — le compteur << 4 products from $1,049 >> etait meme
coupe net a droite. Rien ne casse, aucune erreur : la page est juste mal
posee, et seule une capture regardee pour de vrai le montre. */
.chead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
padding-block:1.4rem 1.15rem;flex-wrap:wrap}
.chead-h{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0}
.chead-sub{margin:.42rem 0 0;color:var(--ink-3);max-width:62ch;font-size:.95rem;line-height:1.5}
.chead-count{margin:0;color:var(--ink-3);font-size:.9rem;white-space:nowrap}
.chead-count b{color:var(--ink);font-variant-numeric:tabular-nums}
.chead-span{color:var(--ink-4);margin-left:.45rem}
/* Sous-rubriques : des liens texte, pas des vignettes. A ce niveau de l'arbre
il peut y en avoir quarante ; quarante images repousseraient les articles
hors de l'ecran, ce qui est exactement l'inverse du service rendu. */
.csubs{padding-block:1.15rem .2rem}
.csubs-h{font-size:.83rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
margin:0 0 .7rem;font-weight:600}
.csubs-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.csubs-list a{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .72rem;
border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
font-size:.88rem;color:var(--ink-2);text-decoration:none;
transition:border-color var(--dur),color var(--dur),background var(--dur)}
.csubs-list a:hover{border-color:var(--v-200);color:var(--v-700);background:var(--v-50)}
/* Une rubrique encore vide reste cliquable mais s'annonce comme telle : la
masquer mentirait sur l'etendue du catalogue, la presenter comme les autres
ferait perdre un clic a chaque fois. */
.csubs-list a.is-bare{color:var(--ink-4);border-style:dashed}
.csubs-list a.is-bare:hover{color:var(--ink-2)}
.csubs-c{font-size:.74rem;color:var(--ink-4);font-variant-numeric:tabular-nums;
background:var(--canvas);border-radius:var(--r-xs);padding:.05rem .3rem}
.csubs-list--alt{margin-top:.6rem}
.clist{display:grid;grid-template-columns:250px minmax(0,1fr);gap:2rem;
padding-block:1.35rem 3rem;align-items:start}
.cfil-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.cfil-sum{display:flex;align-items:center;gap:.5rem;padding:.75rem .9rem;cursor:pointer;
font-weight:600;font-size:.92rem;list-style:none}
.cfil-sum::-webkit-details-marker{display:none}
.cfil-sum svg{color:var(--ink-3)}
.cfil-on{width:7px;height:7px;border-radius:var(--r-pill);background:var(--v-600);margin-left:auto}
.cfil-body{padding:0 .9rem .95rem}
.cfil-clear{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--v-700);
text-decoration:none;margin-bottom:.85rem}
.cfil-clear:hover{text-decoration:underline}
.cfil-grp + .cfil-grp{margin-top:1.05rem;padding-top:1.05rem;border-top:1px solid var(--line-2)}
.cfil-h{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
margin:0 0 .5rem;font-weight:600}
.cfil-opt{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;font-size:.89rem;
color:var(--ink-2);text-decoration:none;line-height:1.3}
.cfil-opt:hover{color:var(--v-700)}
.cfil-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--line);border-radius:var(--r-xs);
display:grid;place-items:center;background:var(--paper);transition:all var(--dur)}
.cfil-box svg{opacity:0;color:#fff;stroke-width:3}
.cfil-opt.is-on .cfil-box{background:var(--v-600);border-color:var(--v-600)}
.cfil-opt.is-on .cfil-box svg{opacity:1}
.cfil-opt.is-on{color:var(--ink);font-weight:500}
.cfil-n{margin-left:auto;font-size:.76rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
/* Le champ de recherche EN PLEINE LARGEUR de la page de resultats. Il
reutilise `.cfil-price` (la barre de prix des filtres) plutot que d'inventer
un gabarit : deux barres de formulaire cote a cote sur le meme site doivent
se ressembler, et une classe de plus est une classe de plus a tenir. */
.cfil-price--wide{margin-block:1.35rem 0}
.cfil-in--wide{flex:1;min-width:0;text-align:left;padding-inline:.75rem}
.cfil-price{display:flex;align-items:center;gap:.4rem}
.cfil-in{min-width:0;width:100%;border:1px solid var(--line);border-radius:var(--r);
padding:.42rem .5rem;font:inherit;font-size:.86rem;font-variant-numeric:tabular-nums;
background:var(--paper);color:var(--ink)}
.cfil-in:focus{border-color:var(--v-500);outline:none}
.cfil-dash{color:var(--ink-4);font-size:.8rem}
.cfil-go{border:1px solid var(--line);background:var(--canvas);border-radius:var(--r);
padding:.42rem .6rem;font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.cfil-go:hover{background:var(--v-50);border-color:var(--v-200);color:var(--v-700)}
.ctool{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding-bottom:.9rem;margin-bottom:1.05rem;border-bottom:1px solid var(--line)}
.ctool-n{margin:0;font-size:.88rem;color:var(--ink-3)}
.ctool-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.ctool-pg{color:var(--ink-4)}
.csort{position:relative}
.csort-sum{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.88rem;
color:var(--ink-2);padding:.4rem .65rem;border:1px solid var(--line);
border-radius:var(--r);background:var(--paper);list-style:none;white-space:nowrap}
.csort-sum::-webkit-details-marker{display:none}
.csort-sum b{color:var(--ink);font-weight:600}
.csort[open] .csort-sum{border-color:var(--v-200);background:var(--v-50)}
.csort-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:20;min-width:186px;
list-style:none;margin:0;padding:.3rem;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.csort-menu a{display:block;padding:.44rem .6rem;border-radius:var(--r);font-size:.88rem;
color:var(--ink-2);text-decoration:none}
.csort-menu a:hover{background:var(--canvas);color:var(--ink)}
.csort-menu a.is-on{background:var(--v-50);color:var(--v-700);font-weight:600}
.cpage{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:2rem;flex-wrap:wrap}
.cpage-a{min-width:36px;height:36px;padding:0 .6rem;display:inline-flex;align-items:center;
justify-content:center;border:1px solid var(--line);border-radius:var(--r);
font-size:.88rem;color:var(--ink-2);text-decoration:none;background:var(--paper);
font-variant-numeric:tabular-nums}
.cpage-a:hover{border-color:var(--v-200);color:var(--v-700);background:var(--v-50)}
.cpage-a.is-on{background:var(--v-600);border-color:var(--v-600);color:#fff;font-weight:600}
.cpage-gap{color:var(--ink-4);padding:0 .15rem}
.cempty,.csoon-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.cempty{padding:2.6rem 1.5rem;text-align:center}
.cempty-h{margin:0;font-size:1.05rem;font-weight:600}
.cempty-p{margin:.4rem 0 1.1rem;color:var(--ink-3);font-size:.92rem}
.csoon{padding-block:1.35rem 3rem}
.csoon-card{display:flex;align-items:flex-start;gap:.95rem;padding:1.15rem 1.3rem}
.csoon-ico{flex:0 0 42px;width:42px;height:42px;border-radius:var(--r);display:grid;
place-items:center;background:var(--v-50);color:var(--v-600)}
.csoon-h{margin:0;font-size:1.02rem;font-weight:600}
.csoon-p{margin:.3rem 0 0;color:var(--ink-3);font-size:.92rem;line-height:1.55}
.csoon-sub{font-size:.83rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
margin:1.9rem 0 .75rem;font-weight:600}
@media (max-width:1024px){
.clist{grid-template-columns:1fr;gap:1.1rem}
.cfil-body{padding-bottom:.8rem}
}
@media (max-width:560px){
.chead-in{align-items:flex-start;padding-block:1.1rem .95rem}
.ctool{flex-wrap:wrap;gap:.6rem}
.csoon-card{flex-direction:column;gap:.7rem}
}
/* ══ Espace client ═══════════════════════════════════════════════════════
Deux mises en page. Les pages OUVERTES (connexion, inscription) posent une
carte centree : a ce moment-la le visiteur a une seule chose a faire.
Les pages INTERNES ont une colonne de navigation permanente — repliee
derriere un bouton, elle cacherait la moitie de l'espace derriere un clic. */
.authpage{padding-block:clamp(1.6rem,1rem + 2.4vw,3.4rem) clamp(2.4rem,2rem + 3vw,4.6rem)}
.authwrap{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
gap:clamp(1.6rem,4vw,4rem);align-items:start;justify-content:center}
/* Une carte seule est CENTREE, pas collee a gauche : sans cette variante, la
page de connexion laissait un vide de 600 px a droite. */
.authwrap--solo{grid-template-columns:minmax(0,440px);justify-content:center}
.authcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);box-shadow:var(--sh-2)}
.authcard-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);
font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--v-600);
margin-bottom:.6rem}
.authcard-h{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);letter-spacing:-.03em;line-height:1.18;margin:0}
.authcard-sub{margin:.55rem 0 1.4rem;color:var(--ink-3);font-size:.94rem;line-height:1.55}
.authcard-alt{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
font-size:.9rem;color:var(--ink-3);text-align:center}
.authcard-alt a{color:var(--v-700);font-weight:560}
.authcard-alt a:hover{text-decoration:underline}
.authform{display:grid;gap:1rem}
.authform-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.authform-link{font-size:.86rem;color:var(--v-700)}
.authform-link:hover{text-decoration:underline}
/* [!] `display:flex` sur un paragraphe fait de CHAQUE nœud un element flex :
les deux liens et les morceaux de phrase entre eux devenaient six blocs
alignes cote a cote, et la mention se lisait « … agree to the | terms of
sale | and | privacy policy | . ». Le texte est donc enveloppe dans un
, et le conteneur n'a plus que deux enfants. */
.authform-fine{display:flex;gap:.45rem;align-items:flex-start;font-size:.79rem;color:var(--ink-4);
line-height:1.5;margin-top:.2rem}
.authform-fine > span{flex:1;min-width:0}
.authform-fine svg{flex:none;margin-top:.15rem;color:var(--ink-4)}
.authform-fine a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.authnote{display:flex;gap:.5rem;align-items:flex-start;margin-top:1.2rem;padding:.85rem 1rem;
border-radius:var(--r);background:var(--v-50);color:var(--ink-2);font-size:.86rem;
line-height:1.5}
.authnote svg{flex:none;margin-top:.1rem;color:var(--v-600)}
.authnote--flat{background:var(--canvas);margin-bottom:1.2rem}
/* La colonne de droite de l'inscription : elle repond a la seule question que
pose la page — pourquoi ouvrir un compte sur un site qui n'en exige pas. */
.authside{padding-top:.6rem}
.authside-h{font-size:.83rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
font-weight:600;margin:0 0 1rem}
.authside-list{display:grid;gap:1.05rem;list-style:none;margin:0;padding:0}
.authside-list li{display:flex;gap:.8rem;align-items:flex-start}
.authside-list svg{flex:none;color:var(--v-600);margin-top:.15rem}
.authside-list b{display:block;font-size:.95rem;font-weight:580;letter-spacing:-.012em}
.authside-list span{display:block;margin-top:.2rem;color:var(--ink-3);font-size:.88rem;line-height:1.5}
.authside-fine{display:flex;gap:.45rem;align-items:flex-start;margin-top:1.4rem;padding-top:1.1rem;
border-top:1px solid var(--line-2);font-size:.84rem;color:var(--ink-3)}
.authside-fine svg{flex:none;margin-top:.1rem;color:var(--amber)}
/* ── Champs ─────────────────────────────────────────────────────────────── */
.fld{display:grid;gap:.35rem}
.fld-l{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
font-size:.86rem;font-weight:560;color:var(--ink)}
.fld-opt{font-size:.74rem;font-weight:400;color:var(--ink-4)}
.fld-in{width:100%;min-width:0;font:inherit;font-size:.95rem;color:var(--ink);
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:.68rem .8rem;transition:border-color var(--dur),box-shadow var(--dur)}
.fld-in::placeholder{color:var(--ink-4)}
.fld-in:hover{border-color:var(--ink-4)}
.fld-in:focus{outline:0;border-color:var(--v-500);box-shadow:0 0 0 3px rgba(109,74,255,.14)}
.fld-in.is-bad{border-color:var(--red)}
.fld-in.is-bad:focus{box-shadow:0 0 0 3px rgba(224,36,36,.13)}
select.fld-in{appearance:none;-webkit-appearance:none;padding-right:2.2rem;
/* La fleche est une image de fond : un pseudo-element sur un