/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap'); */

      body, html {
        height: 100%;
        margin: 0;
        font-family: 'Roboto', sans-serif;
      }

      /* body {
        background-image: url("./imgs/l15m.jpeg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;

      
      } */
       body {
          /* background: #DBEAFE;  */
          background:
            /* linear-gradient(rgba(15,23,42,0.65), rgba(15,23,42,0.65)), */
            linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
            /* url("./imgs/backg0.png") center/cover no-repeat fixed; */
            url("./imgs/l15m.jpeg") center/cover no-repeat fixed;

          min-height: 100vh;
          margin: 0;

          display: flex;
          justify-content: center; /* horizontal */
          align-items: center;     /* vertical */

        }
      


      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        /* border: 1px solid red; */
      }

      .login-container {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 1);
        padding: 40px;
        min-width: 410px;
        width: 410px;
        z-index: 1;
      }

      h1 {
        font-family: 'Playfair Display', serif;
        /* color: #333; */
        text-align: center;
        margin: 10px 1px 20px 1px;
        color: darkblue;
        /* border-bottom: 2px solid darkblue; */
        font-size: 30px;
      }

      .input-group {
        margin-bottom: 20px;
        width: 100%;
        /* border: 1px solid red; */
        /* display: flex;
        flex-direction: column; */
        /* background-color: turquoise; */
      }

      label {
        display: block;
        margin-bottom: 5px;
        /* color: #666; */
        color: #333;
        font-size: 22px;
        text-align: center;
      }

      .input-group input {
        width: 92%;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;

        /* background: #c2e7ff; */
        outline: none;
        transition: border 0.2s, box-shadow 0.2s;

      }
      .input-group input:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
        background: #FFFFFF;
        /* background: red; */
      }

      button {
        width: 100%;
        padding: 15px;
        position: relative;
        background-color: #1557b0;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      /* Spinner */
      .spinner {
        display: none;
        width: 18px;
        height: 18px;
        border: 3px solid #fff;
        border-top: 3px solid transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: auto;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      /* Quand le bouton est en chargement */
      button.loading .btn-text {
        display: none;
      }

      button.loading .spinner {
        display: inline-block;
      }

      button:hover {
        background-color: #a88f4d;
      }

      .logo {
        text-align: center;
        /* margin-bottom: 5px; */
      }
      .logo img {
        height: 150px;      /* taille du logo */
        width: 150px;
        border-radius: 25px;
      }

      .error-message {
        color: #e74c3c;
        text-align: center;
        margin-top: 10px;
        display: none;
        font-size: 1.4em;
        letter-spacing: 0.03em;
        font-weight: bold;
      }
      .error-messageEssai {
        color: #e74c3c;
        text-align: center;
        margin-top: 10px;
        display: none;
        font-size: 1.1em;
        letter-spacing: 0.03em;
        font-weight: 600;
      }
      .error-messageEssaiMax {
        color: #e74c3c;
        text-align: center;
        margin-top: 10px;
        display: block;
        font-size: 1.1em;
        letter-spacing: 0.03em;
        font-weight: 600;
      }

      #a_ {
        margin-top: 10px;
        text-align: center;
      }

    
      .modal-content {
          background-color: #fefefe;
          margin: 2% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          max-width: 400px;
      }
      .close0 {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
          cursor: pointer;
          /* border: 1px solid black;
          border-radius: 50%; */
      }
      .close0:hover,
      .close0:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
      }

      #p1_ {
        margin-bottom: 1px;
      }
      #p2_ {
        margin-top: 2px;
      }

      .login-container {
        transform: scale(0.90);
        transform-origin: center;
        /* width: 133.33%; */
      }