:root{
  --ink:#0d0d0e;
  --paper:#f4f0e8;
  --paper-dim:#b7b0a6;
  --paper-faint:#7a746c;
  --orange:#e2570f;
  --orange-soft:#f0863f;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(226,87,15,.14),transparent 60%),
    radial-gradient(60% 50% at 50% 100%,rgba(226,87,15,.06),transparent 70%),
    var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  padding:clamp(2rem,6vh,4rem) 1.5rem clamp(1.5rem,4vh,2.5rem);
}

/* ---------- marque ---------- */
.brand .domaine{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  font-weight:500;
  letter-spacing:.04em;
}
.brand .lieu{
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--orange-soft);
  margin-top:.4rem;
}

/* ---------- hero ---------- */
.hero{
  max-width:760px;
  padding:3rem 0;
  animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.annonce{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.annonce em{
  font-style:italic;
  color:var(--orange);
}
.rule{
  width:64px;
  height:1px;
  background:var(--orange);
  margin:2.2rem auto;
}
.detail{
  font-size:clamp(.95rem,1.4vw,1.05rem);
  font-weight:300;
  line-height:1.65;
  color:var(--paper-dim);
  max-width:46ch;
  margin:1.2rem auto 0;
}

/* ---------- gamme ---------- */
.gamme{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.5rem,5vw,3.5rem);
  margin-bottom:2.5rem;
}
.gamme li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
}
.swatch{
  width:10px;
  height:22px;
  border-radius:2px;
  margin-bottom:.3rem;
}
.swatch.rouge{background:#7c2230}
.swatch.blanc{background:#e8dfa8}
.swatch.rose{background:#e58a9a}
.gamme .nom{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
}
.gamme .app{
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--paper-faint);
}

/* ---------- pied de page ---------- */
.foot{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.72rem;
  color:var(--paper-faint);
}
.foot .sante{
  color:var(--paper-dim);
  font-size:.8rem;
}

/* ---------- animation d'entrée unique ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hero{animation:none}
}

/* ---------- mobile ---------- */
@media (max-width:520px){
  .hero{padding:2rem 0}
  .rule{margin:1.6rem auto}
}