@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

:root {
    --color-primary: #009579;
    --color-edit: orange;
    --color-primary-dark: #007f67;
    --color-secondary: #252c6a;
    --color-error: #cc3333;
    --color-success: #4bb544;
    --border-radius: 5px;
    --blur-bg: blur(50px);    
}

/* || RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*text-align: center;*/
}
body {
    font-family: Nunito, Arial, sans-serif;
    /* text-align: center; */
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    min-width:330px;
    max-width: 576px;
    min-height: 480px;
    margin-left:auto;
    margin-right:auto;


    /* border : 1px solid blue; */
    
    /*height: 100vh;*/
    /*display: flex; */ /*centerelise the box*/
    
    /* font-size: 18px; */

    /*background: white;*/ /*tenter epuré sans bg*/ 
    
    /* blur turquoise background */
    background-image: url(../img/pexels-bg.jpg);
    background-size: cover;
    background-position: center;
    /*backdrop-filter: var(--blur-bg);*/

    /*background-size: 10000px;*/
    /*-webkit-backdrop-filter: var(--blur-bg); /* assure la compatibilité avec safari */
    
}

.global {
    /*border : 2px solid yellow;*/
    display: flex;
    flex-direction: column;
    /*height: 100vh;*/
    /*padding:1em;*/
    /* max-width: 600px; */
    /* padding: 10px; */
    /* min-width: 300px; */
    /*width: 480px;*/
    /* margin-left: auto;
    margin-right: auto; */
    /*overflow: auto;*/
    /*width: 400px;*/
    /*width: 100%;*/ /*default*/
    
    justify-content: space-evenly;
    /*justify-content: space-around;*/
    /*min-height: 50vh;*/
    
}
.accroche {
    /*display: flex;*/
    font-size: 1.2rem;
    justify-content: center;
    color:#b3994d;
    /* padding: 1rem; */
    
}

.left {
    text-align: left;
    justify-content: left;
}

.right {
    text-align: right;
    justify-content: right;
}

header {
    /* border: 1px solid red; */
    /*width: 600px;*/
    /*max-width: 600px;*/
    /* border: 2px solid blue; */
    /*margin: 2rem 1rem;*/
    padding: 0.5rem;
    /*box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);*/
    /*background: #ffffff;*/
}
.logo {
    display: flex;
    padding: 0.5rem;
    /* margin: 0.5em 0em;  */
    /* flex-direction: row;
    flex: 1 0 auto;*/
    /*justify-content: space-evenly;*/
    font-size: 0.85rem;
    font: 900 1.5rem 'Nunito', sans-serif;
    color:floralwhite;
    justify-content: center;
    align-items: center;
    /*background-color: cadetblue;*/
    /*background-color: var(--bg-bg);*/
    /* margin: 5px 0px;
    vertical-align: top;
    padding: 0px 0px;
    height:15px;
    width:16px; */
}
.logoletter {
    /*float: left;*/
    height:24px;
    width:24px;
    align-items: center;
    /*background-color: cadetblue;*/
    /*background-color: var(--bg-bg);*/
    /*margin: 5px 0px;
    vertical-align: top;
    padding: 0px 0px;
    height:15px;
    width:16px;*/
}

.logopng {
    height: auto;
    width: 15vw;
}

.formbox {
    /*display: table;*/
    /* border: 1px solid black; */
    /*width: 90%;*/
    /*max-width: 800px;
    min-width: 300px;*/
    margin: 1rem; 
    padding: 2rem;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius);
    /*background: #d6e3e9b3;*/
    background: aliceblue;
    /* background: #ffffff; */
}

.svgres {
    border: 1px solid;
    color: darkgoldenrod;
}

.colored {
    /*background:floralwhite;*/
    background:white;
}
.downbox {
    margin: 5px;
    display: flex;
    justify-content: space-evenly;
}

.resContainer {
    display: flex;
    justify-content: space-evenly;
    margin: 1rem;
}

.container,
.form__input,
.form__button {
    font: 500 1rem 'Quicksand', sans-serif;
}

.form--hidden {
    display: none;
}

.form > *:first-child {
    margin-top: 0;
}

.form > *:last-child {
    margin-bottom: 0;
}

.form__title {
    margin-bottom: 1rem;
    text-align: center;
}

.form__message {
    text-align: center;
    height: 1rem;
    margin-bottom: 1rem;
    /*inline-size: max-content;*/
}

.form__message--success {
    color: var(--color-success);
}

.form__message--error {
    color: var(--color-error);
}

.form__message--warn {
    color: var(--color-edit);
}

.form__input-group {
    margin-bottom: 1rem;
}

.form__input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    border: 1px solid #dddddd;
    outline: none;
    /* background: floralwhite; */
    transition: background 0.2s, border-color 0.2s;
}

.form__input:focus {
    border-color: var(--color-edit);
    background: #ffffff;
}

.form__input--error {
    color: var(--color-error);
    border-color: var(--color-error);
}

.form__input-message {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-error);
}

/*.form__input-success-message {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-success);
}*/

h1 {
    color: #25636a;
    text-align: center;
}

h2 {
    color:#b3994d;
    display: flex;
    
}

h3 {
    color:#25636a;
    font-size: 22px;
}



.form__button {
    width: 100%;
    padding: 0.7em;
    font-weight: bold;
    font-size: 1.1rem;
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius);
    outline: none;
    cursor: pointer;
    background: var(--color-primary);
}

.form__button:hover {
    background: var(--color-primary-dark);
}

.form__button:active {
    transform: scale(0.98);
}
.form__button:disabled {
    transform: scale(1);
    outline: auto;
    cursor:not-allowed ;
    background: gray;
    color: #1010104d;
}

.form__text {
    color: darkgreen;
    text-align: center;
    padding-top:0.6em;
}

.form__code_text {
    color: orangered;
    text-align: center;
    padding-top:0.6em;
}

.form__link {
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
}

.form__link:hover {
    text-decoration: underline;
}

.displayBadge, 
.displaySameness {
	margin-top: 10px; 
	display: none; 
	text-align :left;
    padding: 2px 10px;
    font-size: 0.9em;
    /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    color: floralwhite;
}

footer {
    /* border: 1px solid orange; */
    /*width: 600px;*/
    /* max-width: 600px; */
    font-size: 0.8em;
    /* margin: 0em 0em;
    padding: 1em; */
    /* box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius); */
    /* display: flex; */
    /*flex: 0 0 auto;*/
/*    align-items: normal;*/
    justify-content: space-evenly;
    /*background: #ffffff;*/
}


.num-circle {
    width: 35px; /* Adjust the size of the circle */
    height: 35px; /* Adjust the size of the circle */
    border-radius: 50%; /* Makes the container a circle */
    background-color: #007bff; /* Background color of the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Text color */
    font: 18px sans serif; /* Font size of the text */
}

/* || MEDIUM */
@media screen and (max-width: 576px)
{
    .global {
        /*border: 1px solid orange;*/
        justify-content: space-evenly;
    }

    .logopng {
        height: auto;
        width: 20vw;
    }
}


/* petit ecran paysage : afficher la scroll barre verticalle si la hauteur ne permet pas d'afficher tout*/
@media screen and (max-height: 600px) AND (min-aspect-ratio:7/4) {
    .global {
        justify-content: space-between;
    }
}

/* petit ecran paysage : afficher la scroll barre verticalle si la hauteur ne permet pas d'afficher tout*/
@media screen and (max-height: 468px) {
    .global {
        justify-content: normal;
    }
}

/* || SMALL */
@media screen and (max-width: 430px) 
{
    .global {
        padding: 0.5em;
        overflow-x: scroll;
    }

    .formbox {
        padding: 0.5rem;
    }

    .form__link {
        font-size: 0.7rem;
    }

    .accroche {
        font-size: 0.8rem;
        color:#b3994d;
    }

    .logopng {
        height: auto;
        width: 30vw;
    }
    .resContainer {
        display: flex;
        flex-direction: column;
        /*justify-content: space-evenly;*/
        justify-content: center;
        margin: 1rem;
    }
    .num-circle {
        width: 21px; /* Adjust the size of the circle */
        height: 21px; /* Adjust the size of the circle */
        border-radius: 50%; /* Makes the container a circle */
        background-color: #007bff; /* Background color of the circle */
        display: flex;
        justify-content: center;
        align-items: center;
        color: white; /* Text color */
        font: 10px sans serif; /* Font size of the text */
    }
    
}

















.res-table {
    display: table;
    width: 100%;
    margin-bottom: 20px;
}
  
.res-row {
    display: table-row;
}

.res-cell {
    display: table-cell;
    /*border: 1px solid #ccc;*/
    padding: 5px;   
}
  
  /* Apply flex properties to table cells */
.res-flex-row {
    display: inline-flex;
    flex-wrap: wrap; /* Allow items to wrap to a new line */
}
  
.res-flex-item {
    flex: 1 0 auto; /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: auto */
    /*min-width: 40px; */ /* Set minimum width for each cell */
    margin: 5px; /* Add spacing between cells */
}

.cloto1 {
 background-color: #15AADB;
}

.cloto1c {
    background-color: rgb(241, 88, 88);
}

.cloto2 {
    background-color: #375ACF;
}

.bordered {
    border: 1px solid #ccc;
}