/* Exoring - styles specifiques page "pourquoi-pour-qui" (post ID 4578)
   Charge uniquement sur cette page, voir mu-plugins/exo-pourquoi-styles.php.
   Couleurs reprises de la page d'accueil : bleu #4fa3fd (custom-bleu-rispon),
   noir #111111 (contrast), blanc #ffffff (base-2). Orange #E07B1E garde pour Sport.

   La typographie de base (.exo-eyebrow, .exo-h1, .exo-h2) a ete DEPLACEE
   le 2026-08-05 vers le CSS additionnel site-wide (blocs/customizer-additional-css.css)
   car reutilisee sur d'autres pages (produits #4574) - incident vecu : la
   page produits reprenait ces classes mais n'affichait pas le style (tiret
   devant l'eyebrow absent, etc.) car ce fichier n'est charge QUE sur
   pourquoi-pour-qui. Ne pas la re-dupliquer ici. Seuls les styles de
   COMPOSANTS propres a cette page restent dans ce fichier. */

/* ---------- cartes (raisons / profils) ---------- */

.exo-reasons-section .wp-block-columns,
.exo-profiles-section .wp-block-columns {
	gap: 28px !important;
}
.exo-card {
	background: #fff;
	border: 1px solid rgba(17,17,17,.1);
	border-top: 3px solid #4fa3fd;
	border-radius: 6px;
	padding: 28px 26px !important;
	transition: transform .25s ease, box-shadow .25s ease;
}
.exo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(17,17,17,.08);
}
.exo-profiles-section .exo-card:has(.exo-badge-sport) {
	border-top-color: #E07B1E;
}
.exo-card .wp-block-heading {
	margin-top: 4px;
	margin-bottom: 10px;
}
.exo-card p:last-child {
	color: #4a4a4a;
	font-size: .96rem;
}

/* ---------- engagements (bandeau simple) ---------- */

.exo-engagements-section .wp-block-columns { gap: 28px !important; }
.exo-engagements-section .wp-block-column {
	border-top: 2px solid #c9ac84;
	padding-top: 18px !important;
}
.exo-engagements-section .wp-block-heading { margin-bottom: 8px; }
.exo-engagements-section p { color: #4a4a4a; font-size: .94rem; }

/* ---------- badges & tags ---------- */

.exo-badge {
	display: inline-block;
	font-weight: 700;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 3px;
	margin-bottom: 14px;
}
.exo-badge-care { background: rgba(79,163,253,.14); color: #2f6497; }
.exo-badge-sport { background: rgba(224,123,30,.16); color: #a85b12; }

.exo-usage-tag {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border: 1px solid currentColor;
	border-radius: 100px;
	margin: 0 6px 8px 0;
	opacity: .85;
}

/* ---------- split Care / Sport (signature de la page) ---------- */

.exo-split-row {
	border-top: 1px solid rgba(17,17,17,.12);
	border-bottom: 1px solid rgba(17,17,17,.12);
}
.exo-split-row > .wp-block-column {
	padding: 56px 44px !important;
	min-height: 480px;
	display: flex;
	flex-direction: column;
}
.exo-split-row .wp-block-buttons { margin-top: auto; padding-top: 24px; }
@media (min-width: 782px) {
	.exo-split-row > .wp-block-column {
		transition: flex-grow .5s cubic-bezier(.2,.7,.3,1);
	}
	.exo-split-row:hover > .wp-block-column { flex-grow: .86; }
	.exo-split-row > .wp-block-column:hover { flex-grow: 1.25; }
}

/* ---------- boutons : forme pilule, plus de caractere ----------
   IMPORTANT : toujours scoper avec un ancetre .exo-xxx precis. Un
   selecteur nu type ".wp-block-buttons .wp-block-button__link" attrape
   aussi le bouton "Espace PRO" de l'en-tete (partage par toutes les
   pages) et le deforme completement - bug vecu le 2026-08-04. */

.exo-split-row .wp-block-button__link,
.exo-cta-final .wp-block-button__link {
	border-radius: 100px !important;
	padding: 14px 28px !important;
	font-weight: 700 !important;
	font-size: .82rem !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: transform .2s ease, box-shadow .2s ease;
}
.exo-split-row .wp-block-button__link:hover,
.exo-cta-final .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(17,17,17,.15);
}
.exo-cta-final .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #111 !important;
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.exo-cta-final .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #111 !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.exo-split-row > .wp-block-column,
	.exo-card,
	.exo-split-row .wp-block-button__link,
	.exo-cta-final .wp-block-button__link { transition: none !important; }
}