/* La Balise — démo « Moulinet, parfumeur à Dinard ». Polices servies par le site (CSP font-src 'self'). */
@font-face { font-family: "Bodoni Moda"; src: url("/exemples/parfumerie/fonts/bodoni.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/exemples/parfumerie/fonts/bodoni-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/exemples/parfumerie/fonts/jost.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
/* Layout : bandeau maquette + en-tête collant ; Accueil / Fiche commutées par ancre ; affiche en colonne droite du héros,
   rayures de cabines de plage comme unique motif fort. Thème clair unique (pas de mode sombre). Blanc porcelaine, bleu marine, or réservé aux filets et aux détails. */
:root{
  --bg:#FBF8F2; --surface:#FFFFFF; --sunk:#F2ECE0; --ink:#17191F; --muted:#5B5F69; --line:#E6DECF;
  --navy:#1B2440; --navy-ink:#FFFFFF; --gold:#86651E; --gold-soft:#F4EEE1; --stripe:#FFFFFF; --stripe-c:#C7D1E2;
  --ok:#1E6B3E; --warn:#7F5300; --err:#A3302A; --ring:#1B2440; --photo:1; color-scheme:light;
  --grain: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .3 0 0 0 0 .26 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .03' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .46 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --r:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background-color:var(--bg);background-image:var(--grain);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0}
/* Bodoni Moda a un axe de taille optique : en « auto », au-delà de ~30px les déliés deviennent quasi invisibles.
   On plafonne l'axe sur les grands corps pour garder des déliés lisibles sans perdre le caractère Didone. */
h1,h2,.house blockquote,.score b{font-variation-settings:"opsz" 28}
p{margin:0}
button{font:inherit;color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.num{font-variant-numeric:tabular-nums}
.section{padding-block:clamp(56px,8vw,112px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:40px}
.sec-head h2{font-size:clamp(2rem,3.8vw,3rem)}
.sec-head p{color:var(--muted);max-width:46ch}
.stripes{height:10px;background:repeating-linear-gradient(90deg,var(--stripe-c) 0 18px,transparent 18px 36px);border-block:1px solid var(--stripe-c)}

/* Bandeau maquette */
.demo{background:var(--ink);color:var(--bg);font-size:.8125rem}
.demo .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:8px}
.pills{display:flex;gap:4px}
.pills button{background:transparent;border:1px solid color-mix(in oklab,var(--bg) 35%,transparent);color:var(--bg);padding:3px 12px;border-radius:99px;cursor:pointer;font-size:.8125rem}
.pills button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}

/* En-tête */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background-color:color-mix(in oklab,var(--bg) 92%,transparent);background-image:var(--grain);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;padding:0;cursor:pointer;line-height:1}
.logo b{font-family:var(--f-display);font-weight:500;font-size:1.6rem;letter-spacing:.24em}
.logo small{font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.nav{display:flex;gap:24px;margin-right:auto}
.nav a{text-decoration:none;font-size:.9375rem;color:var(--muted);transition:color .15s}
.nav a:hover{color:var(--ink)}
.right{display:flex;align-items:center;gap:6px}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:2px;margin-right:6px}
.lang button{border:0;background:transparent;border-radius:99px;padding:4px 10px;font-size:.75rem;letter-spacing:.12em;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink)}
.ibtn{width:42px;height:42px;display:grid;place-items:center;border-radius:99px;border:0;background:transparent;cursor:pointer;position:relative;transition:background .15s}
.ibtn:hover{background:var(--sunk)}
.ibtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--navy);color:var(--navy-ink);font:500 .6875rem/18px var(--f-body);text-align:center}
.badge.bump{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.35)}}
@media (max-width:980px){.nav{display:none}.site-head .wrap{justify-content:space-between}}
@media (max-width:420px){.ibtn.opt{display:none}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--r);border:1px solid var(--navy);background:transparent;cursor:pointer;font-weight:500;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.btn.primary{background:var(--navy);color:var(--navy-ink)}
.btn.primary:hover{background:color-mix(in oklab,var(--navy) 85%,var(--ink))}
.btn.ghost{color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--navy-ink)}
.btn:active{transform:translateY(1px)}
.link{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--navy);font-weight:500}

/* Héros : une scène large de Dinard par heure du jour (voir showScene dans parfumerie.js) */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#1B2440;color:#fff}
.stage{display:grid;align-items:center;min-height:clamp(600px,86vh,800px)}
.stage-in,.stage-bar .wrap{width:100%}
.slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 55%;opacity:0;transition:opacity 1.2s ease;filter:brightness(var(--photo))}
.slide.on{opacity:1;animation:settle 12s ease-out both}
@keyframes settle{from{transform:scale(1.05)}}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,18,34,.7) 0%,rgba(14,18,34,.44) 36%,rgba(14,18,34,.05) 66%),linear-gradient(0deg,rgba(14,18,34,.6),transparent 30%)}
.stage-in{padding-block:clamp(40px,7vw,88px) clamp(110px,11vw,132px)}
.stage-copy{max-width:36rem}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.6rem);letter-spacing:-.01em;margin-top:20px;color:#fff}
.hero h1 em{font-style:italic;color:#EBD299}
.hero .eyebrow{color:#EBD299}
.hero .lede{margin-top:24px;max-width:42ch;font-size:1.15rem;color:rgba(255,255,255,.9)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fine{margin-top:14px;font-size:.875rem;color:var(--muted)}
.hero .fine{color:rgba(255,255,255,.78)}
.hero .btn.primary{background:#fff;color:var(--navy);border-color:#fff}
.hero .btn.primary:hover{background:#F4EEE1}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.hero .btn.ghost:hover{background:#fff;color:var(--navy)}
.hero .now{background:rgba(14,18,34,.42);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .now img{border-color:rgba(255,255,255,.35)}
.hero .now small{color:#EBD299}
.hero .now b{color:#fff}
.hero .now span{color:rgba(255,255,255,.85)}
.hero .now .link{color:#fff}
.stage-bar{position:absolute;left:0;right:0;bottom:0;padding-block:18px 22px}
.stage-bar .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px 22px}
.cap{text-align:left;margin-right:auto;order:-1}
.cap b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;display:block;line-height:1.1}
.cap span{font-size:.8125rem;opacity:.9}
.cap-btn,.pause{background:#fff;color:#141C33;border:0;padding:10px 16px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);white-space:nowrap}
.pause{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);padding:9px 12px}
.pause:hover{background:rgba(255,255,255,.16)}
.dots{display:flex;align-items:center}
.dot{width:28px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.dot::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;background:transparent;transition:background .3s,transform .3s}
.dot[aria-current="true"]::before{background:#fff;transform:scale(1.25)}
@media (max-width:860px){
  /* mobile : la scène en haut, le texte en dessous sur fond marine (le flacon reste lisible) */
  .stage{display:block;min-height:0}
  .slides{position:relative;inset:auto;z-index:0;height:min(84vw,360px)}
  .slides::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,#1B2440)}
  .slide{object-position:82% 42%}
  .stage::before{display:none}
  .stage-in{padding-block:6px 20px}
  .stage-copy{max-width:none}
  .hero h1{font-size:clamp(2.5rem,12vw,3.4rem);margin-top:12px}
  .hero .lede{margin-top:16px}
  .cta-row{margin-top:24px}
  .stage-bar{position:static;padding-block:0 26px}
  .stage-bar .wrap{justify-content:space-between}
  .cap{text-align:left;order:0}
}

/* Promesses */
.promises .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.promise{padding:26px 22px;display:grid;gap:4px}
.promise+.promise{border-left:1px solid var(--line)}
.promise b{font-family:var(--f-display);font-weight:500;font-size:1.2rem}
.promise span{color:var(--muted);font-size:.875rem}
@media (max-width:900px){.promises .wrap{grid-template-columns:1fr 1fr}.promise:nth-child(3){border-left:0}.promise:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.promises .wrap{grid-template-columns:1fr}.promise{padding-inline:0}.promise+.promise{border-left:0;border-top:1px solid var(--line)}}

/* Collection */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 16px;cursor:pointer;font-size:.9375rem;transition:border-color .15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .n{font-size:.75rem;opacity:.65;margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0;cursor:pointer;min-width:0}
.card .vis{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.card .vis img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--photo));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .vis img{transform:scale(1.04)}
.card .tag{position:absolute;top:12px;left:12px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.92);color:#141C33;padding:4px 9px;border-radius:2px}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.card h3{font-size:1.65rem}
.card .price{font-size:.9375rem;white-space:nowrap}
.card .notes{color:var(--muted);font-size:.9375rem;margin-top:2px}

/* La maison */
.house{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:start}
.house blockquote{margin:0;font-family:var(--f-display);font-style:italic;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.3;text-wrap:pretty}
.house .sig{margin-top:18px;color:var(--muted);font-size:.9375rem}
.years{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.years li{display:grid;grid-template-columns:90px 1fr;gap:20px;padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
.years b{font-family:var(--f-display);font-weight:400;font-size:1.7rem;color:var(--gold)}
@media (max-width:820px){.house{grid-template-columns:1fr}}

/* Quiz */
.quiz{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,72px);align-items:start}
.quiz-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,36px);min-height:340px}
.qstep{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.qbar{flex:1;height:2px;background:var(--sunk);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--gold);transition:width .35s ease}
.quiz-box h3{font-size:1.8rem;margin-bottom:20px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--navy);background:var(--gold-soft)}
.opt b{display:block;font-weight:500}
.opt span{font-size:.875rem;color:var(--muted)}
.reco{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block:8px 20px}
.reco-item{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:var(--r);padding:10px;text-align:left;border:1px solid var(--line);cursor:pointer;min-width:0}
.reco-item img{width:64px;height:64px;object-fit:cover;border-radius:2px;flex:none;filter:brightness(var(--photo))}
.reco-item b{font-family:var(--f-display);font-size:1.25rem;font-weight:400;display:block}
.reco-item span{font-size:.8125rem;color:var(--muted)}
@media (max-width:820px){.quiz{grid-template-columns:1fr}}
@media (max-width:480px){.opts,.reco{grid-template-columns:1fr}}

/* Coffret */
.band{border-bottom:1px solid var(--line)}
.coffret{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-block:clamp(48px,7vw,88px)}
.coffret h2{font-size:clamp(2rem,3.8vw,3rem)}
.coffret p{margin-top:16px;max-width:46ch;color:var(--muted)}
.band .btn{margin-top:26px;background:var(--navy);color:var(--navy-ink)}
.band .btn:hover{background:color-mix(in oklab,var(--navy) 85%,var(--ink))}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);filter:brightness(var(--photo))}
@media (max-width:820px){.coffret{grid-template-columns:1fr}}

/* Consultation */
.rdv{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,72px);align-items:start}
.rdv-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;gap:22px}
.rdv-box h4{margin:0 0 10px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:var(--r);padding:9px 14px;cursor:pointer;font-size:.9375rem;transition:border-color .15s}
.seg button:hover:not([disabled]){border-color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.seg button[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.days button{display:grid;text-align:center;min-width:64px;line-height:1.25}
.days small{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
.days b{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.recap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.recap p{font-size:.9375rem}
.perks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;color:var(--muted)}
.perks li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.perks li::before{content:"";width:10px;height:1px;background:var(--gold);margin-top:.8em}
@media (max-width:820px){.rdv{grid-template-columns:1fr}}

/* Boutiques */
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shop{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.shop .eyebrow{color:var(--muted)}
.shop h3{font-size:1.65rem}
.shop .addr{color:var(--muted);font-size:.9375rem}
.shop .open{font-size:.875rem;font-weight:500}
.svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.svc span{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:3px 8px;border-radius:2px;color:var(--muted)}
.st-ok{color:var(--ok)} .st-warn{color:var(--warn)} .st-err{color:var(--err)}
@media (max-width:820px){.shops{grid-template-columns:1fr}}

/* Pied de page */
footer{border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-block:56px}
.foot h3{font-size:1.4rem;margin-bottom:10px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:var(--muted);font-size:.9375rem}
.nl{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.nl label{flex-basis:100%;font-size:.8125rem;color:var(--muted)}
.nl input{flex:1 1 200px;min-height:48px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:0 14px;font:inherit}
.legal{border-top:1px solid var(--line);padding-block:18px;font-size:.8125rem;color:var(--muted)}
@media (max-width:820px){.foot{grid-template-columns:1fr}}

/* Fiche */
.crumbs{font-size:.875rem;color:var(--muted);padding-block:20px}
.crumbs button{background:none;border:0;padding:0;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:64px}
.pdp-vis{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);aspect-ratio:1/1;max-width:100%;border-radius:var(--r);overflow:hidden;background:#fff}
.pdp-vis img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--photo))}
.engr{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-display);font-style:italic;font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:.2em;color:#5d4a1c;opacity:.85;text-shadow:0 1px 0 rgba(255,255,255,.6);pointer-events:none}
.pdp-vis .cap{position:absolute;left:14px;bottom:12px;font-size:.75rem;color:#3c4150;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:2px}
.buy h1{font-size:clamp(2.7rem,5vw,4.4rem);margin-top:8px}
.rating{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:.9375rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:2px}
.pitch{margin-top:18px;font-size:1.1rem;max-width:48ch}
.feel{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.feel span{background:var(--gold-soft);color:var(--ink);font-size:.8125rem;padding:4px 11px;border-radius:99px}
fieldset{border:0;padding:0;margin:28px 0 0}
legend{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:500}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.size{position:relative}
.size input{position:absolute;opacity:0;inset:0;cursor:pointer}
.size label{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;background:var(--surface);height:100%;transition:border-color .15s}
.size input:checked+label{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.size input:focus-visible+label{outline:2px solid var(--ring);outline-offset:2px}
.size b{font-weight:500;font-size:.9375rem}
.size .p{font-size:.9375rem}
.size .s{font-size:.75rem;color:var(--ok);font-weight:500}
.engrave{margin-top:18px;display:grid;gap:10px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9375rem}
.toggle input{width:18px;height:18px;accent-color:var(--navy)}
.engrave input[type=text]{min-height:44px;max-width:220px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:0 12px;font:italic 1.1rem var(--f-display);letter-spacing:.25em;text-transform:uppercase}
.addrow{display:flex;gap:10px;margin-top:24px}
.addrow .btn{flex:1}
.sample{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:.9375rem;padding:14px 16px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.collect{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px}
.collect label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.collect select{min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:0 10px;font:inherit;max-width:100%}
.stock{display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.reassure{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:6px;font-size:.875rem;color:var(--muted)}
.reassure li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.reassure li::before{content:"";width:10px;height:1px;background:var(--gold);margin-top:.75em}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.pdp-vis{position:relative;top:0}}

.pyr{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start}
.tiers{border-top:1px solid var(--line)}
.tier{display:grid;grid-template-columns:100px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
.tier p{font-family:var(--f-display);font-size:1.55rem;line-height:1.25}
.tier small{display:block;font-family:var(--f-body);font-size:.875rem;color:var(--muted);margin-top:2px}
.skin h3{font-size:1.5rem;margin-bottom:6px}
.skin>p{color:var(--muted);margin-bottom:20px;font-size:.9375rem}
.tl{display:grid;gap:10px}
.tl-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;font-size:.8125rem}
.tl-track{position:relative;height:24px;background:var(--sunk)}
.tl-track i{position:absolute;top:0;bottom:0;background:var(--gold)}
.tl-axis{display:grid;grid-template-columns:64px 1fr;gap:12px}
.tl-axis div{position:relative;height:20px;font-size:.6875rem;color:var(--muted)}
.tl-axis div span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.tl-axis div span:first-child{transform:none}
.tl-axis div span:last-child{transform:translateX(-100%)}
@media (max-width:860px){.pyr{grid-template-columns:1fr}}
.profile{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.gauge h4{margin:0 0 8px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:5px;background:var(--sunk)}
.segs i.on{background:var(--navy)}
.gauge p{font-size:.875rem;margin-top:6px}
@media (max-width:760px){.profile{grid-template-columns:1fr 1fr}}
.reviews{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,5vw,64px)}
.score b{font-family:var(--f-display);font-size:4.2rem;font-weight:400;line-height:1}
.dist{display:grid;gap:6px;margin-top:16px;font-size:.8125rem}
.dist div{display:grid;grid-template-columns:22px 1fr 40px;gap:8px;align-items:center}
.dist .bar{height:5px;background:var(--sunk);overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--gold)}
.rev{border-top:1px solid var(--line);padding-block:18px}
.rev header{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:.875rem;color:var(--muted);margin-bottom:6px}
.rev header b{color:var(--ink);font-weight:500}
.rev .lg{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:1px 6px;border-radius:2px}
@media (max-width:760px){.reviews{grid-template-columns:1fr}}

.mbar{display:none}
@media (max-width:860px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);border-top:1px solid var(--line);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .mbar[hidden]{display:none}
  .mbar .btn{min-height:46px;padding:0 18px}
  .mbar b{font-family:var(--f-display);font-size:1.2rem;font-weight:400;display:block;line-height:1.1}
  .mbar span{font-size:.8125rem;color:var(--muted)}
  body.has-mbar footer{padding-bottom:80px}
}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--r);font-size:.9375rem;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(160%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.toast.show{transform:none}
.toast:not(.show){visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
body.has-mbar .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* Heure de Dinard : voile d'ambiance en multiply, teinté selon la phase du jour */
#ambient{position:fixed;inset:0;z-index:25;pointer-events:none;mix-blend-mode:multiply;background:var(--amb,transparent);transition:background 1.6s ease}
.clock{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.clock label{display:flex;align-items:center;gap:8px}
.clock input{width:130px;accent-color:#fff}
.clock output{font-variant-numeric:tabular-nums;min-width:4.6em}
.now{margin-top:28px;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);background:color-mix(in oklab,var(--surface) 80%,transparent);max-width:480px;border-radius:var(--r)}
.now img{width:56px;height:56px;object-fit:cover;flex:none;border:1px solid var(--line)}
.now div{min-width:0}
.now small{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.now b{font-family:var(--f-display);font-weight:400;font-size:1.25rem}
.now span{font-size:.875rem;color:var(--muted)}
.now button{margin-left:auto;flex:none}
/* Reflet de lumière sur l'affiche */
/* Fiche racontée au défilement */
.tier{border-left:2px solid transparent;transition:padding-left .3s ease,border-color .3s ease}
.tier p{transition:color .3s ease}
.tier.on{border-left-color:var(--gold);padding-left:14px}
.tier:not(.on) p{color:var(--muted)}
.tl{position:relative}
.tl-now{position:absolute;top:-8px;bottom:24px;left:calc(76px + (100% - 76px) * var(--t,0));width:2px;margin-left:-1px;background:var(--ink)}
.tl-now::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.now-read{font-size:.9375rem;margin-bottom:16px;min-height:3.2em}
.now-read b{font-weight:500}
#mist{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.demo a{color:var(--bg);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.noscript{max-width:640px;margin:48px auto;padding-inline:16px;text-align:center}

/* Flacon qu'on fait tourner (fiche Heure Dorée) : vues empilées, une seule visible */
.pdp-vis.spin{cursor:ew-resize;touch-action:pan-y;outline-offset:3px}
.pdp-vis.spin img{position:absolute;inset:0;opacity:0;transition:opacity .12s linear}
.pdp-vis.spin img.on{opacity:1}
.pdp-vis.spin .engr{transition:opacity .15s}
.pdp-vis.turned .engr{opacity:0}
.spin-hint{position:absolute;right:12px;top:12px;font-size:.75rem;color:#3c4150;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:2px;pointer-events:none;transition:opacity .4s}
.pdp-vis.touched .spin-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.pdp-vis.spin img{transition:none}}