/* =========================================================
   MASTER TEAM GARAGE — styles.css (dark premium, clean)
   Palette : Noir #0b0b0f | Or #F0B000 | Rouge #E0261D
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0b0f;
  --panel:#121218;
  --alt:#0f0f15;
  --border:#21212a;
  --text:#ECECF2;
  --muted:#9aa0ad;
  --red:#E0261D;
  --gold:#F0B000;
  --white:#ffffff;

  --radius:16px;
  --container:1600px;

  --fs-hero:clamp(2.2rem,5vw,3.6rem);
  --fs-h2:clamp(1.6rem,3.2vw,2.2rem);
  --fs-p:1.05rem;

  --scroll-offset: 76px;

  --ease-out: cubic-bezier(.22,.9,.24,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur: .8s;
  --stagger: 70ms;           /* délai entre éléments */
}

[data-animate]{
  opacity:0;
  transform: translateY(16px) scale(.98);
  filter: blur(6px);
  transition:
    transform var(--dur) var(--ease-out),
    opacity .6s linear,
    filter var(--dur) var(--ease-out);
  will-change: transform, opacity, filter;
}
.in-view[data-animate]{
  opacity:1; transform:none; filter: blur(0);
}
[data-animate="right"]{ transform: translateX(24px) }
[data-animate="left"]{ transform: translateX(-24px) }
[data-animate="scale"]{ transform: scale(.92) }
[data-animate="flip"]{ transform: rotateX(8deg) translateY(12px); transform-origin:50% 60% }
.in-view[data-animate="flip"]{ transform: rotateX(0) translateY(0) }
[data-animate][style*="--i"]{ transition-delay: calc(var(--i) * var(--stagger)) }

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,
               "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  letter-spacing:.01em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.muted{color:var(--muted); text-align:center; margin-bottom:50px}
.small{font-size:.9rem}

/* Accessibilité */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,11,15,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__inner{
  min-height:60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav__brand{display:flex; align-items:center; gap:10px; font-weight:450; letter-spacing:.3px}
.nav__logo{width:36px; height:36px; object-fit:contain; border-radius:6px}
.nav__name{font-size:1.02rem}
.nav__toggle{display:none}

.menu{display:flex; align-items:center; gap:18px}
.menu a{padding:5px 10px; border-radius:12px; opacity:.92; position:relative; }
.menu a:hover{opacity:1; background:#15151d; text-decoration:none}
.nav-icon{width:24px; height:24px; fill:var(--text); transition:fill .2s ease}
.menu a:hover .nav-icon{fill:var(--gold)}
.menu a.is-active{opacity:1; color: var(--gold); background:#15151d; text-decoration:none; outline:1px solid rgba(240,176,0,.22);}
.menu a.is-active .nav-icon{ fill: var(--gold); }
.menu a::after{content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;background: linear-gradient(90deg, var(--gold), var(--red));transform: scaleX(0); transform-origin: left;transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);opacity:.85;}
.menu a:hover::after,
.menu a.is-active::after{ transform: scaleX(1) }

@media (max-width:760px){
  .nav__toggle{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    border:1px solid #2a2a34; background:#121218; color:var(--text);
  }
  .menu{
    position:absolute; right:20px; top:64px; display:none; flex-direction:column; gap:10px;
    width:min(260px,calc(100vw - 40px));
    background:#121218; border:1px solid var(--border); border-radius:14px; padding:10px;
  }
  .menu.open{display:flex}
}


/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  font-weight:800; border:1.5px solid transparent;
  color:#fff; background:var(--red);
  box-shadow:0 10px 24px rgba(224,38,29,.20);
  transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  transition: transform .18s var(--ease-bounce), box-shadow .18s var(--ease-bounce);
}
.btn:hover{transform:translateY(-1px); opacity:.96; box-shadow:0 14px 36px rgba(224,38,29,.28); transform: translateY(-2px) scale(1.02)}
.btn--sm{padding:8px 14px}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; display:grid; place-items:center;
  border-bottom:1px solid var(--border); overflow:hidden; background:#0b0b0f;
  scroll-margin-top: var(--scroll-offset);
}
.hero__content{position:relative; z-index:1; text-align:center}
.hero__title{
  font-size:var(--fs-hero); line-height:1.06; font-weight:900;
  margin:0 0 30px;
}
.hero__subtitle{
  color:#d7d9e1; margin:0 auto 30px; max-width:680px; font-size:var(--fs-p);
}
.hero__eyebrow{
  margin:0 0 10px; color:var(--gold); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; font-size:.9rem; opacity:.95;
}
.hero__actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.hero__phone{
  display:inline-block; padding:10px 0; margin-left:8px; color:var(--text);
  opacity:.9; text-decoration:underline dotted; text-underline-offset:3px;
}
.hero__phone:hover{opacity:1}

/* Aurora */
.aurora{position:absolute; inset:0; z-index:0; pointer-events:none; transform: translateY(calc(var(--scroll, 0) * -0.12px)); will-change: transform }
.aurora::before,.aurora::after{
  content:""; position:absolute; width:55vmax; height:55vmax;
  filter:blur(70px); opacity:.18; mix-blend-mode:screen;
}
.aurora::before{
  top:-15vmax; left:-10vmax;
  background:radial-gradient(closest-side, rgba(240,176,0,.95) 0%, rgba(224,38,29,.45) 55%, rgba(224,38,29,0) 70%);
  animation:driftA 5s ease-in-out infinite alternate;
}
.aurora::after{
  bottom:-12vmax; right:-8vmax;
  background:radial-gradient(closest-side, rgba(224,38,29,.85) 0%, rgba(240,176,0,.4) 50%, rgba(240,176,0,0) 70%);
  animation:driftB 3s ease-in-out infinite alternate;
}
@keyframes driftA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(12px,-88px) scale(1.5)}}
@keyframes driftB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-100px,10px) scale(1.3)}}
@media (prefers-reduced-motion: reduce){.aurora::before,.aurora::after{animation:none};  *, *::before, *::after{animation: none !important;transition: none !important;}}

/* Flèche scroll */
.scroll-down{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:999px; color:var(--gold);
  border:1px solid rgba(240,176,0,.45);
  background:linear-gradient(180deg, rgba(240,176,0,.06), rgba(0,0,0,.0));
  animation:scroll-bounce 1.4s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.scroll-down:hover{
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 10px 24px rgba(240,176,0,.18);
  color:#fff; border-color:rgba(255,255,255,.6);
}
.scroll-down__icon{width:22px; height:22px; fill:currentColor; opacity:.95}
@keyframes scroll-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@media (prefers-reduced-motion: reduce){.scroll-down{animation:none}}
@media (max-width:780px){.scroll-down{bottom:14px}}

/* Accent texte */
.accent{
  background:linear-gradient(90deg,var(--gold),var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.word-animated{animation:gradientFlow 14s ease infinite; background-size:300% 300%}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---------- Sections ---------- */
.section{padding:72px 0; scroll-margin-top: var(--scroll-offset);}
.section--alt{background:var(--alt)}
.section__head{margin-bottom:18px}
.section__head h2{
  margin:0 0 6px; font-size:var(--fs-h2);
  color:var(--gold); letter-spacing:.2px; text-align:center;
}

/* ---------- Cartes (points forts) ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.price{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; text-align:center;transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  will-change: transform;}
.price__value{
  font-size:1.6rem; font-weight:900; margin:6px auto 10px; display:inline-block;
  background:linear-gradient(90deg,var(--gold),var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price--highlight{border-color:#2b2a1f; box-shadow:0 12px 28px rgba(240,176,0,.18)}

@media (max-width:980px){
  .pricing{grid-template-columns:1fr}
}

@media (hover:hover) and (pointer:fine){
  .price:hover{ box-shadow:0 18px 40px rgba(0,0,0,.35) }
}

/* ---------- À propos ---------- */
.history-section{position:relative; overflow:hidden; background:#0b0b10}
.history-text{max-width:800px; margin:0 auto; font-size:1.05rem; line-height:1.7}
.history-text h3{margin-top:24px; margin-bottom:8px; font-size:1.3rem; color:var(--gold)}
.history-text p{margin-bottom:16px}
.history-values{list-style:none; padding-left:0; margin-top:12px}
.history-values li{margin-bottom:8px; padding-left:1.4em; position:relative}
.history-values li::before{content:"•"; position:absolute; left:0; color:var(--red); font-weight:bold}
.cursor-light{
  position:absolute; left:0; top:0; width:240px; height:240px; border-radius:50%;
  pointer-events:none;
  background: radial-gradient(circle, rgba(240,176,0,.28), transparent 70%);
  filter: blur(36px);
  transform: translate3d(-50%, -50%, 0);
  z-index:0;
}

/* ---------- Media : carrousel ---------- */
.carousel{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:#0b0b0f}
.carousel-track{display:flex; transition:transform .6s ease}
.carousel-item{flex:0 0 100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:#0b0b0f}
.carousel-item img{width:100%; height:100%; object-fit:cover; object-position:center; transform: scale(1) translateZ(0); }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(0,0,0,.25); border:none; color:#fff;
  font-size:2rem; padding:6px 12px; border-radius:12px; cursor:pointer;
}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.carousel-item.is-active img{ animation: kenburns 12s ease-in-out both }

@keyframes kenburns{
  0%   { transform: scale(1) translate(0,0) }
  100% { transform: scale(1.06) translate(-2%, -2%) }
}

.media-split{
  display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:auto auto;
  grid-template-areas:"left right" "left cta";
  column-gap:20px; row-gap:12px; align-items:stretch;
}
.media-left{grid-area:left; display:flex; flex-direction:column; gap:12px}
.media-right{grid-area:right; display:flex; flex-direction:column; gap:12px}
.media-cta{grid-area:cta; justify-self:end}
@media (max-width:980px){
  .media-split{grid-template-columns:1fr; grid-template-areas:"left" "right" "cta"}
  .media-cta{justify-self:center; margin-top:10px}
}

/* Quand il n'y a que le carrousel */
.media-split > .media-left:only-child{
  grid-column:1 / -1; justify-self:center; width:min(100%, 980px);
}
.media-left .carousel{width:100%; margin:0 auto}
#media .media-split{row-gap:16px}

/* ---------- Carte Google Maps en card ---------- */
.map-wrap{
  margin:20px 0; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--panel);
}
.map-embed{position:relative; width:100%; aspect-ratio:16 / 9}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- Footer & CTA flottant ---------- */
.footer{border-top:1px solid var(--border); padding:28px 0; background:#0b0b10}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cta-fab{
  position:fixed; right:16px; bottom:16px; z-index:30;
  padding:12px 16px; border-radius:999px; font-weight:800;
  color:#fff; background:var(--red);
  box-shadow:0 10px 24px rgba(224,38,29,.3);
}
@media (min-width:880px){.cta-fab{display:none}}

/* ===== Mobile pack (responsive + confort tactile) ===== */

/* Safe area iPhone */
.cta-fab{ bottom: calc(16px + env(safe-area-inset-bottom)); }

/* Nav : surlignage actif déjà géré, on améliore la hit-area */
.menu a,
.btn,
.nav__toggle{ min-height:44px; }

/* Breakpoint principal mobile */
@media (max-width:760px){
  :root{
    --fs-hero: clamp(1.8rem, 7vw, 2.6rem);
    --fs-h2: clamp(1.25rem, 4.5vw, 1.6rem);
    --fs-p: 1rem;
    --scroll-offset: 64px; /* ancres = marge sous navbar */
  }

  .container{ padding: 0 16px; }

  /* Navbar : menu “feuille” centré et confortable */
  .nav__toggle{ display:inline-flex; }
  .menu{
    position: fixed; left: 10px; right: 10px; top: 66px;
    display:none; flex-direction:column; gap:10px;
    padding:12px; border-radius:14px; z-index:50;
    background:#121218; border:1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }
  .menu.open{ display:flex; }
  .menu a{
    padding:12px 14px; border-radius:12px;
    border:1px solid var(--border); background:#14141b;
  }
  .menu .btn{ width:100%; text-align:center; }

  /* Corps : le scroll de fond est bloqué quand le menu est ouvert */
  body.menu-open{ overflow:hidden; }

  /* Hero compact + boutons lisibles */
  .hero{ min-height:86vh; }
  .hero__actions{ gap:8px; }
  .btn{ padding:12px 16px; }
  .btn.btn--sm{ padding:10px 14px; }
  .hero__phone{ display:block; margin:6px 0 0; font-size:1rem; }

  /* Scroll-down un peu plus bas */
  .scroll-down{ bottom:10px; }

  /* Grilles en pile */
  .pricing{ grid-template-columns:1fr; gap:16px; }

  /* Media */
  .media-split{ grid-template-columns:1fr; grid-template-areas:"left" "right" "cta"; }
}

/* Mobile plus serré */
@media (max-width:600px){
  .section{ padding:52px 0; }
  .carousel-item{ aspect-ratio: 4 / 3; }
  .map-embed{ aspect-ratio: 4 / 3; }
  .footer__inner{ flex-direction:column; text-align:center; gap:8px; }

  /* Aurora moins gourmande sur petits GPUs */
  .aurora::before, .aurora::after{ filter: blur(60px); opacity:.14; }
}

/* Tablettes (entre mobile et desktop) */
@media (min-width:761px) and (max-width:980px){
  .pricing{ grid-template-columns: repeat(2, 1fr); }
  .media-split{ grid-template-columns:1fr; grid-template-areas:"left" "right" "cta"; }
}