/* On stylise tout le fond de la page */
/* On réinitialise les marges par défaut des navigateurs */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Le style global de la page */
body {
    background-color: #0d233a; /* Bleu marine de ton affiche */
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
}

/* Style de la barre de navigation */
.barre-navigation {
    display: flex;
    justify-content: space-between; /* Met le logo à gauche et les liens à droite */
    align-items: center;            /* Centre verticalement */
    background-color: #1a365d;      /* Bleu un peu plus clair pour trancher */
    padding: 20px 50px;             /* Donne de la hauteur et de l'espace sur les côtés */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 50px;            /* Crée un espace sous la barre */
    width: 100%;                    /* S'étire sur tout l'écran */
}

/* Le style du texte du Logo */
.logo {
    font-weight: bold;
    font-size: 24px;
    color: #ffd700;                 /* Couleur dorée signature */
    letter-spacing: 1px;
}

/* Zone des liens */
.liens-menu a {
    color: white;
    text-decoration: none;          /* Enlève le soulignement bleu */
    margin-left: 25px;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Effet au survol des liens */
.liens-menu a:hover {
    color: #ffd700;                 /* Devient doré au survol */
}

/* Style pour la page active (Accueil) */
.lien-actif {
    border-bottom: 2px solid #ffd700; /* Ligne dorée sous Accueil */
    padding-bottom: 5px;
}
}

/* On stylise le grand titre h1 */
h1 {
    color: #ffd700;
    font-size: 36px;
    margin-top: 20px; /* Ajoute un espace entre le menu et le titre */
    margin-bottom: 10px;
}
}
/* Style pour le sous-titre */
.sous-titre {
    font-size: 18px;
    color: #cbd5e0;
    margin-bottom: 40px;
}

/* Le conteneur magique (Flexbox) qui aligne les cartes de gauche à droite */
.zone-formations {
    display: flex;
    justify-content: center; /* Centrer les cartes au milieu */
    gap: 20px;               /* Laisser un espace de 20px entre chaque carte */
    flex-wrap: wrap;         /* Si l'écran est trop petit (mobile), les cartes vont à la ligne automatiquement */
    padding: 20px;
}

/* Le style de chaque carte de formation */
.carte-formation {
    background-color: #1a365d; /* Un bleu un peu plus clair que le fond pour faire ressortir la carte */
    border: 2px solid #ffd700; /* Une bordure couleur Or */
    border-radius: 8px;        /* Arrondir les angles de la boîte */
    padding: 30px;
    width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Ajouter une petite ombre sous la boîte */
}

/* Changer la couleur du texte à l'intérieur des cartes */
.carte-formation h3 {
    color: white;
    margin: 0;
    font-size: 18px;
}
/* 1. Animation au survol des cartes */
.carte-formation {
    /* Ajoute cette ligne dans ton bloc .carte-formation existant ou laisse-la ici */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Quand la souris passe sur une carte */
.carte-formation {
    background-color: #1a365d;
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 30px;
    width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   
    /* Ces 3 lignes vont centrer parfaitement tes textes dans les boîtes */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Aligne la hauteur de toutes les cartes */
}
}

/* 2. Style de la zone du bouton */
.zone-bouton {
    margin-top: 40px;
    margin-bottom: 50px;
}

/* Style du bouton d'inscription (Règle du 10% de couleur flashy) */
.bouton-contact {
    display: inline-block;
    background-color: #ffd700; /* Fond Jaune/Or brillant */
    color: #0d233a;            /* Texte écrit avec le bleu foncé du fond */
    text-decoration: none;     /* Enlever le soulignement du lien */
    padding: 15px 30px;        /* Espacement interne pour grossir le bouton */
    font-weight: bold;
    font-size: 18px;
    border-radius: 50px;       /* Bouton très arrondi style moderne */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Effet au survol du bouton */
.bouton-contact:hover {
    background-color: #ffffff; /* Le bouton devient blanc au survol */
    transform: scale(1.05);    /* Il grossit très légèrement */
}
/* Style du pied de page */
.pied-page {
    background-color: #1a202c;      /* Un gris-noir très sombre pour trancher avec le bleu */
    color: #a0aec0;                 /* Écriture en gris clair discret */
    padding: 30px 20px;
    font-size: 14px;
    margin-top: 60px;               /* Crée un grand espace entre le bouton et le bas du site */
    border-top: 1px solid #2d3748;  /* Une fine ligne de séparation */
}

/* Espacement pour la ligne des contacts */
.contacts-footer {
    margin-top: 10px;
    color: #ffd700;                 /* Tes coordonnées ressortent en doré */
    font-weight: bold;
}
/* Style de la zone du formulaire */
.zone-formulaire {
    background-color: #1a365d; /* Même bleu clair que les cartes */
    max-width: 600px;           /* On limite la largeur pour que ce soit élégant */
    margin: 50px auto;          /* Centre le bloc horizontalement */
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #2d3748;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    text-align: left;           /* On aligne les textes des formulaires à gauche */
}

.zone-formulaire h2 {
    color: #ffd700;             /* Titre en Or */
    text-align: center;
    margin-bottom: 10px;
}

.zone-formulaire p {
    color: #cbd5e0;
    text-align: center;
    margin-bottom: 30px;
    font-size: 15px;
}

/* Organisation de chaque champ de saisie */
.groupe-champ {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;     /* Met le label au-dessus de la case */
}

.groupe-champ label {
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

/* Style des inputs et du select */
.groupe-champ input, .groupe-champ select {
    background-color: #0d233a;  /* Fond sombre identique au site */
    border: 2px solid #2d3748;
    border-radius: 6px;
    color: white;
    padding: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Effet quand on clique dans une case de saisie */
.groupe-champ input:focus, .groupe-champ select:focus {
    border-color: #ffd700;      /* La bordure devient dorée */
}

/* Style du bouton envoyer */
.bouton-valider {
    display: block;
    width: 100%;                /* Prend toute la largeur du formulaire */
    background-color: #ffd700;
    color: #0d233a;
    border: none;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

.bouton-valider:hover {
    background-color: #ffffff;  /* Devient blanc au survol */
    transform: translateY(-2px);
}