/* Hélion – blocs Gutenberg : règles reprises de Musea et du CSS additionnel du site. */

/* Reprises de Musea */
.aligncenter { clear: both; display: block; margin: 10px auto; }
.alignleft { display: inline; float: left; margin: 0 20px 20px 0; }
.alignright { display: inline; float: right; margin: 0 0 20px 20px; }
.wp-block-image img { display: block; }
.wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright { max-width: 100%; }
.wp-block-image.alignleft { margin-right: 20px; }
.wp-block-audio figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-image figcaption, .wp-block-video figcaption { font-size: .71111em; font-family: inherit; line-height: 1.6; margin: 0; padding: .5rem; text-align: center; }
@media (min-width: 768px) {
	.wp-block-columns .wp-block-column > :first-child { margin-top: 0; }
	.wp-block-columns .wp-block-column > :last-child { margin-bottom: 0; }
	.wp-block-columns[class*=has-] > * { margin-right: 1rem; }
	.wp-block-columns[class*=has-] > :last-child { margin-right: 0; }
}
.wp-block-preformatted { padding: 15px; white-space: pre-wrap; word-wrap: break-word; }
.wp-block-gallery { list-style-type: none; padding-left: 0; }
.wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child { margin-bottom: 16px; }

/* Repris du CSS additionnel (Personnaliser) de Musea */
.biobleu { border-radius: 50px; overflow: hidden; margin: 2% 0; padding: 2%; }

/* Bouton à cadre ouvert animé (« outline-slit » de Musea) : le cadre se referme au survol, texte bleu. */
.helion-bouton {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 8px 43px 10px;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 2em;
	letter-spacing: .07em;
	color: #525252;
	border: 1px solid transparent;
	transition: color .2s ease-in-out;
}
.helion-bouton:hover { color: #77bbff; }
.helion-bouton svg { position: absolute; top: 0; left: 0; width: 100%; height: 50px; overflow: visible; }
.helion-bouton svg rect { width: 100%; height: 50px; fill: transparent; stroke: #77bbff; stroke-width: 2px; stroke-dasharray: 330% 25; stroke-dashoffset: 240%; transition: 2s; }
.helion-bouton:hover svg rect { stroke-dashoffset: -113%; }
.helion-bouton__texte { position: relative; vertical-align: text-top; }

/* ---------- Grand visuel (bloc Couverture, style « Hélion ») : reprise du diaporama Musea « main-home ». ----------
 * Plein écran ; calques centrés puis décalés (paliers de Revolution Slider : ≥1240, 1024–1239, 778–1023, ≤777) ;
 * fond légèrement zoomé qui glisse de 30 px en 6 s ; textes qui montent en fondu. */
.wp-block-cover.is-style-helion-hero { position: relative; min-height: 100vh !important; padding: 0; overflow: hidden; margin-top: 0; margin-bottom: 0; }
.wp-block-cover.is-style-helion-hero .wp-block-cover__image-background { transform: scale(1.05) translate(0, 0); }
.wp-block-cover.is-style-helion-hero .wp-block-cover__inner-container { position: absolute; inset: 0; width: 100%; max-width: none; color: inherit; }
.is-style-helion-hero .helion-hero__titre,
.is-style-helion-hero .helion-hero__filet,
.is-style-helion-hero .helion-hero__dates { position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap; text-align: center; }
.is-style-helion-hero .helion-hero__titre {
	--x: -416px; --y: -220px;
	transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
	font-family: "EB Garamond", Georgia, serif;
	font-size: 71px;
	line-height: 87px;
	letter-spacing: 13.2px;
	text-transform: uppercase;
	color: #77bbff;
	text-shadow: #000 2px 2px 1px;
}
.is-style-helion-hero .helion-hero__filet {
	--x: -476px; --y: -157px;
	transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
	width: 147px;
	height: 1px;
	border: 0;
	background: #77bbff;
	opacity: 1;
}
.is-style-helion-hero .helion-hero__dates {
	--x: -475px; --y: -116px;
	transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
	font-family: "EB Garamond", Georgia, serif;
	font-size: 54px;
	font-style: italic;
	line-height: 35px;
	letter-spacing: 6px;
	color: #fff;
	text-shadow: rgba(0, 0, 0, .25) 5px 5px 0;
}
@media (max-width: 1239px) {
	.is-style-helion-hero .helion-hero__titre { --x: 4px; --y: 0px; font-size: 55px; line-height: 60px; letter-spacing: 10px; }
	.is-style-helion-hero .helion-hero__filet { --x: -417px; --y: 0px; }
	.is-style-helion-hero .helion-hero__dates { --x: 0px; --y: -70px; }
}
@media (max-width: 1023px) {
	.is-style-helion-hero .helion-hero__titre { --x: 0px; --y: -34px; line-height: 75px; letter-spacing: 11px; }
	.is-style-helion-hero .helion-hero__filet { --x: -287px; --y: -34px; width: 100px; }
	.is-style-helion-hero .helion-hero__dates { --y: -141px; }
}
@media (max-width: 777px) {
	.is-style-helion-hero .helion-hero__titre { font-size: 45px; line-height: 65px; }
	.is-style-helion-hero .helion-hero__filet { --y: -55px; }
	.is-style-helion-hero .helion-hero__dates { --y: -132px; }
}
@media (prefers-reduced-motion: no-preference) {
	.js .wp-block-cover.is-style-helion-hero .wp-block-cover__image-background { animation: helion-hero-fond 6s linear both; }
	.js .is-style-helion-hero .helion-hero__titre { animation: helion-hero-monte 1s cubic-bezier(.23, 1, .32, 1) .5s both; }
	.js .is-style-helion-hero .helion-hero__dates { animation: helion-hero-monte 1s cubic-bezier(.23, 1, .32, 1) .4s both; }
	.js .is-style-helion-hero .helion-hero__filet { animation: helion-hero-glisse 1s ease .5s both; }
}
@keyframes helion-hero-fond { from { transform: scale(1.05) translate(30px, 30px); } to { transform: scale(1.05) translate(0, 0); } }
@keyframes helion-hero-monte {
	from { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(50% + var(--y))); }
	to { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
}
@keyframes helion-hero-glisse {
	from { opacity: 0; transform: translate(calc(50% + var(--x)), calc(-50% + var(--y))); }
	to { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
}

/* Blocs pleine largeur : débordent du conteneur jusqu'aux bords de l'écran. */
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ---------- Galerie « Mosaïque » (reprise de l'Image Gallery masonry de Musea) ----------
 * 4 / 3 / 2 / 1 colonnes (>1024, >768, >680, sinon) ; 15 px de chaque côté, 30 px sous chaque image ;
 * placement dans la colonne la plus courte par assets/js/mosaique.js (sans script : grille simple). */
.wp-block-gallery.is-style-helion-mosaique { position: relative; display: block !important; margin: 0 -15px !important; padding: 0; gap: 0 !important; }
.wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image {
	display: block;
	float: left;
	width: 25% !important;
	margin: 0 0 30px !important;
	padding: 0 15px;
	box-sizing: border-box;
}
.wp-block-gallery.is-style-helion-mosaique::after { content: ""; display: table; clear: both; }
.wp-block-gallery.is-style-helion-mosaique.est-placee > figure.wp-block-image { position: absolute; float: none; }
.wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image a { position: relative; display: block; }
.wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image img { display: block; width: 100% !important; height: auto !important; object-fit: initial !important; }
.wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image a::after { content: ""; position: absolute; inset: 0; background-color: rgba(56, 56, 56, .4); opacity: 0; transition: opacity .2s ease-in-out; }
.wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image a:hover::after { opacity: 1; }
@media (max-width: 1024px) { .wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image { width: 33.3333% !important; } }
@media (max-width: 768px) { .wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image { width: 50% !important; } }
@media (max-width: 680px) { .wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image { width: 100% !important; } }

/* Séparateur court centré (eltdf_separator de Musea, largeur 3 %) */
.wp-block-separator.is-style-helion-court { width: 3%; max-width: none; margin: 10px auto !important; border: 0; border-bottom: 1px solid #ebebeb; background: none; opacity: 1; height: 0; }

/* Colonnes de la biographie de l'accueil (« Elements Holder » de Musea : 3 cellules, marges par palier). */
.wp-block-columns.is-style-helion-trois { gap: 0; margin: 0; align-items: center; }
.wp-block-columns.is-style-helion-trois > .wp-block-column { flex: 0 0 33.3333% !important; margin: 0 !important; box-sizing: border-box; align-self: center; } /* cellules de 33 % marges comprises, centrées verticalement, comme Musea */
/* Musea n'utilisait pas les colonnes WordPress ici : les paragraphes gardent leurs marges de 10 px. */
.wp-block-columns.is-style-helion-trois > .wp-block-column > p:first-child { margin-top: 10px; }
.wp-block-columns.is-style-helion-trois > .wp-block-column > :last-child { margin-bottom: 0; } /* comme .wpb_text_column, à toutes les largeurs */
.wp-block-columns.is-style-helion-trois .wp-block-image { margin: 0; }
.helion-eh--1 { padding: 0 60px 0 0; }
.helion-eh--2 { padding: 0 5px; }
.helion-eh--3 { padding: 3px 0 47px 60px; }
@media (max-width: 1399px) {
	.helion-eh--1 { padding: 0 30px 0 0; }
	.helion-eh--3 { padding: 3px 0 47px 30px; }
}
@media (max-width: 1024px) {
	.wp-block-columns.is-style-helion-trois { flex-wrap: wrap !important; }
	.wp-block-columns.is-style-helion-trois > .wp-block-column { flex-basis: 100% !important; }
	.helion-eh--1 { padding: 0 0 71px; }
	.helion-eh--2 { padding: 0; }
	.helion-eh--3 { padding: 61px 0 0; }
}

/* Colonne de la page Contact (une cellule de l'Elements Holder, marge droite 85 px). */
.helion-eh-contact { padding-right: 85px; }
@media (max-width: 1024px) { .helion-eh-contact { padding: 0 0 67px; } }
@media (max-width: 680px) { .wp-block-gallery.is-style-helion-mosaique > figure.wp-block-image:last-child { margin-bottom: 0 !important; } }

.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }