/** Shopify CDN: Minification failed Line 353:0 Unexpected "`" Line 353:20 Unterminated string token Line 402:71 Unterminated string token Line 403:74 Unterminated string token Line 404:65 Unterminated string token **/ /* ========================================================================== MAISON ALCÔVE — FICHE PRODUIT ET COLLECTION ========================================================================== PORTÉ DEPUIS `design/maquettes/src/_style.css` LE 04/08/2026, SANS RÉÉCRITURE. POURQUOI SANS RÉÉCRITURE. Les trois maquettes sont validées par le fondateur et contrôlées à la mesure : zéro débordement horizontal élément par élément à 320 / 360 / 390 / 768 / 1440 px, 65 couples de contraste calculés sans échec, pictogrammes présents partout. Réécrire ces règles « plus proprement » dans le thème remplacerait un résultat mesuré par un résultat supposé. CE QUI A ÉTÉ RETIRÉ AU PASSAGE : le bloc de tokens (§0 et §1 de la source). Il vit dans `tokens.css`, où ses valeurs ont été alignées une à une sur la maquette et vérifiées au navigateur — 135 tokens, 0 divergence, 0 valeur vide. C'est ce contrôle qui a trouvé le commentaire mal fermé qui avalait `--wf-accent` en production. POURQUOI QUATRE FICHIERS ET PAS UN. La découpe suit la PORTÉE, pas le plafond de `theme-check` : `alcove-catalogue.css` ne sert que la fiche produit et la collection, et il ne part donc pas sur l'accueil. Les trois autres sont globaux et se chargent ensemble, dans l'ordre déclaré ici — l'ordre est signifiant, les cascades de §7 s'appuient sur §2-§6. AUCUNE DÉPENDANCE, AUCUNE RESSOURCE DISTANTE, aucune @import : ces feuilles ne référencent que des tokens et les polices auto-hébergées de `assets/`. ========================================================================== */ /* ========================================================================== 12. FICHE PRODUIT ET COLLECTION Ajouté après l'accueil, sur les mêmes tokens. Aucune valeur nouvelle. ========================================================================== */ /* --- 12.1 LA GALERIE. Huit images, et une règle : la vignette sélectionnée se dit par un FILET épais + un décalage, jamais par la seule couleur. La grande image porte le masque d'arche ; les vignettes sont carrées. */ .pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--wf-s-12); align-items: start; padding-block: var(--wf-s-10) var(--wf-section); } @media (max-width: 1000px) { .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--wf-s-9); } } .gal { display: grid; gap: var(--wf-s-5); position: sticky; top: 92px; } @media (max-width: 1000px) { .gal { position: static; } } .gal__grande { position: relative; } .gal__grande .arche { aspect-ratio: 4 / 5; } .gal__vign { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--wf-s-4); } @media (max-width: 620px) { .gal__vign { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gal__vign button { position: relative; aspect-ratio: 1; overflow: hidden; border: var(--wf-bw-hair) solid var(--wf-rule); border-radius: var(--wf-r-2); background: var(--wf-ground-sunk); padding: 0; transition: border-color var(--wf-dur-1) var(--wf-ease-out), transform var(--wf-dur-1) var(--wf-ease-out); } .gal__vign button img { width: 100%; height: 100%; object-fit: cover; } .gal__vign button:hover { border-color: var(--wf-border); transform: translateY(-1px); } .gal__vign button[aria-current="true"] { border-color: var(--wf-accent); border-width: var(--wf-bw); } .gal__vign button[aria-current="true"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--wf-accent); } /* --- 12.2 LA COLONNE D'ACHAT. L'ordre est celui de docs/07 §5.4 et il n'est pas rediscuté : titre → sous-titre → prix → ligne de coût → coloris → quatre conditions → « keep it » → bouton → « no reviews ». */ .achat { display: grid; gap: var(--wf-s-7); } .achat__fil { display: flex; flex-wrap: wrap; gap: var(--wf-s-3); font-size: var(--wf-t--2); color: var(--wf-ink-quiet); } .achat__fil a:hover { color: var(--wf-ink); } .achat__titre { font-family: var(--wf-face-display); font-size: var(--wf-t-5); line-height: var(--wf-lh-title); letter-spacing: var(--wf-ls-title); } .achat__prix { display: flex; align-items: baseline; gap: var(--wf-s-5); flex-wrap: wrap; } .achat__prix b { font-family: var(--wf-face-title); font-size: var(--wf-t-6); font-weight: var(--wf-w-regular); line-height: var(--wf-lh-flat); font-variant-numeric: tabular-nums; } .achat__prix span { font-size: var(--wf-t--1); color: var(--wf-ink-quiet); } /* LA LIGNE DE COÛT, directement sous le prix (docs/14 §6.2, ligne 3). C'est le seul endroit du site où une donnée chiffrée touche un prix : elle est donc encadrée d'un filet et porte sa source, sans exception. */ .cout-ligne { display: grid; gap: var(--wf-s-2); padding: var(--wf-s-5) var(--wf-s-6); background: var(--wf-ground-sunk); border-left: var(--wf-bw) solid var(--wf-accent); border-radius: var(--wf-r-2); } .cout-ligne b { font-size: var(--wf-t-0); font-weight: var(--wf-w-semibold); font-variant-numeric: tabular-nums; } .cout-ligne span { font-size: var(--wf-t--2); color: var(--wf-ink-quiet); line-height: var(--wf-lh-small); } .conditions { display: grid; gap: var(--wf-s-4); } .conditions li { display: flex; align-items: flex-start; gap: var(--wf-s-4); font-size: var(--wf-t--1); color: var(--wf-ink-muted); } .conditions li::before { content: ""; width: 12px; height: 7px; margin-top: 0.42em; flex: none; border: var(--wf-bw) solid var(--wf-accent); border-top: 0; border-right: 0; transform: rotate(-45deg); } /* --- 12.3 LE GUIDE DE TAILLE — un dessin de SPECIFICATION, pas une vignette. Il traite la premiere cause de retour evitable (« ce n'est pas la taille que je croyais »), donc il se dessine avec la rigueur du tableau qui le suit. Trois regles le gouvernent, et aucune n'est negociable. (a) L'ECHELLE EST VRAIE. Le viewBox est gradue EN CENTIMETRES : un trait de 130 unites EST 130 cm. Le rectangle, la bande d'Oak et la silhouette assise sont au meme facteur, rien n'est ajuste a l'oeil. Sources des cotes, jamais deduites : 180 x 130 cm content/produits/rowan-heated-throw.md 180 x 160 cm content/produits/oak-heated-throw.md « Same length, 30 cm more width » — d'ou la cote CHAINEE 130 + 30, qui rend l'ecart lisible d'un coup d'oeil et porte l'argument du niveau superieur sans qu'une phrase ait a le dire. (b) LE DESSIN EST PLAFONNE A 320 px, ET C'EST STRUCTUREL. Le texte d'un SVG suit l'echelle du viewBox : elargir le dessin grossit les cotes, le retrecir les rend illisibles. A 320 px pour 202 unites le facteur vaut 1,584 et une cote de 8 unites rend a 12,7 px — au-dessus du plancher de 12 px, A TOUTES LES LARGEURS, parce que le bloc reserve au moins 320 px partout (voir le retrait de padding sous 620 px). Ce plafond ne se retire pas : il est la seule chose qui garantisse la lisibilite des chiffres. (c) LA LARGEUR DU BLOC SE MESURE, ELLE NE SE DEVINE PAS. La version precedente posait deux colonnes sur une media query de fenetre ; a 1440 px le bloc ne fait pourtant que 520 px (il est dans la colonne gauche de .spec__grille), la legende tombait a 94 px et « shoulder to ankle on a seated adult » s'y brisait sur six lignes. Une container query interroge le BLOC et non la fenetre, donc le defaut ne peut pas revenir si le bloc est deplace. C'est du CSS natif : aucune dependance, conforme a la regle du theme. */ /* LE PANNEAU EST LE CONTENEUR, LA GRILLE EST DEDANS. Un element ne peut pas etre son propre conteneur de requete : une @container posee sur .taille elle-meme interroge l'ancetre, pas le bloc, et ne s'applique jamais. D'ou le couple panneau (.taille, qui porte container-type) / grille (.taille__corps, qui est interrogee). Verifie : sans ce dedoublement, dessin et legende se superposaient dans la meme cellule a 768 px. */ .taille { container-type: inline-size; padding: var(--wf-s-9) var(--wf-s-8); background: var(--wf-ground-raised); border: var(--wf-bw-hair) solid var(--wf-rule); border-radius: var(--wf-r-3); } /* Sous 620 px de FENETRE le bloc doit encore offrir 320 px de dessin : 358 - 2x16 - 2x1 = 324. D'ou le retrait de la gouttiere interne. */ @media (max-width: 620px) { .taille { padding: var(--wf-s-8) var(--wf-s-5); } } .taille__corps { display: grid; gap: var(--wf-s-7); align-content: center; } .taille__t { margin: 0; } .taille__fig { margin: 0; } .taille__svg { display: block; width: 100%; max-width: 320px; height: auto; } /* DEUX COLONNES SEULEMENT SI LA LEGENDE Y GAGNE. Le seuil n'est pas choisi « pour faire deux colonnes » : il est calcule pour que la colonne de texte reste au-dessus de 320 px, soit 320 (dessin) + 56 (gouttiere) + 320 = 696 px, arrondi a 44rem. Essai a 34rem : a 768 px la legende tombait a 265 px et « The Oak Heated Throw is 180 x 160 cm » se coupait en laissant « cm » seul sur sa ligne — une cote fendue, ce qui est exactement le defaut qu'on repare. Mesure du bloc : 1440 px -> 454 · 768 px -> 641 · 390 px -> 324. Les trois empilent, et c'est le bon rendu ; la branche a deux colonnes protege le jour ou le bloc sera pose sur toute la largeur. */ @container (min-width: 44rem) { .taille__corps { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "fig titre" "fig liste"; column-gap: var(--wf-s-10); row-gap: var(--wf-s-6); } .taille__t { grid-area: titre; align-self: end; } .taille__fig { grid-area: fig; align-self: center; } .taille__l { grid-area: liste; align-self: start; } } .taille__l { display: grid; gap: var(--wf-s-6); } .taille__l dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wf-s-4) var(--wf-s-6); font-size: var(--wf-t--1); line-height: var(--wf-lh-small); } .taille__l dt { color: var(--wf-ink-quiet); } .taille__l dd { margin: 0; font-variant-numeric: tabular-nums; } /* SOUS 26rem DE BLOC, L'INTITULE PASSE AU-DESSUS DE SA VALEUR. En deux colonnes a cette largeur, « If you want more » mange 100 px et il n'en reste que 204 : « The Oak Heated Throw is 180 x 160 cm » se coupait entre 180 et x 160, une cote fendue en deux lignes. Empilee, la valeur dispose de toute la mesure. Le couple dt/dd reste un couple : c'est la presentation qui change, pas la semantique — la liste de definition est intacte pour un lecteur d'ecran. */ @container (max-width: 26rem) { .taille__l dl { grid-template-columns: minmax(0, 1fr); gap: var(--wf-s-2); } .taille__l dt + dd { margin-bottom: var(--wf-s-4); } .taille__l dd:last-of-type { margin-bottom: 0; } } /* LA CLE DU DESSIN. Un dessin cote se lit avec sa legende : les deux pastilles reprennent EXACTEMENT les deux remplissages du SVG. */ .taille__cle { display: grid; gap: var(--wf-s-3); padding-top: var(--wf-s-6); border-top: var(--wf-bw-hair) solid var(--wf-rule); font-size: var(--wf-t--2); color: var(--wf-ink-muted); } .taille__cle li { display: flex; align-items: center; gap: var(--wf-s-4); } .taille__pastille { flex: none; width: 22px; height: 14px; border-radius: var(--wf-r-1); border: var(--wf-bw-hair) solid var(--wf-border); } .taille__pastille--ce { background: var(--wf-ground-sunk); } .taille__pastille--oak { border-style: dashed; background: repeating-linear-gradient(45deg, var(--wf-border) 0 1px, transparent 1px 5px); } /* LE DESSIN LUI-MEME. AUCUNE COULEUR EN DUR : tout passe par les tokens, donc le schema se rhabille avec la peau que le fondateur retiendra sans qu'une ligne de HTML bouge. Ce n'est pas une precaution de style, c'est la condition posee au ticket. CONTRASTES, RECALCULES LE 04/08 APRES LE RELEVE DES SOLS (--wf-ground-raised #FFFCF6, remplissage --wf-ground-sunk #ECE4D4) : chiffres de cote --wf-ink 16,18:1 seuil 4,5 (WCAG 1.4.3) lignes et fleches --wf-ink-quiet 6,73:1 seuil 3,0 (WCAG 1.4.11) contour et hachure --wf-border 4,97:1 seuil 3,0 contour sur le remplissage 4,03:1 seuil 3,0 silhouette --wf-ink-muted 6,79:1 seuil 3,0 Tout element PORTEUR D'INFORMATION est donc au-dessus du seuil, y compris apres le changement de sols. --wf-rule (1,68:1 sur ce fond) reste ECARTE du dessin pour cette raison ; il ne sert que le cadre du panneau, qui n'est pas porteur. Le remplissage du plaid (1,23:1) est decoratif : c'est le CONTOUR qui porte la forme, jamais la teinte seule. Toute nouvelle peau doit refaire ce calcul avant d'etre validee. */ .taille-obj { fill: var(--wf-ground-sunk); stroke: var(--wf-border); } .taille-oak { fill: none; stroke: var(--wf-border); stroke-dasharray: 4 3; } .taille-hach { stroke: var(--wf-border); } .taille-cote { fill: none; stroke: var(--wf-ink-quiet); stroke-linecap: round; } .taille-fleche { fill: var(--wf-ink-quiet); } .taille-siege { fill: none; stroke: var(--wf-border); stroke-linecap: round; } .taille-corps { fill: var(--wf-ground-raised); stroke: var(--wf-ink-muted); stroke-linejoin: round; } .taille-chiffre { fill: var(--wf-ink); font-family: var(--wf-face-text); font-size: 8px; font-weight: var(--wf-w-medium); font-variant-numeric: tabular-nums; letter-spacing: 0; } @media (forced-colors: active) { .taille-obj, .taille-corps { fill: Canvas; } .taille-obj, .taille-oak, .taille-hach, .taille-cote, .taille-siege, .taille-corps { stroke: CanvasText; } .taille-fleche { fill: CanvasText; } .taille-chiffre { fill: CanvasText; } } /* --- 12.4 LA COLLECTION. Le bandeau de tête porte une image et le compte réel des produits — jamais un compte arrondi ni un « + de ». */ .tete-coll { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--wf-s-13) var(--wf-s-11); } .tete-coll__vis { position: absolute; inset: 0; z-index: -2; } .tete-coll__vis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } .tete-coll::after { content: ""; position: absolute; inset: 0; z-index: -1; /* LE PLATEAU DU VOILE COURT JUSQU'A 64 %, soit AU-DELA du bord droit du texte (44 rem sur une grille de 75 rem = 58 %). Calcule, pas estime : a alpha 0.94 sur une photographie noire, le fond composite vaut #E3DACB et --wf-ink-muted y mesure 6.19:1. Le reglage precedent descendait a 0.73 sous le chapeau, soit 3.68:1 — sous le seuil AA. Voir §10. */ background: linear-gradient(92deg, var(--ma-tint-warm) 0 64%, color-mix(in srgb, var(--wf-ground) 52%, transparent) 86%, color-mix(in srgb, var(--wf-ground) 14%, transparent) 100%); } .tete-coll__in { display: grid; gap: var(--wf-s-6); max-width: 44rem; } @media (max-width: 760px) { .tete-coll::after { background: var(--ma-tint-warm); } } /* Les filtres : VISIBLES, jamais derrière un tiroir sur grand écran (docs/07). Un groupe de boutons à état, avec le compte de chaque valeur. */ .filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wf-s-4); padding-block: var(--wf-s-6); border-block: var(--wf-bw-hair) solid var(--wf-rule); } .filtres__g { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wf-s-3); } .filtres__t { font-size: var(--wf-t--2); font-weight: var(--wf-w-semibold); letter-spacing: var(--wf-ls-eyebrow); text-transform: uppercase; color: var(--wf-ink-quiet); } .filtre { display: inline-flex; align-items: center; gap: var(--wf-s-3); min-height: 36px; padding: 0 var(--wf-s-5); border: var(--wf-bw-hair) solid var(--wf-border); border-radius: var(--wf-r-2); font-size: var(--wf-t--1); font-weight: var(--wf-w-medium); color: var(--wf-ink-muted); transition: border-color var(--wf-dur-1) var(--wf-ease-out), background-color var(--wf-dur-1) var(--wf-ease-out), color var(--wf-dur-1) var(--wf-ease-out); } .filtre:hover { background: var(--wf-ground-raised); color: var(--wf-ink); } .filtre b { font-weight: var(--wf-w-regular); color: var(--wf-ink-quiet); font-variant-numeric: tabular-nums; } .filtre[aria-pressed="true"] { background: var(--wf-accent); border-color: var(--wf-accent); color: var(--wf-ground-raised); } .filtre[aria-pressed="true"] b { color: var(--wf-ground-raised); opacity: 0.72; } .filtres__n { margin-left: auto; font-size: var(--wf-t--1); color: var(--wf-ink-quiet); font-variant-numeric: tabular-nums; } /* « Effacer les filtres ». Il n'existe QUE s'il y a quelque chose à effacer — un contrôle toujours présent et souvent inopérant apprend à l'œil à ne plus le voir. Cible de 44 px comme tous les contrôles (2.5.8). */ .filtres__raz { min-height: var(--wf-tap); display: inline-flex; align-items: center; font-size: var(--wf-t--1); } @media (max-width: 760px) { .filtres { flex-direction: column; align-items: stretch; } .filtres__n { margin-left: 0; } .filtres__raz { align-self: flex-start; } } /* L'ÉTAT VIDE. Il n'est pas une phrase d'excuse : il redit le total, nomme la sortie et la rend cliquable. Bordé en pointillé — le même langage que les cadres d'attente : ce qui est là sans contenu se signale, il ne se déguise pas en section normale. */ .vide { display: grid; justify-items: start; max-width: var(--wf-measure); margin-inline: auto; padding: var(--wf-s-11) var(--wf-s-8); text-align: left; border: var(--wf-bw-hair) dashed var(--wf-rule-strong); border-radius: var(--wf-r-3); } /* ══ CE QU'ON NE SAIT PAS — LE PARTI PRIS A CHANGÉ LE 04/08 ═══════════════ Le site portait un JETON D'ALERTE ambré sur chaque valeur manquante. C'était un outil d'atelier : il criait pour qu'aucune valeur d'attente n'atteigne la mise en ligne. Décision du fondateur : « pour les infos que t'as pas bah mets pas le champ aussi dans les specs. » Il a raison sur le fond — dans un tableau de spécification, un jeton ambré met en avant la seule chose qu'on ne sait pas, au milieu de dix qu'on sait. DEUX RÉGIMES, ET LA FRONTIÈRE EST NETTE : 1. UNE LIGNE DE SPÉCIFICATION SANS VALEUR N'EXISTE PAS. Voir `.specs` ci-dessous : la cellule vide retire la ligne, sans script. 2. UNE CASE D'UN TABLEAU DE COMPARAISON, ELLE, RESTE — la ligne existe pour les autres colonnes, et la vider casserait la comparaison. Elle dit alors « Not published yet », en toutes lettres et à voix basse : c'est un FAIT sur l'état de notre information, pas une alerte. `.jeton-vide` reste défini : il sert encore aux cadres d'attente d'ACTIFS (photographies commandées et non livrées), qui sont un tout autre sujet — là, le cadre doit se voir. */ .jeton-vide { display: inline-block; padding: 0 var(--wf-s-3); background: var(--wf-warn-tint); border: var(--wf-bw-hair) dashed var(--wf-warn); border-radius: var(--wf-r-1); color: var(--wf-warn); font-size: var(--wf-t--2); font-weight: var(--wf-w-medium); letter-spacing: var(--wf-ls-small); } /* « Not published yet ». Une phrase, pas un signal : encre discrète, italique, aucun cadre. Elle ne doit pas attirer l'œil plus que les chiffres voisins — elle doit simplement empêcher qu'on lise une case vide comme un zéro. */ .non-publie { font-style: italic; color: var(--wf-text-quiet); font-size: var(--wf-t--1); } /* LA LIGNE QUI N'A PAS DE VALEUR NE S'AFFICHE PAS. Aucun script : `:has()` suffit, et la règle vit là où vit le tableau. Remplir la cellule remet la ligne — c'est le seul mécanisme qui ne demande à personne de s'en souvenir. */ .specs tr:has(> td:empty) { display: none; } /* ══════════════════════════════════════════════════════════════════════════ PORTÉ DU BLOC LOCAL DE `design/maquettes/src/03-collection.src.html` LE 04/08/2026. Il sert la CARTE DE GRILLE et l'EN-TÊTE DE COLLECTION, donc deux gabarits : sa place est dans la feuille du catalogue, pas dans une section. ══════════════════════════════════════════════════════════════════════════ */ .tete-coll__pts { display: flex; flex-wrap: wrap; gap: var(--wf-s-4); margin-top: var(--wf-s-5); } /* Les trois relevés de la carte : ce qui rend la carte décidable sans clic. */ .carte-p__relevés { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wf-s-4); padding-block: var(--wf-s-5); border-block: var(--wf-bw-hair) solid var(--wf-rule); } .carte-p__relevés div { display: grid; gap: var(--wf-s-1); } .carte-p__relevés dt { font-size: var(--wf-t--2); color: var(--wf-ink-quiet); } .carte-p__relevés dd { margin: 0; font-size: var(--wf-t--1); font-weight: var(--wf-w-semibold); } /* La carte mise en avant : un FILET plus fort, pas une couleur de fond ni un badge « populaire » : nous n'avons aucune donnée de vente à invoquer. */ .carte-p--mise { border-color: var(--wf-border); border-width: var(--wf-bw); } /* UN COLORIS ÉPUISÉ RESTE VISIBLE, BARRÉ, ET N'EST PAS SÉLECTIONNABLE. Le retirer de la liste ferait croire qu'il n'existe pas ; le laisser sélectionnable ferait perdre un clic pour rien. La barre est un tracé, pas une couleur : elle survit à `forced-colors` et se lit en niveaux de gris. Le nom porte « — Sold out » à côté, donc l'information n'est jamais dans la seule apparence (WCAG 1.4.1). */ .pastille--epuise { position: relative; opacity: 0.55; } .pastille--epuise::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(to bottom right, transparent calc(50% - 0.7px), var(--wf-ink) calc(50% - 0.7px), var(--wf-ink) calc(50% + 0.7px), transparent calc(50% + 0.7px)); } /* ══════════════════════════════════════════════════════════════════════════ PORTÉ DU BLOC LOCAL DE `design/maquettes/src/02-fiche-produit.src.html` LE 04/08/2026. Il sert la fiche produit, donc il vit avec le reste du catalogue plutôt que dans une section : la fiche est composée de neuf sections et découper ces règles entre elles les rendrait introuvables. ══════════════════════════════════════════════════════════════════════════ */ ` local d'une seule. ══════════════════════════════════════════════════════════════════════ -->