/* 	CSS Document 
	Fichier :caruso-navigation.css
*/
/* =========================================================
   CARUSO24 — NAVIGATION
   ========================================================= */


/* =========================================================
   STRUCTURE GENERALE
   ========================================================= */

#navigation .main-navigation {
    position: relative;
    width: 100%;
    background: #2d2d2d;
    z-index: 1000;

}


/* =========================================================
   RESET DE L'ANCIEN MENU
   ========================================================= */
#ct_full_top {
	height:55px;
}
.ct_full_gluant {
    height: 100px; /* menu sur une ligne 104 */
}
#ct_full_menu{
    height: 45px;  /* en test ma guigui */
}
#ct_menu {
    height: 45px;  /* en test ma guigui */
}
/* #ct_full_menu {	height:45px;} */
.menu {float:none;}
#navigation {
  /*position: absolute;
  top:0;*/
  position: relative;
  width: 100%;
  left:0;

  /*left: 20px;*/
  height: auto;
  min-height: 40px;
/*  border: orangered dashed 1px; */
}
#navigation .main-navigation ul,
#navigation .main-navigation li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navigation ul.menu > li {
  margin: 0 0 0 0;
}
#navigation .main-navigation ul.menu > li {
    background: none;
    border: none;
    box-shadow: none;
}

#navigation .main-navigation a {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   NEUTRALISATION DES ANCIENS STYLES INTERNES
   --------------------------------------------------------- */

#navigation .main-navigation .menu-link,
#navigation .main-navigation .menu-link span {
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

#navigation .main-navigation .menu-link {
    border-radius: 0;
}

#navigation .main-navigation .menu-arrow {
    display: inline-block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    border: none;
    background: transparent;
    box-shadow: none;

    color: inherit;

    font-size: 13px;
    line-height: 1;
}
#navigation .main-navigation .menu-link span {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
}

/* =========================================================
   CONTENEUR DU MENU — neutralisation de l'ancien décor
   ========================================================= */

#ct_full_menu {
    width: 100%;
   /* height: 53px; */
   height:auto; min-height:40px;

    background-color: #2d2d2d;
    background-image: none;
	/* border:red  dashed 1px;
	 background-color: pink; */
}
 #menu-principal{height:auto}
/* =========================================================
   MENU PRINCIPAL
   ========================================================= */

#navigation .main-navigation ul.menu {
    display: flex;
    align-items: stretch;

    margin: 0;
    padding: 0;
}

#navigation .main-navigation ul.menu > li {
    position: relative;
}


/* =========================================================
   LIENS PRINCIPAUX
   ========================================================= */

/* =========================================================
   MENU PRINCIPAL — PREMIÈRE PASSE ESTHÉTIQUE
   ========================================================= */

#navigation .main-navigation ul.menu {
    display: flex;
    align-items: stretch;
    justify-content: center;

    margin: 0;
    padding: 0;
}

#navigation .main-navigation ul.menu > li {
    position: relative;
}


/* ---------------------------------------------------------
   LIENS PRINCIPAUX
   --------------------------------------------------------- */

#navigation .main-navigation .menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    /* height: 46px;
	
    padding: 0 13px; */
	height: 40px; 
    padding: 0 13px;

    color: #f2f2f2;
    background: transparent;

    font-family: "ShareTech", sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.02em;

    text-decoration: none;
    white-space: nowrap;/**/

    border: none;
    border-radius: 0;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* ---------------------------------------------------------
   SURVOL
   --------------------------------------------------------- */

#navigation .main-navigation .menu-link:hover {
    color: #f07820;
    background: #363636;
}


/* ---------------------------------------------------------
   RUBRIQUE ACTIVE
   --------------------------------------------------------- */

#navigation .main-navigation ul.menu > li.menu_actuel > .menu-link,
#navigation .main-navigation ul.menu > li.current_page_item > .menu-link {

    color: #f07820 !important;
    background: #363636 !important;

    text-decoration: none;
}


/* ---------------------------------------------------------
   CHEVRON
   --------------------------------------------------------- */

#navigation .main-navigation .menu-arrow {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 11px !important;
    line-height: 1 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   SOUS-MENUS
   ========================================================= */

#navigation .main-navigation .submenu {
    position: absolute;
    top: 100%;
    left: 0;

    display: none;

    min-width: 230px;

    margin: 0;
    padding: 8px 0;

    background: #ffffff;

    border: 1px solid #ddd;
    border-top: 3px solid #f07820;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* Ouverture au survol */

#navigation .main-navigation li.has-submenu:hover > .submenu {
    display: block;
}


/* =========================================================
   LIENS DES SOUS-MENUS
   ========================================================= */

#navigation .main-navigation .submenu li {
    margin: 0;
    padding: 0;
}

#navigation .main-navigation .submenu a {
    display: block;

    padding: 9px 16px;

    color: #333333;
    background: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;

    text-decoration: none;
    white-space: normal;
	
	transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

#navigation .main-navigation .submenu a:hover {
    color: #f07820;
    background: #faf7f2;
}
#navigation .main-navigation .submenu.align-right {
    left: auto;
    right: 0;
}
#navigation .main-navigation .submenu.align-left {
    left: 0;
    right: auto;
}
/* =========================================================
   POSITIONNEMENT AUTOMATIQUE DES SOUS-MENUS
   Géré par caruso-navigation.js
   ========================================================= */

/* Ouverture vers la gauche */
#navigation .main-navigation .submenu.submenu-vers-gauche {
    left: auto;
    right: 0;
}

/* Sous-menu trop large :
   on le décale pour rester dans la fenêtre */
#navigation .main-navigation .submenu.submenu-decale {
    left: auto;
    right: auto;
}
/* =========================================================
   PAGE COURANTE DANS UN SOUS-MENU
   ========================================================= */

#navigation .main-navigation .submenu li.current_page_item > a {
    color: #f07820;
    background: #faf7f2;
}
#navigation .main-navigation .submenu li > a:hover {
    color: #f07820;
    background: #faf7f2;
}

/* =========================================================
   BOUTON MOBILE
   ========================================================= */

#navigation .main-navigation .menu-toggle {
    display: none !important;
}

/* ---------------------------------------------------------
   CORRECTION DES CHEVRONS
   --------------------------------------------------------- */

#navigation .main-navigation .menu-arrow {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: inherit !important;

    font-size: 12px !important;
    line-height: 1 !important;
}

/* =========================================================
   RUBRIQUE ACTIVE
   ========================================================= */

#navigation .main-navigation ul.menu > li.menu_actuel > .menu-link,
#navigation .main-navigation ul.menu > li.current_page_item > .menu-link {

    color: #f07820 !important;
    background: #3b3b3b !important;

    text-decoration: none;
}
#navigation .main-navigation ul.menu > li.menu_actuel > .menu-link:hover,
#navigation .main-navigation ul.menu > li.current_page_item > .menu-link:hover {

    color: #f07820 !important;
    background: #414141 !important;
}
/* =========================================================
   VERSION MOBILE
   ========================================================= */
/* UNE LIGNE */
@media screen and (max-width: 950px) {
/*
    #navigation .main-navigation .menu-toggle {
        display: flex !important;
    }

    #navigation .main-navigation ul.menu {
        display: none;
    }
*/
  .ct_full_gluant {
    height: 104px;
  }
 #navigation .main-navigation ul.menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
		/* border: red solid 1px; */
	   /* max-width: 660px;
    	margin: 0 auto;*/
    }

    #navigation .main-navigation ul.menu > li {
        flex: 0 0 auto;
    }

    #navigation .main-navigation .menu-link {
        /*height: 42px;*/
        padding: 0 11px;
        font-size: 14px;
		/* border-left:pink solid 1px; */
    }
	#navigation .main-navigation .submenu {
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
		/*border:pink solid 2px;*/
    }
	/*
	 #navigation .main-navigation ul.menu > li:last-child > .submenu {
        left: auto;
        right: 0;
    } */
}

/* =========================================================
   SOUS-MENUS — ADAPTATION PETITS ÉCRANS
   ========================================================= */
/* 2 LIGNES  => blue */
/* sports et loisirs à la ligne */
@media screen and (max-width: 900px) {

    #navigation .main-navigation .submenu {
        width: 250px;
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }
	#navigation .main-navigation ul.menu {
		/*border:  blue solid 1px;*/
		width:100%;
		max-width:800px;
    	margin: 0 auto;
    }
	.ct_full_gluant {
   	 	height: 140px;
    	background-color: #666666;
  	}
}
/* 2 LIGNES  => rose */
/* commerces, sports et loisirs à la ligne */
@media screen and (max-width: 742px) {
	#navigation .main-navigation ul.menu {
		/*border:  pink solid 1px;*/
		width:100%;
		max-width:800px;
    	margin: 0 auto;
    }
}
/* 2 LIGNES  => orange */
/* vente directe commerces, sports et loisirs à la ligne */
@media screen and (max-width: 636px) {
	#navigation .main-navigation ul.menu {
		/*border-bottom: orange solid 1px; */
		width:100%;
		max-width:98%;
    	margin: 0 auto;
    }
}
/* 2 LIGNES  => orange */
/* gastronomie vente directe commerces, sports et loisirs à la ligne */
@media screen and (max-width: 531px) {
	#navigation .main-navigation ul.menu {
		/* border-bottom: pink solid 1px; */
		width:100%;
		max-width:100%;
    	margin: 0;
    }
	#navigation .main-navigation .menu-link {
    height: 42px;
    padding: 0 10px;
    font-size: 13px;
  	}
}
/* On essaie de rester sur deux lignes ma Guigui */
@media screen and (max-width: 465px) {
	#navigation .main-navigation ul.menu > li:last-child > .submenu {
       /* border-right: pink dashed 1px;
		border:red solid 1px;*/
    }
	#navigation .main-navigation .menu-link {
    padding: 0 4px;
    font-size: 12.5px;
  	}
}