/* ==========================================================================
   Pare-Brise Express — Design system
   Autonome : aucune dépendance de build (pas de Tailwind), uniquement ce fichier.
   ========================================================================== */

:root {
    --bg: #05080f;
    --bg-2: #0a1020;
    --bg-3: #0f172a;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #e6ebf5;
    --muted: #94a3b8;
    --dim: #64748b;

    --cyan: #22d3ee;
    --blue: #2563eb;
    --red: #ef2b2d;
    --rose: #f43f5e;
    --emerald: #10b981;
    --amber: #f59e0b;
    --sky: #38bdf8;

    --accent: var(--cyan);
    --radius: 1.25rem;
    --radius-lg: 1.75rem;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: #001018; }
h1, h2, h3, h4 { font-family: var(--font-display); color: #fff; line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; }
strong { color: #fff; font-weight: 700; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 1.25rem; }
.container--narrow { max-width: 920px; }
.section { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.row--center { justify-content: center; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr; }
    .split--flip > :first-child { order: 0; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Typography ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.9rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    margin-bottom: 1.1rem;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; animation: blink 1.6s infinite; }
.h-display { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; }
.h-section { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 1rem; }
.h-card { font-size: 1.3rem; margin-bottom: 0.5rem; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #b8c3d6; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head .lead { margin-inline: auto; }
.text-gradient {
    background: linear-gradient(100deg, #fff 0%, var(--cyan) 35%, var(--blue) 65%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: sheen 6s linear infinite;
}
.text-red { color: var(--red); }
.text-cyan { color: var(--cyan); }

/* Mots découpés pour l’animation d’apparition */
.split-text .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-text .w > span { display: inline-block; transform: translateY(110%) rotate(6deg); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.split-text.is-in .w > span { transform: none; }

/* ---------- Accents ---------- */
.accent-cyan { --accent: var(--cyan); }
.accent-rose { --accent: var(--rose); }
.accent-red { --accent: var(--red); }
.accent-emerald { --accent: var(--emerald); }
.accent-amber { --accent: var(--amber); }
.accent-sky { --accent: var(--sky); }

/* ---------- Buttons ---------- */
.btn {
    --bx: 0px; --by: 0px;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.85rem 1.4rem; border-radius: 0.9rem;
    font-weight: 800; font-size: 0.95rem; line-height: 1; white-space: nowrap;
    transform: translate(var(--bx), var(--by));
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s, border-color 0.3s;
}
.btn::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn--primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #fff; box-shadow: 0 10px 30px -10px rgba(34, 211, 238, 0.65); }
.btn--primary:hover { box-shadow: 0 16px 40px -10px rgba(34, 211, 238, 0.9); }
.btn--call { background: linear-gradient(135deg, #ff4b3e, #c8102e); color: #fff; box-shadow: 0 10px 30px -10px rgba(239, 43, 45, 0.7); }
.btn--call:hover { box-shadow: 0 16px 40px -10px rgba(239, 43, 45, 0.95); }
.btn--ghost { background: var(--surface-2); border: 1px solid var(--line-2); color: #fff; backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--cyan); }
.btn--lg { padding: 1.1rem 1.8rem; font-size: 1.02rem; border-radius: 1rem; }
.btn--block { width: 100%; }
.btn .ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 90, 80, 0.8); animation: ring 2s var(--ease) infinite; z-index: -1; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 0.9rem; color: var(--accent); }
.link-arrow i { transition: transform 0.3s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }

/* ---------- Cards (verre + projecteur qui suit la souris) ---------- */
.card {
    --mx: 50%; --my: 50%;
    position: relative; overflow: hidden;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), rgba(10, 16, 32, 0.7);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
    transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s var(--ease);
    transform-style: preserve-3d;
}
.card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
    opacity: 0; transition: opacity 0.4s;
}
.card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
    background: radial-gradient(300px circle at var(--mx) var(--my), var(--accent), transparent 50%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity 0.4s;
}
.card:hover { border-color: transparent; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card > * { position: relative; }
.card--link { display: flex; flex-direction: column; height: 100%; }
.card--link .card-foot { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card--flat { backdrop-filter: none; }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(var(--ga, 135deg), rgba(255, 255, 255, 0.18), transparent 40%); opacity: 0; transition: opacity 0.3s; mix-blend-mode: overlay; }
[data-tilt]:hover .glare { opacity: 1; }

.icon-tile {
    width: 3.4rem; height: 3.4rem; border-radius: 1rem; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.35rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
    transition: transform 0.5s var(--ease);
}
.card:hover .icon-tile { transform: translateZ(30px) rotate(-6deg) scale(1.08); }
.icon-tile--lg { width: 4.2rem; height: 4.2rem; font-size: 1.7rem; border-radius: 1.2rem; }

.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
    color: var(--accent); background: var(--surface-2); border: 1px solid var(--line-2);
}
.check-list { list-style: none; display: grid; gap: 0.65rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: #c6d0e0; font-size: 0.95rem; }
.check-list li i { color: var(--accent); margin-top: 0.3rem; font-size: 0.85rem; }

/* ---------- Top bar & Header ---------- */
.topbar { background: #03060c; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.topbar .live { display: inline-flex; align-items: center; gap: 0.45rem; color: #6ee7b7; font-weight: 700; }
.topbar .live span { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); animation: blink 1.4s infinite; }
.topbar a { color: #fff; font-weight: 800; }
.topbar a i { color: var(--red); margin-right: 0.35rem; }
.topbar .hide-sm { display: inline; }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(5, 8, 15, 0.72); backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    transition: background 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { background: rgba(5, 8, 15, 0.92); box-shadow: 0 10px 40px -20px #000; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); transition: height 0.3s var(--ease); }
.site-header.is-scrolled .container { height: 64px; }
.brand { display: flex; align-items: center; gap: 0.8rem; }
.brand img { height: 46px; width: auto; transition: transform 0.4s var(--ease), height 0.3s; }
.site-header.is-scrolled .brand img { height: 38px; }
.brand:hover img { transform: scale(1.05) rotate(-1deg); }
.brand-sub { white-space: nowrap; border-left: 1px solid var(--line-2); padding-left: 0.8rem; line-height: 1.2; }
.brand-sub b { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.brand-sub small { font-size: 0.68rem; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 0.2rem; position: relative; }
.nav a { white-space: nowrap; position: relative; padding: 0.55rem 0.85rem; border-radius: 0.7rem; font-size: 0.9rem; font-weight: 600; color: #aab6c9; transition: color 0.25s; z-index: 1; }
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 0.7rem; background: var(--surface-2); border: 1px solid var(--line); opacity: 0; transition: transform 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s; pointer-events: none; }
.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.burger { display: none; width: 46px; height: 46px; border-radius: 0.8rem; background: var(--surface-2); border: 1px solid var(--line-2); position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    position: fixed; inset: 0; width: 100vw; max-width: 100%; z-index: 55; padding: calc(var(--header-h) + 60px) 1.5rem 2rem;
    background: radial-gradient(circle at 80% 0%, rgba(34, 211, 238, 0.15), transparent 50%), rgba(3, 6, 12, 0.97);
    backdrop-filter: blur(20px);
    clip-path: circle(0 at calc(100% - 44px) 60px);
    transition: clip-path 0.7s var(--ease); visibility: hidden;
    display: flex; flex-direction: column; overflow-y: auto;
}
.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 44px) 60px); visibility: visible; }
.mobile-menu a.m-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: #fff; opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s var(--ease), color 0.2s; }
.mobile-menu a.m-link i { font-size: 1rem; color: var(--cyan); width: 1.5rem; }
.mobile-menu a.m-link.is-active { color: var(--cyan); }
.menu-open .mobile-menu a.m-link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 200ms); }
.mobile-menu .m-actions { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }
body.menu-open { overflow: hidden; }

@media (max-width: 1480px) { .brand-sub { display: none; } }
@media (max-width: 1100px) {
    .nav, .header-actions .btn--primary { display: none; }
    .burger { display: block; }
}
@media (max-width: 560px) {
    .brand-sub, .header-actions .btn--call { display: none; }
    .brand img { height: 38px; }
}

/* ---------- Home hero ---------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(640px, calc(100svh - var(--header-h) - 38px), 1000px);
    display: flex; align-items: center;
    padding-block: 4rem 7rem;
    cursor: crosshair;
}
.hero-bg { position: absolute; inset: -5%; z-index: -3; background: url('/images/pickup-parebriseexpress.jpg') center 60% / cover no-repeat; transform: scale(1.08); animation: kenburns 24s ease-in-out infinite alternate; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(5, 8, 15, 0.35), rgba(5, 8, 15, 0.92) 70%), linear-gradient(90deg, rgba(5, 8, 15, 0.97) 0%, rgba(5, 8, 15, 0.55) 60%, rgba(5, 8, 15, 0.8)); }
.hero-rain { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero-cracks { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-content { position: relative; max-width: 820px; cursor: auto; }
.hero .lead { margin: 1.5rem 0 2.2rem; }
.rotator { display: inline-grid; vertical-align: bottom; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(40%) rotateX(-60deg); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); background: linear-gradient(100deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-40%) rotateX(60deg); }
.hero-hint {
    position: absolute; right: 1.25rem; bottom: 8.5rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 1rem; border-radius: 999px;
    background: rgba(5, 8, 15, 0.65); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
    font-size: 0.8rem; font-weight: 700; color: #cfe8f3; pointer-events: none;
    animation: floaty 4s ease-in-out infinite;
}
.hero-hint i { color: var(--cyan); }
.hero-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 1px solid var(--line); background: rgba(5, 8, 15, 0.6); backdrop-filter: blur(14px); cursor: auto; }
.hero-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.3rem 1rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; color: #fff; line-height: 1; }
.stat > span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.stat b em { font-style: normal; color: var(--cyan); }
@media (max-width: 720px) {
    .hero { padding-bottom: 12rem; }
    .hero-stats .container { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .hero-hint { display: none; }
}

/* Toast « réparé » sur l’impact cliqué */
.repair-tag { position: absolute; z-index: 3; transform: translate(-50%, -140%); padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(16, 185, 129, 0.95); color: #fff; font-size: 0.78rem; font-weight: 800; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.7); animation: tag 2.4s var(--ease) forwards; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.page-hero-bg { position: absolute; inset: -6%; z-index: -3; background-size: cover; background-position: center; opacity: 0.35; filter: saturate(1.1); transform: translateY(var(--py, 0px)) scale(1.1); }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), linear-gradient(180deg, rgba(5, 8, 15, 0.55), var(--bg) 95%); }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 18ch; }
.page-hero .lead { margin-top: 1.3rem; }
.page-hero .row { margin-top: 2rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--muted); margin-bottom: 1.4rem; }
.crumbs a:hover { color: #fff; }
.crumbs i { font-size: 0.6rem; opacity: 0.6; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; opacity: 0.55; animation: orb 14s ease-in-out infinite alternate; }

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: #03060c; padding-block: 1.1rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #3d4b63; white-space: nowrap; transition: color 0.3s; }
.marquee-item:hover { color: #fff; }
.marquee-item i { font-size: 0.8rem; color: var(--red); }

/* ---------- Service cards ---------- */
.svc-card { padding: 0; }
.svc-media { position: relative; height: 200px; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; filter: saturate(0.85) brightness(0.8); }
.svc-card:hover .svc-media img { transform: scale(1.1); filter: saturate(1.1) brightness(0.95); }
.svc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10, 16, 32, 0.98)); }
.svc-media .badge { position: absolute; top: 1rem; right: 1rem; z-index: 2; background: rgba(5, 8, 15, 0.75); backdrop-filter: blur(8px); }
.svc-media .icon-tile { position: absolute; left: 1.5rem; bottom: -1.2rem; z-index: 2; background: #0b1224; }
.svc-body { padding: 2rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-body p { color: #b0bccf; font-size: 0.95rem; }

/* Grande liste services (page Services) */
.svc-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.svc-row:nth-child(even) .svc-row-media { order: 2; }
.svc-row-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--accent) 50%, #000); }
.svc-row-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15) translateY(var(--py, 0px)); transition: transform 0.2s linear; }
.svc-row-media .num { position: absolute; left: 1.2rem; top: 0.6rem; font-family: var(--font-display); font-size: 5rem; font-weight: 900; color: rgba(255, 255, 255, 0.9); text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); line-height: 1; }
@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr; } .svc-row:nth-child(even) .svc-row-media { order: 0; } }

/* ---------- Steps / timeline ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps-line { position: absolute; top: 2.1rem; left: 8%; right: 8%; height: 2px; background: var(--line-2); overflow: hidden; }
.steps-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--red)); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 0.2s linear; box-shadow: 0 0 20px var(--cyan); }
.step { position: relative; text-align: center; padding: 0 0.5rem; }
.step-num { position: relative; z-index: 1; width: 4.2rem; height: 4.2rem; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: #fff; background: var(--bg-3); border: 2px solid var(--line-2); transition: all 0.6s var(--ease); }
.step.is-lit .step-num { background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.12), 0 0 40px rgba(34, 211, 238, 0.5); transform: scale(1.06); }
.step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) {
    .steps, .steps--3 { grid-template-columns: 1fr; gap: 2rem; }
    .steps-line { top: 0; bottom: 0; left: 2.1rem; right: auto; width: 2px; height: auto; }
    .steps-line::after { transform: scaleY(var(--progress, 0)); transform-origin: top; }
    .step { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.2rem; text-align: left; align-items: start; padding: 0; }
    .step-num { margin: 0; }
}

/* ---------- Before / After ---------- */
.ba { --pos: 50%; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); cursor: ew-resize; user-select: none; touch-action: pan-y; box-shadow: 0 40px 100px -40px rgba(34, 211, 238, 0.4); }
.ba-layer { position: absolute; inset: 0; background: center / cover no-repeat; }
.ba-before { background-image: url('/images/Photo-background.jpg'); }
.ba-before .ba-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-after { background-image: url('/images/Photo-background.jpg'); clip-path: inset(0 0 0 var(--pos)); filter: blur(7px) saturate(1.25) brightness(1.12); transform: scale(1.04); }
.ba-after::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); background-size: 250% 100%; animation: sheen 5s linear infinite; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 20px rgba(34, 211, 238, 0.9); }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--bg); font-size: 1rem; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(0, 0, 0, 0.5); }
.ba-tag { position: absolute; top: 1rem; z-index: 2; padding: 0.4rem 0.8rem; border-radius: 0.6rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; backdrop-filter: blur(8px); }
.ba-tag--before { left: 1rem; background: rgba(239, 43, 45, 0.85); color: #fff; }
.ba-tag--after { right: 1rem; background: rgba(16, 185, 129, 0.9); color: #fff; }

/* ---------- Reviews ---------- */
.stars { color: #fbbf24; letter-spacing: 0.15em; font-size: 0.9rem; }
.review p { font-size: 1rem; color: #cdd6e4; margin: 1rem 0 1.5rem; font-style: italic; }
.review .who { display: flex; align-items: center; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.review .quote-mark { position: absolute; right: 1.2rem; top: 0.2rem; font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: rgba(255, 255, 255, 0.05); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 2rem; padding: clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(120deg, #0b1b3a, #071225 45%, #2a0a12); border: 1px solid var(--line-2); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.cta-band::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from var(--angle, 0deg), transparent 0 70%, rgba(34, 211, 238, 0.35), transparent 85%, rgba(239, 43, 45, 0.35), transparent); animation: spin 8s linear infinite; }
.cta-band::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, #0b1b3a, #071225 45%, #1d0810); }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.cta-band .actions { display: grid; gap: 0.8rem; }
.cta-phone { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: #fff; display: inline-flex; align-items: center; gap: 0.8rem; }
.cta-phone i { color: var(--red); animation: shake 2.5s infinite; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .form-grid, .form-grid--3 { grid-template-columns: 1fr; } }
.field { position: relative; }
.field input, .field select, .field textarea {
    width: 100%; padding: 1.35rem 1rem 0.55rem; border-radius: 0.9rem;
    background: rgba(3, 6, 12, 0.7); border: 1px solid var(--line-2); color: #fff; font-size: 0.95rem;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; outline: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--bg-3); }
.field label { position: absolute; left: 1rem; top: 0.95rem; font-size: 0.92rem; color: var(--muted); pointer-events: none; transition: all 0.25s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15); background: rgba(3, 6, 12, 0.9); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { top: 0.4rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); }
.field.has-error input, .field.has-error textarea { border-color: var(--rose); }
.field .err { display: block; font-size: 0.75rem; color: #fda4af; margin-top: 0.3rem; }
.form-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 1rem; font-size: 0.78rem; color: var(--muted); }
.form-note i { color: var(--cyan); margin-right: 0.3rem; }

/* ---------- Estimator ---------- */
.estimator { position: relative; }
.progress { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2.2rem; }
.progress-step { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--dim); transition: color 0.3s; white-space: nowrap; }
.progress-step b { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 0.85rem; transition: all 0.4s var(--ease); }
.progress-step.is-active { color: #fff; }
.progress-step.is-active b { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #fff; border-color: transparent; box-shadow: 0 0 25px rgba(34, 211, 238, 0.6); }
.progress-step.is-done b { background: var(--emerald); color: #fff; border-color: transparent; }
.progress-bar { flex: 1; height: 2px; background: var(--line-2); position: relative; overflow: hidden; border-radius: 2px; }
.progress-bar::after { content: ''; position: absolute; inset: 0; background: var(--emerald); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.progress-bar.is-done::after { transform: scaleX(1); }
@media (max-width: 640px) { .progress-step span { display: none; } }
.est-step { display: none; }
.est-step.is-active { display: block; animation: stepIn 0.6s var(--ease); }
.est-step h3 { font-size: 1.4rem; text-align: center; margin-bottom: 1.5rem; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.options--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .options--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .options, .options--4 { grid-template-columns: 1fr; } }
.option { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding: 1.6rem 1rem; border-radius: 1.2rem; background: rgba(3, 6, 12, 0.6); border: 2px solid var(--line); cursor: pointer; transition: all 0.35s var(--ease); }
.option:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-4px); }
.option.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, rgba(3, 6, 12, 0.6)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent), 0 20px 40px -20px var(--accent); }
.option.is-selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0.7rem; right: 0.7rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; background: var(--accent); color: #fff; animation: pop 0.4s var(--ease); }
.option strong { font-size: 1rem; }
.option small { font-size: 0.78rem; color: var(--muted); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.diagnosis { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem; border-radius: 1rem; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin-bottom: 1.5rem; }
.diagnosis .icon-tile { width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }
.diagnosis strong { display: block; color: var(--accent); }
.diagnosis p { font-size: 0.9rem; color: #c6d0e0; }
.est-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--cyan); margin-bottom: 1rem; }

/* ---------- City checker & map ---------- */
.checker-result { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.9rem; animation: stepIn 0.4s var(--ease); }
.checker-result.ok { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); color: #a7f3d0; }
.checker-result.maybe { background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.4); color: #bae6fd; }
.checker-result i { font-size: 1.2rem; margin-top: 0.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { padding: 0.45rem 0.85rem; border-radius: 0.7rem; font-size: 0.82rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: #c6d0e0; transition: all 0.3s var(--ease); }
.chip i { color: var(--cyan); margin-right: 0.35rem; font-size: 0.7rem; }
.chip.is-match { border-color: var(--emerald); background: rgba(16, 185, 129, 0.15); color: #fff; transform: scale(1.06); box-shadow: 0 0 20px rgba(16, 185, 129, 0.35); }

.route-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 50%, #0d1a33, #050912); aspect-ratio: 1 / 0.85; }
.route-map svg { width: 100%; height: 100%; }
.route-map .road { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 10; stroke-linecap: round; }
.route-map .route { fill: none; stroke: url(#routeGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 10; animation: dash 1.2s linear infinite; }
.route-map .river { fill: none; stroke: rgba(56, 189, 248, 0.25); stroke-width: 16; stroke-linecap: round; }
.route-map .pin circle.core { fill: var(--cyan); }
.route-map .pin circle.pulse { fill: none; stroke: var(--cyan); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pinPulse 2.4s ease-out infinite; }
.route-map .pin.hq circle.core { fill: var(--red); }
.route-map .pin.hq circle.pulse { stroke: var(--red); }
.route-map .pin text { fill: #cbd5e1; font: 700 11px var(--font-body); }
.route-map .pin.hq text { fill: #fff; font-size: 13px; }
.route-map .pin circle.core { transition: fill 0.3s; }
.route-map .pin.is-match circle.core { fill: var(--emerald); }
.route-map .pin.is-match circle.pulse { stroke: var(--emerald); }
.route-map .pin.is-match text { fill: #fff; font-size: 13px; }
.route-map .legend { position: absolute; left: 1rem; bottom: 1rem; display: flex; gap: 1rem; font-size: 0.75rem; color: var(--muted); background: rgba(5, 8, 15, 0.7); padding: 0.5rem 0.8rem; border-radius: 0.7rem; }
.route-map .legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; background: var(--cyan); }
.route-map .legend span.hq::before { background: var(--red); }

/* ---------- Windshield safety diagram ---------- */
.ws { position: relative; }
.ws svg { width: 100%; height: auto; overflow: visible; }
.ws .glass { fill: url(#glassGrad); stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.ws .zone { fill: rgba(239, 43, 45, 0.18); stroke: rgba(239, 43, 45, 0.8); stroke-dasharray: 6 6; stroke-width: 2; opacity: 0; transition: opacity 0.5s; }
.ws .zone--wipe { fill: rgba(34, 211, 238, 0.12); stroke: rgba(34, 211, 238, 0.8); }
.ws[data-zone='driver'] .zone--driver, .ws[data-zone='wipe'] .zone--wipe { opacity: 1; }
.ws .wiper { stroke: #0b1224; stroke-width: 7; stroke-linecap: round; transform-box: view-box; animation: wipe 3.2s ease-in-out infinite; }
.ws .wiper--2 { animation-delay: 0.12s; }
.ws-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }
.ws-tab { padding: 0.6rem 1rem; border-radius: 0.8rem; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: all 0.3s; }
.ws-tab.is-active { color: #fff; border-color: var(--cyan); background: rgba(34, 211, 238, 0.12); }
.ws-caption { text-align: center; color: #c6d0e0; font-size: 0.92rem; margin-top: 1rem; min-height: 3em; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.8rem; }
.faq details { border-radius: 1rem; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--surface-2); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--accent); transition: transform 0.4s var(--ease); margin-top: 0.3rem; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .answer { padding: 0 1.3rem 1.2rem; color: #b8c3d6; font-size: 0.95rem; }

/* ---------- Misc blocks ---------- */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.feature p { font-size: 0.88rem; color: var(--muted); }
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame .float-card { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(5, 8, 15, 0.8); backdrop-filter: blur(12px); border: 1px solid var(--line-2); display: flex; align-items: center; gap: 0.8rem; animation: floaty 5s ease-in-out infinite; }
.brands { padding: 2rem; border-radius: var(--radius-lg); background: #fff; display: grid; place-items: center; }
.brands img { max-height: 110px; width: auto; }
.law { display: flex; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.6)); border: 1px solid rgba(245, 158, 11, 0.35); }
@media (max-width: 720px) { .law { flex-direction: column; text-align: center; } }
.tip { display: flex; gap: 1rem; padding: 1.2rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--line); }
.tip b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; color: var(--cyan); opacity: 0.8; }
.timeline { position: relative; display: grid; gap: 2rem; padding-left: 2.2rem; }
.timeline::before { content: ''; position: absolute; left: 0.55rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(var(--cyan), var(--red)); }
.timeline-item { position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -2.05rem; top: 0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.timeline-item b { font-family: var(--font-display); font-size: 1.5rem; color: var(--cyan); }
.timeline-item p { color: #b8c3d6; }
.contact-card { display: flex; gap: 1rem; align-items: center; padding: 1.2rem; border-radius: 1.1rem; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.4s var(--ease); }
a.contact-card:hover { border-color: var(--accent); transform: translateX(6px); }
.contact-card small { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.contact-card b { font-size: 1.05rem; color: #fff; }
.hours { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours td { padding: 0.7rem 0; border-bottom: 1px dashed var(--line-2); }
.hours td:last-child { text-align: right; font-weight: 700; color: #fff; }
.hours tr.is-today td { color: var(--cyan); }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); height: 100%; min-height: 320px; filter: invert(0.9) hue-rotate(180deg) saturate(0.6); }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pager a { padding: 1.3rem; border-radius: 1.1rem; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s; }
.pager a:hover { border-color: var(--cyan); }
.pager a:last-child { text-align: right; }
.pager small { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.pager b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.15rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: #03060c; border-top: 1px solid var(--line); padding: 5rem 0 2rem; }
.site-footer .glow { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; filter: blur(120px); opacity: 0.12; pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.site-footer ul a { color: #b8c3d6; transition: color 0.2s, padding 0.3s var(--ease); }
.site-footer ul a:hover { color: var(--cyan); padding-left: 4px; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8rem; color: var(--dim); }
.footer-bottom .credit { color: #fff; font-weight: 800; letter-spacing: 0.06em; transition: color 0.2s; }
.footer-bottom .credit:hover { color: var(--cyan); }
.footer-giant { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 8.6vw, 8rem); line-height: 0.85; white-space: nowrap; letter-spacing: -0.05em; text-align: center; margin: 1rem 0 2.5rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ---------- Mobile dock ---------- */
.dock { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 50; display: none; grid-template-columns: 1fr 1fr; gap: 0.6rem; transform: translateY(150%); transition: transform 0.5s var(--ease); }
.dock.is-visible { transform: none; }
.dock .btn { padding: 1rem; }
@media (max-width: 1100px) { .dock { display: grid; } .site-footer { padding-bottom: 6rem; } }

/* ---------- Toast ---------- */
.toast { position: fixed; top: 6rem; right: 1rem; z-index: 90; max-width: 420px; display: flex; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: rgba(6, 78, 59, 0.95); border: 1px solid var(--emerald); box-shadow: 0 30px 60px -20px rgba(16, 185, 129, 0.6); backdrop-filter: blur(12px); animation: toastIn 0.7s var(--ease); }
.toast i { font-size: 1.5rem; color: #6ee7b7; }
.toast strong { display: block; }
.toast p { font-size: 0.88rem; color: #d1fae5; }
.toast button { align-self: flex-start; opacity: 0.7; }
.toast.is-hiding { animation: toastOut 0.5s var(--ease) forwards; }
.toast--error { background: rgba(76, 5, 25, 0.95); border-color: var(--rose); box-shadow: 0 30px 60px -20px rgba(244, 63, 94, 0.6); }
.toast--error i { color: #fda4af; }
.shard { position: fixed; z-index: 95; pointer-events: none; width: 14px; height: 14px; background: linear-gradient(135deg, rgba(186, 230, 253, 0.95), rgba(34, 211, 238, 0.4)); clip-path: polygon(50% 0, 100% 70%, 20% 100%); }

/* ---------- Global FX layers ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--red), var(--cyan), var(--blue)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--cyan); }
.cursor-light { position: fixed; top: 0; left: 0; z-index: 1; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34, 211, 238, 0.07), transparent 60%); transform: translate(var(--cx, -999px), var(--cy, -999px)); mix-blend-mode: screen; }
.cursor-dot { position: fixed; top: 0; left: 0; z-index: 101; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(34, 211, 238, 0.7); transform: translate(var(--dx, -999px), var(--dy, -999px)) scale(var(--ds, 1)); transition: transform 0.18s var(--ease), border-color 0.3s, background 0.3s; }
.cursor-dot.is-hover { --ds: 1.7; background: rgba(34, 211, 238, 0.12); border-color: var(--cyan); }
@media (hover: none), (max-width: 1100px) { .cursor-light, .cursor-dot { display: none; } }

/* Transition de page « essuie-glace » */
.wiper-fx { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.wiper-fx .sweep {
    position: absolute; left: 50%; bottom: 0; width: 320vmax; height: 160vmax; margin-left: -160vmax;
    transform-origin: 50% 100%; transform: rotate(-180deg);
    background: linear-gradient(0deg, #05080f 0%, #0a1224 100%);
}
.wiper-fx .sweep::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: radial-gradient(ellipse at 50% 100%, rgba(34, 211, 238, 0.18), transparent 60%); }
.wiper-fx .blade { position: absolute; left: 50%; bottom: 0; width: 6px; height: 160vmax; margin-left: -3px; transform-origin: 50% 100%; transform: rotate(-90deg); background: linear-gradient(0deg, #111, #333 50%, var(--cyan)); box-shadow: 0 0 30px rgba(34, 211, 238, 0.7); opacity: 0; }
.wiper-fx.is-leaving { pointer-events: all; }
.wiper-fx.is-leaving .sweep { animation: sweepIn 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.wiper-fx.is-leaving .blade { animation: bladeIn 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
/* Arrivée sur une page (hors première visite) : l’essuie-glace dégage l’écran, en pur CSS */
html[data-first='0'] .wiper-fx:not(.is-leaving) .sweep { animation: sweepOut 0.75s cubic-bezier(0.7, 0, 0.3, 1) 0.05s both; }
html[data-first='0'] .wiper-fx:not(.is-leaving) .blade { animation: bladeOut 0.75s cubic-bezier(0.7, 0, 0.3, 1) 0.05s both; }
html[data-first='0'] .preloader { display: none; }

/* Préchargeur (première visite de la session) */
.preloader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #03060c; transition: opacity 0.6s, visibility 0.6s; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-inner { position: relative; width: min(520px, 86vw); }
.preloader svg { width: 100%; overflow: visible; }
.preloader .pl-glass { fill: rgba(34, 211, 238, 0.04); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.5; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 0.9s var(--ease) forwards; }
.preloader .pl-crack { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 0.45s ease-out 0.7s forwards, heal 0.7s ease-in 1.35s forwards; }
.preloader .pl-heal { fill: var(--cyan); opacity: 0; transform-box: fill-box; transform-origin: center; animation: resin 0.9s var(--ease) 1.25s forwards; }
.preloader img { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; animation: logoIn 0.8s var(--ease) 1.6s forwards; }
.preloader .pl-text { text-align: center; margin-top: 1.4rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); opacity: 0; animation: fadeIn 0.6s 1.9s forwards; }

/* Apparition au défilement */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal='left'] { transform: translateX(-60px); }
[data-reveal='right'] { transform: translateX(60px); }
[data-reveal='zoom'] { transform: scale(0.88); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 404 */
.nf { min-height: 70vh; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.nf-code { font-family: var(--font-display); font-size: clamp(7rem, 25vw, 16rem); font-weight: 900; line-height: 0.9; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.1)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
.nf svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nf svg path { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.4; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.2s ease-out 0.3s forwards; }

/* ---------- Images d’origine de l’ancien site ---------- */
.picto { width: 4.6rem; height: 4.6rem; padding: 0.9rem; border-radius: 1.3rem; flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform 0.6s var(--ease); }
.picto img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent)); }
.card:hover .picto { transform: translateZ(40px) rotate(-8deg) scale(1.1); }
.pillar { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pillar h3 { font-size: 1.15rem; }
.pillar p { font-size: 0.9rem; color: var(--muted); }
.vehicles { display: block; width: min(900px, 100%); margin: 0 auto; filter: invert(1) drop-shadow(0 0 18px rgba(34, 211, 238, 0.35)); opacity: 0.85; }
.texture-metal { position: relative; isolation: isolate; }
.texture-metal::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/images/bg-metal-grill-2.jpg') center / cover; opacity: 0.12; mix-blend-mode: luminosity; pointer-events: none; }

/* ---------- Keyframes ---------- */
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes sheen { to { background-position: -250% 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
@keyframes kenburns { from { transform: scale(1.08) translate(0, 0); } to { transform: scale(1.18) translate(-2%, -1%); } }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@keyframes tag { 0% { opacity: 0; transform: translate(-50%, -100%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -220%); } }
@keyframes orb { to { transform: translate(60px, 40px) scale(1.2); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 60%, 100% { transform: rotate(0); } 65%, 75%, 85% { transform: rotate(-14deg); } 70%, 80%, 90% { transform: rotate(14deg); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.3); } }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes pinPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.5); opacity: 0; } }
@keyframes wipe { 0%, 100% { transform: rotate(0deg); } 45%, 55% { transform: rotate(-120deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(120%) rotate(6deg); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(120%); } }
@keyframes sweepIn { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
@keyframes sweepOut { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes bladeIn { 0% { opacity: 1; transform: rotate(-90deg); } 100% { opacity: 1; transform: rotate(90deg); } }
@keyframes bladeOut { 0% { opacity: 1; transform: rotate(-90deg); } 100% { opacity: 1; transform: rotate(90deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes heal { to { stroke: var(--cyan); opacity: 0; } }
@keyframes resin { 0% { opacity: 0.9; transform: scale(0); } 100% { opacity: 0; transform: scale(14); } }
@keyframes logoIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    [data-reveal], .split-text .w > span { opacity: 1 !important; transform: none !important; }
    .preloader, .wiper-fx, .cursor-light, .cursor-dot { display: none !important; }
}