@font-face {
  font-family: Isobare-Regular;
  src: url(ruisseau2/typo/Isobare-Regular.otf);
}

 @font-face {
    font-family: 'Paragonitalic-Regular';
    src: url('ruisseau2/typo/Paragonitalic-Regular/Paragonitalic-Regular.woff2'); 
    font-style: italic;
}

@font-face {
  font-family: InstrumentSerif-Italic;
  src: url(ruisseau2/typo/InstrumentSerif-Italic.woff2);
}

@keyframes autoScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(500%);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

body {
  font-family: Isobare-Regular;
  color: rgb(255, 255, 255);
  text-align: left;
  width: 100%;
}

#film{
  grid-column: 2;
  grid-row: 1
  height:auto;
  width: 1000px;
  padding-left:15em;
}

#film1{
padding:1em;
background-color: #000000; 
}

p {
  font-family: "Paragonitalic-Regular";
  font-style: italic;
  font-size: 1em;
  background-color: rgb(237, 135, 255,0.7);
  color: black;
  line-height: 1.4;
  padding: 1em;
    hyphens: auto;
}

p:hover {
  font-family: "Paragonitalic-Regular";
  font-size: 1em;
  transition: all 0.5s ease-in-out;
  line-height: 1.4;
  padding: 1em;
    hyphens: auto;
}

.trad {
  display: flex;
  position: relative;
  top: 1em;
  right: 1em;
  color: rgb(255, 0, 0);
  z-index: 9999999;
  margin-bottom: 2em;

}

li {
  display: flex;
  flex-direction: row;
  gap: 1em;
  color: black;
  font-size: 1.125em;
}

.height{
 font-weight: 800;
}

#déranger {
  display: flex;
  padding-left: 65vw;
  font-family: "Isobare-Regular";
}

#déranger:hover {
  color: red;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
  color: rgba(0, 0, 0);
  text-shadow: 0 0 5px  rgb(237, 135, 255);
  position: sticky;
  animation: blink 2s;
  margin: 0.2em;
  text-decoration-style: wavy;
}

h2 {
  font-family: Isobare-Regular;
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 0.2em;
  color: rgba(0, 0, 0);
  text-shadow: 0 0 5px  rgb(237, 135, 255);
  text-wrap: wrap;
  position: relative;
}

h3 {
  font-family: "InstrumentSerif-Italic";
  font-size: 1.8rem;
  color: rgba(0, 0, 0);
  text-shadow: 0 0 5px  rgb(237, 135, 255);
  text-align: center;
  margin: 0;
}

.h21 {
  margin-top: 1em;
}

#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -99999999;
  border: initial;
}

video {
  box-shadow: 0px 0px 10px rgb(237, 135, 255);
  display: flex;
  width: 100%;
}

img {
  box-shadow: 0px 0px 10px rgb(237, 135, 255);
  background-color: bisque;
  max-width: 100%;

  display: flex;
  /* justify-self: stretch;*/
}

.baudreix {
  max-width: 38vw;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  text-wrap: wrap;
  grid-column:3;
  grid-row: 1;
}

#baudreix1 {
  /*h2*/
  text-align: center;
}

#photobaudreix {
  display: flex;
  width: 600px;
  height: 200px;
  overflow: hidden;
  overflow: hidden;
  overflow-x: scroll;
}

section {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  padding: 1rem;
  grid-template-rows: 20vh,repeat(5, 1fr);  
}

.line3-1 {
  grid-column: 1/2;
  /* Commence à la colonne 3 */
  /* Commence à la ligne 1 */
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#dessin1 {
  margin-top: 1em;
}

.peinture_robe{
  grid-row: 1;
  grid-column: 4;
}

.peinture1 {
  display: flex;
  flex-direction: column;
  column-gap: 1em;
  width: 20vw;
  height: auto;
}

#information1{
  display: flex;
  flex-direction: column;
  width: 15vw;
  height: auto;

}

.fsize {
  margin-top: 1em;
  display: flex;
}

.citation {
  display: flex;
  width: 90vw;
  flex-direction: column;
  align-items: center;
}

#Citation1 {
  padding-top: 0.5em;
}

.line1-5 {
  grid-column-start: 1;
  /* Commence à la colonne 1 */
  grid-row-start: 3;
  height: auto;
  display: flex;
  align-items: center;
}

.biarritz {
  display: flex;
  align-items: center;
  grid-column: 1;
  grid-row: 3;
  flex-direction: column;
}

.biarritz_2 {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  width: 600px;
  height: 60vh;
  overflow: hidden;
  overflow: hidden;
  overflow-x: scroll;
  margin-left: 15em;
  flex-direction: column;
  align-items: center;
}

.biarritz_photo {
  width: 40vw;
  height: 800px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  overflow-y: hidden;
  overflow-y: scroll;
}

.portraitdauteur {
  grid-column: 1;
  /* Commence à la colonne 1 */
  grid-row: 1;
  flex-direction: column;
  align-items: center;
  margin-left: 4em;
  display: flex;
}

#portrait {
  width: 400px;
  height: auto;
}

#fleche1 {
  top: 295px;
  right: -240px;
  position: absolute;
  font-family: Isobare-Regular;
  font-size: 3em;
}

.fleche {
  z-index: 7;
  position: absolute;
  animation: blink 1s infinite alternate;
  color: black;
  text-shadow: 0 0 5px  rgb(237, 135, 255);
  background-color: transparent;
  font-size: 3em;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

#nomarge {
  margin: 1em;
  max-width: 42vw;
  flex-direction: column;
  text-wrap: stable;
}

.lac_baudreix {
  display: flex;
  grid-column: 2;
  /* Commence à la colonne 1 */
  grid-row: 1;
  flex-direction: column;
  margin-top: 5em;
}

.line2-1 {
  grid-column: 2;
  /* Commence à la colonne 1 */
  /* Commence à la ligne 1 */
  grid-row-end: 2;
}

.line2-2 {
  grid-column-start: 2;
  /* Commence à la colonne 1 */
  grid-row-start: 2;
  /* Commence à la ligne 1 */
  position: absolute;
  width: 600px;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  overflow-x: scroll;
  animation: autoScroll 20s linear infinite;
  margin-top: 10em;
  z-index: -1;
}

.line2-3 {
  grid-column: 2;
  /* Commence à la colonne 1 */
  grid-row: 2;
  /* Commence à la ligne 1 */
  display: flex;
  max-width: 40vw;
  height: auto;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.1vh;
}

.descr_benou {
  max-width: 20vw;
}

#benou{
  text-wrap: balance;
    display: flex;
  flex-direction: column;
}

.line3-2 {
  /*peinture brisant et beateucx*/
  grid-column: 2/3;
  grid-row: 3/4;
  display: flex;
  flex-direction: row;
  max-width: 40vw;
  height: auto;
  margin: 0;
  gap: 1em;
}

.video_trajet1 {
  grid-column: 5;
  grid-row: 1;
  margin-top: 10em;
  width: 600px;
  height: auto;
}

.peinture2 {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 3;
  align-items: center;
}

#peinture2 {
  max-width: 40vw;
  height: auto;
  margin: 0;
}

#information2{
  display: flex;
  flex-direction: column;
  width: 9vw;
  height: auto;
  margin: 0;
}

.line3-3 {
  grid-column-start: 2;
  /* Commence à la colonne 1 */
  grid-row-start: 4;
  display: flex;
  max-width: 20vw;
}

.trajet {
  grid-column: 3;
  /* Commence à la colonne 1 */
  grid-row-start: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#trajet {
  display: flex;
  width: 600px;
  height: 200px;
  overflow: hidden;
  overflow: hidden;
  overflow-x: scroll;
}

.line3-4 {
  grid-column: 1/2;
}

#lac-arret {
  display: flex;
  width: 600px;
  height: 200px;
  overflow: hidden;
  overflow-x: scroll;
  grid-column-start: 6;
  grid-row: 10;
}

.armelle{
  margin-top: 24em;
  margin-left: 15em;
  grid-column:3;
  grid-row: 1;
    display: flex;
  width: 40vw;
  height: 40vh;

}

@media (max-width: 750px) {
  /* Réinitialisation des marges/paddings pour le responsive */
  body {
    margin: 0;
    padding: 0;
  }

  h1{
      font-size: 2.5rem;
  }

  li{
    gap: 0;
  }

  .trad{
    flex-direction: row;
    margin-top: 2em;
    margin-left: -0.8em;
  }
  
  ul{
    margin: 0;
  }

  #déranger {
  padding-left: 2em;

  }

  #no_scroll{
    overflow-x: unset; 
  }

  .baudreix{
    max-width: unset;
    text-wrap: unset;
    line-height: 1.125rem;
  }

  #photobaudreix{
    flex-direction: row;
    padding-right:10em;

  }

  .lac_baudreix{
    margin-top: unset;
  }


  #trajet{
    width: 320px;
  }

  /* Application de flex-direction: column sur plusieurs éléments */
  img{
    margin-right: 0.2em;
    margin:0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    height: auto;

  }


  /* Flexbox pour les paragraphes et autres textes */
  p{
    margin: 1em !important;
    padding: 1em !important;
    font-size: inherit !important;
    flex-direction: column;
    display: flex;

  }

  li{
    flex-direction: row;
  }

  .descr_benou{
    max-width: none;
  }

  #information1{
    width: unset;
  }

    #information2{
    width: unset;
  }

  /* Ajustement du vidéo en arrière-plan */
  #background-video {
    width: 700%;
    height: auto;
  }

  /* Rendre le bouton "déranger" plus flexible */


  /* Section avec une grille en colonne */
  section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.1rem;
  }

.line2-2{
  animation: none;
  z-index: unset;
display: fl;
position: relative;
  margin-top: unset;
}

.video_trajet1{
  margin-top: unset;
}

.line2-3{
    display: flex;
    flex-direction: column;
  }

  /* Adaptation des éléments dans la ligne 3-1 */
  .line3-1 {
    grid-column: 1 / -1;
    align-items: center;
    margin: 1em 0;
  }

  /* Flexbox pour les éléments de la peinture */
  .peinture1, .peinture_robe {
    height: auto;
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: unset;
  }

  #lac-arret{
    margin-bottom: 1em;
  }

  /* Adapter les sections de texte */
  .citation {
    flex-direction: column;
    align-items: center;
  }

  .line2-3{
    max-width: none;
  }

  .biarritz_2 {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-left: unset;
    align-items: center;
    height: 250px;
    width: 100%;
  }

  .biarritz_photo{
    width: unset;
  }

  .armelle {
    margin-top: 1em;
    margin-left: 0;
    width:100%;
    height: auto;
  }

  /* Réorganiser les autres éléments pour s'assurer qu'ils se disposent en colonne sur petits écrans */
  .line2-2, .line2-3, .line3-2, .video_trajet1, .trajet, .lac-arret {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

    .line3-2{
      max-width: unset;
    }

    #peinture2{
      max-width: unset;
      width: 100%;
    }

  /* Ajustement des éléments de la ligne 3-3 */
  .line3-3 {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #player-2{
    margin-top: 0vh !important;
  }

  /* Améliorer la visibilité des seek-bars */
  #seek-bar {
    width: 100%;
    margin: 1em 0;
  }

  /* Changer la position du footer */
  footer {
    margin-top: 2em;
    text-align: center;
    min-height: auto;
    width: 330px;
    font-size: 1.125rem;
  }

  .bouton-rond {
    left: 10px;
    right: unset;
  }
  }











#player-1 {
  grid-column: 2;
  /* Commence à la colonne 1 */
  grid-row: 1/2;
  z-index: 567;
}

#player-2 {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  margin-left: 15vw;
  margin-top: 30vh;

}

.custom-player {
  color: aliceblue;
  margin: 0;
  align-items: center;
  border-radius: 16px;
  padding: 1em 2em;
  align-items: center;
}

button {
  align-items: center;
    font-family: "Isobare-Regular";
  color: #000000;
  box-shadow: 0 2px 4px rgb(237, 135, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s;
  text-shadow: 0 0 5px rgb(237, 135, 255, 0.7);
  font-family: osa;
}

button:focus {
    font-family: "Isobare-Regular";
  color: black;
}

#seek-bar {
  width: 120px;
  accent-color: rgb(237, 135, 255, 0.7);
  background: transparent;
  margin: 0 1em;
}

.fleche {
  z-index: 7;
  position: absolute;
  right: -2.5em;
  top: 50%;
  transform: translateY(-50%);
  animation: blink 1s infinite alternate;
  color: rgb(0, 0, 0);
  text-shadow: 0 0 5px rgb(237, 135, 255, 0.7);
  background-color: transparent;
  font-size: 3em;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

#seek-bar {
  width: 140px;
  height: 8px;
  background: transparent;
  margin: 0 1em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 8px;
  box-shadow: 0 0 8px 2px rgb(237, 135, 255, 0.5);
  outline: none;
}

/* Barre de progression */

#seek-bar::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, aliceblue 0%,rgb(237, 135, 255) 100%);
  border-radius: 8px;
  box-shadow: 0 0 6px #ed87ff66;
}

/* Curseur */

#seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: aliceblue;
  border: 3px solid rgb(237, 135, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
  margin-top: -7px;
  /* Pour centrer le thumb */
}

#seek-bar:focus::-webkit-slider-thumb {
  background: aliceblue;
  border-color: rgb(237, 135, 255);
}

/* Firefox */

#seek-bar::-moz-range-track {
  height: 8px;
  background: rgb(237, 135, 255, 0.7);
  border-radius: 8px;
}

#seek-bar::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: aliceblue;
  border: 3px solid rgb(237, 135, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(237, 135, 255, 0.7), 0 2px 4px rgb(237, 135, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s;
}

#seek-bar:focus::-moz-range-thumb {
  background: rgb(237, 135, 255);
  border-color: rgb(237, 135, 255, 0.7);
}

/* Edge/IE */

#seek-bar::-ms-fill-lower {
  background: #ed87ff;
  border-radius: 8px;
}

#seek-bar::-ms-fill-upper {
  background: rgb(237, 135, 255);
  border-radius: 8px;
}

#seek-bar::-ms-thumb {
  width: 22px;
  height: 22px;
  background: aliceblue;
  border: 3px solid #ed87ff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ed87ff, 0 2px 4px;
  cursor: pointer;
  transition: background 0.2s;
}

/* Suppression du fond par défaut sur IE */

#seek-bar {
  background: transparent;
}

/* Accessibilité focus */

#seek-bar:focus {
  outline: 2px solid #ed87ff;
  outline-offset: 2px;
}

footer {
  min-height: 3rem!important;
  background-color: red;


}

.no-effect{
  font-size: inherit!important;
}