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

.contact-page{
    background:
        radial-gradient(circle at top left,#5f120d 0%,transparent 45%),
        linear-gradient(135deg,#140707,#080808);
    color:#fff;
    min-height:100vh;
}


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

.contact-hero{

    position:relative;

    height:360px;

    background:
        linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
        radial-gradient(circle at top left,#8c120c 0%,transparent 45%),
        url("/images/accueil/champion.jpg");

    background-size:cover;
    background-position:center top;

    display:flex;
    align-items:center;
}

.contact-container{

    width:min(1200px,92%);
    margin:auto;
}

.contact-kicker{

    color:#d83b2d;

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:700;
}

.contact-hero h1{

    font-size:72px;

    line-height:.95;

    font-weight:900;

    margin:15px 0;
}

.contact-hero h1 span{

    display:block;

    color:#d83b2d;
}

.contact-hero p{

    width:520px;
    max-width:100%;

    color:#ddd;

    font-size:20px;
}


/* ======================================================
   SECTION
====================================================== */

.contact-section{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    padding:90px 0;
}


/* ======================================================
   PANELS
====================================================== */

.contact-info-panel,
.contact-form-panel{

    background:#111;

    border-radius:18px;

    padding:45px;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.contact-info-panel h2,
.contact-form-panel h2{

    font-size:36px;

    margin-bottom:25px;
}

.contact-info-panel p{

    color:#cfcfcf;

    line-height:1.8;
}


/* ======================================================
   DETAILS
====================================================== */

.contact-detail{

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin-top:35px;
}

.contact-detail span{

    font-size:28px;
}

.contact-detail strong{

    display:block;

    margin-bottom:6px;

    color:#fff;
}


/* ======================================================
   SOCIALS
====================================================== */

.contact-socials{

    display:flex;

    gap:18px;

    margin-top:45px;
}

.contact-socials a{

    width:50px;
    height:50px;

    border-radius:50%;

    background:#d83b2d;

    color:#fff;

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

    text-decoration:none;

    transition:.3s;
}

.contact-socials a:hover{

    transform:translateY(-5px);

    background:#fff;

    color:#d83b2d;
}


/* ======================================================
   FORM
====================================================== */

.contact-form-panel form{

    margin-top:20px;
}

.contact-field{

    margin-bottom:28px;
}

.contact-field label{

    display:block;

    margin-bottom:10px;

    font-weight:700;

    color:#fff;
}

.contact-field input,
.contact-field textarea{

    width:100%;

    border:none;

    outline:none;

    background:#1b1b1b;

    color:white;

    padding:16px 18px;

    border-radius:12px;

    border:2px solid transparent;

    transition:.3s;
}

.contact-field input:focus,
.contact-field textarea:focus{

    border-color:#d83b2d;

    background:#202020;
}

.contact-field textarea{

    min-height:180px;

    resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{

    color:#888;
}


/* ======================================================
   ERRORS
====================================================== */

.error{

    border-color:#ff4d4d !important;
}

.error-message{

    color:#ff7676;

    margin-top:8px;

    font-size:14px;
}


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

.contact-submit{

    border:none;

    background:linear-gradient(135deg,#d83b2d,#b72216);

    color:white;

    padding:16px 32px;

    border-radius:12px;

    font-weight:700;

    font-size:16px;

    transition:.3s;

    cursor:pointer;
}

.contact-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(216,59,45,.35);
}


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

@media(max-width:992px){

.contact-section{

    grid-template-columns:1fr;

    padding:70px 0;
}

.contact-hero{

    height:320px;
}

.contact-hero h1{

    font-size:54px;
}

}

@media(max-width:650px){

.contact-hero{

    height:280px;
}

.contact-hero h1{

    font-size:42px;
}

.contact-info-panel,
.contact-form-panel{

    padding:30px;
}

.contact-socials{

    justify-content:center;
}

}