/* ===================================================================== KENTROW — Feuille de styles principale Boutique streetwear — site statique (mobile-first, responsive) ===================================================================== */ /* ------------------------------------------------------------------ 1. Variables — ALIAS vers les tokens (css/tokens.css) ------------------------------------------------------------------ Les anciens noms (--c-*) sont conservés comme alias afin que tout le fichier reste lisible, mais ils ne portent plus de couleur en dur : ils pointent vers les tokens. Résultat : chaque composant suit automatiquement le thème clair/sombre. ------------------------------------------------------------------ */ :root { --c-white: var(--color-surface); --c-black: var(--color-text); --c-ink: var(--color-text-strong); /* Violet iconique : boutons de formulaire, bordures de focus, puces. Il ne pointe PLUS vers --color-marquee-bg : la banderole est passée au noir, et cet alias aurait entraîné avec elle le bouton « Envoyer » du formulaire de contact et les bordures de champ actif. */ --c-purple: var(--color-brand-purple); --c-purple-ink: var(--color-night-soft); --c-red: var(--color-brand-red); --c-line: var(--color-border); --c-line-dark: var(--color-border-strong); --c-muted: var(--color-text-muted); --c-placeholder-bg: var(--color-bg-alt); /* Typographies (les tokens font foi) */ --font-logo: var(--font-display); --font-head: 'Poppins', 'Inter', sans-serif; --font-body: 'Inter', 'Poppins', sans-serif; } /* ------------------------------------------------------------------ 2. Reset léger & bases ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Le fond est porté par : cela laisse les bandes latérales (z-index négatif) visibles derrière le contenu. */ html { -webkit-text-size-adjust: 100%; background: var(--color-bg); /* Le débordement vient des sections pleine largeur en 100vw (qui compte la barre de défilement). « clip » le supprime sans créer de conteneur de défilement : position:sticky continue de fonctionner. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: transparent; /* Les sections pleine largeur (newsletter) utilisent 100vw, qui inclut la barre de défilement : « clip » supprime le débordement horizontal SANS casser position:sticky (contrairement à overflow:hidden). */ overflow-x: clip; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { margin: 0; padding: 0; list-style: none; } /* Conteneur centré : colonne unique, marges neutres sur les côtés */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } /* ------------------------------------------------------------------ Zones latérales — motif wax Les espaces vides à gauche et à droite du contenu portent les deux planches de la marque (Coté 1 / Coté 2), et non plus une trame grise. Deux motifs DIFFÉRENTS de part et d'autre : la même image dupliquée se lirait comme un décor symétrique, donc comme un cadre. Les bandes sont en position:fixed, donc hautes d'exactement un écran : « cover » les remplit en une seule fois. Pas de carrelage, donc aucune couture visible — les planches ne sont pas raccordables. ------------------------------------------------------------------ */ .side-rails { position: fixed; inset: 0; z-index: -1; /* strictement derrière tout le contenu */ pointer-events: none; display: none; /* activées seulement quand il y a de la place */ } .side-rail { position: absolute; top: 0; bottom: 0; width: calc((100vw - var(--container)) / 2); /* Le motif est sombre : le fond de repli l'est aussi, sinon un flash gris clair apparaît le temps du chargement de l'image. */ background-color: #0b0b0d; background-repeat: no-repeat; background-position: center; background-size: cover; } .side-rail--left { left: 0; border-right: 1px solid var(--color-border); background-image: url("../assets/img/cote-1.png"); } .side-rail--right { right: 0; border-left: 1px solid var(--color-border); background-image: url("../assets/img/cote-2.png"); } /* On ne les affiche que si la fenêtre est nettement plus large que la colonne de contenu (sinon il n'y a pas d'espace vide à habiller). Les bandes sont en z-index négatif : le contenu passe devant sans qu'on ait besoin de repositionner quoi que ce soit (ne jamais forcer position:relative ici — cela casserait le tiroir de navigation). */ @media (min-width: 1100px) { .side-rails { display: block; } } /* Les pages en pleine largeur (page produit) ont une colonne plus large */ body[data-page="produit"] .side-rail, body[data-page="valeurs"] .side-rail { width: calc((100vw - var(--container-wide)) / 2); } @media (max-width: 1299.98px) { body[data-page="produit"] .side-rails, body[data-page="valeurs"] .side-rails { display: none; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ 3. Header (identique sur toutes les pages) ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--c-white); border-bottom: 1px solid var(--c-line); } .header-inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; /* menu | logo centré | panier */ align-items: center; } .logo { grid-column: 2; font-family: var(--font-logo); font-size: clamp(1.7rem, 6vw, 2.1rem); color: var(--c-ink); letter-spacing: .5px; line-height: 1; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: center; } /* Logo image (chrome) */ .logo img { height: clamp(24px, 6.8vw, 32px); width: auto; display: block; } /* Bouton hamburger (3 traits) */ .hamburger { grid-column: 1; justify-self: start; width: 34px; height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 4px 2px; } .hamburger span { display: block; height: 2.5px; width: 26px; background: var(--c-ink); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; } /* Croix quand le menu est ouvert */ .hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Groupe d'actions à droite : compte + panier */ .header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; } /* Boutons icône du header : thème (lune/soleil) et langue (FR/EN) */ .icon-btn { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-ink); transition: background var(--t-fast), color var(--t-fast); } .icon-btn:hover { background: var(--color-bg-inset); color: var(--c-red); } .icon-btn:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; } .icon-btn svg { width: 20px; height: 20px; } .icon-btn svg[hidden] { display: none; } /* Bascule de langue : libellé texte (EN / FR) */ .icon-btn--lang { width: auto; min-width: 36px; padding: 0 8px; border-radius: 14px; font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .8px; border: 1.5px solid var(--c-line-dark); } .icon-btn--lang:hover { border-color: var(--c-red); } /* Bouton compte (connexion / inscription) */ .account-btn { position: relative; width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; } .account-btn svg { width: 26px; height: 26px; stroke: var(--c-ink); } .account-btn:hover svg, .cart-btn:hover svg { stroke: var(--c-red); } /* Bouton panier + badge compteur */ .cart-btn { position: relative; width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; } .cart-btn svg { width: 28px; height: 28px; stroke: var(--c-ink); } .cart-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--c-red); color: var(--color-text-invert-fixed); font-family: var(--font-head); font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .cart-badge.is-visible { transform: scale(1); } .cart-badge.bump { animation: badge-bump .4s ease; } @keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* ------------------------------------------------------------------ 4. Menu latéral (drawer) ouvert par le hamburger ------------------------------------------------------------------ */ .nav-drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; } .nav-drawer__overlay { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; transition: opacity .3s ease; } .nav-drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: min(78vw, 320px); background: var(--c-white); padding: calc(var(--header-h) + 24px) 28px 28px; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: 2px 0 24px var(--color-shadow); } .nav-drawer.is-open { pointer-events: auto; } .nav-drawer.is-open .nav-drawer__overlay { opacity: 1; } .nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); } .nav-drawer__panel a { display: block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .5px; padding: 14px 0; border-bottom: 1px solid var(--c-line); } .nav-drawer__panel a:hover { color: var(--c-red); } /* ------------------------------------------------------------------ 5. Bandeau défilant (marquee) ------------------------------------------------------------------ */ .marquee { /* Lettrage blanc (banderole-blanc.png) sur fond noir : on prend le token du bandeau, pas l'alias --c-purple, qui sert ailleurs. */ background: var(--color-marquee-bg); overflow: hidden; padding: 10px 0; /* PAS de bordure. Il y avait ici un border-bottom: 1px solid var(--color-border), soit un gris très clair (#e6e6e6 en thème clair). Entre un bandeau noir et le carrousel, ce filet se lisait comme une ligne blanche d'un pixel — un défaut d'alignement apparent alors que rien n'était désaligné. Les bandeaux tranchent déjà nettement sur ce qui les entoure : le filet n'apportait rien et créait l'artefact. */ } /* Couleurs FIXES des 2e et 3e bandeaux : elles ne suivent pas le thème, ce sont des choix de marque. Le premier bandeau, lui, garde son fond piloté par le thème (voir --color-marquee-bg dans tokens.css). */ .marquee--fond-blanc { background: #ffffff; } .marquee--fond-bordeaux { background: #7F1734; } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 60s linear infinite; /* Composition GPU : évite le tremblement et les micro-saccades */ will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; } .marquee__group { display: flex; align-items: center; flex: 0 0 auto; } /* Banderole image (texte blanc manuscrit, fond transparent) */ /* Le lettrage de banderole-blanc.png est blanc sur fond transparent : parfait sur le bandeau noir du thème clair, invisible sur le bandeau blanc du thème sombre. On l'inverse donc — plutôt que de maintenir un second fichier image à jour, qui finirait par diverger du premier. ⚠ L'inversion ne concerne QUE le premier bandeau, le seul dont le fond suit le thème. Les 2e et 3e ont des couleurs fixes et un lettrage déjà accordé à leur fond : les inverser les casserait — et sur du bordeaux, invert(1) ne donne pas un bordeaux plus clair mais un vert d'eau, l'inversion agissant sur les trois canaux et non sur la luminosité. */ :root[data-theme="dark"] .marquee:not(.marquee--fond-blanc):not(.marquee--fond-bordeaux) .marquee__img { filter: invert(1); } .marquee__img { height: 26px; width: auto; display: block; /* Aucun padding : l'espacement est INTÉGRÉ à l'image, dont la largeur a été calculée pour que l'unique étoile tombe exactement au milieu entre deux slogans. Un padding en px casserait cette symétrie, car il ne suit pas la mise à l'échelle de l'image. */ flex: 0 0 auto; /* Empêche l'étirement vertical dans le conteneur flex */ align-self: center; } /* Défilement continu droite → gauche, boucle infinie et SANS COUTURE. La piste contient deux groupes strictement identiques : se décaler de -50 % revient à décaler d'exactement un groupe, donc l'image d'arrivée coïncide au pixel près avec celle de départ. Chaque groupe est assez large (8 répétitions) pour couvrir les grands écrans : c'est ce qui manquait et rendait la coupure visible. */ @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ---- Variante inversée : séparateur entre le carrousel et la suite ---- Défile de GAUCHE à DROITE. On réutilise la même animation avec animation-direction:reverse plutôt que d'écrire une seconde keyframe : le décalage reste exactement d'un groupe, donc la boucle demeure sans couture, et il n'y a qu'un seul endroit à corriger si la piste change. La bordure passe en haut : cette banderole ferme le carrousel au lieu d'ouvrir la page. */ /* Ce bandeau ferme le carrousel au lieu d'ouvrir la page. Il portait un border-top clair, qui produisait exactement le même filet parasite que le border-bottom du bandeau du haut : une ligne pâle d'un pixel entre le carrousel et le bandeau. Retiré pour la même raison. */ .marquee--reverse .marquee__track { animation-direction: reverse; } /* ------------------------------------------------------------------ 6. Hero — slider plein écran (page d'accueil) Pleine largeur (100vw). Les images sont FIXES et glissent automatiquement toutes les 4,5 s (translation pilotée en JS). ------------------------------------------------------------------ */ /* Le hero adopte le ratio NATIF des visuels (1200 × 848). Avec une hauteur imposée, « cover » rognait le haut et le bas des photos — à 1280px de large, 225px disparaissaient. Ici la boîte a exactement le rapport des images : elles s'affichent en entier, sans bandes ni rognage. */ .hero { position: relative; width: 100%; aspect-ratio: 1200 / 848; overflow: hidden; /* Fond SOMBRE et non --color-bg-inset (#f2f2f2 en thème clair). La hauteur du conteneur vient d'un aspect-ratio, celle de l'image d'un calcul de mise à l'échelle : les deux tombent rarement sur le même pixel entier. Le fond apparaissait donc sur une ligne d'un pixel — gris très clair, juste sous un bandeau noir, il se lisait comme une ligne blanche mal alignée. Un fond sombre rend cet écart invisible. Il sert aussi de repli propre si un futur visuel n'a pas le ratio exact du carrousel : object-fit:contain laisserait alors des bandes, sombres plutôt que grises. */ background: #0b0b0d; } /* Très grands écrans. L'ancienne règle bornait la LARGEUR à 1800px : au-delà, le carrousel était centré et laissait deux bandes de --color-bg-inset (gris clair) sur les côtés. C'est précisément ce qui l'empêchait de remplir la page. On borne désormais la HAUTEUR. Le carrousel reste pleine largeur à toute taille d'écran ; seule sa hauteur cesse de croître, sinon l'aspect-ratio la porterait à 1809px sur un écran de 2560px de large. Conséquence géométrique inévitable : une boîte plus large que le ratio de l'image ne peut pas la montrer entière ET pleine largeur. Au-delà de 1800px, on passe donc en « cover » — l'image est légèrement rognée en haut et en bas plutôt que d'être encadrée de bandes vides. En dessous de 1800px, RIEN NE CHANGE : ratio natif et « contain ». */ /* Aucun plafond de largeur : le carrousel est pleine largeur à TOUTE taille d'écran. L'ancienne règle @media (min-width:1800px) lui imposait max-width:1800px et le centrait, ce qui laissait deux bandes de --color-bg-inset (gris clair) sur les côtés au-delà de ce seuil. Le ratio natif est conservé partout, donc l'image n'est jamais rognée ni encadrée de bandes : c'est déjà le comportement en dessous de 1800px, il n'y avait pas de raison qu'un écran plus large soit traité autrement. Contrepartie assumée, la même qu'en dessous du seuil : le carrousel est proportionnellement haut sur un très grand écran (1809px de haut à 2560px de large). Borner la hauteur imposerait de rogner l'image de près de 40 % — essayé, puis écarté : mieux vaut une page à faire défiler qu'un visuel amputé. */ .hero__track { display: flex; height: 100%; width: 100%; transition: transform .7s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .hero__slide { flex: 0 0 100%; width: 100%; height: 100%; /* « contain » garantit l'image entière même si un visuel futur n'a pas exactement le ratio du hero : il serait alors adapté, jamais coupé. */ object-fit: contain; display: block; } /* Bouton « Voir nos produits » — en bas à droite du slider */ .hero__cta { position: absolute; right: clamp(16px, 4vw, 44px); bottom: clamp(16px, 4vw, 38px); z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: var(--color-btn-bg); color: var(--color-btn-text); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; border-radius: 2px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); transition: background .2s ease, color .2s ease, transform .2s ease; } .hero__cta:hover { background: var(--color-btn-bg-hover); color: var(--color-btn-text-hover); transform: translateY(-2px); } .hero__cta svg { width: 15px; height: 15px; } /* Points de position du slider — en bas à GAUCHE : le bouton « Voir nos produits » occupe le coin bas droit. */ .hero__dots { position: absolute; left: clamp(10px, 3.2vw, 36px); bottom: clamp(10px, 3vw, 28px); z-index: 5; display: flex; gap: 0; } /* Cible tactile de 24 px ; le point visible est le ::after */ .hero__dot { width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; } .hero__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: background .25s ease, transform .25s ease; } .hero__dot:hover::after { background: rgba(255, 255, 255, .8); } .hero__dot.is-active::after { background: #fff; transform: scale(1.3); } /* Sous ~440 px, la rangée de points (8 × 24 px) et le bouton (~222 px) ne tiennent plus côte à côte : les points passent au-dessus du bouton pour rester visibles et cliquables. */ @media (max-width: 480px) { /* 74px = bouton (46) + son décalage bas (max 19) + 9 d'air */ .hero__dots { bottom: 74px; } } /* ------------------------------------------------------------------ 6bis. Section storytelling (entre le hero et les produits) Deux planches de logos en défilement croisé (parallaxe CSS) : la colonne gauche glisse doucement vers le bas, la droite remonte plus vite. Overlay sombre + bouton centré vers « Nos valeurs ». ------------------------------------------------------------------ */ /* Hauteur MINIMALE, plus une hauteur fixe : depuis que le bloc porte l'amorce du récit, une hauteur imposée aurait rogné le texte sur les écrans étroits — ou obligé à la recalculer à chaque retouche. Le padding vertical fait le reste : le bouton descend de lui-même sous le texte. */ .story { position: relative; overflow: hidden; min-height: clamp(340px, 52vw, 540px); padding-block: clamp(44px, 7vw, 72px); background: var(--color-dark-bg); } /* Mur de mosaïque — UNE SEULE couche, qui monte. La tuile mur.jpg (1200 × 1028) est un assemblage de 6 colonnes tirées des deux planches, chacune avec un décalage vertical différent et, pour certaines, un miroir horizontal. La répétition horizontale passe donc de 300 px à 1200 px et ne se lit plus comme une grille. Le décalage vertical vaut exactement une hauteur de tuile : la boucle est invisible, le défilement ne s'interrompt jamais. */ .story__wall { position: absolute; inset: 0; background-image: url("../assets/story/mur.jpg"); background-repeat: repeat; background-size: 1200px auto; animation: story-drift 96s linear infinite; will-change: background-position; } @keyframes story-drift { from { background-position-y: 0; } to { background-position-y: -1028px; } /* une hauteur de tuile */ } /* Overlay sombre : la mosaïque est dense, il faut l'assombrir nettement pour que le titre et le bouton restent parfaitement lisibles. */ .story__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(9, 3, 18, .78), rgba(9, 3, 18, .86)); } .story__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; gap: 18px; } /* Amorce du récit. Police de titrage (Poppins), celle de « Informations produit » sur la fiche produit. Le fond est sombre par nature dans les DEUX thèmes : les couleurs sont donc fixes et claires, jamais --color-text qui s'inverse. */ .story__teaser { max-width: 56ch; margin: 0; font-family: var(--font-head); } .story__teaser-title { margin: 0 0 14px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: #ffffff; } .story__teaser p { margin: 0 0 10px; font-weight: 400; font-size: clamp(.92rem, 2.2vw, 1rem); line-height: 1.7; color: rgba(255, 255, 255, .88); /* 13,4:1 sur le voile → AAA */ } .story__teaser p:last-child { margin-bottom: 0; } .story__cta { display: inline-block; padding: 15px 30px; border: 2px solid #fff; color: var(--color-text-invert-fixed); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: .95rem; border-radius: 2px; transition: background .2s ease, color .2s ease; } /* Le fond de cette section est sombre par nature (mosaïque assombrie) : le texte du survol est donc figé en foncé, pas lié au thème — sinon il devenait blanc sur blanc en mode sombre. */ .story__cta:hover { background: #fff; color: #111111; } /* ------------------------------------------------------------------ 7. Grille de produits (page d'accueil) ------------------------------------------------------------------ */ .products { padding-block: 34px 10px; } /* Titre de la section produits */ .products__head { text-align: center; margin-bottom: clamp(20px, 4vw, 34px); } .products__title { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(1.45rem, 5.4vw, 2.2rem); /* Plus de filet sous le titre : la marge basse ne sert donc plus à l'en séparer, c'est .products__head qui gère l'espace avant la grille. */ margin: 0; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 26px); } .product-card { display: flex; flex-direction: column; } .product-card__frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.08; border: 1px solid var(--c-line); background: var(--c-white); padding: 8%; overflow: hidden; } .product-card__frame img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; } a.product-card__frame:hover img { transform: scale(1.04); } .product-card__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(.82rem, 2.6vw, 1rem); letter-spacing: .2px; margin: 14px 0 4px; } .product-card__price { font-size: clamp(.82rem, 2.6vw, 1rem); color: var(--c-black); margin: 0; } .product-card__frame--coming { background: var(--c-placeholder-bg); } /* Loader personnalisé (produit à venir) : disque vinyle noir en rotation infinie, logo KentRow au centre du label violet. */ .vinyl { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .16), transparent 42%), repeating-radial-gradient(circle at 50% 50%, var(--color-vinyl-a) 0 2px, var(--color-vinyl-b) 2px 3px, var(--color-vinyl-a) 3px 5px); background-color: var(--color-vinyl-a); box-shadow: 0 6px 22px rgba(0, 0, 0, .28), inset 0 0 0 2px var(--color-vinyl-a); animation: vinyl-spin 2.8s linear infinite; } /* Label central : VIOLET ICONIQUE de la marque (et non le bleu nuit) */ .vinyl::before { content: ""; position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--color-vinyl-label-lite), var(--color-vinyl-label) 65%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); } /* Trou de l'axe */ .vinyl::after { content: ""; position: absolute; inset: 48.25%; border-radius: 50%; background: var(--c-placeholder-bg); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); z-index: 2; } /* Logo KentRow sur le label (tourne avec le disque) */ .vinyl__logo { position: absolute; inset: 33.5%; display: flex; align-items: center; justify-content: center; z-index: 1; } .vinyl__logo img { width: 88%; height: auto; } @keyframes vinyl-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ 8. Cases de tailles (barre de tailles de la page produit) Styles de base ; la page produit les resserre via .pp__sizes .size. ------------------------------------------------------------------ */ .size { width: clamp(52px, 15vw, 64px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--c-line-dark); background: var(--c-white); font-size: 1.25rem; color: var(--c-black); transition: border-color .15s ease, color .15s ease; } .size:not(.is-unavailable):hover { border-color: var(--c-red); } .size.is-selected { border-color: var(--c-red); border-width: 2px; color: var(--c-red); } /* Tailles indisponibles : barrées d'une diagonale, non cliquables */ /* Tailles indisponibles ET tailles épuisées : même traitement, celui qui était déjà utilisé pour le t-shirt blanc — texte grisé et rayé, sans barre diagonale. */ .size.is-unavailable, .size.is-soldout { color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; text-decoration: line-through; } /* ------------------------------------------------------------------ 9. Footer (identique sur toutes les pages) ------------------------------------------------------------------ */ .site-footer { /* Fond bleu nuit sur TOUT le footer, dans les deux thèmes : c'est une surface de marque (comme la banderole violette), pas une surface qui suit le thème. Le texte est donc clair en permanence — d'où les couleurs fixes ci-dessous plutôt que --color-text. */ background: var(--color-night); color: var(--color-news-text); border-top: none; margin-top: 46px; padding: 34px 0 30px; text-align: center; } /* ---------- Réseaux sociaux ---------- */ /* Invitation posée AU-DESSUS des deux icônes : seules, elles ne disaient pas ce qu'on attend du visiteur. */ .footer-join { margin: 0 0 12px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: .82rem; color: var(--color-news-text); } .footer-social { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 22px; } .footer-ig, .footer-tt { display: inline-flex; transition: transform var(--t-fast), opacity var(--t-fast); } .footer-ig:hover, .footer-tt:hover { transform: translateY(-2px); } .footer-ig svg, .footer-tt svg { width: 34px; height: 34px; display: block; } .footer-ig:focus-visible, .footer-tt:focus-visible { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 4px; border-radius: 6px; } /* ------------------------------------------------------------------ Pages légales (politique d'envoi, conditions d'utilisation) ------------------------------------------------------------------ */ .legal { max-width: 780px; padding-block: clamp(30px, 6vw, 60px) 20px; } .legal__head { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); } .legal__kicker { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; font-size: .72rem; color: var(--c-red); margin: 0 0 10px; } .legal__title { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; margin: 0 0 14px; } .legal__underline { width: 96px; height: 5px; margin: 0 auto 16px; border-radius: 2px; /* Filet sobre (plus de bande colorée) */ background: linear-gradient(90deg, transparent 0%, var(--c-ink) 22%, var(--c-ink) 78%, transparent 100%); opacity: .75; } .legal__updated { color: var(--c-muted); font-size: .82rem; margin: 0; } .legal__section { margin-bottom: clamp(26px, 4vw, 40px); } .legal__section h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: clamp(1rem, 3.2vw, 1.15rem); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); } .legal__section p { margin: 0 0 12px; line-height: 1.75; } .legal__section a { text-decoration: underline; text-underline-offset: 2px; } .legal__section a:hover { color: var(--c-red); } .legal__list { display: grid; gap: 9px; margin: 0 0 12px; } .legal__list li { position: relative; padding-left: 20px; line-height: 1.7; } .legal__list li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-purple); } .legal__note { font-size: .84rem; color: var(--c-muted); } /* Encadré « à compléter » : visible pour l'éditeur du site */ .legal__todo { background: var(--color-bg-inset); border-left: 4px solid var(--c-ink); padding: 12px 14px; border-radius: 2px; font-size: .88rem; } /* Champ à renseigner */ .legal__field { background: var(--color-bg-inset); border: 1px dashed var(--color-border-strong); border-radius: 2px; padding: 1px 7px; color: var(--c-muted); font-size: .92em; } .legal__table-wrap { overflow-x: auto; margin: 0 0 12px; } .legal__table { width: 100%; border-collapse: collapse; font-size: .92rem; } .legal__table th, .legal__table td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; } .legal__table th { background: var(--color-bg-alt); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .76rem; letter-spacing: .5px; } /* --- Barre d'inscription à la newsletter (fond bleu nuit) --- */ .footer-news { /* Pleine largeur, hors de la colonne centrée */ margin: 0 calc(50% - 50vw) 30px; padding: clamp(28px, 5vw, 42px) var(--pad-x); /* Le footer entier est désormais bleu nuit : ce bloc prend la nuance LÉGÈREMENT plus claire pour rester lisible comme panneau distinct, sinon il disparaîtrait dans le fond. */ background: var(--color-night-soft); color: var(--color-news-text); border-block: 1px solid rgba(255, 255, 255, .07); } /* Le contenu de la newsletter reste dans la colonne */ .footer-news > * { max-width: 460px; margin-inline: auto; } /* ⚠ Les marges horizontales DOIVENT rester en « auto » ici. « .footer-news > * » plus haut pose margin-inline:auto pour centrer le bloc, mais ces règles-ci ont la même spécificité et viennent après : un « margin: 0 0 6px » y remettait donc 0, et seul le formulaire (qui ne redéfinit pas margin) restait centré. Le titre, le texte et le message se retrouvaient collés à gauche du footer. */ .footer-news__title { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.05rem; margin: 0 auto 6px; color: var(--color-news-text); } .footer-news__text { color: var(--color-news-muted); font-size: .86rem; margin: 0 auto 16px; } .footer-news__form { display: flex; gap: 8px; position: relative; } .footer-news__form input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 13px 15px; border: 1.5px solid var(--c-line-dark); border-radius: 2px; font-family: var(--font-body); font-size: .92rem; color: var(--c-black); background: var(--c-white); } /* Anneau CLAIR fixe, et non --color-focus-ring. Ce champ est posé sur le panneau bleu nuit de la newsletter, sombre dans LES DEUX thèmes. Le token, lui, suit le thème : en clair il vaut rgba(16,26,44,.28), soit du bleu nuit sur du bleu nuit — l'anneau y était totalement invisible (contraste ~1:1). Une couleur fixe est ici le bon choix, exactement comme pour le texte du footer. */ .footer-news__form input[type="email"]:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 3px rgba(255, 255, 255, .65); } .footer-news__form input[type="email"]::placeholder { color: var(--color-text-muted); } .footer-news__form.has-error input[type="email"] { border-color: var(--c-red); } .footer-news__form button { flex: 0 0 auto; padding: 13px 22px; background: var(--color-text-invert-fixed); color: var(--color-news-bg); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .82rem; border-radius: 2px; transition: opacity var(--t-fast); } .footer-news__form button:hover { opacity: .85; } .footer-news__form button:disabled { opacity: .6; cursor: default; } /* Pot de miel : hors écran, jamais visible ni focusable */ .footer-news__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .footer-news__msg { margin: 10px auto 0; /* auto : voir la note sur .footer-news__title */ max-width: 460px; font-size: .84rem; min-height: 1.2em; /* aligné à gauche DANS le bloc centré, pour suivre le bord du champ */ text-align: left; color: var(--color-news-muted); } /* Sur fond bleu nuit, les états doivent rester lisibles */ .footer-news__msg.is-ok { color: #7ee6a0; } .footer-news__msg.is-error { color: #ff9c94; } .footer-news__msg a { color: inherit; text-decoration: underline; } @media (max-width: 420px) { .footer-news__form { flex-direction: column; } .footer-news__form button { width: 100%; } } .footer-links { display: grid; gap: 14px; margin-bottom: 26px; } .footer-links a { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; letter-spacing: .4px; font-size: .92rem; color: var(--color-news-text); } /* Le rouge de marque #e4271b ne donne que 4.2:1 sur le bleu nuit. Sur fond sombre permanent, on survole en blanc pur : le retour visuel passe par l'opacité du soulignement, pas par une couleur limite. */ .footer-links a:hover { color: #ffffff; text-decoration-thickness: 2px; } .footer-copy { font-size: .78rem; color: rgba(255, 255, 255, .55); margin: 0; } /* ------------------------------------------------------------------ 10. Responsive — tablette & desktop Le .container (max-width 900px, centré) gère la colonne centrale : sur grand écran, des marges blanches neutres apparaissent sur les côtés. Le bandeau défilant reste, lui, en pleine largeur. ------------------------------------------------------------------ */ @media (min-width: 640px) { :root { --pad-x: 26px; } .products { padding-top: 34px; } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .hero__track { transition: none; } /* Sélecteurs aussi spécifiques que ceux qui posent l'animation, sinon la règle d'annulation serait perdante. */ .story__wall { animation: none; } .vinyl { animation-duration: 10s; } } /* ------------------------------------------------------------------ 11. Tiroir panier ------------------------------------------------------------------ */ body.no-scroll { overflow: hidden; } /* Les titres de produits sont cliquables */ .product-card__title a { color: inherit; text-decoration: none; } .product-card__title a:hover { color: var(--c-red); } .cart-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; } .cart-drawer__overlay { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; transition: opacity .3s ease; } .cart-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(92vw, 400px); background: var(--c-white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .34s cubic-bezier(.4, 0, .2, 1); box-shadow: -2px 0 26px var(--color-shadow); } .cart-drawer.is-open { pointer-events: auto; } .cart-drawer.is-open .cart-drawer__overlay { opacity: 1; } .cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--c-line); } .cart-drawer__head h2 { margin: 0; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 1.1rem; } .cart-drawer__close { font-size: 1.9rem; line-height: 1; color: var(--c-ink); padding: 0 4px; } .cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px 22px; } .cart-empty { text-align: center; color: var(--c-muted); padding: 48px 0; } /* Ligne d'article */ .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--c-line); } .cart-item__img { width: 64px; height: 76px; object-fit: contain; border: 1px solid var(--c-line); background: var(--c-white); } .cart-item__info { min-width: 0; } .cart-item__name { margin: 0 0 2px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .78rem; line-height: 1.2; } .cart-item__size { margin: 0 0 10px; font-size: .8rem; color: var(--c-muted); } .cart-item__qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-dark); border-radius: 3px; } .cart-item__qty button { width: 28px; height: 28px; font-size: 1rem; line-height: 1; color: var(--c-ink); } .cart-item__qty span { min-width: 26px; text-align: center; font-size: .9rem; } .cart-item__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .cart-item__remove { font-size: 1.2rem; line-height: 1; color: var(--c-muted); padding: 0 2px; } .cart-item__remove:hover { color: var(--c-red); } .cart-item__price { margin: 0; font-weight: 600; font-size: .9rem; white-space: nowrap; } .cart-drawer__foot { border-top: 1px solid var(--c-line); padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px)); } .cart-drawer__subtotal { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; } .cart-drawer__checkout { width: 100%; padding: 15px; background: var(--c-red); color: var(--color-text-invert-fixed); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .95rem; border-radius: 2px; transition: filter .18s ease; } .cart-drawer__checkout:hover { filter: brightness(.9); } .cart-drawer__checkout:disabled { opacity: .6; cursor: default; } .cart-drawer__note { margin: 12px 0 0; text-align: center; font-size: .74rem; color: var(--c-muted); } /* ------------------------------------------------------------------ 12. Modale (récapitulatif paiement) ------------------------------------------------------------------ */ .modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .modal.is-open { opacity: 1; pointer-events: auto; } .modal__overlay { position: absolute; inset: 0; background: var(--color-overlay); } .modal__box { position: relative; background: var(--c-white); width: min(94vw, 440px); max-height: 85vh; overflow-y: auto; padding: 30px 26px 26px; border-radius: 6px; box-shadow: 0 20px 60px var(--color-shadow); transform: translateY(10px); transition: transform .25s ease; } .modal.is-open .modal__box { transform: translateY(0); } .modal__close { position: absolute; top: 10px; right: 14px; font-size: 1.7rem; line-height: 1; color: var(--c-muted); } .modal__box h3 { margin: 0 0 16px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; } .modal__list { display: grid; gap: 8px; margin: 0 0 16px; } .modal__list li { font-size: .92rem; } .modal__muted { color: var(--c-muted); } .modal__total { margin: 0 0 14px; font-size: 1.05rem; } .modal__info { margin: 0; font-size: .84rem; color: var(--c-muted); line-height: 1.5; } /* ------------------------------------------------------------------ 13. Page de remerciement (merci.html) ------------------------------------------------------------------ */ .thankyou { text-align: center; padding: clamp(50px, 12vw, 90px) 0; max-width: 560px; } .thankyou__mark { width: 72px; height: 72px; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-red); color: var(--color-text-invert-fixed); } .thankyou__mark svg { width: 38px; height: 38px; } .thankyou__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 5.5vw, 2.1rem); margin: 0 0 16px; } .thankyou__text { color: var(--c-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 30px; } .thankyou__btn { display: inline-block; padding: 14px 30px; background: var(--color-btn-bg); color: var(--color-btn-text); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; border-radius: 2px; transition: background .18s ease, color .18s ease; } .thankyou__btn:hover { background: var(--color-btn-bg-hover); color: var(--color-btn-text-hover); } /* ---- Numéro de commande + récapitulatif imagé (merci.html) ---- Les deux blocs sont écrits par js/main.js et restent [hidden] tant qu'aucune commande n'est mémorisée : la page reste alors exactement telle qu'elle était avant, sans cadre vide ni titre orphelin. */ .thankyou__order { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; padding: 10px 18px; border: 1px solid var(--c-line); border-radius: 2px; background: var(--color-bg-alt); color: var(--c-muted); font-size: .92rem; } .thankyou__order strong { color: var(--c-black); font-family: var(--font-head); letter-spacing: .6px; } .recap { max-width: 520px; margin: 0 auto 34px; text-align: left; } .recap__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-size: .95rem; color: var(--c-black); margin: 0 0 14px; text-align: center; } .recap-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--c-line); } .recap-item__img { width: 64px; height: 80px; object-fit: cover; border-radius: 2px; background: var(--color-bg-inset); flex: 0 0 auto; } .recap-item__info { flex: 1 1 auto; min-width: 0; } .recap-item__name { margin: 0 0 4px; font-weight: 600; color: var(--c-black); font-size: .95rem; } .recap-item__meta { margin: 0; color: var(--c-muted); font-size: .85rem; } .recap-item__price { margin: 0; font-weight: 700; color: var(--c-black); white-space: nowrap; } .recap-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 0; border-top: 2px solid var(--c-line-dark); margin-top: 4px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .6px; font-size: .9rem; color: var(--c-muted); } .recap-total strong { font-size: 1.15rem; color: var(--c-black); letter-spacing: 0; } /* ------------------------------------------------------------------ 14. Page produit — mise en page inspirée 6PM, DA KentRow Galerie à gauche (sticky en desktop), infos à droite : titre, prix TTC, pastilles couleur, barre de tailles, options de quantité, disponibilité, bouton pleine largeur, paiements, accordéon. ------------------------------------------------------------------ */ .container--wide { max-width: 1100px; } .pp { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 4vw, 48px); padding-block: clamp(16px, 3vw, 34px) 10px; } /* ---- Galerie ---- */ .pp__gallery { min-width: 0; } /* Cadre photo — le ratio est calculé, pas choisi à l'œil. Les visuels produit font tous 1300 px de large, en deux hauteurs : 1300 × 1625 (ratio 0,80) et 1300 × 1733 (ratio 0,75). Le plus HAUT commande : s'il tient, l'autre tient aussi. Avec « padding: 5% » — un pourcentage de padding se calcule sur la LARGEUR, sur les quatre côtés — la zone de contenu d'une boîte large de W et haute de H vaut 0,90 W × (H − 0,10 W). Pour qu'elle soit au ratio 0,75 : 0,90 W / (H − 0,10 W) = 0,75 → H = 1,30 W L'ancien 1/1,08 rendait la zone de contenu plus large que haute que les images : celles-ci étaient bridées par la HAUTEUR et n'occupaient que 78 % de la largeur du cadre, d'où les vides sur les côtés. Contrepartie assumée, la même que pour le hero : le cadre est plus haut, la fiche produit gagne en hauteur. */ .pp__main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.3; border: 1px solid var(--c-line); background: var(--c-white); padding: 5%; overflow: hidden; cursor: zoom-in; /* curseur loupe sur la fenêtre produit */ } .pp__main img { max-width: 100%; max-height: 100%; object-fit: contain; /* Le point de grossissement suit la souris (posé en JS) */ transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform .2s ease; } /* Pendant le survol : on grossit et on retire la transition, sinon l'image traînerait derrière le curseur. */ .pp__main.is-zoomed { cursor: zoom-out; } .pp__main.is-zoomed img { transform: scale(2.3); transition: none; } /* Indice discret, masqué dès qu'on zoome */ .pp__zoom-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; letter-spacing: .3px; pointer-events: none; opacity: .85; transition: opacity .2s ease; } .pp__main.is-zoomed .pp__zoom-hint { opacity: 0; } .pp__zoom-hint svg { width: 13px; height: 13px; } /* Pas de survol sur écran tactile : ni loupe, ni indice */ @media (hover: none) { .pp__main { cursor: default; } .pp__zoom-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .pp__main img { transition: none; } } .pp__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; line-height: 1; color: var(--c-ink); user-select: none; transition: opacity .2s ease; } .pp__arrow:hover { opacity: .55; } .pp__arrow--prev { left: 2px; } .pp__arrow--next { right: 2px; } /* Bande de vignettes. Le nombre de colonnes n'est PAS figé : il s'adapte à la place et au nombre de vues. Avec « repeat(6, 1fr) », les deux fiches — qui comptent sept photos — laissaient une vignette orpheline seule sur une deuxième ligne, et sur mobile les six colonnes tombaient à 50px, sous la cible tactile confortable. auto-fit remplit la ligne, replie proprement au-delà, et ne redemande rien le jour où une photo est ajoutée ou retirée. */ .pp__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 10px; } .pp__thumb { aspect-ratio: 1 / 1; border: 1px solid var(--c-line); background: var(--c-white); padding: 5%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; } .pp__thumb img { width: 100%; height: 100%; object-fit: contain; } .pp__thumb.is-active { border-color: var(--c-ink); } /* ---- Infos ---- */ .pp__info { min-width: 0; } .pp__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.15rem, 4vw, 1.45rem); line-height: 1.2; margin: 0 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); } .pp__price { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; margin: 14px 0 2px; } .pp__vat { color: var(--c-muted); font-size: .8rem; margin: 0 0 18px; } .pp__label { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; font-size: .78rem; margin: 0 0 10px; } /* Seule la VALEUR est grisée (« Couleur : Noir ») — pas le libellé, qui est désormais dans son propre span pour pouvoir être traduit. */ .pp__label [data-pp-color] { color: var(--c-muted); font-weight: 500; text-transform: none; letter-spacing: 0; } /* Pastilles couleur (navigation entre coloris) */ .pp__colors { display: flex; gap: 10px; margin-bottom: 22px; } .pp__swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line-dark); display: block; position: relative; } .pp__swatch--noir { background: #111; } .pp__swatch--blanc { background: #fff; } .pp__swatch.is-active::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--c-ink); border-radius: 50%; } .pp__swatch:hover { transform: scale(1.08); } /* Barre de tailles : 5 cases égales, indisponibles barrées en diagonale */ .pp__sizes { display: flex; gap: 8px; margin-bottom: 22px; } .pp__sizes .size { flex: 1; width: auto; aspect-ratio: auto; height: 48px; font-size: 1rem; } /* Options de quantité (rangées empilées, style 6PM) */ .pp__qty { display: grid; gap: 8px; margin-bottom: 18px; } .pp__qty-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 16px; border: 1px solid var(--c-line-dark); border-radius: 2px; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: .88rem; transition: border-color .15s ease, box-shadow .15s ease; } /* Sélection de la quantité : EXACTEMENT le même traitement que les tailles (.size.is-selected) — bordure rouge 2px et texte rouge. Les deux sélecteurs sont côte à côte sur la page produit, ils doivent se répondre. Le padding descend de 15/16 à 14/15 pour absorber le passage de la bordure de 1px à 2px : sans ça, la rangée sautait d'un pixel au clic. */ .pp__qty-row:hover { border-color: var(--c-red); } .pp__qty-row.is-selected { border: 2px solid var(--c-red); padding: 14px 15px; color: var(--c-red); } .pp__qty-price { font-weight: 700; } /* Disponibilité */ .pp__stock { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .88rem; margin: 0 0 18px; } /* Clin d'œil affiché à côté de « Épuisé. » quand le produit est entièrement épuisé. Volontairement en retrait : c'est un aparté, pas une information. Le 0.92em n'est pas cosmétique — à taille pleine la phrase dépassait de 4px et basculait sur une seconde ligne, ce qui la faisait passer pour un vrai message. Elle reste libre de passer à la ligne sur les écrans étroits (.pp__stock est en flex-wrap). */ .pp__stock-joke { opacity: .5; font-style: italic; font-size: .92em; } .pp__stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1c9a3f; flex: 0 0 auto; } .pp__stock strong { color: #1c9a3f; font-weight: 600; } .pp__stock.is-out::before { background: var(--c-red); } .pp__stock.is-out strong { color: var(--c-red); } /* Bouton principal pleine largeur (noir, façon 6PM) */ .pp__cta { width: 100%; padding: 17px; background: var(--color-btn-bg); color: var(--color-btn-text); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: .95rem; border-radius: 2px; transition: background .2s ease, color .2s ease; } .pp__cta:hover { background: var(--color-btn-bg-hover); color: var(--color-btn-text-hover); } .pp__cta:disabled { background: var(--color-btn-bg-off); color: var(--color-text-invert-fixed); cursor: not-allowed; } /* Moyens de paiement */ .pp__payments { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); } .pp__pay-badge { font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .5px; color: var(--c-muted); } .pp__pay-badge--visa { color: #1a1f71; font-style: italic; } .pp__pay-badge--mc { display: inline-flex; } .pp__pay-badge--mc i { width: 15px; height: 15px; border-radius: 50%; display: inline-block; } .pp__pay-badge--mc i:first-child { background: #eb001b; } .pp__pay-badge--mc i:last-child { background: #f79e1b; margin-left: -6px; opacity: .92; } .pp__secure { display: flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: .76rem; } .pp__secure svg { width: 13px; height: 13px; } /* Logo marque sous le bouton (comme 6PM) */ .pp__brand { padding: 16px 0 4px; } .pp__brand img { height: 22px; width: auto; } /* Accordéon « Informations produit » */ .pp__acc { border-top: 1px solid var(--c-line); margin-top: 10px; } .pp__acc summary { display: flex; align-items: center; gap: 12px; padding: 16px 2px; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; font-size: .82rem; } .pp__acc summary::-webkit-details-marker { display: none; } .pp__acc-ico { width: 26px; height: 26px; border: 1.5px solid var(--c-ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; flex: 0 0 auto; transition: transform .25s ease; } .pp__acc[open] .pp__acc-ico { transform: rotate(45deg); } .pp__acc-body { padding: 0 2px 18px; } .pp__acc-body ul { display: grid; gap: 7px; } .pp__acc-body li { position: relative; padding-left: 18px; font-size: .9rem; } .pp__acc-body li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-ink); } /* ------------------------------------------------------------------ « Derrière ce produit » — le récit du visuel, posé par-dessus le cadre photo. Le bouton vit dans l'accordéon d'informations ; il ouvre ET referme (aria-expanded porte l'état). ------------------------------------------------------------------ */ .pp__behind-btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 1px solid var(--c-line-dark); border-radius: 999px; background: transparent; color: var(--c-ink); /* Poppins : la police de « Informations produit », l'accordéon dans lequel ce bouton vit. */ font-family: var(--font-head); font-size: 1.02rem; line-height: 1.1; letter-spacing: .3px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } /* Pastille rouge : le seul accent coloré, comme ailleurs sur le site */ .pp__behind-btn::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); } .pp__behind-btn:hover, .pp__behind-btn[aria-expanded="true"] { background: var(--color-btn-bg); color: var(--color-btn-text); border-color: transparent; } /* Le volet lui-même : il recouvre .pp__main, dont l'image reste visible dessous. Fond sombre par nature → couleurs FIXES, jamais des tokens qui s'inversent avec le thème (sinon texte blanc sur voile clair en mode clair, ou l'inverse). */ .pp__behind { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 6%, 40px); background: linear-gradient(rgba(8, 3, 16, .84), rgba(8, 3, 16, .92)); color: #fff; /* Tout le récit est en Poppins, comme le bouton qui l'ouvre : le titre le redéclare quand même plus bas, parce qu'il porte sa propre font-family et qu'un héritage ne bat pas une déclaration explicite. */ font-family: var(--font-head); overflow-y: auto; overscroll-behavior: contain; cursor: default; } .pp__behind[hidden] { display: none; } .pp__behind-scroll { max-width: 48ch; } .pp__behind-story[hidden] { display: none; } .pp__behind-title { margin: 0 0 14px; font-family: var(--font-head); /* Poppins, comme le corps du récit */ font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: 1px; color: #fff; } .pp__behind-story p { margin: 0 0 13px; font-size: clamp(.82rem, 1.5vw, .95rem); line-height: 1.68; color: rgba(255, 255, 255, .88); } .pp__behind-story p:last-child { margin-bottom: 0; } .pp__behind-close { position: absolute; top: 8px; right: 12px; z-index: 1; padding: 4px 8px; font-size: 1.7rem; line-height: 1; color: rgba(255, 255, 255, .7); background: none; } .pp__behind-close:hover { color: #fff; } /* Volet ouvert : ni loupe, ni flèches — on lit, on ne navigue pas. */ .pp__main.is-behind { cursor: default; } .pp__main.is-behind .pp__arrow, .pp__main.is-behind .pp__zoom-hint { opacity: 0; pointer-events: none; } @media (min-width: 900px) { .pp { grid-template-columns: 1.05fr .95fr; align-items: start; } .pp__gallery { position: sticky; top: calc(var(--header-h) + 18px); } } /* ------------------------------------------------------------------ 15. Formulaires (contact, compte) ------------------------------------------------------------------ */ .form-field { text-align: left; margin-bottom: 16px; } .form-field label { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; font-size: .74rem; margin-bottom: 6px; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-line-dark); border-radius: 3px; font-family: var(--font-body); font-size: .95rem; color: var(--c-black); background: var(--c-white); } /* Focus clavier des formulaires (contact, compte). L'outline natif est remplacé, jamais simplement supprimé : la bordure violette seule donnait 1,24:1 sur le fond sombre (--c-purple vaut le violet de marque, volontairement identique dans les deux thèmes), soit un focus invisible pour qui navigue au clavier en thème sombre. L'anneau ci-dessous utilise --color-focus-ring, qui LUI est redéfini en sombre — exactement ce que fait déjà le champ de la newsletter. */ /* « :focus » seul, volontairement : c'est un sur-ensemble de :focus-visible, les deux ensemble n'ajoutaient rien. Et pour un champ de saisie on VEUT l'anneau aussi au clic, contrairement à un bouton. Les grouper faisait courir un risque inutile : un sélecteur qu'un navigateur ne comprend pas invalide TOUTE la règle, donc le correctif entier serait tombé là où il est justement nécessaire. */ .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 3px var(--color-focus-ring); } .form-field textarea { min-height: 140px; resize: vertical; } .form-field .field-error { display: none; color: var(--c-red); font-size: .78rem; margin-top: 4px; } .form-field.has-error input, .form-field.has-error textarea { border-color: var(--c-red); } .form-field.has-error .field-error { display: block; } .form-submit { width: 100%; padding: 15px; background: var(--c-purple); color: var(--color-text-invert-fixed); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .95rem; border-radius: 2px; transition: background .18s ease; } .form-submit:hover { background: var(--c-purple-ink); } .form-submit:disabled { opacity: .6; cursor: default; } .form-notice { margin-top: 14px; padding: 12px 14px; border-radius: 3px; font-size: .88rem; display: none; text-align: left; } .form-notice.is-ok { display: block; background: #eef7ee; color: #1c6b2a; border: 1px solid #bfe3c6; } .form-notice.is-error { display: block; background: #fdeeee; color: #a11616; border: 1px solid #f2c4c4; } /* ------------------------------------------------------------------ Bandes de suggestion en bas de page produit « Consulté récemment » et « Nos autres produits ». Même grammaire visuelle que la grille de l'accueil (.product-card) : cadre, titre, prix — mais en plus compact, puisque ces bandes sont secondaires par rapport à la fiche qu'elles suivent. Les deux sections sont écrites par js/main.js et restent [hidden] tant qu'elles n'ont rien à montrer. ------------------------------------------------------------------ */ .reco { margin-block: clamp(38px, 7vw, 66px) 0; } .reco[hidden] { display: none; } .reco__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(.95rem, 2.6vw, 1.1rem); color: var(--c-black); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); } .reco__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 26px); } @media (min-width: 640px) { .reco__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .reco__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .reco-card__frame { display: block; overflow: hidden; border-radius: 2px; background: var(--color-bg-inset); aspect-ratio: 4 / 5; } .reco-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .reco-card__frame:hover img { transform: scale(1.04); } .reco-card__title { margin: 10px 0 4px; font-size: .9rem; font-weight: 600; line-height: 1.35; } .reco-card__title a { color: var(--c-black); } .reco-card__title a:hover { color: var(--c-red); } .reco-card__price { margin: 0; color: var(--c-muted); font-size: .88rem; } @media (prefers-reduced-motion: reduce) { .reco-card__frame img, .reco-card__frame:hover img { transition: none; transform: none; } } /* ------------------------------------------------------------------ Page panier (panier.html) Deux colonnes sur grand écran : les articles à gauche, le récapitulatif et les coordonnées à droite, ce dernier restant en vue pendant qu'on fait défiler une longue liste. Une seule colonne en dessous de 900px, récapitulatif en dernier. ------------------------------------------------------------------ */ .cartpage { padding-block: clamp(28px, 6vw, 52px) clamp(40px, 8vw, 72px); } .cartpage__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--c-black); margin: 0 0 clamp(20px, 4vw, 32px); } .cartpage__empty { text-align: center; padding: 40px 0; color: var(--c-muted); } .cartpage__empty p { margin: 0 0 22px; } .cartpage__grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; } @media (min-width: 900px) { .cartpage__grid { grid-template-columns: minmax(0, 1fr) 340px; } .cartpage__side { position: sticky; top: 96px; } } /* ---- Lignes d'articles ---- */ .cartline { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); } .cartline:first-child { border-top: 1px solid var(--c-line); } .cartline__img { width: 80px; height: 100px; object-fit: cover; border-radius: 2px; background: var(--color-bg-inset); flex: 0 0 auto; } .cartline__info { flex: 1 1 auto; min-width: 0; } .cartline__name { margin: 0 0 4px; font-weight: 600; color: var(--c-black); } .cartline__size { margin: 0 0 10px; color: var(--c-muted); font-size: .85rem; } .cartline__qty { display: inline-flex; align-items: center; gap: 2px; } .cartline__qty button { width: 30px; height: 30px; border: 1px solid var(--c-line-dark); background: var(--c-white); color: var(--c-black); font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .cartline__qty button:hover:not(:disabled) { background: var(--c-black); color: var(--c-white); } .cartline__qty button:disabled { opacity: .4; cursor: not-allowed; } .cartline__qty span { min-width: 34px; text-align: center; font-weight: 600; } .cartline__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .cartline__remove { border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--c-muted); padding: 2px 4px; } .cartline__remove:hover { color: var(--c-red); } .cartline__price { margin: 0; font-weight: 700; color: var(--c-black); white-space: nowrap; } /* ---- Récapitulatif et coordonnées ---- */ .cartpage__side { border: 1px solid var(--c-line); border-radius: 2px; background: var(--color-bg-alt); padding: clamp(18px, 3vw, 26px); } .cartpage__subtitle { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-size: .9rem; color: var(--c-black); margin: 0 0 16px; } .cartpage__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; color: var(--c-muted); } .cartpage__row strong { font-size: 1.2rem; color: var(--c-black); } .cartpage__note { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); color: var(--c-muted); font-size: .82rem; line-height: 1.5; } .cartpage__hint { margin: 4px 0 0; color: var(--c-muted); font-size: .78rem; } .cartpage__check { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 18px; font-size: .85rem; line-height: 1.45; color: var(--c-black); cursor: pointer; } .cartpage__check input { margin-top: 2px; flex: 0 0 auto; } .cartpage__check a { text-decoration: underline; } .cartpage__submit { width: 100%; padding: 15px 20px; border: 0; border-radius: 2px; background: var(--color-btn-bg); color: var(--color-btn-text); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; cursor: pointer; transition: background .18s ease, color .18s ease; } .cartpage__submit:hover:not(:disabled) { background: var(--color-btn-bg-hover); color: var(--color-btn-text-hover); } .cartpage__submit:disabled { background: var(--color-btn-bg-off); cursor: progress; } .cartpage__secure { margin: 12px 0 0; text-align: center; color: var(--c-muted); font-size: .78rem; line-height: 1.5; } /* ------------------------------------------------------------------ Menu déroulant du compte (injecté par js/auth.js) Ancré sous l'icône du header. Le conteneur .header-actions est en position:relative pour que l'ancrage se fasse par rapport à lui. ------------------------------------------------------------------ */ .header-actions { position: relative; } .acct-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; min-width: 232px; padding: 6px; background: var(--color-surface); border: 1px solid var(--c-line); border-radius: 3px; box-shadow: 0 14px 34px var(--color-shadow); } .acct-menu[hidden] { display: none; } /* Petite flèche vers l'icône : rattache visuellement le menu au bouton au lieu de le laisser flotter. */ .acct-menu::before { content: ""; position: absolute; top: -7px; right: 16px; width: 12px; height: 12px; background: var(--color-surface); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); transform: rotate(45deg); } .acct-menu__hello { margin: 0; padding: 12px 14px 10px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--c-black); border-bottom: 1px solid var(--c-line); } .acct-menu__nav { display: flex; flex-direction: column; padding: 6px 0; } .acct-menu__nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--c-black); font-size: .92rem; border-radius: 2px; transition: background .15s ease, color .15s ease; } .acct-menu__nav a svg { width: 19px; height: 19px; flex: 0 0 auto; } .acct-menu__nav a:hover, .acct-menu__nav a:focus-visible { background: var(--color-bg-inset); color: var(--c-red); } .acct-menu__out { width: 100%; margin-top: 2px; padding: 12px 14px; border: 0; border-top: 1px solid var(--c-line); background: none; color: var(--c-muted); font-family: var(--font-body); font-size: .88rem; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s ease; } .acct-menu__out:hover { color: var(--c-red); } /* Sous la largeur du header compact, le menu prend toute la place disponible plutôt que de déborder de l'écran. */ @media (max-width: 480px) { .acct-menu { right: -8px; min-width: min(268px, calc(100vw - 24px)); } } /* ------------------------------------------------------------------ Pages de l'espace client (mon-compte, mes-commandes, mes-retours) ------------------------------------------------------------------ */ .acct-page { padding-block: clamp(28px, 6vw, 52px) clamp(40px, 8vw, 72px); } .acct-page__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--c-black); margin: 0 0 6px; } .acct-page__sub { color: var(--c-muted); margin: 0 0 clamp(22px, 4vw, 34px); } .acct-card { border: 1px solid var(--c-line); border-radius: 3px; background: var(--color-bg-alt); padding: clamp(16px, 3vw, 24px); margin-bottom: 16px; } .acct-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-line); } .acct-card__num { font-family: var(--font-head); font-weight: 700; letter-spacing: .6px; color: var(--c-black); } .acct-card__date { color: var(--c-muted); font-size: .86rem; } .acct-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: var(--color-bg-inset); color: var(--c-muted); } .acct-badge--ok { background: #e7f6ea; color: #1c6b2a; } .acct-badge--wait { background: #fdf3e2; color: #8a5a12; } .acct-badge--ko { background: #fdeeee; color: #a11616; } .acct-line { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: .92rem; } .acct-line span:first-child { color: var(--c-muted); } .acct-total { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--c-line); font-family: var(--font-head); font-weight: 700; color: var(--c-black); } .acct-empty { text-align: center; padding: 38px 16px; color: var(--c-muted); } .acct-empty p { margin: 0 0 20px; }