/*-------------------------------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;
}

a
{
    text-decoration: none;
}

/*-------------------------------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);
}

.Bleue
{
    background-color: rgb(93, 110, 133);
    border: 1px solid rgb(40, 49, 65);
}

.Violette
{
    background-color: rgba(158, 82, 114, 1);
    border: 1px solid rgb(105, 62, 80);
}

.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;
}

/*--------------------------------inventaire----------------------------------*/

img.inventaire
{
    max-width: 30%;
    height: auto;
    margin: auto;
}

.inventaire
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom : 2em;
}

.grd
{
  background-color: #fff;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
}

.grd img
{
    width: 2em;
}

.equipement {
    grid-column: 1 / 3;
    background-color: #b1c5d3;
}

.addlot {
    grid-column: 1 / 4;
}

.action
{
    background-color: #b1c5d3;
}

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

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

tr.lot
{
    background-color : #4887e6; 
    color :white;
}
tr.souslot
{
    background-color : #93baf5; 
}
tr.addlot
{
    background-color : #c1daff; 
}

/*--------------------------------calendriers----------------------------------*/
.maizieres
{
    width: auto;
    padding: 0.5em;
    border : 1px solid black;
    border-radius: 0.5em;
    margin: 1em;
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    text-align: center;
    background-color: #A53730;
}

.origny
{
    width: auto;
    padding: 0.5em;
    border : 1px solid black;
    border-radius: 0.5em;
    margin: 1em;
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    text-align: center;
    background-color: #3070a5;
}

.secteur
{
    display: block;
    width: 200px;
    padding: 0.5em;
    border : 1px solid black;
    border-radius: 0.5em;
    margin-bottom: 0.3em;
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    text-align: center;
    background-color: #6a819c;
}

.origny a, .maizieres a
{
    color: white;
}

.panneauRue
{
    width : 60%;
    margin: auto;
    text-align: center;
    text-transform: uppercase;
    background-color : #1b3c6d;
    color : white;
    font-size: 1.5em;
    font-weight: 800;
    padding : 1em;
    border-radius: 5px;
    border: thick double white;
}

.panneauRueMini
{
    width : 300px;
    text-align: center;
    text-transform: uppercase;
    background-color : #1b3c6d;
    font-size: 1em;
    font-weight: 800;
    padding : 0.5em;
    border-radius: 5px;
    border: thick double white;
    text-decoration: none;
    color : white;
}

.rue
{
    display: flex;
    flex-direction: row;
    width : 95%;
    height: 70vh;
    background-color: #585858;
    margin: auto;
    margin-top: 2em;
}

.trottoire
{
    flex: auto;
    display: flex;
    flex-direction: column;
    max-width: 20%;
    background-color: #ddd29e;
    text-align: center;
    padding: 0.2em;
}

.route
{
    flex: auto;
    padding: 0.3em;
    text-align: center;
    color: white;
}

.route.gauche
{
    border-right: 2px dashed white;
}

.numRue
{
    background-color : #1b3c6d;
    color : white;
    font-size: 1.5em;
    font-weight: 800;
    padding:0.3em;
    border-radius: 5px;
}

.trottoire>.fleche
{
    font-size: 2.5em;
    font-weight: 800;
    margin-top: 1em;
    margin-bottom: 1em;
    color : rgb(74, 155, 180);
}
.etat
{
    font-size: 0.7em;
}

.don
{
    background-color: rgb(22, 107, 19);
}

.refus
{
    background-color: #A53730;
}

.repasser
{
    background-color: rgba(158, 82, 114, 1);
}

.inexistant
{
    background-color: rgb(94, 94, 94);
}

.route>.etiquette
{
    padding-top: 1em;
    padding-bottom: 1em;
}

.options
{
    font-size: 1.5em;
    text-align: center;
}

.options a
{
    color: #A53730;
    text-decoration: none;
    font-weight: 800;
}

.progression
{
    margin: auto;
    text-align: center;
}
progress {
	display: inline-block;
	width: 75%;
	height: 30px;
	padding: 0px 0 0 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 15px;
	text-align: center;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height: 20px;
	width: 75%;
	margin: 0 auto;
    text-align: left;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow: 0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display: inline-block;
	height: 11px;
	background: rgb(42, 202, 27);
	border-radius: 15px;
	box-shadow: 0px 0px 6px #777 inset;
}
progress:after {
	padding: 0;
	display: inline-block;
	content: attr(value) '%';
}

table.commerces
{
    border-collapse: collapse;
    margin-bottom: 1em;
}

table.commerces td
{
    padding: 0.1em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    text-align: center;
    vertical-align: middle;
    border-bottom : 1px solid black;
}

/*--------------------------------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;
    }
}