/* ==========================================================================
   Reverie Safaris — recodé sans Framer
   Polices, couleurs et tailles reprises fidèlement du site original.
   ========================================================================== */

/* ---- Polices (fichiers locaux dans /fonts) ---- */
@font-face { font-family:"GT Ultra Light";   src:url("../fonts/n9Vhq2sZQxG7bR7IK2xHSs4VGs.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Ultra Regular"; src:url("../fonts/E7NT7OKE4dhDFSJzDTwTGJfBWvg.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Ultra Regular"; src:url("../fonts/rdumtp8EG4wyXEQUXgQJsApPI.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"GT Ultra Bold";    src:url("../fonts/YX7RBlqCxHnoHV69sdnqGrNKNqk.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Ultra Bold";    src:url("../fonts/8TmofgdV661YsXvJNFKtV2SctI.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"PP Editorial New Ultralight"; src:url("../fonts/Ml5YdxLwsCRqmN9FGRm5d77gY.woff") format("woff"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/syRNPWzAMIrcJ3wIlPIP43KjQs.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Design tokens ---- */
:root{
  --dark:        #890000; /* fond vert foncé (hero, footer, cartes) */
  --cream:       #fbf9f3; /* fond clair / texte sur fond foncé */
  --brown:       #58503c; /* texte principal sur fond clair */
  --brown-muted: #7e715a;
  --accent:      #58503c; /* liens / boutons pleins */
  --border:      #dad7ce;
  --border-dark: rgba(250,248,242,.2);
  --muted-cream: #cfd3cb;
  --footer-link: #a5b0aa;
  --footer-copy: #fbf9f3;

  --font-display: "PP Editorial New Ultralight", serif;
  --font-body:    "GT Ultra Light", sans-serif;
  --font-body-b:  "GT Ultra Bold", sans-serif;
  --font-label:   "GT Ultra Regular", sans-serif;

  --container: 1360px;
  --gutter: 24px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: 76px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,figure{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:#58503c; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Type scale (repris des presets Framer) ---- */
.eyebrow{           /* GT Ultra Regular 12px, uppercase, tracking 1.2px */
  font-family:var(--font-label); font-size:12px; font-weight:400;
  letter-spacing:1.2px; text-transform:capitalize; line-height:1; color:#fbf9f3;
}
.h1-display{ font-family:var(--font-display); font-weight:200; font-size:clamp(32px,5vw,42px); line-height:1.2; text-transform:capitalize; }
.h2-display{ font-family:var(--font-display); font-weight:200; font-size:clamp(26px,4vw,32px); line-height:1.2; }
.h3-display{ font-family:var(--font-display); font-weight:200; font-size:22px; line-height:1.2; }
.subheading{ font-family:var(--font-body); font-weight:300; font-size:16px; line-height:1.5; text-transform:uppercase; }
.body-text{ font-family:var(--font-body); font-weight:300; font-size:15px; line-height:1.6; }
.body-text b, .body-text strong{ font-family:var(--font-body-b); font-weight:700; }
.label-sm{ font-family:var(--font-label); font-weight:400; font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.desc-sm{ font-family:var(--font-body); font-weight:300; font-size:14px; line-height:1.5; }

/* ---- Layout helpers ---- */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:96px var(--gutter); }
@media (max-width:809px){ .section{ padding:64px var(--gutter); } }
.section--dark{ background:var(--dark); color:var(--cream); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px; font-family:var(--font-label); font-size:12px;
  letter-spacing:1.2px; text-transform:capitalize; white-space:nowrap;
  border:1px solid transparent; transition:opacity .2s ease, background-color .2s ease;
}
.btn:hover{ opacity:.75; }
.btn--outline-light{ border-color:var(--border-dark); color:var(--cream); }
.btn--outline-dark{ border-color:var(--border); color:var(--accent); }
.btn--solid{ background:var(--cream); color:var(--accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:76px; padding:0 var(--gutter);
  transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{ background:var(--cream); box-shadow:0 1px 0 var(--border); }
.site-header.is-scrolled .menu-toggle, .site-header.is-scrolled .nav-logo, .site-header.is-scrolled .header-right a{ color:var(--brown); }
.site-header--static{
  background:var(--cream);
  box-shadow:0 1px 0 var(--border);
}
.site-header--static .menu-toggle,
.site-header--static .nav-logo,
.site-header--static .header-right a{
  color:var(--brown);
}
.menu-toggle{
  display:flex; align-items:center; gap:10px; background:none; border:none;
  color:var(--cream); font-family:var(--font-label); font-size:12px; letter-spacing:1.2px;
}
.menu-toggle svg{ width:26px; height:9px; }

.nav-logo .logo-svg{
  height:48px;
  width:auto;
  display:block;
  margin-bottom: 12px; /* ajuste la valeur selon le besoin */
  color:var(--cream); /* couleur par défaut : blanc */
  transition:color .25s ease;
}

.site-header.is-scrolled .nav-logo .logo-svg{
  color:#890000; /* couleur au scroll : rouge */
}
.site-header--static .nav-logo .logo-svg{
  color:var(--brown);
}

.header-right{ display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.header-right .btn{ padding:12px 22px; }
@media (max-width:809px){
  .site-header{ height:55px; }
  .header-right .link-gallery{ display:none; }
  .header-right .btn.btn--solid{
    background:none;
    border:none;
    padding:0;
    color: var(--cream);
  }
}

/* Off-canvas menu */
.nav-scrim{
  position:fixed; inset:0; background:#000; opacity:0; pointer-events:none;
  transition:opacity .35s ease; z-index:1100;
}
.nav-panel{
  position:fixed; top:0; left:0; height:100%; width:min(420px,88vw);
  background:var(--cream); color:var(--brown); z-index:1200;
  transform:translateX(-102%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto; display:flex; flex-direction:column;
}
body.nav-open .nav-scrim{ opacity:.5; pointer-events:auto; }
body.nav-open .nav-panel{ transform:translateX(0); }
body.nav-open{ overflow:hidden; }
.nav-panel__links{ padding:96px 32px 24px; flex:1; }
.nav-panel__links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--border);
  font-family:var(--font-body); font-size:20px;
}
.nav-panel__footer{ padding:24px 32px 40px; border-top:1px solid var(--border); }
.nav-panel__footer a{ display:inline-block; padding:6px 0; font-size:14px; text-transform:uppercase; letter-spacing:.7px; }
.nav-close{ position:absolute; top:24px; right:24px; background:none; border:none; font-size:28px; line-height:1; color:var(--brown); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; height:100vh; min-height:560px; overflow:hidden; background:var(--dark); }
.hero-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15) 40%, rgba(0,0,0,.35)); }
.hero__content{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; text-align:center; color:var(--cream);
  padding:100px 24px 120px; gap:24px; max-width:820px; margin:0 auto;
}
.hero__content .subheading{ opacity:.9; }
.hero__content .body-text{ color:var(--muted-cream); max-width:640px; }

/* ==========================================================================
   Every Detail section
   ========================================================================== */
.detail{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.detail__text > * + *{ margin-top:20px; }
.detail__image{ overflow:hidden; }
.detail__image img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:809px){ .detail{ grid-template-columns:1fr; gap:32px; } }

.full-image img{ width:100%; height:auto; display:block; }

/* ==========================================================================
   Carousels (itinéraires / destinations)
   ========================================================================== */
.carousel-head{ text-align:center; max-width:680px; margin:0 auto 40px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.carousel-head .body-text{ text-align:center; }
.carousel-wrap{ position:relative; }
.carousel{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 24px 8px; margin:0 -24px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.card{ flex:0 0 320px; scroll-snap-align:start; display:flex; flex-direction:column; }
.card__img{ aspect-ratio:4/3; overflow:hidden; margin-bottom:16px; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__img img{ transform:scale(1.04); }
.card__body{ display:flex; flex-direction:column; gap:8px; flex:1; }
.card__title{ margin:2px 0 4px; }
.card__desc{ flex:1; }
.card .btn{ align-self:flex-start; margin-top:16px; padding:12px 20px; }
.carousel-nav{ display:flex; justify-content:center; gap:12px; margin-top:32px; }
.carousel-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:transparent; display:flex; align-items:center; justify-content:center;
}
.carousel-nav button img{ width:16px; height:16px; }
.section--dark .carousel-nav button{ border-color:var(--border-dark); }
.section--dark .carousel-nav button img{ filter:invert(1); }

/* ==========================================================================
   CTA banners (blur over image)
   ========================================================================== */
.cta-banner{ position:relative; overflow:hidden; min-height:440px; display:flex; align-items:center; justify-content:center; }
.cta-banner__bg{ position:absolute; inset:0; }
.cta-banner__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-banner__blur{
  position:relative; z-index:1; width:100%; max-width:560px; margin:40px;
  padding:56px 40px; text-align:center; color:var(--cream);
  background:rgba(0,0,0,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.cta-banner--flat .cta-banner__blur{ background:var(--dark); backdrop-filter:none; }
.monogram{ width:56px; height:56px; }
.cta-banner__blur .body-text{ color:var(--muted-cream); }

/* ==========================================================================
   Private Jet Safaris
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split__image img{ width:100%; height:100%; object-fit:cover; }
.split__text{ display:flex; flex-direction:column; justify-content:center; gap:20px; padding:64px; }
@media (max-width:809px){
  .split{ grid-template-columns:1fr; }
  .split__image{ aspect-ratio:4/3; }
  .split__text{ padding:40px 24px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ text-align:center; }
.testimonials h2{ margin-bottom:40px; }
.testi-slider{ position:relative; max-width:840px; margin:0 auto; min-height:220px; }
.testi-slide{ display:none; flex-direction:column; gap:24px; align-items:center; }
.testi-slide.is-active{ display:flex; }
.testi-slide q, .testi-slide .quote{ font-family:var(--font-display); font-weight:200; font-size:clamp(20px,3vw,26px); line-height:1.3; color:var(--cream); quotes:none; }
.testi-slide cite{ font-style:normal; font-family:var(--font-label); font-size:12px; letter-spacing:1.2px; text-transform:capitalize; color:var(--cream); opacity:.8; }
.testi-nav{ display:flex; justify-content:center; gap:16px; margin-top:32px; }
.testi-nav button{ background:none; border:none; padding:8px; }
.testi-nav button img{ width:32px; height:32px; filter: brightness(0) invert(1); }

/* ==========================================================================
   Planning guides
   ========================================================================== */
.posts{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; }
.post-featured{ position:relative; display:block; overflow:hidden; min-height:320px; }
.post-featured img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.post-featured__text{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:32px; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 60%); color:var(--cream); }
.post-featured__text .desc-sm{ color:var(--muted-cream); }
.post-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.post-card{ display:flex; flex-direction:column; gap:8px; }
.post-card__img{ aspect-ratio:2/3; overflow:hidden; margin-bottom:8px; }
.post-card__img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:1023px){
  .posts{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--dark); color:var(--footer-link); }
.site-footer .container{ padding-top:64px; padding-bottom:32px; }
.awwwards-badge{ display:flex; justify-content:flex-end; }
.awwwards-badge img{ width:44px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding:40px 0; }
.footer-col h4{ font-family:var(--font-body); font-weight:300; font-size:14px; letter-spacing:.7px; text-transform:uppercase; color:var(--cream); margin-bottom:20px; }
.footer-col a{ display:block; padding:10px 0; border-bottom:1px solid rgba(88,80,60,0); font-size:14px; letter-spacing:.64px; color:#fbf9f3; }
.footer-col a:hover{ color:var(--cream); }
.footer-contact{ display:inline-flex; margin-top:12px; padding:14px 24px; border:1px solid rgba(162,176,170,.6); font-family:var(--font-label); font-size:12px; letter-spacing:1.2px; color:var(--footer-link); }
.social-list a{ display:flex; align-items:center; gap:10px; }
.social-list img{ width:16px; height:16px; filter:brightness(0) invert(1) opacity(.7); }
.newsletter-form{ display:flex; border-bottom:1px solid rgba(255,255,255,.3); margin-top:8px; }
.newsletter-form input{
  flex:1; background:none; border:none; padding:10px 0; color:var(--cream);
  font-family:var(--font-body); font-size:14px;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.6); }
.newsletter-form button{ background:none; border:none; color:rgba(255,255,255,.7); font-family:var(--font-label); font-size:13px; letter-spacing:1px; padding:0 4px; }
.newsletter-note{ font-size:12px; margin-top:8px; min-height:16px; color:var(--cream); }
.awards-row{ display:flex; gap:16px; margin-top:20px; }
.awards-row img{ width:56px; }
.footer-partners{ border-top:1px solid rgba(255,255,255,.12); padding:40px 0; text-align:center; }
.footer-partners h4{ font-family:var(--font-body); font-weight:300; font-size:14px; letter-spacing:.7px; text-transform:uppercase; color:var(--cream); margin-bottom:28px; }
.partner-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:36px; }
.partner-grid img{ height:32px; width:auto; filter:brightness(0) invert(1) opacity(.55); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:32px; }
.footer-bottom img{ width:100%; max-width:640px; margin:0 auto 24px; opacity:.9; }
.footer-legal{ display:flex; justify-content:space-between; gap:16px; font-size:10px; letter-spacing:.7px; color:var(--footer-copy); flex-wrap:wrap; }
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
  .awwwards-badge{ justify-content:flex-start; }
}

/* utility */
.center{ text-align:center; }


/* ==========================================================================
   Pages légales (Legal Notice, Privacy Policy, Cookie Policy...)
   ========================================================================== */
   .legal-page{ padding-top:140px; }
   .legal-content{ max-width:760px; }
   .legal-content .label-sm{ color:var(--brown-muted); margin-bottom:12px; }
   .legal-content h1{ margin-bottom:24px; }
   .legal-intro{ padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--border); }
   .legal-body section{ padding:28px 0; border-bottom:1px solid var(--border); }
   .legal-body section:last-child{ border-bottom:none; }
   .legal-body h2{ margin-bottom:12px; }
   .legal-link{ text-decoration:underline; text-underline-offset:3px; }
   .legal-link:hover{ opacity:.7; }
   @media (max-width:809px){
     .legal-page{ padding-top:100px; }
   }