/*-------------------------------GENERAL-----------------------------------*/
html
{
    height: 100%;
}

body
{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    background-color: rgb(236, 236, 229);
}

h1
{
    font-size: 1.5em;
    font-weight: 600;
}

h2
{
    font-size: 1.2em;
    font-weight: 400;
}

.form
{
    width: 90%;
    margin: auto;
    padding: 10px;
    background-color: #C84940;
    box-shadow: 0em 0.3em 1em rgba(0, 0, 0, 0.4);
    border: 2px solid black;
    border-radius: 0.5em;
    & input, select, textarea{
        border: 2px solid black;
        border-radius: 0.5em;
        font-size: 1em;
        outline: none;
        padding: .5em 1.5em;
        margin: 0.5em;
        &:focus {
            border: 2px solid #E1312B;
            }
    }
}

.form [type="checkbox"]
{
    width: 1.2em;
    height: 1.2em;
}

.form label
{
    font-size: 1.2em;
    font-weight: 500;
}

.form textarea
{
    width: 80%;
    height: 100px;
}

.alerte
{
    width: 90%;
    border: 1px solid black;
    border-radius: 10px;
    background-color: white;
    padding : 0.5em;
    margin: auto;
    margin-bottom: 1em;
    color: #A53730;
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
}

.verifMdp
{
    color: white;
    font-weight: 600;
    font-size: 0.9em;
    text-align: left;
}

.logograde
{
    width: 1em;
    margin-right: 0.2em;
}

/*-------------------------------PAGE DE CONNEXION-----------------------------------*/
.accueil
{
    width: 100%;
    margin: auto;
    text-align: center;
}

.accueil a
{
    color: black;
}

/*---------------------------------HEADER & FOOTER---------------------------------*/
header
{
    display: flex;
    flex-direction: row;
    background-color: rgb(229, 236, 230);
    border-bottom: 1px solid black;
    height: 130px;
    padding: 1em;
    margin: 0px;
}

#logo
{
    width: 92px;
    margin: 0.5em;
}

.titreSite
{
    flex: auto;
}

.deconnexion a
{
    color : black;
    align-self: flex-end;
}

footer
{
    align-self: flex-end;
    width: 100%;
    color: white;
    margin-top: 1em;
    font-size: 1em;
    text-align: center;
    padding: 0.5em;
    background-color: #A53730;
    box-shadow: 0.0em -0.3em 0.5em rgba(0, 0, 0, 0.5);
}

footer a
{
    color: white;
    text-decoration: none;
}

/*--------------------------------MENU----------------------------------*/
nav
{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
    font-size: 1em;
    background-color: #A53730;
    box-shadow: 0em 0.3em 0.5em rgba(0, 0, 0, 0.5);
}

nav ul
{
    display: none;
    flex: initial;
    margin: 2em 0 0 -6em;
    flex-direction: column;
    justify-content: flex-start;
    list-style-type: none;
}

nav li
{
    border-left: 1px solid rgb(0, 0, 0);
    padding: 0.6em;
    font-size: 1.3em;
    background-color: #A53730;
    box-shadow: 0em 0.3em 0.5em rgba(0, 0, 0, 0.5);
    z-index: 2;
}

nav ul li a
{
    color: #DCDCDC;
    text-decoration: none;
    transition-property: transform;
    transition-duration: 200ms;
}

nav ul li a:hover
{
    color: white;
    transform: scale(1.1);
}

nav .identite
{
    display: flex;
    flex: auto;
    justify-content: flex-end;
    margin: 0.4em;
    color: #DCDCDC;
}

nav .identite a
{
    text-decoration: none;
    color: #DCDCDC;
}

nav label
{
    width: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0.5em;
    font-size: 1.5em;
    color: white;
    cursor: pointer;
}
#toggle
{
    display: none;
}

#toggle:checked + ul {
    display: flex;
}

/*--------------------------------CORPS DE PAGE----------------------------------*/
main
{
    flex: auto;
    width: 90%;
    margin: auto;
    background-color: white;
    border: 1px solid black;
    padding: 1em;
    border-radius: 15px;
}

main h1
{
    text-align: center;
    text-decoration: underline;
}
/*--------------------------------Tableau de bord----------------------------------*/
.tableauBord
{
    display: flex;
    flex-wrap: wrap; 
}

.box
{
    width: 85%;
    border: 1px solid black;
    border-radius: 5px;
    margin: auto;
    margin-bottom: 0.5em;
    padding: 0em 1em;
}

.box h2
{
    text-decoration: underline;
}

.box .astreintes
{
    display: flex;
    flex-direction: column;
}

.boxastrup
{
    border-bottom: 1px solid black;
    padding-bottom: 1em;
}

.nextastr
{
    margin-top: 1em;
}

.accentuer
{
    font-size: 1.1em;
    font-weight: 700;
    color: #6d3030;
}

.suite
{
    display: block;
    float: right;
    color:#6d3030;
    font-size: 1.1em;
    font-weight: 600;
}

.suite a{
    color: #A53730;
    text-decoration: none;
}

.suite a:hover {
    color: #814949;
} 

.listeEvents
{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid black;
    padding-bottom: 0.5em;
    margin: 0.5em 0;
}

.description
{
    flex: auto;
    justify-content: flex-start;
}

.etiquette
{
    flex: none;
    justify-content: flex-end;
    color: white;
    padding: 0.3em;
    margin: 0.3em;
    border-radius: 5px;
}

.etiquette a
{
  text-decoration: none;
  color: white;
}

.Verte
{
    background-color: rgb(22, 107, 19);
    border: 1px solid rgb(4, 78, 17);
}

.VerteDesactive
{

    background-color: rgb(94, 94, 94);
    border: 1px solid rgb(53, 53, 53);
}

.VerteDesactive:hover
{
    background-color: rgb(22, 107, 19);
    border: 1px solid rgb(4, 78, 17);
}

.Rouge
{
    background-color: #A53730;
    border: 1px solid #814949;
}

.RougeDesactive
{
    background-color: rgb(94, 94, 94);
    border: 1px solid rgb(53, 53, 53);
}

.RougeDesactive:hover
{
    background-color: #A53730;
    border: 1px solid #814949;
}

.Grise
{
    background-color: rgb(94, 94, 94);
    border: 1px solid rgb(53, 53, 53);
}

.messagebulle
{
    width: 100%;
    padding: 0.5em;
}

.messagebulle .message
{
    display:block;
    width: 80%;
    float: right;
    margin-right: 1em;
    background-color: #A53730;
    color: white;
    border: 1px solid #814949;
    border-radius: 0 1.5em 0.5em 1.5em;
    padding: 1em;
    margin-bottom: 1em;
    animation-duration: 1s;
    animation-name: message;
}

@keyframes message
{
    0% 
    {
        scale: 0.1 0.25;
        background-color: #b49593;
    }

    75%
    {
        scale: 1.1 1.05;
        background-color: #b49593;
    }
  
    100%
    {
        scale: 1 1;
        background-color: #A53730;
    }
}

.messagebulle .variante
{
    background-color: #305fa5;
    border: 1px solid #495381;
    animation-duration: 1s;
    animation-name: messageV;
}

@keyframes messageV
{
    0% 
    {
        scale: 0.1 0.25;
        background-color: #93a2b4;
    }

    75%
    {
        scale: 1.1 1.05;
        background-color: #93a2b4;
    }
  
    100%
    {
        scale: 1 1;
        background-color: #305fa5;
    }
}

.messagebulle .author
{
    display: block;
    float: left;
    background-color: rgb(235, 180, 180);
    border: 1px solid #707070;
    border-radius: 0.2em;;
    padding: 0.2em;
    margin-bottom: 0.2em;
}
/*--------------------------------Manoeuvres et Evenements----------------------------------*/
.manoeuvre
{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 90%;
    margin: auto;
    margin-bottom: 2em;
    border: 3px solid black;
    border-radius: 5px;
    padding: 0.5em;
}

.mois
{
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.mois::before, .mois::after
{
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #000;
}

.mois span
{
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #658E15;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font-size: 1.4em;
    text-align: center;
}

.left
{
    top: -10px;
    left: -10px;
}

.left::before
{
    top: 0;
    right: 0;
}

.left::after
{
    bottom: 0;
    left: 0;
}

.left span
{
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

.infos
{
    margin: 3em 0em 0em 4em;
    padding: 1em;
    font-size: 1.2em;
}

.presents
{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.presents h4
{
    text-align: center;
    text-decoration: underline;
}

.etiquettepresents
{
    display: flex;
    flex-wrap: wrap;
}

.boxReponsePresence
{
  margin: auto;
  text-align: center;
}

.ancienEvent
{
    display: none;
}

.afficherevent
{
    cursor:pointer;
}

/*--------------------------------planning Astreintes----------------------------------*/
.Mal
{
    background-color: #7d7e5b;
    border: 1px solid #5e5f45;
}

.Abs
{
    background-color: #d53030;
    border: 1px solid #814949;
}

.Disp
{
    background-color: green;
    border: 1px solid #0b5a00;
}

.Ast
{
    background-color: #2B8FE0;
    border: 1px solid #2270af;
}

.tableauAstreintes
{
    overflow: auto;
    width: 100%;
    max-height: 90vh;
}

 table.astreintes
{
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    font-size: 0.78em;
}

table.astreintes a
{
    text-decoration: none;
    color: black;
    font-size: 1.5em;
    font-weight: 800;
}

.astreintes td, th 
{
    border: 1px solid black;
    padding: 0.5em;
}

.astreinte th
{
    position: sticky;
}

.weekend
{
    background-color : gray;
}

.aujourdhui
{
    background-color : #d6b331;
}

.semaine
{
    background-color: #ffffff;
}

td.gris
{
    background-color: #7d7e5b;
    font-weight: 800;
    font-size: 1em;
    color: white;
}

td.rouge
{
    background-color: #d53030;
    font-weight: 800;
    font-size: 1em;
    color: white;
}

td.vert
{
    background-color: green;
    font-weight: 800;
    font-size: 1em;
    color: white;
}

td.bleu
{
    background-color: #2B8FE0;
    font-weight: 800;
    font-size: 1em;
    color: white;
}

.edit
{
    cursor:pointer;
}

.planning a, .planning
{
    text-align: center;
    text-decoration: none;
    color: #A53730;
    font-weight: 600;
    font-size: 1.2em;
}

td.membres
{
    text-align: left;
    position: sticky;
    background-color: #eeeeee;
    left: 0px;
    z-index: 0;
}

td.dates
{
    position: sticky;
    top: 0px;
    z-index: 1;
}

/*--------------------------------Admin----------------------------------*/
table.listeMembres
{
    border-collapse: collapse;
    text-align: center;
    width: 80%;
    margin: auto;
}

.listeMembres td, th /* Mettre une bordure sur les td ET les th */ {
    border: 1px solid black;
    padding: 0.5em;
}

/*--------------------------------Affichage PC----------------------------------*/
@media(min-width: 768px) 
{
    body
    {
        font-size: 1em;
    }

    .form
    {
        width: 50%;
    }

    .alerte
    {
        width: 50%;
    }

    .accueil
    {
        width: 75%;
    }

    #logo
    {
        width: 130px;
    }

    header
    {
        height: 180px;
    }

    nav
    {
        font-size: 1.5em;
    }

    nav label
    {
        display: none;
    }

    nav ul
    {
        display: flex;
        flex-direction: row;
        margin: 0.5em 0 0 -1.5em;
    }

    nav li
    {
        font-size: 1em;
        padding: 0em 0.5em 0em 0.5em;
        border: none;
        background-color: none;
        box-shadow: none;
        z-index: none;
    }

    nav ul li a
    {
        display: flex;
    }

    main
    {
        width: 95%;
    }

    .box
    {
        width: 45%;
        margin-bottom: 1em;
    }

    .suite
    {
        font-size: 1.3em;
    }

    .manoeuvre
    {
        flex-direction: row;
    }
    .infos
    {
        flex: auto;
        max-width: 35%;
    }
    .presents
    {
        flex: auto;
        border-top: 0px solid black;
        border-bottom: 0px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }
    .boxReponsePresence
    {
        align-self: flex-end;
        flex: none;
    }
}