/* article-hero.css — passe « sérieux » des pages article (bandeau d'ouverture + unification).
   Production, choix finaux aplatis (sans data-attributes). Chargé UNIQUEMENT sur les articles
   (impression conditionnelle wp_head prio 106 — voir sa-article-hero.php). Ne PAS coller dans
   le Customizer : doit charger APRÈS article-single.css (prio 105) et #wp-custom-css (101).
   S'additionne à article-single.css (refonte déployée). v1.0.0 — 2 août 2026

   DÉVIATIONS vs design_handoff_article_serieux/wordpress/article-hero.css — NE PAS « corriger » :
   [H1] Calage horizontal du bandeau en CSS pur (le handoff s'appuyait sur article-hero.js).
        Valeurs mesurées sur le DOM live du 2026-08-02 (bord gauche réel de la colonne article) :
        ≥1200px : 71px fixes puis (100%−1298)/2 au-delà de 1440 (§12 Customizer :
        width calc(100%−142px) cap 1298) · 922–1199 : 60px (container 20 + article 40) ·
        545–921 : 56px (container 20 + article 2.28em) · ≤544 : 22px (0.54em + 1em).
        article-hero.js align() ne subsiste que comme filet de sécurité (no-op si CSS juste).
        Zéro décalage de rendu (CLS) : le bandeau est aligné dès la première peinture, sans JS.
   [H2] Fil d'ariane mobile : a:last-child → a:not(:first-child) (un article à catégorie
        de tête sans parente n'a qu'un seul lien : last-child l'aurait masqué → crumb vide).
   [H3] .sa-hero-img : width/height/srcset posés dans le markup PHP (sa_article_hero_img_info) ;
        le CSS contraint la largeur d'affichage — object-fit couvre les ratios source 4:3. */

/* ==========================================================================
   1. Bandeau d'ouverture (fond blanc compact)
   Markup rendu par sa-article-hero.php juste après </header> :
   .sa-hero-band > .sa-hero-inner > (.sa-hero-text > crumb + h1 + byline) + picture/img
   ========================================================================== */
.sa-hero-band { background: #FFFEFB; border-bottom: 1px solid #F2E7D4; }
/* [H1] Padding horizontal = bord gauche réel de la colonne article à chaque largeur. */
.sa-hero-inner { padding: 26px 60px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; }
@media (min-width: 1200px) {
  .sa-hero-inner { padding-left: max(71px, calc((100% - 1298px) / 2)); padding-right: max(71px, calc((100% - 1298px) / 2)); }
}
.sa-hero-text { min-width: 0; }
/* [H3] L'image peut être enveloppée d'un <picture> (source WebP) : display:contents
   fait de l'<img> l'élément de grille effectif. Le placement est EXPLICITE
   (colonne 2, rangée 1) : l'auto-placement à travers display:contents place
   l'image en rangée 2 sous Chromium (constaté sur le live 2026-08-02). */
.sa-hero-inner > picture { display: contents; }
.sa-hero-inner > picture > .sa-hero-img,
.sa-hero-inner > .sa-hero-img { grid-column: 2; grid-row: 1; }
.sa-hero-crumb { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.sa-hero-crumb, .sa-hero-crumb a { color: #3A798F; }
.sa-hero-crumb a { text-decoration: none; transition: color .15s; }
.sa-hero-crumb a:hover { text-decoration: underline; }
.sa-hero-sep { margin: 0 .55em; }
/* H1 réel de la page (l'entry-header du thème est désactivé, cf. PHP).
   Source Serif 4 600 : auto-hébergée site-wide (uploads/fonts/source-serif-4-600.woff2),
   préchargée par sa-article-hero.php quand le bandeau est actif. */
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; }
/* Signature : centrée entre le titre et le filet (24px = padding-bottom du bandeau) */
.sa-hero-byline { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.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); }
.sa-hero-id { display: flex; flex-direction: column; gap: 3px; }
.sa-hero-meta { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; color: #C9861F; line-height: 1.3; }
.sa-hero-name { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; color: #42413E; line-height: 1.2; }
/* Image à la une : à droite du titre. [H3] object-fit couvre le ratio source. */
.sa-hero-img { width: 218px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(96, 74, 42, .16); }

/* Éléments remplacés par le bandeau — masqués à l'affichage, HTML stocké intouché */
.single .ast-article-single > .sa-breadcrumb,
.single .ast-article-single .entry-header:not(.related-entry-header),
.single .ast-article-single .entry-content > figure.wp-block-image:first-child,
.single .ast-article-single .entry-content p.sa-updated-line { display: none !important; }

/* Départ d'article : écart filet → article = écart signature → filet.
   Desktop : barre orange du sommaire calée sur le début de l'intro. */
.single #primary article.ast-article-single { margin-top: 0; padding-top: 2px !important; }
@media (min-width: 922px) {
  .single #content #primary { margin-top: 23px !important; }
  .single #content #secondary { margin-top: 47px !important; }
}
@media (max-width: 921px) {
  .single #content #primary { padding-top: 18px !important; }
}

/* --- Responsive bandeau --- */
/* Tablette (≤980) : vignette paysage réduite */
@media (max-width: 980px) {
  .sa-hero-inner { column-gap: 22px; }
  .sa-hero-img { width: 168px; aspect-ratio: 4 / 3; border-radius: 14px; align-self: center; }
}
@media (max-width: 921px) {
  .sa-hero-inner { padding-left: 56px; padding-right: 56px; } /* [H1] 545–921 */
}
@media (max-width: 760px) {
  .sa-hero-inner { padding-top: 22px; padding-bottom: 20px; }
  h1.sa-hero-title { font-size: 27px; }
  .sa-hero-byline { margin-top: 20px; /* = padding-bottom mobile */ }
  .sa-hero-photo { width: 42px; height: 42px; }
}
/* Mobile (≤560) : fil d'ariane réduit à la catégorie ; titre pleine largeur ;
   image en pleine largeur 16:9 sous la signature, 20px au-dessus du filet */
@media (max-width: 560px) {
  .sa-hero-crumb > .sa-hero-sep, .sa-hero-crumb > a:not(:first-child) { display: none; } /* [H2] */
  .sa-hero-inner { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
  .sa-hero-inner > picture > .sa-hero-img,
  .sa-hero-inner > .sa-hero-img { grid-column: 1; grid-row: auto; } /* [H3] pleine largeur sous la signature */
  .sa-hero-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; margin-top: 18px; align-self: auto; }
}
@media (max-width: 544px) {
  .sa-hero-inner { padding-left: 22px; padding-right: 22px; } /* [H1] ≤544 */
}

/* ==========================================================================
   2. Marqueur doré sous les titres
   Les H2 du corps sont enveloppés d'un span.sa-hx-hl par le filtre the_content
   (PHP) ; les titres générés par le thème (Articles similaires, Laisser un
   commentaire) par article-hero.js.
   ========================================================================== */
.sa-hx-hl { background-repeat: no-repeat; background-size: 100% .32em; background-position: 0 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.single .entry-content h2 .sa-hx-hl,
.single .ast-related-posts-title .sa-hx-hl,
.single #reply-title.comment-reply-title .sa-hx-hl { background-image: linear-gradient(#F5E3B5, #F5E3B5); }

/* ==========================================================================
   3. Unification typographique et chromatique
   ========================================================================== */
/* Titres : encre + terra (H2 = seule couleur d'accent) */
.single .entry-content h2 { color: #B85832; }
.single .entry-content h3, .single .entry-content h4 { color: #42413E; }
/* FAQ : questions et chevrons suivent la palette */
.single .sa-faq .sa-faq-q { color: #42413E; }
.single .sa-faq .sa-faq-icon { border-right-color: #B85832; border-bottom-color: #B85832; }
.single .sa-faq .sa-faq-q:focus-visible { outline-color: #B85832; }
/* Tableaux chauds */
.single .entry-content figure.wp-block-table { border: 1px solid #EFE7D3; border-radius: 12px; }
.single .entry-content figure.wp-block-table table th, .single .entry-content figure.wp-block-table table td { border-color: #F0E9DA !important; }
.single .entry-content figure.wp-block-table table thead { border-bottom: 2px solid #E7DCC2; }
.single .entry-content figure.wp-block-table table tfoot { border-top: 2px solid #E7DCC2; }
.single .entry-content figure.wp-block-table table thead th, .single .entry-content figure.wp-block-table table thead td { background: #FAF6EC !important; color: #42413E !important; }
.single .entry-content figure.wp-block-table.is-style-stripes table tr:nth-child(odd) { background: #FDFBF6 !important; }
.single .entry-content figure.wp-block-table table tbody tr:hover td { background: #FAF6EC !important; }
/* Images du corps unifiées */
.single .entry-content figure.wp-block-image, .single .entry-content figure.wp-block-image img { border-radius: 14px; }
/* Liens du texte : terra */
.single .ast-article-single .entry-content a:not(.wp-block-button__link):not(.sa-rel-cat):not(.ast-related-post-link) { color: #B85832; text-decoration-color: #E4C3AE; }
.single .ast-article-single .entry-content a:not(.wp-block-button__link):not(.sa-rel-cat):not(.ast-related-post-link):hover { color: #D36D4C; }

/* ==========================================================================
   4. Titres de sections basses = style H2 du corps ; bas de page unifié
   ========================================================================== */
.single .ast-related-posts-title, .single .comments-title, .single #reply-title.comment-reply-title {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.3;
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: #B85832; width: auto;
}
/* Navigation précédent/suivant */
.single .post-navigation .nav-links a { color: #B85832; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; }
.single .post-navigation .nav-links a:hover { color: #D36D4C; }
/* Formulaire de commentaire */
.single .comment-respond input[type="text"], .single .comment-respond input[type="email"], .single .comment-respond input[type="url"], .single .comment-respond textarea { background: #fff !important; border: 1px solid #E7DCC2 !important; border-radius: 10px !important; color: #42413E !important; }
.single .comment-respond input[type="text"]:focus, .single .comment-respond input[type="email"]:focus, .single .comment-respond input[type="url"]:focus, .single .comment-respond textarea:focus { border-color: #D36D4C !important; box-shadow: 0 0 0 3px rgba(211, 109, 76, .12) !important; outline: none; }
.single .comment-respond .form-submit .submit, .single #submit.submit { background: linear-gradient(120deg, #D17F26 0%, #C96438 55%, #B85832 100%) !important; color: #fff !important; border: none !important; border-radius: 999px !important; font-family: 'Poppins', sans-serif; font-weight: 600; padding: 13px 28px !important; transition: filter .2s, transform .2s; }
.single .comment-respond .form-submit .submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.single .comment-form-cookies-consent label { color: #6E665B; font-size: 14px; }
.single .comment-respond input[type="checkbox"] { accent-color: #B85832; }

/* ==========================================================================
   5. Correctif mobile (bug du live, indépendant de la passe)
   Les .ast-row du formulaire de commentaire ont des marges négatives Astra
   (−20px) sans padding compensateur sur .comment-form → 12px de débordement
   horizontal ≤921px.
   ========================================================================== */
@media (max-width: 921px) {
  .comments-area .comment-form .ast-row { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
}