/* =====================================================================
   Bloc « Comment fonctionne un contrat de capitalisation ».

   TOUTE REGLE EST PORTEE PAR #iecapi-comprendre, et ce n est pas cosmetique.
   La page /contrat-de-capitalisation/ charge AUSSI scpi-page-blocks.css,
   parce que son slug figure dans la condition a six pages de functions.php.
   Sans portee, des classes courtes se croiseraient avec cette feuille
   partagee, que la tranche interdit de modifier.

   LES VARIABLES NE SONT PAS SUR :root. Declarees globalement, --navy, --orange
   ou --line ecraseraient les memes noms partout sur le site, y compris dans
   l en-tete et le pied de page. Elles vivent donc sur la racine du bloc.

   La police Plus Jakarta Sans est deja chargee par le site : on ne la demande
   pas une seconde fois.
   ===================================================================== */

#iecapi-comprendre *{box-sizing:border-box}

#iecapi-comprendre{
  --navy:#07124A; --navy-2:#12205F; --orange:#F18815; --orange-2:#d4760f;
  --muted:#64748B; --muted-2:#6b7391;
  --line:#E7E9F0; --hair:#C9D2E4; --tint:#EEF1F9; --page:#F8F9FB;
  --font:'Plus Jakarta Sans','Poppins',sans-serif;
}

/* ---------- the mockup stage ---------- */
/* LA SECTION EST TEINTEE, SON CONTENU EST EN CARTES BLANCHES.

   La maquette faisait l inverse : une grande carte blanche cerclee d un trait,
   posee sur une page blanche. On ne voyait pas la carte, on ne voyait que son
   trait, et juste en dessous celui du bloc « En résumé ». Deux filets
   horizontaux sans objet apparent. Un trait qui separe du blanc d avec du
   blanc ne separe rien.

   Le rythme repris est celui de la page assurance vie : situations en blanc,
   comprendre en teinte, resume en bande degradee.

   L INVERSION DES REMPLISSAGES EST LA CONSEQUENCE, PAS UN CHOIX A PART. Les
   panneaux interieurs etaient remplis en var(--page), soit exactement la
   teinte qui devient celle de la section. Les deux qui ne sont pas dans une
   etape, le schema d introduction et le bandeau des frais, passent donc en
   blanc. Ceux qui vivent DANS une etape gardent leur teinte : ils sont sur une
   carte blanche, le contraste tient.

   Le fond est porte par le conteneur Elementor, pour couvrir toute la largeur
   de l ecran et non la seule boite de 940 px. */
.e-con.e-parent:has(#iecapi-comprendre){background-color:#F8F9FB}

#iecapi-comprendre.iecapi-block{background:transparent;border:none;
  padding:56px 0 60px;margin-bottom:0;font-family:var(--font);color:var(--navy)}
#iecapi-comprendre .iecapi-inner{max-width:940px;margin:0 auto;padding:0 28px}
#iecapi-comprendre .iecapi-rule{width:44px;height:4px;border-radius:999px;background:var(--orange);margin:0 0 22px}
#iecapi-comprendre .iecapi-h2{font-size:31px;line-height:40px;font-weight:800;letter-spacing:-.4px;margin:0 0 16px}
#iecapi-comprendre .iecapi-lede{font-size:16.5px;line-height:28px;color:var(--muted-2);margin:0 0 34px;max-width:66ch}

/* schematic frame */
/* Celui d introduction n est pas dans une carte : il passe en blanc plus bas,
   sinon son remplissage serait exactement la teinte de la section. */
#iecapi-comprendre .iecapi-schema{background:var(--page);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;margin:0 0 34px}
#iecapi-comprendre .iecapi-inner > .iecapi-schema{background:#fff}
#iecapi-comprendre .iecapi-schema svg{display:block;width:100%;height:auto}
#iecapi-comprendre .iecapi-schema__cap{font-size:12.5px;line-height:20px;color:var(--muted);margin:14px 0 0;
  text-align:center}

/* steps */
/* CHAQUE ETAPE EST UNE CARTE, PLUS UNE LIGNE SEPAREE D UN FILET.
   Les etapes etaient des rangees separees par un trait de 1 px : sur une page
   longue elles se lisaient comme un seul pave. Elles deviennent des cartes
   blanches sur la teinte, ce qui donne la structure que le filet suggerait
   sans la produire.
   Pour revenir en arriere : rendre padding:30px 0 et le border-top, et retirer
   fond, bordure et rayon. */
#iecapi-comprendre .iecapi-step{background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:26px 30px 28px;margin:0 0 16px}
#iecapi-comprendre .iecapi-step__head{display:flex;gap:16px;align-items:baseline;margin:0 0 12px}
#iecapi-comprendre .iecapi-step__n{flex:none;font-size:14px;font-weight:800;color:var(--orange);letter-spacing:.5px;
  padding-top:4px}
#iecapi-comprendre .iecapi-step__t{font-size:22px;line-height:30px;font-weight:700;margin:0;letter-spacing:-.2px}
#iecapi-comprendre .iecapi-step__b{font-size:15.5px;line-height:27px;color:var(--muted-2);margin:0 0 20px;
  max-width:68ch;padding-left:46px}
#iecapi-comprendre .iecapi-step__b b{color:var(--navy);font-weight:700}

/* two tracks, particulier and societe */
#iecapi-comprendre .iecapi-tracks{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-left:46px;margin:0 0 4px}
#iecapi-comprendre .iecapi-track{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:17px 19px}
#iecapi-comprendre .iecapi-track__tag{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--navy);margin:0 0 8px}
#iecapi-comprendre .iecapi-track__tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--orange)}
#iecapi-comprendre .iecapi-track p{font-size:14px;line-height:24px;color:var(--muted);margin:0}
#iecapi-comprendre .iecapi-track p+p{margin-top:8px}

/* fact rows, same object as the situations block */
#iecapi-comprendre .iecapi-facts{list-style:none;margin:18px 0 0;padding:0 0 0 46px}
#iecapi-comprendre .iecapi-facts li{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
#iecapi-comprendre .iecapi-facts li:first-child{border-top:none}
#iecapi-comprendre .iecapi-facts b{font-weight:700;color:var(--navy)}
#iecapi-comprendre .iecapi-facts span{color:var(--muted);text-align:right;font-size:13.5px}

/* sub block, heir taxation */
#iecapi-comprendre .iecapi-sub{margin:22px 0 0 46px;padding:22px 24px 20px;background:var(--tint);border-radius:14px}
#iecapi-comprendre .iecapi-sub__t{font-size:17px;line-height:25px;font-weight:700;margin:0 0 10px}
#iecapi-comprendre .iecapi-sub__b{font-size:14.5px;line-height:25px;color:var(--muted);margin:0 0 6px;max-width:64ch}
#iecapi-comprendre .iecapi-sub__b b{color:var(--navy);font-weight:700}
#iecapi-comprendre .iecapi-sub__ex{font-size:13.5px;line-height:23px;color:var(--muted);margin:16px 0 0;
  padding:14px 16px;background:#fff;border:1px solid var(--hair);border-radius:12px}
#iecapi-comprendre .iecapi-facts--flush{padding-left:0;margin-top:6px}
#iecapi-comprendre .iecapi-facts--flush li{border-top-color:var(--hair)}

/* placeholder chips for missing product data */
#iecapi-comprendre .iecapi-ph{display:inline-block;border:1.5px dashed var(--orange);border-radius:999px;
  padding:1px 11px;font-size:12.5px;font-weight:700;color:var(--orange-2);
  background:#FFF7EE;white-space:nowrap}

/* worked examples */
#iecapi-comprendre .iecapi-ex{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 0}
#iecapi-comprendre .iecapi-ex__c{background:var(--page);border:1px solid var(--line);border-radius:16px;
  padding:24px 24px 20px}
#iecapi-comprendre .iecapi-ex__k{font-size:13px;font-weight:700;color:var(--orange);margin:0 0 6px}
#iecapi-comprendre .iecapi-ex__t{font-size:18px;line-height:26px;font-weight:700;margin:0 0 14px}
#iecapi-comprendre .iecapi-ex__l{list-style:none;margin:0;padding:0}
#iecapi-comprendre .iecapi-ex__l li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px;line-height:22px;color:var(--muted)}
#iecapi-comprendre .iecapi-ex__l li b{color:var(--navy);font-weight:700;text-align:right;white-space:nowrap}
#iecapi-comprendre .iecapi-ex__tot{display:flex;justify-content:space-between;gap:12px;margin:14px 0 0;
  padding:14px 16px;background:#fff;border:1px solid var(--hair);border-radius:12px;
  font-size:14.5px;font-weight:700}
#iecapi-comprendre .iecapi-ex__tot em{font-style:normal;color:var(--orange-2)}
#iecapi-comprendre .iecapi-ex__note{font-size:12.5px;line-height:20px;color:var(--muted);margin:12px 0 0}

/* frais band */
/* Le bandeau des frais est un enfant direct de .iecapi-inner. Son var(--tint),
   #EEF1F9, est trop proche de la teinte de section pour s en detacher : il
   devient une carte, comme les etapes au-dessus. */
#iecapi-comprendre .iecapi-frais{margin:34px 0 0;padding:26px 28px;background:#fff;
  border:1px solid var(--line);border-radius:16px}
#iecapi-comprendre .iecapi-frais h3{font-size:18px;line-height:26px;margin:0 0 6px}
#iecapi-comprendre .iecapi-frais p{font-size:14px;line-height:24px;color:var(--muted);margin:0 0 16px;max-width:64ch}
/* DEUX COLONNES, UNE PAR CONTRAT. Chaque colonne est un bloc autonome qui
   porte son intitule ET ses lignes : quand la grille passe a une colonne sous
   820 px, l intitule descend avec ses valeurs, PAR CONSTRUCTION. Aucune valeur
   ne peut se retrouver orpheline de son contrat, ce qui serait le pire defaut
   possible sur un tableau de frais. */
/* align-items:stretch ET NON start. Les deux colonnes n ont pas le meme
   nombre de lignes, la penalite sur le fonds en euros n existant que pour les
   personnes morales : mesure au navigateur, 514 px contre 602 px, soit 88 px
   d ecart. Deux encadres cote a cote dont l un s arrete 88 px plus haut
   donnent un bas de bloc en escalier ; le blanc au bas de la colonne la plus
   courte est plus propre que le decrochement. */
#iecapi-comprendre .iecapi-frais__g{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
#iecapi-comprendre .iecapi-frais__col{background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 18px 8px}
#iecapi-comprendre .iecapi-frais__who{font-size:13px;font-weight:800;color:var(--navy);
  letter-spacing:-.1px;margin:0 0 4px;padding:0 0 10px;border-bottom:1px solid var(--line)}
#iecapi-comprendre .iecapi-frais__rows{list-style:none;margin:0;padding:0}
#iecapi-comprendre .iecapi-frais__rows li{padding:11px 0;border-top:1px solid var(--line)}
#iecapi-comprendre .iecapi-frais__rows li:first-child{border-top:none}
#iecapi-comprendre .iecapi-frais__rows b{display:block;font-size:13px;font-weight:700;
  color:var(--navy);margin:0 0 3px}
#iecapi-comprendre .iecapi-frais__rows span{font-size:13px;line-height:20px;color:var(--muted)}
#iecapi-comprendre .iecapi-frais__i{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px}
#iecapi-comprendre .iecapi-frais__i b{display:block;font-size:13.5px;margin:0 0 7px}
#iecapi-comprendre .iecapi-foot{font-size:12.5px;line-height:20px;color:var(--muted);margin:26px 0 0;
  padding-top:18px;border-top:1px solid var(--line)}

@media(max-width:820px){
  #iecapi-comprendre .iecapi-h2{font-size:25px;line-height:33px}
  #iecapi-comprendre .iecapi-step__b,
  #iecapi-comprendre .iecapi-tracks,
  #iecapi-comprendre .iecapi-facts{padding-left:0}
  #iecapi-comprendre .iecapi-sub{margin-left:0;padding:18px 18px 16px}
  #iecapi-comprendre .iecapi-tracks,
  #iecapi-comprendre .iecapi-ex,
  #iecapi-comprendre .iecapi-frais__g{grid-template-columns:1fr}
  #iecapi-comprendre .iecapi-facts li{flex-direction:column;gap:3px}
  #iecapi-comprendre .iecapi-facts span{text-align:left}
  #iecapi-comprendre.iecapi-block{padding:38px 0 42px}
  #iecapi-comprendre .iecapi-step{padding:20px 18px 22px;border-radius:14px}
  #iecapi-comprendre .iecapi-inner{padding:0 18px}
}