/* Theme Name: Nuances au Mur Description: Thème sur mesure pour nuances-au-mur.com. Charte « Plâtre » : fond plâtre froid, un seul accent vert sapin réservé à l'achat ; la couleur vient des produits, pas de l'habillage. Version: 0.1.0 Requires PHP: 8.1 Text Domain: nuances-au-mur */ /* ========================================================================== 0. POLICES, HÉBERGÉES ICI Plus de fonts.googleapis.com : chaque page envoyait l'IP du visiteur à Google avant tout choix de cookies (CNIL ; LG München, 20/01/2022). Sous-ensemble « latin » de Google Fonts (français complet : accents, œ, guillemets, €, espace fine) ; 108 Ko pour les quatre fichiers. Fraunces et Figtree sont VARIABLES : un fichier couvre toute la plage de graisses (et l'axe opsz de Fraunces, appliqué seul par le navigateur). Licence SIL Open Font License 1.1 pour les trois familles. ========================================================================== */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:300 400;font-display:swap; src:url(assets/polices/fraunces-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap; src:url(assets/polices/figtree-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url(assets/polices/ibm-plex-mono-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url(assets/polices/ibm-plex-mono-500-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ========================================================================== 1. JETONS Relevé de quinze concurrents (marketing/veille-2026-09-24/) : les leaders ont un fond clair, une encre sombre et UN accent réservé à l'achat. Fond froid, pour ne pas ressembler au lin chaud de Linge Évasion. (portage-ok : comparaison voulue) Contrastes WCAG 2.1 sur #F3F3F0 : encre 14,32 (AAA), secondaire 5,64 (AA), sapin 8,58 (AAA) — et 9,54 en texte blanc sur bouton sapin. Les filets (1,27) sont décoratifs : jamais de texte dessus. ========================================================================== */ :root{ --fond:#F3F3F0; --fond-alt:#E7E9E5; --fond-carte:#FAFAF8; --encre:#1E2322; --encre-2:#5A625F; --sapin:#1F4D43; --sapin-fonce:#163A32; --filet:#D7DAD5; --filet-clair:#E4E6E2; --blanc:#FFFFFF; /* Alerte (retrait, message d'erreur du panier) et confirmation. Terre brûlée sombre plutôt qu'orange : 7,3 sur son fond clair (AA+). */ --alerte:#8C3B1E; --alerte-f:#F6ECE8; --ok-f:#E3ECE8; --corps:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; /* Les cinq lés du symbole, du plus clair au plus foncé. */ --le-1:#C9D6D1; --le-2:#93AFA5; --le-3:#5F877A; --le-4:#2F5F52; --le-5:#1F4D43; --large:1280px; --prose:74ch; --gouttiere:clamp(16px,3.6vw,40px); /* Boutons à 2 px : presque droits, comme Photowall et Desenio. */ --r-s:2px; --r-m:4px; --r-l:10px; --ombre-s:0 1px 2px rgba(30,35,34,.06); --ombre-m:0 2px 10px rgba(30,35,34,.07); --ombre-l:0 12px 40px rgba(30,35,34,.12); --t-court:.18s cubic-bezier(.4,0,.2,1); --t-moyen:.34s cubic-bezier(.22,1,.36,1); --t-long:.6s cubic-bezier(.22,1,.36,1); } /* ========================================================================== 2. SOCLE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--fond); color:var(--encre); font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; /* 16 px et pas 14 : la cible a plus de 35 ans. Interlettrage positif — c'est le marqueur de haut de gamme le plus fiable relevé dans l'étude. */ font-size:16px; line-height:1.7; letter-spacing:.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:300; line-height:1.14; letter-spacing:-.015em; text-wrap:balance; margin:0; } h1{font-size:clamp(2rem,5vw,3.1rem)} h2{font-size:clamp(1.5rem,3.4vw,2.15rem)} h3{font-size:clamp(1.15rem,2.2vw,1.4rem)} p{margin:0} img,video,svg{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--sapin);outline-offset:3px;border-radius:2px} /* Chaque nombre passe en chasse fixe : les valeurs s'alignent verticalement dans les colonnes, et un tableau se parcourt en trois secondes au lieu de dix. */ .nm-num,.woocommerce-Price-amount,.price,.nm-mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .enrob{max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)} /* 🚨 WordPress ne fournit PAS cette classe au thème : sans elle, les étiquettes « pour lecteur d'écran » s'affichaient en clair (formulaire de la lettre au pied de page, recherche). Visible au focus, pour le lien d'évitement. */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} .screen-reader-text:focus{position:fixed!important;left:12px!important;top:12px;z-index:100000;width:auto;height:auto;margin:0; padding:10px 16px;clip:auto;clip-path:none;background:var(--fond);color:var(--encre);box-shadow:var(--ombre-l)} /* ========================================================================== 2 bis. PAGES ÉDITORIALES 🚨 `p{margin:0}` est posé globalement, et c'est voulu : dans les gabarits, chaque bloc gère son propre espacement. Mais dans un texte long, plus rien ne sépare un titre du paragraphe qui suit — le guide des tailles s'affichait en un pavé continu, titres compris. Le rythme se remet donc ICI, et seulement ici. ========================================================================== */ .nm-prose > *{max-width:var(--prose)} .nm-prose > * + *{margin-top:1.15em} /* Un titre appartient à ce qui le suit, pas à ce qui le précède : beaucoup d'air au-dessus, très peu en dessous. */ .nm-prose > h2{font-size:clamp(1.28rem,2.1vw,1.62rem);margin-top:2.7em} .nm-prose > h2 + *{margin-top:.7em} .nm-prose > h3{font-size:clamp(1.04rem,1.6vw,1.18rem);margin-top:2em} .nm-prose > h3 + *{margin-top:.55em} /* Le premier paragraphe donne le ton : un cran plus grand, en encre plus claire. */ .nm-prose > p:first-child{font-size:1.14rem;line-height:1.62;color:var(--encre-2)} .nm-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--filet)} .nm-prose a:hover{color:var(--sapin);text-decoration-color:currentColor} .nm-prose ul,.nm-prose ol{padding-left:1.2em} .nm-prose li + li{margin-top:.4em} .nm-prose li::marker{color:var(--sapin)} .nm-prose blockquote{border-left:2px solid var(--sapin);padding-left:18px;color:var(--encre-2);font-style:italic} .nm-prose hr{border:0;border-top:1px solid var(--filet);margin-block:2.4em} /* Sur ces pages, le tableau EST le contenu : c'est lui qu'on vient lire. ⚠️ Le défilement se pose sur un conteneur, jamais sur le lui-même — un `overflow-x` sur une table casse sa mise en page. */ .nm-prose .nm-table{overflow-x:auto;margin-top:1.7em} .nm-prose table{ width:100%;border-collapse:collapse;min-width:32rem; font-size:15px;font-variant-numeric:tabular-nums; } .nm-prose thead th{ font-family:"Figtree",sans-serif;font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2); text-align:left;padding:0 20px 10px 0;border-bottom:1px solid var(--encre); white-space:nowrap; } .nm-prose tbody td{padding:11px 20px 11px 0;border-bottom:1px solid var(--filet-clair);vertical-align:top} .nm-prose tbody tr:last-child td{border-bottom:1px solid var(--filet)} .nm-prose tbody td:first-child{font-weight:500;color:var(--encre)} .nm-prose tbody tr:hover td{background:var(--fond-alt)} .nm-prose table caption{caption-side:bottom;padding-top:10px;font-size:13px;color:var(--encre-2);text-align:left} .nm-oeil{ font-family:"Figtree",sans-serif;font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2); } /* ========================================================================== 3. EN-TÊTE ========================================================================== */ .nm-bandeau{ background:var(--encre);color:var(--fond); font-size:12.5px;letter-spacing:.04em;text-align:center; padding:9px var(--gouttiere); } .nm-bandeau a{text-decoration:underline;text-underline-offset:3px} .nm-entete{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--fond) 88%,transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color var(--t-court),box-shadow var(--t-court); } .nm-entete.est-colle{border-bottom-color:var(--filet);box-shadow:var(--ombre-s)} .nm-entete-int{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px; min-height:72px; } .nm-logo{ font-family:"Fraunces",serif;font-size:19px;font-weight:400; letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; display:inline-flex;align-items:center;gap:.52em; } /* La marque : cinq lés côte à côte, posés par `nm_logo_marque()`. Dimensionnée en `em` — elle suit la taille du nom, et le pied de page qui passe le sien à 17px n'a rien à régler. */ .nm-logo-marque{ width:1.34em;height:auto;flex:none; /* Le nom porte son trait dessous : centré sur le bloc entier, le symbole tomberait sous la ligne de texte. On le remonte de la moitié du trait. */ transform:translateY(-.24em); } /* Sur l'encre du pied de page, les deux lés les plus foncés disparaîtraient : le symbole y reprend son fond plâtre, comme dans le favicon. */ .nm-pied .nm-logo-marque{background:var(--fond);padding:.14em;border-radius:var(--r-s);box-sizing:content-box} /* Le trait sous le nom, en vert sapin. 🚨 Il est porté par `.nm-logo-nom`, pas par `.nm-logo` : depuis que le lien contient aussi le symbole, un `::after` sur le parent barrerait les deux. */ .nm-logo-nom::after{ content:"";display:block;height:4px;margin-top:5px; background:linear-gradient(90deg,var(--sapin) 0%,var(--sapin) 100%); clip-path:polygon(0 42%,100% 0,100% 100%,0 58%); transform-origin:left;transform:scaleX(.82); transition:transform var(--t-moyen); } .nm-logo:hover .nm-logo-nom::after{transform:scaleX(1)} /* 🚨 Aucun overflow sur un ancêtre du méga-menu : un conteneur à défilement découpe ses descendants positionnés. Sur l'autre site du groupe, le panneau avait opacity:1 et 521 px de haut, et restait invisible. */ /* 🚨 Pas de `position:relative` ici. C'est ce qui enfermait le panneau du méga-menu dans la largeur de la barre de liens — 830 px au lieu de toute la page —, et le décalait de 21 px par rapport au reste du site puisque la barre n'est pas exactement centrée dans l'en-tête. Sans elle, le panneau se cale sur `.nm-entete`, qui est en `sticky` et fait donc bloc de référence : pleine largeur, aligné, sans bricolage en `vw`. */ .nm-nav{display:flex;justify-content:center;gap:clamp(14px,2.4vw,32px)} .nm-nav > li{list-style:none;position:static} .nm-nav > li > a{white-space:nowrap} /* 🚨 `>` obligatoire : sans lui, ces règles touchent AUSSI les liens du méga-menu, qui sont dans `.nm-nav`. Le trait de survol traversait alors chaque rayon sur toute la largeur de sa colonne, comme une rature. */ .nm-nav > li > a{ display:block;padding:24px 2px;font-size:14px;letter-spacing:.03em; position:relative; } .nm-nav > li > a::after{ content:"";position:absolute;left:0;right:0;bottom:18px;height:1px; background:var(--encre);transform:scaleX(0);transform-origin:right; transition:transform var(--t-moyen); } .nm-nav > li > a:hover::after,.nm-nav > li > a:focus-visible::after{transform:scaleX(1);transform-origin:left} .nm-actions{display:flex;align-items:center;gap:6px} .nm-icone{ width:40px;height:40px;display:grid;place-items:center;border-radius:50%; background:transparent;border:0;cursor:pointer; transition:background var(--t-court); } .nm-icone:hover{background:var(--fond-alt)} .nm-icone svg{width:19px;height:19px;stroke:var(--encre);fill:none;stroke-width:1.4} .nm-pastille{ position:absolute;transform:translate(11px,-11px); min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--sapin);color:#fff;font-size:10.5px;line-height:17px; text-align:center;font-family:"IBM Plex Mono",monospace; } /* ========================================================================== 4. MÉGA-MENU — toute l'arborescence du catalogue Tout en CSS : indexable, et fonctionne sans script. ========================================================================== */ .nm-mega{ position:absolute;left:0;right:0;top:100%; background:var(--fond-carte);border-top:1px solid var(--filet); box-shadow:var(--ombre-l); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity var(--t-moyen),transform var(--t-moyen),visibility var(--t-moyen); padding:30px 0 34px; } .nm-nav li:hover > .nm-mega,.nm-nav li:focus-within > .nm-mega{opacity:1;visibility:visible;transform:none} /* Le nombre de colonnes de liens varie avec le catalogue : sans --cols, une colonne vide restait ouverte à droite des liens. */ .nm-mega-grille{ display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) 300px;gap:clamp(28px,3vw,52px); max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere); } .nm-mega h4{font-size:11px;font-family:"Figtree",sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:12px} .nm-mega h4 a{color:inherit} .nm-mega h4 a:hover{color:var(--sapin)} /* Un univers qui enjambe deux colonnes reprend son nom, en retrait. */ .nm-mega h4.nm-suite{color:var(--encre-3,var(--encre-2));opacity:.62} /* 🔥 Le premier univers (le papier peint, voir nm_ordonne_univers()) ouvre la boutique : son titre est un cran plus grand, en vert sapin. */ .nm-mega h4.nm-vedette{font-size:12.5px;letter-spacing:.14em;color:var(--sapin);opacity:1} .nm-mega h4.nm-vedette a{color:var(--sapin)} /* ⚠️ Pas de fond ni d'encadré : l'univers vedette occupe DEUX colonnes, et un fond posé par colonne dessine deux panneaux séparés pour une seule rubrique. L'accent tient à la couleur du titre, au filet qui le surmonte et à une graisse de lien un cran au-dessus. */ .nm-mega-cats > .nm-col-vedette > h4:first-child{ padding-top:8px;border-top:2px solid var(--sapin); } .nm-mega-cats > .nm-col-vedette > ul > li > a{font-size:15.5px} .nm-mega h4 span{letter-spacing:.06em;text-transform:none;font-weight:400} /* Plusieurs univers peuvent se suivre dans une même colonne : il leur faut de l'air entre eux, sinon le second titre se colle à la dernière ligne du premier. */ .nm-mega-cats > div > h4 + ul{margin-bottom:22px} .nm-mega-cats > div > h4 + ul:last-child{margin-bottom:0} .nm-mega ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .nm-mega ul a{padding:5px 0;font-size:14.5px;display:flex;justify-content:space-between;gap:14px;align-items:baseline} /* 🔥 Le grammage DANS l'intitulé de navigation : la donnée devient le filtre et le vocabulaire. Volé à By Mölle, qui le fait mieux que tout le monde. */ .nm-mega ul a .g{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--encre-2);white-space:nowrap} .nm-mega ul a:hover{color:var(--sapin)} /* Pas de carte dans le méga « Catégories » : aucune piste à réserver à droite. */ .nm-mega-cats{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))} /* Sous-rayons : décalés par un filet, jamais par une puce. */ .nm-mega ul .nm-mega-sous{margin:2px 0 6px;padding-left:11px;border-left:1px solid var(--filet);gap:0} .nm-mega ul .nm-mega-sous a{font-size:13.5px;color:var(--encre-2);padding:3px 0} .nm-mega ul .nm-mega-sous a:hover{color:var(--sapin)} /* Pied du méga : les trois raccourcis qui ne sont ni un univers ni un rayon. */ .nm-mega-pied{ max-width:var(--large);margin:26px auto 0;padding:16px var(--gouttiere) 0; border-top:1px solid var(--filet); display:flex;flex-wrap:wrap;gap:26px;font-size:13.5px;color:var(--encre-2); } .nm-mega-pied a:hover{color:var(--sapin)} /* Méga d'une famille (papier peint, tableaux, affiches) : ses rayons, puis une carte photo dans la piste de 300 px que la grille réserve à droite. */ .nm-mega-univers .nm-mega-tout a{color:var(--sapin);font-size:13.5px} .nm-mega-carte{display:flex;flex-direction:column;gap:12px;align-self:start;color:var(--encre)} .nm-mega-carte img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);transition:transform var(--t-moyen)} .nm-mega-carte:hover img{transform:scale(1.02)} .nm-mega-carte-txt{display:flex;flex-direction:column;gap:4px} .nm-mega-carte-titre{font-family:"Fraunces",serif;font-weight:300;font-size:21px;line-height:1.2} .nm-mega-carte:hover .nm-mega-carte-titre{color:var(--sapin)} /* ========================================================================== 5. BOUTONS ========================================================================== */ .nm-bouton, body.nm-theme .button, body.nm-theme button.button, body.nm-theme a.button, body.nm-theme .woocommerce-Button{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border:1px solid var(--encre);border-radius:var(--r-s); background:var(--encre);color:var(--fond); font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase; cursor:pointer;position:relative;overflow:hidden; transition:background var(--t-court),color var(--t-court),transform var(--t-court); } .nm-bouton:hover,body.nm-theme .button:hover{background:var(--sapin);border-color:var(--sapin);color:#fff} .nm-bouton:active{transform:translateY(1px)} .nm-bouton--creux{background:transparent;color:var(--encre)} .nm-bouton--creux:hover{background:var(--encre);color:var(--fond);border-color:var(--encre)} .nm-bouton--bloc{width:100%} /* ========================================================================== 6. CARTE PRODUIT 🚨 Écrire `ul.products li.product` SANS ancêtre `.woocommerce` : la classe n'est posée sur que sur les pages WooCommerce, donc un sélecteur ancré dessus ne s'applique pas sur l'accueil. ========================================================================== */ ul.products{ display:grid;gap:clamp(18px,2.4vw,30px);margin:0;padding:0;list-style:none; /* Trois par ligne : avec le rail de filtres à 254 px, la colonne produits fait ~900 px — à quatre, chaque visuel tombait sous 210 px, trop petit pour juger un tissu. À trois, on gagne un tiers de surface par photo. */ grid-template-columns:repeat(3,1fr); } /* 🚨 WooCommerce pose un clearfix `content:" "; display:table` sur ::before ET ::after de `ul.products`. Dans une grille, un pseudo-élément est un ENFANT de grille comme un autre : les deux occupaient une case pleine de 204 × 401 px. Résultat, la première case de la rangée était vide et toute la grille décalée d'un cran — visible à l'œil, invisible dans le HTML. */ ul.products::before,ul.products::after{content:none!important;display:none!important} /* Variante à quatre colonnes, pour les emplacements sans rail de filtres. */ @media(min-width:1000px){ ul.products.nm-produits--4{grid-template-columns:repeat(4,minmax(0,1fr))} } ul.products li.product{ list-style:none;margin:0;padding:0;width:auto;float:none; display:flex;flex-direction:column;gap:11px;position:relative; } /* 🚨 Le CSS de WooCommerce réimpose width:22.05% et float:left avec une spécificité de 0,3,2 sur ses propres pages. On préfixe body.nm-theme (0,3,3) et on force. Sans ça, les cartes tombent à quelques dizaines de px. */ body.nm-theme ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important} /* 🚨 Même piège sur l'IMAGE, et je l'avais raté : WooCommerce impose `height:auto` à ses vignettes, ce qui gagne sur `height:100%`. Résultat mesuré : une image de 200 px dans un cadre de 251 px, donc une bande de fond beige sous chaque photo, sur toute la boutique. */ body.nm-theme ul.products li.product .nm-visuel img{ width:100%!important;height:100%!important;object-fit:cover; } /* ⚠️ Fond presque blanc, et non sable : la moitié des visuels du fournisseur sont des détourés sur blanc. Sur du sable, chacun dessinait un rectangle blanc flottant — c'est ce qu'on voyait derrière les pastilles. */ .nm-visuel{ position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-m); background:var(--fond-carte); } .nm-visuel img{ width:100%;height:100%;object-fit:cover; transition:transform var(--t-long),opacity var(--t-moyen); } li.product:hover .nm-visuel img{transform:scale(1.035)} /* Seconde image au survol : la deuxième vue de la fiche (motif seul, ou posé dans une pièce). */ .nm-visuel .nm-macro{position:absolute;inset:0;opacity:0} li.product:hover .nm-visuel .nm-macro{opacity:1} .woocommerce-loop-product__title,li.product h2{ font-family:"Figtree",sans-serif!important;font-size:15px!important;font-weight:500!important; line-height:1.45;letter-spacing:0;margin:0!important;padding:0!important; } li.product .price{font-size:15px!important;color:var(--encre)!important;margin:0!important} li.product .price del{color:var(--encre-2);opacity:.6;margin-right:7px} /* Nuancier de coloris sous la carte */ .nm-nuancier{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .nm-pastille-coul{ width:15px;height:15px;border-radius:50%;border:1px solid var(--filet); transition:transform var(--t-court); } .nm-pastille-coul:hover{transform:scale(1.25)} .nm-nuancier .reste{font-size:11.5px;color:var(--encre-2);font-family:"IBM Plex Mono",monospace} /* Le bouton d'ajout se déplie au survol de la carte */ .nm-ajout{ position:absolute;left:10px;right:10px;bottom:10px;z-index:3; opacity:0;transform:translateY(8px); transition:opacity var(--t-moyen),transform var(--t-moyen); } li.product:hover .nm-ajout,li.product:focus-within .nm-ajout{opacity:1;transform:none} @media(hover:none){.nm-ajout{position:static;opacity:1;transform:none}} /* ========================================================================== 7. ACCUEIL ========================================================================== */ /* L'accueil suit la maquette validée le 24/09/2026 (docs/maquette-accueil-retenue.html). Classes préfixées `nm-acc-` : un nom court comme `.point` ou `.grille` finit toujours par croiser une classe de WooCommerce ou d'un module. La page est plus large que le reste du site (1440 contre 1280 px) : les photos y vont presque bord à bord. */ .nm-acc{max-width:1440px;margin-inline:auto} .nm-acc-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border:1px solid transparent;border-radius:var(--r-s); font-size:15px;line-height:1.3;cursor:pointer;transition:background var(--t-court),color var(--t-court)} /* Le vert sapin reste réservé à l'action principale. */ .nm-acc-btn--achat{background:var(--sapin);color:#fff} .nm-acc-btn--achat:hover{background:var(--sapin-fonce)} .nm-acc-btn--lien{border-color:var(--encre);background:transparent;color:var(--encre)} .nm-acc-btn--lien:hover{background:var(--encre);color:var(--fond)} /* --- 1. Le mur du haut ---------------------------------------------------- */ .nm-acc-haut{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:640px} .nm-acc-texte{padding:clamp(28px,5vw,72px) clamp(20px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;gap:26px} .nm-acc-texte h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.02} .nm-acc-texte p{max-width:40ch;color:var(--encre-2);font-size:17px} .nm-acc-actions{display:flex;gap:12px;flex-wrap:wrap} .nm-acc-photo{position:relative;overflow:hidden;background:var(--fond-alt)} .nm-acc-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%} /* Catalogue vide : les cinq lés du symbole, pas une photo d'emprunt. */ .nm-acc-photo--symbole{display:flex;gap:6px;padding:clamp(28px,5vw,64px);background:transparent} .nm-acc-photo--symbole i{flex:1} .nm-acc-photo--symbole i:nth-child(1){background:var(--le-1)} .nm-acc-photo--symbole i:nth-child(2){background:var(--le-2)} .nm-acc-photo--symbole i:nth-child(3){background:var(--le-3)} .nm-acc-photo--symbole i:nth-child(4){background:var(--le-4)} .nm-acc-photo--symbole i:nth-child(5){background:var(--le-5)} /* Le repère : 30 px dessinés, 44 px de cible tactile. */ .nm-acc-point{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0; background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;z-index:1} .nm-acc-point::before,.nm-acc-point::after{content:"";grid-area:1/1;border-radius:50%} .nm-acc-point::before{width:30px;height:30px;background:rgba(243,243,240,.92);box-shadow:0 4px 18px rgba(0,0,0,.18)} .nm-acc-point::after{width:9px;height:9px;background:var(--sapin)} .nm-acc-point:hover::before,.nm-acc-point[aria-expanded="true"]::before{outline:2px solid #fff;outline-offset:3px} /* Sur une photo, un seul anneau se perd : blanc ET encre. */ .nm-acc-point:focus-visible{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 4px var(--encre)} .nm-acc-etiquette{position:absolute;z-index:2;left:calc(var(--x) + 26px);top:calc(var(--y) - 44px); width:max-content;min-width:230px;max-width:min(300px,calc(100% - 24px)); background:var(--fond-carte);padding:14px 16px;box-shadow:var(--ombre-l);font-size:13.5px;line-height:1.5} .nm-acc-etiquette.a-gauche{left:auto;right:calc(100% - var(--x) + 26px)} /* Repère bas dans la photo : l'étiquette s'ouvre vers le haut, sinon le cadre la rogne. */ .nm-acc-etiquette.vers-haut{top:auto;bottom:calc(100% - var(--y) - 44px)} .nm-acc-etiquette[hidden]{display:none} .nm-acc-etiquette b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:17px;line-height:1.25;margin-bottom:4px} .nm-acc-etiquette .ligne{display:flex;justify-content:space-between;gap:12px;color:var(--encre-2)} .nm-acc-etiquette .ligne .nm-num{color:var(--encre)} .nm-acc-etiquette a{display:inline-block;margin-top:8px;color:var(--sapin);font-weight:600} .nm-acc-etiquette a:hover{text-decoration:underline;text-underline-offset:4px} .nm-acc-les{display:flex;gap:3px;height:14px;margin:6px 0} .nm-acc-les i{flex:1} /* --- 2. Le nuancier ------------------------------------------------------- */ .nm-acc-nuancier{padding:22px clamp(16px,3vw,40px) 26px;border-block:1px solid var(--filet)} .nm-acc-nuancier ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:start} .nm-acc-nuancier a,.nm-acc-le-inerte{display:block} /* Filet intérieur : le blanc du nuancier se confond sinon avec le fond plâtre. */ .nm-acc-nuancier .bande{display:block;height:104px;box-shadow:inset 0 0 0 1px rgba(30,35,34,.08);transform:scaleY(.712);transform-origin:bottom} /* Le lé survolé monte de 74 à 104 px, par une transformation : animer `height` recalcule la mise en page à chaque image. Les 104 px sont réservés pour TOUS les lés, liens ou non : les libellés restent alignés. */ .nm-acc-nuancier a .bande{transition:transform var(--t-moyen)} .nm-acc-nuancier a:hover .bande,.nm-acc-nuancier a:focus-visible .bande{transform:none} .nm-acc-nuancier .nom{display:block;font-size:12.5px;margin-top:8px;color:var(--encre-2)} .nm-acc-nuancier .compte{display:block;font-size:11px;line-height:1.4;color:var(--encre-2)} .nm-acc-nuancier a:hover .nom{color:var(--encre)} /* --- 3. Le carnet de murs ------------------------------------------------- */ .nm-acc-carnet{padding:clamp(40px,6vw,88px) clamp(16px,3vw,40px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 24px} .nm-acc-carnet h2{grid-column:1/-1;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.08;max-width:22ch} .nm-acc-mur{margin:0} .nm-acc-mur img{width:100%;aspect-ratio:4/3;object-fit:cover} .nm-acc-mur figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--filet);font-size:14px} .nm-acc-mur figcaption a:hover{text-decoration:underline;text-underline-offset:4px} .nm-acc-mur .sous{color:var(--encre-2)} .nm-acc-mur em{font-style:normal;color:var(--encre-2);margin-left:auto} .nm-acc-carnet .m1{grid-column:1/8} .nm-acc-carnet .m1 img{aspect-ratio:16/10} .nm-acc-carnet .m2{grid-column:8/13;align-self:end} .nm-acc-carnet .m3{grid-column:1/5} .nm-acc-carnet .m4{grid-column:5/13} .nm-acc-carnet .m4 img{aspect-ratio:21/9} .nm-acc-carnet .m4--plein{grid-column:1/-1} /* --- 4. Les tableaux (et 5. les affiches, même gabarit) -------------------- */ .nm-acc-tab{background:var(--fond-alt);padding:clamp(40px,6vw,88px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start} .nm-acc-tab--affiches{background:var(--fond);border-top:1px solid var(--filet)} /* Affiches : la colonne de gauche porte formats et cadres, et suit la lecture */ .nm-acc-tab--affiches>div:first-child{position:sticky;top:110px} .nm-acc-af-rep{margin-top:30px;display:grid;gap:12px} .nm-acc-af-rep .nm-oeil{margin:6px 0 0} .nm-acc-af-formats{list-style:none;margin:0;padding:18px 20px;background:var(--fond-alt);display:flex;align-items:flex-end;gap:22px} .nm-acc-af-formats li{display:grid;justify-items:start;gap:4px;font-size:13px} .nm-acc-af-formats i{display:block;background:#fff;border:1px solid var(--filet);box-shadow:0 1px 2px rgba(30,35,34,.08)} .nm-acc-af-formats b{font-weight:500;margin-top:6px} .nm-acc-af-formats span{color:var(--encre-2);font-size:12.5px} .nm-acc-af-cadres{list-style:none;margin:0;padding:0;display:grid;gap:8px} .nm-acc-af-cadres li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;font-size:14px} .nm-acc-af-cadres i{width:26px;height:26px;background:#fff;border:4px solid;box-sizing:border-box} .nm-acc-af-cadres i.sans{border:1px dashed var(--encre-2)} .nm-acc-af-cadres .nm-num{color:var(--encre-2);font-size:13px} .nm-acc-af-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} @media(max-width:860px){.nm-acc-tab--affiches>div:first-child{position:static}} .nm-acc-tab h2,.nm-acc-af h2{font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.05;max-width:14ch} .nm-acc-tab p{color:var(--encre-2);max-width:42ch;margin-top:14px} .nm-acc-meuble{margin-top:28px;background:var(--fond);padding:18px 20px;display:grid;gap:10px} .nm-acc-meuble label{font-size:13px;color:var(--encre-2);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .nm-acc-meuble input{width:84px;padding:2px 0;border:0;border-bottom:1px solid var(--encre);border-radius:0;background:transparent;color:var(--encre); font:500 20px "IBM Plex Mono",ui-monospace,monospace} .nm-acc-meuble output{font-size:15px;line-height:1.5} .nm-acc-meuble output b{font-weight:500;white-space:nowrap} .nm-acc-video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-top:18px;background:var(--fond)} .nm-acc-echelle{position:relative;height:70px;margin-top:6px} /* Pas de transition : le croquis suit la saisie chiffre par chiffre, et une largeur animée recalculerait la mise en page à chaque image. */ .nm-acc-echelle .toile,.nm-acc-echelle .buffet{position:absolute;left:50%;transform:translateX(-50%);display:block} .nm-acc-echelle .toile{bottom:34px;width:40%;height:26px;background:var(--sapin)} .nm-acc-echelle .buffet{bottom:0;width:60%;height:22px;background:#B9B4AA} .nm-acc-rangee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px} .nm-acc-rangee figure{margin:0;background:var(--blanc)} .nm-acc-rangee img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:6%} .nm-acc-rangee figcaption{padding:12px 14px 14px;font-size:14px;display:grid;gap:2px;border-top:1px solid var(--filet)} .nm-acc-rangee figcaption a:hover{text-decoration:underline;text-underline-offset:4px} .nm-acc-rangee figcaption span{color:var(--encre-2);font-size:13px} .nm-acc-rangee .large{grid-column:span 2} .nm-acc-rangee .large img{aspect-ratio:2/1;object-fit:cover;padding:0} /* Affiches : des mises en scène carrées. En bandeau 2:1 on perdait la moitié de la photo, affiche comprise : toutes en carré, sans rognage ni marge. */ .nm-acc-tab--affiches .nm-acc-rangee .large{grid-column:auto} .nm-acc-tab--affiches .nm-acc-rangee img,.nm-acc-tab--affiches .nm-acc-rangee .large img{aspect-ratio:1/1;object-fit:cover;padding:0} .nm-acc-liens{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none} .nm-acc-liens a{display:inline-block;padding:8px 14px;border:1px solid var(--encre-2);border-radius:var(--r-s);font-size:14px} .nm-acc-liens a:hover{background:var(--encre);color:var(--fond);border-color:var(--encre)} /* --- 5. Les affiches arrivent --------------------------------------------- */ .nm-acc-af{padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;border-top:1px solid var(--filet)} .nm-acc-af p{color:var(--encre-2);max-width:44ch;margin-top:14px} .nm-acc-af .nm-nl{margin-top:18px;max-width:520px} /* Le formulaire du module, habillé comme le bouton creux de la maquette. */ .nm-acc-af .nm-nl-b{background:transparent;border-color:var(--encre);color:var(--encre)} .nm-acc-af .nm-nl-b:hover{background:var(--encre);border-color:var(--encre);color:var(--fond)} .nm-acc-af .nm-nl-b.est-occupe::after{border-color:rgba(30,35,34,.3);border-top-color:var(--encre)} .nm-acc-af .nm-nl input[type="email"]{background:var(--fond-carte);border-color:var(--encre-2)} /* Le module pâlit sa mention et colore ses refus pour un fond sombre : ici le fond est clair. */ .nm-acc-af .nm-nl-mention{opacity:1;color:var(--encre-2);font-size:12.5px} .nm-acc-af .nm-nl-retour{color:var(--encre)} .nm-acc-af .nm-nl-retour.est-refus{color:var(--alerte)} .nm-acc-cadres{display:flex;gap:20px;align-items:flex-end;justify-content:center;min-height:300px} .nm-acc-cadres i{display:block;background:var(--fond-carte);border:10px solid #fff;box-shadow:0 10px 30px rgba(30,35,34,.12)} .nm-acc-cadres .c1{width:24%;max-width:150px;aspect-ratio:5/7} .nm-acc-cadres .c2{width:34%;max-width:210px;aspect-ratio:21/29} .nm-acc-cadres .c3{width:21%;max-width:130px;aspect-ratio:13/18} /* --- 6. Votre pièce a déjà une couleur ------------------------------------ */ .nm-acc-couleur{border-top:1px solid var(--filet)} .nm-acc-couleur-tete{padding:clamp(36px,5vw,76px) clamp(16px,3vw,40px) 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end} .nm-acc-couleur-tete h2{font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.02;max-width:12ch} .nm-acc-couleur-tete p{color:var(--encre-2);max-width:44ch;font-size:17px;margin-bottom:6px} /* 14 px de marge haute : le lé choisi monte de 14 px sans être rogné. */ .nm-acc-roue{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:14px clamp(16px,3vw,40px) 0} .nm-acc-roue button{position:relative;height:200px;padding:0;border:0;border-radius:0;color:#fff;cursor:pointer;transition:transform var(--t-moyen)} /* Encre choisie sur la luminance (nm_acc_clair) : la maquette passait par mix-blend-mode, illisible sur le blanc et le beige. */ .nm-acc-roue button.est-clair{color:var(--encre);box-shadow:inset 0 0 0 1px rgba(30,35,34,.08)} .nm-acc-roue button[aria-pressed="true"]{transform:translateY(-14px)} /* Le choix se voit aussi sans le mouvement : un trait sous le lé. */ .nm-acc-roue button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;background:var(--encre)} .nm-acc-roue button:disabled{cursor:default;opacity:.4} .nm-acc-roue span{position:absolute;left:8px;bottom:8px;font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg)} .nm-acc-couleur-bas{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:28px;padding:30px clamp(16px,3vw,40px) clamp(40px,6vw,80px)} .nm-acc-couleur-bas.sans-depot{grid-template-columns:minmax(0,1fr)} .nm-acc-depot{border:1px dashed var(--encre-2);padding:22px;display:flex;flex-direction:column;gap:12px;align-self:start;background:var(--fond-carte)} .nm-acc-depot b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:20px;line-height:1.2} .nm-acc-depot p{font-size:14px;color:var(--encre-2)} .nm-acc-depot .nm-acc-btn{align-self:flex-start} .nm-acc-resultats h3{font-size:1.6rem;margin-bottom:16px} .nm-acc-resultats[aria-busy="true"] .nm-acc-grille{opacity:.5;transition:opacity var(--t-court)} .nm-acc-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .nm-acc-carte{margin:0} .nm-acc-carte img{width:100%;aspect-ratio:3/2;object-fit:cover} .nm-acc-pastilles{display:flex;gap:3px;margin-top:6px} .nm-acc-pastilles i{width:14px;height:6px} .nm-acc-carte figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13.5px} .nm-acc-carte figcaption a:hover{text-decoration:underline;text-underline-offset:4px} .nm-acc-carte figcaption span{white-space:nowrap;color:var(--encre-2)} .nm-acc-tout{margin-top:18px;font-size:14px} .nm-acc-tout[hidden]{display:none} .nm-acc-tout a{text-decoration:underline;text-underline-offset:4px} /* --- 7. Les quatre engagements -------------------------------------------- */ .nm-acc-engage{background:var(--encre);color:#DDE1DE;padding:44px clamp(16px,3vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:14px} .nm-acc-engage b{display:block;color:#fff;font-weight:500;margin-bottom:4px} .nm-acc-engage span{color:#A9B1AD} /* Le pied du site suit la bande sombre sans marge : deux aplats encre séparés par une bande plâtre ressemblaient à une page finie trop tôt. */ body.home .nm-pied{margin-top:0;border-top:1px solid rgba(255,255,255,.08)} @media(max-width:860px){ .nm-acc-haut,.nm-acc-couleur-tete,.nm-acc-couleur-bas,.nm-acc-tab,.nm-acc-af{grid-template-columns:minmax(0,1fr)} .nm-acc-haut{min-height:0} .nm-acc-photo{min-height:420px} .nm-acc-photo--symbole{min-height:160px} .nm-acc-carnet > *{grid-column:1/-1!important} .nm-acc-nuancier ul,.nm-acc-roue{grid-template-columns:repeat(6,minmax(0,1fr))} .nm-acc-roue{row-gap:18px} .nm-acc-roue button{height:110px} .nm-acc-grille,.nm-acc-rangee{grid-template-columns:repeat(2,minmax(0,1fr))} .nm-acc-engage{grid-template-columns:1fr 1fr} .nm-acc-cadres{min-height:220px} } /* Sur téléphone, l'étiquette ne flotte plus à côté du repère : elle se pose en bas de la photo, sur toute la largeur. */ @media(max-width:600px){ .nm-acc-etiquette,.nm-acc-etiquette.a-gauche,.nm-acc-etiquette.vers-haut{left:12px;right:12px;top:auto;bottom:12px;width:auto;min-width:0;max-width:none} } @media(prefers-reduced-motion:reduce){ .nm-acc *,.nm-acc-roue button{transition:none} } .nm-section{padding-block:clamp(52px,7vw,86px)} .nm-section--alt{background:var(--fond-alt)} .nm-tete{display:flex;flex-direction:column;gap:9px;margin-bottom:clamp(24px,3vw,38px)} @media(min-width:860px){ .nm-tete{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:30px} .nm-tete p.nm-intro{max-width:46ch} } /* ========================================================================== 9. FICHE PRODUIT ========================================================================== */ .nm-fi{display:grid;gap:clamp(26px,4vw,52px);padding-block:clamp(22px,3vw,38px);align-items:start} @media(min-width:960px){.nm-fi{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)}} /* ⚠️ L'ancienne galerie empilait les vues en colonne. La grille de la section 14 la remplace ; cette règle la contredisait et annulait les deux colonnes. */ .nm-galerie-princ{border-radius:var(--r-m);overflow:hidden;background:var(--fond-alt);aspect-ratio:4/5} .nm-galerie-princ img{width:100%;height:100%;object-fit:cover} .nm-vignettes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .nm-vignettes button{ padding:0;border:1px solid transparent;border-radius:var(--r-s);overflow:hidden; background:var(--fond-alt);aspect-ratio:1;cursor:pointer; transition:border-color var(--t-court),opacity var(--t-court);opacity:.72; } .nm-vignettes button[aria-current="true"]{border-color:var(--encre);opacity:1} .nm-vignettes button:hover{opacity:1} .nm-vignettes img{width:100%;height:100%;object-fit:cover} /* La colonne d'achat reste visible : décision prise dans les deux tiers du panel */ .nm-achat{align-self:start} @media(min-width:960px){.nm-achat{position:sticky;top:96px}} .nm-fi-titre{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px} /* ----- Produits liés et assistant du mur (lot 3), sur une ligne ----------- Sur le site d'origine, deux encarts de même hauteur empilés faisaient 926 px — un écran entier de défilement pour ce qui tient côte à côte. ⚠️ `auto-fit` et non `1fr 1fr` : quand l'un des deux manque, l'autre doit reprendre toute la largeur, pas laisser une colonne vide en face de lui. */ .nm-fi-duo{display:grid;gap:20px;align-items:start;margin-block:28px 0; grid-template-columns:repeat(auto-fit,minmax(420px,1fr))} /* Les deux blocs portaient chacun le rythme vertical d'une section de page. Dans une grille, c'est la grille qui l'impose, sinon on additionne les deux. */ .nm-fi-duo > .nm-cpl{margin:0;height:100%} .nm-fi-duo > .nm-section{padding-block:0} .nm-fi-duo .enrob{max-width:none;padding-inline:0} /* En colonne étroite, le titre et son introduction ne tiennent plus l'un à côté de l'autre : on les remet l'un sous l'autre à toute largeur d'écran. */ .nm-fi-duo .nm-tete{flex-direction:column;align-items:flex-start;gap:8px; margin-bottom:18px} .nm-fi-duo .nm-tete p.nm-intro{max-width:none} /* Le rythme de 86 px est celui d'une page d'accueil, où chaque section est une respiration. Sur une fiche, où l'on descend pour décider, il fait défiler dans le vide — 172 px mesurés entre deux encarts voisins. */ body.single-product .nm-section{padding-block:clamp(30px,3.6vw,50px)} /* ----- Page d'accueil : le même calcul, en moins sévère --------------------- Les sections ne laissent aucun vide entre elles — mesuré, elles se touchent. Le blanc vient de l'ADDITION : 86 px de marge basse plus 86 px de marge haute font 172 px entre deux blocs de contenu. Ramené à 64, soit 128 px : assez pour que l'alternance des fonds respire, pas assez pour donner l'impression que la page est finie. */ body.home .nm-section{padding-block:clamp(40px,4.6vw,64px)} .nm-fi-prix{font-size:26px;margin-block:4px 2px} .nm-fi-prix del{font-size:18px;color:var(--encre-2);opacity:.65;margin-right:9px} /* 🔥 Le franco rappelé SOUS le prix, pas seulement dans le bandeau. Un seul concurrent mondial le fait correctement, et c'est une recommandation Baymard. */ .nm-franco{font-size:13px;color:var(--sapin);margin-bottom:20px} /* Sélecteurs : BOUTONS, jamais de menu déroulant. 71 % des sites de référence utilisent des boutons ; un menu masque la disponibilité jusqu'au clic. */ .nm-choix{display:flex;flex-direction:column;gap:9px;margin-bottom:20px} .nm-choix-tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px} .nm-choix-tete .lab{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2)} .nm-choix-tete .lab b{color:var(--encre);font-weight:500;text-transform:none;letter-spacing:.01em} .nm-choix-tete a{font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--encre-2)} .nm-choix-tete a:hover{color:var(--sapin)} .nm-opts{display:flex;flex-wrap:wrap;gap:8px} .nm-opt{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px; padding:9px 13px;border:1px solid var(--filet);border-radius:var(--r-s); background:var(--fond-carte);cursor:pointer; transition:border-color var(--t-court),background var(--t-court),transform var(--t-court); } .nm-opt:hover{border-color:var(--encre-2)} .nm-opt[aria-pressed="true"]{border-color:var(--encre);background:var(--encre);color:var(--fond)} .nm-opt .dim{font-size:14px;font-family:"IBM Plex Mono",monospace;letter-spacing:-.02em} /* 🔥 Le prix sur CHAQUE bouton de taille : supprime le clic de découverte, et un prix qui monte devient une information de dimension, pas une surprise. */ .nm-opt .px{font-size:11.5px;font-family:"IBM Plex Mono",monospace;opacity:.72} .nm-opt[disabled]{opacity:.42;cursor:not-allowed;text-decoration:line-through} .nm-opt--coul{padding:0;width:34px;height:34px;border-radius:50%;overflow:hidden} .nm-opt--coul[aria-pressed="true"]{outline:2px solid var(--encre);outline-offset:2px;border-color:transparent} .nm-rien-choisi{font-size:13px;color:var(--sapin);min-height:20px} /* Le bandeau d'attributs sous l'ajout au panier : six arguments techniques scannables en deux secondes, pile au moment de la décision. */ .nm-attrs{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:20px; background:var(--filet-clair);border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden; } .nm-attr{background:var(--fond-carte);padding:11px 13px;display:flex;gap:9px;align-items:flex-start} .nm-attr svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--sapin);fill:none;stroke-width:1.5} .nm-attr span{font-size:13px;line-height:1.42} .nm-attr b{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500} /* Accordéons techniques, en sous-rubriques nommées */ .nm-acc{border-top:1px solid var(--filet);margin-top:26px} .nm-acc details{border-bottom:1px solid var(--filet)} .nm-acc summary{ padding:15px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between; align-items:center;gap:14px;font-size:14.5px;font-weight:500;letter-spacing:.01em; } .nm-acc summary::-webkit-details-marker{display:none} .nm-acc summary::after{content:"";width:9px;height:9px;border-right:1.4px solid var(--encre-2);border-bottom:1.4px solid var(--encre-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-court)} .nm-acc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .nm-acc .corps{padding-bottom:18px;font-size:15px;line-height:1.66;color:var(--encre)} .nm-acc .corps p+p{margin-top:11px} .nm-acc .corps ul{margin:11px 0 0;padding-left:18px} .nm-acc .corps li{margin-bottom:5px} /* ⚠️ Ni cadre, ni fond de cellule : un encadré complet donne un air de tableau de caractéristiques techniques, et ces lignes se lisent mieux comme une liste. Seuls les filets horizontaux restent — ce sont eux qui alignent l'œil d'une valeur à l'autre. */ .nm-specs{display:grid;margin-top:12px} .nm-spec{ padding:10px 2px;display:grid;grid-template-columns:150px 1fr;gap:12px; font-size:13.5px;border-bottom:1px solid var(--filet-clair); } .nm-spec:last-child{border-bottom:0} .nm-spec dt{color:var(--encre-2)} .nm-spec dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:13px} /* ========================================================================== 10. RAIL DE FILTRES Facettes déduites des données, en paramètres d'URL : partageables et indexables, sans script. Le jour où un attribut est alimenté, il apparaît. ========================================================================== */ .nm-boutique{display:grid;gap:clamp(20px,3vw,40px)} @media(min-width:1000px){.nm-boutique{grid-template-columns:254px minmax(0,1fr)}} .nm-rail{display:flex;flex-direction:column;gap:22px;align-self:start} /* ⚠️ Ni `sticky`, ni `max-height`, ni `overflow-y` sur le rail. Le collage à l'écran oblige à plafonner la hauteur, le plafond fait apparaître une barre de défilement interne, et cette barre cache la fin des filtres à qui ne pense pas à faire défiler DANS la colonne. Deux défilements sur la même page, c'est un de trop. Le rail suit simplement la page, comme chez Woodmart. */ .nm-facette h4{font-size:11px;font-family:"Figtree",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px} .nm-facette ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px} .nm-facette label{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;padding:3px 0} .nm-facette input{accent-color:var(--sapin);width:15px;height:15px} .nm-facette .nb{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--encre-2)} /* Nuance : une pastille de la teinte du nuancier, à la place de rien. */ .nm-facette .nm-teinte{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(30,35,34,.14)} /* Thème : des liens (chaque thème a sa page), pas des cases à cocher. */ .nm-facette-themes a{display:flex;align-items:center;gap:9px;font-size:14px;padding:4px 0;color:var(--encre);text-decoration:none} .nm-facette-themes a:hover span:first-child{text-decoration:underline;text-underline-offset:3px} .nm-facette-themes a.est-actif{font-weight:600;color:var(--sapin)} .nm-jetons{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .nm-jeton{ display:inline-flex;align-items:center;gap:7px;padding:5px 11px; border:1px solid var(--filet);border-radius:99px;background:var(--fond-carte);font-size:13px; } .nm-jeton button{border:0;background:0;cursor:pointer;line-height:1;font-size:15px;color:var(--encre-2)} .nm-jeton button:hover{color:var(--sapin)} /* Le rail : replié derrière un bouton sur petit écran, toujours ouvert au-delà */ .nm-rail-boite > summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px; padding:12px 16px;border:1px solid var(--filet);border-radius:var(--r-s); background:var(--fond-carte);font-size:14px;font-weight:500;letter-spacing:.02em; margin-bottom:16px; } .nm-rail-boite > summary::-webkit-details-marker{display:none} .nm-rail-boite > summary::before{ content:"";width:15px;height:15px;flex:none; background:linear-gradient(var(--encre),var(--encre)) 0 3px/15px 1.4px no-repeat, linear-gradient(var(--encre),var(--encre)) 0 7.5px/11px 1.4px no-repeat, linear-gradient(var(--encre),var(--encre)) 0 12px/7px 1.4px no-repeat; } .nm-rail-nb{ margin-left:auto;background:var(--sapin);color:#fff;font-size:11px; min-width:19px;height:19px;line-height:19px;text-align:center;border-radius:10px; } @media(min-width:1000px){ .nm-rail-boite > summary{display:none} .nm-rail-boite{display:block} } /* ========================================================================== 11. PIED ========================================================================== */ .nm-pied{background:var(--encre);color:var(--fond);padding-block:clamp(44px,6vw,70px) 26px;margin-top:clamp(50px,7vw,90px)} .nm-pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px} .nm-pied h4{font-size:11px;font-family:"Figtree",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:13px} .nm-pied ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .nm-pied a{font-size:14px;opacity:.9} .nm-pied a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} /* --- Moyens de paiement ------------------------------------------------- 🚨 `.nm-pied ul` (0,1,1) bat `.nm-paiements-liste` (0,1,0) : sans le préfixe, la bande héritait du `flex-direction:column` des colonnes du pied et les cinq marques s'empilaient les unes sous les autres. Aucune erreur, juste une colonne de logos. Chaque marque a sa propre proportion — Visa est un long mot, Mastercard empile ses disques sur son nom — donc une pastille de taille commune, et la hauteur réglée marque par marque pour que les cinq pèsent le même poids à l'œil. Apple Pay arrive avec son propre fond, elle se pose nue. ------------------------------------------------------------------------ */ .nm-paiements{ margin-top:38px;padding-top:22px;border-top:1px solid rgba(243,243,240,.16); display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; } .nm-paiements-titre{ font-family:"Figtree",sans-serif;font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;opacity:.62; } .nm-pied .nm-paiements-liste, .nm-paiements-liste{ display:flex;flex-direction:row;flex-wrap:wrap;align-items:center; gap:8px;margin:0;padding:0;list-style:none; } .nm-paiements-liste li{ background:var(--blanc);border-radius:var(--r-s); width:54px;height:34px;display:flex;align-items:center;justify-content:center; } .nm-paiements-liste img{max-width:40px;max-height:24px;width:auto;height:auto;display:block} .nm-paiements-liste li[data-marque="mastercard"] img{max-height:28px;max-width:34px} .nm-paiements-liste li[data-marque="paypal"] img{max-height:15px} .nm-paiements-liste li[data-marque="visa"] img{max-height:15px} /* Apple Pay : pas de pastille, la marque en porte déjà une — Apple interdit de la retoucher, et deux contours l'un dans l'autre se voient. */ .nm-paiements-liste li.nm-paiement--nu{background:none;width:auto;height:34px} .nm-paiements-liste li.nm-paiement--nu img{max-width:none;max-height:34px} .nm-paiements-liste li[data-marque="cb"] img{max-height:22px} /* Transporteurs : même pastille, élargie à la mesure du mot. */ .nm-transporteurs .nm-paiements-liste li{width:auto;min-width:54px;padding:0 10px} .nm-transporteurs .nm-paiements-liste img{height:16px;width:auto;max-width:none;max-height:none} .nm-transporteurs .nm-paiements-liste li[data-transporteur="gls"] img{height:15px} .nm-transporteurs .nm-paiements-liste li[data-transporteur="dpd"] img{height:20px} /* Pied de page : paiement et livraison côte à côte, empilés sur mobile. */ .nm-pied-bandes{display:flex;flex-wrap:wrap;gap:0 48px;margin-top:38px;padding-top:22px;border-top:1px solid rgba(243,243,240,.16)} .nm-pied-bandes .nm-paiements{margin-top:0;padding-top:0;border-top:0} /* Fiche produit : la bande sous la date de livraison, sur fond clair. */ .nm-fp .nm-transporteurs{margin-top:14px;padding-top:0;border-top:0} .nm-fp .nm-transporteurs .nm-paiements-liste li{border:1px solid var(--filet)} /* Panier et commande : le fond est clair, la pastille blanche s'y perdrait. */ .woocommerce .nm-paiements{border-top-color:var(--filet-clair);justify-content:center;margin-top:26px} .woocommerce .nm-paiements-titre{opacity:.72} .woocommerce .nm-paiements-liste li{border:1px solid var(--filet-clair)} .woocommerce .nm-paiements-liste li.nm-paiement--nu{border:0} .nm-pied-bas{margin-top:38px;padding-top:20px;border-top:1px solid rgba(243,243,240,.16);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:12.5px;opacity:.72} /* La bande des paiements porte déjà le filet : deux traits l’un sur l’autre. */ .nm-paiements + .nm-pied-bas{margin-top:18px;padding-top:0;border-top:0} .nm-lettre{display:flex;gap:8px;margin-top:14px;max-width:340px} .nm-lettre input{flex:1;min-width:0;padding:11px 13px;border:1px solid rgba(243,243,240,.28);background:transparent;color:var(--fond);border-radius:var(--r-s);font-size:14px} .nm-lettre input::placeholder{color:rgba(243,243,240,.5)} .nm-lettre button{padding:11px 18px;border:0;border-radius:var(--r-s);background:var(--fond);color:var(--encre);font-size:13px;font-weight:500;cursor:pointer;letter-spacing:.04em;text-transform:uppercase} .nm-lettre button:hover{background:var(--sapin);color:#fff} /* ========================================================================== 12. ANIMATIONS — depuis un état VISIBLE au repos Un bloc parqué à opacity:0 en attente d'un observateur ne s'affiche pas dans la première image ni pour qui a coupé les animations. ========================================================================== */ @media(prefers-reduced-motion:no-preference){ .nm-monte{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1)} .nm-monte.est-vu{opacity:1;transform:none} .nm-monte:nth-child(2){transition-delay:.06s} .nm-monte:nth-child(3){transition-delay:.12s} .nm-monte:nth-child(4){transition-delay:.18s} /* Filet de sécurité : si le script ne tourne pas, tout redevient visible. */ html.sans-js .nm-monte{opacity:1;transform:none} } /* ========================================================================== 13. ADAPTATION AUX ÉCRANS ========================================================================== */ @media(max-width:1100px){ /* Six onglets entre 860 et 1100 px : on resserre plutôt que de laisser un intitulé se casser sur trois lignes. */ .nm-nav{gap:clamp(10px,1.6vw,20px)} .nm-nav > li > a{font-size:13px;letter-spacing:.02em} ul.products{grid-template-columns:repeat(2,1fr)} .nm-mega-grille{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)) 260px} /* 🚨 Après `.nm-mega-grille` : les deux sélecteurs ont la même spécificité, donc c'est l'ordre qui tranche. Le méga « Catégories » passe à trois colonnes et ne réserve pas de piste pour une carte qu'il n'a pas. */ .nm-mega-cats{grid-template-columns:repeat(3,minmax(0,1fr))} .nm-pied-grille{grid-template-columns:1fr 1fr} } @media(max-width:860px){ .nm-entete-int{grid-template-columns:auto 1fr;min-height:62px} /* 🚨 Le défilement horizontal de la nav n'est appliqué QUE sous ce palier : au-dessus, il rognerait le méga-menu. */ .nm-nav{display:none} /* 🚨 Masquer la liste ne suffit pas : le