:root { /* ---- Couleur (HSL pour variation runtime ; hex en commentaire) ---- */ --color-canvas: hsl(33 53% 97%); /* #FBF7F2 */ --color-elevated: hsl(36 100% 99%); /* #FFFDFA */ --color-cream: hsl(32 41% 92%); /* #F3EBE2 */ --color-ink: hsl(24 22% 14%); /* #2A211B */ --color-ink-2: hsl(23 14% 25%); /* #4A3F38 */ --color-muted: hsl(25 11% 38%); /* #6B5E55 — texte secondaire, AA sur canvas */ --color-line: hsl(30 29% 86%); /* #E6DCD2 */ --color-accent: hsl(16 57% 42%); /* #A94E2E — terre cuite, CTA */ --color-accent-hover: hsl(15 58% 35%); /* #8F4126 */ --color-accent-soft: hsl(18 59% 91%); /* #F6E4DC */ --color-sage: hsl(104 13% 46%); /* #6F8567 — non-texte */ --color-sage-soft: hsl(96 21% 91%); --color-blush: hsl(12 45% 73%); /* #D9A79A — décoratif */ --color-success: hsl(131 32% 36%); --color-warning: hsl(37 78% 28%); --color-error: hsl(2 57% 42%); --color-info: hsl(207 30% 42%); --color-focus: hsl(20 61% 47%); /* Rythme d'opacité sur l'encre */ --ink-05: hsl(24 22% 14% / .05); --ink-10: hsl(24 22% 14% / .10); --ink-20: hsl(24 22% 14% / .20); --ink-40: hsl(24 22% 14% / .40); --ink-60: hsl(24 22% 14% / .60); --ink-80: hsl(24 22% 14% / .80); /* Surfaces sombres (bandeau d'annonce, pied de page, héros éditorial) */ --color-deep: hsl(24 18% 9%); /* #1B1613 */ --color-deep-line: hsl(25 15% 20%); /* #3A312B */ --color-deep-mute: hsl(24 13% 62%); /* #A99A8F */ --color-deep-soft: hsl(28 18% 80%); /* #D3C6BA */ --veil-deep: hsl(24 30% 12%); /* voile des visuels pleine page */ /* Neutres chauds */ --n-50:#FBF7F2; --n-100:#F3EBE2; --n-200:#E6DCD2; --n-300:#D3C6BA; --n-400:#A99A8F; --n-500:#6B5E55; --n-600:#574C44; --n-700:#4A3F38; --n-800:#3A312B; --n-900:#2A211B; --n-950:#1B1613; /* ---- Typographie ---- */ --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.375rem; --fs-5xl:3rem; --fs-6xl:3.75rem; /* ratio 1.25 */ --lh-display:1.05; --lh-heading:1.2; --lh-body:1.55; --lh-ui:1.4; --ls-display:-.02em; --ls-label:.08em; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-display:700; /* ---- Espacement (base 4) ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px; --pad-x: clamp(16px, 4vw, 48px); --container-prose:65ch; --container-narrow:640px; --container:1200px; --container-wide:1440px; /* ---- Forme : personnalité pilule ---- */ --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px; /* ---- Élévation (ombres teintées encre chaude, jamais noir pur) ---- */ --sh-xs: 0 1px 2px hsl(24 22% 14% / .06); --sh-sm: 0 2px 6px hsl(24 22% 14% / .08); --sh-md: 0 6px 16px hsl(24 22% 14% / .10); --sh-lg: 0 14px 32px hsl(24 22% 14% / .14); --sh-xl: 0 24px 56px hsl(24 22% 14% / .18); --sh-inset: inset 0 1px 2px hsl(24 22% 14% / .08); /* ---- Mouvement ---- */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* entrées — signature */ --ease-inout: cubic-bezier(.76, 0, .24, 1); /* changements d'état */ --dur-instant:100ms; --dur-ui:200ms; --dur-component:400ms; --dur-page:600ms; color-scheme: light; } /* Mode sombre : opt-in explicite (data-theme="dark" sur ), jamais automatique — les photos produit sur fond blanc et la chaleur du canvas crème sont la marque. */ :root[data-theme="dark"] { --color-canvas: hsl(22 17% 9%); --color-elevated: hsl(24 16% 12%); --color-cream: hsl(24 16% 12%); --color-ink: hsl(30 36% 91%); --color-ink-2: hsl(26 14% 67%); --color-muted: hsl(26 14% 67%); --color-line: hsl(24 15% 20%); --color-accent: hsl(18 68% 65%); --color-accent-hover: hsl(18 68% 65% / .9); --color-accent-soft: hsl(18 68% 65% / .15); --color-sage: hsl(106 16% 69%); --color-sage-soft: hsl(106 16% 69% / .15); --color-success: hsl(128 37% 68%); --color-warning: hsl(39 68% 62%); --color-error: hsl(3 78% 73%); --color-info: hsl(207 37% 72%); --color-focus: hsl(18 68% 65%); --sh-xs: 0 0 0 1px var(--color-line); --sh-sm: 0 0 0 1px var(--color-line); --sh-md: 0 0 0 1px var(--color-line), inset 0 1px 0 hsl(0 0% 100% / .04); --sh-lg: var(--sh-md); --sh-xl: var(--sh-md); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant:0ms; --dur-ui:0ms; --dur-component:0ms; --dur-page:0ms; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /** * Boutique PATCH — composants. * * Assemblé au build avec design-system/tokens.css (source unique des * variables) pour produire assets/css/boutique.css. Ne jamais éditer le * fichier assemblé : il est régénéré à chaque `build-site.mjs`. */ /* ---------- Base ---------- */ *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--color-canvas); color:var(--color-ink); font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--color-accent); } button{ font:inherit; color:inherit; cursor:pointer; } [hidden]{ display:none !important; } :focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; border-radius:var(--r-sm); } .skip{ position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px; background:var(--color-ink); color:var(--color-canvas); border-radius:0 0 var(--r-md) 0; } .skip:focus{ left:0; } /* ---------- Animations ---------- */ @keyframes reveal{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @keyframes revealSlow{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } @keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } } @keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:none; } } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes marquee{ from{ transform:none; } to{ transform:translateX(-50%); } } @keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(7px); opacity:1; } } /* ---------- Typographie ---------- */ .display{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(2rem, 5vw, 3.6rem); line-height:.94; letter-spacing:-.01em; margin:0; } .eyebrow{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.22em; text-transform:uppercase; color:var(--color-muted); } .lede{ font-size:var(--fs-lg); color:var(--color-ink-2); max-width:var(--container-prose); margin:0; } /* ---------- Boutons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:48px; padding:0 26px; border-radius:var(--r-full); border:1.5px solid transparent; font-weight:var(--fw-semibold); font-size:var(--fs-base); line-height:1; text-align:center; transition:transform var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-inout), box-shadow var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui); } .btn--primary{ background:var(--color-accent); color:var(--color-elevated); box-shadow:var(--sh-sm); } .btn--primary:hover{ background:var(--color-accent-hover); color:var(--color-elevated); transform:translateY(-2px); box-shadow:var(--sh-md); } .btn--primary:active{ transform:none; box-shadow:var(--sh-xs); } .btn--ghost{ background:transparent; border-color:var(--color-ink); color:var(--color-ink); } .btn--ghost:hover{ background:var(--color-cream); color:var(--color-ink); transform:translateY(-2px); } .btn--light{ background:var(--color-elevated); color:var(--color-ink); } .btn--light:hover{ background:var(--color-accent); color:var(--color-elevated); transform:translateY(-2px); } .btn--outline-light{ background:transparent; border-color:hsl(36 100% 99% / .65); color:var(--color-elevated); } .btn--outline-light:hover{ background:hsl(36 100% 99% / .16); color:var(--color-elevated); transform:translateY(-2px); } .btn--block{ width:100%; } .btn--lg{ min-height:54px; padding:0 32px; font-size:1.06rem; } .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; } /* ---------- Bandeau d'annonce ---------- */ .shop-ticker{ background:var(--color-deep); color:var(--color-canvas); font-size:var(--fs-xs); font-weight:var(--fw-medium); letter-spacing:.1em; text-transform:uppercase; overflow:hidden; white-space:nowrap; padding:8px 0; } .shop-ticker__track{ display:flex; width:max-content; animation:marquee 42s linear infinite; } .shop-ticker__set{ display:flex; gap:38px; padding-right:38px; } .shop-ticker__sep{ color:var(--color-blush); } /* ---------- En-tête ---------- */ .shop-nav{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--sp-4); height:72px; padding:0 var(--pad-x); background:hsl(33 53% 97% / .94); color:var(--color-ink); border-bottom:1px solid var(--color-line); backdrop-filter:blur(12px); transition:background var(--dur-component) var(--ease-inout), color var(--dur-component) var(--ease-inout), border-color var(--dur-component); } /* Sur l'accueil, l'en-tête flotte au-dessus du héros jusqu'au premier défilement. */ .shop-nav.is-over-hero{ background:transparent; color:var(--color-elevated); border-bottom-color:transparent; } .shop-nav__logo{ display:block; } .shop-nav__logo span{ display:block; font-family:var(--font-display); font-size:27px; letter-spacing:.005em; line-height:.9; text-transform:uppercase; } .shop-nav__logo small{ display:block; font-size:8.5px; letter-spacing:.42em; opacity:.72; margin-top:3px; } .shop-nav__logo:hover{ color:inherit; } .shop-nav__links{ display:flex; gap:clamp(14px, 2vw, 26px); margin-left:clamp(12px, 3vw, 40px); flex:1; overflow-x:auto; scrollbar-width:none; } .shop-nav__links::-webkit-scrollbar{ display:none; } .shop-nav__links a{ padding:6px 0; font-weight:var(--fw-medium); font-size:var(--fs-sm); letter-spacing:.02em; white-space:nowrap; opacity:.78; border-bottom:2px solid transparent; transition:opacity var(--dur-ui), border-color var(--dur-ui); } .shop-nav__links a:hover{ opacity:1; color:inherit; } .shop-nav__links a[aria-current="page"]{ opacity:1; border-bottom-color:var(--color-accent); } .shop-nav__icon{ display:inline-grid; place-items:center; width:44px; height:44px; flex:0 0 auto; border:0; background:transparent; border-radius:var(--r-full); color:inherit; opacity:.78; transition:opacity var(--dur-ui); } .shop-nav__icon:hover{ opacity:1; } .shop-nav__cart{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; min-height:44px; padding:0 16px; border-radius:var(--r-full); border:1.5px solid currentColor; background:transparent; color:inherit; font-weight:var(--fw-medium); font-size:var(--fs-sm); transition:opacity var(--dur-ui); } .shop-nav__cart:hover{ opacity:.7; color:inherit; } .shop-nav__cart span{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-full); background:var(--color-accent); color:var(--color-elevated); font-size:var(--fs-xs); font-weight:var(--fw-semibold); } .shop-nav__cart-label{ display:none; } @media (min-width:600px){ .shop-nav__cart-label{ display:inline; } } /* ---------- Accueil : héros ---------- */ .shop-hero{ position:relative; height:min(94vh, 920px); overflow:hidden; background:var(--color-deep); margin:0; } body[data-page="home"] .shop-hero{ margin-top:-72px; } .shop-hero img{ width:100%; height:100%; object-fit:cover; object-position:62% center; animation:kenburns 18s ease-out both; } .shop-hero__film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% center; opacity:0; transition:opacity 600ms var(--ease-out); } .shop-hero__film.is-ready{ opacity:1; } .shop-hero__veil{ position:absolute; inset:0; background:linear-gradient(to top, hsl(24 30% 12% / .7) 0%, hsl(24 30% 12% / .18) 48%, hsl(24 30% 12% / .3) 100%); } .shop-hero__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px, 5vw, 72px) var(--pad-x); color:var(--color-elevated); } .shop-hero__inner{ max-width:min(680px, 92%); animation:revealSlow 900ms var(--ease-out) both; } .shop-hero__eyebrow{ color:var(--color-accent-soft); margin-bottom:clamp(14px, 2vw, 22px); } .shop-hero__title{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(3rem, 9.5vw, 7.5rem); line-height:1.02; letter-spacing:.005em; margin:0 0 clamp(14px, 2vw, 22px); max-width:15ch; text-shadow:0 2px 40px hsl(24 30% 12% / .45); } .shop-hero__tag{ font-size:clamp(1.06rem, 1.8vw, 1.3rem); line-height:1.5; margin:0 0 clamp(22px, 3vw, 32px); max-width:40ch; opacity:.95; } .shop-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); } .shop-hero__cue{ display:flex; justify-content:center; margin-top:clamp(20px, 3vw, 36px); color:var(--color-elevated); opacity:.7; animation:cue 2.4s ease-in-out infinite; } /* ---------- Réassurance ---------- */ .shop-trust{ display:grid; gap:18px; padding:22px var(--pad-x); background:var(--color-cream); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } .shop-trust > div{ display:flex; gap:var(--sp-3); align-items:flex-start; } .shop-trust__dot{ flex:0 0 9px; height:9px; margin-top:7px; border-radius:50%; background:var(--color-sage); } .shop-trust b{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink); margin-bottom:3px; } .shop-trust span span{ display:block; font-size:var(--fs-sm); color:var(--color-ink-2); line-height:1.5; } /* ---------- Tuiles de catégorie ---------- */ .shop-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .shop-tile{ position:relative; display:block; overflow:hidden; background:var(--color-cream); height:min(84vh, 760px); color:var(--color-elevated); } .shop-tiles--short .shop-tile{ height:min(76vh, 700px); } /* Sur mobile les tuiles s'empilent : à 84vh chacune, l'accueil devient un couloir de 8 écrans. On les raccourcit sans changer leur composition. */ @media (max-width:767px){ .shop-tile{ height:min(56vh, 420px); } .shop-tiles--short .shop-tile{ height:min(52vh, 390px); } } .shop-tile img{ width:100%; height:100%; object-fit:cover; object-position:left center; transition:transform 900ms var(--ease-out); } .shop-tile:hover img{ transform:scale(1.05); } .shop-tile:hover{ color:var(--color-elevated); } .shop-tile__veil{ position:absolute; inset:0; background:linear-gradient(to top, hsl(24 30% 12% / .6) 0%, hsl(24 30% 12% / .08) 55%, transparent 100%); } .shop-tile__body{ position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:6px; padding:clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px); } .shop-tile__count{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.22em; text-transform:uppercase; opacity:.9; } .shop-tile__name{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(2.1rem, 4.6vw, 3.9rem); line-height:.92; letter-spacing:-.01em; } .shop-tile__more{ display:inline-flex; align-items:center; gap:9px; font-weight:var(--fw-semibold); font-size:15px; margin-top:6px; } /* ---------- Sections ---------- */ .shop-section{ padding:clamp(48px, 7vw, 104px) var(--pad-x); max-width:var(--container-wide); margin:0 auto; } .shop-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(22px, 3vw, 36px); } .shop-section__head .eyebrow{ margin-bottom:10px; } .shop-link{ background:none; border:0; padding:0; font-weight:var(--fw-semibold); font-size:15px; color:var(--color-accent); border-bottom:1.5px solid var(--color-accent-soft); transition:border-color var(--dur-ui); } .shop-link:hover{ border-bottom-color:var(--color-accent); color:var(--color-accent); } /* ---------- Grille produits ---------- */ .shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:clamp(18px, 2.5vw, 34px) clamp(12px, 1.6vw, 24px); } /* Deux colonnes sur mobile : à une seule, un catalogue de 17 pièces fait onze mille pixels de haut et on ne compare plus rien. */ @media (max-width:600px){ .shop-grid, .shop-cross__grid{ grid-template-columns:repeat(2, 1fr); gap:18px 12px; } .shop-card__name{ font-size:var(--fs-sm); } } .shop-card{ margin:0; } .shop-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-lg); background:var(--color-cream); margin-bottom:13px; } .shop-card__media img{ width:100%; height:100%; object-fit:cover; object-position:left center; transition:transform 700ms var(--ease-out); } .shop-card__media a{ display:block; height:100%; } .shop-card:hover .shop-card__media img{ transform:scale(1.04); } .shop-card__alt{ position:absolute; inset:0; opacity:0; transition:opacity var(--dur-component) var(--ease-out); } .shop-card:hover .shop-card__alt{ opacity:1; } .shop-card__name{ display:block; font-weight:var(--fw-medium); font-size:var(--fs-base); line-height:1.35; margin:0 0 5px; transition:color var(--dur-ui); } .shop-card__name:hover{ color:var(--color-accent); } .shop-card__price{ font-size:var(--fs-base); font-weight:var(--fw-semibold); margin:0 0 6px; } .shop-card__colors{ display:flex; align-items:center; gap:5px; margin:0 0 5px; } .shop-card__dot{ width:12px; height:12px; border-radius:50%; border:1px solid var(--ink-20); } .shop-card__more, .shop-card__sizes{ font-size:var(--fs-xs); color:var(--color-muted); } .shop-card__sizes{ letter-spacing:.04em; margin:0; } /* Ajout rapide : n'apparaît qu'au survol, jamais sur mobile (pas de survol). */ .shop-quick{ position:absolute; inset:auto 10px 10px 10px; pointer-events:none; } .shop-quick__open{ width:100%; pointer-events:auto; opacity:0; min-height:44px; background:var(--color-accent); color:var(--color-elevated); border:0; border-radius:var(--r-full); font-weight:var(--fw-semibold); font-size:var(--fs-sm); transition:opacity var(--dur-ui) var(--ease-out), background var(--dur-ui); } .shop-card:hover .shop-quick__open{ opacity:1; } .shop-quick__open:hover{ background:var(--color-accent-hover); } .shop-quick__panel{ background:hsl(36 100% 99% / .97); backdrop-filter:blur(8px); border-radius:var(--r-md); padding:10px; pointer-events:auto; animation:reveal var(--dur-ui) var(--ease-out) both; box-shadow:var(--sh-md); } .shop-quick__head{ display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:var(--fw-semibold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); margin-bottom:var(--sp-2); } .shop-quick__head button{ background:none; border:0; padding:0; color:var(--color-muted); display:flex; } .shop-quick__sizes{ display:flex; gap:6px; flex-wrap:wrap; } .shop-quick__sizes button{ min-width:42px; min-height:38px; border:1.5px solid var(--color-line); background:var(--color-elevated); border-radius:var(--r-md); font-weight:var(--fw-medium); font-size:13px; transition:border-color var(--dur-ui), background var(--dur-ui); } .shop-quick__sizes button:hover{ border-color:var(--color-ink); background:var(--color-cream); } @media (hover:none){ .shop-quick{ display:none; } } /* ---------- Accueil : parti pris ---------- */ .shop-credo{ position:relative; height:min(88vh, 820px); overflow:hidden; background:var(--color-deep); } .shop-credo > img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; } .shop-credo__veil{ position:absolute; inset:0; background:linear-gradient(to right, hsl(24 30% 12% / .78) 0%, hsl(24 30% 12% / .42) 48%, hsl(24 30% 12% / .12) 100%); } .shop-credo__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px, 5vw, 80px) var(--pad-x); color:var(--color-elevated); } .shop-credo__inner{ max-width:min(620px, 94%); } .shop-credo__inner .eyebrow{ color:var(--color-blush); margin-bottom:14px; } .shop-credo__title{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(2.2rem, 6vw, 4.6rem); line-height:.9; letter-spacing:-.012em; margin:0 0 18px; } .shop-credo__lead{ font-size:clamp(1rem, 1.6vw, 1.18rem); line-height:1.6; color:var(--color-line); max-width:46ch; margin:0 0 clamp(20px, 3vw, 30px); } .shop-credo__list{ display:grid; gap:0; max-width:520px; margin:0; padding:0; list-style:none; } .shop-credo__list li{ display:flex; gap:18px; padding:16px 0; border-top:1px solid hsl(36 100% 99% / .22); } .shop-credo__n{ font-family:var(--font-display); font-size:var(--fs-base); color:var(--color-blush); flex-shrink:0; width:26px; } .shop-credo__list b{ display:block; font-size:var(--fs-base); font-weight:var(--fw-semibold); margin-bottom:4px; } .shop-credo__list span span{ display:block; font-size:var(--fs-sm); line-height:1.55; color:var(--color-deep-soft); } /* ---------- Accueil : guide des tailles ---------- */ .shop-sizing{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap:clamp(24px, 4vw, 64px); align-items:center; } .shop-sizing__img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-xl); background:var(--color-cream); } .shop-sizing__img img{ width:100%; height:100%; object-fit:cover; object-position:left center; } .shop-sizing h2{ margin:0 0 16px; } .shop-sizing p{ font-size:var(--fs-lg); line-height:1.6; color:var(--color-ink-2); max-width:42ch; margin:0 0 26px; } /* ---------- Catalogue ---------- */ .shop-cat{ max-width:var(--container-wide); margin:0 auto; padding:clamp(24px, 4vw, 48px) var(--pad-x) 0; animation:reveal var(--dur-component) var(--ease-out) both; } .shop-cat__head{ margin-bottom:clamp(20px, 3vw, 32px); } .shop-cat__head .eyebrow{ margin-bottom:10px; } .shop-cat__head h1{ margin:0 0 12px; font-size:clamp(2.4rem, 7vw, 5rem); line-height:.9; letter-spacing:-.015em; } .shop-cat__head .lede{ max-width:46ch; } .shop-bar{ position:sticky; top:72px; z-index:20; background:hsl(33 53% 97% / .95); backdrop-filter:blur(12px); padding:12px 0; margin-bottom:clamp(20px, 3vw, 30px); border-bottom:1px solid var(--color-line); display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; } .shop-cat__filters{ display:flex; gap:var(--sp-2); flex:1; overflow-x:auto; scrollbar-width:none; } .shop-cat__filters::-webkit-scrollbar{ display:none; } .shop-chip{ display:inline-flex; align-items:center; flex:0 0 auto; min-height:40px; padding:0 18px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap; border:1.5px solid var(--color-line); background:var(--color-elevated); color:var(--color-ink); transition:background var(--dur-ui), border-color var(--dur-ui), color var(--dur-ui); } .shop-chip:hover{ border-color:var(--color-ink); } .shop-chip.is-active{ background:var(--color-ink); color:var(--color-canvas); border-color:var(--color-ink); } .shop-bar__meta{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--color-muted); } /* Sur mobile la ligne de tri dépasse la largeur : elle défile comme les filtres, sinon « Prix décroissant » est hors d'atteinte. */ @media (max-width:600px){ .shop-bar__meta{ width:100%; overflow-x:auto; scrollbar-width:none; } .shop-bar__meta::-webkit-scrollbar{ display:none; } .shop-bar__meta > *{ flex:0 0 auto; } } .shop-bar__rule{ width:1px; height:16px; background:var(--color-line); } .shop-sort{ background:none; border:0; padding:4px 0; font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap; border-bottom:1.5px solid transparent; color:var(--color-muted); transition:border-color var(--dur-ui), color var(--dur-ui); } .shop-sort:hover{ color:var(--color-ink); } .shop-sort.is-active{ color:var(--color-ink); border-bottom-color:var(--color-ink); } .shop-cat .shop-grid{ padding-bottom:clamp(48px, 7vw, 88px); } /* ---------- Fiche produit ---------- */ .shop-pdp{ animation:reveal var(--dur-component) var(--ease-out) both; } .shop-pdp__wrap{ max-width:var(--container-wide); margin:0 auto; padding:clamp(14px, 2vw, 24px) var(--pad-x) 0; } .shop-crumb{ font-size:var(--fs-sm); color:var(--color-muted); margin-bottom:14px; display:flex; gap:var(--sp-2); align-items:center; } .shop-crumb a:hover{ color:var(--color-accent); } .shop-crumb strong{ color:var(--color-ink); font-weight:var(--fw-regular); } .shop-pdp__cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:clamp(24px, 4vw, 56px); align-items:start; padding-bottom:clamp(32px, 5vw, 64px); } .p-gallery{ display:grid; gap:10px; } .p-gallery__main{ border-radius:var(--r-lg); overflow:hidden; background:var(--color-cream); } .p-gallery__main img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:left center; display:block; animation:fadeIn var(--dur-component) var(--ease-out); } .p-gallery__thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); gap:var(--sp-2); } .p-thumb{ padding:0; border:2px solid transparent; border-radius:var(--r-md); background:var(--color-cream); overflow:hidden; transition:border-color var(--dur-ui); } .p-thumb img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:left center; display:block; } .p-thumb.is-active{ border-color:var(--color-ink); } .shop-pdp__info h1{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(1.7rem, 3.4vw, 2.7rem); line-height:.98; letter-spacing:-.012em; margin:0 0 12px; } .shop-pdp__hook{ font-size:var(--fs-lg); color:var(--color-ink-2); margin:0 0 18px; } .shop-pdp__price{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); margin:0 0 26px; } .shop-pdp__vat{ font-size:var(--fs-sm); font-weight:var(--fw-regular); color:var(--color-muted); } @media (min-width:900px){ .shop-pdp__info{ position:sticky; top:92px; } } .shop-pdp__colors, .shop-pdp__sizes{ margin-bottom:24px; } .shop-pdp__colors .eyebrow{ letter-spacing:.14em; margin-bottom:10px; } .shop-pdp__colors b{ font-weight:var(--fw-medium); text-transform:none; letter-spacing:0; color:var(--color-ink); } .p-swatches{ display:flex; flex-wrap:wrap; gap:var(--sp-2); } .p-swatch{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:40px; padding:0 14px 0 8px; border-radius:var(--r-full); background:var(--color-elevated); font-size:var(--fs-sm); font-weight:var(--fw-medium); border:1.5px solid var(--color-line); transition:border-color var(--dur-ui), box-shadow var(--dur-ui); } .p-swatch:hover{ border-color:var(--color-ink); } .p-swatch.is-active{ border-color:var(--color-ink); box-shadow:inset 0 0 0 1px var(--color-ink); } .p-swatch.is-out{ opacity:.4; cursor:not-allowed; text-decoration:line-through; } .p-swatch__dot{ width:22px; height:22px; border-radius:50%; border:1px solid var(--ink-20); flex:0 0 auto; } .p-more-colors{ display:inline-flex; align-items:center; min-height:40px; font-size:var(--fs-sm); color:var(--color-muted); } .shop-pdp__sizes-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); margin-bottom:10px; } .shop-pdp__sizes-head .eyebrow{ letter-spacing:.14em; } .shop-sizes{ display:flex; flex-wrap:wrap; gap:var(--sp-2); } .shop-size{ min-width:52px; min-height:44px; padding:0 14px; border-radius:var(--r-md); font-weight:var(--fw-medium); border:1.5px solid var(--color-line); background:var(--color-elevated); transition:border-color var(--dur-ui), background var(--dur-ui), box-shadow var(--dur-ui); } .shop-size:hover{ border-color:var(--color-ink); } .shop-size[aria-pressed="true"]{ border-color:var(--color-ink); background:var(--color-cream); box-shadow:inset 0 0 0 1px var(--color-ink); } .shop-size.is-out, .shop-size[disabled]{ opacity:.35; cursor:not-allowed; text-decoration:line-through; } .shop-pdp__error{ margin-top:var(--sp-3); padding:12px 14px; border-radius:var(--r-md); background:hsl(2 57% 42% / .08); border-left:3px solid var(--color-error); font-size:var(--fs-sm); animation:reveal var(--dur-ui) var(--ease-out) both; } .shop-pdp__add{ width:100%; min-height:54px; font-size:var(--fs-lg); } .shop-pdp__reassure{ display:grid; gap:7px; margin:24px 0 0; padding:16px; background:var(--color-cream); border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--color-ink-2); } .shop-pdp__reassure span{ display:flex; gap:9px; align-items:flex-start; line-height:1.5; } .shop-pdp__reassure span::before{ content:"✓"; color:var(--color-success); font-weight:var(--fw-semibold); flex-shrink:0; } .p-copy{ margin-top:32px; padding-top:24px; border-top:1px solid var(--color-line); } .p-copy__lead, .shop-pdp__desc p{ font-size:var(--fs-base); line-height:1.7; margin:0 0 24px; } .p-copy__benefits{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:var(--sp-4); } .p-copy__benefits li{ display:grid; gap:2px; padding-left:18px; position:relative; } .p-copy__benefits li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--color-blush); } .p-copy__benefits strong{ font-weight:var(--fw-semibold); } .p-copy__benefits span{ font-size:var(--fs-sm); color:var(--color-ink-2); line-height:1.55; } .p-copy__specs, .shop-spec{ display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:var(--fs-sm); margin:0; padding:16px 0; border-top:1px solid var(--color-line); } .p-copy__specs dt, .shop-spec dt{ color:var(--color-muted); letter-spacing:.02em; } .p-copy__specs dd, .shop-spec dd{ margin:0; } .shop-cross{ background:var(--color-cream); padding:clamp(40px, 6vw, 88px) 0; } .shop-cross__inner{ max-width:var(--container-wide); margin:0 auto; padding:0 var(--pad-x); } .shop-cross h2{ font-family:var(--font-display); font-weight:var(--fw-regular); text-transform:uppercase; font-size:clamp(1.7rem, 4vw, 2.9rem); line-height:.94; letter-spacing:-.01em; margin:0 0 clamp(20px, 3vw, 32px); } .shop-cross__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:clamp(14px, 2vw, 24px); } .shop-cross .shop-card__media{ background:var(--color-elevated); margin-bottom:12px; } .shop-cross .shop-card__name{ font-size:15px; } .shop-cross .shop-card__price{ font-size:15px; margin-top:5px; } /* ---------- Barre d'achat fixe (mobile, fiche) ---------- */ .shop-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:28; background:hsl(36 100% 99% / .97); backdrop-filter:blur(14px); border-top:1px solid var(--color-line); padding:10px clamp(14px, 4vw, 24px); display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; box-shadow:0 -6px 16px hsl(24 22% 14% / .08); } .shop-sticky__info{ min-width:0; } .shop-sticky__title{ font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .shop-sticky__sel{ font-size:var(--fs-xs); color:var(--color-muted); } .shop-sticky .btn{ flex-shrink:0; min-height:46px; padding:0 22px; font-size:15px; } @media (min-width:900px){ .shop-sticky{ display:none; } } /* Tiroir ou modale ouverts : on gèle la page derrière et la barre d'achat fixe s'efface, sinon elle flotte au-dessus du voile. */ html.is-locked{ overflow:hidden; } html.is-locked .shop-sticky{ display:none; } body[data-page="product"]{ padding-bottom:0; } /* ---------- Panier (page) ---------- */ .shop-cart, .shop-success{ padding:var(--sp-8) var(--pad-x) var(--sp-16); max-width:var(--container); margin:0 auto; } .shop-cart__head, .shop-success .eyebrow{ margin-bottom:var(--sp-6); } .shop-cart__layout{ display:grid; gap:var(--sp-8); } @media (min-width:900px){ .shop-cart__layout{ grid-template-columns:1.4fr .9fr; align-items:start; } .shop-cart__summary{ position:sticky; top:88px; } } .shop-cart__lines{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); } .shop-line{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); align-items:center; padding:var(--sp-4); background:var(--color-elevated); border:1px solid var(--color-line); border-radius:var(--r-lg); } .shop-line__title{ font-weight:var(--fw-medium); margin:0; } .shop-line__size{ font-size:var(--fs-sm); color:var(--color-muted); margin:2px 0 0; } .shop-line__remove{ background:none; border:0; padding:4px 0; font-size:var(--fs-sm); color:var(--color-muted); text-decoration:underline; text-underline-offset:3px; } .shop-line__remove:hover{ color:var(--color-error); } .shop-line__qty{ display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--color-line); border-radius:var(--r-full); overflow:hidden; } .shop-line__qty button{ width:38px; height:38px; border:0; background:transparent; font-size:var(--fs-lg); transition:background var(--dur-ui); } .shop-line__qty button:hover{ background:var(--color-cream); } .shop-line__qty span{ min-width:24px; text-align:center; font-weight:var(--fw-medium); } .shop-line__price{ font-weight:var(--fw-semibold); margin:0; } @media (min-width:640px){ .shop-line{ grid-template-columns:1fr auto auto; } .shop-line__price{ min-width:80px; text-align:right; } } .shop-cart__summary{ background:var(--color-cream); padding:var(--sp-6); border-radius:var(--r-lg); } .shop-sum{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0 0 var(--sp-4); font-size:var(--fs-base); } .shop-sum dd{ margin:0; text-align:right; } .shop-sum__total{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); padding-top:10px; border-top:1px solid var(--ink-10); } .shop-cart__free{ font-size:var(--fs-sm); color:var(--color-accent); margin:0 0 var(--sp-3); } .shop-cart__error{ font-size:var(--fs-sm); color:var(--color-error); margin:var(--sp-3) 0 0; } .shop-cart__fine{ font-size:var(--fs-sm); color:var(--color-muted); margin:var(--sp-4) 0 0; line-height:1.6; } .shop-cart__empty{ display:grid; gap:var(--sp-4); justify-items:start; } .shop-success__inner{ max-width:640px; } .shop-success__recap{ margin:var(--sp-8) 0; padding:var(--sp-6); background:var(--color-cream); border-radius:var(--r-lg); } .shop-success__recap-title{ font-size:var(--fs-lg); margin:0 0 var(--sp-4); } .shop-success__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); } /* ---------- Tiroir panier ---------- */ .shop-scrim{ position:fixed; inset:0; z-index:80; background:hsl(24 30% 12% / .48); animation:fadeIn var(--dur-ui) var(--ease-out) both; } .shop-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(440px, 100vw); background:var(--color-canvas); display:flex; flex-direction:column; animation:slideIn var(--dur-component) var(--ease-out) both; box-shadow:var(--sh-xl); } .shop-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--color-line); } .shop-drawer__head span{ font-family:var(--font-display); font-size:24px; letter-spacing:-.005em; text-transform:uppercase; } .shop-drawer__close{ display:inline-grid; place-items:center; width:44px; height:44px; border:0; background:transparent; border-radius:var(--r-full); color:var(--color-ink-2); transition:background var(--dur-ui); } .shop-drawer__close:hover{ background:var(--color-cream); } .shop-drawer__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:40px 30px; text-align:center; } .shop-drawer__empty p{ font-size:var(--fs-lg); color:var(--color-ink-2); margin:0; max-width:26ch; } .shop-drawer__lines{ flex:1; overflow:auto; padding:6px 22px; margin:0; list-style:none; } .d-line{ display:grid; grid-template-columns:76px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--color-line); } .d-line__media{ overflow:hidden; border-radius:var(--r-md); background:var(--color-cream); aspect-ratio:4/5; } .d-line__media img{ width:100%; height:100%; object-fit:cover; object-position:left center; } .d-line__body{ min-width:0; } .d-line__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .d-line__name{ font-size:var(--fs-sm); font-weight:var(--fw-medium); line-height:1.35; } .d-line__remove{ background:none; border:0; padding:2px; font-size:13px; color:var(--color-muted); text-decoration:underline; text-underline-offset:3px; flex-shrink:0; } .d-line__remove:hover{ color:var(--color-error); } .d-line__variant{ font-size:var(--fs-sm); color:var(--color-muted); margin:3px 0 10px; } .d-line__row{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .d-line__qty{ display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--color-line); border-radius:var(--r-full); overflow:hidden; } .d-line__qty button{ width:38px; height:38px; border:0; background:transparent; font-size:var(--fs-lg); transition:background var(--dur-ui); } .d-line__qty button:hover{ background:var(--color-cream); } .d-line__qty span{ min-width:24px; text-align:center; font-weight:var(--fw-medium); font-size:var(--fs-sm); } .d-line__total{ font-weight:var(--fw-semibold); font-size:15px; } .shop-drawer__foot{ padding:22px; border-top:1px solid var(--color-line); background:var(--color-cream); } .shop-drawer__foot .shop-sum{ margin-bottom:16px; } .shop-drawer__fine{ margin:14px 0 0; font-size:var(--fs-sm); color:var(--color-muted); line-height:1.6; } /* ---------- Guide des tailles ---------- */ .shop-modal{ position:fixed; inset:0; z-index:90; background:hsl(24 30% 12% / .5); animation:fadeIn var(--dur-ui) var(--ease-out) both; display:flex; align-items:center; justify-content:center; padding:clamp(12px, 3vw, 32px); } .shop-modal__box{ background:var(--color-canvas); border-radius:var(--r-xl); max-width:640px; width:100%; max-height:88vh; overflow:auto; animation:reveal var(--dur-component) var(--ease-out) both; box-shadow:var(--sh-xl); } .shop-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--color-line); position:sticky; top:0; background:var(--color-canvas); } .shop-modal__head span{ font-family:var(--font-display); font-size:25px; text-transform:uppercase; } .shop-modal__body{ padding:24px; } .shop-modal__body > p{ font-size:var(--fs-sm); line-height:1.65; color:var(--color-ink-2); margin:0 0 20px; } .shop-modal__note{ color:var(--color-muted) !important; margin:18px 0 0 !important; } .shop-table{ border:1px solid var(--color-line); border-radius:var(--r-lg); overflow:hidden; width:100%; border-collapse:collapse; } .shop-table th{ background:var(--color-deep); color:var(--color-canvas); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.1em; text-transform:uppercase; padding:12px 14px; text-align:left; } .shop-table td{ padding:13px 14px; font-size:var(--fs-sm); color:var(--color-ink-2); background:var(--color-elevated); border-top:1px solid var(--color-line); } .shop-table td:first-child{ font-weight:var(--fw-semibold); color:var(--color-ink); } /* ---------- Pied de page ---------- */ .shop-foot{ padding:clamp(40px, 6vw, 80px) var(--pad-x) 32px; background:var(--color-deep); color:var(--color-canvas); } .shop-foot__cols{ max-width:var(--container-wide); margin:0 auto 40px; display:grid; gap:clamp(28px, 4vw, 56px); grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .shop-foot__logo span{ display:block; font-family:var(--font-display); font-size:34px; letter-spacing:.005em; line-height:.9; text-transform:uppercase; } .shop-foot__logo small{ display:block; font-size:9px; letter-spacing:.42em; opacity:.7; margin-top:4px; } .shop-foot__logo p{ font-size:var(--fs-sm); line-height:1.6; color:var(--color-deep-mute); margin:16px 0 0; max-width:30ch; } .shop-foot .eyebrow{ color:var(--color-blush); letter-spacing:.18em; margin-bottom:14px; } .shop-foot p{ font-size:var(--fs-sm); line-height:1.7; color:var(--color-deep-soft); margin:0; } .shop-foot__links{ display:flex; flex-direction:column; } .shop-foot__links a{ padding:5px 0; font-size:var(--fs-sm); color:var(--color-deep-soft); } .shop-foot__links a:hover{ color:var(--color-canvas); } .shop-foot__mail{ font-size:var(--fs-sm); color:var(--color-canvas); border-bottom:1px solid hsl(33 53% 97% / .3); } .shop-foot__mail:hover{ color:var(--color-canvas); } .shop-foot__fine{ font-size:13px; line-height:1.6; color:var(--color-deep-mute) !important; margin:14px 0 0 !important; } .shop-foot__base{ max-width:var(--container-wide); margin:0 auto; padding-top:24px; border-top:1px solid var(--color-deep-line); font-size:var(--fs-xs); color:var(--color-deep-mute); } /* ---------- Messages ---------- */ .shop-toast{ position:fixed; left:50%; bottom:24px; z-index:95; transform:translate(-50%, 12px); padding:13px 20px; border-radius:var(--r-md); background:var(--color-ink); color:var(--color-canvas); font-size:var(--fs-sm); box-shadow:var(--sh-lg); max-width:calc(100vw - 32px); display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); } .shop-toast::before{ content:"✓"; color:var(--color-blush); font-weight:var(--fw-semibold); flex-shrink:0; } .shop-toast.is-visible{ opacity:1; transform:translate(-50%, 0); } /* ---------- Bandeau de consentement (mesure d'audience) ---------- */ .shop-consent{ position:fixed; inset:auto var(--sp-4) var(--sp-4) var(--sp-4); z-index:40; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-6); max-width:760px; margin:0 auto; padding:var(--sp-4) var(--sp-5); background:var(--color-elevated); border:1px solid var(--color-line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); } .shop-consent p{ margin:0; flex:1 1 300px; font-size:var(--fs-sm); color:var(--color-ink-2); } .shop-consent a{ text-decoration:underline; text-underline-offset:2px; } .shop-consent__actions{ display:flex; gap:var(--sp-2); } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce){ .shop-hero img, .shop-ticker__track{ animation:none; } .shop-card:hover .shop-card__media img, .shop-tile:hover img{ transform:none; } .btn:hover{ transform:none; } }