/* =====================================================================
   3 PROPOSITIONS CRÉATIVES — Bloc SPA / Hammam (page d'accueil)
   ===================================================================== */

/* ====== PROPOSITION 1 — "Le rituel en vapeur" (immersif sombre) ====== */
.spaA { position: relative; overflow: hidden; background: #14100A; color: #fff; padding: clamp(60px,8vw,120px) var(--pad-x); }
.spaA .sa-bg { position: absolute; inset: 0; z-index: 0; }
.spaA .sa-bg image-slot { width: 100% !important; height: 100% !important; }
.spaA .sa-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 80% 10%, rgba(0,140,110,.45), transparent 55%),
  linear-gradient(0deg, rgba(20,16,10,.96), rgba(20,16,10,.55) 60%, rgba(20,16,10,.85)); }
.spaA .sa-steam { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,.16), transparent 70%); filter: blur(20px); }
.spaA .wrap { position: relative; z-index: 2; }
.spaA .sa-top { max-width: 620px; margin-bottom: clamp(40px,5vw,70px); }
.spaA .eyebrow { color: var(--or); margin-bottom: 18px; }
.spaA .eyebrow::before { background: var(--or); }
.spaA h2 { color: #fff; font-size: clamp(2.2rem,4.4vw,3.6rem); line-height: 1.08; margin-bottom: 20px; }
.spaA h2 em { font-style: italic; color: color-mix(in oklch, var(--or) 80%, #fff); }
.spaA .sa-sub { color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.7; }
.sa-journey { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; counter-reset: step; }
.sa-step { position: relative; padding: 30px 26px 30px 0; }
.sa-step::before { content: ""; position: absolute; top: 16px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.18); }
.sa-step .dot { position: absolute; top: 11px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 5px rgba(181,146,76,.22); }
.sa-step .st-n { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--or); display: block; margin: 18px 0 10px; }
.sa-step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: #fff; margin-bottom: 8px; }
.sa-step p { font-size: .92rem; color: rgba(255,255,255,.66); line-height: 1.55; }
.spaA .sa-cta { margin-top: clamp(40px,5vw,64px); }
.spaA .sa-cta .btn { background: var(--or); border-color: var(--or); color: var(--cedre); }
.spaA .sa-cta .btn:hover { background: #fff; border-color: #fff; }
@media (max-width:900px){ .sa-journey { grid-template-columns: 1fr 1fr; } }
@media (max-width:540px){ .sa-journey { grid-template-columns: 1fr; } }

/* ====== PROPOSITION 2 — "Diptyque à l'arche" (terracotta + arche zellige) ====== */
.spaB { background: var(--cream); padding: clamp(50px,7vw,110px) var(--pad-x); }
.spaB .sb-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,80px); align-items: center; }
.spaB .sb-visual { position: relative; }
.spaB .sb-arch { position: relative; aspect-ratio: 3/3.6; border-radius: 50% 50% 14px 14px / 32% 32% 14px 14px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(44,31,14,.6); }
.spaB .sb-arch image-slot { width: 100% !important; height: 100% !important; }
.spaB .sb-arch::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,250,244,.5); border-radius: 50% 50% 10px 10px / 32% 32% 10px 10px; z-index: 2; pointer-events: none; }
.spaB .sb-badge { position: absolute; right: -10px; bottom: 30px; z-index: 3; background: var(--emeraude); color: #fff; border-radius: 50%; width: 116px; height: 116px; display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; box-shadow: 0 20px 44px -18px rgba(0,140,110,.7); padding: 12px; }
.spaB .sb-badge span { display: block; font-size: 1.9rem; font-style: italic; color: var(--or); }
.spaB .eyebrow { color: var(--ocre); margin-bottom: 18px; }
.spaB .eyebrow::before { background: var(--ocre); }
.spaB h2 { font-size: clamp(2.1rem,3.8vw,3.3rem); color: var(--cedre); line-height: 1.08; margin-bottom: 18px; }
.spaB h2 em { font-style: italic; color: var(--ocre); }
.spaB .sb-sub { color: var(--cedre-2); font-size: 1.06rem; line-height: 1.7; margin-bottom: 30px; }
.spaB .sb-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 0; }
.spaB .sb-list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.spaB .sb-list li:last-child { border-bottom: 1px solid var(--line); }
.spaB .sb-list .bi { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ocre); flex: none; width: 2ch; }
.spaB .sb-list .bt { font-family: var(--font-display); font-size: 1.2rem; color: var(--cedre); }
.spaB .sb-list .bs { font-size: .9rem; color: var(--cedre-2); margin-top: 2px; }
.spaB .btn.solid { background: var(--ocre); border-color: var(--ocre); color: #fff; }
.spaB .btn.solid:hover { background: var(--cedre); border-color: var(--cedre); }
@media (max-width:860px){ .spaB .sb-grid { grid-template-columns: 1fr; } .spaB .sb-visual { max-width: 420px; margin-inline: auto; } }

/* ====== PROPOSITION 3 — "Carte sensorielle" (chaud, pétales interactifs) ====== */
.spaC { background: linear-gradient(135deg, #C4866A 0%, #A35F44 60%, #8A4A33 100%); color: #fff; padding: clamp(56px,7vw,110px) var(--pad-x); position: relative; overflow: hidden; }
.spaC::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 26px 26px; }
.spaC .wrap { position: relative; z-index: 1; }
.spaC .sc-head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px,5vw,64px); }
.spaC .eyebrow { justify-content: center; color: #FBE5D6; margin-bottom: 16px; }
.spaC .eyebrow::before { display: none; }
.spaC h2 { color: #fff; font-size: clamp(2.2rem,4.4vw,3.6rem); line-height: 1.08; margin-bottom: 16px; }
.spaC h2 em { font-style: italic; color: #FCEBDC; }
.spaC .sc-sub { color: rgba(255,255,255,.9); font-size: 1.06rem; line-height: 1.7; }
.sc-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.6vw,20px); }
.sc-card { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 30px 24px 32px; transition: transform .45s cubic-bezier(.2,.7,.2,1), background .4s; }
.sc-card:hover { transform: translateY(-8px); background: rgba(255,255,255,.18); }
.sc-card .sc-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; margin-bottom: 20px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.sc-card:hover .sc-ic { transform: rotate(-8deg) scale(1.12); }
.sc-card .sc-ic svg { width: 28px; height: 28px; fill: none; stroke: #fff; }
.sc-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; color: #fff; margin-bottom: 8px; }
.sc-card p { font-size: .92rem; color: rgba(255,255,255,.82); line-height: 1.55; }
.spaC .sc-cta { text-align: center; margin-top: clamp(40px,5vw,60px); }
.spaC .sc-cta .btn { background: #fff; border-color: #fff; color: #8A4A33; }
.spaC .sc-cta .btn:hover { background: var(--cedre); border-color: var(--cedre); color: #fff; }
@media (max-width:900px){ .sc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .sc-cards { grid-template-columns: 1fr; } }

/* Démo */
.demo-switch { position: sticky; top: 0; z-index: 90; background: var(--blanc); border-bottom: 1px solid var(--line); padding: 14px clamp(20px,5vw,60px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.demo-switch .lbl { font-family: var(--font-sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cedre-2); margin-right: 6px; }
.demo-label { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding: 26px clamp(20px,5vw,60px) 0; }