.input-text {
    display: flex;
    padding: 2px 12px;
    align-items: center;
    align-self: stretch;
    font: var(--text-h3);
    color: var(--color-gray-600);
    transition: all 0.2s ease;

    border-radius: 8px;
    border: 0.8px solid rgba(0, 0, 0, 0.00);
    background: #F9FAFB;
}


.input-text::placeholder {
    color: #aaa;
    font: var(--text-p);
}

.input-text:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
  outline: none;
}





.btn {
    display: flex;
    padding: 8px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    
    border-radius: 8px;
    background: linear-gradient(180deg, #FF9C02 0%, #FF7A00 100%);
    
    /* ------------------------------------ */
    /* 1. AJOUT DE LA TRANSITION FUIDE */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
    /* ------------------------------------ */
}

/* 2. Styles au survol (Hover) */
.btn:hover {
    /* Animation 1: Léger zoom pour donner de la profondeur */
    transform: scale(1.03); 
    
    /* Animation 2: Ombre portée pour un effet "pop-up" */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* Animation 3: Léger décalage du gradient (optionnel, donne du mouvement) */
    background: linear-gradient(180deg, #FF9C02 0%, #FF7A00 100%);

}

.btn span {
    color: #FFF;
}



.btn-alerte {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font: var(--text-p);
    cursor: pointer;
    color : #FFF;

    border-radius: 14px;
    background: linear-gradient(90deg, #FB2C36 0%, #E7000B 100%);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);

}



.myCardContainer {
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    border-radius: 16px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.myCard {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    text-decoration: none;

    border-radius: 14px;
    border: 2px solid #FFC9C9;
    background: rgba(254, 242, 242, 0.30);
}




.btn-status-mission {
    display: flex;
    padding: 8px 12px;
    align-items: flex-start;
    font: var(--text-p);

    border-radius: 33554400px;
}


.btn-status-mission.rejet{
    background: #FFE2E2;
}

.rejet span {
    color: #C10007;
}

.btn-status-mission.en_attente {
    background: #FEF9C2;
}

.en_attente span {
    color: #A65F00;
}

.btn-status-mission.en_cours {
    background: #CEFAFE;
}

.en_cours span {
    color: #007595;
}

.btn-status-mission.terminee {
    background: #DCFCE7;
}

.terminee span {
    color: #008236;
}

.divider {
    height: 2px;
    align-self: stretch;
}


.btn-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #364153;
    cursor: pointer;
    user-select: none;

    border-radius: 14px;
    border: 1px solid #D1D5DC;
    background: #FFF;

    transition: 
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.15s ease;
}

/* Texte */
.btn-filter-text {
    font: var(--text-p);
    /* color: #101828; */
}

/* Icône */
.btn-filter .nav-icon {
  font-size: 20px;
  color: #667085;
  transition: color 0.25s ease;
}

/* Hover (desktop) */
.btn-filter:hover {
  background: #F9FAFB;
}

/* Active */
.btn-filter.active {
  background: linear-gradient(180deg, #FF9C02 0%, #FF7A00 100%);
  border-color: transparent;

  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.12),
    0 4px 6px -4px rgba(0, 0, 0, 0.12);

  transform: translateY(-1px);
}

/* Active → texte + icône */
.btn-filter.active .btn-filter-text,
.btn-filter.active .nav-icon {
  color: #FFFFFF;
}

/* Click feedback */
.btn-filter:active {
  transform: scale(0.96);
}

.btnCancel {
    display: flex;

    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 9.34px;
    border: 1px solid #000;
    background: #fff;

    color: #111827;
    cursor: pointer;

    transition: 
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.15s ease;
}



.btnCancel .icon {
    font-size: 20px;
    color: #6B7280;
    transition: color 0.25s ease;
}



/* Hover */
.btnCancel:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.btnCancel:hover .icon {
  color: #111827;
}

/* Active */
.btnCancel:active {
  transform: scale(0.97);
  box-shadow: none;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}


.myInput { 
    display: flex;
    padding: 8px 16px;
    align-items: center;
    align-self: stretch;

    border-radius: 14px;
    border: 1px solid #D1D5DC;

    align-self: stretch;
    font: var(--text-p);
    color: #717182;
    transition: all 0.2s ease;

}

.myInput::placeholder {
  color: #aaa;
}

.myInput:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
  outline: none;
}



.inputIconField {
    display: flex;
    padding: 4px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    color: #99A1AF;


    border-radius: 14px;
    border: 1px solid #D1D5DC;
    background: #FFF;
}

.inputIconField input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
    font: var(--text-p);
    color: #717182;
}

.cardStatistics {
  display: grid;
  gap: 16px; /* Simplification : gère row et column gap d'un coup */
  align-self: stretch;
  
  /* Configuration Desktop : 4 colonnes égales */
  grid-template-columns: repeat(4, 1fr);
}

.statCard {
  display: flex;
  padding: 16px; /* Ajustement du padding pour plus d'équilibre */
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  background: #FFF;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* --- MEDIA QUERIES --- */

/* Tablettes (Laptops moyens) */
@media (max-width: 1200px) {
  .cardStatistics {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes par ligne */
  }
}

/* Mobiles */
@media (max-width: 640px) {
  .cardStatistics {
    grid-template-columns: 1fr; /* 1 seule colonne (toute la largeur) */
  }

}

.top-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  margin-top: 40px;
  width: 500px;
  background: #FFF;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-textarea {
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  padding: 12px;
  font-family: inherit;
  resize: none;
}

.popup-btn {
  background: #FF9C02;
  border: none;
  padding: 12px;
  border-radius: 12px;
  color: #FFF;
  cursor: pointer;
  font-weight: 600;
}

.litigeInfoDetail {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}