@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
--primary-color: #2887ff;
--primary-color-dark: #2476da;
--text-dark: #0a0a0a;
--text-light: #737373;
--extra-light: #f3f4f6;
--white: #ffffff;
--max-width: 1200px;
--navbar-height:80px;
}

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
img {
display: flex;
width: 100%;
}*/

a {
text-decoration: none;
transition: 0.3s;
}

ul {
list-style: none;
}

html,
body {
scroll-behavior: smooth;
}

body {
font-family: "DM Sans", sans-serif;
}

section {
scroll-margin-top: 90px;
padding:100px 0;
}

h2{
font-size:42px;
font-weight:700;
}

.section-subtitle{
color:#6c757d;
font-size:18px;
margin-top:0;
margin-bottom:50px;
}


.navbar{
padding:20px 0;
}

.navbar-brand{
font-size:22px;
}

.nav-link{
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}

.btn-primary{
background:#2f80ed;
border:none;
padding:10px 24px;
}

.nav-link{
position:relative;
}

.nav-link::after{
content:"";
position:absolute;
width:0;
height:2px;
background:#2f80ed;
left:0;
bottom:-5px;
transition:0.3s;
}

.nav-link:hover::after{
width:100%;
}


.team-photo{
height:260px;
object-fit:cover;
}

/* ========================================================================================================
	HEADER
=========================================================================================================*/
header{
position:relative;
color:#fff;
height: 475px;
display: flex;
align-items: center;
margin-top:calc(var(--navbar-height) + 20px);
}


header::before{
position:absolute;
content:"";
width:calc(100% - 2rem);
height:100%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-image:url(../img/showcase.jpeg);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
border-radius:3rem;
z-index:-1;
}
header h1 {font-size: 6rem;}

.hero-subtitle{
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
margin-bottom:20px;
color:#333;
}

.hero-title{
font-size:65px;
font-weight:800;
line-height:1.1;
margin-bottom:30px;
}



/* =====================================
MENU MOBILE
===================================== */

@media (max-width: 991px){

/* menu déroulant */

.navbar-collapse{
    padding:20px 15px;
    background:#fff;
}


/* liste des liens */

.navbar-nav{
    gap:10px !important;
    border-top:1px solid rgba(0,0,0,0.05);
    margin-top:15px;
    padding-top:15px;
}


/* liens */

.navbar-nav .nav-link{
    font-size:1.1rem;
    padding:12px 0;
}


/* bouton contact */

.navbar .btn{
    width:100%;
    margin-top:20px;
    padding:12px;
    font-size:1rem;
}


/* logo */

.navbar-brand{
    font-size:1.3rem;
}


/* bouton burger */

.navbar-toggler{
    border:none;
}


/* animation ouverture */

.navbar-collapse{
    transition:all .3s ease;
}

}

.social-btn{
width:42px;
height:42px;
border-radius:50%;
background:#f3f3f3;
display:flex;
align-items:center;
justify-content:center;
color:#2f80ed; /* bleu Facebook */
transition:0.3s;
text-decoration:none;
}

.social-btn i{
font-size:18px;
}

.social-btn:hover{
background:#2f80ed;
color:white;
}

/* ========================================================================================================
	SLIDER
=========================================================================================================*/
.slider{
position:relative;
width:100%;
height:500px;
overflow:hidden;
}
.slide{
position:absolute;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
animation:fade 15s infinite;
}
/* décalage dans le temps */
.slide:nth-child(1){animation-delay:0s;}
.slide:nth-child(2){animation-delay:5s;}
.slide:nth-child(3){animation-delay:10s;}
@keyframes fade{
0% {opacity:0;}
10% {opacity:1;}
30% {opacity:1;}
40% {opacity:0;}
100% {opacity:0;}
}



/* =====================================
STAT CARDS
===================================== */

.stat-card{
	background:#fff;
	border-radius:12px;
	transition:all .3s ease;
	border:2px solid rgba(0,0,0,0.08);
}

.stat-card:hover{
	transform:translateY(-8px);
	box-shadow:0 20px 40px rgba(0,0,0,0.09);
}

.stat-number{
font-size:3rem;
font-weight:700;
color:#2f80ed;
margin-bottom:10px;
}

.stat-label{
color:#6c757d;
margin:0;
}

.stat-number sup{
	font-size:0.5em;
	position:relative;
	top:-0.6em;
}

.stat-card:hover .stat-number{
	transform:scale(1.1);
}

.stat-number{
	transition:transform .3s ease;
}


/* ==============================
   GALLERY MASONRY
============================== */

.gallery-masonry{
column-count:3;
column-gap:1rem;
}

.gallery-masonry img{
width:100%;
margin-bottom:1rem;
border-radius:12px;
display:block;

transition:transform .3s ease, box-shadow .3s ease;
}

.gallery-masonry img:hover{
transform:scale(1.03);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}


@media (max-width:992px){

.gallery-masonry{
column-count:2;
}

}

@media (max-width:576px){

.gallery-masonry{
column-count:1;
}

}


.contact-section{
background:#f8f9fa;
}

.contact-offices{
position:relative;
margin-bottom:60px;
}

/* trait vertical central */

.contact-offices::before{
content:"";
position:absolute;
top:10px;
bottom:10px;
left:50%;
width:1px;
background:#e5e5e5;
transform:translateX(-50%);
}

/* icône */

.office-icon{
font-size:28px;
margin-bottom:10px;
color:#555;
}

/* espacements */

.contact-office{
padding:0 30px;
}

.office-icon{
transition:0.3s;
}

.office-icon:hover{
color:#0d6efd;
}


.contact-item{
display:flex;
align-items:center;
gap:15px;
margin-bottom:20px;
}

.contact-icon{
width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

background:#2f80ed;
color:white;

border-radius:50%;

font-size:22px;
}


#backToTop{
position:fixed;
bottom:30px;
right:30px;

width:45px;
height:45px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(40,40,40,0.85);
color:#fff;

border-radius:50%;
font-size:20px;

text-decoration:none;

opacity:0;
visibility:hidden;

transition:0.3s;

z-index:1000;
}

#backToTop.show{
opacity:1;
visibility:visible;
}

#backToTop:hover{
background:rgba(0,0,0,0.9);
}




.footer{
background:#fff;
}

/* trait aligné container */

.footer-divider{
margin-bottom:25px;
border-color:#575656;
}

/* icônes réseaux */

.social-link{

width:46px;
height:46px;

display:inline-flex;
align-items:center;
justify-content:center;

background:#f1f1f1;

border-radius:50%;

font-size:18px;

color:#555;

margin:0 6px;

text-decoration:none;

transition:all 0.3s;
}

/* hover couleur */

.social-link:hover{
background:#0d6efd;
color:white;
}

/* lien mentions */

.footer-link{
color:#555;
text-decoration:none;
}

.footer-link:hover{
text-decoration:underline;
}