/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Police d'écriture générale */
  body {
    font-weight: bold;
    color: #fff;
    font-family: "Raleway", Georgia, serif;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  }
  /* Header */
  .logo-container {
    position: fixed;
    top: 30px;
    left: 10px;
    z-index: 9999;
  }
  
  .video-thumbnail {
    width: 70vw;
    height: auto;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  .language-toggle {
    position: fixed;
    top: 30px;
    right: 10px;
    background-color: #f1f1f1;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    z-index: 100;
  }
  
  .language-toggle:hover {
    background-color: #ff9900;
  }
  
  .social-link {
    transition: background-color 0.3s, color 0.3s;
  }
  
  .social-link:hover {
    background-color: #fff;
    color: #000;
  }
  
 
  
  .logo {
    width: 180px;
    height: auto;
    z-index: 9999;
  }
  
  .hero {
    position: relative;
    width: 100%;
    min-height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
  }
  

  .contact-link{
    font-style: italic;
    }
  
  .blog-link {
  font-size: 1.5rem;
  font-style: italic;
  }
  
  .same-size {
    font-size: 1.5rem; /* Remplacez la valeur par la taille de police souhaitée */
  }
  .blog-link a:hover {
    color: #ff9900; /* Remplacez la valeur par la couleur dorée souhaitée */
    text-decoration: none; /* Supprimez la décoration de soulignement */
  }
  .contact-link a:hover {
    color: #ff9900; /* Remplacez la valeur par la couleur dorée souhaitée */
    text-decoration: none; /* Supprimez la décoration de soulignement */
  }
  
  .title {
    font-size: 80px;
    font-weight: bold;
  }
  
  .subtitle {
    font-size: 40px;
    margin-bottom: 40px;
  }
  
  .reseau {
    margin-top: 30px;
  }
  
  .member p {
    margin-bottom: 20px;
  }
  
  .reseaux-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 400px;
  }
  
  .reseaux-container a {
    text-decoration: none;
    color: #fff;
  }
  
  .hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    background-size: cover;
    background-position: center;
  }
  
  .background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 100%;
  }
  #about
  {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  
  .cta{
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
  }
  .cta:hover {
    color: #ff9900;
  }
  /* Range */
  .tittle5 {
    font-size: 35px; /* Taille de la police */
    margin-bottom: 10px; /* Marge en bas */
    /* Autres styles... */
  }
  
  .tittle6 {
    font-size: 23px; /* Taille de la police */
    margin-bottom: 10px; /* Marge en bas */
    /* Autres styles... */
  }
  .tittle7 {
    font-size: 4rem; /* Taille de la police */
    margin-bottom: 200px; /* Marge en bas */
    /* Autres styles... */
  }
  .tittle12 {
    margin-bottom: 300px; /* Marge en bas */
    font-size: 4rem;
  }

  .boocle-service-logo {
    width: 230px;
    align-items: center;
    margin-bottom: 20px;
  }

  .labboocleia-service-logo {
    width: 400px;
    align-items: center;
    margin-bottom: 20px;
  }

  .boocle-services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    color: white;
  }

  .boocle-services {
    margin-top: 20px;
  }
  .additional-services {
    margin-top: 100px;
  }
  .price {
    margin-top: 50px;
    margin-bottom: 50px;
  }
 
  .boocle-service, .additional-services, .price, .craftsmen, .founder2, .partners {
    background-color: rgba(0, 0, 0, 0.434); /* Arrière-plan gris */
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    padding: 25px;
    width: 80%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .craftsmen {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
  
  
  #calendly {
  margin-top: 80px;
  margin-bottom: 100px;
  font-size: 1.5rem;
  font-style: italic;
}
  
.partn {
  margin-top: 50px;
  font-size: 1.5rem;
}

#calendly:hover {
  color: #ff9900;
}

  .additional-services ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 150px;
    margin-top: 150px;
  }
  
  .boocle-service:hover, .additional-services:hover, .price:hover {
    transform: translateY(-5px);
    
  }
  
  /* Sections */
  section {
    padding: 4rem 0;
  }
  
  h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  /* Créations */
  .video-container {
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #creations .fr-text,
  #creations .en-text {
      margin-bottom: 50px; /* vous pouvez remplacer 20px par la valeur que vous souhaitez */
  
  }
  
  .video-container video {
    width: 50%;
    height: auto;
  }
  
  /* Services */
  .service-title {
    margin-bottom: 20px;
    font-size: 1.4rem;
  }
  #myVideo4 {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    overflow: hidden;
    object-fit: cover; /* This will ensure your video aspect ratio is maintained */
  
  }
  #myVideo5 {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    overflow: hidden;
    object-fit: cover; /* This will ensure your video aspect ratio is maintained */
  
  }
  #myVideo6 {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    overflow: hidden;
    object-fit: cover; /* This will ensure your video aspect ratio is maintained */
  
  }
  /*#personalized-message p {
    font-size: 1.5rem; 
  }*/
  
  .service {
    margin-bottom: 4rem;
    margin-top: 50px;
  }
  
  .serv{
  margin-top: 150px;
  }
  
  
  .service-text {
    font-size: 1.8rem;
  }
  
  .about-text {
    font-size: 1.5rem;
  }
  
  .service img {
    width: 300px;
    height: 300px;
    margin-bottom: 1rem;
  }
  
  /* Team */
  
  .reseaux-container a:hover {
    color: #ff9900; /* Remplacez la valeur par la couleur dorée souhaitée */
    text-decoration: none; /* Supprimez la décoration de soulignement */
  }
  .reseaux-container {
    font-size: 1.3rem;
    margin-top: 20px;
  }
  .member {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }
  
  section#about {
    padding-top: 12rem;
    padding-bottom: 4rem;
  }
  section#about3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  #team {
    margin-top: 0px;
    margin-bottom: 150px;
  }
  
  .member img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 1rem;
  }
  
  /* Sélection des icônes des réseaux sociaux dans la section "Fondateur" */
  .founder-social-icons a {
    transition: all 0.3s ease;
    color: inherit;
  }
  
  /* Effet de surbrillance lorsque la souris passe sur les icônes */
  .founder-social-icons a:hover {
    color: #ff9900;
    text-decoration: none;
  }
  
  /* Contact */

  .founder {
  width: 250px;
  height: 250px;
  border-radius: 50%; /* Rend le cadre circulaire */
  overflow: hidden; /* Cache les parties de la vidéo qui dépassent du cercle */
  position: relative; /* Nécessaire pour la position de la vidéo */
  margin-bottom: 40px;
  border: 2px solid white;
  }

  .founder video {
    width: 107%; /* Réduit la largeur de la vidéo de 10% */
    height: 107%; /* Réduit la hauteur de la vidéo de 10% */
    position: absolute; /* Positionnement absolu par rapport au conteneur parent */
    left: -7%; /* Déplace la vidéo de 10% vers la droite à l'intérieur du cercle */
    top: -5%; /* Déplace la vidéo de 10% vers le bas à l'intérieur du cercle */
  }
  
  
  
  section#contact {
    margin-top: 20px;
  }
  .contact-info {
    font-size: 1.3rem;
  }
  
  .contact-field {
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .envoyer {
    max-width: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .envoyer.fr-text,
  .envoyer.en-text {
    background-color: white; /* couleur de fond du bouton */
    color: black; /* couleur du texte du bouton */
    border: none; /* retire le bord du bouton */
    padding: 5px 10px; /* espace à l'intérieur du bouton */
    width: 70px; /* longueur du bouton */
    cursor: pointer; /* change le curseur quand il survole le bouton */
    transition: background-color 0.3s; /* transition pour l'effet de survol */
    text-align: center; /* centrage du texte dans le bouton */
  }
  
  form {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
  }
  
  label,
  input,
  textarea {
    margin-bottom: 1rem;
  }

  .partners{
    
    margin-bottom: 30px;
    font-size: 1.3rem;
  }
  
  
  a {
    text-decoration: none;
  }
  .logopartenaires a {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
  }
  
  .logopartenaires img {
    border: 3px solid transparent;
  }

  .logoincub, .logoft, .logosf, .logocic, .logobf, .logotedx {
    margin-right: 20px;
    margin-left: 20px;
  }

  .logocic, .logosf, .logoincub, .logoft, .logobf, .logotedx {
    width: 160px; 
    height: auto;
    margin-bottom: 50px;
    }
  
  .logopartenaires a:hover img {
    border-color: #ff9900;
  }
 
  .redirection {
    font-size: 1.5rem;
    font-style: italic;
  }
 
  .redirection:hover {
    color: #ff9900;
  }
 
  
  /* Effet de survol pour les boutons */
  .envoyer.fr-text:hover,
  .envoyer.en-text:hover {
    background-color: #ff9900; /* change la couleur de fond lors du survol */
  }
  
  /* Footer */
  footer {
    border-top: 5px solid white; 
    background-color: #000;
    color: #fff;
    padding: 2rem 0;
    z-index: 50;
  }
  
  .footer-links a:hover,
  .social-links a:hover {
    color: #ff9900; /* Remplacez la valeur par la couleur dorée souhaitée */
    text-decoration: none; /* Supprimez la décoration de soulignement */
  }
  
  .footer-links {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
  }
  
  .social-links {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .social-links a {
    margin-right: 20px;
    margin-left: 20px;
  }
  
  a {
    color: #fff;
    text-decoration: none;
  } 
  
  /* Ajout pour les grands écrans */
  @media screen and (max-width: 1024px) {
    .video-container video {
      width: 50%;
    }
   
    .ecologo {
      width: 50%;
    }
    .tittle7 {
      font-size: 3rem;
    }
    .tittle12 {
      font-size: 3rem;
    }
    #about
    {
      padding-left: 10px;
      padding-right: 10px;
    }
    .logocic, .logosf, .logoincub, .logoft, .logobf, .logotedx {
      width: 120px; 
      height: auto;
      margin-bottom: 50px;
      }
  }
  
  @media screen and (max-width: 768px) and (orientation: portrait) {
    .video-container video {
      width: 100%;
      height: auto;
    }
    .tittle7 {
      font-size: 2rem;
    }
    .tittle12 {
      font-size: 2rem;
    }
    #myVideo {
      object-fit: cover;
      object-position: 33% center;
    }
    .logo {
      width: 140px;
      height: auto;
      
    }
    #about
    {
      padding-left: 10px;
      padding-right: 10px;
    }
    .blog-link{
      padding-left: 10px;
      padding-right: 10px;
    }
    .ecologo {
      width: 70%;
    }
    body {
      overflow: hidden;
    }
  
    .background-video {
      width: 100%;
      min-height: 100%;
      object-fit: cover;
    }
  
    .hero-video-container {
      position: absolute;
      top: 0;
      left: 0;
      min-height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: -1;
      background-size: cover;
      background-position: center;
    }
    .logocic, .logosf, .logoincub, .logoft, .logobf, .logotedx {
      width: 90px; 
      height: auto;
      margin-bottom: 30px;
      margin-top: 30px;
      }
  }
  
  @media (max-width: 480px) and (orientation: portrait) {
    body,
    html {
      overflow-x: hidden;
      max-width: 100%;
    }
    body {
      overflow: hidden;
    }
    .blog-link{
      padding-left: 10px;
      padding-right: 10px;
    }
    .boocle-service-logo {
      width: 170px;
      align-items: center;
      margin-bottom: 20px;
    }
  
    .labboocleia-service-logo {
      width: 270px;
      align-items: center;
      margin-bottom: 20px;
    }
    #myVideo4, #myVideo5, #myVideo6
    {
      width: 70%;
      height: 70%;
    }
    #about
    {
      padding-left: 10px;
      padding-right: 10px;
    }
   
    .title {
      font-size: 50px;
    }
    .service img {
      width: 200px;
      height: 200px;
      margin-bottom: 1rem;
    }
    .team img {
      width: 200px;
      height: 200px;
      margin-bottom: 1rem;
    }
    .subtitle {
      font-size: 30px;
    }
    .ecologo {
      width: 70%;
    }
    .logo {
      width: 100px;
      height: auto;
    }
    .reseau {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .video-container {
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .reseaux-container {
      margin-top: 20px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
    }
    
    .contact-field,
    .envoyer {
      max-width: 80%;
    }
  
    .footer-links {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  
    .social-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      margin-bottom: 20px;
      transition: background-color 0.3s, color 0.3s;
    }
  
    .social-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
   
  
    .video-container video {
      width: 100%;
      height: auto;
    }
   
  }