/* ════════════════════════════════════════════════════════════════════════════ PANDA — feuille unique, écrite dans la GRAMMAIRE D'ORBITE. Réécrite le 08.09.2026. Ce qu'il y avait avant (vert bouteille, cartes à coins ronds de 14 px, ombres portées, blob radial flouté derrière le titre, pastille à point vert, hover en translateY(-2px)) était le gabarit standard d'une page générée : joli, immédiatement reconnaissable, et sans aucun lien avec ce dépôt. Phil, 08.09 : « too much ai style, too much classic, too much dark ». Les trois griefs se soignent au même endroit — la grammaire. CE QUI EST REPRIS D'ORBITE (/Users/phil/Desktop/ORBITE/orbite.css) : 1. L'ÉCHELLE N (= L* ÷ 10, cf. TYPOLOGIE.md). Aucune couleur choisie à l'œil. Jour : fond N9,5 · surface N9,8 · encre N1,8 · encre forte N1,4 · encre faible N6 · trait #e0e0e0. Nuit : fond N1,5 · surface N2 · encre N8,2 · encre forte N8,5. Ni noir absolu ni blanc absolu. 2. DEUX THÈMES, DEUX PHYSIQUES. De nuit c'est la LUMIÈRE qui porte l'information (lueur, halo) ; de jour il n'y a pas de lumière à émettre sur du papier, donc c'est la DENSITÉ D'ENCRE et l'ÉPAISSEUR. Le clair n'est PAS l'inversion du sombre : `--ep-vide`/`--ep-plein` changent de valeur, `--lueur` passe à `none`. 3. LE POIDS DU MOUVEMENT. Courbes qui finissent lentement, durées longues (320/560/880 ms). Jamais de linéaire, jamais de rebond, jamais de `translateY(-2px)` au survol. 4. LA TYPOGRAPHIE D'INSTRUMENT. Tout le chrome (nav, filtres, boutons, étiquettes, prix, cotes) est en MONO capitale, interlettrage large. La prose reste en sans. C'est la signature visuelle d'ORBITE : une page qui se lit comme un relevé, pas comme une brochure. 5. LA GÉOMÉTRIE DU RELEVÉ. Filets d'1 px, angles droits, rayon 2 px maximum, ZÉRO ombre portée, zéro dégradé de remplissage. Les cellules sont séparées par des filets, pas par des cartes qui flottent. 6. LA NAPPE (nappe.js, copié tel quel). Un fond plat est mort ; la matière vient de la variance basse fréquence. Réglée à n2:3.9 côté nuit — le plafond mesuré au-delà duquel l'encre N8,5 tombe sous 4,5:1 quand du texte pose DIRECTEMENT sur le fond, ce qui est le cas ici. CE QUI VIENT DE LA MARQUE, ET DE NULLE PART AILLEURS : le jaune, le bleu et le rouge sont relevés sur le packshot officiel (savon-de-marseille-1.jpg) : lettrage PANDA jaune cerné de bleu, fanion « FAMILY PACK » rouge. Ils ne servent QU'À la marque et au comptage des doses. La couleur d'ambiance d'une fiche, elle, est celle du bidon lui-même (`--c`, champ `color` de la base) : dix produits, dix teintes, jamais un accent unique plaqué sur toute la boutique. ════════════════════════════════════════════════════════════════════════════ */ :root{ /* le poids — repris mot pour mot d'orbite.css */ --lourd:cubic-bezier(.22,.61,.16,1); --tres-lourd:cubic-bezier(.16,.84,.12,1); --court:320ms; --moyen:560ms; --long:880ms; --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; /* ── LES TROIS COULEURS DE LA MARQUE, RELEVÉES SUR LE PACKSHOT ────────── Échantillonnées à l'image le 08.09.2026 (quantification médiane sur la zone du lettrage de savon-de-marseille-1.jpg, fond blanc écarté), pas choisies : la teinte ET le niveau viennent du bidon. or du lettrage PANDA #f2c318 h 44° N8,07 bleu du cerne #273b48 h204° N2,38 (l'aplat vaut ~h215) rouge du fanion #ba2c2c h 0° N4,19 crème de l'étiquette #e2d7ba h 44° N8,62 C'est cette dernière qui donne le PAPIER : la page est l'étiquette du bidon, pas une feuille blanche neutre. */ --or:#f2c318; /* aplat — le jaune du lettrage, tel quel */ --or-encre:#906116; /* le même or ramené à N4,5 pour tenir 4,7:1 en TEXTE sur le papier crème. Un aplat et un texte ne peuvent pas être la même valeur. */ --rouge:#ba2c2c; --bleu:#1a2338; --max:1240px; --gouttiere:26px; --r:2px; /* le rayon maximal de toute la page */ } /* ── JOUR : l'encre porte l'information ───────────────────────────────── Les niveaux sont ceux d'ORBITE, à la décimale près. Seules la TEINTE et la chroma changent — `niveauVersHexa(n,{h,c})` de nappe.js tient le L* par bissection pendant qu'on tire vers le crème ou vers le bleu, sinon teinter fait dériver la clarté et deux « N9,5 » ne se ressemblent plus. Contrastes mesurés sur ce papier : encre 12,3:1 · encre forte 13,8:1 · encre faible 4,6:1 (AA) · or-encre 4,7:1 (AA). */ [data-theme="jour"]{ --fond:#f6f0e6; /* N9,5 h44 — le crème de l'étiquette */ --fond2:#fdf9f3; /* N9,8 h44 */ --encre:#222c41; /* N1,8 h215 — le bleu du cerne */ --encre-fort:#1a2338; /* N1,4 h215 */ /* N4,6 et non N6 : sur ce papier crème, le N6 d'ORBITE ne tient que 2,8:1 — sous AA. Presque tout le chrome (cotes, formats, doses) est en encre faible, il ne peut pas échouer. */ --encre-faible:#726c62; /* N4,6 h44 → 4,59:1 */ --trait:#e1d9cc; /* N8,7 h44 */ --trait-fort:#beb5a6; /* N7,4 h44 */ --accent:#1a2338; /* de jour, l'accent EST l'encre */ --ep-vide:1px; --ep-plein:3px; --lueur:none; --lueur-forte:none; --voile:rgba(26,35,56,.36); --nappe-n1:8; --nappe-n2:7.2; --nappe-teinte:44; --nappe-chroma:.18; --nappe-couv:.65; --creux:rgba(26,35,56,.045); --plaque:#faf6ee; /* la plaque photo, à peine plus claire que le papier — voir §PLAQUE plus bas */ } /* ── NUIT : la lumière porte l'information ────────────────────────────── Le fond n'est plus un gris : c'est le BLEU de la marque descendu à N1,5, et l'encre est le crème de l'étiquette remonté à N8,2. L'accent est l'or du lettrage — il émet, ce qu'un bleu foncé ne sait pas faire. Contrastes : encre 9,4:1 · encre forte 10,3:1 · faible 4,8:1 · or 9,1:1. */ [data-theme="nuit"]{ --fond:#1e2637; /* N1,5 h215 */ --fond2:#283043; /* N2,0 h215 */ --encre:#d4cbbc; /* N8,2 h44 */ --encre-fort:#dfd3c0; /* N8,5 h44 — le plafond */ --encre-faible:#989083; /* N6,0 h44 → 4,79:1 */ /* les filets prennent la teinte de l'accent, comme dans orbite.css */ --trait:rgba(242,195,24,.22); --trait-fort:rgba(242,195,24,.44); --accent:#f2c318; --or-encre:#f2c318; /* de nuit l'or est déjà lisible en texte */ --ep-vide:1px; --ep-plein:1px; --lueur:drop-shadow(0 0 6px rgba(242,195,24,.75)); --lueur-forte:drop-shadow(0 0 14px rgba(242,195,24,.95)); --voile:rgba(6,10,18,.72); --nappe-n1:3; --nappe-n2:3.9; --nappe-teinte:215; --nappe-chroma:.5; --nappe-couv:.65; --creux:rgba(242,195,24,.07); --plaque:#f0eae0; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--fond)} body{margin:0;background:transparent;color:var(--encre); font:15.5px/1.62 var(--sans);letter-spacing:-.004em;overflow-x:hidden; transition:background var(--moyen) var(--lourd),color var(--moyen) var(--lourd)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3{margin:0;line-height:1.06;letter-spacing:-.028em;font-weight:400} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)} .muted{color:var(--encre-faible)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* la nappe est posée par shop.js ; elle vit sous tout le reste */ #nappe{position:fixed;inset:0;z-index:0;pointer-events:none} main,header.top,footer.bot,.ticker{position:relative;z-index:1} /* ── LE COTE — l'unité typographique d'ORBITE ──────────────────────────── Une étiquette de relevé : mono, capitale, interlettrage large, petit corps. Tout le chrome de la boutique en hérite. C'est ce qui remplace les pastilles arrondies et les puces colorées de la version précédente. */ .cote,.kicker,.ligne-tag,.chip,.btn,nav.main a,.proof b,.fmt,.dose,.badge, .sec-head .filters,.field label,.specs th,.tech,footer.bot strong,.qty, .progress,.demo-flag,.note-source{ font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em; font-size:11px;font-weight:400;font-variant-numeric:tabular-nums} /* ── ENTÊTE ────────────────────────────────────────────────────────────── Une bande d'instrument : filet en bas, rien d'autre. Pas de flou de fond, pas d'ombre, pas de coin arrondi. */ header.top{position:sticky;top:0;z-index:60;background:var(--fond); border-bottom:1px solid var(--trait)} .top .wrap{display:flex;align-items:center;gap:30px;height:56px} /* le logo : le lettrage de la marque, cerné comme sur le bidon */ .logo{display:flex;align-items:baseline;gap:10px;font-family:var(--mono); font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--encre-fort)} .logo .mark{width:15px;height:15px;position:relative;flex:0 0 auto;align-self:center; border:1.5px solid currentColor;border-radius:50%; transition:transform var(--long) var(--tres-lourd)} .logo .mark::before,.logo .mark::after{content:"";position:absolute;width:4px;height:4px; border-radius:50%;background:currentColor;top:2.5px} .logo .mark::before{left:1.5px}.logo .mark::after{right:1.5px} /* le geste dit « le panda tourne la tête » — une seule fois, lentement */ .logo:hover .mark{transform:rotate(-22deg)} nav.main{display:flex;gap:26px;margin-left:auto;align-items:center} nav.main a{position:relative;padding:19px 0;color:var(--encre-faible); transition:color var(--court) var(--lourd)} /* le soulignement ne glisse pas, il ÉPAISSIT : c'est la règle du thème clair (l'information est portée par l'épaisseur), et de nuit il s'allume en plus */ nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:14px; height:var(--ep-vide);background:var(--trait); transition:height var(--court) var(--lourd),background var(--court) var(--lourd), filter var(--court) var(--lourd)} nav.main a:hover,nav.main a[aria-current]{color:var(--encre-fort)} nav.main a:hover::after,nav.main a[aria-current]::after{ height:var(--ep-plein);background:var(--accent);filter:var(--lueur)} .tools{display:flex;align-items:center;gap:0;margin-left:4px} .icon-btn{width:40px;height:40px;border:1px solid var(--trait);background:transparent; border-radius:var(--r);display:grid;place-items:center;cursor:pointer; font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--encre-faible); margin-left:-1px; /* les cellules se PARTAGENT leur filet, comme un tableau */ transition:color var(--court) var(--lourd),background var(--court) var(--lourd), border-color var(--court) var(--lourd)} .icon-btn:hover{color:var(--encre-fort);background:var(--creux);border-color:var(--trait-fort);z-index:1} .cart-btn{position:relative;padding:0 14px;width:auto;gap:9px} .cart-btn .n{min-width:18px;height:18px;padding:0 4px;border-radius:var(--r); background:var(--rouge);color:#fff;font-size:10px;letter-spacing:.06em; display:grid;place-items:center;font-variant-numeric:tabular-nums} .cart-btn .n:empty,.cart-btn .n[data-n="0"]{background:transparent;color:var(--encre-faible); border:1px solid var(--trait)} .cart-btn .n:empty::after{content:"0"} .cart-btn.bump .n{animation:bump var(--moyen) var(--tres-lourd)} @keyframes bump{40%{transform:scale(1.3)}100%{transform:scale(1)}} /* ── BANDEAU ───────────────────────────────────────────────────────────── Il était en noir plein sur fond noir. Il devient un filet de relevé : même corps que les cotes, encre faible, une seule règle en dessous. */ .ticker{border-bottom:1px solid var(--trait);color:var(--encre-faible); font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; padding:7px 0;overflow:hidden;white-space:nowrap;background:var(--fond2)} .ticker span{display:inline-block;padding-right:60px;animation:slide 46s linear infinite} @keyframes slide{to{transform:translateX(-50%)}} /* ── HÉROS ─────────────────────────────────────────────────────────────── Plus de blob radial flouté. La composition tient sur une seule chose : une colonne de cotes à gauche (le relevé) et le titre à droite. */ .hero{padding:0;border-bottom:1px solid var(--trait)} .hero .wrap{display:grid;grid-template-columns:170px 1fr;gap:0;align-items:stretch} .hero .marge{border-right:1px solid var(--trait);padding:52px 22px 44px 0; display:flex;flex-direction:column;gap:14px} .hero .corps{padding:52px 0 44px 34px} .hero h1{font-size:clamp(40px,6.6vw,78px);max-width:15ch;font-weight:300; letter-spacing:-.038em;color:var(--encre-fort)} .hero h1 em{font-style:normal;font-weight:500} .hero p.lead{font-size:clamp(15px,1.5vw,17.5px);max-width:56ch;color:var(--encre-faible); margin:26px 0 32px;letter-spacing:0} .hero p.lead b{color:var(--encre);font-weight:500} /* la pastille verte à point est morte : une cote se pose sur un filet */ .kicker{display:block;color:var(--encre-faible);padding-bottom:9px; border-bottom:var(--ep-vide) solid var(--trait)} .cta-row{display:flex;flex-wrap:wrap;gap:0} /* ── BOUTONS ───────────────────────────────────────────────────────────── Rectangles à filet partagé. Le primaire est un aplat d'encre (jour) ou d'accent lumineux (nuit) — jamais un dégradé, jamais une ombre colorée. Au survol rien ne se soulève : le filet ÉPAISSIT. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:var(--r);border:1px solid var(--trait-fort); background:transparent;color:var(--encre-fort);cursor:pointer;margin-left:-1px; position:relative;overflow:hidden; transition:color var(--court) var(--lourd),background var(--court) var(--lourd), border-color var(--court) var(--lourd),box-shadow var(--court) var(--lourd)} .btn:first-child{margin-left:0} /* le remplissage arrive par la GAUCHE : le geste a une direction, il ne « change pas de couleur ». Sur .primary il part déjà rempli. */ .btn::before{content:"";position:absolute;inset:0;background:var(--encre-fort); transform:scaleX(0);transform-origin:left;z-index:-1; transition:transform var(--moyen) var(--tres-lourd)} .btn:hover{border-color:var(--encre-fort);box-shadow:inset 0 0 0 1px var(--encre-fort)} /* LE BOUTON EST LE LOGO. Sur le bidon, PANDA s'écrit en lettres OR cernées de BLEU. De jour on reprend ça tel quel : aplat bleu, texte or (9,4:1). De nuit on l'inverse — l'or passe en aplat et devient la source de lumière, le bleu redevient le texte. Même paire, deux physiques ; c'est la règle d'ORBITE appliquée à la marque au lieu d'un accent choisi au hasard. */ .btn.primary{background:var(--encre-fort);color:var(--or);border-color:var(--encre-fort)} [data-theme="nuit"] .btn.primary{background:var(--or);color:var(--bleu);border-color:var(--or); box-shadow:0 0 18px -6px var(--or)} .btn.primary:hover{background:var(--encre);box-shadow:inset 0 0 0 1px var(--or)} [data-theme="nuit"] .btn.primary:hover{box-shadow:0 0 30px -6px var(--or)} .btn.ghost{color:var(--encre-faible)} .btn.ghost:hover{color:var(--encre-fort)} .btn.wide{width:100%;margin-left:0} .btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none!important} .btn:disabled:hover{border-color:var(--trait-fort)} /* ── PREUVE GMS ────────────────────────────────────────────────────────── Un tableau d'enseignes, filets partagés. Elles ne sont plus « en gras opacité .62 » : elles sont des cellules d'un relevé. */ .proof{border-bottom:1px solid var(--trait);background:var(--fond2)} .proof .wrap{display:grid;grid-template-columns:170px repeat(4,1fr);align-items:stretch} .proof b{display:flex;align-items:center;color:var(--encre-faible);font-weight:400; border-right:1px solid var(--trait);padding:16px 22px 16px 0} .proof .shop{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--encre-faible);padding:16px 0 16px 22px; border-right:1px solid var(--trait);display:flex;align-items:center; transition:color var(--court) var(--lourd),background var(--court) var(--lourd)} .proof .shop:last-child{border-right:0} .proof .shop:hover{color:var(--encre-fort);background:var(--creux)} /* ── SECTIONS ──────────────────────────────────────────────────────────── L'INDEX LETTRÉ d'ORBITE : chaque section porte sa lettre dans la marge. C'est ce qui fait qu'une page se lit comme un catalogue d'archive et non comme une suite de blocs marketing. */ section{border-bottom:1px solid var(--trait)} .sec-head{display:grid;grid-template-columns:170px 1fr;gap:0;align-items:start; padding:0;border-bottom:1px solid var(--trait);margin:0 calc(var(--gouttiere)*-1); padding-left:var(--gouttiere);padding-right:var(--gouttiere)} .sec-head::before{content:attr(data-lettre);font-family:var(--mono);font-size:11px; letter-spacing:.14em;color:var(--encre-faible);padding:44px 22px 40px 0; border-right:1px solid var(--trait);align-self:stretch} .sec-head>div:first-of-type{padding:40px 0 36px 34px;grid-column:2} .sec-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.03em; color:var(--encre-fort)} .sec-head p{max-width:60ch;color:var(--encre-faible);margin:14px 0 0;font-size:14.5px} .sec-head .filters{grid-column:2;padding:0 0 26px 34px;display:flex;flex-wrap:wrap;gap:0} /* les filtres : des onglets de classeur, filets partagés, aucun arrondi */ .chip{padding:9px 16px;border:1px solid var(--trait);border-radius:var(--r); background:transparent;color:var(--encre-faible);cursor:pointer;margin-left:-1px; transition:color var(--court) var(--lourd),background var(--court) var(--lourd), border-color var(--court) var(--lourd)} .chip:first-child{margin-left:0} .chip:hover{color:var(--encre-fort);background:var(--creux);z-index:1;position:relative} .chip[aria-pressed="true"]{color:var(--or);background:var(--encre-fort); border-color:var(--encre-fort);z-index:2;position:relative} [data-theme="nuit"] .chip[aria-pressed="true"]{background:var(--or);color:var(--bleu); border-color:var(--or);box-shadow:0 0 14px -5px var(--or)} /* ── LA GRILLE — un relevé, pas des cartes qui flottent ────────────────── Les fiches ne sont plus des rectangles ombrés espacés de 24 px : elles partagent leurs filets, comme les cases d'un tableau d'inventaire. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:0;margin:0 calc(var(--gouttiere)*-1); border-top:1px solid var(--trait)} .grid>*{border-right:1px solid var(--trait);border-bottom:1px solid var(--trait); margin-top:-1px} .empty{grid-column:1/-1;padding:70px 0;text-align:center;color:var(--encre-faible); font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .card{position:relative;background:transparent;display:flex;flex-direction:column; --c:var(--encre-faible); animation:entree var(--long) var(--tres-lourd) both; transition:background var(--court) var(--lourd)} .card:hover{background:var(--creux)} @keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* Une .card DANS la grille n'a pas de cadre : elle partage les filets de ses voisines. Une .card isolée (encadré de l'espace pro, bloc « pourquoi c'est moins cher ») en a un — sinon elle flotte sans contour dans la page. */ :not(.grid)>.card{border:1px solid var(--trait);border-radius:var(--r);animation:none} :not(.grid)>.card:hover{background:transparent} /* la cote produit : numéro d'ordre + SKU réel, dans le coin, en mono. C'est de la donnée relevée (fiche Stokomani), pas de la décoration. */ .card .cote-produit{position:absolute;top:12px;left:14px;z-index:3; font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--encre-faible); text-transform:uppercase} .badge{position:absolute;top:12px;right:14px;z-index:3;padding:4px 8px;border-radius:var(--r); background:var(--rouge);color:#fff;letter-spacing:.1em} .badge.rupture{background:transparent;color:var(--encre-faible);border:1px solid var(--trait-fort)} /* ── §PLAQUE — le fond sur lequel le bidon est posé ────────────────────── HISTORIQUE, parce qu'il explique la forme actuelle. Les packshots du fabricant sont détourés sur du BLANC PUR. Poser ce blanc sur la page donnait un grand rectangle froid au milieu de chaque carte. On l'a d'abord escamoté en `mix-blend-mode:multiply` : multiplier par du blanc ne change rien, donc le fond du packshot disparaissait et laissait voir la plaque. Ça a tenu trois jours. Un blend n'agit que DANS son groupe de composition, et presque tout en crée un nouveau : `transform-style:preserve-3d` du retournement, le `transform` du lot, puis `overflow:hidden` + `border-radius` des cartes rondes — qui ont vidé la grille entière d'un coup (plaque colorée, plus de bidon, aucune erreur console). On a rendu la plaque à chaque groupe, isolé, forcé des repeintures : chaque rustine tenait jusqu'au décor suivant. Le blend est donc parti. `outils/detourer-packshots.py` retire le fond blanc À LA SOURCE et écrit des WebP à canal alpha. La plaque est redevenue une simple couleur de fond, la photo une simple image : plus aucune condition de composition, et la teinte peut enfin être FRANCHE au lieu d'être limitée par ce que le `multiply` supportait sans noircir le bidon. */ .visual{display:block;position:relative;aspect-ratio:1/1;overflow:hidden; background:var(--plaque);border-bottom:1px solid var(--trait)} /* même blanc de nuit : #eceded laissait voir le rectangle du packshot dans la plaque (deux blancs voisins = une couture). La plaque EST la table lumineuse sur laquelle la photo a été prise ; c'est le filet qui la pose dans la page. */ [data-theme="nuit"] .visual{border:1px solid var(--trait)} .visual .halo{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 46%,color-mix(in srgb,var(--c) 16%,transparent)); opacity:0;transition:opacity var(--moyen) var(--lourd)} .card:hover .halo{opacity:1} .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%; transition:transform var(--long) var(--tres-lourd)} .card:hover .shot{transform:scale(1.045)} .bidon{position:absolute;inset:0;width:100%;height:100%;padding:12%} /* le retournement : deux faces, la seconde est le DOS du bidon (mentions, dosage, pictos). Le geste apprend quelque chose, il ne décore pas. */ .tourne{position:absolute;inset:0;transform-style:preserve-3d; transition:transform var(--long) var(--tres-lourd)} .card:hover .tourne,.galerie:hover .tourne{transform:rotateY(180deg)} /* plus de fond sur les faces ni sur les bidons du lot : elles n’avaient à en porter un que pour redonner un backdrop au `multiply`. Sans blend, un fond ici ne ferait que couper la plaque de la carte en rectangles. */ .tourne .face{position:absolute;inset:0;backface-visibility:hidden;background:transparent} .tourne .face.ar{transform:rotateY(180deg)} /* le lot s'écarte : on COMPTE les bidons */ .lot{position:absolute;inset:0;display:grid;place-items:center} .lot span{position:absolute;width:62%;height:82%;background:transparent;transition:transform var(--long) var(--tres-lourd); transform:translateX(calc((var(--i) - (var(--n) - 1)/2) * 6px)) rotate(calc((var(--i) - (var(--n) - 1)/2) * 2deg))} .card:hover .lot span,.galerie:hover .lot span{ transform:translateX(calc((var(--i) - (var(--n) - 1)/2) * 44px)) rotate(calc((var(--i) - (var(--n) - 1)/2) * 7deg))} .lot img{width:100%;height:100%;object-fit:contain} .card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:0;flex:1} .ligne-tag{color:var(--encre-faible);display:block;margin-bottom:9px} /* la ligne du produit se signale par un filet de sa propre teinte — une information, pas une pastille de couleur */ .ligne-tag::before{content:"";display:inline-block;width:16px;height:var(--ep-plein); background:var(--c);vertical-align:middle;margin-right:9px; transform:translateY(-1px)} /* De nuit, la teinte du bidon ne peut pas porter l'information telle quelle : l'oud vaut N2, soit le niveau des surfaces — il disparaît. On le REMONTE vers l'encre forte (il garde sa dominante, il retrouve un niveau lisible) et on lui rend la lueur. C'est exactement la règle des deux physiques : de jour la teinte suffit parce qu'elle contraste avec le papier, de nuit il lui faut de la lumière. */ [data-theme="nuit"] .ligne-tag::before{ background:color-mix(in srgb,var(--c) 42%,var(--encre-fort)); height:2px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 50%,var(--encre-fort)))} .card h3{font-size:19px;font-weight:400;letter-spacing:-.022em;color:var(--encre-fort)} .fmt{color:var(--encre-faible);margin-top:7px;letter-spacing:.1em} .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 16px; padding-top:14px;border-top:1px solid var(--trait);margin-top:auto} .price .p{font-family:var(--mono);font-size:20px;letter-spacing:-.01em;color:var(--encre-fort); font-variant-numeric:tabular-nums} .price .old{font-family:var(--mono);font-size:12px;color:var(--encre-faible); text-decoration:line-through} .dose{color:var(--encre-faible);letter-spacing:.1em;width:100%} .card .btn{width:100%;margin-left:0} /* ── FICHE PRODUIT ───────────────────────────────────────────────────────── */ .fiche{display:grid;grid-template-columns:1.05fr 1fr;gap:0; margin:0 calc(var(--gouttiere)*-1);border-top:1px solid var(--trait)} .fiche>*{padding:38px var(--gouttiere)} .fiche>*:first-child{border-right:1px solid var(--trait)} .galerie{position:relative;aspect-ratio:1/1;background:var(--plaque);border:1px solid var(--trait); border-radius:var(--r);overflow:hidden} .thumb{width:74px;height:74px;object-fit:contain;background:#fff; border:1px solid var(--trait);border-radius:var(--r);padding:4px;cursor:pointer; overflow:hidden;position:relative; transition:border-color var(--court) var(--lourd)} .thumb:hover{border-color:var(--encre-fort)} /* dans le panier, `.thumb` est un conteneur : la photo (ou le bidon SVG) doit remplir la vignette, pas déborder */ .thumb>img,.thumb>svg{position:absolute;inset:4px;width:auto;height:auto; max-width:calc(100% - 8px);max-height:calc(100% - 8px);margin:auto; object-fit:contain;padding:0} .cart-line>div:nth-child(2) b{font-weight:500;font-size:15.5px;color:var(--encre-fort)} .cart-line>b:last-child{font-family:var(--mono);font-weight:400; color:var(--encre-fort);font-variant-numeric:tabular-nums} /* la galerie de vignettes de la fiche produit */ .galerie+.galerie,.fiche .galerie:has(button){aspect-ratio:auto} .fiche .galerie button{background:none;border:0;padding:0;cursor:pointer;margin:10px 8px 0 0} .fiche .galerie button img{width:70px;height:70px;object-fit:contain;background:#fff; border:1px solid var(--trait);border-radius:var(--r);padding:4px; transition:border-color var(--court) var(--lourd)} .fiche .galerie button[aria-pressed="true"] img{border-color:var(--encre-fort); border-width:var(--ep-plein)} .big-price{font-family:var(--mono);font-size:34px;letter-spacing:-.02em;color:var(--encre-fort); font-variant-numeric:tabular-nums} .specs{width:100%;border-collapse:collapse;margin-top:20px;font-size:13.5px} /* La fiche est écrite en