body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #fff;
}

@font-face {
  font-family: 'Plaid XL';
  src:
    url('../fonts/Plaid-XL.woff2') format('woff2'),
    url('../fonts/Plaid-XL.woff') format('woff'),
    url('../fonts/Plaid-XL.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Hide the auto-injected global header/nav everywhere in this layout */
header,
.site-nav{
  display:none !important;
  visibility:hidden !important;
}

/* Legacy fixed buttons (LOGO 1515 / NEWSLETTER / LINKS / CONTACT) */
.boutons{
  font-family: 'Plaid XL', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: clamp(11px, 1.05vw, 16px);
  line-height: 1;
  color: #fff;
  fill: currentColor !important; /* keep old hover behavior meaningful */
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  display: inline-flex;
  align-items: center;
}

.boutons[data-text-button="1"] svg:not(.boutons-logo){
  display:none !important; /* hide only legacy SVGs, keep our logo */
}

/* Logo inside the "1515" top-left button */
.boutons-logo{
  display:block;
  height: 32px;
  width: auto;
}

.boutons:hover .boutons-logo{
  opacity: 0.5;
}

/* Rainbow animation for CONTACT / LINKS / NEWSLETTER */
@keyframes rainbowText {
  0%   { color: #ff0040; }
  16%  { color: #ff9100; }
  33%  { color: #ffee00; }
  50%  { color: #37ff00; }
  66%  { color: #00e5ff; }
  83%  { color: #7a00ff; }
  100% { color: #ff0040; }
}

/* Rainbow: délais selon spécification */
#newsletter[data-text-button="1"],
#about-us[data-text-button="1"],
#contact-us[data-text-button="1"],
#lien-musique[data-text-button="1"],
#mobile-logo {
  animation: rainbowText 3s linear infinite;
  animation-delay: 0s;
}

/* Links panel (#about-new): alternance 0s, 2s, 0s, 2s... */
#about-new > div:nth-child(odd) a { animation: rainbowText 3s linear infinite; animation-delay: 0s; }
#about-new > div:nth-child(even) a { animation: rainbowText 3s linear infinite; animation-delay: 2s; }
#about-new a { animation: rainbowText 3s linear infinite; }

/* Close picto: rainbow color + plus gras (shadows décalés pour épaissir les traits) */
@keyframes rainbowClose {
  0%   { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(0deg) drop-shadow(1px 0 0 #ff0040) drop-shadow(-1px 0 0 #ff0040) drop-shadow(0 1px 0 #ff0040) drop-shadow(0 -1px 0 #ff0040) drop-shadow(1px 1px 0 #ff0040) drop-shadow(-1px -1px 0 #ff0040) drop-shadow(1px -1px 0 #ff0040) drop-shadow(-1px 1px 0 #ff0040); }
  16%  { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(45deg) drop-shadow(1px 0 0 #ff9100) drop-shadow(-1px 0 0 #ff9100) drop-shadow(0 1px 0 #ff9100) drop-shadow(0 -1px 0 #ff9100) drop-shadow(1px 1px 0 #ff9100) drop-shadow(-1px -1px 0 #ff9100) drop-shadow(1px -1px 0 #ff9100) drop-shadow(-1px 1px 0 #ff9100); }
  33%  { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(90deg) drop-shadow(1px 0 0 #ffee00) drop-shadow(-1px 0 0 #ffee00) drop-shadow(0 1px 0 #ffee00) drop-shadow(0 -1px 0 #ffee00) drop-shadow(1px 1px 0 #ffee00) drop-shadow(-1px -1px 0 #ffee00) drop-shadow(1px -1px 0 #ffee00) drop-shadow(-1px 1px 0 #ffee00); }
  50%  { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(135deg) drop-shadow(1px 0 0 #37ff00) drop-shadow(-1px 0 0 #37ff00) drop-shadow(0 1px 0 #37ff00) drop-shadow(0 -1px 0 #37ff00) drop-shadow(1px 1px 0 #37ff00) drop-shadow(-1px -1px 0 #37ff00) drop-shadow(1px -1px 0 #37ff00) drop-shadow(-1px 1px 0 #37ff00); }
  66%  { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(200deg) drop-shadow(1px 0 0 #00e5ff) drop-shadow(-1px 0 0 #00e5ff) drop-shadow(0 1px 0 #00e5ff) drop-shadow(0 -1px 0 #00e5ff) drop-shadow(1px 1px 0 #00e5ff) drop-shadow(-1px -1px 0 #00e5ff) drop-shadow(1px -1px 0 #00e5ff) drop-shadow(-1px 1px 0 #00e5ff); }
  83%  { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(280deg) drop-shadow(1px 0 0 #7a00ff) drop-shadow(-1px 0 0 #7a00ff) drop-shadow(0 1px 0 #7a00ff) drop-shadow(0 -1px 0 #7a00ff) drop-shadow(1px 1px 0 #7a00ff) drop-shadow(-1px -1px 0 #7a00ff) drop-shadow(1px -1px 0 #7a00ff) drop-shadow(-1px 1px 0 #7a00ff); }
  100% { filter: invert(1) sepia(1) saturate(10000%) hue-rotate(360deg) drop-shadow(1px 0 0 #ff0040) drop-shadow(-1px 0 0 #ff0040) drop-shadow(0 1px 0 #ff0040) drop-shadow(0 -1px 0 #ff0040) drop-shadow(1px 1px 0 #ff0040) drop-shadow(-1px -1px 0 #ff0040) drop-shadow(1px -1px 0 #ff0040) drop-shadow(-1px 1px 0 #ff0040); }
}
#aboutclose {
  animation: rainbowClose 3s linear infinite;
  animation-delay: 0s;
}

/* Hide old text overlay on project thumbnails (date, group) – keep only mask image */
.projectThumbnailHover h4,
.projectThumbnailHover h5,
.projectThumbnailHover h6{
  display:none !important;
}

/* Ensure per-project mask (rond) appears on hover on musique page */
.projectThumbnail{
  position:relative;
}

.projectThumbnailHover{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transition: opacity 1s ease;
  z-index:2;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.projectThumbnail:hover .projectThumbnailHover{
  opacity:1;
  transition: opacity 1s ease;
}

/* Tweaks: more left margin, less top margin */
:root{
  --legacy-nav-left: 50px;
  --legacy-nav-top: 20px;
}

#lien-musique{
  left: var(--legacy-nav-left) !important;
  top: var(--legacy-nav-top) !important;
}

#newsletter{
  top: var(--legacy-nav-top) !important;
}

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
}

.site-nav .logo {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f6c78d;
}

.site-nav-menu {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.site-nav-menu a {
  text-decoration: none;
  color: #ff8439;
  font-size: 14px;
  text-transform: uppercase;
}

.site-nav-menu a:hover {
  opacity: 0.8;
}

.site-footer {
  padding: 32px 24px 24px;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 40px;
}

/* Contact button – typography like other bouton links, centered, no link styling */
.slider-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: #fff !important;
}
.slider-button .button-text {
  font-family: 'Plaid XL', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(12px, 1.2vw, 16px) !important;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5em;
  text-decoration: none !important;
  color: inherit;
}

/* Mobile: burger menu – boutons in overlay, same rainbow behavior */
@media (max-width: 640px) {
  #mobile-nav-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: fixed;
    top: calc(var(--legacy-nav-top) + env(safe-area-inset-top, 0px));
    right: calc(var(--legacy-nav-left) + env(safe-area-inset-right, 0px));
    z-index: 1001;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    animation: rainbowText 3s linear infinite;
  }
  .burger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
  }
  body.menu-open .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.menu-open .burger-line:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Logo outside menu – clone #mobile-logo, hide original in nav */
  #lien-musique {
    display: none !important;
  }
  #mobile-logo {
    display: inline-flex !important;
    position: fixed !important;
    left: calc(var(--legacy-nav-left) + env(safe-area-inset-left, 0px)) !important;
    top: calc(var(--legacy-nav-top) + env(safe-area-inset-top, 0px)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1002;
  }

  nav {
    position: fixed !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.97);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
  }
  body.menu-open nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  nav .boutons {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    font-size: 22px !important;
    color: #fff;
  }
}

/* Hide burger and mobile logo on desktop */
@media (min-width: 641px) {
  #mobile-nav-burger,
  #mobile-logo {
    display: none !important;
  }
}

/* Mobile logo: same rainbow as main logo */
#mobile-logo {
  animation: rainbowText 3s linear infinite;
  animation-delay: 0s;
}

/* Mobile: arrows (#next, #previous) – at bottom, larger tap target */
@media (max-width: 640px) {
  #next,
  #previous {
    top: auto !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    z-index: 10 !important;
    cursor: pointer !important;
  }
  #previous {
    left: calc(24px + env(safe-area-inset-left, 0px)) !important;
  }
  #next {
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* Mobile: scroll arrows (savoir-fleche) – visible and clickable */
@media (max-width: 640px) {
  #savoir-fleche1,
  #savoir-flechehaut {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    cursor: pointer;
    z-index: 10;
  }
}

/* Fullscreen responsive video */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}