/* Importing the fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  margin: 0;
  font-family: 'Inter', 'sans-serif';
  background-color: #F9F9F9;
  color: #404040;
}

a {
  color: #404040;
}


  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    .website-banner {
      align-items: flex-start;
      background-color: #DEFC6F;
      display: flex;
      justify-content: center;
      position: relative;
      width: 100%;
      }

    .website-banner-text {
      font-size: 20px;
      font-weight: 700;
      line-height: normal;
      position: relative;
      text-align: center;
      width: fit-content;
      margin: 0;
      padding: 0.5rem;
      }

    .header {
      text-align: center;
      margin-bottom: 2rem;
      gap: 20px;
      padding: 0 13rem 0 13rem;
    }

      .logo {
        font-size: 1.5rem;
        margin: 1rem;
      }

      h1 {
        font-size: 3rem;
        font-weight: 900;
      }

      .app-block {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 100px;
        position: relative;
        height: 550px;
      }
      
      .customization-panel {
        background-color: #ffffff;
        padding: 2rem;
        border-radius: 10px;
        width: 300px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 0;
      }

      h2 {
        font-size: 2rem;
        text-align: center;
        margin: 0;
      }

      .customization-panel label {
        display: flex;
        gap: 0.5rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      
      .custom-input {
        background-color: #ECECEC;
        border: 0px;
        text-align: center;
        padding: 8px 12px;          /* Espacement intérieur pour plus de confort */
        border-radius: 4px;         /* Bords arrondis pour un aspect moderne */
      }

      .customization-panel .download-btn {
        background-color: #DEFC6F;
        border: none;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 1.5rem;
        font-weight: 600;
        text-decoration: none;
        text-align:center;
      }

      .customization-panel .download-btn.disabled-btn {
        pointer-events: none;
        background-color: grey;
        cursor: not-allowed;
    }
    
    
      
      .customization-panel button:hover {
        background-color: #E7FF8C;
      }
      
      .preview {
        margin-top: 5rem;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        align-items: center; 
      }

      .svg1, .svg2 {
        all:unset;
        margin: 0;
        padding: 0;
      }
    
      .svg1 .svg-stroke {
        stroke: black;
        stroke-opacity: "0.1";
        stroke-width: "0.6";
      }
      
      .svg1 .green-circle {
        fill: #62C554;
      }
      
      .svg1 .yellow-circle {
        fill: #F4BF4E;
      }
      
      .svg1 .red-circle {
        fill: #ED6A5E;
      }