/* ═══════════════════════════════════════════════════════
   SONERGIA — Blog
   Réutilise les tokens de style.css (--teal, --orange, Gilroy)
   ═══════════════════════════════════════════════════════ */

.blog-listing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.blog-article {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.blog-breadcrumb {
  font-size: 0.85rem;
  color: var(--gray-text);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: 4px;
  /* neutralise la règle globale nav{} de style.css */
  background: transparent; height: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; position: static; z-index: auto;
}
.blog-breadcrumb > * {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* séparateurs générés en CSS (espacement régulier) */
.blog-breadcrumb > * + *::before {
  content: '»';
  margin: 0 8px;
  color: #aab8c2;
  flex: none;
}
.blog-breadcrumb a { color: var(--teal); text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb span[aria-current] {
  color: var(--gray-text);
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Listing ────────────────────────────────────────── */
.blog-listing__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.blog-listing__header h1 { font-size: 2.6rem; font-weight: 800; color: var(--teal-dark); margin: 8px 0 16px; }
.blog-listing__header p { color: var(--gray-text); font-size: 1.1rem; }

.blog-cats {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px;
  /* neutralise la règle globale nav{} de style.css (sticky + z-index passant devant le menu) */
  background: transparent; height: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; position: static; z-index: auto;
}
.blog-cats__item {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--gray-soft); color: var(--teal); font-weight: 600;
  font-size: 0.9rem; text-decoration: none; border: 1px solid var(--gray-mid);
  transition: all .2s;
}
.blog-cats__item:hover { background: var(--teal); color: #fff; }

.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}
.blog-empty { text-align: center; color: var(--gray-text); padding: 60px 0; }

/* ─── Carte article ──────────────────────────────────── */
.blog-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 16px;
  overflow: hidden; border: 1px solid var(--gray-mid); transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(6,85,110,.12); }
.blog-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--gray-soft); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__cat { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); }
.blog-card__title { font-size: 1.2rem; line-height: 1.35; margin: 0; }
.blog-card__title a { color: var(--teal-dark); text-decoration: none; }
.blog-card__title a:hover { color: var(--teal); }
.blog-card__desc { color: var(--gray-text); font-size: 0.95rem; flex: 1; }
.blog-card__date { font-size: 0.82rem; color: #93a3b0; }

/* ─── Hero immersif (photo en fond + overlay + texte) ── */
.blog-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  margin: 0;
  background: var(--teal);
  isolation: isolate;
}
.blog-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(4,64,88,.6) 0%, rgba(4,64,88,0) 28%),
    linear-gradient(100deg, rgba(4,64,88,.92) 0%, rgba(6,85,110,.78) 46%, rgba(6,85,110,.5) 100%);
}
.blog-hero__inner { color: #fff; width: 100%; max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
/* fil d'ariane intégré au hero, en blanc */
.blog-hero__breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  font-size: 0.85rem; margin-bottom: 22px; color: rgba(255,255,255,.85);
  /* neutralise la règle globale nav{} de style.css */
  background: transparent; height: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; position: static; z-index: auto;
}
.blog-hero__breadcrumb > * { display: inline-flex; align-items: center; min-width: 0; }
.blog-hero__breadcrumb > * + *::before { content: '→'; margin: 0 10px; color: rgba(255,255,255,.6); flex: none; }
.blog-hero__breadcrumb a { color: #fff; text-decoration: none; }
.blog-hero__breadcrumb a:hover { text-decoration: underline; }
.blog-hero__breadcrumb span[aria-current] {
  color: rgba(255,255,255,.75); max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog-hero h1 { font-size: 2.6rem; line-height: 1.12; font-weight: 800; color: #fff; margin: 0 0 18px; max-width: 780px; }
.blog-hero__chapo { font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 22px; max-width: 700px; }
.blog-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; color: rgba(255,255,255,.85); margin-bottom: 20px; }
/* variante partage sur fond sombre */
.blog-hero .blog-share__label { color: rgba(255,255,255,.9); }
.blog-hero .blog-share__btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.blog-hero .blog-share__btn:hover { background: #fff; color: var(--teal); border-color: #fff; }

/* ─── Partage ────────────────────────────────────────── */
.blog-share { display: flex; align-items: center; gap: 10px; }
.blog-share__label { font-size: 0.85rem; font-weight: 600; color: var(--gray-text); }
.blog-share__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--gray-mid); background: #fff; color: var(--teal);
  cursor: pointer; transition: all .2s; text-decoration: none;
}
.blog-share__btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.blog-share__btn.is-copied { background: var(--orange); color: #fff; border-color: var(--orange); }
.blog-share__btn i, .blog-share__btn svg { width: 18px; height: 18px; }

/* ─── Layout 2 colonnes (sommaire + contenu) ─────────── */
.blog-article__layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px;
  max-width: 1160px; margin: 0 auto; align-items: start;
}
.blog-article__aside { position: sticky; top: 100px; }

/* ─── Sommaire ───────────────────────────────────────── */
/* .blog-toc est un <nav> : on neutralise la règle globale nav{} de style.css */
.blog-toc {
  display: block; height: auto; min-height: 0;
  position: static; z-index: auto;
  background: transparent; box-shadow: none;
  border: 0; border-left: 3px solid var(--gray-mid);
  padding: 0 0 0 18px;
}
.blog-toc__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange); margin: 0 0 14px; }
.blog-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.blog-toc__item--h3 { padding-left: 14px; }
.blog-toc__item a { color: var(--gray-text); text-decoration: none; font-size: 0.9rem; line-height: 1.4; transition: color .15s; }
.blog-toc__item a:hover { color: var(--teal); }

/* ─── Contenu article ────────────────────────────────── */
.blog-article__content { max-width: 820px; font-size: 1.05rem; line-height: 1.75; color: #2d3a44; }
.blog-article__content > :first-child { margin-top: 0; }
.blog-article__content h2 { font-size: 1.75rem; font-weight: 800; color: var(--teal-dark); margin: 48px 0 16px; scroll-margin-top: 100px; }
.blog-article__content h3 { font-size: 1.3rem; font-weight: 700; color: var(--teal); margin: 32px 0 12px; scroll-margin-top: 100px; }
.blog-article__content p { margin: 0 0 18px; }
.blog-article__content ul, .blog-article__content ol { margin: 0 0 18px; padding-left: 24px; }
.blog-article__content li { margin-bottom: 8px; }
.blog-article__content a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__content blockquote {
  margin: 32px 0; padding: 24px 28px; background: var(--gray-soft);
  border-left: 4px solid var(--orange); border-radius: 0 12px 12px 0;
  font-style: italic; color: var(--teal-dark);
}
.blog-article__content blockquote p:last-child { margin-bottom: 0; font-style: normal; }
/* Illustrations inline (images markdown nues ![](./x)) : largeur bornée + centrées, pour éviter
   qu'un SVG à grandes dimensions intrinsèques n'occupe toute la colonne. Cible UNIQUEMENT les <img>
   enfants directs d'un <p>/<li> → n'affecte NI le hero (.blog-hero__bg, hors de ce conteneur)
   NI les figures légendées (.blog-figure__img, enfant d'un <figure>). */
.blog-article__content :is(p, li) > img {
  display: block;
  max-width: min(420px, 100%);
  height: auto;
  margin: 24px auto;
  border-radius: 12px;
}

/* ─── FAQ ────────────────────────────────────────────── */
.blog-faq { margin: 56px 0 0; }
.blog-faq h2 { font-size: 1.75rem; font-weight: 800; color: var(--teal-dark); margin: 0 0 24px; scroll-margin-top: 100px; }
.blog-faq__list { display: flex; flex-direction: column; gap: 12px; }
.blog-faq__item { border: 1px solid var(--gray-mid); border-radius: 12px; overflow: hidden; background: #fff; }
.blog-faq__q { cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--teal-dark); list-style: none; position: relative; }
.blog-faq__q::-webkit-details-marker { display: none; }
.blog-faq__q::after { content: '+'; position: absolute; right: 22px; font-size: 1.4rem; color: var(--orange); font-weight: 400; }
.blog-faq__item[open] .blog-faq__q::after { content: '−'; }
.blog-faq__a { padding: 0 22px 20px; color: var(--gray-text); line-height: 1.7; }
/* Réponse FAQ = HTML riche (gras, listes, liens, paragraphes) rendu via set:html */
.blog-faq__a > :first-child { margin-top: 0; }
.blog-faq__a > :last-child { margin-bottom: 0; }
.blog-faq__a p { margin: 0 0 12px; }
.blog-faq__a ul, .blog-faq__a ol { margin: 0 0 12px; padding-left: 22px; }
.blog-faq__a li { margin-bottom: 6px; }
.blog-faq__a a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Auteur ─────────────────────────────────────────── */
.blog-author { display: flex; gap: 18px; align-items: flex-start; margin: 48px 0 0; padding: 24px; background: var(--gray-soft); border-radius: 16px; }
.blog-author__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(6, 85, 110, 0.14); }
.blog-author__photo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--teal); color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }
.blog-author__name { font-weight: 700; color: var(--teal-dark); margin: 0; }
.blog-author__role { font-size: 0.88rem; color: var(--orange); font-weight: 600; margin: 2px 0 8px; }
.blog-author__bio { font-size: 0.95rem; color: var(--gray-text); margin: 0; line-height: 1.6; }
/* dans le corps d'article, les <p> ont une marge basse de 18px — on rétablit l'espacement serré du bloc auteur */
.blog-article__content .blog-author__name,
.blog-article__content .blog-author__bio { margin: 0; }
.blog-article__content .blog-author__role { margin: 2px 0 8px; }

/* ─── Pour aller plus loin ───────────────────────────── */
.blog-related { margin: 48px 0 0; padding: 28px; border: 1px dashed var(--gray-mid); border-radius: 16px; }
.blog-related h2 { font-size: 1.3rem; color: var(--teal-dark); margin: 0 0 14px; }
.blog-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.blog-related__list a { color: var(--teal); font-weight: 600; text-decoration: none; }
.blog-related__list a:hover { text-decoration: underline; }

/* ─── Encart "avis d'expert" (composant ExpertQuote) ─── */
.blog-expert {
  position: relative;
  margin: 40px 0;
  padding: 30px 34px 26px;
  background: #fff;
  border: 1px solid var(--gray-mid);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(6, 85, 110, 0.09);
  overflow: hidden;
}
/* guillemet décoratif discret, en filigrane */
.blog-expert::before {
  content: '\201D';
  position: absolute;
  top: 6px;
  right: 24px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--teal);
  opacity: 0.10;
  pointer-events: none;
}
.blog-expert__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange);
  margin: 0 0 14px;
}
/* .blog-expert .blog-expert__quote : spécificité (0,0,2,0) pour battre
   .blog-article__content blockquote (0,0,1,1) et neutraliser son encadré gris/italique */
.blog-expert .blog-expert__quote {
  margin: 15px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 500;
  font-style: normal;
  color: var(--teal-dark);
}
.blog-expert__quote p { margin: 0 0 12px; }
.blog-expert__quote p:last-child { margin-bottom: 0; }
.blog-expert__by {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-mid);
}
.blog-expert__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.blog-expert__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.blog-expert__meta { display: flex; flex-direction: column; line-height: 1.3; }
.blog-expert__name { font-weight: 700; color: var(--teal-dark); }
.blog-expert__role { font-size: 0.88rem; color: var(--gray-text); margin-top: 2px; }

@media (max-width: 600px) {
  .blog-expert { padding: 24px 22px; }
  .blog-expert__quote { font-size: 1rem; }
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-article__layout { grid-template-columns: 1fr; gap: 32px; }
  .blog-article__aside { position: static; }
  .blog-toc { border-left: none; border-top: 3px solid var(--gray-mid); padding-left: 0; padding-top: 18px; }
  .blog-hero { min-height: 0; }
  .blog-hero__inner { padding: 36px 26px; max-width: 100%; }
  .blog-hero h1 { font-size: 1.9rem; }
  .blog-hero__chapo { font-size: 1rem; }
}


/* ─── Encadré « À retenir » (Callout) ─── */
.blog-callout {
  --callout-accent: var(--teal);
  --callout-tint: rgba(6, 85, 110, 0.055);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 36px 0;
  padding: 20px 22px 18px;
  background: var(--callout-tint);
  border: 1px solid var(--gray-mid);
  border-left: 4px solid var(--callout-accent);
  border-radius: 14px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.blog-callout:hover {
  box-shadow: 0 10px 26px rgba(6, 85, 110, 0.10);
  transform: translateY(-1px);
}

/* Pastille d'icône colorée */
.blog-callout__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--callout-accent);
  border: 1px solid var(--gray-mid);
  box-shadow: 0 2px 6px rgba(6, 85, 110, 0.07);
  transition: transform .25s ease;
}
/* Détail signature : l'icône réagit doucement au survol de la carte */
.blog-callout:hover .blog-callout__icon { transform: scale(1.06); }
.blog-callout__icon svg { display: block; }

.blog-callout__body { min-width: 0; }
.blog-callout__title {
  margin: 4px 0 8px;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: -0.005em;
}
.blog-callout__content { color: #2d3a44; line-height: 1.65; }
.blog-callout__content > :first-child { margin-top: 0; }
.blog-callout__content > :last-child { margin-bottom: 0; }
.blog-callout__content p { margin: 0 0 10px; }
.blog-callout__content ul,
.blog-callout__content ol { margin: 0 0 10px; padding-left: 1.25em; }
.blog-callout__content li { margin: 4px 0; }
.blog-callout__content li::marker { color: var(--callout-accent); }
.blog-callout__content a {
  color: var(--callout-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-callout__content a:focus-visible {
  outline: 2px solid var(--callout-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Variantes — pilotées par --callout-accent / --callout-tint */
.blog-callout--retenir,
.blog-callout--info {
  --callout-accent: var(--teal);
  --callout-tint: rgba(6, 85, 110, 0.055);
}
.blog-callout--astuce {
  --callout-accent: var(--teal-dark);
  --callout-tint: rgba(6, 85, 110, 0.07);
}
.blog-callout--attention {
  --callout-accent: var(--orange);
  --callout-tint: rgba(244, 160, 8, 0.09);
}

@media (max-width: 600px) {
  .blog-callout {
    gap: 14px;
    padding: 20px 18px 18px;
    border-radius: 12px;
  }
  .blog-callout__icon { width: 34px; height: 34px; }
  .blog-callout__icon svg { width: 19px; height: 19px; }
  .blog-callout__title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-callout,
  .blog-callout__icon { transition: none; }
  .blog-callout:hover { transform: none; }
  .blog-callout:hover .blog-callout__icon { transform: none; }
}

/* ─── CTA (appel à l'action) ─────────────────────────── */
.blog-cta {
  position: relative;
  overflow: hidden;
  margin: 40px 0;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 16px;
  background: linear-gradient(110deg, var(--teal-dark) 0%, var(--teal) 100%);
  box-shadow: 0 12px 30px rgba(6, 85, 110, 0.18);
}
/* halo orange discret en fond, signature de marque */
.blog-cta__glow {
  position: absolute;
  top: -60%;
  right: -8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--orange) 28%, transparent) 0%,
    color-mix(in srgb, var(--orange) 0%, transparent) 70%
  );
  pointer-events: none;
}
.blog-cta__body {
  position: relative;
  min-width: 0;
}
.blog-cta__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange);
  margin: 0 0 10px;
}
.blog-cta__title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 800;
  color: #fff;
}
.blog-cta__text {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
}
.blog-cta__btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-cta__btn:hover {
  background: color-mix(in srgb, var(--orange) 85%, #000);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(6, 85, 110, 0.28);
}
/* le bouton CTA garde son texte blanc sans soulignement même dans le corps d'article */
.blog-article__content a.blog-cta__btn { color: #fff; text-decoration: none; }
.blog-article__content a.blog-cta__btn:hover { color: #fff; }
.blog-cta__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* micro-interaction : la flèche avance au survol */
.blog-cta__arrow {
  flex: none;
  transition: transform 0.2s ease;
}
.blog-cta__btn:hover .blog-cta__arrow {
  transform: translateX(4px);
}
@media (max-width: 600px) {
  .blog-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 22px;
  }
  .blog-cta__title { font-size: 1.25rem; }
  .blog-cta__btn {
    width: 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-cta__btn,
  .blog-cta__arrow { transition: none; }
  .blog-cta__btn:hover { transform: none; }
  .blog-cta__btn:hover .blog-cta__arrow { transform: none; }
}

/* ─── Tableau comparatif ─────────────────────────────── */
.blog-compare { margin: 36px 0; }
.blog-compare__caption {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--orange); margin: 0 0 12px;
}
/* Conteneur "carte maison" + défilement horizontal mobile */
.blog-compare__scroll {
  border: 1px solid var(--gray-mid); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(6,85,110,0.09); background: #fff;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.blog-compare__scroll:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.blog-compare__table {
  width: 100%; border-collapse: collapse; font-size: .95rem; color: #2d3a44;
  min-width: 520px; /* force le scroll plutôt que l'écrasement sur petit écran */
}
/* caption visuellement cachée : la légende visible est déjà rendue au-dessus */
.blog-compare__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* En-tête teal */
.blog-compare__th {
  background: var(--teal); color: #fff; font-weight: 700; text-align: left;
  padding: 15px 18px; font-size: .9rem; line-height: 1.35; vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.blog-compare__th:first-child { background: var(--teal-dark); }
.blog-compare__star { vertical-align: -2px; margin-right: 6px; color: var(--orange); }
/* Cellules */
.blog-compare__rowhead {
  text-align: left; font-weight: 700; color: var(--teal-dark);
  padding: 14px 18px; vertical-align: top; background: #fff;
}
.blog-compare__td {
  padding: 14px 18px; vertical-align: top; line-height: 1.55;
  border-left: 1px solid var(--gray-mid);
}
/* Zébré léger */
.blog-compare__row:nth-child(even) .blog-compare__rowhead,
.blog-compare__row:nth-child(even) .blog-compare__td { background: var(--gray-soft); }
/* Séparateurs horizontaux discrets */
.blog-compare__row + .blog-compare__row .blog-compare__rowhead,
.blog-compare__row + .blog-compare__row .blog-compare__td { border-top: 1px solid var(--gray-mid); }
/* Colonne mise en avant : voile orangé (dérivé du token --orange) + filet d'accent */
.blog-compare__cell--hi { background: color-mix(in srgb, var(--orange) 7%, transparent); }
.blog-compare__th.blog-compare__cell--hi {
  background: var(--teal); box-shadow: inset 0 -3px 0 var(--orange);
}
.blog-compare__row:nth-child(even) .blog-compare__td.blog-compare__cell--hi {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}
/* Détail signature : la ligne survolée se révèle en teal très léger */
@media (hover: hover) {
  .blog-compare__row:hover .blog-compare__rowhead,
  .blog-compare__row:hover .blog-compare__td { background: color-mix(in srgb, var(--teal) 6%, transparent); }
  .blog-compare__row:hover .blog-compare__td.blog-compare__cell--hi { background: color-mix(in srgb, var(--orange) 16%, transparent); }
  .blog-compare__row { transition: background .15s ease; }
}
@media (max-width: 600px) {
  .blog-compare__table { font-size: .9rem; }
  .blog-compare__th, .blog-compare__rowhead, .blog-compare__td { padding: 12px 14px; }
}

/* ─── Chiffres-clés ─────────────────────────────────── */
.blog-figures {
  margin: 36px 0;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--gray-mid);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(6, 85, 110, 0.09);
}
.blog-figures__label {
  display: block;
  margin: 0 0 20px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--orange);
}
.blog-figures__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-figures[data-count="1"] .blog-figures__grid { --cols: 1; }
.blog-figures[data-count="2"] .blog-figures__grid { --cols: 2; }
.blog-figures[data-count="3"] .blog-figures__grid { --cols: 3; }
.blog-figures[data-count="4"] .blog-figures__grid { --cols: 4; }

/* colonnes séparées par un filet vertical discret */
.blog-figures__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 24px;
}
.blog-figures__item:first-child { padding-left: 0; }
.blog-figures__item:last-child { padding-right: 0; }
.blog-figures__item + .blog-figures__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64%;
  background: var(--gray-mid);
}

.blog-figures__value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--teal-dark);
}
.blog-figures__caption {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--gray-text);
}

@media (max-width: 900px) {
  .blog-figures { padding: 26px 24px; }
  .blog-figures__grid,
  .blog-figures[data-count="3"] .blog-figures__grid,
  .blog-figures[data-count="4"] .blog-figures__grid {
    --cols: 2;
    gap: 28px 0;
  }
  /* en grille 2 colonnes : filet uniquement entre les colonnes paires */
  .blog-figures__item { padding: 0 24px; }
  .blog-figures__item:nth-child(odd) { padding-left: 0; }
  .blog-figures__item:nth-child(even) { padding-right: 0; }
  .blog-figures__item + .blog-figures__item::before { display: none; }
  .blog-figures__item:nth-child(even)::before {
    display: block;
    height: 76%;
  }
}
@media (max-width: 600px) {
  .blog-figures__grid,
  .blog-figures[data-count="2"] .blog-figures__grid,
  .blog-figures[data-count="3"] .blog-figures__grid,
  .blog-figures[data-count="4"] .blog-figures__grid {
    --cols: 1;
    gap: 0;
  }
  .blog-figures__item {
    padding: 18px 0;
    border-top: 1px solid var(--gray-mid);
  }
  .blog-figures__item:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .blog-figures__item::before,
  .blog-figures__item:nth-child(even)::before { display: none; }
  .blog-figures__value { font-size: 1.9rem; }
}


/* ─── Image légendée ─── */
.blog-figure { margin: 36px 0; }
.blog-figure__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gray-soft);
  border: 1px solid var(--gray-mid);
  box-shadow: 0 12px 30px rgba(6,85,110,0.09);
}
.blog-figure__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(6,85,110,0.05);
  pointer-events: none;
}
.blog-figure__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.blog-figure__frame:hover .blog-figure__img { transform: scale(1.025); }
.blog-figure__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray-text);
}
.blog-figure__text { display: inline-flex; align-items: baseline; gap: 7px; }
.blog-figure__icon { flex: none; transform: translateY(2px); color: var(--teal); opacity: .85; }
.blog-figure__credit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--gray-text);
  opacity: .72;
}
.blog-figure__credit-mark { font-weight: 700; color: var(--teal); }
@media (max-width: 600px) {
  .blog-figure { margin: 28px 0; }
  .blog-figure__frame { border-radius: 12px; }
  .blog-figure__caption {
    flex-direction: column;
    gap: 4px;
    padding-left: 12px;
    font-size: .85rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-figure__img { transition: none; }
  .blog-figure__frame:hover .blog-figure__img { transform: none; }
}

/* ─── Bloc deux colonnes ─────────────────────────────── */
.blog-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 36px 0;
  align-items: start;
}
.blog-twocol--left-wide { grid-template-columns: 1.4fr 1fr; }
.blog-twocol--right-wide { grid-template-columns: 1fr 1.4fr; }
.blog-twocol--vcenter { align-items: center; }

/* Chaque colonne reçoit une typographie de base on-brand, pour que tout
   contenu (titre, texte, liens, image, listes) soit proprement mis en forme. */
.blog-twocol__col {
  min-width: 0; /* évite le débordement des contenus longs en grille */
  color: #2d3a44;
  font-size: 1rem;
  line-height: 1.7;
}
.blog-twocol__col > :first-child { margin-top: 0; }
.blog-twocol__col > :last-child { margin-bottom: 0; }
.blog-twocol__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange);
  margin: 0 0 10px;
}
.blog-twocol__col h2,
.blog-twocol__col h3,
.blog-twocol__col h4 {
  color: var(--teal-dark);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
}
.blog-twocol__col h3 { font-size: 1.35rem; }
.blog-twocol__col h4 { font-size: 1.1rem; }
.blog-twocol__col p { margin: 0 0 14px; }
.blog-twocol__col ul,
.blog-twocol__col ol { margin: 0 0 14px; padding-left: 1.2em; }
.blog-twocol__col li { margin: 4px 0; }
.blog-twocol__col li::marker { color: var(--orange); }
.blog-twocol__col a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-twocol__col a:hover { color: var(--teal-dark); }
.blog-twocol__col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
/* Lien « flèche » — CTA discret en bas d'une colonne */
.blog-twocol__col a.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: none;
  margin-top: 2px;
}
.blog-twocol__col a.arrow-link::after {
  content: '→';
  transition: transform 0.2s ease;
}
.blog-twocol__col a.arrow-link:hover { color: var(--teal); }
.blog-twocol__col a.arrow-link:hover::after { transform: translateX(3px); }

@media (max-width: 768px) {
  .blog-twocol,
  .blog-twocol--left-wide,
  .blog-twocol--right-wide {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }
}

/* ─── Oui/Non (cellule de tableau) ───────────────────── */
.blog-bool { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; }
.blog-bool--yes { background: #2e9e6b; }
.blog-bool--no { background: #d2553f; }

/* ─── Note / score (cellule de tableau) ──────────────── */
.blog-rating { display: inline-flex; gap: 4px; }
.blog-rating i { width: 14px; height: 14px; border-radius: 50%; background: var(--gray-mid, #d4dee4); display: inline-block; }
.blog-rating i.on { background: var(--orange, #f08a24); }

/* ─── Picto + point clé (inline) ─────────────────────── */
.blog-picto { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.blog-picto__icon { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 155, 151, 0.12); color: #009b97; align-items: center; justify-content: center; font-weight: 700; }
.blog-picto__value { color: #009b97; font-size: 1.4rem; }

/* ─── Timeline (étapes numérotées) ───────────────────── */
.blog-timeline__list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.blog-timeline__step { position: relative; padding: 0 0 22px 44px; }
.blog-timeline__step:last-child { padding-bottom: 0; }
.blog-timeline__step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-dark, #04405a); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.blog-timeline__step:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: 0; width: 2px; background: var(--gray-mid, #d4dee4); }
.blog-timeline__title { margin: 4px 0 6px; color: var(--teal-dark, #04405a); font-size: 1.1rem; }
.blog-timeline__step p { margin: 0; color: #2d3a44; line-height: 1.6; }

/* ─── Accordéon au fil du texte (style FAQ, sans le bloc FAQ) ── */
.blog-accordion { margin: 28px 0; display: flex; flex-direction: column; gap: 10px; }
.blog-accordion__item { border: 1px solid var(--gray-mid, #d4dee4); border-radius: 12px; overflow: hidden; background: #fff; }
.blog-accordion__q { cursor: pointer; padding: 16px 22px; font-weight: 700; color: var(--teal-dark, #04405a); list-style: none; position: relative; }
.blog-accordion__q::-webkit-details-marker { display: none; }
summary.blog-accordion__q::marker { display: none; }
.blog-accordion__q::after { content: '+'; position: absolute; right: 22px; font-size: 1.4rem; color: var(--orange); font-weight: 400; }
.blog-accordion__item[open] .blog-accordion__q::after { content: '−'; }
.blog-accordion__a { padding: 0 22px 18px; color: var(--gray-text, #5a6b76); line-height: 1.7; }

/* ─── Onglets ────────────────────────────────────────── */
.blog-tabs { margin: 28px 0; }
.blog-tabs__list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--gray-mid, #d4dee4); }
.blog-tabs__tab { appearance: none; background: none; border: none; font: inherit; cursor: pointer; padding: 10px 16px; color: var(--gray-text, #5a6b76); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 8px; }
.blog-tabs__tab.is-active { color: var(--teal-dark, #04405a); border-bottom-color: var(--orange, #f08a24); }
.blog-tabs__icon { width: 22px; height: 22px; object-fit: contain; }
.blog-tabs__panel { display: none; padding: 18px 4px 0; color: var(--teal-dark, #04405a); line-height: 1.6; }
.blog-tabs__panel.is-active { display: block; }
.blog-tabs__panel p { margin: 0 0 12px; }

/* ─── Tableaux riches dans le corps d'article ────────── */
.blog-article__content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 24px 0; }
.blog-article__content th { background: var(--teal-dark, #04405a); color: #fff; text-align: left; padding: 10px 14px; }
.blog-article__content td { padding: 10px 14px; border-bottom: 1px solid var(--gray-mid, #d4dee4); color: var(--teal-dark, #04405a); }
.blog-article__content tbody tr:nth-child(even) td { background: var(--gray-soft, #f3f6f8); }

/* ─── En bref (synthèse d'article) — titre en légende sur la bordure top + coches rondes (façon prod) ── */
.blog-enbref { position: relative; margin: 36px 0; padding: 32px 30px 26px; background: #fff; border: 1px solid var(--gray-mid, #d4dee4); border-radius: 12px; }
.blog-enbref__title { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-50%); margin: 0; padding: 0 24px; text-align: center; }
.blog-enbref__title span { background: #fff; padding: 0 16px; font-size: 1.15rem; font-weight: 700; color: var(--teal-dark, #04405a); }
.blog-enbref__title em { font-style: italic; }
.blog-enbref__content { color: var(--teal-dark, #04405a); line-height: 1.6; }
.blog-enbref__content > :first-child { margin-top: 0; }
.blog-enbref__content > :last-child { margin-bottom: 0; }
.blog-enbref__content p { margin: 0 0 10px; }
.blog-enbref__content ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.blog-enbref__content li { position: relative; padding-left: 40px; }
.blog-enbref__content li::before { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306556e' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12 2.4 2.4 4.8-5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }