:root{
  --primary:#f77f00;       /* orange principal */
  --primary-dark:#d76700;  /* orange foncé (survol) */
  --bg:#fffaf3;            /* fond crème */
  --ink:#2d2d2d;           /* texte */
  --card:#ffffff;          /* cartes/blocs */
  --shadow:0 6px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}

/* HERO (bandeau dégradé) */
.hero {
  background: linear-gradient(160deg, #ff9933 0%, #f77f00 40%, #d76700 100%);
  color:#fff;
  padding:3.2rem 1.25rem 2rem;
  text-align:center;
}
.hero h1{
  font-size: clamp(28px, 6vw, 56px);
  line-height:1.05;
  margin:0 0 .5rem 0;
}
.hero p{
  margin:.25rem auto 0;
  max-width: 900px;
  font-size: clamp(16px, 2.6vw, 22px);
  opacity:.95;
}

/* NAV */
nav{
  background: var(--primary);
  /* fine bordure plus sombre sous le bandeau pour séparer si on scrolle */
  box-shadow: inset 0 -1px rgba(0,0,0,.15);
  display:flex; flex-wrap:wrap; gap:1rem;
  padding: .65rem 1rem;
}
nav a{
  color:#fff; text-decoration:none; font-weight:700;
}
nav a:hover{ text-decoration:underline; }

/* CONTENU */
main{max-width:1100px; margin:0 auto; padding:2rem 1.25rem;}
h2{color:var(--primary-dark); margin:.25rem 0 .75rem}

/* Carte “Présentation” */
.section-soft{
  background: #fff3e5;      /* crème plus soutenu pour rappeler l’orange */
  border: 1px solid #ffe1c6;
  padding: 1.25rem;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.section-soft h2{
  font-size: clamp(22px, 3.6vw, 32px);
  margin-top:.25rem;
}
.section-soft ul{ margin:.75rem 0 0 1.1rem; }
.section-soft li{ margin:.45rem 0; }

/* Bouton */
.btn{
  display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  font-weight:800; padding:.75rem 1.15rem; border-radius:.6rem;
}
.btn:hover{ background:var(--primary-dark); }

/* FOOTER */
footer{background:#222; color:#bbb; text-align:center; padding:1rem; margin-top:.promo {
  background:#fff8f0;
  border:2px solid #e07a5f;
  border-radius:12px;
  padding:12px 16px;
  margin:16px 0 24px;
  font-size:1rem;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.promo strong { color:#e07a5f; }
.promo .btn {
  margin-left:auto;
  background:#e07a5f;
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  text-decoration:none;
}
.promo .btn:hover {
  background:#b85c47;
}