/* ============================================================
   Estelle & Vincent — 10 avril 2027
   Charte inspirée du faire-part : aquarelle florale, magenta
   ============================================================ */

:root {
  --magenta: #d6006e;
  --pink:    #f04a94;
  --coral:   #f4622e;
  --orange:  #f6a12b;
  --yellow:  #f8cc46;
  --green:   #7fa04d;
  --ink:     #3b3630;
  --paper:   #fffdfa;

  --font-script: 'Pinyon Script', cursive;
  --font-sans:   'Josefin Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  position: relative;
  overflow-x: hidden;
}

/* Grain aquarelle très léger sur toute la page */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------------- Lavis floraux (CSS pur) ---------------- */
.bloom {
  position: absolute; pointer-events: none; z-index: 0;
  filter: blur(26px) saturate(1.05);
  opacity: 0; animation: bloomIn 2s ease forwards;
}
.bloom.tl {
  top: -90px; left: -90px; width: min(48vw, 540px); height: min(48vw, 540px);
  background:
    radial-gradient(closest-side at 30% 32%, rgba(214,0,110,.85), transparent 70%),
    radial-gradient(closest-side at 54% 22%, rgba(244,98,46,.80), transparent 72%),
    radial-gradient(closest-side at 22% 56%, rgba(246,161,43,.75), transparent 72%),
    radial-gradient(closest-side at 60% 52%, rgba(240,74,148,.72), transparent 72%),
    radial-gradient(closest-side at 42% 74%, rgba(127,160,77,.70), transparent 74%),
    radial-gradient(closest-side at 74% 40%, rgba(248,204,70,.60), transparent 72%);
}
.bloom.tr {
  top: -110px; right: -110px; width: min(52vw, 600px); height: min(52vw, 600px);
  background:
    radial-gradient(closest-side at 70% 30%, rgba(214,0,110,.85), transparent 70%),
    radial-gradient(closest-side at 46% 20%, rgba(244,98,46,.78), transparent 72%),
    radial-gradient(closest-side at 78% 56%, rgba(246,161,43,.72), transparent 72%),
    radial-gradient(closest-side at 42% 50%, rgba(240,74,148,.70), transparent 72%),
    radial-gradient(closest-side at 60% 74%, rgba(127,160,77,.68), transparent 74%),
    radial-gradient(closest-side at 30% 42%, rgba(248,204,70,.55), transparent 72%);
  animation-delay: .2s;
}
.bloom.bl {
  bottom: -120px; left: -120px; width: min(40vw, 460px); height: min(40vw, 460px);
  background:
    radial-gradient(closest-side at 34% 66%, rgba(240,74,148,.62), transparent 72%),
    radial-gradient(closest-side at 20% 44%, rgba(246,161,43,.55), transparent 72%),
    radial-gradient(closest-side at 58% 58%, rgba(214,0,110,.55), transparent 72%),
    radial-gradient(closest-side at 44% 30%, rgba(127,160,77,.55), transparent 74%);
  animation-delay: .4s;
}
.bloom.br {
  bottom: -110px; right: -110px; width: min(44vw, 500px); height: min(44vw, 500px);
  background:
    radial-gradient(closest-side at 66% 64%, rgba(240,74,148,.62), transparent 72%),
    radial-gradient(closest-side at 80% 44%, rgba(244,98,46,.55), transparent 72%),
    radial-gradient(closest-side at 44% 58%, rgba(214,0,110,.55), transparent 72%),
    radial-gradient(closest-side at 60% 30%, rgba(248,204,70,.55), transparent 74%),
    radial-gradient(closest-side at 40% 40%, rgba(127,160,77,.50), transparent 74%);
  animation-delay: .5s;
}
.bloom.soft { filter: blur(34px) saturate(1); animation: bloomSoft 2s ease forwards; }
@keyframes bloomSoft { to { opacity: .45; } }

/* ---------------- Navigation ---------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.6rem;
  background: rgba(255,253,250,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,54,48,.07);
}
.nav-brand {
  font-family: var(--font-script);
  font-size: 1.5rem; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-brand .amp { color: var(--magenta); }
.nav-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav-links a {
  text-decoration: none; color: var(--ink);
  text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 400;
  padding-bottom: 3px; border-bottom: 1px solid transparent; transition: all .2s ease;
}
.nav-links a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.nav-links a.active { color: var(--magenta); border-bottom-color: var(--magenta); }

/* ---------------- Titres de page ---------------- */
.page-head { position: relative; overflow: hidden; padding: 4.5rem 1.5rem 2.5rem; text-align: center; }
.page-head > *:not(.bloom) { position: relative; z-index: 2; }
.page-title {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  color: var(--magenta); line-height: 1;
}
.page-sub {
  max-width: 620px; margin: 1.2rem auto 0;
  font-weight: 300; font-size: 1rem; line-height: 1.7;
}
.rule {
  width: 140px; height: 1px; margin: 1.6rem auto 0;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
}

/* ---------------- Sections ---------------- */
section.wrap { position: relative; overflow: hidden; padding: 3rem 1.5rem 5rem; }
.inner { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .3em; font-size: .68rem; font-weight: 400;
  color: var(--magenta); text-align: center;
}
.section-title {
  font-family: var(--font-script);
  font-size: clamp(2rem, 5vw, 2.8rem); color: var(--ink);
  text-align: center; line-height: 1.2; margin-top: .4rem;
}

/* ---------------- Cartes hébergement ---------------- */
.heb-group { margin-top: 3.4rem; }
.heb-group:first-of-type { margin-top: 0; }
.group-head { text-align: center; margin-bottom: 2rem; }
.group-title { font-family: var(--font-script); font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--ink); line-height: 1.2; }
.group-note { text-transform: uppercase; letter-spacing: .22em; font-size: .66rem; font-weight: 300; opacity: .7; margin-top: .5rem; }
.group-rule { width: 90px; height: 1px; margin: 1rem auto 0; background: linear-gradient(90deg, transparent, var(--magenta), transparent); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }

.lodge {
  position: relative; background: #fff; border-radius: 16px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 10px 30px rgba(214,0,110,.06), 0 2px 8px rgba(59,54,48,.05);
  border: 1px solid rgba(59,54,48,.06); overflow: hidden;
  display: flex; flex-direction: column;
}
.lodge::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--magenta), var(--coral), var(--orange), var(--yellow));
}
.lodge-type { text-transform: uppercase; letter-spacing: .22em; font-size: .64rem; font-weight: 500; color: var(--magenta); }
.lodge-name { font-size: 1.28rem; font-weight: 600; margin: .5rem 0 .2rem; line-height: 1.2; }
.lodge-cap { font-size: .78rem; font-weight: 400; letter-spacing: .03em; color: var(--coral); margin-top: .35rem; }
.lodge-meta { font-size: .74rem; font-weight: 300; letter-spacing: .04em; opacity: .8; }
.lodge-desc { font-size: .92rem; font-weight: 300; line-height: 1.55; margin: .8rem 0 1.2rem; flex-grow: 1; }
.lodge-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.lodge-links a {
  text-decoration: none; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px; transition: all .2s ease;
}
.lodge-links .tel { color: #fff; background: var(--magenta); }
.lodge-links .tel:hover { background: #b0005b; }
.lodge-links .map { color: var(--magenta); border: 1px solid rgba(214,0,110,.35); }
.lodge-links .map:hover { background: rgba(214,0,110,.06); }

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-block; text-decoration: none;
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
  padding: .85rem 1.6rem; border-radius: 999px; transition: all .2s ease;
}
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: #b0005b; }
.btn-ghost { color: var(--magenta); border: 1px solid rgba(214,0,110,.35); }
.btn-ghost:hover { background: rgba(214,0,110,.06); }

/* ---------------- Pied de page ---------------- */
.footer {
  position: relative; z-index: 2; text-align: center;
  padding: 3rem 1.5rem 3.5rem;
  border-top: 1px solid rgba(59,54,48,.07);
}
.footer .sig { font-family: var(--font-script); font-size: 2rem; color: var(--ink); }
.footer .sig .amp { color: var(--magenta); }
.footer .meta { text-transform: uppercase; letter-spacing: .28em; font-size: .66rem; font-weight: 300; opacity: .7; margin-top: .6rem; }

/* ---------------- Animations ---------------- */
@keyframes rise    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade    { to { opacity: 1; } }
@keyframes grow    { to { width: 180px; } }
@keyframes bloomIn { to { opacity: 1; } }
@keyframes bounce  { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }

@media (max-width: 560px) {
  .nav { flex-direction: column; gap: .8rem; padding: .9rem 1rem; }
  .nav-links { gap: 1rem; justify-content: center; }
  .grid { grid-template-columns: 1fr; }
}