/* ══════════════════════════════════════════════════════════════
   VARIABLES DE MARQUE — source unique de couleurs.
   Pour changer l'identité visuelle, modifiez uniquement ce bloc.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Valeurs en "R G B" (sans virgules) : format exigé par Tailwind pour
     activer les modificateurs d'opacité (bg-ink/98, ring-brand-600/40...).
     Ne PAS remettre de code hexadécimal ici, sous peine de faire
     disparaître silencieusement toutes les classes .../NN du site. */
  --brand-50:  255 247 237;
  --brand-100: 255 237 213;
  --brand-200: 254 215 170;
  --brand-300: 253 186 116;
  --brand-400: 251 146 60;
  --brand-500: 249 115 22;
  --brand-600: 234 88 12;
  --brand-700: 194 65 12;
  --brand-900: 124 45 18;

  --ink:      17 17 17;
  --ink-dark: 10 10 10;
  --ink-soft: 38 38 38;

  --rating: 245 158 11;

  --success-50:  236 253 245;
  --success-100: 209 250 229;
  --success-400: 52 211 153;
  --success-500: 16 185 129;
  --success-600: 5 150 105;
  --success-700: 4 120 87;
}

html{ scroll-behavior:smooth; scroll-padding-top: 90px; overflow-x:hidden; }
body{ font-family:'Inter', ui-sans-serif, system-ui, sans-serif; background:#fff; color:rgb(var(--ink)); overflow-x:hidden; position:relative; width:100%; }
.font-display{ font-family:'Anton', 'Arial Narrow', sans-serif; letter-spacing:.03em; }

::selection{ background:rgb(var(--brand-200)); color:rgb(var(--brand-900)); }
:focus-visible{ outline:3px solid rgb(var(--brand-600)); outline-offset:2px; border-radius:4px; }

/* ── Preloader ─────────────────────────────────────────────── */
#preloader{
  position:fixed; inset:0; z-index:9999; background:rgb(var(--ink));
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-flame{ width:56px; height:56px; position:relative; }
.preloader-flame span{
  position:absolute; inset:0; border:4px solid transparent; border-top-color:rgb(var(--brand-600));
  border-radius:50%; animation:spin 1s linear infinite;
}
.preloader-flame span:nth-child(2){ border-top-color:rgb(var(--brand-300)); animation-duration:1.4s; inset:8px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Navbar ────────────────────────────────────────────────── */
#site-header{ padding-top:.25rem; }
#site-header.scrolled{ background:rgba(17,17,17,.92); backdrop-filter:blur(14px); box-shadow:0 8px 30px -12px rgba(0,0,0,.4); padding-top:0; }
.nav-brand-text{ color:#fff; }
.nav-link{ color:rgba(255,255,255,.82); position:relative; padding-bottom:4px; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:rgb(var(--brand-600));
  transition:width .25s ease;
}
.nav-link:hover, .nav-link-active{ color:#fff; }
.nav-link:hover::after, .nav-link-active::after{ width:100%; }

#mobile-menu.open{ transform:translateX(0); }
.mobile-link{ display:flex; align-items:center; gap:12px; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,.06); }

/* ── Hero / Swiper ─────────────────────────────────────────── */
.hero-slide{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(160deg, rgb(var(--ink)) 0%, #1a1a1a 55%, rgb(var(--ink)) 100%);
  overflow:hidden;
}
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(234,88,12,.28), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(234,88,12,.18), transparent 40%);
  pointer-events:none;
}
.hero-pattern{
  position:absolute; inset:0; opacity:.05; pointer-events:none;
  /*background-image:
    repeating-linear-gradient(45deg, #fff 0, #fff 1.5px, transparent 1.5px, transparent 28px),
    repeating-linear-gradient(-45deg, #fff 0, #fff 1.5px, transparent 1.5px, transparent 28px);*/
}
.swiper-pagination-bullet{ background:#fff !important; opacity:.4 !important; }
.swiper-pagination-bullet-active{ background:rgb(var(--brand-600)) !important; opacity:1 !important; }
.swiper-button-next, .swiper-button-prev{ color:#fff !important; }
.swiper-button-next::after, .swiper-button-prev::after{ font-size:22px !important; }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:rgb(var(--brand-400));
  border:1px solid rgba(234,88,12,.4); background:rgba(234,88,12,.08);
  border-radius:999px; padding:8px 16px;
}

/* ── Marquee ticker ────────────────────────────────────────── */
.marquee-track{ display:flex; width:max-content; animation:marquee 24s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{ display:flex; align-items:center; gap:10px; padding:0 2.25rem; white-space:nowrap; font-weight:700; font-size:.85rem; letter-spacing:.04em; }

/* ── Illustrations flottantes ──────────────────────────────── */
.float-1{ animation:floaty 5s ease-in-out infinite; }
.float-2{ animation:floaty 6.5s ease-in-out infinite; animation-delay:.6s; }
.float-3{ animation:floaty 4.2s ease-in-out infinite; animation-delay:1.1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-16px) rotate(3deg); } }

.steam path{ animation:steam-rise 3s ease-in-out infinite; transform-origin:bottom; }
.steam path:nth-child(2){ animation-delay:.5s; }
.steam path:nth-child(3){ animation-delay:1s; }
@keyframes steam-rise{
  0%{ transform:translateY(0) scaleY(1); opacity:0; }
  25%{ opacity:.6; }
  55%{ transform:translateY(-12px) scaleY(1.08); opacity:.6; }
  100%{ transform:translateY(-26px) scaleY(1.15); opacity:0; }
}

/* ── Star rating ───────────────────────────────────────────── */
.star-fill{ fill:rgb(var(--rating)); }
.star-empty{ fill:none; stroke:rgb(var(--rating)); stroke-width:1.6; }

/* ── Category cards (flip on hover) ───────────────────────── */
.cat-card{ perspective:1400px; height:230px; cursor:pointer; }
.cat-card-inner{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.cat-card:hover .cat-card-inner, .cat-card.flipped .cat-card-inner{ transform:rotateY(180deg); }
.cat-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:1.25rem; overflow:hidden; }
.cat-face-back{ transform:rotateY(180deg); }

/* ── Menu ticket card ──────────────────────────────────────── */
.menu-card{ transition:transform .35s ease, box-shadow .35s ease; }
.menu-card:hover{ transform:translateY(-8px); box-shadow:0 24px 45px -20px rgba(17,17,17,.28); }
.menu-card-img{ transition:transform .6s ease; }
.menu-card:hover .menu-card-img{ transform:scale(1.08); }

/* ── Service card ──────────────────────────────────────────── */
.service-card{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(17,17,17,.3); border-color:rgb(var(--brand-200)); }
.service-icon{ transition:transform .35s ease, background .35s ease; }
.service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.08); background:rgb(var(--brand-600)); color:#fff; }

/* ── Counters ──────────────────────────────────────────────── */
.counter-num{ font-variant-numeric:tabular-nums; }

/* ── Chatbot ───────────────────────────────────────────────── */
#chatbot-panel.open{ transform:scale(1); opacity:1; pointer-events:auto; }
.chatbot-quick-reply{
  display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600;
  border:1px solid #E5E7EB; border-radius:12px; padding:10px 14px; color:rgb(var(--ink));
  transition:all .2s ease;
}
.chatbot-quick-reply:hover{ background:rgb(var(--brand-50)); border-color:rgb(var(--brand-200)); transform:translateX(3px); }
.chatbot-quick-reply i{ color:rgb(var(--brand-600)); width:18px; text-align:center; }
.chatbot-bubble{ animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

#back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ── Footer ────────────────────────────────────────────────── */
.footer-social{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.15); color:#fff; transition:all .25s ease;
}
.footer-social:hover{ background:rgb(var(--brand-600)); border-color:rgb(var(--brand-600)); transform:translateY(-3px); }
.footer-social-whatsapp:hover{ background:rgb(var(--success-600)); border-color:rgb(var(--success-600)); }
.footer-link{ color:rgba(255,255,255,.55); transition:color .2s ease, padding-left .2s ease; }
.footer-link:hover{ color:#fff; padding-left:4px; }
.bg-flame-pattern{
  /*background-image:repeating-linear-gradient(45deg, #fff 0, #fff 1.5px, transparent 1.5px, transparent 26px);*/
}

/* ── Boutons génériques avec effet ripple léger ──────────────── */
.btn-cta{ position:relative; overflow:hidden; }
.btn-cta::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.25);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.btn-cta:hover::after{ transform:scaleX(1); }
.btn-cta span, .btn-cta i{ position:relative; z-index:1; }

/* ── Formulaire contact ───────────────────────────────────── */
.form-field{
  width:100%; border:1.5px solid #E5E7EB; border-radius:.75rem; padding:.85rem 1rem;
  font-size:.9rem; transition:border-color .2s ease, box-shadow .2s ease; background:#fff;
}
.form-field:focus{ outline:none; border-color:rgb(var(--brand-600)); box-shadow:0 0 0 4px rgb(var(--brand-100)); }

/* Chosen : ré-habillage léger pour matcher l'identité de marque */
.chosen-container-single .chosen-single{
  border:1.5px solid #E5E7EB !important; border-radius:.75rem !important; height:48px !important;
  line-height:48px !important; padding:0 1rem !important; box-shadow:none !important;
}
.chosen-container-active.chosen-with-drop .chosen-single{ border-color:rgb(var(--brand-600)) !important; }
.chosen-container .chosen-results li.highlighted{ background:rgb(var(--brand-600)) !important; }

/* ── Reveal utilitaire (fallback si AOS indisponible) ────────── */
[data-aos]{ }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width:1023px){
  .hero-slide{ min-height:92vh; padding-top:5rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}