/* Fond blanc, comme le reste de la page ou seul le hero est teinte. */
.e-con.e-parent:has(#scpi-choisir){
	padding-top:48px;
	padding-bottom:48px;
	border-bottom:1px solid #E7E9F0;
}
.elementor-widget-shortcode:has(#scpi-choisir){width:100%}

/* Les jetons de couleur sont definis ICI, dans la section, et prefixes --sf-,
   comme le font av-situations, scpi-profils et scpi-comprendre. La premiere
   version de cette feuille referencait des jetons non prefixes qui n'etaient
   definis nulle part : chaque declaration devenait invalide, donc plus d'icones,
   plus de pastilles, plus d'orange, plus de filets, et la mauvaise police.
   Ne jamais dependre d'un jeton defini hors de cette feuille. */
#scpi-choisir{
	--sf-navy:#07124A;
	--sf-orange:#F18815;
	--sf-orange-2:#d4760f;
	--sf-orange-soft:#FFF3E4;
	--sf-tint:#EEF1F9;
	--sf-line:#E7E9F0;
	--sf-muted:#64748B;
	--sf-font:'Plus Jakarta Sans','Poppins',sans-serif;
	--sf-ease:cubic-bezier(.22,.7,.3,1);max-width:1200px;margin:0 auto;padding:0 32px;
  font-family:var(--sf-font);color:#1e2748;line-height:1.55}
#scpi-choisir p,#scpi-choisir h2,#scpi-choisir h3,#scpi-choisir h4{margin:0;padding:0}

/* ── en-tête ── */
.sf__ey{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sf-navy);margin:0 0 12px}
.sf__ey::before{content:"";width:0;height:3px;border-radius:2px;background:var(--sf-orange);flex:none;
  transition:width .5s var(--sf-ease)}
#scpi-choisir.is-in .sf__ey::before{width:16px}
.sf__ti{font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.025em;color:var(--sf-navy);margin:0 0 10px;max-width:700px}
.sf__le{font-size:14.5px;line-height:24px;color:var(--sf-muted);max-width:660px}
.sf__le b{color:var(--sf-navy);font-weight:700}

/* ── la grille : rangées alignées par construction ── */
.sf__grid{display:grid;grid-template-columns:1fr 1fr;margin:30px 0 0}
.sf__hd{display:flex;align-items:center;gap:12px;padding:0 0 14px;position:relative}
.sf__hd--a,.sf__i--a{padding-right:36px}
.sf__hd--b,.sf__i--b{padding-left:36px}
.sf__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sf-navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  transform:scale(.4);transition:transform .5s cubic-bezier(.34,1.5,.64,1)}
#scpi-choisir.is-in .sf__n{transform:none}
.sf__st{font-size:17.5px;font-weight:800;letter-spacing:-.02em;color:var(--sf-navy)}

.sf__i{display:flex;gap:16px;padding-top:18px;padding-bottom:18px;position:relative}

/* Les filets ne sont plus des bordures mais des traits qui se tracent :
   le filet de rangée se dessine de gauche à droite, le filet vertical
   descend. La grille se construit sous les yeux, puis le contenu arrive. */
.sf__i::after,.sf__hd::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--sf-line);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--sf-ease)}
.sf__hd::after{display:none}
#scpi-choisir.is-in .sf__i::after{transform:scaleX(1)}
.sf__i--b::before,.sf__hd--b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--sf-line);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--sf-ease)}
#scpi-choisir.is-in .sf__i--b::before,
#scpi-choisir.is-in .sf__hd--b::before{transform:scaleY(1)}
#scpi-choisir.is-in .sf__hd--b::before{transition-delay:.24s}

.sf__ic{flex:none;width:44px;height:44px;border-radius:14px;background:var(--sf-tint);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s var(--sf-ease),transform .25s var(--sf-ease)}
/* L'icône éclot dans sa pastille, juste après l'arrivée de la ligne. */
.sf__ic svg{width:26px;height:26px;fill:none;stroke:var(--sf-navy);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.72);
  transition:opacity .45s var(--sf-ease),transform .45s cubic-bezier(.34,1.45,.64,1),stroke .25s}
#scpi-choisir.is-in .sf__ic svg{opacity:1;transform:none}
.sf__tx{flex:1;min-width:0}
.sf__it{font-size:15.5px;font-weight:800;letter-spacing:-.018em;color:var(--sf-navy);margin:0 0 4px;transition:color .25s}
.sf__ia{font-size:13px;font-weight:700;line-height:20px;color:var(--sf-orange-2);margin:0 0 7px}
.sf__id{font-size:13px;line-height:20.5px;color:var(--sf-muted)}
.sf__id b{color:var(--sf-navy);font-weight:700}

/* Survol : la pastille se teinte et respire à peine. La ligne elle-même ne
   bouge pas, elle n'est pas cliquable. */
.sf__i:hover .sf__ic{background:var(--sf-orange-soft);transform:scale(1.06)}
.sf__i:hover .sf__ic svg{stroke:var(--sf-orange)}
.sf__i:hover .sf__it{color:var(--sf-orange-2)}

/* ── la cascade ── */
.sf__grid>*{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--sf-ease),transform .55s var(--sf-ease)}
#scpi-choisir.is-in .sf__grid>*{opacity:1;transform:none}
#scpi-choisir.is-in .sf__grid>*:nth-child(1){transition-delay:.20s}
#scpi-choisir.is-in .sf__grid>*:nth-child(2){transition-delay:.24s}
#scpi-choisir.is-in .sf__grid>*:nth-child(3){transition-delay:.30s}
#scpi-choisir.is-in .sf__grid>*:nth-child(4){transition-delay:.34s}
#scpi-choisir.is-in .sf__grid>*:nth-child(3)::after{transition-delay:.30s}
#scpi-choisir.is-in .sf__grid>*:nth-child(4)::after{transition-delay:.34s}
#scpi-choisir.is-in .sf__grid>*:nth-child(4)::before{transition-delay:.34s}
#scpi-choisir.is-in .sf__grid>*:nth-child(3) .sf__ic svg{transition-delay:0.44s}
#scpi-choisir.is-in .sf__grid>*:nth-child(4) .sf__ic svg{transition-delay:0.48s}
#scpi-choisir.is-in .sf__grid>*:nth-child(5){transition-delay:.44s}
#scpi-choisir.is-in .sf__grid>*:nth-child(6){transition-delay:.48s}
#scpi-choisir.is-in .sf__grid>*:nth-child(5)::after{transition-delay:.44s}
#scpi-choisir.is-in .sf__grid>*:nth-child(6)::after{transition-delay:.48s}
#scpi-choisir.is-in .sf__grid>*:nth-child(6)::before{transition-delay:.48s}
#scpi-choisir.is-in .sf__grid>*:nth-child(5) .sf__ic svg{transition-delay:0.58s}
#scpi-choisir.is-in .sf__grid>*:nth-child(6) .sf__ic svg{transition-delay:0.62s}
#scpi-choisir.is-in .sf__grid>*:nth-child(7){transition-delay:.58s}
#scpi-choisir.is-in .sf__grid>*:nth-child(8){transition-delay:.62s}
#scpi-choisir.is-in .sf__grid>*:nth-child(7)::after{transition-delay:.58s}
#scpi-choisir.is-in .sf__grid>*:nth-child(8)::after{transition-delay:.62s}
#scpi-choisir.is-in .sf__grid>*:nth-child(8)::before{transition-delay:.62s}
#scpi-choisir.is-in .sf__grid>*:nth-child(7) .sf__ic svg{transition-delay:0.72s}
#scpi-choisir.is-in .sf__grid>*:nth-child(8) .sf__ic svg{transition-delay:0.76s}
.sf__ey,.sf__ti,.sf__le{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--sf-ease),transform .55s var(--sf-ease)}
#scpi-choisir.is-in .sf__ey{opacity:1;transform:none;transition-delay:.04s}
#scpi-choisir.is-in .sf__ti{opacity:1;transform:none;transition-delay:.09s}
#scpi-choisir.is-in .sf__le{opacity:1;transform:none;transition-delay:.15s}

/* Rien ne dépend de l'animation pour être lisible. */
@media (prefers-reduced-motion:reduce){
  .sf__grid>*,.sf__ey,.sf__ti,.sf__le,.sf__ic svg,.sf__n{
    opacity:1!important;transform:none!important;transition:none!important}
  .sf__i::after,.sf__i--b::before,.sf__hd--b::before{transform:none!important;transition:none!important}
  .sf__ey::before{width:16px!important;transition:none!important}
}

@media(max-width:900px){
  #scpi-choisir{padding:0 20px}
  .sf__ti{font-size:25px}
  .sf__grid{grid-template-columns:1fr}
  .sf__grid>*:nth-child(1){order:1} .sf__grid>*:nth-child(3){order:2}
  .sf__grid>*:nth-child(5){order:3} .sf__grid>*:nth-child(7){order:4}
  .sf__grid>*:nth-child(2){order:5} .sf__grid>*:nth-child(4){order:6}
  .sf__grid>*:nth-child(6){order:7} .sf__grid>*:nth-child(8){order:8}
  .sf__hd--a,.sf__i--a{padding-right:0}
  .sf__hd--b,.sf__i--b{padding-left:0}
  .sf__i--b::before,.sf__hd--b::before{display:none}
  .sf__hd--b{margin-top:22px;padding-top:26px}
  .sf__hd--b::after{display:block;transform:scaleX(0)}
  #scpi-choisir.is-in .sf__hd--b::after{transform:scaleX(1)}
}