@import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Space+Grotesk:wght@300..700&display=swap');
  
// <weight>: Use a value from 300 to 700
// <uniquifier>: Use a unique and descriptive class name

.space-grotesk-300 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}


.space-grotesk-500 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


.space-grotesk-700 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.marck-script-regular {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-style: normal;
}


/* --- CONFIGURATION GÉNÉRALE --- */
:root {
  --primary-color: #ff8c00;
  --secondary-color: #333;
  
  /* HEADER & FOOTER */
  --header-bg: #ffac04;
  --header-text: #222;
  --footer-bg: #ffac04; 
  --footer-text: #1a1a1a;
  --footer-heading: #000;
  
  --light-bg: #f9f9f9;
  --text-color: #444;
  --white: #ffffff;
  
  --google-blue: #4285F4;
  --facebook-blue: #1877F2;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  
}

/* --- LOADER --- */
#loader-wrapper {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--white); z-index: 9999;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.speedometer { width: 120px; height: 60px; position: relative; overflow: hidden; margin-bottom: 15px; }
.speedometer-arch { width: 120px; height: 120px; border: 8px solid #ddd; border-top-color: var(--secondary-color); border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; left: 0; }
.speedometer-needle { width: 4px; height: 50px; background: var(--primary-color); position: absolute; bottom: 0; left: 50%; margin-left: -2px; transform-origin: bottom center; transform: rotate(-90deg); animation: rev-engine 1.5s ease-in-out infinite; border-radius: 4px; }
.speedometer-hub { width: 14px; height: 7px; background: var(--secondary-color); position: absolute; bottom: 0; left: 50%; margin-left: -7px; border-radius: 10px 10px 0 0; }
.loader-text { font-weight: bold; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; }
.loader-hidden { opacity: 0; visibility: hidden; }
@keyframes rev-engine { 0% { transform: rotate(-80deg); } 30% { transform: rotate(-20deg); } 50% { transform: rotate(-40deg); } 80% { transform: rotate(80deg); } 100% { transform: rotate(-80deg); } }

h1, h2, h3 { color: var(--secondary-color); margin-bottom: 1rem; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { scroll-margin-top: 80px; }

.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
}
.btn:hover { background-color: #e07b00; }

/* --- HEADER & NAVIGATION --- */
header {
  background-image: linear-gradient(to right bottom, #ff8400, #ff8d00, #ff9600, #ff9e00, #ffa700);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 1000; padding: 15px 0;
}
nav { display: flex; justify-content: space-between; align-items: center; position: relative; }
.logo { font-size: 1.5rem; font-weight: bold; color: var(--header-text); text-transform: uppercase; z-index: 1001; }
.logo span { color: #fff; }
.nav-links { display: flex; align-items: center; }
.nav-links a { margin-left: 20px; text-decoration: none; color: var(--header-text); font-weight: 600; transition: color 0.3s; }
.nav-links a:hover { color: var(--white); }
.hamburger { display: none; cursor: pointer; z-index: 1001; }
.hamburger div { width: 25px; height: 3px; background-color: var(--header-text); margin: 5px; transition: all 0.3s ease; }

.logo-highlight {
  position: relative;
  animation: softBlink 3.5s ease-in-out infinite;
}

@keyframes softBlink {
  0%, 100% {
  opacity: 1;
  }
  50% {
  opacity: 0.6;
  }
}



/* ==================================================
   SLIDER CONTAINER
================================================== */
.slider-container {
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  background: #000;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 768px) {
  .slider-container {
  
  }
}

/* ==================================================
   VIDEO BACKGROUND (FIXE)
================================================== */
.slider-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.08);
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.7);
  will-change: transform;
}

/* ==================================================
   LOGO GLOBAL (DESCENTE DE 50px APRES LOADER)
================================================== */
.slider-logo-global {
  position: absolute;
  top: calc(18% - 50px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 220px;
  width: 100%;
  z-index: 3;
  opacity: 0;
}

/* Animation déclenchée UNIQUEMENT après le loader */
body.slider-ready .slider-logo-global {
  animation: logoDrop 2.8s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes logoDrop {
  from {
  opacity: 0;
  transform: translate(-50%, -50px);
  }
  to {
  opacity: 1;
  transform: translate(-50%, 0);
  }
}

@media (max-width: 768px) {
  .slider-logo-global {
  top: calc(27% - 40px);
  max-width: 175px;
  }

  @keyframes logoDrop {
  from {
    opacity: 0;
    transform: translate(-50%, -40px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  }
}

/* ==================================================
   H1 FIXE (AU-DESSUS DU TEXTE ANIMÉ)
================================================== */
.slider-title {
  position: absolute;
  left: 50%;
  bottom: 48%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  width: 100%;
}

.slider-title h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(10px);
}

/* H1 apparaît 300 ms après le logo */
body.slider-ready .slider-title h1 {
  animation: h1Reveal 1.2s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay: 0.3s;
}

@keyframes h1Reveal {
  to {
  opacity: 1;
  transform: translateY(0);
  }
}


@media (max-width: 768px) {
  .slider-title {
  bottom: 48%;
  }

  .slider-title h1 {
  font-size: 2rem;
  }

  
}


/* ==================================================
   SLIDES (CONTENANT UNIQUEMENT LE TEXTE p)
================================================== */

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.slide-content {
  position: absolute;
  bottom: 40%;
}


/* ==================================================
   TEXTE SLIDE – TRAVERSEE COMPLETE DE L’ECRAN
================================================== */

/* État initial */
.slide-content p {
  font-family: 'Marck Script', cursive;
  font-size: 1.6rem;
  color: #fff;
  opacity: 0;
  transform: translateX(-100vw);
  transition:
  transform 1.2s cubic-bezier(.2,.9,.3,1),
  opacity 0.6s ease;
  white-space: nowrap;
}

body.slider-ready .slide.active .slide-content p {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s; /* 300 ms après H1 */
}

body.slider-ready .slide.is-leaving .slide-content p {
  opacity: 0;
  transform: translateX(100vw);
  transition-delay: 0s;
}


/* entrée plus nerveuse */
.slide.active .slide-content p {
  transition-timing-function: cubic-bezier(.15,.9,.3,1);
}

/* sortie plus douce */
.slide.is-leaving .slide-content p {
  transition-timing-function: cubic-bezier(.3,0,.2,1);
}



@media (max-width: 768px) {
  .slide-content p {
  font-size: 1.6rem;
  transition:
    transform 1s cubic-bezier(.2,.9,.3,1),
    opacity 0.6s ease;
  }
}


/* ==================================================
   INDICATEUR DE SCROLL (OPTIONNEL)
================================================== */
.scroll-indicator {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  animation: scrollPulse 2s ease-in-out infinite;
  z-index: 3;
}

@keyframes scrollPulse {
  0%, 100% {
  opacity: 0.4;
  transform: translate(-50%, 0);
  }
  50% {
  opacity: 1;
  transform: translate(-50%, -6px);
  }
}


/* Boutons de slider supprimés du CSS car supprimés du HTML */

/* --- SECTIONS COMMUNES --- */
.section-padding { padding: 80px 0 50px 0; }
.bg-light { background-color: var(--light-bg); }

/* --- CARTE VÉHICULE --- */
.vehicles-grid {  margin-top: 40px; }
.vehicle-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s; display: flex; flex-direction: column;  margin-bottom: 2em;}
.vehicle-card  h3 { text-align: left; }
.vehicle-card:hover { transform: translateY(-5px); }
.vehicle-top-wrapper { display: flex; flex-direction: row; width: 100%; }
.vehicle-img { width: 100%; aspect-ratio: 9/16; object-fit: cover; background-color: #ddd; margin-left: -2em;  }
.vehicle-info { width: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: justify; text-align: justify; }

.vehicle-infoPlus {
  
  margin: 0;
  height: 100%;
  width: 106%;
  
  
}

.gradientMoveMoke { 
  
  background: linear-gradient(270deg, #dc4600, #ff7100, #ff9000);
  background-size: 600% 600%;
  animation: gradientMove 15s ease infinite;
  color: white;
  
}


.gradientMoveEden { 
  
  background: linear-gradient(270deg, #f4c700, #ffac04, #e5c805);
  background-size: 600% 600%;
  animation: gradientMove 10s ease infinite;
  color: white;
  
}

.gradientMoveKirghiz { 
  
  background: linear-gradient(270deg, #ff6d00, #ffac04, #d15000);
  background-size: 600% 600%;
  animation: gradientMove 10s ease infinite;
  color: white;
  
}

.gradientMoveLight { 
  
  background: linear-gradient(270deg, #f8f9fa, #fbd284, #ffa700);
  background-size: 600% 600%;
  animation: gradientMove 10s ease infinite;
  
  
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.Accroche { font-size: 2em; line-height: 1em; text-align: left; }
 
.infos { width: 100%; }

/* DETAIL ACCORDION */
.vehicle-detail { width: 100%; padding: 20px 30px; background-color: #f8f8f8; border-top: 1px solid #eee; font-size: 0.95rem; color: #555; text-align: justify; box-sizing: border-box; }
.detail-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; opacity: 0; transition: max-height 0.5s ease-out, opacity 0.3s ease; }
.detail-content.open { opacity: 1; }
.detail-content p { margin-bottom: 15px; }
.btn-accordion { background: none; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 8px 20px; font-weight: bold; border-radius: 20px; cursor: pointer; margin: 15px auto 0; display: block; transition: all 0.3s ease; font-size: 0.9rem; text-transform: uppercase; }
.btn-accordion:hover { background-color: var(--primary-color); color: white; }

.specs-list { list-style: none; padding: 0; margin: 20px 0; }
.specs-list li { margin-bottom: 8px; padding-left: 20px; position: relative; }
.specs-list li::before { content: "⚡"; position: absolute; left: 0; color: var(--primary-color); }
#Kirghiz .specs-list li::before { content: "·"; position: absolute; left: 0; color: var(--primary-color); }
.badge { background-color: var(--primary-color); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; text-transform: uppercase; }

/* AVIS CLIENTS */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.review-card { background: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: relative; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.review-stars { color: #f4c150; }
.review-source { font-weight: bold; font-size: 0.8rem; padding: 3px 8px; border-radius: 4px; color: white; }
.source-google { background-color: var(--google-blue); }
.source-facebook { background-color: var(--facebook-blue); }
.review-text { font-style: italic; color: #555; }
.review-author { margin-top: 15px; font-weight: bold; text-align: right; }

/* TABLES & FORMS */
.pricing-table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05); }
.pricing-table th, .pricing-table td { padding: 15px; text-align: center; border-bottom: 1px solid #fee2c8; }
.pricing-table th { background-color: var(--secondary-color); color: var(--white); }
.pricing-table tr:nth-child(even) { background-color: var(--light-bg); }
.pricing-table tr:nth-child(2n) { background-color: #f4efe0; }
.pricing-note { font-size: 0.9rem; color: #777; margin-top: 15px; text-align: center; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; text-align: left; }
.delivery-grid h3 { width: 100%; text-align: center; }
.delivery-box { background: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px;  }
.event-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); text-align: center; }
.event-card p { width: 60%; margin: auto; font-size: 1.4em; }
.event-../images { width: 100%; height: 200px; object-fit: cover; }
.event-content { padding: 20px; background: #f4efe0; border: 1px solid white; }
.event-content h3 { color: #7494a8; text-shadow: 1px 1px 1px #fff; }

.contact-form-container { max-width: 600px; margin: 0 auto; background: var(--white); padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label, .form-label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--secondary-color); }
.form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; box-sizing: border-box; font-family: inherit; }
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1); }
textarea.form-control { resize: vertical; min-height: 120px; }
.submit-btn, .monSubmit { width: 100%; padding: 15px; font-size: 1.1rem; margin-top: 10px; }


.ferretForet {
  position: relative;
  background-image: url("../images/Ferret-foret-lvQGClJ.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
  background-position: bottom;
}

.ferretForet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  z-index: 0;
}

.ferretForet > * {
  position: relative;
  z-index: 1;
}

.events {
  position: relative;
  background-image: url("../images/events-0a7t0eV.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
 text-align: center;
}

.events::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  z-index: 0;
}

.events p { width: 70%; text-align: center; margin: auto; }

.events  > * {
  position: relative;
  z-index: 1;
}



.ferretB {
  position: relative;
  background-image: url("../images/Ferret-ZY2YR9-.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
  background-position: bottom;
}

.ferretB::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  z-index: 0;
}

.ferretB > * {
  position: relative;
  z-index: 1;
}				


   .footerB {
   position: absolute;
   inset: 0;
   background-image: url("../images/footer-sHQhFQ9.webp");
   background-size: cover;
   background-position: center bottom;
   z-index: 0;
   opacity: 0.6;
   mix-blend-mode: luminosity;
   }

   

   


/* FOOTER */
footer {  background-image: linear-gradient(to right bottom, #ff8400, #ff8d00, #ff9600, #ff9e00, #ffa700); color: var(--footer-text); padding: 60px 0 20px; font-size: 0.95rem;  position: relative;
    overflow: hidden; }
footer > .container {
   position: relative;
   z-index: 1;
   }


.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h4 { color: var(--footer-heading); font-size: 1.2rem; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: var(--footer-text); text-decoration: none; transition: all 0.3s ease; display: inline-block; }
.footer-col ul li a:hover { color: var(--white); transform: translateX(5px); }
.social-mini-icons { display: flex; gap: 15px; margin-top: 20px; }
.social-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; color: white; transition: transform 0.3s, background 0.3s; }
.social-icon-btn:hover { background: rgba(255,255,255,0.4); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 30px; text-align: center; font-size: 0.8rem; opacity: 0.8; margin-top: 20px; }
.footer-bottom a { color: inherit; text-decoration: none; font-weight: bold; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
  .vehicles-grid { }
  .vehicle-../images { width: 116%; }
}

@media (max-width: 768px) {

  .delivery-grid { grid-template-columns: 1fr; }
  .footer-grid { text-align: center; gap: 50px; }
  .social-mini-icons { justify-content: center; }
  .logo { margin: 0 auto; }
  
  .hamburger { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; width: 100%;
    background-color: var(--header-bg); flex-direction: column;
    align-items: center; padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    transform: translateY(-150%); opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease; z-index: 999;
  }
  .nav-links.active { transform: translateY(0); opacity: 1; }
  .nav-links a { margin: 15px 0; font-size: 1.2rem; }
  .hamburger.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
  .hamburger.toggle .line2 { opacity: 0; }
  .hamburger.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

  .vehicle-top-wrapper { flex-direction: column; }
  
  .vehicle-info { width: 100%; }
  .vehicle-infoPlus { width: 112%; margin-left: -6%; }
  
  .event-card p { width: 80%; margin: auto; font-size: 1.4em; }
   

  
}


i[class^="ri-"] {
  transition: transform 0.25s ease, color 0.25s ease;
}

i[class^="ri-"]:hover {
  transform: translateY(-2px);
  color: #fff;
}