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

.page{
    max-width:900px;
    margin:60px auto;
    padding:20px;
}

.page h1{
    text-align:center;
    font-size:36px;
    margin-bottom:10px;
}

.page p{
    text-align:center;
    opacity:.75;
    margin-bottom:40px;
    line-height:1.6;
}

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

form{
    display:flex;
    flex-direction:column;
    gap:18px;

    background:var(--card);
    padding:35px;
    border-radius:15px;

    border:1px solid rgba(0,0,0,.05);
}

/* INPUTS */

input,
select,
textarea{
    width:100%;

    padding:14px 16px;

    border:1px solid rgba(0,0,0,.1);
    border-radius:10px;

    background:var(--bg);
    color:var(--text);

    font-size:15px;

    transition:.3s;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#C9A86A;
    box-shadow:0 0 0 3px rgba(201,168,106,.15);
}

/* TEXTAREA */

textarea{
    resize:vertical;
    min-height:120px;
}

/* BOUTON */

button[type="submit"]{
    background:#C9A86A;
    color:#000;

    border:none;
    border-radius:10px;

    padding:15px;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

button[type="submit"]:hover{
    transform:translateY(-2px);
    opacity:.95;
}

/* ================= ALERTES ================= */

.success{
    background:#d4edda;
    color:#155724;

    padding:15px;
    border-radius:10px;

    margin-bottom:20px;
}

.error{
    background:#f8d7da;
    color:#721c24;

    padding:15px;
    border-radius:10px;

    margin-bottom:20px;
}

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

@media(max-width:768px){

    .page{
        margin:30px auto;
        padding:15px;
    }

    .page h1{
        font-size:28px;
    }

    form{
        padding:25px;
    }

}