/*
 * Rayons de Soleil — Lignes des heroes
 *
 * L’animation est entièrement gérée par hero-lines.js.
 * Ce fichier contrôle uniquement :
 * - la position du SVG ;
 * - ses dimensions ;
 * - l’ordre des calques.
 */


/* ==========================================================
   CONTENEUR DU HERO
   ========================================================== */

.rds-hero-lines-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}


/* ==========================================================
   CONTENEUR DES LIGNES
   ========================================================== */

/*
 * .rds-hero-lines :
 * SVG ajouté automatiquement par notre plugin.
 *
 * .hero-lines :
 * SVG Shape encore présent sur la page d’accueil.
 */

.rds-hero-lines,
.hero-rayons .hero-lines {
	position: absolute !important;

	top: -40px !important;
	bottom: auto !important;

	left: 50% !important;
	right: auto !important;

	width: 100vw !important;
	max-width: none !important;

	height: calc(100% + 80px) !important;

	margin: 0 !important;

	transform: translateX(-50%) !important;

	z-index: 2 !important;

	overflow: visible;
	pointer-events: none;
}


/* ==========================================================
   SVG
   ========================================================== */

.rds-hero-lines > svg,
.hero-rayons .hero-lines > svg,
.hero-rayons svg.hero-lines {
	display: block;

	width: 100% !important;
	max-width: none !important;

	height: 100% !important;

	overflow: visible;

	transform: scale(1.18);
	transform-origin: center center;

	pointer-events: none;
}


/* ==========================================================
   ORDRE DES CALQUES — HERO BLOCKSY
   ========================================================== */

/*
 * La photo reste derrière les lignes.
 */

.hero-section[data-type="type-2"] > figure,
.hero-section[data-type="type-2"] .ct-media-container {
	position: relative;
	z-index: 0;
}


/*
 * Le titre, les métadonnées et le fil d’Ariane
 * restent devant les lignes.
 */

.hero-section[data-type="type-2"] .entry-header,
.hero-section[data-type="type-2"] [class*="ct-container"] {
	position: relative;
	z-index: 3;
}


/* ==========================================================
   ORDRE DES CALQUES — HOME
   ========================================================== */

/*
 * Les colonnes contenant le logo, le texte et les boutons
 * restent devant les lignes.
 */

.hero-rayons .stk-block-column {
	position: relative;
	z-index: 3 !important;
}


/* ==========================================================
   OPTIMISATION DE L’ANIMATION
   ========================================================== */

/*
 * Aucun @keyframes ici :
 * stroke-dashoffset et opacity sont animés par JavaScript.
 */

.rds-hero-lines svg path,
.hero-rayons .hero-lines svg path,
.hero-rayons svg.hero-lines path {
	will-change: stroke-dashoffset, opacity;
}


/* ==========================================================
   TABLETTE ET MOBILE
   ========================================================== */

@media screen and (max-width: 689px) {
   
	   /* Contenedor de las líneas en mobile */
	   .rds-hero-lines,
	   .hero-rayons .hero-lines {
		   top: 280px !important;
		   left: 60px !important;
		   right: auto !important;
   
		   width: 140vw !important;
		   height: 100% !important;
   
		   margin: 0 !important;
		   transform: none !important;
   
		   z-index: 2 !important;
		   overflow: visible;
	   }
   
	   /* SVG */
	   .rds-hero-lines > svg,
	   .hero-rayons .hero-lines > svg,
	   .hero-rayons svg.hero-lines {
		   width: 100% !important;
		   height: 100% !important;
		   max-width: none !important;
   
		   transform: none !important;
		   transform-origin: left center !important;
		   overflow: visible;
	   }
   
	   /* Oculta la línea derecha */
	   .rds-hero-lines svg path:nth-of-type(1),
	   .hero-rayons .hero-lines svg path:nth-of-type(1),
	   .hero-rayons svg.hero-lines path:nth-of-type(1) {
		   display: none !important;
	   }
   
	   /* Mantiene y agranda la línea izquierda */
	   .rds-hero-lines svg path:nth-of-type(2),
	   .hero-rayons .hero-lines svg path:nth-of-type(2),
	   .hero-rayons svg.hero-lines path:nth-of-type(2) {
		   transform-box: fill-box;
		   transform-origin: left center;
		   transform: scale(3.5) translate(-22%, -18%);
	   }
   }

/* ==========================================================
   ORDRE DES CALQUES — HOME STACKABLE
   ========================================================== */

.hero-rayons {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
}


/*
 * Fond et superposition du hero.
 */
.hero-rayons .stk-block-background,
.hero-rayons .stk-block-background__image,
.hero-rayons .stk-block-overlay {
	z-index: 0 !important;
}


/*
 * Lignes animées.
 */
.hero-rayons .rds-hero-lines {
	z-index: 5 !important;
}


/*
 * Logo, texte, boutons et contenu du hero.
 */
.hero-rayons .stk-inner-blocks,
.hero-rayons .stk-block-content,
.hero-rayons .stk-block-column {
	position: relative !important;
	z-index: 10 !important;
}

/* ==========================================================
   MAINTENANCE — LIGNES ANIMÉES
   ========================================================== */

.rds-maintenance {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.rds-maintenance .rds-maintenance-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.rds-maintenance .rds-maintenance-lines svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rds-maintenance > *:not(.rds-maintenance-lines) {
	position: relative;
	z-index: 2;
	
}
/* ==========================================================
   MAINTENANCE — POSITION DES LIGNES
   ========================================================== */

.rds-maintenance {
	position: relative;
	overflow: hidden;
}

.rds-maintenance .rds-maintenance-lines {
	position: absolute;

	top: -5%;
	left: -12.5%;

	width: 125%;
	height: 110%;

	pointer-events: none;
	z-index: 0;
}

.rds-maintenance .rds-maintenance-lines svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* ==========================================================
   MAINTENANCE — MOBILE
   UNE SEULE LIGNE, PLUS GRANDE
   ========================================================== */

@media (max-width: 689.98px) {

	.rds-maintenance .rds-maintenance-lines {
		position: absolute;
		inset: 0 !important;

		width: 100% !important;
		height: 100% !important;

		overflow: visible;
		pointer-events: none;
		z-index: 0;
	}

	.rds-maintenance .rds-maintenance-lines svg {
		display: block;
		width: 100% !important;
		height: 100% !important;
		overflow: visible;
	}

	.rds-maintenance .rds-maintenance-lines svg path {
		transform-box: fill-box;
	}

	/* On masque la ligne droite */
	.rds-maintenance .rds-maintenance-lines svg path:nth-of-type(1) {
		display: none !important;
	}

	/* On garde la ligne gauche, plus grande */
	.rds-maintenance .rds-maintenance-lines svg path:nth-of-type(2) {
		transform-origin: left center;
		transform: translate(-50%, 8%) scale(4.5);
	}
}