/* commun.css */



html 
{
    font-family: cursive;      /* Police générale du site */
    font-size: 20px;           /* Taille de texte par défaut */
}



/* ------------------------- */
/*        EN-TETE            */
/* ------------------------- */

.topbar 
{
    position: relative;        /* Permet de placer le logo en position absolue */
    width: 100%;               /* Bandeau pleine largeur */
    height: 140px;             /* Hauteur fixe du bandeau vidéo */
    overflow: hidden;          /* Cache les débordements de la vidéo */
}

.topbar-video 
{
    width: 100%;               /* Vidéo qui remplit toute la largeur */
    height: 100%;              /* Vidéo qui remplit toute la hauteur */
    object-fit: cover;         /* La vidéo couvre l’espace sans déformation */
}

.logo 
{
    position: absolute;        /* Positionnement libre dans le bandeau */
    left: 20px;                /* Décalage horizontal */
    top: 50%;                  /* Centrage vertical */
    transform: translateY(-50%); /* Ajustement pour un vrai centrage */
}

.logo img 
{
    width: 150px;              /* Taille du logo */
}



/* ------------------------- */
/*        MENU               */
/* ------------------------- */

.menu 
{
    background: #fff;          /* Fond blanc du menu */
    width: 100%;               /* Menu pleine largeur */
    text-align: center;        /* Centrage du texte */
    border-top: 2px solid #ddd;    /* Bordure supérieure */
    border-bottom: 2px solid #ddd; /* Bordure inférieure */
}

.mainmenu 
{
    list-style: none;          /* Supprime les puces */
    margin: 0;
    padding: 0;
    display: flex;             /* Menu horizontal */
    justify-content: center;   /* Centrage des éléments */
    gap: 30px;                 /* Espacement entre les liens */
}

.mainmenu > li 
{
    position: relative;        /* Nécessaire pour positionner le sous-menu */
}

.menu a 
{
    text-decoration: none;     /* Pas de soulignement */
    padding: 12px 18px;        /* Zone cliquable plus grande */
    display: block;
    color: #333;               /* Couleur du texte */
    font-size: 18px;           /* Taille du texte */
    font-weight: 500;          /* Légèrement plus épais */
}



/* ---------------------- Sous-menu ------------------------- */

.submenu 
{
    display: none;             /* Caché par défaut */
    position: absolute;        /* Positionné sous l’élément parent */
    top: 100%;                 /* Juste en dessous du menu principal */
    left: 0;
    background: white;         /* Fond blanc */
    list-style: none;          /* Pas de puces */
    padding: 10px 0;
    margin: 0;
    min-width: 220px;          /* Largeur minimale */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Ombre du sous-menu */
    z-index: 1000;             /* Passe au-dessus du reste */
}

.dropdown:hover .submenu 
{
    display: block;            /* Affiche le sous-menu au survol */
}

.submenu li a 
{
    padding: 10px 15px;        /* Espacement interne */
    white-space: nowrap;       /* Empêche les retours à la ligne */
}

.submenu li a:hover 
{
    background: #f0f0f0;       /* Survol du sous-menu */
}




/* ------------------------- */
/*        PIED DE PAGE       */
/* ------------------------- */

.site-footer 
{
    text-align: center;        /* Texte centré */
    background: #eee;          /* Fond gris clair */
    padding: 20px;             /* Espacement interne */
}