/* ============================================================
   CONTACT FORM — Feedback styles, then the contact page
   ============================================================
   Feedback first; at the end of the file, the contact page
   rules moved from styles.css (addresses, info panel, .contact-form).
   ============================================================ */

.contact-feedback {
  margin: 8px 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-left: 3px solid;
}
.contact-feedback.is-success {
  background: rgba(15, 110, 86, 0.06);
  color: #0F6E56;
  border-left-color: #0F6E56;
}
.contact-feedback.is-error {
  background: rgba(163, 45, 45, 0.06);
  color: #A32D2D;
  border-left-color: #A32D2D;
}

/* Disabled submit button */
.contact-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.contact-submit:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================================
   PAGE CONTACT — adresses, panneau coordonnées, formulaire
   (sorti de styles.css sans réécriture)
   ============================================================ */
/* ============================================================
   CONTACT PAGE — New layout (trombinoscope top, info + map, CTA)
   ============================================================ */

/* === Addresses block === */
/* List of all club venues, HQ first. Each address gets its own card
   with the textual address on the left and an embedded Google Map on
   the right. Stacks on narrow screens. */

.contact-addresses {
  padding: var(--section-y) 0;
}
.contact-addresses > h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 32px;
  color: var(--c-deep);
}
.contact-addresses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px;
}

.contact-address-card {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 24px;
  min-width: 0;
}
.contact-address-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 12px;
}
.contact-address-card-head h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--c-deep);
}
/* display, letter-spacing et padding viennent de .badge (core/css/ui.css) : ceux
   d'ici étaient déjà écrasés par .badge (chargé après, ex-core/admin-ui.css). */
.badge-hq {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--c-gold);
  color: var(--c-deep);
}
.contact-address-card-text {
  font-style: normal;
  color: var(--c-deep);
  line-height: 1.6;
  font-size: 15px;
}
.contact-address-route {
  align-self: flex-start;
  margin: 8px 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-blue);
  text-decoration: none;
}
.contact-address-route:hover { text-decoration: underline; }
/* Carte poussée en bas : les cartes restent alignées entre elles. */
.contact-address-card-map {
  margin-top: auto;
  width: 100%;
  height: 300px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.contact-address-card-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Contact : panneau coordonnées + formulaire intégré === */
/* Présentation reprise du site CAP (panneau sombre à gauche, formulaire à
   droite), charte du club : dégradé bleu du site, accents cyan, angles nets. */
/* #contact/essai fait défiler jusqu'au formulaire : il ne doit pas passer sous l'en-tête fixe. */
.contact-form-card { scroll-margin-top: 110px; }
.contact-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sinon le contenu élargit la piste sur mobile */
  gap: 0;
  margin: var(--section-y) 0 0;
  border: 1px solid var(--c-line);
}
@media (min-width: 900px) {
  .contact-main { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
}
.contact-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(135deg, #0A1F38 0%, #133A5F 60%, #1B4A75 100%);
  color: rgba(255, 255, 255, 0.92);
}
.contact-panel::before {
  content: '';
  position: absolute;
  top: -110px;
  right: -110px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(50, 188, 236, 0.35);
  border-radius: 50%;
  pointer-events: none;
}
.contact-panel-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.contact-panel h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.2;
  color: #fff;
  margin: 10px 0 14px;
}
.contact-panel-intro {
  margin: 0 0 28px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.contact-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-panel-list > li[hidden] { display: none; }
.contact-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: 6px;
}
.contact-panel-label svg { width: 15px; height: 15px; flex-shrink: 0; }
.contact-panel-value { display: block; line-height: 1.55; }
.contact-panel-value a { color: #fff; }
.contact-panel-value a:hover { color: var(--c-cyan); }
.contact-panel-link { font-size: 13px; }
.contact-panel .social-link {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
}
.contact-panel-foot {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.contact-form-card {
  background: var(--c-paper);
  padding: clamp(28px, 4vw, 48px);
}
.contact-form-card .contact-form { padding: 0; background: transparent; gap: 18px; }
.contact-form h2,
.contact-success h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 32px);
  color: var(--c-deep);
  margin: 0;
}
.contact-form h2 em { font-style: normal; color: var(--c-blue); }
.contact-form-sub { margin: -8px 0 4px; font-size: 13px; color: var(--c-mute); }
.contact-req { color: var(--c-blue); }
.contact-optional { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.contact-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr 1fr; }
}
.contact-form-card .contact-form textarea { min-height: 130px; resize: none; }
.contact-form label.contact-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.contact-form label.contact-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--c-blue);
}
.contact-form label.contact-consent span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--c-mute);
}
.contact-form-card .contact-submit { align-self: stretch; justify-content: center; margin-top: 4px; }
.contact-form[hidden], .contact-success[hidden] { display: none; }
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  outline: none;
}
.contact-success-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 159, 112, 0.12);
  color: #0F9F70;
}
.contact-success-icon svg { width: 30px; height: 30px; }
.contact-success p { margin: 0 0 8px; line-height: 1.6; color: var(--c-ink); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: var(--c-cream);
  border-radius: 0;
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  color: var(--c-ink);
  transition: border-color 0.2s var(--ease);
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(35,111,168,0.1);
}
.contact-form button { margin-top: 8px; align-self: flex-start; }