/* ========================================================================== NORYVA — PAGES DOCUMENT TAILLE PLANCHER : 11 px. Les libellés en capitales espacées descendaient à 9 px — élégant sur une maquette, illisible sur un téléphone tenu à bout de bras, et sous le seuil que le reste du site s'impose déjà (voir la règle `@media (pointer: coarse)` de vp.css). La hiérarchie tient désormais à la couleur et à l'interlettrage, pas à une taille qu'on ne peut plus lire. (produits, index anglais) La page d'accueil est une SCÈNE : une couche 3D fixe, des actes qui pilotent une caméra. Une page produit est un DOCUMENT : on y vient pour lire, souvent depuis un moteur de recherche, souvent sur un téléphone, souvent avec une question précise. Elle ne charge donc aucun moteur 3D — elle doit s'ouvrir vite et se lire d'un pouce. Elle réutilise les jetons de vp.css (couleurs, police, courbe d'animation) : même marque, deux régimes de lecture. ========================================================================== */ /* --- rythme vertical ------------------------------------------------------ Une seule échelle d'espacement, et les sections respirent largement : le luxe visuel, c'est du vide maîtrisé, pas des bordures en plus. */ :root{ --pg-max:1180px; --pg-prose:68ch; --pg-pad:clamp(20px,5vw,44px); --pg-sec:clamp(56px,9vw,104px); } body.pg{background:var(--night);color:var(--ink);overflow-x:hidden} .pg-main{max-width:var(--pg-max);margin:0 auto;padding:0 var(--pg-pad)} .pg-sec{padding:var(--pg-sec) 0;border-top:1px solid var(--line)} .pg-sec:first-of-type{border-top:0} .pg-prose{max-width:var(--pg-prose)} .pg-prose p{color:var(--muted);font-size:clamp(15px,1.6vw,16.5px);line-height:1.75} .pg-prose p + p{margin-top:1em} /* --- titres --------------------------------------------------------------- Une seule famille, trois poids d'attention. Le suréchelonnement typographique (six tailles différentes sur une page) est ce qui fait « template ». */ .pg-eyebrow{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--faint);margin:0 0 14px} h1.pg-h1{font-size:clamp(34px,6.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0} .pg-sec h2{font-size:clamp(23px,3.4vw,33px);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px} .pg-sec h3{font-size:clamp(16px,2vw,18px);margin:0 0 8px} .pg-lead{font-size:clamp(16.5px,2.1vw,20px);line-height:1.6;color:var(--ink); max-width:56ch;margin:20px 0 0} /* --- en-tête de page ------------------------------------------------------ */ .pg-top{position:sticky;top:0;z-index:30;display:flex;align-items:center; justify-content:space-between;gap:14px;height:var(--nav);padding:0 var(--pg-pad); /* Fond OPAQUE plutot qu'un flou d'arriere-plan : un en-tete colle refloute ce qui passe dessous a chaque image de defilement, c'est-a-dire pendant toute la lecture de la page. Sur un fond quasi noir, 97 % d'opacite donne la meme lecture — le contenu passe dessous et disparait — pour zero rasterisation. */ background:color-mix(in srgb,var(--night) 97%,transparent); border-bottom:1px solid var(--line)} .pg-top .lockup{position:static;transform:none;display:flex;align-items:center;gap:9px} .pg-top .lockup b{font-size:15px;letter-spacing:.02em} .pg-back{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .pg-back:hover{color:var(--ink)} /* --- barre de tête : retour gamme + panier -------------------------------- */ .pg-nav{display:flex;align-items:center;gap:clamp(14px,3vw,28px)} .pg-cart{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase} .pg-cart #cartCount{min-width:18px;height:18px;padding:0 5px;border-radius:999px; background:var(--plasma);color:#fff;font-size:10px;display:grid;place-items:center} .pg-cart #cartCount[hidden]{display:none} /* --- hero produit --------------------------------------------------------- DEUX COLONNES : ce qu'on lit, et ce qu'on achète. Elle n'en avait qu'une, et la moitié droite de l'écran restait vide sur une page de produit. Le rendu est celui de CETTE référence — son étiquette porte son nom et son dosage — et il s'efface sous 820 px, où la colonne unique redevient la bonne mise en page : le texte d'abord, le produit ensuite. */ .pg-hero{padding:clamp(44px,8vw,86px) 0 clamp(36px,6vw,64px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--vue,360px)); gap:clamp(24px,5vw,64px);align-items:center} .pg-hero-txt{min-width:0} .pg-hero-vue{display:flex;justify-content:center} .pg-hero-vue img{height:min(52vh,520px);width:auto;max-width:100%} @media (max-width:820px){ .pg-hero{grid-template-columns:1fr;gap:26px} .pg-hero-vue{order:-1} .pg-hero-vue img{height:min(27vh,246px)} } .pg-acq{margin-top:26px} /* ========================================================================== BOUTIQUE — une carte par référence, prix et panier compris. -------------------------------------------------------------------------- Ce que le benchmark CRO retient, et qui est appliqué ici : · le nom, le prix et le bouton dans la MÊME carte, jamais plus bas ; · des pastilles de couleur plutôt qu'un menu déroulant ; · l'économie de l'abonnement affichée en euros, pas en pourcentage ; · une ligne d'avis à hauteur du prix — honnête quand il n'y en a aucun ; · une seule colonne sous 680 px : le côte-à-côte se lit toujours moins bien sur un téléphone qu'un empilement. ========================================================================== */ /* ---- CHOISISSEZ VOTRE FORMAT --------------------------------------------- Deux onglets, chacun avec son « à partir de » : l'écart de prix ne se cache pas. Le stylo porte la pastille « recommandé » — sur ce genre de choix elle vaut 30 à 50 % de sélections en plus, non pas parce qu'elle affirme une supériorité (il n'y en a aucune à affirmer) mais parce qu'elle lève l'anxiété du choix. La fiole reste un format ESSENTIEL, jamais un lot de consolation : même taille, même contraste, même place. */ /* LA BASCULE À ONGLETS A DISPARU, ET SON STYLE AVEC. Elle mettait les deux formats côte à côte, un seul visible à la fois : très rapide, et incompréhensible — on arrivait sur « 149 € » sans savoir ce qu'on achetait de plus. La hiérarchie est maintenant dans la SUITE des sections, stylo puis fiole ; il ne reste de l'ancien bloc que sa pastille, qui garde son rôle exact : nommer l'offre mise en avant et celle qui ne l'est pas. 11 px : le plancher de lisibilité du dépôt. Une pastille « recommandé » qui ne se lit pas ne recommande rien, et « Format essentiel » est le seul mot qui dit à un client que la fiole n'est pas un lot de consolation. */ .cf-badge{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em; text-transform:uppercase;font-style:normal;color:var(--faint); border:1px solid var(--line);border-radius:999px;padding:3px 9px} .cf-badge--reco{color:var(--night);background:var(--gold-lt);border-color:var(--gold-lt)} /* La pastille vit maintenant dans le surtitre de la section, à côté du nom du format : « FORMAT STYLO · RECOMMANDÉ ». Elle se lit d'un coup d'œil et ne demande aucun clic pour révéler l'autre offre. */ .doc-in > .eyebrow .cf-badge{margin-left:10px;vertical-align:baseline} /* Bande de TRANSITION : trois lignes, pas un chapitre. Elle annonce le changement de format et rend la main tout de suite à la scène, qui montre les références une par une. Une transition qui prend un écran entier n'est plus une transition, c'est une étape de plus. */ .doc-band--mince .doc-in{padding-top:clamp(44px,6vw,72px); padding-bottom:clamp(36px,5vw,60px)} /* Le fondu du fond doit rester PLUS COURT que ce rembourrage, sinon la dernière ligne se lit sur un fond en train de disparaître. La bande mince a moins de marge que les autres : son fondu se raccourcit d'autant. */ .doc-band--mince{--fondu:clamp(28px,4vw,52px)} /* ========================================================================== « VOUS PRÉFÉREZ LE FORMAT FIOLE ? » — LE TEXTE À GAUCHE, LA FIOLE À DROITE. La bande était un rectangle opaque sur toute la largeur : trois lignes de texte calées à gauche, et la moitié droite de l'écran vide — pas d'un vide voulu, d'un vide qui donne l'impression qu'une image n'a pas chargé. Or il y a exactement ce qu'il faut derrière : la station des fioles est déjà en place à cet instant, décalée à droite pour laisser la colonne libre. Le fond ne couvre donc plus que la moitié gauche et s'efface vers la droite. Il est porté par un pseudo-élément et non par la bande elle-même : le masque vertical qui empêche la couture en haut et en bas ne doit pas s'appliquer au TEXTE, seulement au fond. ========================================================================== */ #fioles{background:none} #fioles::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to right,var(--night) 0 44%,transparent 80%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fondu), #000 calc(100% - var(--fondu)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fondu), #000 calc(100% - var(--fondu)),transparent 100%)} #fioles .doc-in{position:relative;z-index:1;max-width:min(1180px,100%)} /* LA COLONNE ÉTROITE NE VAUT QUE POUR LE TEXTE, ET C'EST UN DÉFAUT QUI A COÛTÉ LA MOITIÉ DE L'ÉCRAN. `> *` clampait TOUS les enfants de la bande à 46 caractères — utile quand elle ne portait que trois lignes posées sur la moitié gauche, devant une fiole en fond. Depuis qu'elle porte la grille des huit références, la même règle écrasait cette grille à 464 pixels sur 1092 disponibles : quatre colonnes de 140 px et une moitié droite vide. Le texte garde sa mesure — une ligne de 46 caractères se lit, une ligne de 1092 pixels non — et la grille prend toute la largeur. */ #fioles .doc-in > .eyebrow, #fioles .doc-in > h2, #fioles .doc-in > .lead{max-width:46ch} /* Sur un téléphone il n'y a pas de « moitié droite » : la fiole est derrière le texte, pas à côté. Le fond redevient plein, et le vide disparaît de lui-même puisque la colonne occupe toute la largeur. */ @media (max-width: 900px){ #fioles::before{background:var(--night)} #fioles .doc-in > .eyebrow, #fioles .doc-in > h2, #fioles .doc-in > .lead{max-width:none} } /* Le voile qui assombrit la moitié gauche n'a plus lieu d'être : il servait à détacher trois lignes de texte d'une fiole en fond. Sous une grille de huit cartes, il ne fait qu'assombrir la moitié des produits. */ #fioles::before{background:linear-gradient(to right,var(--night) 0 22%,transparent 62%)} /* POURQUOI LE FORMAT STYLO — quatre faits, un écran. Volontairement une LISTE et non des cartes : quatre encadrés à la file feraient un tableau comparatif, et il n'y a rien à comparer — la molécule est la même. Ce sont quatre phrases sur ce qu'on tient dans la main. */ .why{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:760px} .why li{display:grid;gap:6px;padding:18px 20px;border-radius:18px; border:1px solid var(--line);background:rgba(255,255,255,.02)} .why strong{font-size:16px;font-weight:500;letter-spacing:.01em} .why span{color:var(--muted);font-size:14.5px;line-height:1.6} /* Bascule de format dans la carte : la réponse à « c'est trop cher », sur place, sans changer de page. */ .bt-autre{display:inline-flex;align-items:center;min-height:40px;margin-top:2px; padding:0;background:none;border:0;cursor:pointer;text-align:left; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em; color:var(--gold-lt);border-bottom:1px solid var(--line); align-self:start;transition:border-color .25s var(--ease)} .bt-autre:hover{border-bottom-color:var(--gold-lt)} /* La même bascule, dans le bloc d'achat de la fiche. `.bt-autre` vit dans une carte de grille, où `align-self:start` suffit à lui donner sa largeur ; le bloc d'achat est une pile, et le soulignement traversait donc toute la colonne — il se lisait comme un trait de séparation, juste au-dessus d'un vrai trait de séparation. Il ne souligne plus que ses propres mots. */ .acq-autre{width:max-content;max-width:100%;margin-top:14px} .boutique{display:grid;gap:16px;margin-top:30px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} /* QUATRE PAR RANGÉE SUR ORDINATEUR, QUEL QUE SOIT LE NOMBRE DE RÉFÉRENCES. `auto-fit` en donne quatre aujourd'hui parce qu'il y en a quatre et que la colonne fait 1180 : avec huit références, la règle tiendrait toujours, mais elle le ferait par coïncidence arithmétique. On l'écrit. Huit produits font alors deux rangées de quatre, jamais une longue rangée à parcourir. */ @media (min-width: 1000px){ .boutique{grid-template-columns:repeat(4,1fr)} } .bt-carte{display:grid;grid-template-rows:auto 1fr;gap:14px; border:1px solid var(--line);border-radius:20px;padding:18px; background:rgba(255,255,255,.02);transition:border-color .3s var(--ease)} .bt-carte:hover{border-color:color-mix(in srgb,var(--gold) 34%,transparent)} /* LA VIGNETTE MONTRE LE PRODUIT ENTIER, PAS SON CAPUCHON. `height:100%` sur une image remplacée ne survit pas à `max-width:100%` : la largeur gagne, la hauteur est RECALCULÉE pour garder le rapport, et une image de 263x720 ressortait à 223x610 dans une boîte de 190 — recadrée par `overflow:hidden` sur son tiers supérieur. Résultat : la carte fiole montrait un bouchon et la carte stylo un capuchon noir, c'est-à-dire la seule partie IDENTIQUE aux trois finitions. Changer de couleur ne changeait rien à l'écran, et l'étiquette — le logo, le nom, la mention RUO, tout ce qui fait l'argument du site — n'était jamais visible. Deux maxima et deux `auto` : l'image se contient, elle ne se recadre plus. */ /* FLEX, PAS GRID : la ligne implicite d'une grille est `auto`, donc INDÉFINIE pour la résolution des pourcentages — `max-height:100%` sur l'image y était purement décoratif, et le recadrage restait entier malgré la règle. Un conteneur flex de hauteur fixe résout le pourcentage. */ .bt-vue{display:flex;align-items:center;justify-content:center; height:250px;overflow:hidden} .bt-vue img{max-height:100%;max-width:100%;height:auto;width:auto;object-fit:contain} .bt-txt{display:grid;align-content:start;gap:8px} .bt-nom{font-size:19px;font-weight:500;letter-spacing:.01em} .bt-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* La micro-identification : de quelle molécule parle-t-on ? Une ligne, en texte courant et non en mono — c'est une information à LIRE, pas une étiquette technique de plus sous la précédente. */ .bt-micro{color:var(--muted);font-size:13.5px;line-height:1.5} .bt-prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 0} .bt-prix b{font-size:22px;font-weight:500} .bt-eco{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.06em;color:var(--gold-lt)} /* Le statut du montant, collé au montant. Discret mais jamais absent. */ .bt-demo{font-style:normal;text-transform:uppercase;letter-spacing:.14em; color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:1px 7px} .bt-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} .bt-act .btn{min-height:46px} .bt-note{grid-column:1/-1;font-size:11px;letter-spacing:.06em;color:var(--faint); line-height:1.6;margin:4px 0 0} /* Pastilles de couleur : la finition se voit, elle ne se lit pas dans une liste. */ .bt-fin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 2px} .bt-sw{width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0; border:1px solid var(--line); background:linear-gradient(145deg,var(--sw) 58%,var(--sw2) 100%); transition:.25s var(--ease);position:relative} /* La cible tactile fait 44 px sans que la pastille ait à grossir. */ .bt-sw::after{content:"";position:absolute;inset:-7px} .bt-sw.on{box-shadow:0 0 0 2px var(--night),0 0 0 3px var(--gold-lt)} /* 11 px : le plancher de lisibilité du dépôt vaut aussi pour un nom de finition — c'est le seul endroit qui dit QUELLE couleur est sélectionnée. */ /* Le nom occupe TOUJOURS sa propre ligne. Sur la même ligne que les pastilles, il passait à la ligne pour « OBSIDIAN PURPLE » et pas pour « STEALTH BLACK » : la carte grandissait au clic et les quatre cartes de la grille cessaient d'être alignées. Une ligne réservée ne bouge plus. */ .bt-fin-nom{flex:1 0 100%;font-family:"JetBrains Mono";font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .bt-rv .rv-mini{margin:2px 0 0} @media (max-width:680px){ .boutique{grid-template-columns:1fr} /* La colonne du visuel reste étroite, mais elle respire : à 150 px de haut, un produit entier tenait sur 55 px de large et flottait au milieu d'un vide. La carte n'a pas grandi — c'est le produit qui occupe sa colonne. */ .bt-carte{grid-template-columns:126px 1fr;grid-template-rows:auto;align-items:center} .bt-vue{height:210px} } /* Ligne d'avis, sous le bloc d'achat. */ .rv-mini{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin:14px 0 0} .rv-mini--vide{color:var(--faint)} .rv-mini a{color:var(--gold-lt);border-bottom:1px solid var(--line)} /* ---- BARRE COLLÉE, TÉLÉPHONE UNIQUEMENT --------------------------------- */ #pgSticky{position:fixed;left:0;right:0;bottom:0;z-index:34;display:none; align-items:center;gap:12px;padding:10px clamp(14px,4vw,20px); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); /* OPAQUE, ET PAS « PRESQUE ». À 97 %, le texte de la page transparaissait sous le prix : un fantôme gris derrière « 89 € », visible à la capture. Trois pour cent ne se voient pas quand la barre ne sort qu'au bas d'une page ; ils se voient tout le temps depuis qu'elle accompagne toute la lecture. Un prix se lit sur un fond, pas sur un texte. */ background:#08070a;border-top:1px solid var(--line); transform:translateY(105%);transition:transform .32s var(--ease)} #pgSticky.on{transform:none} #pgSticky .ps-prix{flex:1;font-family:"JetBrains Mono";font-size:13px; letter-spacing:.08em;color:var(--ink)} #pgSticky .pg-btn{min-height:46px;flex:0 0 auto} @media (max-width:820px){ #pgSticky{display:flex} } /* LA PLACE DE LA BARRE EST RÉSERVÉE, PAS EMPRUNTÉE. Mesuré au bas de la fiche, à 390 px : la barre recouvrait la dernière ligne de la mention légale — « Contenu de démonstration — non contractuel. » coupée en deux. Tant qu'elle ne sortait qu'à la fin d'une descente, la page avait déjà tout montré ; depuis qu'elle accompagne toute la lecture, elle mange en permanence les 67 derniers pixels du document. On rend donc ces pixels au document plutôt que de déplacer la barre : une réserve constante, posée au chargement, qui ne provoque aucun saut et qui n'existe que là où la barre existe. */ @media (max-width:820px){ body.pg{padding-bottom:calc(67px + env(safe-area-inset-bottom,0px))} } /* LE BLOC D'ACQUISITION VIENT DE LA PAGE D'ACCUEIL — ET SES TAILLES AUSSI. Sur l'accueil, ces libellés vivent dans une mise en page dense et se lisent à 9,5 ou 10 px. Une page document n'a pas cette contrainte, et le plancher du dépôt est 11 px : `tests/pages.js` l'exige, et il a raison — on ne fait pas lire un bouton d'achat à 9,5 px. On ne touche pas au module : on lui donne la mesure de CETTE page. Même chose pour la hauteur des commandes : 40 px minimum, parce qu'un doigt n'a pas de curseur. */ .pg .acq-go,.pg .acq .btn,.pg #cartFoot .btn,.pg .cart-head .btn, .pg .acq-note,.pg .acq-promise,.pg .cart-note, .pg .warn b,.pg .acq--closed .mono,.pg .cart-warn{font-size:11px} .pg .acq .iv{font-size:11px;min-height:40px} .pg .acq-go,.pg .acq .btn,.pg #cartFoot .btn,.pg .cart-head .btn{min-height:44px} /* Les deux entrées de la barre de tête sont des cibles, pas des mots : on leur donne la hauteur d'une commande sans changer leur graisse. */ .pg-nav .pg-back,.pg-nav .pg-cart{display:inline-flex;align-items:center; min-height:44px} /* LA PASTILLE DU PANIER SE POSITIONNE SUR SON BOUTON, PAS SUR L'ÉCRAN. `#cartCount` est en `position:absolute` dans vp.css, et son ancrage venait de `#cartBtn{position:relative}` — un identifiant que porte le bouton de l'accueil, pas celui des pages générées. Sur ces pages, la pastille prenait donc la fenêtre pour référence : elle se collait au coin supérieur droit, dépassait de 5 px et ajoutait un défilement horizontal à 390 px. Dès qu'un article était au panier, toutes les pages stables en héritaient. */ .pg-nav .pg-cart{position:relative} .pg-hero .pg-dose{font-family:"JetBrains Mono";font-size:12px;letter-spacing:.14em; color:var(--gold-lt);margin:18px 0 0} .pg-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .pg-btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 22px; border-radius:999px;border:1px solid var(--line);color:var(--ink);cursor:pointer; background:rgba(255,255,255,.04);font-family:"JetBrains Mono";font-size:11px; letter-spacing:.16em;text-transform:uppercase;transition:.35s var(--ease)} .pg-btn:hover{background:var(--ink);color:var(--night);border-color:var(--ink)} .pg-btn--acc{border-color:color-mix(in srgb,var(--plasma) 58%,transparent); background:color-mix(in srgb,var(--plasma) 16%,transparent)} .pg-btn--acc:hover{background:var(--accent-txt);border-color:var(--accent-txt);color:#fff} /* --- pastille de statut --------------------------------------------------- */ .pg-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px; border:1px solid var(--line);font-family:"JetBrains Mono";font-size:11px; letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .pg-badge i{width:6px;height:6px;border-radius:50%;background:var(--faint)} .pg-badge--ruo{border-color:rgba(233,202,154,.34);color:var(--gold-lt)} .pg-badge--ruo i{background:var(--gold-lt);box-shadow:0 0 8px var(--gold-lt)} /* --- grille de faits ------------------------------------------------------ Chaque case dit UNE chose. Une valeur absente s'affiche « à renseigner » et se voit : une case vide qu'on remplit d'un tiret laisse croire à un choix. */ .pg-facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:16px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .pg-facts > div{background:var(--night-2);padding:20px 20px 22px} .pg-facts dt{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);margin-bottom:9px} .pg-facts dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink)} /* UNE VALEUR QUI VIENDRA DU CERTIFICAT DE LOT N'EST PAS UNE VALEUR MANQUANTE. Ces cases-là portaient « à renseigner », en italique pâle : le client y lisait un site inachevé. Elles disent maintenant où la donnée se trouve — sur le certificat du lot livré — et le ton suit : discret, pas fautif. */ .pg-facts dd.attente{color:var(--muted)} .pg-facts dd.vide{color:var(--faint);font-style:italic} /* --- puces de domaine ----------------------------------------------------- */ .pg-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;padding:0;list-style:none} .pg-chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--line); font-size:13px;color:var(--muted);background:rgba(255,255,255,.025)} /* « À EXPLORER POUR » — LES MÊMES PUCES, MAIS EN PREMIER NIVEAU DE LECTURE. Ces domaines répondent à la seule question qu'un visiteur se pose devant un nom qu'il ne connaît pas : est-ce que ça me concerne ? En version discrète ils se lisaient comme des mots-clés de bas de page. Ici ils portent le message, donc ils prennent la couleur du texte et la taille d'un choix. */ .pg-chips--grand{margin-top:0;gap:10px} .pg-chips--grand li{padding:11px 18px;font-size:15px;color:var(--ink); background:color-mix(in srgb,var(--gold) 6%,transparent); border-color:color-mix(in srgb,var(--gold) 26%,var(--line))} @media (max-width:700px){ .pg-chips--grand li{font-size:14px;padding:10px 15px} } /* ========================================================================== LE TABLEAU DE COMPARAISON DES REFERENCES POURQUOI UN VRAI `` ET PAS DES CARTES. Comparer, c'est lire une COLONNE : « niveau de donnees » de haut en bas, huit fois. Des cartes empilees rendent cette lecture impossible — on retombe sur ce qu'on voulait eviter, huit fiches a memoriser. Le tableau porte aussi la semantique qui va avec : `scope="col"`, `scope="row"`, un lecteur d'ecran annonce la colonne avant la valeur. SUR TELEPHONE, IL NE DEFILE PAS LATERALEMENT. Quatre colonnes dans 390 px demanderaient un defilement horizontal, c'est-a-dire du contenu cache — et personne ne fait defiler un tableau sur le cote. Chaque cellule porte donc son intitule dans `data-l`, affiche en petit au-dessus de la valeur : la ligne devient un bloc lisible, rien n'est tronque, rien ne sort de l'ecran. ========================================================================== */ .cmp{width:100%;border-collapse:collapse;margin-top:26px;text-align:left} .cmp th,.cmp td{padding:14px 16px 14px 0;vertical-align:top; border-bottom:1px solid var(--line)} .cmp thead th{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);font-weight:400; padding-bottom:10px;white-space:nowrap} .cmp tbody th{font-size:17px;font-weight:500;color:var(--ink);white-space:nowrap} .cmp tbody th a{color:inherit;text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)} .cmp tbody th a:hover,.cmp tbody th a:focus-visible{border-bottom-color:var(--gold-lt)} .cmp td{font-size:14px;color:var(--muted)} .cmp-axe{display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:999px; border:1px solid var(--line);font-size:12px;color:var(--muted); background:rgba(255,255,255,.025)} .cmp-note{margin-top:16px;font-size:13px;color:var(--muted);max-width:68ch} @media (max-width:760px){ /* L'en-tete disparait : chaque cellule porte deja son intitule. Le laisser afficherait les quatre titres une fois en haut, sans rapport visuel avec les valeurs empilees plus bas. */ .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap} .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto} .cmp tr{padding:18px 0;border-bottom:1px solid var(--line)} .cmp th,.cmp td{border:0;padding:0 0 10px} .cmp tbody th{font-size:19px;padding-bottom:12px;white-space:normal} .cmp tbody th::before{display:none} .cmp td::before{content:attr(data-l);display:block;margin-bottom:5px; font-family:"JetBrains Mono";font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);opacity:.72} .cmp td:empty{display:none} } /* LE BLOC DES SOUS-PARTIES SCIENTIFIQUES. « Comprendre la science » rassemble ce qui était cinq sections de plein droit. Elles deviennent des sous-parties : même texte, même ordre, un cran de titre en moins et un espacement plus serré, pour que le bloc se lise comme un chapitre et non comme cinq pages collées. */ .pg-sub + .pg-sub{margin-top:clamp(22px,3vw,34px)} .pg-sub h3{font-size:clamp(15px,1.5vw,18px);font-weight:400;margin:0 0 10px; color:var(--ink);letter-spacing:-.01em} .pg-science > h2{margin-bottom:clamp(20px,2.6vw,30px)} .pg-science .pg-limits{margin-top:clamp(22px,3vw,34px)} /* L'ÉTAT « PAS ENCORE DE PUBLICATION » N'EST PLUS UN ENCADRÉ D'EXCUSE. Les domaines documentés prennent la place, en grand, et la méthode tient en une ligne dessous. Voir assets/js/vp-evidence.js pour le pourquoi. */ .ev-axes-note{margin:18px 0 0;color:var(--faint);font-size:13.5px; line-height:1.6;max-width:72ch} /* --- encart « ce que les données ne disent pas » -------------------------- Volontairement mis en avant, et non caché en bas de page : c'est la section qui rend crédibles toutes les autres. */ .pg-limits{border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line)); border-radius:16px;padding:clamp(20px,3vw,30px); background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%)} .pg-limits h2{margin-bottom:12px} /* --- avertissements réglementaires ---------------------------------------- */ .pg-warns{display:grid;gap:12px;margin-top:22px} .pg-warn{border:1px solid var(--line);border-radius:14px;padding:16px 18px; background:rgba(255,255,255,.025)} .pg-warn b{display:block;font-size:14px;margin-bottom:6px} .pg-warn p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)} .pg-warn--critical{border-color:rgba(233,202,154,.4)} .pg-warn--critical b{color:var(--gold-lt)} /* --- FAQ ------------------------------------------------------------------ */ .pg-faq{border-top:1px solid var(--line)} .pg-faq details{border-bottom:1px solid var(--line)} .pg-faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative; font-size:clamp(15px,1.9vw,17px);line-height:1.4;transition:.3s var(--ease)} .pg-faq summary::-webkit-details-marker{display:none} .pg-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); color:var(--faint);font-size:20px;transition:.3s var(--ease)} .pg-faq details[open] summary::after{content:"−";color:var(--gold-lt)} .pg-faq summary:hover{color:var(--gold-lt)} .pg-faq .pg-a{padding:0 0 22px;max-width:var(--pg-prose)} .pg-faq .pg-a p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.72} /* --- navigation entre références ------------------------------------------ */ .pg-others{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:26px} /* ========================================================================== « CE QUI EST RÉELLEMENT DOCUMENTÉ » — UNE MOITIÉ D'ÉCRAN VIDE, RÉCUPÉRÉE -------------------------------------------------------------------------- La bande alignait quatre cartes égales sur une rangée, puis deux encadrés d'état à moitié de largeur : sur un écran de 1440, la moitié droite ne portait rien du tout. Or c'est la section qui doit inspirer confiance ; un grand vide y ressemble à un chantier, pas à une preuve. Deux corrections, et aucune n'ajoute de contenu : - les encadrés d'état prennent toute la largeur de la colonne ; - la grille passe en « une grande + les autres », ce qui remplit la rangée et donne à une référence une PLACE plus forte. LA GRANDE CASE VA À IGF-1 LR3, et c'est une décision de mise en page, pas une affirmation. Rien n'est écrit de plus sur elle que sur les autres : ni « mieux documentée », ni « plus sûre », ni aucune comparaison. Elle est plus grande, elle est première, son nom est plus lisible et sa fiche est plus facile à atteindre. Ce que le site DIT d'elle reste exactement ce que le catalogue et la bibliothèque en disent. DEUX RANGÉES, PAS TROIS. La grande case était calée sur `span 3` du temps où la bande comptait QUATRE références. À huit, la même règle donnait une case de 335 px face à des cartes de 102 — plus de trois fois la hauteur — et laissait deux cellules vides en bas de grille : la vedette écrasait la rangée au lieu de l'ouvrir, et les sept autres devenaient une liste qu'on parcourt au lieu d'une gamme qu'on lit d'un coup d'œil. Sur `span 2`, les sept autres remplissent exactement les cellules restantes — deux rangées de deux, puis une rangée de trois — la grille tombe juste, et la vedette garde ce qui la distingue : la première place, la colonne de gauche, le double de hauteur, son nom plus grand et son fond doré. */ @media (min-width:900px){ .pg-others--vedette{grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,auto)} .pg-others--vedette > .pg-other--vedette{grid-column:1;grid-row:1 / span 2; display:flex;flex-direction:column;justify-content:flex-end; padding:22px;background: linear-gradient(160deg,color-mix(in srgb,var(--gold) 7%,transparent),transparent 62%), var(--night-2); border-color:color-mix(in srgb,var(--gold) 26%,var(--line))} .pg-others--vedette > .pg-other--vedette b{font-size:clamp(20px,2vw,25px); margin-bottom:8px;letter-spacing:-.01em} } .ev-empty,.rv-empty{max-width:none} .pg-other{display:block;border:1px solid var(--line);border-radius:16px;padding:20px; background:var(--night-2);transition:.38s var(--ease)} .pg-other:hover{border-color:color-mix(in srgb,var(--gold) 46%,transparent);transform:translateY(-3px)} .pg-other b{display:block;font-size:17px;margin-bottom:6px} .pg-other span{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em;color:var(--faint)} /* --- révélation au défilement -------------------------------------------- Une seule animation sur toute la page, et elle ne déplace jamais la mise en page (opacité + translation, pas de hauteur). Coupée si le visiteur a demandé moins de mouvement. */ .pg-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .pg-reveal.seen{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .pg-reveal{opacity:1;transform:none;transition:none} .pg-btn,.pg-other{transition:none} } /* --- pied de page --------------------------------------------------------- */ /* LE PIED DE PAGE AVAIT PERDU SA GOUTTIÈRE, ET SUR TOUTES LES PAGES STABLES. Il porte `.pg-main`, qui donne la marge latérale de la page — et la règle ci-dessous l'écrasait avec un raccourci `padding` dont les côtés valaient 0. Résultat : « Science. Purity. Performance. », les liens et l'adresse de contact collés au bord gauche de l'écran, sous un contenu correctement gouttiéré. Techniquement rien ne débordait ; visuellement, la page cassait à son dernier écran. `padding-block` ne touche que le haut et le bas. */ .pg-foot{border-top:1px solid var(--line);margin-top:var(--pg-sec); padding-block:44px 60px} .pg-foot .fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .pg-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .pg-foot a{color:var(--muted);font-size:14px} .pg-foot a:hover{color:var(--ink)} .pg-foot .legal{margin-top:36px;font-size:11.5px;line-height:1.65;color:var(--faint);max-width:88ch} @media (max-width:560px){ .pg-top{gap:8px} .pg-cta-row .pg-btn{width:100%;justify-content:center} .pg-facts{border-radius:14px} } /* ========================================================================== PREUVES SCIENTIFIQUES — cartes et état vide ========================================================================== */ .ev-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .ev-card{border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.6vw,26px); background:var(--night-2);display:flex;flex-direction:column;gap:16px} .ev-org{margin:0 0 6px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--faint)} .ev-title{margin:0;font-size:17px;line-height:1.35} .ev-meta{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:12px;overflow:hidden;grid-template-columns:1fr 1fr;margin:0} .ev-meta > div{background:var(--night);padding:12px 14px} .ev-meta dt{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);margin-bottom:5px} .ev-meta dd{margin:0;font-size:13.5px;color:var(--ink);line-height:1.35} .ev-meta dd.vide{color:var(--faint);font-style:italic} .ev-sum{margin:0;font-size:14px;line-height:1.7;color:var(--muted)} .ev-lim{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted); border-left:2px solid color-mix(in srgb,var(--gold) 50%,transparent);padding-left:14px} .ev-lim b{color:var(--gold-lt);display:block;margin-bottom:4px; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.15em;text-transform:uppercase} .ev-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center; padding-top:14px;border-top:1px solid var(--line)} .ev-link{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.08em;color:var(--gold-lt)} .ev-link:hover{color:var(--ink)} .ev-ok{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:#5fd6a4} /* L'état vide n'est pas un trou : c'est une déclaration, et elle se lit. */ .ev-empty,.rv-empty{border:1px dashed color-mix(in srgb,var(--gold) 34%,var(--line)); border-radius:18px;padding:clamp(22px,3.4vw,34px);max-width:var(--pg-prose); background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 5%,transparent),transparent 72%)} .ev-empty-h,.rv-empty-h{margin:0 0 12px;font-size:clamp(16px,2vw,19px);color:var(--ink)} .ev-empty p,.rv-empty p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.72} /* ========================================================================== AVIS CLIENTS ========================================================================== */ /* ========================================================================== LES AVIS DOIVENT SORTIR DU NOIR, ET C'EST TOUT LEUR SUJET -------------------------------------------------------------------------- Les cartes étaient posées sur `--night-2` avec un filet `--line` : sur un site entièrement sombre, elles se confondaient avec le fond. Un témoignage qui ne se distingue pas du décor n'est pas lu — et le propriétaire veut qu'on comprenne EN UN COUP D'OEIL que ce sont des avis Trustpilot. La carte devient donc CLAIRE, seule surface de ce type sur tout le site. C'est volontaire : l'inversion de valeur est ce qui attire l'oeil, bien plus sûrement qu'un cadre doré de plus. Le texte passe en encre sombre, l'étoile garde le vert de la plateforme — c'est lui qui dit « Trustpilot » avant même qu'on lise le nom. AUCUNE COULEUR DE MARQUE N'EST TOUCHÉE : ces valeurs n'existent que dans ce bloc et ne sont utilisées nulle part ailleurs. Le reste du site garde exactement sa palette. */ .rv-grid{display:grid;gap:clamp(14px,1.6vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr)); align-items:stretch} .rv-card{display:flex;flex-direction:column;border-radius:18px; padding:clamp(20px,2.2vw,28px); background-color:#f7f5f1; background-image:linear-gradient(168deg,#fbf9f6 0%,#f1eee9 100%); border:1px solid rgba(11,10,15,.10); box-shadow:0 22px 48px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.55) inset} .rv-card header{display:flex;justify-content:space-between;align-items:center; gap:10px;margin-bottom:14px} .rv-card h3{margin:0 0 8px;font-size:16px;color:#15131a} /* Le texte de l'avis est le sujet de la carte : il se lit en premier, donc il est le plus contrasté et le plus grand de ce bloc. */ .rv-card p{margin:0;font-size:clamp(15px,1.55vw,16.5px);line-height:1.62; color:#232029;font-weight:400} .rv-card footer{display:flex;justify-content:space-between;gap:10px;margin-top:16px; padding-top:13px;border-top:1px solid rgba(11,10,15,.12); font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em;color:#6b6675} /* LES ÉTOILES SONT CELLES DE TRUSTPILOT, pas celles du site : carrés verts pleins, comme la plateforme les dessine. C'est ce signe-là qu'on reconnaît de loin, et il ne sert que dans ces cartes. */ /* Le carré vide d'une carte CLAIRE ne peut pas être le gris sombre de la pastille du premier écran : ici le fond est presque blanc. */ .rv-card .tp-star{width:20px;height:20px;background:#d9d7d2} .rv-card .tp-stars{gap:3px} /* Le nom et l'étoile de la plateforme, dans l'en-tête de la carte. Encre sombre pour le nom — il se lit sur fond clair — et le vert seulement sur l'étoile, comme Trustpilot le dessine. */ .rv-tp{display:inline-flex;align-items:center;gap:6px;margin-left:auto; font-size:13px;font-weight:500;letter-spacing:.005em;color:#15131a} .rv-tp-g{width:14px;height:14px;fill:#00b67a;flex:none} /* Sur les pages produit, les mêmes cartes restent lisibles sans le reste du bloc : rien d'autre à prévoir, la règle est la même partout. */ @media (max-width:520px){ .rv-grid{gap:14px} .rv-card{padding:20px} } .rv-ok{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:#5fd6a4;border:1px solid rgba(95,214,164,.34);border-radius:999px;padding:4px 9px} /* Le lien vers la plateforme ferme la section. Il n'apparaît qu'avec des avis — voir `render()` dans vp-reviews.js : sous une grille vide, il enverrait le visiteur constater qu'il n'y a rien. */ .rv-all{margin:18px 0 0;font-size:13.5px} .rv-all a{color:var(--muted);text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 55%,transparent); padding:6px 0;display:inline-flex;align-items:center;min-height:24px} .rv-all a:hover{color:var(--ink);border-bottom-color:var(--gold)} @media (pointer:coarse){ .rv-all a{min-height:44px} } .rv-avg{margin:0 0 18px;font-size:15px;color:var(--muted)} .rv-avg b{color:var(--ink);font-size:19px} .rv-answer{margin-top:14px !important;padding-top:12px;border-top:1px solid var(--line); font-size:13.5px} .rv-answer b{color:var(--gold-lt);display:block;margin-bottom:4px; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.15em} /* Intitulés de colonne du pied de page. Classe DÉDIÉE plutôt que `.mono` du site : cette dernière vaut 10 px sur grand écran et n'est remontée à 11 px que sur pointeur grossier — un libellé illisible sur un écran de bureau reste un libellé illisible. */ .pg-flabel{margin:0 0 12px;color:var(--faint);font-family:"JetBrains Mono"; font-size:11px;letter-spacing:.16em;text-transform:uppercase} /* ========================================================================== CARTE D'UNE RÉFÉRENCE QU'ON NE VEND PAS ENCORE Elle ne se déguise pas en offre : pas de prix barré, pas de « bientôt disponible » en doré. Un état, une phrase, un moyen d'être prévenu. Le contour est plus discret que celui d'une carte vendable — le regard doit aller d'abord là où il y a quelque chose à acheter. ========================================================================== */ /* ========================================================================== UNE RÉFÉRENCE DISPONIBLE N'A PAS L'AIR D'UNE RUPTURE DE STOCK -------------------------------------------------------------------------- `.bt-carte--attente` habillait la carte en indisponible : contour pointillé, vignette à 42 % d'opacité et désaturée. Sur les huit références que le fournisseur confirme, ces deux signaux disent au visiteur « ce produit n'existe pas », ce qui est faux et ce qui coûte des ventes. La carte disponible est donc une carte ordinaire. Ce qui la distingue tient en une ligne de texte — le prix est en cours de validation — et en son bouton, qui mène à la fiche plutôt qu'au panier. La classe `--attente` reste définie : elle servira le jour où une référence sera VRAIMENT en rupture, et ce jour-là elle devra se voir. ========================================================================== */ .bt-carte--dispo .bt-vue{opacity:1;filter:none} .bt-carte--dispo .bt-attente{color:var(--muted)} /* Le sélecteur de concentration : des pastilles compactes, lisibles au doigt. Il n'apparaît qu'à partir de deux concentrations — un choix qui n'en est pas un est un faux choix. */ .bt-mg{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0} .bt-mgb{font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.02em; color:var(--muted);background:none;border:1px solid var(--line); border-radius:999px;padding:5px 8px;min-height:28px;cursor:pointer; white-space:nowrap; transition:color .2s var(--ease),border-color .2s var(--ease)} .bt-mgb:hover{color:var(--ink)} .bt-mgb.on{color:var(--night);background:var(--gold-lt);border-color:var(--gold-lt)} @media (pointer:coarse){ .bt-mgb{min-height:44px;padding:10px 13px;font-size:12px} } /* `display:flex` bat `[hidden]` : sans cette règle, masquer le prix quand une concentration non tarifée est allumée ne masquait rien du tout. */ .bt-prix[hidden]{display:none} /* CE QUI REMPLACE LE PRIX, ET CE QUE ÇA DIT. Pas « indisponible », pas « à confirmer » : la référence est disponible et la concentration est confirmée par le fournisseur. Ce qui manque est un TARIF, et c'est la seule chose que la ligne annonce. Elle occupe la même place que le prix pour que la carte ne saute pas d'une hauteur au clic. */ .bt-mg-note{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.02em; color:var(--muted);margin:2px 0 0;min-height:26px;display:flex;align-items:center} .bt-mg-note[hidden]{display:none} .bt-act .btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none} .bt-carte--attente{border-style:dashed; border-color:color-mix(in srgb,var(--line) 80%,transparent); background:rgba(255,255,255,.012)} .bt-carte--attente .bt-vue{opacity:.42;filter:saturate(.6)} .bt-attente{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)} /* LA RÉFÉRENCE EST CONFIRMÉE — ELLE N'A PAS À AVOIR L'AIR D'UN TROU. Le contour pointillé et la vignette délavée disent « on ne sait pas si ce produit existe ». Sur les références que le fournisseur a confirmées, c'est faux : ce qui manque est le PRIX, pas le produit — et un produit réel présenté comme une case vide, c'est du chiffre d'affaires laissé sur la table pour une raison qui n'existe pas. La carte reprend donc son contour plein et sa vignette entière. Elle reste sans prix et sans bouton d'achat : c'est la seule chose qui soit vraie, et elle le reste. */ .bt-carte--confirmee{border-style:solid;border-color:var(--line);background:none} .bt-carte--confirmee .bt-vue{opacity:1;filter:none} .bt-carte--confirmee .bt-attente{color:var(--ink)} .bt-forces{font-size:11px;letter-spacing:.08em;color:var(--faint); margin:0;line-height:1.6} /* ========================================================================== CONCENTRATIONS — LE SÉLECTEUR, LÀ OÙ ON ACHÈTE ========================================================================== */ .acq-forces{margin-bottom:18px} /* 11 px, pas 10,5 : c'est le plancher que `tests/pages.js` fait respecter, et il a raison — sous cette taille une majuscule espacée cesse d'être lisible pour une partie des visiteurs, et le gris clair n'arrange rien. */ .acq-forces-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--faint);margin:0 0 9px} .acq-forces-l{display:flex;flex-wrap:wrap;gap:8px} .acq-force{font-family:"JetBrains Mono";font-size:12px;letter-spacing:.06em; color:var(--muted);background:transparent;cursor:pointer; border:1px solid var(--line);border-radius:999px;padding:8px 14px; /* 44 px PARTOUT, pas seulement au doigt. Le contrôle d'accessibilité mesure les trois écrans, et il a raison : une cible de 38 px se rate aussi à la souris quand la main tremble, et un portable tactile de 1440 points de large existe. La règle conditionnelle qui suivait ne servait à rien. */ min-height:44px;transition:.25s var(--ease)} .acq-force:hover{border-color:color-mix(in srgb,var(--gold) 40%,transparent); color:var(--ink)} .acq-force.on{border-color:var(--gold);color:var(--gold-lt); background:color-mix(in srgb,var(--gold) 9%,transparent)} .acq-force:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .acq-force-etat{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)} /* Une offre dont la concentration n'a pas de prix validé s'éteint — elle ne disparaît pas : le visiteur doit voir POURQUOI il ne peut pas cliquer. */ .acq--indispo{opacity:.38;pointer-events:none} /* ========================================================================== CALCULATEUR — LE FORMULAIRE, SON RÉSULTAT, ET LA SERINGUE Le calculateur vit à deux endroits : sur sa page dédiée, en pleine largeur, et replié sur une fiche produit sous `.cal--compact`. Une seule feuille pour les deux : deux styles pour un même composant, ce sont deux occasions de diverger, et c'est toujours la version repliée qu'on oublie de vérifier. RÈGLE DE TAILLE, ET ELLE N'EST PAS NÉGOCIABLE : 44 px de haut sur tout ce qui se clique ou se tape, aux trois largeurs. `tests/a11y.js` la mesure, et la mesure au 1440 aussi — une main qui tremble rate une cible de 36 px avec une souris exactement comme avec un doigt. ========================================================================== */ .cal{display:block} /* `hidden` DOIT GAGNER SUR LA MISE EN PAGE, ET IL NE LE FAISAIT PAS. `.cal-ligne{display:grid}` et `.cal-champ{display:flex}` écrasent la règle `[hidden]{display:none}` du navigateur, qui est de spécificité 0,1,0 comme elles. Résultat mesuré : le sélecteur « sur quel composant », réservé au mode mélange, s'affichait en mode peptide simple — un réglage sans objet, au milieu du formulaire. La règle ci-dessous rétablit l'ordre naturel : ce qui est marqué caché est caché. */ .cal [hidden],.cal-res [hidden]{display:none} .cal fieldset{border:0;margin:0 0 26px;padding:0} .cal legend{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--faint);padding:0;margin:0 0 12px} /* LA QUESTION DE L'ÉTAPE EST UN TITRE, PAS UNE ÉTIQUETTE. La règle ci-dessus — mono, 11 px, capitales, interlettrage large — a été écrite pour les légendes de groupes de champs. Elle s'appliquait aussi à la question de l'assistant, qui se lisait donc « QUE VOULEZ-VOUS CALCULER ? » en petites capitales grises : le seul mot de l'écran, dans le corps le plus discret de la page. Ce bloc-ci vient après, dans la même feuille, et gagne sans jouer sur la spécificité. */ .cal .cal-etape > legend{font-family:inherit;font-size:clamp(21px,2.6vw,28px); letter-spacing:-.015em;text-transform:none;color:var(--ink);font-weight:200; line-height:1.22;margin:0 0 2px;max-width:22ch} /* --- une ligne de champs ------------------------------------------------- `auto-fit` plutôt qu'un nombre de colonnes fixe : à 390 px la ligne se replie d'elle-même, sans point de rupture écrit à la main qui finirait par ne plus correspondre au contenu. */ .cal-ligne{display:grid;gap:12px;margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))} .cal-champ{display:flex;flex-direction:column;gap:7px;min-width:0} /* VALEUR + UNITÉ : DEUX COLONNES DE TAILLES DIFFÉRENTES. En colonnes égales, la liste d'unités — qui n'a que « mg » et « mcg » à montrer — occupait la moitié de la ligne, et le champ de saisie l'autre moitié. Une unité est une étiquette, pas une valeur : elle prend la place d'une étiquette. En dessous de 560 px la paire se replie, et là les deux champs reprennent toute la largeur, ce qui est le bon comportement. */ @media (min-width:560px){ .cal-ligne--paire{grid-template-columns:minmax(0,1fr) 132px} .cal-comp{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 118px auto} } .cal-champ label,.cal-lab{font-size:12.5px;letter-spacing:.02em;color:var(--muted)} .cal-champ input,.cal-champ select{ min-height:44px;padding:0 13px;color:var(--ink); background:color-mix(in srgb,var(--ink) 3.5%,transparent); border:1px solid var(--line);border-radius:11px; font-family:"JetBrains Mono";font-size:15px;letter-spacing:.01em; transition:border-color .25s var(--ease),background .25s var(--ease)} .cal-champ select{cursor:pointer;appearance:none;padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%), linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .cal-champ input:hover,.cal-champ select:hover{border-color:var(--faint)} .cal-champ input:focus-visible,.cal-champ select:focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-color:transparent} .cal-champ input::placeholder{color:var(--faint)} /* --- segments : type de calcul, modèle de seringue ---------------------- */ .cal-seg{display:flex;flex-wrap:wrap;gap:8px} .cal-seg-b{min-height:44px;padding:0 18px;cursor:pointer; font-family:"JetBrains Mono";font-size:12.5px;letter-spacing:.06em; color:var(--muted);background:transparent; border:1px solid var(--line);border-radius:999px; transition:.25s var(--ease)} .cal-seg-b:hover{color:var(--ink); border-color:color-mix(in srgb,var(--gold) 40%,transparent)} .cal-seg-b.on{color:var(--gold-lt);border-color:var(--gold); background:color-mix(in srgb,var(--gold) 9%,transparent)} .cal-seg-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .cal-champ--ser{gap:10px;margin-top:4px} .cal-note{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted); max-width:62ch} /* --- composants d'un mélange -------------------------------------------- */ .cal-comp{display:grid;gap:12px;margin-bottom:14px;align-items:end; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))} .cal-moins{width:44px;height:44px;flex:none;border-radius:11px;cursor:pointer; color:var(--muted);background:transparent;border:1px solid var(--line); font-size:19px;line-height:1;transition:.25s var(--ease)} .cal-moins:hover{color:var(--ink);border-color:var(--faint)} .cal-moins:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .cal-plus{min-height:44px} /* --- le résultat --------------------------------------------------------- Encadré, mais pas coloré comme une réussite : c'est une conversion, pas une validation. Le seul or de ce bloc est celui du liquide dans la seringue. */ .cal-res{border:1px solid var(--line);border-radius:16px;padding:22px; background:color-mix(in srgb,var(--ink) 2.5%,transparent)} .cal-res-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);margin:0 0 16px} .cal-vide{color:var(--faint);font-size:14px;line-height:1.6} .cal-chiffres{display:grid;gap:16px;margin:0 0 20px; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))} .cal-chiffres dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--faint);margin-bottom:6px} .cal-chiffres dd{margin:0;font-family:"JetBrains Mono"; font-size:clamp(15px,1.6vw,18px);color:var(--ink); /* Un résultat long ne doit pas élargir la page à 390 px. */ overflow-wrap:anywhere} /* La concentration porte DEUX lectures de la même valeur : la seconde est posée sous la première, plus discrète, et ne peut donc plus se retrouver séparée de son unité par un retour à la ligne arbitraire. */ .cal-chiffres dd span{display:block} .cal-chiffres dd span+span{margin-top:3px;font-size:.82em;color:var(--muted)} .cal-dessin{margin:4px 0 0;color:var(--ink)} .cal-svg{display:block;width:100%;height:auto;max-width:620px} .cal-deborde{opacity:.35} .cal-alerte{margin:14px 0 0;font-size:13.5px;line-height:1.55; color:var(--gold-lt); border-left:2px solid color-mix(in srgb,var(--gold) 55%,transparent); padding-left:12px} .cal-err{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink); border-left:2px solid color-mix(in srgb,var(--plasma) 62%,transparent); padding-left:12px} .cal-livre{width:100%;margin:20px 0 0;border-collapse:collapse;font-size:13.5px} .cal-livre caption{text-align:left;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint);padding-bottom:9px} .cal-livre th,.cal-livre td{padding:9px 0;border-top:1px solid var(--line); text-align:left;font-weight:400} .cal-livre th{color:var(--muted)} .cal-livre td{font-family:"JetBrains Mono";color:var(--ink);text-align:right} /* --- la mention qui ferme le formulaire --------------------------------- Elle n'est ni en petit gris de bas de page, ni en encadré rouge : elle dit ce que l'outil fait, et elle se lit. */ .cal-garde{margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--muted); max-width:72ch} /* --- version repliée, sur une fiche produit ----------------------------- */ .cal--compact .cal fieldset{margin-bottom:20px} .cal--compact .cal-res{padding:18px} .cal--compact .cal-chiffres{gap:12px;margin-bottom:16px} .cal-compact-note{margin:0 0 18px;font-size:13.5px;line-height:1.6; color:var(--muted);max-width:66ch} /* --- l'état « à confirmer » du stylo ------------------------------------ Un bloc qui dit ce qu'on NE peut pas calculer. Il est visible, pas caché en bas de page : c'est la question que le visiteur se pose en tenant le stylo. */ .cal-pen{border:1px solid var(--line);border-radius:16px;padding:20px 22px; background:color-mix(in srgb,var(--ink) 2%,transparent)} .cal-pen-etat{display:inline-flex;align-items:center;gap:8px; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);margin:0 0 10px} .cal-pen-etat::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--faint)} .cal-pen p{margin:0;font-size:14px;line-height:1.65;color:var(--muted); max-width:72ch} @media (min-width:1000px){ /* Le formulaire à gauche, le résultat à droite : au 1440 le résultat cesse d'être « sous le pli », et l'on voit les chiffres changer en tapant. C'est tout l'intérêt d'un calcul qui se refait à la frappe. */ /* UNE SEULE COLONNE, ET ELLE EST MESURÉE. La grille à deux colonnes datait du formulaire d'un seul tenant : les champs à gauche, le résultat à droite, visibles ensemble. L'assistant ne pose qu'UNE question à la fois — la seconde colonne n'avait donc plus rien à porter, et l'écran d'ouverture montrait un demi-écran vide à gauche avec la question serrée à droite. Le fil d'étapes passe au-dessus, la question occupe la colonne de lecture, et le résultat reprend sa place à côté seulement quand il existe, c'est-à-dire à la dernière étape. */ .cal{display:grid;gap:30px;grid-template-columns:minmax(0,min(640px,100%)); justify-content:center;align-items:start} .cal .cal-fil{grid-column:1;justify-content:center} .cal .cal-etape{grid-column:1} .cal .cal-mode{grid-column:1;margin-bottom:20px} .cal .cal-saisie{grid-column:1;margin-bottom:0} .cal .cal-res{grid-column:1;position:static} .cal .cal-garde{grid-column:1 / -1} /* La version repliée garde les deux colonnes : sur une fiche produit, la section fait toute la largeur de la page, et un champ « volume de solvant » étiré sur mille pixels ne ressemble à rien. Seule la colonne collante est plus haute — la fiche a son propre en-tête. */ .cal--compact .cal{gap:28px} .cal--compact .cal-res{top:112px} } /* Une ligne de panier sans tarif arrêté : le texte prend la place du montant, à la même hauteur, pour que la colonne des prix reste alignée. */ .cart-nopx{font-family:"JetBrains Mono";font-size:10.5px;font-style:normal; letter-spacing:.02em;color:var(--muted);display:inline-block;max-width:130px; line-height:1.3;text-align:right} /* Le bloc d'offres d'une concentration non tarifée : lisible, sans montant. */ .acq-card.acq--sansprix .acq-head em{visibility:hidden} /* ========================================================================== « NOS OFFRES » — LE CHOIX DU FORMAT, EN DEUX CARTES C'est la première page d'un visiteur qui sait déjà ce qu'il veut. Elle ne lui montre donc pas seize références : elle lui pose la seule question qui ordonne le catalogue — stylo ou fiole — et le laisse partir. Deux cartes, rien d'autre, et le clic est la carte entière. ========================================================================== */ .fmt-choix{display:grid;gap:clamp(14px,1.8vw,22px);margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .fmt-carte{display:flex;flex-direction:column;gap:6px;text-decoration:none; color:inherit;padding:clamp(22px,2.6vw,32px);border-radius:20px; border:1px solid var(--line);background:rgba(255,255,255,.022); transition:border-color .25s var(--ease),background .25s var(--ease), transform .25s var(--ease)} .fmt-carte:hover,.fmt-carte:focus-visible{ border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); background:rgba(255,255,255,.045);transform:translateY(-2px)} .fmt-carte .eyebrow{margin:0 0 4px} .fmt-carte b{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.01em; line-height:1.1} .fmt-carte span{color:var(--muted);font-size:clamp(14px,1.4vw,16px)} .fmt-carte em{margin-top:10px;font-style:normal;font-family:"JetBrains Mono"; font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent-txt)} @media (prefers-reduced-motion:reduce){ .fmt-carte{transition:none} } @media (prefers-reduced-motion:reduce){ .fmt-carte:hover{transform:none} } /* ========================================================================== LA PAGE D'OFFRES — CE QUE CHAQUE FORMAT COÛTE ET CE QU'IL ÉVITE -------------------------------------------------------------------------- Les deux cartes de format existaient déjà et ne disaient rien d'autre que leur nom. Elles portent maintenant le prix d'entrée, les trois faits du stylo, et la seule friction réelle de la fiole. Rien de tout cela n'est décoratif : c'est exactement ce qu'un acheteur compare avant de choisir. LE STYLO EST MARQUÉ, PAS AGRANDI. Une carte deux fois plus grande aurait déséquilibré la grille sur mobile, où les deux s'empilent de toute façon. Un liseré doré et une étiquette suffisent à dire lequel la marque met en avant — et l'ordre commercial est déjà écrit au catalogue. ========================================================================== */ .fmt-carte{position:relative} .fmt-carte--reco{border-color:color-mix(in srgb,var(--gold) 34%,var(--line)); background:rgba(255,255,255,.04)} .fmt-tag{position:absolute;top:clamp(16px,2vw,22px);right:clamp(16px,2vw,22px); font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); border-radius:999px;padding:5px 10px;line-height:1} .fmt-faits{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px} .fmt-faits li{color:var(--muted);font-size:clamp(13px,1.3vw,15px); padding-left:15px;position:relative} .fmt-faits li::before{content:"";position:absolute;left:0;top:.62em; width:5px;height:5px;border-radius:50%;background:var(--accent-txt)} /* La friction de la fiole, dite en petit et sans dramatiser : c'est une information d'achat, pas un avertissement. */ .fmt-note{margin:10px 0 0;color:var(--faint);font-size:12.5px;line-height:1.55} .fmt-prix{margin:14px 0 0;font-family:"JetBrains Mono";font-size:13px; letter-spacing:.06em;color:var(--txt)} .fmt-prix:empty{display:none} .off-sub[hidden]{display:none} .off-eco{margin:14px 0 0;font-family:"JetBrains Mono";font-size:15px; letter-spacing:.06em;color:var(--accent-txt)} .off-promesse{margin:10px 0 0;color:var(--muted);font-size:14px; line-height:1.65;max-width:62ch} .off-rassure{list-style:none;margin:22px 0 0;padding:0;display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .off-rassure li{display:flex;flex-direction:column;gap:5px; padding:clamp(16px,1.8vw,22px);border-radius:16px; border:1px solid var(--line);background:rgba(255,255,255,.018)} .off-rassure b{font-weight:400;font-size:clamp(15px,1.5vw,17px)} .off-rassure span{color:var(--muted);font-size:13.5px;line-height:1.55} .off-aide{border-top:1px solid var(--line)} /* Le passage d'un catalogue à l'autre, en pied de page. Deux liens, jamais un second catalogue empilé : on ne fait pas défiler seize cartes à quelqu'un qui vient d'en voir huit. */ .cat-autre{display:flex;gap:10px;flex-wrap:wrap;margin:0} /* LES PAGES CATALOGUE RESPIRENT MOINS QUE LES PAGES DE LECTURE. `--pg-sec` est calibré pour une fiche produit : on y lit des paragraphes, et l'air entre les sections aide. Ici on vient acheter — un titre, une grille, et c'est tout. Avec l'espacement de lecture, le premier produit tombait sous la ligne de flottaison au 1440 : le visiteur devait défiler pour voir ce qu'il était venu voir. Le filet entre sections disparaît aussi : il séparait un titre de sa propre grille. */ .pg--cat .pg-sec{padding:clamp(16px,2vw,26px) 0;border-top:0} .pg--cat .pg-sec:first-of-type{padding-top:clamp(26px,4vw,52px)} .pg--cat .boutique{margin-top:6px} .pg--cat .fmt-choix{margin-top:10px} /* ========================================================================== LE BILAN — UNE DÉCISION PAR ÉCRAN, GROSSE ET ÉVIDENTE Dimensionné pour le pouce d'abord : une colonne sous 700 px, des cibles de 64 px de haut, et la question qui tient au-dessus du pli sans qu'on ait à faire défiler pour voir les réponses. Sur grand écran la liste s'étale en grille — mais la règle « une question, un écran » ne change pas. ========================================================================== */ .rq-etape{font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--faint);margin:0 0 10px} .rq-barre{height:2px;border-radius:2px;background:var(--line);overflow:hidden; margin:0 0 clamp(20px,3vw,34px);max-width:420px} .rq-barre i{display:block;height:100%;background:var(--accent-txt); transition:width .35s var(--ease)} @media (prefers-reduced-motion:reduce){ .rq-barre i{transition:none} } .rq-q{margin:0 0 clamp(20px,3vw,32px);max-width:20ch} .rq-choix-l{display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .rq-choix{display:flex;align-items:center;gap:14px;width:100%;min-height:64px; padding:14px 20px;text-align:left;cursor:pointer; border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022); color:var(--ink);font:inherit;font-size:clamp(15px,1.7vw,17px); transition:border-color .2s var(--ease),background .2s var(--ease)} .rq-choix:hover,.rq-choix:focus-visible{ border-color:color-mix(in srgb,var(--gold) 46%,var(--line)); background:rgba(255,255,255,.05)} .rq-choix i{font-style:normal;font-size:20px;color:var(--accent-txt); width:26px;text-align:center;flex:none} .rq-retour{margin:clamp(18px,2.4vw,26px) 0 0} /* --- le résultat -------------------------------------------------------- */ .rc-bloc{margin-top:clamp(24px,3.4vw,40px)} .rc-h{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 14px} /* `auto-fit` + `1fr` étalait une carte seule sur toute la largeur : la référence principale, qui est justement souvent seule, devenait un panneau de 1 100 px avec une fiole perdue au milieu. Les colonnes sont donc bornées en HAUT, et la grille se range à gauche. */ .rc-grid{display:grid;gap:clamp(14px,1.8vw,20px);justify-content:start; grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),300px))} /* Sous 700 px la carte prend TOUTE la largeur : bornée à 300 px, elle basculait dans sa présentation compacte à deux colonnes — visuel à gauche, texte serré à droite — et « AJOUTER AU PANIER » se cassait sur deux lignes. Sur un téléphone, la carte est l'écran. */ @media (max-width:700px){ .rc-grid{grid-template-columns:1fr} } /* LA JUSTIFICATION D'UN COMPLÉMENT S'ALIGNE SUR CELLE D'À CÔTÉ. Les cartes n'ont pas la même hauteur — l'une porte deux concentrations, l'autre aucune — et la ligne posée dessous partait donc à deux niveaux différents. Elle se lisait comme une note tombée d'une carte plutôt que comme la raison de sa présence. La carte occupe l'espace disponible, la raison se pose au même endroit dans les deux colonnes. */ .rc-item{display:flex;flex-direction:column} .rc-item > .bt-carte{flex:1 1 auto} /* LA RAISON EST SOUS LA CARTE, ET ELLE CITE LES AXES — JAMAIS UN EFFET. Le texte vient de science/education..json : le bilan ne peut pas dire d'une référence autre chose que ce que sa fiche en dit. */ .rc-why{margin:10px 2px 0;font-size:13.5px;line-height:1.5;color:var(--muted)} /* LE CHAPÔ D'UN BLOC : une phrase, et rien de plus. Il dit À QUEL TITRE ces références sont là — pas ce qu'elles feraient. */ .rc-chapo{margin:-6px 0 16px;font-size:14px;line-height:1.55; color:var(--muted);max-width:56ch} /* LE BLOC « POURQUOI » : c'est la seule chose que le bilan APPORTE, il ne se lit donc plus comme une ligne de fiche collée au bas d'une carte. */ /* LE « POURQUOI » EST DU TEXTE QU'ON LIT, PAS UNE LIGNE DE FICHE. Deux phrases courtes, à la taille du corps de page et dans la couleur du texte principal — c'est la seule chose que le bilan APPORTE au visiteur. */ .rc-why-txt{margin:0 0 10px;max-width:62ch;font-size:15px;line-height:1.6; color:var(--ink)} .rc-why-txt:last-child{margin-bottom:0} /* LES DOMAINES, EN LISTE. Ils étaient collés en fin de phrase, séparés par des points médians : on les parcourait sans les lire. En liste, chacun redevient une porte — et c'est bien ce qu'ils sont, des domaines à explorer. */ .rc-axes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .rc-axes li{border:1px solid var(--line);border-radius:999px; padding:9px 15px;font-size:14px;line-height:1.3;color:var(--ink); background:color-mix(in srgb,var(--gold) 5%,transparent)} /* LA LISTE COCHÉE DU BILAN. Une coche n'est pas un ornement : c'est le signe que quelque chose est ACQUIS. Le visiteur y retrouve d'abord le mot sur lequel il a cliqué, puis ce que la référence permet d'explorer — et il comprend en un regard pourquoi on la lui propose, sans lire une phrase. */ .rc-coches{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px} .rc-coches li{position:relative;padding-left:27px;font-size:15.5px; line-height:1.45;color:var(--ink)} .rc-coches li::before{content:"";position:absolute;left:2px;top:.42em; width:11px;height:6px;border-left:1.8px solid var(--gold); border-bottom:1.8px solid var(--gold);transform:rotate(-45deg)} .rc-coches li:first-child{font-weight:500} .rc-why-txt--fin{margin-top:16px;color:var(--muted)} .rc-why-plus{margin:16px 0 0} .rc-why-plus a{color:var(--accent-txt);font-size:14px; text-underline-offset:4px;text-decoration-thickness:1px} @media (max-width:700px){ .rc-coches li{font-size:14.5px;padding-left:24px} } @media (max-width:700px){ .rc-why-txt{font-size:14px} .rc-axes li{font-size:13px;padding:8px 13px} } @media (max-width:700px){ .rc-chapo{font-size:13.5px;margin-bottom:14px} .rc-bloc--why .rc-why{font-size:14px} } .rc-vide{max-width:46ch} .rc-guard{margin:clamp(26px,3.4vw,40px) 0 0;padding-top:16px; border-top:1px solid var(--line);font-size:12.5px;line-height:1.6; color:var(--faint);max-width:70ch} .rc-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0} /* ========================================================================== L'APPEL AU BILAN, SUR L'ACCUEIL — COURT ET COMMERCIAL ========================================================================== */ .reco-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(124,77,255,.07),rgba(124,77,255,0))} .reco-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px); flex-wrap:wrap;padding:clamp(30px,4.4vw,58px) 0} .reco-txt{max-width:52ch} .reco-txt h2{font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em; margin:6px 0 10px;font-weight:400} .reco-txt p{margin:0;color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.55} .reco-band .btn{min-height:52px;padding:15px 26px;font-size:11.5px} @media (max-width:700px){ .reco-in{flex-direction:column;align-items:flex-start} .reco-band .btn{width:100%;justify-content:center} } /* ========================================================================== L'ESPACE CLIENT Rien d'animé, rien de lourd : c'est un écran qu'on ouvre pour vérifier une commande, pas une page de découverte. La priorité est la lisibilité et le pouce — un client consulte sa facture depuis son téléphone. ========================================================================== */ .acc-duo{display:grid;gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:clamp(20px,3vw,34px)} .acc-carte{border:1px solid var(--line);border-radius:18px; padding:clamp(20px,2.6vw,30px);background:rgba(255,255,255,.015); display:flex;flex-direction:column;gap:14px} .acc-carte h2{margin:0 0 2px;font-size:clamp(17px,1.8vw,21px);font-weight:400} .acc-carte label{display:flex;flex-direction:column;gap:6px; font-size:12.5px;letter-spacing:.04em;color:var(--muted)} .acc-carte input[type="email"],.acc-carte input[type="password"],.acc-carte input[type="text"], .acc-carte input:not([type]){background:rgba(255,255,255,.03);border:1px solid var(--line); border-radius:11px;padding:12px 14px;color:var(--ink);font-size:15px; min-height:46px;box-sizing:border-box;width:100%} .acc-carte input:focus-visible{outline:2px solid var(--accent-txt);outline-offset:1px} .acc-carte small{color:var(--faint);font-size:12px} .acc-2col{display:grid;gap:12px;grid-template-columns:1fr 1fr} @media (max-width:520px){ .acc-2col{grid-template-columns:1fr} } /* LA CASE ET SON TEXTE SE LISENT ENSEMBLE. Une case à cocher dont le libellé part à la ligne suivante se coche sans être lue — et un consentement qu'on ne lit pas n'en est pas un. */ .acc-case{flex-direction:row;align-items:flex-start;gap:10px; color:var(--ink);font-size:13.5px;line-height:1.5;letter-spacing:0} .acc-case input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent)} .acc-err{margin:0;color:#ff9a8a;font-size:13.5px;line-height:1.5} /* Le même emplacement porte aussi les avis — un courriel envoyé, un mot de passe changé. Ce ne sont pas des échecs, ils ne s'affichent donc pas en rouge. */ .acc-err--ok{color:var(--accent-txt)} /* UN LIEN RESTE UN LIEN, MAIS IL SE TOUCHE. « Mot de passe oublié » faisait 22 px de haut : sur un téléphone, c'est la moitié d'un pouce, et c'est le lien dont on a le plus besoin quand on est déjà agacé. Le texte ne change pas d'allure — c'est la zone sensible qui s'étend, par du remplissage vertical compensé par une marge négative pour que la mise en page reste identique. */ .acc-lien{background:none;border:0;color:var(--accent-txt); font-size:13.5px;cursor:pointer;text-align:left;text-decoration:underline; text-underline-offset:3px;padding:11px 0;margin:-11px 0; min-height:44px;box-sizing:content-box} .acc-lien[disabled]{opacity:.5;cursor:default} .acc-tete{display:flex;align-items:flex-start;justify-content:space-between; gap:18px;flex-wrap:wrap} .acc-bloc{margin-top:clamp(28px,3.6vw,46px)} .acc-bloc > h2{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 14px} .acc-vide{color:var(--muted);font-size:14px;line-height:1.6;max-width:62ch;margin:0} .acc-table{width:100%;border-collapse:collapse;font-size:14px} .acc-table th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);padding:0 12px 10px 0; border-bottom:1px solid var(--line)} .acc-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line); vertical-align:top;color:var(--ink)} .acc-etat{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent-txt)} /* SUR TÉLÉPHONE, UN TABLEAU DEVIENT UNE LISTE. Quatre colonnes dans 390 px produisent des colonnes de trois caractères ou un défilement horizontal ; chaque ligne devient donc un bloc, et chaque cellule porte son libellé. */ @media (max-width:640px){ .acc-table,.acc-table tbody,.acc-table tr,.acc-table td{display:block;width:100%} .acc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .acc-table tr{border-bottom:1px solid var(--line);padding:12px 0} .acc-table td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px} .acc-table td::before{content:attr(data-l);color:var(--faint);font-size:11px; letter-spacing:.12em;text-transform:uppercase;flex:none} } .acc-infos{display:grid;gap:12px;margin:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))} .acc-infos dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin:0 0 3px} .acc-infos dd{margin:0;color:var(--ink);font-size:15px} /* Le titre permanent de l'espace client, et les sous-titres des blocs. Voir tools/build-pages.py : le h1 vit hors des trois états pour que la hiérarchie reste continue quel que soit celui qui est visible. */ .acc-titre{margin-bottom:clamp(14px,2vw,22px)} .acc-h2{font-size:clamp(15px,1.7vw,19px);font-weight:400;color:var(--muted); line-height:1.55;max-width:62ch;margin:0} .pg-h2-hello{font-size:clamp(22px,2.8vw,32px);font-weight:200;margin:0; letter-spacing:-.02em} .acc-bloc > h3{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 14px} /* LE DÉTAIL D'UNE COMMANDE, OUVERT SOUS SA LIGNE. Pas une page de plus : sur un téléphone, une page de plus est un retour de plus, et le contenu tient en quelques lignes. Le détail hérite donc de la même trame que le tableau — il doit se lire comme la suite de la ligne, pas comme un encadré rapporté. */ .acc-detail-ligne > td{padding:0;border-bottom:1px solid var(--line)} .acc-detail{padding:16px 0 20px;display:grid;gap:14px; font-size:14px;line-height:1.6;color:var(--ink)} .acc-detail h4{font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:0} .acc-detail-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0} .acc-detail-tete b{font-weight:400;letter-spacing:.04em} .acc-detail-tete span{color:var(--muted);font-size:13px} .acc-lignes{list-style:none;margin:0;padding:0;display:grid;gap:9px} .acc-lignes li{display:grid;gap:2px 14px;align-items:baseline; grid-template-columns:1fr auto} .acc-lignes li b{font-weight:400} .acc-lignes li span{color:var(--muted);font-size:13px} /* La description passe sous le nom, le montant reste à droite : une ligne de commande se lit d'abord par ce qu'elle contient, ensuite par son montant. */ .acc-lignes li > span:not(.num){grid-column:1;grid-row:2} .acc-lignes .num{grid-column:2;grid-row:1/span 2;align-self:center; font-family:"JetBrains Mono";font-size:13px;color:var(--ink);white-space:nowrap} .acc-adr{margin:0;color:var(--muted);line-height:1.65} /* LES TOTAUX SONT CEUX DE LA COMMANDE, jamais recalculés ici — voir assets/js/vp-compte.js. L'alignement en colonne de droite sert seulement à les rendre comparables à l'œil. */ .acc-tot{margin:0;display:grid;gap:7px;max-width:420px} .acc-tot > div{display:flex;justify-content:space-between;gap:18px} .acc-tot dt{margin:0;color:var(--muted)} .acc-tot dd{margin:0;font-family:"JetBrains Mono";font-size:13px;white-space:nowrap} .acc-tot-final{padding-top:8px;border-top:1px solid var(--line)} .acc-tot-final dt{color:var(--ink)} .acc-tot-final dd{color:var(--accent-txt)} .acc-detail-pdf{margin:0} .acc-detail-pdf .pg-btn{width:auto} @media (max-width:640px){ /* Le tableau devient une liste au-dessus ; la cellule de détail, elle, ne doit pas hériter de la mise en ligne libellé/valeur. */ .acc-detail-ligne > td{display:block;padding:0} .acc-detail-ligne > td::before{content:none} .acc-tot{max-width:none} } /* ========================================================================== LE TUNNEL DE COMMANDE Cinq étapes, une seule visible. La mise en page est volontairement pauvre : à cet endroit le client ne regarde plus la marque, il relit son adresse. ========================================================================== */ .cmd-h2{font-size:clamp(17px,1.9vw,22px);font-weight:400;margin:0 0 6px} .cmd-h2:focus-visible{outline:2px solid var(--accent-txt);outline-offset:4px} .cmd-h3{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:26px 0 12px} /* LE FIL D'ÉTAPES DIT OÙ L'ON EST ET CE QU'IL RESTE. Un tunnel sans repère donne l'impression de ne jamais finir, et c'est là qu'on abandonne. */ .cmd-fil{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 clamp(22px,3vw,34px); padding:0;font-size:12.5px;color:var(--faint)} .cmd-fil-item{display:flex;align-items:center;gap:7px;letter-spacing:.03em} .cmd-fil-item span{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-family:"JetBrains Mono";font-size:11px} .cmd-fil-item.on{color:var(--ink)} .cmd-fil-item.on span{border-color:var(--accent-txt);color:var(--accent-txt)} .cmd-fil-item.fait{color:var(--muted)} .cmd-fil-item.fait span{border-color:var(--muted)} .cmd-etape{display:flex;flex-direction:column;gap:14px;max-width:720px} .cmd-grille{display:grid;gap:12px;grid-template-columns:1fr 1fr} /* Deux colonnes tiennent au-delà de 560 px, pas en dessous : un champ « Adresse » de 140 px n'est pas un champ, c'est une contrainte. */ @media (max-width:560px){ .cmd-grille{grid-template-columns:1fr} } .cmd-champ{display:flex;flex-direction:column;gap:6px; font-size:12.5px;letter-spacing:.04em;color:var(--muted)} .cmd-champ:first-child,.cmd-champ:nth-child(2){grid-column:1 / -1} .cmd-champ input{background:rgba(255,255,255,.03);border:1px solid var(--line); border-radius:11px;padding:12px 14px;color:var(--ink);font-size:15px; min-height:46px;box-sizing:border-box;width:100%} .cmd-champ input:focus-visible{outline:2px solid var(--accent-txt);outline-offset:1px} .cmd-aide{margin:0;color:var(--faint);font-size:12px;line-height:1.6;max-width:62ch} .cmd-note{margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:62ch} .cmd-err{margin:0;color:#ff9a8a;font-size:13.5px;line-height:1.5} /* UNE CASE À COCHER FAIT 18 px ; LE POUCE, LUI, EN DEMANDE 44. La zone sensible est le libellé entier, et sur une ligne il ne mesurait que 23 px — sur la case qui engage l'acceptation des mentions réglementaires. Le remplissage vertical est compensé par une marge négative : la zone s'agrandit, la mise en page ne bouge pas. */ .cmd-case{display:flex;flex-direction:row;align-items:flex-start;gap:10px; color:var(--ink);font-size:13.5px;line-height:1.5; padding:12px 0;margin:-12px 0;min-height:44px;box-sizing:content-box} .cmd-case input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent)} .cmd-lien{color:var(--accent-txt);text-underline-offset:3px} .cmd-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px} /* LE BOUTON QUI AVANCE PASSE EN PREMIER SUR TÉLÉPHONE. Le pouce tombe en bas de l'écran : c'est « Continuer » qui doit s'y trouver, pas « Retour ». */ @media (max-width:520px){ .cmd-nav{flex-direction:column-reverse} .cmd-nav .pg-btn{width:100%} } .cmd-ligne{display:grid;grid-template-columns:1fr auto auto;gap:8px 18px;align-items:baseline; padding:13px 0;border-bottom:1px solid var(--line)} .cmd-ligne small{display:block;color:var(--faint);font-size:12px;margin-top:3px} .cmd-ligne-qte{color:var(--muted);font-size:13px;white-space:nowrap} @media (max-width:520px){ .cmd-ligne{grid-template-columns:1fr auto} .cmd-ligne-qte{grid-column:1} } .cmd-tot{margin:14px 0 0} .cmd-tot div{display:flex;justify-content:space-between;gap:18px;padding:6px 0} .cmd-tot dt,.cmd-tot dd{margin:0} .cmd-connecte{margin:0;font-size:14px;color:var(--ink)} .cmd-recap{margin:0} .cmd-recap div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:8px 20px; padding:11px 0;border-bottom:1px solid var(--line)} .cmd-recap dt{margin:0;color:var(--faint);font-size:11px;letter-spacing:.12em; text-transform:uppercase} .cmd-recap dd{margin:0;color:var(--ink);font-size:14px;line-height:1.6} @media (max-width:520px){ .cmd-recap div{grid-template-columns:1fr;gap:4px} } /* LES MENTIONS RÉGLEMENTAIRES SE LISENT. Elles ne sont ni repliées, ni en petits caractères gris : ce sont elles que le client accepte juste après. */ .cmd-mention{border:1px solid var(--line);border-left-width:3px;border-radius:12px; padding:13px 15px;margin:0 0 10px;background:rgba(255,255,255,.015)} .cmd-mention strong{display:block;font-weight:400;font-size:13.5px;margin-bottom:4px} .cmd-mention p{margin:0;color:var(--muted);font-size:13px;line-height:1.6} .cmd-mention--critical{border-left-color:var(--accent-txt)} .cmd-numero{margin:0 0 10px;font-size:14px;color:var(--muted)} .cmd-numero strong{color:var(--ink);font-family:"JetBrains Mono";letter-spacing:.06em} /* ========================================================================== ESPACE PARTENAIRE Des chiffres, pas une vitrine : ils viennent tous du serveur, et le bloc n'apparaît que pour un partenaire. ========================================================================== */ .aff-tete{margin:0 0 14px;color:var(--muted);font-size:13px} .aff-liens{display:flex;flex-direction:column;gap:8px;margin:0 0 18px} .aff-lien{display:flex;align-items:center;gap:12px;flex-wrap:wrap; border:1px solid var(--line);border-radius:12px;padding:10px 14px} .aff-lien code{font-family:"JetBrains Mono";font-size:12px;letter-spacing:.08em;color:var(--accent-txt)} .aff-url{color:var(--muted);font-size:12.5px;word-break:break-all;flex:1 1 220px} .aff-kpis{display:grid;gap:12px;margin:0 0 8px; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))} .aff-kpi{border:1px solid var(--line);border-radius:14px;padding:13px 15px} /* UN LIBELLÉ D'INDICATEUR SE REPLIE PLUTÔT QUE D'ÊTRE COUPÉ. La cellule fait 160 px au minimum, moins 30 px de marge intérieure : environ 130 px pour le libellé. « Panier moyen » y tient. « Durchschnittsbestellung » fait 22 caractères en mono espacée sous `letter-spacing:.12em`, soit près de 190 px — et comme c'est UN SEUL MOT, il ne peut se replier nulle part : il débordait de 65 px à 768 et de 57 px à 1440, et se faisait couper. Mesuré sur le tableau de bord partenaire allemand, dans deux de ses états. `anywhere` ne coupe le mot que lorsqu'il n'y a pas d'autre solution, et il compte dans le calcul de la largeur minimale — ce que `break-word` ne fait pas. Un libellé sur deux lignes se lit ; un libellé tronqué, non. Rien ne change dans les six autres langues, où les libellés tiennent ou se replient déjà sur une espace. */ .aff-kpi dt{margin:0 0 5px;color:var(--faint);font-size:11px;letter-spacing:.12em; text-transform:uppercase;overflow-wrap:anywhere} .aff-kpi dd{margin:0;color:var(--ink);font-size:clamp(16px,2vw,19px); font-family:"JetBrains Mono";letter-spacing:.02em} .aff-h4{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);font-weight:400;margin:24px 0 12px} /* ========================================================================== FICHE PRODUIT — LA PREUVE SOCIALE SOUS LE NOM, ET LA SCIENCE REPLIÉE ========================================================================== */ /* DEUX LIGNES, ET LE LIBELLÉ DIT LAQUELLE. La note Trustpilot est celle de la MARQUE : posée nue sous le nom d'un peptide, elle se lirait comme la note de ce peptide. Le libellé n'est donc pas une précaution de style, c'est ce qui rend la ligne honnête. */ .pg-social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0} .pg-social-l{color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .pg-social .tp{transform:none} #pgRv{margin-top:8px} #pgRv .rv-mini{margin:0;font-size:13.5px;color:var(--muted)} /* LA SCIENCE EXACTE, DERRIÈRE UN CLIC — PAS DERRIÈRE UNE PORTE DÉROBÉE. Le replié doit se voir et s'ouvrir sans hésitation : c'est un choix de lecture offert au visiteur, pas une information qu'on range. */ .pg-sci-plus{border:1px solid var(--line);border-radius:16px; padding:2px 18px;background:rgba(255,255,255,.015)} .pg-sci-plus > summary{cursor:pointer;padding:16px 0;list-style:none; font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--accent-txt)} .pg-sci-plus > summary::-webkit-details-marker{display:none} .pg-sci-plus > summary::after{content:"+";float:right;font-size:15px;line-height:1} .pg-sci-plus[open] > summary::after{content:"–"} .pg-sci-plus > summary:focus-visible{outline:2px solid var(--accent-txt);outline-offset:3px} .pg-sci-corps{padding-bottom:8px} /* Le lien de SOURCE d'une carte de preuve : 18 px de haut. C'est le lien le plus important de la page — celui qui permet d'aller vérifier à la source — et c'était le plus difficile à atteindre au doigt. La zone monte à 44 px ; la taille du texte, elle, ne change pas. */ @media (pointer: coarse){ .ev-foot .ev-link{display:inline-flex;align-items:center;min-height:44px} } /* ========================================================================== CE QU'ON AMÈNE EN HAUT DE L'ÉCRAN S'ARRÊTE SOUS L'EN-TÊTE, PAS DESSOUS. L'en-tête des pages stables est COLLÉ (`.pg-top`, position:sticky, 68 px). Trois endroits du site appellent `scrollIntoView({block:"start"})` — le changement d'étape du tunnel de commande, le résultat du bilan, la navigation du contrôle de lot — et « start » veut dire « bord supérieur au bord supérieur de la fenêtre » : les 68 premiers pixels de la cible passaient DERRIÈRE l'en-tête. Sur un téléphone de 844 px de haut, ce sont le titre de l'étape et l'indicateur de progression qui disparaissaient à chaque étape du tunnel — c'est-à-dire au moment précis où le client a besoin de savoir où il en est. `scroll-margin-top` répare les trois d'un coup, et aussi les ancres `#…` : c'est le navigateur qui décale, pas un calcul en JavaScript à refaire à chaque appel. ========================================================================== */ #cmdTunnel,#recoQ,#recoR,.pg-sec[id],[id]:target{ scroll-margin-top:calc(var(--nav) + 14px); } /* ========================================================================== DEVENIR PARTENAIRE, ET SE FAIRE PAYER Un client qui n'est pas partenaire ne voyait qu'une phrase : « vous n'avez pas de compte partenaire ». C'est exact et c'est une impasse. Il voit maintenant une PROPOSITION — et un formulaire qui ne demande que l'acceptation des conditions, puisque le taux n'est pas négocié ici. ========================================================================== */ .aff-join{display:grid;gap:12px;max-width:62ch} .aff-join-lead{margin:0;color:var(--muted);font-size:14px;line-height:1.65} .aff-join-form{display:grid;gap:14px;margin-top:4px;justify-items:start} .aff-join-form .acc-case{max-width:62ch} .aff-join-form .pg-btn{width:auto} /* Le versement : un montant, un bouton, et la RAISON quand il est inutilisable. Un bouton grisé sans explication se lit comme une panne. */ .aff-payout-note{margin:0;color:var(--faint);font-size:12.5px;line-height:1.6;max-width:62ch} [data-payout][disabled]{opacity:.45;cursor:default} [data-payout-raison]{margin:0} @media (max-width:640px){ .aff-join-form .pg-btn,[data-payout]{width:100%;justify-content:center} } /* NIVEAU 0 DE LA FICHE — ce qu'on comprend en trois secondes. Une phrase, puis trois lignes. Le corps est plus grand que le reste de la page : c'est le seul bloc qu'un visiteur pressé lira en entier, et il doit se lire sans effort. */ .pg-first{padding-top:0} .pg-plain{margin:0;color:var(--ink);font-size:clamp(16px,1.9vw,19px); line-height:1.62;max-width:64ch} .pg-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;max-width:64ch} .pg-points li{position:relative;padding-left:18px;color:var(--muted); font-size:15px;line-height:1.55} .pg-points li::before{content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--accent-txt)} @media (max-width:640px){ .pg-plain{font-size:16px} .pg-points li{font-size:14.5px} } /* LA PORTÉE D'UN AVIS EST ÉCRITE, JAMAIS DEVINÉE. Un avis de marque affiché sur une fiche produit doit dire qu'il est de marque — c'est exactement la confusion que la plupart des boutiques entretiennent, et elle se répare avec une ligne de texte. */ .rv-scope{margin:0 0 14px;color:var(--faint);font-family:"JetBrains Mono"; font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6} .rv-mini--marque{display:grid;gap:4px;margin:10px 0 0;max-width:56ch} /* 11 px : le plancher du dépôt, et il vaut aussi sur grand écran. La portée d'un avis est précisément ce qu'il ne faut pas rendre illisible. */ .rv-mini-scope{color:var(--faint);font-family:"JetBrains Mono";font-size:11px; letter-spacing:.12em;text-transform:uppercase} /* LA CITATION N'EST PAS UNE ÉTIQUETTE : elle hérite de `.rv-mini`, qui met en capitales avec un interlettrage large — une phrase de client lue en capitales espacées ne ressemble plus à une phrase de client. */ /* `font-family:inherit` HÉRITAIT DU MONO, pas du corps de la page : la citation se lisait en chasse fixe italique, c'est-à-dire comme un extrait de code. La pile est donc nommée. */ .rv-mini--marque q{color:var(--muted);font-size:14px;line-height:1.55;font-style:italic; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; text-transform:none;letter-spacing:0} .rv-mini--marque q::before{content:"« "} .rv-mini--marque q::after{content:" »"} /* LE RENVOI VERS LES AVIS EST UN LIEN QU'ON TOUCHE. 23 px de haut au doigt, c'est un lien qu'on rate — et celui-ci mène à la preuve sociale complète, juste sous le prix. La zone monte à 44 px ; le texte ne bouge pas. */ .rv-mini--marque a{color:var(--accent-txt);display:inline-flex;align-items:center; min-height:44px} /* ========================================================================== LA PROPOSITION DE VALEUR, SOUS LE NOM. Un nom de molécule n'est pas une promesse : « CJC-1295 » ne dit rien à qui ne le connaît pas, et c'est pourtant le premier mot d'une page qui vend. Cette ligne est la seule chose lisible, à cet endroit, par quelqu'un qui arrive de nulle part. Elle est donc plus grande que le corps de texte et plus petite que le titre — c'est un sous-titre, pas un second titre. ========================================================================== */ .pg-head{margin:14px 0 0;max-width:34ch; font-size:clamp(17px,2.3vw,22px);line-height:1.32;letter-spacing:-.01em; color:var(--ink);font-weight:400} /* ========================================================================== L'OBJECTION, JUSTE AVANT LE PRIX. Le bloc doit se distinguer du corps de la page sans ressembler à un avertissement : ce n'est pas une mise en garde, c'est une conversation. D'où le fond à peine relevé, la barre champagne à gauche, et AUCUN rouge — la seule couleur d'alerte du site reste réservée aux mentions réglementaires, et la diluer ici les affaiblirait toutes les deux. ========================================================================== */ .pg-objection{border:1px solid var(--line);border-radius:20px; padding:26px 26px 22px;background:rgba(255,255,255,.017); max-width:64ch;position:relative;overflow:hidden} .pg-objection::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--accent-txt),transparent 70%);opacity:.55} .pg-obj-h{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:400} .pg-sec.pg-objection h2.pg-obj-h{font-size:11px;line-height:1.3;margin:0 0 14px} .pg-obj-q{margin:0 0 12px;color:var(--ink);max-width:56ch; font-size:clamp(16.5px,2.05vw,20px);line-height:1.42;letter-spacing:-.005em} .pg-obj-a{margin:0;color:var(--muted);font-size:15.5px;line-height:1.62;max-width:60ch} .pg-obj-rv:not(:empty){margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} @media (max-width:640px){ .pg-head{font-size:17.5px;max-width:none} /* Sur téléphone le cadre se resserre : 26 px de chaque côté sur 390 px de large, c'est un huitième de l'écran donné à une bordure. */ .pg-objection{padding:20px 18px 18px;border-radius:16px} .pg-obj-q{font-size:16.5px} .pg-obj-a{font-size:15px} } /* ========================================================================== LE FORMAT « CITATION » — UNE VOIX, PAS UN WIDGET Le vert Trustpilot ne sert qu'à deux choses : les étoiles et le logo. Le reste est NORYVA — noir, champagne, et l'espace qui va avec. Une carte verte posée au milieu d'une page noire et violette ne rassure pas : elle annonce qu'on est allé chercher la confiance ailleurs. La portée est écrite SOUS la citation, en petites capitales : elle doit être lisible sans voler la vedette à ce que le client a écrit. ========================================================================== */ .rv-cite{display:grid;gap:10px;max-width:56ch} .rv-cite-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* LE NOM « TRUSTPILOT », LU SUR LE FOND OÙ IL EST RÉELLEMENT POSÉ. `.rv-tp` est dessiné pour la CARTE d'avis, qui est claire (#f7f5f1) : le nom y est presque noir, comme Trustpilot le dessine, et c'est juste. La CITATION, elle, n'a pas de carte — elle est posée à même la page, donc sur le noir NORYVA. Le même presque-noir y devenait invisible : sur la page d'offres, la marque qui donne son poids à la phrase ne se voyait pas, et la capture le montrait là où le code ne le disait pas. L'étoile reste verte — c'est la seule couleur que Trustpilot impose. Seule la valeur du nom suit son fond. */ .rv-cite .rv-tp{color:var(--ink)} /* ET IL RESTE À CÔTÉ DES ÉTOILES. `margin-left:auto` est la mise en page de la CARTE : les étoiles à gauche, la marque à droite, le bord à bord d'un encadré de 320 px. Dans une citation posée sur 56 caractères de large, la même règle envoie le nom à près de mille pixels des étoiles au 768 et au 1440 — deux éléments qui disent la même chose, séparés par du vide. Ici ils se suivent. */ .rv-cite .rv-tp{margin-left:0} /* La citation de la page d'offres respire, et ne touche pas l'accroche qui la précède. Vide, elle ne prend aucune place : un emplacement de preuve sans preuve ne doit pas laisser un trou. */ #offProof:not(:empty),#catProof:not(:empty){margin-top:clamp(16px,2vw,22px)} .rv-cite-q{color:var(--ink);font-size:clamp(15.5px,1.85vw,17px);line-height:1.58; font-style:italic;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; margin:0;letter-spacing:0;text-transform:none} .rv-cite-q::before{content:"« "} .rv-cite-q::after{content:" »"} .rv-cite-scope{color:var(--faint);font-family:"JetBrains Mono";font-size:11px; letter-spacing:.12em;text-transform:uppercase;line-height:1.55} .rv-cite-a{color:var(--accent-txt);display:inline-flex;align-items:center; min-height:44px;font-size:13.5px} @media (max-width:640px){ /* §13-G : sur téléphone la preuve rassure sans casser le parcours. La citation reste une citation — elle ne devient jamais un bloc d'avis qui prend tout l'écran. */ .rv-cite{gap:8px} .rv-cite-q{font-size:15.5px} } /* Les deux micro-emplacements : le panier et le tunnel. Ils ne portent qu'une note — la marge les sépare de ce qui précède, rien de plus ne les décore. */ .cart-proof:not(:empty){margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)} .cmd-proof:not(:empty){margin:0 0 22px} .rc-proof:not(:empty){margin:28px 0 0} /* Le numéro de suivi mène au transporteur. 44 px de haut au doigt : c'est le lien qu'un client cherche depuis son téléphone, dans le couloir. */ .acc-suivi{color:var(--accent-txt);display:inline-flex;align-items:center; min-height:44px;text-underline-offset:3px} /* CE QUI EST COMPRIS, SUR LA CARTE DE FORMAT. Même registre que `.fmt-note` juste au-dessus : une information d'achat, en petit, qui ne crie pas. L'étiquette reprend la casse et l'espacement des libellés monospace du site — c'est le même rôle que le `
` de `.specs` dans le bloc « fiole ou stylo », donc la même forme. */ .fmt-compris{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5} .fmt-compris span:first-child{font-family:"JetBrains Mono";font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--faint); display:block;margin-bottom:3px}