/* Améliorations propres au site Next.js (absentes de WordPress), chargées après le CSS d'origine.
   Elles ne changent ni les contenus ni les URLs. Voir components/ArticleEnhancements.tsx.
   --adm-header-h : hauteur de l'en-tête fixe, tenue à jour par le JavaScript. */

:root {
  --adm-header-h: 65px;
  --adm-btt-bottom: 24px;
  --adm-dark: #0a2935;
  --adm-red: #bc2624;
  --adm-border: #d3dce8;
}
@media (min-width: 1100px) {
  :root {
    --adm-header-h: 77px;
  }
}

/* ---------- En-tête (components/Header.tsx) ----------
   Hauteur fixe (pas de décalage de la page au défilement) ; translucide et ombré dès que la page
   défile ; menu « Publications » en panneau ; panneau plein écran sur tablette et mobile. */

#brx-header.adm-hdr {
  --hdr-h: 64px;
  --hdr-ink: var(--adm-dark);
  --hdr-muted: #5b6b74;
  --hdr-hover: #eef3f6;
  --hdr-line: rgba(10, 41, 53, 0.08);
  --hdr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 998;
  background: #fff;
  border-bottom: 1px solid transparent;
  font-family: inherit;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
@media (min-width: 1100px) {
  #brx-header.adm-hdr {
    --hdr-h: 76px;
  }
}
#brx-header.adm-hdr.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--hdr-line);
  box-shadow: 0 8px 30px -12px rgba(10, 41, 53, 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #brx-header.adm-hdr.is-scrolled {
    background: #fff;
  }
}
/* Le flou est sur un calque à part : posé sur l'en-tête, il ferait du panneau mobile (fixe)
   un enfant de l'en-tête au lieu de l'écran */
#brx-header.adm-hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  opacity: 0;
  transition: opacity 0.3s;
}
#brx-header.adm-hdr.is-scrolled::before {
  opacity: 1;
}
#brx-header.adm-hdr.is-menu-open {
  background: #fff;
  box-shadow: none;
  border-bottom-color: var(--hdr-line);
}

.adm-hdr__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(90%, 1200px);
  height: var(--hdr-h);
  margin: 0 auto;
}

/* Logo */
.adm-hdr__logo {
  display: flex;
  flex: none;
  margin-right: auto;
  border-radius: 8px;
}
.adm-hdr__logo img {
  display: block;
  width: 140px;
  height: auto;
  transform-origin: left center;
  transition: transform 0.4s var(--hdr-ease);
}
@media (min-width: 768px) {
  .adm-hdr__logo img {
    width: 170px;
  }
}
@media (min-width: 1100px) {
  .adm-hdr__logo img {
    width: 200px;
  }
  .adm-hdr.is-scrolled .adm-hdr__logo img {
    transform: scale(0.92);
  }
}

/* Navigation (ordinateur) */
.adm-hdr__nav {
  display: none;
}
/* Ordinateur : logo, bouton, Publications, FAQ et Espace patient forment un groupe centré, à
   écarts égaux. L'écart vaut la moitié de celui d'une répartition sur toute la largeur :
   (largeur du contenu - largeur des cinq éléments, 884 px environ) / 8 */
@media (min-width: 1100px) {
  .adm-hdr__nav {
    display: block;
  }
  .adm-hdr__bar {
    --hdr-gap: clamp(16px, calc((min(90vw, 1200px) - 884px) / 8), 56px);
    justify-content: center;
    gap: var(--hdr-gap);
  }
  .adm-hdr__logo {
    margin-right: 0;
  }
}
.adm-hdr__list {
  display: flex;
  align-items: center;
  gap: var(--hdr-gap, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-hdr__item {
  position: relative;
  margin: 0;
}
.adm-hdr .adm-hdr__link,
.adm-hdr .adm-hdr__patient {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hdr-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.adm-hdr .adm-hdr__link:hover,
.adm-hdr .adm-hdr__patient:hover,
.adm-hdr__item[data-open] > .adm-hdr__link,
.adm-hdr__item[data-open] > .adm-hdr__patient {
  background: var(--hdr-hover);
}
/* Page en cours : petit trait rouge sous le lien */
.adm-hdr .adm-hdr__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--adm-red);
}
.adm-hdr__chevron {
  transition: transform 0.25s var(--hdr-ease);
}
.adm-hdr__item[data-open] .adm-hdr__chevron {
  transform: rotate(180deg);
}

/* Panneau « Publications » */
.adm-hdr__mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 660px;
  padding: 10px;
  border: 1px solid var(--hdr-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(10, 41, 53, 0.28), 0 2px 6px rgba(10, 41, 53, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s, transform 0.25s var(--hdr-ease), visibility 0s 0.25s;
}
/* Pont invisible entre le lien et le panneau, pour que le survol ne se perde pas */
.adm-hdr__mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.adm-hdr__mega[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.18s, transform 0.25s var(--hdr-ease), visibility 0s;
}
.adm-hdr__mega-grid,
.adm-hdr__panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-hdr .adm-hdr__mega-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  color: var(--hdr-ink);
  text-decoration: none;
  transition: background-color 0.2s;
}
.adm-hdr .adm-hdr__mega-link:hover {
  background: #f5f7f9;
}
.adm-hdr__mega-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fbe9e8;
  color: var(--adm-red);
  transition: background-color 0.2s, color 0.2s, transform 0.3s var(--hdr-ease);
}
.adm-hdr__mega-link:hover .adm-hdr__mega-icon {
  background: var(--adm-red);
  color: #fff;
  transform: scale(1.06);
}
.adm-hdr__mega-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.adm-hdr__mega-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.adm-hdr__mega-desc {
  color: var(--hdr-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Espace patient */
/* Le bouton de la navigation ne sert qu'en mode ordinateur ; celui de la barre, qu'en dessous */
@media (min-width: 1100px) {
  .adm-hdr .adm-hdr__actions {
    display: none;
  }
}
.adm-hdr .adm-hdr__patient {
  padding-right: 8px;
}
.adm-hdr__badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3f6;
  color: var(--hdr-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.adm-hdr__patient:hover .adm-hdr__badge,
.adm-hdr__item[data-open] .adm-hdr__badge {
  background: #fff;
}
.adm-hdr__tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: 240px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--adm-dark);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.25s var(--hdr-ease), visibility 0s 0.25s;
}
.adm-hdr__tip[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s, transform 0.25s var(--hdr-ease), visibility 0s;
}

/* Bouton principal */
.adm-hdr__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.adm-hdr .adm-hdr__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--adm-red);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(188, 38, 36, 0.7);
  transition: background-color 0.2s, box-shadow 0.25s, transform 0.25s var(--hdr-ease);
}
@media (min-width: 1100px) {
  .adm-hdr .adm-hdr__cta {
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }
}
/* Reflet qui traverse le bouton au survol */
.adm-hdr__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.adm-hdr .adm-hdr__cta:hover {
  background: #a51f1d;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(188, 38, 36, 0.75);
  transform: translateY(-1px);
}
.adm-hdr__cta:hover::after {
  left: 120%;
  transition: left 0.7s ease;
}
.adm-hdr .adm-hdr__cta:active {
  transform: translateY(0);
}
.adm-hdr__arrow {
  flex: none;
  transition: transform 0.25s var(--hdr-ease);
}
.adm-hdr__cta:hover .adm-hdr__arrow,
.adm-hdr__panel-links a:hover .adm-hdr__arrow {
  transform: translateX(3px);
}
.adm-hdr__cta-full {
  display: none;
}
@media (min-width: 600px) {
  .adm-hdr__cta-full {
    display: inline;
  }
  .adm-hdr__cta-short {
    display: none;
  }
}

/* Bouton du menu (tablette et mobile) : trois traits qui deviennent une croix */
.adm-hdr .adm-hdr__burger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hdr-ink);
  cursor: pointer;
  transition: background-color 0.2s;
}
.adm-hdr .adm-hdr__burger:hover {
  background: var(--hdr-hover);
}
.adm-hdr__burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--hdr-ease), opacity 0.2s;
}
.adm-hdr__burger span:nth-child(1) {
  transform: translateY(-6px);
}
.adm-hdr__burger span:nth-child(3) {
  transform: translateY(6px);
}
.adm-hdr__burger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}
.adm-hdr__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.adm-hdr__burger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg);
}
@media (min-width: 1100px) {
  .adm-hdr .adm-hdr__burger {
    display: none;
  }
}

/* Panneau plein écran (tablette et mobile) */
.adm-hdr__panel {
  position: fixed;
  top: var(--hdr-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.3s var(--hdr-ease), visibility 0s 0.3s;
}
.adm-hdr__panel[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s, transform 0.3s var(--hdr-ease), visibility 0s;
}
.adm-hdr__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(90%, 720px);
  margin: 0 auto;
  padding: 20px 0 32px;
}
.adm-hdr__panel-label {
  margin: 0;
  color: var(--hdr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .adm-hdr__panel-grid {
    grid-template-columns: 1fr;
  }
}
.adm-hdr__panel .adm-hdr__mega-link {
  padding: 10px 8px;
}
.adm-hdr__panel-links {
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--hdr-line);
  list-style: none;
}
.adm-hdr__panel-links li {
  border-bottom: 1px solid var(--hdr-line);
}
.adm-hdr .adm-hdr__panel-links a,
.adm-hdr__panel-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  color: var(--hdr-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.adm-hdr__panel-links a {
  justify-content: space-between;
}
.adm-hdr .adm-hdr__cta--block {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  font-size: 16px;
}
/* Entrée des éléments en cascade */
.adm-hdr__panel-inner > *,
.adm-hdr__panel-grid > li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.4s var(--hdr-ease);
}
.adm-hdr__panel[data-open] .adm-hdr__panel-inner > *,
.adm-hdr__panel[data-open] .adm-hdr__panel-grid > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 35ms + 60ms);
}
.adm-hdr__panel-grid {
  opacity: 1 !important;
  transform: none !important;
}
html.adm-menu-open,
html.adm-menu-open body {
  overflow: hidden;
}

/* Contour de focus visible au clavier */
.adm-hdr a:focus-visible,
.adm-hdr button:focus-visible {
  outline: 2px solid var(--adm-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .adm-hdr *,
  .adm-hdr *::before,
  .adm-hdr *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Ancres (#…) : le titre visé s'arrête sous l'en-tête fixe au lieu d'être caché dessous */
html {
  scroll-padding-top: calc(var(--adm-header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Articles ---------- */

/* Sommaire fixe dans la colonne de gauche (ordinateur) : il suit la lecture et défile
   lui-même s'il est plus haut que l'écran */
@media (min-width: 992px) {
  .single-post .ba-web-design-servicedetail_inner-sidebar-content {
    position: sticky;
    top: calc(var(--adm-header-h) + 20px);
    max-height: calc(100vh - var(--adm-header-h) - 40px);
  }
  .single-post .ba-web-design-servicedetail_inner-sidebar-content .brxe-post-toc {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--adm-border) transparent;
    padding-right: 6px;
  }
}
.single-post .brxe-post-toc .toc-link.is-active-link {
  color: var(--adm-red);
}

/* Sommaire repliable en haut de l'article (tablette et mobile, où la colonne est masquée) */
.adm-toc-mobile {
  display: none;
  margin: 0 0 24px;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 991px) {
  .adm-toc-mobile {
    display: block;
  }
}
.adm-toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--adm-dark);
  list-style: none;
}
.adm-toc-mobile > summary::-webkit-details-marker {
  display: none;
}
.adm-toc-mobile > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.adm-toc-mobile[open] > summary::after {
  transform: rotate(-135deg) translateY(-1px);
}
.adm-toc-mobile nav {
  padding: 0 18px 14px;
  border-top: 1px solid var(--adm-border);
}
.adm-toc-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.adm-toc-mobile ul ul {
  padding-left: 16px;
}
.adm-toc-mobile li {
  margin: 0;
}
.adm-toc-mobile a {
  display: block;
  padding: 7px 0;
  color: var(--adm-dark);
  text-decoration: none;
  line-height: 1.4;
  font-size: 15px;
}
.adm-toc-mobile ul ul a {
  font-size: 14px;
  opacity: 0.85;
}

/* Liens soulignés dans le texte de l'article (repérables sans se fier à la couleur) */
.single-post .brxe-post-content :is(p, li, td, th, blockquote, figcaption) a:not(.wp-block-button__link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.single-post .brxe-post-content :is(p, li, td, th, blockquote, figcaption) a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
}

/* Tableau plus large que l'écran : il défile horizontalement au lieu d'élargir la page */
.adm-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Barre de progression de lecture, sous l'en-tête */
.adm-reading-progress {
  position: fixed;
  top: var(--adm-header-h);
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 997;
  pointer-events: none;
}
.adm-reading-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--adm-red);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Bouton « retour en haut », au-dessus de l'encart du bas de page */
.adm-back-to-top {
  position: fixed;
  right: 20px;
  bottom: var(--adm-btt-bottom);
  z-index: 997;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--adm-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 41, 53, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, bottom 0.2s ease;
}
.adm-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.adm-back-to-top:hover {
  background: var(--adm-red);
}
.adm-back-to-top:focus-visible {
  outline: 3px solid var(--adm-red);
  outline-offset: 3px;
}
@media (max-width: 478px) {
  .adm-back-to-top {
    right: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Encart fixe du bas des articles (« Interprétez votre prise de sang… », gabarit WordPress) :
   masqué, la carte d'appel de la preuve sociale (SocialProof.tsx) fait le même travail */
#brxe-9e9bb2 {
  display: none !important;
}

/* ---------- Accueil : titre, sous-titre et outil d'analyse (components/HomePage.tsx, Hero) ----------
   Repris de Bricks : H1 36 px, sous-titre 19 px très aéré, outil bord à bord sur mobile, bouton
   « Guide d'utilisation » coupé sur deux lignes sur tablette. Textes et ordre inchangés. */
@media (min-width: 992px) {
  #brxe-hkereq {
    max-width: 980px;
    font-size: 44px;
  }
}
@media (min-width: 479px) {
  #brxe-ydzfda {
    line-height: 1.55;
  }
}
/* Mobile : l'outil garde la même marge que les textes au-dessus */
@media (max-width: 478px) {
  #brxe-rfbdec {
    padding-inline: 12px;
  }
}
/* Tablette : logos partenaires puis bouton « Guide d'utilisation » centré dessous, sur une ligne */
@media (min-width: 479px) and (max-width: 1099px) {
  #brxe-jtvlvz {
    flex-direction: column;
    row-gap: 16px;
  }
  #brxe-ndlzbj,
  #brxe-uqcqzh {
    width: 100%;
  }
  #brxe-uqcqzh {
    align-items: center;
  }
  #brxe-a83873 {
    white-space: nowrap;
  }
}

/* ---------- Accueil : encadré tarif ---------- */

/* Le prix est dans sa case (components/Interactive.tsx, DynamicPrice) et non plus posé par-dessus
   à une hauteur fixe : mêmes tailles qu'avant (48 / 40 / 36 px), il suit maintenant le titre */
#brxe-uxsqmr .repeater-item:nth-child(1) .pricing-table-price {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
}
@media (max-width: 768px) {
  #brxe-uxsqmr .repeater-item:nth-child(1) .pricing-table-price {
    font-size: 40px;
  }
}
@media (max-width: 478px) {
  #brxe-uxsqmr .repeater-item:nth-child(1) .pricing-table-price {
    font-size: 36px;
  }
}

/* ---------- Preuve sociale (components/SocialProof.tsx, public/js/social-proof.js) ---------- */

/* Mêmes cartes que bloodsense.ai, aux couleurs d'AI DiagMe : bleu nuit pour le texte,
   rouge de la croix pour le prénom, le lien et le bouton */
.pop-zone,
.pop {
  --sp-bg: #fff;
  --sp-surface: #f5f6fa;
  --sp-ink: var(--adm-dark);
  --sp-muted: #5b6b74;
  --sp-brand: var(--adm-red);
  --sp-brand-hover: #9a1f1d;
  --sp-brand-wash: #fbe9e8;
  --sp-btn: var(--adm-red);
  --sp-btn-hover: #9a1f1d;
  --sp-verified: #224c5c;
  --sp-z: 90;
}
.pop-zone,
.pop.pop-cta {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: var(--sp-z);
  width: min(380px, 100vw - 32px);
}
.pop-zone {
  pointer-events: none;
}
.pop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  padding-inline: 14px 40px;
  background: var(--sp-bg);
  color: var(--sp-ink);
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  box-shadow: 0 16px 40px -18px #0a293573, 0 2px 6px #0a29350f;
  transition: opacity 1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1), visibility 1s, translate 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.pop.pop-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.pop.pop-on:hover,
.pop.pop-on:focus-within {
  border-color: var(--sp-brand-wash);
  translate: 0 -4px;
  box-shadow: 0 22px 48px -18px #0a29358c, 0 4px 10px #0a293514;
}
.pop-logo {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  height: 56px;
  background: var(--sp-surface);
  border-radius: 12px;
}
.pop-logo img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.pop-body {
  min-width: 0;
}
.pop p {
  margin: 0;
}
.pop-title {
  text-wrap: balance;
}
.pop-name {
  color: var(--sp-brand);
  font-weight: 700;
}
.pop-cta .pop-name {
  color: var(--sp-ink);
  font-size: 17px;
  line-height: 1.3;
}
.pop-country {
  color: var(--sp-muted);
  font-size: 14px;
  white-space: nowrap;
}
.pop-flag {
  display: inline-block;
  width: 18px;
  height: 13.5px;
  margin-inline-start: 6px;
  vertical-align: -1px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #0a293514;
}
.pop .pop-text {
  margin-top: 2px;
  text-wrap: pretty;
}
.pop .pop-meta {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 13px;
}
.pop-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: bottom;
  color: var(--sp-verified);
  font-weight: 600;
}
.pop-check {
  flex: none;
  width: 15px;
  height: 15px;
}
.pop-check-seal {
  fill: var(--sp-verified);
  stroke: var(--sp-verified);
  stroke-width: 1.6px;
  stroke-linejoin: round;
}
.pop-check-tick {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pop.pop-cta {
  align-items: flex-start;
}
.pop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  background: var(--sp-btn);
  color: #fff;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s;
}
.pop-btn:hover,
.pop-btn:focus-visible {
  background: var(--sp-btn-hover);
  color: #fff;
}
.pop-trust {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.pop-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sp-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.pop-trust .pop-check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: var(--sp-brand-wash);
  color: var(--sp-brand);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.pop-link {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 0;
  color: var(--sp-brand);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.pop-link:hover {
  color: var(--sp-brand-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pop-close {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--sp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pop-close:hover {
  color: var(--sp-ink);
}
@media (max-width: 759px) {
  .pop-btn {
    padding: 0 12px;
    font-size: 14px;
    white-space: nowrap;
  }
  .pop-zone,
  .pop.pop-cta {
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pop {
    transition: none;
    transform: none;
  }
  .pop.pop-on:hover,
  .pop.pop-on:focus-within {
    translate: none;
  }
}

/* Plan du site (/plan-du-site/) : listes longues sur deux colonnes à partir de la tablette */
@media (min-width: 768px) {
  .plan-du-site .plan-du-site-liste {
    columns: 2;
    column-gap: 3rem;
  }
  .plan-du-site .plan-du-site-liste li {
    break-inside: avoid;
  }
}

/* ---------- Contact : formulaire ---------- */

/* Le CSS importé donne au texte saisi la couleur du fond des champs (#0a2935) :
   on l'écrit en clair, comme les textes d'exemple et la liste déroulante */
#brxe-cb7026 .form-group input,
#brxe-cb7026 textarea {
  color: var(--bricks-color-bvumks);
}

/* ---------- Listes d'articles (/publications/, /category/…/, pages suivantes) ----------
   Filtre par rubrique et introduction : lib/listing.mjs. Cartes de même hauteur, image 16:9,
   titre et extrait limités à 3 lignes, carte entière cliquable. */

/* Filtre par rubrique : pastilles centrées ; sur mobile, une ligne qui défile horizontalement */
.adm-rubriques {
  margin-top: 28px;
  width: 100%;
}
.adm-rubriques ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adm-rubrique {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--adm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--adm-dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.adm-rubrique:hover {
  border-color: var(--adm-red);
  color: var(--adm-red);
}
.adm-rubrique.is-active {
  background: var(--adm-red);
  border-color: var(--adm-red);
  color: #fff;
}
.adm-rubrique-nb {
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef3f6;
  color: #5b6b74;
  font-size: 12px;
  font-weight: 600;
}
.adm-rubrique.is-active .adm-rubrique-nb {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@media (max-width: 767px) {
  .adm-rubriques ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 16px 6px;
    margin: 0 -16px;
  }
  .adm-rubriques ul::-webkit-scrollbar {
    display: none;
  }
}

/* Titre d'une rubrique : H1, introduction, filtre */
.category .bricks-archive-title-wrapper {
  margin: 48px auto 40px;
}
.adm-rubrique-intro {
  max-width: 760px;
  margin: 14px auto 0;
  color: #3f4f58;
  font-size: 17px;
  line-height: 1.6;
}

/* Grille de cartes */
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-wrapper[data-layout="grid"],
.category #brx-content .brxe-posts > .bricks-layout-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-wrapper[data-layout="grid"] > .bricks-layout-item,
.category #brx-content .brxe-posts > .bricks-layout-wrapper > .bricks-layout-item {
  width: auto;
  margin: 0;
  padding: 0;
}
/* Repère de fin de boucle de Bricks (élément vide) : hors de la grille */
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-wrapper[data-layout="grid"] > .brx-query-trail,
.category #brx-content .brxe-posts > .bricks-layout-wrapper > .brx-query-trail {
  display: none;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-inner,
.category #brx-content .brxe-posts .bricks-layout-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-inner:hover,
.category #brx-content .brxe-posts .bricks-layout-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 41, 53, 0.12);
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .image-wrapper,
.category #brx-content .brxe-posts .image-wrapper {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef3f6;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .image-wrapper a,
.category #brx-content .brxe-posts .image-wrapper a {
  display: block;
  height: 100%;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .image-wrapper .image,
.category #brx-content .brxe-posts .image-wrapper .image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform 0.4s;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-inner:hover .image,
.category #brx-content .brxe-posts .bricks-layout-inner:hover .image {
  transform: scale(1.03);
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .content-wrapper,
.category #brx-content .brxe-posts .content-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 22px;
}
/* Titre : lien étiré sur toute la carte */
.blog #brx-content .ba-web-design-servicedetail_inner-content .content-wrapper h3,
.category #brx-content .brxe-posts .content-wrapper h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--adm-dark);
  font-size: 18px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .content-wrapper h3 a,
.category #brx-content .brxe-posts .content-wrapper h3 a {
  color: inherit;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .content-wrapper h3 a::after,
.category #brx-content .brxe-posts .content-wrapper h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .bricks-layout-inner:hover h3 a,
.category #brx-content .brxe-posts .bricks-layout-inner:hover h3 a {
  color: var(--adm-red);
}
/* Rubrique de l'article (/publications/) : au-dessus du lien étiré, cliquable */
.blog #brx-content .ba-web-design-servicedetail_inner-content .repeater-item [data-field-id="gmtumz"] {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .repeater-item [data-field-id="gmtumz"] a {
  color: inherit;
}
/* Date (rubriques) et extrait */
.category #brx-content .brxe-posts .content-wrapper [data-field-id="1"] {
  order: -1;
  color: #5b6b74;
  font-size: 13px;
}
.blog #brx-content .ba-web-design-servicedetail_inner-content .content-wrapper h3 ~ div,
.category #brx-content .brxe-posts .content-wrapper [data-field-id="2"] {
  display: -webkit-box;
  overflow: hidden;
  color: #3f4f58;
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Pagination : boutons (#brx-content : plus précis que la hauteur de 100 px fixée par Bricks) */
.blog #brx-content .bricks-pagination,
.category #brx-content .bricks-pagination {
  margin-top: 44px;
}
.blog #brx-content .bricks-pagination ul,
.category #brx-content .bricks-pagination ul {
  gap: 8px;
}
.blog #brx-content .bricks-pagination ul li > .page-numbers,
.category #brx-content .bricks-pagination ul li > .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--adm-dark);
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s;
}
.blog #brx-content .bricks-pagination ul li > a.page-numbers:hover,
.category #brx-content .bricks-pagination ul li > a.page-numbers:hover {
  border-color: var(--adm-red);
  color: var(--adm-red);
}
.blog #brx-content .bricks-pagination ul li > .page-numbers.current,
.category #brx-content .bricks-pagination ul li > .page-numbers.current {
  border-color: var(--adm-dark);
  background: var(--adm-dark);
  color: #fff;
}
.blog #brx-content .bricks-pagination ul li > .page-numbers.dots,
.category #brx-content .bricks-pagination ul li > .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: none;
}
.category #brx-content {
  padding-bottom: 64px;
}

/* Google AdSense dans les articles (lib/adsense.mjs) : espace autour du bloc ; masqué s'il reste vide */
.single-post #brx-content ins.adm-inarticle {
  margin-block: 2em;
}
.single-post #brx-content ins.adm-inarticle[data-ad-status="unfilled"] {
  display: none !important;
}

/* Google AdSense dans les listes d'articles (lib/listing.mjs) : pleine largeur, mention « Publicité »,
   masqué s'il reste vide */
.adm-listad {
  grid-column: 1 / -1;
  list-style: none;
  margin: 8px 0;
  text-align: center;
}
div.adm-listad {
  margin-top: 36px;
}
.adm-listad-label {
  display: block;
  margin-bottom: 6px;
  color: #5b6b74;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adm-listad:has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Annonces automatiques de Google (Auto ads) : un emplacement que Google ne remplit pas garde sa
   hauteur réservée (280 px et plus) et laisse un grand blanc, par exemple sous le titre des articles.
   Masqué, comme nos propres blocs vides (data-ad-status posé par AdSense). */
ins.adsbygoogle[data-ad-status="unfilled"],
.google-auto-placed:has(> ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none !important;
}

/* ---------- Appel à l'action au-dessus du pied de page (components/Footer.tsx, FooterStats.tsx) ----------
   Repris d'aidiagme.com (public/assets/css/footer-stats.css). Téléphone d'abord : titre et bouton, puis
   les quatre cartes deux par deux ; dès 768 px, cartes à gauche (sur le cercle vert sauge du fond) et
   titre à droite. */
#brx-footer .adm-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px 20px;
  align-items: center;
}
#brx-footer .adm-cta > .ba-sales-coaching-layout-call-to-action__inner-image-wrapper {
  width: 100%;
  order: 2;
}
#brx-footer .adm-cta > .ba-sales-coaching-layout-call-to-action__inner-content-wrapper {
  padding: 0;
  align-items: flex-start;
  align-self: center !important;
  row-gap: 16px;
  width: 100%;
}
#brx-footer .adm-cta h2 { margin: 0; text-wrap: balance; }

.adm-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bricks-color-idfxdd, #224c5c);
}
.adm-cta__eyebrow svg { flex: none; }

.adm-stats-wrap { display: grid; gap: 12px; width: 100%; }
.adm-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-stat {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(10, 41, 53, .06), 0 8px 24px -12px rgba(10, 41, 53, .18);
  color: var(--bricks-color-uyjhuz, #0a2935);
}
.adm-stat__icon { color: var(--bricks-color-idfxdd, #224c5c); flex: none; }
.adm-stat__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.adm-stat__value small { font-size: 16px; font-weight: 600; color: var(--bricks-color-idfxdd, #224c5c); }
.adm-stat__label { font-size: 14px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.adm-stat__detail { font-size: 12.5px; line-height: 1.35; color: #c9d6d2; }
.adm-stat__meter { display: block; height: 6px; border-radius: 3px; background: #e3e9e6; overflow: hidden; margin-top: auto; }
.adm-stat__meter i { display: block; height: 100%; border-radius: 3px; background: var(--bricks-color-idfxdd, #224c5c); }
.adm-stat__stars { display: flex; gap: 2px; }
.adm-stat__stars svg { display: block; }
.adm-stat--countries { background: var(--bricks-color-uyjhuz, #0a2935); color: #fff; }
.adm-stat--countries .adm-stat__icon { color: var(--bricks-color-fvvyxh, #bac8c1); }
.adm-stats__source { margin: 0; font-size: 12px; line-height: 1.4; color: #4a5f68; }

@media (min-width: 768px) {
  #brx-footer .adm-cta {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 48px;
    padding: 44px 48px;
  }
  #brx-footer .adm-cta > .ba-sales-coaching-layout-call-to-action__inner-image-wrapper { order: 0; }
  #brx-footer .adm-cta h2 { font-size: 30px; }
  .adm-stat__value { font-size: 34px; }
}