/* ===== Page : Contact ===== */

.contact{
    max-width:1240px;
    margin:0 auto;
    padding:40px 60px 50px;
}

.contact__head{
    max-width:620px;
    margin:0 auto 64px;
    text-align:center;
}

.contact__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold-dark);
    margin-bottom:22px;
}
.contact__eyebrow::before,
.contact__eyebrow::after{
    content:"";
    width:30px;
    height:1px;
    background:var(--gold);
}

.contact__title{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(30px, 3.2vw, 42px);
    line-height:1.16;
    color:var(--dark);
}
.contact__title em{
    font-style:italic;
    font-weight:400;
    color:var(--gold-dark);
}

/* --- Alertes de session --- */
.contact__alert{
    max-width:820px;
    margin:0 auto 40px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    font-size:14px;
}
.contact__alert svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    flex-shrink:0;
}
.contact__alert--success{
    background:#F3F8F3;
    border:1px solid #CFE6CF;
    color:#2E5F2E;
}
.contact__alert--error{
    background:#FBF1F1;
    border:1px solid #EBC9C9;
    color:#8C2E2E;
}

/* --- Mise en page générale --- */
.contact__grid{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:50px;
    align-items:start;
}

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

/* --- Carte info hôtel --- */
.hotel-card{
    background:var(--white);
    border:1px solid var(--border);
    overflow:hidden;
}

.hotel-card__map{
    height:170px;
    background:var(--ivory);
}
.hotel-card__map iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
    filter:grayscale(40%);
}

.hotel-card__body{
    padding:26px 28px 28px;
}

.hotel-card__name{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:19px;
    color:var(--dark);
    margin-bottom:18px;
}

.hotel-card__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hotel-card__item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:14px;
    color:var(--text);
    line-height:1.6;
}
.hotel-card__item a{
    color:var(--text);
    text-decoration:none;
    transition:color var(--transition);
}
.hotel-card__item a:hover{
    color:var(--gold-dark);
}

.hotel-card__icon{
    width:18px;
    height:18px;
    margin-top:2px;
    color:var(--gold-dark);
    flex-shrink:0;
}
.hotel-card__icon svg{
    width:100%;
    height:100%;
    stroke:currentColor;
    fill:none;
}

/* --- Formulaire --- */
.contact-form{
    background:var(--white);
    border:1px solid var(--border);
    padding:40px;
}

.contact-form__title{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:20px;
    color:var(--dark);
    margin-bottom:28px;
}

.contact-form__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.contact-form__group{
    display:flex;
    flex-direction:column;
}
.contact-form__group--full{
    grid-column:1 / -1;
}

.contact-form__label{
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--dark);
    margin-bottom:9px;
}
.contact-form__label span{
    color:var(--gold-dark);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea{
    border:1px solid var(--border);
    background:var(--ivory);
    padding:14px 16px;
    font-size:14.5px;
    font-family:'Manrope', sans-serif;
    color:var(--dark);
    transition:border-color var(--transition), background var(--transition);
    width:100%;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:var(--white);
}

.contact-form__select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F7B28' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:14px;
    padding-right:40px;
}

.contact-form__textarea{
    resize:vertical;
    min-height:140px;
    line-height:1.7;
}

.contact-form__actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    margin-top:6px;
}

.contact-form__submit{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 38px;
    background:var(--dark);
    color:var(--white);
    border:none;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background var(--transition), gap var(--transition);
}
.contact-form__submit:hover{
    background:var(--gold-dark);
    gap:18px;
}

@media (max-width: 980px){
    .contact__grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px){
    .contact{
        padding:90px 26px 100px;
    }
    .contact-form{
        padding:28px;
    }
    .contact-form__grid{
        grid-template-columns:1fr;
    }
}