/* BANDEAU */ #bandeau {padding:0; position:fixed; left:0px; top:0px; width:100%; z-index:3000;-webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; background:#FFFFFF; border-bottom: 1px solid #1f388a; box-sizing: border-box; } #global:not(.global-accueil).no-bandeau #bandeau {} #bandeau .menu-wrapper {display:block !important; } #bandeau-mobile {display:none; } .lg {height:145px; } .sm {height:90px; } /* Bandeau réduit */ #bandeau.sm #bandeau-haut {height:2px;} #bandeau.sm #bandeau-haut .global {display: none;} #bandeau.sm #bandeau-conteneur {height: calc(100% - 2px); } #bandeau.sm #bandeau-contact {} #bandeau.sm #logo {} #bandeau.sm #logo a, #bandeau.sm #logo a:visited { padding: 2px 0; box-sizing: border-box; height: 100%;} #bandeau.sm #logo a img { image-rendering: initial; max-width: 175px;} #bandeau.sm #bandeau-elements { margin: 3px 0 0;} #bandeau.sm #bandeau-elements .bandeau-contact a, #bandeau.sm #bandeau-elements .bandeau-contact a:visited { font-size: 14px; padding: 2px 12px;} #bandeau.sm #bandeau-elements .bandeau-contact i { width: 18px; height: 18px;} #bandeau.sm #bandeau-elements #bandeau-telephone i { width: 13px; height: 13px; } #bandeau.sm #bandeau-recherche input { padding: 3px 0;} #bandeau.sm #bandeau-recherche i { width: 19px; height: 19px;} #bandeau.sm #bandeau-recherche input::-webkit-input-placeholder {font-size: 15px;} #bandeau.sm #bandeau-recherche input::-moz-placeholder {font-size: 15px;} #bandeau.sm #bandeau-recherche input:-ms-input-placeholder {font-size: 15px;} #bandeau.sm #bandeau-recherche input:-moz-placeholder {font-size: 15px;} #bandeau.sm #bandeau-panier a, #bandeau.sm #bandeau-panier a:visited {padding:5px; width: 30px; height: 21px;} #bandeau.sm #bandeau-panier span { font-size: 14px; right: 9px; top: 0;} #bandeau.sm #menu-conteneur { } #bandeau.sm #menu {} #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: 16px;} #bandeau-haut { height: 35px; background: #1E3789; background: -webkit-linear-gradient(90deg, rgba(30, 55, 137, 1) 0%, rgba(15, 106, 179, 1) 100%); background: -moz-linear-gradient(90deg, rgba(30, 55, 137, 1) 0%, rgba(15, 106, 179, 1) 100%); background: linear-gradient(90deg, rgba(30, 55, 137, 1) 0%, rgba(15, 106, 179, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1E3789", endColorstr="#0F6AB3", GradientType=1); } #bandeau-haut .global {height: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #bandeau-retour {height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} #bandeau-retour a, #bandeau-retour a:visited {color:#fff; text-decoration: none;} /* Bandeau non réduit */ #bandeau-conteneur {position: relative; z-index: 400; height: calc(100% - 35px); 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-columns: repeat(24, [col-start] 1fr);-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;} #bandeau-langues-conteneur {position: absolute; left: -120px; top: 10px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} #bandeau-langues-conteneur .bandeau-langue {width: 21px; height: 13px; margin: 3px 5px 3px 0;} #bandeau-langues-conteneur .bandeau-langue.selected {opacity: 0.5;} #bandeau-langues-conteneur .bandeau-langue a, #bandeau-langues-conteneur .bandeau-langue a:visited {display: block; text-decoration: none;} #bandeau-langues-conteneur .bandeau-langue span {display: block;} #bandeau-langues-conteneur .bandeau-langue img {width: 100%; height: 100%; object-fit: cover; display: block;} #bandeau-logo {grid-row:1/3; grid-column: col-start 1 / span 4; height: 100%; overflow: hidden;} #bandeau-recherche {grid-row:1; grid-column: col-start 9 / span 5;} #bandeau-panier {grid-row:1; grid-column: col-start 24 / span 1; margin-top: 7px;} #menu-conteneur {grid-row:2; grid-column: col-start 6 / span 19; } #bandeau-elements {grid-row:1; grid-column: col-start 15 / span 9; text-align: right; margin: 12px 10px 0;} #bandeau #logo {position:relative; z-index:10;width: 100%; height:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #bandeau #logo a, #bandeau #logo a:visited { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} #bandeau #logo a img {height:auto; max-height:100%; width:100%; max-width: 245px; } #bandeau-panier a, #bandeau-panier a:visited {width: 35px; height: 26px; position: relative;z-index: 1; padding: 10px; display: block;} #bandeau-panier i {background:url(../images/icone-panier.svg) no-repeat center center; background-size:contain; display:block; width: 100%; height:100%; filter: brightness(0) invert(13%) sepia(61%) saturate(3770%) hue-rotate(225deg) brightness(95%) contrast(88%); } #bandeau-panier span {color:#838384; font-size: 17px; font-weight: 600; position: absolute; z-index: 11; right: 16px; top: 5px; text-align: center; width: 18px;} /* Elements du bandeau */ #bandeau-elements > div { display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bandeau-elements .bandeau-contact .bouton {border: 1px solid #1f3789; font-size: 15px; padding: 5px 15px !important; margin:0 10px; min-height: 35px !important;} /* Telephone */ #bandeau-elements #bandeau-telephone a, #bandeau-elements #bandeau-telephone a:visited {font-size: 17px; color:#1f3789; background: #fff; } #bandeau-elements #bandeau-telephone a > span {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bandeau-elements #bandeau-telephone a > span span {flex:1;} #bandeau-elements #bandeau-telephone i { width:17px; height:17px; margin-right: 10px; background:url(../images/icone-telephone-o.svg) no-repeat center center; background-size:contain;display:block; filter: invert(13%) sepia(61%) saturate(3770%) hue-rotate(225deg) brightness(95%) contrast(88%); } #bandeau-elements #bandeau-telephone a:hover {background:#1f3789; color:#fff} #bandeau-elements #bandeau-telephone a:hover i {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);} #bandeau-elements #bandeau-devis a, #bandeau-elements #bandeau-devis a:visited {background:#1f3789; color:#fff; background-clip: padding-box;} #bandeau-elements #bandeau-devis a:hover {background:#fff; color:#1f3789;} #bandeau-elements #bandeau-email {display: none;} #bandeau-elements #bandeau-email a, #bandeau-elements #bandeau-email a:visited {background:#1f3789; color:#fff; background-clip: padding-box;} #bandeau-elements #bandeau-email i { width:17px; height:17px; background:url(../images/icone-mail-o.svg) no-repeat center center; background-size:contain;display:block; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);} #bandeau-elements #bandeau-email a:hover {background:#fff; color:#1f3789;} #bandeau-elements #bandeau-email a:hover i { filter: invert(13%) sepia(61%) saturate(3770%) hue-rotate(225deg) brightness(95%) contrast(88%); } #bandeau-recherche { box-sizing: border-box; padding-right: 25px; height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bandeau-recherche form {width: 200px;} #bandeau-recherche .loupe {text-decoration:none; border-bottom: 1px solid #1f3789; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #bandeau-recherche button {border:none; display:block; cursor:pointer; width:16px; height:16px; margin-left: 10px; background:url(../images/icone-loupe.svg) no-repeat center left; background-size: contain; filter: brightness(0) invert(13%) sepia(61%) saturate(3770%) hue-rotate(225deg) brightness(95%) contrast(88%);} #bandeau-recherche input {border: none; color: #1f3789; font-size: 16px; font-weight: 500; font-family: 'Poppins'; padding: 5px 0; max-width: calc(100% - 26px);} #bandeau-recherche input::-webkit-input-placeholder {opacity:1; color: #1f3789; font-size: 16px; font-weight: 500; font-family: 'Poppins'; font-style: italic;} #bandeau-recherche input::-moz-placeholder {opacity:1; color: #1f3789; font-size: 16px; font-weight: 500; font-family: 'Poppins'; font-style: italic;} #bandeau-recherche input:-ms-input-placeholder {opacity:1; color: #1f3789; font-size: 16px; font-weight: 500; font-family: 'Poppins'; font-style: italic;} #bandeau-recherche input:-moz-placeholder {opacity:1; color: #1f3789; font-size: 16px; font-weight: 500; font-family: 'Poppins'; font-style: italic;} /* MENU */ /* Menu niveau 1 */ #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{position:relative; z-index:30; height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #menu .menu-element { display:inline-block; vertical-align:top; position:relative; z-index:30; height:100%; margin:0 25px; } #menu #menu-1 {margin-left:0; } #menu #menu-2 {margin-right:0; } #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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; 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: #1f388a; text-align: center; height:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #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:16px; font-weight: 500; height: 100%; position:relative; padding: 10px 5px 15px; -webkit-box-sizing:border-box; box-sizing:border-box; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; 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 horizontal LIGNE SOUS MENU **/ #menu .menu-element .menu-element-contenu > a > span > span::after, #menu .menu-element .menu-element-contenu > span > span::after {content:""; position: absolute; height: 3px; width: 0; background-color: #175ba7; bottom: 0px; left: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #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: block; width: 100%; } /** SINON **/ #menu .menu-element.selected .menu-element-contenu > span, #menu .menu-element.selected .menu-element-contenu > a > span, #menu .menu-element:hover .menu-element-contenu > a > span, #menu .menu-element:hover .menu-element-contenu > span {} #menu .menu-element:hover .smenu-conteneur { animation : affichageSousMenu 150ms linear 250ms 1 forwards; } @keyframes affichageSousMenu { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } } /* Sous menu niveau 1 */ #menu .smenu-conteneur {visibility: hidden; opacity: 0; position:absolute; left:0px; z-index:200; width:350px; min-height:20px; padding-top: 1px;} #menu .smenu-conteneur .global {padding:5px 0 !important; background: #fff; box-shadow: 0 4px 5px rgba(0,0,0,0.2);} #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:#1D71B8; } #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:#1D71B8;} #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:#1f388a; text-align:center; padding:8px 10px 7px ; width: 100%; font-size:15px; position: relative; z-index: 2; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing:border-box; } #menu .smenu-element > a > span::after, #menu .smenu-element > span::after {content:"\f105"; font-family:FontAwesome; font-size:21px; color:#1D71B8; margin-left: 0; opacity:0; right:25px; top: 0; height: 100%; -webkit-transition: margin 300ms ease 0ms; -moz-transition: margin 300ms ease 0ms; -ms-transition: margin 300ms ease 0ms; -o-transition: margin 300ms ease 0ms; transition: margin 300ms ease 0ms; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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 {color:#1D71B8; } #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:#183c69; display:block; padding:5px 5px 5px 15px; font-size:13px; position:relative; } #menu .ssmenu-element > a > span i, #menu .ssmenu-element > span i {display: inline-block; vertical-align: top; line-height: 15px; } #menu .ssmenu-element > a > span > span, #menu .ssmenu-element > span > span {display: inline-block; vertical-align: top; width: calc(100% - 20px); margin-left: 5px; line-height: 15px; } #menu .ssmenu-element.selected > span, #menu .ssmenu-element:hover > span , #menu .ssmenu-element.selected > a > span, #menu .ssmenu-element:hover > a > span {color:#fff; } @media all and (max-width:1760px) { #bandeau-langues-conteneur {left: -90px;} } @media all and (max-width:1695px) { #bandeau-langues-conteneur {left: -60px;} } @media all and (max-width:1625px) { #bandeau-contact > .global { max-width: 1600px;} #bandeau-langues-conteneur { margin: 12px 10px 0; grid-row: 1; grid-column: col-start 6 / span 2; position: relative; left: unset; top: unset;} } @media all and (max-width:1585px) { #bandeau-contact > .global{ padding: 0 10px; } } @media all and (max-width:1480px) { #bandeau-langues-conteneur { margin: 12px 15px 0; grid-column: col-start 5 / span 3;} #bandeau-recherche { grid-column: col-start 8 / span 5;} #bandeau-elements { grid-column: col-start 13 / span 11;} #menu-conteneur { grid-column: col-start 5 / span 20;} } @media all and (max-width:1300px) { #menu .menu-element { margin: 0 15px;} } @media all and (max-width:1180px) { #bandeau.sm #menu .menu-element, #menu .menu-element { margin: 0 10px;} #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, #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: 15px;} } @media all and (max-width:1160px) { .lg {height: 160px;} .sm {height:90px; } #bandeau-langues-conteneur { grid-column: col-start 6 / span 3;} #bandeau-recherche {height: auto; margin-top: 5px;} #bandeau-recherche form {width: 100%;} #menu-conteneur { grid-column: col-start 3 / span 22;} #bandeau:not(.sm) #bandeau-recherche { grid-column: col-start 9 / span 5; margin-top: 7px;} #bandeau:not(.sm) #bandeau-elements { margin: 7px 10px 0; grid-column: col-start 13 / span 11;} } @media all and (max-width:1120px) { #bandeau.sm #bandeau-recherche { grid-column: col-start 12 / span 3;} #bandeau.sm #bandeau-recherche form { width: 160px;} #bandeau.sm #bandeau-elements .bandeau-contact .bouton { padding: 5px 10px !important;} #bandeau.sm #bandeau-elements .bandeau-contact a, #bandeau.sm #bandeau-elements .bandeau-contact a:visited {font-size: 13px;} } @media all and (max-width:1105px) { #menu > .global {padding:0;} #bandeau:not(.sm) #bandeau-logo {grid-row: 1; height: auto;} #bandeau:not(.sm) #menu-conteneur {grid-column: col-start 1 / span 24;} #bandeau:not(.sm) #bandeau-elements .bandeau-contact .bouton { padding: 5px 10px !important;} #bandeau:not(.sm) #bandeau-elements .bandeau-contact a, #bandeau:not(.sm) #bandeau-elements .bandeau-contact a:visited {font-size: 14px;} #bandeau:not(.sm) #bandeau-panier a, #bandeau:not(.sm) #bandeau-panier a:visited { width: 30px; height: 23px; } #bandeau:not(.sm) #bandeau-panier span { right: 14px; font-size: 15px;} #bandeau:not(.sm) #menu > .global { -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around;} } @media all and (max-width:990px) { .lg {height: 180px;} .sm { height: 105px;} #bandeau-elements .bandeau-contact .bouton { margin: 0 5px;} #bandeau:not(.sm) #bandeau-langues-conteneur { grid-column: col-start 6 / span 3;} #bandeau:not(.sm) #bandeau-recherche { grid-column: col-start 9 / span 5;} #bandeau.sm #bandeau-logo {grid-row:1;} #bandeau.sm #bandeau-recherche { grid-column: col-start 11 / span 5;} #bandeau.sm #bandeau-langues-conteneur { grid-column: col-start 6 / span 3;} #bandeau.sm #bandeau-recherche {grid-column: col-start 9 / span 5;} #bandeau.sm #bandeau-elements { margin: 7px 5px 0; grid-column: col-start 14 / span 10;} #bandeau.sm #menu-conteneur { grid-column: col-start 1 / span 24;} #bandeau.sm #menu > .global { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly;} @media all and (max-width:960px) { #bandeau:not(.sm) #bandeau-langues-conteneur { grid-column: col-start 6 / span 4; } #bandeau:not(.sm) #bandeau-recherche {grid-row: 2; padding: 0 10px 0 0; grid-column: col-start 20 / span 5;} #bandeau:not(.sm) #bandeau-elements { grid-column: col-start 9 / span 15;} #bandeau:not(.sm) #menu-conteneur { grid-row: 3; height: 46px;} #menu .menu-element { margin: 0 10px;} } @media all and (max-width:930px) { #bandeau.sm #bandeau-logo { grid-column: col-start 1 / span 3;} #bandeau.sm #bandeau-langues-conteneur { grid-column: col-start 4 / span 4;} #bandeau.sm #bandeau-recherche { grid-column: col-start 8 / span 5;} #bandeau.sm #bandeau-recherche form { width: 140px;} #bandeau.sm #bandeau-elements { grid-column: col-start 12 / span 12;} } @media all and (max-width:890px) { #bandeau.sm #menu .menu-element, #menu .menu-element { margin: 0 7px;} } @media all and (max-width:840px) { #bandeau.sm #menu .menu-element, #menu .menu-element { margin: 0 5px;} #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, #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;} } @media all and (max-width:780px) { /* Bandeau */ .noscroll #bandeau-contact #logo, .noscroll #bandeau-contact #bandeau-elements {display:none; } #bandeau.sm #bandeau-haut, #bandeau.sm #bandeau-contact #logo, #bandeau.sm #bandeau-contact #bandeau-langues-conteneur, #bandeau.sm #bandeau-contact #bandeau-elements {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-recherche {left: unset; right: 53px; top: 2px; } #bandeau.sm #bandeau-panier {left: unset; right: 3px; top: 2px; } #bandeau-contact {opacity:1; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #bandeau-contact > .global {display:block;} .lg { height: 170px; } .sm { height: 35px; border:none; } #bandeau-panier { position: absolute; left: 5px; top: 36px; z-index: 50; margin: 0;} #bandeau-panier a, #bandeau-panier a:visited { padding: 10px 5px;} #bandeau-panier span { right: 9px !important;} #bandeau-langues-conteneur {position: absolute; right: 5px; top: 5px; margin: 0; width: 30px; z-index: 50;} #bandeau-recherche {position: absolute; left: 5px; top: 5px; padding: 0 !important; margin: 0 !important; z-index: 50;} #bandeau-recherche form {padding:5px; width: auto !important;} #bandeau-recherche .loupe {border:none;} #bandeau-recherche input {display: none;} #bandeau-recherche button { width: 21px; height: 21px; margin:0; padding:5px;} #bandeau-logo {height: auto !important; position: relative; z-index: 10; } #bandeau #logo {float:none; padding:3px 0 0; margin:0 auto; width: 100%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} #bandeau #logo a img {height:auto; width:100%; margin: 0 auto; max-width: 225px;} #bandeau-elements { margin: 0 !important;} #bandeau-elements #bandeau-devis {display: none;} #bandeau-elements #bandeau-email {display: block;} /* bas */ /* Menu mobile */ #bandeau-mobile {min-width: inherit; width: 120px; height: 30px; padding: 5px; margin: 0px; position: absolute; left: 5px; bottom: 2px; z-index: 99999; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bandeau-mobile.open {left: 10px; top: 0; bottom:unset; } #bandeau-mobile.open span, #bandeau.sm #bandeau-mobile span {display:none; } #bandeau-mobile span {color: #000; text-transform: uppercase; font-size: 15px; flex:1; margin-left: 10px;} #bandeau-mobile .hamburger {position: relative; display: inline-block; width: 24px; height: 1px; color: #000; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #000; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #bandeau-mobile .hamburger::before, #bandeau-mobile .hamburger::after { content: ''; width: 24px; height: 1px; background: #000; position: absolute; left: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; 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: #37342a; top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } #bandeau-mobile .hamburger.active::after {background: #37342a; bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); 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; -webkit-transition: transform 0.5s; -khtml-transition: transform 0.5s; -moz-transition: transform 0.5s; -ms-transition: transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; -webkit-transform: translateX(-100%); -khtml-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); overflow: hidden; } #bandeau #menu-conteneur.open {display: block; -webkit-transform: translateX(0%); -khtml-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } #bandeau #menu-wrapper {padding: 0 10px 10px; overflow-y: scroll; margin-top: 40px; height:calc(100% - 50px); } #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:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; -webkit-box-align:center; -ms-flex-align:center; align-items:center;} #menu .menu-element .menu-element-contenu > i { cursor:pointer; display: block; color:#125ba7; 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:#000; 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:#125ba7; } #menu > .global #barre-menu {display:none;} #menu .menu-element:hover .smenu-conteneur { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; 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;} #menu .smenu-conteneur .global {padding: 0 !important; box-shadow: unset;} #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; text-align: left; -webkit-box-pack: start; -ms-flex-pack: start; 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:#125ba7; color:#fff; } #menu .ssmenu-element > a > span, #menu .ssmenu-element > span {padding:5px 0 10px 20px; } #menu .ssmenu-element.selected > span, #menu .ssmenu-element:hover > span , #menu .ssmenu-element.selected > a > span, #menu .ssmenu-element:hover > a > span {color:#125ba7;} } @media all and (max-width:480px) { #bandeau-haut .global {justify-content: center;} #bandeau #logo a img { max-width: 195px;} #bandeau-elements { margin: 15px 0 0 !important;} } @media all and (max-width:435px) { #bandeau #logo a img { max-width: 185px;} #bandeau-elements .bandeau-contact i { width: 17px; height: 17px;} #bandeau-elements #bandeau-telephone i {width: 15px; height: 15px;} } @media all and (max-width:385px) { #bandeau-mobile {left: 5px; width: 74px; } #bandeau-mobile span {display: none; } #bandeau-elements #bandeau-telephone i {display: none;} }