/* ==========================================================================
   +2 RÉNOVATION E.U.R.L — MARCILLAT-EN-COMBRAILLE (03)
   Charte +2 Rénovation : Anthracite (#0F1A2A) + Teal (#1FB5A8) — uniquement
   Typo : Inter (sans) · Cormorant Garamond (display) · Space Grotesk (utility)
   Artisan rénovation énergétique RGE QUALIPAC — proximité, confort, savoir-faire
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ===== PALETTE — Charte +2 Rénovation : noir + teal uniquement =====
       Le logo officiel n'utilise QUE deux couleurs :
       - Anthracite (#0F1A2A) pour le texte "RÉNOVATION" + le "+" + la maison
       - Teal (#1FB5A8) pour le "2", le soulignement et l'angle de toit
       Toute trace d'orange a été retirée pour un alignement strict à la DA. */

    /* Couleur d'accent unique = teal de marque */
    --accent: #1FB5A8;
    --accent-light: #4ECFC4;
    --accent-soft: #B0E8E2;
    --accent-pale: #E5F7F5;
    --accent-dark: #157F76;
    --accent-darker: #0D5A53;

    /* Aliases conservés pour rétro-compatibilité du code existant */
    --teal: #1FB5A8;
    --teal-light: #4ECFC4;
    --teal-soft: #B0E8E2;
    --teal-pale: #E5F7F5;
    --teal-dark: #157F76;
    --teal-darker: #0D5A53;

    /* Or signature — réservé EXCLUSIVEMENT à la médaille d'or régionale */
    --gold: #C9A227;
    --gold-light: #F4C95D;

    --ink: #0F1A2A;
    --ink-90: #1A2436;
    --ink-80: #2A3549;
    --ink-70: #3A465B;
    --ink-60: #586374;
    --ink-40: #8B94A3;
    --ink-20: #C7CDD6;
    --ink-10: #E5E8ED;
    --ink-05: #F1F3F6;

    --paper: #FAFAFA;
    --paper-alt: #F4F2EE;
    --paper-warm: #FBF8F3;

    --success: #16A34A;
    --warning: #F59E0B;
    --error: #DC2626;

    /* ===== TYPOGRAPHIE ===== */
    --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-utility: 'Space Grotesk', 'Inter', sans-serif;

    /* ===== LAYOUT ===== */
    --max-width: 1280px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 36px;
    --radius-full: 9999px;

    /* ===== TRANSITIONS ===== */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 200ms;
    --t: 400ms;
    --t-slow: 700ms;

    /* ===== OMBRES ===== */
    --shadow-xs: 0 1px 2px rgba(15, 26, 42, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 26, 42, 0.06);
    --shadow: 0 8px 24px -6px rgba(15, 26, 42, 0.08), 0 2px 6px -2px rgba(15, 26, 42, 0.04);
    --shadow-md: 0 12px 32px -8px rgba(15, 26, 42, 0.14), 0 4px 10px -4px rgba(15, 26, 42, 0.06);
    --shadow-lg: 0 24px 60px -12px rgba(15, 26, 42, 0.22), 0 8px 16px -4px rgba(15, 26, 42, 0.08);
    --shadow-xl: 0 40px 90px -20px rgba(15, 26, 42, 0.30);
    --shadow-accent: 0 12px 40px -10px rgba(31, 181, 168, 0.45);
    --shadow-teal: 0 12px 40px -10px rgba(31, 181, 168, 0.45);
    --glow-accent: 0 0 48px rgba(31, 181, 168, 0.35);
    --glow-teal: 0 0 48px rgba(31, 181, 168, 0.35);
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

html, body {
    /* overflow-x: clip > overflow-x: hidden — meilleur perf Safari + compatible sticky */
    overflow-x: clip;
}
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
em { font-style: italic; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    top: -999px; left: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.25rem;
    z-index: 999;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: all var(--t) var(--ease);
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn svg { transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-accent);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-teal);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-20);
}
.btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translateY(-1px);
}

.hero .btn-ghost {
    background: rgba(250, 250, 250, 0.1);
    color: var(--paper);
    border-color: rgba(250, 250, 250, 0.35);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hero .btn-ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.btn-large { padding: 1.05rem 1.85rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(250, 250, 250, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: all var(--t) var(--ease);
}
.header.scrolled {
    background: rgba(250, 250, 250, 0.96);
    border-bottom-color: var(--ink-10);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.85rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    text-decoration: none;
}
.brand-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 44px;
    transition: transform var(--t) var(--ease);
}
.brand-logo svg {
    height: 100%;
    width: auto;
    display: block;
}
.brand:hover .brand-logo { transform: scale(1.03); }

.brand-tagline {
    font-family: var(--font-utility);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-60);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(15, 26, 42, 0.12);
    max-width: 9rem;
}

@media (max-width: 1024px) {
    .brand-tagline { display: none; }
}
@media (max-width: 640px) {
    .brand-logo { height: 38px; }
}

/* ========== NAVIGATION PREMIUM — Pill liquide ========== */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    position: relative;
    padding: 0.3rem;
    border-radius: var(--radius-full);
    background: rgba(250, 250, 250, 0.55);
    border: 1px solid rgba(15, 26, 42, 0.06);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    isolation: isolate;
}

.nav-pill {
    position: absolute;
    top: 50%;
    left: var(--nav-pill-x, 0);
    width: var(--nav-pill-width, 0);
    height: calc(100% - 0.6rem);
    transform: translateY(-50%);
    background: linear-gradient(135deg, rgba(31, 181, 168, 0.14), rgba(31, 181, 168, 0.10));
    border: 1px solid rgba(31, 181, 168, 0.22);
    border-radius: var(--radius-full);
    box-shadow:
        0 8px 20px -8px rgba(31, 181, 168, 0.35),
        0 0 0 4px rgba(31, 181, 168, 0.04);
    opacity: var(--nav-pill-opacity, 0);
    transition:
        left 520ms cubic-bezier(0.34, 1.3, 0.64, 1),
        width 520ms cubic-bezier(0.34, 1.3, 0.64, 1),
        opacity 320ms var(--ease);
    pointer-events: none;
    z-index: 0;
}

.nav-link {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    min-width: 86px;
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-80);
    border-radius: var(--radius-full);
    transition:
        color 340ms var(--ease),
        transform 450ms var(--ease-spring);
    /* will-change retiré — promotion GPU déclenchée seulement au hover */
}

.nav-label {
    display: block;
    line-height: 1;
    transition: transform 380ms var(--ease-spring);
}

.nav-tag {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    white-space: nowrap;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark);
    transform: translate(-50%, 6px) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 360ms var(--ease),
        transform 440ms var(--ease-spring);
}

.nav-link:hover {
    color: var(--ink);
    transform: scale(1.06) translateY(-1px);
}
.nav-link:hover .nav-label {
    transform: translateY(-7px);
}
.nav-link:hover .nav-tag {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    color: var(--teal-dark);
}

.main-nav:hover {
    background: rgba(250, 250, 250, 0.78);
    border-color: rgba(31, 181, 168, 0.18);
}

.nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-full);
    background: var(--accent-pale);
    border: 1px solid rgba(31, 181, 168, 0.18);
    transition: all var(--t-fast) var(--ease);
}
.header-phone svg { color: var(--accent); }
.header-phone:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}
.header-phone:hover svg { color: #fff; }

.header-whatsapp {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.6);
    transition: all var(--t) var(--ease);
}
.header-whatsapp:hover {
    transform: translateY(-2px) rotate(-6deg);
    box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.75);
}

.burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--t-fast) var(--ease);
}
.burger span {
    position: absolute;
    left: 11px; right: 11px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all var(--t) var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }

body.nav-open .burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ink-10);
    z-index: 101;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    transition: width var(--t-fast) linear;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 80px;
    overflow: hidden;
    color: var(--paper);
    background:
        radial-gradient(ellipse at 20% 10%, rgba(31, 181, 168, 0.06), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(31, 181, 168, 0.05), transparent 55%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-90) 100%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: blobPulse 8s ease-in-out infinite;
    pointer-events: none;
}
.hero-blob-1 {
    top: -10%;
    right: -5%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(31, 181, 168, 0.55) 0%, transparent 70%);
}
.hero-blob-2 {
    bottom: -10%;
    left: -5%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(31, 181, 168, 0.45) 0%, transparent 70%);
    animation-delay: 1.5s;
}
@keyframes blobPulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.1); opacity: 0.75; }
}

.hero-bg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
}

/* ===== Carousel 3D rotatif ===== */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 21 / 9;
    max-height: 480px;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}
.hero-carousel-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}
.hero-card {
    position: absolute;
    width: clamp(110px, 12vw, 170px);
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6),
                0 8px 16px -8px rgba(0, 0, 0, 0.5);
    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0)
               rotateX(var(--perspective-y, 0deg))
               rotateY(var(--perspective-x, 0deg))
               rotateZ(var(--card-rotation, 0deg));
    transform-style: preserve-3d;
    transition: box-shadow 350ms var(--ease);
    cursor: pointer;
    will-change: transform;
}
.hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}
.hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%, transparent 100%);
    opacity: 0;
    transition: opacity 350ms var(--ease);
}
.hero-card:hover {
    z-index: 5;
    box-shadow: 0 40px 90px -20px rgba(31, 181, 168, 0.45),
                0 16px 32px -10px rgba(0, 0, 0, 0.65);
}
.hero-card:hover img { transform: scale(1.12); }
.hero-card:hover::after { opacity: 1; }

.hero-card-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 1;
    padding: 4px 8px;
    background: rgba(15, 26, 42, 0.85);
    color: #fff;
    font-family: var(--font-utility);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(4px);
    transition: all 300ms var(--ease);
}
.hero-card:hover .hero-card-tag {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .hero-carousel {
        max-height: 320px;
    }
}
@media (max-width: 600px) {
    .hero-carousel {
        max-height: 240px;
    }
    .hero-card {
        width: clamp(72px, 18vw, 110px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card {
        transition: none;
    }
}

/* ===== Contenu central ===== */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
}
.eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 181, 168, 0.25);
    animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(31, 181, 168, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(31, 181, 168, 0); }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6.5vw, 5.2rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--paper);
}
.hero-title-em {
    background: linear-gradient(120deg, var(--accent-light) 0%, var(--teal-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

.hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin-bottom: 2.5rem;
}
.hero-lead strong { color: #fff; font-weight: 600; }

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 0;
}

.hero-content .hero-eyebrow,
.hero-content .hero-title,
.hero-content .hero-lead {
    text-align: center;
}
.hero-content .hero-lead {
    margin-left: auto;
    margin-right: auto;
}

/* ===== Features 4 cartes ===== */
.hero-features {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}
@media (max-width: 900px) {
    .hero-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .hero-features { grid-template-columns: 1fr; }
}
.hero-feature {
    padding: 1.4rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all var(--t) var(--ease);
}
.hero-feature:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(31, 181, 168, 0.35);
    transform: translateY(-3px);
}
.hero-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-accent);
}
.hero-feature:nth-child(2) .hero-feature-icon {
    background: linear-gradient(135deg, #F4C95D 0%, #C99A3F 60%, #8C6B1F 100%);
    box-shadow: 0 8px 20px -8px rgba(212, 165, 71, 0.6);
}
.hero-feature:nth-child(3) .hero-feature-icon {
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    box-shadow: var(--shadow-teal);
}
.hero-feature:nth-child(4) .hero-feature-icon {
    background: linear-gradient(135deg, #6F86F5, #4156C9);
    box-shadow: 0 8px 20px -8px rgba(111, 134, 245, 0.5);
}
.hero-feature h3 {
    font-family: var(--font-utility);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.hero-feature p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
}

/* ===== Compatibilité ancien hero-trust (conservé pour autres pages) ===== */
.hero-trust {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.4rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-width: fit-content;
}
.trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.trust-item strong {
    font-family: var(--font-utility);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.trust-item span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
}
.trust-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color var(--t) var(--ease);
}
.hero-scroll:hover { color: #fff; }
.scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0; right: 0;
    height: 50%;
    background: var(--accent);
    animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
    to { top: 100%; }
}

/* ==========================================================================
   TRUST STRIP — Certifications
   ========================================================================== */

.trust-strip {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.trust-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(31, 181, 168, 0.07), transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(31, 181, 168, 0.06), transparent 55%);
    pointer-events: none;
}
.trust-strip > .container { position: relative; z-index: 1; }

.cert-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}
.cert-header .section-title {
    color: #fff;
    margin-top: 0.75rem;
}
.cert-header .section-title em {
    color: var(--accent-light);
}
.cert-lead {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.65;
}

/* === Carousel 3D certifications === */
.cert-carousel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 21 / 9;
    max-height: 460px;
    perspective: 1400px;
    perspective-origin: 50% 50%;
}
.cert-carousel-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.cert-card {
    position: absolute;
    width: clamp(140px, 14vw, 200px);
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    color: #fff;
    background: linear-gradient(155deg, var(--c-from, var(--accent)) 0%, var(--c-to, var(--accent-dark)) 100%);
    box-shadow:
        0 24px 60px -16px rgba(0, 0, 0, 0.55),
        0 8px 16px -8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0)
               rotateX(var(--perspective-y, 0deg))
               rotateY(var(--perspective-x, 0deg))
               rotateZ(var(--card-rotation, 0deg));
    transform-style: preserve-3d;
    transition: box-shadow 350ms var(--ease);
    cursor: pointer;
    will-change: transform;
    text-decoration: none;
}
.cert-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 50%, transparent 100%);
    opacity: 0;
    transition: opacity 350ms var(--ease);
    pointer-events: none;
}
.cert-card:hover,
.cert-card:focus-visible {
    z-index: 99 !important;
    box-shadow:
        0 40px 90px -20px var(--c-glow, rgba(31, 181, 168, 0.55)),
        0 16px 32px -10px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    outline: none;
}
.cert-card:hover::after,
.cert-card:focus-visible::after { opacity: 1; }

/* Tuile logo officiel — fond blanc pour préserver les couleurs de marque */
.cert-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(96px, 11vw, 124px);
    aspect-ratio: 12 / 7;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 6px 14px -6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: transform 320ms var(--ease);
}
.cert-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cert-card:hover .cert-logo,
.cert-card:focus-visible .cert-logo {
    transform: scale(1.05);
}

/* Compatibilité legacy : si .cert-mark reste utilisé ailleurs */
.cert-mark {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-utility);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.cert-card h3 {
    font-family: var(--font-utility);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0;
}
.cert-card p {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-sans);
    margin: 0;
}
@media (max-width: 768px) {
    .cert-card p { font-size: 0.85rem; }
    .cert-card h3 { font-size: 0.95rem; }
}

/* === Cartes certification — toutes alignées sur la DA brand ===
   Les logos officiels portent leurs propres couleurs (sur tuile blanche).
   Les fonds de carte adoptent la charte +2 Rénovation : anthracite + teal.
   Médaille d'Or = unique exception (or signature de la distinction). */

.cert-card-rge,
.cert-card-mpr,
.cert-card-afpa,
.cert-card-decennale {
    --c-from: #2A3549;
    --c-to: #0F1A2A;
    --c-glow: rgba(31, 181, 168, 0.50);
}

.cert-card-qp,
.cert-card-hager {
    --c-from: #1FB5A8;
    --c-to: #0F8C82;
    --c-glow: rgba(31, 181, 168, 0.65);
}

.cert-card-gold {
    --c-from: #F4C95D;
    --c-to: #8C6B1F;
    --c-glow: rgba(212, 165, 71, 0.65);
}
.cert-card-gold h3,
.cert-card-gold p {
    color: #2A1F00;
}
.cert-card-gold p { color: rgba(42, 31, 0, 0.78); }

.cert-cta-text {
    text-align: center;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    font-family: var(--font-utility);
}

@media (max-width: 900px) {
    .cert-carousel { max-height: 380px; }
}
@media (max-width: 600px) {
    .cert-carousel { max-height: 300px; aspect-ratio: 5 / 4; }
    .cert-card {
        width: clamp(110px, 24vw, 150px);
    }
    .cert-card h3 { font-size: 0.92rem; }
    .cert-card p { font-size: 0.78rem; line-height: 1.4; }
    .cert-mark { width: 44px; height: 44px; font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cert-card { transition: none; }
}

/* ==========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================== */

.section {
    padding: clamp(4rem, 10vw, 7rem) 0;
    position: relative;
}
.section-soft { background: var(--paper-alt); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark .section-title { color: var(--paper); }
.section-dark .section-lead { color: rgba(255, 255, 255, 0.72); }

.section-header {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--font-utility);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* WCAG AA : --accent (#1FB5A8) sur fond clair = ratio 2.2:1 (échec).
       --accent-dark (#157F76) sur paper = ratio 4.6:1 (passe). */
    color: var(--accent-dark);
    margin-bottom: 1rem;
}
.eyebrow-light { color: var(--accent-light); }
.section-dark .section-eyebrow { color: var(--accent-light); }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    color: var(--ink);
}
.section-title em {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}
.section-dark .section-title em { color: var(--accent-light); }

.section-lead {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.7;
    color: var(--ink-60);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.service-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ink-10);
    transition: all var(--t) var(--ease);
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(31, 181, 168, 0.25);
    box-shadow: var(--shadow-lg);
}

.service-card-featured {
    background: linear-gradient(135deg, var(--accent-pale) 0%, #fff 100%);
    border-color: var(--accent);
    box-shadow: var(--shadow-accent);
}
.service-card-featured:hover {
    box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.service-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.service-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 26, 42, 0.4) 100%);
}
.service-card:hover .service-image {
    transform: none;
}

.service-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 1;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-dark);
    border-radius: var(--radius-full);
    font-family: var(--font-utility);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.service-body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.85rem;
}
.service-body h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.service-body p {
    color: var(--ink-60);
    font-size: 0.95rem;
    line-height: 1.6;
}
.service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.service-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.88rem;
    color: var(--ink-80);
}
.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--teal));
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.85rem;
    color: var(--accent-dark);
    font-weight: 600;
    font-size: 0.92rem;
    transition: gap var(--t) var(--ease);
}
.service-link:hover {
    gap: 0.7rem;
    color: var(--accent);
}

.services-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    text-align: center;
}
.services-cta p {
    color: var(--ink-60);
    font-size: 1rem;
}

/* ==========================================================================
   RÉALISATIONS — Grille 3×3 expanding (DynamicFrameLayout adapté)
   La frame survolée passe à 6fr, les voisines à 3fr — transition smooth.
   ========================================================================== */

.frame-grid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: var(--col-sizes, 1fr 1fr 1fr 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    max-height: 540px;
    transition: grid-template-columns 0.4s var(--ease);
    contain: layout paint;
}

.frame-cell {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    background: var(--ink-90);
    box-shadow:
        0 8px 24px -8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.4s var(--ease);
    margin: 0;
}
.frame-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 35%, rgba(15, 26, 42, 0.92) 100%);
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}
.frame-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}
.frame-cell:hover,
.frame-cell:focus-visible {
    z-index: 9;
    box-shadow:
        0 30px 70px -16px rgba(31, 181, 168, 0.45),
        0 12px 24px -8px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    outline: none;
}
.frame-cell:hover::after,
.frame-cell:focus-visible::after { opacity: 1; }

.frame-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
    filter: brightness(0.92) saturate(0.95);
}
.frame-cell:hover .frame-media,
.frame-cell:focus-visible .frame-media {
    transform: scale(1.06);
    filter: brightness(1.05) saturate(1.1);
}

.frame-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 1rem 1.1rem 1rem;
    color: #fff;
    transform: translateY(8px);
    opacity: 0.85;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.frame-cell:hover .frame-overlay,
.frame-cell:focus-visible .frame-overlay {
    transform: translateY(0);
    opacity: 1;
}
.frame-loc {
    display: inline-block;
    font-family: var(--font-utility);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.3rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.frame-overlay h3 {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.3rem);
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}
.frame-meta {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.2rem;
    line-height: 1.4;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s var(--ease) 0.05s, max-height 0.35s var(--ease);
}
.frame-cell:hover .frame-meta,
.frame-cell:focus-visible .frame-meta {
    opacity: 1;
    max-height: 60px;
}

.frame-grid-hint {
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    font-family: var(--font-utility);
}

/* ==========================================================================
   FRAME-CELL — mode COMPARE (avant/après slider)
   ========================================================================== */
.frame-compare {
    position: absolute;
    inset: 0;
    overflow: hidden;
    --split: 50%;
}
.frame-compare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
    filter: brightness(0.92) saturate(0.95);
}
.frame-cell:hover .frame-compare img,
.frame-cell:focus-visible .frame-compare img {
    transform: scale(1.04);
    filter: brightness(1.02) saturate(1.05);
}
.frame-compare-after {
    z-index: 1;
}
.frame-compare-before-wrap {
    position: absolute;
    inset: 0;
    width: var(--split);
    overflow: hidden;
    z-index: 2;
    transition: width 0.6s var(--ease);
    will-change: width;
}
.frame-compare-before-wrap .frame-compare-before {
    width: calc(100% / var(--split-pct, 0.5));
    min-width: 100%;
}
/* Volet avant toujours présent à 50% par défaut (slider classique) */
.frame-cell--compare .frame-compare-before-wrap {
    width: var(--split);
}

/* Barre verticale + poignée — toujours visible, plus appuyée au hover */
.frame-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    z-index: 3;
    pointer-events: none;
    transform: translateX(-50%);
    transition: box-shadow 0.3s var(--ease);
}
.frame-cell--compare:hover .frame-compare-divider,
.frame-cell--compare:focus-visible .frame-compare-divider {
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.7);
}
.frame-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.96);
    pointer-events: none;
    transition: transform 0.3s var(--ease);
    animation: comparePulse 2.4s ease-in-out infinite;
}
.frame-cell--compare:hover .frame-compare-handle,
.frame-cell--compare:focus-visible .frame-compare-handle {
    animation: none;
    transform: translate(-50%, -50%) scale(1.12);
}
@keyframes comparePulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.96), 0 0 0 0 rgba(31,181,168,0.6); }
    50% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.96), 0 0 0 12px rgba(31,181,168,0); }
}

/* Tags Avant / Après — toujours visibles, en gras au hover */
.frame-compare-tag {
    position: absolute;
    top: 12px;
    z-index: 3;
    padding: 0.36rem 0.7rem;
    background: rgba(15, 26, 42, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-utility);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s var(--ease);
}
.frame-compare-tag-before { left: 12px; }
.frame-compare-tag-after { right: 12px; background: var(--accent); }
.frame-cell--compare:hover .frame-compare-tag,
.frame-cell--compare:focus-visible .frame-compare-tag {
    transform: scale(1.05);
}

/* ==========================================================================
   FRAME-CELL — mode CAROUSEL (3 photos)
   ========================================================================== */
.frame-carousel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.frame-carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.4s var(--ease);
    filter: brightness(0.92) saturate(0.95);
    pointer-events: none;
    transform: scale(1.02);
}
.frame-carousel-img.is-active {
    opacity: 1;
    transform: scale(1);
}
.frame-cell:hover .frame-carousel-img.is-active,
.frame-cell:focus-visible .frame-carousel-img.is-active {
    transform: scale(1.06);
    filter: brightness(1.05) saturate(1.1);
}
.frame-carousel-dots {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    display: flex;
    gap: 5px;
    padding: 5px 8px;
    background: rgba(15, 26, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.frame-cell:hover .frame-carousel-dots,
.frame-cell:focus-visible .frame-carousel-dots {
    opacity: 1;
}
.frame-carousel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.frame-carousel-dot.is-active {
    background: var(--accent);
    width: 16px;
    border-radius: 3px;
}

@media (max-width: 700px) {
    .frame-cell--compare .frame-compare-before-wrap { width: var(--split, 50%); }
    .frame-cell--compare .frame-compare-divider { opacity: 1; }
    .frame-cell--compare .frame-compare-tag { opacity: 1; transform: none; }
    .frame-carousel-dots { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .frame-compare-before-wrap, .frame-carousel-img { transition: none; }
}

/* Tablette : 1 colonne avec 3 cellules empilées */
@media (max-width: 900px) {
    .frame-grid {
        grid-template-rows: repeat(3, minmax(280px, 1fr));
        grid-template-columns: 1fr;
        aspect-ratio: auto;
        max-height: none;
        transition: none;
    }
    .frame-cell:hover { z-index: 1; }
    .frame-meta { opacity: 1; max-height: 60px; }
    .frame-overlay { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .frame-grid { transition: none; }
    .frame-cell, .frame-media, .frame-overlay, .frame-meta { transition: none; }
}

/* ==========================================================================
   RÉALISATIONS — Carousel 3D legacy (conservé, désactivé via JS)
   ========================================================================== */

.realisations-carousel {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
    aspect-ratio: 21 / 9;
    max-height: 520px;
    perspective: 1400px;
    perspective-origin: 50% 50%;
}
.realisations-carousel-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.realisation-card {
    position: absolute;
    width: clamp(160px, 16vw, 240px);
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    background: var(--ink-90);
    box-shadow:
        0 28px 70px -18px rgba(0, 0, 0, 0.7),
        0 10px 20px -8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0)
               rotateX(var(--perspective-y, 0deg))
               rotateY(var(--perspective-x, 0deg))
               rotateZ(var(--card-rotation, 0deg));
    transform-style: preserve-3d;
    transition: box-shadow 350ms var(--ease);
    cursor: pointer;
    will-change: transform;
}
.realisation-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}
.realisation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 26, 42, 0.92) 100%);
    pointer-events: none;
}
.realisation-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%, transparent 100%);
    opacity: 0;
    transition: opacity 350ms var(--ease);
    pointer-events: none;
}
.realisation-card:hover,
.realisation-card:focus-visible {
    z-index: 99 !important;
    box-shadow:
        0 50px 110px -25px rgba(31, 181, 168, 0.55),
        0 20px 40px -12px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    outline: none;
}
.realisation-card:hover img,
.realisation-card:focus-visible img { transform: scale(1.12); }
.realisation-card:hover::after,
.realisation-card:focus-visible::after { opacity: 1; }

.realisation-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 1rem 0.85rem 0.95rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.realisation-loc {
    display: inline-block;
    font-family: var(--font-utility);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.35rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.realisation-overlay h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}
.realisation-meta {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.15rem;
    line-height: 1.4;
}

.realisations-cta-text {
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    font-family: var(--font-utility);
}

@media (max-width: 900px) {
    .realisations-carousel { max-height: 400px; }
}
@media (max-width: 600px) {
    .realisations-carousel { max-height: 320px; aspect-ratio: 5 / 4; }
    .realisation-card { width: clamp(120px, 26vw, 170px); }
    .realisation-overlay h3 { font-size: 0.92rem; }
    .realisation-meta { font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .realisation-card { transition: none; }
}

/* ==========================================================================
   GALERIE RÉALISATIONS — version grille (legacy, conservée si besoin)
   ========================================================================== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: 240px;
    gap: 1rem;
    margin-bottom: 3rem;
}
.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    transition: all var(--t) var(--ease);
    background: var(--ink-90);
}
.gallery-item[data-size="large"] { grid-column: span 2; }
.gallery-item[data-size="tall"] { grid-row: span 2; }

@media (max-width: 700px) {
    .gallery-item[data-size="large"],
    .gallery-item[data-size="tall"] { grid-column: auto; grid-row: auto; }
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease);
}
.gallery-item:hover { transform: translateY(-3px); }
.gallery-item:hover img { transform: scale(1.07); }

.gallery-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1rem 1rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 26, 42, 0.85) 100%);
}
.gallery-loc {
    display: block;
    font-family: var(--font-utility);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.2rem;
}

/* ==========================================================================
   FONDATEUR / À PROPOS
   ========================================================================== */

.founder-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 900px) {
    .founder-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.founder-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
}
.founder-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.founder-badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.founder-badge strong {
    font-family: var(--font-utility);
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 700;
}
.founder-badge span {
    font-size: 0.78rem;
    color: var(--ink-60);
}

.founder-content .section-eyebrow,
.founder-content .section-title { text-align: left; }
.founder-content .section-title { margin-bottom: 1.25rem; }
.founder-lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink-70);
    font-style: italic;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    margin-bottom: 1rem;
}
.founder-signature {
    font-size: 0.92rem;
    color: var(--ink-60);
    font-family: var(--font-utility);
    margin-bottom: 2rem;
    padding-left: 1.25rem;
}
.founder-signature strong {
    color: var(--ink);
    font-weight: 700;
}

.founder-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.founder-pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--ink-10);
}
.founder-pillar strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    grid-row: span 2;
}
.founder-pillar h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.25rem;
}
.founder-pillar p {
    font-size: 0.9rem;
    color: var(--ink-60);
    line-height: 1.55;
}

/* ==========================================================================
   PROCESSUS
   ========================================================================== */

.process-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    counter-reset: step;
}
.process-step {
    position: relative;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--ink-10);
    transition: all var(--t) var(--ease);
}
.process-step:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: var(--shadow-md);
}
.step-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}
.process-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}
.process-step p {
    font-size: 0.88rem;
    color: var(--ink-60);
    line-height: 1.55;
}

/* ==========================================================================
   ZONE D'INTERVENTION
   ========================================================================== */

.zone-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 900px) {
    .zone-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.zone-content .section-eyebrow,
.zone-content .section-title { text-align: left; }
.zone-content .section-title { margin-bottom: 1rem; }

.zone-departments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 2rem 0;
}
.dept {
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--ink-10);
    transition: all var(--t-fast) var(--ease);
}
.dept:hover {
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.dept strong {
    display: block;
    font-family: var(--font-utility);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.dept span {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-60);
    margin-top: 0.15rem;
}

.zone-map {
    position: relative;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 480px;
    background: #0F1A2A;
    border-radius: 50%;
    box-shadow: 0 20px 60px rgba(15, 26, 42, 0.25), 0 0 0 1px rgba(15, 26, 42, 0.06);
    overflow: hidden;
    isolation: isolate;
}
.map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
    filter: saturate(0.9) contrast(1.02);
}
.map-frame.is-active .map-iframe {
    opacity: 1;
    pointer-events: auto;
}
.map-pins-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.map-frame.is-active .map-pins-overlay {
    opacity: 1;
}

/* État statique aesthetic (avant clic) */
.map-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 4;
    overflow: hidden;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.map-preview-svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.6s var(--ease);
}
.map-preview:hover .map-preview-svg {
    transform: scale(1.02);
}
.map-preview .map-cta-group {
    transition: transform 0.3s var(--ease);
    transform-origin: 200px 358px;
}
.map-preview:hover .map-cta-group {
    transform: scale(1.06);
}
.map-frame.is-active .map-preview {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}
.map-preview:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
    border-radius: 50%;
}
.map-pin-center circle:last-child {
    transform-origin: 200px 200px;
    animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}
.map-pins circle {
    transform-origin: center;
    animation: floatPin 3.5s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.map-pins circle:nth-child(2n) { animation-delay: 0.7s; }
.map-pins circle:nth-child(3n) { animation-delay: 1.4s; }
@keyframes floatPin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.map-pins-overlay text {
    paint-order: stroke;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 3;
    stroke-linejoin: round;
}
/* Boutons sous le cadre */
.map-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    max-width: 480px;
}
.map-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-utility);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(31, 181, 168, 0.32);
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.map-cta-btn:hover {
    transform: translateY(-2px);
    background: var(--accent-dark);
    box-shadow: 0 12px 32px rgba(31, 181, 168, 0.45);
}
.map-cta-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
.map-google-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.78rem 1.25rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--ink-15);
    border-radius: 999px;
    font-family: var(--font-utility);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.map-google-link:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.map-google-link svg:first-child {
    flex: 0 0 auto;
}
.map-google-link svg:last-child {
    flex: 0 0 auto;
    color: var(--ink-60);
}

/* Une fois la carte activée : la CTA disparaît, seul Google Maps reste */
.zone-map.is-active .map-cta-btn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    width: 0;
    padding: 0;
    margin: 0 -0.375rem;
    overflow: hidden;
}

/* ==========================================================================
   AVIS
   ========================================================================== */

.reviews-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.4rem;
    background: #fff;
    border-radius: var(--radius-full);
    border: 1px solid var(--ink-10);
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all var(--t) var(--ease);
    cursor: pointer;
}
.reviews-rating:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.google-mark {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    flex-shrink: 0;
}
.google-mark svg { width: 100%; height: 100%; }
.stars {
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}
.rating-value {
    font-family: var(--font-utility);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.1rem;
}
.rating-source {
    font-size: 0.82rem;
    color: var(--ink-60);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
}

.review-card {
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all var(--t) var(--ease);
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}
.review-featured {
    background: linear-gradient(135deg, var(--accent-pale) 0%, #fff 60%);
    border-color: rgba(31, 181, 168, 0.35);
}

.review-header {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.review-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--font-utility);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.review-header strong {
    display: block;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 700;
}
.review-header span {
    display: block;
    font-size: 0.78rem;
    color: var(--ink-60);
    margin-top: 0.1rem;
}
.review-stars {
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 0.08em;
}
.review-card blockquote {
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--ink-80);
    font-style: italic;
}
.review-meta {
    font-size: 0.78rem;
    color: var(--ink-40);
    letter-spacing: 0.04em;
    margin-top: auto;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--t) var(--ease);
}
.faq-item[open] {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    transition: color var(--t-fast) var(--ease);
    list-style: none;
    position: relative;
    padding-right: 3.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-pale);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform var(--t) var(--ease);
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: var(--accent);
    color: #fff;
}
.faq-item summary:hover { color: var(--accent-dark); }
.faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--ink-60);
    line-height: 1.65;
    font-size: 0.95rem;
}
.faq-answer p { margin-bottom: 0.5rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}

.contact-content .section-eyebrow,
.contact-content .section-title { text-align: left; }

.contact-channels {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
}
.contact-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    transition: all var(--t) var(--ease);
}
.contact-channel:not(.contact-channel-static):hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(31, 181, 168, 0.4);
    transform: translateX(4px);
}
.channel-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--shadow-accent);
}
/* fix centrage : .contact-channel span{display:block} écrasait le grid → SVG collé en haut */
.contact-channel .channel-icon { display: grid; place-items: center; color: #fff; }
.channel-icon-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.5);
}
.channel-icon-google {
    background: #fff;
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.channel-icon-google svg { width: 100%; height: 100%; }
.contact-channel strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}
.contact-channel span {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-top: 0.1rem;
}

.contact-form {
    background: #fff;
    color: var(--ink);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
}
.form-subtitle {
    color: var(--ink-60);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.form-field span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-80);
    letter-spacing: 0.01em;
}
.form-field span em {
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--ink-10);
    border-radius: var(--radius-sm);
    background: var(--paper);
    /* iOS Safari : font-size doit être >= 16px sinon zoom auto au focus */
    font-size: 16px;
    color: var(--ink);
    transition: all var(--t-fast) var(--ease);
    width: 100%;
    font-family: inherit;
    min-height: 44px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(31, 181, 168, 0.12);
}
.form-field textarea { resize: vertical; min-height: 100px; }

.form-consent {
    margin-top: 0.5rem;
}
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
}
.checkbox input {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.checkbox span {
    font-size: 0.85rem;
    color: var(--ink-60);
    line-height: 1.4;
}

.form-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--ink-40);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* ==========================================================================
   FOLLOW STRIP — Réseaux sociaux
   ========================================================================== */

.follow-strip {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: linear-gradient(135deg, var(--paper-alt) 0%, #fff 100%);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
}
.follow-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 900px) {
    .follow-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.follow-intro .section-eyebrow { text-align: left; }
.follow-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0.75rem 0 1rem;
}
.follow-title em {
    color: var(--accent);
    font-style: italic;
}
.follow-intro p {
    color: var(--ink-60);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 380px;
}

.follow-cards {
    display: grid;
    gap: 0.85rem;
}

.follow-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.15rem 1.4rem;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--radius);
    transition: all var(--t) var(--ease);
    overflow: hidden;
    color: var(--ink);
}
.follow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--card-gradient, linear-gradient(135deg, var(--accent), var(--accent-dark)));
    opacity: 0;
    transition: opacity var(--t) var(--ease);
    z-index: 0;
}
.follow-card > * {
    position: relative;
    z-index: 1;
}
.follow-card:hover {
    transform: translateX(6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    color: #fff;
}
.follow-card:hover::before { opacity: 1; }
.follow-card:hover .follow-card-text span { color: rgba(255, 255, 255, 0.9); }
.follow-card:hover .follow-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.follow-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--icon-bg, var(--accent-pale));
    color: var(--icon-color, var(--accent));
    transition: all var(--t) var(--ease);
    flex-shrink: 0;
}
.follow-card-text strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: inherit;
    letter-spacing: -0.01em;
}
.follow-card-text span {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-60);
    margin-top: 0.15rem;
    font-family: var(--font-utility);
    transition: color var(--t) var(--ease);
}
.follow-arrow {
    color: var(--ink-40);
    transition: all var(--t) var(--ease);
    flex-shrink: 0;
}
.follow-card:hover .follow-arrow {
    color: #fff;
    transform: translate(2px, -2px);
}

/* === Couleurs natives par plateforme === */
.follow-card-facebook {
    --card-gradient: linear-gradient(135deg, #1877F2 0%, #0E5BC9 100%);
    --icon-bg: #E7F0FE;
    --icon-color: #1877F2;
}
.follow-card-instagram {
    --card-gradient: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    --icon-bg: #FCE5EE;
    --icon-color: #DD2A7B;
}
.follow-card-youtube {
    --card-gradient: linear-gradient(135deg, #FF0000 0%, #C4302B 100%);
    --icon-bg: #FFE6E6;
    --icon-color: #FF0000;
}

@media (max-width: 600px) {
    .follow-card { padding: 1rem 1.1rem; gap: 0.85rem; }
    .follow-icon { width: 48px; height: 48px; border-radius: 12px; }
    .follow-icon svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   SECTION STACKING — Cartes "empilées" en flow naturel
   Chaque section a son propre fond, son top arrondi et une ombre supérieure
   discrète : visuellement on garde l'effet "tiroir" qui glisse par-dessus la
   précédente, sans piéger le scroll dans un sticky 100vh (qui tronquait les
   sections plus hautes que le viewport et créait du vide sur les sections plus
   courtes). Le scroll redevient fluide et toutes les cartes sont visibles.
   ========================================================================== */

main#main {
    position: relative;
    z-index: 0;
    /* Léger overlap entre sections : la nouvelle section "monte" de 24px
       par-dessus la précédente grâce au border-radius + box-shadow. */
    isolation: isolate;
}

/* Sections directes du main : flow naturel + décor d'empilement */
main#main > section {
    position: relative;
    width: 100%;
    background-color: var(--paper);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    box-shadow: 0 -14px 32px -14px rgba(15, 26, 42, 0.18);
    /* Léger overlap pour que le coin arrondi vienne "mordre" sur la précédente */
    margin-top: -24px;
}

/* Hero en première position : pas d'overlap ni de radius */
main#main > .hero {
    margin-top: 0;
    background-color: var(--ink);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

/* Trust-strip : bandeau compact entre hero et services */
main#main > .trust-strip {
    background-color: var(--ink);
    border-radius: 0 0 32px 32px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 24px 48px -20px rgba(15, 26, 42, 0.30);
    margin-top: 0;
    overflow: hidden;
    padding-block: clamp(2rem, 5vw, 3.5rem);
    z-index: 2;
}
/* La section juste après la trust-strip retrouve son arrondi haut */
main#main > .trust-strip + section {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

/* Z-index croissant — section N+1 passe visuellement par-dessus N */
main#main > .hero { z-index: 1; }
main#main > .trust-strip { z-index: 2; }
main#main > #services { z-index: 3; }
main#main > #fondateur { z-index: 4; }
main#main > #realisations { z-index: 5; overflow: hidden; }
main#main > #processus { z-index: 6; }
main#main > #zone { z-index: 7; }
main#main > #avis { z-index: 8; }
main#main > .faq { z-index: 9; }
main#main > #contact { z-index: 10; }

/* Sections thématiques : fond opaque maintenu */
main#main > .section-dark {
    background-color: var(--ink);
}
main#main > .section-soft {
    background-color: var(--paper-alt);
}

/* Follow-strip + footer en flow normal avec même empilement décoratif */
.follow-strip {
    position: relative;
    z-index: 11;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    box-shadow: 0 -14px 32px -14px rgba(15, 26, 42, 0.22);
    margin-top: -24px;
}
.cinematic-footer-wrapper {
    z-index: 12;
    margin-top: -24px;
}

/* Mobile : on retire l'overlap et les rayons trop appuyés pour rester sobre */
@media (max-width: 768px) {
    main#main > section,
    main#main > .trust-strip + section,
    .follow-strip,
    .cinematic-footer-wrapper {
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
    main#main > .trust-strip {
        border-radius: 0;
    }
}

/* === Désactiver backdrop-filter sur mobile (perf GPU) ===
   blur(20px) sur header fixed permanent + 12 autres usages = coût lourd
   sur téléphones bas/milieu de gamme. On garde l'opacité du fond. */
@media (max-width: 768px) {
    .header,
    .header.scrolled,
    .main-nav,
    .hero-eyebrow,
    .hero-trust,
    .footer-marquee,
    .footer-pill,
    .footer-glass-pill,
    .footer-social-pill,
    .footer-totop,
    .lightbox,
    .gallery-item figcaption,
    .service-tag,
    .reviews-rating,
    .footer-craft,
    .hero-feature,
    .footer-aurora {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .header { background: rgba(250, 250, 250, 0.96); }
    .main-nav { background: rgba(250, 250, 250, 0.92); }
}

/* ==========================================================================
   FOOTER CINEMATIC — Curtain reveal + parallax + magnetic + glass pills
   ========================================================================== */

.cinematic-footer-wrapper {
    position: relative;
    width: 100%;
    /* iOS Safari : 100vh inclut la barre URL → saute. dvh suit le viewport réel. */
    height: 100vh;
    height: 100dvh;
    min-height: 720px;
    /* clip-path crée le containing block pour position:fixed enfant —
       isolation paint pour éviter conflits avec sticky d'au-dessus. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background: var(--ink);
    contain: layout paint;
}

.cinematic-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(31, 181, 168, 0.08), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(31, 181, 168, 0.07), transparent 55%),
        linear-gradient(180deg, var(--ink) 0%, #060A12 100%);
    color: var(--paper);
    overflow: hidden;
    z-index: 1;
    /* contain: strict cassait position:fixed enfants sur Safari → layout paint suffit */
    contain: layout paint;
}

/* === Aurora glow animée === */
.footer-aurora {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 60vh;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(31, 181, 168, 0.18) 0%,
        rgba(31, 181, 168, 0.14) 40%,
        transparent 70%);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: footer-breathe 8s ease-in-out infinite alternate;
}
@keyframes footer-breathe {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* === Grid background masqué === */
.footer-bg-grid {
    position: absolute;
    inset: 0;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    pointer-events: none;
    z-index: 0;
}

/* === Giant background text — parallax === */
.footer-giant-text {
    position: absolute;
    bottom: -3vh;
    left: 50%;
    transform: translateX(-50%) translateY(60px) scale(0.85);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-family: var(--font-utility);
    font-size: clamp(80px, 18vw, 280px);
    line-height: 0.85;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transition: none;
    will-change: transform, opacity;
}

/* === Marquee diagonal === */
.footer-marquee {
    position: absolute;
    top: 9rem;
    left: -5%;
    width: 110%;
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 26, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.85rem 0;
    z-index: 2;
    transform: rotate(-2deg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.footer-marquee-track {
    display: flex;
    width: max-content;
    animation: footer-marquee 40s linear infinite;
    font-family: var(--font-utility);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.footer-marquee-item {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding-inline: 1.5rem;
    white-space: nowrap;
}
.marquee-dot {
    color: var(--accent);
}
.footer-marquee-item span:nth-child(4n + 3) + .marquee-dot {
    color: var(--teal);
}
@keyframes footer-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* === Centre : H2 + CTAs === */
.footer-center {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 6rem 1.5rem 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.15));
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.footer-headline.visible {
    opacity: 1;
    transform: translateY(0);
}
.footer-headline em {
    font-style: italic;
    background: linear-gradient(120deg, var(--accent-light), var(--teal-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-pills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
}
.footer-pills-row[id="footerPillsRow"] { margin-bottom: 0.5rem; }
.footer-pills-secondary { gap: 0.6rem; }

/* === Glass pill (générique) === */
.footer-pill,
.footer-glass-pill,
.footer-social-pill,
.footer-totop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-utility);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    will-change: transform;
}

.footer-pill:hover,
.footer-glass-pill:hover,
.footer-social-pill:hover,
.footer-totop:hover {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.footer-pill-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 1.05rem 1.85rem;
    font-size: 1rem;
    font-weight: 700;
    box-shadow:
        0 14px 36px -10px rgba(31, 181, 168, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.footer-pill-primary:hover {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow:
        0 22px 48px -12px rgba(31, 181, 168, 0.65),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.footer-pill-primary:nth-child(2) {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    box-shadow:
        0 14px 36px -10px rgba(31, 181, 168, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.footer-pill-primary:nth-child(2):hover {
    background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 100%);
    box-shadow:
        0 22px 48px -12px rgba(31, 181, 168, 0.65),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.footer-pills-secondary .footer-pill {
    padding: 0.6rem 1.1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Réseaux sociaux */
.footer-social-row {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}
.footer-social-pill {
    width: 48px; height: 48px;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* Bottom bar */
.footer-bottom-bar {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-legal-info {
    flex: 1;
    min-width: 280px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    letter-spacing: 0.01em;
    text-align: left;
}
.footer-legal-info abbr {
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    cursor: help;
}
.footer-legal-links {
    display: inline-flex;
    gap: 0.6rem;
    margin-top: 0.3rem;
    margin-left: 0.4rem;
}
.footer-legal-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    transition: color var(--t-fast) var(--ease);
}
.footer-legal-links a:hover { color: var(--accent-light); }

.footer-craft {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.2rem !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    cursor: default;
}
.footer-craft strong {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-left: 0.25rem;
}
.footer-heart {
    display: inline-block;
    color: #FF4757;
    font-size: 0.95rem;
    animation: footer-heartbeat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    filter: drop-shadow(0 0 4px rgba(255, 71, 87, 0.6));
}
@keyframes footer-heartbeat {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 71, 87, 0.5)); }
    15%, 45% { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(255, 71, 87, 0.85)); }
    30% { transform: scale(1); }
}

.footer-totop {
    width: 48px; height: 48px;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
.footer-totop svg { transition: transform 350ms var(--ease); }
.footer-totop:hover svg { transform: translateY(-3px); }

/* Responsive */
@media (max-width: 700px) {
    .footer-marquee { top: 7.5rem; padding: 0.65rem 0; }
    .footer-marquee-track { font-size: 0.66rem; letter-spacing: 0.22em; }
    .footer-headline { margin-bottom: 1rem; }
    .footer-center { padding-top: 8rem; }
    .footer-bottom-bar { flex-direction: column; gap: 1rem; align-items: center; }
    .footer-legal-info { text-align: center; }
    .footer-legal-links { display: flex; justify-content: center; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-aurora { animation: none; }
    .footer-marquee-track { animation: none; }
    .footer-heart { animation: none; }
    .footer-headline { transition: none; opacity: 1; transform: none; }
    .footer-giant-text { opacity: 0.5; transform: translateX(-50%); }
}

/* ==========================================================================
   FAB FLOTTANT
   ========================================================================== */

.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.4rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-lg), var(--shadow-accent);
    transition: all var(--t) var(--ease);
    transform: translateY(120%);
}
.fab.visible { transform: translateY(0); }
.fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--shadow-xl), var(--glow-accent);
}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 800ms var(--ease) var(--delay, 0ms),
                transform 800ms var(--ease) var(--delay, 0ms);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 1100px) {
    .main-nav { display: none; }
}

@media (max-width: 768px) {
    .header-phone span { display: none; }
    .header-phone { padding: 0.55rem; width: 40px; height: 40px; justify-content: center; }
    .burger { display: block; }
    body.nav-open { overflow: hidden; }
    body.nav-open .main-nav {
        display: flex;
        position: fixed;
        top: 80px; left: 1rem; right: 1rem;
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        border-radius: var(--radius);
        background: rgba(250, 250, 250, 0.98);
        box-shadow: var(--shadow-xl);
        gap: 0.5rem;
    }
    body.nav-open .nav-link {
        min-width: 0;
        text-align: center;
    }
    .nav-pill { display: none; }

    .hero-trust { gap: 0.85rem; padding: 1.1rem 1.25rem; }
    .trust-item strong { font-size: 1.1rem; }

    .footer-bottom { flex-direction: column; text-align: center; }

    .fab span { display: none; }
    .fab { padding: 1rem; border-radius: 50%; }
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS — typography, tap targets, spacing, perf
   Cible WCAG 2.5.5 Target Size (44×44 min) + lisibilité body ≥ 14px.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- Tap targets ≥ 44×44 (WCAG AAA) ---- */
    .header-phone,
    .header-whatsapp {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .burger {
        width: 44px;
        height: 44px;
    }
    .burger span:nth-child(1) { top: 15px; }
    .burger span:nth-child(2) { top: 21px; }
    .burger span:nth-child(3) { top: 27px; }
    body.nav-open .burger span:nth-child(1),
    body.nav-open .burger span:nth-child(3) { top: 21px; }

    .service-link,
    .footer-pill,
    .nav-link,
    .contact-channel,
    .follow-card {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .service-link { padding-block: 0.75rem; }

    /* ---- Lisibilité : remonter les textes < 12px ---- */
    .service-list li,
    .service-tag,
    .footer-craft,
    .nav-tag,
    .brand-tagline,
    .map-legend,
    .founder-badge span {
        font-size: 0.85rem;        /* ≈ 13.6px — lisible sans zoom */
        line-height: 1.45;
    }
    .service-list li {
        padding: 0.4rem 0;
    }

    /* ---- Réduire le padding vertical des sections sur mobile ---- */
    .section {
        padding: clamp(2.5rem, 8vw, 4rem) 0;
    }

    /* ---- Hero : compactification ---- */
    .hero {
        min-height: auto;
        padding-block: clamp(2rem, 8vw, 3rem) clamp(2.5rem, 10vw, 4rem);
    }
    .hero-carousel {
        /* Carousel 3D reste visible mais mieux dimensionné */
        height: clamp(180px, 38vw, 240px) !important;
        margin-block: 1rem;
    }
    .hero-card {
        width: clamp(110px, 28vw, 160px);
        height: clamp(140px, 36vw, 200px);
    }
    .hero-title {
        font-size: clamp(2rem, 8.5vw, 2.75rem);
        line-height: 1.05;
    }
    .hero-lead {
        font-size: clamp(0.95rem, 3.8vw, 1.05rem);
        line-height: 1.55;
    }

    /* ---- Container : marges latérales un peu réduites ---- */
    .container {
        padding-inline: 1.1rem;
    }

    /* ---- Section header : centrage + tailles adaptées ---- */
    .section-header {
        margin-bottom: 2rem;
        padding-inline: 0.25rem;
    }
    .section-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.1;
    }
    .section-lead {
        font-size: clamp(0.95rem, 3.8vw, 1.05rem);
        line-height: 1.55;
    }
    .section-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
    }

    /* ---- Cartes services : ombres + scale-up legèrement plus visibles ---- */
    .service-card { border-radius: 18px; }
    .service-card .service-body { padding: 1.25rem; }
    .service-card h3 {
        font-size: 1.15rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }
    .service-card .service-body > p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* ---- Galerie réalisations : grille 2 colonnes au lieu de 1 sur > 480px ---- */
    .frame-grid {
        gap: 0.75rem !important;
    }

    /* ---- Footer : compactification ---- */
    .cinematic-footer-wrapper {
        height: auto;
        min-height: auto;
    }
    .cinematic-footer {
        position: relative;
        height: auto;
        min-height: auto;
        padding-block: 3.5rem 2.5rem;
    }
    .footer-headline {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.1;
    }
    .footer-giant-text {
        display: none;        /* Texte parallax inutile sur mobile, gain perf */
    }
    .footer-marquee {
        font-size: 0.8rem;
    }

    /* ---- FAB : ne pas chevaucher le footer-totop ---- */
    .fab {
        bottom: 1rem;
        right: 1rem;
        width: 52px;
        height: 52px;
    }

    /* ---- Carousels 3D : ralentir + désactiver perspective souris (pas de souris) ---- */
    .hero-carousel,
    .cert-carousel {
        --perspective-x: 0deg !important;
        --perspective-y: 0deg !important;
    }

    /* ---- Tableau zone : désempiler proprement ---- */
    .zone-grid,
    .process-grid,
    .reviews-grid,
    .contact-grid,
    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* ---- Mobile étroit (< 480px) : ajustements ultra-compacts ---- */
@media (max-width: 480px) {
    .header-inner {
        padding-block: 0.65rem;
    }
    .brand-logo { height: 34px; }
    .header-actions { gap: 0.4rem; }

    .container { padding-inline: 1rem; }

    .hero-eyebrow {
        font-size: 0.7rem;
        padding: 0.5rem 0.85rem;
    }
    .hero-feature {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Cartes hero feature : 2 sur la ligne */
    .feature-pill {
        flex: 1 1 calc(50% - 0.25rem);
        font-size: 0.8rem;
    }

    .section-title { font-size: clamp(1.55rem, 7.5vw, 2rem); }
}

/* ---- Tablette (601-1024px) : équilibrage colonnes ---- */
@media (min-width: 601px) and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .container { padding-inline: 2rem; }
}

/* ==========================================================================
   HERO CINÉMA — Scroll-driven photo scrub (story chantier "longère → loft")
   Architecture : section haute (320vh) qui contient un pin sticky 100vh.
   La progression du scroll déclenche : crossfade entre 6 photos +
   Ken Burns (zoom progressif) + écartement des titres top/bottom.
   ========================================================================== */

main#main > .hero.hero-cinema {
    /* Override du flex-center du hero générique : on a besoin d'une section haute */
    display: block !important;
    align-items: stretch;
    padding: 0;
    height: 320vh;          /* Runway de scroll : 1 hero visible + 2.2vh pour le scrub */
    min-height: 320vh !important;
    background: var(--ink);
    /* CRUCIAL : overflow visible pour que position:sticky de l'enfant fonctionne.
       L'ancien hero utilisait overflow:hidden, ce qui casse complètement sticky. */
    overflow: visible !important;
    /* PAS de contain: paint ici → casse sticky sur iOS Safari */
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
}

/* Pin sticky 100vh à l'intérieur de la section haute */
.hero-cinema-pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* === Stack des 6 photos en background, crossfade scroll-driven === */
.hero-cinema-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-cinema-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.hero-cinema-photo[data-photo="0"] { opacity: 1; }       /* Photo de départ visible */
.hero-cinema-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--photo-scale, 1.04));
    transform-origin: center 60%;
    transition: transform 1200ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* === Voiles de lisibilité === */
.hero-cinema-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(15, 26, 42, 0.55) 0%,
            rgba(15, 26, 42, 0.35) 30%,
            rgba(15, 26, 42, 0.45) 60%,
            rgba(15, 26, 42, 0.85) 100%);
    pointer-events: none;
}
.hero-cinema-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center,
            transparent 35%,
            rgba(15, 26, 42, 0.25) 70%,
            rgba(15, 26, 42, 0.65) 100%);
    pointer-events: none;
}

/* === Contenu central avec titres top/bottom === */
.hero-cinema-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    padding: clamp(80px, 12vh, 130px) clamp(1rem, 4vw, 3rem) clamp(60px, 8vh, 100px);
    gap: clamp(1rem, 2vh, 2rem);
    text-align: center;
}

/* === Titres top/bottom (effet split au scroll) === */
.hero-cinema-title-top,
.hero-cinema-title-bottom {
    margin: 0;
    font-family: var(--font-utility);
    font-weight: 900;
    font-size: clamp(2.75rem, 9vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    transform: translate3d(var(--title-offset, 0px), 0, 0);
    will-change: transform, opacity;
    transition: transform 200ms linear;
    align-self: end;
}
.hero-cinema-title-bottom {
    align-self: start;
}
.hero-cinema-title-top em,
.hero-cinema-title-bottom em {
    font-style: italic;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--teal-light);
    background: linear-gradient(135deg, #4ECFC4, #1FB5A8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* === Bloc central (eyebrow + lead + CTA) === */
.hero-cinema-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: min(90vw, 720px);
    transition: opacity 300ms ease, transform 300ms ease;
    opacity: var(--center-opacity, 1);
}

.hero-cinema-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    background: rgba(15, 26, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    font-family: var(--font-utility);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
}
.hero-cinema-eyebrow .eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 12px rgba(31, 181, 168, 0.7);
    animation: heroPulse 2.5s ease-in-out infinite;
}

.hero-cinema-lead {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.hero-cinema-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-cinema-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-top: 0.5rem;
}

/* === Indicateur scroll en bas === */
.hero-cinema-scroll {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 99px;
    background: rgba(15, 26, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-utility);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all var(--t) var(--ease);
    animation: heroScrollBob 2.4s ease-in-out infinite;
}
.hero-cinema-scroll:hover {
    color: #fff;
    background: rgba(31, 181, 168, 0.25);
    border-color: rgba(31, 181, 168, 0.45);
}
.hero-cinema-scroll svg {
    width: 14px;
    height: 14px;
}
@keyframes heroScrollBob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -4px); }
}

/* === Timeline visuelle (6 ticks à droite) === */
.hero-cinema-timeline {
    position: absolute;
    right: clamp(1rem, 2.5vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 6px;
    border-radius: 99px;
    background: rgba(15, 26, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-cinema-tick {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 250ms ease, transform 250ms ease;
}
.hero-cinema-tick.is-active {
    background: var(--teal);
    transform: scaleY(1.25);
    box-shadow: 0 0 12px rgba(31, 181, 168, 0.6);
}
.hero-cinema-tick.is-passed {
    background: rgba(31, 181, 168, 0.55);
}

/* === Pulse animation === */
@keyframes heroPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* === BANDEAU FEATURES — sous le hero, transition douce === */
.hero-features-strip {
    background: var(--ink);
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

main#main > .hero-features-strip {
    margin-top: 0;
    background: var(--ink);
    border-radius: 0;
    box-shadow: none;
    z-index: 2;
}

main#main > .hero-features-strip + .trust-strip {
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

/* === MOBILE / RESPONSIVE — désactiver le scrub coûteux + simplifier === */
@media (max-width: 768px) {
    main#main > .hero.hero-cinema {
        height: 200vh;     /* Réduit le runway scroll (240→200) pour iOS Safari */
        min-height: 200vh !important;
    }
    .hero-cinema-content {
        grid-template-rows: auto auto auto;
        gap: clamp(1.25rem, 3vh, 2rem);
        padding: clamp(80px, 14vh, 110px) 1.1rem clamp(80px, 12vh, 110px);
    }
    .hero-cinema-title-top,
    .hero-cinema-title-bottom {
        font-size: clamp(2.5rem, 11vw, 4.5rem);
        line-height: 0.95;
    }
    .hero-cinema-eyebrow {
        font-size: 0.85rem;     /* Lisibilité ≥ 13.6px */
        padding: 0.5rem 0.95rem;
    }
    .hero-cinema-lead {
        font-size: 0.98rem;
    }
    .hero-cinema-timeline {
        right: 0.85rem;          /* Évite gestures bord iOS (back swipe) */
        padding: 8px 4px;
        gap: 6px;
    }
    .hero-cinema-tick {
        width: 3px;
        height: 14px;
    }
    .hero-cinema-cta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .hero-cinema-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === REDUCE MOTION — montre la photo finale, pas d'animations === */
@media (prefers-reduced-motion: reduce) {
    main#main > .hero.hero-cinema {
        height: 100vh;
        min-height: 100vh;
    }
    .hero-cinema-pin {
        position: relative;
        height: 100vh;
    }
    .hero-cinema-photo {
        opacity: 0;
        transition: none;
    }
    .hero-cinema-photo[data-photo="4"] {
        opacity: 1;        /* Affiche directement la photo finale (loft réalisé) */
    }
    .hero-cinema-photo img {
        transform: none;
        transition: none;
    }
    .hero-cinema-title-top,
    .hero-cinema-title-bottom {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   SERVICES MARQUEE — Défilement horizontal infini des corps d'état
   Pause au survol pour permettre la lecture. Désactivé en reduce-motion.
   ========================================================================== */

.services-marquee {
    position: relative;
    /* Pleine largeur viewport. overflow-x: clip body évite scroll horizontal Android. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
    background: linear-gradient(
        90deg,
        var(--ink) 0%,
        var(--ink-90) 50%,
        var(--ink) 100%
    );
    border-block: 1px solid rgba(31, 181, 168, 0.18);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
            mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

.services-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    white-space: nowrap;
    animation: servicesMarqueeScroll 38s linear infinite;
    will-change: transform;
}

.services-marquee:hover .services-marquee-track {
    animation-play-state: paused;
}

.services-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-utility);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
    transition: color var(--t-fast) var(--ease);
    flex-shrink: 0;
}

.services-marquee-item svg {
    flex-shrink: 0;
    color: var(--teal);
    transition: transform var(--t) var(--ease);
}

.services-marquee:hover .services-marquee-item:hover {
    color: var(--teal-light);
}
.services-marquee:hover .services-marquee-item:hover svg {
    transform: rotate(-8deg) scale(1.15);
}

/* Variante featured = la coordination tous corps d'état (différenciateur) */
.services-marquee-item-featured {
    color: var(--teal-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(0.82rem, 1.35vw, 0.95rem);
    padding: 0.4rem 0.85rem;
    background: rgba(31, 181, 168, 0.12);
    border: 1px solid rgba(31, 181, 168, 0.35);
    border-radius: 99px;
}
.services-marquee-item-featured svg {
    color: var(--teal-light);
}

.services-marquee-dot {
    color: var(--teal);
    font-size: 0.55rem;
    opacity: 0.5;
    flex-shrink: 0;
}

@keyframes servicesMarqueeScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }   /* -50% car le track est dupliqué (boucle parfaite) */
}

/* Mobile : ralentir un peu + texte plus petit */
@media (max-width: 768px) {
    .services-marquee {
        margin-block: 1.25rem 1.75rem;
        padding-block: 0.75rem;
    }
    .services-marquee-track {
        gap: 1rem;
        animation-duration: 30s;
    }
    .services-marquee-item {
        font-size: 0.88rem;
    }
    .services-marquee-item svg {
        width: 16px;
        height: 16px;
    }
    .services-marquee-item-featured {
        padding: 0.3rem 0.7rem;
        font-size: 0.76rem;
    }
}

/* Reduce-motion : désactive le défilement, affiche statiquement */
@media (prefers-reduced-motion: reduce) {
    .services-marquee-track {
        animation: none;
        flex-wrap: wrap;
        white-space: normal;
        justify-content: center;
        padding: 0 1rem;
    }
    .services-marquee {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* ==========================================================================
   SERVICES CARDS MARQUEE — Défilement horizontal des 9 cartes vers la DROITE
   Sens inverse de la bande au-dessus pour créer un effet symétrique premium.
   Gain d'espace vertical (pas de grille empilée) + sensation de mouvement.
   ========================================================================== */

.services-cards-marquee {
    position: relative;
    /* Pleine largeur viewport (sort du container parent).
       overflow-x: clip sur body protège des éventuels overflow Android. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    padding-block: clamp(1rem, 2vw, 2rem);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
            mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
}

/* La grille devient un track flex qui défile vers la DROITE (reverse) */
.services-cards-marquee .services-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1.25rem !important;
    margin-bottom: 0 !important;
    width: max-content;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    /* Sens INVERSE du marquee top : on part de -50% et on va vers 0 */
    animation: servicesCardsMarqueeScroll 65s linear infinite;
    /* Pause initiale : JS ajoute .is-ready après le clone des cartes
       (évite le flash où la moitié gauche du marquee est vide à -50%) */
    animation-play-state: paused;
    will-change: transform;
}
.services-cards-marquee.is-ready .services-grid {
    animation-play-state: running;
}

/* Pause au survol pour pouvoir lire/cliquer */
.services-cards-marquee:hover .services-grid {
    animation-play-state: paused;
}

/* Cartes : largeur fixe pour layout prévisible */
.services-cards-marquee .service-card {
    flex: 0 0 clamp(280px, 24vw, 340px);
    width: clamp(280px, 24vw, 340px);
    /* On garde tous les autres styles existants de .service-card */
}

/* Hover individuel pour distinguer la carte survolée (pause active) */
.services-cards-marquee .service-card:hover {
    transform: translateY(-6px);
    z-index: 2;
}

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

/* Mobile : ralentir + cartes adaptées */
@media (max-width: 768px) {
    .services-cards-marquee {
        padding-block: 0.75rem;
    }
    .services-cards-marquee .services-grid {
        gap: 0.85rem !important;
        animation-duration: 55s;
    }
    .services-cards-marquee .service-card {
        flex: 0 0 280px;
        width: 280px;
    }
}

/* Reduce-motion : désactive l'animation, retombe sur grille normale */
@media (prefers-reduced-motion: reduce) {
    .services-cards-marquee {
        overflow: visible;
        width: auto;
        margin-left: 0;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .services-cards-marquee .services-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
        animation: none;
        width: auto;
        padding-inline: 0;
    }
    .services-cards-marquee .service-card {
        flex: initial;
        width: auto;
    }
}


/* ==========================================================================
   AJUSTEMENTS RESPONSIVE FINAUX — fixes audit a11y/perf/desktop
   ========================================================================== */

/* Mobile : scroll-padding réduit pour matcher la hauteur header mobile (~60px) */
@media (max-width: 768px) {
    html { scroll-padding-top: 70px; }
}

/* Ultra-compact : masquer la timeline hero (peu utile sur si petit) */
@media (max-width: 480px) {
    .hero-cinema-timeline { display: none; }
}

/* Grands écrans desktop : réduire le runway hero pour ne pas piéger 5+ wheel scrolls */
@media (min-width: 1440px) {
    main#main > .hero.hero-cinema {
        height: 280vh;
        min-height: 280vh !important;
    }
}

/* Grands écrans : élargir le container pour éviter de grands vides latéraux */
@media (min-width: 1920px) {
    :root { --max-width: 1480px; }
    .container { max-width: 1480px; }
}
@media (min-width: 2560px) {
    :root { --max-width: 1680px; }
    .container { max-width: 1680px; }
}

/* Marquee cartes : agrandir sur grand écran (avant clampé à 340px sur 1920+) */
@media (min-width: 1440px) {
    .services-cards-marquee .service-card {
        flex: 0 0 clamp(320px, 22vw, 420px);
        width: clamp(320px, 22vw, 420px);
    }
}

/* Frame grid réalisations : agrandir sur grand écran (avant plafonné à 540px) */
@media (min-width: 1600px) {
    .frame-grid {
        max-width: 1400px;
        max-height: 720px;
        aspect-ratio: 16 / 9;
    }
}

/* === FOCUS-VISIBLE — outline cohérent sur tout interactif (a11y clavier) === */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.contact-channel:focus-visible,
.follow-card:focus-visible,
.footer-pill:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: inherit;
}

/* === BODY LOCK : reset auto sur resize desktop (anti bug nav-open résiduel) === */
@media (min-width: 769px) {
    body.nav-open {
        overflow: auto;        /* Force unlock si reste actif après resize */
    }
}

/* ===================== Galerie chantiers filtrable ===================== */
.work-filters{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 auto 2.6rem;max-width:920px}
.work-filter{font-family:var(--font-utility,inherit);font-size:.84rem;font-weight:600;padding:.55rem 1.15rem;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.14);transition:background .25s var(--ease),color .25s,border-color .25s;letter-spacing:.2px}
.work-filter:hover{background:rgba(255,255,255,.12);color:#fff}
.work-filter.is-active{background:var(--accent);border-color:var(--accent);color:#04201d}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem}
.work-card{position:relative;border-radius:var(--radius-lg,16px);overflow:hidden;background:#0c1622;border:1px solid rgba(255,255,255,.08);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.work-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.42);border-color:rgba(31,181,168,.45)}
.work-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#13212f,#0c1622)}
.work-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:transform .5s var(--ease),opacity .5s ease}
.work-media img.is-loaded{opacity:1}
.work-card:hover .work-media img{transform:scale(1.05)}
.work-tag{position:absolute;top:.8rem;left:.8rem;z-index:3;font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px;background:rgba(4,20,18,.82);color:var(--accent);backdrop-filter:blur(4px);border:1px solid rgba(31,181,168,.35)}
.work-body{padding:1.05rem 1.15rem 1.2rem}
.work-body h3{font-size:1.05rem;margin:0 0 .3rem;color:#fff;line-height:1.25}
.work-loc{font-size:.85rem;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:.4rem}
.work-loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.work-media img.work-before{display:none}
.work-ba{position:absolute;bottom:.8rem;right:.8rem;z-index:3;font-size:.68rem;font-weight:600;letter-spacing:.3px;padding:.3rem .65rem;border-radius:999px;background:rgba(4,20,18,.82);color:#fff;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);opacity:.85;transition:opacity .25s,background .25s,color .25s}
.work-card--ba:hover .work-ba{opacity:1;background:var(--accent);color:#04201d}
.work-card.is-hidden{display:none}
@media (max-width:520px){.work-grid{grid-template-columns:1fr}.work-filter{font-size:.8rem;padding:.5rem 1rem}}
@media (prefers-reduced-motion:reduce){.work-card:hover{transform:none}.work-card:hover .work-media img{transform:none}}

/* Bouton "voir les photos" sur la carte */
.work-more{position:absolute;bottom:.8rem;left:.8rem;z-index:4;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-utility,inherit);font-size:.72rem;font-weight:600;padding:.34rem .72rem;border-radius:999px;cursor:pointer;background:rgba(4,20,18,.82);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s,background .25s,color .25s,border-color .25s}
.work-card:hover .work-more,.work-card:focus-within .work-more{opacity:1;transform:none}
.work-more:hover{background:var(--accent);color:#04201d;border-color:var(--accent)}
.work-more svg{flex:none}
@media (hover:none){.work-more{opacity:1;transform:none}}

/* --- Galerie chantiers : carrousel horizontal, MOBILE UNIQUEMENT --- */
@media (max-width:600px){
  #workGrid.work-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:.9rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;      /* accroche chaque carte */
    -webkit-overflow-scrolling:touch;  /* défilement fluide iOS */
    scrollbar-width:none;              /* masque la barre (Firefox) */
    padding-bottom:.55rem;             /* un peu d'air sous les cartes */
    scroll-padding-left:0;
  }
  #workGrid.work-grid::-webkit-scrollbar{display:none} /* masque la barre (iOS/Chrome) */
  #workGrid .work-card{
    flex:0 0 84%;                      /* 1 carte + aperçu de la suivante -> invite à glisser */
    scroll-snap-align:start;
    opacity:1;                         /* annule .reveal : sinon les cartes de droite restent invisibles */
    transform:none;
  }
  #workGrid .work-card:hover{transform:none} /* pas de "saut" au toucher */
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:1rem;padding:clamp(1rem,4vw,3rem);background:rgba(6,10,16,.93);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:min(1100px,92vw)}
.lightbox-img{max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#0c1622}
.lightbox-caption{display:flex;gap:.6rem;align-items:baseline;color:#fff;font-size:.9rem;text-align:center}
.lightbox-title{font-weight:600}
.lightbox-count{color:rgba(255,255,255,.55);font-size:.82rem}
.lightbox-close{position:absolute;top:1rem;right:1.3rem;z-index:2;background:none;border:none;color:#fff;font-size:2.3rem;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s}
.lightbox-close:hover{opacity:1}
.lightbox-nav{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s;display:grid;place-items:center}
.lightbox-nav:hover{background:var(--accent);color:#04201d;border-color:var(--accent)}
@media (max-width:640px){.lightbox{gap:.3rem;padding:1rem .4rem}.lightbox-nav{width:40px;height:40px;font-size:1.4rem}.lightbox-img{max-height:70vh}}

/* ===================== Bouton flottant WhatsApp ===================== */
.fab-wa{
    position:fixed; bottom:1.5rem; left:1.5rem; z-index:91;
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; height:60px; border-radius:50%;
    background:#25D366; color:#fff; text-decoration:none;
    box-shadow:0 10px 26px -6px rgba(37,211,102,.6);
    transition:width .35s var(--ease), padding .35s var(--ease), border-radius .35s var(--ease), box-shadow .3s;
}
.fab-wa svg{flex:none;width:28px;height:28px}
.fab-wa span{
    max-width:0; overflow:hidden; white-space:nowrap; opacity:0; margin-left:0;
    font-weight:700; font-size:.92rem; letter-spacing:.2px;
    transition:max-width .35s var(--ease), opacity .3s, margin-left .35s var(--ease);
}
.fab-wa:hover, .fab-wa:focus-visible{width:auto; padding:0 22px; border-radius:34px; box-shadow:0 14px 32px -6px rgba(37,211,102,.72)}
.fab-wa:hover span, .fab-wa:focus-visible span{max-width:230px; opacity:1; margin-left:10px}
.fab-wa:focus-visible{outline:3px solid #0b3b2e; outline-offset:3px}
/* halo pulsé façon "radar" */
.fab-wa::after{
    content:""; position:absolute; left:0; top:0; width:60px; height:60px;
    border-radius:50%; background:#25D366; z-index:-1;
    animation:waPulse 2.2s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.9);opacity:0} 100%{transform:scale(1.9);opacity:0}}
.fab-wa:hover::after, .fab-wa:focus-visible::after{opacity:0; animation:none}
@media (max-width:520px){
    .fab-wa{bottom:1.15rem; left:1.15rem; width:54px; height:54px}
    .fab-wa::after{width:54px; height:54px}
    .fab-wa svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.fab-wa::after{display:none} .fab-wa,.fab-wa span{transition:none}}

/* Crédit footer — lien Fabien Rubalo */
.footer-credit-link{text-decoration:none;color:inherit}
.footer-credit-link strong{transition:color .2s var(--ease)}
.footer-credit-link:hover strong,.footer-credit-link:focus-visible strong{color:var(--accent)}
.footer-credit-link:hover{text-decoration:underline;text-underline-offset:3px}