/* ==========================================================================
   CANINOVA — PAGE CONTACT
   Spécifique à page-contact.php. Tout ce qui est générique vient de
   style.css, css/components.css et css/header-footer.css.
   ========================================================================== */

/* Le bloc principal suit immédiatement l'en-tête de page : on resserre le
   rythme vertical haut pour éviter un trou entre les deux. */
.cn-contact__body {
  padding-top: 28px;
}

/* ==========================================================================
   MISE EN PAGE : formulaire dominant + colonne d'appui
   ========================================================================== */

/* Les grilles génériques répartissent à parts égales : ici le formulaire doit
   rester plus large que la colonne de droite, alignée en haut. */
.cn-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 880px) {
  .cn-contact__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   COORDONNÉES
   ========================================================================== */

/* Le wysiwyg d'intro tient dans une carte étroite : une graduation en dessous
   de .cn-prose, dont il conserve tout le reste. */
.cn-contact__intro {
  font-size: var(--cn-t-sm);
  margin-bottom: 18px;
}

/* Filet de séparation entre deux coordonnées, comme dans la maquette. */
.cn-contact__detail + .cn-contact__detail {
  border-top: 1px solid var(--cn-border);
  margin-top: 16px;
  padding-top: 16px;
}

.cn-contact__detail-label {
  display: block;
  font-size: var(--cn-t-meta);
  font-weight: 600;
  color: var(--cn-text);
}

.cn-contact__detail-value {
  display: block;
  margin-top: 2px;
}

/* Le lien pro reste un .cn-btn--arrow : on ne touche qu'à son calage. */
.cn-contact__detail-link {
  margin-top: 2px;
}

/* Le composant .cn-social est calibré pour le pied de page sombre : on ne
   remappe ici que ses couleurs pour la carte claire. */
.cn-contact__socials {
  display: flex;
  gap: 9px;
  margin-top: 8px;
}

.cn-contact__socials .cn-social {
  border-color: var(--cn-border-3);
  color: var(--cn-text-3);
}

/* ==========================================================================
   FORMULAIRE — états propres à cette page
   ========================================================================== */

/* Retour de validation client : js/contact.js écrit dans ce conteneur et le
   vide à la première saisie. Vide, la notice ne doit pas laisser de bloc. */
.cn-contact__feedback:empty {
  display: none;
}

/* contact.js pose .is-invalid sur la case elle-même ; components.css ne
   couvre que les champs texte. Terracotta = signal d'attention de la DA. */
.cn-contact__consent input[type='checkbox'].is-invalid {
  border-color: var(--cn-terracotta);
  box-shadow: 0 0 0 3px var(--cn-terracotta-soft);
}