/* contact.css - Page Contact
   Base depuis theme.css, on ne style ici que le spécifique contact. */

/* S1 : infos + formulaire */
.sec-main { background: var(--blanc); padding: 70px 0; }
.contact-top { display: grid; grid-template-columns: 4fr 6fr; gap: 52px; align-items: start; }

.contact-intro h2 { font-size: clamp(23px, 2.8vw, 34px); margin-bottom: 14px; }
.contact-intro > p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 34px; max-width: 36ch; }

.ci-list { display: flex; flex-direction: column; gap: 22px; }
.ci { display: flex; align-items: flex-start; gap: 16px; }
.ci-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--g700); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ci-ico svg { width: 19px; height: 19px; stroke: #fff; stroke-width: 1.8; }
.ci-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.ci-val { font-size: 15px; font-weight: 700; color: var(--noir); line-height: 1.35; }
.ci-val a { color: var(--noir); transition: .14s; }
.ci-val a:hover { color: var(--g600); }
.ci-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Formulaire */
.contact-form { display: flex; flex-direction: column; }
.contact-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form .frow.full { grid-template-columns: 1fr; }
.contact-form .ff { display: flex; flex-direction: column; gap: 5px; }
.contact-form .ff label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-form .ff label .req { color: var(--muted); margin-left: 2px; }
.contact-form .ff label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.contact-form .ff input, .contact-form .ff select, .contact-form .ff textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--ligne); border-radius: var(--rs); padding: 11px 14px; font-family: var(--f); font-size: 14px; color: var(--noir); outline: none; background: var(--fond); transition: border-color .15s, background .15s; }
.contact-form .ff input:focus, .contact-form .ff select:focus, .contact-form .ff textarea:focus { border-color: var(--g700); background: var(--blanc); }
.contact-form .ff input::placeholder, .contact-form .ff textarea::placeholder { color: #bbb; }
.contact-form .ff textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.contact-form .ff select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.rgpd-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; cursor: pointer; }
.rgpd-check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--ligne); border-radius: 5px; background: var(--fond); cursor: pointer; transition: .15s; display: grid; place-content: center; margin-top: 2px; }
.rgpd-check input:checked { background: var(--g700); border-color: var(--g700); }
.rgpd-check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.rgpd-check span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.btn-submit { width: 100%; background: var(--or); color: var(--noir); border: none; border-radius: 50px; padding: 15px 24px; font-family: var(--f); font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, transform .15s; margin-top: 20px; }
.btn-submit:hover { background: var(--or-h); transform: translateY(-1px); }
.btn-submit svg { width: 17px; height: 17px; }
.form-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.6; }
.form-note a { color: var(--g700); text-decoration: underline; }

/* Champ anti-spam (honeypot), masqué aux humains */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bandeau de confirmation / erreur après envoi */
.contact-alert { display: flex; align-items: flex-start; gap: 12px; border-radius: var(--rs); padding: 14px 16px; margin-bottom: 22px; font-size: 14px; line-height: 1.55; }
.contact-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.contact-alert.ok { background: var(--success-soft); color: var(--success); }
.contact-alert.ok svg { stroke: var(--success); }
.contact-alert.err { background: #fdf3f2; color: #8a2c20; }
.contact-alert.err svg { stroke: #8a2c20; }
.contact-alert strong { font-weight: 800; }

/* Responsive */
@media (max-width: 1000px) {
  .contact-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .sec-main { padding: 44px 0; }
  .contact-form .frow { grid-template-columns: 1fr; }
}