/* Page /blog (2026-10-17) — styles repris de l'ex-panneau Articles de cutup.html (#cnBlogPanel, règles
   .cn-blog-*, retirées le même jour), adaptés au gabarit des pages légales : jetons --ink/--paper/--card/
   --rule/--accent de public/blog.html (thème clair/sombre), Nunito partout (charte cutup), cartes en
   liens réels (<a>) — un article s'ouvre sur sa propre adresse /blog/<slug>, rendue côté serveur. */

.cn-blog-h1 { font-size: 32px; font-weight: 900; line-height: 1.15; margin: 0 0 18px; }

/* ── Barre de filtres ── chips à 3 états (modes 'multiple' / 'exclusive') OU recherche + liste
   déroulante fusionnée catégories/étiquettes (mode 'search'), jamais les deux (blog_category_select_mode). */
.cn-blog-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; min-height: 0; }
.cn-blog-toolbar:empty { display: none; }

.cn-blog-cats-wrap { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cn-blog-cats { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  padding: 2px 4px; flex: 1; min-width: 0; }
.cn-blog-cats::-webkit-scrollbar { display: none; }
.cn-blog-cats-arrow { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 1; padding: 0; }
.cn-blog-cats-arrow:hover { border-color: var(--ink); color: var(--ink); }
.cn-blog-cats-arrow:disabled { opacity: .3; cursor: default; }
.cn-blog-cats-arrow:disabled:hover { border-color: var(--rule); color: var(--ink-3); }

.cn-blog-cat-chip { flex-shrink: 0; font: inherit; font-size: 13px; font-weight: 700; background: var(--card);
  border: 1px solid var(--rule); color: var(--ink-2); padding: 4px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.cn-blog-cat-chip:hover { border-color: var(--ink-3); }
.cn-blog-cat-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* 3 états — mêmes couleurs que le sélecteur admin (admin-config.html .blog-cat-chip.include/.exclude). */
.cn-blog-cat-chip.include { background: rgba(31, 157, 92, .12); border-color: #1f9d5c; color: #1f9d5c; }
.cn-blog-cat-chip.exclude { background: rgba(229, 62, 62, .12); border-color: #e53e3e; color: #e53e3e; text-decoration: line-through; }

.cn-blog-search-wrap { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.cn-blog-search-wrap input { width: 100%; min-width: 0; font: inherit; font-size: 14px; height: 38px; padding: 0 46px 0 16px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.cn-blog-search-wrap input:focus, .cn-blog-select:focus { outline: none; border-color: var(--ink-3); }
/* Lancement sur Entrée ou clic loupe uniquement, jamais au fil de la frappe (comme l'ex-panneau). */
.cn-blog-search-wrap button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.cn-blog-search-wrap button svg { width: 15px; height: 15px; }
.cn-blog-search-wrap button:hover { opacity: .85; }
.cn-blog-select { flex: 1 1 0; min-width: 0; font: inherit; font-size: 14px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink); }

/* ── Grille ── ligne par ligne (ordre chronologique de lecture), colonnes de 340px minimum. */
.cn-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; align-items: start; }
.cn-blog-grid.is-posts { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.cn-blog-card { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.cn-blog-card:hover { box-shadow: 0 16px 40px rgba(14, 14, 14, .10); transform: translateY(-1px); }
.cn-blog-card-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rule); }
/* Vignette : <img> en object-fit cover (2026-10-17, revue de fusion — remplace un background-image:url()
   en attribut style, où l'URL du blog aurait dû être échappée pour le contexte CSS) ; remplit toujours la
   boîte quel que soit le ratio renvoyé par WP. */
.cn-blog-card-media-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cn-blog-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px;
  font-weight: 900; color: var(--ink-3); }
.cn-blog-cat-tag { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--accent-ink); font-size: 11px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; text-decoration: none; }
.cn-blog-card-body { padding: 14px 18px 18px; }
/* Titre sur une ligne + ellipsis (la date et le bouton restent alignés d'une carte à l'autre). */
.cn-blog-card-title { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-blog-card-date { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.cn-blog-card-more { display: inline-block; font-size: 13px; font-weight: 800; background: var(--paper); color: var(--ink);
  padding: 6px 14px; border-radius: 999px; }
.cn-blog-card:hover .cn-blog-card-more { background: var(--accent); color: var(--accent-ink); }

/* Variante billets (site_configs.blog_source='sgp') : pas de vignette, titre sur 6 lignes. */
.cn-blog-card.is-post .cn-blog-card-body { display: flex; flex-direction: column; gap: 7px; }
.cn-blog-post-eyebrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cn-blog-post-pub { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--accent-ink); background: var(--accent);
  padding: 1px 8px; border-radius: 999px; }
.cn-blog-post-topic { font-size: 11px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cn-blog-card.is-post .cn-blog-card-title { font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 400; margin: 0;
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; }
.cn-blog-card.is-post .cn-blog-card-date { margin: 0; }

.cn-blog-loadmore-row { text-align: center; padding: 24px 0 8px; }
.cn-blog-loadmore-row[hidden] { display: none; }
.cn-blog-loadmore-btn { display: inline-block; font-size: 14px; font-weight: 800; border: 1px solid var(--rule); background: var(--card);
  color: var(--ink); padding: 9px 22px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.cn-blog-loadmore-btn:hover { border-color: var(--ink-3); }
.cn-blog-loadmore-btn.is-busy { opacity: .5; pointer-events: none; }

.cn-blog-empty, .cn-blog-error { grid-column: 1 / -1; padding: 60px 24px; text-align: center; font-size: 15px; color: var(--ink-3); }
.cn-blog-loading { grid-column: 1 / -1; display: flex; justify-content: center; padding: 60px 0; }
.cn-blog-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--accent);
  animation: cn-blog-spin .8s linear infinite; }
@keyframes cn-blog-spin { to { transform: rotate(360deg); } }

/* ── Article ── */
.cn-blog-back { display: inline-block; font-size: 14px; font-weight: 700; color: var(--ink-3); text-decoration: none; margin: 0 0 18px; }
.cn-blog-back:hover { color: var(--ink); text-decoration: underline; }
.cn-blog-detail-media { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; margin-bottom: 20px; background: var(--rule); }
.cn-blog-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-blog-detail-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cn-blog-detail-terms .cn-blog-cat-tag { position: static; }
.cn-blog-detail-terms .cn-blog-cat-tag:hover { opacity: .85; }
/* Étiquettes : même gabarit, contour au lieu du fond plein, pour les distinguer des catégories. */
.cn-blog-tag-pill { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 10px;
  border-radius: 999px; border: 1.5px solid var(--ink-3); color: var(--ink-2); text-decoration: none; }
.cn-blog-tag-pill:hover { border-color: var(--ink); color: var(--ink); }
.cn-blog-detail-title { font-size: 34px; font-weight: 900; line-height: 1.15; margin: 0 0 8px; }
.cn-blog-detail-meta { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.cn-blog-detail-meta .cn-blog-card-date { margin: 0; font-size: inherit; }
.cn-blog-detail-content { font-size: 17px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.cn-blog-detail-content p { margin: 0 0 1.1em; }
.cn-blog-detail-content a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cn-blog-detail-content h2, .cn-blog-detail-content h3 { font-weight: 900; line-height: 1.25; margin: 1.4em 0 .5em; }
.cn-blog-detail-content blockquote { border-left: 3px solid var(--accent); margin: 1.2em 0; padding: 4px 0 4px 16px; color: var(--ink-2); font-style: italic; }
.cn-blog-detail-content img { max-width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; }
/* Image dans un vrai lien : suit le lien (pas de zoom). */
.cn-blog-detail-content a img { cursor: pointer; }
/* Embeds (YouTube, X…) : les attributs width/height de WP débordaient sur mobile. */
.cn-blog-detail-content iframe, .cn-blog-detail-content video { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 6px; }
.cn-blog-detail-content figure { max-width: 100%; margin-left: 0; margin-right: 0; }
.cn-blog-detail-content table { display: block; max-width: 100%; overflow-x: auto; }
.cn-blog-detail-content pre { max-width: 100%; overflow-x: auto; }
/* Classes Gutenberg (la feuille de style des blocs WordPress n'est pas chargée ici). */
.cn-blog-detail-content .has-text-align-center { text-align: center; }
.cn-blog-detail-content .has-text-align-left { text-align: left; }
.cn-blog-detail-content .has-text-align-right { text-align: right; }
.cn-blog-detail-content .aligncenter { display: table; margin-left: auto; margin-right: auto; }
.cn-blog-detail-content .alignleft { float: left; margin: .5em 1.5em 1em 0; }
.cn-blog-detail-content .alignright { float: right; margin: .5em 0 1em 1.5em; }
.cn-blog-detail-content::after { content: ''; display: table; clear: both; }
.cn-blog-detail-content .wp-element-caption { text-align: center; font-size: 14px; color: var(--ink-3); }
.cn-blog-detail-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2em; margin-bottom: 1.75em; }
.cn-blog-detail-content .wp-block-column { margin-top: 0; margin-bottom: 0; min-width: 0; }
@media (min-width: 782px) {
  .cn-blog-detail-content .wp-block-columns { flex-wrap: nowrap; }
  .cn-blog-detail-content .wp-block-column { flex-basis: 0; flex-grow: 1; }
}
@media (max-width: 781px) { .cn-blog-detail-content .wp-block-column { flex-basis: 100%; } }
.cn-blog-detail-content .wp-block-gallery { --cn-gallery-gap: var(--wp--style--unstable-gallery-gap, 16px); display: flex; flex-wrap: wrap;
  gap: var(--cn-gallery-gap); list-style-type: none; margin: 0 0 1.75em; padding: 0; }
.cn-blog-detail-content .wp-block-gallery figure.wp-block-image,
.cn-blog-detail-content .wp-block-gallery .blocks-gallery-item { margin: 0; display: flex; flex-direction: column; flex-grow: 1;
  width: calc(50% - var(--cn-gallery-gap) * 0.5); }
.cn-blog-detail-content .wp-block-gallery.columns-1 figure.wp-block-image,
.cn-blog-detail-content .wp-block-gallery.columns-1 .blocks-gallery-item { width: 100%; }
.cn-blog-detail-content .wp-block-gallery figure.wp-block-image > a,
.cn-blog-detail-content .wp-block-gallery figure.wp-block-image > div,
.cn-blog-detail-content .wp-block-gallery .blocks-gallery-item figure { display: flex; flex-grow: 1; margin: 0; }
.cn-blog-detail-content .wp-block-gallery img { display: block; height: auto; max-width: 100% !important; width: auto; }
.cn-blog-detail-content .wp-block-gallery.is-cropped img { flex: 1; height: 100%; object-fit: cover; width: 100%; }
.cn-blog-detail-content .wp-block-gallery figcaption { flex-basis: 100%; width: 100%; margin-top: .5em; }
@media (min-width: 600px) {
  .cn-blog-detail-content .wp-block-gallery.columns-3 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(33.33333% - var(--cn-gallery-gap) * 0.66667); }
  .cn-blog-detail-content .wp-block-gallery.columns-4 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(25% - var(--cn-gallery-gap) * 0.75); }
  .cn-blog-detail-content .wp-block-gallery.columns-5 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(20% - var(--cn-gallery-gap) * 0.8); }
  .cn-blog-detail-content .wp-block-gallery.columns-6 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-6 .blocks-gallery-item { width: calc(16.66667% - var(--cn-gallery-gap) * 0.83333); }
  .cn-blog-detail-content .wp-block-gallery.columns-7 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-7 .blocks-gallery-item { width: calc(14.28571% - var(--cn-gallery-gap) * 0.85714); }
  .cn-blog-detail-content .wp-block-gallery.columns-8 figure.wp-block-image, .cn-blog-detail-content .wp-block-gallery.columns-8 .blocks-gallery-item { width: calc(12.5% - var(--cn-gallery-gap) * 0.875); }
}

/* Zoom image (lightbox) — une seule instance créée à la demande ; fermeture : clic, ✕ ou Échap. */
.cn-img-zoom { position: fixed; inset: 0; background: rgba(10, 9, 7, .92); display: none; align-items: center; justify-content: center;
  z-index: 10000; cursor: zoom-out; padding: 24px; }
.cn-img-zoom.is-open { display: flex; }
.cn-img-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; box-shadow: 0 10px 60px rgba(0, 0, 0, .6); }
.cn-img-zoom-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #f5f2ea; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cn-img-zoom-close:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 600px) {
  .cn-blog-h1, .cn-blog-detail-title { font-size: 26px; }
  .cn-blog-detail-content { font-size: 16px; }
  /* Mode 'search' : recherche puis liste déroulante l'une sous l'autre. */
  .cn-blog-toolbar.is-search { flex-direction: column; align-items: stretch; }
  .cn-blog-toolbar.is-search .cn-blog-select, .cn-blog-toolbar.is-search .cn-blog-search-wrap { flex: none; }
}