/* ===================================================================== Bloc « Comment fonctionne un produit structuré ». TOUTE REGLE EST PORTEE PAR #iestruct-comprendre, et ce n est pas cosmetique. La page /produits-structures/ charge deja sa propre feuille produits-structures-page-blocks.css, et la tranche interdit d y toucher. Sans portee, des classes courtes pourraient se croiser avec elle. 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. FEUILLE DISTINCTE DE CELLE DE LA PAGE CAPI, VOLONTAIREMENT. Les deux pages divergent deja : le graphique de prix, l exemple a trois colonnes et les bandes de frais a trois cases n existent que chez les structures. Une bibliotheque partagee ferait qu une retouche ici changerait l autre page en silence. La police Plus Jakarta Sans est deja chargee par le site : on ne la demande pas une seconde fois. Le bloc @media(prefers-reduced-motion:reduce) de la maquette est vide et n est pas repris : ce bloc ne porte aucune animation ni aucune transition, il n y a donc rien a neutraliser. ===================================================================== */ #iestruct-comprendre *{box-sizing:border-box} #iestruct-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; } /* ---------- la scene de la maquette ---------- 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, releves a l ecran. 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. Un lecteur qui defile sait alors ou une section finit sans qu on ait besoin de lui tracer un trait. 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 : laisses tels quels, ceux qui ne sont pas dans une carte auraient disparu. Deux d entre eux passent donc en blanc, le schema d introduction et le bandeau des frais, parce qu ils sont des enfants directs de .iestruct-inner. 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(#iestruct-comprendre){background-color:#F8F9FB} /* Le bloc devient transparent : c est la teinte du conteneur qui se voit. */ #iestruct-comprendre .iestruct-block{background:transparent;border:none; padding:56px 0 60px;margin-bottom:0;font-family:var(--font);color:var(--navy)} #iestruct-comprendre .iestruct-inner{max-width:940px;margin:0 auto;padding:0 28px} #iestruct-comprendre .iestruct-rule{width:44px;height:4px;border-radius:999px;background:var(--orange);margin:0 0 22px} #iestruct-comprendre .iestruct-h2{font-size:31px;line-height:40px;font-weight:800;letter-spacing:-.4px;margin:0 0 16px} #iestruct-comprendre .iestruct-lede{font-size:16.5px;line-height:28px;color:var(--muted-2);margin:0 0 34px;max-width:66ch} /* ---------- cadre des schemas ---------- */ #iestruct-comprendre .iestruct-schema{background:var(--page);border:1px solid var(--line);border-radius:16px; padding:22px 20px;margin:0 0 34px} /* Celui d introduction n est pas dans une carte : il passe en blanc, sinon son remplissage serait exactement la teinte de la section. */ #iestruct-comprendre .iestruct-inner > .iestruct-schema{background:#fff} #iestruct-comprendre .iestruct-schema svg{display:block;width:100%;height:auto} #iestruct-comprendre .iestruct-schema__cap{font-size:12.5px;line-height:20px;color:var(--muted);margin:14px 0 0; text-align:center} /* ---------- les etapes numerotees ---------- */ /* CHAQUE ETAPE EST UNE CARTE, PLUS UNE LIGNE SEPAREE D UN FILET. Les quatre 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. */ #iestruct-comprendre .iestruct-step{background:#fff;border:1px solid var(--line); border-radius:16px;padding:26px 30px 28px;margin:0 0 16px} #iestruct-comprendre .iestruct-step__head{display:flex;gap:16px;align-items:baseline;margin:0 0 12px} #iestruct-comprendre .iestruct-step__n{flex:none;font-size:14px;font-weight:800;color:var(--orange);letter-spacing:.5px; padding-top:4px} #iestruct-comprendre .iestruct-step__t{font-size:22px;line-height:30px;font-weight:700;margin:0;letter-spacing:-.2px} #iestruct-comprendre .iestruct-step__b{font-size:15.5px;line-height:27px;color:var(--muted-2);margin:0 0 20px; max-width:68ch;padding-left:46px} #iestruct-comprendre .iestruct-step__b b{color:var(--navy);font-weight:700} /* Une etape « libre » abandonne le retrait de 46 px aligne sur le numero. */ #iestruct-comprendre .iestruct-step--free .iestruct-step__b, #iestruct-comprendre .iestruct-step--free .iestruct-facts, #iestruct-comprendre .iestruct-step--free .iestruct-tracks{padding-left:0} #iestruct-comprendre .iestruct-step--free .iestruct-sub{margin-left:0} /* ---------- les deux pistes de scenario ---------- */ #iestruct-comprendre .iestruct-tracks{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-left:46px;margin:0 0 4px} #iestruct-comprendre .iestruct-track{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:17px 19px} #iestruct-comprendre .iestruct-track__tag{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700; color:var(--navy);margin:0 0 8px} #iestruct-comprendre .iestruct-track__tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%; background:var(--orange)} #iestruct-comprendre .iestruct-track p{font-size:14px;line-height:24px;color:var(--muted);margin:0} /* ---------- listes de faits ---------- */ #iestruct-comprendre .iestruct-facts{list-style:none;margin:18px 0 0;padding:0 0 0 46px} #iestruct-comprendre .iestruct-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} #iestruct-comprendre .iestruct-facts li:first-child{border-top:none} #iestruct-comprendre .iestruct-facts b{font-weight:700;color:var(--navy)} #iestruct-comprendre .iestruct-facts span{color:var(--muted);text-align:right;font-size:13.5px} /* Pastille d une valeur produit encore inconnue : elle doit rester visible. */ #iestruct-comprendre .iestruct-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} /* ---------- encadre secondaire ---------- */ #iestruct-comprendre .iestruct-sub{margin:22px 0 0 46px;padding:22px 24px 20px;background:var(--tint);border-radius:14px} #iestruct-comprendre .iestruct-sub__t{font-size:17px;line-height:25px;font-weight:700;margin:0 0 10px} #iestruct-comprendre .iestruct-sub__b{font-size:14.5px;line-height:25px;color:var(--muted);margin:0;max-width:64ch} #iestruct-comprendre .iestruct-sub__b b{color:var(--navy);font-weight:700} /* ---------- exemple a trois colonnes ---------- */ #iestruct-comprendre .iestruct-ex{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 0} #iestruct-comprendre .iestruct-ex__c{background:var(--page);border:1px solid var(--line);border-radius:16px; padding:22px 22px 18px} #iestruct-comprendre .iestruct-ex__k{font-size:13px;font-weight:700;color:var(--orange);margin:0 0 6px} #iestruct-comprendre .iestruct-ex__t{font-size:16.5px;line-height:24px;font-weight:700;margin:0 0 12px} #iestruct-comprendre .iestruct-ex__l{list-style:none;margin:0;padding:0} #iestruct-comprendre .iestruct-ex__l li{display:flex;justify-content:space-between;gap:10px;padding:8px 0; border-bottom:1px solid var(--line);font-size:13.5px;line-height:21px;color:var(--muted)} #iestruct-comprendre .iestruct-ex__l li b{color:var(--navy);font-weight:700;text-align:right;white-space:nowrap} #iestruct-comprendre .iestruct-ex__tot{display:flex;justify-content:space-between;gap:10px;margin:13px 0 0; padding:13px 15px;background:#fff;border:1px solid var(--hair);border-radius:12px; font-size:14px;font-weight:700} #iestruct-comprendre .iestruct-ex__tot em{font-style:normal;color:var(--orange-2)} /* ---------- bandeau des frais ---------- */ /* Le bandeau des frais est lui aussi un enfant direct de .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. */ #iestruct-comprendre .iestruct-frais{margin:34px 0 0;padding:26px 28px;background:#fff; border:1px solid var(--line);border-radius:16px} #iestruct-comprendre .iestruct-frais h3{font-size:18px;line-height:26px;margin:0 0 6px} #iestruct-comprendre .iestruct-frais p{font-size:14px;line-height:24px;color:var(--muted);margin:0 0 16px;max-width:66ch} #iestruct-comprendre .iestruct-frais__g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #iestruct-comprendre .iestruct-frais__i{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px} #iestruct-comprendre .iestruct-frais__i b{display:block;font-size:13.5px;margin:0 0 7px} #iestruct-comprendre .iestruct-frais__i span{font-size:13px;line-height:21px;color:var(--muted)} /* ---------- mention de bas d exemple ---------- */ #iestruct-comprendre .iestruct-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){ #iestruct-comprendre .iestruct-h2{font-size:25px;line-height:33px} #iestruct-comprendre .iestruct-step__b, #iestruct-comprendre .iestruct-tracks, #iestruct-comprendre .iestruct-facts{padding-left:0} #iestruct-comprendre .iestruct-sub{margin-left:0;padding:18px 18px 16px} #iestruct-comprendre .iestruct-tracks, #iestruct-comprendre .iestruct-ex, #iestruct-comprendre .iestruct-frais__g{grid-template-columns:1fr} #iestruct-comprendre .iestruct-facts li{flex-direction:column;gap:3px} #iestruct-comprendre .iestruct-facts span{text-align:left} #iestruct-comprendre .iestruct-block{padding:38px 0 42px} #iestruct-comprendre .iestruct-step{padding:20px 18px 22px;border-radius:14px} #iestruct-comprendre .iestruct-inner{padding:0 18px} } /* ------------------------------------------------------------------ LA PHRASE DE GAMME, en tete de la section. ELLE N EST PAS UN AVERTISSEMENT, et ne doit pas en avoir l air : elle precise le PERIMETRE de ce qui suit. Un encadre rouge ferait lire un risque la ou il n y a qu une precision de lecture. On la pose donc comme une note discrete, filet a gauche, texte plus petit que le chapeau qui la suit, pour qu elle se lise AVANT sans se substituer a lui. ------------------------------------------------------------------ */ #iestruct-comprendre .iestruct-note-gamme{ max-width:62ch;margin:0 0 18px;padding:10px 0 10px 16px; border-left:3px solid var(--orange); font-size:14.5px;line-height:1.55;color:var(--muted)}