/* ================================================================
   FLOREL AUTOMOBILES — Design System & Styles
   ================================================================
   Palette : Vert accent (#00D26A) · Noir profond · Blanc
   Typo    : Astron (splash) · TT Octosquares (titres) · Inter (body)
   Vibe    : Dark, premium, automotive, chaleureux
   ================================================================ */

/* ----------------------------------------------------------------
   @FONT-FACE — Custom Fonts
   ---------------------------------------------------------------- */
@font-face {
    font-family: 'Astron';
    src: url('../assets/fonts/Astron.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Astron';
    src: url('../assets/fonts/Astron-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Astron';
    src: url('../assets/fonts/Astron-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Octosquares';
    src: url('../assets/fonts/TT-Octosquares-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Octosquares';
    src: url('../assets/fonts/TT-Octosquares-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------
   0. CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
    /* — Colors — */
    --color-accent: #00C853;
    --color-accent-rgb: 0, 200, 83;
    --color-accent-glow: rgba(0, 200, 83, 0.25);
    --color-accent-subtle: rgba(0, 200, 83, 0.08);
    --color-accent-vivid: #69F0AE;

    --color-lbc: #ff6e14;
    --color-lbc-glow: rgba(255, 110, 20, 0.25);

    --color-bg-deep: #111510;
    --color-bg-alt: #171d15;
    --color-bg-surface: #1e251b;
    --color-bg-elevated: #252e21;

    --color-text-primary: #FFFFFF;
    --color-text-body: #c8ccc8;
    --color-text-secondary: #8c918c;
    --color-text-muted: #545954;

    --color-star: #FFD700;
    --color-overlay: rgba(0, 0, 0, 0.75);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);

    /* — Typography — */
    --font-display: 'TT Octosquares', sans-serif;
    --font-impact: 'TT Octosquares', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-splash: 'Astron', 'Syncopate', sans-serif;
    --font-titles: 'TT Octosquares', sans-serif;

    /* — Spacing — */
    --section-py: clamp(80px, 10vw, 140px);
    --container-max: 1200px;
    --container-px: clamp(20px, 5vw, 40px);

    /* — Radius — */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* — Easing — */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.2s var(--ease-out);
    --t-base: 0.4s var(--ease-out);
    --t-slow: 0.7s var(--ease-out-expo);

    /* — Color Picker Bar — */
    --picker-height: 44px;

    /* — Header + ticker contact (tous deux fixes, collés l'un sous l'autre) — */
    --header-height: 65px;   /* logo 48 + 2×0.5rem + bordure */
    --ticker-height: 32px;

    /* — Motif de fond (réglable en live via la barre design) — */
    --pattern-img: url("../assets/hex-pattern.svg");
    --pattern-scale: 110px;
}

/* ----------------------------------------------------------------
   COLOR PICKER BAR
   ---------------------------------------------------------------- */
/* Démo client coupée (voir DEMO_PANELS dans main.js). Tout le CSS des
   sélecteurs reste en place : il suffit de supprimer ce bloc et de remettre
   le drapeau à true pour les rallumer. */
.color-picker-bar,
.color-picker-toggle,
.design-panel {
    display: none !important;
}

/* Le header se cale sous la barre via top: var(--picker-height) (l.1263).
   Sans barre, plus de décalage à réserver. */
:root {
    --picker-height: 0px;
}

.color-picker-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: var(--picker-height);
    background: rgba(10, 12, 10, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.color-picker-bar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.color-picker-bar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-px);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-picker-bar__label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.color-picker-bar__swatches {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.color-picker-bar__swatches::-webkit-scrollbar {
    display: none;
}

.color-picker-bar__swatch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 10px 4px 4px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    position: relative;
}

.color-picker-bar__swatch:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.color-picker-bar__swatch.active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.25),
                inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.15);
}

.swatch__fill {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.color-picker-bar__swatch:hover .swatch__fill {
    transform: scale(1.12);
}

.color-picker-bar__swatch.active .swatch__fill {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px currentColor;
}

.swatch__name {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.color-picker-bar__swatch:hover .swatch__name,
.color-picker-bar__swatch.active .swatch__name {
    color: var(--color-text-primary);
}

.color-picker-bar__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Ensure tap target is at least 44px */
    min-width: 44px;
    min-height: 44px;
}

.color-picker-bar__close:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}


/* Mobile responsive for the picker */
@media (max-width: 768px) {
    .color-picker-bar__label {
        display: none;
    }
    
    .color-picker-bar__swatch {
        padding: 3px 8px 3px 3px;
    }
    
    .swatch__fill {
        width: 18px;
        height: 18px;
    }
    
    .swatch__name {
        font-size: 0.75rem;
    }
}

/* Toggle button to reopen the picker — draggable on mobile */
.color-picker-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    background: rgba(10, 12, 10, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: grab;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5),
                0 0 0 0 rgba(var(--color-accent-rgb), 0);
    touch-action: none; /* Prevent scroll while dragging */
    user-select: none;
    -webkit-user-select: none;
}

.color-picker-toggle.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.color-picker-toggle.dragging {
    cursor: grabbing;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6),
                0 0 12px rgba(var(--color-accent-rgb), 0.3);
    border-color: rgba(var(--color-accent-rgb), 0.6);
    transform: scale(1.15);
}

.color-picker-toggle:hover {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: rgba(20, 22, 20, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 8px rgba(var(--color-accent-rgb), 0.2);
}

/* ----------------------------------------------------------------
   DESIGN PANEL — motif / taille / fond (démo live)
   ---------------------------------------------------------------- */
.color-picker-bar__more {
    width: 44px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.color-picker-bar__more:hover,
.color-picker-bar__more.active {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.4);
}

.design-panel {
    position: fixed;
    top: var(--picker-height);
    left: 0;
    right: 0;
    z-index: 1099;
    background: rgba(10, 12, 10, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.85rem var(--container-px);
    display: none;
    flex-direction: column;
    gap: 0.7rem;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.design-panel.open {
    display: flex;
}

.design-panel__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.design-panel__row::-webkit-scrollbar {
    display: none;
}

.design-panel__label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-width: 62px;
    flex-shrink: 0;
}

.design-panel__group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.design-btn {
    padding: 6px 13px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.design-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.design-btn.active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-text-primary);
    box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.2);
}

.design-range {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

.design-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.4);
}

.design-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    cursor: pointer;
}

.design-range__val {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    min-width: 30px;
    flex-shrink: 0;
}

.design-swatch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 11px 4px 4px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.design-swatch span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.design-swatch:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.design-swatch.active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-text-primary);
}

/* ----------------------------------------------------------------
   1. RESET
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Accessibilité clavier : repère visuel de focus (souris/tactile non impactés) */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Allow text selection on contact info (phone, address, email) */
a[href^="tel"],
a[href^="mailto"],
.footer__link,
.footer address {
    -webkit-user-select: text !important;
    user-select: text !important;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    background-color: var(--color-bg-deep);
    color: var(--color-text-body);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

/* Thin accent bar fixed at top */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 5%, var(--color-accent) 50%, transparent 95%);
    z-index: 1000;
    pointer-events: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* ----------------------------------------------------------------
   2. LAYOUT
   ---------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

.section {
    padding: var(--section-py) 0;
    position: relative;
}

.section--alt {
    background-color: var(--color-bg-alt);
    /* Motif "garage" (réglable) + halo lumière accent */
    background-image:
        radial-gradient(ellipse 70% 55% at 78% -10%, rgba(var(--color-accent-rgb), 0.07), transparent 60%),
        var(--pattern-img);
    background-size: auto, var(--pattern-scale);
    background-repeat: no-repeat, repeat;
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
.section__title {
    font-family: var(--font-titles);
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.25;
    margin-bottom: 3.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.section__title--spaced {
    margin-bottom: 4rem;
}

.highlight {
    color: var(--color-accent);
}

strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

em {
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------
   3.5 BRANDING MECHANICS (FLOREL & BMW)
   ---------------------------------------------------------------- */
.logo-florel {
    font-family: var(--font-splash);
    font-weight: normal;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--color-accent) 42%, #ffffff 42%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Important for gradient text to bound properly */
}

.titre-impact {
    font-family: var(--font-impact);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.txt-vert {
    color: var(--color-accent);
}

.txt-blanc {
    color: var(--color-text-primary);
}

/* ----------------------------------------------------------------
   4. PLACEHOLDERS (for future images/video)
   ---------------------------------------------------------------- */
.placeholder {
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-hover);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.012) 20px,
        rgba(255, 255, 255, 0.012) 40px
    );
    pointer-events: none;
}

.placeholder__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    z-index: 1;
}

.placeholder--portrait {
    aspect-ratio: 3 / 4;
    width: 100%;
}

.placeholder--cinematic {
    aspect-ratio: 21 / 9;
    width: 100%;
    min-height: 400px;
    border-radius: 0;
    border: none;
}

/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* -- Primary CTA (hero) -- */
.btn--primary {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 18px 44px;
    /* Accent orange chaleureux au repos → hiérarchie sur « Nos services »,
       sans dépenser l'orange plein (réservé au hover) */
    border: 1px solid rgba(255, 110, 20, 0.55);
    color: var(--color-text-primary);
    background: rgba(26, 28, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 1rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
}

/* Pulsation d'accueil (2 fois puis repos) — jouée à la révélation du hero,
   pas au load (sinon perdue derrière le splash). #hero-cta a une spécificité
   ID → on cible le même sélecteur pour surpasser son animation hero-fade-up. */
body.hero-located #hero-cta {
    animation: pulse-glow-lbc 3.2s ease-in-out 0.6s 2;
}

.btn--primary:hover {
    background: var(--color-lbc);
    border-color: var(--color-lbc);
    color: #ffffff;
    box-shadow: 0 0 40px var(--color-lbc-glow),
                0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

.btn__text {
    font-size: 1rem;
    font-weight: 700;
}

.btn__sub {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.7;
    color: #ffdbc2;
    transition: opacity var(--t-fast), color var(--t-fast);
}

.btn--primary:hover .btn__sub {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* Shimmer sweep */
.btn__shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn--primary:hover .btn__shimmer {
    left: 100%;
}

/* -- Outline CTA -- */
.btn--outline {
    padding: 18px 40px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
}

/* -- Giant CTA (showcase) -- */
.btn--giant {
    padding: 24px 56px;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--color-accent);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    animation: pulse-glow-accent 3s ease-in-out infinite;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    max-width: 100%;
    word-break: break-word;
}

.btn--giant:hover {
    transform: scale(1.04);
    background: var(--color-lbc);
    box-shadow: 0 0 60px var(--color-lbc-glow),
                0 0 120px rgba(255, 110, 20, 0.12);
    animation: none;
}

@keyframes pulse-glow-lbc {
    0% { box-shadow: 0 0 0 0 rgba(255, 110, 20, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(255, 110, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 110, 20, 0); }
}

@keyframes pulse-glow-accent {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(var(--color-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

.btn__chevron {
    transition: transform var(--t-fast);
}

.btn--giant:hover .btn__chevron {
    transform: translateX(5px);
}

/* Leboncoin Orange Car Hover Animation */
.btn::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -50px;
    width: 32px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 0 44 18' fill='%23388E3C'%3E%3Cpath d='M-8,7 L-2,7 M-11,10 L-3,10 M-7,12 L-1,12' stroke='%23388E3C' stroke-width='1.2' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M2.5,9.5 L5.8,5.7 C6.5,4.9 7.5,4.5 8.5,4.5 L19.5,4.5 C20.5,4.5 21.5,4.9 22.2,5.7 L25.5,9.5 L30,9.5 C31.1,9.5 32,10.4 32,11.5 L32,14.5 C32,15.1 31.6,15.5 31,15.5 L27.8,15.5 C27.4,13.5 25.6,12 23.5,12 C21.4,12 19.6,13.5 19.2,15.5 L12.8,15.5 C12.4,13.5 10.6,12 8.5,12 C6.4,12 4.6,13.5 4.2,15.5 L1,15.5 C0.4,15.5 0,15.1 0,14.5 L0,11.5 C0,10.4 0.9,9.5 2,9.5 L2.5,9.5 Z'/%3E%3Ccircle cx='8.5' cy='15' r='2.5' fill='%23131513'/%3E%3Ccircle cx='23.5' cy='15' r='2.5' fill='%23131513'/%3E%3Ccircle cx='8.5' cy='15' r='1' fill='%23ffffff'/%3E%3Ccircle cx='23.5' cy='15' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.btn:hover::after {
    animation: drive-across 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drive-across {
    0% {
        left: -40px;
        opacity: 0;
        transform: translateY(0) scale(0.95) skewX(-2deg);
    }
    10% {
        opacity: 1;
        transform: translateY(-0.5px) scale(1) skewX(-4deg);
    }
    90% {
        opacity: 1;
        transform: translateY(0) scale(1) skewX(-4deg);
    }
    100% {
        left: calc(100% + 10px);
        opacity: 0;
        transform: translateY(0.5px) scale(1.05) skewX(0deg);
    }
}


/* ----------------------------------------------------------------
   6. SCROLL REVEAL (base states — JS adds .revealed)
   ---------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    transition-delay: calc(var(--delay, 0) * 120ms);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------------------------------
   7. SPLASH SCREEN (Cinematic Headlights)
   ---------------------------------------------------------------- */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #0b0c0b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    contain: layout paint;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-text {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: scale(0.95);
    animation: text-reveal 2s ease-out 0.5s forwards;
    will-change: transform, opacity;
}

.splash-logo-svg {
    display: block;
    width: clamp(320px, 55vw, 650px);
    margin: 0 auto;
    color: var(--color-accent);
    /* Static drop-shadow only, not animated */
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.15));
}

.splash-car-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1440 / 810;
    transform: translate(-50%, -50%) scale(0.2);
    z-index: 1;
    pointer-events: none;
    color: var(--color-accent);
    animation: car-drive-forward 2.5s ease-in-out forwards;
    will-change: transform, opacity;
}

.splash-car {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    color: var(--color-accent);
    /* Remove animated filter — too expensive on mobile GPU */
}

.headlights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Headlight dots — small white circles */
.headlight {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: headlight-dot 2.5s ease-in-out forwards;
    will-change: opacity;
}

/* Headlight glow — GPU-composited radial gradient instead of box-shadow */
.headlight::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.4) 15%,
        rgba(var(--color-accent-rgb), 0.15) 40%,
        transparent 70%
    );
    opacity: 0;
    animation: headlight-glow 2.5s ease-in-out forwards;
    will-change: opacity, transform;
    pointer-events: none;
}

.headlight.left {
    top: 56.9%;
    left: 37.85%;
}

.headlight.right {
    top: 56.9%;
    left: 62.22%;
}

@keyframes car-drive-forward {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    5%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    30%, 65% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    85%  { transform: translate(-50%, -50%) scale(3.5) translateY(10px); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(8) translateY(30px); opacity: 0; }
}

/* Dot visibility only — just opacity, very cheap */
@keyframes headlight-dot {
    0%       { opacity: 0; }
    10%      { opacity: 1; }
    20%      { opacity: 0.5; }
    30%, 65% { opacity: 1; }
    85%      { opacity: 1; }
    100%     { opacity: 0; }
}

/* Glow pulse — only animates opacity + scale on a pre-rendered gradient (GPU layer) */
@keyframes headlight-glow {
    0%       { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    10%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    20%      { opacity: 0.4; transform: translate(-50%, -50%) scale(0.6); }
    30%, 65% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    85%      { opacity: 1; transform: translate(-50%, -50%) scale(2); }
    100%     { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

@keyframes text-reveal {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    30%, 75% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* ----------------------------------------------------------------
   SPLASH — "Touchez pour démarrer" (son moteur + vibration)
   ----------------------------------------------------------------
   Les animations attendent le tap utilisateur (la "clé de contact").
   On les met en pause par défaut, puis .started les relance.
   ---------------------------------------------------------------- */
.splash-car-container,
.headlight,
.headlight::before {
    animation-play-state: paused;
}

.splash-screen.started .splash-car-container,
.splash-screen.started .headlight,
.splash-screen.started .headlight::before {
    animation-play-state: running;
}

/* Le logo reste affiché pendant l'invitation, puis s'envole au démarrage */
.splash-text {
    opacity: 1;
    transform: none;
    animation: none;
}

.splash-screen.started .splash-text {
    animation: splash-logo-out 1.8s ease-in forwards;
}

@keyframes splash-logo-out {
    0%   { opacity: 1; transform: scale(1); }
    45%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* Vrombrissement : la carrosserie tremble au démarrage */
.splash-screen.started .splash-car {
    animation: engine-shake 0.09s linear 9;
}

@keyframes engine-shake {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(0.7px, -0.6px) rotate(0.18deg); }
    50%  { transform: translate(-0.6px, 0.5px) rotate(-0.18deg); }
    75%  { transform: translate(0.5px, 0.5px) rotate(0.12deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* L'invitation "tourne la clé" */
/* Indice visuel uniquement (les taps le traversent et atteignent le switch) */
.splash-start {
    position: absolute;
    bottom: clamp(56px, 16vh, 150px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    pointer-events: none;
    animation: start-pulse 1.8s ease-in-out infinite;
}

/* Boîte de la clé Mercedes 3D (canvas Three.js injecté par js/splash-key.js).
   Vide tant que la 3D n'est pas prête : la clé arrive en fondu, sans emoji avant. */
.splash-start__key {
    display: block;
    height: min(14vh, 120px);
    aspect-ratio: 3 / 4;
    filter: drop-shadow(0 0 14px rgba(var(--color-accent-rgb), 0.55));
}

.splash-start__key canvas {
    display: block;
    width: 100%;
    height: 100%;
    animation: splash-key-in 0.8s ease-out;
}

@keyframes splash-key-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: none; }
}

.splash-start__hint {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Switch natif iOS PLEIN ÉCRAN : n'importe quel tap le bascule → tic Taptic natif.
   On le masque via opacity uniquement (jamais appearance:none, sinon l'haptique
   disparaît). Sous le bouton "Passer" (z-index 7) pour ne pas l'intercepter. */
.splash-start__switch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 5;
    cursor: pointer;
}

@keyframes start-pulse {
    0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 0.92; }
    50%      { transform: translateX(-50%) translateY(-7px); opacity: 1; }
}

/* Sortie discrète (entrée silencieuse, sans son) */
.splash-skip {
    position: absolute;
    bottom: 22px;
    right: 22px;
    z-index: 7;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    padding: 8px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, color 0.2s ease;
}

.splash-skip.visible {
    opacity: 1;
    pointer-events: auto;
}

.splash-skip:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Une fois lancé, on masque l'UI de démarrage */
.splash-screen.started .splash-skip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Contact : l'invitation (clé + texte) file vers le haut en rétrécissant,
   après 0,25 s (le temps de voir le bouton de la clé s'allumer, cf. JS).
   Doit être une animation : start-pulse (infinie) pilote l'opacité et
   écraserait un simple opacity: 0. */
.splash-screen.started .splash-start {
    animation: splash-start-out 0.5s ease-in 0.25s both;
}

@keyframes splash-start-out {
    0%   { transform: translateX(-50%) translateY(0) scale(1);       opacity: 1; }
    100% { transform: translateX(-50%) translateY(-40px) scale(0.35); opacity: 0; }
}

/* ================================================================
   SECTIONS
   ================================================================ */

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.header {
    position: fixed;
    top: var(--picker-height, 0px);
    left: 0;
    right: 0;
    z-index: 1000;
    padding: calc(0.5rem + env(safe-area-inset-top)) env(safe-area-inset-right) 0.5rem env(safe-area-inset-left);
    background-color: rgba(19, 21, 19, 0.85);
    backdrop-filter: blur(12px);
    /* pas de bordure ici : le ticker juste dessous porte le seul filet,
       sinon les deux barres se lisent comme deux blocs décollés */
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled {
    /* Removed, header is always identical now */
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Le wordmark est large : sans flex-shrink:0, la navigation l'écrasait à
   0 px de large entre 769 et ~1100 px (tablette paysage, petit portable). */
.header__logo {
    flex: 0 0 auto;
}


.header__logo img {
    height: 40px;
    width: auto;
    border-radius: 0;
    transition: transform var(--t-base), opacity var(--t-base);
}

@media (max-width: 768px) {
    .header__logo img { height: 30px; }
}

@media (max-width: 480px) {
    .header__logo img { height: 26px; }
}

.header__logo:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.header__nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.header__link {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-body);
    transition: color var(--t-fast);
    position: relative;
}

.header__link:hover {
    color: var(--color-text-primary);
}

.header__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--t-base);
}

.header__link:hover::after {
    width: 100%;
}

.btn--nav {
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: rgba(56, 142, 60, 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(56, 142, 60, 0.3);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--t-fast);
}

.btn--nav:hover {
    background-color: var(--color-lbc);
    color: #ffffff;
    border-color: var(--color-lbc);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-lbc-glow);
}

/* BURGER MENU ICON */
.header__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    /* Cible tactile 44×44 (box-sizing: border-box) : les barres restent
       visuellement 32×22, centrées dans une zone de tap confortable. */
    width: 44px;
    height: 44px;
    padding: 11px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Above mobile nav */
}

.header__burger span {
    width: 100%;
    height: 2.5px;
    background: var(--color-text-primary);
    border-radius: 10px;
    transition: all var(--t-base);
    transform-origin: left center;
}

/* Menu burger jusqu'à 1100 px : au-delà de 768, le wordmark « FLOREL
   AUTOMOBILES » (222 px) et les 7 liens + le bouton vitrine (760 px) ne
   tiennent pas sur une ligne dans la gouttière du site. Tablette paysage et
   petit portable basculent donc sur le tiroir. */
@media (max-width: 1100px) {
    .header__burger {
        display: flex;
    }
    .header__burger.open span:first-child {
        transform: rotate(45deg);
        width: 105%;
    }
    .header__burger.open span:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    .header__burger.open span:nth-child(3) {
        transform: rotate(-45deg);
        width: 105%;
    }

    .header__nav {
        position: fixed;
        /* démarre sous le header + le ticker : le numéro reste visible et
           cliquable menu ouvert, et le 1er lien n'est plus mangé par le filet */
        /* le header porte un backdrop-filter : il devient le bloc conteneur
           du fixed, donc `bottom: 0` viserait le bas du header, pas l'écran */
        top: calc(var(--picker-height, 0px) + var(--header-height) + var(--ticker-height) + env(safe-area-inset-top));
        right: -100%;
        width: 100%;
        height: calc(100dvh - var(--picker-height, 0px) - var(--header-height) - var(--ticker-height) - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: rgba(19, 21, 19, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-content: safe center;   /* petits écrans : on scrolle au lieu de rogner */
        align-items: center;
        gap: 2.5rem;
        padding-block: 1.5rem;
        transition: right var(--t-base);
        z-index: 999;
    }

    .header__nav.open {
        right: 0;
    }

    .header__link {
        font-size: 1.5rem;
    }

    .btn--nav {
        font-size: 1.1rem;
        padding: 16px 32px;
        margin-top: 1rem;
    }

}

/* ----------------------------------------------------------------
   TICKER — fil discret collé sous le header, fixe mobile + PC.
   Numéro figé à gauche (cible tappable stable, seul point de couleur),
   arguments en petites capitales grises qui défilent en continu.
   z-index au-dessus de l'overlay du menu burger.
   ---------------------------------------------------------------- */
.ticker {
    position: fixed;
    top: calc(var(--picker-height, 0px) + var(--header-height) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    align-items: stretch;
    height: var(--ticker-height);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* même teinte/opacité que le header : les deux ne font qu'un bloc */
    background-color: rgba(19, 21, 19, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

/* Numéro : statique, aligné sur la gouttière du site */
.ticker__call {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0 1.25rem 0 var(--container-px);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--color-accent);
    transition: color var(--t-fast);
}

.ticker__call:hover {
    color: var(--color-accent-vivid);
}

.ticker__icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Piste défilante — fondu sur les deux bords */
.ticker__marquee {
    position: relative;
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

.ticker__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: ticker-scroll 42s linear infinite;
}

.ticker:hover .ticker__track,
.ticker__track:focus-within {
    animation-play-state: paused;
}

.ticker__group {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-right: 1.4rem;
}

.ticker__item {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ticker__dot {
    width: 3px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-text-muted);
}

@keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 720px) {
    .ticker__call {
        padding: 0 0.9rem 0 var(--container-px);
        font-size: 0.7rem;
    }
    .ticker__item {
        font-size: 0.63rem;
        letter-spacing: 0.12em;
    }
    .ticker__group {
        gap: 1.1rem;
        padding-right: 1.1rem;
    }
    .ticker__track {
        animation-duration: 30s;   /* piste plus courte à l'écran : même rythme perçu */
    }
    .ticker__marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    /* Texte calé en bas plutôt qu'au centre : au centre, le titre passait
       en travers du visage d'Aurélien (retour client 09/2026). Les deux
       fondateurs occupent maintenant la moitié haute, libre de tout texte. */
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    inset: 0;
}

/* Voile taillé pour la nouvelle composition : léger sur la bande des
   visages, dense sous le titre pour garder le texte lisible. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 5, 5, 0.50) 0%,
        rgba(5, 5, 5, 0.22) 26%,
        rgba(5, 5, 5, 0.30) 48%,
        rgba(5, 5, 5, 0.72) 70%,
        rgba(5, 5, 5, 0.92) 86%,
        var(--color-bg-deep) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
    /* La flèche de défilement est en absolu à 2rem du bas (48 px de haut) :
       on lui laisse la place sous le bloc CTA. */
    padding: 0 var(--container-px) clamp(7rem, 13vh, 10rem);
}

.hero__accent-line {
    width: 48px;
    height: 3px;
    background: var(--color-accent);
    margin: 0 auto 1.75rem;
    border-radius: 2px;
    animation: hero-line 0.6s var(--ease-out-expo) 0.3s both;
}

.hero__title {
    font-family: var(--font-titles);
    font-size: clamp(2rem, 4.8vw, 3.4rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.12;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.5s both;
}

.hero__subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: 300;
    max-width: 540px;
    margin: 0 auto 1.5rem;
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.7s both;
}

.hero__tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.4s both;
}

.hero__trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.8s both;
}

.hero__trust-badges span {
    display: flex;
    align-items: center;
}

.hero__trust-badges .separator {
    color: rgba(255, 255, 255, 0.2);
}

.hero__cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.9s both;
}

@media (max-width: 768px) {
    /* Le décalage translateY(14vh) qui dégageait les visages ne sert plus :
       le bloc est désormais calé en bas du hero (align-items: flex-end), et
       le cumul des deux faisait sortir le second bouton sous le pli. */
    .hero__content {
        transform: none;
        padding-bottom: 5.5rem;
    }
    /* Téléphone en portrait : la photo est déjà affichée sur toute sa hauteur,
       object-position n'a plus de prise. On resserre donc au zoom pour couper
       le plafond du garage et rapprocher les deux fondateurs. */
    .hero__img {
        transform: scale(1.18);
        transform-origin: 50% 40%;
    }
    .hero__title {
        font-size: clamp(2.2rem, 8vw, 3.8rem);
    }
    .hero__cta-group {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .hero__cta-group .btn {
        width: 100%;
        justify-content: center;
        padding: 18px 20px;
    }
    .hero__trust-badges {
        flex-direction: column;
        gap: 0.5rem;
    }
    .hero__trust-badges .separator {
        display: none;
    }
}

#hero-cta {
    animation: hero-fade-up 0.9s var(--ease-out-expo) 0.9s both;
}

/* Scroll indicator — uses margin auto for centering to avoid full-width click zone */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    z-index: 1;
    animation: hero-fade-up 0.9s var(--ease-out-expo) 1.3s both;
}

.scroll-indicator__circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-deep);
    transition: all var(--t-base);
    animation: bounce 2.5s ease-in-out infinite 2s;
}

.scroll-indicator:hover .scroll-indicator__circle {
    box-shadow: 0 0 30px var(--color-accent-glow);
    transform: scale(1.12);
}

/* ----------------------------------------------------------------
   ABOUT
   ---------------------------------------------------------------- */
.about {
    background-color: var(--color-bg-deep);
    /* Motif "garage" (réglable) + halo lumière accent (haut) */
    background-image:
        radial-gradient(ellipse 75% 50% at 50% -5%, rgba(var(--color-accent-rgb), 0.06), transparent 60%),
        var(--pattern-img);
    background-size: auto, var(--pattern-scale);
    background-repeat: no-repeat, repeat;
}

.about__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

.about__photos {
    display: flex;
    gap: 1.5rem;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.about__photo {
    width: 220px;
    aspect-ratio: 3 / 4;
    transition: transform var(--t-base), border-color var(--t-base);
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.about__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--t-base), transform var(--t-slow);
}

.about__photo-default {
    z-index: 1;
    opacity: 1;
}

.about__photo-hover {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) {
    .about__photo:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--color-accent-rgb), 0.4);
    }

    .about__photo:hover .about__photo-default {
        opacity: 0;
        transform: scale(1.05);
    }

    .about__photo:hover .about__photo-hover {
        opacity: 1;
        transform: scale(1.05);
    }
}

.about__photo-name {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.about__photo:nth-child(2) {
    margin-top: 2.5rem;
}

.about__text {
    font-size: 1.1rem;
    line-height: 1.85;
}

.about__text p {
    max-width: 540px;
    margin-bottom: 1.15em;
}

.about__text p:last-child {
    margin-bottom: 0;
}

.about__text-sub {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.about__text-sub strong:first-child {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--font-titles);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Quote block */
.about__quote {
    position: relative;
    background: var(--color-bg-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 3rem 3rem 3rem 4rem;
    max-width: 800px;
    margin: 0 auto;
}

.about__quote-mark {
    position: absolute;
    top: -0.3rem;
    left: 1.2rem;
    font-size: 6rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--color-accent);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.about__quote p {
    font-style: italic;
    font-weight: 300;
    font-size: 1.15rem;
    color: var(--color-text-primary);
    line-height: 1.85;
    margin-bottom: 1rem;
}

.about__quote cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--color-accent);
    font-size: 0.95rem;
}

/* ----------------------------------------------------------------
   SERVICES
   ---------------------------------------------------------------- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* Toutes les rangées à la même hauteur → 4 cartes identiques,
       y compris en 2×2 sur mobile. */
    grid-auto-rows: 1fr;
}

.service-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.75rem;
    text-align: center;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
    /* colonne → le lien "En savoir plus" est poussé en bas (margin-top:auto)
       et s'aligne sur toutes les cartes, quelle que soit la longueur du teaser */
    display: flex;
    flex-direction: column;
}

/* Top accent bar */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 0 0 2px 2px;
    transition: width var(--t-base);
}

.service-card:hover,
.service-card.is-active {
    transform: translateY(-8px) scale(1.04);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35),
                0 0 40px var(--color-accent-subtle);
}

.service-card:hover::before,
.service-card.is-active::before {
    width: 64px;
}

.service-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.5rem;
    color: var(--color-accent);
}

.service-card__icon svg {
    width: 100%;
    height: 100%;
}

.sourcing-banner {
    width: 100%;
    height: 48px;
    margin: 0 auto 1.5rem;
    color: var(--color-accent);
}

.sourcing-banner svg {
    width: 100%;
    height: 100%;
}

.service-card__title {
    font-family: var(--font-titles);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.service-card__text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    /* Teaser uniforme : coupé à 4 lignes, le détail complet passe dans le
       modal "En savoir plus" → toutes les cartes gardent la même densité. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lien "En savoir plus" — poussé en bas de carte, ouvre le modal détaillé */
.service-card__more {
    margin-top: auto;
    padding-top: 1.25rem;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    transition: gap var(--t-base), color var(--t-base);
}

.service-card__more span {
    transition: transform var(--t-base);
}

.service-card__more:hover {
    gap: 0.6rem;
}

/* Modal détail service (élément natif <dialog>) — image de voiture en fond
   (assombrie), contenu par-dessus. --modal-img est posé en JS selon la carte. */
.service-modal {
    /* Centrage déterministe : fixed + inset:0 + margin:auto (le reset global
       met margin:0 ET on ne peut pas se fier au position:fixed natif ici, qui
       était écrasé → le modal restait dans le flux et faisait scroller la page
       en l'ouvrant). height:fit-content pour ne pas s'étirer sur toute la hauteur. */
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 500px;
    width: calc(100% - 2.5rem);
    height: fit-content;
    max-height: calc(100dvh - 3rem);
    overflow: auto;
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    padding: 2.85rem 2.5rem 2.6rem;
    color: var(--color-text-body);
    /* Photo de voiture visible en fond (--modal-img posé en JS), assombrie en
       dégradé : plus claire en haut (derrière le titre), plus dense en bas
       (derrière le texte) pour rester lisible. */
    background:
        linear-gradient(180deg,
            rgba(14, 17, 13, 0.52) 0%,
            rgba(14, 17, 13, 0.78) 42%,
            rgba(14, 17, 13, 0.95) 100%),
        var(--modal-img, none) center / cover no-repeat,
        var(--color-bg-elevated);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.service-modal[open] {
    animation: service-modal-in 0.3s var(--ease-out-expo, ease-out);
}

@keyframes service-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.service-modal::backdrop {
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(5px);
}

.service-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    transition: background var(--t-base), color var(--t-base);
}

.service-modal__close:hover {
    background: rgba(var(--color-accent-rgb), 0.2);
    color: var(--color-accent);
}

.service-modal__title {
    position: relative;
    font-family: var(--font-titles);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    margin-bottom: 1.4rem;
    padding-bottom: 1.1rem;
    text-align: center;
}

.service-modal__title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

.service-modal__title .highlight {
    color: var(--color-accent);
}

.service-modal__body {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--color-text-body);
    text-align: center;
}

.service-modal__body strong {
    color: var(--color-text-primary);
}

/* Custom Service Card Effects */
.service-card > * {
    position: relative;
    z-index: 1;
}

/* ── Card: Achat/Vente (fusionnée — garde l'animation voiture+phares) ── */
.service-card--achatvente:hover .achat-car,
.service-card--achatvente.is-active .achat-car {
    animation: car-unlock 2s ease-in-out infinite;
}
.service-card--achatvente:hover .achat-beam,
.service-card--achatvente.is-active .achat-beam {
    animation: flash-beam 2s infinite;
}

@keyframes car-unlock {
    0%, 100% { transform: translateY(0); }
    10%, 30% { transform: translateY(-2px); }
    40% { transform: translateY(0); }
}

@keyframes flash-beam {
    0%, 5%   { opacity: 0; filter: blur(0); }
    10%, 15% { opacity: 0.8; filter: blur(2px); }
    18%, 22% { opacity: 0; filter: blur(0); }
    25%, 30% { opacity: 0.8; filter: blur(2px); }
    35%, 100%{ opacity: 0; filter: blur(0); }
}

/* ── Card: Garantie / Financement (nouvelle — bouclier + €) ── */
.service-card--garantie::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, rgba(0, 210, 106, 0.12), transparent);
    z-index: 0;
    transition: height 0.4s ease;
    pointer-events: none;
}
.service-card--garantie:hover::after,
.service-card--garantie.is-active::after {
    height: 100%;
}

.shield-main, .shield-back-left, .shield-back-right {
    transition: transform 0.4s var(--ease-out), filter 0.4s ease, opacity 0.4s ease;
}

.service-card--garantie:hover .shield-main,
.service-card--garantie.is-active .shield-main {
    animation: shield-pulse 2s ease-in-out infinite alternate;
}

.service-card--garantie:hover .shield-back-left,
.service-card--garantie.is-active .shield-back-left {
    transform: rotate(-15deg) translate(-6px, 2px);
    opacity: 0.6;
}

.service-card--garantie:hover .shield-back-right,
.service-card--garantie.is-active .shield-back-right {
    transform: rotate(15deg) translate(6px, 2px);
    opacity: 0.6;
}

@keyframes shield-pulse {
    0%   { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0px rgba(0, 210, 106, 0)); }
    100% { transform: scale(1.05) translateY(-2px); filter: drop-shadow(0 0 10px rgba(0, 210, 106, 0.6)); }
}

.shield-euro {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.service-card--garantie:hover .shield-euro,
.service-card--garantie.is-active .shield-euro {
    opacity: 1;
    animation: euro-glow 1.5s ease-in-out infinite alternate;
}
@keyframes euro-glow {
    0%   { filter: drop-shadow(0 0 2px rgba(0, 210, 106, 0.3)); }
    100% { filter: drop-shadow(0 0 8px rgba(0, 210, 106, 0.8)); }
}

/* ── Card: Detailing (inchangé) ── */
.service-card--detailing::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    z-index: 10;
    pointer-events: none;
}
.service-card--detailing:hover::after,
.service-card--detailing.is-active::after {
    animation: polish-shine 0.8s ease-in-out;
}
@keyframes polish-shine {
    0% { left: -150%; }
    100% { left: 150%; }
}

.sparkle-main {
    transform-origin: 12px 12px;
    transition: transform var(--t-base);
}
.service-card--detailing:hover .sparkle-main,
.service-card--detailing.is-active .sparkle-main {
    animation: twinkle-main 1.5s ease-in-out infinite alternate;
}

.service-card--detailing:hover .sparkle-star,
.service-card--detailing.is-active .sparkle-star {
    animation: twinkle 0.6s ease-in-out infinite alternate;
}
.service-card--detailing:hover .sparkle-star:nth-of-type(2),
.service-card--detailing.is-active .sparkle-star:nth-of-type(2) { animation-delay: 0.1s; }
.service-card--detailing:hover .sparkle-star:nth-of-type(3),
.service-card--detailing.is-active .sparkle-star:nth-of-type(3) { animation-delay: 0.3s; }
.service-card--detailing:hover .sparkle-star:nth-of-type(4),
.service-card--detailing.is-active .sparkle-star:nth-of-type(4) { animation-delay: 0.2s; }
.service-card--detailing:hover .sparkle-star:nth-of-type(5),
.service-card--detailing.is-active .sparkle-star:nth-of-type(5) { animation-delay: 0.4s; }

@keyframes twinkle {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
    100% { transform: scale(1.3) rotate(45deg); opacity: 1; }
}

@keyframes twinkle-main {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ── Card: Sourcing (remplace Conseil — loupe + voiture) ── */
.service-card--sourcing::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, rgba(0, 210, 106, 0.08), transparent);
    z-index: 0;
    transition: height 0.4s ease;
    pointer-events: none;
}
.service-card--sourcing:hover::after,
.service-card--sourcing.is-active::after {
    height: 100%;
}

.sourcing-lens {
    transition: transform 0.3s ease;
}

.service-card--sourcing:hover .sourcing-lens,
.service-card--sourcing.is-active .sourcing-lens {
    animation: lens-search 2s ease-in-out infinite;
}

@keyframes lens-search {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-2px, -1px) rotate(-5deg); }
    50%  { transform: translate(2px, 1px) rotate(5deg); }
    75%  { transform: translate(-1px, 1px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.service-card--sourcing:hover .service-card__icon,
.service-card--sourcing.is-active .service-card__icon {
    filter: drop-shadow(0 0 6px rgba(0, 210, 106, 0.3));
}

/* ----------------------------------------------------------------
   TACTILE : neutralise le survol "collant".
   Sur mobile, l'état d'une carte est piloté UNIQUEMENT par .is-active (JS).
   Sans ça, `:hover` reste "collé" après un tap et garde la carte en avant
   même après désélection → on annule ici tout effet de survol non sélectionné.
   ---------------------------------------------------------------- */
@media (hover: none) {
    .service-card:hover:not(.is-active) {
        transform: none;
        border-color: var(--color-border);
        box-shadow: none;
    }
    .service-card:hover:not(.is-active)::before {
        width: 40px;
    }
    /* Fond illuminé : halo qui monte (garantie, sourcing) + reflet (detailing) */
    .service-card:hover:not(.is-active)::after {
        height: 0%;
        animation: none;
    }
    /* Icônes : coupe les animations et les états "mis en avant" (retour état d'origine) */
    .service-card:hover:not(.is-active) .service-card__icon,
    .service-card:hover:not(.is-active) .service-card__icon * {
        animation: none;
    }
    .service-card:hover:not(.is-active) .service-card__icon {
        filter: none;
    }
    .service-card:hover:not(.is-active) .shield-back-left,
    .service-card:hover:not(.is-active) .shield-back-right {
        transform: none;
        opacity: 1;
    }
}


/* ----------------------------------------------------------------
   SOCIAL PROOF
   ---------------------------------------------------------------- */
.proof__counter {
    text-align: center;
    margin-bottom: 2.5rem;
}

.proof__number-wrapper {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.1em;
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.proof__number-wrapper:active {
    transform: scale(0.95);
}

.proof__number {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

.proof__plus {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-accent);
}

.proof__label {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
    font-weight: 400;
}

/* ----------------------------------------------------------------
   GALLERY (Vehicle Showcase — Horizontal Scroll Hijack)
   ---------------------------------------------------------------- */
.gallery {
    position: relative;
    /* Section normale (fini la hauteur dynamique JS / scroll-hijack) :
       même rythme --section-py que les autres sections. */
    padding: var(--section-py) 0;
}

.gallery__sticky {
    /* nom historique — désormais un simple conteneur colonne (plus de sticky) */
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3.5vh, 2.4rem);
}

/* Titre : espacement géré par le gap du sticky (pas de grosse marge fixe) */
.gallery .section__title {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.gallery__subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    max-width: 540px;
    margin: 0 auto;
    flex: 0 0 auto;
}

/* Carousel contrôlé par l'utilisateur : scroll horizontal natif + snap.
   AUCUN défilement automatique, aucun couplage au scroll de la page. */
.gallery__viewport {
    position: relative;
}

.gallery__track {
    display: flex;
    gap: 24px;
    padding: 0 var(--container-px);
    align-items: stretch;
    overflow-x: auto;
    /* Indispensable : sans ça, `visible` est calculé en `auto` dès que
       l'autre axe ne l'est pas (règle CSS overflow). Le carrousel devenait
       donc un conteneur de scroll VERTICAL sans rien à scroller, et le doigt
       posé sur une photo voyait son geste vertical avalé → la page ne
       défilait plus. En `hidden` il n'y a plus d'axe vertical à capter, le
       geste remonte à la page. Aucun impact visuel : `auto` clippait déjà. */
    overflow-y: hidden;
    /* proximity (pas mandatory) → le swipe respecte l'élan du doigt et
       ne "colle" pas brutalement : nettement plus agréable sur mobile. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--container-px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;     /* pas de chaînage au scroll page / retour nav */
    /* Surtout PAS de touch-action: pan-x ici — ça n'exprime pas une
       préférence pour l'horizontale, ça INTERDIT le panning vertical à tout
       geste parti d'une photo (la valeur effective est l'intersection avec
       les ancêtres) : la page ne défilerait plus. On laisse le défaut `auto`,
       qui autorise les deux axes et laisse le navigateur verrouiller l'axe
       dominant du geste : swipe latéral → carrousel, swipe vertical → page. */
    scrollbar-width: none;              /* Firefox : masquer la scrollbar */
    cursor: grab;
}

.gallery__track::-webkit-scrollbar {
    display: none;                      /* Chrome / Safari */
}

.gallery__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;            /* fluide pendant le drag souris */
    scroll-behavior: auto;
    user-select: none;                 /* pas de sélection de texte en glissant */
}

/* Les photos ne doivent jamais partir en drag & drop natif : on attrape la
   carte pour faire défiler, pas pour déplacer l'image. */
.gallery__card img,
.gallery__card-img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Flèches précédent / suivant (PC). Sur mobile : on swipe → masquées. */
.gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(20, 24, 19, 0.82);
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-primary);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--t-base), border-color var(--t-base),
                opacity var(--t-base);
}

/* Chevron SVG parfaitement centré (le caractère ‹ › est optiquement décalé) */
.gallery__arrow svg {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.gallery__arrow:hover {
    background: rgba(var(--color-accent-rgb), 0.9);
    border-color: transparent;
    color: #fff;
}

.gallery__arrow--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.gallery__arrow--next { right: clamp(0.5rem, 2vw, 1.25rem); }

.gallery__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .gallery__arrow { display: none; }
}

.gallery__card {
    flex: 0 0 auto;
    width: min(340px, 82vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

.gallery__card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35),
                0 0 30px var(--color-accent-subtle);
}

.gallery__card-img {
    position: relative;
    overflow: hidden;
    /* hauteur d'image bornée par l'écran (≈425px à 100 %, ~4/5 avec la largeur).
       C'EST la clé : bornée en vh → ne dépasse jamais 100vh → aucun clip. */
    height: min(425px, 47vh);
    flex: 0 0 auto;
}

.gallery__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.gallery__card:hover .gallery__card-img img {
    transform: scale(1.04);
}

.gallery__card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    /* Marque toujours en capitales, en haut à gauche (demande client 09/2026) */
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid var(--color-border-hover);
}

/* « Vendue » passe à droite : la gauche est réservée à la marque */
.gallery__card-badge--sold {
    left: auto;
    right: 1rem;
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    color: var(--color-accent);
}

.gallery__card-info {
    /* occupe le bas restant → cartes de hauteur strictement égale */
    flex: 1 0 auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

.gallery__card-model {
    font-family: var(--font-titles);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.3rem;
    /* réserve 2 lignes → toutes les cartes ont le même bloc texte,
       donc la même hauteur d'image et la même taille globale */
    min-height: 2.6em;
    line-height: 1.3;
}

.gallery__card-specs {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------
   SHOWCASE (Final CTA)
   ---------------------------------------------------------------- */
.showcase {
    position: relative;
    min-height: 70vh;
    display: flex;
    /* Titre calé en haut (même écart --section-py que les autres sections)
       au lieu d'être centré dans le min-height. */
    align-items: flex-start;
    overflow: hidden;
    padding: var(--section-py) 0;
}

.showcase__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.showcase__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    inset: 0;
    animation: kenburns 18s ease-in-out infinite alternate;
    will-change: transform;
}

.showcase__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 5, 5, 0.85) 0%,
        rgba(5, 5, 5, 0.68) 45%,
        rgba(5, 5, 5, 0.9) 100%
    );
}

.showcase__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.showcase__title {
    font-family: var(--font-titles);
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    /* Ombre renforcée : lisibilité garantie sur les zones claires de la photo */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
}

.showcase__text {
    font-size: 1.1rem;
    color: var(--color-text-body);
    max-width: 540px;
    margin: 0 auto 3rem;
    line-height: 1.75;
    /* Ombre renforcée pour rester lisible par-dessus la photo des fondateurs */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer {
    position: relative;
    background-color: var(--color-bg-deep);
    background-image: var(--pattern-img); /* motif réglable (le halo = ::before) */
    background-size: var(--pattern-scale);
    background-repeat: repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 5rem 0 2rem;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.5fr 1.2fr;
    gap: 3rem;
    margin-bottom: 4rem;
    text-align: left;
}

.footer__col--brand img {
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.footer__description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 320px;
}

.footer__col-title {
    font-family: var(--font-titles);
    font-size: 1.15rem;
    color: var(--color-text-primary);
    margin-bottom: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.footer__col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.footer__list li {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.footer__link:hover {
    color: #fff;
    transform: translateX(6px);
}

.footer__link:hover .footer__icon {
    /* No color/filter change for emojis here */
}

/* Logos réseaux (Instagram / Facebook) en SVG — discrets, s'éclaircissent au survol */
.footer__social-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.footer__link:hover .footer__social-icon {
    color: #fff;
}

.footer__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.footer__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 3rem 0;
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    /* Pas de bandeau à fond propre ici : ça donnait un "footer dans le
       footer". Le .footer__divider au-dessus suffit à séparer. */
    padding-top: 0.5rem;
}

.footer__easter-egg {
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--t-base);
}

.footer__easter-egg:hover {
    color: var(--color-text-secondary);
}

.footer__copy {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Liens légaux sous le copyright (mentions légales, RGPD, cookies) */
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.2);
}

.footer__legal-link {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color var(--t-fast);
}

.footer__legal-link:hover {
    color: var(--color-accent);
}

/* CGU/CGV : accès demandé « facilement identifiable » → contrasté et encadré */
.footer__legal-link--strong {
    color: var(--color-text-primary);
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
}

.footer__legal-link--strong:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* --- Footer Micro-Animations --- */
.anim-phone:hover .footer__icon {
    animation: ring-phone 0.5s ease-in-out infinite alternate;
}
.anim-pin:hover .footer__icon {
    animation: drop-pin 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.anim-camera:hover .footer__icon {
    animation: flash-camera 0.4s ease-out;
}
.anim-car:hover .footer__icon {
    animation: flash-headlight 0.5s ease-in-out;
}
.anim-building:hover .footer__icon {
    animation: build-up 0.5s ease-out forwards;
}
.anim-rocket:hover .footer__icon {
    animation: rocket-prep 0.4s ease-in-out forwards, rocket-fly 0.1s linear 0.4s infinite alternate;
}

@keyframes ring-phone {
    0% { transform: rotate(-15deg) scale(1.1); }
    100% { transform: rotate(15deg) scale(1.1); }
}

@keyframes drop-pin {
    0% { transform: translateY(0); }
    30% { transform: translateY(-12px) scaleY(1.1); }
    60% { transform: translateY(0) scaleY(0.85); }
    80% { transform: translateY(-3px) scaleY(1.05); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes flash-camera {
    0% { transform: scale(1); text-shadow: none; }
    20% { transform: scale(1.2); text-shadow: 0 0 15px #fff, 0 0 30px #fff; }
    100% { transform: scale(1); text-shadow: none; }
}

@keyframes flash-headlight {
    0% { text-shadow: none; transform: scale(1); }
    20% { text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px rgba(0, 210, 106, 0.8); transform: scale(1.1); }
    100% { text-shadow: none; transform: scale(1); }
}

@keyframes build-up {
    0% { transform: scaleY(1) translateY(0); transform-origin: bottom; }
    30% { transform: scaleY(0.6) translateY(4px); transform-origin: bottom; }
    60% { transform: scaleY(1.2) translateY(-2px); transform-origin: bottom; }
    100% { transform: scaleY(1) translateY(0); transform-origin: bottom; }
}

@keyframes rocket-prep {
    0% { transform: translateY(0) rotate(0); }
    25% { transform: translate(-1px, 2px) rotate(-5deg); }
    50% { transform: translate(1px, -1px) rotate(5deg); }
    75% { transform: translate(-1px, 1px) rotate(-5deg); }
    100% { transform: translate(0, -10px) rotate(0); }
}

@keyframes rocket-fly {
    0% { transform: translate(0, -10px) rotate(-1deg); }
    100% { transform: translate(0, -12px) rotate(1deg); }
}

@media (max-width: 1024px) {
    .footer__top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 4rem 0 2rem;
    }

    .footer__top {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }
    
    .footer__col--brand img {
        margin-left: auto;
        margin-right: auto;
    }

    .footer__description {
        margin: 0 auto;
    }
    
    /* Colonnes empilées et centrées : chaque liste était un bloc inline
       centré sur SA propre largeur → les bords gauches tombaient en escalier
       (contact à 53px, réseaux à 79px…). On aligne tout sur l'axe médian :
       un seul repère visuel pour l'ensemble du footer. */
    .footer__list {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 0;
    }

    .footer__list li,
    .footer__link {
        justify-content: center;
    }

    /* Le trait de soulignement suit le titre, lui aussi centré */
    .footer__col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__list--hours li {
        width: 100%;
        max-width: 250px;
    }
    
    .footer__link:hover {
        transform: translateY(-2px);
    }
}

/* ================================================================
   KEYFRAMES
   ================================================================ */
@keyframes hero-line {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 48px;
        opacity: 1;
    }
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.2),
                    0 4px 16px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 50px rgba(var(--color-accent-rgb), 0.35),
                    0 4px 24px rgba(0, 0, 0, 0.4);
    }
}

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

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet landscape */
@media (max-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .about__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about__photos {
        justify-content: center;
    }

    .about__text {
        text-align: center;
    }

    .about__text p {
        max-width: 600px;
        margin: 0 auto 1.15em;
    }

    .about__text-sub {
        margin-top: 2rem;
    }

    .gallery__card {
        flex: 0 0 300px;
    }
}

/* Tablet portrait / large phones */
@media (max-width: 768px) {
    /* 2 colonnes (hérité du palier 1024) mais borné pour ne jamais dépasser le viewport */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: min(560px, 100%);
        margin: 0 auto;
    }

    .about__photos {
        gap: 1rem;
    }

    .about__photo {
        width: 170px;
    }

    .about__text {
        text-align: left;
    }

    .about__photo:nth-child(2) {
        margin-top: 1.5rem;
    }

    .about__quote {
        padding: 2rem 1.5rem 2rem 2.5rem;
    }

    .about__quote-mark {
        font-size: 4rem;
        left: 0.6rem;
        top: -0.1rem;
    }

    .about__quote p {
        font-size: 1.05rem;
    }

    .btn--giant {
        padding: 20px 36px;
        font-size: 0.95rem;
    }

    /* Showcase : hero plein cadre (cover) sur mobile, texte superposé.
       Hauteur modérée pour limiter le rognage latéral des 2 fondateurs. */
    .showcase {
        min-height: 54vh;
        overflow: hidden;
        /* Écart haut-de-section → titre aligné sur les autres sections. */
        padding: var(--section-py) 0;
    }

}

/* Mobile */
@media (max-width: 480px) {
    /* Showcase : hauteur réduite sur très petit écran (fond flouté conservé) */
    .showcase { min-height: 50vh; }
    .showcase__title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 0.9rem; }
    .showcase__text { font-size: 0.96rem; margin-bottom: 1.75rem; }

    /* Services : grille 2×2 sur téléphone (2 cartes par ligne, 2 lignes).
       Contenu compacté pour que les cartes restent équilibrées. */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        max-width: 100%;
    }
    .service-card {
        padding: 1.25rem 0.7rem;
    }
    .service-card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.6rem;
    }
    .service-card__title {
        font-size: 0.82rem;
        letter-spacing: 0.04em;
    }
    .service-card__text {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .hero__title {
        font-size: clamp(1.45rem, 6vw, 2.1rem);
        text-wrap: balance; /* "L'expertise d'une grande concession" → 2 lignes équilibrées */
    }

    .hero__subtitle {
        font-size: 0.9rem;
    }

    .about__photos {
        flex-direction: column;
        align-items: center;
    }

    .about__photo {
        width: 200px;
    }

    .about__photo:nth-child(2) {
        margin-top: 0;
    }

    .about__text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .about__text p {
        margin-bottom: 0.75rem;
    }

    .about__text-sub {
        font-size: 0.9rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .about__text-sub strong:first-child {
        font-size: 0.95rem;
    }

    .about__quote {
        padding: 1.5rem 1.25rem 1.5rem 2rem;
    }

    .about__quote p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .about__quote-mark {
        font-size: 3.5rem;
        left: 0.2rem;
        top: -0.2rem;
    }

    .btn--primary {
        padding: 16px 32px;
    }

    .btn--giant {
        padding: 18px 28px;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
    }

    /* Le titre garde le plancher fluide de base (~1.75rem) : pas de
       rétrécissement agressif sur mobile (corrige le "Nos Services" trop petit). */
    .section__title br {
        display: none;
    }

    .proof__number {
        font-size: clamp(4.8rem, 21vw, 7.5rem);
    }

    .proof__plus {
        font-size: clamp(2.6rem, 10vw, 4rem);
    }

    .proof__label {
        font-size: 0.9rem;
        line-height: 1.4;
        padding: 0 1rem;
    }

    .testimonial-card {
        padding: 1.5rem 1rem;
    }

    .testimonial-card__text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .showcase__title {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .showcase__title br {
        display: none;
    }

    .showcase__text {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .scroll-indicator__circle {
        width: 42px;
        height: 42px;
    }

    .gallery__card {
        flex: 0 0 280px;
    }

    .gallery__card-img {
        aspect-ratio: 3 / 4;
    }

    .footer {
        padding: 3rem 0 1.5rem;
    }

    .footer__top {
        gap: 2rem;
    }

    .footer__col-title {
        margin-bottom: 1.2rem;
    }

    .footer__bottom {
        gap: 0.75rem;
    }
}

/* ================================================================
   MOBILE — FLUX NATUREL (refonte responsive)
   Les sections prennent leur hauteur selon le contenu (padding vertical
   fluide via --section-py). On abandonne le calage "1 section = 1 écran".
   Le hero conserve son plein écran d'origine (défini dans .hero de base).
   ================================================================ */
@media (max-width: 768px) {
    #about, #services, #social-proof, #showcase {
        overflow-x: hidden;
    }

    /* Titres de section : marge basse un peu réduite sur mobile */
    .section__title {
        margin-bottom: 2.5rem;
    }

    /* --- ABOUT (Le Garage) — pile de photos "swipe" (tap pour permuter) --- */
    .about__grid {
        gap: 2rem;
        margin: 0;
    }
    .about__text {
        text-align: center;
        font-size: 1rem;
    }
    /* Pile de photos empilées, hauteur fluide bornée (ne coupe jamais) */
    .about__photos {
        position: relative;
        height: clamp(300px, 62vw, 420px);
        width: 100%;
        max-width: 380px;
        display: block; /* Remove flex */
        margin: 0 auto;
        cursor: pointer;
    }
    .about__photo {
        position: absolute;
        /* 66 % de large avec 4 % de débord laissaient 61 % de recouvrement :
           la carte d'Aurélien masquait le visage de Florian, centré dans la
           sienne (retour client 09/2026). À 60 % collées aux bords, le
           recouvrement tombe à 33 % et les deux visages restent dégagés. */
        width: 60%;
        height: 84%;
        margin-top: 0 !important;
        border-radius: var(--radius-md);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.5s, filter 0.5s;
    }
    /* États par défaut si le JS n'a pas encore appliqué les classes */
    .about__photo:nth-child(1) { top: 0; left: 0; z-index: 2; transform: rotate(-4deg); }
    .about__photo:nth-child(2) { bottom: 0; right: 0; z-index: 1; transform: rotate(5deg); filter: brightness(0.6); }

    /* Classes appliquées par le JS */
    .about__photo.is-front {
        z-index: 2;
        transform: scale(1.05) rotate(0deg) !important;
        filter: brightness(1) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    }
    .about__photo.is-back {
        z-index: 1;
        transform: scale(0.9) rotate(5deg) !important;
        filter: brightness(0.5) !important;
    }
    .about__photo.is-back:nth-child(1) { transform: scale(0.9) rotate(-5deg) translate(-16px, -16px) !important; }
    .about__photo.is-back:nth-child(2) { transform: scale(0.9) rotate(5deg) translate(16px, 16px) !important; }

    .about__photo img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: var(--radius-md);
    }
    /* La photo "fun" (comme le hover PC) s'affiche sur la carte en avant.
       Le tap (initGarageSwipe) bascule is-front/is-back → switch + fun en même temps. */
    .about__photo-hover {
        display: block !important;
        opacity: 0;
    }
    .about__photo.is-front .about__photo-default {
        opacity: 0;
    }
    .about__photo.is-front .about__photo-hover {
        opacity: 1;
    }
    /* Citation restaurée en flux naturel (plus de display:none) */
    .about__quote {
        margin-top: 2.5rem;
    }

    /* --- SERVICES — grille responsive, cartes dimensionnées au contenu --- */
    .service-card {
        padding: 1.75rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: var(--radius-lg);
    }
    /* Soulèvement doux + passage au-dessus des voisines au tap */
    .service-card.is-active {
        transform: translateY(-4px) scale(1.02);
        z-index: 2;
    }
    .service-card__icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 0.85rem;
        flex-shrink: 0;
    }
    .service-card__title {
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        margin-bottom: 0.5rem;
    }
    .service-card__text {
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--color-text-secondary);
    }

    /* --- SOCIAL PROOF (Avis) --- */
    .section__title--spaced {
        margin-bottom: 0.75rem;
        font-size: clamp(1.2rem, 4vw, 1.5rem);
    }
    .testimonial-card {
        padding: 1.25rem 1rem;
    }
    .testimonial-card__text {
        font-size: 0.9rem;
    }

    /* --- SHOWCASE mobile : photo plein cadre (cover), texte superposé --- */
    .showcase__bg-img {
        object-fit: cover;
        object-position: center center;
        animation: none !important;
    }
    .showcase__overlay {
        background: linear-gradient(180deg, rgba(5,5,5,0.58) 0%, rgba(5,5,5,0.32) 45%, rgba(5,5,5,0.82) 100%);
    }
    .showcase__content {
        position: relative;
        z-index: 2;
    }
}

/* ================================================================
   ÉCRANS COURTS — paysage téléphone : on compacte la pile de photos et
   la galerie. Le flux naturel gère déjà le reflux du reste, plus besoin
   de forcer quoi que ce soit. Scellé au mobile pour ne pas toucher le
   desktop en fenêtre courte.
   ================================================================ */
@media (max-width: 768px) and (max-height: 620px) {
    .about__photos {
        height: clamp(200px, 60vh, 300px);
    }
    .gallery .section__title {
        font-size: clamp(1.3rem, 3vw, 1.9rem);
    }
    .gallery__subtitle {
        display: none;
    }
}

/* --- GALLERY — Mobile touch enhancements --- */
@media (max-width: 768px) {
    .gallery__card {
        flex: 0 0 280px;
    }
    .gallery__subtitle {
        font-size: 0.85rem;
        padding: 0 var(--container-px);
    }
    /* Disable Ken Burns animation on mobile for performance */
    .showcase__bg-img {
        animation: none !important;
    }
}

/* ================================================================
   ACCESSIBILITY — Reduced Motion
   ================================================================ */
@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;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }

    /* Bouton flottant : apparaît en place (sinon reste garé hors écran) */
    .floating-cta {
        transform: none !important;
    }
    .floating-cta.visible {
        opacity: 1 !important;
    }
}

/* ================================================================
   FLOATING CTA — bouton stock persistant (bas-droite, après le hero)
   ================================================================ */
.floating-cta {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 18px 44px;                  /* = .btn--primary (même taille) */
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-lbc);
    background: var(--color-lbc);        /* orange plein au repos */
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
                0 0 26px var(--color-lbc-glow);
    opacity: 0;
    transform: translateX(120%);        /* garé hors cadre à droite */
    pointer-events: none;
    /* Entrée = animation drive-in (voir .visible) ; sortie (scroll vers le
       haut) = transition douce opacity/transform ; lift hover = translate */
    transition: opacity 0.35s ease,
                transform 0.4s var(--ease-out-expo),
                translate 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.3s ease;
}

/* La voiture entre par la droite et se gare (métaphore auto, en écho au
   .btn::after qui traverse déjà au hover). transform piloté par l'anim ;
   le lift au hover passe par `translate` (propriété indépendante) pour
   composer avec transform sans être avalé par le fill `forwards`. */
/* Entrée : la voiture roule depuis la droite (drive-in), PUIS le bouton
   flotte doucement en continu (bob) — les 2 ciblent transform, le bob
   démarre à 0.6s (fin du drive-in) et gagne une fois actif. */
.floating-cta.visible {
    animation: floating-drive-in 0.6s var(--ease-out-expo) forwards,
               floating-bob 3.4s ease-in-out 0.6s infinite;
    pointer-events: auto;
}

.floating-cta:hover {
    background: #ff8235;                 /* orange un peu plus clair au survol */
    border-color: #ff8235;
    color: #ffffff;
    translate: 0 -3px;                   /* lift indépendant → compose avec le bob */
    box-shadow: 0 0 46px var(--color-lbc-glow),
                0 10px 26px rgba(0, 0, 0, 0.5);
}

@keyframes floating-drive-in {
    0%   { opacity: 0; transform: translateX(120%); }
    70%  { opacity: 1; transform: translateX(-6px); }   /* léger dépassement */
    100% { opacity: 1; transform: translateX(0); }
}

/* Flottement doux continu : oscille sur son centre (haut-bas + balancement) */
@keyframes floating-bob {
    0%,
    100% { transform: translateY(0) rotate(-1.2deg); }
    50%  { transform: translateY(-7px) rotate(1.2deg); }
}

/* Desktop : pas d'icône statique — la voiture .btn::after traverse au hover */
.floating-cta__icon {
    flex-shrink: 0;
    display: none;
}

/* Mobile — pastille icône seule pour ne pas gêner la lecture */
@media (max-width: 480px) {
    .floating-cta {
        right: 14px;
        bottom: 14px;
        padding: 13px;
        gap: 0;
        transform: translateX(140%);    /* pastille : distance resserrée */
    }
    .floating-cta__text {
        display: none;
    }
    /* Mobile : pas de hover → on garde l'icône voiture visible */
    .floating-cta__icon {
        display: block;
    }
}

/* ================================================================
   KINETIC WALL — mur d'avis défilant (vanilla, inspiré scrollxui)
   ================================================================ */
/* Eyebrow au-dessus du compteur (label du chiffre 147) */
.proof__eyebrow {
    display: block;
    font-family: var(--font-titles);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.8rem;
}

/* Barre de note — signale que le mur ci-dessous = avis Google */
.proof__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    /* Placé là où était "lors de notre première année" : écart identique
       au-dessus (le 143, via .proof__counter) et en-dessous (le titre) */
    margin: 0 auto 2.5rem;
    font-size: 1.25rem;
    color: var(--color-text-secondary);
}

/* Tampon "Vérifié" — claque sur le chiffre à la fin du décompte */
.proof__stamp-slam {
    position: absolute;
    top: -0.55em;
    left: -1.15em;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.3rem 0.62rem;
    border: 3px solid #FFC107;
    border-radius: 8px;
    color: #FFC107;
    font-family: var(--font-titles);
    font-size: clamp(0.72rem, 1.6vw, 1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 193, 7, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.4),
                0 6px 18px rgba(0, 0, 0, 0.35);
    transform: scale(2.6) rotate(-24deg);
    opacity: 0;
    pointer-events: none;
}

.proof__stamp-slam svg {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
}

/* Classe ajoutée en JS quand le compteur atteint sa valeur finale */
.proof__number-wrapper.is-stamped .proof__stamp-slam {
    animation: proof-stamp-slam 0.6s cubic-bezier(0.2, 1.5, 0.3, 1) forwards;
}

@keyframes proof-stamp-slam {
    0%   { transform: scale(2.6) rotate(-24deg); opacity: 0; filter: blur(3px); }
    55%  { transform: scale(0.9)  rotate(-9deg);  opacity: 1; filter: blur(0); }
    72%  { transform: scale(1.08) rotate(-14deg); }
    86%  { transform: scale(0.98) rotate(-11deg); }
    100% { transform: scale(1)    rotate(-12deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .proof__stamp-slam {
        transform: rotate(-12deg);
        opacity: 1;
        animation: none;
    }
}

/* mobile : tampon plus compact, calé à l'intérieur pour éviter tout débordement */
@media (max-width: 600px) {
    .proof__stamp-slam {
        top: -0.35em;
        left: -10px;
        padding: 0.24rem 0.5rem;
        border-width: 2px;
    }
}

/* Bloc "Avis vérifiés par Google" */
.proof__google {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    font-size: 1.15rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.proof__google:hover,
.proof__google:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
}

.proof__google-logo {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.proof__google-text strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

.proof__rating-stars {
    color: #FFC107;
    letter-spacing: 0.06em;
    font-size: 1.6rem;
}

.proof__rating-score {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1.6rem;
}

.kinetic-wrap {
    position: relative;
    margin-top: 2rem;
}

.kinetic {
    position: relative;
    height: clamp(420px, 64vh, 620px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.kinetic__col {
    position: relative;
    overflow: hidden;
}

.kinetic__track {
    display: flex;
    flex-direction: column;
    animation: kinetic-scroll var(--kinetic-duration, 45s) linear infinite;
    will-change: transform;
}

/* Colonnes paires : défilent dans l'autre sens */
.kinetic__col:nth-child(even) .kinetic__track {
    animation-direction: reverse;
}

/* Desktop (souris) : pause la colonne survolée pour lire un avis */
@media (hover: hover) and (pointer: fine) {
    .kinetic__col:hover .kinetic__track {
        animation-play-state: paused;
    }
}

/* Tactile : pause la colonne dont un avis est sélectionné (tap) */
.kinetic__col.is-paused .kinetic__track {
    animation-play-state: paused;
}

@keyframes kinetic-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.kinetic-card {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.4rem 1.3rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease;
}

/* Survol (desktop) ou sélection au tap (mobile) : liseré + halo accent */
.kinetic-card:hover,
.kinetic-card.is-selected {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: var(--color-bg-elevated);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
                0 0 26px rgba(var(--color-accent-rgb), 0.16);
}

/* Tactile : le :hover reste "collé" après un tap. Dès qu'un avis n'est plus
   sélectionné, on annule le contour/halo pour un retour à l'état normal
   (seul .is-selected, piloté en JS, garde la carte mise en avant). */
@media (hover: none) {
    .kinetic-card:hover:not(.is-selected) {
        border-color: var(--color-border);
        background: var(--color-bg-surface);
        transform: none;
        box-shadow: none;
    }
}

.kinetic-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kinetic-card__stars {
    color: #FFC107;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

/* Pied de carte : avatar + nom */
.kinetic-card__foot {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.1rem;
}

.kinetic-card__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kinetic-card__name {
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-accent);
}

.kinetic-card__text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.kinetic-card__author {
    display: block;
    margin-top: 0.9rem;
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .kinetic {
        grid-template-columns: repeat(2, 1fr);
        height: 480px;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .kinetic {
        grid-template-columns: repeat(2, 1fr);
        height: 460px;
        gap: 0.6rem;
    }
    /* cartes compactées pour tenir sur 2 colonnes étroites */
    .kinetic-card {
        padding: 0.85rem 0.8rem 0.75rem;
        margin-bottom: 0.6rem;
        border-radius: var(--radius-sm, 8px);
    }
    .kinetic-card__text {
        font-size: 0.78rem;
        line-height: 1.5;
    }
    .kinetic-card__stars {
        font-size: 0.8rem;
    }
    .kinetic-card__foot {
        gap: 0.45rem;
        margin-top: 0.7rem;
    }
    .kinetic-card__avatar {
        width: 28px;
        height: 28px;
        font-size: 0.68rem;
    }
    .kinetic-card__name {
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kinetic {
        height: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .kinetic__track {
        animation: none;
    }
}

/* ----------------------------------------------------------------
   SECTION RÉSEAUX SOCIAUX — flux Instagram (widget SociableKIT)
   Section plein écran, grille carrée cliquable vers Instagram.
   ---------------------------------------------------------------- */
.socials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Padding vertical hérité de .section (var(--section-py)) → même marge
       haut/bas que toutes les autres sections, mobile comme desktop.
       Le contenu (titre + description + carte de 6) tient dans un viewport. */
}

/* En flex-column, le margin:auto du conteneur le réduirait à la largeur du contenu :
   on force la pleine largeur pour que la grille puisse s'élargir/se centrer. */
.socials > .container {
    width: 100%;
}

/* Titre resserré : la description prend le relais juste en dessous */
.socials .section__title {
    margin-bottom: 0.9rem;
}

/* Courte description impactante entre le titre et la grille */
.socials__desc {
    text-align: center;
    max-width: 40ch;
    margin: 0 auto 2rem;
    font-size: clamp(0.98rem, 2.4vw, 1.1rem);
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.socials__desc strong {
    color: var(--color-text-body);
    font-weight: 600;
}

/* ================================================================
   FLUX INSTAGRAM — "l'écran" : un post à la fois au format natif 9:16,
   l'identité du compte à côté, une bande de 6 vignettes pour choisir.
   Les reels sont des .mp4 de ~5 Mo : lecture desktop uniquement, jamais
   préchargée. Sur mobile la vignette suffit, la vidéo part au tap.
   Les 6 photos de voitures du HTML servent de repli si l'API tombe.
   ================================================================ */
.ig-feed {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: min(900px, 94vw);
    margin: 0 auto;
}

/* ---------- l'écran ---------- */
.ig-feed__screen {
    position: relative;
    width: clamp(230px, 27vw, 310px);
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Filet à la teinte accent, au-dessus des médias, sans les rogner */
.ig-feed__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    pointer-events: none;
    z-index: 3;
}

.ig-feed__stage {
    position: absolute;
    inset: 0;
}

.ig-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s var(--ease-out);
}

.ig-slide.is-active {
    opacity: 1;
}

.ig-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Repli : les photos de voitures sont en paysage. Les recadrer dans un 9:16
   ne montrerait qu'une portière. On les laisse entières, le fond sombre fait
   la bande — ça se lit comme un choix, pas comme un bug. */
.ig-slide[data-fake] img {
    object-fit: contain;
}

.ig-feed__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    background: var(--color-bg-elevated);
}

.ig-feed__video[hidden] {
    display: none;
}

/* Pastille type de média, en haut à droite de l'écran */
.ig-feed__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
}

.ig-feed__badge[hidden] {
    display: none;
}

.ig-feed__badge svg {
    width: 15px;
    height: 15px;
}

/* Bouton de lecture mobile : recouvre l'écran, invisible sur desktop */
.ig-feed__play {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.ig-feed__play[hidden] {
    display: none;
}

.ig-feed__play span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform var(--t-fast);
}

.ig-feed__play:hover span,
.ig-feed__play:focus-visible span {
    transform: scale(1.08);
}

.ig-feed__play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

/* ---------- colonne identité ---------- */
.ig-feed__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.ig-feed__handle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-titles);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    color: var(--color-text-primary);
    margin: 0;
    text-decoration: none;
    transition: color var(--t-fast);
}

.ig-feed__handle:hover,
.ig-feed__handle:focus-visible {
    color: var(--color-accent);
}

.ig-feed__handle svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--color-accent);
}

.ig-feed__stats {
    display: flex;
    gap: 2rem;
}

.ig-feed__stats[hidden] {
    display: none;
}

.ig-feed__stat b {
    display: block;
    font-family: var(--font-titles);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.ig-feed__stat span {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ig-feed__caption {
    margin: 0;
    color: var(--color-text-body);
    line-height: 1.65;
    /* 3 lignes max : les légendes Instagram sont longues et déséquilibrent
       la colonne dès que le post est bavard. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.65em;
}

.ig-feed__engage {
    display: flex;
    gap: 1.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.ig-feed__engage[hidden] {
    display: none;
}

.ig-feed__engage span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.ig-feed__engage svg {
    width: 15px;
    height: 15px;
    color: var(--color-accent);
}

.ig-feed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.ig-feed__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-bg-deep);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.ig-feed__cta:hover,
.ig-feed__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--color-accent-glow);
}

.ig-feed__cta svg {
    width: 17px;
    height: 17px;
}

.ig-feed__post-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--t-fast);
}

.ig-feed__post-link:hover,
.ig-feed__post-link:focus-visible {
    color: var(--color-accent);
}

.ig-feed__post-link svg {
    width: 14px;
    height: 14px;
}

/* ---------- bande de sélection ---------- */
.ig-feed__strip {
    display: flex;
    gap: 8px;
    margin-top: 0.25rem;
}

.ig-thumb {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 9 / 16;
    max-height: 96px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-elevated);
    opacity: 0.42;
    outline-offset: 3px;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.ig-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-thumb:hover,
.ig-thumb:focus-visible {
    opacity: 0.8;
}

.ig-thumb.is-active {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* ---------- empilement mobile ----------
   Objectif : toute la section tient dans un viewport de téléphone. Elle
   faisait 1063 px pour 812 disponibles. Chaque valeur ci-dessous vient
   d'une mesure, pas d'un réglage au jugé — le détail du budget est dans
   les commentaires de chaque bloc.

   `display: contents` fait remonter les enfants de .ig-feed__side comme
   items directs de la grille : on réordonne et on replace librement, sans
   toucher au HTML ni au desktop. Ordre voulu — identité, l'écran, le
   sélecteur, les chiffres, le texte, les actions.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    /* 160 px de respiration verticale sur un écran de téléphone, c'est un
       cinquième du viewport pour du vide. −80 px. */
    #reseaux {
        /* Marges haut/bas strictement égales, et réduites : c'est ce qui
           permet à la section entière de tenir dans un écran de téléphone.
           Le header est fixe : sans cette marge, arriver par le menu
           « Réseaux » cachait le titre derrière lui (mesuré : titre à
           36 px, bas du header à 65). */
        scroll-margin-top: calc(4.25rem + var(--ticker-height));
        /* Le reel agrandi (retour client) reprend les 48 px de marge
           verticale rendus ici : 772 + 96 px de bande fixe dépassait le
           viewport, la ligne « Suivre / Voir ce post » passait sous le pli. */
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    /* Description resserrée à une ligne : c'est de la copie statique, elle
       paie la place que les marges standard reprennent. */
    /* Sur téléphone on garde la phrase d'accroche entière et on retire la
       première : tronquer à « La… » coupait au milieu d'une phrase. Même
       hauteur qu'une ligne, mais une phrase complète. */
    #reseaux .socials__desc {
        margin-bottom: 0.6rem;
        font-size: 0.92rem;
    }
    #reseaux .socials__desc-lead {
        display: none;
    }
    #reseaux .section__title {
        margin-bottom: 0.5rem;
    }

    .ig-feed {
        /* Deux colonnes uniquement pour pouvoir accoler chiffres et
           réactions sur une même rangée (voir plus bas) ; tout le reste
           traverse les deux. */
        grid-template-columns: auto 52px;
        justify-content: center;
        justify-items: center;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
    }
    .ig-feed__side {
        display: contents;
    }
    .ig-feed__handle,
    .ig-feed__caption,
    .ig-feed__actions {
        grid-column: 1 / -1;
    }

    .ig-feed__handle {
        order: 1;
        font-size: 1.02rem;
    }
    .ig-feed__screen {
        order: 2;
        grid-column: 1;
        /* 280 px mangeait 60 % du viewport et refoulait tout le reste sous
           la ligne de flottaison. −63 px.
           Retour client 09/2026 : le reel était trop petit, on reprend de la
           place sur le vide restant au-dessus du titre. */
        width: min(206px, 55vw);
    }
    /* La bande remonte juste sous l'écran : plus bas, on ne comprenait
       plus qu'elle le pilotait. */
    /* Bande à la verticale, collée à l'écran : elle occupe l'espace
       horizontal qui restait vide au lieu de coûter une rangée entière.
       ~42 px repris, sans rien retirer au contenu. */
    .ig-feed__strip {
        order: 3;
        grid-column: 2;
        flex-direction: column;
        align-self: stretch;
        justify-self: center;
        width: 52px;
        max-width: none;
        gap: 5px;
        margin-top: 0;
    }
    .ig-feed__strip .ig-thumb {
        aspect-ratio: auto;
        width: 100%;
        max-height: none;
        min-height: 0;
        flex: 1 1 0;
    }
    /* Chiffres du compte à gauche, réactions du post à droite, une seule
       rangée au lieu de deux empilées. −65 px avec le gap économisé. */
    .ig-feed__stats {
        order: 4;
        grid-column: 1 / -1;
        justify-content: center;
        gap: 1.1rem;
    }
    .ig-feed__engage {
        order: 5;
        grid-column: 1 / -1;
        justify-content: center;
        gap: 0.9rem;
        font-size: 0.85rem;
    }
    /* Légende masquée sur téléphone : une ligne tronquée juste au-dessus
       de « Voir ce post », qui mène au texte complet. 32 px repris — c'est
       ce qui fait tenir la section sans rapetisser encore le reel. */
    .ig-feed__caption {
        display: none;
    }
    .ig-feed__caption--jamais {
        order: 6;
        width: 100%;
        font-size: 0.88rem;
        /* 1 ligne au lieu de 2 : la légende complète est à un tap sur
           « Voir ce post ». −23 px, c'est ce qui fait tenir la section. */
        -webkit-line-clamp: 1;
    }
    .ig-feed__actions {
        order: 7;
        justify-content: center;
        gap: 0.6rem;
    }
    /* Trois libellés sur une rangée de 375 px, ça se marchait dessus — et
       la fin de rangée passait sous le CTA flottant. Facebook garde son
       icône seule. */
    .ig-feed__fb span {
        display: none;
    }

    .ig-feed__stat b {
        font-size: 1.1rem;
    }
    .ig-feed__stat span {
        font-size: 0.6rem;
        letter-spacing: 0.05em;
    }
    .ig-thumb {
        max-height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ig-slide,
    .ig-thumb,
    .ig-feed__cta,
    .ig-feed__play span {
        transition: none;
    }
    .ig-thumb.is-active {
        transform: none;
    }
}

/* ================================================================
   BANDEAU ACCÈS — carte « temps de route » (Leaflet + OpenStreetMap)
   Bande pleine largeur entre Réseaux et la Vitrine. Tuiles OSM passées en
   sombre/vert par filtre CSS, tracés en arc vers le garage, panneau vitré
   (titre, 4 villes en tuiles 2×2, bouton itinéraire) calé sur la marge du
   container du site. Mobile : le panneau devient un volet en bas, et la
   carte ne capte pas le doigt (drag coupé côté JS) → le scroll de la page
   passe toujours.
   ================================================================ */
.access {
    position: relative;
    scroll-margin-top: 6rem;   /* header fixe + bandeau défilant */
}
.access__card {
    position: relative;
    isolation: isolate;                 /* les z-index Leaflet restent internes */
    width: 100%;
    height: clamp(380px, 46vh, 520px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-deep);
    overflow: hidden;
}
.access__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-bg-deep);
}

/* Leaflet au thème sombre (surcharge de leaflet.css, chargé avant).
   Pas de boutons de zoom : la molette fait défiler la page, la carte se
   cadre seule sur le trajet choisi. */
.access .leaflet-container {
    background: var(--color-bg-deep);
    font-family: var(--font-body);
}
.access .leaflet-tile {
    filter: grayscale(1) invert(1) brightness(0.62) contrast(1.18) sepia(0.55) hue-rotate(65deg) saturate(0.65);
}
.access .leaflet-control-attribution {
    background: rgba(17, 21, 16, 0.8);
    color: var(--color-text-muted);
    font-size: 10px;
}
.access .leaflet-control-attribution a {
    color: var(--color-text-secondary);
}
/* Tracés jamais coupés au bord de la vue pendant le vol (flyTo) : Leaflet
   ne recadre ses chemins qu'en fin d'animation (noClip côté JS + overflow
   visible ici ; la carte elle-même, overflow hidden, borne l'affichage). */
.access .leaflet-overlay-pane svg {
    overflow: visible;
}

/* Explication quand la carte ne peut pas se charger (bibliothèque ou tuiles) */
.access__note {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(17, 21, 16, 0.88);
    font-size: 12px;
    text-align: center;
    color: var(--color-text-body);
}

/* Vignette + teinte accent + motif du site par-dessus les tuiles */
.access__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.access__fx--scan {
    background-image: var(--pattern-img);
    background-size: var(--pattern-scale);
    opacity: 0.3;   /* texture à peine visible : au-delà, ça fait grille par-dessus le plan */
}
.access__fx--tint {
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.05), transparent 30%, transparent 70%, rgba(var(--color-accent-rgb), 0.04));
}
.access__fx--vignette {
    background: radial-gradient(ellipse 90% 80% at 55% 45%, transparent 45%, rgba(10, 13, 9, 0.55) 100%);
}

/* Panneau vitré, calé sur la marge gauche du container du site */
.access__panel {
    position: absolute;
    left: max(20px, calc(50% - var(--container-max) / 2));
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: min(372px, calc(100% - 40px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    line-height: 1.25;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: rgba(17, 21, 16, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.access__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    width: 44px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 0 0 2px 2px;
}
.access__panel-head {
    padding: 14px 16px 6px;
}
.access__kicker {
    display: block;
    font-family: var(--font-splash);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.access__panel-title {
    margin: 5px 0 0;
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

/* 4 villes en tuiles 2×2 : grosses cibles (≥ 54 px), tout visible d'un coup */
.access__routes {
    list-style: none;
    margin: 0;
    padding: 6px 8px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.access__routes li {
    display: flex;
}
.access__route {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.access__route.is-active {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.12);
}
.access__city {
    display: block;
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}
.access__time {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.access__min {
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-accent);
}
.access__km {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

/* Pied du panneau : LE bouton de la section (itinéraire). Vert accent,
   pas orange : l'orange est réservé au stock Le Bon Coin. */
.access__panel-foot {
    padding: 8px;
    border-top: 1px solid var(--color-border);
}
.access__cta {
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-bg-deep);
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;   /* épingle + libellé + flèche sur une seule ligne */
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.25);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.access__cta .btn__chevron {
    flex-shrink: 0;
}
.access__cta-pin {
    width: 13px;
    height: 18px;
    flex-shrink: 0;
    margin-right: 2px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* Survol réservé à la souris : au doigt, un :hover collant resterait allumé
   après le tap. Au doigt, un léger enfoncement à la place. */
@media (hover: hover) {
    .access__route:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--color-border-hover);
    }
    .access__cta:hover {
        background: var(--color-accent-vivid);
        border-color: var(--color-accent-vivid);
        box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.4);
        transform: translateY(-2px);
    }
    .access__cta:hover .btn__chevron {
        transform: translateX(4px);
    }
}
@media (hover: none) {
    .access__route:active,
    .access__cta:active {
        transform: scale(0.97);
    }
}

/* Marqueurs (divIcon Leaflet 0×0 : tout est positionné autour du point) */
.access-mk {
    position: relative;
}
.access-mk__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-bg-deep);
    border: 2.5px solid var(--color-text-secondary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.access-mk__label {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(17, 21, 16, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-body);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s, border-color 0.3s;
}
.access-mk--on .access-mk__dot {
    border-color: var(--color-accent);
    box-shadow: 0 0 14px rgba(var(--color-accent-rgb), 0.7);
}
.access-mk--on .access-mk__label {
    color: var(--color-text-primary);
    border-color: rgba(var(--color-accent-rgb), 0.45);
}
.access-home__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.55);
    animation: access-ring 2.6s var(--ease-out-expo) infinite;
}
@keyframes access-ring {
    0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}
.access-home__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.8), 0 0 0 4px rgba(17, 21, 16, 0.7);
    display: grid;
    place-items: center;
}
.access-home__core img {
    width: 24px;
    height: auto;
    display: block;
    filter: brightness(0) saturate(100%);
}
.access-home__label {
    position: absolute;
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.access-home__l1 {
    display: block;
    font-family: var(--font-splash);
    font-size: 8.5px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--color-accent-vivid);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.access-home__l2 {
    display: block;
    margin-top: 2px;
    font-family: var(--font-titles);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Tracé actif : pointillés qui « roulent » vers le garage */
.access-rt-anim {
    stroke-dasharray: 6 10;
    animation: access-dash 0.9s linear infinite;
}
@keyframes access-dash {
    to { stroke-dashoffset: -16; }
}

@media (max-width: 720px) {
    .access {
        scroll-margin-top: 6rem;   /* header + bandeau défilant */
    }
    .access__card {
        height: clamp(520px, 72svh, 640px);
    }
    /* Volet en bas de la carte, sans défilement interne */
    .access__panel {
        top: auto;
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: none;
        overflow: visible;
        transform: none;
        border-radius: 12px;
    }
    .access__panel-head {
        padding: 12px 14px 4px;
    }
    .access__panel-title {
        font-size: 13px;
    }
    /* Étiquette du garage : sur 2 lignes, ~160 px, pour rester dans la carte */
    .access-home__label {
        white-space: normal;
        width: 160px;
        line-height: 1.2;
    }
    .access-home__l1 {
        display: none;
    }
    .access-home__l2 {
        font-size: 12px;
        letter-spacing: 0.05em;
    }
    .access-mk__label {
        padding: 7px 11px;   /* ≈ 30 px : tapable */
    }
}

@media (prefers-reduced-motion: reduce) {
    .access-home__ring,
    .access-rt-anim {
        animation: none;
    }
}

/* ================================================================
   SHOWCASE — CADRAGE MOBILE (retour client 09/2026)
   Sur téléphone, le cadrage « cover » rognait les deux fondateurs sur
   les côtés et la bande fixe (header + ticker ≈ 96 px) recouvrait leurs
   visages. Sur mobile la photo passe donc en bandeau 16/9 dans le flux :
   elle est affichée en entier, décalée sous la bande fixe, le texte
   descend en dessous sur fond sombre.
   ================================================================ */
@media (max-width: 768px) {
    .showcase {
        display: block;
        min-height: 0;
        /* 96 px = header + ticker fixes : la photo commence toujours sous la bande */
        padding: calc(96px + 0.75rem) 0 var(--section-py);
        background: var(--color-bg-deep);
    }

    .showcase__bg {
        position: relative;
        inset: auto;
        /* Marges latérales : la photo respire, les fondateurs ne remplissent
           plus le cadre bord à bord (« dézoomer », retour client) */
        width: auto;
        margin: 0 var(--container-px) 1rem;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .showcase__bg-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        animation: none !important;
    }

    /* Voile très léger : la photo doit rester lisible, plus aucun texte dessus */
    .showcase__overlay {
        background: linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.10) 0%,
            rgba(5, 5, 5, 0.04) 50%,
            rgba(5, 5, 5, 0.35) 100%
        );
    }

    .showcase__content {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    /* Texte sur fond sombre : les ombres portées ne servent plus */
    .showcase__title,
    .showcase__text {
        text-shadow: none;
    }
}

/* ----------------------------------------------------------------
   HERO — cadrage sur écran court (retour client 09/2026)
   La photo est en portrait 3/4 et les têtes des fondateurs sont à 33 % de sa
   hauteur. Le recadrage « cover » centré rogne autant en haut qu'en bas :
   dès que la fenêtre devient large et courte (portable à petite hauteur,
   téléphone en paysage), le haut du cadre passait au-dessus de leurs têtes.
   On abaisse le point d'ancrage à mesure que le rapport largeur/hauteur
   augmente : la photo « descend » avec l'écran au lieu d'être décapitée.
   Mesuré : à 1440 px de large, les têtes commencent à être coupées sous
   652 px de haut, soit un rapport de 2,2.
   ---------------------------------------------------------------- */
@media (min-aspect-ratio: 16 / 9) {
    .hero__img {
        object-position: center 40%;
    }
}

@media (min-aspect-ratio: 2 / 1) {
    .hero__img {
        object-position: center 33%;
    }
}

/* ================================================================
   NUMÉRO DE TÉLÉPHONE — mise en avant (retour client 09/2026)
   Le numéro du bandeau doit accrocher l'œil et inciter à appeler.
   Pulsation de couleur + halo, et le combiné sonne par intermittence.
   Le bloc « prefers-reduced-motion » en fin de feuille neutralise déjà
   toutes les animations pour qui les refuse.
   ================================================================ */
@keyframes phone-attract {
    0%, 100% {
        color: var(--color-accent);
        text-shadow: 0 0 0 rgba(var(--color-accent-rgb), 0);
    }
    50% {
        color: var(--color-accent-vivid);
        text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.65);
    }
}

@keyframes phone-ring {
    0%, 68%, 100% { transform: rotate(0deg); }
    72% { transform: rotate(-14deg); }
    77% { transform: rotate(12deg); }
    82% { transform: rotate(-9deg); }
    87% { transform: rotate(7deg); }
    92% { transform: rotate(-4deg); }
}

.ticker__call {
    font-size: 0.8rem;
    animation: phone-attract 2.4s ease-in-out infinite;
}

.ticker__call .ticker__icon {
    transform-origin: 50% 60%;
    animation: phone-ring 2.4s ease-in-out infinite;
}

/* Au survol, on fige l'animation : l'utilisateur a déjà l'œil dessus */
.ticker__call:hover,
.ticker__call:focus-visible {
    animation-play-state: paused;
    color: var(--color-accent-vivid);
}

.ticker__call:hover .ticker__icon,
.ticker__call:focus-visible .ticker__icon {
    animation-play-state: paused;
}

/* ================================================================
   HERO — écrans très courts (téléphone en paysage, ~390 px de haut)
   Le bloc calé en bas ne tient pas : la première ligne du titre passait
   sous la bande fixe. On recentre et on compacte.
   ================================================================ */
@media (max-height: 560px) {
    .hero {
        align-items: center;
    }
    .hero__content {
        transform: none;
        padding-bottom: 3rem;
        padding-top: calc(var(--header-height) + var(--ticker-height));
    }
    .hero__accent-line {
        margin-bottom: 0.9rem;
    }
    .hero__title {
        font-size: clamp(1.4rem, 3.6vw, 2rem);
        margin-bottom: 1rem;
    }
    .hero__cta-group {
        flex-direction: row;
        gap: 0.75rem;
    }
    .hero__cta-group .btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    .scroll-indicator {
        display: none;
    }
}

/* ================================================================
   BANDEAU DE CONSENTEMENT (Microsoft Clarity)
   Barre basse, injectée par js/consent.js uniquement si aucun choix
   n'a encore été enregistré. z-index au-dessus du CTA flottant.
   ================================================================ */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
    padding: 1rem calc(var(--container-px) + env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom))
        calc(var(--container-px) + env(safe-area-inset-left));
    background: rgba(19, 21, 19, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border-hover);
    transform: translateY(100%);
    transition: transform 0.45s var(--ease-out-expo);
}

.consent.is-visible {
    transform: translateY(0);
}

.consent__text {
    max-width: 62ch;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-body);
}

.consent__link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.consent__actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.consent__btn {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast),
        color var(--t-fast);
}

.consent__btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-secondary);
}

.consent__btn--ghost:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.consent__btn--accept {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-bg-deep);
}

.consent__btn--accept:hover {
    background: var(--color-accent-vivid);
    border-color: var(--color-accent-vivid);
}

@media (max-width: 600px) {
    .consent {
        justify-content: stretch;
        gap: 0.85rem;
    }
    .consent__text {
        font-size: 0.8rem;
    }
    .consent__actions {
        width: 100%;
    }
    .consent__btn {
        flex: 1;
    }
}

/* Bouton « Gérer mon consentement » : même rendu que les liens légaux */
.footer__legal-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}