/* a11y-contraste.css (damien-hernandez.com, 20/10/2026)
   Corrections d'accessibilité transverses, chargées sur tout le site par le
   mu-plugin dh-a11y.php, après les feuilles du thème.

   Pourquoi une feuille à part : les sections dh-agences, dh-cases, dh-plan,
   dh-choose, dh-tools, dh-links... sont écrites dans des <style> répétés dans le
   contenu d'une trentaine de pages (agence-seo-*, audit-seo-*, *-strasbourg).
   Elles atténuaient le texte secondaire par `opacity` (.7 à .9), ce qui faisait
   tomber le contraste entre 2,6:1 et 4,4:1. LiteSpeed fusionne ces <style> dans
   la feuille combinée : seul un sélecteur plus spécifique (préfixe `body`)
   l'emporte de façon fiable, sans `!important`.

   Contrastes calculés (contraste.py), puis vérifiés au rendu (Lighthouse) :
   - texte secondaire --text-secondary #6b7280 -> #626976 : 5,01:1 sur #f2f4f7,
     5,03:1 sur #eef6f4, 5,52:1 sur blanc (était 4,38 / 4,40 / 4,83).
   - méta du pack local #7a8694 -> #56606d : 5,81:1 sur #eef6f4.
   - bouton dh-agences__alt-cta fond #0284c7 -> #0369a1 : 5,93:1 en blanc.
*/

/* 1. Variable de texte secondaire du thème enfant (style.css) : un cran plus
      sombre, pour passer 4,5:1 sur les fonds gris clair des colonnes et du fil
      d'Ariane. `html:root` (0,1,1) bat `:root` (0,1,0) de style.css. */
html:root { --text-secondary: #626976; }
@media (prefers-contrast: high) {
  html:root { --text-secondary: #333333; }
}

/* 2. Texte secondaire atténué par opacité dans les sections du contenu.
      On rend l'opacité à 1 : la couleur héritée (gris secondaire) suffit à
      garder la hiérarchie visuelle. */
body .dh-agences__kicker,
body .dh-agences__intro,
body .dh-agences__alt-kicker,
body .dh-cases__kicker,
body .dh-cases__intro,
body .dh-case__note,
body .dh-metric__label,
body .dh-detail__dt,
body .dh-reviews__kicker,
body .dh-tools__kicker,
body .dh-tool__name,
body .dh-tools__more,
body .dh-links__intro,
body .dh-link__desc,
body .dh-choose__intro,
body .dh-choose__note,
body .dh-plan__intro,
body .dh-plan__note,
body .dh-plan__deliverables-title,
body .dh-plan__deliverables li,
body .dh-appreciate__note,
body .dh-choice-subtitle,
body .dh-choice-note,
body .dh-choice-footer-text,
body .dh-diag__kicker,
body .dh-diag__intro {
  opacity: 1;
}

body .dh-agences__alt-cta { background: #0369a1; }

/* 3. Pages consultant-seo-local-* : méta du pack local (déclarée en
      !important dans le CSS du gabarit, d'où le !important ici). */
body .local-pack .local-pack-meta { color: #56606d !important; }

/* 4. Fiches codes HTTP : paragraphes .muted et .section-lead atténués par
      opacité dans le contenu, qui délavaient les <code> rouges et les liens. */
:is(body.dh-http-article, body .dh-http-article) .muted,
:is(body.dh-http-article, body .dh-http-article) .section-lead { opacity: 1; }
:is(body.dh-http-article, body .dh-http-article) .muted { color: #4a4f58; }

/* 5. Tableau comparatif (seo-vs-sem) : la variable --primary-color n'existe
      pas sur la page, l'en-tête blanc tombait sur fond blanc (1,04:1). */
body .comparison-table thead th { background: var(--ink, #101a1c); color: #fff; }

/* 6. Cible tactile des blocs Détails (FAQ) : 23,6 à 23,8 px au lieu de 24. */
body .entry-content details.wp-block-details > summary { min-height: 28px; }

/* 7. Ordre des titres : des h4 posés directement sous un h2 (colonnes des
      pages agence-seo-*, *-strasbourg...) ont été promus en h3 dans le
      contenu, avec la classe dh-h4. Cette règle leur rend l'aspect d'un h4
      (mêmes valeurs que `.content-area h4` du thème enfant). */
body .content-area h3.dh-h4 {
  font-size: var(--font-size-lg);
  line-height: 1.5em;
  font-weight: 600;
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}
@media (max-width: 768px) {
  body .content-area h3.dh-h4 { font-size: var(--font-size-base); }
}

/* 8. Fiches codes HTTP (200, 301, 302) : les titres des étapes de la liste
      numérotée étaient des h4 directement sous un h2. Promus en h3 avec la
      classe numbered-list__title ; valeurs relevées au rendu sur l'ancien h4. */
:is(body.dh-http-article, body .dh-http-article) .numbered-list__content h3.numbered-list__title {
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1f2937;
}

/* 9. Ordre des titres, 20/10/2026 (balayage axe-core, 6 articles) : titres promus d'un niveau dans le contenu,
      aspect d'origine rendu par une classe. Valeurs de .art-corps h3 / h4 (article.css), vérifiées au rendu. */
.art-corps h2.dh-aspect-h3 {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.26;
  letter-spacing: -.01em; margin: 34px 0 0;
}
.art-corps h2.dh-aspect-h4, .art-corps h3.dh-aspect-h4 {
  font-family: Nunito, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.5;
  letter-spacing: normal; margin: 26px 0 0;
}
/* Bloc « Articles similaires » de l'extension de maillage, promu h2 / h3 quand l'article n'a aucun h2 (dh-a11y.php). */
.art-corps h2.aisil-related-heading {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.26;
  letter-spacing: -.01em; margin: 34px 0 0;
}
.art-corps h3.aisil-related-post-title {
  font-family: Nunito, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3;
  letter-spacing: normal; margin: 26px 0 0;
}
@media (max-width: 900px) {
  .art-corps h2.dh-aspect-h3, .art-corps h2.aisil-related-heading { font-size: 20px; }
}

/* 10. Bouton d'appel des fiches du lexique enveloppé dans un <p> par wpautop : `.lex .lex-cta p a` (0,2,2) le
       repeignait en menthe sur sarcelle, 1,56:1 (inspection-url, algorithme-de-classement, google-lens, dom). */
.lex .lex-cta p a.lex-cta-btn, .lex .lex-cta p a.lex-cta-btn:hover { color: #06231D; }

/* 11. Tableau de /lexique-seo/autorite-de-domaine/ (td-has-header, 20/10/2026) : la première colonne passe en
       <th scope="row"> et la case d'angle vide en <td>. Ces règles leur rendent l'aspect d'avant, relevé au
       rendu : cellule de première colonne (IBM Plex Sans 14,5 px, 500, encre) et en-tête gris de la case d'angle. */
.lex .lex-table tbody th[scope="row"] {
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  text-transform: none; letter-spacing: normal; line-height: 1.7; vertical-align: top;
}
.lex .lex-table thead td:first-child { background: rgb(243, 244, 246); }