CSS FINAL ET STABILISÉ (pour la structure HTML corrigée)
   ========================================================================== */

/* -------------------------------------------------- */
/* 1. STYLES PAR DÉFAUT : MOBILE (< 640px)
/* -------------------------------------------------- */
.title-bar {
    background-color: #A8131D;
    color: white;
}
.title-bar-title { color: white; font-weight: bold; }
.menu-icon, .menu-icon:hover { background-color: white; }

/* Par défaut, Foundation cache le .top-bar sur mobile, on le style quand il est ouvert */
.top-bar {
    background-color: #fdfdfd;
}

.menuder.vertical { width: 100%; }
.menuder li { list-style-type: none !important; }
.menuder.vertical li { width: 100%; border-bottom: 1px solid #eee; }
.menuder.vertical a { display: block; color: #A8131D; padding: 1rem; font-weight: bold; text-align: left; }
.menuder.vertical .submenu { position: static; border: none; }
.menuder.vertical .submenu a { padding-left: 2.5rem; background: #f5f5f5; font-weight: normal; }
.menuder ul, .menuder .menu-items { margin-left: 0; }
.menuder a.daddy:before, .menuder .menu-items__lien:not(:last-child):before { display: none; }

/* -------------------------------------------------- */
/* 2. STYLES POUR TABLETTE (640px à 1023px)
/* -------------------------------------------------- */
@media screen and (min-width: 22em) {
    .title-bar { display: none; }
    .top-bar-left { display: block; width: 100%; }
    .top-bar { background-color: transparent; }

    /* Le menu vertical est centré et stylisé */
    .menuder.vertical {
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        border: 2px solid #A8131D; /* Bordure rouge foncé */
        border-radius: 10px;
        overflow: hidden; /* Pour que les coins arrondis s'appliquent bien aux enfants */
    }

    /* CORRECTION : Application des couleurs alternées */
    .menuder.vertical li {
        border-bottom: 1px solid #A8131D; /* Séparateur rouge foncé */
    }
    .menuder.vertical li:last-child {
        border-bottom: none; /* Pas de bordure pour le dernier élément */
    }
    .menuder.vertical > li > a {
        background-color: #EA4B3C; /* Couleur de base rouge clair */
        color: white;
    }
    .menuder.vertical > li:nth-child(even) > a {
        background-color: #A8131D; /* Couleur alternée rouge foncé */
    }
    .menuder.vertical > li > a:hover {
        background-color: #333; /* Fond gris foncé au survol */
    }
    
    /* Style des sous-menus en accordéon */
    .menuder.vertical .submenu {
        border-top: 1px solid #A8131D;
    }
    .menuder.vertical .submenu a {
        background: #f5f5f5; /* Fond gris clair pour les sous-menus */
        color: #333;
    }
    .menuder.vertical .submenu a:hover {
        background: #ddd; /* Gris plus foncé au survol */
    }
}
/* ================================================== */
/* 3. STYLES POUR GRAND ÉCRAN (900px et plus)         */
/* ================================================== */
/* ================================================== */
/* 3. STYLES POUR GRAND ÉCRAN (900px et plus)         */
/* ================================================== */
@media screen and (min-width: 900px) {

    /* Centre le menu */
    .menu_sec { 
        display: flex; 
        justify-content: center; 
    }
    .top-bar, .top-bar-left { 
        width: auto; /* Le conteneur ne prend que la largeur nécessaire */
        background: #fff;
    }

    /* Conteneur du menu */
    .menuder.medium-horizontal { 
        display: flex; /* Utilisation de flex simple */
        flex-wrap: nowrap;
        border: none;
    }

    /* CORRECTION FINALE : Largeur fixe et non-flexible de 160px */
    .menuder.medium-horizontal li { 
        width: 160px;       /* Largeur fixe */
        flex-shrink: 0;     /* Empêche le rétrécissement */
        flex-grow: 0;         /* Empêche l'agrandissement */
        position: relative;
        background: #fff;
    }

    .menuder.medium-horizontal li:hover {
        z-index: 200;
    }

    /* Style des liens */
    .menuder.medium-horizontal a { 
        padding: 0.7rem 1rem; 
        border-radius: 200px 0px 200px 0px; 
        background: #EA4B3C; 
        color: #fff; 
        text-align: center; 
        border-bottom: none;
        display: block;
    }
    .menuder.medium-horizontal > li:nth-child(even) > a { background: #A8131D; }
    .menuder.medium-horizontal a:hover { background: #A8131D; color: #fff; }

    /* Style et position des sous-menus */
    .menuder.medium-horizontal .submenu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0 !important; 
        z-index: 100; 
        min-width: 160px; 
        border: 2px solid #A8131D; 
    }
    .menuder.medium-horizontal li:hover > .submenu, .menuder.medium-horizontal li:focus-within > .submenu { display: block; }
    .menuder.medium-horizontal .submenu li:hover > .submenu, .menuder.medium-horizontal .submenu li:focus-within > .submenu { left: 100% !important; top: 0; }
    
    .menuder.medium-horizontal .submenu a { 
        border-radius: 0; 
        background: #EA4B3C; 
        border-bottom: 1px solid #A8131D; 
        text-align: left; 
    }
    .menuder.medium-horizontal > li:nth-child(even) > .submenu a { background: #A8131D; border-bottom: 1px solid #EA4B3C; }
    
    /* Cache les chevrons comme demandé */
    .menuder.medium-horizontal a.daddy:before, .menuder.medium-horizontal .menu-items__lien:not(:last-child):before { display: none; }
}
=======
/* ==========================================================================
   CSS FINAL ET STABILISÉ (pour la structure HTML corrigée)
   ========================================================================== */

/* -------------------------------------------------- */
/* 1. STYLES PAR DÉFAUT : MOBILE (< 640px)
/* -------------------------------------------------- */
.title-bar {
    background-color: #A8131D;
    color: white;
    padding: 0.5rem;
    display: flex;
}
.title-bar-title { 
    color: white; 
    font-weight: bold; 
    align-self: center;
}
.menu-icon {
    background: white;
    color: #A8131D;
    border: none;
    padding: 0.5rem;
    margin-right: 0.5rem;
}

/* Par défaut, Foundation cache le .top-bar sur mobile, on le style quand il est ouvert */
.top-bar {
    display: none;
    position: relative;
}

.menuder.vertical { 
    display: block;
    width: 100%;
    background: #fdfdfd;
}
.menuder li { list-style-type: none !important; }
.menuder.vertical li { 
    width: 100%; 
    border-bottom: 1px solid #eee;
}
.menuder.vertical a { 
    display: block; 
    color: #A8131D; 
    padding: 1rem; 
    font-weight: bold; 
    text-align: left;
    text-decoration: none;
}
.menuder.vertical .submenu { 
    position: static; 
    border: none;
    padding-left: 1rem;
    background: #f5f5f5;
}
.menuder.vertical .submenu a { 
    padding-left: 2.5rem; 
    background: #f5f5f5; 
    font-weight: normal;
    padding: 0.75rem;
}
.menuder ul, .menuder .menu-items { margin-left: 0; }
.menuder a.daddy:before, .menuder .menu-items__lien:not(:last-child):before { display: none; }

/* -------------------------------------------------- */
/* 2. STYLES POUR TABLETTE (640px et plus)
/* -------------------------------------------------- */
@media screen and (min-width: 40em) {
    .title-bar { 
        display: none; 
    }
    .top-bar-left { 
        display: block; 
        width: 100%; 
    }
    .top-bar { 
        display: block;
        background-color: transparent;
    }

    /* Le menu horizontal est centré et stylisé */
    .menuder.medium-horizontal { 
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .menuder.medium-horizontal li { 
        position: relative;
        width: auto;
        flex: 0 0 auto;
    }

    .menuder.medium-horizontal a { 
        padding: 0.7rem 1rem; 
        display: block;
        color: white;
        background: #A8131D;
        text-align: center;
    }

    /* Style et position des sous-menus */
    .menuder.medium-horizontal .submenu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        min-width: 200px; 
        background: #EA4B3C; 
        z-index: 1000;
    }
    
    .menuder.medium-horizontal li:hover > .submenu {
        display: block;
    }
    
    .menuder.medium-horizontal .submenu a { 
        background: #EA4B3C;
        color: white;
        text-align: left;
        padding: 0.5rem 1rem;
    }
}==========================================================================
   CSS FINAL ET STABILISÉ (pour la structure HTML corrigée)
   ========================================================================== */

/* -------------------------------------------------- */
/* 1. STYLES PAR DÉFAUT : MOBILE (< 640px)
/* -------------------------------------------------- */
.title-bar {
    background-color: #A8131D;
    color: white;
}
.title-bar-title { color: white; font-weight: bold; }
.menu-icon, .menu-icon:hover { background-color: white; }

/* Par défaut, Foundation cache le .top-bar sur mobile, on le style quand il est ouvert */
.top-bar {
    background-color: #fdfdfd;
}

.menuder.vertical { width: 100%; }
.menuder li { list-style-type: none !important; }
.menuder.vertical li { width: 100%; border-bottom: 1px solid #eee; }
.menuder.vertical a { display: block; color: #A8131D; padding: 1rem; font-weight: bold; text-align: left; }
.menuder.vertical .submenu { position: static; border: none; }
.menuder.vertical .submenu a { padding-left: 2.5rem; background: #f5f5f5; font-weight: normal; }
.menuder ul, .menuder .menu-items { margin-left: 0; }
.menuder a.daddy:before, .menuder .menu-items__lien:not(:last-child):before { display: none; }

/* -------------------------------------------------- */
/* 2. STYLES POUR TABLETTE (640px à 1023px)
/* -------------------------------------------------- */
@media screen and (min-width: 22em) {
    .title-bar { display: none; }
    .top-bar-left { display: block; width: 100%; }
    .top-bar { background-color: transparent; }

    /* Le menu vertical est centré et stylisé */
    .menuder.vertical {
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        border: 2px solid #A8131D; /* Bordure rouge foncé */
        border-radius: 10px;
        overflow: hidden; /* Pour que les coins arrondis s'appliquent bien aux enfants */
    }

    /* CORRECTION : Application des couleurs alternées */
    .menuder.vertical li {
        border-bottom: 1px solid #A8131D; /* Séparateur rouge foncé */
    }
    .menuder.vertical li:last-child {
        border-bottom: none; /* Pas de bordure pour le dernier élément */
    }
    .menuder.vertical > li > a {
        background-color: #EA4B3C; /* Couleur de base rouge clair */
        color: white;
    }
    .menuder.vertical > li:nth-child(even) > a {
        background-color: #A8131D; /* Couleur alternée rouge foncé */
    }
    .menuder.vertical > li > a:hover {
        background-color: #333; /* Fond gris foncé au survol */
    }
    
    /* Style des sous-menus en accordéon */
    .menuder.vertical .submenu {
        border-top: 1px solid #A8131D;
    }
    .menuder.vertical .submenu a {
        background: #f5f5f5; /* Fond gris clair pour les sous-menus */
        color: #333;
    }
    .menuder.vertical .submenu a:hover {
        background: #ddd; /* Gris plus foncé au survol */
    }
}
/* ================================================== */
/* 3. STYLES POUR GRAND ÉCRAN (900px et plus)         */
/* ================================================== */
/* ================================================== */
/* 3. STYLES POUR GRAND ÉCRAN (900px et plus)         */
/* ================================================== */
@media screen and (min-width: 900px) {

    /* Centre le menu */
    .menu_sec { 
        display: flex; 
        justify-content: center; 
    }
    .top-bar, .top-bar-left { 
        width: auto; /* Le conteneur ne prend que la largeur nécessaire */
        background: #fff;
    }

    /* Conteneur du menu */
    .menuder.medium-horizontal { 
        display: flex; /* Utilisation de flex simple */
        flex-wrap: nowrap;
        border: none;
    }

    /* CORRECTION FINALE : Largeur fixe et non-flexible de 160px */
    .menuder.medium-horizontal li { 
        width: 160px;       /* Largeur fixe */
        flex-shrink: 0;     /* Empêche le rétrécissement */
        flex-grow: 0;         /* Empêche l'agrandissement */
        position: relative;
        background: #fff;
    }

    .menuder.medium-horizontal li:hover {
        z-index: 200;
    }

    /* Style des liens */
    .menuder.medium-horizontal a { 
        padding: 0.7rem 1rem; 
        border-radius: 200px 0px 200px 0px; 
        background: #EA4B3C; 
        color: #fff; 
        text-align: center; 
        border-bottom: none;
        display: block;
    }
    .menuder.medium-horizontal > li:nth-child(even) > a { background: #A8131D; }
    .menuder.medium-horizontal a:hover { background: #A8131D; color: #fff; }

    /* Style et position des sous-menus */
    .menuder.medium-horizontal .submenu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0 !important; 
        z-index: 100; 
        min-width: 160px; 
        border: 2px solid #A8131D; 
    }
    .menuder.medium-horizontal li:hover > .submenu, .menuder.medium-horizontal li:focus-within > .submenu { display: block; }
    .menuder.medium-horizontal .submenu li:hover > .submenu, .menuder.medium-horizontal .submenu li:focus-within > .submenu { left: 100% !important; top: 0; }
    
    .menuder.medium-horizontal .submenu a { 
        border-radius: 0; 
        background: #EA4B3C; 
        border-bottom: 1px solid #A8131D; 
        text-align: left; 
    }
    .menuder.medium-horizontal > li:nth-child(even) > .submenu a { background: #A8131D; border-bottom: 1px solid #EA4B3C; }
    
    /* Cache les chevrons comme demandé */
    .menuder.medium-horizontal a.daddy:before, .menuder.medium-horizontal .menu-items__lien:not(:last-child):before { display: none; }
}