/* ============ CHARTE SAMY TOLBA ============ */
@font-face {
  font-family: 'Fashion Fetish';
  src: url('assets/FashionFetish-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('assets/LeagueSpartan-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('assets/LeagueSpartan-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --red: #A30801;
  --sunset: #D84401;
  --dark: #161515;
  --bright: #F9F4E8;
  --grey: #8A8782;
  --fire: linear-gradient(90deg, #F9F4E8 0%, #D84401 45%, #A30801 75%, #161515 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  background: var(--dark);
  color: var(--bright);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Fashion Fetish', 'League Spartan', sans-serif; font-weight: 900; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); margin-bottom: 24px; }
h3 { font-size: 1.25rem; margin-bottom: 8px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }

.fire-bar { height: 9px; background: var(--fire); }

.kicker {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sunset);
  display: block;
  margin-bottom: 20px;
}

.section-cream { background: var(--bright); color: var(--dark); }
.section-cream .kicker { color: var(--red); }

.logo-top { display: block; margin: 0 auto 48px; width: 170px; max-width: 50vw; }

/* ---- boutons ---- */
.btn {
  display: inline-block;
  background: var(--sunset);
  color: var(--dark);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 42px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 30px rgba(216, 68, 1, 0.35);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); background: #E85510; box-shadow: 0 10px 40px rgba(216, 68, 1, 0.5); }
.btn-red { background: var(--red); color: var(--bright); box-shadow: 0 6px 30px rgba(163, 8, 1, 0.4); }
.btn-red:hover { background: #C00A01; }
.btn-sub { display: block; margin-top: 14px; font-size: 0.82rem; color: var(--grey); }

/* ---- listes & cartes ---- */
.pain-list { list-style: none; margin: 32px 0; }
.pain-list li {
  padding: 14px 0 14px 38px;
  position: relative;
  border-bottom: 1px solid rgba(22, 21, 21, 0.12);
  font-size: 1.05rem;
}
.pain-list li::before {
  content: "→";
  position: absolute; left: 4px;
  color: var(--red);
  font-weight: 600;
}

.card {
  background: rgba(249, 244, 232, 0.04);
  border: 1.5px solid var(--sunset);
  border-radius: 14px;
  padding: 34px 30px;
  margin: 22px 0;
}
.card h3 { color: var(--sunset); }
.card .tag {
  display: inline-block;
  background: var(--red);
  color: var(--bright);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.steps { counter-reset: step; margin: 36px 0; }
.step { display: flex; gap: 22px; margin-bottom: 30px; align-items: flex-start; }
.step .num {
  font-family: 'Fashion Fetish', sans-serif;
  font-size: 2.2rem;
  color: var(--sunset);
  line-height: 1;
  min-width: 56px;
}
.step strong { display: block; font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }

.grid-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 30px 0; }
.grid-sections div {
  padding: 10px 0 10px 26px;
  position: relative;
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(249, 244, 232, 0.12);
}
.grid-sections div::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 10px; height: 3px; background: var(--sunset);
}
@media (max-width: 560px) { .grid-sections { grid-template-columns: 1fr; } }

.check-list, .cross-list { list-style: none; margin: 20px 0; }
.check-list li, .cross-list li { padding: 9px 0 9px 34px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--sunset); font-weight: 600; }
.cross-list li::before { content: "✕"; position: absolute; left: 2px; color: var(--grey); font-weight: 600; }
.cross-list li { color: var(--grey); }

/* ---- prix ---- */
.price-box {
  border: 2px solid var(--sunset);
  border-radius: 18px;
  padding: 46px 34px;
  text-align: center;
  margin: 40px 0;
  background: rgba(216, 68, 1, 0.05);
}
.price-old { color: var(--grey); font-size: 1rem; }
.price-old s { opacity: .8; }
.price {
  font-family: 'Fashion Fetish', sans-serif;
  font-size: 4rem;
  color: var(--bright);
  display: block;
  margin: 10px 0 4px;
}
.anchor-list { list-style: none; margin: 26px auto; max-width: 430px; text-align: left; }
.anchor-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(249,244,232,.12); font-size: .98rem; }
.anchor-list .v { color: var(--grey); white-space: nowrap; }

/* ---- FAQ ---- */
details {
  border-bottom: 1px solid rgba(22, 21, 21, 0.15);
  padding: 18px 0;
}
details summary {
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 36px;
}
details summary::after { content: "+"; position: absolute; right: 4px; top: -2px; color: var(--red); font-size: 1.5rem; }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; font-size: 1rem; }

/* ---- formulaire ---- */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.form-row input {
  flex: 1 1 220px;
  padding: 17px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(22,21,21,.35);
  background: #fff;
  color: var(--dark);
  font-family: inherit;
  font-size: 1rem;
}
.form-row input:focus { outline: 2px solid var(--sunset); border-color: var(--sunset); }
.form-msg { margin-top: 16px; font-weight: 600; }
.form-msg.ok { color: var(--red); }
.form-msg.err { color: var(--red); }

/* ---- divers ---- */
.center { text-align: center; }
.muted { color: var(--grey); }
.section-cream .muted { color: rgba(22,21,21,.55); }
.accent { color: var(--sunset); }
.section-cream .accent { color: var(--red); }
.lead { font-size: 1.18rem; }
footer { padding: 56px 0 40px; text-align: center; }
footer img { width: 130px; opacity: .9; }
footer p { font-size: .85rem; color: var(--grey); margin-top: 18px; }
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(22, 21, 21, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(216, 68, 1, 0.4);
  padding: 12px 16px;
  display: flex; justify-content: center; gap: 16px; align-items: center;
  z-index: 50;
}
.sticky-cta .btn { padding: 13px 28px; font-size: 0.85rem; box-shadow: none; }
.sticky-cta span { font-weight: 600; font-size: .9rem; }
@media (max-width: 560px) { .sticky-cta span { display: none; } section { padding: 64px 0; } }