* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Nunito", sans-serif;
      background: #fff;
      color: #000;
      transition: 0.5s;
      overflow-x: hidden;
    }

    /* Centre le contenu */
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      text-align: center;
    }

    h1 {
      font-size: clamp(24px, 8vw, 80px);
      line-height: 1.2;
      font-weight: bold;
    }

    /* Toggle (design original) */
    #toggle {
      position: fixed;
      display: block;
      width: 160px;
      height: 80px;
      top: 2vw;
      right: 5%;
      border-radius: 160px;
      transition: 0.5s;
      cursor: pointer;
      box-shadow: inset 0 2px 60px rgba(0, 0, 0, 0.1),
                  inset 0 2px 8px rgba(0, 0, 0, 0.1), 
                  inset 0 -4px 8px rgba(0, 0, 0, 0.05);
    }

    #toggle .indicator {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 80px;
      background: linear-gradient(to bottom, #eaeaea, #f9f9f9);
      border-radius: 50%;
      transform: scale(0.8);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1),
                  inset 0 4px 4px rgba(255, 255, 255, 0.1),
                  inset 0 -4px 4px rgba(255, 255, 255, 0.1);
      transition: 0.5s;
    }

    /* Mode sombre */
    body.active {
      background: #222;
      color: #fff;
    }

    #toggle.active {
      background: #2a2a2a;
      box-shadow: 0 8px 60px rgba(0, 0, 0, 0.1), 
                  inset 0 8px 8px rgba(102, 102, 102, 0.1),
                  inset 0 -4px 4px rgba(102, 102, 102, 0.1);
    }

    #toggle.active .indicator {
      left: 80px;
      background: linear-gradient(to bottom, #444, #222);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
                  inset 0 4px 4px rgba(255, 255, 255, 0.2),
                  inset 0 -4px 4px rgba(255, 255, 255, 0.2);
    }

    /* Tablettes */
    @media screen and (max-width: 1000px) {
      #toggle {
        width: 100px;
        height: 50px;
      }
      #toggle .indicator {
        width: 50px;
        height: 50px;
      }
      #toggle.active .indicator {
        left: 50px;
      }
    }

    /* Mobiles */
    @media screen and (max-width: 480px) {
      h1 {
        font-size: clamp(20px, 10vw, 50px);
      }

      #toggle {
        width: 90px;
        height: 45px;
        top: 20px;
        left: 50%;           /* centré horizontalement */
        right: auto;
        transform: translateX(-50%);
      }

      #toggle .indicator {
        width: 45px;
        height: 45px;
      }

      #toggle.active .indicator {
        left: 45px;
      }
    }