/* ============================================================
   LADB : Blog (article single + archive categorie)
   Habillage CSS uniquement du gabarit Blocksy natif.
   Aucun template PHP ne remplace single.php / category.php,
   on stylise par dessus le rendu du theme parent.
   Charge uniquement sur is_singular('post') / is_category('blog')
   (voir functions.php).
   Les couleurs de texte et de titre du corps d'article
   (.entry-content, .page-title) restent gerees par le bloc
   existant de global.css (sitewide, sert aussi aux pages legales
   et au guide pilier) : ce fichier n'y touche pas.
   ============================================================ */

/* -----------------------------------------------------------
   1. ARTICLE SINGLE : confort de lecture
   ----------------------------------------------------------- */
.entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content p,
.entry-content li {
  line-height: 1.75;
}
.entry-content h2 { margin: 40px 0 16px; }
.entry-content h3,
.entry-content h4 { margin: 32px 0 12px; }

/* -----------------------------------------------------------
   2. HERO BAND (titre article + titre archive "Blog")
   ----------------------------------------------------------- */
.hero-section {
  background: var(--bg);
}

/* -----------------------------------------------------------
   3. ARCHIVE /category/blog/ : cartes claires "magazine"
   Fond cream sur le fond bleu nuit de la page. Texte sombre
   (tokens --fg-onlight / --fg-onlight-mute) pour la lisibilite.
   ----------------------------------------------------------- */
.entries {
  background: transparent;
}

.entry-card {
  background: var(--cream);
  border: 1px solid var(--border-onlight);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.entry-card:hover {
  border-color: var(--copper-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Vignette uniforme : meme ratio et meme recadrage pour toutes les images */
.entry-card .ct-media-container {
  aspect-ratio: 16/10;
  overflow: hidden;
  display: block;
}
.entry-card .ct-media-container img {
  aspect-ratio: 16/10 !important;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

/* Titre de carte : sombre par defaut (priorite lisibilite), accent cuivre au survol */
.entry-card .entry-title {
  font-family: var(--font-display);
  color: var(--fg-onlight);
}
.entry-card .entry-title a {
  color: var(--fg-onlight) !important;
}
.entry-card .entry-title a:hover {
  color: var(--copper) !important;
}

.entry-card .entry-excerpt {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--fg-onlight-mute);
}

.entry-card .entry-meta {
  font-family: var(--font-body);
  color: var(--fg-onlight-mute);
}
.entry-card .entry-meta a {
  color: var(--copper) !important;
}
.entry-card .entry-meta a:hover {
  color: var(--copper-deep) !important;
}

/* -----------------------------------------------------------
   4. ARTICLE SINGLE : meta auteur / date / categorie
   Meme composant que la carte archive (.entry-meta) mais ici
   sur fond sombre : scope via la classe body native de WP.
   ----------------------------------------------------------- */
body.single-post .entry-meta {
  font-family: var(--font-body);
  color: var(--fg-mute);
}
body.single-post .entry-meta a {
  color: var(--copper-light) !important;
}
body.single-post .entry-meta a:hover {
  color: var(--copper) !important;
}

/* -----------------------------------------------------------
   5. BLOC COMMENTAIRE (bas d'article)
   Le bloc commentaire vit dans son propre conteneur independant
   (.ct-comments-container > .ct-container-narrow, injecte par
   blocksy_display_page_elements('separated') APRES le conteneur
   principal article+sidebar de single.php, donc HORS de la grille
   [data-sidebar] qui porte l'article et la sidebar cote a cote) : sa
   largeur/centrage par defaut (--theme-narrow-container-max-width,
   ~750px, centre sur toute la largeur de page) n'a donc structurellement
   aucun rapport avec la colonne de contenu de l'article.
   Plutot que de lui donner une largeur fixe arbitraire (qui ne
   correspondrait a la colonne de contenu que par coincidence, a une
   seule taille d'ecran), on reproduit ICI la meme formule de grille que
   Blocksy utilise pour [data-sidebar=right] (voir sidebar.min.css :
   grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%),
   actif a partir de 1000px de large ; en dessous, une seule colonne
   pleine largeur, comme la grille d'origine). --sidebar-width est la
   MEME variable deja fixee a 32% en section 9.0 : les deux grilles
   restent donc automatiquement synchronisees si cette valeur change.
   La colonne 1 obtenue a alors EXACTEMENT la meme largeur que celle de
   l'article ; on y reproduit ensuite le meme box-model que
   .entry-content (max-width 760px, centre par marges auto) pour un bord
   gauche identique a celui des paragraphes et du CTA.
   ----------------------------------------------------------- */
/* Aligner le bloc commentaire sur .entry-content (donc sur le CTA et les
   paragraphes). Contexte reel : .ct-comments-container est SORTI de
   .ct-container (c'est un frere, en pleine largeur du #main), alors que
   .entry-content vit dans la COLONNE DE CONTENU de .ct-container
   [data-sidebar=right] (grille contenu + sidebar) et s'y centre a 760px.
   Un simple centrage 760px du narrow (tentatives precedentes) tombait donc
   au centre de la page, pas sur la colonne de contenu : d'ou le decalage.
   Correctif : on redonne d'abord a .ct-comments-container le MEME cadre que
   .ct-container (max-width 1290px = --theme-normal-container-max-width,
   centre par marges auto), puis on REPLIQUE A L'IDENTIQUE la regle de grille
   Blocksy [data-sidebar=right] (static/bundle/sidebar.min.css) :
     grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%);
     grid-column-gap: var(--sidebar-gap, 4%);
   Memes variables et memes fallbacks (27% / 4%) que le theme : la colonne 1
   fait donc exactement la meme largeur que la colonne de contenu de
   l'article, quel que soit le reglage. Le narrow 760px, centre dans la
   colonne 1, se cale alors sur la meme colonne que .entry-content : bord
   gauche identique. Deux details Blocksy indispensables : (1) la gouttiere
   de grille est 4% (var --sidebar-gap), pas 60px ; (2) .ct-container n'est
   pas large de 1290px mais de width:var(--theme-container-width) =
   min(100%, 90vw) capee a 1290px, et .ct-comments-container n'herite PAS de
   cette width (le selecteur .ct-container,.ct-container-narrow ne le cible
   pas) : sans la ligne width ci-dessous, il etait plus large que l'article
   donc decale. Sous le palier sidebar (<1000px, lg Blocksy), la grille
   repasse a une colonne : on fait de meme. */
.ct-comments-container {
  width: var(--theme-container-width);
  max-width: var(--theme-normal-container-max-width, 1290px);
  /* .ct-container (article) n'a AUCUN padding horizontal (verifie dans tous
     les bundles Blocksy + le CSS inline critique) : son retrait des bords
     vient de width:min(100%,90vw) + margin:auto, pas d'un padding. On force
     donc padding-inline:0 ici pour matcher exactement .ct-container et neutraliser
     tout padding lateral que Blocksy poserait par defaut sur ce conteneur. */
  padding-inline: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%);
  grid-column-gap: var(--sidebar-gap, 4%);
}
@media (max-width: 999px) {
  .ct-comments-container {
    grid-template-columns: 100%;
    column-gap: 0;
  }
}
.ct-comments-container .ct-container-narrow {
  grid-column: 1;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.ct-comments-title {
  font-family: var(--font-display);
  color: var(--cream) !important;
}
.ct-comments .ct-comment-author {
  color: var(--cream) !important;
  font-family: var(--font-display);
}
.ct-comments .comment-content,
.ct-comments .comment-content p {
  color: var(--fg-soft);
}

.ct-comments .comment-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ct-comments .comment-form label {
  color: var(--fg-mute);
}
.ct-comments .comment-form input[type="text"],
.ct-comments .comment-form input[type="email"],
.ct-comments .comment-form input[type="url"],
.ct-comments .comment-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-soft);
  padding: 12px 14px;
}
.ct-comments .comment-form input[type="text"]:focus,
.ct-comments .comment-form input[type="email"]:focus,
.ct-comments .comment-form input[type="url"]:focus,
.ct-comments .comment-form textarea:focus {
  border-color: var(--copper-light);
  outline: none;
}

.ct-comments .form-submit input[type="submit"],
.ct-comments .form-submit button[type="submit"],
.ct-comments #submit {
  background: var(--copper);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 13px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.ct-comments .form-submit input[type="submit"]:hover,
.ct-comments .form-submit button[type="submit"]:hover,
.ct-comments #submit:hover {
  background: var(--copper-deep);
}

/* Contraste texte / liens : "Connexion en tant que...", notes du
   formulaire. Le titre "Laisser un commentaire" est retire cote PHP
   (comment_form_defaults, voir functions.php) : plus fiable qu'un
   display:none CSS dont on ne connait pas le markup exact genere par
   Blocksy. Le lien "annuler la reponse" reste dans le DOM (le JS core
   en a besoin) : on le masque ici via son id, stable dans WP core. */
.ct-comments .comment-notes,
.ct-comments .logged-in-as,
.ct-comments .comment-form > p {
  color: var(--fg-mute);
}
.ct-comments .logged-in-as a {
  color: var(--copper-light) !important;
}
.ct-comments .logged-in-as a:hover {
  color: var(--copper) !important;
}
#cancel-comment-reply-link {
  display: none;
}

/* Le H2 ".comment-reply-title" reste dans le DOM (Blocksy le genere
   toujours autour du lien "annuler la reponse", meme si son texte est
   vide via comment_form_defaults) : on le masque proprement en CSS. */
.comment-reply-title {
  display: none;
}

/* -----------------------------------------------------------
   6. CTA CONVERSION FIN D'ARTICLE
   Insere par functions.php (hook the_content) apres CHAQUE
   article, y compris les anciens articles plomberie/chauffage :
   objectif = rediriger ce trafic historique vers les 3 metiers
   actifs (vitrerie / serrurerie / miroiterie).
   --ladb-cta-ivory : ni --cream (#FAF8F4) ni --ivory (#FBFAF7), tous
   deux existants dans global.css, ne rendent la nuance ivoire chaude
   voulue ici (les deux sont proches du blanc). Token dedie a ce bloc
   plutot qu'un hexa repete/perdu dans les regles ci-dessous : une
   seule declaration a modifier si la teinte doit evoluer.
   ----------------------------------------------------------- */
.ladb-blog-cta {
  --ladb-cta-ivory: #F4ECDC;
  max-width: 760px;
  margin: 56px 0 0;
  padding: 32px;
  background: var(--ladb-cta-ivory);
  border: 2px solid var(--copper-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* Titre : FIX CRITIQUE. Ce titre est un <p>, donc il herite de
   `.entry-content p { color:#E7E3DB }` (global.css, specificite 0,0,1,1),
   couleur claire quasi blanche => invisible sur l'ivoire. On reprend la
   main en scopant sous .ladb-blog-cta (0,0,2,0), sans !important, et on
   force le bleu nuit (#0B1A33) + Bricolage Grotesque 700. */
.ladb-blog-cta .ladb-blog-cta__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--blue-stellaire);
}

.ladb-blog-cta__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

/* Chips metiers. Selecteur scope (0,0,2,0) pour battre
   `.entry-content a { color:#E1AA6E; text-decoration:underline }`
   (0,0,1,1) et retirer le soulignement herite. */
.ladb-blog-cta .ladb-blog-cta__service-link {
  display: inline-block;
  padding: 12px 24px;
  border: 1.5px solid var(--copper);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--copper-deep);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.ladb-blog-cta .ladb-blog-cta__service-link:hover {
  background: var(--copper);
  color: var(--cream);
}

.ladb-blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Bouton devis. Scope (0,0,2,0) : texte creme sur fond cuivre (sinon
   `.entry-content a` le repasserait en cuivre souligne). */
.ladb-blog-cta .ladb-blog-cta__quote {
  display: inline-block;
  padding: 14px 28px;
  background: var(--copper);
  color: var(--cream);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.ladb-blog-cta .ladb-blog-cta__quote:hover {
  background: var(--copper-deep);
}

/* Tel. Scope (0,0,2,0) : cuivre profond, sans soulignement. */
.ladb-blog-cta .ladb-blog-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--copper-deep);
  text-decoration: none;
}
.ladb-blog-cta .ladb-blog-cta__phone:hover {
  color: var(--copper);
}
.ladb-blog-cta__phone-icon {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ladb-blog-cta {
    padding: 24px 20px;
  }
  .ladb-blog-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .ladb-blog-cta__quote {
    width: 100%;
    text-align: center;
  }
}

/* -----------------------------------------------------------
   7. PAGINATION : recolorer en cuivre (bleu Blocksy par defaut)
   Le theme rend la pagination dans <nav class="ct-pagination">
   (voir blocksy_display_posts_pagination()), avec le markup core
   WordPress paginate_links() a l'interieur : chaque numero, le lien
   precedent et le lien suivant portent tous la classe ".page-numbers"
   (+ ".prev" / ".next" / ".current" selon le cas). !important
   necessaire : Blocksy applique ses couleurs via variables CSS a
   forte specificite, chargees dans une feuille de style dediee
   (ct-pagination-styles) dont l'ordre au chargement n'est pas garanti
   apres blog.css.
   ----------------------------------------------------------- */
.ct-pagination .page-numbers {
  border-color: var(--copper) !important;
  color: var(--copper) !important;
}
.ct-pagination .page-numbers:hover {
  border-color: var(--copper-deep) !important;
  color: var(--copper-deep) !important;
}
.ct-pagination .page-numbers.current {
  background: var(--copper) !important;
  border-color: var(--copper) !important;
  color: var(--cream) !important;
}

/* -----------------------------------------------------------
   8. AVATAR AUTEUR = FIOLE
   Support visuel des filtres pre_get_avatar / get_avatar_url
   (functions.php) : la fiole (logo-fiole.png, fond transparent) a
   besoin d'une plaque de fond pour rester lisible une fois recadree en
   cercle par le CSS natif de Blocksy, quel que soit le fond de la page
   sous-jacente. Fond sombre + liseret cuivre pour un effet badge
   coherent avec le reste de la charte.
   .ladb-avatar-logo cible le markup get_avatar() (liste de
   commentaires, "connecte en tant que"). .meta-author img cible la box
   auteur en haut d'article : Blocksy y genere un <img> sans classe
   dediee (voir blocksy_render_post_author_avatar()), on cible donc via
   le parent <li class="meta-author">.
   ----------------------------------------------------------- */
.ladb-avatar-logo,
.meta-author img {
  background: var(--bg-elevated);
  padding: 3px;
  border: 1px solid var(--border-copper);
  box-sizing: border-box;
}

/* -----------------------------------------------------------
   9. SIDEBAR ARTICLE : recherche + articles similaires + reassurance
   Tout est scope sous #sidebar (id stable du wrapper <aside> de
   Blocksy, voir Blocksy\Sidebar::render()) : les classes generiques
   Blocksy comme .ct-widget / .widget-title sont aussi utilisees par
   les zones de widgets du footer, presentes sur CHAQUE page (donc
   aussi sur les articles) ; sans ce scope, ces regles s'appliqueraient
   egalement au footer.
   ----------------------------------------------------------- */

/* 9.0 Largeur de la colonne laterale : +~18% vs les 27% par defaut
   Blocksy (Personnaliser > Disposition generale > Barre laterale).
   Reprend le mecanisme natif du theme (variable --sidebar-width
   consommee par [data-sidebar=right|left] dans sidebar.min.css, meme
   principe que ce que la case Customizer injecterait) plutot que de
   changer le reglage global correspondant : celui-ci s'appliquerait a
   TOUTES les pages avec sidebar (pages, produits...), alors que ce
   fichier ne charge que sur les articles / l'archive blog. */
[data-sidebar] {
  --sidebar-width: 32%;
  --sidebar-width-no-unit: 32;
}

/* 9.1 Carte generique commune a chaque widget (meme traitement que
   .ct-comments .comment-form plus haut : surface elevee sur fond
   sombre, coherence visuelle entre les blocs de la page). */
#sidebar .ct-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
#sidebar .ct-widget:last-child {
  margin-bottom: 0;
}
#sidebar .widget-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-copper);
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--cream);
}

/* 9.2 Recherche : recolore le champ + bouton (bleu Blocksy par defaut),
   sans toucher aux dimensions calculees par le theme. */
#sidebar .ct-search-form-inner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#sidebar .ct-search-form-inner:focus-within {
  border-color: var(--copper-light);
}
#sidebar .ct-search-form input[type="search"] {
  background: transparent;
  color: var(--fg-soft);
}
#sidebar .ct-search-form button[type="submit"] {
  background: var(--copper);
  color: var(--cream);
}
#sidebar .ct-search-form button[type="submit"]:hover {
  background: var(--copper-deep);
}

/* 9.3 Articles similaires (widget LADB_Similar_Posts, inc/sidebar-widgets.php) */
#sidebar .ladb-similar-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#sidebar .ladb-similar-posts__item {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
#sidebar .ladb-similar-posts__item:first-child {
  padding-top: 0;
  border-top: none;
}
#sidebar .ladb-similar-posts__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
#sidebar .ladb-similar-posts__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
}
#sidebar .ladb-similar-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#sidebar .ladb-similar-posts__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-soft);
  transition: color var(--dur) var(--ease-out);
}
#sidebar .ladb-similar-posts__link:hover .ladb-similar-posts__title {
  color: var(--copper-light);
}

/* 9.4 Reassurance (widget LADB_Reassurance, inc/sidebar-widgets.php) */
#sidebar .ladb-sidebar-reassurance__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#sidebar .ladb-sidebar-reassurance__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-soft);
}
#sidebar .ladb-sidebar-reassurance__icon {
  flex-shrink: 0;
  color: var(--copper);
}
#sidebar .ladb-sidebar-reassurance__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--copper-light);
  text-decoration: none;
}
#sidebar .ladb-sidebar-reassurance__phone:hover {
  color: var(--copper);
}
#sidebar .ladb-sidebar-reassurance__phone-icon {
  flex-shrink: 0;
}

/* -----------------------------------------------------------
   10. FIL D'ARIANE ARTICLE (Accueil > Blog > Article)
   Rendu par functions.php via \Blocksy\BreadcrumbsBuilder (hook
   blocksy:hero:custom_meta:before, juste apres le H1) : structure
   native Blocksy (nav.ct-breadcrumbs > a / span.last-item, separateurs
   .ct-separator), on ne fait que recolorer/redimensionner a la charte,
   sans toucher a la mise en page (deja geree par le conteneur hero
   natif).
   ----------------------------------------------------------- */
.ladb-blog-breadcrumbs {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
}
.ladb-blog-breadcrumbs a {
  color: var(--copper-light);
  text-decoration: none;
}
.ladb-blog-breadcrumbs a:hover {
  color: var(--copper);
}
.ladb-blog-breadcrumbs .last-item {
  color: var(--fg-mute);
}
.ladb-blog-breadcrumbs .ct-separator {
  width: 7px;
  height: 7px;
  margin: 0 6px;
  color: var(--fg-mute);
  opacity: 0.7;
}

/* =============================================================
   GOAL-50 2.2 : CORPS DES ARTICLES DE BLOG EN CREME
   -------------------------------------------------------------
   Les articles etaient les dernieres pages du site encore sur
   fond bleu nuit de bout en bout. On les aligne sur le reste
   (#FAF8F4), en gardant l'en-tete et le pied de page bleu nuit,
   exactement comme le design sandwich des pages piliers.

   Methode : blog.css et global.css sont ecrits en variables de
   charte, la bascule se fait donc d'abord par une reassignation
   de tokens sur le conteneur principal. Ne restent a traiter
   explicitement que les couleurs ecrites EN DUR pour le fond
   sombre (bloc ".entry-content" de global.css, ~lignes 916-931).

   Portee : body.single-post, classe native de WordPress. Les
   archives (/category/blog/), les pages et les pages juridiques
   ne sont pas touchees.

   PORTEE, corrigee apres la QA du Lot 2 : sur ce site le FOOTER est rendu
   A L'INTERIEUR de <main id="main">. Poser la reassignation de tokens sur
   main faisait donc basculer aussi le pied de page en palette claire :
   .ladb-social heritait d'un color: var(--fg-soft) devenu bleu nuit, soit
   des icones sombres sur un footer sombre, vues comme trois carres vides.
   On reproduit donc exactement la mecanique du design sandwich des piliers :
   le FOND seul sur main, les TOKENS sur le conteneur de contenu uniquement
   (main > .ct-container, qui porte l'article et la sidebar, jamais le footer).
   Le footer redevient strictement identique a celui des autres pages.

   Reversibilite : supprimer ce bloc restaure le rendu anterieur.
   ============================================================= */
body.single-post main#main.site-main {
  background: var(--cream);
}
body.single-post main#main.site-main > .ct-container {
  /* surfaces */
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --bg-elevated:   var(--cream);
  --bg:            var(--cream);
  /* textes */
  --fg:            var(--fg-onlight);
  --fg-soft:       var(--fg-onlight);
  --fg-mute:       var(--fg-onlight-mute);
  --fg-dim:        var(--fg-onlight-mute);
  /* bordures */
  --border:        var(--cream-border);
  --border-strong: rgba(11,26,51,.18);
  --border-copper: rgba(184,115,51,.30);
  /* le cuivre clair manque de contraste sur creme : on descend d'un cran */
  --copper-light:  var(--copper-deep);
  /* ombres douces, pas de noir profond sur fond clair */
  --shadow-sm:     0 1px 2px rgba(11,26,51,.06);
  --shadow:        0 8px 22px rgba(11,26,51,.08);
  --shadow-lg:     0 18px 40px rgba(11,26,51,.10);

  color: var(--fg-onlight);
}

/* ---- Couleurs ecrites en dur pour le fond sombre (global.css) ---------- */
/* Corps de texte : #E7E3DB (gris clair) devient le bleu nuit de lecture. */
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content td,
body.single-post .entry-content th {
  color: var(--fg-onlight);
}
/* Titres : #FAF8F4 (creme) sur creme, invisible. */
body.single-post .entry-content h1,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6,
body.single-post .page-title,
body.single-post .entry-title {
  color: var(--fg-onlight);
}
/* Les H2 gardent leur accent cuivre, en version foncee lisible sur creme. */
body.single-post .entry-content h2 {
  color: var(--copper-deep);
}
body.single-post .entry-content strong,
body.single-post .entry-content b {
  color: var(--fg-onlight);
}
body.single-post .entry-content a {
  color: var(--copper-deep);
}
body.single-post .entry-content a:hover {
  color: var(--copper);
}

/* ---- Elements de mise en page du corps d'article ---------------------- */
/* Citations : filet cuivre et fond blanc casse, plutot qu'un bloc sombre. */
body.single-post .entry-content blockquote {
  background: #FFFFFF;
  border-left: 3px solid var(--copper-deep);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 28px 0;
  color: var(--fg-onlight);
}
body.single-post .entry-content blockquote p:last-child {
  margin-bottom: 0;
}
/* Separateurs : le filet clair disparait sur creme. */
body.single-post .entry-content hr {
  border: 0;
  border-top: 1px solid var(--cream-border);
  margin: 36px 0;
}
/* Code et preformate. */
body.single-post .entry-content code,
body.single-post .entry-content pre {
  background: rgba(11,26,51,.05);
  border: 1px solid var(--cream-border);
  border-radius: 8px;
  color: var(--fg-onlight);
}
/* Tableaux. */
body.single-post .entry-content table {
  border-color: var(--cream-border);
}
body.single-post .entry-content th {
  background: rgba(11,26,51,.04);
}

/* ---- Encart CTA de fin d'article -------------------------------------- */
/* Le bandeau ivoire etait pense pour trancher sur du bleu nuit. Sur creme il
   se fond : on lui rend un contour pour qu'il reste identifiable. */
body.single-post .ladb-blog-cta {
  border: 1px solid var(--cream-border);
  box-shadow: 0 8px 22px rgba(11,26,51,.06);
}
/* REGRESSION introduite au Lot 2, corrigee ici : le bouton devis de l'encart
   vit DANS .entry-content, et la regle `body.single-post .entry-content a`
   ci-dessus (specificite 0,2,2) ecrasait `.ladb-blog-cta .ladb-blog-cta__quote`
   (0,2,0), qui portait pourtant deja un commentaire d'avertissement sur ce
   risque exact. Resultat : texte cuivre fonce sur fond cuivre, illisible.
   On repasse le bouton sur la convention des boutons primaires du site
   (degrade cuivre, texte #2A1A09), avec une specificite qui tient. */
body.single-post .entry-content a.ladb-blog-cta__quote,
body.single-post .ladb-blog-cta a.ladb-blog-cta__quote {
  background: var(--gradient-copper);
  color: #2A1A09;
  text-decoration: none;
}
body.single-post .entry-content a.ladb-blog-cta__quote:hover,
body.single-post .ladb-blog-cta a.ladb-blog-cta__quote:hover {
  background: var(--gradient-copper-deep);
  color: #2A1A09;
}
/* Le lien telephone de l'encart : cuivre profond, lisible sur l'ivoire. */
body.single-post .entry-content a.ladb-blog-cta__phone,
body.single-post .ladb-blog-cta a.ladb-blog-cta__phone {
  color: var(--copper-deep);
  text-decoration: none;
}
/* Liens de service de l'encart : meme traitement, pas de soulignement. */
body.single-post .entry-content a.ladb-blog-cta__service-link {
  text-decoration: none;
}

/* ---- Sidebar de l'article --------------------------------------------- */
/* Elle vit dans main > .ct-container, donc elle recoit bien les tokens
   ci-dessus. Restent les valeurs ecrites en dur qui visaient le fond sombre. */
/* Titre de widget : color: var(--cream) en dur, invisible sur creme.
   C'est le cas du titre "Articles similaires" remonte a la QA. */
body.single-post #sidebar .widget-title {
  color: var(--fg-onlight);
  border-bottom-color: var(--cream-border);
}
/* Champ de recherche : son fond suivait var(--bg), devenu creme, donc un
   champ creme invisible sur une page creme. On le repasse en blanc. */
body.single-post #sidebar .ct-search-form-inner {
  background: #FFFFFF;
  border-color: var(--cream-border);
}
body.single-post #sidebar .ct-search-form input[type="search"] {
  color: var(--fg-onlight);
}
body.single-post #sidebar .ct-search-form input[type="search"]::placeholder {
  color: var(--fg-onlight-mute);
}
/* Bouton de recherche : cuivre profond et texte creme, contraste conserve. */
body.single-post #sidebar .ct-search-form button[type="submit"] {
  background: var(--copper-deep);
  color: var(--cream);
}
/* Widgets : cartes blanches sur creme, comme partout ailleurs sur le site. */
body.single-post #sidebar .ct-widget {
  background: #FFFFFF;
  border: 1px solid var(--cream-border);
}
/* Articles similaires et encart reassurance. */
body.single-post #sidebar .ladb-similar-posts__title,
body.single-post #sidebar .ladb-sidebar-reassurance__item {
  color: var(--fg-onlight);
}
body.single-post #sidebar .ladb-similar-posts__item {
  border-color: var(--cream-border);
}
body.single-post #sidebar .ladb-similar-posts__link:hover .ladb-similar-posts__title,
body.single-post #sidebar .ladb-sidebar-reassurance__phone {
  color: var(--copper-deep);
}
body.single-post #sidebar .ladb-similar-posts__thumb {
  border-color: var(--cream-border);
}

/* ---- Bloc commentaires ------------------------------------------------ */
/* Il vit HORS de main#main.site-main (conteneur separe injecte par Blocksy) :
   la reassignation de tokens ci-dessus ne l'atteint pas, on le traite a part. */
body.single-post .ct-comments-container {
  background: var(--cream);
  color: var(--fg-onlight);
}
body.single-post .ct-comments-title,
body.single-post .comment-reply-title,
body.single-post .ct-comments .ct-comment-author,
body.single-post .ct-comments .comment-content p,
body.single-post .ct-comments .comment-form label {
  color: var(--fg-onlight);
}
body.single-post .ct-comments .comment-form textarea,
body.single-post .ct-comments .comment-form input[type="text"],
body.single-post .ct-comments .comment-form input[type="email"],
body.single-post .ct-comments .comment-form input[type="url"] {
  background: #FFFFFF;
  border: 1px solid var(--cream-border);
  color: var(--fg-onlight);
}
body.single-post .ct-comments .comment-form textarea:focus,
body.single-post .ct-comments .comment-form input:focus {
  border-color: var(--copper-deep);
}
body.single-post .ct-comments .logged-in-as a,
body.single-post #cancel-comment-reply-link {
  color: var(--copper-deep);
}

/* ---- Pagination article ------------------------------------------------ */
body.single-post .ct-pagination .page-numbers {
  color: var(--fg-onlight);
  border-color: var(--cream-border);
}
body.single-post .ct-pagination .page-numbers:hover,
body.single-post .ct-pagination .page-numbers.current {
  color: var(--copper-deep);
  border-color: var(--copper-deep);
}