/* ==========================================================
   Thème « Corail » — couleurs du site d'origine sidebusiness.xyz
   Se charge APRÈS style.css et ne fait que surcharger.
   ========================================================== */
:root {
  --red: #de765f;          /* fond corail d'origine */
  --red-dark: #a45846;     /* ombres portées d'origine */
  --yellow: #f2d64a;       /* jaune « revenus passifs » / bouton S'inscrire */
  --ink: #000000;
  --ink-soft: #3b2b26;
  --paper: #ffffff;
  --paper-2: #f8f7f2;      /* blanc cassé des champs */
  --font-serif: "Gelasio", Georgia, serif;
  --shadow-coral: 5px 5px 0 var(--red-dark);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C 240 4 480 58 720 30 S 1200 6 1440 30 V60 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

body { background: var(--paper); }

/* ---------- Boutons façon « S'inscrire » ---------- */
.btn { border: 0; box-shadow: var(--shadow-coral); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red-dark); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red-dark); }
.btn--primary { background: var(--yellow); color: var(--ink); letter-spacing: .03em; }
.btn--ghost { background: var(--paper-2); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--red-dark); }

/* ---------- Nav ---------- */
.nav.is-scrolled { background: rgba(222, 118, 95, .96); box-shadow: 0 4px 0 var(--red-dark); }
.nav__menu a:not(.btn)::after { background: var(--yellow); }
/* Logo texte (identique au pied de page) : sur le corail du menu, BUSINESS passe en blanc */
.nav .logo__side { color: var(--ink); }
.nav .logo__biz { color: var(--paper); text-shadow: 2px 2px 0 var(--red-dark); }

/* ---------- Hero corail ---------- */
.hero { background: var(--red); padding-bottom: 110px; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  background: var(--wave) center / 100% 100% no-repeat;
}
.hero__orbits { stroke: var(--ink); opacity: .22; }
.hero .hand--accent { color: var(--paper); }
.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.12;
  text-shadow: 4px 4px 0 var(--red-dark);
}
.hero__title em { font-style: italic; color: var(--paper); }
.rotator { color: var(--yellow) !important; font-style: italic; }
.rotator::after { display: none; }
.bulb {
  display: inline-block;
  height: .95em;
  width: auto;
  vertical-align: -.1em;
  animation: glow 2.4s ease-in-out infinite;
}
.hero__lead { color: var(--ink-soft); font-weight: 600; }
.sider .shadow { background: rgba(164, 88, 70, .45); }
.bubble { background: var(--paper-2); box-shadow: var(--shadow-coral); }

/* ---------- Bandeau ---------- */
.marquee__track span::after { color: var(--yellow); }

/* ---------- Services (fond blanc) ---------- */
.card { box-shadow: 6px 6px 0 var(--red-dark); }
.card__list li::before { border-color: var(--ink); }

/* ---------- Section corail avec vagues (bloc Diagnostic de la page Offres) ---------- */
.diag {
  background: var(--red);
  padding-top: 140px;
  padding-bottom: 140px;
}
.diag::before,
.diag::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: var(--wave) center / 100% 100% no-repeat;
}
.diag::before { top: -1px; transform: scaleY(-1); }
.diag::after { bottom: -1px; }
.diag .title { text-shadow: 3px 3px 0 var(--red-dark); }
.diag .hand { color: var(--paper); }

/* ---------- Calculateur et Contact : fonds de la version 1 ---------- */
#calcul { background: #fbeee3; }
#contact { background: #fffaf4; }
.calc__box { box-shadow: 8px 8px 0 var(--purple); }
.form { box-shadow: 8px 8px 0 var(--green); }
.calc__box, .form { border: 3px solid var(--ink); background: var(--paper); }
.field output { color: var(--purple); }
input[type="range"] { accent-color: var(--purple); }
.calc__result div { background: #fbeee3; border: 3px solid var(--ink); box-shadow: none; }
.calc__result strong { color: var(--red); }
.form input[type="text"],
.form input[type="email"],
.form textarea { border: 2px solid var(--ink); background: #fffaf4; box-shadow: none; }
.form input:focus, .form textarea:focus { background: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.choices input:checked + span { background: var(--ink); color: var(--paper); }

/* ---------- Méthode ---------- */
.step__num { background: var(--yellow); }
.step:hover .step__num { background: var(--red); color: var(--ink); }

/* ---------- Les Siders sur noir (comme la version 1) ---------- */
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark .hand { color: var(--yellow); }
.siders__img { box-shadow: 10px 10px 0 var(--red); }
.pills li:nth-child(2) { border-color: var(--yellow); color: var(--yellow); }

@keyframes glow {
  0%, 100% { transform: rotate(0); filter: drop-shadow(0 0 0 rgba(242, 214, 74, 0)); }
  50% { transform: rotate(8deg); filter: drop-shadow(0 0 12px rgba(242, 214, 74, .9)); }
}

@media (max-width: 720px) {
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .section--tint, #contact { padding-top: 110px; padding-bottom: 110px; }
}