html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ===== HOME PAGE ===== */

@font-face {
    font-family: "LowerResolution";
    src: url("../font/LowerResolution.ttf") format("truetype");
}


body {
    margin: 0;
    padding: 0;
    font-family: "LowerResolution";
}
header {
  background: var(--header-bg);
  color: var(--header-text);
  height: 60px;
  position: relative;
  z-index: 9999;
}

header a {
  color: var(--header-text);
}

header>* {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 30px;
}
header img {
    width: 40px;
}
header, header a {
    color: var(--header-text);
    text-decoration: none;
}

header a:nth-child(4) {
    font-size: 20px;
    font-weight: normal;
    left: 60px;
    list-style: none;
}


header a:nth-child(2) {
    font-size: 20px;
    font-weight: normal;
    right: 100px;
    list-style: none;
}

header a:nth-child(3) {
    font-size: 20px;
    font-weight: normal;
    right: 0;
    list-style: none;;
}


/* ===== THEME SYSTEM ===== */

:root {
  --bg: white;        /* fond page */
  --text: black;      /* texte page */
  --header-bg: black; /* fond header */
  --header-text: white;
}

[data-theme="dark"] {
  --bg: #000;
  --text: white;
  --header-bg: white;
  --header-text: black;
}

body {
  margin: 0;
  padding: 0;
  font-family: "LowerResolution";
  background: var(--bg);
  color: var(--text);
}


#theme-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* supprime style bouton navigateur */
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
}

#theme-toggle img {
  width: 28px;   /* ajuste ici */
  height: 28px;
  display: block;
}

/* transition globale du thème */
body,
header,
a,
p,
h1,
h2,
h3,
span,
div,
section {
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    fill 0.5s ease;
}




/* ===== Main page ===== */


.Titre a:nth-child(1) {
    font-size: 60px;
    color: var(--text);
    font-weight: normal;
    text-decoration: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Titre a:nth-child(2) {
    font-size: 50px;
    color: var(--text);
    font-weight: normal;
    text-decoration: none;
    position: absolute;
    top: 200px;
    left: 300px;
    transform: translate(-50%, -50%);
}

.Titre a:nth-child(3) {
    font-size: 50px;
    color: var(--text);
    font-weight: normal;
    text-decoration: none;
    position: absolute;
    bottom: 200px;
    right: 300px;
    transform: translate(-50%, -50%);
}

.rectangle1 {
  width: 100px;
  height: 35px;
  background: rgb(82, 255, 47);
  position: absolute;
  top: 195px;
  left: 280px;
  z-index: -1;
}

.rectangle2 {
  width: 100px;
  height: 35px;
  background: rgb(54, 47, 255);
  position: absolute;
  bottom: 225px;
  right: 295px;
  z-index: -1;
}

.cursor-blur {
    position: fixed;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;

    /* force du flou */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(2px);

    /* dégradé radial = flou fort centre → disparition bord */
    mask-image: radial-gradient(circle,
        black 0%,
        black 20%,
        rgba(0,0,0,0.7) 40%,
        rgba(0,0,0,0.3) 60%,
        transparent 80%
    );

    -webkit-mask-image: radial-gradient(circle,
        black 0%,
        black 20%,
        rgba(0,0,0,0.7) 40%,
        rgba(0,0,0,0.3) 60%,
        transparent 80%
    );
}

/* ===== PIXEL EFFECT GLOBAL ===== */

model-viewer {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: contrast(1.3) saturate(1.15);
}


/* ===== MODEL 1 ===== */

.model1 {
    position: absolute;
    top: 70%;
    left: 20%;

    /* petite taille réelle = rendu basse résolution */
    width: 150px;
    height: 150px;

    /* centre puis agrandit */
    transform: translate(-50%, -50%) scale(2);
    transform-origin: center;

    background: transparent;
}


/* ===== MODEL 2 ===== */

.model2 {
    position: absolute;
    top: 28%;
    right: 15%;

    width: 110px;
    height: 110px;

    transform: translate(50%, -50%) rotate(20deg) scale(2);
    transform-origin: center;

    background: transparent;
}

/* ===== SOUND PAGE ===== */


.album {
    display: flex;          /* image et texte côte à côte */
    align-items: flex-start;
    gap: 60px;
    padding: 80px;
    margin-top: 2px;       /* espace sous le header */
}

/* ===== LOADING SECTION ===== */

.loading-section {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.next-project {
    font-size: 50px;
    color: var(--text);
    margin: 10px 0;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.loading-text {
    font-size: 25px;
    color: var(--text);
    margin: 0;
    letter-spacing: 2px;
    margin-top: 10px;
}

[data-theme="dark"] .c-loader__scaffolding {
    fill: white;
}

[data-theme="dark"] .c-loader__svg path {
    fill: white;
}


/* ===== ELS SECTION ===== */

.ELS-cover-container {
    position: relative;
    width: 700px;
    height: 700px;
    flex-shrink: 0; /* empêche le container de rétrécir */
    cursor: pointer;
}

.ELS-cover-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.8s ease;
}

#cover-back {
    opacity: 0; /* cachée au départ */
}

.album-info h1 {
    font-size: 70px;
    font-weight: normal;
    margin: 0 0 0px 0;
}

.album-info p {
    font-size: 20px;
    color: var(--text);
    margin-bottom: 20px;
    margin-top: 0;
}

.tracklist {
    list-style: none;
    padding: 0;
    margin-left: 20x;
}

.tracklist li {
    font-size: 30px;
    margin-bottom: 12px;
}

.tracklist span {
    font-size: 25px;
    color: var(--text);
    margin-left: 10px;
}

.ELS-description {
    font-size: 14px;
    margin-top: 70px !important;
    color: var(--text) !important;
}

#cover {
    cursor: pointer;
}

.c-loader {
    width: 60px;
}


.tracklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.track {
    display: flex;
    align-items: center;  /* centre vertical bouton + texte */
    gap: 12px;
}


.play-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


.play-btn img {
    width: 100%;
    height: 100%;
    display: block;                /* supprime inline spacing */
    transform: translateY(-4px);   /* remonte légèrement le GIF */
}


.track span {
    line-height: 1;                /* supprime décalage ligne */
}



/* ===== video page ===== */

.Macbeth-section {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px;
}

.video-container {
    width: 700px;
    aspect-ratio: 16/9;
    flex-shrink: 0;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

.Macbeth-description {
    font-size: 20px;
    max-width: 9000px;
    line-height: 1;
}

.Macbeth-info {
    display: flex;
    flex-direction: column;
    max-width: 600px;
}

.Macbeth-info h1 {
    font-size: 70px;
    font-weight: normal;
    margin: 0 0 20px 0;
}

.young-love-section {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px;
}

.young-love-description {
    font-size: 20px;
    max-width: 9000px;
    line-height: 1;
}

.young-love-info {
    display: flex;
    flex-direction: column;
    max-width: 600px;
}

.young-love-info h1 {
    font-size: 70px;
    font-weight: normal;
    margin: 0 0 20px 0;
}


/* ===== reseaux ===== */

.reseaux {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.reseaux-ligne {
    display: flex;
    align-items: center;
    gap: 20px;
}

.reseaux-ligne img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.reseaux-ligne a {
    font-size: 30px;
    color: var(--text);
    text-decoration: none;
    line-height: 0.5;
}

.reseaux-ligne:nth-child(1) img {
    width: 30px;
    height: 30px;
}

.reseaux-ligne:nth-child(2) img {
    width: 35px;
    height: 35px;
}

.reseaux-ligne:nth-child(3) img {
    width: 40px;
    height: 40px;
}

.reseaux-ligne:nth-child(4) img {
    width: 60px;
    height: 60px;
}

[data-theme="dark"] .reseaux-ligne img {
    filter: invert(1);
}

/* ===== contact ===== */

.contact a{
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 40px;
    color: var(--text);
}


/* ===== Responsive ===== */

/* ===== GRAND ECRAN 1281px+ ===== */
@media screen and (min-width: 1281px) {
    .model1, .model2 {
        display: block;
    }
}

/* ===== TABLETTE PAYSAGE / PETIT ECRAN 960px - 1280px ===== */
@media screen and (max-width: 1280px) {
    .model1 {
        width: 130px;
        height: 130px;
        transform: translate(-50%, -50%) scale(1.5);
        top: 75%;
        left: 25%;
    }
    .model2 {
        width: 90px;
        height: 90px;
        transform: translate(50%, -50%) rotate(20deg) scale(1.5);
        top: 30%;
        right: 20%;
    }
    .Macbeth-section,
    .young-love-section {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 40px 20px;
        gap: 30px;
        height: auto;
    }
    .video-container {
        width: 100%;
        max-width: 600px;
        aspect-ratio: 16/9;
    }
    .Macbeth-info,
    .young-love-info {
        max-width: 100%;
        text-align: center;
    }
    .Macbeth-description,
    .young-love-description {
        font-size: 16px;
        line-height: 1.3;
    }
    .Macbeth-info h1,
    .young-love-info h1 {
        font-size: 50px;
    }
    .album {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ELS-cover-container {
        width: 400px;
        height: 400px;
    }
    .album-info h1 {
        font-size: 50px;
    }
}

/* ===== SMARTPHONE PAYSAGE / TABLETTE PORTRAIT 480px - 959px ===== */

@media screen and (max-width: 959px) {

   /* ===== INDEX - page fixe SANS casser le viewport ===== */
    html:has(body.index-page) {
        overflow: hidden;
        min-height: 100dvh;
    }

    body.index-page {
        overflow: hidden;
        min-height: 100dvh;
        width: 100%;
        position: relative;
    }

    /* ===== CONTACT & RESEAUX - page fixe propre ===== */
    html:has(body.contact-page),
    html:has(body.reseaux-page) {
        overflow: hidden;
        min-height: 100dvh;
    }

    body.contact-page,
    body.reseaux-page {
        overflow: hidden;
        min-height: 100dvh;
        width: 100%;
        position: relative;
    }

    /* ===== SOUND & VIDEO - scroll vertical autorisé ===== */
    html:has(body.sound-page),
    html:has(body.video-page) {
        overflow-x: hidden;
    }

    body.sound-page,
    body.video-page {
        overflow-x: hidden;
        width: 100%;
        position: relative;
        min-height: 100dvh;
    }

    .model1, .model2 {
        display: none;
    }

    .Titre a:nth-child(2) {
        font-size: 40px;
        top: 200px;
        left: 150px;
    }

    .rectangle1 {
        top: 195px;
        left: 145px;
    }

    .Titre a:nth-child(3) {
        font-size: 40px;
        bottom: 110px;
        right: 100px;
    }

    .rectangle2 {
        bottom: 125px;
        right: 80px;
    }

    .ELS-cover-container {
        width: 300px;
        height: 300px;
    }

    .album-info h1 {
        font-size: 40px;
    }

    .album-info p {
        font-size: 16px;
    }

    .tracklist li {
        font-size: 20px;
    }

    .tracklist span {
        font-size: 18px;
    }

    .Macbeth-section,
    .young-love-section {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px;
        gap: 20px;
        height: auto;
    }

    .video-container {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 16/9;
    }

    .Macbeth-info,
    .young-love-info {
        max-width: 100%;
        text-align: center;
    }

    .Macbeth-info h1,
    .young-love-info h1 {
        font-size: 36px;
    }

    .Macbeth-description,
    .young-love-description {
        font-size: 16px;
        line-height: 1.3;
    }
}

/* ===== SMARTPHONE PORTRAIT jusqu'à 479px ===== */
@media screen and (max-width: 479px) {
    .model1, .model2 {
        display: none;
    }
    .Titre a:nth-child(1) {
        font-size: 40px;
    }
    .Titre a:nth-child(2) {
        font-size: 40px;
        top: 180px;
        left: 120px;
    }
    .rectangle1 {
        top: 175px;
        left: 115px;
    }
    .Titre a:nth-child(3) {
        font-size: 40px;
        bottom: 90px;
        right: 70px;
    }
    .rectangle2 {
        bottom: 105px;
        right: 50px;
    }
    .album {
        padding: 20px;
    }
    .ELS-cover-container {
        width: 200px;
        height: 200px;
    }
    .album-info h1 {
        font-size: 30px;
    }
    .album-info p {
        font-size: 14px;
    }
    .tracklist li {
        font-size: 16px;
    }
    .tracklist span {
        font-size: 14px;
    }
    .next-project {
        font-size: 30px;
    }
    .loading-text {
        font-size: 18px;
    }
    #theme-toggle {
        left: 42%;
    }
    .Macbeth-section,
    .young-love-section {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px;
        gap: 20px;
        height: auto;
    }
    .video-container {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16/9;
    }
    .Macbeth-info,
    .young-love-info {
        max-width: 100%;
        text-align: center;
    }
    .Macbeth-info h1,
    .young-love-info h1 {
        font-size: 28px;
    }
    .Macbeth-description,
    .young-love-description {
        font-size: 14px;
    }
    header a:nth-child(2) {
        right: 60px;
        font-size: 16px;
    }
    header a:nth-child(3) {
        font-size: 16px;
    }
    header a:nth-child(4) {
        font-size: 16px;
        left: 50px;
    }
    .contact a {
        font-size: 20px;
    }
}