/* =================================================================== MAISON TRESSANE — REFONTE DE LA DIRECTION ARTISTIQUE =================================================================== Cette feuille se charge APRES main.css et woo.css. Elle ne les remplace pas : elle redefinit le langage visuel a la racine. Pourquoi cette methode plutot qu'une reecriture complete ? Parce que les deux feuilles existantes contiennent 753 appels a des variables CSS contre seulement 24 couleurs ecrites en dur. Tout le systeme est donc pilotable depuis « :root ». On garde ainsi trois mois de reglages responsive et de corrections WooCommerce, et l'on change ce qui fait vraiment le style : les polices, les couleurs, l'echelle, et la presence ou non d'ornements. Retour arriere : retirer la ligne wp_enqueue_style( 'ml-refonte' ) dans functions.php. Rien d'autre n'a bouge. ------------------------------------------------------------------ LA DIRECTION, EN TROIS DECISIONS ------------------------------------------------------------------ 1. Une seule police. Le couple Playfair italique + doré est LE gabarit « luxe » qu'on trouve sur des milliers de boutiques. C'est ce qui faisait « template achete ». Jost seule, tres grosse et tres serree, se remarque parce que c'est rare. 2. Plus de dore. La couleur de la page vient desormais des perruques, qui sont colorees. Un decor neutre fait ressortir le produit : c'est le principe de COS, Arket ou Zara. 3. Rien d'arrondi, rien d'ombre. Des filets d'un pixel a la place. L'ombre portee et l'angle arrondi sont les deux marqueurs les plus surs du site fait a la va-vite. =================================================================== */ /* =================================================================== 1. LA RACINE =================================================================== */ :root { /* Une seule famille. « --serif » garde son nom pour ne rien casser dans les 32 regles qui l'appellent, mais pointe sur Jost. */ --serif: 'Jost', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Encre et papier. Le noir n'est pas pur (#000 vibre a l'ecran) et le fond n'est pas blanc : un papier legerement chaud fatigue moins l'oeil sur une longue page de catalogue. */ --noir: #111110; --noir-2: #1B1B19; --noir-3: #262523; --creme: #F5F3EF; --creme-2: #EAE6DE; --blanc: #FFFFFF; --gris: #5E5A54; --gris-2: #8A857D; /* Le dore devient de l'encre. Les cinquante elements qui l'appelaient ne disparaissent pas : ils deviennent noirs, donc lisibles et discrets. Le rouge, lui, est pose a la main dans cette feuille, sur une poignee d'elements seulement — sinon ce serait le meme defaut qu'avant, avec une autre couleur. */ --champagne: #111110; --champagne-2: #111110; --champagne-3: #F5F3EF; --accent: #C8402E; /* Le meme rouge sur fond noir ne donne que 3,8:1, sous les 4,5:1 exiges pour du petit texte. Eclairci pour les fonds sombres. */ --accent-clair: #E8705C; --bordure: rgba(17, 17, 16, .18); --bordure-2: rgba(17, 17, 16, .14); /* Plus aucune ombre. Les variables restent definies pour ne pas casser les regles qui les appellent, mais ne dessinent rien. */ --ombre: none; --ombre-2: none; } /* =================================================================== 2. TYPOGRAPHIE — l'echelle fait tout le travail =================================================================== Les titres passent en capitales, graisse moyenne, chasse negative et interligne ecrase. C'est ce reglage-la, plus que la police, qui fait la difference entre « joli » et « dessine ». =================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; } h1 { font-size: clamp(2.6rem, 8.5vw, 8rem); line-height: .88; letter-spacing: -.045em; } .entete-section h2, .editorial h2, .video-section h2 { font-size: clamp(1.9rem, 5vw, 4.2rem); } h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -.02em; } /* L'italique doré du hero devient du rouge droit. L'italique etait le deuxieme marqueur du gabarit « luxe ». */ h1 em, h2 em, .hero h1 em { font-style: normal; color: var(--accent); } .section--noir h1 em, .section--noir h2 em, .hero h1 em { color: var(--accent-clair); } /* Le mot rempli d'une photo (background-clip: text) etait un effet pour l'effet : illisible a petite taille, invisible au chargement, et il datait la page. Il redevient du texte. */ .hero__mot { background: none !important; -webkit-text-fill-color: var(--accent-clair); color: var(--accent-clair); -webkit-background-clip: initial; background-clip: initial; } .hero__balai { display: none; } /* Le corps de texte : un cran plus petit et plus dense qu'avant. Les longues mesures aerees vont bien a un magazine, pas a un catalogue ou l'on compare des modeles. */ body { font-size: 15px; line-height: 1.55; } .chapo { font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; letter-spacing: 0; } /* =================================================================== 3. LES ORNEMENTS S'EN VONT =================================================================== */ * { border-radius: 0 !important; } /* Deux exceptions : ce qui est rond par nature. */ .icone-btn__pastille, .lecture, .pastille-ronde, .hero__index-btn::before { border-radius: 999px !important; } .trait, .trait--centre, .surtitre { display: none !important; } /* Les ombres portees disparaissent partout, y compris la ou elles etaient ecrites en dur plutot qu'appelees par variable. */ .carte, .collection, .produit-media, ul.products li.product, .comparo, .comparo__col, .tiroir, .mega, .entete { box-shadow: none !important; } /* =================================================================== 4. EN-TETE — un filet, rien de plus =================================================================== */ .entete { background: var(--creme); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--noir); } .entete.is-collee { background: var(--creme); box-shadow: none; } .entete__barre { min-height: 68px; } .site-logo__text { font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 1.0625rem !important; } /* L'embleme reste — c'est la marque — mais il ne domine plus le nom. */ .site-logo__marque { height: 34px !important; } .nav-principale ul a { font-size: .75rem !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; } .nav-principale a::after { background: var(--noir); height: 1px; } /* =================================================================== 5. BOUTONS — pleins, carres, sans effet =================================================================== */ .btn { --bg: var(--noir); --fg: var(--creme); --bd: var(--noir); font-size: .75rem; font-weight: 500; letter-spacing: .2em; padding: 1.05em 2.3em; transition: background-color .2s, color .2s, border-color .2s; } .btn::after { display: none; } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); } .btn--or { --bg: var(--accent); --fg: var(--blanc); --bd: var(--accent); } .btn--or:hover { background: var(--noir); border-color: var(--noir); color: var(--creme); } .btn--vide { --bg: transparent; --fg: var(--noir); --bd: var(--noir); } .btn--vide:hover { color: var(--blanc); } .btn--clair { --bg: transparent; --fg: var(--creme); --bd: rgba(245,243,239,.5); } .btn--clair:hover { background: var(--creme); border-color: var(--creme); color: var(--noir); } .lien-souligne { border-bottom-color: var(--noir); } .section--noir .lien-souligne { border-bottom-color: var(--creme); color: var(--creme); } /* =================================================================== 6. GRILLE PRODUITS — au trait, comme une planche de catalogue =================================================================== Les cartes ne flottent plus cote a cote : elles sont separees par un filet continu. C'est ce qui donne l'impression d'un catalogue tenu plutot que d'une liste de vignettes. =================================================================== */ ul.products { gap: 1px !important; background: var(--noir); border: 1px solid var(--noir); } ul.products li.product { background: var(--creme); padding-bottom: 16px; } .section--noir ul.products { background: rgba(245,243,239,.22); border-color: rgba(245,243,239,.22); } .section--noir ul.products li.product { background: var(--noir); } /* Surtout pas de « margin-bottom: 0 » ici : sur telephone, woo.css reserve 88 px sous la photo pour y loger le bouton. En annulant cette marge, le bouton retombait sur le titre du produit. */ .produit-media { background: var(--creme-2); } .section--noir .produit-media { background: var(--noir-2); } .produit-infos { padding: 13px 15px 0; gap: 5px; } .produit-cat { display: none; } ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif) !important; font-size: .875rem !important; font-weight: 400; line-height: 1.3; text-transform: none; letter-spacing: 0; } .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price bdi { font-weight: 600; font-size: .875rem; } /* Le bouton « Ajouter » ne surgit plus par-dessus la photo : il se pose sous le prix, toujours visible. Un bouton qui n'apparait qu'au survol n'existe pas sur telephone, et sur ordinateur il masque la photo au moment ou l'on veut justement la regarder. */ /* CORRECTION — ne PAS toucher au placement de ce bloc. Ma version precedente le forcait en « position: static », ce qui le sortait de son placement absolu et le remettait dans le flux : il atterrissait EN HAUT de la photo, en travers du visage du modele, sur telephone comme sur ordinateur. Le placement d origine etait juste, et deja regle finement : en bas de la photo au survol sur ordinateur, et SOUS la photo sur telephone (regle a 700 px, avec 88 px reserves pour lui). On ne change donc que l apparence. */ .produit-action { padding: 0; } .produit-action .button { width: 100%; background: transparent; color: var(--noir); border: 1px solid var(--noir); font-size: .7rem !important; letter-spacing: .18em; text-transform: uppercase; padding: .85em 1em; } .produit-action .button:hover { background: var(--noir); color: var(--creme); } .section--noir .produit-action .button { color: var(--creme); border-color: rgba(245,243,239,.45); } .section--noir .produit-action .button:hover { background: var(--creme); color: var(--noir); } /* La pastille de promotion : le seul endroit ou le rouge est plein. */ .pastille, .onsale, span.onsale { background: var(--accent) !important; color: #fff !important; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; } /* =================================================================== 7. CARTES DE COLLECTION =================================================================== */ .collection__accroche { color: rgba(245,243,239,.8); letter-spacing: .16em; } .collection__compte { color: rgba(245,243,239,.62); } .collection__nom { font-family: var(--serif); text-transform: uppercase; font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.3rem, 2.2vw, 1.9rem); } .collection__compte .fleche { color: var(--accent-clair); } /* =================================================================== 8. SECTIONS — plus denses, separees par un filet =================================================================== */ .section { padding-block: clamp(50px, 6.4vw, 96px); } .section + .section { border-top: 1px solid var(--bordure); } .section--creme { background: var(--creme-2); } .entete-section { border-bottom: 1px solid var(--noir); padding-bottom: 16px; margin-bottom: clamp(24px, 3vw, 44px); } .section--noir .entete-section { border-bottom-color: rgba(245,243,239,.3); } /* =================================================================== 9. MEGA-MENU ET RUBAN, ajustes au nouveau langage =================================================================== */ .mega { background: var(--noir); border-top: 1px solid var(--noir); } .mega__titre { color: var(--accent-clair); } .mega__col a { font-family: var(--serif); text-transform: uppercase; font-size: .875rem; letter-spacing: .02em; } .mega__vedette { background: transparent; border-color: rgba(245,243,239,.35); } .mega__vedette:hover { background: var(--accent); border-color: var(--accent); } .mega__vedette-sur { color: var(--accent-clair); } .mega__vedette:hover .mega__vedette-sur { color: #fff; } .mega__vedette-nom { font-family: var(--serif); text-transform: uppercase; letter-spacing: -.02em; } .annonce { background: var(--noir); } .annonce__item svg { stroke: var(--accent-clair); } /* =================================================================== 10. PIED DE PAGE =================================================================== */ .pied { background: var(--noir); } .pied__marque .site-logo__text { font-size: 1.0625rem !important; } .pied h3, .pied h4 { font-size: .7rem; letter-spacing: .2em; } /* Correction : « tete » ET « sans rien couper » ressortaient tous deux en rouge, ce qui fait deux accents dans un meme titre — donc aucun. Le mot rempli d'une photo redevient simplement clair, et la couleur ne marque plus qu'une seule ligne. */ .hero__mot { -webkit-text-fill-color: var(--creme); color: var(--creme); } /* =================================================================== 11. CORRECTIONS DE CONTRASTE APRES MESURE =================================================================== Mesure sur les trois gabarits (accueil, boutique, fiche produit) : 42 textes sous le seuil sur la boutique, 30 sur la fiche. Tous venaient du meme endroit — le gris secondaire, que j'avais eclairci a #8A857D. A 12 px il ne donnait plus que 3,31:1 la ou il en faut 4,5. Corrige a #6F6B63, mesure a 4,79:1 sur le papier. Le gris secondaire finit donc tres proche du gris principal. C'est voulu : sur une page de catalogue, la hierarchie doit se lire a la taille et a la graisse, pas a des nuances de gris qu'on ne distingue pas et qui se paient en lisibilite. =================================================================== */ :root { --gris-2: #6F6B63; } /* Le fil d'Ariane et les mentions de paiement etaient sur une couleur ecrite en dur, hors du systeme de variables. */ .woocommerce-breadcrumb, .woocommerce-breadcrumb a, .fil, .fil a, .fil__sep, .produit-paiement, figcaption { color: var(--gris) !important; } /* Le bandeau d'accompagnement gardait un fond dore ecrit en dur. */ .accompagnement-ligne { background: rgba(17,17,16,.05); border-left-color: var(--accent); } .accompagnement-ligne code, .accompagnement code { background: rgba(17,17,16,.08); color: var(--noir); } .pied .accompagnement-ligne { background: rgba(245,243,239,.07); } .pied .accompagnement-ligne code { background: rgba(245,243,239,.14); color: var(--creme); } /* Correction : la regle precedente forcait le fil d Ariane en gris fonce PARTOUT, y compris dans l en-tete de boutique qui est noir — 2,76:1, illisible. Un « !important » applique sans regarder ou l element se trouve. On distingue les deux contextes. */ .entete-page .woocommerce-breadcrumb, .entete-page .woocommerce-breadcrumb a, .entete-page .fil__sep, .section--noir .woocommerce-breadcrumb, .section--noir .woocommerce-breadcrumb a { color: rgba(245,243,239,.82) !important; } .entete-page .woocommerce-breadcrumb a:hover { color: var(--blanc) !important; } /* =================================================================== 12. DERNIERS ECARTS DE CONTRASTE =================================================================== #6F6B63 passait sur le papier (4,79:1) mais echouait de justesse sur le creme fonce du fond alterne : 4,49:1 pour 4,5 requis. On descend a #6A665E, mesure a 4,69:1 sur ce fond-la. Un dixieme de point, mais c'est la difference entre conforme et non conforme. =================================================================== */ :root { --gris-2: #6A665E; } .page-numbers { color: var(--gris); } .page-numbers.current, a.page-numbers:hover { color: var(--noir); } /* Le bandeau d'accompagnement s'adresse a des personnes en traitement : c'est le dernier endroit ou l'on peut se permettre du texte pale. */ .accompagnement-ligne { color: var(--noir); } .accompagnement-ligne a { color: var(--accent); } .pied .accompagnement-ligne { color: var(--creme); } .pied .accompagnement-ligne a { color: var(--accent-clair); } /* =================================================================== 13. LE ROUGE A DEUX VALEURS, PAS UNE =================================================================== #C8402E est juste pour un aplat (texte blanc dessus) mais trop clair pour du texte pose sur le papier : 4,06:1 la ou il en faut 4,5. On ajoute une troisieme valeur, reservee au texte sur fond clair — 5,2:1 mesure. Trois valeurs pour une couleur, c'est ce que demande un accent qui doit vivre sur du clair ET sur du sombre. =================================================================== */ :root { --accent-sombre: #A93726; } a.lien-accent, .accompagnement-ligne a, .contenu a:not(.btn), .entree a:not(.btn) { color: var(--accent-sombre); } /* La pagination : le numero courant restait pale malgre la regle precedente, une regle plus precise de woo.css passait devant. */ .woocommerce nav.woocommerce-pagination ul li span.page-numbers, .woocommerce nav.woocommerce-pagination ul li a.page-numbers, nav.woocommerce-pagination span.page-numbers { color: var(--noir); } .woocommerce nav.woocommerce-pagination ul li a.page-numbers { color: var(--gris); } /* =================================================================== 14. LE HERO — corriger ma propre erreur =================================================================== J'ai applique au hero l'echelle de la maquette d'apercu. Mais dans la maquette le titre occupait TOUTE la largeur ; ici il vit dans une colonne de 560 px, a cote de la photo. Mesure du defaut : le panneau noir s'arrete a x=720, le titre allait jusqu'a x=820 — 101 px de debordement par-dessus la photo — et se cassait en QUATRE lignes bancales (« CHANGEZ DE / TETE / SANS RIEN / COUPER »). Un titre a 100,8 px dans une colonne de 560 px ne peut pas tomber juste : en capitales Jost, chaque signe occupe environ 0,62 fois le corps, donc « SANS RIEN COUPER » (16 signes) reclame 16 x 0,62 x 100,8 = 1 000 px. Il en avait 560. Deux corrections. On elargit un peu la colonne de texte, et l'on dimensionne le titre pour qu'il tienne en DEUX lignes pleines : a 57,6 px, la ligne la plus longue demande 571 px pour 610 disponibles. Et l'on ajoute une garde pour qu'aucun titre ne puisse plus jamais deborder de son panneau, quel que soit le texte. =================================================================== */ @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); } } .hero h1 { font-size: clamp(2.05rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.035em; max-width: 100%; overflow-wrap: break-word; margin-bottom: .55em; } .hero__inner { max-width: 100%; padding-right: clamp(20px, 3vw, 56px); } /* Le chapo reprend une mesure normale : il etait cale sur 50 signes alors que la colonne s'est elargie. */ .hero__chapo { font-size: 1rem; line-height: 1.75; max-width: 44ch; } /* La legende de la photo etait en gris sur une image claire. Elle passe sur un fond plein : c'est le seul moyen fiable quand le fond est une photo qui change toutes les sept secondes. */ .hero__legende { background: rgba(17, 17, 16, .74); padding: 14px 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hero__legende-teinte { color: var(--blanc); font-size: 1.25rem; letter-spacing: -.01em; } .hero__legende-detail { color: rgba(245,243,239,.72); } .hero__legende-lien { color: var(--accent-clair); border-bottom-color: rgba(232,112,92,.5); } /* Sur telephone, la carte vit dans la section noire : le bouton pose sous la photo doit donc etre clair. La regle a 700 px de woo.css le met en « color: var(--noir) », invisible sur ce fond. */ @media (max-width: 700px) { .section--noir .produit-action .button, .section--noir .produit-action .added_to_cart { background: transparent; color: var(--creme); border: 1px solid rgba(245, 243, 239, .45); } .section--noir .produit-action .button:active { background: var(--creme); color: var(--noir); } } /* =================================================================== 15. LE PANIER =================================================================== La refonte n'avait pas touche cette page : 119 regles dans woo.css, 4 seulement dans cette feuille. Elle etait donc restee au langage d'avant, avec ses defauts propres, mesures avant correction : - en-tetes de colonnes a 9 et 10 px, en gris pale - vignette produit de 65 x 95 px dans une ligne de 175 px - bouton « Valider la commande » de 41 px de haut, sous le minimum tactile de 44 px — pour le bouton le plus important de toute la boutique - le nom du produit en rouge : ma regle d'accent sur les liens de contenu attrapait aussi les liens du panier Le panier n'est pas une page a decorer. C'est la derniere etape avant le paiement : tout doit y etre evident. On agrandit ce qui compte (la photo, le total, le bouton) et l'on calme le reste. =================================================================== */ /* Le nom du produit redevient noir. Ma regle « .contenu a » visait les liens editoriaux ; elle debordait sur toute la boutique. */ .contenu .woocommerce a:not(.btn):not(.button):not(.checkout-button) { color: var(--noir); } .contenu .woocommerce a.remove { color: var(--gris); } /* --- Le tableau ------------------------------------------------- */ .woocommerce table.shop_table { border: 0; border-collapse: collapse; width: 100%; } .woocommerce table.shop_table thead th { font-size: .6875rem !important; /* 11 px, contre 9 et 10 */ letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--noir) !important; padding: 0 14px 14px; border-bottom: 1px solid var(--noir); text-align: left; } .woocommerce table.shop_table td { border-bottom: 1px solid var(--bordure-2); padding: 22px 14px; vertical-align: middle; } .woocommerce table.shop_table td.product-remove { padding-left: 0; width: 44px; } .woocommerce table.shop_table td.product-subtotal, .woocommerce table.shop_table th.product-subtotal { text-align: right; padding-right: 0; } /* La vignette : c'est une boutique de cheveux, la photo doit se voir. 65 px de large ne montrent rien d'une coupe. */ .woocommerce table.shop_table td.product-thumbnail { width: 112px; padding-left: 0; } .woocommerce table.shop_table td.product-thumbnail img { width: 96px; height: 128px; object-fit: cover; background: var(--creme-2); display: block; } .woocommerce table.shop_table td.product-name a { font-size: 1rem; line-height: 1.35; } .woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal { font-size: .9375rem; } .woocommerce table.shop_table td.product-subtotal { font-weight: 600; } /* Le « x » de suppression : discret, mais franchement rouge au survol pour qu'on sache que le geste est definitif. */ .woocommerce a.remove { width: 30px; height: 30px; line-height: 28px; font-size: 20px; border: 1px solid var(--bordure-2); background: transparent; transition: color .2s, border-color .2s; } .woocommerce a.remove:hover { color: var(--accent) !important; border-color: var(--accent); background: transparent !important; } /* --- Le selecteur de quantite ------------------------------------ */ .quantity, .quantite { display: inline-flex; align-items: stretch; border: 1px solid var(--noir); } .quantity input.qty, .quantite input.qty { width: 46px; height: 44px; border: 0; text-align: center; font-family: var(--sans); font-size: .9375rem; background: transparent; color: var(--noir); } .quantite__btn, .quantity button { width: 40px; height: 44px; border: 0; background: transparent; color: var(--noir); font-size: 17px; cursor: pointer; transition: background .2s, color .2s; } .quantite__btn:hover, .quantity button:hover { background: var(--noir); color: var(--creme); } /* --- Le code promo ----------------------------------------------- */ td.actions { padding: 22px 0 !important; border-bottom: 0 !important; } .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; } .coupon #coupon_code, .coupon input[type="text"] { flex: 1 1 180px; min-height: 48px; padding: 0 16px; border: 1px solid var(--bordure); background: var(--blanc); font-family: var(--sans); font-size: .9375rem; color: var(--noir); } .coupon #coupon_code:focus { outline: 2px solid var(--noir); outline-offset: -2px; border-color: var(--noir); } .coupon button { min-height: 48px; white-space: nowrap; } /* --- Le resume et le total --------------------------------------- */ .cart_totals, .panier-resume { background: var(--blanc); border: 1px solid var(--noir); padding: clamp(22px, 2.4vw, 32px); } .cart_totals h2, .panier-resume h2 { font-size: .75rem !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--noir); } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 13px 0; border-bottom: 1px solid var(--bordure-2); font-size: .9375rem; } .cart_totals table.shop_table th { color: var(--gris); font-weight: 400; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--bordure-2); } /* Le total : c'est le chiffre qu'on vient chercher. Il passe de 18 px gris a 28 px noir, et se detache par un filet plein. */ .cart_totals tr.order-total th, .cart_totals tr.order-total td { border-bottom: 0; border-top: 1px solid var(--noir); padding-top: 20px; font-size: 1.75rem !important; font-weight: 600; color: var(--noir) !important; letter-spacing: -.02em; } .cart_totals tr.order-total th { font-size: .75rem !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; vertical-align: bottom; padding-bottom: 4px; } /* --- Le bouton de commande --------------------------------------- */ .wc-proceed-to-checkout { padding: 22px 0 0 !important; } .woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0; background: var(--noir); color: var(--creme); border: 1px solid var(--noir); font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, border-color .2s; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); } /* --- Le panier sur telephone ------------------------------------- */ @media (max-width: 640px) { /* La carte respire : la photo passe de 84 x 105 a 96 x 128, la meme proportion que sur ordinateur. Sur une boutique de cheveux, une vignette trop petite ne montre ni la longueur ni la matiere. */ .woocommerce-cart form.woocommerce-cart-form tr.cart_item { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding: 22px 40px 22px 0; } .woocommerce-cart form.woocommerce-cart-form td.product-thumbnail img { width: 96px; height: 128px; } .woocommerce-cart form.woocommerce-cart-form td.product-name a { font-size: 1rem; line-height: 1.35; } .woocommerce-cart form.woocommerce-cart-form td.product-subtotal { font-size: 1.0625rem; font-weight: 600; } /* Le code promo prenait toute une ligne pour un bouton enorme a cote d'un champ etroit. Les deux passent pleine largeur, l'un sous l'autre : plus lisible, et la cible tactile est entiere. */ .coupon { flex-direction: column; gap: 10px; } .coupon #coupon_code, .coupon button { width: 100%; } /* Le fil des etapes tenait sur deux lignes en se cassant n'importe ou. On le resserre pour qu'il tienne d'un trait. */ .tunnel-etapes { gap: 8px; font-size: .625rem; letter-spacing: .1em; flex-wrap: nowrap; } .tunnel-etape { white-space: nowrap; } .cart_totals, .panier-resume { padding: 22px 18px; } .cart_totals tr.order-total th, .cart_totals tr.order-total td { font-size: 1.5rem !important; } .cart_totals tr.order-total th { font-size: .7rem !important; } } /* Les blocs de paiement express de Stripe laissaient deux cadres vides sous le bouton quand aucun moyen express n'est disponible (ni Apple Pay ni Google Pay sur le navigateur en cours). Un cadre vide donne l'impression que la page est cassee. On ne montre l'enveloppe que si elle contient vraiment quelque chose. */ #wc-stripe-payment-request-wrapper:empty, .wc-stripe-payment-request-wrapper:empty, #wc-stripe-payment-request-button-separator:empty { display: none !important; } /* --- Deux corrections sur le panier mobile ------------------------ */ @media (max-width: 640px) { /* « flex: 1 1 180px » etait ecrit pour une rangee. En colonne, flex-basis s'applique a la HAUTEUR : le champ du code promo mesurait 180 px de haut, d'ou le grand cadre vide au-dessus du texte d'invite. */ .coupon #coupon_code, .coupon input[type="text"] { flex: 0 0 auto; height: 48px; min-height: 48px; } /* « nowrap » a fait deborder le fil des etapes de 45 px a gauche et d'autant a droite : trois etapes libellees ne tiennent pas sur 375 px. On les laisse passer a la ligne, on retire les traits de liaison qui ne servent qu'a l'horizontale, et l'on resserre. */ .tunnel-etapes { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; font-size: .625rem; letter-spacing: .08em; } .tunnel-etapes::before, .tunnel-etapes::after, .tunnel-etape::after, .tunnel-etape::before { display: none; } .tunnel-etape { white-space: nowrap; } } @media (max-width: 640px) { /* Les traits de liaison sont des « span.tunnel-sep » ; une fois les etapes empilees ils pendaient en bout de ligne sans relier quoi que ce soit. On les retire, et les trois etapes s'alignent en colonne comme une vraie liste d'etapes. */ .tunnel-sep { display: none; } .tunnel-etapes { flex-direction: column; align-items: flex-start; gap: 10px; } /* La cellule d'actions ouvrait par un filet et une hauteur vide avant le champ du code promo. */ td.actions { padding: 18px 0 0 !important; } } /* --- Trois finitions sur le panier, apres mesure ------------------ */ /* WooCommerce peint un fond beige (#EAE6DE) sur toutes les cellules d'en-tete. Il tracait une bande coloree au-dessus du tableau et une colonne coloree dans le resume — un reste du theme precedent qui n'a plus rien a faire ici. */ .woocommerce table.shop_table th, .woocommerce table.shop_table thead th, .cart_totals table.shop_table th, .woocommerce-checkout table.shop_table th { background: transparent !important; } /* La vignette tombait a 73 px de large pour 128 de haut : la photo etait ecrasee. On impose la largeur, sinon une regle de WooCommerce la recalcule depuis la largeur de la colonne. */ .woocommerce table.shop_table td.product-thumbnail img { width: 96px !important; min-width: 96px; height: 128px !important; max-width: none; } /* « Supprimer l'element » et « Miniature » sont des libelles destines aux lecteurs d'ecran : ils ne doivent pas s'afficher comme des titres de colonne. On les cache a l'oeil en les gardant lisibles pour les outils d'accessibilite. */ .woocommerce table.shop_table th.product-remove, .woocommerce table.shop_table th.product-thumbnail { font-size: 0 !important; } @media (max-width: 640px) { /* La croix de suppression mesurait 28 px : au-dessus du minimum strict de 24 px, mais inconfortable au pouce. On monte a 40 px sans aller jusqu'a 44 : c'est une action destructrice, une cible trop genereuse se declenche par accident. */ .woocommerce a.remove { width: 40px; height: 40px; line-height: 38px; } } /* =================================================================== 16. LE PANIER — SUPPRIMER LA GRILLE FANTOME =================================================================== Mesure : les treize cellules du tableau portaient TOUTES une bordure de 0,67 px sur leurs quatre cotes (valeur par defaut de WooCommerce). Ma regle precedente ne posait qu'une bordure basse — elle n'effacait pas les trois autres. Resultat : des traits verticaux a moitie dessines, dont un en plein milieu de la photo produit et un autre qui coupait « Sous-total » contre le bord. Ca ressemblait a un tableur casse, et c'est exactement ce que la cliente a vu. On repart a zero : aucune bordure sur aucune cellule, puis UN seul filet horizontal sous chaque ligne. Un panier se lit ligne par ligne ; il n'a jamais eu besoin de colonnes dessinees. =================================================================== */ .woocommerce-cart-form table.shop_table, .woocommerce-cart-form table.shop_table thead, .woocommerce-cart-form table.shop_table tbody, .woocommerce-cart-form table.shop_table tr, .woocommerce-cart-form table.shop_table th, .woocommerce-cart-form table.shop_table td { border: 0 !important; } .woocommerce-cart-form table.shop_table thead th { border-bottom: 1px solid var(--noir) !important; } .woocommerce-cart-form tr.cart_item > td { border-bottom: 1px solid var(--bordure-2) !important; } /* Le nom du produit portait lui aussi un filet bas : un souligne qui flottait sous la derniere ligne du titre, sans rien souligner. */ .woocommerce-cart-form td.product-name a { border-bottom: 0 !important; } .woocommerce-cart-form td.product-name a:hover { color: var(--accent-sombre) !important; } /* La ligne faisait 233 px de haut pour une photo de 128 : le contenu flottait. On resserre, la photo redevient le point d'ancrage. */ .woocommerce-cart-form table.shop_table td { padding: 18px 14px !important; } .woocommerce-cart-form table.shop_table td.product-remove { padding-left: 0 !important; } .woocommerce-cart-form table.shop_table td.product-thumbnail { padding-left: 0 !important; } .woocommerce-cart-form table.shop_table td.product-subtotal, .woocommerce-cart-form table.shop_table th.product-subtotal { padding-right: 0 !important; } /* 114 px separaient le fil des etapes du tableau. Un panier doit commencer tout de suite : on n'y flane pas. */ .tunnel-etapes { margin-bottom: 34px !important; } .woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-cart-form { margin-top: 0 !important; } /* --- Le bouton « Vider le panier » -------------------------------- */ .panier-vider { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 4px; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--bordure); transition: color .2s, border-color .2s; white-space: nowrap; } .panier-vider:hover { color: var(--accent-sombre) !important; border-bottom-color: var(--accent-sombre); } /* Arme : le rouge annonce ce qui va se passer, avant que ca se passe. */ .panier-vider.est-arme { color: var(--blanc) !important; background: var(--accent-sombre); border-bottom-color: var(--accent-sombre); padding: 0 14px; letter-spacing: .1em; } @media (max-width: 640px) { .panier-vider { margin-left: 0; width: 100%; justify-content: center; border: 1px solid var(--bordure); } .panier-vider.est-arme { border-color: var(--accent-sombre); } } /* =================================================================== 17. LES VIDEOS REDEVIENNENT VISIBLES =================================================================== Deux regles ecrites plus haut rendaient le travail invisible. 1) « @media (hover: none) { .collection__video { display: none } } » supprimait purement la video sur telephone. C'etait defendable tant qu'elle ne partait qu'au survol — sans survol, autant ne rien charger. Maintenant qu'elle se declenche a l'entree dans l'ecran, ce masquage n'a plus lieu d'etre : il privait la moitie des visiteuses de l'animation. 2) « .surtitre { display: none !important } » visait les six petits libelles dores repetes au-dessus des titres de section. Mais dans le bandeau video d'une collection, le « surtitre » n'est pas un ornement : c'est le NOM de la collection, et le seul titre du bandeau. On le rend, en le dessinant pour ce qu'il est. =================================================================== */ @media (hover: none) { .collection__video { display: block; } } .cat-video .surtitre, .cat-video .surtitre--clair { display: block !important; font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 500; line-height: .98; letter-spacing: -.03em; text-transform: uppercase; color: var(--blanc); margin-bottom: .45em; } .cat-video__texte p { color: rgba(245, 243, 239, .82); } /* =================================================================== 18. INFOLETTRE — reponses et bouton =================================================================== Le formulaire ne repondait rien parce qu'il ne faisait rien. Il a maintenant un traitement (inc/newsletter.php) et doit donc savoir dire ce qui s'est passe. =================================================================== */ .newsletter__reponse { max-width: 34rem; margin: 18px auto 0; padding: 14px 18px; font-size: .9375rem; line-height: 1.5; text-align: center; } .newsletter__reponse--ok { background: rgba(245, 243, 239, .08); border-left: 2px solid var(--accent-clair); color: var(--creme); } .newsletter__reponse--ko { background: rgba(200, 64, 46, .14); border-left: 2px solid var(--accent-clair); color: var(--creme); } /* Le bouton « Je m'inscris » est sur un fond noir : le rouge plein y est trop violent a cote d'un champ blanc. Contour clair, remplissage au survol — meme famille que les autres boutons du site. */ .newsletter .btn--or { --bg: transparent; --fg: var(--creme); --bd: rgba(245, 243, 239, .5); } .newsletter .btn--or:hover { background: var(--creme); border-color: var(--creme); color: var(--noir); } /* =================================================================== 19. LE HERO — LA TENUE VIENT DE CE QU'ON ENLEVE =================================================================== Deux versions refusees avant celle-ci. La premiere montrait des photos generees par IA, la seconde un selecteur a pastilles avec un compteur de modeles — une interface d'application, pas une maison. Ici : une image, un titre, une phrase, un lien. Le reglage qui fait tout le travail est la CHASSE. Un titre en capitales serrees a -0,04 em et en graisse 500 appartient au registre sportif. Le meme titre a +0,08 em et en graisse 300 appartient a celui des enseignes de mode. C'est le meme texte, la meme police, et deux mondes differents. =================================================================== */ .hero--maison { position: relative; display: block; min-height: min(88vh, 820px); background: var(--noir); color: var(--creme); overflow: hidden; isolation: isolate; } .hero--maison .hero__fond { position: absolute; inset: 0; z-index: 0; } .hero--maison .hero__film { width: 100%; height: 100%; object-fit: cover; object-position: 58% 26%; display: block; } /* Le degrade ne monte que sur le tiers bas : on ne salit pas l'image pour poser trois lignes de texte. */ .hero--maison .hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,16,.30) 0%, rgba(17,17,16,.10) 34%, rgba(17,17,16,.62) 72%, rgba(17,17,16,.90) 100%); } .hero--maison .hero__contenu { position: relative; z-index: 1; min-height: min(88vh, 820px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: clamp(88px, 11vw, 140px); max-width: var(--max); } .hero--maison .hero__titre { font-family: var(--serif); font-size: clamp(1.75rem, 3.4vw, 3.1rem); font-weight: 300; line-height: 1.22; letter-spacing: .08em; text-transform: uppercase; color: var(--blanc); margin: 0 0 clamp(20px, 2.4vw, 30px); text-wrap: balance; } .hero--maison .hero__phrase { font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.7; font-weight: 300; color: rgba(245,243,239,.86); max-width: 46ch; margin: 0 0 clamp(26px, 3vw, 38px); } /* Un lien souligne, pas un bouton plein : un aplat de couleur dans un hero de maison fait promotion. Le trait s'etire au survol. */ .hero--maison .hero__lien { display: inline-block; font-size: .6875rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--creme); padding-bottom: 9px; position: relative; } .hero--maison .hero__lien::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(245,243,239,.55); transition: width .45s cubic-bezier(.22,.61,.36,1), background-color .45s; } .hero--maison .hero__lien:hover::after { width: calc(100% + 34px); background: var(--creme); } .hero--maison .hero__lien:focus-visible { outline: 2px solid var(--creme); outline-offset: 6px; } /* Les conditions : une seule ligne fine, en bas. Une maison affiche ses conditions, elle ne les crie pas dans trois encadres. */ .hero__conditions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: clamp(14px, 1.6vw, 18px) var(--gouttiere); border-top: 1px solid rgba(245,243,239,.16); display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 3vw, 44px); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,243,239,.66); } @media (max-width: 760px) { .hero--maison, .hero--maison .hero__contenu { min-height: min(86vh, 700px); } .hero--maison .hero__contenu { padding-bottom: clamp(104px, 22vw, 150px); } /* La video est en paysage (960x540), le telephone en portrait : « cover » l agrandit tellement qu on ne voit plus que 30 % de sa largeur. Il faut donc viser le visage, sinon on cadre une oreille. */ /* Calcul : le film fait 960x540, le hero mobile 375x699. « cover » ajuste sur la hauteur (facteur 1,29), la largeur passe donc a 1 243 px et l on n en voit que 375, soit 30 %. Le visage occupe environ 25 a 55 % de la largeur source : on centre la fenetre a 35 %, pas a 48 % — sinon elle tombe sur l oreille. */ .hero--maison .hero__film { object-position: 35% 50%; } .hero--maison .hero__voile { background: linear-gradient(180deg, rgba(17,17,16,.34) 0%, rgba(17,17,16,.18) 26%, rgba(17,17,16,.70) 66%, rgba(17,17,16,.94) 100%); } .hero--maison .hero__titre { letter-spacing: .06em; line-height: 1.26; } .hero__conditions { gap: 4px 18px; font-size: .5625rem; letter-spacing: .16em; } } /* Animations limitees : l'image fixe du film suffit, on ne la lance pas. */ @media (prefers-reduced-motion: reduce) { .hero--maison .hero__film { display: none; } .hero--maison .hero__fond { background: var(--noir-2); } } /* Correction. « .hero > * { min-height: 100% } » avait ete ecrite pour l'ancien hero a deux colonnes, ou les deux volets devaient faire toute la hauteur. Elle s'applique encore aux enfants du nouveau hero : la ligne des conditions mesurait 792 px au lieu de sa hauteur de texte, et son contenu se calait donc tout en haut de la section. */ .hero--maison > * { min-height: 0; } .hero--maison .hero__contenu { min-height: min(88vh, 820px); } @media (max-width: 760px) { .hero--maison .hero__contenu { min-height: min(86vh, 700px); } } /* =================================================================== 20. LE HERO PASSE EN CLAIR =================================================================== La video precedente montrait un visage, pas des cheveux — reproche juste : sur une boutique de perruques, l'image d'ouverture doit parler du produit. Le nouveau film montre une chevelure longue et brillante que l'on peigne, sur un fond vert d'eau pale. Et comme ce fond est clair, on ne lui plaque pas un voile noir par-dessus : ce serait salir une image propre pour pouvoir y ecrire. Le hero passe donc en clair, texte a l'encre. Il enchaine d'ailleurs naturellement avec l'en-tete, qui est deja creme — alors que le hero sombre creait une rupture des la premiere ligne de la page. Le degrade part de la gauche, la ou vit le texte, et s'efface avant la chevelure. Mesure apres coup : 15,8:1 sur le titre. =================================================================== */ .hero--maison { background: var(--creme); color: var(--noir); } .hero--maison .hero__film { object-position: 62% 50%; } .hero--maison .hero__voile { background: linear-gradient(98deg, rgba(245,243,239,.97) 0%, rgba(245,243,239,.93) 24%, rgba(245,243,239,.55) 48%, rgba(245,243,239,.06) 72%, rgba(245,243,239,0) 100%), linear-gradient(180deg, rgba(245,243,239,.55) 0%, rgba(245,243,239,0) 22%, rgba(245,243,239,0) 70%, rgba(245,243,239,.72) 100%); } .hero--maison .hero__titre { color: var(--noir); } .hero--maison .hero__phrase { color: var(--gris); } .hero--maison .hero__lien { color: var(--noir); } .hero--maison .hero__lien::after { background: rgba(17,17,16,.4); } .hero--maison .hero__lien:hover::after { background: var(--noir); } .hero--maison .hero__lien:focus-visible { outline-color: var(--noir); } .hero__conditions { border-top: 1px solid var(--bordure); color: var(--gris); background: linear-gradient(180deg, rgba(245,243,239,0) 0%, rgba(245,243,239,.92) 40%); } @media (max-width: 760px) { /* Meme calcul que precedemment : le film fait 960x506, le hero mobile 375x699. « cover » ajuste sur la hauteur (facteur 1,38), la largeur monte a 1 326 px et l on n en voit que 28 %. La chevelure occupe la moitie droite de la source : on centre la fenetre a 66 %. */ .hero--maison .hero__film { object-position: 66% 50%; } .hero--maison .hero__voile { background: linear-gradient(180deg, rgba(245,243,239,.40) 0%, rgba(245,243,239,.18) 24%, rgba(245,243,239,.80) 62%, rgba(245,243,239,.97) 100%); } } @media (prefers-reduced-motion: reduce) { .hero--maison .hero__fond { background: var(--creme-2); } } /* =================================================================== 21. LE HERO — LA VRAIE CAUSE, ET LA REMISE A PLAT =================================================================== J'ai corrige ce voile quatre fois de suite : degrade plus large, plus opaque, colonne de texte plus etroite, puis un « z-index ». Aucune de ces quatre corrections n'a change quoi que ce soit a l'ecran, et pour une raison simple que j'aurais du chercher au premier essai plutot qu'au cinquieme : main.css, ligne 1448 : .hero__voile, .hero__defiler, .hero__media { display: none; } Une ligne laissee par un hero encore anterieur. Le voile n'etait pas mal place ni mal colore : il n'existait pas. Un element « display: none » mesure 0 x 0 — c'est d'ailleurs comme cela qu'on le reconnait, son rectangle est entierement nul, position comprise. La lecon, pour la prochaine fois : quand une correction visuelle ne produit aucun effet, on ne la refait pas en plus fort. On mesure d'abord l'element. Trois secondes auraient remplace quatre essais. Tout ce qui suit remplace les quatre rustines precedentes. Le voile redevenant reel, les valeurs poussees a l'extreme pour compenser son absence n'ont plus lieu d'etre : on redescend a un fondu normal. =================================================================== */ .hero--maison .hero__voile { display: block; pointer-events: none; } /* Le film et le voile sont deux elements freres dans « .hero__fond ». Le voile vient apres dans le balisage : il lui suffit d'etre en plan normal pour recouvrir le film. */ .hero--maison .hero__film { position: relative; z-index: 0; } .hero--maison .hero__voile { z-index: 1; } /* GRAND ECRAN — CADRAGE. J'ai fini par lire l'image plan par plan au lieu de l'estimer. Elle se decoupe ainsi, de gauche a droite de la source : 0 - 15 % fond vert d'eau, vide 15 - 35 % la main, la manche, le peigne 35 - 58 % LA CHEVELURE, le sujet 56 - 80 % le visage (bouche, menton, joue) 80 - 100 % l'epaule et le haut blanc Avec « object-position: 62 % », la fenetre montrait 13 a 92 % de la source : le visage entier, en clair, a droite — et la chevelure repoussee sous le voile, a gauche. Exactement l'inverse de ce qu'on demande a l'image d'ouverture d'une boutique de perruques. On ramene la fenetre a l'extreme gauche (0 %, soit 0 a 79 % de la source). Deux effets d'un coup : le visage n'est plus qu'une joue coupee au bord droit, et le texte tombe sur le fond vide au lieu de se poser sur la chevelure. */ .hero--maison .hero__film { object-position: 0% 50%; } /* Le voile peut donc redescendre tres bas. Il ne rattrape plus une image chargee : il pose un calme sur un fond deja uni. C'est la difference entre un cache et un fondu — et c'est ce qui separe une image d'ouverture d'une banniere. */ .hero--maison .hero__voile { background: linear-gradient(96deg, rgba(245,243,239,.88) 0%, rgba(245,243,239,.84) 22%, rgba(245,243,239,.60) 34%, rgba(245,243,239,.24) 48%, rgba(245,243,239,.04) 64%, rgba(245,243,239,0) 76%), linear-gradient(180deg, rgba(245,243,239,.40) 0%, rgba(245,243,239,0) 18%, rgba(245,243,239,0) 66%, rgba(245,243,239,.58) 100%); } .hero--maison .hero__titre { max-width: none; } .hero--maison .hero__phrase { max-width: 32ch; } /* TELEPHONE — un fondu vertical, pas lateral. L'ecran est en portrait : il n'y a plus de « cote gauche » libre, la chevelure traverse toute la largeur. Un degrade horizontal n'a donc plus rien a couvrir. On repasse a un fondu de haut en bas : l'image respire sur les deux tiers hauts, le texte s'appuie sur une creme quasi pleine dans le tiers bas. Cadrage : le film fait 960x506, le hero mobile 375x699. « cover » ajuste sur la hauteur (facteur 1,38) ; la largeur monte a 1 326 px et l'on n'en voit que 271 px de source, soit 28 %. La chevelure et le peigne occupent la bande 35-58 % de la source ; on y centre la fenetre, ce qui ecarte entierement le visage — et non 66 %, qui cadrait le cou. */ @media (max-width: 760px) { .hero--maison .hero__film { object-position: 45% 50%; } .hero--maison .hero__voile { background: linear-gradient(180deg, rgba(245,243,239,.30) 0%, rgba(245,243,239,.06) 20%, rgba(245,243,239,.20) 40%, rgba(245,243,239,.88) 58%, rgba(245,243,239,.98) 74%, rgba(245,243,239,1) 100%); } .hero--maison .hero__titre { max-width: 100%; } .hero--maison .hero__phrase { max-width: 100%; } } /* =================================================================== 22. SECTION D'OUVERTURE — DEUX COLONNES =================================================================== Voir l'en-tete de parts/hero.php pour le raisonnement. En resume : les quatre versions precedentes posaient le texte SUR le film, ce qui obligeait a voiler l'image pour rendre l'ecriture lisible. On y perdait les deux. Ici les deux elements sont cote a cote : l'ecriture a gauche sur la creme, le film a droite, entier et net. Consequence technique : plus aucun degrade, plus aucun « z-index », plus aucun « object-position » a calculer. Le contraste est de 16,9:1 par construction, puisque le texte est sur un aplat. Classe neuve : « .ouverture » n'herite d'aucune des 211 regles qui visaient « .hero ». =================================================================== */ .ouverture { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: min(78vh, 730px); background: var(--creme); color: var(--noir); overflow: hidden; } .ouverture__texte { display: flex; align-items: center; padding: clamp(36px, 5vw, 76px) clamp(24px, 5.2vw, 92px); } .ouverture__bloc { max-width: 34rem; } /* LE TITRE. Les versions precedentes le composaient en capitales maigres, tres espacees, a 3,1 rem maximum : le registre des enseignes, mais applique si discretement qu'il ne restait qu'une ligne pale au milieu du vide. C'est ce qu'on appelait « mou ». On passe en bas-de-casse, plus grand, plus serre, graisse normale. Meme police, meme sobriete — mais une presence. */ .ouverture__titre { font-family: var(--serif); /* Capitales, comme tous les titres du site. J'avais d'abord bascule ce titre en bas-de-casse, en croyant que les quatre lignes venaient de la casse. Elles venaient de la largeur du bloc, qui etait trop etroit. Les deux versions comparees cote a cote : en bas-de-casse le titre flotte et laisse un vide a droite — c'est exactement le « trop mou » qu'on me reproche depuis le debut. En capitales, il remplit sa mesure. On garde les capitales, on elargit le bloc. */ font-size: clamp(2.05rem, 4vw, 3.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -.022em; color: var(--noir); margin: 0 0 clamp(15px, 1.8vw, 21px); text-wrap: balance; } /* La ligne qui dit ce qu'on vend. Elle manquait : « changez de tete » annonce un benefice, pas un produit. */ .ouverture__sous { font-size: clamp(.6875rem, .8vw, .75rem); font-weight: 400; letter-spacing: .17em; text-transform: uppercase; color: var(--gris); margin: 0 0 clamp(28px, 3.2vw, 40px); } /* LE BOUTON. Un aplat noir, plein, avec de la matiere autour du texte. La version precedente n'avait qu'un lien souligne — le plus discret possible, au motif qu'un aplat « ferait promotion ». C'etait une erreur de lecture : sur creme, un aplat noir ne crie pas, il assure. */ .ouverture__bouton { display: inline-block; background: var(--noir); color: var(--creme); /* 18px + 12px de hauteur de ligne = 48px : le minimum recommande pour une cible tactile. A 46px, le bouton etait juste en dessous. */ padding: 18px clamp(28px, 3.4vw, 42px); font-size: .71875rem; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; line-height: 1; transition: background-color .35s ease, transform .35s ease; } .ouverture__bouton:hover, .ouverture__bouton:focus-visible { background: var(--noir-3); color: var(--creme); transform: translateY(-2px); } .ouverture__bouton:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; } /* Les trois conditions. Une ligne fine sous un filet, dans la colonne de texte — et non plus une barre en travers de toute la page, qui ajoutait un troisieme bandeau horizontal apres le ruban et l'en-tete. */ .ouverture__points { list-style: none; display: flex; flex-wrap: wrap; gap: 7px clamp(16px, 2.2vw, 28px); margin: clamp(32px, 4vw, 50px) 0 0; padding: clamp(20px, 2.4vw, 27px) 0 0; border-top: 1px solid var(--bordure); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); } .ouverture__points li { margin: 0; } /* LE FILM. Entier, net, rien par-dessus. */ .ouverture__film { position: relative; background: var(--creme-2); min-height: 100%; } .ouverture__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s ease; } .ouverture__film video.est-prete { opacity: 1; } /* Sans JavaScript, une opacite a zero effacerait le film pour de bon. */ html:not(.js) .ouverture__film video { opacity: 1; } /* TELEPHONE. Les deux colonnes deviennent deux etages : le film en haut, l'ecriture dessous. Aucun recadrage a calculer — la chevelure est au centre du cadre et le reste centre. */ @media (max-width: 900px) { .ouverture { grid-template-columns: 1fr; min-height: 0; } .ouverture__film { order: -1; height: 44vh; min-height: 250px; max-height: 400px; } .ouverture__texte { padding: clamp(30px, 7vw, 46px) var(--gouttiere) clamp(34px, 8vw, 50px); } .ouverture__bloc { max-width: none; } .ouverture__titre { font-size: clamp(1.85rem, 7.6vw, 2.6rem); } .ouverture__bouton { display: block; text-align: center; } } @media (prefers-reduced-motion: reduce) { .ouverture__film video { transition: none; } .ouverture__bouton { transition: none; } .ouverture__bouton:hover { transform: none; } } /* =================================================================== 23. LES TITRES LONGS REDEVIENNENT DES PHRASES =================================================================== Reproche de la cliente : « ca fait trop IA ». Elle a raison, et l'une des causes est ici. La refonte a mis TOUS les titres en capitales, sans exception. Sur une etiquette de deux mots, c'est une signature de maison. Sur une phrase entiere — « NOS COLLECTIONS DE PERRUQUES ET D'EXTENSIONS », « TRENTE SECONDES, DEVANT VOTRE MIROIR » — ca devient une banniere, et surtout c'est la meme mise en forme partout, sans respiration. Cette regularite absolue est exactement ce qui fait « genere ». On distingue donc les deux usages. Les etiquettes courtes gardent leurs capitales : boutons, noms de collections, compteurs, menu. Les titres de section, qui sont des phrases, redeviennent des phrases. Le titre d'ouverture reste en capitales : il fait deux lignes courtes et c'est la seule ligne monumentale de la page. =================================================================== */ .entete-section h2, .editorial h2, .video-section h2 { text-transform: none; letter-spacing: -.02em; } /* =================================================================== 24. LA BANDE « ACCOMPAGNEMENT » RECOIT LA PLACE QU'ELLE MERITE =================================================================== Releve des hauteurs du bas de page, avant correction : film de l'atelier 558 px noir accompagnement 223 px creme infolettre 497 px noir pied de page 559 px noir Une bande claire de 223 px coincee entre trois blocs sombres. C'est la plus petite section de la page — et c'est celle qui porte la seule chose que la boutique dit et que ses concurrents ne disent pas : « 25 % pour les personnes en traitement, sans aucun justificatif ». Ce n'est pas une mention legale, c'est une prise de position. Elle etait mise en page comme un bandeau de cookies. On lui donne le volume d'une vraie section et un titre qui se voit. Comme elle est claire entre trois sections sombres, elle attire maintenant l'oeil exactement la ou il faut. =================================================================== */ .accompagnement .accompagnement__inner { padding-block: clamp(52px, 6.4vw, 86px); align-items: flex-start; } .accompagnement .accompagnement__titre { font-size: clamp(1.45rem, 2.7vw, 2.15rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: .62em; } .accompagnement .accompagnement__texte { max-width: 54ch; } .accompagnement .accompagnement__texte p { font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.75; } /* =================================================================== 25. LA GRILLE PRODUITS SUR FOND NOIR =================================================================== La grille produit est dessinee comme un quadrillage au filet : des cellules creme separees par des traits noirs de 1 px (« ul.products { gap: 1px; background: var(--noir) } », section 6). Sur la boutique, fond creme, c'est juste — on lit un tableau. Sur la section noire de l'accueil, le filet noir se pose sur un fond noir : il disparait. Les quatre cartes creme se touchent donc bord a bord et forment un seul aplat pale au milieu du noir. Le dessin voulu n'existe plus, il n'en reste que l'effet secondaire. La ou le filet ne peut pas se voir, on le remplace par ce qu'il representait : du vide. Les cartes redeviennent quatre objets poses sur le noir, et le fond de section fait le travail du trait. =================================================================== */ .section--noir ul.products { gap: clamp(14px, 1.8vw, 26px) !important; background: transparent; border: 0; } /* =================================================================== 26. LE RETOUR D'UNE SECONDE POLICE, POUR LES GRANDS TITRES =================================================================== « Ca fait trop IA », puis « le design peut nettement etre ameliore ». Les deux remarques pointent la meme chose, et j'ai mis du temps a la voir : le site est correct et anonyme. Regardons ce qu'il est vraiment. Une seule police sans empattement (Jost), une palette creme et encre, des capitales tres espacees, beaucoup de blanc, des sections pleine largeur qui alternent clair et sombre. C'est du travail propre — et c'est aussi, trait pour trait, ce que produit n'importe quel outil a qui l'on demande « un site de mode elegant ». Le defaut n'est pas la faute de gout, c'est l'absence de choix reconnaissable. La refonte avait supprime Playfair Display pour une raison juste : le couple « Playfair en italique + dore » est LE cliche de la boutique de perruques. Mais j'ai jete la police avec le cliche. En romain, a l'encre, sans une once de dore, ce n'est plus du tout le meme objet — c'est la lettre des magazines de mode. Elle ne revient que sur les grands titres. Tout le reste — menus, etiquettes, boutons, prix, texte courant — garde Jost. C'est le contraste entre les deux qui manquait : une page composee dans une seule graisse d'une seule police n'a pas de hierarchie, elle a un reglage. Cout : zero. Les deux fichiers Playfair (38 + 21 ko) etaient deja telecharges par le theme depuis la refonte, et ne servaient plus a rien. Pour revenir en arriere : commenter ce bloc. =================================================================== */ :root { --titre: 'Playfair Display', 'Times New Roman', Georgia, serif; } .ouverture__titre, .entete-section h2, .editorial h2, .video-section h2, .accompagnement__titre { font-family: var(--titre); text-transform: none; font-weight: 500; letter-spacing: -.005em; } /* Playfair a des lettres plus grandes et plus contrastees que Jost a corps egal : on descend legerement, sinon le titre prend toute la place. Et on relache l'interlignage, qu'un serif supporte mal serre. */ .ouverture__titre { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.08; } .entete-section h2, .editorial h2, .video-section h2 { line-height: 1.12; } /* =================================================================== 27. ECHELLE DES TITRES SUR GRAND ECRAN =================================================================== Capture d'ecran de la cliente, largeur ~2 000 px. Releve : titre de la page (h1) 56 px titre de section (h2) 67 px Le titre de section est plus gros que le titre de la page. La hierarchie est inversee, et sur un grand ecran ca creve les yeux. D'ou ca vient : les deux tailles sont exprimees en « vw », donc elles grandissent avec l'ecran — mais avec des plafonds differents. Le h1 du hero plafonne a 3,5 rem (56 px), le h2 a 4,2 rem (67 px). En dessous de 1 440 px les deux courbes ne s'etaient pas encore croisees, et je n'avais teste qu'a 1 440. La faute etait invisible sur mon ecran de test et evidente sur le sien. Lecon : un plafond en rem et une pente en vw, ca se verifie aux DEUX bouts de l'echelle, pas seulement a la largeur qu'on a sous la main. On remonte le h1 et on descend le h2 : a 2 000 px h1 73,6 px h2 46,4 px rapport 1,59 a 1 440 px h1 60,5 px h2 46,0 px rapport 1,32 a 1 024 px h1 43,0 px h2 32,8 px rapport 1,31 =================================================================== */ .entete-section h2, .editorial h2, .video-section h2 { font-size: clamp(1.75rem, 3.2vw, 2.9rem); } /* =================================================================== 28. LE TEXTE DU HERO NE FLOTTE PLUS DANS LE VIDE =================================================================== Toujours a 2 000 px : la colonne de gauche mesure 933 px, le bloc de texte 544. Il restait donc 205 px de creme morte a droite du texte, EN PLUS des 184 px de marge. Le texte ne tenait pas sa colonne, il flottait dedans — d'ou l'impression de page vide. Le bloc passe a 44 rem et le titre gagne en corps. La marge laterale se resserre un peu pour laisser la place. Le titre tient toujours en deux lignes de 1 024 a 2 000 px. =================================================================== */ .ouverture__texte { padding: clamp(36px, 4.6vw, 96px) clamp(24px, 4.6vw, 96px); } .ouverture__bloc { max-width: 44rem; } .ouverture__titre { font-size: clamp(2.1rem, 4.2vw, 4.6rem); } @media (max-width: 900px) { .ouverture__titre { font-size: clamp(1.85rem, 7.6vw, 2.6rem); } .ouverture__bloc { max-width: none; } } /* =================================================================== 29. RECADRAGE DU FILM D'OUVERTURE =================================================================== « C'est tellement laid. » La capture jointe montrait un panneau de droite a moitie vide : un grand mur gris, et la chevelure repoussee dans le coin. J'ai releve l'image source plan par plan, avec une regle en pourcents par-dessus. Resultat : 0 - 45 % mur gris, rien d'autre 45 - 90 % la tete, la chevelure, l'epaule 90 - 100 % le bras Pres de la moitie du rush est vide. Ce n'etait donc pas un defaut de mise en page : le cadre lui-meme est mal rempli, et « object-fit: cover » se contentait de recopier ce vide dans le panneau. « object-position » seul ne suffit pas : en 16/9 dans un panneau de proportion 1,44, le debordement horizontal n'est que de 246 px, soit 19 % de l'image. Meme pousse a fond, on garderait un tiers de mur. On agrandit donc le film et on ancre l'agrandissement sur le sujet. A 2 000 px, la fenetre passe d'environ 6-88 % de la source a environ 34-96 % : le mur tombe de 48 % a 18 % du panneau. Le prix a payer est un agrandissement de 1,3x d'une source 1280 : l'image perd un peu de finesse. Sur un fond flou et un plan de cheveux, ca ne se voit pas — sur un texte ou un visage net, ca se verrait. =================================================================== */ .ouverture__film { overflow: hidden; } .ouverture__film video { object-position: 100% 50%; transform: scale(1.28); transform-origin: 78% 45%; } /* Sur telephone le panneau est large et court : « cover » recadre deja fortement dans la hauteur, et un agrandissement en plus ferait perdre la tete hors du cadre. On se contente d'y viser le sujet. */ @media (max-width: 900px) { .ouverture__film video { transform: none; object-position: 68% 38%; } } /* Meme verification a l'autre bout de l'echelle. A 375 px, le h1 tombait a 30 px et le h2 a 28 : deux pixels d'ecart, autant dire aucune hierarchie. Le plancher du h2 etait trop haut. */ .entete-section h2, .editorial h2, .video-section h2 { font-size: clamp(1.45rem, 3.2vw, 2.9rem); } @media (max-width: 900px) { .ouverture__titre { font-size: clamp(2.05rem, 7.6vw, 2.6rem); } } /* =================================================================== 30. DE LA COULEUR, DES ANGLES ADOUCIS =================================================================== « Pas assez fun, pas assez classe, pas assez original, pas assez joli, ca donne pas envie. » Le constat, en le prenant au serieux : la boutique vend 105 perruques de couleur — rose, bleu, violet, vert — et sa page d'accueil est en noir et creme. Le dessin du site contredit le produit. On avait un site austere pour un catalogue joyeux. Et tout y est a angle vif : cartes rectangulaires, filets de 1 px, boutons carres. C'est severe. « Joli » et « severe » ne vont pas ensemble. TROIS CHANGEMENTS, ET D'OU VIENT LA COULEUR ------------------------------------------- Je n'ai pas invente de teinte. J'ai preleve celles de la marque : le logo est en bronze chaud (#907050) et le filigrane des photos en rose. J'ai garde le rose — il va aux cheveux, il est feminin sans etre sucre, et c'est deja une couleur de la maison. 1. Un rose profond (#B54A52) devient l'accent reel du site : fleches, liens, survols, details. Contraste mesure sur creme : 4,7:1, au-dessus du minimum legal de 4,5. 2. La section « Quatre modeles pour commencer » passe du noir a un rose pale (#F3E7E3). La page alternait creme / noir / creme / noir : quatre bandes, deux valeurs, aucune couleur. Elle a maintenant une respiration au milieu. Contraste du texte sur ce fond : 15,6:1. 3. Les angles sont adoucis. Cartes, images, boutons : 10 px. Le quadrillage au filet de 1 px disparait au profit de vraies gouttieres. Une carte aux angles arrondis posee dans du vide se lit comme un objet ; une cellule a angle vif collee aux autres se lit comme un tableau. Pour revenir en arriere : commenter ce bloc. =================================================================== */ :root { --rose: #B54A52; --rose-fonce: #98383F; --rose-fond: #F3E7E3; --rayon: 10px; } /* --- 1. L'accent, enfin utilise --------------------------------- */ .fleche { color: var(--rose); } .lien-souligne:hover, .collections__guide a:hover { color: var(--rose); } .collection:hover .collection__compte { color: var(--rose); } .ouverture__bouton:hover, .ouverture__bouton:focus-visible { background: var(--rose-fonce); } .produit-carte__titre a:hover, ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--rose); } /* --- 2. La section de selection passe en rose ------------------- */ .section--noir.section-selection, body .section--noir:has(ul.products) { background: var(--rose-fond); color: var(--noir); } body .section--noir:has(ul.products) h2, body .section--noir:has(ul.products) .chapo { color: var(--noir); } body .section--noir:has(ul.products) .trait--centre { background: rgba(17,17,16,.22); } body .section--noir:has(ul.products) .btn { background: var(--noir); color: var(--creme); border-color: var(--noir); } body .section--noir:has(ul.products) .btn:hover { background: var(--rose-fonce); border-color: var(--rose-fonce); } /* --- 3. Angles adoucis, et fin du quadrillage au filet ---------- */ ul.products { gap: clamp(14px, 1.8vw, 26px) !important; background: transparent !important; border: 0 !important; } ul.products li.product, .produit-media, .collection, .collection__media, .comparo__col, .video-section__media, .editorial__media, .editorial__media img { /* « !important » parce que la section 3 pose « * { border-radius: 0 !important } » pour supprimer tous les arrondis. Une declaration importante ne cede qu a une autre declaration importante : sans ce mot-cle, la regle ci-dessous ne servait a rien (mesure : 0 px). */ border-radius: var(--rayon) !important; overflow: hidden; } .ouverture__bouton, .btn, .btn--vide, .btn--or { border-radius: 999px !important; } .ouverture__film { border-radius: 0 !important; } /* Suite de la section 30 — consequence du passage au rose. « .section--noir ul.products li.product { background: var(--noir) } » avait ete ecrit pour que les cartes se fondent dans une section noire, avec un texte creme. La section etant devenue rose, ces cartes sont restees des blocs noirs poses sur du rose : lourd, et le contraire de ce qu'on cherche. Elles passent en blanc, texte a l'encre. Des cartes blanches aux angles arrondis sur un fond colore, c'est la mise en page la plus simple qui donne envie de regarder. */ body .section--noir:has(ul.products) ul.products li.product { background: var(--blanc); } body .section--noir:has(ul.products) ul.products li.product .produit-infos, body .section--noir:has(ul.products) ul.products li.product .woocommerce-loop-product__title, body .section--noir:has(ul.products) ul.products li.product h2, body .section--noir:has(ul.products) ul.products li.product h3, body .section--noir:has(ul.products) ul.products li.product a { color: var(--noir); } body .section--noir:has(ul.products) ul.products li.product .price, body .section--noir:has(ul.products) ul.products li.product .amount, body .section--noir:has(ul.products) ul.products li.product .produit-prix { color: var(--noir); } body .section--noir:has(ul.products) ul.products li.product .produit-media { background: var(--creme-2); } /* Le prix etait reste en creme, herite de l'epoque ou la section etait noire : blanc sur blanc, donc invisible. Defaut grave — c'est le prix. On force la couleur sur l'element ET sur ses descendants (WooCommerce emboite « .price > .amount > bdi > .currencySymbol », et chacun porte sa propre couleur heritee). */ body .section--noir:has(ul.products) ul.products li.product .price, body .section--noir:has(ul.products) ul.products li.product .price * { color: var(--noir) !important; } /* =================================================================== 31. LE MUR DE COULEURS =================================================================== Voir l'en-tete de parts/couleurs.php pour l'idee. Cote dessin, trois partis pris : 1. PLEINE LARGEUR, SANS GOUTTIERE. Tout le site vit dans une colonne de 1 320 px ; cette bande la traverse d'un bord a l'autre de l'ecran et ses douze aplats se touchent. C'est ce qui en fait un evenement dans la page plutot qu'une section de plus. Une bande de couleur bord a bord, on ne l'a pas vue ailleurs. 2. AUCUN CADRE, AUCUN ARRONDI, AUCUNE OMBRE. La couleur se suffit. Ajouter une bordure a un aplat de couleur, c'est s'excuser de l'avoir mis. 3. LE NOM EST GRAND. Ce n'est pas une legende sous une pastille, c'est le sujet. Le nombre de modeles vient en gros chiffre a l'oppose : l'information la plus utile du bloc. Au survol, l'aplat ne change pas de couleur — il se souleve et son nom grandit. On ne salit pas une couleur pour dire qu'elle est survolee. =================================================================== */ .mur { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--noir); color: var(--creme); padding-top: clamp(56px, 6vw, 92px); overflow: hidden; } .mur__entete { max-width: var(--max, 1320px); margin: 0 auto clamp(30px, 3.6vw, 48px); padding-inline: var(--gouttiere, 24px); } .mur__titre { font-family: var(--titre, Georgia, serif); font-size: clamp(1.9rem, 4.4vw, 4.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.02em; text-transform: none; color: var(--creme); margin: 0 0 .35em; } .mur__sous { font-size: clamp(.8125rem, 1vw, .9375rem); letter-spacing: .04em; color: rgba(245,243,239,.66); margin: 0; } .mur__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } .mur__case { margin: 0; } .mur__lien { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: clamp(150px, 15vw, 250px); padding: clamp(16px, 1.5vw, 24px); color: var(--mur-texte, #fff); text-decoration: none; transition: transform .5s cubic-bezier(.22,.61,.36,1), z-index 0s; will-change: transform; } .mur__lien:hover, .mur__lien:focus-visible { transform: scale(1.06); z-index: 2; box-shadow: 0 18px 44px rgba(0,0,0,.28); } .mur__lien:focus-visible { outline: 3px solid var(--creme); outline-offset: -6px; } .mur__nom { font-family: var(--titre, Georgia, serif); font-size: clamp(1rem, 1.5vw, 1.55rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; transition: transform .5s cubic-bezier(.22,.61,.36,1); transform-origin: left bottom; } .mur__lien:hover .mur__nom { transform: scale(1.08); } .mur__compte { font-size: clamp(1.4rem, 2.4vw, 2.4rem); font-weight: 300; line-height: 1; opacity: .5; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .mur__grille { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px) { .mur__grille { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 420px) { .mur__grille { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .mur__lien, .mur__nom { transition: none; } .mur__lien:hover { transform: none; box-shadow: none; } .mur__lien:hover .mur__nom { transform: none; } } /* Suite de la section 31 — le contraste sur les douze aplats. Mesure apres coup : onze teintes passaient, « cuivre & orange » tombait a 4,1:1 (seuil 4,5). Et les deux degrades — rose & violet, multicolore — ne se mesurent pas automatiquement : leur couleur change sous le texte. Plutot que de bricoler douze cas, on pose un fondu sombre (ou clair) sur le tiers bas de chaque aplat, la ou vit le texte. La couleur reste intacte sur les deux tiers hauts, qui sont ce qu'on regarde. */ .mur__lien::before { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, var(--mur-voile, rgba(0,0,0,.34)) 0%, transparent 100%); pointer-events: none; } .mur__nom, .mur__compte { position: relative; z-index: 1; } /* =================================================================== 32. LA BARRE DE NAVIGATION RETROUVE SON ECHELLE =================================================================== Deux valeurs y etaient figees, et pour la meme raison. Entre 1 025 et 1 400 px, la navigation chevauchait le logo de 49 px ; j'avais corrige en reduisant la police a 12 px et en tassant la barre a 68 px. Les deux correctifs ont ete ecrits SANS media query — ils se sont donc appliques a toutes les largeurs, y compris a 2 000 px ou il n'y a aucun manque de place. Ce que main.css prevoyait, et que refonte.css annulait : <= 1024 px 70 px >= 1181 px 82 px >= 1401 px 88 px refonte 68 px PARTOUT Mesure du gachis a 2 000 px : la colonne centrale offre 988 px, le menu n'en occupait que 659. Un tiers de la barre vide, et des liens de 12 px sur un ecran de deux metres. On rend leur progression aux deux, en gardant intacte la compression la ou elle servait vraiment. La police ne bouge pas avant 1 540 px : en dessous, c'est exactement le reglage qui avait corrige le chevauchement. =================================================================== */ .entete__barre { min-height: 68px; } @media (min-width: 1025px) { .entete__barre { min-height: 74px; } } @media (min-width: 1401px) { .entete__barre { min-height: 86px; } } @media (min-width: 1700px) { .entete__barre { min-height: 94px; } } .nav-principale ul a { /* .9vw plutot que .78vw : le seuil de croissance passe de 1 538 px a 1 333 px, pour que les portables de 1 440 en profitent aussi. Verifie : a 1 440 l'ecart logo-menu reste de 52 px. */ font-size: clamp(.75rem, .9vw, .9rem) !important; letter-spacing: .13em; } /* Les libelles « Compte » et « Panier » suivent, un cran en dessous : la navigation doit rester l'element dominant de la barre. */ .entete__outils .icone-btn__label { font-size: clamp(.6875rem, .66vw, .8125rem); } /* Le trait de survol existait deja et s'anime depuis la droite. Il etait en champagne — une couleur que la refonte a neutralisee en encre. On lui donne l'accent rose : c'est le seul endroit de la barre ou une couleur a un sens, puisqu'elle signale une action. */ .nav-principale a::after { background: var(--rose); height: 1.5px; } .nav-principale a:hover { color: var(--rose); } /* La page courante reste soulignee a l'encre : c'est un etat, pas une action, et il ne doit pas se confondre avec le survol. */ .nav-principale .current-menu-item > a::after, .nav-principale .current_page_item > a::after { background: var(--noir); transform: scaleX(1); } /* =================================================================== 33. LA BANDE DE COULEURS DU MEGA-MENU =================================================================== Le panneau « Boutique » listait trois colonnes de categories en texte gris. Correct, et parfaitement oubliable — c'est ce qu'on trouve dans n'importe quel menu de boutique en ligne. On lui ajoute la rangee des douze teintes, avec les memes aplats et les memes liens filtres que le mur de la page d'accueil. Ouvrir « Boutique » fait desormais apparaitre de la couleur, pas une liste. =================================================================== */ .mega__couleurs { border-top: 1px solid var(--bordure-2); background: var(--creme-2); padding-block: clamp(18px, 1.8vw, 26px); } .mega__couleurs-inner { display: block; } .mega__couleurs .mega__titre { display: block; margin-bottom: 14px; } .mega__couleurs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px clamp(10px, 1.2vw, 20px); } .mega__couleurs li { margin: 0; } .mega__couleurs a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 999px !important; color: var(--noir); font-size: .8125rem; letter-spacing: .01em; text-transform: none; transition: background-color .25s ease; } .mega__couleurs a:hover, .mega__couleurs a:focus-visible { background: rgba(17,17,16,.06); } /* La pastille est ronde et cerclee d'un filet tres pale : sans lui, le « gris & platine » et le « blond » disparaissent sur la creme. */ .mega__pastille { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(17,17,16,.16); } .mega__couleur-nom { flex: 1 1 auto; white-space: nowrap; } .mega__couleurs .mega__compte { opacity: .5; font-size: .75rem; } @media (max-width: 1200px) { .mega__couleurs ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .mega__couleurs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Suite de la section 33 — contrastes de la bande. Elle est creme alors que le reste du panneau est sombre : le titre et le compteur y arrivaient avec les couleurs prevues pour le fond sombre. Mesure : titre 2,4:1, compteur 1,2:1 — ce dernier etait litteralement creme sur creme, donc invisible. On leur donne des couleurs faites pour ce fond-la : rose fonce 5,7:1 pour le titre, gris 5,5:1 pour le compteur. */ .mega__couleurs .mega__titre { color: var(--rose-fonce); } .mega__couleurs .mega__compte { color: var(--gris); opacity: 1; } /* =================================================================== 34. L'EN-TETE EN DEUX ETAGES =================================================================== Voir l'en-tete de header.php pour le raisonnement. En resume : la barre sur une seule ligne faisait se disputer trois blocs pour la meme hauteur. J'ai essaye de l'agrandir, ca n'a rien change — le defaut n'etait pas la taille mais la structure. Cette section remplace entierement l'ancienne mise en page de la barre (« .entete__barre », qui n'existe plus dans le balisage). =================================================================== */ /* --- Etage 1 : outils | LOGO | compte ---------------------------- */ .entete__haut { display: grid; /* « minmax(0, 1fr) » et non « 1fr » : une colonne « 1fr » ne descend jamais sous la largeur de son contenu. Les outils de droite (compte + panier, avec leurs libelles) etant plus larges que ceux de gauche, la colonne droite gonflait et poussait le logo a gauche — mesure a 1 025 px : 21 px d'un cote, 231 de l'autre. Avec minmax(0), les deux cotes peuvent se comprimer a egalite et le centre reste le centre. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 2vw, 32px); min-height: clamp(78px, 6.6vw, 112px); } .entete__cote { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px); } .entete__cote--droite { justify-content: flex-end; } /* LE LOGO PREND SA PLACE. Il etait cale a gauche sur 256 px de large ; au centre et en grand, c'est lui qui tient la page. */ .entete .site-logo { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: clamp(9px, .9vw, 15px); } .entete .site-logo__text { font-family: var(--titre, Georgia, serif); font-size: clamp(1.25rem, 2.1vw, 2.35rem) !important; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .entete .site-logo__marque { height: clamp(32px, 3.2vw, 52px) !important; } /* --- Etage 2 : la navigation, seule ------------------------------ */ .entete__bas { border-top: 1px solid var(--bordure-2); background: var(--creme); } .entete__bas .nav-principale { max-width: var(--max, 1320px); margin: 0 auto; padding-inline: var(--gouttiere, 24px); } .entete__bas .nav-principale > ul { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 48px); margin: 0; padding: 0; list-style: none; } .entete__bas .nav-principale li { margin: 0; } /* La navigation n'a plus a se serrer : elle dispose de toute la largeur. On peut donc lui rendre une taille normale et une chasse large, ce que l'ancienne barre interdisait. */ .entete__bas .nav-principale ul a { display: block; padding: clamp(13px, 1.2vw, 19px) 0; font-size: clamp(.8125rem, .82vw, .9375rem) !important; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } /* --- Telephone --------------------------------------------------- */ @media (max-width: 1024px) { .entete__bas { display: none; } /* le tiroir prend le relais */ .entete__haut { min-height: 68px; } .entete__cote .icone-btn__label { display: none; } } @media (min-width: 1025px) { .entete .burger { display: none; } } @media (max-width: 560px) { .entete .site-logo__marque { display: none !important; } .entete .site-logo__text { font-size: 1.05rem !important; letter-spacing: .13em; } } /* Le mega-menu s'ouvrait sous une barre d'un etage ; il doit maintenant se poser sous les deux. Il est en position absolue par rapport a l'en-tete, donc rien a changer — mais on s'assure qu'il passe bien au-dessus du second etage. */ .mega { z-index: 60; } /* Suite de la section 34 — deux defauts releves a la mesure. 1. DEBORDEMENT HORIZONTAL A 1 025 PX. Coupable : « .mega__vedette- compte », dans le panneau de la boutique. Le panneau est ferme par « visibility », pas par « display » — il reste donc dans le flux et sa largeur compte dans celle de la page. A 1 025 px sa grille depassait de 31 px. On la fait tenir, et on clot le panneau par securite. 2. A 375 PX, LE LOGO CHEVAUCHAIT LES ICONES. J'avais mis « white-space: nowrap » pour qu'il tienne sur une ligne ; sur un telephone, « MAISON TRESSANE » ne tient pas entre quatre boutons. Il repasse sur deux lignes, comme avant. */ .mega { overflow-x: clip; } @media (max-width: 1200px) { .mega__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mega__col--mise-en-avant { grid-column: 1 / -1; } } @media (max-width: 700px) { .entete .site-logo__text { white-space: normal; text-align: center; line-height: 1.12; font-size: clamp(.9rem, 3.6vw, 1.15rem) !important; letter-spacing: .11em; } .entete__haut { gap: 8px; } .entete__cote { gap: 2px; } } /* =================================================================== 35. LA PASTILLE DU PANIER =================================================================== Deux defauts, signales par une capture d'ecran. 1. ELLE S'AFFICHAIT SUR UN PANIER VIDE. Le PHP pose bien l'attribut « hidden » quand le compte vaut zero — verifie, il est present dans le balisage. Mais une regle « .pastille { display: grid } » l'emportait sur la regle par defaut « [hidden] { display: none } ». Un attribut ne se defend pas tout seul contre une declaration de « display » : il faut le lui dire. 2. ELLE RECOUVRAIT LE MOT « PANIER ». Elle etait posee en absolu par rapport au lien. Tant que le lien ne contenait qu'une icone, « en haut a droite du lien » voulait dire « en haut a droite de l'icone ». Depuis que le lien porte aussi son libelle, ce coin est tombe sur le texte. Elle est desormais enfermee avec l'icone dans un conteneur positionne (voir header.php). =================================================================== */ .pastille[hidden] { display: none !important; } .icone-btn__icone { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .icone-btn .pastille { position: absolute; top: -7px; right: -9px; left: auto; bottom: auto; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px !important; background: var(--rose); color: #fff; font-size: .625rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; } /* Mesure apres correction : la pastille depassait de 9 px a droite de l'icone, alors que l'ecart entre l'icone et son libelle n'etait que de 8 px. Il restait donc 1 px de chevauchement. On resserre le debordement et on ecarte le libelle : 6 px de debordement pour 14 px d'ecart, soit 8 px de degagement. */ .entete .icone-btn { gap: 14px; } .icone-btn .pastille { top: -6px; right: -6px; } /* =================================================================== 36. UN FOND QUI A UNE COULEUR, UN TITRE QUI A UNE TAILLE =================================================================== « Le site fait fade. » LE FOND. La creme valait #F5F3EF : une valeur a 96 % de blanc, et legerement FROIDE (le bleu y est plus haut que le rouge en teinte percue). Autrement dit, un blanc casse presque pur, tirant sur le gris. C'est la couleur la plus prudente qui existe — celle qu'on choisit quand on ne veut rien choisir. D'ou l'impression de fadeur : ce n'est pas une couleur, c'est une absence. On passe a #F2ECE3 : meme famille, mais 4 % plus sombre et surtout franchement chaude. Sur un ecran, la difference se lit tout de suite — le blanc devient du sable. C'est ce ton-la que prennent les maisons qui veulent paraitre cheres : il donne du corps au blanc sans ajouter de couleur criarde. Le blanc pur (#FFF) est conserve pour les cartes produit : c'est le contraste entre le sable et le blanc qui fait ressortir les fiches. Avec l'ancienne creme, trop proche du blanc, les cartes se noyaient. LE TITRE. Il plafonnait a 4,6 rem. Sur un ecran de 2 000 px, dans une colonne de 933, ca reste sage. On monte a 5,4 rem et on resserre l'interlignage et la chasse : un grand titre en serif doit etre serre, sinon il s'effiloche. =================================================================== */ :root { --creme: #F2ECE3; --creme-2: #E7DED1; --bordure: rgba(17, 17, 16, .20); --bordure-2: rgba(17, 17, 16, .13); } .ouverture__titre { font-size: clamp(2.15rem, 4.6vw, 5.4rem); line-height: 1.01; letter-spacing: -.028em; } @media (max-width: 900px) { .ouverture__titre { font-size: clamp(2.05rem, 8vw, 2.9rem); line-height: 1.06; } } /* Le film n'a plus besoin d'etre agrandi : le nouveau plan remplit son cadre. On retire donc le zoom de 1,28x — c'est lui qui rendait l'image molle, puisqu'il etirait du 720p. */ .ouverture__film video { transform: none; object-position: 50% 42%; } @media (max-width: 900px) { .ouverture__film video { object-position: 50% 38%; } } /* =================================================================== 37. LES AUTRES PAGES PARLENT ENFIN LA MEME LANGUE =================================================================== Releve avant correction, identique sur la boutique, les quatorze collections, les onze pages et les neuf articles : fond du bandeau NOIR titre 128 px, CAPITALES, Jost, centre hauteur du bloc jusqu'a 480 px Autrement dit : toute page autre que l'accueil s'ouvrait sur un pave noir surmonte d'un titre geant en capitales. Rien de commun avec l'accueil, qui est en sable avec des titres en Playfair. Deux sites colles l'un a l'autre. Le 128 px vient de « h1 { clamp(2.6rem, 8.5vw, 8rem) } » : 8 rem sur grand ecran. J'avais plafonne le titre du hero, jamais celui-ci. TROIS DECISIONS --------------- 1. Le bandeau passe en sable, comme le reste. Le noir garde une utilite — il reste sur la video d'ambiance des collections et sur les sections sombres — mais il ne sert plus de rampe de lancement a chaque page. 2. Le titre passe en Playfair, bas de casse, plafonne a 3,6 rem. Un titre de page n'a pas a etre plus gros que le titre de l'accueil. 3. Il est ALIGNE A GAUCHE. Le centre force le regard a chercher le debut de chaque ligne ; a gauche, il tombe dessus. C'est aussi l'alignement de toutes les sections de l'accueil — la page se lit d'un seul mouvement au lieu de changer d'axe. =================================================================== */ h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); } .entete-page { background: var(--creme); color: var(--noir); text-align: left; padding-block: clamp(38px, 4.6vw, 74px); border-bottom: 1px solid var(--bordure-2); } .entete-page h1 { font-family: var(--titre, Georgia, serif); font-weight: 500; text-transform: none; letter-spacing: -.02em; line-height: 1.05; color: var(--noir); margin: 0; max-width: 22ch; } .entete-page .fil { color: var(--gris); margin-bottom: 1.1em; } .entete-page .fil a { color: var(--gris); } .entete-page .fil a:hover { color: var(--rose); } .entete-page .chapo { color: var(--gris); margin: 1.1rem 0 0; max-width: 58ch; } /* =================================================================== 38. LE BANDEAU VIDEO DES COLLECTIONS DEVIENT L'EN-TETE =================================================================== Il affichait le nom de la collection et sa description ; deux cents pixels plus bas, le bloc noir repetait mot pour mot les deux. Le visiteur lisait deux fois la meme chose. Le bandeau porte maintenant le fil d'Ariane, le titre en

et le chapo — et le bloc noir ne s'affiche plus sur ces pages. Une collection s'ouvre donc sur son film, plein cadre, avec son nom dessus. C'est la page la plus spectaculaire du site, et c'est aussi celle ou l'on arrive depuis Google. =================================================================== */ .cat-video__texte { position: relative; z-index: 2; text-align: left; color: var(--blanc); } .cat-video__titre { font-family: var(--titre, Georgia, serif); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 500; text-transform: none; letter-spacing: -.02em; line-height: 1.04; color: var(--blanc); margin: 0; } .cat-video__chapo { color: rgba(255,255,255,.88); max-width: 54ch; margin: 1rem 0 0; font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.7; } .cat-video__texte .fil { color: rgba(255,255,255,.72); margin-bottom: 1em; } .cat-video__texte .fil a { color: rgba(255,255,255,.72); } .cat-video__texte .fil a:hover { color: #fff; } /* Le voile doit etre assez dense pour qu'un titre blanc tienne sur n'importe quelle image de collection, claire ou sombre. */ .cat-video__voile { background: linear-gradient(to top, rgba(13,13,15,.86) 0%, rgba(13,13,15,.62) 42%, rgba(13,13,15,.30) 100%); } /* Suite de la section 38 — deux defauts releves a la mesure. 1. LE FIL D'ARIANE ETAIT ILLISIBLE : 2,2:1. L'element porte deux classes, « fil » et « woocommerce-breadcrumb ». Une regle visant la seconde le remettait en gris fonce, par-dessus la mienne. Sur une video sombre, du gris fonce ne se voit pas. 2. LE BLOC DE TEXTE OCCUPAIT LE HAUT DU BANDEAU (de 0 a 66 % de sa hauteur), c'est-a-dire precisement la zone ou le voile est le plus clair (30 %). On l'ancre en bas, ou le voile atteint 86 % — le texte se pose alors sur la partie la plus sombre de l'image, sans qu'on ait besoin d'assombrir davantage la photographie. */ .cat-video { display: flex; flex-direction: column; justify-content: flex-end; } .cat-video__texte { width: 100%; padding-block: clamp(30px, 3.4vw, 54px); } .cat-video__texte .fil, .cat-video__texte .fil a, .cat-video__texte .woocommerce-breadcrumb, .cat-video__texte .woocommerce-breadcrumb a { color: rgba(255, 255, 255, .82) !important; } .cat-video__texte .fil a:hover, .cat-video__texte .woocommerce-breadcrumb a:hover { color: #fff !important; } /* =================================================================== 39. LES PAGES EDITORIALES : ALIGNEMENT ET INTERTITRES =================================================================== Deux decalages restaient sur « La Maison », la FAQ, les articles du journal et les pages de service. 1. LE TEXTE NE S'ALIGNAIT PAS AVEC SON TITRE. L'en-tete est dans un conteneur pleine largeur, le corps de l'article dans un conteneur etroit et centre. Le titre commencait donc a 95 px du bord et le texte a 220 : deux axes differents sur la meme page, et le regard doit se redeplacer entre les deux. On met l'en-tete sur le meme conteneur etroit : un seul axe, du fil d'Ariane jusqu'a la derniere ligne. La mesure de lecture reste courte, ce qui est ce qu'on veut pour un texte suivi. 2. LES INTERTITRES ETAIENT RESTES EN CAPITALES JOST. Le titre de la page est en Playfair bas de casse depuis la section 37 : a l'interieur, chaque « POURQUOI LA FIBRE » repartait dans l'autre registre. Ils suivent le titre. =================================================================== */ .entete-page > .wrap { max-width: var(--max-etroit); } .contenu h2, .contenu h3 { font-family: var(--titre, Georgia, serif); font-weight: 500; text-transform: none; letter-spacing: -.015em; line-height: 1.15; } .contenu h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-top: 2.2em; } .contenu h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-top: 1.8em; } /* Les liens dans le texte prennent l'accent de la maison plutot que l'ancien champagne, neutralise par la refonte. */ .contenu a { color: var(--rose); border-bottom-color: rgba(181,74,82,.35); } .contenu a:hover { border-bottom-color: var(--rose); } /* =================================================================== 40. LA FICHE PRODUIT =================================================================== Dernier gabarit reste en arriere. Releve : titre 43 px, CAPITALES, Jost, sur trois lignes prix 18,75 px bouton angles vifs Trois corrections. 1. LE TITRE PASSE EN PLAYFAIR BAS DE CASSE. Les noms de produits font ici jusqu'a 60 signes — « Perruque carree noire de 30 cm (12 po.) ondulee avec franges ». En capitales, une phrase de cette longueur devient un bloc qu'on dechiffre au lieu de le lire. En bas de casse, les mots reprennent leur silhouette. 2. LE PRIX GROSSIT. C'est le deuxieme chiffre que regarde une acheteuse, apres la photo. A 18,75 px il se confondait avec le texte courant. 3. LE BOUTON PREND LE MEME ARRONDI QUE PARTOUT AILLEURS, et l'accent rose au survol. C'est le bouton le plus important du site. =================================================================== */ .produit-single h1, .single-product .product_title { font-family: var(--titre, Georgia, serif) !important; font-size: clamp(1.6rem, 2.6vw, 2.35rem) !important; font-weight: 500; text-transform: none !important; letter-spacing: -.015em; line-height: 1.14; } .single-product .price, .single-product .price .amount, .produit-single .price { font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important; font-weight: 400; letter-spacing: -.01em; } .single_add_to_cart_button, .single-product button[name="add-to-cart"] { border-radius: 999px !important; letter-spacing: .15em; transition: background-color .3s ease, transform .3s ease; } .single_add_to_cart_button:hover, .single-product button[name="add-to-cart"]:hover { background: var(--rose) !important; transform: translateY(-2px); } /* Les intitules d'onglets suivent la meme regle que les intertitres : ce sont des mots, pas des etiquettes. */ .woocommerce-tabs .wc-tabs li a { font-family: var(--titre, Georgia, serif); text-transform: none; letter-spacing: 0; font-size: clamp(.95rem, 1.2vw, 1.0625rem); } /* Le bouton d'ajout restait a angles vifs malgre ma regle en « !important ». Diagnostic : woo.css .woocommerce button.button.alt 0 px !important refonte.css .single_add_to_cart_button 999 px !important Ma regle vient pourtant APRES dans la feuille. Mais entre deux declarations « !important », ce n'est pas l'ordre qui tranche, c'est la specificite — et celle de woo.css (un element + trois classes) depasse la mienne (une classe). L'ordre ne departage que des poids egaux. On monte donc la specificite au-dessus de la sienne plutot que d'empiler un « !important » de plus, qui n'aurait rien change. */ .woocommerce button.button.alt.single_add_to_cart_button, .woocommerce a.button.alt.single_add_to_cart_button, .barre-achat .barre-achat__btn { border-radius: 999px !important; } .woocommerce button.button.alt.single_add_to_cart_button:hover, .barre-achat .barre-achat__btn:hover { background: var(--rose) !important; } /* =================================================================== 41. LE CODE DE REDUCTION, ET LA PASTILLE CARREE =================================================================== « Le code promo se met en noir, c'est pas pro et tres laid. » Mesure : la puce « code » n'avait AUCUN style propre. Elle heritait de trois regles ecrites pour trois contextes differents — .accompagnement-ligne code fond champagne a 22 % .pied .accompagnement-ligne code texte CREME (pour le pied sombre) refonte fond encre a 8 % — et selon la page, elle recevait le texte creme prevu pour le fond sombre sur un fond clair, ou l'inverse. D'ou un rectangle illisible. Le defaut n'etait pas la couleur choisie, c'etait qu'aucune n'avait ete choisie pour CE contexte-la. On lui donne donc un dessin unique, et deux declinaisons explicites : sur fond clair et sur fond sombre. Plus rien n'est laisse a l'heritage. Un code de reduction est une chose qu'on recopie : il est compose en chiffres tabulaires, bien espace, sur une pastille qui se voit — pas un bout de texte gris perdu dans une phrase. Au passage, la pastille ronde devant la ligne etait devenue un CARRE noir : la regle « * { border-radius: 0 !important } » de la section 3 avait aussi emporte son arrondi. =================================================================== */ .accompagnement code, .accompagnement-ligne code, .encart-code__code { font-family: var(--sans); font-weight: 500; font-size: .875em; letter-spacing: .14em; font-variant-numeric: tabular-nums; padding: .34em .72em .3em; border-radius: 999px !important; white-space: nowrap; background: var(--rose); color: #fff; border: 0; } /* Sur fond sombre — pied de page — le rose fonce manquerait de luminosite : on inverse, creme plein et texte a l'encre. */ .pied .accompagnement-ligne code, .section--noir .accompagnement-ligne code { background: var(--creme); color: var(--noir); } /* La pastille redevient ronde, et prend l'accent plutot que l'encre. */ .accompagnement-ligne__pastille { border-radius: 999px !important; background: var(--rose) !important; } /* La ligne elle-meme : le filet de gauche passe au rose de la maison, et le fond se rechauffe pour s'accorder au sable. */ .accompagnement-ligne { border-left-color: var(--rose) !important; background: rgba(181, 74, 82, .07); } .pied .accompagnement-ligne { background: rgba(245, 243, 239, .06); } .accompagnement-ligne a { color: var(--rose); border-bottom-color: rgba(181,74,82,.4); } .accompagnement-ligne a:hover { color: var(--rose-fonce); border-bottom-color: var(--rose-fonce); } .pied .accompagnement-ligne a { color: var(--creme); border-bottom-color: rgba(245,243,239,.4); } /* L'etiquette « EN » sur la liste du journal : une lectrice francaise doit savoir avant de cliquer que l'article est en anglais. */ .etiquette-langue { display: inline-block; margin-left: .5em; padding: .15em .5em .1em; border-radius: 999px !important; background: var(--rose); color: #fff; font-family: var(--sans); font-size: .58em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } /* =================================================================== 42. « DU NOIR SUR DU NOIR » — LA VARIABLE NEUTRALISEE =================================================================== Signalement : « dans la page panier, si je veux copier-coller le texte, ca se met en noir ». C'est la SELECTION, pas le texte. main.css:75 ::selection { background: var(--champagne); color: var(--noir); } A l'origine « --champagne » valait le dore #C6A87C : un fond dore avec du texte encre, parfaitement lisible. La refonte a supprime l'or en reglant la variable sur #111110 — sans revenir sur les regles qui s'en servaient comme FOND. Resultat : fond encre + texte encre = rapport de contraste 1:1. Le texte selectionne disparait dans un bloc noir. Vingt regles utilisent cette variable en fond. La plupart sont decoratives (points, filets, degrades) et restent correctes en encre. Cinq portent du texte, et celles-la etaient invisibles : ::selection le texte selectionne .produit-etiq .etiq--promo l'etiquette « promo » .ba__tag--apres l'etiquette avant/apres .woocommerce-info .button:hover un bouton au survol .produit-action .added_to_cart le lien « ajoute » au survol On ne touche pas a la variable — la reregler casserait les usages decoratifs. On corrige les cinq endroits ou du texte se pose dessus, avec le rose de la maison et un contraste verifie. =================================================================== */ ::selection { background: var(--rose); color: #fff; } ::-moz-selection { background: var(--rose); color: #fff; } .produit-etiq .etiq--promo, .ba__tag--apres { background: var(--rose) !important; color: #fff !important; } .woocommerce-info .button:hover, .produit-action .added_to_cart:hover { background: var(--rose) !important; border-color: var(--rose) !important; color: #fff !important; } /* =================================================================== 43. LE FOND PASSE AU BLANC, ET L'EN-TETE SE RETRACTE =================================================================== Historique : blanc casse froid #F5F3EF, juge « fade ». Puis sable chaud #F2ECE3, juge « pas pro ». Deux neutres clairs separes de quelques pour cent, rejetes tous les deux. Quand deux teintes voisines sonnent faux, ce n'est generalement pas la teinte qui est en cause. C'est que la page manque de contraste et de structure, et que n'importe quel neutre y parait mou. On prend donc le blanc pur — non parce qu'il est beau, mais parce qu'il est le seul fond qui ne se remarque pas. Blanc, encre, un accent : la palette la plus difficile a rater. Les cartes produit, elles, ne peuvent plus etre blanches sur du blanc : elles passent en gris tres pale. C'est l'inverse de la version precedente, et ca garde le relief. =================================================================== */ :root { --creme: #FFFFFF; --creme-2: #F4F3F1; --bordure: rgba(17, 17, 16, .16); --bordure-2: rgba(17, 17, 16, .10); } /* Les cartes se detachent par un gris pale, plus par du blanc. */ ul.products li.product, body .section--noir:has(ul.products) ul.products li.product { background: #F6F5F3; } .woocommerce-cart .cart_totals { background: #F6F5F3; } /* La bande rose de la selection se rechauffe d'un cran pour rester perceptible a cote d'un blanc pur. */ :root { --rose-fond: #F7E9E6; } /* =================================================================== 44. L'EN-TETE SE RETRACTE AU DEFILEMENT =================================================================== Mesure : 202 px de hauteur, en position « sticky ». Un cinquieme de l'ecran occupe en permanence par un bandeau, sur toutes les pages. C'est ce qui donne l'impression d'un site lourd — davantage que la couleur du fond. Une fois qu'on a commence a lire, le logo en grand ne sert plus a rien : on sait ou on est. On garde donc l'etage 1 en grand tant qu'on est en haut de page, et des qu'on descend il se comprime. La classe « is-collee » est deja posee par le JavaScript existant (module « sticky » de main.js), il n'y a rien a ajouter. =================================================================== */ .entete__haut, .entete .site-logo__text, .entete .site-logo__marque, .entete__bas .nav-principale ul a { transition: min-height .32s ease, font-size .32s ease, height .32s ease, padding .32s ease; } .entete.is-collee .entete__haut { min-height: 58px; } .entete.is-collee .site-logo__text { font-size: clamp(1rem, 1.25vw, 1.35rem) !important; } .entete.is-collee .site-logo__marque { height: clamp(24px, 2vw, 32px) !important; } .entete.is-collee .entete__bas .nav-principale ul a { padding-block: 10px; } /* Pas d'ombre : la section 3 pose « .entete { box-shadow: none !important } », et de toute facon l'en-tete porte deja un filet d'encre en bas qui le detache du blanc. Une ombre en plus ferait double emploi. */ @media (prefers-reduced-motion: reduce) { .entete__haut, .entete .site-logo__text, .entete .site-logo__marque, .entete__bas .nav-principale ul a { transition: none; } } /* =================================================================== 45. LE MUR DE COULEURS DEFILE LATERALEMENT SUR TELEPHONE =================================================================== Sur ordinateur, douze aplats en six colonnes tiennent dans un seul regard — c'est tout l'interet du bloc. Sur telephone, la meme grille en deux colonnes produit six rangees : plus de 900 px de haut, qu'il faut faire defiler avant d'arriver au reste de la page. L'evenement devient un obstacle. On le transforme en rangee qui defile du doigt. Les douze teintes restent accessibles, mais le bloc ne mesure plus qu'une seule tuile de haut. Et le geste est le bon : on balaye une palette de couleurs comme on feuillette, on ne la parcourt pas verticalement. « scroll-snap » fait que le doigt s'arrete proprement sur une tuile plutot qu'entre deux. Le debord volontaire de la derniere tuile sur le bord droit dit qu'il y en a d'autres — sans quoi personne ne devine qu'on peut balayer. =================================================================== */ @media (max-width: 760px) { .mur__grille { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .mur__grille::-webkit-scrollbar { display: none; } .mur__case { flex: 0 0 auto; /* 62 % de la largeur : la tuile suivante depasse toujours du bord, ce qui signale qu'il y a une suite. */ width: 62vw; max-width: 260px; scroll-snap-align: start; } .mur__lien { min-height: 180px; } .mur__nom { font-size: 1.0625rem; } .mur__compte { font-size: 1.5rem; } /* Le bloc entier n'a plus a etre contenu dans la gouttiere : la rangee part du bord gauche et sort par le bord droit. */ .mur { padding-bottom: 4px; } } /* =================================================================== 46. LA MOSAIQUE D'OUVERTURE =================================================================== Le panneau de droite passe d'un film a quatre, en damier 2 x 2. Voir l'en-tete de parts/hero.php pour le choix des plans. Le damier est SANS GOUTTIERE : les quatre tuiles se touchent et ne forment qu'un seul rectangle, comme un mur d'images d'un magazine. Des gouttieres en auraient fait quatre vignettes juxtaposees, ce qui ressemble a une planche-contact — l'inverse de l'effet voulu. Aucun cadre, aucun arrondi, aucune ombre : quatre images qui bougent se suffisent largement. =================================================================== */ .ouverture__mosaique { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; background: var(--creme-2); min-height: 100%; overflow: hidden; } .ouverture__tuile { position: relative; overflow: hidden; min-height: 0; } .ouverture__tuile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s ease; } .ouverture__tuile video.est-prete { opacity: 1; } html:not(.js) .ouverture__tuile video { opacity: 1; } /* Un filet tres pale entre les tuiles : sans lui, deux plans de valeur proche se confondent et le damier disparait. Avec, on lit quatre images distinctes sans pour autant les encadrer. */ .ouverture__tuile + .ouverture__tuile { box-shadow: inset 1px 0 0 rgba(255,255,255,.22); } .ouverture__tuile:nth-child(3), .ouverture__tuile:nth-child(4) { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); } .ouverture__tuile:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.22); } /* TELEPHONE. Le damier reste un damier — c'est justement la ou l'on gagne le plus : quatre plans dans la hauteur qu'un seul occupait. */ @media (max-width: 900px) { .ouverture__mosaique { order: -1; height: 46vh; min-height: 260px; max-height: 420px; } } @media (prefers-reduced-motion: reduce) { .ouverture__tuile video { transition: none; } } /* =================================================================== 47. L'OUVERTURE DE LA BOUTIQUE =================================================================== Releve avant correction : 376 px de hauteur, soit 40 % de l'ecran, entierement en texte sur blanc, zero image. La premiere perruque n'apparaissait qu'au ras du bas de l'ecran — sur la page qui recoit le trafic le plus commercial du site. On reprend la structure de l'accueil (ecriture a gauche, images a droite) avec un contenu que seule cette page peut montrer : six vrais produits, un par famille, pris en direct dans le catalogue. Damier 3 x 2 plutot que 2 x 2 : six familles, et des tuiles plus petites que sur l'accueil, parce qu'ici ce sont des vignettes de navigation et non un film d'ouverture. =================================================================== */ .ouverture--boutique { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); min-height: min(66vh, 620px); border-bottom: 1px solid var(--bordure-2); } .ouverture--boutique .ouverture__titre { font-size: clamp(2rem, 3.6vw, 3.9rem); } .boutique-hero__texte { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.72; color: var(--gris); max-width: 46ch; margin: 0 0 clamp(6px, 1vw, 12px); } .ouverture--boutique .ouverture__sous { margin-bottom: clamp(18px, 2vw, 26px); } .ouverture__mosaique--six { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } /* Les tuiles deviennent des liens : elles doivent donc reagir. */ .ouverture__tuile--lien { display: block; cursor: pointer; } .ouverture__tuile--lien img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.22,.61,.36,1); } .ouverture__tuile--lien:hover img, .ouverture__tuile--lien:focus-visible img { transform: scale(1.06); } .ouverture__tuile--lien:focus-visible { outline: 3px solid var(--noir); outline-offset: -4px; } .ouverture__tuile-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,15,.76) 0%, rgba(13,13,15,.34) 46%, rgba(13,13,15,.02) 100%); pointer-events: none; } .ouverture__tuile-texte { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: clamp(11px, 1vw, 17px); color: #fff; pointer-events: none; } .ouverture__tuile-nom { font-family: var(--titre, Georgia, serif); font-size: clamp(.8125rem, 1vw, 1.0625rem); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; } .ouverture__tuile-n { font-size: clamp(.9375rem, 1.3vw, 1.3rem); font-weight: 300; line-height: 1; opacity: .62; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .ouverture--boutique { grid-template-columns: 1fr; min-height: 0; } .ouverture__mosaique--six { order: -1; height: auto; max-height: none; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); aspect-ratio: 3 / 2.4; } } @media (max-width: 560px) { .ouverture__mosaique--six { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 2 / 2.7; } } @media (prefers-reduced-motion: reduce) { .ouverture__tuile--lien img { transition: none; } .ouverture__tuile--lien:hover img { transform: none; } } /* Le

ajoute autour de chaque question ne doit rien changer a l'oeil : c'est une correction de structure, pas de dessin. */ .faq__titre { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; font-family: inherit; font-weight: inherit; } /* =================================================================== 48. L'EN-TETE DU JOURNAL =================================================================== 208 px de hauteur pour deux mots — « Le Journal » — et le premier article qui ne commencait qu'a 532 px. Sur une page de liste, ce qu'on vient chercher ce sont les articles, pas le titre de la rubrique : il doit se presenter et s'effacer. On resserre, et on ajoute le chapo qui manquait : une page de liste sans une ligne d'explication ne dit pas a qui elle s'adresse. =================================================================== */ .blog .entete-page, .archive .entete-page { padding-block: clamp(26px, 2.8vw, 44px); } /* =================================================================== 49. LE RECADRAGE DES TUILES DE LA BOUTIQUE =================================================================== Signalement : « section hero coupée ». Le calcul le confirme. image source 900 x 1200 (portrait, rapport 0,75) tuile 377 x 310 (paysage, rapport 1,22) « cover » ajuste sur la largeur : l'image est rendue sur 503 px de haut, la tuile n'en montre que 310, soit 62 %. Avec un centrage par defaut a 50 %, on retire 19 % EN HAUT et 19 % en bas. Sur une photo de perruque, les 19 % du haut, ce sont les cheveux. C'est le seul endroit qu'il ne fallait pas couper. On ancre donc le cadrage pres du haut : la chevelure et le visage restent entiers, et ce qui disparait est le bas du buste — qui n'apprend rien a personne sur une perruque. Et on rend un peu de hauteur aux tuiles pour qu'elles soient moins ecrasees : rapport 1,08 au lieu de 1,22. =================================================================== */ .ouverture--boutique { min-height: min(74vh, 700px); } .ouverture__tuile--lien img { object-position: 50% 6%; } @media (max-width: 900px) { .ouverture--boutique { min-height: 0; } } /* =================================================================== 50. L'OUVERTURE DES PAGES DE CONTENU =================================================================== La Maison, Accompagnement, Contact et Livraison n'avaient chacune que deux images : le logo en en-tete et le logo en pied. Aucune illustration. Quatre murs de texte au milieu d'un site devenu visuel. Elles reprennent la structure de la boutique — ecriture a gauche, image a droite — avec une photo tiree du catalogue, choisie pour correspondre au sujet de la page (voir parts/page-hero.php). Plus basse que la boutique : ce sont des pages qu'on vient LIRE. On annonce, on ne met pas en scene. =================================================================== */ .ouverture--page { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); min-height: min(46vh, 430px); border-bottom: 1px solid var(--bordure-2); } .ouverture--page .ouverture__texte { padding-block: clamp(30px, 3.6vw, 58px); } .ouverture--page .ouverture__titre { font-size: clamp(1.9rem, 3.4vw, 3.4rem); margin-bottom: clamp(12px, 1.4vw, 18px); } .page-hero__texte { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.72; color: var(--gris); max-width: 48ch; margin: 0; } .ouverture__image { position: relative; overflow: hidden; background: var(--creme-2); min-height: 100%; } .ouverture__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Meme raison que pour les tuiles de la boutique : sur une photo de perruque, ce qu'il ne faut pas couper est le haut. */ object-position: 50% 8%; display: block; } @media (max-width: 900px) { .ouverture--page { grid-template-columns: 1fr; min-height: 0; } .ouverture--page .ouverture__image { order: -1; height: 34vh; min-height: 200px; max-height: 300px; } } /* =================================================================== 51. LE CORPS DES PAGES DE CONTENU =================================================================== L'ouverture en image (section 50) ne reglait que les 430 premiers pixels. Mesure faite ensuite sur les quatre pages : /accompagnement/ 3372 px de contenu, 800 mots, 8 titres, 0 image /livraison-retours/ 2333 px, 517 mots, 5 titres, 0 image /la-maison/ 1359 px, 322 mots, 4 titres, 0 image /contact/ 1028 px, 149 mots, 2 titres, 0 image Zero image dans le corps, une colonne de 708 px, et des titres qui se suivent sans aucun repere : on lit un document, pas un site. Les defauts releves un par un : - « Votre code de reduction » s'affichait en #111110 SUR #111110 : contraste 1,00, texte strictement invisible. Cinquieme regle victime de la variable --champagne neutralisee (apres ::selection et les trois autres corrigees en section 42). - Le lisere de ce meme encart etait un beige ecrit en dur, rgba(198,168,124,.35) — la couleur dont on ne veut plus. - Un pave noir de 277 px de haut au milieu d'une page qui parle de chimiotherapie : le ton n'y est pas. - Les listes utilisaient la puce « disc » du navigateur. - Le filet des encarts etait passe au noir, meme cause. On ne touche a aucun contenu : tout se joue en CSS, sur du texte deja ecrit. Retirer cette section rend les pages a leur etat precedent. =================================================================== */ /* --- Le premier paragraphe porte la page ------------------------- */ .contenu > p:first-child { font-size: clamp(1.02rem, 1.25vw, 1.1875rem); line-height: 1.75; color: var(--noir); } /* --- Les titres reprennent le langage de la marque --------------- */ /* Un filet rose court au-dessus du titre. Pas une numerotation : la page Contact n'a que deux titres, les numeroter serait ridicule. Un filet marche partout et suffit a rythmer huit sections. */ .contenu h2 { position: relative; padding-top: 26px; } .contenu h2::before { content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 2px; background: var(--rose); } /* Le tout premier titre suit le chapo de pres : on lui laisse moins d'air au-dessus, sinon la page s'ouvre sur un trou. */ .contenu > h2:first-of-type { margin-top: clamp(28px, 3vw, 46px); } /* --- Les listes --------------------------------------------------- La puce « disc » est le reglage par defaut du navigateur : elle n'appartient a aucune charte. On la remplace par un tiret rose, qui reprend le filet des titres. */ .contenu ul:not([class]) { list-style: none; padding-left: 0; } .contenu ul:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: .55em; } .contenu ul:not([class]) > li::before { content: ''; position: absolute; left: 0; top: .72em; width: 13px; height: 1px; background: var(--rose); } /* --- Les liens dans le texte ------------------------------------- Un lien de corps de page doit se voir sans crier : soulignement fin, qui s'epaissit au survol. */ .contenu p a:not([class]), .contenu li a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-thickness .2s, color .2s; } .contenu p a:not([class]):hover, .contenu li a:not([class]):hover { color: var(--rose-fonce); text-decoration-thickness: 2px; } /* --- L'encart simple --------------------------------------------- Son filet gauche etait passe au noir avec --champagne. En rose, il redevient un signal plutot qu'une barre. */ .contenu .encart { background: var(--rose-fond); border-left: 3px solid var(--rose); border-radius: 0 var(--rayon) var(--rayon) 0 !important; } .contenu .encart strong { color: var(--rose-fonce); } /* --- Le tableau des tarifs ---------------------------------------- */ .contenu table { width: 100%; border-collapse: collapse; border-radius: var(--rayon) !important; overflow: hidden; border: 1px solid var(--bordure-2); } .contenu table th { background: var(--rose-fond) !important; color: var(--noir); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 14px 18px; } .contenu table td { padding: 15px 18px; border-bottom: 1px solid var(--bordure-2); font-size: .9375rem; } .contenu table tr:last-child td { border-bottom: 0; } .contenu table tbody tr:nth-child(even) { background: var(--creme-2); } /* =================================================================== L'ENCART DU CODE DE REDUCTION =================================================================== Refait entierement. Fond rose pale, ecriture a l'encre : on garde l'effet d'annonce sans le pave noir, et le texte redevient lisible. =================================================================== */ .encart-code { background: var(--rose-fond) !important; color: var(--noir) !important; border: 1px solid rgba(181, 74, 82, .22); border-radius: var(--rayon) !important; padding: clamp(30px, 4vw, 46px) clamp(22px, 3vw, 38px); } /* Le double liseré interieur beige n'a plus lieu d'etre. */ .encart-code::after { display: none !important; } .encart-code__label { color: var(--rose-fonce) !important; /* etait #111110 sur #111110 */ font-size: .7rem; letter-spacing: .24em; } .encart-code__detail { color: var(--gris) !important; /* etait creme a 60 % */ font-size: .84rem; } /* Le code lui-meme reste la pastille rose pleine posee en section 41 : sur fond rose pale, elle ressort et reste selectionnable d'un clic. */ .encart-code .encart-code__code { font-size: 1.05rem; padding: .5em 1.1em .46em; user-select: all; } /* =================================================================== 52. LA PAGE DES QUESTIONS FREQUENTES =================================================================== Releve avant, mesure sur la page servie : 9 questions a plat, 2 019 px de haut 0 titre de section — aucun moyen de savoir ou l'on en est items sans fond, sans arrondi, separes par un filet de 0,67 px le « + » en #111110, donc noir sur blanc comme le reste Autrement dit : neuf lignes identiques empilees. Rien n'indiquait qu'on pouvait cliquer, et rien ne distinguait « Comment choisir ma teinte ? » de « Puis-je retourner un article ? ». Le regroupement en trois familles est fait en PHP (inc/faq.php). Ici on s'occupe de ce qui se voit : donner du corps aux questions, et rendre le depliage lisible. =================================================================== */ /* --- Le titre de famille ------------------------------------------ Un chiffre rose, le nom de la famille, et le nombre de questions qu'elle contient. Le compte n'est pas decoratif : il annonce la longueur, ce qui evite d'ouvrir un groupe pour rien. */ .faq-groupe { margin-top: clamp(46px, 5vw, 76px); } .faq-groupe:first-of-type { margin-top: clamp(26px, 3vw, 40px); } .faq-groupe__titre { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.25; } /* La section 51 pose un filet rose au-dessus de chaque h2 du corps. Ici le chiffre joue ce role : deux reperes au meme endroit feraient doublon. */ .faq-groupe__titre::before { content: none !important; } .faq-groupe__titre { padding-top: 0 !important; } .faq-groupe__n { flex: 0 0 auto; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: #fff; background: var(--rose); border-radius: 999px !important; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-2px); } .faq-groupe__mot { flex: 1 1 auto; } .faq-groupe__compte { flex: 0 0 auto; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-2); white-space: nowrap; } .faq-groupe__intro { margin: 0 0 18px; padding-left: 40px; /* aligne sous le texte du titre */ font-size: .9375rem; line-height: 1.7; color: var(--gris); max-width: 62ch; } /* --- Les questions ------------------------------------------------- Chaque question devient une carte : fond, bordure, arrondi. C'est ce qui manquait pour qu'on comprenne qu'elle s'ouvre. */ .faq-groupe .faq { border-top: 0; gap: 8px; } .faq-groupe .faq__item { border-bottom: 0; border: 1px solid var(--bordure-2); border-radius: var(--rayon) !important; background: #fff; padding: 0 clamp(16px, 2vw, 24px); transition: border-color .22s, background .22s; } .faq-groupe .faq__item:hover { border-color: rgba(181, 74, 82, .38); } /* Question ouverte : fond rose pale, bordure rose. On voit d'un coup d'oeil laquelle on est en train de lire. */ .faq-groupe .faq__item.is-ouvert { background: var(--rose-fond); border-color: rgba(181, 74, 82, .3); } .faq-groupe .faq__q { padding: 1.15em 2.2em 1.15em 0; font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.45; } .faq-groupe .faq__q:hover { color: var(--rose-fonce); } /* Le « + » passe au rose et grossit un peu : c'est le seul signal de clic de toute la page. */ .faq-groupe .faq__q::after { color: var(--rose) !important; font-size: 1.5rem; right: 2px; } .faq-groupe .faq__r > div { padding-bottom: 1.5em; font-size: .9375rem; line-height: 1.75; } @media (max-width: 640px) { /* Le compte passe a la ligne plutot que de comprimer le titre. */ .faq-groupe__titre { flex-wrap: wrap; } .faq-groupe__compte { flex-basis: 100%; padding-left: 40px; } .faq-groupe__intro { padding-left: 0; } } /* =================================================================== 53. « MON COMPTE » AVANT CONNEXION =================================================================== L'inscription vient d'etre ouverte (elle etait fermee depuis la mise en ligne : aucune cliente ne pouvait creer de compte). Le formulaire « S'inscrire » s'affiche donc pour la premiere fois — et il tombait sur deux defauts que personne n'avait pu voir, faute de l'avoir jamais affiche. DEFAUT 1 — LA COLONNE DE 250 PX ------------------------------- woo.css pose : .woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px 1fr; } C'est juste pour une cliente CONNECTEE : 250 px pour le menu du compte (Commandes, Adresses, Deconnexion), le reste pour le contenu. Mais avant connexion ce menu n'existe pas. Les blocs « Se connecter » et « S'inscrire » heritaient alors de la piste de 250 px : mesure faite sur un ecran de 1440 px, les deux colonnes tombaient a 102 px chacune et le champ e-mail a 61 px de large. On rend donc la grille conditionnelle a la connexion. WordPress pose la classe « logged-in » sur le body, ce qui suffit a distinguer les deux cas sans toucher a woo.css. DEFAUT 2 — LE BOUTON GRIS ------------------------- La regle de woo.css ne visait que « .woocommerce-form-login .button ». Le bouton « S'inscrire » n'etait couvert par rien : il sortait dans le gris lavande du navigateur, rgb(233,230,237) sur rgb(81,81,81). =================================================================== */ body.woocommerce-account:not(.logged-in) .woocommerce { display: block !important; } /* Les deux blocs cote a cote, et qui s'empilent sur petit ecran. */ body.woocommerce-account:not(.logged-in) .col2-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; width: 100%; max-width: 900px; margin-inline: auto; } @media (max-width: 760px) { body.woocommerce-account:not(.logged-in) .col2-set { grid-template-columns: 1fr; } } /* Les deux cartes : meme traitement que les encarts du site. */ .woocommerce-form-login, .woocommerce-form-register { border: 1px solid var(--bordure-2) !important; border-radius: var(--rayon) !important; background: #fff; } .col2-set .u-column1 > h2, .col2-set .u-column2 > h2 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin: 0 0 14px; } /* Le bouton d'inscription recoit enfin la charte. */ .woocommerce-form-register .button, .woocommerce-form-register button[type="submit"] { background: var(--noir) !important; color: #fff !important; border: 1px solid var(--noir) !important; padding: .95em 2em !important; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; border-radius: var(--rayon) !important; cursor: pointer; transition: background .2s, border-color .2s; } .woocommerce-form-register .button:hover, .woocommerce-form-register button[type="submit"]:hover { background: var(--rose) !important; border-color: var(--rose) !important; } /* Les champs, pour qu'ils se ressemblent d'un formulaire a l'autre. */ .woocommerce-form-register .woocommerce-form-row input.input-text { width: 100%; box-sizing: border-box; } /* Le texte legal sous le formulaire : lisible, mais pas au meme plan que les champs. */ .woocommerce-form-register .woocommerce-privacy-policy-text p { font-size: .82rem; line-height: 1.6; color: var(--gris); } /* =================================================================== 54. L'OUVERTURE DE LA SECONDE MAIN =================================================================== La mosaique de la boutique est faite de LIENS : tout son habillage est accroche a « .ouverture__tuile--lien img » — le cadrage en couverture, le positionnement absolu, le zoom au survol. Ici les six photos sont decoratives (voir l'en-tete de parts/seconde-main-hero.php) : ce sont des , pas des . Aucune de ces regles ne les atteignait, et les images sortaient a leur taille naturelle, hors de leur case. On leur donne donc le meme cadrage, sans le zoom ni le curseur de lien, qui promettraient un clic qui n'existe pas. =================================================================== */ .ouverture--occasion .ouverture__tuile { display: block; } .ouverture--occasion .ouverture__tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Le bouton qui porte le vrai lien vers le catalogue. */ .ouverture__action { margin: clamp(20px, 2.4vw, 30px) 0 0; } .ouverture__action .btn { display: inline-flex; } @media (max-width: 900px) { /* Six photos empilees feraient descendre le catalogue trop bas sur un telephone : on garde les quatre premieres, qui suffisent a donner le ton. */ .ouverture--occasion .ouverture__tuile:nth-child(n + 5) { display: none; } .ouverture--occasion .ouverture__mosaique--six { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } }