/* Signature du site (version 1.54) : sélecteur d'ambiance et mode soirée, transitions entre les pages (crossfader, disque), soulignement en onde, écran
   d'arrivée. Réglages : Personnaliser › DJ Boujou › Mouvement du site et Écran d'arrivée (inc/signature.php) ; états ajoutés par
   assets/js/signature.js. Rien de tout cela n'est actif avec « réduire les animations » (le mode soirée change seulement les couleurs). */

@keyframes djb-sig-sway { 0% { transform: rotate(-18deg); } 100% { transform: rotate(18deg); } }
@keyframes djb-sig-wave { to { background-position: -24px 100%; } }
@keyframes djb-spin { to { transform: rotate(360deg); } }
@keyframes djb-sig-fallback { to { opacity: 0; visibility: hidden; } }

/* ---------- Mode soirée ---------- */
html.djb-party {
	--accent: #C9A24B; --cream: #F5EFE4; --black: #1C1916; --panel: #26211C; --seal: #221E1A; --alt: #1C1916; --media: #2E2823;
	--muted: #C9BFAE; --muted-2: #A89E8E; --muted-3: #9B9183; --soft: #DDD4C6; --line: rgba(245, 239, 228, 0.1); --line-2: rgba(245, 239, 228, 0.12);
	--line-strong: rgba(245, 239, 228, 0.28); --hover-tint: rgba(245, 239, 228, 0.06); --scheme: dark; color-scheme: dark;
}
/* Mode soirée : le bandeau des chiffres reste noir, seules les quatre cases sont blanches (1.128) ; dans les cases, les couleurs du thème clair (or foncé, texte brun) */
html.djb-party .stats-band,
html.djb-party .sec--wide:not(.sec--ivoire) .stats-band { background: var(--black); border-bottom-color: var(--line-2); }
html.djb-party .stats-band .stats { gap: 12px; background: none; border-color: transparent; }
html.djb-party .stats-band .stats__item,
html.djb-party .sec--wide:not(.sec--ivoire) .stats-band .stats__item { background: #FBF8F2; border-radius: 6px; --accent: #7E6226; --muted: #6B6258; --cream: #1D1A17; }
body { transition: background-color 0.7s ease, color 0.7s ease; }
/* ---------- Sélecteur d'ambiance (Normal, Soirée, Disco, Funk) : un seul bouton qui n'affiche que le nom de l'ambiance en cours ---------- */
.mode-sw { position: relative; display: inline-flex; flex: none; }
.mode-sw[hidden] { display: none; }
.mode-sw__btn { text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px 8px 12px; border: 1px solid rgba(245, 239, 228, 0.3); border-radius: 99px; background: transparent; color: var(--cream, #F5EFE4); font: 800 10.5px/1 var(--sans); letter-spacing: 0.14em; white-space: nowrap; cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.mode-sw__btn:hover, .mode-sw__btn[aria-expanded="true"] { border-color: var(--gold); }
.mode-sw__btn:focus-visible, .mode-sw__list button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mode-sw:not([data-m="normal"]) .mode-sw__btn { border-color: var(--gold); }
.mode-sw__car { flex: none; margin-left: 1px; transition: transform 0.25s; }
.mode-sw__btn[aria-expanded="true"] .mode-sw__car { transform: rotate(180deg); }
/* Petite icône de l'ambiance : anneau (normal), barres (soirée), boule à facettes (disco), vinyle (funk), égaliseur (electro), pot de peinture en éclaboussure (urbain). */
.mode-sw__ico { flex: none; display: block; width: 14px; height: 14px; }
.mode-sw[data-m="normal"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="normal"] { border-radius: 50%; border: 2px solid currentColor; opacity: 0.6; }
.mode-sw[data-m="party"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="party"] { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 4px 40% no-repeat, linear-gradient(var(--gold), var(--gold)) 50% 100% / 4px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) 100% 100% / 4px 65% no-repeat; }
.mode-sw[data-m="disco"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="disco"] { border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(8, 10, 20, 0.5) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(8, 10, 20, 0.5) 0 1px, transparent 1px 4px), radial-gradient(circle at 34% 30%, #fff 0 7%, #d8e0fb 20%, #8793bd 54%, #2a3050 100%); box-shadow: 0 0 8px rgba(190, 205, 255, 0.5); }
.mode-sw[data-m="funk"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="funk"] { border-radius: 50%; background: radial-gradient(circle, #120a05 0 12%, var(--gold) 13% 36%, #120a05 37% 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.mode-sw[data-m="electro"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="electro"] { border-radius: 2px; background: linear-gradient(90deg, #19E3FF 0 33%, #FF2BD6 33% 66%, #7A5CFF 66%); box-shadow: 0 0 8px rgba(25, 227, 255, 0.6); clip-path: polygon(0 100%, 0 62%, 12% 62%, 12% 30%, 24% 30%, 24% 75%, 36% 75%, 36% 10%, 48% 10%, 48% 55%, 60% 55%, 60% 40%, 72% 40%, 72% 85%, 84% 85%, 84% 25%, 100% 25%, 100% 100%); }
.mode-sw[data-m="urbain"] > .mode-sw__btn .mode-sw__ico, .mode-sw__ico[data-m="urbain"] { border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fff 0 8%, transparent 9%), conic-gradient(from 20deg, #FF5A1F, #FFD60A, #1EC8F0, #FF3D8B, #FF5A1F); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.mode-sw__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 100%; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-strong, rgba(245, 239, 228, 0.28)); border-radius: 14px; background: var(--seal, #221E1A); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.7); }
.mode-sw__list[hidden] { display: none; }
.mode-sw__list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* pont invisible entre le bouton et la liste : le survol ne s'interrompt pas (1.134) */
.mode-sw__list button { text-transform: uppercase; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--cream, #F5EFE4); font: 800 10.5px/1 var(--sans); letter-spacing: 0.14em; text-align: left; white-space: nowrap; cursor: pointer; }
.mode-sw__list button:hover { background: var(--hover-tint, rgba(245, 239, 228, 0.06)); }
.mode-sw__list button[aria-checked="true"] { color: var(--gold); }
.mode-sw--menu { display: none; }
@media (max-width: 899px) {
	.mode-sw--bar { display: none; }
	.mode-sw--menu:not([hidden]) { display: inline-flex; flex-direction: column; align-items: flex-start; margin-top: 18px; align-self: flex-start; }
	.mode-sw--menu .mode-sw__list { position: static; min-width: 0; margin-top: 8px; box-shadow: none; }
	.mode-sw--menu .mode-sw__list::before { display: none; }
}
.party-fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; overflow: hidden; }
html.djb-party .party-fx { opacity: 1; }
.party-fx i { position: absolute; top: -25%; width: 70%; height: 150%; opacity: 0.2; mix-blend-mode: screen; transform-origin: 50% 0; background: conic-gradient(from 180deg at 50% 0%, transparent 42%, var(--bc) 50%, transparent 58%); animation: djb-sig-sway 7s ease-in-out infinite alternate; }
.party-fx i:nth-child(1) { left: -14%; --bc: #E5457E; }
.party-fx i:nth-child(2) { left: 22%; --bc: #8E4DFF; animation-delay: -3s; animation-duration: 9s; }
.party-fx i:nth-child(3) { right: -14%; --bc: #2F7BFF; animation-delay: -5s; }
.party-fx b { position: absolute; inset: 0; background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 40%), rgba(201, 162, 75, 0.13), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .party-fx i { animation: none; } .mode-sw__car { transition: none; } body { transition: none; } }

/* ---------- Soulignement en onde ---------- */
body.djb-wave-links .text-link:hover,
body.djb-wave-links .arrow-link:hover { border-bottom-color: transparent; padding-bottom: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23C9A24B' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100% / 24px 8px; animation: djb-sig-wave 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { body.djb-wave-links .text-link:hover, body.djb-wave-links .arrow-link:hover { animation: none; } }

/* ---------- Transitions : crossfader et disque ---------- */
.djb-curtain { position: fixed; inset: 0; z-index: 99990; background: #1C1916; pointer-events: none; }
.djb-curtain__bar { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; margin-left: -3px; background: #C9A24B; box-shadow: 0 0 24px rgba(201, 162, 75, 0.8); }
.djb-curtain__bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 64px; margin: -32px 0 0 -13px; border-radius: 6px; background: linear-gradient(90deg, #E8E2D6, #B9B1A2); border: 1px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.djb-curtain__vin { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; }
/* Barres néon (Electro) et cassette (Urbain), 1.148 : les couleurs viennent de l'ambiance en cours (--amb-*), sinon l'or du site */
.djb-curtain--bars { background: transparent; display: flex; flex-direction: column; }
.djb-curtain--bars .djb-curtain__strip { flex: 1; transform-origin: 0 50%; background: linear-gradient(90deg, var(--bc, #C9A24B), var(--amb-bg, #1C1916) 92%); box-shadow: 0 0 22px var(--bc, #C9A24B); will-change: transform; }
.djb-curtain--cassette { background: var(--amb-bg, #17161A); }
.djb-curtain__vin svg { width: 100%; height: 100%; display: block; }
html.djb-tr-in::after { content: ""; position: fixed; inset: 0; z-index: 99989; background: #1C1916; animation: djb-sig-fallback 0.01s 3.5s forwards; }
html.djb-tr-cassette::after { background: var(--amb-bg, #1C1916); }
/* arrivée des barres néon : le même décor que le rideau (8 barres), pour qu'aucun saut de couleur ne se voie avant que le script prenne le relais */
html.djb-tr-bars::after { background: linear-gradient(90deg, var(--amb-accent, #C9A24B), var(--amb-bg, #1C1916) 92%) 0 0% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c1, #E5457E), var(--amb-bg, #1C1916) 92%) 0 14.286% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c2, #8E4DFF), var(--amb-bg, #1C1916) 92%) 0 28.571% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c3, #2F7BFF), var(--amb-bg, #1C1916) 92%) 0 42.857% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-accent, #C9A24B), var(--amb-bg, #1C1916) 92%) 0 57.143% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c1, #E5457E), var(--amb-bg, #1C1916) 92%) 0 71.429% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c2, #8E4DFF), var(--amb-bg, #1C1916) 92%) 0 85.714% / 100% 12.5% no-repeat, linear-gradient(90deg, var(--amb-c3, #2F7BFF), var(--amb-bg, #1C1916) 92%) 0 100% / 100% 12.5% no-repeat; }

/* ---------- Écran d'arrivée ---------- */
.djb-intro { display: none; position: fixed; inset: 0; z-index: 99995; place-items: center; text-align: center; color: #F5EFE4; background: radial-gradient(70% 60% at 50% 45%, #2A241D, #0E0C0A) center / cover no-repeat; }
html.djb-intro-on .djb-intro { display: grid; animation: djb-intro-up 0.95s cubic-bezier(0.7, 0, 0.2, 1) calc(var(--intro-t, 5) * 1s - 0.95s) forwards; }
html.djb-intro-on.djb-intro-js { overflow: hidden; }
.djb-intro.is-out { animation: djb-intro-up 0.7s cubic-bezier(0.7, 0, 0.2, 1) forwards !important; }
.djb-intro__in { padding: 0 24px; }
.djb-intro__vin { display: block; width: 120px; height: 120px; margin: 0 auto 22px; opacity: 0; transform: translateY(-90px) scale(1.4) rotate(-180deg); }
.djb-intro__vin svg { width: 100%; height: 100%; display: block; }
.djb-intro__name { display: block; font: 500 clamp(30px, 6vw, 58px)/1 var(--serif); letter-spacing: 0.9em; padding-left: 0.9em; color: #C9A24B; opacity: 0; }
.djb-intro__text { margin: 16px 0 0; font: 500 clamp(15px, 2vw, 21px)/1.4 var(--serif); font-style: italic; color: #D9CFBE; opacity: 0; transform: translateY(10px); }
html.djb-intro-on .djb-intro__vin { animation: djb-intro-drop 1.3s cubic-bezier(0.2, 0.8, 0.25, 1) 0.2s forwards, djb-spin 3.5s linear 1.5s infinite; }
html.djb-intro-on .djb-intro__name { animation: djb-intro-name 1.6s ease 1.1s forwards; }
html.djb-intro-on .djb-intro__text { animation: djb-intro-text 0.9s ease 2.4s forwards; }
.djb-intro__skip { position: absolute; right: 18px; bottom: 18px; padding: 10px 16px; border: 1px solid rgba(245, 239, 228, 0.4); background: rgba(14, 12, 10, 0.55); color: #F5EFE4; font: 700 12px/1 var(--sans); letter-spacing: 0.1em; cursor: pointer; }
.djb-intro__skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Choix de l'ambiance sur l'écran d'arrivée (1.147) : en bas de l'écran, au-dessus du bouton « Passer » ; apparaît tôt pour laisser le temps de choisir. */
.djb-intro__modes { position: absolute; left: 0; right: 0; bottom: max(64px, 7vh); padding: 0 16px; opacity: 0; transform: translateY(10px); }
html.djb-intro-on .djb-intro__modes { animation: djb-intro-text 0.8s ease 1.2s forwards; }
.djb-intro__modes-t { margin: 0 0 12px; font: 800 10.5px/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #C9BFAE; }
.djb-intro__modes-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.djb-intro__mode { display: inline-flex; align-items: center; gap: 7px; padding: 10px 11px 10px 10px; border: 1px solid rgba(245, 239, 228, 0.35); border-radius: 99px; background: rgba(14, 12, 10, 0.55); color: #F5EFE4; font: 800 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
@media (min-width: 600px) { .djb-intro__modes-row { gap: 8px; } .djb-intro__mode { padding: 11px 15px 11px 13px; font-size: 11.5px; letter-spacing: 0.16em; } }
.djb-intro__mode:hover { border-color: var(--gold); }
.djb-intro__mode[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.djb-intro__mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-height: 640px) { .djb-intro__vin { width: 84px; height: 84px; margin-bottom: 14px; } .djb-intro__modes-t { margin-bottom: 8px; } } /* petits écrans : le vinyle rétrécit pour laisser la place aux ambiances */
@keyframes djb-intro-drop { to { opacity: 1; transform: none; } }
@keyframes djb-intro-name { to { opacity: 1; letter-spacing: 0.32em; } }
@keyframes djb-intro-text { to { opacity: 1; transform: none; } }
@keyframes djb-intro-up { to { transform: translateY(-101%); visibility: hidden; } }

/* Mode soirée : les éléments qui avaient une couleur fixe claire */
html.djb-party .subnav__list { background: #26211C; border-color: rgba(245, 239, 228, 0.18); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html.djb-party .subnav a { color: #DDD4C6; }
html.djb-party .subnav a:hover, html.djb-party .subnav a:focus-visible, html.djb-party .subnav a.is-active { color: #C9A24B; }
html.djb-party .subnav a::after { background: #C9A24B; }