/* Section « situations » de la page Assurance Vie.
   Tout est porte par #ieav-situations.
   L'ouverture est animee par la grille, sans mesure en JavaScript : pas de
   barre de defilement, et une courbe plus douce. La hauteur de la section est
   fixee par la carte de gauche, et un panneau ouvert reste sous cette hauteur,
   donc la section ne bouge pas. */
#ieav-situations{
	/* Meme boite que la page luxembourgeoise : 1200px, 32px de marge interieure,
	   centree. Sans cela la section prend les 1440px du conteneur Elementor et
	   parait etiree. */
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding-left:32px;
	padding-right:32px;
	--ieav-navy:#07124A;
	--ieav-orange:#F18815;
	--ieav-orange-2:#d4760f;
	--ieav-orange-tint:#FFF3E4;
	--ieav-muted:#64748B;
	--ieav-line:#E7E9F0;
	--ieav-hair:#C9D2E4;
	--ieav-tint:#EEF1F9;
	font-family:'Plus Jakarta Sans','Poppins',sans-serif;
	color:#1e2748;
	line-height:1.55;
}
#ieav-situations p,#ieav-situations h2,#ieav-situations h3,#ieav-situations ul{margin:0;padding:0}
#ieav-situations li{list-style:none}

#ieav-situations .ieav-sit__cols{
	display:grid;grid-template-columns:minmax(0,392px) minmax(0,1fr);gap:52px;align-items:start;
}

/* carte de gauche */
#ieav-situations .ieav-sit__card{
	background:#fff;border:1px solid var(--ieav-line);border-radius:20px;padding:30px 28px;
	box-shadow:0 10px 40px -10px rgba(7,18,74,.08);
}
#ieav-situations .ieav-sit__dash{width:34px;height:3px;border-radius:2px;background:var(--ieav-orange);margin:0 0 18px}
#ieav-situations .ieav-sit__q{
	font-size:25px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ieav-navy);margin:0 0 7px;
}
#ieav-situations .ieav-sit__hint{font-size:12.5px;color:var(--ieav-muted);margin:0 0 16px}
#ieav-situations .ieav-sit__list{margin:0 0 20px}
#ieav-situations .ieav-sit__pick{
	display:flex;gap:11px;align-items:center;width:100%;text-align:left;
	background:none;border:none;padding:8px 6px 8px 0;cursor:pointer;
	font-family:inherit;font-size:13px;line-height:1.4;font-weight:500;color:var(--ieav-navy);
	transition:color .18s;
}
#ieav-situations .ieav-sit__pick:hover{color:var(--ieav-orange-2)}
#ieav-situations .ieav-sit__pick-tx{flex:1}
/* Anneau et coche dessines dans le meme SVG, au meme trait : valeurs relevees
   sur la page luxembourgeoise, 20px pour un repere de 24 et un trait de 2, soit
   1,67px a l'ecran. Notre version d'origine paraissait maigre parce que la coche
   ne faisait que 10px dans un anneau de 19px : une petite marque flottant dans
   un grand cercle. L'anneau et la coche doivent etre un seul dessin. */
#ieav-situations .ieav-sit__tick{
	flex:none;
	width:20px;
	height:20px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:none;
	border:none;
	border-radius:0;
	box-shadow:none;
	margin-top:0;
}
#ieav-situations .ieav-sit__tick svg{
	width:20px;
	height:20px;
	fill:none;
	stroke:var(--ieav-orange);
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
#ieav-situations .ieav-sit__tick circle{fill:none;transition:fill .2s}
#ieav-situations .ieav-sit__tick path{transition:stroke .2s}

/* Survol : l'anneau se teinte a peine. */
#ieav-situations .ieav-sit__pick:hover .ieav-sit__tick circle{fill:rgba(241,136,21,.14)}

/* Actif : l'anneau se remplit et la coche passe en blanc. L'anneau etant
   dessine au repos, le remplissage devient l'etat selectionne. */
#ieav-situations .ieav-sit__pick.is-on{color:var(--ieav-orange-2)}
#ieav-situations .ieav-sit__pick.is-on .ieav-sit__tick circle{fill:var(--ieav-orange)}
#ieav-situations .ieav-sit__pick.is-on .ieav-sit__tick path{stroke:#fff}

/* bouton maison, aux mesures relevees sur la page luxembourgeoise */
#ieav-situations .ieav-cta{
	display:inline-flex;align-items:center;gap:.8rem;
	padding:.45rem .45rem .45rem 1.35rem;border-radius:999px;
	background:var(--ieav-navy);color:#fff;
	font-size:.97rem;font-weight:700;line-height:1;text-decoration:none;
	width:100%;justify-content:space-between;
	box-shadow:0 10px 24px -10px rgba(7,18,74,.5);
	transition:background-color .2s,transform .2s,box-shadow .2s;
}
#ieav-situations .ieav-cta:hover{
	background:var(--ieav-orange);transform:translateY(-2px);
	box-shadow:0 14px 26px -10px rgba(241,136,21,.5);
}
#ieav-situations .ieav-cta__arrow{
	flex:none;width:2.25rem;height:2.25rem;border-radius:50%;
	background:#fff url('/wp-content/uploads/icon-arrow.svg') center / .9rem no-repeat;
	transition:transform .3s;
}
#ieav-situations .ieav-cta:hover .ieav-cta__arrow{transform:rotate(45deg)}

/* colonne de droite */
#ieav-situations .ieav-sit__rt{
	font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ieav-navy);margin:0 0 5px;
}
#ieav-situations .ieav-sit__rs{font-size:13px;color:var(--ieav-muted);margin:0 0 20px}

#ieav-situations .ieav-sit__acc{border-top:1px solid var(--ieav-line)}
#ieav-situations .ieav-sit__item{border-bottom:1px solid var(--ieav-line)}
#ieav-situations .ieav-sit__btn{
	display:flex;align-items:center;gap:14px;width:100%;text-align:left;
	background:none;border:none;cursor:pointer;padding:14px 4px;font-family:inherit;
}
#ieav-situations .ieav-sit__num{
	flex:none;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--ieav-orange);width:20px;
}
#ieav-situations .ieav-sit__t{
	flex:1;font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.3;
	color:var(--ieav-navy);transition:color .2s;
}
#ieav-situations .ieav-sit__btn:hover .ieav-sit__t{color:var(--ieav-orange-2)}
#ieav-situations .ieav-sit__chev{
	flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--ieav-line);
	display:inline-flex;align-items:center;justify-content:center;
	transition:transform .32s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s;
}
#ieav-situations .ieav-sit__chev svg{
	width:11px;height:11px;stroke:var(--ieav-navy);fill:none;stroke-width:2.3;
	stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
}
#ieav-situations .ieav-sit__btn:hover .ieav-sit__chev{background:var(--ieav-tint);border-color:var(--ieav-hair)}
#ieav-situations .ieav-sit__item.is-open .ieav-sit__chev{
	transform:rotate(180deg);background:var(--ieav-orange);border-color:var(--ieav-orange);
}
#ieav-situations .ieav-sit__item.is-open .ieav-sit__chev svg{stroke:#fff}
#ieav-situations .ieav-sit__item.is-open .ieav-sit__t{color:var(--ieav-orange-2)}

#ieav-situations .ieav-sit__panel{
	display:grid;grid-template-rows:0fr;
	transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
#ieav-situations .ieav-sit__item.is-open .ieav-sit__panel{grid-template-rows:1fr}
#ieav-situations .ieav-sit__clip{overflow:hidden;min-height:0}
#ieav-situations .ieav-sit__inner{
	padding:0 4px 20px 34px;opacity:0;transform:translateY(-4px);
	transition:opacity .26s ease .04s, transform .26s ease .04s;
}
#ieav-situations .ieav-sit__item.is-open .ieav-sit__inner{opacity:1;transform:none}
#ieav-situations .ieav-sit__d{font-size:14px;line-height:23.8px;color:var(--ieav-muted);margin:0 0 12px}
#ieav-situations .ieav-sit__pts{display:grid;gap:7px}
#ieav-situations .ieav-sit__pts li{
	display:flex;gap:10px;align-items:baseline;
	font-size:13.5px;font-weight:600;color:var(--ieav-navy);
}
#ieav-situations .ieav-sit__pts li::before{
	content:"";width:5px;height:5px;border-radius:50%;background:var(--ieav-hair);
	flex:none;transform:translateY(-2px);
}
#ieav-situations .ieav-sit__pts li em{
	font-style:normal;font-weight:500;color:var(--ieav-muted);margin-left:auto;text-align:right;
}

@media (max-width:1000px){
	#ieav-situations{padding-left:20px;padding-right:20px}
	#ieav-situations .ieav-sit__cols{grid-template-columns:1fr;gap:28px}
	#ieav-situations .ieav-sit__inner{padding-left:20px}
}
@media (prefers-reduced-motion:reduce){
	#ieav-situations .ieav-sit__panel,
	#ieav-situations .ieav-sit__inner,
	#ieav-situations .ieav-sit__chev{transition:none}
}

/* Le hero est aligne sur la meme boite que la section ci-dessus, sinon les deux
   sections que nous construisons ne partiraient pas du meme bord gauche.
   1136px correspond a 1200px moins les 2 x 32px de marge interieure.
   Pour revenir en arriere, il suffit de supprimer cette regle. */
@media (min-width:1280px){
	.publique-hero:has(#ieav-schema) .publique-hero-container{
		max-width:1136px;
		margin-left:auto;
		margin-right:auto;
	}
}

/* Les libelles des situations doivent pouvoir revenir a la ligne. Le theme
   applique white-space:nowrap aux boutons, et le libelle en herite : le texte
   ne pouvant pas se couper, sa largeur minimale est celle de la chaine entiere,
   la ligne flex deborde et la fleche se retrouve hors de la carte. */
#ieav-situations .ieav-sit__pick,
#ieav-situations .ieav-sit__pick-tx{
	white-space:normal;
}
#ieav-situations .ieav-sit__pick-tx{
	min-width:0;
}

/* La section doit pouvoir se centrer quel que soit le reglage du conteneur
   Elementor qui l'accueille : si ce conteneur est en flex, l'enveloppe du
   shortcode se retrecit a son contenu et les marges automatiques n'ont plus
   rien a centrer. */
.elementor-widget-shortcode:has(#ieav-situations){
	width:100%;
}

/* La section n'a pas de remplissage vertical propre : 8px en haut et en bas,
   apportes par .e-con-inner. L'espace visible au-dessus de la carte vient en
   realite du remplissage bas du hero, 72px. En dessous il n'y avait que 8px
   avant la section teintee du simulateur, d'ou la carte collee.
   On rend donc 72px en bas, pour egaler ce que le hero donne en haut.
   A savoir : cette symetrie repose sur le remplissage bas du hero. S'il change,
   c'est ce nombre qu'il faudra reprendre. */
.e-con.e-parent:has(#ieav-situations){
	padding-bottom:48px;
}