*{
margin: 0;
padding: 0;
box-sizing: border-box;
} body {
font-family: "georgiapro", serif;
color: black;
background-color: white;
} header {
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background: transparent;
z-index: 10;
} nav {
flex: 1;
}
nav ul {
list-style: none;
margin-left: 50px;
display: flex;
gap: 40px;
}
nav a {
font-family: "georgiapro", sans-serif;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-weight: 500;
font-size: 16px;
position: relative;
}
.header-home nav a {
color: white;
}
.header-inner nav a {
color: black;
}
.header-home nav a::after {
background-color: white;
}
.header-inner nav a::after {
background-color: black;
}
nav a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0%;
height: 1px;
transition: width 0.3s ease;
}
nav a:hover::after,
nav li.current-menu-item a::after {
width: 100%;
}
@media (max-width: 768px) {
#menu-principal a {
color: black !important;
}
#menu-principal a::after {
background-color: black !important;
}
} .site-branding {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.site-logo img,
.custom-logo {
width: auto;
display: block;
} .additional-logos {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 30px;
margin-right: 50px;
}
.additional-logos img {
height: 25px;
width: auto;
} @media (max-width: 768px) {
header {
flex-direction: column;
height: auto;
gap: 20px;
padding: 20px;
}
nav ul {
flex-direction: column;
align-items: center;
margin-left: 0;
gap: 20px;
margin-bottom:50px;
}
.additional-logos {
justify-content: center;
margin-right: 0;
}
.site-branding {
order: -1;
}
} .home-hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 0;
}
.home-hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .home-texts-below {
margin-top:75px;
background-color: white;
display: flex;
margin-left:155px;
margin-right:155px;
justify-content:space-between ;
font-family: "georgiapro", sans-serif;
font-weight: 700;
font-style: normal;
}
.home-texts-below h1 {
font-size: 40px;
}
.home-texts-below h2 {
font-size: 40px;
background-color: #58709A;
color: white;
padding:8px;
}
.projets-accueil {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; margin-left: 51px;
margin-right: 51px;
}
.bloc {
flex: 0 0 calc(25% - 15px); text-align: center;
margin-top: 74px;
box-sizing: border-box;
}
.projets-accueil .bloc img {
width: 100%;
height: 460px; object-fit: cover; display: block;
}
.bloc h2{
font-family: "georgiapro", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
margin-top:16px;
}
.bloc p{
font-family: "georgiapro", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
margin-top:5px;
}
.btn-projets{
display: flex;
align-items: center;
justify-content: center;
margin-top:50px;
}
.btn-projets a {
position: relative;
overflow: hidden; text-decoration: none;
color: black;
border: solid 1px black;
padding: 8px 25px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: color 0.3s ease;
}
.btn-projets a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background-color: #58709A; color: white;
z-index: -1;
transition: height 0.4s ease;
}
.btn-projets a:hover::before {
height: 100%;
}
.btn-projets a:hover {
color: white; }
.section-expertises {
display: flex;
justify-content: space-between;
gap: 50px; font-family: "georgiapro", sans-serif;
color: black;
margin-top:80px;
margin-left:51px;
margin-right:157px;
}
.liste-expertises {
flex: 1; padding-left: 20px;
font-weight: 500;
font-size: 18px;
}
.liste-expertises li {
margin-bottom: 15px;
}
.section-expertises > div.txt-expertises {
flex: 1; display: flex;
flex-direction: column;
justify-content: flex-start;
font-weight: 400;
font-size: 16px;
}
.section-expertises h2 {
font-weight: 400;
font-size: 16px;
margin-bottom:20px;
}
.section-expertises h3 {
font-weight: 400;
font-size: 16px;
margin-top:20px;
}
.liste-expertises p {
font-weight: 600;
font-size: 40px;
}
.btn-expertises{
display: flex;
margin-top:20px;
}
.btn-expertises a {
position: relative;
overflow: hidden; text-decoration: none;
color: black;
border: solid 1px black;
padding: 8px 25px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: color 0.3s ease;
}
.btn-expertises a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background-color: #58709A; color: white;
z-index: -1;
transition: height 0.4s ease;
}
.btn-expertises a:hover::before {
height: 100%;
}
.btn-expertises a:hover {
color: white; }
.txt-expertises p{
font-family: "georgiapro", sans-serif;
font-weight: 400;
font-size:16px;
line-height: 140%;
}
.txt-expertises{
margin-top:40px;
text-align: left;
}
.liste-expertises h2 {
position: relative;
padding-left: 25px; }
.liste-expertises h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
background-color: #58709A; }
.projets-accueil a{
text-decoration: none;
}
.home-texts-below {
margin-top: 75px;
background-color: white;
display: flex;
margin-left: 10vw; margin-right: 10vw; justify-content: space-between;
font-family: "georgiapro", sans-serif;
font-weight: 700;
font-style: normal;
}
.home-texts-below h1,
.home-texts-below h2 {
font-size: clamp(30px, 4vw, 40px); white-space: nowrap;
}
.home-texts-below h2 {
background-color: #58709A;
color: white;
padding: 8px;
} @media (max-width: 768px) {
.home-texts-below {
flex-direction: row;
margin-left: 5vw !important; margin-right: 5vw !important;
gap: 20px;
justify-content: space-between;
flex-wrap: wrap;
}
.home-texts-below h1,
.home-texts-below h2 {
white-space: normal;
flex: 1 1 auto;
min-width: 0;
}
.home-texts-below h2 {
padding: 8px 16px !important;
max-width: fit-content;
width: auto;
}
} @media (max-width: 480px) {
.home-texts-below {
flex-direction: column;
margin-left: 16px !important;
margin-right: 16px !important;
gap: 20px;
justify-content: flex-start !important;
margin-top: 40px;
}
.home-texts-below h1,
.home-texts-below h2 {
font-size: 30px !important;
white-space: normal;
}
.home-texts-below h2 {
padding: 8px 16px !important;
max-width: fit-content;
width: auto;
}
} @media (max-width: 1024px) and (min-width: 481px) {
.projets-accueil .bloc {
flex: 1 1 45%; max-width: 45%;
}
}
@media (max-width: 650px){
.projets-accueil .bloc {
flex: 1 1 100%;
max-width: 100%;
}
} @media (max-width: 480px) {
.projets-accueil {
flex-direction: column;
gap: 0px; margin-left: 16px;
margin-right: 16px;
}
.projets-accueil .bloc {
flex: 1 1 100%;
max-width: 100%;
}
}  @media (max-width: 1024px) {
.section-expertises {
flex-direction: column;
margin-left: 16px;
margin-right: 16px;
gap: 30px;
}
.liste-expertises,
.txt-expertises {
flex: none; padding-left: 0;
text-align: left;
}
.liste-expertises p {
font-size: 28px; }
.section-expertises h2,
.section-expertises h3 {
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
}
.txt-expertises {
margin-top: 0;
text-align: left;
}
.btn-expertises {
justify-content: flex-start;
}
} .site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
position: relative;
background: white;
z-index: 10;
} .site-branding {
margin: 0 auto;
z-index: 2;
} @media (max-width: 768px) {
.site-branding {
position: relative;
z-index: 2;
}
.site-header {
justify-content: center;
}
} @media (max-width: 480px) {
.section-expertises {
flex-direction: column;
margin-left: 16px;
margin-right: 16px;
gap: 20px;
}
.liste-expertises p {
font-size: 28px;
}
.section-expertises h2,
.section-expertises h3 {
font-size: 16px;
}
.txt-expertises p {
font-size: 14px;
line-height: 1.4;
}
.menu-burger {
display: block !important;
}
} .menu-burger {
display: none;
cursor: pointer;
z-index: 110;
position: absolute;
top: 40px;
right: 30px;
transition: transform 0.4s ease;
} .menu-burger.cross {
transform: rotate(90deg);
}
.mobile-logos {
display: none;
} @media (max-width: 768px) {
#menu-principal { flex-direction: column;
gap: 50px;
background-color: white;
padding: 20px;
position: fixed; top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 100; justify-content: flex-start;
align-items: center;
padding-top: 200px;  opacity: 0;
pointer-events: none;
transform: translateY(-20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
#menu-principal.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.menu-burger {
display: block;
}
.menu-burger img {
width: 30px;
height: auto;
}
.cross img {
width: 20px;
height: auto;
}
body.no-scroll {
overflow: hidden;
position: fixed;
width: 100vw;
touch-action: none; }
#menu-principal {
z-index: 100; }
.mobile-logos {
display: flex;
gap: 20px;
justify-content: center;
}
.mobile-logos img {
height: 25px;
width: auto;
}
.additional-logos {
display: none; }
}
@media (max-width: 1024px) {
.bloc {
flex: 1 1 100%;
max-width: 100%;
}
}
@media (max-width: 768px) {
nav a::after {
display: none !important;
}
}