@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::    STUDIO PUBLINOVES     :::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/* ========================================================= */
/* ======================= HEADER ========================== */
/* ========================================================= */



.header-principal {
width: 100%;
background-color: var(--theme-blanc);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



/*  ------------------------------- Header-Barre  */

.header-principal-barre {
width: 100%;
height: 6px;
background-color: var(--theme-beige);
}

/*  ------------------------------- Header-Conteneur  */
.header-principal-conteneur {
max-width: none;
margin: 0;
padding-left: 70px;
padding-right: 70px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}

@media screen and (max-width: 700px) {

.header-principal-conteneur {
padding-left: 18px;
padding-right: 18px;
align-items: flex-start;
position: relative;
}
}

/*  ------------------------------- Header-Logo  */

.header-principal-logo {
width: 150px;
padding-top: 8px;
}

.header-principal-logo img {
width: 100%;
height: auto;
display: block;
}

@media screen and (max-width: 900px) {

.header-principal-logo {
width: 130px;
}

}

@media screen and (max-width: 700px) {

.header-principal-logo {
width: 110px;
padding-top: 8px;
}

}



/*  ------------------------------- Header-ZoneDroite  */

.header-principal-zone-droite {
flex: 1;
padding-left: 90px;
}

@media screen and (max-width: 900px) {

.header-principal-zone-droite {
padding-left: 50px;
}

}

@media screen and (max-width: 700px) {

.header-principal-zone-droite {
padding-left: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
}

}



/* -------------------------------  Header-Infos  */

.header-principal-infos {
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 22px;
font-size: 17px;
}

.header-principal-infos a {
color: var(--theme-noir);
text-decoration: none;
display: flex;
align-items: center;
gap: 14px;
font-weight: 700;
}

.header-principal-nom {
display: inline-block;
}

@media screen and (max-width: 900px) {

.header-principal-infos {
font-size: 16px;
}

}

@media screen and (max-width: 700px) {

.header-principal-infos {
height: 60px;
padding-top: 0;
padding-bottom: 0;
padding-right: 70px;
font-size: 15px;
gap: 10px;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
}

.header-principal-nom {
display: none;
}

}



/*  ------------------------------- Header-BarreVerticale  */

.header-principal-barre-verticale {
display: inline-block;
font-weight: 300;
font-size: 24px;
line-height: 1;
color: var(--theme-noir);
opacity: 0.65;
}

@media screen and (max-width: 700px) {

.header-principal-barre-verticale {
display: none;
}

}



/*  ------------------------------- Header-IconeTelephone  */

.header-principal-icone-telephone {
width: 22px;
height: 22px;
object-fit: contain;
}

@media screen and (max-width: 700px) {

.header-principal-icone-telephone {
width: 18px;
height: 18px;
}

}



/*  ------------------------------- Header-Separateur  */

.header-principal-separateur {
display: block;
width: 60%;
height: 1px;
margin-top: 5px;
margin-left: auto;
margin-bottom: 8px;
background-color: var(--theme-noir);
opacity: 0.5;
}

@media screen and (max-width: 700px) {

.header-principal-separateur {
width: 60%;
height: 1px;
margin-top: 10px;
margin-bottom: 18px;
margin-left: auto;
}
}


/*  ------------------------------- Header-BoutonMobile  */

.header-principal-bouton {
display: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
}

.header-principal-bouton span {
display: block;
width: 26px;
height: 2px;
margin-bottom: 6px;
background-color: var(--theme-noir);
transition: 0.3s ease;
}

.header-principal-bouton:hover span {
background-color: var(--theme-beige);
}

@media screen and (max-width: 700px) {

.header-principal-bouton {
display: block;
position: absolute;
top: 18px;
right: 0;
width: 32px;
height: 32px;
margin-top: 0;
z-index: 1000;
}

.header-principal-bouton span {
position: absolute;
left: 0;
margin-bottom: 0;
}

.header-principal-bouton span:nth-child(1) {
top: 6px;
}

.header-principal-bouton span:nth-child(2) {
top: 14px;
}

.header-principal-bouton span:nth-child(3) {
top: 22px;
}

.header-principal-bouton.menu-ouvert span:nth-child(1) {
top: 14px;
transform: rotate(45deg);
}

.header-principal-bouton.menu-ouvert span:nth-child(2) {
opacity: 0;
}

.header-principal-bouton.menu-ouvert span:nth-child(3) {
top: 14px;
transform: rotate(-45deg);
}

}



/*  ------------------------------- Header-Navigation  */

.header-principal-navigation {
margin-top: 0;
}

.header-principal-navigation ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: flex-end;
gap: 48px;
}

.header-principal-navigation a {
display: block;
padding-top: 10px;
padding-bottom: 18px;
color: var(--theme-noir);
text-decoration: none;
font-size: 16px;
font-weight: 400;
transition: color 0.3s ease;
}

.header-principal-navigation a:hover {
color: var(--theme-bleu);
}

.header-principal-navigation a.menu-actif {
font-weight: 700;
color: var(--theme-bleu);
}

@media screen and (max-width: 900px) {

.header-principal-navigation ul {
gap: 28px;
}

}

@media screen and (max-width: 700px) {

.header-principal-navigation {
display: block;
position: fixed;
top: 0;
right: 0;
width: 280px;
height: 100vh;
margin-top: 0;
padding-top: 90px;
padding-left: 30px;
padding-right: 30px;
background-color: var(--theme-blanc);
z-index: 999;
box-shadow: -5px 0 20px rgba(0,0,0,0.08);

/* Animation progressive */
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition:
transform 0.4s ease,
opacity 0.4s ease,
visibility 0.4s ease;
}

.header-principal-navigation.menu-ouvert {
transform: translateX(0);
opacity: 1;
visibility: visible;
}


.header-principal-navigation ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}

.header-principal-navigation li {
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.15);
}

.header-principal-navigation a {
width: 100%;
padding-top: 16px;
padding-bottom: 16px;
font-size: 15px;
line-height: 1.4;
}

}