/* contact-reseaux.css — styles dédiés à la page contact-reseaux.html
 * Fusionné avec le reste du site : ne touche pas aux règles existantes
 * de style.css, ajoute uniquement des surcharges scopées à .contact-page.
 */
.contact-grid{align-items:start}
.contact-form{display:grid;gap:8px}
.contact-form label,.form-field label{
  font-weight:700;
  font-size:.9rem;
  margin-top:8px;
}
.contact-form input,
.contact-form textarea,
.form-field input,
.form-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
  background:var(--pale);
}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:3px solid #006aff33;
  border-color:var(--blue);
}
.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:25px 0;
}
.quick-links a{
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
}
.quick-links a:hover{
  border-color:var(--blue);
  color:var(--blue);
}

/* ============== Mise en page contact ============== */
.contact-page .contact-section{padding-top:72px}
.contact-page .contact-section-inner{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:start}
.contact-page .social-intro{padding-top:8px}
.contact-page .social-intro h1{font-size:clamp(2.5rem,5vw,4.8rem)}
.contact-page .contact-detail{color:var(--muted);max-width:42ch;margin:14px 0 4px}

/* ============== Réseaux sociaux ============== */
.contact-page .social-links{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px;max-width:400px}
.contact-page .social-link{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#fff 0%,#f5f8ff 100%);border:1px solid #dce4ef;box-shadow:0 8px 22px rgba(18,33,58,.12);color:#d62c28;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease}
.contact-page .social-link svg{display:block;width:24px;height:24px;max-width:24px;max-height:24px;flex:0 0 24px;fill:currentColor}
.contact-page .social-link:hover,.contact-page .social-link:focus-visible{transform:translateY(-3px) scale(1.06);background:linear-gradient(145deg,#d62c28,#f06a48);color:#fff;box-shadow:0 13px 28px rgba(214,44,40,.28);outline:none}

/* ============== Bloc formulaire ============== */
.contact-page .redesigned-form{gap:20px;padding:32px;border-radius:22px;box-shadow:0 14px 40px rgba(18,33,58,.11)}
.contact-page .form-heading h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.35rem}
.contact-page .form-help,.contact-page .optional{color:var(--muted);font-size:.86rem;font-weight:400}
.contact-page .form-section{border:0;border-top:1px solid var(--line);padding:22px 0 0;margin:0;min-inline-size:0}
.contact-page .form-section legend{padding:0;margin-bottom:14px;font:700 .78rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.contact-page .form-row{display:grid;gap:12px 16px}
.contact-page .two-columns{grid-template-columns:1fr 1fr}
.contact-page .form-field label{display:block;margin:0 0 6px}
.contact-page .form-field label span,.contact-page .form-section legend>span,.contact-page .consent b{color:var(--red)}
.contact-page .contact-form input,.contact-page .contact-form textarea{background:#fbfcff}

/* ============== Switch lieu (atelier / chez vous) ============== */
.contact-page .location-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--pale);border:1px solid var(--line);gap:4px}
.contact-page .location-switch input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.contact-page .location-switch label{padding:11px 12px;text-align:center;border-radius:10px;cursor:pointer;font-weight:700;color:var(--muted);transition:.2s ease}
.contact-page .location-switch input:checked+label{background:#fff;color:var(--blue);box-shadow:0 3px 10px rgba(18,33,58,.10)}
.contact-page .location-switch input:focus-visible+label{outline:3px solid #006aff55}
.contact-page .address-field{margin-top:14px}
.contact-page [hidden]{display:none!important}

/* ============== Checkboxes "pannes" ============== */
.contact-page .problem-chips{display:flex;flex-wrap:wrap;gap:9px}
.contact-page .problem-chips input{position:absolute;opacity:0;width:1px;height:1px}
.contact-page .problem-chips label{border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink);background:#fff;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s ease}
.contact-page .problem-chips label:hover,.contact-page .problem-chips input:focus-visible+label{border-color:var(--blue);color:var(--blue)}
.contact-page .problem-chips input:checked+label{background:#e9f1ff;border-color:var(--blue);color:var(--blue-dark);box-shadow:inset 0 0 0 1px var(--blue)}

/* ============== Message libre + consentement + bouton ============== */
.contact-page .message-field{margin-top:18px}
.contact-page .consent{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.86rem;line-height:1.45}
.contact-page .consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue)}
.contact-page .submit{width:100%;font-size:1rem;margin-top:6px}

/* ============== Feedback utilisateur (succès / erreur) ============== */
.contact-page .form-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.4;
}

.contact-page #form-feedback.form-feedback--success {
  background-color: #e9f7ee !important;
  color: #166534 !important;
  border: 1px solid #b7e1c2 !important;
  font-size: 1.05rem !important;
  font-weight: 600;
}

.contact-page .form-feedback--error {
  background: #fdecea;
  color: #8a1f17;
  border: 1px solid #f5c2bd;
}

/* ============== Bloc carte ============== */
.map-link{position:relative;display:block;border-radius:12px;overflow:hidden;text-decoration:none}
.map-link .hero-image{display:block;width:100%}
.map-banner{position:absolute;bottom:0;left:0;width:100%;background:rgba(15,23,42,.85);color:#fff;text-align:center;padding:10px 0;font-weight:600;font-size:.95rem;transition:background .2s ease}
.map-link:hover .map-banner{background:rgba(220,38,38,.9)}

/* ============== Responsive ============== */
@media (max-width:760px){
  .contact-page .contact-section{padding-top:48px}
  .contact-page .contact-section-inner{grid-template-columns:1fr;gap:34px}
  .contact-page .redesigned-form{padding:24px 18px}
  .contact-page .two-columns{grid-template-columns:1fr}
  .contact-page .location-switch{grid-template-columns:1fr}
  .contact-page .social-links{gap:10px;margin-top:22px}
}