:root{
    --navy: #0c1524;
    --navy-2: #101c30;
    --red: #ed1c24;
    --cream: #f4f1ea;
    --yellow: #ffd400;
    --blue: #0072bc;
    --ink: #14181f;
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;}
  body{
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink);
    margin:0;
  }
  h1,h2,h3,.display{ font-family: var(--font-display); letter-spacing:-0.02em; }
  .eyebrow{
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
  }
  .eyebrow.light{ color: var(--yellow); }
 a{
	 text-decoration:none;
 }
  /* ---------- NAVBAR ---------- */
  .navbar-alocamp{
    background: var(--navy);
    padding: .6rem 0;
  }
  .navbar-alocamp .navbar-brand{
    padding: 0;
  }
  .navbar-logo{
    height: 56px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
  }
  .navbar-alocamp .nav-link{
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    font-weight: 500;
  }
  .social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ed1c24;
    border: 1px solid #ed1c24;
    border-radius: 50%;
    font-size: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background: #ed1c24;
    color: white;
}
  .navbar-alocamp .nav-link:hover{ color: #fff; }
  .btn-rdv{
    background: var(--red);
    color:#fff;
    border-radius: 40px;
    padding: .55rem 1.3rem;
    font-weight: 600;
    font-size: .85rem;
    border:none;
    white-space:nowrap;
  }
  .btn-rdv:hover{ background:#c9351f; color:#fff; }

  /* ---------- HERO CAROUSEL ---------- */
  .hero-wrap{ position: relative; }
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item{ min-height: 92vh; }
  .hero{
    position: relative;
    min-height: 92vh;
    display:flex;
    align-items:flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color:#fff;
    overflow:hidden;
  }
  .hero-content{ padding-bottom: 6.5rem; position:relative; z-index:2; }
  .hero h1{
    font-size: 75px;
    line-height: .95;
    margin: .5rem 0 1rem;
  }
  .hero h2{
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: .95;
    margin: .5rem 0 1rem;
  }
  .hero .lead{
    font-size: 1.15rem;
    max-width: 480px;
    color: rgba(255,255,255,.85);
  }
  .hero .sub{
    font-size: .95rem;
    max-width: 420px;
    color: #fff;
    margin-bottom: 2rem;
  }
  .btn-hero-primary{
    background: var(--red);
    color:#fff;
    border-radius: 50px;
    padding: .8rem 1.6rem;
    font-weight:600;
    border:none;
  }
 
  .btn-hero-primary:hover{ background:#c9351f; color:#fff; }
  .btn-hero-outline{
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    color:#fff;
    border-radius: 50px;
    padding: .8rem 1.6rem;
    font-weight:600;
  }
  .btn-hero-outline:hover{ background: rgba(255,255,255,.1); color:#fff; }
  .hero-arrow{
    position:absolute; right: 2rem; top: 42%;
    width:52px; height:52px; border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center;
    color:#fff; z-index:5; background:rgba(255,255,255,.08);
    font-size: 1.3rem;
    cursor: pointer;
  }
  .hero-arrow:hover{ background: rgba(255,255,255,.2); }
  .hero-footer-wrap{
    position:absolute; left:0; right:0; bottom: 1.6rem; z-index:4;
  }
  .hero-footer{
    display:flex; justify-content:space-between; align-items:center;
    font-family: var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.55);
    padding-top: 1.2rem;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .hero-footer .bar{
    flex:1; height:2px; background: rgba(255,255,255,.15); margin:0 1.5rem; position:relative;
  }
  .hero-footer .bar-fill{
    position:absolute; left:0; top:0; height:100%; background: var(--red);
    transition: width .4s ease;
  }

  /* ---------- LOGO BADGE (chevauche hero / section suivante) ---------- */
  .logo-badge-wrap{
    position: relative;
    height: 0;
  }
  .logo-badge{
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px; height: 68px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 5;
  }
  .logo-badge img{
    width: 220%;
    max-width: 220%;
    height: auto;
    position: absolute;
    left: -18%;
    top: 4%;
  }

  /* ---------- HUB SECTION ---------- */
  .section-hub{ padding: 6rem 0; }
  .section-hub h2{
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.05;
  }
  .hub-card{
    position:relative;
    border-radius: 14px;
    overflow:hidden;
    min-height: 380px;
    background-size: cover;
    background-position:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding: 1.4rem;
    color:#fff;
  }
  .hub-card::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(10,16,28,.15) 0%, rgba(10,16,28,.85) 100%);
    z-index:0;
  }
  .hub-card > *{ position:relative; z-index:1; }
  .hub-card.dark-panel{ background: var(--navy); }
  .hub-card .tag{
    font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; color: var(--yellow);
  }
  .hub-card .icon-badge{
    width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    align-self:flex-end;
  }
  .hub-card .cat{
    font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; color: var(--yellow); margin-bottom:.3rem;
  }
  .hub-card h3{ font-size: 1.9rem; margin:0; }
  .hub-card ul{ list-style:none; padding:0; margin: .8rem 0 1.2rem; font-size:.85rem; color:rgba(255,255,255,.8); }
  .hub-card ul li{ padding: .18rem 0; }
  .hub-card ul li::before{ content:'· '; color: var(--red); }

  /* ---------- OCCASION SECTION ---------- */
  .section-occasion{ background: var(--navy); color:#fff; padding: 6rem 0; }
  .section-occasion h2{ font-size: clamp(2.2rem, 5vw, 3.4rem); line-height:1.05; }
  .section-occasion h2 .accent{ color: var(--red); }
  .veh-card{
    position:relative; border-radius:14px; overflow:hidden;
    background-size:cover; background-position:center;
    min-height: 260px; display:flex; align-items:flex-end;
  }
  .veh-card::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(10,16,28,0) 40%, rgba(10,16,28,.9) 100%);
  }
  .veh-card .veh-info{ position:relative; z-index:1; padding: 1.1rem; width:100%; }
  .veh-card .price-badge{
    position:absolute; top:1rem; right:1rem; z-index:2;
    background:#fff; color:var(--ink); font-weight:700;
    padding:.4rem .8rem; border-radius:8px; font-size:.85rem;
  }
  .veh-card .price-badge small{ display:block; font-weight:400; font-size:.65rem; color:#777; }
  .veh-card .veh-tag{
    display:inline-block; background: var(--yellow); color:var(--ink); font-size:.65rem;
    font-family: var(--font-mono); padding: .15rem .5rem; border-radius:4px; margin-bottom:.4rem;
  }
  .veh-card.big{ min-height: 540px; }
  .veh-card.big .veh-tag.sel{ background: var(--red); color:#fff; }
  .veh-card h4{ margin:0; font-family: var(--font-display); font-size:1.4rem; }
  .veh-meta{ font-size:.78rem; color: rgba(255,255,255,.7); margin-top:.3rem; }

  /* ---------- ACCESSORIES SLIDER ---------- */
  .section-access{ padding: 6rem 0 3rem; }
  .access-track{
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .access-track::-webkit-scrollbar{ display:none; }
  .access-card{
    position:relative;
    flex: 0 0 auto;
    width: calc(50% - .75rem);
    scroll-snap-align: start;
  }
  @media (min-width: 768px){
    .access-card{ width: calc(25% - 1.125rem); }
  }
  .access-card img{ width:100%; height:220px; object-fit:cover; border-radius:12px; background:#e5e2da; }
  .access-cat{
    position:absolute; top:.7rem; left:.7rem;
    background: rgba(12,21,36,.85); color:#fff; font-size:.65rem;
    font-family: var(--font-mono); padding:.2rem .6rem; border-radius:5px;
  }
  .access-card h5{ font-size:1rem; margin: .8rem 0 .1rem; font-weight:700; }
  .access-card .price{ color: var(--red); font-weight:700; }
  .access-card .meta{ font-size:.75rem; color:#777; }
  .scroll-arrow{
    width:44px; height:44px; border-radius:50%; border:1px solid #ccc;
    display:flex; align-items:center; justify-content:center; background:#fff;
    cursor: pointer;
  }
  .scroll-arrow:hover{ border-color: var(--red); color: var(--red); }

  /* ---------- FOOTER ---------- */
  footer{ background: var(--navy); color: rgba(255,255,255,.7); padding-top: 4rem; }
  footer h6{
    font-family: var(--font-mono); font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color: var(--yellow); margin-bottom:1rem;
  }
  footer a{ color: rgba(255,255,255,.65); text-decoration:none; font-size:.85rem; display:block; margin-bottom:.5rem; }
  footer a:hover{ color:#fff; }
  footer .big-year{ font-family: var(--font-display); font-size: clamp(2.5rem,7vw,4.5rem); color: var(--cream); }
  footer .bottom-bar{
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 3rem; padding: 1.2rem 0;
    font-size: .75rem; color: rgba(255,255,255,.4);
  }
  .newsletter input{
    border-radius: 8px; border:none; padding:.6rem .9rem; width:100%; margin-bottom:.6rem;
  }
  .btn-subscribe{
    background: var(--red); color:#fff; border:none; border-radius:8px;
    padding: .6rem 1rem; font-weight:600; width:100%;
  }

  @media (max-width: 767px){
    .hero{ min-height: 80vh; }
    .hero-arrow{ display:none; }
    .veh-card.big{ min-height: 340px; }
    .section-hub, .section-occasion{ padding: 3.5rem 0; }
  }