/* Theme Name: BSP Corp Child Theme URI: https://www.bspcorp.co Description: Thème enfant Divi 5 pour la refonte bspcorp.co: BSP Corp, Zoho Premium Partner. Tout le CSS custom du site vit dans ce fichier. Author: Clément Gendron Author URI: https://www.bspcorp.co Template: Divi Version: 0.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bsp-corp-child */ /* ============================================================= BSP CORP: FEUILLE DE STYLE DU THÈME ENFANT ------------------------------------------------------------- Fichier unique, éditable depuis WordPress : Apparence → Thèmes → Éditeur de fichiers du thème → style.css SOMMAIRE: les bandeaux ci-dessous découpent le fichier. Cherche le numéro pour sauter directement à une partie. 01 · TOKENS variables de design (couleurs, typo, espacements) 02 · BASE typographie globale, éléments de base 03 · DIVI OVERRIDES neutralisation des styles Divi par défaut 04 · COMPONENTS composants BSP réutilisables (.bsp-*) 05 · UTILITIES classes utilitaires 06 · HOME page d'accueil, section par section Le JavaScript est dans assets/js/bsp-custom.js (même éditeur, dossier « assets »). ============================================================= */ /* ============================================================= 01: TOKENS · Variables de design (anciennement assets/css/01-tokens.css) ============================================================= */ /* Taille unique des titres de bandeau (accueil, blogue, étude de cas, équipe) : un seul réglage. */ :root { --bsp-banner-title-size: clamp(34px, 2.8vw, 50px); } :root { /* --- Couleurs de marque --------------------------------------- Valeurs reprises de la maquette de référence index-2.html. Les jetons portent leur RÔLE, pas leur teinte : le jour où l'accent change, seul ce bloc bouge. Contrastes mesurés (WCAG 2.1) : accent sur fond général 5,74:1 → conforme AA accent clair sur fond 8,10:1 → conforme AAA blanc sur --bsp-accent-fill 5,03:1 → conforme AA (aplat assombri exprès) --------------------------------------------------------------- */ --bsp-accent: #118CFE; /* accent sur fond sombre */ --bsp-accent-hover: #45AEFF; /* survol, variante claire */ --bsp-accent-rgb: 17, 140, 254; /* pour les rgba() */ --bsp-brand-blue: #1057B7; /* bleu de marque : fond des bandeaux (« clients », valeurs des études de cas). Fourni par Clément le 21 sept. 2026: identique dans les deux thèmes. Les BOUTONS gardent --bsp-accent-fill. Blanc dessus : 6,8:1 (AA) */ --bsp-accent-fill: #0D6DC4; /* aplat portant du texte blanc: 5,25:1, conforme AA */ --bsp-accent-fill-hover: #0A5497; /* survol du même aplat: 7,70:1 */ --bsp-bg-deep: #061E3C; /* fond de marque profond: bleu 213°, 19 sept. 2026 (était #061147, teinte 230°) */ /* --- Fonds --- */ --bsp-bg: #0a0d14; /* fond général dark */ --bsp-bg-footer: #060810; /* fond footer */ --bsp-footer-surface: #1B1E27; /* surface du pied de page (la maquette), un ton au-dessus de --bsp-bg-footer ; suit le thème */ /* --- Texte --- */ --bsp-text: #ffffff; --bsp-text-soft: rgba(255, 255, 255, 0.72); --bsp-body: #cdd2da; /* texte courant : gris clair, plus de blanc pur (5 oct. 2026) */ --bsp-text-faint: rgba(255, 255, 255, 0.6); /* --- Typographie --- */ --bsp-font-display: 'Playfair Display', Georgia, serif; /* titres hero, stats */ --bsp-font-label: 'Montserrat', Helvetica, Arial, sans-serif; /* nav, eyebrow, boutons */ --bsp-font-body: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif; /* --- Espacements ------------------------------------------------ Une échelle, pas des valeurs choisies au cas par cas. Quatre crans suffisent, et les rôles nommés en dessous y pointent : changer un cran change tout le site d'un coup. ⚠️ Ces valeurs s'appliquent élément par élément, JAMAIS par une règle globale du genre « tous les modules à zéro ». Une remise à zéro ancrée sur un parent compte deux classes et écrase les règles à une seule : on obtient alors des marges écrites et sans effet, ce qui est pire qu'aucune marge du tout. ----------------------------------------------------------------- */ --bsp-space-1: 12px; /* entre deux lignes d'un même bloc */ --bsp-space-2: 22px; /* entre un surtitre et son titre */ --bsp-space-3: 28px; /* sous un titre suivi de contenu */ --bsp-space-4: 40px; /* avant un bouton, ou entre deux blocs */ --bsp-space-title: var(--bsp-space-3); /* air sous un titre de section */ --bsp-gutter: 80px; /* marge latérale standard (nav, hero, stats, footer) */ --bsp-section-pad: 72px 80px; /* padding sections stats / case study */ /* --- Rayons & ombres --- */ --bsp-radius: 12px; /* --- Transitions --- */ --bsp-ease: cubic-bezier(0.22, 1, 0.36, 1); --bsp-speed: 0.3s; /* --- Surfaces et bordures (ajouté le 13 septembre 2026) ---------- Introduits pour le catalogue de blogue, mais nommés par leur rôle et non par leur page : une carte est une carte partout. --bsp-accent-text est l'accent quand il porte du TEXTE fin. En sombre, --bsp-accent suffit (5,74:1). En clair il retombe à 3,38:1, non conforme AA: d'où la bascule vers --bsp-accent-fill (#0D6DC4, 5,25:1) dans le bloc 01bis. Le contraste se calcule, il ne s'estime pas. ----------------------------------------------------------------- */ --bsp-surface: rgba(255, 255, 255, 0.03); --bsp-surface-deep: #050710; --bsp-border: rgba(255, 255, 255, 0.08); --bsp-border-subtle: rgba(255, 255, 255, 0.06); --bsp-section-rule: 1px solid rgba(255, 255, 255, 0.08); /* filet entre sections */ --bsp-border-strong: rgba(255, 255, 255, 0.18); --bsp-text-quiet: rgba(255, 255, 255, 0.56); --bsp-chip-associe-bg: rgba(255, 255, 255, 0.09); /* puce associée à la sélection */ --bsp-accent-text: var(--bsp-accent); --bsp-logo-filter: none; /* Fond des zones-image: bandeaux photo, et les rangées de puces posées dessus. Il ne bascule PAS avec le thème : ces zones portent du texte blanc sur photo dans les deux modes, et la nav y flotte en permanence. Redéclaré à l'identique dans le bloc clair pour que l'intention se lise là aussi, plutôt que de se déduire d'une absence. */ --bsp-bg-media: #0a0d14; } /* ============================================================= 01bis: TOKENS · Mode clair (data-bsp-theme="light") ------------------------------------------------------------- Activé par le bouton bascule de l'en-tête global (voir la sous-partie « HEADER: THEME TOGGLE » sous 02 NAVIGATION). Couverture actuelle : en-tête + nav + footer global. Les autres sections recevront leurs propres surcharges au fur et à mesure qu'elles seront reconstruites (voir NOTES-ACCUEIL.md): le defaut du site reste le mode sombre tant qu'une section n'a pas ete couverte ici. ============================================================= */ :root[data-bsp-theme="light"] { --bsp-bg: #F1F0ED; --bsp-bg-footer: #E8E6E1; --bsp-footer-surface: var(--bsp-bg-footer); --bsp-text: #0d1526; --bsp-text-soft: rgba(40, 46, 56, 0.88); /* charcoal enrichi, pas tout a fait noir (5 oct. 2026) */ --bsp-body: #2b313b; --bsp-text-faint: rgba(13, 21, 38, 0.66); /* Surfaces claires: ajouté le 13 septembre 2026 avec le catalogue. */ --bsp-surface: #ffffff; --bsp-surface-deep: #E8E6E1; --bsp-border: rgba(13, 21, 38, 0.10); --bsp-border-subtle: rgba(13, 21, 38, 0.08); --bsp-section-rule: 1px solid rgba(13, 21, 38, 0.08); --bsp-border-strong: rgba(13, 21, 38, 0.18); --bsp-text-quiet: rgba(13, 21, 38, 0.66); --bsp-chip-associe-bg: rgba(13, 21, 38, 0.07); /* même rôle : le blanc translucide devient un sombre translucide */ --bsp-accent-text: var(--bsp-accent-fill); --bsp-logo-filter: invert(1); /* Volontairement identique au mode sombre : voir :root. Une zone-image reste sombre en mode clair. */ --bsp-bg-media: #0a0d14; } /* Responsive : gouttière réduite sous 1024px */ @media (max-width: 1024px) { /* HERO: on resserre les marges latérales et on raccourcit la course de défilement : sur un écran tactile, 320vh de piste demandent trop de gestes avant que le logiciel apparaisse. */ .bsp-hero-wrapper.et_pb_section { height: 260vh; } .bsp-hero-content.et_pb_column, .bsp-hero-reveal, .bsp-hero-cue { left: 40px; } .bsp-hero-content.et_pb_column { max-width: calc(100% - 80px); } :root { --bsp-gutter: 40px; --bsp-section-pad: 56px 40px; } } @media (max-width: 640px) { :root { --bsp-gutter: 24px; --bsp-section-pad: 48px 24px; } } /* ============================================================= 02: BASE · Typographie et éléments globaux (anciennement assets/css/02-base.css) ============================================================= */ body { font-family: var(--bsp-font-body); font-weight: 400; color: var(--bsp-text); background-color: var(--bsp-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--bsp-font-display); font-weight: 800; color: var(--bsp-text); line-height: 1.1; } h1 em, h2 em, h3 em { font-style: italic; color: var(--bsp-accent); } h4, h5, h6 { font-family: var(--bsp-font-label); font-weight: 700; color: var(--bsp-text); } a { color: var(--bsp-accent); transition: color var(--bsp-speed) var(--bsp-ease); } a:hover { color: var(--bsp-accent-hover); } ::selection { background: rgba(var(--bsp-accent-rgb), 0.35); color: var(--bsp-text); } /* ============================================================= 03: DIVI OVERRIDES · Neutralisation des styles Divi (anciennement assets/css/03-divi-overrides.css) ============================================================= */ /* Largeur pleine par défaut pour nos sections full-bleed */ .bsp-full-bleed { max-width: 100%; padding-left: 0; padding-right: 0; } /* Conteneur standard BSP : gouttière 80px, pas la largeur Divi par défaut */ .bsp-container { padding-left: var(--bsp-gutter); padding-right: var(--bsp-gutter); max-width: none; } /* Corps de texte type case study : colonne lisible centrée */ .bsp-narrow { max-width: 1200px; margin-left: auto; margin-right: auto; } /* ============================================================= 04: COMPONENTS · Composants BSP réutilisables (anciennement assets/css/04-components.css) ============================================================= */ /* ---------- Eyebrow (surtitre) ---------- */ .bsp-eyebrow { font-family: var(--bsp-font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bsp-accent); } /* ---------- Boutons ---------- */ .bsp-btn-primary, .bsp-btn-primary.et_pb_button { font-family: var(--bsp-font-label); font-weight: 700; background: var(--bsp-accent-fill); color: #fff; border: none; border-radius: var(--bsp-radius); transition: background var(--bsp-speed) var(--bsp-ease); } .bsp-btn-primary:hover, .bsp-btn-primary.et_pb_button:hover { background: var(--bsp-accent-hover); } .bsp-btn-ghost, .bsp-btn-ghost.et_pb_button { font-family: var(--bsp-font-label); font-weight: 600; background: transparent; color: var(--bsp-text); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--bsp-radius); transition: border-color var(--bsp-speed) var(--bsp-ease), color var(--bsp-speed) var(--bsp-ease); } .bsp-btn-ghost:hover, .bsp-btn-ghost.et_pb_button:hover { border-color: var(--bsp-accent); color: var(--bsp-accent); } /* ---------- Bouton icone rond (Font Awesome) -- module Bouton natif Divi ---------- Marche a suivre, partout sur le site, pour ce type de bouton : 1. Ajouter un module Bouton (natif Divi), pas un module Texte. 2. Dans Contenu > Bouton, choisir une icone Font Awesome (fleche), et vider le texte du bouton (icone seule). 3. Renseigner l URL du bouton (Lien vers ...). 4. Avancer > Attributs > Classe CSS : ajouter la classe bsp-btn-round-arrow Nom d attribut unique, a reutiliser partout desormais pour ce composant. */ /* Police FontAwesome auto-hebergee (fichiers deja fournis par Divi), chargee independamment du systeme de detection dynamique de Divi -- necessaire car aucune icone n'est choisie via l'UI Divi (l'icone est injectee en CSS pur). */ @font-face { font-family: "FontAwesome"; font-style: normal; font-weight: 900; font-display: swap; src: url("/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff") format("woff"), url("/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.ttf") format("truetype"); } /* Bouton rond icone (flèche) -- reutilisable partout via Attributs > Classe CSS. Prefixe "body #page-container" : c'est le meme niveau de specificite que le CSS genere automatiquement par Divi pour ses modules (qui utilise ce meme prefixe), donc nos regles gagnent enfin de façon fiable, sans deviner avec des !important empiles au hasard. Plus de position:absolute : le bouton reste dans le flux normal, pousse en bas de la carte par .bsp-partners-card (flex-column + margin- top:auto sur le wrapper, voir plus haut) -- plus simple et plus robuste. */ body #page-container .bsp-btn-round-arrow, body #page-container a.bsp-btn-round-arrow.et_pb_button { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--bsp-border) !important; border-radius: 50% !important; background: transparent !important; color: var(--bsp-text) !important; font-size: 0 !important; line-height: 1 !important; box-sizing: border-box !important; transition: background var(--bsp-speed) var(--bsp-ease), border-color var(--bsp-speed) var(--bsp-ease), transform var(--bsp-speed) var(--bsp-ease) !important; } /* Icone fleche en masque SVG (pas une police d icone) -- Divi reinitialise "content" sur les pseudo-elements des boutons avec une regle encore plus specifique que la notre des qu aucune icone n est choisie dans son UI ; le masque CSS contourne totalement ce probleme (Divi n y touche pas). "color" pilote la couleur du masque via currentColor -- pale au repos, blanc au survol, comme les autres regles de la classe. */ body #page-container .bsp-btn-round-arrow::before, body #page-container a.bsp-btn-round-arrow.et_pb_button::before { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 16px !important; height: 16px !important; background-color: currentColor !important; color: var(--bsp-text-faint) !important; opacity: 1 !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%274%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27/%3E%3Cpolyline%20points%3D%2712%205%2019%2012%2012%2019%27/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%274%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27/%3E%3Cpolyline%20points%3D%2712%205%2019%2012%2012%2019%27/%3E%3C/svg%3E") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; transition: background-color var(--bsp-speed) var(--bsp-ease), color var(--bsp-speed) var(--bsp-ease) !important; } body #page-container .bsp-btn-round-arrow:hover::before, body #page-container a.bsp-btn-round-arrow.et_pb_button:hover::before { color: #fff !important; } body #page-container .bsp-btn-round-arrow:hover, body #page-container a.bsp-btn-round-arrow.et_pb_button:hover { background: var(--bsp-accent-fill) !important; border-color: var(--bsp-accent-fill) !important; transform: translateX(4px) !important; } /* ---------- Section stats (4 chiffres clés) ---------- */ .bsp-stats { background: var(--bsp-bg); padding: var(--bsp-section-pad); } .bsp-stat-number { font-family: var(--bsp-font-display); font-weight: 900; font-size: clamp(48px, 6vw, 88px); color: var(--bsp-accent); line-height: 1; } .bsp-stat-label { font-family: var(--bsp-font-body); font-weight: 400; font-size: 21px; color: var(--bsp-text-soft); margin-top: 8px; } /* ---------- Barre de résultats (case study) ---------- */ .bsp-results-bar { background: var(--bsp-brand-blue); color: #fff; } /* ---------- Citation ---------- */ .bsp-quote { font-family: var(--bsp-font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; color: var(--bsp-text); } .bsp-quote-author { font-family: var(--bsp-font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bsp-text-faint); } /* ---------- Feature dot (liste de modules/solutions) ---------- */ .bsp-feature-dot::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bsp-accent); margin-right: 14px; flex-shrink: 0; } /* ---------- Vidéo embarquée (Zoho WorkDrive) ---------- */ .bsp-video-embed { aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto; border-radius: var(--bsp-radius); overflow: hidden; } /* ============================================================= HERO SLIDER (accueil): structure reproduite en section Code Divi. JS : assets/js/bsp-custom.js. Détails : KB §4.2–4.4. ============================================================= */ .bsp-hero-wrapper { height: 200vh; /* capte 100vh de scroll pour l'animation */ } .bsp-hero { position: sticky; top: 0; height: 100vh; overflow: hidden; --pos: 87.5%; } .bsp-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, transparent 0%, var(--bsp-bg) 100%); pointer-events: none; } .bsp-hero-layer { position: absolute; inset: 0; background-size: cover; background-position: center; } .bsp-hero-layer--interface { clip-path: inset(0 0 0 var(--pos)); } .bsp-hero-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.5) 70%, transparent 100%); } /* ============================================================= 05: UTILITIES · Classes utilitaires (anciennement assets/css/05-utilities.css) ============================================================= */ .bsp-text-center { text-align: center; } .bsp-text-amber { color: var(--bsp-accent); } .bsp-text-soft { color: var(--bsp-text-soft); } .bsp-bg-dark { background-color: var(--bsp-bg); } .bsp-bg-marine { background-color: var(--bsp-bg-deep); } .bsp-bg-footer { background-color: var(--bsp-bg-footer); } .bsp-mt-0 { margin-top: 0; } .bsp-mb-0 { margin-bottom: 0; } /* Masquer visuellement mais rester accessible aux lecteurs d'écran */ .bsp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================= ⚠️ POURQUOI DES « !important » SUR LES MARGES DE COMPOSANT ------------------------------------------------------------- Divi génère du CSS par module qu'il injecte dans la page. Il gagne l'arbitrage contre cette feuille, quelle que soit la spécificité employée ici : une règle injectée en dernier, avec un sélecteur identique, est quand même rejetée. Mesuré, pas supposé: voir _dev-tools/bsp-espacement-sonde.php. Ordre de chargement corrigé dans functions.php : insuffisant. Le « !important » est donc un repli ASSUMÉ et BORNÉ : · uniquement sur les marges, · uniquement sur nos classes de composant, · jamais sur une couleur, une taille ou une position. Conséquence à connaître : pour surcharger une de ces marges, il faudra un « !important » à son tour. C'est le prix payé, et il est documenté pour que personne ne le découvre par surprise. ============================================================= */ /* ============================================================= 06: HOME · Page d'accueil (anciennement assets/css/06-home.css) ============================================================= */ /* ============================================================= 00 · NEUTRALISATION DIVI: commune à toutes les sections home ============================================================= */ /* Divi ajoute un padding vertical de 4% sur chaque section et limite les rangées à 1080px. Nos sections sont full-bleed et gèrent elles-mêmes leur padding. */ .bsp-home-section.et_pb_section { padding: 0; margin: 0; } .bsp-home-section .et_pb_row { width: 100%; max-width: none; margin: 0; padding: 0; } /* Remise à zéro des marges que Divi ajoute à ses modules. ⚠️ Elle compte DEUX classes : toute marge de composant déclarée à une seule classe perd contre elle. C'est pour cette raison que les règles de composant ci-dessous sont toutes préfixées par « .bsp-home-section », elles reviennent ainsi à égalité, et gagnent par leur position plus bas dans le fichier. Ne pas retirer ce préfixe sans retirer cette remise à zéro d'abord. */ .bsp-home-section .et_pb_module { margin-bottom: 0; } /* Divi 4 ferme ses rangées avec un clearfix ::before / ::after, indispensable puisque ses colonnes sont flottantes. Dans les rangées que l'on transforme en grille CSS (les six ci-dessous), les colonnes ne flottent plus : le clearfix n'a plus d'utilité et, devenu cellule de grille, il décalerait toute la grille. On ne le neutralise QUE là. NE PAS étendre ce sélecteur à toutes les rangées : sans clearfix, une rangée à colonnes flottantes retombe à une hauteur de 0 et sa section disparaît. */ .bsp-home-stats-grid.et_pb_row::before, .bsp-home-stats-grid.et_pb_row::after, .bsp-home-transform-row.et_pb_row::before, .bsp-home-transform-row.et_pb_row::after, .bsp-home-why-grid.et_pb_row::before, .bsp-home-why-grid.et_pb_row::after, .bsp-home-solutions-grid.et_pb_row::before, .bsp-home-solutions-grid.et_pb_row::after, .bsp-home-contact-row.et_pb_row::before, .bsp-home-contact-row.et_pb_row::after, .bsp-home-footer-top.et_pb_row::before, .bsp-home-footer-top.et_pb_row::after { display: none; } /* Divi peint un fond blanc sur les sections par défaut, et rogne volontiers ce qui dépasse. Le hero est « sticky » : le moindre overflow caché sur un ancêtre le décolle et l'animation meurt. */ .bsp-hero-wrapper.et_pb_section, .bsp-hero-wrapper .et_pb_column, .bsp-hero-wrapper .et_pb_module, .bsp-hero-wrapper .et_pb_code_inner { overflow: visible; } /* Les modules Texte de Divi héritent d'une couleur/typo par défaut : on laisse notre CSS de composant décider. */ .bsp-home-section .et_pb_text_inner > *:last-child { margin-bottom: 0; } /* ============================================================= 01 · HERO « PROFONDEUR »: défilement vertical ------------------------------------------------------------- Fidèle à la maquette index-2.html. Le mouvement suit le défilement de la page : ce n'est pas un carrousel. Structure Divi : Section .bsp-hero-wrapper piste de défilement, 320vh Rangée .bsp-hero #depthHero collée en haut, 100vh Col. .bsp-hero-layers les calques animés (module Code) Col. .bsp-hero-content le texte éditable (modules natifs) ⚠️ PIÈGE : la section DOIT être plus haute que l'écran. C'est elle qui fournit la course du défilement ; le script calcule « hauteur de la section − hauteur de la fenêtre ». Si Divi lui donne une hauteur automatique, la division tombe à zéro et le hero reste parfaitement immobile: sans aucune erreur. ============================================================= */ .bsp-hero-wrapper.et_pb_section { position: relative; height: 320vh; padding: 0; background: var(--bsp-bg); overflow: visible; } .bsp-hero.et_pb_row { position: sticky; /* Connecté, la barre d'admin WordPress (32 px, 46 px sur mobile) est fixe en haut : un hero collé à top:0 glissait dessous et la navigation était rognée. WordPress publie sa hauteur dans --wp-admin--admin-bar--height ; sans barre (visiteur), la variable n'existe pas et le décalage est nul. */ top: var(--wp-admin--admin-bar--height, 0px); width: 100%; max-width: none; height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); margin: 0; padding: 0; overflow: hidden; background: var(--bsp-bg); } /* Les colonnes deviennent des boîtes de positionnement : Divi les fait flotter par défaut, ce qui casserait l'empilement. */ .bsp-hero .et_pb_column { position: static; width: 100% !important; margin: 0 !important; float: none; } /* ⚠️ LE PIÈGE QUI A COÛTÉ UNE HEURE. Divi pose « position: relative » sur ses modules. Le module Code devenait donc le référent des calques positionnés en absolu, et comme TOUS ses enfants sont eux-mêmes en absolu, sa propre hauteur retombait à zéro. Les calques héritaient donc d'une boîte de 1280 × 0 : fond invisible, silhouette impossible à calculer, « translateY(100%) » valant 100 % de rien, et « top: 50% » valant zéro. Un seul défaut, six symptômes. En le remettant en flux, le référent redevient la rangée collée, qui fait bien un écran de haut. */ .bsp-hero-code.et_pb_module, .bsp-hero-code .et_pb_code_inner { position: static; } .bsp-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, transparent 0%, var(--bsp-bg) 100%); z-index: 9; pointer-events: none; } /* ---- Calque 1 · le fond -------------------------------------- */ .bsp-hero-bg { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 2.4s ease; } .bsp-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .bsp-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 12, 20, 0.4) 0%, rgba(10, 12, 20, 0.05) 30%, rgba(10, 12, 20, 0.6) 100%), linear-gradient(to right, rgba(10, 12, 20, 0.35) 0%, transparent 30%, transparent 70%, rgba(10, 12, 20, 0.35) 100%); } .bsp-hero.in-view .bsp-hero-bg { opacity: 1; transform: scale(1); } /* ---- Calque 2 · le titre géant ------------------------------- */ /* Son texte est recopié en JavaScript depuis le titre éditable : une seule phrase à modifier, et pas de second

dans la page. ⚠️ Structure calquée EXACTEMENT sur la maquette index-2.html, en deux niveaux distincts: ne pas les refusionner en un seul : .bsp-hero-giant = conteneur flex, centre seulement (~ .depth-title) .bsp-hero-giant-inner = boîte de texte, width:100% (~ .depth-title h1) Avant cette séparation, le JS injectait le texte directement dans le conteneur flex. Sans élément de bloc dédié portant width:100%, la boîte anonyme créée par le flex ne s'étirait pas sur toute la largeur : elle se réduisait au contenu, et le texte se retrouvait éclaté en deux blocs (blanc à gauche, bleu à droite) au lieu d'un paragraphe centré unique. Corrigé le 21 août 2026. Le wrapper .bsp-hero-giant-inner est créé par bsp-custom.js: il n'existe pas dans le balisage du module Code Divi. */ .bsp-hero-giant { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 60px; pointer-events: none; } .bsp-hero-giant-inner { display: block; width: 100%; font-family: var(--bsp-font-display); font-weight: 800; /* Taille d'origine de la maquette index-2.html (.depth-title h1). Un correctif antérieur l'avait réduite à 5.6vw/94px en pensant corriger un retour à la ligne indésirable: en réalité la maquette est censée déborder sur plusieurs lignes à cette taille, dans les mêmes conditions (.bsp-hero.et_pb_row a le même overflow:hidden à 100vh que .depth-hero dans la maquette). Restauré le 21 août 2026. */ font-size: clamp(40px, 8vw, 132px); line-height: 0.98; letter-spacing: -0.02em; color: #fff; text-align: center; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(26px); transition: opacity 1.3s ease .3s, transform 1.3s ease .3s; } .bsp-hero-giant-inner em { font-style: italic; color: var(--bsp-accent-hover); } .bsp-hero.in-view .bsp-hero-giant-inner { opacity: 1; transform: translateY(0); } /* Once settled, the giant title fades out in favor of the left-side block. Fixed 2026-09-10 (reported by Clément): this fade (.9s, no delay) and the left-side block's fade-in below (1s, .1s delay) nearly fully overlapped: both titles stayed visible at the same time during the transition, which read as the second title bleeding through the first instead of replacing it. Shortened to .5s so the giant title is essentially gone before the left-side block starts appearing (see its delay increased to .5s below). */ .bsp-hero.settled .bsp-hero-giant-inner { opacity: 0; transform: translateY(-18px); transition: opacity .5s ease, transform .5s ease; } /* ---- Calque 3 · la personne détourée -------------------------- */ /* Vrai PNG détouré (foothills-homme.webp), au même cadrage que le fond : la transparence isole la silhouette nativement. C'est elle qui passe DEVANT le titre et donne la profondeur. Aucun découpage n'est calculé: la version antérieure le faisait au clip-path, c'était fragile et inutile. */ .bsp-hero-person { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity 3s ease .6s; } .bsp-hero-person img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.4)); } .bsp-hero.in-view .bsp-hero-person { opacity: 1; } /* Fades out together with the giant title, never before it: otherwise the title would end up alone in front of it. Duration matched to .bsp-hero-giant-inner (.5s, see above) so they truly disappear together. */ .bsp-hero.settled .bsp-hero-person { opacity: 0; transition: opacity .5s ease; } /* ---- Voile sombre à gauche ------------------------------------ Le texte se pose sur une photo claire : sans voile, il devient illisible dès que le sujet est lumineux. Le dégradé est porté par un pseudo-élément du module Code: qui est en flux, donc son pseudo-élément se positionne sur la rangée, au-dessus des deux calques d'image et sous le panneau logiciel, qui a le sien. */ .bsp-hero-code::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient( to right, rgba(10, 12, 20, 0.72) 0%, rgba(10, 12, 20, 0.55) 24%, rgba(10, 12, 20, 0.18) 50%, transparent 68% ); } /* ---- Le bloc de texte de gauche ------------------------------- */ /* C'est la colonne Divi elle-même : les modules à l'intérieur restent donc éditables un par un. */ .bsp-hero-content.et_pb_column { position: absolute; z-index: 6; top: 50%; left: 100px; transform: translateY(-46%); width: 100% !important; max-width: 580px; opacity: 0; pointer-events: none; transition: opacity 1s ease .1s, transform 1s ease .1s; } /* Dès que le panneau monte, l'opacité suit le défilement, sans transition (une transition de 1 s traînerait derrière la molette). */ .bsp-hero.is-rising .bsp-hero-content.et_pb_column { transition: transform 1s ease .5s; } .bsp-hero.is-covered .bsp-hero-content.et_pb_column { pointer-events: none; } /* Delay increased from .1s to .5s on 2026-09-10: the giant title takes .5s to disappear (see .bsp-hero-giant-inner above): this block should only start appearing once that fade-out is nearly done, otherwise the two titles overlap visually. */ .bsp-hero.settled .bsp-hero-content.et_pb_column { /* --bsp-hero-fade (1 → 0) est écrit par bsp-custom.js pendant que le panneau logiciel monte : le texte s'efface avant d'être recouvert. */ opacity: var(--bsp-hero-fade, 1); transform: translateY(-52%); pointer-events: auto; transition: opacity 1s ease .5s, transform 1s ease .5s; } /* Valeurs relevées au pixel sur bsp-maquette-v1/index-2.html. L'ombre portée vient de la maquette : elle décolle le surtitre de la photo sans avoir à assombrir tout le voile. */ .bsp-hero-eyebrow, .bsp-hero-eyebrow p { font-family: var(--bsp-font-label); font-weight: 700; font-size: 11.7px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--bsp-accent); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.8); margin-bottom: 0; } .bsp-hero-content .bsp-hero-eyebrow { margin-bottom: var(--bsp-space-2) !important; } /* 20 px sous le titre, 52 px sous l'accroche : la maquette place 12 px sous l'accroche puis 40 px au-dessus du bloc de boutons. Nos boutons étant des modules distincts, les deux se cumulent ici. */ .bsp-hero-content .bsp-hero-title { margin-bottom: 20px !important; } /* Le titre ne porte aucune marge propre : c'est le module qui la porte, pour que l'espacement se règle à un seul endroit. */ .bsp-hero-content .bsp-hero-title h1 { margin: 0; padding: 0; } .bsp-hero-title h1 { font-family: var(--bsp-font-display); font-weight: 800; font-size: var(--bsp-banner-title-size); line-height: 1.05; color: #fff; letter-spacing: -0.02em; padding-bottom: 0; } .bsp-hero-title h1 em { font-style: italic; color: var(--bsp-accent-hover); } .bsp-hero-lead, .bsp-hero-lead p { font-family: var(--bsp-font-body); font-size: 23.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88); line-height: 1.5; margin-bottom: 0; } .bsp-hero-content .bsp-hero-lead { margin-bottom: 52px !important; } /* Le bouton et le lien discret dessous. La colonne devient une grille à deux pistes : titre, accroche et surtitre occupent toute la largeur ; le bouton et le lien partagent la piste 1, dont la largeur est celle du plus large des deux (le bouton). Le lien est donc centré SUR le bouton, à distance égale de ses deux bords, quelle que soit la longueur de son texte. */ .bsp-hero-content.et_pb_column { display: grid; grid-template-columns: max-content 1fr; justify-items: stretch; } .bsp-hero-content.et_pb_column > * { grid-column: 1 / -1; } .bsp-hero-content.et_pb_column > .et_pb_button_module_wrapper { grid-column: 1; text-align: center; margin: 0; } .bsp-hero-content.et_pb_column > .et_pb_button_module_wrapper:has(> .bsp-hero-cta-2) { margin-top: 20px; } /* Le second n'est pas un bouton mais un lien discret: le « btn-ghost » de la maquette. On annule l'habillage de Divi, et on remplace sa flèche maison par notre caractère : une seule source d'icônes sur le projet. */ .bsp-hero-cta-2 .et_pb_button, a.bsp-hero-cta-2.et_pb_button { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: var(--bsp-font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.55); transition: color 0.2s; } .bsp-hero-cta-2 .et_pb_button:hover, a.bsp-hero-cta-2.et_pb_button:hover { color: #fff; background: transparent !important; border: 0 !important; padding: 0 !important; } .bsp-hero-cta-2 .et_pb_button::after, a.bsp-hero-cta-2.et_pb_button::after { content: ' →' !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; opacity: 1 !important; position: static !important; margin-left: 0 !important; } /* ---- Indication de défilement --------------------------------- */ .bsp-hero-cue { position: absolute; bottom: 32px; left: 100px; z-index: 30; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 1s ease 1.3s; } .bsp-hero.in-view .bsp-hero-cue { opacity: var(--bsp-hero-fade, 1); } .bsp-hero.is-rising .bsp-hero-cue { transition: none; } .bsp-hero-cue .cue-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent); } .bsp-hero-cue .cue-txt { font-family: var(--bsp-font-label); font-size: 8px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); writing-mode: vertical-rl; } /* ---- Calque 4 · le logiciel qui monte du bas ------------------- */ /* Sa position verticale est écrite par le script à chaque défilement : de translateY(100%) à translateY(0). */ .bsp-hero-software { position: absolute; inset: 0; z-index: 5; overflow: hidden; transform: translateY(100%); will-change: transform; } .bsp-hero-software img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .bsp-hero-software::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 12, 20, 0.86) 0%, rgba(10, 12, 20, 0.55) 30%, rgba(10, 12, 20, 0.1) 55%, transparent 75%); } .bsp-hero-reveal { position: absolute; z-index: 8; left: 100px; top: 50%; max-width: 520px; opacity: 0; will-change: opacity, transform; } .bsp-hero-reveal .reveal-eyebrow { font-family: var(--bsp-font-label); font-weight: 700; font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--bsp-accent); margin-bottom: 20px; } .bsp-hero-reveal .reveal-title { font-family: var(--bsp-font-display); font-weight: 800; font-size: var(--bsp-banner-title-size); line-height: 1.05; color: #fff; letter-spacing: -0.02em; margin-bottom: 20px; } .bsp-hero-reveal .reveal-title em { font-style: italic; color: var(--bsp-accent-hover); } .bsp-hero-reveal .reveal-text { font-family: var(--bsp-font-body); font-size: 23.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88); line-height: 1.5; max-width: 480px; margin-bottom: 0; } /* ============================================================= 02 · NAVIGATION (superposée au hero) ------------------------------------------------------------- Vit dans le même module Code que le hero, car elle est positionnée en absolu par-dessus l'image. À DÉPLACER dans un en-tête global Divi Theme Builder dès que les autres pages seront construites: voir NOTES-ACCUEIL.md. ============================================================= */ .bsp-home-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--bsp-gutter); } /* Voile dégradé sous la nav pour garder les liens lisibles */ .bsp-home-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 140px; background: linear-gradient(to bottom, rgba(10, 12, 20, 0.6) 0%, transparent 100%); pointer-events: none; z-index: -1; } .bsp-home-nav a { text-decoration: none; } /* --- Logo --- */ .bsp-home-nav-logo { display: flex; align-items: center; gap: 6px; } .bsp-home-nav-logo img { height: 36px; width: auto; } .bsp-home-nav-logo-text { font-family: var(--bsp-font-label); font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.05em; } /* Le point coloré est un élément de marque intentionnel (KB §2.4) */ .bsp-home-nav-logo-dot { color: var(--bsp-accent); font-size: 36px; line-height: 0; vertical-align: middle; } /* --- Liens centrés --- */ .bsp-home-nav-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* Typographie posée explicitement : la nav est déplacée du module Divi vers quand elle devient collante et héritait alors d'un autre line-height, ce qui décalait les liens. */ font-size: 12px; line-height: 26px; } /* Divi (critical CSS) donne aux