/* ============================================
   THE ANOMALY - style.css (step 2)
   Base: newstyle26c.css (video-background unique)
         + newstyle26-social.css (lang, gear ionic, mobile)
   Multipage: scroll normal du body, pas de freeze.
   Le carrousel social reste dans carousel.css (ne pas dupliquer).
   ============================================ */

:root {
    --gear-size: 600px;
    --tooth-size: 100px;
    --gear-color: #333;
    --background-color: #1a1a1a;
    --text-color: #f0f0f0;
    --text-light: #cccccc;
    --text-muted: #888888;
    --accent-color: #f39c12;
    --accent-hover: #f1c40f;
    --lang-bg: rgba(26, 26, 26, 0.9);
    --lang-text: #f0f0f0;
    --lang-active: #f39c12;
    --panel-bg: rgba(26, 26, 26, 0.85);
    --panel-border: #444;
    --footer-bg: #0a0a0a;
    --transition: 0.3s ease;
}

/* ---------- Links (origine) ---------- */
a:link { color: var(--accent-color); text-decoration: none; }
a:visited { color: #c0392b; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:active { color: #e67e22; }

/* ---------- Reset & base (scroll, pas de freeze) ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto; /* scroll normal de la page */
    display: block;
}

/* ---------- Video background UNIQUE (newstyle26c) ----------
   Une seule .video-background par page. #media-viewer reste
   masque par defaut pour eviter le doublon vu (2 videos). */
.video-background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    height: 100dvh;
    z-index: 0; /* derriere le contenu (contenu en z-index:1) */
    overflow: hidden;
    pointer-events: none;
    background-color: var(--background-color);
}
.video-background video {
    width: 100%; height: 100%;
    object-fit: cover;       /* remplit, crop sans deformation */
    object-position: center;
    display: block;
}
#media-viewer.hidden-for-intro { display: none !important; }
#media-viewer {
    position: absolute; inset: 0; z-index: 1;
    display: none; /* masque par defaut : seul .video-background s'affiche */
}
#media-viewer.media-active { display: block; }
#media-viewer img, #media-viewer video {
    width: 100%; height: 100%; object-fit: cover;
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Language switcher (support .lang-link ET .lang-btn) ---------- */
#lang-switcher {
    position: fixed; top: 15px; right: 15px; z-index: 1000;
    display: flex; gap: 5px; align-items: center;
}
.lang-link, .lang-btn {
    background: var(--lang-bg); color: var(--lang-text);
    border: 1px solid #444; padding: 6px 12px; font-size: 14px;
    border-radius: 4px; cursor: pointer; text-decoration: none;
    transition: all 0.3s ease; font-family: inherit;
}
.lang-link:hover, .lang-btn:hover { background: var(--accent-color); color: #1a1a1a; }
.lang-link.active, .lang-btn.active { background: var(--accent-color); color: #1a1a1a; font-weight: bold; }
.lang-link.active:hover, .lang-btn.active:hover { background: var(--accent-hover); }

/* ---------- Menu (origine) ---------- */
header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }
.menu-wrapper { position: absolute; top: 15px; right: 15px; z-index: 101; }
.menu-icon {
    font-size: 20px; font-weight: bold; color: white;
    background: rgba(0,0,0,0.5); padding: 8px 15px; cursor: pointer;
    border-radius: 5px; display: flex; align-items: center; gap: 8px; border: 0;
}
.menu {
    display: none; position: absolute; top: 110%; right: 0;
    background: rgba(26,26,26,0.92); backdrop-filter: blur(5px);
    padding: 20px; border-radius: 8px; border: 1px solid #444; width: 250px; z-index: 102;
}
.menu a, .menu p { display: block; margin-bottom: 10px; color: var(--text-color); font-size: 16px; }
.menu a:hover { color: var(--accent-color); }

/* ---------- Social links (ancien #social-links) ---------- */
#social-links {
    position: relative; z-index: 5;
    max-width: 1200px; margin: 0 auto; padding: 12px 20px 0;
    font-size: 14px; color: var(--text-light);
}
#social-links a { color: var(--text-light); }
#social-links a:hover { color: var(--accent-color); text-decoration: none; }

/* ---------- MAIN (scroll normal) ---------- */
main {
    position: relative; z-index: 1;
    flex: none;
    overflow: visible; /* le scroll est celui du body */
    isolation: isolate;
    padding: 40px 20px 60px;
    max-width: 1200px; margin: 0 auto; width: 100%;
}
main.content-page { padding-top: 24px; }

/* ---------- HERO : canonique #hero-left + alias .hero / #hero ----------
   #hero-left est la structure d'origine (texte a gauche sur video).
   On garde aussi .hero/.hero-content pour les pages deja en a-website. */
#hero-left, #hero, .hero {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    padding: 80px 20px 40px;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    pointer-events: auto;
}
#hero-left { max-width: 720px; margin-left: 5%; padding-left: 0; }
#hero-left::before, #hero::before, .hero::before {
    content: ""; position: absolute; inset: -24px;
    background: linear-gradient(90deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0) 100%);
    border-radius: 18px; z-index: -1; pointer-events: none;
}
#hero h1, #hero-left h1, .hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300;
    letter-spacing: 4px; text-transform: uppercase; line-height: 1.05; margin-bottom: 10px;
}
#hero .tagline, #hero-left .tagline, .hero .tagline {
    font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight: 400;
    color: var(--accent-color); margin-bottom: 8px;
}
#hero .subtagline, #hero-left .subtagline, .hero .subtagline {
    font-size: clamp(1rem, 1.8vw, 1.3rem); color: var(--text-light); margin-bottom: 20px;
}
#hero .hero-text, #hero-left .hero-text, .hero .hero-text,
.hero-text {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem); color: var(--text-light);
    max-width: 600px; line-height: 1.7; margin-bottom: 25px;
}
#hero .hero-actions, #hero-left .hero-actions, .hero .hero-actions, .hero-actions {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.btn {
    display: inline-block; padding: 14px 28px; border-radius: 6px;
    font-size: 1rem; font-weight: 600; text-decoration: none;
    transition: all 0.3s ease; cursor: pointer;
}
.btn-primary { background: var(--accent-color); color: #1a1a1a; border: 2px solid var(--accent-color); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); color:#1a1a1a; text-decoration:none; }
.btn-secondary { background: transparent; color: var(--text-color); border: 2px solid var(--text-color); }
.btn-secondary:hover { background: rgba(243,156,18,0.2); border-color: var(--accent-color); color: var(--text-color); text-decoration:none; }
.btn-outline { background: transparent; color: var(--text-light); border: 2px solid var(--text-light); }
.btn-outline:hover { color: var(--text-color); border-color: var(--text-color); background: rgba(243,156,18,0.1); text-decoration:none; }
.hero-content { position: relative; z-index: 2; max-width: 800px; }

/* Carrousel social : le composant vit dans carousel.css.
   Ici on assure juste sa place dans le hero gauche. */
body.social-home #hero-left { box-sizing: border-box; min-width: 0; }
body.social-home #hero-left::before { inset: 0; border-radius: 18px; }
#anomaly-carousel { min-width: 0; width: 100%; }

/* ---------- Article panel (compat origine, non utilise en multipage) ---------- */
#article-panel {
    position: absolute; top: 0; right: 0; width: 40%; max-width: 450px; height: 100%;
    background-color: var(--panel-bg); backdrop-filter: blur(8px); z-index: 50;
    overflow-y: auto; padding: 30px; box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid var(--panel-border); box-sizing: border-box;
}
#article-content img { max-width: 100%; height: auto; border-radius: 5px; }
.panel-toggle {
    position: absolute; top: 10px; left: 10px; z-index: 120;
    background: rgba(0,0,0,0.7); color: #f0f0f0; font-weight: bold; font-size: 22px;
    padding: 6px 10px; border-radius: 4px; cursor: pointer; user-select: none; border: 0;
}
body.panel-expanded #article-panel { left: 0; right: 0; width: 100%; max-width: 100%; box-shadow: none; border-left: none; }
body.panel-expanded #media-viewer { display: none; }

/* ---------- Contenu multipage ---------- */
.page-content { animation: fadeIn 0.6s ease-in-out; }
.page-content h1, .page-title {
    font-size: 2.5rem; font-weight: 300; letter-spacing: 2px;
    color: var(--text-color); margin-bottom: 10px;
}
.page-subtitle { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px; }
.page-section { margin-bottom: 40px; }
.page-section h2 {
    font-size: 1.5rem; font-weight: 600; color: var(--accent-color);
    margin-bottom: 15px; padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color); display: inline-block;
}
.page-section h3 { color: var(--text-color); margin: 18px 0 8px; }
.page-section p { color: var(--text-light); margin-bottom: 15px; line-height: 1.7; }
.page-section ul, .page-section ol { color: var(--text-light); margin-left: 20px; margin-bottom: 15px; }
.page-section li { margin-bottom: 8px; line-height: 1.6; }
.page-section a { color: var(--accent-color); border-bottom: 1px dotted var(--accent-color); }
.page-section a:hover { border-bottom-color: var(--accent-hover); text-decoration: none; }

/* ---------- Projets (accueil) ---------- */
#projets { padding: 20px 0; }
#projets h2 { text-align: center; font-size: 2rem; color: var(--text-color); margin-bottom: 30px; }
.projets-grid, .projet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.projet-card {
    background: var(--panel-bg); border: 1px solid rgba(243,156,18,0.3);
    border-radius: 12px; padding: 25px; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.projet-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.projet-card h3 { color: var(--accent-color); font-size: 1.3rem; margin-bottom: 12px; }
.projet-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 15px; line-height: 1.6; }
.projet-card a { color: var(--accent-color); font-weight: 600; border-bottom: 1px solid var(--accent-color); }
.projet-card a:hover { border-bottom-color: var(--accent-hover); text-decoration: none; }

/* ---------- FOOTER + ROUE DENTEE (origine, non modifiee) ----------
   Footer en flux normal en bas de page (scroll) : la moitie haute
   de la roue reste visible, ses dents restent cliquables. */
footer {
    position: relative; z-index: 10;
    width: 100%;
    min-height: calc((var(--gear-size) / 2) + (var(--tooth-size) / 2) + 20px);
    background: transparent;
    text-align: center; padding: 25px 20px 10px;
    overflow: hidden; pointer-events: none; perspective: 1000px;
}
#logo {
    position: relative; width: 180px; height: 180px; border-radius: 50%;
    z-index: 12; pointer-events: auto; margin-bottom: 10px;
}
#gear-container {
    position: absolute; bottom: calc(var(--gear-size) / -2); left: 50%;
    transform: translateX(-50%);
    width: var(--gear-size); height: var(--gear-size);
    pointer-events: auto; transform-style: preserve-3d;
}
#gear-container::before {
    content: ''; position: absolute; width: 220px; height: 220px;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    background: #282828; border-radius: 50%; border: 5px solid #222; z-index: 11;
}
.gear {
    width: 100%; height: 100%; position: relative;
    animation: spin 30s linear infinite; pointer-events: none; transform-style: preserve-3d;
}
.gear::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) translateZ(5px);
    width: 65%; height: 65%;
    background: radial-gradient(circle at 30% 30%, #555, #333 80%);
    border-radius: 50%; border: 5px solid #222; box-shadow: inset 0 0 20px #000; overflow: hidden;
}
.gear::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) translateZ(6px);
    width: 65%; height: 65%; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%);
    animation: shine 5s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shine {
    0% { transform: translate(-50%,-50%) translateZ(6px) rotate(0deg); }
    100% { transform: translate(-50%,-50%) translateZ(6px) rotate(360deg); }
}

/* Dents : un <a class="tooth-button"> par section (voir script.js).
   Le label est en <span> pour rester lisible sur la dent. */
.tooth {
    position: absolute; left: 50%; top: 0;
    margin-left: calc(var(--tooth-size) / -2);
    width: var(--tooth-size); height: calc(var(--gear-size) / 2);
    transform-origin: center bottom; pointer-events: auto; transform: translateZ(0);
}
.tooth-button {
    width: var(--tooth-size); height: var(--tooth-size);
    background-color: #555; background-size: cover; background-position: center;
    border: 5px solid #222; border-radius: 15px; cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4), inset 0 -10px 15px rgba(0,0,0,0.3);
    position: absolute; top: 80px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.1; padding: 4px;
}
.tooth-button:hover, .tooth-button:focus-visible {
    transform: translateY(-50%) scale(1.15); border-color: var(--accent-color); z-index: 100; color:#fff; text-decoration:none;
}
.tooth-button.is-current { border-color: var(--accent-color); outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* ---------- Menu vertical gauche (origine, conserve) ---------- */
#side-vertical-menu {
    position: absolute; top: 0; left: 0; width: 22vw; min-width: 180px; max-width: 260px;
    height: 100%; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.side-menu-wheel {
    position: relative; width: 100%; max-height: 70vh; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; overflow: hidden; pointer-events: auto;
}
.side-menu-item {
    font-family: "Roboto", system-ui, sans-serif; font-size: 0.8rem; letter-spacing: 0.05em;
    text-transform: uppercase; color: rgba(240,240,240,0.25); margin: 4px 0; padding: 4px 16px 4px 20px;
    cursor: pointer; transform-origin: left center;
    transition: transform 0.35s ease, color 0.35s ease, opacity 0.35s ease; opacity: 0.2; max-width: 90%;
}
.side-menu-item.is-center { font-size: 1rem; opacity: 1; color: #f7f7f7; }
@media (min-width: 769px) {
    .side-menu-item:hover { transform: translateX(10px) scale(1.08); color: #fff; opacity: 1; }
    #left-menu a, .left-menu a, .sidebar-left a, .main-menu-left a { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
    #left-menu a:hover, .left-menu a:hover, .sidebar-left a:hover, .main-menu-left a:hover {
        transform: translateX(6px) scale(1.08); box-shadow: 0 10px 25px rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
    }
}

/* ---------- Responsive tablette / mobile (origine social + c) ---------- */
@media (max-width: 768px) {
    :root { --gear-size: 400px; --tooth-size: 70px; }
    #lang-switcher { top: 10px; right: 10px; gap: 3px; }
    .lang-link, .lang-btn { font-size: 12px; padding: 4px 8px; }
    #social-links { padding: 10px 15px 0; font-size: 13px; }
    main { padding: 20px 15px 40px; padding-top: 20px; }
    #hero-left, #hero, .hero { padding: 56px 20px 24px; max-width: none; margin-left: 0; }
    #hero-left::before, #hero::before, .hero::before { inset: 0; border-radius: 0; }
    #hero h1, #hero-left h1, .hero h1 { font-size: clamp(2rem, 8vw, 3rem); letter-spacing: 2px; }
    #hero .hero-actions, .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; max-width: 300px; text-align: center; }
    .projets-grid, .projet-grid { grid-template-columns: 1fr; gap: 15px; }
    .projet-card { padding: 20px; }
    /* Roue sur mobile : moitie haute en haut du footer (origine) */
    footer { min-height: calc(var(--gear-size) / 2); padding-top: 10px; }
    #logo { width: 120px; height: 120px; }
    #gear-container::before { width: 140px; height: 140px; }
    .tooth-button { top: 60px; font-size: 9px; }
    .menu-wrapper { left: 15px; right: auto; }
    .menu { left: 0; right: auto; }
    #article-panel { width: 100%; max-width: 100%; height: auto; position: static; box-shadow: none; border-left: none; }
    #side-vertical-menu { width: 100%; height: auto; top: 90px; left: 0; justify-content: center; pointer-events: auto; }
    .side-menu-wheel { align-items: center; max-height: 40vh; }
    .side-menu-item { text-align: center; max-width: 90%; }
}
@media (max-width: 480px) {
    html { font-size: 14px; }
    .btn { padding: 12px 20px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gear, .gear::after { animation: none; }
    html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

/* ===== HOME PLAYER LAYOUT — hero lisible, projets droite, roue fixe, menu fleche, mode player ===== */
body.social-home.home-page #hero-left::before, body.social-home #hero-left::before {
    background: linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.92) 45%, rgba(10,10,10,0.78) 100%) !important;
}
.brand-logo{display:inline-flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;color:#f39c12;text-decoration:none;margin-bottom:10px}
.brand-logo img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:#222}
.btn-primary{background:#7a3a00!important;color:#fff!important;border-color:#f39c12!important;text-shadow:none}
.btn-primary:hover{background:#f39c12!important;color:#111!important}
.home-split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,44vw) minmax(0,1fr);gap:2rem;align-items:start;max-width:1400px;margin:0 auto;padding:70px 24px 280px}
.home-split #hero-left{position:relative;margin-left:0;max-width:720px}
.home-split #content{max-width:560px;width:100%;justify-self:end;background:rgba(12,12,12,0.88);border:1px solid rgba(243,156,18,0.35);border-radius:16px;padding:22px;backdrop-filter:blur(8px);max-height:calc(100dvh - 340px);overflow-y:auto}
.home-split #projets .projet-grid{grid-template-columns:1fr}
#osd-viewer{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;background:#000}
#osd-viewer canvas{width:100%!important;height:100%!important}
#osd-fallback{position:fixed;inset:0;z-index:0;display:grid;place-items:center;min-height:100dvh;background:radial-gradient(1200px 700px at 70% 20%, #3a2a12, #0b0b0b 60%);color:#f0f0f0;text-align:center;padding:2rem}
#top-left{position:fixed;top:1.2rem;left:1.2rem;z-index:30;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#image-title{background:rgba(0,0,0,.7);color:#fff;padding:.5rem 1rem;border-radius:6px;font-size:.95rem;font-weight:600;max-width:min(70vw,520px)}
#counter{background:rgba(255,255,255,.9);color:#222;padding:.25rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700}
#zoom-hint{color:rgba(255,255,255,.85);font-size:.8rem;text-shadow:0 1px 2px #000;max-width:420px}
.arrow-btn{position:fixed;top:50%;transform:translateY(-50%);z-index:30;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.arrow-btn:hover{background:rgba(255,255,255,.28)}
#arrow-left{left:1rem}#arrow-right{right:1rem}
.arrow-btn svg{width:28px;height:28px}
#bottom-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;pointer-events:none}
#bottom-dock>*{pointer-events:auto}
#music-player{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:rgba(20,20,20,.92);border-top:1px solid rgba(255,255,255,.15);padding:.7rem .9rem;backdrop-filter:blur(12px);max-width:min(640px,92vw);border-radius:12px 12px 0 0;margin:0 0 0 12px}
#music-player select{max-width:220px;min-height:40px;border-radius:8px;padding:0 .6rem;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
#music-player select option{color:#111}
.player-controls{display:flex;align-items:center;gap:.4rem}
.player-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.player-btn svg{width:20px;height:20px}
#btn-shuffle.active{color:#4caf50;border-color:rgba(76,175,80,.6);background:rgba(76,175,80,.18)}
.track-info{min-width:180px;flex:1}
.track-title{color:#fff;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.track-artist{color:rgba(255,255,255,.65);font-size:.8rem}
.track-message{font-size:.78rem;line-height:1.35}
.track-message-link{color:#8fd18f}
.player-progress-container{height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;margin-top:6px;cursor:pointer}
.player-progress{height:100%;width:0%;background:#2e7d32}
.progress-time{color:rgba(255,255,255,.6);font-size:.72rem}
body.home-page .wheel-wrap footer{position:relative;width:460px;min-height:230px;overflow:visible;background:transparent;padding:0;pointer-events:none}
body.home-page .wheel-wrap #gear-container{position:absolute;left:50%;bottom:calc(var(--gear-size) / -2);transform:translateX(-50%)}
body.home-page .wheel-wrap #logo{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:150px;height:150px}
#menu-toggle{position:fixed;right:18px;bottom:18px;z-index:60;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.75);color:#fff;display:grid;place-items:center;cursor:pointer}
#menu-toggle svg{width:24px;height:24px}
#menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
#player-menu{position:fixed;right:18px;bottom:82px;z-index:59;width:min(320px,92vw);background:rgba(16,16,16,.96);border:1px solid rgba(243,156,18,.4);border-radius:12px;padding:.8rem;display:none;max-height:60dvh;overflow-y:auto}
#player-menu[aria-hidden="false"]{display:block}
#player-menu button{display:block;width:100%;text-align:left;margin:4px 0;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.6rem .7rem;cursor:pointer}
#player-menu button:hover{background:rgba(243,156,18,.2)}
#player-menu hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:.6rem 0}
.menu-sponsors{display:flex;flex-direction:column;gap:6px}
.menu-sponsors a{color:#b9d9b9;font-size:.82rem}
.popup{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:1rem}
.popup.visible{display:flex}
.popup-content{background:#111;border-radius:12px;max-width:760px;width:100%;max-height:84vh;overflow:auto;position:relative;padding:1.2rem;color:#eee}
.popup-close{position:absolute;top:.6rem;right:.8rem;background:transparent;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
.popup-content pre{white-space:pre-wrap;word-break:break-word;font-family:monospace}
.popup-copy{margin-top:1rem;background:#f39c12;color:#111;border:0;border-radius:6px;padding:.5rem 1rem;font-weight:700;cursor:pointer}
#idle-info{position:fixed;left:1.5rem;bottom:4rem;z-index:30;display:none;flex-direction:column;gap:.2rem;pointer-events:none}
#idle-info.visible{display:flex}
#idle-image-title{color:#fff;font-size:1.4rem;font-weight:800;text-shadow:0 2px 10px #000}
#idle-countdown{color:rgba(255,255,255,.8)}
.idle-music-line{color:#f2b880;display:flex;gap:.6rem;align-items:baseline}
#idle-track-title{font-size:1.1rem}
body.is-idle #top-left,body.is-idle .home-split,body.is-idle #lang-switcher,body.is-idle .arrow-btn,body.is-idle #bottom-dock{visibility:hidden;opacity:0;pointer-events:none}
body.is-idle #menu-toggle{visibility:visible;opacity:1;pointer-events:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){
.home-split{grid-template-columns:1fr;padding:70px 16px 300px}
.home-split #content{justify-self:stretch;max-width:none;max-height:none}
#bottom-dock{grid-template-columns:1fr}
#music-player{margin:0 10px;max-width:none;border-radius:12px}
body.home-page .wheel-wrap footer{width:100%;min-height:200px}
body.home-page .wheel-wrap #logo{width:120px;height:120px}
#menu-toggle{bottom:14px;right:14px}
}

/* ===== ETAPE 6: roue = lecteur (playlists/controles/titre/sponsors DANS la roue) =====
   .gear tourne (spin 30s), le lecteur est un frere (non rotatif) en overlay
   sur la moitie haute visible de la roue. Dents = liens sections (inchdans script.js). */
body.home-page #bottom-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none}
body.home-page #bottom-dock>*{pointer-events:auto}
body.home-page .wheel-wrap footer{position:relative;width:560px;max-width:94vw;height:330px;min-height:330px;margin:0 auto;overflow:visible;background:transparent;padding:0;pointer-events:none}
body.home-page .wheel-wrap #gear-container{position:absolute;left:50%;bottom:calc(var(--gear-size) / -2);transform:translateX(-50%)}
body.home-page .wheel-wrap #logo{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:110px;height:110px;z-index:14}
body.home-page .wheel-wrap #music-player{
  position:absolute;left:50%;bottom:128px;transform:translateX(-50%);
  width:min(500px,88vw);max-width:88vw;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:rgba(10,10,10,.82);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:.6rem .7rem;backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.55);z-index:16;
}
body.home-page .wheel-wrap #music-player .player-left{width:100%;display:flex;justify-content:center}
body.home-page .wheel-wrap #music-player select{width:100%;max-width:none;min-height:36px;text-align:center}
body.home-page .wheel-wrap #music-player .player-controls{justify-content:center}
body.home-page .wheel-wrap #music-player .track-info{width:100%;min-width:0;text-align:center}
body.home-page .wheel-wrap #music-player .track-title{max-width:none}
body.home-page .wheel-wrap #music-player .track-message{max-height:2.6em;overflow:hidden}
body.home-page .wheel-wrap #music-player .progress-time{display:block;text-align:center}
body.home-page .dock-spacer{display:none}

/* ===== ETAPE 6: mode player strict (idle 20s) — RIEN de plus que l'original =====
   Reste visible: #osd-viewer (+ fallback visuel), #idle-info.
   Tout le reste (roue, hero, projets, carousel, fleches, top-left, lang,
   menu fleche + menu) est invisible. */
body.is-idle .home-split,
body.is-idle #bottom-dock,
body.is-idle #top-left,
body.is-idle #lang-switcher,
body.is-idle .arrow-btn,
body.is-idle #menu-toggle,
body.is-idle #player-menu,
body.is-idle #counter,
body.is-idle #zoom-hint{visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
body.is-idle #osd-viewer{display:block !important}
body.is-idle #idle-info{display:flex !important;visibility:visible !important;opacity:1 !important}
@media (max-width:768px){
  body.home-page .wheel-wrap footer{width:100%;height:280px;min-height:280px}
  body.home-page .wheel-wrap #logo{width:90px;height:90px}
  body.home-page .wheel-wrap #music-player{bottom:104px;width:min(440px,92vw)}
}

/* ===== ETAPE 7: compact circulaire, SANS encadrement, SANS logo =====
   .wheel-wrap #logo et .wheel-logo-link supprimes du HTML.
   #music-player est INSIDE #gear-container (centre de la roue) :
   - fond circulaire radial semi-transparent (pas de rectangle)
   - controle circulaires petits (32px, prev/next 28px, play 36px)
   - select playlist compact circulaire, titre + timer + sponsors en bas
   - gear (moteur rotatif) derriere, dents autour de l'anneau. */

body.home-page .wheel-wrap footer#wheel-footer{
  position:relative;width:calc(var(--gear-size) + 120px);max-width:100vw;
  height:calc(var(--gear-size)/2 + 170px);min-height:calc(var(--gear-size)/2 + 170px);
  margin:0 auto;overflow:visible;background:transparent;padding:0;pointer-events:none;
}
body.home-page .wheel-wrap #gear-container{
  position:absolute;left:50%;bottom:calc(var(--gear-size) / -2);transform:translateX(-50%);
  width:var(--gear-size);height:var(--gear-size);
  display:grid;place-items:center;
}
/* centre du gear = noyau du lecteur (cercle) */
body.home-page .wheel-wrap #wheel-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(360px,86%);aspect-ratio:1/1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:14px 20px;text-align:center;
  background:radial-gradient(circle at 50% 38%, rgba(18,18,18,.88), rgba(10,10,10,.78) 68%, rgba(0,0,0,.62));
  border:none;box-shadow:none;backdrop-filter:blur(8px);
  z-index:12;pointer-events:auto;
}
body.home-page .wheel-wrap #music-player{
  position:static;transform:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;max-width:100%;background:transparent;border:none;box-shadow:none;
  backdrop-filter:none;margin:0;padding:0;
}
body.home-page .wheel-wrap #music-player .player-left{width:auto;display:flex;justify-content:center}
body.home-page .wheel-wrap #music-player select{
  width:min(260px,72vw);max-width:72vw;min-height:28px;height:28px;
  border-radius:999px;padding:0 .9rem;font-size:.82rem;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
}
body.home-page .wheel-wrap #music-player .player-controls{gap:8px;justify-content:center}
body.home-page .wheel-wrap .player-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;
  cursor:pointer;transition:transform .15s ease,background .15s ease;
}
body.home-page .wheel-wrap #btn-play-pause{width:36px;height:36px;background:rgba(243,156,18,.16);border-color:rgba(243,156,18,.55)}
body.home-page .wheel-wrap .player-btn svg{width:14px;height:14px}
body.home-page .wheel-wrap #btn-play-pause svg{width:17px;height:17px}
body.home-page .wheel-wrap .player-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.16)}
body.home-page .wheel-wrap .track-info{width:100%;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
body.home-page .wheel-wrap .track-title{font-size:.82rem;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.home-page .wheel-wrap .track-artist{font-size:.68rem;color:rgba(255,255,255,.7)}
body.home-page .wheel-wrap .track-message{font-size:.66rem;line-height:1.25;max-height:2.4em;overflow:hidden;max-width:90%}
body.home-page .wheel-wrap .player-progress-container{width:82%;height:3px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;cursor:pointer;margin-top:2px}
body.home-page .wheel-wrap .player-progress{height:100%;width:0%;background:#f39c12}
body.home-page .wheel-wrap .progress-time{font-size:.62rem;color:rgba(255,255,255,.6);display:block}
body.home-page .wheel-wrap #logo,
body.home-page .wheel-wrap .wheel-logo-link{display:none !important}
/* dents autour de l'anneau: poussees vers le centre, lisibles */
body.home-page .wheel-wrap .tooth{height:calc(var(--gear-size)/2)}
body.home-page .wheel-wrap .tooth-button{top:calc(var(--gear-size)/2 - 10px);font-size:10px}
@media (max-width:768px){
  body.home-page .wheel-wrap footer#wheel-footer{width:calc(var(--gear-size) + 40px);height:calc(var(--gear-size)/2 + 140px);min-height:calc(var(--gear-size)/2 + 140px)}
  body.home-page .wheel-wrap #wheel-center{width:min(300px,88%);padding:10px 14px}
  body.home-page .wheel-wrap #music-player select{min-height:26px;height:26px;font-size:.78rem}
  body.home-page .wheel-wrap .player-btn{width:26px;height:26px}
  body.home-page .wheel-wrap #btn-play-pause{width:32px;height:32px}
}