/* ===========================================================
   Nature de Guyane — Design system v2
   Direction : carnet de guide, pas SaaS. Sobre, peu de couleur,
   pas de cartes flottantes à ombre, pas de pastilles saturées.
   =========================================================== */

:root{
  /* Palette desaturée, papier + encre + deux accents discrets */
  --paper:      #F4EFE3;   /* papier chaud */
  --paper-alt:  #EAE2CF;   /* bande alternée */
  --ink:        #22241D;  /* texte principal, presque noir chaud */
  --ink-soft:   #585A4E;  /* texte secondaire */
  --rule:       rgba(34,36,29,0.16);   /* filets / séparateurs */
  --rule-strong:rgba(34,36,29,0.32);
  --clay:       #8A4F34;  /* terre cuite désaturée — accent rare */
  --moss:       #38442F;  /* vert mousse profond — blocs sombres */
  --moss-soft:  #4E5B41;
  --white:      #FBF8F1;

  --max-w: 1180px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:450;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--max-w); margin:0 auto; padding:0 var(--s4);}
@media (max-width:640px){ .container{padding:0 var(--s3);} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ---------- Texte courant / liens éditoriaux ---------- */
.label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-soft);
}
.label.accent{ color:var(--clay); }
p.lede{ font-size:19px; line-height:1.65; color:var(--ink-soft); max-width:640px; }
.quote-block{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-style:italic; line-height:1.3; max-width:420px; text-wrap:balance; }
a.inline-link{
  color:var(--clay);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
a.inline-link:hover{ color:var(--ink); }

/* ---------- Boutons : rectangulaires, pas de fill saturé ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:0 var(--s3);
  font-weight:600; font-size:14px; letter-spacing:0.02em; text-transform:uppercase;
  border:1px solid var(--ink);
  cursor:pointer;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--moss); border-color:var(--moss); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline-light{ border-color:rgba(251,248,241,0.6); color:var(--white); }
.btn-outline-light:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* ---------- Header ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4);
}
header.site-header.on-dark .logo,
header.site-header.on-dark nav a{ color:var(--white); text-shadow:0 1px 10px rgba(0,0,0,0.35); }
header.site-header.on-light{ background:var(--paper); border-bottom:1px solid var(--rule); }
header.site-header.on-light .logo,
header.site-header.on-light nav a{ color:var(--ink); }
.logo{ font-family:'Fraunces',serif; font-style:italic; font-weight:450; font-size:21px; }
nav.top-nav{ display:flex; gap:var(--s4); align-items:center; }
nav.top-nav a{
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  padding:var(--s1) 0; border-bottom:1px solid transparent;
  min-height:44px; display:flex; align-items:center;
  transition:border-color 160ms ease;
}
nav.top-nav a:hover, nav.top-nav a.active{ border-color:var(--clay); }
.menu-btn{ display:none; background:none; border:none; font-size:26px; cursor:pointer; min-width:44px; min-height:44px; color:inherit; }
@media (max-width:900px){ nav.top-nav{display:none;} .menu-btn{display:block;} }

/* mobile drawer */
#mobileNav{
  position:fixed; inset:0; z-index:60; background:var(--moss); color:var(--white);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s3);
  padding:var(--s5); transform:translateX(100%); transition:transform 260ms ease;
}
#mobileNav.open{ transform:translateX(0); }
#mobileNav a{ font-family:'Fraunces',serif; font-size:28px; font-style:italic; }
#mobileNav .close-btn{ position:absolute; top:var(--s3); right:var(--s4); font-size:28px; background:none; border:none; color:var(--white); cursor:pointer; min-width:44px; min-height:44px;}

/* ---------- Hero (pages intérieures, bandeau court) ---------- */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:flex-end;
  padding-top:var(--s8);
}
.page-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,15,0.35) 0%, rgba(20,20,15,0.25) 40%, rgba(20,20,15,0.82) 100%); }
.page-hero-content{ position:relative; z-index:2; max-width:var(--max-w); margin:0 auto; padding:0 var(--s4) var(--s6); width:100%; color:var(--white); }
.page-hero h1{ font-size:clamp(2.2rem,4.6vw,3.8rem); font-style:italic; max-width:760px; }
.page-hero .label{ color:var(--white); opacity:0.75; margin-bottom:var(--s2); display:block; }

/* ---------- Section rhythm ---------- */
section{ padding:var(--s7) 0; }
section.tight{ padding:var(--s5) 0; }
.section-head{ margin-bottom:var(--s5); max-width:720px; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); font-style:italic; margin-top:var(--s2); }

/* ---------- Liste éditoriale des expéditions (remplace les cartes) ---------- */
.trip-list{ border-top:1px solid var(--rule-strong); }
.trip-row{
  position:relative;
  display:grid; grid-template-columns: 90px 320px 1fr auto;
  gap:var(--s4); align-items:center;
  padding:var(--s4) var(--s4) var(--s6) 0;
  border-bottom:1px solid var(--rule);
  transition:background 200ms ease;
}
.trip-row:hover{ background:var(--paper-alt); }
.trip-num{ font-family:'Fraunces',serif; font-size:14px; color:var(--ink-soft); font-style:italic; }
.trip-thumb{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--moss); }
.trip-thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.02); }
.trip-info h3{ font-family:'Public Sans',sans-serif; font-weight:700; font-size:19px; margin-bottom:6px; }
.trip-info p{ color:var(--ink-soft); font-size:15px; margin:0; max-width:560px; }
.trip-meta{ text-align:right; white-space:nowrap; }
.trip-duration{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); display:block; margin-bottom:4px; }
.trip-price{ font-family:'Fraunces',serif; font-size:20px; font-weight:500; color:var(--clay); }
.trip-link{
  position:absolute; right:var(--s4); bottom:var(--s2);
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  display:inline-block; border-bottom:1px solid var(--ink);
}
@media (max-width:900px){
  .trip-row{ grid-template-columns: 70px 1fr; grid-template-areas: "num thumb" "info info" "meta meta"; row-gap:var(--s2); padding-bottom:var(--s6); }
  .trip-num{grid-area:num;} .trip-thumb{grid-area:thumb; aspect-ratio:16/10;} .trip-info{grid-area:info;} .trip-meta{grid-area:meta; text-align:left;}
  .trip-link{ right:auto; left:0; bottom:var(--s2); }
}

/* ---------- Bloc intro éditorial (2 colonnes) ---------- */
.intro-grid{ display:grid; grid-template-columns: 0.95fr 1.2fr; gap:var(--s6); align-items:start; }
@media (max-width:860px){ .intro-grid{grid-template-columns:1fr; gap:var(--s4);} }
.intro-body{ padding-top:4px; }
.intro-body p{ color:var(--ink-soft); font-size:17px; line-height:1.75; max-width:600px; margin:0 0 var(--s3); }
.intro-body p:last-child{margin-bottom:0;}
.intro-body strong{ color:var(--ink); font-weight:600; }

/* ---------- Fiche expédition : infos clés en table sobre ---------- */
.fact-table{ border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); }
.fact-table .row{ display:flex; justify-content:space-between; padding:var(--s2) 0; border-bottom:1px solid var(--rule); gap:var(--s3); }
.fact-table .row:last-child{ border-bottom:none; }
.fact-table .k{ font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.fact-table .v{ font-weight:600; text-align:right; }

.itinerary-day{ border-left:2px solid var(--rule-strong); padding-left:var(--s3); margin-bottom:var(--s4); }
.itinerary-day h3{ font-family:'Public Sans',sans-serif; font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:0.04em; color:var(--clay); margin-bottom:var(--s1); }
.itinerary-day p{ color:var(--ink-soft); margin:0; }

/* ---------- Bloc sombre pleine largeur (citation / faune) ---------- */
.dark-block{ background:var(--moss); color:var(--white); }
.dark-block .label{ color:rgba(251,248,241,0.6); }
.dark-block h2{ font-style:italic; }
.dark-block p{ color:rgba(251,248,241,0.82); }

.fullbleed{ position:relative; min-height:56vh; background-size:cover; background-position:center; display:flex; align-items:center; }
.fullbleed-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,20,15,0.82) 0%, rgba(20,20,15,0.2) 65%); }
.fullbleed-content{ position:relative; z-index:2; max-width:var(--max-w); margin:0 auto; padding:0 var(--s4); width:100%; color:var(--white); }
.fullbleed-content h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-style:italic; max-width:540px; margin-top:var(--s2); }
.fullbleed-content p{ max-width:440px; margin-top:var(--s2); }

/* ---------- Table infos pratiques ---------- */
.info-block{ margin-bottom:var(--s5); }
.info-block h3{ font-family:'Public Sans',sans-serif; font-weight:700; font-size:18px; margin-bottom:var(--s2); }
.info-block p, .info-block li{ color:var(--ink-soft); }
.info-block ul{ padding-left:var(--s3); margin:0; }
.info-block li{ margin-bottom:var(--s1); }

/* ---------- CTA bas de page ---------- */
.cta-strip{ background:var(--ink); color:var(--white); text-align:center; }
.cta-strip h2{ font-style:italic; font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:var(--s3); }
.cta-strip p{ color:rgba(251,248,241,0.78); max-width:520px; margin:0 auto var(--s4); }
.contact-line{ margin-top:var(--s4); font-size:14px; color:rgba(251,248,241,0.7); }
.contact-line a{ text-decoration:underline; }

/* ---------- Footer ---------- */
footer.site-footer{ padding:var(--s6) 0; border-top:1px solid var(--rule); }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s4); }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:var(--s3);} }
footer h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:var(--s2); }
.logo-foot{ font-family:'Fraunces',serif; font-style:italic; font-size:19px; margin-bottom:var(--s2); }
footer p, footer a{ color:var(--ink-soft); font-size:14px; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s1); }
footer a:hover{ color:var(--clay); }
.footer-bottom{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s1);
  font-size:12px; color:var(--ink-soft);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Calendrier visuel (grille mensuelle) ---------- */
.cal-wrap{ margin-bottom:var(--s7); }
.cal-wrap h3{ font-family:'Fraunces',serif; font-style:italic; font-size:26px; margin-bottom:var(--s3); }
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.cal-dow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); text-align:center; padding-bottom:var(--s1); }
.cal-cell{
  aspect-ratio:1/1; min-height:64px;
  border:1px solid var(--rule);
  padding:6px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:13px; position:relative;
  background:var(--white);
}
.cal-cell.empty{ border-color:transparent; background:transparent; }
.cal-cell .daynum{ font-weight:700; color:var(--ink-soft); font-size:12px; }
.cal-cell.booked{ background:var(--moss); border-color:var(--moss); }
.cal-cell.booked .daynum{ color:rgba(251,248,241,0.6); }
.cal-cell.booked .tag{ color:var(--white); font-size:10.5px; font-weight:600; line-height:1.25; }
.cal-cell.booked.voltaire{ background:var(--clay); border-color:var(--clay); }
.cal-cell.start{ border-radius:4px 0 0 4px; }
.cal-cell.end{ border-radius:0 4px 4px 0; }
.cal-legend{ display:flex; gap:var(--s4); margin-top:var(--s3); flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.cal-legend .dot{ width:12px; height:12px; border-radius:2px; display:inline-block; }
@media (max-width:640px){
  .cal-cell{ min-height:48px; font-size:11px; padding:4px; }
  .cal-cell .tag{ font-size:9px; }
}

/* ---------- Créneaux cliquables / complets ---------- */
.cal-cell.booked .tag[data-clickable="true"]{ cursor:pointer; }
.cal-cell.booked .tag[data-clickable="true"]:hover{ text-decoration:underline; }
.cal-cell.booked.full{ background:var(--ink-soft); border-color:var(--ink-soft); opacity:0.55; }
.cal-cell.full .tag{ cursor:default; }
.cal-cell.full .tag em{ font-style:normal; font-weight:700; }

/* ---------- Modale de réservation ---------- */
.booking-modal{ position:fixed; inset:0; z-index:200; display:none; }
.booking-modal.open{ display:block; }
.booking-modal-backdrop{ position:absolute; inset:0; background:rgba(34,36,29,0.55); }
.booking-modal-card{
  position:relative; z-index:1; background:var(--paper); max-width:480px; margin:5vh auto;
  padding:var(--s5) var(--s4); max-height:90vh; overflow-y:auto;
}
@media (max-width:640px){ .booking-modal-card{ margin:0; max-width:100%; min-height:100vh; padding:var(--s4); } }
.booking-modal-close{
  position:absolute; top:var(--s3); right:var(--s3); background:none; border:none;
  font-size:28px; line-height:1; cursor:pointer; color:var(--ink-soft);
}
.bm-label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin:var(--s3) 0 var(--s1); color:var(--ink-soft); }
.bm-input{ width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--rule-strong); font-size:15px; font-family:inherit; background:var(--white); }
textarea.bm-input{ min-height:70px; resize:vertical; }
.bm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:480px){ .bm-row2{ grid-template-columns:1fr; } }