/*
 * Refonte — accueil, section contact « Fondation RCF ».
 * Reprend la carte à deux volets du formulaire « Nous rejoindre » (charte.css, .charte .carte-inscription…) ;
 * ce fichier ne fait que transposer les règles liées à #et_cont_inc_user et ajouter les coordonnées du volet.
 */

/* Neutralise l'ancien style #contact (ombre, marges) au profit de celui de « Nous rejoindre » */
.charte #contact.aj-contact {
  padding: var(--space-16) 0;
  overflow: visible;
  background: var(--blanc);
  border-top: 1px solid var(--bordure-douce);
  box-shadow: none;
}

.charte .aj-contact .container { max-width: var(--container-max); }

.charte .aj-contact .volet-titre { margin-bottom: var(--space-10); }

.charte .aj-contact button.btnform {
  background: var(--vert-action);
  color: var(--blanc);
  border: 0;
}

.charte .aj-contact .bandeau-titre {
  margin: 0 0 var(--space-3);
  font-family: var(--font-titres);
  font-size: var(--texte-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--titre);
}

.charte .aj-contact textarea.form-control { resize: vertical; min-height: 140px; }

/* Coordonnées de la fondation sous le pied du formulaire, sur toute la largeur :
   l'e-mail (court) prend sa largeur, l'adresse et le téléphone (longs) se partagent le reste */
.aj-contact__infos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-10);
  margin: var(--space-6) 0 0;
  padding: var(--space-6) 0 0;
  list-style: none;
  border-top: 1px solid var(--bordure-douce);
  font-size: var(--texte-sm);
  line-height: 1.5;
  color: var(--texte-fort);
}

.aj-contact__infos li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.aj-contact__infos li > span:last-child,
.aj-contact__infos a { padding-top: 7px; }

.aj-contact__infos a {
  color: var(--texte-fort);
  text-decoration: none;
  transition: color var(--transition);
}

.aj-contact__infos a:hover { color: var(--vert-action); }

.aj-contact__icone {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fond-teinte);
  color: var(--vert-action);
  font-size: var(--texte-base);
}

/* Agence principale : titre, adresse, puis pays de représentation, avec un interligne aéré */
.aj-contact__adresse { flex: 1; min-width: 0; padding-top: 7px; }

.aj-contact__adresse p {
  margin: 0;
  line-height: 1.65;
}

.aj-contact__adresse p + p { margin-top: var(--space-2); }

.aj-contact__sous-titre { font-weight: 600; color: var(--titre); }

/* Call center : un numéro cliquable par pays (pays au-dessus, numéro en dessous), survol bien visible */
.aj-contact__tel { flex: 1; min-width: 0; padding-top: 7px; }

.aj-contact__tel-titre {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--titre);
}

.aj-contact__numeros {
  display: grid;
  gap: 2px;
  margin: 0 0 0 calc(-1 * var(--space-2));
  padding: 0;
  list-style: none;
}

.aj-contact__infos .aj-contact__numeros a {
  display: flex;
  flex-direction: column; /* pays au-dessus, numéro en dessous : même présentation pour chaque ligne */
  align-items: flex-start;
  padding: 6px var(--space-2);
  border-radius: var(--radius-field);
  color: var(--texte-fort);
  transition: background-color var(--transition), color var(--transition);
}

.aj-contact__pays { font-size: var(--texte-xs); color: var(--texte-discret); transition: color var(--transition); }

.aj-contact__numero {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.aj-contact__infos .aj-contact__numeros a:hover,
.aj-contact__infos .aj-contact__numeros a:focus-visible {
  background: var(--fond-teinte);
  color: var(--vert-action);
}

.aj-contact__numeros a:hover .aj-contact__pays,
.aj-contact__numeros a:focus-visible .aj-contact__pays { color: var(--vert-action); }

.aj-contact__infos .aj-contact__numeros a:focus-visible { outline: 2px solid var(--vert-action); outline-offset: 0; }

.charte .aj-contact .volet-rcf { padding-top: var(--space-10); }

@media (max-width: 1023px) {
  .charte #contact.aj-contact { padding: var(--space-12) 0; }
  .charte .aj-contact .volet-titre { margin-bottom: var(--space-5); }
  .aj-contact__infos { gap: var(--space-6); }

}

@media (max-width: 767px) {
  .charte #contact.aj-contact { padding: var(--space-10) 0; }
  .aj-contact__infos { grid-template-columns: 1fr; gap: var(--space-5); }
}