@font-face {
font-family: 'tangerineregular';
src: url('../../ui/font/tangerine_regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;

}

* {
margin:0;
box-sizing: border-box;

}

body {
width: 100vw;
height: 100%;
min-height: 100vh;
background: oklch(0.2264 0.0135 291.83);
color:oklch(0.9889 0.0053 17.25);
font-family: 'tangerineregular', sans-serif;
--color-link: rgb(97, 220, 163);
--clr: snow;
}
  .general {
    position: relative;
    overflow: hidden;
  }





  .diapo-cont {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: scroll;
    scroll-behavior: smooth;
  }

  .diapo {
    width: 100vw;
    height: 100vh;
    flex: 1 0 100%;
    display: flex;
    place-content:space-around;
    transform: translateX(0);
    overflow: hidden;
    place-items:center;
  }

  .diapo img {
object-fit: cover;
align-self: center;
border-radius: 2rem;
box-shadow: 2px 2px 8px #111010;
overflow: hidden;
  }
  .anim {
    transform : translateX(-100%);
    transition: all 1s cubic-bezier(.67,.07,.06,.98) ;
  }


  p {
  font-size: clamp(2rem, -3.2rem + 10.7vw, 3.5rem);
	text-align: justify;
	align-self: center;
	width: 55%;
	padding-inline: .45rem;
	hyphens: auto;
}

.titre {
  display: flex;
  flex-direction: column;
}

figcaption {
	position: relative;
	bottom: 22rem;
	text-align: center;
	background: #fffafaad;
	width: 100%;
	height: 5rem;
	color: #0a432e;
	font-size: 2rem;
	display: flex;
	place-content: center;
	place-items: center;
	font-weight: 700;
  width: 640px;
}


.fleche-diapo {
position: absolute;
display: flex;
top: 0;
bottom: 0;
margin: auto;
height: 4rem;
background-color: white;
border: none;
width: 2rem;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
z-index: 1;
}

.fleche-diapo:hover,
.fleche-diapo:focus {
opacity: 1;
}

#fleche-prec {
left: 0;
padding-left: 0.25rem;
border-radius: 0 2rem 2rem 0;
}

#fleche-suiv {
right: 0;
padding-left: 0.75rem;
border-radius: 2rem 0 0 2rem;
}
nav {
width:fit-content;
position: absolute;
bottom: .8em;
right: .8em;
padding: .5em .8em;
}

a.retour_accueil {
color: var(--color-link);
font-size: large;
}

a.retour_accueil:hover {
color:var(--clr)
}

@media only screen and (max-width:437px) and (orientation:portrait) {
.diapo {
  flex-direction: column;
  place-content: center;
  gap:1.55rem;
}

.diapo .titre img {
  width:383px;
  height: 383px;
}

.diapo .titre figcaption {
  bottom: 12rem;
}

  .diapo img {
    height: 468px;
    width: 263px;
  }
}
@media only screen and (max-height:437px) and (orientation:landscape) {
  .diapo {
    place-content: center;
    gap:1.55rem;
  }

  .diapo .titre img {
    width:343px;
    height: 343px;
  }

  .diapo .titre figcaption {
    bottom: 12rem;
    width: inherit;
  }


  .diapo img {
    height: 350px;
    width: 190px;
  }

}