/* ==================================================
   NaqlData — Clean Premium Hover / Interaction Layer
   Include after style.css
================================================== */

/* --------------------------------------------------
   01. Focus Accessibility
-------------------------------------------------- */
.btn:focus-visible,
.navbar .nav-link:focus-visible,
.text-link:focus-visible,
.footer a:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.newsletter-input-wrap input:focus-visible,
.newsletter-input-wrap button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 123, 255, 0.22) !important;
}

/* --------------------------------------------------
   02. Desktop Hover Interactions
-------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

  /* ------------------------------
     Navigation / Footer Links
  ------------------------------ */
  .navbar .nav-link {
    position: relative;
    transition: color 0.28s var(--ease-premium), transform 0.28s var(--ease-premium);
  }

  .navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.32rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-soft), transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.34s var(--ease-premium), opacity 0.34s var(--ease-premium);
  }

  .navbar .nav-link:hover,
  .navbar .nav-link.active {
    color: #fff;
    transform: translateY(-1px);
  }

  .navbar .nav-link:hover::after,
  .navbar .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .brand-logo {
    transition: transform 0.28s var(--ease-premium), filter 0.28s var(--ease-premium);
  }

  .brand-logo:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 16px 42px rgba(47, 123, 255, 0.38));
  }

  .footer a {
    position: relative;
    transition: color 0.28s var(--ease-premium);
  }

  .footer a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25rem;
    height: 1px;
    background: linear-gradient(90deg, var(--blue-primary), var(--cyan-soft));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s var(--ease-premium);
  }

  .footer a:hover {
    color: #fff;
  }

  .footer a:hover::after {
    transform: scaleX(1);
  }

  /* ------------------------------
     Buttons / CTA Links
  ------------------------------ */
  .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .btn:hover {
    transform: translateY(-3px);
  }

  .btn:hover::before {
    left: 118%;
  }

  .btn-primary:hover,
  .btn-primary:focus-visible {
    background: linear-gradient(135deg, #2f7bff, var(--blue-primary));
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 24px 80px rgba(20, 87, 255, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .btn-outline-light:hover,
  .btn-outline-light:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(112, 215, 255, 0.36);
    box-shadow:
      0 22px 70px rgba(20, 87, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .premium-btn:hover i,
  .text-link:hover i,
  .newsletter-input-wrap button:hover i {
    transform: translateX(5px);
  }

  .text-link {
    position: relative;
    transition: color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
  }

  .text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan-soft), transparent);
    transform: scaleX(0.22);
    transform-origin: left;
    opacity: 0.65;
    transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
  }

  .text-link:hover {
    color: var(--cyan-soft);
    transform: translateX(3px);
  }

  .text-link:hover::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* ------------------------------
     Universal Card Interaction
  ------------------------------ */
  .premium-card,
  .product-card,
  .client-card,
  .matrix-card,
  .timeline-item,
  .feature-item,
  .trust-list div,
  .trust-highlight-card,
  .note-box,
  .quote-form,
  .newsletter-panel,
  .premium-accordion .accordion-item,
  .hero-stats > div,
  .floating-card,
  .problem-strip-card,
  .problem-metric,
  .complete-data-card,
  .problem-signal {
    transition:
      transform 0.42s var(--ease-premium),
      border-color 0.42s var(--ease-premium),
      box-shadow 0.42s var(--ease-premium),
      background 0.42s var(--ease-premium),
      filter 0.42s var(--ease-premium),
      opacity 0.42s var(--ease-premium);
  }

  .premium-card:hover,
  .product-card:hover,
  .client-card:hover,
  .matrix-card:hover,
  .timeline-item:hover,
  .feature-item:hover,
  .trust-list div:hover,
  .trust-highlight-card:hover,
  .note-box:hover,
  .premium-accordion .accordion-item:hover,
  .hero-stats > div:hover,
  .problem-strip-card:hover,
  .problem-metric:hover,
  .complete-data-card:hover,
  .problem-signal:hover {
    transform: translateY(calc(var(--hover-lift) * -1)) scale(var(--hover-scale));
    border-color: rgba(47, 123, 255, 0.42);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
      rgba(8, 18, 34, 0.86);
    box-shadow: var(--card-glow);
  }

  .premium-card:hover::after,
  .product-card:hover::after,
  .client-card:hover::after,
  .matrix-card:hover::after,
  .timeline-item:hover::after,
  .feature-item:hover::after,
  .trust-list div:hover::after,
  .note-box:hover::after,
  .quote-form:hover::after,
  .newsletter-panel:hover::after,
  .premium-accordion .accordion-item:hover::after {
    opacity: 1;
  }

  /* ------------------------------
     Icons / Badges
  ------------------------------ */
  .icon-badge,
  .client-card i,
  .feature-item i,
  .trust-list i {
    transition:
      transform 0.38s var(--ease-premium),
      box-shadow 0.38s var(--ease-premium),
      background 0.38s var(--ease-premium),
      color 0.38s var(--ease-premium),
      text-shadow 0.38s var(--ease-premium);
  }

  .premium-card:hover .icon-badge,
  .client-card:hover i,
  .feature-item:hover i {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 18px 48px rgba(20, 87, 255, 0.36);
    background: linear-gradient(135deg, rgba(20, 87, 255, 1), rgba(112, 215, 255, 0.5));
  }

  .trust-list div:hover i {
    color: #b6ffd2;
    text-shadow: 0 0 18px rgba(110, 242, 164, 0.64);
  }

  /* ------------------------------
     Product Cards
  ------------------------------ */
  .product-card:hover {
    box-shadow: var(--card-glow-strong);
  }

  .product-card:hover::before,
  .product-card.highlighted::before,
  .product-card.complete::before {
    opacity: 1;
  }

  .product-card:hover .product-tag {
    color: #fff;
    background: rgba(47, 123, 255, 0.18);
    border-color: rgba(112, 215, 255, 0.38);
  }

  .product-card .product-period,
  .matrix-card span,
  .timeline-item span {
    transition:
      color 0.32s var(--ease-premium),
      text-shadow 0.32s var(--ease-premium),
      transform 0.32s var(--ease-premium);
  }

  .product-card:hover .product-period,
  .matrix-card:hover span,
  .timeline-item:hover span {
    color: #fff;
    text-shadow: 0 0 24px rgba(112, 215, 255, 0.72);
    transform: translateY(-2px);
  }

  .product-card li {
    transition: color 0.28s var(--ease-premium), transform 0.28s var(--ease-premium);
  }

  .product-card li::before {
    transition:
      transform 0.3s var(--ease-premium),
      box-shadow 0.3s var(--ease-premium),
      background 0.3s var(--ease-premium);
  }

  .product-card:hover li {
    color: rgba(245, 247, 251, 0.9);
  }

  .product-card:hover li:nth-child(1) { transform: translateX(2px); }
  .product-card:hover li:nth-child(2) { transform: translateX(4px); }
  .product-card:hover li:nth-child(3) { transform: translateX(6px); }
  .product-card:hover li:nth-child(4) { transform: translateX(8px); }

  .product-card:hover li::before {
    transform: scale(1.28);
    background: var(--cyan-soft);
    box-shadow: 0 0 26px rgba(112, 215, 255, 0.9);
  }

  .product-card.highlighted:hover,
  .product-card.complete:hover {
    border-color: rgba(112, 215, 255, 0.52);
    background:
      linear-gradient(180deg, rgba(20, 87, 255, 0.2), rgba(8, 18, 34, 0.88)),
      rgba(8, 18, 34, 0.9);
  }

  /* ------------------------------
     Hero Visual / Stats
  ------------------------------ */
  .hero-visual {
    transition:
      border-color 0.45s var(--ease-premium),
      box-shadow 0.45s var(--ease-premium),
      filter 0.45s var(--ease-premium);
  }

  .hero-visual:hover {
    border-color: rgba(47, 123, 255, 0.32);
    box-shadow:
      0 42px 130px rgba(20, 87, 255, 0.28),
      0 28px 90px rgba(0, 0, 0, 0.35);
  }

  .hero-visual:hover .floating-card {
    border-color: rgba(112, 215, 255, 0.26);
    box-shadow:
      0 28px 90px rgba(0, 0, 0, 0.42),
      0 18px 60px rgba(20, 87, 255, 0.18);
  }

  .hero-stats > div strong {
    transition: color 0.32s var(--ease-premium), text-shadow 0.32s var(--ease-premium);
  }

  .hero-stats > div:hover strong {
    color: #fff;
    text-shadow: 0 0 28px rgba(112, 215, 255, 0.54);
  }

  /* ------------------------------
     Section Image Blocks
  ------------------------------ */
  .section-visual-card,
  .complete-image-card,
  .problem-image-device {
    transition:
      transform 0.5s var(--ease-premium),
      border-color 0.5s var(--ease-premium),
      box-shadow 0.5s var(--ease-premium),
      background 0.5s var(--ease-premium);
  }

  .section-visual-card:hover,
  .complete-image-card:hover,
  .problem-image-device:hover {
    transform: translateY(-12px) scale(1.012);
    border-color: rgba(47, 123, 255, 0.42);
    box-shadow:
      0 42px 130px rgba(0, 0, 0, 0.46),
      0 28px 95px rgba(20, 87, 255, 0.24);
  }

  .section-visual-card img,
  .complete-image-wrap img,
  .problem-image-device img {
    transition: transform 0.68s var(--ease-premium), filter 0.68s var(--ease-premium);
    will-change: transform;
  }

  .section-visual-card:hover img,
  .complete-image-card:hover .complete-image-wrap img,
  .problem-image-device:hover img {
    transform: scale(1.045);
    filter: contrast(1.06) saturate(1.08) brightness(1.04);
  }

  .section-visual-card figcaption {
    transition:
      transform 0.46s var(--ease-premium),
      border-color 0.46s var(--ease-premium),
      background 0.46s var(--ease-premium),
      box-shadow 0.46s var(--ease-premium);
  }

  .section-visual-card:hover figcaption {
    transform: translateY(-6px);
    border-color: rgba(112, 215, 255, 0.28);
    background: rgba(3, 8, 18, 0.82);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  }

  /* ------------------------------
     Group Dim Effects
  ------------------------------ */
  .timeline:hover .timeline-item:not(:hover),
  .client-grid:hover .client-card:not(:hover) {
    opacity: 0.72;
  }

  /* ------------------------------
     Forms / Newsletter / FAQ
  ------------------------------ */
  .quote-form:hover,
  .newsletter-panel:hover {
    border-color: rgba(47, 123, 255, 0.32);
    box-shadow:
      0 34px 115px rgba(20, 87, 255, 0.16),
      0 24px 80px rgba(0, 0, 0, 0.26);
  }

  .form-control:hover,
  .form-select:hover,
  .newsletter-input-wrap:hover {
    border-color: rgba(112, 215, 255, 0.28);
    background-color: rgba(255, 255, 255, 0.072);
  }

  .form-control:focus,
  .form-select:focus,
  .newsletter-input-wrap:focus-within {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.085);
    border-color: rgba(47, 123, 255, 0.72);
    box-shadow:
      0 0 0 4px rgba(47, 123, 255, 0.14),
      0 14px 50px rgba(20, 87, 255, 0.12) !important;
    transform: translateY(-1px);
  }

  .newsletter-input-wrap button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
      0 20px 60px rgba(20, 87, 255, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }

  .premium-accordion .accordion-item:hover {
    border-color: rgba(47, 123, 255, 0.34);
  }

  .premium-accordion .accordion-button {
    transition: color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
  }

  .premium-accordion .accordion-button:hover {
    color: var(--cyan-soft);
    background: rgba(255, 255, 255, 0.025);
  }

  .premium-accordion .accordion-button:not(.collapsed) {
    color: #fff;
    background: linear-gradient(90deg, rgba(47, 123, 255, 0.14), transparent);
  }
}

/* --------------------------------------------------
   03. Touch / Mobile Interaction
-------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .btn:active,
  .premium-card:active,
  .product-card:active,
  .client-card:active,
  .matrix-card:active,
  .timeline-item:active,
  .feature-item:active,
  .trust-list div:active,
  .note-box:active,
  .premium-accordion .accordion-item:active,
  .newsletter-panel:active {
    transform: translateY(-3px) scale(1.005);
    border-color: rgba(47, 123, 255, 0.32);
  }

  .btn:active::before {
    left: 118%;
  }
}

/* --------------------------------------------------
   04. Reduced Motion
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .navbar .nav-link,
  .premium-card,
  .product-card,
  .client-card,
  .matrix-card,
  .timeline-item,
  .feature-item,
  .trust-list div,
  .note-box,
  .quote-form,
  .newsletter-panel,
  .premium-accordion .accordion-item,
  .section-visual-card,
  .section-visual-card img,
  .section-visual-card figcaption,
  .complete-image-card,
  .complete-image-wrap img,
  .problem-image-device,
  .problem-image-device img {
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
}


/* ==================================================
   À propos Page — Premium Hover Interactions
================================================== */

@media (hover: hover) and (pointer: fine) {

  /* ------------------------------
     About hero CTAs
  ------------------------------ */

  .about-hero-actions .btn,
  .about-final-actions .btn {
    transition:
      transform 0.32s var(--ease-premium, ease),
      box-shadow 0.32s var(--ease-premium, ease),
      border-color 0.32s var(--ease-premium, ease),
      background 0.32s var(--ease-premium, ease);
  }

  .about-hero-actions .btn:hover,
  .about-final-actions .btn:hover {
    transform: translateY(-4px);
  }

  .about-hero-actions .btn-primary:hover,
  .about-final-actions .btn-primary:hover {
    box-shadow:
      0 26px 82px rgba(20, 87, 255, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .about-hero-actions .btn-outline-light:hover,
  .about-final-actions .btn-outline-light:hover {
    border-color: rgba(112, 215, 255, 0.38);
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
      0 22px 72px rgba(20, 87, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .about-hero-actions .btn:hover i,
  .about-final-actions .btn:hover i {
    transform: translateX(5px);
  }

  /* ------------------------------
     Intro image block
  ------------------------------ */

  .about-intro-image,
  .about-values-visual {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease);
  }

  .about-intro-visual:hover .about-intro-image,
  .about-values-visual:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(47, 123, 255, 0.42);
    box-shadow:
      0 44px 130px rgba(0, 0, 0, 0.46),
      0 28px 95px rgba(20, 87, 255, 0.24);
  }

  .about-intro-image::after,
  .about-values-visual::after,
  .about-story-image::after {
    transition:
      opacity 0.45s var(--ease-premium, ease),
      background 0.45s var(--ease-premium, ease);
  }

  .about-intro-visual:hover .about-intro-image::after,
  .about-values-visual:hover::after {
    background:
      linear-gradient(180deg, rgba(2, 6, 17, 0.02), rgba(2, 6, 17, 0.78)),
      radial-gradient(circle at 72% 24%, rgba(47, 123, 255, 0.36), transparent 36%);
  }

  /* ------------------------------
     Floating intro cards
  ------------------------------ */

  .about-intro-card {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease);
  }

  .about-intro-visual:hover .about-intro-card-main {
    transform: translateY(-8px);
    border-color: rgba(47, 123, 255, 0.38);
    background: rgba(7, 17, 31, 0.86);
    box-shadow:
      0 28px 90px rgba(0, 0, 0, 0.46),
      0 0 54px rgba(20, 87, 255, 0.18);
  }

  .about-intro-visual:hover .about-intro-card-small {
    transform: translateY(6px);
    border-color: rgba(112, 215, 255, 0.3);
    background: rgba(7, 17, 31, 0.84);
  }

  .about-intro-card strong {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease);
  }

  .about-intro-visual:hover .about-intro-card strong {
    color: #ffffff;
    text-shadow: 0 0 28px rgba(112, 215, 255, 0.5);
  }

  /* ------------------------------
     Mission / vision visual panels
  ------------------------------ */

  .about-story-panel {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease),
      background 0.5s var(--ease-premium, ease);
  }

  .about-story-panel:hover {
    transform: translateY(-12px);
    border-color: rgba(47, 123, 255, 0.38);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
    box-shadow:
      0 46px 140px rgba(0, 0, 0, 0.42),
      0 26px 88px rgba(20, 87, 255, 0.2);
  }

  .about-story-panel:hover .about-story-image::after {
    background:
      linear-gradient(90deg, rgba(2, 6, 17, 0.1), rgba(2, 6, 17, 0.64)),
      radial-gradient(circle at 70% 32%, rgba(47, 123, 255, 0.34), transparent 36%);
  }

  .about-story-copy span,
  .about-story-copy h3 {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease);
  }

  .about-story-panel:hover .about-story-copy span {
    color: #ffffff;
    text-shadow: 0 0 22px rgba(112, 215, 255, 0.52);
  }

  .about-story-panel:hover .about-story-copy h3 {
    color: #ffffff;
  }

  /* ------------------------------
     Values visual + value items
  ------------------------------ */

  .about-values-overlay-card {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .about-values-visual:hover .about-values-overlay-card {
    transform: translateY(-8px);
    border-color: rgba(112, 215, 255, 0.32);
    background: rgba(7, 17, 31, 0.86);
    box-shadow:
      0 24px 76px rgba(0, 0, 0, 0.38),
      0 0 54px rgba(20, 87, 255, 0.18);
  }

  .about-values-list div {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease);
  }

  .about-values-list div::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.13), transparent 34%, transparent 72%, rgba(112,215,255,0.07)),
      radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(47,123,255,0.24), transparent 16rem);
    opacity: 0;
    transition: opacity 0.42s var(--ease-premium, ease);
    z-index: 0;
  }

  .about-values-list div > * {
    position: relative;
    z-index: 1;
  }

  .about-values-list div:hover {
    transform: translateY(-10px) scale(1.012);
    border-color: rgba(47, 123, 255, 0.42);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)),
      rgba(8, 18, 34, 0.86);
    box-shadow:
      0 34px 105px rgba(20, 87, 255, 0.22),
      0 24px 80px rgba(0, 0, 0, 0.28);
  }

  .about-values-list div:hover::after {
    opacity: 1;
  }

  .about-values-list i {
    transition:
      transform 0.38s var(--ease-premium, ease),
      box-shadow 0.38s var(--ease-premium, ease),
      background 0.38s var(--ease-premium, ease),
      color 0.38s var(--ease-premium, ease);
  }

  .about-values-list div:hover i {
    transform: translateY(-3px) scale(1.06);
    color: #ffffff;
    background: linear-gradient(135deg, rgba(20,87,255,1), rgba(112,215,255,0.5));
    box-shadow: 0 18px 48px rgba(20, 87, 255, 0.36);
  }

  .about-values-list h3 {
    transition: color 0.32s var(--ease-premium, ease);
  }

  .about-values-list div:hover h3 {
    color: #ffffff;
  }

  /* ------------------------------
     Credibility section
  ------------------------------ */

  .about-credibility-panel {
    transition:
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease),
      background 0.5s var(--ease-premium, ease);
  }

  .about-credibility-panel:hover {
    border-color: rgba(47, 123, 255, 0.34);
    background: rgba(7, 17, 31, 0.5);
    box-shadow:
      0 44px 135px rgba(20, 87, 255, 0.16),
      0 30px 100px rgba(0, 0, 0, 0.3);
  }

  .about-credibility-grid div {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .about-credibility-grid div::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.11), transparent 32%, transparent 72%, rgba(112,215,255,0.07)),
      radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(47,123,255,0.2), transparent 14rem);
    opacity: 0;
    transition: opacity 0.42s var(--ease-premium, ease);
    z-index: 0;
  }

  .about-credibility-grid div > * {
    position: relative;
    z-index: 1;
  }

  .about-credibility-grid div:hover {
    transform: translateY(-8px);
    border-color: rgba(112, 215, 255, 0.32);
    background: rgba(255, 255, 255, 0.065);
    box-shadow:
      0 28px 90px rgba(20, 87, 255, 0.18),
      0 22px 70px rgba(0, 0, 0, 0.28);
  }

  .about-credibility-grid div:hover::after {
    opacity: 1;
  }

  .about-credibility-grid div:hover span {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(112, 215, 255, 0.72);
  }

  .about-credibility-grid div:hover strong {
    color: #ffffff;
  }

  .about-credibility-grid span,
  .about-credibility-grid strong {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease);
  }

  /* ------------------------------
     Final CTA panel
  ------------------------------ */

  .about-final-panel {
    transition:
      transform 0.48s var(--ease-premium, ease),
      border-color 0.48s var(--ease-premium, ease),
      box-shadow 0.48s var(--ease-premium, ease),
      background 0.48s var(--ease-premium, ease);
  }

  .about-final-panel:hover {
    transform: translateY(-10px);
    border-color: rgba(47, 123, 255, 0.38);
    background:
      radial-gradient(circle at 78% 26%, rgba(47, 123, 255, 0.24), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026));
    box-shadow:
      0 44px 135px rgba(20, 87, 255, 0.2),
      0 30px 100px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
}

/* Touch/mobile: lightweight active states */
@media (hover: none), (pointer: coarse) {
  .about-story-panel:active,
  .about-values-list div:active,
  .about-credibility-grid div:active,
  .about-final-panel:active {
    transform: translateY(-3px) scale(1.005);
    border-color: rgba(47, 123, 255, 0.32);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-intro-image,
  .about-story-panel,
  .about-values-visual,
  .about-values-list div,
  .about-credibility-panel,
  .about-credibility-grid div,
  .about-final-panel {
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
}


/* ==================================================
   Produits & Rapports Page — Premium Hover
================================================== */

@media (hover: hover) and (pointer: fine) {

  .products-hero-actions .btn,
  .products-final-actions .btn,
  .complete-offer-panel .btn {
    transition:
      transform 0.32s var(--ease-premium, ease),
      box-shadow 0.32s var(--ease-premium, ease),
      border-color 0.32s var(--ease-premium, ease),
      background 0.32s var(--ease-premium, ease);
  }

  .products-hero-actions .btn:hover,
  .products-final-actions .btn:hover,
  .complete-offer-panel .btn:hover {
    transform: translateY(-4px);
  }

  .products-hero-visual,
  .products-logic-visual,
  .complete-offer-visual {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease);
  }

  .products-hero-visual:hover,
  .products-logic-visual:hover,
  .complete-offer-visual:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(47, 123, 255, 0.42);
    box-shadow:
      0 44px 130px rgba(0,0,0,0.46),
      0 28px 95px rgba(20,87,255,0.24);
  }

  .products-hero-visual img,
  .products-logic-visual img,
  .complete-offer-visual img,
  .report-image img {
    transition:
      transform 0.68s var(--ease-premium, ease),
      filter 0.68s var(--ease-premium, ease);
  }

  .products-hero-visual:hover img,
  .products-logic-visual:hover img,
  .complete-offer-visual:hover img {
    transform: scale(1.075);
    filter: brightness(0.74) saturate(1.02) contrast(1.08);
  }

  .products-hero-chip,
  .logic-stack div,
  .offer-data-card,
  .complete-offer-points div {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .products-hero-visual:hover .products-hero-chip,
  .products-logic-visual:hover .logic-stack div,
  .complete-offer-visual:hover .offer-data-card {
    border-color: rgba(112, 215, 255, 0.32);
    background: rgba(7, 17, 31, 0.86);
    box-shadow:
      0 24px 76px rgba(0,0,0,0.38),
      0 0 54px rgba(20,87,255,0.18);
  }

  .logic-stack div:hover,
  .complete-offer-points div:hover {
    transform: translateX(8px);
    border-color: rgba(47, 123, 255, 0.36);
    background: rgba(255,255,255,0.065);
  }

  .report-card {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease),
      background 0.5s var(--ease-premium, ease);
  }

  .report-card:hover {
    transform: translateY(-14px) scale(1.012);
    border-color: rgba(47, 123, 255, 0.44);
    background:
      radial-gradient(circle at 70% 16%, rgba(47,123,255,0.16), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
    box-shadow:
      0 46px 140px rgba(0,0,0,0.44),
      0 28px 95px rgba(20,87,255,0.24);
  }

  .report-card:hover .report-image img {
    transform: scale(1.095);
    filter: brightness(0.74) saturate(1.04) contrast(1.08);
  }

  .report-card:hover .report-period,
  .report-card:hover .report-badge {
    border-color: rgba(112,215,255,0.34);
    box-shadow: 0 0 26px rgba(47,123,255,0.28);
  }

  .report-card h3,
  .report-card .report-tag,
  .report-card .report-cta,
  .report-card .report-cta i {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease),
      transform 0.32s var(--ease-premium, ease);
  }

  .report-card:hover h3 {
    color: #ffffff;
  }

  .report-card:hover .report-tag {
    color: #ffffff;
    text-shadow: 0 0 22px rgba(112,215,255,0.48);
  }

  .report-card:hover .report-cta {
    color: var(--cyan-soft);
  }

  .report-card:hover .report-cta i {
    transform: translateX(6px);
  }

  .report-content li {
    transition:
      color 0.3s var(--ease-premium, ease),
      transform 0.3s var(--ease-premium, ease);
  }

  .report-card:hover .report-content li {
    color: rgba(245,247,251,0.92);
  }

  .report-card:hover .report-content li:nth-child(1) { transform: translateX(2px); }
  .report-card:hover .report-content li:nth-child(2) { transform: translateX(4px); }
  .report-card:hover .report-content li:nth-child(3) { transform: translateX(6px); }
  .report-card:hover .report-content li:nth-child(4) { transform: translateX(8px); }

  .complete-offer-panel,
  .products-final-panel {
    transition:
      transform 0.48s var(--ease-premium, ease),
      border-color 0.48s var(--ease-premium, ease),
      box-shadow 0.48s var(--ease-premium, ease),
      background 0.48s var(--ease-premium, ease);
  }

  .complete-offer-panel:hover,
  .products-final-panel:hover {
    transform: translateY(-10px);
    border-color: rgba(47,123,255,0.38);
    box-shadow:
      0 44px 135px rgba(20,87,255,0.18),
      0 30px 100px rgba(0,0,0,0.34);
  }
}

@media (hover: none), (pointer: coarse) {
  .report-card:active,
  .logic-stack div:active,
  .complete-offer-points div:active,
  .products-final-panel:active {
    transform: translateY(-3px) scale(1.005);
    border-color: rgba(47,123,255,0.32);
  }
}


/* ==================================================
   Données Disponibles Page — Premium Hover
================================================== */

@media (hover: hover) and (pointer: fine) {

  .data-hero-actions .btn,
  .data-final-actions .btn,
  .market-data-panel .btn {
    transition:
      transform 0.32s var(--ease-premium, ease),
      box-shadow 0.32s var(--ease-premium, ease),
      border-color 0.32s var(--ease-premium, ease),
      background 0.32s var(--ease-premium, ease);
  }

  .data-hero-actions .btn:hover,
  .data-final-actions .btn:hover,
  .market-data-panel .btn:hover {
    transform: translateY(-4px);
  }

  .data-hero-visual,
  .data-type-panel,
  .transporter-visual,
  .data-quality-visual {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease);
  }

  .data-hero-visual:hover,
  .data-type-panel:hover,
  .transporter-visual:hover,
  .data-quality-visual:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(47, 123, 255, 0.42);
    box-shadow:
      0 44px 130px rgba(0,0,0,0.46),
      0 28px 95px rgba(20,87,255,0.24);
  }

  .data-hero-visual img,
  .data-type-image img,
  .transporter-visual img,
  .data-quality-visual img {
    transition:
      transform 0.68s var(--ease-premium, ease),
      filter 0.68s var(--ease-premium, ease);
  }

  .data-hero-visual:hover img,
  .data-type-panel:hover .data-type-image img,
  .transporter-visual:hover img,
  .data-quality-visual:hover img {
    transform: scale(1.075);
    filter: brightness(0.74) saturate(1.02) contrast(1.08);
  }

  .data-hero-panel,
  .transporter-field-card,
  .quality-overlay-card {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .data-hero-visual:hover .data-hero-panel,
  .transporter-visual:hover .transporter-field-card,
  .data-quality-visual:hover .quality-overlay-card {
    transform: translateY(-6px);
    border-color: rgba(112,215,255,0.32);
    background: rgba(7,17,31,0.86);
    box-shadow:
      0 24px 76px rgba(0,0,0,0.38),
      0 0 54px rgba(20,87,255,0.18);
  }

  .data-field-item,
  .market-metric-card,
  .market-indicator-main,
  .market-indicator-list div,
  .quality-list div,
  .data-mini-stats div {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .data-field-item:hover,
  .market-metric-card:hover,
  .market-indicator-main:hover,
  .market-indicator-list div:hover,
  .quality-list div:hover,
  .data-mini-stats div:hover {
    transform: translateY(-8px);
    border-color: rgba(47,123,255,0.38);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)),
      rgba(8,18,34,0.86);
    box-shadow:
      0 34px 105px rgba(20,87,255,0.2),
      0 24px 80px rgba(0,0,0,0.28);
  }

  .data-field-item i {
    transition:
      transform 0.38s var(--ease-premium, ease),
      box-shadow 0.38s var(--ease-premium, ease),
      background 0.38s var(--ease-premium, ease),
      color 0.38s var(--ease-premium, ease);
  }

  .data-field-item:hover i {
    transform: translateY(-3px) scale(1.06);
    color: #fff;
    background: linear-gradient(135deg, rgba(20,87,255,1), rgba(112,215,255,0.5));
    box-shadow: 0 18px 48px rgba(20,87,255,0.36);
  }

  .data-type-content h3,
  .data-field-item h3,
  .market-metric-card h3,
  .market-indicator-list strong,
  .quality-overlay-card strong {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease);
  }

  .data-type-panel:hover h3,
  .data-field-item:hover h3,
  .market-metric-card:hover h3,
  .market-indicator-list div:hover strong,
  .data-quality-visual:hover .quality-overlay-card strong {
    color: #fff;
  }

  .data-type-panel:hover .text-link {
    color: var(--cyan-soft);
  }

  .data-type-panel:hover .text-link i {
    transform: translateX(6px);
  }

  .market-data-panel,
  .data-final-panel {
    transition:
      transform 0.48s var(--ease-premium, ease),
      border-color 0.48s var(--ease-premium, ease),
      box-shadow 0.48s var(--ease-premium, ease),
      background 0.48s var(--ease-premium, ease);
  }

  .market-data-panel:hover,
  .data-final-panel:hover {
    transform: translateY(-10px);
    border-color: rgba(47,123,255,0.38);
    box-shadow:
      0 44px 135px rgba(20,87,255,0.18),
      0 30px 100px rgba(0,0,0,0.34);
  }
}

@media (hover: none), (pointer: coarse) {
  .data-type-panel:active,
  .data-field-item:active,
  .market-metric-card:active,
  .data-final-panel:active {
    transform: translateY(-3px) scale(1.005);
    border-color: rgba(47,123,255,0.32);
  }
}


/* ==================================================
   Solutions par Secteur Page — Premium Hover
================================================== */

@media (hover: hover) and (pointer: fine) {

  .solutions-hero-actions .btn,
  .solutions-final-actions .btn,
  .sector-data-fit-panel .btn {
    transition:
      transform 0.32s var(--ease-premium, ease),
      box-shadow 0.32s var(--ease-premium, ease),
      border-color 0.32s var(--ease-premium, ease),
      background 0.32s var(--ease-premium, ease);
  }

  .solutions-hero-actions .btn:hover,
  .solutions-final-actions .btn:hover,
  .sector-data-fit-panel .btn:hover {
    transform: translateY(-4px);
  }

  .solutions-hero-visual,
  .sector-card,
  .sector-story-panel,
  .sector-extra-card {
    transition:
      transform 0.5s var(--ease-premium, ease),
      border-color 0.5s var(--ease-premium, ease),
      box-shadow 0.5s var(--ease-premium, ease),
      background 0.5s var(--ease-premium, ease);
  }

  .solutions-hero-visual:hover,
  .sector-card:hover,
  .sector-story-panel:hover,
  .sector-extra-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(47,123,255,0.42);
    box-shadow:
      0 44px 130px rgba(0,0,0,0.46),
      0 28px 95px rgba(20,87,255,0.24);
  }

  .solutions-hero-visual img,
  .sector-card-image img,
  .sector-story-image img,
  .sector-extra-card img {
    transition:
      transform 0.68s var(--ease-premium, ease),
      filter 0.68s var(--ease-premium, ease);
  }

  .solutions-hero-visual:hover img,
  .sector-card:hover .sector-card-image img,
  .sector-story-panel:hover .sector-story-image img,
  .sector-extra-card:hover img {
    transform: scale(1.075);
    filter: brightness(0.74) saturate(1.02) contrast(1.08);
  }

  .solutions-hero-chip,
  .sector-fit-main,
  .sector-fit-list div {
    transition:
      transform 0.42s var(--ease-premium, ease),
      border-color 0.42s var(--ease-premium, ease),
      background 0.42s var(--ease-premium, ease),
      box-shadow 0.42s var(--ease-premium, ease);
  }

  .solutions-hero-visual:hover .solutions-hero-chip {
    transform: translateY(-6px);
    border-color: rgba(112,215,255,0.32);
    background: rgba(7,17,31,0.86);
    box-shadow:
      0 24px 76px rgba(0,0,0,0.38),
      0 0 54px rgba(20,87,255,0.18);
  }

  .sector-card-content h3,
  .sector-story-copy h3,
  .sector-extra-card h3,
  .sector-fit-list strong,
  .sector-fit-main strong {
    transition:
      color 0.32s var(--ease-premium, ease),
      text-shadow 0.32s var(--ease-premium, ease);
  }

  .sector-card:hover h3,
  .sector-story-panel:hover h3,
  .sector-extra-card:hover h3,
  .sector-fit-list div:hover strong,
  .sector-fit-main:hover strong {
    color: #fff;
  }

  .sector-card:hover .sector-card-content span,
  .sector-story-panel:hover .sector-story-copy span,
  .sector-extra-card:hover span {
    color: #fff;
    text-shadow: 0 0 22px rgba(112,215,255,0.5);
  }

  .sector-story-copy li {
    transition:
      transform 0.3s var(--ease-premium, ease),
      color 0.3s var(--ease-premium, ease);
  }

  .sector-story-panel:hover .sector-story-copy li {
    color: rgba(245,247,251,0.92);
  }

  .sector-story-panel:hover .sector-story-copy li:nth-child(1) { transform: translateX(2px); }
  .sector-story-panel:hover .sector-story-copy li:nth-child(2) { transform: translateX(4px); }
  .sector-story-panel:hover .sector-story-copy li:nth-child(3) { transform: translateX(6px); }

  .sector-story-panel:hover .text-link {
    color: var(--cyan-soft);
  }

  .sector-story-panel:hover .text-link i {
    transform: translateX(6px);
  }

  .sector-fit-main:hover,
  .sector-fit-list div:hover {
    transform: translateY(-8px);
    border-color: rgba(47,123,255,0.38);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)),
      rgba(8,18,34,0.86);
    box-shadow:
      0 34px 105px rgba(20,87,255,0.2),
      0 24px 80px rgba(0,0,0,0.28);
  }

  .sector-data-fit-panel,
  .solutions-final-panel {
    transition:
      transform 0.48s var(--ease-premium, ease),
      border-color 0.48s var(--ease-premium, ease),
      box-shadow 0.48s var(--ease-premium, ease),
      background 0.48s var(--ease-premium, ease);
  }

  .sector-data-fit-panel:hover,
  .solutions-final-panel:hover {
    transform: translateY(-10px);
    border-color: rgba(47,123,255,0.38);
    box-shadow:
      0 44px 135px rgba(20,87,255,0.18),
      0 30px 100px rgba(0,0,0,0.34);
  }
}

@media (hover: none), (pointer: coarse) {
  .sector-card:active,
  .sector-story-panel:active,
  .sector-extra-card:active,
  .solutions-final-panel:active {
    transform: translateY(-3px) scale(1.005);
    border-color: rgba(47,123,255,0.32);
  }
}