:root {
    --bg: #0a0908;
    --bg-2: #141210;
    --bg-3: #1c1a17;
    --ink: #ebe5dc;
    --ink-2: #8a847b;
    --ink-3: #514c45;
    --ember: #ff4d1a;
    --ember-2: #ff7a3d;
    --ember-glow: #ff4d1a40;
    --magenta: #c63cff;
    --magenta-glow: #c63cff35;
    --grid: #2a2622;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { overflow-x: hidden; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.0) 0px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.0) 4px);
  }

  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.5) 70%, rgba(10,9,8,0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-logo:hover { color: var(--ember); }
  .nav-logo img {
    width: 54px; height: 54px;
    border-radius: 50%;
  }

  .nav-links { display: flex; gap: 36px; list-style: none; }
  .nav-links a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
    padding: 8px 0;
  }
  .nav-links a:hover { color: var(--ember); }
  .nav-links a.is-active { color: var(--ember); }
  .nav-links a.is-active::before { color: var(--ember); }
  .nav-links a::before {
    content: counter(navnum, decimal-leading-zero) '/';
    counter-increment: navnum;
    color: var(--ink-3);
    margin-right: 8px;
    font-size: 11px;
  }
  .nav-links { counter-reset: navnum; }

  /* === HERO === */
  .hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 32px;
    overflow: hidden;
  }

  .hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
    opacity: 0.4;
  }

  .hero-bg-glow {
    position: absolute;
    width: 800px; height: 800px;
    right: -200px; top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, var(--ember-glow) 0%, transparent 60%);
    filter: blur(40px);
    animation: drift 12s ease-in-out infinite;
  }
  .hero-bg-glow-2 {
    position: absolute;
    width: 600px; height: 600px;
    left: 20%; top: 60%;
    background: radial-gradient(circle, var(--magenta-glow) 0%, transparent 60%);
    filter: blur(50px);
    animation: drift 18s ease-in-out infinite reverse;
  }
  @keyframes drift { 0%, 100% { transform: translate(0, -50%) scale(1); } 50% { transform: translate(-50px, -45%) scale(1.1); } }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: center;
    justify-content: space-between;
  }

  .hero-left { min-width: 0; max-width: 760px; }
  .hero-line-1 { white-space: nowrap; display: inline-block; }

  .hero-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards;
  }
  .hero-tag::before { content: ''; width: 40px; height: 1px; background: var(--ember); }

  .hero-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(60px, 9vw, 160px);
    line-height: 0.78;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 1s 0.4s forwards;
  }
  .hero-title .accent {
    display: inline-block;
    position: relative;
    background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    padding-right: 0.2em;
  }
  .hero-title .accent::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 0; right: 0.2em;
    height: 2px;
    background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
    transform: scaleX(0);
    transform-origin: left;
    animation: lineGrow 1s 1.6s forwards;
  }
  @keyframes lineGrow { to { transform: scaleX(1); } }

  .hero-subtitle {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--ink-2);
    max-width: 520px;
    line-height: 1.6;
    margin-bottom: 48px;
    opacity: 0;
    animation: fadeUp 0.8s 0.7s forwards;
  }
  .hero-subtitle em { color: var(--ink); font-style: italic; }

  .hero-meta {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s 0.9s forwards;
  }
  .meta-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .meta-label { color: var(--ink-3); display: block; margin-bottom: 4px; }
  .meta-value { color: var(--ink); }

  /* === LOGO HERO ===
     Le logo est plus grand que sa colonne — il déborde visuellement sur les côtés.
     Sa taille suit la viewport pour rester proportionné sur tous les écrans. */
  .hero-logo {
    width: clamp(320px, 42vw, 720px);
    aspect-ratio: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeUp 1.2s 0.6s forwards;
  }
  .hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(255,77,26,0.3)) drop-shadow(0 0 80px rgba(198,60,255,0.2));
    animation: logoFloat 6s ease-in-out 1.8s infinite;
  }
  @keyframes logoFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

  .side-ticker {
    position: absolute;
    right: 32px;
    bottom: 40px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--ink-3);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    z-index: 3;
  }

  section { position: relative; padding: 120px 32px; }
  .container { max-width: 1400px; margin: 0 auto; }

  .section-header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 80px;
    border-bottom: 1px solid var(--grid);
    padding-bottom: 24px;
  }
  .section-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3em; color: var(--ember); }
  .section-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .section-sub {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink-3);
    text-transform: uppercase;
  }

  /* === DISCOGRAPHY — GRILLE DE POCHETTES === */
  .discography { background: var(--bg); }

  .albums-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 280px));
    gap: 28px;
    justify-content: center;
  }

  .album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.4s;
  }
  .album-card:hover { transform: translateY(-6px); }

  .album-cover-wrap {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--grid);
    margin-bottom: 16px;
    transition: border-color 0.3s;
  }
  .album-card:hover .album-cover-wrap { border-color: var(--ember); }

  .album-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s, filter 0.4s;
    filter: saturate(0.9);
  }
  .album-card:hover .album-cover-img { transform: scale(1.04); filter: saturate(1.1); }

  .album-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .album-card:hover .album-cover-overlay { opacity: 1; }
  .album-card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--ember);
    text-transform: uppercase;
  }
  .album-card-cta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ink);
    text-transform: uppercase;
    margin-top: 8px;
  }

  .album-card-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: baseline;
    align-items: baseline;
  }
  .album-card-title {
    font-family: 'Anton', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    transition: color 0.3s;
  }
  .album-card:hover .album-card-title { color: var(--ember); }
  .album-card-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    text-transform: uppercase;
    text-align: right;
  }

  /* === FEATURED ALBUM + PLAYER === */
  .featured { background: var(--bg-2); position: relative; overflow: hidden; }
  .featured::before {
    content: '';
    position: absolute;
    top: -100px; left: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
    filter: blur(60px);
  }

  .featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
  }

  .featured-cover {
    aspect-ratio: 1;
    background: var(--bg-3);
    border: 1px solid var(--grid);
    position: relative;
    overflow: hidden;
  }
  .featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .featured-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.0) 4px);
  }

  .featured-info .album-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ember);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .featured-info .album-tag::before { content: ''; width: 30px; height: 1px; background: var(--ember); }

  .featured-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(48px, 6vw, 96px);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
  }
  .featured-desc {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 540px;
  }
  .featured-desc em { color: var(--ember); font-style: italic; }

  .player-frame { background: var(--bg); border: 1px solid var(--grid); padding: 24px; margin-bottom: 24px; }

  .player-now {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--grid);
    margin-bottom: 16px;
  }

  .play-btn {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ember);
    border: none;
    color: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 0 0 0 var(--ember-glow);
    flex-shrink: 0;
  }
  .play-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 8px var(--ember-glow); }
  .play-btn svg { width: 20px; height: 20px; fill: var(--bg); }

  .now-info { min-width: 0; }
  .now-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.3em; color: var(--ember); text-transform: uppercase; margin-bottom: 4px; }
  .now-title { font-family: 'Fraunces', serif; font-size: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .now-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-2); letter-spacing: 0.1em; white-space: nowrap; }

  .progress-row { display: grid; grid-template-columns: 1fr; margin-bottom: 16px; }
  .progress-track { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; cursor: pointer; position: relative; }
  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--ember) 0%, var(--ember-2) 100%); width: 0%; transition: width 0.1s linear; }

  .tracklist { display: flex; flex-direction: column; }
  .track-item {
    display: grid;
    grid-template-columns: 32px 1fr 50px;
    align-items: center;
    padding: 12px 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }
  .track-item:hover { background: rgba(255,255,255,0.04); }
  .track-item.active { background: rgba(255,77,26,0.08); }
  .track-item.active .t-name { color: var(--ember); }
  .track-item.active .t-num::before { content: '▶ '; color: var(--ember); }
  .t-num { color: var(--ink-3); }
  .t-name { font-family: 'Fraunces', serif; font-size: 13px; color: var(--ink); transition: color 0.2s; }
  .t-feat { color: var(--ink-3); font-size: 9px; text-align: right; }

  .spotify-embed { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--grid); }
  .spotify-embed-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .spotify-embed-label::before { content: ''; width: 20px; height: 1px; background: var(--ink-3); }
  .spotify-embed iframe { width: 100%; min-height: 480px; border-radius: 0; border: 1px solid var(--grid); display: block; }

  /* === VISUALS === */
  .visuals { background: var(--bg-2); position: relative; }
  .visuals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 420px)); gap: 24px; justify-content: center; }
  .visual-card {
    aspect-ratio: 16/10;
    background: var(--bg-3);
    border: 1px solid var(--grid);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
  }
  .visual-card:hover { border-color: var(--ember); }
  .visual-card.coming { background: repeating-linear-gradient(45deg, var(--bg-3), var(--bg-3) 16px, transparent 16px, transparent 32px); }
  .visual-card video, .visual-card iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
  .visual-placeholder { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-3); text-transform: uppercase; }
  .visual-placeholder .big { display: block; font-family: 'Anton', sans-serif; font-size: 32px; color: var(--ink-2); margin-bottom: 8px; letter-spacing: 0; }

  .visuals-note { margin-top: 60px; padding: 32px; border: 1px solid var(--grid); border-left: 3px solid var(--ember); background: var(--bg); }
  .visuals-note p { font-family: 'Fraunces', serif; font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: 700px; }
  .visuals-note em { color: var(--ember); font-style: italic; }

  /* === STREAMING === */
  .streaming { background: var(--bg); }
  .platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); }
  .platform {
    border-right: 1px solid var(--grid);
    border-bottom: 1px solid var(--grid);
    padding: 40px 32px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .platform::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ember) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0;
  }
  .platform:hover::before { opacity: 0.08; }
  .platform:hover .plat-name { color: var(--ember); }
  .platform:hover .plat-arrow { transform: translate(4px, -4px); color: var(--ember); }
  .platform > * { position: relative; z-index: 1; }

  .plat-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-3); }
  .plat-name { font-family: 'Anton', sans-serif; font-size: 32px; text-transform: uppercase; margin-top: 60px; transition: color 0.3s; }
  .plat-handle { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-2); margin-top: 4px; letter-spacing: 0.1em; }
  .plat-arrow { position: absolute; top: 32px; right: 32px; color: var(--ink-3); transition: all 0.3s; font-size: 16px; }

  /* === ABOUT === */
  .about { background: var(--bg); }
  .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
  .about-side { position: sticky; top: 120px; }
  .about-portrait {
    aspect-ratio: 3/4;
    border: 1px solid var(--grid);
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
  }
  .about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0) contrast(1.05);
    transition: filter 0.6s;
  }
  .about-portrait:hover img { filter: grayscale(0) contrast(1.1) brightness(1.05); }
  .about-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(10,9,8,0.5) 100%);
  }

  .about-side-logo { width: clamp(140px, 18vw, 280px); margin-bottom: 24px; }
  .about-side-logo img { width: 100%; filter: drop-shadow(0 0 30px rgba(255,77,26,0.25)); }
  .about-side-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.3em; color: var(--ember); text-transform: uppercase; margin-bottom: 16px; }
  .about-name { font-family: 'Anton', sans-serif; font-size: clamp(40px, 5vw, 64px); text-transform: uppercase; line-height: 0.9; margin-bottom: 24px; }
  .about-role { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--ember); margin-bottom: 32px; }

  .about-body p {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink);
    margin-bottom: 24px;
  }
  .about-body p:first-of-type::first-letter {
    font-family: 'Anton', sans-serif;
    font-size: 68px;
    float: left;
    line-height: 0.9;
    margin: 6px 12px 0 0;
    color: var(--ember);
  }
  .about-body em { color: var(--ember); font-style: italic; }

  .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--grid); }
  .stat-num { font-family: 'Anton', sans-serif; font-size: 56px; color: var(--ember); line-height: 1; }
  .stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-2); text-transform: uppercase; margin-top: 8px; }

  /* === FOOTER === */
  footer { background: var(--bg-2); border-top: 1px solid var(--grid); padding: 80px 32px 40px; }
  .footer-grid {
    max-width: 1600px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: auto 1.4fr 1fr 1fr;
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
  }
  .footer-logo { width: clamp(80px, 8vw, 140px); }
  .footer-logo img { width: 100%; filter: drop-shadow(0 0 20px rgba(255,77,26,0.15)); }

  .footer-brand {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 3.4vw, 56px);
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .footer-brand span {
    display: inline-block;
    background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    padding-right: 0.2em;
  }
  .footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.3em; color: var(--ember); text-transform: uppercase; margin-bottom: 16px; }
  .footer-col a, .footer-col p { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-2); text-decoration: none; display: block; padding: 6px 0; transition: color 0.2s; }
  .footer-col a:hover { color: var(--ember); }
  .footer-bottom { max-width: 1400px; margin: 0 auto; padding-top: 30px; border-top: 1px solid var(--grid); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
  .footer-bottom span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase; }

  /* === ALBUM DETAIL BLOCKS (listen.html) === */
  .album-detail {
    border-top: 1px solid var(--grid);
    padding: 100px 0;
    position: relative;
  }
  .album-detail:first-of-type { border-top: 0; padding-top: 60px; }
  .album-detail::before {
    content: '';
    position: absolute;
    top: 50%; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 0.6;
  }
  .album-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .album-detail-cover {
    aspect-ratio: 1;
    border: 1px solid var(--grid);
    overflow: hidden;
    position: relative;
    background: var(--bg-3);
  }
  .album-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .album-detail-info .ad-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ember);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .album-detail-info .ad-tag::before { content: ''; width: 30px; height: 1px; background: var(--ember); }

  .ad-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 16px;
  }
  .ad-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .ad-desc {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 28px;
    max-width: 540px;
  }
  .ad-desc em { color: var(--ember); font-style: italic; }


  .page-header {
    padding: 160px 32px 60px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--grid);
  }
  .page-header::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    right: -150px; top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, var(--ember-glow) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
  }
  .page-header .container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
  .page-header-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .page-header-tag::before { content: ''; width: 40px; height: 1px; background: var(--ember); }
  .page-header-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(56px, 8vw, 140px);
    line-height: 0.85;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
  }
  .page-header-title .accent {
    color: var(--ember);
    font-style: italic;
  }
  .page-header-sub {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--ink-2);
    max-width: 720px;
    line-height: 1.6;
  }
  .page-header-sub em { color: var(--ember); font-style: italic; }


  .home-cta-row {
    margin-top: 60px;
    display: flex;
    justify-content: center;
  }
  .home-cta {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 22px 36px;
    border: 1px solid var(--grid);
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    transition: all 0.3s;
  }
  .home-cta:hover {
    border-color: var(--ember);
    background: rgba(255,77,26,0.05);
    transform: translateY(-2px);
  }
  .home-cta:hover .home-cta-arrow { color: var(--ember); transform: translateX(4px); }
  .home-cta-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .home-cta-arrow {
    color: var(--ink-3);
    font-size: 16px;
    transition: all 0.3s;
  }

  .home-explore { background: var(--bg-2); }
  .explore-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .explore-card {
    display: block;
    padding: 48px 40px;
    border: 1px solid var(--grid);
    background: var(--bg);
    text-decoration: none;
    color: var(--ink);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .explore-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ember) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0;
  }
  .explore-card:hover { border-color: var(--ember); transform: translateY(-4px); }
  .explore-card:hover::before { opacity: 0.08; }
  .explore-card:hover .explore-card-title { color: var(--ember); }
  .explore-card > * { position: relative; z-index: 1; }

  .explore-card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 16px;
  }
  .explore-card-title {
    font-family: 'Anton', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    transition: color 0.3s;
  }
  .explore-card-desc {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 380px;
  }


  .platform-featured { background: linear-gradient(135deg, rgba(255,77,26,0.08) 0%, transparent 70%); }
  .platform-featured::before { background: linear-gradient(135deg, var(--ember) 0%, transparent 50%); opacity: 0.12; }
  .platform-featured:hover::before { opacity: 0.25; }
  .plat-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    color: var(--ember);
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--ember);
    border-radius: 999px;
    margin-bottom: 12px;
  }

  /* === PRESS KIT === */
  .presskit { background: var(--bg-2); position: relative; overflow: hidden; }
  .presskit::before {
    content: '';
    position: absolute;
    top: 20%; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
  }
  .presskit-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .presskit-photo {
    aspect-ratio: 4/5;
    background: var(--bg-3);
    border: 1px solid var(--grid);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .presskit-photo.placeholder {
    background:
      repeating-linear-gradient(45deg, var(--bg-3), var(--bg-3) 20px, transparent 20px, transparent 40px),
      var(--bg-3);
  }
  .presskit-photo-text {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding: 24px;
  }
  .presskit-photo-text .big {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 48px;
    color: var(--ink-2);
    margin-bottom: 12px;
    letter-spacing: 0;
  }
  .presskit-info > * + * { margin-top: 36px; }

  .pk-block-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ember);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .pk-block-label::before { content: ''; width: 24px; height: 1px; background: var(--ember); }

  .pk-bio {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
  }
  .pk-bio em { color: var(--ember); font-style: italic; }

  .pk-quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
  }
  .pk-quick-item {
    border-top: 1px solid var(--grid);
    padding-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }
  .pk-quick-label { color: var(--ink-3); display: block; letter-spacing: 0.2em; text-transform: uppercase; font-size: 9px; margin-bottom: 4px; }
  .pk-quick-value { color: var(--ink); }

  .pk-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .pk-download {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--grid);
    background: var(--bg);
    text-decoration: none;
    color: var(--ink);
    transition: all 0.25s;
    position: relative;
  }
  .pk-download:hover { border-color: var(--ember); background: rgba(255,77,26,0.05); transform: translateY(-2px); }
  .pk-download:hover .pk-download-arrow { transform: translate(3px, -3px); color: var(--ember); }
  .pk-download-type { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.3em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 8px; }
  .pk-download-name { font-family: 'Fraunces', serif; font-size: 14px; line-height: 1.3; }
  .pk-download-arrow {
    position: absolute;
    top: 18px; right: 18px;
    color: var(--ink-3);
    transition: all 0.25s;
    font-size: 14px;
  }

  /* === BOOKINGS / CONTACT === */
  .bookings { background: var(--bg); position: relative; }
  .bookings-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
  }
  .bookings-side h3 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .bookings-side h3 .accent-ember { color: var(--ember); font-style: italic; }
  .bookings-side p {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 24px;
  }
  .bookings-side ul {
    list-style: none;
    padding: 0;
    margin-top: 24px;
  }
  .bookings-side li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--ink);
    text-transform: uppercase;
    padding: 12px 0;
    border-top: 1px solid var(--grid);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bookings-side li::before { content: '+'; color: var(--ember); font-size: 16px; }

  .contact-form {
    background: var(--bg-2);
    border: 1px solid var(--grid);
    padding: 32px;
  }
  .form-row { margin-bottom: 20px; }
  .form-row label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .form-row input,
  .form-row select,
  .form-row textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--grid);
    color: var(--ink);
    font-family: 'Fraunces', serif;
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 0;
    transition: border-color 0.2s;
    outline: none;
  }
  .form-row input:focus,
  .form-row select:focus,
  .form-row textarea:focus {
    border-color: var(--ember);
  }
  .form-row textarea {
    min-height: 120px;
    resize: vertical;
    font-family: 'Fraunces', serif;
  }
  .form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .form-submit {
    width: 100%;
    background: var(--ember);
    color: var(--bg);
    border: none;
    padding: 16px 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
  }
  .form-submit:hover {
    background: var(--ember-2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--ember-glow);
  }

  /* === NEWSLETTER === */
  .newsletter {
    background: var(--bg-2);
    position: relative;
    overflow: hidden;
  }
  .newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    opacity: 0.3;
    pointer-events: none;
  }
  .newsletter-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .newsletter-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--ember);
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid var(--ember);
    border-radius: 999px;
    margin-bottom: 24px;
  }
  .newsletter-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(42px, 6vw, 80px);
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 24px;
  }
  .newsletter-title em {
    color: var(--ember);
    font-style: italic;
  }
  .newsletter-desc {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 40px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .newsletter-form {
    display: flex;
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
    border: 1px solid var(--grid);
    background: var(--bg);
    transition: border-color 0.2s;
  }
  .newsletter-form:focus-within { border-color: var(--ember); }
  .newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: 'Fraunces', serif;
    font-size: 15px;
    padding: 16px 20px;
    outline: none;
    min-width: 0;
  }
  .newsletter-form button {
    background: var(--ember);
    color: var(--bg);
    border: none;
    padding: 16px 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
  }
  .newsletter-form button:hover { background: var(--ember-2); }
  .newsletter-form button:disabled {
    background: var(--ink-3);
    cursor: not-allowed;
  }
  .newsletter-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-top: 16px;
  }
  .newsletter-success {
    display: none;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--ember);
    background: rgba(255,77,26,0.05);
    color: var(--ember);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-align: center;
  }
  .newsletter-success.show { display: block; }


  @media (max-width: 900px) {
    nav { padding: 12px 20px; }
    .nav-links { gap: 20px; }
    .nav-links a { font-size: 12px; letter-spacing: 0.15em; }
    .nav-links a::before { display: none; }
    .nav-logo { font-size: 11px; gap: 10px; }
    .nav-logo img { width: 36px; height: 36px; }
    section { padding: 80px 20px; }
    .hero { padding: 0 20px; }
    .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .hero-line-1 { white-space: normal; }
    .hero-logo { width: 280px; order: -1; margin: 0 auto; }
    .albums-grid { grid-template-columns: 1fr; gap: 24px; }
    .featured-grid { grid-template-columns: 1fr; gap: 48px; }
    .album-detail-grid { grid-template-columns: 1fr; gap: 40px; }
    .visuals-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-side { position: static; }
    .about-portrait { max-width: 400px; margin-left: auto; margin-right: auto; }
    .about-side-logo { width: 140px; }
    .about-stats { gap: 12px; }
    .stat-num { font-size: 36px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: left; }
    .footer-logo { width: 80px; }
    .footer-brand { font-size: 40px; }
    .section-header { flex-wrap: wrap; }
    .section-sub { display: none; }
    .side-ticker { display: none; }
    .player-now { grid-template-columns: 48px 1fr auto; }
    .play-btn { width: 48px; height: 48px; }

    /* New sections mobile */
    .presskit-grid { grid-template-columns: 1fr; gap: 40px; }
    .pk-quick { grid-template-columns: 1fr; }
    .bookings-grid { grid-template-columns: 1fr; gap: 48px; }
    .form-row-half { grid-template-columns: 1fr; gap: 0; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form button { width: 100%; }
    .explore-grid { grid-template-columns: 1fr; }
    .page-header { padding: 120px 20px 40px; }
  }
/* ============================================
   SWITCH FR | EN
   À ajouter à la fin de style.css
============================================ */

/* Wrapper du switch dans le nav */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
  padding-left: 28px;
  border-left: 1px solid var(--grid);
}

.nav-lang a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s;
  padding: 4px 2px;
}

.nav-lang a:hover {
  color: var(--ember);
}

.nav-lang a.is-active {
  color: var(--ember);
  pointer-events: none;
  cursor: default;
}

.nav-lang .sep {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-3);
}

/* Restructuration du nav pour accueillir le switch à droite */
nav {
  /* override : on garde le space-between, mais on regroupe links + lang */
}

.nav-right {
  display: flex;
  align-items: center;
}

/* Mobile : switch reste visible, mais compact */
@media (max-width: 1380px) {
  .nav-lang {
    margin-left: 12px;
    padding-left: 12px;
  }
  .nav-lang a {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
}

@media (min-width: 1381px) {
  body {
    zoom: 1.3;
  }
}

/* ============================================
   HARMONISATION DES TAILLES DE TEXTE
   Aligne tout le site sur la lisibilité de About
============================================ */

@media (min-width: 901px) {
  .hero-subtitle { font-size: 17px; }
  .page-header-sub { font-size: 17px; }
  .featured-desc { font-size: 17px; line-height: 1.7; }
  .ad-desc { font-size: 16px; line-height: 1.75; }
  .latest-desc { font-size: 18px; line-height: 1.75; }
  .pk-bio { font-size: 17px; line-height: 1.75; }
  .bookings-side p { font-size: 17px; line-height: 1.75; }
  .bookings-side li { font-size: 12px; }
  .newsletter-desc { font-size: 18px; line-height: 1.75; }
  .visuals-note p { font-size: 16px; line-height: 1.75; }
  .explore-card-desc { font-size: 15px; line-height: 1.65; }
  .now-title { font-size: 19px; }
  .t-name { font-size: 14px; }
  .form-row input,
  .form-row select,
  .form-row textarea { font-size: 16px; }
  .newsletter-form input { font-size: 16px; }
}

/* ============================================
   LATEST RELEASE — Spotlight section
============================================ */

.latest-release {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.latest-release::before {
  content: '';
  position: absolute;
  top: 30%;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}

.latest-release::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--magenta-glow) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.5;
}

.latest-card {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 70px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 0.4s;
}

.latest-card:hover {
  transform: translateY(-4px);
}

.latest-cover {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--grid);
  transition: border-color 0.3s;
}

.latest-card:hover .latest-cover {
  border-color: var(--ember);
}

.latest-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s, filter 0.4s;
  filter: saturate(0.95);
}

.latest-card:hover .latest-cover img {
  transform: scale(1.03);
  filter: saturate(1.15);
}

.latest-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,77,26,0.15) 100%);
  pointer-events: none;
}

.latest-info {
  min-width: 0;
}

.latest-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--ember);
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--ember);
  border-radius: 999px;
  margin-bottom: 32px;
  background: rgba(255,77,26,0.04);
}

.latest-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}

.latest-title .accent {
  background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}

.latest-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.latest-meta::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--ember);
}

.latest-desc {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 36px;
  max-width: 580px;
}

.latest-desc em {
  color: var(--ember);
  font-style: italic;
}

.latest-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border: 1px solid var(--ember);
  background: rgba(255,77,26,0.05);
  transition: all 0.3s;
}

.latest-card:hover .latest-cta {
  background: var(--ember);
  box-shadow: 0 0 0 6px var(--ember-glow);
}

.latest-cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember);
  transition: color 0.3s;
}

.latest-card:hover .latest-cta-label {
  color: var(--bg);
}

.latest-cta-arrow {
  font-size: 16px;
  color: var(--ember);
  transition: all 0.3s;
}

.latest-card:hover .latest-cta-arrow {
  color: var(--bg);
  transform: translateY(3px);
}

@media (max-width: 900px) {
  .latest-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .latest-badge {
    font-size: 10px;
    letter-spacing: 0.25em;
    margin-bottom: 20px;
  }
  .latest-desc {
    font-size: 15px;
  }
}

/* ============================================
   LATEST RELEASE — Spotlight section
============================================ */

.latest-release {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.latest-release::before {
  content: '';
  position: absolute;
  top: 30%;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}

.latest-release::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--magenta-glow) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.5;
}

.latest-card {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 70px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 0.4s;
}

.latest-card:hover {
  transform: translateY(-4px);
}

.latest-cover {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--grid);
  transition: border-color 0.3s;
}

.latest-card:hover .latest-cover {
  border-color: var(--ember);
}

.latest-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s, filter 0.4s;
  filter: saturate(0.95);
}

.latest-card:hover .latest-cover img {
  transform: scale(1.03);
  filter: saturate(1.15);
}

.latest-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,77,26,0.15) 100%);
  pointer-events: none;
}

.latest-info {
  min-width: 0;
}

.latest-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--ember);
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--ember);
  border-radius: 999px;
  margin-bottom: 32px;
  background: rgba(255,77,26,0.04);
}

.latest-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}

.latest-title .accent {
  background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}

.latest-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.latest-meta::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--ember);
}

.latest-desc {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 36px;
  max-width: 580px;
}

.latest-desc em {
  color: var(--ember);
  font-style: italic;
}

.latest-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border: 1px solid var(--ember);
  background: rgba(255,77,26,0.05);
  transition: all 0.3s;
}

.latest-card:hover .latest-cta {
  background: var(--ember);
  box-shadow: 0 0 0 6px var(--ember-glow);
}

.latest-cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember);
  transition: color 0.3s;
}

.latest-card:hover .latest-cta-label {
  color: var(--bg);
}

.latest-cta-arrow {
  font-size: 16px;
  color: var(--ember);
  transition: all 0.3s;
}

.latest-card:hover .latest-cta-arrow {
  color: var(--bg);
  transform: translateY(3px);
}

@media (max-width: 900px) {
  .latest-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .latest-badge {
    font-size: 10px;
    letter-spacing: 0.25em;
    margin-bottom: 20px;
  }
  .latest-desc {
    font-size: 15px;
  }
}

/* ============================================
   HARMONISATION DES TAILLES DE TEXTE
   Aligne tout le site sur la lisibilité de About
============================================ */

@media (min-width: 901px) {
  .hero-subtitle { font-size: 17px; }
  .page-header-sub { font-size: 17px; }
  .featured-desc { font-size: 17px; line-height: 1.7; }
  .ad-desc { font-size: 16px; line-height: 1.75; }
  .latest-desc { font-size: 18px; line-height: 1.75; }
  .pk-bio { font-size: 17px; line-height: 1.75; }
  .bookings-side p { font-size: 17px; line-height: 1.75; }
  .bookings-side li { font-size: 12px; }
  .newsletter-desc { font-size: 18px; line-height: 1.75; }
  .visuals-note p { font-size: 16px; line-height: 1.75; }
  .explore-card-desc { font-size: 15px; line-height: 1.65; }
  .now-title { font-size: 19px; }
  .t-name { font-size: 14px; }
  .form-row input,
  .form-row select,
  .form-row textarea { font-size: 16px; }
  .newsletter-form input { font-size: 16px; }
}

/* === HIDDEN ALBUM CARD (v10) === */
.album-card.hidden-album {
  position: relative;
}
/* The .album-cover-wrap has overflow:hidden by default — keep badge OUTSIDE it */
.hidden-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(10, 9, 8, 0.85);
  border: 1px solid #ff4d1a;
  padding: 4px 8px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #ff7a3d;
  text-transform: uppercase;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 12px rgba(255, 77, 26, 0.4);
  z-index: 3;
  pointer-events: none;
}
.hidden-badge .hb-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d1a;
  box-shadow: 0 0 6px #ff4d1a;
  animation: hb-pulse 1.6s ease-in-out infinite;
}
.hidden-badge .hb-time {
  color: #ebe5dc;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
@keyframes hb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
/* Subtle ember outline on the hidden cover wrap */
.album-card.hidden-album .album-cover-wrap {
  border-color: rgba(255, 77, 26, 0.5);
}
.album-card.hidden-album:hover .album-cover-wrap {
  border-color: var(--ember);
}

/* === v12.5 FIXES === */

/* Fix: italic accent in .latest-title gets its T clipped (background-clip:text + italic).
   Same root cause as in the game. Give the span room and apply box-decoration-break. */
.latest-title {
  /* Allow the italic accent's overshoot to render */
  padding-right: 0.4em;
}
.latest-title .accent {
  display: inline-block;
  /* Real horizontal room so the slanted right side of T isn't clipped */
  padding: 0 0.25em 0 0;
  margin-right: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Fix: hero-logo overlapping the title on mid-range viewports.
   Simple, robust approach: take the logo out of the grid flow and place it
   absolutely behind the content. The text always reads on top, the logo
   never fights for grid space. Opacity kept at 1 — the logo stays solid. */
.hero-logo {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  /* Reset the fadeUp animation transform AND apply translateY centering.
     Using !important to win against the keyframe animation 'transform' end-state. */
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  /* Disable the entry animations that interfere with positioning */
  animation: none !important;
  opacity: 1 !important;
  width: clamp(280px, 38vw, 600px) !important;
  pointer-events: none;
}
.hero-logo img {
  filter: drop-shadow(0 0 50px rgba(255,77,26,0.45)) drop-shadow(0 0 100px rgba(198,60,255,0.25)) !important;
  /* Keep the gentle float, but it animates only translateY on the IMG,
     which doesn't conflict with the wrapper's positioning. */
}
/* Ensure the hero-left text sits above the background logo */
.hero-content .hero-left {
  position: relative;
  z-index: 2;
}
/* Mobile: bring logo back into the flow above the text */
@media (max-width: 760px) {
  .hero-logo {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: clamp(220px, 60vw, 320px) !important;
    margin: 0 auto !important;
    order: -1;
  }
}

/* === v13 FIXES — NAV BURGER + MOBILE/LANDSCAPE === */

/* Fix: nav-logo text was wrapping to 3 lines on iPhone Pro Max landscape (~926px).
   Force single line so the brand name stays compact. */
.nav-logo span {
  white-space: nowrap;
}

/* Burger toggle (hidden checkbox + label) — invisible by default, shown < 1100px */
.nav-burger-toggle {
  display: none;
}
.nav-burger {
  display: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--grid);
  background: rgba(20, 18, 16, 0.6);
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
}
.nav-burger:hover {
  border-color: var(--ember);
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.25s;
}

/* === BURGER MODE: below 1686px === */
@media (max-width: 1685px) {
  /* Show burger button, hide normal nav */
  .nav-burger {
    display: flex;
  }
  /* Hide the inline nav-right (we will show it as a dropdown) */
  nav .nav-right {
    position: absolute;
    top: 100%;
    right: 12px;
    background: rgba(20, 18, 16, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--grid);
    border-radius: 2px;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    display: none;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    min-width: 200px;
  }
  /* Reveal dropdown when checkbox is checked */
  .nav-burger-toggle:checked ~ .nav-right,
  .nav-burger-toggle:checked + nav .nav-right {
    display: flex;
  }
  /* Stack nav-links vertically inside the dropdown */
  .nav-right .nav-links {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
  }
  .nav-right .nav-links a {
    font-size: 13px;
    letter-spacing: 0.18em;
    padding: 4px 0;
  }
  .nav-right .nav-links a::before {
    display: inline;
    font-size: 10px;
    color: var(--ink-3);
    margin-right: 8px;
  }
  /* Lang switch sits below the links */
  .nav-right .nav-lang {
    border-top: 1px solid var(--grid);
    padding-top: 12px;
    margin-top: 4px;
    font-size: 12px;
    width: 100%;
  }
  /* Animate burger lines to X when checked */
  .nav-burger-toggle:checked ~ nav .nav-burger span:nth-child(1),
  .nav-burger-toggle:checked + nav .nav-burger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-burger-toggle:checked ~ nav .nav-burger span:nth-child(2),
  .nav-burger-toggle:checked + nav .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-burger-toggle:checked ~ nav .nav-burger span:nth-child(3),
  .nav-burger-toggle:checked + nav .nav-burger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
  /* Make nav itself relative so the dropdown can absolute-position to it */
  nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
  /* Nav typography slightly smaller */
  .nav-logo { font-size: 11px; gap: 10px; }
  .nav-logo img { width: 36px; height: 36px; }
}

/* Landscape phones (short height) — hide the absolute-positioned hero logo
   because it overlaps the title when there's not enough vertical room.
   Without this, iPhone Pro Max landscape shows the same big logo overlapping. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-logo {
    display: none !important;
  }
  /* Compact hero on landscape phones */
  .hero {
    min-height: auto !important;
    padding-top: 60px;
    padding-bottom: 30px;
  }
}