/* ══════════════════════════════════════════════════════════════════════
   MSC — PAGE NOTRE ACTUALITÉ + ARCHIVES CATÉGORIES
   Approche : module Divi natif [et_pb_blog] + filtres = liens vers
   les archives WP natives (/category/SLUG/). Aucun PHP custom requis.
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   HERO ACTUALITÉ
   ────────────────────────────────────────────────────────────────────── */
.actu-hero-in { max-width: 1200px; margin: 0 auto; }
.actu-hero-crumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255, 255, 255, .55); margin-bottom: 28px;
}
.actu-hero-crumb a { color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .25s; }
.actu-hero-crumb a:hover { color: var(--msc-red, #E3211B); }
.actu-hero-crumb svg { stroke: rgba(255, 255, 255, .35); }
.actu-hero-crumb span { color: rgba(255, 255, 255, .85); font-weight: 500; }

.actu-hero-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.actu-hero-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--msc-red, #E3211B); }
.actu-hero-tag span {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

.actu-hero-title {
  font-family: var(--msc-font-display, 'DM Serif Display'), serif;
  font-size: clamp(42px, 5vw, 68px); font-weight: 400; line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 22px; color: var(--msc-white, #fff);
}
.actu-hero-title em { font-style: italic; color: var(--msc-red, #E3211B); }

.actu-hero-sub {
  font-family: var(--msc-font, 'DM Sans'), sans-serif;
  font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .68);
  max-width: 640px; margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   FILTRES CATÉGORIES — liens vers /category/SLUG/ (archives WP natives)
   État actif géré par CSS conditionnel sur body.category-SLUG
   ────────────────────────────────────────────────────────────────────── */
.actu-cats-wrap {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--msc-gray-200, #e5e5ea);
  flex-wrap: nowrap;          /* label + liste sur une seule ligne */
  min-width: 0;
}
.actu-cats-label {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--msc-gray-500, #8e8e93);
}

/* Liste défilante horizontalement — couvre .actu-cats-list (hardcodé)
   ET .boutons-categories (sortie du shortcode [boutons_categories]) */
.actu-cats-list,
.actu-cats-wrap .boutons-categories {
  display: flex;
  flex-wrap: nowrap;         /* pas de retour à la ligne → défilement */
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* fade sur les bords pour indiquer le défilement */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
}
.actu-cats-list::-webkit-scrollbar,
.actu-cats-wrap .boutons-categories::-webkit-scrollbar { display: none; }

/* Chips — couvre .actu-cat (hardcodé) ET .bouton-categorie (shortcode) */
.actu-cat,
.actu-cats-wrap .bouton-categorie {
  flex-shrink: 0;             /* les chips ne se compriment pas */
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--msc-font, 'DM Sans'), sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--msc-gray-700, #3a3a3c);
  text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s;
}
.actu-cat:hover,
.actu-cats-wrap .bouton-categorie:hover {
  background: var(--msc-gray-50, #f5f5f7); color: var(--msc-dark, #0d0d0d);
}

/* État actif explicite (chip avec .is-active ou .current) */
.actu-cat.is-active,
.actu-cats-wrap .bouton-categorie.current {
  background: var(--msc-dark, #0d0d0d);
  color: var(--msc-white, #fff);
}

/* État actif auto sur les archives — WordPress ajoute body.category-SLUG.
   Vrais slugs MSC (permaliens sans préfixe /category/). */
body.category-administration-dentreprise              .actu-cat[data-cat="administration-dentreprise"],
body.category-assurances-et-prevoyance                .actu-cat[data-cat="assurances-et-prevoyance"],
body.category-creation-dentreprise                    .actu-cat[data-cat="creation-dentreprise"],
body.category-divers                                  .actu-cat[data-cat="divers"],
body.category-domiciliation-dentreprise               .actu-cat[data-cat="domiciliation-dentreprise"],
body.category-fiscalite-dentreprise                   .actu-cat[data-cat="fiscalite-dentreprise"],
body.category-mandat-dadministrateur-gerant-fiduciaire .actu-cat[data-cat="mandat-dadministrateur-gerant-fiduciaire"],
body.category-misc-2                                   .actu-cat[data-cat="misc-2"] {
  background: var(--msc-dark, #0d0d0d);
  color: var(--msc-white, #fff);
}
/* "Tous" actif sur la page principale, neutre sur une archive */
body:not(.category) .actu-cat-all { background: var(--msc-dark, #0d0d0d); color: var(--msc-white, #fff); }
body.category .actu-cat-all { background: transparent; color: var(--msc-gray-700, #3a3a3c); }

@media (max-width: 768px) {
  .actu-cats-wrap { gap: 14px; }
  .actu-cats-label { font-size: 9px; }
  .actu-cat,
  .actu-cats-wrap .bouton-categorie { font-size: 12px; padding: 7px 12px; }
}

/* ──────────────────────────────────────────────────────────────────────
   HEADER BLOC (.blog-hd hérité home + .blog-all)
   ────────────────────────────────────────────────────────────────────── */
.blog-hd {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
}

/* Titres de section H2 (.s-title) — page actualité */
.blog-page .s-title,
.actu-newsletter .s-title,
.blog-hd .s-title {
  font-family: var(--msc-font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--msc-gray-900);
  margin: 0 0 24px;
}
.blog-page .s-title em,
.actu-newsletter .s-title em,
.blog-hd .s-title em { font-style: italic; color: var(--msc-red, #E3211B); }
.blog-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--msc-dark, #0d0d0d); text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.blog-all:hover {
  background: var(--msc-dark, #0d0d0d); color: var(--msc-white, #fff);
  border-color: var(--msc-dark, #0d0d0d);
}

/* ══════════════════════════════════════════════════════════════════════
   MODULE et_pb_blog — class custom .blog-actu
   Override des styles Divi natifs pour matcher le design MSC
   ══════════════════════════════════════════════════════════════════════ */

/* Structure héritée de la home : le module et_pb_blog (grille, salvattore)
   génère des colonnes natives .column.size-1of3 — on les dimensionne,
   on N'ÉCRASE PAS avec un display:grid. Chaque .et_pb_post a une hauteur
   fixe pour aligner proprement les colonnes (pas de décalage masonry). */

/* Colonnes natives Divi/salvattore : 3 colonnes de 32% + gouttière */
.blog-actu .et_pb_salvattore_content { margin: 0 !important; }
.blog-actu .column.size-1of3 {
  width: 32% !important;
  margin-right: 2% !important;
}
.blog-actu .column.size-1of3:last-child { margin-right: 0 !important; }

/* Article (card) — HAUTEUR FIXE pour aligner les colonnes */
.blog-actu .et_pb_post {
  background: var(--msc-white, #fff) !important;
  border: 1px solid var(--msc-gray-200, #e5e5ea) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  height: 470px !important;
  display: flex !important;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              box-shadow .35s, border-color .35s;
}
.blog-actu .et_pb_post:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .14);
  border-color: var(--msc-gray-300, #d1d1d6);
}

/* Image — hauteur fixe */
.blog-actu .et_pb_image_container {
  margin: 0 !important;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-actu .et_pb_image_container a { display: block; height: 190px; }
.blog-actu .et_pb_image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.blog-actu .et_pb_post:hover .et_pb_image_container img { transform: scale(1.04); }

/* Titre — clamp 2 lignes pour hauteur constante */
.blog-actu .entry-title {
  padding: 22px 22px 0 !important;
  font-family: var(--msc-font-display, 'DM Serif Display'), serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  margin: 0 0 10px !important;
  color: var(--msc-dark, #0d0d0d) !important;
  transition: color .25s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-actu .entry-title a { color: inherit !important; text-decoration: none !important; transition: color .25s; }
.blog-actu .et_pb_post:hover .entry-title,
.blog-actu .et_pb_post:hover .entry-title a { color: var(--msc-red, #E3211B) !important; }

/* Meta (date) */
.blog-actu .post-meta {
  padding: 0 22px 10px !important;
  font-family: var(--msc-font, 'DM Sans'), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--msc-red, #E3211B) !important;
  margin: 0 !important;
}
.blog-actu .post-meta a { color: var(--msc-red, #E3211B) !important; text-decoration: none !important; }

/* Extrait — clamp 3 lignes, prend l'espace restant */
.blog-actu .post-content {
  padding: 0 22px 22px !important;
  margin: 0 !important;
  font-family: var(--msc-font, 'DM Sans'), sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--msc-gray-600, #58585c) !important;
  flex: 1;
  overflow: hidden;
}
.blog-actu .post-content p {
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read more" si activé */
.blog-actu .more-link {
  display: inline-flex !important;
  align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12px; font-weight: 700;
  color: var(--msc-red, #E3211B) !important;
  text-decoration: none !important;
  transition: gap .3s;
}
.blog-actu .more-link::after { content: '→'; font-size: 14px; transition: transform .3s; }
.blog-actu .et_pb_post:hover .more-link { gap: 10px; }
.blog-actu .et_pb_post:hover .more-link::after { transform: translateX(2px); }

/* ──────────────────────────────────────────────────────────────────────
   PAGINATION — WP-PageNavi (.wp-pagenavi)
   Structure : .pages (texte) · .current · a.page · .extend (…) ·
   a.nextpostslink (»)/.previouspostslink (‹) · a.first / a.last
   ────────────────────────────────────────────────────────────────────── */
.wp-pagenavi {
  clear: both;
  width: 100%;
  margin: 16px 0 0;
  padding: 36px 0 0;
  border-top: 1px solid var(--msc-gray-200, #e5e5ea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--msc-font, 'DM Sans'), sans-serif;
}

/* Compteur "Page X sur Y" — repoussé à gauche, discret */
.wp-pagenavi .pages {
  margin-right: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--msc-gray-500, #8e8e93);
  border: none;
  padding: 0;
}

/* Numéros de page (liens) */
.wp-pagenavi a.page,
.wp-pagenavi a.larger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--msc-dark, #0d0d0d);
  text-decoration: none;
  background: var(--msc-white, #fff);
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.wp-pagenavi a.page:hover,
.wp-pagenavi a.larger:hover {
  background: var(--msc-gray-50, #f5f5f7);
  border-color: var(--msc-gray-300, #d1d1d6);
  transform: translateY(-1px);
}

/* Page courante — rouge adouci (tint au lieu de plein) */
.wp-pagenavi span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--msc-red, #E3211B);
  background: rgba(227, 33, 27, .08);
  border: 1px solid rgba(227, 33, 27, .28);
}

/* Ellipsis … */
.wp-pagenavi span.extend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 40px;
  color: var(--msc-gray-400, #c7c7cc);
  font-size: 14px;
  font-weight: 600;
}

/* Boutons précédent / suivant (« »), première / dernière page */
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.first,
.wp-pagenavi a.last {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--msc-dark, #0d0d0d);
  text-decoration: none;
  background: var(--msc-white, #fff);
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.wp-pagenavi a.nextpostslink:hover,
.wp-pagenavi a.previouspostslink:hover,
.wp-pagenavi a.first:hover,
.wp-pagenavi a.last:hover {
  background: var(--msc-dark, #0d0d0d);
  color: var(--msc-white, #fff);
  border-color: var(--msc-dark, #0d0d0d);
  transform: translateY(-1px);
}

/* Flèches simples « » → version pleine (carrée arrondie) pour distinction */
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
  min-width: 40px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 640px) {
  .wp-pagenavi { gap: 5px; }
  .wp-pagenavi .pages { width: 100%; margin: 0 0 12px; text-align: center; }
  .wp-pagenavi a.page,
  .wp-pagenavi a.larger,
  .wp-pagenavi span.current { min-width: 36px; height: 36px; font-size: 12px; }
  .wp-pagenavi a.first,
  .wp-pagenavi a.last { padding: 0 12px; height: 36px; font-size: 12px; }
  /* Masquer "Dernière page »" sur mobile (gain de place, le » suffit) */
  .wp-pagenavi a.last { display: none; }
}

/* Responsive : 2 colonnes (50%) puis 1 colonne (100%) */
@media (max-width: 1024px) {
  .blog-actu .column.size-1of3 { width: 48% !important; margin-right: 4% !important; }
  .blog-actu .column.size-1of3:nth-child(2n) { margin-right: 0 !important; }
  .blog-actu .et_pb_post { height: 460px !important; }
}
@media (max-width: 640px) {
  .blog-actu .column.size-1of3 { width: 100% !important; margin-right: 0 !important; }
  .blog-actu .et_pb_post { height: auto !important; }
  .blog-actu .entry-title { -webkit-line-clamp: 3; }
}

/* ──────────────────────────────────────────────────────────────────────
   NEWSLETTER
   ────────────────────────────────────────────────────────────────────── */
.actu-newsletter-in {
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
  align-items: center; max-width: 1200px; margin: 0 auto;
}
.actu-newsletter-form {
  background: var(--msc-gray-50, #f8f8fa);
  border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 8px; padding: 32px;
}
.actu-newsletter-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--msc-gray-700, #3a3a3c); margin-bottom: 12px;
}
.actu-newsletter-row { display: flex; gap: 10px; margin-bottom: 16px; }
.actu-newsletter-input {
  flex: 1; padding: 14px 18px;
  border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 6px; background: var(--msc-white, #fff);
  font-family: inherit; font-size: 14px;
  color: var(--msc-dark, #0d0d0d);
  transition: border-color .25s, box-shadow .25s;
}
.actu-newsletter-input:focus {
  outline: none; border-color: var(--msc-dark, #0d0d0d);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, .06);
}
.actu-newsletter-btn {
  flex-shrink: 0; padding: 14px 24px;
  background: var(--msc-dark, #0d0d0d); color: var(--msc-white, #fff);
  border: none; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
  transition: background .25s, transform .15s;
}
.actu-newsletter-btn:hover { background: var(--msc-red, #E3211B); transform: translateY(-1px); }
.actu-newsletter-rgpd {
  font-size: 11.5px; color: var(--msc-gray-500, #8e8e93);
  line-height: 1.55; margin: 0;
}
.actu-newsletter-rgpd a {
  color: var(--msc-gray-700, #3a3a3c);
  text-decoration: underline;
  text-decoration-color: var(--msc-gray-300, #d1d1d6);
}
@media (max-width: 980px) { .actu-newsletter-in { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .actu-newsletter-row { flex-direction: column; } .actu-newsletter-form { padding: 24px; } }

/* ──────────────────────────────────────────────────────────────────────
   CROSS-LINK SERVICES
   ────────────────────────────────────────────────────────────────────── */
.actu-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.actu-service-card {
  background: var(--msc-white, #fff);
  border: 1px solid var(--msc-gray-200, #e5e5ea);
  border-radius: 8px; padding: 32px 28px 28px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.actu-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .14);
  border-color: var(--msc-gray-300, #d1d1d6);
}
.actu-service-badge {
  align-self: flex-start; padding: 5px 12px;
  background: var(--msc-dark, #0d0d0d); color: var(--msc-white, #fff);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.actu-service-card h3 {
  font-family: var(--msc-font-display, serif);
  font-size: 22px; font-weight: 400; line-height: 1.25;
  color: var(--msc-dark, #0d0d0d); letter-spacing: -.005em; margin: 0;
}
.actu-service-card p {
  font-size: 13.5px; line-height: 1.6;
  color: var(--msc-gray-600, #58585c); margin: 0; flex: 1;
}
.actu-service-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--msc-red, #E3211B); margin-top: 6px;
  transition: gap .3s;
}
.actu-service-card:hover .actu-service-link { gap: 10px; }
@media (max-width: 1024px) { .actu-services-grid { grid-template-columns: 1fr; gap: 14px; } }