/* ==========================================================================
   Accueil « studio » — règles propres à la page (préfixe hs-). Le socle vit dans /css/studio.css (tokens --st-*),
   l'habillage commun (en-tête, boutons, cartes produit, opération, packs, merci, solidaire) dans /css/main.css.
   Signature : le hero DEVIENT le film · galerie pilotée par le scroll · étapes épinglées · carte en poster.
   Seuls transform / opacity / clip-path sont animés.
   ========================================================================== */

/* ---------- Hero : plein écran sous l'en-tête, sombre, le film en fond ---------- */
.hs-hero { position: relative; min-height: calc(100svh - var(--header-h) - 38px); background: var(--st-night); color: #fff; overflow: hidden; isolation: isolate;
  display: grid; align-items: end; padding: clamp(40px, 6vw, 72px) var(--st-gutter) 64px; }
.hs-hero-film, .hs-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hs-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.04); }
.hs-hero-bg[hidden], .hs-hero-launch[hidden], .hs-hero-polas[hidden] { display: none; }
.hs-hero .lfn-film, .hs-hero .lfn-film.is-fullbleed { position: absolute; inset: 0; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: 0; }
.hs-hero .lfn-film-opening { display: none; }                               /* l'ouverture est portée par le hero lui-même */
.hs-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,18,38,.45) 0%, rgba(26,18,38,0) 32%, rgba(26,18,38,.2) 55%, rgba(26,18,38,.9) 100%);
  transition: opacity var(--st-d-mid) var(--st-ease-out); }
.hs-hero.is-film .hs-hero-shade { opacity: 0; }
.hs-hero.is-film { min-height: 100svh; }                                    /* pendant le film : plein écran, l'en-tête replié passe au-dessus */
/* continuité : l'ambiance ne disparaît pas d'un coup, elle se fond sous le premier plan du film */
.hs-hero .lfn-film.is-film .lfn-film-amb { display: block; opacity: 0; visibility: hidden; transition: opacity .8s .35s, visibility 0s 1.2s; }
.hs-hero-inner { position: relative; z-index: 5; width: min(100%, 1180px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; will-change: transform, opacity; }
.hs-hero.is-playing .hs-hero-inner { pointer-events: none; }
html.lfn-rm .hs-hero.is-playing .hs-hero-inner { opacity: 0; visibility: hidden; }
html.lfn-js:not(.lfn-rm) .hs-anim { opacity: 0; }
html.lfn-js .hs-anim.is-in { opacity: 1; }
/* le titre reste invisible tant qu'il n'est pas découpé en lignes masquées (aucune double apparition) */
html.lfn-js:not(.lfn-rm) .hs-hero-title:not(.is-split) { visibility: hidden; }
.hs-hero-copy { display: grid; gap: 18px; justify-items: start; max-width: 880px; }
.hs-hero-copy .st-tag { font-size: var(--st-fs-0); }
.hs-hero-title { font-family: var(--st-font-title); font-weight: 800; color: #fff; margin: 0; font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6rem); line-height: .98; letter-spacing: -.032em; text-shadow: 0 10px 40px rgba(0,0,0,.35); text-wrap: initial; }
.hs-hero-title .st-hand { color: #f6d3cb; font-size: 1.18em; line-height: .9; display: inline-block; }
.hs-hero-title .sl-line { padding-bottom: .1em; margin-bottom: -.1em; }
.hs-hero-title .sl-line.is-hand { padding-bottom: .28em; margin-bottom: -.28em; padding-right: .15em; }
.hs-hero-lead { font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem); line-height: 1.5; max-width: 33.3em; color: rgba(255,255,255,.86); text-wrap: pretty; margin: 0; }
.hs-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hs-hero-note { font-size: var(--st-fs-1); font-weight: 600; color: rgba(255,255,255,.72); margin: 0; }
.hs-hero-note::before { content: "✦ "; color: var(--st-coral); }

/* lanceur du film : anneau qui respire, disque corail, texte */
.hs-hero-launch { display: grid; gap: 12px; justify-items: end; }
.hs-play { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 10px 24px 10px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--st-r-pill); background: rgba(255,255,255,.1); color: #fff; text-align: left; font: inherit; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color var(--st-d-short) var(--st-ease-out), border-color var(--st-d-short) var(--st-ease-out), transform var(--st-d-short) var(--st-ease-out); will-change: transform; }
.hs-play:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.hs-play:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--st-night), 0 0 0 6px #fff; }
.hs-play-disc { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--st-coral-cta); color: #fff; display: grid; place-items: center; font-size: 20px; padding-left: 4px; flex: none; box-shadow: 0 14px 30px -10px rgba(201,75,58,.8); transition: transform var(--st-d-short) var(--st-ease-out); }
.hs-play:hover .hs-play-disc { transform: scale(1.06); }
.hs-play-ring { position: absolute; left: 10px; top: 10px; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(232,112,95,.8); animation: hs-pulse 2.6s var(--st-ease-out) infinite; pointer-events: none; }
@keyframes hs-pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.hs-play-txt { display: grid; gap: 2px; }
.hs-play-txt b { font-family: var(--st-font-title); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.hs-play-txt small { font-size: var(--st-fs-0); color: rgba(255,255,255,.72); font-weight: 500; max-width: 30ch; }
.hs-voices { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--st-r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.hs-voices .lbl { padding: 0 8px 0 12px; font-size: var(--st-fs-0); font-weight: 600; opacity: .8; }
.hs-voice { min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--st-r-pill); background: none; color: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: .88rem; cursor: pointer; transition: background-color var(--st-d-micro), color var(--st-d-micro); }
.hs-voice:hover { background: rgba(255,255,255,.14); }
.hs-voice[aria-pressed="true"] { background: #fff; color: var(--st-violet-deep); }
.hs-voice:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
/* hero sans film (film_enabled = '0') : les trois photos des réglages en polaroïds */
.hs-hero-polas { position: relative; display: grid; grid-template-columns: repeat(2, 150px); gap: 18px 14px; justify-items: center; padding: 10px 10px 0 0; }
.hs-hero-polas .st-pola { width: 150px; transform: rotate(var(--rot)); }
.hs-hero-polas .st-pola:nth-child(3) { grid-column: 1 / -1; margin-top: -14px; }
.hs-hero-polas .st-pola figcaption { display: none; }
.hs-hero-polas .st-pola { padding-bottom: 14px; }
.hs-hero-hint { position: absolute; left: 50%; bottom: 18px; z-index: 5; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: rgba(255,255,255,.7); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hs-hero-hint i { display: block; width: 1px; height: 34px; background: rgba(255,255,255,.4); overflow: hidden; position: relative; }
.hs-hero-hint i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; transform: translateY(-100%); animation: hs-hint 2s var(--st-ease-in-out) infinite; }
@keyframes hs-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.hs-hero.is-playing .hs-hero-hint { opacity: 0; visibility: hidden; transition: opacity var(--st-d-short) var(--st-ease-in), visibility 0s var(--st-d-short); }
@media (max-width: 1000px) {
  .hs-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hs-hero-launch { justify-items: start; }
  .hs-hero-polas { grid-template-columns: repeat(3, 120px); justify-content: start; padding: 0; }
  .hs-hero-polas .st-pola { width: 120px; }
  .hs-hero-polas .st-pola:nth-child(3) { grid-column: auto; margin-top: 0; }
}
@media (max-width: 760px) {
  .hs-hero { min-height: calc(100svh - 60px - 38px); padding: 28px 16px 56px; }
  .hs-hero-copy { gap: 14px; }
  .hs-hero-title { font-size: clamp(2.4rem, 10.5vw, 3.6rem); }
  .hs-hero-cta .st-btn-big { min-height: 50px; padding: .85em 1.3em; font-size: .98rem; }
  .hs-play { padding: 8px 18px 8px 8px; gap: 12px; }
  .hs-play-disc, .hs-play-ring { width: 48px; height: 48px; } .hs-play-ring { left: 8px; top: 8px; }
  .hs-play-txt b { font-size: .98rem; }
  .hs-hero-hint { display: none; }
  .hs-hero-polas { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hs-hero-polas .st-pola { width: 100%; }
  .hs-hero .lfn-film-caption { margin-bottom: 64px; }
}

/* ---------- Bandeau défilant ---------- */
.hs-bandeau { background: var(--st-violet-deep); color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.hs-bandeau .st-marquee-track { gap: 0; padding-inline: 0; }
.mq-item { display: inline-flex; align-items: center; gap: 14px; padding-right: 48px; font-family: var(--st-font-title); font-weight: 700; font-size: .95rem; letter-spacing: .02em; white-space: nowrap; }
.mq-item::before { content: "✦"; color: var(--st-coral); font-size: .8em; }

/* ---------- Opération du moment, packs (habillage de main.css ; seuls les espacements changent) ---------- */
.hs-op { padding-top: clamp(32px, 5vw, 56px); }
.hs-packs { padding-bottom: 0; }
.hs-pack-cards { display: grid; gap: 24px; }

/* ---------- Têtes de section ---------- */
.hs-head-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.hs-head-row > div { display: grid; gap: var(--st-s-3); }
.hs-head-row .st-lead { margin: 0 0 6px; }
.hs-head-row-end { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 900px) { .hs-head-row { grid-template-columns: 1fr; } .hs-head-row-end { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Univers ---------- */
.hs-univers { padding-bottom: var(--st-section); }
.hs-uni-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.hs-uni-grid .skeleton { aspect-ratio: 4 / 4.6; }
.hs-uni { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-l); text-decoration: none; color: var(--st-ink); box-shadow: var(--st-sh-1); }
.hs-uni::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: var(--st-r-l); box-shadow: var(--st-sh-2); opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); pointer-events: none; }
.hs-uni:hover::after, .hs-uni:focus-visible::after { opacity: 1; }
.hs-uni:focus-visible { outline: none; box-shadow: var(--st-sh-focus); }
.hs-uni-media { display: block; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--st-cream-2); border-radius: calc(var(--st-r-l) - 1px) calc(var(--st-r-l) - 1px) 0 0; }
.hs-uni-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--st-d-choreo) var(--st-ease-out); will-change: transform; }
.hs-uni:hover .hs-uni-media img { transform: scale(1.05); }
.hs-uni-body { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "name arrow" "tag arrow"; gap: 2px 12px; padding: 18px 20px 20px; align-items: center; }
.hs-uni-n { grid-area: n; font-family: var(--st-font-title); font-weight: 700; font-size: var(--st-fs-0); letter-spacing: .14em; color: var(--st-coral-text); margin-bottom: 4px; }
.hs-uni-name { grid-area: name; font-family: var(--st-font-title); font-weight: 800; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.02em; line-height: 1.1; }
.hs-uni-tag { grid-area: tag; font-size: var(--st-fs-1); color: var(--st-ink-soft); line-height: 1.4; text-wrap: pretty; }
.hs-uni-arrow { grid-area: arrow; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--st-lavender); color: var(--st-violet-deep); font-weight: 700; transition: background-color var(--st-d-short), color var(--st-d-short), transform var(--st-d-short) var(--st-ease-out); }
.hs-uni:hover .hs-uni-arrow { background: var(--st-coral-cta); color: #fff; transform: translateX(3px); }
@media (max-width: 760px) {
  .hs-uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hs-uni-body { grid-template-columns: 1fr; grid-template-areas: "n" "name" "tag"; padding: 12px 14px 14px; }
  .hs-uni-arrow { display: none; }
  .hs-uni-media { aspect-ratio: 1; }
  .hs-uni-tag { font-size: var(--st-fs-0); }
}

/* ---------- Étapes épinglées ---------- */
.hs-steps { position: relative; padding-block: var(--st-section); }
.hs-steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hs-steps-text { display: grid; gap: 16px; align-content: center; }
.hs-steps-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.hs-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(91,63,122,.14); transition: opacity var(--st-d-mid) var(--st-ease-out); }
.hs-step-n { font-family: var(--st-font-title); font-weight: 800; font-size: 1.1rem; color: var(--st-coral-text); padding-top: 3px; }
.hs-step-body { display: grid; gap: 4px; }
.hs-step-body .st-h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin: 0; transition: color var(--st-d-short); }
.hs-step-body p { margin: 0; color: var(--st-ink-soft); line-height: 1.5; text-wrap: pretty; }
.hs-step-thumb { display: none; }
.hs-steps-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.hs-steps-cta a:not(.btn) { text-decoration: underline; }
.hs-steps-frame { position: relative; aspect-ratio: 4 / 5; width: 100%; max-height: 78vh; justify-self: end; border-radius: 28px; overflow: hidden; background: var(--st-cream-2); box-shadow: 0 50px 90px -40px rgba(65,41,92,.5); }
.hs-steps-frame .layer { position: absolute; inset: 0; display: grid; place-items: center; }
.hs-steps-frame .layer > img { width: 100%; height: 100%; object-fit: cover; }
.hs-steps-frame .layer-mock { background: var(--st-lavender) radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.7), transparent 60%); }
.hs-steps-frame .layer-mock::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(91,63,122,.16) 1px, transparent 1.5px); background-size: 22px 22px; }
.hs-steps-frame .layer-mock .hs-mock { position: relative; }
.hs-steps-frame .layer-tag { position: absolute; left: 22px; bottom: 26px; font-size: .9rem; }
.hs-steps-lbl { position: absolute; left: 20px; top: 18px; z-index: 5; padding: 8px 14px; border-radius: var(--st-r-pill); background: rgba(26,18,38,.6); color: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hs-steps-bar { position: absolute; right: 20px; top: 24px; z-index: 5; width: 120px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.hs-steps-bar i { display: block; width: 100%; height: 100%; background: var(--st-coral); transform-origin: left; transform: scaleX(.25); }
.hs-steps.is-pinned .hs-step { opacity: .38; }
.hs-steps.is-pinned .hs-step.is-on { opacity: 1; }
.hs-steps.is-pinned .hs-step.is-on .st-h3 { color: var(--st-violet-deep); }
.hs-steps:not(.is-pinned) .layer:not(.is-on) { visibility: hidden; }
.hs-steps.is-pinned .layer { visibility: hidden; opacity: 0; }
.hs-steps.is-pinned .layer.is-on { visibility: visible; opacity: 1; }
@media (min-width: 1000px) {
  .hs-steps { min-height: 100svh; display: grid; align-items: center; padding-block: 40px; }
  .hs-steps.is-pinned .layer { visibility: visible; opacity: 1; }
  .hs-steps.is-pinned { display: block; height: calc(100svh + 2400px); min-height: 0; padding-block: 0; }
  .hs-steps.is-pinned .hs-steps-grid { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-block: 40px; box-sizing: border-box; }
}
/* le faux écran du configurateur (étape 2) */
.hs-mock { width: min(86%, 440px); background: #fff; color: var(--st-ink); border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(42,33,56,.55); overflow: hidden; font-size: 13px; }
.hs-mock-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--st-lavender); border-bottom: 1px solid var(--st-line); }
.hs-mock-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--st-line); } .hs-mock-top i:first-child { background: var(--st-coral); }
.hs-mock-top b { margin-left: auto; font-family: var(--st-font-hand); font-weight: 400; font-size: 18px; color: var(--st-violet); }
.hs-mock-body { display: grid; grid-template-columns: 1.1fr 1fr; }
.hs-mock-prev { position: relative; display: grid; place-items: center; min-height: 190px; background: var(--st-cream); }
.hs-mock-prev svg { width: 72%; max-width: 200px; }
.hs-mock-tee { transition: fill .5s; }
.hs-mock-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -32%); font-family: var(--st-font-hand); font-size: 38px; color: var(--st-violet); white-space: nowrap; }
.hs-mock-name span { opacity: 0; display: inline-block; transition: opacity .18s; } .hs-mock-name span.on { opacity: 1; }
.hs-mock-caret { display: inline-block; width: 2px; height: .9em; margin-left: 3px; background: var(--st-violet); vertical-align: -.1em; animation: hs-blink 1s steps(2) infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }
.hs-mock-form { padding: 14px; display: grid; gap: 10px; align-content: start; }
.hs-mock-lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-soft); margin-bottom: 4px; }
.hs-mock-field { display: block; padding: 8px 10px; border: 1.5px solid var(--st-line); border-radius: 10px; background: #fff; font-family: var(--st-font-hand); font-size: 22px; line-height: 1; color: var(--st-violet); min-height: 40px; }
.hs-mock-font { font-size: 16px; line-height: 1.4; }
.hs-mock-sw { display: flex; gap: 8px; } .hs-mock-sw i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,33,56,.2); transition: transform .25s var(--st-ease-out); } .hs-mock-sw i.on { box-shadow: 0 0 0 2px var(--st-violet); transform: scale(1.15); }
.hs-mock-btn { display: block; margin-top: 2px; padding: 10px; border-radius: 999px; background: var(--st-coral-cta); color: #fff; font-family: var(--st-font-title); font-weight: 700; text-align: center; }
@media (max-width: 999px) {
  .hs-steps-grid { grid-template-columns: 1fr; }
  .hs-steps-frame { display: none; }
  .hs-step { grid-template-columns: 36px minmax(0, 1fr) 72px; align-items: center; }
  .hs-step-thumb { display: block; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; box-shadow: var(--st-sh-1); }
}

/* ---------- Galerie horizontale ---------- */
.hs-gal { padding: 0; overflow: clip; background: var(--st-cream); }
.hs-gal-sticky { padding-top: var(--st-section); }
.hs-gal.is-pinned .hs-gal-sticky { position: sticky; top: 0; }
.hs-gal-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); }
.hs-gal-head > div { display: grid; gap: var(--st-s-3); }
.hs-gal-hint { font-family: var(--st-font-title); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-ink-soft); white-space: nowrap; padding-bottom: 8px; }
.hs-gal-hint i { display: inline-block; font-style: normal; animation: hs-nudge 1.8s var(--st-ease-in-out) infinite; }
@keyframes hs-nudge { 50% { transform: translateX(6px); } }
.hs-gal-track { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); width: max-content; padding: 0 var(--st-gutter) clamp(64px, 8vw, 120px); will-change: transform; }
.hs-gal-item { margin: 0; width: clamp(240px, 27vw, 400px); flex: none; }
.hs-gal-item.is-small { width: clamp(190px, 21vw, 300px); margin-top: clamp(40px, 6vw, 96px); }
.hs-gal-item > a { position: relative; isolation: isolate; display: block; border-radius: 20px; outline-offset: 4px; }
.hs-gal-media { display: block; border-radius: 20px; overflow: hidden; background: var(--st-cream-2); box-shadow: var(--st-sh-1); }
.hs-gal-item > a::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; box-shadow: var(--st-sh-2); opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); pointer-events: none; }
.hs-gal-item > a:hover::after, .hs-gal-item > a:focus-visible::after { opacity: 1; }
.hs-gal-item img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; will-change: transform; }
.hs-gal-item.is-small img { aspect-ratio: 1; }
.hs-gal-item figcaption { margin-top: 12px; font-family: var(--st-font-hand); font-size: 1.5rem; line-height: 1; color: var(--st-violet); }
.hs-gal-item figcaption span { display: block; margin-top: 6px; font-family: var(--st-font-text); font-size: var(--st-fs-0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-soft); }
.hs-gal-more { flex: none; width: clamp(240px, 27vw, 400px); }
.hs-gal-more a { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; aspect-ratio: 4 / 5; border-radius: 20px; background: var(--st-violet); color: #fff; text-decoration: none; padding: 26px; font-family: var(--st-font-title); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.05; letter-spacing: -.02em; transition: background-color var(--st-d-short); }
.hs-gal-more a:hover { background: var(--st-violet-deep); }
.hs-gal-more i { font-style: normal; width: 48px; height: 48px; border-radius: 50%; background: var(--st-coral-cta); display: grid; place-items: center; font-size: 1.2rem; transition: transform var(--st-d-short) var(--st-ease-out); }
.hs-gal-more a:hover i { transform: translateX(4px); }
@media (max-width: 999px) {
  .hs-gal { overflow: visible; }
  .hs-gal-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 16px 48px; gap: 14px; scrollbar-width: none; scroll-padding-inline: 16px; align-items: start; }
  .hs-gal-track::-webkit-scrollbar { display: none; }
  .hs-gal-item, .hs-gal-item.is-small, .hs-gal-more { width: 72vw; max-width: 360px; scroll-snap-align: start; margin-top: 0; }
  .hs-gal-item.is-small img { aspect-ratio: 4 / 5; }
  .hs-gal-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Produits phares (cartes de main.css) ---------- */
.hs-featured { padding-top: 0; }

/* ---------- Nathalie ---------- */
.hs-nath { background: var(--st-cream); overflow: hidden; }
.hs-nath-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hs-nath-media { position: relative; padding: 0 40px 56px 0; }
.hs-nath-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--st-cream-2); box-shadow: var(--st-sh-2); }
.hs-nath-frame img { width: 100%; height: 100%; object-fit: cover; }
.hs-nath-cover { position: absolute; inset: 0; background: var(--st-lavender); transform-origin: top; will-change: transform; z-index: 2; }
.hs-nath-pola { position: absolute; right: 0; bottom: 0; width: clamp(150px, 20vw, 220px); z-index: 3; }
.hs-nath-pola figcaption { font-size: 1.15rem; }
.hs-nath-medal { position: absolute; left: -10px; top: 32px; z-index: 3; width: 76px; height: 76px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--st-sh-2); }
.hs-nath-medal img { width: 66px; height: 66px; }
.hs-nath-text { display: grid; gap: 18px; }
.hs-nath-text p { margin: 0; }
.hs-nath-story { color: var(--st-ink-soft); text-wrap: pretty; max-width: 58ch; }
.hs-nath-story:empty { display: none; }
.hs-nath-sign .st-hand { font-size: 3rem; color: var(--st-violet); display: inline-block; transform: rotate(-4deg); }
@media (max-width: 900px) {
  .hs-nath-grid { grid-template-columns: 1fr; }
  .hs-nath-media { max-width: 520px; padding-right: 24px; }
  .hs-nath-pola { width: 150px; }
}

/* ---------- Chiffres + avis ---------- */
.hs-proof { overflow: hidden; }
.hs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: clamp(40px, 6vw, 72px); margin-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid rgba(91,63,122,.16); }
.hs-stats .num { color: var(--st-violet-deep); }
@media (max-width: 640px) { .hs-stats { grid-template-columns: 1fr 1fr; } .hs-stats .st-stat:last-child { grid-column: 1 / -1; } }
.hs-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.hs-reviews .st-review:nth-child(2) { margin-top: 28px; }
.hs-reviews .st-review:nth-child(4) { margin-top: -8px; }
.hs-reviews .st-review:nth-child(5) { margin-top: 20px; }
.hs-reviews .st-review blockquote { font-size: 1.05rem; }
.hs-reviews .st-review .for { display: block; margin-top: 2px; font-family: var(--st-font-text); font-size: var(--st-fs-0); color: var(--st-ink-soft); }
.hs-reviews-more { text-align: center; margin: clamp(28px, 4vw, 40px) 0 0; display: grid; gap: 8px; justify-items: center; }
@media (max-width: 900px) { .hs-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-reviews .st-review { margin-top: 0 !important; } }
@media (max-width: 560px) { .hs-reviews { grid-template-columns: 1fr; } }

/* ---------- Solidaire : les deux blocs existants (solidaire, merci) sous une tête de section ---------- */
.hs-soli { padding-top: var(--st-section); }
.hs-soli[hidden] { display: none; }
.hs-soli-head { margin-bottom: 0; }
.hs-soli .section { padding-top: clamp(24px, 3vw, 36px); padding-bottom: 0; }
.hs-soli .merci-section { padding-bottom: 0; }

/* ---------- CTA (nuit) ---------- */
.hs-cta { margin-top: var(--st-section); padding-block: clamp(56px, 8vw, 110px); overflow-x: clip; }
.hs-cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.hs-cta-item { display: grid; gap: 18px; justify-items: start; align-content: center; }
.hs-cta-item .st-h2, .hs-cta-item .st-h3 { color: #fff; margin: 0; }
.hs-cta-item .st-hand { color: #f6d3cb; }
.hs-cta-item .st-lead, .hs-cta-item p { color: rgba(255,255,255,.78); margin: 0; }
.hs-cta-item .st-kicker { color: #f6d3cb; }
.hs-cta-pro { padding: clamp(22px, 3vw, 36px); border-radius: var(--st-r-l); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) { .hs-cta-grid { grid-template-columns: 1fr; } }

/* ---------- Venir : adresse papier + carte en poster ---------- */
.hs-venir { background: var(--st-cream); overflow: hidden; }
.hs-venir-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hs-venir-text { display: grid; gap: 18px; justify-items: start; }
.hs-venir-text .st-kicker { margin: 0; }
.hs-addr { position: relative; display: grid; gap: 4px; padding: 28px 28px 24px; background: var(--st-paper); border: 1px solid rgba(42,33,56,.14); border-radius: 4px; box-shadow: var(--st-sh-pola); transform: rotate(-1.2deg); max-width: 400px; width: 100%; box-sizing: border-box; }
.hs-addr .st-tape { position: absolute; left: 50%; top: -11px; width: 92px; height: 26px; margin-left: -46px; background: rgba(230,218,242,.75); border: 1px solid rgba(91,63,122,.18); transform: rotate(-3deg); }
.hs-addr-brand { font-size: 2.1rem; margin-bottom: 8px; }
.hs-addr b { font-family: var(--st-font-title); font-weight: 800; font-size: 1.15rem; }
.hs-addr hr { width: 100%; border: 0; border-top: 1px dashed rgba(42,33,56,.3); margin: 10px 0; }
.hs-addr-tel { margin-top: 8px; font-family: var(--st-font-title); font-weight: 800; font-size: 1.4rem; color: var(--st-coral-text); text-decoration: none; letter-spacing: -.01em; }
.hs-addr-tel:hover { text-decoration: underline; }
.hs-venir-poster { position: relative; }
@media (max-width: 900px) { .hs-venir-grid { grid-template-columns: 1fr; } .hs-addr { max-width: none; } }

/* ---------- Réassurance (usp de main.css) + offre de bienvenue ---------- */
.hs-usp { padding-top: 0; }
.hs-usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hs-usp-grid .usp h3 { margin: 0 0 4px; }
@media (max-width: 900px) { .hs-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hs-usp-grid { grid-template-columns: 1fr; } }
.hs-welcome { padding-top: 0; }
.hs-welcome-box { max-width: 640px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.hs-welcome-box .st-lead { margin: 0 0 8px; }
.hs-welcome-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.hs-welcome-form .input { max-width: 280px; }
.hs-welcome-form .sr-only { position: absolute; left: -9999px; }
.hs-welcome-consent { display: flex; gap: 8px; align-items: flex-start; width: 100%; justify-content: center; font-size: .85rem; color: var(--st-ink-soft); cursor: pointer; }
.hs-welcome-consent input { margin-top: 3px; }
.hs-welcome-consent span { max-width: 46ch; text-align: left; }
.hs-welcome-box .op-note { width: 100%; max-width: 46ch; margin: 0 auto 6px; text-align: left; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs-play-ring, .hs-hero-hint i::after, .hs-gal-hint i, .hs-mock-caret { animation: none; }
  .hs-nath-cover { transform: scaleY(0); }
  .hs-uni:hover .hs-uni-media img { transform: none; }
  .hs-addr { transform: none; }
  .hs-hero-polas .st-pola { transform: none; }
}

/* ---------- Bandeau cookies d'app.js, 1re visite (html.hs-cookie posé par home.js) : sur l'accueil seulement, il devient une
   barre fine en bas d'écran et le hero remonte d'autant, pour que ni « ✦ Créer ma personnalisation », ni la note, ni le lanceur
   du film et ses voix ne soient recouverts. Ailleurs, le bandeau d'origine (main.css) ne change pas. ---------- */
html.hs-cookie-open .hs-hero-hint { visibility: hidden !important; }
@media (min-width: 900px) {
  html.hs-cookie .cookie-banner { left: 18px; right: 18px; bottom: 14px; margin-inline: auto; width: min(1040px, calc(100vw - 36px)); padding: 12px 12px 12px 22px; border-radius: 20px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; }
  html.hs-cookie .cookie-banner h4 { margin: 0; white-space: nowrap; font-size: .98rem; }
  html.hs-cookie .cookie-banner p { margin: 0; font-size: .8rem; line-height: 1.4; text-wrap: pretty; }
  html.hs-cookie .cookie-actions { flex: none; gap: 8px; }
  html.hs-cookie .cookie-actions .btn { flex: none; padding: 9px 18px; }
  html.hs-cookie .hs-hero { padding-top: clamp(24px, 3vw, 36px); padding-bottom: 100px; }
}
/* portables à écran bas (≤ 760 px de haut) : le titre suit aussi la hauteur, pour que les boutons, la note et le lanceur du film
   tiennent au-dessus de la ligne de flottaison — et au-dessus de la barre cookies à la 1re visite */
@media (min-width: 900px) and (max-height: 760px) {
  .hs-hero-title { font-size: min(clamp(2.6rem, 1.4rem + 5.6vw, 6rem), 10.5svh); }
  .hs-hero-copy { gap: 14px; }
  .hs-hero { padding-top: clamp(28px, 4svh, 48px); }
}
/* tablette paysage / petits portables (1000-1180 px) : les deux boutons du hero tiennent sur une ligne à côté du lanceur */
@media (min-width: 1001px) and (max-width: 1180px) {
  .hs-hero-cta .st-btn-big { min-height: 52px; padding: .9em 1.35em; font-size: 1rem; }
  .hs-hero-inner { gap: 32px 28px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .hs-hero-title { font-size: min(clamp(2.6rem, 1.4rem + 5.6vw, 6rem), 9svh); }
  .hs-hero-copy { gap: 12px; }
  .hs-hero-lead { font-size: 1.05rem; }
}
@media (max-width: 899.98px) {
  html.hs-cookie .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 12px 14px; display: grid; gap: 10px; }
  html.hs-cookie .cookie-banner h4 { margin: 0; font-size: .95rem; }
  /* le détail reste lu par les lecteurs d'écran ; à l'écran, il est derrière « En savoir plus » */
  html.hs-cookie .cookie-banner p { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.hs-cookie .cookie-actions .btn { padding: 9px 14px; min-height: 44px; }
  html.hs-cookie .hs-hero { padding-top: 12px; padding-bottom: 156px; }
  html.hs-cookie .hs-hero-copy { gap: 10px; }
}

/* ─── Le film en motion design (vidéo) : grande fenêtre au-dessus de la page ─── */
html.hs-filmbox-open { overflow: hidden; }
.hs-filmbox {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px);
  background: rgba(23, 17, 32, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hs-filmbox-frame { position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.hs-filmbox-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hs-filmbox-close {
  position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(23, 17, 32, 0.6); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
}
.hs-filmbox-close:hover, .hs-filmbox-close:focus-visible { background: var(--corail-cta, #c94b3a); border-color: transparent; }
.hs-filmbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hs-filmbox-end {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 20px;
  background: radial-gradient(80% 80% at 50% 50%, rgba(65, 41, 92, 0.86), rgba(23, 17, 32, 0.94));
}
.hs-filmbox-end[hidden] { display: none; }
.hs-filmbox-end-title { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2.2rem); }
.hs-filmbox-end-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* le curseur maison (z-index 1300) passe sous la fenêtre du film (9000) : on y rend le curseur natif et on cache le maison */
html.lfn-has-cursor .hs-filmbox, html.lfn-has-cursor .hs-filmbox video { cursor: auto; }
html.lfn-has-cursor .hs-filmbox button, html.lfn-has-cursor .hs-filmbox a { cursor: pointer; }
html.hs-filmbox-open .lfn-cursor, html.hs-filmbox-open .lfn-sparks { visibility: hidden; }
@media (max-width: 640px) {
  .hs-filmbox { padding: 0; }
  .hs-filmbox-frame { width: 100%; border-radius: 0; }
  .hs-filmbox-close { top: 10px; right: 10px; width: 42px; height: 42px; }
  .hs-filmbox-end-cta .btn { width: 100%; }
}