/* Reset
-------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display:block}
*, *:before, *:after{margin:0;padding:0;border:0;-webkit-box-sizing:border-box;box-sizing:border-box}
*{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-font-feature-settings: "ss01";
   -webkit-font-feature-settings: "ss01";
   font-feature-settings: "ss01";}

/* Typeface
-------------------------------------------------- */
@font-face{font-family: 'SansThin';src:url(../fonts/SANS-Code-Thin.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'SansMedium';src:url(../fonts/SANS-Text-Medium.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'SansLight';src:url(../fonts/SANS-Title-Light.woff2) format("woff2");font-style:normal;font-display:swap}

/* Réglages
-------------------------------------------------- */
a{color:black;text-decoration:none;outline:0;}
a:hover{color:black;text-decoration:underline;outline:0;}
p:last-child{margin-bottom:0}
/* Hide scrollbar for Chrome, Safari and Opera */
.about::-webkit-scrollbar {display: none;}
.about {-ms-overflow-style: none;scrollbar-width: none;}
.intro::-webkit-scrollbar {display: none;}
.intro {-ms-overflow-style: none;scrollbar-width: none;}

/* Site
-------------------------------------------------- */
html{width:100%;height:100%}
body{width:100%;height: 100vh;overflow: hidden;background:#fff;color:#000}
body, h1, h2, h3, h4{font-weight:normal;line-height:16px;font-size:12px;font-family:'SansMedium', Helvetica Neue, "Lucida Grande", sans-serif; }
body{display: -webkit-flex;display: flex;-webkit-flex-flow: column nowrap;flex-flow: column nowrap;}


main{width:100%;position:relative;display: flex;
   flex-direction: column;
   height: 100vh;}
main .explore{width:100%;position:relative;display: flex;
   flex: 1;
   overflow: hidden;}

/* Header
-------------------------------------------------- */
header{width:100%;z-index:999;background:white;display: flex;flex-flow: row wrap}
header article{width:33.333%;font-size:32px;line-height: 38px;padding: 15px 35px}
header article:nth-child(2){text-align: center}
header article:nth-child(3){text-align: right}
header article span{padding:0 15px;border:1px solid transparent;border-radius:1em;display:inline-block;}
header article span:hover{background:black;color:white;cursor:pointer}
header article span.active{border:1px solid black;cursor:pointer}

/* Intro vidéo
-------------------------------------------------- */
.hambacher-forest{box-shadow: 0 0 40px 10px rgba(0,0,0,0.25);position:fixed;background:white;z-index:99999;width:100%;height:100vh;top:0;left:0;transition:top 1s cubic-bezier(0.65, 0, 0.35, 1);;overflow:hidden;display:flex;flex-flow:row wrap;justify-content:center;align-content:center}
.hambacher-forest h1{position:relative;z-index:999;color:#fff;font-size:100px}
.hambacher-forest.animate-out{top:calc(-100vh - 50px)}
.video-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.video-background video{width:100%;height:100%;object-fit:cover}

/* Intro Texte
-------------------------------------------------- */
.about{box-shadow: 0 0 40px 10px rgba(0,0,0,0.25);position:fixed;padding:30px 170px;background:white;z-index:999;width:100%;height:calc(100vh - 70px);top:-100vh;left:0;transition:top 1s cubic-bezier(0.65, 0, 0.35, 1);overflow:auto;display:flex;flex-flow:row wrap;}
.about div{position:relative;z-index:999;font-size:32px;line-height: 38px;}
.about div article{width:50%;float:left;font-size:12px;line-height: 16px;}
.about div article:nth-child(1){padding-right:10px;}
.about div article:nth-child(2){padding-left:10px;}
.about div article hr{width:100%;height:1px;background:black;margin: 1em 0;}

.about.animate-out{top:70px}
.about div p:not(:last-child){margin-bottom:1em}

.intro{box-shadow: 0 0 40px 10px rgba(0,0,0,0.25);position:fixed;padding:30px 170px;background:white;z-index:999;width:100%;height:calc(100vh - 70px);top:70px;left:0;transition:top 1s cubic-bezier(0.65, 0, 0.35, 1);overflow:auto;display:flex;flex-flow:row wrap;}
.intro div{position:relative;z-index:999;font-size:32px;line-height: 38px;}
.intro.animate-out{top:-100vh}
.intro div strong{font-variant-position: super; -moz-font-feature-settings: "sups"; -webkit-font-feature-settings: "sups"; font-feature-settings: "sups";font-weight:normal}
.intro div p:first-child{margin-bottom:1em}


.about div article ul {
    display: table;
}

.about div article ul > li {
    display: table-row;
}

.about div article ul > li::before {
    content: "·";
    display: table-cell;width:1em;
}



/* Liste
-------------------------------------------------- */
.liste{position:relative;background:white;z-index:998;width:50%;top:0;left:-50%;overflow: auto;transition:left 1s ease-in-out;isolation: isolate;}
.liste.show {left:0;}
.liste{-ms-overflow-style: none; scrollbar-width: none;}
.liste::-webkit-scrollbar {display: none;  /* Safari and Chrome */}


.liste ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.liste-item {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 3fr;
   gap: 0;
   padding: 5px 15px 5px 45px;
   border-bottom: 1px solid #000;
   cursor: pointer;
}
.liste-item:last-child{border:0}
/* État hover - MÊME STYLE pour :hover et .hover */
.liste-item:hover,
.liste-item.hover {
   background-color: #f5f5f5;
}

/* État actif (cliqué) */
.liste-item.active {
   

}

.col-titre,
.col-artiste,
.col-map,
.col-texte {
   padding: 5px;
}

/* Styles pour les marqueurs */
.custom-marker {
   transition: all 0.3s ease;
   cursor: pointer;
}

.marker-svg {
   transition: none;
}

/* Effet hover sur les marqueurs - augmentation de taille */
.marker-svg.hover .marker-circle,
.custom-marker:hover .marker-circle {
  
}

/* Effet actif sur les marqueurs - fond noir */
.marker-svg.active .marker-circle {
  
}


.marker-svg.active {

}

/* Responsive */
@media (max-width: 768px) {
   .liste-item {
      grid-template-columns: 1fr;
      gap: 10px;
   }
}



.name-display {
   position: absolute;
   top: 0;
   left: 50%;

   padding:0 20px;
   z-index: 998;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;

}

.name-display.visible {
   opacity: 1;
   pointer-events: auto;
}

.name-content {font-family: 'SansThin';
   font-size: 175px;
   line-height: 1;
}







/* PLAYER
-------------------------------------------------- */
.media-player {
   width: 100%;
   height: 0;
   overflow: hidden;
   background: white;
   transition: height 0.5s ease, opacity 0.5s ease;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 0;
   isolation: isolate;
   position: relative;
}

.media-player.visible {
   height: calc(50vh - 70px);padding-left: 30px;
  

}


.audio-player,
.video-player,
.image-player {
  opacity: 0;
  transition: opacity 0.3s ease;
   
}

.audio-player.visible,
.video-player.visible,
.image-player.visible {
  opacity: 1;
}


/* Audio Player */
.audio-player { padding: 20px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;
  
   
}



.play-pause-btn {
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: transparent;
   border: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.3s ease;
}



/* Video Player */
.video-player { padding: 20px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
   
  
   
   align-items: flex-start; /* Aligne à gauche */
}



.video-player video {
   width: auto; /* Largeur automatique pour respecter le ratio */
   max-width: 100%; /* Ne dépasse pas le conteneur */
   height: calc(100% - 47px);
   object-fit: contain;
   align-self: flex-start;
  
 
}

.video-controls {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   flex-flow: column;
   width: 100%;
}

.video-controls .play-pause-btn {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
}

/* Timeline */
.timeline {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;width: 100%;
}

.progress-bar {
   width: 100%;
   height: 2px;
   background: black;
   cursor: pointer;
   position: relative;
}

.progress {
   height: 4px;
   background: black;
   width: 0%;
   transition: width 0.1s linear;
   position: relative;
   top: -1px;
}

.time-display {
   display: none;
   justify-content: space-between;
   font-size: 0.875rem;
   color: black;
}

/* Image Player */
.image-player { padding: 20px;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   opacity: 0;
   transition: opacity 0.3s ease;padding-top:10px;
  
}



.image-player img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}
.media-player{isolation: isolate;}
.image-player {
   mix-blend-mode: multiply;
   -webkit-mix-blend-mode: multiply;
   position: relative;
   background: white;
   will-change: opacity;
}
.video-player {
   mix-blend-mode: multiply;
   -webkit-mix-blend-mode: multiply;
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   position: relative;
   background: white;
   will-change: opacity;
}
/* OPENSTREET MAP
-------------------------------------------------- */
#map_canvas{position:absolute;top: 0;left:0;background:white;z-index:997;width:100%;height: 100%;transition:left 1s ease-in-out, width 1s ease-in-out;}
#map_canvas.show{width:50%;left:50%;}

.map_legende{width:calc(66.666% - .5em);margin:1em auto 5em auto;}
.pagecontainer .texte .map_legende > p{font-size:1em;line-height:1.25em}

.leaflet-popup-content-wrapper,.leaflet-popup-tip{color:#000!important;font-family:'Raisonne';box-shadow:none!important;font-weight:400;font-size:1em;line-height:1.25em}
.leaflet-popup-content{margin:1.25em!important;text-align:center;font-weight:400;font-size:1.25em!important;line-height:1.25em!important}
.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:0!important;border:1px solid #000;background:#000!important;color:#fff!important}
.leaflet-teaser a.leaflet-popup-close-button:hover,.leaflet-teaser a.leaflet-popup-close-button{display:none!important}
.leaflet-popup-tip{background:#000!important}
.leaflet-teaser a{color:#fff!important;border:0}
main.institution article div.leaflet-popup-tip-teaser{padding:0}
.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:0!important;border-top-right-radius:0!important}
.leaflet-bar{border-radius:0!important}
.leaflet-top.leaflet-left a{font-family: 'raisonne';color:#000!important}
.leaflet-touch .leaflet-bar{border:1px solid #000!important}
.leaflet-left .leaflet-control {margin-left: 1em;}
.leaflet-top .leaflet-control {margin-top: 1em;}
.leaflet-control-attribution.leaflet-control{display:none!important}
.leaflet-touch .leaflet-bar a {
   font-weight: normal!important;
   font-family: "credac", arial;
}


.custom-marker {
   background: none !important;
   border: none !important;
}


.custom-marker {
   background: none !important;
   border: none !important;
}
/* Style personnalisé pour l'échelle */
.leaflet-control-scale {
   font-family: Arial, sans-serif;
   font-size: 11px;
   margin-bottom: 10px;
}
.leaflet-control-zoom{display:none!important}
.leaflet-bottom .leaflet-control-scale{margin:10px!important}
.leaflet-control-scale-line {
   border: 1px solid #000!important;
   border-top: none!important;
   background: rgba(255, 255, 255, 0)!important;
   padding: 5px 10px!important;
   color: #000!important;
}
.marker-label {
   background:transparent!important;
   color: black;
   border: none;border:0!important;
   font-size: 12px;
   padding: 10px;box-shadow:none!important
}

.marker-label::before {
   display: none;
}

.leaflet-left {
   right: 0;left:auto!important
}
.leaflet-tile-pane {filter: grayscale(100%)}
.leaflet-tile:after {position:absolute;top:0;left:0;width:100%;height:100%;background:red;}

/* Masquer les contrôles natifs sur iOS */
.video-player video::-webkit-media-controls {
   display: none !important;
}

.video-player video::-webkit-media-controls-enclosure {
   display: none !important;
}

.video-player video::-webkit-media-controls-panel {
   display: none !important;
}

.video-player video::-webkit-media-controls-play-button {
   display: none !important;
}

.video-player video::-webkit-media-controls-start-playback-button {
   display: none !important;
}

@media screen and (max-width: 680px) {
   #map_canvas {
      height: 60vw;
      width: 100%;
      margin: 0;

   }

   .map_legende {
      width: 100%;
      margin: 1em auto 2.5em auto;
   }
}



footer{display:none}


/* MEDIA QUERIES
-------------------------------------------------- */
@media only screen and (max-width:640px){


   .hambacher-forest h1 {
      font-size: 35px;
line-height: 1;
text-align: center;
   }
   .intro div {
      font-size: 20px;
      line-height: 28px;
      padding: 15px ;
   }
   header{padding: 0 5px}
   header article:nth-child(1){flex:1}
   header article span {
      padding: 0 5px;}
   header article {
       font-size: 20px;
      line-height: 28px;
      width: auto;
      padding: 10px 0px;
   }
   header article:nth-child(3) {
      display: none
   }
   #map_canvas {height: 100%;width: 100%;margin: 0;transition:none; transition: height 1s ease-in-out, top 1s ease-in-out}
   #map_canvas.show{width:100%;left:0;height:50%;top:50%}

   .liste{position:relative;background:white;z-index:998;width:100%;height:50%;top:-50%;left:0;overflow: auto;transition:none;transition:top 1s ease-in-out;}
   .liste.show {top:0;}
   
   .name-display {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
   .name-content {
  font-family: 'SansThin';
  font-size: 22vw;
  line-height: 1;
}
   .col-artiste, .col-map{display: none}
   .liste-item {
  display: flex;flex-flow: row;
      padding: 5px}
   .col-titre{width:33.333%}
  .col-texte{width:66.666%}
   .image-player, .media-player {
      padding: 10px;padding-top:0;}
   .media-player.visible {
  height: calc(50vh - 70px);
  padding: 0;
  opacity: 1;
}
   .video-player {
      padding: 10px;}
   .intro {
  position: fixed;
      padding: 0px;height: calc(100vh - 100px);
top: 50px;}
   .intro div {
  padding: 10px;
}
   .about {overflow: auto;
  position: absolute;top:calc(-100% - 50px);bottom:60px;
  z-index: 999;
  font-size: 20px;height: calc(100% - 100px);
      line-height: 28px;
  padding: 0;
}
    .about div{position:absolute;
  font-size: 20px;
      line-height: 28px;
  padding: 10px;;
}
   .about.animate-out{top:50px}
   
footer{width:100%;z-index:999;background:white;display: flex;flex-flow: row wrap}
footer article{width:100%;font-size: 20px;line-height: 28px;padding: 10px 35px;text-align: center}
footer article span{padding: 0 5px;border:1px solid transparent;border-radius:1em;display:inline-block;}
footer article span:hover{background:black;color:white;}
footer article span.active{border:1px solid black}
   
   .about div article{width:100%;float:left;font-size:12px;line-height: 16px;}
.about div article:nth-child(1){padding-right:0;}
.about div article:nth-child(2){padding-left:0;}
body, html {
  max-height: 100svh;
}
   .liste {
      height: calc(50svh-25px);top: -calc(50svh-25px);}
   #map_canvas.show {
 
  height: 50svh;
 top: calc(50svh+25px);
}
   .name-display {
  position: absolute;
      top: calc(50svh-25px);}
   main {
  
  height: 100svh;
}
   .intro {
  height: calc(100svh - 100px);
  
}
   .intro.animate-out {
  top: -100svh;
}
   .hambacher-forest {
      height: 100svh;}
   .hambacher-forest.animate-out {
  top: calc(-100svh - 50px);
}
   .video-background {
      height: 100svh;}
}