/* ═══ lib/base.css ═══ */ /* design/lib/base.css — socle : fontes auto-hébergées, remise à zéro, primitives. Aucune valeur de couleur ni de taille en dur : tout vient de tokens/tokens.css. Soumis à la porte 2 (`node tools/gate-tokens.mjs`). */ /* ---------- Fontes auto-hébergées ------------------------------------------ JAMAIS d'@import depuis un CDN : il BLOQUE le rendu et ferait échouer le budget de performance. Les 4 fontes variables sont sous-ensemblées au français + la ponctuation de marque : 155 Ko servis au lieu de 3,2 Mo. `font-display: swap` garantit que le texte est lisible immédiatement. */ @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Jetons du socle ------------------------------------------------- `tokens/tokens.css` est GÉNÉRÉ depuis le thème + le design system : on ne l'édite pas. Les deux jetons ci-dessous n'appartiennent à aucune des deux sources — ce sont des décisions d'accessibilité, pas des décisions de marque — donc ils sont déclarés ici, avec leur norme. */ :root { --tap-min: 24px; /* plancher WCAG 2.2 SC 2.5.8 (AA). Visé : 44px. */ --tap-vise: 44px; /* SC 2.5.5 (AAA) — la cible confortable au pouce. */ /* Décalage haut des superpositions : un tiroir commence SOUS le bandeau d'annonce et l'en-tête épinglé, jamais par-dessus (règle 13, fiche 33). Nul par défaut ; le contexte le repose. Neuf composants le partagent. */ --tiroir-haut: 0px; } /* ---------- Remise à zéro ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { background: var(--bg-page); /* porcelaine — JAMAIS blanc pur */ color: var(--fg-1); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-relaxed); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ---------- Titres — Cormorant, jamais gras --------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-snug); } h1 { font-size: var(--fs-display); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h1); } h3 { font-size: var(--fs-h2); } h4 { font-size: var(--fs-h3); } /* Le glyphe € rend comme un « C » en Cormorant à taille d'affichage : il est TOUJOURS porté par la police de labeur. */ .euro, .prix { font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* ---------- Accessibilité --------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: var(--r-xs); } /* ⚠ `.sr-only` N'EST PAS EN POSITION ABSOLUE, et c'est délibéré. Le motif « visually-hidden » standard pose `position: absolute`. À l'intérieur d'un conteneur de défilement, ce texte s'ÉCHAPPE : faute d'ancêtre positionné, son bloc conteneur devient le bloc conteneur initial, donc il se pose aux coordonnées du DOCUMENT et non du rail qui devrait le rogner. Mesuré le 2026-08-22, et c'est la panne la plus coûteuse à diagnostiquer de la journée : la rangée de puces de filtres défilait correctement (`overflow-x: auto`, contenu 1192 px dans 358), mais les huit « Retirer ce filtre » se posaient à x = 1176 dans le document. La page entière défilait horizontalement — 978 px pour 390 — c'est-à-dire la plainte n°1 du fondateur, causée par du texte invisible. Le diagnostic a été long parce que chaque élément mesurait juste : le rail était bien clippé, les tiroirs `fixed` semblaient coupables et ne l'étaient pas, et masquer les superpositions ne changeait rien. Seule une bissection enfant par enfant a désigné la vraie cause. La variante ci-dessous reste DANS LE FLUX : 1×1 px, rognée. Elle est lue par les lecteurs d'écran exactement pareil, et elle ne peut plus s'échapper de quoi que ce soit. */ .sr-only { display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Plancher tactile WCAG 2.2 SC 2.5.8. Le constat B5 a relevé 106 cibles sous le plancher, dont ~96 dues à un `.link-quiet` sans min-height. */ :where(a, button, [role="button"], summary, label) { min-height: var(--tap-min); } /* ---------- Primitives de mise en page -------------------------------------- */ .bande { width: 100%; padding-inline: var(--sp-4); } .bande > * { max-width: var(--container); margin-inline: auto; } /* ⚠ `minmax(0, 1fr)` N'EST PAS DÉCORATIF. Une grille sans piste déclarée en crée une implicite `auto`, qui se dimensionne à la **contribution max-content** de son contenu. Un enfant qui sait défiler (`overflow-x: auto`) a beau se rogner à l'écran : sa CONTRIBUTION reste la somme de ses enfants, donc la piste s'élargit et la page défile. Mesuré le 2026-08-22 : la page collection défilait horizontalement, 720 px pour 390 d'écran, à cause du rail des rayons dans une grille de page. Le rail défilait parfaitement — c'est la piste au-dessus qui grossissait. C'est le même mécanisme que `min-width: auto` sur un enfant de flex, et le cousin du piège B1. */ .pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .mesure { max-width: 68ch; } /* ═══ lib/primitives.css ═══ */ /* design/lib/primitives.css — le vocabulaire partagé de la bibliothèque. --------------------------------------------------------------------------- Pourquoi ce fichier existe. Six familles de composants construites en parallèle produisent six dialectes : six boutons, six champs, six façons de dire « vide ». La cohérence ne se surveille pas, elle se rend structurelle — on écrit le vocabulaire UNE fois, et les composants n'ont plus rien à réinventer. C'est la même logique que « la bibliothèque avant les pages », appliquée un cran plus bas. Règles dures : zéro littéral (porte 2), zéro emoji, tout en jetons. Tout ce qui est ici est PORTÉ EN THÈME. Rien de la maquette n'y entre. */ /* ═══════════════════════════════════════════════════════════════════════════ 1. Typographie utilitaire ═══════════════════════════════════════════════════════════════════════════ */ .etiquette { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-3); } .chapo { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--fg-2); } .discret { font-size: var(--fs-body-sm); color: var(--fg-2); } .legende { font-size: var(--fs-caption); color: var(--fg-3); } .donnee { font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* Le prix. Format français NON NÉGOCIABLE : « 599,00 € », jamais « €599.00 ». Le glyphe € rend comme un « C » en Cormorant à taille d'affichage : le prix est donc TOUJOURS en police de labeur, même dans un contexte d'affichage. */ .prix { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-normal); /* Un montant ne se coupe JAMAIS entre le nombre et le symbole. Vu à l'écran le 2026-08-22 : « + 20,00 » sur une ligne et « € » seul sur la suivante. Règle de marque, pas décision de composant — le lot E a dû l'écrire cinq fois avant qu'elle ne monte ici. */ white-space: nowrap; } .prix--barre { color: var(--fg-3); text-decoration: line-through; } /* ═══════════════════════════════════════════════════════════════════════════ 2. Boutons Un seul composant, quatre tons, trois tailles. Le plancher tactile est garanti ici et nulle part ailleurs — constat B5 : 106 cibles sous 24 px, dont ~96 dues à un lien discret sans `min-height`. ═══════════════════════════════════════════════════════════════════════════ */ .b { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap-vise); padding: var(--sp-3) var(--sp-5); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 500; line-height: var(--lh-snug); text-align: center; text-decoration: none; cursor: pointer; background: none; color: inherit; transition: background-color var(--dur-sm) var(--ease-standard), border-color var(--dur-sm) var(--ease-standard), color var(--dur-sm) var(--ease-standard); } .b--principal { background: var(--c-soft-amber); color: var(--c-deep-graphite); } .b--principal:hover { background: var(--fg-accent); } .b--secondaire { border-color: var(--fg-1); color: var(--fg-1); } .b--secondaire:hover { background: var(--bg-subtle); } .b--discret { color: var(--fg-2); padding-inline: var(--sp-2); } .b--discret:hover { color: var(--fg-1); } .b--sombre { background: var(--bg-inverse); color: var(--fg-on-dark); } .b--pleine { width: 100%; } .b--sm { min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-caption); } .b--lg { min-height: var(--sp-7); font-size: var(--fs-body); } .b[disabled], .b[aria-disabled="true"] { background: var(--bg-subtle); color: var(--fg-3); border-color: transparent; cursor: not-allowed; } /* Le bouton icône seul. Il DOIT porter un intitulé accessible (`aria-label`) et respecter le plancher tactile même si le glyphe fait 20 px. */ .b-icone { display: inline-grid; place-items: center; min-width: var(--tap-vise); min-height: var(--tap-vise); border: 0; border-radius: var(--r-pill); background: none; color: inherit; cursor: pointer; } .b-icone:hover { background: var(--bg-subtle); } /* ═══════════════════════════════════════════════════════════════════════════ 3. Icônes Un trait, jamais un aplat ; 1,5 px pour rester lisible à 20 px. `currentColor` partout — une icône ne décide jamais de sa couleur. ═══════════════════════════════════════════════════════════════════════════ */ .i { width: var(--sp-5); height: var(--sp-5); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .i--sm { width: var(--sp-4); height: var(--sp-4); } .i--lg { width: var(--sp-6); height: var(--sp-6); } /* ═══════════════════════════════════════════════════════════════════════════ 4. Surfaces ═══════════════════════════════════════════════════════════════════════════ */ .panneau { background: var(--bg-surface); border: 1px solid var(--line-hair); border-radius: var(--r-card); padding: var(--sp-5); } .panneau--calme { background: var(--bg-subtle); border-color: transparent; } .panneau--chaud { background: var(--bg-warm); border-color: transparent; } .panneau--sombre { background: var(--bg-inverse); color: var(--fg-on-dark); border-color: transparent; } .filet { border: 0; border-top: 1px solid var(--line-hair); margin: var(--sp-5) 0; } /* ═══════════════════════════════════════════════════════════════════════════ 5. Formulaires ═══════════════════════════════════════════════════════════════════════════ */ .champ { display: grid; gap: var(--sp-2); } .champ__label { font-size: var(--fs-body-sm); font-weight: 500; color: var(--fg-1); } .champ__aide { font-size: var(--fs-caption); color: var(--fg-3); } .champ__erreur { font-size: var(--fs-caption); color: var(--fg-alert); display: flex; align-items: center; gap: var(--sp-1); } .saisie { min-height: var(--tap-vise); width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); color: var(--fg-1); border: 1px solid var(--line-rule); border-radius: var(--r-sm); font-size: var(--fs-body); } .saisie::placeholder { color: var(--fg-3); } .saisie[aria-invalid="true"] { border-color: var(--fg-alert); } /* Case et bouton radio dessinés — la case native ne se met pas en forme de façon fiable, et sa cible est très sous le plancher tactile. */ .choix { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap-vise); padding: var(--sp-2) 0; cursor: pointer; } .choix input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choix__marque { flex: none; width: var(--sp-5); height: var(--sp-5); margin-top: var(--sp-1); border: 1px solid var(--line-rule); border-radius: var(--r-xs); display: grid; place-items: center; color: transparent; transition: background-color var(--dur-xs) var(--ease-standard); } .choix--radio .choix__marque { border-radius: var(--r-pill); } .choix input:checked + .choix__marque { background: var(--fg-1); border-color: var(--fg-1); color: var(--fg-on-dark); } .choix input:focus-visible + .choix__marque { outline: 2px solid var(--line-focus); outline-offset: 2px; } /* L'interrupteur — la bascule des préférences de consentement. Promu depuis `panneau-preferences.css` : deux lots l'ont demandé, et un interrupteur est un contrôle de formulaire, pas une pièce de composant. Trois signaux redondants, et c'est délibéré : la POSITION de la pastille, le CONTRASTE du rail (gris neutre éteint, encre allumé), et le mot à côté (« Activé » / « Désactivé »). Osano fait l'inverse — éteint en violet saturé, allumé en vert saturé — deux teintes fortes dont aucune ne se lit comme « éteint ». Un interrupteur qui ne se lit que par la couleur ne se lit pas. */ .interrupteur { position: relative; flex: none; width: var(--sp-7); height: var(--sp-5); border-radius: var(--r-pill); background: var(--bg-subtle); box-shadow: var(--sh-inset-hair); transition: background-color var(--dur-sm) var(--ease-standard); } .interrupteur::after { content: ""; position: absolute; top: var(--sp-1); left: var(--sp-1); width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-pill); background: var(--bg-surface); box-shadow: var(--sh-1); transition: transform var(--dur-sm) var(--ease-standard); } input:checked ~ .interrupteur { background: var(--fg-1); } input:checked ~ .interrupteur::after { transform: translateX(var(--sp-5)); } input:focus-visible ~ .interrupteur { outline: 2px solid var(--line-focus); outline-offset: 2px; } input:disabled ~ .interrupteur { opacity: .5; } /* Sélecteur de quantité. Trois cibles côte à côte : chacune tient le plancher. */ .quantite { display: inline-flex; align-items: center; border: 1px solid var(--line-rule); border-radius: var(--r-pill); } .quantite button { min-width: var(--tap-vise); min-height: var(--tap-vise); border: 0; background: none; cursor: pointer; color: var(--fg-1); } .quantite output, .quantite input { min-width: var(--sp-7); text-align: center; font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* La fiche 34 exige un `` (la quantité se tape), pas seulement un `` : la primitive stylait l'un et pas l'autre. */ .quantite input { border: 0; background: none; padding: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 6. Pastilles et puces ═══════════════════════════════════════════════════════════════════════════ */ .pastille { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 500; background: var(--bg-subtle); color: var(--fg-2); } .pastille--intelligence { background: var(--bg-intelligence); color: var(--fg-data); } .pastille--alerte { background: var(--fg-alert); color: var(--fg-on-dark); } .pastille--accent { background: var(--bg-warm); color: var(--fg-1); } /* Une puce RETIRABLE (filtre actif) : le libellé et la croix forment une seule cible, jamais deux cibles de 16 px collées. */ .puce { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); border: 1px solid var(--line-rule); border-radius: var(--r-pill); font-size: var(--fs-caption); background: var(--bg-surface); cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ 7. Les états — vocabulaire commun, orthographe EXACTE `vide` · `chargement` · `erreur` · `long` · `rupture` · `succes` · `desactive` Un composant qui n'a qu'un état heureux est un composant à moitié fait. ═══════════════════════════════════════════════════════════════════════════ */ /* Vide. Jamais une zone blanche : une phrase qui dit quoi faire, et une issue. */ .etat-vide { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--fg-2); } .etat-vide__titre { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--fg-1); } /* Erreur. Elle DIT ce qui a échoué et propose l'action de reprise. */ /* Un lien DANS un état d'erreur reprend la couleur du texte : sans ça, il tombe sur le bleu par défaut du navigateur — relevé dans les huit composants du lot C, donc c'est un défaut de la bibliothèque, pas d'un composant. */ .etat-erreur a { color: var(--fg-1); } .etat-erreur { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-sm); background: var(--bg-subtle); color: var(--fg-1); border-left: 3px solid var(--fg-alert); } /* Chargement. Une ossature qui a la FORME du contenu attendu, pas un tourniquet : la page ne doit pas sauter quand le contenu arrive. */ /* ⚠ Le balayage est un FOND ANIMÉ, jamais un pseudo-élément translaté. Mesuré le 2026-08-22 : la première version posait un `::after` en `inset: 0` animé de `translateX(-100%)` à `translateX(100%)`. Chrome compte un descendant transformé dans la région de débordement défilable, donc `scrollWidth − clientWidth` valait la largeur entière de l'élément — et variait à chaque mesure selon la phase de l'animation (135, 148, 170, 85 px relevés sur une page identique). La sonde de recensement remontait deux `clipped-x` GRAVES, « contenu définitivement inaccessible », sur de la pure décoration. Un faux GRAVE est le pire défaut d'outillage possible ici : il envoie six lots corriger ce qui n'existe pas, et il noie les vrais. Un fond animé ne crée aucun débordement — c'est la même image, à zéro coût de mise en page. */ .ossature { border-radius: var(--r-xs); color: transparent; overflow: hidden; background-color: var(--bg-subtle); background-image: linear-gradient(90deg, transparent, var(--bg-surface), transparent); background-repeat: no-repeat; background-size: 200% 100%; animation: ossature-balayage var(--dur-xl) var(--ease-soft) infinite; } @keyframes ossature-balayage { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .ossature { animation: none; } } /* Rupture. Le composant reste lisible et achetable ailleurs — jamais un mur. */ .rupture { color: var(--fg-3); } .rupture .prix { text-decoration: none; } /* ═══════════════════════════════════════════════════════════════════════════ 8. Superpositions — tiroir et modale Mécanique partagée par le méga-menu, la recherche, le panier, les filtres, le tri, la capture d'e-mail, le lecteur vidéo et le guide de compatibilité. Écrite UNE fois : neuf composants ne peuvent plus diverger sur le z-index, le verrouillage du défilement ou la touche Échap. ═══════════════════════════════════════════════════════════════════════════ */ .voile { position: fixed; inset: 0; z-index: 80; background: var(--bg-inverse); opacity: 0; visibility: hidden; transition: opacity var(--dur-md) var(--ease-standard), visibility var(--dur-md); } [data-ouvert="oui"] > .voile, .voile[data-ouvert="oui"] { opacity: .45; visibility: visible; } /* `--tiroir-haut` : le décalage sous un bandeau d'annonce ou un en-tête épinglé. La règle 13 de la fiche 33 veut qu'un tiroir commence SOUS le bandeau, jamais par-dessus. Valeur nulle par défaut, posée par le contexte — partagée par les neuf superpositions au lieu d'être réécrite dans chacune. */ .tiroir { position: fixed; z-index: 90; top: var(--tiroir-haut); bottom: 0; right: 0; width: min(92vw, var(--container-narrow)); display: flex; flex-direction: column; background: var(--bg-page); color: var(--fg-1); transform: translateX(100%); transition: transform var(--dur-md) var(--ease-emerge); overscroll-behavior: contain; } .tiroir--gauche { right: auto; left: 0; transform: translateX(-100%); } .tiroir--bas { top: auto; left: 0; right: 0; width: auto; max-height: 88vh; transform: translateY(100%); border-radius: var(--r-xl) var(--r-xl) 0 0; } .tiroir[data-ouvert="oui"] { transform: none; } .tiroir__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-hair); flex: none; } .tiroir__corps { flex: 1; overflow-y: auto; padding: var(--sp-4); } .tiroir__pied { flex: none; padding: var(--sp-4); border-top: 1px solid var(--line-hair); background: var(--bg-surface); } .modale { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: var(--sp-4); pointer-events: none; } .modale[data-ouvert="oui"] { pointer-events: auto; } .modale__boite { width: min(100%, var(--container-narrow)); max-height: 88vh; overflow-y: auto; background: var(--bg-page); border-radius: var(--r-lg); padding: var(--sp-6); opacity: 0; transform: translateY(var(--sp-4)); transition: opacity var(--dur-md) var(--ease-emerge), transform var(--dur-md) var(--ease-emerge); } .modale[data-ouvert="oui"] .modale__boite { opacity: 1; transform: none; } /* Quand une superposition est ouverte, le fond ne défile plus. */ html[data-defilement="bloque"] { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ 9. Mises en page récurrentes ═══════════════════════════════════════════════════════════════════════════ */ .section { padding-block: var(--sp-8); } .section--serree { padding-block: var(--sp-6); } /* Même garde que `.pile` : sans piste déclarée, la piste implicite se dimensionne à la contribution max-content, et un rail qui défile élargit quand même la page. Voir la note de `base.css`. */ .grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rangee { display: flex; align-items: center; gap: var(--sp-3); } .rangee--entre { justify-content: space-between; } .pousse { margin-left: auto; } /* Le carrousel horizontal. ⚠ PIÈGE B1, la plainte n°1 du fondateur : JAMAIS de `min-width` sur le conteneur d'un `overflow-x: auto` — c'est ce qui fait déborder la page entière. La largeur se donne aux ENFANTS, jamais au rail. */ .rail { position: relative; /* ancêtre positionné : rien ne s'échappe du rail */ display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } /* Le débordement jusqu'au bord de l'écran est EXPLICITE, jamais par défaut. Il était dans `.rail` même : `padding-inline: var(--sp-4)` compensé par un `margin-inline` négatif de la même valeur. Ça ne marche que si le parent a exactement ce rembourrage-là. Dans un parent qui en a un autre, le rail dépasse — mesuré le 2026-08-22 sur la rangée de rayons de l'en-tête de collection : 425 px de document pour 390 d'écran, après correction du `.sr-only`. Un effet visuel ne doit pas être un piège silencieux. */ .rail--bord { padding-inline: var(--sp-4); margin-inline: calc(var(--sp-4) * -1); } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; flex: none; } /* Ratios d'image — la place est réservée AVANT le chargement, jamais de saut. */ .media { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--bg-subtle); } .media--carre { aspect-ratio: 1 / 1; } .media--portrait{ aspect-ratio: 4 / 5; } .media--paysage { aspect-ratio: 16 / 10; } .media > img, .media > video { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════════════ 10. Au-delà du téléphone Le prototype se juge à 390 px D'ABORD (99 % du trafic). Les points de rupture ÉLARGISSENT, ils ne redessinent pas. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 48rem) { .bande { padding-inline: var(--sp-6); } .section { padding-block: var(--sp-9); } .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .bande { padding-inline: var(--sp-7); } .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ═══ lib/components/app-compagnon.css ═══ */ /* FICHE 17 — application compagnon. --------------------------------------------------------------------------- Tout le composant tient sur une seule idée mesurée : « le piège est la capture centrée, entière, avec une ombre portée ». Dès que l'appareil tient tout entier dans le cadre avec de l'air autour, l'œil le lit comme une image d'illustration. Donc l'appareil est coupé DEUX fois — par le bas et par la droite — et les deux coupes viennent de marges négatives sous un `overflow: hidden`, jamais d'un rognage d'image. */ .c-app-compagnon { display: grid; gap: var(--sp-5); } /* Le panneau. Rayon 28 px (`--r-xl`), surface distincte de la porcelaine de page — jamais du blanc pur : sur `--bg-page`, un panneau blanc pur disparaît à six points d'écart et le bloc perd son cadre. */ .c-app-compagnon__panneau { background: var(--bg-subtle); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5) var(--sp-0); overflow: hidden; } .c-app-compagnon__texte { display: grid; gap: var(--sp-3); max-width: 30ch; } .c-app-compagnon__accroche { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-2); } .c-app-compagnon__accroche b { color: var(--fg-1); font-weight: 600; } .c-app-compagnon__lien { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap-min); color: var(--fg-1); font-size: var(--fs-body-sm); } /* ---------- L'appareil ------------------------------------------------------- La coupe par le BAS : marge basse négative, l'appareil sort du panneau. Elle suffit à casser le motif que la fiche désigne comme le piège — « la capture centrée, entière, avec de l'air autour » — et elle ne coûte rien : un débordement VERTICAL sous `overflow: hidden` n'est ni défilable ni signalé. ⚠ La coupe par la DROITE a été RETIRÉE le 2026-08-22, et c'est une mesure, pas un goût. Elle était obtenue par une marge droite de −96 px sous le `overflow: hidden` du panneau : la sonde de recensement a relevé cinq fois « clipped-x GRAVE — 72 px définitivement inaccessibles » sur ce seul composant, et elle avait raison. Ce n'était pas un artefact de mesure comme le balayage translaté du piège n°6 : 72 px du quatrième onglet étaient réellement hors d'atteinte. Aucune propriété CSS ne coupe horizontalement sans créer cette région — clip, hidden ou masque, il faut choisir entre trancher et ne rien rogner. L'appareil affleure donc le bord DROIT du panneau (marge négative égale au padding, au pixel), ce qui lui garde son air de sortir du cadre sans qu'un seul pixel de contenu soit perdu, et les quatre onglets tiennent en entier. ⚠ Le fondateur peut vouloir l'inverse — l'onglet tranché de la fiche, au prix d'un GRAVE assumé au recensement. C'est son arbitrage, pas le mien. */ .c-app-compagnon__appareil { margin: var(--sp-6) calc(var(--sp-5) * -1) calc(var(--sp-8) * -1) var(--sp-2); border: 2px solid var(--fg-1); border-radius: var(--r-xl); background: var(--fg-1); padding: var(--sp-2) var(--sp-2) var(--sp-0); box-shadow: var(--sh-2); } .c-app-compagnon__ecran { background: var(--bg-page); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sp-2) var(--sp-3) var(--sp-5); display: grid; gap: var(--sp-3); } /* La barre d'état, figée à une heure fixe — comme le 09:41 d'Apple. */ .c-app-compagnon__barre-etat { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-caption); font-family: var(--font-data); color: var(--fg-1); padding-inline: var(--sp-2); } .c-app-compagnon__signal { width: var(--sp-6); height: var(--sp-2); border-radius: var(--r-pill); background: var(--fg-1); opacity: .35; } /* Les onglets. Ils tiennent MAINTENANT en entier dans la largeur de l'écran — c'est la condition pour que plus rien ne soit rogné (voir la note de l'appareil ci-dessus) : la taille descend d'un cran et l'écart se resserre, ce qui est de toute façon la vraie mesure d'une barre d'onglets de téléphone. */ .c-app-compagnon__onglets { display: flex; gap: var(--sp-3); padding-block: var(--sp-1); border-bottom: 1px solid var(--line-hair); } .c-app-compagnon__onglet { font-size: var(--fs-caption); color: var(--fg-3); white-space: nowrap; padding-bottom: var(--sp-2); } .c-app-compagnon__onglet[data-actif="oui"] { color: var(--fg-1); box-shadow: inset 0 -2px 0 0 currentColor; } .c-app-compagnon__ui { display: grid; gap: var(--sp-3); } .c-app-compagnon__chat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } .c-app-compagnon__nom { font-family: var(--font-display); font-size: var(--fs-h3); } .c-app-compagnon__horodatage { font-size: var(--fs-caption); color: var(--fg-3); font-family: var(--font-data); } .c-app-compagnon__carte { background: var(--bg-surface); border-radius: var(--r-sm); padding: var(--sp-3); display: grid; gap: var(--sp-2); box-shadow: var(--sh-hair); } .c-app-compagnon__carte--seconde { background: var(--bg-surface); } .c-app-compagnon__carte-titre { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-2); } /* L'onde. Elle représente un signal capté — elle n'affirme aucun résultat, et c'est pour ça qu'elle peut être dessinée sans rien alléguer. */ .c-app-compagnon__onde { width: 100%; height: var(--sp-7); stroke: var(--fg-data); stroke-width: 3; stroke-linecap: round; fill: none; } .c-app-compagnon__attente { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-2); } .c-app-compagnon__resultat { font-size: var(--fs-body); color: var(--fg-1); } .c-app-compagnon__confiance { font-size: var(--fs-caption); color: var(--fg-3); font-family: var(--font-data); } /* Une valeur marquée comme fictive PORTE sa marque à l'écran : un liseré, pas une note dans un fichier. Le fondateur doit voir, sans rien ouvrir, ce qui est une sortie réelle et ce qui est un remplaçant. */ /* La marque visuelle des valeurs inventées a été PROMUE dans `mockup/atelier.css` : elle s'applique à toute la bibliothèque, et surtout elle n'a rien à faire dans `lib/`, qui devient le thème. Un soulignement « ceci est une valeur de maquette » livré en production serait un défaut. */ /* Dès qu'un résultat est affiché, l'attente n'a plus lieu d'être. */ .c-app-compagnon__carte:has(.c-app-compagnon__resultat) .c-app-compagnon__attente { display: none; } .c-app-compagnon__ligne { display: block; } .c-app-compagnon__ossature-ligne { display: block; height: var(--sp-2); border-radius: var(--r-xs); background: var(--bg-subtle); } .c-app-compagnon__ligne:last-child .c-app-compagnon__ossature-ligne { width: 60%; } /* ---------- Variante `inventaire` ------------------------------------------- */ .c-app-compagnon__inventaire { display: none; list-style: none; padding: var(--sp-0); margin: var(--sp-0); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); text-align: center; } .c-app-compagnon__appareil-item { display: grid; gap: var(--sp-2); justify-items: center; font-size: var(--fs-body-sm); color: var(--fg-2); } .c-app-compagnon__glyphe { width: var(--sp-7); height: var(--sp-7); fill: none; stroke: var(--fg-1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .c-app-compagnon[data-variante="inventaire"] .c-app-compagnon__panneau { display: none; } .c-app-compagnon[data-variante="inventaire"] .c-app-compagnon__inventaire { display: grid; } /* ---------- Variante `prose` — la réponse B&O ------------------------------- On ne montre RIEN de l'interface. Une phrase, un lien de téléchargement rangé derrière un dépliant de pied de page, et le registre premium tient quand même. C'est une option de plein droit, pas un repli. */ .c-app-compagnon[data-variante="prose"] .c-app-compagnon__appareil { display: none; } /* ⚠ `overflow: visible` est un correctif, pas un détail de style. Vu à l'écran le 2026-08-22, agrandi ×2 : la barre verticale du « Ê » de « Être prévenu de la sortie » était RASÉE. Le panneau porte `overflow: hidden` pour couper l'appareil ; en variante `prose` il n'y a pas d'appareil à couper, mais le padding tombe à zéro, le texte commence donc exactement au bord de la boîte, et le débord d'encre du glyphe (moins de deux pixels) passe sous la lame. La sonde ne peut pas le voir : elle ignore les débordements de 2 px ou moins. Un accent tranché sur un lien est pourtant une faute de composition visible à l'œil nu. */ .c-app-compagnon[data-variante="prose"] .c-app-compagnon__panneau { background: var(--bg-page); padding: var(--sp-0); overflow: visible; } .c-app-compagnon[data-variante="prose"] .c-app-compagnon__texte { max-width: 46ch; } .c-app-compagnon[data-variante="prose"] .c-app-compagnon__accroche { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); } .c-app-compagnon[data-variante="prose"] .c-app-compagnon__accroche b { font-weight: 500; } /* ---------- Les états -------------------------------------------------------- */ .c-app-compagnon__vide, .c-app-compagnon__erreur { display: none; } .c-app-compagnon[data-etat="vide"] .c-app-compagnon__panneau, .c-app-compagnon[data-etat="vide"] .c-app-compagnon__inventaire { display: none; } .c-app-compagnon[data-etat="vide"] .c-app-compagnon__vide { display: grid; border: 1px dashed var(--line-rule); border-radius: var(--r-xl); } .c-app-compagnon[data-etat="chargement"] .c-app-compagnon__onde, .c-app-compagnon[data-etat="chargement"] .c-app-compagnon__attente { visibility: hidden; } .c-app-compagnon[data-etat="chargement"] .c-app-compagnon__carte { position: relative; overflow: hidden; } .c-app-compagnon[data-etat="chargement"] .c-app-compagnon__carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--bg-subtle), transparent); transform: translateX(-100%); animation: ossature-balayage var(--dur-xl) var(--ease-soft) infinite; } @media (prefers-reduced-motion: reduce) { .c-app-compagnon[data-etat="chargement"] .c-app-compagnon__carte::after { animation: none; } } /* erreur — l'appareil perd la liaison, le CatLang continue. Le message le DIT : c'est la différence entre une panne et une inquiétude. */ .c-app-compagnon[data-etat="erreur"] .c-app-compagnon__erreur { display: flex; } .c-app-compagnon[data-etat="erreur"] .c-app-compagnon__appareil { opacity: .45; } /* long — une accroche française de 220 caractères. Elle descend d'un cran en taille et s'élargit : la coupe de l'appareil, elle, ne bouge pas. */ .c-app-compagnon[data-etat="long"] .c-app-compagnon__accroche { font-size: var(--fs-body-lg); } .c-app-compagnon[data-etat="long"] .c-app-compagnon__texte { max-width: 46ch; } /* rupture — l'application existe, l'appareil qu'elle pilote n'est pas livrable. */ .c-app-compagnon[data-etat="rupture"] .c-app-compagnon__note { color: var(--fg-alert); } /* succes — l'appareil vient d'être appairé. */ .c-app-compagnon[data-etat="succes"] .c-app-compagnon__carte-titre { color: var(--fg-data); } .c-app-compagnon[data-etat="succes"] .c-app-compagnon__attente { color: var(--fg-data); } /* desactive — l'analyse est suspendue (appareil en veille, abonnement inactif). */ .c-app-compagnon[data-etat="desactive"] .c-app-compagnon__ecran { filter: grayscale(1); } .c-app-compagnon[data-etat="desactive"] .c-app-compagnon__onde { stroke: var(--fg-3); } @media (min-width: 48rem) { .c-app-compagnon__inventaire { grid-template-columns: repeat(4, minmax(0, 1fr)); } .c-app-compagnon__panneau { padding-inline: var(--sp-7); } } /* Le lien de reprise de l'état d'erreur. Vu à l'écran le 2026-08-22 : il rendait en BLEU souligné, la couleur de lien par défaut du navigateur, au milieu d'une palette porcelaine et graphite. Aucune sonde ne le remonte — ce n'est ni un débordement ni une cible trop petite, c'est juste faux. ⚠ PRIMITIVE À PROMOUVOIR : la vraie place de cette règle est `.etat-erreur a { color: var(--fg-1); }` dans `primitives.css`. Le défaut est dans TOUS les états d'erreur de la bibliothèque, pas seulement ici ; en attendant que le fichier partagé soit rouvert, chaque composant du lot le corrige chez lui. */ .c-app-compagnon__erreur a { color: var(--fg-1); } /* ═══ lib/components/bandeau-annonce.css ═══ */ /* FICHE 21 — bandeau d'annonce. Mesures des références : Jones Road 390 × 50 px, fond brun profond, texte 13 px blanc, une phrase centrée, aucun lien ni bouton. Gymshark 390 × 48 px, lien 12 px souligné. Ridge ≈ 40 px, noir. Budget de hauteur, la règle opérationnelle de la fiche : hauteur(bandeau) + hauteur(en-tête) ≤ 128 px à 390. Gymshark empile trois barres (45 + 48 + 76 = 169 px, 20 % d'un écran de 844) avant le premier mot du héros. Ici : 44 px de bandeau + 64 px d'en-tête = 108 px. */ .c-bandeau-annonce { position: relative; /* JAMAIS collant : le message se lit une */ z-index: 1; /* fois, c'est l'en-tête qui reste épinglé */ display: flex; align-items: center; justify-content: center; min-height: var(--sp-7); /* 48 px — plafond de la fourchette 40–48 */ padding: var(--sp-2) var(--sp-4); /* Fond DISTINCT de la page. Jones Road pose un brun profond sur une page bone ; la page Catharsis est porcelaine, donc le bandeau prend le graphite. Jamais l'ambre : il est réservé au CTA primaire et perdrait sa valeur de signal s'il servait aussi de fond décoratif. */ background: var(--bg-inverse); color: var(--fg-on-dark); } .c-bandeau-annonce__message { font-size: var(--fs-caption); /* 12 px — Gymshark 12, Jones Road 13 */ line-height: var(--lh-snug); letter-spacing: var(--tr-normal); text-align: center; text-transform: none; /* un bandeau en capitales est un bandeau */ text-wrap: balance; /* de soldes ; la marque ne crie pas */ } /* Le lien est souligné, et c'est le seul ornement : pas de pilule, pas de flèche, pas de bouton. Il tient le plancher tactile sans grossir la barre — la zone cliquable déborde en `padding-block` négatif compensé. */ .c-bandeau-annonce__lien { color: inherit; text-decoration: underline; text-underline-offset: var(--sp-1); display: inline-block; min-height: var(--tap-min); } .c-bandeau-annonce__lien:hover { text-decoration-thickness: 2px; } /* ---------- Variantes -------------------------------------------------------- */ /* Chaud — le sable de la marque. Employé quand le message est une attention (« emballage sans plastique ») plutôt qu'une promesse commerciale. */ .c-bandeau-annonce[data-variante="chaud"] { background: var(--bg-warm); color: var(--fg-1); } /* Discret — le parti pris d'Oura : aucun fond propre, le message est posé directement sur la porcelaine et se lit comme la PREMIÈRE LIGNE DU DOCUMENT, pas comme une barre. C'est le plus calme des trois, et le seul qui ne coûte aucun contraste au reste de la page. */ .c-bandeau-annonce[data-variante="discret"] { background: transparent; color: var(--fg-2); border-bottom: 1px solid var(--line-hair); } /* ---------- États ------------------------------------------------------------ */ /* LONG — le cas qui casse la barre. « Livraison offerte en France métropolitaine dès 60 € d'achat, retours gratuits sous 30 jours » fait 103 caractères : à 12 px sur 358 px utiles, c'est trois lignes. On laisse le texte passer à deux lignes (la barre grandit proprement) et on CLAMPE à deux : au-delà, le bandeau devient une section et vole le premier écran. Le texte n'est jamais rogné à l'horizontale — un message tronqué au milieu d'un mot est pire qu'un message absent. */ .c-bandeau-annonce[data-etat="long"] .c-bandeau-annonce__message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .c-bandeau-annonce[data-etat="long"] { min-height: var(--sp-7); } /* VIDE — aucun message configuré. Le bandeau ne rend RIEN : pas une barre de couleur vide de 48 px. C'est le défaut le plus coûteux du corpus (« un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement ») et ici il se règle en ne rendant pas la boîte. */ .c-bandeau-annonce[data-etat="vide"] { display: none; } /* DÉSACTIVÉ — le réglage `afficher_sur_mobile` est à non. Le bandeau existe, il est simplement hors du téléphone. On le masque à 390 et on le rend au point de rupture : masquer par un `display:none` inconditionnel ferait disparaître le message des deux côtés sans que personne le remarque. */ .c-bandeau-annonce[data-etat="desactive"] { display: none; } @media (min-width: 48rem) { .c-bandeau-annonce[data-etat="desactive"] { display: flex; } } /* ═══ lib/components/bandeau-consentement.css ═══ */ /* FICHE 40 — bandeau de consentement, premier niveau. Cotes de référence : `.osano-cm-dialog` sur litter-robot.com, mesuré au navigateur le 2026-08-20 (391 × 554 px, soit 65,6 % du premier écran). */ .c-bandeau-consentement { position: fixed; z-index: 85; left: 0; right: 0; bottom: 0; padding: var(--sp-3); /* Fermé par défaut. Une fois le choix fait, le bandeau ne revient pas : durée de vie CNIL de treize mois pour les traceurs, sans reconduction automatique. */ visibility: hidden; transform: translateY(100%); transition: transform var(--dur-md) var(--ease-emerge), visibility var(--dur-md); } .c-bandeau-consentement[data-ouvert="oui"] { visibility: visible; transform: none; } /* ---------- Le plafond de hauteur, et pourquoi il est une règle ------------- Osano prend 65,6 % de 844 px : le héros disparaît, et le premier contact avec la marque est un mur gris de 554 px. Pour une marque qui se définit « Calme · Premium », c'est le pire premier écran possible. Plafond Catharsis : 40 % de la hauteur de fenêtre à 390 px. Le corps défile À L'INTÉRIEUR du bandeau si le texte dépasse — la page dessous ne bouge pas et les trois boutons restent atteignables. */ .c-bandeau-consentement__boite { /* Colonne : un corps qui défile, un pied d'actions qui ne défile jamais. Le plafond s'applique à la BOÎTE ; la coupure, elle, ne peut plus tomber sur les trois boutons. */ max-height: 40vh; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-surface); color: var(--fg-1); border: 1px solid var(--line-hair); border-radius: var(--r-lg); box-shadow: var(--sh-3); } /* La zone défilante. `min-height: 0` est load-bearing : sans lui un enfant flex refuse de rétrécir sous sa hauteur de contenu, la boîte dépasse son plafond, et le pied ressort par le bas. */ .c-bandeau-consentement__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--sp-3); } .c-bandeau-consentement__intro { font-size: var(--fs-body-sm); line-height: var(--lh-normal); } /* Les cinq finalités. Nommées, pas résumées : « améliorer votre expérience » n'est pas une finalité. Corps réduit mais jamais sous la légende — c'est de l'information juridique, pas une note de bas de page. */ .c-bandeau-consentement__finalites { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-caption); color: var(--fg-2); line-height: var(--lh-normal); } .c-bandeau-consentement__lien { font-size: var(--fs-caption); } .c-bandeau-consentement__lien a { color: var(--fg-2); /* ⚠ Relevé par la sonde le 2026-08-22 : 230 × 15 px, sous le plancher WCAG 2.2 SC 2.5.8, et trop proche des trois actions pour bénéficier de l'exception d'espacement. Le plancher du socle (`:where(a) { min-height }`) ne mord pas sur un lien INLINE — une hauteur minimale n'a aucun effet sur une boîte en ligne. Il faut donc le sortir du flux en ligne. C'est exactement le constat B5 : ~96 des 106 cibles trop petites venaient d'un lien discret sans hauteur. */ display: inline-flex; align-items: center; min-height: var(--tap-min); } /* ---------- LA PARITÉ, ÉCRITE EN CSS ---------------------------------------- Une seule règle porte les trois boutons. Il est structurellement impossible que « Tout refuser » soit plus petit que « Tout accepter » : ils n'ont pas deux déclarations, ils en ont une. C'est la traduction de la voie la plus simple d'Osano — trois boutons rigoureusement identiques — et c'est ce qui rend la conformité vérifiable en lisant le fichier. Contrôle automatique du recensement, à l'identique : hauteur(refuser) == hauteur(accepter) · largeur == · fontSize == · fontWeight == Aucun des trois n'est en Soft Amber. L'ambre est la couleur de l'action commerciale de la marque ; l'employer ici mettrait un poids visuel sur l'acceptation, ce qui est exactement l'asymétrie que la CNIL refuse. */ .c-bandeau-consentement__actions { display: grid; gap: var(--sp-2); flex: none; } .c-bandeau-consentement__action { min-height: var(--tap-vise); font-size: var(--fs-body-sm); font-weight: 500; } /* Au-delà du téléphone, les trois passent côte à côte — même largeur, donc la parité tient aussi en rangée. */ @media (min-width: 48rem) { .c-bandeau-consentement__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Les états -------------------------------------------------------- */ .c-bandeau-consentement__succes, .c-bandeau-consentement__erreur { display: none; } .c-bandeau-consentement[data-etat="succes"] .c-bandeau-consentement__succes { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-data); } .c-bandeau-consentement[data-etat="succes"] .c-bandeau-consentement__intro, .c-bandeau-consentement[data-etat="succes"] .c-bandeau-consentement__finalites, .c-bandeau-consentement[data-etat="succes"] .c-bandeau-consentement__lien, .c-bandeau-consentement[data-etat="succes"] .c-bandeau-consentement__actions { display: none; } .c-bandeau-consentement[data-etat="erreur"] .c-bandeau-consentement__erreur { display: flex; } /* Le corps cède la place au message. Sans cette règle, le corps est écrasé à ZÉRO pixel de haut par le pied et l'alerte réunis sous le plafond de 40 % (mesuré : `clientHeight` 0 pour `scrollHeight` 206) — l'intro et les cinq finalités deviennent alors invisibles SANS que rien ne le dise, ce qui est pire que de les retirer franchement. On les retire franchement. */ .c-bandeau-consentement[data-etat="erreur"] .c-bandeau-consentement__corps { display: none; } /* Chargement — l'enregistrement du choix est parti. Les trois actions se verrouillent ENSEMBLE : verrouiller la seule acceptation laisserait refuser plus facile qu'accepter, ce qui est le même défaut de parité à l'envers. */ .c-bandeau-consentement[data-etat="chargement"] .c-bandeau-consentement__action { background: var(--bg-subtle); color: var(--fg-3); border-color: transparent; pointer-events: none; } /* Désactivé — la visite ne relève pas de l'affichage obligatoire (hors EEE et Royaume-Uni). Le bandeau ne rend rien du tout ; il ne rend pas « vide ». */ .c-bandeau-consentement[data-etat="desactive"] { display: none; } /* ---------- Variante « rappel » --------------------------------------------- Le lien permanent du pied de page rouvre le premier niveau, pas seulement le panneau : retirer son consentement doit être aussi simple que de le donner, et un visiteur qui a tout accepté doit pouvoir tout refuser en un clic. */ .c-bandeau-consentement[data-variante="rappel"] .c-bandeau-consentement__finalites { display: none; } /* ---------- La commutation depuis la barre d'outils de maquette ------------- */ html[data-etat="consentement"] .c-bandeau-consentement { visibility: visible; transform: none; } /* ═══ lib/components/barre-collante.css ═══ */ /* FICHE 09 — barre d'achat épinglée. Mesures : 61 px (Litter-Robot, bas), 62 px (Dyson, haut), 126 px (Eight Sleep, bas). Retenu : BASSE, opaque, filet haut. Basse parce qu'en haut elle mange la zone où le regard cherche le contenu — Dyson paie 118 px de haut (en-tête + barre), soit 14 % du viewport. */ .c-barre-collante { /* Opaque, jamais translucide. Le fond rgba(255,255,255,.7) flouté de Litter-Robot laisse lire un fantôme de texte tronqué à travers la barre : deux défauts qui s'additionnent. */ background: var(--bg-surface); border-top: 1px solid var(--line-hair); } /* L'épinglage est EXPLICITE : le gabarit est le même, seul l'ancrage change. Sans `data-ancrage`, la barre rend en flux — c'est ce qui la rend jugeable dans l'atelier, où trois barres épinglées se recouvriraient. */ .c-barre-collante[data-ancrage="fixe"] { position: fixed; left: 0; right: 0; bottom: 0; /* Sous le voile (80), le tiroir (90) et la modale (95) : une barre d'achat ne passe JAMAIS au-dessus d'un dialogue. */ z-index: 70; box-shadow: var(--sh-2); } .c-barre-collante__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); max-width: var(--container); margin-inline: auto; min-width: 0; } .c-barre-collante__chiffre { display: grid; gap: 0; min-width: 0; } /* Le nom est TRONQUÉ sur une ligne, et le prix a sa propre ligne. C'est la correction exacte du défaut Dyson. */ .c-barre-collante__nom { font-size: var(--fs-caption); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-barre-collante__prix { font-size: var(--fs-body-lg); font-weight: 500; color: var(--fg-1); line-height: var(--lh-snug); } .c-barre-collante__comprend { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-snug); } /* ⚠ `flex: none` ÉTAIT UN PIÈGE, et le pire de tous : il est invisible. Le bloc d'action refusait de rétrécir. Avec un second bouton (« Me prévenir ») et une phrase de livraison complète, il mesurait **519 px dans une barre de 390** — mesuré le 2026-08-22 sur la fiche produit. La moitié droite, dont un bouton entier, était hors écran et inatteignable. Et AUCUNE porte ne le voyait : la barre est en `position: fixed`, donc elle n'étend pas la zone défilable du document, donc « pas de débordement ». Le seul contrôle qui l'a attrapé, c'est d'avoir regardé la capture. Sur la page qui vend, et sur le seul chemin d'achat qui existe sur téléphone. */ .c-barre-collante__action { display: grid; gap: var(--sp-1); justify-items: stretch; flex: 0 1 auto; min-width: 0; } .c-barre-collante__bouton { min-height: var(--tap-vise); font-weight: 500; } .c-barre-collante__livraison { font-size: var(--fs-caption); color: var(--fg-2); text-align: center; line-height: var(--lh-snug); /* la phrase s'enroule au lieu de pousser la barre */ overflow-wrap: break-word; } /* LA LIGNE QUE LITTER-ROBOT N'A PAS ÉCRITE. Sans elle, la barre recouvre la fin du contenu — chez eux, la dernière puce de la liste est coupée par la barre et on en lit le fantôme à travers le flou. La correction coûte une ligne de CSS, et elle appartient au composant qui crée le problème, pas à la page. */ body:has(.c-barre-collante[data-ancrage="fixe"]) { padding-bottom: var(--sp-9); } /* ---------- Le même gabarit, l'autre ancrage -------------------------------- « flux » — le pied du bloc d'achat. Même contenu, même bouton, même date ; il perd seulement son épinglage et son ombre. C'est le motif Eight Sleep : un seul gabarit, deux ancrages. */ .c-barre-collante[data-ancrage="flux"] { position: static; box-shadow: none; border: 1px solid var(--line-hair); border-radius: var(--r-card); background: var(--bg-inverse); color: var(--fg-on-dark); } .c-barre-collante[data-ancrage="flux"] .c-barre-collante__nom, .c-barre-collante[data-ancrage="flux"] .c-barre-collante__prix { color: var(--fg-on-dark); } .c-barre-collante[data-ancrage="flux"] .c-barre-collante__comprend, .c-barre-collante[data-ancrage="flux"] .c-barre-collante__livraison { color: var(--bg-subtle); } .c-barre-collante[data-ancrage="flux"] .c-barre-collante__interieur { padding: var(--sp-4); } /* ---------- Les états -------------------------------------------------------- */ .c-barre-collante__libelle-rupture { display: none; } /* Rupture — le verbe change, la place ne bouge pas (fiche 08). */ .c-barre-collante[data-etat="rupture"] .c-barre-collante__libelle { display: none; } .c-barre-collante[data-etat="rupture"] .c-barre-collante__libelle-rupture { display: inline; } .c-barre-collante[data-etat="rupture"] .c-barre-collante__bouton { background: none; border-color: var(--fg-1); color: var(--fg-1); } .c-barre-collante[data-ancrage="flux"][data-etat="rupture"] .c-barre-collante__bouton { border-color: var(--fg-on-dark); color: var(--fg-on-dark); } .c-barre-collante[data-etat="chargement"] .c-barre-collante__prix { background: var(--bg-subtle); color: transparent; border-radius: var(--r-xs); min-width: 8ch; } .c-barre-collante[data-etat="chargement"] .c-barre-collante__bouton { background: var(--bg-subtle); color: var(--fg-3); pointer-events: none; } .c-barre-collante[data-etat="desactive"] .c-barre-collante__bouton { background: var(--bg-subtle); color: var(--fg-3); pointer-events: none; } .c-barre-collante[data-etat="succes"] .c-barre-collante__bouton { background: var(--bg-intelligence); color: var(--fg-data); } /* Long — le nom déborde : il se tronque, le prix garde sa ligne. */ .c-barre-collante[data-etat="long"] .c-barre-collante__nom { max-width: 22ch; } /* ═══ lib/components/barre-livraison.css ═══ */ /* FICHE 35 — barre de livraison. Le rail fait 6 px : c'est la valeur mesurée chez Gymshark, et les 2 px de Ridge sont trop fins pour lire un remplissage partiel au pouce. */ .c-barre-livraison { --remplissage: 0%; /* défaut local : sans lui, une instance qui oublie sa valeur rendrait un rail à largeur initiale, donc un remplissage arbitraire. */ display: grid; gap: var(--sp-2); padding-block: var(--sp-3); } .c-barre-livraison__message { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); line-height: var(--lh-snug); color: var(--fg-1); } /* Le montant restant est en GRAISSE dans la phrase, jamais en couleur d'alerte : ce n'est ni une alerte ni une validation, c'est une distance. */ .c-barre-livraison__message strong { font-weight: 600; } /* La phrase est un item unique : elle se replie en lignes, elle ne se casse jamais en colonnes. L'icône y redevient EN LIGNE — le socle met tout `svg` en `display: block`, ce qui la mettrait seule sur sa ligne hors contexte flex. */ .c-barre-livraison__texte { display: block; flex: 1; min-width: 0; line-height: var(--lh-snug); } .c-barre-livraison__texte .i { display: inline-block; vertical-align: -0.18em; } .c-barre-livraison__texte .prix { white-space: nowrap; } .c-barre-livraison__detail { margin-left: auto; color: var(--fg-3); } .c-barre-livraison__detail:hover { color: var(--fg-1); } .c-barre-livraison__rail { height: 6px; border-radius: var(--r-pill); background: var(--c-mist-grey); overflow: hidden; } /* Ambre, jamais rouge ni vert. Le remplissage est le rapport exact du panier au seuil, plafonné à 100 % — la recette d'acceptation est celle qui a validé Gymshark : mesurer la largeur sur la capture et la comparer au rapport, écart toléré 1 point. */ .c-barre-livraison__remplissage { display: block; height: 100%; width: min(100%, var(--remplissage)); border-radius: var(--r-pill); background: var(--c-soft-amber); transition: width var(--dur-md) var(--ease-standard); } .c-barre-livraison__bornes { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--fg-3); } .c-barre-livraison__date { color: var(--fg-2); } /* Au franchissement, le rail RESTE et se remplit à 100 % : la disparition totale du bloc (Ridge) rend ~90 px mais retire la preuve au moment exact où elle rassure — et elle fait remonter tout le panier de 90 px d'un coup sous le doigt du client. Ici le bloc change de contenu, jamais de nature. */ .c-barre-livraison[data-franchi="oui"] .c-barre-livraison__remplissage { width: 100%; } .c-barre-livraison[data-franchi="oui"] .c-barre-livraison__message { color: var(--fg-1); } /* ═══ lib/components/bloc-achat.css ═══ */ /* FICHE 02 — bloc d'achat. Le conteneur n'a presque pas de style propre : il ordonne. Ce qui suit est donc surtout de la mise en séquence et deux ou trois décisions typographiques qui, elles, contredisent le réflexe. */ .c-bloc-achat { display: flex; flex-direction: column; gap: var(--sp-6); } .c-bloc-achat__identite { display: grid; gap: var(--sp-2); order: 1; } /* LE H1 EST PETIT. 20 px chez Dyson, 21 chez Litter-Robot. `base.css` le pose à --fs-display (52 px) pour un titre de page ; dans un bloc d'achat, c'est faux. Le nom du produit n'est jamais le plus grand caractère de son propre bloc. */ .c-bloc-achat__titre { font-size: var(--fs-h3); /* 22 px — la mesure Litter-Robot */ font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); } /* …et la PROMESSE est plus grande que le H1. C'est le geste exact de Dyson : H1 20 px, promesse 28 px. Ce qu'on vend n'est pas un nom, c'est une phrase. */ .c-bloc-achat__promesse { font-family: var(--font-display); font-size: var(--fs-h2); /* 28 px — la mesure Dyson */ font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg-1); } .c-bloc-achat__chiffre { display: grid; gap: var(--sp-2); order: 2; } .c-bloc-achat__benefice { font-size: var(--fs-body); color: var(--fg-2); line-height: var(--lh-relaxed); max-width: 46ch; order: 3; } .c-bloc-achat__galerie { order: 4; } .c-bloc-achat__configure{ display: grid; gap: var(--sp-5); order: 5; } .c-bloc-achat__achat { display: grid; gap: var(--sp-3); order: 6; } .c-bloc-achat__preuve { display: grid; gap: var(--sp-5); order: 7; } /* ---------- B · « spécifications d'abord » ---------------------------------- La preuve technique (capacités + caractéristiques) remonte AVANT la configuration : l'acheteur qui veut les cotes ne descend pas deux écrans pour les trouver. La séquence identifier → chiffrer → justifier → configurer → acheter n'est pas inversée pour autant — seul le bloc de preuve change de place à l'intérieur du « justifier ». ⚠ DÉCISION À REMONTER AU FONDATEUR : ici l'ordre visuel est obtenu par `order`, donc l'ordre de tabulation reste celui du DOM (guidé). Au port Liquid, l'ordre des blocs est une donnée de l'éditeur : le DOM suivra réellement, et l'écart disparaît. Ne pas laisser cet écart survivre au port. */ .c-bloc-achat[data-variante="specs-abord"] .c-bloc-achat__preuve { order: 5; } .c-bloc-achat[data-variante="specs-abord"] .c-bloc-achat__configure { order: 6; } .c-bloc-achat[data-variante="specs-abord"] .c-bloc-achat__achat { order: 7; } /* ---------- Au-delà du téléphone -------------------------------------------- À 1440 px, deux colonnes : les médias à gauche, le bloc d'achat à droite (Litter-Robot 780 + colonne ; Eight Sleep 960 + 480). La galerie sort de la pile ; tout le reste garde son ordre. */ @media (min-width: 64rem) { .c-bloc-achat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--sp-8); align-items: start; } .c-bloc-achat__galerie { grid-column: 1; grid-row: 1 / span 7; position: sticky; top: var(--sp-5); } .c-bloc-achat__identite, .c-bloc-achat__chiffre, .c-bloc-achat__benefice, .c-bloc-achat__configure, .c-bloc-achat__achat, .c-bloc-achat__preuve { grid-column: 2; } } /* ═══ lib/components/bouton-achat.css ═══ */ /* FICHE 08 — bouton d'achat. Géométrie : pleine largeur de la colonne, hauteur 56 px (Dyson : 352×56 ; le plancher tactile est à 44). Le rayon suit le système Catharsis (`.b` est en pastille), et non les angles vifs de Dyson. */ .c-bouton-achat { display: grid; gap: var(--sp-3); } .c-bouton-achat__rangee { display: flex; align-items: stretch; gap: var(--sp-3); } .c-bouton-achat__action { min-height: var(--sp-7); /* 48 px de plancher, 56 px atteints par le padding */ padding-block: var(--sp-3); font-size: var(--fs-body); font-weight: 500; } /* Variante « avec quantité » : le bouton partage la rangée. C'est la seule configuration où il n'est pas pleine largeur — celle des consommables, où la quantité est une vraie décision (Litter-Robot : bouton 231×44 + sélecteur). */ .c-bouton-achat__quantite { display: none; } .c-bouton-achat[data-variante="avec-quantite"] .c-bouton-achat__quantite { display: inline-flex; } /* Les libellés d'état vivent dans le MÊME bouton, à la MÊME place : la page ne change pas de forme, elle change de verbe. */ .c-bouton-achat__libelle-rupture, .c-bouton-achat__libelle-chargement, .c-bouton-achat__libelle-succes { display: none; } .c-bouton-achat__libelle-succes { align-items: center; gap: var(--sp-2); } .c-bouton-achat__prevenir { display: none; gap: var(--sp-2); } .c-bouton-achat__prevenir-rangee { display: flex; gap: var(--sp-2); } .c-bouton-achat__prevenir-rangee .saisie { flex: 1; } .c-bouton-achat__erreur { display: none; } /* ---------- Les états -------------------------------------------------------- */ /* Rupture — même taille, même place, le verbe change. Le bouton passe en contour : il reste l'action principale de la page, mais il ne promet plus un achat immédiat. */ .c-bouton-achat[data-etat="rupture"] .c-bouton-achat__action { background: none; border-color: var(--fg-1); color: var(--fg-1); } .c-bouton-achat[data-etat="rupture"] .c-bouton-achat__libelle { display: none; } .c-bouton-achat[data-etat="rupture"] .c-bouton-achat__libelle-rupture { display: inline; } .c-bouton-achat[data-etat="rupture"] .c-bouton-achat__prevenir { display: grid; } .c-bouton-achat[data-etat="rupture"] .c-bouton-achat__quantite { display: none; } /* Chargement — désactivé et `aria-busy` ; la largeur ne bouge pas, donc le pouce ne perd pas sa cible entre deux frappes. */ .c-bouton-achat[data-etat="chargement"] .c-bouton-achat__action { background: var(--bg-subtle); color: var(--fg-3); cursor: not-allowed; } .c-bouton-achat[data-etat="chargement"] .c-bouton-achat__libelle { display: none; } .c-bouton-achat[data-etat="chargement"] .c-bouton-achat__libelle-chargement { display: inline; } /* Succès — 2 s puis retour, SANS déplacer quoi que ce soit. */ .c-bouton-achat[data-etat="succes"] .c-bouton-achat__libelle { display: none; } .c-bouton-achat[data-etat="succes"] .c-bouton-achat__libelle-succes { display: inline-flex; } /* Erreur d'ajout — elle DIT ce qui a échoué et laisse le bouton actif : une erreur d'ajout au panier dont la reprise est impossible est un abandon. */ .c-bouton-achat[data-etat="erreur"] .c-bouton-achat__erreur { display: flex; } .c-bouton-achat[data-etat="desactive"] .c-bouton-achat__action { background: var(--bg-subtle); color: var(--fg-3); cursor: not-allowed; } .c-bouton-achat[data-etat="desactive"] .c-bouton-achat__quantite { opacity: .6; pointer-events: none; } /* Long — un libellé long ne doit pas casser la hauteur du bouton ni déborder. */ .c-bouton-achat[data-etat="long"] .c-bouton-achat__action { line-height: var(--lh-snug); } /* ═══ lib/components/caisse-marque.css ═══ */ /* FICHE 46 — caisse de marque. Références mesurées à 390 px : ridge.com (caisse Shopify une page), ouraring.com/fr (caisse maison, accordéon en trois temps), whisker.com/eu-fr (deux étapes numérotées, la seule des trois qui chiffre la TVA). Rappel de cadrage : ce fichier n'est PAS un gabarit de caisse. La caisse n'existe pas dans le thème (`checkout.liquid` = Shopify Plus). C'est la maquette annotée de l'écran que produit l'éditeur de caisse, plus la seule pièce réellement portable : la rangée de marques de paiement. */ /* ---------- L'annotation de palier — chrome de maquette ---------------------- */ .c-caisse-marque__palier code { font-family: var(--font-data); font-size: var(--fs-caption); overflow-wrap: anywhere; } .c-caisse-marque__palier { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-left: 3px solid var(--fg-accent); background: var(--bg-warm); color: var(--fg-1); font-size: var(--fs-body-sm); line-height: var(--lh-normal); border-radius: var(--r-xs); } /* ---------- L'écran ---------------------------------------------------------- */ .c-caisse-marque__ecran { display: grid; gap: var(--sp-5); padding: var(--sp-4); background: var(--bg-page); border: 1px solid var(--line-hair); border-radius: var(--r-lg); } .c-caisse-marque__entete { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-hair); } .c-caisse-marque__marque-nom { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--tr-eyebrow); } .c-caisse-marque__promesse { color: var(--fg-2); } /* ---------- La barre de récapitulatif ---------------------------------------- Repliée par défaut sur mobile — les trois références le font — mais le TOTAL reste visible. C'est le seul chiffre qu'on ne cache jamais : le cacher oblige le visiteur à déplier pour savoir ce qu'il va payer. */ .c-caisse-marque__recap-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-subtle); border-radius: var(--r-sm); } .c-caisse-marque__recap-bouton { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-vise); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--fs-body-sm); text-align: left; } .c-caisse-marque__recap-total { font-weight: 600; } .c-caisse-marque__recap { display: grid; gap: var(--sp-4); } /* La ligne d'article : vignette, badge de quantité, texte, prix. */ .c-caisse-marque__ligne { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: start; } .c-caisse-marque__vignette { position: relative; display: block; } /* ⚠ Relevé par la sonde le 2026-08-22 : 47 px « définitivement inaccessibles » dans chaque vignette. Le panneau de marque (`visuel-marque`) porte le nom du produit en corps de titre — parfait à 300 px, débordant à 56 px, et `.media` le rogne. À cette taille le mot serait de toute façon illisible, et le nom du produit est écrit en toutes lettres juste à côté : on garde le motif dessiné, on retire le mot. La règle vit ici et non dans `visuel-marque.css`, qui est un fichier partagé — c'est le contexte qui décide, pas la primitive. */ .c-caisse-marque__vignette .c-visuel-marque__nom { display: none; } .c-caisse-marque__quantite { position: absolute; top: calc(var(--sp-2) * -1); right: calc(var(--sp-2) * -1); min-width: var(--sp-5); justify-content: center; padding: 0 var(--sp-1); background: var(--bg-inverse); color: var(--fg-on-dark); } .c-caisse-marque__ligne-texte { display: grid; gap: var(--sp-1); min-width: 0; } .c-caisse-marque__ligne-nom { font-size: var(--fs-body-sm); font-weight: 500; } .c-caisse-marque__ligne-prix { font-size: var(--fs-body-sm); white-space: nowrap; } /* Le code promo. Le bouton est inerte tant que le champ est vide. */ .c-caisse-marque__promo { display: flex; gap: var(--sp-2); align-items: stretch; } .c-caisse-marque__promo .saisie { flex: 1; min-width: 0; } /* ---------- Les quatre lignes de TVA ----------------------------------------- Règle 7. Le total TTC est en gras AU-DESSUS d'un filet : c'est le seul chiffre que le client cherche, il ne se noie pas dans la pile. */ .c-caisse-marque__totaux { display: grid; gap: var(--sp-2); } .c-caisse-marque__total-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body-sm); color: var(--fg-2); } .c-caisse-marque__total-ligne--fort { padding-top: var(--sp-3); margin-top: var(--sp-1); border-top: 1px solid var(--line-rule); font-size: var(--fs-body); font-weight: 600; color: var(--fg-1); } /* Ossature de chargement — la FORME des quatre lignes, pas un tourniquet. */ .c-caisse-marque__ossature { display: none; gap: var(--sp-2); } .c-caisse-marque__ossature > .ossature { height: 14px; } .c-caisse-marque__ossature > .ossature:last-child { height: 22px; } /* ---------- Paiement express -------------------------------------------------- */ .c-caisse-marque__express { display: grid; gap: var(--sp-3); } .c-caisse-marque__express-titre { text-align: center; } .c-caisse-marque__express-actions { display: grid; gap: var(--sp-2); } .c-caisse-marque__express-bouton { min-height: var(--tap-vise); } /* Le séparateur « ou ». Un filet coupé par un mot, jamais un mot posé sur un filet : le trait doit s'arrêter, sinon il barre le texte. */ .c-caisse-marque__ou { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--fg-3); } .c-caisse-marque__ou::before, .c-caisse-marque__ou::after { content: ""; flex: 1; height: 1px; background: var(--line-hair); } /* ---------- Les blocs de formulaire ------------------------------------------ */ .c-caisse-marque__bloc { display: grid; gap: var(--sp-4); border: 0; padding: 0; margin: 0; min-width: 0; } .c-caisse-marque__bloc-titre { padding: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); } .c-caisse-marque__paire { display: grid; gap: var(--sp-4); } .c-caisse-marque__optin-texte { font-size: var(--fs-caption); color: var(--fg-2); } .c-caisse-marque__securite { display: flex; align-items: center; gap: var(--sp-2); } /* L'état vide du mode de livraison : la section existe AVANT d'avoir quelque chose à montrer, et elle explique son vide. Pas un bloc absent, pas un tiret. */ .c-caisse-marque__vide { padding: var(--sp-5) var(--sp-4); border: 1px dashed var(--line-rule); border-radius: var(--r-sm); font-size: var(--fs-body-sm); } /* ═══════════════════════════════════════════════════════════════════════════ LA RANGÉE DE MARQUES — le correctif du constat B2 ═══════════════════════════════════════════════════════════════════════════ Sept marques, sept FORMES. Ce qui les distingue n'est ni la couleur (la porte 2 l'interdit, et de toute façon elle ne survit ni au mode sombre, ni à l'impression, ni au daltonisme) ni une pastille générique répétée : c'est le dessin. Deux monogrammes tracés, un « G » cerclé, quatre mots-symboles dont chacun a son propre traitement typographique. Le défaut d'origine : `snippets/payment-badges.liquid` calculait un libellé par méthode puis rendait `{% render 'icon', name: 'credit-card' %}` pour TOUTES — six pictogrammes strictement identiques. Le correctif dort déjà dans le dépôt à `sections/footer.liquid:90` (`payment_type_svg_tag`). */ .c-caisse-marque__marques { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .c-caisse-marque__marque { display: inline-flex; align-items: center; gap: var(--sp-1); height: 26px; padding: 0 var(--sp-2); border: 1px solid var(--line-hair); border-radius: var(--r-xs); background: var(--bg-surface); color: var(--fg-1); } .c-caisse-marque__glyphe { width: 30px; height: 19px; flex: none; } .c-caisse-marque__glyphe--etroit { width: 17px; } .c-caisse-marque__mot { font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700; line-height: 1; } /* Chaque marque a SON traitement. C'est ce qui rend la rangée lisible d'un coup d'œil sans une seule couleur de marque. */ .c-caisse-marque__marque[data-marque="visa"] .c-caisse-marque__mot { font-style: italic; letter-spacing: var(--tr-eyebrow); } .c-caisse-marque__marque[data-marque="cb"] .c-caisse-marque__mot { letter-spacing: var(--tr-tight); font-size: var(--fs-body-sm); } /* American Express : le mot en réserve sur un bloc d'encre — la seule pastille inversée de la rangée, donc reconnaissable avant d'être lue. */ .c-caisse-marque__marque[data-marque="amex"] { background: var(--bg-inverse); border-color: transparent; color: var(--fg-on-dark); } .c-caisse-marque__marque[data-marque="apple"] .c-caisse-marque__mot { font-weight: 500; letter-spacing: var(--tr-tight); } .c-caisse-marque__marque[data-marque="google"] .c-caisse-marque__mot { font-weight: 500; } .c-caisse-marque__marque[data-marque="mastercard"], .c-caisse-marque__marque[data-marque="paypal"] { padding-inline: var(--sp-1); } /* Les mêmes mots-symboles servent aux boutons express ; ils y héritent de la couleur du bouton, donc rien à redéclarer. */ .c-caisse-marque__express-bouton .c-caisse-marque__mot { font-size: var(--fs-body-sm); } /* ---------- Les champs de carte ---------------------------------------------- */ .c-caisse-marque__carte { display: grid; gap: var(--sp-4); } .c-caisse-marque__saisie-cadenas { position: relative; display: block; } .c-caisse-marque__saisie-cadenas .saisie { padding-right: var(--sp-7); } .c-caisse-marque__saisie-cadenas .i { position: absolute; top: 50%; right: var(--sp-4); translate: 0 -50%; color: var(--fg-3); pointer-events: none; } .c-caisse-marque__payer { font-weight: 600; } .c-caisse-marque__payer .prix { font-weight: 600; } /* ---------- Le pied : trois liens, et rien d'autre ---------------------------- */ .c-caisse-marque__pied { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-hair); font-size: var(--fs-caption); } .c-caisse-marque__pied a { color: var(--fg-2); } /* ═══════════════ Les états ═══════════════ */ .c-caisse-marque__erreur, .c-caisse-marque__rupture, .c-caisse-marque__succes { display: none; } /* Chargement — le récapitulatif se recalcule. Les chiffres cèdent la place à une ossature de MÊME forme : la page ne saute pas quand ils arrivent. */ .c-caisse-marque[data-etat="chargement"] .c-caisse-marque__ossature { display: grid; } .c-caisse-marque[data-etat="chargement"] .c-caisse-marque__totaux, .c-caisse-marque[data-etat="chargement"] .c-caisse-marque__recap-total { display: none; } .c-caisse-marque[data-etat="chargement"] .c-caisse-marque__payer { background: var(--bg-subtle); color: var(--fg-3); pointer-events: none; } /* Erreur — paiement refusé. Le bouton reste actif : le client doit pouvoir réessayer sans recharger la page. */ .c-caisse-marque[data-etat="erreur"] .c-caisse-marque__erreur { display: flex; } /* Rupture — l'article est devenu indisponible pendant le tunnel. */ .c-caisse-marque[data-etat="rupture"] .c-caisse-marque__rupture { display: flex; } .c-caisse-marque[data-etat="rupture"] .c-caisse-marque__payer { background: var(--bg-subtle); color: var(--fg-3); pointer-events: none; } /* Succès — la main passe à Shopify (fiche 47). */ .c-caisse-marque[data-etat="succes"] .c-caisse-marque__succes { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-data); } /* Long — un nom d'article de 90 caractères et une variante à rallonge. Rien ne se tronque : la colonne de texte peut passer à la ligne, le prix ne bouge pas. C'est le cas qui casse toutes les caisses à 390 px. */ .c-caisse-marque[data-etat="long"] .c-caisse-marque__ligne-nom { overflow-wrap: anywhere; } /* Désactivé — le paiement express est éteint dans l'administration. La section ne rend rien ; elle ne rend pas « vide ». */ .c-caisse-marque[data-etat="desactive"] .c-caisse-marque__express { display: none; } /* ---------- Variante « marques » --------------------------------------------- La rangée seule. C'est la SEULE partie de cette fiche qui vit réellement dans le thème — pied de page, fiche produit, panier — et c'est celle qui portait le défaut. Elle se juge donc isolément, à sa taille réelle. */ .c-caisse-marque[data-variante="marques"] .c-caisse-marque__ecran { padding: var(--sp-4); background: var(--bg-surface); } .c-caisse-marque[data-variante="marques"] .c-caisse-marque__entete, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__recap-barre, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__recap, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__express, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__carte, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__securite, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__bloc-titre, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__payer, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__pied, .c-caisse-marque[data-variante="marques"] .c-caisse-marque__bloc:not(.c-caisse-marque__bloc--paiement) { display: none; } /* ---------- Au-delà du téléphone --------------------------------------------- */ @media (min-width: 48rem) { .c-caisse-marque__paire { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-caisse-marque__express-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ═══ lib/components/carte-produit.css ═══ */ /* FICHE 28 — carte produit. Mesures transposées de whisker.com (style A), gymshark.com / cutsclothing.com (B), ridge.com (C). */ .c-carte-produit { display: grid; gap: var(--sp-3); align-content: start; } /* ---------- La tuile --------------------------------------------------------- Ratio 5:6 et fond TEINTÉ, jamais la couleur de page : Whisker pose une tuile `rgb(243,240,230)` sur une page `rgb(253,250,243)` — six points d'écart, un écart lisible sans être un cadre. Une tuile en couleur de page disparaît. */ .c-carte-produit__tuile { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-subtle); } /* Le produit est ENCASTRÉ, jamais rogné. Whisker laisse 26 px de marge autour d'un produit de 124 px dans une tuile de 176. Le rognage `cover` de Gymshark ne marche que parce que ses visuels sont des corps en pied ; un bac à litière rogné devient un cylindre gris. */ .c-carte-produit__photo { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-5); } .c-carte-produit__photo:not([src]), .c-carte-produit__photo[src=""] { display: none; } /* Quand la photo existe, le panneau de marque s'efface. */ .c-carte-produit__photo[src]:not([src=""]) ~ .c-visuel-marque { display: none; } .c-carte-produit .c-visuel-marque { position: absolute; inset: 0; border-radius: 0; } .c-carte-produit__etiquette { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--bg-surface); color: var(--fg-1); box-shadow: var(--sh-hair); } .c-carte-produit__etiquette:empty { display: none; } /* ---------- Le texte --------------------------------------------------------- Le titre réserve DEUX lignes et la hauteur est fixée : sinon deux cartes voisines ne s'alignent plus. C'est le piège de la fiche — Gymshark tronque à une ligne et la seconde ligne mord sur la ligne d'en dessous. À 185 px de large, un nom de produit français dépasse presque toujours : « Sacs de déchets — recharge 3 mois » fait 34 caractères. */ .c-carte-produit__titre { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); min-height: calc(var(--fs-h3) * var(--lh-snug) * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .c-carte-produit__titre a { color: inherit; text-decoration: none; } /* La cible tactile du titre couvre TOUTE la carte — c'est le geste réel sur téléphone. Le bouton d'ajout, lui, remonte au-dessus. */ .c-carte-produit__titre a::after { content: ""; position: absolute; inset: 0; } .c-carte-produit { position: relative; } /* Le descripteur est OBLIGATOIRE en style A : c'est la ligne qui répond à « en quoi celui-ci diffère de celui d'à côté ». Sur trois produits hétérogènes (un appareil, une cartouche, des sacs), c'est elle qui empêche la grille de ressembler à un inventaire. */ .c-carte-produit__descripteur { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); min-height: calc(var(--fs-body-sm) * var(--lh-normal) * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Le prix n'est PAS le plus gros caractère de la carte (cohérent fiche 04). */ .c-carte-produit__prix { font-size: var(--fs-body); color: var(--fg-1); } .c-carte-produit__coloris:empty, .c-carte-produit__descripteur:empty, .c-carte-produit__variantes:empty { display: none; } /* ---------- Ce qui n'appartient qu'à certaines variantes -------------------- */ .c-carte-produit__ajout, .c-carte-produit__acheter, .c-carte-produit__rupture { display: none; } .c-carte-produit__ajout { position: absolute; z-index: 1; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); width: auto; } /* B · Catalogue — visuel plein cadre 4:5, rogné, plus un ajout rapide. */ .c-carte-produit[data-variante="catalogue"] .c-carte-produit__tuile { aspect-ratio: 4 / 5; border-radius: var(--r-sm); } .c-carte-produit[data-variante="catalogue"] .c-carte-produit__photo { object-fit: cover; padding: 0; } .c-carte-produit[data-variante="catalogue"] .c-carte-produit__titre { font-family: var(--font-ui); font-size: var(--fs-body-sm); letter-spacing: var(--tr-normal); min-height: calc(var(--fs-body-sm) * var(--lh-snug) * 2); } .c-carte-produit[data-variante="catalogue"] .c-carte-produit__descripteur { display: none; } .c-carte-produit[data-variante="catalogue"] .c-carte-produit__ajout { display: inline-flex; } /* C · Bloc d'achat — la carte devient un objet bordé qui vend seul. */ .c-carte-produit[data-variante="achat"] { background: var(--bg-surface); border: 1px solid var(--line-hair); border-radius: var(--r-card); padding: var(--sp-4); gap: var(--sp-2); } .c-carte-produit[data-variante="achat"] .c-carte-produit__tuile { aspect-ratio: 4 / 5; } .c-carte-produit[data-variante="achat"] .c-carte-produit__titre { font-size: var(--fs-body-lg); min-height: calc(var(--fs-body-lg) * var(--lh-snug) * 2); } .c-carte-produit[data-variante="achat"] .c-carte-produit__descripteur { display: none; } .c-carte-produit[data-variante="achat"] { height: 100%; grid-template-rows: auto 1fr; } .c-carte-produit[data-variante="achat"] .c-carte-produit__texte { display: flex; flex-direction: column; gap: var(--sp-1); } /* Vu à l'écran le 2026-08-22 : la carte « + 3 parfums » portait une ligne de plus que sa voisine, donc les deux boutons « Ajouter au panier » se retrouvaient à deux hauteurs différentes — une grille d'actions en escalier. L'action se colle au bas de la carte, jamais à la fin du texte. */ .c-carte-produit[data-variante="achat"] .c-carte-produit__acheter { display: inline-flex; margin-top: auto; padding-top: var(--sp-1); } /* Le bouton est AU-DESSUS de la cible pleine carte, sinon il n'est jamais cliqué. */ .c-carte-produit[data-variante="achat"] .c-carte-produit__acheter { position: relative; z-index: 1; } /* ---------- Les états -------------------------------------------------------- */ /* Rupture. Le prix reste lisible et la carte reste ouvrable : jamais un mur. */ .c-carte-produit[data-etat="rupture"] .c-carte-produit__tuile { opacity: .55; } .c-carte-produit[data-etat="rupture"] .c-carte-produit__rupture { display: block; color: var(--fg-alert); } .c-carte-produit[data-etat="rupture"] .c-carte-produit__ajout, .c-carte-produit[data-etat="rupture"] .c-carte-produit__acheter { display: none; } /* Chargement. Une ossature qui a la FORME du contenu attendu — la carte ne change pas de hauteur quand le contenu arrive, donc la grille ne saute pas. C'est aussi la contre-mesure au défaut le plus grave de la fiche : une grille qui se peuple côté client peut se rendre VIDE en gardant sa mise en page, et un harnais annonce alors « ok, 4 bandes ». Ici l'ossature est explicite. */ .c-carte-produit[data-etat="chargement"] .c-carte-produit__tuile, .c-carte-produit[data-etat="chargement"] .c-carte-produit__titre, .c-carte-produit[data-etat="chargement"] .c-carte-produit__descripteur, .c-carte-produit[data-etat="chargement"] .c-carte-produit__prix { background-color: var(--bg-subtle); color: transparent; position: relative; overflow: hidden; } /* L'ossature garde le RAYON de la tuile réelle. Vu à l'écran le 2026-08-22 : avec un rayon uniforme, la tuile d'attente avait des angles vifs quand la vraie tuile est arrondie — l'ossature n'avait plus la forme du contenu attendu, ce qui est précisément sa seule fonction. */ .c-carte-produit[data-etat="chargement"] .c-carte-produit__tuile { border-radius: var(--r-lg); } .c-carte-produit[data-etat="chargement"][data-variante="catalogue"] .c-carte-produit__tuile, .c-carte-produit[data-etat="chargement"][data-variante="achat"] .c-carte-produit__tuile { border-radius: var(--r-sm); } .c-carte-produit[data-etat="chargement"] .c-carte-produit__titre, .c-carte-produit[data-etat="chargement"] .c-carte-produit__descripteur, .c-carte-produit[data-etat="chargement"] .c-carte-produit__prix { border-radius: var(--r-xs); } /* Le prix seul ne fait pas la largeur d'une ligne : sans cette limite, l'ossature du prix s'étend sur toute la carte et annonce un contenu qui n'arrivera pas. */ .c-carte-produit[data-etat="chargement"] .c-carte-produit__prix { max-width: 40%; } .c-carte-produit[data-etat="chargement"] .c-carte-produit__tuile > * { visibility: hidden; } /* Le balayage est un FOND ANIMÉ : un `::after` translaté crée un débordement défilable réel à l'intérieur d'un `overflow: hidden`, et la sonde le remonte à juste titre comme « contenu rogné ». Voir la note dans primitives.css. */ .c-carte-produit[data-etat="chargement"] .c-carte-produit__titre, .c-carte-produit[data-etat="chargement"] .c-carte-produit__tuile { background-image: linear-gradient(90deg, transparent, var(--bg-surface), transparent); background-repeat: no-repeat; background-size: 200% 100%; animation: ossature-balayage var(--dur-xl) var(--ease-soft) infinite; } @media (prefers-reduced-motion: reduce) { .c-carte-produit[data-etat="chargement"] .c-carte-produit__titre, .c-carte-produit[data-etat="chargement"] .c-carte-produit__tuile { animation: none; } } /* Désactivé — le produit existe mais n'est pas commandable (précommande close). */ .c-carte-produit[data-etat="desactive"] { opacity: .6; } .c-carte-produit[data-etat="desactive"] .c-carte-produit__titre a::after { content: none; } /* ═══ lib/components/comparatif-condense.css ═══ */ /* FICHE 18 — comparatif condensé. --------------------------------------------------------------------------- ⚠ IL N'Y A AUCUN `overflow-x` DANS CE FICHIER, ET C'EST LE SUJET. Le défaut d'origine du thème est `blocks/product-comparison.liquid:71` : un `min-width: 480px` posé sur le conteneur d'un `overflow-x: auto` large de 350 px — la page entière débordait. La leçon n'est pas « mettre la largeur sur les enfants » ici : c'est qu'à 390 px un comparatif ne défile PAS. Il se réduit à deux colonnes et le visiteur choisit lesquelles. Mesure à l'appui : zéro conteneur scrollable sur toute la page de comparaison d'Apple, contre 107 px hors écran et sans indice chez B&O. Pas de grille, pas de bordure verticale, pas de fond alterné : l'alignement ligne à ligne suffit, et c'est ce qui fait lire le bloc comme un objet éditorial plutôt que comme un tableur. */ .c-comparatif-condense { display: grid; gap: var(--sp-4); } .c-comparatif-condense__titre { font-size: var(--fs-h2); letter-spacing: var(--tr-tight); } /* ---------- La barre de sélection collante --------------------------------- Mesurée chez Apple : sticky, top -1px, hauteur 60 px, z-index 10, deux `` NATIFS. */ .c-comparatif-condense__barre { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-2) var(--sp-0); background: var(--bg-page); } .c-comparatif-condense__choix { display: block; } .c-comparatif-condense__select { width: 100%; min-height: var(--tap-vise); padding: var(--sp-2) var(--sp-3); background: var(--bg-surface); color: var(--fg-1); border: 1px solid var(--line-rule); border-radius: var(--r-sm); font-size: var(--fs-body-sm); } /* ---------- Les en-têtes de colonne ------------------------------------------ Chaque colonne porte son prix ET sa CTA. Un comparatif sans chemin d'achat par colonne renvoie le visiteur en arrière. */ .c-comparatif-condense__entetes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; padding-bottom: var(--sp-4); } .c-comparatif-condense__entete { display: grid; gap: var(--sp-2); text-align: center; } .c-comparatif-condense__nom { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); } /* Le € rend comme un « C » en Cormorant : le prix reste en police de labeur. */ .c-comparatif-condense__prix { font-size: var(--fs-body); color: var(--fg-2); } /* ---------- Les rangées ------------------------------------------------------- Le LIBELLÉ au-dessus de la rangée, en petites capitales espacées — modèle B&O. Apple s'en passe parce que ses valeurs sont auto-descriptives (« GPS », « Puce S10 ») ; « 4,2 L » ou « IP54 » ne le sont pas. On n'emprunte à Apple que la réduction à deux colonnes. */ .c-comparatif-condense__lignes { display: grid; } .c-comparatif-condense__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-4); border-top: 1px solid var(--line-hair); } .c-comparatif-condense__libelle { grid-column: 1 / -1; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-3); } .c-comparatif-condense__libelle sup { letter-spacing: var(--tr-normal); } .c-comparatif-condense__valeur { font-size: var(--fs-body-sm); font-weight: 500; line-height: var(--lh-normal); text-align: center; color: var(--fg-1); display: grid; gap: var(--sp-1); align-content: start; } /* La nuance honnête de B&O : quand la valeur gagnante a une limite, elle est écrite DANS la cellule. C'est le motif qui rend un comparatif crédible plutôt que promotionnel — et il ne coûte qu'une ligne de gris. */ .c-comparatif-condense__nuance { font-size: var(--fs-caption); font-weight: 400; color: var(--fg-3); line-height: var(--lh-normal); } .c-comparatif-condense__complet { margin-top: var(--sp-2); } .c-comparatif-condense__note { max-width: 44ch; } /* La troisième colonne n'existe pas sous 700 px. Ce n'est pas une fatalité, c'est un réglage — et sa valeur par défaut sous 700 px est « absente ». */ .c-comparatif-condense__troisieme { display: none; } /* ---------- Les variantes ---------------------------------------------------- `mini` — la version courte posée sur une fiche produit (Apple, AirPods) : pas de barre de sélection, pas de prix par colonne, juste les valeurs et la porte de sortie. */ .c-comparatif-condense[data-variante="mini"] .c-comparatif-condense__barre { display: none; } .c-comparatif-condense[data-variante="mini"] .c-comparatif-condense__prix, .c-comparatif-condense[data-variante="mini"] .c-comparatif-condense__entete .b { display: none; } .c-comparatif-condense[data-variante="mini"] .c-comparatif-condense__nom { font-family: var(--font-ui); font-size: var(--fs-body-sm); } /* ---------- Les états -------------------------------------------------------- */ .c-comparatif-condense__vide, .c-comparatif-condense__erreur { display: none; } .c-comparatif-condense[data-etat="vide"] .c-comparatif-condense__barre, .c-comparatif-condense[data-etat="vide"] .c-comparatif-condense__entetes, .c-comparatif-condense[data-etat="vide"] .c-comparatif-condense__lignes, .c-comparatif-condense[data-etat="vide"] .c-comparatif-condense__complet { display: none; } .c-comparatif-condense[data-etat="vide"] .c-comparatif-condense__vide { display: grid; border: 1px dashed var(--line-rule); border-radius: var(--r-card); } .c-comparatif-condense[data-etat="chargement"] .c-comparatif-condense__valeur { color: transparent; position: relative; } .c-comparatif-condense[data-etat="chargement"] .c-comparatif-condense__valeur::before { content: ""; display: block; height: var(--sp-4); width: 70%; margin-inline: auto; border-radius: var(--r-xs); background: var(--bg-subtle); } .c-comparatif-condense[data-etat="chargement"] .c-comparatif-condense__complet { visibility: hidden; } .c-comparatif-condense[data-etat="erreur"] .c-comparatif-condense__erreur { display: flex; } .c-comparatif-condense[data-etat="erreur"] .c-comparatif-condense__lignes { display: none; } /* long — une valeur qui prend trois lignes et une nuance de 140 caractères. Les deux colonnes restent alignées ligne à ligne : c'est tout ce qui tient ce comparatif debout, puisqu'il n'a ni bordure ni fond alterné pour le faire. */ .c-comparatif-condense[data-etat="long"] .c-comparatif-condense__valeur { text-align: left; } .c-comparatif-condense[data-etat="long"] .c-comparatif-condense__ligne { gap: var(--sp-2) var(--sp-3); } /* rupture — la colonne reste comparable, elle n'est plus commandable. */ .c-comparatif-condense[data-etat="rupture"] .c-comparatif-condense__entete:first-child .b { background: var(--bg-subtle); color: var(--fg-3); pointer-events: none; } /* succes — la sélection a été appliquée aux deux colonnes. */ .c-comparatif-condense[data-etat="succes"] .c-comparatif-condense__select { border-color: var(--fg-data); } /* desactive — le comparatif est visible mais figé (aperçu d'éditeur de thème). */ .c-comparatif-condense[data-etat="desactive"] .c-comparatif-condense__select, .c-comparatif-condense[data-etat="desactive"] .c-comparatif-condense__entete .b { opacity: .5; pointer-events: none; } /* Au-dessus de 700 px, et pas avant, la troisième colonne a le droit d'exister. */ @media (min-width: 43.75rem) { .c-comparatif-condense[data-variante="trois"] .c-comparatif-condense__troisieme { display: grid; } .c-comparatif-condense[data-variante="trois"] .c-comparatif-condense__entetes, .c-comparatif-condense[data-variante="trois"] .c-comparatif-condense__ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-comparatif-condense[data-variante="trois"] .c-comparatif-condense__barre { display: none; } } /* Le lien de reprise de l'état d'erreur. Vu à l'écran le 2026-08-22 : il rendait en BLEU souligné, la couleur de lien par défaut du navigateur, au milieu d'une palette porcelaine et graphite. Aucune sonde ne le remonte — ce n'est ni un débordement ni une cible trop petite, c'est juste faux. ⚠ PRIMITIVE À PROMOUVOIR : la vraie place de cette règle est `.etat-erreur a { color: var(--fg-1); }` dans `primitives.css`. Le défaut est dans TOUS les états d'erreur de la bibliothèque, pas seulement ici ; en attendant que le fichier partagé soit rouvert, chaque composant du lot le corrige chez lui. */ .c-comparatif-condense__erreur a { color: var(--fg-1); } /* ═══ lib/components/en-tete-collection.css ═══ */ /* FICHE 31 — en-tête de collection. Cotes transposées de gymshark.com (le seul en-tête du corpus à tout avoir, relevé au pixel), whisker.com (les rayons), litter-robot.com (la bannière à panneau), avec ridge.com en contre-modèle. Le rythme vertical est DÉCROISSANT et c'est mesuré, pas approximé : 9 px entre sur-titre et H1, 26 px après le H1, 21 px avant « Voir plus », 67 px avant le premier composant de navigation. Les blancs s'ouvrent en descendant. Une grille régulière à 24 px partout donnerait une page plate. */ .c-en-tete-collection { /* La barre se gare immédiatement sous ce qui colle au-dessus d'elle, quelle qu'en soit la hauteur du moment : 87 px dans une session Gymshark, 120 px dans une autre, selon que le bandeau d'annonce est affiché. C'est le MÉCANISME qu'on copie, jamais le nombre. L'en-tête de site met ce jeton à jour ; en atelier il vaut 0. */ --chrome-h: 0px; display: block; } /* Gouttière unique de 16 px sur tout l'en-tête — mesuré chez Gymshark : le sur-titre, le H1, la description et les liens commencent tous exactement à x = 16. Une seule gouttière par surface. */ .c-en-tete-collection__texte { padding-block: var(--sp-6) var(--sp-5); } .c-en-tete-collection__rayon { display: block; margin-bottom: var(--sp-1); } .c-en-tete-collection__titre { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin-bottom: var(--sp-5); } .c-en-tete-collection__preuve { margin-bottom: var(--sp-4); } /* La description : quatre lignes, puis « Voir plus ». Le texte long sert au référencement ; il ne doit pas repousser la grille de 300 px. La troncature est CSS — le texte complet reste dans le DOM, donc indexé. */ .c-en-tete-collection__desc { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .c-en-tete-collection[data-deplie="oui"] .c-en-tete-collection__desc { display: block; overflow: visible; } .c-en-tete-collection__plus { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap-vise); margin-top: var(--sp-2); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--fg-1); text-decoration: underline; text-underline-offset: 0.25em; } .c-en-tete-collection[data-deplie="oui"] .c-en-tete-collection__plus-chevron { transform: rotate(180deg); } .c-en-tete-collection[data-deplie="oui"] .c-en-tete-collection__plus-mot { visibility: hidden; } .c-en-tete-collection[data-deplie="oui"] .c-en-tete-collection__plus::before { content: "Voir moins"; margin-right: calc(var(--sp-6) * -1); } /* 67 px avant le premier composant de navigation : le blanc le plus large de l'en-tête, et il est en bas. */ .c-en-tete-collection__freres { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-7); } .c-en-tete-collection__freres a { display: inline-flex; align-items: center; min-height: var(--tap-vise); font-size: var(--fs-body-sm); color: var(--fg-2); text-decoration: underline; text-underline-offset: 0.25em; } .c-en-tete-collection__freres a:hover { color: var(--fg-1); } /* ---------- Les rayons ------------------------------------------------------- Le modèle Whisker : quatre tuiles en défilement horizontal, la courante en fond plein et les autres au filet. C'est la navigation que quatre références réclament — un panneau de filtres sur quatre produits est un composant vide qui annonce un catalogue qu'on n'a pas. ⚠ La largeur se donne aux ENFANTS du rail, jamais au rail (piège B1). */ .c-en-tete-collection__rayons { padding-block: var(--sp-2) var(--sp-6); } .c-en-tete-collection__rayon-tuile { display: grid; gap: var(--sp-2); width: 8rem; padding: var(--sp-3); border: 1px solid var(--line-hair); border-radius: var(--r-card); background: var(--bg-surface); color: var(--fg-1); text-decoration: none; } .c-en-tete-collection__rayon-tuile[aria-current="page"] { background: var(--bg-inverse); border-color: transparent; color: var(--fg-on-dark); } .c-en-tete-collection__vignette { display: block; } .c-en-tete-collection__vignette .c-visuel-marque { border-radius: var(--r-sm); } .c-en-tete-collection__vignette .c-visuel-marque__nom { display: none; } .c-en-tete-collection__rayon-nom { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); } /* Chaque tuile porte une PHRASE DE VENTE, pas seulement un nom : un nom seul n'aide pas à choisir. */ .c-en-tete-collection__rayon-phrase { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-2); } .c-en-tete-collection__rayon-tuile[aria-current="page"] .c-en-tete-collection__rayon-phrase { color: var(--bg-subtle); } /* ---------- La barre de contrôle -------------------------------------------- Trois cellules : Tri · n produits · Filtres. Le tri à GAUCHE, les filtres à DROITE, le compte au milieu — ordre de DOM identique à l'ordre visuel. Filet supérieur pleine largeur, PAS de filet inférieur (la barre est ouverte en bas), séparateurs verticaux INSET : 60 px dans une barre de 61, donc affleurants en haut et pas en bas. Ici 64 + 1 px, parce que le pas de la marque prime sur la copie au pixel. */ .c-en-tete-collection__barre { position: sticky; top: var(--chrome-h); z-index: 5; /* Les deux déclencheurs se dimensionnent à leur libellé, le compte prend ce qui reste. Trois colonnes ÉGALES donnaient 119 px chacune à 390 px d'écran, et « Filtres » + son badge + son chevron n'y tiennent pas : 50 px de contenu rognés, mesurés le 2026-08-22. Un tiers de la largeur n'est pas une mise en page, c'est une supposition. */ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; background: var(--bg-page); /* OPAQUE — sinon une carte transparaît */ border-top: 1px solid var(--line-hair); margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); } .c-en-tete-collection__cellule { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--sp-8); } .c-en-tete-collection__cellule + .c-en-tete-collection__cellule::before { content: ""; position: absolute; left: 0; top: 0; bottom: var(--sp-1); width: 1px; background: var(--line-hair); } .c-en-tete-collection__compte { font-size: var(--fs-body-sm); color: var(--fg-2); text-align: center; } /* ---------- La bannière — variante, jamais le défaut ------------------------ Modèle Litter-Robot : le texte dans un panneau plein À CÔTÉ de l'image, jamais posé dessus. Plafond dur : la bannière ne dépasse pas 240 px à 390 px de large, soit moins de 30 % du viewport — la grille doit être amorcée au premier écran. Les 379 px de Ridge en coûtent 45 %, et un visiteur venu d'une publicité y voit une image de marque, pas une offre. */ .c-en-tete-collection__banniere { display: none; } .c-en-tete-collection[data-variante="banniere"] .c-en-tete-collection__banniere { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; max-height: 15rem; overflow: hidden; border-radius: var(--r-card); margin-top: var(--sp-5); } .c-en-tete-collection[data-variante="banniere"] .c-en-tete-collection__banniere-texte { display: grid; align-content: center; gap: var(--sp-2); padding: var(--sp-5); background: var(--bg-subtle); } .c-en-tete-collection[data-variante="banniere"] .c-en-tete-collection__titre { margin-bottom: 0; } .c-en-tete-collection[data-variante="banniere"] .c-en-tete-collection__texte { padding-top: var(--sp-5); } .c-en-tete-collection__banniere .c-visuel-marque { height: 100%; border-radius: 0; } /* ---------- Les états -------------------------------------------------------- */ .c-en-tete-collection__vide, .c-en-tete-collection__erreur, .c-en-tete-collection__avis { display: none; } .c-en-tete-collection[data-etat="vide"] .c-en-tete-collection__vide { display: grid; } .c-en-tete-collection[data-etat="vide"] .c-en-tete-collection__desc, .c-en-tete-collection[data-etat="vide"] .c-en-tete-collection__plus, .c-en-tete-collection[data-etat="vide"] .c-en-tete-collection__rayons { display: none; } .c-en-tete-collection[data-etat="erreur"] .c-en-tete-collection__erreur { display: flex; margin-top: var(--sp-4); } .c-en-tete-collection[data-etat="erreur"] .c-en-tete-collection__desc { display: none; } /* Rupture — toute la collection est en réapprovisionnement. La page reste consultable et l'information est donnée UNE fois, sans date : la promesse de livraison a une seule source de vérité dans la boutique. */ .c-en-tete-collection[data-etat="rupture"] .c-en-tete-collection__avis { display: inline-flex; margin-top: var(--sp-4); } /* Succès — le filtrage a abouti. Le compte est déjà en `role="status"` : il est annoncé sans qu'on ait à ajouter une seconde région vivante, qui se parlerait par-dessus la première. */ .c-en-tete-collection[data-etat="succes"] .c-en-tete-collection__compte { color: var(--fg-1); font-weight: 500; } /* Chargement — l'ossature a la FORME du contenu attendu : le titre garde sa hauteur, la description ses quatre lignes, le compte sa largeur de nombre. La page ne saute pas à l'arrivée des données. */ .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__titre, .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__preuve, .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__compte { background: var(--bg-subtle); color: transparent; border-radius: var(--r-xs); position: relative; overflow: hidden; } .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__compte { max-width: 7rem; } .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__desc { background: var(--bg-subtle); color: transparent; border-radius: var(--r-xs); } .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__titre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--bg-surface), transparent); transform: translateX(-100%); animation: ossature-balayage var(--dur-xl) var(--ease-soft) infinite; } @media (prefers-reduced-motion: reduce) { .c-en-tete-collection[data-etat="chargement"] .c-en-tete-collection__titre::after { animation: none; } } /* Long — un nom de collection à rallonge et une description de douze lignes. Le titre passe à la ligne et ne se tronque JAMAIS : c'est le mot-clé de la page et le seul repère du visiteur arrivé par un lien externe. La description, elle, garde ses quatre lignes. */ .c-en-tete-collection[data-etat="long"] .c-en-tete-collection__titre { font-size: var(--fs-h2); overflow-wrap: break-word; } /* Désactivé — la barre est inerte (collection en aperçu, non publiée). Le compte reste lisible : c'est la seule information qui ne dépend d'aucune action. */ .c-en-tete-collection[data-etat="desactive"] .c-en-tete-collection__barre { opacity: .55; } .c-en-tete-collection[data-etat="desactive"] .c-en-tete-collection__cellule { pointer-events: none; } /* ---------- Au-delà du téléphone --------------------------------------------- */ @media (min-width: 48rem) { .c-en-tete-collection__rayon-tuile { width: 11rem; } } /* ⚠ LA GARDE QUI MANQUAIT — `min-width: 0` sur les cellules de la barre. Mesuré le 2026-08-22 : le bloc de filtres faisait **555 px dans une cellule de 119 px**, et la page entière défilait horizontalement (978 px pour 390). Ce n'est pas un défaut du composant de filtres : c'est le comportement par défaut d'un enfant de grille ou de flex, dont le `min-width: auto` l'empêche de descendre sous la largeur de son contenu. La rangée de puces avait beau porter `overflow-x: auto`, elle n'était jamais contrainte, donc elle ne défilait pas — elle poussait. C'est le voisin du piège B1, et il est plus sournois : B1 met un `min-width` explicite, ici personne n'écrit rien et le défaut vient du défaut. */ .c-en-tete-collection__cellule { min-width: 0; } .c-en-tete-collection__cellule > * { max-width: 100%; } /* Dernier verrou de la barre de contrôle. Les cellules sont étroites (119 px à 390 px d'écran) et hébergent deux composants complets — tri et filtres — dont les panneaux sont en `position: fixed`. `overflow: clip` retient ce qui est posé en flux ou en absolu SANS toucher aux panneaux fixes, qui s'ouvrent par définition hors de la cellule. Sans lui, la page défilait encore de 35 px après les corrections du `.sr-only` et du débordement de rail — un reliquat qu'aucune règle de composant ne rattrapait, parce que la barre elle-même déborde de ±16 px de son en-tête. */ .c-en-tete-collection__cellule { overflow: clip; } /* La rangée de puces de filtres actifs N'A PAS SA PLACE dans une cellule de barre : elle est pleine largeur par nature, et une cellule d'un tiers d'écran la force à défiler dans 119 px, ce qui la rend inutilisable. Dans ce contexte, le composant n'expose que son déclencheur ; les puces se rendent sous la barre, par une instance dédiée. */ .c-en-tete-collection__cellule .c-filtres__actifs { display: none; } /* ⚠ La règle ci-dessus NE SUFFIT PAS et ne peut pas suffire : la règle d'état du composant (`.c-filtres[data-etat="vide"] .c-filtres__actifs`) a une spécificité plus forte et gagne quoi qu'il arrive. La séparation appartient au composant : employer `data-variante="declencheur"` dans la cellule. Gardée comme filet, jamais comme mécanisme. */ /* ═══ lib/components/en-tete.css ═══ */ /* FICHE 22 — en-tête. Gabarit mesuré chez huit marques sur neuf à 390 px : [menu x=16] [recherche] ——— LOGO CENTRÉ ——— [compte?] [panier x=330] Gymshark donne les abscisses au pixel : quatre cibles de 44 × 44 px, menu à x=16, panier à x=330 (= 390 − 16 − 44). C'est mesuré, pas estimé. Hauteurs mesurées : B&O 55, Litter-Robot 55, Jones Road 74, Gymshark 76. Les 74–76 px sont du confort de catalogue géant. On tient 56, donc bandeau 48 + en-tête 56 = 104 px ≤ 112 px cumulés. */ /* Deux jetons de CHROME, déclarés en portée globale parce que trois composants du lot en dépendent : l'en-tête les pose, le tiroir de navigation et la feuille de recherche s'ancrent dessous. Déclarés sur `.c-en-tete`, ils ne résoudraient pas chez les deux autres — et un `var()` qui ne résout pas n'est pas une panne à l'écran, c'est un `top: auto` silencieux. ⚠ À PROMOUVOIR dans `primitives.css` : ce sont des constantes de mise en page partagée, pas des décisions d'en-tête. */ :root { --h-entete: calc(var(--sp-7) + var(--sp-2)); /* 56 px */ /* Le z-index de l'en-tête est UNIQUE et déclaré : au-dessus du contenu, en dessous du voile (80), du tiroir (90) et de la modale (95) de `primitives.css`. Un en-tête qui passe par-dessus son propre tiroir de menu est le défaut classique de cette famille. */ --z-entete: 60; } .c-en-tete { position: sticky; top: 0; z-index: var(--z-entete); background: var(--bg-page); border-bottom: 1px solid transparent; transition: background-color var(--dur-sm) var(--ease-standard), border-color var(--dur-sm) var(--ease-standard), color var(--dur-sm) var(--ease-standard); } /* Le `
` est STATIQUE — c'est le conteneur qui colle. Structure copiée du réel pour que le port vers le `header-group` Shopify soit une traduction. */ .c-en-tete__barre { position: static; display: grid; /* Trois colonnes, la centrale en `auto` : le logo ne peut PAS recouvrir les pictogrammes, et les deux gouttières latérales restent égales donc le logo est optiquement centré même si le groupe d'actions est plus large que le bouton menu. */ grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--h-entete); padding-inline: var(--sp-4); } .c-en-tete__menu { justify-self: start; } .c-en-tete__actions { justify-self: end; display: flex; align-items: center; } /* Le lien du logo se dimensionne à son dessin, jamais à la place disponible. */ .c-en-tete__logo { justify-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; min-width: 0; /* pour que l'ellipse de l'état long morde */ } .c-en-tete__marque { width: var(--sp-5); height: var(--sp-5); } .c-en-tete__mot { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); white-space: nowrap; } /* Le panier porte un compteur, et RIEN quand il est vide : le `0` gravé en permanence dans le pictogramme de Jones Road affiche en continu que le panier est vide. Le compteur est `aria-hidden` — il est déjà dans le nom accessible du lien (« Panier, 2 articles »), et l'annoncer deux fois donne « Panier 2 articles 2 ». */ .c-en-tete__panier { position: relative; } .c-en-tete__compteur { position: absolute; top: var(--sp-1); right: var(--sp-1); min-width: var(--sp-4); height: var(--sp-4); display: grid; place-items: center; padding-inline: var(--sp-1); border-radius: var(--r-pill); background: var(--c-soft-amber); color: var(--c-deep-graphite); font-size: var(--fs-caption); font-weight: 500; line-height: 1; } /* ---------- Les deux peaux --------------------------------------------------- Une seule transition, ≤ 200 ms, et JAMAIS de `backdrop-filter` : le flou coûte un repaint par image sur mobile et brouille le logo. */ /* Sur un héros pleine image : fond transparent, marque et pictogrammes en porcelaine. Mesuré chez Gymshark (`background: transparent` + texte blanc au repos, `rgb(255,255,255)` + texte noir une fois épinglé). */ .c-en-tete[data-variante="sur-media"] { background: transparent; color: var(--fg-on-dark); border-bottom-color: transparent; } .c-en-tete[data-variante="sur-media"] .c-en-tete__compteur { background: var(--fg-on-dark); color: var(--c-deep-graphite); } /* Épinglée : porcelaine opaque, filet 1 px. Pas d'auto-masquage à la Gymshark — sur une fiche produit de 12 000 px, obliger l'acheteur à remonter d'abord pour faire réapparaître la barre ajoute un geste à chaque décision. */ .c-en-tete[data-variante="epinglee"] { background: var(--bg-page); color: var(--fg-1); border-bottom-color: var(--line-hair); box-shadow: var(--sh-1); } /* ---------- Les états --------------------------------------------------------- */ /* VIDE — panier vide. Aucune pastille : l'absence est l'information. */ .c-en-tete[data-etat="vide"] .c-en-tete__compteur { display: none; } /* CHARGEMENT — le compte du panier n'est pas encore connu (rendu de section différé). On montre une ossature à la place, jamais un « 0 » provisoire : un 0 faux est un message, une ossature est une attente. */ .c-en-tete[data-etat="chargement"] .c-en-tete__compteur { background: var(--bg-subtle); color: transparent; } .c-en-tete[data-etat="chargement"] .c-en-tete__mot { border-radius: var(--r-xs); } /* LONG — le cas qui casse la barre. Un nom de marque long, ou un compteur à deux chiffres, ou les deux : la colonne centrale doit céder AVANT que le groupe d'actions ne soit poussé hors de l'écran. Le mot s'ellipse, les cibles de 44 px ne bougent pas d'un pixel. */ .c-en-tete[data-etat="long"] .c-en-tete__mot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-en-tete[data-etat="long"] .c-en-tete__logo { min-width: 0; overflow: hidden; } /* DÉSACTIVÉ — le parcours de paiement (fiche 46) : l'en-tête reste pour la marque et la sortie de secours, mais on ne repart pas naviguer depuis la caisse. Menu et recherche deviennent inertes plutôt que de disparaître : une barre qui perd deux objets d'une page à l'autre se lit comme un bug. */ .c-en-tete[data-etat="desactive"] .c-en-tete__menu, .c-en-tete[data-etat="desactive"] .c-en-tete__recherche { opacity: .4; pointer-events: none; } /* ═══ lib/components/faq-accordeon.css ═══ */ /* FICHE 20 — FAQ en accordéon. --------------------------------------------------------------------------- Une règle porte tout le composant : une rangée est un `` PLEINE LARGEUR d'au moins 56 px de haut, avec un chevron à ABSCISSE FIXE à droite et un filet en retrait entre les rangées. Elle vient d'une comparaison, pas d'un goût. Tuft+Paw pose sa flèche EN LIGNE juste après le texte : son abscisse change à chaque question (« How do I clean it? ↓ » finit au tiers de la largeur, la question suivante en fin de deuxième ligne). L'œil perd sa ligne de balayage verticale et la zone visiblement cliquable change de forme à chaque rangée. Le chevron d'Apple coûte exactement le même nombre de pixels et supprime les deux défauts. Le geste réel sur téléphone est le pouce sur la rangée entière — jamais sur le glyphe. B&O le mesure bien : sa pastille noire fait 22 px, mais la cible est le bouton de 390 × 60 px qui la contient. */ .c-faq-accordeon { display: grid; gap: var(--sp-5); } .c-faq-accordeon__entete { display: grid; gap: var(--sp-3); max-width: 26ch; } .c-faq-accordeon__titre { letter-spacing: var(--tr-tight); text-wrap: balance; } .c-faq-accordeon__legende { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); max-width: 46ch; } /* ═══ La liste ═══════════════════════════════════════════════════════════════ Aucun `gap` : ce sont les filets et le rythme vertical du padding qui séparent, comme chez Apple (~48 px au-dessus et en dessous de chaque question). Un `gap` en plus doublerait l'air et casserait le pas régulier. */ .c-faq-accordeon__liste { display: grid; } .c-faq-accordeon__rangee { position: relative; } /* Le filet EN RETRAIT (modèle Apple) : il commence et finit à l'intérieur des marges du conteneur, il ne va pas d'un bord à l'autre. Tracé en pseudo-élément positionné — jamais en `border` — pour que le retrait soit une propriété du filet et non une marge sur la rangée, qui décalerait le texte avec lui. Aucun `transform` ici : un pseudo-élément translaté crée une région de débordement défilable réelle (piège n°6). */ .c-faq-accordeon__rangee + .c-faq-accordeon__rangee::before { content: ""; position: absolute; top: 0; inset-inline: var(--sp-5); border-top: 1px solid var(--line-hair); } /* ⚠ Deuxième piège de la fiche, et il est mesuré : sur la fiche produit de Tuft+Paw la barre d'achat collante (~133 px) recouvre la moitié de la ligne « Frequently Asked Questions » — on lit le haut des lettres, pas le bas. C'est le défaut classique de l'ancre : on saute vers `#faq` et la première rangée atterrit sous la barre. La marge de défilement est donc posée sur la section ET sur chaque rangée (un lien profond peut viser une question). La valeur doit valoir la hauteur RÉELLE de la barre collante, vérifiée en capture et jamais déduite du CSS. */ .c-faq-accordeon, .c-faq-accordeon__rangee { scroll-margin-top: var(--sp-9); } /* ═══ La rangée ══════════════════════════════════════════════════════════════ */ .c-faq-accordeon__question { display: grid; grid-template-columns: minmax(0, 1fr) var(--sp-5); align-items: start; gap: var(--sp-4); /* 56 px : le plancher de la règle. B&O mesure 60 px pour un padding 20/16 ; ici padding 16 + une ligne de 22 px donne 54, donc le plancher fait le dernier pixel de travail. */ min-height: calc(var(--sp-7) + var(--sp-2)); padding-block: var(--sp-4); cursor: pointer; list-style: none; } .c-faq-accordeon__question::-webkit-details-marker { display: none; } /* La question est en GRAS et en casse de phrase, et elle a le droit de se replier sur trois lignes. On ne tronque pas une question : une question tronquée n'est plus une question. */ .c-faq-accordeon__libelle { font-size: var(--fs-body-lg); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); } /* Le chevron. Colonne fixe, donc abscisse constante d'une rangée à l'autre : c'est toute la thèse de la fiche. Il est aligné sur la PREMIÈRE LIGNE (`align-items: start`), pas centré sur le bloc — sinon il dérive verticalement dès qu'une question passe sur deux lignes. */ .c-faq-accordeon__chevron { color: var(--fg-3); transition: transform var(--dur-sm) var(--ease-standard); } .c-faq-accordeon__rangee[open] .c-faq-accordeon__chevron { transform: rotate(180deg); } .c-faq-accordeon__rangee[open] .c-faq-accordeon__libelle { color: var(--fg-1); } /* Le panneau. Réservé à droite de la largeur de la colonne du chevron, sinon la réponse passe sous le glyphe et l'alignement des deux blocs se défait. */ .c-faq-accordeon__panneau { padding-right: var(--sp-7); padding-bottom: var(--sp-5); color: var(--fg-2); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); max-width: 60ch; } /* ═══ Les téléchargements — fin du bloc technique, jamais d'une FAQ ══════════ */ .c-faq-accordeon__telechargements { display: grid; gap: var(--sp-2); list-style: none; margin: var(--sp-0); padding: var(--sp-0); } .c-faq-accordeon__telechargement { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-vise); color: var(--fg-1); font-size: var(--fs-body-sm); } /* ═══ La sortie vers un humain — la dernière rangée n'est pas une question ═══ */ .c-faq-accordeon__sortie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: var(--sp-4); font-size: var(--fs-body-sm); color: var(--fg-2); } .c-faq-accordeon__sortie-lien { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-vise); color: var(--fg-1); font-weight: 500; } .c-faq-accordeon__note { max-width: 52ch; } /* ═══ Variante TECHNIQUE ═════════════════════════════════════════════════════ Ce que B&O range dans cet accordéon n'est pas une FAQ : c'est la fiche technique (SON, DESIGN, PUISSANCE, CONNECTIVITÉ) suivie de deux téléchargements. Rangées pleine largeur, libellés courts. ⚠ Troisième piège de la fiche, et il se joue ICI : chez B&O ces libellés sont écrits en capitales DANS LE CONTENU (`text-transform: none` mesuré). Un lecteur d'écran épelle alors les mots, la recherche interne ne les retrouve pas et la traduction hérite d'un texte hurlé. La mise en capitales est donc faite par le style, sur un contenu écrit en casse normale. */ .c-faq-accordeon[data-variante="technique"] .c-faq-accordeon__libelle { font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); } .c-faq-accordeon[data-variante="technique"] .c-faq-accordeon__question { min-height: calc(var(--sp-7) + var(--sp-3)); align-items: center; } /* Filet pleine largeur : il convient à un bloc technique, pas à une FAQ éditoriale — c'est exactement la distinction que fait la fiche. */ .c-faq-accordeon[data-variante="technique"] .c-faq-accordeon__rangee + .c-faq-accordeon__rangee::before { inset-inline: var(--sp-0); } .c-faq-accordeon[data-variante="technique"] .c-faq-accordeon__panneau { font-size: var(--fs-body-sm); } /* ═══ Les états ══════════════════════════════════════════════════════════════ */ .c-faq-accordeon__vide, .c-faq-accordeon__erreur { display: none; } /* vide — une FAQ se remplit des questions réellement posées. Écrire huit questions d'avance pour remplir la page produit un bloc que personne n'a demandé, et qui ne répond à personne. */ .c-faq-accordeon[data-etat="vide"] .c-faq-accordeon__liste, .c-faq-accordeon[data-etat="vide"] .c-faq-accordeon__telechargements, .c-faq-accordeon[data-etat="vide"] .c-faq-accordeon__sortie { display: none; } .c-faq-accordeon[data-etat="vide"] .c-faq-accordeon__vide { display: grid; border: 1px dashed var(--line-rule); border-radius: var(--r-card); } /* erreur — la sortie vers un humain SURVIT à la panne. C'est même le seul moment où elle compte vraiment. */ .c-faq-accordeon[data-etat="erreur"] .c-faq-accordeon__liste { display: none; } .c-faq-accordeon[data-etat="erreur"] .c-faq-accordeon__erreur { display: flex; } /* chargement — l'ossature a la forme de rangées, donc la page ne saute pas quand les questions arrivent. Le balayage est un FOND ANIMÉ : un pseudo-élément translaté crée un débordement défilable réel que la sonde remonte, à juste titre, comme « contenu rogné » (piège n°6). */ .c-faq-accordeon[data-etat="chargement"] .c-faq-accordeon__libelle { color: transparent; border-radius: var(--r-xs); background-color: var(--bg-subtle); background-image: linear-gradient(90deg, transparent, var(--bg-surface), transparent); background-repeat: no-repeat; background-size: 200% 100%; animation: ossature-balayage var(--dur-xl) var(--ease-soft) infinite; } .c-faq-accordeon[data-etat="chargement"] .c-faq-accordeon__chevron { visibility: hidden; } .c-faq-accordeon[data-etat="chargement"] .c-faq-accordeon__rangee { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .c-faq-accordeon[data-etat="chargement"] .c-faq-accordeon__libelle { animation: none; } } /* long — une réponse de 400 caractères. Elle respire, elle ne se tronque pas : la mesure s'élargit d'un cran et l'interligne reste ample. Une réponse coupée renvoie la question au service client, ce qui est le contraire du but. */ .c-faq-accordeon[data-etat="long"] .c-faq-accordeon__panneau { max-width: 68ch; font-size: var(--fs-body); } /* desactive — le bloc existe dans l'éditeur mais n'est pas publié. Il reste lisible, éteint, et surtout NON MANIPULABLE : un accordéon désactivé qui s'ouvre quand même ment sur son état. */ .c-faq-accordeon[data-etat="desactive"] { opacity: .55; } .c-faq-accordeon[data-etat="desactive"] .c-faq-accordeon__question { pointer-events: none; } /* Les états `rupture` et `succes` ne veulent rien dire pour une liste de questions : ni stock, ni confirmation. Les dessiner aurait produit deux écrans que personne ne verra — c'est une décision, pas un oubli. */ /* ═══ Au-delà du téléphone — on élargit, on ne redessine pas ═════════════════ */ @media (min-width: 48rem) { .c-faq-accordeon__question { padding-block: var(--sp-5); } .c-faq-accordeon__libelle { font-size: var(--fs-h3); } .c-faq-accordeon[data-variante="technique"] .c-faq-accordeon__libelle { font-size: var(--fs-body-sm); } } /* Le lien de reprise de l'état d'erreur. Vu à l'écran le 2026-08-22 : il rendait en BLEU souligné, la couleur de lien par défaut du navigateur, au milieu d'une palette porcelaine et graphite. Aucune sonde ne le remonte — ce n'est ni un débordement ni une cible trop petite, c'est juste faux. ⚠ PRIMITIVE À PROMOUVOIR : la vraie place de cette règle est `.etat-erreur a { color: var(--fg-1); }` dans `primitives.css`. Le défaut est dans TOUS les états d'erreur de la bibliothèque, pas seulement ici ; en attendant que le fichier partagé soit rouvert, chaque composant du lot le corrige chez lui. */ .c-faq-accordeon__erreur a { color: var(--fg-1); } /* ═══ lib/components/fil-ariane.css ═══ */ /* FICHE 25 — fil d'Ariane. Trois formes relevées, une seule est un fil. Le défaut Catharsis est le surtitre : zéro rangée ajoutée, zéro pixel volé au bloc d'achat. L'espace vertical au-dessus du prix est le plus cher de la boutique — une rangée de 40 px y descend le prix de 40 px sur CHAQUE fiche, et aucun des neuf sites ne paie ce prix. */ /* Par défaut, seul le surtitre existe. Les deux autres formes sont dans le balisage mais éteintes : le composant a une forme par variante, jamais trois barres empilées. */ .c-fil-ariane__retour, .c-fil-ariane__chemin, .c-fil-ariane__soeurs { display: none; } /* ---------- Forme 2 · surtitre (défaut) --------------------------------------- */ .c-fil-ariane__surtitre { font-size: var(--fs-label); /* 13 px — la fourchette mesurée est 12–13 */ line-height: var(--lh-snug); color: var(--fg-2); margin-bottom: var(--sp-2); } .c-fil-ariane__surtitre:empty { display: none; } /* ---------- Forme 1 · retour à un niveau -------------------------------------- */ .c-fil-ariane[data-variante="retour"] .c-fil-ariane__surtitre { display: none; } .c-fil-ariane[data-variante="retour"] .c-fil-ariane__retour { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-vise); /* 44, pas les ~40 de Dyson */ font-size: var(--fs-body-sm); color: var(--fg-1); text-decoration: underline; text-underline-offset: var(--sp-1); } /* ---------- Forme 3 · le vrai fil, si un jour il est imposé -------------------- */ .c-fil-ariane[data-variante="chemin"] .c-fil-ariane__surtitre { display: none; } .c-fil-ariane[data-variante="chemin"] .c-fil-ariane__chemin { display: block; } .c-fil-ariane__chemin ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; /* ⚠ PIÈGE B1 : surtout PAS de `overflow-x: auto` ici. Un fil qui défile horizontalement cache ses maillons du milieu, et il déborde la page dès qu'un enfant impose une largeur. Un fil trop long RETOURNE À LA LIGNE. */ gap: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); } .c-fil-ariane__chemin li { display: flex; align-items: center; } /* Le séparateur est en CSS, jamais dans le texte : chez Apple le « › » est un nœud de contenu, donc un lecteur d'écran l'annonce entre chaque maillon. */ .c-fil-ariane__chemin li + li::before { content: "\203A"; color: var(--fg-3); margin-right: var(--sp-2); } .c-fil-ariane__chemin a { color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-min); } .c-fil-ariane__chemin a:hover { color: var(--fg-1); text-decoration: underline; } /* Le maillon courant n'est pas un lien : un lien vers la page où l'on est déjà est une cible tactile qui ne fait rien. */ .c-fil-ariane__chemin [aria-current="page"] { color: var(--fg-1); display: inline-flex; align-items: center; min-height: var(--tap-min); } /* ---------- Règle 4 · les sœurs, la navigation latérale ------------------------ */ .c-fil-ariane[data-variante="soeurs"] .c-fil-ariane__surtitre { display: none; } .c-fil-ariane[data-variante="soeurs"] .c-fil-ariane__soeurs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding: 0; } .c-fil-ariane__soeurs a { display: inline-flex; align-items: center; min-height: var(--tap-vise); font-size: var(--fs-body-sm); color: var(--fg-2); text-decoration: underline; text-underline-offset: var(--sp-1); } .c-fil-ariane__soeurs a:hover { color: var(--fg-1); } /* ---------- Les états ---------------------------------------------------------- */ /* VIDE — le piège Shopify, et il est spécifique : sur `/collections/x/products/y`, l'objet `collection` est renseigné ; sur `/products/y` atteint depuis le menu, il est NUL. Un surtitre bâti sur `collection.title` disparaît donc selon le chemin d'arrivée — le même produit affiche parfois un parent, parfois rien, et personne ne comprend pourquoi. L'état vide ne montre RIEN à l'écran (pas un espace réservé, pas un tiret) ; le JSON-LD, lui, continue de sortir. La parade réelle est un surtitre alimenté par un métachamp produit, stable quelle que soit la route. */ .c-fil-ariane[data-etat="vide"] .c-fil-ariane__surtitre, .c-fil-ariane[data-etat="vide"] .c-fil-ariane__retour, .c-fil-ariane[data-etat="vide"] .c-fil-ariane__chemin { display: none; } /* LONG — cinq niveaux, ou un libellé de 40 caractères. Le fil passe à la ligne et le composant grandit ; il ne défile pas et ne se tronque pas. Un maillon coupé (« Litières autom… ») ne dit plus où l'on est, ce qui est la seule chose qu'un fil sache faire. */ .c-fil-ariane[data-etat="long"] .c-fil-ariane__chemin ol { flex-wrap: wrap; } .c-fil-ariane[data-etat="long"] .c-fil-ariane__surtitre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* DÉSACTIVÉ — le parent existe mais n'a pas de page publiée. Le surtitre reste affiché en texte simple : la règle 2 le prévoit explicitement (« sans lien si le parent est unique »). Un lien mort vaut moins qu'un mot. */ .c-fil-ariane[data-etat="desactive"] .c-fil-ariane__retour { pointer-events: none; opacity: .5; } .c-fil-ariane[data-etat="desactive"] .c-fil-ariane__chemin a { pointer-events: none; color: var(--fg-3); } /* ═══ lib/components/filtres.css ═══ */ /* FICHE 29 — filtres. Cotes transposées de gymshark.com (feuille basse, relevé au DOM + aux pixels le 2026-08-21) et de cutsclothing.com en contre-modèle. Les valeurs mesurées sont arrondies au pas de la marque (échelle 8 pt) : 68 px de rangée de groupe → `--sp-5` de rembourrage (66 px rendus), 51 px de barre d'action → `--sp-7` (48 px). Le pas du système prime sur la copie au pixel d'une autre marque ; ce qui se copie, c'est le RAPPORT entre les grandeurs, pas le nombre. */ /* ---------- Le déclencheur --------------------------------------------------- Un mot ET une icône, jamais une icône seule (§ 6). Il occupe toute sa cellule de barre : sur téléphone, la cible utile est la cellule, pas le mot. */ .c-filtres__declencheur { width: 100%; justify-content: center; gap: var(--sp-2); color: var(--fg-1); } .c-filtres__badge { margin-left: var(--sp-1); } /* ---------- Les puces de filtres actifs -------------------------------------- ⚠ AJOUTÉES CONTRE LE CORPUS. Aucune des quatre marques n'en a — et c'est un défaut, pas une doctrine : chez Gymshark, panneau fermé, rien à l'écran ne dit qu'un filtre est posé. Sans elles, le seul indice d'un filtrage actif est un nombre de résultats plus bas, ce qui ne s'interprète pas. La puce visible fait 32 px de haut ; la CIBLE en fait 44. Les deux ne sont pas la même boîte : le bouton porte le plancher tactile, la puce porte le dessin. Un filtre actif est UNE cible — le libellé et la croix ensemble, jamais deux cibles de 16 px collées. */ .c-filtres { min-width: 0; max-width: 100%; } /* voir la note d'en-tete-collection.css */ .c-filtres__actifs { display: none; min-width: 0; } .c-filtres__puces { list-style: none; padding-block: var(--sp-1); margin: 0; } .c-filtres__puces > li { display: flex; } .c-filtres__puce { display: inline-flex; align-items: center; min-height: var(--tap-vise); padding: 0; border: 0; background: none; cursor: pointer; } .c-filtres__puce .puce { min-height: var(--sp-6); white-space: nowrap; } .c-filtres__puce .i { color: var(--fg-3); } .c-filtres__puce:hover .puce { border-color: var(--fg-1); } .c-filtres__puce:hover .i { color: var(--fg-1); } /* Trois puces au repos ; les huit n'apparaissent qu'à l'état `long`, qui est le cas à concevoir : huit filtres empilés sur une largeur de 390 px. */ .c-filtres__puces > li:nth-child(n+4):not(:last-child) { display: none; } .c-filtres[data-etat="long"] .c-filtres__puces > li { display: flex; } .c-filtres__vider, .c-filtres__vider-2 { display: inline-flex; align-items: center; min-height: var(--tap-vise); padding-inline: var(--sp-3); white-space: nowrap; font-size: var(--fs-caption); color: var(--fg-2); text-decoration: underline; } /* ---------- L'état VIDE ------------------------------------------------------ Le cas réel le plus fréquent d'une collection filtrée, et le plus souvent bâclé. Il ne dit pas seulement « rien » : il dit CE QUI s'est passé (trois filtres en même temps) et il donne l'ISSUE, à un geste. */ .c-filtres__vide { display: none; } .c-filtres__vide-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; } .c-filtres[data-etat="vide"] .c-filtres__actifs, .c-filtres[data-etat="long"] .c-filtres__actifs, .c-filtres[data-etat="succes"] .c-filtres__actifs { display: block; } .c-filtres[data-etat="vide"] .c-filtres__vide { display: grid; } /* ---------- La feuille ------------------------------------------------------- `.tiroir--bas` porte déjà la mécanique (fixed, translateY, coins hauts arrondis, verrouillage du défilement). On n'en réécrit pas une. Ce qui s'ajoute ici est propre au filtrage : le plafond de hauteur qui laisse la page visible derrière, et la poignée. */ .c-filtres__feuille { max-height: 85vh; } /* La poignée : l'affordance qui dit « ça se ferme en tirant ». 48 × 4 px au pas de la marque (Gymshark : 40 × 5). */ .c-filtres__poignee { flex: none; width: var(--sp-7); height: var(--sp-1); margin: var(--sp-2) auto var(--sp-1); border-radius: var(--r-pill); background: var(--line-hair); } .c-filtres__titre { color: var(--fg-1); } /* Piège n° 8 — `Clear All` fait 52 × 20 px chez Gymshark : moins de la moitié du plancher, sur l'action la plus destructrice du panneau, dans le coin le moins atteignable au pouce. La bonne réponse est une ENCRE discrète et une CIBLE de 44 px, pas une cible discrète. */ .c-filtres__effacer { text-decoration: underline; } /* Une seule gouttière par surface (piège n° 7 : Gymshark en a deux, 24 px pour le contenu et 16 px pour la barre d'action, dans le même composant). */ .c-filtres__corps { padding: var(--sp-2) var(--sp-4) var(--sp-5); } /* ---------- Les groupes ------------------------------------------------------ Rangée d'en-tête pleine largeur, chevron à abscisse fixe à droite, filet de séparation entre les groupes. La rangée d'un groupe DÉPLIÉ se resserre — mesuré : 44 px déplié contre 68 px replié. La hauteur d'en-tête n'est donc pas constante, et 44 px reste le plancher. */ .c-filtres__groupe { border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line-hair); } .c-filtres__groupe:first-of-type { border-top: 0; } .c-filtres__groupe-titre { font: inherit; margin: 0; } .c-filtres__bascule { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: var(--sp-5) 0; border: 0; background: none; font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 500; color: var(--fg-1); text-align: left; cursor: pointer; } .c-filtres__groupe[data-ouvert="oui"] .c-filtres__bascule { padding-block: var(--sp-3); } .c-filtres__chevron { transition: transform var(--dur-sm) var(--ease-standard); } .c-filtres__groupe[data-ouvert="oui"] .c-filtres__chevron { transform: rotate(180deg); } .c-filtres__valeurs { display: none; padding-bottom: var(--sp-3); } .c-filtres__groupe[data-ouvert="oui"] .c-filtres__valeurs { display: grid; } /* ---------- Une valeur de facette -------------------------------------------- 48 px de haut minimum, contrôle de 24 px, 12 px entre le contrôle et le libellé, TOUTE la rangée cliquable par le `