/* Section « situations » de la page Produits structures.

   CLONE DE av-situations.css. Toute regle est portee par #iestruct-situations,
   comme chez AV, et pour la meme raison qu aux deux autres blocs de cette
   page : produits-structures-page-blocks.css se charge ici et la tranche interdit d y
   toucher.

   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.

   DEUX AJOUTS PAR RAPPORT A LA VERSION AV.

   1. Un anneau de focus visible. Les boutons de la section n ont ni fond ni
      bordure : selon le theme, le contour par defaut du navigateur peut etre
      supprime, et une personne qui navigue au clavier ne sait plus ou elle
      est. :focus-visible ne le montre qu au clavier, jamais a la souris.
   2. .iestruct-sit__note, la note de bas de bloc. La copie validee en porte
      trois ; la version AV n avait pas de fente pour cela.

   TROIS REGLES D AV NE SONT PAS REPRISES, et ce sont des reglages de page,
   pas des regles du composant : l alignement du hero sur .publique-hero, qui
   ne vise que la page assurance vie, et les deux correctifs de conteneur
   Elementor, qui sont repris ci-dessous sous notre propre selecteur.

   La police Plus Jakarta Sans est deja chargee par le site. */
#iestruct-situations{
	/* Meme boite que les autres sections de la vitrine : 1200px, 32px de marge
	   interieure, centree. Sans cela la section prend toute la largeur du
	   conteneur Elementor et parait etiree. */
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding-left:32px;
	padding-right:32px;
	--iestruct-navy:#07124A;
	--iestruct-orange:#F18815;
	--iestruct-orange-2:#d4760f;
	--iestruct-muted:#64748B;
	--iestruct-line:#E7E9F0;
	--iestruct-hair:#C9D2E4;
	--iestruct-tint:#EEF1F9;
	font-family:'Plus Jakarta Sans','Poppins',sans-serif;
	color:#1e2748;
	line-height:1.55;
}
#iestruct-situations p,#iestruct-situations h2,#iestruct-situations h3,#iestruct-situations ul{margin:0;padding:0}
#iestruct-situations li{list-style:none}

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

/* carte de gauche */
#iestruct-situations .iestruct-sit__card{
	background:#fff;border:1px solid var(--iestruct-line);border-radius:20px;padding:30px 28px;
	box-shadow:0 10px 40px -10px rgba(7,18,74,.08);
}
#iestruct-situations .iestruct-sit__dash{width:34px;height:3px;border-radius:2px;background:var(--iestruct-orange);margin:0 0 18px}
#iestruct-situations .iestruct-sit__q{
	font-size:25px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--iestruct-navy);margin:0 0 7px;
}
#iestruct-situations .iestruct-sit__hint{font-size:12.5px;color:var(--iestruct-muted);margin:0 0 16px}
#iestruct-situations .iestruct-sit__list{margin:0 0 20px}
#iestruct-situations .iestruct-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(--iestruct-navy);
	transition:color .18s;
}
#iestruct-situations .iestruct-sit__pick:hover{color:var(--iestruct-orange-2)}
#iestruct-situations .iestruct-sit__pick-tx{flex:1}

/* Anneau et coche dessines dans le meme SVG, au meme trait. */
#iestruct-situations .iestruct-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;
}
#iestruct-situations .iestruct-sit__tick svg{
	width:20px;height:20px;fill:none;stroke:var(--iestruct-orange);stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
}
#iestruct-situations .iestruct-sit__tick circle{fill:none;transition:fill .2s}
#iestruct-situations .iestruct-sit__tick path{transition:stroke .2s}
#iestruct-situations .iestruct-sit__pick:hover .iestruct-sit__tick circle{fill:rgba(241,136,21,.14)}
#iestruct-situations .iestruct-sit__pick.is-on{color:var(--iestruct-orange-2)}
#iestruct-situations .iestruct-sit__pick.is-on .iestruct-sit__tick circle{fill:var(--iestruct-orange)}
#iestruct-situations .iestruct-sit__pick.is-on .iestruct-sit__tick path{stroke:#fff}

/* AJOUT : l anneau de focus, au clavier seulement. */
#iestruct-situations .iestruct-sit__pick:focus-visible,
#iestruct-situations .iestruct-sit__btn:focus-visible,
#iestruct-situations .iestruct-sit-cta:focus-visible{
	outline:2px solid var(--iestruct-orange);
	outline-offset:3px;
	border-radius:8px;
}

/* bouton maison */
#iestruct-situations .iestruct-sit-cta{
	display:inline-flex;align-items:center;gap:.8rem;
	padding:.45rem .45rem .45rem 1.35rem;border-radius:999px;
	background:var(--iestruct-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;
}
#iestruct-situations .iestruct-sit-cta:hover{
	background:var(--iestruct-orange);transform:translateY(-2px);
	box-shadow:0 14px 26px -10px rgba(241,136,21,.5);
}
#iestruct-situations .iestruct-sit-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;
}
#iestruct-situations .iestruct-sit-cta:hover .iestruct-sit-cta__arrow{transform:rotate(45deg)}

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

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

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

/* AJOUT : la note de bas de bloc. Elle est plus petite que les points sans
   etre grise pale : une reserve qu on ne peut pas lire ne sert a rien. */
#iestruct-situations .iestruct-sit__note{
	margin:13px 0 0;padding-top:11px;border-top:1px solid var(--iestruct-line);
	font-size:12.5px;line-height:20px;color:var(--iestruct-muted);
}

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

/* 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. */
#iestruct-situations .iestruct-sit__pick,
#iestruct-situations .iestruct-sit__pick-tx{
	white-space:normal;
}
#iestruct-situations .iestruct-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(#iestruct-situations){
	width:100%;
}

/* LA SECTION RESTE BLANCHE, ET C EST CE QUI LA SEPARE DE LA SUIVANTE.
   Le rythme de la page est celui d assurance vie : situations en blanc,
   comprendre en teinte, resume en bande degradee. La carte de gauche et
   l accordeon de droite se lisent comme des objets poses sur la page, pas
   comme un bandeau, precisement parce que le fond est blanc ici.

   Le remplissage bas vient d AV, ou il compense l absence de remplissage
   propre a la section : sans lui la carte se colle a la section suivante.
   A savoir : ce nombre suppose que la section qui suit apporte le sien en
   haut. Si l ordre des blocs change, c est lui qu il faudra reprendre. */
.e-con.e-parent:has(#iestruct-situations){
	padding-bottom:48px;
}