.article-shell aside{min-width:0}
.article-shell .toc{display:flex;flex-direction:column;gap:0;width:100%;max-width:300px;overflow-wrap:anywhere}
.article-shell .toc a{display:block;width:100%;padding:8px 0;line-height:1.35}
@media(max-width:900px){.article-shell .toc{display:flex;max-width:none;position:static}.article-shell aside{order:-1}}

.article-hero.fit-hero{background-color:#0b234f;background-position:right center;background-repeat:no-repeat;background-size:contain}
.article-hero.fit-hero::before{background:linear-gradient(90deg,rgba(6,22,52,.98) 0%,rgba(6,22,52,.9) 43%,rgba(6,22,52,.18) 100%)}
.article-card img.fit-image{object-fit:contain;object-position:center;padding:16px;background:#eef3f9}
@media(max-width:900px){.article-hero.fit-hero{background-position:center top;padding-top:170px}.article-hero.fit-hero::before{background:linear-gradient(0deg,rgba(6,22,52,.98) 0%,rgba(6,22,52,.82) 66%,rgba(6,22,52,.12) 100%)}}

/* Fil d’Ariane commun à tous les articles du blog */
.article-hero > .breadcrumb {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: auto;
  bottom: auto;
  left: max(7vw, 28px);
  display: block;
  width: max-content;
  max-width: calc(100% - max(14vw, 56px));
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(7, 25, 56, .72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  color: #f3f7fd;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.article-hero > .breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.article-hero > .breadcrumb a:hover {
  color: #ffad63;
}

@media(max-width:580px) {
  .article-hero > .breadcrumb {
    top: 14px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .78rem;
  }
}

/* Hero : entre le bandeau trop haut et la version trop tassée */
.blog-hero {
  padding: 56px max(7vw, 28px) 48px;
}

.article-list {
  padding: 56px max(7vw, 28px) 80px;
}

.blog-hero h1,
.article-hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 900px;
}

.blog-hero p,
.article-hero p {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 720px;
  margin: 14px 0 0;
}

.article-hero {
  min-height: 420px;
  padding: 88px max(7vw, 28px) 52px;
}

.article-hero .meta {
  margin: 0 0 10px;
}

.article-hero .actions {
  margin-top: 22px;
}

@media (max-width: 900px) {
  .article-hero {
    min-height: 360px;
  }

  .article-hero.fit-hero {
    padding-top: 170px;
    padding-bottom: 40px;
  }
}

@media (max-width: 580px) {
  .blog-hero {
    padding: 40px 16px 36px;
  }

  .article-hero {
    min-height: 340px;
    padding: 76px 16px 40px;
  }

  .blog-hero h1,
  .article-hero h1 {
    font-size: 1.7rem;
  }

  .article-hero.fit-hero {
    padding-top: 160px;
  }
}

/* Le sommaire et l'encadré de contact restent empilés sans se recouvrir. */
@media(min-width:901px) {
  .article-shell > aside {
    position: sticky;
    top: 112px;
    align-self: start;
  }

  .article-shell > aside .toc {
    position: static;
  }
}

/* Header calqué sur la page d’accueil (styles.css) */
.site-header {
  height: 92px;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px max(5vw, 24px);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  font: 16px/1.6 Arial, Helvetica, sans-serif;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.site-header .brand img {
  width: 67px;
  height: 67px;
  object-fit: contain;
  border-radius: 50%;
}

.site-header .brand span {
  display: flex;
  flex-direction: column;
}

.site-header .brand strong {
  font-size: 1.2rem;
  color: var(--navy);
}

.site-header .brand small {
  display: inline;
  color: var(--muted);
  font-size: smaller;
}

.site-header nav {
  display: flex;
  gap: 26px;
  font-weight: 700;
  color: var(--navy);
}

.site-header nav a:hover {
  color: var(--orange);
}

.site-header .phone {
  display: inline;
  background: var(--orange);
  color: #fff;
  padding: 11px 17px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.6;
  border: 0;
}

@media (max-width: 900px) {
  .site-header nav {
    display: none;
  }
}

@media (max-width: 580px) {
  .site-header {
    height: 76px;
    min-height: 76px;
    padding: 8px 12px;
    gap: 8px;
  }

  .site-header .brand {
    min-width: 0;
    gap: 8px;
  }

  .site-header .brand img {
    width: 44px;
    height: 44px;
  }

  .site-header .brand small {
    display: none;
  }

  .site-header .brand strong {
    font-size: .95rem;
  }

  .site-header .phone {
    font-size: .78rem;
    padding: 8px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}