nav.main {
    font-size: 14px;
    width: 996px;
    margin-bottom: 10px;
    height: 62px;
}

nav.main > form {
    display: inline;
    margin-right: 5px;
}

nav.main > p {
    font-size: 18px;
    text-transform: uppercase;
    line-height: 34px;
    margin: 0 0 5px;
    /*width: 650px;*/
    text-align: center;
    letter-spacing: 0.7em;
    color: #535353;
}

nav.main > p.active {
    color: #FFF;
}

nav.main a {
    color: #535353;
    text-decoration: none;
    position: relative;
    /*margin-left: 48px;*/
    /* 	padding-left: 14px; */
    text-transform: uppercase;
    /*font-weight: bold;*/
    letter-spacing: 0.4px;
}

nav.main p + a {
    margin-left: 0;
}

nav.main menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav.main > menu {
    position: relative;
}

nav.main menu li {
    display: inline;
}

nav.main a {
    color: #FFF;
}

nav.main > menu > li > a {
    display: inline-block;
    width: 132px;
    color: white;
    border-top: 3px solid #848484;
    text-align: center;
    padding: 3px 0;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

nav.main > menu > li > a.active {
    color: #FFF;
    border-top-color: #FFF;
}

nav.main > menu > li > a.active:not(:only-child):after {
    content: '';
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 6px;
    border-color: transparent;
    border-bottom-color: #EEE;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    z-index: 11;
    height: 0;
    width: 0;
}

/**no color**/
/*nav.main > menu > li > a.gt.active:not(:only-child):after {
	border-bottom-color: #FFEA8A;
}

nav.main > menu > li > a.bt.active:not(:only-child):after {
	border-bottom-color: #F0A591;
}

nav.main > menu > li > a.cl.active:not(:only-child):after {
	border-bottom-color: #7FCCCC;
}

nav.main > menu > li > a.au.active:not(:only-child):after {
	border-bottom-color: #94B1CD;
}

nav.main > menu > li > a.dj.active:not(:only-child):after {
	border-bottom-color: #D2E9EB;
}

nav.main > menu > li > a.iv.active:not(:only-child):after {
	border-bottom-color: #ACA3C6;
}*/

nav.main > menu > li + li {
    margin-left: 12px;
}

nav.main a > span {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #FFF;
    position: absolute;
    left: 0;
    top: 2px;
}

nav.main > menu > li > a.gt {
    border-top-color: #806B0B;
}

nav.main > menu > li > a.bt {
    border-top-color: #632210;
}

nav.main > menu > li > a.cl {
    border-top-color: #044B51;
}

nav.main > menu > li > a.au {
    border-top-color: #242D4A;
}

nav.main > menu > li > a.dj {
    border-top-color: #586166;
}

nav.main > menu > li > a.iv {
    border-top-color: #2A2345;
}

nav.main > menu > li > a.active.gt {
    border-top-color: #FFD616;
}

nav.main > menu > li > a {
    border-top-color: #515152 !important;
}

nav.main > menu > li > a.active.bt {
    border-top-color: #E24B23;
}

nav.main > menu > li > a.active.cl {
    border-top-color: #009999;
}

nav.main > menu > li > a.active.au {
    border-top-color: #29649B;
}

nav.main > menu > li > a.active.dj {
    border-top-color: #A5D4D8;
}

nav.main > menu > li > a.active.iv {
    border-top-color: #5A478E;
}

nav.main > menu > li > a.active {
    border-top-color: #FFF !important;
}

/* nav.main > menu > li > menu { */
/* 	display: none; */
/* } */

nav.main > menu > li > a.active + menu {
    display: block;
}

nav.main a + menu {
    background-color: #DDD;
}

/**no color**/
/*
nav.main a.gt + menu {
	background-color: #FFEA8A;
}

nav.main a.bt + menu {
	background-color: #F0A591;
}

nav.main a.cl + menu {
	background-color: #7FCCCC;
}

nav.main a.au + menu {
	background-color: #94B1CD;
}

nav.main a.dj + menu {
	background-color: #D2E9EB;
}

nav.main a.iv + menu {
	background-color: #ACA3C6;
}
*/
nav.main > menu menu {
    position: absolute;
    z-index: 10;
    width: 996px;
}

nav.main > menu > li > menu > li > a {
    display: inline-block;
    color: #000;
    height: 32px;
    line-height: 32px;
    text-transform: none;
}

nav.main a.gt + menu > li > a,
nav.main a.bt + menu > li > a,
nav.main a.cl + menu > li > a,
nav.main a.au + menu > li > a,
nav.main a.dj + menu > li > a,
nav.main a.iv + menu > li > a,
nav.main a + menu > li > a.active,
nav.main a + menu > li > a:hover {
    color: #000;
}

nav.main a + menu > li > a.active, nav.main a + menu > li > a:hover {
    background-color: #BBB;
}

/*
nav.main a.gt + menu > li > a.active, nav.main a.gt + menu > li > a:hover {
	background-color: #FFD616;
}

nav.main a.bt + menu > li > a.active, nav.main a.bt + menu > li > a:hover {
	background-color: #E24B23;
}

nav.main a.cl + menu > li > a.active, nav.main a.cl + menu > li > a:hover {
	background-color: #009999;
}

nav.main a.au + menu > li > a.active, nav.main a.au + menu > li > a:hover {
	background-color: #29649B;
}

nav.main a.dj + menu > li > a.active, nav.main a.dj + menu > li > a:hover {
	background-color: #A5D4D8;
}

nav.main a.iv + menu > li > a.active, nav.main a.iv + menu > li > a:hover {
	background-color: #5A478E;
}

nav.main a + menu > li > a.active, nav.main a.iv + menu > li > a:hover {
	background-color: #DDD !important;
}
*/
nav.main > menu > li > menu > li {
    position: relative;
}

nav.main > menu > li > menu > li > menu {
    /*height: 323px;*/
    top: 24px;
    background-color: #1B1B1B;
    width: 996px;
    font-size: 12px;
    display: none;
    border-top: 1px solid black;
}

nav.main > menu menu menu li {
    display: block;
    margin: 0;
    /*flex: 1 1 0;*/
}

nav.main > menu menu menu li.bonsPlans {
    position: absolute;
    left: auto !important;
    right: 0;
    top: 29px !important;
}

nav.main > menu menu menu li.bonsPlans strong {
    text-align: center;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    top: 4px;
    left: 0;
    z-index: 2;
    text-transform: uppercase;
}

nav.main > menu menu menu li.bonsPlans strong > span {
    background-color: #000;
    color: #FFF;
    font-size: 16px;
    padding: 0 2px;
}

nav.main > menu menu menu li.bonsPlans strong > span > span {
    font-size: 22px;
    background-color: #000;
    vertical-align: -2px;
    color: #EEE;
}

/**no color**/
/*
nav.main > menu a.gt + menu menu li.bonsPlans strong > span > span {
	color: #FFD616;
}

nav.main > menu a.bt + menu menu li.bonsPlans strong > span > span {
	color: #E24B23;
}

nav.main > menu a.cl + menu menu li.bonsPlans strong > span > span {
	color: #009999;
}

nav.main > menu a.au + menu menu li.bonsPlans strong > span > span {
	color: #29649B;
}

nav.main > menu a.dj + menu menu li.bonsPlans strong > span > span {
	color: #A5D4D8;
}

nav.main > menu a.iv + menu menu li.bonsPlans strong > span > span {
	color: #5A478E;
}
*/
nav.main > menu menu menu li.bonsPlans a {
    width: auto;
    padding: 1px;
}

nav.main > menu menu menu li.bonsPlans img {
    width: 330px;
    vertical-align: middle;
    z-index: 1;
}

nav.main > menu menu menu li > a {
    display: block;
    color: black;
    padding: 2px;
    text-transform: none;
    height: 15px;
}

/*nav.main > menu menu menu a:hover, nav.main > menu menu menu > li.sfHover > a {*/
/*    background-color: #3B3B3B;*/
/*    color: #FFF;*/
/*}*/

nav.main > menu menu menu menu {
    position: absolute;
    left: 332px;
    top: 0;
    width: auto;
    background-color: transparent;
    background-color: #3B3B3B;
    min-height: 323px;
    padding: 0;
}

:root {
    --bg-bar: #0b0b0b;
    --fg-bar: #fff;
    --fg-sub: #cfcfcf;
    --panel-bg: #f3f3f3;
    --h: #2c2c2c;
    --col-gap: 40px;
    --row-gap: 20px;
    --sep: #c9c9c9;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.mega {
    font-family: var(--font);
}

.mega__bar {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-bar);
}

.mega__button {
    background: none;
    border: 0;
    color: var(--fg-bar);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    padding: 10px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: gray;
    border-right: 1px solid #515152;
}

.mega__button.active {
    background-color: #DDD;
    color: black;
}

.mega__button .mega__sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--fg-sub);
    margin-top: 4px;
}

.mega__tab.is-open > .mega__button::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 14px;
    height: 10px;
    background: var(--panel-bg);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* Panneau */
.mega__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 43px;
    transform: translateY(-8px);
    display: none;
    padding: 28px 36px;
    background: var(--panel-bg);
    box-shadow: 0 18px 28px rgba(0, 0, 0, .18);
    background-color: #DDD;
    width: 924px;
    z-index: 999999;
}

.mega__tab.is-open > .mega__panel {
    display: block;
}

/* Grille de colonnes */
.mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: var(--row-gap) var(--col-gap);
}

.mega__col {
    min-width: 180px;
}

.mega__h {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--h);
    border-left: 3px solid var(--h);
    padding-left: 10px;
}

nav.main .mega__h > a {
    color: black;
}

nav.main .mega__h > a:hover {
    text-decoration: underline;
}

.mega__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega__list li + li {
    margin-top: 6px;
}

.mega__list a {
    text-decoration: none;
    color: #222;
    font-size: 15px;
    line-height: 1.4;
}

.mega__list a:hover {
    text-decoration: underline;
}

/* Séparateurs verticaux “colonne” */
.mega__col {
    position: relative;
}

.mega__col::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--sep);
}

/* Responsive */
@media (max-width: 1100px) {
    .mega__grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .mega__grid {
        grid-template-columns: repeat(1, minmax(180px, 1fr));
    }

    .mega__bar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .mega__panel {
        position: static;
        transform: none;
        box-shadow: none;
        margin-top: 8px;
    }
}