@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    font-family: 'Open Sans', 'Calibri';
}

.contTout {
    height: 100vh;
    width: 100vw;
   /* background: linear-gradient(365deg,rgba(255,255,255,1) 0%, #ebb53e 100%); */
  /*  background: center/100% no-repeat url("background.png"); */
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   position: relative;
   margin: 0;
}

.background {
 position: absolute;
  display: flex;
  height: 100%; 
  width: 100%;
  z-index: -1000;
  object-fit: cover;
  opacity: 0.3;
  justify-content: center;
}

.backImg {
    width: 100%;
}

.progressBar {
    display: flex;
    flex-direction: column;
    width: 60%;
    align-items: center;
    margin-top: 20px;
}

#progressIllus {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 90%;
}

.legTitre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 92%;  
}

.legPage {
    /* width: 50%; */
    text-align: center;
}


.numPage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    margin: 0;
    /* background-color: #24a68a; 
    color: white;*/
    background-color: white;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    font-weight: 700;

}

#pUn {
   /*  background-color: #24a68a;  */
   /* background-color:#c43a3a;  */
   background-color:#146132;
    /* background-color: rgb(70, 174, 12); */
    color: white;
   
}

.lien {
    width: 95%;
    height: 1%;
    border-top: 5px solid white;
}

.contForm {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: white;
    width: 60%;
    margin: 20px 0;
    padding: 20px 30px;
    border: #dcdcdc 1px solid;
    box-shadow: #9d9d9d 0px 0px 10px;
}


.contForm.contChoix {
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    position: relative;
}


/* Le faux menu déroulant pour les salariés */

.methodeSal {
    /*   border-bottom: 1px solid #dcdcdc; */
      display: flex;
      justify-content: space-between;
  }
  
  .methodeSal .contChamp {
      width: 45%;
  }
  #contMan {
      position: relative;
  }
  
  #choixMan {
      position: absolute;
      border: 1px solid #ccc;
      background-color: white;
      max-height: 150px;
      overflow-y: auto;
      display: none;
      top:100%
  }
  
  #choixMan  p {
      padding: 8px;
      cursor: pointer;
  }
  
  #choixMan p:hover {
      background-color: #f0f0f0;
  }
  
  @keyframes clignotement {
      0%, 90% { 
          opacity: 1; 
          color: #146132; 
          font-weight: 900;
      }
      50% { 
          opacity: 0;
      }
      100% {
          color: black; 
          font-weight: 400;
      }
  }
  
  .valeurUnique {
      -webkit-appearance: none; /* Pour les navigateurs WebKit (Chrome, Safari, etc.) */
      -moz-appearance: none;    /* Pour les navigateurs Mozilla (Firefox) */
      appearance: none;   /* Pour les autres navigateurs */
      animation: clignotement 0.5s linear 3;
  }

/******** Partie intro ********/


 .contChoix .backImg {
    width: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#lienSupport {
    border-left: 5px solid white;
}

#lienCommande {
    border-right: 5px solid white;
}

.titreChoix {
    z-index: 500;
    position: absolute;
    letter-spacing: 10px;
    font-weight: 700;
    text-shadow: 1px 1px 2px white;
}

a {
   text-decoration: none; 
   color: black;
  /*  background-color: #FFFFFF;
   border-radius: 35px;
   padding: 20px 10px;
   box-shadow: 1px 1px 2px #9d9d9d; 
   letter-spacing: 5px;*/
}

.backImg .titreChoix:not(.pasHover):hover {
    transform: scale(1.1);
   
}

.validationChoix {
    /* background-color: white; */
    position: absolute;
    top: 60%;
    display: flex;
    align-items: center;
}

.validationChoix .envoiForm {
    width: 60%;
}

.validationChoix p {
    text-align: center;
}

/* & a:hover {
    background-color: rgb(83, 104, 113);
    color: #FFFFFF;
} */

/* h2.titreChoix {
    top: 50%;
    left: 20%;
} */

/********************************************/
.form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    animation: test 1s;
}

.contChamp:not(.radioImg) {
    display: flex;
    flex-direction: column;
    /* width: 50%; */
    margin: 10px 0;
    
}


/******* Les animations début et milieu du form ******/

.animation, .alerteDelai {
    animation: jeSuisLa 3s;
}

@keyframes jeSuisLa {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.clickAutre {
    animation: ecrase 2s forwards;
}

.clickAutre .pasHover {
    transform: rotate(90deg);
    transition: transform 350ms;
}

.clickLui .titreChoix {
    transform: rotate(360deg);
    transition: transform 350ms;
}

@keyframes deplace {
    0% {
      
        transform: translateX(0);
    }

    100% {
      
       transform: translateX(200px);

    }
}


@keyframes ecrase {

    0% {
      width: 100%;
    }

    100% {
        width: 10%;
    }
}

/********************************/

#contDeux{
    display: none;
}

#contPrem {
    display: none;
}

/****** Au début *******/
.contEnvoi, .form, #contZero, #ajoutListeZ {
    display: none;
}

#contZero {
    justify-content: space-between;
    flex-wrap: wrap;
}

.envoiForm:hover {
    background-color: #c43a3a;
    transform: scale(1.15);
    cursor: pointer;
}

.envoiForm {

   background-color:#146132;
    color: white;
    border-radius: 3px;
    border: none;
    padding: 10px 40px;
    margin-top: 10px;
    transition: transform 550ms, background-color 400ms;
    transition-delay: 0, 150ms;

}


.contEnvoi.finForm {
    flex-direction: row;
    justify-content: space-between;
}

.asterix {
    color: #fd0000; 
    font-weight: 600;
   
}

.contLeg {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.contLeg .fa-solid {
    color: #146132;
}

/****** Les autres salariés *******/
.contChamp.contAutreTexte {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

.titreSection.pasBorder {
   border-bottom: none;
} 

.contAutreTexte .contChamp {
    width: 30%;
    margin: 0;
}


/****** Les différentes listes de zoho *******/

#ajoutListeZ {
   /*  display: flex; */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.optionReg {
    color: #146132;
    font-weight: 900;
}

option:disabled.optionReg {
   font-style: italic;
}

/******* Infobulle délai *******/

.alerteDelai {
    display: flex;
    flex-direction: row;
}

.fa-circle-exclamation {
    color: #fd0000;
}

/****** Partie pieces jointes *********/
#envoiFichier {
    background-color:#c43a3a;
    color: white;
    border-radius: 3px;
    border: none;
    padding: 10px 40px;
    margin-top: 10px;
    transition: transform 550ms, background-color 400ms;
    transition-delay: 0, 150ms;
    width: 20%;
}

#envoiFichier:hover {
    background-color: #146132;
    transform: scale(1.15);
}

#cache  {
    display: none;
}

.prev {
    width: 10%;
}

/**** Fin du form  *****/

#finForm {
    display: flex;
}

 .contConclusion {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conclusion {
    text-align: center;
    animation: opacite 0.5s ease-in-out 2s both;
    
}

.echec {
    color: #c43a3a;
}

a.echec {
    font-weight: 900;
    text-decoration: underline;
}

.reussi {
    color: #146132;
}

@keyframes opacite {
    0% {
        opacity: 0;
        scale: 0;
    }

    50% {
        opacity: 1;
        scale: 1.2;
    }

    100% {
        scale: 1;
        font-weight: 700;
    }
}

/******************* La coche de validation **************/
/* le div conteneur */
 .success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
 }
    /* La premier rond celui qui va tourner, le relatif permet de positionner les éléments before et after */
    .check-icon {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 4px solid #4CAF50; 
    } 

     /* Cela crée des éléments sans contenu qui sont indépendant de l'élément parent*/
     .check-icon::before, .check-icon::after {
        content: '';
        height: 100px;
        position: absolute;
        background: #FFFFFF;
        transform: rotate(-45deg);
    }

   /*  La 1ere moitié du rond */
   .check-icon::before {
        top: 3px;
        left: -2px;
        width: 30px;
        transform-origin: 100% 50%;
        border-radius: 100px 0 0 100px;
    }

    /*  Son autre moitié de rond */
    .check-icon::after {
        top: 0;
        left: 30px;
        width: 60px;
        transform-origin: 0 50%;
        border-radius: 0 100px 100px 0;
        animation: rotate-circle 4.25s ease-in;
      
    }
   

    /* L'animation fait une rotation complète plus 45° à ::after  */
     @keyframes rotate-circle {
        0% {
            transform: rotate(-45deg);
        }
        5% {
            transform: rotate(-45deg);
        }
        12% {
            transform: rotate(-405deg);
        }
        100% {
            transform: rotate(-405deg);
        }
    }

     /* Un trait blanc en z entre le trait gauche+2ème cercle et le 1er cercle vercle pour enlever les deux  points du cercle vert) */
    .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #FFFFFF;
        } 
    
   /*  Le petit check composé de deux traits */
    .icon-line {
        height: 5px;
        background-color: #4CAF50;
        display: block;
        border-radius: 2px;
        position: absolute;
        z-index: 10;
    }

    /* le trait gauche     */  
   .icon-line.line-tip {
        top: 46px;
        left: 14px;
        width: 25px;
        transform: rotate(45deg);
        animation: icon-line-tip 0.75s;
    }

    /* L'apparition du trait gauche */
     @keyframes icon-line-tip {
        0% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        54% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        70% {
            width: 50px;
            left: -8px;
            top: 37px;
        }
        84% {
            width: 17px;
            left: 21px;
            top: 48px;
        }
        100% {
            width: 25px;
            left: 14px;
            top: 45px;
        }
    }
    
    /* Le trait droit */
    .icon-line.line-long {
        top: 38px;
        right: 8px;
        width: 47px;
        transform: rotate(-45deg);
        animation: icon-line-long 0.75s;
    }

   /*  L'apparition du trait droit */
    @keyframes icon-line-long {
        0% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        65% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        84% {
            width: 55px;
            right: 0px;
            top: 35px;
        }
        100% {
            width: 47px;
            right: 8px;
            top: 38px;
        }
    }
        
       /*  Un deuxième rond plus transparent qui ne se déplace pas (si on ne le met pas on voit bien le cercle blanc se déplacer mais il ne reste que les '' à la fin */
        .icon-circle {
            top: -4px;
            left: -4px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid rgba(76, 175, 80, .5);
        }

        /******** La croix ************/
        /* Le conteneur de la croix avec la croix blanche au centre et initialisation des valeurs avant animation */

        .checkmark {
            width: 112px;
            height: 112px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px #c43a3a;
            animation: fill 1s ease-in-out 1s forwards, scale .8s ease-in-out 1.6s both;
          }
          
          /* Le cercle de la croix avec l'animation donnant l'impression que le cercle se complète */
          .checkmark_circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #c43a3a;
            fill: none;
            animation: stroke 1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
          }
          
          /* L'animation de la croix blanche */
           .checkmark_check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 1.7s forwards;
          }
          
          @keyframes stroke {
            100% {
              stroke-dashoffset: 0;
            }
          }
          @keyframes scale {
            0%, 100% {
              transform: none;
            }
            50% {
              transform: scale3d(1.1, 1.1, 1);
            }
          }
          @keyframes fill {
            100% {
              box-shadow: inset 0px 0px 0px 60px #c43a3a;
            }
          }
    
 
/**** Tableau des demandes *****/

/* .grille .titreSection {
    color: #7c7c7c;
}*/

.grille .titreSection {
    border-bottom: none;
    /* margin: 10px 0; */
    color :#7c7c7c;
    font-size: 14px;
}
 
.enTete, .corps {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    text-align: center;
    border: 1px solid #146132;
    font-size: 12px;
}

/* .enTete {
    margin-top: 10px;
} */

.champ, .select {
    border: 1px solid #dcdcdc;
    font-size: 13px;
    padding: 5px;
    border-radius: 3px;

}

/**** Partie provenant du css spécial form *****/

.titre {

    padding-bottom: 20px;
    border-bottom: 1px solid #dcdcdc;
    
}

.titre h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 5px;
}


.sous-titre {
    font-size: 14px;
    font-weight: 200;
    color: #7c7c7c;
    margin-bottom: 20px;
}

.section {
    border: 0;
}

.titreSection {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0;
    font-size: 18px;
}

.radio {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 90%;
    margin: 10px 0;
}

.radioImg .radio {
    display: flex;
    flex-direction: column;
    width: 80%;

}

.radioImg img {
    width: 100%;
}

.radioImg .champ {
    margin-bottom: 30px;
}

.radio .radioLabel {
    margin-right: 20px;
}

.contChamp label {
    margin: 10px 0;
    color: #7c7c7c;
}

.texte {
    margin-top: 20px;
    width: 90%;
}


.contEnvoi {
    display: flex;
    flex-direction: column;
    align-items: center;
}