/* ═══════════════════════════════════════════════════════════
   OASIS DE CHAMOUSSET — Styles v3
   Aesthetic : éditorial naturel · beige · vert mousse · brun
   Typographie : Cormorant Garamond (titres) + DM Sans (corps)
   HTML/CSS pur · Low-tech · Permaculturel
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  /* Verts */
  --g-dark:   #2B4720;
  --g-mid:    #3A6228;
  --g-sage:   #5B7B3E;
  --g-fern:   #8AAF68;
  --g-lichen: #C5DAA5;
  --g-mint:   #E8F2DA;

  /* Terres & bruns */
  --b-deep:   #3D2710;
  --b-bark:   #6E4E2A;
  --b-clay:   #9A7248;

  /* Beiges */
  --bg:       #F5F0E8;
  --bg-light: #FAFAF4;  /* quasiment blanc avec teinte verte subtile */
  --bg-dark:  #EBE4D4;
  --parch:    #E6DCC8;

  /* Or / paille */
  --gold:     #BF9A55;
  --gold-lt:  #D4B570;

  /* Encres — renforcées pour meilleure lisibilité */
  --ink:      #1A1008;
  --ink-mid:  #3A2810;
  --ink-lt:   #5E4530;

  /* Utilitaires */
  --rule:     rgba(110,78,42,0.13);
  --sh-sm:    0 1px 6px rgba(30,18,8,0.07);
  --sh-md:    0 4px 24px rgba(30,18,8,0.09);
  --sh-lg:    0 12px 48px rgba(30,18,8,0.13);

  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 1rem;
  font-weight: 400;
}

h1,h2,h3,h4,h5 {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.18;
}
p { margin-bottom: 1em; }
a { color: var(--g-mid); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--g-sage); }
strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── CONTENEURS ── */
.container         { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
.container--wide   { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 740px;  margin: 0 auto; padding: 0 32px; }

/* ── UTILITAIRES ── */
.caps {
  font-family: var(--f-body); font-size: 0.67em; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-bark);
}
.rule       { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.rule--gold { border-top: 1px solid rgba(191,154,85,0.4); }

.ornament {
  display: flex; align-items: center; gap: 20px;
  margin: 32px 0; color: var(--gold);
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,154,85,0.5));
}
.ornament::after { background: linear-gradient(90deg, rgba(191,154,85,0.5), transparent); }

/* ── TAGS ── */
.tag {
  display: inline-block; font-family: var(--f-body);
  font-size: 0.67em; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--g-sage); border: 1px solid var(--g-lichen);
  padding: 3px 10px; border-radius: 2px;
}
.tag--gold   { color: var(--b-clay);  border-color: rgba(191,154,85,0.5); }
.tag--filled { background: var(--g-dark); color: var(--bg-light); border-color: var(--g-dark); }
.tag--free   { background: var(--g-sage); color: #fff; border-color: var(--g-sage); }

/* ── BADGES ── */
.badge {
  display: inline-block; font-family: var(--f-body);
  font-size: 0.65em; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px;
}
.badge--available { background: var(--g-mint); color: var(--g-dark); }
.badge--soon      { background: #FEF3C7; color: #92400E; }
.badge--wip       { background: var(--parch); color: var(--b-bark); }

/* ── BOUTONS ── */
.btn {
  display: inline-block; font-family: var(--f-body);
  font-size: 0.76em; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 13px 28px; border-radius: 2px;
  transition: all 0.18s ease; cursor: pointer; border: none;
}
.btn-primary {
  background: var(--g-dark); color: var(--bg-light); border: 1px solid var(--g-dark);
}
.btn-primary:hover { background: var(--g-mid); border-color: var(--g-mid); color: #fff; }

.btn-secondary {
  background: transparent; color: var(--g-dark); border: 1px solid var(--g-dark);
}
.btn-secondary:hover { background: var(--g-dark); color: var(--bg-light); }

.btn-outline {
  background: transparent; color: var(--b-bark); border: 1px solid var(--b-bark);
}
.btn-outline:hover { background: var(--b-bark); color: var(--bg-light); }

.btn-gold {
  background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

.btn-ghost-light {
  background: transparent; color: rgba(248,244,237,0.85);
  border: 1px solid rgba(248,244,237,0.35);
}
.btn-ghost-light:hover { background: rgba(248,244,237,0.1); color: #fff; border-color: rgba(248,244,237,0.6); }

.btn-sm { padding: 9px 20px; font-size: 0.71em; }

/* ── NAVIGATION ── */
#nav-toggle { display: none; }

.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--bg-light);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--sh-sm);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 62px;
}
.nav-brand {
  font-family: var(--f-display); font-size: 1.25em; font-weight: 500;
  color: var(--g-dark); text-decoration: none; letter-spacing: 0.01em;
  white-space: nowrap; flex-shrink: 0;
}
.nav-brand em { color: var(--g-sage); font-style: italic; }

.nav-links { display: flex; align-items: center; list-style: none; }
.nav-links li { position: relative; }
.nav-links li > a {
  display: flex; align-items: center; gap: 3px;
  font-family: var(--f-body); font-size: 0.71em; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  padding: 0 13px; height: 62px;
  transition: color 0.15s; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-links li > a:hover,
.nav-links li > a.active {
  color: var(--g-dark);
  border-bottom-color: var(--g-sage);
}
.nav-links li > a.cta {
  background: var(--g-dark); color: var(--bg-light);
  margin-left: 10px; padding: 0 18px; height: 36px;
  align-self: center; border-radius: 2px; border-bottom: none;
}
.nav-links li > a.cta:hover { background: var(--g-mid); color: #fff; }

.nav-dropdown > a::after { content: ' ▾'; font-size: 0.75em; opacity: 0.45; }
.dropdown-menu {
  display: none; position: absolute; top: 62px; left: 0;
  background: var(--bg-light);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--g-sage);
  min-width: 234px; box-shadow: var(--sh-md); z-index: 300;
}
.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu li > a {
  height: auto; line-height: 1.4; padding: 11px 16px;
  font-size: 0.71em; color: var(--ink-mid); border-bottom: 1px solid var(--rule);
  transition: background 0.12s, color 0.12s; display: block;
}
.dropdown-menu li:last-child > a { border-bottom: none; }
.dropdown-menu li > a:hover { background: var(--g-mint); color: var(--g-dark); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px; background: none; border: none;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); transition: all 0.2s;
}

/* ── PAGE HEADER ── */
.page-header {
  background: var(--g-dark);
  padding: 60px 32px 52px;
  position: relative; overflow: hidden;
}
.page-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--g-mid), var(--gold), var(--g-mid));
}
.page-header-inner { max-width: 1000px; margin: 0 auto; position: relative; }
.page-header .caps { color: var(--g-fern); margin-bottom: 12px; display: block; }
.page-header h1 {
  font-size: clamp(2.2em, 5vw, 3.6em);
  color: var(--bg); font-weight: 400; margin-bottom: 12px;
}
.page-header .lead {
  font-size: 1.05em; color: rgba(245,240,232,0.82);
  font-style: italic; max-width: 560px; margin-top: 8px;
}
.breadcrumb {
  font-size: 0.71em; color: rgba(245,240,232,0.55);
  margin-bottom: 16px; letter-spacing: 0.04em;
}
.breadcrumb a { color: rgba(245,240,232,0.65); text-decoration: none; }
.breadcrumb a:hover { color: var(--g-fern); }

/* ── SECTIONS ── */
.section        { padding: 84px 0; }
.section--sm    { padding: 56px 0; }
.section--alt   { background: var(--g-mint); }
.section--parch { background: var(--parch); }
.section--light { background: var(--bg-light); }
.section--dark  { background: var(--g-dark); }
.section--earth { background: var(--b-deep); }

.section-head           { margin-bottom: 56px; }
.section-head .caps     { margin-bottom: 10px; display: block; }
.section-head h2        { font-size: clamp(1.9em, 4vw, 2.7em); margin-bottom: 16px; font-weight: 400; }
.section-head p         { color: var(--ink-mid); font-size: 1.02em; max-width: 580px; line-height: 1.75; font-weight: 400; }
.section-head--center   { text-align: center; }
.section-head--center p { margin: 0 auto; }

/* ── CARTES ── */
.card {
  background: var(--bg-light); border: 1px solid var(--rule);
  overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.card-head {
  background: var(--bg-dark); padding: 22px 24px 18px;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--g-sage);
}
.card-head .caps { color: var(--g-sage); margin-bottom: 5px; }
.card-head h3    { font-size: 1.2em; font-weight: 500; }
.card-body       { padding: 22px 24px; }
.card-body p     { font-size: 0.92em; color: var(--ink-mid); line-height: 1.75; }

/* ── PHOTO PLACEHOLDER ── */
.photo-placeholder {
  background: linear-gradient(135deg, var(--parch), var(--g-mint));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--ink-lt); font-family: var(--f-body);
  font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 24px;
  border: 1px dashed var(--g-lichen);
}
.photo-placeholder span { display: block; font-size: 2em; opacity: 0.3; }

/* ── CALLOUT ── */
.callout              { background: var(--bg-light); border-left: 3px solid var(--g-sage); padding: 24px 28px; }
.callout--gold        { border-left-color: var(--gold); }
.callout--dark        { background: var(--g-dark); color: var(--bg); border-left-color: var(--g-fern); }
.callout--earth       { background: var(--parch); border-left-color: var(--b-bark); }
.callout .caps        { margin-bottom: 8px; display: block; }

/* ── FEATURES ── */
.features li {
  font-size: 0.9em; color: var(--ink);
  padding: 7px 0; border-bottom: 1px solid var(--rule);
  display: flex; gap: 10px; align-items: baseline;
}
.features li::before { content: '—'; color: var(--gold); flex-shrink: 0; }
.features li:last-child { border-bottom: none; }

/* ── ÉTHIQUES ── */
.ethiques-band { background: var(--b-deep); padding: 24px 32px 28px; }
.ethiques { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.ethique {
  text-align: center; padding: 16px 24px;
  border-right: 1px solid rgba(255,255,255,0.09);
}
.ethique:last-child { border-right: none; }
.ethique-icon { font-size: 1.6em; margin-bottom: 8px; }
.ethique h3 { font-size: 1em; color: var(--gold); margin-bottom: 5px; font-weight: 500; }
.ethique p  { font-size: 0.83em; color: rgba(245,240,232,0.75); line-height: 1.6; margin: 0; }
@media(max-width:600px) {
  .ethiques { grid-template-columns: 1fr; }
  .ethique  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* ── NEWSLETTER ── */
.newsletter-band { background: var(--g-dark); padding: 56px 32px; text-align: center; }
.newsletter-band h2 { color: var(--bg); font-size: 1.9em; font-weight: 400; margin-bottom: 10px; }
.newsletter-band p  { color: rgba(245,240,232,0.82); font-style: italic; margin-bottom: 24px; }
.newsletter-form { display: flex; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 200px; padding: 12px 16px;
  border: 1px solid rgba(245,240,232,0.3); background: rgba(255,255,255,0.1);
  color: var(--bg); font-family: var(--f-body); font-size: 0.9em; font-weight: 400;
  outline: none; border-radius: 0;
}
.newsletter-form input::placeholder { color: rgba(245,240,232,0.5); }
.newsletter-form button {
  background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
  padding: 12px 24px; font-family: var(--f-body); font-size: 0.74em; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  border-radius: 0; transition: background 0.15s;
}
.newsletter-form button:hover { background: var(--gold-lt); }

/* ── CONTACT FORM ── */
.field-group { margin-bottom: 18px; }
.field-group label {
  display: block; font-family: var(--f-body);
  font-size: 0.69em; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b-bark); margin-bottom: 6px;
}
.field-group input, .field-group select, .field-group textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--rule); background: var(--bg-light);
  color: var(--ink); font-family: var(--f-body); font-size: 0.9em; font-weight: 400;
  outline: none; transition: border-color 0.15s; border-radius: 0; -webkit-appearance: none;
}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--g-sage); }
.field-group textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:480px) { .field-row { grid-template-columns: 1fr; } }


/* ── FOOTER COMPACT ── */
.site-footer { background: var(--ink); color: rgba(245,240,232,0.65); padding: 20px 32px 0; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand-sm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a {
  font-size: 0.82em; color: rgba(245,240,232,0.62); text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--bg); }
.footer-social { display: flex; gap: 14px; font-size: 1.1em; }
.footer-social a { text-decoration: none; opacity: 0.7; transition: opacity 0.15s; }
.footer-social a:hover { opacity: 1; }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  padding: 12px 0;
  font-size: 0.74em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: rgba(245,240,232,0.35);
}
.footer-bottom a { color: rgba(245,240,232,0.45); text-decoration: none; }
.footer-bottom a:hover { color: var(--bg); }
@media(max-width:760px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 4px; }
}


/* ── PAGES ── */
.page-main         { max-width: 1000px; margin: 0 auto; padding: 68px 32px 88px; }
.page-main--narrow { max-width: 740px;  margin: 0 auto; padding: 68px 32px 88px; }

/* ── CGV / LÉGAL ── */
.legal-section { margin-bottom: 40px; }
.legal-section h2 {
  font-family: var(--f-body); font-size: 1.02em; font-weight: 500;
  color: var(--g-dark); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 74px;
}
.legal-section p, .legal-section li { font-size: 0.92em; color: var(--ink); line-height: 1.8; }
.legal-section ul { list-style: disc; padding-left: 22px; margin-top: 8px; }
.legal-section ul li { margin-bottom: 5px; }
.legal-tarif {
  background: var(--bg-light); padding: 14px 18px; margin: 12px 0;
  font-size: 0.88em; color: var(--ink); border-left: 2px solid var(--gold);
}

/* ── RESPONSIVE ── */
@media(max-width:920px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    background: var(--bg-light); flex-direction: column;
    border-top: 1px solid var(--rule); z-index: 99; box-shadow: var(--sh-md);
  }
  #nav-toggle:checked ~ .site-nav .nav-links { display: flex; }
  .nav-links li > a { height: auto; line-height: 1.4; padding: 13px 22px; border-bottom: 1px solid var(--rule); border-bottom-width: 1px; }
  .nav-links li > a.cta { margin: 12px 22px; padding: 10px 18px; height: auto; }
  .dropdown-menu { position: static; border: none; border-left: 3px solid var(--g-sage); margin-left: 20px; box-shadow: none; }
  .nav-dropdown:hover .dropdown-menu { display: none; }
  #nav-toggle:checked ~ .site-nav .dropdown-menu { display: block; }
  #nav-toggle:checked ~ .site-nav .nav-hamburger span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
  #nav-toggle:checked ~ .site-nav .nav-hamburger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked ~ .site-nav .nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }
}
@media(max-width:640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .page-main, .page-main--narrow { padding: 44px 20px 64px; }
  .page-header  { padding: 44px 20px 36px; }
  .section      { padding: 60px 0; }
  .container, .container--wide, .container--narrow { padding: 0 20px; }
}

section[id], div[id] { scroll-margin-top: 62px; }
:focus-visible { outline: 2px solid var(--g-sage); outline-offset: 3px; }

/* ── INTENSITE BADGES ── */
.int-badge {
  font-size: 0.65em; padding: 2px 8px; border-radius: 2px;
  letter-spacing: 0.05em; font-family: var(--f-body); font-weight: 400;
}
.int-low    { background: var(--g-mint); color: var(--g-dark); }
.int-medium { background: #FEF3C7; color: #92400E; }
.int-high   { background: #FEE2E2; color: #991B1B; }
@media print { .site-nav, .newsletter-band { display: none; } body { background: white; } }