/* Système d'interaction commun aux pages B&F */
a, button, summary, article, .service-icon, .benefit-panel > div, .partner-points > div {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease,
              box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(244, 124, 53, .38);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link:focus {
  position: fixed !important;
  z-index: 1000;
  top: 12px;
  left: 12px;
}

.desktop-nav > a:not(.nav-cta):hover,
.desktop-nav .nav-group > summary:hover,
footer a:hover,
.text-link:hover {
  color: var(--orange);
}

footer a { width: fit-content; }
footer a:hover { transform: translateX(4px); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(18, 53, 86, .15); }
.faq-list details:hover { border-color: rgba(244, 124, 53, .42); }
.faq-list details:hover summary { color: var(--orange); padding-left: 5px; }
.faq-list summary { transition: color .2s ease, padding-left .2s ease; }

.service-card,
.detail-sections > article,
.hosting-intro-grid > article,
.plans-grid > article,
.evidence-grid > article,
.intervention-card {
  position: relative;
  overflow: hidden;
}

.service-card::after,
.detail-sections > article::after,
.hosting-intro-grid > article::after,
.plans-grid > article::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -34px;
  bottom: -36px;
  border: 1px solid rgba(244, 124, 53, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(244, 124, 53, .045);
  pointer-events: none;
}

.service-card:hover,
.detail-sections > article:hover,
.hosting-intro-grid > article:hover,
.plans-grid > article:hover,
.evidence-grid > article:hover,
.intervention-card:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 124, 53, .48);
  box-shadow: 0 18px 38px rgba(18, 53, 86, .11);
}

.service-card:hover .service-icon,
.detail-sections > article:hover .service-icon,
.hosting-intro-grid > article:hover .service-icon {
  transform: translateY(-2px) rotate(-3deg) scale(1.06) !important;
}

.service-card a:hover b,
.text-link:hover,
.contact-card .button:hover span,
.button:hover > span {
  transform: translateX(4px);
}

.service-card a b,
.button > span { display: inline-block; transition: transform .2s ease; }
.service-card a:hover { color: var(--orange); }
.plan-note a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; }
.plan-note a:hover { color: #ffd7bd; text-decoration-color: currentColor; }

.service-icon.icon-illustration {
  width: 58px;
  height: 58px;
  padding: 9px;
  display: inline-grid;
  place-items: center;
  background: #fff9f3;
  border: 1px solid rgba(244, 124, 53, .26);
  border-radius: 16px;
}
.service-icon.icon-illustration img { width: 100%; height: 100%; display: block; }
.service-icon.icon-illustration,
.service-card:hover .service-icon.icon-illustration,
.detail-sections > article:hover .service-icon.icon-illustration,
.hosting-intro-grid > article:hover .service-icon.icon-illustration {
  background: #fff9f3 !important;
  color: var(--ink) !important;
}
.detail-sections.compact-details article:has(> .service-icon-slot) {
  grid-template-columns: 80px 1fr;
  gap: 16px;
}
.service-icon-slot {
  width: 72px;
  height: 72px;
  padding: 7px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.service-icon-slot .service-icon { margin: 0 !important; }
.service-icon:not(.icon-illustration) { background: #f47c35 !important; color: #fff !important; }
.individual-page .service-icon:not(.icon-illustration) { background: #2e8b57 !important; color: #fff !important; }

.advice-group-icon img,
.individual-panel-icon img,
.status-icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.status-icon img { width: 25px; height: 25px; }
.status-icon.icon-image { background: #fff5eb; border: 1px solid #ffd3b7; }

.approach-steps { display: grid; gap: 12px; }
.approach-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.approach-steps article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f47c35;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .05em;
}
.approach-steps article strong { display: block; color: #fff; font-size: 17px; margin: 2px 0 5px; }
.approach-steps article p { margin: 0; color: #c9d7e2; line-height: 1.55; }
.approach-steps article:hover {
  transform: translateX(7px);
  border-color: rgba(244,124,53,.72);
  background: rgba(255,255,255,.095);
  box-shadow: 0 14px 30px rgba(0,0,0,.15);
}
.approach-steps article:hover > span { transform: scale(1.05); }

.solution-subhero { position: relative; overflow: hidden; }
.solution-subhero::before {
  content: "";
  position: absolute;
  width: 165px;
  height: 165px;
  right: 4%;
  bottom: -96px;
  border: 1px solid rgba(244, 124, 53, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(244, 124, 53, .04), 0 0 0 52px rgba(244, 124, 53, .025);
  pointer-events: none;
}

.benefit-panel > div:hover { transform: translateX(5px); background: #fff7f0; }
.partner-points > div:hover { transform: translateX(6px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.comparison-table tbody tr:hover td,
.hosting-table tbody tr:hover td { background-color: #fff7ef; }
.comparison-table tbody tr,
.hosting-table tbody tr { transition: background-color .2s ease; }
.comparison-table a:hover,
.hosting-table a:hover { color: var(--ink); }

.nav-panel { transform-origin: top center; }
.nav-group[open] .nav-panel { animation: menuIn .18s ease-out both; }
@keyframes menuIn { from { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(.985); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

.bf-reveal { opacity: 0; transform: translateY(18px); }
.bf-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .nav-group[open] .nav-panel { animation-name: menuInRight; }
  @keyframes menuInRight { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

@media (max-width: 900px) {
  .desktop-nav { display: none !important; }
  .mobile-menu { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .bf-reveal { opacity: 1; transform: none; }
}