/* bonsplans-hero.css — passe « sérieux » de la page Bons plans (bandeau d'ouverture + unification).
   Production, choix finaux aplatis. Chargé UNIQUEMENT sur la page Bons plans (page-id-7550,
   gate sa-bonsplans-hero.php — imprimé wp_head 106, APRÈS #wp-custom-css). Ne PAS coller
   dans le Customizer. S'additionne au CSS du gabarit .axp-article existant (pages-annexes.css).
   Source : design_handoff_bonsplans/wordpress/bonsplans-hero.css v1.0.0 — 2 août 2026.
   Écart vs handoff (voir components/bonsplans/README.md) : calage horizontal du bandeau en
   CSS pur via max() (miroir de .axp-article-wrap : max-width 1200px + padding 32px, 24px
   ≤760px — pages-annexes.css) au lieu du fallback 40px recalé en JS (saut visible ~40→152px
   à 1440px au chargement) ; bonsplans-hero.js ne corrige plus qu'une dérive résiduelle. */

/* ==========================================================================
   1. Bandeau d'ouverture (même vocabulaire que les articles : article-hero.css)
   Markup rendu par sa-bonsplans-hero.php après </header> :
   .sa-hero-band > .sa-hero-inner > .sa-hero-text > (kicker + h1 + byline)
   Pas d'image à la une sur cette page (bandeau texte seul, grille 1 colonne).
   ========================================================================== */
.page-id-7550 .sa-hero-band { background: #FFFEFB; border-bottom: 1px solid #F2E7D4; }
/* Calage horizontal = bord de contenu du gabarit : (100% − 1200px)/2 + 32px de
   padding interne du wrap ; plancher 32px sous 1200px. JS = filet de sécurité. */
.page-id-7550 .sa-hero-inner { padding: 26px max(32px, calc((100% - 1200px) / 2 + 32px)) 24px; }
.page-id-7550 .sa-hero-text { min-width: 0; }
.page-id-7550 .sa-hero-kicker { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #3A798F; }
h1.sa-hero-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.18; letter-spacing: -.005em; color: #42413E; margin: 11px 0 0; padding: 0; background: none; -webkit-text-fill-color: currentColor; text-wrap: pretty; }
.page-id-7550 .sa-hero-byline { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.page-id-7550 .sa-hero-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(60, 50, 40, .22); }
.page-id-7550 .sa-hero-id { display: flex; flex-direction: column; gap: 3px; }
.page-id-7550 .sa-hero-meta { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; color: #C9861F; line-height: 1.3; }
.page-id-7550 .sa-hero-name { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; color: #42413E; line-height: 1.2; }
@media (max-width: 760px) {
  .page-id-7550 .sa-hero-inner { padding: 22px 24px 20px; }
  .page-id-7550 h1.sa-hero-title { font-size: 27px; }
  .page-id-7550 .sa-hero-byline { margin-top: 20px; }
  .page-id-7550 .sa-hero-photo { width: 42px; height: 42px; }
}

/* Titre + méta du gabarit remplacés par le bandeau — masqués, HTML stocké intouché.
   (Le H1 stocké est en plus rétrogradé en <p> à l'affichage par sa-bonsplans-hero.php
   — un seul <h1> dans le DOM ; la règle vise la classe, donc tient dans les deux cas.) */
.page-id-7550 .axp-article .axp-article-title,
.page-id-7550 .axp-article .axp-article-meta { display: none; }
/* Équilibre : écart filet → début du texte = écart signature → filet */
.page-id-7550 .sa-annexe .axp-article { padding-top: 24px !important; }
@media (max-width: 760px) {
  .page-id-7550 .sa-annexe .axp-article { padding-top: 20px !important; }
}

/* ==========================================================================
   2. Unification typographique
   Les H2 du gabarit sont enveloppés d'un span.sa-hx-hl (filtre the_content de
   sa-bonsplans-hero.php ; wrapH2s() du JS = filet de sécurité idempotent).
   ========================================================================== */
/* H2 : terra plein (le dégradé doré du gabarit est neutralisé), liens de
   partenaires dans les H2 sans soulignement */
.page-id-7550 .sa-annexe .axp-article h2, .page-id-7550 .sa-annexe .axp-article h2 a { background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: #B85832; }
.page-id-7550 .sa-annexe .axp-article h2 a { text-decoration: none !important; }
.page-id-7550 .sa-annexe .axp-article h3, .page-id-7550 .sa-annexe .axp-article h4 { color: #42413E; }
/* Marqueur doré : sous le NOM DU PARTENAIRE seul (le lien du H2) ; les H2 sans
   lien (FAQ) reçoivent le marqueur complet via le span */
.sa-hx-hl { background-repeat: no-repeat; background-size: 100% .32em; background-position: 0 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-id-7550 .axp-article h2 .sa-hx-hl a { background-image: linear-gradient(#F5E3B5, #F5E3B5) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; background-repeat: no-repeat; background-size: 100% .32em; background-position: 0 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-id-7550 .axp-article-faq h2 .sa-hx-hl { background-image: linear-gradient(#F5E3B5, #F5E3B5); }
/* Liens du texte : terra (boutons .sab-btn et liens avis .sab-review intouchés) */
.page-id-7550 .sa-annexe .axp-article p a:not(.sab-btn):not(.sab-review), .page-id-7550 .sa-annexe .axp-article li a:not(.sab-btn):not(.sab-review) { color: #B85832; text-decoration-color: #E4C3AE; }
.page-id-7550 .sa-annexe .axp-article p a:not(.sab-btn):not(.sab-review):hover, .page-id-7550 .sa-annexe .axp-article li a:not(.sab-btn):not(.sab-review):hover { color: #D36D4C; }