/* Je me suis aider de chat GPT lors de la rédaction de ce code */

@import url('https://fonts.googleapis.com/css2?family=Montaga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Montaga&display=swap');
/* =========================================
   VARIABLES
   ========================================= */
:root {
  /* sera synchronisé par JS (syncHeaderHeightVar) */
  --headerH: 80px;
  --gap: 2.44rem;
  --radius: 10px;
  --fg: #c000c0;
  --bg: #fff;
  --muted: #6b7280;
  --brand: #f700ff;

  /* ===== Scroll Progress Bar Variables =====
     These custom properties control the appearance of the neon scroll progress bar that sits
     at the bottom of the viewport. You can tweak these values to adjust the bar's color,
     height and glow intensity without touching the rest of the CSS. */
  --progress-bar-color: #ac00b1ab; /* main colour of the progress bar (neon cyan by default) */
  --progress-bar-height: 8px;   /* height of the bar in pixels */
}

/* =========================================
   RESET DE BASE
   ========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 170%;
}
html,
body {
  height: 100%;
}
body {
  font-family: "neulis-neue", sans-serif;
  font-weight: 300;
  font-style: normal;
  /* font-size: 20px; */
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  /* line-height: 1.5; */
}

/* =========================================
   HEADER FIXE
   ========================================= */
header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--headerH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: #100635;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  z-index: 1000;
}
.header-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
header .logo {
  position: absolute;
  left: 1rem;
}
header .logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
}

/* NAV simple */
nav ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}
nav a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  padding: 0.25rem 0.125rem;
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width 0.25s ease;
}
nav a:hover::after,
nav a.active::after {
  width: 100%;
}

h1 {
  font-size: 2.56em;
  font-weight: 600;
}

li a {
  color: white;
}

/* =========================================
   ZONE CONTENU (injection SPA)
   ========================================= */
main#content,
#main {
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
main#content.show,
#main.show {
  opacity: 1;
  transform: none;
}

/* =========================================
   SECTIONS CENTRÉES & RESPONSIVE
   ========================================= */

.page-section {
  display: grid;
}
/* Première section : plein écran réel (header flotte au-dessus) */
.page-section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  z-index: -1; /* reste derrière le contenu */
}
.page-section:first-of-type {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 1.5rem;
  overflow: hidden;
  scroll-margin-top: var(--headerH);
  background: url(assets/images/background/banner1.jpg) center / cover
    no-repeat;
  position: relative;
  z-index: 0;
}

/* Sections suivantes : espace visible sous le header fixe */
.page-section:not(:first-of-type) {
  height: calc(100dvh - var(--headerH));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 1.5rem;
  overflow: hidden;
  scroll-margin-top: var(--headerH);
  background-color: #02000a;
  background-image: url("assets/images/pattern/gplay.png");
}

.page-section .text {
  order: 0;
  flex: 1 1 0;
  max-width: 85ch;
  width: 100%;
  /* Si texte long, on scrolle dans la colonne sans casser la mise en page */
  max-height: calc(100dvh - var(--headerH) - 3rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem; /* espace pour la scrollbar */
}
/* .page-section .text > * {
  margin: 0;
} */

.page-section img {
  flex: 1 1 0;
  order: -1;
  width: 100%;
  max-width: 30%;
  max-height: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); */
}

/* Titres & paragraphes un peu plus compacts */
.page-section h1 {
  font-size: clamp(2.44rem, 2.8vw, 3.05rem);
  margin-bottom: 1.25rem;
  color: azure;
}
.page-section p {
  color: var(--fg);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 400;
  /* line-height: 1.55; */
  margin-top: 1rem;
  color: azure;
}
.page-section p::first-letter{
  color: var(--fg);
  font-size: clamp(1.95rem, 2.8vw, 2.44rem);
  /* line-height: 1.55; */
  margin-top: 1rem;
  color: azure;
}

.hamburger {
  display: none;
}

/* -------Bouton copy link-------- */
.bouton{
    text-align: center;
    position: relative;
    margin: 0 auto;
}
.boutonP{
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    background-color: #ea00ff;
    color: #272c3b;
    padding: 14px 17px;
    border: none;
    border-radius: 8px;
    margin-top: 1.56rem;
    margin-bottom: 1.56rem;
    bottom: 7px;
    transition: 0.5s;
}
.boutonP:hover{
    background-color: #a500ce;
    color: #272c3b;
    scale: 1.2;
    box-shadow: -2px 5px 20px rgba(0, 0, 0, 0.589);
}

/* =========================================
   Changement de thème pour la page Polemique
   ========================================= */
   
body.polemiques-theme {
  /* surcharge de la police et de la couleur de base du texte */
  font-family: "Calistoga", serif;
  font-weight: 400;
  --fg: #0340f6;
  /* nouvelle couleur pour la barre de progression */
  --progress-bar-color: #0340f6;
  --brand: #ffffff;
}

body.polemiques-theme .page-section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(221, 225, 234, 0.623), rgba(0, 51, 255, 0.185));
  z-index: -1; /* reste derrière le contenu */
}

/* Couleur d’arrière‑plan du header et du menu de navigation */
body.polemiques-theme header,
body.polemiques-theme header nav {
  background: #0035f2;
}

body.polemiques-theme .page-section:first-of-type {
  background: url(assets/images/background/banner2.jpg) center / cover
    no-repeat;
}

/* Sections de la page : nouvelle couleur de fond + motif gplay */
body.polemiques-theme .page-section:not(:first-of-type) {
  background-color: hsl(240, 100%, 98%);
  background-image: url("assets/images/pattern/gplay.png");
}

/* Couleurs des titres et des paragraphes */
body.polemiques-theme .page-section h1,
body.polemiques-theme .page-section p::first-letter,
body.polemiques-theme .page-section p {
  color: #06001c;
  font-family: "Calistoga", serif;
  font-weight: 400;
}

/* Couleur du pied de page */
body.polemiques-theme footer {
  background: #0035f2;
}

body.polemiques-theme .boutonP{
    font-family: "neulis-neue", sans-serif;
    background-color: #ffffff;
    color: #0026ff;
}
body.polemiques-theme .boutonP:hover{
    font-size: large;
    background-color: #ffffff;
    color: #272c3b;
    box-shadow: -2px 5px 20px rgba(0, 0, 0, 0.589);
}


/* =========================================
   RESPONSIVE (<= 900px) : pile vertical + image au-dessus
   ========================================= */
@media (max-width: 1200px) {
  * {
  line-height: 150%;
  }
  body {
    padding-top: var(--headerH);
    font-size: 18px;
  }
  
  /* le header devient un vrai "bar" aligné */
  .header-container {
    justify-content: space-between;
    padding-inline: 0.75rem;
  }

  /* le logo sort du positionnement absolu pour ne plus chevaucher */
  header .logo {
    position: static;
  }
  header .logo-img {
    height: 48px;
  }
  /* bouton hamburger */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1001; /* au-dessus du panneau nav */
  }
  .hamburger span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: white;
  }
  /* NAV en panneau déroulant sous le header */
  header nav {
    position: fixed;
    top: var(--headerH);
    left: 0;
    right: 0;
    background: #100635;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: none; /* caché par défaut */
    z-index: 1000;
  }
  header nav.show {
    /* affiché quand le JS ajoute .show */
    display: block;
  }
  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }
  header nav a {
    font-size: 1.05rem;
    padding: 0.4rem 0;
  }

  H2 {
    line-height: 120%;
  }

  .page-section:first-of-type,
  .page-section:not(:first-of-type) {
    flex-direction: column;
    text-align: left;
    gap: 1.25rem;
    height: calc(100dvh - var(--headerH)); /* plein écran perçu sous header */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1rem 1.25rem;
  }
  .page-section img {
    order: -1;
    max-width: max-content; /* avant le changement il y avait juste max-height: 50%; et max-width: max-content; */
    max-height: 50%;
    height: auto;
    object-fit: contain;
  }
  .page-section .text {
    max-height: 48dvh;
    padding-right: 0;
    max-width: 85ch;
  }
}

/* Très petit écran : réduire encore un peu */
@media (max-width: 380px) {
  .page-section h1 {
    font-size: clamp(1.45rem, 6.6vw, 1.9rem);
  }
  .page-section p {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }
  .page-section img {
    /* max-width: 100%;
    max-height: 46%; */
    object-fit: contain !important; /* au lieu de cover */
    height: auto;
  }
}

/* =========================================
   FOOTER
   ========================================= */
footer {
  position: relative;
  z-index: 1;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: #140e2b;
}

/* === Footer : bande d'icônes horizontale + glow coloré au hover === */
footer .icon__social {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(10px, 1.6vw, 18px) 0;
  margin: 0;
  flex-wrap: wrap; /* passe sur deux lignes si écran étroit */
}

footer .icon__social li {
  display: inline-flex;
}

footer .icon__social a {
  display: inline-flex;
  line-height: 0;
  border-radius: 12px; /* améliore la hit-area pour le focus */
  outline: none;
}

footer .icon__social img {
  width: clamp(28px, 4.6vw, 44px);
  height: clamp(28px, 4.6vw, 44px);
  object-fit: contain;
  user-select: none;
  filter: brightness(0.9) saturate(0.85);
  transition: transform 0.25s ease, filter 0.25s ease;
  will-change: transform, filter;
}

/* Hover/Focus : éclairage + léger lift */
footer .icon__social a:is(:hover, :focus-visible) img {
  transform: translateY(-2px) scale(1.05);
  /* éclairage coloré via drop-shadow + léger boost de luminosité */
  filter: brightness(1.15) saturate(1.15)
    drop-shadow(0 0 10px var(--hover-color, #ff4081));
}

/* Couleur d’éclairage par réseau (via variable CSS portée par l’img) */
.icon__instagram {
  --hover-color: #e1306c;
}
.icon__twitter {
  --hover-color: #1da1f2;
}
.icon__facebook {
  --hover-color: #1877f2;
}
.icon__twitch {
  --hover-color: #9146ff;
}
.icon__spotify {
  --hover-color: #1db954;
}
.icon__tiktok {
  --hover-color: #25f4ee;
}
.icon__youtube {
  --hover-color: #ff0000;
}

/* Accessibilité : préfère limiter l’anim si l’utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
  footer .icon__social img {
    transition: none;
  }
}

footer .icon__social img {
  /* passe en monochrome + inverse pour obtenir du blanc */
  filter: grayscale(1) brightness(0) invert(1) opacity(0.96);
}

/* Au hover : reste blanche + halo coloré + léger lift */
footer .icon__social a:is(:hover, :focus-visible) img {
  transform: translateY(-2px) scale(1.05);
  filter: grayscale(1) brightness(0) invert(1)
    drop-shadow(0 0 10px var(--hover-color, #ff4081));
}

/* =========================================
   BOUTON SCROLL-TO-TOP
   ========================================= */
#scroll-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid white;
  background: #100635;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(255, 255, 255, 0.3);
  display: none;
  z-index: 1100;
  transition: transform 0.15s ease;
}

#scroll-top:hover {
  transform: translateY(-2px);
  /* effet plus intense au survol /
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.7), 0 0 24px rgba(255, 255, 255, 0.5);
  border-color: #f0f0f0; / légèrement plus clair */
}

/* =========================================
   UTILS / COMPAT
   ========================================= */
.container {
  width: 100%;

  margin: 0 auto;
  padding: 0 1rem;
}
.muted {
  color: var(--muted);
}

/* Ancienne classe .page : même layout que .page-section */
.page {
  height: calc(100dvh - var(--headerH));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 1.5rem;
  overflow: hidden;
  scroll-margin-top: var(--headerH);
  text-align: center;
}

/* =========================================
   SCROLL PROGRESS BAR
   -----------------------------------------
   A neon‑styled progress bar that displays how far the user has scrolled down
   the page. It sits fixed at the bottom of the viewport and updates its
   width according to the scroll position. When the user is scrolling,
   the bar gently intensifies its glow. When idle, it pulses softly.

   Customise the bar using the CSS variables defined on :root:
     --progress-bar-color: controls the neon colour
     --progress-bar-height: controls the bar thickness
   To remove or hide the bar completely, simply delete or comment out
   the #scroll-progress-container element in the HTML or set its display
   property to 'none'.
*/
#scroll-progress-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--progress-bar-height);
  background: transparent;
  pointer-events: none; /* allow clicks to pass through */
  z-index: 10000;
}

#scroll-progress {
  width: 0%;
  height: 100%;
  background: var(--progress-bar-color);
  /* neon glow */
  box-shadow: 0 0 5px var(--progress-bar-color),
    0 0 10px var(--progress-bar-color), 0 0 20px var(--progress-bar-color);
  border-radius: 0;
  transition: width 0.1s linear;
  animation: progress-static 2s infinite;
}

/* Apply a different animation while the bar is moving */
#scroll-progress.moving {
  animation: progress-moving 0.8s infinite;
}

/* Static glow animation: subtle pulsation when idle */
@keyframes progress-static {
  0% {
    box-shadow: 0 0 4px var(--progress-bar-color), 0 0 8px var(--progress-bar-color),
      0 0 16px var(--progress-bar-color);
  }
  50% {
    box-shadow: 0 0 8px var(--progress-bar-color), 0 0 16px var(--progress-bar-color),
      0 0 32px var(--progress-bar-color);
  }
  100% {
    box-shadow: 0 0 4px var(--progress-bar-color), 0 0 8px var(--progress-bar-color),
      0 0 16px var(--progress-bar-color);
  }
}

/* Moving glow animation: brighter pulse when scrolling */
@keyframes progress-moving {
  0% {
    box-shadow: 0 0 6px var(--progress-bar-color), 0 0 12px var(--progress-bar-color),
      0 0 24px var(--progress-bar-color);
  }
  50% {
    box-shadow: 0 0 12px var(--progress-bar-color), 0 0 24px var(--progress-bar-color),
      0 0 48px var(--progress-bar-color);
  }
  100% {
    box-shadow: 0 0 6px var(--progress-bar-color), 0 0 12px var(--progress-bar-color),
      0 0 24px var(--progress-bar-color);
  }
}