/* ── Variables ────────────────────────────────────────────── */
:root {
    --lp-primary:      #0ea5e9;
    --lp-primary-dark: #0284c7;
    --lp-dark:         #0f172a;
    --lp-slate:        #1e293b;
    --lp-ocean:        #06b6d4;
    --lp-volcano:      #f97316;
    --lp-lava:         #fbbf24;
}

html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: #1e293b; margin: 0; }

/* ── Navbar ──────────────────────────────────────────────── */
#mainNav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 1rem 0;
    transition: background .3s, box-shadow .3s;
}
#mainNav.scrolled {
    background: rgba(15,23,42,.97) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.nav-brand {
    font-size: 1.45rem; font-weight: 800; letter-spacing: -.5px;
    color: #fff; text-decoration: none;
}
.nav-brand:hover { color: #7dd3fc; }
.nav-brand i { color: #7dd3fc; }
.nav-link-item {
    color: rgba(255,255,255,.85) !important; font-weight: 500; font-size: .92rem;
    padding: .4rem .9rem !important; transition: color .2s; text-decoration: none;
}
.nav-link-item:hover { color: #7dd3fc !important; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn-sky {
    background: #0ea5e9; color: #fff; border: none;
    padding: .8rem 2rem; border-radius: 50px; font-weight: 600; font-size: .95rem;
    box-shadow: 0 4px 18px rgba(14,165,233,.4); transition: all .2s;
    text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-sky:hover { background: #0284c7; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(14,165,233,.5); }
.btn-sky-sm { padding: .5rem 1.3rem; font-size: .87rem; }
.btn-warm {
    background: linear-gradient(135deg, #f97316, #fbbf24); color: #fff; border: none;
    padding: .8rem 2rem; border-radius: 50px; font-weight: 600; font-size: .95rem;
    box-shadow: 0 4px 18px rgba(249,115,22,.35); transition: all .2s;
    text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-warm:hover { background: linear-gradient(135deg, #ea580c, #f59e0b); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(249,115,22,.45); }
.btn-outline-white {
    background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5);
    padding: .8rem 2rem; border-radius: 50px; font-weight: 500; font-size: .95rem;
    transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); color: #fff; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    background: linear-gradient(160deg, rgba(0,10,30,.85) 0%, rgba(0,15,40,.6) 50%, rgba(0,5,20,.75) 100%),
                url('/images/reunion-bg.webp') center 40%/cover;
    display: flex; align-items: center; position: relative;
}
.hero-inner { position: relative; z-index: 1; color: #fff; max-width: 720px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(14,165,233,.22); border: 1px solid rgba(14,165,233,.4);
    color: #bae6fd; padding: .32rem .95rem; border-radius: 50px;
    font-size: .82rem; font-weight: 600; letter-spacing: .5px; margin-bottom: 1.2rem;
}
.hero-brand {
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 900; line-height: 1; letter-spacing: -2px;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.6));
    margin-bottom: .6rem;
}
.hero-brand-loc {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-brand-a { color: rgba(255,255,255,.45); font-size: .65em; }
.hero-brand-li {
    background: linear-gradient(135deg, #f97316, #fbbf24);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-catch {
    font-size: clamp(1rem, 4vw, 1.3rem); font-weight: 300; color: rgba(255,255,255,.8);
    letter-spacing: .5px; margin-bottom: .6rem;
}
.hero-sub {
    font-size: 1rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 1.4rem;
}
.hero-phone {
    display: inline-flex; align-items: center; gap: .6rem;
    color: #bae6fd; font-size: 1.05rem; font-weight: 600;
    text-decoration: none; margin-bottom: 2rem;
    transition: color .2s;
}
.hero-phone:hover { color: #7dd3fc; }

/* ── Sections génériques ─────────────────────────────────── */
section { padding: 80px 0; }
.stag {
    display: inline-block; color: #0ea5e9; font-weight: 700;
    font-size: .78rem; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: .4rem;
}
.stag-warm { color: #f97316; }
.stitle { font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 700; color: #0f172a; margin-bottom: .9rem; }
.sdesc  { color: #64748b; font-size: 1rem; line-height: 1.75; }

/* ── About ───────────────────────────────────────────────── */
.kpi-card {
    padding: 1.5rem; border-radius: 14px; height: 100%;
    border: 1px solid;
}
.kpi-card.blue   { background: #f0f9ff; border-color: #bae6fd; }
.kpi-card.green  { background: #f0fdf4; border-color: #86efac; }
.kpi-card.amber  { background: #fefce8; border-color: #fde047; }
.kpi-card.purple { background: #faf5ff; border-color: #e9d5ff; }

/* ── Flotte ──────────────────────────────────────────────── */
.fleet-bg { background: #f8fafc; }
.fleet-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid #e2e8f0; transition: transform .2s, box-shadow .2s;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
}
.fleet-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); border-color: #bae6fd; }
.fleet-thumb {
    height: 200px; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: .5rem;
}
.fleet-thumb img {
    width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform .4s ease;
}
.fleet-card:hover .fleet-thumb img { transform: scale(1.04); }
.fleet-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.fleet-cat { font-size: .73rem; font-weight: 700; color: #0ea5e9; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .3rem; min-height: 1.05em; }
.fleet-name { font-size: 1.08rem; font-weight: 700; color: #0f172a; margin-bottom: .55rem; }
.fleet-specs {
    font-size: .84rem; color: #64748b;
    display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem;
}
.fleet-specs span { display: flex; align-items: center; gap: .3rem; }
.fleet-price {
    font-size: 1.4rem; font-weight: 800; margin-top: auto;
    background: linear-gradient(135deg, #f97316, #fbbf24);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fleet-price small { font-size: .78rem; font-weight: 500; -webkit-text-fill-color: #94a3b8; color: #94a3b8; }
.fleet-price small { font-size: .78rem; font-weight: 500; color: #94a3b8; }

/* ── Promotion ── */
.fleet-promo-badge {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    background: #dc2626; color: #fff; font-weight: 800; font-size: .82rem;
    padding: .28rem .62rem; border-radius: 999px; letter-spacing: .3px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .35);
}
.fleet-price-block { margin-top: auto; }
.fleet-price-old {
    display: block; font-size: .92rem; font-weight: 600; color: #94a3b8;
    text-decoration: line-through; margin-bottom: .1rem;
}
.fleet-price-promo {
    margin-top: 0;
    background: linear-gradient(135deg, #dc2626, #f97316);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fleet-price-promo small { -webkit-text-fill-color: #94a3b8; color: #94a3b8; }

/* ── Services ────────────────────────────────────────────── */
.services-bg { background: #f1f5f9; }
.srv-card {
    background: #fff; border-radius: 16px; padding: 1.75rem 1.6rem; height: 100%;
    border: 1px solid #e2e8f0; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.srv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(14,165,233,.12); border-color: #bae6fd; }
.srv-icon {
    width: 52px; height: 52px; border-radius: 13px; background: #e0f2fe;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #0ea5e9; margin-bottom: 1.1rem;
}
.srv-icon.warm { background: #fff3e0; color: #f97316; }
.srv-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.srv-desc  { color: #64748b; font-size: .92rem; line-height: 1.65; margin: 0; }

/* ── Zone de livraison ───────────────────────────────────── */
.zone-chips { display: flex; flex-wrap: wrap; }
.zone-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1;
    padding: .4rem .9rem; border-radius: 50px; font-size: .88rem; font-weight: 500;
    margin: .25rem;
}
.zone-map-wrap {
    border-radius: 16px; overflow: hidden;
    border: 1px solid #e2e8f0;
    aspect-ratio: 16 / 9;
    max-height: 300px;
    width: 100%;
}
.zone-map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Témoignages ─────────────────────────────────────────── */
.testi-bg { background: #f8fafc; }
.testi-marquee-wrap {
    overflow: hidden;
    padding: .5rem 0 2rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.testi-marquee {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marqueeScroll 55s linear infinite;
}
.testi-marquee:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.testi-card {
    background: #fff; border-radius: 16px; padding: 1.75rem;
    border: 1px solid #e2e8f0; width: min(300px, 90vw); flex-shrink: 0;
    display: flex; flex-direction: column;
    transition: box-shadow .2s, border-color .2s;
}
.testi-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #bae6fd; }
.testi-stars { color: #fbbf24; font-size: 1rem; margin-bottom: .75rem; }
.testi-text { color: #334155; font-size: .95rem; line-height: 1.7; font-style: italic; flex-grow: 1; margin-bottom: 1.25rem; }
.testi-author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.testi-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: #0ea5e9; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.testi-name     { font-weight: 700; font-size: .92rem; color: #0f172a; }
.testi-location { font-size: .78rem; color: #94a3b8; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item {
    border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: .75rem;
}
.faq-q {
    background: #fff; padding: 1rem 1.25rem;
    font-weight: 600; font-size: .97rem; color: #0f172a;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    user-select: none; transition: background .15s;
}
.faq-q:hover { background: #f8fafc; }
.faq-q .faq-chevron { transition: transform .25s; flex-shrink: 0; color: #94a3b8; }
.faq-q.open .faq-chevron { transform: rotate(180deg); }
.faq-a {
    background: #f8fafc; padding: .9rem 1.25rem 1rem;
    color: #64748b; font-size: .93rem; line-height: 1.7;
    border-top: 1px solid #e2e8f0;
    display: none;
}
.faq-a a { color: #0ea5e9; }
.faq-a.open { display: block; }

/* ── CTA ─────────────────────────────────────────────────── */
.cta-bg { background: linear-gradient(135deg, #0f172a 0%, #0c2340 100%); }
.cta-bg .stitle { color: #fff; }
.cta-bg .sdesc  { color: #94a3b8; }
.road-wrap {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 1.5rem auto 2.2rem;
}
.road-track {
    position: relative; width: 200px; height: 26px;
    background: #1e293b; border-radius: 4px; overflow: hidden;
}
.road-dashes {
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    height: 3px; width: 200%;
    background: repeating-linear-gradient(to right, #7dd3fc 0 16px, transparent 16px 32px);
    animation: dashMove .75s linear infinite;
}
@keyframes dashMove { to { transform: translateY(-50%) translateX(-32px); } }
.road-car { font-size: 1.3rem; color: #fbbf24; animation: carHover 1.4s ease-in-out infinite; }
@keyframes carHover {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

/* ── Footer ──────────────────────────────────────────────── */
footer { background: #0f172a; color: #94a3b8; padding: 3rem 0 2rem; }
footer .brand { font-size: 1.35rem; font-weight: 800; color: #fff; }
footer a { color: #94a3b8; text-decoration: none; transition: color .2s; }
footer a:hover { color: #7dd3fc; }
.footer-brand-name { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; line-height: 1; margin-bottom: .6rem; }
.footer-brand-loc { background: linear-gradient(135deg, #06b6d4, #0ea5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-brand-a { color: rgba(255,255,255,.35); font-size: .68em; }
.footer-brand-li { background: linear-gradient(135deg, #f97316, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.footer-divider { border-color: #1e293b; margin: 1.5rem 0; }
.admin-link { font-size: .78rem; opacity: .35; transition: opacity .25s; }
.admin-link:hover { opacity: 1 !important; }

/* ── Animations hero ─────────────────────────────────────── */
.hero-badge  { animation: fadeSlideDown .7s ease .2s  both; }
.hero-brand  { animation: fadeSlideUp   .8s ease .4s  both; }
.hero-catch  { animation: fadeSlideUp   .8s ease .6s  both; }
.hero-sub    { animation: fadeSlideUp   .8s ease .75s both; }
.hero-phone  { animation: fadeSlideUp   .8s ease .88s both; }
.hero-cta    { animation: fadeSlideUp   .8s ease .98s both; }
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}
/* ── Scroll reveal ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .22s; }
.reveal-d3 { transition-delay: .34s; }
.reveal-d4 { transition-delay: .46s; }

/* ── Navbar — fond sombre permanent sur mobile ───────────────── */
@media (max-width: 767.98px) {
    #mainNav {
        background: rgba(15,23,42,.97);
        box-shadow: 0 2px 16px rgba(0,0,0,.3);
    }
}

/* ── Hamburger mobile ────────────────────────────────────────── */
.nav-hbgr {
    background: none;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    padding: .4rem .55rem;
    color: rgba(255,255,255,.85);
    line-height: 1;
    font-size: 1.35rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-hbgr:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.nav-mobile-menu {
    background: rgba(15,23,42,.97);
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease;
    display: none;
}
.nav-mobile-menu.show {
    opacity: 1;
    transform: translateY(0);
}
.nav-mobile-menu .nav-link-item {
    display: block;
    padding: .65rem .9rem !important;
    border-radius: 6px;
}
.nav-mobile-menu .btn-warm {
    margin-top: .5rem;
    padding: .55rem 1.5rem;
    font-size: .88rem;
}

/* ── Fleet — thumb hauteur mobile ───────────────────────────── */
@media (max-width: 767.98px) {
    .fleet-thumb { height: 150px; }
    section      { padding: 40px 0; }
}

/* ── Fleet — specs texte très petits écrans ──────────────────── */
@media (max-width: 575.98px) {
    .fleet-specs { font-size: .72rem; gap: .5rem; }
}

/* ── Icône service au hover ───────────────────────────────── */
.srv-card:hover .srv-icon { animation: iconPop .35s ease; }
@keyframes iconPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.4) rotate(-8deg); }
    100% { transform: scale(1) rotate(0); }
}