/* ═══════════════════════════════════════════════════
   STMKII — Style v4  |  Photos DJ, menu solide
═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
    --bg:          #1c2233;
    --surface:     #262e46;
    --surface2:    #2e3752;
    --surface3:    #3a4360;
    --border:      rgba(255,255,255,0.13);
    --border2:     rgba(255,255,255,0.24);
    --border-ac:   rgba(124,106,245,0.4);
    --text1:       #f5f7ff;
    --text2:       #bcc6e0;
    --text3:       #7d89a8;
    --accent:      #7c6af5;
    --accent2:     #b3aaff;
    --accent-dim:  rgba(124,106,245,0.16);
    --amber:       #f5b654;
    --amber-dim:   rgba(240,168,48,0.14);
    --white-sheen: rgba(255,255,255,0.05);
    --font-display:'Space Grotesk',sans-serif;
    --font-body:   'Inter',sans-serif;
    --r-sm:4px; --r-md:9px; --r-lg:14px; --r-xl:22px;
    --t:0.18s; --ease:cubic-bezier(0.4,0,0.2,1);
    --max-w:1100px; --max-sm:680px; --pad-sec:5rem;
}

html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text2); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.hidden  { display:none!important; }
.mt-lg   { margin-top:2.5rem; }
.container    { max-width:var(--max-w);  margin:0 auto; padding:0 1.5rem; }
.container-sm { max-width:var(--max-sm); margin:0 auto; padding:0 1.5rem; }

.skip-link { position:absolute;top:-100%;left:1rem;background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:var(--r-md);font-weight:600;z-index:9999;text-decoration:none;transition:top var(--t); }
.skip-link:focus { top:.75rem; }

/* ═══════════════════════════════════════════════════
   NAVIGATION — fond SOLIDE, hamburger TRÈS visible
═══════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    /* Fond plein + blur — jamais transparent sur photo */
    background: #1c2233;
    border-bottom: 2px solid rgba(124,106,245,0.3);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    transition: box-shadow var(--t), border-color var(--t);
}
.site-header.is-scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.7); border-bottom-color: rgba(124,106,245,0.5); }
.nav-container {
    max-width:var(--max-w); margin:0 auto;
    padding:0 1.25rem;
    height:64px;
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo { text-decoration:none; display:flex; align-items:center; }
.logo-word {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text1);
    display: inline-flex;
    align-items: baseline;
    gap: .05em;
    transition: color var(--t), opacity var(--t);
}
.logo-word .logo-word-accent { color: var(--accent2); }
.logo:hover .logo-word { opacity: .85; }

.nav-links { display:flex; gap:.2rem; }
.nav-links a { text-decoration:none; color:var(--text2); font-size:.875rem; font-weight:500; padding:.48rem .8rem; border-radius:var(--r-md); transition:color var(--t),background var(--t); }
.nav-links a:hover  { color:var(--text1); background:var(--surface2); }
.nav-links a.active { color:var(--accent2); background:var(--accent-dim); }

/* ─── Hamburger — fond plein accent, barres blanches ─── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Fond accent bien visible sur n'importe quel arrière-plan */
    background: var(--accent);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    padding: .6rem .7rem;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    transition: background var(--t);
}
.nav-toggle:hover { background: var(--accent2); }
.nav-toggle span {
    display: block;
    width: 20px; height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] { background: var(--surface3); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; width:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

@media(max-width:768px) {
    .nav-toggle { display:flex; }
    .nav-links {
        display:none; position:fixed;
        top:64px; left:0; right:0; bottom:0;
        background:#1c2233;
        flex-direction:column;
        padding:2rem 1.5rem; gap:.4rem;
        border-top:2px solid rgba(124,106,245,0.3);
        overflow-y:auto;
        z-index:190;
    }
    .nav-links.open { display:flex; }
    .nav-links a { font-size:1.1rem; padding:.9rem 1.1rem; border-radius:var(--r-md); }
}

/* ═══════════════════════════════════════════════════
   HERO — photo fond-accueil
═══════════════════════════════════════════════════ */
.hero {
    position:relative; min-height:100vh;
    display:flex; align-items:center;
    padding-top:64px; overflow:hidden;
}
.hero-bg-img {
    position:absolute; inset:0;
    background-image:url('/assets/img/hero-bg.webp');
    background-size:cover; background-position:center 30%;
    background-repeat:no-repeat;
}
.hero-overlay {
    position:absolute; inset:0;
    background:
        linear-gradient(100deg,
            rgba(28,34,51,.90) 0%,
            rgba(28,34,51,.72) 42%,
            rgba(28,34,51,.30) 68%,
            rgba(28,34,51,.10) 100%),
        linear-gradient(180deg,
            rgba(28,34,51,.42) 0%,
            transparent 35%,
            rgba(28,34,51,.55) 100%);
}
.hero-content { position:relative; z-index:1; padding:4rem 1.5rem; max-width:var(--max-w); margin:0 auto; width:100%; }
.hero-inner { max-width:520px; }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(124,106,245,.15); border:1px solid rgba(124,106,245,.3);
    border-radius:99px; padding:.35rem 1rem;
    font-family:var(--font-display); font-size:.7rem; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--accent2);
    margin-bottom:1.5rem;
    opacity:0; animation:hero-rise .7s var(--ease) .1s forwards;
}
.hero-eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent2); flex-shrink:0; box-shadow:0 0 8px var(--accent2); animation:eyebrow-blink 1.6s ease-in-out infinite; }
@keyframes eyebrow-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-title { font-family:var(--font-display); font-size:clamp(2.8rem,8vw,5.5rem); font-weight:700; letter-spacing:-.035em; color:var(--text1); line-height:1.05; margin-bottom:1.25rem; text-shadow:0 2px 20px rgba(0,0,0,.6);
    opacity:0; animation:hero-rise .8s var(--ease) .22s forwards;
}
.hero-accent {
    background:linear-gradient(100deg, var(--accent2) 20%, #fff 45%, var(--amber) 60%, var(--accent2) 80%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:hero-shine 6s linear infinite;
}
@keyframes hero-shine { 0%{background-position:0% 0} 100%{background-position:250% 0} }
.hero-subtitle { font-size:clamp(.95rem,2vw,1.1rem); color:rgba(240,243,255,.85); max-width:44ch; line-height:1.75; margin-bottom:2.5rem; text-shadow:0 1px 8px rgba(0,0,0,.6);
    opacity:0; animation:hero-rise .8s var(--ease) .36s forwards;
}
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; opacity:0; animation:hero-rise .8s var(--ease) .5s forwards; }
@keyframes hero-rise { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

/* Orbes de dégradé animées — profondeur et mouvement en fond de hero */
.hero-orbs { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; transition:transform .4s cubic-bezier(0.2,0,0.2,1); will-change:transform; }
.hero-orb {
    position:absolute; border-radius:50%; filter:blur(60px);
    opacity:.45; mix-blend-mode:screen;
}
.hero-orb-1 { width:420px; height:420px; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); top:-8%; right:8%; animation:orb-float-1 16s ease-in-out infinite; }
.hero-orb-2 { width:340px; height:340px; background:radial-gradient(circle, var(--amber) 0%, transparent 70%); bottom:-10%; left:2%; animation:orb-float-2 20s ease-in-out infinite; }
.hero-orb-3 { width:260px; height:260px; background:radial-gradient(circle, var(--accent2) 0%, transparent 70%); top:35%; left:38%; animation:orb-float-3 18s ease-in-out infinite; }
@keyframes orb-float-1 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px,30px) scale(1.12); } }
@keyframes orb-float-2 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-25px) scale(1.08); } }
@keyframes orb-float-3 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,20px) scale(.9); } }
@media(prefers-reduced-motion:reduce) {
    .hero-eyebrow,.hero-title,.hero-subtitle,.hero-cta { opacity:1; animation:none; }
    .hero-orb { display:none; }
}

/* Mini égaliseur décoratif — clin d'œil DJ sous le sous-titre */
.hero-waveform { display:flex; align-items:flex-end; gap:3px; height:20px; margin-bottom:1.75rem; opacity:0; animation:hero-rise .8s var(--ease) .44s forwards; }
.hero-waveform span { width:3px; border-radius:2px; background:linear-gradient(180deg,var(--accent2),var(--accent)); animation:wave-bounce 1.4s ease-in-out infinite; }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:1; }
.hero-scroll span { display:block; width:24px; height:40px; border:1.5px solid rgba(255,255,255,.3); border-radius:12px; position:relative; }
.hero-scroll span::before { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:8px; background:var(--accent2); border-radius:2px; animation:scroll-dot 2s infinite; }
@keyframes scroll-dot { 0%,100%{opacity:1;top:6px} 50%{opacity:0;top:18px} }
@keyframes wave-bounce { 0%,100%{ height:4px } 50%{ height:100% } }

/* Chips de styles musicaux sous l'égaliseur du hero */
.hero-genres { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; opacity:0; animation:hero-rise .8s var(--ease) .47s forwards; }
.hero-genres span {
    font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    color:rgba(240,243,255,.85); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
    border-radius:99px; padding:.32rem .85rem; backdrop-filter:blur(6px);
}

/* Carte flottante "à l'antenne" — chiffres clés en verre dépoli, coin du hero */
.hero-float-card {
    position:absolute; right:max(1.5rem, calc((100vw - var(--max-w))/2 + 1.5rem)); top:50%; transform:translateY(-50%);
    background:rgba(38,46,70,.55); backdrop-filter:blur(16px); border:1px solid var(--border2);
    border-radius:var(--r-xl); padding:1.4rem 1.6rem; box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 var(--white-sheen);
    min-width:220px; z-index:1;
}
.hero-float-eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); margin-bottom:1rem; }
.hero-float-eyebrow .eq-bars span { background:var(--accent2); }
.hero-float-stats { display:flex; flex-direction:column; gap:.7rem; }
.hero-float-stats div { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.hero-float-stats strong { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--text1); }
.hero-float-stats span { font-size:.72rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
@media(max-width:1080px) { .hero-float-card { display:none; } }

/* ═══════════════════════════════════════════════════
   STATS BAR — chiffres réels animés sous le hero
═══════════════════════════════════════════════════ */
.stats-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:2.25rem 0; position:relative; z-index:1; }
.stats-bar-inner { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.75rem,5vw,4rem); text-align:center; }
.stats-bar-item { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.stats-bar-num { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; color:var(--text1); letter-spacing:-.02em; line-height:1; }
.stats-bar-num::after { content:'+'; font-size:.55em; color:var(--accent2); margin-left:1px; }
.stats-bar-item:last-child .stats-bar-num::after { content:''; }
.stats-bar-suffix { font-size:.55em; color:var(--accent2); }
.stats-bar-label { font-size:.75rem; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* ─── Scroll reveal générique ─────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ═══════════════════════════════════════════════════
   PAGE HERO — bannière photo sur pages intérieures
   Utilise dj-gear.webp (image 1, bleue)
═══════════════════════════════════════════════════ */
.page-hero {
    position:relative;
    padding:7rem 0 3.5rem;
    overflow:hidden;
    border-bottom:1px solid var(--border);
}
.page-hero-bg {
    position:absolute; inset:0;
    background-image:url('/assets/img/dj-gear.webp');
    background-size:cover; background-position:center 40%;
    background-repeat:no-repeat;
    will-change:background-position;
}
.page-hero-overlay {
    position:absolute; inset:0;
    background:
        linear-gradient(180deg,
            rgba(28,34,51,.78) 0%,
            rgba(28,34,51,.60) 50%,
            rgba(28,34,51,.88) 100%);
}
.page-hero > .container { position:relative; z-index:1; }

.page-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); font-weight:700; letter-spacing:-.03em; color:var(--text1); margin-bottom:.6rem; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.page-desc { font-size:1rem; color:rgba(240,243,255,.8); max-width:52ch; }
.section-eyebrow { font-family:var(--font-display); font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent2); margin-bottom:.65rem; }

/* ═══════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════ */
.section { padding:var(--pad-sec) 0; }
.section-title { font-family:var(--font-display); font-size:clamp(1.55rem,4vw,2.3rem); font-weight:700; letter-spacing:-.025em; color:var(--text1); line-height:1.2; margin-bottom:1rem; }
.section-desc { font-size:1rem; color:var(--text2); max-width:52ch; line-height:1.75; margin-bottom:2rem; }

/* Section avec image latérale (dj-gear) */
.section-split {
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    overflow:hidden;
}
.section-split-text { padding:4rem 3rem 4rem 1.5rem; display:flex; flex-direction:column; justify-content:center; }
.section-split-img {
    position:relative; min-height:360px;
    background-image:url('/assets/img/dj-gear.webp');
    background-size:cover; background-position:center;
    will-change:background-position;
}
.section-split-img::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--surface) 0%, transparent 40%);
}
@media(max-width:768px) {
    .section-split { grid-template-columns:1fr; }
    .section-split-img { min-height:220px; }
    .section-split-text { padding:2.5rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-size:.875rem; font-weight:500; padding:.7rem 1.5rem; border-radius:var(--r-md); border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform .15s ease-out; white-space:nowrap; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.btn-primary { background:var(--accent); color:#fff; font-weight:600; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.08); color:var(--text1); border-color:var(--border2); }
.btn-ghost:hover { background:rgba(255,255,255,.14); }
.btn-outline { background:transparent; color:var(--accent2); border-color:rgba(124,106,245,.4); }
.btn-outline:hover { background:var(--accent-dim); }
.btn-full { width:100%; justify-content:center; }
.btn-sm   { padding:.4rem .9rem; font-size:.8rem; }
.btn-lg   { padding:.95rem 2rem; font-size:.95rem; }
.btn-danger { background:rgba(248,113,113,.1); color:#f87171; border-color:rgba(248,113,113,.3); }
.btn-danger:hover { background:rgba(248,113,113,.2); }

/* ═══════════════════════════════════════════════════
   SECTION FINALE — CTA collaboration
═══════════════════════════════════════════════════ */
.section-final {
    position:relative; overflow:hidden;
    background:var(--surface); border-top:1px solid var(--border);
}
.final-glow {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 30% 20%, rgba(124,106,245,.22) 0%, transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(240,168,48,.14) 0%, transparent 50%);
    animation: final-glow-shift 10s ease-in-out infinite alternate;
}
@keyframes final-glow-shift {
    0%   { transform:translate(0,0) scale(1); }
    100% { transform:translate(-3%,3%) scale(1.08); }
}
.section-final .btn-primary {
    box-shadow:0 0 0 1px rgba(124,106,245,.4), 0 14px 40px rgba(124,106,245,.3);
}
.section-final .btn-primary:hover { box-shadow:0 0 0 1px var(--accent2), 0 18px 48px rgba(124,106,245,.45); }
@media(prefers-reduced-motion:reduce) { .final-glow { animation:none; } }

/* ═══════════════════════════════════════════════════
   BOUTON RETOUR EN HAUT
═══════════════════════════════════════════════════ */
.back-to-top {
    position:fixed; right:1.5rem; bottom:1.5rem; z-index:250;
    width:46px; height:46px; border-radius:50%;
    background:var(--accent); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 22px rgba(124,106,245,.45);
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
    /* Zone de sécurité iOS (encoche / barre du bas) */
    margin-bottom:env(safe-area-inset-bottom, 0px);
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--accent2); transform:translateY(-2px); }
.back-to-top:focus-visible { outline:2px solid var(--accent2); outline-offset:3px; }
@media(max-width:640px) {
    .back-to-top { right:1rem; bottom:1rem; width:44px; height:44px; }
}
/* Remonte au-dessus du mini-lecteur quand il est affiché */
body:has(.sticky-player:not([hidden])) .back-to-top { bottom:5.5rem; }
@media(max-width:640px) {
    /* Le mini-lecteur peut passer sur 2 lignes en mobile : marge plus large */
    body:has(.sticky-player:not([hidden])) .back-to-top { bottom:6.5rem; }
}
/* Caché pendant que le menu mobile plein écran est ouvert */
body:has(.nav-links.open) .back-to-top { display:none; }

/* ═══════════════════════════════════════════════════
   LECTEUR AUDIO
═══════════════════════════════════════════════════ */
.section-player { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.audio-player { display:flex; align-items:center; gap:1.25rem; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-xl); padding:1rem 1.4rem; max-width:700px; margin-bottom:2rem; position:relative; overflow:hidden; transition:border-color var(--t), box-shadow var(--t); box-shadow:inset 0 1px 0 var(--white-sheen); }
.audio-player::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 50%,var(--amber) 100%); background-size:200% 100%; }
.audio-player.is-playing { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 20px 50px rgba(124,106,245,.25); }
.audio-player.is-playing::before { animation:sp-shimmer 3s linear infinite; }
.player-cover { width:70px; height:70px; border-radius:var(--r-md); object-fit:cover; flex-shrink:0; border:1px solid var(--border); transition:box-shadow var(--t); position:relative; z-index:1; }
.audio-player.is-playing .player-cover { box-shadow:0 0 0 3px var(--accent-dim), 0 0 0 1px var(--accent); }

/* Platine vinyle — décor discret derrière la pochette, ne tourne que si ça joue */
.player-cover-wrap { position:relative; flex-shrink:0; }
.vinyl-disc {
    position:absolute; top:50%; left:-14px;
    width:70px; height:70px; border-radius:50%;
    transform:translateY(-50%) rotate(0deg);
    background:
        radial-gradient(circle at center, #0c0e16 0 6px, transparent 6.5px),
        repeating-radial-gradient(circle at center, #14182a 0, #14182a 3px, #1b2036 3.5px, #1b2036 6px);
    box-shadow:0 4px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
    z-index:0;
    animation:vinyl-spin 2.8s linear infinite;
    animation-play-state:paused;
    transition:left var(--t) var(--ease);
}
.audio-player.is-playing .vinyl-disc { animation-play-state:running; left:-19px; }
.vinyl-label {
    position:absolute; inset:0; margin:auto; width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 0 0 2px #0c0e16;
}
.vinyl-label::after { content:''; position:absolute; inset:0; margin:auto; width:5px; height:5px; border-radius:50%; background:#0c0e16; }
@keyframes vinyl-spin {
    from { transform:translateY(-50%) rotate(0deg); }
    to   { transform:translateY(-50%) rotate(360deg); }
}
@media(prefers-reduced-motion:reduce) { .vinyl-disc { animation:none; } }
@media(max-width:480px) { .vinyl-disc { display:none; } }
.player-controls { flex:1; display:flex; align-items:center; gap:1rem; min-width:0; }
.play-pause { width:46px; height:46px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--t); box-shadow:0 0 18px rgba(124,106,245,.3); }
.play-pause:hover { background:var(--accent2); transform:scale(1.07); }
.play-pause.playing { animation:play-btn-pulse 1.6s ease-in-out infinite; }
.player-track { flex:1; display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.player-progress { background:var(--surface3); border-radius:4px; height:5px; cursor:pointer; overflow:hidden; }
.player-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:4px; width:0%; transition:width .25s linear; }
.player-times { display:flex; align-items:center; gap:.5rem; justify-content:space-between; font-size:.72rem; color:var(--text3); font-variant-numeric:tabular-nums; }
.player-now-playing { display:none; align-items:center; gap:.35rem; color:var(--accent2); font-weight:600; letter-spacing:.03em; }
.audio-player.is-playing .player-now-playing { display:inline-flex; }
.player-download { color:var(--text3); text-decoration:none; transition:color var(--t); flex-shrink:0; }
.player-download:hover { color:var(--accent2); }

/* ═══════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════ */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }
.card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--t),transform var(--t),box-shadow var(--t); position:relative; box-shadow:inset 0 1px 0 var(--white-sheen); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 50%,var(--amber) 100%); background-size:200% 100%; opacity:0; transition:opacity var(--t); }
.card:hover::before { opacity:1; }
.card:hover { border-color:var(--border-ac); transform:translateY(-3px); box-shadow:inset 0 1px 0 var(--white-sheen), 0 14px 40px rgba(0,0,0,.35); }
.card-cover { position:relative; aspect-ratio:1; overflow:hidden; background:var(--surface3); }
.card-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.card:hover .card-cover img { transform:scale(1.05); }
.card-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text3); }

/* Bouton play/pause — visible en permanence dès que ça joue, pas juste au survol */
.card-play {
    position:absolute; inset:0;
    background:rgba(28,34,51,.4);
    backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity var(--t), background var(--t);
    border:none; cursor:pointer; color:#fff;
}
.card-cover:hover .card-play,
.card-play:focus-visible { opacity:1; }
.card-play .icon-pause { display:none; }
.card-play svg { filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition:transform var(--t); }
.card-play:hover svg { transform:scale(1.12); }
.card-play.playing {
    opacity:1;
    background:linear-gradient(180deg, rgba(124,106,245,.15) 0%, rgba(28,34,51,.55) 100%);
}
.card-play.playing .icon-play  { display:none; }
.card-play.playing .icon-pause { display:block; }

/* Halo + bordure animée sur toute la card tant que ça joue */
.card.is-playing { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 16px 44px rgba(124,106,245,.28); }
.card.is-playing .card-cover::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    box-shadow: inset 0 0 0 2px var(--accent);
    animation: card-pulse 1.8s ease-in-out infinite;
}
@keyframes card-pulse { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* Badge "Lecture en cours" + égaliseur animé — toujours visible en haut de la cover */
.now-playing-badge {
    position:absolute; top:.6rem; left:.6rem; z-index:2;
    display:none; align-items:center; gap:.4rem;
    background:var(--accent); color:#fff;
    font-family:var(--font-display); font-size:.62rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    padding:.3rem .55rem .3rem .45rem; border-radius:99px;
    box-shadow:0 4px 14px rgba(124,106,245,.45);
}
.card.is-playing .now-playing-badge { display:inline-flex; }
.eq-bars { display:flex; align-items:flex-end; gap:2px; height:11px; }
.eq-bars span { width:2.5px; background:#fff; border-radius:1px; animation:eq-bounce 0.9s ease-in-out infinite; }
.eq-bars span:nth-child(1){ animation-delay:0s;  }
.eq-bars span:nth-child(2){ animation-delay:.2s; }
.eq-bars span:nth-child(3){ animation-delay:.4s; }
@keyframes eq-bounce { 0%,100%{ height:3px } 50%{ height:11px } }

/* Mini barre de progression sur la cover pendant la lecture */
.card-mini-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.35); display:none; z-index:2; }
.card.is-playing .card-mini-progress { display:block; }
.card-mini-bar { height:100%; width:0%; background:var(--accent2); transition:width .2s linear; }

.card-body { padding:1rem; }
.card-title { font-weight:600; font-size:.9rem; color:var(--text1); margin-bottom:.4rem; }
.card-tag { display:inline-block; font-size:.68rem; font-weight:600; background:var(--accent-dim); color:var(--accent2); padding:2px 8px; border-radius:99px; margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.06em; }
.card-date { font-size:.76rem; color:var(--text3); display:block; }
.card-desc { font-size:.83rem; color:var(--text2); margin-top:.5rem; line-height:1.55; }
.card-actions { display:flex; justify-content:flex-end; margin-top:.65rem; }

/* ═══════════════════════════════════════════════════
   PODCASTS
═══════════════════════════════════════════════════ */
.podcast-list { display:flex; flex-direction:column; gap:.55rem; }
.podcast-item { display:flex; align-items:center; gap:1.1rem; padding:1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); transition:border-color var(--t),background var(--t),transform var(--t); box-shadow:inset 0 1px 0 var(--white-sheen); }
.podcast-item:hover { border-color:var(--border-ac); background:var(--surface2); transform:translateX(4px); }
.podcast-thumb { width:66px; height:66px; border-radius:var(--r-md); object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
.podcast-thumb-placeholder { width:66px; height:66px; background:var(--surface2); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:var(--text3); flex-shrink:0; border:1px solid var(--border); }
.podcast-info { flex:1; min-width:0; }
.podcast-title { font-size:.95rem; font-weight:600; color:var(--text1); margin-bottom:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podcast-meta { font-size:.76rem; color:var(--text3); display:flex; gap:.5rem; align-items:center; margin-bottom:.3rem; }
.podcast-desc { font-size:.82rem; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podcast-actions { display:flex; gap:.5rem; align-items:center; flex-shrink:0; }
.btn-play { width:40px; height:40px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); color:var(--text1); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--t); flex-shrink:0; }
.btn-play:hover { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 14px rgba(124,106,245,.35); }
.btn-play.playing {
    background:var(--accent); border-color:var(--accent); color:#fff;
    box-shadow:0 0 0 4px var(--accent-dim), 0 0 18px rgba(124,106,245,.5);
    animation: play-btn-pulse 1.6s ease-in-out infinite;
}
@keyframes play-btn-pulse {
    0%,100% { box-shadow:0 0 0 4px var(--accent-dim), 0 0 18px rgba(124,106,245,.5); }
    50%     { box-shadow:0 0 0 7px rgba(124,106,245,.05), 0 0 22px rgba(124,106,245,.7); }
}
.podcast-item.is-playing { border-color:var(--accent); background:var(--surface2); }
.podcast-item.is-playing .podcast-thumb,
.podcast-item.is-playing .podcast-thumb-placeholder { box-shadow:0 0 0 2px var(--accent); }
.podcast-item.is-playing .podcast-title { color:var(--accent2); }

/* ═══════════════════════════════════════════════════
   RADIO HERO — panneau "à l'antenne" avec platine vinyle
   (page Podcasts — logo unique fourni par l'utilisateur)
═══════════════════════════════════════════════════ */
.radio-hero { position:relative; padding:6.5rem 0 3rem; overflow:hidden; border-bottom:1px solid var(--border); }
.radio-hero-bg {
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center 35%; background-repeat:no-repeat;
    opacity:.28;
}
.radio-hero-glow {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(28,34,51,.55) 0%, rgba(28,34,51,.88) 100%),
        radial-gradient(ellipse 60% 55% at 18% 15%, rgba(124,106,245,.22) 0%, transparent 70%),
        radial-gradient(ellipse 55% 50% at 85% 75%, rgba(240,168,48,.14) 0%, transparent 70%);
}
.radio-hero .container { position:relative; z-index:1; }
.radio-panel { display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.radio-turntable { position:relative; width:150px; height:150px; flex-shrink:0; }
.radio-vinyl {
    position:relative; width:150px; height:150px; border-radius:50%;
    background:
        radial-gradient(circle at center, transparent 0 47px, rgba(255,255,255,.06) 47.5px, rgba(255,255,255,.06) 49px, transparent 49.5px),
        repeating-radial-gradient(circle at center, #14182a 0, #14182a 4px, #1b2036 4.5px, #1b2036 8px);
    box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 0 0 1px var(--border2), 0 0 0 6px var(--surface2);
    display:flex; align-items:center; justify-content:center;
    animation:vinyl-spin 9s linear infinite;
    transition:box-shadow .3s var(--ease);
}
.radio-vinyl-logo { width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #0c0e16, 0 0 0 4px var(--border2); }
.radio-vinyl-ring { position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed rgba(124,106,245,.3); opacity:.7; }
.radio-vinyl.is-live { animation-duration:2.6s; box-shadow:0 10px 34px rgba(124,106,245,.4), inset 0 0 0 1px var(--accent), 0 0 0 6px var(--surface2); }
.radio-tonearm {
    position:absolute; top:-8px; right:-14px; width:6px; height:78px; border-radius:4px;
    background:linear-gradient(180deg,var(--text3),var(--surface3));
    transform:rotate(28deg); transform-origin:top center; transition:transform .4s var(--ease);
    box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.radio-tonearm::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--accent2); box-shadow:0 0 10px rgba(169,158,255,.6); }
.radio-vinyl.is-live ~ .radio-tonearm { transform:rotate(8deg); }
@media(prefers-reduced-motion:reduce) { .radio-vinyl { animation:none; } }
@media(max-width:560px) { .radio-turntable { width:110px; height:110px; } .radio-vinyl { width:110px; height:110px; } .radio-vinyl-logo { width:70px; height:70px; } .radio-tonearm { display:none; } }

.radio-info { flex:1; min-width:240px; }
.radio-onair {
    display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
    background:var(--surface2); border:1px solid var(--border2); border-radius:99px;
    padding:.4rem .9rem .4rem .7rem; font-size:.72rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text3); transition:color .3s,border-color .3s,background .3s;
}
.radio-onair .eq-bars span { background:var(--text3); }
.radio-onair.is-live { color:var(--accent2); border-color:rgba(124,106,245,.4); background:var(--accent-dim); }
.radio-onair.is-live .eq-bars span { background:var(--accent2); }

.playlist-banner { margin-bottom:1.5rem; padding:1.25rem 1.5rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; align-items:center; gap:1rem; }
.playlist-banner-icon { color:var(--accent2); flex-shrink:0; }
.playlist-banner p { font-size:.875rem; color:var(--text2); margin:0; }

.playlist-num {
    width:40px; height:40px; border-radius:var(--r-md); flex-shrink:0;
    background:var(--surface2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--text3);
    transition:color var(--t), border-color var(--t), background var(--t);
}
.podcast-item:hover .playlist-num { color:var(--text1); }
.podcast-item.is-playing .playlist-num { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-icon { width:34px; height:34px; border-radius:var(--r-md); background:transparent; border:1px solid var(--border); color:var(--text3); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all var(--t); }
.btn-icon:hover { color:var(--text1); border-color:var(--border2); }

/* ═══════════════════════════════════════════════════
   PARTAGE — bouton "copier le lien" + tooltip de confirmation
═══════════════════════════════════════════════════ */
.btn-share { position:relative; cursor:pointer; }
.btn-share .icon-copied { display:none; color:#4ade80; }
.btn-share.copied .icon-share  { display:none; }
.btn-share.copied .icon-copied { display:block; }
.btn-share.copied { border-color:#4ade80; color:#4ade80; }
.share-tooltip {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--surface3); color:var(--text1); font-size:.7rem; font-weight:600; white-space:nowrap;
    padding:.35rem .65rem; border-radius:var(--r-sm); border:1px solid var(--border2);
    opacity:0; pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease);
    box-shadow:0 6px 18px rgba(0,0,0,.3); z-index:5;
}
.btn-share.copied .share-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }

/* Carte / ligne playlist ciblée par un lien partagé — halo temporaire */
@keyframes shared-target-pulse {
    0%   { box-shadow:0 0 0 0 rgba(124,106,245,.55); }
    70%  { box-shadow:0 0 0 14px rgba(124,106,245,0); }
    100% { box-shadow:0 0 0 0 rgba(124,106,245,0); }
}
.is-shared-target { animation:shared-target-pulse 1.6s ease-out 2; border-color:var(--accent) !important; }

.sticky-player { position:fixed; bottom:0; left:0; right:0; background:rgba(28,34,51,.94); backdrop-filter:blur(20px); border-top:2px solid var(--accent); padding:.7rem 1.5rem; display:flex; align-items:center; gap:1rem; z-index:200; box-shadow:0 -8px 30px rgba(0,0,0,.4); }
.sticky-player::before {
    content:''; position:absolute; top:-2px; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), var(--accent2), var(--amber), var(--accent));
    background-size:200% 100%; animation:sp-shimmer 3s linear infinite;
}
@keyframes sp-shimmer { 0%{ background-position:0% 0 } 100%{ background-position:200% 0 } }
.sp-info { display:flex; align-items:center; gap:.75rem; min-width:0; flex:1; }
.sp-cover { width:42px; height:42px; border-radius:var(--r-sm); object-fit:cover; border:1px solid var(--border); }
.sp-title { font-size:.85rem; font-weight:500; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-controls { display:flex; align-items:center; gap:.75rem; flex:2; }
.sp-play { all:unset; cursor:pointer; color:var(--accent2); display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--accent-dim); flex-shrink:0; transition:background var(--t); }
.sp-play:hover { background:var(--accent); color:#fff; }
.sp-eq { display:none; align-items:flex-end; gap:2px; height:11px; margin-right:.15rem; flex-shrink:0; }
.sticky-player.is-playing .sp-eq { display:flex; }
.sp-eq span { width:2.5px; background:var(--accent2); border-radius:1px; animation:eq-bounce 0.9s ease-in-out infinite; }
.sp-eq span:nth-child(1){ animation-delay:0s;  }
.sp-eq span:nth-child(2){ animation-delay:.2s; }
.sp-eq span:nth-child(3){ animation-delay:.4s; }
.sp-progress { flex:1; height:5px; background:var(--surface3); border-radius:4px; overflow:hidden; cursor:pointer; }
.sp-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); width:0%; transition:width .25s linear; }
.sp-close { all:unset; cursor:pointer; color:var(--text3); padding:.25rem; }
.sp-close:hover { color:var(--text2); }
@media(max-width:640px) {
    .sticky-player { flex-wrap:wrap; padding:.6rem 1rem; }
    .sp-title { max-width:140px; }
}

/* ═══════════════════════════════════════════════════
   LABELS
═══════════════════════════════════════════════════ */
.labels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:1.25rem; }
.label-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; transition:border-color var(--t),transform var(--t); position:relative; overflow:hidden; }
.label-card::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),var(--amber)); opacity:0; transition:opacity var(--t); }
.label-card:hover { border-color:var(--border-ac); transform:translateY(-2px); }
.label-card:hover::after { opacity:1; }
.label-logo-wrap { height:62px; display:flex; align-items:center; margin-bottom:1.2rem; }
.label-logo { max-height:52px; max-width:150px; object-fit:contain; }
.label-logo-placeholder { width:58px; height:58px; background:var(--surface2); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--accent2); letter-spacing:.05em; border:1px solid var(--border); }
.label-name { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text1); margin-bottom:.5rem; }
.label-date { font-size:.78rem; color:var(--text3); display:flex; align-items:center; gap:.4rem; margin-bottom:.75rem; }
.label-desc { font-size:.86rem; color:var(--text2); line-height:1.65; margin-bottom:1rem; }
.label-link { font-size:.82rem; color:var(--accent2); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; transition:gap var(--t); }
.label-link:hover { gap:.55rem; }

/* ═══════════════════════════════════════════════════
   CONTACT / FORMS
═══════════════════════════════════════════════════ */
.form-message { min-height:1.5rem; font-size:.875rem; margin-top:.5rem; }
.form-message.success { color:#5dce8a; }
.form-message.error   { color:#f0786a; }

.contact-grid { display:grid; grid-template-columns:1fr 1.8fr; gap:3rem; align-items:start; }
@media(max-width:640px){ .contact-grid { grid-template-columns:1fr; } }
.contact-info-title { font-family:var(--font-display); font-weight:600; color:var(--text1); margin-bottom:1.5rem; font-size:1rem; }
.contact-list { list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:.75rem; }
.contact-list li { display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:var(--text2); }
.contact-list a { color:var(--accent2); text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }
.contact-social { display:flex; flex-direction:column; gap:.5rem; }
.contact-social a { color:var(--text3); text-decoration:none; font-size:.86rem; transition:color var(--t); }
.contact-social a:hover { color:var(--accent2); }
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.field-group { display:flex; flex-direction:column; gap:.38rem; position:relative; }
.field-group label { font-size:.8rem; font-weight:500; color:var(--text2); }
.field-group label span { color:var(--accent2); }
.field-group input,.field-group select,.field-group textarea { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-md); color:var(--text1); padding:.68rem 1rem; font-family:var(--font-body); font-size:.875rem; outline:none; transition:border-color var(--t); width:100%; }
.field-group input::placeholder,.field-group textarea::placeholder { color:var(--text3); }
.field-group input:focus,.field-group select:focus,.field-group textarea:focus { border-color:var(--accent); }
.field-group select { cursor:pointer; }
.field-group select option { background:var(--surface2); }
.field-group textarea { resize:vertical; min-height:140px; }
.field-count { position:absolute; right:.75rem; bottom:.6rem; font-size:.7rem; color:var(--text3); pointer-events:none; }
.field-note { font-size:.73rem; color:var(--text3); }
.checkbox-label { display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.875rem; color:var(--text1); }
.checkbox-label input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); }

/* ─── Pagination ─────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.4rem; margin-top:3rem; }
.page-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text2); font-size:.875rem; text-decoration:none; transition:all var(--t); }
.page-btn:hover { border-color:var(--border2); color:var(--text1); }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; pointer-events:none; }

/* ─── Footer ─────────────────────────────────────── */
.site-footer { border-top:1px solid var(--border); padding:3rem 0 2rem; background:var(--surface); }
.footer-container { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; margin-bottom:2rem; }
.footer-name { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text1); margin-bottom:.25rem; }
.footer-desc { font-size:.82rem; color:var(--text3); }
.footer-social { display:flex; gap:.65rem; }
.footer-social a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text3); text-decoration:none; transition:all var(--t); }
.footer-social a:hover { color:var(--accent2); border-color:var(--border-ac); }
.footer-bottom { max-width:var(--max-w); margin:0 auto; padding:1.5rem 1.5rem 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--text3); }
.footer-bottom nav { display:flex; gap:1.25rem; }
.footer-bottom a { color:var(--text3); text-decoration:none; transition:color var(--t); }
.footer-bottom a:hover { color:var(--accent2); }

/* ─── Misc ───────────────────────────────────────── */
.empty-state { text-align:center; color:var(--text3); padding:4rem 1rem; font-size:.95rem; }
.section-cta { background:var(--surface); border-top:1px solid var(--border); text-align:center; }
.section-illustrated { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sep { color:var(--text3); }
.inline-form { display:inline; }
.tbl-placeholder { width:48px; height:28px; background:var(--surface2); border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:var(--accent2); letter-spacing:.05em; }

/* Pages légales */
.legal-content h2 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--text1); margin:2.5rem 0 .75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.legal-content h3 { font-size:.98rem; font-weight:600; color:var(--text1); margin:1.5rem 0 .5rem; }
.legal-content p { color:var(--text2); line-height:1.8; margin-bottom:.9rem; }
.legal-content ul { list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.5rem; }
.legal-content ul li { color:var(--text2); padding-left:1.25rem; position:relative; line-height:1.7; }
.legal-content ul li::before { content:'–'; position:absolute; left:0; color:var(--accent2); }
.legal-content a { color:var(--accent2); }
.legal-content a:hover { text-decoration:underline; }
.legal-content code { background:var(--surface2); padding:.15rem .4rem; border-radius:var(--r-sm); font-size:.85em; color:var(--amber); }
.cookie-table { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin:1rem 0 2rem; }
.cookie-row { display:grid; grid-template-columns:1.2fr .8fr .8fr 2.5fr; gap:1rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--border); font-size:.875rem; color:var(--text2); align-items:start; }
.cookie-row:last-child { border-bottom:none; }
.cookie-header { background:var(--surface); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); }
.badge-tech { display:inline-block; background:var(--accent-dim); color:var(--accent2); font-size:.7rem; font-weight:600; padding:2px 8px; border-radius:99px; }
.badge-third { display:inline-block; background:var(--amber-dim); color:var(--amber); font-size:.7rem; font-weight:600; padding:2px 8px; border-radius:99px; }

/* ─── Responsive ─────────────────────────────────── */
@media(max-width:640px) {
    :root { --pad-sec:3.5rem; }
    .hero-cta { flex-direction:column; }
    .cards-grid { grid-template-columns:1fr; }
    .labels-grid { grid-template-columns:1fr; }
    .podcast-item { flex-wrap:wrap; }
    .podcast-actions { width:100%; justify-content:flex-end; }
    .footer-container { flex-direction:column; text-align:center; }
    .footer-social { justify-content:center; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .cookie-row { grid-template-columns:1fr 1fr; gap:.5rem; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ─── Sélecteur de langue (drapeau) ─────────────── */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border2);
    background: var(--surface2);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text2);
    transition: all var(--t);
    flex-shrink: 0;
    margin-left: .5rem;
    white-space: nowrap;
}
.lang-switcher:hover {
    background: var(--accent-dim);
    border-color: var(--border-ac);
    color: var(--text1);
}
.lang-flag  { font-size: 1.1rem; line-height: 1; }
.lang-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; }

@media(max-width:768px) {
    .lang-switcher {
        margin-left: 0;
        margin-top: .5rem;
        align-self: flex-start;
    }
    /* Logo légèrement réduit sur mobile */
    .logo-word { font-size: 1.25rem; }
}