/** Shopify CDN: Minification failed

Line 568:0 Unexpected "}"

**/
/* ==========================================================================
   NINOU — Feuille de style
   Sommaire :
   1. Direction artistique « Pierre » (couleurs, typographies, formes)
   2. Réglages d'animation centralisés
   3. Base, typographie, grille
   4. Composants (boutons, en-tête, menu, pied de page, panier…)
   5. Sections (produit, récit épinglé, calculateur…)
   6. Pages de contenu (articles, pages légales)
   7. Animations (apparitions, mouvement réduit, transitions de page)
   Règle : on n'anime que transform et opacity.
   ========================================================================== */

/* ---------- 1. Direction artistique « Pierre » ----------------------------- */
/* Neutres chauds, accent cognac utilisé avec parcimonie (boutons d'achat) */
:root {
  --bg: #F4F2EE;
  --bg-2: #EAE6E0;          /* surfaces, cartes */
  --bg-3: #DFD9D0;          /* fonds d'images provisoires */
  --ink: #1E1D1B;
  --ink-2: #6A665F;         /* texte secondaire — 5,1:1 sur --bg */
  --line: #D6D0C6;
  --accent: #7A4A2E;        /* cognac — boutons d'achat uniquement */
  --on-accent: #FFFFFF;
  --inverse: #1E1D1B;       /* sections sombres */
  --on-inverse: #F4F2EE;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --display-weight: 500;
  --display-track: -0.035em;
  --radius: 4px;
  --radius-lg: 6px;
  --btn-radius: 999px;
  /* Illustration provisoire du produit */
  --prod-body: #E9E4DC; --prod-cap: #3A3632; --prod-window: #CFC7BB; --prod-hair: #A8957F; --prod-accent: #7A4A2E; --prod-shadow: #B9B0A3;
}

/* ---------- 2. Réglages d'animation (tous centralisés ici) --------------- */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* courbe principale */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-xs: 160ms;   /* micro-interactions */
  --dur-s: 320ms;    /* panier, menu */
  --dur-m: 700ms;    /* apparitions */
  --dur-l: 900ms;    /* titres */
  --rise: 24px;      /* décalage vertical des apparitions */
  --stagger: 80ms;   /* délai entre éléments successifs */
  --parallax: 0.08;  /* amplitude du parallaxe (lu par le JS) */
}

/* ---------- 3. Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 16px; }

/* Typographie : échelle précise */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.04; margin: 0; text-wrap: balance; }
.t-hero { font-size: clamp(2.6rem, 8.4vw, 6.4rem); line-height: .98; }
.t-1 { font-size: clamp(2.2rem, 5.6vw, 4.25rem); }
.t-2 { font-size: clamp(1.75rem, 3.8vw, 2.9rem); }
.t-3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.2; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 20px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.todo { font-style: normal; font-size: .8em; font-weight: 600; letter-spacing: .02em; color: #6B4E00; background: #FFF1C2; padding: .1em .4em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Grille */
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }
@media (min-width: 1200px) { .wrap { padding: 0 64px; } }
.wrap--narrow { max-width: 860px; }
.section { padding: clamp(80px, 12vw, 168px) 0; }
.section--tight { padding: clamp(56px, 8vw, 104px) 0; }
.section--alt { background: var(--bg-2); }
.section--inverse { background: var(--inverse); color: var(--on-inverse); }
.section--inverse .muted, .section--inverse .lead, .section--inverse .eyebrow { color: color-mix(in srgb, var(--on-inverse) 72%, transparent); }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
@media (min-width: 960px) { .head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } .head--split .lead { justify-self: end; } }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 4. Composants --------------------------------------------------- */
/* Boutons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 32px; border: 0; border-radius: var(--btn-radius);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-text); font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-xs) var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
/* Voile lumineux au survol (opacité seulement) */
.btn::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity var(--dur-s) var(--ease-out); z-index: -1; mix-blend-mode: soft-light; }
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-s) var(--ease-out); }
@media (hover: hover) { .btn:hover::after { opacity: .35; } .btn:hover .icon { transform: translateX(4px); } }
.btn:active { transform: scale(.98); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost::after { background: currentColor; mix-blend-mode: normal; }
@media (hover: hover) { .btn--ghost:hover::after { opacity: .06; } }
.btn__label, .btn__done { display: inline-flex; align-items: center; gap: 10px; transition: transform var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
.btn__done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(100%); }
.btn.is-added .btn__label { opacity: 0; transform: translateY(-100%); }
.btn.is-added .btn__done { opacity: 1; transform: none; }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; }
.link .icon { width: 16px; height: 16px; transition: transform var(--dur-s) var(--ease-out); }
@media (hover: hover) { .link:hover .icon { transform: translateX(4px); } }
.icon { width: 20px; height: 20px; flex: none; }

/* En-tête : se compacte au défilement */
.header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink); }
.header::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity var(--dur-s) var(--ease-out); }
.header.is-scrolled::before, .header.is-solid::before { opacity: 1; }
.header__in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; transition: transform var(--dur-s) var(--ease-out); }
.header.is-scrolled .header__in { transform: translateY(-6px); }
.header.is-scrolled { --logo-scale: .9; }
.header.is-hidden { transform: translateY(-100%); }
.header { transition: transform var(--dur-s) var(--ease-out); }
/* Logo Ninou (SVG) : couleurs du logo officiel, ajustables par contexte */
:root { --logo-ochre: #B27C3E; --logo-ink: #1F2229; }
.logo { justify-self: center; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transform: scale(var(--logo-scale, 1)); transition: transform var(--dur-s) var(--ease-out); }
.logo__dog { width: 34px; height: 35px; }
.logo__word { width: 56px; height: 18px; margin-top: 3px; }
@media (min-width: 1024px) { .logo__dog { width: 38px; height: 39px; } .logo__word { width: 64px; height: 21px; } }
.nav { display: none; gap: 32px; font-size: .875rem; }
.nav a { text-decoration: none; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-s) var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header__end { justify-self: end; display: flex; align-items: center; gap: 4px; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.icon-btn .icon { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: .65rem; font-weight: 600; display: grid; place-items: center; transition: transform var(--dur-s) var(--ease-out); }
.cart-count[hidden] { display: none; }
.cart-count.is-bump { animation: bump var(--dur-s) var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }
.menu-btn { justify-self: start; }
@media (min-width: 1024px) { .nav { display: flex; } .menu-btn { display: none; } .header__start { justify-self: start; } .header__in { height: 80px; } }
/* Sur les pages à hero sombre, l'en-tête est clair tant qu'on n'a pas défilé */
.page-dark-hero .header:not(.is-scrolled) { color: #fff; --logo-ink: #FFFFFF; }

/* Menu mobile plein écran */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; padding: 20px 20px calc(32px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transition: opacity var(--dur-s) var(--ease-out), visibility 0s var(--dur-s); }
.is-menu-open .menu { opacity: 1; visibility: visible; transition: opacity var(--dur-s) var(--ease-out); }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.menu__list { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 4px; }
.menu__list a { display: block; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.15; text-decoration: none; padding: 4px 0; }
.menu__list li, .menu__foot { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); }
.is-menu-open .menu__list li, .is-menu-open .menu__foot { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * var(--stagger) + 80ms); }
.menu__foot { display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.menu__foot a { color: var(--ink); }

/* Panier latéral */
.scrim { position: fixed; inset: 0; z-index: 80; background: #0B0A09; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-out); }
.is-cart-open .scrim { opacity: .42; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(440px, 100%); background: var(--bg); color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-m) var(--ease-out); visibility: hidden; }
.is-cart-open .drawer { transform: none; visibility: visible; }
.drawer:not(.is-open-anim) { transition: transform var(--dur-m) var(--ease-out), visibility 0s var(--dur-m); }
.is-cart-open .drawer { transition: transform var(--dur-m) var(--ease-out); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.drawer__head h2 { font-size: 1.375rem; }
.ship { padding: 0 24px 20px; font-size: .875rem; color: var(--ink-2); }
.ship strong { color: var(--ink); font-weight: 600; }
.ship__bar { height: 2px; background: var(--line); margin-top: 12px; overflow: hidden; }
.ship__bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-l) var(--ease-out); }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.line { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line__img { aspect-ratio: 1; background: var(--bg-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-2); }
.line__img svg { width: 70%; height: 70%; }
.line__img { overflow: hidden; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.line__sub { font-size: .8rem; color: var(--ink-2); margin: 2px 0 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--btn-radius); }
.qty button { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.qty .icon { width: 14px; height: 14px; }
.qty span { min-width: 22px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }
.empty { padding: 64px 0; text-align: center; color: var(--ink-2); }
.upsell { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.upsell .line__img svg { width: 60%; }
.upsell__txt { font-size: .85rem; line-height: 1.35; color: var(--ink-2); }
.upsell__txt strong { display: block; color: var(--ink); font-weight: 500; font-size: .92rem; }
.upsell button { border: 1px solid var(--ink); background: transparent; border-radius: var(--btn-radius); padding: 8px 14px; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background var(--dur-xs), color var(--dur-xs); }
.upsell button:hover { background: var(--ink); color: var(--bg); }
.drawer__foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 500; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.drawer__note { font-size: .8rem; color: var(--ink-2); margin-bottom: 16px; }

/* Barre d'achat fixe (mobile) */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); transform: translateY(105%); transition: transform var(--dur-m) var(--ease-out); }
.sticky-atc.is-visible { transform: none; }
.sticky-atc__txt { flex: 1; min-width: 0; line-height: 1.25; }
.sticky-atc__txt strong { display: block; font-weight: 500; font-size: .92rem; }
.sticky-atc__txt span { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sticky-atc .btn { min-height: 48px; padding: 0 24px; }
@media (min-width: 1024px) { .sticky-atc { display: none; } }

/* Pied de page éditorial */
.footer { background: var(--inverse); color: var(--on-inverse); padding: clamp(72px, 10vw, 128px) 0 calc(96px + env(safe-area-inset-bottom)); }
.footer a { text-decoration: none; opacity: .72; transition: opacity var(--dur-xs); }
.footer a:hover { opacity: 1; }
.footer__claim { font-size: clamp(2rem, 6vw, 4.5rem); max-width: 12em; margin-bottom: clamp(56px, 8vw, 104px); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; font-size: .9rem; }
.footer h2 { font-family: var(--font-text); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .55; margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 72px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--on-inverse) 18%, transparent); font-size: .8rem; opacity: .6; }
/* Logo complet dans le pied de page : mot en clair sur fond anthracite */
.footer { --logo-ink: var(--on-inverse); }
.footer__logo { display: inline-block; opacity: 1 !important; margin-bottom: clamp(40px, 6vw, 72px); }
.footer__logo svg { width: clamp(96px, 12vw, 132px); height: auto; aspect-ratio: 540 / 760; }
/* Filigrane purement décoratif : affiché via ::before pour rester hors de l'arbre d'accessibilité */
@media (min-width: 900px) { .footer { padding-bottom: 56px; } .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Images provisoires (à remplacer par vos photos et vidéos) */
.ph { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--radius-lg); color: var(--ink-2); isolation: isolate; }
.ph::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(60% 50% at 30% 25%, color-mix(in srgb, var(--bg) 70%, transparent), transparent 70%), radial-gradient(50% 50% at 80% 90%, color-mix(in srgb, var(--ink) 8%, transparent), transparent 70%); }
.ph--warm { background: color-mix(in srgb, var(--bg-3) 70%, #C9A98A); }
.ph--dark { background: #1A1917; color: #BDB8AF; }
.ph--dark::before { background: radial-gradient(55% 45% at 65% 35%, rgba(255,240,220,.16), transparent 70%); }
.ph__cap { position: absolute; left: 16px; bottom: 14px; right: 16px; font-size: .72rem; letter-spacing: .04em; display: flex; gap: 8px; align-items: baseline; }
.ph__cap b { font-weight: 600; }
.ph__product { position: absolute; inset: 8% 10%; width: 80%; height: 84%; }
.ph__icon { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; opacity: .55; }
.ph__inner { position: absolute; inset: -6% 0; will-change: transform; } /* calque pour parallaxe */
/* Vraies photos et vidéo : remplissent leur cadre */
.ph > .media, .ph__inner > .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph:has(> .media)::before, .ph:has(> .ph__inner > .media)::before { display: none; }
.ph--photo { background: var(--bg-2); }
/* Grand visuel de la page produit : le produit remonte au-dessus du titre */
/* ---- Cadrage : point focal du produit dans chaque photo ----
   (utile seulement quand le cadre n'a pas le même format que la photo) */
.media--packshot { object-position: 50% 42%; }
.media--salon { object-position: 56% 54%; }
.media--brossage { object-position: 64% 48%; }
.media--bac { object-position: 50% 36%; }
video.media { object-position: 58% 60%; }
/* Grand visuel produit (ordinateur) : le produit dans le haut du cadre, le titre dessous */
.hero-full .media--salon { object-position: 56% 64%; }
/* Accueil (ordinateur) : la scène de brossage en haut du cadre, au-dessus du texte */
.hero-full--home .media--salon { object-position: 58% 64%; }
@media (hover: hover) { .gallery__item .media, .showcase__media .media { transition: transform 1.2s var(--ease-out); } .gallery__item:hover .media, .showcase__media:hover .media { transform: scale(1.03); } }

/* Lumière qui glisse lentement : simule la vidéo en attendant la vraie */
.ph--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 7s var(--ease-io) infinite; }
@keyframes sweep { 60%, 100% { transform: translateX(100%); } }

/* ---------- 5. Sections ----------------------------------------------------- */
/* Bloc d'achat */
.buy { padding: 88px 0 clamp(64px, 8vw, 120px); }
.buy__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .buy { padding-top: 112px; } .buy__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; } .buy__info { position: sticky; top: 112px; } }
/* Galerie : glissement sur mobile, mosaïque sur ordinateur */
.gallery { position: relative; margin: 0 -20px; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; padding: 0 20px; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 88%; scroll-snap-align: center; aspect-ratio: 4 / 5; }
.gallery__count { position: absolute; right: 32px; top: 14px; font-size: .75rem; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--bg) 85%, transparent); padding: 4px 10px; border-radius: 999px; }
@media (min-width: 768px) { .gallery { margin: 0; } .gallery__track { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding: 0; gap: 12px; } .gallery__item { aspect-ratio: 4 / 5; } .gallery__item:first-child { grid-column: 1 / -1; } .gallery__count { display: none; } }
@media (hover: hover) { .gallery__item .ph__product { transition: transform 1.2s var(--ease-out); } .gallery__item:hover .ph__product { transform: scale(1.04); } }
.buy__title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin-bottom: 10px; }
.buy__sub { color: var(--ink-2); margin-bottom: 28px; }
.price { display: flex; align-items: baseline; gap: 12px; font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.price s { font-size: 1rem; color: var(--ink-2); font-weight: 400; }
.price-note { font-size: .8rem; color: var(--ink-2); margin-bottom: 28px; }
.points { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; font-size: .95rem; }
.points li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.points .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--ink-2); }
.offers { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.offers legend { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.offer { position: relative; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--dur-xs) var(--ease-out); }
.offer:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.offer input { position: absolute; opacity: 0; pointer-events: none; }
.offer__dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink-2); display: grid; place-items: center; }
.offer__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform var(--dur-s) var(--ease-out); }
.offer:has(input:checked) { border-color: var(--ink); }
.offer:has(input:checked) .offer__dot { border-color: var(--ink); }
.offer:has(input:checked) .offer__dot::after { transform: scale(1); }
.offer:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.offer__txt { line-height: 1.35; }
.offer__txt strong { display: block; font-weight: 500; }
.offer__txt span { font-size: .85rem; color: var(--ink-2); }
.offer__price { font-variant-numeric: tabular-nums; }
.assure { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: .85rem; color: var(--ink-2); }
.assure li { display: flex; align-items: center; gap: 12px; }
.assure .icon { width: 18px; height: 18px; }

/* Hero plein cadre */
.hero-full { position: relative; min-height: 92svh; display: grid; align-items: end; color: #fff; overflow: hidden; }
.hero-full .ph { position: absolute; inset: 0; border-radius: 0; }
/* Voile pour la lisibilité du texte blanc sur des images claires */
.hero-full__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,.28) 0%, rgba(20,16,12,0) 22%, rgba(20,16,12,.18) 42%, rgba(20,16,12,.72) 100%); }
.hero-full__txt { position: relative; padding-bottom: clamp(48px, 8vw, 104px); padding-top: 120px; }
.hero-full .lead { color: rgba(255,255,255,.85); }
.hero-full .eyebrow { color: rgba(255,255,255,.8); }

/* Titres révélés ligne par ligne (le JS découpe en lignes) */
.split .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split .ln > span { display: inline-block; }

/* Le problème */
.problems { display: grid; gap: 0; border-top: 1px solid var(--line); }
.problem { display: grid; gap: 12px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.problem__n { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; display: flex; gap: 12px; align-items: center; }
.problem__n .icon { width: 22px; height: 22px; }
.problem__fig { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.problem p { color: var(--ink-2); margin: 0; max-width: 28em; }
@media (min-width: 900px) { .problems { grid-template-columns: repeat(3, 1fr); border-top: 0; } .problem { padding: 0 40px 0 0; border-bottom: 0; border-left: 1px solid var(--line); padding-left: 32px; gap: 20px; } .problem:first-child { border-left: 0; padding-left: 0; } }

/* Récit épinglé : le fonctionnement en 3 temps */
.story__grid { display: grid; gap: 64px; }
.story__visual { display: none; }
.story__step .ph { aspect-ratio: 4 / 5; margin-bottom: 28px; }
.story__num { font-size: .8rem; color: var(--ink-2); letter-spacing: .1em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.story__step h3 { margin-bottom: 14px; }
.story__step p { color: var(--ink-2); max-width: 26em; }
@media (min-width: 1024px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: 96px; }
  .story__visual { display: block; position: sticky; top: 0; height: 100svh; }
  /* Cadre au format des photos (4:5) : rien n'est coupé */
  .story__frame { position: absolute; top: 12svh; bottom: 14svh; left: 0; aspect-ratio: 4 / 5; max-width: 100%; }
  .story__frame .ph { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity var(--dur-l) var(--ease-out), transform var(--dur-l) var(--ease-out); }
  .story__frame .ph.is-active { opacity: 1; transform: none; }
  .story__progress { position: absolute; left: 0; right: 0; bottom: 8svh; display: flex; gap: 8px; }
  .story__progress span { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  .story__progress span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-l) var(--ease-out); }
  .story__progress span.is-done::after { transform: scaleX(1); }
  .story__steps { padding: 30svh 0 30svh; }
  .story__step { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity var(--dur-m) var(--ease-out); }
  .story__step.is-active { opacity: 1; }
  .story__step .ph { display: none; }
}

/* Le produit sous tous les angles */
.angles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.angle { background: var(--bg); padding: 28px 20px 24px; display: grid; gap: 4px; align-content: start; }
.section--alt .angle { background: var(--bg-2); }
.angle svg { width: 56px; height: 56px; color: var(--ink); margin-bottom: 28px; transition: transform var(--dur-m) var(--ease-out); }
@media (hover: hover) { .angle:hover svg { transform: translateY(-4px); } }
.angle__n { font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.angle strong { font-weight: 500; }
.angle span { font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
@media (min-width: 900px) { .angles { grid-template-columns: repeat(4, 1fr); } .angle { padding: 40px 28px 32px; } }
.angles-hero { display: grid; gap: 12px; margin-bottom: 12px; }
.angles-hero .ph { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .angles-hero { grid-template-columns: 1fr 1fr; } }
/* Bandeau image : 4/3 sur mobile, panoramique sur grand écran (jamais de min-height avec aspect-ratio : cela force la largeur) */
.ph--banner { aspect-ratio: 4 / 3; }
.ph--banner .media--salon { object-position: 56% 52%; }
@media (min-width: 768px) { .ph--banner { aspect-ratio: 16 / 7; } }

/* Calculateur */
.calc { display: grid; gap: 48px; }
@media (min-width: 960px) { .calc { grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; } }
.calc fieldset { border: 0; padding: 0; margin: 0 0 40px; }
.calc legend, .calc .lbl { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; opacity: .72; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--btn-radius); padding: 4px; position: relative; }
.seg label { position: relative; z-index: 1; text-align: center; padding: 12px 4px; cursor: pointer; font-size: .92rem; line-height: 1.2; border-radius: var(--btn-radius); transition: color var(--dur-s) var(--ease-out); }
.seg label small { display: block; font-size: .72rem; opacity: .7; margin-top: 2px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); background: currentColor; border-radius: var(--btn-radius); transition: transform var(--dur-m) var(--ease-out); }
.seg label:has(input:checked) { color: var(--inverse); }
.section--inverse .seg label:has(input:checked) { color: var(--inverse); }
.seg label:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.range-row { display: flex; align-items: center; gap: 24px; }
.range-row output { font-family: var(--font-display); font-size: 2rem; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.range { -webkit-appearance: none; appearance: none; flex: 1; height: 28px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 1px; background: currentColor; opacity: .5; }
.range::-moz-range-track { height: 1px; background: currentColor; opacity: .5; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--on-inverse); margin-top: -11px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--on-inverse) 14%, transparent); }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--on-inverse); }
.calc__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.calc__fig { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(3.4rem, 10vw, 7.5rem); line-height: 1; margin: 12px 0 20px; font-variant-numeric: tabular-nums; }
.calc__fig small { font-size: .32em; letter-spacing: 0; opacity: .7; margin-left: .2em; }

/* Fiche technique */
.specs { display: grid; border-top: 1px solid var(--line); margin: 0; }
.specs div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-2); }
.specs dd { margin: 0; }
@media (min-width: 900px) { .specs { grid-template-columns: 1fr 1fr; column-gap: 64px; } }

/* Comparatif */
.compare-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: thin; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 20px 16px; text-align: center; border-bottom: 1px solid var(--line); font-weight: 400; }
.compare thead th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); vertical-align: bottom; }
.compare thead th.us { color: var(--ink); }
.compare th[scope="row"] { text-align: left; padding-left: 0; }
.compare .us { background: var(--bg-2); }
.section--alt .compare .us { background: var(--bg); }
.compare .icon { width: 20px; height: 20px; margin: 0 auto; }
.compare .no { color: var(--ink-2); opacity: .6; }

/* FAQ en accordéon */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 1.08rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq__sign { position: relative; flex: none; width: 14px; height: 14px; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform var(--dur-s) var(--ease-out); }
.faq__sign::after { transform: rotate(90deg); }
.faq details[open] .faq__sign::after { transform: rotate(0); }
.faq__a { padding: 0 48px 28px 0; color: var(--ink-2); max-width: 46em; }
.faq__a p:last-child { margin: 0; }
.faq details[open] .faq__a { animation: faqIn var(--dur-m) var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 960px) { .faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; } .faq-layout .head { position: sticky; top: 120px; align-self: start; } }

/* Rappel d'achat final */
.final { text-align: center; }
.final .ph { aspect-ratio: 4 / 5; width: min(340px, 78%); margin: 0 auto 48px; }
.final .ph::before { display: none; }
.final h2 { margin-bottom: 16px; }
.final .lead { margin: 0 auto 36px; }

/* Bénéfices (accueil) */
.benefits { display: grid; gap: 48px; }
.benefit .ph { aspect-ratio: 4 / 5; margin-bottom: 24px; }
.benefit h3 { margin-bottom: 10px; }
.benefit p { color: var(--ink-2); margin: 0; }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(3, 1fr); gap: 32px; } .benefit:nth-child(2) { margin-top: 80px; } }

/* Vitrine produit (accueil) : image + prix + ajout au panier */
.showcase { display: grid; gap: 32px; align-items: center; }
.showcase__media { display: block; aspect-ratio: 4 / 5; }
.showcase__media .ph__product { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .showcase__media:hover .ph__product { transform: scale(1.04); } }
.showcase__title { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 8px; }
.showcase__title a { text-decoration: none; }
.showcase .muted { margin-bottom: 24px; }
.showcase .price { font-size: 1.75rem; }
.showcase__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.showcase__actions .btn { min-width: 240px; }
@media (max-width: 599px) { .showcase__actions .btn { width: 100%; } }
@media (min-width: 900px) { .showcase { grid-template-columns: 1.15fr 1fr; gap: clamp(48px, 7vw, 112px); } }
.benefits-mini { display: grid; gap: 32px; margin-top: clamp(64px, 9vw, 120px); padding-top: 40px; border-top: 1px solid var(--line); }
.benefits-mini .icon { width: 26px; height: 26px; color: var(--ink-2); margin-bottom: 18px; }
.benefits-mini h3 { margin-bottom: 8px; }
.benefits-mini p { color: var(--ink-2); margin: 0; max-width: 26em; }
@media (min-width: 900px) { .benefits-mini { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* Extrait du fonctionnement (accueil) */
.steps-mini { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: s; }
.steps-mini li { list-style: none; display: grid; grid-template-columns: 56px 1fr; padding: 28px 0; border-bottom: 1px solid var(--line); }
.steps-mini li::before { counter-increment: s; content: "0" counter(s); font-size: .8rem; color: var(--ink-2); padding-top: 6px; }
.steps-mini h3 { margin-bottom: 6px; }
.steps-mini p { margin: 0; color: var(--ink-2); }
.steps-mini { padding: 0; margin: 0; }
@media (min-width: 900px) { .steps-mini { grid-template-columns: repeat(3, 1fr); border-top: 0; } .steps-mini li { grid-template-columns: 1fr; gap: 20px; border-bottom: 0; border-top: 1px solid var(--ink); padding-right: 40px; } }

/* Split image/texte */
.split-2 { display: grid; gap: 40px; align-items: center; }
.split-2 .ph { aspect-ratio: 4 / 5; }
@media (min-width: 960px) { .split-2 { grid-template-columns: 1fr 1fr; gap: 96px; } .split-2--rev > :first-child { order: 2; } }

/* ---------- 6. Pages de contenu -------------------------------------------- */
.page-head { padding: clamp(136px, 18vw, 220px) 0 clamp(48px, 6vw, 80px); }
.page-head h1 { max-width: 14em; }
.page-head .lead { margin-top: 24px; }
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.4em 0 .7em; line-height: 1.15; }
.prose h3 { font-family: var(--font-text); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin: 1.8em 0 .5em; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 1.6em 0; padding: 24px 28px; background: var(--bg-2); border-radius: var(--radius-lg); }
.prose blockquote p:last-child { margin: 0; }
.prose > :first-child { margin-top: 0; }
.legal-layout { display: grid; gap: 48px; padding-bottom: clamp(80px, 12vw, 160px); }
.legal-nav { font-size: .875rem; }
.legal-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.legal-nav a { display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--btn-radius); text-decoration: none; color: var(--ink-2); }
.legal-nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
@media (min-width: 1024px) { .legal-layout { grid-template-columns: 240px minmax(0, 720px); gap: 96px; } .legal-nav { position: sticky; top: 120px; align-self: start; } .legal-nav ul { display: grid; gap: 2px; } .legal-nav a { border: 0; padding: 8px 0; } .legal-nav a[aria-current="page"] { text-decoration: underline; } }
.updated { font-size: .85rem; color: var(--ink-2); margin-bottom: 40px; }
.form { display: grid; gap: 20px; max-width: 560px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea, .field select { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; transition: border-color var(--dur-xs); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--ink-2); }
.cards-2 { display: grid; gap: 16px; }
@media (min-width: 768px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin: 0; }
.toc { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 48px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }

/* ---------- 7. Animations --------------------------------------------------- */
/* Les éléments ne sont masqués que si le JS est actif ET les animations autorisées :
   sans JS, tout le contenu reste visible et utilisable. */
.motion [data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="scale"] { transform: scale(1.04); }
.motion [data-reveal="scale"].is-in { transform: none; }
.motion .split .ln > span { transform: translateY(105%); transition: transform var(--dur-l) var(--ease-out); transition-delay: calc(var(--l, 0) * var(--stagger) + 120ms); }
.motion .split.is-in .ln > span { transform: none; }
/* Entrée du hero sans attendre le défilement */
.motion .intro { opacity: 0; transform: translateY(16px); animation: intro var(--dur-l) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 300ms); }
@keyframes intro { to { opacity: 1; transform: none; } }
/* Filet de sécurité : une fois le délai d'animation écoulé, l'élément est forcé
   dans son état final, même si le navigateur n'a pas joué l'animation. */
.motion .intro.is-done, .motion [data-reveal].is-done { animation: none; transition: none; opacity: 1; transform: none; }
.motion .split.is-done .ln > span { transition: none; transform: none; }

/* Transitions entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 220ms var(--ease-io) both; }
::view-transition-new(root) { animation: vtIn 420ms var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* Mouvement réduit : simples fondus courts, aucun déplacement */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --dur-m: 200ms; --dur-l: 200ms; --stagger: 0ms; --parallax: 0; }
  .motion .split .ln > span, .motion [data-reveal="scale"] { transform: none; }
  .ph--video::after, .cart-count.is-bump { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; }
  .story__frame .ph { transform: none !important; }
}

/* ---- Mobile : l'image passe au-dessus du texte pour que le produit reste visible ---- */
@media (max-width: 767px) {
  .hero-full--stack { display: block; min-height: 0; background: var(--inverse); }
  .hero-full--stack .ph { position: relative; inset: auto; height: 72svh; }
  .hero-full--home .ph { height: 78svh; }
  .hero-full--stack .hero-full__shade { top: auto; height: 72svh; background: linear-gradient(180deg, rgba(20,16,12,0) 0%, rgba(20,16,12,0) 75%, var(--inverse) 100%); }
  .hero-full--home .hero-full__shade { height: 78svh; }
  /* Haut de la photo très clair (fenêtre) : en-tête en encre sombre sur l'accueil mobile */
  .page-dark-hero .header:not(.is-scrolled) { color: var(--ink); --logo-ink: #1F2229; }
  .hero-full--stack .hero-full__txt { padding-top: 8px; padding-bottom: 56px; }
  .hero-full--stack .ph__inner { inset: 0; }
  .hero-full--home .media--salon { object-position: 56% 50%; }
  .hero-full--stack .media--salon { object-position: 56% 50%; }
}

/* ---- Accueil, ordinateur : vidéo plein écran, voile sombre, texte blanc ---- */
@media (min-width: 1024px) {
  .hero-full--home { min-height: 100svh; }
  .hero-full--home .hero-full__shade { background: linear-gradient(90deg, rgba(14,12,10,.62) 0%, rgba(14,12,10,.38) 45%, rgba(14,12,10,.12) 75%), linear-gradient(180deg, rgba(14,12,10,.35) 0%, rgba(14,12,10,0) 25%, rgba(14,12,10,.45) 100%); }
  .hero-full--home .media--salon { object-position: 58% 80%; }
}
}