/* ==============================================
   WEBSTERDESIGN — Design System
   Theme: Crème + Brun/Taupe accent
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --bg-primary:     #F5F0E8;
    --bg-secondary:   #EDE7DB;
    --bg-card:        #EDE7DB;
    --bg-elevated:    #FFFFFF;

    --text-primary:   #2C1810;
    --text-secondary: #5E4B3C;
    --text-muted:     #9C8B7A;

    --accent:         #8B7355;   /* taupe */
    --accent-hover:   #6F5A42;   /* taupe foncé */
    --accent-subtle:  rgba(139, 115, 85, 0.10);
    --accent-glow:    rgba(139, 115, 85, 0.28);
    --accent-gradient: linear-gradient(135deg, #A98F6F 0%, #8B7355 50%, #6B563E 100%); /* taupe clair → taupe → brun */

    /* CTA (palette) : primaire brun foncé, secondaire blanc */
    --cta-primary:       #2C1810;
    --cta-primary-text:  #F5F0E8;
    --cta-secondary:     #FFFFFF;
    --cta-secondary-text:#2C1810;

    --border:         rgba(44, 24, 16, 0.08);
    --border-hover:   rgba(44, 24, 16, 0.20);

    --danger:         #ef4444;
    --success:        #10b981;

    --font-display:   'Montserrat', system-ui, sans-serif;
    --font-body:      'Inter', system-ui, sans-serif;

    --nav-height:     72px;
    --section-pad:    clamp(60px, 10vw, 120px);
    --container:      1200px;
    --gap:            clamp(16px, 3vw, 28px);
    --radius:         12px;
    --radius-sm:      8px;
    --radius-lg:      20px;

    --ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration:       0.4s;

    --shadow-sm:      0 2px 8px rgba(44, 24, 16, 0.08);
    --shadow-md:      0 8px 30px rgba(44, 24, 16, 0.12);
    --shadow-lg:      0 20px 60px rgba(44, 24, 16, 0.18);
    --shadow-glow:    0 0 40px rgba(139, 115, 85, 0.20);
}

/* Scroll progress bar */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #A98F6F, #8B7355, #6B563E);
    box-shadow: 0 0 8px rgba(139, 115, 85, 0.7), 0 0 20px rgba(139, 115, 85, 0.3);
    z-index: 9999;
    transition: width 0.05s linear;
    pointer-events: none;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
    font-family: var(--font-body); font-weight: 400;
    background: var(--bg-primary); color: var(--text-primary);
    line-height: 1.7; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
::selection { background: var(--accent); color: #F5F0E8; }

.container { width: min(var(--container), 100% - 48px); margin: 0 auto; }

/* Section */
.section { padding: var(--section-pad) 0; }
.section__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700; line-height: 1.2; margin-bottom: 16px;
}
.section__subtitle {
    color: var(--text-secondary); font-weight: 400;
    font-size: 0.95rem; max-width: 650px; line-height: 1.8;
}
.section__header { margin-bottom: clamp(28px, 5vw, 44px); }

/* ==============================
   NAVIGATION
   ============================== */
.nav {
    /* Barre flottante : détachée des bords, centrée, en pilule arrondie. */
    position: fixed; top: 16px; left: 0; right: 0;
    margin: 0 auto;
    width: min(calc(var(--container) + 80px), 100% - 32px);
    height: var(--nav-height); z-index: 1000;
    transition: all var(--duration) var(--ease);
    background: rgba(245, 240, 232, 0.8);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: 0 6px 26px rgba(44, 24, 16, 0.07);
}
.nav.scrolled {
    background: rgba(245, 240, 232, 0.92);
    box-shadow: 0 10px 34px rgba(44, 24, 16, 0.13);
}
/* Intro 3D : le menu reste caché tant que l'animation n'est pas terminée */
body.has-intro .nav {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out),
                background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
body.has-intro .nav.nav--revealed {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}
.nav__inner {
    display: flex; align-items: center;
    justify-content: space-between; height: 100%;
}
.nav__logo {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3.5vw, 1.4rem);
    font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap; display: flex; align-items: center; gap: 8px;
    color: var(--text-primary);
}
.nav__logo-icon { display: inline-flex; align-items: center; }
.nav__logo-icon svg { display: block; }
.nav__logo span { color: var(--accent); font-weight: 400; }
.nav__links {
    display: flex; align-items: center;
    gap: 24px; list-style: none;
}
.nav__link {
    font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--duration) var(--ease);
    position: relative; padding: 4px 0;
}
.nav__link::after {
    content: ''; position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background: var(--accent-gradient); border-radius: 1px;
    transition: width var(--duration) var(--ease-out);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { width: 100%; }
.nav__link--active { color: var(--accent); }
/* Onglet mis en avant (Contenu) : couleur d'accent + pastille pour attirer
   l'œil. La règle :hover doit être répétée, sinon .nav__link:hover (plus
   spécifique que le modificateur seul) repasserait le lien en foncé. */
.nav__link--highlight {
    color: var(--accent); font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.nav__link--highlight::before {
    content: ''; flex-shrink: 0;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-gradient);
}
.nav__link--highlight:hover { color: var(--accent-hover); }
.nav__actions {
    display: flex; align-items: center;
    gap: 12px; flex-shrink: 0;
}
.nav__cta { display: inline-flex; }

/* Language Switcher */
.lang-switcher {
    position: relative;
}
.lang-switcher__btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 10px;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all var(--duration) var(--ease);
    font-family: var(--font-body);
}
.lang-switcher__btn:hover {
    border-color: var(--accent); color: var(--accent);
}
.lang-switcher__btn svg {
    opacity: 0.7;
}
.lang-switcher__dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 4px;
    display: none; flex-direction: column; min-width: 60px;
    box-shadow: var(--shadow-md); z-index: 1001;
}
.lang-switcher:hover .lang-switcher__dropdown {
    display: flex;
}
.lang-switcher__option {
    display: block; padding: 6px 12px; text-align: center;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.8rem; font-weight: 600; border-radius: 4px;
    transition: all 0.2s ease;
}
.lang-switcher__option:hover {
    background: var(--accent-subtle); color: var(--accent);
}
.lang-switcher__option.active {
    color: var(--accent); background: var(--accent-subtle);
}

/* Burger */
.nav__burger {
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; padding: 8px; z-index: 1200; position: relative;
}
.nav__burger span {
    display: block; width: 24px; height: 2px;
    background: var(--text-primary);
    transition: all 0.3s var(--ease); transform-origin: center;
}
.nav__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.active span:nth-child(2) { opacity: 0; }
.nav__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==============================
   HERO
   ============================== */
.hero {
    position: relative;
    /* Plafonné pour éviter un grand vide noir sous le texte sur les grands
       écrans, tout en restant ample sur les écrans courants. */
    min-height: clamp(620px, 90vh, 900px);
    display: flex; align-items: center;
    overflow: hidden; background: var(--bg-primary);
    padding-top: var(--nav-height);
}

/* === Animation Spline en arrière-plan du hero === */
.hero__spline {
    position: absolute; inset: 0;
    z-index: 0; overflow: hidden;
}
.hero__spline iframe,
.hero__spline spline-viewer {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}
/* Interaction souris activée sur la scène. Si cette scène capte la molette (zoom
   caméra), le scroll pourra se bloquer au survol de l'orbe : dans ce cas passer à
   un export .splinecode (rendu par <spline-viewer>, interactif SANS bloquer le
   scroll) — le CSS ci-dessous s'applique déjà aux deux types d'embed. */
.hero__spline iframe,
.hero__spline spline-viewer { pointer-events: auto; }

/* Hero posé sur une scène Spline sombre : fond noir, texte clair, boutons contrastés. */
.hero--spline { background: #000; }
.hero--spline .hero__particles { display: none; }
.hero--spline .hero__content { position: relative; z-index: 2; }
.hero--spline .hero__title,
.hero--spline .hero__title .char {
    background: linear-gradient(135deg, #FFFFFF 0%, #EDE7DB 45%, #C4AE8F 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero--spline .hero__subtitle { color: rgba(245, 240, 232, 0.85); }
.hero--spline .btn--filled {
    background: #F5F0E8; color: #2C1810; border-color: #F5F0E8;
}
.hero--spline .btn:not(.btn--filled) {
    background: transparent; border-color: rgba(245, 240, 232, 0.5); color: #F5F0E8;
}
.hero--spline .btn:not(.btn--filled):hover {
    background: rgba(245, 240, 232, 0.12); border-color: #F5F0E8;
}
.hero__particles {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 100% 95% at 20% 45%, rgba(169, 143, 111, 0.16) 0%, transparent 80%),  /* taupe clair */
        radial-gradient(ellipse 115% 100% at 80% 15%, rgba(139, 115, 85, 0.14) 0%, transparent 80%),  /* taupe haut-droite */
        radial-gradient(ellipse 125% 105% at 50% 85%, rgba(107, 86, 62, 0.12) 0%, transparent 80%),  /* brun bas */
        radial-gradient(ellipse 105% 85% at 50% 22%, rgba(139, 115, 85, 0.10) 0%, transparent 78%);  /* halo haut-centre */
}
.hero__particles { will-change: transform; }
/* === Section intro Spline, épinglée === */
.macbook-showcase {
    position: relative;
    /* Hauteur = course de scroll pendant laquelle la scène reste épinglée.
       La scène "reactive orb" est INTERACTIVE À LA SOURIS (elle n'avance pas
       au scroll) : on garde donc une course courte (~un écran) pour laisser
       jouer avec l'orbe puis fondre vers le site, sans scroll "mort". */
    height: 200vh;
    background: var(--bg-primary);
}
.macbook-showcase__sticky {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.macbook-showcase__sticky spline-viewer,
.macbook-showcase__sticky iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0; display: block;
}
/* Voile noir : fond la scène 3D (et son fond gris) vers le noir du site
   sur la fin de l'intro, pour une transition nette vers le hero.
   L'opacité est pilotée en JS via --showcase-fade. */
.macbook-showcase__sticky::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--bg-primary);
    opacity: var(--showcase-fade, 0);
    pointer-events: none;
    z-index: 3;
}
.macbook-showcase__hint {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-secondary); opacity: 0.6;
    pointer-events: none;
    animation: subtleFloat 2.5s ease-in-out infinite;
}
.hero__content {
    position: relative; z-index: 2;
    will-change: transform, opacity;
    width: 100%; text-align: center;
    padding: 60px 0;
    transform-origin: center center;
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.8rem);
    font-weight: 900; line-height: 1.1;
    background: linear-gradient(135deg, #2C1810 0%, #4A3524 35%, #6B563E 70%, #8B7355 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0; transform: translateY(30px);
    animation: fadeUp 0.8s var(--ease-out) 0.3s forwards;
    max-width: 800px; margin: 0 auto;
}
/* When JS splits the title into chars, reset parent styles */
.hero__title:has(.char) {
    background: none;
    -webkit-text-fill-color: unset;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
.hero__subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem); font-weight: 400;
    color: var(--text-secondary); margin-top: 20px;
    max-width: 600px; margin-left: auto; margin-right: auto;
    opacity: 0; transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.5s forwards;
}
.hero__actions {
    display: flex; gap: 16px; justify-content: center;
    margin-top: 40px;
    opacity: 0; transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.7s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Ember char split */
.char-word { display: inline-block; white-space: nowrap; }
.char {
    display: inline-block;
    opacity: 0;
    background: linear-gradient(135deg, #2C1810 0%, #4A3524 40%, #6B563E 70%, #8B7355 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: charReveal 0.55s var(--ease-out) forwards;
    will-change: transform, opacity;
}
@keyframes charReveal {
    from { opacity: 0; transform: translateY(48px) rotate(-8deg) scale(0.7); }
    to   { opacity: 1; transform: translateY(0)   rotate(0deg)  scale(1);   }
}

/* ==============================
   QUICK ACTIONS
   ============================== */
.quick-actions {
    padding: 48px 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.quick-actions__grid {
    --qa-gap: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--qa-gap);
}
.quick-action__btn {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 24px;
    font-family: var(--font-display);
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease);
    text-align: center;
}
.quick-action__btn:hover {
    background: var(--cta-primary); color: var(--cta-primary-text);
    border-color: var(--cta-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

/* ==============================
   ABOUT
   ============================== */
.about { text-align: center; }
.about .section__subtitle { margin: 0 auto; }

/* ==============================
   SERVICES
   ============================== */
.services { border-top: 1px solid var(--border); }
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--gap);
}
.service-card {
    position: relative;
    overflow: hidden;
    background: var(--cta-primary);
    border: 1px solid rgba(245, 240, 232, 0.08);
    border-radius: var(--radius);
    padding: 32px;
    transition: transform var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                background var(--duration) var(--ease);
}
/* Barre d'accent qui se déploie en haut de la carte au survol */
.service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent-gradient);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--duration) var(--ease-out);
}
/* Halo orange diffus dans le coin */
.service-card::after {
    content: '';
    position: absolute; top: -50%; right: -25%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0; pointer-events: none;
    transition: opacity var(--duration) var(--ease);
}
.service-card:hover {
    border-color: rgba(245, 240, 232, 0.2);
    background: #3A2418;
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover::after { opacity: 1; }

.service-card__icon {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: rgba(196, 174, 143, 0.16);
    color: #C4AE8F;
    transition: transform var(--duration) var(--ease-spring),
                background var(--duration) var(--ease),
                color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}
.service-card:hover .service-card__icon {
    transform: scale(1.08) rotate(-5deg);
    background: var(--accent);
    color: #F5F0E8;
    box-shadow: 0 10px 28px var(--accent-glow);
}
.service-card__icon svg { width: 28px; height: 28px; }
.service-card__title {
    position: relative; z-index: 1;
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 10px;
    color: var(--cta-primary-text);
    transition: color var(--duration) var(--ease);
}
.service-card:hover .service-card__title { color: #C4AE8F; }
.service-card__text {
    position: relative; z-index: 1;
    font-size: 0.88rem; color: rgba(245, 240, 232, 0.72);
    line-height: 1.7;
}

/* ==============================
   STATS
   ============================== */
.stats {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    text-align: center;
}
.stat-item__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    background: var(--accent-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.stat-item__label {
    font-size: 0.85rem; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 500;
}

/* ==============================
   PORTFOLIO
   ============================== */
.portfolio { border-top: 1px solid var(--border); }
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--gap);
}
.portfolio-card {
    background: var(--cta-primary);
    border: 1px solid rgba(245, 240, 232, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--duration) var(--ease);
    cursor: pointer;
}
.portfolio-card:hover {
    border-color: rgba(245, 240, 232, 0.2);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.portfolio-card__visual {
    position: relative; aspect-ratio: 16 / 10;
    overflow: hidden;
}
.portfolio-card__placeholder {
    width: 100%; height: 100%;
    background: var(--card-color, var(--bg-elevated));
    opacity: 0.3;
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out);
}
.portfolio-card:hover .portfolio-card__placeholder { opacity: 0.55; transform: scale(1.08); }
.portfolio-card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s var(--ease-out);
}
.portfolio-card:hover .portfolio-card__img { transform: scale(1.08); }
.portfolio-card__body { padding: 24px; }
.portfolio-card__category {
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #C4AE8F; margin-bottom: 8px;
}
.portfolio-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700; margin-bottom: 8px;
    color: var(--cta-primary-text);
    transition: color var(--duration) var(--ease);
}
.portfolio-card:hover .portfolio-card__title { color: #C4AE8F; }
.portfolio-card__desc {
    font-size: 0.85rem; color: rgba(245, 240, 232, 0.72);
    line-height: 1.7;
}

/* Carte-lien (fiche détail) : neutralise le style lien par défaut */
a.portfolio-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Prix affiché sur les cartes du catalogue de templates */
.portfolio-card__price {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 14px;
    border: 1px solid #C4AE8F;
    border-radius: 20px;
    color: #C4AE8F;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ==============================
   REVIEWS
   ============================== */
.reviews-section {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}
.quote-section { border-top: 1px solid var(--border); }
.reviews__header {
    text-align: center; margin-bottom: 40px;
}
.reviews__badge {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.reviews__stars {
    display: flex; justify-content: center; gap: 4px;
    margin-bottom: 8px;
}
.reviews__count {
    color: var(--text-secondary); font-size: 0.9rem;
    margin-bottom: 8px;
}
.reviews__google-logo {
    font-size: 1.4rem; font-weight: 600;
    font-family: 'Product Sans', var(--font-body);
}
.reviews__carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.review-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: all 0.3s var(--ease);
}
.review-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow);
}
.review-card__header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.review-card__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: #F5F0E8;
    transition: transform var(--duration) var(--ease-spring),
                box-shadow var(--duration) var(--ease);
}
.review-card:hover .review-card__avatar {
    transform: scale(1.1);
    box-shadow: 0 6px 18px var(--accent-glow);
}
.review-card__author {
    font-weight: 600; font-size: 0.9rem;
}
.review-card__stars {
    display: flex; gap: 2px; margin-bottom: 10px;
}
.review-card__stars svg { width: 16px; height: 16px; }
.review-card__text {
    font-size: 0.85rem; color: var(--text-secondary);
    line-height: 1.7;
}

/* ==============================
   BUTTONS
   ============================== */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 36px;
    font-family: var(--font-display);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    border: 2px solid var(--cta-secondary-text); color: var(--cta-secondary-text);
    background: var(--cta-secondary); border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
    position: relative; overflow: hidden;
}
.btn:hover { background: var(--cta-primary); color: var(--cta-primary-text); border-color: var(--cta-primary); transform: translateY(-3px); box-shadow: 0 12px 30px var(--accent-glow); }
.btn--filled { background: var(--cta-primary); color: var(--cta-primary-text); border-color: var(--cta-primary); }
.btn--filled:hover { transform: translateY(-3px); box-shadow: 0 14px 34px var(--accent-glow); filter: brightness(1.06); }
.btn--small { padding: 10px 22px; font-size: 0.72rem; }
.btn--glow { box-shadow: var(--shadow-glow); }

/* ==============================
   FORMS
   ============================== */
.form-card {
    background: var(--cta-primary);
    border: 1px solid rgba(245, 240, 232, 0.08);
    border-radius: var(--radius);
    padding: 32px;
}
/* Bouton d'envoi : taupe clair (comme les labels) pour rester visible sur la carte brune */
.form-card .btn--filled {
    background: #C4AE8F;
    color: var(--cta-primary);
    border-color: #C4AE8F;
}
.form-card .btn:hover {
    background: var(--cta-secondary);
    color: var(--cta-secondary-text);
    border-color: var(--cta-secondary);
}
.form__row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form__group { margin-bottom: 18px; }
.form__label {
    display: block; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #C4AE8F; margin-bottom: 8px;
}
.form__input {
    width: 100%; padding: 13px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: 0.9rem;
    transition: all 0.3s var(--ease); outline: none;
}
.form__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.form__input::placeholder { color: var(--text-muted); }
textarea.form__input { resize: vertical; min-height: 120px; }
.form__select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
.form__status { margin-top: 14px; font-size: 0.85rem; display: none; }
.form__status.success { display: block; color: var(--success); }
.form__status.error   { display: block; color: var(--danger); }

/* ==============================
   CONTACT
   ============================== */
.contact { border-top: 1px solid var(--border); }
.contact__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 72px); align-items: start;
}
.contact__info-item {
    display: flex; gap: 16px; align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.contact__info-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact__info-item strong {
    display: block; font-size: 0.85rem; font-weight: 600;
    margin-bottom: 4px;
}
.contact__info-item p { font-size: 0.9rem; color: var(--text-secondary); }
.contact__info-item a { color: var(--accent); transition: color 0.3s; }
.contact__info-item a:hover { color: var(--accent-hover); }
.contact__hours {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.contact__hours h3 {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    margin-bottom: 16px;
}
.contact__hours-row {
    display: flex; justify-content: space-between;
    padding: 8px 0; font-size: 0.88rem;
    border-bottom: 1px solid var(--border);
}
.contact__hours-row:last-child { border-bottom: none; }
.contact__hours-row span:last-child { color: var(--accent); font-weight: 600; }

/* ==============================
   FOOTER
   ============================== */
.footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}
.footer__inner {
    display: flex; justify-content: space-between;
    align-items: center;
}
.footer__copy { font-size: 0.8rem; color: var(--text-muted); }
.footer__powered {
    font-size: 0.8rem; color: var(--accent);
}
.footer__socials {
    display: flex; gap: 12px; align-items: center;
}
.footer__social {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: transform var(--duration) var(--ease-spring),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                background var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}
.footer__social:hover {
    color: #F5F0E8; border-color: transparent;
    background: var(--accent-gradient);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px var(--accent-glow);
}

/* ==============================
   TOAST
   ============================== */
.toast-container {
    position: fixed; bottom: 24px; right: 24px;
    z-index: 4000; display: flex; flex-direction: column; gap: 10px;
}
.toast {
    padding: 16px 22px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.85rem; color: var(--text-primary);
    transform: translateX(120%); opacity: 0;
    transition: all 0.45s var(--ease-out);
    max-width: 360px; box-shadow: var(--shadow-lg);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }

/* ==============================
   SCROLL ANIMATIONS
   ============================== */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Slide from left */
.reveal-left {
    opacity: 0; transform: translateX(-60px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Slide from right */
.reveal-right {
    opacity: 0; transform: translateX(60px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale up */
.reveal-scale {
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Fade only */
.reveal-fade {
    opacity: 0;
    transition: opacity 1.2s var(--ease-out);
}
.reveal-fade.visible { opacity: 1; }

/* Rotate in */
.reveal-rotate {
    opacity: 0; transform: translateY(30px) rotate(-3deg);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-rotate.visible { opacity: 1; transform: translateY(0) rotate(0); }

/* Stagger children — each child animates with increasing delay */
.stagger-children > * {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.7s; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }

/* Counter animation for stats */
.stat-item__number { transition: all 0.6s var(--ease-out); }

/* Parallax-like subtle float on cards when visible */
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.float-on-visible.visible {
    animation: subtleFloat 4s ease-in-out infinite;
}

/* Glow pulse for CTA buttons when visible */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 115, 85, 0.18); }
    50% { box-shadow: 0 0 40px rgba(139, 115, 85, 0.38); }
}
.btn--glow.visible-glow {
    animation: glowPulse 3s ease-in-out infinite;
}

/* Line reveal — decorative accent bar */
.line-reveal::after {
    content: '';
    display: block;
    width: 0; height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
    margin-top: 16px;
    transition: width 0.8s var(--ease-out) 0.3s;
}
.line-reveal.visible::after { width: 60px; }

/* ==============================
   PAGES DÉTAIL (réalisations + templates) & CATALOGUE
   ============================== */
.detail { padding: calc(var(--nav-height) + 56px) 0 var(--section-pad); }
.detail__back {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}
.detail__back:hover { color: var(--accent); }
.detail__header { margin-bottom: 32px; }
.detail__category {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--accent);
}
.detail__title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 800;
    margin-top: 10px;
    line-height: 1.15;
}
.detail-gallery__main {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.detail-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__placeholder {
    width: 100%; height: 100%;
    background: var(--card-color, var(--bg-elevated));
    opacity: 0.3;
}
.detail-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.detail-gallery__thumb {
    width: 120px; aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0; background: none; cursor: pointer;
    opacity: 0.55;
    transition: all var(--duration) var(--ease);
}
.detail-gallery__thumb:hover { opacity: 1; }
.detail-gallery__thumb.active { opacity: 1; border-color: var(--accent); }
.detail-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__desc {
    max-width: 760px;
    margin: 40px 0 32px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.85;
}
.detail__price { margin-bottom: 28px; color: var(--text-secondary); font-size: 1rem; }
.detail__price strong { color: var(--accent); font-size: 1.35rem; margin-left: 10px; font-family: var(--font-display); }
.detail__actions { margin-top: 8px; }

.templates-page { padding-top: calc(var(--nav-height) + 56px); }
.templates-page__empty { text-align: center; color: var(--text-secondary); padding: 60px 0; font-size: 1.05rem; }

/* Section « Contenu » : reportages photo/vidéo */
.content-page { padding-top: calc(var(--nav-height) + 56px); }
.content-page__empty { text-align: center; color: var(--text-secondary); padding: 60px 0; font-size: 1.05rem; }
.content-card__date, .detail__date {
    display: block; margin-top: 12px;
    color: var(--text-secondary); font-size: 0.85rem; letter-spacing: 0.04em;
}

/* Galerie mixte : photos et vidéos empilées sur toute la largeur de lecture. */
.content-media {
    display: flex; flex-direction: column; gap: 28px;
    max-width: 960px; margin: 0 0 40px;
}
.content-media__item {
    margin: 0; border-radius: var(--radius);
    overflow: hidden; background: var(--bg-card);
}
.content-media__img, .content-media__video { display: block; width: 100%; height: auto; }
/* Ratio réservé : la page ne saute pas quand le poster arrive. Fond noir parce
   qu'une vidéo au ratio différent du 16/9 se retrouve en boîte aux lettres. */
.content-media__item--video { aspect-ratio: 16 / 9; }
.content-media__video { height: 100%; object-fit: contain; background: #000; }

@media (max-width: 700px) {
    .detail { padding-top: calc(var(--nav-height) + 32px); }
    .detail-gallery__thumb { width: 88px; }
}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 1100px) {
    .services__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .portfolio__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

    /* Le menu déroulant (liens + CTA) déborde de la pilule flottante dans cette
       plage de largeurs ; on bascule sur le burger tant que la barre complète
       ne tient pas, et on repasse au menu complet au-delà de 1100px. */
    .nav__links { display: none; }
    .nav__burger { display: flex; }
    .nav__cta { display: none !important; }

    .nav.menu-open {
        /* Le menu plein écran annule la pilule flottante. */
        top: 0 !important; width: 100% !important;
        border-radius: 0 !important; border: none !important;
        height: 100vh !important; height: 100dvh !important;
        background: var(--bg-primary) !important;
    }
    .nav.menu-open .nav__burger {
        position: fixed; top: 18px; right: 24px; z-index: 1200;
    }
    .nav.menu-open .nav__links {
        display: flex !important; flex-direction: column;
        align-items: center; justify-content: center;
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        gap: 0;
    }
    .nav.menu-open li { list-style: none; width: 100%; text-align: center; }
    .nav.menu-open .nav__link {
        display: block; padding: 20px 0;
        font-size: 1.1rem; font-weight: 500;
        letter-spacing: 0.2em; color: var(--text-primary) !important;
        border-bottom: 1px solid var(--border);
    }
    .nav.menu-open .nav__link::after { display: none; }
    /* L'onglet mis en avant garde sa couleur dans le menu burger : la règle
       ci-dessus la forcerait en !important. Le display:flex est nécessaire pour
       que la pastille ::before soit dimensionnée (en inline, elle disparaît). */
    .nav.menu-open .nav__link--highlight {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        color: var(--accent) !important;
    }
    .nav.menu-open .nav__logo { display: none; }
    .nav.menu-open .lang-switcher { display: none; }
}

@media (max-width: 900px) {
    .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
    /* 3 cartes sur 2 colonnes : la 3e, seule sur sa ligne, est centrée
       (largeur d'une colonne) au lieu de coller à gauche. */
    .quick-actions__grid > .quick-action__btn:nth-child(3):last-child {
        grid-column: 1 / -1;
        width: calc(50% - var(--qa-gap) / 2);
        justify-self: center;
    }
    .contact__grid { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .reviews__carousel { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
        --section-pad: clamp(40px, 8vw, 80px);
    }

    /* Intro 3D bien plus courte sur mobile : on supprime le long défilement
       et surtout la zone noire "vide" avant le hero. Desktop inchangé (350vh).
       ~180vh garde quasi toute l'animation, sans la traîne morte (200->350vh). */
    .macbook-showcase { height: 180vh; }

    /* Le burger et le menu plein écran sont définis dans @media (max-width: 1024px). */
    .lang-switcher__btn span { display: none; }
    .lang-switcher__btn { padding: 6px 8px; }

    .hero { min-height: 80vh; }
    .hero__title { font-size: clamp(1.6rem, 7vw, 2.5rem); }
    .hero__actions { flex-direction: column; align-items: center; }

    .services__grid { grid-template-columns: 1fr; }
    .portfolio__grid { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }

    .section__title { font-size: clamp(1.3rem, 5vw, 1.8rem); }

    .reviews__badge { font-size: 1.5rem; }
    .reviews__carousel { grid-template-columns: 1fr; }

    .form-card { padding: 24px 18px; }
    .btn { padding: 14px 28px; font-size: 0.75rem; width: 100%; justify-content: center; }

    .footer { padding: 28px 0; }
    .footer__inner { flex-direction: column; gap: 16px; text-align: center; }

    .toast-container { bottom: 16px; right: 16px; left: 16px; }
    .toast { max-width: 100%; }
}

/* Intro 3D — mobile portrait : un plein écran vertical cadre la scène trop
   serré (orbes rognés en bas). On lui donne un ratio moins étroit pour
   "dézoomer" et voir les orbes en entier, centrée verticalement et fondue
   dans le fond noir en haut/bas (pas de bord net).
   Cadrer plus large = augmenter --intro-aspect (ex. 4/3) ; plus serré = 4/5. */
@media (max-width: 768px) and (orientation: portrait) {
    .macbook-showcase__sticky spline-viewer,
    .macbook-showcase__sticky iframe {
        /* bottom:auto libère la hauteur pour que aspect-ratio s'applique
           (sinon inset:0 force la pleine hauteur et ignore le ratio) ;
           top:50% + translateY recentre la bande verticalement. */
        top: 50%;
        bottom: auto;
        height: auto;
        aspect-ratio: var(--intro-aspect, 1 / 1);
        transform: translateY(-50%);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
                mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    }
}

@media (max-width: 500px) {
    .container { width: min(var(--container), 100% - 20px); }
    .quick-actions__grid { grid-template-columns: 1fr 1fr; --qa-gap: 10px; }
    .quick-action__btn { padding: 12px 10px; font-size: 0.72rem; }
    .form-card { padding: 18px 14px; }
    .hero__title { font-size: clamp(1.4rem, 6vw, 2rem); }
    .stat-item__number { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

@media (max-width: 360px) {
    .quick-actions__grid { grid-template-columns: 1fr; }
    /* 1 colonne : la carte reprend toute la largeur (pas d'orphelin à centrer). */
    .quick-actions__grid > .quick-action__btn:nth-child(3):last-child {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }
    .stats__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}