/* Page Contact : l'encadré de l'agent (même cadre que sur le CV, voir cv.css) est l'action principale ;
   dessous, les pastilles vers les réseaux (même graphisme que partout : de-chips.css). */

main .de-contact-agent {
	margin-top: 2.5rem !important;
	padding: 1.75rem;
	border-color: rgba(245, 184, 46, 0.55); /* filet doré : c'est le bloc à regarder en premier */
	transition: border-color 0.2s ease;
}
main .de-contact-agent:hover {
	border-color: var(--cv-gold);
}
.de-contact-agent .de-cv-agent__nom {
	font-size: 2rem;
}
/* Bouton d'appel : plein jaune comme les autres boutons du site (survol, clic et clavier : de-global.css / theme.json). */
.de-contact-agent .wp-block-buttons {
	margin-top: 1.5rem !important;
}
.de-contact-appel .wp-block-button__link {
	background: var(--cv-gold);
	border: 1px solid var(--cv-gold);
	color: var(--cv-gold-ink);
	border-radius: 0.375rem;
	transition: background 0.2s ease, transform 0.2s ease;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	padding: 0.8rem 1.5rem;
}
.de-contact-appel .wp-block-button__link:hover {
	background: #ffc94d;
	border-color: #ffc94d;
	color: var(--cv-gold-ink);
}
.de-contact-appel .wp-block-button__link:active {
	transform: translateY(1px);
}
.de-contact-appel .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cv-gold);
	outline-offset: 3px;
}

/* Réseaux : pastilles sans filets, qui passent à la ligne sur petit écran. */
main .de-contact-reseaux {
	margin-top: 2.5rem !important;
}
main .de-contact-reseaux .de-cv-chips {
	flex-wrap: wrap;
	overflow: visible;
	margin-top: 0.6rem !important;
	padding-block: 0;
	border: 0;
}
.de-contact-reseaux .de-cv-chip a {
	padding: 0.55rem 1.2rem;
	font-size: 1rem;
}

/* Logos des réseaux : icône blanche (jamais les couleurs des marques) placée devant le texte de la pastille.
   Elle est choisie automatiquement selon l'adresse du lien (instagram, facebook, imdb) : rien à régler dans l'éditeur.
   Elle suit la couleur du texte au survol (jaune). */
.de-contact-reseaux .de-cv-chip a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.de-contact-reseaux .de-cv-chip a::before {
	content: "";
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--cv-fg, #f5f3ee);
	-webkit-mask: var(--de-logo) center / contain no-repeat;
	mask: var(--de-logo) center / contain no-repeat;
	transition: background 0.2s ease;
}
.de-contact-reseaux .de-cv-chip a:hover::before,
.de-contact-reseaux .de-cv-chip a:focus-visible::before {
	background: var(--cv-gold, #f5b82e);
}
.de-contact-reseaux .de-cv-chip a[href*="instagram.com"] { --de-logo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Ccircle cx=%2217.3%22 cy=%226.7%22 r=%220.6%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.de-contact-reseaux .de-cv-chip a[href*="facebook.com"] { --de-logo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 21v-8h2.7l.5-3H14V8.3c0-.9.4-1.5 1.6-1.5H17.3V4.2C16.9 4.1 16 4 15.1 4 12.9 4 11 5.300 11 7.800V10H8.300v3H11v8z%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
.de-contact-reseaux .de-cv-chip a[href*="imdb.com"] { --de-logo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%221.500%22 y=%225.500%22 width=%2221%22 height=%2213%22 rx=%222.500%22/%3E%3Cpath d=%22M5 9v6M8 15V9l2 3 2-3v6M15 9v6h1.500a1.500 1.500 0 0 0 0-3H15M15 12h1.500a1.500 1.500 0 0 0 0-3H15%22/%3E%3C/svg%3E"); }
.de-contact-reseaux .de-cv-chip a:not([href*="instagram.com"]):not([href*="facebook.com"]):not([href*="imdb.com"])::before { display: none; }
