/* ==========================================================================
   VARIABLES & RESET
   ========================================================================== */
:root {
    color-scheme: dark;

    --bg-base: #030308;
    --bg-elevated: #08080f;

    --text-primary: #F5F5F8;
    --text-secondary: #90939c;
    --text-tertiary: #55585f;

    /* Palette neutre dérivée du logo (graphite + argent, sans teinte) : un
       dégradé blanc->gris acier pour les surfaces "pleines" (boutons, texte
       en vedette), et un unique accent gris-acier discret pour les petits
       repères interactifs (points, liens, badges). Pas de couleur saturée. */
    --accent-a: #AEB2BC;
    --accent-b: #7A8090;
    --accent-gradient: linear-gradient(135deg, #FFFFFF 0%, #9CA0AC 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(174, 178, 188, 0.14), rgba(122, 128, 144, 0.14));
    --accent-a-rgb: 174, 178, 188;
    --accent-b-rgb: 122, 128, 144;

    --glass-bg: rgba(255, 255, 255, 0.025);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.055);
    --glass-blur: 30px;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    background-color: var(--bg-base);
    /* Pagination "un bloc à la fois" façon shorts : chaque section occupe un
       écran plein et le scroll s'arrête toujours dessus (scroll-snap-stop
       sur les sections), au lieu d'un défilement libre continu. Pas de
       scroll-behavior:smooth ici : combiné à scroll-snap mandatory, les deux
       animations se battent (le navigateur snap déjà tout seul, en douceur). */
    scroll-snap-type: y mandatory;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background-color: transparent;
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: rgba(var(--accent-a-rgb), 0.35); color: #fff; }

/* ==========================================================================
   GRAIN OVERLAY
   ========================================================================== */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   REVEAL AU DÉFILEMENT — plus rapide qu'avant : les blocs apparaissent déjà
   en un mouvement net via le snap, l'animation interne doit suivre au même
   rythme plutôt que traîner derrière.
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translate3d(0, 0, 0); }

/* ==========================================================================
   FOND ANIMÉ & CURSEUR — halos neutres blanc/gris acier (plus d'indigo/cyan)
   ========================================================================== */
.animated-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.bg-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: floatHalo 26s infinite alternate ease-in-out;
    will-change: transform;
}
.bg-halo-1 { top: -25%; left: -15%; width: 65vw; height: 65vw; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); }
.bg-halo-2 { bottom: -25%; right: -20%; width: 75vw; height: 75vw; background: radial-gradient(circle, rgba(140, 145, 158, 0.12) 0%, transparent 70%); animation-delay: -10s; animation-duration: 32s; }
.bg-halo-3 { top: 25%; left: 35%; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); animation-delay: -6s; animation-duration: 22s; }

@keyframes floatHalo {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(12vw, 14vh, 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .bg-halo { animation: none; } }

.cursor-glow {
    position: fixed;
    top: -300px; left: -300px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: background 0.3s ease, scale 0.3s var(--ease-out);
}
.cursor-glow.hovered {
    scale: 1.3;
    background: radial-gradient(circle, rgba(var(--accent-a-rgb), 0.16) 0%, transparent 60%);
}

/* ==========================================================================
   NAVIGATION FLOTTANTE
   ========================================================================== */
.floating-nav {
    position: fixed;
    /* env(safe-area-inset-top) : évite que la pilule ne se glisse sous
       l'encoche/île dynamique/caméra perforée sur mobile. */
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 980px;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 8px 8px 8px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 100;
}
.floating-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(6, 6, 12, 0.62);
    /* Blur plus léger que --glass-blur : contrairement aux cartes, cet
       élément est fixed et donc recalculé à chaque frame de scroll — le
       moindre coût se sent sur toute la durée de la navigation. */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--text-primary); text-decoration: none; letter-spacing: -0.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }

.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; }
.mobile-menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

.btn-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-gradient);
    color: #030308;
    font-weight: 700; font-size: 14px;
    padding: 11px 20px;
    border-radius: 100px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), filter 0.3s;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.65); }
.btn-cta:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-weight: 600; font-size: 14px;
    padding: 11px 20px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
}
.btn-ghost:hover { background: var(--glass-hover); border-color: rgba(255,255,255,0.16); transform: translateY(-2px); }

/* ==========================================================================
   HERO 3D
   ========================================================================== */
.hero-3d-section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 140px 24px 80px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.hero-halo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-halo::before,
.hero-halo::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}
.hero-halo::before {
    width: min(70vw, 640px);
    height: min(70vw, 640px);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.20), rgba(174,178,188,0.10) 45%, transparent 72%);
    filter: blur(20px);
    animation: heroHaloBreathe 9s ease-in-out infinite;
}
.hero-halo::after {
    width: min(105vw, 900px);
    height: min(105vw, 900px);
    background: radial-gradient(circle, rgba(122,128,144,0.14) 0%, transparent 70%);
    filter: blur(70px);
    animation: heroHaloBreathe 13s ease-in-out infinite reverse;
}
@keyframes heroHaloBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-halo::before, .hero-halo::after { animation: none; }
}
/* Coupe l'animation dès que le hero quitte l'écran (cf. script.js) — pas de
   raison de continuer à animer un flou hors-champ en permanence. */
.hero-halo.is-offscreen::before, .hero-halo.is-offscreen::after { animation-play-state: paused; }

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 620px 480px at 50% 62%, rgba(3, 3, 8, 0.62), transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    pointer-events: none;
}
.hero-content > * { pointer-events: auto; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 7px 16px 7px 12px;
    border-radius: 100px;
}
.eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-gradient);
    box-shadow: 0 0 10px rgba(var(--accent-a-rgb), 0.7);
    flex-shrink: 0;
}

.hero-content h1 {
    font-size: clamp(40px, 7.2vw, 84px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.text-gradient {
    background: var(--accent-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-content p {
    font-size: clamp(16px, 2vw, 19px);
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.6;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hero-actions .btn-cta, .hero-actions .btn-ghost { padding: 14px 26px; font-size: 15px; }

.scroll-cue {
    position: absolute;
    bottom: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-tertiary);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    animation: scrollCueBob 2.4s ease-in-out infinite;
}
.scroll-cue svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
@keyframes scrollCueBob {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50% { transform: translate(-50%, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ==========================================================================
   SECTIONS — chacune est un bloc plein écran distinct (scroll-snap-stop:
   always = un seul bloc à la fois franchi par mouvement de scroll, comme un
   flux de shorts). margin:auto sur .container centre le contenu verticalement
   sans le hobble en cas de dépassement (le classique bug de centering flex).
   ========================================================================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

.section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 96px 0 28px;
}
.section > .container { margin: auto; }

.section-header { max-width: 640px; margin: 0 auto 34px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.section-header h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.section-header p { color: var(--text-secondary); font-size: 16px; }

/* ==========================================================================
   BENTO / CARTES APPS
   ========================================================================== */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }

.app-card {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    overflow: hidden;
    transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
    transform-style: preserve-3d;
    will-change: transform;
}
.app-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.10), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.app-card:hover::before { opacity: 1; }
.app-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }

.app-card-featured {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 26px;
    align-items: center;
    padding: 26px 30px;
}

/* Icône présentée nue (pas de contour dégradé) : juste l'icône et une ombre
   portée, comme une tuile d'App Store dans un répertoire d'apps. */
.app-card-icon-frame {
    width: 108px; height: 108px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.65);
    transform: translateZ(30px);
    flex-shrink: 0;
}
.app-card-icon-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.app-card-body { transform: translateZ(20px); }
.app-card-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.app-badge {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-primary);
    background: rgba(var(--accent-a-rgb), 0.14);
    border: 1px solid rgba(var(--accent-a-rgb), 0.3);
    padding: 4px 10px; border-radius: 100px;
}
.app-platform { font-size: 12px; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px; }
.app-platform-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }

.app-card-body h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.app-card-body .app-tagline { font-size: 14px; color: var(--text-primary); opacity: 0.85; margin-bottom: 6px; font-weight: 500; }
.app-card-body .app-desc { color: var(--text-secondary); font-size: 13px; max-width: 480px; margin-bottom: 12px; line-height: 1.5; }

.app-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px; color: var(--text-primary);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    transition: border-color 0.3s, gap 0.3s, color 0.3s;
}
.app-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform 0.3s var(--ease-out); }
.app-link:hover { color: var(--accent-a); border-color: var(--accent-a); gap: 11px; }
.app-link:hover svg { transform: translate(2px, -2px); }

.app-card-ghost {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 142px;
}
.app-card-ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px);
    pointer-events: none;
}
.ghost-lock {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.ghost-lock svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.app-card-ghost h4 { font-size: 16px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.app-card-ghost p { font-size: 13px; color: var(--text-tertiary); }
.ghost-status {
    align-self: flex-start;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-tertiary);
    border: 1px dashed var(--glass-border);
    padding: 4px 10px; border-radius: 100px;
    margin-top: 12px;
}

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}
/* Texte centré (comme le hero et le contact) plutôt qu'aligné à gauche :
   même dans une colonne, un bloc de prose brut à gauche lit comme
   "désaligné" par rapport au reste du site, contrairement au texte casé
   dans les cartes de la section Work. */
.about-text { text-align: center; }
.about-text p { color: var(--text-secondary); font-size: 15px; margin: 0 auto 12px; max-width: 460px; }
.about-text p strong { color: var(--text-primary); font-weight: 600; }
.about-signature { margin: 18px auto 0; font-weight: 700; font-size: 14px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 10px; }
.about-signature span { color: var(--text-tertiary); font-weight: 400; }

.facts-panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    padding: 6px;
}
.fact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border);
}
.fact-row:last-child { border-bottom: none; }
.fact-label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.fact-value { font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: right; }

/* ==========================================================================
   CONTACT + FOOTER (bloc final)
   ========================================================================== */
.contact-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 42px 40px;
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid transparent;
    background-clip: padding-box;
}
.contact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.08), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.contact-card h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px; }
.contact-card p { color: var(--text-secondary); font-size: 15px; max-width: 440px; margin: 0 auto 22px; }
.contact-card .btn-cta { padding: 14px 28px; font-size: 15px; }

.social-row { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.social-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-secondary);
    transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out), background 0.3s;
}
.social-icon svg { width: 15px; height: 15px; fill: currentColor; }
.social-icon:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); background: var(--glass-hover); transform: translateY(-3px); }

.mini-footer {
    max-width: 760px;
    width: 100%;
    margin: 22px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.mini-footer-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); text-decoration: none; transition: color 0.2s; }
.mini-footer-brand:hover { color: var(--text-secondary); }
.mini-footer-logo { width: 22px; height: 22px; border-radius: 6px; }
.mini-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.mini-footer-links a { font-size: 13px; color: var(--text-tertiary); text-decoration: none; transition: color 0.2s; }
.mini-footer-links a:hover { color: var(--text-primary); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .app-card-featured { grid-template-columns: 1fr; text-align: center; padding: 28px; }
    .app-card-icon-frame { margin: 0 auto; }
    .app-card-body .app-desc { margin-left: auto; margin-right: auto; }
    .app-card-eyebrow { justify-content: center; }
    .about-layout { grid-template-columns: 1fr; gap: 28px; }
    .about-text p { max-width: 100%; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }
    .floating-nav {
        flex-wrap: wrap;
        border-radius: 32px;
        transition: border-radius 0.3s var(--ease-out);
    }
    /* Le menu déroulant a des bords plus francs : un radius trop généreux
       jure avec sa liste verticale, donc on le resserre quand il est ouvert. */
    .floating-nav:has(.nav-links.show) { border-radius: 22px; }

    .nav-actions { gap: 8px; }
    .nav-actions .btn-cta { padding: 9px 16px; font-size: 13px; }
    .floating-nav .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 4px;
        order: 3;
        padding: 12px 6px 6px;
    }
    .floating-nav .nav-links.show { display: flex; }
    .floating-nav .nav-links a { padding: 10px 12px; border-radius: 10px; }
    .floating-nav .nav-links a:hover { background: var(--glass-hover); }

    /* Le snap "mandatory" est pensé pour la molette/trackpad ; au doigt, il
       casse l'inertie naturelle du défilement tactile et peut même piéger
       le scroll quand une section dépasse 100vh. Sur mobile on repasse donc
       en défilement libre classique — la version PC garde le snap intact. */
    html { scroll-snap-type: none; }
    .section { min-height: 0; padding: 84px 0 48px; }
    .section-header { margin-bottom: 22px; }
    .apps-grid { gap: 12px; }
    .app-card-featured { padding: 22px; }
    .app-card-icon-frame { width: 84px; height: 84px; border-radius: 20px; }
    .app-card-body h3 { font-size: 20px; }
    .app-card-body .app-desc { display: none; }
    .app-card-ghost { padding: 16px; min-height: 108px; }
    .ghost-lock { width: 26px; height: 26px; margin-bottom: 8px; }
    .app-card-ghost h4 { font-size: 14px; }
    .app-card-ghost p { font-size: 12px; }
    .ghost-status { margin-top: 8px; }
}

@media (max-width: 560px) {
    .hero-3d-section { padding-top: 116px; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn-cta, .hero-actions .btn-ghost { justify-content: center; }
    .contact-card { padding: 32px 22px; }
    .fact-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 16px; }
    .fact-value { text-align: left; }
    .mini-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .span-6 { grid-column: span 12; }
    .app-card-ghost { min-height: 0; }
}