/*!
 * POC — Boutons
 * Version: 1.0.1
 * Thème cible : Modins (Gavias).
 *
 * Principe : une STRUCTURE se combine à un DÉGRADÉ. Chaque classe de
 * dégradé pose quatre variables locales (--g1, --g2, --encre, --dom) que
 * les huit structures consomment. Changer une teinte dans Elementor la
 * change partout où le dégradé est employé.
 */

/* =====================================================================
   1. VARIABLES DU GROUPE
   ===================================================================== */
.poc-bt {
	--poc-bt-gap: 14px;
	--poc-bt-px: 28px;
	--poc-bt-py: 16px;
	--poc-bt-radius: 12px;
	--poc-bt-radius-rond: 999px;
	--poc-bt-ico-gap: 10px;

	--poc-bt-encre-page: #4e4e4c;
	--poc-bt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. LES QUATORZE DÉGRADÉS DE LA CHARTE
   ===================================================================== */
.poc-bt__b--g-or {
	--g1: var(--poc-bt-or-g1, #f38c8b);
	--g2: var(--poc-bt-or-g2, #a21a18);
	--encre: var(--poc-bt-or-encre, #4e4e4c);
}

.poc-bt__b--g-or-brosse {
	--g1: var(--poc-bt-or-brosse-g1, #f9c5c4);
	--g2: var(--poc-bt-or-brosse-g2, #8f1412);
	--encre: var(--poc-bt-or-brosse-encre, #4e4e4c);
}

.poc-bt__b--g-ardoise {
	--g1: var(--poc-bt-ardoise-g1, #4b4b47);
	--g2: var(--poc-bt-ardoise-g2, #30302d);
	--encre: var(--poc-bt-ardoise-encre, #f38c8b);
}

.poc-bt__b--g-nuit-doree {
	--g1: var(--poc-bt-nuit-doree-g1, #484844);
	--g2: var(--poc-bt-nuit-doree-g2, #2c2c2a);
	--encre: var(--poc-bt-nuit-doree-encre, #f38c8b);
}

.poc-bt__b--g-cuivre {
	--g1: var(--poc-bt-cuivre-g1, #e07b7a);
	--g2: var(--poc-bt-cuivre-g2, #941715);
	--encre: var(--poc-bt-cuivre-encre, #ffffff);
}

.poc-bt__b--g-zinc {
	--g1: var(--poc-bt-zinc-g1, #e6c1c0);
	--g2: var(--poc-bt-zinc-g2, #92928b);
	--encre: var(--poc-bt-zinc-encre, #4e4e4c);
}

.poc-bt__b--g-urgence {
	--g1: var(--poc-bt-urgence-g1, #e23a2e);
	--g2: var(--poc-bt-urgence-g2, #db3b38);
	--encre: var(--poc-bt-urgence-encre, #ffffff);
}

.poc-bt__b--g-creme {
	--g1: var(--poc-bt-creme-g1, #ffffff);
	--g2: var(--poc-bt-creme-g2, #f9ebea);
	--encre: var(--poc-bt-creme-encre, #4e4e4c);
}

.poc-bt__b--g-mousse {
	--g1: var(--poc-bt-mousse-g1, #7fa663);
	--g2: var(--poc-bt-mousse-g2, #3f6033);
	--encre: var(--poc-bt-mousse-encre, #ffffff);
}

/* ---- Dégradés amples de la charte gris/rouge ---- */
.poc-bt__b--g-rubis {
	--g1: var(--poc-bt-rubis-g1, #d0403d);
	--g2: var(--poc-bt-rubis-g2, #7c1210);
	--encre: var(--poc-bt-rubis-encre, #ffffff);
}

.poc-bt__b--g-signature {
	--g1: var(--poc-bt-signature-g1, #4e4e4c);
	--g2: var(--poc-bt-signature-g2, #a21a18);
	--encre: var(--poc-bt-signature-encre, #ffffff);
}

.poc-bt__b--g-braise {
	--g1: var(--poc-bt-braise-g1, #a21a18);
	--g2: var(--poc-bt-braise-g2, #2c2c2a);
	--encre: var(--poc-bt-braise-encre, #ffffff);
}

.poc-bt__b--g-acier {
	--g1: var(--poc-bt-acier-g1, #a5a5a0);
	--g2: var(--poc-bt-acier-g2, #4e4e4c);
	--encre: var(--poc-bt-acier-encre, #ffffff);
}

.poc-bt__b--g-aurore {
	--g1: var(--poc-bt-aurore-g1, #f6e1e1);
	--g2: var(--poc-bt-aurore-g2, #e07b7a);
	--encre: var(--poc-bt-aurore-encre, #7c1210);
}

/* La teinte dominante suit la seconde couleur du dégradé. */
.poc-bt__b {
	--dom: var(--g2);
	/*
	 * Teinte de LECTURE, pour les structures sans fond plein posées sur un
	 * fond clair. L'or pur en texte sur blanc tombe à 2,09 de contraste :
	 * on l'assombrit en le mêlant à l'encre de la page. La teinte reste
	 * celle du dégradé, simplement rendue lisible — et elle suit
	 * automatiquement toute modification faite dans Elementor.
	 *
	 * Repli sans `color-mix` : l'encre de la page, toujours lisible.
	 */
	--dom-lisible: var(--poc-bt-encre-page);

	/*
	 * Teinte CLAIRE, pour les structures sans fond plein posées sur un fond
	 * sombre. Par défaut c'est la première teinte de la palette — sauf pour
	 * les palettes déjà sombres (Ardoise, Nuit anthracite), dont la première
	 * teinte serait illisible sur du noir : elles empruntent leur encre,
	 * qui est justement l'or.
	 */
	--clair: var(--g1);
}

.poc-bt__b--g-ardoise,
.poc-bt__b--g-nuit-doree {
	--clair: var(--encre);
}

/* Premières teintes trop sombres pour servir de teinte claire sur fond sombre. */
.poc-bt__b--g-signature {
	--clair: #f38c8b;
}

.poc-bt__b--g-braise {
	--clair: #e07b7a;
}

/* L'orange de la palette Urgence tient mieux que son rouge sur du sombre. */
.poc-bt__b--g-urgence {
	--clair: #e56c6a;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.poc-bt__b {
		--dom-lisible: color-mix(in srgb, var(--dom) 62%, var(--poc-bt-encre-page));
	}
}

/* Le crème n'a pas de seconde teinte assez marquée pour servir de filet. */
.poc-bt__b--g-creme {
	--dom: #e8bbba;
}

/* =====================================================================
   3. GARDES — thème Modins
   ===================================================================== */
.poc-bt,
.poc-bt * {
	box-sizing: border-box;
	min-width: 0;
}

.poc-bt [hidden] {
	display: none !important;
}

.poc-bt :where(p, span, div) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
}

.poc-bt button {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	border-radius: 0;
	position: static;
	z-index: auto;
	box-shadow: none;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.poc-bt a {
	text-decoration: none;
}

.poc-bt .poc-bt__txt,
.poc-bt .poc-bt__pastille {
	text-transform: none;
}

/* Modins : svg { height: auto } décale les icônes. */
.poc-bt svg {
	height: auto;
	vertical-align: middle;
}

/* =====================================================================
   4. CONTENEUR
   ===================================================================== */
.poc-bt {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--poc-bt-gap);
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

/* =====================================================================
   5. STRUCTURE COMMUNE DU BOUTON
   ===================================================================== */
.poc-bt .poc-bt__b {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--poc-bt-py) var(--poc-bt-px);
	border: 1.5px solid transparent;
	border-radius: var(--poc-bt-radius);
	line-height: 1.25;
	overflow: hidden;
	isolation: isolate;
	/* Translation pilotée par le script pour l'aimantation. */
	transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0);
	transition: transform 260ms var(--poc-bt-ease),
		box-shadow 260ms var(--poc-bt-ease),
		background 260ms var(--poc-bt-ease),
		color 260ms var(--poc-bt-ease),
		border-color 260ms var(--poc-bt-ease);
}

.poc-bt .poc-bt__b--t-sm {
	padding: calc(var(--poc-bt-py) * 0.68) calc(var(--poc-bt-px) * 0.74);
}

.poc-bt .poc-bt__b--t-lg {
	padding: calc(var(--poc-bt-py) * 1.3) calc(var(--poc-bt-px) * 1.18);
}

.poc-bt .poc-bt__in {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.poc-bt .poc-bt__txt {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	/*
	 * `break-word` et surtout PAS `anywhere` : `anywhere` réduit aussi la
	 * largeur minimale intrinsèque, le bouton se rétracte alors sous la
	 * largeur de son mot le plus long et coupe en plein milieu
	 * (« Demande / r un devis »). Avec `break-word`, le bouton ne descend
	 * jamais sous la largeur du plus long mot et la coupure se fait aux
	 * espaces ; un mot à rallonge reste néanmoins coupé plutôt que de
	 * déborder.
	 */
	overflow-wrap: break-word;
	hyphens: manual;
}

/* --- Icône : boîte carrée en em, centrage forcé --- */
.poc-bt .poc-bt__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	font-size: 1.02em;
	transition: transform 280ms var(--poc-bt-ease);
}

.poc-bt .poc-bt__ico i,
.poc-bt .poc-bt__ico i::before,
.poc-bt .poc-bt__ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

.poc-bt .poc-bt__ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Modins écrase le gap : marges explicites entre icône et libellés. */
.poc-bt .poc-bt__ico + .poc-bt__txt {
	margin-left: var(--poc-bt-ico-gap) !important;
}

.poc-bt .poc-bt__txt + .poc-bt__ico {
	margin-left: var(--poc-bt-ico-gap) !important;
}

/* --- Animations de l'icône au survol --- */
.poc-bt__b--ia-glisse:hover .poc-bt__txt + .poc-bt__ico,
.poc-bt__b--ia-glisse:focus-visible .poc-bt__txt + .poc-bt__ico {
	transform: translateX(4px);
}

.poc-bt__b--ia-glisse:hover .poc-bt__ico:first-child,
.poc-bt__b--ia-glisse:focus-visible .poc-bt__ico:first-child {
	transform: translateX(-3px);
}

.poc-bt__b--ia-sonne:hover .poc-bt__ico,
.poc-bt__b--ia-sonne:focus-visible .poc-bt__ico {
	animation: poc-bt-sonne 620ms var(--poc-bt-ease);
}

@keyframes poc-bt-sonne {
	0%, 100% { transform: rotate(0deg); }
	15% { transform: rotate(-14deg); }
	30% { transform: rotate(12deg); }
	45% { transform: rotate(-9deg); }
	60% { transform: rotate(6deg); }
	80% { transform: rotate(-3deg); }
}

.poc-bt__b--ia-pulse:hover .poc-bt__ico,
.poc-bt__b--ia-pulse:focus-visible .poc-bt__ico {
	animation: poc-bt-pulse 900ms var(--poc-bt-ease) infinite;
}

@keyframes poc-bt-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.16); }
}

/* --- Soulèvement, balayage, onde --- */
.poc-bt--souleve .poc-bt__b:hover,
.poc-bt--souleve .poc-bt__b:focus-visible {
	--lift: -2px;
}

.poc-bt .poc-bt__balayage {
	position: absolute;
	top: -60%;
	left: -80%;
	width: 42%;
	height: 220%;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transform: rotate(18deg);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.42) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.poc-bt--balayage .poc-bt__b:hover .poc-bt__balayage {
	animation: poc-bt-balayage 760ms var(--poc-bt-ease);
}

@keyframes poc-bt-balayage {
	0% { left: -80%; opacity: 0; }
	18% { opacity: 1; }
	100% { left: 132%; opacity: 0; }
}

/* L'onde part du point cliqué, position posée par le script. */
.poc-bt .poc-bt__onde {
	position: absolute;
	z-index: 2;
	border-radius: 50%;
	pointer-events: none;
	background: currentColor;
	opacity: 0.28;
	transform: translate(-50%, -50%) scale(0);
	animation: poc-bt-onde 620ms var(--poc-bt-ease) forwards;
}

@keyframes poc-bt-onde {
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

.poc-bt .poc-bt__b:focus-visible {
	outline: 2px solid var(--dom);
	outline-offset: 3px;
}

/* --- Pastille en coin --- */
.poc-bt .poc-bt__pastille {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	padding: 3px 9px;
	border-bottom-left-radius: 10px;
	background: var(--dom);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.4;
	white-space: nowrap;
}

/* =====================================================================
   6. LES HUIT STRUCTURES
   ===================================================================== */

/* --- 01 Plein --- */
.poc-bt .poc-bt__b--plein {
	background: linear-gradient(135deg, var(--g1), var(--g2));
	color: var(--encre);
	box-shadow: 0 10px 24px -12px var(--dom), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.poc-bt .poc-bt__b--plein:hover,
.poc-bt .poc-bt__b--plein:focus-visible {
	box-shadow: 0 18px 32px -14px var(--dom), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Le dégradé « or brossé » se balaie en continu, très lentement. */
.poc-bt .poc-bt__b--plein.poc-bt__b--g-or-brosse {
	background: linear-gradient(120deg, var(--g1), var(--g2), var(--g1));
	background-size: 220% 100%;
	background-position: 0% 50%;
	transition: background-position 900ms var(--poc-bt-ease),
		transform 260ms var(--poc-bt-ease),
		box-shadow 260ms var(--poc-bt-ease);
}

.poc-bt .poc-bt__b--plein.poc-bt__b--g-or-brosse:hover,
.poc-bt .poc-bt__b--plein.poc-bt__b--g-or-brosse:focus-visible {
	background-position: 100% 50%;
}

/* --- 02 Contour : se remplit du bas vers le haut --- */
.poc-bt .poc-bt__b--contour {
	background: transparent;
	border-color: var(--dom);
	color: var(--dom-lisible);
}

.poc-bt .poc-bt__b--contour::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, var(--g1), var(--g2));
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 320ms var(--poc-bt-ease);
}

.poc-bt .poc-bt__b--contour:hover::before,
.poc-bt .poc-bt__b--contour:focus-visible::before {
	transform: scaleY(1);
}

.poc-bt .poc-bt__b--contour:hover,
.poc-bt .poc-bt__b--contour:focus-visible {
	color: var(--encre);
	border-color: transparent;
}

/* Sur fond sombre, le filet et le texte prennent la teinte claire. */
.poc-bt--sombre .poc-bt__b--contour {
	border-color: var(--clair);
	color: var(--clair);
}

/* --- 03 Relief : arête biseautée, s'enfonce au clic --- */
.poc-bt .poc-bt__b--relief {
	background: linear-gradient(180deg, var(--g1), var(--g2));
	color: var(--encre);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		0 6px 0 -1px var(--dom),
		0 14px 24px -14px rgba(0, 0, 0, 0.55);
}

.poc-bt .poc-bt__b--relief:hover,
.poc-bt .poc-bt__b--relief:focus-visible {
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		0 8px 0 -1px var(--dom),
		0 18px 28px -14px rgba(0, 0, 0, 0.6);
}

.poc-bt .poc-bt__b--relief:active {
	--lift: 3px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2),
		0 2px 0 -1px var(--dom);
}

/* --- 04 Verre --- */
.poc-bt .poc-bt__b--verre {
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}

.poc-bt--sombre .poc-bt__b--verre {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.34);
	color: #ffffff;
	box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.8);
}

.poc-bt--sombre .poc-bt__b--verre:hover,
.poc-bt--sombre .poc-bt__b--verre:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.6);
}

.poc-bt--clair .poc-bt__b--verre {
	background: rgba(78, 78, 76, 0.055);
	border-color: rgba(78, 78, 76, 0.14);
	color: var(--poc-bt-encre-page);
	box-shadow: 0 8px 22px -14px rgba(78, 78, 76, 0.5);
}

.poc-bt--clair .poc-bt__b--verre:hover,
.poc-bt--clair .poc-bt__b--verre:focus-visible {
	background: rgba(78, 78, 76, 0.1);
	border-color: rgba(78, 78, 76, 0.3);
}

/* --- 05 Pastille : l'icône vit dans un rond rouge --- */
.poc-bt .poc-bt__b--pastille {
	padding-left: calc(var(--poc-bt-px) * 0.42);
	background: linear-gradient(135deg, var(--g1), var(--g2));
	color: var(--encre);
	border-radius: var(--poc-bt-radius-rond);
	box-shadow: 0 10px 24px -12px var(--dom);
}

.poc-bt .poc-bt__b--pastille .poc-bt__ico {
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
	font-size: 1em;
}

.poc-bt .poc-bt__b--pastille .poc-bt__ico svg,
.poc-bt .poc-bt__b--pastille .poc-bt__ico i {
	font-size: 0.86em;
}

/* Sur les dégradés sombres, la pastille s'éclaire à l'or. */
.poc-bt .poc-bt__b--pastille.poc-bt__b--g-ardoise .poc-bt__ico,
.poc-bt .poc-bt__b--pastille.poc-bt__b--g-nuit-doree .poc-bt__ico {
	background: rgba(243, 140, 139, 0.18);
	box-shadow: inset 0 0 0 1px rgba(243, 140, 139, 0.4);
}

/* --- Pilule : plein, entièrement arrondi,généreux --- */
.poc-bt .poc-bt__b--pilule {
	padding-left: calc(var(--poc-bt-px) * 1.35);
	padding-right: calc(var(--poc-bt-px) * 1.35);
	border-radius: var(--poc-bt-radius-rond);
	background: linear-gradient(135deg, var(--g1), var(--g2));
	color: var(--encre);
	box-shadow: 0 10px 26px -12px var(--dom), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.poc-bt .poc-bt__b--pilule:hover,
.poc-bt .poc-bt__b--pilule:focus-visible {
	box-shadow: 0 18px 34px -14px var(--dom), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* --- 07 Ligne : minimal, trait qui se déploie --- */
.poc-bt .poc-bt__b--ligne {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border-color: transparent;
	border-radius: 0;
	color: var(--dom-lisible);
	overflow: visible;
}

.poc-bt--sombre .poc-bt__b--ligne {
	color: var(--clair);
}

.poc-bt .poc-bt__b--ligne::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--poc-bt-py) * 0.42);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--g1), var(--g2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 340ms var(--poc-bt-ease);
}

.poc-bt .poc-bt__b--ligne:hover::after,
.poc-bt .poc-bt__b--ligne:focus-visible::after {
	transform: scaleX(1);
}

/*
 * La structure Ligne ne découpe pas son contenu (le trait déborde sous le
 * texte) : le balayage lumineux n'y serait donc pas coupé, et il n'a de
 * toute façon aucun sens sur un bouton sans fond.
 */
.poc-bt .poc-bt__b--ligne .poc-bt__balayage {
	display: none;
}

/* --- 08 Fantôme : fond très léger tiré du dégradé --- */
.poc-bt .poc-bt__b--fantome {
	background: linear-gradient(135deg, var(--g1), var(--g2));
	color: var(--dom-lisible);
	border-color: transparent;
}

/*
 * Le fond est le dégradé fortement dilué. `color-mix` fait le travail
 * proprement ; les navigateurs qui ne le connaissent pas gardent le
 * dégradé plein, qui reste lisible grâce à l'encre du dégradé.
 */
@supports (background: color-mix(in srgb, red 10%, white)) {
	.poc-bt--clair .poc-bt__b--fantome {
		background: color-mix(in srgb, var(--dom) 10%, #ffffff);
		color: var(--dom-lisible);
	}

	.poc-bt--clair .poc-bt__b--fantome:hover,
	.poc-bt--clair .poc-bt__b--fantome:focus-visible {
		background: color-mix(in srgb, var(--dom) 18%, #ffffff);
	}

	.poc-bt--sombre .poc-bt__b--fantome {
		background: color-mix(in srgb, var(--clair) 15%, transparent);
		color: var(--clair);
	}

	.poc-bt--sombre .poc-bt__b--fantome:hover,
	.poc-bt--sombre .poc-bt__b--fantome:focus-visible {
		background: color-mix(in srgb, var(--clair) 25%, transparent);
	}
}

/* Sans color-mix, le fantôme reste plein : l'encre du dégradé s'applique. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.poc-bt .poc-bt__b--fantome {
		color: var(--encre);
	}
}

/* =====================================================================
   Bouton ICÔNE SEULE
   Placé APRÈS les structures : leurs marges intérieures propres
   (la Pastille en particulier) doivent être écrasées, pas l'inverse.
   ===================================================================== */
.poc-bt .poc-bt__b--ico-seule {
	padding-left: var(--poc-bt-py) !important;
	padding-right: var(--poc-bt-py) !important;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	align-self: center;
}

.poc-bt .poc-bt__b--ico-seule .poc-bt__ico {
	margin: 0 !important;
	font-size: 1.28em;
}

/* La Pastille perd son rond intérieur : le bouton EST le rond. */
.poc-bt .poc-bt__b--ico-seule.poc-bt__b--pastille .poc-bt__ico {
	width: 1.15em;
	height: 1.15em;
	background: none;
	box-shadow: none;
}

.poc-bt .poc-bt__b--ico-seule.poc-bt__b--pastille .poc-bt__ico svg,
.poc-bt .poc-bt__b--ico-seule.poc-bt__b--pastille .poc-bt__ico i {
	font-size: 1em;
}

/* La structure Ligne n'a pas de fond : un carré n'aurait aucun sens. */
.poc-bt .poc-bt__b--ico-seule.poc-bt__b--ligne {
	aspect-ratio: auto;
	padding: 0 !important;
}

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */
@media (max-width: 767px) {
	.poc-bt {
		--poc-bt-px: 20px;
	}

	.poc-bt--empile {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.poc-bt--empile .poc-bt__b {
		width: 100%;
	}

	/* Une icône seule ne s'étire pas : elle suit l'alignement du groupe. */
	.poc-bt--empile .poc-bt__b--ico-seule {
		width: auto;
		align-self: var(--poc-bt-self, flex-start);
	}

	/* En pleine largeur, la structure Ligne garde sa marge de lecture. */
	.poc-bt--empile .poc-bt__b--ligne {
		justify-content: flex-start;
	}

}

/* =====================================================================
   8. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-bt *,
	.poc-bt *::before,
	.poc-bt *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.poc-bt .poc-bt__b {
		transform: none !important;
	}
}