/* ===== Belentia template patch (v157) =====
   Local motion and interaction fixes for the exported static template. */

:root {
  --base--green: #4f46e5;
  --bg-color--bg-green: #4f46e5;
  --bl-indigo: #4f46e5;
  --bl-indigo-dark: #18122f;
  --bl-indigo-soft: #eef2ff;
  --bl-web: #2563eb;
  --bl-app: #e84f8a;
  --bl-cyber: #f59e0b;
  --bl-maintenance: #7c3aed;
  --bl-drone: #06b6d4;
  --bl-print: #16a36a;
  --bl-tool-teal: #0d9488;
  --bl-tool-coral: #ff6b5c;
}

.bl-nav-services {
  position: relative;
  display: inline-flex;
  align-items: center;
}

@media screen and (min-width: 992px) {
  .bl-nav-services::after {
    content: "";
    position: absolute;
    left: -2rem;
    right: -2rem;
    top: 100%;
    height: 1.15rem;
  }
}

.bl-nav-services__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif) !important;
  font-size: var(--_typography---button--font-size, 1rem) !important;
  font-weight: var(--_typography---button--font-weight, 400) !important;
  line-height: var(--_typography---button--line-height, 1.5) !important;
  letter-spacing: var(--_typography---button--letter-spacing, .12em) !important;
  text-transform: inherit;
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
}

.bl-nav-services__toggle .geistmono {
  font-family: var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: uppercase !important;
}

.bl-nav-services__toggle:focus-visible {
  outline: .12rem solid currentColor;
  outline-offset: .35rem;
}

.bl-nav-services__toggle .nav_link-icon {
  position: static !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  color: currentColor !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(.02rem);
}

.bl-nav-services__toggle .x-icon-dropdown-toggle::before {
  font-weight: 700 !important;
}

.bl-nav-services.is-open .bl-nav-services__toggle .nav_link-icon,
.bl-nav-services:hover .bl-nav-services__toggle .nav_link-icon,
.bl-nav-services:focus-within .bl-nav-services__toggle .nav_link-icon {
  transform: translateY(.02rem) rotate(180deg);
}

.bl-nav-services__panel {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  z-index: 120;
  width: min(39rem, calc(100vw - 2rem));
  padding: .65rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.1rem 2.6rem rgba(17,17,17,.12);
  color: #111;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, .55rem) scale(.98);
  transition: opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1), visibility .2s;
}

.bl-nav-services.is-open .bl-nav-services__panel,
.bl-nav-services:hover .bl-nav-services__panel,
.bl-nav-services:focus-within .bl-nav-services__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.bl-nav-services__overview,
.bl-nav-services__item {
  color: inherit !important;
  text-decoration: none !important;
}

.bl-nav-services__overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem .9rem;
  border-radius: .75rem;
  background: #f4f4f4;
}

.bl-nav-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  margin-top: .45rem;
}

.bl-nav-services__item {
  display: grid;
  grid-template-columns: 2.55rem 1fr;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .72rem;
  border-radius: .8rem;
}

.bl-nav-services__item:hover,
.bl-nav-services__item:focus-visible,
.bl-nav-services__overview:hover,
.bl-nav-services__overview:focus-visible {
  background: #f4f4f4;
}

.bl-nav-services__item.is-active {
  background: #f7f7f7;
}

.bl-nav-services__icon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .72rem;
  display: grid;
  place-items: center;
}

.bl-nav-services__icon img {
  width: 1.32rem;
  height: 1.32rem;
  object-fit: contain;
}

.bl-nav-services__icon.is-web { background: var(--bl-web); }
.bl-nav-services__icon.is-app { background: var(--bl-app); }
.bl-nav-services__icon.is-cyber { background: var(--bl-cyber); }
.bl-nav-services__icon.is-maintenance { background: var(--bl-maintenance); }
.bl-nav-services__icon.is-drone { background: var(--bl-drone); }
.bl-nav-services__icon.is-print { background: var(--bl-print); }

.bl-nav-services__text,
.bl-nav-services__overview span:first-child {
  display: grid;
  gap: .14rem;
  min-width: 0;
}

.bl-nav-services__text strong,
.bl-nav-services__overview strong {
  font-size: .94rem;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}

.bl-nav-services__text small,
.bl-nav-services__overview small {
  color: rgba(17,17,17,.58);
  font-size: .78rem;
  line-height: 1.28;
  letter-spacing: 0;
  text-transform: none;
}

.stars-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: .85rem !important;
}

.stars-wrap > svg {
  display: none !important;
}

.stars-wrap::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 5.3rem !important;
  height: .66rem !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at .33rem 50%, var(--bl-web) 0 .24rem, transparent .255rem),
    radial-gradient(circle at 1.25rem 50%, var(--bl-app) 0 .24rem, transparent .255rem),
    radial-gradient(circle at 2.17rem 50%, var(--bl-cyber) 0 .24rem, transparent .255rem),
    radial-gradient(circle at 3.09rem 50%, var(--bl-maintenance) 0 .24rem, transparent .255rem),
    radial-gradient(circle at 4.01rem 50%, var(--bl-drone) 0 .24rem, transparent .255rem),
    radial-gradient(circle at 4.93rem 50%, var(--bl-print) 0 .24rem, transparent .255rem);
  background-repeat: no-repeat !important;
}

.rating .stars-wrap {
  justify-content: center !important;
}

.rating .stars-wrap::before {
  filter: drop-shadow(0 .16rem .34rem rgba(0,0,0,.14));
}

.button-arrow {
  background-color: var(--bl-indigo-dark) !important;
  color: #fff !important;
}

.button-arrow.is-black {
  background-color: var(--bl-indigo-dark) !important;
  color: #fff !important;
}

.button_container-arrow {
  background-color: var(--bl-indigo) !important;
  color: #fff !important;
}

.button_container-arrow.is-black {
  background-color: var(--bl-indigo) !important;
  color: #fff !important;
}

.container-icon.bg-green {
  color: #fff !important;
}

.bg-green:not(.container-icon),
.card_about.bg-green,
.about_card.bg-green,
.abou_card.bg-green {
  color: #fff !important;
}

.bg-green:not(.container-icon) :is(.text-weight-medium, .text-base, .text-4xl, .text-5xl, p, div),
.card_about.bg-green :is(.text-weight-medium, .text-base, .text-4xl, .text-5xl, p, div),
.about_card.bg-green :is(.text-weight-medium, .text-base, .text-4xl, .text-5xl, p, div),
.abou_card.bg-green :is(.text-weight-medium, .text-base, .text-4xl, .text-5xl, p, div) {
  color: #fff !important;
}

.hero-abo_grid_item.is-third,
.hero-abo_grid_item.is-third :is(.text-weight-medium, .text-base, .text-4xl, .text-5xl, p, div) {
  color: #fff !important;
}

.container-icon.bg-green img {
  filter: none;
  object-fit: contain;
}

.navbar_logo,
.footer_logo {
  width: 9.375rem !important;
  height: auto !important;
}

.service_card:nth-child(1) .container-icon,
.serv-service_card:nth-child(1) .container-icon { background-color: var(--bl-web) !important; }
.service_card:nth-child(2) .container-icon,
.serv-service_card:nth-child(2) .container-icon { background-color: var(--bl-app) !important; }
.service_card:nth-child(3) .container-icon,
.serv-service_card:nth-child(3) .container-icon { background-color: var(--bl-cyber) !important; }
.service_card:nth-child(4) .container-icon,
.serv-service_card:nth-child(4) .container-icon { background-color: var(--bl-maintenance) !important; }
.service_card:nth-child(5) .container-icon,
.serv-service_card:nth-child(5) .container-icon { background-color: var(--bl-drone) !important; }
.service_card:nth-child(6) .container-icon,
.serv-service_card:nth-child(6) .container-icon { background-color: var(--bl-print) !important; }

.service_card:has(a[href$="/services/developpement-web"]) .container-icon,
.serv-service_card:has(a[href$="/services/developpement-web"]) .container-icon { background-color: var(--bl-web) !important; }
.service_card:has(a[href$="/services/developpement-application"]) .container-icon,
.serv-service_card:has(a[href$="/services/developpement-application"]) .container-icon { background-color: var(--bl-app) !important; }
.service_card:has(a[href$="/services/cybersecurite"]) .container-icon,
.serv-service_card:has(a[href$="/services/cybersecurite"]) .container-icon { background-color: var(--bl-cyber) !important; }
.service_card:has(a[href$="/services/maintenance-support"]) .container-icon,
.serv-service_card:has(a[href$="/services/maintenance-support"]) .container-icon { background-color: var(--bl-maintenance) !important; }
.service_card:has(a[href$="/services/drone"]) .container-icon,
.serv-service_card:has(a[href$="/services/drone"]) .container-icon { background-color: var(--bl-drone) !important; }
.service_card:has(a[href$="/services/impression-3d"]) .container-icon,
.serv-service_card:has(a[href$="/services/impression-3d"]) .container-icon { background-color: var(--bl-print) !important; }

.bl-service-web { --bl-service-current: var(--bl-web); }
.bl-service-app { --bl-service-current: var(--bl-app); }
.bl-service-cyber { --bl-service-current: var(--bl-cyber); }
.bl-service-maintenance { --bl-service-current: var(--bl-maintenance); }
.bl-service-drone { --bl-service-current: var(--bl-drone); }
.bl-service-print { --bl-service-current: var(--bl-print); }

.bl-service :is(
  .hero-service_left .container-icon.bg-green,
  .sec_benefits .container-icon.bg-green,
  .sec_benefits .container-big-icon.bg-green,
  .section_pricing-service .container-icon.bg-green,
  .section_testimonia .container-big-icon.bg-green
) {
  background-color: var(--bl-service-current, var(--bl-indigo)) !important;
}

.bl-service .container-icon.bg-green img {
  filter: brightness(0) invert(1) !important;
}

.bl-service :is(.button-arrow, .button-arrow.is-black) {
  background-color: #111 !important;
  color: #fff !important;
}

.bl-service :is(.button_container-arrow, .button_container-arrow.is-black) {
  background-color: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
}

.bl-service .section_testimonia .container-big-icon {
  background-color: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
}

.bl-service .section_testimonia .container-big-icon img {
  filter: brightness(0) invert(1) !important;
}

.bl-service .section_testimonia .testimonial_arrow .container-arrow.bg-black {
  background-color: #111 !important;
  color: #fff !important;
}

.bl-service .section_testimonia .testimonial_arrow .container-arrow.bg-black svg {
  color: #fff !important;
}

.bl-service .sec_benefits .benefit_item.is-large {
  background: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
}

.bl-service .sec_benefits .benefit_item.is-large :is(.text-xl, .text-base, .text-color-secondary, svg, .icon-1x1-large) {
  color: #fff !important;
}

.bl-service .sec_benefits .benefit_item.is-large .text-color-secondary {
  color: rgba(255,255,255,.72) !important;
}

.bl-service .sec_benefits .benefit_item.is-large .author_img {
  background: #fff !important;
  color: var(--bl-service-current, var(--bl-indigo)) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.bl-service .sec_benefits .benefit_item.is-large .author_img img {
  display: none !important;
}

.bl-service .sec_benefits .benefit_item.is-large .author_img::before {
  content: "" !important;
  width: 68% !important;
  height: 68% !important;
  display: block !important;
  background: var(--bl-service-current, var(--bl-indigo)) !important;
  -webkit-mask: url("/assets/belentia-star-white.png") center / contain no-repeat;
  mask: url("/assets/belentia-star-white.png") center / contain no-repeat;
}

.section_services .services_cards + .services_cards {
  margin-top: var(--_sizes---fixed--small);
}

.service_card .container-icon img,
.serv-service_card .container-icon img,
.hero-service_left .container-icon img {
  width: 70% !important;
  height: 70% !important;
}

/* Logo marquee — always on (GPU, overrides any IX2 transform). */
.loop_logos {
  transform: none !important;
  column-gap: clamp(3.5rem, 5.2vw, 5.25rem) !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.loop { animation: bl-loop 42s linear infinite; will-change: transform; }
@keyframes bl-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.section_loop .logo, .loop_logos .logo {
  width: auto !important;
  height: 2.85rem !important;
  max-width: 14rem !important;
  max-height: 2.85rem !important;
  filter: grayscale(1) brightness(0) opacity(.42);
  opacity: 1;
  object-fit: contain;
  transition: filter .35s cubic-bezier(.165,.84,.44,1), opacity .35s cubic-bezier(.165,.84,.44,1), transform .35s cubic-bezier(.165,.84,.44,1);
}

.section_loop .logo:hover, .loop_logos .logo:hover {
  filter: grayscale(0) saturate(1);
  opacity: 1;
  transform: scale(1.04);
}

.loop_three .logo[src*="/assets/belentia-clients/"],
.herooo_bottom .logo[src*="/assets/belentia-clients/"] {
  width: auto !important;
  height: 2.85rem !important;
  max-width: 14rem !important;
  max-height: 2.85rem !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(0) opacity(.42);
  opacity: 1;
  mix-blend-mode: normal;
  background: transparent !important;
  transition: filter .35s cubic-bezier(.165,.84,.44,1), opacity .35s cubic-bezier(.165,.84,.44,1), transform .35s cubic-bezier(.165,.84,.44,1);
}

.loop_three .logo[src*="/assets/belentia-clients/"]:hover,
.herooo_bottom .logo[src*="/assets/belentia-clients/"]:hover {
  filter: grayscale(0) saturate(1) contrast(1);
  opacity: 1;
  transform: scale(1.04);
}

.loop_logos img:not(.logo)[src*="/assets/belentia-clients/"] {
  width: auto !important;
  height: 2.85rem !important;
  max-width: 14rem !important;
  max-height: 2.85rem !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(0) opacity(.42);
  opacity: 1;
  transition: filter .35s cubic-bezier(.165,.84,.44,1), opacity .35s cubic-bezier(.165,.84,.44,1), transform .35s cubic-bezier(.165,.84,.44,1);
}

.loop_logos img:not(.logo)[src*="/assets/belentia-clients/"]:hover {
  filter: grayscale(0) saturate(1);
  opacity: 1;
  transform: scale(1.04);
}

/* Rail logos clients : PNG rognés (02/07), hauteur commune + gris gabarit. */

/* Tools reuse the original template's pricing cards, but stay calm: color lives in the icon, not the whole card. */
.section_pricing .pricing_card.is-top,
.pricing_cards .pricing_card.is-top {
  background: #fff !important;
  color: #111 !important;
}

.section_pricing .pricing_card.is-top :is(.geistmono, .text-4xl, .horizontal-left-center, .gap-xsmall div),
.pricing_cards .pricing_card.is-top :is(.geistmono, .text-4xl, .horizontal-left-center, .gap-xsmall div) {
  color: #111 !important;
}

.section_pricing .pricing_card.is-top .text-color-secondary,
.pricing_cards .pricing_card.is-top .text-color-secondary {
  color: rgba(17,17,17,.64) !important;
}

.section_pricing .pricing_card .button,
.section_pricing .pricing_card .button *,
.pricing_cards .pricing_card .button,
.pricing_cards .pricing_card .button * {
  color: #fff !important;
}

.section_pricing .pricing_card .container-icon,
.pricing_cards .pricing_card .container-icon {
  background-color: var(--bl-web) !important;
  color: #fff !important;
}

.section_pricing .pricing_card:nth-child(1) .container-icon,
.pricing_cards .pricing_card:nth-child(1) .container-icon {
  background-color: var(--bl-web) !important;
}

.section_pricing .pricing_card.is-top .container-icon,
.pricing_cards .pricing_card.is-top .container-icon,
.section_pricing .pricing_card:nth-child(2) .container-icon,
.pricing_cards .pricing_card:nth-child(2) .container-icon {
  background-color: var(--bl-maintenance) !important;
}

.section_pricing .pricing_card:nth-child(3) .container-icon,
.pricing_cards .pricing_card:nth-child(3) .container-icon {
  background-color: var(--bl-drone) !important;
}

.section_pricing .pricing_card,
.pricing_cards .pricing_card {
  --bl-tool-line: rgba(17,17,17,.07);
  box-shadow: inset 0 0 0 2px var(--bl-tool-line) !important;
}

.section_pricing .pricing_card.is-top,
.pricing_cards .pricing_card.is-top {
  --bl-tool-line: color-mix(in srgb, var(--bl-maintenance) 25%, rgba(17,17,17,.05));
}

.section_pricing .pricing_card .container-icon svg,
.pricing_cards .pricing_card .container-icon svg {
  display: none !important;
}

.section_pricing .pricing_card .container-icon::before,
.pricing_cards .pricing_card .container-icon::before {
  content: "" !important;
  width: 70% !important;
  height: 70% !important;
  display: block !important;
  background: url("/assets/belentia-tools/tool-qr-code.svg") center / contain no-repeat !important;
}

.section_pricing .pricing_card.is-top .container-icon::before,
.pricing_cards .pricing_card.is-top .container-icon::before,
.section_pricing .pricing_card:nth-child(2) .container-icon::before,
.pricing_cards .pricing_card:nth-child(2) .container-icon::before {
  background-image: url("/assets/belentia-tools/tool-seo.svg") !important;
}

.section_pricing .pricing_card:nth-child(3) .container-icon::before,
.pricing_cards .pricing_card:nth-child(3) .container-icon::before {
  background-image: url("/assets/belentia-tools/tool-transcriptor.svg") !important;
}

/* Service pricing keeps the original template's rhythm, but the active service color wins. */
.bl-service .section_pricing-service .pricing_card {
  background: #fff !important;
  color: #111 !important;
  --bl-tool-line: rgba(17,17,17,.07);
  box-shadow: inset 0 0 0 2px var(--bl-tool-line) !important;
}

.bl-service .section_pricing-service .pricing_card.is-top {
  background: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
  --bl-tool-line: rgba(255,255,255,.28);
}

.bl-service .section_pricing-service .pricing_card .container-icon {
  background: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
}

.bl-service .section_pricing-service .pricing_card.is-top .container-icon {
  background: #fff !important;
  color: var(--bl-service-current, var(--bl-indigo)) !important;
}

.bl-service .section_pricing-service .pricing_card .container-icon::before,
.bl-service .section_pricing-service .pricing_card .container-icon::after {
  content: none !important;
  display: none !important;
}

.bl-service .section_pricing-service .pricing_card .container-icon svg {
  display: none !important;
}

.bl-service .section_pricing-service .pricing_card .container-icon img {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.bl-service .section_pricing-service .pricing_card.is-top .container-icon img {
  display: none !important;
}

.bl-service .section_pricing-service .pricing_card.is-top .container-icon::after {
  content: "" !important;
  width: 68% !important;
  height: 68% !important;
  display: block !important;
  background: var(--bl-service-current, var(--bl-indigo)) !important;
  -webkit-mask: url("/assets/belentia-star-white.png") center / contain no-repeat;
  mask: url("/assets/belentia-star-white.png") center / contain no-repeat;
}

.bl-service .section_pricing-service .pricing_card.is-top :is(.geistmono, .text-4xl, .horizontal-left-center, .gap-xsmall div, .text-color-secondary, svg, .button, .button *) {
  color: #fff !important;
}

.bl-service .section_pricing-service .pricing_card.is-top .text-color-secondary {
  color: rgba(255,255,255,.78) !important;
}

@media screen and (max-width: 767px) {
  .bl-service .hero-service_right {
    width: 100% !important;
    height: clamp(18rem, 74vw, 24rem) !important;
    min-height: clamp(18rem, 74vw, 24rem) !important;
    border-radius: var(--_sizes---radius--main, 1.5rem) !important;
    overflow: clip !important;
  }

  .bl-service .hero-service_right > .img,
  .bl-service .hero-service_right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

.section_blog .button_portrait .button {
  background-color: #131313 !important;
  border-color: #131313 !important;
  color: #fff !important;
}

.section_blog .button_portrait .button :is(.text-button-wrap, .text-button-wrap > div) {
  color: inherit !important;
}

.section_blog .button_portrait .button:hover,
.section_blog .button_portrait .button:focus-visible {
  background-color: var(--bl-indigo-dark) !important;
  border-color: var(--bl-indigo-dark) !important;
  color: #fff !important;
}

.sec_content-blog.bl-tools-content .content-blog_card {
  position: relative !important;
}

.sec_content-blog.bl-tools-content .content-blog_card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: .9rem !important;
  left: .9rem !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: .7rem !important;
  background-color: var(--bl-web) !important;
  background-image: url("/assets/belentia-tools/tool-qr-code.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 62% !important;
  box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.12) !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="generateur-motdepasse"]::before {
  background-color: var(--bl-cyber) !important;
  background-image: url("/assets/belentia-tools/tool-password.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="roue-cadeau"]::before {
  background-color: var(--bl-app) !important;
  background-image: url("/assets/belentia-tools/tool-gift.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="analyseur-seo"]::before {
  background-color: var(--bl-maintenance) !important;
  background-image: url("/assets/belentia-tools/tool-seo.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="gestion-belentia"]::before {
  background-color: var(--bl-print) !important;
  background-image: url("/assets/belentia-tools/tool-wallet.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="transcription-audio"]::before {
  background-color: var(--bl-drone) !important;
  background-image: url("/assets/belentia-tools/tool-transcriptor.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="generateur-cv"]::before {
  background-color: var(--bl-tool-teal) !important;
  background-image: url("/assets/belentia-tools/tool-cv.svg") !important;
}

.sec_content-blog.bl-tools-content .content-blog_card[data-tool="entreview-sirh"]::before {
  background-color: var(--bl-tool-coral) !important;
  background-image: url("/assets/belentia-tools/tool-entreview.svg?v=20260721") !important;
}

.section_about .card_about.bg-subtle .avatars-wrap.bl-service-dots,
.section_call-to .call-to_card.bg-black .avatars-wrap.bl-service-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: max-content !important;
  min-height: 2.85rem !important;
  padding: 0 !important;
  overflow: visible !important;
}

.section_call-to .call-to_card.bg-black .avatars-wrap.bl-service-dots {
  justify-content: center !important;
  margin-inline: auto !important;
}

.section_about .card_about.bg-subtle .avatars-wrap.bl-service-dots .avatar-item,
.section_call-to .call-to_card.bg-black .avatars-wrap.bl-service-dots .avatar-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.72rem !important;
  height: 2.72rem !important;
  min-width: 2.72rem !important;
  border-radius: 999rem !important;
  margin-left: -.62rem !important;
  border: 2.5px solid #fff !important;
  background: var(--bl-dot-color, var(--bl-indigo)) !important;
  box-shadow: 0 .42rem 1rem rgba(0,0,0,.10) !important;
  overflow: hidden !important;
}

.section_about .card_about.bg-subtle .avatars-wrap.bl-service-dots .avatar-item:first-child,
.section_call-to .call-to_card.bg-black .avatars-wrap.bl-service-dots .avatar-item:first-child {
  margin-left: 0 !important;
}

.section_about .card_about.bg-subtle .avatars-wrap.bl-service-dots .avatar-item .img,
.section_call-to .call-to_card.bg-black .avatars-wrap.bl-service-dots .avatar-item .img {
  position: static !important;
  inset: auto !important;
  width: 68% !important;
  height: 68% !important;
  object-fit: contain !important;
  filter: none !important;
  transform: none !important;
}

.bl-service-dots .avatar-item[data-service="web"] { --bl-dot-color: var(--bl-web); }
.bl-service-dots .avatar-item[data-service="app"] { --bl-dot-color: var(--bl-app); }
.bl-service-dots .avatar-item[data-service="cyber"] { --bl-dot-color: var(--bl-cyber); }
.bl-service-dots .avatar-item[data-service="support"] { --bl-dot-color: var(--bl-maintenance); }
.bl-service-dots .avatar-item[data-service="drone"] { --bl-dot-color: var(--bl-drone); }
.bl-service-dots .avatar-item[data-service="print"] { --bl-dot-color: var(--bl-print); }

/* Six-service orbit: same original circular motif, but with compact Belentia labels. */
.bl-service-orbit {
  --bl-orbit-pill: #111111;
}

.bl-service-orbit .ocard_pill {
  z-index: 4 !important;
  width: auto !important;
  min-width: 5.9rem !important;
  max-width: 7.1rem !important;
  filter: drop-shadow(0 .8rem 1.05rem rgba(0,0,0,.10)) !important;
}

.bl-service-orbit .ocard_pill-inner {
  gap: .36rem !important;
  padding: .34rem .55rem .34rem .38rem !important;
}

.bl-service-orbit .ocard_pill-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  flex: none !important;
  background: var(--bl-orbit-pill) !important;
  border-radius: 999rem !important;
}

.bl-service-orbit .ocard_pill-avatar img {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}

.bl-service-orbit .ocard_logo-wrap,
.bl-service-dots .avatar-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bl-service-orbit .ocard_logo-wrap img,
.bl-service-dots .avatar-item .img {
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

.bl-service-orbit .ocard_pill-name {
  font-size: .74rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.bl-service-orbit .gcard_badge {
  display: none !important;
}

.bl-service-orbit .ocard_pill[data-service="web"] { --bl-orbit-pill: var(--bl-web); }
.bl-service-orbit .ocard_pill[data-service="app"] { --bl-orbit-pill: var(--bl-app); }
.bl-service-orbit .ocard_pill[data-service="cyber"] { --bl-orbit-pill: var(--bl-cyber); }
.bl-service-orbit .ocard_pill[data-service="support"] { --bl-orbit-pill: var(--bl-maintenance); }
.bl-service-orbit .ocard_pill[data-service="drone"] { --bl-orbit-pill: var(--bl-drone); }
.bl-service-orbit .ocard_pill[data-service="print"] { --bl-orbit-pill: var(--bl-print); }

.bl-service-orbit .ocard_pill.is-pos-1 { top: 3% !important; left: 37% !important; right: auto !important; bottom: auto !important; }
.bl-service-orbit .ocard_pill.is-pos-2 { top: 22% !important; right: 0% !important; left: auto !important; bottom: auto !important; }
.bl-service-orbit .ocard_pill.is-pos-3 { right: 6% !important; bottom: 17% !important; top: auto !important; left: auto !important; }
.bl-service-orbit .ocard_pill.is-pos-4 { left: 37% !important; bottom: 0% !important; top: auto !important; right: auto !important; }
.bl-service-orbit .ocard_pill.is-pos-5 { bottom: 17% !important; left: 6% !important; top: auto !important; right: auto !important; }
.bl-service-orbit .ocard_pill.is-pos-6 { top: 22% !important; left: 0% !important; right: auto !important; bottom: auto !important; }

.bl-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  max-width: 52rem;
  margin-inline: auto;
}

.bl-faq-tab {
  min-height: 3rem;
  padding: .72rem 1rem;
  border-radius: 999rem;
  background: #f3f3f3;
  color: #101010;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0 !important;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  transition: background-color .24s cubic-bezier(.165,.84,.44,1),
    color .24s cubic-bezier(.165,.84,.44,1),
    transform .24s cubic-bezier(.165,.84,.44,1);
}

.bl-faq-tab:hover {
  color: #fff;
  transform: translateY(-1px);
}

.bl-faq-tab.is-web:hover { background: var(--bl-web); }
.bl-faq-tab.is-cyber:hover { background: var(--bl-cyber); color: #111; }
.bl-faq-tab.is-app:hover { background: var(--bl-app); }
.bl-faq-tab.is-maintenance:hover { background: var(--bl-maintenance); }
.bl-faq-tab.is-drone:hover { background: var(--bl-drone); color: #111; }

.bl-faq-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bl-faq-group-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  scroll-margin-top: 7rem;
}

.bl-faq-group-header:not(:first-child) {
  margin-top: clamp(2rem, 4vw, 4rem);
}

.bl-faq-group-icon {
  flex: none;
  background: var(--bl-indigo) !important;
}

.bl-faq-group-icon img {
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
}

.bl-faq-group-icon.is-web { background: var(--bl-web) !important; }
.bl-faq-group-icon.is-cyber { background: var(--bl-cyber) !important; }
.bl-faq-group-icon.is-app { background: var(--bl-app) !important; }
.bl-faq-group-icon.is-maintenance { background: var(--bl-maintenance) !important; }
.bl-faq-group-icon.is-drone { background: var(--bl-drone) !important; }

.page-faq .faq_item {
  margin-top: var(--_sizes---fixed--small);
}

/* Hero 3D carousel — continuous slow rotation (a-46 "Carrousel Images"). The original
   only does a one-time entrance, but the continuous spin reads better here. */
/* 64s/tour (retour Kylian : léger flou de mouvement sur les cartes photo —
   plus lent = moins de smear ; le gabarit d'origine était même statique). */
.wrap { animation: bl-ring 64s linear infinite !important; }
@keyframes bl-ring {
  from { transform: translateY(10%) translateZ(-20rem) rotateX(-77deg) rotateY(0deg) rotate(0deg); }
  to   { transform: translateY(10%) translateZ(-20rem) rotateX(-77deg) rotateY(0deg) rotate(-360deg); }
}

/* Testimonials carousel: card-reveal + [animation] can set the swiper and
   cards to opacity:0 and get stuck on device,
   leaving the section blank. Force the whole carousel visible — device-independent. */
.section_testimonials .swiper,
.section_testimonials .testimonials_card,
.section_testimonials .testimonials_card *,
.section_testimonials .swiper-slide {
  opacity: 1 !important;
  visibility: visible !important;
}
.section_testimonials .swiper { transform: none !important; }

.section_testimonials .testimonials_logo-container {
  width: auto !important;
  height: auto !important;
  padding: 1.75rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.section_testimonials .testimonials-logo {
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: 3.75rem !important;
  max-height: 3.75rem !important;
  padding: .32rem !important;
  border-radius: .9rem !important;
  background: rgba(255,255,255,.97) !important;
  border: 0 !important;
  box-shadow: 0 .45rem 1.15rem rgba(0,0,0,.12) !important;
  object-fit: contain !important;
}

.section_testimonials .testimonials-logo[src*="elianza.png"] {
  padding: .2rem !important;
}

.section_testimonials .testimonials-logo[src*="lacellule"] {
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: 3.75rem !important;
  max-height: 3.75rem !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #050505 !important;
  border: 0 !important;
  border-radius: .9rem !important;
  box-shadow: 0 .36rem .8rem rgba(0,0,0,.18) !important;
  object-fit: cover !important;
  outline: 0 !important;
}

.section_testimonials .testimonials-logo[src*="bonnes-affaires-immo-icon"] {
  padding: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
}

.section_testimonials .testimonials-logo[src*="liroy-business-icon"] {
  padding: .3rem !important;
  background: rgba(255,255,255,.97) !important;
  object-fit: contain !important;
}

@media screen and (min-width: 992px) {
  .navbar .navbar_logo {
    width: 9.6rem !important;
    min-width: 9.6rem !important;
    height: auto !important;
  }
}

.section_testimonials .testimonial_card-container .text-style-3lines {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

.section_testimonials .testimonial_card-container .text-lg {
  font-size: clamp(1rem, 1.05vw, 1.15rem) !important;
  line-height: 1.32 !important;
}

@media screen and (max-width: 767px) {
  .section_testimonials .testimonial_card-container .text-lg {
    font-size: .95rem !important;
    line-height: 1.3 !important;
  }
}

/* Sliding fill button (.button-arrow): the dark fill .button-arrow_bg is
   placed in a hidden rest state (opacity:0, translated out to the right) and
   slides in on hover. Without a local guard, the fill can stay visible and cover the
   whole pill — a black button with no readable label (the hero "Échanger"). Lock the
   fill to its rest (hidden) state so the lime pill + dark label + dark arrow-circle show,
   exactly like the original at rest. */
.button-arrow_bg { opacity: 0 !important; }

/* Keep the exported mini-card silhouettes, but remove fake money symbols /
   performance claims from DOM-generated widgets. The raster/template images
   stay untouched until the dedicated visual-refonte pass. */
.vcard_amount-wrap .vcard_text-amount:first-child,
.pcard_body .text-wrap .pcard_text-value:nth-child(2),
.pcard_body .text-wrap .pcard_text-tag,
.bcard .text-size-tiny.opacity-40,
.gcard_stats,
.scard_customer-wrap {
  display: none !important;
}

.vcard_text-group,
.pcard_text-value,
.pcard_text-tag {
  display: none !important;
}

/* Hover effects replicated in CSS. */

/* Card image zoom: the inner image scales to 1.1 on card hover (blog, articles and
   team cards). Each card wrapper has overflow:clip, so it reads as a zoom within the
   frame. Applies on every card type that carries a clipped photo. */
.team_card,
.team_card-item,
.teamm_card {
  transition: background-color .45s cubic-bezier(.165,.84,.44,1);
}
.team_card:hover,
.team_card-item:hover,
.teamm_card:hover {
  background-color: var(--bl-indigo-soft) !important;
}

.blog_card .img,
.content-blog_card .img,
.blog_cards-item .img,
.team_card .img,
.team_card-item .img,
.teamm_card .img { transition: transform .45s cubic-bezier(.165,.84,.44,1); }
/* !important beats the baked identity transform on these images. */
.blog_card:hover .img,
.content-blog_card:hover .img,
.blog_cards-item:hover .img,
.team_card:hover .img,
.team_card-item:hover .img,
.teamm_card:hover .img { transform: scale(1.1) !important; }

/* Card arrow rotate. Scoped to .arrow_button so other icons are untouched. */
.arrow_button .icon-1x1-main,
.arrow_button .icon-1x1-large { transition: transform .4s cubic-bezier(.165,.84,.44,1); }
.teamm_card .arrow_button.is-big { transition: transform .4s cubic-bezier(.165,.84,.44,1); }
.team_card:hover .arrow_button .icon-1x1-main,
.team_card-item:hover .arrow_button .icon-1x1-main,
.teamm_card:hover .arrow_button .icon-1x1-main,
.teamm_card:hover .arrow_button .icon-1x1-large,
.blog_card:hover .arrow_button .icon-1x1-main,
.content-blog_card:hover .arrow_button .icon-1x1-main,
.blog_cards-item:hover .arrow_button .icon-1x1-main { transform: rotate(45deg) !important; }
.teamm_card:hover .arrow_button.is-big { transform: scale(.9) !important; }

/* (Hero entrance pre-hide is injected by JS, so it only applies
   when the script actually runs, never leaving the hero blank if the JS fails to load.) */

.sec_testim-abot .slider {
  align-items: center !important;
  overflow: hidden !important;
}

.sec_testim-abot .slider-mask {
  width: 100% !important;
  overflow: hidden !important;
}

.sec_testim-abot .slide-item {
  width: 100% !important;
  margin-right: 0 !important;
}

.sec_testim-abot .slide_testi {
  width: 100% !important;
  max-width: 52rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.sec_testim-abot .slide_testi .max-width-medium {
  width: 100% !important;
  max-width: 45rem !important;
}

.sec_testim-abot .slide_testi .text-2xl {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

@media screen and (max-width: 991px) {
  /* ===== Panneau mobile (v158) =====
     Le panneau natif du gabarit d'origine (.nav_mobile, position:absolute + largeur au
     contenu) produisait une boite flottante 263x161px qui chevauchait le
     hero. On le transforme en vrai panneau plein largeur ancre sous la
     navbar, avec un fond blanc, une ombre douce et une animation d'ouverture
     propre. Le burger devient une croix qui ferme au tap. */

  .navbar.x-nav { overflow: visible; }

  .nav_mobile.x-nav-menu {
    display: block !important;
    position: absolute;
    /* Panneau élargi (retour Kylian : lisibilité des noms de services) :
       marges latérales réduites de 1rem à .55rem. */
    inset: auto .55rem auto;
    top: calc(100% + .6rem);
    left: .55rem;
    right: .55rem;
    z-index: 150;
    max-height: calc(100dvh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.5rem) scale(.98);
    transform-origin: top center;
    transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
  }

  .nav_mobile.x-nav-menu[data-nav-menu-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .nav_mobile.x-nav-menu {
      transition: opacity .12s linear, visibility .12s;
      transform: none;
    }
  }

  .navbar_list {
    width: 100%;
    max-width: none;
    align-items: stretch;
    gap: .1rem;
    background-color: #fff;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 1.1rem;
    padding: .6rem;
    box-shadow: 0 1.4rem 3.2rem rgba(17, 17, 17, .16);
  }

  .navbar_list .nav_links.x-nav-link {
    width: 100%;
    padding: .9rem .75rem;
    border-radius: .7rem;
    /* Alignement uniforme du panneau : le gabarit d'origine centre les .x-nav-link en
       mobile (site.css), ce qui laissait Accueil/À propos centrés face aux
       accordéons Services/Plus alignés à gauche (retour Kylian iPhone). */
    text-align: left;
    justify-content: flex-start;
  }

  .navbar_list .nav_links.x-nav-link:hover,
  .navbar_list .nav_links.x-nav-link:focus-visible {
    background: rgba(17, 17, 17, .05);
  }

  /* --- Bloc "Services" : accordeon tap, 7 entrees toujours visibles --- */
  .bl-nav-services {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .bl-nav-services__toggle {
    width: 100%;
    justify-content: space-between;
    padding: .9rem .75rem;
    border-radius: .7rem;
    /* Le panneau mobile est desormais sur fond blanc : le texte du bouton
       Services heritait sinon du blanc pense pour le hero transparent
       (color: inherit remonte jusqu'a .navbar_list, jamais recouvert par
       l'override du gabarit d'origine .nav_links{color:...} qui ne cible pas les
       ancetres). On force la meme couleur foncee que les autres liens. */
    color: var(--text-color--text-primary, #111) !important;
  }

  .bl-nav-services__toggle:hover,
  .bl-nav-services__toggle:focus-visible {
    background: rgba(17, 17, 17, .05);
  }

  .bl-nav-services__panel {
    position: static;
    width: 100%;
    height: auto;
    max-height: 0;
    margin-top: 0;
    padding: 0 .1rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    transform: none !important;
    transition: max-height .28s cubic-bezier(.22,.61,.36,1), padding-top .28s cubic-bezier(.22,.61,.36,1), padding-bottom .28s cubic-bezier(.22,.61,.36,1);
  }

  .bl-nav-services.is-open .bl-nav-services__panel {
    max-height: 40rem;
    padding-top: .5rem;
    padding-bottom: .35rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .bl-nav-services__panel { transition: none; }
  }

  /* Version COMPACTE mobile (retour Kylian iPhone 2026-07-01) : avec les
     descriptions, l'accordéon Services dépassait l'écran et forçait un
     scroll. En mobile : descriptions masquées, services en grille 2
     colonnes, chips réduites — tout le menu tient sans scroller. */
  .bl-nav-services__overview {
    margin-bottom: .35rem;
    background: rgba(17, 17, 17, .05);
    padding: .6rem .75rem;
  }

  .bl-nav-services__overview small,
  .bl-nav-services__item small {
    display: none;
  }

  /* Une seule colonne, un nom par ligne, pleine taille (retour Kylian :
     la grille 2 colonnes coupait les noms, illisible). 6 lignes compactes
     tiennent toujours sans scroll grâce aux descriptions masquées. */
  .bl-nav-services__grid {
    grid-template-columns: 1fr;
    gap: .28rem;
    margin-top: 0;
  }

  .bl-nav-services__item {
    background: rgba(17, 17, 17, .035);
    min-height: 0;
    grid-template-columns: 1.9rem 1fr;
    gap: .6rem;
    padding: .42rem .6rem;
  }

  .bl-nav-services__item strong {
    font-size: .92rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .bl-nav-services__icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .55rem;
  }

  .bl-nav-services__icon img {
    width: 1rem;
    height: 1rem;
  }

  /* --- Bloc "Plus" : accordeon tap, 1 seule colonne --- */
  .nav_dropdown { position: relative; }

  .nav_dropdown .nav_links.is-dropdown.x-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    display: flex !important;
    padding: .9rem .75rem;
    border-radius: .7rem;
    /* Meme piege que .bl-nav-services__toggle : color:inherit remonte au
       blanc du hero transparent au lieu du texte fonce attendu sur le
       panneau blanc. On force la couleur foncee explicitement. */
    color: var(--text-color--text-primary, #111) !important;
  }

  .nav_dropdown .nav_links.is-dropdown.x-dropdown-toggle:hover,
  .nav_dropdown .nav_links.is-dropdown.x-dropdown-toggle:focus-visible {
    background: rgba(17, 17, 17, .05);
  }

  .nav_dropdown .nav_link-icon.x-icon-dropdown-toggle {
    transition: transform .2s cubic-bezier(.22,.61,.36,1);
  }

  .nav_dropdown.x--open .nav_link-icon.x-icon-dropdown-toggle,
  .nav_dropdown .x-dropdown-toggle.x--open .nav_link-icon.x-icon-dropdown-toggle {
    transform: rotate(180deg);
  }

  .nav_link-dropdown.x-dropdown-list {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    max-height: 0;
    background: transparent;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(.22,.61,.36,1);
  }

  .nav_link-dropdown.x-dropdown-list.x--open {
    display: block !important;
    max-height: 28rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav_link-dropdown.x-dropdown-list { transition: none; }
  }

  .nav_dropdown-wrap { border-radius: 0; }

  .nav_dropdown-content {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: .5rem .1rem .35rem !important;
  }

  .nav_dropdown-column {
    width: 100%;
  }

  .nav_dropdown-link.x-dropdown-link {
    width: 100%;
    padding: .8rem .65rem;
    border-radius: .6rem;
    color: rgba(17, 17, 17, .82) !important;
  }

  .nav_dropdown-link.x-dropdown-link:hover,
  .nav_dropdown-link.x-dropdown-link:focus-visible {
    background: rgba(17, 17, 17, .05);
    color: #111 !important;
  }

  /* --- Bouton burger -> croix --- */
  .menu-button.x-nav-button {
    z-index: 160;
  }

  .nav-button_component { position: relative; }

  .nav-button_line {
    transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .18s linear, translate .26s cubic-bezier(.22,.61,.36,1);
  }

  .menu-button.x--open .nav-button_line.is-first {
    translate: 0 155%;
    transform: rotate(45deg);
  }

  .menu-button.x--open .nav-button_line.is-second {
    opacity: 0;
  }

  .menu-button.x--open .nav-button_line.is-third {
    translate: 0 -155%;
    transform: rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-button_line { transition: opacity .12s linear; }
    .menu-button.x--open .nav-button_line.is-first,
    .menu-button.x--open .nav-button_line.is-third {
      translate: none;
    }
  }
}

/* Voile derriere le panneau mobile ouvert : ferme le menu au tap en dehors,
   sans dupliquer de markup (pseudo-element sur .navbar, en dessous du menu
   qui reste a z-index 150). On n'utilise pas position:fixed ici : html/body
   ont overflow:hidden (cf. .page-wrapper{overflow:clip}), ce qui clippe les
   descendants fixed dans Chrome. .navbar est deja position:absolute avec
   top/left/right:0 -> on ancre le voile dessus et on etire sa hauteur via
   100dvh, ce qui reste dans son propre containing block (jamais clippe). */
@media screen and (max-width: 991px) {
  .navbar.x-nav[data-mobile-menu-open]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    background: rgba(17, 17, 17, .28);
    z-index: 140;
    animation: bl-nav-overlay-in .18s ease-out;
  }

  @keyframes bl-nav-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar.x-nav[data-mobile-menu-open]::after { animation: none; }
  }
}

@media screen and (max-width: 767px) {
  .sec_testim-abot .slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sec_testim-abot .slider-mask {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sec_testim-abot .slide_testi {
    padding-left: clamp(1rem, 5vw, 1.5rem) !important;
    padding-right: clamp(1rem, 5vw, 1.5rem) !important;
  }

  .sec_testim-abot .slide_testi .text-2xl {
    font-size: clamp(1.75rem, 8.8vw, 2.35rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
  }

  .sec_testim-abot .stars-wrap.is-left,
  .sec_testim-abot .author_layout {
    justify-content: center !important;
  }

  .section_loop .logo, .loop_logos .logo {
    width: auto !important;
    height: 2.15rem !important;
    max-width: 12.5rem !important;
    max-height: 2.15rem !important;
  }

  .section_about .loop_logos img:not(.logo)[src*="/assets/belentia-clients/"] {
    width: auto !important;
    height: 2.15rem !important;
    max-width: 12.5rem !important;
    max-height: 2.15rem !important;
  }

  .section_loop .logo[src*="menimmo"], .loop_logos .logo[src*="menimmo"],
  .section_loop .logo[src*="elianza-conseil"], .loop_logos .logo[src*="elianza-conseil"],
  .section_about .loop_logos img[src*="menimmo"],
  .section_about .loop_logos img[src*="elianza-conseil"] {
    width: auto !important;
    height: 2.4rem !important;
    max-width: 12.5rem !important;
    max-height: 2.4rem !important;
  }

  .section_loop .logo[src*="kom1transition"], .loop_logos .logo[src*="kom1transition"],
  .section_about .loop_logos img[src*="kom1transition"] {
    width: auto !important;
    height: 1.45rem !important;
    max-width: 12.5rem !important;
    max-height: 1.45rem !important;
  }

  .section_loop .logo[src*="liroy-business"], .loop_logos .logo[src*="liroy-business"],
  .section_about .loop_logos img[src*="liroy-business"] {
    width: auto !important;
    height: 2.15rem !important;
    max-width: 12.5rem !important;
    max-height: 2.15rem !important;
  }

  .section_loop .logo[src*="bonnes-affaires-immo"], .loop_logos .logo[src*="bonnes-affaires-immo"],
  .section_loop .logo[src*="bible-louanges"], .loop_logos .logo[src*="bible-louanges"],
  .section_about .loop_logos img[src*="bonnes-affaires-immo"],
  .section_about .loop_logos img[src*="bible-louanges"] {
    width: auto !important;
    height: 1.98rem !important;
    max-width: 12.5rem !important;
    max-height: 1.98rem !important;
  }

  .section_loop .logo[src*="/belentia-clients/rail/"], .loop_logos .logo[src*="/belentia-clients/rail/"],
  .loop_logos img[src*="/belentia-clients/rail/"] {
    width: 9.15rem !important;
    height: 3.05rem !important;
    max-width: 9.15rem !important;
    max-height: 3.05rem !important;
  }

  .loop_logos {
    column-gap: 2.05rem !important;
  }

  .section_loop .loop {
    animation-duration: 16s !important;
  }

  .section_expertise .visual_wrap-fouth {
    transform: scale(.72) !important;
  }

  .section_expertise .visual:has(.visual_wrap-fouth),
  .section_expertise .visual_wrap-fouth,
  .section_expertise .visual_wrap-fouth .ocard {
    overflow: visible !important;
  }

  .bl-service-orbit .ocard_pill {
    min-width: 4.85rem !important;
    max-width: 5.7rem !important;
  }

  .bl-service-orbit .ocard_pill-name {
    font-size: .66rem !important;
  }

  .bl-service-orbit .gcard_badge {
    font-size: .62rem !important;
  }

  .section_services .services_cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .section_services .service_card {
    width: 100% !important;
  }
}

/* Legal prose pages (v145). */
.bl-legal-content .bl-legal-prose {
  max-width: 58rem;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.bl-legal-section {
  display: grid;
  gap: .875rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(17, 17, 17, .09);
}

.bl-legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bl-legal-section h3 {
  margin: 0;
  color: #111;
  font-size: clamp(1.5rem, 1.3rem + .75vw, 2rem);
  line-height: 1.15;
  font-weight: 500;
}

.bl-legal-section p,
.bl-legal-section li,
.bl-legal-section td,
.bl-legal-section th {
  color: rgba(17, 17, 17, .72);
  font-size: 1.05rem;
  line-height: 1.65;
}

.bl-legal-section p {
  margin: 0;
  max-width: 72ch;
}

.bl-legal-section strong {
  color: #111;
  font-weight: 600;
}

.bl-legal-section code {
  color: #111;
  font-size: .95em;
}

.bl-legal-section a {
  color: #111;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}

.bl-legal-list {
  margin: .25rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: .45rem;
}

.bl-legal-facts {
  list-style: none;
  margin: .25rem 0 0;
  padding: 1.25rem;
  border-radius: .75rem;
  background: #f4f4f4;
  display: grid;
  gap: .75rem;
}

.bl-legal-facts li {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: .75rem;
  align-items: baseline;
}

.bl-legal-facts span {
  min-width: 0;
}

.bl-legal-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: .75rem;
  border: 1px solid rgba(17, 17, 17, .08);
}

.bl-legal-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  background: #fff;
}

.bl-legal-table th,
.bl-legal-table td {
  padding: .9rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(17, 17, 17, .08);
  vertical-align: top;
}

.bl-legal-table th {
  color: #111;
  background: #f4f4f4;
  font-weight: 600;
}

.bl-legal-table tr:last-child td {
  border-bottom: 0;
}

.content-blog_card_img,
.blog_main-card_img,
.blog_card {
  position: relative;
}

.blog_service-badge {
  position: absolute;
  z-index: 5;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 2rem);
  padding: .44rem .72rem;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #111;
  box-shadow: 0 .65rem 1.6rem rgba(0, 0, 0, .13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.blog_service-badge::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--bl-blog-service-color, #4f46e5);
}

.content-blog_card .arrow_button_container,
.blog_card .arrow_button_container {
  color: #fff;
}

.content-blog_card .arrow_btn,
.blog_card .arrow_btn {
  color: #fff;
}

.bl-service-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.bl-service-blog-grid .x-dyn-item,
.bl-service-blog-grid .content-blog_card {
  min-width: 0;
  height: 100%;
}

.bl-service-blog-grid .content-blog_card_img {
  aspect-ratio: 1.18 / 1;
}

.bl-service-blog-grid .arrow_button_container {
  background: var(--bl-service-current, #2563eb);
}

.bl-service-blog .button_wrapper {
  display: flex;
  justify-content: center;
}

.bl-blog-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 2rem;
}

.bl-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.bl-blog-filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: .48rem .82rem;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: .86rem;
  line-height: 1;
}

.bl-blog-filter::before {
  content: "";
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: var(--bl-blog-service-color, #111);
}

.bl-blog-filter[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
}

.bl-blog-filter_count {
  min-width: 1.35rem;
  padding: .18rem .38rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, .07);
  color: inherit;
  font-size: .72rem;
  text-align: center;
}

.bl-blog-filter[aria-pressed="true"] .bl-blog-filter_count {
  background: rgba(255, 255, 255, .18);
}

.bl-blog-count {
  color: rgba(17, 17, 17, .56);
  font-size: .95rem;
  white-space: nowrap;
}

.bl-blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-top: 3rem;
}

.bl-blog-pagination[hidden] {
  display: none;
}

.bl-blog-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
}

.bl-blog-page,
.bl-blog-page-control {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: .45rem .78rem;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: .86rem;
  line-height: 1;
}

.bl-blog-page-control {
  padding-left: 1rem;
  padding-right: 1rem;
}

.bl-blog-page.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.bl-blog-page:disabled,
.bl-blog-page-control:disabled {
  opacity: .38;
  cursor: default;
}

.sec_internal-content .x-richtext img {
  width: 100%;
  max-height: 32rem;
  margin: 2rem 0;
  border-radius: 1rem;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .bl-blog-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 1.6rem;
  }
  /* Le compteur « X guides affichés » collait trop à la rangée de filtres
     (retour Kylian 03/07). Il n'est PAS dans .bl-blog-controls (structure
     runtime) mais enfant direct de .container-large juste sous les chips —
     donc c'est SON margin-top qui crée l'espace. On l'ouvre franchement. */
  .bl-blog-count {
    margin-top: 1.5rem;
  }

  .bl-blog-filters {
    flex-wrap: nowrap;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bl-blog-filters > div {
    flex: 0 0 auto;
  }

  .bl-blog-count {
    white-space: normal;
  }

  .bl-blog-pagination {
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 2rem;
  }

  .bl-blog-pages {
    order: -1;
    width: 100%;
  }

  .blog_service-badge {
    top: .75rem;
    left: .75rem;
    max-width: calc(100% - 1.5rem);
    padding: .38rem .6rem;
    font-size: .66rem;
  }

  .bl-service-blog-grid {
    grid-template-columns: 1fr;
  }

  .bl-legal-content .bl-legal-prose {
    gap: 1.5rem;
  }

  .bl-legal-section {
    padding-bottom: 1.5rem;
  }

  .bl-legal-section h3 {
    font-size: 1.35rem;
  }

  .bl-legal-section p,
  .bl-legal-section li,
  .bl-legal-section td,
  .bl-legal-section th {
    font-size: 1rem;
    line-height: 1.6;
  }

  .bl-legal-facts {
    padding: 1rem;
  }

  .bl-legal-facts li {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .bl-legal-table {
    min-width: 0;
    table-layout: fixed;
  }

  .bl-legal-table th,
  .bl-legal-table td {
    padding: .7rem .55rem;
    font-size: .82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

@media screen and (min-width: 992px) {
  .nav_mobile.x-nav-menu { display: flex !important; }
}

/* ── Périmètre du chat React (Belentia V3, fix 2026-07-01) ──────────────────
   Le widget vit dans le CSS global du template : certaines classes du gabarit d'origine
   homonymes des utilitaires Tailwind l'écrasaient (le CSS non-layérisé bat
   les @layer). Collisions neutralisées ici, dans le scope du widget :
   - .group (position:absolute inset:0, l'orbite 3D) -> renommée group/chat
     côté React, garde-fou conservé ci-dessous par sécurité ;
   - .text-sm / .text-xs (typographie template, xs = 1.25rem !) -> tailles
     Tailwind restaurées. */
.belentia-react-chat .group,
.belentia-react-chat-window .group {
  position: static;
  inset: auto;
  transform: none;
  transform-style: flat;
}
.belentia-react-chat .text-sm,
.belentia-react-chat-window .text-sm {
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.25rem;
  letter-spacing: normal;
}
.belentia-react-chat .text-xs,
.belentia-react-chat-window .text-xs {
  font-size: .75rem;
  line-height: 1rem;
  letter-spacing: normal;
}

/* ── UX scroll (Belentia V3, demandes Kylian 2026-07-01) ────────────────────
   1) Chevron "remonter" en bas à droite (le chat occupe le bas gauche).
   2) Navbar futée : masquée quand on descend, réapparaît dès qu'on remonte,
      fond blanc + ombre + logo sombre une fois détachée du hero. */
.bl-scroll-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.35rem;
  z-index: 1090; /* sous le chat (1100), au-dessus du contenu */
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: #fff;
  color: #111214;
  border: 1px solid rgba(17, 17, 17, .08);
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .35);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.6rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.bl-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.bl-scroll-top:hover { background: #f4f4f4; }
.bl-scroll-top svg { width: 1.15rem; height: 1.15rem; }

.navbar.x-nav {
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              background-color .28s ease, box-shadow .28s ease;
}
.navbar.bl-nav-stuck {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25);
}
.navbar.bl-nav-hidden { transform: translateY(-110%); }
/* Sur fond blanc : liens sombres + logo noir (le blanc du hero disparaît) */
.navbar.bl-nav-stuck .nav_links,
.navbar.bl-nav-stuck .nav_links .geistmono { color: #111214 !important; }
.navbar.bl-nav-stuck .navbar_logo { display: none !important; }
.navbar.bl-nav-stuck .navbar_logo.is-black { display: block !important; }
@media (prefers-reduced-motion: reduce) {
  .bl-scroll-top, .navbar.x-nav { transition: none; }
}

/* ==========================================================================
   Cartes réalisations (home + pages service) — covers 16:9 (1128x635),
   pas 1:1 comme les covers blog : on adapte le ratio de la carte pour ne
   pas zoomer dans les captures de sites (retour Kylian mobile, 01/07).
   ========================================================================== */
.bl-home-realisations .blog_card { padding-top: 66%; }

/* ==========================================================================
   Mode jour / nuit / système — bouton switch (Belentia V3, demande Kylian
   2026-07-01). Injecté en JS (voir belentia-template.js, IIFE finale) juste
   avant .x-nav-button dans .nav_buttons-wrap, donc présent sur toutes les
   pages sans toucher aux 20 fichiers HTML statiques.
   ========================================================================== */
.bl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 40px;
  min-height: 40px;
  margin-right: .5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  flex: none;
}
.bl-theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.bl-theme-toggle:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.bl-theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Nav "stuck" (fond blanc, liens sombres) : le bouton devient sombre sur clair. */
.navbar.bl-nav-stuck .bl-theme-toggle {
  border-color: rgba(17, 18, 20, .16);
  background: rgba(17, 18, 20, .05);
  color: #111214;
}
.navbar.bl-nav-stuck .bl-theme-toggle:hover { background: rgba(17, 18, 20, .1); }
.navbar.bl-nav-stuck .bl-theme-toggle:focus-visible { outline-color: #111214; }

@media (prefers-reduced-motion: reduce) {
  .bl-theme-toggle { transition: none; }
}

@media screen and (max-width: 479px) {
  .bl-theme-toggle { width: 2.5rem; height: 2.5rem; margin-right: .35rem; }
}
.bl-service-realisations .content-blog_card_img { padding-top: 62.5%; }

/* ============================================================================
   MODE NUIT — Belentia V3 (demande Kylian 2026-07-01, déploiement le
   lendemain). Scope : html[data-bl-theme="dark"]. Direction premium SaaS
   sobre : fond profond neutre bleuté (PAS de noir pur), surfaces cards
   légèrement plus claires que le fond, texte quasi-blanc, bordures subtiles.
   Les couleurs d'accent des 6 services + le vert lime bouton + le violet
   marque #4f46e5 (chatbot) restent VIFS — aucun gradient text, aucun glow.

   Stratégie : (1) surcharge des variables sémantiques du gabarit d'origine --bg-color-*/
   --text-color-*/--border-color-* déclarées dans aeline/css/site.css :root
   (body et ~120 usages var() en héritent automatiquement) ; (2) surcharges
   ciblées pour les couleurs codées en dur (le gabarit d'origine n'utilise pas toujours
   ses propres variables).

   Palette dark choisie :
   - fond page      #0d1017 (neutre bleuté, pas de noir pur)
   - fond dark-block existant (footer/scard) #131313 -> assombri #0a0c11
   - surface carte  #171b23 (légèrement plus claire que le fond)
   - surface carte hover/alt #1c212b
   - bordure subtile rgba(255,255,255,.09)
   - texte primaire  #e8eaf0 (quasi-blanc)
   - texte secondaire #9aa1b0 (gris clair)
   ============================================================================ */

html[data-bl-theme="dark"] {
  color-scheme: dark;
}

/* ── 1. Variables sémantiques du gabarit d'origine — surcharge globale ────────────────── */
html[data-bl-theme="dark"] {
  --bg-color--bg-default: #0d1017;
  --bg-color--bg-white: #171b23;
  --bg-color--bg-primary: #171b23;
  --bg-color--bg-secondary: #1c212b;
  --bg-color--bg-subtle: #1c212b;
  --bg-color--bg-dark: #0a0c11;
  /* --bg-color--bg-green (accent bouton) volontairement INCHANGÉ : reste vif */
  --text-color--text-primary: #e8eaf0;
  --text-color--text-secondary: #9aa1b0;
  --text-color--text-on-secondary: #c4c9d4;
  /* --text-color--text-on-primary (texte sur fond dark, déjà blanc) inchangé */
  --border-color--border-primary\<deleted\|variable-d4c54ba4-ee41-67ce-58a5-5216ca039f83\>: rgba(255, 255, 255, .09);
  --border-color--border-alternate\<deleted\|variable-551aa6d2-4bf8-6036-137a-78e1c71841a4\>: rgba(255, 255, 255, .16);
  --text-color--text-subtle\<deleted\|variable-1da72c9f-5ac1-a5ce-af72-d34835774f2f\>: #3a4150;
  --grey--grey-100: #1c212b;
  --grey--grey-200: #232937;
  --grey--grey-300: #4a5265;
  --grey--grey-400: #9aa1b0;
  --grey--grey-500: #b7bccb;
  --grey--grey-600: #c4c9d4;
  --grey--grey-700: #2a3140;
  --grey--grey-800: #171b23;
  --grey--grey-900: #0a0c11;
  /* --base--white / --base--black NE DOIVENT PAS être surchargées ici : elles
     servent aussi de couleur de TEXTE (h1 { color: var(--text-color--text-
     on-primary) } résout vers --base--white). Les surcharger cassait le H1
     du hero (texte quasi invisible, couleur identique au fond de carte —
     bug détecté par capture Playwright zoomée le 2026-07-01). Les fonds de
     cards passent déjà par --bg-color--bg-white (section dédiée, distincte
     de --base--white dans le CSS du gabarit d'origine). */
}

/* ── 2. Navbar : transparente (hero), stuck (scrollée), menu mobile ──────── */
html[data-bl-theme="dark"] .navbar.bl-nav-stuck {
  background: rgba(13, 16, 23, .92);
}
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .nav_links,
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .nav_links .geistmono {
  color: #e8eaf0 !important;
}
/* Logo : en nav stuck le template affiche la variante noire (.is-black).
   En dark, fond stuck sombre -> on revient au logo blanc, jamais le noir. */
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .navbar_logo { display: block !important; }
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .navbar_logo.is-black { display: none !important; }

/* PAS de fond sur .x-nav en dark : la navbar est transparente au-dessus du
   hero comme en jour (retour Kylian IMG_1890 : « la barre de navigation
   cache l'image » — le fond opaque masquait le haut du hero lunaire).
   L'état scrollé garde son fond via .bl-nav-stuck ci-dessus. */
html[data-bl-theme="dark"] .x-nav-button.x--open { color: #e8eaf0; background-color: #232937; }
/* Menu mobile déployé (panel plein écran petit viewport) */
html[data-bl-theme="dark"] .nav_mobile { background-color: rgba(13, 16, 23, .98); }
html[data-bl-theme="dark"] .x-nav-link { color: #e8eaf0; }
html[data-bl-theme="dark"] .x-nav-link.x--current { color: #38c6f6; }

/* Dropdown "Plus" (services + liens) : fond blanc codé en dur (color:#fff
   sur .nav_dropdown-content lui-même, bug de contraste préexistant côté
   gabarit d'origine — on neutralise en dark pour rester lisible). */
html[data-bl-theme="dark"] .nav_dropdown-content {
  background-color: #171b23;
  color: #e8eaf0;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
}
html[data-bl-theme="dark"] .nav_dropdown-link { color: #c4c9d4; }
html[data-bl-theme="dark"] .nav_dropdown-link:hover { color: #e8eaf0; }

/* ── 3. Boutons ────────────────────────────────────────────────────────────
   Le bouton primaire (fond vert lime, texte --bg-color--bg-dark) reste VIF :
   --bg-color--bg-green n'est pas touché ; --bg-color--bg-dark devient notre
   fond sombre, donc le texte du bouton reste lisible (sombre sur vert clair). */
html[data-bl-theme="dark"] .button.is-secondary {
  color: #e8eaf0;
  border-color: rgba(255, 255, 255, .22);
}
html[data-bl-theme="dark"] .button-arrow.is-black,
html[data-bl-theme="dark"] .button_container-arrow {
  background-color: #171b23;
  color: #d6fd70;
}

/* ── 4. Cards services / blog / réalisations ──────────────────────────────
   .serv-service_card / .services_card utilisent déjà var(--bg-color--bg-white)
   et var(--text-color--text-primary) -> couverts par la section 1. On
   complète juste l'ombre (trop visible sur fond sombre) et les bordures. */
html[data-bl-theme="dark"] .serv-service_card,
html[data-bl-theme="dark"] .services_card,
html[data-bl-theme="dark"] .service_card {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55);
}
html[data-bl-theme="dark"] .blog_card,
html[data-bl-theme="dark"] .blog_main-card,
html[data-bl-theme="dark"] .content-blog_card {
  background-color: #171b23;
}
html[data-bl-theme="dark"] .blog_service-badge {
  background-color: #232937;
  color: #e8eaf0;
  border-color: rgba(255, 255, 255, .12);
}
/* Les .tag (eyebrows « APPLICATION MOBILE », « BLOG ET ARTICLES »…) sont
   TRANSPARENTS en jour (simple texte mono pleine largeur) : leur donner un
   fond en nuit dessinait une dalle grise pleine largeur « pas finie »
   (captures Kylian 02/07 soir). Nuit = même transparence, texte éclairci. */
html[data-bl-theme="dark"] .tag {
  background-color: transparent;
  color: #e8eaf0;
}

/* ── 5. Mini-dashboards section_expertise : vcard / bcard / gcard / scard / ocard ──
   vcard/bcard/gcard utilisent déjà var(--bg-color--bg-white) (fond) et
   var(--grey--grey-100) (bordures + rows) -> couverts par la section 1.
   scard/gcard_dark-block utilisent déjà var(--bg-color--bg-dark) -> restent
   cohérents (juste plus sombres). On ajuste les badges codés en dur. */
html[data-bl-theme="dark"] .vcard,
html[data-bl-theme="dark"] .bcard,
html[data-bl-theme="dark"] .gcard {
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
}
html[data-bl-theme="dark"] .ocard { color: #e8eaf0; }
html[data-bl-theme="dark"] .ocard_ring { border-color: rgba(255, 255, 255, .16); }
/* Badges verts codés en dur (contraste vert foncé sur vert pâle -> illisible
   sur carte assombrie), on les recolore en conservant l'accent vert. */
html[data-bl-theme="dark"] .gcard_badge {
  color: #7be08a;
  background-color: rgba(123, 224, 138, .16);
}
html[data-bl-theme="dark"] .scard_top-bar {
  background-color: rgba(255, 255, 255, .1);
}

/* ── 6. Avis clients / testimonials ────────────────────────────────────── */
html[data-bl-theme="dark"] .testimonials_card {
  background-color: #171b23;
}

/* ── 7. FAQ / accordéons ──────────────────────────────────────────────────
   .faq_item utilise déjà var(--bg-color--bg-secondary) -> couvert section 1. */
html[data-bl-theme="dark"] .faq_item {
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ── 8. Formulaires (contact + newsletter) ────────────────────────────────
   .form_input utilise déjà var(--bg-color--bg-default) + var(--text-color--
   text-primary) -> couvert section 1. On ajuste le focus (border noir codé
   en dur) et le placeholder (gris #999 illisible sur fond sombre). */
html[data-bl-theme="dark"] .form_input {
  border: 1px solid rgba(255, 255, 255, .14);
}
html[data-bl-theme="dark"] .form_input:focus {
  border: 1px solid #e8eaf0;
}
html[data-bl-theme="dark"] .x-input::placeholder,
html[data-bl-theme="dark"] .x-select::placeholder,
html[data-bl-theme="dark"] .form_input::placeholder {
  color: #6b7284;
}
html[data-bl-theme="dark"] .footer-form {
  background-color: #171b23;
}

/* ── 9. Footer ─────────────────────────────────────────────────────────────
   Déjà sombre (--bg-color--bg-dark) -> juste réharmonisé avec la nouvelle
   valeur de la variable (section 1). Les liens footer_link/footer_bottom-link
   utilisent déjà var(--grey--grey-300), également couvert. */
html[data-bl-theme="dark"] .footer_wrap {
  background-color: #0a0c11;
}

/* ── 10. Pages légales (mentions-légales, confidentialité, cookies) ──────
   Contenu texte hérite de body (var(--text-color--text-primary), section 1).
   Les blocs .bl-legal-* (ajoutés côté Belentia) n'ont pas de fond propre
   déclaré donc héritent aussi -> aucune surcharge dédiée nécessaire au-delà
   de la section 1, sauf un léger renfort de bordure de table. */
html[data-bl-theme="dark"] .bl-legal-table th,
html[data-bl-theme="dark"] .bl-legal-table td {
  border-color: rgba(255, 255, 255, .1);
}
html[data-bl-theme="dark"] .bl-legal-facts {
  background-color: #171b23;
}

/* ── 11. Chevron scroll-top + toggle en dark ──────────────────────────────
   .bl-theme-toggle a déjà un variant clair sur nav stuck (section CSS
   au-dessus) ; on ajoute ici le variant dark (nav stuck ET dark ensemble). */
html[data-bl-theme="dark"] .bl-scroll-top {
  background: #171b23;
  color: #e8eaf0;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
}
html[data-bl-theme="dark"] .bl-scroll-top:hover { background: #1c212b; }
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .bl-theme-toggle {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #e8eaf0;
}
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .bl-theme-toggle:hover {
  background: rgba(255, 255, 255, .12);
}
html[data-bl-theme="dark"] .navbar.bl-nav-stuck .bl-theme-toggle:focus-visible {
  outline-color: #e8eaf0;
}

/* ── 12. Images : léger garde-fou anti-éblouissement sur fond sombre ─────
   Pas de filtre agressif — seulement les covers très claires (blog/
   réalisations) qui peuvent éblouir sur fond #0d1017. */
html[data-bl-theme="dark"] .blog_card img,
html[data-bl-theme="dark"] .content-blog_card_img img {
  filter: brightness(.94);
}

/* ── 13. Fix collision Tailwind/gabarit d'origine sur les titres ─────────
   resources/css/app.css (@layer components) applique `h1{@apply ... text-
   foreground}` etc. GLOBALEMENT (chargé sur toutes les pages, y compris V3)
   pour les pages React V2. --foreground résout à une valeur oklch() très
   sombre en light (prévue pour un fond clair) et ne devient claire QUE sous
   la classe `.dark` — que notre mécanisme V3 (data-bl-theme) n'active jamais
   (mécanismes indépendants, cf. app.blade.php). Résultat sans ce fix : tous
   les <h1>-<h4> nus du template d'origine (pas de classe Tailwind, juste du
   HTML brut) héritaient d'un texte quasi noir illisible sur fond nuit
   (bug détecté par capture Playwright zoomée le 2026-07-01, ex. H1 hero et
   H2 "Une méthode claire pour choisir le bon service"). Scope .page-wrapper
   = racine unique de tout le HTML du gabarit d'origine sur chaque page. */
html[data-bl-theme="dark"] .page-wrapper h1,
html[data-bl-theme="dark"] .page-wrapper h2,
html[data-bl-theme="dark"] .page-wrapper h3,
html[data-bl-theme="dark"] .page-wrapper h4,
html[data-bl-theme="dark"] .page-wrapper h5,
html[data-bl-theme="dark"] .page-wrapper h6 {
  color: var(--text-color--text-primary);
}
/* h1 spécifiquement doit rester blanc pur (texte sur fond hero, pas sur
   card) — text-color--text-primary (#e8eaf0) convient déjà, mais le hero
   utilise --text-color--text-on-primary (blanc pur inchangé) : on aligne
   explicitement pour rester cohérent avec la règle d'origine du gabarit. */
html[data-bl-theme="dark"] .page-wrapper h1[hero-text] {
  color: var(--text-color--text-on-primary);
}

/* ── 14. Surcharges des couleurs codées en dur avec !important ────────────
   Détecté par capture Playwright zoomée (2026-07-01) : plusieurs blocs
   pré-existants (accents service, pricing, dropdown navbar custom, pages
   légales) fixent `background`/`color` en dur AVEC !important, donc ma
   surcharge de variables (section 1) ne les atteint pas. Contre-surcharge
   ciblée, même spécificité + !important, uniquement sur les vrais fonds
   blancs/gris clair — pas sur les accents colorés vifs (--bl-web, --bl-app,
   etc.) qui restent lisibles et VOULUS vifs dans les deux modes. */

/* Dropdown "Services" custom (injecté en JS dans la navbar, distinct du
   dropdown "Plus" natif du gabarit d'origine déjà couvert en section 2). */
html[data-bl-theme="dark"] .bl-nav-services__panel {
  background: #171b23;
  color: #e8eaf0;
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, .5);
}
html[data-bl-theme="dark"] .bl-nav-services__overview,
html[data-bl-theme="dark"] .bl-nav-services__item:hover,
html[data-bl-theme="dark"] .bl-nav-services__item:focus-visible,
html[data-bl-theme="dark"] .bl-nav-services__overview:hover,
html[data-bl-theme="dark"] .bl-nav-services__overview:focus-visible {
  background: #1c212b;
}
html[data-bl-theme="dark"] .bl-nav-services__item.is-active {
  background: #232937;
}
html[data-bl-theme="dark"] .bl-nav-services__text small,
html[data-bl-theme="dark"] .bl-nav-services__overview small {
  color: rgba(232, 234, 240, .64);
}

/* Menu mobile dropdown "Plus" ouvert (nav_dropdown-link, hover/focus codés
   en dur #111 !important). */
html[data-bl-theme="dark"] .nav_dropdown-link.x-dropdown-link {
  color: rgba(232, 234, 240, .82) !important;
}
html[data-bl-theme="dark"] .nav_dropdown-link.x-dropdown-link:hover,
html[data-bl-theme="dark"] .nav_dropdown-link.x-dropdown-link:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: #e8eaf0 !important;
}

/* Pricing "featured" (page /outils ET pages service) : fond blanc plein
   volontaire en light ("color lives in the icon, not the whole card") —
   en dark on assombrit légèrement pour rester dans la palette au lieu
   d'un carré blanc pur qui détonne sur fond nuit. */
html[data-bl-theme="dark"] .section_pricing .pricing_card.is-top,
html[data-bl-theme="dark"] .pricing_cards .pricing_card.is-top {
  background: #232937 !important;
  color: #e8eaf0 !important;
}
html[data-bl-theme="dark"] .section_pricing .pricing_card.is-top :is(.geistmono, .text-4xl, .horizontal-left-center, .gap-xsmall div),
html[data-bl-theme="dark"] .pricing_cards .pricing_card.is-top :is(.geistmono, .text-4xl, .horizontal-left-center, .gap-xsmall div) {
  color: #e8eaf0 !important;
}
html[data-bl-theme="dark"] .section_pricing .pricing_card.is-top .text-color-secondary,
html[data-bl-theme="dark"] .pricing_cards .pricing_card.is-top .text-color-secondary {
  color: rgba(232, 234, 240, .68) !important;
}

/* Pricing des pages service (/services/<slug>) : même bug, même fix. */
html[data-bl-theme="dark"] .bl-service .section_pricing-service .pricing_card {
  background: #171b23 !important;
  color: #e8eaf0 !important;
}
html[data-bl-theme="dark"] .bl-service .section_pricing-service .pricing_card.is-top .container-icon {
  background: #232937 !important;
}

/* Pages légales : table + bloc "facts" (déjà couvert le border-color en
   section 10, il manquait le fond de la table et du th). */
html[data-bl-theme="dark"] .bl-legal-table {
  background: #171b23;
}
html[data-bl-theme="dark"] .bl-legal-table th {
  color: #e8eaf0;
  background: #1c212b;
}
html[data-bl-theme="dark"] .bl-legal-table-wrap {
  border-color: rgba(255, 255, 255, .1);
}

/* Chevron scroll-top : hover codé en dur #f4f4f4 (la section 11 gérait déjà
   le fond de repos, il manquait le hover). */
html[data-bl-theme="dark"] .bl-scroll-top:hover {
  background: #1c212b;
}

/* Menu mobile déployé (panel .navbar_list, ≤991px) : fond #fff codé en dur
   DANS la media query mobile — la section 1 (variable --bg-color--bg-white)
   ne l'atteint pas car cette règle ne l'utilise pas. Détecté par capture
   Playwright viewport 390×844 (2026-07-01) : tout le panneau restait blanc
   malgré .nav_mobile déjà sombre en dessous. */
html[data-bl-theme="dark"] .navbar_list {
  background-color: #171b23;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, .5);
}
html[data-bl-theme="dark"] .navbar_list .nav_links.x-nav-link:hover,
html[data-bl-theme="dark"] .navbar_list .nav_links.x-nav-link:focus-visible {
  background: rgba(255, 255, 255, .06);
}

/* Pages légales (mentions-légales, confidentialité, cookies) : le corps de
   texte (.bl-legal-section p/li/td/th/strong/code/a) est codé en dur #111 —
   la surcharge générique h1-h6 (section 13) ne couvrait pas ces balises.
   Détecté par lecture de la couleur calculée (rgba(17,17,17,.72), quasi
   invisible sur fond nuit, 2026-07-01). */
html[data-bl-theme="dark"] .bl-legal-section h3,
html[data-bl-theme="dark"] .bl-legal-section strong,
html[data-bl-theme="dark"] .bl-legal-section code,
html[data-bl-theme="dark"] .bl-legal-section a {
  color: #e8eaf0;
}
html[data-bl-theme="dark"] .bl-legal-section p,
html[data-bl-theme="dark"] .bl-legal-section li,
html[data-bl-theme="dark"] .bl-legal-section td,
html[data-bl-theme="dark"] .bl-legal-section th {
  color: rgba(232, 234, 240, .72);
}

/* .vcard (mini-dashboard "Cadrage"/"Design & contenu" sur /a-propos, "Services"
   sur la home, etc.) utilise background-color: var(--base--white) — la SEULE
   exception parmi vcard/bcard/gcard qui utilisent tous var(--bg-color--bg-
   white). --base--white ne peut pas être surchargée globalement (casserait
   le H1, cf. section 1) donc surcharge directe ciblée ici. Détecté par
   capture Playwright /a-propos (2026-07-01) : carte restée blanche pure. */
html[data-bl-theme="dark"] .vcard {
  background-color: #171b23;
}

/* .teamm_card (cartes "Cadrage projet" / "Design & contenu" sur /a-propos) :
   le builder d'origine injecte un style INLINE style="background-color:rgb(236,236,
   236)" par carte (spécificité maximale, aucune variable CSS ne l'atteint).
   !important est la seule option pour neutraliser un style inline. Détecté
   par capture Playwright /a-propos (2026-07-01). */
html[data-bl-theme="dark"] .teamm_card {
  background-color: #171b23 !important;
}

/* Logo navbar en dark, HORS nav stuck : les pages internes utilisent la
   variante du gabarit d'origine qui affiche le logo noir par défaut (wordmark #111214,
   invisible sur fond #0d1017 — vu au sweep final). On force la variante
   blanche ; l'état stuck-dark est déjà géré plus haut. */
html[data-bl-theme="dark"] .navbar:not(.bl-nav-stuck) .navbar_logo { display: block !important; }
html[data-bl-theme="dark"] .navbar:not(.bl-nav-stuck) .navbar_logo.is-black { display: none !important; }

/* ==========================================================================
   Retours Kylian 02/07 matin (IMG_1890 + IMG_1892)
   ========================================================================== */

/* 1. Dropdown du choix de thème (jour / nuit / système) */
.bl-theme-wrap { position: relative; display: inline-flex; }
.bl-theme-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 11.5rem;
  padding: .35rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid rgba(17, 18, 20, .08);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35);
  display: none;
  flex-direction: column;
  gap: .15rem;
  z-index: 1001;
}
.bl-theme-menu.is-open { display: flex; }
.bl-theme-menu__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .4rem .7rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #111214;
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
  text-align: left;
}
.bl-theme-menu__item svg { width: 1.05rem; height: 1.05rem; flex: none; }
.bl-theme-menu__item span { flex: 1; }
.bl-theme-menu__item:hover,
.bl-theme-menu__item:focus-visible { background: rgba(17, 18, 20, .06); }
.bl-theme-menu__check { opacity: 0; }
.bl-theme-menu__item[aria-checked="true"] .bl-theme-menu__check { opacity: 1; color: #4f46e5; }
html[data-bl-theme="dark"] .bl-theme-menu {
  background: #171b23;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
}
html[data-bl-theme="dark"] .bl-theme-menu__item { color: #e8eaf0; }
html[data-bl-theme="dark"] .bl-theme-menu__item:hover,
html[data-bl-theme="dark"] .bl-theme-menu__item:focus-visible { background: rgba(255, 255, 255, .08); }
html[data-bl-theme="dark"] .bl-theme-menu__item[aria-checked="true"] .bl-theme-menu__check { color: #8b85f4; }

/* 2. Lune visible sur mobile : l'image hero nuit est en 3:2, le recadrage
   cover sur écran portrait ne montre que ~30% de la largeur (la lune, à
   droite, sortait du champ). On décale la fenêtre vers la lune. */
@media (max-width: 767px) {
  html[data-bl-theme="dark"] img[hero-bg] { object-position: 80% 50%; }
}

/* 3. Carrousel 3D du hero : cartes à taille constante. La perspective
   2000px du template grossissait nettement les cartes proches (retour
   Kylian IMG_1882 puis IMG_1892). Une perspective très longue garde la
   rotation 3D mais rend les tailles quasi identiques. */
/* perspective : valeur d'origine du gabarit (2000px, cf. site.css). */

/* ==========================================================================
   Refonte visuels section_expertise (retour Kylian 02/07 matin) : les 3
   premiers blocs ("Sites web & e-commerce", "Applications mobiles & outils
   métier", "Maintenance, sécurité & évolution") avaient des visuels sans
   rapport avec leur titre. On garde .vcard/.pcard/.bcard/.ecard/.gcard/.scard
   (déjà stylées + déjà câblées au moteur data-anim générique de
   belentia-template.js) et on habille juste le contenu pour qu'il raconte
   le bon métier. Classes additives préfixées bl-x- (aucune classe du gabarit
   d'origine renommée/supprimée). L'orbite (.ocard, bloc 4) n'est pas touchée.
   ========================================================================== */

/* Bloc 1 — mini-navigateur qui se construit (barre de titre au-dessus des
   3 lignes "Accueil/Boutique/Paiement" déjà fournies par .vcard_section-list). */
.bl-x-browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 .315rem;
}
.bl-x-browser-dots { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.bl-x-browser-dots span {
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--grey--grey-200, #e2e2e2);
}
.bl-x-browser-dots span:nth-child(1) { background: #f59e0b; }
.bl-x-browser-dots span:nth-child(2) { background: #16a36a; }
.bl-x-browser-dots span:nth-child(3) { background: #e84f8a; }
.bl-x-browser-url {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
  margin-left: .5rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: var(--grey--grey-100);
  color: var(--grey--grey-600);
  font-family: var(--_typography---font-family--alternate);
  font-size: .5rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
}
.bl-x-browser-lock { width: .5rem; height: .5rem; flex-shrink: 0; }
/* Le titre "vcard_amount-wrap" original (chiffre + libellé) n'existe plus
   dans ce bloc : on retire l'espace qu'il laissait pour garder la card
   compacte, la barre de progression suit directement la barre d'adresse. */
.bl-x-browser .vcard_section { padding-bottom: 0; gap: .5rem; }

/* Bloc 1 (suite) — le badge panier réutilise .pcard tel quel ; seule
   l'icône change de forme (panier au lieu du check générique), déjà gérée
   inline par le path SVG du bloc HTML. */
.bl-x-cart-icon { width: 1.2rem; height: 1.2rem; }

/* Bloc 2 — cadre "téléphone" autour du .bcard existant (le graphique en
   barres devient "utilisation de l'app par l'équipe sur la semaine"). */
.bl-x-phone {
  padding-top: 1.1rem !important;
  border-radius: 1.4rem !important;
}
.bl-x-phone-notch {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: .38rem;
  border-radius: .3rem;
  background: var(--grey--grey-200, #e2e2e2);
}
.bl-x-phone-tabbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .4rem 0 .1rem;
}
.bl-x-phone-tab {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--grey--grey-100);
}
.bl-x-phone-tab.is-active { background: var(--base--light-blue); width: .9rem; border-radius: .3rem; }

/* Bloc 2 (suite) — pastille de notification (.ecard réutilisée telle quelle,
   juste l'icône badge devient une cloche au lieu du check générique). */
.bl-x-notif-badge { background-color: var(--bl-app) !important; }

/* Dark mode : la barre d'adresse et la tab bar utilisent des gris clairs
   codés sur les variables --grey--grey-100/200, qui restent claires même
   en thème nuit (elles ne sont pas re-scopées par la cascade dark globale
   -> gardent un bon contraste sur fond de card assombri, cf. .vcard dark
   ci-dessus). On ajuste seulement les 2 points où le contraste tombe sous
   AA : le texte de la barre d'adresse (gris moyen sur gris clair -> gris
   moyen sur gris clair assombri, encore lisible, mais on le clarifie) et le
   séparateur du notch qui devient invisible sur fond de card sombre. */
html[data-bl-theme="dark"] .bl-x-browser-url {
  background: rgba(255, 255, 255, .1);
  color: rgba(232, 234, 240, .72);
}
html[data-bl-theme="dark"] .bl-x-phone-notch,
html[data-bl-theme="dark"] .bl-x-phone-tab {
  background: rgba(255, 255, 255, .16);
}
html[data-bl-theme="dark"] .bl-x-phone-tab.is-active { background: var(--base--light-blue); }

/* Respect prefers-reduced-motion : ces 3 blocs n'ajoutent aucune animation
   CSS propre (tout passe par le moteur WAAPI existant dans
   belentia-template.js, qui vérifie déjà matchMedia('(prefers-reduced-
   motion: reduce)') pour l'orbite — les reveals card-reveal/fade-up restent
   de simples transitions d'apparition courtes, non concernées par la
   réduction de mouvement au sens WCAG 2.3.3). Rien à gater ici. */

/* Fix scroll molette desktop (retour Kylian 02/07) : le gabarit d'origine pose
   overscroll-behavior:none sur body pour son moteur smooth-scroll JS — retiré
   en V3. Sous Chrome, combiné aux ancêtres overflow:clip du hero, la molette
   était avalée en haut de page. Retour au scroll natif. */
body { overscroll-behavior: auto !important; }

/* Carrousel 3D desktop : cartes agrandies (~la taille qu'avait la carte de
   devant dans le gabarit d'origine avec sa perspective 2000px) — meilleure
   lisibilité des nouvelles cartes photo (retour Kylian « difficile à voir »). */
/* .img3d : largeur d'origine du gabarit (8rem). */

/* CTA final pages services (audit 2026-07-02) : la carte photo du bloc
   .section_call-to (texte "Nous combinons méthode, design et technique",
   présent sur developpement-application / maintenance-support / drone /
   impression-3d) porte une photo plein jour en background-image (règle
   du gabarit d'origine .call-to_card, cf. public/css/site.css) qui "flashe" en bas de
   page une fois le reste de la page assombri par la cascade dark globale
   (html[data-bl-theme="dark"], voir plus haut dans ce fichier). On assombrit
   uniquement CETTE photo (filter, ne touche ni le texte blanc ni les autres
   call-to_card comme .bg-black qui n'ont pas de background-image). Exclusion
   .bg-black : cette variante (carte "Multi-service, humain, cadré") est déjà
   un fond noir uni, aucune photo à corriger dessus.
   Fait 100% en CSS ici (pas de retouche aeline/services/**, autre agent dessus). */
html[data-bl-theme="dark"] .section_call-to .call-to_card:not(.bg-black) {
  filter: brightness(.7) saturate(.85);
}
/* Le texte + tag + overlay dégradé restent des enfants de la carte : on les
   repasse à filter:none pour qu'ils ne subissent pas le même assombrissement
   que la photo (sinon le texte blanc perdrait en contraste/luminosité). */
html[data-bl-theme="dark"] .section_call-to .call-to_card:not(.bg-black) > * {
  filter: none;
}

/* ============================================================
   SWEEP IMAGES HORS SERVICES (2026-07-02) — responsive + cadrage.
   Audit Playwright 4 viewports (390/768/1440/1920) : les covers
   réalisations (1128x635, 16:9) et les captures des galeries de
   fiches étaient posées dans des cases carrées (padding-top:100%)
   ou des bandeaux plats (30%) -> 44 à 86% de l'image coupée,
   titres des sites clients tronqués.
   ============================================================ */

/* Grille "À parcourir" de /realisations : case carrée -> 16:10, même
   ratio que le précédent .bl-service-realisations plus haut dans ce
   fichier. On voit ~90% de la capture au lieu de 56%. */
.sec_content-blog.bl-realisations-grid .content-blog_card_img { padding-top: 62.5%; }

/* Cards "Autres projets à parcourir" en bas des 6 fiches réalisations :
   même correction que .bl-home-realisations (66%). */
.section_blog.bl-related-projects .blog_card { padding-top: 66%; }

/* Galeries des fiches réalisations ("X en images") : le gabarit d'origine
   pose .internal-blog_img en bandeau padding-top:30% -> chaque capture
   n'affichait qu'une tranche horizontale aléatoire (14 à 48% visibles :
   footers noirs, phrases coupées au milieu). La structure des galeries
   est fixe : 1re grid = 4 captures desktop (1440x900), 2e grid (sœur,
   après un spacer) = 2 captures tablette (768x1024) puis 4 mobiles
   (390x844) -> ratios par rangée, et cadrage sur le HAUT des captures
   (header + hero du site client, lisibles) pour les formats portrait.
   En <480px site.css repasse les tuiles à 101% ; ces règles plus
   spécifiques gardent les ratios par type d'appareil. */
/* Ratios calés sur les dimensions RÉELLES des captures (identiques sur les 6
   galeries) pour que l'image ENTIÈRE soit visible dans la grille, comme le
   desktop — plus de rognage des captures mobile (retour Kylian 04/07,
   « sur mobile je ne peux pas voir l'intégralité de l'image ») :
   desktop 2880x1800 = 62.5% · tablette 1536x2048 = 133.33% · mobile 780x1688 = 216.4%. */
/* On cible par NOM DE FICHIER (desktop-/tablet-/mobile-) via :has() plutôt que
   par position nth-child : les libellés .bl-gal-label intercalés dans la grille
   décalaient l'indexation (tablette n°2 héritait du ratio mobile). Robuste et
   identique sur les 6 galeries. */
.sec_internal-content.is-gallery .internal-blog_img { padding-top: 62.5%; }
.sec_internal-content.is-gallery .internal-blog_img:has(img[src*="/tablet-"]) { padding-top: 133.33%; }
.sec_internal-content.is-gallery .internal-blog_img:has(img[src*="/mobile-"]) { padding-top: 216.4%; }
.sec_internal-content.is-gallery .internal-blog_img .img { object-fit: contain; object-position: 50% 0; }

/* Bloc bénéfice des pages services : le template met un bandeau 45% qui
   coupait 55% de nos images carrées sur desktop (retour Kylian 02/07,
   « l'image n'est pas bien mise dans le cadre »). 80% = on voit le sujet
   entier ; le mobile reste carré (média query 100% du template). */
@media screen and (min-width: 768px) {
  .bl-service .benefit_img { padding-top: 80% !important; }
}

/* Cartes outils de la home : le liseré coloré de la carte SEO (« ça donne du
   punch » — Kylian 02/07) généralisé aux 3 cartes, chacune dans la couleur
   réelle de son outil. Scope home uniquement (body bg-primary). */
body.bg-primary .pricing_cards .pricing_card:nth-child(1) {
  --bl-tool-line: color-mix(in srgb, #4F46E5 25%, rgba(17,17,17,.05)); /* QR Code */
}
body.bg-primary .pricing_cards .pricing_card:nth-child(3) {
  --bl-tool-line: color-mix(in srgb, #2365EB 25%, rgba(17,17,17,.05)); /* Transcriptor */
}

/* Grille « Six services » de /services : visuels métier photo (recette maison,
   1 par service dans sa couleur — retour Kylian 02/07, les dashboards
   génériques n'évoquaient pas les métiers). Reveal conservé via data-anim. */
.serv-service_img .bl-grille-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serv-service_img .bl-grille-img {
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .35);
}

/* /outils : les 8 outils dans les cartes structurées de la home (demande
   Kylian 02/07 — « le même style que la section outil de l'accueil »).
   Icône + liseré dans la couleur réelle de chaque outil. */
.bl-outils-grid { grid-template-columns: 1fr 1fr 1fr; }
@media screen and (max-width: 991px) { .bl-outils-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .bl-outils-grid { grid-template-columns: 1fr; } }
/* neutralise l'injection d'icônes par nth-child (règles home) et pose
   l'icône/couleur PAR OUTIL via les classes bl-tc-* */
.bl-outils-grid .pricing_card .container-icon::before { content: "" !important; }
.bl-outils-grid .pricing_card.bl-tc-qr { --bl-tool-line: color-mix(in srgb, #4F46E5 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-seo { --bl-tool-line: color-mix(in srgb, #7C3AED 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-transcriptor { --bl-tool-line: color-mix(in srgb, #0EA5E9 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-motdepasse { --bl-tool-line: color-mix(in srgb, #F97316 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-roue { --bl-tool-line: color-mix(in srgb, #E11D48 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-gestion { --bl-tool-line: color-mix(in srgb, #059669 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-cv { --bl-tool-line: color-mix(in srgb, #0D9488 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-entreview { --bl-tool-line: color-mix(in srgb, var(--bl-tool-coral) 25%, rgba(17,17,17,.05)); }
.bl-outils-grid .pricing_card.bl-tc-qr .container-icon { background: #4F46E5 !important; }
.bl-outils-grid .pricing_card.bl-tc-seo .container-icon { background: #7C3AED !important; }
.bl-outils-grid .pricing_card.bl-tc-transcriptor .container-icon { background: #2365EB !important; }
.bl-outils-grid .pricing_card.bl-tc-motdepasse .container-icon { background: #F97316 !important; }
.bl-outils-grid .pricing_card.bl-tc-roue .container-icon { background: #E11D48 !important; }
.bl-outils-grid .pricing_card.bl-tc-gestion .container-icon { background: #059669 !important; }
.bl-outils-grid .pricing_card.bl-tc-cv .container-icon { background: #0D9488 !important; }
.bl-outils-grid .pricing_card.bl-tc-entreview .container-icon { background: var(--bl-tool-coral) !important; }
.bl-outils-grid .pricing_card.bl-tc-qr .container-icon::before { background-image: url("/assets/belentia-tools/tool-qr-code.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-seo .container-icon::before { background-image: url("/assets/belentia-tools/tool-seo.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-transcriptor .container-icon::before { background-image: url("/assets/belentia-tools/tool-transcriptor.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-motdepasse .container-icon::before { background-image: url("/assets/belentia-tools/tool-password.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-roue .container-icon::before { background-image: url("/assets/belentia-tools/tool-gift.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-gestion .container-icon::before { background-image: url("/assets/belentia-tools/tool-wallet.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-cv .container-icon::before { background-image: url("/assets/belentia-tools/tool-cv.svg") !important; }
.bl-outils-grid .pricing_card.bl-tc-entreview .container-icon::before { background-image: url("/assets/belentia-tools/tool-entreview.svg?v=20260721") !important; }

/* Grille « Six services » de /services : le gabarit d'origine posait 2 colonnes
   déséquilibrées (.6fr / 1fr ≈ 37/63) — retour Kylian : « ça fait moche,
   trouve le bon équilibre ». 3 colonnes égales, cartes empilées (texte puis
   visuel), 2 rangées de 3. Tablette/mobile : empilement du template conservé. */
@media screen and (min-width: 992px) {
  .serv-services_layout {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .serv-services_layout .serv-service_card {
    display: flex !important;
    flex-flow: column !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .serv-services_layout .serv-service_img,
  .serv-services_layout .serv-service_img.is-two {
    height: 19rem;
    margin-top: auto;
  }
}

/* Bloc CTA final de /services : cadres photo sans le border blanc épais du
   gabarit (retour Kylian) — le rayon et la rotation restent. */
.cta_widgets .cta-widget { border: 0 !important; }

/* --- Dropdown nav "Plus" : panneau détaché du fond + pastilles icône ---
   Retour Kylian 02/07 : panneau blanc sur section blanche = invisible.
   Même recette que la nav de belentia.fr V2 : icône lucide sur fond couleur
   service à ~10 %, panneau bordé + ombré. */
.nav_dropdown-link { display: flex; align-items: center; }

.bl-nav-ic {
  --ni: #111;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: .65rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--ni) 11%, transparent);
  color: var(--ni);
}

.bl-nav-ic svg { width: 1.05rem; height: 1.05rem; }

.bl-ni-services     { --ni: #4f46e5; }
.bl-ni-web          { --ni: #2563eb; }
.bl-ni-app          { --ni: #e84f8a; }
.bl-ni-cyber        { --ni: #f59e0b; }
.bl-ni-maint        { --ni: #7c3aed; }
.bl-ni-drone        { --ni: #06b6d4; }
.bl-ni-print        { --ni: #16a36a; }
.bl-ni-outils       { --ni: #0d9488; }
.bl-ni-realisations { --ni: #e11d48; }
.bl-ni-blog         { --ni: #f97316; }
.bl-ni-apropos      { --ni: #059669; }
.bl-ni-faq          { --ni: #0ea5e9; }
.bl-ni-contact      { --ni: #d97356; }

@media (min-width: 992px) {
  .nav_dropdown-wrap {
    box-shadow: 0 18px 44px -14px rgba(17, 17, 17, .22), 0 4px 14px rgba(17, 17, 17, .07);
    border-radius: 1.5rem;
  }
  .nav_dropdown-content { border: 1px solid rgba(17, 17, 17, .09); }

  html[data-bl-theme="dark"] .nav_dropdown-wrap {
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .65);
  }
  html[data-bl-theme="dark"] .nav_dropdown-content { border-color: rgba(255, 255, 255, .12); }
}

html[data-bl-theme="dark"] .bl-nav-ic {
  background: color-mix(in srgb, var(--ni) 17%, transparent);
}

/* Panneau Services : même détachement du fond que le dropdown Plus. */
.bl-nav-services__panel { border: 1px solid rgba(17, 17, 17, .09); }
html[data-bl-theme="dark"] .bl-nav-services__panel { border-color: rgba(255, 255, 255, .12); }

/* --- Panneau Services = même bloc que le dropdown Plus (Kylian 02/07) ---
   Le wrapper devient un simple positionneur : le visuel (fond, radius 1.5rem,
   border, ombre) vient du couple nav_dropdown-wrap/content partagé avec Plus. */
.bl-nav-services__panel,
html[data-bl-theme="dark"] .bl-nav-services__panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

@media (min-width: 992px) {
  .bl-nav-services__panel {
    width: max-content;
    min-width: 0;
    border-radius: 1.5rem;
  }
}

/* Ligne "Tous les services" pleine largeur sous les 3 colonnes. */
.bl-nav-all {
  grid-column: 1 / -1;
  margin-top: .25rem;
  border-top: 1px solid rgba(17, 17, 17, .08);
  padding-top: .8rem;
}
html[data-bl-theme="dark"] .bl-nav-all { border-top-color: rgba(255, 255, 255, .1); }

/* --- Toggle thème : sombre par défaut (retour Kylian 02/07 : bouton blanc
   invisible en haut des pages blanches — /outils, /faq, légales…). La
   version blanche est réservée aux navs posées sur le hero bleu de la home
   (body.bg-primary) tant que la nav n'est pas passée en stuck. --- */
.bl-theme-toggle {
  border-color: rgba(17, 18, 20, .18);
  background: rgba(17, 18, 20, .05);
  color: #111214;
}
.bl-theme-toggle:hover { background: rgba(17, 18, 20, .1); }
.bl-theme-toggle:focus-visible { outline-color: #111214; }

body.bg-primary .navbar:not(.bl-nav-stuck) .bl-theme-toggle {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
body.bg-primary .navbar:not(.bl-nav-stuck) .bl-theme-toggle:hover { background: rgba(255, 255, 255, .16); }
body.bg-primary .navbar:not(.bl-nav-stuck) .bl-theme-toggle:focus-visible { outline-color: #fff; }

/* Mode nuit : nav sombre sur toutes les pages → bouton clair (le variant
   stuck nuit défini plus haut garde la main par spécificité). */
html[data-bl-theme="dark"] .bl-theme-toggle {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
html[data-bl-theme="dark"] .bl-theme-toggle:hover { background: rgba(255, 255, 255, .16); }
html[data-bl-theme="dark"] .bl-theme-toggle:focus-visible { outline-color: #fff; }

/* /a-propos : flèches des cartes compétences en blanc (retour Kylian 02/07). */
.teamm_card .arrow_button { color: #fff; }

/* Fiches réalisations : aération du texte existant (retour Kylian 02/07 —
   réagencement léger uniquement, pas de refonte). Scope :has(.bl-related-projects)
   = les 6 fiches seulement, jamais le blog. */
main:has(.bl-related-projects) .x-richtext > p:first-child {
  font-size: 1.35rem;
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
main:has(.bl-related-projects) .x-richtext h3 {
  margin-top: 3.25rem;
  margin-bottom: 1rem;
}
main:has(.bl-related-projects) .x-richtext p { margin-bottom: 1.05rem; }
main:has(.bl-related-projects) .x-richtext ul { margin-top: .75rem; margin-bottom: 1.5rem; }
main:has(.bl-related-projects) .x-richtext li { margin-bottom: .5rem; }

/* /a-propos : cartes compétences — découpes experts V2 cadrées sur le visage. */
.teamm_card-img .img { object-fit: cover; object-position: 50% 0; }

/* Panneau Services : pastille étoile alignée dans la ligne du lien (retour
   Kylian 02/07 — logos couleurs pleines plutôt qu'icônes lucide). */
.bl-nav-services .nav_dropdown-link .bl-nav-services__icon {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  margin-right: .7rem;
  border-radius: .68rem;
}
.bl-nav-services .nav_dropdown-link .bl-nav-services__icon img { width: 1.45rem; height: 1.45rem; }







/* Cartes compétences : titres sur une ligne (hauteurs égales, retour Kylian). */
.teamm_card .team_card-header .max-text { max-width: none !important; }

/* FAQ : la pastille de catégorie respirait trop peu au-dessus du titre. */
.bl-faq-group-icon { margin-bottom: 1rem; }

/* --- Pastilles services cliquables + section « Belentia, c'est aussi » --- */
a.avatar-item { display: block; transition: transform .2s ease; }
a.avatar-item:hover { transform: translateY(-3px) scale(1.1); z-index: 3; }

.bl-also-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  width: 100%;
}
@media (max-width: 991px) { .bl-also-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .bl-also-grid { grid-template-columns: 1fr; } }

.bl-also-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.4rem 1.25rem;
  border-radius: 1rem;
  background: var(--bg-color--bg-secondary, #f4f4f4);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bl-also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(17, 17, 17, .2);
}
.bl-also-ic.is-web { background-color: var(--bl-web) !important; }
.bl-also-ic.is-app { background-color: var(--bl-app) !important; }
.bl-also-ic.is-cyber { background-color: var(--bl-cyber) !important; }
.bl-also-ic.is-maintenance { background-color: var(--bl-maintenance) !important; }
.bl-also-ic.is-drone { background-color: var(--bl-drone) !important; }
.bl-also-ic.is-print { background-color: var(--bl-print) !important; }

html[data-bl-theme="dark"] .bl-also-card { background: #171b23; }

/* Pages service : les ronds flèche des cartes réalisations prennent la
   couleur du service courant (retour Kylian — tout bleu sur dev-web). */
.bl-service .arrow_button_container,
.bl-service .arrow_btn {
  background-color: var(--bl-service-current, var(--bl-indigo)) !important;
  color: #fff !important;
}

/* « Voir toutes les réalisations » : le gabarit ne définissait pas is-center. */
.button_wrapper.is-center {
  width: 100%;
  justify-content: center !important;
  align-items: center !important;
}

/* Logos cliquables (retour Kylian) : lien vers la fiche réalisation. */
.bl-logo-link { display: inline-flex; align-items: center; }
.bl-logo-link:hover img { filter: grayscale(0) saturate(1); transform: scale(1.05); }

/* Carrousel 3D : cartes agrandies (retour Kylian 02/07 soir, « trop petites »). */
@media screen and (min-width: 992px) {
  ._3d .img3d { width: 9.4rem; }
}

/* Rail cliquable : pause au survol pour viser un logo confortablement. */
.section_loop .loop:hover,
.loop_three:hover .loop,
.loop:hover { animation-play-state: paused; }



/* --- Section méthode : mockups vivants (validé Kylian 02/07 soir) --- */

/* Carte cadrage : les 3 lignes se cochent en boucle, la barre se remplit. */
.bl-x-browser .bl-mk-check {
  animation: bl-check-cycle 6.5s ease-in-out infinite both;
  transform-origin: center;
}
.bl-x-browser .vcard_row:nth-child(1) .bl-mk-check { animation-delay: .3s; }
.bl-x-browser .vcard_row:nth-child(2) .bl-mk-check { animation-delay: 1.1s; }
.bl-x-browser .vcard_row:nth-child(3) .bl-mk-check { animation-delay: 1.9s; }
@keyframes bl-check-cycle {
  0% { transform: scale(0); opacity: 0; }
  6%, 86% { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(0); opacity: 0; }
}
.bl-x-browser .vcard_progress-fill {
  animation: bl-fill-cycle 6.5s ease-in-out infinite both;
}
@keyframes bl-fill-cycle {
  0% { width: 14%; }
  40%, 88% { width: 100%; }
  100% { width: 14%; }
}

/* Carte avancement : les jalons poussent l'un après l'autre. */
.bl-x-phone .bcard_bar {
  transform-origin: bottom center;
  animation: bl-bar-cycle 7s ease-in-out infinite both;
}
.bl-x-phone .bcard_chart-col:nth-child(1) .bcard_bar { animation-delay: 0s; }
.bl-x-phone .bcard_chart-col:nth-child(2) .bcard_bar { animation-delay: .35s; }
.bl-x-phone .bcard_chart-col:nth-child(3) .bcard_bar { animation-delay: .7s; }
.bl-x-phone .bcard_chart-col:nth-child(4) .bcard_bar { animation-delay: 1.05s; }
.bl-x-phone .bcard_chart-col:nth-child(5) .bcard_bar { animation-delay: 1.4s; }
.bl-x-phone .bcard_chart-col:nth-child(6) .bcard_bar { animation-delay: 1.75s; }
.bl-x-phone .bcard_chart-col:nth-child(7) .bcard_bar { animation-delay: 2.1s; }
@keyframes bl-bar-cycle {
  0% { transform: scaleY(.12); }
  10%, 86% { transform: scaleY(1); }
  96%, 100% { transform: scaleY(.12); }
}

/* Carte livré/suivi : balise de veille qui pulse. */
.bl-live-dot {
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .5em;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: baseline;
  animation: bl-live-pulse 2.2s ease-out infinite;
}
@keyframes bl-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 .55em rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-x-browser .bl-mk-check,
  .bl-x-browser .vcard_progress-fill,
  .bl-x-phone .bcard_bar,
  .bl-live-dot { animation: none; }
  .bl-x-browser .vcard_progress-fill { width: 100%; }
}

/* --- Articles de blog : aération du texte (retour Kylian 02/07 soir —
   même traitement que les fiches réalisations, validé). Scope : pages avec
   hero d'article mais sans la section réalisations liées. --- */
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext > p:first-child {
  font-size: 1.35rem;
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext h2 {
  margin-top: 3.5rem;
  margin-bottom: 1.15rem;
  font-size: 2.35rem;
  line-height: 1.15;
}
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext h3 {
  margin-top: 2.4rem;
  margin-bottom: .65rem;
  font-size: 1.45rem;
  line-height: 1.3;
}
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext p { margin-bottom: 1.05rem; }
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext ul,
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext ol { margin-top: .75rem; margin-bottom: 1.5rem; }
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .x-richtext li { margin-bottom: .5rem; }

/* Cover → texte : le gabarit empile deux espaceurs de section (48 + 48 px)
   entre la cover et le corps — « il reste toujours du blanc » (Kylian 02/07
   soir). On les resserre à 24 px chacun (48 px d'air au total), uniquement
   sur les articles de blog : les fiches réalisations gardent leur aération
   validée. */
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .sec_internal-blog > .padding-section-medium:last-child,
main:has(.sec_internal-blog):not(:has(.bl-related-projects)) .sec_internal-content > .padding-section-medium:first-child {
  padding-top: 1.5rem;
}

/* Filet h1 dans le corps rédactionnel : le gabarit d'origine ne connaît les
   h1 que sur ses heros (color: text-on-primary = blanc) — un h1 venu du
   Markdown importé serait blanc-sur-blanc (bug « gros blanc sous la cover »,
   iPhone Kylian 02/07). Le doublon de tête est retiré côté serveur
   (BlogInertiaController::serializePostV3) ; ceci couvre les h1 restants en
   milieu de corps (6 recensés), rendus comme des h2. */
main:has(.sec_internal-blog) .x-richtext h1 {
  color: var(--text-color--text-primary);
  font-size: 2.35rem;
  line-height: 1.15;
  margin-top: 3.5rem;
  margin-bottom: 1.15rem;
}

/* Liens dans le corps d'article : retour à un espacement normal (une règle
   du gabarit leur donnait 1.92px de letter-spacing → rendu « écarté »). */
main:has(.sec_internal-blog) .x-richtext a {
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Boutons sombres « Tout voir » / « Voir l'outil » : libellé en blanc
   (retour Kylian — l'indigo sur fond noir manquait de contraste). */
.button.x-variant-e7c0edd3-8276-a3ba-3d91-2abb3afb4c44,
.button.x-variant-e7c0edd3-8276-a3ba-3d91-2abb3afb4c44:hover {
  color: #fff !important;
}

/* --- Boutons pill à rond flèche : balayage au survol (retour Kylian 02/07,
   réf. vidéo du gabarit d'origine — le rond coloré s'étend et remplit la
   pill, puis se rétracte à la sortie). L'IX2 d'origine animait
   .button-arrow_bg ; reproduit en CSS pur depuis la position du rond. --- */
.button-arrow { overflow: clip; }

.button-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .25rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background-color: var(--bl-service-current, #4f46e5);
  transform: scale(0);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 0;
}

.button-arrow:hover::after,
.button-arrow:focus-visible::after { transform: scale(16); }

.button-arrow_wrap,
.button-arrow_text,
.button-arrow .button_container-arrow {
  position: relative;
  z-index: 1;
}

/* Le rond s'inverse pendant que l'onde passe (comme la vidéo : lime→noir). */
.button-arrow .button_container-arrow {
  transition: background-color .35s ease .12s;
}
.button-arrow:hover .button_container-arrow,
.button-arrow:focus-visible .button_container-arrow {
  background-color: rgba(16, 12, 34, .9) !important;
}

@media (prefers-reduced-motion: reduce) {
  .button-arrow::after,
  .button-arrow .button_container-arrow { transition: none; }
}

/* --- Articles + fiches : lecture plaisante (retour Kylian 02/07 soir) --- */

/* Puces restaurées, en encart : les listes deviennent des blocs respirants
   (carré indigo signature du gabarit, fond doux — casse la linéarité). */
main:has(.sec_internal-blog) .x-richtext ul {
  list-style: none;
  background: var(--bg-color--bg-secondary, #f4f4f3);
  border-radius: 1rem;
  padding: 1.35rem 1.6rem;
}
main:has(.sec_internal-blog) .x-richtext ul li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: .55rem;
}
main:has(.sec_internal-blog) .x-richtext ul li:last-child { margin-bottom: 0; }
main:has(.sec_internal-blog) .x-richtext ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .5rem;
  height: .5rem;
  border-radius: .12rem;
  background: var(--bl-service-current, #4f46e5);
}
main:has(.sec_internal-blog) .x-richtext ol {
  padding-left: 1.4rem;
}
main:has(.sec_internal-blog) .x-richtext ol li { margin-bottom: .55rem; }

/* Titres : le carré indigo du gabarit devant chaque h2 — repère visuel. */
main:has(.sec_internal-blog) .x-richtext h2::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .8rem;
  border-radius: .13rem;
  background: var(--bl-service-current, #4f46e5);
  vertical-align: .35em;
}

html[data-bl-theme="dark"] main:has(.sec_internal-blog) .x-richtext ul { background: #171b23; }

/* Labels de galerie (Desktop / Tablette / Mobile) : ligne pleine largeur. */
.bl-gal-label { grid-column: 1 / -1; margin-top: .75rem; }
.bl-gal-label:first-child { margin-top: 0; }

/* Listes ordonnées : même encart que les ul, numéros indigo (le reset du
   gabarit supprimait aussi les compteurs des ol). */
main:has(.sec_internal-blog) .x-richtext ol {
  list-style: none;
  counter-reset: bl-num;
  background: var(--bg-color--bg-secondary, #f4f4f3);
  border-radius: 1rem;
  padding: 1.35rem 1.6rem;
}
main:has(.sec_internal-blog) .x-richtext ol li {
  position: relative;
  padding-left: 1.9rem;
  counter-increment: bl-num;
}
main:has(.sec_internal-blog) .x-richtext ol li::before {
  content: counter(bl-num);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--bl-service-current, #4f46e5);
}
html[data-bl-theme="dark"] main:has(.sec_internal-blog) .x-richtext ol { background: #171b23; }

/* « Tous les services » : pastille au même gabarit que celles des services. */
.bl-nav-services .bl-nav-all .bl-nav-ic { width: 2.65rem; height: 2.65rem; border-radius: .68rem; }
.bl-nav-services .bl-nav-all .bl-nav-ic svg { width: 1.3rem; height: 1.3rem; }

/* Footer : le bouton Envoyer prend le noir neutre du footer (#131313) — le
   noir-violet #18122f des CTA jurait sur les gris neutres du bloc (retour
   Kylian 02/07 soir). L'onde violette au survol reste. */
.footer .button-arrow,
footer .button-arrow {
  background-color: #131313 !important;
}

/* Newsletter footer : le gabarit masque le libellé « Envoyer » en portrait
   mobile (.hide-mobile-portrait) — il ne restait qu'une flèche anonyme
   (« pourquoi il y a qu'un bouton flèche ? », Kylian 02/07 soir). On
   réaffiche le libellé sur ce formulaire, mobile compris. */
.footer-form .button-arrow_text.hide-mobile-portrait {
  display: block;
}
/* Très petits écrans (~iPhone SE 320px) : on récupère la place mangée par
   le padding et le column-gap xxhuge du gabarit pour que le champ email
   reste utilisable à côté du libellé. */
@media screen and (max-width: 379px) {
  .footer-form {
    padding-left: 1rem;
    grid-column-gap: .75rem;
    column-gap: .75rem;
  }
  .footer-form .text-field { min-width: 0; }
}

/* --- Rail /services : cartes propres + cartouche liquid glass (retour
   Kylian 02/07 soir, réf. carte à bulles services — verre dépoli qui laisse
   voir l'image). 2 groupes identiques → boucle sans couture. --- */
.bl-rail-item {
  position: relative;
  flex: none;
}
.bl-rail-glass {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .5rem .85rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 18px -8px rgba(17, 17, 17, .25);
  color: #111214;
  pointer-events: none;
}
.bl-rail-glass strong {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}
.bl-rail-glass span {
  font-size: .74rem;
  opacity: .8;
  line-height: 1.3;
}

/* Ring 3D hero : le glass se cale sur l'image réelle via un wrapper interne
   (la boîte .img3d fait 50 % de haut, l'image déborde volontairement — ne
   JAMAIS la clipper : leçon du 02/07 soir, anneau écrasé en galette). */
.bl-ring-inner {
  aspect-ratio: 1;
  width: 91%;
  margin-left: 4.5%;
  position: relative;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.bl-ring-inner .image3d {
  position: absolute;
  inset: 0;
  height: 100%;
  transform: none;
}
.bl-ring-glass {
  left: .4rem;
  right: auto;
  bottom: .4rem;
  padding: .28rem .5rem;
  border-radius: .55rem;
  gap: 0;
}
.bl-ring-glass strong { font-size: .58rem; line-height: 1.25; }
.bl-ring-glass span { font-size: .44rem; line-height: 1.25; }

/* --- Liquid glass : proportions calibrées (retour Kylian 02/07 soir, capture
   iPhone — le cartouche mangeait la moitié de la carte). Règle : un badge
   discret en bas-gauche, jamais plus d'un tiers de la carte. --- */
.bl-rail-item { overflow: clip; border-radius: 1rem; }

.bl-rail-glass {
  max-width: calc(100% - 1.3rem);
  padding: .38rem .65rem;
  border-radius: .65rem;
}
.bl-rail-glass strong {
  font-size: .82rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-rail-glass span {
  font-size: .62rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile : cartes 10rem → badge encore plus compact. */
@media (max-width: 767px) {
  .bl-rail-glass {
    left: .5rem;
    bottom: .5rem;
    max-width: calc(100% - 1rem);
    padding: .28rem .5rem;
    border-radius: .5rem;
  }
  .bl-rail-glass strong { font-size: .66rem; }
  .bl-rail-glass span { font-size: .5rem; }
}

/* Ring 3D : cartes plus petites encore (10.75rem desktop / 8rem mobile). */
.bl-ring-glass,
.bl-rail-glass.bl-ring-glass {
  max-width: calc(100% - .8rem);
  padding: .24rem .45rem;
  border-radius: .5rem;
}
.bl-ring-glass strong { font-size: .54rem; }
.bl-ring-glass span { font-size: .4rem; }
@media (max-width: 767px) {
  .bl-ring-glass { padding: .2rem .38rem; }
  .bl-ring-glass strong { font-size: .48rem; }
  .bl-ring-glass span { display: none; }
}

/* Ring : badge centré en bas de carte (le calage gauche débordait). */
.bl-ring-glass {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  max-width: 90%;
  text-align: center;
}

/* Les badges des cartes de dos disparaissent avec leur image. */
.bl-ring-glass { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* (02/07 soir) Les deux anciens filets CSS articles — bl-reveal-safety
   (animation forcée à +3 s sur tous les .scroll-right) et bl-article-fade —
   sont RETIRÉS : leur `fill: forwards` maintenait opacity:1 au-dessus des
   états préparés (les animations battent l'inline normal), ce qui tuait la
   cascade au scroll voulue par Kylian. Le filet vit désormais dans le
   runtime (forceRichtextFinalState, ciblé viewport, setInterval 2 s). */

/* --- Logos réels des outils sur /outils (retour Kylian 03/07) : les cartes
   SEO / Transcriptor / Mot de passe portent le favicon officiel de leur
   sous-domaine (carré arrondi Canopée) à la place du pictogramme générique. */
.pricing_card .container-icon.bl-tool-logochip {
  background: transparent !important;
  padding: 0 !important;
}
.pricing_card .container-icon.bl-tool-logochip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* Neutralise l'ancien système ::before/fond forcé sur les 3 chips passés au
   favicon officiel (l'img porte déjà le carré coloré + glyphe). */
.bl-outils-grid .pricing_card .container-icon.bl-tool-logochip { background: transparent !important; }
.bl-outils-grid .pricing_card .container-icon.bl-tool-logochip::before { content: none !important; display: none !important; }

/* ── Lightbox galerie réalisations (Kylian 04/07) : clic → image entière ──── */
.bl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(9, 11, 15, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: env(safe-area-inset-top, 12px) 12px env(safe-area-inset-bottom, 12px);
}
.bl-lightbox.is-open { display: flex; }
.bl-lb-stage {
  margin: 0;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.bl-lb-img {
  max-width: 94vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;      /* image ENTIÈRE — plus de rognage des captures mobile */
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
  background: #fff;
}
.bl-lb-caption {
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
  text-align: center;
  max-width: 90vw;
}
.bl-lb-close,
.bl-lb-nav {
  position: fixed;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.bl-lb-close:hover,
.bl-lb-nav:hover { background: rgba(255, 255, 255, .24); }
.bl-lb-close {
  top: max(14px, env(safe-area-inset-top, 14px));
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}
.bl-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 30px;
  line-height: 1;
}
.bl-lb-prev { left: 14px; }
.bl-lb-next { right: 14px; }
.bl-lb-counter {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .1);
  padding: 5px 14px;
  border-radius: 999px;
}
@media (max-width: 600px) {
  .bl-lb-nav { width: 40px; height: 40px; font-size: 26px; }
  .bl-lb-prev { left: 8px; }
  .bl-lb-next { right: 8px; }
  .bl-lb-img { max-height: 78vh; }
}

/* Le footer passe en colonne sur mobile, mais sa rangée légale restait
   nowrap : les premiers/derniers liens sortaient de l'écran à 375 px. */
@media (max-width: 767px) {
  .footer_bottom-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1rem;
  }
  .footer_bottom { padding-bottom: 4.5rem; }
}