/**
 * Parcours olfactif — habillage nunshen.
 * Tokens extraits du kit Elementor (post 5) et des gabarits vivants du site :
 *   police  'CORE SANS' (100/200/400/600/800 — corps 200, UI 400), chargée site-wide par le kit
 *   crème   #F4F0EC (fond de marque) · noir #000 (texte, filets 1px) · blanc (surfaces survol)
 *   gris    #54595F (survol) · #ECEAE8 (contrôles) · #F7F5F1 (champs)
 *   angles  droits (radius 1px max) · ombre 0 4px 20px rgba(0,0,0,.12) · titres MAJUSCULES 400
 * Tout est scopé .nunshen-po ; les sélecteurs interactifs portent une classe po-* pour dominer
 * les styles globaux du thème (.elementor-kit-5 button…) à la spécificité.
 */

/* ---- page (classes posées par parcours.js — fiable sans :has()) ---- */
.po-page-main { max-width: none !important; }
/* Le bandeau défilant du header déborde à droite ; les pages Elementor le rognent, nous aussi. */
html.po-page, body.po-page { overflow-x: hidden; }
.nunshen-po { background: #F4F0EC; color: #000; font-family: 'CORE SANS', Sans-serif; font-weight: 200; font-size: 16px; line-height: 1.55; }
.nunshen-po * { box-sizing: border-box; }
.nunshen-po .po-stage { max-width: 1000px; margin: 0 auto; padding: 48px 24px 110px; min-height: 82vh; }
.nunshen-po .po-lede, .nunshen-po .po-hint { max-width: 62ch; }

/* ---- isolation : neutralise le chrome navigateur/thème sur nos contrôles.
       Le kit Elementor style TOUS les button:hover (fond blanc + bordure 1px → « jitter ») ;
       ces gardes à forte spécificité le neutralisent sur nos boutons sans bordure. Les règles
       composant plus bas reprennent la main (même fichier, plus loin = prioritaire à égalité). ---- */
.nunshen-po.nunshen-po button { -webkit-appearance: none; appearance: none; font-family: inherit; white-space: normal; }
.nunshen-po.nunshen-po button:focus,
.nunshen-po.nunshen-po button:focus-visible,
.nunshen-po.nunshen-po a:focus,
.nunshen-po.nunshen-po input:focus { outline: none; box-shadow: none; }
.nunshen-po.nunshen-po button:focus-visible { outline: 1px solid #000; outline-offset: 2px; }
.nunshen-po.nunshen-po .po-halo:hover, .nunshen-po.nunshen-po .po-halo:focus, .nunshen-po.nunshen-po .po-halo:active,
.nunshen-po.nunshen-po .po-coulisses-toggle:hover, .nunshen-po.nunshen-po .po-coulisses-toggle:focus,
.nunshen-po.nunshen-po .po-seg button:hover, .nunshen-po.nunshen-po .po-seg button:focus {
	background-color: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.nunshen-po.nunshen-po .po-seg button.on:hover, .nunshen-po.nunshen-po .po-seg button.on:focus { background-color: #000; color: #FFF; }
.nunshen-po.nunshen-po .po-btn:hover { border-color: #000; }
.nunshen-po.nunshen-po .po-btn.ghost:hover { border-color: #54595F; }
.nunshen-po.nunshen-po .po-btn:disabled:hover { background: #000; color: #FFF; border-color: #000; }

/* ---- page d'accueil : vidéo de cueillette en fond (boucle muette), texte blanc ombré ----
        Le panneau s'étale sur toute la largeur de la fenêtre ; un dégradé sombre garde le texte lisible. */
.nunshen-po .po-stage.intro .po-progress { display: none; }
.nunshen-po .po-stage.intro { padding-top: 0; }
/* pleine largeur par marge négative (pas de transform : l'animation d'entrée du panneau le remettrait à zéro) */
.nunshen-po .po-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(82vh, 760px); display: flex; align-items: center; color: #FFF; overflow: hidden; isolation: isolate; }
.nunshen-po .po-hero-media { position: absolute; inset: 0; z-index: 0; background: #2E3A1F; }
.nunshen-po .po-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nunshen-po .po-hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,14,8,.56) 0%, rgba(8,14,8,.36) 42%, rgba(8,14,8,.1) 100%), linear-gradient(180deg, rgba(8,14,8,.14), rgba(8,14,8,0) 30%, rgba(8,14,8,0) 70%, rgba(8,14,8,.24)); }
.nunshen-po .po-hero-body { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 72px 24px 64px; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 36px rgba(0,0,0,.3); animation: po-rise .9s ease-out both; }
.nunshen-po .po-hero .po-seal { color: rgba(255,255,255,.78); }
.nunshen-po .po-hero .po-h1 { color: #FFF; }
.nunshen-po .po-hero .po-lede { color: #FFF; max-width: 52ch; }
.nunshen-po .po-hero .po-hint { color: rgba(255,255,255,.78); }
.nunshen-po .po-hero .po-q { color: rgba(255,255,255,.78); }
.nunshen-po .po-hero .po-seg { border-color: rgba(255,255,255,.85); background: transparent; gap: 0; text-shadow: none; }
.nunshen-po .po-hero .po-seg button { background: transparent; color: #FFF; font-weight: 200; }
.nunshen-po .po-hero .po-seg button + button { border-left: 1px solid rgba(255,255,255,.85); }
.nunshen-po .po-hero .po-seg button.on, .nunshen-po.nunshen-po .po-hero .po-seg button.on:hover { background: #FFF; color: #000; font-weight: 400; }
.nunshen-po.nunshen-po .po-hero .po-seg button:hover:not(.on) { background-color: rgba(255,255,255,.14); color: #FFF; }
.nunshen-po .po-hero .po-name { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.85); color: #FFF; text-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nunshen-po .po-hero .po-name::placeholder { color: rgba(255,255,255,.6); opacity: 1; }
.nunshen-po .po-hero .po-btn { background: #FFF; color: #000; border-color: #FFF; text-shadow: none; }
.nunshen-po.nunshen-po .po-hero .po-btn:hover { background: transparent; color: #FFF; border-color: #FFF; }
.nunshen-po .po-hero .po-nav { margin-top: 44px; }
@media (prefers-reduced-motion: reduce) { .nunshen-po .po-hero-video { display: none; } .nunshen-po .po-hero-media { background: url('video/cueillette-poster.jpg') center / cover no-repeat; } }
@media (max-width: 767px) { .nunshen-po .po-hero { min-height: 92svh; } .nunshen-po .po-hero-body { padding: 56px 20px 48px; } .nunshen-po .po-hero-shade { background: linear-gradient(180deg, rgba(8,14,8,.45) 0%, rgba(8,14,8,.36) 60%, rgba(8,14,8,.58) 100%); } }

/* ---- progression : simple filet noir qui s'étire ---- */
.nunshen-po .po-progress { height: 1px; background: rgba(0,0,0,.15); margin-bottom: 56px; }
.nunshen-po .po-progress span { display: block; height: 100%; width: 0; background: #000; transition: width .5s ease-out; }

/* ---- panneaux ---- */
.nunshen-po .po-panel { display: none; animation: po-rise .5s ease-out both; }
.nunshen-po .po-panel.active { display: block; }
@keyframes po-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- typographie ---- */
.nunshen-po .po-seal { font-size: 12px; font-weight: 400; text-transform: uppercase; color: #54595F; margin: 0 0 18px; }
.nunshen-po .po-h1 { font-family: 'CORE SANS', Sans-serif; font-size: clamp(34px, 6vw, 54px); font-weight: 400; text-transform: uppercase; line-height: 1.08; margin: 0 0 22px; color: #000; }
.nunshen-po .po-h2 { font-family: 'CORE SANS', Sans-serif; font-size: clamp(24px, 4vw, 34px); font-weight: 400; text-transform: uppercase; line-height: 1.15; margin: 0 0 10px; color: #000; }
.nunshen-po .po-lede { font-size: 17px; font-weight: 200; max-width: 56ch; margin: 0 0 8px; }
.nunshen-po .po-hint { font-size: 15px; font-weight: 200; color: #54595F; margin: 0 0 14px; }
.nunshen-po .po-eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 400; text-transform: uppercase; color: #000; margin: 0 0 16px; }
.nunshen-po .po-eyebrow span { font-weight: 600; }
.nunshen-po .po-q { font-size: 12px; font-weight: 400; text-transform: uppercase; color: #54595F; margin: 0 0 10px; }

/* ---- boutons (langage natif nunshen : blanc, filet noir 1px, angles droits) ---- */
.nunshen-po .po-btn { display: inline-block; background: #000; color: #FFF; border: 1px solid #000; border-radius: 1px; font-family: 'CORE SANS', Sans-serif; font-size: 15px; font-weight: 400; text-transform: uppercase; line-height: 1; padding: 14px 28px; cursor: pointer; text-decoration: none; text-align: center; transition: all .3s; }
.nunshen-po .po-btn:hover { background: #FFF; color: #000; }
.nunshen-po .po-btn:disabled { opacity: .25; cursor: default; background: #000; color: #FFF; }
.nunshen-po .po-btn.ghost { background: transparent; color: #000; border: 1px solid #000; }
.nunshen-po .po-btn.ghost:hover { background: #FFF; color: #54595F; border-color: #54595F; }
.nunshen-po .po-btn.small { font-size: 13px; padding: 11px 18px; }
.nunshen-po .po-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 16px; }

/* ---- toggles (segment ovale → langage carré nunshen) ---- */
.nunshen-po .po-frames { display: grid; gap: 26px; margin: 34px 0 6px; }
/* séparateur = fond noir du conteneur visible dans le gap 1px (aucune bordure sur les boutons
   → le hover du kit ne peut plus créer de décalage) */
.nunshen-po .po-seg { display: inline-flex; gap: 1px; border: 1px solid #000; border-radius: 1px; background: #000; }
.nunshen-po .po-seg button { background: #FFF; border: none; border-radius: 0; color: #000; font-size: 14px; font-weight: 200; padding: 11px 22px; cursor: pointer; transition: color .3s, background-color .3s; }
.nunshen-po .po-seg button.on { background: #000; color: #FFF; font-weight: 400; }
.nunshen-po.nunshen-po .po-seg button:hover:not(.on) { background-color: #FFF; color: #54595F; }

/* ====================================================================================
   ROUE DES ÉMOTIONS — atmosphères vivantes
   Chaque émotion = une couleur du kit + une matière en mouvement, en trois couches CSS (.po-wbg b.l1/l2/l3,
   surdimensionnées pour tourner sans montrer leurs coins) :
     Fraîcheur : soleil (rayons coniques qui tournent) + vent (stries obliques qui glissent) + halo de lumière
     Réconfort : cocon — tourbillon orange / brun / beige / crème, halo chaud qui respire
     Élégance  : soie — deux reflets qui glissent + nacre rosée / bleutée qui tourne
     Caractère : tourbillon sombre café / marron / prune, volutes de fumée
     Évasion   : houle — bancs de lumière et d'ombre qui ondulent, anneaux sur l'eau, écume
   + des particules propres (pollen, braises, éclats, volutes, bulles) visibles quand c'est choisi.
   La même atmosphère, floutée et adoucie, envahit toute l'étape derrière la roue.
   ==================================================================================== */
.nunshen-po .emo-frais      { --c: #A6B340; --ink: #FFF; }
.nunshen-po .emo-reconfort  { --c: #D2BA92; --ink: #2B2420; }
.nunshen-po .emo-raffine    { --c: #C2C7CA; --ink: #1E2224; }
.nunshen-po .emo-intense    { --c: #7D4E5B; --ink: #FFF; }
.nunshen-po .emo-surprenant { --c: #5F8289; --ink: #FFF; }
.nunshen-po .po-wbg { position: absolute; inset: 0; background: var(--c); overflow: hidden; pointer-events: none; }
.nunshen-po .po-wbg b { position: absolute; inset: -35%; display: block; pointer-events: none; will-change: transform; }
@keyframes po-rot     { to { transform: rotate(360deg); } }
@keyframes po-rot-rev { to { transform: rotate(-360deg); } }
@keyframes po-wind    { from { transform: translate(-22%, 12%); } to { transform: translate(22%, -12%); } }
@keyframes po-glide   { 0% { transform: translateX(-45%); } 60%, 100% { transform: translateX(45%); } }
@keyframes po-glow    { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes po-swell   { 0% { transform: translate(-8%, -4%) skewY(-2deg); } 100% { transform: translate(8%, 4%) skewY(2deg); } }
@keyframes po-smoke   { from { transform: translate(-6%, 4%) scale(1); } to { transform: translate(6%, -6%) scale(1.12); } }
@keyframes po-wave    { 0% { transform: translate(-50%,-50%) scale(.15); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }
/* Fraîcheur */
.nunshen-po .emo-frais .po-wbg { background: linear-gradient(160deg, #C3D068 0%, #A6B340 45%, #86992F 100%); }
.nunshen-po .emo-frais .l1 { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,215,0) 0deg 9deg, rgba(255,255,215,.32) 12deg 15deg, rgba(255,255,215,0) 18deg 24deg); filter: blur(2px); animation: po-rot 48s linear infinite; }
.nunshen-po .emo-frais .l2 { background: repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 11%, rgba(255,255,240,.26) 15%, rgba(255,255,255,0) 21%); filter: blur(7px); animation: po-wind 6.5s linear infinite; }
.nunshen-po .emo-frais .l3 { background: radial-gradient(circle at 28% 22%, rgba(255,252,205,.85), rgba(255,252,205,0) 42%); animation: po-glow 6s ease-in-out infinite; }
/* Réconfort (cocon) */
.nunshen-po .emo-reconfort .po-wbg { background: linear-gradient(170deg, #E8D2AC, #D2BA92 42%, #C28F58 100%); }
.nunshen-po .emo-reconfort .l1 { border-radius: 50%; background: conic-gradient(from 0deg, #D98A3F, #8A5A3A, #D2BA92, #F4F0EC, #E39A55, #7A4A2E, #E8CFA6, #D98A3F); filter: blur(28px); opacity: .9; animation: po-rot 26s linear infinite; }
.nunshen-po .emo-reconfort .l2 { background: radial-gradient(circle at 50% 50%, rgba(255,236,200,.95), rgba(255,236,200,0) 52%); animation: po-glow 5.5s ease-in-out infinite; }
.nunshen-po .emo-reconfort .l3 { background: radial-gradient(circle at 20% 80%, rgba(120,70,40,.5), transparent 45%), radial-gradient(circle at 82% 24%, rgba(244,240,236,.5), transparent 40%); animation: po-smoke 14s ease-in-out infinite alternate; }
/* Élégance (soie) */
.nunshen-po .emo-raffine .po-wbg { background: linear-gradient(160deg, #D6DADD, #C2C7CA 50%, #ABB2B6); }
.nunshen-po .emo-raffine .l1 { background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 60%); animation: po-glide 6.5s ease-in-out infinite; }
.nunshen-po .emo-raffine .l2 { border-radius: 50%; background: conic-gradient(from 90deg, rgba(232,198,208,.55), rgba(196,214,232,.55), rgba(255,255,255,.35), rgba(214,200,226,.5), rgba(232,198,208,.55)); filter: blur(26px); animation: po-rot-rev 34s linear infinite; }
.nunshen-po .emo-raffine .l3 { background: linear-gradient(70deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 56%); animation: po-glide 9.5s ease-in-out infinite reverse; }
/* Caractère (tourbillon sombre) */
.nunshen-po .emo-intense .po-wbg { background: linear-gradient(160deg, #7D4E5B, #5A3340 50%, #46282A); }
.nunshen-po .emo-intense .l1 { border-radius: 50%; background: conic-gradient(from 0deg, #4A2A1C, #8A5868, #33190F, #6B4634, #2A1418, #9A6A48, #5A3040, #4A2A1C); filter: blur(24px); opacity: .85; animation: po-rot 20s linear infinite; }
.nunshen-po .emo-intense .l2 { background: radial-gradient(circle at 30% 40%, rgba(30,8,16,.7), transparent 42%), radial-gradient(circle at 74% 70%, rgba(20,6,12,.7), transparent 40%); filter: blur(8px); animation: po-smoke 12s ease-in-out infinite alternate; }
.nunshen-po .emo-intense .l3 { background: radial-gradient(circle at 62% 22%, rgba(222,172,140,.32), transparent 38%); animation: po-rot-rev 30s linear infinite; }
/* Évasion (houle) */
.nunshen-po .emo-surprenant .po-wbg { background: linear-gradient(180deg, #86A9AE, #5F8289 55%, #3C5C66); }
.nunshen-po .emo-surprenant .l1 { background: radial-gradient(ellipse 55% 26% at 32% 58%, rgba(255,255,255,.26), transparent 70%), radial-gradient(ellipse 50% 22% at 72% 38%, rgba(18,56,72,.45), transparent 70%), radial-gradient(ellipse 60% 24% at 55% 80%, rgba(210,235,238,.22), transparent 70%); filter: blur(4px); animation: po-swell 7s ease-in-out infinite alternate; }
.nunshen-po .emo-surprenant .l2 { background: repeating-linear-gradient(175deg, rgba(255,255,255,0) 0 9%, rgba(255,255,255,.14) 11%, rgba(255,255,255,0) 15%); filter: blur(3px); animation: po-wind 9s linear infinite reverse; }
.nunshen-po .emo-surprenant .l3::before, .nunshen-po .emo-surprenant .l3::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: po-wave 5s linear infinite; }
.nunshen-po .emo-surprenant .l3::after { animation-delay: -2.5s; }
/* particules */
.nunshen-po .po-wparts { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease .15s; }
.nunshen-po .po-wparts i { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #FFF; opacity: 0; animation: po-p-frais 4s ease-in-out infinite; }
.nunshen-po .emo-reconfort .po-wparts i { width: 7px; height: 7px; background: rgba(255,236,200,.95); filter: blur(1px); animation-name: po-p-reconfort; }
.nunshen-po .emo-raffine .po-wparts i { width: 7px; height: 7px; background: #FFF; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation-name: po-p-raffine; }
.nunshen-po .emo-intense .po-wparts i { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(22,6,14,.42); filter: blur(11px); animation-name: po-p-intense; }
.nunshen-po .emo-surprenant .po-wparts i { width: 7px; height: 7px; background: transparent; border: 1px solid rgba(255,255,255,.75); animation-name: po-p-surprenant; }
@keyframes po-p-frais      { 0% { transform: translate(0, 8px) scale(.5); opacity: 0; } 30% { opacity: .95; } 100% { transform: translate(7px, -30px) scale(1); opacity: 0; } }
@keyframes po-p-reconfort  { 0%, 100% { opacity: .1; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.35); } }
@keyframes po-p-raffine    { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1.3) rotate(60deg); opacity: 1; } }
@keyframes po-p-intense    { 0% { transform: translateY(12px) scale(.5); opacity: 0; } 40% { opacity: .6; } 100% { transform: translate(6px, -40px) scale(2.2); opacity: 0; } }
@keyframes po-p-surprenant { 0% { transform: translateY(12px) scale(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-30px) scale(1.15); opacity: 0; } }

/* ---- la roue : secteurs en clip-path interpolables ---- */
.nunshen-po .po-wheel { position: relative; max-width: 540px; margin: 10px auto 0; padding: 36px; }
.nunshen-po .po-wring { position: relative; width: 100%; aspect-ratio: 1; }
.nunshen-po .po-wsec { position: absolute; inset: 0; cursor: pointer; overflow: hidden; transition: clip-path .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease; }
.nunshen-po .po-wsec.dim { opacity: .42; filter: saturate(.55); }
.nunshen-po .po-wsec.on .po-wparts { opacity: 1; }
/* éclat de lumière à l'ouverture */
.nunshen-po .po-wsec::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); opacity: 0; pointer-events: none; }
.nunshen-po .po-wsec.on::after { animation: po-flash 1.3s ease-out forwards; }
@keyframes po-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.nunshen-po .po-wlabel { position: absolute; transform: translate(-50%,-50%); color: var(--ink); font-size: 11.5px; font-weight: 400; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 0 10px rgba(0,0,0,.12); transition: left .8s cubic-bezier(.2,.8,.2,1), top .8s cubic-bezier(.2,.8,.2,1), font-size .5s; }
.nunshen-po .po-wsec.on .po-wlabel { font-size: 14px; font-weight: 600; }
.nunshen-po .po-wheelcenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 31%; text-align: center; pointer-events: none; }
.nunshen-po .po-we { font-size: 12px; text-transform: uppercase; font-weight: 400; color: #54595F; line-height: 1.5; }
.nunshen-po .po-wn { display: block; font-size: 15px; font-weight: 400; text-transform: uppercase; margin-bottom: 4px; animation: po-rise .5s ease-out both; }
.nunshen-po .po-wf { display: block; font-size: 12px; font-weight: 200; color: #54595F; line-height: 1.4; animation: po-rise .6s ease-out .1s both; }

/* ---- l'atmosphère pleine largeur derrière l'étape ---- */
.nunshen-po .po-panel.po-has-atmos { position: relative; z-index: 0; padding: 28px 0 18px; }
.nunshen-po .po-panel.po-has-atmos > :not(.po-atmos) { position: relative; z-index: 1; }
.nunshen-po .po-atmos { position: absolute; top: -60px; bottom: -40px; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: hidden; }
.nunshen-po .po-atmos-layer { position: absolute; inset: 0; display: none; }
/* les couches cachées ne sont pas rendues du tout (display:none) : indispensable sur iPhone, où
   cinq couches pleine page floutées et animées en permanence faisaient planter WebKit */
.nunshen-po .po-atmos-layer.preview, .nunshen-po .po-atmos-layer.on { display: block; animation: po-atmos-in 1.1s ease both; }
.nunshen-po .po-atmos-layer.preview { opacity: .5; }
@keyframes po-atmos-in { from { opacity: 0; } }
.nunshen-po .po-atmos-layer .po-wbg { filter: blur(20px) saturate(.92); transform: scale(1.12); }
.nunshen-po .po-atmos-layer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244,240,236,.7), rgba(244,240,236,.42) 40%, rgba(244,240,236,.42) 70%, rgba(244,240,236,.85)); }
.nunshen-po .po-atmos-layer.on { opacity: 1; }
.nunshen-po .po-atmos-layer.on .po-wparts { opacity: 1; }
.nunshen-po .po-atmos-layer .po-wparts { z-index: 1; }
.nunshen-po .po-atmos-layer .po-wparts i { animation-duration: 9s; }
.nunshen-po .po-atmos-layer.emo-intense .po-wparts i { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(40,16,24,.16); filter: blur(22px); }
@media (max-width: 700px) { .nunshen-po .po-wheel { padding: 18px; } }
/* mobile : flous réduits et une couche de matière en moins par secteur (GPU limité, DPR 3) */
@media (max-width: 768px) {
	.nunshen-po .po-atmos-layer .po-wbg { filter: blur(12px) saturate(.92); }
	.nunshen-po .emo-reconfort .l1, .nunshen-po .emo-raffine .l2, .nunshen-po .emo-intense .l1 { filter: blur(12px); }
	.nunshen-po .po-wsec .l3 { display: none; }
	.nunshen-po .po-atmos-layer .l3 { display: none; }
	.nunshen-po .emo-intense .po-wparts i { filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.nunshen-po .po-wbg b, .nunshen-po .po-wbg b::before, .nunshen-po .po-wbg b::after, .nunshen-po .po-wparts i, .nunshen-po .po-wsec.on::after { animation: none !important; }
}

/* ---- 14 familles : pastilles photo (cercles du livret) ---- */
.nunshen-po .po-familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 26px 18px; margin-top: 30px; max-width: 100%; }
/* align-self: start → la cellule ne s'étire pas, donc le bouton ne centre pas son contenu verticalement
   (sinon les pastilles dont la légende tient sur 3 lignes remontent par rapport aux autres) */
.nunshen-po .po-halo { background: none; border: none; padding: 0; cursor: pointer; text-align: center; color: #000; align-self: start; }
.nunshen-po .po-well { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.15); transition: transform .3s ease-out, box-shadow .3s ease-out, border-color .3s; }
.nunshen-po .po-halo:hover .po-well { transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.nunshen-po .po-halo.sel .po-well { border: 1px solid #000; box-shadow: 0 0 0 4px #F4F0EC, 0 0 0 5px #000; }
.nunshen-po .po-check { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.5); width: 32px; height: 32px; border-radius: 50%; background: #000; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: 0; transition: all .25s ease-out; }
.nunshen-po .po-halo.sel .po-check { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.nunshen-po .po-halo-label { display: block; font-size: 14px; font-weight: 400; text-transform: uppercase; margin-top: 12px; }
.nunshen-po .po-halo-notes { display: block; font-size: 12px; font-weight: 200; color: #54595F; margin-top: 3px; line-height: 1.35; }

/* ---- cartes option (bouche, occasion, plats) ---- */
.nunshen-po .po-cards { display: grid; gap: 14px; margin-top: 26px; }
.nunshen-po .po-cards.two { grid-template-columns: repeat(2, 1fr); }
.nunshen-po .po-opt { position: relative; text-align: left; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.18); border-radius: 1px; padding: 20px 22px; cursor: pointer; color: #000; transition: all .3s ease-out; }
.nunshen-po .po-opt:hover { background: #FFF; border-color: #000; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.nunshen-po .po-opt.sel { background: #FFF; border-color: #000; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.nunshen-po .po-opt-t { display: block; font-size: 17px; font-weight: 400; text-transform: uppercase; line-height: 1.2; padding-right: 30px; }
.nunshen-po .po-opt-d { display: block; font-size: 14px; font-weight: 200; color: #54595F; margin-top: 5px; }
.nunshen-po .po-mark { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; border: 1px solid rgba(0,0,0,.3); border-radius: 50%; transition: all .25s; }
.nunshen-po .po-opt.sel .po-mark { background: #000; border-color: #000; }
/* ---- matières « en bouche » : boucles vidéo (image FLUX animée par Seedance, boucle invisible) ---- */
.nunshen-po .po-optvid { display: block; width: 100%; height: 150px; object-fit: cover; margin-bottom: 16px; border-radius: 1px; pointer-events: none; background: #ECEAE8; }
.nunshen-po .po-optvid ~ .po-mark { background: rgba(255,255,255,.85); }
.nunshen-po .po-opt.sel .po-optvid ~ .po-mark { background: #000; }

/* ---- intensité : la tasse vue de dessus ----
        Photo réelle (tasse.jpg) recolorée par un disque en fusion « multiply » (la liqueur), « n » nunshen
        en blanc translucide au centre, vapeur et ondulation en CSS. Les couleurs sont
        des propriétés enregistrées (@property) pour pouvoir s'animer en douceur entre deux crans. ---- */
@property --lq { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --lq-core { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --lq-edge { syntax: '<color>'; inherits: true; initial-value: #fff; }
.nunshen-po .po-intensity { max-width: 460px; margin: 34px auto 0; text-align: center; }
.nunshen-po .po-cup {
	--lq: #fff; --lq-core: #fff; --lq-edge: #fff; --steam: .3; --steam-speed: 5s;
	position: relative; width: min(340px, 68vw); aspect-ratio: 1; margin: 0 auto 34px; border-radius: 50%;
	overflow: hidden; isolation: isolate; user-select: none;
	box-shadow: 0 30px 60px -18px rgba(0,0,0,.28), 0 8px 22px -6px rgba(0,0,0,.10);
	transition: --lq .55s ease, --lq-core .55s ease, --lq-edge .55s ease;
}
.nunshen-po .po-cup-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; pointer-events: none; }
/* le « n » nunshen, blanc translucide, centré sur le disque de liqueur */
.nunshen-po .po-cup-mark { position: absolute; left: 52.06%; top: 50%; width: 18%; height: auto; transform: translate(-50%, -50%); opacity: .3; pointer-events: none; }
/* le disque de liqueur : géométrie mesurée sur la photo (centre 52.06 % / 50 %, rayon 39.86 %) */
.nunshen-po .po-cup-liquor {
	position: absolute; left: 12.2%; top: 10.14%; width: 79.72%; height: 79.72%; border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--lq-core) 0%, var(--lq) 58%, var(--lq-edge) 100%);
	mix-blend-mode: multiply; filter: blur(1.5px);
}
/* vapeur : trois volutes floues qui montent depuis la liqueur, plus présentes quand le thé est corsé */
.nunshen-po .po-cup-steam { position: absolute; left: 12.2%; top: 10.14%; width: 79.72%; height: 79.72%; border-radius: 50%; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.nunshen-po .po-cup-steam i {
	position: absolute; bottom: 8%; width: 34%; height: 48%; border-radius: 50%;
	background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
	filter: blur(9px); opacity: 0; animation: po-steam var(--steam-speed) ease-in-out infinite;
}
.nunshen-po .po-cup-steam i:nth-child(1) { left: 14%; animation-delay: 0s; }
.nunshen-po .po-cup-steam i:nth-child(2) { left: 36%; animation-delay: -1.8s; width: 40%; }
.nunshen-po .po-cup-steam i:nth-child(3) { left: 56%; animation-delay: -3.4s; }
@keyframes po-steam {
	0%   { transform: translateY(10%) scaleX(.9); opacity: 0; }
	25%  { opacity: var(--steam); }
	70%  { opacity: calc(var(--steam) * .55); }
	100% { transform: translateY(-70%) scaleX(1.25) translateX(8%); opacity: 0; }
}
/* ondulation : un anneau qui s'élargit à chaque cran du curseur */
.nunshen-po .po-cup-ripple { position: absolute; left: 12.2%; top: 10.14%; width: 79.72%; height: 79.72%; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); opacity: 0; transform: scale(.35); pointer-events: none; }
.nunshen-po .po-cup-ripple.go { animation: po-ripple .9s cubic-bezier(.2,.7,.3,1) both; }
@keyframes po-ripple { 0% { transform: scale(.35); opacity: .7; } 100% { transform: scale(1.02); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.nunshen-po .po-cup-steam i { animation: none; opacity: calc(var(--steam) * .6); transform: translateY(-25%); }
	.nunshen-po .po-cup-ripple.go { animation: none; }
}
/* curseur : la piste reprend le nuancier des liqueurs, le pouce est blanc cerclé de noir */
.nunshen-po .po-intensity input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; border: 1px solid rgba(0,0,0,.18); cursor: pointer;
	background: linear-gradient(90deg, #EBE3C4 0%, #E6D68F 18%, #DDB84A 35%, #D08E3A 50%, #B86A33 65%, #93512A 80%, #5C2F1C 100%); }
.nunshen-po .po-intensity input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #FFF; border: 1px solid #000; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; transition: transform .2s; }
.nunshen-po .po-intensity input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFF; border: 1px solid #000; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
.nunshen-po .po-intensity input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.nunshen-po .po-range-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 400; text-transform: uppercase; color: #54595F; margin-top: 12px; }
.nunshen-po .po-int-read { font-size: 16px; font-weight: 400; margin-top: 18px; }

/* ---- couleurs de thé ---- */
.nunshen-po .po-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 26px; }
.nunshen-po .po-color { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.18); border-radius: 1px; padding: 14px 16px; cursor: pointer; color: #000; transition: all .3s ease-out; }
.nunshen-po .po-color:hover, .nunshen-po .po-color.sel { background: #FFF; border-color: #000; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.nunshen-po .po-sw { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.nunshen-po .po-color-t { font-size: 14px; font-weight: 400; text-transform: uppercase; }
.nunshen-po .po-color-d { font-size: 12.5px; font-weight: 200; color: #54595F; }

/* ---- résultats : fiches produit (miroir des cartes boutique) ---- */
.nunshen-po .po-stage.results .po-progress { display: none; }  /* pas de filet noir sur la page résultat */
.nunshen-po .po-cursive-top { text-align: center; margin: 0 0 2px; }
/* titre résultat : reflet doré qui traverse les lettres (dégradé découpé dans le texte) */
.nunshen-po .po-results-title { text-align: center; margin: 0 0 34px; font-size: clamp(26px, 4.5vw, 40px);
	background-image: linear-gradient(108deg, #A87E28 42%, #D8B45C 48%, #F6E7B6 51%, #D8B45C 54%, #A87E28 60%);
	background-size: 260% 100%; background-position: 115% 0;
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	animation: po-title-glare 7s linear infinite; }
@keyframes po-title-glare { from { background-position: 115% 0; } to { background-position: -15% 0; } }
@media (prefers-reduced-motion: reduce) { .nunshen-po .po-results-title { animation: none; background: none; color: #A87E28; -webkit-text-fill-color: #A87E28; } }
.nunshen-po .po-results-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 8px 34px; margin-bottom: 30px; }
.nunshen-po .po-results-head { text-align: left; }
.nunshen-po .po-results-head .po-h2 { margin-bottom: 14px; }
.nunshen-po .po-results-head .po-lede { margin: 0; }
.nunshen-po .po-sel-title { font-family: 'CORE SANS', Sans-serif; font-size: clamp(19px, 3vw, 24px); font-weight: 400; text-transform: uppercase; margin: 0 0 18px; padding-top: 14px; border-top: 1px solid #000; }
.nunshen-po #po-recos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.nunshen-po .po-reco { position: relative; display: flex; flex-direction: column; background: #FFF; border: 1px solid rgba(0,0,0,.12); border-radius: 1px; overflow: hidden; transition: box-shadow .35s ease-out; }
.nunshen-po .po-reco:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.nunshen-po .po-reco-media { display: block; aspect-ratio: 1; background: #F7F5F1; }
.nunshen-po .po-reco-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nunshen-po .po-reco-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 7px; }
.nunshen-po .po-reco-role { font-size: 11.5px; font-weight: 400; text-transform: uppercase; color: #54595F; margin: 0; }
.nunshen-po .po-reco-name { font-family: 'CORE SANS', Sans-serif; font-size: 19px; font-weight: 400; text-transform: uppercase; line-height: 1.25; margin: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 9px 0; }
.nunshen-po .po-reco-code { font-weight: 600; margin-right: 10px; }
.nunshen-po .po-reco-aromas { font-size: 13.5px; font-weight: 200; color: #54595F; margin: 2px 0 0; }
.nunshen-po .po-reco-words { font-size: 14.5px; font-weight: 200; margin: 0; }
.nunshen-po .po-reco-price { font-size: 15px; font-weight: 400; margin: 2px 0 0; }
.nunshen-po .po-aff-row { display: grid; grid-template-columns: 76px 1fr 40px; align-items: center; gap: 10px; margin: 2px 0 4px; }
.nunshen-po .po-aff-label { font-size: 10.5px; font-weight: 400; text-transform: uppercase; color: #54595F; }
.nunshen-po .po-affbar { display: block; height: 13px; border: 1px solid #000; background: #FAFAFA; }
.nunshen-po .po-aff-fill { display: block; height: 100%; background: #7D4E5B; }
.nunshen-po .po-aff-val { font-size: 12px; font-weight: 400; text-align: right; }
.nunshen-po .po-reco-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.nunshen-po .po-reco-actions > :only-child { grid-column: 1 / -1; }
/* badge de la carte signature */
/* ruban : la bande déborde du bord gauche de la carte, pointe fléchée à droite,
   et un petit pli sombre (::before de la carte) suggère le tissu replié derrière le coin */
.nunshen-po .po-reco.signature { overflow: visible; }
.nunshen-po .po-reco.signature::before { content: ''; position: absolute; top: 10px; left: -9px; z-index: 1; width: 0; height: 0; border-bottom: 8px solid #8A6A24; border-left: 9px solid transparent; }
.nunshen-po .po-badge { position: absolute; top: 18px; left: -9px; z-index: 2; background: linear-gradient(105deg, #E9C878 0%, #D2A644 42%, #BC8D31 72%, #DCB35A 100%); color: #FFF; text-shadow: 0 1px 2px rgba(96,64,12,.4); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 9px 30px 9px 18px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
/* reflet de lumière qui balaie le ruban (contenu dans la forme grâce au clip-path) */
.nunshen-po .po-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-130%); animation: po-glare 5s ease-in-out infinite; pointer-events: none; }
@keyframes po-glare { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .nunshen-po .po-badge::after { animation: none; transform: none; opacity: .25; } }
/* signature nunshen : même carte, simplement soulignée d'un filet noir */
.nunshen-po .po-reco.signature { border: 1px solid #000; }
.nunshen-po .po-reco.signature .po-reco-role { color: #000; }

/* ---- signature olfactive : nuancier du profil (écho de la roue des couleurs du livret) ---- */
.nunshen-po .po-signature { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
/* carte blanche fine autour du nuancier (bordure discrète, peu de marge intérieure) */
.nunshen-po .po-sig-card { position: relative; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.05); border-radius: 1px; box-shadow: 0 4px 20px rgba(0,0,0,.1); padding: 6px; }
.nunshen-po .po-sig-wrap { position: relative; }
.nunshen-po .po-share-row { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; }
.nunshen-po .po-share { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #000; border-radius: 1px; color: #000; font-size: 11.5px; font-weight: 400; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: all .3s; }
.nunshen-po .po-share svg { width: 13px; height: 13px; display: block; }
.nunshen-po.nunshen-po .po-share:hover { background: #000; color: #FFF; border-color: #000; }
.nunshen-po .po-sig-svg { width: 100%; display: block; }
.nunshen-po .po-sig-petal { transform: scale(.12); transform-origin: 50% 50%; opacity: 0; transition: transform 1.1s cubic-bezier(.16,.8,.26,1), opacity .8s ease-out; }
.nunshen-po .po-signature.bloom .po-sig-petal { transform: scale(1); opacity: 1; }
.nunshen-po .po-sig-label { font-family: 'CORE SANS', Sans-serif; font-size: 10.5px; font-weight: 400; fill: #000; opacity: 0; transition: opacity .6s ease-out .9s; }
.nunshen-po .po-sig-label.in { fill: #FFF; }
.nunshen-po .po-signature.bloom .po-sig-label { opacity: 1; }
/* prénom en cursive (page résultat) */
.nunshen-po .po-cursive { font-family: 'Parisienne', cursive; font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 0 0 4px; color: #000; }
/* champ prénom (intro) */
.nunshen-po .po-name { background: #FFF; border: 1px solid #000; border-radius: 1px; padding: 12px 16px; font-family: 'CORE SANS', Sans-serif; font-weight: 200; font-size: 15px; color: #000; width: 280px; max-width: 100%; }
.nunshen-po .po-name::placeholder { color: #54595F; opacity: .7; }

/* ---- fiche de dégustation (radar Carine + préparation) sur les cartes.
        Barres au langage des fiches produit du site : contour 1px, fond clair, remplissage
        prune (#7D4E5B = couleur « Thé noir » du kit), valeur /15 à droite. ---- */
.nunshen-po .po-fiche { border-top: 1px solid rgba(0,0,0,.12); padding-top: 10px; margin-top: 4px; display: grid; gap: 6px; }
.nunshen-po .po-fiche-row { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 10px; }
.nunshen-po .po-fiche-l { font-size: 10.5px; font-weight: 400; text-transform: uppercase; color: #54595F; }
.nunshen-po .po-fiche-bar { display: block; height: 10px; border: 1px solid #000; background: #FAFAFA; }
.nunshen-po .po-fiche-bar span { display: block; height: 100%; background: #7D4E5B; }
.nunshen-po .po-fiche-v { font-size: 11px; font-weight: 200; text-align: right; color: #000; }
.nunshen-po .po-fiche-brew { font-size: 12px; font-weight: 200; color: #54595F; margin: 3px 0 0; }

/* ---- choix du conditionnement : pictogrammes (attribut image du site) ---- */
.nunshen-po .po-vars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nunshen-po .po-var { display: flex; align-items: center; justify-content: center; background: #FFF; border: 1px solid rgba(0,0,0,.18); border-radius: 1px; padding: 8px; cursor: pointer; color: #000; font-size: 10px; font-weight: 200; line-height: 1.2; width: 74px; aspect-ratio: 1; transition: border-color .3s, box-shadow .3s; }
.nunshen-po .po-var img { width: 100%; height: 100%; object-fit: contain; }
.nunshen-po.nunshen-po .po-var:hover { background: #FFF; border: 1px solid #000; border-radius: 1px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.nunshen-po .po-var.sel { border-color: #000; box-shadow: 0 2px 10px rgba(0,0,0,.1); font-weight: 400; }

.nunshen-po .po-restart { text-align: center; margin-top: 44px; }

/* ---- coulisses (validation Hugo & Carine) ---- */
.nunshen-po .po-coulisses { margin-top: 56px; }
.nunshen-po .po-ranklist { text-align: left; margin: 6px 0 0; background: #FFF; border: 1px solid rgba(0,0,0,.15); padding: 18px 22px; font-size: 13px; }
.nunshen-po .po-ranklist h4 { font-size: 12px; font-weight: 400; text-transform: uppercase; margin: 0 0 10px; }
.nunshen-po .po-rrow { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.nunshen-po .po-rk { font-weight: 600; }
.nunshen-po .po-rsel { color: #54595F; font-weight: 200; }
.nunshen-po .po-raf { font-weight: 400; }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.nunshen-po .po-results-hero { grid-template-columns: 1fr; }
	.nunshen-po .po-results-head { text-align: center; }
}
@media (max-width: 767px) {
	.nunshen-po .po-stage { padding: 30px 18px 80px; }
	.nunshen-po .po-cards.two { grid-template-columns: 1fr; }
	.nunshen-po #po-recos { grid-template-columns: 1fr; }
	.nunshen-po .po-familles { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
	.nunshen-po .po-halo-notes { display: none; }
	.nunshen-po .po-nav { margin-top: 30px; }
}