/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/ Description: Thème enfant de Hello Elementor pour le site Schoellkopf Avocat. Author: Matthias Imbert Template: hello-elementor Version: 1.1.7 Text Domain: hello-elementor-child License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* === SCHOELLKOPF AVOCAT === */ /* Polices auto-hébergées (Switzer + Adobe Caslon Pro) chargées via assets/fonts/fonts.css. Caslon existe en DEUX graisses statiques : Regular (100→500) et Semibold (600→900). Le rendu historique du site est le Semibold -> les règles Caslon ci-dessous demandent explicitement 600. Utiliser 300/400 pour obtenir le Regular. */ body { font-family: 'Switzer', sans-serif; font-size: max(16px, min(20px, calc(18 * var(--theme-spx-ratio)))); color: #1a1a1a; background-color: #ffffff; } h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: 'Adobe Caslon Pro', Georgia, serif; color: #1a1a1a; } /* H1 : taille fluide (40px mini, 64px maxi), formule source. */ h1, h1.elementor-heading-title { font-size: max(40px, min(64px, calc(60 * var(--theme-spx-ratio)))) !important; font-weight: 600 !important; line-height: 1; } /* Neutralise le CSS perso hérité "Playfair Display" (post-11.css) : force Adobe Caslon sur les titres du widget Titre, sans toucher aux tailles. */ .elementor-widget-heading .elementor-heading-title { font-family: 'Adobe Caslon Pro', Georgia, serif !important; } /* Ratio fluide "spx" repris de la source : largeur bornée à 1600px, divisée par 1280. Chaîne d'origine (Wix), résolue : --full-viewport : 100 * var(--one-unit) * var(--browser-zoom) -> 100vw --scaling-factor : clamp(0px, 100vw, min(9999px, 1600px)) -> clamp(0px, 100vw, 1600px) --theme-spx-ratio : var(--scaling-factor) / 1280 1280 (et non 1200) est la bonne valeur : les règles « coefficient » plus bas l'encodent déjà (0.015625 * 1280 = 20px, 0.0125 * 1280 = 16px, 0.0562513 * 1280 = 72px). (100vw au lieu de 100cqw : Elementor ne définit pas de container-type, donc les container-queries ne s'appliqueraient pas.) */ :root { --scaling-factor: clamp(0px, 100vw, 1600px); /* largeur bornée à 1600px */ --scrollbar-width: 0px; /* corrige la scrollbar (source) */ --theme-spx-ratio: calc(var(--scaling-factor) / 1280); /* … divisée par 1280 */ } /* Échelle typographique des titres — tailles FLUIDES calées sur la source. Formule : max(min, min(max, base * --theme-spx-ratio)). La famille Adobe Caslon est imposée plus haut ; ici taille/graisse/interligne. !important : prime sur les tailles réglées par widget dans Elementor. */ h2 { font-size: max(32px, min(50px, calc(46 * var(--theme-spx-ratio)))) !important; font-weight: 600 !important; line-height: 1.1em !important; } h3 { font-size: max(20px, min(32px, calc(30 * var(--theme-spx-ratio)))) !important; font-weight: 600 !important; line-height: 1.2em !important; } h4 { font-size: 36px !important; font-weight: 600 !important; line-height: 1.2em !important; } h5 { font-size: max(20px, min(32px, calc(30 * var(--theme-spx-ratio)))) !important; font-weight: 600 !important; line-height: 1.2em !important; } h6 { font-size: max(18px, min(24px, max(0.5px, calc(0.015625 * (var(--scaling-factor) - var(--scrollbar-width)))))) !important; font-weight: 400 !important; line-height: 1.2em !important; } /* Exception H6 : en Switzer (pas Caslon). Spécificité 0,2,1 pour passer devant l'override Caslon des titres-widgets (.elementor-widget-heading .elementor-heading-title). */ h6, .elementor-widget-heading h6.elementor-heading-title { font-family: 'Switzer', sans-serif !important; } /* ========================================================= Styles de texte de la source Wix (.font_0 … .font_10) --------------------------------------------------------- Relevés tels quels sur https://www.schoellkopfavocat.com/ (règles .font_N + variables --font_N). À poser comme classe CSS sur un widget Elementor pour recaler un élément sur l'échelle typographique d'origine. Correspondances de familles : adobe-caslon-w01-smbd -> 'Adobe Caslon Pro' (la source demande 400 sur un fichier Semibold : chez nous cela s'écrit 600) orig_switzer_regular -> 'Switzer' 400 Couleurs source : color_11 #000 · color_13 #191919 · color_14 #4d4d4d. La couleur est volontairement SANS !important : elle reste surchargeable dans Elementor, contrairement à la fonte/taille/interligne. Les liens sont ciblés en a:not(.elementor-button) : les boutons Elementor gardent leur propre typographie, et la spécificité obtenue (0,2,1) passe devant la règle globale a:not(.elementor-button) (0,1,1) déclarée plus bas. Même exclusion sur les span : le libellé d'un bouton vit dans un , et Elementor ne colore que le parent. Cibler ce span directement écraserait la couleur réglée par widget, que le span ne reçoit que par héritage. Le survol global a:not(.elementor-button):hover est aussi en 0,2,1 mais déclaré APRÈS : il gagne l'égalité, le survol du site est préservé. Placé APRÈS l'override Caslon des titres-widgets pour gagner l'égalité de spécificité (0,2,0) par l'ordre de la cascade. */ /* --- Titres : Adobe Caslon Pro (Semibold) --- */ .font_0, .font_0 p, .font_0 a:not(.elementor-button), .font_0 .elementor-heading-title, .font_0 span:not(.elementor-button span) { font-family: 'Adobe Caslon Pro', Georgia, serif !important; font-weight: 600 !important; --sk-font-size: max(40px, min(64px, calc(60 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.1em !important; letter-spacing: 0em !important; color: #000000; } .font_2, .font_2 p, .font_2 a:not(.elementor-button), .font_2 .elementor-heading-title, .font_2 span:not(.elementor-button span) { font-family: 'Adobe Caslon Pro', Georgia, serif !important; font-weight: 600 !important; --sk-font-size: max(32px, min(50px, calc(46 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.1em !important; letter-spacing: 0em !important; color: #000000; } .font_3, .font_3 p, .font_3 a:not(.elementor-button), .font_3 .elementor-heading-title, .font_3 span:not(.elementor-button span) { font-family: 'Adobe Caslon Pro', Georgia, serif !important; font-weight: 600 !important; --sk-font-size: max(36px, min(48px, calc(40 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.2em !important; letter-spacing: 0em !important; color: #000000; } .font_4, .font_4 p, .font_4 a:not(.elementor-button), .font_4 .elementor-heading-title, .font_4 span:not(.elementor-button span) { font-family: 'Adobe Caslon Pro', Georgia, serif !important; font-weight: 600 !important; --sk-font-size: max(24px, min(38px, calc(36 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.2em !important; letter-spacing: 0em !important; color: #000000; } .font_5, .font_5 p, .font_5 a:not(.elementor-button), .font_5 .elementor-heading-title, .font_5 span:not(.elementor-button span) { font-family: 'Adobe Caslon Pro', Georgia, serif !important; font-weight: 600 !important; --sk-font-size: max(20px, min(32px, calc(30 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.2em !important; letter-spacing: 0em !important; color: #000000; } /* --- Textes : Switzer Regular --- */ .font_6, .font_6 p, .font_6 a:not(.elementor-button), .font_6 .elementor-heading-title, .font_6 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; font-weight: 400 !important; --sk-font-size: max(18px, min(22px, calc(22 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.2em !important; letter-spacing: 0em !important; color: #000000; } /* font_7 et font_8 sont identiques à la taille et à l'interligne près : seule la couleur les distingue (#191919 pour le corps de texte, #4d4d4d pour le texte secondaire). */ .font_7, .font_7 p, .font_7 a:not(.elementor-button), .font_7 .elementor-heading-title, .font_7 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; font-weight: 400 !important; --sk-font-size: max(16px, min(20px, calc(18 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.4em !important; letter-spacing: 0em !important; color: #191919; } .font_8, .font_8 p, .font_8 a:not(.elementor-button), .font_8 .elementor-heading-title, .font_8 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; font-weight: 400 !important; --sk-font-size: max(16px, min(20px, calc(18 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.4em !important; letter-spacing: 0em !important; color: #4d4d4d; } .font_9, .font_9 p, .font_9 a:not(.elementor-button), .font_9 .elementor-heading-title, .font_9 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; font-weight: 400 !important; --sk-font-size: max(12px, min(14px, calc(14 * var(--theme-spx-ratio)))); font-size: var(--sk-font-size) !important; line-height: 1.4em !important; letter-spacing: 0em !important; color: #4d4d4d; } /* --- font_1 / font_10 : restes des réglages par défaut de Wix --- */ /* Ces deux styles sortent du système fluide (taille en px fixes) et appellent « din-next-w01-light », une police Wix que nous n'hébergeons pas. Ils ne sont utilisés nulle part dans le design de la source. Portés pour mémoire, avec Switzer en substitution ; à supprimer s'ils ne servent jamais. */ .font_1, .font_1 p, .font_1 a:not(.elementor-button), .font_1 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; /* source : din-next-w01-light */ font-weight: 400 !important; --sk-font-size: 16px; font-size: var(--sk-font-size) !important; line-height: 1.4em !important; letter-spacing: 0em !important; color: #4d4d4d; } .font_10, .font_10 p, .font_10 a:not(.elementor-button), .font_10 span:not(.elementor-button span) { font-family: 'Switzer', sans-serif !important; /* source : din-next-w01-light */ font-weight: 400 !important; --sk-font-size: 12px; font-size: var(--sk-font-size) !important; line-height: 1.4em !important; letter-spacing: 0em !important; color: #4d4d4d; } /* --- Taille du libellé des boutons portant une classe font_X --- */ /* Le reste du bloc écarte volontairement les boutons (a:not(.elementor-button), span:not(.elementor-button span)) pour ne pas écraser la couleur et la fonte réglées par widget dans Elementor. Mais la TAILLE, elle, doit suivre la classe. On la repasse ici, et uniquement elle. Le sélecteur composé .font_X.elementor-widget-button limite l'effet au widget Bouton qui PORTE la classe : un bouton simplement imbriqué dans un bloc font_X garde sa propre taille. Le est visé en plus du car .elementor-button span (plus bas) pose sa taille directement dessus — l'héritage depuis le ne peut pas la battre. */ .font_0.elementor-widget-button .elementor-button, .font_0.elementor-widget-button .elementor-button span, .font_2.elementor-widget-button .elementor-button, .font_2.elementor-widget-button .elementor-button span, .font_3.elementor-widget-button .elementor-button, .font_3.elementor-widget-button .elementor-button span, .font_4.elementor-widget-button .elementor-button, .font_4.elementor-widget-button .elementor-button span, .font_5.elementor-widget-button .elementor-button, .font_5.elementor-widget-button .elementor-button span, .font_6.elementor-widget-button .elementor-button, .font_6.elementor-widget-button .elementor-button span, .font_7.elementor-widget-button .elementor-button, .font_7.elementor-widget-button .elementor-button span, .font_8.elementor-widget-button .elementor-button, .font_8.elementor-widget-button .elementor-button span, .font_9.elementor-widget-button .elementor-button, .font_9.elementor-widget-button .elementor-button span, .font_1.elementor-widget-button .elementor-button, .font_1.elementor-widget-button .elementor-button span, .font_10.elementor-widget-button .elementor-button, .font_10.elementor-widget-button .elementor-button span { font-size: var(--sk-font-size) !important; } /* === h2 sur mobile : échelle propre à la source === */ /* La source ne se contente pas de .font_2 sur les titres de niveau 2 : sous 751px elle superpose une surcharge par composant, dans @media screen and (min-width: 320px) and (max-width: 750px). Elle a une base ET une référence différentes du desktop : desktop 46 spx / 1280 -> 0.0359375 * scaling-factor (c'est .font_2) mobile 36 spx / 390 -> 0.0923077 * scaling-factor Le 390 est la largeur de référence mobile de Wix, confirmé par la déclaration sœur : --minFontSize:32px; --maxFontSize:50px; --fontSize:36spx. Sans cette règle, notre h2 reste collé à son plancher de 32px sur tout le mobile, là où la source monte à 36px dès 390px et atteint 50px vers 542px. Seuil à 750px, celui de la source — au-delà .font_2 reprend la main. Le second sélecteur redéfinit --sk-font-size pour les éléments portant la classe font_2 : même liste que sa règle d'origine, déclarée après, donc elle gagne l'égalité de spécificité. */ @media (max-width: 750px) { h2 { font-size: max(32px, min(50px, max(0.5px, calc(0.0923077 * (var(--scaling-factor) - var(--scrollbar-width)))))) !important; } .font_2, .font_2 p, .font_2 a:not(.elementor-button), .font_2 .elementor-heading-title, .font_2 span:not(.elementor-button span) { --sk-font-size: max(32px, min(50px, max(0.5px, calc(0.0923077 * (var(--scaling-factor) - var(--scrollbar-width)))))); } } /* === Blocs de texte de la page Cabinet — surcharges par composant === */ /* Relevé sur https://www.schoellkopfavocat.com/cabinet. Ces blocs portent la classe .font_5 dans la source, mais reçoivent par-dessus une surcharge de TAILLE seule (la fonte, la couleur et l'interligne restent ceux de font_5) : #comp-mbupkjil « Engagé en faveur de l'accès au droit » #comp-mbupfizq9 « Engagé pour le rayonnement de votre entreprise » desktop : --fontSize:26spx, min 20px, max 32px -> 0.0203125 * SF (26/1280) mobile : @media 320-750px -> 0.0564103 * SF (22/390) #comp-mbuppwd19 « Avocate Fondatrice du cabinet » desktop : aucune surcharge, .font_5 s'applique (30spx/1280) mobile : 0.0564103 * SF (22/390) font_5 générique valant 30spx/1280, ces blocs sont volontairement plus petits. Ce sont donc des classes dédiées, PAS une modification de .font_5 : la surcharge ne touche que ces trois blocs, sur cette seule page. À poser EN PLUS de font_5, contrairement aux autres classes sur mesure : ici la surcharge ne porte que sur la taille, comme dans la source. Ces règles sont déclarées après le bloc font_X, elles gagnent donc l'égalité de spécificité contre .font_5 (0,1,0) et .font_5 p (0,1,1). */ .cabinet-engagement, .cabinet-engagement p, .cabinet-engagement .elementor-heading-title, .cabinet-engagement span:not(.elementor-button span) { font-size: max(20px, min(32px, max(0.5px, calc(0.0203125 * (var(--scaling-factor) - var(--scrollbar-width)))))) !important; } @media (max-width: 750px) { .cabinet-engagement, .cabinet-engagement p, .cabinet-engagement .elementor-heading-title, .cabinet-engagement span:not(.elementor-button span), .cabinet-bio, .cabinet-bio p, .cabinet-bio .elementor-heading-title, .cabinet-bio span:not(.elementor-button span) { font-size: max(20px, min(32px, max(0.5px, calc(0.0564103 * (var(--scaling-factor) - var(--scrollbar-width)))))) !important; } } /* Variante de H2 plus petite. !important requis pour passer devant h2 { …!important } */ .smaller-h2 h2 { font-size: 32px !important; } /* Hero H1 / H3 : tailles fluides. Le H1 est sur l'échelle spx de la source : coefficient 53, soit 53px dès 1280px de large (--theme-spx-ratio vaut 1 à cette largeur) et un plancher de 31px atteint vers 749px. Vaut pour la home FR et la home EN, qui portent toutes deux .home-h1. L'ancienne media query à 767px, qui forçait 40px, a été retirée : la formule gouverne désormais aussi le mobile (31,8px à 767px, puis le plancher à 31px en dessous de 749px). Le sélecteur ne vise QUE le widget atomique du hero desktop, qui porte la classe directement sur le

(e-heading-base, sans .elementor-heading-title à l'intérieur). Le hero mobile — section 40782db, elementor-hidden-desktop — porte aussi .home-h1 mais sur l'ancien widget Titre : il est volontairement laissé de côté et prend sa taille dans Elementor. h1.home-h1 est à (0,1,1) ; le !important lui suffit pour passer devant le sélecteur atomique d'Elementor (0,2,0). */ h1.home-h1 { font-size: max(29px, min(51px, calc(53 * var(--theme-spx-ratio)))) !important; margin-top: 30px; } /* Mobile : le titre se répartit tout seul, on retire le saut de ligne forcé. display:none est la seule méthode fiable sur un
— `content` sur un élément réel n'est pas supporté partout et ::before/::after ne sont pas rendus sur un
. Conséquence : le
disparaît SANS laisser d'espace. Pour que « dédié à » et « l'immigration » ne se collent pas, il faut un espace avant le
dans le texte Elementor (« dédié à
l'immigration ») : sur desktop un espace en fin de ligne avant un saut forcé n'est pas rendu, donc l'ajout est invisible là-bas. À faire aussi dans Elementor : le titre contient un U+2028 entre « professionnelle » et « et à la mobilité », saut de ligne forcé qu'aucune règle CSS ne peut annuler. */ @media (max-width: 767px) { h1.home-h1 br { display: none; } } .hero-h3 .elementor-heading-title { font-size: clamp(28px, 2.14vw, 50px) !important; /* 41px à 1920px */ line-height: 1.1 !important; } /* Hero : hauteur de l'image .logo-home = hauteur du titre H1. Le H1 a un
(2 lignes, line-height 1) → hauteur ≈ 2 × sa taille fluide. On fixe donc la hauteur de l'image sur cette valeur (pas de stretch, sinon c'est l'image, plus grande, qui impose la hauteur). */ .logo-home img { height: calc(2 * max(40px, min(64px, calc(60 * var(--theme-spx-ratio))))) !important; width: auto !important; object-fit: contain !important; padding-bottom: 11%; margin-top: -5%; } /* H2 "expertises" plus petit, en Switzer. Le variant .elementor-heading-title (0,2,1) bat l'override Caslon des titres-widgets (.elementor-widget-heading .elementor-heading-title, 0,2,0). */ .small-h2-expertises { font-size: max(16px, min(20px, calc(18 * var(--theme-spx-ratio)))) !important; font-family: 'Switzer', sans-serif !important; margin-top: 3px; font-weight: 500 !important; padding-right: 36px; } .list-number p { font-size: 20px !important; font-family: 'Switzer', sans-serif !important; margin-top: 0px; font-weight: 400 !important; color: #1a1a1a; } /* Description qui suit un titre .small-h2-expertises, hors accordéon. Deux cas selon le contenu saisi dans le widget : - texte dans un

: ciblé directement (la règle .font_8 p, qui pose #4d4d4d sur le

lui-même, empêcherait sinon l'héritage) ; - texte nu, sans balise : un nœud de texte ne se sélectionne pas en CSS. On colore donc le widget entier et le texte hérite. Le titre n'est pas touché : h1, h2… { color: #1a1a1a } s'applique directement à lui, et une déclaration directe l'emporte toujours sur l'héritage. */ .small-h2-expertises + p:not(.accordeon-item p), .elementor-widget-text-editor:has(.small-h2-expertises):not(.accordeon-item *) { color: #7A7A7A; } .avocat-fonction h5.elementor-heading-title, .avocat-fonction h3.elementor-heading-title, .avocat-fonction .elementor-heading-title { font-weight: 300 !important; } /* Épinglage en bas du conteneur réservé au desktop. Sous 1025px — tablette et téléphone, le seuil où le site bascule en menu burger — la colonne se réduit et le positionnement absolu chevaucherait le contenu : on laisse le bloc reprendre le flux normal. La classe .no-absolute permet de désactiver l'épinglage au cas par cas, y compris sur desktop. Elle est posée dans le :not() plutôt que dans un bloc d'annulation : la règle ne s'applique alors jamais, il n'y a aucune propriété à remettre à sa valeur initiale. */ @media (min-width: 1025px) { .social-links:not(.no-absolute) { position: absolute; bottom: 0; } } /* Écart entre les icônes sociales, en fluide. Le widget est réglé sur « Colonnes : 0 », ce qui bascule .elementor-grid de display:grid à display:inline-block (règle .elementor-grid-0 d'Elementor). column-gap devient alors inerte — il reste à 0 — et l'écart réel vient de word-spacing: var(--grid-column-gap), avec font-size:0 sur le conteneur. C'est donc --grid-column-gap qu'il faut piloter, pas column-gap. 0.0117188 = 15/1280 : la formule reproduit exactement les 15px réglés dans Elementor à 1280px de large, et les fait suivre l'échelle (18,75px à 1600px). Pas de !important : Elementor pose la variable sur le WIDGET (.elementor-668 .elementor-element-ec40f4c, 0,3,0) et .elementor-grid n'en hérite que ; la poser directement sur .elementor-grid bat cet héritage. */ .elementor-widget-social-icons .elementor-grid { --grid-column-gap: max(0.5px, calc(0.0117188 * (var(--scaling-factor) - var(--scrollbar-width)))); } .elementor-widget-social-icons .elementor-grid .elementor-grid-item { margin-right: 0px; } .footer-socials .elementor-grid-item { margin-right: 0 !important; } /* Links scoped to avoid button color override */ a:not(.elementor-button) { color: #1a1a1a; text-decoration: none; } a:not(.elementor-button):hover { color: #555555; } /* Fix the specific CTA dark button - ID 73eada9 */ .elementor-element-73eada9 .elementor-button, .elementor-element-73eada9 .elementor-button span, .elementor-element-73eada9 .elementor-button-text { color: #ffffff !important; } /* === Effet parallax sur le fond des sections .parrallax === On n'utilise PAS background-attachment: fixed (bugué sur iOS/Safari mobile). À la place, un pseudo-élément hérite de l'image de fond posée par Elementor (background-image: inherit) et est translaté par assets/js/parallax.js : --sk-parallax-y : défilement (±95px) + suivi vertical de la souris (±22px) --sk-parallax-x : suivi horizontal de la souris (±22px) Le débordement doit dépasser ces amplitudes pour qu'aucun bord de l'image n'apparaisse en fin de course, d'où 120px en haut/bas et 30px sur les côtés. Il est exprimé en PIXELS, pas en % : avec `cover`, un débord de 30% en haut et en bas obligeait à agrandir l'image de 1,6× (visuel flou). Ici l'échelle ne dépend plus de la hauteur de la section (≈ 1,25× pour un hero plein écran). */ .parrallax { position: relative; overflow: hidden; } .parrallax::before { content: ""; position: absolute; top: -120px; bottom: -120px; left: -30px; right: -30px; z-index: 0; background-image: inherit; /* reprend l'image réglée dans Elementor */ background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate3d(var(--sk-parallax-x, 0px), var(--sk-parallax-y, 0px), 0); will-change: transform; pointer-events: none; } /* Superposition Elementor et contenu au-dessus du calque parallax. */ .parrallax > .elementor-background-overlay { z-index: 1; } .parrallax > .elementor-container { position: relative; z-index: 2; } /* Accessibilité : pas de mouvement si l'utilisateur le demande. */ @media (prefers-reduced-motion: reduce) { .parrallax::before { transform: none; } } /* Mobile : pas de débord horizontal (pas de suivi souris au doigt) — l'image est ainsi mise à l'échelle sur la seule contrainte verticale. */ @media (max-width: 767px) { .parrallax::before { left: 0; right: 0; } } /* Fond du hero : Elementor cale l'image sur la hauteur du conteneur (background-size: auto 100%). Avec min-height: 100vh, un très grand écran rend le conteneur nettement plus haut que ses 1003px de large : l'image, mise à l'échelle sur la hauteur, déborde alors en largeur et se fait rogner sur les côtés. `contain` la borne sur les DEUX axes : elle reste entière et centrée, et c'est le vide qui apparaît en haut et en bas plutôt que ses bords qui partent. Aux hauteurs modestes le rendu est inchangé — c'est déjà la hauteur qui contraint, les deux valeurs y donnent le même résultat. !important : le sélecteur généré par Elementor (.elementor .e-7f54785-…) est à (0,2,0), la classe seule à (0,1,0). */ .hero-section-background-container { background-size: contain !important; } /* === Flèche « scroller vers le bas » en bas des sections .hero-section === Purement décorative (pointer-events: none) : elle signale le défilement. On utilise ::after car sur le hero, ::before porte déjà le calque parallax. z-index 3 : au-dessus du contenu (.elementor-container, z-index 2). */ .hero-section { position: relative; /* Géométrie partagée par la flèche et par sa zone cliquable, pour qu'elles ne puissent pas se désaligner. */ --sk-hint-size: 56px; --sk-hint-bottom: 30px; } .hero-section::after { content: ""; position: absolute; left: 50%; bottom: var(--sk-hint-bottom); z-index: 3; width: var(--sk-hint-size); height: var(--sk-hint-size); background: url("assets/images/fleche-bas.png") no-repeat center / contain; animation: sk-scroll-hint 2s ease-in-out infinite; pointer-events: none; } /* Zone cliquable de la flèche : défilement vers la section suivante. Un pseudo-élément ne reçoit pas d'événement propre — son clic cible l'élément d'origine, sans moyen fiable de le distinguer d'un clic ailleurs dans le hero. On superpose donc un vrai