@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

:root {
    /* general */ 
    --font_nom:Lato;
    --page_couleur_fond:#F3F3F3;
    --taille_defaut:36px;
    --bordure_style:solid;    
    --couleur_bordure_bloc_haut:#eb6969;
    --couleur_bordure_bloc_coteetbas:#111111;
    --couleur_logout:#000000;
    --container_grid_gap:30px;
    --bordure_style:none;

    /* footer */
    --footer_couleur_texte:#000000;
    --footer_couleur_fond:#FFFFFF;
    --footer_couleur_lien:#000000;
    --footer_taille_texte:14px;

    /* formulaire*/
    --formulaire_couleur_texte:black;
    --formulaire_couleur_fond:white;
    --formulaire_taille_texte:16px;
    --formulaire_taille_titre:20px;  
    --formulaire_couleur_bouton:#6e95ae;
    --formulaire_couleur_texte_bouton:#FFFFFF;
    --formulaire_taille_bouton:20px;
    --formulaire_font_weight_bouton:normal;  
}

body {
    font-size: var(--taille_defaut);
    font-family: var(--font_nom);
    background-color: var(--page_couleur_fond); 
    background-attachment: fixed;
    }

/*****************************************/
/* FORMULAIRE CONNEXION                  */
/*****************************************/
.cl_formulaire_connexion {
    grid-area: formulaire;
    display: grid; 
    background-color:var(--formulaire_couleur_fond); 
    width: 100%;
    justify-self: center;
    border-radius: 10px;  
    border-style: bordure_style;
    border-width: 1px;
    border-top-width: 5px; 
    border-color: var(--couleur_bordure_bloc_haut) var(--couleur_bordure_bloc_coteetbas) var(--couleur_bordure_bloc_coteetbas) var(--couleur_bordure_bloc_coteetbas);
    align-items: center;
}

.titre_information {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color:var(--formulaire_couleur_texte);
    font-size:var(--formulaire_taille_titre);
}

.texte_information {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color:var(--formulaire_couleur_texte);
    font-size:var(--formulaire_taille_texte);
}

.texte_formulaire {
    color:var(--formulaire_couleur_texte);
    font-size:var(--formulaire_taille_texte);
    padding-bottom: 20px;
}

.texte_erreur {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color:red;
    font-size:var(--formulaire_taille_texte);
}

.texte_ok {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color:green;
    font-size:var(--formulaire_taille_texte);
}

.bouton_formulaire {
    padding-bottom: 20px;
}

.btn{
    color:var(--formulaire_couleur_texte_bouton);
    background-color:var(--formulaire_couleur_bouton);
    font-size: var(--formulaire_taille_bouton);
    font-weight: var(--formulaire_font_weight_bouton);
    border-color:var(--formulaire_couleur_texte_bouton);
    border-radius:10px;
    border-width: 0px;
}

.btn a, .btn a:hover, .btn a:visited, .btn a:active{
    color:var(--formulaire_couleur_texte_bouton);
    background-color:var(--formulaire_couleur_bouton);
    font-size: var(--formulaire_taille_bouton);
    font-weight: var(--formulaire_font_weight_bouton);
    border-color:var(--formulaire_couleur_texte_bouton);
    border-radius:10px;
    border-width: 0px;
}

.form-group {
    text-align:left;
}

.switch_langues {
    font-size: 12px;
    text-align:right;
    padding-top: 10px;
    padding-right: 10px;
}

/*****************************************/
/* HEADER                                */
/*****************************************/
.cl_header {
    position:relative;
    display : grid;
    grid-area: header;
    justify-items: center;
    align-items: center;
}

.image_header {
    width: 100%;
    height: auto;
    border-style: none;
}

.texte_header {
    padding-top: 20px;
    padding-bottom: 20px;
}

.logout_header{
    position:absolute;
    top: 0;
    width: 100%;
    max-width: 1240px;
    color:var(--couleur_logout);     
    font-size: 20px;
    text-align: end;
}

.logout_acces a, .logout_acces a:hover {
    color:var(--couleur_logout); 
    text-decoration: none;
}

/*****************************************/
/* FOOTER                                */
/*****************************************/
.cl_footer {
    display : grid;
    grid-area: footer;
    background-color:var(--footer_couleur_fond); 
    color:var(--footer_couleur_texte); 
    justify-items: center;
    align-items: center;
    padding-top: 10px;
    border-radius: 10px;  
    border-style: var(--bordure_style);
    border-width: 1px;
    border-top-width: 5px; 
    border-color: var(--couleur_bordure_bloc_haut) var(--couleur_bordure_bloc_coteetbas) var(--couleur_bordure_bloc_coteetbas) var(--couleur_bordure_bloc_coteetbas);
}

.coordonnees_footer {   
    font-size: var(--footer_taille_texte); 
    text-align: center;
}

.coordonnees_footer a {
    color:var(--footer_couleur_lien); 
}

.dev_footer {
    font-size: x-small;
    margin-top: 10px;
}

.dev_footer a {
    color:var(--footer_couleur_lien); 
    text-decoration: none;
}

.reseau_social_footer{
    margin-left: 20px;
    margin-right: 20px;
}

/*****************************************/
/* CONTAINER                             */
/*****************************************/
.grid_container {
   display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    'header'
    'formulaire'
    'footer';
    grid-gap: var(--container_grid_gap);
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1240px;
    margin:auto;
}
  
.grid_container > div {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}