/* ════════════════════════════════════════════════════════════════ ROTATIVE — boutique/presse.css La direction artistique du 16/08 : le site est un JOURNAL qui sort de la presse. Papier chiffon, typographie énorme, et la couleur n'existe jamais en fond de page — seulement en ENCRE qui tamponne, inonde et macule. Cahier d'exécution : panel du 16/08 (5 DA, 3 juges) ; règles d'image : CHARTE-GRAPHIQUE-BOUTIQUE.md. COMMENT CETTE FEUILLE TRAVAILLE : c'est une SURCOUCHE, chargée en DERNIER sur toutes les pages de la boutique. Elle ne réécrit pas le socle : elle RETOURNE sa table de variables (la nuit devient le papier, l'encre claire devient l'encre noire, les cinq univers reçoivent leurs encres d'imprimerie) — tout ce qui consomme les variables se réimprime tout seul. Puis elle pose les composants neufs : masthead, tampon de prix, point du registre, filets, inondations, encre vive. Si elle manque, la boutique retombe sur la peau sombre d'avant : moche mais entière. ON N'ANIME QUE transform ET opacity (une exception : la bascule de couleur d'une section inondée, un seul repaint par entrée de section, jamais continu). Zéro filter animé, zéro backdrop-filter. ════════════════════════════════════════════════════════════════ */ /* ══ 0. LA POLICE DU JOURNAL ══ Bricolage Grotesque 800, licence OFL, auto-hébergée (21,8 Ko). Ses encoches d'encrage géantes sont le concept devenu lettre. */ @font-face{ font-family:'Bricolage'; src:url('fonts/bricolage-800.woff2') format('woff2'); font-weight:800;font-style:normal;font-display:swap; } /* ══ 1. LA TABLE RETOURNÉE ══ Les variables du socle, réassignées. Le grain du papier est un SVG statique de 400 octets — jamais animé. */ :root{ --papier:#F2ECE0; --vermillon:#E8380D; --encre-filet:rgba(20,18,16,.08); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); --nuit:#F2ECE0; /* le fond N'EST PLUS la nuit : papier */ --nuit2:#EAE1D0; --creme:#141210; /* ce qui se posait en crème sur la nuit se pose désormais en encre sur papier */ --encre:#141210; --encre2:rgba(20,18,16,.74); --encre3:rgba(20,18,16,.52); --b20:rgba(20,18,16,.18); --or:#E8380D; /* l'or des accents devient le vermillon */ --or-clair:#E8380D; --or-fonce:#B02A0A; --f-titre:'Bricolage',Impact,'Arial Black',sans-serif; --f-corps:Georgia,'Times New Roman',serif; --tampon:cubic-bezier(.34,1.56,.64,1); --e-expo:cubic-bezier(.16,1,.3,1); --d-tampon:140ms;--d-filet:500ms;--d-inondation:650ms; --t-prix-tampon:clamp(1.6rem,3.4vw,2.9rem); /* LA LAINE RETOURNÉE : tout ce qui se posait en blanc translucide sur la nuit se pose désormais en encre translucide sur le papier. Les îlots restés sombres (héros, pages de rayon, sections inondées, boutons pleins) la re-retournent plus bas. */ --laine:20,18,16; --blanc:#141210; } /* ── LES ÎLOTS D'ENCRE : la laine y redevient papier ── ⚠ On redéclare les jetons DÉRIVÉS et pas seulement --laine : une variable héritée transmet sa valeur CALCULÉE — --b20 résolu sur reste encre dans l'îlot même si l'îlot retourne --laine. 17/08 : les pages de rayon et les inondations sont passées à la TRAME CLAIRE (conseil validé par le propriétaire : fond neutre, couleur en accents) — le HÉROS reste le seul îlot d'encre pleine, c'est la une du journal. */ #hero{ --laine:242,236,224; --blanc:#F2ECE0; --encre:#F2ECE0; --encre2:rgba(242,236,224,.74); --encre3:rgba(242,236,224,.55); --b5:rgba(242,236,224,.05); --b10:rgba(242,236,224,.10); --b20:rgba(242,236,224,.20); --b30:rgba(242,236,224,.30); --b50:rgba(242,236,224,.50); } /* ── L'ÎLOT DANS L'ÎLOT : une carte-papier reste encre-sur-papier, qu'elle soit posée sur le papier de la page ou sur une inondation. (Les vedettes vivent DANS le héros : sans ça, leurs noms passaient papier-sur-papier.) ── */ .vedette,.produit{ --laine:20,18,16; --blanc:#141210; --encre:#141210; --encre2:rgba(20,18,16,.74); --encre3:rgba(20,18,16,.55); --b5:rgba(20,18,16,.05); --b10:rgba(20,18,16,.10); --b20:rgba(20,18,16,.20); --b30:rgba(20,18,16,.30); --b50:rgba(20,18,16,.50); } /* …mais leurs BOUTONS pleins sont des coups d'encre ASSUMÉS EN DUR : un bouton qui lit sa couleur dans une variable retournable a fini papier-sur-papier (mesuré sur la fiche). L'encre du journal ne se discute pas — elle s'écrit. */ .btn--achat,.btn--plein,article.produit .rajout,.produit .rajout--choix,.rajout{ background:#141210;color:#F2ECE0; --laine:242,236,224;--blanc:#F2ECE0; --encre:#F2ECE0;--encre2:rgba(242,236,224,.74); } /* Les cinq encres d'imprimerie. Contrastes mesurés sur papier #F2ECE0 : u1 en texte 5,7:1 à 10:1 (AA partout) ; u2 est une encre GRAPHIQUE (filets, tampons, gros chiffres), JAMAIS du texte < 24px sur papier ; u3 est la trame claire des fonds photo. u2f = u1 : la version « qui tient le texte » de l'accent, par construction. */ body[data-univers="huiles"], [data-univers="huiles"] { --u1:#9C3F00; --u2:#F08A1D; --u3:#F7E2C6; --u2f:#9C3F00 } body[data-univers="priere"], [data-univers="priere"] { --u1:#0E5A42; --u2:#1FA97C; --u3:#D8EFE2; --u2f:#0E5A42 } body[data-univers="enfants"], [data-univers="enfants"] { --u1:#55208F; --u2:#FF6B4A; --u3:#F0E0FA; --u2f:#55208F } body[data-univers="livres"], [data-univers="livres"] { --u1:#16307A; --u2:#4F82F0; --u3:#DCE6FA; --u2f:#16307A } body[data-univers="parfums"], [data-univers="parfums"] { --u1:#7A1E52; --u2:#E05C9A; --u3:#F8DFEC; --u2f:#7A1E52 } body[data-univers="soins"], [data-univers="soins"] { --u1:#3E6212; --u2:#7FB03A; --u3:#E9F0DA; --u2f:#3E6212 } body[data-univers="alimentaire"], [data-univers="alimentaire"] { --u1:#6B1D1D; --u2:#D64545; --u3:#F6DCD2; --u2f:#6B1D1D } body[data-univers="vetements"], [data-univers="vetements"] { --u1:#4E4638; --u2:#9A8866; --u3:#EDE6D8; --u2f:#4E4638 } /* ⚠ 18/08 — LE RAYON 10 N'AVAIT AUCUNE COULEUR, NULLE PART. « femme » est né ce jour-là (RAYONS, socle.js) avec ses 15 articles et sa page, mais aucune des trois feuilles qui déclarent les univers ne le connaissait : ni socle.css (5 univers), ni accueil.css (9), ni celle-ci (9). Une variable non déclarée ne tombe pas en erreur — elle HÉRITE. femme.html prenait donc la valeur de :root (socle.css l. 109), c'est-à-dire la palette des HUILES : mesuré sur la page réelle, --u1 = rgb(110,42,12) et --u2 = rgb(240,168,48), l'orange-brun de l'huile de nigelle sur un rayon d'abayas. Le défaut se voyait à l'œil et ne s'écrivait dans aucun journal. C'est le même oubli que celui déjà relevé le 17/08 pour les quatre rayons précédents (voir le commentaire en tête de huiles.html) : un rayon qu'on ajoute au catalogue n'existe pour la couleur que le jour où on l'écrit ICI. ARDOISE PROFONDE, et ce choix se justifie : les neuf teintes prises sont toutes chaudes ou saturées, aucune n'est un gris-bleu — le rayon se distingue donc au premier coup d'œil de son voisin « vetements » (taupe) sans tomber dans le rose, que « parfums » occupe déjà et qui serait de toute façon un cliché. Crème #F2ECE0 sur --u1 : 7,75:1 ; encre #141310 sur --u2 : 6,30:1 — les deux mesurés, les deux au-delà de 4,5. */ body[data-univers="femme"], [data-univers="femme"] { --u1:#3B4A57; --u2:#7E9AAE; --u3:#DDE6EC; --u2f:#3B4A57 } /* ══ 2. LE PAPIER ══ */ body{ background-color:var(--papier); background-image:var(--grain); color:var(--encre); } /* L'en-tête du socle portait un dégradé de nuit ÉCRIT EN DUR (rgba(18,13,10,…)) : il restait charbon sur le papier. Même géométrie, encres retournées. */ /* `body > header` comme au socle : la règle nue repeignait AUSSI les en-têtes de section des modules (voir socle.css, § EN-TÊTE). */ body > header{ background:linear-gradient(rgba(242,236,224,.96),rgba(242,236,224,.85) 70%,transparent); } /* Les fiches et la commande portent leur propre barre (.tete), elle aussi en nuit écrite en dur. Mêmes encres retournées, et le champ de recherche suit (il était blanc-sur-blanc une fois retourné). */ .tete{background:rgba(242,236,224,.96)} .tete input{background:rgba(20,18,16,.06);color:var(--encre)} .tete input::placeholder{color:var(--encre3)} /* Les aides de champ du bordereau étaient en blanc-à-moitié ÉCRIT EN DUR : fantômes sur papier. Encre légère, mesurée lisible. */ .champ__aide,.cmd-note,.cmd-recap__n,.cmd-apres{color:var(--encre3)} /* La photo de fiche : l'ancienne peau peignait la nuit SUR l'image pour y noyer les jpg blancs. Les découpes se posent sur la TRAME claire du rayon. */ .vitrine img,body.p-fiche .vitrine img{background:var(--u3) !important} /* Les titres passent à la Bricolage : capitales serrées, interligne de plomb. La casse est portée ici pour ne pas réécrire 50 pages. */ .geant,.titre-rayon,.titre-2,h1,h2{ font-family:var(--f-titre); text-transform:uppercase; letter-spacing:-.04em; } .geant{line-height:.92} /* La voix du journal : Georgia pour la prose. Les .mot du socle portaient déjà la serif — ils héritent du retournement. */ /* ══ 3. LES LUMIÈRES D'AVANT DEVIENNENT DES LAVIS D'ENCRE ══ Sur la nuit, l'aurore éclairait ; sur le papier, la même tache se MULTIPLIE comme une encre mouillée. Un réglage, pas une réécriture. */ /* ══ LA BANNIÈRE RESPIRE — 19/08 ═══════════════════════════════════ Le propriétaire : « refais la bannière, je suis pas trop fan », avec https://ryeisland.com/ en référence. CE QUI N'ALLAIT PAS, MESURÉ. La bannière portait DIX-SEPT calques, dont TROIS en fusion par-dessus l'aplat : `aurore` et `gobo` en `multiply` à 50 % chacun, plus le grain en `overlay`. Deux multiply à 50 % assombrissent la couleur DEUX FOIS : l'aplat d'univers, choisi franc, arrivait à l'œil en rouge boueux. `gobo` mesurait en plus 1179 × 1172 px pour une bannière de 951 — il débordait — et portait un `contrast(1.5)` qui creusait encore. C'est l'inverse exact de ce que fait la référence : Rye Island tient sur un fond papier franc, une encre, et beaucoup de vide. Et c'est l'inverse de notre propre note de marque — « couleur plein écran, façon Ciao Kombucha ». CE QU'ON GARDE : le grain à 9 %, qui est une texture, pas un voile. `aurore` passe en `soft-light` très bas : elle donne encore un modelé de lumière sans manger la teinte. `gobo` s'en va. ⚠ On ne touche pas au socle : c'est la surcouche qui décide, comme pour toute la DA rotative. */ /* ══ LE PRODUIT PREND LA PLACE — 19/08 ═════════════════════════════ Le propriétaire : « le produit est pas assez mis en avant ». Mesuré avant : la photo occupait **10,2 % de la bannière** (263 × 348 px dans 951 × 945), et le bloc de contenu ne faisait que 346 px de haut sur 945 — un tiers. Le reste était du vide décoré. Une boutique montre ce qu'elle vend : la photo passe de 38svh à 56svh au-delà de 941 px, et la colonne de l'objet devient la plus large des deux (1,25 contre 0,95). ⚠ ON SURVEILLE LE PLI. Le bouton « Découvrir » était déjà tombé sous l'écran le 18/08 (mesuré à 1 029 px pour une fenêtre de 720) : la hauteur est plafonnée en `svh`, jamais en px fixes, et le plafond haut (620 px) tient sur un écran de 1 080. Remesuré après. */ @media(min-width:941px){ #hero .hero__dedans{grid-template-columns:.95fr 1.25fr} /* ⚠ 56svh FAISAIT RETOMBER « DÉCOUVRIR » SOUS LE PLI — mesuré : bas du bouton à 958 px pour une fenêtre de 910, la bannière passant de 945 à 1109 px de haut. C'est le défaut d'août, revenu par la grande porte. 46svh laisse le bouton dans l'écran tout en gardant l'objet deux fois plus présent qu'avant. Remesuré. */ #hero .hero__packshot{height:clamp(260px,46svh,520px)} } /* Sur téléphone la photo est déjà en tête (`order:-1`) ; on lui donne simplement un peu plus de corps, sans toucher au reste. */ @media(max-width:940px){ #hero .hero__packshot{height:clamp(150px,26svh,300px)} } #hero .hero__aurore{mix-blend-mode:soft-light;opacity:.16} #hero .hero__gobo{display:none} #hero .hero__halo{opacity:.34} /* Le mot géant qui défile : encre pleine du rayon, à peine posée. */ /* ⚠ LE MOT GÉANT ÉTAIT PEINT DANS LA COULEUR DU FOND (`--u1`) à 16 % : une forme sombre sur un fond sombre, donc une tache, pas une lettre. Chez Rye Island l'élément géant (280 px) est une PRÉSENCE : on le lit. On le peint donc dans `--u3`, la teinte claire de l'univers — celle qui est mesurée au-dessus de 4,50:1 sur `--u1` — et on le laisse discret par l'opacité, pas en le noyant dans le fond. */ #hero.hero--vivante .hero__geantpiste{color:var(--u3);opacity:.13} #hero.hero--vivante .hero__geantrail em{color:var(--u2)} /* Les volets du balayage : l'encre PLEINE du monde qui arrive. */ #hero.hero--vivante .hero__volets i{background:var(--u1)} /* Les flèches : un cachet d'encre sur papier. */ /* EN DUR, pas en variables : l'îlot du héros retourne --encre vers le papier, et la flèche devenait papier-sur-papier — « invisibles, blanc sur blanc », mesuré par le propriétaire lui-même. */ #hero.hero--vivante .hero__nav{ background:#F2ECE0;color:#141210; box-shadow:inset 0 0 0 2px #141210; opacity:1; } /* Les coins : l'encre légère. */ #hero.hero--vivante .hero__coin{color:var(--encre3)} #hero.hero--vivante .hero__coin--se b{color:var(--vermillon)} /* ══ 3 bis. LA BANNIÈRE EST UNE PAGE INONDÉE : ON IMPRIME EN RÉSERVE ══ Le héros garde son encre pleine du rayon (c'est la première inondation du journal) — donc TOUT ce qui s'y écrit passe au papier, en réserve, comme un titre défoncé dans un aplat. L'encre sur l'encre était illisible, mesuré à la construction. */ #hero{color:var(--papier)} #hero .hero__texte h1{color:var(--papier)} #hero .hero__texte .mot{color:rgba(242,236,224,.85)} #hero .btn--creux{border-color:var(--papier);color:var(--papier)} #hero.hero--vivante .hero__coin{color:rgba(242,236,224,.6)} #hero.hero--vivante .hero__coin--se b{color:var(--papier)} /* Les deux coins hauts percutaient le masthead, et leur contenu vit déjà dans sa ligne de faits. Sous ROTATIVE, seuls les coins bas restent : le registre à gauche, la position à droite. */ #hero.hero--vivante .hero__coin--no, #hero.hero--vivante .hero__coin--ne{display:none} #hero.hero--vivante .hero__geantpiste{color:var(--papier);opacity:.13} #hero .decouvrir{color:var(--papier)} /* ══ 4. LE MASTHEAD ══ Posé par presse.js en tête de bannière : le nom comme un titre de journal, bord à bord, puis le double filet et la ligne des faits. */ /* Le héros centrait ses étages ; avec le masthead en plus, le centre débordait PAR LE HAUT et overflow:clip décapitait le journal — mesuré : le masthead vivait 96 px au-dessus du bord. On cale tout en haut : un journal commence par son nom. */ #hero{justify-content:flex-start} .p-masthead{ /* les calques du héros (fond, gobo, mot) sont positionnés : un enfant statique peint SOUS eux — mesuré, elementFromPoint rendait hero__fond. On le monte au plan du texte (5, comme hero__dedans). */ position:relative;z-index:5; width:100%;max-width:1240px; padding:2px 0 0; user-select:none; } .p-masthead b{ display:block; font-family:var(--f-titre);font-weight:800; font-size:clamp(1.9rem,5vw,4.4rem); line-height:.9;letter-spacing:-.04em;text-transform:uppercase; color:var(--papier); /* en réserve sur l'encre du héros */ } .p-masthead .p-filets{ height:9px;margin-top:10px; border-top:3px solid var(--papier); border-bottom:1px solid rgba(242,236,224,.55); } /* 18/08 : LE VIEUX « CHEMIN DE LA COMMANDE » EST RETIRÉ D'ICI. Trois pas datés et une barre qui avançait en boucle — le propriétaire l'a fait remplacer : « la barre de progression ça fait pas commande, faut que ça fasse SUIVI DE COMMANDE avec des points ». presse.js ne fabrique plus `p-chemin` : ces 33 lignes ne peignaient plus rien. Le nouveau suivi, à jalons, vit avec le code qui le pose. */ /* ══ 5. LE TAMPON DE PRIX — greffe 1 ══ Le prix n'est pas une ligne : c'est un coup de tampon d'imprimeur, double cerne, tourné, vermillon. Deuxième plus gros élément de l'écran. presse.js le construit et y recopie le prix VRAI (celui du bouton, qui vient du catalogue — jamais un chiffre écrit ici). */ .p-tampon{ --rot:-8deg; position:absolute;z-index:6;right:clamp(2px,3vw,40px);bottom:-6px; width:clamp(96px,13vw,178px);aspect-ratio:1; display:grid;place-content:center;gap:2px;text-align:center; border:3px solid var(--vermillon);border-radius:50%; transform:rotate(var(--rot)); pointer-events:none; background:transparent; } .p-tampon::before{ content:'';position:absolute;inset:4px; border:1px solid var(--vermillon);border-radius:50%; } .p-tampon b{ font-family:var(--f-titre);font-weight:800; font-size:var(--t-prix-tampon);line-height:1; color:var(--vermillon);letter-spacing:-.03em; } .p-tampon i{ font-style:normal;font-family:var(--f-mono); font-size:.56rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--vermillon);opacity:.85; } /* Sa frappe : l'apparition-tampon, une fois, à la construction. */ .p-tampon{transition:transform var(--d-tampon) var(--tampon),opacity var(--d-tampon) var(--e-doux)} .p-tampon.p-leve{transform:rotate(var(--rot)) scale(1.5);opacity:0} /* Sur la fiche produit : plus gros, calé sur la galerie. */ body.p-fiche .p-tampon{width:clamp(120px,15vw,200px);right:8px;top:-10px;bottom:auto} /* ══ 6. LE POINT DU REGISTRE — greffe 2 ══ Un disque vermillon sur la carte d'un produit déjà pris. Il ne dit qu'une vérité : « vous l'avez pris ». Rien d'autre, jamais. */ .p-point{ position:absolute;z-index:4;top:10px;left:10px; width:14px;height:14px;border-radius:50%; background:var(--vermillon); box-shadow:0 0 0 1px var(--papier); transform:scale(1); transition:transform var(--d-tampon) var(--tampon),opacity var(--d-tampon) linear; } .p-point i{ position:absolute;left:20px;top:0; font-style:normal;font-family:var(--f-mono); font-size:.6rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--vermillon);white-space:nowrap; } .p-point.p-leve{transform:scale(.4);opacity:0} /* ══ 7. LES CARTES : LE MARBRE ══ La grille devient un marbre d'imprimerie : cartes papier bordées d'un filet, prix en encre pleine du rayon, bouton en encre noire. */ .produit{ position:relative; background:var(--papier); border:1px solid var(--b20); border-radius:0; } .produit .cadre{background:var(--u3);border-radius:0} /* Les photos sont désormais des DÉCOUPES : on les pose entières sur la trame, jamais recadrées — un produit coupé au bord est un produit qu'on ne reconnaît pas. */ .produit .cadre img,.vedette__img img{object-fit:contain;padding:5%;box-sizing:border-box} .produit h3{ font-family:var(--f-titre);text-transform:uppercase; letter-spacing:-.02em;line-height:1 } .produit .prix{ font-family:var(--f-titre); font-size:clamp(1.35rem,2.2vw,1.9rem); color:var(--u1);letter-spacing:-.02em; } /* Poids de sélecteur relevé : les pages de rayon posent leurs propres couleurs de bouton (.rayon .rajout, .rajout--choix…) et gagnaient — mesuré : un « Choisir » s'écrivait papier sur papier. */ /* L'ENCRE DU BOUTON S'ÉCRIT EN DUR : background:var(--encre) lisait la variable que le bouton lui-même retourne pour ses entrailles — résultat papier-sur-papier, mesuré deux fois. Plus de variable ici. */ article.produit .rajout,.produit .rajout--choix, .rajout,.btn--achat,.btn--plein{ border-radius:0; background:#141210;color:#F2ECE0; font-family:var(--f-mono);font-weight:700; letter-spacing:.12em;text-transform:uppercase; } .btn--creux{border-radius:0;border:2px solid var(--encre);color:var(--encre)} @media (hover:hover) and (pointer:fine){ .produit:hover{border-color:var(--encre)} .produit:hover .cadre{background:var(--u1)} .rajout:hover,.btn--achat:hover{background:var(--u1);color:var(--papier)} } /* Les vedettes de la bannière : mêmes annonces de journal. */ .vedette{border-radius:0;background:var(--papier);border:1px solid var(--b20)} .vedette__img{border-radius:0;background:var(--u3)} .vedette[aria-pressed="true"]{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)} .vedette__prix{color:var(--u1)} /* ══ 7 bis. LA PAGE DE RAYON EST LA PAGE ENCRÉE ══ presse.js pose p-rayon sur le corps des 5 pages de rayon : encre pleine du rayon en fond, texte en réserve, cartes-papier posées sur l'encre — le marbre ressort tout seul. Le grain reste : l'encre est imprimée SUR le papier, pas à sa place. */ /* 17/08 : la page de rayon est PAPIER, l'univers en ACCENTS — fond neutre partout, la couleur dans le bandeau de tête (trame claire), les prix, les boutons, le filigrane. */ body.p-rayon{background-color:var(--papier);color:var(--encre)} /* L'ancienne peau posait sur .rtete un voile presque noir (linear-gradient de la nuit). À la place : le bandeau de tête en TRAME claire du rayon, bordé d'un filet d'encre du rayon. */ body.p-rayon .rtete{ background:var(--u3); border-top:8px solid var(--u1); } body.p-rayon h1,body.p-rayon h2,body.p-rayon .mot, body.p-rayon .titre-rayon{color:var(--encre)} body.p-rayon .rtete .mot{color:var(--encre2)} /* ══ 8. L'INONDATION — les sections de l'accueil ══ presse.js glisse un calque d'encre pleine derrière chaque section de rayon ; quand la section entre dans l'écran, l'encre MONTE et le texte passe au papier. Un seul calque, un seul repaint à l'entrée. */ .p-inonde{position:relative} /* 17/08 : l'encre pleine devient TRAME CLAIRE — le bloc pastel de l'univers monte sous la section, le texte reste encre, les produits ressortent. Le mécanisme ne change pas d'un pixel. */ .p-inonde .p-encre{ content:'';position:absolute;inset:0;z-index:0; background:var(--u3); border-top:8px solid var(--u1); transform:translateY(101%); transition:transform var(--d-inondation) var(--e-expo); pointer-events:none; } .p-inonde.p-gauche .p-encre{transform:translateX(-101%)} .p-inonde.encre .p-encre{transform:translate(0,0)} .p-inonde>*:not(.p-encre){position:relative;z-index:1} .p-inonde.encre{color:var(--encre)} .p-inonde.encre .mot,.p-inonde .rayon-mot{color:var(--encre2)} .p-inonde.encre h2,.p-inonde.encre h3, .p-inonde.encre .titre-rayon{color:var(--encre)} .p-inonde,.p-inonde .mot,.p-inonde h2,.p-inonde h3,.p-inonde .titre-rayon{ transition:color 400ms var(--e-doux); } /* Les cartes restent des cartes-papier sur l'encre : c'est le marbre qui ressort. Rien à faire — leur fond est déjà var(--papier). */ /* ══ 9. L'ENCRE VIVE — la signature ══ Chaque grand titre porte un DOUBLE u2 (posé par presse.js). Au repos il est invisible ; au défilement rapide, presse.js le décale et le révèle : la page sort de repérage, comme une rotative lancée trop vite. À l'arrêt : recalage d'un coup sec. */ .p-double-porteur{position:relative} .p-double{ position:absolute;inset:0;z-index:-1; color:var(--u2);opacity:0; pointer-events:none;user-select:none; will-change:transform,opacity; } /* ══ 10. LES FILETS TIRÉS ══ */ .p-filet-tire{ height:8px;background:var(--u2); transform:scaleX(0);transform-origin:left center; transition:transform var(--d-filet) var(--e-expo); } .encre .p-filet-tire,.p-filet-tire.tire{transform:scaleX(1)} /* ══ 10 bis. LE MARBRE ══ La grille des annonces devient un marbre d'imprimerie : les cartes papier à joints d'ENCRE de 1 px — le noir affleure entre elles. Les quatre écarts de accueil.css sont écrasés d'un coup. */ /* 17/08 : le fond d'encre du marbre peignait de GRANDS BLOCS NOIRS dès qu'une rangée n'était pas pleine (le rayon Zamzam : une carte, quatre cases d'encre nue). Les joints passent au trait fin sur chaque carte — même dessin, plus jamais de noir vide. */ .grille{ gap:2px !important; background:transparent; border:0; } .grille .produit{box-shadow:0 0 0 1px var(--b20)} .grille .produit{border:0;border-radius:0} /* Le numéro d'ordre de l'annonce, comme dans un journal de petites annonces : compté par le CSS, jamais écrit à la main. */ .grille{counter-reset:annonce} .grille .produit{counter-increment:annonce} .grille .produit::after{ content:'N° ' counter(annonce,decimal-leading-zero); position:absolute;top:8px;right:10px;z-index:3; font-family:var(--f-mono);font-size:.6rem;font-weight:700; letter-spacing:.12em;color:var(--encre3); pointer-events:none; } /* ══ 10 ter. LA CASE « TOUT LE RAYON » ══ La sixième case du marbre : le nombre en corps d'affiche, le mot en mono, l'encre du rayon au survol. C'est une annonce comme les autres — c'est ça qui la rend chic. */ .produit--tout{ display:grid;place-content:center;gap:6px;text-align:center; min-height:220px;text-decoration:none; background:var(--papier); } .produit--tout b{ font-family:var(--f-titre);font-weight:800; font-size:clamp(3rem,6vw,5.4rem);line-height:1; color:var(--u1);letter-spacing:-.04em; } .produit--tout span{ font-family:var(--f-mono);font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--encre2); } .produit--tout span::after{content:' →'} @media (hover:hover) and (pointer:fine){ .produit--tout:hover{background:var(--u1)} .produit--tout:hover b,.produit--tout:hover span{color:var(--papier)} } /* ══ 10 quater. LE NUMÉRO FANTÔME DU RAYON ══ « 01 » à l'échelle du mur, dans l'encre du rayon, derrière la section — le repère qu'on lit du coin de l'œil, comme la page d'un quotidien. La pastille d'origine (.rayon-num) reste : elle, se lit de près. */ .rayon{position:relative} .rayon .rayon-num{position:static} .rayon::after{ content:''; } .rayon .rayon__mur{ /* le mot du mur passe à l'encre du rayon : sur papier, l'ancienne laine claire était invisible — c'est lui « le texte qui défile derrière ». */ color:var(--u1);opacity:.10; } /* ══ 10 quinquies. LE FILIGRANE DES FICHES REDÉFILE ══ #uniFond (univers.js) était en teinte claire à 14 % — pensé pour la nuit, invisible sur papier. L'encre du rayon à 9 % : on le VOIT défiler, discret comme un filigrane de billet. */ #uniFond{opacity:.09} #uniFond .uniMot{color:var(--u1)} /* ══ 10 sexies. LE BORDEREAU DE FAITS DES FICHES ══ posé par presse.js : le surtitre d'édition au-dessus du nom, et le tableau CARACTÉRISTIQUE / FAIT sous le prix. Filets 1 px, mono, que du vérifiable. */ .p-kicker{ border-top:8px solid var(--u2); padding-top:8px;margin-bottom:10px; font-family:var(--f-mono);font-size:.66rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--encre2); } table.p-faits{ width:100%;border-collapse:collapse;margin:18px 0 4px; font-family:var(--f-mono);font-size:.78rem; } table.p-faits td{ padding:8px 2px;border-top:1px solid var(--b20); color:var(--encre); } table.p-faits td:first-child{ text-transform:uppercase;letter-spacing:.1em; color:var(--encre3);width:38%; } table.p-faits tr:last-child td{border-bottom:1px solid var(--b20)} /* ══ 10 septies. L'INTERLUDE DU JOURNAL ══ La bande évergreen posée entre deux rayons par presse.js : elle ne nomme aucun article (le sommaire du blog fait foi), elle annonce la machine — deux articles par jour, des faits. */ .p-journal{ max-width:1240px;margin:clamp(30px,6vh,70px) auto; padding:0 clamp(16px,5vw,56px); } .p-journal a{ display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px; padding:20px 0;text-decoration:none; border-top:8px solid var(--encre); border-bottom:1px solid var(--encre); } .p-journal b{ font-family:var(--f-titre);font-weight:800; font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:-.03em;text-transform:uppercase;color:var(--encre); } .p-journal span{ font-family:var(--f-mono);font-size:.7rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--encre3); } .p-journal em{ font-style:normal;margin-left:auto; font-family:var(--f-mono);font-size:.8rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--vermillon); } @media (hover:hover) and (pointer:fine){ .p-journal a:hover b{color:var(--vermillon)} } /* ══ 10 septies-bis. LES CARTES D'AVIS AU PAPIER ══ « les avis moches, pas de beau cadre » + des noirs partout : les cartes gardaient la peau de nuit (fonds noirs translucides, vernis en dégradé). Cartes-papier du journal : filet, encre, étoiles vermillon. Les calques de vernis sont éteints. */ #avisFournisseur .avisf__c{ background:var(--papier) !important; color:var(--encre); border:1px solid var(--b20); border-radius:0; box-shadow:none; background-image:none !important; } #avisFournisseur .avisf__c::before, #avisFournisseur .avisf__c::after{display:none} #avisFournisseur .avisf__c *{color:var(--encre)} #avisFournisseur .avisf__c .avisf__dt, #avisFournisseur .avisf__c .avisf__mono{color:var(--encre3)} #avisFournisseur .avisf__et{color:var(--vermillon)} /* Les interludes (manifeste, façon, maison) : plus un seul aplat de nuit — le papier, les filets, l'encre. */ #manifeste,#facon,#maison{background:var(--papier);color:var(--encre)} #manifeste h2,#facon h2,#maison h2, #manifeste h3,#facon h3,#maison h3, #manifeste p,#facon p,#maison p{color:var(--encre)} /* ══ 10 octies-bis. LA MOISSON DE LA REVUE VISUELLE (17/08) ══ Un testeur a parcouru le site en PC et en mobile, couleur calculée contre fond calculé. Tout ce qui suit répond à un ratio MESURÉ sous 2:1. Deux causes, toujours les mêmes : (a) --nuit retournée vers le papier : ce qui s'écrivait « en nuit » s'écrit maintenant papier-sur-papier ; (b) un îlot resté SOMBRE (barres collantes, en-tête du tunnel, pastilles) dont les jetons dérivés n'ont pas été re-retournés. Dans un îlot sombre, la couleur s'écrit EN DUR : une variable qui peut se retourner finira par se retourner. */ /* (a) LES TITRES DE CARTES — invisibles sur les 9 pages de rayon : accueil.css écrit .produit h3{color:var(--nuit)}. Une carte est TOUJOURS du papier : son titre est TOUJOURS de l'encre. */ .produit h3,.pcarte span{color:#141210} /* (b) LES ÎLOTS SOMBRES : barre d'achat des fiches (prix, version et délai illisibles sur mobile), barre collante et en-tête du tunnel de commande (total et étapes illisibles). */ .barre-achat,.barre-achat *, .cmd-collant,.cmd-collant *, .cmd-tete,.cmd-tete *{color:#F2ECE0} .barre-achat b,.cmd-collant b{color:#F2ECE0} .cmd-tete .cmd-logo i,.cmd-etapes [aria-current="step"]{color:var(--vermillon)} .cmd-etapes a,.cmd-etapes li{color:rgba(242,236,224,.72)} .cmd-retour{color:rgba(242,236,224,.85)} /* La pastille « Épuisé » était noire sur noir : 77 produits portaient une pastille VIDE. */ .badge.mort,.badge.mort *{background:#141210 !important;color:#F2ECE0 !important} /* La jauge du panier disait « Plus que 41,20 € pour la livraison offerte » en trame claire sur papier : l'incitation la plus utile du tiroir était muette. */ #pBarreMot,#pBarreMot *{color:#141210} /* Les découpes de « Prenez aussi » étaient posées sur un carré noir écrit en dur dans le socle (#151013). */ .pcarte img{background:var(--u3) !important} /* La vedette active du héros : son prix s'écrivait dans l'encre du rayon, sur un fond de la même encre — ton sur ton sur les 3 unes. */ .vedette[aria-pressed="true"] .vedette__prix, .vedette[aria-pressed="true"] .vedette__nom{color:#F2ECE0} /* « Une petite maison » : une phrase entière manquait au milieu du paragraphe, et la carte contact n'avait pas de titre. */ #maison b{color:var(--encre)} #maison .carte h3,#maison [class*="carte"] h3{color:#F2ECE0} /* La marquise des avis débordait le document (26 822 px) : un focus clavier pouvait décaler la page entière. */ /* ⚠ 18/08 — C'EST ICI QU'ÉTAIT LE BLANC DANS LES AVIS. Ce plafond (posé le 17/08 contre un débordement de document) ANNULAIT le `width:max-content` de la marquise, 34 lignes plus bas : la bande retombait à la largeur du cadre, ses cartes doublées ne tenaient plus dedans, et la translation de -50 % découvrait un vide à droite. « au bout d'un moment les avis se décalent trop à gauche, ça laisse un blanc » — c'était ça, exactement. La marquise est donc exclue du plafond : elle DOIT être plus large que son cadre, c'est ce qui la fait défiler. */ #avisFournisseur .avisf__bande:not(.p-marquise), #avisfBande:not(.p-marquise){max-width:100%} #avisFournisseur{overflow-x:hidden} /* ══ 10 octies. LES DERNIERS FANTÔMES MESURÉS ══ Liste issue de l'AUDIT DE CONTRASTE au navigateur (16/08 nuit) : chaque règle ici répond à un ratio mesuré sous 2,5:1. */ .etv__sur{color:var(--encre3)} /* « La boutique » sous la marque : bleu clair pensé pour la nuit. */ header .marque__mot i{color:var(--encre3)} /* Les numéros de rayon de l'en-tête : l'accent u2 ne tient pas le petit corps sur papier — l'encre pleine du rayon, si. */ #sommaire a b{color:var(--u2f,var(--encre))} /* La famille des PASTILLES : texte papier sur accent u2 (2,1:1). Elles passent à l'encre pleine — chip d'imprimeur. */ .rayon-cpt,.badge.choix,.rayon-num{ background:#141210 !important;color:#F2ECE0 !important; } /* Le bouton « Ajouter » des cartes de l'accueil portait sa propre classe (produit__ajout) et échappait à la règle des boutons. */ .produit__ajout{ background:#141210 !important;color:#F2ECE0 !important; border-radius:0;border:0; font-family:var(--f-mono);font-weight:700; letter-spacing:.12em;text-transform:uppercase; } @media (hover:hover) and (pointer:fine){ .produit__ajout:hover{background:var(--u1) !important} } /* Le mot du mur sur la trame claire : l'encre du rayon, à peine. */ .p-inonde.encre .rayon__mur{color:var(--u1);opacity:.12} /* ══ 10 quindecies. LA MARQUISE DES AVIS ══ La bande des avis défile — lente, en pause au survol, doublée par presse.js pour boucler sans couture. Le bouton calme l'arrête. */ #avisfBande.p-marquise{ display:flex;gap:14px;width:max-content; /* ⚠ ANIMATION RETIRÉE LE 19/08 : elle translatait la bande, ce qui clouait `scrollLeft` à 0 et empêchait les flèches de socle.js d'apparaître. Le défilement se fait maintenant en JavaScript, dans `scrollLeft` (presse.js, lancerDefilementDoux). */ overflow-x:auto; } #avisfBande.p-marquise .avisf__c{flex:none;width:min(320px,78vw)} /* LE VOILE DES DEUX BORDS, PORTÉ PAR LE CADRE IMMOBILE. Sur une bande qui défile, une carte entre et sort par construction — mais tranchée net elle a l'air cassée, pas en mouvement (le client lisait « rand bravo » au lieu de « Un grand bravo »). Le fondu rend la coupe volontaire. Il ne peut pas vivre sur la bande : le masque d'un élément translaté se déplace avec lui. La classe est posée par presse.js en même temps que la marquise. */ .avisf__cadre.p-marquise-cadre{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--avisf-voile,32px), #000 calc(100% - var(--avisf-voile,32px)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--avisf-voile,32px), #000 calc(100% - var(--avisf-voile,32px)),transparent 100%); } @keyframes p-defile{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } @media (hover:hover) and (pointer:fine){ #avisfBande.p-marquise:hover{animation-play-state:paused} } :root[data-calme="1"] #avisfBande.p-marquise{animation:none} .p-abo__mot{margin:0} .p-pousse{ border-top:3px solid var(--vermillon); padding:10px 0 8px;margin:6px 0 4px; display:grid;gap:4px; } .p-pousse b{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; letter-spacing:-.02em;font-size:1rem;color:var(--encre); } .p-pousse p{ margin:0;font-family:var(--f-corps);font-size:.82rem; line-height:1.5;color:var(--encre2); } .p-avis-provenance{ max-width:70ch;margin:0 0 14px; font-family:var(--f-corps);font-size:.88rem;line-height:1.6; color:var(--encre2); border-left:3px solid var(--vermillon);padding-left:12px; } /* ══ 10 nonies. LES BADGES DE CONFIANCE ══ Quatre faits défendables, en filets de journal — pas des médailles dorées. Sur les fiches (sous le bordereau de faits) et sur la commande (dans le récapitulatif). */ .p-badges{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--b20);border:1px solid var(--b20); margin:14px 0; } .p-badge{ display:flex;align-items:center;gap:9px; padding:11px 12px;background:var(--papier); } .p-badge svg{ width:19px;height:19px;flex:none; fill:none;stroke:var(--u1);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; } .p-badge i{ font-style:normal;font-family:var(--f-mono); font-size:.62rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--encre2); } /* Les tampons de prix sont morts (16/08 soir) — la règle reste pour mémoire mais plus rien ne les construit. */ .p-tampon{display:none} /* ══ 10 decies. LE HAMBURGER ET LE SOMMAIRE ══ */ .p-burger{ display:inline-grid;gap:4px;place-content:center; width:44px;height:44px;padding:0;border:0;cursor:pointer; background:transparent; } .p-burger i{display:block;width:22px;height:3px;background:var(--encre)} .p-sommaire{ position:fixed;inset:0;z-index:120; background:#141210; overflow:auto; /* 18/08 : « y'a la barre moche pour défiler, même pour descendre et monter ». Ce panneau plein écran montrait l'ascenseur du système, clair et large, sur un aplat d'encre. On l'habille au lieu de le masquer : ici le défilement peut être long, et un ascenseur invisible sur un panneau plein écran laisse le doigt sans repère. */ scrollbar-width:thin; scrollbar-color:rgba(242,236,224,.30) transparent; } .p-sommaire::-webkit-scrollbar{width:8px} .p-sommaire::-webkit-scrollbar-track{background:transparent} .p-sommaire::-webkit-scrollbar-thumb{ background:rgba(242,236,224,.30);border-radius:999px; } .p-sommaire[hidden]{display:none} .p-sommaire__d{ max-width:1000px;margin:0 auto; padding:clamp(18px,4vh,44px) clamp(16px,5vw,56px) 60px; display:grid;gap:2px; } .p-sommaire__x{ justify-self:end;margin-bottom:clamp(10px,3vh,30px); border:2px solid #F2ECE0;background:transparent;color:#F2ECE0; padding:.6rem 1.3rem;cursor:pointer; font-family:var(--f-mono);font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase; } .p-sommaire__l{ display:flex;align-items:baseline;gap:16px; padding:clamp(10px,2vh,20px) 0; border-top:1px solid rgba(242,236,224,.22); text-decoration:none; } .p-sommaire__l em{ font-style:normal;font-family:var(--f-mono);font-weight:700; font-size:.8rem;color:var(--vermillon);min-width:2ch; } .p-sommaire__l b{ font-family:var(--f-titre);font-weight:800; font-size:clamp(1.8rem,6vh,3.4rem);line-height:1; letter-spacing:-.03em;text-transform:uppercase;color:#F2ECE0; } .p-sommaire__l span{ margin-left:auto;font-family:var(--f-mono);font-size:.7rem; font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(242,236,224,.55); } .p-sommaire__l--pt b{font-size:clamp(1.1rem,3.4vh,1.7rem)} @media (hover:hover) and (pointer:fine){ .p-sommaire__l:hover b{color:var(--vermillon)} } /* ══ 10 undecies. NOTRE HISTOIRE ══ */ .p-histoire{ max-width:820px;margin:clamp(36px,7vh,80px) auto; padding:0 clamp(16px,5vw,56px); } .p-histoire__sur{ font-family:var(--f-mono);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--vermillon); border-top:8px solid var(--encre);padding-top:10px;margin:0 0 6px; } .p-histoire h2{ font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1; margin:0 0 18px;color:var(--encre); } .p-histoire__p{ font-family:var(--f-corps);font-size:var(--t-corps,1.05rem); line-height:1.7;color:var(--encre);margin:0 0 14px;max-width:64ch; } .p-histoire__a{ display:inline-block;margin-top:6px; font-family:var(--f-mono);font-weight:700;font-size:.78rem; letter-spacing:.12em;text-transform:uppercase;color:var(--encre); border-bottom:3px solid var(--vermillon);text-decoration:none; padding-bottom:3px; } .p-histoire__a::after{content:' →'} /* ══ 10 duodecies. LES PACKS ══ */ .p-packs{ max-width:1240px;margin:clamp(36px,7vh,80px) auto; padding:0 clamp(16px,5vw,56px); } .p-packs h2{ font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1; margin:0 0 8px;color:var(--encre); } .p-packs__mot{ font-family:var(--f-corps);color:var(--encre2);margin:0 0 20px; } .p-packs__g{ display:grid;gap:1px;background:var(--encre); border:1px solid var(--encre); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .p-pack{ background:var(--papier);padding:18px 16px 16px; display:flex;flex-direction:column;gap:10px; } .p-pack h3{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; letter-spacing:-.02em;font-size:1.25rem;margin:0;color:var(--encre); } .p-pack__mot{font-family:var(--f-corps);font-size:.92rem;color:var(--encre2);margin:0} .p-pack ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .p-pack li{ display:flex;justify-content:space-between;gap:10px; font-family:var(--f-mono);font-size:.74rem;color:var(--encre); border-top:1px solid var(--b10);padding-top:6px; } .p-pack li b{font-weight:700} .p-pack__total{ font-family:var(--f-titre);font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--u1); margin:2px 0 0;letter-spacing:-.02em; } .p-pack__btn{margin-top:auto;min-height:52px;cursor:pointer;border:0} /* ══ 10 terdecies. L'ABONNEMENT SUR LA FICHE ══ */ .p-abo{ border:2px solid var(--encre);padding:14px 14px 16px;margin:16px 0; display:grid;gap:8px; } .p-abo b{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; letter-spacing:-.02em;font-size:1.05rem;color:var(--encre); } .p-abo p{margin:0;font-family:var(--f-corps);font-size:.92rem;color:var(--encre2)} .p-abo .rajout{min-height:50px;cursor:pointer;border:0} /* ══ 10 quaterdecies. LA BANDE DE BADGES ══ */ .p-bande{ max-width:1240px;margin:clamp(14px,3vh,34px) auto; padding:0 clamp(16px,5vw,56px); } @media (min-width:900px){ .p-bande .p-badges{grid-template-columns:repeat(4,1fr)} } /* (17/08 : les pages de rayon sont papier — les badges y portent leur habit normal, plus de variante en réserve.) */ /* ══ 10 quindecies. LA MOISSON DU BALAYAGE (17/08) ══ Mesures du testeur : chaque règle ci-dessous répare un défaut CHIFFRÉ. La leçon des îlots s'applique : sur un fond qui ne change pas de peau, l'encre s'écrit EN DUR. */ /* Les flèches du carrousel d'avis. Leur rond est noir en dur (rgba(18,13,10,.86)) mais leur chevron lisait var(--blanc) — que la rotative retourne en encre : ratio mesuré 1,03, la flèche avait disparu. Glyphe papier, en dur. */ .bande-fleche{color:#F2ECE0} @media (hover:hover) and (pointer:fine){ .bande-fleche:hover{background:#F0A830;color:#120D0A} } /* La pilule du rayon courant (.rnav) : crème sur l'encre d'univers mesurée à 2,9:1. L'encre nuit en dur passe au-dessus de 4,5:1 sur les neuf univers (fonds moyens à clairs). */ .rnav a[aria-current="page"]{color:#141210} .rnav a[aria-current="page"] .num, .rnav a[aria-current="page"] .cpt{color:#141210} /* ══ 11. LA PAGE ARRIVE DÉJÀ IMPRIMÉE ══ Mouvement réduit, ou bouton calme : plus une seule presse ne tourne. L'encre est posée, les tampons sont frappés, les doubles n'existent pas. Le design entier reste. */ @media (prefers-reduced-motion:reduce) and (min-width:999999px) /* desarme 17/08 : data-calme est le seul interrupteur */{ .p-inonde .p-encre{transition:none;transform:translate(0,0)} .p-tampon,.p-point{transition:none} .p-double{display:none} .p-filet-tire{transition:none;transform:scaleX(1)} } :root[data-calme="1"] .p-inonde .p-encre{transition:none;transform:translate(0,0)} :root[data-calme="1"] .p-tampon,:root[data-calme="1"] .p-point{transition:none} :root[data-calme="1"] .p-double{display:none} :root[data-calme="1"] .p-filet-tire{transition:none;transform:scaleX(1)} /* ══ 12. AU DOIGT, LE RUBAN D'AVIS REDEVIENT UNE BANDE QU'ON TIRE ══ 18/08 soir, demande du proprietaire : « sur mobile on doit pouvoir les faire defiler au doigt, de gauche a droite ». On ne pouvait pas. La marquise (presse.js, § ④ septies) met la bande en `width:max-content` et la translate en continu : plus rien ne deborde, donc `overflow-x:auto` n'a plus rien a defiler, et le doigt n'a aucune prise. Le ruban avance tout seul, on le subit. CE BLOC NE TOUCHE NI A presse.js NI A avis-mur.js : la marquise est toujours posee, ses cartes toujours doublees — c'est le STYLE qui, sur telephone et sur toute tablette tactile, la rend inerte et rend la bande a son defilement natif. Sur grand ecran avec souris, rien ne change : le ruban tourne comme avant. · `animation:none` et non `animation-play-state:paused` : mise en pause, la bande resterait figee sur la translation en cours et le defilement natif partirait d'un point decale. · `width:auto` REND le debordement, donc le defilement. Il faut battre `.avisf .avisf__bande.p-marquise{width:max-content}` (avis.css, 0-3-0) : l'identifiant plus deux classes vaut 1-2-0 et l'emporte — un identifiant bat n'importe quelle pile de classes. · LES COPIES SE CACHENT. presse.js double les 40 cartes pour que la boucle n'ait pas de couture ; sans marquise, la couture n'existe plus et les copies afficheraient chaque avis DEUX FOIS. Un avis recopie deux fois, c'est un avis de plus qui n'existe pas. Elles portent `aria-hidden="true"` — c'est a ce signe qu'on les prend, et non a leur rang, qui bougerait si le compte changeait. · LE VOILE DE GAUCHE ET LE VIDE DE DROITE REVIENNENT : avis.css les avait mis a zero pour la seule marquise (la periode devait tomber au pixel). Rendus, la premiere carte ne colle plus au bord et la derniere respire. */ @media (max-width:900px),(pointer:coarse){ .avisf #avisfBande.p-marquise{ width:auto;max-width:100%; animation:none;transform:none; overflow-x:auto;overflow-y:hidden; padding-left:var(--avisf-voile); } .avisf #avisfBande.p-marquise>[aria-hidden="true"]{display:none} .avisf #avisfBande.p-marquise::after{flex-basis:var(--avisf-voile)} /* Le cadre garde son fondu, mais plus son couperet : c'est la bande qui defile, elle n'a plus a etre coupee a la largeur du cadre. */ .avisf .avisf__cadre.p-marquise-cadre{overflow:visible} /* L'invite « Glissez pour lire les suivants » etait cachee sous marquise — a juste titre : on ne demande pas un geste impossible. Il redevient possible, elle redevient utile. avis-mur.js pose `.avisf--tirable` apres mesure ; sans lui, rien ne s'affiche. */ .avisf__cadre.p-marquise-cadre + .avisf__glisse{display:none} .avisf--tirable .avisf__cadre.p-marquise-cadre + .avisf__glisse{display:block} } /* ═══════════════════════════════════════════════════════════════════ ⚠ 18/08 — LE RUBAN DÉFILANT ÉTAIT ILLISIBLE, SUR LES NEUF UNIVERS. LA CAUSE EST DANS CE FICHIER, ET ELLE EST INSTRUCTIVE. socle.css peint la bande ainsi (l. 693) : #defile{ background:var(--u2); color:var(--nuit) } Sous la peau d'origine, --nuit vaut #120D0A : une encre NOIRE sur l'accent du rayon, soit 4,41 à 7,68:1 selon l'univers. Impeccable. La peau journal, elle, retourne le jeton vingt lignes plus haut (« le fond N'EST PLUS la nuit : papier », --nuit:#F2ECE0) — et ce retournement, juste partout où --nuit sert de FOND, est faux au seul endroit où il sert d'ENCRE. La bande est alors passée en crème sur accent saturé, sans qu'une seule ligne de socle.css ait bougé. MESURÉ, LES NEUF : huiles 2,14 · priere 2,54 · enfants 2,39 · livres 3,09 · zamzam 2,36 · parfums 2,89 · soins 2,18 · alimentaire 3,72 · vetements 2,93. Aucun n'atteint 4,5 ; le meilleur est à moins de quatre. En clair : les cinq promesses de la maison — le prix payé, la date écrite, Stripe, le port, les quatorze jours — défilaient en travers de la page sans être lisibles. LA CORRECTION NE TOUCHE PAS AU SOCLE (règle de la surcouche : on retourne les variables, on ne descend pas dans le fichier d'en dessous). On garde le texte crème et on pose la bande sur --u2f, l'accent assombri — que ce fichier définit lui-même comme « la version qui tient le texte » (§ des cinq encres, l. 116-120), et qui dit exactement la même couleur d'univers, en plus grave. Nouveaux relevés : huiles 5,71 · priere 6,97 · enfants 8,97 · livres 10,27 · zamzam 7,45 · parfums 8,36 · soins 6,03 · alimentaire 9,81 · vetements 7,91 · femme 7,75. Le plus faible des dix, 5,71:1, passe encore le seuil renforcé 4,5 avec un tiers de marge. POURQUOI PAS « REMETTRE L'ENCRE EN NOIR » : sur l'accent clair des huiles (#F08A1D), le noir donne 8,36:1 mais un ruban jaune vif pleine largeur — c'est la bande d'avertissement d'un chantier, pas la devanture d'une maison. L'accent grave garde la couleur du rayon et rend la bande lisible : une seule règle règle les deux. */ #defile{ background:var(--u2f) } /* La même faute, au même endroit du raisonnement : rayon.css peint la pastille du compte d'articles en var(--u2) + var(--nuit). Sur la page des huiles, « 23 articles » sortait à 2,14:1 — le seul chiffre de la page qui dise combien il y a à voir. Même remède, même famille de couleur. Relevé après : 5,71:1 au pire des dix univers. */ .rtete__cpt{ background:var(--u2f) }