/* ========================================================================== ATELIER PRÉPRESSE — cinq gestes, cinq interrupteurs Chaque bloc ne s'applique QUE si `body` porte sa classe `.iprep-`. Éteindre un interrupteur retire la classe, donc annule tout le bloc. ========================================================================== */ /* ========================================================================== 08 · LE COLOPHON — l'achevé d'imprimer ========================================================================== */ /* ⛔ LE NOM DE CETTE CLASSE PORTE UN SUFFIXE, ET CE N EST PAS DECORATIF. `iprep_classes_corps()` pose `iprep-` sur le pour CHAQUE geste allume. Cette classe est un ETAT, pas un composant. Le 02/09 le bloc du colophon portait `iprep-colophon` — le MEME nom. La regle ci-dessous frappait donc aussi le , et tout le site heritait de `color:#8E8A7D; font-size:11px; font-family:mono`. Mesure du 03/09 sur /categorie-produit/textile/ : 17 textes visibles a 3,116 : 1 (seuil AA 4,5), dont les 8 noms de sous-rubriques, rendus en IBM Plex Mono au lieu d Archivo. ⭐ LA REGLE, desormais : une classe d ETAT est `iprep-` et ne porte JAMAIS de declaration visuelle destinee a un bloc ; une classe de BLOC porte toujours un suffixe (`-bloc`, `-ligne`, `-zone`, `-reperage`). Les quatre autres gestes respectaient deja cette regle : le colophon etait le seul dont le bloc n avait pas de suffixe. */ .iprep-colophon-bloc { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 11px; line-height: 1.85; letter-spacing: .02em; /* ⛔⛔ RETOUR EN ARRIERE, le 03/09 au soir. NE PAS REMETTRE UN JETON ICI. Le 03/09 au matin, ce #8E8A7D a ete remplace par var(--ip-graphite) au motif qu il donnait 3,12 : 1. CE CALCUL ETAIT FAUX : il prenait pour fond le PAPIER de la page (#F6F3EC). Or ce bloc vit dans le PIED, qui est SOMBRE. Chaine des ancetres, mesuree dans le navigateur le 03/09 : DIV.iprep-colophon-bloc -> transparent FOOTER.ip-site-footer -> rgb(22,21,15) = #16150F <- le fond EFFECTIF BODY -> #F6F3EC Sur ce fond-la : #8E8A7D -> 5,296 : 1 PASSE AA #6F6B61 -> 3,441 : 1 ECHOUE <- ce que la « correction » avait pose #8E8A7D est la couleur de texte tertiaire DU PIED : le theme l emploie deja pour .ip-foot-titre, et elle y a ete mesuree a 5,30 : 1. --ip-graphite est le gris du fond CLAIR ; le poser ici est une faute de contexte, pas une mise en conformite. (Le meme jeton est juste plus bas, sur .iprep-passe-legende, qui est sur fond clair — ne pas « harmoniser » les deux.) ⭐ LA LECON : un contraste ne se mesure jamais contre le fond du BODY, mais contre le premier ancetre NON TRANSPARENT. */ color: #8E8A7D; padding: 26px 24px 4px; } .iprep-colophon-bloc p { margin: 0; max-width: 62ch; } /* Le premier mot porte l'accent, comme la ligne de titre d'un achevé. */ .iprep-colophon-bloc p::first-line { color: #B4AFA1; } /* ========================================================================== 10 · LA FEUILLE DE PASSE — la page 404 Le seul endroit du site où un décalage de repérage a le droit d'exister : ici, il dit exactement la bonne chose. ========================================================================== */ .iprep-passe-zone { max-width: 760px; margin: 0 auto; padding: 96px 24px 120px; text-align: center; } .iprep-passe-reperage { position: relative; display: inline-block; font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: clamp(72px, 18vw, 168px); font-weight: 600; line-height: 1; letter-spacing: -.02em; /* Le chiffre « juste » est en encre ; les deux autres sont les encres décalées d'une feuille de calage. */ color: var(--ip-encre, #16150F); } .iprep-passe-reperage span { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; } .iprep-passe-reperage .iprep-c { color: #00AEEF; transform: translate(-7px, -4px); } .iprep-passe-reperage .iprep-m { color: #EC008C; transform: translate(6px, 3px); } .iprep-passe-legende { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ip-graphite, #6F6B61); margin: 26px 0 10px; } .iprep-passe-zone h1 { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 14px; } .iprep-passe-zone p.iprep-passe-mot { color: var(--ip-graphite, #6F6B61); max-width: 46ch; margin: 0 auto 30px; } /* Le filet de coupe, discret, sous le bloc. */ .iprep-passe-filet { width: 120px; height: 1px; margin: 34px auto 0; background: var(--ip-filigrane, #E5DFD2); } /* ========================================================================== 04 · LE VERNIS SÉLECTIF — au survol des cartes produit Il remplace l'ombre portée, que la charte interdit, par quelque chose de plus juste : le papier n'a pas d'ombre, il a un reflet. ⛔ Trois contraintes, toutes obligatoires : · pointer-events: none — sinon le reflet mange le clic sur la carte · overflow: hidden — sinon il déborde et fait défiler la grille · rien sous prefers-reduced-motion ⚠ NE S'APPLIQUE PAS aux cartes d'option du configurateur (.ipc-carte) : elles portent déjà un correctif de focus, et deux chantiers sur le même élément se marchent dessus. ========================================================================== */ .iprep-vernis .ip-product-card { position: relative; overflow: hidden; } .iprep-vernis .ip-product-card::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -45%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .92), transparent); transform: rotate(14deg) translateX(-30px); transition: transform 760ms cubic-bezier(.2, .7, .3, 1); pointer-events: none; z-index: 2; } .iprep-vernis .ip-product-card:hover::after, .iprep-vernis .ip-product-card:focus-within::after { transform: rotate(14deg) translateX(320px); } @media (prefers-reduced-motion: reduce) { .iprep-vernis .ip-product-card::after { transition: none; display: none; } } /* ========================================================================== 03 · LA BANDE DE PINCE — la bande que la presse attrape ⚠ ELLE DÉCALE LE CORPS DE LA PAGE. Livrée ÉTEINTE tant que les cinq mesures de débordement ne sont pas collées au journal. Technique retenue : `padding-left` sur , PAS `margin`. Le padding n'entre pas dans le calcul de `100vw` et ne crée donc pas de barre de défilement horizontale ; la marge, si. ========================================================================== */ .iprep-pince { padding-left: 34px; } .iprep-pince::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: 34px; background: #EAE5D9; border-right: 1px solid #DCD5C6; z-index: 60; pointer-events: none; } .iprep-pince .iprep-pince-ligne { position: fixed; left: 0; top: 0; width: 34px; height: 100vh; z-index: 61; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #9C978B; writing-mode: vertical-rl; white-space: nowrap; } /* L'en-tête collant vit dans le corps décalé : il suit le padding tout seul. Ce qui est en `position: fixed`, en revanche, ignore le décalage — d'où le rattrapage ci-dessous, qui ne vise que ce qui touche le bord gauche. */ .iprep-pince .ip-site-header { left: 34px; } @media (max-width: 760px) { .iprep-pince { padding-left: 0; } .iprep-pince::before, .iprep-pince .iprep-pince-ligne { display: none; } .iprep-pince .ip-site-header { left: 0; } } /* ========================================================================== 02 · LES ANGLES DE TRAME — posée, mais ÉTEINTE En quadri, chaque encre est tramée à un angle normé, et c'est ce qui évite le moiré : cyan 15°, magenta 75°, jaune 0°, noir 45°. ⛔ LIVRÉE À 0. Elle ne s'allume qu'après DEUX mesures collées : 1. contraste du corps de texte par-dessus la trame, >= 4,5 : 1 2. coût de rendu sur une page de catégorie ⚠ Si la trame se voit, elle est ratée. Dans le doute : plus pâle. ⚠ ET UNE MESURE À FAIRE AVANT : la classe `product_cat-` annoncée par la mission n'a PAS été trouvée sur le corps d'une page de rayon — seul `tax-product_cat` y est. Les sélecteurs ci-dessous visent `term-`, à vérifier rayon par rayon avant d'allumer quoi que ce soit. ========================================================================== */ .iprep-trame.tax-product_cat { background-repeat: repeat; background-size: 6px 6px; } .iprep-trame.term-imprimes { /* noir, 45° */ background-image: repeating-linear-gradient(45deg, rgba(22, 21, 15, .035) 0 1px, transparent 1px 6px); } .iprep-trame.term-grand-format { /* cyan, 15° */ background-image: repeating-linear-gradient(15deg, rgba(0, 174, 239, .035) 0 1px, transparent 1px 6px); } .iprep-trame.term-textile { /* magenta, 75° */ background-image: repeating-linear-gradient(75deg, rgba(236, 0, 140, .03) 0 1px, transparent 1px 6px); } .iprep-trame.term-objets-publicitaires { /* jaune, 0° */ background-image: repeating-linear-gradient(0deg, rgba(255, 222, 0, .05) 0 1px, transparent 1px 6px); } @media (prefers-reduced-motion: reduce) { /* La trame ne bouge pas : rien à désactiver ici. Bloc laissé vide volontairement, pour que personne n'ait à se demander s'il manque. */ }