/* =========================================================
   HSI – Composants réutilisables (styleguide / accueil)
   Shortcodes déclarés dans init-oaka-modules-hsi.php
   ========================================================= */

:root {
	--hsi-vert: var(--gcid-primary-color, #538b71);
	--hsi-vert-fonce: #234f3b;
	--hsi-vert-clair: var(--gcid-body-color, #d9ebd9);
	--hsi-texte: #1d1d1b;
	--hsi-fond-clair: #f4f7f4;
}


/* ---------------------------------------------------------
   Lien souligné "En apprendre plus"
   --------------------------------------------------------- */
a.hsi-lien,
.hsi-lien a {
	color: var(--hsi-texte);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: color .2s ease, text-underline-offset .2s ease;
}
a.hsi-lien:hover,
a.hsi-lien:focus-visible,
.hsi-lien a:hover,
.hsi-lien a:focus-visible {
	color: var(--hsi-vert);
	text-underline-offset: 9px;
}


/* ---------------------------------------------------------
   Bouton rond de défilement (hero)
   --------------------------------------------------------- */
.hsi-defiler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	color: #fff;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hsi-defiler:hover,
.hsi-defiler:focus-visible {
	background: #fff;
	color: var(--hsi-vert);
	transform: translateY(3px);
}
.hsi-defiler svg { width: 26px; height: 26px; }

/* Le décor du hero déborde (panneau à gauche, pointe basse de l'éclair) : on le coupe aux bords du hero */
.hsi-hero { overflow: clip; }


/* ---------------------------------------------------------
   Décor "double ligne + panneau + éclair" (même principe que le pied de page)
   [hsi_ligne_deco defiler="#hsi-carte"]

   Tout est proportionnel à --g, l'écart entre les deux traits :
   l'éclair est la double ligne elle-même qui se transforme en éclair
   (ligne_eclair_raccord_blanc.svg : écart des traits = 3.77 unités, viewBox 46 x 67,
   trait du haut à 37.37 unités du haut, pointe à 41.16 unités du bord gauche).
   --------------------------------------------------------- */
.hsi-deco {
	--g: clamp(14px, 2.5vw, 48px);
	--k: calc(var(--g) / 3.77);
	--hsi-deco-couleur: rgba(255, 255, 255, .55);
	--hsi-deco-pointe: 3%; /* distance entre la pointe de l'éclair et le bord droit */
	position: relative;
	width: 100%;
	height: var(--g);
	pointer-events: none;
}
/* Double trait, jusqu'au raccord de l'éclair */
.hsi-deco__ligne {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(var(--hsi-deco-pointe) + var(--k) * 41.16);
	border-top: 1px solid var(--hsi-deco-couleur);
	border-bottom: 1px solid var(--hsi-deco-couleur);
}
.hsi-deco__panneau,
.hsi-deco__eclair {
	position: absolute;
	max-width: none !important;
	opacity: .55;
}
/* Panneau posé sur le trait du haut, à gauche (en partie hors cadre comme sur la maquette) */
.hsi-deco__panneau {
	left: calc(var(--k) * -6);
	bottom: calc(100% - var(--k) * .65);
	width: calc(var(--k) * 49);
	height: auto;
}
/* Éclair : prolonge exactement les deux traits */
.hsi-deco__eclair {
	top: calc(var(--k) * -37.37);
	right: calc(var(--hsi-deco-pointe) - var(--k) * 4.84);
	width: calc(var(--k) * 46);
	height: calc(var(--k) * 67);
}
/* Flèche entre les deux traits, au pied de l'éclair */
.hsi-deco .hsi-defiler {
	position: absolute;
	right: calc(var(--hsi-deco-pointe) - 10px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	z-index: 1;
}
.hsi-deco .hsi-defiler:hover,
.hsi-deco .hsi-defiler:focus-visible { transform: translateY(calc(-50% + 3px)); }

@media (max-width: 767px) {
	.hsi-deco .hsi-defiler { width: 44px; height: 44px; right: 16px; }
}
}


/* ---------------------------------------------------------
   Carte de France à puces
   --------------------------------------------------------- */
.hsi-carte {
	position: relative;
	width: 100%;
	aspect-ratio: var(--hsi-ratio, 353.54 / 239.45);
}
.hsi-carte__fond {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hsi-carte__puces {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* La pointe de la puce est posée sur (x, y) */
.hsi-puce {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 7.5%;
	min-width: 26px;
	max-width: 52px;
	padding: 0 !important;
	transform: translate(-50%, -100%);
	z-index: 1;
}
.hsi-puce:hover,
.hsi-puce:focus-within,
.hsi-puce.is-ouvert { z-index: 3; }

.hsi-puce__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: 8px;
}
.hsi-puce__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hsi-puce__pin {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 4px 4px rgba(35, 79, 59, .25));
	transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s ease;
}
.hsi-puce:hover .hsi-puce__pin,
.hsi-puce:focus-within .hsi-puce__pin {
	transform: translateY(-6px) scale(1.12);
	filter: drop-shadow(0 10px 8px rgba(35, 79, 59, .35));
}

/* Info-bulle (bloc vert foncé : picto | libellé italique | valeur | unité verticale) */
.hsi-puce__info {
	position: absolute;
	left: calc(100% + 10px);
	top: 30%;
	display: flex;
	align-items: center;
	gap: 10px;
	/* La puce est étroite : sans max-content, le bloc est rétréci et l'unité déborde */
	width: max-content;
	padding: 8px 12px 8px 10px;
	border-radius: 4px;
	background: var(--hsi-vert-fonce);
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(35, 79, 59, .25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-6px, -50%);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hsi-puce--gauche .hsi-puce__info {
	left: auto;
	right: calc(100% + 10px);
	transform: translate(6px, -50%);
}

.hsi-puce:hover .hsi-puce__info,
.hsi-puce:focus-within .hsi-puce__info,
.hsi-puce.is-ouvert .hsi-puce__info {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition: opacity .2s ease, transform .2s ease;
}
/* Une autre puce est survolée : la puce ouverte par défaut se referme */
.hsi-carte:has(.hsi-puce:hover, .hsi-puce:focus-within) .hsi-puce.is-ouvert:not(:hover):not(:focus-within) .hsi-puce__info {
	opacity: 0;
	visibility: hidden;
}
.hsi-carte:has(.hsi-puce:hover, .hsi-puce:focus-within) .hsi-puce.is-ouvert:not(:hover):not(:focus-within) { z-index: 1; }

.hsi-puce__picto {
	width: 22px;
	height: auto;
	padding-right: 10px;
	border-right: 1px solid rgba(255, 255, 255, .35);
	box-sizing: content-box;
}
.hsi-puce__label {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 13px;
	line-height: 1.15;
}
.hsi-puce__valeur {
	font-family: 'Montserrat', sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}
.hsi-puce__unite {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	/* Mobile : info-bulle au-dessus de la puce, orientée vers l'intérieur de la carte */
	.hsi-section-carte { overflow-x: clip; }
	.hsi-puce__info,
	.hsi-puce--gauche .hsi-puce__info {
		top: auto;
		bottom: calc(100% + 8px);
		left: 50%;
		right: auto;
		transform: translate(-50%, 6px);
	}
	.hsi-puce--gauche .hsi-puce__info { left: auto; right: 0; transform: translate(0, 6px); }
	.hsi-puce--droite .hsi-puce__info { left: 0; transform: translate(0, 6px); }
	.hsi-puce:hover .hsi-puce__info,
	.hsi-puce:focus-within .hsi-puce__info,
	.hsi-puce.is-ouvert .hsi-puce__info { transform: translate(-50%, 0); }
	.hsi-puce--gauche:hover .hsi-puce__info,
	.hsi-puce--gauche:focus-within .hsi-puce__info,
	.hsi-puce--gauche.is-ouvert .hsi-puce__info,
	.hsi-puce--droite:hover .hsi-puce__info,
	.hsi-puce--droite:focus-within .hsi-puce__info,
	.hsi-puce--droite.is-ouvert .hsi-puce__info { transform: none; }

	.hsi-puce__info { gap: 8px; padding: 6px 10px 6px 8px; }
	.hsi-puce__picto { width: 16px; padding-right: 8px; }
	.hsi-puce__label { font-size: 11px; }
	.hsi-puce__valeur { font-size: 24px; }
	.hsi-puce__unite { font-size: 10px; }
}


/* ---------------------------------------------------------
   Vidéo animée à zones cliquables
   --------------------------------------------------------- */
.hsi-video-zones {
	position: relative;
	width: 100%;
	aspect-ratio: var(--hsi-ratio, 2008 / 2052);
}
.hsi-video-zones__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le fond (motif éclair) est dans la vidéo : on estompe les bords pour la fondre dans la section
	   et on masque les pointillés parasites des bords haut et bas */
	clip-path: inset(.8% 0 .8% 0);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-composite: intersect;
}

.hsi-zone {
	position: absolute;
	display: block;
	border-radius: 14px;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}
.hsi-zone:hover,
.hsi-zone:focus-visible,
.hsi-zone.is-actif {
	background: rgba(83, 139, 113, .1);
	box-shadow: inset 0 0 0 2px rgba(83, 139, 113, .55);
	outline: none;
}
.hsi-zone__label {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 4px);
	padding: 4px 12px;
	border-radius: 99px;
	background: var(--hsi-vert);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.hsi-zone:hover .hsi-zone__label,
.hsi-zone:focus-visible .hsi-zone__label,
.hsi-zone.is-actif .hsi-zone__label {
	opacity: 1;
	transform: translate(-50%, 10px);
}


/* ---------------------------------------------------------
   Section métiers : vidéo au centre + 4 blocs autour
   Classes posées dans Divi :
     ligne    -> hsi-metiers__scene
     colonne  -> hsi-metiers__video   (contient [hsi_video_zones])
     colonne  -> hsi-metier hsi-metier--{industriel|photovoltaique|tiers-investissement|tertiaire}
   --------------------------------------------------------- */
.hsi-metier .et_pb_blurb_content { max-width: none; }
/* Divi force l'image du blurb à 100 % : la taille du picto se règle sur son conteneur */
.hsi-metier .et_pb_blurb .et_pb_main_blurb_image {
	--hsi-picto: 72px;
	width: var(--hsi-picto) !important;
	max-width: var(--hsi-picto) !important;
	flex: 0 0 var(--hsi-picto);
	margin: 0 18px 0 0 !important;
}
.hsi-metier .et_pb_main_blurb_image .et_pb_image_wrap,
.hsi-metier .et_pb_main_blurb_image img { width: 100% !important; }
.hsi-metier .et_pb_main_blurb_image img { transition: transform .3s ease; }
.hsi-metier .et_pb_module_header,
.hsi-metier .et_pb_module_header a {
	color: var(--hsi-vert) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	padding-bottom: 10px;
}
.hsi-metier .et_pb_blurb_description {
	color: var(--hsi-texte);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.hsi-metier .et_pb_blurb_description p:last-child { padding-bottom: 0; }
.hsi-metier .et_pb_blurb_description p + p { padding-top: 12px; }

.hsi-metier.is-actif .et_pb_main_blurb_image img { transform: scale(1.08); }
.hsi-metier.is-actif .et_pb_module_header,
.hsi-metier.is-actif .et_pb_module_header a { color: var(--hsi-vert-fonce) !important; }

/* Desktop large : pleine largeur, animation centrée, les 4 blocs posés aux coins par-dessus l'animation */
@media (min-width: 1181px) {
	.et_pb_row.hsi-metiers__scene {
		position: relative;
		display: block !important;
	}
	.hsi-metiers__scene > .hsi-metiers__video {
		width: 66% !important;
		max-width: none !important;
		margin: 0 auto !important;
	}
	.hsi-metiers__scene > .hsi-metier {
		position: absolute !important;
		width: 24% !important;
		max-width: 400px !important;
		margin: 0 !important;
		padding: 16px 18px;
		z-index: 2;
		/* Voile léger : le texte reste lisible quand il chevauche le dessin */
		background: rgba(248, 250, 247, .85);
		border-radius: 6px;
	}
	/* --hsi-retrait : distance des blocs au bord, plus elle est grande plus ils mordent sur l'animation */
	.hsi-metiers__scene { --hsi-retrait: 7%; }
	.hsi-metiers__scene > .hsi-metier--industriel           { left: var(--hsi-retrait);  top: 0; }
	.hsi-metiers__scene > .hsi-metier--tertiaire            { left: var(--hsi-retrait);  bottom: 0; }
	.hsi-metiers__scene > .hsi-metier--photovoltaique       { right: var(--hsi-retrait); top: 0; }
	.hsi-metiers__scene > .hsi-metier--tiers-investissement { right: var(--hsi-retrait); bottom: 4%; }
}

/* Tablette / mobile : animation pleine largeur puis blocs en grille */
@media (max-width: 1180px) {
	.et_pb_row.hsi-metiers__scene {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
	}
	.hsi-metiers__scene > .et_pb_column {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	.hsi-metiers__scene > .hsi-metiers__video {
		grid-column: 1 / -1;
		width: 100% !important;
		max-width: 720px !important;
		justify-self: center;
	}
	/* Ordre de lecture identique à la maquette */
	.hsi-metiers__scene > .hsi-metier--industriel           { order: 1; }
	.hsi-metiers__scene > .hsi-metier--photovoltaique       { order: 2; }
	.hsi-metiers__scene > .hsi-metier--tiers-investissement { order: 3; }
	.hsi-metiers__scene > .hsi-metier--tertiaire            { order: 4; }
	.hsi-metiers__scene > .hsi-metiers__video               { order: 0; }
}
@media (max-width: 767px) {
	.et_pb_row.hsi-metiers__scene { grid-template-columns: 1fr; gap: 32px; }
	.hsi-metier .et_pb_blurb .et_pb_main_blurb_image { --hsi-picto: 56px; }
	.hsi-metier .et_pb_module_header,
	.hsi-metier .et_pb_module_header a { font-size: 19px; }
	/* Zones cliquables masquées sur petit écran : trop petites, les liens restent dans les blocs */
	.hsi-zone { display: none; }
}


/* ---------------------------------------------------------
   Mode calibrage (?hsi-calibrer=1, utilisateur connecté)
   --------------------------------------------------------- */
.hsi-calibrer { cursor: crosshair; outline: 2px dashed #ffb703; outline-offset: 4px; }
.hsi-calibrer .hsi-zone { background: rgba(255, 183, 3, .18); box-shadow: inset 0 0 0 2px #ffb703; pointer-events: none; }
.hsi-calibrer .hsi-zone__label { opacity: 1; }
.hsi-calibrer__trace {
	position: absolute;
	background: rgba(255, 183, 3, .28);
	box-shadow: inset 0 0 0 2px #ffb703;
	border-radius: 6px;
	pointer-events: none;
}
.hsi-calibrer__point {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #ffb703;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
	pointer-events: none;
}
.hsi-calibrer__panneau {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100000;
	max-width: min(560px, calc(100vw - 32px));
	padding: 12px 14px;
	border-radius: 8px;
	background: #06101a;
	color: #bfe3ff;
	font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace;
	white-space: pre-wrap;
	word-break: break-all;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.hsi-calibrer__panneau b { color: #ffb703; }


/* ---------------------------------------------------------
   Accessibilité : mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hsi-puce__pin,
	.hsi-puce__info,
	.hsi-zone,
	.hsi-zone__label,
	.hsi-defiler,
	.hsi-metier .et_pb_main_blurb_image img { transition: none !important; }
}