/**
 * YEP'S Formes décoratives en arrière-plan des sections scroll.
 *
 * Positions (9 cases), tailles (S/M/L scalées en clamp() pour mobile),
 * opacité continue (variable --yeps-deco-opacity), animations float infinies (3 keyframes en
 * rotation pour éviter la synchronicité), oscillation rotative (swing)
 * sur le SVG enfant synchronisée sur le même cycle pour un feeling
 * « bouée flottante ».
 *
 * Le SVG enfant porte la rotation statique éditeur + l'oscillation animée
 * (swing) ; le wrapper porte la translation du float. Ces deux animations
 * sont indépendantes mais tournent à la même durée pour rester synchrones.
 */

/* Rendre la variable d'angle interpolable, sinon les keyframes du swing
 * sauteraient au lieu de transitionner en continu. */
@property --yeps-deco-swing {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.yeps-scroll-section {
	position: relative;
	/* Pas d'overflow: hidden : on autorise les formes décoratives à déborder
	 * intentionnellement sur la section adjacente via offsetX/offsetY. Le
	 * clipping global est posé plus haut sur .wp-site-blocks pour éviter
	 * toute scrollbar parasite (cf. plus bas). */
}

/* Garde-fou anti-scrollbars : les formes décoratives sont purement
 * esthétiques. Quand elles débordent (offsetX/Y = ±100), elles ne doivent
 * jamais créer de scrollbar horizontale ni verticale sur la page.
 * - overflow: clip sur le wrapper de site clippe les deux axes au niveau
 *   du conteneur global (les sections internes restent libres de
 *   déborder entre elles, le clip se fait à la frontière extérieure).
 * - overflow-x: clip sur html/body est une ceinture-bretelles contre toute
 *   autre source de débordement horizontal.
 * overflow: clip ≠ hidden : ne crée pas de contexte de défilement, donc
 *   ne casse pas le scroll vertical normal du body. */
html, body { overflow-x: clip; }
.wp-site-blocks { overflow: clip; }

/* Couche décorative : un wrapper par bloc consommateur. Les règles communes
 * (position, pointer-events) sont mutualisées ; les ancrages horizontaux et
 * le z-index dépendent du bloc parent (cf. blocs ci-dessous). Les classes
 * internes `.yeps-deco--*` restent block-agnostiques. */
.yeps-scroll-section__decos,
.yeps-hero-video__decos {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

/* scroll-section : la section est alignfull (fond coloré bord à bord). La
 * couche shape s'étend simplement de bord à bord de la section, et le
 * recadrage sur l'aire wide-size est porté par .yeps-scroll-section__inner.
 * z-index 0 (sous .yeps-scroll-section__inner). */
.yeps-scroll-section__decos {
	left: 0;
	right: 0;
	z-index: 0;
}

/* hero-video : section alignfull, donc l'inset gauche/droite collerait au
 * bord du viewport. On reconstruit ici l'aire wide-size (1400 px par
 * défaut, alignée sur la grille interne du hero-video) centrée : les ancres
 * top-left/top-right/etc. des formes se calent alors sur le contenu,
 * exactement comme dans scroll-section. z-index 1 (entre __media à z 0/auto
 * et __content/__cta à z 2). Desktop : __media est forcé à z-index 0 par
 * Yeps_DS_Responsive_CSS pour rester sous cette couche. */
.yeps-hero-video__decos {
	left: 50%;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	transform: translateX(-50%);
	z-index: 1;
}

.yeps-scroll-section__inner {
	position: relative;
	z-index: 1;
}

.yeps-deco {
	position: absolute;
	color: var(--yeps-deco-color, currentColor);
	/* Opacité continue (0-1) injectée en inline-style par render.php /
	 * deco-shape-layer.js. Défaut = ancien palier « Moyenne ». */
	opacity: var(--yeps-deco-opacity, 0.55);
	pointer-events: none;
	user-select: none;
	line-height: 0;

	/* Composition translate = centrage de la position + décalage éditeur.
	 * Les deux paires de variables s'additionnent. Les variables --offset-*
	 * sont injectées en inline-style par render.php / deco-shape-layer.js. */
	--yeps-deco-tx-center: 0%;
	--yeps-deco-ty-center: 0%;
	--yeps-deco-offset-x: 0%;
	--yeps-deco-offset-y: 0%;
	translate:
		calc(var(--yeps-deco-tx-center) + var(--yeps-deco-offset-x))
		calc(var(--yeps-deco-ty-center) + var(--yeps-deco-offset-y));
}

.yeps-deco svg {
	width: 100%;
	height: auto;
	/* rotate (propriété individuelle, ≠ transform) compose la rotation
	 * statique éditeur et le swing animé. transform reste libre pour
	 * d'autres usages éventuels. */
	rotate: calc(var(--yeps-deco-rotation, 0deg) + var(--yeps-deco-swing));
	transform-origin: center;
}

/* Tailles fluides : la borne max suit la taille « maquette »,
 * la borne min garde une présence sur mobile sans dominer. XL et XXL
 * donnent de la place pour des compositions héros plus affirmées. */
.yeps-deco--size-s   { width: clamp( 40px,  6vw,  80px); }
.yeps-deco--size-m   { width: clamp( 80px, 12vw, 160px); }
.yeps-deco--size-l   { width: clamp(120px, 20vw, 260px); }
.yeps-deco--size-xl  { width: clamp(180px, 28vw, 380px); }
.yeps-deco--size-xxl { width: clamp(240px, 36vw, 500px); }

/* Positions : inset de 2rem sur les coins, centrage via variables pour les
 * médianes (additionnable avec le décalage éditeur). */
.yeps-deco--pos-top-left      { top: 2rem;    left: 2rem; }
.yeps-deco--pos-top-center    { top: 2rem;    left: 50%;   --yeps-deco-tx-center: -50%; }
.yeps-deco--pos-top-right     { top: 2rem;    right: 2rem; }
.yeps-deco--pos-middle-left   { top: 50%;     left: 2rem;  --yeps-deco-ty-center: -50%; }
.yeps-deco--pos-middle-center { top: 50%;     left: 50%;   --yeps-deco-tx-center: -50%; --yeps-deco-ty-center: -50%; }
.yeps-deco--pos-middle-right  { top: 50%;     right: 2rem; --yeps-deco-ty-center: -50%; }
.yeps-deco--pos-bottom-left   { bottom: 2rem; left: 2rem; }
.yeps-deco--pos-bottom-center { bottom: 2rem; left: 50%;   --yeps-deco-tx-center: -50%; }
.yeps-deco--pos-bottom-right  { bottom: 2rem; right: 2rem; }

/* Animations float (sur le wrapper, pas le SVG) : 3 keyframes en alternance. */
@keyframes yeps-deco-float-a {
	0%, 100% { transform: translate(0, 0); }
	33%      { transform: translate(-10px, -18px); }
	66%      { transform: translate(8px, -8px); }
}
@keyframes yeps-deco-float-b {
	0%, 100% { transform: translate(0, 0); }
	33%      { transform: translate(6px, 12px); }
	66%      { transform: translate(-8px, 6px); }
}
@keyframes yeps-deco-float-c {
	0%, 100% { transform: translate(0, 0); }
	33%      { transform: translate(-5px, 8px); }
	66%      { transform: translate(7px, -5px); }
}

.yeps-deco--animate {
	animation: yeps-deco-float-a 9s var(--wp--custom--yeps--motion--easing--in-out, ease-in-out) infinite;
}
.yeps-deco--animate:nth-of-type(3n+2) {
	animation-name: yeps-deco-float-b;
	animation-duration: 7.5s;
}
.yeps-deco--animate:nth-of-type(3n+3) {
	animation-name: yeps-deco-float-c;
	animation-duration: 8.5s;
}

/* Swing (oscillation rotative) sur le SVG enfant, synchronisé sur le même
 * cycle que le float pour un feeling « bouée ». 3 keyframes en rotation
 * comme pour le float, branchés via le même nth-of-type. */
@keyframes yeps-deco-swing-a {
	0%, 100% { --yeps-deco-swing: 0deg; }
	33%      { --yeps-deco-swing: 6deg; }
	66%      { --yeps-deco-swing: -3deg; }
}
@keyframes yeps-deco-swing-b {
	0%, 100% { --yeps-deco-swing: 0deg; }
	33%      { --yeps-deco-swing: -8deg; }
	66%      { --yeps-deco-swing: 6deg; }
}
@keyframes yeps-deco-swing-c {
	0%, 100% { --yeps-deco-swing: 0deg; }
	33%      { --yeps-deco-swing: 14deg; }
	66%      { --yeps-deco-swing: -10deg; }
}

.yeps-deco--animate svg {
	animation: yeps-deco-swing-a 9s var(--wp--custom--yeps--motion--easing--in-out, ease-in-out) infinite;
}
.yeps-deco--animate:nth-of-type(3n+2) svg {
	animation-name: yeps-deco-swing-b;
	animation-duration: 7.5s;
}
.yeps-deco--animate:nth-of-type(3n+3) svg {
	animation-name: yeps-deco-swing-c;
	animation-duration: 8.5s;
}

/* Le centrage des positions médianes utilise désormais la propriété
 * `translate` (et non `transform`), donc l'animation `transform` peut
 * cohabiter sans écraser le centrage. Plus besoin de couper le float
 * sur les positions centrées. */

@media (prefers-reduced-motion: reduce) {
	.yeps-deco--animate,
	.yeps-deco--animate svg { animation: none; }
}

/* Les règles responsive dépendantes du breakpoint mobile (tailles
 * resserrées pour L/XL/XXL, classe --hide-mobile) vivent désormais
 * dans le CSS inline généré par Yeps_DS_Responsive_CSS, pour que le
 * seuil soit piloté par l'option admin Design system. */

/* Préview éditeur : la canvas Gutenberg n'a pas la même hauteur de section
 * que le front. On garde le même DOM mais on tasse les insets pour rester
 * visible dans les wrappers de bloc (wp-block-yeps-*). */
.wp-block-yeps-scroll-section .yeps-deco--pos-top-left,
.wp-block-yeps-scroll-section .yeps-deco--pos-top-right,
.wp-block-yeps-hero-video     .yeps-deco--pos-top-left,
.wp-block-yeps-hero-video     .yeps-deco--pos-top-right       { top: 1rem; }
.wp-block-yeps-scroll-section .yeps-deco--pos-bottom-left,
.wp-block-yeps-scroll-section .yeps-deco--pos-bottom-right,
.wp-block-yeps-hero-video     .yeps-deco--pos-bottom-left,
.wp-block-yeps-hero-video     .yeps-deco--pos-bottom-right    { bottom: 1rem; }