/********** POPUP **********/
/* Toutes les popups */
.popup.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 250ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999999999;
}
.popup{
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
}
.popup.show{
  visibility: visible;
  opacity: 1;
}

.popup.active {
  visibility: visible;
  opacity: 1;
}

.popup .wrapper {
  position: fixed;
  padding: 0;
  background: #fff;
  border-radius: 0px;
  transition: all 500ms ease-in-out;
  overflow: visible;
}

.popup:not(.active) .wrapper.left {
  left: -350px;
}

.popup:not(.active) .wrapper.right {
  right: -350px;
}

.popup.active .wrapper.top {
  top: calc(var(--height-header) + var(--gap));
}

.popup.active .wrapper.bottom {
  bottom: var(--gap);
}

.popup.active .wrapper.left {
  left: var(--gap);
}

.popup.active .wrapper.right {
  right: var(--gap);
}

/********** POPUP SEARCH **********/
.popup.search .wrapper {
  position: absolute;
  top: calc(var(--height-header) + 1px);
  right: var(--gap);  
  width: 100%;
  max-width: 350px;
  padding: 0;
  background: #fff;
  border-radius: 0px;
  overflow: visible;
  padding: var(--gap);  
  display: flex;
  align-items: center;
  justify-content: center;

}
.popup.search .wrapper form{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.popup.search .wrapper label{
  display: none;
}
.popup.search .wrapper input{
  border:none;
  border-bottom: 2px solid var(--color-black);
  padding: 3px var(--gap);
  font-size: 1.4rem;
  flex:1;
  transition: all 300ms ease-in-out;
}
.popup.search .wrapper input:focus{
  outline: none;
  border-bottom-color: var(--color-action-hover);
}
.popup.search .wrapper input::placeholder{
  color: #AAA;
}
.popup.search .wrapper button.clear{
  background-color: transparent;
  border:none;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  line-height: 0;
  margin-left: var(--gap);
}

.popup.search .wrapper button.clear {
color: var(--color-dore);
}

.popup.search .wrapper button.clear:hover {
color: var(--color-gris);
}





/*************************************/
/* POPUP-ACTION  *********************/
/*************************************/
div[data-popup-open]{
    cursor: pointer;
}
.popup-action{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-action [data-popup-close]{
    position: absolute;
    top: calc(-1* var(--gap));
    right: calc(-1* var(--gap));
    cursor: pointer;
    background-color: white;
    border-radius: 50px;
    width: 50px;
    height: 50px;    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 250ms ease-in-out;
}
.popup-action [data-popup-close]:hover{
    background-color: black;
    color: white;
}


.popup-action.show{
    visibility: visible;
    opacity: 1;
}

.popup-wrapper{
    position: relative;
    background-color: var(--color-white);
    padding: var(--gap-2);
}

.popup-wrapper .tilte{
    font-size: var(--size-h4);
    text-align: center;
    margin-bottom: var(--gap);
}


.form .action{
    margin-top: var(--gap-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;    
    gap: var(--gap);
}
.action .button{
    padding: 10px 30px;
    line-height: 20px;
    text-align: center;
}



/*************************/
/* MESSAGE               */
/*************************/
.form .message{  
    font-family: var(--font-text);  
    font-size: 1.2rem;
    line-height: var(--size-p-height);    
    width: 100%;
}

.form .message.danger{
    margin-top: var(--gap);
    padding: 10px 20px;
    border: 1px solid var(--color-message-red-border);
    color: var(--color-message-red-color);
    background-color: var(--color-message-red-back);
}
.form .message.success{
    margin-top: var(--gap);
    padding: 10px 20px;
    border: 1px solid var(--color-message-green-border);
    color: var(--color-message-green-color);
    background-color: var(--color-message-green-back);
}

/*************************/
/* FORMULAIRES           */
/*************************/

.form .button.disabled{
    background-color: lightgray !important;
    color: gray !important;
}

.form .button.disabled span{
    margin-left: 10px;
}
.form span.svg.turn svg{    
    animation: rotation 1500ms infinite ease-in-out;   
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.popup-action .form {
    display: flex;
    flex-direction: column;
    align-items: stretch;    
    width: 100%;
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}

.popup-action .form .title{
    font-family: var(--font-title);
    font-weight: var(--font-title-bold);
    font-size: var(--size-h4);
    margin-bottom: var(--gap-2);
}

.popup-action .form .input {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
}

.popup-action .form .input .group,
.popup-action .form .input .subgroup {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.popup-action .form .input .group.sub {
    flex-direction: row;
    gap: var(--gap);
}

.popup-action.login .box .form .input .group.descritption {
    display: none;
    visibility: hidden;
}

.popup-action .form .input .group input:disabled,
.popup-action .form .input .group select:disabled,
.popup-action .filter input:disabled{
    background-color: #CCC;
}
.popup-action .form .input .group input,
.popup-action .form .input .group select,
.popup-action .form .input .group textarea{
    background-color: #F5F5F5;
    padding: 8px;
    width: 100%;
    border: 2px solid transparent;    
}

.popup-action .form .input .group input::placeholder{
    font-style: italic;
    color: var(--color-dark-grey);
}

.popup-action .form .input .group input:focus{
    outline: none;
    border: 2px solid var(--color-black);
    background-color: var(--color-white);
}
.popup-action .form .input .group:last-child {
    display: none;
    visibility: hidden;
}


.popup-action .form .input .group label span{
    color:red;    
}

.popup-action .form .input .group label.checkbox{    
    font-family: var(--font-text);
    font-weight: var(--font-title-regular);
    font-size: 1.3rem;
    line-height: 1.2;
    display: flex;
    grid-template-columns: 1em auto;
    gap: var(--gap);
    align-items: center;
  }

.popup-action .form .input .group input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: #F5F5F5;
    /* Not removed via appearance */
    margin: 0;
  
    font: inherit;
    color: currentColor;
    width: 1.8em;
    height: 1.8em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
  
    display: grid;
    place-content: center;
  }
  
.popup-action .form .input .group input[type="checkbox"]::before {
    content: "";
    width: 1em;
    height: 1em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 50ms transform ease-in-out;
    box-shadow: inset 1em 1em green;
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

.popup-action .form .input .group input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.popup-action .form .button{
    cursor: pointer;
}