body {
      background-color: #A7B8BC;
      margin-left: 30px;
      margin-bottom: 50px;
}
h2 {
      text-decoration: underline;
}
div {
      margin-bottom: 10px;
}
select {
      width: 300px;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 1.3em;
}
input[type=text] {
      width: 300px;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 1.3em;
}
label {
      display: block;
      font-size: 1.3em;
}
#label_photo {
            display: inline; font-size: 1.5em; margin-right: 30px;
      }
#label_video {
            display: inline; font-size: 1.5em;
      }
.overflow {
      height: 200px;
}
a {
      font-size: 1.3em;
}
input[type=checkbox] {
      position: relative;
      top: -4px;
      height: 30px;
      width: 30px;
      vertical-align: middle;
}
textarea {
      width: 350px;
      height: 200px;
}
fieldset {
      width: 350px;
}
#accordion {
width: 400px;
font-size: 1.4em;
}
.grid-container {
    display: grid;
    /* Crée des colonnes de 200px minimum, s'adapte à la largeur de l'écran */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.user-card {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    background-color: #fff;
}

.user-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #999;
}

/* État sélectionné (Actif) */
.user-card.active {
    background-color: #e3f2fd; /* Bleu très clair */
    border-color: #2196f3;     /* Bleu vif */
    color: #0d47a1;
}

/* État non-sélectionné (Inactif) */
.user-card.inactive {
    background-color: #f5f5f5;
    color: #9e9e9e;
    border-style: dashed;
}
/* ============================= MOBILE =============================================== */
/* ============================= MOBILE =============================================== */
@media only screen and (max-width: 1200px) {
      body {
            background-color: #A7B8BC;
            margin-left: 10px;
            margin-bottom: 50px;
      }
      h2 {
            text-decoration: underline;
            font-size: 3em;
      }
      h3 {
            font-size: 3em !important;
      }
      div {
            margin-bottom: 10px;
      }
      select {
            width: 800px;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 2px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 4em;
      }
      input[type=text] {
            width: 600px;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 2px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 4em;
      }
      input[type=button] {
            font-family: monospace;
            height: 100px;
            width: 50%;
            font-size: 3em !important;
            margin-top: 40px;
            margin-bottom: 20px;
      }
      label {
            display: block;
            font-size: 2em;
      }
      #label_photo {
            display: block; font-size: 1em; margin-bottom: 50px; width: 50%;
      }
      #label_video {
            display: block; font-size: 1em; width: 50%;
      }
      .overflow {
            height: 200px;
      }
      a {
            font-size: 1.3em;
      }
      input[type=checkbox] {
            position: relative;
            top: -4px;
            height: 30px;
            width: 30px;
            vertical-align: middle;
      }
      textarea {
            width: 350px;
            height: 200px;
      }
      fieldset {
            width: 90%;
            border: solid 4px white;
      }
      #title_legend {
            font-size: 3em;
      }
      .ui-checkboxradio-label {
            font-size: 3em !important;
            margin-bottom: 10px;
      }
      #commentaire {
            width: 90%;
      }
}