*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
html,body{width:100%;min-height:100%;}
.contact{position:relative;min-height:100vh;padding:40px 100px;display:flex;justify-content:center;align-items:center;flex-direction:column;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3)),url(../img/salle/spalding-left.jpg) no-repeat center;background-size:cover;overflow-y:auto}
.contact::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}
.contact .content{position:relative;z-index:2;max-width:800px;text-align:center;margin-bottom:25px}
.contact .content h2{font-size:36px;font-weight:600;color:#fff;margin-bottom:10px}
.contact .content p{font-weight:300;color:rgba(255,255,255,.85);line-height:1.7}

.container{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:60px;width:100%;max-width:1150px;margin:0 auto;overflow:hidden}
.container .contactInfo{width:45%;display:flex;flex-direction:column;transform:translateX(-150%);opacity:0;transition:transform 1s ease,opacity 1s ease}
.container.animate .contactInfo{transform:translateX(0);opacity:1}
.container .contactInfo .box{padding:14px 0;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}
.container .contactInfo .box:last-child{border-bottom:none}
.container .contactInfo .box .icon{min-width:52px;height:52px;background:#fff!important;display:flex;justify-content:center;align-items:center;border-radius:50%;flex-shrink:0}
.container .contactInfo .box .icon i{color:#097eeb!important;font-size:20px;display:block}
.container .contactInfo .box .text{display:flex;margin-left:18px;flex-direction:column;justify-content:center}
.container .contactInfo .box .text h3{font-weight:600;color:#097eeb;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.container .contactInfo .box .text p{font-weight:300;color:#fff;font-size:.92rem;line-height:1.5}
.contact-link{color:#fff;text-decoration:none;transition:color .2s}
.contact-link:hover{color:#3b9ef7}
.contactForm{width:45%;padding:30px 40px;background:#fff;border-radius:4px;transform:translateX(150%);opacity:0;transition:transform 1s ease,opacity 1s ease;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.container.animate .contactForm{transform:translateX(0);opacity:1}
.contactForm h2{font-size:24px;color:#333;font-weight:600;margin-bottom:6px}
.contact-success{text-align:center;padding:30px 20px}
.contact-success i{font-size:3rem;color:#16a34a;margin-bottom:12px;display:block}
.contact-success h3{font-size:1.3rem;color:#333;margin-bottom:8px}
.contact-success p{color:#666;font-size:.92rem;line-height:1.5}
.contact-error{background:#fff5f5;border:1px solid #fca5a5;color:#991b1b;padding:8px 12px;border-radius:6px;font-size:.82rem;margin-bottom:10px}
.form-row{display:flex;gap:20px}
.form-row .inputBox{flex:1}
.inputBox{position:relative;width:100%;margin-top:12px}
.inputBox input,.inputBox textarea{width:100%;padding:8px 0;font-size:14px;border:none;border-bottom:2px solid #ddd;outline:none;resize:none;background:transparent;font-family:'Poppins',sans-serif;color:#333;transition:border-color .3s}
.inputBox textarea{min-height:70px}
.inputBox span{position:absolute;left:0;top:8px;font-size:14px;color:#999;pointer-events:none;transition:.3s ease}
.inputBox input:focus~span,.inputBox input:valid~span,.inputBox textarea:focus~span,.inputBox textarea:valid~span,.inputBox input[type=tel]:not(:placeholder-shown)~span{color:#097eeb;font-size:11px;transform:translateY(-20px);font-weight:500}
.inputBox input:focus,.inputBox textarea:focus{border-bottom-color:#097eeb}
.inputBox input[type=submit]{width:auto;background:#097eeb;color:#fff;border:none;cursor:pointer;padding:11px 34px;font-size:.95rem;font-weight:500;border-radius:4px;transition:all .3s ease;margin-top:6px;font-family:'Poppins',sans-serif}
.inputBox input[type=submit]:hover{background:#065ecb;transform:translateY(-2px);box-shadow:0 6px 20px rgba(9,126,235,.35)}
.inputBox button[type=submit]{width:auto;background:#097eeb;color:#fff;border:none;cursor:pointer;padding:11px 34px;font-size:.95rem;font-weight:500;border-radius:4px;transition:all .3s ease;margin-top:6px;font-family:'Poppins',sans-serif}
.inputBox button[type=submit]:hover{background:#065ecb;transform:translateY(-2px);box-shadow:0 6px 20px rgba(9,126,235,.35)}
.inputBox button[type=submit]:disabled{background:#93c5fd;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:991px){.contact{padding:50px 30px;height:auto;overflow-y:auto}.container{flex-direction:column;gap:25px;align-items:stretch}.container .contactInfo,.contactForm{width:100%}.contactForm{padding:28px 25px}.form-row{flex-direction:column;gap:0}}
@media(max-width:480px){.contact .content h2{font-size:26px}.form-row{flex-direction:column;gap:0}}

.backHome{width:100%;text-align:center;margin-bottom:20px;position:relative;z-index:2}
.backHome a{text-decoration:none;color:#fff;background:#097eeb;padding:8px 18px;border-radius:5px;transition:all .3s ease;display:inline-block;font-weight:500;font-size:.9rem}
.backHome a:hover{background:#065ecb;transform:translateY(-2px)}