/* Styles globaux */
body {
  font-family: 'ABC Favorit', sans-serif;
  line-height: 1.6;
  background: white;
  color: black;
  margin: 0;
  overflow-x: hidden; /* Ajouter cette ligne */
}

*, *::before, *::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'ABC Favorit';
  src: url('fonts/ABCfavoritfullweb/ABCFavorit-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ABC Favorit Light';
  src: url('fonts/ABCfavoritfullweb/ABCFavorit-Light.woff2') format('woff2');
  font-weight: lighter;
}

@font-face {
  font-family: 'Akzidenz Grotesk';
  src: url('fonts/AkzidenzGrotesk/AkzidenzGroteskPro-Regular.woff') format('woff');
}

/* En-tête */
.header {
  background: #009900;
  color: white;
  text-align: center;
  padding: 1rem 0;
}

.header-green {
  display: flex;
  border-top: black 1px solid;
  position: relative;
}

.entete-tut, .header-green p {
  width: 50%;
}

.entete-tut {
  text-transform: uppercase;
  line-height: 2.4em;
  font-family: 'ABC Favorit';
  border-right: 1px solid black;
}

.entete-tut-droite {
  width: 50%;
  padding-bottom: 30rem;
}

/* Navigation */
nav {
  display: flex;
  align-items: center;
  padding: 1rem;
}

nav .logo {
  font-size: 1rem;
  margin-right: 20px;
  border: black 2px solid;
  border-radius: 30px;
  padding: 1px 8px;
  text-align: center;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  text-transform: lowercase;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav a {
  text-decoration: none;
  color: black;
}

/* Grille des tutoriels */
.tutorials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

.tutorials-grid .tutorial {
  width: 100%;
  max-width: 50%;
  box-sizing: border-box;
}

.tutorial:nth-child(1), .tutorial:nth-child(3) {
  box-shadow: inset -1px 0 0 0 black; /* Ombre simulant une bordure à l'intérieur */
}

.tutorial a {
  color: inherit; /* Hérite de la couleur définie pour le texte parent */
  text-decoration: none; /* Supprime les soulignements des liens */
  display: block; /* Permet à tout le contenu d'être cliquable */
}

.tutorial a:hover {
  text-decoration: none; /* Éviter le soulignement au survol */
}

/* Conteneur d'infos pages */
.container-infospages {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0; /* Supprime les marges externes */
  border: 1px solid black; /* Bordures externes déjà utilisées */
  box-sizing: border-box;
}

.column {
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-column {
  flex: 1;
  border-right: 1px solid black; /* Ajoute une bordure verticale entre vidéo et texte */
}

.video-column video {
  width: 100%;
  height: 900px; /* Limite la hauteur de la vidéo */
  object-fit: cover; /* Coupe la vidéo pour remplir le conteneur */
  display: block; /* Supprime les marges indésirables */
}

video.contact-height {
  height: 100%;
}

.container-infostexts {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

/* Texte et titres */
p {
  font-family: 'Akzidenz Grotesk';
  max-width: 40em;
  width: calc(100% - 1em);
  font-size: 1.1em;
  line-height: 1.2em;
}

.text-title {
  display: flex;
  align-items: center; /* Aligner verticalement le texte au centre des cercles */
  gap: 1rem; /* Espace entre les cercles et le texte */
  height: 12em;
  padding-left: 1em;
}

.text-title h3 {
  font-size: 2.5rem; /* Augmenter la taille du texte */
  margin: 0; /* Retirer tout espacement indésirable */
  text-transform: uppercase;
  line-height: 1em;
}

.text-title h3:hover {
  text-decoration: underline; /* Ajoute une réaction visuelle au survol */
}

.text-title a {
  color: black;
  text-decoration: none;
  display: flex;
}

.text-step2 {
  background-color: #C3FFD5;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

/* Sections d'étapes */
.step-section h2 {
  color: black;
  text-transform: uppercase;
  text-align: center;
  font-family: 'ABC Favorit Light';
}

.method {
  border-bottom: black 1px solid;
  border-top: black 1px solid;
  background-color: #00F048;
}

.step {
  display: flex;
  position: relative;
  margin-bottom: 0; /* Assurez-vous qu'il n'y a pas de marge en bas par défaut */
  border-bottom: none; /* Assurez-vous qu'il n'y a pas de bordure en bas par défaut */
}

.instructions-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.title-step {
  text-transform: uppercase;
  font-size: 2em;
  font-family: 'ABC Favorit Light';
  color: #00F048;
  max-width: 40%;
  line-height: 1.2em;
}

.tuto-alt {
  position: relative;
}

.marge-left, .instructions-text {
  padding-left: 1rem;
}

.number {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number span {
  background: white;
  border: 1px solid #00F048;
  color: #00F048;
  border-radius: 100em;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-family: 'ABC Favorit';
}

.number-alt {
  border: 6px solid black; /* Bordure fine */
  border-radius: 50%; /* Cercle parfait */
  aspect-ratio: 1 / 1; /* Rapport largeur/hauteur */
  display: flex; /* Centrage interne */
  justify-content: center;
  align-items: center;
  font-size: 5rem; /* Taille du numéro */
  width: 6rem; /* Taille du cercle */
  height: 6rem; /* Taille du cercle */
  background-color: white;
  font-weight: 100;
}

.number-circ, .number-circ2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid black;
  border-radius: 50%;
  display: flex; /* Centrage interne */
  justify-content: center;
  align-items: center;
  font-size: 5rem; /* Taille du numéro */
  width: 6rem; /* Taille du cercle */
  height: 6rem; /* Taille du cercle */
  background-color: white;
}

.number-circ2 {
  top: auto;
  bottom: -5%;
  border-color: #00F048;
  color: #00F048;
}

.number-alt h2, .number-alt2 h2 {
  margin-top: 10px;
}

.step .col {
  width: 100%;
}

.step .col:first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.step:nth-child(even) {
  flex-direction: row-reverse;
}

.step p {
  font-size: 1rem;
  flex: 1;
}

.step video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section des conseils */
.advice-section {
  margin: 0; /* Enlève tout espace autour */
}

.advice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
  align-items: start; /* Aligne verticalement les boîtes */
}

.advice-left {
  background-color: #fff;
}

.advice-left h2 {
  background-color: #00ff00; /* Vert vif */
  color: #fff;
  text-align: center;
  padding: 0.5rem 0;
  margin: 0; /* Supprime la marge pour s'aligner */
}

.advice-left .conseils-container {
  margin: 1rem 0 0 1.5rem; /* Ajuste les marges */
  padding: 0;
  width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
}

.advice-left .conseils-container ul {
  list-style-type: none; /* Supprime les points de liste */
  padding: 0; /* Supprime le padding */
  margin: 0; /* Supprime la marge */
}

.advice-left .conseils-container li {
  font-family: 'Akzidenz Grotesk'; /* Utilise la police Akzidenz Grotesk */
  text-align: center; /* Centre le texte */
  margin-bottom: 1rem; /* Ajoute une marge en bas entre les éléments */
}

.advice-right h2 {
  background-color: #00ff00; /* Vert vif */
  color: #fff;
  text-align: center;
  padding: 0.5rem 0;
  margin: 0 0 1rem 0; /* Supprime la marge supérieure et ajuste la marge inférieure */
}

.advice-right ul {
  background-color: #000; /* Fond noir */
  color: #fff; /* Texte blanc */
  list-style: none;
}

ul{
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.advice-right h2:last-of-type {
  background-color: #00ff00; /* Vert vif */
  color: #fff;
}

.advice-right h2{
  margin: 0 auto;
}

.advice-right li{
  border-bottom: white 1px solid;
  font-family: 'Akzidenz Grotesk';
}

.advice-left li{
 border-bottom: black 1px solid;
 border-right: black 1px solid;
 font-family: 'Akzidenz Grotesk';
 padding: .5em;
}
.advice-right p {
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
  color: #333;
}

/* Pied de page */
footer {
  padding: 1rem;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid black;
}

footer a {
  color: black;
}

a:hover {
  cursor: pointer;
}

i {
  padding: 1em;
}

.video-home {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  border: 1px solid black;
}

/* Avertissements */
.warning {
  text-align: center;
  font-family: 'Akzidenz Grotesk';
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.2em;
  background-color: #FFF7B8;
}

.warning h4 {
  font-weight: normal;
  margin: 0;
  padding: .6em;
  border-bottom: #000 1px solid;
}

/* Styles spécifiques aux pages */
/* Ninja */
body.ninja-page .title-step,
body.ninja-page span,
body.ninja-page .number-circ2 {
  color: #FADE00; /* Orange pour Ninja */
  border-color: #FADE00;
}

body.ninja-page .method,
body.ninja-page .advice-right h2,
body.ninja-page .advice-left h2 {
  background-color: #FADE00;
}

body.ninja-page .text-step2 {
  background-color: #FFF7B8;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.ninja-page .text-step3 {
  background-color: #FFFAD2;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.ninja-page .text-step4 {
  background-color: #E9E6D3;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.ninja-page .text-step5 {
  background-color: #C3C2B9;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.ninja-page .warning-2 {
  background-color: #FFFAD2;
}

body.ninja-page .warning-3 {
  background-color: #E9E6D3;
}

body.ninja-page .warning-4 {
  background-color: #C3C2B9;
}

body.ninja-page .warning-5 {
  background-color: #A7A7A7;
}

/* Frisbee */
body.frisbee-page .title-step,
body.frisbee-page span,
body.frisbee-page .number-circ2,
body.frisbee-page .text-step2 {
  color: #FA0000; /* Rouge Frisbee */
  border-color: #FA0000;
}

body.frisbee-page .method,
body.frisbee-page .advice-right h2,
body.frisbee-page .advice-left h2 {
  background-color: #FA0000;
}

body.frisbee-page .text-step2 {
  background-color: #FF8787;
  color: black;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.frisbee-page .text-step3 {
  background-color: #FFC8C8;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.frisbee-page .text-step4 {
  background-color: #FFE2E2;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.frisbee-page .warning {
  background-color: #FF8787;
}

body.frisbee-page .warning-2 {
  background-color: #FFC8C8;
}

body.frisbee-page .warning-3 {
  background-color: #FFE2E2;
}

/* Telephone */
body.telephone-page .title-step,
body.telephone-page span,
body.telephone-page .number-circ2,
body.telephone-page .text-step2 {
  color: #0400FF; /* Bleu Téléphone */
  border-color: #0400FF;
}

body.telephone-page .method,
body.telephone-page .advice-right h2,
body.telephone-page .advice-left h2 {
  background-color: #0400FF;
}

body.telephone-page .text-step2 {
  background-color: #9795FF;
  color: black;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.telephone-page .text-step3 {
  background-color: #BFBEFF;
  width: calc(100% + 1em);
  margin-left: -1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-top: .1em;
  box-sizing: border-box;
}

body.telephone-page .warning {
  background-color: #9795FF;
}

body.telephone-page .warning-2 {
  background-color: #BFBEFF;
}

body.telephone-page .warning-3 {
  background-color: #FFE2E2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-green {
    flex-direction: column;
  }

  .entete-tut, .entete-tut-droite {
    width: 100%;
    border: none;
    padding: 0;
	border-bottom: 1px solid black;
  }

  .entete-tut {
    border-bottom: 1px solid black;
    margin-bottom: 1rem;
  }

  .tutorials-grid {
    flex-direction: column;
    align-items: center;
  }

  .tutorials-grid .tutorial {
    width: 100%;
    max-width: 100%;
  }

  .container-infospages {
    flex-direction: column;
    align-items: center;
  }

  .video-column, .container-infostexts {
    width: 100%;
    border: none;
  }

  .video-column video {
    height: auto;
  }

  .step-section {
    display: flex;
    flex-direction: column;
  }

  .step {
    flex-direction: column;
  }

  .step .col {
    width: 100%;
    margin-bottom: 1rem;
  }

  .step video {
    width: 100%;
    height: auto;
  }

  .number, .number-circ, .number-circ2 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 1rem 0;
  }

  .text-title {
    flex-direction: row;
    align-items: center;
  }

  .text-title h3 {
    font-size: 1.5rem; /* Ajuste la taille du texte pour mobile */
    line-height: 1.2em;
  }

  .number span {
    font-size: 2rem; /* Ajuste la taille du texte pour mobile */
  }

  .title-step {
    font-size: 1.5rem; /* Ajuste la taille du texte pour mobile */
  }

  .text-step2 {
    width: 100%;
    margin-left: 0;
  }

  .step p {
    font-size: 1rem; /* Ajuste la taille du texte pour mobile */
  }

  .advice-grid {
    grid-template-columns: 1fr; /* Une colonne */
  }

  p {
    font-size: 1rem; /* Ajuste la taille du texte pour mobile */
  }

  .advice-left h2, .advice-right h2 {
    font-size: 1.5rem; /* Ajuste la taille du texte pour mobile */
  }

  .step:nth-child(even) {
    flex-direction: column;
  }

  .step {
    border-bottom: 1px solid black;
    margin-bottom: 1rem; /* Optionnel : pour ajouter un espacement entre les étapes */
  }

  .step:last-child {
    border-bottom: none; /* Supprime la bordure en bas de la dernière étape */
  }
}