/* =====================================
   CONTACT PAGE — PREMIUM / RESPONSIVE
   VERSION GREEN + PINK
===================================== */

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

.contact-page{
    position:relative;
    padding:clamp(64px, 8vw, 96px) 0;
}

/* =====================================
   HERO
===================================== */

.contact-hero{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-bottom:34px;
}

.contact-hero .section-label{
    display:inline-flex;
    width:auto;
    max-width:max-content;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    padding:10px 22px;
    border:1px solid rgba(242,143,182,0.28);
    border-radius:999px;
    background:rgba(255,255,255,0.58);
    color:#c85f94;
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.18em;
    text-transform:uppercase;
}

.contact-hero h1{
    margin:0;
    max-width:14ch;
}

.contact-intro{
    max-width:760px;
    margin:0;
    font-size:clamp(1rem,1.2vw,1.05rem);
    line-height:1.75;
    color:var(--text-soft);
}

/* =====================================
   LAYOUT
===================================== */

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,0.92fr);
    gap:30px;
    align-items:start;
}

.contact-main,
.contact-side{
    min-width:0;
}

.contact-side{
    display:flex;
    flex-direction:column;
    gap:28px;
}

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

.contact-card{
    position:relative;
    overflow:hidden;
    padding:34px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,0.97) 0%,
        rgba(255,246,250,0.96) 52%,
        rgba(245,255,249,0.95) 100%
    );
    border:1px solid rgba(233,200,214,0.58);
    border-radius:32px;
    box-shadow:
        0 24px 58px rgba(84,54,65,0.09),
        0 10px 24px rgba(118,166,139,0.06);
}

.contact-card-large{
    min-height:100%;
}

.contact-card-head{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:26px;
}

.contact-card-head h2{
    margin:0;
    font-size:clamp(1.35rem,2vw,1.72rem);
}

.contact-card-head p{
    margin:0;
    line-height:1.72;
    color:var(--text-soft);
}

/* =====================================
   INFOS GRID
===================================== */

.contact-infos-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

/* activité et ville prennent toute la largeur */

.contact-info-box:nth-child(1),
.contact-info-box:nth-child(2){
    grid-column:1 / -1;
}

.contact-info-box{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:22px;
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(220,231,225,0.95);
    border-radius:22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.76),
        0 10px 18px rgba(118,166,139,0.04);
}

.contact-info-box:nth-child(even){
    border-color:rgba(236,208,220,0.95);
}

.contact-info-label{
    color:#9c8a8d;
    font-size:0.82rem;
    font-weight:700;
}

.contact-info-value{
    color:var(--text);
    font-size:1rem;
    font-weight:800;
}

/* =====================================
   SOCIAL LINKS
===================================== */

.contact-social-box{
    padding:0;
}

.contact-social-link{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:70px;
    padding:18px 20px;
    color:var(--text);
    text-decoration:none;
    border-radius:22px;
    transition:all .25s ease;
}

.contact-social-link:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.55);
}

.contact-social-icon{
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:16px;
}

.contact-social-icon svg{
    width:22px;
    height:22px;
    fill:#fff;
}

.contact-social-icon-facebook{
    background:#1877f2;
}

.contact-social-icon-instagram{
    background:radial-gradient(circle at 30% 105%,
        #fdf497 0%,#fdf497 14%,#fd5949 38%,#d6249f 62%,#285aeb 100%);
}

/* =====================================
   BUTTON FIX
===================================== */

.contact-card .btn{
    width:100%;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:900px){

    .contact-layout{
        grid-template-columns:1fr;
    }

}

@media (max-width:680px){

    .contact-page{
        padding:54px 0 48px;
    }

    .contact-infos-grid{
        grid-template-columns:1fr;
    }

    .contact-info-box{
        grid-column:auto;
    }

}

@media (max-width:480px){

    .contact-page{
        padding:46px 0 42px;
    }

    .contact-card{
        padding:20px;
        border-radius:22px;
    }

    .contact-info-box{
        padding:16px;
        border-radius:16px;
    }

}