.ivy-contact--barre {
	padding: clamp( 2.5rem, 5vw, 4.5rem ) max( 1.25rem, calc( ( 100% - 96rem ) / 2 ) );
	background: transparent;
}

.ivy-contact--barre .ivy-contact__list {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 2rem, 4vw, 5rem );
	align-items: start;
}

.ivy-contact--barre .ivy-contact__item {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	min-width: 0;
	text-align: center;
}

.ivy-contact--barre .ivy-contact__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 5.5rem;
	block-size: 5.5rem;
	border: 1px solid rgb( 255 255 255 / .18 );
	border-radius: var( --ivy-radius-surface, 24px );
	background: rgb( 255 255 255 );
	color: var( --ivy-item_icon-color, var( --ivy-ink, rgb( 3 50 82 ) ) );
	font-size: var( --ivy-item_icon-size, 2rem );
}

.ivy-contact--barre .ivy-contact__icon :is( svg, i ) {
	inline-size: 1em;
	block-size: 1em;
}

.ivy-contact--barre .ivy-contact__item-copy { min-width: 0; }

.ivy-contact--barre .ivy-contact__item-title {
	margin: 0;
	color: var( --ivy-item_title-color, rgb( 255 255 255 ) );
	font-weight: 700;
	line-height: 1.15;
}

.ivy-contact--barre :is( .ivy-contact__item-text, .ivy-contact__item-link ) {
	display: block;
	margin: .65rem 0 0;
	color: var( --ivy-item_text-color, rgb( 255 255 255 / .88 ) );
	font: var( --ivy-item_text-typography, inherit );
	font-size: var( --ivy-font-body );
	line-height: 1.45;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}

/*
 * LE LIEN COUVRE TOUTE LA CARTE. Son ::after s'etend sur le bloc `item`
 * (position: relative ci-dessus) : icone, titre, marges et texte deviennent
 * une seule cible, et un survol n'importe ou dans la carte est un survol du
 * lien. Le lien reste un vrai <a> au texte lisible — rien n'est enveloppe.
 * Un item sans lien rend un <p> : sa carte n'est pas cliquable.
 */
.ivy-contact--barre .ivy-contact__item-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * LE LIEN GARDE SA COULEUR SOUS LE POINTEUR. Le kit Elementor pose
 * `.elementor-kit-N a:hover { color }` (0-2-1) : du gris foncé, illisible sur
 * un fond sombre. Tant que le lien ne couvrait que son texte, le défaut ne se
 * voyait qu'en survolant le numéro ; il couvre maintenant toute la carte et se
 * déclencherait à chaque survol. Cette règle (0-4-0) le bat ; l'onglet Survol
 * du panneau (`.carte:hover .lien`, plus spécifique encore) reste prioritaire.
 */
.ivy-contact--barre .ivy-contact__item .ivy-contact__item-link:is( :hover, :active ) {
	color: var( --ivy-item_link-color, var( --ivy-item_text-color, rgb( 255 255 255 / .88 ) ) );
}

/* L'anneau de focus entoure la carte entiere, pas le seul texte du lien. */
.ivy-contact--barre .ivy-contact__item-link:focus-visible {
	outline: none;
}

.ivy-contact--barre .ivy-contact__item-link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media ( max-width: 1023px ) {
	.ivy-contact--barre .ivy-contact__list { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); row-gap: 3rem; }
}

@media ( max-width: 575px ) {
	.ivy-contact--barre .ivy-contact__list { grid-template-columns: 1fr; }
}

/*
 * `item_link` partage sa regle avec `item_text` : sans cette ligne son
 * controle Color n'etait lu par personne — muet au panneau, sans erreur.
 */
.ivy-contact--barre .ivy-contact__item-link {
	color: var( --ivy-item_link-color, var( --ivy-item_text-color, rgb( 255 255 255 / .88 ) ) );
}