* {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    :root {

      --dark: #05040f;

      --white: #fff;

      --violet: #5440e4;

      --blue: #00a3ff;

      --font-head: 'Poppins', sans-serif;

      --font-body: 'Poppins', sans-serif;

    }



    body {

      font-family: var(--font-body);

      overflow-x: hidden;

    }

 h2 {



    font-weight: 500!important;

}

h1{

  font-weight: 600!important;

}

h3{

      font-weight: 500!important;

}

/* a{

      font-weight: 600!important;

} */

    /* ===================== NAV ===================== */

    .site-header {

      border-top: 1px solid white;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      z-index: 50;

      height: 75px;

      padding: 0 6% 0 0;

      display: flex;

      align-items: center;

      justify-content: space-between;

      background: transparent;

    }



     .internal-header {

          /* background: linear-gradient(135deg, #f3eeff 0%, #ede5ff 50%, #f8f5ff 100%)!important; */

          background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;

}

 .internal-header {

    position: relative!important;

}

.internal-header .btn-style {

    border: 2px solid #000000;

    border-radius: 50px;

    color: #000000;

}

.internal-header .btn-style:hover {

      border: 2px solid #372a99;

    border-radius: 50px;

    color: #ffffff;

}

.internal-header .btn-arrow{

background: #4e40b9;

    color: #ffffff;

}

.internal-header .nav-links a {

color: black!important;

}
.color{
        background: linear-gradient(90deg, #08023c 0%, #190d6c 45%, #8b5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


    .nav-links {

      display: flex;

      gap: 60px;

      list-style: none;

    }



    .carte-maps {

      margin-top: 50px;

    }



    .nav-links a {

      color: #fff;

      text-decoration: none;

      font-size: 16px;

      font-weight: 600;

    }



    /* ============================================================

         BTN STYLE — style visuel original + effet hover fill



         ASTUCE : on ne met PAS overflow:hidden sur le bouton lui-même

         car la flèche (.btn-arrow) dépasse à droite (right:-5px).

         À la place, le ::before est clippé via border-radius + le fait

         qu'il reste à l'intérieur du bouton naturellement.

         On utilise clip-path sur ::before pour limiter la zone de fill

         sans toucher au overflow du parent.

      ============================================================ */

    .btn-style {

      position: relative;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      height: 46px;

      padding: 0 55px 0 20px;

      border: 2px solid #fff;

      border-radius: 50px;

      color: #fff;

      text-decoration: none;

      font-size: 13px;

      font-weight: 700;

      text-transform: uppercase;

      background: transparent;

      isolation: isolate;

      transform: translateZ(0);

    }



    /* Le fond qui remplit de gauche à droite */

    .btn-style::before {

      content: "";

      position: absolute;

      inset: 0;

      /* couvre tout le bouton */

      border-radius: 50px;

      background: linear-gradient(90deg,

          #8c02b9 0%,

          #4e40b9 45%,

          #09699f 100%);

      z-index: -1;

      /* On simule le fill gauche→droite avec clip-path */

      clip-path: inset(0 100% 0 0 round 50px);

      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    }



    /* Au hover : clip-path s'ouvre → le fond remplit de gauche à droite */

    .btn-style:hover::before {

      clip-path: inset(0 0% 0 0 round 50px);

    }



    .btn-arrow {

      position: absolute;

      right: -5px;

      top: 50%;

      transform: translateY(-50%);

      width: 48px;

      height: 48px;

      border-radius: 50%;

      background: #fff;

      color: #000;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 900;

      z-index: 2;

      transition:

        background 0.35s ease,

        color 0.35s ease;

    }



    .btn-style:hover .btn-arrow {

      /* background: white;

      color: #000000; */

    }



    .nav-cta {

      height: 38px;

      padding-right: 48px;

      font-size: 13px;

          font-weight: 600;

    }



    .nav-cta .btn-arrow {

      width: 43px;

      height: 43px;

    }



    /* ===================== BTN HERO — même technique ===================== */

    .btn-style-hero {

      position: relative;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      height: 46px;

      padding: 0 55px 0 20px;

      border: 2px solid #fff;

      border-radius: 50px;

      color: #fff;

      text-decoration: none;

      font-size: 14px;

      font-weight: 700;

      text-transform: uppercase;

      background: transparent;

      margin-top: 38px;

      isolation: isolate;

      transform: translateZ(0);

    }



    .btn-style-hero::before {

      content: "";

      position: absolute;

      inset: 0;

      border-radius: 50px;

      background: linear-gradient(90deg,

          #8c02b9 0%,

          #4e40b9 45%,

          #09699f 100%);

      z-index: -1;

      clip-path: inset(0 100% 0 0 round 50px);

      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .btn-style-hero:hover::before {

      clip-path: inset(0 0% 0 0 round 50px);

    }



    .btn-style-hero:hover .btn-arrow {

      background: #f2ecff;

      color: #000000;

    }



    .nav-cta-hero {

      height: 38px;

      padding-right: 48px;

      font-size: 14px;

    }



    /* ===================== HERO ===================== */

.hero {

  height: 86vh;

  min-height: 264px;

  background-color: #020107;

  

  background-position: center, center right;

  background-repeat: no-repeat;

  padding: 55px 6% 1px;

  position: relative;

  overflow: hidden;

}



    .hero::before {

      content: "";

      position: absolute;

      width: 520px;

      height: 520px;

      left: -180px;

      top: 160px;

      background: radial-gradient(circle,

          rgba(84, 64, 228, 0.45),

          transparent 65%);

      filter: blur(20px);

      animation: glowMove 6s ease-in-out infinite alternate;

      z-index: 1;

    }



    @keyframes glowMove {

      from {

        transform: translate(0, 0) scale(1);

      }



      to {

        transform: translate(50px, 25px) scale(1.15);

      }

    }



    .hero-marquee {

      position: absolute;

      top: 150px;

      left: 0;

      width: 100%;

      overflow: hidden;

      z-index: 6;

      pointer-events: none;

    }



    .hero-marquee-text {

      display: inline-block;

      white-space: nowrap;

      font-size: clamp(26px, 4vw, 24px);

      font-weight: 700;

      letter-spacing: 3px;

      text-transform: uppercase;

      color: rgb(255 255 255);

      animation: marqueeTitle 20s linear infinite;

    }



    .hero-marquee-text span {

      color: rgb(255, 255, 255);

    }



    @keyframes marqueeTitle {

      0% {

        transform: translateX(100vw);

      }



      100% {

        transform: translateX(-100%);

      }

    }



    .hero-content {

      width: 100%;

      margin: auto;

      display: flex;

      align-items: center;

      height: 100%;

      padding-top: 30px;

      position: relative;

      z-index: 5;

    }



    .hero-text {

   width: 42%;

  max-width: 720px;

      position: relative;

      z-index: 10;

    }



    .hero-kicker {

      color: #5b8cff;

      font-size: 14px;

      font-weight: 700;

      letter-spacing: 1px;

      text-transform: uppercase;

      margin-bottom: 20px;

      opacity: 0;

      animation: fadeUp 0.8s ease forwards;

    }



    .hero-kicker::before {

      content: " -";

      color: var(--violet);

      margin-right: 12px;

    }



    .hero-text h1 {

      color: #fff;

      font-size: clamp(42px, 4.7vw, 52px);

      line-height: 1.19;

      font-weight: 700;

      letter-spacing: -2px;

      margin-bottom: 5px;

      overflow: hidden;

    }



    .title-line {

      opacity: 0;

      transform: translateY(45px);

      animation: titleReveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

    }



    .title-line:nth-child(1) {

      animation-delay: 0.25s;

    }



    .title-line:nth-child(2) {

      animation-delay: 0.48s;

    }



    .title-line:nth-child(3) {

      animation-delay: 0.72s;

    }



    .digital-word {

      display: inline-block;

      position: relative;

      background: linear-gradient(90deg,

          #6b4cff 0%,

          #5440e4 35%,

          #00a3ff 70%,

          #ffffff 100%);

      background-size: 220% auto;

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

      -webkit-text-fill-color: transparent;

      font-style: italic;

      padding-right: 8px;

      animation:

        gradientText 3s ease-in-out infinite,

        wordFloat 2.8s ease-in-out infinite;

    }

 .violet-span {

        color: #5440e4;

  }

    @keyframes titleReveal {

      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    @keyframes fadeUp {

      from {

        opacity: 0;

        transform: translateY(20px);

      }



      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    @keyframes gradientText {

      0% {

        background-position: 0% center;

      }



      50% {

        background-position: 100% center;

      }



      100% {

        background-position: 0% center;

      }

    }



    @keyframes wordFloat {



      0%,

      100% {

        transform: translateY(0);

      }



      50% {

        transform: translateY(-5px);

      }

    }



    .wave-line {

      width: 100%;

      max-width: 620px;

      height: 45px;

      margin: 0 0 13px;

  opacity: 0;

  animation: fadeUp 0.6s ease forwards .45s;

}.wave-line path {

  stroke-dasharray: 700;

  stroke-dashoffset: 700;

  animation: drawWave 1.2s ease forwards .5s;

    }

     .hero-text p {

      color: rgb(255 255 255 / 90%);

      font-size: 19px;

      line-height: 1.7;

      max-width: 650px;

  opacity: 0;

  animation: fadeUp 0.6s ease forwards .65s;

    }

    .wave-line svg {

      width: 100%;

      height: 100%;

    }



    



    @keyframes drawWave {

      to {

        stroke-dashoffset: 0;

      }

    }



   



    /* ===================== PARTNERS ===================== */

 /* ===================== PARTNERS ===================== */

.partners {

  background: #fff;

  padding: 18px 0;

  overflow: hidden;

  border-bottom: 1px solid #eee;

}



.logo-slider {

  width: 100%;

  overflow: hidden;

}



.logo-track {

  display: flex;

  gap: 90px;

  align-items: center;

  width: max-content;

   animation: scroll 70s linear infinite;}



.partner-logo {

  flex: 0 0 auto;

}



@keyframes logoMove {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}



.logo-slider:hover .logo-track {

  animation-play-state: paused;

}



    /* ===================== SERVICES ===================== */

    .services-realisation {

      padding: 80px 6%;

      background: #f8f7ff;

      overflow: hidden;

    }



    .services-head {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 30px;

      margin-bottom: 45px;

    }



    .mini-title {

      display: flex;

      align-items: center;

      gap: 10px;

      color: #ffffff;

      font-size: 15px;

      font-weight: 700;

    }



    .mini-logo {

      width: 33px;

      height: 33px;

      object-fit: contain;

    }



    .mini-logo-services {

      display: flex;

      align-items: center;

      gap: 10px;

      font-size: 15px;

      font-weight: 700;

      color: var(--violet);

          margin-bottom: 18px;

    }



    .services-head h2 {

      font-family: var(--font-head);

      font-size: clamp(36px, 5vw, 53px);

      line-height: 1.05;

      margin-top: 18px;

      color: #05040f;

    }



    .services-head h2 span {

      color: var(--violet);

    }



    /* ===================== GREEN BTN ===================== */

    .green-btn {

    position: relative;

    padding: 12px 59px 12px 25px;

    border: 2px solid rgba(84, 64, 228, 0.35);

    border-radius: 50px;

    color: var(--violet);

    text-decoration: none;

    font-weight: 700;

    /* display: flex; */

    align-items: center;

    white-space: nowrap;

    isolation: isolate;

    transition: color 0.35s ease;

    }



    .green-btn::before {

      content: "";

      position: absolute;

      inset: 0;

      border-radius: 50px;

      background: linear-gradient(90deg, var(--violet) 0%, #00a3ff 100%);

      z-index: -1;

      clip-path: inset(0 100% 0 0 round 50px);

      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .green-btn:hover {

      color: #fff;

      border-color: var(--violet);

    }



    .green-btn:hover::before {

      clip-path: inset(0 0% 0 0 round 50px);

    }



    .green-btn span {

      position: absolute;

      right: -21px;

      top: 50%;

      transform: translateY(-50%);

     width: 51px;

    height: 51px;

      border-radius: 50%;

      background: #5440e4;

      color: #ffffff;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 900;

      font-size: 16px;

      z-index: 2;

      transition: background 0.35s ease, color 0.35s ease;

    }





    /* ===================== SLIDER ===================== */

    .services-slider {

      position: relative;

      overflow: hidden;

    }



    .services-track {

      display: flex;

      gap: 24px;

      width: max-content;

      animation: servicesMove 28s linear infinite;

    }



    .services-slider:hover .services-track {

      animation-play-state: paused;

    }



    @keyframes servicesMove {

      from {

        transform: translateX(0);

      }



      to {

        transform: translateX(-50%);

      }

    }



    /* ===================== CARTES ===================== */

    .real-card {

      width: 385px;

      height: 270px;

      flex-shrink: 0;

      border-radius: 16px;

      padding: 42px 34px;

      color: #fff;

      position: relative;

      overflow: hidden;

      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

      transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

    }



    .real-card:hover {

      transform: translateY(-6px);

      box-shadow: 0 28px 55px rgba(0, 0, 0, 0.2);

    }



    .real-card::after {

      content: "";

      position: absolute;

      right: -40px;

      top: 0;

      width: 190px;

      height: 100%;

      background: linear-gradient(135deg,

          transparent,

          rgba(255, 255, 255, 0.16));

      transform: skewX(-18deg);

    }



    .real-card h3 {

      font-family: var(--font-head);

      font-size: 28px;

      line-height: 1.05;

      max-width: 250px;

      margin-bottom: 18px;

      position: relative;

      z-index: 2;

    }



    .real-card p {

      font-size: 16px;

      line-height: 1.55;

      color: rgba(255, 255, 255, 0.72);

      max-width: 250px;

      position: relative;

      z-index: 2;

    }



    .real-card a {

      position: absolute;

      left: 34px;

      bottom: 30px;

      background: var(--violet);

      color: #fff;

      padding: 10px 20px;

      border-radius: 50px;

      text-decoration: none;

      font-size: 12px;

      font-weight: 700;

      z-index: 3;

      isolation: isolate;

      transition: color 0.3s ease;

    }



    .real-card a::before {

      content: "";

      position: absolute;

      inset: 0;

      border-radius: 50px;

      background: #ffffff;

      z-index: -1;

      clip-path: inset(0 100% 0 0 round 50px);

      transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .real-card a:hover {

      color: black;

    }



    .real-card a:hover::before {

      clip-path: inset(0 0% 0 0 round 50px);

    }



    .card-1 {

      background: linear-gradient(135deg, #08101d, #15115a), url('');

    }



    .card-2 {

      background: linear-gradient(135deg, #09071d, #5440e4);

    }



    .card-3 {

      background: linear-gradient(135deg, #10131e, #26364a);

    }



    .card-4 {

      background: linear-gradient(135deg, #050505, #1a1a1a);

    }



    /* ===================== FLÈCHES SLIDER ===================== */

    .slider-arrows {

      display: flex;

      justify-content: flex-end;

      gap: 12px;

      margin-top: 20px;

    }



    .slide-arrow {

      width: 50px;

      height: 50px;

      border-radius: 50%;

      border: 2px solid rgba(84, 64, 228, 0.35);

      background: #fff;

      color: #5440e4;

      font-size: 18px;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      isolation: isolate;

      position: relative;

      transition:

        color 0.35s ease,

        border-color 0.35s ease;

    }



    .slide-arrow::before {

      content: "";

      position: absolute;

      inset: 0;

      border-radius: 50%;

      background: linear-gradient(90deg, #5440e4 0%, #00a3ff 100%);

      z-index: -1;

      clip-path: inset(0 100% 0 0 round 50%);

      transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .slide-arrow:hover {

      color: #fff;

      border-color: #5440e4;

    }



    .slide-arrow:hover::before {

      clip-path: inset(0 0% 0 0 round 50%);

    }



    .slide-arrow:disabled {

      opacity: 0.35;

      cursor: not-allowed;

    }



    .slide-arrow:disabled::before {

      display: none;

    }



    /* ===================== À PROPOS ===================== */

    .about-preview {

      padding: 90px 6% 0;

      background: #06122a;

      color: #fff;

      position: relative;

      overflow: visible;

    }



    .about-preview::before {

      content: "";

      position: absolute;

      inset: 0;

      background:

        radial-gradient(circle at 18% 15%, rgb(5 4 4), #060030 34%),

        radial-gradient(circle at 88% 20%,

          rgba(0, 163, 255, 0.18),

          transparent 30%),

        linear-gradient(180deg, #020817 0%, #06122a 100%);

      z-index: 0;

    }



    .about-preview>* {

      position: relative;

      z-index: 1;

    }



    .about-top {

      display: grid;

      grid-template-columns: 0.9fr 1.1fr;

      gap: 45px;

      align-items: center;

      margin-bottom: 80px;

    }



    .about-symbol-box {

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .about-symbol-box img {

      width: 100%;

      height: auto;

      object-fit: contain;

          border-radius: 88px 88px 88px 0;

      filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.35));

    }



    .about-title h2 {

      font-family: var(--font-head);

      font-size: clamp(38px, 5vw, 54px);

      line-height: 1.02;

      margin-top: 18px;

      margin-bottom: 18px;

    }



    .about-title h2 span {

      color: #6d5cff;

    }

  .about-title p {

      color: rgba(255, 255, 255, 0.78);

      font-size: 18px;

      line-height: 1.75;

      max-width: 720px;

    }



    .about-cards {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 28px;

      padding-top: 42px;

      padding-bottom: 44px;

    }

    .about-card {

  cursor: default;

  text-decoration: none;

}



    .about-card {

      box-shadow: 0 20px 55px rgb(255 255 255 / 17%);

      min-height: 190px;

      border-radius: 22px;

      padding: 55px 24px 24px;

      text-align: center;



      text-decoration: none;

      color: #fff;

      position: relative;

      border: 1px solid rgba(255, 255, 255, 0.14);

      background: rgba(255, 255, 255, 0.06);

      transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        background 0.3s ease;

    }



    .about-card:hover {

      transform: translateY(-7px);

      border-color: rgba(0, 163, 255, 0.75);

      background: white;

      color: rgba(0, 0, 0, 0.932);

    }

  .about-card:hover p{

    color: rgb(0 0 0 / 88%);

  }

    .about-card img {

      width: 95px;

      height: 95px;

      border-radius: 22px;

      padding: 14px;

      object-fit: contain;

      position: absolute;

      top: -63px;

      left: 50%;

      transform: translateX(-50%);

      background: linear-gradient(135deg, #ffffff, #eceaff);

      box-shadow: 0 18px 35px rgba(0, 0, 0, .25);

      border: 1px solid rgba(255, 255, 255, .45);

      

    }



    .about-card h3 {

      font-family: var(--font-head);

      font-size: 25px;

      margin-bottom: 10px;

    }



    .about-card p {

      color: rgba(255, 255, 255, 0.72);

      font-size: 14px;

      line-height: 1.55;

      margin-bottom: 10px;

    }



    .about-card .card-arrow {

      text-align: -webkit-right;

      color: white;

    }



    .about-stats {

      width: 92%;

      margin: 0 auto;

      transform: translateY(50%);

      background: #fff;

      color: #05040f;

      border-radius: 16px;

      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      overflow: hidden;

    }



    .stat-item {

      padding: 28px 24px;

      display: flex;

      align-items: center;

      gap: 18px;

      border-right: 1px solid #e8e8ef;

    }



    .stat-item .counter {

      color: black !important;

      font-size: 35px !important;

          font-family: serif;    font-weight: 600;

    }



    .stat-item:last-child {

      border-right: none;

    }



    .stat-item i {

      color: var(--violet);

      font-size: 30px;

    }



    .stat-item strong {

      display: flex;

      font-size: 30px;

      line-height: 1;

    }



    .stat-item span {

      display: block;

      color: #555;

      font-size: 13px;

      margin-top: 6px;

    }



    .about-detail {

      padding: 125px 6% 80px;

      background: #f8f7ff;

    }



    .detail-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 20px;

    }



    .detail-box {

      background: #fff;

      padding: 30px;

      border-radius: 18px;

      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);

      border: 1px solid rgba(84, 64, 228, 0.09);

    }



    .detail-box h3 {

      font-family: var(--font-head);

      font-size: 27px;

      color: #05040f;

      margin-bottom: 14px;

    }



    .detail-box p {

      color: #555;

      line-height: 1.65;

    }



    .contact-band {

      padding: 69px 5%;

      background: #fff;

    }



    .contact-card {

      border-radius: 28px;

      padding: 50px;

      object-fit: cover;

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 30px;

      overflow: hidden;

      position: relative;

    }



    /* .contact-card::after {

        content: "";

        position: absolute;

        right: -90px;

        top: -90px;

        width: 260px;

        height: 260px;

        background: radial-gradient(

          circle,

          rgba(0, 163, 255, 0.42),

          transparent 65%

        );

      } */



    .contact-card h2 {

      font-family: var(--font-head);

      font-size: clamp(34px, 4vw, 41px);

      line-height: 1.05;

      margin-bottom: 12px;

      margin-top: 8px;

    }



    .contact-card p {

      color: rgba(255, 255, 255, 0.75);

      font-size: 15px;

    }



    /* ===================== FAQ ===================== */

    .faq-section {

      padding: 95px 6% 70px;

      background: rgb(84 64 228 / 10%);

      position: relative;

      overflow: hidden;

    }



    .faq-bg-symbol {

      position: relative;

      right: -11px;

      top: 28px;

      width: 168px;

      /* opacity: 0.95; */

      /* filter: drop-shadow(0 24px 34px rgba(84, 64, 228, 0.18)); */

      pointer-events: none;

    }



    .faq-head {

      text-align: center;

      max-width: 760px;

      margin: 0 auto 45px;

    }



    .faq-badge {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      padding: 8px 16px;

      border-radius: 999px;

      color: var(--violet);

      font-size: 17px;

      font-weight: 900;

      margin-bottom: 16px;

    }



    .faq-head h2 {

      font-family: var(--font-head);

      font-size: clamp(38px, 5vw, 56px);

      line-height: 1.05;

      color: #05040f;

      margin-bottom: 16px;

    }



    .faq-head h2 span {

      color: var(--violet);

    }



    .faq-head p {

      color: #5d6478;

      font-size: 17px;

      line-height: 1.7;

    }



    .faq-layout {

      max-width: 1780px;

      margin: 0 auto;

      display: grid;

      grid-template-columns: 0.9fr 2.6fr;

      gap: 28px;

      align-items: stretch;

    }



    .faq-contact-box {

      background: rgba(255, 255, 255, 0.84);

      border: 1px solid rgba(84, 64, 228, 0.12);

      border-radius: 18px;

      box-shadow: 0 20px 55px rgba(5, 4, 15, 0.08);

      padding: 34px 30px 41px;

max-height: 77%;

  overflow: hidden;    }

.blg-description{

    color: rgba(255, 255, 255, 0.75);

    font-size: 17px;

        margin-bottom: 12px;

    margin-top: 8px;

}

    .faq-contact-icon,

    .faq-icon {

      width: 52px;

      height: 52px;

      border-radius: 50%;

      background: rgba(84, 64, 228, 0.08);

      color: var(--violet);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 20px;

      box-shadow: inset 0 0 0 1px rgba(84, 64, 228, 0.08);

    }



    .faq-contact-box h3 {

      font-family: var(--font-head);

      color: #05040f;

      font-size: 28px;

      line-height: 1.2;

      margin: 26px 0 14px;

    }



    .faq-contact-box h3 span {

      color: var(--violet);

    }



    .faq-contact-box p {

      color: #5d6478;

      font-size: 15px;

      line-height: 1.65;

      margin-bottom: 22px;

    }



    .faq-contact-btn {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 10px;

      min-height: 44px;

      width: 100%;

      border-radius: 10px;

      background: linear-gradient(90deg, #5440e4, #b21cff);

      color: #fff;

      text-decoration: none;

      font-weight: 700;

      font-size: 14px;

      box-shadow: 0 12px 24px rgba(84, 64, 228, 0.24);

          margin-bottom: 22px;

    }



    .faq-contact-visual {

      height: 205px;

      margin-top: 28px;

      position: relative;

      display: flex;

      align-items: flex-end;

      justify-content: center;

    }

    .faq-laptop {

      width: 230px;

      height: 120px;

      border-radius: 12px 12px 7px 7px;

      position: relative;

    }



 .faq-laptop-img  img{

      max-width: 350px;

    height: auto;
    width: 100%;

 }

    .faq-laptop img {

      position: absolute;

      width: 42px;

      top: 40px;

      left: 50%;

      transform: translateX(-50%);

    }





    .faq-list {

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    .faq-item {

      background: rgba(255, 255, 255, 0.92);

      border: 1px solid rgba(84, 64, 228, 0.11);

      border-radius: 14px;

      box-shadow: 0 14px 36px rgba(5, 4, 15, 0.06);

      overflow: hidden;

      transition:

        border-color 0.25s ease,

        box-shadow 0.25s ease;

    }



    .faq-item.active {

      border-color: rgba(84, 64, 228, 0.28);

      box-shadow: 0 18px 42px rgba(84, 64, 228, 0.12);

    }



    .faq-question {

      width: 100%;

      min-height: 68px;

      padding: 18px 22px 18px;

      border: 0;

      background: transparent;

      display: grid;

      grid-template-columns: 54px 1fr 40px;

      gap: 16px;

      align-items: center;

      text-align: left;

      cursor: pointer;

      font-family: var(--font-body);

      color: #05040fe8;

      font-size: 17px;

      font-weight: 600;

    }



    .faq-toggle {

      width: 36px;

      height: 36px;

      border-radius: 50%;

      background: rgba(84, 64, 228, 0.08);

      color: var(--violet);

      display: flex;

      align-items: center;

      justify-content: center;

      transition:

        transform 0.25s ease,

        background 0.25s ease;

    }



    .faq-item.active .faq-toggle {

      transform: rotate(45deg);

      background: linear-gradient(135deg, #5440e4, #9b28ff);

      color: #fff;

    }



    .faq-answer {

      max-height: 0;

      overflow: hidden;

      transition: max-height 0.3s ease;

    }



    .faq-answer p {

      padding: 0 78px 24px 92px;

      color: #5d6478;

      line-height: 1.7;

      font-size: 15px;

    }



    .faq-benefits {

      max-width: 1780px;

      margin: 32px auto 0;

      border: 1px solid rgba(84, 64, 228, 0.1);

      border-radius: 18px;

      box-shadow: 0 20px 55px rgba(5, 4, 15, 0.07);

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      overflow: hidden;

          background-color: #1f0b4c;

    }



    .faq-benefit {

      padding: 22px 24px;

      display: flex;

      gap: 16px;

      align-items: center;

      border-right: 1px solid rgba(84, 64, 228, 0.12);

    }



    .faq-benefit:last-child {

      border-right: 0;

    }



    .faq-benefit i {

      width: 46px;

      height: 46px;

      flex: 0 0 46px;

      border-radius: 50%;

      background: rgb(255 255 255);

      color: var(--violet);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 18px;

    }



    .faq-benefit strong {

      display: block;

      color: white;

      font-size: 13px;

      margin-bottom: 5px;

    }



    .faq-benefit span {

      display: block;

      color: white;

      font-size: 11px;

      line-height: 1.45;

    }







    /* ===================== CONTACT PAGE SECTION ===================== */

    .contact-page-section {

      padding: 95px 6% 85px;

      /* background:

          radial-gradient(circle at 12% 12%, rgba(84, 64, 228, 0.20), transparent 32%),

          radial-gradient(circle at 86% 18%, rgba(0, 163, 255, 0.16), transparent 30%),

          linear-gradient(135deg, #05040f 0%, #0b0828 45%, #f8f7ff 45.2%, #ffffff 100%); */

      position: relative;

      overflow: hidden;

    }



    .contact-page-section::before {

      content: "";

      position: absolute;

      inset: 0;

      background-image:

        radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),

        linear-gradient(120deg, transparent 0%, rgba(84, 64, 228, 0.10) 55%, transparent 100%);

      background-size: 26px 26px, 100% 100%;

      opacity: 0.35;

      pointer-events: none;

    }



    .contact-page-wrap {

      max-width: 1380px;

      margin: 0 auto;

      position: relative;

      z-index: 1;

    }



    .contact-page-head {

      text-align: center;

      margin-bottom: 38px;

      display: none;

    }



    .contact-page-head .mini-logo-services {

      justify-content: center;

    }



    .contact-page-head h2 {

      font-family: var(--font-head);

      font-size: clamp(38px, 5vw, 58px);

      line-height: 1.05;

      color: #05040f;

      margin-top: 16px;

      margin-bottom: 14px;

    }



    .contact-page-head h2 span {

      color: #8e59ff;

    }



    .contact-page-head p {

      max-width: 680px;

      margin: 0 auto;

      color: #5d6478;

      font-size: 17px;

      line-height: 1.7;

    }



    .contact-page-grid {

      display: grid;

      grid-template-columns: 0.85fr 1.15fr;

      gap: 28px;

      align-items: stretch;

    }



    .contact-info-panel,

    .contact-form-panel,

    .contact-map-panel {

      border: 1px solid rgba(255, 255, 255, 0.16);

      border-radius: 28px;

      box-shadow: 0 30px 80px rgba(5, 4, 15, 0.16);

      overflow: hidden;

    }

    .contact-info-panel{
    max-height: 731px;

    }


    .contact-info-panel {

      padding: 42px 34px;

      border: 1px solid #00000096;

      color: #fff;

      background-image: linear-gradient(90deg,

          rgba(2, 1, 7, 0.97) 0%,

          rgba(2, 1, 7, 0.78) 28%,

          rgba(2, 1, 7, 0.32) 55%,

          rgba(2, 1, 7, 0) 100%),

        url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/Calque 7x S1.png");

      background-size: cover;

      position: relative;

    }



    /* .contact-info-panel::after {

        content: "";

        position: absolute;

        right: -80px;

        bottom: -80px;

        width: 240px;

        height: 240px;

        border-radius: 50%;

        background: radial-gradient(circle, rgba(0, 163, 255, 0.38), transparent 68%);

      } */



    .contact-info-panel h3 {

      font-family: var(--font-head);

      font-size: 34px;

      line-height: 1.1;

      margin: 18px 0 14px;

      position: relative;

      z-index: 1;

    }



    .contact-info-panel p {

      color: white;

      line-height: 1.7;

      margin-bottom: 26px;

      position: relative;

      z-index: 1;

      max-width: 395px;

    }



    .contact-info-list {

      display: flex;

      flex-direction: column;

      gap: 14px;

      position: relative;

      z-index: 1;

    }



    .contact-info-item {

      display: flex;

      gap: 14px;

      align-items: flex-start;

      padding: 11px;

      border-radius: 18px;

      background: rgba(255, 255, 255, 0.07);

      border: 1px solid rgba(255, 255, 255, 0.10);

    }



    .contact-info-item i {

      width: 42px;

      height: 42px;

      flex: 0 0 42px;

      border-radius: 50%;

      background: #41258a;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #fff;

      font-size: 16px;

    }



    .contact-info-item strong {

      display: block;

      font-size: 15px;

      margin-bottom: 5px;

    }



    .contact-info-item span,

    .contact-info-item a {

      color: white;

      text-decoration: none;

      font-size: 14px;

      line-height: 1.45;

    }



    .contact-socials {

      display: flex;

      gap: 12px;

      margin-top: 26px;

      position: relative;

      z-index: 1;

    }



    .contact-socials a {

      width: 42px;

      height: 42px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #fff;

      text-decoration: none;

      border: 1px solid rgba(255, 255, 255, 0.18);

      background: rgba(255, 255, 255, 0.08);

      transition: transform 0.3s ease, background 0.3s ease;

    }



    .contact-socials a:hover {

      transform: translateY(-4px);

      background: linear-gradient(135deg, #5440e4, #b21cff);

    }



    .contact-form-panel {

      padding: 42px;

      background: rgba(255, 255, 255, 0.94);

      border-color: rgba(84, 64, 228, 0.12);

    }



    .contact-form-panel h2 {

      font-family: var(--font-head);

      color: #05040f;

      font-size: clamp(38px, 5vw, 38px);

      line-height: 1.1;

      margin-bottom: 12px;

    }



    .contact-form-panel h2 span {

      color: var(--violet);

    }



    .contact-form-panel p {

      color: #5d6478;

      line-height: 1.65;

      margin-bottom: 26px;

    }



    .contact-form {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 16px;

    }



    .form-group {

      position: relative;

    }



    .form-group.full {

      grid-column: 1 / -1;

    }



    .form-group label {

      display: block;

      color: #252338;

      font-size: 13px;

      font-weight: 700;

      margin-bottom: 8px;

    }



    .form-group input,

    .form-group textarea {

      width: 100%;

      border: 1px solid rgba(84, 64, 228, 0.16);

      border-radius: 14px;

      background: #fff;

      color: #05040f;

      font-family: var(--font-body);

      font-size: 14px;

      padding: 15px 16px;

      outline: none;

      transition: border-color 0.25s ease, box-shadow 0.25s ease;

    }



    .form-group textarea {

      resize: vertical;

      min-height: 135px;

    }



    .form-group input:focus,

    .form-group textarea:focus {

      border-color: var(--violet);

      box-shadow: 0 0 0 4px rgba(84, 64, 228, 0.10);

    }



    .contact-submit {

      grid-column: 1 / -1;

      border: none;

      cursor: pointer;

      height: 54px;

      border-radius: 14px;

      background: linear-gradient(90deg, #5440e4, #b21cff);

      color: #fff;

      font-family: var(--font-body);

      font-size: 15px;

      font-weight: 900;

      box-shadow: 0 16px 30px rgba(84, 64, 228, 0.25);

      transition: transform 0.25s ease, box-shadow 0.25s ease;

    }



    .contact-submit:hover {

      transform: translateY(-3px);

      box-shadow: 0 22px 40px rgba(84, 64, 228, 0.32);

    }



    .contact-map-panel {

      margin-top: 28px;

      height: 360px;

      background: #fff;

      border-color: rgba(84, 64, 228, 0.12);

    }



    .contact-map-panel iframe {

      width: 100%;

      height: 100%;

      border: 0;

      display: block;

    }



    @media (max-width: 1000px) {

      .contact-page-section {

        background:

          radial-gradient(circle at 12% 12%, rgba(84, 64, 228, 0.20), transparent 32%),

          linear-gradient(180deg, #05040f 0%, #0b0828 44%, #f8f7ff 44.2%, #ffffff 100%);

      }



      .contact-page-grid {

        grid-template-columns: 1fr;

      }

    }



    @media (max-width: 650px) {

      .contact-page-section {

        padding: 70px 5%;

      }



      .contact-form-panel,

      .contact-info-panel {

        padding: 30px 22px;

      }



      .contact-form {

        grid-template-columns: 1fr;

      }



      .contact-map-panel {

        height: 300px;

      }

    }



    /* ===================== RESPONSIVE ===================== */

    @media (max-width: 900px) {

      .nav-links {

        display: none;

      }



      .hero {

        background-size:

          100% 100%,

          cover;

        background-position:

          center,

          right center;

      }



      .hero-marquee {

        top: 85px;

      }



      .hero-content {

        align-items: flex-start;

        padding-top: 140px;

      }



      .hero-text {

        width: 100%;

      }



      .hero-text h1 {

        font-size: 44px;

      }



      .hero-text p {

        font-size: 17px;

      }



      .services-head {

        flex-direction: column;

        align-items: flex-start;

      }



      .green-btn {

        height: 48px;

        padding: 0 55px 0 22px;

      }



      .real-card {

        width: 310px;

        height: 240px;

      }

    }



    @media (max-width: 1000px) {



      .about-top,

      .detail-grid,

      .faq-layout {

        grid-template-columns: 1fr;

      }



      .about-cards,

      .about-stats,

      .faq-benefits {

        grid-template-columns: repeat(2, 1fr);

      }



      .contact-card {

        flex-direction: column;

        align-items: flex-start;

      }

    }



    @media (max-width: 650px) {



      .about-cards,

      .about-stats,

      .faq-benefits {

        grid-template-columns: 1fr;

      }



      .stat-item {

        border-right: none;

        border-bottom: 1px solid #e8e8ef;

      }



      .contact-card {

        padding: 34px 24px;

      }



      .about-symbol-box {

        min-height: 240px;

      }



      .faq-question {

        grid-template-columns: 44px 1fr 34px;

        gap: 10px;

        font-size: 15px;

        padding: 15px;

      }



      .faq-answer p {

        padding: 0 18px 22px 70px;

      }



      .faq-benefit {

        border-right: 0;

        border-bottom: 1px solid rgba(84, 64, 228, 0.12);

      }



      .faq-bg-symbol {

        width: 145px;

        left: -40px;

      }

    }





    /* ================= MEGA MENU SERVICES ================= */

    /* ===================== FOOTER MODERNE ===================== */

    .site-footer {

      position: relative;

      overflow: hidden;

      padding: 78px 6% 28px;

      color: #fff;

      background:

        white;

    }



    .site-footer::before {

      content: "";

      position: absolute;

      inset: 0;

      background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);

      background-size: 28px 28px;

      opacity: .18;

    }



    .footer-wrap {

      position: relative;

      z-index: 1;

      max-width: 1480px;

      margin: 0 auto;

    }



    .footer-newsletter {

display: grid;

    grid-template-columns: 2.1fr 0.9fr;

    gap: 28px;

    align-items: center;

    border: 1px solid rgba(255, 255, 255, .14);

    /* margin-bottom: 48px; */

    background-size: cover;

    padding: 50px 88px;

            background-image: url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/footer-newsletter-bg.png");



    }

.mini-logo-services img {

    width: 24px;

    height: 24px;

    object-fit: contain;

}

.mini-logo-services {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--violet);

    font-weight: 800;

    font-size: 14px;

    text-transform: math-auto ;

}



.mini-logo-services-center img {

    width: 24px;

    height: 24px;

    object-fit: contain;

}

.mini-logo-services-center {

      justify-content: center;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--violet);

    font-weight: 800;

    font-size: 14px;

    text-transform: math-auto;

}







    .footer-newsletter h2 {

      font-family: var(--font-head);

      font-size: clamp(34px, 3vw, 52px);

      line-height: 1.05;

      margin: 10px 0 8px;

          color: white;

    }



    .footer-newsletter h2 span {

      color: #8f7cff;

    }



    .footer-newsletter p {
    font-size: 14px;

      /*max-width: 660px;*/

      color: rgb(255 255 255 / 94%);

      line-height: 1.7;

    }



    .newsletter-form {

      display: flex;

      gap: 10px;

      padding: 0;

      border-radius: 999px;

      background: #fff;

      box-shadow: 0 18px 50px rgba(0, 0, 0, .22);

    }



    .newsletter-form input {

      flex: 1;

      border: 0;

      outline: 0;

      min-width: 0;

      padding: 0 18px;

      font-family: var(--font-body);

      font-weight: 700;

      color: #05040f;

      border-radius: 50px;

    }



    .newsletter-form button {

      border: 0;

      cursor: pointer;
      width: fit-content;

      padding: 15px 22px;

      border-radius: 999px;

      background: linear-gradient(90deg, #5440e4, #b21cff);

      color: #fff;

      font-weight: 900;

      font-family: var(--font-body);

      white-space: nowrap;

      justify-content: space-around;

      display: flex;

      align-items: center;

      gap: 11px;

    }



    .footer-grid {

      display: grid;

      grid-template-columns: 1.3fr .8fr .8fr 1fr;

      gap: 34px;

      padding-bottom: 35px;

    }



    .footer-brand img {

      /* width: 170px; */

      max-width: 100%;

      margin-bottom: 18px;

    }



    .footer-brand p,

    .footer-contact li,

    .footer-links a {

      color: rgb(0 0 0 / 72%);

      line-height: 1.7;
      font-size: 15px;
    text-align: justify;

    }



    .footer-col h3 {

      font-family: var(--font-head);

      font-size: 24px;

          color: rgb(0 0 0 / 72%);

      margin-bottom: 18px;

    }



    .footer-links,

    .footer-contact {

      list-style: none;

      display: flex;

      flex-direction: column;

      gap: 10px;

    }



    .footer-links a {

      text-decoration: none;

      transition: color .25s ease, transform .25s ease;

    }



    .footer-links a:hover {

      color: rgb(108 23 209);

      transform: translateX(4px);

    }



    .footer-contact li {

      display: flex;

      gap: 12px;

      align-items: flex-start;

    }



    .footer-contact i {

      color: rgb(108 23 209);

      margin-top: 6px;

    }



    .footer-socials {

      display: flex;

      gap: 12px;

      margin-top: 22px;

    }



    .footer-socials a {

      width: 43px;

      height: 43px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #fff;

      text-decoration: none;

      background: rgba(255, 255, 255, .08);

      border: 1px solid rgba(255, 255, 255, .13);

      transition: transform .25s ease, background .25s ease;

    }



    .footer-socials a:hover {

      transform: translateY(-4px);

      background: linear-gradient(135deg, #5440e4, #b21cff);

    }



    .footer-bottom {
    justify-content: space-around;

      display: flex;


      gap: 18px;

      align-items: center;

      padding-top: 22px;

      border-top: 1px solid rgb(0 0 0 / 12%);

      color: rgb(0 0 0 / 72%);

      font-size: 14px;

    }



    .footer-bottom a {

      color: rgb(0 0 0 / 72%);

      text-decoration: none;

      margin-left: 18px;

    }



    @media (max-width: 1100px) {



      .footer-newsletter,

      .footer-grid {

        grid-template-columns: 1fr 1fr;

      }

    }



    @media (max-width: 900px) {

      .submenu {

        display: none;

      }

    }



    @media (max-width: 700px) {



      .footer-newsletter,

      .footer-grid {

        grid-template-columns: 1fr;

      }



      .newsletter-form {

        border-radius: 20px;

        flex-direction: column;

      }



      .newsletter-form input {

        min-height: 48px;

      }



      .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

      }



      .footer-bottom a {

        margin: 0 14px 0 0;

      }

    }

  /* ================= HEADER FIX ================= */



.site-header {

  width: 100%;

  height: 82px;

  padding: 0 6% 0 0 ;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 999;

  background: transparent;

  border-top: none;

}



.internal-header {

  position: relative !important;

  background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;

}



/* Logo propre */

.logo {

  display: flex;

  align-items: center;

  flex: 0 0 auto;

}

/* ================= HEADER CLEAN RESPONSIVE ================= */



.site-header {

  width: 100%;

  height: 82px;

  padding: 0 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 999;

  background: transparent;

  border-top: none;

}



/* Header pages internes */

.internal-header {

  position: relative !important;

  background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;

}



/* LOGO À GAUCHE SANS ESPACE */

.logo {

  display: flex;

  align-items: center;

  flex: 0 0 auto;

  line-height: 0;

  margin: 0;

  padding: 0;

}



.logo a {

  display: flex;

  align-items: center;

  line-height: 0;

}



.logo img {

  width: auto !important;

  max-width: 185px !important;

  max-height: 58px !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  display: block;

  object-fit: contain;

}



/* NAV AREA */

.nav-area {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 34px;

  flex: 1;

}



/* MENU DESKTOP */

.nav-links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(24px, 3vw, 54px);

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-links li {

  display: flex;

  align-items: center;

}



.nav-links a {

  color: #ffffff;

  text-decoration: none;

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  display: inline-flex;

  align-items: center;

  gap: 7px;

}



.nav-links a:hover {

  color: #dcd5ff;

}



/* Header interne */

.internal-header .nav-links a {

  color: #000 !important;

}



.internal-header .nav-links a:hover {

  color: #5440e4 !important;

}



/* BOUTON CONTACT */

.btn-style {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 46px;

  padding: 0 55px 0 20px;

  border: 2px solid #fff;

  border-radius: 50px;

  color: #fff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  background: transparent;

  isolation: isolate;

  transform: translateZ(0);

  white-space: nowrap;
  

}



.btn-style::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50px;

  background: linear-gradient(90deg, #8c02b9 0%, #4e40b9 45%, #09699f 100%);

  z-index: -1;

  clip-path: inset(0 100% 0 0 round 50px);

  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-style:hover::before {

  clip-path: inset(0 0% 0 0 round 50px);

}



.btn-arrow {

  position: absolute;

  right: -5px;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: #fff;

  color: #000;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  z-index: 2;

  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;

}



.btn-style:hover .btn-arrow {

  transform: translateY(-50%) translateX(4px);

}



.nav-cta {

  flex: 0 0 auto;

  height: 40px;

  padding-right: 48px;

  font-size: 12px;

  font-weight: 700;

}



.nav-cta .btn-arrow {

  width: 43px;

  height: 43px;

}



.internal-header .btn-style {

  border-color: #5440e4;

  color: #5440e4;

}



.internal-header .btn-style:hover {

  color: #fff;

}



.internal-header .btn-arrow {

  background: #4e40b9;

  color: #fff;

}



/* HAMBURGER */

.nav-toggle {

  display: none;

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: #ffffff;

  color: #4e40b9;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 20px;

  box-shadow: 0 12px 28px rgba(30, 20, 120, 0.12);

}



.internal-header .nav-toggle {

  background: #4e40b9;

  color: #ffffff;

}



/* MEGA MENU */

.has-mega {

  position: static !important;

}



.mega-menu {

  position: absolute;

  top: 82px;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  width: min(1180px, calc(100vw - 60px));

  background: #ffffff;

  border-radius: 26px;

  padding: 32px;

  border: 1px solid rgba(84, 64, 185, 0.12);

  box-shadow: 0 30px 90px rgba(20, 15, 60, 0.16);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: 0.3s ease;

  z-index: 1000;

}



.has-mega:hover .mega-menu {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateX(-50%) translateY(0);

}



.mega-header {

  text-align: center;

  margin-bottom: 28px;

}



.mega-header span {

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 2px;

  color: #8f7cff;

  text-transform: uppercase;

}



.mega-header h3 {

  font-size: 26px;

  margin-top: 8px;

  color: #000000;

}



.mega-content {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

}



.mega-col {

  background: #faf9ff;

  border: 1px solid rgba(84, 64, 185, 0.08);

  border-radius: 18px;

  padding: 20px;

}



.mega-col h4 {

  color: #5440e4;

  font-size: 16px;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 16px;

}



.mega-col a {

  display: block;

  padding: 10px 0;

  color: #000 !important;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  border-bottom: 1px solid rgba(84, 64, 185, 0.08);

}



.mega-col a:last-child {

  border-bottom: none;

}



.mega-col a small {

  display: block;

  margin-top: 4px;

  font-size: 12px;

  font-weight: 400;

  color: #666;

}



/* RESPONSIVE TABLET */

@media (max-width: 1180px) {

  .site-header {

    padding: 0 4%;

    gap: 22px;

  }



  .logo img {

    max-width: 160px !important;

    max-height: 52px !important;

  }



  .nav-links {

    gap: 24px;

  }



  .nav-links a {

    font-size: 14px;

  }



  .mega-content {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* RESPONSIVE MOBILE */

@media (max-width: 980px) {

  .site-header {

    height: 76px;

    padding: 0 20px;

    position: absolute;

  }



  .internal-header {

    position: relative !important;

  }



  .logo img {

    max-width: 140px !important;

    max-height: 48px !important;

  }



  .nav-toggle {

    display: flex;

  }



  .nav-area {

    position: fixed;

    top: 76px;

    left: 14px;

    right: 14px;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(84, 64, 185, 0.12);

    border-radius: 22px;

    padding: 22px;

    box-shadow: 0 28px 80px rgba(20, 15, 60, 0.18);

    display: block;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

    transition: 0.25s ease;

  }



  .site-header.is-open .nav-area {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }



  .nav-links {

    display: grid !important;

    gap: 0;

    width: 100%;

  }



  .nav-links li {

    display: block;

    border-bottom: 1px solid rgba(84, 64, 185, 0.1);

  }



  .nav-links a {

    color: #111 !important;

    font-size: 15px;

    padding: 16px 0;

    width: 100%;

    justify-content: space-between;

  }



  .nav-cta {

    display: inline-flex !important;

    margin-top: 22px;

    color: #111;

    border-color: #111;

  }



  .nav-cta:hover {

    color: #fff;

  }



  .nav-cta .btn-arrow {

    background: #4e40b9;

    color: #fff;

  }



  .mega-menu {

    position: static;

    transform: none;

    width: 100%;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    box-shadow: none;

    border-radius: 18px;

    padding: 18px;

    margin: 0 0 18px;

    display: none;

    background: #f8f5ff;

  }



  .has-mega:hover .mega-menu {

    transform: none;

  }



  .has-mega.is-active .mega-menu {

    display: block;

  }



  .mega-header h3 {

    font-size: 19px;

  }



  .mega-content {

    grid-template-columns: 1fr;

    gap: 14px;

  }



  .mega-col {

    padding: 16px;

  }

}



/* SMALL MOBILE */

@media (max-width: 520px) {

  .site-header {

    padding: 0 14px;

  }



  .logo img {

    max-width: 125px !important;

    max-height: 44px !important;

  }



  .nav-area {

    left: 10px;

    right: 10px;

    padding: 18px;

  }

}

.logo img {

    width: auto;

    margin-top: 0;

    display: block;

}



/* Menu desktop */

.nav-links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 38px;

  list-style: none;

  margin: 0;

  padding: 0;

  flex: 1;

}



.nav-links li {

  display: flex;

  align-items: center;

}



.nav-links a {

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

}



/* Bouton */

.nav-cta {

  flex: 0 0 auto;

  height: 40px;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



/* Header clair */

.internal-header .nav-links a {

  color: #000 !important;

}



.internal-header .btn-style {

border-color: #5440e4;

    color: #5440e4;

}



.internal-header .btn-arrow {

  background: #4e40b9;

  color: #fff;

}



/* Mega menu aligné */

.mega-menu {

  top: 82px;

}



/* ================= MOBILE ================= */



.mobile-menu-btn {

  display: none;

}



@media (max-width: 1024px) {

  .site-header {

    height: 76px;

    padding: 0 5%;

  }



  .logo img {

    max-height: 55px !important;

  }



  .nav-links {

    gap: 22px;

  }



  .nav-links a {

    font-size: 14px;

  }



  .nav-cta {

    display: none;

  }

}



@media (max-width: 900px) {

  .site-header {

    position: relative;

    background: #05040f;

  }



  .internal-header {

    background: #f3eeff !important;

  }



  .nav-links {

    display: none !important;

  }



  .nav-cta {

    display: none !important;

  }



  .mobile-menu-btn {

    display: flex;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    align-items: center;

    justify-content: center;

    background: #5440e4;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

  }

}

.btn-arrow {

  transition:

    background 0.35s ease,

    color 0.35s ease,

    transform 0.35s ease;

}



.btn-style:hover .btn-arrow,

.btn-style-hero:hover .btn-arrow {

  transform: translateY(-50%) translateX(4px);

}.green-btn span {

  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;

}

.green-btn:hover span {

  transform: translateY(-50%) translateX(4px);

}.about-stats {

  transform: translateY(50%); /* déplace la carte de moitié vers le bas */

}

@media (max-width: 1000px) {

  .about-stats {

    transform: translateY(20px);

    margin-bottom: 20px;

  }

}



@media (max-width: 1000px) {

  .faq-contact-box { max-height: none; }

}@media (max-width: 1000px) {

  .mz-service-content p {

    max-height: none;

    opacity: 1;

    margin-top: 10px;

    transform: none;

  }

  .mz-service-img { height: 170px; }

}/* ================= HEADER CLEAN RESPONSIVE ================= */



.site-header {

  width: 100%;

  height: 82px;

  padding: 0 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 999;

  background: transparent;

  border-top: none;

}



.internal-header {

  position: relative !important;

  background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;

}



/* LOGO */

.logo {

  display: flex;

  align-items: center;

  flex: 0 0 auto;

  line-height: 0;

  margin: 0;

  padding: 0;

}



.logo a {

  display: flex;

  align-items: center;

  line-height: 0;

}



.logo img {

  width: auto !important;

  max-width: 20% !important;

  max-height: 20% !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  display: block;

  object-fit: contain;

}



/* NAV */

.nav-area {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 34px;

  flex: 1;

}



.nav-links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(24px, 3vw, 54px);

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-links li {

  display: flex;

  align-items: center;

}



.nav-links a {

  color: #ffffff;

  text-decoration: none;

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  display: inline-flex;

  align-items: center;

  gap: 7px;

}



.nav-links a:hover {

  color: #dcd5ff;

}



.internal-header .nav-links a {

  color: #000 !important;

}



.internal-header .nav-links a:hover {

  color: #5440e4 !important;

}



/* BOUTON CONTACT */

.btn-style {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 46px;

  padding: 0 55px 0 20px;

  border: 2px solid #fff;

  border-radius: 50px;

  color: #fff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  background: transparent;

  isolation: isolate;

  transform: translateZ(0);

  white-space: nowrap;

}



.btn-style::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50px;

  background: linear-gradient(90deg, #8c02b9 0%, #4e40b9 45%, #09699f 100%);

  z-index: -1;

  clip-path: inset(0 100% 0 0 round 50px);

  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-style:hover::before {

  clip-path: inset(0 0% 0 0 round 50px);

}



.btn-arrow {

  position: absolute;

  right: -5px;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: #fff;

  color: #000;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  z-index: 2;

  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;

}



.btn-style:hover .btn-arrow {

  transform: translateY(-50%) translateX(4px);

}



.nav-cta {

  flex: 0 0 auto;

  height: 40px;

  padding-right: 48px;

  font-size: 12px;

  font-weight: 700;

}



.nav-cta .btn-arrow {

  width: 43px;

  height: 43px;

}



.internal-header .btn-style {

  border-color: #5440e4;

  color: #5440e4;

}



.internal-header .btn-style:hover {

  color: #fff;

}



.internal-header .btn-arrow {

  background: #4e40b9;

  color: #fff;

}



/* HAMBURGER */

.nav-toggle {

  display: none;

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: #ffffff;

  color: #4e40b9;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 20px;

  box-shadow: 0 12px 28px rgba(30, 20, 120, 0.12);

}



.internal-header .nav-toggle {

  background: #4e40b9;

  color: #ffffff;

}



/* MEGA MENU */

.has-mega {

  position: static !important;

}



.mega-menu {

  position: absolute;

  top: 82px;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  width: min(1180px, calc(100vw - 60px));

  background: #ffffff;

  border-radius: 26px;

  padding: 32px;

  border: 1px solid rgba(84, 64, 185, 0.12);

  box-shadow: 0 30px 90px rgba(20, 15, 60, 0.16);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: 0.3s ease;

  z-index: 1000;

}



.has-mega:hover .mega-menu {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateX(-50%) translateY(0);

}



.mega-header {

  text-align: center;

  margin-bottom: 28px;

}



.mega-header span {

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 2px;

  color: #8f7cff;

  text-transform: uppercase;

}



.mega-header h3 {

  font-size: 26px;

  margin-top: 8px;

  color: #000000;

}



.mega-content {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

}



.mega-col {

  background: #faf9ff;

  border: 1px solid rgba(84, 64, 185, 0.08);

  border-radius: 18px;

  padding: 20px;

}



.mega-col h4 {

  color: #5440e4;

  font-size: 16px;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 16px;

}



.mega-col a {

  display: block;

  padding: 10px 0;

  color: #000 !important;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  border-bottom: 1px solid rgba(84, 64, 185, 0.08);

}



.mega-col a:last-child {

  border-bottom: none;

}



.mega-col a small {

  display: block;

  margin-top: 4px;

  font-size: 12px;

  font-weight: 400;

  color: #666;

}



/* TABLET */

@media (max-width: 1180px) {

  .site-header {

    padding: 0 4%;

    gap: 22px;

  }



  .logo img {

    max-width: 160px !important;

    max-height: 52px !important;

  }



  .nav-links {

    gap: 24px;

  }



  .nav-links a {

    font-size: 14px;

  }



  .mega-content {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* MOBILE */

@media (max-width: 980px) {

  .site-header {

    height: 76px;

    padding: 0 20px;

    position: absolute;

  }



  .internal-header {

    position: relative !important;

  }



  .logo img {

    max-width: 145px !important;

    max-height: 48px !important;

  }



  .nav-toggle {

    display: flex;

  }



  .nav-area {

    position: fixed;

    top: 76px;

    left: 14px;

    right: 14px;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(84, 64, 185, 0.12);

    border-radius: 22px;

    padding: 22px;

    box-shadow: 0 28px 80px rgba(20, 15, 60, 0.18);

    display: block;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

    transition: 0.25s ease;

  }



  .site-header.is-open .nav-area {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }



  .nav-links {

    display: grid !important;

    gap: 0;

    width: 100%;

  }



  .nav-links li {

    display: block;

    border-bottom: 1px solid rgba(84, 64, 185, 0.1);

  }



  .nav-links a {

    color: #111 !important;

    font-size: 15px;

    padding: 16px 0;

    width: 100%;

    justify-content: space-between;

  }



  .nav-cta {

    display: inline-flex !important;

    margin-top: 22px;

    color: #111;

    border-color: #111;

  }



  .nav-cta:hover {

    color: #fff;

  }



  .nav-cta .btn-arrow {

    background: #4e40b9;

    color: #fff;

  }



  .mega-menu {

    position: static;

    transform: none;

    width: 100%;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    box-shadow: none;

    border-radius: 18px;

    padding: 18px;

    margin: 0 0 18px;

    display: none;

    background: #f8f5ff;

  }



  .has-mega:hover .mega-menu {

    transform: none;

  }



  .has-mega.is-active .mega-menu {

    display: block;

  }



  .mega-header h3 {

    font-size: 19px;

  }



  .mega-content {

    grid-template-columns: 1fr;

    gap: 14px;

  }



  .mega-col {

    padding: 16px;

  }

}



/* SMALL MOBILE */

@media (max-width: 520px) {

  .site-header {

    padding: 0 14px;

  }



  .logo img {

    max-width: 125px !important;

    max-height: 44px !important;

  }



  .nav-area {

    left: 10px;

    right: 10px;

    padding: 18px;

  }

}







/* ==========================================================

   HEADER FINAL FIX + RESPONSIVE

   À garder tout en bas du fichier pour écraser les anciens styles

========================================================== */



/* Header global */

.site-header {

  width: 100% !important;

  height: 82px !important;

  padding: 0 6% 0 0 !important; /* logo collé à gauche */

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 32px !important;

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 9999 !important;

  background: transparent !important;

  border-top: none !important;

}



/* Pages internes */

.site-header.internal-header,

.internal-header {

  position: relative !important;

  background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;

}



/* Logo collé à gauche */

.logo {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  flex: 0 0 auto !important;

  line-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}



.logo a {

  display: flex !important;

  align-items: center !important;

  line-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}



.logo img {

  display: block !important;

  width: auto !important;

  height: auto !important;

  max-width: 185px !important;

  max-height: 58px !important;

  margin: 0 !important;

  padding: 0 !important;

  object-fit: contain !important;

  object-position: left center !important;

}



/* Zone menu */

.nav-area {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 34px !important;

  flex: 1 1 auto !important;

}



/* Menu desktop */

.nav-links {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: clamp(24px, 3vw, 54px) !important;

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.nav-links > li {

  display: flex !important;

  align-items: center !important;

  position: relative;

}



.nav-links a {

  color: #ffffff !important;

  text-decoration: none !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 7px !important;

  transition: color .25s ease;

}



.nav-links a:hover {

  color: #dcd5ff !important;

}



.internal-header .nav-links a {

  color: #000000 !important;

}



.internal-header .nav-links a:hover {

  color: var(--violet) !important;

}



/* Bouton contact */

.btn-style {

  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 46px !important;

  padding: 0 55px 0 20px !important;

  border: 2px solid #ffffff !important;

  border-radius: 50px !important;

  color: #ffffff !important;

  text-decoration: none !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  background: transparent !important;

  isolation: isolate !important;

  white-space: nowrap !important;

  overflow: visible !important;

}



.btn-style::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  border-radius: 50px !important;

  background: linear-gradient(90deg, #8c02b9 0%, #4e40b9 45%, #09699f 100%) !important;

  z-index: -1 !important;

  clip-path: inset(0 100% 0 0 round 50px) !important;

  transition: clip-path .4s cubic-bezier(.4, 0, .2, 1) !important;

}



.btn-style:hover::before {

  clip-path: inset(0 0 0 0 round 50px) !important;

}



.btn-arrow {

  position: absolute !important;

  right: -5px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  color: #000000 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-weight: 900 !important;

  z-index: 2 !important;

  transition: transform .35s ease, background .35s ease, color .35s ease !important;

}



.btn-style:hover .btn-arrow {

  transform: translateY(-50%) translateX(4px) !important;

}



.nav-cta {

  flex: 0 0 auto !important;

  height: 40px !important;

  padding-right: 48px !important;

  font-size: 12px !important;

  font-weight: 700 !important;

}



.nav-cta .btn-arrow {

  width: 43px !important;

  height: 43px !important;

}



.internal-header .btn-style {

  border-color: var(--violet) !important;

  color: var(--violet) !important;

}



.internal-header .btn-style:hover {

  color: #ffffff !important;

}



.internal-header .btn-arrow {

  background: var(--violet) !important;

  color: #ffffff !important;

}



/* Bouton hamburger */

.nav-toggle {

  display: none !important;

  width: 46px !important;

  height: 46px !important;

  border: none !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  color: var(--violet) !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  font-size: 20px !important;

  box-shadow: 0 12px 28px rgba(30, 20, 120, .12) !important;

  z-index: 10001 !important;

}



.internal-header .nav-toggle {

  background: var(--violet) !important;

  color: #ffffff !important;

}



/* Mega menu desktop */

.has-mega {

  position: static !important;

}



.mega-menu {

  position: absolute !important;

  top: 82px !important;

  left: 50% !important;

  transform: translateX(-50%) translateY(20px) !important;

  width: min(1180px, calc(100vw - 60px)) !important;

  background: #ffffff !important;

  border-radius: 26px !important;

  padding: 32px !important;

  border: 1px solid rgba(84, 64, 185, .12) !important;

  box-shadow: 0 30px 90px rgba(20, 15, 60, .16) !important;

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

  transition: .3s ease !important;

  z-index: 10000 !important;

  display: block !important;

}



.has-mega:hover .mega-menu {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  transform: translateX(-50%) translateY(0) !important;

}



.mega-header {

  text-align: center !important;

  margin-bottom: 28px !important;

}



.mega-header span {

  font-size: 13px !important;

  font-weight: 900 !important;

  letter-spacing: 2px !important;

  color: #8f7cff !important;

  text-transform: uppercase !important;

}



.mega-header h3 {

  font-size: 26px !important;

  margin-top: 8px !important;

  color: #000000 !important;

}



.mega-content {

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;

}



.mega-col {

  background: #faf9ff !important;

  border: 1px solid rgba(84, 64, 185, .08) !important;

  border-radius: 18px !important;

  padding: 20px !important;

}



.mega-col h4 {

  height: auto !important;

  color: var(--violet) !important;

  font-size: 16px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 10px !important;

  margin: 0 0 16px !important;

}



.mega-col h4 i {

  display: inline-flex !important;

  width: auto !important;

  height: auto !important;

  background: transparent !important;

  color: var(--violet) !important;

}



.mega-col a {

  display: block !important;

  padding: 10px 0 !important;

  color: #000000 !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  text-decoration: none !important;

  border-bottom: 1px solid rgba(84, 64, 185, .08) !important;

  border-radius: 0 !important;

}



.mega-col a:last-child {

  border-bottom: none !important;

}



.mega-col a small {

  display: block !important;

  margin-top: 4px !important;

  font-size: 12px !important;

  font-weight: 400 !important;

  color: #666666 !important;

  line-height: 1.4 !important;

}



.mega-col a:hover {

  transform: translateX(4px) !important;

  color: var(--violet) !important;

  background: transparent !important;

}



/* Header responsive tablette */

@media (max-width: 1180px) {

  .site-header {

    padding: 0 4% 0 0 !important;

    gap: 22px !important;

  }



  .logo img {

    max-width: 160px !important;

    max-height: 52px !important;

  }



  .nav-links {

    gap: 24px !important;

  }



  .nav-links a {

    font-size: 14px !important;

  }



  .mega-content {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  }

}



/* Header mobile */

@media (max-width: 980px) {

  .site-header {

    height: 76px !important;

    padding: 0 18px 0 0 !important;

    position: absolute !important;

  }



  .site-header.internal-header,

  .internal-header {

    position: relative !important;

  }



  .logo img {

    max-width: 145px !important;

    max-height: 48px !important;

  }



  .nav-toggle {

    display: flex !important;

  }



  .nav-area {

    position: fixed !important;

    top: 76px !important;

    left: 14px !important;

    right: 14px !important;

    max-height: calc(100vh - 96px) !important;

    overflow-y: auto !important;

    background: rgba(255, 255, 255, .98) !important;

    border: 1px solid rgba(84, 64, 185, .12) !important;

    border-radius: 22px !important;

    padding: 22px !important;

    box-shadow: 0 28px 80px rgba(20, 15, 60, .18) !important;

    display: block !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(-12px) !important;

    transition: .25s ease !important;

    z-index: 10000 !important;

  }



  .site-header.is-open .nav-area {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

  }



  .site-header.is-open .nav-links,

  .nav-area .nav-links {

    display: grid !important;

    gap: 0 !important;

    width: 100% !important;

  }



  .nav-links > li {

    display: block !important;

    border-bottom: 1px solid rgba(84, 64, 185, .1) !important;

  }



  .nav-links a {

    color: #111111 !important;

    font-size: 15px !important;

    padding: 16px 0 !important;

    width: 100% !important;

    justify-content: space-between !important;

  }



  .nav-cta {

    display: inline-flex !important;

    margin-top: 22px !important;

    color: #111111 !important;

    border-color: #111111 !important;

  }



  .nav-cta:hover {

    color: #ffffff !important;

  }



  .nav-cta .btn-arrow {

    background: var(--violet) !important;

    color: #ffffff !important;

  }



  .mega-menu {

    position: static !important;

    transform: none !important;

    width: 100% !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    box-shadow: none !important;

    border-radius: 18px !important;

    padding: 18px !important;

    margin: 0 0 18px !important;

    display: none !important;

    background: #f8f5ff !important;

  }



  .has-mega:hover .mega-menu {

    transform: none !important;

  }



  .has-mega.is-active .mega-menu {

    display: block !important;

  }



  .mega-header h3 {

    font-size: 19px !important;

  }



  .mega-content {

    grid-template-columns: 1fr !important;

    gap: 14px !important;

  }



  .mega-col {

    padding: 16px !important;

  }

}



/* Petit mobile */

@media (max-width: 520px) {

  .site-header {

    padding: 0 14px 0 0 !important;

  }



  .logo img {

    max-width: 125px !important;

    max-height: 44px !important;

  }



  .nav-area {

    left: 10px !important;

    right: 10px !important;

    padding: 18px !important;

  }

}



/* Responsive global sans casser les sections */

@media (max-width: 1000px) {

  .about-top,

  .detail-grid,

  .faq-layout,

  .contact-page-grid {

    grid-template-columns: 1fr !important;

  }



  .about-cards,

  .about-stats,

  .faq-benefits {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  }



  .contact-card {

    flex-direction: column !important;

    align-items: flex-start !important;

  }



  .services-head {

    flex-direction: column !important;

    align-items: flex-start !important;

  }



  .hero-text {

    width: 100% !important;

  }

}



@media (max-width: 650px) {

  .hero {

    min-height: 620px !important;

    height: auto !important;

    padding: 105px 6% 55px !important;

  }



  .hero-content {

    align-items: flex-start !important;

    padding-top: 80px !important;

  }



  .hero-text h1 {

    font-size: clamp(34px, 11vw, 44px) !important;

    line-height: 1.13 !important;

  }



  .hero-text p {

    font-size: 16px !important;

  }



  .about-cards,

  .about-stats,

  .faq-benefits,

  .footer-newsletter,

  .footer-grid {

    grid-template-columns: 1fr !important;

  }



  .real-card {

    width: 310px !important;

    height: 240px !important;

  }



  .contact-card {

    padding: 34px 24px !important;

  }



  .footer-newsletter {

    padding: 34px 24px !important;

  }



  .newsletter-form {

    border-radius: 20px !important;

    flex-direction: column !important;

  }



  .newsletter-form input {

    min-height: 48px !important;

  }

}



.site-header {

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  height: 92px !important;

  padding: 0 5.5% 0 0 !important;

  margin: 0 !important;

  display: flex !important;

  align-items: flex-start !important;

  justify-content: space-between !important;

  gap: 30px !important;

  overflow: visible !important;

  z-index: 9999 !important;

  background: transparent;

  border-top: 0 !important;

}



.site-header .logo {

  align-self: flex-start !important;

  flex: 0 0 auto !important;

  margin: 0 !important;

  padding: 0 !important;

  line-height: 0 !important;

  display: flex !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

  z-index: 10001 !important;

}



.site-header .logo a {

  margin: 0 !important;

  padding: 0 !important;

  line-height: 0 !important;

  display: block !important;

}



.site-header .logo img {

  display: block !important;

  width: clamp(465px, 31.5vw, 310px) !important;

  height: auto !important;

  max-width: none !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 0 !important;

  object-fit: contain !important;

  object-position: top left !important;

}



.site-header .nav-area {

  height: 92px !important;

  flex: 1 1 auto !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 34px !important;

  margin: 0 !important;

  padding: 0 !important;

}/* TABLET + MOBILE */

@media (max-width: 980px) {

  .site-header {

    height: 78px !important;

    padding: 0 18px 0 0 !important;

    align-items: flex-start !important;

  }



  .site-header .logo img {

    width: 333px !important;

    max-width: none !important;

    max-height: none !important;

  }



  .site-header .nav-toggle {

    display: flex !important;

    margin-top: 16px !important;

  }



  .site-header .nav-area {

    position: fixed !important;

    top: 78px !important;

    left: 14px !important;

    right: 14px !important;

    height: auto !important;

    max-height: calc(100vh - 96px) !important;

    overflow-y: auto !important;

    background: rgba(255, 255, 255, .98) !important;

    border: 1px solid rgba(84, 64, 185, .14) !important;

    border-radius: 22px !important;

    padding: 22px !important;

    box-shadow: 0 28px 80px rgba(20, 15, 60, .18) !important;

    display: block !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(-12px) !important;

    transition: .25s ease !important;

    z-index: 10000 !important;

  }



  .site-header.is-open .nav-area {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;

  }



  .site-header .nav-links,

  .site-header.is-open .nav-links {

    display: grid !important;

    width: 100% !important;

    gap: 0 !important;

  }



  .site-header .nav-links li {

    display: block !important;

    border-bottom: 1px solid rgba(84, 64, 185, .10) !important;

  }



  .site-header .nav-links a {

    width: 100% !important;

    padding: 16px 0 !important;

    color: #111 !important;

    font-size: 15px !important;

    justify-content: space-between !important;

  }



  .site-header .nav-cta,

  .site-header.is-open .nav-cta {

    display: inline-flex !important;

    margin-top: 22px !important;

    color: #111 !important;

    border-color: #111 !important;

  }



  .hero {

    height: auto !important;

    min-height: 690px !important;

    padding: 130px 6% 70px !important;

    background-position: center right !important;

  }



  .hero-content {

    padding-top: 25px !important;

    align-items: center !important;

  }



  .hero-text {

    width: 100% !important;

    max-width: 720px !important;

  }



  .hero-text h1 {

    font-size: clamp(40px, 7vw, 58px) !important;

    line-height: 1.12 !important;

  }



  .hero-text p {

    max-width: 620px !important;

    font-size: 16.5px !important;

  }

}



@media (max-width: 640px) {

  .site-header {

    height: 72px !important;

    padding: 0 14px 0 0 !important;

  }



  .site-header .logo img {

    width: 253px !important;

  }



  .site-header .nav-toggle {

    width: 42px !important;

    height: 42px !important;

    margin-top: 14px !important;

    font-size: 18px !important;

  }



  .site-header .nav-area {

    top: 72px !important;

    left: 10px !important;

    right: 10px !important;

    padding: 18px !important;

    border-radius: 18px !important;

  }



  .hero {

    min-height: 440px !important;

    padding: 50px 22px 50px !important;

    background-position: 70% center !important;

  }



  .hero-content {

    padding-top: 0 !important;

    align-items: center !important;

  }

.mz-services-left h2 {

    font-size: clamp(35px, 5vw, 53px);

   

}

.about-title h2 {

    font-size: clamp(32px, 5vw, 53px);

   

}

  .hero-kicker {

    font-size: 12px !important;

    letter-spacing: .8px !important;

    margin-bottom: 18px !important;

  }


.hero-text{
          top: 27px;
}
  .hero-text h1 {

    font-size: clamp(22px, 5.5vw, 46px) !important;

    line-height: 1.14 !important;

    letter-spacing: -1.3px !important;

  }



  .hero-text p {

    font-size: 13px !important;

    line-height: 1.65 !important;

  }



  .wave-line {

    height: 28px !important;

    margin-bottom: 10px !important;

  }

}/* =========================================================

   MOBILE MENU WINDOW STYLE

   À mettre tout en bas de style.css

   ========================================================= */



.mobile-menu-contact {

  display: none;

}



body.menu-open {

  overflow: hidden;

}



@media (max-width: 980px) {



  .site-header {

    height: 76px !important;

    padding: 0 18px 0 0 !important;

    z-index: 99999 !important;

  }



  .site-header .nav-toggle {

    display: flex !important;

    position: relative !important;

    z-index: 100002 !important;

  }



  .site-header.is-open .nav-toggle {

    position: fixed !important;

    top: 28px !important;

    right: 30px !important;

    width: 42px !important;

    height: 42px !important;

    background: transparent !important;

    color: #111 !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    font-size: 24px !important;

  }



  .site-header .nav-area {

    position: fixed !important;

    top: 16px !important;

    right: 16px !important;

    left: auto !important;

    bottom: 16px !important;

    width: min(390px, calc(100vw - 32px)) !important;

    height: auto !important;

    max-height: none !important;

    overflow-y: auto !important;



    background: #ffffff !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22) !important;



    padding: 84px 24px 34px !important;

    display: block !important;



    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateX(110%) !important;

    transition: transform 0.35s ease, opacity 0.25s ease, visibility 0.25s ease !important;



    z-index: 100001 !important;

  }



  .site-header.is-open .nav-area {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateX(0) !important;

  }



  .site-header .nav-links,

  .site-header.is-open .nav-links {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 0 !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

  }



  .site-header .nav-links li {

    display: block !important;

    width: 100% !important;

    border-bottom: none !important;

  }



  .site-header .nav-links a {

    width: 100% !important;

    padding: 0  !important;

    color: #111111 !important;

    font-size: 15px !important;

    font-weight: 900 !important;

    text-transform: uppercase !important;

    line-height: 1.35 !important;

    justify-content: flex-start !important;

    letter-spacing: -0.02em !important;

  }



  .site-header .nav-links a i {

    margin-left: 8px !important;

  }



  .site-header .mega-menu {

    display: none !important;

  }



  .site-header .nav-cta {

    display: none !important;

  }



  .mobile-menu-contact {

    display: block !important;

    margin-top: 26px !important;

    padding-top: 26px !important;

    border-top: 1px solid #e8e8e8 !important;

  }



  .mobile-contact-line {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    margin-bottom: 18px !important;

    color: #555555 !important;

    font-size: 14px !important;

    line-height: 1.4 !important;

  }



  .mobile-contact-line i {

    width: 18px !important;

    color: #5440e4 !important;

    font-size: 15px !important;

  }



  .mobile-contact-line a {

    color: #555555 !important;

    text-decoration: none !important;

    font-weight: 400 !important;

  }

}



@media (max-width: 520px) {

  .site-header .nav-area {

    top: 14px !important;

    right: 14px !important;

    bottom: 14px !important;

    width: calc(100vw - 28px) !important;

    padding: 82px 22px 30px !important;

  }



  .site-header.is-open .nav-toggle {

    top: 26px !important;

    right: 28px !important;

  }



  .site-header .nav-links a {

    font-size: 14px !important;

    padding-bottom: 21px !important;

  }

}/* RESPONSIVE DESKTOP GLOBAL — à ajouter tout en bas de style.css */



@media (min-width: 981px) {

  html, body { overflow-x: hidden; }



  .site-header {

    width: 100% !important;

    min-height: 82px !important;

    height: auto !important;

    padding: 0 clamp(24px, 4vw, 76px) 0 0 !important;

    gap: clamp(18px, 2vw, 34px) !important;

    align-items: flex-start !important;

  }



  .site-header .logo {

    flex: 0 0 auto !important;

    min-width: 0 !important;

  }



  .site-header .logo img {

    width: clamp(236px, 23vw, 378px) !important;

    max-width: 100% !important;

    height: auto !important;

  }



  .site-header .nav-area {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    min-height: 82px !important;

    height: auto !important;

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: clamp(18px, 2vw, 34px) !important;

  }



  .site-header .nav-links {

    min-width: 0 !important;

    /*gap: clamp(18px, 2.6vw, 48px) !important;*/

    flex-wrap: nowrap !important;

  }



  .site-header .nav-links a {

    white-space: nowrap !important;

    font-size: clamp(13px, .95vw, 16px) !important;

  }



  .site-header .nav-cta {

    flex: 0 0 auto !important;

    white-space: nowrap !important;

  }



  .hero {

    height: auto !important;

    min-height: clamp(650px, 86vh, 880px) !important;

    padding: clamp(115px, 9vw, 155px) clamp(42px, 6vw, 115px) clamp(58px, 6vw, 95px) !important;

    background-size: cover !important;

    background-position: center center, center right !important;

  }



  .hero-content {

    width: 100% !important;

    max-width: 1780px !important;

    margin: 0 auto !important;

    padding-top: 0 !important;

    align-items: center !important;

  }



  .hero-text {

    width: min(46%, 720px) !important;

    min-width: 520px !important;

    max-width: 720px !important;

  }



  .hero-text h1 {

    font-size: clamp(44px, 3.45vw, 43px) !important;

    line-height: 1.12 !important;

    letter-spacing: clamp(-2px, -.10vw, -1px) !important;

  }



  .hero-text p {

    max-width: 500 !important;

    font-size: clamp(16px, 1.05vw, 19px) !important;

    line-height: 1.7 !important;

  }



  .wave-line { width: 100% !important; max-width: 620px !important; }



  .mz-services-list-section,

  .about-preview,

  .faq-section,

  .contact-page-section {

    padding-left: clamp(32px, 6vw, 115px) !important;

    padding-right: clamp(32px, 6vw, 115px) !important;

  }



  .mz-services-list-section {

    grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.55fr) !important;

    gap: clamp(40px, 5vw, 90px) !important;

  }



  .mz-service-row {

    grid-template-columns: clamp(70px, 7vw, 110px) minmax(260px, 1fr) clamp(180px, 15vw, 230px) !important;

    gap: clamp(18px, 2vw, 30px) !important;

  }



  .mz-service-img { width: clamp(180px, 15vw, 230px) !important; }



  .about-top {

    grid-template-columns: minmax(420px, .9fr) minmax(500px, 1.1fr) !important;

    gap: clamp(35px, 4vw, 70px) !important;

  }



  .about-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(18px, 2vw, 28px) !important; }

  .about-card { min-width: 0 !important; }

  .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .stat-item { min-width: 0 !important; padding: clamp(20px, 2vw, 30px) !important; }

  .contact-card { min-width: 0 !important; }

  .blg-container, .contact-page-wrap { width: min(100%, 1460px) !important; }

  .faq-layout { grid-template-columns: minmax(300px, .9fr) minmax(600px, 2.6fr) !important; }

  .faq-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .contact-page-grid { grid-template-columns: minmax(340px, .85fr) minmax(520px, 1.15fr) !important; }

}



@media (min-width: 981px) and (max-width: 1600px) {

  .site-header { padding-right: 28px !important; gap: 18px !important; }

  .site-header .logo img { width: clamp(230px, 22vw, 356px) !important; }

  .site-header .nav-area { gap: 18px !important; }

  .site-header .nav-links { 
      /*gap: clamp(16px, 1.7vw, 28px) !important;*/
      }

  .site-header .nav-links a { font-size: 14px !important; }

  .site-header .nav-cta { height: 36px !important; padding-left: 16px !important; padding-right: 44px !important; font-size: 11px !important; }

  .site-header .nav-cta .btn-arrow { width: 40px !important; height: 40px !important; }



  .hero {

    min-height: 520px !important;

    padding: 120px clamp(50px, 5.5vw, 90px) 65px !important;

    background-position: center center, 62% center !important;

  }



  .hero-text { width: 47% !important; min-width: 470px !important; max-width: 620px !important; }

  .hero-text h1 { font-size: clamp(39px, 2.5vw, 56px) !important; }

  .hero-text p { font-size: 16.5px !important; }



  .mz-services-list-section { grid-template-columns: .72fr 1.45fr !important; gap: 45px !important; }

  .mz-service-row { grid-template-columns: 75px 1fr 190px !important; }

  .mz-service-img { width: 190px !important; }

  .about-card { padding-left: 18px !important; padding-right: 18px !important; }

  .about-card h3 { font-size: 21px !important; }

  .faq-layout { grid-template-columns: 340px 1fr !important; }

}



@media (min-width: 981px) and (max-width: 1280px) {

  .site-header .logo img { width: 279px !important; }


  .site-header .nav-links a { font-size: 12.5px !important; }

.mz-services-left h2 {

    font-size: clamp(34px, 3vw, 40px)!important;

    line-height: 1.1;

    margin: 22px 0 28px;

    color: #000000;

}

.contact-form-panel h2 {
    font-family: var(--font-head);
    color: #05040f;
    font-size: clamp(25px, 2vw, 32px);
    line-height: 1.1;
    margin-bottom: 12px;
}
.contact-info-panel h3 {
    font-family: var(--font-head);
    font-size: 25px;
    line-height: 1.1;
    margin: 18px 0 14px;
    position: relative;
    z-index: 1;
}
  .hero {

    min-height: 490px !important;

    padding: 112px 48px 58px !important;

    background-position: center center, 67% center !important;

  }



  .hero-text { width: 49% !important; min-width: 440px !important; max-width: 560px !important; }

  .hero-text h1 { font-size: 32px !important; line-height: 1.13 !important; }

  .nav-cta-hero {

    height: 38px;

    padding-right: 48px;

    font-size: 10px;

}

  .hero-text p { font-size: 13.5px !important; }

  .hero-kicker {

    font-size: 12px!important;

    

}



  .mz-services-list-section { grid-template-columns: 320px 1fr !important; gap: 35px !important; }

  .mz-service-row { grid-template-columns: 60px 1fr 165px !important; gap: 18px !important; }

  .mz-service-content h3 { font-size: 23px !important; }

  .mz-service-img { width: 165px !important; }



  .about-top { grid-template-columns: .9fr 1.1fr !important; }

  .about-title h2 { font-size: 43px !important; }

  .about-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: 70px !important; }

  .about-stats { width: 96% !important; }

  .faq-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .contact-page-grid { grid-template-columns: .9fr 1.1fr !important; }

}



@media (min-width: 1800px) {

  .hero-content, .blg-container, .contact-page-wrap { max-width: 1680px !important; }

  .hero-text { max-width: 760px !important; }

}
/* =========================================================
   MEDIAZAIN — HARMONISATION GLOBALE 2026
   Conteneurs, bannières et boutons sans casser ACF/dynamique
========================================================= */
:root{
  --mz-site-max:1380px;
  --mz-site-pad:clamp(20px,4vw,64px);
  --mz-violet:#5440e4;
  --mz-blue:#00a3ff;
  --mz-dark:#05040f;
  --mz-white:#fff;
}

/* conteneur commun pour les principales pages */
.hero-content,.svc-hero-grid,.sc-hero-content,.faq-pg-brand-row,.faq-pg-hero,
.contact-container,.devis-container,.actu-hero-content{
  width:min(var(--mz-site-max),calc(100% - (var(--mz-site-pad) * 2)))!important;
  max-width:var(--mz-site-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* système commun appliqué aux boutons existants */
.btn-style,.btn-style-hero,.btn-main-hero,.sc-btn-primary,.sc-btn-link,
.svc-hero-btn,.devis-btn,.contact-btn,.faq-pg-btn{
  --btn-accent:var(--mz-violet);
  --btn-fg:var(--btn-accent);
  --btn-bg:transparent;
  --btn-hover-bg:var(--btn-accent);
  --btn-hover-fg:#fff;
  position:relative!important;
  min-height:48px!important;
  padding:0 58px 0 22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid var(--btn-accent)!important;
  border-radius:999px!important;
  background:rgba(255, 255, 255, 0)!important;
  color:#5440e4!important;
  font-family:'Poppins',sans-serif!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:700!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  isolation:isolate!important;
  transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease!important;
}
.btn-style::before,.btn-style-hero::before,.btn-main-hero::before{
  content:""!important;position:absolute!important;inset:0!important;border-radius:999px!important;
  background:var(--btn-hover-bg)!important;z-index:-1!important;
  clip-path:inset(0 100% 0 0 round 999px)!important;
  transition:clip-path .38s cubic-bezier(.4,0,.2,1)!important;
}
.btn-style:hover::before,.btn-style-hero:hover::before,.btn-main-hero:hover::before,
.btn-style:focus-visible::before,.btn-style-hero:focus-visible::before,.btn-main-hero:focus-visible::before{
  clip-path:inset(0 0 0 0 round 999px)!important;
}
.btn-style:hover,.btn-style-hero:hover,.btn-main-hero:hover,.sc-btn-primary:hover,.sc-btn-link:hover,
.svc-hero-btn:hover,.devis-btn:hover,.contact-btn:hover,.faq-pg-btn:hover{
  color:var(--btn-hover-fg)!important;background:var(--btn-hover-bg)!important;
  transform:translateY(-2px)!important;box-shadow:0 14px 32px color-mix(in srgb,var(--btn-accent) 22%,transparent)!important;
}

.btn-arrow,.button-icon,.button-arrow{
  position:absolute!important;right:-2px!important;top:50%!important;transform:translateY(-50%)!important;
  width:48px!important;height:48px!important;border-radius:50%!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background: white!important;color: #5440e4 !important;border:0!important;
  transition:background .3s ease,color .3s ease,transform .3s ease!important;
}
.btn-style:hover .btn-arrow,.btn-style-hero:hover .btn-arrow,.btn-main-hero:hover .button-icon,
.btn-main-hero:hover .button-arrow{
  background:#fff!important;color:var(--btn-accent)!important;transform:translateY(-50%) rotate(-25deg)!important;
}

/* variante automatique sur sections foncées */
.hero .btn-style-hero,.cta-about .btn-main-hero,.svc-why-dark .btn-style-hero,
[class*="dark"] .btn-style,[class*="dark"] .btn-style-hero{
  --btn-accent:#fff;--btn-fg:#fff;--btn-hover-bg:#fff;--btn-hover-fg:#111;
}
.hero .btn-style-hero .btn-arrow,.cta-about .btn-main-hero .button-icon,
[class*="dark"] .btn-arrow{    background: #5440e4 !important;
    color: #ffffff !important;}
.hero .btn-style-hero:hover .btn-arrow,.cta-about .btn-main-hero:hover .button-icon,
[class*="dark"] .btn-style:hover .btn-arrow{background:var(--mz-violet)!important;color:#fff!important}

/* pages internes : espacement cohérent sous header */
.a-propos .hero-section-a-propos,.svc-hero,.sc-hero,.faq-brand-section,.contact-page,.devis-hero,.actu-hero-top{
  padding-left:var(--mz-site-pad)!important;
  padding-right:var(--mz-site-pad)!important;
}

@media(max-width:767px){
  :root{--mz-site-pad:20px}
  .btn-style,.btn-style-hero,.btn-main-hero,.sc-btn-primary,.sc-btn-link,
  .svc-hero-btn,.devis-btn,.contact-btn,.faq-pg-btn{
    min-height:46px!important;padding:0 54px 0 18px!important;font-size:12px!important;white-space:normal!important;text-align:left!important;
  }
  .btn-arrow,.button-icon,.button-arrow{width:46px!important;height:46px!important}
}


/* =========================================================
   MEDIAZAIN — CORRECTIONS FINALES ACCUEIL
   1. Logos partenaires non déformés
   2. Boutons harmonisés avec léger mouvement au hover
   3. Variante blanche sur les sections foncées
========================================================= */

/* ---------- CARROUSEL LOGOS PARTENAIRES ---------- */
.partners {
  width: 100%;
  padding: 3px 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eeeeee;
}

.logo-slider {
  width: 100%;
  overflow: hidden !important;
}

.logo-track {
  display: flex !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 86px) !important;
  width: max-content !important;
  will-change: transform;
  animation: mzLogoMarquee 60s linear infinite !important;
}

.partner-logo {
  flex: 0 0 auto !important;
  width: clamp(130px, 11vw, 180px) !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.partner-logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 60px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: grayscale(100%);
  opacity: .78;
  transform: none !important;
  transition:
    filter .3s ease,
    opacity .3s ease,
    transform .3s ease !important;
}

.partner-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06) !important;
}

.logo-slider:hover .logo-track {
  animation-play-state: paused !important;
}

@keyframes mzLogoMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- BOUTONS : BASE COMMUNE ---------- */

.btn-style-hero,
.green-btn {
  --mz-btn-accent: #5440e4;
  --mz-btn-text: #5440e4;
  --mz-btn-hover-bg: #5440e4;
  --mz-btn-hover-text: #ffffff;

  position: relative !important;
  min-height: 50px !important;
  padding: 0 62px 0 24px !important;
  margin-right: 17px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid var(--mz-btn-accent) !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: var(--mz-btn-text) !important;

  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  isolation: isolate !important;
  overflow: visible !important;

  transform: translateY(0) !important;
  transition:
    color .32s ease,
    border-color .32s ease,
    background-color .32s ease,
    transform .32s ease,
    box-shadow .32s ease !important;
}
.btn-style{
    --mz-btn-accent: #5440e4;
  --mz-btn-text: #ffffff;
  --mz-btn-hover-bg: #5440e4;
  --mz-btn-hover-text: #ffffff;

  position: relative !important;
  min-height: 50px !important;
  padding: 0 62px 0 24px !important;
  margin-right: 17px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid white !important;
  border-radius: 999px !important;

    background: #ffffff !important;
    color: #5440e4 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  isolation: isolate !important;
  overflow: visible !important;

  transform: translateY(0) !important;
  transition:
    color .32s ease,
    border-color .32s ease,
    background-color .32s ease,
    transform .32s ease,
    box-shadow .32s ease !important;
}
/* remplissage fluide de gauche à droite */
.btn-style::before,
.btn-style-hero::before,
.green-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;

  border-radius: 999px !important;
  background: var(--mz-btn-hover-bg) !important;

  clip-path: inset(0 100% 0 0 round 999px) !important;
  transition: clip-path .38s cubic-bezier(.4, 0, .2, 1) !important;
}

.btn-style:hover::before,
.btn-style-hero:hover::before,
.green-btn:hover::before,
.btn-style:focus-visible::before,
.btn-style-hero:focus-visible::before,
.green-btn:focus-visible::before {
  clip-path: inset(0 0 0 0 round 999px) !important;
}

.btn-style:hover,
.btn-style-hero:hover,
.green-btn:hover,
.btn-style:focus-visible,
.btn-style-hero:focus-visible,
.green-btn:focus-visible {
  color: var(--mz-btn-hover-text) !important;
  border-color: var(--mz-btn-hover-bg) !important;

  /* petit basculement demandé */
  transform: translateY(-3px) rotate(-.6deg) !important;

  box-shadow:
    0 15px 32px rgba(84, 64, 228, .22) !important;
}

/* cercle flèche commun */
.btn-style .btn-arrow,
.btn-style-hero .btn-arrow,
.green-btn > span {
  position: absolute !important;
  top: 50% !important;
  right: -3px !important;

  width: 50px !important;
  height: 50px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  border: 0 !important;

  background: var(--mz-btn-accent) !important;
  color: #ffffff !important;

  font-size: 15px !important;
  line-height: 1 !important;

  transform: translateY(-50%) rotate(0) !important;
  transition:
    background-color .32s ease,
    color .32s ease,
    transform .32s ease,
    box-shadow .32s ease !important;
}

.btn-style:hover .btn-arrow,
.btn-style-hero:hover .btn-arrow,
.green-btn:hover > span,
.btn-style:focus-visible .btn-arrow,
.btn-style-hero:focus-visible .btn-arrow,
.green-btn:focus-visible > span {
  background: #ffffff !important;
  color: var(--mz-btn-accent) !important;

  transform:
    translateY(-50%)
    translateX(2px)
    rotate(-28deg) !important;

  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* ---------- HERO ET SECTIONS FONCÉES ---------- */
.hero .btn-style-hero,
.about-preview .btn-style-hero,
.contact-card .btn-style-hero,
.blg-derniers .btn-style,
[class*="dark"] .btn-style,
[class*="dark"] .btn-style-hero {
  --mz-btn-accent: #ffffff;
  --mz-btn-text: #ffffff;
  --mz-btn-hover-bg: #ffffff;
  --mz-btn-hover-text: #111111;

  background: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* cercle violet au repos sur fond foncé */
.hero .btn-style-hero .btn-arrow,
.about-preview .btn-style-hero .btn-arrow,
.contact-card .btn-style-hero .btn-arrow,
[class*="dark"] .btn-style .btn-arrow,
[class*="dark"] .btn-style-hero .btn-arrow {
  background: #5440e4 !important;
  color: #ffffff !important;
}

/* hover comme le bouton Contactez-nous */
.hero .btn-style-hero:hover,
.about-preview .btn-style-hero:hover,
.contact-card .btn-style-hero:hover,
[class*="dark"] .btn-style:hover,
[class*="dark"] .btn-style-hero:hover {
  color: #111111 !important;
  border-color: #ffffff !important;
  box-shadow: 0 15px 34px rgba(255, 255, 255, .16) !important;
}

.hero .btn-style-hero:hover .btn-arrow,
.about-preview .btn-style-hero:hover .btn-arrow,
.contact-card .btn-style-hero:hover .btn-arrow,
[class*="dark"] .btn-style:hover .btn-arrow,
[class*="dark"] .btn-style-hero:hover .btn-arrow {
  background: #5440e4 !important;
  color: #ffffff !important;
}

/* ---------- BOUTON SERVICES SUR FOND CLAIR ---------- */
.mz-services-left .green-btn {
  --mz-btn-accent: #5440e4;
  --mz-btn-text: #5440e4;
  --mz-btn-hover-bg: #5440e4;
  --mz-btn-hover-text: #ffffff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
  .partners {
    padding: 12px 0 !important;
  }

  .logo-track {
    gap: 30px !important;
    animation-duration: 42s !important;
  }

  .partner-logo {
    width: 120px !important;
    height: 66px !important;
    padding: 6px !important;
  }

  .partner-logo img {
    max-height: 50px !important;
  }

  .btn-style,
  .btn-style-hero,
  .green-btn {
    min-height: 46px !important;
    padding: 0 55px 0 18px !important;
    margin-right: 12px;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .btn-style .btn-arrow,
  .btn-style-hero .btn-arrow,
  .green-btn > span {
    width: 46px !important;
    height: 46px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation-play-state: paused !important;
  }

  .btn-style,
  .btn-style-hero,
  .green-btn,
  .btn-style .btn-arrow,
  .btn-style-hero .btn-arrow,
  .green-btn > span {
    transition: none !important;
  }}