/* 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: 180px;             /* Hauteur fixe du bandeau vidéo */
    overflow: hidden;          /* Cache les débordements */
}

.topbar-photo 
{
    width: 100%;               /* Vidéo qui remplit toute la largeur */
    height: 100%;              /* Vidéo qui remplit toute la hauteur */
    object-fit: cover;         /* 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               */
/* ------------------------- */

nav
{
    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 */
}

nav ul
{
    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 */
}

nav ul li
{
    position: relative;        /* Nécessaire pour positionner le sous-menu */
}

nav 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 */
}

nav a:hover
{
    color: blueviolet;
    /* border-bottom: 2px solid blueviolet; */
}

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

.sousmenu 
{
    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 */
}

nav > ul li:hover .sousmenu
{
    display: block;            /* Affiche le sous-menu au survol */
}

.sousmenu li
{
    float: none;
    width: 100%;
    text-align: left;
}

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

.sousmenu 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 */
}