h1 { /* on sélectionne le body qui a pour id accueil*/
    font-family: "Courier New"; /* police du texte */
    font-size: 100pt; /* taille du texte*/
    text-decoration: underline;
    text-align: center; /* centre le texte */
}

h2 {
	font-family: "Courier New"; /* police du texte */
  font-size: 25pt; /* taille du texte*/
  text-align: left; /* centre le texte */
	font-weight: bold;
  margin-bottom: 0px;
}

h3 {
	font-family: Arial; /* police du texte */
  font-size: 17pt; /* taille du texte*/
  text-align: left; /* centre le texte */
	font-weight: bold;
  margin-top: 0px;
}
h4 {
	font-family: cursive;
}

h5 {
  font-family: Arial;
  font-size: 25pt; /* taille du texte*/
  text-align: center;
}
.movie { /* pour l'accueil */
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 20px 0;
  border: 5px solid black;
  border-radius: 15px;
  padding: 10px;
  font-weight: bold;
  color: black;             /* texte en noir */
  text-decoration: none;    /* enlève le soulignement */
  cursor: pointer;          /* main au survol */
  background-color: #f0f0f0;
}

.movie:hover { /* pour l'accueil */
  background-color: #e9da0b;
}

.movie img { /* pour image de accueil */
  width: 400px;
  height: auto;
}

.movie p { /* pour l'accueil */
	font-family: system-ui;
	margin: 0;
	font-size: 25px;
	text-decoration: none;
}


li {
  list-style: none;
  padding: 0; /* Optionnel mais utile pour supprimer l'indentation par défaut */
  margin: 0;  /* Idem */
}

.video{
  display: flex;
  justify-content: center;
  margin: 50px 0;	
}

.btn-retour { /* pour le bouton de retour */
  display: inline-block;
  padding: 50px 20px;
  margin: auto;
  background-color: #500209;  /* bleu */
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 20px;
  font-family: "Courier New";
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-retour:hover { /* pour le bouton de retour */
  background-color: #862c34;
}

.video-container {
  display: flex;
  justify-content: center;
  gap: 50px; 
  flex-wrap: wrap; 
  margin-bottom: 30px;
}

.video-container iframe {
  width: 480px;   /* Largeur de chaque vidéo */
  height: 270px;  /* Hauteur */
  border-radius: 10px;
  border: none;
}

img {
  width: 250px;   
  height: auto;  
  border-radius: 10px; 
  cursor: pointer;
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.05);
}
	
.video-box {
	display: flex;
	flex-direction: column; /* Titre au-dessus de la vidéo */
	align-items: center;    /* Centre le contenu */
}

/* Style du conteneur en-tête */
.header-principal {
    display: flex;
    align-items: center; /* Aligne verticalement le logo et le titre au même niveau */
    gap: 20px; /* Espace entre le logo et le titre */
    margin-bottom: 20px;
}

/* Taille du logo (à ajuster selon vos préférences) */
.logo-site {
  height: 250px; /* Ajustez la hauteur selon vos besoins (ex: 50px, 80px) */
  width: auto;  /* Conserve les proportions de l'image */
}

/* Supprime les marges par défaut du h1 pour un alignement parfait */
.titre-site {
  margin: 0;
}

/* Le grand conteneur qui contient la colonne de texte et la colonne d'image */
.conteneur-principal {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Espace les deux colonnes */
    align-items: flex-start; /* Aligne les éléments en haut */
    width: 90%; /* Largeur totale du conteneur sur la page */
    margin: 0 auto; /* Centre le conteneur sur la page */
    gap: 40px; /* Ajoute un espace de 40px entre les deux colonnes */
}

/* La colonne de gauche (le texte) */
.colonne-texte {
    flex: 1; /* Occupe tout l'espace disponible à gauche */
    /* Vous pouvez ajouter d'autres styles ici, comme padding-right */
}

/* La colonne de droite (la nouvelle image) */
.colonne-image {
    flex: 1; /* Occupe tout l'espace disponible à droite */
}

.colonne-image img {
    width: 250px; /* L'image s'adapte à la largeur de sa colonne */
    height: auto; /* Conserve les proportions de l'image */
    border-radius: 15px; /* Pour un joli style arrondi */
}

.header-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Conteneur global en deux colonnes */
.conteneur-help {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
}

/* Style commun aux deux rectangles */
.rectangle-gauche, .rectangle-droite {
    flex: 1;
    background-color: #ebe1aa;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Titres à l'intérieur des rectangles */
.rectangle-gauche h2, .rectangle-droite h2 {
    font-family: "Courier New";
    font-size: 20pt;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

/* Style du formulaire de droite */
.rectangle-droite form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rectangle-droite label {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    font-weight: bold;
}

.rectangle-droite input, .rectangle-droite textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 11pt;
    box-sizing: border-box; /* Empêche les éléments de dépasser */
}

.btn-envoyer {
    background-color: #000;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 12pt;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-envoyer:hover {
    background-color: #333;
}

body {
    background-image: url('https://images.cdn.europe-west1.gcp.commercetools.com/6bc1c30b-2c43-4ffe-a23e-0b6f8e4fc8a2/DETALE_KABRIC_Tekstu-tr2vukMN.jpg?q=80&fm=webp&w=962');
    background-size: cover;       /* L'image s'étire pour couvrir toute la page */
    background-position: center;  /* L'image est centré */
    background-repeat: no-repeat; /* Évite que l'image ne se répète en mosaïque */
    background-attachment: fixed; /* L'image reste fixe quand on fait défiler la page */
}