header{
position: sticky;
top:0;
background-color: var(--blanc);
z-index:999;
border-bottom:1px solid transparent;
}
header .inner{
-webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
header.scroll .inner{
padding-top:0.5rem;
padding-bottom: 0;
}
header a.logo{
width:152px;
-webkit-transition: all 0.5s ease; transition: all 0.5s ease;
background: url(//www.cisn-residenceslocatives.immo/wp-content/themes/cisn-residences/img/logo-header.svg) no-repeat center / contain;
}
header.scroll a.logo{
width:120px;
}
header .icomobile{
width:40px; height: 40px;
position: relative;
}
header .icomobile .trt{
position: absolute;
left:50%; top:50%;
width:70%; height: 4px;
background-color: var(--bleufonce);
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease; transition: all 0.5s ease;
border-radius:2px;
}
header .icomobile .trt.un{
margin-top: -8px;
}
header .icomobile .trt.tr{
margin-top: 8px;
}
header .contrast{
display: inline-block;
width:34px; height: 34px;
border-radius: 50%;
background: var(--gris) url(//www.cisn-residenceslocatives.immo/wp-content/themes/cisn-residences/img/contrast.svg) no-repeat center / 20px;
cursor:pointer;
}
header .contrast:hover, header .contrast.active{
background-color: var(--bleu);
-webkit-transform: scale(1.1); transform: scale(1.1);
}
header .search a{
display: inline-block;
width:34px; height: 34px;
border-radius: 50%;
background: var(--jaune) url(//www.cisn-residenceslocatives.immo/wp-content/themes/cisn-residences/img/loupe.svg) no-repeat center / 17px;
}
header .search a:hover{
background-color: var(--bleu);
-webkit-transform: scale(1.1); transform: scale(1.1);
}
header .icomobile.active .trt.un, header .icomobile.active .trt.tr{
opacity:0;
width:0;
}
header .icomobile.active .trt.dx{
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
header .icomobile.active .trt.dxb{
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
.home header a.logo{
pointer-events: none
}
.recherche{
display: none;
text-align: center;
padding:1rem 0;
background-color: var(--bleufonce);
color: var(--blanc);
}
.recherche form{
display: flex;
align-items: center
}
.recherche input[type=search]{
background-color: transparent;
border:1px solid var(--bleu);
color: var(--bleu);
padding:0.5rem 1rem;
width:calc(100% - 2rem);
max-width:500px;
font-size:1.5rem;
}
.recherche input[type=search]::placeholder{
color: var(--bleu)
}
.recherche input[type=submit]{
font-size:1.5rem;
background: none;
color: var(--bleu);
border: none;
padding:1rem;
}
.recherche .close{
width:30px; height: 30px;
border-radius: 50%;
border: 2px solid var(--bleu);
position:relative;
margin-right:1rem;
cursor: pointer;
}
.recherche .close:hover{
background-color: var(--blanc);
}
.recherche .close .trt{
width:60%; height:2px;
background-color: var(--bleu);
position: absolute;
top:50%; left:50%;
}
.recherche .close .trt.un{
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
.recherche .close .trt.dx{
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width: 1200px){
header .inner{
padding-top:1rem;
padding-bottom:1rem;
}
header .navigation ul, header .top ul{
margin: 0; padding:0;
list-style: none;
display: flex;
gap: 0 0.5rem;
}
header .top ul{
gap:0 1rem;
}
header .navigation ul li{
position:relative;
font-weight: bold;
}
header .top ul li{
text-transform: uppercase;
position:relative;
font-weight: 600;
}
header .top, header .navigation{
position:relative;
}
header .top{
z-index: 2;
gap: 0 0.5rem;
}
header .navigation{
z-index: 1;
gap:0 0.5rem;
margin-top:0.75rem;
}
header .top ul li{
font-size: 0.8rem;
font-weight:500;
}
header .top ul li.bold{
font-weight: bold;
}
header .navigation ul li a, header .top ul li a{
display: block;
padding:0.5rem 0.5vw;
color: var(--bleufonce);
}
header .navigation ul li a:hover, header .top ul li a:hover{
color: var(--bleu);
}
header .navigation ul li{
font-size: 1.10rem;
font-weight:bold;
}
header .top ul ul.sub-menu, header .navigation ul ul.sub-menu{
display: none;
position: absolute;
left:50%; top:100%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
background-color: var(--bleufonce);
min-width:250px;
max-width:350px;
padding:1.5rem;
flex-direction: column;
align-items: stretch;
}
header .top ul ul.sub-menu::before, header .navigation ul ul.sub-menu::before{
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #FFFFFF transparent transparent transparent;
position:absolute;
left:50%; top:0;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
}
header .top .certif{
width: 54px;
display:inline-block;
}
header .top ul ul.sub-menu li, header .navigation ul ul.sub-menu li{
text-transform: none;
font-weight: 500;
font-size:0.8rem;
}
header .top ul ul.sub-menu li a,  header .navigation ul ul.sub-menu li a{
color: var(--blanc);
}
header .top ul ul.sub-menu li a:hover, header .navigation ul ul.sub-menu li a:hover{
color: var(--bleu);
}
header .top a.connexion{
display: flex;
align-items: center;
padding:0.5rem 1rem;
border-radius: 2rem;
background-color: #B3E8FF;
color: var(--bleufonce);
text-transform: uppercase;
font-size:0.8rem;
gap:0 5px;
}
header .top a.connexion:hover{
background-color: var(--bleu);
color: var(--blanc)
}
}
@media screen and (min-width:1440px){
header .inner{
padding :0.5rem 0;
}
header .top{
gap: 0 1rem;
}
header .navigation, header .navigation ul, header .top ul{
gap: 0 1rem;
}
}
@media screen and (min-width:1920px){
header .top{
gap: 0 2rem;
}
header .navigation, header .navigation ul, header .top ul{
gap: 0 2rem;
}
}
@media screen and (min-width:1921px){
}