/* ==========================================================================
   CSS Pages Legales - KICK ADDICT
   Styles pour : pages legales, contact, FAQ
   ========================================================================== */

/* --- Pages legales (mentions-legales, cgv, confidentialite) --- */
.legal-page{max-width:900px;margin:0 auto;padding:80px 40px}
.legal-page h1{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:4px;margin-bottom:10px;position:relative;display:inline-block}
.legal-page h1::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:4px;background:var(--rouge)}
.legal-page .legal-date{color:var(--gris);font-size:13px;margin-bottom:40px;display:block}
.legal-page h2{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;margin:40px 0 15px;color:var(--noir)}
.legal-page h3{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;margin:25px 0 10px;color:var(--noir)}
.legal-page p,.legal-page li{font-size:14px;line-height:1.8;color:#444;margin-bottom:12px}
.legal-page ul{padding-left:20px;margin-bottom:20px}
.legal-page ul li{margin-bottom:8px}
.legal-page a{color:var(--rouge);text-decoration:none}
.legal-page a:hover{text-decoration:underline}
.legal-page strong{color:var(--noir)}

/* --- Page contact --- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px}
.contact-form{display:flex;flex-direction:column;gap:15px}
.contact-form label{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;color:var(--noir)}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:14px 16px;border:2px solid var(--gris2);font-size:14px;font-family:'Roboto',sans-serif;outline:none;border-radius:8px;transition:.3s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--rouge)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form button{background:var(--noir);color:#fff;border:none;padding:16px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;cursor:pointer;transition:.3s;border-radius:8px}
@media(hover:hover){.contact-form button:hover{background:var(--rouge)}}
.contact-info{display:flex;flex-direction:column;gap:25px}
.contact-info-card{background:var(--gris3);padding:25px;border-radius:10px;border-left:4px solid var(--rouge)}
.contact-info-card h3{font-size:18px;margin-bottom:10px}
.contact-info-card p{font-size:14px;color:#444;line-height:1.8;margin:0}
.contact-subtitle{font-size:16px;color:#444;line-height:1.8;margin-bottom:10px}
.form-success{display:none;background:var(--vert);color:#fff;padding:20px;border-radius:10px;text-align:center;font-size:16px;font-weight:500;margin-top:15px}
.form-success.visible{display:block}

/* --- Page FAQ accordeon --- */
.faq-intro{font-size:16px;color:#444;line-height:1.8;margin-bottom:10px}
.faq-category{margin-bottom:40px}
.faq-category h2{font-size:28px;margin-bottom:20px}
.faq-item{border:2px solid var(--gris2);margin-bottom:10px;border-radius:10px;overflow:hidden;transition:.3s}
.faq-item.active{border-color:var(--noir)}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;cursor:pointer;font-weight:700;font-size:15px;color:var(--noir);transition:.2s;background:#fff}
@media(hover:hover){.faq-question:hover{background:var(--gris3)}}
.faq-question .faq-icon{font-size:22px;transition:transform .3s;color:var(--rouge);flex-shrink:0;margin-left:15px}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.46,.45,.94);background:var(--gris3)}
.faq-answer p{padding:0 20px 18px;font-size:14px;line-height:1.8;color:#444}
.faq-answer p:first-child{padding-top:18px}
.faq-contact-cta{background:var(--noir);color:#fff;padding:40px;border-radius:12px;text-align:center;margin-top:50px}
.faq-contact-cta h2{color:#fff;margin:0 0 10px;font-size:28px}
.faq-contact-cta p{color:#aaa;margin-bottom:20px;font-size:15px}
.faq-contact-cta a{display:inline-block;background:var(--rouge);color:#fff;padding:14px 40px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;text-decoration:none;border-radius:8px;transition:.3s}
@media(hover:hover){.faq-contact-cta a:hover{background:var(--rouge2);text-decoration:none}}

/* --- Responsive --- */
@media(max-width:768px){
.legal-page{padding:40px 20px}
.legal-page h1{font-size:36px}
.legal-page h2{font-size:22px}
.contact-grid{grid-template-columns:1fr}
}