/**
 * Blog « Nos conseils » — liste et article.
 *
 * Maquettes : maquettes/desktop/3a-nos-conseils-liste.html et 3a-article.html (V1).
 * Couleurs, rayons et ombres : UNIQUEMENT les propriétés --sn-* du thème sapins-noel
 * (themes/sapins-noel/src/scss/2_base/_root.scss), aucune valeur de couleur en dur, pour
 * suivre la charte quand elle bouge. Le vert principal de la maquette V1 correspond
 * aujourd'hui à --sn-green.
 *
 * Chargée sur les seules pages du blog (AbstractBlogController::setMedia()).
 */

.snblog {
  --snblog-gap: 32px;
  color: var(--sn-green-dark);
  padding-bottom: 48px;
}

.snblog a {
  color: inherit;
}

/* ---------------------------------------------------------------- Éléments communs */

.snblog-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-green);
}

.snblog-eyebrow a {
  text-decoration: none;
}

.snblog-eyebrow a:hover,
.snblog-eyebrow a:focus-visible {
  text-decoration: underline;
}

.snblog-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sn-muted);
}

.snblog-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sn-terracotta);
  background: color-mix(in srgb, var(--sn-terracotta) 12%, transparent);
}

.snblog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sn-green);
  background: transparent;
  border: 1px solid var(--sn-green);
  border-radius: var(--sn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.snblog-btn:hover,
.snblog-btn:focus-visible {
  color: var(--sn-bg);
  background: var(--sn-green);
}

/* Variante pleine : réservée à l'appel à l'action vers le catalogue (un seul par page). */
.snblog-btn--solid {
  color: var(--sn-bg);
  background: var(--sn-green);
}

.snblog-btn--solid:hover,
.snblog-btn--solid:focus-visible {
  color: var(--sn-bg);
  background: var(--sn-green-dark);
  border-color: var(--sn-green-dark);
}

.snblog-btn--small {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sn-text);
  border-color: var(--sn-border);
}

.snblog-btn--small:hover,
.snblog-btn--small:focus-visible {
  color: var(--sn-green);
  background: var(--sn-green-100);
}

.snblog-btn[aria-pressed="true"] {
  color: var(--sn-bg);
  background: var(--sn-green);
  border-color: var(--sn-green);
}

.snblog :focus-visible {
  outline: 2px solid var(--sn-green);
  outline-offset: 2px;
}

/* Image de couverture : remplit son cadre, sans déformation. */
.snblog-cover,
.snblog-cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.snblog-cover img {
  object-fit: cover;
}

/* ---------------------------------------------------------------- Liste : en-tête */

.snblog-hero {
  margin: 0 0 8px;
  padding: 40px 24px;
  background: var(--sn-bg);
  border-top: 1px solid var(--sn-border);
  border-bottom: 1px solid var(--sn-border);
}

.snblog-hero__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.snblog-hero__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.snblog-hero__page {
  font-weight: 400;
  color: var(--sn-muted);
}

.snblog-hero__intro {
  margin: 0;
  max-width: 560px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sn-text);
}

/* ---------------------------------------------------------------- Liste : pastilles */

.snblog-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
}

.snblog-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.84375rem;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  text-decoration: none;
}

.snblog-chip:hover,
.snblog-chip:focus-visible {
  border-color: var(--sn-green);
}

.snblog-chip.is-active {
  font-weight: 600;
  color: var(--sn-bg);
  background: var(--sn-green);
  border-color: var(--sn-green);
}

.snblog-chip__count {
  margin-left: 4px;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- Liste : à la une */

.snblog-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 26px;
  border: 1px solid var(--sn-border);
}

.snblog-featured__media {
  aspect-ratio: 16 / 9;
  background: var(--sn-bg);
  overflow: hidden;
}

.snblog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.snblog-featured__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.snblog-featured__title {
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: pretty;
}

.snblog-featured__excerpt {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.7;
  color: var(--sn-text);
}

.snblog-featured__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
}

.snblog-featured__cta {
  margin-left: auto;
  padding-bottom: 2px;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--sn-green);
  border-bottom: 1px solid var(--sn-green);
}

/* ---------------------------------------------------------------- Cartes */

.snblog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--snblog-gap);
  padding-top: 36px;
}

.snblog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Maquette : cadre carré, image « contain » (photos produit détourées). Les couvertures du
   blog sont des photos pleine page en paysage : un carré en couperait près de la moitié,
   d'où le 4:3 recadré. */
.snblog-card__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 2px;
  background: var(--sn-bg);
  overflow: hidden;
}

/* « À lire ensuite » : bandeau de 170 px de haut, comme la maquette. */
.snblog-card--compact .snblog-card__media {
  aspect-ratio: auto;
  height: 170px;
}

.snblog-card__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.snblog-card--compact .snblog-card__title {
  font-size: 1.125rem;
}

/* Lien étiré : toute la carte est cliquable, un seul lien par carte. */
.snblog-card__link {
  text-decoration: none;
}

.snblog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.snblog-card:hover .snblog-card__link,
.snblog-featured:hover .snblog-card__link,
.snblog-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.snblog-card__link:focus-visible {
  outline: none;
}

.snblog-card__link:focus-visible::after {
  outline: 2px solid var(--sn-green);
  outline-offset: 4px;
}

.snblog-card__excerpt {
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--sn-text);
}

.snblog-empty {
  padding: 36px 0;
  color: var(--sn-muted);
}

/* ---------------------------------------------------------------- Pagination */

.snblog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 0 0;
}

/* ---------------------------------------------------------------- Article : en-tête */

.snblog-article__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  padding: 8px 0 30px;
}

.snblog-article__title {
  margin: 0;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.snblog-article__lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sn-text);
}

.snblog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--sn-green-100);
}

.snblog-byline__author {
  font-weight: 600;
  color: var(--sn-green-dark);
}

.snblog-byline__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.snblog-share-status {
  font-size: 0.8125rem;
  color: var(--sn-green);
}

.snblog-article__cover {
  margin: 0;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  width: 100%;
  background: var(--sn-bg);
  overflow: hidden;
}

/* ---------------------------------------------------------------- Article : colonnes */

.snblog-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 32px;
}

.snblog-toc__details {
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-bg);
}

.snblog-toc__title {
  padding: 14px 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-muted);
  cursor: pointer;
}

.snblog-toc__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 18px 18px;
  list-style: none;
}

.snblog-toc__list a {
  display: block;
  padding-left: 12px;
  font-size: 0.84375rem;
  line-height: 1.45;
  color: var(--sn-text);
  border-left: 2px solid var(--sn-green-100);
  text-decoration: none;
}

.snblog-toc__list a:hover,
.snblog-toc__list a:focus-visible {
  color: var(--sn-green);
}

.snblog-toc__list a.is-active,
.snblog-toc__list a[aria-current="true"] {
  font-weight: 600;
  color: var(--sn-green);
  border-left-color: var(--sn-green);
}

.snblog-article__main {
  min-width: 0;
  max-width: 680px;
}

/* ---------------------------------------------------------------- Article : texte */

/*
 * Les règles typographiques du texte (titres, liens, listes, tableaux…) ne descendent pas
 * dans les blocs insérés par les shortcodes Ever Block Light (div.snblog-embed, posé par
 * ContentProcessor) : une fiche produit garde les styles du thème.
 */

.snblog-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sn-green-dark);
}

.snblog-content > * {
  margin: 0 0 22px;
}

.snblog-content > :last-child {
  margin-bottom: 0;
}

.snblog-content h2:not(.snblog-embed *) {
  margin-top: 36px;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  /* Ancre du sommaire : le titre ne passe pas sous un en-tête collant. */
  scroll-margin-top: 96px;
}

.snblog-content h3:not(.snblog-embed *) {
  margin-top: 28px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.snblog-content a:not(.snblog-embed *) {
  color: var(--sn-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.snblog-content ul:not(.snblog-embed *),
.snblog-content ol:not(.snblog-embed *) {
  padding-left: 1.4em;
}

.snblog-content li + li:not(.snblog-embed *) {
  margin-top: 6px;
}

.snblog-content img {
  max-width: 100%;
  height: auto;
}

.snblog-content figure:not(.snblog-embed *) {
  margin-left: 0;
  margin-right: 0;
}

.snblog-content figcaption:not(.snblog-embed *) {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--sn-muted);
}

/* Encart « Le conseil de l'équipe » : une citation (<blockquote>) dans l'éditeur. */
.snblog-content blockquote:not(.snblog-embed *) {
  padding: 22px 26px;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--sn-bg);
  border-left: 3px solid var(--sn-green);
}

.snblog-content blockquote > :last-child:not(.snblog-embed *) {
  margin-bottom: 0;
}

/* Tableaux : défilement horizontal dans leur cadre (div.snblog-table posé par ContentProcessor). */
.snblog-table {
  overflow-x: auto;
  border: 1px solid var(--sn-border);
}

.snblog-content table:not(.snblog-embed *) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.90625rem;
  line-height: 1.5;
}

.snblog-content th:not(.snblog-embed *),
.snblog-content td:not(.snblog-embed *) {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sn-green-100);
}

.snblog-content thead th:not(.snblog-embed *),
.snblog-content tr:first-child th:not(.snblog-embed *) {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--sn-bg);
  border-bottom-color: var(--sn-border);
}

.snblog-content tr:last-child td:not(.snblog-embed *) {
  border-bottom: 0;
}

/* Bloc inséré par un shortcode Ever Block Light seul sur sa ligne ([product 12,34]…). */
.snblog-content > .snblog-embed {
  margin: 32px 0;
  font-size: 1rem;
  line-height: 1.5;
}


/* La grille du thème (.products) compte ses colonnes sur la largeur de l'ÉCRAN : 4 fiches
   de 99 px dans la colonne de lecture (540 px à 1280 px, mesuré le 02/10/2026). Ici, sur la
   largeur de la colonne, 200 px au moins : à 164 px, titre et bouton « Ajouter au panier »
   passent sur trois lignes. Soit 2 fiches à 1280 px, 3 sur grand écran. Sous 576 px, la
   grille du thème reste en place : 2 fiches de 163 px à 375 px, comme le catalogue mobile.
   Pas sur le carrousel (.carousel-inner.products), qui a sa propre mise en page. */
@media (min-width: 576px) {
  .snblog-embed .products.row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.snblog-embed .products.row {
  margin-left: 0;
  margin-right: 0;
}

.snblog-embed .products.row > * {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Le gabarit d'everblocklight pose des utilitaires Bootstrap sur sa section : `mx-5`
 * (marges latérales de 3rem, trop dans une colonne de lecture) et `d-none d-md-block`
 * (grille masquée sous 768 px, sans rien d'autre à la place ; avec `carousel=true`, il
 * ajoute sa propre version mobile — deux sections, d'où `:only-child`).
 * Hummingbird range ces utilitaires dans `@layer utilities` avec `!important` : un
 * `!important` hors couche perd contre eux quelle que soit sa spécificité (constaté le
 * 02/10/2026). Les surcharges vont donc dans la même couche, où la spécificité départage.
 */
@layer utilities {
  .snblog-embed .ever-featured-products {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  @media (max-width: 767.98px) {
    .snblog-embed > .ever-featured-products:only-child {
      display: block !important;
    }
  }
}

/* ---------------------------------------------------------------- Retour lecteur */

.snblog-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--sn-green-100);
}

.snblog-feedback__answers {
  display: flex;
  gap: 10px;
}

.snblog-feedback__thanks {
  margin: 0;
  font-size: 0.84375rem;
  color: var(--sn-green);
}

/* ---------------------------------------------------------------- Colonne produits */

.snblog-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.snblog-products {
  border: 1px solid var(--sn-border);
}

.snblog-aside__title {
  margin: 0;
  padding: 16px 18px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-muted);
  border-bottom: 1px solid var(--sn-green-100);
}

.snblog-products__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.snblog-product {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sn-green-100);
}

.snblog-product:last-child {
  border-bottom: 0;
}

.snblog-product__media {
  flex: none;
  width: 64px;
  height: 64px;
  background: var(--sn-bg);
}

.snblog-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.snblog-product__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.snblog-product__name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.snblog-product:hover .snblog-product__name {
  text-decoration: underline;
}

.snblog-product__price {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--sn-green);
}

/* Appel à l'action vers le catalogue : bande sous la liste, carte dans la colonne d'article. */
.snblog-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  background: var(--sn-green-100);
  border-radius: var(--sn-radius);
}

.snblog-cta__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.snblog-cta__text {
  margin: 0;
  color: var(--sn-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.snblog-cta--band {
  margin-top: 40px;
  padding: 32px 24px;
  text-align: center;
  align-items: center;
}

.snblog-cta--band .snblog-cta__title {
  font-size: 1.375rem;
}

.snblog-cta--aside .snblog-cta__title {
  font-size: 0.9375rem;
}

.snblog-cta--aside .snblog-btn {
  width: 100%;
}

.snblog-help {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--sn-green-200);
}

.snblog-help__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.snblog-help__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sn-text);
}

.snblog-help__text a {
  font-weight: 600;
  color: var(--sn-green);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- À lire ensuite */

.snblog-related {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--sn-border);
}

.snblog-related__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.snblog-related .snblog-grid {
  padding-top: 22px;
}

.snblog-back {
  margin: 36px 0 0;
  font-size: 0.875rem;
}

.snblog-back a {
  color: var(--sn-green);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Points de rupture */

@media (min-width: 576px) {
  .snblog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Imprimer n'a pas de sens sur un téléphone : le bouton revient à partir de la tablette. */
@media (max-width: 767.98px) {
  [data-snblog-print] {
    display: none;
  }
}

@media (min-width: 768px) {
  .snblog-hero {
    padding: 56px 48px;
  }

  .snblog-featured {
    grid-template-columns: 1.15fr 1fr;
  }

  .snblog-featured__media {
    aspect-ratio: auto;
    min-height: 300px;
  }

  .snblog-featured__body {
    padding: 40px 44px;
  }
}

@media (min-width: 992px) {
  .snblog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .snblog-article__layout {
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 48px;
    align-items: start;
    padding-top: 48px;
  }

  .snblog-article__layout--no-toc {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .snblog-article__layout--no-aside {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .snblog-article__layout--no-toc.snblog-article__layout--no-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sommaire et colonne produits suivent la lecture. Le header du site est collant :
     le thème publie sa hauteur réelle dans --scroll-padding-top (custom.js, même
     mécanique que les facettes et le sommaire des pages CMS) — à 20 px le sommaire
     passait sous le menu. Repli 120 px si la variable n'est pas encore posée. */
  .snblog-toc,
  .snblog-aside {
    position: sticky;
    top: var(--scroll-padding-top, 120px);
    /* Un sommaire ou une colonne plus hauts que l'écran restent défilables. */
    max-height: calc(100vh - var(--scroll-padding-top, 120px) - 24px);
    overflow-y: auto;
  }

  /* Le sommaire n'est plus repliable : pas de cadre, pas de flèche, titre non cliquable. */
  .snblog-toc__details {
    background: transparent;
    border: 0;
  }

  .snblog-toc__title {
    padding: 0 0 14px;
    list-style: none;
    pointer-events: none;
  }

  .snblog-toc__title::-webkit-details-marker {
    display: none;
  }

  .snblog-toc__list {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snblog-btn {
    transition: none;
  }
}

/* ---------------------------------------------------------------- Impression */

@media print {
  .snblog-byline__actions,
  .snblog-toc,
  .snblog-feedback,
  .snblog-aside,
  .snblog-related,
  .snblog-back {
    display: none !important;
  }

  .snblog-article__layout {
    display: block;
  }

  .snblog-article__main {
    max-width: none;
  }

  .snblog-content a:not(.snblog-embed *)::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}