@charset "utf-8";

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


/* ========================================================= */
/* ===================== PRE-FOOTER ======================== */
/* ========================================================= */


.pre-footer {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: var(--theme-bleu-marine);
font-family: var(--theme-police);
}

@media screen and (max-width: 700px) {
.pre-footer {
grid-template-columns: 1fr;
}
}

/*  -------------------------------------  PRE-FOOTER - Colonnes  */

.pre-footer-colonne {
position: relative;
min-height: 95px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 25px 5%;
color: var(--theme-blanc);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
text-decoration: none;
transition: color 0.3s ease;
}

@media screen and (max-width: 1100px) {
.pre-footer-colonne {
min-height: 88px;
gap: 16px;
font-size: 1.05rem;
padding: 22px 4%;
}
}

@media screen and (max-width: 900px) {
.pre-footer-colonne {
min-height: 82px;
gap: 14px;
font-size: 1rem;
padding: 20px 4%;
}
}

@media screen and (max-width: 700px) {
.pre-footer-colonne {
min-height: 74px;
gap: 14px;
font-size: 0.98rem;
padding: 18px 8%;
text-align: left;
justify-content: flex-start;
}
}

/*  -------------------------------------  PRE-FOOTER - Icônes  */

.pre-footer-icone {
width: 42px;
height: 42px;
display: block;
object-fit: contain;
flex-shrink: 0;
filter: none;
transition: filter 0.3s ease, transform 0.3s ease;
}

@media screen and (max-width: 1100px) {
.pre-footer-icone {
width: 38px;
height: 38px;
}
}

@media screen and (max-width: 900px) {
.pre-footer-icone {
width: 35px;
height: 35px;
}
}

@media screen and (max-width: 700px) {
.pre-footer-icone {
width: 34px;
height: 34px;
}
}

/*  -------------------------------------  PRE-FOOTER - Séparateurs  */

.pre-footer-colonne::after {
content: "";
position: absolute;
top: 18%;
right: 0;
width: 1px;
height: 64%;
background-color: var(--theme-blanc);
}

.pre-footer-colonne:last-child::after {
display: none;
}

@media screen and (max-width: 700px) {
.pre-footer-colonne::after {
display: none;
}
}

/*  -------------------------------------  PRE-FOOTER - Hover  */

.pre-footer-colonne:hover {
color: var(--theme-bronze);
}

.pre-footer-colonne:hover .pre-footer-icone {
filter: brightness(0) invert(1);
transform: scale(1.04);
}

/* ========================================================= */
/* ======================= FOOTER ========================== */
/* ========================================================= */

.footer-base {
width: 100%;
display: grid;
grid-template-columns: 28% 28% 44%;
padding: 35px 4% 60px 4%;
background-color: #f7f6f5;
border-bottom: 3px solid var(--theme-bronze);
font-family: var(--theme-police);
}

@media screen and (max-width: 1100px) {
.footer-base {
grid-template-columns: 30% 30% 40%;
padding: 55px 3%;
}
}

@media screen and (max-width: 900px) {
.footer-base {
grid-template-columns: 1fr 1fr;
gap: 45px 0;
padding: 50px 5%;
}
}

@media screen and (max-width: 700px) {
.footer-base {
grid-template-columns: 1fr;
padding: 45px 7%;
}
}

/*  -------------------------------------  FOOTER - Colonnes  */

.footer-colonne {
position: relative;
padding: 0 12%;
border-right: 1px solid rgba(91, 91, 90, 0.18);
}

@media screen and (max-width: 1100px) {
.footer-colonne {
padding: 0 9%;
}
}

@media screen and (max-width: 900px) {
.footer-colonne {
padding: 0 8%;
}
}

@media screen and (max-width: 700px) {
.footer-colonne {
padding: 0;
border-right: none;
}
}

.footer-colonne-realisations {
border-right: none;
}

@media screen and (max-width: 900px) {
.footer-colonne-realisations {
grid-column: 1 / 3;
}
}

@media screen and (max-width: 700px) {
.footer-colonne-realisations {
grid-column: auto;
}
}

/*  -------------------------------------  FOOTER - Identité  */

.footer-identite {
margin-bottom: 32px;
}

.footer-identite-marque {
margin: 0;
color: var(--typo-bleu-marine);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.footer-identite-activite {
margin: 6px 0 0;
color: var(--typo-bleu-marine);
font-size: 0.83rem;
font-weight: 400;
line-height: 1.4;
}

.footer-identite::after {
content: "";
display: block;
width: 40px;
height: 2px;
margin-top: 14px;
background-color: var(--theme-bronze);
}

/*  -------------------------------------  FOOTER - Titres  */

.footer-titre {
margin: 0 0 10px;
color: var(--typo-bleu-marine);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.footer-titre::after {
content: "";
display: block;
width: 40px;
height: 2px;
margin-top: 16px;
background-color: var(--theme-bronze);
}

/*  -------------------------------------  FOOTER - Présentation  */

.footer-sous-titre {
margin: 0 0 34px;
color: var(--theme-bronze);
font-size: 0.82rem;
}

.footer-texte {
max-width: 90%;
margin: 0 0 30px;
color: var(--typo-bleu-marine);
font-size: 0.83rem;
line-height: 1.9;
font-weight: 300;
}

.footer-metiers {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 0 18px;
color: var(--typo-bleu-marine);
font-size: 0.84rem;
font-weight: 500;

}

/*  -------------------------------------  FOOTER - Contact  */

.footer-contact {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 0px;

}

.footer-contact-lien {
display: grid;
grid-template-columns: 20px auto;
align-items: center;
column-gap: 6px;
color: var(--typo-bleu-marine);
font-size: 0.84rem;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-contact-lien:hover {
color: var(--theme-bronze);
}

.footer-contact-lien img {
width:30px;
height: 30px;
display: block;
margin: 0 auto;
object-fit: contain;
margin-left: -10px;
}

.footer-metiers {
margin: 0 0 15px;
}


/*  -------------------------------------  FOOTER - Réseaux Sociaux  */

.footer-reseaux {
position: relative;
display: flex;
align-items: center;
gap: 24px;
margin-top: 18px;
padding-top: 18px;
}

.footer-reseaux::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 38px;
height: 2px;
background-color: var(--theme-bronze);
}

.footer-reseau-lien {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-reseau-lien:hover {
opacity: 0.7;
transform: translateY(-2px);
}

.footer-reseau-lien img {
width: 28px;
height: 28px;
display: block;
object-fit: contain;
margin-left: -10px;
}


/*  -------------------------------------  FOOTER - Navigation  */

.footer-navigation-liste {
display: flex;
flex-direction: column;
margin: 32px 0 0;
padding: 0;
list-style: none;
}

.footer-navigation-liste li {
border-bottom: 1px solid rgba(91, 91, 90, 0.16);
}

.footer-navigation-liste a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
color: var(--typo-bleu-marine);
font-size: 0.86rem;
text-decoration: none;
transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-navigation-liste a:hover {
padding-left: 8px;
color: var(--theme-bronze);
}

/*  -------------------------------------  FOOTER - Réalisations  */

.footer-realisations-grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px 24px;
margin-top: 32px;
}

@media screen and (max-width: 900px) {
.footer-realisations-grille {
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (max-width: 700px) {
.footer-realisations-grille {
grid-template-columns: 1fr 1fr;
gap: 24px 18px;
}
}

.footer-realisation {
display: block;
color: var(--typo-bleu-marine);
font-size: 0.78rem;
text-decoration: none;
}

.footer-realisation picture {
display: block;
width: 100%;
overflow: hidden;
background-color: #f4f4f4;
}

.footer-realisation img {
width: 100%;
aspect-ratio: 1.45 / 1;
display: block;
object-fit: cover;
opacity: 0.86;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-realisation:hover img {
opacity: 1;
transform: scale(1.04);
}


.footer-realisation span {
display: inline-block;
position: relative;
margin-top: 10px;
padding-bottom: 8px;
color: var(--typo-bleu-marine);
transition: color 0.3s ease;
}

.footer-realisation span::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 22px;
height: 2px;
background-color: var(--theme-bronze);
transition: width 0.3s ease;
}

.footer-realisation:hover span {
color: var(--theme-bronze);
}

.footer-realisation:hover span::after {
width: 38px;
}


/*  -------------------------------------  FOOTER - Retour Accueil  */

.footer-retour-accueil {
position: absolute;
top: -10px;
right: 4%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--theme-bronze);
border-radius: 50%;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-retour-accueil:hover {
background-color: var(--theme-bleu-marine);
transform: translateY(-3px);
}

.footer-retour-accueil-icone {
width: 28px;
height:28px;
display: block;
object-fit: contain;
}


/* ========================================================= */
/* ==================== AFTER-FOOTER ======================= */
/* ========================================================= */

.after-footer {
width: 100%;
padding: 14px 4%;
background-color: var(--theme-bleu-marine);
font-family: var(--theme-police);
}

@media screen and (max-width: 1100px) {
.after-footer {
padding: 14px 4%;
}
}

@media screen and (max-width: 900px) {
.after-footer {
padding: 16px 5%;
}
}

@media screen and (max-width: 700px) {
.after-footer {
padding: 18px 7%;
}
}

/*  -------------------------------------  AFTER-FOOTER - Texte  */

.after-footer-texte {
margin: 0;
color: var(--theme-blanc);
font-size: 0.72rem;
font-weight: 300;
line-height: 1.6;
text-align: center;
}

@media screen and (max-width: 700px) {
.after-footer-texte {
font-size: 0.68rem;
}
}

.after-footer-texte span {
display: inline;
}