header{
padding-top:1rem; padding-bottom:1rem;
position: sticky; top:0;
z-index: 999;
background-color: var(--blanc);
border-bottom: 1px solid var(--ocreclair);
}
.home a.logo{
pointer-events:none;
}
header a.logo svg{
width:100%;
max-width:150px;
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
header a.logo svg path, .home header.scroll a.logo svg path{
fill: var(--vertfonce);
}
.home header a.logo svg path{
fill: var(--blanc);
}
.home header{
position:fixed;
top:0; left:0;
width:100%;
background-color: transparent;
color: var(--blanc);
border-bottom: none;
}
.home header.scroll{
background-color: var(--blanc);
border-bottom: 1px solid var(--ocreclair);
}
header.scroll{
padding-top:0.5rem;
padding-bottom:0.5rem;
}
.home .ico-mobile .trt{
background-color: var(--blanc);
}
.home header.scroll .ico-mobile .trt{
background-color: var(--noir);
}
.ico-mobile{
width:30px; height:30px;
position:absolute; right:2rem; top:50%;
-webkit-transform: translateY(-50%);transform: translateY(-50%);
cursor: pointer;
}
.ico-mobile .trt{
width:100%; height:3px;
background-color: var(--noir);
position:absolute;
left:50%; top:50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
.ico-mobile .trt.un{
margin-top:-8px;
}
.ico-mobile .trt.tr{
margin-top:8px;
}
.ico-mobile.actif .trt.un, .ico-mobile.actif .trt.tr{
margin-top:0
}
.ico-mobile.actif .trt.dx{
opacity:0;
}
.ico-mobile.actif .trt.un{
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
.ico-mobile.actif .trt.tr{
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width:1200px){
.home header{
padding-top:2rem;
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.home header.scroll{
padding-top:0.5rem;
}
header ul{
margin:0; padding:0;
list-style:none;
display: flex;
justify-content: flex-end;
align-items: center;
gap:5px
}
header ul li{
letter-spacing:0.025rem;
font-size:0.75rem;
position:relative;
} 
header ul li a{
display:block;
padding:0.5rem;
color: var(--vertfonce); text-align:center;
position:relative;
}
header ul li a::after{
content:""; display:block;
width:0; height:2px;
background-color: var(--vertfonce);
position: absolute; left:50%; top:95%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header ul li a:hover{
color: var(--verfonce)
}
header ul li a:hover::after{
width:20px;
}
.home header ul li a{
color: var(--blanc);
}
.home header ul li a::after{
background-color: var(--blanc);
}
.home header.scroll ul li a{
color: var(--vertfonce);
}
.home header.scroll ul li a::after{
background-color: var(--vertfonce);
}
header ul ul.sub-menu{
display:none;
position:absolute;
left:50%; top:100%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
background-color: var(--blanc);
padding:1rem;
min-width:150%;
max-width:250%;
border: 1px solid var(--ocre);
border-top:none;
}
header ul ul.sub-menu li{
font-size:0.9rem
}
header ul ul.sub-menu li a{
color: var(--ocre)
}
header ul ul.sub-menu li a:hover{
color: var(--ocreclair)
}
header ul ul.sub-menu li a::after{
background-color: var(--ocre);
}
header .top ul li{
font-size:0.7em;
text-transform: uppercase;
}
header .top .menu-reseaux-container{
margin-left:2rem;
}
header .top .menu-reseaux-container ul li a{
display:block; width:18px; height:18px;
font-size:0; white-space: nowrap;
overflow:hidden; text-indent:101%;
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% auto;
position:relative
}
header .top .menu-reseaux-container ul li a:hover{
-webkit-transform: scale(1.2); transform: scale(1.2);
opacity:.7
}
header .top .menu-reseaux-container ul li a::after{
display: none;
}
header .top .menu-reseaux-container ul li.fbk a{
background-image: url(//sweetwoodhomes.com/wp-content/themes/swh/img/facebook.svg)
}
header .top .menu-reseaux-container ul li.lkd a{
background-image: url(//sweetwoodhomes.com/wp-content/themes/swh/img/linkedin.svg)
}
header .top .menu-reseaux-container ul li.inst a{
background-image: url(//sweetwoodhomes.com/wp-content/themes/swh/img/inst.svg)
}
.home header .top .menu-reseaux-container ul li a{
background-position: top center;
}
.home header.scroll .top .menu-reseaux-container ul li a{
background-position: bottom center;
}
header.scroll a.logo svg{
max-width:100px;
}
}
@media screen and (min-width:1440px){
header ul li{
letter-spacing:0.075rem;
font-size:0.9rem;
}
}
@media screen and (min-width:1680px){
header ul{
gap:8px
}
.home header{
padding-top:2.5rem;
}
}
@media screen and (min-width:1920px){
header ul{
gap:10px
}
header ul li{
font-size:1rem;
}
}