/* ========================= CONTACT PRINCIPAL ========================== */

.contact-layout{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-areas:
"identity form"
"siret form"
"map form";
gap:28px 40px;
margin-top:35px;
align-items:start;
}

/* ========================= IDENTITE ========================== */

.contact-identity{
grid-area:identity;
display:grid;
grid-template-columns:180px 1fr;
gap:28px;
align-items:center;
}

/* ========================= PHOTO ========================== */

.contact-photo{
width:180px;
height:180px;
object-fit:cover;
border-radius:12px;
display:block;
}

/* ========================= INFORMATIONS ========================== */

.contact-details{
display:grid;
gap:16px;
}

.contact-detail{
display:grid;
gap:4px;
}

.contact-detail span{
color:var(--muted);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.12em;
}

.contact-detail a{
color:var(--green2);
font-size:13px;
text-decoration:none;
}

.contact-detail a:hover{
color:#008CFF;
}

/* ========================= SIRET ========================== */

.contact-siret{
grid-area:siret;
padding:10px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}

.contact-siret span{
color:var(--muted);
font-size:10px;
font-weight:700;
letter-spacing:.12em;
}

.contact-siret strong{
color:#888;
font-size:11px;
font-weight:500;
letter-spacing:.08em;
}

/* ========================= CARTE ========================== */

.contact-map{
grid-area:map;
width:100%;
height:230px;
border-radius:12px;
border:1px solid var(--line);
overflow:hidden;
}

.contact-map-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
}

/* ========================= CARTE GOOGLE ========================== */

.contact-map iframe{
width:100%;
height:100%;
border:0;
display:block;
}

/* ========================= FORMULAIRE ========================== */

.contact-form-area{
grid-area:form;
display:flex;
flex-direction:column;
height:100%;
}

/* ========================= TITRE FORMULAIRE ========================== */

.contact-form-title{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}

.contact-form-title::before,
.contact-form-title::after{
content:"";
height:1px;
background:var(--line);
flex:1;
}

.contact-form-title span{
color:var(--muted);
font-size:10px;
font-weight:700;
letter-spacing:.12em;
}

/* ========================= CHAMPS FORMULAIRE ========================== */

.contact-form{
margin:0;
width:100%;
display:flex;
flex-direction:column;
flex:1;
}

.contact-form textarea{
flex:1;
}

/* ========================= BOUTON FORMULAIRE ========================== */

.contact-form .btn:hover{
background:rgba(0,140,255,.16);
border-color:#008CFF;
color:#008CFF;
box-shadow:0 0 12px rgba(0,140,255,.18);
}