*, *::before, *::after {
    box-sizing: border-box;
    }

    input:hover{
      border-bottom: solid 3px #333;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 16px;
      color: #fff;
      margin: 0;
      height: 100%;
    }

    .global {
      max-width: 1500px;
      margin: auto;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-image: url('/assets/images/bg-zeagfm.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;
      background-size: cover;
    }

    .box-u-background{
     background: linear-gradient(135deg, #283346 0%, #1c1b1b 70%, #353434 100%);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
     transition: transform 0.3s, box-shadow 0.3s;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);
    color: #fff;
    cursor: pointer;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);
    color: #fff;
    cursor: pointer;
    }

    .alert {
      position: fixed;
      top: 20px; 
      left: 50%;
      transform: translateX(-50%); 
      z-index: 9999; 
      display: inline-block;
      min-width: 250px;
      max-width: 500px;
      padding: 15px 20px;
      border-radius: 10px;
      background: rgb(241, 235, 224);
      opacity: 1;
      transition: opacity 0.8s ease, transform 0.8s ease;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    .alert.hide {
      opacity: 0;
      transform: translate(-50%, -20px); 
      pointer-events: none; 
    }

    .alert-error {
      color: rgb(231, 68, 68);
      border-left: solid 5px rgb(231, 68, 68);
    }

    .alert-success {
      color: rgb(4, 158, 12);
      border-left: solid 5px rgb(4, 158, 12);
    }

    .close-alert {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: -8px;       /* un peu plus haut pour bien coller au bord */
      right: -8px;     /* idem pour bien coller au coin */
      height: 22px;    /* taille ajustée */
      width: 22px;
      background: rgb(231, 68, 68);
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s ease;
      line-height: 1;   /* important pour éviter le décalage vertical du X */
      text-align: center;
    }

    .close-alert:hover {
      background: rgb(200, 50, 50);
    }

   
     #onpageload {
      position: fixed; 
      inset: 0;
      display: flex; 
      justify-content: center; 
      align-items: center;
      background: rgba(0,0,0,0.85);
      z-index: 9999;
    }

    #onpageload img { max-width: 120px; }

      .del-btn{
        background: rgb(218, 63, 63);
      }

      .del-btn:hover{
        background: rgb(243, 88, 88);
      }
   
      a {
        text-decoration: none;
        color: orange;
        cursor: pointer;
      }

      a:hover {
        text-decoration: underline;
      }

      input:focus {
      outline: none;
      }

      .title-c{
      color: #b7dffa; 
      }

      hr {
      border: none;
      height: 1px;
      background: #333;
      }

    .btn-radio-container {
      position: fixed;
      bottom: 15px;
      right: 20px;
      display: flex;
      flex-direction: column; 
      gap: 10px;
      z-index: 9999;
    }

    .circle-btn-radio {
      width: 65px;
      height: 65px;
      background-color: #333;
      color: white;
      border-radius: 50%;
      border: solid 2.5px #1f1e1e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .circle-btn-radio:hover {
      background-color: #555;
    }

    .rbtn-i{
      font-size: 24px;
      color: orange;
    }

    #myqckAudio{
      display: none;
    }