@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,300;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;;
}
html{
    height: 100%;
    background: var(--bgd-fade);
}
a{
    text-decoration: none;
}

input,
input::placeholder {
    font: 0.8rem/3 sans-serif;
}




.input-file {
    position: relative;
    overflow: hidden;
}

.input-file input[type='file'] {
    cursor: pointer;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    line-height: 23px;
    transform: scale(5);
    opacity: 0;
}



:root {
    --color-official: rgb(175, 38, 14);
    --color-official-fade: rgb(172, 137, 92);
    --color-official-x-fade: rgb(224, 207, 206);
    --white-official: rgb(255, 255, 255);
    --orange-official: rgba(255, 196, 58, 1);
    --yellow-official: rgb(241, 241, 151);
    --red-official: rgb(175, 38, 14);
    --blue-official: rgb(52, 52, 186);
    --black-official: rgb(0, 0, 0);
    --black-light: rgb(33, 33, 33);
    --gray-official: gray;
    --gray-dark: rgb(67, 66, 66);
    --green-official: rgb(113, 191, 89);
    --orange-dark: #ff7b05;
    --bgd-fade: rgb(245, 233, 233);
    --font-family-title: Impact,
        Haettenschweiler,
        'Arial Narrow Bold',
        sans-serif;
}
.padding-zero{
    padding: 0;
}
.color-official{
    color: var(--color-official);
}
.bgd-official {
    background: var(--color-official);
}

.btn-official, .btn-official-small{
    background: var(--black-official);
    color: var(--white-official);
    width: 100%;
}

.btn-official{
    padding: 10px; 
    font-size: 90%;
}
.btn-official-small{
    padding: 5px;
    font-size: 90%;
}
.btn-official:hover, .btn-official-small:hover {
    background: var(--color-official);
    color: var(--white-official);
}

.btn-official-inverse {
    background: var(--color-official);
    color: var(--white-official);
    font-size: 90%;
    width: 100%;
    padding: 10px;
}

.btn-official-inverse:hover {
    background: var(--black-official);
    color: var(--white-official);
}

.btn-official-neutral {
    background: var(--white-official);
    color: var(--red-official);
    font-size: 90%;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
.btn-official-neutral {
    background: var(--white-official);
    color: var(--red-official);
    font-size: 90%;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}

.btn-official-neutral:hover {
    text-decoration: underline;
}

.page{
    margin-top: 100px;
    background: var(--bgd-fade);
}

/* debut du responsive */

@media screen and (min-width: 1920px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1919px) and (min-width: 1366px) {
   
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1365px) and (min-width: 1280px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1279px) and (min-width: 1112px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1111px) and (min-width: 1080px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1079px) and (min-width: 1024px) {
    
}

/* ------------------------------------------ partie mobile --------------------------------------------------------- */

@media screen and (max-width: 1023px) and (min-width: 960px) {
    
}




/* ------------------------------------------ partie mobile --------------------------------------------------------- */

@media screen and (max-width: 959px) and (min-width: 834px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 833px) and (min-width: 800px) {
    
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 799px) and (min-width: 768px) {
    
}

/* --------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) and (min-width: 736px) {
    
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 735px) and (min-width: 667px) {
   
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 666px) and (min-width: 568px) {
    
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 567px) and (min-width: 414px) {
    
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 413px) and (min-width: 375px) {
    
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 374px) and (min-width: 320px) {
    
}

/* ---------------------------------------------------------------------------------------------- */

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