*, ::before,::after{
    padding: 0;
    margin: 0;
    outline: none;
    border:none;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    color:#fafafa;
    /* box-shadow: 0 0 0 3px red; */
}
html{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 80%;
    /* https://www.youtube.com/watch?v=T8w0mZxc2E0 */
    background-color: #131416;
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
    }

input{     
    /* Les inputs ne prennent pas la police par défaut de la balise html */  
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    outline:none;
    outline-width: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    }
textarea{
    /* Les textarea ne prennent pas la police par défaut de la balise html */  
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*-----------------------------*/
/*           Bandeau1          */
/*-----------------------------*/
/*                             */
/*Structure                    */
/*---------                    */
/*                             */
/*bandeau1                     */
/*   -> Langue                 */
/*   -> bloc_btn_bandeau1 */

.bandeau1{
        display: flex;
        justify-content: right;
        align-items: center;
        flex-wrap: wrap;
}
.langue ul{
    display: flex;
    padding: 0.5rem;
}
/* Espacement entre les li */
.langue ul li{
    margin: 0 0.5rem;
}
/* Mise en forme du contour des a */
.langue ul li a{
    display: flex;
    justify-content: center;
    padding: 0.3rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    transition: 0.2s;
}
/* Mise en forme du drapeau */
.langue ul li a img{
    margin: 0 0.5rem 0 0 ;
    width: 1rem;
}
/* Mise en forme du texte : FR ou NL ou EN */
.langue ul li a span{
    color: #fafafa;
}
/* Animation au survol */
.langue ul li a:hover{
    border: 1px solid #fafafa;
}
/* Changement de la couleur si active */
.langue ul li a.active{
    background-color: #fafafa;
}
.langue ul li a.active span{
    color:#131416;
}

/* Bloc avec les boutons Incription et Connexion */
.bloc_btn_bandeau1{
    display: flex;
    flex-wrap: wrap;
    transition: 0.2s;
}
.bloc_btn_bandeau1 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.bloc_btn_bandeau1 ul li{
    padding: 0.5rem 2rem;
}
.bloc_btn_bandeau1 a{
    padding: 0.4rem 0.4rem;
    border-radius: 0.5rem;
    background-color: transparent;
    color: #fafafa;
    transition: 0.2s;
}
/* Boutons Incription et Connexion quand on n'est pas connecté */
.bloc_btn_bandeau1 a#bt_inscri:hover,.bloc_btn_bandeau1 a#bt_inscri.active {
    outline: 2px solid #fafafa;
}
.bloc_btn_bandeau1 a#bt_con:hover,.bloc_btn_bandeau1 a#bt_con.active  {
    outline: 2px solid #fafafa;
}
/* Boutons Mon profil et Se déconnecter quand on est connecté */
.bloc_btn_bandeau1 a#bt_profil:hover,.bloc_btn_bandeau1 a#bt_profil.active {
    outline: 2px solid #fafafa;
}
.bloc_btn_bandeau1 a#bt_decon:hover,.bloc_btn_bandeau1 a#bt_decon.active  {
    outline: 2px solid #fafafa;
}

/*---------------------*/
/*    Bandeau 2        */
/*---------------------*/
/*                     */
/*Structure            */
/*---------            */
/*                     */
/*bandeau2             */
/*   -> logotitre      */
/*       -> logo       */
/*       -> titre      */
/*   -> Blocmenu       */
/*       -> menu       */

.bandeau2{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background-image: linear-gradient(
        0deg,
        hsl(43deg 99% 49%) 0%,
        hsl(41deg 74% 40%) 2%,
        hsl(39deg 58% 29%) 5%,
        hsl(36deg 35% 16%) 9%,
        hsl(220deg 7% 8%) 16%,
        hsl(220deg 7% 8%) 30%,
        hsl(220deg 7% 8%) 68%,
        hsl(220deg 7% 8%) 84%,
        hsl(36deg 35% 16%) 91%,
        hsl(39deg 58% 29%) 95%,
        hsl(41deg 74% 40%) 98%,
        hsl(43deg 99% 49%) 100%
        );
    padding: 1rem 0;
    border: 1px solid;
    border-color: #bbb transparent #bbb transparent;
}

.icone_et_titre{
    display:flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0.5rem;
}
/* Icone */
.icone_et_titre a .icone img{
    height: 6rem;
}
/* Titre */
.icone_et_titre a .titre{
    font-size: 1.7rem;
    padding: 0.5rem 0.5rem;
}
.blocmenu{
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
}
.blocmenu ul{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.blocmenu ul li{
    display: flex;
    align-items: center;
}
.blocmenu ul li a{
    /* Mise en forme du texte du menu */
    color: #fafafa;
    font-size: 1.3rem;
    padding: 0.5rem 0.5rem;
    margin: 0 1rem;
    border-radius: 0.5rem;
}
/* Contour sur le bord de l'élément de menu actif */
/* Animation du menu bord apparait au survol */
.blocmenu ul li a.active,.blocmenu ul li a:hover{
    outline: 2px solid #fafafa;
    transition: 0.2s;
}

/*---------*/
/* Accueil */
/*---------*/

.corps_accueil{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-grow: 1;
    padding: 2rem 1rem;
}
.corps_accueil_col{
    display: flex;
    flex-direction: column;
    height: auto;
    transition: all 0.3s ease;
    /* background-color: aqua; */
}
.corps_accueil_col:hover{
    filter: brightness(1.1);
    cursor: pointer; /* Change le curseur en main */
}
.image{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* background-color: brown; */
}
.corps_accueil_col img{
    width: auto;
    padding: 0 1rem;
    /* background-color: chartreuse; */
    /* box-shadow: 10px 5px 20px #131416; */
}
.corps_accueil_col p{
    text-align: center;
    font-size: 1.7rem;
    padding: 1rem;
    /* background-color: rgb(153, 0, 255); */
    /* box-shadow: 10px 5px 20px #131416; */
}
/* .lien_dessous {
    display: flex;
    height: 3rem;
    justify-content: center;
    align-items:center;
}
.lien_dessous a{
    font-size: 1.5rem;
    text-shadow: 5px 5px 5px #000;
} */

/* --------- */
/*  Livre    */
/* --------- */

.corps_livre{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-grow: 1; */
    flex-wrap: wrap;
    padding: 1rem;
}
.bloc_central_livre{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.bloc_livre{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    /* align-items:flex-center; */
    padding: 2rem 0;
}
.corps_livre_col1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem;
    min-width: 350px;
}
.corps_livre_col1 img{
    max-height: 500px;
}
.corps_livre_col2{
    display: flex;
    flex-direction: column;
    max-width: 700px;
    padding: 0 1rem;
}

/* Div bouton "Commander maintenant" */
.commander_maintenant{
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}
/* Bouton Obtenir le livre */
/* .corps_livre_obtenir .btn_obtenir{
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
    text-align: center;
} */
/* Bouton "Commander maintenant" */
.commander_maintenant a{
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1rem;
    background-color: #f7b101;
    color: #131416;
}
/* Bouton "Commander maintenant" survol */
.commander_maintenant a:hover{
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color:#fafafa;
}
.corps_livre_desc{
    /* flex-grow: 1; */
    /* max-width: 50rem; */
    font-size: 1.3rem;
    padding: 1rem 0.5rem;
}
.corps_livre_desc p{
    /* text-align: center; */
    font-size: 1.5rem;
    font-weight: bold;
}
/* .corps_livre_obtenir .btn_obtenir:hover a{
    color:#fafafa
} */
/* Div bouton Table des matières */
.corps_livre_afficher_extrait{
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}
.corps_livre_afficher_extrait a{
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
    color: #fafafa;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    border: 1px solid #fafafa;
}
.corps_livre_afficher_extrait a:hover{
    box-shadow: 0rem 0rem 0.3rem 0.1rem #fafafa;
}

/* ------------------------------ */
/*      Afficher un extrait       */
/* ------------------------------ */
  
.content_extrait {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 1rem;
}
.box_extrait{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    padding: 1rem;
    width: 100%;
}
.extrait_ok {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}
/* Bouton OK */
.extrait_ok a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton OK survol */
.extrait_ok a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}
.extrait_iframe{
    width: 100%;
}

/* --------- */
/*  Photos   */
/* --------- */

/* Boite Titre + formulaire Photos */
.contentBox_photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}
/* Formulaire complet : Titre + Champs */
.formBox_photos { 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}
/* Titre Entrez la référence du livre ? */
.formBox_photos p {
    /* color: #fafafa; */
    font-size: 1.5rem;
    padding: 1rem;
}

/* Message d'erreur si les champs ne sont pas remplis */
.box_message_erreur_photos{
    display: flex;
    justify-content: center;
}
.message_erreur_photos{
    margin-bottom: 1rem;
    color:#fafafa;
    padding: 1rem;
    border: 2px solid red;
    font-size: 1.3rem;
    border-radius: 1rem;
}

.formBox_photos form{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem;
}

/* Div du formulaire contenant les Label + les inputs 'Type : ______'*/

/* Type : Label */
.inputBox_photos_type label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
/* Type : Input */
.inputBox_photos_type input { 
    width: 6rem;
    padding: 0.2rem;
    margin-right:2rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: transparent;
    border-radius: 1rem;
}
/* Date : Label */
.inputBox_photos_date label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
/* Date : Input */
.inputBox_photos_date input { 
    width: 6rem;
    padding: 0.2rem;
    margin-right:2rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: transparent;
    border-radius: 1rem;
}

/* Box Label + 'E : __' */
.inputBox_photos_e { 
    margin: 0 2rem 1rem 0;
}
/* Texte : E */
.inputBox_photos_e label { 
    cursor:pointer;
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    display: inline-block;
}
.toggle-content{
    cursor:pointer;
    transform: translate(0rem,0.5rem);
    width: 2rem;
    height: 2rem;
    border: 1px solid #f7bf00;
    border-radius: 1rem;
}
.inputBox_photos_e input[type="checkbox"] { 
    display: none;
}
.inputBox_photos_e input[type="checkbox"]:checked + .toggle-content{ 
    background:#f7bf00;
}
/*Checkbox E */
input.chk_photos { 
    margin:0;
    cursor: pointer;
}

/* Variété : Label*/
.inputBox_photos_variete label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
/* Variété : Input */
.inputBox_photos_variete input { 
    width: 4.5rem;
    padding: 0.2rem;
    margin-right:2rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: transparent;
    border-radius: 1rem;
}

/* Bouton Voir les photos */
.inputBox_photos_bouton_voir input{ 
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Voir les photos survol */
.inputBox_photos_bouton_voir input:hover{ 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}


.corps_photos_resultats{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: dodgerblue; */
}
.affichage_exemplaire_num{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    font-size: 1.5rem;
    /* background-color: #f7bf00; */
}
/* Exemplaire 1 / 3 */
.affichage_exemplaire_photos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    /* background-color: rgb(140, 187, 93); */
}

/* Image petite taille */
.affichage_exemplaire_photos a img{
    width:25rem;
    padding: 0 0.5rem 1rem 0.5rem;
    cursor: zoom-in;
    /* background-color: rgb(176, 104, 164); */
}
.lightbox {
	display: none;
}
.lightbox:target {
	display: flex;
    justify-content: center;
    align-items:center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
}
.lightbox .viewer img{
    width: 100%;
    height: 90vh;
    padding: 1rem;
    object-fit: contain;
    cursor:zoom-out;
    /* background-color: chocolate; */
}

.affichage_auction{
    /* display: flex;
    flex-direction: row;
    justify-content: center; */
    padding: 0rem 0.5rem 1rem 0.5rem;
    /* background-color: rgb(26, 185, 34); */
}
/* Affichage de l'Auction */
.affichage_auction p{
    text-align:center;
    font-style: italic;
    font-size: 1.3rem;
    /* padding: 1rem; */
}

/* ------------ */
/*  Zoom image  */
/* ------------ */

.content_zoom_image {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 2rem 1rem;
}
.box_zoom_image {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}
.zoom_image_img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* width: auto; */
    /* max-height: 40rem; */
    padding: 0.5rem;
}
.zoom_image_img img {
    /* width: 100%; */
    max-height: 50rem;
    object-fit: contain;
    /* max-width: 50rem;
    max-height: 50rem; */
    /* vertical-align:top; */
}
.zoom_image_ok {
    padding: 2rem;
}
/* Bouton OK */
.zoom_image_ok a { 
    padding: 0.8rem;
    width: 8rem;
    text-align: center;
    font-size: 1.5rem;
    color: #131416;
    border-radius: 1rem;
    background-color: #f7b101;
}
/* Bouton OK survol */
.zoom_image_ok a:hover { 
    filter: brightness(1.1);
}


/* ------------------ */
/*  ? Aide référence  */
/* ------------------ */

.content_aide_reference {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 2rem 1rem;
}
.box_aide_reference {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}
.aide_reference_img {
    padding: 0.5rem;
}
.aide_reference_img img {
    width: 100%;
    height: auto;
    vertical-align:top;
}
.aide_reference_ok {
    padding: 2rem;
}
/* Bouton OK */
.aide_reference_ok a { 
    padding: 0.8rem;
    width: 8rem;
    text-align: center;
    font-size: 1.5rem;
    color: #131416;
    border-radius: 1rem;
    background-color: #f7b101;
}
/* Bouton OK survol */
.aide_reference_ok a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}


/* --------- */
/*  Contact  */
/* --------- */

.contentBox_contact {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Contact */
.box_contact {
    text-align: center;
    padding: 2rem;
}

/* Titre Contact */


/* Div : Votre Email */
.box_contact_email {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Votre Email */
.box_contact_email span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}

/* Div : Sujet */
.box_contact_sujet_message {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0.5rem 0;
}
/* Titre : Sujet */
.box_contact_sujet_message span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Sujet */
.box_contact_sujet_message input { 
    width: 20rem;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input du sujet */
.box_contact_sujet_message input:hover { 
    outline: 2px solid #f7c23e;
}

/* Div : Contenu */
.box_contact_contenu_message {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Titre : Contenu */
.box_contact_contenu_message span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Contenu du message */
.box_contact_contenu_message textarea {
    width: 20rem;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    resize: none;
}
/* Survol Contenu du message */
.box_contact_contenu_message textarea:hover { 
    outline: 2px solid #f7c23e;
}

/* Div : Pièces jointes */
.box_contact_pieces_jointes {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Pièces jointes */
.box_contact_pieces_jointes span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}

/* Texte : Fichiers sélectionnés */
.box_contact_pieces_jointes p { 
    font-size: 1.3rem;
    padding: 0.5rem 0 1rem ;
}

/* Div Bouton Envoyer */
.box_contact_envoyer { 
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 2rem 0;
}
/* Bouton Envoyer */
.box_contact_envoyer input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Envoyer survol */
.box_contact_envoyer input:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}


/* ----------- */
/* Inscription */
/* ----------- */


.contentBox_inscr {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Formulaire Inscription */
.formBox_inscr { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre 'Inscription' */
.formBox_inscr h2 { 
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div : Déjà un compte ? Connectez-vous */
.inputBox_inscr_connectez_vous {
    display: flex;
    justify-content: left;
    padding: 1rem 0;
}
/* Texte : Déjà un compte */
.inputBox_inscr_connectez_vous p { 
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}
/* Texte : Connectez-vous */
.inputBox_inscr_connectez_vous a { 
    font-size: 1.3rem;
    color: #f7b101;
}
/* Texte : Connectez-vous hover */
.inputBox_inscr_connectez_vous a:hover { 
    color: #f7c23e;
}

/* Div Langue de communication */
.inputBox_inscr_langue_com{ 
    display: flex;
    justify-content: left;
    padding: 1rem 0;
}
/* Titre 'Langue de communication' */
.inputBox_inscr_langue_com p {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}
/* Liste déroulante langue de communication */
.inputBox_inscr_langue_com select {
    display: flex;
    align-items: center; 
    background-color: transparent;
    border: 1px solid #f7b101;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
}
/* Liste déroulante langue de communication focus */
.inputBox_inscr_langue_com select:focus {
    border: 1px solid #f7c23e;
}
/* Liste déroulante langue de communication Hover*/
.inputBox_inscr_langue_com select:hover {
    border: 1px solid #f7c23e;
}
/* Liste déroulante langue de communication couleur de fond */
.inputBox_inscr_langue_com select option{ 
    background-color: #131416;
}

/* Box pour les civilités */
.inputBox_inscr_civilite { 
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 1rem 0;
}
/* Texte pour Titre Civilité */
.inputBox_inscr_civilite .civilite{
    font-size: 1.3rem;
    padding: 0 3rem 0 0;
}
/* Texte pour M. */
.inputBox_inscr_civilite .monsieur{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour M. */
.inputBox_inscr_civilite .civi_homme { 
    /* Intérieur du cercle du label qui sert de checkbox pour M. */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour M. */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour M. */
.inputBox_inscr_civilite input[type="radio"]:checked + .civi_homme{ 
    background-color: #f7b101
}
/* Texte pour Mme. */
.inputBox_inscr_civilite .madame{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour Mme. */
.inputBox_inscr_civilite .civi_femme { 
    /* Intérieur du cercle du label qui sert de checkbox pour Mme. */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour Mme */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour Mme*/
.inputBox_inscr_civilite input[type="radio"]:checked + .civi_femme{ 
    background-color: #f7b101
}
/* Texte pour X */
.inputBox_inscr_civilite .x{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour X */
.inputBox_inscr_civilite .civi_x { 
    /* Intérieur du cercle du label qui sert de checkbox pour X */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour X */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour X */
.inputBox_inscr_civilite input[type="radio"]:checked + .civi_x{ 
    background-color: #f7b101
}
/* Boutons radio masqués */
.inputBox_inscr_civilite input[type="radio"] { 
    display: none;
}

/* Div : Nom */
.inputBox_inscr_nom {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Nom */
.inputBox_inscr_nom span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Nom  */
.inputBox_inscr_nom input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input du Nom */
.inputBox_inscr_nom input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input du Nom */
.inputBox_inscr_nom input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Prénom */
.inputBox_inscr_prenom {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Prénom */
.inputBox_inscr_prenom span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Prénom  */
.inputBox_inscr_prenom input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input du Prénom */
.inputBox_inscr_prenom input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input du Prénom */
.inputBox_inscr_prenom input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Email */
.inputBox_inscr_email {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Email */
.inputBox_inscr_email span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Email  */
.inputBox_inscr_email input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input de l'Email */
.inputBox_inscr_email input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input de l'Email */
.inputBox_inscr_email input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Mot de passe */
.inputBox_inscr_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Mot de passe */
.inputBox_inscr_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Mot de Passe*/
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_inscr_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Mot de Passe*/
.inputBox_inscr_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Mot de Passe*/
.inputBox_inscr_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Mot de Passe*/
.inputBox_inscr_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye */
.inputBox_inscr_mdp label .password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye */
.inputBox_inscr_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye */
.inputBox_inscr_mdp label .password-icon .feather-eye-off {
    display: none;
}


/* Div : Confirmer Mot de passe */
.inputBox_inscr_confirme_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Confirmer Mot de passe */
.inputBox_inscr_confirme_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Confirmer Mot de Passe */
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_inscr_confirme_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label .password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye Confirmer Mot de Passe */
.inputBox_inscr_confirme_mdp label .password-icon .feather-eye-off {
    display:none;
}

/* Div bouton S'inscrire */
.inputBox_inscr_s_inscrire { 
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
/* Bouton S'inscrire */
.inputBox_inscr_s_inscrire input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton S'inscrire survol */
.inputBox_inscr_s_inscrire input:hover {
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}
.message_erreur_inscr{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}



/* --------- */
/* Connexion */
/* --------- */

/* Formulaire connexion basé sur https://www.youtube.com/watch?v=ShATlTlOV1U */
    
.contentBox_con {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Formulaire Connexion */
.formBox_con { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Connexion */
.formBox_con h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div : Vous n'avez pas de compte ? Incrivez-vous */
.inputBox_con_pas_de_compte_inscrivez_vous {
    display: flex;
    justify-content: left;
    padding: 1rem 0;
}
/* Texte : Vous n'avez pas de compte ? */
.inputBox_con_pas_de_compte_inscrivez_vous p {
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}
/* Texte : Incrivez-vous*/
.inputBox_con_pas_de_compte_inscrivez_vous a { 
    font-size: 1.3rem;
    color: #f7b101;
}
/* Texte : Incrivez-vous focus */
.inputBox_con_pas_de_compte_inscrivez_vous a:hover { 
    color: #f7c23e;
}

/* Div : Email */
.inputBox_con_email {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Email */
.inputBox_con_email span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input de l'Email */
.inputBox_con_email input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input de l'Email */
.inputBox_con_email input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input de l'Email */
.inputBox_con_email input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Mot de passe */
.inputBox_con_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Mot de passe */
.inputBox_con_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Mot de Passe*/
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_con_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Mot de Passe*/
.inputBox_con_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Mot de Passe*/
.inputBox_con_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Mot de Passe*/
.inputBox_con_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye */
.inputBox_con_mdp label .password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye */
.inputBox_con_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye */
.inputBox_con_mdp label .password-icon .feather-eye-off {
    display: none;
}

/*Div : Se souvenir de moi */
.inputBox_con_souvenir { 
    padding: 1rem 0;
    font-size: 1.3rem;
}
/* Label du radio bouton qui sert de radio bouton + texte Se souvenir de moi */
.inputBox_con_souvenir label{ 
    cursor:pointer;
}
/* Label du radio bouton qui sert de radio bouton*/
.toggle-souv{
    display : inline-block;
    cursor:pointer;
    transform: translate(0rem,0.2rem);
    width: 1rem;
    height: 1rem;
    border: 1px solid #f7b101;
    border-radius: 0.5rem;
}
/* Radio bouton masqué */
.inputBox_con_souvenir input{ 
    display: none;
}
/* Survol du Label du radio bouton (en forme de cercle) qui sert de radio bouton*/
.toggle-souv:hover{
    border: 2px solid #f7c23e;
}
 /* Label (en forme de cercle) qui suit le radio bouton checked */
.inputBox_con_souvenir input:checked + .toggle-souv{ 
    background-color: #f7b101;
}
 /* Survol du Label (en forme de cercle) qui suit le radio bouton checked */
.inputBox_con_souvenir input:checked + .toggle-souv:hover{ 
    background-color: #f7c23e;
}

/* Div : Mot de passe oublié ? */
.inputBox_con_oublie { 
    padding: 1rem 0;
}
/* Texte : Mot de passe oublié */
.inputBox_con_oublie a { 
    font-size: 1.3rem;
    color: #f7b101;
}
/* Survol texte : Mot de passe oublié */
.inputBox_con_oublie a:hover { 
    color: #f7c23e;
}

/* Div bouton Se connecter */
.inputBox_con_se_connecter {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Bouton Se connecter */
.inputBox_con_se_connecter input {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}

/* Bouton Se connecter survol */
.inputBox_con_se_connecter input:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

/* Message erreur en rouge au-dessus du formulaire */
.message_erreur_con{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}



/* ----------- */
/* Déconnexion */
/* ----------- */
  
.content_deconnexion {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Déconnexion */
.box_deconnexion {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 2rem;
}
/* Titre Déconnexion */
.box_deconnexion h2 {
    font-size: 1.5rem;
    padding-bottom: 3rem;
    letter-spacing: 0.1rem;
}
/* Div Vous êtes déconnecté */
.box_deconnexion_vous_etes_deconnecte { 
    display: flex;
    justify-content: center;
}
/* Texte Vous êtes déconnecté*/
.box_deconnexion_vous_etes_deconnecte p {
    font-size: 1.3rem;
}

/* Div Bouton Se déconnecter */
.box_deconnexion_se_reconnecter{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton Se reconnecter */
.box_deconnexion_se_reconnecter a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se reconnecter survol */
.box_deconnexion_se_reconnecter a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

/* ----------- */
/* Mon profil  */
/* ----------- */
  
.contentBox_profil {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Titre profil */
.box_profil {
    display: flex;
    flex-direction: column;
    align-items:start;
    padding: 2rem;
}
/* Titre profil */
.box_profil h2 {
    font-size: 1.5rem;
    padding-bottom: 3rem;
    letter-spacing: 0.1rem;
}

/* Civilité, Prénom, Nom */
.box_profil_civi_prenom_nom{
   padding: 1rem 0;
}
/* Civilité, Prénom, Nom, Email, Langue de communication */
.box_profil_civi_prenom_nom p {
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}

/* Email */
.box_profil_email{
    padding: 1rem 0;
}
 .box_profil_email p {
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}

/* Langue de communication */
.box_profil_langue_com{
    padding: 1rem 0;
}
 .box_profil_langue_com p {
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}


/* Div Bouton Editer mon profil */
.box_profil_editer_mon_profil{
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 2rem 0;
}
/* Bouton Editer mon profil */
.box_profil_editer_mon_profil a{ 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Editer mon profil suvol */
.box_profil_editer_mon_profil a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

/* Div Bouton Se déconnecter */
.box_profil_se_deconnecter{
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 2rem 0;
}
/* Bouton Se déconnecter */
.box_profil_se_deconnecter a{ 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se déconnecter suvol */
.box_profil_se_deconnecter a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

/* -------------- */
/* Edition profil */
/* -------------- */

.contentBox_editionprofil {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Formulaire Edition profil */
.formBox_editionprofil{ 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Edition profil */
.formBox_editionprofil h2{ 
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div Langue de communication */
.inputBox_editionprofil_langue_com{
    display: flex;
    justify-content: left;
    padding: 1rem 0;
}
/* Titre 'Langue de communication' */
.inputBox_editionprofil_langue_com p { 
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    padding: 0 2rem 0 0;
}
/* Liste déroulante langue de communication */
.inputBox_editionprofil_langue_com select { 
    /* display: flex;
    align-items: center;  */
    background-color: transparent;
    border: 1px solid #f7b101;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
}
/* Liste déroulante langue de communication focus */
.inputBox_editionprofil_langue_com select:focus {
    border: 1px solid #f7c23e;
}
/* Liste déroulante langue de communication Hover*/
.inputBox_editionprofil_langue_com select:hover {
    border: 1px solid #f7c23e;
}
/* Liste déroulante langue de communication couleur de fond */
.inputBox_editionprofil_langue_com select option{ 
    background-color: #131416;
}

/* Box pour les civilités */
.inputBox_editionprofil_civilite { 
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 1rem 0;
}
/* Texte pour Titre Civilité */
.inputBox_editionprofil_civilite .civilite{
    font-size: 1.3rem;
    padding: 0 3rem 0 0;
}
/* Texte pour M. */
.inputBox_editionprofil_civilite .monsieur{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour M. */
.inputBox_editionprofil_civilite .civi_homme { 
    /* Intérieur du cercle du label qui sert de checkbox pour M. */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour M. */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour M. */
.inputBox_editionprofil_civilite input[type="radio"]:checked + .civi_homme{ 
    background-color: #f7b101
}
/* Texte pour Mme. */
.inputBox_editionprofil_civilite .madame{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour Mme. */
.inputBox_editionprofil_civilite .civi_femme { 
    /* Intérieur du cercle du label qui sert de checkbox pour Mme. */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour Mme */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour Mme*/
.inputBox_editionprofil_civilite input[type="radio"]:checked + .civi_femme{ 
    background-color: #f7b101
}
/* Texte pour X */
.inputBox_editionprofil_civilite .x{
    font-size: 1.3rem;
}
/* Label qui sert de checkbox pour X */
.inputBox_editionprofil_civilite .civi_x { 
    /* Intérieur du cercle du label qui sert de checkbox pour X */
    border-radius: 0.8rem;
    height :0.8rem;
    width: 0.8rem;
    /* Petit cercle autour du label qui sert de checkbox pour X */
    outline: 0.1rem solid #f7b101;
    outline-offset: 0.2rem;
    margin: 0 2rem 0 1rem;
}
/* Intérieur du label coloré lorsqu'on clique sur le label qui sert de checkbox pour X */
.inputBox_editionprofil_civilite input[type="radio"]:checked + .civi_x{ 
    background-color: #f7b101
}
/* Boutons radio masqués */
.inputBox_editionprofil_civilite input[type="radio"] { 
    display: none;
}

/* Div : Nom */
.inputBox_editionprofil_nom {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Nom */
.inputBox_editionprofil_nom span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Nom  */
.inputBox_editionprofil_nom input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input du Nom */
.inputBox_editionprofil_nom input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input du Nom */
.inputBox_editionprofil_nom input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Prénom */
.inputBox_editionprofil_prenom {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Prénom */
.inputBox_editionprofil_prenom span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Prénom  */
.inputBox_editionprofil_prenom input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input du Prénom */
.inputBox_editionprofil_prenom input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input du Prénom */
.inputBox_editionprofil_prenom input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Email */
.inputBox_editionprofil_email {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Email */
.inputBox_editionprofil_email span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input : Email  */
.inputBox_editionprofil_email input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input de l'Email */
.inputBox_editionprofil_email input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input de l'Email */
.inputBox_editionprofil_email input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div : Mot de passe */
.inputBox_editionprofil_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Mot de passe */
.inputBox_editionprofil_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Mot de Passe*/
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_editionprofil_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Mot de Passe*/
.inputBox_editionprofil_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Mot de Passe*/
.inputBox_editionprofil_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Mot de Passe*/
.inputBox_editionprofil_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye */
.inputBox_editionprofil_mdp label .password-icon {
    /* display: flex;
    align-items: center; */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye */
.inputBox_editionprofil_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye */
.inputBox_editionprofil_mdp label .password-icon .feather-eye-off {
    display: none;
}


/* Div : Confirmer Mot de passe */
.inputBox_editionprofil_confirme_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Confirmer Mot de passe */
.inputBox_editionprofil_confirme_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Confirmer Mot de Passe */
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_editionprofil_confirme_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label .password-icon {
    /* display: flex;
    align-items: center; */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye Confirmer Mot de Passe */
.inputBox_editionprofil_confirme_mdp label .password-icon .feather-eye-off {
    display:none;
}

/* Div bouton Mettre à jour mon profil */
.inputBox_editionprofil_mettre_a_jour { 
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
/* Bouton Mettre à jour mon profil */
.inputBox_editionprofil_mettre_a_jour input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Mettre à jour mon profil survol */
.inputBox_editionprofil_mettre_a_jour input:hover {
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

/* Div Bouton Annuler */
.inputBox_editionprofil_annuler{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Texte Bouton Annuler */
.inputBox_editionprofil_annuler a{ 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Texte Bouton Annuler survol */
.inputBox_editionprofil_annuler a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

.message_erreur_editionprofil{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}

/* ----------------------------- */
/* Se connecter pour voir photos */
/* ----------------------------- */
  
.content_connecter_pour_voir {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Connecter pour voir */
.box_connecter_pour_voir {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 2rem;
}

/* Div Connectez-vous pour voir les photos */
.box_connecter_pour_voir_connectez_vous_pour_voir{
    display: flex;
    justify-content: center;
}
/* Texte : Connectez-vous pour voir les photos */
.box_connecter_pour_voir_connectez_vous_pour_voir p {
    font-size: 1.3rem;
}

/* Div Bouton Se connecter */
.box_connecter_pour_voir_se_connecter { 
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton Se connecter */
.box_connecter_pour_voir_se_connecter a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se connecter survol */
.box_connecter_pour_voir_se_connecter a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color:#fafafa;
}

/* ------------------ */
/* Compte enregristre */
/* ------------------ */
  
.content_compte_enregistre {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Box Compte enregistre */
.box_compte_enregistre {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

/* Titre Confirmation */
.box_compte_enregistre h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div du Compte enregistre */
.box_compte_enregistre_votre_compte_a_bien_ete_enregistre { 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Texte : Votre compte a bien été enregistré*/
.box_compte_enregistre_votre_compte_a_bien_ete_enregistre p {
    font-size: 1.3rem;
    padding: 1rem 0;
}


/* Div Bouton OK */
.box_compte_enregistre_ok { 
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton OK */
.box_compte_enregistre_ok a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
    cursor: pointer;
}
/* Bouton OK survol */
.box_compte_enregistre_ok a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}

/* ------------------ */
/* Affichage erreur   */
/* ------------------ */
  
.content_erreur {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 2rem 1rem;
}
/* Box titre Erreur */
.box_erreur {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}
/* Titre 'Inscription' */
.box_erreur h2 { 
    color: #fafafa;
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}
/* Div du Erreur */
.erreur { 
    margin-bottom: 1rem;
}
/*Corps message Erreur*/
.erreur p {
    color: #fafafa;
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 2rem;
}
/* Bouton OK */
.erreur a { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    color: #131416;
    cursor: pointer;
    border-radius: 1rem;
    background-color: #f7b101;
}
/* Bouton OK survol*/
.erreur a:hover {
    color: #fafafa;
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}


/* --------- */
/* Recup mdp */
/* --------- */

    
.contentBox_recup_mdp {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Formulaire Connexion */
.formBox_recup_mdp { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Connexion */
.formBox_recup_mdp h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div : Email */
.inputBox_recup_mdp_email {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Email */
.inputBox_recup_mdp_email span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input de l'Email */
.inputBox_recup_mdp_email input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input de l'Email */
.inputBox_recup_mdp_email input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input de l'Email */
.inputBox_recup_mdp_email input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div bouton Se connecter */
.inputBox_recup_mdp_ok {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
/* Bouton Se connecter */
.inputBox_recup_mdp_ok input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se connecter survol */
.inputBox_recup_mdp_ok input:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}

/* Message erreur en rouge au-dessus du formulaire */
.message_erreur_recup_mdp{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}


/* --------------- */
/* Vérif Recup mdp */
/* --------------- */

    
.contentBox_verif_recup_mdp {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Formulaire Connexion */
.formBox_verif_recup_mdp { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Connexion */
.formBox_verif_recup_mdp h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div : Email */
.inputBox_verif_recup_mdp_code {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Email */
.inputBox_verif_recup_mdp_code span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Input de l'Email */
.inputBox_verif_recup_mdp_code input { 
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
}
/* Survol Input de l'Email */
.inputBox_verif_recup_mdp_code input:hover { 
    outline: 2px solid #f7c23e;
}
/* Focus Input de l'Email */
.inputBox_verif_recup_mdp_code input:focus { 
    outline: 2px solid #f7c23e;
}

/* Div bouton Se connecter */
.inputBox_verif_recup_mdp_ok {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
/* Bouton Se connecter */
.inputBox_verif_recup_mdp_ok input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se connecter survol */
.inputBox_verif_recup_mdp_ok input:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}

/* Message erreur en rouge au-dessus du formulaire */
.message_erreur_verif_recup_mdp{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}



/* ----------------- */
/* Mail recup envoyé */
/* ----------------- */

    
.contentBox_mail_recup_envoye {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div box_mail_recup_envoye */
.box_mail_recup_envoye { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Récupération de mot de passe */
.box_mail_recup_envoye h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Textes */
/* Un mail de récupération vient d'être envoyé à xxx@xxx.com. */
/* Vous ne trouvez pas l'email de récupération ? */
/* Merci de vérifier si vous ne l'avez pas reçu parmi vos 'courriers indésirables' ou 'spam'. */
.box_mail_recup_envoye_message{
    padding: 1rem 0;
}
 .box_mail_recup_envoye_message p {
    font-size: 1.3rem;
    padding: 0 0 1rem 0;
}



/* --------------------- */
/* Nouveau mot de passe  */
/* --------------------- */

    
.contentBox_nouveau_mdp {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div formBox_nouveau_mdp */
.formBox_nouveau_mdp { 
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Titre Récupération de mot de passe */
.formBox_nouveau_mdp h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div : Mot de passe */
.inputBox_nouveau_mdp_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Mot de passe */
.inputBox_nouveau_mdp_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Mot de Passe*/
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_nouveau_mdp_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Mot de Passe*/
.inputBox_nouveau_mdp_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Mot de Passe*/
.inputBox_nouveau_mdp_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Mot de Passe*/
.inputBox_nouveau_mdp_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye */
.inputBox_nouveau_mdp_mdp label .password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye */
.inputBox_nouveau_mdp_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye */
.inputBox_nouveau_mdp_mdp label .password-icon .feather-eye-off {
    display: none;
}


/* Div : Confirmer Mot de passe */
.inputBox_nouveau_mdp_confirme_mdp {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
/* Texte : Confirmer Mot de passe */
.inputBox_nouveau_mdp_confirme_mdp span { 
    font-size: 1.3rem;
    padding: 0.5rem 0;
}
/* Label de l'input de Confirmer Mot de Passe */
/* <!-- Basé sur la vidéo https://www.youtube.com/watch?v=LczVUgArW7k --> */
/* Label qui contient l'input et l'icône Eye, No-Eye */
.inputBox_nouveau_mdp_confirme_mdp label {
    display: flex;
    flex-direction: row;
    position: relative;
}
/* Input de Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    outline: 1px solid #f7b101;
    letter-spacing: 1px;
    background-color: transparent;
    border-radius: 1rem;
    transition: all 0.2s;
}
/* Survol de l'input de Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label input:hover {
    outline: 2px solid #f7c23e;
    cursor: text; 
}
/* Focus sur l'input de Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label input:focus {
    outline: 2px solid #f7c23e;
}
/* Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label .password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    transition: all 0.2s;
}
/*  Survol de la Div de l'icône Eye, No-Eye Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label .password-icon:hover {
    cursor: pointer;
}
/* Cacher l'icône No_Eye Confirmer Mot de Passe */
.inputBox_nouveau_mdp_confirme_mdp label .password-icon .feather-eye-off {
    display:none;
}

/* Div bouton S'inscrire */
.inputBox_nouveau_mdp_valider { 
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
/* Bouton S'inscrire */
.inputBox_nouveau_mdp_valider input { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton S'inscrire survol */
.inputBox_nouveau_mdp_valider input:hover {
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}
.message_erreur_nouveau_mdp{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}


/* ----------------------------- */
/*      Vous êtes connecté       */
/* ----------------------------- */
  
.content_vous_etes_connecte {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Vous êtes connecté */
.box_vous_etes_connecte {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 2rem;
}

/* Div Vous êtes connecté avec l'adresse : xxx@xxx.com */
.box_vous_etes_connecte_vous_etes_connecte_avec_l_adresse{
    display: flex;
    justify-content: center;
}
/* Texte : Connectez-vous pour voir les photos */
.box_vous_etes_connecte_vous_etes_connecte_avec_l_adresse p {
    font-size: 1.3rem;
}

/* Div Bouton OK */
.box_vous_etes_connecte_ok { 
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton OK */
.box_vous_etes_connecte_ok a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton OK */
.box_vous_etes_connecte_ok a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
}


/* ----------------------------- */
/* Se connecter pour Contact     */
/* ----------------------------- */
  
.content_connecter_pour_contact {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Div Connecter pour voir */
.box_connecter_pour_contact {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 2rem;
}

/* Div Connectez-vous pour voir les photos */
.box_connecter_pour_contact_connectez_vous_pour_contact{
    display: flex;
    justify-content: center;
}
/* Texte : Connectez-vous pour voir les photos */
.box_connecter_pour_contact_connectez_vous_pour_contact p {
    font-size: 1.3rem;
}

/* Div Bouton Se connecter */
.box_connecter_pour_contact_se_connecter { 
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton Se connecter */
.box_connecter_pour_contact_se_connecter a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
}
/* Bouton Se connecter survol */
.box_connecter_pour_contact_se_connecter a:hover { 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}

.message_erreur_contact{
    margin-bottom: 1rem;
    color:#fafafa;
    text-align: center;
    padding: 1rem;
    border: 2px solid red;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 1rem;
}

/* ------------------ */
/*   Message envoye   */
/* ------------------ */
  
.content_message_envoye {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
/* Box Message envoye */
.box_message_envoye {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

/* Titre Confirmation */
.box_message_envoye h2 {
    font-size: 1.5rem;
    padding-bottom: 2rem;
    letter-spacing: 0.1rem;
}

/* Div Message envoye */
.boxbox_message_envoye_message_envoye { 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Texte : Le message a été envoyé */
.box_message_envoye_message_envoye p {
    font-size: 1.3rem;
    padding: 1rem 0;
}


/* Div Bouton OK */
.box_message_envoye_ok { 
    display: flex;
    justify-content: center;
    align-items:center;
    width: 30rem;
    padding: 2rem 0;
}
/* Bouton OK */
.box_message_envoye_ok a { 
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    color: #131416;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
    background-color: #f7b101;
    cursor: pointer;
}
/* Bouton OK survol */
.box_message_envoye_ok a:hover {
        box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
        color: #fafafa;
    }


/* ------------------ */
/*     Admin          */
/* ------------------ */

/* Boite Formulaire + résultats Photos*/
.contentBox_admin_photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    background-color: blue;
}
/* Formulaire*/
.formBox_admin_photos { 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background-color: rgb(185, 214, 38);
}

/* Message d'erreur si les champs ne sont pas remplis */
.box_message_erreur_admin_photos{
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.message_erreur_admin_photos{
    color:#fafafa;
    padding: 1rem;
    border: 2px solid red;
    font-size: 1.3rem;
    border-radius: 1rem;
}

/* Bloc ensemble des champs sans le bouton voir */
.box_ensemble_des_champs_admin { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 0.5rem;
    background-color: rgb(8, 102, 10);
}

/* Bloc Valeur */
.inputBox_admin_valeur {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    padding: 0.5rem 0.5rem;
    background-color: brown;
}
/* Label Valeur */
.inputBox_admin_valeur label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
}
/* Champ Valeur */
.inputBox_admin_valeur select {
    color: #fafafa;
    width: 20rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: #131416;
    border-radius: 1rem;
}
/* Texte dans champ valeur */
.inputBox_admin_valeur select option{ 
    color: #fafafa;
}

/* Bloc Unite */
.inputBox_admin_unite {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
    padding: 0.5rem 0.5rem;
}
/* Label Unite */
.inputBox_admin_unite label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
}
/* Champ Unite */
.inputBox_admin_unite select { 
    color: #fafafa;
    width: 12rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: #131416;
    border-radius: 1rem;
}
/* Texte Champ Unite */
.inputBox_admin_unite select option{ 
    color: #fafafa;
}

/* Bloc E */
.inputBox_admin_e {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
    padding: 0.5rem 0.5rem;
}
/* Label E */
.inputBox_admin_e label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
}
/* Champ E */
.inputBox_admin_e select { 
    color: #fafafa;
    width: 10rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: #131416;
    border-radius: 1rem;
}
/* Texte Champ E */
.inputBox_admin_e select option{ 
    color: #fafafa;
}

/* Bloc Regne */
.inputBox_admin_regne {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    padding: 0.5rem 0.5rem;
}
/* Label Regne */
.inputBox_admin_regne label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
}
/* Champ Regne */
.inputBox_admin_regne select { 
    color: #fafafa;
    width: 20rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: #131416;
    border-radius: 1rem;
}
/* Texte Champ Regne */
.inputBox_admin_regne select option{ 
    color: #fafafa;
}

/* Bloc Date */
.inputBox_admin_date {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    padding: 0.5rem 0.5rem;
}
/* Label Date*/
.inputBox_admin_date label { 
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
}
/* Champ Date */
.inputBox_admin_date input { 
    color: #fafafa;
    width: 7rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    border: 1px solid #f7b101;
    text-align: center;
    background-color: #131416;
    border-radius: 1rem;
}

/* Bloc Voir dans admin */
.inputBox_admin_bouton_voir { 
    padding: 0.5rem 0.5rem;
    background-color: rgb(168, 71, 210);
}
/* Bouton Voir les photos dans admin*/
.inputBox_admin_bouton_voir input{ 
    color: #131416;
    width: 5rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    background-color: #f7b101;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.1s ease-out;
}
/* Bouton Voir les photos survol dans admin*/
.inputBox_admin_bouton_voir input:hover{ 
    box-shadow: 0rem 0rem 0.3rem 0.1rem #f7c23e;
    color: #fafafa;
}
.bloc_nombre_de_types_trouves{
    font-size: 1.5rem;
    padding: 1rem;
    background-color: rgb(122, 233, 222);
}



/* ------------------ */
/*     Footer         */
/* ------------------ */

.footer {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    text-align:center;
}

@media screen and (max-width: 650px)
{
    /* Bloc ensemble des champs sans le bouton voir */
    .box_ensemble_des_champs_admin { 
        flex-direction: column;
        align-items: start;
        background-color: rgb(8, 102, 10);
    }

    /* Bloc Valeur */
    .inputBox_admin_valeur {
        flex-direction: column;
        align-items: start;
    }
    /* Bloc Unite */
    .inputBox_admin_unite { 
        flex-direction: column;
        align-items: start;
    }
    /* Bloc E */
    .inputBox_admin_e {
        flex-direction: column;
        align-items: start;
        flex-direction: column;
    }
    /* Bloc Regne */
    .inputBox_admin_regne {
        flex-direction: column;
        align-items: start;
        flex-direction: column;
    }
    /* Bloc Date */
    .inputBox_admin_date {
        flex-direction: column;
        align-items: start;
        flex-direction: column;
    }
}





@media screen and (max-width: 600px)
{
    .formBox_photos form
    {
        flex-direction: column;
        align-items: start;
    }
    .formBox_admin_photos form
    {
        flex-direction: column;
        align-items: start;
    }
}

@media screen and (max-width: 470px){
    /* Titre Répertoire de la numismatique belge */
    .icone_et_titre a .titre{
        font-size: 1.2rem;
        padding: 0.2rem 0.2rem;
    }
    /* Icone de la monnaie */
    .icone_et_titre a .icone img{
        height: 4rem;
    }
    /* Nombre de colonnes de la table des matières */
    .table_mat_1 {
        column-count: 3;
    }  
}

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

    /* --------------------------------------- */
    /* Menu Accueil - Livre - Photos - Contact */
    /* --------------------------------------- */

    .blocmenu{
        width: 100%;
    }
    .blocmenu ul {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .blocmenu ul li{
        padding: 0.2rem 0;
        width: 100%;
    }
    .blocmenu ul li a{
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
    }
    /* Lien "Le livre" et "Les photos" en-dessous des 2 photos */
    .lien_dessous a{
        font-size: 1.2rem;
    }

    /* --------------- */
    /* Page "Le livre" */
    /* --------------- */
    
    /* Texte à droite de la photo  */
    .corps_livre_desc{
        font-size: 1.2rem;
        padding: 1rem 0;
    }
    /* Lien Obtenir le livre  */
    .corps_livre_obtenir .btn_obtenir a{
        font-size: 1.2rem;
    }

    /* ----------------------- */
    /* Page Table des matières */
    /* ----------------------- */
  
    .corps_livre_table_mat a{
        font-size: 1rem;
    }
    .table_mat_1 {
        column-count: 2;
    }  
}