/* T.Squad: style épuré
   Sert : src/index.html (home splash) + src/patreon-result.html (callback OAuth).
   Tout le reste sera ajouté quand les nouvelles pages seront designées. */

/* ===== Reset ===== */

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

html {
    scroll-behavior: smooth;
}

/* ===== Tokens ===== */

:root {
    /* Surfaces */
    --bg-primary: #0a0a0f;
    --bg-secondary: #0f0f17;
    --bg-tertiary: #15151e;

    /* Bordures */
    --border-primary: #23232f;
    --border-strong: #2e2e3a;

    /* Texte */
    --text-primary: #ffffff;
    --text-secondary: #b4b4c4;
    --text-tertiary: #7d7d8c;
    --text-muted: #5a5a68;

    /* Accents */
    --neon-green: #00ff88;
    --neon-blue: #0099ff;
    --neon-purple: #b000ff;

    /* Gradients (servent uniquement à patreon-result et logo glow) */
    --gradient-primary: linear-gradient(135deg, #b000ff, #0099ff);
    --gradient-success: linear-gradient(135deg, #00ff88, #0099ff);
    --gradient-danger:  linear-gradient(135deg, #ff0080, #ff4466);
    --gradient-text:    linear-gradient(135deg, #ffffff 0%, #c8c8d8 50%, #b4b4c4 100%);

    /* Animation */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.25s var(--ease);

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

/* ===== Base ===== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    /* Spans the lower portion to create a horizon */
    inset: -50%;
    top: 20%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -2;
    transform: perspective(600px) rotateX(75deg);
    transform-origin: top center;
    animation: gridInfinite 10s linear infinite;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    /* Very soft global light from the top, fading to deep black */
    background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.04) 0%, rgba(10, 10, 15, 0.95) 80%);
    z-index: -3;
    pointer-events: none;
}

@keyframes gridInfinite {
    0% { transform: perspective(600px) rotateX(75deg) translateY(0); }
    100% { transform: perspective(600px) rotateX(75deg) translateY(60px); }
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ===== Glow orbs (fond animé) ===== */

.background-effects {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    animation: float 12s ease-in-out infinite;
    filter: blur(20px);
}

.glow-orb-1 {
    width: 500px; height: 500px;
    top: -15%; right: 5%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent 70%);
}

.glow-orb-2 {
    width: 400px; height: 400px;
    bottom: 0; left: -8%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent 70%);
    animation-delay: -4s;
}

.glow-orb-3 {
    width: 280px; height: 280px;
    top: 40%; left: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.025), transparent 70%);
    animation-delay: -8s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(-40px, -30px); }
    66%      { transform: translate(30px, 20px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.95); opacity: 0.85; }
}

/* ===== Site nav (sticky, minimaliste) ===== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 28px;
    /* Grid 3 colonnes : brand (left) | links (center) | actions (right).
       Les colonnes 1fr de gauche et de droite ont la même largeur quelle
       que soit leur contenu, ce qui garantit que .nav-links est toujours
       centré dans la viewport. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
}

.nav-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.nav-brand:hover { opacity: 0.85; }

.nav-logo {
    height: 28px;
    width: auto;
}

.nav-wordmark {
    height: 20px;
    width: auto;
    margin-top: 2px;
}

.nav-brand-name { letter-spacing: -0.02em; }

.nav-links {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.nav-links a {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.nav-links a.is-active {
    color: var(--text-primary);
}

.nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-cta {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    border: 1px solid transparent;
}

.nav-cta-ghost {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

.nav-cta-ghost:hover {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

/* ===== Home: splash + about ===== */

body.home {
    min-height: 100vh;
}

.home-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.hero-eyebrow::before { left: -45px; }
.hero-eyebrow::after { right: -45px; }

.hero-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 32px;
    color: #fff;
}

.hero-highlight {
    font-style: italic;
    font-weight: 400;
    color: #bbb;
    padding-right: 0.1em;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: #999;
    max-width: 540px;
    margin-bottom: 48px;
    line-height: 1.6;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

.btn-premium {
    padding: 16px 36px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
}

.btn-solid {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}
.btn-solid:hover {
    background: #000;
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
    background: transparent;
    color: #ff6680;
    border: 1px solid rgba(255, 102, 128, 0.4);
}
.btn-danger:hover {
    border-color: #ff6680;
    background: rgba(255, 102, 128, 0.08);
}

/* Scroll hint: chevron animé en bas du splash */
.home-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
}

.home-scroll-hint:hover {
    color: var(--text-secondary);
}

.home-scroll-chevron {
    width: 12px;
    height: 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    animation: scroll-bounce 2.4s infinite var(--ease);
}

@keyframes scroll-bounce {
    0%, 100% { transform: rotate(45deg) translate(-4px, -4px); opacity: 0.4; }
    50%      { transform: rotate(45deg) translate(2px,  2px);  opacity: 1;   }
}

/* Section "about": révélée au scroll */
.home-about {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    position: relative;
    z-index: 1;
}

.home-about-inner {
    max-width: 580px;
    text-align: center;
}

.home-about-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Barre meta en bas de page: chrome symétrique à la nav. Au vrai bout
   de page (pas fixed), apparaît quand on a fini de scroller. Le contenu
   interne est contraint au même max-width que la nav (1200px) pour
   garder une symétrie horizontale. */
.home-meta {
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 10;
}

.home-meta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.home-meta-left {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    font-weight: 500;
}

.home-meta-right {
    display: flex;
    gap: 4px;
}

.home-meta-right a {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
}

.home-meta-right a:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* ===== Intro overlay: stroke draw + fill =====
   Joué à chaque chargement. Le SVG est inliné, ses paths sont tracés
   en stroke (outline) à vitesse CONSTANTE (mêmes unités/sec pour tous).
   Les durées sont calculées en JS via getTotalLength() : chaque path
   met un temps proportionnel à sa longueur. Le path le plus long
   définit DRAW_TOTAL (4.5s par défaut). Les CSS vars sont set par JS.
*/

#intro-loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: introFadeOut 1.2s cubic-bezier(0.4, 0, 0.2, 1) 2.6s forwards;
    pointer-events: none;
}

.intro-logo {
    width: clamp(280px, 56vw, 520px);
    height: auto;
    opacity: 0;
    animation: introLogoFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.intro-path {
    fill: transparent;
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* dasharray + dashoffset posés par JS = vraies longueurs.
       Le draw est piloté par JS (requestAnimationFrame).
       Le fill se déclenche via la classe .intro-filled sur <html>. */
}

html.intro-filled .intro-path {
    animation: introFill 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes introLogoFadeIn {
    to { opacity: 1; }
}

@keyframes introFill {
    to {
        fill: #fff;
        stroke-opacity: 0;
    }
}

/* Modifs pour l'illusion d'animation parallèle :
   L'original (entier, avec les bons trous) apparait au moment du fill.
   Les sous-tracés (qui ont fait l'animation de stroke) disparaissent. */
.intro-original-fill {
    fill: #fff;
    opacity: 0;
    stroke: none;
}

html.intro-filled .intro-original-fill {
    animation: introOriginalFillAnim 0.6s ease-out forwards;
}

html.intro-filled .intro-path.intro-stroke-only {
    animation: introStrokeFadeOut 0.6s ease-out forwards;
}

/* On utilise opacity plutôt que fill pour éviter l'interpolation noire/grise */
@keyframes introOriginalFillAnim {
    to { opacity: 1; }
}

@keyframes introStrokeFadeOut {
    to { opacity: 0; }
}

@keyframes introFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Contenu de la page qui apparaît en douceur
   pendant que l'overlay disparaît. Léger translateY pour
   un effet "rising into view". Le main n'est pas caché car le logo est dedans. */
body.home > .site-nav,
body.home .hero-content,
body.home .home-scroll-hint,
body.home > .home-meta {
    opacity: 0;
    animation: pageReveal 1.4s cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
}

body.home .hero-content,
body.home .home-scroll-hint {
    transform: translateY(12px);
    animation-name: pageRevealRise;
}

@keyframes pageReveal {
    to { opacity: 1; }
}

@keyframes pageRevealRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== Home: Projects ===== */
.home-projects {
    min-height: 100vh;
    padding: 100px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.projects-inner {
    max-width: 1000px;
    width: 100%;
}

.section-title {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 48px;
    text-align: center;
}
.section-title::before,
.section-title::after {
    content: '—';
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.2);
}

/* Flex centré (au lieu d'un grid auto-fit qui faisait pleine-largeur
   quand 1 seul projet). Chaque card tient 33.33% du conteneur (3 par
   ligne), wrap naturel sur écrans étroits via min-width, et single
   card stays centrée au lieu de s'étaler. */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.projects-grid > .project-card {
    flex: 0 1 calc(33.333% - 16px);
    min-width: 280px;
}

.project-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    background: rgba(20, 20, 25, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    background: rgba(30, 30, 35, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card:hover::before {
    opacity: 1;
}

.project-card-inner {
    padding: 40px;
}

.project-name {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: #fff;
}

.project-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #999;
    margin-bottom: 32px;
    min-height: 3em;
}

.project-link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.3s ease, padding-left 0.3s ease;
}

.project-card:hover .project-link {
    opacity: 1;
    padding-left: 8px;
}

.project-status {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
}

.status-soon {
    border-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.project-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.project-link-secondary {
    opacity: 0.4;
}

.project-card:hover .project-link-secondary {
    padding-left: 0;
    color: #fff;
    opacity: 0.8;
}

.project-card-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.project-card-disabled:hover {
    transform: none;
    background: rgba(20, 20, 25, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===== Project Page: TSD ===== */
body.project-page {
    min-height: 100vh;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.project-hero {
    padding: 160px 24px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    text-align: center;
}

.project-showcase {
    position: relative;
    z-index: 15;
    padding: 0 24px 100px;
    display: flex;
    justify-content: center;
}

.mockup-wrapper {
    max-width: 1200px;
    width: 100%;
    position: relative;
}

.mockup-frame-pc {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(10, 10, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mockup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.mockup-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.05) 20px
    );
    color: rgba(255, 255, 255, 0.4);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
}

/* Hide placeholder overlay if image is successfully loaded */
.mockup-img[src]:not([src=""]) + .mockup-overlay {
    display: none;
}

.project-specs {
    padding: 60px 24px 80px;
    position: relative;
    z-index: 10;
}

.specs-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 60px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}

.spec-label::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #fff;
}

.spec-value {
    font-size: 1.05rem;
    color: #999;
    line-height: 1.6;
}

.project-gallery {
    padding: 40px 24px 100px;
    position: relative;
    z-index: 10;
}

.gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.gallery-item {
    aspect-ratio: 16/10;
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-item:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.gallery-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 1;
}

/* Hide placeholder text if image is loaded */
.gallery-item img[src]:not([src=""]) + .gallery-placeholder {
    display: none;
}

/* ===== Page patreon-result (callback OAuth) ===== */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hub-header {
    text-align: center;
    margin-bottom: 50px;
}

.hub-logo {
    display: inline-block;
    margin-bottom: 16px;
    animation: pulse 3s infinite ease-in-out;
}

.hub-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hub-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.hub-footer {
    margin-top: 60px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.result-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-success);
}

.result-card.error::before {
    background: var(--gradient-danger);
}

.result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.meta-item strong {
    color: var(--text-primary);
    margin-left: 6px;
}

.code-block {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 0.85rem;
    color: var(--neon-green);
    word-break: break-all;
    line-height: 1.5;
}

.code-block code { display: block; color: var(--neon-green); }

#tier-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.tier-T1 { background: rgba(0, 255, 136, 0.15); color: var(--neon-green); }
.tier-T2 { background: rgba(0, 153, 255, 0.15); color: var(--neon-blue); }
.tier-T3 { background: rgba(176, 0, 255, 0.15); color: var(--neon-purple); }

.error-text {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.cta-button:hover {
    box-shadow: 0 0 24px rgba(176, 0, 255, 0.18);
    transform: translateY(-2px);
}

.cta-icon { font-size: 1.2em; line-height: 1; }

.section-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 16px;
}

/* ===== Responsive ===== */

@media (max-width: 640px) {
    .nav-inner { padding: 10px 16px; gap: 12px; }
    .nav-brand-name { display: none; }

    .home-stage { padding: 32px 20px; }
    .home-wordmark-wrap { margin-bottom: 22px; }
    .home-scroll-hint { bottom: 24px; }

    .home-about { padding: 60px 20px; }

    .home-meta {
        text-align: center;
    }
    .home-meta-inner {
        padding: 10px 16px;
        gap: 12px;
        flex-direction: column;
        align-items: center;
    }
    .home-meta-right { gap: 12px; }

    .container { padding: 30px 16px; }
    .hub-title { font-size: 1.8rem; }
}

/* ===== Background responsive =====
   Sur portrait (mobile vertical), l'image 16:9 en `100% auto` laisse
   un grand vide vertical. On switch en `cover` pour qu'elle remplisse
   tout le viewport. On enlève aussi `fixed` qui est buggué sur iOS Safari. */

@media (orientation: portrait) {
    body::before {
        background-size: cover;
    }
}

/* ===== Lightbox Modal ===== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lightbox-content {
    position: relative;
    z-index: 1001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.lightbox-caption {
    margin-top: 16px;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    z-index: 1002;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    color: #fff;
    transform: scale(1.1);
}

.lightbox-close {
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    line-height: 1;
}

.lightbox-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.lightbox-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}

@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
        font-size: 2rem;
        padding: 10px;
    }
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}

/* ===================================================================
   Auth + Dashboard
   Pages : src/login.html, src/dashboard.html
   Convention : reprend les tokens existants (.btn-premium, --bg-*,
   --border-*), pas de nouveaux accents néon. Style "carte sobre" type
   GitHub / Linear, cohérent avec le reste du site.
   =================================================================== */

/* --- Auth (login.html) --- */

body.auth-page,
body.dashboard-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 48px 40px;
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
}

.auth-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.auth-card .btn-premium {
    width: 100%;
    justify-content: center;
}

.auth-banner {
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.5;
}
.auth-banner.is-error {
    background: rgba(255, 70, 100, 0.08);
    border: 1px solid rgba(255, 70, 100, 0.3);
    color: #ffb0bc;
}
.auth-banner.is-info {
    background: rgba(0, 153, 255, 0.08);
    border: 1px solid rgba(0, 153, 255, 0.3);
    color: #b0d4ff;
}

.auth-fineprint {
    margin-top: 32px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.auth-fineprint code {
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.btn-icon {
    display: inline-block;
    margin-right: 8px;
    opacity: 0.85;
}

/* --- Dashboard layout --- */

.dashboard-stage {
    flex: 1;
    padding: 100px 24px 60px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: 40px;
}

.dashboard-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 720px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Tool section
   Groupe visuel par outil T.Squad (TSD aujourd'hui, App2/App3 plus tard).
   Une `<section class="tool-section" data-tool="tsd">` est rendue comme
   UN gros panneau (mêmes tokens que .dashboard-card) qui contient un
   header (eyebrow + titre) + des subsections internes (les
   .dashboard-card à l'intérieur perdent leur chrome pour s'intégrer).
   Les subsections sont séparées par un trait horizontal discret.
   =================================================================== */

.tool-section {
    margin-top: 32px;
    padding: 28px;
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
}

.tool-section-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.tool-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
}

.tool-section-subtitle {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

.tool-section-grid {
    display: flex;
    flex-direction: column;
    gap: 0; /* gap géré par le padding-top des subsections suivantes */
}

/* Subsections internes : les .dashboard-card perdent leur chrome quand
   elles sont dans .tool-section. Visuellement on a UN panneau, pas
   plusieurs cards. */
.tool-section .dashboard-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.tool-section .dashboard-card + .dashboard-card,
.tool-section .dashboard-card[hidden] + .dashboard-card {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border-primary);
}

.dashboard-card {
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dashboard-card-wide {
    grid-column: 1 / -1;
}

/* Le card "wide" prend toute la largeur de la grille (esthétique
   "hero"), mais son contenu intérieur est borné ET centré pour pas
   paraître perdu dans un océan de vide quand seul un bouton est
   affiché. */
.dashboard-card-wide .dashboard-card-head,
.dashboard-card-wide .dashboard-card-body {
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Row d'actions horizontale (Copy + Regenerate) sous un code émis. */
.dashboard-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-self: stretch;
}

/* Row "action + aide inline" : le bouton primaire à gauche, un petit
   <details> "How does it work?" à droite (style link plutôt que card).
   Quand le details est expand, son contenu apparaît EN DESSOUS de la
   row entière (pas dans la row elle-même). */
.dashboard-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-self: stretch;
}

.dashboard-collapse-inline {
    flex-shrink: 0;
}
.dashboard-collapse-inline summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: var(--transition);
    padding: 4px 0;
}
.dashboard-collapse-inline summary::-webkit-details-marker {
    display: none;
}
.dashboard-collapse-inline summary::after {
    content: '›';
    font-size: 1rem;
    line-height: 1;
    color: var(--text-tertiary);
    transition: transform 0.2s var(--ease);
}
.dashboard-collapse-inline[open] summary::after {
    transform: rotate(90deg);
}
.dashboard-collapse-inline summary:hover {
    color: var(--text-primary);
}
.dashboard-collapse-inline[open] {
    flex-basis: 100%;
}
.dashboard-collapse-inline[open] > .dashboard-steps,
.dashboard-collapse-inline[open] > .dashboard-card-fineprint {
    margin-top: 16px;
}

/* Collapse expandable (HTML <details> natif) pour cacher du texte
   d'aide qui prendrait trop de place autrement. */
.dashboard-collapse {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    align-self: stretch;
}
.dashboard-collapse summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    user-select: none;
}
.dashboard-collapse summary::-webkit-details-marker {
    display: none;
}
.dashboard-collapse summary::before {
    content: '›';
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-tertiary);
    transition: transform 0.2s var(--ease);
    flex-shrink: 0;
}
.dashboard-collapse[open] summary::before {
    transform: rotate(90deg);
}
.dashboard-collapse summary:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}
.dashboard-collapse[open] summary {
    border-bottom: 1px solid var(--border-primary);
}
.dashboard-collapse > .dashboard-steps,
.dashboard-collapse > .dashboard-card-fineprint {
    padding: 16px;
}
.dashboard-collapse > .dashboard-card-fineprint {
    padding-top: 0;
}

/* Steps numérotés (How to activate the license). */
.dashboard-steps {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.55;
}
.dashboard-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: var(--neon-green);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dashboard-steps strong {
    color: var(--text-primary);
    font-weight: 600;
}
.dashboard-steps code {
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
}

/* Fineprint sous les steps ou sous le code (rappel discret). */
.dashboard-card-fineprint {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}
.dashboard-card-fineprint strong {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Liste des machines activées (card "Active machines"). */
.machine-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.machine-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}
.machine-info {
    flex: 1;
    min-width: 0;
}
.machine-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.machine-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.machine-revoke {
    flex-shrink: 0;
    padding: 6px 14px !important;
    font-size: 0.72rem !important;
}

@media (max-width: 640px) {
    .machine-row {
        flex-direction: column;
        align-items: stretch;
    }
    .machine-revoke {
        align-self: flex-end;
    }
}

.dashboard-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dashboard-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}
.dashboard-card-badge.is-ok {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.08);
}
.dashboard-card-badge.is-warn {
    color: #ffcc00;
    border-color: rgba(255, 204, 0, 0.4);
    background: rgba(255, 204, 0, 0.08);
}
.dashboard-card-badge.is-danger {
    color: #ff6680;
    border-color: rgba(255, 102, 128, 0.4);
    background: rgba(255, 102, 128, 0.08);
}
.dashboard-card-badge.is-muted {
    color: var(--text-tertiary);
}

.dashboard-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start; /* boutons à largeur naturelle, pas stretch */
}

/* Le contenu "data" (texte, dl, code block) doit prendre toute la
   largeur du card. Seuls les boutons gardent leur largeur naturelle. */
.dashboard-card-body > p,
.dashboard-card-body > dl,
.dashboard-card-body > div {
    align-self: stretch;
}

/* Boutons inside cards : padding réduit + plus discret pour pas
   dominer visuellement le contenu. */
.dashboard-card-body .btn-premium {
    padding: 10px 20px;
    font-size: 0.78rem;
}

.dashboard-card-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.dashboard-loading {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.9rem;
}

.dashboard-error {
    background: rgba(255, 70, 100, 0.08);
    border: 1px solid rgba(255, 70, 100, 0.3);
    color: #ffb0bc;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* Identity card (Discord avatar + name) */

.dashboard-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-avatar,
.dashboard-avatar-fallback {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-primary);
}
.dashboard-avatar-fallback {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-identity-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.dashboard-identity-meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}
.dashboard-identity-meta code {
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Key-value list (Patreon tier / pledge / dates) */

.dashboard-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 0.9rem;
}
.dashboard-kv dt {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
    align-self: center;
}
.dashboard-kv dd {
    color: var(--text-primary);
    font-weight: 500;
}

/* License code block */

.dashboard-code-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.dashboard-code-meta strong {
    color: var(--text-primary);
    margin-right: 4px;
}

.dashboard-code {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
    margin-top: 4px;
}
.dashboard-code code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--neon-green);
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* Nav user widget (avatar + logout) */

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 999px;
}
.nav-user-avatar,
.nav-user-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.nav-user-avatar-fallback {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}
.nav-user-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-logout {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.9rem;
    border-radius: 999px;
    transition: var(--transition);
}
.nav-user-logout:hover {
    color: #ff6680;
    background: rgba(255, 102, 128, 0.08);
}

@media (max-width: 640px) {
    .dashboard-stage {
        padding-top: 80px;
    }
    .dashboard-title {
        font-size: 1.85rem;
    }
    .dashboard-card {
        padding: 20px;
    }
    .nav-user-name {
        display: none;
    }
}

/* ===================================================================
   Language switcher (footer)
   Dropdown : un trigger pill qui affiche la langue courante + un menu
   absolu qui s'ouvre AU-DESSUS (footer = bas de page) avec les 3
   options. Style aligné sur le reste du site (bg-tertiary,
   border-primary, radius arrondi).
   =================================================================== */

.lang-switcher {
    position: relative;
    display: inline-block;
    margin-left: 12px;
}

/* Trigger : strictement identique aux liens .home-meta-right voisins
   (mêmes padding, font, color, transition, hover bg). Aucune bordure
   ni bg de base → hauteur identique aux <a>. Inline-flex pour le
   layout flag + label + chevron, mais sans line-height: 1 qui ferait
   pousser la box différemment des liens texte. */
.lang-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.lang-switcher-trigger:hover,
.lang-switcher.is-open .lang-switcher-trigger {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.lang-switcher-trigger svg {
    width: 16px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    display: block;
}

.lang-switcher .lang-code {
    line-height: 1;
}

.lang-switcher-chevron {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-tertiary);
    margin-left: 2px;
    transition: transform 0.2s var(--ease);
}
.lang-switcher.is-open .lang-switcher-chevron {
    transform: rotate(180deg);
    color: var(--text-primary);
}

/* Menu : absolu, ouverture vers le haut (footer = bas de page). */
.lang-switcher-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    list-style: none;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 50;
}

.lang-switcher-menu li {
    display: block;
}
.lang-switcher-menu li button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: calc(var(--radius-md) - 4px);
    transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
    line-height: 1;
}
.lang-switcher-menu li button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}
.lang-switcher-menu li button.is-active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    cursor: default;
}
.lang-switcher-menu li button.is-active::after {
    content: '✓';
    margin-left: auto;
    color: var(--neon-green);
    font-size: 0.85rem;
    font-weight: 700;
}
.lang-switcher-menu svg {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    display: block;
}