:root{
    --color-primary: #0F766E;
    --color-primary-hover: #115E59;
    --color-primary-active: #134E4A;
    --color-primary-light: #CCFBF1;
    --color-primary-subtle: #F0FDFA;

    /* Couleur secondaire : Vert sauge */
    --color-secondary: #A7C4B5;
    --color-secondary-hover: #8FB3A1;
    --color-secondary-light: #DDEBE3;
    --color-secondary-subtle: #F2F7F4;
    --color-white:#fff;

     /* Couleur tertiaire : Bleu ardoise */
    --color-tertiary: #35566F;
    --color-tertiary-hover: #29465D;
    --color-tertiary-light: #E5EEF5;
    --color-tertiary-subtle: #F3F7FA;


    /* Fond général de l'application */
    --color-background: #F6F8F8;

    /* Fond des cartes et panneaux */
    --color-surface: #FFFFFF;
    --color-surface-hover: #F8FAFA;
    --color-surface-active: #EEF4F2;

    /* Fond des sections */
    --color-background-secondary: #EEF4F2;
    --color-background-tertiary: #E8F0ED;

    /* Fond des champs de formulaire */
    --color-input-background: #FFFFFF;

    /* Fond des éléments sélectionnés */
    --color-selected-background: #E6F4F0;


    /* ========================================
    3. COULEURS DU TEXTE
    ======================================== */

    /* Texte principal */
    --color-text-primary: #172B2A;

    /* Texte secondaire */
    --color-text-secondary: #647775;

    /* Texte discret */
    --color-text-muted: #91A09D;

    /* Texte sur fond coloré */
    --color-text-inverse: #FFFFFF;

    /* Texte des liens */
    --color-text-link: #0F766E;

    /* Texte désactivé */
    --color-text-disabled: #AAB5B2;

    /* ========================================
        7. OMBRES
    ======================================== */

    /* Ombre subtile pour les petites cartes */
    --shadow-xs: 0 1px 2px rgba(23, 43, 42, 0.04);

    /* Ombre standard */
    --shadow-sm: 0 2px 6px rgba(23, 43, 42, 0.04);

        
    /* Ombre des cartes */
    --shadow-md:
        0 4px 12px rgba(23, 43, 42, 0.04),
        0 1px 3px rgba(23, 43, 42, 0.03);

    /* Ombre au survol */
    --shadow-lg:
        0 10px 25px rgba(23, 43, 42, 0.07),
        0 3px 8px rgba(23, 43, 42, 0.03);

    /* Ombre des menus et fenêtres */
    --shadow-xl: 0 20px 45px rgba(23, 43, 42, 0.12);

    /* Ombre colorée des boutons primaires */
    --shadow-primary: 0 4px 12px rgba(15, 118, 110, 0.16);

    --color-success: #005c00;
    --color-dark-variant: #677483;
    --color-info-dark: #7d8da1;
    --color-dark: #363949;
    --color-light: rgba(132, 139, 200, 0.18);
    /* --color-background: #f6f6f9; */

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 1.2rem;   

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 2rem 3rem var(--color-light);
}

*{
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html{
    font-size: 14px;
}

body{
    width: 100vw;
    height: 100vh;
    font-family: 'poppins', sans-serif;
    font-size: 0.88rem;
    overflow-x: hidden;
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

a{
    color: var(--color-dark);
}

h1{
    font-weight: 800;
    font-size: 1.8rem;
}

h2{
    font-weight: 600;
    font-size: 1.4rem;
}

h3{
    font-weight: 500;
    font-size: 0.87rem;
}

p{
    color: var(--color-dark-variant)
}


.double-ring {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 6px solid transparent;
  border-top: 6px solid var(--color-primary-light);
  border-bottom: 6px solid var(--color-secondary-light);
  border-radius: 100%;
  animation: rotate 1s linear infinite;
  margin: 30px auto;
  display: none;
  right: 8px;
  top: -50%;
}

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


.button{
    transition: .5s ease-in-out;
    cursor: pointer;
}

.button:hover{
    filter: brightness(70%);
}

.container{
    display: grid;
    gap: 3rem;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    /* grid-template-columns: 565rem 1rem; */
}

main{
    /* margin-right: 2rem; */
    padding: .1rem 2rem;
    width: 90vw;
    height: 85vh;
    align-items: center;
    background:linear-gradient(135deg, #A7C4B5 10%, #8FB3A1 35%, #DDEBE3 60%) ;
}
















.section .sign{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
}

.section .sign .sign-top{
    /* display: flex;
    flex-direction: column; */
    gap: 1.5rem;
    width: 100%;

}

.section .sign h2{
   font-size: 1rem;
   margin-bottom: 2rem;
   color: var(--color-text-secondary);
}

.section .sign .block{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section .sign .block img{
    max-width: 80%;
}









.section .sign .sign-bottom{
    width: 100%;
    height: 81vh;
    padding: 1rem;
    padding-top: 2rem;
    background-color: #f6f8f85d;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.section .sign .sign-bottom h1{
    text-align: center;
    margin-bottom: .5rem;
    font-size: 2rem;
}

.section .sign .sign-bottom h2{
    text-align: center;
    font-size: 2rem;
    font-family: cursive;

}

.section .sign-bottom form label{
    font-weight: bolder;
    font-style: oblique;
    color: var(--color-text-link);

}

.section .sign-bottom form input{
    margin-top: .5rem;
    margin-bottom: .8rem;
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--color-text-muted);
    background-color: var(--color-background);
    border-radius: 7px;
    padding-left: 1rem;
}


.section .sign-bottom form > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}


.section .sign-bottom form select{
    margin-top: .5rem;
    margin-bottom: .8rem;
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--color-text-muted);
    background-color: var(--color-background);
    border-radius: 7px;
    padding-left: 1rem;
}


.section .sign-bottom form select option:checked{
    background-color: var(--color-text-link);
    color: var(--color-text-inverse);
    
}


.section button.signing{
    position: relative;
    margin-top: 2rem;
    padding: 1rem 4rem;
    background-color: var(--color-primary);
    width: 100%;
    color: var(--color-text-inverse);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(23, 43, 42, 0.04),
    0 1px 3px rgba(23, 43, 42, 0.03);
    font-size: 1rem;
    cursor: pointer;
    transition: .5s ease-in-out;
}

.section button.signing:hover{
    filter: brightness(80%);
}


.section .question{
    text-align: center;
    color: var(--color-text-muted);
    margin-top: 2rem;
    cursor: pointer;
    font-size: 1.02rem;
}

.section .question a{
    color: var(--color-primary);
    font-weight: bolder;
}


.section .sign h2.name{
    display: none;
}

.section .sign p.stat{
    display: none;
}











/* @media screen and (max-width: 1336px) {
    .container{
        grid-template-columns: 12rem auto ;
    }

    main{
        margin-right: none;
    }

    aside{
        width: 9rem;
    }
}





@media screen and (max-width: 1200px) {
    .container{
        width: 95%;
        grid-template-columns: 7rem auto;
    }

    main{
        margin-right: -.5rem;
        /* padding-right: .4rem; */
    /* } */

    /* aside .logo {
        display: none;
    } */

    aside .sidebar{
    height: 55vh;
    }

    

    aside .sidebar h3{
        display: none;
    } 

    aside .sidebar span{
        font-size: 1.2rem;
    }

    aside .sidebar a {
        width: 5.6rem;
    }

    aside .sidebar a:last-child{
        position: relative;
        margin-top: 1.8rem;
    }

    








@media screen and (max-width: 768px) {
    .container{
        width: 100%;
        grid-template-columns: 1fr; 
        padding: 0 var(--padding-1);
    }

    .section .sign h2.name{
        font-size: 1rem;
        margin-top: -1rem;
        margin-bottom: -2rem;
        color: var(--color-text-primary);
    }


    .section .sign .sign-bottom h1{
        font-size: 1.4rem;
    }

    .section .sign .sign-bottom h2{
        font-size: 1.4rem;
    }

    .section .sign .sign-top h1{
        font-size: 1.1rem;
    }

    .section .sign .sign-top h2{
        font-size: 1rem;
    }

    .section button.signing{
        padding: auto 0;
        font-size: .95rem;
    }

    

    
}


@media screen and (max-width : 590px) {


    main{
        margin-right: 0;
    }

    main{
        /* margin-right: 2rem; */
        padding: .1rem 2rem;
        width: 100vw;
        height: 100%;
        background:linear-gradient(135deg, #A7C4B5 10%, #8FB3A1 35%, #DDEBE3 60%) ;
    }

    .section .sign{
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .section .sign .sign-top{
        margin-right: .1rem;
    }

    .section .profil .sign-bottom{
        margin-right: .1rem;
        padding-bottom: .8rem;
    }



    .section .sign .sign-bottom{
        width: 100%;
        height: 55vh;

    }

    .section .sign .sign-bottom h1{
        display: none;
    }

    .section .sign .sign-bottom h2{
        font-size: 1.5rem;
    }

    .section .sign .sign-top h1{
        font-size: 1.3rem;
    }

    .section .sign .sign-top h2{
        display: none;
    }

    .section .sign .sign-top img{
        max-width: 40%;
    }

    
    


}


@media screen and (max-width: 556px) {
    .section .sign .block{
        padding: 1rem 1rem;
        grid-template-columns: 1fr 3fr;
    }

    .section .sign .block .logo {
        width: 3rem;
    }

    .section .sign .block .logo img{
        width: 3rem;
    }


    .section .sign .block button{
        padding: .5rem;
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(23, 43, 42, 0.04),
        0 1px 3px rgba(23, 43, 42, 0.03);
        font-size: .8rem;
    }
}



@media screen and (max-width : 550px){

    .section .sign .sign-top{
        display: grid;
        grid-template-columns: 1fr;
    }

    .section .sign .sign-top .none{
        display: none;
    }

    .section .head-sign .desc .text{
        font-size: .7rem;
    }


    .section .head-sign .desc div:nth-child(even){
        min-width: 2.5rem;
    }


}



@media screen and (max-width : 430px){


    .section .sign .block{
        padding: 1rem 1rem;
        grid-template-columns: 1fr 3fr;
    }

    .section .sign .block .logo {
        width: 2.5rem;
    }

    .section .sign .block .logo img{
        width: 2.5rem;
    }


    .section .sign .block .desc .text{
        line-height: 1rem;
        font-size: .7rem;
    }

    .section .sign .block button{
        padding: .7rem .5rem;
        font-size: .6rem;
    }

    .section .sign .sign-top img{
        min-width: 60%;
    }

    
}


@media screen and (max-width : 400px) {
    
    .section .head-sign .desc .text{
        font-size: .5rem;
    }


    .section .head-sign .desc div:nth-child(even){
        min-width: 2rem;
    }

}



@media screen and (width: 1024px) and (height: 600px) {
    aside .sidebar{
        height: 85vh;
    }
}

@media screen and (width: 1024px) and (height: 733px) {
    aside .sidebar{
        height: 75vh;
    }
} */