/*
 * Styles des blocs du cœur pour le contenu du Mag, enregistrés par ssd-actu
 * (src/Module/Blocks.php) : le contenu converti garde son aspect, quel que
 * soit le thème. Repris des sections de mag-ssd-theme/style.css.
 */

/* Groupe « Encadré » : texte sur fond gris (section_background). */
.wp-block-group.is-style-ssd-actu-encadre {
	padding: 30px 40px;
	background-color: #f5f4f4;
	color: #000;
}

/* Groupe « Mise en avant » : texte en grand, entre deux filets (highlight). */
.wp-block-group.is-style-ssd-actu-mise-en-avant {
	position: relative;
	padding: 20px 0;
	color: #00b5e2;
	font-size: 36px;
	font-weight: 900;
	line-height: 1;
}

.wp-block-group.is-style-ssd-actu-mise-en-avant::before,
.wp-block-group.is-style-ssd-actu-mise-en-avant::after {
	content: "";
	position: absolute;
	left: 0;
	width: 180px;
	height: 7px;
	background-color: #00b5e2;
}

.wp-block-group.is-style-ssd-actu-mise-en-avant::before {
	top: 0;
}

.wp-block-group.is-style-ssd-actu-mise-en-avant::after {
	bottom: 0;
}

/* Citation du Mag (quote). */
.wp-block-quote.is-style-ssd-actu-citation {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding: 0 0 25px;
	border: 0;
	color: #00b5e2;
	font-size: 26px;
	font-style: italic;
	font-weight: 900;
	line-height: 1.2;
}

.wp-block-quote.is-style-ssd-actu-citation::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 7px;
	background-color: #00b5e2;
}

.wp-block-quote.is-style-ssd-actu-citation p {
	margin: 0 0 20px;
}

.wp-block-quote.is-style-ssd-actu-citation cite {
	display: block;
	color: var(--wp--preset--color--primary, #003a78);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}

@media (max-width: 574.98px) {
	.wp-block-quote.is-style-ssd-actu-citation {
		font-size: 22px;
	}
}

/* Citation illustrée : portrait rond à côté de la citation (media-text). */
.wp-block-media-text.is-style-ssd-actu-citation-illustree {
	align-items: center;
}

.wp-block-media-text.is-style-ssd-actu-citation-illustree .wp-block-media-text__media img {
	width: 180px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.wp-block-media-text.is-style-ssd-actu-citation-illustree .wp-block-media-text__content {
	padding-right: 0;
}

/* Bouton du Mag (.cta). */
.wp-block-button.is-style-ssd-actu-bouton .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 300px;
	min-height: 60px;
	padding: 0 15px;
	border: 2px solid var(--wp--preset--color--primary, #003a78);
	border-radius: 30px;
	background-color: var(--wp--preset--color--primary, #003a78);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	transition: background-color 300ms ease, color 300ms ease;
}

.wp-block-button.is-style-ssd-actu-bouton .wp-block-button__link:hover,
.wp-block-button.is-style-ssd-actu-bouton .wp-block-button__link:focus-visible {
	background-color: #fff;
	color: var(--wp--preset--color--primary, #003a78);
}

@media (max-width: 574.98px) {
	.wp-block-button.is-style-ssd-actu-bouton .wp-block-button__link {
		min-width: 0;
	}
}

/* Interstice : bande pleine largeur sur image de fond (interstice_type_1). */
.wp-block-cover.is-style-ssd-actu-interstice {
	min-height: 100vh;
	padding-top: 50px;
	padding-bottom: 100px;
	color: #fff;
}

.wp-block-cover.is-style-ssd-actu-interstice h2 {
	margin-bottom: 15vh;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

.wp-block-cover.is-style-ssd-actu-interstice p {
	font-size: 30px;
	font-weight: 500;
	line-height: 35px;
}

.wp-block-cover.is-style-ssd-actu-interstice p:not(:last-child) {
	margin-bottom: 130px;
}

/* Galerie « Diaporama du Mag » : repris de .gallery-content (format galerie de mag-ssd-theme). Une
 * image par ligne, numéro et légende (titre, légende, crédit) dessous. */
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama {
	display: block;
	counter-reset: ssd-actu-diapo;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	width: 100%;
	margin: 0 0 60px;
	counter-increment: ssd-actu-diapo;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:last-child {
	margin-bottom: 0;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image img {
	grid-row: 1;
	grid-column: 1 / -1;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
/* Le numéro prend le pseudo-élément que le cœur utilise pour le flou sous la légende : tout est remis à plat. */
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image)::before {
	position: static;
	max-height: none;
	backdrop-filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	background: rgba(0, 181, 226, 0.1);
	display: flex;
	grid-row: 2;
	grid-column: 1;
	align-items: center;
	box-sizing: border-box;
	height: 115px;
	padding: 0 20px;
	color: var(--wp--preset--color--primary, #003a78);
	font-size: 65px;
	font-weight: 400;
	line-height: 1;
	content: counter(ssd-actu-diapo, decimal-leading-zero);
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image) figcaption {
	position: static;
	grid-row: 2;
	grid-column: 2;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--wp--preset--color--primary, #003a78);
	font-size: 18px;
	line-height: 1.2;
	text-align: left;
	text-shadow: none;
}
/* Titre de la photo : le gras de la légende (conversion : titre en gras, légende, crédit). Pas
 * `::first-line` : sur mobile, le titre tient sur plusieurs lignes. */
.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image) figcaption strong {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
}
@media (max-width: 767.98px) {
	.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image) figcaption strong {
		font-size: 22px;
	}
	.wp-block-gallery.has-nested-images.is-style-ssd-actu-diaporama figure.wp-block-image:not(#individual-image)::before {
		height: 90px;
		font-size: 44px;
	}
}

/* Galerie « Défilant » : une rangée de trois images qui défile (couvertures
 * du magazine sur l'accueil, repris de .flex-abonnements__magazines). Les
 * flèches sont ajoutées au rendu (Blocks::scrolling_gallery). */
.ssd-actu-defilant {
	position: relative;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant {
	flex-wrap: nowrap;
	gap: 50px;
	margin: 0;
	padding: 0 10px 12px 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant::-webkit-scrollbar {
	display: none;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant figure.wp-block-image:not(#individual-image) {
	flex: 0 0 calc((100% - 100px) / 3);
	width: auto;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}
.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant figure.wp-block-image img {
	height: auto;
	aspect-ratio: 580 / 859;
	contain-intrinsic-size: none;
	object-fit: cover;
	box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.8);
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: translateY(-50%);
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche::before {
	display: block;
	width: 18px;
	height: 18px;
	margin: auto;
	border-top: 4px solid #fff;
	border-left: 4px solid #fff;
	content: "";
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche--precedent {
	left: -60px;
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche--precedent::before {
	transform: rotate(-45deg);
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche--suivant {
	right: -60px;
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche--suivant::before {
	transform: rotate(135deg);
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche:disabled {
	opacity: 0;
	cursor: default;
}
.ssd-actu-defilant .ssd-actu-carrousel__fleche:focus-visible {
	outline: 2px solid #fff;
}
@media (max-width: 991.98px) {
	.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant {
		gap: 20px;
	}
	.wp-block-gallery.has-nested-images.is-style-ssd-actu-defilant figure.wp-block-image:not(#individual-image) {
		flex-basis: 70%;
	}
	.ssd-actu-defilant .ssd-actu-carrousel__fleche {
		display: none;
	}
}