/* poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
/* roboto */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* quicksand */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");


:root{
    --dt-color-primary:rgb(0 79 45);
    --dt-color-tertiary:rgb(77 175 39);
    --dt-color-secondary:rgb(32 145 251);
    --dt-color-danger:#F44336;
    --dt-color-waiting:#ec9c08;
    --dt-color-waitings:#d38a03;
    --dt-color-dangers:#c82333;
      --color-primary:#ddd;
      --color-on-primary:#000;
     /* --color-secondary:rgb(5, 122, 40);*/
     --color-disabled:#555;
     --color-secondary:#ddd;
     --color-on-surface:#eee;
      --color-on-secondary:#212121;
      --color-surface:rgb(21,21, 21,.5);
      --color-surface-dark:rgb(21,21, 21);
      --color-surface-light:rgb(21,21, 21,.9);
      --color-background:#000;
      --color-success: #6D9773;
      --color-successs: #608265;
      --color-name-icon:#0369a1;
      --color-name-icons:#044e96;
      --background-icon:#35554a;
      --color-warning:#10b981;
      --color-warnings:#cfdfb2;
      --my-gradient: linear-gradient(63deg, #ffba00, #57370d);


      /* ROOT ACCORDING USER FORMS */
        --background-color: #1d1f21;
            --form-background-color: #2b2d31;
            --text-color: #c5c6c7;
            --input-background-color: #1f2123;
            --input-border-color: #4a4e51;
            --input-focus-border-color: #6D9773;
            --button-background-color: #0c527c;
            --button-background-color: #064b75;
            --button-hover-background-color: #6D9773;
            --button-text-color: #c5c6c7;
            --header-text-color: #6D9773;
            --border: #ddd;

     /* grayscale */

     --grayscale-0: rgba(var(--grayscale-base), 0); /* most transparent */
     --grayscale-02: rgba(var(--grayscale-base), 0.02); /* most transparent */
     --grayscale-03: rgba(var(--grayscale-base), 0.03);
     --grayscale-05: rgba(var(--grayscale-base), 0.05);
     --grayscale-08: rgba(var(--grayscale-base), 0.08);
     --grayscale-10: rgba(var(--grayscale-base), 0.1);
     --grayscale-20: rgba(var(--grayscale-base), 0.2);
     --grayscale-50: rgba(var(--grayscale-base), 0.5);
     --grayscale-60: rgba(var(--grayscale-base), 0.6);
     --grayscale-80: rgba(var(--grayscale-base), 0.8);
     --grayscale-90: rgba(var(--grayscale-base), 0.9);
     --grayscale-95: rgba(var(--grayscale-base), 0.95);
     --grayscale-100: rgba(var(--grayscale-base), 1); /* most opaque */

     /* inverted grayscale */
     --grayscale-0i: rgba(var(--grayscale-base-inverted), 0); /* most transparent */
     --grayscale-01i: rgba(var(--grayscale-base-inverted), 0.01); /* most transparent */
     --grayscale-02i: rgba(var(--grayscale-base-inverted), 0.02); /* most transparent */
     --grayscale-03i: rgba(var(--grayscale-base-inverted), 0.03);
     --grayscale-05i: rgba(var(--grayscale-base-inverted), 0.05);
     --grayscale-08i: rgba(var(--grayscale-base-inverted), 0.08);
     --grayscale-10i: rgba(var(--grayscale-base-inverted), 0.1);
     --grayscale-20i: rgba(var(--grayscale-base-inverted), 0.2);
     --grayscale-50i: rgba(var(--grayscale-base-inverted), 0.5);
     --grayscale-60i: rgba(var(--grayscale-base-inverted), 0.6);
     --grayscale-80i: rgba(var(--grayscale-base-inverted), 0.8);
     --grayscale-90i: rgba(var(--grayscale-base-inverted), 0.9);
     --grayscale-95i: rgba(var(--grayscale-base-inverted), 0.95);
     --grayscale-100i: rgba(var(--grayscale-base-inverted), 1); /* most opaque */
     /* border radius */
     --radius: 4px;


        /* bluescale */

        --bluescale-0: rgba(var(--bluescale-base), 0); /* most transparent */
        --bluescale-02: rgba(var(--bluescale-base), 0.02); /* most transparent */
        --bluescale-03: rgba(var(--bluescale-base), 0.03);
        --bluescale-05: rgba(var(--bluescale-base), 0.05);
        --bluescale-08: rgba(var(--bluescale-base), 0.08);
        --bluescale-10: rgba(var(--bluescale-base), 0.1);
        --bluescale-20: rgba(var(--bluescale-base), 0.2);
        --bluescale-50: rgba(var(--bluescale-base), 0.5); 
        --bluescale-60: rgba(var(--bluescale-base), 0.6);
        --bluescale-80: rgba(var(--bluescale-base), 0.8);
        --bluescale-90: rgba(var(--bluescale-base), 0.9);
        --bluescale-95: rgba(var(--bluescale-base), 0.95);
        --bluescale-100: rgba(var(--bluescale-base), 1); /* most opaque */

     /* text */
     --heading-font-family: Quickstand, Times, serif;
     --heading-text-color: var(--grayscale-80);
     --paragraph-text-color: var(--grayscale-60);

     /* button */
     --button-background-primary: linear-gradient(63deg, #6D9773, #0C3B2E);
     --button-text-color-primary: white;

     /**
      * You can define any default theme values here and then
      * override them as desired in the individual theme files.
      */

    /* grayscale bases */
    --grayscale-base: 0, 0, 0;
    --grayscale-base-inverted: 255, 255, 255;
    --bluescale-base: 4, 78, 150;

    /* width */

    --width-60 : 60px

    /* grid row */
    --num-1 :1;
    --num-2 :2;
    --num-3 :3;
    --num-4 :4;
  }

 
  /* body{
    color: var(--color-primary);
  } */

 /* ===== Bouton primaire ===== */
.btn-primary {
  background-color: var(--color-name-icon);
  color: var(--grayscale-100i);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  appearance: button;

}

/* Effet au survol */
.btn-primary:hover {
  background-color:var(--button-background-color); /* Vert plus foncé */
  transform: translateY(-2px); /* Légère remontée */
}

/* Effet lors du clic */
.btn-primary:active {
  background-color: var(--button-background-color); /* Vert encore plus foncé */
  transform: translateY(0); /* Retour à la position d'origine */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Effet focus pour l'accessibilité */
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
}


.btn-reset {
  background-color: var(--dt-color-danger);
  color: var(--grayscale-100i);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  appearance: button;

}

/* Effet au survol */
.btn-reset:hover {
  background-color:var(--dt-color-dangers); /* Vert plus foncé */
  transform: translateY(-2px); /* Légère remontée */
}

/* Effet lors du clic */
.btn-reset:active {
  background-color: var(--dt-color-danger); /* Vert encore plus foncé */
  transform: translateY(0); /* Retour à la position d'origine */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Effet focus pour l'accessibilité */
.btn-reset:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
}

.pr{
  padding-right: 10px; 
  
}.pl{
  padding-left: 10px; 
  
}