/* Réinitialisation de certains styles par défaut */
body, h1, p {
    margin: 0;
    padding: 0;
}
@import url('https://use.typekit.net/emr3pni.css'); /* Remplacez xxxxxxx par votre ID de kit Adobe Fonts */

:root {
    /* Définir des variables pour les couleurs, les tailles de police, etc. */
    --color-primary: #333;
    --color-secondary: #555;
    --color-bg: #f0f0f0;
    --color-text: #fff;
    --font-primary: 'Bebas Kai', sans-serif; /* Mise à jour de la police ici */
}

body {
    margin: 0;
    font-family: 'Bebas Kai', sans-serif;
}
/* Style de l'en-tête */
header {
    background-color: #19324b; /* Applique la couleur de fond bleu foncé sur toute la largeur du header */
    /* Ajoutez ici d'autres styles pour votre header si nécessaire */
}

#headerCarousel {
    width: 100%;            /* Le carousel prendra toute la largeur de l'élément parent */
    max-width: 1800px;      /* La largeur maximale du carousel est de 1800px */
    height: 200px;          /* La hauteur du carousel est fixée à 200px */
    background-color:#19324b; /* La couleur de fond est définie sur un bleu foncé */
    overflow: hidden;       /* Les éléments débordant du carousel seront masqués */
    position: relative;     /* Positionnement relatif pour les éléments enfants positionnés absolument */
    margin: auto;           /* Centre le carousel horizontalement si l'élément parent est plus large */
}

.header-slide {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 100%;
    transition: left 1s;
}

.header-slide.first-slide {
    left: 0;
}

/* Positionnement du menu burger */
#menu-burger {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; /* S'assure que le burger est au-dessus du header */
}

/* Style de la barre de navigation */
.nav {
    background-color: #777;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 2; /* Assure que la barre de navigation est au-dessus du header */
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s;
    position: relative; 
}

.nav a:hover {
    color: #425d76;
}

/* Cache le menu burger par défaut */
#menu-burger {
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    #menu-burger {
        display: block; /* Affiche le menu burger */
    }

    /* Style des items du menu lorsqu'ils sont visibles */
    #menu-items {
        display: none; /* Cache les éléments du menu par défaut */
        background-color: black; /* Fond du menu déroulant */
        position: absolute;
        top: 50px; /* Position sous le menu burger */
        width: 100%;
        z-index: 3; /* S'assure que les items sont au-dessus du header et du burger */
    }

    .nav a {
        display: block; /* Affiche les liens en bloc */
    }
}
	  
/* Style du titre et du texte de présentation */
.content {
    text-align: center;
    max-width: 600px;
    margin: 20px auto;
	
}

.content h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.content h2 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
	text-align: justify; /* Justifier le texte */
}
/* Style des rectangles */
.rectangles {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
	margin-bottom: 10px;
}

.rectangle {
    width: 300px;
    height: 200px;
    background-color: #fff;
	
}
/* Tablettes en orientation portrait et paysage */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ajustements pour l'en-tête */
    .header {
        height: 200px; /* Hauteur réduite */
    }

    /* Ajustements pour la barre de navigation */
    .nav {
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
        gap: 10px;
    }

    /* Ajustements pour le contenu */
    .content {
        max-width: 90%; /* Plus d'espace sur les côtés */
		 font-weight: normal;
    }

    /* Ajustements pour les rectangles */
    .rectangles {
        justify-content: space-around; /* Distribue l'espace autour des rectangles */
        flex-wrap: wrap;
    }

    .rectangle {
        max-width: 400px; /* Largeur maximale fixée à 400px */
        width: 45%; /* S'adapte à la largeur disponible, jusqu'à 400px */
        margin-bottom: 20px;
    }

    /* Ajustements pour le formulaire de contact */
    .footer-form form {
        width: 90%; /* Plus d'espace sur les côtés */
    }
}

/* Smartphones en orientation portrait et paysage */
@media (max-width: 767px) {
    /* Ajustements pour l'en-tête */
    .header {
        height: 150px; /* Hauteur réduite davantage */
    }

    /* Ajustements pour la barre de navigation */
    .nav {
        flex-direction: column; /* Les éléments sont empilés verticalement */
        gap: 5px;
    }

    .nav a {
        padding: 10px; /* Plus grand pour être tactilement accessible */
    }

    /* Ajustements pour le contenu */
    .content {
        max-width: 95%; /* Utiliser presque toute la largeur */
        padding: 0 10px; /* Un peu de padding sur les côtés */
		 font-weight: normal;
    }

    .content h1 {
        font-size: 18px; /* Légèrement plus petit */
    }
	 .content h2 {
        font-size: 16px; /* Légèrement plus petit */
		  font-weight: normal;
    }

     /* Ajustements pour les rectangles */
    .rectangles {
        flex-direction: column; /* Alignement en colonne */
        align-items: center; /* Centrer les rectangles horizontalement */
    }

    .rectangle {
        max-width: 400px; /* Largeur maximale fixée à 400px */
        width: 90%; /* S'adapte à la largeur disponible, jusqu'à 400px */
        margin-bottom: 20px; /* Espace entre les rectangles */
    }
     /* Ajustements pour le formulaire de contact */
    .footer-form form {
        width: 90%; /* S'adapte à la largeur disponible, cohérent avec les rectangles */
        margin: 20px auto; /* Centré avec une marge en haut et en bas */
        padding: 10px; /* Padding réduit pour les petits écrans */
    }

    /* Ajustements pour les groupes de formulaire */
    .form-group input[type="text"],
    .form-group textarea,
    .form-group input[type="email"] {
        padding: 8px; /* Padding ajusté pour les petits écrans */
    }

    .form-group input[type="submit"] {
        width: 100%; /* Bouton utilisant toute la largeur */
        padding: 10px; /* Padding ajusté pour les petits écrans */
    }
}


/* Style du formulaire de contact */
.footer-form {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.footer-form form {
    width: 500px; /* Largeur du formulaire */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #f0f0f0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-group input[type="submit"] {
    width: auto;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-group input[type="submit"]:hover {
    background-color: #555;
}

.reset-button {
    background-color: #f2f2f2; /* Couleur de fond */
    border: 2px solid #ddd; /* Bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 15px; /* Espacement intérieur */
    cursor: pointer; /* Change le curseur pour indiquer qu'il s'agit d'un bouton */
    display: inline-flex; /* Permet d'aligner l'image et le texte */
    align-items: center; /* Centre verticalement le texte et l'image */
}

.reset-button img {
    width: 20px; /* Largeur de l'image */
    height: 20px; /* Hauteur de l'image */
    margin-right: 10px; /* Espace entre l'image et le texte */
}