@font-face {
    font-family: 'tex_gyre_heros_cnregular';
    src: url('texgyreheroscn-regular-webfont.eot');
    src: url('texgyreheroscn-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('texgyreheroscn-regular-webfont.woff2') format('woff2'),
         url('texgyreheroscn-regular-webfont.woff') format('woff'),
         url('texgyreheroscn-regular-webfont.ttf') format('truetype'),
         url('texgyreheroscn-regular-webfont.svg#tex_gyre_heros_cnregular') format('svg');
    font-weight: normal;
    font-style: normal;

}





/* ============================= */
/* Variables globales            */
/* ============================= */
:root{
  --font-main: "tex_gyre_heros_cnregular";

  --color-text: #ffffff;
  --color-accent: #bb99bb;
  --color-overlay: rgba(0,0,0,0.7);
  --color-shadow: rgba(0,0,0,0.7);

  --sidebar-width: 220px;
  --sidebar-padding: 100px;
  --content-max-width: 700px;
  --spacing-section: 120px;

  --breakpoint-mobile: 768px;
}

/* ============================= */
/* Reset / base                  */
/* ============================= */
html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:var(--font-main);
  color:var(--color-text);
  background:transparent;
  overflow-y:auto;
}

/* Background */
.background{

  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  background: url("visuel_Web.jpg") no-repeat center center scroll;
  background-size: cover;
  z-index:-1;
  transform: translateZ(0);
}

/* Header */
header{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  z-index:1100;
  background-color:transparent;
}

/* Back arrow */
.back-arrow{
  font-size:2rem;
  color:var(--color-text);
  text-decoration:none;
  text-shadow:none;
  margin-right:10px;
  cursor:pointer;
  transition:transform .2s ease;
}


.back-arrow:hover{ transform:scale(1.15); }

@media screen and (min-width: 769px) {
  .back-arrow {
    display: none;
  }
}


/* Menu button (mobile) */
.menu-button{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:56px;
  height:56px;
  background:transparent;
  border:none;
  outline:none;
  z-index:1100;
  cursor:pointer;
}
.menu-button__line,
.menu-button::before,
.menu-button::after{
  content:"";
  width:28px;
  height:2px;
  background-color:var(--color-text);
  transition:transform .3s ease, opacity .3s ease;
  box-shadow:0 2px 5px var(--color-shadow);
}
.menu-button.is-opened .menu-button__line{ opacity:0; }
.menu-button.is-opened::before{ transform:translateY(8px) rotate(-135deg); }
.menu-button.is-opened::after{ transform:translateY(-8px) rotate(135deg); }

/* Menu overlay mobile */
.menu-overlay{
  position:fixed;
  inset:0;
  background:var(--color-overlay);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1000;
}
.menu-overlay.is-visible{ opacity:1; pointer-events:auto; }
.menu-overlay ul{ list-style:none; margin:0; padding:0; text-align:center; }
.menu-overlay li{ margin:1rem 0; }
.menu-overlay a{
  color:var(--color-text);
  text-decoration:none;
  font-size:2rem;
  font-family:var(--font-main);
}
.menu-overlay a:hover{ color:var(--color-accent); }

/* ============================= */
/* Layout & Sidebar (desktop)    */
/* ============================= */
.layout{ display:flex; }

/* Sidebar : cachée sur mobile */
.sidebar{
  display:none;  /* mobile */
  width:var(--sidebar-width);
  height:100vh;
  padding-top:var(--sidebar-padding);
  position:fixed;
  top:0;
  left:20px;
  z-index:1050;
 
  text-shadow:none;
}
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ margin:1rem 0; }
.sidebar a{
  color:var(--color-text);
  text-decoration:none;
  font-size:1.8rem;
  font-family:var(--font-main);
}
.sidebar a:hover{ color:var(--color-accent); }

/* Contenu central */
.content{
  display: flex;
  flex-direction: column;       /* empile le texte verticalement */
  justify-content: center;      /* centre verticalement */
  align-items: center;          /* centre horizontalement */
  min-height: 100vh;            /* prend toute la hauteur de l’écran */
  text-align: center;           /* centre le texte à l’intérieur */
  padding: 20px;                /* marge interne */
  transition:transform .6s ease, opacity .6s ease;
}

/* ============================= */
/* Artistes / page artiste       */
/* ============================= */
h2{
  font-size:3rem;
  font-weight:normal;
  margin:40px 0 20px;
  opacity:0;
  transform:scale(0);
}

.date{
  font-size:2rem;
  color: var(--color-text);
  text-align: left;
  max-width:500px;
  margin:0 auto;
}

.artist{
  font-size:2rem;
  cursor:pointer;
  color:var(--color-text);
  text-decoration:none;
  opacity:0;
  transform:scale(0);
  transition:transform .6s ease, opacity .6s ease;
  display:inline-block;
  width:100%;
  text-align:center;
  margin:10px 0;
}
.appear{ animation:appearZoom .6s forwards; }
.artist.zoom{ animation:zoomFade .6s forwards; z-index:5; position:relative; }
.zoom-out{ animation:zoomOut .6s forwards; }

#artist-content{
  padding:150px 10% 50px 10%;
  text-align:justify;
  color:var(--color-text);
  opacity:0;
  transform:scale(0);
  transition:transform .6s ease, opacity .6s ease;
  text-shadow:none;
}
#artist-content.zoom-in{ animation:zoomIn .6s forwards; }

.artists-fullwidth {
  opacity: 0;
  transform: scale(0.8);
  animation: zoomAppear 0.6s ease-out forwards;
}

img.artist-photo{
  width:100%;
  max-width:500px;
  margin-top:30px;
  margin-bottom:0px;
  border-radius:0;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
}

.artist-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-text);
  text-align: left;
  max-width:500px;
  margin:0 auto;
}

.artist-text{
  font-size:1.2rem;
  line-height:1.5;
  opacity:1;
  max-width:500px;
  margin:0 auto;
}

.artist-description{
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--color-text);
  text-align: left;
  max-width:500px;
  margin:0 auto;
}

.artist-link {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0rem;
  max-width: 500px;      /* Limite à 500px */
  margin: 0 auto;        /* Centre le bloc horizontalement */
}

.artist-link a {
  flex: 1 1 220px; /* largeur min de 200px, extensible */
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  padding: 0;
  border: none;
  transition: all 0.2s ease-in-out;
  text-align: left;
}

.artist-link a:hover {
  background-color: #f0f0f0;
  border-color: #999;
}



.infos{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  text-align:center;
}

/* Animations */
@keyframes appearZoom{ 0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1} }
@keyframes zoomFade{ 0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0} }
@keyframes zoomOut{ 0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0} }
@keyframes zoomIn{ 0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1} }
@keyframes zoomAppear { 0% {opacity: 0; transform: scale(0.8);}100%{opacity: 1;transform: scale(1);} }

.artist, h2, #artist-content{ will-change:transform, opacity; }

/* ============================= */
/* Responsive (desktop breakpoint)*/
/* ============================= */
@media (min-width: 769px) {
  .menu-button, .menu-overlay { display:none !important; }
  .sidebar { display:block !important; }
  .content{
    padding: var(--spacing-section) 5% 50px 5%;
    max-width: var(--content-max-width);
    margin:0 auto;
    padding-left: calc(var(--sidebar-width) - 70px); /* espace pour sidebar */
  }
}

/* Mobile tweaks */

@media (max-width: 768px) {

  .background {
    background: url("visuel_mobile.jpg") no-repeat center center scroll;
    background-size: cover;
  }

  h2{ font-size:1.6rem; text-shadow:none; }
  .artist{ font-size:1.5rem; }
  .content{ padding:120px 10% 50px 10%; }
  .artist-text{ font-size:1.3rem; }
  .infos{ flex-direction:column; justify-content:flex-start; padding-top:50px; min-height:auto; }
  .infos .artist-text p{ font-size:1.2rem; margin:15px 0; }
}