@charset "UTF-8";



/* Design tokens */

:root {

  --terracotta: #C4704F;

  --sage: #8B9A7A;

  --cream: #F5F1EB;

  --charcoal: #2C2C2C;

  --off-white: #FEFCF8;

  --paper: #F5F1EB;

  --ink: #161616;

  --pink: #FE1414;

  --lime: #CFF7A1;

  --grey: #2B2B2B;

}

/* Base */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  margin: 0 !important;

  padding: 0 !important;

  overflow-x: hidden;

  scrollbar-gutter: stable;

}



body {

  margin: 0 !important;

  padding: 0 !important;

  overflow-x: hidden;

  overflow-y: scroll;

}



/* FORCE: Menu mobile caché par défaut - PRIORITÉ ABSOLUE */

.mobile-menu-overlay {

  display: none !important;

}



.mobile-menu-overlay.active {

  display: block !important;

}



/* Sur desktop (>= 1024px), TOUJOURS caché même avec .active */

@media (min-width: 1024px) {

  .mobile-menu-overlay,

  .mobile-menu-overlay.active {

    display: none !important;

  }

  

  .mobile-menu-toggle {

    display: none !important;

  }

}



html, body { 

  height: 100%; 

  scroll-behavior: smooth;

}



body { 

  background: var(--paper); 

  color: var(--ink); 

  font-family: 'Inter', sans-serif;

  line-height: 1.6;

  /* Compenser topbar (40px) + header (~70px) = ~110px */

  padding-top: 110px !important;

}



/* Responsive padding-top pour mobile */

@media (max-width: 768px) {

  /* Cacher la topbar sur mobile */

  .topbar {

    display: none !important;

  }

  

  /* Ajuster le header pour qu'il soit en haut */

  .header-sticky {

    top: 0 !important;

  }

  

  body {

    padding-top: 80px !important;

  }

}



@media (max-width: 639px) {

  /* Cacher la topbar sur mobile */

  .topbar {

    display: none !important;

  }

  

  /* Ajuster le header pour qu'il soit en haut */

  .header-sticky {

    top: 0 !important;

  }

  

  body {

    padding-top: 70px !important;

  }

}



/* Shell / window */

.shell { 

  background: var(--paper); 

  min-height: 100vh; 

  overflow-x: hidden;

  margin: 0 !important;

  padding: 0 !important;

  position: relative;

}



.container { 

  max-width: 1600px; 

  margin: 0 auto;

  padding-left: 1.5rem;

  padding-right: 1.5rem;

}



.topbar { 

  height: 40px; 

  background: #1f1f1f; 

  color: #fff;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  margin: 0 !important;

  padding: 0 !important;

  z-index: 2000;

}



/* Type and logo */

.brand-display { 

  font-family: 'Anton', sans-serif; 

  letter-spacing: .5px; 

}



.logo-sticker { 

  transform: rotate(-8deg); 

  text-shadow: 0 2px 0 #0002; 

}



/* Header Sticky au Scroll */

.header-sticky {

  position: fixed;

  top: 40px;

  left: 0;

  right: 0;

  z-index: 1500;

  background: var(--paper);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  width: 99%;

}



/* Note: desktop/mobile nav visibility is controlled by media queries below */



.header-sticky.scrolled {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);

  border-bottom: 2px solid #111;

  padding-top: 0.75rem !important;

  padding-bottom: 0.75rem !important;

  animation: slideDownHeader 0.4s ease-out;

  z-index: 2000;

}



@keyframes slideDownHeader {

  from {

    transform: translateY(-100%);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}



.header-sticky.scrolled .logo-sticker {

  font-size: 1.5rem !important;

  transition: font-size 0.3s ease;

}



@media (max-width: 768px) {

  .header-sticky.scrolled {

    padding-top: 0.5rem !important;

    padding-bottom: 0.5rem !important;

  }

  

  .header-sticky.scrolled .logo-sticker {

    font-size: 1.25rem !important;

  }

}



/* Navigation */

.nav-link {

  position: relative;

  transition: all 0.3s ease;

  font-size: 1.1rem;

  font-weight: 600;

  padding: 0.5rem 0;

}



.nav-link.active {

  color: var(--terracotta);

}



.nav-link.active::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  right: 0;

  height: 2px;

  background: var(--terracotta);

  border-radius: 1px;

}



.nav-link:hover {

  color: var(--terracotta);

}



/* Dropdown evenements */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-dropdown-toggle i {
  font-size: 0.75rem;
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1200;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-submenu a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.2s ease;
}

.nav-submenu a:hover {
  background: var(--cream);
  color: var(--terracotta);
}

/* Sous-menu mobile */
.mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.2rem 0 0.4rem 2.5rem;
}

.mobile-sub-link {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.mobile-sub-link:hover {
  color: var(--terracotta);
  opacity: 1;
}

/* Components */
.btn-cta { 

  background: var(--pink); 

  border: 2px solid #111; 

  border-radius: 999px; 

  padding: .6rem 1rem; 

  font-weight: 600; 

  transition: transform .15s ease, box-shadow .2s ease; 

  box-shadow: 0 4px 0 #111; 

  color: white;

  text-decoration: none;

  display: inline-block;

}



.btn-cta:hover { 

  transform: translateY(-1px); 

  box-shadow: 0 6px 0 #111; 

  color: white;

}



.btn-primary { 

  background: linear-gradient(135deg, var(--terracotta), #D4855F); 

  color: #fff; 

  border-radius: 999px; 

  transition: all .2s ease; 

  box-shadow: 0 6px 18px rgba(196,112,79,.35); 

  display: inline-block;

  padding: 1rem 2rem;

  font-weight: 600;

  text-decoration: none;

}



.btn-primary:hover { 

  transform: translateY(-1px); 

  box-shadow: 0 10px 28px rgba(196,112,79,.45); 

  color: white;

}



.btn-ghost { 
  background: #fff; 
  border: 2px solid #111; 
  color: #111; 
  border-radius: 999px;
  padding: 1rem 2rem;

  font-weight: 600;

  text-decoration: none;

  display: inline-block;

  transition: all 0.3s ease;

}



.btn-ghost:hover {
  background: #f9f9f9;
  transform: translateY(-1px);
  color: #111;
}


.btn-card { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border: 2px solid #111; 
  border-radius: 16px; 
  padding: 16px 18px; 
  background: #fff; 
  font-weight: 800; 
  box-shadow: 0 6px 0 #111; 
  transition: transform .15s ease, box-shadow .2s ease; 
  text-decoration: none;
  color: #111;
  text-align: center;
  min-height: 60px;
}


.btn-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 0 #111; 
  color: #111;
}


.hero-title { 

  font-size: clamp(42px, 8vw, 124px); 

  line-height: .9; 

}



.pill { 

  background: #E78341; 

  color: #fff; 

  border-radius: 999px; 

  border: 2px solid #111; 

}



.badge-circle { 

  width: 58px; 

  height: 58px; 

  border-radius: 999px; 

  border: 2px solid #111; 

  background: #E78341; 

  display: flex; 

  align-items: center; 

  justify-content: center; 

}



.hero-image { 

  background: url('../images/hero-food.webp') center/cover no-repeat; 

  border-radius: 28px; 

  min-height: 400px;

  width: 100%;

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

}



.hero-video {

  width: 100%;

  min-height: 400px;

  object-fit: cover;

  border-radius: 28px;

  display: block;

  background: #000;

}



.cookie-card { 
  background: #fff; 
  border: 2px solid #111; 
  border-radius: 18px; 
  box-shadow: 0 12px 0 #111; 
  padding: 1.25rem 1.5rem; 
}


/* Utilities */

.text-gradient { 

  background: linear-gradient(135deg, var(--terracotta), var(--sage)); 

  -webkit-background-clip: text; 

  -webkit-text-fill-color: transparent; 

  background-clip: text; 

}



.reveal { 

  opacity: 0; 

  transform: translateY(16px); 

  transition: all .5s ease; 

}



.reveal.active { 

  opacity: 1; 

  transform: none; 

}



/* Hero bg (image overlay variant) */

.hero-bg { 

  background-image: url('../images/hero-food.webp'); 

  background-size: cover; 

  background-position: center; 

}



/* Extras to preserve previous content semantics */

.card-hover { 

  transition: all .25s ease; 

}



.card-hover:hover { 

  transform: translateY(-6px); 

  box-shadow: 0 18px 40px rgba(0,0,0,.12); 

}



.gallery-scroll { 

  animation: galleryScroll 30s linear infinite; 

}



@keyframes galleryScroll { 

  from { transform: translateX(0); } 

  to { transform: translateX(-50%); } 

}



.text-terracotta { 

  color: var(--terracotta); 

}



.text-sage { 

  color: var(--sage); 

}



.bg-cta-gradient { 

  background: linear-gradient(135deg, var(--terracotta), var(--sage)); 

  color: #fff; 

}



/* Carousel */

.concepts-section { 

  background: #111; 

  color: #fff; 

}



.concepts-section .brand-display { 

  color: #FAD3E7; 

}



.carousel-track { 

  display: flex; 

  gap: 24px; 

  overflow-x: auto; 

  scroll-behavior: smooth; 

  padding: 10px 48px; 

  scrollbar-width: none; 

  -ms-overflow-style: none;

}



.carousel-track::-webkit-scrollbar {

  display: none;

}



.concept-card { 

  background: #222; 

  border: 2px solid #333; 

  width: 260px; 

  min-width: 260px; 

  border-radius: 22px; 

  padding: 14px; 

  display: flex; 

  flex-direction: column; 

  align-items: center; 

  transition: all 0.3s ease; 

}



.concept-card:hover { 

  background: #333; 

  border-color: #555; 

}



.concept-card img { 

  width: 100%; 

  height: 160px; 

  object-fit: cover; 

  border-radius: 14px; 

  margin-bottom: 10px; 

}



.concept-card span { 

  font-weight: 700; 

  text-align: center;

}



.arrow { 

  position: absolute; 

  top: 50%; 

  transform: translateY(-50%); 

  background: #fff; 

  color: #fff; 

  border: 2px solid #111; 

  width: 40px; 

  height: 40px; 

  border-radius: 999px; 

  display: flex; 

  align-items: center; 

  justify-content: center; 

  font-weight: 700; 

  cursor: pointer; 

  transition: all 0.3s ease; 

  z-index: 10;

}



.arrow:hover { 

  background: #f0f0f0; 

  transform: translateY(-50%) scale(1.1); 

}



.carousel-prev { 

  left: 0; 

}



.carousel-next { 

  right: 0; 

}



/* Stats band */

.stats-band { 

  background: #111; 

  color: #fff; 

  padding: 48px 0; 

}



.stat { 

  font-family: 'Anton', sans-serif; 

  font-size: 56px; 

  line-height: 1; 

}



.label { 

  opacity: .8; 

  margin-top: 6px; 

}



/* Contact pill */

.contact-pill { 

  display: flex; 

  align-items: center; 

  gap: 18px; 

}



/* Common section helpers */

.section-title { 

  font-family: 'Anton', sans-serif; 

  font-size: clamp(32px, 5vw, 56px); 

  line-height: 1; 

  margin-bottom: 1.5rem;

}



.badge { 

  display: inline-block; 

  padding: .35rem .75rem; 

  border: 2px solid #111; 

  border-radius: 999px; 

  background: #fff; 

  font-weight: 700; 

  transition: all 0.3s ease; 

}



.service-card { 

  background: #fff; 

  border: 2px solid #111; 

  border-radius: 18px; 

  padding: 18px; 

  height: 100%; 

  transition: all 0.3s ease; 

}



.service-card h4 { 

  font-weight: 800; 

  margin-bottom: .35rem; 

  font-size: 1.1rem;

}



.service-card p {

  color: #666;

  font-size: 0.95rem;

}



/* Prestations: cartes blanches sur fond papier */

.prestations-grid .service-card {

  background: #fff;

}



.quote-card { 

  background: #fff; 

  border: 2px dashed #111; 

  border-radius: 18px; 

  padding: 18px; 

  transition: all 0.3s ease; 

  font-style: italic;

}



.quote-card .author {

  font-style: normal;

  font-weight: 700;

  margin-top: 0.5rem;

  color: var(--terracotta);

}



.logo-cloud { 

  display: flex; 

  flex-wrap: wrap; 

  gap: 12px; 

  justify-content: center;

}



.logo-chip { 

  background: #fff; 

  border: 2px dashed #111; 

  border-radius: 999px; 

  padding: 8px 14px; 

  font-weight: 800; 

  transition: all 0.3s ease; 

}



.tel-cta { 

  border: 3px dashed #0b0b0b; 

  border-radius: 999px; 

  padding: 14px 20px; 

  background: #fff; 

  font-weight: 800; 

  display: inline-block; 

  transition: all 0.3s ease; 

  text-decoration: none;

  color: #fff;

}



.tel-cta:hover {

  background: #f9f9f9;

  transform: scale(1.05);

}



/* Form */

.form-field { 

  background: #fff; 

  border: 2px solid #111; 

  border-radius: 14px; 

  padding: 12px 14px; 

  width: 100%; 

  outline: none; 

  transition: all 0.3s ease; 

  font-family: inherit;

}



.form-field:focus { 

  box-shadow: 0 0 0 4px rgba(196,112,79,.08); 

  border-color: var(--terracotta); 

}



.form-field::placeholder {

  color: #999;

}



/* Hubs + badges */

.grid-links { 

  display: grid; 

  grid-template-columns: repeat(2, minmax(0, 1fr)); 

  gap: 12px; 

}



@media (min-width: 768px) { 

  .grid-links { 

    grid-template-columns: repeat(5, minmax(0, 1fr)); 

  } 

}



.badge-year { 

  background: #fff; 

  border: 2px solid #111; 

  border-radius: 12px; 

  padding: 6px 10px; 

  font-weight: 800; 

  transition: all 0.3s ease; 

}



/* About band (hero-like typography + gallery) */

.about-band {

  background: var(--terracotta);

  color: var(--cream);

}



.about-title {

  font-family: 'Anton', sans-serif;

  font-weight: 900;

  line-height: .88;

  letter-spacing: 1px;

  font-size: clamp(48px, 9vw, 120px);

}



.about-title .line { color: var(--cream); }

.about-title .line.alt { color: #FEEEDB; }



.about-subtitle {

  margin-top: 12px;

  color: #2C2C2C;

  background: #F5F1EB;

  border: 2px solid #111;

  border-radius: 14px;

  padding: 12px 14px;

  display: inline-block;

}



.about-badges {

  display: flex;

  gap: 12px;

  margin-top: 16px;

  flex-wrap: wrap;

}



.about-badges .badge-year {

  background: #fff;

  border-color: #fff;

  color: var(--ink);

}



.about-gallery {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 16px;

  align-items: end;

}



.about-img { position: relative; overflow: hidden; border: 2px solid #111; }

.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-left { border-radius: 999px; height: 320px; }

.about-right { border-radius: 999px; height: 320px; }

.about-rect { border-radius: 24px; height: 420px; }



@media (max-width: 768px) {

  .about-gallery { grid-template-columns: 1fr 1fr; }

  .about-right { display: none; }

  .about-rect { height: 300px; }

}



/* Guarantees list */

.list-check { 

  list-style: none; 

  padding: 0; 

  margin: 0; 

}



/* Foodtruck carousel */

.ft-carousel {

  display: grid;

  grid-template-columns: 56px 1fr 56px;

  gap: 16px;

  align-items: center;

  overflow: visible; /* autoriser les items actifs a depasser les bords de la grille */

}



/* FT carousel — version robuste: 3 visibles, centré */

.ft-track {

  display: flex;

  justify-content: center; /* centre la rangée */

  align-items: center;

  gap: 24px;

  overflow: hidden;         /* on masque les elements en trop */

  padding: 10px 6px;

  width: 100%;

}





.ft-track::-webkit-scrollbar { display: none; }

/* masquer pour Firefox */

.ft-track { scrollbar-width: none; -ms-overflow-style: none; }



.ft-item {

  width: 100%;

  max-width: clamp(200px, 24vw, 320px);

  aspect-ratio: 4 / 3;

  background: transparent; /* pas de fond blanc */

  border: none; /* pas de contour */

  cursor: pointer;

  outline: none;

  border-radius: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s cubic-bezier(.2,.9,.2,1), opacity .25s ease;

  transform: scale(.95);

  opacity: .75;

  transform-origin: center center; /* evite decalage etrange lors du scale */

  will-change: transform, opacity; /* aide le navigateur a optimiser */

  backface-visibility: hidden;

}



/* Pour eviter que les items ne rétrécissent dans la ligne flex et assurer un comportement constant */

.ft-item { flex: 0 0 auto; }



.ft-item img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }



/* État actif (centre) : agrandi pour effet de profondeur. Ne pas modifier la grille (grid-column) pour eviter les sauts/layout shifts) */

.ft-item.active {

  transform: scale(1.22); /* taille plus marquée pour l'effet profondeur */

  box-shadow: 0 28px 56px rgba(0,0,0,.24);

  z-index: 3;

  opacity: 1;

}



/* états voisin : légèrement plus grands que l'arrière-plan mais pas autant que le central */

.ft-item.prev, .ft-item.next {

  transform: scale(1.03);

  opacity: .95;

  z-index: 2;

}



/* Hover state: push item forward before selection */

.ft-item:hover:not(.active) {

  transform: scale(1.12);

  opacity: 1;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);

  z-index: 3;

}



.ft-item.active:hover {

  transform: scale(1.26);

  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.26);

}



.ft-track.ready .ft-item:not(.active):not(.prev):not(.next) { display: none; }



.ft-item:focus-visible {

  outline: 3px solid var(--terracotta);

  outline-offset: 4px;

}



/* Collaborations layout */

.collab-photos img { box-shadow: 0 12px 0 #111; }

.collab-logos .brands-list { list-style: none; padding: 0; margin: 0; }

.collab-logos .brands-list li {

  display: inline-block;

  margin: 6px 10px;

  padding: 8px 14px;

  border: 2px dashed #111;

  border-radius: 999px;

  background: #fff;

  font-weight: 800;

}



/* Marquee (défilements) */

.marquee-row { overflow: hidden; white-space: nowrap; }

.marquee-inner { display: inline-flex; align-items: center; gap: 18px; width: max-content; will-change: transform; }

.marquee-right .marquee-inner { animation: marqueeRight 22s linear infinite; }

.marquee-left .marquee-inner { animation: marqueeLeft 22s linear infinite; }



@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }



.marquee-img {

  height: 140px;

  width: auto;

  border-radius: 0;

  border: none;

  box-shadow: none;

  object-fit: contain;

  background: transparent;

}



/* Fixed bottom CTA bar */

.bottom-cta {

  position: fixed;

  left: 50%;

  bottom: 16px;

  transform: translateX(-50%);

  display: inline-flex;

  gap: 10px;

  z-index: 1000;

  pointer-events: none; /* enable click only on buttons */

}

.bottom-cta a { pointer-events: auto; }



/* Gestion du texte court/long dans les boutons CTA */

.cta-text-short {

  display: none;

}

.cta-text-long {

  display: inline;

}



@media (max-width: 640px) {

  .cta-text-short {

    display: inline;

  }

  .cta-text-long {

    display: none;

  }

}



/* Language floating button */

.lang-fab {
  position: fixed;
  right: 16px;
  bottom: 50%;
  transform: translateY(50%);
  background: #111;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #000;
  border: 2px solid #000;
  z-index: 1000;

  cursor: pointer;

}

.lang-fab:hover { filter: brightness(1.1); }



@media (max-width: 640px) {

  .bottom-cta { bottom: 10px; gap: 8px; }

  .lang-fab { right: 10px; width: 40px; height: 40px; }

}



/* Simple gallery */

.gallery { display: grid; gap: 10px; }

.gallery.grid-3 { grid-template-columns: repeat(3, 1fr); }

.gallery.grid-4 { grid-template-columns: repeat(4, 1fr); }

.gallery img {

  width: 100%; height: 160px; object-fit: cover; border-radius: 12px;

  border: 2px solid #111; box-shadow: 0 6px 0 #111; cursor: zoom-in;

  transition: transform .2s ease;

}

.gallery img:hover { transform: translateY(-2px); }



.lightbox {

  position: fixed; inset: 0; background: rgba(0,0,0,.8);

  display: flex; align-items: center; justify-content: center; z-index: 2000;

}

.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; border: 2px solid #fff; }



.ft-arrow {
  width: 56px; height: 56px; border-radius: 999px; border: 2px solid #111; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 #111; transition: transform .15s ease, box-shadow .2s ease; color: #111;
}
.ft-arrow:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #111; background: var(--terracotta); color: #111; }
.ft-arrow i { pointer-events: none; }



@media (max-width: 768px) {

  .ft-carousel { grid-template-columns: 44px 1fr 44px; }

  .ft-arrow { width: 44px; height: 44px; }

}



/* Bandes pleine largeur */

.band-white { background: #fff; width: 100%; }

.band-paper { background: var(--paper); width: 100%; }



.list-check li { 

  display: flex; 

  gap: 10px; 

  align-items: flex-start; 

  padding: 8px 0; 

  transition: all 0.3s ease; 

  font-size: 1.1rem;

}



.list-check li:hover { 

  transform: translateX(5px); 

  color: var(--terracotta);

}



.check-dot { 

  width: 22px; 

  height: 22px; 

  border-radius: 999px; 

  background: var(--lime); 

  border: 2px solid #111; 

  display: inline-flex; 

  align-items: center; 

  justify-content: center; 

  font-weight: 900; 

  font-size: 12px;

}



/* Recent Case Cards - Inspired by the screen design */

/* Section pleine largeur avec fond blanc */

.cases-grid {

  width: 100%;

}



.recent-case-card {

  background: #fff;

  border: 2px solid #111;

  border-radius: 20px;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  box-shadow: 0 8px 0 #111;

  display: flex;

  flex-direction: column;

  text-decoration: none;

  color: inherit;

}



.recent-case-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 16px 0 #111, 0 20px 40px rgba(0,0,0,0.15);

}



.recent-case-image {

  width: 100%;

  height: 280px;

  overflow: hidden;

  position: relative;

  background: linear-gradient(135deg, var(--terracotta), var(--sage));

}



.recent-case-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.recent-case-card:hover .recent-case-image img {

  transform: scale(1.1);

}



.recent-case-content {

  padding: 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  background: #fff;

}



.recent-case-logo {

  width: 60px;

  height: 60px;

  background: var(--terracotta);

  border: 2px solid #111;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  margin-bottom: 8px;

  box-shadow: 0 4px 0 #111;

  transition: all 0.3s ease;

  font-size: 1.5rem;

}



.recent-case-card:hover .recent-case-logo {

  transform: rotate(-5deg) scale(1.05);

}



.recent-case-title {

  font-family: 'Anton', sans-serif;

  font-size: 2rem;

  font-weight: 900;

  letter-spacing: 1px;

  color: var(--ink);

  line-height: 1;

  margin: 0;

  text-transform: uppercase;

}

@media (prefers-color-scheme: dark) {
  .recent-case-title {
    color: #e6a57a !important;
  }
}



.recent-case-subtitle {

  font-weight: 700;

  font-size: 1.1rem;

  color: var(--terracotta);

  margin: 0;

  line-height: 1.3;

}



.recent-case-details {

  margin: 8px 0;

  padding: 12px 0;

  border-top: 2px dashed #e5e7eb;

  border-bottom: 2px dashed #e5e7eb;

}



.recent-case-service {

  font-size: 0.95rem;

  color: #555;

  margin: 0 0 6px 0;

  font-weight: 500;

}



.recent-case-guests {

  font-size: 0.95rem;

  color: #555;

  margin: 0;

  font-weight: 600;

}



.recent-case-info {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 8px;

}



.recent-case-contact,

.recent-case-hours {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.9rem;

  color: #666;

  margin: 0;

}



.recent-case-contact i,

.recent-case-hours i {

  color: var(--terracotta);

  font-size: 0.85rem;

}



.recent-case-contact span,

.recent-case-hours span {

  font-weight: 600;

}



/* Responsive pour les cartes cas clients */

@media (max-width: 768px) {

  .recent-case-card {

    margin-bottom: 20px;

  }

  

  .recent-case-image {

    height: 240px;

  }

  

  .recent-case-title {

    font-size: 1.5rem;

  }

}



/* Section Avis Clients - Style Google Reviews Moderne */

.reviews-section-modern {

  background: linear-gradient(135deg, #C4704F 0%, #A85D3F 100%);

  position: relative;

  overflow: hidden;

  width: 100%;

}



/* Formes décoratives en arrière-plan */

.reviews-section-modern::before,

.reviews-section-modern::after {

  content: '';

  position: absolute;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  pointer-events: none;

}



.reviews-section-modern::before {

  width: 600px;

  height: 600px;

  top: -200px;

  right: -150px;

}



.reviews-section-modern::after {

  width: 800px;

  height: 800px;

  bottom: -300px;

  left: -200px;

}



/* Header des avis */

.reviews-header-modern {

  text-align: center;

  position: relative;

  z-index: 2;

}



.google-badge-modern {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: white;

  padding: 12px 24px;

  border-radius: 50px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  margin-bottom: 16px;

  border: 2px solid #111;

}



.google-logo-modern {

  height: 20px;

  width: auto;

}



.google-reviews-text {

  font-weight: 600;

  color: #5F6368;

  font-size: 1.1rem;

}



.review-google-link {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  margin-top: 1.5rem;

  padding: 0.8rem 1.8rem;

  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, 0.85);

  color: #fff;

  font-weight: 700;

  background: rgba(255, 255, 255, 0.08);

  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25);

  transition: all 0.3s ease;

}



.review-google-link:hover {

  background: rgba(255, 255, 255, 0.16);

  color: #fff;

  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3);

}



.review-google-link i {

  font-size: 0.875rem;

}



.rating-display-modern {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

}



.rating-number {

  font-family: 'Anton', sans-serif;

  font-size: 3rem;

  color: white;

  line-height: 1;

}



.stars-modern {

  display: flex;

  gap: 4px;

}



.stars-modern i {

  color: #FDB022;

  font-size: 1.5rem;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));

}



.rating-count {

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.95rem;

  width: 100%;

  margin-top: 8px;

}



/* Grille flottante des avis */

.reviews-floating-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

  position: relative;

  z-index: 2;

}



/* Cartes d'avis modernes */

.review-card-modern {

  background: white;

  border-radius: 16px;

  padding: 20px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  border: 2px solid transparent;

  animation: float 6s ease-in-out infinite;

}



.review-card-modern:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);

  border-color: var(--terracotta);

}



/* Animations flottantes décalées */

.review-card-1 { animation-delay: 0s; }

.review-card-2 { animation-delay: 1s; }

.review-card-3 { animation-delay: 2s; }

.review-card-4 { animation-delay: 3s; }

.review-card-5 { animation-delay: 4s; }

.review-card-6 { animation-delay: 5s; }

.review-card-7 { animation-delay: 0.5s; }

.review-card-8 { animation-delay: 1.5s; }



@keyframes float {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-10px);

  }

}



/* Header de la carte d'avis */

.review-card-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

  position: relative;

}



.reviewer-avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--terracotta), var(--sage));

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 1.2rem;

  flex-shrink: 0;

  border: 2px solid #111;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.reviewer-info {

  flex: 1;

}



.reviewer-name {

  font-weight: 700;

  color: #1a1a1a;

  font-size: 1rem;

  margin-bottom: 4px;

}



.review-stars-small {

  display: flex;

  gap: 2px;

}



.review-stars-small i {

  color: #FDB022;

  font-size: 0.85rem;

}



.google-icon-small {

  color: #4285f4;

  font-size: 1.2rem;

  position: absolute;

  top: 0;

  right: 0;

}



.review-text {

  color: #5f6368;

  line-height: 1.6;

  font-size: 0.95rem;

  font-style: italic;

  margin: 0;

}



/* Responsive pour les avis */

@media (max-width: 768px) {

  .rating-number {

    font-size: 2rem;

  }

  

  .stars-modern i {

    font-size: 1.2rem;

  }

  

  .reviews-floating-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

  

  .review-card-modern {

    animation: none;

  }

  

  .reviews-section-modern::before,

  .reviews-section-modern::after {

    display: none;

  }

}



/* Section Contact Moderne - Style carte sur fond coloré */

.contact-section-modern {

  background: linear-gradient(135deg, var(--terracotta) 0%, #A85D3F 100%);

  position: relative;

  overflow: hidden;

  width: 100%;

  padding: 80px 0;

}



.contact-section-modern::before {

  content: '';

  position: absolute;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  top: -150px;

  right: -100px;

  pointer-events: none;

}



.contact-section-modern::after {

  content: '';

  position: absolute;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  bottom: -250px;

  left: -150px;

  pointer-events: none;

}



.contact-title-modern {

  font-family: 'Anton', sans-serif;

  font-size: clamp(2rem, 5vw, 3rem);

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  position: relative;

  z-index: 2;

}



/* Carte blanche centrale */

.contact-card-modern {

  background: white;

  border-radius: 24px;

  padding: 40px;

  max-width: 900px;

  margin: 0 auto;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

  border: 3px solid #111;

  position: relative;

  z-index: 2;

  animation: slideUp 0.6s ease-out;

}

.contact-card-modern .text-gray-700 {
  color: #111;
}



@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Badge téléphone moderne */

.tel-badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--terracotta);
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid #111;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


.tel-badge-modern:hover {
  background: #b66040;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(196, 112, 79, 0.3);
}


.tel-badge-modern i {

  font-size: 1.1rem;

}



/* Champs de formulaire modernes */

.form-field-modern {

  background: #f8f9fa;

  border: 2px solid #e5e7eb;

  border-radius: 16px;

  padding: 14px 18px;

  width: 100%;

  font-family: inherit;

  font-size: 1rem;

  transition: all 0.3s ease;

  outline: none;

}



.form-field-modern:focus {

  background: white;

  border-color: var(--terracotta);

  box-shadow: 0 0 0 4px rgba(196, 112, 79, 0.1);

  transform: translateY(-2px);

}



.form-field-modern::placeholder {

  color: #9ca3af;

}



/* Boutons du formulaire */

.btn-contact-primary {

  background: linear-gradient(135deg, var(--terracotta), #D4855F);

  color: white;

  border: 2px solid #111;

  border-radius: 50px;

  padding: 14px 32px;

  font-weight: 700;

  font-size: 1rem;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 0 #111;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

}



.btn-contact-primary:hover {

  transform: translateY(-3px);

  box-shadow: 0 9px 0 #111, 0 12px 24px rgba(0, 0, 0, 0.15);

}



.btn-contact-primary:active {

  transform: translateY(-1px);

  box-shadow: 0 4px 0 #111;

}



.btn-contact-secondary {

  background: white;

  color: #fff;

  border: 2px solid #111;

  border-radius: 50px;

  padding: 14px 32px;

  font-weight: 700;

  font-size: 1rem;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 0 #111;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

}



.btn-contact-secondary:hover {

  background: #f9f9f9;

  transform: translateY(-3px);

  box-shadow: 0 9px 0 #111, 0 12px 24px rgba(0, 0, 0, 0.15);

}



.btn-contact-secondary:active {

  transform: translateY(-1px);

  box-shadow: 0 4px 0 #111;

}



/* Adresse en bas */

.address-modern {

  color: #6b7280;

  font-weight: 500;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.address-modern i {

  color: var(--terracotta);

}



/* Responsive formulaire contact */

@media (max-width: 768px) {

  .contact-section-modern {

    padding: 60px 0;

  }

  

  .contact-card-modern {

    padding: 24px;

    border-radius: 16px;

  }

  

  .form-field-modern {

    padding: 12px 16px;

  }

  

  .btn-contact-primary,

  .btn-contact-secondary {

    width: 100%;

    justify-content: center;

  }

  

  .contact-section-modern::before,

  .contact-section-modern::after {

    display: none;

  }

}



/* Cartes evenements & Collaborations avec Images */

.event-card-modern {

  background: white;

  border: 2px solid #111;

  border-radius: 20px;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  box-shadow: 0 6px 0 #111;

  display: flex;

  flex-direction: column;

  height: 100%;

}



.event-card-modern:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 0 #111, 0 16px 32px rgba(0, 0, 0, 0.15);

}



/* Wrapper image avec icône */

.event-image-wrapper {

  position: relative;

  width: 100%;

  height: 260px;

  overflow: hidden;

  background: linear-gradient(135deg, var(--terracotta), var(--sage));

}



.event-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.event-card-modern:hover .event-image {

  transform: scale(1.1);

}



/* Icône flottante sur l'image */

.event-icon {

  position: absolute;

  top: 16px;

  left: 16px;

  width: 50px;

  height: 50px;

  background: white;

  border: 2px solid #111;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  transition: all 0.3s ease;

  z-index: 2;

}



.event-card-modern:hover .event-icon {

  transform: rotate(-10deg) scale(1.1);

  background: var(--terracotta);

  color: white;

}



.event-icon i {

  font-size: 1.3rem;

  color: var(--terracotta);

  transition: color 0.3s ease;

}



.event-card-modern:hover .event-icon i {

  color: white;

}



/* Contenu de la carte evenement */

.event-content {

  padding: 20px;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.event-title {

  font-family: 'Anton', sans-serif;

  font-size: 1.3rem;

  color: var(--ink);

  margin: 0;

  line-height: 1.2;

  letter-spacing: 0.5px;

}

@media (prefers-color-scheme: dark) {
  .event-title {
    color: #e6a57a !important;
  }
}



.event-description {

  color: #5f6368;

  font-size: 0.95rem;

  line-height: 1.6;

  margin: 0;

  flex: 1;

}



/* Responsive pour les cartes evenements */

@media (max-width: 768px) {

  .event-image-wrapper {

    height: 220px;

  }



  

  .event-icon {

    width: 45px;

    height: 45px;

  }

  

  .event-icon i {

    font-size: 1.1rem;

  }

  

  .event-content {

    padding: 16px;

  }

  

  .event-title {

    font-size: 1.1rem;

  }

}



/* Coverage table */

.coverage { 

  display: grid; 

  grid-template-columns: 1fr; 

  gap: 16px; 

}



@media (min-width: 768px) { 

  .coverage { 

    grid-template-columns: 1fr 1fr; 

  } 

}



.coverage .col { 

  background: #fff; 

  border: 2px solid #111; 

  border-radius: 14px; 

  padding: 18px; 

  transition: all 0.3s ease; 

}



.coverage .col:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(0,0,0,0.1);

}



.coverage .col h3 {

  color: var(--terracotta);

  font-weight: 800;

  margin-bottom: 0.5rem;

}



/* FAQ */

details.faq { 

  border: 2px solid #111; 

  border-radius: 14px; 

  background: #fff; 

  padding: 16px; 

  transition: all 0.3s ease; 

  margin-bottom: 1rem;

}



details.faq summary { 

  cursor: pointer; 

  transition: color 0.3s ease; 

  font-weight: 700;

  font-size: 1.1rem;

  list-style: none;

  position: relative;

}



details.faq summary::after {

  content: '+';

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  font-size: 1.5rem;

  color: var(--terracotta);

  transition: transform 0.3s ease;

}



details.faq[open] summary::after {

  transform: translateY(-50%) rotate(45deg);

}



details.faq summary:hover { 

  color: var(--terracotta); 

}



details.faq[open] { 

  box-shadow: 0 6px 18px rgba(0,0,0,.12); 

  background: #f9f9f9; 

}



details.faq .faq-content {

  margin-top: 1rem;

  padding-top: 1rem;

  border-top: 1px solid #eee;

  color: #666;

  line-height: 1.7;

}



/* Animations personnalisées */

.animate-in {

  animation: slideInUp 0.8s ease-out forwards;

}



@keyframes slideInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Effets de hover améliorés */

.hover-lift:hover {

  transform: translateY(-6px) !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.15) !important;

}



/* Animation des badges */

.badge-animate {

  animation: pulse 2s infinite;

}



.badge-satisfaction {

  background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);

  border-color: #C4704F;

  color: #C4704F;

}



.badge-satisfaction i {

  color: #e74c3c;

}



@keyframes pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.05); }

}



/* Animation du gradient texte */

.text-gradient {

  background-size: 200% 200%;

  animation: gradientShift 3s ease-in-out infinite;

}



@keyframes gradientShift {

  0%, 100% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

}



/* Responsive amélioré */

@media (max-width: 768px) {

  .hero-title {

    font-size: clamp(32px, 10vw, 64px);

  }

  

  .section-title {

    font-size: clamp(24px, 6vw, 40px);

  }

  

  .contact-pill {

    flex-direction: column;

    text-align: center;

  }

  .contact-pill .pill {

    width: 100%;

    max-width: 100%;

    padding: 1rem 1.25rem;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.75rem;

    box-sizing: border-box;

  }

  .contact-pill .pill span {

    text-align: center;

    word-break: break-word;

  }

  

  .stats-container {

    gap: 16px;

  }

  

  .stat {

    font-size: 36px;

  }

  

  .carousel-track {

    padding: 10px 20px;

  }

  

  .arrow {

    width: 32px;

    height: 32px;

  }

}



/* Mode sombre (optionnel) */

@media (prefers-color-scheme: dark) {

  :root {

    --paper: #2a2a2a;

    --ink: #f0f0f0;

    --pink: #4a3d5c;

    --lime: #5a6b4f;

  }

  

  body {

    background: #1a1a1a;

  }

  

  .service-card,

  .quote-card,

  .form-field,

  .coverage .col,

  details.faq {

    background: #333;

    border-color: #555;

    color: #f0f0f0;

  }

  

  .btn-ghost {

    background: #333;

    color: #f0f0f0;

  }

}



/* Animation de chargement */

.loading {

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 3px solid rgba(255,255,255,.3);

  border-radius: 50%;

  border-top-color: #fff;

  animation: spin 1s ease-in-out infinite;

}



@keyframes spin {

  to { transform: rotate(360deg); }

}



/* Effet de brillance */

.shimmer {

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  background-size: 200% 100%;

  animation: shimmer 2s infinite;

}



@keyframes shimmer {

  0% { background-position: -200% 0; }

  100% { background-position: 200% 0; }

}



/* Animation d'apparition pour les sections */

.section-reveal {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.8s ease-out;

}



.section-reveal.animate-in {

  opacity: 1;

  transform: translateY(0);

}



/* Amélioration de la barre de défilement */

::-webkit-scrollbar {

  width: 12px;

}



::-webkit-scrollbar-track {

  background: var(--paper);

}



::-webkit-scrollbar-thumb {

  background: var(--terracotta);

  border-radius: 6px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--sage);

}



/* Classes utilitaires */

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }



.font-bold { font-weight: 700; }

.font-semibold { font-weight: 600; }

.font-black { font-weight: 900; }



.text-sm { font-size: 0.875rem; }

.text-lg { font-size: 1.125rem; }

.text-xl { font-size: 1.25rem; }

.text-2xl { font-size: 1.5rem; }

.text-3xl { font-size: 1.875rem; }

.text-4xl { font-size: 2.25rem; }

.text-5xl { font-size: 3rem; }

.text-6xl { font-size: 4rem; }

.text-7xl { font-size: 5rem; }



.mb-2 { margin-bottom: 0.5rem; }

.mb-3 { margin-bottom: 0.75rem; }

.mb-4 { margin-bottom: 1rem; }

.mb-6 { margin-bottom: 1.5rem; }

.mb-8 { margin-bottom: 2rem; }



.mt-2 { margin-top: 0.5rem; }

.mt-3 { margin-top: 0.75rem; }

.mt-4 { margin-top: 1rem; }

.mt-6 { margin-top: 1.5rem; }



.p-4 { padding: 1rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.py-16 { padding-top: 4rem; padding-bottom: 4rem; }



.flex { display: flex; }

.grid { display: grid; }

.hidden { display: none; }

.block { display: block; }

.inline-block { display: inline-block; }



.items-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }



.gap-3 { gap: 0.75rem; }

.gap-4 { gap: 1rem; }

.gap-6 { gap: 1.5rem; }

.gap-8 { gap: 2rem; }



.w-full { width: 100%; }

.h-full { height: 100%; }



.rounded-lg { border-radius: 0.5rem; }

.rounded-xl { border-radius: 1rem; }

.rounded-full { border-radius: 9999px; }



.border { border: 1px solid #e5e7eb; }

.border-2 { border: 2px solid #e5e7eb; }



.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }



.transition-colors { transition-property: color, background-color, border-color; }

.transition-all { transition-property: all; }



.duration-300 { transition-duration: 300ms; }

.duration-500 { transition-duration: 500ms; }



.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }



/* ============================================

   RESPONSIVE - SECTION HERO - SYSTÈME SIMPLE

   ============================================ */



/* Par défaut (Desktop >= 1440px) : 2 colonnes, image gauche */

.hero-section-wrapper {

  width: 100%;

  max-width: 1600px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* Mobile & Tablette (< 1440px) : 1 colonne, image en haut */

@media (max-width: 1439px) {

  .hero-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 5rem !important;

  }

  

  .hero-image-wrapper {

    order: 1 !important;

    width: 100% !important;

  }

  

  .hero-content-wrapper {

    order: 2 !important;

    width: 100% !important;

    text-align: center !important;

    padding: 0 1rem !important;

  }

  

  .hero-image,

  .hero-image-animate {

    display: block !important;

    width: 100% !important;

    height: 380px !important;

    border-radius: 20px !important;

    background-size: cover !important;

    background-position: center !important;

  }

  

  .hero-title {

    font-size: 2.5rem !important;

    line-height: 1.15 !important;

    text-align: center !important;

    margin-bottom: 2.5rem !important;

  }

  

  .hero-subtitle {

    font-size: 1.3rem !important;

    text-align: center !important;

    margin: 2.5rem auto !important;

    line-height: 1.5 !important;

  }

  

  .hero-badges {

    justify-content: center !important;

    margin: 2.5rem 0 !important;

    gap: 1.25rem !important;

  }

  

  .badge {

    padding: 0.6rem 1.2rem !important;

    font-size: 0.95rem !important;

  }

  

  .hero-description {

    text-align: center !important;

    margin: 3rem auto !important;

    max-width: 720px !important;

    font-size: 1.05rem !important;

    line-height: 1.9 !important;

    padding: 0 1rem !important;

  }

  

  .hero-buttons {

    display: flex !important;

    flex-direction: column !important;

    gap: 1.75rem !important;

    margin: 3.5rem auto 0 !important;

    max-width: 450px !important;

  }

  

  .hero-buttons a,

  .hero-buttons .btn-primary,

  .hero-buttons .btn-ghost {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 1.4rem 2.5rem !important;

    font-size: 1.05rem !important;

    text-align: center !important;

  }

  

  .cookie-card {

    position: static !important;

    width: 100% !important;

    margin-top: 3rem !important;

    padding: 2rem !important;

  }

}



/* Mobile strict (< 640px) : tailles réduites */

@media (max-width: 639px) {

  .hero-section-wrapper {

    padding-top: 1rem !important;

    padding-bottom: 2rem !important;

    margin-top: 0 !important;

  }

  

  .hero-image-wrapper {

    margin-top: 0 !important;

    padding-top: 0 !important;

  }

  

  .hero-image,

  .hero-image-animate {

    height: 250px !important;

    margin-top: 0 !important;

  }

  

  .hero-title {

    font-size: 1.75rem !important;

  }

  

  .hero-subtitle {

    font-size: 1rem !important;

  }

  

  .hero-description {

    font-size: 0.875rem !important;

  }

  

  .hero-buttons a,

  .hero-buttons .btn-primary,

  .hero-buttons .btn-ghost {

    padding: 0.875rem 1.5rem !important;

    font-size: 0.9rem !important;

  }

  

  .cookie-card {

    padding: 1rem !important;

  }

  

  .cookie-card button {

    padding: 0.5rem 1rem !important;

    font-size: 0.8rem !important;

  }

}



/* ============================================

   FIN SECTION HERO

   ============================================ */



/* MOBILE FIRST - Extra Small Devices (< 640px) */

@media (max-width: 639px) {

  /* TOUT forcer en mode mobile */

  * {

    box-sizing: border-box !important;

  }

  

  /* Container general */

  .container {

    padding-left: 0.75rem !important;

    padding-right: 0.75rem !important;

    max-width: 100vw !important;

  }

  

  /* Section hero complète */

  section.container {

    padding-bottom: 2rem !important;

  }

  

  /* Force TOUT en 1 colonne */

  .grid,

  .grid-cols-2,

  .md\:grid-cols-2,

  [class*="grid"] {

    display: flex !important;

    flex-direction: column !important;

  /* Image hero - TOUJOURS VISIBLE sur mobile */

  .hero-image,

  .hero-image-animate {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 220px !important;

    min-height: 220px !important;

    max-height: 220px !important;

    border-radius: 12px !important;

    margin: 0 !important;

    background-size: cover !important;

    background-position: center !important;

    aspect-ratio: auto !important;

  }

  

  /* Annule aspect-ratio Tailwind sur mobile */

  .aspect-\[16\/10\],

  .aspect-\[16\/9\] {

    aspect-ratio: auto !important;

  }aspect-\[16\/10\],

  .aspect-\[16\/9\] {

    aspect-ratio: auto !important;

  }

  

  /* Contenu hero */

  .hero-content {

    width: 100% !important;

    text-align: center !important;

    padding: 0 !important;

    margin: 0 !important;

  }

  

  /* Titre LOCATION FOOD TRUCK */

  .hero-title,

  .brand-display {

    font-size: 1.35rem !important;

    line-height: 0.95 !important;

    text-align: center !important;

    word-break: break-word !important;

    hyphens: auto !important;

    margin: 0.5rem 0 !important;

    max-width: 100% !important;

  }

  

  /* Sous-titre */

  .hero-subtitle {

    font-size: 0.75rem !important;

    line-height: 1.25 !important;

    text-align: center !important;

    margin: 0.5rem 0 !important;

  }

  

  /* Description */

  .hero-description {

    font-size: 1.2rem !important;

    line-height: 1.6 !important;

    text-align: center !important;

    margin: 0.75rem auto !important;

    padding: 0 0.5rem !important;

    max-width: 100% !important;

  }

  

  /* Badges */

  .hero-badges {

    display: flex !important;

    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 0.35rem !important;

    margin: 0.75rem 0 !important;

  }

  

  .badge,

  .badge-animate {

    padding: 0.2rem 0.45rem !important;

    white-space: nowrap !important;

    border: 1.5px solid #111 !important;

  }

  

  /* Boutons */

  .hero-buttons {

    display: flex !important;

    flex-direction: column !important;

    gap: 0.5rem !important;

    margin: 0.75rem 0 !important;

    width: 100% !important;

  }

  

  .hero-buttons a,

  .btn-primary,

  .btn-ghost {

    width: 100% !important;

    font-size: 0.7rem !important;

    padding: 0.5rem 0.9rem !important;

    text-align: center !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }

  

  .hero-buttons a i {

    font-size: 0.7rem !important;

    margin-right: 0.25rem !important;

  }

  

  /* Section Titles */

  .section-title {

    font-size: 1.5rem !important;

    line-height: 1.25 !important;

  }

  

  /* Grid Links */

  .grid-links {

    grid-template-columns: 1fr !important;

    gap: 0.65rem !important;

  }

  

  .btn-card {

    padding: 0.9rem !important;

    font-size: 0.8rem !important;

  }

  

  /* Recent Case Cards */

  .recent-case-card {

    padding: 1.1rem !important;

  }

  

  .recent-case-card h3 {

    font-size: 1.1rem !important;

  }

  

  .recent-case-card p {

    font-size: 0.8rem !important;

  }

  

  /* Reviews Section */

  .reviews-grid {

    grid-template-columns: 1fr !important;

    gap: 0.9rem !important;

    padding: 1.3rem 0.9rem !important;

  }

  

  .review-card-modern {

    padding: 1.1rem !important;

  }

  

  .review-card-modern .review-author {

    font-size: 0.8rem !important;

  }

  

  .review-card-modern .review-text {

    font-size: 0.8rem !important;

    line-height: 1.4 !important;

  }

  

  /* Contact Form */

  .contact-card-modern {

    padding: 1.3rem !important;

    margin: 0.9rem !important;

  }

  

  .contact-card-modern h2 {

    font-size: 1.5rem !important;

  }

  

  .contact-card-modern input,

  .contact-card-modern textarea {

    font-size: 0.8rem !important;

    padding: 0.65rem !important;

  }

  

  .contact-card-modern button {

    font-size: 0.9rem !important;

    padding: 0.75rem 1.3rem !important;

  }

  

  /* Event Cards */

  .event-card-modern {

    min-height: 230px !important;

  }

  

  .event-card-modern h3 {

    font-size: 1.1rem !important;

  }

  

  .event-card-modern p {

    font-size: 0.8rem !important;

  }

  

  /* Stats Counters */

  .stats-grid {

    grid-template-columns: 1fr !important;

    gap: 1.3rem !important;

  }

  

  .stat-card {

    padding: 1.3rem !important;

  }

  

  .stat-number {

    font-size: 1.8rem !important;

  }

  

  /* Container Padding */

  .container {

    padding-left: 0.9rem !important;

    padding-right: 0.9rem !important;

  }

  

  /* Texte general plus petit */

  body {

    font-size: 0.875rem !important;

  }

  

  p {

    font-size: 0.8rem !important;

  }

  

  h1 {

    font-size: 1.5rem !important;

  }

  

  h2 {

    font-size: 1.35rem !important;

  }

  

  h3 {

    font-size: 1.15rem !important;

  }

}



/* TABLET - Small to Medium Devices (640px - 767px) */

@media (min-width: 640px) and (max-width: 768px) {

  .hero-title {

    font-size: 3rem !important;

  }

  

  .section-title {

    font-size: 2rem !important;

  }

  

  .grid-links {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1rem !important;

  }

  

  .reviews-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1.25rem !important;

  }

  

  .stats-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}



/* TABLET - Medium Devices (768px - 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {

  .hero-title {

    font-size: 3.5rem !important;

  }

  

  .section-title {

    font-size: 2.25rem !important;

  }

  

  .grid-links {

    grid-template-columns: repeat(3, 1fr) !important;

  }

  

  .reviews-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1.5rem !important;

  }

  

  .recent-case-card {

    padding: 2rem !important;

  }

  

  .contact-card-modern {

    padding: 2.5rem !important;

    margin: 2rem auto !important;

  }

  

  .stats-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }

}



/* DESKTOP - Large Devices (1024px - 1279px) */

@media (min-width: 1024px) and (max-width: 1279px) {

  .hero-title {

    font-size: 4rem !important;

  }

  

  .section-title {

    font-size: 2.5rem !important;

  }

  

  .reviews-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }

  

  .stats-grid {

    grid-template-columns: repeat(4, 1fr) !important;

  }

}



/* DESKTOP - Extra Large Devices (= 1280px) */

@media (min-width: 1280px) {

  .hero-title {

    font-size: 4.5rem !important;

  }

  

  .section-title {

    font-size: 3rem !important;

  }

  

  .reviews-grid {

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 2rem !important;

  }

  

  .container {

    max-width: 1280px;

  }

}



/* LANDSCAPE MODE - Mobile et Tablets en orientation paysage */

@media (max-height: 600px) and (orientation: landscape) {

  .hero-title {

    font-size: 2rem !important;

  }

  

  .hero-subtitle {

    font-size: 1rem !important;

  }

  

  .hero-description {

    font-size: 0.875rem !important;

    margin-top: 1rem !important;

  }

  

  .hero-buttons {

    margin-top: 1rem !important;

  }

  

  .hero-buttons a {

    padding: 0.625rem 1.25rem !important;

    font-size: 0.875rem !important;

  }

  

  section {

    padding-top: 2rem !important;

    padding-bottom: 2rem !important;

  }

}



/* RESPONSIVE IMAGES */

@media (max-width: 768px) {

  .hero-image {

    aspect-ratio: 16/9 !important;

    max-height: 300px;

  }

  

  .event-card-modern .event-image-wrapper {

    height: 220px !important;

  }

  

  img {

    max-width: 100%;

    height: auto;

  }

}



/* RESPONSIVE TYPOGRAPHY */

@media (max-width: 639px) {

  html {

    font-size: 14px;

  }

  

  h1 { font-size: 2rem !important; }

  h2 { font-size: 1.5rem !important; }

  h3 { font-size: 1.25rem !important; }

  h4 { font-size: 1rem !important; }

  

  p {

    font-size: 0.875rem;

    line-height: 1.5;

  }

}



/* RESPONSIVE SPACING */

@media (max-width: 768px) {

  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  

  .mb-8 { margin-bottom: 1.5rem !important; }

  .mb-12 { margin-bottom: 2rem !important; }

  

  .gap-8 { gap: 1rem !important; }

  .gap-10 { gap: 1.25rem !important; }

}



/* FIX POUR LES OVERFLOW HORIZONTAUX */

@media (max-width: 768px) {

  html {

    overflow-x: hidden !important;

    width: 100vw !important;

  }

  

  body {

    overflow-x: hidden !important;

    width: 100vw !important;

    position: relative !important;

  }

  

  .container {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }

  

  * {

    max-width: 100vw !important;

  }

  

  /* Empêcher tout élément de depasser */

  section, div, header, footer {

    max-width: 100vw !important;

    box-sizing: border-box !important;

  }

}



/* AMÉLIORATION TOUCH TARGETS (Accessibilité Mobile) */

@media (max-width: 768px) {

  button,

  a.btn-primary,

  a.btn-ghost,

  .btn-card {

    min-height: 44px;

    min-width: 44px;

  }

  

  .nav-link {

    padding: 0.75rem 1rem;

  }

}



/* RESPONSIVE - ABOUT SECTION */

@media (max-width: 768px) {

  .about-title {

    font-size: 2.5rem !important;

    text-align: center;

  }

  

  .about-title .line {

    font-size: 2.5rem !important;

  }

  

  .about-subtitle {

    font-size: 1rem !important;

    text-align: center;

    margin: 0 auto;

  }

  

  .about-badges {

    justify-content: center !important;

    flex-wrap: wrap;

  }

  

  .about-gallery {

    margin-top: 2rem;

    gap: 1rem !important;

  }

  

  .about-img {

    min-height: 220px !important;

  }

}



/* RESPONSIVE - COOKIE CARD */

@media (max-width: 639px) {

  .cookie-card {

    position: static !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    width: 100% !important;

    max-width: 100% !important;

    padding: 1rem !important;

    margin-top: 1rem !important;

    border-radius: 12px !important;

  }

  

  .cookie-card p {

    font-size: 0.8rem !important;

  }

  

  .cookie-card button {

    font-size: 0.7rem !important;

    padding: 0.4rem 0.8rem !important;

  }

}



/* RESPONSIVE - LOGO STICKER */

@media (max-width: 768px) {

  .logo-sticker {

    width: 70px !important;

    height: 70px !important;

    font-size: 1.5rem !important;

  }

}



/* RESPONSIVE - TOPBAR */

@media (max-width: 639px) {

  .topbar {

    padding: 0.5rem 0 !important;

  }

  

  .topbar .social-icon {

    font-size: 0.875rem !important;

  }

}



/* RESPONSIVE - MOBILE MENU */

@media (max-width: 768px) {

  .mobile-menu {

    width: 100%;

    max-width: 100%;

  }

  

  .mobile-menu .nav-link {

    font-size: 1.125rem !important;

    padding: 1rem !important;

  }

}



/* RESPONSIVE - BAND WHITE SECTION */

@media (max-width: 639px) {

  .band-white {

    padding: 2rem 0 !important;

  }

}



/* RESPONSIVE - FOODTRUCK CAROUSEL */

@media (max-width: 768px) {

  .ft-carousel {

    padding: 0 2rem;

  }

  

  .ft-arrow {

    width: 35px !important;

    height: 35px !important;

    font-size: 0.875rem !important;

  }

  

  .ft-item {

    min-height: 250px !important;

  }

  

  .ft-meta h3 {

    font-size: 1.5rem !important;

  }

  

  .ft-meta p {

    font-size: 0.875rem !important;

  }

}



@media (max-width: 639px) {

  .ft-carousel {

    padding: 0 1rem;

  }

  

  .ft-arrow {

    width: 30px !important;

    height: 30px !important;

    font-size: 0.75rem !important;

  }

  

  .ft-item {

    min-height: 220px !important;

  }

}



/* RESPONSIVE - GUARANTEES LIST */

@media (max-width: 768px) {

  .guarantees-list {

    padding-left: 0 !important;

  }

  

  .guarantee-item {

    font-size: 0.875rem !important;

    padding: 0.75rem 0 !important;

  }

  

  .check-dot {

    font-size: 1.125rem !important;

  }

}



/* RESPONSIVE - COVERAGE SECTION */

@media (max-width: 768px) {

  .coverage {

    flex-direction: column !important;

    gap: 1.5rem !important;

  }

  

  .coverage .col {

    text-align: center;

    padding: 1.5rem !important;

  }

  

  .coverage h3 {

    font-size: 1.125rem !important;

  }

  

  .coverage p {

    font-size: 0.875rem !important;

  }

}



/* RESPONSIVE - STEPS GRID */

@media (max-width: 1023px) {

  .steps-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1rem !important;

  }

}



@media (max-width: 639px) {

  .steps-grid {

    grid-template-columns: 1fr !important;

  }

  

  .step-card {

    padding: 1.5rem !important;

  }

  

  .step-card h3 {

    font-size: 1rem !important;

  }

  

  .step-card p {

    font-size: 0.875rem !important;

  }

}



/* RESPONSIVE - CASES GRID */

@media (max-width: 1023px) {

  .cases-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1.5rem !important;

  }

}



@media (max-width: 639px) {

  .cases-grid {

    grid-template-columns: 1fr !important;

    gap: 1rem !important;

  }

}



/* RESPONSIVE - LIST CHECK */

@media (max-width: 768px) {

  .list-check li {

    font-size: 0.875rem !important;

    line-height: 1.6 !important;

  }

}



/* RESPONSIVE - BTN CTA */

@media (max-width: 639px) {

  .btn-cta {

    font-size: 0.875rem !important;

    padding: 0.65rem 1.25rem !important;

    min-width: 120px !important;

  }

}



@media (max-width: 640px) {

  .btn-cta,

  .btn-primary,

  .btn-ghost,

  .btn-card,

  .btn-contact-primary,

  .btn-contact-secondary {

    width: auto !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-width: 120px !important;

  }

}



@media (max-width: 768px) {

  .btn-cta {

    padding: 0.55rem 1.25rem !important;

    font-size: 0.9rem !important;

    box-shadow: 0 3px 0 #111 !important;

    min-width: 120px !important;

  }



  .btn-primary,

  .btn-ghost,

  .btn-contact-primary,

  .btn-contact-secondary {

    padding: 0.7rem 1.5rem !important;

    font-size: 0.95rem !important;

    box-shadow: 0 3px 0 #111 !important;

    min-width: 140px !important;

  }



  .btn-card {

    padding: 0.65rem 1.3rem !important;

    font-size: 0.9rem !important;

    min-width: 130px !important;

  }

}



/* RESPONSIVE - TEXT GRADIENT */

@media (max-width: 768px) {

  .text-gradient {

    font-size: inherit !important;

  }

}



/* RESPONSIVE - GRID GENERAL FIX */

@media (max-width: 768px) {

  [class*="grid-cols"] {

    grid-template-columns: 1fr !important;

  }

  

  .md\:grid-cols-2,

  .md\:grid-cols-3,

  .md\:grid-cols-4 {

    grid-template-columns: 1fr !important;

  }

  

  .lg\:grid-cols-2 {

    grid-template-columns: 1fr !important;

  }

}



/* RESPONSIVE - MAX WIDTH FIX */

@media (max-width: 639px) {

  .max-w-xl,

  .max-w-2xl,

  .max-w-3xl,

  .max-w-4xl {

    max-width: 100% !important;

  }

}



/* RESPONSIVE - FLEXBOX FIX */

@media (max-width: 639px) {

  .flex-wrap {

    flex-wrap: wrap !important;

  }

  

  .sm\:flex-row {

    flex-direction: column !important;

  }

}



/* AMÉLIORATION PERFORMANCE - RÉDUCTION DES ANIMATIONS SUR MOBILE */

@media (max-width: 768px) {

  @media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

      animation-duration: 0.01ms !important;

      animation-iteration-count: 1 !important;

      transition-duration: 0.01ms !important;

    }

  }

}



/* ============================================

   MENU MOBILE - BURGER AVEC "MENU"

   ============================================ */



/* Les règles de menu sont gérées à la fin du fichier */



  

  /* Fix overflow horizontal */

  html, body {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }

  

  .shell {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }

  

  #main-header {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    padding-left: 1rem !important;

    padding-right: 1rem !important;

    padding-top: 1rem !important;

    padding-bottom: 1rem !important;

    width: 100% !important;

    max-width: 100vw !important;

    overflow: hidden !important;

    background: var(--paper) !important;

    z-index: 1000 !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;

  }

  

  /* Masquer tout élément après le header qui pourrait déborder */

  #main-header::after,

  #main-header::before {

    display: none !important;

  }

  

  /* Enlever seulement le trait/divider sous le header sur mobile */

  .header-divider,

  #main-header .border-t,

  #main-header .mt-4 {

    display: none !important;

    border: none !important;

    margin: 0 !important;

    padding: 0 !important;

  }

  

  #main-header nav {

    justify-content: space-between !important;

    position: relative;

    align-items: center;

    width: 100% !important;

    border: none !important;

    overflow: visible !important;

  }

  

  .header-logo {

    font-size: 1.25rem !important;

    text-align: center;

    flex: 1;

    margin: 0 0.5rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  

  .mobile-menu-toggle {

    display: flex !important;

    align-items: center;

    gap: 0.4rem;

    font-size: 0.75rem;

    flex-shrink: 0;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: all 0.3s ease;

    z-index: 10;

    padding: 0.4rem 0.8rem;

    border: 2px solid #000;

    border-radius: 0.5rem;

    background: white;

  }

  

  .mobile-menu-toggle:hover {

    transform: scale(1.05);

    background: #f5f5f5;

  }

  

  .mobile-menu-toggle i {

    font-size: 1.25rem;

  }

}



/* Menu mobile overlay */

/* Menu mobile overlay - Style de positionnement */

.mobile-menu-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.5);

  z-index: 9999 !important; /* Toujours au-dessus de tout (topbar: 2000, header scrolled: 2000) */

  transition: opacity 0.3s ease;

  opacity: 0;

  pointer-events: none;

}



.mobile-menu-overlay.active {

  opacity: 1;

  pointer-events: auto;

}



.mobile-menu-panel {

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 10000 !important; /* S'assurer qu'il est au-dessus de tout */

  position: relative;

}



.mobile-menu-overlay.active .mobile-menu-panel {

  transform: translateX(0);

}



/* Style du bouton de fermeture */

.mobile-menu-close {

  background: none;

  border: none;

  cursor: pointer;

  padding: 0.5rem;

  line-height: 1;

  transition: transform 0.3s ease;

}



.mobile-menu-close:hover {

  transform: rotate(90deg);

}



/* Liens du menu mobile */

.mobile-menu-panel a {

  display: flex;

  align-items: center;

}



.mobile-menu-panel a i {

  width: 24px;

  text-align: center;

}



/* Animation d'apparition des liens */

.mobile-menu-overlay.active .mobile-menu-panel a {

  animation: slideInFromRight 0.4s ease-out forwards;

}



@keyframes slideInFromRight {

  from {

    opacity: 0;

    transform: translateX(20px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.mobile-menu-panel a:nth-child(1) { animation-delay: 0.05s; }

.mobile-menu-panel a:nth-child(2) { animation-delay: 0.1s; }

.mobile-menu-panel a:nth-child(3) { animation-delay: 0.15s; }

.mobile-menu-panel a:nth-child(4) { animation-delay: 0.2s; }

.mobile-menu-panel a:nth-child(5) { animation-delay: 0.25s; }



/* Empêcher le scroll du body quand le menu est ouvert */

body.menu-open {

  overflow: hidden;

}



/* Les règles desktop sont gérées à la fin du fichier */





/* === CORRECTION FINALE MENU === */

/* Mobile < 768px : menu burger visible, menu desktop caché */

@media (max-width: 767px) {

  .header-desktop-nav { display: none !important; }

  .header-actions { display: none !important; }

  .mobile-menu-toggle { display: flex !important; }

}



/* Desktop >= 768px : menu desktop visible, burger caché */

@media (min-width: 768px) {

  .header-desktop-nav { display: flex !important; }

  .header-actions { display: flex !important; }

  .mobile-menu-toggle { display: none !important; }

}



/* Réduction des textes pour tablettes 768px-1023px */

@media (min-width: 768px) and (max-width: 1023px) {

  /* FORCE l'ordre image en haut */

  .relative.order-1,

  .md\:order-none,

  div[class*="order"] {

    order: -1 !important;

  }

  

  .hero-content {

    order: 1 !important;

  }

  

  /* Supprimer l'espace en haut de la page */

  body {

    padding-top: 0 !important;

  }

  

  /* Première section */

  body > .shell > section:first-of-type,

  .shell > section:first-of-type {

    margin-top: 0 !important;

  }

  

  /* Navigation */

  .nav-link {

    font-size: 0.75rem !important; /* 12px - encore plus petit */

  }

  

  /* Réduire l'espacement du menu desktop */

  .header-desktop-nav {

    gap: 1rem !important; /* Au lieu de 3rem */

  }

  

  /* Logo header */

  .header-logo {

    font-size: 1.25rem !important; /* 20px au lieu de 24px */

  }

  

  /* Réduire l'espacement entre les actions */

  .header-actions {

    gap: 0.75rem !important;

  }

  

  /* Padding du header */

  #main-header {

    padding-top: 0.5rem !important;

    padding-bottom: 0.5rem !important;

  }

  

  /* Hero section */

  .hero-title,

  h1 {

    font-size: 2rem !important; /* 32px */

  }

  

  .hero-subtitle {

    font-size: 1rem !important; /* 16px */

  }

  

  /* Section titles */

  .section-title,

  h2 {

    font-size: 1.5rem !important; /* 24px */

  }

  

  /* Texte general */

  body,

  p {

    font-size: 0.813rem !important; /* 13px */

  }

  

  /* Boutons généraux - Version courte pour mobile */

  .btn-cta {

    font-size: 0.813rem !important;

    padding: 0.65rem 1.25rem !important;

    min-width: 120px !important;

  }

  

  /* Footer */

  footer h4 {

    font-size: 1.125rem !important; /* 18px */

  }

  

  footer p,

  footer li,

  footer a {

    font-size: 0.75rem !important; /* 12px */

  }

  

  /* Container */

  .container {

    padding-left: 1rem !important;

    padding-right: 1rem !important;

  }

}




/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --cream: #121212;
    --off-white: #1a1a1a;
    --ink: #f5f1eb;
  }

  body,
  .shell {
    background: #121212 !important;
    color: #f5f1eb !important;
  }

  .topbar,
  #main-header,
  .header-sticky {
    background: #121212 !important;
  }

  .header-divider {
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  .nav-link,
  .header-actions .nav-link {
    color: #f5f1eb !important;
  }

  .nav-link:hover {
    color: #e6a57a !important;
  }

  .service-card,
  .quote-card,
  .cookie-card,
  .review-card,
  .review-card-modern,
  .contact-pill,
  details.faq,
  .mobile-menu-panel {
    background: #1a1a1a !important;
    color: #f5f1eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .contact-pill {
    position: relative;
    background: transparent !important;
  }

  .contact-pill::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    top: -24px;
    bottom: -24px;
    background: #ffffff;
    z-index: -1;
  }

  details.faq .faq-content {
    color: #f5f1eb !important;
    border-top-color: rgba(255, 255, 255, 0.2) !important;
  }

  .service-card p,
  .step-card p {
    color: #f5f1eb !important;
  }

  .bg-white,
  .bg-gray-50,
  .bg-gray-100 {
    background: #1a1a1a !important;
  }

  .band-white {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .band-white .section-title,
  .band-white .section-title a {
    color: #111111 !important;
  }

  .band-white a {
    color: inherit !important;
  }

  .band-white .text-gray-900,
  .band-white .text-gray-800,
  .band-white .text-gray-700,
  .band-white .text-gray-600,
  .band-white .text-gray-500 {
    color: #111111 !important;
  }

  .contact-form-section {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .contact-form-section .section-title,
  .contact-form-section p,
  .contact-form-section label,
  .contact-form-section .text-gray-600,
  .contact-form-section .text-gray-700 {
    color: #111111 !important;
  }

  .contact-form-section .form-field,
  .contact-form-section select,
  .contact-form-section textarea {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #e5e7eb !important;
  }

  .contact-form-section .form-field::placeholder {
    color: #6b7280 !important;
  }

  .contact-form-section input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0);
    opacity: 0.85;
  }

  .why-foodtruck .section-title,
  .why-foodtruck .text-gray-600,
  .why-foodtruck .text-gray-700,
  .why-foodtruck .service-card p {
    color: #e6a57a !important;
  }

  .logo-chip {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
  }

  .nav-submenu {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .nav-submenu a {
    color: #f5f1eb !important;
  }

  .nav-submenu a:hover {
    background: #242424 !important;
    color: #ffffff !important;
  }

  .badge-year,
  .about-badges .badge-year {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
  }

  .text-gray-900,
  .text-gray-800,
  .text-gray-700,
  .text-gray-600,
  .text-gray-500,
  .text-gray-400 {
    color: #d7d3ce !important;
  }

  .contact-card-modern .text-gray-700 {
    color: #111111 !important;
  }

  .contact-card-modern .form-field-modern {
    color: #f5f1eb !important;
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .contact-card-modern .form-field-modern::placeholder {
    color: #f5f1eb !important;
    opacity: 0.85;
  }

  .contact-card-modern input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
  }

  .review-text {
    color: #f5f1eb !important;
  }

  .btn-ghost {
    background: #1a1a1a !important;
    color: #f5f1eb !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  .btn-ghost:hover {
    background: #242424 !important;
    color: #ffffff !important;
  }

  input,
  textarea,
  select {
    background: #1a1a1a !important;
    color: #f5f1eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .footer-logo,
  .brand-display {
    color: #e6a57a !important;
  }

  .stats-band {
    background: #1a1a1a !important;
  }

  .pill {
    background: #e78341 !important;
  }

  .badge,
  .badge-animate {
    background: #1a1a1a !important;
    color: #f5f1eb !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  .badge-satisfaction {
    background: #2a1f18 !important;
    color: #e6a57a !important;
    border-color: #e6a57a !important;
  }

  .badge-satisfaction i {
    color: #ff6b6b !important;
  }

  .badge-circle {
    background: #2b2b2b !important;
  }

  .bottom-cta {
    background: #0f0f0f !important;
  }

  .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }
}

@media (max-width: 768px) {
  body.home-page .hero-title,
  body.home-page h1.hero-title {
    font-size: 2.15rem !important;
    line-height: 1.08 !important;
  }

  body.home-page .hero-subtitle-home-mobile {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }

  body.home-page .hero-description-home-mobile {
    font-size: 1rem !important;
    line-height: 1.8 !important;
  }

  body.home-page .badge,
  body.home-page .badge-animate {
    font-size: 0.95rem !important;
  }

  body.home-page .section-title,
  body.home-page h2 {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
  }

  body.home-page .btn-card,
  body.home-page .logo-chip,
  body.home-page .contact-pill,
  body.home-page .step-card p,
  body.home-page .service-card p,
  body.home-page .review-text,
  body.home-page .about-subtitle,
  body.home-page .faq-content,
  body.home-page details.faq summary,
  body.home-page .ft-meta,
  body.home-page .ft-desc,
  body.home-page .ft-name {
    font-size: 0.98rem !important;
  }

  body.home-page .btn-primary,
  body.home-page .btn-ghost,
  body.home-page .btn-cta,
  body.home-page .bottom-cta a {
    font-size: 1rem !important;
  }
}