/* === BODY === */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,500&display=swap');

body {
  background-color:black;
  color:#FFFFFF;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  scroll-behavior: smooth;
}

/* === PARAMÊTRES DE COULEUR === */

:root{
  --clair1-color:rgb(200, 199, 191);
  --clair2-color:rgb(150, 133, 121);
  --clair3-color:rgb(166, 156, 137);

  --dark1-color:rgb(37, 27, 20);
  --dark2-color:rgb(20, 17, 24);
  --dark3-color:rgb(81, 16, 16);
}

/* === VIDEOS ET GRANDS CONTENEURS === */

.adapt {
  width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

video {
  width: 900px;
  height: auto;
  display: block;
  object-fit: cover;
  margin: 0;
}

.video-wrapper {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.video-wrapper video {
    display: block;
    width: 900px;
    height: auto;
}

.btn-overlay {
    position: absolute;
    inset: 0;  /* occupe tout l’espace de la vidéo */
    cursor: pointer;
    background: transparent; /* ou rgba(0,0,0,0.1) pour déboguer */
    z-index: 2;
    pointer-events: auto;
}

.video-btn {
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
  display: block; 
  margin: 0;
  opacity: 1;
  visibility: visible;
}



/* === STYLES DE DIVS === */


.clair1, .clair3, .clair2, .dark3, .dark2, .dark1, #editodiv, #confinaugdiv, #confclotdiv {
  width: 900px;
  display: block;
  margin: 0;
}

#oursdiv{
  width: 900px;
   margin: 0;
  background-color:var(--dark2-color);
  color: var(--clair3-color);
  text-align: left;
  margin-bottom:4px;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.1;
}

#editodiv{
  background-color:var(--dark2-color);
  color: var(--clair3-color);
}

.clair1dark1{
  background-color:var(--clair1-color);
  color: var(--dark1-color);
   margin-bottom: 2px;
}

.clair2dark2{
  background-color:var(--clair2-color);
  color: var(--dark2-color);
  margin-bottom: 2px;
}

.clair3dark3{
  background-color:var(--clair3-color);
  color: var(--dark3-color);
   margin-bottom: 2px;
}

.dark1clair1{
  background-color:var(--dark1-color);
  color: var(--clair1-color);
   margin-bottom: 2px;
}

.dark2clair2{
  background-color:var(--dark2-color);
  color: var(--clair2-color);
   margin-bottom: 2px;
}

.dark3clair3{
  background-color:var(--dark3-color);
  color: var(--clair3-color);
   margin-bottom: 2px;
}

/* === STYLES DE TEXTE === */

p, .courant, .ourstxt, .titreconf, .nom, .fonction, .info, .heure, .ital, p.legend {
  text-align: left;
  margin: 0;
  padding: 0;
}

.courant {
  margin-right: 5em;
  margin-left: 5em;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.5;
}

p.legend{
  margin-left: 5em;
  font-size: 1.2em;
  font-weight: 600;
}

.ourstxt {
  margin-right: 5em;
  margin-left: 5em;
  font-size: 1em;
  font-weight: 200;
  line-height: 1;
}

.heure{
  font-size: 1.3em;
  font-weight: 900;
  line-height: 1.1;
}

.titreconf{
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.1;
  font-style: italic;
}

.nom{
  font-size: 1.1em;
  line-height: 1.1;
  font-weight: 600;
}

.ital{
  font-style: italic;
}

.fonction{
  line-height: 1.1;
  font-size: 1em;
  font-weight: 500;
}

.date{
  text-align: center;
  font-size: 1em;
  font-weight: 600;
}

.info{
  font-size: 1em;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid ;
  padding-bottom: 2px;
  transition: 0.2s ease;
}

/* === BOUTONS === */

button {
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* === inutiles === */
/*
img {
  border:0;
  pointer-events: none;
}
*/