/* ==========================================================
   HEADER
========================================================== */

.site-header{
    background:#ffffff;
    border-bottom:1px solid #d9e3eb;
}

.header-content{
    height:92px;
}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
}

.brand-logo{
    width:72px;
    height:72px;
    display:block;
}

.brand-name{
    font-size:2rem;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--color-primary);
}


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

nav ul{
    display:flex;
    align-items:center;
    gap:46px;
    list-style:none;
    margin:0;
    padding:0;
}

nav a{
    color:var(--color-primary);
    font-size:1rem;
    font-weight:500;
    transition:.2s;
}

nav a:hover{
    color:var(--color-secondary);
}


/* ==========================================================
   CONTENU
========================================================== */

.content-panel h1{
    font-size:2.6rem;
    margin-bottom:2.6rem;
    color:var(--color-primary);
}

.content-panel h2{
    font-size:2rem;
    margin:3.2rem 0 1.2rem;
    color:var(--color-primary);
}

.content-panel p{
    margin:0 0 1.4rem;
    line-height:1.8;
    text-align:justify;
}

blockquote{
    margin:2rem 0;
    padding:1rem 1.5rem;
    border-left:4px solid #d8a63b;
    background:#f7fafc;
    font-style:italic;
    color:var(--color-secondary);
}

.signature{
    margin-top:2rem;
    font-weight:700;
    color:var(--color-primary);
}


/* ==========================================================
   FORMULAIRE DE CONTACT
========================================================== */

.contact-form{
    max-width:640px;
    margin-top:2rem;
}

.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:1.4rem;
}

.form-group label{
    margin-bottom:.45rem;
    font-size:.95rem;
    font-weight:600;
    color:var(--color-primary);
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:12px 14px;
    font-size:1rem;
    font-family:inherit;
    color:var(--color-primary);
    background:#ffffff;
    border:1px solid #cfd8e3;
    border-radius:4px;
    transition:border-color .2s ease, box-shadow .2s ease;
    box-sizing:border-box;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--color-secondary);
    box-shadow:0 0 0 3px rgba(92,132,173,.18);
}

.contact-form textarea{
    min-height:220px;
    resize:vertical;
}

.contact-form button{
    display:inline-block;
    padding:14px 28px;
    margin-top:.5rem;
    background:var(--color-primary);
    color:#ffffff;
    border:none;
    border-radius:4px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}

.contact-form button:hover{
    background:var(--color-secondary);
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer{
    background:var(--color-primary);
    color:#ffffff;
}

.footer-band{
    height:52px;
    background:url("../images/bande-footer.png") center/cover no-repeat;
}

.footer-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px 20px 18px;
}

.footer-links{

    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;

    gap:90px;

    margin:0 0 14px 0;
    padding:0;

    list-style:none;

}

.footer-links li{
    list-style:none;
}

.footer-links a{

    color:#ffffff;
    text-decoration:none;

    font-size:.90rem;
    font-weight:400;

    white-space:nowrap;

    transition:color .2s ease;

}

.footer-links a:hover{
    color:var(--color-secondary);
}

.footer-copyright{
    margin-top:6px;
    font-size:.80rem;
    color:rgba(255,255,255,.72);
    text-align:center;
    letter-spacing:.03em;
}

.footer-separator{
    height:50px;
}

.footer-separator img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}