#bandeau {padding:0; width:100%; box-sizing:border-box; background:#FFFFFF; font-size: 13px; position:sticky; top:0px; z-index:999; overflow-anchor:none; transition: height 280ms ease, box-shadow 280ms ease; /*overflow-x: clip;*/ } #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 #logo a img {max-width: 120px; image-rendering: initial; } #bandeau.sm #bandeau-elements {padding: 5px 0;} #bandeau.sm {--bandeau-sm-menu-font-scale: 0.88;} #bandeau.sm #bandeau-elements .bandeau-contact a, #bandeau.sm #bandeau-elements .bandeau-contact a:visited { font-size: 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: calc(15px * var(--bandeau-sm-menu-font-scale)); } /* Bandeau non réduit */ #bandeau-conteneur {position: relative; z-index: 400; height:100%; width:100%; box-sizing:border-box; max-width: 1920px; margin: 0 auto;} #bandeau-contact {position:relative; z-index:40; height: 100%;} #bandeau-contact > .global { position:relative; z-index:40; height: 100%; width:100%; box-sizing:border-box; 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-end;} #bandeau-logo {grid-row: 1 / 3; grid-column: col-start 1 / span 4; height: 100%; overflow: hidden;} #menu-conteneur {grid-row:2; grid-column: col-start 5 / span 20; padding: 10px 0 0; box-sizing: border-box; height: 100%; } #bandeau-elements {grid-row:1; grid-column: col-start 5 / span 20; text-align: right; padding: 26px 0 15px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 130px; box-sizing: border-box; height: 100%;} #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: inline-block; padding: 10px 0; box-sizing: border-box; vertical-align: middle; } #bandeau #logo a img {height:auto; max-height:100%; width:100%; max-width: 195px; } /* Elements du bandeau */ #bandeau-elements > div:not(#bandeau-recherche) { gap: 30px; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #bandeau-elements #bandeau-recherche {width: 185px; height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0; } #bandeau-elements #bandeau-recherche form {width: 100%; } #bandeau-elements #bandeau-recherche .loupe {text-decoration:none; border-bottom: 1px solid var(--primary-color); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px;} #bandeau-elements #bandeau-recherche button {border:none; display:block; cursor:pointer; width: 19px; height: 19px; background:url(../images/icone-loupe.svg) no-repeat center left; background-size: contain; transform: rotate(90deg); opacity: 0.5;} #bandeau-elements #bandeau-recherche input {border: none; color: var(--primary-color); font-size: 15px; font-weight: 400; font-family: var(--primary-font); padding: 5px 0; flex: 1; min-width: 0;} #bandeau-elements #bandeau-recherche input::-webkit-input-placeholder {opacity: 0.5; color: var(--primary-color); font-size: 15px; font-weight: 400; font-family: var(--primary-font); text-transform: lowercase; font-style: italic;} #bandeau-elements #bandeau-recherche input::-moz-placeholder {opacity: 0.5; color: var(--primary-color); font-size: 15px; font-weight: 400; font-family: var(--primary-font); text-transform: lowercase; font-style: italic;} #bandeau-elements #bandeau-recherche input:-ms-input-placeholder {opacity: 0.5; color: var(--primary-color); font-size: 15px; font-weight: 400; font-family: var(--primary-font); text-transform: lowercase; font-style: italic;} #bandeau-elements #bandeau-recherche input:-moz-placeholder {opacity: 0.5; color: var(--primary-color); font-size: 15px; font-weight: 400; font-family: var(--primary-font); text-transform: lowercase; font-style: italic;} #popup-recherche { max-width: 670px; padding: 0px 0px 1px;} #popup-recherche-haut {background: var(--secondary-color); padding:15px 10px 15px 20px; } #popup-recherche-haut > div {min-height:50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse;} #popup-recherche-haut .mfp-close { position:relative; right: unset; top: unset; color: var(--primary-color); opacity: 0.9; } #popup-recherche-haut .titre { font-size: 33px; color: #fff; font-family: var(--secondary-font) } #popup-recherche form {padding:5px 0px; border-bottom:1px solid #dcdcdc; margin: 50px 20px; height: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #popup-recherche form button {border:none; background:none; text-decoration:none; width:31px; height:31px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;} #popup-recherche form i {display:block; cursor:pointer; width:25px; height:25px; background-color: var(--secondary-color); -webkit-mask-image: url('../images/icone-loupe.svg'); mask-image: url('../images/icone-loupe.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center left; mask-position: center left; -webkit-mask-size: contain; mask-size: contain; } #popup-recherche form .input-text {border:none; flex: 1; box-sizing: border-box; height: 31px; padding: 0 10px; font-size: 17px; font-family: var(--primary-font); color: var(--primary-color); box-sizing:border-box;} #popup-recherche form .input-text::-webkit-input-placeholder {opacity:1; font-size: 17px; font-family: var(--primary-font); color: var(--primary-color);} #popup-recherche form .input-text::placeholder {opacity:1; font-size: 17px; font-family: var(--primary-font); color: var(--primary-color);} #popup-recherche form .input-text:-ms-input-placeholder {opacity:1; font-size: 17px;font-family: var(--primary-font); color: var(--primary-color);} #popup-bandeau-compte {max-width: 1040px; padding: 0; border-radius: 12px; overflow: hidden; background: #ffffff;} #popup-bandeau-compte .mfp-close {right: 18px; top: 14px; color: #2f2f2f; opacity: 1; font-size: 40px; font-weight: 300;} #popup-bandeau-compte .popup-bandeau-compte-conteneur {display: flex; min-height: 540px;} #popup-bandeau-compte .popup-bandeau-compte-visuel {width: 46%; background: #171717 url('../images/logo.jpg') no-repeat center center; background-size: cover;} #popup-bandeau-compte .popup-bandeau-compte-formulaire {width: 54%; box-sizing: border-box; padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h2 {margin: 0; font-size: 30px; line-height: 40px; font-weight: 400; color: var(--primary-color); font-family: var(--secondary-font); text-align: center;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h2 em {display:block; font-style: normal; font-weight: 500; font-size: 50px; } #popup-bandeau-compte .popup-bandeau-compte-formulaire h3 {margin: 0; font-size: 15px; line-height: auto; font-weight: 300; font-style:italic; color: var(--secondary-color); text-align: center;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h3::before {display:none;} #popup-bandeau-compte .popup-bandeau-compte-intro {margin: 6px auto 8px; text-align: center; max-width: 390px; color: #c4a45f; font-size: 25px; line-height: 31px; font-family: var(--secondary-font);} #popup-bandeau-compte .popup-bandeau-compte-form {display: flex; flex-direction: column; gap: 10px; margin-top: 10px;} #popup-bandeau-compte .popup-bandeau-compte-champ input {width: 100%; box-sizing: border-box; border: 0; background: #f8f8f8; color: #5f5f5f; padding: 18px 24px; height: 62px; font-size: 21px; line-height: 21px; font-family: var(--tertiary-font); letter-spacing: 0.8px; text-transform: uppercase;} #popup-bandeau-compte .popup-bandeau-compte-champ input::-webkit-input-placeholder {color: #a3a3a3;} #popup-bandeau-compte .popup-bandeau-compte-champ input::placeholder {color: #a3a3a3;} #popup-bandeau-compte .popup-bandeau-compte-mdp-oublie {padding-top: 2px; text-align: left;} #popup-bandeau-compte .popup-bandeau-compte-mdp-oublie a, #popup-bandeau-compte .popup-bandeau-compte-mdp-oublie a:visited {font-size: 16px; color: #666; font-family: var(--primary-font); text-decoration: none; border-bottom: 1px solid transparent;} #popup-bandeau-compte .popup-bandeau-compte-mdp-oublie a:hover {border-bottom-color: #666;} #popup-bandeau-compte .popup-bandeau-compte-submit {margin-top: 8px; width: auto; align-self: flex-start; border: 0; background: none; display: inline-flex; align-items: center; gap: 16px; cursor: pointer; padding: 0; color: var(--primary-color); font-family: var(--tertiary-font); font-weight: 600; letter-spacing: 2px; font-size: 31px; text-transform: uppercase;} #popup-bandeau-compte .popup-bandeau-compte-submit-icone {display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #2f2f2f; color: #fff; font-size: 31px; line-height: 31px;} #popup-bandeau-compte .popup-bandeau-compte-inscription {margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span {display: block; color: var(--primary-color); font-size: 30px; line-height: 33px; font-family: var(--secondary-font); position: relative; padding: 0 22px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span::before, #popup-bandeau-compte .popup-bandeau-compte-inscription span::after {content: ''; position: absolute; top: 50%; width: 110px; height: 1px; background: #cfcfcf;} #popup-bandeau-compte .popup-bandeau-compte-inscription span::before {right: 100%; margin-right: 18px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span::after {left: 100%; margin-left: 18px;} #popup-bandeau-compte .popup-bandeau-compte-inscription a, #popup-bandeau-compte .popup-bandeau-compte-inscription a:visited {color: #c4a45f; font-size: 33px; line-height: 34px; letter-spacing: 1px; font-family: var(--tertiary-font); font-weight: 700; text-decoration: none; text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px;} #popup-bandeau-compte .popup-bandeau-compte-inscription a i {font-style: normal; font-size: 28px; line-height: 28px;} #bandeau .bandeau-contact a, #bandeau .bandeau-contact a:visited {font-weight: 500; font-family: var(--tertiary-font); text-decoration:none; padding: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 200ms ease-out; gap: 7px;} #bandeau .bandeau-contact i {display:block; width: 19px; height: 19px; transition: all 200ms ease-out; background-color: 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; } #bandeau .bandeau-contact a:hover {color: var(--primary-color-soft);} #bandeau .bandeau-contact a:hover i {background-color: var(--primary-color-soft);} #bandeau #bandeau-compte i { -webkit-mask-image: url('../images/icone-user.svg'); mask-image: url('../images/icone-user.svg'); } #bandeau #bandeau-adherer i { width: 15px; -webkit-mask-image: url('../images/icone-plus.svg'); mask-image: url('../images/icone-plus.svg'); } #bandeau #bandeau-ressources a, #bandeau #bandeau-ressources a:visited {padding: 5px 12px; gap: 10px; background: var(--secondary-color); color: #fff; border-radius: 65px; } #bandeau #bandeau-ressources i {width:22px; -webkit-mask-image: url('../images/icone-ressources.svg'); mask-image: url('../images/icone-ressources.svg'); background-color: #fff; } #bandeau #bandeau-ressources a:hover { background: #fff; color: var(--tertiary-color); box-shadow: 0 0 7px rgba(0,0,0,0.25); } #bandeau #bandeau-ressources a:hover i {background-color: var(--tertiary-color);} #bandeau #bandeau-reseaux { height: 100%; text-align:center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } #bandeau #bandeau-reseaux .bandeau-social a, #bandeau #bandeau-reseaux .bandeau-social a:visited {text-align:center; color:var(--primary-color); text-decoration:none; line-height: 27px; transition: color 200ms ease-out;} #bandeau #bandeau-reseaux .bandeau-social i {font-size: 19px; display:block; } #bandeau #bandeau-reseaux .bandeau-social a:hover {color:var(--primary-color-soft); } /* VERSION LISTE DEROULANTE */ #bandeau-langues {margin:0; border:1px solid var(--primary-color); height:100%; position:relative; z-index:550; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 2px; border-radius: 65px; } #bandeau-langues .bandeau-langue { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; font-family: var(--tertiary-font); font-weight: 600; font-size: 13px; color: var(--primary-color); line-height: 13px; letter-spacing: 0.8px; } #bandeau-langues .bandeau-langue a, #bandeau-langues .bandeau-langue a:visited {text-decoration:none; color: var(--primary-color); padding: 5px 10px; box-sizing: border-box;} #bandeau-langues .bandeau-langue span {padding: 5px 10px; box-sizing: border-box;} #bandeau-langues .bandeau-langue.selected {color:#fff; background: var(--primary-color); border-radius: 65px; } /* MENU */ #menu-conteneur, #menu-wrapper, #menu, #menu > .global { min-width: 0;} #menu-wrapper {height:100%; } #menu {list-style:none; margin:0px auto; padding: 0; height:100%; } #menu > .global{position:relative; z-index:30; height:100%; width: 100%; display:flex; flex-wrap:wrap; justify-content: flex-end; align-items: center; gap:10px; padding:0; box-sizing:border-box; } #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; } #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; font-weight: 500; position:relative; padding: 10px 0 10px 30px; box-sizing:border-box; transition: all 150ms ease-out; text-transform: uppercase; letter-spacing: 1.2px; } #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; } @supports not (-webkit-overflow-scrolling: touch) { /* Effect 4: bottom border enlarge */ #menu .menu-element .menu-element-contenu > a > span > span::before, #menu .menu-element .menu-element-contenu > span > span::before { position: absolute; top: 50%; left: 0; width: 20px; height: 1px; background: var(--secondary-color); content: ''; opacity: 0; transition: height 0.3s, opacity 0.3s, transform 0.3s; transform: translateY(-10px); } #menu .menu-element.selected .menu-element-contenu > a > span > span::before, #menu .menu-element.selected .menu-element-contenu > span > span::before, #menu .menu-element:hover .menu-element-contenu > a > span > span::before, #menu .menu-element:hover .menu-element-contenu > span > span::before { height: 2px; opacity: 1; transform: translateY(0px); } } /** 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 {color:var(--secondary-color);} #menu .menu-element.open .smenu-conteneur { opacity: 1; visibility: visible; transition-delay: 250ms; /* délai avant ouverture */} /* #menu > .global #barre-menu {position: absolute; left: 0; bottom: -3px; width: 100%; height: 7px; display: block; padding: 0; overflow: hidden; pointer-events: none; } #menu > .global #barre-menu span {height: 3px; background-color: #d1d4ff; width: 150px; display: block; position: relative; top: 1px; transition: all 400ms ease-in-out; } */ /* 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; background: #fff; width: 350px; box-shadow: 0px 5px 5px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px; box-sizing: border-box; } /* le sous menu de l'avant dernier menu */ #menu > .global > .menu-element:nth-last-child(2) .smenu-conteneur { left: unset !important; right: -115px !important; } #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); text-align:center; padding:6px 5px; width: 100%; font-size:13px; font-family: var(--tertiary-font); font-weight: 600; 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 {color:var(--secondary-color); } #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; transition: margin 300ms ease 0ms; } /* 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 5px 5px 15px; font-size:1 2px; position:relative; } #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:1690px) { #bandeau-contact > .global{ padding: 0 10px;} } @media all and (max-width:1630px) { #menu > .global {gap: 6px;} #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; } #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: calc(14px * var(--bandeau-sm-menu-font-scale)); } } @media all and (max-width:1550px) { #bandeau-logo { grid-column: col-start 1 / span 3;} #bandeau-elements, #menu-conteneur { grid-column: col-start 4 / span 21;} } @media all and (max-width:1480px) { /*#bandeau-logo {grid-row:1;}*/ #bandeau #logo a img {max-width: 145px;} /* #menu-conteneur { grid-column: col-start 1 / span 24;}*/ #menu > .global { padding:0; gap: 10px;} } @media all and (max-width:1360px) { #bandeau-elements {gap: 60px;} } @media all and (max-width:1280px) { #bandeau.sm #logo a img { max-width: 100px;} /*#bandeau-logo { grid-column: col-start 1 / span 5;} #bandeau-elements{ grid-column: col-start 6 / span 19; padding: 10px 0 0px; gap: 5px;} #bandeau-elements > div:not(#bandeau-recherche) { width: 100%; gap: 10px; max-width: calc(100% - 190px); display: grid; grid-template-rows: auto 1fr; grid-template-columns: repeat(24, [col-start] 1fr); justify-content: flex-end; align-items: flex-start;} #bandeau-ressources {grid-row: 1; grid-column: col-start 2 / span 10;} #bandeau-compte {grid-row: 1; grid-column: col-start 12 / span 8;} #bandeau-adherer {grid-row: 2; grid-column: col-start 12 / span 8;} #bandeau #bandeau-reseaux {grid-row: 1; grid-column: col-start 20 / span 5; justify-content: flex-end;} #bandeau-langues-conteneur {grid-row: 2; grid-column: col-start 20 / span 5;}*/ } @media all and (max-width:1230px) { #menu > .global { gap: 6px;} #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 { padding: 10px 0 10px 20px;} #menu .menu-element .menu-element-contenu > a > span > span::before, #menu .menu-element .menu-element-contenu > span > span::before { width: 16px;} } @media all and (max-width:1140px) { /*#bandeau-ressources {grid-row: 1; grid-column: col-start 1 / span 11;}*/ #menu > .global { gap: 4px;} #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 { padding: 10px 0 10px 15px;} #menu .menu-element .menu-element-contenu > a > span > span::before, #menu .menu-element .menu-element-contenu > span > span::before { width: 13px;} } @media all and (max-width:1090px) { /*#bandeau-logo { grid-column: col-start 1 / span 4;} #bandeau-elements{ grid-column: col-start 5 / span 20; } */ #bandeau-elements #bandeau-recherche { width: 155px;} #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: 0.6px; } #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: calc(14px * var(--bandeau-sm-menu-font-scale)); } #menu .smenu-conteneur {width: 290px;} } @media all and (max-width:1040px) { #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;} } @media all and (max-width:1010px) { #menu .menu-element:nth-child(1) .smenu-conteneur {left: -40px !important; right: auto !important; } } @media all and (max-width:990px) { #bandeau-elements #bandeau-ressources, #bandeau-elements #bandeau-adherer {display:none; } /* Bandeau */ .noscroll #bandeau{position: fixed !important; height: 100dvh; } .noscroll #bandeau-contact #bandeau-elements {display:none; } #bandeau.sm #bandeau-contact #logo, #bandeau.sm #bandeau-elements #bandeau-recherche, #bandeau.sm #bandeau-elements #bandeau-reseaux {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 { width: 100%; position: absolute; top: 0px; right: 10px; z-index: 200; height: 35px; padding: 0; } #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-contact {opacity:1; transition: all 400ms ease-in-out; } #bandeau-contact > .global {display:block;} .sm { border:none; height: 35px;} #bandeau-logo {height: auto !important; z-index: 10004; position: relative; } #bandeau #logo {float:none; padding:3px 0 0; margin:0 auto; width: 100%; max-width: 135px; justify-content: center; align-items: flex-start;} #bandeau #logo a img {height:auto; width:100%; margin: 0 auto; } #bandeau-elements { padding: 6px 0;} #bandeau-elements > div:not(#bandeau-recherche) {display:inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 20px; max-width:unset;} #bandeau-elements #bandeau-recherche {width: auto; position: absolute; top: 10px; left: 10px; height: auto; z-index: 10005; } #bandeau-elements #bandeau-recherche .loupe {border:none; gap: 0;} #bandeau-elements #bandeau-recherche input {display:none;} #bandeau #bandeau-reseaux {width: auto; position: absolute; top: 10px; right: 10px; height: auto; z-index: 10005; } #menu > .global .bandeau-contact {margin: 20px 0;} #menu > .global #bandeau-ressources a, #menu > .global #bandeau-ressources a:visited, #menu > .global #bandeau-adherer a, #menu > .global #bandeau-adherer a:visited {font-size: 15px; } /* bas */ /* Menu mobile */ #bandeau-mobile {min-width: inherit; width: 85px; height: 30px; padding: 5px; margin: 0px; position: absolute; left: 5px; bottom: 2px; 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: 100%; 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: 110px; height:calc(100% - 160px); scrollbar-color: var(--primary-color) #fff; scrollbar-width: thin; } #menu > .global {padding: 10px 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::before, #menu .menu-element .menu-element-contenu > span > span::before {left: -15px;} #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 .menu-element:nth-child(1) .smenu-conteneur, #menu > .global > .menu-element:nth-last-child(2) .smenu-conteneur, #menu .smenu-conteneur {margin-top:6px; width:100%; padding:0; visibility: visible; opacity: 1; position:relative; left:0 !important; top:0 !important; right: unset !important; background:none; min-height: 0; display:none; box-shadow:none; border-radius: 0; } #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 {width: 20px; flex: 0 0 20px; transition:none; color:#fff; margin-left:10px;} #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; } #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);} #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 {transition:none; } #menu .menu-element.menu-special .smenu-conteneur {padding:0;} #menu .menu-element.menu-special .smenu-conteneur > .global {padding:0 !important; border-radius: 0; box-shadow: none;} #menu .menu-element.menu-special .smenu-centre {display: block;} #menu .menu-element.menu-special .smenu-centre-menus {display: block; padding: 0;} #menu .menu-element.menu-special .smenu-element {width: 100%; margin: 0px 0 10px; float: none;} #menu .menu-element.menu-special .smenu-element .icone-menu {display: none;} #menu .menu-element.menu-special .smenu-contenu {flex: unset; width: 100%;} #menu .menu-element.menu-special .smenu-element .smenu-nom {height:auto; padding:7px 0 7px 15px;} #menu .menu-element.menu-special .smenu-contenu > a > span, #menu .menu-element.menu-special .smenu-contenu > span {background:none; background: #273b7a;color: #fff!important;font-size: 15px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} #menu .menu-element.menu-special .ssmenu-element > a > span, #menu .menu-element.menu-special .ssmenu-element > span {padding:5px 0 5px 20px;} #menu .menu-element.menu-special .ssmenu-element.selected .smenu-contenu > span, #menu .menu-element.menu-special .ssmenu-element.selected .smenu-contenu > a > span, #menu .menu-element.menu-special .ssmenu-element:hover .smenu-contenu > a > span, #menu .menu-element.menu-special .ssmenu-element:hover .smenu-contenu > span {color: #273b7a;} #menu .ssmenu-conteneur-images {display:none !important; } } @media all and (max-width:435px) { #bandeau #bandeau-reseaux {width: 60px; justify-content: center;} #bandeau #bandeau-reseaux .bandeau-social a, #bandeau #bandeau-reseaux .bandeau-social a:visited { padding: 2px; display: block;} } @media all and (max-width:410px) { #popup-recherche-haut { padding: 15px 5px 15px 10px;} #popup-recherche-haut .titre {font-size: 26px;} #popup-recherche form { margin: 50px 10px;} #bandeau-elements > div:not(#bandeau-recherche) {gap: 10px;} } @media all and (max-width:1080px) { #popup-bandeau-compte {max-width: 920px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire {padding: 40px 34px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h2 {font-size: 52px; line-height: 49px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h3 {font-size: 33px; line-height: 33px;} #popup-bandeau-compte .popup-bandeau-compte-intro {font-size: 21px; line-height: 26px;} #popup-bandeau-compte .popup-bandeau-compte-champ input {height: 56px; font-size: 18px;} #popup-bandeau-compte .popup-bandeau-compte-submit {font-size: 24px;} #popup-bandeau-compte .popup-bandeau-compte-submit-icone {width: 44px; height: 44px; font-size: 26px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span {font-size: 25px; line-height: 28px;} #popup-bandeau-compte .popup-bandeau-compte-inscription a, #popup-bandeau-compte .popup-bandeau-compte-inscription a:visited {font-size: 26px; line-height: 29px;} } @media all and (max-width:820px) { #popup-bandeau-compte .popup-bandeau-compte-conteneur {display: block; min-height: 0;} #popup-bandeau-compte .popup-bandeau-compte-visuel {width: 100%; min-height: 210px; background-position: center top;} #popup-bandeau-compte .popup-bandeau-compte-formulaire {width: 100%; padding: 26px 20px 28px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h2 {font-size: 42px; line-height: 40px;} #popup-bandeau-compte .popup-bandeau-compte-formulaire h3 {font-size: 26px; line-height: 27px;} #popup-bandeau-compte .popup-bandeau-compte-intro {font-size: 18px; line-height: 23px;} #popup-bandeau-compte .popup-bandeau-compte-submit {font-size: 21px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span {font-size: 22px; line-height: 25px;} #popup-bandeau-compte .popup-bandeau-compte-inscription span::before, #popup-bandeau-compte .popup-bandeau-compte-inscription span::after {width: 65px;} #popup-bandeau-compte .popup-bandeau-compte-inscription a, #popup-bandeau-compte .popup-bandeau-compte-inscription a:visited {font-size: 21px; line-height: 24px;} } @media all and (max-width:385px) { #bandeau-mobile {left: 5px; width: 80px; } #bandeau-mobile span {font-size: 15px; } #bandeau-compte i {display: none !important; } } @media all and (max-width:340px) { #bandeau-mobile span {display:none; } }