@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::    STUDIO PUBLINOVES     :::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/* ========================================================= */
/* ======================= FOOTER ========================== */
/* ========================================================= */

.footer-principal {
display: block;
position: relative;
width: 100%;
background-color: #061b20;
color: var(--theme-blanc);
font-family: var(--theme-typo-texte);
box-sizing: border-box;
}

/* ========================================================= */
/* ==================== Footer-Grille ====================== */
/* ========================================================= */

.footer-principal-grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"adresse contact appel"
"acces navigation legal";
column-gap: 10%;
row-gap: 70px;
width: 85%;
/*max-width: 1200px;*/
padding-left: 100px;
margin-left: auto;
margin-right: auto;
padding-top: 34px;
padding-bottom: 70px;
box-sizing: border-box;
}

.footer-principal-adresse {
grid-area: adresse;
}

.footer-principal-contact {
grid-area: contact;
}

.footer-principal-appel {
grid-area: appel;
}

.footer-principal-acces {
grid-area: acces;
}

.footer-principal-navigation {
grid-area: navigation;
}

.footer-principal-legal {
grid-area: legal;
}

@media screen and (max-width: 1100px) {
.footer-principal-grille {
width: 88%;
column-gap: 7%;
row-gap: 55px;
}
}

@media screen and (max-width: 900px) {
.footer-principal-grille {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"adresse contact"
"appel acces"
"navigation legal";
width: 88%;
column-gap: 8%;
row-gap: 45px;
padding-left: 50px;
}
}

@media screen and (max-width: 700px) {
.footer-principal-grille {
grid-template-columns: 1fr;
grid-template-areas:
"adresse"
"contact"
"appel"
"acces"
"navigation"
"legal";
width: 90%;
row-gap: 30px;
padding-top: 28px;
padding-bottom: 50px;
padding-left: 0px;
}
}

/* ========================================================= */
/* ==================== Footer-Blocs ======================= */
/* ========================================================= */

.footer-principal-bloc,
.footer-principal-liste {
display: block;
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.footer-principal ul {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ========================================================= */
/* ==================== Footer-Titre ======================= */
/* ========================================================= */

.footer-principal-titre {
display: flex;
align-items: flex-end;
gap: 18px;
margin-bottom: 28px;
}

@media screen and (max-width: 700px) {
.footer-principal-titre {
margin-bottom: 18px;
}
}

/* ========================================================= */
/* ==================== Footer-Icone ======================= */
/* ========================================================= */

.footer-principal-icone {
display: flex;
align-items: flex-end;
justify-content: center;
width: 30px;
padding-bottom: 5px;
border-bottom: 2px solid var(--theme-beige);
box-sizing: border-box;
}

.footer-principal-icone img {
display: block;
width: auto;
max-width: 30px;
height: 30px;
object-fit: contain;
}

/* ========================================================= */
/* ================= Footer-Titre-Texte ==================== */
/* ========================================================= */

.footer-principal-titre h2,
.footer-principal-liste h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.2em;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--theme-blanc);
}

@media screen and (max-width: 700px) {
.footer-principal-titre h2,
.footer-principal-liste h3 {
font-size: 15px;
}
}

/* ========================================================= */
/* ==================== Footer-SousTitre =================== */
/* ========================================================= */

.footer-principal-liste h3 {
margin-bottom: 14px;
font-size: 16px;
color: var(--theme-blanc);
}

.footer-principal-liste h3:not(:first-child) {
margin-top: 28px;
}

@media screen and (max-width: 700px) {
.footer-principal-liste h3 {
font-size: 15px;
}
}

/* ========================================================= */
/* ===================== Footer-Lignes ===================== */
/* ========================================================= */

.footer-principal li {
font-size: 15px;
font-weight: 300;
line-height: 1.45em;
color: var(--theme-blanc);
}

@media screen and (max-width: 700px) {
.footer-principal li {
font-size: 14px;
}
}

/* ========================================================= */
/* ====================== Footer-Liens ===================== */
/* ========================================================= */

.footer-principal a {
color: var(--theme-blanc);
text-decoration: none;
transition: color 0.25s ease;
}

.footer-principal a:hover {
color: var(--theme-beige);
}

/* ========================================================= */
/* ================= Footer-Liens-Liste ==================== */
/* ========================================================= */

.footer-principal-liste ul {
display: block;
margin: 0 0 28px 0;
padding: 0;
}

.footer-principal-liste ul:last-child {
margin-bottom: 0;
}

/* ========================================================= */
/* ================= Footer-Liens-Flex ===================== */
/* ========================================================= */

.footer-principal-liste a {
display: flex;
align-items: center;
gap: 10px;
}

/* ========================================================= */
/* ================= Footer-Fleche ========================= */
/* ========================================================= */

.footer-principal-liste a span:first-child {
display: block;
width: 7px;
height: 11px;
flex-shrink: 0;
background-image: url("../images/icones/fleche-beige.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.25s ease;
}

.footer-principal-liste a:hover span:first-child {
transform: translateX(4px);
}

.footer-principal-liste a span:last-child {
display: block;
}

/* ========================================================= */
/* ==================== Footer-Retour ====================== */
/* ========================================================= */

.footer-principal-retour {
position: absolute;
right: 18px;
bottom: 130px;
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background-color: var(--theme-beige);
transition: background-color 0.25s ease;
}

.footer-principal-retour:hover {
background-color: var(--theme-blanc);
}

@media screen and (max-width: 900px) {
.footer-principal-retour {
bottom: 30px;
}
}

@media screen and (max-width: 700px) {
.footer-principal-retour {
right: 14px;
bottom: 20px;
width: 40px;
height: 40px;
}
}

/* ========================================================= */
/* ================== Footer-Retour-SVG ==================== */
/* ========================================================= */

.footer-principal-retour svg {
display: block;
width: 22px;
height: auto;
fill: var(--theme-noir);
}


