/* Section « situations » de la page PER.
   Reconstruite a l'identique de la section situations de l'assurance vie
   (ie-av-page/assets/css/av-situations.css) : memes valeurs visuelles, seuls le
   prefixe des jetons (--pt-) et le contenu changent. Tous les jetons sont
   definis dans #per-situations : une feuille qui reference un jeton non defini
   echoue en silence, ce qui a deja livre des sections grises ici.
   L'ouverture est animee par la grille (grid-template-rows), sans mesure en
   JavaScript : pas de barre de defilement, courbe plus douce. */
#per-situations{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding-left:32px;
	padding-right:32px;
	--pt-navy:#07124A;
	--pt-orange:#F18815;
	--pt-orange-2:#d4760f;
	--pt-muted:#64748B;
	--pt-line:#E7E9F0;
	--pt-hair:#C9D2E4;
	--pt-tint:#EEF1F9;
	--pt-page:#F8F9FB;
	font-family:'Plus Jakarta Sans','Poppins',sans-serif;
	color:#1e2748;
	line-height:1.55;
}
#per-situations p,#per-situations h2,#per-situations h3,#per-situations ul{margin:0;padding:0}
#per-situations li{list-style:none}

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

/* carte de gauche */
#per-situations .ps__card{
	background:#fff;border:1px solid var(--pt-line);border-radius:20px;padding:30px 28px;
	box-shadow:0 10px 40px -10px rgba(7,18,74,.08);
}
#per-situations .ps__dash{width:34px;height:3px;border-radius:2px;background:var(--pt-orange);margin:0 0 18px}
/* Titre scope sous l'ID (specificite 1,1,0) pour passer devant la regle de
   titre du kit Elementor, qui sinon impose 28px a un h2 de classe simple. */
#per-situations .ps__q{
	font-size:25px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--pt-navy);margin:0 0 7px;
}
#per-situations .ps__hint{font-size:12.5px;color:var(--pt-muted);margin:0 0 16px}
#per-situations .ps__list{margin:0 0 20px}
#per-situations .ps__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(--pt-navy);
	transition:color .18s;
}
#per-situations .ps__pick:hover{color:var(--pt-orange-2)}
#per-situations .ps__pick-tx{flex:1}
/* Anneau et coche dessines dans le meme SVG, au meme trait, 20px. */
#per-situations .ps__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;
}
#per-situations .ps__tick svg{
	width:20px;height:20px;fill:none;stroke:var(--pt-orange);stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
}
#per-situations .ps__tick circle{fill:none;transition:fill .2s}
#per-situations .ps__tick path{transition:stroke .2s}
#per-situations .ps__pick:hover .ps__tick circle{fill:rgba(241,136,21,.14)}
#per-situations .ps__pick.is-on{color:var(--pt-orange-2)}
#per-situations .ps__pick.is-on .ps__tick circle{fill:var(--pt-orange)}
#per-situations .ps__pick.is-on .ps__tick path{stroke:#fff}

/* bouton maison, aux mesures de l'assurance vie */
#per-situations .ps__cta{
	display:inline-flex;align-items:center;gap:.8rem;
	padding:.45rem .45rem .45rem 1.35rem;border-radius:999px;
	background:var(--pt-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;
}
#per-situations .ps__cta:hover{
	background:var(--pt-orange);transform:translateY(-2px);
	box-shadow:0 14px 26px -10px rgba(241,136,21,.5);
}
#per-situations .ps__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;
}
#per-situations .ps__cta:hover .ps__cta__arrow{transform:rotate(45deg)}

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

#per-situations .ps__acc{border-top:1px solid var(--pt-line)}
#per-situations .ps__item{border-bottom:1px solid var(--pt-line)}
#per-situations .ps__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;
}
#per-situations .ps__num{
	flex:none;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--pt-orange);width:20px;
}
#per-situations .ps__t{
	flex:1;font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.3;
	color:var(--pt-navy);transition:color .2s;
}
#per-situations .ps__btn:hover .ps__t{color:var(--pt-orange-2)}
#per-situations .ps__chev{
	flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--pt-line);
	display:inline-flex;align-items:center;justify-content:center;
	transition:transform .32s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s;
}
#per-situations .ps__chev svg{
	width:11px;height:11px;stroke:var(--pt-navy);fill:none;stroke-width:2.3;
	stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
}
#per-situations .ps__btn:hover .ps__chev{background:var(--pt-tint);border-color:var(--pt-hair)}
#per-situations .ps__item.is-open .ps__chev{
	transform:rotate(180deg);background:var(--pt-orange);border-color:var(--pt-orange);
}
#per-situations .ps__item.is-open .ps__chev svg{stroke:#fff}
#per-situations .ps__item.is-open .ps__t{color:var(--pt-orange-2)}

#per-situations .ps__panel{
	display:grid;grid-template-rows:0fr;
	transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
#per-situations .ps__item.is-open .ps__panel{grid-template-rows:1fr}
#per-situations .ps__clip{overflow:hidden;min-height:0}
#per-situations .ps__inner{
	padding:0 4px 20px 34px;opacity:0;transform:translateY(-4px);
	transition:opacity .26s ease .04s, transform .26s ease .04s;
}
#per-situations .ps__item.is-open .ps__inner{opacity:1;transform:none}
#per-situations .ps__txt{font-size:14px;line-height:23.8px;color:var(--pt-muted);margin:0 0 12px}
#per-situations .ps__txt b{color:var(--pt-navy);font-weight:700}
/* La contrepartie « Ce que ça coute », propre au PER : meme panneau, meme taille
   de texte que l'explication, filet orange a gauche. C'est la regle de
   conformite qui manquait a la page (l'avantage porte son cout sur place). */
#per-situations .ps__cp{display:flex;gap:12px;font-size:14px;line-height:23.8px;color:var(--pt-muted);
	padding:13px 15px;background:var(--pt-page);border-radius:12px;margin:0}
#per-situations .ps__cp::before{content:"";flex:none;width:3px;border-radius:2px;background:var(--pt-orange)}
#per-situations .ps__cp b{color:var(--pt-navy);font-weight:700}

@media (max-width:1000px){
	#per-situations{padding-left:20px;padding-right:20px}
	#per-situations .ps__cols{grid-template-columns:1fr;gap:28px}
	#per-situations .ps__inner{padding-left:20px}
}
@media (prefers-reduced-motion:reduce){
	#per-situations .ps__panel,
	#per-situations .ps__inner,
	#per-situations .ps__chev{transition:none}
}

/* Meme cadrage que l'assurance vie : l'enveloppe du shortcode occupe toute la
   largeur pour que la section puisse se centrer, et le conteneur Elementor porte
   le remplissage bas de 48px (le haut vient du remplissage bas du hero). */
.elementor-widget-shortcode:has(#per-situations){width:100%}
.e-con.e-parent:has(#per-situations){padding-bottom:48px}