:root{

--blue:#002555;
--gold:#e4d8ac;

}

@font-face {

    font-family: "Brother Signature";

    src: url("../fonts/Brother Signature.otf") format("opentype");

    font-weight: normal;

    font-style: normal;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:"Montserrat", sans-serif;

}




.header{

height:100px;

background:var(--blue);

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 8%;

position:relative;

z-index:10;

}



.logo-box{

background:transparent;

padding:0;

border-radius:0;

box-shadow:none;

}



.logo-box img{

height:95px;

width:auto;

display:block;

}






.hero{


min-height:90vh;

background:
linear-gradient(#002555ee,#002555ee),
url("../images/arras.jpg");

background-size:cover;

display:flex;

align-items:center;

justify-content:space-between;

padding:80px 10%;

overflow:hidden;

}



.hero-content{

max-width:600px;

color:white;

}


.tag{

color:var(--gold);

letter-spacing:4px;

margin-bottom:20px;

}



h1{

font-size:70px;

line-height:1;

}



.hero p{

font-size:20px;

margin:30px 0;

}

h1,
.hero h1,
.logo-title{

font-family:"Brother Signature";

font-weight:400;

letter-spacing:2px;

}

.gold-title{

font-family:"Brother Signature", cursive;

font-size:90px;

line-height:.95;

font-weight:400;

color:#e4d8ac;

text-shadow:
0 0 10px rgba(228,216,172,.25);

animation:goldGlow 4s ease-in-out infinite;

}


@keyframes goldGlow{


0%{

color:#e4d8ac;

text-shadow:
0 0 8px rgba(228,216,172,.25);

}


50%{

color:#fff2b8;

text-shadow:
0 0 18px rgba(228,216,172,.65),
0 0 35px rgba(228,216,172,.25);

}


100%{

color:#e4d8ac;

text-shadow:
0 0 8px rgba(228,216,172,.25);

}


}


.gold-btn{

background:var(--gold);

color:var(--blue);

padding:18px 35px;

border-radius:50px;

text-decoration:none;

font-weight:bold;

}




.hero-photo{

width:500px;
height:500px;

border-radius:40px;

overflow:hidden;

box-shadow:
0 30px 60px #0008;

transform:rotate(5deg);

}


.hero-photo img{

width:100%;
height:100%;

object-fit:cover;

transition:.6s;

}



.hero-photo:hover img{

transform:scale(1.08);

}



.tiles div{

height:180px;

background:var(--gold);

border:8px solid white;

box-shadow:0 20px 40px #0005;

}



.choose{

padding:100px 8%;

text-align:center;

}



.choose h2{

font-size:45px;

color:var(--blue);

margin-bottom:60px;

}



.agency-grid{

display:flex;

gap:40px;

justify-content:center;

flex-wrap:wrap;

}



.agency-card{

width:420px;

height:500px;

position:relative;

overflow:hidden;

border-radius:30px;

text-decoration:none;

}



.agency-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.contact-top{

margin-bottom:35px;

}


.page-top{

width:100%;

padding:30px 0 0 10%;

}







.agency-card div{

position:absolute;

bottom:25px;

left:25px;

right:25px;

background:rgba(0,37,85,0.85);

backdrop-filter:blur(8px);

padding:25px;

border-radius:25px;

color:white;

text-align:left;

border:1px solid #e4d8ac55;

}



.agency-card:hover img{

transform:scale(1.1);

}




footer{

background:var(--blue);

color:white;

padding:30px;

text-align:center;

}

/* CONTACT PREMIUM */


.contact-hero{


min-height:90vh;

background:var(--blue);

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

padding:100px 10%;

align-items:center;


}





.contact-text{

color:white;

}



.contact-text h1{

font-family:"Brother Signature", cursive;

font-size:80px;

color:var(--gold);

line-height:1;

margin:20px 0;


}





.contact-info{

display:flex;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}



.contact-info div{


background:#ffffff15;

border:1px solid #e4d8ac55;

padding:25px;

border-radius:20px;


}



.contact-info h3{

color:var(--gold);

margin-bottom:10px;

}







.contact-card{


background:white;

padding:45px;

border-radius:35px;

box-shadow:0 30px 80px #0007;


}





.contact-card form{

display:flex;

flex-direction:column;

gap:12px;

}




.contact-card label{


font-weight:600;

color:var(--blue);


}




.contact-card input,
.contact-card textarea{


border:1px solid #ddd;

padding:15px;

border-radius:15px;

font-family:Montserrat;


}




.contact-card textarea{

height:130px;

resize:none;

}




.contact-card button{


border:none;

background:var(--blue);

color:white;

padding:18px;

border-radius:50px;

font-weight:bold;

cursor:pointer;


}



.contact-card .call{


background:var(--gold);

color:var(--blue);

}




@media(max-width:900px){


.contact-hero{

grid-template-columns:1fr;

}


.contact-text h1{

font-size:55px;

}


}

.contact-card button{


border:none;

cursor:pointer;

font-family:"Montserrat";

font-weight:600;

}



.main-btn{


background:var(--blue);

color:white;

padding:18px;

border-radius:50px;


}




.callback-box{


margin-top:40px;

padding-top:35px;

border-top:2px solid var(--gold);

text-align:center;


}




.callback-box h2{


font-family:"Brother Signature";

font-size:45px;

color:var(--blue);

margin-bottom:10px;


}



.callback-box p{


color:#555;

margin-bottom:20px;


}



.callback-box input{


width:100%;

padding:15px;

border-radius:30px;

border:1px solid #ddd;

margin-bottom:15px;


}




.callback-btn{


background:var(--gold);

color:var(--blue);

padding:16px 40px;

border-radius:50px;


}

.callback-box{

margin-top:45px;

background:#ffffff10;

border:1px solid #e4d8ac55;

padding:30px;

border-radius:25px;

backdrop-filter:blur(10px);

}



.callback-box h2{

font-family:"Brother Signature", cursive;



font-weight:400;

color:var(--gold);

margin-bottom:10px;

letter-spacing:1px;

}



.callback-box p{

color:white;

font-family:"Montserrat", sans-serif;

font-size:15px;

margin-bottom:20px;

opacity:.9;

}



.callback-line{


display:flex;

gap:15px;


}



.callback-line input{


flex:1;

padding:15px;

border-radius:30px;

border:none;

font-family:Montserrat;


}



.callback-line button{


background:var(--gold);

color:var(--blue);

border:none;

padding:15px 30px;

border-radius:30px;

font-weight:700;

cursor:pointer;


}



@media(max-width:700px){

.callback-line{

flex-direction:column;

}

}

.story{


display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

padding:100px 10%;

align-items:center;

background:white;


}



.story-text h2{


font-family:"Brother Signature", cursive;

font-size:65px;

font-weight:400;

color:var(--blue);

line-height:1;


}



.story-text p:not(.tag){

font-family:"Montserrat", sans-serif;

line-height:1.8;

color:#555;

margin:25px 0;


}



.tag.dark{

color:var(--blue);

}





.story-image{


height:550px;

border-radius:40px;

overflow:hidden;

box-shadow:0 30px 60px #0003;

}



.story-image img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;


}



.story-image:hover img{


transform:scale(1.05);


}




@media(max-width:900px){


.story{

grid-template-columns:1fr;

}


.story-text h2{

font-size:50px;

}


}

.story-agencies{


display:flex;

flex-direction:column;

gap:25px;


}



.mini-agency{


height:240px;

border-radius:30px;

overflow:hidden;

position:relative;

text-decoration:none;

box-shadow:0 25px 50px #0003;


}



.mini-agency img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;


}



.mini-agency::after{


content:"";

position:absolute;

inset:0;

background:linear-gradient(
transparent,
rgba(0,37,85,.85)
);


}




.mini-agency div{


position:absolute;

bottom:25px;

left:30px;

z-index:2;

color:white;


}



.mini-agency h3{


font-family:"Brother Signature", cursive;

font-size:50px;

font-weight:400;

color:var(--gold);

margin:0;


}



.mini-agency p{


margin:5px 0 0;

font-family:"Montserrat";


}




.mini-agency:hover img{


transform:scale(1.08);


}

/* =========================
   PAGE REALISATIONS
========================= */


.realisation{

background:var(--blue);

min-height:100vh;

padding:80px 10%;

color:white;

text-align:center;

}





.realisation .tag{

color:var(--gold);

letter-spacing:4px;

font-family:"Montserrat", sans-serif;

font-weight:600;

}





.realisation h1{


font-family:"Brother Signature", cursive;

font-size:90px;

font-weight:400;

color:var(--gold);

line-height:1;

margin:20px 0 50px;


}





.carousel{


max-width:1100px;

height:650px;

margin:auto;

position:relative;

overflow:hidden;

border-radius:40px;

box-shadow:0 30px 80px #0008;

border:1px solid #e4d8ac55;


}





.slide{


display:none;

height:100%;

position:relative;


}





.slide.active{

display:block;

}





.slide img{


width:100%;

height:100%;

object-fit:cover;


}





/* bloc infos en haut */

.slide-info{


position:absolute;


top:30px;

left:30px;

right:30px;


background:rgba(0,37,85,.88);


backdrop-filter:blur(10px);


padding:25px;


border-radius:25px;


text-align:left;


border:1px solid #e4d8ac55;


z-index:3;


}





.slide-info h2{


font-family:"Brother Signature", cursive;


font-size:45px;


font-weight:400;


color:var(--gold);


margin:0 0 12px;


}





.slide-info p{


font-family:"Montserrat", sans-serif;


color:white;


font-size:15px;


margin:6px 0;


font-weight:600;


}





/* boutons navigation */


.prev,
.next{


position:absolute;


top:50%;


transform:translateY(-50%);


width:60px;


height:60px;


border:none;


border-radius:50%;


background:var(--gold);


color:var(--blue);


font-size:35px;


cursor:pointer;


z-index:5;


transition:.3s;


}





.prev:hover,
.next:hover{


transform:translateY(-50%) scale(1.1);


}





.prev{

left:25px;

}





.next{

right:25px;

}






/* mobile */


@media(max-width:800px){


.realisation{

padding:60px 5%;

}



.realisation h1{

font-size:60px;

}




.carousel{

height:500px;

border-radius:25px;

}




.slide-info{

top:15px;

left:15px;

right:15px;

padding:18px;

}




.slide-info h2{

font-size:35px;

}



.prev,
.next{

width:45px;

height:45px;

font-size:25px;

}


}

/* =====================
   NAVIGATION
===================== */


.navbar{

display:flex;

align-items:center;

gap:30px;

}



.navbar a{

color:white;

text-decoration:none;

font-family:"Montserrat", sans-serif;

font-weight:600;

font-size:14px;

transition:.3s;

}



.navbar a:hover{

color:var(--gold);

}




.dropdown{

position:relative;

}




.drop-btn{

cursor:pointer;

}




.dropdown-menu{


position:absolute;

top:30px;

left:0;


background:white;


min-width:180px;


border-radius:15px;


padding:10px;


box-shadow:0 20px 40px #0003;


opacity:0;

visibility:hidden;


transform:translateY(10px);


transition:.3s;


z-index:50;


}





.dropdown-menu a{


display:block;


color:var(--blue);


padding:12px 15px;


border-radius:10px;


}





.dropdown-menu a:hover{


background:var(--gold);

color:var(--blue);


}





.dropdown:hover .dropdown-menu{


opacity:1;

visibility:visible;

transform:translateY(0);


}
/* ======================
   MENTIONS LEGALES
====================== */


.legal{

background:var(--blue);

min-height:100vh;

padding:70px 10% 100px;

color:white;

}



.legal-container{


max-width:900px;

margin:auto;


background:white;


color:#333;


padding:70px;


border-radius:35px;


box-shadow:0 30px 80px #0005;


}



.legal h1{


font-family:"Brother Signature", cursive;


font-size:80px;


font-weight:400;


color:var(--blue);


text-align:center;


margin-bottom:70px;


}





.legal h2{


font-family:"Montserrat", sans-serif;


font-size:22px;


font-weight:700;


color:var(--blue);


margin-top:55px;


margin-bottom:20px;


padding-bottom:12px;


border-bottom:2px solid var(--gold);


}





.legal p{


font-family:"Montserrat", sans-serif;


font-size:15px;


line-height:1.9;


margin-bottom:22px;


color:#444;


}





.legal strong{


color:var(--blue);

font-weight:700;


}





@media(max-width:800px){


.legal{

padding:40px 5%;

}



.legal-container{

padding:30px 25px;

border-radius:25px;

}



.legal h1{

font-size:60px;

margin-bottom:40px;

}



.legal h2{

font-size:19px;

}


}

.privacy-box{


margin-top:35px;


background:rgba(255,255,255,.08);


border:1px solid var(--gold);


padding:22px;


border-radius:25px;


backdrop-filter:blur(8px);


}



.privacy-title{


font-family:"Montserrat", sans-serif;


font-weight:700;


font-size:15px;


color:var(--gold);


margin-bottom:12px;


}



.privacy-box p{


font-family:"Montserrat", sans-serif;


font-size:13px;


line-height:1.7;


color:white;


margin:0;


}

/* =====================
   PAGES AGENCES
   ARRAS / LILLE
===================== */


.agency-page{

background:var(--blue);

min-height:100vh;

padding:70px 10%;


display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;


}





.agency-photo{


height:650px;

border-radius:40px;

overflow:hidden;

box-shadow:0 30px 70px #0006;


}





.agency-photo img{


width:100%;

height:100%;

object-fit:cover;


transition:.5s;


}




.agency-photo:hover img{


transform:scale(1.05);


}







.agency-content{


color:white;


}






.agency-content .tag{


color:var(--gold);

font-family:"Montserrat", sans-serif;

letter-spacing:4px;

font-weight:700;


}






.agency-content h1{


font-family:"Brother Signature", cursive;


font-size:100px;


font-weight:400;


color:var(--gold);


margin:10px 0 20px;


line-height:1;


}







.agency-text{


font-family:"Montserrat", sans-serif;


font-size:16px;


line-height:1.8;


color:white;


max-width:600px;


}








.agency-infos{


margin:45px 0;


display:flex;

flex-direction:column;


gap:20px;


}







.agency-infos div{


background:rgba(255,255,255,.08);


border:1px solid #e4d8ac55;


padding:20px 25px;


border-radius:22px;


backdrop-filter:blur(8px);


}







.agency-infos h3{


margin:0 0 8px;


font-family:"Montserrat", sans-serif;


font-size:14px;


color:var(--gold);


}







.agency-infos p{


margin:0;


font-family:"Montserrat", sans-serif;


color:white;


}







.agency-content .main-btn{


display:inline-block;


margin-top:10px;


background:var(--gold);


color:var(--blue);


padding:16px 35px;


border-radius:30px;


text-decoration:none;


font-family:"Montserrat", sans-serif;


font-weight:700;


transition:.3s;


}






.agency-content .main-btn:hover{


transform:translateY(-3px);


box-shadow:0 10px 30px #e4d8ac66;


}







@media(max-width:900px){



.agency-page{


grid-template-columns:1fr;


padding:50px 5%;


}




.agency-photo{


height:450px;


}




.agency-content h1{


font-size:70px;


}



}

.burger{
  display:none;
}