/* ========================================================================== LASDA.SITE — Correctif d'intégration Divi -------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE Divi impose sa propre mise en page à tout ce qu'il affiche : il centre le contenu dans une colonne de 1080 px, ajoute des marges autour de chaque module et une respiration en haut et en bas de chaque section. Or les sections de LASDA.SITE gèrent DÉJÀ leur propre largeur et leurs propres marges. Sans ce fichier, les deux systèmes s'additionnent : le site apparaît étriqué au centre de l'écran, avec des trous blancs entre chaque bloc, et les fonds pleine largeur sont coupés. Ce fichier neutralise UNIQUEMENT la mise en page de Divi. Il ne touche à aucune couleur, aucune police, aucun contenu du site. IMPORTANT : il doit être chargé EN DERNIER (c'est déjà le cas dans 1-CODE-ENTETE.html). Ne changez pas cet ordre. ========================================================================== */ /* ────────────────────────────────────────────────────────────────────────── 1 · LE CONTENEUR PRINCIPAL DE DIVI PASSE EN PLEINE LARGEUR Divi enferme la page dans une colonne centrée de 1080 px. Nos sections doivent occuper toute la largeur de l'écran (fonds, dégradés, bandeaux). ────────────────────────────────────────────────────────────────────────── */ #page-container, #et-main-area, #main-content.container, #content-area, #left-area { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Divi décale la page vers le bas pour laisser place à SON en-tête. Le nôtre est flottant et le design en tient déjà compte. */ #page-container { padding-top: 0 !important; margin-top: 0 !important; } /* ────────────────────────────────────────────────────────────────────────── 2 · LES SECTIONS, LIGNES ET COLONNES DE DIVI DEVIENNENT TRANSPARENTES On veut que le module « Code » soit collé au bord, sans rien autour. ────────────────────────────────────────────────────────────────────────── */ .et_pb_section { padding: 0 !important; margin: 0 !important; background-color: transparent !important; } .et_pb_row, .et_pb_row_inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .et_pb_column { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Divi ajoute ~2 rem sous chaque module : c'est ce qui crée les trous blancs entre nos sections. */ .et_pb_module, .et_pb_code, .et_pb_code_inner { margin: 0 !important; padding: 0 !important; } /* Les zones d'en-tête et de pied de page du Générateur de thème reçoivent le même traitement. */ .et-l--header, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--footer, .et-l--footer .et_pb_section, .et-l--footer .et_pb_row { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ────────────────────────────────────────────────────────────────────────── 3 · ON REND AU SITE SON FOND Divi applique un fond blanc au corps de la page. NOTE IMPORTANTE — pourquoi ce bloc est si court. Pour la police, la couleur du texte et la hauteur de ligne, il ne faut SURTOUT rien réécrire ici : Divi et LASDA.SITE utilisent des règles de même niveau, et comme css/style.css est chargé APRÈS celui de Divi, c'est déjà le design de LASDA qui gagne, tout seul. Une première version de ce fichier réimposait la typographie « pour être sûr ». Résultat : les titres reprenaient la hauteur de ligne du texte courant (1,62) au lieu de la leur (1,05), et les sections s'allongeaient de 10 à 70 px. Corriger ce qui n'est pas cassé casse quelque chose. ────────────────────────────────────────────────────────────────────────── */ body, body.et_pb_pagebuilder_layout { background-color: var(--ink-900) !important; } /* Divi ajoute 10 px sous CHAQUE titre. Ceci est la seule chose à annuler : la règle « tout à zéro » du design ne suffit pas à la battre. */ h1, h2, h3, h4, h5, h6 { padding-bottom: 0; } /* Divi ajoute un retrait et 23 px sous chaque liste. ATTENTION à la spécificité : Divi cible ses listes par « .et-l--header ul », « .et-l--body ul », « .et-l--footer ul » et « .entry-content ul ». Une règle « ul { padding: 0 } » toute seule est MOINS spécifique et perd le combat. Mesuré avant correction : le menu principal héritait de 23 px de remplissage sous la liste, ce qui poussait l'en-tête à 125 px de haut pour 44 px de contenu réel. */ ul, ol, .et-l--header ul, .et-l--header ol, .et-l--body ul, .et-l--body ol, .et-l--footer ul, .et-l--footer ol, .entry-content ul, .entry-content ol, #left-area ul, #left-area ol, .et_pb_code_inner ul, .et_pb_code_inner ol { padding: 0; margin: 0; list-style: none; line-height: inherit; } /* ────────────────────────────────────────────────────────────────────────── 4 · ON PROTÈGE LES ÉLÉMENTS FLOTTANTS DU SITE En-tête fixe, fond animé, curseur, écran de chargement : ils doivent rester au-dessus des couches de Divi. ────────────────────────────────────────────────────────────────────────── */ .site-header { z-index: 1000 !important; } .mobile-menu { z-index: 1001 !important; } .custom-cursor { z-index: 9998 !important; } .preloader { z-index: 9999 !important; } .atmosphere { z-index: 0 !important; } /* Notre CSS utilise #main-content ; Divi utilise le même identifiant pour son conteneur. On rétablit le comportement attendu par le design. */ #main-content { position: relative; z-index: 1; } /* ────────────────────────────────────────────────────────────────────────── 5 · ON NEUTRALISE LES STYLES DE FORMULAIRE DE DIVI Nos formulaires ont leur propre habillage. Même principe qu'au bloc 3 : on reste au NIVEAU DE DIVI, sans le dépasser. Les champs habillés par le design gardent leur apparence, seuls les réglages bruts de Divi sont annulés. ────────────────────────────────────────────────────────────────────────── */ input, select, textarea, button { font-family: inherit; font-size: inherit; } /* ────────────────────────────────────────────────────────────────────────── 6 · BARRE D'ADMINISTRATION WORDPRESS Quand vous êtes connecté, WordPress ajoute une barre noire de 32 px en haut. Elle décale l'en-tête flottant. Ce réglage la compense. Vos visiteurs, eux, ne la voient jamais. ────────────────────────────────────────────────────────────────────────── */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* ────────────────────────────────────────────────────────────────────────── 7 · ON RÉTABLIT DEUX COMPORTEMENTS QUE DIVI FAIT PERDRE ────────────────────────────────────────────────────────────────────────── Le design d'origine contient trois règles écrites « section directement à l'intérieur de
». Dans Divi, chaque section se retrouve emboîtée dans trois
de mise en page, donc ces règles ne s'appliquent plus. Elles ne concernent PAS l'apparence — le site reste identique à l'œil — mais l'une des deux compte beaucoup pour la vitesse de chargement. ────────────────────────────────────────────────────────────────────────── */ /* 7a · RETIRÉ — et ce retrait est important. Ce bloc posait autrefois : content-visibility: auto; contain-intrinsic-size: auto 1120px; dans le but d'économiser du calcul au chargement. C'était la CAUSE des sections qui restaient vides. Une section hors écran annonçait alors une hauteur fictive de 1120 px au lieu de sa vraie hauteur. Or GSAP ScrollTrigger calcule ses points de déclenchement à partir de la hauteur de la page : sur 18 sections, 12 avaient leur déclencheur faussé de 800 à 1686 px. Les animations étant réglées sur « une seule fois », une section dépassée ne s'affichait JAMAIS — il fallait remonter puis redescendre. Le gain de performance est repris autrement, sans ce défaut, par css/perf.css et js/perf.js : dès qu'une section quitte l'écran, ses animations et ses backdrop-filter sont suspendus et ses vidéos mises en pause, mais sa hauteur reste exacte. NE PAS REMETTRE content-visibility ICI. */ /* 7b · Défilement magnétique : chaque section vient s'aligner d'elle-même. La classe « snap-on » est posée par js/main.js sur les écrans assez hauts. */ html.snap-on .et_pb_code_inner > section { scroll-snap-align: start; scroll-snap-stop: normal; } /* Le hero s'accroche par le haut de la page, pas par son propre bord. Dans Divi il n'est plus « premier enfant », on le désigne par sa classe. */ html.snap-on .et_pb_code_inner > section.hero-section { scroll-snap-align: none; } /* ────────────────────────────────────────────────────────────────────────── 8 · ÉDITEUR VISUEL DIVI Dans le constructeur, on désactive l'écran de chargement et le curseur personnalisé : ils masqueraient l'interface d'édition. ────────────────────────────────────────────────────────────────────────── */ body.et-fb .preloader, body.et-fb .custom-cursor { display: none !important; }