/* WPSW Base — rythme des sections et questions fréquentes (site et éditeur).
 * Feuille séparée : la clé styles.css du theme.json d'un thème enfant remplacerait celle du parent.
 * Couleurs et espacements : uniquement les réglages du thème (valeurs définies par le thème enfant). */

/* ——— Rythme des fonds ———
 * Les sections sans fond n'ont pas d'enveloppe : entre leur dernier bloc et une bande colorée pleine
 * largeur, il ne restait que l'écart courant entre deux blocs (≈ 20 px, contre 60 à l'intérieur de la
 * bande). Une bande est désormais séparée du contenu blanc voisin par autant d'espace qu'elle en a à
 * l'intérieur ; deux bandes qui se suivent restent jointives. */
.wp-block-post-content > :is(.alignfull.has-background, .alignfull:is(.is-style-section-contrastee, .is-style-bande-claire, .is-style-bande-teintee, .is-style-bande-sombre), .wp-block-cover.alignfull):not(:first-child),
.wp-block-post-content > :is(.alignfull.has-background, .alignfull:is(.is-style-section-contrastee, .is-style-bande-claire, .is-style-bande-teintee, .is-style-bande-sombre), .wp-block-cover.alignfull) + * {
	margin-block-start: var(--wp--preset--spacing--60);
}
.wp-block-post-content > :is(.alignfull.has-background, .alignfull:is(.is-style-section-contrastee, .is-style-bande-claire, .is-style-bande-teintee, .is-style-bande-sombre), .wp-block-cover.alignfull) + :is(.alignfull.has-background, .alignfull:is(.is-style-section-contrastee, .is-style-bande-claire, .is-style-bande-teintee, .is-style-bande-sombre), .wp-block-cover.alignfull) {
	margin-block-start: 0;
}

/* ——— Questions fréquentes (bloc Détails) ———
 * La question se lit comme un élément cliquable : graisse, signe + / − à droite, filet, survol et
 * focus clavier visibles. Le triangle natif est masqué ; le comportement reste celui de <details>. */
.wp-block-details {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}
:not(.wp-block-details) + .wp-block-details,
.wp-block-details:first-child {
	border-block-start: 1px solid var(--wp--preset--color--border);
}
.wp-block-details + .wp-block-details {
	margin-block-start: 0;
}
.wp-block-details > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
	font-weight: 650;
	line-height: 1.4;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.wp-block-details[open] > summary::after {
	content: "−";
}
.wp-block-details > summary:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 2px;
}
.wp-block-details[open] > summary {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Sur une bande contrastée (fond primary), le signe, le survol et le filet suivent la couleur du texte. */
:is(.is-style-section-contrastee, .is-style-bande-sombre) .wp-block-details {
	border-color: currentColor;
}
:is(.is-style-section-contrastee, .is-style-bande-sombre) .wp-block-details > summary::after,
:is(.is-style-section-contrastee, .is-style-bande-sombre) .wp-block-details > summary:hover {
	color: inherit;
}
:is(.is-style-section-contrastee, .is-style-bande-sombre) .wp-block-details > summary:focus-visible {
	outline-color: currentColor;
}

/* ——— Grands titres (0.5.0) ———
 * Tailles « Géant » et « Affiche » : interlignage serré et léger resserrement des lettres, sinon un titre
 * de 7rem paraît lâche. Coupure équilibrée des titres sur plusieurs lignes (pas de mot seul en fin). */
:is(h1, h2, h3, .wp-block-heading) {
	text-wrap: balance;
}
.has-xxx-large-font-size {
	line-height: 1.05;
	letter-spacing: -0.015em;
}
.has-display-font-size {
	line-height: 0.95;
	letter-spacing: -0.03em;
}

/* ——— Formes d'image (0.5.0) ———
 * Le rayon est posé par les styles de bloc (styles/blocks) ; l'image remplit son cadre pour que la forme
 * reste nette quand le client change la photo. Le cercle impose un cadre carré. */
.wp-block-image:is(.is-style-arche, .is-style-cercle, .is-style-coins-asymetriques, .is-style-arrondie) img {
	object-fit: cover;
}
.wp-block-image.is-style-cercle img {
	aspect-ratio: 1;
}

/* ——— Styles des sections du build (0.5.1) ——— */

/* Surtitre : petite ligne en capitales au-dessus d'un titre. */
.is-style-surtitre {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.is-style-surtitre + :is(h1, h2, .wp-block-heading) {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Bandeau de preuves : colonnes séparées par des filets, encadrées en haut et en bas. */
.wp-block-columns.is-style-preuves {
	border-block: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--40);
	gap: 0;
}
.wp-block-columns.is-style-preuves > .wp-block-column {
	padding-inline: var(--wp--preset--spacing--40);
}
.wp-block-columns.is-style-preuves > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--wp--preset--color--border);
}
.wp-block-columns.is-style-preuves > .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.wp-block-columns.is-style-preuves .wp-block-image img {
	max-height: 3.5rem;
	width: auto;
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-preuves > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--border);
		padding-block-start: var(--wp--preset--spacing--40);
	}
}

/* Mosaïque : la première photo occupe un grand carré, les autres remplissent la grille. */
.wp-block-gallery.is-style-mosaique {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(8rem, 14vw, 13rem);
	grid-auto-flow: dense;
	gap: var(--wp--preset--spacing--30) !important;
}
.wp-block-gallery.is-style-mosaique > .wp-block-image {
	width: auto !important;
	margin: 0 !important;
}
.wp-block-gallery.is-style-mosaique > .wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.wp-block-gallery.is-style-mosaique > .wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
@media (max-width: 599px) {
	.wp-block-gallery.is-style-mosaique {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Grille asymétrique (bento) : tuiles jointives ; une photo remplit sa tuile. */
.wp-block-group.is-style-bento {
	grid-auto-rows: minmax(12rem, auto);
	grid-auto-flow: dense;
}
.wp-block-group.is-style-bento > * {
	margin: 0 !important;
	border-radius: 0.75rem;
	overflow: hidden;
}
.wp-block-group.is-style-bento > .wp-block-group {
	padding: var(--wp--preset--spacing--40);
}
/* Tuile photo : la photo remplit toute la tuile. */
.wp-block-group.is-style-bento > .wp-block-group:has(> .wp-block-image:only-child) {
	padding: 0;
}
.wp-block-group.is-style-bento .wp-block-image:only-child {
	height: 100%;
	margin: 0;
}
.wp-block-group.is-style-bento .wp-block-image:only-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 781px) {
	.wp-block-group.is-style-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.wp-block-group.is-style-bento > * {
		grid-column: auto / span 1 !important;
		grid-row: auto / span 1 !important;
	}
}
@media (max-width: 599px) {
	.wp-block-group.is-style-bento {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Colonnes inversées (zigzag) : photo à gauche sur ordinateur, mais le texte reste avant la photo sur mobile. */
@media (min-width: 782px) {
	.wp-block-columns.is-style-inverse {
		flex-direction: row-reverse;
	}
}

/* Liste filetée (liste de services) : une ligne par élément, séparées par des filets. */
.wp-block-group.is-style-liste-filetee > .wp-block-columns {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-liste-filetee > .wp-block-columns:last-child {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block-end: var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-liste-filetee h3 {
	margin-block-start: 0;
}

/* ——— Deuxième vague (0.6.0) ——— */

/* Grand chiffre (chiffres clés, numéros d'étapes) : police des titres, très grand, couleur de marque. */
.is-style-chiffre {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
:is(.is-style-bande-sombre, .is-style-section-contrastee) .is-style-chiffre {
	color: inherit;
}
.is-style-chiffre + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Rangée de logos : centrés, hauteur commune, en gris (couleur au survol). */
.wp-block-gallery.is-style-logos {
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50) !important;
}
.wp-block-gallery.is-style-logos > .wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
}
.wp-block-gallery.is-style-logos > .wp-block-image img {
	max-height: 4.5rem;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter 0.3s, opacity 0.3s;
}
.wp-block-gallery.is-style-logos > .wp-block-image:hover img {
	filter: none;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-logos > .wp-block-image img {
		transition: none;
	}
}

/* Pictogramme : petit, net, aligné sur le texte. */
.wp-block-image.is-style-picto img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
}
.wp-block-image.is-style-picto {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* ——— Traduction des maquettes (0.7.0) ——— */

/* Seconde photo du héros, petite, posée en chevauchement sur la première (classe wpsw-superposee). */
.wp-block-column:has(> .wpsw-superposee) {
	position: relative;
}
.wp-block-image.wpsw-superposee {
	position: absolute;
	width: 38%;
	left: -8%;
	bottom: -6%;
	margin: 0;
	z-index: 1;
}
/* Première photo légendée : la seconde se pose au-dessus de la légende, sans la cacher. */
.wp-block-column:has(> .wp-block-image:first-child figcaption) > .wpsw-superposee {
	bottom: 2.75rem;
}
.wp-block-image.wpsw-superposee img {
	border: 6px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--douce);
}
@media (max-width: 781px) {
	.wp-block-image.wpsw-superposee {
		position: static;
		width: 45%;
		margin-block-start: var(--wp--preset--spacing--30);
	}
}

/* Héros à photo bord à bord : la photo remplit sa moitié jusqu'au bord de l'écran ; le texte s'aligne sur la grille large. */
.wp-block-columns.alignfull.is-style-bord {
	gap: 0 !important;
	min-height: 70vh;
	margin-block: 0;
}
/* Sur une bande colorée, la bande ne garde pas de marge intérieure : la photo touche aussi le haut et le bas. */
.alignfull:has(> .wp-block-columns.is-style-bord:only-child) {
	padding-block: 0 !important;
}
.wp-block-columns.is-style-bord > .wp-block-column:has(> .wp-block-image) {
	align-self: stretch !important;
}
.wp-block-columns.is-style-bord > .wp-block-column > .wp-block-image:first-child {
	height: 100%;
	margin: 0;
}
.wp-block-columns.is-style-bord > .wp-block-column > .wp-block-image:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.wp-block-columns.is-style-bord > .wp-block-column:not(:has(> .wp-block-image)) {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--60);
}
.wp-block-columns.is-style-bord > .wp-block-column:not(:has(> .wp-block-image)):first-child {
	padding-inline-start: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}
.wp-block-columns.is-style-bord > .wp-block-column:not(:has(> .wp-block-image)):last-child {
	padding-inline-end: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}
@media (max-width: 781px) {
	.wp-block-columns.alignfull.is-style-bord {
		min-height: 0;
	}
	.wp-block-columns.is-style-bord > .wp-block-column > .wp-block-image:first-child img {
		height: 60vw;
	}
	.wp-block-columns.is-style-bord > .wp-block-column:not(:has(> .wp-block-image)) {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* Avis en vedette : grande citation typographique, alignée à gauche, guillemet d'accent. */
.wp-block-pullquote.is-style-vedette {
	text-align: start;
	border: 0;
	padding: 0;
	margin: 0;
}
.wp-block-pullquote.is-style-vedette blockquote::before {
	content: "“";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.6;
	padding-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent);
}
.wp-block-pullquote.is-style-vedette blockquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	line-height: 1.35;
}
.wp-block-pullquote.is-style-vedette cite {
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

/* Grille asymétrique : tuile photo avec texte posé dessus (bloc Couverture) qui remplit la tuile. */
.wp-block-group.is-style-bento > .wp-block-group:has(> .wp-block-cover:only-child) {
	padding: 0;
}
.wp-block-group.is-style-bento > .wp-block-group > .wp-block-cover:only-child {
	height: 100%;
	min-height: 12rem;
	margin: 0;
	align-items: flex-end;
}

/* ——— Logo et titre du site (0.17.0) ———
 * Les parties de modèle posent le logo (bloc « Logo du site », réglé dans Personnaliser › Identité du site)
 * et le titre texte dans un groupe `wpsw-marque`. Un logo choisi remplace le titre à l'écran ; le titre reste
 * lisible par les moteurs de recherche et les lecteurs d'écran. Taille et placement : à régler en CSS dans le
 * thème enfant (`.wpsw-marque .wp-block-site-logo img { width: … }`). */
.wp-block-site-logo { line-height: 0; }
.wp-block-site-logo img { height: auto; width: auto; max-width: 100%; max-height: 4.5rem; }
.wpsw-marque { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.wpsw-marque .wp-block-site-logo, .wp-block-site-logo { flex: none; }   /* le logo ne rétrécit pas quand le menu manque de place */
.wpsw-a-logo .wpsw-marque .wp-block-site-title {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ——— Menu du pied (0.18.0) ———
 * Le pied répète le menu principal (bloc Navigation `wpsw-menu-pied`, même menu que l'en-tête par défaut ; le client
 * en choisit un autre dans l'éditeur de site). Sur mobile le burger de l'en-tête reste visible : la rangée est masquée. */
.wpsw-rang-menu { margin-block-start: var(--wp--preset--spacing--40); padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wpsw-menu-pied { gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }
@media (max-width: 781px) { .wpsw-rang-menu, .wpsw-menu-pied { display: none; } }

/* ——— Mention de création (0.18.2) ———
 * Dernière ligne du pied, centrée : « Création & hébergement : expli.site » (lien). Couleur et soulignement suivent le pied. */
.wpsw-mention { text-align: center; margin-block-start: var(--wp--preset--spacing--40); opacity: 0.85; }
.wpsw-mention a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.wpsw-mention a:hover, .wpsw-mention a:focus-visible { opacity: 1; text-decoration-thickness: 2px; }

/* ——— Formes d'en-tête (0.24.0) ———
 * Les variantes d'en-tête de `variantes/entetes/` ne se distinguent plus seulement par le balisage : trois d'entre
 * elles ont besoin de CSS (barre flottante, en-tête posé sur l'accueil, menu plein écran) et une d'une grille à trois
 * cases (menu, logo centré, lien). Couleurs : jetons du thème, réglables par le thème enfant. */
.wpsw-entete-lien { margin: 0; }
.wpsw-entete-lien a { color: inherit; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: 0.1em; }
.wpsw-entete-lien a:hover, .wpsw-entete-lien a:focus-visible { border-block-end-width: 2px; }

/* Menu à gauche, logo au centre, lien à droite : trois cases égales, le logo reste au milieu quelle que soit la longueur du menu. */
.wpsw-entete-trois__rang { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wp--preset--spacing--40); }
.wpsw-entete-trois__rang > .wpsw-marque { justify-content: center; }
.wpsw-entete-trois__droite { justify-content: flex-end; }
@media (max-width: 781px) { .wpsw-entete-trois .wpsw-entete-trois__droite { display: none; } .wpsw-entete-trois__rang { grid-template-columns: 1fr auto; } .wpsw-entete-trois__rang > .wpsw-marque { grid-column: 1; grid-row: 1; justify-content: flex-start; } .wpsw-entete-trois__gauche { grid-column: 2; grid-row: 1; justify-content: flex-end; } }

/* Pilule : barre arrondie qui flotte au-dessus de la page et la suit. */
.wp-site-blocks > header:has(.wpsw-entete-pilule), .wp-site-blocks > .wp-block-template-part:has(.wpsw-entete-pilule) { position: sticky; top: var(--wp--preset--spacing--20); z-index: 50; margin-block: var(--wp--preset--spacing--20) 0; }
.wpsw-entete-pilule { padding-block: 0 !important; }
.wpsw-entete-pilule__barre {
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}
.wpsw-entete-pilule__barre .wp-block-button__link { border-radius: 999px; }

/* Transparent : sur l'accueil, l'en-tête se pose sur le haut de la première section (photo, aplat sombre) ; texte et logo clairs.
 * Ailleurs il reste une barre ordinaire. À réserver aux accueils dont la première section est foncée ou voilée. */
body.home .wp-site-blocks > header:has(.wpsw-entete-transparent), body.home .wp-site-blocks > .wp-block-template-part:has(.wpsw-entete-transparent) { position: absolute; inset-inline: 0; top: 0; z-index: 50; }
body.home .wp-site-blocks > header:has(.wpsw-entete-transparent) + *, body.home .wp-site-blocks > .wp-block-template-part:has(.wpsw-entete-transparent) + * { margin-block-start: 0; }   /* la première section remonte sous l'en-tête */
body.home .wpsw-entete-transparent, body.home .wpsw-entete-transparent a, body.home .wpsw-entete-transparent .wp-block-site-title a { color: var(--wpsw-entete-couleur, #fff); }
body.home .wpsw-entete-transparent .wp-block-navigation__responsive-container-open svg { fill: currentColor; }

/* Burger : le menu s'ouvre en plein écran, sur ordinateur comme sur mobile ; grands liens. */
.wpsw-entete-burger .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--60); }
.wpsw-entete-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: var(--wp--preset--spacing--50); }
.wpsw-entete-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); align-items: flex-start; }
.wpsw-entete-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.1; }

/* ——— Casse et alignement des héros (0.24.0) ———
 * Options `casse` et `alignement` des sections héros du build. Les majuscules sont un choix de direction artistique
 * à justifier dans DESIGN.md, plus un défaut ; les petites capitales conviennent aux titres à empattements. */
.wpsw-casse-majuscules { text-transform: uppercase; letter-spacing: 0.02em; }
.wpsw-casse-petites-capitales { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
.wpsw-texte-centre { text-align: center; }
.wpsw-texte-droite { text-align: right; }
.wp-block-buttons.wpsw-texte-centre { justify-content: center; }
.wp-block-buttons.wpsw-texte-droite { justify-content: flex-end; }
/* Texte d'un héros sur photo calé en haut ou en bas : marge latérale pour ne pas coller au bord de l'écran. */
.wp-block-cover.has-custom-content-position .wp-block-cover__inner-container { padding-inline: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--40); box-sizing: border-box; }

/* Héros vidéo (0.25.0) : bouton pause de la vidéo d'arrière-plan (Couverture `.wpsw-heros-video`). Il n'apparaît
   que si le script tourne (html.wpsw-video), puisqu'il ne fait rien sans lui. */
.wpsw-heros-video {
	position: relative;
}
.wpsw-video-pause {
	display: none;
	position: absolute;
	z-index: 3;
	inset-block-end: var(--wp--preset--spacing--30, 1rem);
	inset-inline-end: var(--wp--preset--spacing--30, 1rem);
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
}
.wpsw-video .wpsw-video-pause {
	display: grid;
	place-items: center;
}
/* Icônes dessinées en CSS (deux barres, triangle) : pas de dépendance à une police, nettes à toute taille. */
.wpsw-video-pause::before {
	content: '';
	box-sizing: border-box;
	inline-size: 0.8rem;
	block-size: 0.9rem;
	border-inline: 0.26rem solid currentColor;
}
.wpsw-video-pause.est-en-pause::before {
	inline-size: 0;
	block-size: 0;
	border-inline: 0;
	border-block: 0.5rem solid transparent;
	border-inline-start: 0.82rem solid currentColor;
	margin-inline-start: 0.15rem;
}
.wpsw-video-pause:is(:hover, :focus-visible) {
	background: rgb(0 0 0 / 0.8);
}
.wpsw-video-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}