/* -- DEBUT -- Definition normalisation de la page*/

body,
html {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

input:focus,
textarea:focus {
    /* Pseudo-classe :focus ==> Désactivation du focus de base (border en bleu quand input sélectionné */
    outline: none;
}

*::selection {
    /* Pseudo-élément ::selection ==> Changement de la couleur de fond et de caractère pour la sélection conforme à la charte graphique */
    background-color: rgb(223, 157, 158);
    color: rgb(32, 102, 107);
}

input::placeholder,
textarea::placeholder {
    /* Pseudo-élément ::placeholder ==> Changement couleur des caractères (initial en gris)  */
    color: rgb(223, 157, 158);
}


/* -- FIN -- Definition normalisation de la page*/


/* -- DEBUT -- Configuration commune à tous les types d'écran*/

#cont_loader {
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: flex-start;
    padding-top: 10%;
    justify-content: center;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.menu_boutonimage {
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.btn_menu {
    width: 100%;
}

.btn_menu:hover {
    cursor: pointer;
}

.menu_icone {
    text-align: end;
    margin-top: auto;
    margin-bottom: auto;
    visibility: hidden;
}

.menu_compteur,
.menu_pseudo {
    text-align: start;
    visibility: hidden;
}

a {
    text-decoration-line: none;
}

.separateur0 {
    /* Definition d'un séparateur d'élément permettant d'aérer la page en remplacement du <br> */
    min-height: 2vh;
}

.separateur1 {
    /* Definition d'un séparateur d'élément permettant d'aérer la page en remplacement du <br> */
    min-height: 5vh;
}

.separateur2 {
    /* Definition d'un séparateur d'élément permettant d'aérer la page en remplacement du <br> */
    min-height: 10vh;
}


/* -- FIN -- Configuration commune à tous les types d'écran*/


/* -- DEBUT -- Intégration de police de caractère particulière */

@font-face {
    /* police titre 1 bannière et titre paragraphe texte et formulaires */
    font-family: "almafi";
    src: url(../police/Amalfi\ Coast.ttf);
}

@font-face {
    /* police titre 2 bannière */
    font-family: "stencil";
    src: url(../police/stencil.ttf);
}

@font-face {
    /* police boutons */
    font-family: "chalk_hand";
    src: url(../police/Chalk-hand-lettering.otf);
}

@font-face {
    /* police flèche AvAr Carrousel */
    font-family: "kgarrows";
    src: url(../police/KGArrows.ttf);
}

@font-face {
    /* police corps de texte */
    font-family: "cambria";
    src: url(../police/Cambria.ttf);
}

@font-face {
    /* police titre h2 */
    font-family: "crypob";
    src: url(../police/Filmcrypob.ttf);
}


/* -- FIN -- Intégration de police de caractère particulière */

.msgalerte {
    /* pour message dans modal si PB */
    color: rgb(16, 81, 150);
    font-weight: bold;
}

.rouge {
    border: 2px solid red;
}

.vert {
    border: 2px solid green;
}

.black {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: black;
    font-style: oblique;
}

.red {
    font-family: Arial, Helvetica, sans-serif;
    color: red;
    font-style: normal;
    font-weight: bold;
}

.retrait1 {
    margin-left: 1em;
    margin-top: 0;
    margin-bottom: 0;
}

.infoformation {
    margin-top: 0;
    margin-bottom: 0;
    color: blue;
    font-weight: bold;
}

.enavant {
    color: black;
    font-weight: bold;
}

.acompleter {
    color: red;
    font-weight: bold;
}

.pinkinfo {
    font-weight: bold;
    color: rgb(223, 157, 158);
}

.plusdinfos {
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
}

#imgarrow_contact,
#imgarrow_connect,
#imgarrow_mdpoublie {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow {
    max-width: 100%;
    max-height: 100%;
}

#btn_user:hover {
    cursor: pointer;
}

#souvenirmeconnect {
    float: left;
}

#input_souvenirmeconnect label {
    font-style: oblique;
    vertical-align: middle;
}

#souvenirmeconnect:hover,
#input_souvenirmeconnect label:hover {
    cursor: pointer;
    color: rgb(227, 159, 158);
    font-weight: bold;
}