/* pour tout le document */
* {
    margin: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
    font-size: 16px; /* Ajout de la taille de base pour le corps du texte */
}

h1 {
    text-align: center;
    font-size: 3em; 
    padding: 4vw;
}

h2 {
    text-align: center;
    font-size: 2em; 
    padding: 2vh;

}

h3 {
    padding: 1vw;
    font-size: 1.2em; 
}

p{
    padding: 1vw;
}

amp-img {
    padding:1vw;
}

img {
    padding:1vw;
}

a {
    color: aqua;
}



/* juste pour  le header*/

/* CSS pour les écrans de petite taille */
@media screen and (max-width: 600px) {
    .gauche a {
      display: block; /* Affiche les liens de navigation en tant que blocs, les empilant verticalement */
      padding-bottom: 10px; /* Espacement entre chaque lien */
    }
  }
nav{
    text-align: center;


}
nav a {
    font-size: xx-large;
    padding-inline: 2em;
    text-decoration: none;

}

nav a:hover {
    text-decoration: underline;
}

.acceuil {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 30rem;
}

/* Pour les écrans de taille moyenne et plus grands */
@media only screen and (min-width: 1063px) {
    .acceuil {
        background-image: url('images/cabinet_hypnose_gresivaudan.webp');
        
    }
}

/* Pour les écrans plus petits, comme les mobiles  */
@media only screen and (max-width: 1063px) {
    .acceuil {
        background-image: url('images/cabinet_hypnose_gresivaudan_small.webp');
        
    }
}



.titre{
    width: 66%;
    text-align: center; /* cela permettra de centrer horizontalement l'image */

    margin: auto;
    display: block; /*permet de centrer l'image*/
}

header p {
    text-align: center;
    padding-inline: 10%;
    padding-bottom: 10%;
    font-size: xx-large;
    }



/* pour tout le corps du document*/

main {
    font-size: 1.6em; 
    color: rgb(14, 11, 11);
}

main p {
    padding: 2vw; 
    text-align: justify;
}

.droite {
    background: linear-gradient(to right, #A3A7AA, #6C172A);    width: 100%;
}

.gauche {
    background: linear-gradient(to left, #A3A7AA, #6C172A);    width: 100%;
}

/* section thérapeute */


.float_left {
    float: left;
   object-fit: contain;
    width: 20vw;
   height: 20vh;

}

/* section hypnose  */

.float_right {
    float: right;
   object-fit: contain;
    width: 20vw;
   height: 20vh;

}

/* section EMDR */

#oeuil {
    float: left;
   object-fit: contain;
    width: 20vw;
   height: 20vh;

}


/*section pratique*/

#plan {
    float: right;
}


/*partie footer */


footer {
    
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  footer p {
    padding-top: 3vw;
  }

  .ensemble{
    text-align: center;
    margin:3vw;
  }


 
  .bouton {
    background: linear-gradient(#8e86b5, #acaeed);
    color: white;
    border-radius: 2em;
    padding:2vw;
    font-size: xx-large;
    text-align: center;
    background-color: #ccc;
    color: #fff;
    text-decoration: none;
    
  }

  .bouton :hover{
    text-decoration: underline;

  }
/* pour la FAQ */

.faq-list {
    list-style-type: none; /* Pour supprimer les puces par défaut */
  }
  


.answer {
    display: none;
}
.question {
    cursor: pointer;
    padding : 1em ;
    font-size: xx-large;
}

/* ... styles pour les vidéos ... */

.video-container {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
  }
  
  .video-player {
    position: relative;
    cursor: pointer;
  }
  
  .vignette {
    display: block; /* Assurez-vous que l'image soit un bloc pour utiliser les marges automatiques */
    margin: 0 auto; /* Centrer horizontalement */
  }
  
  .lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }