/* ===================================================================== Mise en scene de la pile du hero, page /produits-structures/. CETTE FEUILLE NE CONTIENT RIEN DE LA CARTE, sur le modele de scpi-hero-stack.css. La carte est RIGOUREUSEMENT celle du catalogue : elle est stylee par struct-cards.css et cards-grid-ico.css, mises en file par le meme raccourci. Ici, uniquement la pile, le masque, la ligne d invitation et le repli. TOUTE REGLE EST PORTEE PAR .iestruct-hs, la classe que le bloc ajoute a cote de .ielp-struct-cards. Rien ne peut donc atteindre le catalogue du tableau de bord, qui ne porte jamais cette classe. AUCUNE VARIABLE N EST DECLAREE SUR :root. ===================================================================== */ .iestruct-hs{ --hs-navy:#07124A; --hs-orange:#F18815; --hs-muted:#64748B; --hs-ombre:0 22px 42px -18px rgba(9,17,54,.28); } /* --------------------------------------------------------------------- LA PILE EN EVENTAIL. LA LARGEUR EST CELLE DU CATALOGUE, 290 px. La grille du catalogue est repeat(auto-fill, minmax(290px, 1fr)) : 290 est donc la largeur plancher a laquelle il affiche une carte, et c est exactement celle que scpi-hero-stack donne a ses trois cartes. La pile s adapte a la carte, pas l inverse : le conteneur et les decalages sont ceux de SCPI, 550 x 460 et 0 / 130 / 260. LES TROIS CARTES ONT LA MEME TAILLE. C est le releve du navigateur qui donnait 284 x 345 aux laterales et 238 x 311 a celle du centre : ces deux premiers nombres sont la BOITE ENGLOBANTE d une carte tournee, pas sa taille. Verification : 238*cos9 + 311*sin9 = 283,7 soit les 284 mesures 238*sin9 + 311*cos9 = 344,4 soit les 345 mesures scpi-hero-stack.css fait de meme : une seule largeur, 290px, pour ses trois cartes, et seule la rotation les differencie. Aucune mise a l echelle : la matrice de transformation reste de module 1. --------------------------------------------------------------------- */ .iestruct-hs .iestruct-hs__cartes{ position:relative; width:550px; max-width:100%; height:460px; margin:0 auto; } /* L ENVELOPPE NE PORTE PLUS L OMBRE, ET C EST UN CORRECTIF. Elle avait un rayon de zero alors que la carte qu elle contient en a un de 18 px, pour des boites de taille strictement identique. Une ombre epouse la forme de la boite QUI LA PORTE : elle etait donc dessinee en rectangle a angles vifs derriere une carte a coins arrondis, et depassait aux quatre coins, ce qui se voyait nettement sur les deux cartes tournees de 9 degres. L ombre est descendue sur .struct-card, qui porte deja le rayon de 18 px ; l enveloppe ne sert plus qu a la rotation et au placement, ce qui est son role. Le filigrane n etait pas en cause : .struct-card__head a bien son overflow:hidden et son rayon haut. */ .iestruct-hs .iestruct-hs__carte{ position:absolute; width:290px; line-height:1.35; transform-origin:bottom center; } .iestruct-hs .iestruct-hs__carte .struct-card{box-shadow:var(--hs-ombre)} /* RIEN N EST CLIQUABLE DANS UN APERCU, ET LE PIED DE CARTE EST RETIRE. La carte du catalogue porte un lien de couverture et deux boutons, « Faire une demande » et « En savoir plus », qui menent a la fiche du produit. Un apercu n a pas de fiche : leur href serait vide, donc trois liens morts sur une page publique. La tranche 67 les avait deja remplaces par la ligne d invitation sous la pile ; ils sont masques ici plutot que retires du balisage, puisque ce balisage est desormais celui du catalogue et qu on n y touche pas. */ .iestruct-hs .iestruct-hs__carte .struct-card{pointer-events:none} /* NI LIEN DE COUVERTURE NI PIED DE CARTE A MASQUER ICI : hcn_struct_card() ne les rend plus du tout pour un jeu de valeurs. Ils sortaient avec un href vide, qui recharge la page au clic, et un lien masque en CSS reste un lien dans le document. Ils sont donc ecartes a la source. */ /* Gauche, en retrait, derriere. */ .iestruct-hs .card-1{top:20px;left:0;transform:rotate(-9deg);z-index:1} /* Centre, premier plan, droite. */ .iestruct-hs .card-2{top:0;left:130px;transform:rotate(0deg);z-index:3} /* Droite, en retrait, derriere. */ .iestruct-hs .card-3{top:20px;left:260px;transform:rotate(9deg);z-index:2} /* --------------------------------------------------------------------- LE MASQUE. IL NE PORTE QUE DES POINTS, JAMAIS UN CHIFFRE. Retire dans l inspecteur, il ne revele que des points. Applique a des valeurs reelles il ne cacherait rien, elles resteraient lisibles dans le code source ; applique a de fausses valeurs il serait pire encore. --------------------------------------------------------------------- */ /* LE MASQUE EST APPLIQUE PAR CETTE FEUILLE, ET NON PAR UNE CLASSE DANS LE BALISAGE. Le balisage vient desormais de hcn_struct_card(), le rendu du catalogue, qui ne connait pas nos classes : le flou est donc pose sur les QUATRE EMPLACEMENTS de la carte reelle qui recoivent des points. Un emplacement ajoute au composant demain n heritera pas du flou tout seul, c est le prix de ne rien reecrire ; il n en heritera pas non plus de points, puisque le jeu de valeurs est explicite. */ .iestruct-hs .iestruct-hs__carte .struct-card__name, .iestruct-hs .iestruct-hs__carte .struct-card__sub, .iestruct-hs .iestruct-hs__carte .struct-card__hl-val, .iestruct-hs .iestruct-hs__carte .rowv{ filter:blur(3.5px); user-select:none; letter-spacing:.06em; } /* La barre grise du nom a disparu avec le balisage reecrit : le composant du catalogue rend un

simple, sans enfant ou glisser un aplat. Le nom porte donc des points, floutes comme le reste. Il reste masque pour la meme raison qu avant : le nom reel d un produit contient son coupon. */ /* --------------------------------------------------------------------- LE CUE, TRANSPOSE DE scpi-hero-stack.css AU CARACTERE PRES. CE N EST PAS UN LIEN : c est UNE PHRASE suivie d UNE FLECHE dans un cercle. Le lien souligne d avant confondait les deux. Structure, mesures et animations reprises du releve de /scpi/ : phrase de 22 px en gras navy avec un seul mot en orange via , puis cercle de 44 px borde de 1,5 px. Le hero porte deja son appel a l action principal, « Decouvrir les projets » : le cue reste une invitation, pas un second bouton. --------------------------------------------------------------------- */ .iestruct-hs .iestruct-hs__cue{ margin-top:36px; text-align:center; opacity:0; animation:iestructHsFadeUp .7s ease-out 1.1s 1 normal forwards running; } .iestruct-hs .iestruct-hs__cue-text{ font-family:'Plus Jakarta Sans','Poppins',sans-serif; font-size:22px; font-weight:700; color:var(--hs-navy); letter-spacing:-0.01em; margin-bottom:12px; } .iestruct-hs .iestruct-hs__cue-text em{color:var(--hs-orange);font-style:normal} .iestruct-hs .iestruct-hs__cue-arrow{ width:44px;height:44px;margin:0 auto; border:1.5px solid var(--hs-navy); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--hs-navy); font-size:18px;text-decoration:none; animation:iestructHsBob 2.2s ease-in-out 0s infinite; } .iestruct-hs .iestruct-hs__cue-arrow svg{display:block} .iestruct-hs .iestruct-hs__cue-arrow:focus-visible{ outline:3px solid var(--hs-orange); outline-offset:3px; } /* LES NOMS DE KEYFRAMES SONT GLOBAUX EN CSS, sans portee possible : ils sont donc prefixes. Une animation nommee « fadeUp » entrerait en collision avec n importe quel autre greffon qui en declarerait une, et la derniere chargee gagnerait. */ @keyframes iestructHsFadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } @keyframes iestructHsBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} } /* Mouvement desactive, mais etat final lisible : le cue ne doit surtout pas rester invisible parce que son animation d apparition est neutralisee. */ @media(prefers-reduced-motion:reduce){ .iestruct-hs .iestruct-hs__cue{animation:none;opacity:1 !important} .iestruct-hs .iestruct-hs__cue-arrow{animation:none} } /* --------------------------------------------------------------------- LA GRILLE FANTOME DU HERO, deux variables et non une. Le conteneur qui accueille la pile etait une grille 2 par 2, heritee des quatre anciennes cartes. Les donnees de la page ont ete corrigees a une colonne, mais post-6.css impose au dessus de 1280 px .publique-hero-card{--e-con-grid-template-columns:repeat(2,2fr)!important} et un !important l emporte sur la declaration generee pour l element. LES RANGEES SONT LE SECOND MOITIE DU DEFAUT, et la plus couteuse : le conteneur gardait deux rangees de 493,9 px, d ou une colonne droite de 1028 px pour 512 px de contenu, une section de 1224 px, et 259 px d ecart entre les centres des deux colonnes. La variable des rangees ne vient pas de post-6.css mais du reglage Elementor du conteneur, que la surcharge des colonnes ne couvrait pas. LA REGLE NE VISE AUCUN IDENTIFIANT ELEMENTOR : elle est portee par la classe du hero ET par celle du bloc, donc elle ne s applique que la ou cette pile est posee. Les autres pages produit qui partagent .publique-hero-card ne sont pas touchees. --------------------------------------------------------------------- */ .publique-hero-card:has(.iestruct-hs){ --e-con-grid-template-columns:1fr !important; --e-con-grid-template-rows:auto !important; } /* LE REPLI EST LE NOTRE, PAS CELUI DE SCPI, qui masque toute la pile ET son cue sous 960 px. Ici la pile survit : seules les deux cartes laterales s effacent et celle du centre se recentre. LE POINT DE RUPTURE DU CUE EST DONC ALIGNE SUR CELUI DE LA PILE, 520 px, et non sur les 960 px de SCPI : le cue reste visible tant que la pile l est, il se contente de reduire. */ @media(max-width:520px){ .iestruct-hs .iestruct-hs__cartes{width:100%;height:340px} .iestruct-hs .card-1,.iestruct-hs .card-3{display:none} .iestruct-hs .card-2{left:50%;transform:translateX(-50%)} .iestruct-hs .iestruct-hs__cue-text{font-size:18px} }