/* media querie for different devices : https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */

@font-face {
  font-family: "Prenom";
  src: url("/fonts/mathias/neothic.woff2") format("woff2"),
       url("/fonts/mathias/neothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Nom";
  src: url("/fonts/mathias/exmouth.woff2") format("woff2"),
       url("/fonts/mathias/exmouth.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Hepta Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#prenom {
  font-family: "Prenom", serif;
  font-size: clamp(1.2rem, 20vh, 8vw);
  /* font-size: 900%; */
}

#nom {
  font-family: "Nom", cursive;
  font-size: clamp(1.2rem, 40vh, 16vw);
  /* font-size: 1800%; */
}

#fightclub-bg {
  height: 100vh;
  background-image: url("/images/mathias/cover.jpeg");
  background-size: cover;
  background-position: center;
  object-fit: cover;
  color:darkred;
  overflow: hidden;
}

#collapsibleNavbar a {
  color:#d7d4d8;
}

#collapsibleNavbar a:hover {
  color:#4e0505;
}

nav {
  /* color:darkred; */
  background-color:#0e1628;
}

#synopsis {
  font-size: 2em;
  font-weight: 400;
}

#contact {
  font-size: 150%;
  font-weight: 400;
}

.bleu-nuit {
  background-color:rgb(14, 22, 40);
  color:lightgray;
}

#contact a {
  color:lightgray;
  transition: color 1s;
}

#contact a:hover {
  color:gold;
}

#contact i{
  font-size: 200%;
  font-weight: 400;
}

.ratio-9x16 {
  aspect-ratio: 9 / 16;
  width: 100%;
}

.poste-gauche {
  text-align: left;
  text-transform: uppercase;
  font-size: 2rem;
  color:#4E0505;
}

.poste-droite {
  text-align: right;
  text-transform: uppercase;
  font-size: 2rem;
  color:#4E0505;
}

.lieu {
  font-size: 1.75rem;
  color:#4E0505;
}

.date {
  text-transform: uppercase;
  font-size: 1.75rem;
  color:#4E0505;
}

.gris {
  background-color:lightgrey;
  font-size: 1.5rem;
}

address a {
  font-size: 300%;
}

.img-wrapper {
  max-width: 500px;
  height: 100%;       /* hauteur cible */
  overflow: hidden;
}

.img-cropped {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* met à l’échelle + rogne si nécessaire */
  object-position: center;
}

.yt-wrapper {
    height: 100vh;
    height: 100dvh;

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

    overflow: hidden;
}

.yt-wrapper iframe {
    display: block;
    width: min(100%, calc(100dvh * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
}

.carte-lien {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.carte {
  position: relative;
  width: 100%;
  margin: 0;
}

.carte-image {
  display: block;
  width: 100%;
  height: auto;
}

.carte-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  text-align: center;
  color: white;
  /* background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); */
  box-sizing: border-box;
  font-family: "Coiny", system-ui;
}