html,
      body {
          overflow-x: hidden;
          /* Empêche toute zone fantôme */
      }

      :root {
          --color-primary: #ff7a3d;
          --color-secondary: #e7901f8a;
          --color-accent: #f7921ec1;

          --text-main: #0E0F3B;

          --bg-light: #fff7ee;
          --bg-clear: #ffefcc;
          --bg-dark: #fbe2ba;

          --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
      }

      body {
          background: var(--bg-clear);
          color: var(--text-main);

          max-width: 1800px;
          margin: 0 auto;

      }

      html {
          scrollbar-gutter: stable;
      }

      /* ------------------------- */
      /*         HEADER            */
      /* ------------------------- */

      header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 40px;
          position: sticky;
          top: 0;
          background: var(--bg-clear);
          z-index: 10000;
          height: 72px;
          box-sizing: border-box;
          /* box-shadow: 0 20px 50px rgba(237, 190, 114, 0.12); */
      }


      .logo img {
          height: 48px;
          /* ajuste selon ton header */
          width: auto;
          object-fit: contain;
          display: block;
          scale: 3.2;
      }

      .logo a {
          /* border-radius: 25px;
          background: linear-gradient(90deg, var(--bg-dark), var(--bg-clear)); */
          /* padding: 5px 18px; */
          display: flex;
          align-items: center;
          padding: 0;
          font-size: 1.3em;
          font-weight: bold;
          text-decoration: none;
          color: var(--text-main);
      }

      nav.main-header {
          display: flex;
          align-items: center;
          height: 100%;
          justify-content: space-evenly;
          width: 50%;
          gap: 20px;
      }

      nav.main-header a,
      .contact a {
          text-decoration: none;
          color: var(--text-main);
          font-weight: 500;
      }

      /* ---------------------------- */
      /*         MENU BURGER          */
      /* ---------------------------- */

      .burger {
          display: none;
          flex-direction: column;
          justify-content: space-between;
          width: 32px;
          height: 24px;
          cursor: pointer;
          z-index: 11000;
      }

      .burger span {
          display: block;
          width: 100%;
          height: 3px;
          background: var(--text-main);
          border-radius: 3px;
          transition: 0.3s ease;
      }

      /* Croix */
      .burger.active span:nth-child(1) {
          transform: translateY(9px) rotate(45deg);
      }

      .burger.active span:nth-child(2) {
          opacity: 0;
      }

      .burger.active span:nth-child(3) {
          transform: translateY(-9px) rotate(-45deg);
      }

      /* MENU MOBILE FULLSCREEN */
      .mobile-menu {
          position: fixed;
          top: -100vh;
          left: 0;
          width: 100%;
          height: 100vh;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          background: rgba(255, 255, 255, 0.35);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);

          opacity: 0;
          transition: top 0.35s ease-in-out, opacity 0.35s ease-in-out;
          z-index: 2000;
          pointer-events: none;
      }

      .mobile-menu a {
          font-size: 1.7em;
          font-weight: 600;
          margin: 20px 0;
          text-decoration: none;
          color: var(--text-main);
          transition: 0.25s ease;
      }

      .mobile-menu a:hover {
          color: var(--color-primary);
          transform: scale(1.05);
      }

      .mobile-menu.mobile-open {
          top: 0;
          opacity: 1;
          pointer-events: auto;

      }

      /* RESPONSIVE */
      @media (max-width: 900px) {
          header {
              padding: 15px 20px 10px 16px;
              height: auto;
          }



          .logo img {
              height: 40px;
              max-width: 160px;
              padding-left: 10px;
          }

          .burger {
              display: flex;
              flex: 0 0 auto;
          }

          .main-header,
          .contact {
              display: none !important;
          }

      }