/* ==========================================================================
   ATNAILZ — DA « NUIT CHROMÉE » (2026)
   Noir velours, bordeaux foncé, crème clair, et le chrome liquide du logo.
   Chargée en dernier (après doux.css) : elle ne change que l'apparence.
   Tout le HTML, les identifiants et le JavaScript restent identiques.
   Animations : js/fx.js (curseur étoile, A chromé, révélations, etc.).
   ========================================================================== */
html[data-season] {
  --noir: #070506; --noir-2: #0e0a0b; --noir-3: #161012; --noir-4: #1f1619;
  --bx: #5c0f20; --bx-deep: #33060f; --bx-soft: #7e1c32; --bx-glow: #8f1f37;
  --cream: #efe6d8; --cream-2: #e2d6c4; --cream-3: #cdbfab;
  --ink: #120a0c;
  --chrome: linear-gradient(105deg, #5d5d64 0%, #f4f4f7 18%, #9a9aa1 32%, #ffffff 46%, #6c6c73 60%, #e9e9ee 76%, #8b8b92 100%);
  --chrome-line: linear-gradient(90deg, transparent, #8b8b92 15%, #ffffff 50%, #8b8b92 85%, transparent);
  /* anciens jetons : surfaces claires = papier crème, accents = bordeaux */
  --rose: var(--cream-2); --rose-2: var(--cream-3); --blush: #f5eee4; --beige: var(--cream-2);
  --blue: #ddd5c9; --blue-2: #c9c9cf;
  --espresso: var(--bx); --espresso-2: var(--bx-soft); --cocoa: var(--cream-3); --deep: var(--bx);
  --bone: var(--cream); --sand: var(--cream-2); --sand-2: var(--cream-3);
  --accent: var(--bx); --accent-ink: var(--bx); --accent-fg: var(--cream);
  --tag-bg: var(--bx); --tag-fg: var(--cream); --btn-bg: var(--bx);
  --card-a: var(--cream); --card-b: var(--cream-2);
  --radius: 22px; --panel-r: 0px;
  --display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --didone: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --script-f: 'Ballet', cursive;
  --halo-a: rgba(122, 18, 42, .34); --halo-b: rgba(92, 15, 32, .38); --halo-c: rgba(239, 230, 216, .05);
  --tint: saturate(1); --band: var(--bx-deep);
  color-scheme: dark;
}
html[data-season] body { background: var(--noir); color: var(--cream); }
html[data-season] ::selection { background: var(--bx-glow); color: var(--cream); }
html { scrollbar-color: #6c6c73 var(--noir, #070506); scrollbar-width: thin; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .45s cubic-bezier(.7, 0, .3, 1) both nuit-out; }
::view-transition-new(root) { animation: .6s cubic-bezier(.2, .8, .2, 1) both nuit-in; }
@keyframes nuit-out { to { opacity: 0; filter: blur(14px); transform: scale(1.03); } }
@keyframes nuit-in { from { opacity: 0; filter: blur(14px); transform: scale(.98); } }

/* ---------- atmosphère : halo bordeaux qui respire + grain argentique ---------- */
html[data-season] body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 34vmax at 18% 22%, var(--halo-a), transparent 70%),
    radial-gradient(36vmax 30vmax at 84% 70%, var(--halo-b), transparent 70%),
    radial-gradient(28vmax 24vmax at 60% 8%, var(--halo-c), transparent 70%);
}
@keyframes nuit-breathe { 50% { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg); } }
html[data-season] body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .045;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes nuit-grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } }

/* ---------- typographie : didone géante + grotesque + chrome liquide ---------- */
html[data-season] .display, html[data-season] .hero-title, html[data-season] .duo-title, html[data-season] .notes-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; color: var(--cream); }
html[data-season] .display { font-size: clamp(38px, 7vw, 128px); }
html[data-season] .display, html[data-season] .hero-title, html[data-season] .duo-title, html[data-season] .legal-page h1, html[data-season] .legal-page h2 { overflow-wrap: anywhere; hyphens: manual; }
html[data-season] .display em, html[data-season] .hero-title em, html[data-season] .duo-title em, html[data-season] .notes-title em, html[data-season] .footer-tag em, html[data-season] .sc-title em {
  font-family: var(--didone); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: 1.04em;
  background: var(--chrome); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: 30% 0; padding-right: .06em; }
@keyframes nuit-chrome { to { background-position: -220% 0; } }
.nuit-paper .display, .nuit-paper .display em, html[data-season] .nuit-paper .display em { color: var(--bx); }
html[data-season] .kicker, html[data-season] .label, html[data-season] .mono.label { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--cream); opacity: .62; }
html[data-season] .kicker::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 10px; vertical-align: -1px;
  background: url(../assets/chrome/etoile-petit.webp) center / contain no-repeat; }
html[data-season] .lede { color: var(--cream); opacity: .72; font-size: clamp(15.5px, 1.25vw, 18.5px); line-height: 1.65; }
html[data-season] .spark { color: #c9c9cf; }

/* ---------- boutons : capsules crème / contour chrome ---------- */
html[data-season] .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; min-height: 54px; padding: 0 30px; font-family: var(--display); font-weight: 700;
  font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; transition: transform .5s var(--ease), background .35s, color .35s, box-shadow .5s var(--ease); }
html[data-season] .btn--chrome { background: var(--cream); color: var(--noir); box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 18px 40px -18px rgba(143, 31, 55, .9); }
html[data-season] .btn--chrome::after { content: ''; display: block; position: absolute; inset: 0; z-index: -1; background: var(--chrome); background-size: 220% 100%; opacity: 0;
  transition: opacity .4s; }
html[data-season] .btn--chrome:hover::after { animation: nuit-chrome 3s linear infinite; }
html[data-season] .btn--chrome:hover { background: var(--cream); color: var(--noir); box-shadow: 0 0 0 1px #fff inset, 0 22px 50px -14px rgba(239, 230, 216, .35); }
html[data-season] .btn--chrome:hover::after { opacity: 1; }
html[data-season] .btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(239, 230, 216, .45); }
html[data-season] .btn--ghost span, html[data-season] .btn--ghost:hover span { color: inherit; }
html[data-season] .btn--ghost:hover { background: var(--cream); color: var(--noir); border-color: var(--cream); }
html[data-season] .link-btn { color: var(--cream); }

/* ---------- bande d'annonce ---------- */
html[data-season] .announce { background: var(--noir); color: var(--cream); border-bottom: 1px solid transparent; border-image: var(--chrome-line) 1; }
html[data-season] .announce p { font-family: var(--mono); font-weight: 500; letter-spacing: .18em; font-size: 11px; }
html[data-season] .announce .cb-pill { background: var(--cream) !important; color: var(--noir) !important; }

/* ---------- en-tête flottant ---------- */
html[data-season] .site-header, html[data-season] .site-header.is-solid, html[data-season] .site-header:not(.is-solid) {
  color: var(--cream); background: color-mix(in srgb, var(--noir) 62%, transparent); box-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(239, 230, 216, .08); }
html[data-season] .site-header .brand { color: var(--cream); font-family: var(--display); letter-spacing: .32em; }
html[data-season] .site-header .brand img { opacity: 0; width: 0; }
html[data-season] .site-header .brand::before { content: ''; width: 40px; height: 32px; background: url(../assets/chrome/a-petit.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25)); transition: transform .8s var(--spring); }
html[data-season] .site-header .brand:hover::before { transform: rotate(-14deg) scale(1.15); }
html[data-season] .site-header nav a { color: var(--cream); opacity: .7; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: opacity .3s, background-size .45s var(--ease); }
html[data-season] .site-header nav a:hover { opacity: 1; background-size: 100% 1px; }
html[data-season] .site-header .header-cta:not(.is-logged), html[data-season] .site-header .menu-btn {
  background: transparent; color: var(--cream); border: 1px solid rgba(239, 230, 216, .3); }
html[data-season] .site-header .header-cta:not(.is-logged):hover { background: var(--cream); color: var(--noir); }
html[data-season] .account-btn.is-logged { background: var(--bx); color: var(--cream); }
html[data-season] .cart-count { background: var(--cream); color: var(--noir); }
html[data-season] .account-btn.is-logged .cart-count, html[data-season] .header-cta:hover .cart-count { background: var(--noir); color: var(--cream); }
html[data-season] .mobile-menu { background: var(--noir); color: var(--cream); }
html[data-season] .mobile-menu li { border-color: rgba(239, 230, 216, .12); }
html[data-season] .mobile-menu a { color: var(--cream); }
html[data-season] body.menu-open .site-header { background: var(--noir); color: var(--cream); }
html body.menu-open .site-header .header-cta, html body.menu-open .site-header .brand, html body.menu-open .site-header .menu-btn { color: var(--cream) !important; border-color: rgba(239, 230, 216, .3) !important; }
html[data-season] .mobile-menu .mm-action.mm-account { background: var(--noir-3); color: var(--cream); }
html[data-season] .mobile-menu .mm-cta { background: var(--cream); color: var(--noir); }

/* ---------- mise en page : sections pleine largeur, numérotées ---------- */
html[data-season] main { counter-reset: nuit; }
html[data-season] .section { margin: 0; padding: clamp(70px, 11vw, 170px) clamp(20px, 6vw, 96px); border-radius: 0; background: transparent; color: var(--cream); border: 0; overflow: clip; }
html[data-season] main > .section:not([hidden]) { counter-increment: nuit; }
html[data-season] main > .section:not([hidden])::before {
  content: '(' counter(nuit, decimal-leading-zero) ')'; position: absolute; top: clamp(26px, 4vw, 54px); right: clamp(20px, 6vw, 96px);
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--cream); opacity: .45; display: block; }
html[data-season] main > .section + .section { border-top: 1px solid transparent; border-image: var(--chrome-line) 1; }
html[data-season] .section-head, html[data-season] .sec-head { max-width: none; margin-bottom: clamp(36px, 6vw, 80px); }
html[data-season] .section-head .label, html[data-season] .label { background: none; color: var(--cream); }

/* ---------- accueil ---------- */
html[data-season] .hero { margin: 0; padding: calc(var(--head-h) + 40px) clamp(20px, 6vw, 96px) clamp(44px, 7vh, 88px); border-radius: 0; background: var(--noir); color: var(--cream);
  display: flex; align-items: flex-end; min-height: calc(100svh - var(--announce-h)); max-height: none; overflow: clip; isolation: isolate; position: relative; }
html[data-season] main { padding-top: var(--announce-h); }
/* la photo en arrière-plan, fondue dans le noir */
html[data-season] .hero-photo { position: absolute; inset: 0 0 0 auto; width: min(64%, 1100px); height: 100%; z-index: 0; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
html[data-season] .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: grayscale(.35) contrast(1.06) brightness(.82);
  animation: hero-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.06); } }
html[data-season] .hero-photo::before { display: none; }
html[data-season] .hero-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,5,6,.7) 0%, transparent 22%, transparent 60%, rgba(7,5,6,.85) 100%), linear-gradient(180deg, rgba(92,15,32,.12), rgba(51,6,15,.4)); }
html[data-season] .hero::after { content: ''; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 70% at 18% 80%, rgba(92,15,32,.45), transparent 70%); }
html[data-season] .hero-card { position: relative; z-index: 3; max-width: min(720px, 100%); min-width: 0; padding: 0; animation: hero-up 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-up { from { opacity: 0; transform: translateY(24px); } }
html[data-season] .hero-card .kicker { color: var(--cream); opacity: .72; margin-bottom: 20px; white-space: normal; line-height: 1.7; }
html[data-season] .hero-title { white-space: normal; font-size: clamp(46px, 7vw, 128px); line-height: .92; text-shadow: 0 4px 40px rgba(0,0,0,.35); margin: 0; position: relative; }
html[data-season] .hero-title em { display: block; color: transparent; margin-top: .04em; font-size: 1.02em; }
html[data-season] .hero-sub { color: var(--cream); opacity: .8; max-width: 38ch; margin-top: 24px; }
html[data-season] .hero-actions { margin-top: 30px; gap: 12px; display: flex; flex-wrap: wrap; }
html[data-season] .hero-card .btn--chrome { background: var(--cream); color: var(--noir); }
html[data-season] .hero-card .btn--ghost { border-color: rgba(239,230,216,.5); color: var(--cream); background: rgba(7,5,6,.25); }
html[data-season] .hero-card .btn--ghost:hover { background: var(--cream); color: var(--noir); }
html[data-season] .hero-card .btn--ghost:hover span { color: var(--noir); }
html[data-season] .hero-spark { display: none; }
/* le A chromé : posé au-dessus du titre, flotte doucement (transformations seulement) */
.fx-hero-a { display: block; width: clamp(96px, 11vw, 176px); height: auto; margin: 0 0 14px -6px; pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); animation: hero-float 7s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
html[data-season] .hero-perks { margin: 0; padding: 22px clamp(20px, 6vw, 96px); gap: 0; border-block: 1px solid rgba(239,230,216,.12); }
html[data-season] .hero-perks li { background: transparent !important; border: 0; border-radius: 0; padding: 6px 22px; border-left: 1px solid rgba(239,230,216,.12); }
html[data-season] .hero-perks li:first-child { border-left: 0; padding-left: 0; }
html[data-season] .hero-perks li::before { width: 14px; height: 14px; border-radius: 0; background: url(../assets/chrome/etoile-petit.webp) center / contain no-repeat; }
html[data-season] .hero-perks b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--cream); font-size: 14px; }
html[data-season] .hero-perks span { font-family: var(--mono); font-size: 11.5px; opacity: .55; letter-spacing: .04em; }
/* décors des fêtes : plus discrets sur le noir */
html[data-season] .hero > .nl, html[data-season] .hero > [class^="nl-"], html[data-season] .hero > .hw, html[data-season] .hero > [class^="hw-"], html[data-season] .hero > .pq, html[data-season] .hero > [class^="pq-"] { z-index: 2; opacity: .9; }

/* bandeau défilant (créé par fx.js) */
.fx-marquee { position: relative; overflow: hidden; padding: 26px 0; border-bottom: 1px solid rgba(239,230,216,.12); background: var(--band); color: var(--cream); transition: background .8s; }
.fx-marquee-track { display: flex; width: max-content; gap: 46px; padding-right: 46px; align-items: center; animation: fx-marquee 40s linear infinite; }
@keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }
.fx-marquee span { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 76px); text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap; line-height: 1; }
.fx-marquee span:nth-child(4n+2) { font-family: var(--didone); font-style: italic; font-weight: 400; text-transform: none; background: var(--chrome); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 30% 0; }
.fx-marquee img { width: clamp(30px, 4vw, 56px); height: auto; flex: none; }

/* les deux univers : un ruban crème + un ruban bordeaux */
html[data-season] .duo { margin: 0; gap: 0; }
html[data-season] .duo-card { border-radius: 0; min-height: clamp(320px, 42vw, 560px); padding: clamp(32px, 6vw, 90px); justify-content: flex-end; overflow: hidden; isolation: isolate;
  transition: color .5s; }
html[data-season] .duo-card--shop { background: var(--cream); color: var(--noir); }
html[data-season] .duo-card--salon { background: var(--bx); color: var(--cream); }
html[data-season] .duo-card:hover { transform: none; box-shadow: none; }
html[data-season] .duo-card::before { content: ''; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: -22%; opacity: .9;
  background: url(../assets/chrome/etoile-moyen.webp) center / contain no-repeat; transition: transform 1.2s var(--ease), opacity .6s; transform: rotate(-8deg) scale(.82); }
html[data-season] .duo-card--shop::before { filter: invert(1) brightness(.35); opacity: .22; }
html[data-season] .duo-card:hover::before { transform: rotate(38deg) scale(1); }
html[data-season] .duo-title { font-size: clamp(34px, 4.4vw, 84px); color: inherit; overflow-wrap: anywhere; }
html[data-season] .duo-card--shop .duo-title em { background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-season] .duo-kicker { font-family: var(--mono); font-weight: 500; letter-spacing: .22em; opacity: .6; }
html[data-season] .duo-text { opacity: .72; font-size: 16px; }
html[data-season] .duo-link { margin-top: 18px; padding: 15px 26px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; transition: transform .5s var(--ease); }
html[data-season] .duo-card--shop .duo-link { background: var(--noir); color: var(--cream); }
html[data-season] .duo-card--salon .duo-link { background: var(--cream); color: var(--noir); }
html[data-season] .duo--gift { margin-top: 0; }

/* annonce Cozy Christmas : aux couleurs de la nuit */
html[data-season] .cosy { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding: clamp(60px, 9vw, 140px) clamp(20px, 6vw, 96px);
  background: radial-gradient(70% 90% at 75% 100%, #5c0f20 0%, #2a0710 45%, #070506 100%); }
html[data-season] .cosy .ck, html[data-season] .cosy .cdate span, html[data-season] .cosy .cdl-top { color: var(--cream-2); }
html[data-season] .cosy .cdl-fill { background: var(--chrome); background-size: 220% 100%; animation: nuit-chrome 3s linear infinite; box-shadow: 0 0 18px rgba(255,255,255,.35); }
html[data-season] .cosy .cbtn { background: var(--cream); color: var(--noir); }
html[data-season] .cosy h2 { font-size: clamp(58px, 9vw, 150px); }

/* nouvelle collection (avant sa sortie) */
html[data-season] .drop { background: var(--bx-deep); color: var(--cream); }
html[data-season] .drop-title { color: var(--cream); }
html[data-season] .drop .drop-label { background: var(--cream); color: var(--noir); }

/* ---------- collection : vitrine sur fond noir ---------- */
html[data-season] .collection { background: transparent; color: var(--cream); border: 0; }
html[data-season] .filter { color: var(--cream); border: 1px solid rgba(239,230,216,.28); background: transparent; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
html[data-season] .filter:hover { border-color: var(--cream); }
html[data-season] .filter[aria-pressed='true'] { background: var(--cream); color: var(--noir); border-color: var(--cream); }
html[data-season] .grid { gap: clamp(14px, 2vw, 28px); }
html[data-season] .card, html[data-season] .grid .card:nth-child(n) { --tile: var(--noir-3); background: var(--noir-2); color: var(--cream); padding: 0; border-radius: 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(239,230,216,.1); transform-style: preserve-3d; transition: box-shadow .6s var(--ease), opacity .8s var(--ease) var(--d, 0ms); }
html[data-season] .card:hover { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 40px 80px -40px rgba(143, 31, 55, .9); }
html[data-season] .card-media { border-radius: 0; background: radial-gradient(circle at 50% 30%, #2a1418, #0e0a0b 70%); aspect-ratio: 4 / 5; overflow: hidden; }
html[data-season] .card-media img { transition: transform 1.1s var(--ease), filter .6s; }
html[data-season] .card:hover .card-media img { transform: scale(1.08); }
html[data-season] .card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 45%); }
html[data-season] .card:hover::after { opacity: 1; }
html[data-season] .card-body { padding: 18px 18px 20px; border-top: 1px solid rgba(239,230,216,.1); }
html[data-season] .card-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 18px; color: var(--cream); }
html[data-season] .card-tag { color: var(--cream); opacity: .55; font-size: 13px; }
html[data-season] .card-price { color: var(--cream); font-family: var(--mono); font-size: 14.5px; letter-spacing: .02em; }
html[data-season] .card-price s, html[data-season] .card-price del { opacity: .45; }
html[data-season] .card-coll, html[data-season] .card-soon { color: var(--cream-3); font-family: var(--mono); font-weight: 500; letter-spacing: .18em; }
html[data-season] .card-body::after { background: var(--cream); color: var(--noir); width: 38px; height: 38px; }
html[data-season] .badge { background: var(--cream); color: var(--noir); border-radius: 999px; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; }
html[data-season] .badge--soon { background: var(--bx); color: var(--cream); }
html[data-season] .card .wish-heart, html[data-season] .card [class*="heart"] { background: rgba(7,5,6,.6); color: var(--cream); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* « Crée ton set » : l'article principal, en grand sur toute la largeur */
html[data-season] .grid .card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); text-align: left;
  box-shadow: 0 0 0 1px rgba(239,230,216,.35), 0 40px 90px -50px rgba(143, 31, 55, .95); }
html[data-season] .card--feature .card-media { aspect-ratio: 16 / 11; }
html[data-season] .card--feature .card-body { border-top: 0; border-left: 1px solid rgba(239,230,216,.1); padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; text-align: left; }
html[data-season] .card--feature .card-index { display: none; }
html[data-season] .card--feature .card-feat { color: var(--cream-3); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
html[data-season] .card--feature .card-title { font-size: clamp(30px, 4.4vw, 58px); line-height: .95; }
html[data-season] .card--feature .card-tag { font-size: clamp(14px, 1.3vw, 17px); opacity: .75; max-width: 34ch; }
html[data-season] .card--feature .card-price { font-size: 17px; margin-top: 6px; }
@media (max-width: 640px) {
  html[data-season] .grid .card--feature { grid-template-columns: minmax(0, 1fr); }
  html[data-season] .card--feature .card-media { aspect-ratio: 4 / 3; }
  html[data-season] .card--feature .card-body { border-left: 0; border-top: 1px solid rgba(239,230,216,.1); padding: 16px 16px 18px; gap: 6px; }
  html[data-season] .card--feature .card-tag { display: block; font-size: 13px; }
  html[data-season] .card--feature .card-title { font-size: 26px; }
  html[data-season] .card--feature .card-feat { font-size: 10px; }
}

/* ---------- roue des cadeaux : salle bordeaux ---------- */
html[data-season] .editorial { background: radial-gradient(80% 100% at 80% 50%, var(--bx-soft), var(--bx-deep) 70%); color: var(--cream); }
html[data-season] .ed-copy .display { color: var(--cream); }

/* ---------- atelier d'essayage ---------- */
html[data-season] .atelier { background: transparent; color: var(--cream); }
html[data-season] .atelier .display { color: var(--cream); }
html[data-season] .stage { background: radial-gradient(70% 70% at 50% 35%, #3a0d18 0%, #120a0c 65%, #070506 100%); box-shadow: 0 0 0 1px rgba(239,230,216,.12), 0 50px 100px -50px rgba(143,31,55,.9); }
html[data-season] .stage-readout { color: var(--cream); background: rgba(7,5,6,.6); }
html[data-season] .controls legend { color: var(--cream); opacity: .6; font-family: var(--mono); letter-spacing: .16em; }
html[data-season] .atelier .chip, html[data-season] .atelier .set-btn, html[data-season] .atelier .shape-btn { color: var(--cream); border-color: rgba(239,230,216,.25); background: transparent; }
html[data-season] .atelier .chip[aria-checked='true'], html[data-season] .atelier .set-btn[aria-checked='true'], html[data-season] .atelier .shape-btn[aria-checked='true'] { background: var(--cream); color: var(--noir); border-color: var(--cream); }

/* ---------- tailles : page de papier crème (contraste fort) ---------- */
html[data-season] .sizer { background: var(--cream); color: var(--ink); }
html[data-season] .sizer::before { color: var(--ink) !important; }
html[data-season] .sizer .display { color: var(--ink); }
html[data-season] .sizer .display em { background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-season] .sizer .kicker, html[data-season] .sizer .label, html[data-season] .sizer .lede { color: var(--ink); }
html[data-season] .sizer .kicker::before { filter: invert(1); }
html[data-season] .sizer-col { background: #f8f2e9; }
html[data-season] .sizer-summary strong { color: var(--bx); }
html[data-season] .notes-title { color: var(--ink); font-size: clamp(30px, 4vw, 60px); }
html[data-season] .notes-title em { background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-season] .note, html[data-season] .note:nth-child(n) { background: var(--noir); color: var(--cream); border-radius: 0; }
html[data-season] .note h3 { color: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- FAQ : liste éditoriale ---------- */
html[data-season] .pose, html[data-season] .faq { background: transparent; color: var(--cream); border: 0; }
html[data-season] .faq .display { color: var(--cream); }
html[data-season] .faq-item { background: transparent; border: 0; border-bottom: 1px solid rgba(239,230,216,.14); border-radius: 0; transition: background .5s var(--ease); }
html[data-season] .faq-item:hover { background: rgba(239,230,216,.03); border-color: rgba(239,230,216,.3); }
html[data-season] .faq-item[open] { background: var(--bx-deep); }
html[data-season] .faq-q { color: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: -.005em; }
html[data-season] .faq-n { color: var(--cream); opacity: .45; font-family: var(--mono); }
html[data-season] .faq-item[open] .faq-n { color: var(--cream); opacity: 1; }
html[data-season] .faq-plus { border-color: rgba(239,230,216,.35); color: var(--cream); }
html[data-season] .faq-item[open] .faq-plus { background: var(--cream); }
html[data-season] .faq-item[open] .faq-plus::before, html[data-season] .faq-item[open] .faq-plus::after { background: var(--noir); }
html[data-season] .faq-a, html[data-season] .faq-item p, html[data-season] .faq-item li { color: var(--cream); }
html[data-season] .faq-more a, html[data-season] .faq a { color: var(--cream); }

/* ---------- avis ---------- */
html[data-season] .reviews { background: var(--bx); color: var(--cream); }
html[data-season] .reviews .display, html[data-season] .reviews .lede, html[data-season] .reviews .kicker { color: var(--cream); }
html[data-season] .rv-card, html[data-season] .rv-card:nth-child(n) { background: var(--noir); color: var(--cream); border-radius: 0; box-shadow: 0 0 0 1px rgba(239,230,216,.1); }
html[data-season] .rv-card:nth-child(3n+2) { background: var(--cream); color: var(--ink); }
html[data-season] .rv-stars, html[data-season] .rv-card .rv-stars { color: #d9d9de; }
html[data-season] .rv-card:nth-child(3n+2) .rv-stars { color: var(--bx); }
html[data-season] .reviews-summary .rv-stars { color: var(--cream); }
html[data-season] .reviews .btn--chrome { background: var(--cream); color: var(--noir); }

/* ---------- formation ---------- */
html[data-season] .formation { background: transparent; padding: clamp(20px, 4vw, 60px) clamp(20px, 6vw, 96px); margin: 0; }
html[data-season] .formation-card { background: var(--noir-2); color: var(--cream); border-radius: 0; box-shadow: 0 0 0 1px rgba(239,230,216,.14); position: relative; overflow: hidden; }
html[data-season] .formation-card::before { content: ''; position: absolute; width: 380px; aspect-ratio: 1; right: -90px; bottom: -120px; opacity: .55;
  background: url(../assets/chrome/a-moyen.webp) center / contain no-repeat; animation: nuit-float 9s ease-in-out infinite; pointer-events: none; }
@keyframes nuit-float { 50% { transform: translateY(-18px) rotate(-6deg); } }
html[data-season] .formation-card .display { color: var(--cream); }
html[data-season] .notify-form input { background: transparent; color: var(--cream); border: 1px solid rgba(239,230,216,.35); }
html[data-season] .notify-form input::placeholder { color: rgba(239,230,216,.45); }

/* ---------- pied de page : le nom en chrome géant ---------- */
html[data-season] .site-footer { margin: 0; border-radius: 0; background: var(--noir); color: var(--cream); position: relative; overflow: hidden;
  border-top: 1px solid transparent; border-image: var(--chrome-line) 1; padding-bottom: clamp(140px, 20vw, 300px); }
html[data-season] .site-footer::after { content: 'ATNAILZ'; position: absolute; left: 50%; bottom: -.12em; translate: -50% 0; pointer-events: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(70px, 16.5vw, 300px); letter-spacing: -.06em; line-height: 1; white-space: nowrap;
  background: var(--chrome); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 30% 0; opacity: .9; }
html[data-season] .footer-brand { color: var(--cream); }
html[data-season] .footer-brand img { opacity: 0; width: 0; }
html[data-season] .footer-brand::before { content: ''; width: 46px; height: 38px; background: url(../assets/chrome/a-petit.webp) center / contain no-repeat; }
html[data-season] .footer-links a, html[data-season] .footer-links button { color: var(--cream); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
html[data-season] .site-footer a { color: var(--cream); }
html[data-season] .season-switch button { color: var(--cream); border-color: rgba(239,230,216,.3); font-family: var(--mono); }
html[data-season] .season-switch button[aria-pressed='true'] { background: var(--cream); color: var(--noir); }

/* ---------- fenêtres : papier crème, encre noire, accents bordeaux ---------- */
html[data-season] .drawer, html[data-season] .dialog { background: var(--cream); color: var(--ink); color-scheme: light; }
html[data-season] .drawer .display, html[data-season] .dialog .display, html[data-season] .dialog .lede, html[data-season] .drawer .lede,
html[data-season] .dialog .kicker, html[data-season] .drawer .kicker, html[data-season] .dialog .label, html[data-season] .drawer .label { color: var(--ink); }
html[data-season] .dialog .display em, html[data-season] .drawer .display em, html[data-season] .sc-title em {
  background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-season] .dialog .kicker::before, html[data-season] .drawer .kicker::before { filter: invert(1); }
html[data-season] .dialog .btn--chrome, html[data-season] .drawer .btn--chrome { background: var(--noir); color: var(--cream); }
html[data-season] .dialog .btn--chrome:hover, html[data-season] .drawer .btn--chrome:hover { color: var(--noir); }
html[data-season] .dialog .btn--ghost, html[data-season] .drawer .btn--ghost { color: var(--ink); border-color: rgba(18,10,12,.4); }
html[data-season] .dialog .btn--ghost:hover, html[data-season] .drawer .btn--ghost:hover { background: var(--noir); color: var(--cream); }
html[data-season] .dialog .card-title, html[data-season] .drawer .card-title { color: var(--ink); }
html[data-season] .chip[aria-checked='true'] { background: var(--noir); color: var(--cream); border-color: var(--noir); }
html[data-season] .toast { background: var(--cream); color: var(--noir); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
html[data-season] ::backdrop { background: rgba(7,5,6,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- chargement : le A chromé qui s'allume ---------- */
html[data-season] .loader { background: var(--noir); }
html[data-season] .loader-mark, html:not([data-season]) .loader-mark {
  width: 200px; height: 170px; -webkit-mask: none; mask: none; background: url(../assets/chrome/a-moyen.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 30px rgba(255,255,255,.3)); animation: nuit-loader-a 1.6s var(--ease) both; }
@keyframes nuit-loader-a { 0% { opacity: 0; transform: scale(.6) rotate(-25deg); filter: blur(12px) brightness(3); } 60% { filter: blur(0) brightness(1.6); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 30px rgba(255,255,255,.3)); } }
html[data-season] .loader-word { color: var(--cream); font-family: var(--mono); letter-spacing: .6em; font-size: 12px; }

/* ---------- curseur étoile (fx.js) ---------- */
@media (pointer: fine) {
  html.fx-cursor-on, html.fx-cursor-on body, html.fx-cursor-on a, html.fx-cursor-on button, html.fx-cursor-on label, html.fx-cursor-on summary { cursor: none; }
  html.fx-cursor-on input, html.fx-cursor-on textarea, html.fx-cursor-on select, html.fx-cursor-on [contenteditable] { cursor: auto; }
}
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 46px; height: 46px; margin: -23px 0 0 -23px; will-change: transform;
  background: url(../assets/chrome/etoile-petit.webp) center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255,255,255,.45)); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s; }
.fx-cursor.is-hover { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.fx-cursor.is-hidden { opacity: 0; }
.fx-dot { position: fixed; left: 0; top: 0; z-index: 301; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.fx-burst { position: fixed; z-index: 299; pointer-events: none; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: url(../assets/chrome/etoile-petit.webp) center / contain no-repeat; }
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 160; transform-origin: 0 50%; transform: scaleX(0); background: var(--chrome-line); pointer-events: none; }

/* ---------- titres découpés en mots (fx.js) ---------- */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-wi { display: inline-block; transform: translateY(105%) rotate(6deg); filter: blur(6px); transition: transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.fx-in .fx-wi { transform: none; filter: none; }
/* sections qui se dévoilent */
.fx-reveal { clip-path: inset(0 0 12% 0); opacity: .001; transform: translateY(40px); transition: clip-path 1.3s var(--ease), opacity 1s var(--ease), transform 1.3s var(--ease); }
.fx-reveal.fx-in { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }

/* ==========================================================================
   PAGES RENDEZ-VOUS & CARTE CADEAU
   ========================================================================== */
html[data-season] .rdv-page main { padding-top: var(--head-h); }
html[data-season] .rdv-hero { margin: 0; border-radius: 0; background: radial-gradient(90% 120% at 85% 20%, var(--bx) 0%, var(--bx-deep) 40%, var(--noir) 80%); color: var(--cream);
  padding: clamp(80px, 12vw, 190px) clamp(20px, 6vw, 96px) clamp(60px, 8vw, 120px); min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; }
html[data-season] .rdv-hero::after { content: ''; width: clamp(160px, 26vw, 420px); aspect-ratio: 1; top: 50%; right: clamp(10px, 6vw, 110px); translate: 0 -55%;
  background: url(../assets/chrome/etoile-moyen.webp) center / contain no-repeat; animation: nuit-spin 28s linear infinite; opacity: .95; }
@keyframes nuit-spin { to { rotate: 360deg; } }
html[data-season] .rdv-hero .display { font-size: clamp(54px, 9vw, 160px); color: var(--cream); position: relative; z-index: 1; }
html[data-season] .rdv-hero .label, html[data-season] .rdv-hero .mono { color: var(--cream); }
html[data-season] .rdv-hero .lede { color: var(--cream); }
html[data-season] .rdv-hero .btn--chrome { background: var(--cream); color: var(--noir); }
html[data-season] .rdv-hero .btn--ghost { color: var(--cream); border-color: rgba(239,230,216,.45); }
html[data-season] .rdv-section { margin: 0; border-radius: 0; background: transparent; color: var(--cream); border: 0; padding: clamp(60px, 9vw, 140px) clamp(20px, 6vw, 96px); }
html[data-season] .rdv-section + .rdv-section { border-top: 1px solid transparent; border-image: var(--chrome-line) 1; }
html[data-season] .rdv-section#reserver { background: var(--bx-deep); }
html[data-season] .rdv-section .section-head .label, html[data-season] .rdv-section .section-head .mono { color: var(--cream); font-family: var(--mono); font-weight: 500; }
html[data-season] .rdv-section .display { color: var(--cream); font-size: clamp(46px, 7vw, 120px); }
html[data-season] .t-card, html[data-season] .t-card:nth-child(n) { background: var(--cream); color: var(--ink); border-radius: 0; }
html[data-season] .t-card:nth-child(2) { background: var(--noir-2); color: var(--cream); box-shadow: 0 0 0 1px rgba(239,230,216,.14); }
html[data-season] .t-card h3 { color: var(--bx); font-family: var(--display); text-transform: uppercase; }
html[data-season] .t-card:nth-child(2) h3, html[data-season] .t-card:nth-child(2) .t-row .p { color: var(--cream); }
html[data-season] .t-row { border-color: rgba(18,10,12,.12); }
html[data-season] .t-card:nth-child(2) .t-row { border-color: rgba(239,230,216,.12); }
html[data-season] .t-row .p { color: var(--bx); font-family: var(--mono); }
html[data-season] .t-note { color: var(--cream); opacity: .6; }
html[data-season] .offer, html[data-season] .offer:nth-child(n) { background: transparent; color: var(--cream); border-radius: 0; box-shadow: 0 0 0 1px rgba(239,230,216,.14); }
html[data-season] .offer h4 { color: var(--cream); font-family: var(--display); text-transform: uppercase; }
html[data-season] .rules h4 { color: var(--cream); }
html[data-season] .rules, html[data-season] .rules p, html[data-season] .rules li { color: var(--cream); }
html[data-season] .book { background: var(--cream); color: var(--ink); border-radius: 0; box-shadow: 0 60px 120px -60px rgba(0,0,0,.9); color-scheme: light; }
html[data-season] .book .display, html[data-season] .book h2, html[data-season] .book h3, html[data-season] .book legend { color: var(--ink); }
html[data-season] .book .display em { background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-season] .book .btn--chrome { background: var(--noir); color: var(--cream); }
html[data-season] .book .btn--ghost { color: var(--ink); border-color: rgba(18,10,12,.4); }
html[data-season] .book .btn--ghost:hover { background: var(--noir); color: var(--cream); }
html[data-season] .steps span.on { border-color: var(--bx); color: var(--bx); }
html[data-season] .choice:has(input:checked) { border-color: var(--bx); background: #f7efe4; box-shadow: inset 0 0 0 1px var(--bx); }
html[data-season] .rdv-page .mine-card { background: var(--cream); color: var(--ink); border-radius: 0; }
html[data-season] .rdv-page .mine-card h3 { color: var(--bx); }
html[data-season] .rdv-page .mine-card .btn--chrome { background: var(--noir); color: var(--cream); }
html[data-season] .rdv-page .mine-card .btn--ghost { color: var(--ink); border-color: rgba(18,10,12,.4); }
html[data-season] .rdv-page .mine-card .btn--ghost span { color: var(--ink); }
html[data-season] .stamp.on { background: var(--noir); }

/* ==========================================================================
   PAGES DE TEXTE (guide press-on, informations légales)
   ========================================================================== */
html[data-season] .legal-page { background: var(--noir); color: var(--cream); }
html[data-season] .legal-page h1, html[data-season] .legal-page h2 { color: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: -.03em; }
html[data-season] .legal-page h1 { font-size: clamp(34px, 6vw, 96px); line-height: .92; }
html[data-season] .legal-page h1 em, html[data-season] .legal-page h2 em { font-family: var(--didone); font-style: italic; font-weight: 400; text-transform: none;
  background: var(--chrome); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 30% 0; }
html[data-season] .legal-page h3 { color: var(--cream); }
html[data-season] .legal-page a:not(.btn) { color: var(--cream); text-decoration-color: rgba(239,230,216,.4); }
html[data-season] .legal-page .legal-head { background: color-mix(in srgb, var(--noir) 70%, transparent); color: var(--cream); }
html[data-season] .legal-page table, html[data-season] .legal-page th, html[data-season] .legal-page td { border-color: rgba(239,230,216,.18); color: var(--cream); }

/* ---------- petits écrans ---------- */
@media (max-width: 860px) {
  html[data-season] .hero { padding: calc(var(--head-h) + 24px) 20px 34px; min-height: calc(100svh - var(--announce-h)); }
  html[data-season] .hero-photo { width: 100%; -webkit-mask-image: none; mask-image: none; }
  html[data-season] .hero-photo img { object-position: 50% 22%; }
  html[data-season] .hero-photo::after { background: linear-gradient(180deg, rgba(7,5,6,.75) 0%, rgba(7,5,6,0) 20%, rgba(7,5,6,.15) 42%, rgba(7,5,6,.82) 68%, var(--noir) 100%); }
  html[data-season] .hero-card { width: 100%; }
  html[data-season] .hero-title { font-size: clamp(38px, 11vw, 84px); }
  html[data-season] .hero-sub { margin-top: 16px; font-size: 15.5px; }
  html[data-season] .hero-actions { margin-top: 22px; }
  html[data-season] .hero-actions .btn { flex: 1 1 200px; }
  html[data-season] .rdv-hero .display { font-size: clamp(36px, 10.6vw, 90px); }
  html[data-season] .display, html[data-season] .rdv-section .display { font-size: clamp(32px, 9.6vw, 72px); }
  html[data-season] .legal-page h1 { font-size: clamp(30px, 9vw, 60px); }
  .fx-hero-a { width: clamp(72px, 20vw, 120px); margin-bottom: 8px; }
  html[data-season] .hero-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  html[data-season] .hero-perks li:nth-child(3) { border-left: 0; padding-left: 0; }
  html[data-season] .rdv-hero::after { top: 22%; right: -40px; opacity: .6; }
}
@media (max-width: 760px) {
  html[data-season] .section, html[data-season] .rdv-section { margin: 0; padding: 70px 18px; }
  html[data-season] .hero, html[data-season] .duo, html[data-season] .hero-perks { margin-inline: 0; }
  html[data-season] .hero-perks { padding-inline: 18px; }
  html[data-season] .site-footer { margin: 0; }
  html[data-season] .formation { padding-inline: 18px; }
  html[data-season] .rdv-hero { padding-inline: 18px; min-height: 62svh; }
  html[data-season] .duo-card { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-season] body::before, html[data-season] body::after, html[data-season] .hero-photo::before, html[data-season] .hero-photo img, html[data-season] .hero-card, .fx-hero-a, .fx-marquee-track { animation: none; }
  html[data-season] .display em, html[data-season] .hero-title em, .fx-marquee span, html[data-season] .site-footer::after { animation: none; }
  .fx-wi { transform: none; filter: none; }
  .fx-reveal { clip-path: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   FÊTES — chaque fête a sa propre nuit : halos, teinte du chrome (A, étoiles,
   curseur), rouge principal et bandeau. Les décors animés (js/halloween.js,
   noel.js, paques.js) restent ceux du site.
   ========================================================================== */
/* le chrome (images) prend la teinte de la fête */
html[data-season] .site-header .brand::before, html[data-season] .kicker::before, html[data-season] .hero-perks li::before, html[data-season] .duo-card--salon::before,
html[data-season] .formation-card::before, html[data-season] .footer-brand::before, html[data-season] .rdv-hero::after,
html[data-season] .fx-marquee img, html[data-season] .fx-burst { filter: var(--tint); }
html[data-season] .fx-hero-a { filter: var(--tint) drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
html[data-season] .fx-cursor { filter: var(--tint) drop-shadow(0 0 8px rgba(255,255,255,.45)); }
html[data-season] .loader-mark { filter: var(--tint) drop-shadow(0 0 30px rgba(255,255,255,.3)); }
html[data-season] .sizer .kicker::before, html[data-season] .dialog .kicker::before, html[data-season] .drawer .kicker::before { filter: invert(1); }

/* Halloween : nuit d'aubergine, chrome cuivré, lueur de citrouille */
html[data-season='halloween'] {
  --bx: #3d1042; --bx-deep: #1d0721; --bx-soft: #5e2266; --bx-glow: #e8641c;
  --halo-a: rgba(232, 100, 28, .26); --halo-b: rgba(94, 34, 102, .5); --halo-c: rgba(255, 190, 120, .07);
  --chrome: linear-gradient(105deg, #5a2a10 0%, #ffd9b0 18%, #c0662a 32%, #fff1e0 46%, #7a3410 60%, #ffb46a 76%, #8a4a20 100%);
  --chrome-line: linear-gradient(90deg, transparent, #c0662a 15%, #ffe0bd 50%, #c0662a 85%, transparent);
  --tint: sepia(1) saturate(5) hue-rotate(-32deg) brightness(.95);
  --band: #e8641c; --glow: rgba(232, 100, 28, .7);
}
html[data-season='halloween'] .fx-marquee { color: #1d0721; }
html[data-season='halloween'] .fx-marquee span:nth-child(4n+2) { background: linear-gradient(105deg, #1d0721, #5e2266 40%, #1d0721 70%, #3d1042); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-season='halloween'] .fx-marquee img { filter: brightness(0); }

/* Noël : nuit rouge et sapin, chrome doré */
html[data-season='noel'] {
  --bx: #6a0d1c; --bx-deep: #2a050b; --bx-soft: #8f1a2a; --bx-glow: #c8243a;
  --halo-a: rgba(200, 36, 58, .3); --halo-b: rgba(29, 81, 54, .55); --halo-c: rgba(243, 211, 139, .08);
  --chrome: linear-gradient(105deg, #6e5010 0%, #fff2bf 18%, #c79a38 32%, #fffbe6 46%, #8a6a22 60%, #f3d38b 76%, #a87a22 100%);
  --chrome-line: linear-gradient(90deg, transparent, #a87a22 15%, #fff2bf 50%, #a87a22 85%, transparent);
  --tint: sepia(.9) saturate(2.3) hue-rotate(-6deg) brightness(1.06);
  --band: #13301f; --glow: rgba(243, 211, 139, .45);
}

/* Pâques : nuit prune, chrome nacré irisé, lueurs pastel */
html[data-season='paques'] {
  --bx: #4a1a40; --bx-deep: #22091d; --bx-soft: #6d2d5f; --bx-glow: #b88ad8;
  --halo-a: rgba(184, 138, 216, .32); --halo-b: rgba(246, 207, 87, .16); --halo-c: rgba(150, 220, 190, .12);
  --chrome: linear-gradient(105deg, #8a7aa8 0%, #ffffff 16%, #f6c6d8 30%, #ffffff 44%, #a8e0cf 58%, #fff4c4 74%, #b8a4e0 100%);
  --chrome-line: linear-gradient(90deg, transparent, #b8a4e0 15%, #fff4c4 50%, #a8e0cf 85%, transparent);
  --tint: sepia(.7) saturate(2.6) hue-rotate(238deg) brightness(1.12);
  --band: #f3e2f0; --glow: rgba(184, 138, 216, .75);
}
html[data-season='paques'] .fx-marquee { color: #22091d; }
html[data-season='paques'] .fx-marquee span:nth-child(4n+2) { background: linear-gradient(105deg, #6d2d5f, #b88ad8 40%, #6d2d5f 70%, #4a1a40); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-season='paques'] .fx-marquee img { filter: invert(1) brightness(.4); }

/* le sélecteur de fête du pied de page, en pastilles */
html[data-season] .season-switch button { transition: background .35s, color .35s, border-color .35s; }
html[data-season] .season-switch button:hover { border-color: var(--cream); }

/* chargement plus court ; l'accueil démarre son entrée une fois le rideau levé */
html[data-season] .loader { transition-duration: .7s; }
body.is-loading .hero-card, body.is-loading .hero-photo img { animation-play-state: paused; }

/* en-tête : la navigation en capitales ne tient pas sous 1180 px → menu ☰ */
@media (max-width: 1180px) {
  html[data-season] .site-header nav { display: none; }
  html[data-season] .menu-btn { display: inline-flex; }
  html[data-season] .account-label, html[data-season] .cart-btn .cart-label { display: none; }
  html[data-season] .cart-btn svg { display: block; }
  html[data-season] .account-btn, html[data-season] .cart-btn { padding: 8px 12px; }
}
/* accueil : « PRESS-ON » reste sur une ligne, visage dégagé sur téléphone */
html[data-season] .hero-card { max-width: min(980px, 100%); }
html[data-season] .hero-title { font-size: clamp(36px, 6.4vw, 118px); }
html[data-season] .hero-sub { max-width: 40ch; }
@media (max-width: 860px) {
  html[data-season] .hero-title { font-size: clamp(32px, 10.2vw, 80px); }
  html[data-season] .hero-photo { inset: 0 0 auto 0; height: 76%; }
  html[data-season] .hero-photo img { object-position: 50% 18%; }
  html[data-season] .hero-photo::after { background: linear-gradient(180deg, rgba(7,5,6,.7) 0%, rgba(7,5,6,0) 18%, rgba(7,5,6,0) 45%, rgba(7,5,6,.75) 75%, var(--noir) 100%); }
}
@media (max-width: 860px) and (orientation: landscape) {
  html[data-season] .hero-photo { height: 100%; }
}
html[data-season] .hero-title { max-width: 9em; }
@media (max-height: 520px) and (orientation: landscape) {
  html[data-season] .hero { min-height: 0; padding-top: calc(var(--head-h) + 28px); }
  html[data-season] .hero-title { font-size: min(8vw, 13vh); }
  html[data-season] .hero-photo { inset: 0 0 0 auto; width: 60%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
  .fx-hero-a { width: 70px; }
}
/* titre de l'accueil : ATNAILZ en grand, l'activité en dessous */
html[data-season] .hero-title { font-size: clamp(54px, 11.5vw, 210px); letter-spacing: -.02em; line-height: .88; max-width: none; }
html[data-season] .hero-tagline { display: block; margin-top: .55em; font-size: clamp(17px, 2.3vw, 38px); line-height: 1.15; letter-spacing: .01em; }
html[data-season] .hero-title .hero-tagline em { display: inline; font-size: 1.12em; margin: 0; }
@media (max-width: 860px) {
  html[data-season] .hero-title { font-size: clamp(44px, 15.5vw, 120px); }
  html[data-season] .hero-tagline { font-size: clamp(16px, 4.6vw, 26px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  html[data-season] .hero-title { font-size: min(11vw, 22vh); }
  html[data-season] .hero-tagline { font-size: 16px; }
}
html[data-season] .hero-card { max-width: none; }
html[data-season] .hero-title { font-size: min(9.4vw, 190px); overflow-wrap: normal; }
html[data-season] .hero-name { display: block; white-space: nowrap; }
@media (max-width: 860px) { html[data-season] .hero-title { font-size: calc((100vw - 44px) / 7.3); } }
@media (max-height: 520px) and (orientation: landscape) { html[data-season] .hero-title { font-size: min(8vw, 20vh); } }

/* ==========================================================================
   TYPO « ATNAILZ LIQUID » — police maison (dérivée d'Urbanist, licence OFL) :
   rondeurs liquides, minuscules, lettres serrées. Le logo de l'accueil est le
   wordmark fondu (SVG dans index.html).
   ========================================================================== */
@font-face { font-family: 'ATNAILZ Liquid'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/atnailz-liquid.woff2) format('woff2'); }
html[data-season] { --display: 'ATNAILZ Liquid', 'Syne', 'Helvetica Neue', Arial, sans-serif; }
html[data-season] .display, html[data-season] .hero-title, html[data-season] .duo-title, html[data-season] .notes-title, html[data-season] .sc-title,
html[data-season] .card-title, html[data-season] .note h3, html[data-season] .faq-q, html[data-season] .t-card h3, html[data-season] .offer h4,
html[data-season] .legal-page h1, html[data-season] .legal-page h2, .fx-marquee span, html[data-season] .hero-perks b {
  text-transform: none; letter-spacing: -.025em; font-synthesis: none; }
html[data-season] .display, html[data-season] .duo-title, html[data-season] .legal-page h1 { line-height: .92; }
html[data-season] .btn, html[data-season] .duo-link { font-synthesis: none; letter-spacing: .04em; }
html[data-season] .site-header .brand { font-family: var(--display); text-transform: lowercase; letter-spacing: -.02em; font-size: 22px; }
html[data-season] .site-footer::after { content: 'atnailz'; font-family: var(--display); letter-spacing: -.045em; }
/* accueil : le wordmark fondu */
html[data-season] .hero-title { font-size: clamp(40px, 6vw, 110px); }
html[data-season] .hero-name { display: block; line-height: 0; }
html[data-season] .hero-wordmark { display: block; width: min(64vw, 900px); height: auto; color: var(--cream); filter: drop-shadow(0 6px 30px rgba(0,0,0,.35)); }
html[data-season] .hero-tagline { margin-top: .5em; font-size: clamp(18px, 2.2vw, 36px); letter-spacing: -.01em; }
@media (max-width: 860px) {
  html[data-season] .hero-title { font-size: 40px; }
  html[data-season] .hero-wordmark { width: 100%; }
  html[data-season] .hero-tagline { font-size: clamp(17px, 5vw, 26px); }
}
@media (max-height: 520px) and (orientation: landscape) { html[data-season] .hero-wordmark { width: min(46vw, 82vh); } }
html[data-season] .footer-brand { font-family: var(--display); text-transform: lowercase; letter-spacing: -.02em; font-synthesis: none; }
html[data-season] .cosy h2 { padding-left: .06em; } html[data-season] .cosy .ctext { min-width: 0; }

/* Safari (iPhone / Mac) : un texte « découpé » dans le dégradé chrome (background-clip: text)
   n'affiche pas les mots animés à l'intérieur (fx-w / fx-wi). On pose donc le chrome sur
   chaque mot, et plus sur le bloc entier. */
html[data-season] :is(.display, .hero-title, .duo-title, .notes-title, .footer-tag, .sc-title, .legal-page h1, .legal-page h2) em:has(.fx-wi) {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; }
html[data-season] :is(.display, .hero-title, .duo-title, .notes-title, .footer-tag, .sc-title, .legal-page h1, .legal-page h2) em .fx-wi {
  background: var(--chrome); background-size: 220% 100%; background-position: 30% 0; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; padding-right: .08em; margin-right: -.08em; }
/* sur les fonds crème : le même italique, en dégradé bordeaux */
html[data-season] :is(.duo-card--shop .duo-title, .sizer .display, .notes-title, .book .display) em .fx-wi {
  background: linear-gradient(105deg, #33060f, #8f1f37 40%, #33060f 70%, #5c0f20); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
/* téléphone : l'étoile des cartes duo remonte, pour ne plus passer derrière le titre */
@media (max-width: 700px) { html[data-season] .duo-card::before { width: 46%; right: -12%; top: -14%; } }
/* l'italique chromé (non découpé) apparaît en fondu avec son titre */
.fx-reveal-em em, :is(.display, .hero-title, .duo-title, .notes-title, .legal-page h1) em { transition: opacity .9s .25s ease; }
:is(.display, .hero-title, .duo-title, .notes-title, .legal-page h1)[data-fx-split]:not(.fx-in) em { opacity: 0; }

/* ==========================================================================
   VERSION ALLÉGÉE — l'essentiel tout de suite, page plus courte, plus rapide
   ========================================================================== */
/* le contenu est visible dès l'arrivée : plus d'apparition retardée au défilement */
[data-reveal], html[data-season] .card[data-reveal], .fx-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
html[data-season] .hero-card { animation-duration: .5s; animation-delay: 0s; }
html[data-season] .hero-photo img { animation-duration: .8s; }
.fx-marquee { display: none; }
/* grain argentique : seulement sur ordinateur (inutile et coûteux sur téléphone) */
@media (max-width: 760px) { html[data-season] body::after { display: none; } }

/* bande « carte cadeau » à la place des deux grands blocs */
html[data-season] .gift-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0; padding: 34px clamp(20px, 6vw, 96px);
  background: var(--bx); color: var(--cream); border-block: 1px solid rgba(239,230,216,.12); }
html[data-season] .gift-band-t { font-family: var(--display); font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.1; }
html[data-season] .gift-band-t em { font-family: var(--didone); font-style: italic; font-weight: 400; color: var(--cream-2); }
html[data-season] .gift-band-links { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-season] .gift-band .btn--ghost { border-color: rgba(239,230,216,.5); color: var(--cream); min-height: 48px; }
html[data-season] .gift-band .btn--ghost span { color: var(--cream); }
html[data-season] .gift-band .btn--ghost:hover { background: var(--cream); }
html[data-season] .gift-band .btn--ghost:hover span { color: var(--noir); }

/* téléphone : collection sur 2 colonnes, cartes réduites à l'essentiel */
@media (max-width: 640px) {
  html[data-season] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-season] .card-index, html[data-season] .card-tag, html[data-season] .card-coll, html[data-season] .card-sheen { display: none; }
  html[data-season] .card-body { padding: 12px 12px 14px; column-gap: 0; grid-template-columns: minmax(0, 1fr); }
  html[data-season] .card-body::after { position: absolute; width: 30px; height: 30px; right: 10px; bottom: 12px; }
  html[data-season] .card-title { font-size: 15px; }
  html[data-season] .card-soon { font-size: 10.5px; line-height: 1.4; margin-top: 4px; }
  html[data-season] .card-price { font-size: 13px; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-right: 32px; }
  html[data-season] .card-save { display: none; }
  html[data-season] .badge { font-size: 9.5px; padding: 4px 8px; }
  html[data-season] .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  html[data-season] .filters::-webkit-scrollbar { display: none; }
  html[data-season] .filter { flex: none; }
  html[data-season] .section, html[data-season] .rdv-section { padding-block: 56px; }
  html[data-season] .section-head, html[data-season] .sec-head { margin-bottom: 26px; }
  html[data-season] .hero-perks li { padding: 4px 12px; }
  html[data-season] .hero-perks span { font-size: 10.5px; }
  html[data-season] .site-footer { padding-bottom: 120px; }
}
/* rendez-vous : grille des tarifs repliée sous la réservation */
html[data-season] .tarifs-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 22px;
  border: 1px solid rgba(239,230,216,.25); font-family: var(--display); font-size: clamp(18px, 2vw, 22px); color: var(--cream); }
html[data-season] .tarifs-more > summary::-webkit-details-marker { display: none; }
html[data-season] .tarifs-more > summary:hover { background: rgba(239,230,216,.06); }
.tarifs-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cream, #efe6d8); }
.tarifs-plus::before, .tarifs-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--noir, #070506); translate: -50% -50%; transition: rotate .3s; }
.tarifs-plus::after { rotate: 90deg; }
html[data-season] .tarifs-more[open] .tarifs-plus::after { rotate: 0deg; }
html[data-season] .tarifs-more[open] > summary { margin-bottom: 28px; }
/* créateur de set : sans photo d'inspiration, on ne peut pas ajouter au panier */
html[data-season] .ds .add-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
html[data-season] .ds-need-photo { margin: 6px 0 2px; padding: 12px 14px; border-radius: 14px; background: rgba(92,15,32,.08); color: var(--bx); font-size: 14px; line-height: 1.5; }

/* commande fabriquée à la demande : rappel au panier, annulation 24 h */
.made-note { padding: 14px 16px; border-radius: 16px; background: rgba(92,15,32,.08); border: 1px solid rgba(92,15,32,.18); font-size: 14px; line-height: 1.55; color: var(--ink, #120a0c); }
.made-note strong { color: var(--bx, #5c0f20); }
.order-cancel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.order-cancel-row .btn { min-height: 44px; }
.order-status.is-cancelled { opacity: .6; }
.dialog.order-cancel { max-width: 520px; width: calc(100% - 24px); padding: 0; border: 0; border-radius: 26px; background: var(--cream, #efe6d8); color: var(--ink, #120a0c); }
.dialog.order-cancel::backdrop { background: rgba(7,5,6,.7); }
.order-cancel .oc-in { position: relative; display: grid; gap: 14px; padding: 34px 28px 28px; }
.order-cancel .oc-title { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--bx, #5c0f20); }
.order-cancel .oc-lines { margin: 0; padding-left: 18px; font-size: 15px; }
.order-cancel .oc-actions { display: grid; gap: 10px; }
.order-cancel .oc-actions .btn--ghost { color: var(--ink, #120a0c); border-color: rgba(18,10,12,.3); }
.order-cancel .oc-actions .btn--ghost span { color: var(--ink, #120a0c); }
.order-cancel .oc-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--noir, #070506); color: var(--cream, #efe6d8); font-size: 20px; cursor: pointer; }