#bandeau {padding:0; width:100%; background:#FFFFFF; font-size: 13px; position:-webkit-sticky; position:sticky; left:0px; top:0px; z-index:999; overflow-anchor:none; transition: height 280ms ease, box-shadow 280ms ease; } #bandeau .menu-wrapper {display:block !important; } #bandeau-mobile {display:none; } #bandeau-contact, #bandeau #logo, #bandeau #logo a img, #bandeau #menu-conteneur { transition: all 280ms ease; } @media (prefers-reduced-motion: reduce) { #bandeau, #bandeau * { transition: none !important; } } #bandeau.sm #bandeau-haut {height: 0; min-height: 0; padding:0; overflow:hidden; } #bandeau.sm #logo a img { image-rendering: initial; max-width: 85px; } #bandeau.sm #bandeau-elements { margin: 5px 0 0;} #bandeau.sm #bandeau-langues .bandeau-langue {width: 75px; height: 28px; font-size: 12px;} #bandeau.sm #bandeau-langues .bandeau-langue i { width: 11px; height: 11px;} #bandeau.sm #menu .menu-element .menu-element-contenu > a > span > span, #bandeau.sm #menu .menu-element .menu-element-contenu > a:visited > span > span, #bandeau.sm #menu .menu-element .menu-element-contenu > span > span { font-size: 13px;} #bandeau.sm #menu .menu-element.selected .menu-element-contenu > a > span > span::after, #bandeau.sm #menu .menu-element.selected .menu-element-contenu > span > span::after, #bandeau.sm #menu .menu-element:hover .menu-element-contenu > a > span > span::after, #bandeau.sm #menu .menu-element:hover .menu-element-contenu > span > span::after { height: 13px;} /* Bandeau non réduit */ #bandeau-haut { background: var(--primary-color); color: #fff; font-size: 13px; font-weight: 400; min-height: 30px; padding: 3px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: height 280ms ease; } #bandeau-haut p {margin: 0; text-align: center; line-height: inherit;} #bandeau-haut a, #bandeau-haut a:visited { color: #fff; text-decoration: underline; } #bandeau-conteneur {position: relative; z-index: 400; height:100%; width:100%; } #bandeau-contact {position:relative; z-index:40; height: 100%; } #bandeau-contact > .global { position:relative; z-index:40; height: 100%; display: grid; grid-template-rows: auto 1fr; grid-template-columns: repeat(24, [col-start] 1fr); flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } #bandeau-logo {grid-row: 1 / -1; grid-column: col-start 1 / span 4; height: 100%; overflow: hidden; } #menu-conteneur {grid-row:2; grid-column: col-start 6 / span 19; } #bandeau-elements {grid-row:1; grid-column: col-start 6 / span 19; text-align: right; margin: 20px 0 0; } #bandeau #logo {position:relative; z-index:10; width: 100%; height:100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } #bandeau #logo a, #bandeau #logo a:visited {display:block; width: 100%; padding: 3px; box-sizing: border-box; } #bandeau #logo a img {height:auto; max-height:100%; width:100%; max-width: 125px; } /* Elements du bandeau */ #bandeau-elements > div { gap: 0 40px; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #bandeau-coordonnees { gap: 0 5px; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #bandeau-coordonnees .bandeau-contact a, #bandeau-coordonnees .bandeau-contact a:visited { letter-spacing: 1px; color:var(--primary-color); text-decoration:none; padding:5px 12px; font-weight: 500; font-size: 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 150ms ease-out; } #bandeau-coordonnees .bandeau-contact i {display:block; width:17px; height:17px; transition: all 150ms ease-out; background: var(--secondary-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Telephone */ #bandeau-elements #bandeau-telephone a, #bandeau-elements #bandeau-telephone a:visited { margin: 5px 0; border-right: 1px solid var(--secondary-color); } #bandeau-elements #bandeau-telephone i { width: 16px; height: 16px; margin-right: 10px; background-color: var(--secondary-color); -webkit-mask-image: url('../images/icone-telephone.svg'); mask-image: url('../images/icone-telephone.svg'); } #bandeau-elements #bandeau-telephone a:hover {color:var(--secondary-color);} /* Email */ #bandeau-elements #bandeau-email a, #bandeau-elements #bandeau-email a:visited {padding: 5px 10px 5px; } #bandeau-elements #bandeau-email i {background-color: var(--primary-color); -webkit-mask-image: url('../images/icone-mail.svg'); mask-image: url('../images/icone-mail.svg'); } #bandeau-elements #bandeau-email a:hover i {background: var(--secondary-color);} #bandeau-reseaux { height: 100%; text-align:center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } #bandeau-reseaux .bandeau-social { width: 16px; height: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 200ms ease-out; } #bandeau-reseaux .bandeau-social a, #bandeau-reseaux .bandeau-social a:visited {text-align:center; text-decoration:none; display:block; width: 100%; height: 100%; } #bandeau-reseaux .bandeau-social i { display:block; width: 100%; height: 100%; background-color: var(--primary-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #bandeau-reseaux .bandeau-social.social-facebook i { -webkit-mask-image: url('../images/icone-facebook.svg'); mask-image: url('../images/icone-facebook.svg'); } #bandeau-reseaux .bandeau-social.social-instagram i { -webkit-mask-image: url('../images/icone-instagram.svg'); mask-image: url('../images/icone-instagram.svg'); } #bandeau-reseaux .bandeau-social.social-linkedin i { -webkit-mask-image: url('../images/icone-linkedin.svg'); mask-image: url('../images/icone-linkedin.svg');} #bandeau-reseaux .bandeau-social.social-twitter-x i { -webkit-mask-image: url('../images/icone-x-twitter.svg'); mask-image: url('../images/icone-x-twitter.svg'); } #bandeau-reseaux .bandeau-social.social-youtube i { -webkit-mask-image: url('../images/icone-youtube.svg'); mask-image: url('../images/icone-youtube.svg'); } #bandeau-reseaux .bandeau-social.social-whatsapp i { -webkit-mask-image: url('../images/icone-whatsapp.svg'); mask-image: url('../images/icone-whatsapp.svg'); } #bandeau-reseaux .bandeau-social a:hover i {background: var(--secondary-color);} #bandeau-langues {height:100%; position:relative; z-index:550; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid var(--primary-color);} #bandeau-langues-centre {position: relative; z-index: 550;} #bandeau-langues .bandeau-langue {width: 85px; height: 35px; box-sizing: border-box; font-weight:400; font-size:13px; letter-spacing: 0.5px; color: var(--primary-color); display: flex; flex-wrap: wrap; justify-content: center; align-items: center;transition: all 280ms ease; } #bandeau-langues .bandeau-langue > a, #bandeau-langues .bandeau-langue > a:visited, #bandeau-langues .bandeau-langue > span {text-transform: uppercase; text-decoration:none; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: background 400ms ease-in-out; color: var(--primary-color);} #bandeau-langues .bandeau-langue i {margin: 0 0px 0 8px; width: 15px; height: 15px; display:block; background-color: var(--primary-color); -webkit-mask-image: url('../images/icone-fleche-droite.svg'); mask-image: url('../images/icone-fleche-droite.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #bandeau-langues .bandeau-langue:hover > a, #bandeau-langues .bandeau-langue:hover > span {background: var(--primary-color); color: #fff;} #bandeau-langues .bandeau-langue:hover i {background: #fff;} /* MENU */ #menu-conteneur { height:100%; box-sizing: border-box; clear:right; } #menu-wrapper {height:100%; } #menu {list-style:none; margin:0px auto; padding: 0; height:100%; } #menu > .global{padding: 0; position:relative; z-index:30; height:100%; display:flex; flex-wrap:wrap; justify-content: space-evenly; align-items: center; gap: 20px;} #menu .menu-element { display:inline-block; vertical-align:top; position:relative; z-index:30; height:100%;} #menu .menu-element .menu-element-contenu {height: 100%; } #menu .menu-element .menu-element-contenu > i { display: none; } #menu .menu-element .menu-element-contenu > span { cursor:default; } #menu .menu-element .menu-element-contenu > a, #menu .menu-element .menu-element-contenu > a:visited {height:100%; display: flex; flex-direction: column; justify-content: center; } #menu .menu-element .menu-element-contenu > a > span, #menu .menu-element .menu-element-contenu > a:visited > span, #menu .menu-element .menu-element-contenu > span {color: var(--primary-color); text-align: center; height:100%; display: flex; flex-direction: column; justify-content: center; position:relative; overflow: hidden;} #menu .menu-element .menu-element-contenu > a > span> span, #menu .menu-element .menu-element-contenu > a:visited > span> span, #menu .menu-element .menu-element-contenu > span > span { font-size:14px; letter-spacing: 1.1px; font-weight: 400; text-transform: uppercase; padding: 10px 0 12px; box-sizing:border-box; transition: all 150ms ease-out; } #menu .menu-element.menu-grand .menu-element-contenu > a > span, #menu .menu-element.menu-grand .menu-element-contenu > span {padding:0px 0 1px; } #menu .menu-element .menu-element-contenu > a, #menu .menu-element .menu-element-contenu > a:visited {text-decoration:none; } #menu .menu-element .menu-element-contenu > a:hover {text-decoration:none; } /** SI EFFET VERTICAL LIGNE SOUS MENU **/ @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ #menu .menu-element.selected .menu-element-contenu > a > span > span, #menu .menu-element.selected .menu-element-contenu > span > span, #menu .menu-element:hover .menu-element-contenu > a > span > span, #menu .menu-element:hover .menu-element-contenu > span > span {border-bottom:1px solid var(--secondary-color); } } @supports not (-webkit-overflow-scrolling: touch) { /* Effect 4: bottom border enlarge */ #menu .menu-element .menu-element-contenu > a > span > span::after, #menu .menu-element .menu-element-contenu > a > span > span::after, #menu .menu-element .menu-element-contenu > span > span::after { position: absolute; bottom: 0; left: calc(50% - 1px); width: 3px; height: 0px; background: var(--secondary-color); content: ''; opacity: 0; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(21px); -moz-transform: translateY(21px); transform: translateY(21px); } #menu .menu-element.selected .menu-element-contenu > a > span > span::after, #menu .menu-element.selected .menu-element-contenu > span > span::after, #menu .menu-element:hover .menu-element-contenu > a > span > span::after, #menu .menu-element:hover .menu-element-contenu > span > span::after { height: 21px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } } /** SINON **/ #menu .menu-element.selected .menu-element-contenu > a > span, #menu .menu-element.selected .menu-element-contenu > span, #menu .menu-element:hover .menu-element-contenu > a > span, #menu .menu-element:hover .menu-element-contenu > span {color:var(--secondary-color); } #menu .menu-element.open .smenu-conteneur { opacity: 1; visibility: visible; transition-delay: 250ms; /* délai avant ouverture */} /* Sous menu niveau 1 */ #menu .smenu-conteneur {visibility: hidden; opacity: 0; transition: opacity 150ms linear, transform 150ms linear, visibility 0s linear 150ms; position:absolute; left:0px; z-index:200; min-height:20px; width: 267px; background: #fff; box-shadow: 0 4px 3px rgba(0,0,0,0.05); } #menu .menu-element:last-child .smenu-conteneur { left: auto; right: 0px; } #menu .smenu-conteneur .global {padding:5px 0 !important; } #menu .smenu-conteneur .smenu-scroll-up, #menu .smenu-conteneur .smenu-scroll-down {display: none; position:relative; z-index: 10; } #menu .smenu-conteneur .smenu-scroll-up::before {content:"\f106"; font-family: FontAwesome; font-size: 15px; line-height: 9px; width:100%; height: 10px; display: block; text-align: center; color:var(--secondary-color); } #menu .smenu-conteneur .smenu-scroll-down::after {content:"\f107"; font-family: FontAwesome; font-size: 15px; line-height: 9px; width:100%; height: 10px; display: block; text-align: center; color:var(--secondary-color); } #menu .smenu-centre { margin:0 !important; padding:0 !important; list-style:none; width:100%; text-align: left; } #menu .smenu-conteneur.scrollable .smenu-centre {position:relative; z-index: 10; overflow-y: auto; } #menu .smenu-conteneur.scrollable .smenu-scroll-up, #menu .smenu-conteneur.scrollable .smenu-scroll-down { display: block; } #menu .smenu-centre-menus {padding: 0 10px; position:relative; z-index: 11; } #menu .smenu-element > span { cursor:default; } #menu .smenu-element > a {text-decoration:none; } #menu .smenu-element > a > span, #menu .smenu-element > span {color:var(--primary-color); font-size: 15px; text-align:center; padding:8px 0px ; width: 100%; font-size:15px; position: relative; z-index: 2; display:flex; justify-content:center; align-items:center; box-sizing: border-box; } #menu .smenu-element > a > span::after, #menu .smenu-element > span::after {content:"\f105"; font-family:FontAwesome; font-size:21px; color:var(--secondary-color); margin-left: 0; opacity:0; right:25px; top: 0; height: 100%; transition: margin 300ms ease 0ms; display: flex; align-items: center; } #menu .smenu-element.selected > span, #menu .smenu-element.selected > a > span, #menu .smenu-element:hover > a > span, #menu .smenu-element:hover > span {font-weight: 600; } #menu .smenu-element.selected > a > span::after, #menu .smenu-element.selected > span::after, #menu .smenu-element:hover > a > span::after, #menu .smenu-element:hover > span::after {opacity:1; margin-left:10px; } /* Sous menu niveau 2 */ #menu .ssmenu-conteneur {padding:0px; margin:0px; } #menu .ssmenu-element {} #menu .ssmenu-element > span { cursor:default; } #menu .ssmenu-element > a {text-decoration:none; } #menu .ssmenu-element > a > span, #menu .ssmenu-element > span {color:var(--primary-color); display:block; padding:5px 0; font-size:12px; position:relative; text-align:center;} #menu .ssmenu-element.selected > span, #menu .ssmenu-element:hover > span , #menu .ssmenu-element.selected > a > span, #menu .ssmenu-element:hover > a > span {color:var(--secondary-color); } @media all and (max-width:1645px) { #menu .menu-element:last-child .smenu-conteneur { left: unset !important; right: calc(-90% - 20px);} } @media all and (max-width:1435px) { #menu .menu-element:last-child .smenu-conteneur { right: calc(-70% - 20px);} } @media all and (max-width:1585px) { #bandeau-contact > .global{ padding: 0 10px; } } @media all and (max-width:1335px) { #menu .menu-element:last-child .smenu-conteneur { right: -50px;} } @media all and (max-width:1260px) { #menu .menu-element:last-child .smenu-conteneur { right: -40px;} } @media all and (max-width:1250px) { #bandeau-logo {grid-row: 1/3; } } @media all and (max-width:1185px) { #menu .menu-element:last-child .smenu-conteneur { right: -30px;} } @media all and (max-width:1085px) { #menu > .global { gap: 15px;} #menu .menu-element:last-child .smenu-conteneur { right: -20px;} #bandeau-elements { grid-column: col-start 5 / span 20;} #menu-conteneur { grid-column: col-start 5 / span 20;} } @media all and (max-width:960px) { #menu > .global { justify-content: flex-end; } #menu .menu-element .menu-element-contenu > a > span > span, #menu .menu-element .menu-element-contenu > a:visited > span > span, #menu .menu-element:last-child .smenu-conteneur { right: -20px;} #menu .menu-element .menu-element-contenu > a > span > span, #menu .menu-element .menu-element-contenu > a:visited > span > span, #menu .menu-element .menu-element-contenu > span > span { font-size: 13px; letter-spacing: 1px;} } @media all and (max-width:930px) { #bandeau-logo { grid-column: col-start 1 / span 3;} #bandeau #logo a img { max-width: 105px;} #menu-conteneur { grid-column: col-start 4 / span 21;} #menu .menu-element .menu-element-contenu > a > span > span, #menu .menu-element .menu-element-contenu > a:visited > span > span, #menu .menu-element .menu-element-contenu > span > span { letter-spacing: 0.2px;} #menu .menu-element.selected .menu-element-contenu > a > span > span::after, #menu .menu-element.selected .menu-element-contenu > span > span::after, #menu .menu-element:hover .menu-element-contenu > a > span > span::after, #menu .menu-element:hover .menu-element-contenu > span > span::after {height: 15px;} } @media all and (max-width:810px) { /* Bandeau */ .noscroll #bandeau{position: fixed !important; height: 100dvh; } .noscroll #bandeau-contact #logo, .noscroll #bandeau-contact #bandeau-elements {display:none; } #bandeau.sm #bandeau-contact #logo, #bandeau.sm #bandeau-reseaux, #bandeau.sm #bandeau-langues {display:none; } #bandeau.sm #bandeau-conteneur {height:auto; } #bandeau.sm #bandeau-mobile {height: 28px; width: 25px; left: 5px; top: 0px; padding: 3px 5px; } /* Si telephone et mail restent dans le bandeau en sm */ #bandeau.sm #bandeau-contact { position: absolute; right: 0; top: 0; width: calc(100% - 50px); height: 35px; z-index: 400; } #bandeau.sm #bandeau-contact #logo {display:none; } #bandeau.sm #bandeau-elements {position: absolute; top: 0px; right: 10px; z-index: 200; height: 35px; margin: 0;} #bandeau.sm #bandeau-elements > div {height: 100%;} #bandeau.sm #bandeau-elements .bandeau-element {height: 100%; overflow: hidden; } #bandeau.sm #bandeau-elements #bandeau-telephone, #bandeau.sm #bandeau-elements #bandeau-email {height:auto; } #bandeau.sm #bandeau-elements #bandeau-telephone a, #bandeau.sm #bandeau-elements #bandeau-telephone a:visited {margin:0;} #bandeau-contact {opacity:1; transition: all 400ms ease-in-out; } #bandeau-contact > .global {display:block; } .sm { border:none; height: 35px; } #bandeau-logo {height: auto !important; } #bandeau #logo {float:none; padding:3px 0 0; margin:0 auto; width: 100%; max-width: 255px; align-items: flex-start; } #bandeau #logo a, #bandeau #logo a:visited { text-align: center;} #bandeau #logo a img {height:auto; width:100%; margin: 0 auto; } #bandeau-elements { margin: 5px 0 0; } #bandeau-langues { position: absolute; right: 10px; top: 10px; height: auto;} #bandeau-reseaux { position: absolute; right: 10px; top: 60px; height: auto;} /* Menu mobile */ #bandeau-mobile {min-width: inherit; width: 85px; height: 30px; padding: 5px 5px 3px; margin: 0px; position: absolute; left: 5px; bottom: 1px; z-index: 99999; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #bandeau-mobile.open {left: 10px; top: 0; bottom:unset; position: fixed; } #bandeau-mobile.open span, #bandeau.sm #bandeau-mobile span {display:none; } #bandeau-mobile span {color: var(--primary-color); text-transform: uppercase; font-size: 17px; } #bandeau-mobile .hamburger {position: relative; display: inline-block; width: 24px; height: 1px; color: var(--primary-color); font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: var(--primary-color); transition: all .2s ease-out; } #bandeau-mobile .hamburger::before, #bandeau-mobile .hamburger::after { content: ''; width: 24px; height: 1px; background: var(--primary-color); position: absolute; left: 0; transition: all .2s ease-out; } #bandeau-mobile .hamburger::before { top: -9px; } #bandeau-mobile .hamburger::after { bottom: -9px; } #bandeau-mobile .hamburger.active { background: #fff; left: 0px; } #bandeau-mobile .hamburger.active::before {background: var(--primary-color); top: 0; transform: rotateZ(45deg); } #bandeau-mobile .hamburger.active::after {background: var(--primary-color); bottom: 0; transform: rotateZ(-45deg); } #bandeau #menu-conteneur { padding: 0; position: fixed; z-index: 9999; top: 0; left: 0; height: 100% !important; width: calc(100% - 45px); background: #fff; transition: transform 0.5s; transform: translateX(-100%); overflow: hidden; } #bandeau #menu-conteneur.open {display: block; transform: translateX(0%); } #bandeau #menu-wrapper {padding: 0 10px 10px; overflow-y: auto; margin-top: 40px; height:calc(100% - 50px); scrollbar-color: var(--primary-color) #fff; scrollbar-width: thin; } #menu > .global {padding: 30px 10px 0; display:block; width:100%; box-sizing: border-box; } #menu .menu-element, #menu .menu-element.menu-grand {height:auto !important; margin:10px 0px 0 !important; display:block; padding:0 0 10px 5px; border-bottom:1px solid #edecec; } #menu .menu-element .menu-element-contenu {display:flex; justify-content:flex-start; align-items:center; } #menu .menu-element .menu-element-contenu > i { cursor:pointer; display: block; color: var(--secondary-color); font-size: 22px; margin-left: 20px; } #menu .menu-element .menu-element-contenu > a > span > span, #menu .menu-element .menu-element-contenu > a:visited > span > span, #menu .menu-element .menu-element-contenu > span > span, #menu .menu-element.menu-grand .menu-element-contenu > a > span > span, #menu .menu-element.menu-grand .menu-element-contenu > span > span {padding:5px; text-align:left; color:var(--primary-color); border:none; font-size:15px; } #menu .menu-element br {display:none; } #menu .menu-element .menu-element-contenu > a > span > span::after, #menu .menu-element .menu-element-contenu > span > span::after, #menu .menu-element.selected .menu-element-contenu > a > span > span::after, #menu .menu-element.selected .menu-element-contenu > span > span::after, #menu .menu-element:hover .menu-element-contenu > a > span > span::after, #menu .menu-element:hover .menu-element-contenu > span > span::after {display:none !important; } #menu .menu-element.selected .menu-element-contenu > a > span, #menu .menu-element.selected .menu-element-contenu > span {font-weight:600; } #menu .menu-element.selected .menu-element-contenu > a > span > span, #menu .menu-element.selected .menu-element-contenu > span > span {color:var(--secondary-color) } #menu > .global #barre-menu {display:none; } #menu .menu-element:hover .smenu-conteneur { animation-play-state:paused; } #menu .smenu-conteneur {margin-top:6px; width:100%; padding:0; visibility: visible; opacity: 1; position:relative; left:0 !important; top:0 !important; background:none; min-height: 0; display:none; box-shadow: unset;} #menu .smenu-conteneur .global {padding: 0 !important; } #menu .smenu-centre {border:none; margin:0; width:auto; } #menu .ssmenu-conteneur-images {display:none !important; } #menu .smenu-centre-menus {float:none; width:auto; border-radius: 0; padding:0 ; } #menu .smenu-conteneur .smenu-element{display:block; width:auto; } #menu .smenu-element > a > span, #menu .smenu-element > span {font-size: 15px; padding: 5px 10px; min-height: 0; color:var(--primary-color); text-align: left; justify-content: flex-start; } #menu .smenu-element > a, #menu .smenu-element > a:hover {text-decoration:none; } #menu .smenu-element > a > span::after, #menu .smenu-element > span::after {transition:none; color:#fff; } #menu .smenu-element.selected > a > span, #menu .smenu-element:hover > a > span, #menu .smenu-element.selected > span, #menu .smenu-element:hover > span {background:var(--secondary-color); color:#fff; } #menu .ssmenu-element > a > span, #menu .ssmenu-element > span {padding:5px 0 10px 20px; text-align: left;} #menu .ssmenu-element.selected > span, #menu .ssmenu-element:hover > span , #menu .ssmenu-element.selected > a > span, #menu .ssmenu-element:hover > a > span {color:var(--secondary-color); } } @media all and (max-width:435px) { #bandeau #menu-conteneur {width: calc(100% - 25px); } } @media all and (max-width:385px) { #bandeau-mobile {left: 5px; width: 80px; } #bandeau-mobile span {font-size: 15px; } #bandeau-coordonnees .bandeau-contact a, #bandeau-coordonnees .bandeau-contact a:visited { padding: 5px 7px;} #bandeau-elements #bandeau-telephone i { margin-right: 5px;} } @media all and (max-width:335px) { #bandeau-elements #bandeau-telephone i { display:none;} }