/* ============================================================
   article-single.css — Refonte des pages articles Signal Alpha
   CSS DE PRODUCTION (aplati, choix finaux validés sur la maquette
   « Pages Article (Refonte).html »).

   PRINCIPE : s'additionne au CSS existant du site. AUCUNE modification
   du HTML des articles (pas de re-publication, pas de ré-indexation).
   Chargé uniquement sur les articles (is_single) via l'enqueue de
   functions-article.php, avec article-smart-sticky.js.

   Palette : terra #B85832 / #D36D4C · ambre #D17F26 · label #A6621C ·
   encre #42413E · encre douce #6E665B · crème #FCF9F2 · carte #FFFEFB ·
   pétrole #3A798F · méta #A6906F · compteur #B49B72

   ------------------------------------------------------------
   DÉVIATIONS vs handoff (audit adversarial 2026-07-04) :
   [D1] Ligne « Dernière mise à jour » re-scopée sur p.sa-updated-line
        (classe injectée par le filtre the_content de sa-articles.php).
        Le sélecteur structurel du handoff (figure:first-child + p) aurait
        stylé le paragraphe d'intro des 197/304 articles SANS ligne de date.
   [D2] ≤921px : aside.widget_custom_html (bloc Catégories) masqué —
        le CSS existant ne masque que .sa-categories (l'intérieur), le
        ::before « Catégories » aurait créé une carte-titre orpheline
        (boîte blanche vide préexistante incluse) sur mobile.
   [D3] Déclarations sciemment perdantes (parité maquette — NE PAS « corriger ») :
        - padding des cartes sidebar : Astra
          .ast-separate-container.ast-two-container #secondary .widget
          (spécificité 1,3,0, inline head) gagne (2em) — la maquette validée
          reflète cette défaite. Le BACKGROUND, lui, est passé en !important
          le 2026-07-04 (rev. Henri : cartes = crème #FFFEFB du sommaire).
        - letter-spacing du label persona : le CSS Customizer
          (.04em !important) gagne sur le .1em ci-dessous — idem.
   [D4] Sélecteur hover mort (ancêtre/descendant inversés) conservé §4 —
        sans effet, le fallback et le CSS existant convergent (#D36D4C).
   Déployé dans wp-content/uploads/sa-articles/ par scripts/deploy_articles.sh,
   chargé en wp_head prio 105 (APRÈS #wp-custom-css) par sa-articles.php.
   ============================================================ */

/* ---------- 1. Ouverture de l'article ---------- */

/* Alignement : fil d'Ariane au niveau de la barre orange du sommaire */
#primary article.ast-article-single { margin-top: -23px; }
.ast-article-single .entry-header { margin-bottom: 22px; }

/* Featured image = 1re figure de l'entry-content : hauteur plafonnée.
   Si un article ne commence pas par une figure, la règle est sans effet. */
.single .ast-article-single .entry-content > figure.wp-block-image:first-child {
  margin: 0 0 20px;
}
/* [Rev. Henri 2026-07-04] ratio fixe 1.84 (= cartes catégories/similaires)
   au lieu du plafond 400px — le plafond donnait 903×400 (ratio 2.26),
   jugé trop plat. 903px → ~491px de haut. */
.single .ast-article-single .entry-content > figure.wp-block-image:first-child img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.84 / 1;
  object-fit: cover;
  object-position: center 38%;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(178, 88, 18, .07);
}

/* [D1] Ligne « Mis à jour … » : capitales Poppins ambre entre l'image et
   l'intro. Scopée sur .sa-updated-line — classe injectée à l'affichage par
   le filtre the_content de sa-articles.php UNIQUEMENT sur le paragraphe
   <em>Mis à jour <mois> <année>.</em> (107/304 articles). Les articles sans
   ligne de date ne reçoivent AUCUN style ici (dégradation correcte). */
.single .ast-article-single .entry-content p.sa-updated-line {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C9861F;
  margin: 0 0 20px;
}
.single .ast-article-single .entry-content p.sa-updated-line em { font-style: normal; }

/* ---------- 2. Sommaire (.sa-toc) — carte crème + ligne accent ---------- */
/* La largeur de colonne (328px @1440) n'est pas modifiée. */

.single .sa-toc {
  background: #FFFEFB;
  border: none;
  border-radius: 16px;
  padding: 26px 30px;
  box-shadow: 0 4px 18px rgba(178, 88, 18, .07);
}
.single .sa-toc::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #D36D4C;
  border-radius: 2px;
  margin-bottom: 14px;
}
.single .sa-toc-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A6621C;
}
.single .sa-toc-toggle::after { color: #B49B72; font-size: 10px; }
.single .sa-toc-body { margin-top: 14px; }
.single .sa-toc-list > li { padding: 6px 0; }
.single .sa-toc-list > li > a {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #42413E;
  line-height: 1.42;
}
.single .sa-toc-sublist { padding-left: 14px; margin: 4px 0 2px; border-left: 2px solid rgba(184, 88, 50, .14); }
.single .sa-toc-sublist li { padding: 3.5px 0; }
.single .sa-toc-sublist a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: #6E665B;
}
.single .sa-toc-list a:hover { color: #B85832; }

/* Colonne qui suit la lecture. Base : calée sous le header ; si la colonne
   est plus haute que l'écran, article-smart-sticky.js ajuste `top` pour
   qu'elle défile avec la page et se cale sur sa FIN. */
.single #secondary .sidebar-main {
  position: sticky;
  top: 90px !important;
}

/* Barre de défilement de la colonne sommaire : teinte terra assortie
   aux autres filets verticaux (au lieu du gris par défaut) */
.single #secondary .sidebar-main,
.single #secondary .sa-toc,
.single #secondary .sa-toc-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 88, 50, .28) transparent;
}
.single #secondary .sidebar-main::-webkit-scrollbar,
.single #secondary .sa-toc::-webkit-scrollbar,
.single #secondary .sa-toc-body::-webkit-scrollbar { width: 8px; }
.single #secondary .sidebar-main::-webkit-scrollbar-thumb,
.single #secondary .sa-toc::-webkit-scrollbar-thumb,
.single #secondary .sa-toc-body::-webkit-scrollbar-thumb { background: rgba(184, 88, 50, .28); border-radius: 4px; }
.single #secondary .sidebar-main::-webkit-scrollbar-track,
.single #secondary .sa-toc::-webkit-scrollbar-track,
.single #secondary .sa-toc-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. Encadrés « Note de … » (.sa-persona-note) ----------
   Styles inline dans le markup → overrides !important obligatoires.
   Base = design « pétrole » validé ; Tom garde sa palette ambre. */

.single .sa-persona-note {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F9FA 0%, #EAF2F4 100%) !important;
  border-left: 4px solid #3A798F !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin: 28px 0 !important;
  box-shadow: 0 4px 18px rgba(58, 121, 143, .1);
}
.single .sa-persona-note::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 110px;
  line-height: 1;
  color: rgba(58, 121, 143, .14);
  pointer-events: none;
}
.single .sa-persona-note .sa-persona-label {
  display: inline-flex !important;
  align-items: center;
  background: rgba(58, 121, 143, .12);
  color: #2F6A80 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px !important;
  border-radius: 999px;
  margin-bottom: 10px !important;
}
.single .sa-persona-note p:not(.sa-persona-label) {
  font-size: 15.5px;
  color: #4E5B60;
  line-height: 1.62;
}
.single .sa-persona-note p:not(.sa-persona-label) em { font-style: normal; }

/* Tom = même design, palette chaude (toute autre persona future = pétrole) */
.single .sa-persona-note.sa-persona-tom {
  background: linear-gradient(135deg, #FDF7EC 0%, #F8EFDD 100%) !important;
  border-left-color: #D17F26 !important;
  box-shadow: 0 4px 18px rgba(209, 127, 38, .12);
}
.single .sa-persona-note.sa-persona-tom::before { color: rgba(209, 127, 38, .16); }
.single .sa-persona-note.sa-persona-tom .sa-persona-label {
  background: rgba(209, 127, 38, .14);
  color: #A6621C !important;
}
.single .sa-persona-note.sa-persona-tom p:not(.sa-persona-label) { color: #6E5B44; }

/* ---------- 3b. Widgets de colonne : les VRAIS widgets du site ---------- */

/* Carte commune (partage + catégories).
   [Rev. Henri 2026-07-04] background en !important : sans lui, Astra
   .ast-separate-container.ast-two-container #secondary .widget (spécificité
   1,3,0, inline head) impose #fff — les cartes ressortaient blanches à côté
   du sommaire crème #FFFEFB. Le padding 2em d'Astra reste volontairement
   gagnant (look validé, cf. [D3]). */
.single .sidebar-main .widget_a2a_share_save_widget,
.single .sidebar-main aside.widget_custom_html {
  background: #FFFEFB !important;
  border-radius: 16px;
  padding: 22px 26px;
  margin-top: 22px;
  box-shadow: 0 4px 18px rgba(178, 88, 18, .07);
}
.single .sidebar-main .widget_a2a_share_save_widget::before { content: "Partager cet article"; }
.single .sidebar-main aside.widget_custom_html::before { content: "Catégories"; }
.single .sidebar-main .widget_a2a_share_save_widget::before,
.single .sidebar-main aside.widget_custom_html::before {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A6621C;
  margin: 0 0 12px;
}
/* Titre natif du widget éventuel → masqué (le ::before fait office de titre) */
.single .sidebar-main .widget_a2a_share_save_widget .widget-title,
.single .sidebar-main aside.widget_custom_html .widget-title { display: none; }

/* Partage : pastilles terracotta unifiées (écrase les couleurs réseaux) */
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left !important;
}
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit a { display: inline-flex; margin: 0; }
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit .a2a_svg {
  background: rgba(184, 88, 50, .1) !important;
  border-radius: 12px !important;
  transition: background .15s, transform .2s;
}
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit .a2a_svg svg path { fill: #B85832 !important; }
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit a:hover .a2a_svg { background: #B85832 !important; transform: translateY(-2px); }
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit a:hover .a2a_svg svg path { fill: #fff !important; }
/* Libellés texte éventuels du plugin → masqués, pastilles seules */
.single .sidebar-main .widget_a2a_share_save_widget .a2a_kit a .a2a_label { display: none; }

/* Catégories : liste éditoriale (écrase les filets gris du site) */
.single .sa-categories ul li { padding: 8px 0 !important; border-bottom: 1px solid #F0E7D2 !important; }
.single .sa-categories ul li:last-child { border-bottom: none !important; }
.single .sa-categories ul li a {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  color: #42413E !important;
  transition: color .15s;
}
.single .sa-categories ul li a:hover { color: #B85832 !important; }
.single .sa-categories ul li span { font-family: 'Poppins', sans-serif; font-size: 12px !important; font-weight: 600; color: #B49B72 !important; }

/* ---------- 4. « Articles similaires » : cartes = .cat-card ---------- */

.single .ast-single-related-posts-container {
  background: transparent;
  border-radius: 0;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.single .ast-related-posts-wrapper { gap: 22px; }

.single .ast-related-posts-inner-section {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFEFB !important;
  border: none;
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: 0 4px 18px rgba(178, 88, 18, .07) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.single .ast-related-posts-inner-section:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(178, 88, 18, .14) !important;
}
.single .ast-related-post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Image full-bleed en tête de carte (ratio 1.84 = pages catégories live) */
.single .ast-related-post-featured-section {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.single .ast-related-posts-inner-section .post-thumb-img-content {
  aspect-ratio: 1.84;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100%;
}
.single .ast-related-posts-inner-section .post-thumb-img-content a { display: block; width: 100%; height: 100%; border: none !important; border-radius: 0 !important; }
.single .ast-related-posts-inner-section .post-thumb-img-content picture { display: block; width: 100%; height: 100%; border-radius: 0 !important; }
.single .ast-related-posts-inner-section .post-thumb-img-content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .35s ease;
}
.single .ast-related-posts-inner-section:hover .post-thumb-img-content img { transform: scale(1.04); }

/* Header : chip de catégorie AU-DESSUS du titre (méta après le h3 dans le DOM) */
.single .ast-related-posts-inner-section .related-entry-header {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 22px 0;
}
.single h3.ast-related-post-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.38;
  margin: 0;
  padding: 0;
}
.single .ast-single-related-posts-container .related-entry-header .ast-related-post-title.entry-title a { color: #42413E !important; transition: color .15s; }
.single h3.ast-related-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.single .ast-related-posts-inner-section:hover .ast-single-related-posts-container .related-entry-header .ast-related-post-title.entry-title a,
.single .ast-related-posts-inner-section:hover h3.ast-related-post-title a { color: #D36D4C !important; }

/* Chip catégorie — mêmes métriques que .cat-tag (méta activée côté Astra) */
.single .ast-related-posts-inner-section .entry-meta:empty { display: none; }
.single .ast-related-posts-inner-section .entry-meta { margin: 0; }
.single .ast-related-posts-inner-section .entry-meta a {
  display: inline-flex;
  width: fit-content;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #A6621C !important;
  background: rgba(209, 127, 38, .12);
  border-radius: 999px;
  padding: 4px 12px;
  position: relative;
  z-index: 2;
}
.single .ast-related-posts-inner-section .entry-meta a:hover { color: #B85832 !important; }

/* Extrait — mêmes métriques que .cat-excerpt (2 lignes max) */
.single .ast-related-posts-inner-section .ast-related-post-content > .entry-content {
  margin: 0;
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.single p.ast-related-post-excerpt {
  font-size: 14.5px !important;
  color: #6E665B !important;
  line-height: 1.55 !important;
  margin: 11px 0 0 !important;
  padding: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date en pied de carte (émise par le filtre PHP) — mêmes métriques que .cat-meta */
.single .sa-rel-date {
  margin-top: auto;
  padding-top: 15px;
  font-size: 13.5px;
  color: #A6906F;
}

/* Pas de CTA sur les cartes catégories → masqué (carte entière cliquable) */
.single .ast-related-post-cta { display: none !important; }

/* ---------- 5. Bas de page : navigation + commentaires ---------- */

/* [Rev. Henri 2026-07-04] margin latéral 2.5em supprimé : la rangée de
   cartes s'aligne sur la colonne article (903px, bords 71→974 @1440). */
.single .post-navigation { border-top: none; margin: 0; padding: 64px 0 0; position: relative; overflow: visible !important; }
.single .post-navigation::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 2px;
  background: #EFE3CC;
  border-radius: 1px;
  margin: 0;
}
.single nav.post-navigation .nav-links {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  overflow: visible !important;
  padding-bottom: 14px;
  border: none;
}
.single nav.post-navigation .nav-links::before,
.single nav.post-navigation .nav-links::after,
.single nav.post-navigation .nav-previous::before,
.single nav.post-navigation .nav-previous::after,
.single nav.post-navigation .nav-next::before,
.single nav.post-navigation .nav-next::after { content: none !important; display: none !important; }
.single nav.post-navigation .nav-previous,
.single nav.post-navigation .nav-next {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
  justify-self: stretch !important;
}
.single nav.post-navigation .nav-links a {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden;
  background: #FFFEFB;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 18px rgba(178, 88, 18, .07);
  transition: transform .2s, box-shadow .2s;
}
.single nav.post-navigation .nav-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(178, 88, 18, .13);
}
.single .post-navigation .ast-post-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A6621C;
}
.single .post-navigation .ast-post-nav svg { width: 13px; height: 13px; fill: #D36D4C; }
.single nav.post-navigation .nav-links a p {
  margin: 0;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #42413E;
  transition: color .15s;
}
.single nav.post-navigation .nav-links a:hover p { color: #D36D4C; }
.single .post-navigation .nav-next a { align-items: flex-end; text-align: right; }
/* [Fix audit 2026-07-04] Astra place .nav-next en grid-column:2 — sans le
   reset ci-dessous, une 2e colonne IMPLICITE subsiste ≤700px malgré le
   template 1 colonne (constaté au probe computed-style). */
@media (max-width: 700px) {
  .single nav.post-navigation .nav-links { grid-template-columns: minmax(0, 1fr) !important; }
  .single nav.post-navigation .nav-previous,
  .single nav.post-navigation .nav-next { grid-column: auto !important; }
}

/* Commentaires */
/* [Rev. Henri 2026-07-04] paddings latéraux 2.5em supprimés : le bloc
   commentaires s'aligne sur la colonne article (903px), comme la nav. */
.single #comments.comments-area { margin-top: 44px; padding-left: 0 !important; padding-right: 0 !important; }
#comments .comment-respond { padding: 0 !important; margin: 0 !important; }
#comments .comments-title { padding-left: 0 !important; padding-right: 0 !important; }
#reply-title.comment-reply-title {
  font-size: 26px;
  font-weight: 700;
  background-image: linear-gradient(90deg, #D36D4C 0%, #3A798F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.comments-area .comment-notes { font-size: 15px; color: #6E665B; }
.comments-area .required { color: #B85832; }
.comments-area textarea#comment,
.comments-area .ast-comment-formwrap input[type="text"] {
  background: #FFFEFB;
  border: 1px solid #EADCBF;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #42413E;
  transition: border-color .15s, box-shadow .15s;
}
.comments-area textarea#comment { height: 180px; min-height: 140px; }
.comments-area textarea#comment::placeholder,
.comments-area .ast-comment-formwrap input[type="text"]::placeholder { color: #B9AD97; }
.comments-area textarea#comment:focus,
.comments-area .ast-comment-formwrap input[type="text"]:focus {
  border-color: #D36D4C !important;
  box-shadow: 0 0 0 3px rgba(211, 109, 76, .12) !important;
  outline: none;
}
.comments-area .ast-comment-formwrap { flex-wrap: wrap; row-gap: 14px; align-items: center; }
.comments-area .comment-form-author,
.comments-area .comment-form-email { flex: 1 1 180px; min-width: 160px; width: auto !important; margin: 0; }
.comments-area .comment-form-author input,
.comments-area .comment-form-email input { width: 100%; }
.comments-area .comment-form-cookies-consent { flex: 1 1 260px; min-width: 220px; margin: 0; display: flex; align-items: flex-start; gap: 9px; }
.comment-form-cookies-consent input[type="checkbox"] { accent-color: #B85832; margin-top: 4px; }
.comment-form-cookies-consent label { font-size: 14px; color: #6E665B !important; line-height: 1.5; }
.comments-area .form-submit { flex: 0 0 auto; margin: 0 0 0 auto; }
#ast-commentform #submit.submit {
  background: #B85832;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
#ast-commentform #submit.submit:hover { background: #D36D4C; transform: translateY(-1px); }

/* ---------- 6. Responsive ---------- */
@media (max-width: 921px) {
  /* Mobile : ratio naturel (non recadré), plafonné 300px */
  .single .ast-article-single .entry-content > figure.wp-block-image:first-child img { aspect-ratio: auto; max-height: 300px; border-radius: 14px; }
  /* [D2] Le CSS existant ne masque que .sa-toc et .sa-categories (les
     intérieurs). Sans cette règle, l'aside Catégories resterait une boîte
     blanche vide surmontée du titre ::before « Catégories » sur mobile. */
  .single .sidebar-main aside.widget_custom_html { display: none; }
  /* [Rev. Henri 2026-07-04 mobile] gap comment-form → carte Partager ramené
     de ~146px à ~60px (paddings/margins Astra empilés au stacking ≤921px ;
     le margin-top 22px de la carte a2a se dé-collapse et fournit le reste). */
  .single #primary { padding-bottom: 8px; }
  .single #secondary { margin-top: 0; }
}

/* Astra passe .ast-comment-formwrap en inline-block (grille flottée,
   row-gap inopérant) SOUS 545px ; de 545 à 921px le row-gap:14px du §5
   espace déjà le bouton. Un margin-top ≤921px désalignerait la rangée
   partagée consentement+bouton (600–699px) — vérifié en prototype live. */
@media (max-width: 544px) {
  .comments-area .form-submit { margin-top: 14px; }
}