/* =========================================================
   Go Explore — Design System partagé & Animations Awwwards
   (Évolution moderne de TerraAfrika)
   ========================================================= */

:root{
  --forest-950:#0d2616;
  --forest-900:#1a3d25;
  --forest-800:#1e482b;
  --forest-700:#245934;
  --forest-600:#2d7040;
  --forest-500:#3d8b52;
  --forest-100:#dceee0;
  --forest-50:#f0f7f1;
  --sand-200:#f2e8d4;
  --sand-300:#e8d5b5;
  --sand-400:#d9bc8e;
  --sand-500:#cda46e;
  --gold-500:#d4af37;
  --cream:#faf8f4;
  --ink:#0d2616;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background-color: var(--cream);
  color: #1a2e1d;
  overflow-x: hidden;
}

.font-serif{ font-family:'Playfair Display',Georgia,serif; }

::selection{ background:var(--forest-800); color:var(--sand-200); }

:focus-visible{
  outline:2px solid var(--forest-600);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#f1ede0; }
::-webkit-scrollbar-thumb{ background:#cfc7ae; border-radius:99px; border:2px solid #f1ede0; }
::-webkit-scrollbar-thumb:hover{ background:var(--forest-700); }

/* =========================================================
   NOUVELLE EXPÉRIENCE D'OUVERTURE (Intro Animation Voyage)
   ========================================================= */
#ge-intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at center, #1a3d25 0%, #0d2616 80%, #07150c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  pointer-events: auto;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;
}

#ge-intro-curtain.hide {
  transform: translateY(-100%);
  pointer-events: none;
}

.intro-map-route {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawRoute 1.8s var(--ease-out) forwards 0.2s;
}

@keyframes drawRoute {
  to { stroke-dashoffset: 0; }
}

.intro-pin {
  opacity: 0;
  transform: scale(0.5);
  animation: popPin 0.6s var(--ease-out) forwards 1.2s;
}

@keyframes popPin {
  to { opacity: 1; transform: scale(1); }
}

.intro-pulse {
  animation: introPulse 2s infinite ease-out;
}

@keyframes introPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* =========================================================
   PAGE TRANSITIONS (Awwwards Style)
   ========================================================= */
.page-transition-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0d2616;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.45s var(--ease-out);
}
.page-transition-wipe.active {
  transform: translateY(0);
}
.page-transition-wipe.exit {
  transform: translateY(-100%);
}

/* ---------- Effet brillance sur boutons ---------- */
.shine{ position:relative; overflow:hidden; }
.shine::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .8s ease;
}
.shine:hover::before{ transform:translateX(120%); }

/* ---------- Cartes ---------- */
.card-hover{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.card-hover:hover{ transform:translateY(-5px); box-shadow:0 20px 50px -12px rgba(13,38,22,.15); }

.zoom-img{ transition:transform .8s var(--ease); }
.group:hover .zoom-img{ transform:scale(1.08); }

.card-glow{ position:relative; }
.card-glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(45,112,64,.35); transition:box-shadow .5s var(--ease);
}
.card-glow:hover::after{ box-shadow:0 0 0 4px rgba(45,112,64,.10); }

/* ---------- Navigation ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; bottom:2px; left:50%;
  width:0; height:2px; border-radius:2px; background:var(--forest-800);
  transition:all .3s ease; transform:translateX(-50%);
}
.nav-link:hover::after{ width:60%; }

/* ---------- Animations d'entrée ---------- */
.fade-up{ opacity:0; transform:translateY(24px); animation:fadeUp .9s var(--ease) forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

.fade-in{ opacity:0; animation:fadeIn .8s var(--ease) forwards; }
@keyframes fadeIn{ to{ opacity:1; } }

.badge-pulse{ animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.85);} }

.bob{ animation:bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

.marquee-track{ animation:marquee 38s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.cta-gradient{ background:linear-gradient(135deg,#1a3d25 0%,#0d2616 55%,#1e482b 100%); }

/* ---------- Révélation au scroll ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  #ge-intro-curtain{ display:none !important; }
}

/* ---------- Champs de formulaire ---------- */
.field{
  width:100%; background:#fff; border:1px solid #e5e0d2; border-radius:.9rem;
  padding:.85rem 1.1rem; font-size:.875rem; color:var(--forest-950);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field::placeholder{ color:#a8a08a; }
.field:hover{ border-color:#cfc7ae; }
.field:focus{ outline:none; border-color:var(--forest-600); box-shadow:0 0 0 4px rgba(45,112,64,.10); }
.field[readonly]{ background:#f7f5ee; }
label.lbl{ display:block; font-size:.72rem; font-weight:700; color:var(--forest-950); margin-bottom:.4rem; letter-spacing:.01em; }

/* ---------- Onglets ---------- */
.tab-btn{ position:relative; transition:color .3s ease; }
.tab-btn.active{ color:var(--forest-950); font-weight:700; }
.tab-btn.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--forest-800); border-radius:2px;
}

/* ---------- Pastilles & Badges financiers / statuts ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:700; padding:.32rem .75rem; border-radius:99px;
  letter-spacing:.02em;
}
.chip-success{ background:#eaf7ee; color:#1e6c38; border:1px solid #c0e7cc; }
.chip-warning{ background:#fef8e7; color:#9c6307; border:1px solid #fde4a9; }
.chip-danger{ background:#fdf2f0; color:#b23522; border:1px solid #fad0c8; }
.chip-info{ background:#eef6fc; color:#1a649a; border:1px solid #cbe4f7; }
.chip-neutral{ background:#f4f1e8; color:#5c5647; border:1px solid #e6dec9; }

/* ---------- Sidebar espace guide & admin ---------- */
.side-link{
  display:flex; align-items:center; gap:.85rem;
  padding:.72rem 1rem; border-radius:.9rem;
  font-size:.86rem; font-weight:500; color:#5f6b5f;
  transition:all .3s var(--ease); position:relative;
}
.side-link:hover{ background:#f2efe4; color:var(--forest-950); transform:translateX(3px); }
.side-link.active{
  background:var(--forest-900); color:#fff; font-weight:600;
  box-shadow:0 10px 24px -10px rgba(13,38,22,.5);
}
.side-link.active .side-ico{ color:var(--sand-300); }

.admin-side-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .95rem; border-radius:.85rem;
  font-size:.84rem; font-weight:600; color:#4a594d;
  transition:all .25s var(--ease);
}
.admin-side-link:hover {
  background:#edf3ee; color:var(--forest-950); transform:translateX(2px);
}
.admin-side-link.active {
  background:var(--forest-950); color:#f2e8d4; font-weight:700;
  box-shadow:0 8px 20px -8px rgba(13,38,22,.6);
}

/* ---------- Statistiques ---------- */
.stat-ico{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  transition:transform .4s var(--ease);
}
.group:hover .stat-ico{ transform:scale(1.08) rotate(-4deg); }

/* ---------- Barre de progression ---------- */
.bar{ height:7px; border-radius:99px; background:#efeade; overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--forest-700),var(--forest-500)); transition:width 1.1s var(--ease); }

/* ---------- Calendrier & Timeline de Disponibilités ---------- */
.cal-day{
  aspect-ratio:1/1; display:grid; place-items:center; border-radius:.7rem;
  font-size:.8rem; font-weight:600; color:#3f4a3f; cursor:pointer; position:relative;
  transition:all .22s var(--ease); border:1px solid transparent;
}
.cal-day:hover{ background:#f2efe4; transform:scale(1.05); }
.cal-day.out{ color:#cfd3cb; pointer-events:none; }
.cal-day.sel{ background:var(--forest-900); color:#fff; box-shadow:0 8px 18px -8px rgba(13,38,22,.6); }
.cal-day.available{ background:#eaf7ee; color:#1e6c38; border-color:#c0e7cc; }
.cal-day.booked{ background:#fdf2e9; color:#a04a14; border-color:#f8d1b3; }
.cal-day.booked::after{ content:''; position:absolute; bottom:5px; width:4px; height:4px; border-radius:99px; background:#c0563f; }
.cal-day.blocked{ background:#f1ede9; color:#968c85; cursor:not-allowed; text-decoration:line-through; }

/* Timeline agenda slots */
.slot-badge{
  font-size:.7rem; font-weight:700; padding:.35rem .65rem; border-radius:.6rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.slot-available{ background:#eaf7ee; color:#1b6333; border:1px solid #bce6c9; }
.slot-booked{ background:#fff3e6; color:#9e4f0a; border:1px solid #fcdbb7; }
.slot-blocked{ background:#f3f0ea; color:#7d7469; border:1px solid #e4ded3; }

/* ---------- Étoiles ---------- */
.stars{ letter-spacing:2px; }

/* ---------- Toast ---------- */
#ta-toast-host{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:99999; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; }
.ta-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:.7rem; min-width:270px; max-width:400px;
  background:#0d2616; color:#f2e8d4; padding:.85rem 1.15rem; border-radius:1rem;
  font-size:.825rem; font-weight:600; box-shadow:0 20px 40px -14px rgba(0,0,0,.5);
  animation:toastIn .45s var(--ease);
}
.ta-toast.out{ animation:toastOut .35s var(--ease) forwards; }
.ta-toast.ok{ background:#1a3d25; border:1px solid rgba(217,188,142,.3); }
.ta-toast.ko{ background:#7a2f1f; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(16px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px) scale(.97);} }

/* ---------- Modale ---------- */
.modal-back{ position:fixed; inset:0; z-index:9999; background:rgba(13,38,22,.55); backdrop-filter:blur(8px); display:grid; place-items:center; padding:1.25rem; animation:fadeIn .3s ease; }
.modal-card{ animation:modalIn .45s var(--ease); max-height:calc(100vh - 2.5rem); overflow-y:auto; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.96);} to{ opacity:1; transform:none;} }

/* ---------- Menu mobile ---------- */
#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
#mobile-menu.open{ max-height:640px; }

/* ---------- Skeleton / shimmer ---------- */
.shimmer{ position:relative; overflow:hidden; background:#efeade; }
.shimmer::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%); animation:shim 1.4s infinite;
}
@keyframes shim{ to{ transform:translateX(100%);} }

/* ---------- Impression ---------- */
@media print{
  nav,.no-print{ display:none !important; }
  body{ background:#fff; }
}