/* Reset général */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: 'Helvetica LT Pro', Helvetica, Arial, sans-serif;
  background: black;
  color: white;
}

/* Layout principal */
.layout {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  overflow: auto; /* scroll automatique si nécessaire */
}

/* Left section */
.left {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; /* empile les éléments verticalement */
  align-items: flex-start; /* aligne à gauche */
}

/* Textes de gauche */
.left p {
  font-size: 90px;
  font-weight: 700;
  line-height: 1.3;
}

/* Right section */
.right {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Textes de droite */
.right p {
  font-size: 70px;
  font-weight: 700;
  line-height: 1.1;
}

.left label,
.left p,
.left .definition {
  width: 100%;      /* occupe toute la largeur du parent */
  min-width: 0;     /* permet à flex de réduire si nécessaire */
}


/* Soulignement des liens */
.underline {
  display: inline-block;
  position: relative;
  /* padding-bottom: -2px; supprimé, remplacé par text-decoration */
}

.underline a {
  display: inline;
  word-break: break-word;
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-thickness: 0.05em;  /* s'adapte à la taille du texte */
  text-underline-offset: 0.10em;      /* s'adapte à la taille du texte */
}

/* Definition toggle */
.definition {
  position: absolute;
  top: 95px; 
  left: 0;
  width: 100%;

  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;

  color: red;
  opacity: 0.7;

  display: none;
  z-index: 10;
}

/* Checkbox toggle */
#toggle-definition {
  display: none;
}

#toggle-definition:checked ~ .definition {
  display: block;
}

/* Label “o/o” */
.oo {
  font-size: 90px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}

/* === Media queries pour responsivité === */
@media (max-width: 1200px) {
  .oo {
    font-size: 90px;
  }
    .left p {
    font-size: 90px;
  }
  .right p {
    font-size: 70px;
  }
  .definition {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .oo {
    font-size: 65px;
  }
  .left p {
    font-size: 65px;
  }
  .right p {
    font-size: 55px;
  }
  .definition {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .oo {
    font-size: 60px;
  }
    .left p {
    font-size: 60px;
  }
  .right p {
    font-size: 30px;
  }
  .definition {
    font-size: 20px;
  }
}

/* Conteneur vidéo */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1; /* derrière tout le contenu */
}

/* Vidéo elle-même */
.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* couvre tout l’écran sans déformation */
}