/* ============================================================ BIONATUS CANADA — Phase 2D — Design System visuel (accueil) Fichier : healthflex-child/assets/css/bionatus-home-rc2.css Portée : chargé UNIQUEMENT sur la page "Accueil Bionatus RC2 — LOCAL" (voir healthflex-child/functions.php, fonction bn_enqueue_home_rc2_css()). N'affecte aucune autre page, aucun thème parent, aucun plugin, aucune donnée en base. Règles suivies dans tout ce fichier : - Uniquement des sélecteurs sous classes "bn-" déjà utilisées dans le collage WPBakery RC2 (bn-hero, bn-card, bn-pillars, bn-pillar, bn-alt-bg, bn-highlight, bn-dark, bn-section, bn-lead, bn-regulatory-line, bn-separation-note, bn-signature-secondary, bn-btn-prelaunch), ou des sélecteurs composés explicitement enracinés sous l'une de ces classes (ex. ".bn-section .vc_btn3"), jamais un sélecteur nu de type "h1 {}" ou ".vc_btn3 {}". - Aucun "!important". Les zones de collision potentielle avec le CSS "BIONATUS – Global" (option en base, imprimé en dernier dans ) sont documentées en commentaire, pas contournées de force. - Aucune police externe, aucune image générée/téléchargée. - Tokens existants réutilisés tels quels par valeur (--bn-container: 1280px, --bn-radius: 12px, documentés dans BIONATUS_CA_LOCAL_SITE_AUDIT.md section 6) plutôt que redéclarés sous le même nom, pour éviter toute redéfinition d'une variable déjà définie ailleurs. ============================================================ */ /* ------------------------------------------------------------ 1 — DESIGN TOKENS (Phase 2D / 2D.1) Tokens de couleur : préfixe "--bn-*" (palette officielle Bionatus Brésil, Phase 2D.1) — noms distincts de "--bn-container"/"--bn-radius" déjà définis ailleurs, donc aucune collision. Tokens de rythme/rayon/typo (non couleur, inchangés depuis la Phase 2D) : préfixe "--bnrc2-*", conservé tel quel, hors du périmètre de cette correction (qui ne porte que sur les couleurs). ------------------------------------------------------------ */ :root { /* Palette officielle Bionatus Brésil — vérifiée par Michel le 25 août 2026 dans les variables CSS calculées (getComputedStyle) de bionatus.com.br. #566c19 devient le vert principal officiel de travail Bionatus Canada, en continuité avec le Brésil. Phase 2D.1 : remplace la palette provisoire (#7f9020) de la Phase 2D. */ --bn-green-primary: #566c19; --bn-green-secondary: #546c1c; --bn-green-dark: #3f5012; --bn-green-soft: #eef1e5; /* Neutres */ --bn-background: #ffffff; --bn-background-alt: #f7f7f5; --bn-background-highlight: #efefef; --bn-background-dark: #222d3f; /* reprend la couleur "dark section" déjà définie par le thème (Phase 1, section 6) */ --bn-white: #ffffff; --bn-text: #2b2b28; /* volontairement plus foncé que le gris Bionatus Brésil, pour la lisibilité canadienne */ --bn-text-muted: #7a7a7a; /* valeur vérifiée sur bionatus.com.br */ --bn-text-on-dark: #ffffff; --bn-text-on-dark-muted: rgba(255, 255, 255, 0.72); --bn-border: rgba(86, 108, 25, 0.16); /* teinté vert, dérivé de --bn-green-primary */ --bn-border-on-dark: rgba(255, 255, 255, 0.18); /* Rythme / rayon — valeurs propres, alignées visuellement sur --bn-radius:12px existant (inchangé) */ --bnrc2-radius-card: 12px; --bnrc2-radius-btn: 10px; --bnrc2-gap-card: 24px; /* Typo d'appoint (le thème charge déjà une échelle H1/H2 de base — voir section 2) */ --bnrc2-lead-size: 1.35rem; /* ~21.6px desktop, dans la fourchette 19–22px du mandat */ --bnrc2-lead-size-mobile: 1.2rem; } /* ------------------------------------------------------------ 2 — TYPOGRAPHIE (dans les zones bn- uniquement) L'échelle H1 de base (52-56px desktop, réductions mobiles) vient déjà du CSS "BIONATUS – Global" existant et n'a pas été redéfinie ici. ------------------------------------------------------------ */ /* Phase 2D.3 : filet de sécurité H2, scopé sous .bn-section (jamais de sélecteur nu h2{}). Le CSS "BIONATUS – Global" existant définit déjà H2 à 34px/700 (dans la fourchette mandat 32-36px) ; cette règle ne fait que confirmer/garantir la même valeur pour les H2 de cette page si jamais la spécificité de la règle globale ne s'appliquait pas de façon fiable dans un contexte WPBakery particulier — aucun changement visuel attendu si tout fonctionnait déjà. */ .bn-section h2 { font-size: 34px; line-height: 1.15; } /* Accroche du Hero — reprend/precise la classe bn-lead déjà posée dans le collage */ .bn-lead { font-size: 21px; /* Phase 2D.3 : cible Hero lead 20-22px (valeur explicite, remplace var(--bnrc2-lead-size) ~21.6px) */ line-height: 1.4; font-weight: 600; color: var(--bn-text); max-width: 620px; margin: 0 0 16px 0; } /* Accroche courte de mission (bn-mission-lead, déjà posée dans le collage RC2) */ .bn-mission-lead { font-size: var(--bnrc2-lead-size); line-height: 1.5; max-width: 720px; margin: 0 auto 40px auto; text-align: center; color: var(--bn-text); } /* Paragraphes courants à l'intérieur des sections bn- : largeur de ligne maîtrisée, line-height 1.6–1.75 Phase 2D.3 : sélecteur élargi (.wpb_wrapper p en plus du sélecteur d'origine) pour couvrir de façon plus robuste les paragraphes quelle que soit la profondeur d'imbrication WPBakery réelle sur cette page (non vérifiable par inspection live du navigateur dans cette session) ; taille remontée à 17px (cible mandat : corps de section 16-18px, préférence desktop 17px). */ .bn-section p, .bn-section .wpb_wrapper p { line-height: 1.7; font-size: 17px; } .bn-section > .wpb_column > .wpb_wrapper > .wpb_text_column p, .bn-section .vc_col-sm-6 .wpb_wrapper p { max-width: 720px; } /* Description du Hero (paragraphe sous l'accroche .bn-lead) — cible mandat 17-18px, line-height ~1.65. Spécificité égale à la règle ".bn-section .wpb_wrapper p" ci-dessus (2 classes + 1 élément) : placée après elle dans le fichier, elle l'emporte par ordre de source pour ce paragraphe précis. */ .bn-hero p:not(.bn-lead) { font-size: 18px; line-height: 1.65; } /* Titres de cartes / piliers (h4 posés par le collage RC2 à l'intérieur de bn-card / bn-pillar) */ .bn-card h4, .bn-pillar h4 { font-size: 19px; /* Phase 2D.3 : cible mandat 18-20px (valeur explicite, etait 1.15rem/~18.4px) */ line-height: 1.25; font-weight: 700; color: var(--bn-text); margin: 0 0 8px 0; } /* Phrase de séparation scientifique (bn-separation-note, déjà posée) — discrète, pas un avertissement */ .bn-separation-note { font-size: 0.9rem; color: var(--bn-text-muted); border-left: 2px solid var(--bn-border); padding-left: 14px; margin-top: 18px; opacity: 1; /* remplace un simple opacity global par une couleur dédiée, plus lisible */ } /* Signature secondaire "Bionatus — La nature, documentée." (bn-signature-secondary, déjà posée) */ .bn-signature-secondary { font-size: 0.95rem; font-style: italic; color: var(--bn-text-muted); margin-top: 20px; } /* Ligne d'usage traditionnel sous les cartes PROPOVIT (bn-regulatory-line, déjà posée) */ .bn-regulatory-line { background: var(--bn-background-alt); border-left: 3px solid var(--bn-green-primary); border-radius: 0 var(--bnrc2-radius-card) var(--bnrc2-radius-card) 0; padding: 18px 24px; margin-top: var(--bnrc2-gap-card); font-size: 0.95rem; color: var(--bn-text-muted); max-width: 760px; } /* ------------------------------------------------------------ 3 — HERO (.bn-hero) ------------------------------------------------------------ */ .bn-hero { padding-top: 64px; /* Phase 2D.3 : reduit de 72px, borne basse de la cible mandat 64-80px, pour reduire le vide signale */ padding-bottom: 64px; background: var(--bn-background); } /* Phase 2D.4 : empêche l'étirement en hauteur égale des deux colonnes (7/12 texte / 5/12 visuel). Sans ce garde-fou, un display:flex hérité (WPBakery/HealthFlex utilise ce motif pour les Rows en mode colonnes égales) peut forcer align-items:stretch par défaut sur la Row du Hero, ce qui étire la colonne de texte (ou la colonne visuelle) à la hauteur de l'autre et contribue à la dispersion verticale constatée. La colonne visuelle ne doit plus jamais déterminer la hauteur du Hero. */ .bn-hero > .wpb_row { align-items: flex-start; } /* Phase 2D.4 — rythme vertical compact et régulier entre les blocs de la colonne gauche (eyebrow, H1, lead, description, groupe CTA). Neutralise l'espacement par défaut WPBakery/ js_composer (classe générique .wpb_content_element, ~35px de margin-bottom de série sur chaque bloc empilé) au profit d'un espacement court et uniforme. Ne modifie ni la taille du H1 ni celle du texte courant (mandat : "ne réduire ni H1 ni body text") — seuls les espacements changent. */ .bn-hero .wpb_column:first-child .wpb_content_element { margin-bottom: 14px; } /* Phase 2D.4 : regroupe "Découvrir PROPOVIT®" (CTA actif, vert --bn-green-primary via post_content) et "Bientôt sur Amazon Canada" (statut pré-lancement, non cliquable) dans une seule zone compacte, immédiatement sous la description — plus aucun des deux ne doit rester isolé plus bas dans la page. justify-content:flex-start est explicite : un éventuel space-between hérité écarterait les deux éléments aux extrémités de la colonne au lieu de les garder groupés l'un à côté de l'autre. Deux sélecteurs ciblés (.vc_row_inner, et l'alias .vc_row.wpb_row déjà utilisé en Phase 2C/2D) pour couvrir la structure réellement rendue quelle que soit la classe exacte de cette version de WPBakery — non confirmée par inspection live du navigateur dans cette session. */ .bn-hero .wpb_column:first-child .vc_row_inner, .bn-hero .vc_row.wpb_row, .bn-hero .wpb_column:first-child .vc_inner { display: flex; flex-wrap: wrap; align-items: flex-start; /* Phase 2D.8 : etait center — diagnostic navigateur (Edge, DevTools) confirme que l'ecart externe description -> Row (43px) est correct, mais que center centrait chaque bouton dans une Row plus haute que lui, creant un decalage interne d'~43px entre le haut de la Row et le haut du bouton. flex-start aligne les boutons en haut de la Row (cible OFFSET 0-8px). */ justify-content: flex-start; gap: 12px; margin-top: 0; /* Phase 2D.5 : reduit de 12px a 0 — l'espacement description -> CTA est desormais entierement porte par la regle dediee ci-dessus (margin-top du groupe CTA, Phase 2D.7), pour une valeur unique et deterministe plutot qu'un cumul. Inchange en Phase 2D.8 (mandat : ne plus toucher l'ecart externe). */ } /* Phase 2D.7 : le selecteur :has(+ .vc_row_inner)/:has(+ .vc_row.wpb_row) de la Phase 2D.5 reposait sur une hypothese de classe non confirmee par inspection live (voir notes 2D.4/2D.5) — la revue navigateur confirme que l'espacement reel obtenu restait nettement superieur a la cible 30-40px, donc ce :has() ne correspond pas fidelement a la structure WPBakery reellement rendue (adjacence non garantie). Remplace par un selecteur structurel deja prouve applicable dans ce meme fichier : .wpb_column:first-child > .wpb_wrapper > *:last-child cible a coup sur le groupe CTA (c'est deja lui que la regle plus haut, ligne ~212-214, remet a margin-bottom:0 en tant que dernier enfant du wrapper). On porte donc l'espacement dedie en margin-top sur ce dernier enfant lui-meme plutot qu'en margin-bottom sur le bloc precedent, ce qui ne depend plus du nom de classe exact du bloc description ni de son adjacence directe. */ .bn-hero .wpb_column:first-child > .wpb_wrapper > *:last-child { margin-top: 36px; } /* Phase 2D.4 : les deux colonnes du groupe CTA ne doivent pas s'étirer sur 50% chacune (ce qui les écarterait avec un grand vide entre elles) — elles doivent s'ajuster à la largeur de leur bouton respectif, l'un à côté de l'autre, dans le même bloc visuel. */ .bn-hero .wpb_column:first-child .vc_row_inner > .wpb_column, .bn-hero .vc_row.wpb_row > .wpb_column, .bn-hero .wpb_column:first-child .vc_inner > .wpb_column { width: auto; flex: 0 0 auto; min-height: 0; } /* Phase 2D.9 : inspection DOM reelle (Edge) confirme que la Phase 2D.8 n'a eu aucun effet — .vc_btn3-container conservait toujours padding-top:14px. Cause : .vc_row_inner ne correspond a rien dans le DOM reel (deja suspecte depuis 2D.4/2D.5), et .vc_row.wpb_row ne matche pas non plus la Row interne CTA (sa classe reelle est .vc_inner, sans le token exact "vc_row"). La Row interne confirmee est .vc_inner. Deux causes reelles du decalage de 43px identifiees par inspection live : 1) un
parasite en premier enfant du wrapper de chaque colonne CTA (avant le bouton) ; 2) le padding-top:14px natif WPBakery de .vc_btn3-container, jamais neutralise par 2D.8. */ .bn-hero .vc_inner > .wpb_column > .wpb_wrapper > br { display: none; /* uniquement les
directement enfants des wrappers de colonnes CTA du Hero — aucun autre
du site n'est touche par ce selecteur scope */ } /* Phase 2D.10 : inspection DOM Edge apres 2D.9 confirme que les
sont bien supprimes, mais que .vc_btn3-container garde padding-top:14px malgre la regle ci-dessus — donc non gagnante. Regle concurrente identifiee par lecture directe du CSS charge (fichier reellement present sur le site, pas une hypothese) : wp-content/plugins/js_composer/assets/css/shortcodes/frontend/vc_button3.min.css contient .vc_btn3{ ... padding:14px 20px; ... } Cette regle native WPBakery (specificite 0-1-0, pas de !important) s'applique au conteneur parce que .vc_btn3-container porte lui-meme la classe brute "vc_btn3" (confirme dans le DOM : class="vc_btn3-container vc_btn3 vc_btn3-left vc_do_btn"). Notre regle .vc_inner .vc_btn3-container (specificite 0-3-0) est deja plus specifique en theorie ; par prudence (cascade non verifiable en direct depuis cette session, aucun acces navigateur live), on augmente la specificite au minimum necessaire en ciblant explicitement le meme element via le sous-selecteur compose .vc_btn3-container.vc_btn3 (specificite 0-4-0 avec le contexte .bn-hero .vc_inner), qui reste scope au Hero uniquement et ne touche pas padding-bottom (14px natif conserve, non responsable du decalage haut). */ .bn-hero .vc_inner .vc_btn3-container.vc_btn3 { padding-top: 0; margin-top: 0; } /* Colonne visuelle du Hero — image PROPOVIT® permanente (média WordPress ID 3342, Phase 2E). Plus de branche placeholder : ce visuel est désormais l'état par défaut, sans condition. */ .bn-hero > .wpb_row > .wpb_column:last-child .wpb_wrapper { min-height: 0; padding: 0; background: none; border: none; display: block; } @media only screen and (max-width: 767px) { .bn-hero { padding-top: 48px; padding-bottom: 48px; } .bn-hero .wpb_column:first-child .vc_row_inner, .bn-hero .vc_row.wpb_row, .bn-hero .wpb_column:first-child .vc_inner { flex-direction: column; align-items: stretch; } /* Phase 2E.6 : cause reelle et confirmee (lecture directe du CSS natif WPBakery, wp-content/plugins/js_composer/assets/css/js_composer.min.css) : .vc_btn3-container { margin-bottom: 21.73913043px } Cette regle native s'applique a chaque bouton du groupe statut+CTA (les deux sont des .vc_btn3-container) et n'a jamais ete neutralisee — les Phases 2D.9/2D.10 avaient seulement neutralise le cote haut (padding-top/margin-top) du conteneur, pas le bas. En colonne mobile (flex-direction:column ci-dessus), ce margin-bottom non controle s'ajoute au gap:12px existant entre statut et CTA, et laisse un residu de ~21.7px apres le dernier bouton avant le packshot. Neutralise ici, mobile uniquement — le desktop n'est pas concerne par cette regle (mandat : ne pas toucher au desktop). */ .bn-hero .vc_inner .vc_btn3-container { margin-bottom: 0; } /* Phase 2E.6 : le gap:12px du groupe CTA (regle generale, toutes tailles d'ecran, ligne ~245) devient, une fois le margin-bottom natif neutralise ci-dessus, le seul espace entre statut et CTA sur mobile — insuffisant pour la cible visuelle (24-32px). Surcharge mobile uniquement du meme gap deja defini par la regle existante, desktop inchange. */ .bn-hero .wpb_column:first-child .vc_inner { gap: 28px; } /* Phase 2E.5 : surcharge mobile uniquement — resserre l'espacement description -> groupe statut/CTA de 36px (regle generale, ligne ~264) a 24px, sans toucher a la valeur desktop. Phase 2E.6 : controle visuel reel post-2E.5 montre un espace encore trop important a cet endroit sur mobile. Cause non confirmee par inspection live (aucun acces navigateur/wp-admin depuis cette session — meme limite que documentee depuis la Phase 2E.4) ; valeur ajustee a la cible visuelle demandee (40-55px) en completant cette meme regle mobile existante, sans toucher au desktop (regle generale 36px, hors media query, inchangee). */ /* Phase 2F.2 : selecteur corrige — verification DOM par lecture directe du code source des templates WPBakery (vc_column.php / vc_column_inner.php, js_composer) confirme que la structure reelle est .wpb_column > .vc_column-inner > .wpb_wrapper (jamais l'enfant direct .wpb_column > .wpb_wrapper suppose depuis la Phase 2D.4). L'ancien selecteur ci-dessous n'a donc jamais matche dans le DOM reel — cette regle mobile n'a jamais ete realmente appliquee depuis sa creation (Phase 2D.7/2E.5/2E.6), quelle que soit la valeur testee. Correctif scope MOBILE UNIQUEMENT (mandat proprietaire) : la regle generale desktop equivalente (ligne ~269, meme ancien selecteur, meme bug) N'EST PAS touchee ici — le Hero desktop deja approuve visuellement ne doit pas etre perturbe par l'activation soudaine d'une regle qui n'a jamais reellement matche. Valeur 48px conservee sans changement pour ce premier test reel (n'a jamais ete testee visuellement, l'ancien selecteur ne pouvant pas matcher). Dette technique documentee : selecteurs dormants identiques aux lignes ~117 (hors Hero), ~197, ~212, ~292 — non corriges dans cette phase, audit ulterieur. */ .bn-hero .wpb_column:first-child > .vc_column-inner > .wpb_wrapper > *:last-child { margin-top: 16px; } /* Espacement CTA → packshot sur mobile : compense la marge native non collapsée du dernier bouton CTA (.vc_btn3-container, ~21.7px, neutralisée plus haut en ligne ~382-384). Sans cet ajustement l'espace visuel serait réduit sous la cible (45-60px). */ .bn-hero > .wpb_row > .wpb_column:last-child .wpb_wrapper { margin-top: 52px; } } /* ------------------------------------------------------------ 4 — CARTES "PROPOVIT® EN UN COUP D'ŒIL" (.bn-card-grid / .bn-card) ------------------------------------------------------------ */ .bn-card-grid { display: flex; flex-wrap: wrap; gap: var(--bnrc2-gap-card); margin-top: 40px; } .bn-card-grid .bn-card { flex: 1 1 calc(25% - 18px); min-width: 220px; background: var(--bn-background); border: 1px solid var(--bn-border); border-radius: var(--bnrc2-radius-card); padding: 28px 24px; text-align: left; display: flex; flex-direction: column; /* emplacement réservé pour une future icône (Phase 2E) : espace laissé par le padding-top plus généreux, aucune icône externe ajoutée à ce stade */ } .bn-card-grid .bn-card p { color: var(--bn-text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; } @media only screen and (max-width: 1199px) and (min-width: 768px) { .bn-card-grid .bn-card { flex: 1 1 calc(50% - 12px); } } @media only screen and (max-width: 767px) { .bn-card-grid { flex-direction: column; } .bn-card-grid .bn-card { flex: 1 1 auto; width: 100%; } } /* ------------------------------------------------------------ 5 — FONDS ALTERNÉS (.bn-alt-bg / .bn-highlight / .bn-dark) NOTE collision potentielle : ces trois classes ont aussi été proposées (section 3) dans BIONATUS_CA_WPBAKERY_IMPLEMENTATION_REPORT.md pour un ajout futur au champ "BIONATUS – Global" en base. Si ce texte y a été collé entre-temps, ce fichier (chargé plus tôt dans ) et ce champ (imprimé en dernier, priorité wp_head 999999) définiraient alors la même classe deux fois. Les valeurs ci-dessous sont volontairement identiques à celles déjà documentées (Phase 1/2C) pour qu'il n'y ait, dans tous les cas, aucune divergence visuelle — à confirmer lors de la revue visuelle. ------------------------------------------------------------ */ .bn-alt-bg { background-color: var(--bn-background-alt); } .bn-alt-bg .bn-separation-note { border-left-color: rgba(43, 43, 40, 0.18); } .bn-highlight { background-color: var(--bn-background-highlight); } .bn-dark { background-color: var(--bn-background-dark); color: var(--bn-text-on-dark); } .bn-dark p { color: var(--bn-text-on-dark-muted); } .bn-dark a { color: var(--bn-text-on-dark); text-decoration: underline; } /* ------------------------------------------------------------ 6 — COMPRENDRE LA PROPOLIS VERTE (2 colonnes, .bn-alt-bg déjà posé sur la Row) ------------------------------------------------------------ */ .bn-alt-bg .wpb_column:last-child .wpb_wrapper:empty { min-height: 280px; border-radius: var(--bnrc2-radius-card); background: linear-gradient(135deg, var(--bn-green-soft) 0%, var(--bn-white) 100%); border: 1px solid var(--bn-border); display: flex; align-items: center; justify-content: center; } .bn-alt-bg .wpb_column:last-child .wpb_wrapper:empty::after { content: "Propolis verte — visuel à venir"; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bn-green-dark); opacity: 0.55; text-align: center; padding: 0 24px; } /* ------------------------------------------------------------ 7 — MISSION : TROIS PILIERS (.bn-pillars / .bn-pillar) ------------------------------------------------------------ */ .bn-pillars { display: flex; gap: var(--bnrc2-gap-card); margin-top: 32px; margin-bottom: 32px; } .bn-pillars .bn-pillar { flex: 1 1 0; text-align: center; padding: 24px 20px; } .bn-pillars .bn-pillar h4 { color: var(--bn-green-dark); } .bn-pillars .bn-pillar p { color: var(--bn-text-muted); font-size: 0.95rem; line-height: 1.6; } @media only screen and (max-width: 767px) { .bn-pillars { flex-direction: column; gap: 8px; } } /* ------------------------------------------------------------ 8 — AMAZON CANADA (.bn-highlight, section déjà en fond marqué) Deux blocs Consommateurs / Détaillants — pas de jaune Amazon dominant. ------------------------------------------------------------ */ .bn-highlight .vc_row_inner { display: flex; gap: var(--bnrc2-gap-card); margin-top: 32px; } .bn-highlight .vc_row_inner .wpb_column { background: var(--bn-background); border-radius: var(--bnrc2-radius-card); border: 1px solid var(--bn-border); padding: 28px; } .bn-highlight .vc_row_inner .wpb_column h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } @media only screen and (max-width: 767px) { .bn-highlight .vc_row_inner { flex-direction: column; } } /* ------------------------------------------------------------ 9 — DÉTAILLANTS (section courte, CTA B2B) ------------------------------------------------------------ */ .bn-section:has(#detaillants) p { max-width: 640px; } /* ------------------------------------------------------------ 10 — RENSEIGNEMENTS & CONTACT (.bn-dark) ------------------------------------------------------------ */ .bn-dark .wpb_column p { max-width: 640px; } /* ------------------------------------------------------------ 11 — BOUTONS Tous les CTA du collage RC2 portent déjà el_class="vc_btn3" (natif WPBakery). On ne redéfinit jamais ".vc_btn3" seul : chaque règle est enracinée sous ".bn-section" (présent sur toutes les Rows de cette page), donc strictement local à cette page et à ces boutons. ------------------------------------------------------------ */ .bn-section a.vc_btn3 { min-height: 48px; height: 48px; display: inline-flex; /* Phase 2D.11 : centrage interne robuste du texte du bouton */ align-items: center; justify-content: center; line-height: 1.2; /* etait 46px — le centrage vertical est desormais porte par align-items, pas par line-height==height (fragile si le texte passe sur 2 lignes) */ padding: 0 26px; border-radius: var(--bnrc2-radius-btn); font-weight: 600; font-size: 15px; /* Phase 2D.3 : cible mandat 15-16px (valeur explicite, etait 0.95rem/~15.2px) */ } /* Phase 2D.9 : etait ".bn-section .vc_btn3" — .vc_btn3-container (le
wrapper WPBakery, voir section HERO ci-dessus) porte lui-meme la classe "vc_btn3", donc cette regle stylait par inadvertance le conteneur ET le vrai bouton . Le selecteur de type "a" restreint structurellement la regle au veritable bouton (le conteneur est un
, jamais selectionne), sans rien changer au rendu du bouton lui-meme et sans course a la specificite. Phase 2D.11 : hauteur (48px), padding (0 26px), couleur/largeur ne changent pas — seul le mode de centrage vertical/horizontal du texte devient flex (display/align-items/justify-content), scope a .bn-section a.vc_btn3 uniquement (jamais .vc_btn3-container, jamais la Row CTA, jamais les marges du Hero). */ /* Style "outline" WPBakery déjà utilisé pour les CTA secondaires (classe native js_composer) */ .bn-section a.vc_btn3-style-outline { background-color: transparent; } /* ------------------------------------------------------------ 12 — RESPONSIVE — garde-fous généraux à cette page ------------------------------------------------------------ */ @media only screen and (max-width: 767px) { .bn-section a.vc_btn3 { /* Phase 2D.9 : idem ci-dessus — ne cible que le vrai bouton. Phase 2D.11 : largeur 100% deja prevue, conservee telle quelle, compatible avec inline-flex (largeur explicite prioritaire). */ width: 100%; text-align: center; } } /* Évite tout débordement horizontal sur mobile pour les grilles internes de cette page */ .bn-section .vc_row_inner, .bn-card-grid, .bn-pillars { max-width: 100%; } /* ============================================================ FIN — BIONATUS Phase 2D Design System v1 ============================================================ */