/* ===========================================================
   Zen NAC — feuille de style principale
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --bg: #f5ecfa;
  --accent: #bb9bde;
  --accent-soft: #e4d6f2;
  --icon: #8A6B9E;
  --heading: #3D3442;
  --text: #5A4E63;
  --card: #ffffff;
  --line: rgba(138,107,158,0.18);
  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 10px;
  --shadow: 0 18px 40px -22px rgba(61,52,66,0.28);
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Figtree', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

h1,h2,h3,.serif{
  font-family:'Fraunces', Georgia, serif;
  color:var(--heading);
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.2rem, 4.6vw, 3.4rem); line-height:1.08; font-weight:500; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); line-height:1.2; }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; max-width:66ch; }
a{ color:var(--icon); }
ul{ padding-left:1.2em; margin:0 0 1em; }
li{ margin-bottom:.4em; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(245,236,250,0.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--maxw); margin:0 auto; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:62px; width:auto; }

nav.primary{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
nav.primary a{
  text-decoration:none; color:var(--icon); font-weight:600; font-size:.97rem;
  padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s ease;
}
nav.primary a:hover, nav.primary a.active{ border-color:var(--accent); }

.has-dropdown{ position:relative; }
.dropdown{
  display:none; position:absolute; top:calc(100% + 12px); left:-14px;
  background:var(--card); border-radius:var(--radius-s); box-shadow:var(--shadow);
  min-width:230px; padding:8px; border:1px solid var(--line);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:block; }
.dropdown a{
  display:block; padding:10px 12px; border-radius:8px; border-bottom:none;
  color:var(--heading); font-weight:500;
}
.dropdown a:hover{ background:var(--bg); }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle svg{ width:26px; height:26px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#ffffff; text-decoration:none;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:.98rem;
  border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 12px 26px -12px rgba(138,107,158,0.55);
}
.btn:hover{ transform:translateY(-2px); }
.btn.ghost{
  background:transparent; color:var(--icon); box-shadow:none;
  border:1.5px solid var(--accent);
}
.btn.disabled{
  background:var(--accent-soft); color:var(--icon); box-shadow:none;
  cursor:default; pointer-events:none;
}
.soon-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-soft); color:var(--icon);
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:.9rem;
}
.soon-note{ font-size:.9rem; margin-top:10px; }

.notice-banner{
  background:#ffffff; border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow); padding:16px 22px; display:flex; align-items:center; gap:14px;
  margin:0 0 8px;
}
.notice-banner .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.notice-banner p{ margin:0; font-size:.95rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:76px 0 40px;
}
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center;
}
.hero-blob{
  position:absolute; right:-140px; top:-120px; width:520px; height:520px;
  background:radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%);
  border-radius:50%; z-index:0;
}
.eyebrow{
  color:var(--icon); font-weight:700; font-size:.9rem; margin-bottom:14px;
}
.hero h1{ position:relative; z-index:1; }
.hero .lede{ font-size:1.12rem; max-width:48ch; }
.hero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.hero-art{
  position:relative; z-index:1; background:var(--card);
  border-radius:var(--radius-l); box-shadow:var(--shadow);
  padding:34px; display:flex; align-items:center; justify-content:center;
}
.hero-art svg, .hero-art img{ width:100%; height:auto; max-width:320px; object-fit:contain; }

/* species pill strip on home */
.species-strip{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:38px;
}
.species-pill{
  display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--line); padding:10px 16px 10px 10px; border-radius:999px;
  text-decoration:none; color:var(--heading); font-weight:600; font-size:.92rem;
  box-shadow:0 10px 20px -16px rgba(61,52,66,0.3);
}
.species-pill .ico{ width:32px; height:32px; }
.species-pill .ico img{ width:100%; height:100%; object-fit:contain; }
.icon-row{ display:flex; gap:22px; align-items:center; margin:20px 0; flex-wrap:wrap; }
.icon-row figure{ margin:0; text-align:center; width:64px; }
.icon-row img{ width:64px; height:64px; object-fit:contain; margin-bottom:6px; }
.icon-row figcaption{ font-size:.8rem; color:var(--text); }
.species-pill:hover{ background:var(--accent-soft); }

/* ---------- Sections ---------- */
section{ padding:54px 0; }
section.tinted{ background:#ffffffaa; }
.section-head{ max-width:60ch; margin-bottom:34px; }

.card{
  background:var(--card); border-radius:var(--radius-m);
  box-shadow:var(--shadow); padding:34px;
}

/* Qui suis-je */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;
}
.about-photo{
  border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio: 4/5; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.about-photo svg{ width:60%; }
.pillars{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.pillars li{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:12px 16px; font-weight:600; color:var(--heading);
  display:flex; align-items:center; gap:10px;
}
.pillars li svg{ width:20px; height:20px; flex:none; }

/* Species page hero */
.species-hero{ padding:58px 0 20px; text-align:center; }
.species-hero .tag{ color:var(--icon); font-weight:600; font-style:italic; font-family:'Fraunces', serif; font-size:1.1rem; }
.species-hero .ico-wrap{
  width:96px; height:96px; margin:22px auto 6px; display:flex; align-items:center; justify-content:center;
}
.species-hero .ico-wrap svg, .species-hero .ico-wrap img{ width:100%; height:100%; object-fit:contain; }

.info-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:32px; align-items:start;
}
.price-card{
  background:var(--card); border-radius:var(--radius-m); box-shadow:var(--shadow);
  padding:28px; position:sticky; top:100px;
}
.price-card .amount{ font-family:'Fraunces', serif; font-size:2rem; color:var(--heading); }
.price-card .unit{ font-size:.95rem; color:var(--text); }
.price-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-weight:600; color:var(--heading); }
.price-row:last-of-type{ border-bottom:none; }
.includes{ margin-top:18px; }
.includes h3{ font-size:.95rem; text-transform:none; margin-bottom:8px; }
.includes ul{ font-size:.94rem; }
.note-box{
  background:var(--bg); border-left:3px solid var(--accent); border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:14px 18px; margin:18px 0; font-size:.96rem;
}

/* FAQ */
.faq-item{
  background:var(--card); border-radius:var(--radius-s); box-shadow:var(--shadow);
  margin-bottom:12px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; padding:18px 22px; font-weight:600; color:var(--heading);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex:none; transition:transform .2s ease; color:var(--icon); }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .a{ padding:0 22px 20px; color:var(--text); }

/* Pricing table blocks (transport / infos) */
.rate-table{ width:100%; border-collapse:collapse; margin:8px 0 22px; }
.rate-table th, .rate-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.rate-table th{ font-family:'Fraunces', serif; font-weight:600; color:var(--heading); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }

.content-photo{
  border-radius:var(--radius-m); box-shadow:var(--shadow);
  overflow:hidden; margin:22px 0; max-width:420px;
}
.content-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-row{ display:flex; gap:18px; margin:22px 0; flex-wrap:wrap; }
.photo-row .content-photo{ flex:1 1 220px; margin:0; max-width:none; }
.photo-caption{ font-size:.85rem; color:var(--icon); margin-top:8px; font-style:italic; }

/* Footer */
footer.site{
  background:var(--heading); color:#efe6f6; margin-top:60px; padding:50px 0 30px;
}
footer.site .wrap{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
footer.site .fbrand{ font-family:'Fraunces', serif; font-size:1.3rem; color:#fff; margin-bottom:8px; }
footer.site a{ color:#d8c6ea; text-decoration:none; }
footer.site a:hover{ text-decoration:underline; }
footer.site .flinks{ display:flex; gap:18px; flex-wrap:wrap; font-size:.92rem; }
footer.site .legal{ font-size:.85rem; color:#c1abd6; margin-top:6px; }

/* Contact strip */
.contact-strip{
  background:var(--accent-soft); border-radius:var(--radius-l); padding:36px 40px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 860px){
  nav.primary{
    position:fixed; inset:70px 16px auto 16px; background:var(--card);
    border-radius:var(--radius-m); box-shadow:var(--shadow); padding:14px;
    flex-direction:column; align-items:flex-start; gap:4px;
    display:none;
  }
  nav.primary.open{ display:flex; }
  .has-dropdown .dropdown{ position:static; box-shadow:none; border:none; display:none; padding-left:10px; }
  .has-dropdown.open .dropdown{ display:block; }
  .menu-toggle{ display:block; }
  .hero .wrap{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
  .price-card{ position:static; }
  .two-col{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}

/* Notice above each Réserver button */
.reserve-note{
  background:var(--bg); border-left:3px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:12px 16px; margin:0 0 12px; font-size:.92rem; text-align:left;
}
.reserve-note.small{ font-size:.85rem; padding:10px 14px; }
.reserve-block{ text-align:center; margin-top:30px; max-width:560px; margin-left:auto; margin-right:auto; }

/* Mobile : en-tête et haut de la page d'accueil */
@media (max-width: 860px){
  .nav-row{ padding:12px 20px; }
  .brand img{ height:52px; }
  nav.primary{ inset:80px 16px auto 16px; }
  .hero{ padding:36px 0 16px; }
  .hero .wrap{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .hero .wrap > *{ min-width:0; }
  .hero h1{ font-size:clamp(1.9rem, 8.2vw, 2.4rem); overflow-wrap:break-word; }
  .hero h1 br{ display:none; }
  .hero .lede{ max-width:none; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .hero-art{ max-width:230px; margin:0 auto; padding:20px; }
  .hero-blob{ width:360px; height:360px; right:-120px; top:-100px; }
}