/* =====================================================================
   3 PROPOSITIONS — Tranche "Bénéfices du hammam" (terracotta)
   Terracotta charte : #C4866A · variations sable/cèdre/or
   ===================================================================== */
:root {
  --terra: #C4866A;
  --terra-deep: #A35F44;
  --terra-dark: #7E4630;
  --sand: #EAD3C2;
  --sand-soft: #F4E5DA;
}

.prop { padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 70px); }
.prop .wrap { max-width: 1200px; margin-inline: auto; }
.prop .p-head { margin-bottom: clamp(34px, 4vw, 56px); }
.prop .p-eyebrow { font-family: var(--font-sans); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .7em; margin-bottom: 18px; }
.prop .p-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.prop h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; }

/* =========== PROPOSITION A — Terracotta plein, cartes crème =========== */
.propA { background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.12), transparent 42%),
    linear-gradient(135deg, var(--terra) 0%, var(--terra-deep) 100%);
  color: #fff; }
.propA .p-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: flex-end; }
.propA .p-eyebrow { color: var(--sand-soft); }
.propA h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); color: #fff; max-width: 16ch; }
.propA h2 em { font-style: italic; color: #3a2317; }
.propA .p-sub { color: rgba(255,255,255,.85); font-size: 1.06rem; line-height: 1.7; }
.propA .p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.propA .p-card { background: var(--sand-soft); color: var(--cedre); border-radius: 6px; padding: 30px 28px 34px; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.propA .p-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(60,30,18,.6); }
.propA .p-card .pc-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--terra); display: grid; place-items: center; margin-bottom: 18px; }
.propA .p-card .pc-ic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.5; }
.propA .p-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--terra-dark); margin-bottom: 8px; }
.propA .p-card p { font-size: .95rem; color: var(--cedre-2); line-height: 1.6; }
@media (max-width: 880px) { .propA .p-head { grid-template-columns: 1fr; } .propA .p-grid { grid-template-columns: 1fr; } }

/* =========== PROPOSITION B — Sable clair, accents terracotta =========== */
.propB { background:
    radial-gradient(circle at 85% 0%, rgba(196,134,106,.16), transparent 50%),
    var(--sand-soft); color: var(--cedre); }
.propB .p-head { text-align: center; max-width: 720px; margin-inline: auto; }
.propB .p-eyebrow { color: var(--terra-deep); justify-content: center; }
.propB .p-eyebrow::before { display: none; }
.propB h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--terra-dark); }
.propB h2 em { font-style: italic; color: var(--terra); }
.propB .p-sub { color: var(--cedre-2); font-size: 1.08rem; line-height: 1.7; margin-top: 16px; }
.propB .p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--terra); border: 1px solid var(--terra); border-radius: 8px; overflow: hidden; }
.propB .p-card { background: var(--sand-soft); padding: 34px 30px; transition: background .35s; }
.propB .p-card:hover { background: #fff; }
.propB .p-card .pc-ic { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(140deg, var(--terra), var(--terra-deep)); display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 12px 24px -12px rgba(126,70,48,.6); }
.propB .p-card .pc-ic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.5; }
.propB .p-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--terra-dark); margin-bottom: 8px; }
.propB .p-card p { font-size: .95rem; color: var(--cedre-2); line-height: 1.6; }
.propB .p-card .pc-n { float: right; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--terra); opacity: .5; }
.propB .spa-why, .propB.spa-why .p-head { }
.propB.spa-why .p-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .propB .p-grid { grid-template-columns: 1fr; } }
@media (min-width: 881px) and (max-width: 1080px) { .propB.spa-why .p-grid { grid-template-columns: repeat(2, 1fr); } }
/* Bloc SPA en page d'accueil (teaser propB, 2×2 + CTA) */
.propB.spa-home .p-head { text-align: center; }
.propB.spa-home .p-grid { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin-inline: auto; }
.propB.spa-home .spa-home-cta { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 48px); }
.propB.spa-home .spa-home-cta .btn { border-color: var(--terra-deep); color: var(--terra-dark); }
.propB.spa-home .spa-home-cta .btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); color: #fff; }
@media (max-width: 880px) { .propB.spa-home .p-grid { grid-template-columns: 1fr; } }

/* =========== PROPOSITION C — Bicolore terracotta + cèdre, liste éditoriale =========== */
.propC { background: var(--cedre); color: #fff; }
.propC .p-inner { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.propC .p-left { position: relative; }
.propC .p-eyebrow { color: var(--terra); }
.propC h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); color: #fff; margin-bottom: 22px; }
.propC h2 em { font-style: italic; color: var(--terra); }
.propC .p-sub { color: rgba(255,255,255,.74); font-size: 1.06rem; line-height: 1.7; margin-bottom: 28px; }
.propC .p-figure { aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background:
    repeating-linear-gradient(135deg, var(--terra) 0 14px, var(--terra-deep) 14px 28px); position: relative; }
.propC .p-figure::after { content: "حمّام"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3rem; color: rgba(255,255,255,.5); }
.propC .p-list { list-style: none; margin: 0; padding: 0; }
.propC .p-list li { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(196,134,106,.4); }
.propC .p-list li:last-child { border-bottom: 1px solid rgba(196,134,106,.4); }
.propC .p-list .li-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(196,134,106,.18); display: grid; place-items: center; }
.propC .p-list .li-ic svg { width: 24px; height: 24px; stroke: var(--terra); fill: none; stroke-width: 1.5; }
.propC .p-list h3 { font-family: var(--font-display); font-size: 1.4rem; color: #fff; margin-bottom: 3px; }
.propC .p-list p { font-size: .94rem; color: rgba(255,255,255,.66); line-height: 1.55; }
@media (max-width: 880px) { .propC .p-inner { grid-template-columns: 1fr; } .propC .p-figure { display: none; } }