/* CSS global*/
:root {
    --color-primary: #273447;
    --color-secondary: #5c6f94;

    --font-color: #273447;
    --font-color-secondary: #303030;
    --font-color-valid: #93bc56;

    --font-color-info: #273447;
    --bg-color-gris: #a5a5a5;
    --bg-color: #f9edcb;

    --border-radius: 0.25em;
    --form-bg-color: #f9edcb;
    --hover-color: #314157;
    --highlight-color: yellow;
    --box_shadow: 1px 1px 5px #555;
    /*     --color-primary: #fd8f00;
    --color-secondary: #909090;
    --font-color: #400d0f;
    --font-color-secondary: #7a695a;
    --font-color-valid: #93bc56;
    --font-color-info: #fd8f00;
    --bg-color-gris: #e4e0e0;
    --border-radius: 0.25em;
    --form-bg-color: white;
    --hover-color: #fcc57d;
    --highlight-color: yellow;
    --box_shadow: 1px 1px 5px #555; */

    --radial-gradient: ellipse at bottom, rgba(255, 255, 255, 0.5) 0%, rgba(9, 10, 15, 2) 100%;
    --background-url: url("../img/backgound_honeycomb.jpg");
    --font-family: 'default-font', Arial, Calibri;
    --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-color-gris);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    border: 1px solid var(--bg-color-gris);
}

@font-face {
    font-family: 'default-font';
    font-style: normal;
    /* src: url(../font/Candara.ttf) format('ttf'), url(../font/Candara.woff2) format('woff2'), url(../font/Candara.eof) format('embedded-opentype'); */
    src: url(../font/avenir/Avenir-Book.ttf) format('ttf'), url(../font/avenir/Avenir-Regular.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'default-font Light';
    font-style: normal;
    /* src: url(font/CANDARAL.TTF) format('ttf'), url(font/Candara.woff2) format('woff2'), url(font/Candara.eof) format('embedded-opentype'); */
    src: url(../font/avenir/Avenir-Light.ttf) format('ttf'), url(../font/avenir/Avenir-Light.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'default-font Bold';
    font-style: normal;
    src: url(../font/avenir/Avenir-Black.ttf) format('ttf'), url(../font/avenir/Avenir-Black.woff2) format('woff2');
    font-display: swap;
}

textarea {
    font-family: var(--font-family);
}



body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color-gris);
    color: var(--font-color);
    font-size: 1.1em;
    text-shadow: var(--text-shadow);
    /* overflow: scroll; */
    /* scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-secondary); */
}

a {
    color: var(--font-color);
    text-decoration: none;
}

a:hover {
    color: var(--font-color-secondary);
    text-decoration: none;
}


input,
button,
select,
textarea,
.inputFileLabel {
    writing-mode: horizontal-tb !important;
    text-rendering: auto;
    /*color: -internal-light-dark(black, white);*/
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    margin: 0px 2px 4px;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 16px;
    padding: 5px;
}

p {
    text-align: justify;
    color: var(--font-color-secondary);
    line-height: 1.3em;
}

small {
    color: var(--color-secondary);
    font-style: italic;
}

/* Inputs textuels typiquement utilisés dans les formulaires*/
textarea,
select,
input[type=text],
input[type=tel],
input[type=password],
input[type=url],
input[type=search],
input[type=email],
input[type=number] {
    border: 1px solid var(--color-secondary);
    color: var(--font-color);
    cursor: text;
}

/* Inputs nécessitants un upload de fichier*/

input[type=file] {
    display: none;
}

.inputFileLabel,
input[type=image] {
    background-color: var(--font-color-info);
    width: auto;
    margin: 0px 2px 20px;
}


/* Inputs liés aux dates (+ timer et color)*/

input[type=date],
input[type=month],
input[type=datetime-local],
input[type=week],
input[type=time],
input[type=color] {
    color: var(--font-color);
    background-color: white;
    border: 1px solid var(--color-secondary);
    margin: 0px 2px 4px;
    padding: 3px 3px 3px 5px;
    width: auto;
    cursor: pointer;
}



/* Inputs non utilisés*/

input[type=color] {
    background-color: var(--bg-color-gris);
    width: 140px;
}

input[type=range] {
    display: block;
    cursor: pointer;
}

/*Inputs boutons*/

input[type=button],
button,
input[type=reset],
input[type=submit],
input[type=image],
.inputFileLabel {
    color: white;
    padding: 1em;
    width: auto;
    /*margin-bottom: 20px;*/
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border: none;
    font-weight: 700;

}

input[type=button]:hover,
button:hover,
input[type=reset]:hover,
input[type=submit]:hover,
input[type=image]:hover,
.inputFileLabel:hover,
.input_valide:hover {
    box-shadow: var(--box_shadow);
    /* background-color: var(--hover-color) !important; */
    transition: all 0.2s;
}

.input_btn_annule {
    background-color: var(--font-color-info) !important;
    border-color: var(--font-color-info) !important;
}


input[type=button] {
    background-color: var(--font-color-valid);
    border-color: var(--font-color-valid);
    /*width: 100px;*/
}

button {
    background: var(--font-color-info);
    display: inline-block;
    transition: none 1s ease 0s;
}

input[type=reset] {
    background-color: var(--color-primary);
}

input[type=submit] {
    background-color: var(--font-color-valid);
}


input:focus,
textarea:focus,
select:focus {
    outline: 1px solid var(--color-secondary);
}



select {
    cursor: pointer;
}

select:focus {
    border-color: var(--font-color);
}

select option:hover {
    background-color: var(--font-color-info);
}

/*btn valide un input*/
.input_valide {
    padding: 6px;
    border-radius: 0 5px 5px 0;
    margin-left: -9px;
    background-color: var(--color-primary);
    color: var(--form-bg-color);
    cursor: pointer;
}



/*Inputs cases cliquables chekbox et radio*/
/*Checkbox*/
.inputCheck {
    --border: #D1D5DB;
    --cursor: #89909E;
    --checked: #1771E6;
    --checked-cursor: #FFF;
    position: relative;
}

input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.inputCheck label {
    display: grid;
    grid-template-columns: 2em 1fr;
    grid-template-areas: "checkbox label";
    gap: .7em;
    margin-bottom: 10px;
}

.inputCheck label::before,
.inputCheck label::after {
    grid-area: checkbox;
    content: '';
    display: block;
    margin-top: .1em;
    cursor: pointer;
}

.inputCheck label::before {
    width: 100%;
    height: 1em;
    border-radius: 1em;
    background-color: var(--checked-cursor);
    border: solid 1px var(--border);
    transition: background-color .3s, border-color .3s, box-shadow .3s;
    cursor: pointer;
}

.inputCheck label::after {
    position: relative;
    left: 2px;
    top: 2px;
    width: calc(1em - 2px);
    height: calc(1em - 2px);
    border-radius: 50%;
    background-color: var(--cursor);
    transition: background-color .3s, transform .3s;
    cursor: pointer;
}

.inputCheck input:checked+label::before {
    background-color: var(--checked);
    border-color: var(--checked);
    cursor: pointer;
}

.inputCheck input:checked+label::after {
    background-color: var(--checked-cursor);
    transform: translateX(1em);
    cursor: pointer;
}

.inputCheck input:focus+label::before {
    box-shadow: 0 0 0 0.2em #C4DBF9;
    border-color: var(--checked);
    cursor: pointer;
}


/*Radio*/
.inputRadioLabel {
    display: block;
    position: relative;
    padding-left: 2em;
    padding-top: 0.5em;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    /*impacte taille du label et des boutons*/

    user-select: none;
}

input[type=radio] {
    /*cache le bouton par défaut*/
    display: none;
}

.inputRadioCheck {
    /*se charge de créer l'autre bouton*/
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    height: 1em;
    width: 1em;
    background-color: white;
    border-radius: 50%;
    border: 1px solid var(--font-color-info);
}

.inputRadioLabel:hover input~.inputRadioCheck {
    background-color: var(--hover-color);
}

.inputRadioLabel input:checked~.inputRadioCheck {
    background-color: var(--font-color-info);
}

.inputRadioCheck:after {
    content: "";
    position: absolute;
    display: none;
}

.inputRadioLabel input:checked~.inputRadioCheck:after {
    display: block;
}

.inputRadioLabel .inputRadioCheck:after {
    top: 0.25em;
    left: 0.25em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--bg-color-gris);
}

.btn-disable,
.btn-disable:hover {
    color: var(--color-secondary) !important;
    background-color: var(--bg-color-gris) !important;
    cursor: default;
}

.btn-disable,
.btn-disable:hover {
    color: var(--color-secondary) !important;
    background-color: var(--bg-color-gris) !important;
    border: var(--color-secondary);
    cursor: default;
}

.btn-info-inv {
    color: var(--font-color-info) !important;
    background-color: white !important;
}

.btn-info-inv:hover {
    background-color: var(--font-color-info) !important;
    color: white !important;
}


/* ///////////////////////////////// */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.container_objet {
    /*width: 300px;*/
    background: white;
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    padding: 20px;
}