/* Illustration du hero : le bouclier et ses cinq verbes.
   Toutes les tailles sont en cqw et suivent donc la largeur du conteneur,
   mesuree a 580px. Les valeurs ci-dessous viennent de degagements mesures :
   le titre central tient dans son disque, et Anticiper et Optimiser sont
   centres dans l'espace de 116px entre le bord du bouclier et le disque.
   Ne pas les modifier sans remesurer. */
#ieav-schema{
	--ieav-navy:#07124A;
	--ieav-orange:#F18815;
	--ieav-muted:#64748B;
	--ieav-line:#E7E9F0;
	font-family:'Plus Jakarta Sans','Poppins',sans-serif;
	color:#1e2748;
	line-height:1.55;
}
#ieav-schema p,#ieav-schema h3,#ieav-schema ul{margin:0;padding:0}
#ieav-schema li{list-style:none}

#ieav-schema .ieav-bq{
	container-type:inline-size;
	position:relative;
	width:100%;
	max-width:580px;
	aspect-ratio:1/1;
	margin-inline:auto;
}
#ieav-schema .ieav-bq__art{position:absolute;inset:0;width:100%;height:100%}
#ieav-schema .ieav-bq__sr{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

#ieav-schema .ieav-bq__segs{position:absolute;inset:0}
#ieav-schema .ieav-bq__seg{
	position:absolute;transform:translate(-50%,-50%);
	display:flex;flex-direction:column;align-items:center;text-align:center;
}
#ieav-schema .ieav-bq__t{
	margin:1.7cqw 0 0;
	font-size:2.1cqw;
	font-weight:800;letter-spacing:.09em;line-height:1.2;
	text-transform:uppercase;color:var(--ieav-navy);
}
#ieav-schema .ieav-bq__ico svg{display:block;width:5.2cqw;height:5.2cqw}

#ieav-schema .ieav-bq__seg--investir   {left:35.5%;top:31.6%}
#ieav-schema .ieav-bq__seg--proteger   {left:62.7%;top:31.6%}
#ieav-schema .ieav-bq__seg--anticiper  {left:30%;  top:53%}
#ieav-schema .ieav-bq__seg--optimiser  {left:70%;  top:53%}
#ieav-schema .ieav-bq__seg--transmettre{left:50%;  top:70.4%}

#ieav-schema .ieav-bq__core{
	position:absolute;left:50%;top:49.2%;transform:translate(-50%,-50%);
	display:flex;flex-direction:column;align-items:center;text-align:center;
}
#ieav-schema .ieav-bq__core .ieav-bq__ico svg{width:4.3cqw;height:4.3cqw}
#ieav-schema .ieav-bq__core-t{
	margin:.9cqw 0 0;
	font-size:2.6cqw;
	font-weight:800;letter-spacing:.04em;line-height:1.24;
	text-transform:uppercase;color:var(--ieav-navy);
}
#ieav-schema .ieav-bq__rule{
	width:2.7cqw;height:.22cqw;margin-top:.95cqw;border-radius:1cqw;background:var(--ieav-orange);
}

#ieav-schema .ieav-bq__n{stroke:var(--ieav-navy)}
#ieav-schema .ieav-bq__o{stroke:var(--ieav-orange)}
#ieav-schema .ieav-bq__chk{stroke:#94A3C4}
#ieav-schema .ieav-bq__w{fill:#fff}

/* La liste de secours ne sert qu'aux petits ecrans. */
#ieav-schema .ieav-bq__liste{display:none}

#ieav-schema .ieav-bq__mention{
	font-size:11px;color:#9AA3BC;line-height:1.5;
	margin:14px 0 0;text-align:center;max-width:580px;margin-inline:auto;
}

/* Apparition, neutralisee si le visiteur a demande moins d'animations. */
@media (prefers-reduced-motion:no-preference){
	#ieav-schema .ieav-bq__art{animation:ieavBqFade .8s ease-out both}
	#ieav-schema .ieav-bq__core,
	#ieav-schema .ieav-bq__seg{animation:ieavBqRise .7s cubic-bezier(.22,.7,.3,1) both}
	#ieav-schema .ieav-bq__core{animation-delay:.12s}
	#ieav-schema .ieav-bq__seg--investir{animation-delay:.24s}
	#ieav-schema .ieav-bq__seg--proteger{animation-delay:.32s}
	#ieav-schema .ieav-bq__seg--optimiser{animation-delay:.40s}
	#ieav-schema .ieav-bq__seg--transmettre{animation-delay:.48s}
	#ieav-schema .ieav-bq__seg--anticiper{animation-delay:.56s}
	#ieav-schema .ieav-bq__arc{stroke-dasharray:200;stroke-dashoffset:200;
		animation:ieavBqDraw 1.1s ease-out .5s both, ieavBqSpin 26s linear 1.7s infinite}
}
@keyframes ieavBqFade{from{opacity:0}}
@keyframes ieavBqRise{from{opacity:0;transform:translate(-50%,-50%) translateY(1.3cqw)}}
@keyframes ieavBqDraw{to{stroke-dashoffset:0}}

/* Sous 640px les libelles du bouclier tomberaient a environ 8,6px : on les
   masque, on garde les icones, et la liste sous l'illustration prend le relais. */
@media (max-width:640px){
	#ieav-schema .ieav-bq__t,
	#ieav-schema .ieav-bq__core-t{
		position:absolute;width:1px;height:1px;overflow:hidden;
		clip-path:inset(50%);white-space:nowrap;
	}
	#ieav-schema .ieav-bq__liste{
		display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;
		margin:18px auto 0;max-width:340px;
	}
	#ieav-schema .ieav-bq__liste li{
		display:flex;align-items:baseline;gap:8px;
		font-size:13.5px;font-weight:700;color:var(--ieav-navy);
	}
	#ieav-schema .ieav-bq__liste li::before{
		content:"";width:5px;height:5px;border-radius:50%;
		background:var(--ieav-orange);flex:none;transform:translateY(-2px);
	}
}

/* Hauteur de section et filet de separation en bas.
   La classe .publique-hero du kit impose min-height:800px et un tres grand
   remplissage haut, que les reglages Elementor ne peuvent pas battre. */
.e-con.publique-hero:has(#ieav-schema){
	min-height:0;
	padding-top:72px;
	padding-bottom:72px;
	border-bottom:1px solid rgba(7,18,74,0.05);
}
@media (max-width:1279px){
	.e-con.publique-hero:has(#ieav-schema){padding-top:64px; padding-bottom:64px}
}
@media (max-width:767px){
	.e-con.publique-hero:has(#ieav-schema){
		padding-top:48px; padding-bottom:48px; padding-left:32px; padding-right:32px;
	}
}

/* Cote a cote : l'illustration est carree, on ne l'etire pas sur la hauteur de
   la rangee, on la centre. Le widget garde sa piste de grille pleine hauteur. */
@media (min-width:1280px){
	.e-con:has(> .elementor-widget-shortcode #ieav-schema){align-self:center}
	.e-con:has(> .elementor-widget-shortcode #ieav-schema) > .elementor-widget-shortcode{
		grid-row:1 / -1;
		height:100%;
	}
	.e-con:has(> .elementor-widget-shortcode #ieav-schema) .elementor-shortcode{height:100%}
}

/* Colonne de gauche : espacements resserres. */
.publique-hero:has(#ieav-schema) .publique-hero-info{gap:14px}

/* ============================================================
   Part boutons : mesures de la page assurance vie luxembourgeoise.
   Scope .publique-hero:has(#ieav-schema). box-sizing:border-box confirme.
   ============================================================ */

/* Bouton primaire : bulle fleche. On ne touche QUE width/height/padding-top
   (le kit anime la fleche au survol via transform ; on n'y touche pas). Le
   glyphe fait 24px fixe, centre dans un cercle de 2.6rem : padding-top =
   (41.6 - 24)/2 = 8.8px = 0.55rem. (0,3,0) bat la base du kit (0,1,0). */
.publique-hero:has(#ieav-schema) .bt-arrow-icon::after{
	width:2.6rem;
	height:2.6rem;
	padding-top:0.55rem;
}

/* Bouton secondaire : avatars. Aucun survol ne l'anime, donc on peut passer a
   la mecanique lux : image de fond dans une boite 80x32 (au lieu d'une
   content-image a taille naturelle). content vide en !important pour battre le
   content:url(...)!important du kit ; transform remis a zero en !important car
   le kit pose translateY en !important dans une de ses regles. */
.publique-hero:has(#ieav-schema) .bt-team::after{
	content:"" !important;
	width:80px;
	height:32px;
	padding-top:0;
	background:url('/wp-content/uploads/img-team.png') left center / contain no-repeat;
	transform:translateY(0) !important;
}

/* Boites des boutons : valeurs lux (solide et ghost). (0,5,0) bat post-4946.css
   (0,4,0) sans !important. font-size:1.1rem = valeur actuelle (no-op). */
.e-con.publique-hero:has(#ieav-schema) .elementor-element-5496685 .elementor-button{
	font-size:1.1rem;
	padding:0.55rem 0.6rem 0.55rem 1.75rem;
}
.e-con.publique-hero:has(#ieav-schema) .elementor-element-614ff7f .elementor-button{
	font-size:1.1rem;
	padding:0.55rem 1.8rem 0.55rem 0.75rem;
}

/* Boutons : reglages finaux, valeurs relevees dans le navigateur sur la page
   luxembourgeoise. Les tailles et remplissages correspondent deja, il ne reste
   que le centrage de la fleche et l'animation au survol. */

/* 1. Le cercle de la fleche descendait de 4px au repos, a cause du translateY
      du kit, d'ou son aspect decentre dans la pastille. La page luxembourgeoise
      n'applique aucun deplacement, seulement une rotation : on garde la
      rotation et on retire le deplacement. */
.publique-hero:has(#ieav-schema) .bt-arrow-icon::after{
	transform:rotate(0deg);
}
.publique-hero:has(#ieav-schema) .elementor-button:hover .bt-arrow-icon::after{
	transform:rotate(45deg) !important;
}

/* 2. Animation au survol, identique a la page luxembourgeoise : leger
      soulevement et ombre coloree. */
.e-con.publique-hero:has(#ieav-schema) .elementor-widget-button .elementor-button{
	transition:background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.e-con.publique-hero:has(#ieav-schema) .elementor-element-5496685 .elementor-button{
	box-shadow:0 10px 24px -10px rgba(7,18,74,.5);
}
.e-con.publique-hero:has(#ieav-schema) .elementor-element-5496685 .elementor-button:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 26px -10px rgba(241,136,21,.5);
}
.e-con.publique-hero:has(#ieav-schema) .elementor-element-614ff7f .elementor-button:hover{
	border-color:#07124A;
	transform:translateY(-2px);
	box-shadow:0 12px 24px -12px rgba(7,18,74,.25);
}

/* Centrage des visuels dans les boutons.
   Cause relevee dans le navigateur : le kit applique
   transform:translateY(-12px) sur .elementor-button-text, ce qui remonte tout
   le bloc du libelle, texte et visuel compris, de 12px dans la pastille. Les
   avatars debordaient donc de 2px au-dessus du bord haut. On annule ce
   decalage, puis on centre par flexbox comme le fait la page luxembourgeoise.
   Les visuels sont aussi passes en display:block pour sortir de l'alignement
   sur la ligne de base, qui ajoutait l'espace du jambage. */
.publique-hero:has(#ieav-schema) .elementor-button-text{
	transform:none !important;
	display:inline-flex;
	align-items:center;
}
.publique-hero:has(#ieav-schema) .bt-team,
.publique-hero:has(#ieav-schema) .bt-arrow-icon{
	display:inline-flex;
	align-items:center;
	line-height:0;
}
.publique-hero:has(#ieav-schema) .bt-team::after,
.publique-hero:has(#ieav-schema) .bt-arrow-icon::after{
	display:block;
}

/* Seuls les eclats et les libelles recoivent le survol. La liste des libelles
   couvre tout le carre : sans ceci elle intercepte tout avant les eclats, et le
   survol ne fonctionne qu'au-dessus du texte. */
#ieav-schema .ieav-bq__art{pointer-events:none}
/* Les eclats ne sont plus des cibles de pointeur : le survol est determine par
   l'angle du curseur autour du centre du disque, dans av-schema.js. Le
   decoupage ne sert donc plus qu'a l'affichage. Chrome n'applique pas
   clip-path au test de survol de facon fiable : sur cinq points testes, un dans
   chaque secteur, deux tombaient sur le mauvais eclat. */
#ieav-schema .ieav-bq__shard{pointer-events:none}
#ieav-schema .ieav-bq{pointer-events:auto}
#ieav-schema .ieav-bq__segs{pointer-events:none}
#ieav-schema .ieav-bq__seg{pointer-events:auto}
#ieav-schema .ieav-bq__core{pointer-events:none}

/* Les eclats. L'agrandissement se fait autour du centre du disque : chaque
   part s'ecarte donc le long de son propre rayon, sans calcul par part.
   3,5 % est le maximum avant qu'un eclat ne morde franchement sur ses voisins. */
#ieav-schema .ieav-bq__shard{
	fill:#fff;
	fill-opacity:0;
	stroke:var(--ieav-orange);
	stroke-opacity:0;
	stroke-width:1.6;
	transform-origin:500px 482px;
	transition:transform .3s cubic-bezier(.2,.7,.3,1),
	           fill-opacity .3s ease,
	           stroke-opacity .3s ease;
}
/* Pas de filtre CSS ici. Applique a un chemin decoupe, Chrome le calcule sur la
   geometrie NON decoupee : l'ombre portait donc sur tout le bouclier, ce qui
   donnait l'impression que le bouclier entier se soulevait. Le soulevement est
   rendu par l'agrandissement, le fond blanc et le lisere orange. */
#ieav-schema .ieav-bq__shard.is-up{
	fill-opacity:.97;
	stroke-opacity:.5;
	transform:scale(1.035);
}
#ieav-schema .ieav-bq__t{transition:color .26s cubic-bezier(.2,.7,.3,1)}
#ieav-schema .ieav-bq__ico svg{transition:transform .26s cubic-bezier(.2,.7,.3,1)}
#ieav-schema .ieav-bq__seg.is-up .ieav-bq__t{color:var(--ieav-orange-2,#d4760f)}
#ieav-schema .ieav-bq__seg.is-up .ieav-bq__ico svg{transform:translateY(-3px)}

/* L'arc du disque tourne tres lentement : 26 s le tour, volontairement trop
   lent pour etre pris pour un indicateur de chargement. */
#ieav-schema .ieav-bq__arc{transform-origin:500px 482px}
@keyframes ieavBqSpin{to{transform:rotate(360deg)}}

/* Le champ de points est insere par le script en premier enfant du hero.
   Deux conditions pour qu'il passe derriere le contenu : le hero doit etre
   positionne, et son contenu doit avoir son propre contexte d'empilement.
   Sans la seconde regle, un element positionne en absolu passe devant un
   element statique quel que soit l'ordre du document, et le canevas
   recouvrirait le titre. */
.publique-hero:has(#ieav-schema){
	position:relative;
	overflow:hidden;
}
.publique-hero:has(#ieav-schema) > .e-con-inner{
	position:relative;
	z-index:1;
}
#ieav-schema .ieav-bq__field,
.publique-hero > .ieav-bq__field{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
	z-index:0;
}