body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

header {
    background-color: #a50000; /* Rouge du drapeau marocain */
    color: white;
    padding: 1rem;
    text-align: center;
    box-shadow: 0px 0px 15px 0px #000000;
}

/* Style de base pour le titre */
header h1 {
    margin: 0; /* Aucun décalage initial */
    text-align: center; /* Alignement à gauche par défaut */
    padding-left: 10px; /* Un peu de marge à gauche */
    transition: padding 0.3s ease; /* Animation pour un effet fluide */
}

/* Pour les écrans de téléphone (< 480px) */
@media (max-width: 600px) {
    header h1 {
        padding-left: 100px; /* Écarte le titre davantage à droite */
    }
}

.couleurh3 {
    color:white
}

body {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.etoile-maroc {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px; /* Ajuster selon l'image finale */
    height: auto;
    z-index: 3; /* S'assurer que l'image est visible au-dessus des autres éléments */
}
/* Lorsque la fenêtre est petite (< 768px) */
@media (max-width: 768px) {
    .etoile-maroc {
        width: 70px; /* Réduit la taille de l'étoile */
    }
}

/* Lorsque la fenêtre est encore plus petite (< 480px) */
@media (max-width: 480px) {
    .etoile-maroc {
        width: 50px; /* Réduit encore davantage */
    }
}

.nav-button {
    background-color: #a50000; /* Couleur de fond */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 20px; /* Espacement intérieur */
    font-size: 16px; /* Taille du texte */
    cursor: pointer; /* Curseur qui change */
    text-decoration: none; /* Retirer le soulignement */
    display: inline-block; /* Comportement comme un bouton */
    margin: 5px; /* Espacement entre les boutons */
    transition: background-color 0.3s, transform 0.2s; /* Animation */
}

.nav-button:hover {
    background-color: #C70039; /* Couleur au survol */
    transform: scale(1.05); /* Agrandir légèrement au survol */
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.hero {
    position: sticky;
    overflow: hidden;
    height: 150vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.highlights {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: flex-start; /* Aligne en haut pour éviter l'étirement */
    gap: 40px; /* Espacement entre les cartes */
    padding: 100px 10px; /* Ajoute un espace autour des cartes */
    margin-top: 50px; /* Évite le chevauchement avec le header */
    margin-bottom: 100px; /* Évite le chevauchement avec le footer */
}

.card {
    background-color: rgba(255, 255, 255, 0.9); /* Rend le fond plus visible */
    border: 1px solid rgba(198, 0, 0, 0.8); /* Bordure légère */
    border-radius: 10px;
    padding: 15px; /* Réduit le padding */
    width: calc(33.33% - 60px); /* Trois cartes côte à côte */
    box-shadow: 0px 4px 6px rgba(30, 138, 0, 0.949);
    transition: transform 0.3s, box-shadow 0.3s;
    font-size: 14px; /* Texte plus petit */
}

.card img {
    width: 100%;
}

.card h2, .card h4, .card p, .card ul li {
    margin: 0.5em 0; /* Espacement réduit */
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 10px rgba(215, 0, 0, 0.732);
}

footer {
    background-color: #a50000;
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    padding: 20px 0; /* Espacement intérieur en haut et en bas */
    position: relative; /* Position normale par défaut */
    width: 100%; /* S'assurer qu'il occupe toute la largeur de la page */
    font-size: 14px; /* Taille du texte */
}

footer.fixed-footer {
    position: relative; /* Fixer le footer en bas de la fenêtre */
    bottom: 0;
    left: 0;
    width: 100%; /* Toujours occuper toute la largeur */
}

h1, h2, h3, h4 {
    margin: 0.5rem 0;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: auto;
}
    
label {
    margin: 0.5rem 0 0.2rem;
}

input, textarea {
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}
    
button {
    background-color: #a50000;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
    
button:hover {
    background-color: #850000;
}
    
@media (max-width: 768px) {
    .highlights {
        flex-direction: column;
        align-items: center;
    }
    
    .card {
        width: calc(50% - 20px); /* Deux cartes côte à côte */
        font-size: 12px; /* Réduit la taille du texte */
    }
}

.background-video {
    position: fixed; /* Positionnement relatif à la page */
    top: 0px;
    left: 0;
    width: 100%; /* Toujours occupe la largeur complète */
    height: 100%; /* Toujours occupe la hauteur complète */
    object-fit: cover; /* Conserve les proportions et remplit le conteneur */
    z-index: -1; /* Place la vidéo derrière tout le contenu */
    pointer-events: none; /* Empêche toute interaction avec la vidéo */
}

@media (max-width: 768px) {
    .background-video {
        height: auto; /* Adapte la hauteur automatiquement */
        min-height: 100%; /* Assure une couverture minimale */
    }
}

@media (max-width: 480px) {
    .background-video {
        height: auto; /* Adapte la hauteur automatiquement */
        min-height: 100%; /* Assure une couverture minimale */
    }
    .card {
        width: 100%; /* Une carte par ligne */
        font-size: 10px; /* Texte encore plus petit */
    }
}


.hero-content {
    position: relative;
    z-index: 2; 
    color: white;
    text-align: center;
    padding: 20px;
}

@media (max-width: 768px) {
    .card {
        width: calc(100% - 100px); /* Deux cartes côte à côte */
    }
}

@media (max-width: 480px) {
    .card {
        width: calc(100% - 100px); /* Une carte par ligne */
    }
}

.main-container {
    margin-bottom: 100px; /* Assure un espace suffisant pour éviter les chevauchements */
    min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
    display: flex;
    flex-direction: column;
}


.ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75%;
    margin: 0 auto;
    padding: 32px 0;
}

.ligne img {
    border-radius: 8px;
    box-shadow: 0px 0px 15px 0px #000000;   
}

.texte {
    flex: 1;
    padding: 0 10%;
    color: white;
    font-size: 24px;
    text-shadow: 0px 0px 7px #000000;
}

.image {
    flex: 1;
}
.image video {
    width: 100%;
}

.image:hover {
    transform: scale(1.05);
    transition: 0.5s ease;
}

/* A propos */
.about-page {
    width: 80%;
    margin: 0 auto;
}

.about-page h2 {
    text-align: center;
    font-size: 32px;
    margin: 16px;
}

.about-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.about-text {
    flex: 1;
    padding: 16px;
    font-size: 24px;
}

.about-image {
    flex: 1;
}

.about-img {
    max-width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 0px 15px 0px #000000; 
}

/* Media Queries pour rendre la mise en page responsive */
@media (max-width: 1024px) {
    /* Modification de .ligne */
    .ligne {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 16px 0;
        font-size: 18px;
    }
    .image {
        width: 80%;
        text-align: center; 
    }
    .image img {
        width: 100%;
    }


    .about-section {
        flex-direction: column;
        align-items: center;
    }

    .about-text, .about-image {
        width: 100%;
        padding: 16px;
    }

    .about-text {
        text-align: center;
        font-size: 18px;
    }

    .about-img {
        max-width: 80%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .about-page h2 {
        font-size: 28px;
    }

    .about-text {
        font-size: 16px;
    }
    
    .texte {
        font-size: 20px;
    }
    
    /* Modifications supplémentaires pour .ligne sur les petits écrans */
    .ligne {
        width: 100%;
        padding: 16px 0;
        font-size: 16px;
    }

    .about-img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}