/* ============================================================= Distillerie La Chaleureuse — « Sibérie émeraude » Palette dérivée du logo : sauge #C0DAB9 · vert #3F836D · émeraude #02503F ============================================================= */ /* ---------- 1. Jetons ---------- */ /* Le thème CLAIR est la valeur par défaut ; le thème SOMBRE surcharge sous :root[data-theme="dark"]. Le choix est posé sur avant peinture. */ :root { color-scheme: light; /* Surfaces */ --abyss: #F3F0E6; --abyss-2: #EAE6D8; --abyss-3: #DFDBCA; --abyss-4: #D4D0BE; --input-bg: #FBF9F2; --header-bg: rgba(243, 240, 230, .84); --nav-bg: rgba(243, 240, 230, .98); --scrim: rgba(20, 44, 36, .38); --toast-bg: rgba(252, 250, 243, .96); --gate-bg: rgba(236, 232, 220, .9); --gate-card: linear-gradient(180deg, #FCFAF3, #EDE9DC); --sb-thumb: #B7C5B2; /* Encre */ --emerald: #02503F; --verdigris: #3F836D; --sage: #173A2E; --sage-2: #2F5648; --sage-dim: #4E6A5C; --cream: #062A21; --gold: #C9A24A; --gold-lit: #B98F32; --gold-ink: #7D5A0F; --on-gold: #04231B; --btn2-bg: #123328; --btn2-bg-h: #1D4A3B; --btn2-fg: #F5F2E9; --danger: #A63A1D; --danger-bd: #BE6047; --danger-txt: #9E3117; /* Filets et teintes */ --line: rgba(23, 58, 46, .14); --line-2: rgba(23, 58, 46, .22); --line-3: rgba(23, 58, 46, .34); --tint-soft: rgba(23, 58, 46, .05); --tint: rgba(23, 58, 46, .07); --tint-strong: rgba(23, 58, 46, .1); --hl: rgba(63, 131, 109, .26); --ph: rgba(78, 106, 92, .72); --gold-tint: rgba(201, 162, 74, .14); --gold-tint-2: rgba(201, 162, 74, .24); --route: rgba(125, 90, 15, .6); --drip: rgba(23, 58, 46, .4); /* Lumière, ombres, sélection */ --glow: radial-gradient(ellipse at 50% 50%, rgba(253, 254, 253, 0.8) 0%, rgba(249, 250, 249, 0.34) 38%, transparent 70%); --vign: radial-gradient(ellipse at 50% 42%, transparent 44%, rgba(196, 192, 174, .55) 100%); --pool: rgba(23, 58, 46, .34); --pool-2: rgba(23, 58, 46, .24); --halo: rgba(246, 247, 245, 0.62); --halo-soft: rgba(251, 251, 251, 0.4); --sh-mark: 0 2px 6px rgba(23, 58, 46, .22); --sh-sm: 0 6px 10px rgba(23, 58, 46, .16); --sh-md: 0 14px 20px rgba(23, 58, 46, .2); --sh-lg: 0 20px 26px rgba(23, 58, 46, .26); --sh-xl: 0 26px 34px rgba(23, 58, 46, .26); --sh-panel: 0 20px 44px -18px rgba(23, 58, 46, .3); --sh-drawer: -30px 0 70px -30px rgba(23, 58, 46, .32); --sh-gate: 0 40px 90px -30px rgba(23, 58, 46, .38); --sel-bg: #123328; --sel-fg: #F5F2E9; --grain-blend: multiply; --grain-op: .045; --portrait-veil: linear-gradient(180deg, rgba(2, 80, 63, .14), transparent 42%, rgba(23, 58, 46, .42)); /* Type */ --font-display: "bodega-serif", "Bodoni Moda", Didot, "Times New Roman", serif; --font-ui: "mozaic-geo-variable", "Jost", "Helvetica Neue", system-ui, sans-serif; /* Espace */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px; /* Rayons */ --r-xs: 2px; --r-sm: 3px; --r-md: 6px; --r-pill: 999px; /* Courbes */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-inout: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* Gouttières */ --gutter: clamp(20px, 5vw, 72px); --maxw: 1440px; --maxw-text: 68ch; --header-h: 74px; } :root[data-theme="dark"] { color-scheme: dark; --abyss: #03211A; --abyss-2: #052A21; --abyss-3: #083A2D; --abyss-4: #0B4536; --input-bg: #03211A; --header-bg: rgba(3, 33, 26, .78); --nav-bg: rgba(3, 33, 26, .97); --scrim: rgba(2, 16, 12, .62); --toast-bg: rgba(8, 58, 45, .94); --gate-bg: rgba(2, 17, 13, .92); --gate-card: linear-gradient(180deg, rgba(8, 58, 45, .7), rgba(3, 33, 26, .9)); --sb-thumb: #1C5445; --sage: #C0DAB9; --sage-2: #A8C4A9; --sage-dim: #7FA184; --cream: #F2EDE1; --gold-lit: #E6C67F; --gold-ink: #E6C67F; --btn2-bg: #C0DAB9; --btn2-bg-h: #D6E8CF; --btn2-fg: #04231B; --danger: #E58E7E; --danger-bd: #D98B7B; --danger-txt: #E9A597; --line: rgba(192, 218, 185, .13); --line-2: rgba(192, 218, 185, .22); --line-3: rgba(192, 218, 185, .34); --tint-soft: rgba(192, 218, 185, .06); --tint: rgba(192, 218, 185, .08); --tint-strong: rgba(192, 218, 185, .12); --hl: rgba(63, 131, 109, .32); --ph: rgba(127, 161, 132, .72); --gold-tint: rgba(201, 162, 74, .07); --gold-tint-2: rgba(201, 162, 74, .2); --route: rgba(201, 162, 74, .55); --drip: rgba(192, 218, 185, .62); --glow: radial-gradient(ellipse at 50% 50%, rgba(63, 131, 109, .42) 0%, rgba(63, 131, 109, .16) 38%, transparent 68%); --vign: radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(2, 20, 15, .72) 100%); --pool: rgba(192, 218, 185, .34); --pool-2: rgba(192, 218, 185, .26); --halo: rgba(63, 131, 109, .36); --halo-soft: rgba(63, 131, 109, .22); --sh-mark: 0 2px 6px rgba(0, 0, 0, .5); --sh-sm: 0 6px 10px rgba(0, 0, 0, .5); --sh-md: 0 18px 24px rgba(0, 0, 0, .5); --sh-lg: 0 26px 34px rgba(0, 0, 0, .62); --sh-xl: 0 34px 42px rgba(0, 0, 0, .6); --sh-panel: 0 20px 44px -18px rgba(0, 0, 0, .85); --sh-drawer: -30px 0 70px -30px rgba(0, 0, 0, .8); --sh-gate: 0 40px 90px -30px rgba(0, 0, 0, .9); --sel-bg: #C9A24A; --sel-fg: #03211A; --grain-blend: overlay; --grain-op: .05; --portrait-veil: linear-gradient(180deg, rgba(2, 80, 63, .24), transparent 42%, rgba(3, 33, 26, .55)); } /* Bascule de thème : transition brève et ciblée, retirée juste après */ :root.is-theming, :root.is-theming *, :root.is-theming *::before, :root.is-theming *::after { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease, box-shadow 280ms ease, outline-color 280ms ease, opacity 280ms ease !important; } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--verdigris) var(--abyss); scrollbar-width: thin; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto } } body { background: var(--abyss); color: var(--sage); font-family: var(--font-ui); font-size: 17px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; caret-color: var(--gold-lit); font-variant-numeric: lining-nums tabular-nums; } body.is-locked { overflow: hidden } img, svg, video { display: block; max-width: 100% } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none } button { cursor: pointer } a { color: inherit; text-decoration: none } ul, ol { list-style: none } h1, h2, h3, h4 { font-weight: inherit; line-height: 1.02; text-wrap: balance } p { text-wrap: pretty } ::selection { background: var(--sel-bg); color: var(--sel-fg); text-shadow: none } ::-webkit-scrollbar { width: 11px; height: 11px } ::-webkit-scrollbar-track { background: var(--abyss) } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 3px solid var(--abyss); border-radius: 99px } ::-webkit-scrollbar-thumb:hover { background: var(--emerald) } :focus { outline: none } :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: var(--r-xs); } .skip { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--gold); color: var(--on-gold); padding: 12px 20px; border-radius: var(--r-sm); font-weight: 600; transition: top 180ms var(--ease-out); } .skip:focus-visible { top: 16px } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } /* Grain de givre, fixe, très discret */ body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 3. Typographie ---------- */ .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; line-height: .95; color: var(--cream); } .d-xxl { font-size: clamp(2.5rem, 6.2vw, 5.4rem) } .d-xl { font-size: clamp(2.7rem, 7.2vw, 5.6rem) } .d-lg { font-size: clamp(2.2rem, 4.6vw, 3.6rem) } .d-md { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.025em } .d-sm { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.02em; line-height: 1.08 } .label { font-family: var(--font-ui); font-size: .688rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-dim); } .lead { font-size: clamp(1.05rem, 1.55vw, 1.24rem); line-height: 1.62; color: var(--sage-2); max-width: var(--maxw-text); } .prose p { max-width: var(--maxw-text); color: var(--sage-2) } .prose p+p { margin-top: 1.15em } .prose strong { color: var(--cream); font-weight: 500 } em.hl { font-style: normal; color: var(--cream); box-shadow: inset 0 -.5em 0 var(--hl); padding: 0 .12em; } .num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em } /* ---------- 4. Mise en page ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter) } .wrap-narrow { max-width: 1080px } .section { padding-block: clamp(72px, 11vw, var(--s11)) } .section--tight { padding-block: clamp(56px, 7vw, var(--s9)) } .rule { height: 1px; background: var(--line); border: 0 } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; padding-bottom: var(--s5); margin-bottom: clamp(40px, 5vw, var(--s8)); border-bottom: 1px solid var(--line); } .sec-head p { max-width: 42ch; color: var(--sage-dim); font-size: .95rem } /* ---------- 5. Boutons ---------- */ .btn { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: var(--line-3); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; position: relative; overflow: hidden; transition: transform 160ms var(--ease-out), background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease; } .btn:active { transform: scale(.972) } .btn[disabled], .btn[aria-disabled=true] { opacity: .42; pointer-events: none } .btn svg { width: 17px; height: 17px; flex: none } .btn--gold { --btn-bg: var(--gold); --btn-fg: var(--on-gold); --btn-bd: var(--gold); font-weight: 600 } .btn--sage { --btn-bg: var(--btn2-bg); --btn-fg: var(--btn2-fg); --btn-bd: var(--btn2-bg); font-weight: 600 } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--sage); --btn-bd: var(--line-3) } .btn--quiet { --btn-bd: transparent; --btn-fg: var(--sage-dim); padding-inline: 14px; min-height: 40px } .btn--block { width: 100% } .btn--lg { min-height: 58px; padding-inline: 34px; font-size: .9rem } @media (hover:hover) and (pointer:fine) { .btn--gold:hover { --btn-bg: var(--gold-lit); --btn-bd: var(--gold-lit); box-shadow: 0 10px 30px -12px rgba(201, 162, 74, .55) } .btn--sage:hover { --btn-bg: var(--btn2-bg-h); --btn-bd: var(--btn2-bg-h) } .btn--ghost:hover { --btn-bd: var(--sage); --btn-fg: var(--cream); background: var(--tint-soft) } .btn--quiet:hover { --btn-fg: var(--cream); background: var(--tint-soft) } } .link-u { color: var(--cream); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 200ms ease, color 200ms ease; } @media (hover:hover) { .link-u:hover { text-decoration-color: var(--gold) } } /* ---------- 6. En-tête ---------- */ .header { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header-h); display: flex; align-items: center; transition: background-color 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease; border-bottom: 1px solid transparent; } .header.is-stuck { background: var(--header-bg); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--line); } .header__in { display: flex; align-items: center; gap: var(--s6); width: 100% } .brand { display: flex; align-items: center; gap: 16px; flex: none } .brand img { width: 60px; height: auto; filter: drop-shadow(var(--sh-mark)) } .brand__txt { display: flex; flex-direction: column; line-height: 1 } .brand__txt b { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -.02em; color: var(--cream); } .brand__txt span { font-size: .8rem; letter-spacing: .375em; text-transform: uppercase; color: var(--sage-dim); margin-top: 3px; } .nav { display: flex; gap: 4px; margin-left: auto } .nav a { position: relative; padding: 9px 15px; border-radius: var(--r-pill); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-dim); transition: color 200ms ease, background-color 200ms ease; } .nav a[aria-current=page] { color: var(--cream) } .nav a[aria-current=page]::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 1px; background: var(--gold-ink); } @media (hover:hover) and (pointer:fine) { .nav a:hover { color: var(--cream); background: var(--tint-soft) } } .header__act { display: flex; align-items: center; gap: 6px; flex: none } .icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--sage); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); } .icon-btn:active { transform: scale(.94) } @media (hover:hover) and (pointer:fine) { .icon-btn:hover { background: var(--tint); color: var(--cream) } } .icon-btn svg { width: 21px; height: 21px } .cart-count { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold); font-size: .625rem; font-weight: 700; line-height: 1; letter-spacing: 0; transform: scale(.5); opacity: 0; transition: transform 260ms var(--ease-out), opacity 180ms ease; } .cart-count.is-on { transform: scale(1); opacity: 1 } .cart-count.is-bump { animation: bump 420ms var(--ease-out) } @keyframes bump { 0% { transform: scale(1) } 35% { transform: scale(1.32) } 100% { transform: scale(1) } } .burger { display: none } /* ---------- 7. Héros ---------- */ .hero { position: relative; min-height: 100svh; padding-top: calc(var(--header-h) + clamp(22px, 4vh, 52px)); padding-bottom: clamp(24px, 4vh, 52px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; } .hero__glow { position: absolute; z-index: -2; left: 50%; top: 56%; translate: -50% -50%; width: min(1400px, 140vw); aspect-ratio: 1.55/1; background: var(--glow); filter: blur(18px); } .hero__vign { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--vign); } .hero__head { text-align: center } .hero h1 { margin-bottom: var(--s5) } .hero__sub { margin-inline: auto; max-width: 56ch; text-align: center; color: var(--sage-2); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.6; } .hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--s5); } /* Étagère à bouteilles */ .shelf { position: relative; margin-top: clamp(18px, 3.4vh, 44px); display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(6px, 3vw, 56px); max-width: 900px; margin-inline: auto; width: 100%; } .shelf::after { /* ligne de sol : juste sous le pied des bouteilles, jamais à travers */ content: ""; position: absolute; left: -2%; right: -2%; bottom: 60px; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); } .shelf__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .shelf__fig { position: relative; display: block; width: 100%; display: grid; place-items: end center; } .shelf__fig img { position: relative; width: auto; max-width: 100%; filter: drop-shadow(var(--sh-lg)); transition: transform 520ms var(--ease-out), filter 520ms ease; transform-origin: bottom center; } .shelf__item--a img, .shelf__item--c img { height: clamp(138px, 21vh, 272px) } .shelf__item--b img { height: clamp(176px, 27vh, 342px) } .shelf__item--a img { transform: translateY(0) rotate(-.6deg) } .shelf__item--c img { transform: translateY(0) rotate(.6deg) } .shelf__meta { margin-top: 16px; display: flex; flex-direction: column; gap: 5px; align-items: center } .shelf__meta b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 1.7vw, 1.42rem); letter-spacing: -.02em; color: var(--cream); line-height: 1.05; } .shelf__meta span { font-size: .688rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dim) } @media (hover:hover) and (pointer:fine) { .shelf__item:hover .shelf__fig img { transform: translateY(-14px) rotate(0deg) scale(1.02) } .shelf__item:hover .shelf__fig::before { transform: scaleX(1); opacity: .85 } .shelf__item:hover .shelf__meta b { color: var(--gold-lit) } } .shelf__item a:focus-visible { outline-offset: 8px } .shelf__meta b { transition: color 220ms ease } .scroll-cue { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: clamp(12px, 2vh, 26px); font-size: .625rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sage-dim); } .scroll-cue i { display: block; width: 1px; height: 26px; background: linear-gradient(var(--sage-dim), transparent); animation: cue 2.4s var(--ease-inout) infinite; transform-origin: top; } @keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } } /* ---------- 7b. Héros — variante « vitrine fractionnée » ---------- */ .hero--split { display: block; } .hero--split .wrap { height: 100% } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 5vw, 72px); min-height: calc(100svh - var(--header-h) - clamp(46px, 8vh, 104px)); } .hero__col-text { max-width: 56ch } .hero__col-text h1 { margin-bottom: var(--s5); text-align: left } .hero--split .hero__sub { margin-inline: 0; text-align: left; max-width: 48ch; } .hero--split .hero__cta { justify-content: flex-start } .hero__mini { display: flex; gap: 12px; margin-top: clamp(28px, 4vh, 44px); flex-wrap: wrap } .hero__mini-item { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: border-color 220ms ease, background-color 220ms ease, transform 160ms var(--ease-out); } .hero__mini-item:active { transform: scale(.97) } .hero__mini-item img { height: 52px; width: auto; filter: drop-shadow(var(--sh-sm)) } .hero__mini-item b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--cream); font-weight: 500; letter-spacing: -.01em } .hero__mini-item span { display: block; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dim); margin-top: 2px } @media (hover:hover) and (pointer:fine) { .hero__mini-item:hover { border-color: var(--line-3); background: var(--tint-soft) } .hero__mini-item:hover b { color: var(--gold-ink) } } .hero__col-art { position: relative; display: grid; place-items: center; height: 100%; min-height: 340px } .hero__art-glow { position: absolute; z-index: -1; left: 50%; top: 52%; translate: -50% -50%; width: min(760px, 120%); aspect-ratio: 1/1; background: var(--glow); filter: blur(20px); } .hero__art-img { position: relative; height: min(66svh, 640px); width: auto; filter: drop-shadow(var(--sh-xl)); transform: rotate(-1.4deg); transition: transform 560ms var(--ease-out); } @media (hover:hover) and (pointer:fine) { .hero--split:hover .hero__art-img { transform: rotate(-.4deg) translateY(-8px) } } .hero--split .scroll-cue { justify-content: flex-start; margin-top: clamp(28px, 4vh, 48px) } @media (max-width:900px) { .hero__grid { grid-template-columns: 1fr; text-align: center; min-height: auto; gap: 8px } .hero__col-text { max-width: none; margin-inline: auto } .hero__col-text h1 { text-align: center } .hero--split .hero__sub { margin-inline: auto; text-align: center } .hero--split .hero__cta { justify-content: center } .hero__mini { justify-content: center } .hero__col-art { order: -1; min-height: auto; padding-block: 8px } .hero__art-img { height: clamp(220px, 38vh, 360px) } .hero--split .scroll-cue { justify-content: center } } /* ---------- 8. Fiche produit éditoriale (accueil) ---------- */ .spirit { display: grid; gap: clamp(32px, 5vw, var(--s9)); grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; padding-block: clamp(48px, 7vw, var(--s9)); border-top: 1px solid var(--line); } .spirit:first-of-type { border-top: 0 } .spirit--flip .spirit__fig { order: 2 } .spirit__fig { position: relative; display: grid; place-items: center; min-height: min(64vh, 540px); } .spirit__fig::before { content: ""; position: absolute; inset: auto 50% 4% auto; translate: 50% 0; width: min(430px, 92%); aspect-ratio: 1/1; border-radius: 50%; background: radial-gradient(circle, var(--halo), transparent 66%); filter: blur(28px); } .spirit__fig img { position: relative; height: min(60vh, 520px); width: auto; filter: drop-shadow(var(--sh-xl)); transition: transform 620ms var(--ease-out); } @media (hover:hover) and (pointer:fine) { .spirit:hover .spirit__fig img { transform: translateY(-10px) } } .spirit__body { max-width: 56ch } .spirit__title { margin-bottom: var(--s4) } .spirit__specs { display: flex; flex-wrap: wrap; gap: 0; margin: var(--s5) 0 var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .spirit__specs div { flex: 1 1 33%; min-width: 110px; padding: 14px 18px 14px 0; } .spirit__specs div+div { border-left: 1px solid var(--line); padding-left: 18px } .spirit__specs dt { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dim); margin-bottom: 5px } .spirit__specs dd { font-family: var(--font-display); font-size: 1.44rem; color: var(--cream); letter-spacing: -.01em } .spirit__notes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s6) } .chip { display: inline-flex; align-items: center; height: 29px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: .688rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-2); } .spirit__buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap } .price { font-family: var(--font-display); font-size: 1.75rem; color: var(--cream); letter-spacing: -.02em } .price small { font-family: var(--font-ui); font-size: .75rem; letter-spacing: .14em; color: var(--sage-dim); margin-left: 6px; text-transform: uppercase } /* ---------- 9. Bandeau Val-de-Travers ---------- */ .origin { background: var(--abyss-2); border-block: 1px solid var(--line); position: relative; overflow: hidden } .origin__grid { display: grid; gap: clamp(36px, 5vw, var(--s8)); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; } .map { width: 100%; height: auto; color: var(--verdigris) } .map .pt { fill: var(--gold-ink) } .map .pt-2 { fill: var(--abyss-2); stroke: var(--sage-dim); stroke-width: 1.4 } .map text { font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; fill: var(--sage-2) } .map text.sub { font-size: 9.5px; letter-spacing: .14em; fill: var(--sage-dim); text-transform: none } .map .route { stroke: var(--route); stroke-width: 1.2; stroke-dasharray: 3 6; fill: none; animation: trace 3.4s linear infinite } @keyframes trace { to { stroke-dashoffset: -36 } } .map .contour { stroke: currentColor; stroke-width: .9; fill: none; opacity: .4; stroke-linejoin: round; stroke-linecap: round; } .map .halo { fill: none; stroke: var(--gold-ink); stroke-opacity: .35 } .origin__note { margin-top: var(--s6); padding: 18px 22px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--tint-soft); } .origin__note p { font-size: .94rem; color: var(--sage-2) } .origin__note b { color: var(--cream); font-weight: 500 } /* ---------- 10. Histoire ---------- */ .story { display: grid; gap: clamp(36px, 5vw, var(--s8)); grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center } .portrait { position: relative; border-radius: 220px 220px var(--r-md) var(--r-md); overflow: hidden; isolation: isolate } .portrait img { width: 100%; height: auto; filter: saturate(.86) contrast(1.04) brightness(.94) } .portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--portrait-veil); } .portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: white; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); } .cold { display: flex; align-items: center; gap: 50px; margin: var(--s6) 0; padding-block: var(--s5); border-block: 1px solid var(--line); } .cold b { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--gold-ink); letter-spacing: -.03em; line-height: .9; white-space: nowrap } .cold .sign { font-family: var(--font-ui); font-weight: 300; font-size: .78em; vertical-align: .06em; margin-right: .02em } .cold span { font-size: .875rem; color: var(--sage-dim); } /* ---------- 11. Rituel / louche ---------- */ .ritual { display: grid; gap: clamp(36px, 5vw, var(--s8)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center } .louche { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, var(--s7)); border: 1px solid var(--line); border-radius: var(--r-md); } .glass { width: min(300px, 80%); height: auto; overflow: visible } .glass .body { fill: var(--tint-soft); stroke: var(--line-3); stroke-width: 1.4 } .glass .liquid { fill: linear-gradient(0deg,rgba(174, 235, 179, 1) 0%, rgba(117, 179, 130, 1) 100%); transition: none; z-index: 1 } .glass .foot-rect { stroke: var(--line-3); stroke-width: 1.4; fill: var(--abyss-2); z-index: -1; } .glass .foot-ellipse { stroke: var(--line-3); stroke-width: 1.4; fill: var(--abyss-2); } .foot-line { stroke: var(--line-3); stroke-width: 1.4; } .glass .drip { display: none;/* pour l'instant, on ne l'utilise pas */ stroke: var(--drip); stroke-width: 1.2; stroke-dasharray: 2 7; fill: none; animation: drip 1.15s linear infinite } @keyframes drip { to { stroke-dashoffset: -9 } } .glass .liquid { transition: filter 120ms linear } .glass .surface { transition: none } .louche__ctrl { width: min(400px, 100%); margin-top: 26px } .louche__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px } .louche__row b { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream) } input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: ew-resize; } input[type=range].slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-ink) var(--fill, 0%), var(--line-2) var(--fill, 0%)); } input[type=range].slider::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-2) } input[type=range].slider::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--gold-ink) } input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--gold); border: 3px solid var(--abyss-2); box-shadow: var(--sh-sm); transition: transform 160ms var(--ease-out); } input[type=range].slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 3px solid var(--abyss-2); } input[type=range].slider:active::-webkit-slider-thumb { transform: scale(1.18) } .steps { counter-reset: st; margin-top: var(--s6); display: grid; gap: 2px } .steps li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); } .steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font-family: var(--font-display); font-size: 2rem; color: var(--gold-ink); letter-spacing: 0; padding-top: 2px; } .steps h4 { font-family: var(--font-display); font-size: 2rem; color: var(--cream); margin-bottom: 4px; letter-spacing: -.015em } .steps p { font-size: 1.1rem; color: var(--sage-dim) } /* ---------- 12. Cartes boutique ---------- */ .boutique__tools { display: flex; flex-direction: column; gap: 14px; align-items: flex-start } .boutique__tools-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center } .filters button { height: 38px; padding: 0 17px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-dim); transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 150ms var(--ease-out); } .filters button:active { transform: scale(.96) } .filters button[aria-pressed=true] { background: var(--btn2-bg); border-color: var(--btn2-bg); color: var(--btn2-fg); font-weight: 600 } @media (hover:hover) and (pointer:fine) { .filters button:not([aria-pressed=true]):hover { color: var(--cream); border-color: var(--line-3) } } .sort { display: flex; align-items: center; gap: 10px } .sort .label { margin: 0 } .sort select { height: 38px; padding: 0 34px 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background-color: transparent; color: var(--sage); font-size: .75rem; letter-spacing: .06em; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234E6A5C' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; transition: border-color 200ms ease, color 200ms ease; } :root[data-theme="dark"] .sort select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237FA184' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } .sort select:hover { border-color: var(--line-3); color: var(--cream) } .sort select:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: var(--r-pill) } /* Retrait à la distillerie — un encart, jamais une carte produit */ .pickup { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--abyss-2); } .pickup__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-ink); border: 1px solid var(--line-2); background: radial-gradient(circle, var(--gold-tint), transparent 70%); } .pickup__icon svg { width: 26px; height: 26px } .pickup__body { flex: 1 1 320px; min-width: 220px } .pickup__body h2 { color: var(--cream); margin: 0 } .pickup__body p { color: var(--sage-dim); max-width: 58ch } .pickup .btn { flex: none } @media (max-width:640px) { .pickup { flex-direction: column; align-items: flex-start } .pickup .btn { width: 100% } } /* Flexbox plutôt qu'une grille : une rangée incomplète (ex. 5 références en colonnes de 3) ne laisse jamais de case fantôme colorée derrière elle. */ .grid-prod { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .grid-prod .card { flex: 1 1 33.3334%; max-width: 33.3334% } #suggestions.grid-prod .card { flex: 1 1 50%; max-width: 50% } .card { position: relative; display: flex; flex-direction: column; box-sizing: border-box; background: var(--abyss); padding: 26px 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 320ms ease; } @media (hover:hover) and (pointer:fine) { .card:hover { background: var(--abyss-2) } } .card__fig { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 320px; margin-bottom: 22px; } .card__fig::before { content: ""; position: absolute; bottom: 2px; left: 50%; translate: -50% 0; width: 82%; aspect-ratio: 3.6/1; border-radius: 50%; background: radial-gradient(ellipse, var(--pool-2), transparent 70%); filter: blur(9px); opacity: .7; transform: scaleX(.78); transform-origin: center; transition: transform 420ms var(--ease-out), opacity 420ms ease; display: none; /* on ne l'affiche je pense */ } .card__fig img { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(var(--sh-md)); transition: transform 480ms var(--ease-out); } @media (hover:hover) and (pointer:fine) { .card:hover .card__fig img { transform: translateY(-9px) } .card:hover .card__fig::before { transform: scaleX(1); opacity: 1 } } .card__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline } .card__name { font-family: var(--font-display); font-size: 1.42rem; color: var(--cream); letter-spacing: -.02em; line-height: 1.06 } .card__name a::after { content: ""; position: absolute; inset: 0 } .card__meta { font-size: .688rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dim); margin-top: 8px } .card__desc { font-size: .9rem; color: var(--sage-dim); margin-top: 12px; line-height: 1.55 } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 22px } .card__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream) } .card .btn { position: relative; z-index: 2; min-height: 44px; padding-inline: 20px; font-size: .75rem } .badge { position: absolute; top: 20px; right: 20px; z-index: 2; height: 26px; padding: 0 11px; display: grid; place-items: center; border: 1px solid var(--gold-ink); border-radius: var(--r-pill); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); } /* ---------- 13. Page produit ---------- */ .pdp { display: grid; gap: clamp(32px, 4.5vw, var(--s8)); grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: start } .pdp__media { position: sticky; top: calc(var(--header-h) + 24px) } .pdp__stage { position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); background: radial-gradient(ellipse at 50% 108%, var(--halo), transparent 60%), var(--abyss-2); padding: clamp(28px, 4vw, 56px); min-height: min(70vh, 620px); overflow: hidden; } .pdp__stage img { height: min(58vh, 520px); width: auto; filter: drop-shadow(var(--sh-xl)); transition: opacity 300ms ease, transform 480ms var(--ease-out); } .pdp__stage.is-swapping img { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(3px) drop-shadow(var(--sh-xl)) } .crumbs { display: flex; gap: 9px; align-items: center; font-size: .75rem; color: var(--sage-dim); margin-bottom: var(--s5) } .crumbs a { transition: color 200ms ease } @media (hover:hover) { .crumbs a:hover { color: var(--cream) } } .crumbs svg { width: 12px; height: 12px; opacity: .5 } .pdp__price { display: flex; align-items: baseline; gap: 14px; margin: var(--s5) 0 } .pdp__price .price { font-size: 2.1rem } .opt { margin-block: var(--s5) } .opt__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px } .opt__label span:last-child { font-size: .8125rem; color: var(--sage-dim) } .opt__row { display: flex; gap: 8px; flex-wrap: wrap } .opt__row button { min-height: 46px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: .8125rem; letter-spacing: .06em; color: var(--sage-2); transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 150ms var(--ease-out); } .opt__row button:active { transform: scale(.96) } .opt__row button[aria-pressed=true] { border-color: var(--emerald); background: var(--tint-strong); color: var(--cream) } .opt__row button[disabled] { opacity: .3; text-decoration: line-through } @media (hover:hover) and (pointer:fine) { .opt__row button:not([aria-pressed=true]):not([disabled]):hover { border-color: var(--line-3); color: var(--cream) } } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); height: 52px } .qty button { width: 46px; height: 100%; display: grid; place-items: center; color: var(--sage); border-radius: var(--r-pill); transition: color 180ms ease, background-color 180ms ease, transform 140ms var(--ease-out); } .qty button:active { transform: scale(.9) } @media (hover:hover) and (pointer:fine) { .qty button:hover { color: var(--cream); background: var(--tint) } } .qty button svg { width: 15px; height: 15px } .qty output { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; color: var(--cream) } .buyrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: var(--s5) } .buyrow .btn { flex: 1 1 220px; min-height: 52px } .acc { border-top: 1px solid var(--line); margin-top: var(--s7) } .acc__item { border-bottom: 1px solid var(--line) } .acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; text-align: left; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); transition: color 200ms ease; } @media (hover:hover) { .acc__btn:hover { color: var(--cream) } } .acc__btn svg { width: 14px; height: 14px; flex: none; transition: transform 260ms var(--ease-out); color: var(--sage-dim) } .acc__btn[aria-expanded=true] svg { transform: rotate(45deg); color: var(--gold-ink) } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out) } .acc__panel[data-open=true] { grid-template-rows: 1fr } .acc__inner { overflow: hidden } .acc__inner>div { padding-bottom: 24px } .acc dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 24px; font-size: .94rem } .acc dt { color: var(--sage-dim) } .acc dd { color: var(--cream); text-align: right } /* ---------- 14. Tiroir panier ---------- */ .scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; } .scrim.is-open { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(430px, 100vw); display: flex; flex-direction: column; background: var(--abyss-2); border-left: 1px solid var(--line-2); transform: translateX(100%); transition: transform 380ms var(--ease-drawer); box-shadow: var(--sh-drawer); } .drawer.is-open { transform: translateX(0) } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); flex: none; } .drawer__head h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); letter-spacing: -.02em } .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px } .drawer__foot { flex: none; padding: 20px 22px; border-top: 1px solid var(--line); background: var(--abyss-2) } .line { display: grid; grid-template-columns: 66px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line) } .line:last-child { border-bottom: 0 } .line__fig { height: 88px; display: grid; place-items: center; background: var(--abyss); border-radius: var(--r-md); } .line__fig img { height: 80px; width: auto; filter: drop-shadow(var(--sh-sm)) } .line__name { font-family: var(--font-display); font-size: 1.1rem; color: var(--cream); letter-spacing: -.015em; line-height: 1.15 } .line__meta { font-size: .688rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-dim); margin-top: 5px } .line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); height: 34px } .stepper button { width: 32px; height: 100%; display: grid; place-items: center; color: var(--sage-dim); border-radius: var(--r-pill); transition: color 180ms ease, background 180ms ease } @media (hover:hover) { .stepper button:hover { color: var(--cream); background: var(--tint) } } .stepper button:active { transform: scale(.9) } .stepper svg { width: 12px; height: 12px } .stepper output { min-width: 26px; text-align: center; font-size: .875rem; color: var(--cream); font-variant-numeric: tabular-nums } .line__price { font-size: .98rem; color: var(--cream); font-variant-numeric: tabular-nums } .line__rm { font-size: .688rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dim); transition: color 200ms ease } @media (hover:hover) { .line__rm:hover { color: var(--danger) } } .totals { display: grid; gap: 9px; margin-bottom: 16px } .totals div { display: flex; justify-content: space-between; font-size: .875rem; color: var(--sage-dim) } .totals .grand { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--cream); } .totals .grand span:last-child { font-family: var(--font-display); font-size: 1.5rem } .mock-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .688rem; line-height: 1.5; color: var(--sage-dim); letter-spacing: .02em; } .mock-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--gold-ink) } .empty { display: grid; place-items: center; text-align: center; gap: 14px; padding: 64px 12px } .empty img { width: 88px; opacity: .5 } .empty p { color: var(--sage-dim); font-size: .94rem; max-width: 32ch } /* ---------- 15. Toast ---------- */ .toast-zone { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 120; display: grid; gap: 10px; pointer-events: none; width: min(420px, calc(100vw - 32px)) } .toast { display: flex; align-items: center; gap: 13px; padding: 13px 16px; background: var(--toast-bg); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-panel); pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); transition: opacity 320ms ease, transform 380ms var(--ease-out); } @starting-style { .toast { opacity: 0; transform: translateY(16px) scale(.96) } } .toast.is-out { opacity: 0; transform: translateY(10px) scale(.97); transition-duration: 200ms } .toast img { height: 38px; width: auto; flex: none } .toast b { display: block; font-size: .875rem; color: var(--cream); font-weight: 500 } .toast span { font-size: .75rem; color: var(--sage-dim) } .toast a { margin-left: auto; font-size: .688rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lit); white-space: nowrap } /* ---------- 16. Contrôle d'âge ---------- */ .gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--gate-bg); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 1; transition: opacity 420ms ease, visibility 0s; } .gate { display: none } html.needs-gate .gate { display: grid } html.needs-gate body { overflow: hidden } .gate.is-out { opacity: 0; visibility: hidden; transition: opacity 420ms ease, visibility 0s linear 420ms } .gate__card { width: min(470px, 100%); text-align: center; padding: clamp(30px, 5vw, 46px) clamp(24px, 4vw, 40px); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--gate-card); box-shadow: var(--sh-gate); transform: translateY(0) scale(1); opacity: 1; transition: transform 480ms var(--ease-out), opacity 320ms ease; } @starting-style { .gate__card { transform: translateY(18px) scale(.965); opacity: 0 } } .gate__card img { width: 74px; margin: 0 auto 20px; filter: drop-shadow(var(--sh-md)) } .gate__card h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--cream); letter-spacing: -.03em; margin-bottom: 12px } .gate__card p { font-size: .94rem; color: var(--sage-dim); max-width: 34ch; margin: 0 auto 26px } .gate__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap } .gate__legal { margin-top: 26px; margin-bottom: 0; font-size: .688rem; color: var(--sage-dim); opacity: .75; line-height: 1.6 } /* ---------- 17. Formulaires ---------- */ .field { display: grid; gap: 7px; margin-bottom: 16px } .field label { font-size: .688rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-dim) } .field input, .field select, .field textarea { height: 52px; padding: 0 16px; width: 100%; background: var(--abyss); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--cream); font-size: .98rem; transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; } .field textarea { height: auto; padding: 14px 16px; resize: vertical; min-height: 110px; line-height: 1.5 } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234E6A5C' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 42px } .field input::placeholder, .field textarea::placeholder { color: var(--ph) } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3) } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--tint-strong); outline: none; } .field[data-invalid=true] input, .field[data-invalid=true] select { border-color: var(--danger-bd) } .field .err { font-size: .75rem; color: var(--danger-txt); letter-spacing: .01em; text-transform: none; display: none } .field[data-invalid=true] .err { display: block } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } .row-13 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px } .radio-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; } .radio-card+.radio-card { margin-top: 10px } .radio-card:hover { border-color: var(--line-3) } .radio-card:has(input:checked) { border-color: var(--emerald); background: var(--tint-soft) } .radio-card input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--line-3); border-radius: 50%; flex: none; position: relative; transition: border-color 200ms ease } .radio-card input:checked { border-color: var(--gold) } .radio-card input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold) } .radio-card b { display: block; color: var(--cream); font-weight: 500; font-size: .94rem } .radio-card span { font-size: .8125rem; color: var(--sage-dim) } .radio-card .rc-price { margin-left: auto; font-size: .94rem; color: var(--cream); white-space: nowrap } :root[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237FA184' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } /* Bascule clair / sombre */ [data-theme-toggle] .i-sun { display: none } :root[data-theme="dark"] [data-theme-toggle] .i-sun { display: block } :root[data-theme="dark"] [data-theme-toggle] .i-moon { display: none } /* ---------- 18. Tunnel de commande ---------- */ .checkout { display: grid; gap: clamp(32px, 4vw, var(--s8)); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start } .stepper-nav { display: flex; gap: 0; margin-bottom: var(--s7); border-bottom: 1px solid var(--line) } .stepper-nav li { flex: 1; padding-bottom: 14px; position: relative; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dim); display: flex; gap: 10px; align-items: center } .stepper-nav li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: transparent; transition: background-color 300ms ease } .stepper-nav li[data-state=active] { color: var(--cream) } .stepper-nav li[data-state=active]::after { background: var(--gold-ink) } .stepper-nav li[data-state=done] { color: var(--sage-2) } .stepper-nav li[data-state=done]::after { background: var(--verdigris) } .stepper-nav i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: .625rem; font-style: normal; flex: none; } .stepper-nav li[data-state=done] i { background: var(--verdigris); border-color: var(--verdigris); color: var(--abyss) } .stepper-nav li[data-state=done] i svg { width: 11px; height: 11px } .panel { display: none } .panel.is-active { display: block; animation: panelIn 380ms var(--ease-out) both } @keyframes panelIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } .panel h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--cream); letter-spacing: -.025em; margin-bottom: var(--s5) } .panel .h-sub { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dim); margin: var(--s6) 0 var(--s4) } .summary { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; background: var(--abyss-2); } .summary h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--cream); margin-bottom: var(--s4); letter-spacing: -.02em } .summary .line { grid-template-columns: 54px 1fr } .summary .line__fig { height: 70px } .summary .line__fig img { height: 64px } .pay-banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin-bottom: var(--s5); border: 1px dashed var(--gold-ink); border-radius: var(--r-sm); background: var(--gold-tint); } .pay-banner svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); margin-top: 2px } .pay-banner p { font-size: .875rem; color: var(--sage-2) } .pay-banner b { color: var(--gold-ink); font-weight: 600 } .card-visual { position: relative; aspect-ratio: 1.586/1; max-width: 340px; border-radius: 12px; padding: 22px; margin-bottom: var(--s5); background: linear-gradient(135deg, #0B4536, #03211A 60%); border: 1px solid rgba(192, 218, 185, .2); box-shadow: var(--sh-panel); overflow: hidden; } .card-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(192, 218, 185, .16), transparent 55%); } .card-visual .chip-v { width: 40px; height: 30px; border-radius: 5px; background: linear-gradient(150deg, var(--gold-lit), var(--gold)); position: relative } .card-visual .cv-num { margin-top: 34px; font-size: 1.06rem; letter-spacing: .14em; color: #F2EDE1; font-variant-numeric: tabular-nums; position: relative } .card-visual .cv-row { display: flex; justify-content: space-between; margin-top: 18px; position: relative } .card-visual .cv-row span { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: #7FA184; display: block } .card-visual .cv-row b { font-size: .8125rem; color: #C0DAB9; font-weight: 400; letter-spacing: .06em } .btn .spin { width: 16px; height: 16px; border: 2px solid rgba(4, 35, 27, .3); border-top-color: var(--on-gold); border-radius: 50%; animation: spin .62s linear infinite; display: none } .btn.is-busy .spin { display: block } .btn.is-busy .btn-label { opacity: .6 } @keyframes spin { to { transform: rotate(360deg) } } .done { text-align: center; max-width: 640px; margin-inline: auto; padding-block: var(--s7) } .done__seal { width: 96px; height: 96px; margin: 0 auto var(--s5); border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-ink); background: radial-gradient(circle, var(--gold-tint-2), transparent 70%); } .done__seal svg { width: 38px; height: 38px; color: var(--gold-ink) } .done h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.1rem); color: var(--cream); letter-spacing: -.03em; margin-bottom: 14px } .done__ref { display: inline-flex; align-items: center; gap: 10px; margin: var(--s5) 0; padding: 11px 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: .875rem; letter-spacing: .14em; color: var(--cream); } .done__ref span { color: var(--sage-dim); letter-spacing: .18em; font-size: .688rem; text-transform: uppercase } /* ---------- 19. Pied de page ---------- */ .footer { border-top: 1px solid var(--line); background: var(--abyss-2); padding-block: var(--s9) var(--s6) } .footer__grid { display: grid; gap: clamp(32px, 4vw, var(--s8)); grid-template-columns: 1.4fr 1fr 1fr 1.2fr } .footer h3 { font-size: .688rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dim); margin-bottom: 18px } .footer li+li { margin-top: 10px } .footer a { font-size: .94rem; color: var(--sage-2); transition: color 200ms ease } @media (hover:hover) { .footer a:hover { color: var(--cream) } } .footer address { font-style: normal; font-size: .94rem; color: var(--sage-2); line-height: 1.8 } .footer__brand img { width: 150px; margin-bottom: 18px } .footer__brand p { font-size: .875rem; color: var(--sage-dim); max-width: 34ch } .footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: .75rem; color: var(--sage-dim); } .footer__bottom p { max-width: 64ch; line-height: 1.6 } /* ---------- 20. Révélation au défilement ---------- */ .rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--rv-d, 0ms); will-change: opacity, transform } .rv.is-in { opacity: 1; transform: none } /* Entrée du héros */ .hero .hero__head>*, .hero .hero__cta, .shelf__item, .scroll-cue, .hero__col-text>*, .hero__mini-item, .hero__art-img { opacity: 0; transform: translateY(20px); animation: heroIn 900ms var(--ease-out) forwards; } .hero h1 { animation-delay: 80ms } .hero .hero__sub { animation-delay: 190ms } .hero .hero__cta { animation-delay: 280ms } .shelf__item--b { animation-delay: 340ms } .shelf__item--a { animation-delay: 420ms } .shelf__item--c { animation-delay: 500ms } .scroll-cue { animation-delay: 640ms } .hero__mini { opacity: 1; transform: none; animation: none } .hero__mini-item:nth-child(1) { animation-delay: 360ms } .hero__mini-item:nth-child(2) { animation-delay: 430ms } .hero__art-img { animation-delay: 220ms; transform: translateY(16px) scale(.98) } @keyframes heroIn { to { opacity: 1; transform: none } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important } .rv { opacity: 1; transform: none } .hero .hero__head>*, .hero .hero__cta, .shelf__item, .scroll-cue, .hero__col-text>*, .hero__mini-item, .hero__art-img { opacity: 1; transform: none; animation: none } .drawer { transition: none } } /* ---------- 21. Adaptatif ---------- */ @media (max-width:1080px) { .footer__grid { grid-template-columns: 1fr 1fr } .checkout { grid-template-columns: 1fr } .summary { position: static } .pdp { grid-template-columns: 1fr } .pdp__media { position: static } } @media (max-width:900px) { :root { --header-h: 72px } .brand { gap: 12px } .brand img { width: 50px } .brand__txt b { font-size: 1.38rem } .brand__txt span { font-size: .563rem; letter-spacing: .26em } .nav { position: fixed; inset: var(--header-h) 0 auto; z-index: 79; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 22px; background: var(--nav-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 240ms ease, transform 300ms var(--ease-out), visibility 0s linear 300ms; } .nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 240ms ease, transform 300ms var(--ease-out), visibility 0s } .nav a { padding: 15px 4px; font-size: .94rem; border-bottom: 1px solid var(--line); border-radius: 0 } .nav a[aria-current=page]::after { left: 4px; right: auto; width: 18px; bottom: 8px } .burger { display: grid } .header__act { margin-left: auto } .spirit, .spirit--flip { grid-template-columns: 1fr } .spirit--flip .spirit__fig { order: 0 } .spirit__fig { min-height: auto } .spirit__fig img { height: min(46vh, 400px) } .origin__grid, .story, .ritual { grid-template-columns: 1fr } .portrait { border-radius: 170px 170px var(--r-md) var(--r-md) } .cold { flex-direction: column; gap: 8px } } @media (max-width:1080px) { .grid-prod .card { flex-basis: 50%; max-width: 50% } } @media (max-width:720px) { body { font-size: 16px } .shelf { gap: 2px } .shelf::after { bottom: 50px; left: 0; right: 0 } .shelf__item--a img, .shelf__item--c img { height: clamp(112px, 17vh, 160px) } .shelf__item--b img { height: clamp(142px, 22vh, 210px) } .shelf__meta { margin-top: 16px } .shelf__meta b { font-size: .94rem } .shelf__meta span { font-size: .563rem; letter-spacing: .14em } .hero__cta .btn { flex: 1 1 100% } .footer__grid { grid-template-columns: 1fr } .row-2, .row-13 { grid-template-columns: 1fr } .grid-prod .card { flex-basis: 100%; max-width: 100% } .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s4) } .stepper-nav li span { display: none } .stepper-nav li { flex: 0 0 auto; padding-right: 20px } .drawer { width: 100vw } .spirit__specs div { flex: 1 1 100%; border-left: 0 !important; padding-left: 0 !important } .spirit__specs div+div { border-top: 1px solid var(--line) } .toast-zone { bottom: 14px } #suggestions.grid-prod .card { flex: 1 1 100%; max-width: 100%; } } .checkout.is-done { grid-template-columns: 1fr }