/*******************************************
 *  THÈME LIGHT (par défaut)
 *  Variables CSS générées à partir du thème clair
 *******************************************/
:root {
  /* Couleurs principales */
  --color1: #2E547B;
  /* Composantes RGB correspondantes à --color1 (utile pour rgba) */
  --color1_r: 46;
  --color1_g: 84;
  --color1_b: 123;
  --color2: #5C000D;
  --color3: #9faec5;
  --couleur_principale: #1390C1;
  /* Gris */
  --gris2: #d5d5d5;
  --gris3: #BBBBBB;
  --gris4: var(--color1);
  --gris5: #eaeef4;
  --gris6: #5f6a73;
  --gris7: #B2B2B1;
  --gris8: #a0a7ad;
  --gris9: #CCC9C7;
  /* Divers */
  --border: #575756;
  --fieldset_title: #6D6E6D;
  --bg_bloc: #F8F8F8;
  --fontColor: #000000;
  --body-bg: #ffffff;
  --body-color: var(--fontColor);
  /* Éléments fonctionnels */
  --color_tag: var(--couleur_principale);
  --color_valid: #8ebe21;
  --color_unvalid: #ed6a51;
  --color_required: #DC001E;
  --background_required: rgba(220, 0, 30, 0.1);
  --color_required_check: #067A1B;
  --background_required_check: rgba(6, 122, 27, 0.1);
  --inputSelectColor: #333333;
  --inputColor: #F1F1F1;
  --white: #ffffff;
  --bodyColor: #f4f6f8;
  /* Typo */
  --font-size: 11px;
}
/*******************************************
 *  THÈME DARK
 *  Écrase uniquement les variables CSS
 *  pour un rendu sombre cohérent et lisible
 *******************************************/
body.dark-mode {
  /* Composantes RGB correspondantes à --color1 (dark) */
  --color1_r: 88;
  --color1_g: 185;
  --color1_b: 219;
  --couleur_principale: #58b9db;
  /* Gris adaptés au thème sombre */
  --gris2: #30363d;
  --gris3: #6b7177;
  --gris4: #2d3238;
  --gris5: #23272e;
  --gris6: #7a828a;
  --gris7: #a3a9ae;
  --gris8: #90979d;
  --gris9: #343a40;
  /* Bordures & divers */
  --border: #3a4047;
  --fieldset_title: #b6b6b6;
  --bg_bloc: #23272e;
  /* Texte & fond */
  --fontColor: #e5e5e5;
  --body-bg: #121212;
  --body-color: var(--fontColor);
  /* Tags */
  --color_tag: var(--couleur_principale);
  /* Validations */
  --color_valid: #7cc152;
  --color_required_check: #4ec77d;
  --background_required_check: rgba(78, 199, 125, 0.12);
  /* Erreurs / Requis */
  --color_unvalid: #e07360;
  --color_required: #ff5c7a;
  --background_required: rgba(255, 92, 122, 0.12);
  /* Inputs & utilitaires */
  --inputSelectColor: #e5e5e5;
  --inputColor: #40464d;
  --white: #ffffff;
  --bodyColor: #1b1f24;
}
.document-list {
  flex-grow: 1;
}
.dropzone {
  background: #f9f5ff;
  border: 2px dashed var(--couleur_principale);
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  min-height: 150px;
}
.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}
.document-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge {
  padding: 5px 10px;
}
.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.photo-card img {
  object-fit: cover;
  height: 180px;
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.photo-card .photo-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 5px;
}
.photo-card .photo-actions button {
  background: transparent;
  border: none;
  color: var(--white);
}
.photo-card a.glightbox {
  text-decoration: none;
}
.photo-card a.glightbox:hover {
  text-decoration: none;
}
.grille_cards .card {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.grille_cards .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.grille_cards .card .card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 999px;
}
.grille_cards .card .card-img-wrapper {
  height: 180px;
  background-color: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.grille_cards .card .card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grille_cards .card .card-img-wrapper .card-placeholder-icon {
  font-size: 48px;
  color: #adb5bd;
}
.grille_cards .card .card-body {
  display: flex;
  flex-direction: column;
}
.width_1 {
  width: 1% !important;
}
.width_2 {
  width: 2% !important;
}
.width_3 {
  width: 3% !important;
}
.width_4 {
  width: 4% !important;
}
.width_5 {
  width: 5% !important;
}
.width_6 {
  width: 6% !important;
}
.width_7 {
  width: 7% !important;
}
.width_8 {
  width: 8% !important;
}
.width_9 {
  width: 9% !important;
}
.width_10 {
  width: 10% !important;
}
.width_11 {
  width: 11% !important;
}
.width_12 {
  width: 12% !important;
}
.width_13 {
  width: 13% !important;
}
.width_14 {
  width: 14% !important;
}
.width_15 {
  width: 15% !important;
}
.width_16 {
  width: 16% !important;
}
.width_17 {
  width: 17% !important;
}
.width_18 {
  width: 18% !important;
}
.width_19 {
  width: 19% !important;
}
.width_20 {
  width: 20% !important;
}
.width_21 {
  width: 21% !important;
}
.width_22 {
  width: 22% !important;
}
.width_23 {
  width: 23% !important;
}
.width_24 {
  width: 24% !important;
}
.width_25 {
  width: 25% !important;
}
.width_26 {
  width: 26% !important;
}
.width_27 {
  width: 27% !important;
}
.width_28 {
  width: 28% !important;
}
.width_29 {
  width: 29% !important;
}
.width_30 {
  width: 30% !important;
}
.width_31 {
  width: 31% !important;
}
.width_32 {
  width: 32% !important;
}
.width_33 {
  width: 33% !important;
}
.width_34 {
  width: 34% !important;
}
.width_35 {
  width: 35% !important;
}
.width_36 {
  width: 36% !important;
}
.width_37 {
  width: 37% !important;
}
.width_38 {
  width: 38% !important;
}
.width_39 {
  width: 39% !important;
}
.width_40 {
  width: 40% !important;
}
.width_41 {
  width: 41% !important;
}
.width_42 {
  width: 42% !important;
}
.width_43 {
  width: 43% !important;
}
.width_44 {
  width: 44% !important;
}
.width_45 {
  width: 45% !important;
}
.width_46 {
  width: 46% !important;
}
.width_47 {
  width: 47% !important;
}
.width_48 {
  width: 48% !important;
}
.width_49 {
  width: 49% !important;
}
.width_50 {
  width: 50% !important;
}
.width_51 {
  width: 51% !important;
}
.width_52 {
  width: 52% !important;
}
.width_53 {
  width: 53% !important;
}
.width_54 {
  width: 54% !important;
}
.width_55 {
  width: 55% !important;
}
.width_56 {
  width: 56% !important;
}
.width_57 {
  width: 57% !important;
}
.width_58 {
  width: 58% !important;
}
.width_59 {
  width: 59% !important;
}
.width_60 {
  width: 60% !important;
}
.width_61 {
  width: 61% !important;
}
.width_62 {
  width: 62% !important;
}
.width_63 {
  width: 63% !important;
}
.width_64 {
  width: 64% !important;
}
.width_65 {
  width: 65% !important;
}
.width_66 {
  width: 66% !important;
}
.width_67 {
  width: 67% !important;
}
.width_68 {
  width: 68% !important;
}
.width_69 {
  width: 69% !important;
}
.width_70 {
  width: 70% !important;
}
.width_71 {
  width: 71% !important;
}
.width_72 {
  width: 72% !important;
}
.width_73 {
  width: 73% !important;
}
.width_74 {
  width: 74% !important;
}
.width_75 {
  width: 75% !important;
}
.width_76 {
  width: 76% !important;
}
.width_77 {
  width: 77% !important;
}
.width_78 {
  width: 78% !important;
}
.width_79 {
  width: 79% !important;
}
.width_80 {
  width: 80% !important;
}
.width_81 {
  width: 81% !important;
}
.width_82 {
  width: 82% !important;
}
.width_83 {
  width: 83% !important;
}
.width_84 {
  width: 84% !important;
}
.width_85 {
  width: 85% !important;
}
.width_86 {
  width: 86% !important;
}
.width_87 {
  width: 87% !important;
}
.width_88 {
  width: 88% !important;
}
.width_89 {
  width: 89% !important;
}
.width_90 {
  width: 90% !important;
}
.width_91 {
  width: 91% !important;
}
.width_92 {
  width: 92% !important;
}
.width_93 {
  width: 93% !important;
}
.width_94 {
  width: 94% !important;
}
.width_95 {
  width: 95% !important;
}
.width_96 {
  width: 96% !important;
}
.width_97 {
  width: 97% !important;
}
.width_98 {
  width: 98% !important;
}
.width_99 {
  width: 99% !important;
}
.width_100 {
  width: 100% !important;
}