/* ========================= */
/* Styles globaux            */
/* ========================= */
body {
    font-family: Arial, sans-serif; /* Police par défaut */
    margin: 0;
    background-color: white; /* Fond blanc */
    color: #000; /* Texte noir */
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Hauteur minimale pour couvrir toute la fenêtre */
}

/* ========================= */
/* Header                    */
/* ========================= */
header {
    background-color: white;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    position: relative;
}

.logo {
    height: 70px; /* Taille du logo */
}

.header-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre le bouton dans le header */
    background-color: #001F5B;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre */
    cursor: default; /* Pas de pointeur car non cliquable */
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #222; /* Couleur du texte utilisateur */
    font-size: 14px;
    text-align: center;
    gap: 5px; /* Espacement entre les éléments */
}

.avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%; /* Avatar circulaire */
}

/* ========================= */
/* Footer                    */
/* ========================= */
footer {
    background-color: #001F5B; /* Bleu foncé */
    height: 60px;
    margin-top: auto; /* Place le footer en bas */
}

/* ========================= */
/* Main - Zone principale   */
/* ========================= */
main {
    display: flex;
    gap: 40px; /* Espacement entre la sidebar et l'aperçu */
    padding: 30px 40px;
    flex: 1; /* Prend tout l'espace disponible */
}

/* ========================= */
/* Sidebar - Formulaire      */
/* ========================= */
.sidebar {
    flex: 1; /* Prend la moitié de l'espace */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ombre légère */
}

.form-create {
    display: flex;
    flex-direction: column;
}

.form-create label {
    margin-top: 10px;
    font-weight: bold;
}

.form-create input {
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 6px; /* Coins arrondis */
}

.submit-btn {
    margin-top: 20px;
    padding: 10px;
    background-color: #002b5b; /* Bleu foncé */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* ========================= */
/* Aperçu du formateur       */
/* ========================= */
.preview {
    flex: 1; /* Prend la moitié de l'espace */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.preview-card {
    background-color: #f0f0f0; /* Fond gris clair */
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1); /* Ombre */
}

.preview-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
}

.preview-departement,
.preview-note {
    font-size: 14px;
}

.preview-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.preview-info {
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.avatar-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Avatar circulaire */
    object-fit: cover;
    background-color: transparent;
}

/* ========================= */
/* Autocomplétion            */
/* ========================= */
.autocomplete-wrapper {
    position: relative;
}

#autocomplete-famille {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto; /* Défilement si trop d'éléments */
    z-index: 10; /* Au-dessus des autres éléments */
    border-radius: 0 0 10px 10px;
}

.suggestions div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestions div:hover {
    background-color: #f2f2f2; /* Surbrillance au survol */
}

/* ========================= */
/* Tags des familles        */
/* ========================= */
.selected-familles {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap; /* Retour à la ligne si nécessaire */
    gap: 10px; /* Espacement entre les tags */
}

.selected-famille-tag {
    background: #e6e6e6; /* Fond gris */
    padding: 6px 10px;
    border-radius: 20px; /* Tags arrondis */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.selected-famille-tag img {
    width: 20px;
    height: 20px; /* Icône de la famille */
}

.selected-famille-tag button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold; /* Bouton de suppression du tag */
}

/* ========================= */
/* Grille d'aperçu           */
/* ========================= */
.preview-famille-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

.preview-famille-grid .famille-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    text-align: center;
}

.preview-famille-grid img {
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
}

/* ========================= */
/* Groupes de familles      */
/* ========================= */
.famille-group {
    border-radius: 10px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.famille-group:hover {
    background-color: #f2f2f2; /* Surbrillance au survol */
}

.famille-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background-color: #f0f0f0; /* En-tête de groupe */
}

.famille-header img {
    width: 16px;
    height: 16px; /* Icône de famille */
}

.famille-group div:not(.famille-header) {
    padding: 8px 20px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.famille-group div:not(.famille-header):hover {
    background-color: #dcdcdc; /* Surbrillance des éléments de groupe */
}