/* ===== Page : Laisser un témoignage ===== */

.testi-submit{
    max-width:760px;
    margin:0 auto;
    padding:40px 40px 50px;
}

.testi-submit__head{
    text-align:center;
    margin-bottom:56px;
}

.testi-submit__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;
}
.testi-submit__eyebrow::before,
.testi-submit__eyebrow::after{
    content:"";
    width:30px;
    height:1px;
    background:var(--gold);
}

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

.testi-submit__text{
    margin-top:18px;
    font-size:15.5px;
    line-height:1.8;
    color:var(--text);
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
}

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

/* --- Carte formulaire --- */
.testi-form{
    background:var(--white);
    border:1px solid var(--border);
    padding:44px;
}

/* --- Upload photo (avatar circulaire) --- */
.testi-form__photo{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:38px;
}

.testi-form__photo-drop{
    position:relative;
    width:104px;
    height:104px;
    border-radius:50%;
    border:1px dashed var(--gold-light);
    background:var(--ivory);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
    transition:border-color var(--transition);
}
.testi-form__photo-drop:hover{
    border-color:var(--gold);
}
.testi-form__photo-drop input[type="file"]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.testi-form__photo-drop svg{
    width:26px;
    height:26px;
    stroke:var(--gold-dark);
    fill:none;
}
.testi-form__photo-drop img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
}
.testi-form__photo-drop.has-image svg{
    display:none;
}
.testi-form__photo-drop.has-image img{
    display:block;
}

.testi-form__photo-hint{
    margin-top:12px;
    font-size:12px;
    letter-spacing:.04em;
    color:var(--text);
}

/* --- Champs --- */
.testi-form__group{
    margin-bottom:26px;
}
.testi-form__group:last-of-type{
    margin-bottom:0;
}

.testi-form__label{
    display:block;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--dark);
    margin-bottom:10px;
}
.testi-form__label span{
    color:var(--gold-dark);
}

.testi-form__input,
.testi-form__textarea{
    width:100%;
    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);
}
.testi-form__input:focus,
.testi-form__textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:var(--white);
}
.testi-form__textarea{
    resize:vertical;
    min-height:140px;
    line-height:1.7;
}

.testi-form__error{
    margin-top:8px;
    font-size:12.5px;
    color:#B23A3A;
}

.testi-form__actions{
    margin-top:36px;
    display:flex;
    justify-content:center;
}

.testi-form__submit{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 42px;
    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);
}
.testi-form__submit:hover{
    background:var(--gold-dark);
    gap:18px;
}
.testi-form__submit:disabled{
    opacity:.6;
    cursor:not-allowed;
}

@media (max-width: 640px){
    .testi-submit{
        padding:90px 22px 100px;
    }
    .testi-form{
        padding:30px;
    }
}