/* Ulysse Conseils — personnalisations. * * Ce fichier est le SEUL endroit où modifier le rendu à la main. Il est chargé * après « fidelite.css », qui est généré à partir de la maquette et réécrit à * chaque régénération : tout ce qu'on y mettrait serait perdu. * * Chaque bloc dit ce qu'il change et pourquoi. Le « !important » est assumé * ici : ces règles doivent passer devant une feuille générée dont la * spécificité monte jusqu'à six classes, et le déclarer franchement vaut mieux * qu'empiler une douzaine de « .elementor » pour arriver au même résultat. */ /* ====================================================================== Illustrations — panneau sombre sur tout le site ---------------------------------------------------------------------- Écart assumé avec la maquette, demandé le 15/09/2026. La maquette habillait les panneaux d'illustration différemment selon les familles de pages : pastel clair sur les Expertises, les Secteurs et l'accueil, chaque carte ayant sa teinte. Le choix retenu est le traitement « bleu nuit + halo or », qui était celui de base de la maquette et que seules les surcharges par page recouvraient. Concrètement, on rétablit ici les valeurs de base — reprises au caractère près de « .feature-illustration » et « .feature-illustration svg » — pour toutes les familles : accueil, Expertises, Secteurs, Actualités, articles. Les couleurs des formes (les règles « .v-* ») ne sont pas touchées : ce sont elles qui donnent leur relief aux dessins sur le fond sombre. ====================================================================== */ body.ulysse .elementor .feature-illustration { /* Fond : halo or en haut à droite, sur l'encre de la charte. */ background: radial-gradient(circle at 72% 18%, rgba(234, 220, 174, .86), transparent 36%), var(--ink) !important; /* Les surcharges par page ajoutaient un filet clair, invisible sur du sombre. */ border: 0 !important; /* Padding et hauteur de base : les panneaux pastel imposaient .65rem/178px. */ padding: 1rem !important; min-height: 0 !important; border-radius: 18px 18px 8px 8px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px rgba(4, 27, 39, .14) !important; } body.ulysse .elementor .feature-illustration svg { /* Trait or clair : c'est lui qui détache le dessin du fond sombre. */ stroke: var(--gold-soft) !important; stroke-width: 2 !important; /* Les panneaux clairs désaturaient les dessins ; sur fond sombre, non. */ filter: none !important; } /* ====================================================================== Pastilles de pictogramme — même panneau que les illustrations ---------------------------------------------------------------------- Demandé le 15/09/2026, dans la continuité du bloc précédent. Ces pastilles appartenaient déjà à la même famille — fond encre, trait or — mais la maquette posait par-dessus une couleur différente par élément de liste : bleu, ocre, vert, prune, terracotta. D'où l'impression de palettes qui ne se répondent pas. On rétablit le fond de base et on lui ajoute le halo des illustrations. Le rayon des angles n'est pas touché : la maquette le fait varier d'un élément à l'autre (carré arrondi, cercle, angle cassé) et ce rythme est voulu. « .feature-icon » est de la partie depuis le 15/09 au soir. La maquette lui donnait déjà le fond encre et le trait or — c'est le même objet — mais pas le halo : posée à côté d'une pastille qui l'a, elle paraissait éteinte. Sa géométrie n'est pas touchée : 62 px, angles à 18 px et ombre portée restent ceux de la maquette. « .signal-icon » a quitté ce bloc : la classe existe dans la feuille de la maquette mais aucune page ne la porte. La règle ne visait rien. ====================================================================== */ body.ulysse .elementor .audience-icon, body.ulysse .elementor .data-list-icon, body.ulysse .elementor .feature-icon { /* * Le halo est le même que celui des illustrations, mais adouci et resserré : * la valeur d'origine (.86 jusqu'à 36 %) reste ambiante sur un panneau de * 300 px de large, et devient une tache qui mange le pictogramme sur une * pastille de 58. Même lumière, à l'échelle de l'objet. */ background: radial-gradient(circle at 78% 14%, rgba(234, 220, 174, .34), transparent 58%), var(--ink) !important; /* * Le trait des pictogrammes, en or franc plutôt qu'en or pâle. * * « --gold-soft » (#eadcae) est une crème : à 1,55 px sur un fond encre, elle * passe pour du blanc sale plutôt que pour de l'or. « --gold » (#d7a92f) est * la couleur d'accent de la charte, celle des boutons et des surtitres — le * pictogramme rejoint donc la même famille que le reste de la page. Le * contraste sur l'encre reste de 7,8 pour 1. * * La couleur est posée sur la pastille, pas sur le SVG : le dessin trace en * « stroke: currentColor », et une seule valeur suffit donc à le suivre. */ color: var(--gold) !important; /* Les variantes claires ajoutaient un filet, invisible sur du sombre. */ border: 0 !important; } /* * Les cinq pastilles de Gestion de patrimoine traçaient encore en crème. * * La maquette écrit « stroke: #f2df9f » directement sur leur SVG, et une valeur * posée sur le dessin l'emporte sur la couleur héritée de la pastille. Il faut * donc viser le trait lui-même pour que ces cinq-là rejoignent les 56 autres. */ body.ulysse .elementor .audience-icon svg, body.ulysse .elementor .data-list-icon svg, body.ulysse .elementor .feature-icon svg { stroke: var(--gold) !important; } /* ====================================================================== Listes longues — deux colonnes, le texte reste à gauche ---------------------------------------------------------------------- Demandé le 15/09/2026 : « quand c'est long comme ça, mets sur 2 colonnes », puis « les 2 colonnes sur la même ligne, avec le texte à gauche ». La maquette donne à ces listes un panneau latéral d'environ 470 px, à côté du texte. À cinq éléments c'est juste ; à sept, la colonne devient une pile. Couper la liste en deux DANS ce panneau ne gagne rien — mesuré : chaque élément tombe à 190 px, son texte passe de deux à cinq lignes, et les quatre rangées font la même hauteur que les sept d'avant. On échange du vertical contre de l'horizontal sans rien gagner. Il faut donc que le panneau s'élargisse, sans passer sous le texte : la section garde ses deux colonnes et change de proportions. Le seuil est à six éléments, exprimé par « :has(> *:nth-child(6)) » : la règle suit le contenu. Ajouter un septième point de vigilance dans Elementor déclenche la bascule sans toucher à cette feuille ; en retirer deux la défait. Trois listes sont concernées aujourd'hui : BTP et Immobilier (sept), Direction financière externalisée (six). Deux colonnes ne valent que si le panneau a la place de les tenir. D'où deux fenêtres, et pas une seule : — au-dessus de 1200 px, la section est rééquilibrée et le panneau atteint 765 px : deux colonnes de 296 px, dont 194 px de texte ; — de 761 à 980 px, la maquette replie d'elle-même la section sur une colonne et donne au panneau toute la largeur (760 px au maximum) : deux colonnes y tiennent aussi, à 346 px. Entre les deux (981–1199 px), le panneau garde sa largeur d'origine et la liste reste sur une colonne : deux colonnes de 221 px y ramèneraient le problème qu'on vient de résoudre, chaque libellé retombant à 118 px et trois lignes. Sous 760 px, même raison. ====================================================================== */ @media (min-width: 1200px) { body.ulysse .elementor .expertise-principle-grid:has(.audience-list > *:nth-child(6)), body.ulysse .elementor .service-principle-grid:has(.service-focus-list > *:nth-child(6)) { /* * La maquette pose « 1.08fr .72fr ». On rééquilibre au profit du panneau sans * l'inverser : à .72fr le texte tombait à 524 px et le grand titre sérif * passait à six lignes. À .85fr il en fait cinq, le panneau dispose de 765 px, * et la hauteur de la section reste commandée par le texte — comme dans la * maquette. */ grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) !important; gap: clamp(2rem, 3.5vw, 3.5rem) !important; } body.ulysse .elementor .audience-list:has(> *:nth-child(6)), body.ulysse .elementor .service-focus-list:has(> *:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: .8rem !important; } } @media (min-width: 761px) and (max-width: 980px) { body.ulysse .elementor .audience-list:has(> *:nth-child(6)), body.ulysse .elementor .service-focus-list:has(> *:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: .8rem !important; } } /* ====================================================================== Cartes numérotées — le compteur disparaît ---------------------------------------------------------------------- Demandé le 15/09/2026 : « enlève les chiffres ». La maquette pose un « 01 », « 02 »… en haut à droite de chaque carte, par un compteur CSS. C'était lisible sur les vignettes pastel d'origine, en or sombre sur fond clair. Depuis que les panneaux sont bleu nuit, ce même or sombre (#795c12) se pose sur l'encre : le chiffre devient une tache grise dans un coin, sans rien numéroter d'utile — ces cartes ne se lisent pas dans l'ordre. 118 cartes sur 22 pages. Le compteur lui-même n'est pas touché : seule sa restitution disparaît. Pour la rétablir, supprimer ce bloc. ====================================================================== */ body.ulysse .elementor .feature-card::before { content: none !important; } /* ====================================================================== Cartes d'actualité — quand le visuel est une photo ---------------------------------------------------------------------- Demandé le 15/09/2026, avec la possibilité de lier une image. Le panneau de carte est pensé pour un dessin au trait : fond encre, halo or, un peu de marge autour. Une photo n'a besoin d'aucun des trois — elle remplit le cadre et garde ses angles. On ne change donc que ce qui gênerait, et le reste (forme, ombre, place dans la grille) vient toujours de la maquette. ====================================================================== */ body.ulysse .elementor .blog-card-visual.est-photo, body.ulysse .elementor .blog-feature-visual.est-photo { padding: 0 !important; background: var(--ink) !important; } body.ulysse .elementor .blog-card-visual.est-photo img, body.ulysse .elementor .blog-feature-visual.est-photo img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: inherit; } /* ====================================================================== Lien d'évitement — le rendre visible quand on l'atteint au clavier ---------------------------------------------------------------------- Constaté le 15/09/2026 en vérifiant l'accessibilité. Le lien existe : Blocksy écrit bien un « Passer au contenu » en tête de page, et sa cible #main est présente sur les 35 pages. Mais au focus il reste à 1×1 pixel, découpé et rejeté à 160 000 px au-dessus de la page : la règle de Blocksy qui devait le révéler ne passe pas devant la couche de fidélité. Un visiteur au clavier appuie donc sur Tab, active un lien qu'il ne voit pas, et ne sait pas où il vient d'arriver. On le remet à sa place au focus, habillé à la charte. Il reste invisible tant qu'on ne l'atteint pas : rien ne change pour la souris. ====================================================================== */ body.ulysse .skip-link:focus { position: fixed !important; top: 1rem !important; left: 1rem !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; z-index: 100000 !important; padding: .7rem 1.1rem !important; background: var(--ink) !important; color: var(--gold-soft) !important; border-radius: 10px !important; box-shadow: 0 0 0 3px var(--gold), 0 12px 28px rgba(4, 27, 39, .35) !important; font-size: .95rem !important; letter-spacing: .01em !important; text-decoration: none !important; white-space: nowrap !important; } /* ====================================================================== Champs de formulaire — leur rendre leur hauteur ---------------------------------------------------------------------- Signalé le 20/09/2026 : « le menu déroulant ne fonctionne pas ». Il fonctionnait, mais son libellé était coupé en deux : on voyait une tranche de « Choisissez… » en haut de la case, et le champ paraissait mort. Le calcul : la maquette habille ces champs au padding (0,9 rem en haut et en bas) sans leur fixer de hauteur — ils font donc 59 px. Blocksy, lui, impose height: var(--theme-form-field-height, 40px) à tout champ de formulaire. En box-sizing: border-box, 40 px moins les paddings (28,8) et les bordures (4) laissent 7,2 px pour une ligne qui en demande 26,4 : le texte déborde de 19 px et se fait rogner. On rend donc la hauteur au contenu. Cela vaut pour les six champs du formulaire de contact et pour ceux de la prise de rendez-vous — tous étaient écrasés de la même façon, ce qui rendait aussi la page Contact 44 px plus courte que la maquette dans le relevé du 15/09. ====================================================================== */ body.ulysse .elementor input:not([type="checkbox"]):not([type="radio"]), body.ulysse .elementor select, body.ulysse .elementor textarea { height: auto !important; } /* ====================================================================== Photos du Cabinet — centrer la photo dans son liseré ---------------------------------------------------------------------- Demandé le 20/09/2026 : « on centre la photo dans les liserés ». La maquette dessine autour de ces visuels un filet doré délibérément décalé : inset -1rem 1rem 1rem -1rem, soit 16 px qui dépassent en haut et à gauche, et 16 px cachés sous la photo à droite et en bas. L effet visait une ombre de passe-partout ; à l usage il se lit comme un rectangle qui a glissé. On le recentre : même filet, même couleur, même épaisseur, mais à égale distance des quatre côtés de la photo. Le filet change aussi de support. Il était posé sur la figure entière, qui comprend la légende ; centré sur cette boîte, il aurait entouré la légende avec. On le pose donc sur le bloc de l image seule. ====================================================================== */ body.ulysse .elementor .cabinet-visual::before { content: none !important; } body.ulysse .elementor .cabinet-visual .cdp-img { position: relative; } body.ulysse .elementor .cabinet-visual .cdp-img::before { content: ""; position: absolute; inset: -1rem; border: 1px solid rgba(121, 92, 18, .42); pointer-events: none; } /* Sous 700 px la maquette resserre le filet : on garde ce réglage. */ @media (max-width: 700px) { body.ulysse .elementor .cabinet-visual .cdp-img::before { inset: -.6rem; } } /* ====================================================================== Le bouton « Laisser un avis » ---------------------------------------------------------------------- Les avis sont affichés par l'extension Trustindex, qui apporte son propre habillage. Elle ne propose pas de bouton pour en déposer un : le voici, à la charte du site plutôt qu'à la leur. Il reprend le bouton or de la maquette sans en hériter, parce que la classe de la maquette embarque aussi une largeur minimale qui jure sous un bloc d'avis. ====================================================================== */ /* * Le bouton est centré sous le bloc d'avis, pas aligné sur sa colonne de * gauche : calé à gauche, il semblait appartenir à la note plutôt qu'à * l'ensemble, et le blanc à sa droite se lisait comme un oubli. */ body.ulysse .elementor .avis-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.4rem; margin: 1.6rem 0 0; } body.ulysse .elementor .avis-bouton { display: inline-flex; align-items: center; padding: .72rem 1.35rem; background: var(--gold); color: var(--ink); border-radius: 8px; font-weight: 600; font-size: .95rem; letter-spacing: .01em; text-decoration: none; transition: background .18s ease; } body.ulysse .elementor .avis-bouton:hover, body.ulysse .elementor .avis-bouton:focus-visible { background: var(--gold-dark); color: #fff; } /* Le rappel montré dans l'éditeur quand aucun lien n'est saisi. */ body.ulysse .elementor .avis-vide { margin: 0; padding: 1rem 1.2rem; border: 1px dashed rgba(83, 101, 115, .4); border-radius: 10px; color: var(--muted); font-size: .92rem; } /* ====================================================================== Le bloc d'avis de Trustindex — le rendre visible ---------------------------------------------------------------------- Posé le 20/09/2026, à la demande du cabinet : l'habillage Google officiel plutôt que le bloc maison. L'extension rend les avis côté serveur — le contenu est bien dans la page — mais elle les masque en ligne par « opacity: 0; height: 0 !important; overflow: hidden !important », et compte sur son script, chargé depuis cdn.trustindex.io, pour les révéler. Relevé ici : le script se charge, ses fonctions existent, et le bloc reste à zéro pixel. Résultat, une section vide sur la page. On le découvre donc nous-mêmes. C'est aussi la position la plus sûre : le contenu étant déjà dans le HTML, il ne dépend plus d'un script étranger pour être lu — ni d'un réseau lent, ni d'un bloqueur de publicité, ni d'une panne de leur CDN. Effet de bord assumé : on perd leur anti-scintillement, donc le bloc peut apparaître avant d'être mis en forme. Préférable à ne jamais apparaître. ====================================================================== */ body.ulysse .ti-widget { opacity: 1 !important; height: auto !important; overflow: visible !important; }