/* ════════════════════════════════════════
       RESET & VARIABLES
    ════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    :root {
        --bg:    #050505;
        --bg2:   #0C0C0C;
        --cu:    #D6A06B;   /* cuivre */
        --cu-l:  #E8B784;   /* cuivre clair */
        --tx:    #F4F1EC;   /* texte principal crème */
        --tx2:   #A4A4A4;   /* texte secondaire */
        --br:    rgba(214,160,107,0.15);
        --glow:  0 0 40px rgba(214,160,107,0.28);
        --r:     4px;
    }

    html { scroll-behavior: smooth; }

    body {
        background: var(--bg);
        color: var(--tx);
        font-family: 'Inter', sans-serif;
        font-weight: 300;
        line-height: 1.75;
        overflow-x: hidden;
        cursor: none;
    }

    ::selection { background: rgba(214,160,107,0.2); color: var(--tx); }
    ::-webkit-scrollbar { width: 2px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: rgba(214,160,107,0.35); }

    /* ════════════════════════════════════════
       TYPOGRAPHY
    ════════════════════════════════════════ */
    .serif { font-family: 'Cormorant Garamond', serif; }

    h1, h2, h3, .heading {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300;
        font-style: italic;
        line-height: 1.06;
        letter-spacing: -0.02em;
        color: var(--tx);
    }

    .display { font-size: clamp(3.8rem, 9vw, 8rem); }
    h2       { font-size: clamp(2.6rem, 5vw, 4.2rem); }
    h3       { font-size: clamp(1.6rem, 3vw, 2.2rem); }

    .label {
        font-size: 0.65rem;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        color: var(--cu);
    }

    .body-text {
        font-size: 0.92rem;
        line-height: 1.9;
        color: var(--tx2);
        font-weight: 300;
    }

    /* ════════════════════════════════════════
       CURSOR PERSONNALISÉ
    ════════════════════════════════════════ */
    #cursor {
        position: fixed;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--cu);
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width .25s, height .25s, opacity .25s;
    }
    #cursor-ring {
        position: fixed;
        width: 34px; height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(214,160,107,0.32);
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: width .4s ease, height .4s ease, border-color .4s ease;
    }
    body:has(a:hover) #cursor-ring,
    body:has(button:hover) #cursor-ring { width: 54px; height: 54px; border-color: rgba(214,160,107,0.6); }

    /* ════════════════════════════════════════
       PAGE LOADER
    ════════════════════════════════════════ */
    #loader {
        position: fixed; inset: 0;
        background: var(--bg);
        z-index: 10000;
        display: flex; align-items: center; justify-content: center;
        transition: opacity .9s ease, visibility .9s ease;
    }
    .loader-inner {
        display: flex; flex-direction: column;
        align-items: center; gap: 18px;
    }
    .loader-logo {
        height: 72px;
        width: auto;
        object-fit: contain;
        display: block;
        image-orientation: from-image;
        opacity: .85;
        animation: loaderPulse 1.4s ease-in-out infinite;
    }
    #loader.out { opacity: 0; visibility: hidden; }
    .loader-mark {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 1.4rem;
        color: rgba(214,160,107,0.5);
        letter-spacing: .2em;
        animation: loaderPulse 1.4s ease-in-out infinite;
    }
    @keyframes loaderPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

    /* ════════════════════════════════════════
       NAVIGATION
    ════════════════════════════════════════ */
    nav {
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 500;
        padding: 32px 80px;
        display: flex; align-items: center; justify-content: space-between;
        transition: padding .4s, background .5s, border-color .5s;
        border-bottom: 1px solid transparent;
    }
    nav.sc {
        padding: 20px 80px;
        background: rgba(5,5,5,.82);
        backdrop-filter: blur(20px);
        border-color: var(--br);
    }

    .nav-brand { display: flex; align-items: center; gap: 14px; }
    .nav-brand-name {
        font-family: 'Inter', sans-serif;
        font-size: .6rem; font-weight: 400;
        letter-spacing: .18em; text-transform: uppercase;
        color: rgba(244,241,236,.45);
    }
    .nav-brand-name em { color: var(--cu); font-style: normal; }

    .nav-logo {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300; font-style: italic;
        font-size: 1.35rem; letter-spacing: .06em;
        color: var(--tx); text-decoration: none;
    }
    .nav-logo em { color: var(--cu); font-style: normal; }

    .nav-links { display: flex; gap: 24px; list-style: none; margin-right: 40px; margin-left: 60px; }
    .nav-links a {
        font-family: 'VT323', monospace;
        font-size: 1.1rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--cu);
        text-decoration: none; transition: color .3s, box-shadow .3s, border-color .3s;
        border: 1px solid rgba(214,160,107,.5);
        padding: 5px 12px;
        position: relative;
        box-shadow: 0 0 8px rgba(214,160,107,.15), inset 0 0 8px rgba(214,160,107,.06);
    }
    .nav-links a::before,
    .nav-links a::after {
        content: '';
        position: absolute;
        width: 5px; height: 5px;
        border-color: var(--cu);
        border-style: solid;
        opacity: .6;
    }
    .nav-links a::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
    .nav-links a::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
    .nav-links a:hover {
        color: #fff;
        border-color: rgba(214,160,107,.9);
        box-shadow: 0 0 14px rgba(214,160,107,.3), inset 0 0 12px rgba(214,160,107,.1);
    }


    .nav-btn {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 11px 26px;
        border: 1px solid rgba(214,160,107,0.35);
        color: var(--cu);
        font-family: 'VT323', monospace;
        font-size: 1.1rem;
        letter-spacing: .14em; text-transform: uppercase;
        text-decoration: none; transition: border-color .4s, background .4s;
        position: relative; overflow: hidden;
        box-shadow: 0 0 8px rgba(214,160,107,.15), inset 0 0 8px rgba(214,160,107,.06);
    }
    .nav-btn::before {
        content: ''; position: absolute; inset: 0;
        background: rgba(214,160,107,.08);
        transform: translateX(-101%);
        transition: transform .5s ease;
    }
    .nav-btn:hover::before { transform: translateX(0); }
    .nav-btn:hover { border-color: rgba(214,160,107,.65); }

    /* ════════════════════════════════════════
       VISUAL ZONE — PLACEHOLDER ADAPTATIF
    ════════════════════════════════════════ */
    .vz {
        position: relative;
        width: 100%; overflow: hidden;
        background: #07060400;
        background-color: #070605;
        border: 1px solid rgba(214,160,107,0.12);
    }

    /* Grille de fond très subtile */
    .vz::before {
        content: '';
        position: absolute; inset: 0;
        background-image:
            repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(214,160,107,0.028) 80px),
            repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(214,160,107,0.028) 80px);
        pointer-events: none;
    }

    /* Cadre intérieur discret */
    .vz-frame {
        position: absolute;
        inset: 18px;
        border: 1px dashed rgba(214,160,107,0.09);
        pointer-events: none;
    }

    /* Marqueur centre */
    .vz-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        display: flex; flex-direction: column;
        align-items: center; gap: 14px;
    }

    .vz-cross {
        position: relative; width: 48px; height: 48px;
    }
    .vz-cross::before, .vz-cross::after {
        content: ''; position: absolute;
        background: rgba(214,160,107,0.2);
    }
    .vz-cross::before { width: 1px; height: 100%; left: 50%; top: 0; }
    .vz-cross::after  { height: 1px; width: 100%; top: 50%; left: 0; }

    .vz-dot-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 7px; height: 7px;
        border-radius: 50%;
        border: 1px solid rgba(214,160,107,0.35);
    }

    .vz-lbl {
        font-size: .52rem;
        letter-spacing: .44em;
        text-transform: uppercase;
        color: rgba(214,160,107,0.25);
        font-family: 'Inter', sans-serif;
        white-space: nowrap;
    }

    /* Coins marqués */
    .vz::after {
        content: '';
        position: absolute;
        top: 28px; left: 28px;
        width: 14px; height: 14px;
        border-top: 1px solid rgba(214,160,107,0.2);
        border-left: 1px solid rgba(214,160,107,0.2);
        pointer-events: none;
    }

    /* Dimensions des zones */
    .vz-hero    { height: 100vh; min-height: 700px; }
    .vz-about   { height: 560px; }
    .vz-card    { height: 440px; }
    .vz-card-lg { height: 480px; }
    .vz-full    { height: 520px; }

    /* ────── IMAGES RÉELLES ────── */

    /* Hero image — full-screen immersif sous la nav */
    .hero-img-wrap {
        position: absolute; inset: 0;
        overflow: hidden;
    }
    .hero-img {
        width: 100%; height: 115%;   /* 15% de marge pour le parallax */
        object-fit: cover;
        object-position: center top;
        display: block;
        will-change: transform;
    }

    /* Logo image */
    .nav-logo-img {
        height: 40px; width: auto;
        object-fit: contain; display: block;
        filter: brightness(1);
    }

    /* About image */
    .about-img-wrap {
        overflow: hidden;
        height: 560px;
        position: relative;
    }
    .about-img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform .9s ease;
    }
    .about-img-wrap:hover .about-img { transform: scale(1.04); }

    /* Portfolio card images */
    .proj-img-wrap {
        overflow: hidden;
        position: relative;
    }
    .proj-img-wrap.h-card { height: 440px; }
    .proj-img-wrap.h-full { height: 520px; }
    .proj-img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .8s ease;
    }
    .proj-card:hover .proj-img { transform: scale(1.06); }

    /* ────── FONDS DE SECTION ────── */
    #apropos, #portfolio, #formules, #contact {
        position: relative;
        overflow: hidden;
        min-height: 100vh;
    }
    /* Le container reste au-dessus du fond */
    #apropos .container,
    #portfolio .container,
    #formules .container,
    #contact .container {
        position: relative;
        z-index: 2;
    }
    .sec-bg {
        position: absolute; inset: 0;
        z-index: 0; overflow: hidden;
    }
    .sec-bg img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .sec-bg-ov {
        position: absolute; inset: 0;
        background: rgba(5,5,5,.28);
    }
    #apropos .sec-bg-ov {
        background: transparent;
    }

    /* ════════════════════════════════════════
       BOUTONS
    ════════════════════════════════════════ */
    .btn {
        display: inline-flex; align-items: center; gap: 12px;
        padding: 14px 34px;
        border: 1px solid rgba(214,160,107,.38);
        color: var(--cu);
        font-family: 'VT323', monospace;
        font-size: 1.2rem;
        letter-spacing: .18em; text-transform: uppercase;
        text-decoration: none; cursor: pointer;
        background: transparent;
        box-shadow: 0 0 8px rgba(214,160,107,.15), inset 0 0 8px rgba(214,160,107,.06);
        transition: border-color .4s, background .4s, box-shadow .4s;
        position: relative; overflow: hidden;
    }
    .btn::before {
        content: ''; position: absolute; inset: 0;
        background: rgba(214,160,107,.07);
        transform: translateX(-101%);
        transition: transform .5s ease;
    }
    .btn:hover::before { transform: translateX(0); }
    .btn:hover { border-color: rgba(214,160,107,.68); }

    .btn-fill {
        background: rgba(214,160,107,.12);
        border-color: rgba(214,160,107,.5);
    }
    .btn-fill:hover { background: rgba(214,160,107,.2); }

    /* ════════════════════════════════════════
       REVEAL ANIMATIONS
    ════════════════════════════════════════ */
    .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s ease; }
    .rv.in { opacity: 1; transform: none; }
    .d1 { transition-delay: .08s; }
    .d2 { transition-delay: .18s; }
    .d3 { transition-delay: .28s; }
    .d4 { transition-delay: .38s; }
    .d5 { transition-delay: .50s; }

    /* ════════════════════════════════════════
       LAYOUT UTILITIES
    ════════════════════════════════════════ */
    .container { max-width: 1320px; margin: 0 auto; padding: 0 80px; }
    section { padding: 150px 0; margin: 0; }


    .eyebrow-line {
        display: flex; align-items: center; gap: 18px;
        margin-bottom: 36px;
    }
    .eyebrow-line::before {
        content: ''; flex-shrink: 0;
        width: 32px; height: 1px;
        background: var(--cu);
    }

    /* Ligne décorative */
    .rule {
        width: 1px; height: 80px;
        background: linear-gradient(to bottom, var(--cu), transparent);
        margin: 0 auto;
    }

    /* ════════════════════════════════════════
       SECTION 1 — HERO
    ════════════════════════════════════════ */
    #hero {
        position: relative;
        height: 100vh; min-height: 700px;
        display: flex; flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
    }

    /* La VZone est le fond complet */
    #hero .vz-hero {
        position: absolute; inset: 0;
        border: none;
        /* Gradient pour la lisibilité du texte */
    }
    #hero .vz-hero::after { display: none; }

    /* ── Rochers flottants (cinemagraph spatial) ── */
    .rock-float {
        position: absolute; inset: 0;
        pointer-events: none; z-index: 1;
        will-change: transform;
    }
    .rock-float img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* Clip sur la zone du rocher gauche (0–22%) */
    .rock-float--left {
        clip-path: inset(0 78% 0 0);
        animation: drift-l 10s ease-in-out infinite alternate;
    }
    /* Clip sur la zone du rocher droit (78–100%) */
    .rock-float--right {
        clip-path: inset(0 0 0 78%);
        animation: drift-r 12s ease-in-out infinite alternate;
        animation-delay: -5s;
    }
    @keyframes drift-l {
        0%   { transform: translate(0px,    0px)  rotate(0deg)   scale(1);    }
        50%  { transform: translate(18px,  -30px) rotate(1.8deg) scale(1.05); }
        100% { transform: translate(8px,  -55px)  rotate(2.8deg) scale(1.08); }
    }
    @keyframes drift-r {
        0%   { transform: translate(0px,   0px)   rotate(0deg)    scale(1);    }
        50%  { transform: translate(-14px, -25px) rotate(-2.1deg) scale(1.04); }
        100% { transform: translate(-6px,  -50px) rotate(-3.2deg) scale(1.07); }
    }

    /* Overlay hero — léger, juste pour lisibilité du texte en bas */
    .hero-overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(to top, rgba(5,5,5,.72) 0%, rgba(5,5,5,.18) 22%, transparent 50%),
            linear-gradient(to right, rgba(5,5,5,.10) 0%, transparent 40%);
        pointer-events: none; z-index: 1;
    }


    .hero-label {
        position: absolute;
        bottom: 28px; right: 28px;
        font-size: .5rem; letter-spacing: .42em;
        text-transform: uppercase;
        color: rgba(214,160,107,.2);
        font-family: 'Inter', sans-serif;
        z-index: 2; pointer-events: none;
    }

    .hero-content {
        position: relative; z-index: 2;
        padding: 0 80px 40px;
        max-width: 860px;
    }

    .hero-content .label { margin-bottom: 20px; display: block; }
    .hero-content .display {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        letter-spacing: -.02em;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .hero-sub {
        font-size: .85rem; letter-spacing: .1em;
        color: rgba(244,241,236,.55);
        text-transform: uppercase; margin-bottom: 48px;
        font-family: 'Inter', sans-serif; font-weight: 300;
    }

    .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
    .hero-whatsapp { display: none; }

    /* Scroll hint */
    .scroll-hint {
        position: absolute; bottom: 80px; right: 80px;
        display: flex; flex-direction: column;
        align-items: center; gap: 12px; z-index: 2;
        opacity: 0; animation: fadeIn 1s 2s ease forwards;
    }
    .scroll-hint span {
        font-size: .56rem; letter-spacing: .32em;
        text-transform: uppercase; color: rgba(255,255,255,.55);
        writing-mode: vertical-lr; transform: rotate(180deg);
    }
    .scroll-bar {
        width: 2px; height: 55px;
        background: linear-gradient(to bottom, #fff, transparent);
        animation: scrollBlink 1.4s ease-in-out infinite;
        box-shadow: 0 0 6px rgba(255,255,255,.6);
    }

    /* ════════════════════════════════════════
       SECTION 2 — À PROPOS
    ════════════════════════════════════════ */
    #apropos { background: transparent; padding-top: 60px; }

    .about-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 60px;
        align-items: start;
    }
    .about-text { padding-top: 0; }

    .about-text { padding-top: 8px; }

    .about-quote {
        font-family: 'Inter', sans-serif;
        font-weight: 500; font-style: normal;
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.25;
        letter-spacing: -.02em;
        text-shadow: 0 2px 20px rgba(0,0,0,.8);
        color: var(--tx);
        margin-bottom: 40px;
        border-left: 1px solid var(--cu);
        padding-left: 28px;
    }

    .about-desc { margin-bottom: 48px; text-shadow: 0 1px 12px rgba(0,0,0,.7); color: rgba(244,241,236,.9); }

    .values { list-style: none; display: flex; flex-direction: column; gap: 18px; }
    .values li {
        display: flex; align-items: baseline; gap: 16px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--br);
    }
    .values li:last-child { border-bottom: none; }
    .val-name {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 1.25rem; color: var(--cu);
        min-width: 140px;
    }
    .val-desc { font-size: .82rem; color: var(--tx2); font-weight: 300; }

    .about-vz-wrap { position: sticky; top: 140px; }

    /* ════════════════════════════════════════
       SECTION 3 — PORTFOLIO
    ════════════════════════════════════════ */
    #portfolio { background: transparent; padding: 0; }

    /* ── Livre ouvert — layout portfolio ── */
    .book-layout {
        position: relative; z-index: 2;
        display: flex;
        min-height: 100vh;
        gap: 0;
    }

    /* Page gauche */
    .book-left {
        position: relative; z-index: 5;
        width: 50%;
        flex-shrink: 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: flex-start;
        gap: 0;
        padding: 0 6% 40px 6%;
        text-align: center;
        justify-content: flex-start;
    }
    .avis-left-center {
        position: absolute;
        top: 18%;
        right: 20%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    /* Avis */
    .avis-header { text-align: center; width: 100%; margin-bottom: 28px; margin-top: -40px; }
    .avis-logo { height: 72px; width: auto; object-fit: contain; display: block; opacity: .8; margin-top: 48px; align-self: flex-end; margin-right: 65px; }
    .avis-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.8rem, 4.5vw, 4.5rem);
        font-weight: 700;
        letter-spacing: .3em; color: var(--cu);
        display: block;
        text-align: center;
        white-space: nowrap;
    }
    .avis-subtitle {
        display: block; margin-top: -6px;
        font-family: 'Inter', sans-serif; font-size: .6rem;
        letter-spacing: .18em; text-transform: uppercase;
        color: rgba(244,241,236,.35);
    }
    .review { margin-bottom: 22px; }
    .review-stars { color: var(--cu); font-size: .8rem; letter-spacing: 3px; display: block; margin-bottom: 5px; }
    .review-quote {
        font-family: 'Cormorant Garamond', serif; font-style: italic;
        font-size: clamp(.85rem, 1.2vw, 1.05rem);
        color: rgba(244,241,236,.88); line-height: 1.55;
        display: block; margin-bottom: 7px;
    }
    .review-author {
        font-family: 'Inter', sans-serif; font-size: .58rem;
        letter-spacing: .14em; text-transform: uppercase;
        color: var(--cu); display: block;
    }
    .review-role {
        font-family: 'Inter', sans-serif; font-size: .52rem;
        color: rgba(244,241,236,.3); letter-spacing: .08em;
        display: block;
    }
    .avis-score-row {
        margin-top: auto; width: 100%;
        display: flex; flex-direction: column; align-items: center;
        gap: 6px; padding-top: 16px;
        border-top: 1px solid rgba(214,160,107,.2);
    }
    .avis-score-num {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        color: var(--cu); letter-spacing: .1em;
    }
    .avis-score-label {
        font-family: 'Inter', sans-serif; font-size: .55rem;
        letter-spacing: .18em; text-transform: uppercase;
        color: rgba(244,241,236,.35);
    }
    .avis-platforms {
        display: flex; gap: 18px; margin-top: 4px;
    }
    .avis-platform {
        font-family: 'VT323', monospace; font-size: .85rem;
        letter-spacing: .1em; color: rgba(244,241,236,.4);
        text-transform: uppercase;
    }
    /* Recto avis */
    .recto-avis {
        position: absolute; inset: 0;
        padding: 44px 12px 40px 120px;
        display: flex; flex-direction: column;
        align-items: flex-start;
    }
    .recto-avis .recto-hint {
        position: absolute;
        top: 58%;
        left: 62%;
        transform: translate(-50%, -50%);
        font-size: .52rem; letter-spacing: .2em;
        text-transform: uppercase;
        color: rgba(244,241,236,.2);
    }
    .recto-avis .review {
        flex: 1;
        display: flex; flex-direction: column;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid rgba(214,160,107,.15);
    }
    .recto-avis .review:last-child { border-bottom: none; }
    .recto-avis .review-top {
        display: flex; align-items: center; gap: 10px;
        justify-content: flex-start;
    }
    .recto-avis .review-stars { font-size: 1.2rem; letter-spacing: 4px; margin-bottom: 0; }
    .recto-avis .review-num {
        font-family: 'Cormorant Garamond', serif; font-style: italic;
        font-size: .75rem; color: rgba(214,160,107,.5); letter-spacing: .08em;
    }
    .recto-avis .review-quote {
        font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.6;
        margin: 10px 0; flex: 1; display: flex; align-items: center;
    }
    .recto-avis .review-author { font-size: .62rem; letter-spacing: .14em; }
    .recto-avis .review-role { font-size: .56rem; }
    .book-brand { text-align: right; }
    .book-brand-label {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(2.4rem, 5vw, 5rem);
        color: rgba(244,241,236,.75);
        letter-spacing: .12em; line-height: 1.1;
        position: relative;
    }
    .bbl-word {
        text-decoration: underline;
        text-decoration-color: rgba(255,255,255,.85);
        text-decoration-thickness: 1px;
        text-underline-offset: 6px;
    }
    .bbl-gold {
        color: var(--cu);
        text-decoration-color: var(--cu);
    }
    .book-brand-divider {
        display: block; width: 36px; height: 1px;
        background: var(--cu); margin: 18px auto;
    }
    .book-brand-sub {
        display: block;
        font-size: .62rem; letter-spacing: .28em;
        text-transform: uppercase; color: var(--cu);
        text-align: center;
    }
    .book-desc {
        font-size: .9rem;
        line-height: 1.9;
        color: rgba(244,241,236,.5);
        margin: 0;
    }
    .book-counter {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-size: 1rem;
        color: rgba(244,241,236,.3); letter-spacing: .1em;
    }
    .book-counter-sep { margin: 0 8px; color: var(--cu); }

    /* Page droite — pages tournantes */
    .book-right {
        position: relative;
        width: 50%;
        flex-shrink: 0;
        min-height: 100vh;
        perspective: 2000px;
        z-index: 3;
    }

    .recto {
        position: absolute; inset: 0;
        padding: 48px 44px 40px;
        background: transparent;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        transform-origin: left center;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        cursor: pointer;
    }
    .recto.is-turning,
    .recto.is-returning {
        background: #080604;
    }
    .recto.active { visibility: visible; }

    .recto.is-turning {
        animation: turnForward 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        pointer-events: none;
    }
    .recto.is-returning {
        animation: turnBack 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        pointer-events: none;
    }

    @keyframes turnForward {
        0%   { transform: rotateY(0deg)    translateZ(0px); }
        18%  { transform: rotateY(-28deg)  translateZ(12px) scaleY(1.003); }
        50%  { transform: rotateY(-90deg)  translateZ(6px)  skewY(.5deg); }
        82%  { transform: rotateY(-152deg) translateZ(2px); }
        100% { transform: rotateY(-180deg) translateZ(0px); }
    }
    @keyframes turnBack {
        0%   { transform: rotateY(-180deg) translateZ(0px); }
        18%  { transform: rotateY(-152deg) translateZ(2px); }
        50%  { transform: rotateY(-90deg)  translateZ(6px)  skewY(-.5deg); }
        82%  { transform: rotateY(-28deg)  translateZ(12px) scaleY(1.003); }
        100% { transform: rotateY(0deg)    translateZ(0px); }
    }

    /* Ombre de courbure qui balaie la page pendant le tournage */
    .curl-shadow {
        position: absolute; inset: 0;
        pointer-events: none; opacity: 0;
    }
    .recto.is-turning  .curl-shadow { animation: curlFwd 1.2s ease-in-out forwards; }
    .recto.is-returning .curl-shadow { animation: curlBck 1.2s ease-in-out forwards; }
    @keyframes curlFwd {
        0%   { opacity:0; background: linear-gradient(to left,  rgba(0,0,0,.55) 0%, transparent 45%); }
        35%  { opacity:1; background: linear-gradient(to right, rgba(0,0,0,.65) 0%, transparent 55%); }
        70%  { opacity:.5; background: linear-gradient(to right, rgba(0,0,0,.3) 0%, transparent 50%); }
        100% { opacity:0; }
    }
    @keyframes curlBck {
        0%   { opacity:0; background: linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 45%); }
        35%  { opacity:1; background: linear-gradient(to left,  rgba(0,0,0,.65) 0%, transparent 55%); }
        70%  { opacity:.5; background: linear-gradient(to left,  rgba(0,0,0,.3) 0%, transparent 50%); }
        100% { opacity:0; }
    }

    /* Ombre projetée sur la page gauche pendant le tournage */
    .left-shadow {
        position: absolute; inset: 0; z-index: 6;
        pointer-events: none; opacity: 0;
        background: linear-gradient(to left, rgba(0,0,0,.35), transparent 70%);
        transition: opacity .3s ease;
    }
    .left-shadow.show { opacity: 1; }

    /* Cadre image projet */
    .proj-frame {
        width: 100%; max-width: 400px;
        aspect-ratio: 21 / 9;
        border: 1px solid rgba(244,241,236,.12);
        overflow: hidden; margin-bottom: 20px;
        background: rgba(244,241,236,.03);
        display: flex; align-items: center; justify-content: center;
    }
    .proj-frame img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .proj-frame-empty {
        font-size: .55rem; letter-spacing: .2em;
        text-transform: uppercase; color: rgba(244,241,236,.18);
    }
    .proj-title {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: clamp(1rem, 1.6vw, 1.3rem);
        color: var(--cu);
        letter-spacing: .06em;
        margin-bottom: 12px;
    }

    .proj-link {
        display: inline-block;
        font-size: .6rem; letter-spacing: .2em;
        text-transform: uppercase; color: var(--cu);
        text-decoration: none; transition: opacity .3s;
    }
    .proj-link:hover { opacity: .65; }

    /* Navigation pages */
    .book-bottom-row {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: auto;
        align-self: flex-end;
        padding-right: 8%;
    }

    .book-nav {
        display: flex; gap: 20px;
    }
    .book-nav-btn {
        background: none; border: 1px solid rgba(214,160,107,.3);
        color: var(--cu);
        font-family: 'VT323', monospace;
        font-size: 1rem; letter-spacing: .2em;
        text-transform: uppercase; padding: 8px 18px;
        cursor: pointer; transition: border-color .3s, color .3s, box-shadow .3s;
        box-shadow: 0 0 6px rgba(214,160,107,.1), inset 0 0 6px rgba(214,160,107,.05);
    }
    .book-nav-btn:hover { border-color: var(--cu); color: #fff; box-shadow: 0 0 12px rgba(214,160,107,.25); }
    .book-nav-btn:disabled { opacity: .2; cursor: default; }

    .recto-logo {
        position: absolute;
        top: 14px; right: 210px;
        width: 48px;
        opacity: .55;
    }
    .recto-logo-line {
        position: absolute;
        top: 72px; right: 0; left: 0;
        height: 1px;
        background: linear-gradient(to right, transparent 4%, rgba(214,160,107,.25) 30%, rgba(214,160,107,.25) 70%, transparent 96%);
    }

    .recto-portfolio-label {
        position: absolute;
        top: 28px; left: 44px;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 1rem;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(244,241,236,.3);
    }

    .recto-num {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-size: 4rem; font-weight: 300; font-style: italic;
        color: rgba(214,160,107,.12);
        line-height: 1; margin-bottom: 20px;
        align-self: flex-start;
    }
    .recto-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 300; font-style: italic;
        color: rgba(244,241,236,.82);
        margin: 0 0 10px; line-height: 1.2;
    }
    .recto-type {
        display: block; font-size: .6rem;
        letter-spacing: .2em; text-transform: uppercase;
        color: var(--cu); margin-bottom: 22px;
    }
    .recto-desc {
        font-size: .82rem; color: rgba(244,241,236,.4);
        line-height: 1.75; max-width: 340px;
        margin-bottom: 32px;
    }
    .recto-year {
        font-size: .58rem; letter-spacing: .12em;
        color: rgba(244,241,236,.22);
    }
    .recto-hint {
        position: absolute; bottom: 80px; left: 360px;
        font-size: .56rem; letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(244,241,236,.22);
        animation: scrollBlink 2s ease-in-out infinite;
    }

    .portfolio-count {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 4rem; color: rgba(214,160,107,.15);
        line-height: 1;
    }

    /* Grille portfolio */
    .pg { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

    .proj-full { grid-column: 1 / -1; }

    .proj-card {
        background: var(--bg);
        border: 1px solid var(--br);
        overflow: hidden;
        transition: border-color .4s;
        cursor: pointer;
    }
    .proj-card:hover { border-color: rgba(214,160,107,.32); }

    /* Overlay hover */
    .proj-visual {
        position: relative; overflow: hidden;
    }
    .proj-overlay {
        position: absolute; inset: 0;
        background: rgba(5,5,5,.72);
        backdrop-filter: blur(4px);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity .4s ease;
    }
    .proj-card:hover .proj-overlay { opacity: 1; }

    .proj-overlay-cta {
        display: flex; align-items: center; gap: 12px;
        font-size: .68rem; letter-spacing: .24em;
        text-transform: uppercase; color: var(--cu);
        font-family: 'Inter', sans-serif;
    }
    .proj-overlay-cta::after {
        content: '→';
        font-size: .9rem; color: var(--cu);
    }

    .proj-card:hover .vz { filter: brightness(1.12); }
    /* (remplacé par .proj-card:hover .proj-img → scale via .proj-img rule) */

    .proj-meta {
        padding: 26px 28px 28px;
        display: flex; align-items: flex-end; justify-content: space-between;
    }
    .proj-info h3 {
        font-size: 1.25rem; margin-top: 6px;
        font-style: italic; font-weight: 300;
    }
    .proj-year {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 2rem; color: rgba(214,160,107,.18);
        line-height: 1;
    }

    /* ════════════════════════════════════════
       SECTION 4 — FORMULES
    ════════════════════════════════════════ */
    #formules { background: transparent; padding: 0 !important; }
    #formules .container { height: 100vh; position: relative; max-width: 100%; padding: 0; min-height: unset; }

    .formules-cards {
        position: absolute;
        top: 7vh; height: 53vh;
        left: 17%; right: 17%;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2%;
        align-items: stretch;
    }

    .formule-card {
        display: flex; flex-direction: column;
        align-items: center; justify-content: space-between;
        gap: 6px;
        padding: 14px 14px 12px;
        overflow: hidden;
        text-align: center;
        background: rgba(5,3,2,.55);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(214,160,107,.15);
        transition: border-color .3s, background .3s;
    }
    .formule-card:hover {
        border-color: rgba(214,160,107,.5);
        background: rgba(5,3,2,.7);
    }
    .formule-card--featured {
        border-color: rgba(214,160,107,.4);
        background: rgba(214,160,107,.06);
    }
    .formule-card .btn {
        font-family: 'VT323', monospace;
        font-size: .9rem;
        letter-spacing: .2em;
        padding: 6px 24px;
        width: 80%;
        justify-content: center;
        flex-shrink: 0;
        border-color: rgba(214,160,107,.7);
        color: var(--cu);
        background: rgba(214,160,107,.12);
        box-shadow: 0 0 10px rgba(214,160,107,.2);
    }

    .formule-tier {
        font-size: .6rem; letter-spacing: .3em;
        text-transform: uppercase; color: var(--cu);
    }
    .formule-price {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(1.6rem, 2.5vw, 2.4rem);
        color: var(--tx); line-height: 1;
    }
    .formule-price span { font-size: 1.2rem; color: var(--cu); }
    .formule-price-alt {
        font-family: 'Inter', sans-serif;
        font-size: clamp(.75rem, 1vw, .85rem);
        color: rgba(244,241,236,.45);
        letter-spacing: .04em;
        margin-top: 4px;
    }
    .formule-price-alt strong { color: var(--cu); font-weight: 400; }
    .formule-engagement {
        font-family: 'Inter', sans-serif;
        font-size: .55rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(244,241,236,.28);
        margin-top: 2px;
    }

    .formule-list {
        list-style: none; display: flex; flex-direction: column;
        gap: 6px; text-align: left; width: 100%;
    }
    .formule-list li {
        font-size: .65rem; letter-spacing: .04em;
        color: rgba(244,241,236,.55);
        padding-left: 14px; position: relative;
    }
    .formule-list li::before {
        content: '—'; position: absolute; left: 0;
        color: var(--cu); font-size: .6rem;
    }

    .formules-contact-hint {
        position: absolute;
        top: 62vh; left: 50%; transform: translateX(-50%);
        text-align: center;
        font-size: .7rem; letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(244,241,236,.6);
        white-space: nowrap;
        padding: 12px 36px;
        border: 1px solid rgba(214,160,107,.35);
        background: rgba(5,3,2,.5);
        backdrop-filter: blur(4px);
        box-shadow: 0 0 10px rgba(214,160,107,.1), inset 0 0 8px rgba(214,160,107,.05);
        position: absolute;
    }
    .formules-contact-hint::before,
    .formules-contact-hint::after {
        content: '';
        position: absolute;
        width: 7px; height: 7px;
        border-color: var(--cu);
        border-style: solid;
        opacity: .5;
    }
    .formules-contact-hint::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
    .formules-contact-hint::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
    .formules-contact-hint a {
        color: var(--cu); text-decoration: none;
        transition: opacity .3s;
    }
    .formules-contact-hint a:hover { opacity: .7; }

    .formules-intro { margin-bottom: 70px; max-width: 560px; }
    .formules-intro h2 { margin-top: 16px; }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: start;
    }

    .price-card {
        padding: 48px 38px 42px;
        border: 1px solid var(--br);
        background: var(--bg2);
        position: relative;
        transition: border-color .4s, transform .4s;
    }
    .price-card:hover { border-color: rgba(214,160,107,.3); transform: translateY(-6px); }

    /* Carte centrale mise en avant */
    .price-card.featured {
        border-color: rgba(214,160,107,.35);
        background: #0f0e0c;
        transform: translateY(-14px);
        box-shadow: 0 0 60px rgba(214,160,107,.08), 0 0 0 1px rgba(214,160,107,.12);
    }
    .price-card.featured:hover { transform: translateY(-20px); }

    .price-badge {
        position: absolute; top: -13px; left: 50%;
        transform: translateX(-50%);
        font-size: .58rem; letter-spacing: .28em;
        text-transform: uppercase;
        background: var(--cu);
        color: var(--bg);
        padding: 5px 18px;
        white-space: nowrap;
        font-family: 'Inter', sans-serif; font-weight: 500;
    }

    .price-tier {
        display: block;
        font-size: .62rem; letter-spacing: .35em;
        text-transform: uppercase; color: var(--tx2);
        margin-bottom: 22px;
    }
    .price-card.featured .price-tier { color: var(--cu); }

    .price-amount {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300; font-style: italic;
        font-size: 3.4rem; color: var(--tx);
        line-height: 1; margin-bottom: 6px;
    }
    .price-suffix { font-size: .75rem; color: var(--tx2); margin-bottom: 28px; }

    .price-divider {
        height: 1px; background: var(--br);
        margin: 28px 0;
    }

    .price-features {
        list-style: none;
        display: flex; flex-direction: column; gap: 13px;
        margin-bottom: 36px;
    }
    .price-features li {
        display: flex; align-items: baseline; gap: 12px;
        font-size: .84rem; color: var(--tx2); font-weight: 300;
    }
    .price-features li::before {
        content: '';
        width: 4px; height: 1px;
        background: var(--cu); flex-shrink: 0;
        margin-top: 11px;
    }
    .price-card.featured .price-features li { color: rgba(244,241,236,.75); }

    .price-cta { width: 100%; text-align: center; justify-content: center; }

    /* ════════════════════════════════════════
       SECTION 5 — PROCESSUS
    ════════════════════════════════════════ */
    #processus {
        padding: 120px 0;
        position: relative;
        overflow: hidden;
    }
    .processus-header {
        text-align: center;
        margin-bottom: 80px;
    }
    .processus-eyebrow {
        font-family: 'VT323', monospace;
        font-size: .75rem; letter-spacing: .35em;
        text-transform: uppercase; color: var(--cu);
        display: block; margin-bottom: 16px;
    }
    .processus-title {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(2.2rem, 4.5vw, 4rem);
        color: var(--tx); letter-spacing: .05em;
        line-height: 1.15; margin-bottom: 18px;
    }
    .processus-title strong { font-weight: 700; font-style: normal; color: var(--cu); }
    .processus-sub {
        font-family: 'Inter', sans-serif;
        font-size: .8rem; letter-spacing: .1em;
        color: rgba(244,241,236,.5);
        max-width: 440px; margin: 0 auto; line-height: 1.8;
    }
    .steps-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
    }
    .steps-grid::before {
        content: '';
        position: absolute;
        top: 48px; left: calc(12.5% + 1px); right: calc(12.5% + 1px);
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(214,160,107,.3) 15%, rgba(214,160,107,.3) 85%, transparent);
        z-index: 0;
    }
    .proc-step {
        display: flex; flex-direction: column;
        align-items: center; text-align: center;
        padding: 0 20px; position: relative; cursor: default;
    }
    .proc-step:not(:last-child)::after {
        content: '›';
        position: absolute; top: 36px; right: -8px;
        font-family: 'VT323', monospace; font-size: 1.8rem;
        color: rgba(214,160,107,.2); z-index: 2;
        transform: translateY(-50%);
    }
    .proc-num-wrap { position: relative; z-index: 1; margin-bottom: 28px; }
    .proc-num {
        width: 96px; height: 96px;
        border: 1px solid rgba(214,160,107,.25);
        display: flex; align-items: center; justify-content: center;
        background: var(--bg); position: relative;
        transition: border-color .4s, box-shadow .4s;
    }
    .proc-step:hover .proc-num {
        border-color: rgba(214,160,107,.75);
        box-shadow: 0 0 30px rgba(214,160,107,.12), inset 0 0 20px rgba(214,160,107,.05);
    }
    .proc-num::before, .proc-num::after {
        content: ''; position: absolute;
        width: 8px; height: 8px;
        border-color: var(--cu); border-style: solid; opacity: .4;
        transition: opacity .4s;
    }
    .proc-step:hover .proc-num::before,
    .proc-step:hover .proc-num::after { opacity: 1; }
    .proc-num::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
    .proc-num::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
    .proc-index {
        font-family: 'VT323', monospace; font-size: .6rem;
        letter-spacing: .25em; color: rgba(214,160,107,.35);
        position: absolute; top: -22px; left: 50%;
        transform: translateX(-50%); white-space: nowrap;
    }
    .proc-icon { font-size: 2rem; transition: transform .4s; }
    .proc-step:hover .proc-icon { transform: scale(1.15); }
    .proc-tag {
        font-family: 'VT323', monospace; font-size: .65rem;
        letter-spacing: .22em; text-transform: uppercase;
        color: var(--cu); margin-bottom: 8px; opacity: .7;
    }
    .proc-name {
        font-family: 'Cormorant Garamond', serif; font-weight: 700;
        font-size: clamp(1rem, 1.6vw, 1.4rem);
        color: var(--tx); letter-spacing: .04em;
        margin-bottom: 12px; transition: color .4s;
    }
    .proc-step:hover .proc-name { color: var(--cu); }
    .proc-desc {
        font-family: 'Inter', sans-serif; font-size: .7rem;
        line-height: 1.8; color: rgba(244,241,236,.45);
        max-width: 180px; margin: 0 auto;
    }
    .proc-footer {
        margin-top: 80px;
        border-top: 1px solid rgba(214,160,107,.1);
        padding-top: 40px;
        display: flex; align-items: center;
        justify-content: center; gap: 0;
        max-width: 1000px; margin: 80px auto 0;
    }
    .pf-item {
        display: flex; align-items: center; gap: 14px;
        flex: 1; min-width: 160px; justify-content: center;
    }
    .pf-icon { font-size: 1.3rem; opacity: .7; }
    .pf-text strong {
        font-family: 'Cormorant Garamond', serif;
        font-size: .95rem; color: var(--tx);
        display: block; letter-spacing: .06em;
    }
    .pf-text span {
        font-family: 'Inter', sans-serif;
        font-size: .6rem; color: rgba(244,241,236,.4); letter-spacing: .1em;
    }
    .pf-sep { width: 1px; height: 40px; background: rgba(214,160,107,.12); flex-shrink: 0; }

    /* ════════════════════════════════════════
       SECTION 6 — FAQ
    ════════════════════════════════════════ */
    #faq { padding: 120px 0; }
    .faq-header {
        display: flex; align-items: flex-end;
        justify-content: space-between; gap: 40px;
        margin-bottom: 64px; flex-wrap: wrap;
    }
    .faq-header-left { flex: 1; min-width: 260px; }
    .faq-eyebrow {
        font-family: 'VT323', monospace;
        font-size: .75rem; letter-spacing: .35em;
        text-transform: uppercase; color: var(--cu);
        display: block; margin-bottom: 16px;
    }
    .faq-title {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(2.2rem, 4.5vw, 3.8rem);
        color: var(--tx); letter-spacing: .04em; line-height: 1.1;
    }
    .faq-title strong { font-weight: 700; font-style: normal; color: var(--cu); }
    .faq-header-right {
        font-family: 'Inter', sans-serif;
        font-size: .75rem; line-height: 1.8;
        color: rgba(244,241,236,.5); max-width: 280px;
    }
    .faq-list {
        display: flex; flex-direction: column;
        border-top: 1px solid rgba(214,160,107,.12);
    }
    .faq-item { border-bottom: 1px solid rgba(214,160,107,.12); overflow: hidden; }
    .faq-question {
        display: flex; align-items: center;
        justify-content: space-between; gap: 24px;
        padding: 28px 0; cursor: pointer; user-select: none;
    }
    .faq-q-num {
        font-family: 'VT323', monospace; font-size: .65rem;
        letter-spacing: .2em; color: rgba(214,160,107,.35);
        flex-shrink: 0; width: 36px;
    }
    .faq-q-text {
        font-family: 'Cormorant Garamond', serif; font-weight: 700;
        font-size: clamp(1rem, 1.6vw, 1.3rem);
        color: var(--tx); letter-spacing: .04em; flex: 1;
        transition: color .3s;
    }
    .faq-question:hover .faq-q-text,
    .faq-item.open .faq-q-text { color: var(--cu); }
    .faq-q-icon {
        font-family: 'VT323', monospace; font-size: 1.6rem;
        color: rgba(214,160,107,.5); flex-shrink: 0;
        width: 28px; text-align: center;
        transition: transform .35s, color .3s; line-height: 1;
    }
    .faq-item.open .faq-q-icon { transform: rotate(45deg); color: var(--cu); }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
    .faq-item.open .faq-answer { max-height: 300px; }
    .faq-answer-inner {
        padding: 0 0 28px 52px;
        font-family: 'Inter', sans-serif; font-size: .78rem;
        line-height: 1.9; color: rgba(244,241,236,.5);
    }
    .faq-answer-inner strong { color: var(--cu); font-weight: 400; }
    .faq-cta {
        margin-top: 56px; padding: 36px 40px;
        border: 1px solid rgba(214,160,107,.2);
        display: flex; align-items: center;
        justify-content: space-between; gap: 24px;
        flex-wrap: wrap; background: rgba(214,160,107,.03);
    }
    .faq-cta-text strong {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(1.2rem, 2vw, 1.6rem);
        color: var(--tx); display: block; margin-bottom: 6px;
    }
    .faq-cta-text span {
        font-family: 'Inter', sans-serif; font-size: .68rem;
        letter-spacing: .1em; color: rgba(244,241,236,.4);
    }

    /* ════════════════════════════════════════
       SECTION 7 — CONTACT
    ════════════════════════════════════════ */
    #contact { background: var(--bg2); }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: start;
    }

    .contact-left h2 { margin-top: 16px; margin-bottom: 28px; }

    .contact-statement {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 1.4rem; line-height: 1.5;
        color: rgba(244,241,236,.6);
        margin-bottom: 52px;
        max-width: 360px;
    }

    .contact-info { display: flex; flex-direction: column; gap: 22px; }

    .ci-item { display: flex; flex-direction: column; gap: 4px; }
    .ci-label {
        font-size: .6rem; letter-spacing: .3em;
        text-transform: uppercase; color: var(--cu);
    }
    .ci-value { font-size: .9rem; color: var(--tx2); text-decoration: none; transition: color .3s; }
    .ci-value:hover { color: var(--tx); }
    .ci-social { display: flex; align-items: center; gap: 7px; }
    .ci-social svg { opacity: .7; transition: opacity .3s; flex-shrink: 0; }
    .ci-social:hover svg { opacity: 1; }

    /* Form */
    .contact-form { display: flex; flex-direction: column; gap: 22px; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    .fg { display: flex; flex-direction: column; gap: 8px; }
    .fg.full { grid-column: 1 / -1; }

    .fg label {
        font-size: .6rem; letter-spacing: .3em;
        text-transform: uppercase; color: var(--tx2);
        font-family: 'Inter', sans-serif;
    }

    input, select, textarea {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(244,241,236,.12);
        padding: 12px 0;
        color: var(--tx);
        font-family: 'Inter', sans-serif;
        font-size: .88rem; font-weight: 300;
        outline: none;
        transition: border-color .3s;
        appearance: none; width: 100%;
    }
    input::placeholder, textarea::placeholder {
        color: rgba(244,241,236,.2);
    }
    input:focus, select:focus, textarea:focus {
        border-color: rgba(214,160,107,.45);
    }
    select { cursor: pointer; }
    select option { background: #111; }
    textarea { resize: none; min-height: 110px; }

    .form-submit { margin-top: 10px; }
    .form-submit .btn { width: 100%; justify-content: center; }

    .form-note {
        font-size: .62rem; letter-spacing: .08em;
        color: rgba(244,241,236,.2); margin-top: 14px;
        text-align: center;
    }

    /* ════════════════════════════════════════
       LIGHTBOX
    ════════════════════════════════════════ */
    #lightbox {
        position: fixed; inset: 0;
        z-index: 9000;
        background: rgba(5,5,5,.92);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: opacity .4s ease, visibility .4s ease;
        cursor: zoom-out;
    }
    #lightbox.open { opacity: 1; visibility: visible; }
    #lightbox img {
        max-width: 90vw; max-height: 88vh;
        object-fit: contain;
        border: 1px solid rgba(244,241,236,.08);
        box-shadow: 0 40px 120px rgba(0,0,0,.8);
        transform: scale(.96);
        transition: transform .4s ease;
    }
    #lightbox.open img { transform: scale(1); }
    #lightbox-close {
        position: absolute; top: 28px; right: 36px;
        font-size: 1.4rem; color: rgba(244,241,236,.5);
        cursor: pointer; line-height: 1;
        transition: color .2s;
    }
    #lightbox-close:hover { color: var(--cu); }
    .proj-frame { cursor: zoom-in; }

    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    footer {
        background: var(--bg);
        border-top: 1px solid var(--br);
        padding: 52px 80px 38px;
    }

    .footer-inner {
        display: flex; align-items: center;
        justify-content: space-between;
        margin-bottom: 42px;
    }

    .footer-phrase {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: 1.1rem; color: rgba(244,241,236,.25);
        max-width: 340px;
    }

    .footer-links { display: flex; gap: 36px; list-style: none; }
    .footer-links a {
        font-size: .7rem; letter-spacing: .14em;
        text-transform: uppercase; color: var(--tx2);
        text-decoration: none; transition: color .3s;
    }
    .footer-links a:hover { color: var(--cu); }

    .footer-bottom {
        border-top: 1px solid var(--br);
        padding-top: 28px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .footer-bottom p {
        font-size: .7rem; color: rgba(244,241,236,.2);
        letter-spacing: .08em;
    }

    /* ════════════════════════════════════════
       KEYFRAMES
    ════════════════════════════════════════ */
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes scrollBlink {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0; }
    }
    @keyframes heroEnter {
        from { opacity:0; transform: translateY(22px); }
        to   { opacity:1; transform: none; }
    }

    .hero-anim-1 { opacity:0; animation: heroEnter .9s .5s ease forwards; }
    .hero-anim-2 { opacity:0; animation: heroEnter 1s .7s ease forwards; }
    .hero-anim-3 { opacity:0; animation: heroEnter 1s .95s ease forwards; }
    .hero-anim-4 { opacity:0; animation: heroEnter 1s 1.2s ease forwards; }

    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */
    /* ── Suppression des cadres ── */

    /* About — supprime bordure + grille + coins du placeholder */
    .about-vz-wrap .vz         { border-color: transparent; background: transparent; }
    .about-vz-wrap .vz::before { display: none; }
    .about-vz-wrap .vz::after  { display: none; }
    .about-vz-wrap .vz-frame   { display: none; }

    /* Projets — supprime bordure + grille + coins de chaque placeholder */
    .proj-visual .vz            { border-color: transparent; background: transparent; }
    .proj-visual .vz::before    { display: none; }
    .proj-visual .vz::after     { display: none; }
    .proj-visual .vz-frame      { display: none; }

    /* Formules — supprime les bordures des cartes */
    .price-card                 { border-color: transparent; }
    .price-card.featured        { border-color: transparent; box-shadow: none; }
    .price-card:hover           { border-color: transparent; }

    @media (max-width: 1100px) {
        nav, nav.sc { padding-left: 44px; padding-right: 44px; }
        .container { padding: 0 44px; }
        section { padding: 110px 0; }
        footer { padding: 44px 44px 32px; }
        .about-grid { gap: 56px; }
        .contact-grid { gap: 60px; }
        .pricing-grid { gap: 16px; }
        .price-card.featured { transform: none; }
    }

    @media (max-width: 860px) {
        nav, nav.sc { padding: 18px 24px; }
        .nav-links { display: none; }
        .container { padding: 0 24px; }
        section { padding: 80px 0; }
        footer { padding: 40px 24px 28px; }
        .hero-content { padding: 0 24px 60px; }
        .about-grid,
        .contact-grid { grid-template-columns: 1fr; gap: 50px; }
        .about-vz-wrap { position: relative; top: 0; }
        .about-img-wrap { height: 400px; }
        .pg { grid-template-columns: 1fr; }
        .proj-full { grid-column: auto; }
        .pricing-grid { grid-template-columns: 1fr; }
        .price-card.featured { transform: none; margin-top: 0; }
        .portfolio-intro { flex-direction: column; align-items: flex-start; gap: 14px; }
        .form-row { grid-template-columns: 1fr; }
        .footer-inner { flex-direction: column; gap: 28px; text-align: center; }
        .footer-links { flex-wrap: wrap; justify-content: center; }
        .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
        .hero-btns { flex-direction: column; }
        .scroll-hint { display: none; }
        .vz-about { height: 400px; }

    }

    /* ── Galerie section ── */
    #galerie { padding: 0 !important; scroll-margin-top: 70px; }
    .gal-title-wrap {
        position: absolute;
        top: 2.5%;
        left: 0; right: 0;
        text-align: center;
        z-index: 10;
        pointer-events: none;
    }
    .gal-title {
        font-family: 'VT323', monospace;
        font-size: clamp(1.8rem, 3vw, 3rem);
        font-weight: 700;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: rgba(180,140,85,.45);
        text-shadow:
            0 -1px 1px rgba(0,0,0,.9),
            0  1px 1px rgba(255,210,130,.15),
            0  2px 6px rgba(0,0,0,.7),
            inset 0 0 0 transparent;
        filter: contrast(1.1);
    }
    #galerie .container { max-width: 100%; padding: 0; min-height: unset; }
    .galerie-wrap {
        position: relative;
        width: 100vw;
        height: 100vh;
    }
    .galerie-bg { position: absolute; inset: 0; }
    .galerie-bg img {
        width: 100%; height: 100%;
        object-fit: cover; object-position: center;
        display: block;
    }
    .gal-frame { position: absolute; overflow: hidden; }
    .gal-frame-inner {
        position: relative;
        width: 100%; height: 100%;
        background: #080604;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 16px;
    }
    .gal-formule-tag {
        position: absolute; top: 8px; right: 10px;
        font-family: 'VT323', monospace;
        font-size: clamp(.55rem, .75vw, .75rem);
        letter-spacing: .1em; text-transform: uppercase;
    }
    .ft-formule   { color: rgba(255,255,255,.7); }
    .ft-elite     { color: #c0392b; }
    .ft-premium   { color: #D6A06B; }
    .ft-essentiel { color: #27ae60; }
    .gal-proj-title {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(.8rem, 1.2vw, 1.1rem);
        color: rgba(214,160,107,.6);
        letter-spacing: .1em;
        text-align: center;
        padding: 0 12px;
    }
    .gal-btn {
        font-family: 'VT323', monospace;
        font-size: clamp(.9rem, 1.4vw, 1.2rem);
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #D6A06B;
        background: transparent;
        border: 1px solid rgba(214,160,107,.45);
        padding: 8px 22px;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(214,160,107,.12), inset 0 0 8px rgba(214,160,107,.06);
        transition: background .3s, box-shadow .3s;
    }
    .gal-btn:hover {
        background: rgba(214,160,107,.08);
        box-shadow: 0 0 16px rgba(214,160,107,.25), inset 0 0 12px rgba(214,160,107,.1);
    }
    @keyframes gal-shake {
        0%,100% { transform: translateX(0); }
        2%      { transform: translateX(-6px); }
        4%      { transform: translateX(6px); }
        6%      { transform: translateX(-5px); }
        8%      { transform: translateX(5px); }
        10%     { transform: translateX(-3px); }
        12%     { transform: translateX(3px); }
        14%     { transform: translateX(-1px); }
        16%     { transform: translateX(0); }
    }
    .gal-btn { animation: gal-shake 12s ease var(--shk-delay, 0s) infinite; }
    .gal-frame-center { top: 32.1%; left: 37.2%; width: 24%; height: 39.9%; }
    .gal-frame-right  { top: 27.8%; left: 69.7%; width: 17.8%; height: 24.5%; }
    .gal-frame-left   { top: 27.8%; left: 12%; width: 17.3%; height: 24.5%; }
    .gal-frame-br     { top: 60.9%; left: 67.2%; width: 9.8%; height: 15.1%; }
    .gal-frame-br .gal-proj-title  { font-size: clamp(.7rem, 1vw, 1rem); }
    .gal-frame-br .gal-btn         { font-size: clamp(.8rem, 1.1vw, 1.1rem); padding: 4px 10px; letter-spacing: .1em; }
    .gal-frame-br .gal-formule-tag,
    .gal-frame-br2 .gal-formule-tag,
    .gal-frame-bl .gal-formule-tag { font-size: clamp(.35rem, .5vw, .5rem); }
    .gal-frame-br2    { top: 60.9%; left: 80.4%; width: 9.5%; height: 15.1%; }
    .gal-frame-br2 .gal-proj-title { font-size: clamp(.7rem, 1vw, 1rem); }
    .gal-frame-br2 .gal-btn        { font-size: clamp(.8rem, 1.1vw, 1.1rem); padding: 4px 10px; letter-spacing: .1em; }
    .gal-frame-bl     { top: 61.7%; left: 13.9%; width: 13%; height: 14.3%; }
    .gal-frame-bl .gal-proj-title  { font-size: clamp(.7rem, 1vw, 1rem); }
    .gal-frame-bl .gal-btn         { font-size: clamp(.8rem, 1.1vw, 1.1rem); padding: 4px 10px; letter-spacing: .1em; }

    #gal-carousel {
        position: fixed; inset: 0; z-index: 600;
        background: rgba(5,3,2,.95);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: opacity .35s, visibility .35s;
    }
    #gal-carousel.open { opacity: 1; visibility: visible; }
    .gal-carousel-close {
        position: absolute; top: 28px; right: 36px;
        font-family: 'VT323', monospace; font-size: 2rem;
        color: rgba(214,160,107,.7); cursor: pointer;
        transition: color .2s;
    }
    .gal-carousel-close:hover { color: #D6A06B; }
    .gal-carousel-title {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic; font-weight: 300;
        font-size: clamp(1rem, 1.8vw, 1.5rem);
        color: rgba(214,160,107,.7);
        letter-spacing: .12em;
        margin-bottom: 24px;
    }
    .gal-carousel-track {
        position: relative;
        width: min(80vw, 1100px);
        aspect-ratio: 16/9;
        max-height: 65vh;
        overflow: visible;
    }
    .gal-carousel-track img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity .5s ease;
    }
    .gal-carousel-track img.active { opacity: 1; }
    .gal-carousel-nav {
        display: flex; align-items: center; justify-content: center;
        margin-top: 32px;
        flex-shrink: 0;
    }
    .gal-carousel-arrow {
        font-family: 'VT323', monospace;
        font-size: 2rem;
        color: rgba(214,160,107,.6);
        background: rgba(5,3,2,.5);
        border: 1px solid rgba(214,160,107,.3);
        padding: 4px 18px;
        cursor: pointer;
        transition: color .2s, border-color .2s, background .2s;
        position: absolute; top: 50%; transform: translateY(-50%);
        z-index: 10;
    }
    .gal-arrow-left  { left: -60px; }
    .gal-arrow-right { right: -60px; }
    .gal-carousel-arrow:hover { color: #D6A06B; border-color: rgba(214,160,107,.7); background: rgba(5,3,2,.8); }
    .gal-voir-site-btn {
        font-family: 'VT323', monospace;
        font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase;
        color: var(--cu); text-decoration: none;
        border: 1px solid rgba(214,160,107,.4);
        padding: 8px 28px;
        box-shadow: 0 0 10px rgba(214,160,107,.1);
        transition: box-shadow .3s, border-color .3s, color .3s;
    }
    .gal-voir-site-btn:hover { color: #fff; border-color: rgba(214,160,107,.8); box-shadow: 0 0 18px rgba(214,160,107,.25); }
    .gal-carousel-counter {
        font-family: 'VT323', monospace;
        font-size: 1.2rem;
        letter-spacing: .18em;
        color: rgba(214,160,107,.5);
        min-width: 60px;
        text-align: center;
    }

/* gal-construction */
#gal-construction.open { display:flex !important; }

/* Éléments mobile galerie — cachés sur desktop */
.gal-mobile-grid { display: none; }
.gal-m-header { display: none; }
.gal-m-carousel { display: none; }

/* ════════════════════════════════════════
   RESPONSIVE MOBILE — breakpoint 768px
════════════════════════════════════════ */

/* Curseur désactivé sur touch */
@media (hover: none) {
    body { cursor: auto; }
    #cursor, #cursor-ring { display: none; }
}

/* ── Burger ── */
.nav-burger {
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 40px; height: 40px;
    background: none; border: none; cursor: pointer;
    z-index: 600; padding: 4px;
}
.nav-burger span {
    display: block; width: 24px; height: 1px;
    background: var(--cu);
    transition: transform .35s, opacity .25s, width .3s;
    transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Overlay menu mobile */
#nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 489;
}
#nav-overlay.open { display: block; }

/* Éléments visibles uniquement sur mobile — cachés sur desktop */
.formule-m-dots { display: none; }
.formule-m-nav  { display: none; }
.formule-m-area { display: none; }
#wa-float          { display: none; }
.formule-m-header  { display: none; }
.faq-m-header      { display: none; }
#contact-info-m    { display: none; }
.gal-m-swipe-hint  { display: none; }
.formule-card-icon { display: none; }
.formule-badge     { display: none; }

@media (max-width: 768px) {

    /* ── NAV ── */
    nav, nav.sc { padding: 16px 20px; }
    /* Supprime le backdrop-filter sur mobile — évite le stacking context qui piège position:fixed */
    nav.sc { backdrop-filter: none !important; background: rgba(5,3,2,.95) !important; }
    .nav-brand-name { display: block; font-size: .85rem; }
    .nav-brand-name em { display: none; }
    .nav-btn { display: none; }
    .nav-burger { display: flex; }

    .nav-links {
        display: flex !important;
        position: fixed;
        top: 0; bottom: 0;
        right: 0;
        left: 25vw;
        width: 75vw;
        background: #050302 !important;
        backdrop-filter: none !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding-top: 80px;
        z-index: 490;
        transform: translateX(75vw);
        visibility: hidden;
        transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
        pointer-events: none;
        box-shadow: none;
        border-left: 1px solid rgba(214,160,107,.12);
    }
    .nav-links.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    .nav-links li {
        list-style: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .nav-links li:first-child { border-top: 1px solid rgba(255,255,255,.07); }
    .nav-links a {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: .8rem;
        font-weight: 400;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(244,241,236,.75);
        padding: 18px 28px;
        border: none;
        box-shadow: none;
        background: none;
    }
    .nav-links a::before, .nav-links a::after { display: none; }
    .nav-links a:hover { color: var(--cu); background: rgba(255,255,255,.03); }
    /* CTA dans le menu mobile */
    .nav-links::after {
        content: 'Travailler ensemble →';
        font-family: 'VT323', monospace;
        font-size: .9rem; letter-spacing: .2em;
        text-transform: uppercase; color: var(--cu);
        border-top: 1px solid rgba(214,160,107,.25);
        padding: 20px 28px;
        margin-top: auto;
        opacity: .8;
    }

    /* ── HERO ── */
    .hero-content { padding: 0 20px 20px; max-width: 100%; z-index: 3; }
    .hero-content .label { display: none; }
    .hero-content .display { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    .hero-sub { font-size: .75rem; margin-bottom: 32px; }
    .hero-btns { flex-direction: column; gap: 12px; }
    .hero-btns .btn { width: 100%; justify-content: center; padding-left: 18px; padding-right: 18px; }
    .hero-btns .btn-fill { display: none; }
    .rock-float { display: none; }
    .hero-img-wrap { display: none; }
    #hero {
        background: #050302;
        overflow: hidden;
    }
    /* Image animée via ::before — GPU transform, pas de jank */
    #hero::before {
        content: '';
        position: absolute;
        top: -8%; left: -8%; right: -8%; bottom: -8%;
        z-index: 0;
        background-image: url('Photo/Accueil%20mobile.webp');
        background-size: cover;
        background-position: center top;
        will-change: transform;
        animation:
            moonRise      10s ease-out            forwards,
            moonOscillate 16s ease-in-out 10s     infinite;
    }
    @keyframes moonRise {
        from { transform: translate(0px,  0px)  scale(1);    }
        to   { transform: translate(0px, -8px)  scale(1.03); }
    }
    @keyframes moonOscillate {
        0%   { transform: translate(0px,  -8px) scale(1.03);  }
        25%  { transform: translate(-4px, -9px) scale(1.03);  }
        50%  { transform: translate(0px,  -8px) scale(1.032); }
        75%  { transform: translate(4px,  -9px) scale(1.03);  }
        100% { transform: translate(0px,  -8px) scale(1.03);  }
    }
    /* Overlay sombre */
    #hero::after {
        content: '';
        position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 35%,
            rgba(5,3,2,.55) 60%,
            rgba(5,3,2,.88) 78%,
            rgba(5,3,2,.97) 100%
        );
    }
    .hero-whatsapp {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        width: 100%;
        padding: 14px 34px;
        border: 1px solid rgba(214,160,107,.38);
        color: var(--cu);
        font-family: 'VT323', monospace;
        font-size: 1.2rem; letter-spacing: .18em; text-transform: uppercase;
        text-decoration: none; cursor: pointer;
        background: transparent;
        box-shadow: 0 0 8px rgba(214,160,107,.15), inset 0 0 8px rgba(214,160,107,.06);
        transition: border-color .4s, background .4s;
        margin-top: 0;
    }
    .hero-whatsapp svg { flex-shrink: 0; fill: var(--cu); }
    .hero-whatsapp:hover { border-color: rgba(214,160,107,.68); }
    .scroll-hint { display: none; }

    /* ── CONTAINER & SECTIONS ── */
    .container { padding: 0 20px; }
    section { padding: 72px 0; }

    /* ── À PROPOS ── */
    .about-grid { grid-template-columns: 1fr; gap: 36px; }
    .about-vz-wrap { display: none; }
    .about-quote { font-size: clamp(1.4rem, 6vw, 2rem); }

    /* ── GALERIE ── */
    #galerie { padding: 0 !important; }
    .galerie-wrap {
        position: relative;
        height: 100vh;
        overflow: hidden;
        display: block;
    }
    .galerie-bg {
        position: absolute; inset: 0;
        overflow: hidden;
    }
    .galerie-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .galerie-bg::after {
        content: '';
        position: absolute; inset: 0;
        background:
            linear-gradient(to bottom, rgba(5,3,2,.55) 0%, rgba(5,3,2,.1) 30%, rgba(5,3,2,.1) 55%, rgba(5,3,2,.75) 100%);
    }
    .gal-title-wrap { display: none; }
    .gal-m-header {
        display: block;
        position: absolute; top: 7%; left: 0; right: 0;
        text-align: center; pointer-events: none; padding: 0 24px;
        z-index: 2;
    }
    .gal-m-htitle {
        display: block;
        font-family: 'VT323', monospace;
        font-size: clamp(2rem, 9vw, 3rem);
        letter-spacing: .22em; text-transform: uppercase;
        color: var(--cu);
    }
    .gal-m-hsub {
        font-size: .62rem; letter-spacing: .06em; line-height: 1.7;
        color: rgba(244,241,236,.45);
        margin-top: 6px;
    }

    /* Frames desktop — cachés */
    .gal-frame-center,
    .gal-frame-right,
    .gal-frame-left,
    .gal-frame-br,
    .gal-frame-br2,
    .gal-frame-bl { display: none !important; }
    .gal-mobile-grid { display: none; }

    /* ── Carousel cinéma sur le podium ── */
    .gal-m-carousel {
        display: block;
        position: absolute;
        top: 38%; left: 0; right: 0;
        z-index: 3;
    }
    .gal-m-clip {
        overflow: hidden;
        padding-bottom: 24px;
    }
    .gal-m-track {
        position: relative;
        height: 240px;
    }
    .gal-m-card {
        position: absolute;
        width: 55vw;
        left: 50%;
        transform: translateX(-50%);
        display: flex; flex-direction: column;
        cursor: pointer;
        transition: transform .45s cubic-bezier(.25,.46,.45,.94), opacity .45s, filter .45s;
        will-change: transform, opacity;
    }

    /* L'écran */
    .gal-m-screen {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 6px 6px 0 0;
        border: 1px solid rgba(214,160,107,.35);
        border-bottom: none;
        background: #0a0806;
    }
    .gal-m-screen img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
    }
    .gal-m-screen-glow {
        position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
        background: linear-gradient(to top, rgba(214,160,107,.12), transparent);
        pointer-events: none;
    }
    .gal-m-screen--empty {
        display: flex; align-items: center; justify-content: center;
    }
    .gal-m-screen--empty span {
        font-family: 'VT323', monospace;
        font-size: 1rem; letter-spacing: .25em; text-transform: uppercase;
        color: rgba(214,160,107,.3);
    }

    /* Halo sous l'écran — effet projecteur */
    .gal-m-screen::after {
        content: '';
        position: absolute; inset: 0;
        box-shadow: inset 0 0 40px rgba(214,160,107,.08);
        pointer-events: none;
    }

    /* Bandeau info sous l'écran */
    .gal-m-info {
        display: flex; flex-direction: column; gap: 6px;
        padding: 14px 16px 18px;
        background: rgba(8,5,2,.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(214,160,107,.25);
        border-top: none;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(214,160,107,.06);
    }
    .gal-m-tag {
        font-size: .46rem; letter-spacing: .24em; text-transform: uppercase;
    }
    .gal-m-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.1rem; font-style: italic; line-height: 1.2;
        color: var(--tx);
    }
    .gal-m-cta {
        font-family: 'VT323', monospace;
        font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
        color: var(--cu); margin-top: 2px;
    }

    /* Hint glisser */
    .gal-m-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
        font-family: 'VT323', monospace;
        font-size: .65rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: rgba(214,160,107,.4);
        animation: swipeHint 2s ease-in-out infinite;
    }
    @keyframes swipeHint {
        0%, 100% { opacity: .4; transform: translateX(0); }
        50%       { opacity: .75; transform: translateX(4px); }
    }

    /* Points de navigation */
    .gal-m-dots {
        display: flex; justify-content: center; gap: 6px;
        margin-top: 16px;
    }
    .gal-m-dot {
        width: 18px; height: 1px;
        background: rgba(214,160,107,.25);
        transition: background .3s, width .3s;
    }
    .gal-m-dot.active {
        background: var(--cu); width: 28px;
    }
    .gal-mobile-card:hover { border-color: rgba(214,160,107,.5); background: rgba(214,160,107,.08); }
    .gal-mobile-card span:first-child { font-family: 'VT323', monospace; font-size: .65rem; letter-spacing: .15em; font-style: normal; text-transform: uppercase; }
    .gal-mobile-cta { font-family: 'VT323', monospace; font-size: .85rem; letter-spacing: .15em; color: var(--cu); font-style: normal; margin-top: auto; }

    /* ── AVIS desktop — caché sur mobile ── */
    #portfolio { display: none; }

    /* ── AVIS MOBILE — pile de cartes ── */
    #avisMobile {
        position: relative;
        background: #050302;
        overflow: hidden;
        min-height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        padding: 72px 24px 80px;
    }
    .avis-m-atmo {
        position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(ellipse 90% 55% at 50% 100%, rgba(214,160,107,.07) 0%, transparent 65%),
            radial-gradient(ellipse 50% 40% at 15% 60%, rgba(200,130,50,.03) 0%, transparent 55%),
            radial-gradient(ellipse 50% 40% at 85% 55%, rgba(200,130,50,.03) 0%, transparent 55%);
    }
    .avis-m-header {
        position: relative; z-index: 2;
        text-align: center; margin-bottom: 48px;
    }
    .avis-m-eyebrow {
        display: block;
        font-size: .52rem; letter-spacing: .3em; text-transform: uppercase;
        color: rgba(214,160,107,.6); margin-bottom: 10px;
    }
    .avis-m-title {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-size: 3.2rem; font-weight: 300; letter-spacing: .35em;
        color: var(--cu); line-height: 1;
        margin-bottom: 10px;
    }
    .avis-m-sub {
        font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
        color: rgba(244,241,236,.3);
    }

    /* Carousel infini */
    #avisMobile {
        padding: 72px 0 80px;
    }
    .avis-m-header {
        padding: 0 24px;
    }
    .avis-m-rail {
        position: relative; z-index: 2;
        width: 100%;
        overflow: hidden;
        margin-top: 36px;
    }
    .avis-m-rail::before,
    .avis-m-rail::after {
        content: '';
        position: absolute; top: 0; bottom: 0; width: 40px; z-index: 3;
        pointer-events: none;
    }
    .avis-m-rail::before {
        left: 0;
        background: linear-gradient(to right, #050302 0%, transparent 100%);
    }
    .avis-m-rail::after {
        right: 0;
        background: linear-gradient(to left, #050302 0%, transparent 100%);
    }
    .avis-m-track {
        display: flex;
        width: max-content;
        animation: avisLoop 28s linear infinite;
        will-change: transform;
    }
    @keyframes avisLoop {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-4 * (76vw + 18px))); }
    }
    .avis-m-card {
        flex-shrink: 0;
        width: 76vw;
        margin-right: 18px;
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 28px 22px 24px;
        background: rgba(12,8,4,.92);
        border: 1px solid rgba(214,160,107,.22);
        box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(214,160,107,.06);
    }
    .avis-m-stars {
        color: var(--cu); font-size: .88rem; letter-spacing: 4px;
    }
    .avis-m-quote {
        font-family: 'Cormorant Garamond', serif; font-style: italic;
        font-size: 1.05rem; line-height: 1.55;
        color: rgba(244,241,236,.88);
        flex: 1; display: flex; align-items: center;
        margin: 14px 0;
    }
    .avis-m-author {
        display: block;
        font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
        color: var(--cu);
    }
    .avis-m-role {
        display: block;
        font-size: .52rem; letter-spacing: .08em;
        color: rgba(244,241,236,.3); margin-top: 2px;
    }

    /* ── FORMULES ── */
    #formules {
        position: relative !important;
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }
    #formules .container { height: 100vh; padding: 40px 0 80px; overflow: hidden; }
    .formules-cards {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        height: auto !important; width: auto !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    /* Toutes les cartes cachées sauf active */
    .formule-card {
        display: none !important;
        width: 55vw !important;
        margin: 0 auto;
        scroll-snap-align: unset;
    }
    .formule-card.fm-active {
        display: flex !important;
    }
    /* Zone carousel + flèches — superposée à la carte */
    .formule-m-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 8px;
        margin-top: -240px;
        position: relative;
        z-index: 10;
        pointer-events: none;
    }
    /* Dots seuls */
    .formule-m-nav {
        display: flex;
        justify-content: center;
        margin-top: 260px;
    }
    .formule-m-btn {
        background: none;
        border: 1px solid rgba(214,160,107,.35);
        color: var(--cu);
        font-size: 1.1rem;
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
        user-select: none;
        transition: border-color .3s, background .3s;
        pointer-events: all;
    }
    .formule-m-btn:active { background: rgba(214,160,107,.1); }
    .formule-m-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .formule-m-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(214,160,107,.25);
        transition: background .3s, transform .3s;
    }
    .formule-m-dot.active {
        background: var(--cu);
        transform: scale(1.3);
    }
    /* ── Cartes Formules style référence ── */
    .formule-card {
        flex: 0 0 55vw !important;
        width: 55vw !important;
        height: 470px;
        min-height: 470px;
        scroll-snap-align: center;
        padding: 0;
        border-radius: 14px;
        border: 1px solid rgba(214,160,107,.65);
        background: rgba(8,5,2,.9);
        box-shadow: 0 0 36px rgba(214,160,107,.18), inset 0 0 18px rgba(214,160,107,.04);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .formule-card--featured {
        border-color: rgba(214,160,107,.65);
        box-shadow: 0 0 36px rgba(214,160,107,.18), inset 0 0 18px rgba(214,160,107,.04);
    }
    .formule-card::before { display: none; }
    .formule-card-icon {
        display: flex; align-items: center; justify-content: center;
        width: 48px; height: 48px;
        border: 1px solid rgba(214,160,107,.42);
        border-radius: 50%;
        font-size: 1.4rem;
        color: var(--cu);
        margin: 16px auto 8px;
        flex-shrink: 0;
    }
    .formule-tier {
        font-size: .75rem; letter-spacing: .22em;
        font-weight: 400; text-transform: uppercase;
        color: var(--cu);
        margin-bottom: 8px;
        padding: 0 14px;
    }
    .formule-price {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.6rem; font-weight: 300; line-height: 1;
        color: var(--tx);
        margin-bottom: 4px;
        padding: 0 14px;
    }
    .formule-price span { font-size: 1.2rem; color: var(--cu); }
    .formule-price-alt {
        font-size: .58rem;
        color: rgba(244,241,236,.45);
        margin-bottom: 4px;
        padding: 0 14px;
    }
    .formule-engagement {
        font-size: .44rem; letter-spacing: .12em; text-transform: uppercase;
        color: rgba(214,160,107,.45);
        margin-bottom: 10px;
        padding: 0 14px;
    }
    .formule-list {
        width: 100%;
        padding: 10px 14px;
        border-top: 1px solid rgba(214,160,107,.12);
        text-align: left;
        gap: 6px;
    }
    .formule-list li {
        color: rgba(244,241,236,.78);
        font-size: .6rem;
        padding-left: 14px;
    }
    .formule-list li::before {
        content: '✓';
        color: var(--cu);
        font-size: .65rem;
    }
    .formule-badge {
        display: block;
        font-size: .52rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--cu);
        border: 1px solid rgba(214,160,107,.35);
        border-radius: 20px;
        padding: 4px 10px;
        margin: 8px 14px 10px;
        background: rgba(214,160,107,.07);
    }
    .formule-card .btn {
        width: 100%; margin-top: auto;
        padding: 10px 14px;
        border-radius: 0;
        border-left: none; border-right: none; border-bottom: none;
        border-top: 1px solid rgba(214,160,107,.3);
        background: rgba(214,160,107,.1);
        font-size: .8rem; letter-spacing: .2em;
        justify-content: center;
    }
    .formule-card--featured .btn {
        background: rgba(214,160,107,.1);
    }
    .formules-contact-hint {
        display: none !important;
        text-align: center; width: 100%;
    }

    /* ── PROCESSUS ── */
    #processus { padding: 40px 0 100px; }
    .proc-footer {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        align-items: center;
        padding: 0;
        margin-top: 24px;
        border-top: 1px solid rgba(214,160,107,.25);
        padding-top: 20px;
    }
    /* Masque Livraison rapide (1er) et Révisions incluses (3e) */
    .proc-footer .pf-item:nth-child(1),
    .proc-footer .pf-item:nth-child(3) { display: none; }
    .proc-footer .pf-sep { display: none; }
    .proc-footer .pf-item:nth-child(5) {
        border-right: 1px solid rgba(214,160,107,.25);
        padding-right: 20px;
        margin-right: 20px;
    }
    .steps-grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
    .steps-grid::before { display: none; }
    .proc-step:not(:last-child)::after { display: none; }
    .proc-num { width: 72px; height: 72px; }
    .pf-sep { display: none; }

    /* ── FAQ ── */
    #faq {
        padding: 40px 0 60px;
        position: relative;
        background: none;
    }
    #faq::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url('Photo/FAQ%20mobile.webp');
        background-size: cover;
        background-position: center top;
    }
    #faq::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(5,3,2,.82);
    }
    #faq .container { position: relative; z-index: 2; }

    /* Header desktop caché, header mobile visible */
    .faq-header { display: none; }
    .faq-m-header {
        display: block;
        text-align: center;
        padding: 0 24px 28px;
    }
    .faq-m-eyebrow {
        display: block;
        font-family: 'VT323', monospace;
        font-size: .7rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--cu);
        opacity: .8;
        margin-bottom: 6px;
    }
    .faq-m-diamond {
        font-size: .55rem;
        color: var(--cu);
        opacity: .6;
        margin-bottom: 4px;
    }
    .faq-m-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 5.5rem;
        font-weight: 700;
        letter-spacing: .08em;
        color: var(--cu);
        line-height: 1;
        margin-bottom: 14px;
    }
    .faq-m-sub {
        font-size: .65rem;
        color: rgba(244,241,236,.65);
        line-height: 1.75;
        letter-spacing: .03em;
    }

    /* Items FAQ — cadres */
    .faq-list { border-top: none; display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
    .faq-item {
        border: 1px solid rgba(214,160,107,.35);
        border-top: 1px solid rgba(214,160,107,.35);
        border-radius: 4px;
        background: rgba(8,5,2,.75);
        overflow: hidden;
    }
    .faq-question { padding: 14px 16px; gap: 10px; }
    .faq-q-num { display: none; }
    .faq-q-text {
        font-family: 'Inter', sans-serif;
        font-size: .65rem;
        font-weight: 400;
        letter-spacing: .02em;
        color: var(--tx);
        flex: 1;
        text-align: left;
    }
    .faq-q-icon { font-size: 1.2rem; color: var(--cu); }
    .faq-answer-inner {
        padding: 0 16px 14px;
        font-size: .6rem;
        line-height: 1.75;
        color: rgba(244,241,236,.55);
        border-top: 1px solid rgba(214,160,107,.15);
    }

    /* CTA bas */
    .faq-cta {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 16px 20px 0;
        background: none;
        border: none;
    }
    .faq-cta::before { display: none; }
    .faq-cta-text strong {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: .65rem;
        font-weight: 400;
        color: var(--tx);
        margin-bottom: 4px;
    }
    .faq-cta-text span { display: none; }
    .faq-cta .btn {
        font-size: .7rem;
        letter-spacing: .2em;
        padding: 0;
        background: none;
        border: none;
        color: var(--cu);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ── INFOS CONTACT BAS DE PAGE MOBILE ── */
    #contact-info-m {
        display: block;
        background: #050302;
        border-top: 1px solid rgba(214,160,107,.12);
        padding: 32px 24px;
    }
    .cim-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(214,160,107,.08);
    }
    .cim-item:last-child { border-bottom: none; }
    .cim-label {
        font-family: 'VT323', monospace;
        font-size: .58rem;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--cu);
        opacity: .6;
    }
    .cim-value {
        font-family: 'Inter', sans-serif;
        font-size: .68rem;
        color: rgba(244,241,236,.6);
        text-decoration: none;
        letter-spacing: .02em;
    }
    .cim-socials { display: flex; gap: 24px; align-items: center; margin-top: 4px; }
    .cim-social-icon { color: var(--cu); display: flex; align-items: center; opacity: .85; }
    .cim-social-icon:active { opacity: 1; }

    /* ── CONTACT ── */
    #contact { background: #050302; }
    #contact .sec-bg { display: none; }
    #contact::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(ellipse 80% 50% at 50% 0%, rgba(214,160,107,.13) 0%, transparent 65%),
            radial-gradient(ellipse 60% 40% at 10% 50%, rgba(214,160,107,.06) 0%, transparent 55%),
            radial-gradient(ellipse 60% 40% at 90% 50%, rgba(214,160,107,.06) 0%, transparent 55%);
        pointer-events: none;
    }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-info { display: none; }
    .contact-statement { font-size: 1.1rem; margin-bottom: 32px; }
    .form-row { grid-template-columns: 1fr; }

    /* ── CAROUSEL ── */
    .gal-carousel-track { width: 95vw; }
    .gal-arrow-left  { left: 4px; }
    .gal-arrow-right { right: 4px; }
    .gal-carousel-arrow { padding: 4px 12px; font-size: 1.6rem; }

    /* ── FOOTER ── */
    footer { padding: 36px 20px 24px; }

    /* ── COOKIE BANNER ── */
    #cookie-banner { padding: 16px 20px; }

    /* ── FLOAT BTN ── */
    #float-btn { display: none !important; }

    /* ── HEADER FORMULES MOBILE ── */
    .formule-m-header {
        display: block;
        text-align: center;
        padding: 0 20px 32px;
    }
    .formule-m-eyebrow {
        font-size: .55rem;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--cu);
        opacity: .7;
        margin-bottom: 12px;
    }
    .formule-m-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.9rem;
        font-weight: 600;
        letter-spacing: .12em;
        line-height: 1.15;
        color: var(--tx);
        text-transform: uppercase;
        margin-bottom: 12px;
    }
    .formule-m-sub {
        font-size: .62rem;
        letter-spacing: .08em;
        color: rgba(244,241,236,.45);
        line-height: 1.7;
    }

    /* ── WHATSAPP FLOTTANT MOBILE ── */
    #wa-float {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 28px;
        right: 20px;
        z-index: 800;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--cu);
        color: #050302;
        box-shadow: 0 4px 18px rgba(214,160,107,.45);
        text-decoration: none;
        transition: transform .2s, box-shadow .2s;
    }
    #wa-float:active {
        transform: scale(.93);
        box-shadow: 0 2px 10px rgba(214,160,107,.3);
    }

    /* ── POURQUOI SYB LABS ── */
    #pourquoi {
        position: relative;
        background: #050302;
        overflow: hidden;
        padding: 72px 24px 80px;
    }
    .pourquoi-atmo {
        position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(ellipse 90% 55% at 50% 100%, rgba(214,160,107,.18) 0%, rgba(180,110,40,.06) 45%, transparent 70%),
            radial-gradient(ellipse 60% 40% at 10% 50%, rgba(200,130,50,.06) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 90% 40%, rgba(200,130,50,.06) 0%, transparent 60%);
    }
    .pourquoi-inner { position: relative; z-index: 1; }
    .pourquoi-eyebrow {
        display: block;
        font-size: .52rem; letter-spacing: .35em; text-transform: uppercase;
        color: var(--cu); margin-bottom: 14px;
    }
    .pourquoi-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.6rem; font-weight: 300; line-height: 1.1;
        color: var(--tx); margin-bottom: 52px;
    }
    .pourquoi-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .pourquoi-item {
        padding: 24px 20px;
        border: 1px solid rgba(214,160,107,.22);
        background: rgba(12,8,4,.6);
        box-shadow: 0 0 20px rgba(0,0,0,.4), inset 0 0 12px rgba(214,160,107,.03);
    }
    .pourquoi-item-title {
        display: block;
        font-family: 'Inter', sans-serif; font-weight: 500;
        font-size: .82rem; letter-spacing: .04em;
        color: var(--cu); margin-bottom: 10px;
    }
    .pourquoi-item-text {
        font-size: .72rem; line-height: 1.8;
        color: rgba(244,241,236,.55);
    }
}

/* Sections mobile-only — cachées sur desktop */
.m-section  { display: none; }
.hero-m-img { display: none; }

@media (max-width: 768px) {
    .m-section { display: block; }
}

/* ── Petits écrans (iPhone SE, vieux Android ≤ 375px) ── */
@media (max-width: 375px) {
    .container { padding-left: 16px; padding-right: 16px; }

    /* Hero */
    .hero-content { padding: 0 16px 20px; }
    .hero-content .display { font-size: 1.35rem; }

    /* FAQ — titre décoratif géant */
    .faq-m-title { font-size: 4rem; }
    .faq-m-header { padding: 0 16px 20px; }

    /* Formules */
    .formule-m-header { padding: 0 16px 16px; }
    .formule-m-title { font-size: 1.55rem; letter-spacing: .08em; }
    .formule-card { padding: 20px 16px; }

    /* Contact info */
    #contact-info-m { padding: 32px 16px; }
    .cim-value { font-size: .75rem; }

    /* Nav burger — menu moins large pour laisser de l'espace */
    .nav-links { left: 20vw; width: 80vw; transform: translateX(80vw); }
    .nav-links.open { transform: translateX(0); }
}