:root {
    --color-red: #B22D27;
    --color-light-red: #b5534e;
    --color-lighter-red: #c48e8c;
    --color-dark-green: #5C8A3F;
    --color-darker-green: #4a6e2c;
    --color-green: #80AA4E;
    --color-hover-green: #a1c56e;
    --color-light-green: #DBE4D1;
    --color-lighter-green: #e7ebe2;
    --color-yellow: #F9C80E;
    --color-light-yellow: #f9d84e;
}

* {
    font-size: 13px;
}

body {
    background-color: var(--color-light-green);
    min-height: 100vh;
    margin: 0;

    display: grid;
    grid-template-rows: 240px 1fr;
}

/* Pour le système d'onglets */
.cursor-pointer {
    cursor: pointer;
}

div.tab {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    padding: 10px;
}

/* Banniere */

#banniere {
    display: grid;
    grid-template-columns: 180px 1fr;
    background-color: #FFF;
}

#banniere .droite {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 180px;
    background-image: url(images/banniere2.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: right;
    background-repeat: no-repeat;
}

#banniere .nom_club {
    text-align: center;
    vertical-align: auto;
}

#banniere img.logo {
    margin: 10px;
    height: 150px;
}

/* Fin bannière */

/* Styles éléments par défaut */




/* Menu */
nav {
    width:100%;
    margin: 0 auto;
    background-color: var(--color-green);
    color: #fff;
    position: sticky;
    top: 0px;
    z-index: 1000;
}

nav .hamburger {
    display: none;
}

nav ul {
    list-style-type: none;
    margin: 0;
}

nav ul li {
    float: left;
    width: 12%;
    text-align: center;
    position: relative;
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
    font-size: 1.3em;
}

nav a:hover {
    color: var(--color-red);
    border-bottom: 2px solid var(--color-red);
}

.sous_menu {
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: var(--color-green);
}

nav ul li:hover .sous_menu {
    display: block;
    width: 100%;
}

.sous_menu li {
    width: 100%;
    float: none;
    text-align: left;
}

.sous_menu a {
    padding: 10px;
    border-bottom: none;
}

.sous_menu a:hover {
    border-bottom: none;
    background-color: rgba(200,200,200,0.2);
}

.deroulant > a::after {
    content: " ▼";
    font-size: 12px;
}

.sous_menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

ul.sous_menu {
    padding-left: 0px !important;
    z-index: 1000;

}
/* Fin Menu */


footer {
    background-color: var(--color-red);
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 0.8em;
    vertical-align: middle;
}

#app.with_gauche {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-areas: "bloc_gauche bloc_droite";
    grid-gap: 20px;
    padding: 0px 20px;
}

#app.with_gauche #bloc_droite {
    background-color: #FFFFFF;
    border-radius: 30px;
    padding: 20px;
}

div.page_blanche {
    background-color: #FFFFFF;
    border-radius: 30px 30px 0 0;
    padding: 20px;
}

/* Bloc gauche */
#bloc_gauche {
    grid-area: bloc_gauche;
}

#bloc_gauche .panel {
    width: 100%;
}

#bloc_gauche .panel.planning {
    background-color: var(--color-red);
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    cursor: pointer;

    & i {
        font-size: 1.3em;
        margin-right: 10px;
    }

    & a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1.3em;
    }
}

#bloc_droite {
    grid-area: bloc_droite;
}



.panel {
    background-color: #FFFFFF;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.panel.vert {
    background-color: var();
    box-shadow: none;
}

.panel h1 {
    text-align: center;
    margin-bottom: 30px;
}

.panel h3 {
    font-size: 1.2em;
    text-align: center;
}

.login input[type="email"], 
.login input[type="password"], 
.login input[type="text"] {
    width: 100%;
    padding: 15px;
    border: 0px;
    border-radius: 30px;
    margin-bottom: 20px;
    background-color: var(--color-lighter-green);

}

.login button {
    padding: 15px;
    border: 0px;
    border-radius: 30px;
    margin-bottom: 20px;
    background-color: var(--color-green);
    color: #FFFFFF;
    font-weight: bold;
}

.erreur {
    color: red;
    font-size: 2em;
    text-align: center;
    font-weight: bold;
}

.red {
    color: var(--color-red);
}

.green {
    color: var(--color-green);
}

/* Bouton */

.bouton {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--color-green);
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    border: 0px;
    border-radius: 30px;
}

.bouton:hover {
    color: #FFFFFF;
    background-color: var(--color-hover-green);
}

.bouton.red {
    background-color: var(--color-red);
}

.bouton.red:hover {
    background-color: var(--color-light-red);
}

.bouton.carre {
    border-radius: 0px;
}

/* Message accueil */

.panel.message {
    background-color: var(--color-red);
}

.panel.message .titre {
    font-size: 1.5em;
    color: #FFF;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.message_accueil {
    background-color: var(--color-red);
    color: #FFFFFF;
    text-align: left;
    margin-bottom: 20px;
    font-size: 1.1em;
}

/* Input */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"]
 {
    width: auto;
    padding: 15px;
    border: 0px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--color-lighter-green);
    border-bottom: 1px solid var(--color-green);
}

input[type="text"]:invalid,
input[type="email"]:invalid,
input[type="password"]:invalid,
input[type="number"]:invalid,
input[type="tel"]:invalid,
input[type="date"]:invalid,
input[type="datetime-local"]:invalid,
input[type="time"]:invalid,
input[type="search"]:invalid
 {
    background-color: var(--color-lighter-red);
    border-bottom: 1px solid var(--color-red);
    color: var(--color-red);
}

button.button_view {
    width: auto;
    background-color: transparent;
    color: #000;
    position: absolute;
    right: 10px;
}

select {
    width: auto;
    padding: 15px;
    border: 0px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--color-lighter-green);
    border-bottom: 1px solid var(--color-green);
}

select:invalid {
    width: auto;
    padding: 15px;
    border: 0px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--color-lighter-red);
    border-bottom: 1px solid var(--color-red);
}



input.white {
    background-color: #FFFFFF;
}

textarea {
    width: 100%;
    padding: 15px;
    border: 0px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--color-lighter-green);
    border-bottom: 1px solid var(--color-green);
}


/* Tableau */

table {
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

/* Zebra striping */
tbody tr:nth-of-type(odd) {
    background: #eee;
}

tbody tr:last-of-type {
    border-bottom: 2px solid var(--color-red);
}

thead tr {
    background: var(--color-red);
    color: white;
    font-weight: bold;
}


th, td {
    padding: 10px;
}

tbody tr:hover {
    color: var(--color-red);
}

td.c, th.c {text-align: center;}
td.l, th.l {text-align: left;}
td.r, th.r {text-align: right;}
td.wa, th.wa {white-space: nowrap; width: 10px;}
/* Fin tableau */


/* Partie Administration */
div.page_blanche.admin,
div.page_blanche.ca {
    border: thin solid var(--color-light-red);
    display: grid;
    grid-template-columns: 250px 1fr;
}

.admin_menu,
.ca_menu {
    padding-top: 30px;
}

.admin_menu ul,
.ca_menu ul {
    list-style-type: none;
    padding: 0px;
}

.admin_menu a,
.ca_menu a {
    display: block;
    width: 250px;
    text-decoration: none;
    color: #FFFFFF;
    /* background-color: var(--color-red); */
    font-weight: bold;
    font-size: 1.2em;
    line-height: 3em;
    padding-left: 15px;
    /* border-bottom: 1px solid var(--color-light-red); */
}

.admin_menu a > i,
.ca_menu a > i {
    width: 20px;
    text-align: center;
}

.admin_menu a:hover,
.admin_menu a.active,
.ca_menu a:hover,
.ca_menu a.active {
    background-color: var(--color-light-red);
}

.admin_menu li,
.ca_menu li {
    position: relative;
    left: -20px;
    background-color: var(--color-red);
    border-bottom: 1px solid var(--color-light-red);
}

.admin_menu li:first-child,
.ca_menu li:first-child {
    border-top-right-radius: 10px;
}

.admin_menu li:last-child,
.ca_menu li:last-child {
    border-bottom-right-radius: 10px;
}

.admin_content > h1,
.ca_content > h1 {
    text-align: center;
    font-size: 1.5em;
    background-color: var(--color-red);
    padding: 5px;
    color: #FFFFFF;
    position: relative;
    top: -20px;
    max-width: 500px;
    margin: 0 auto;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Filter box */
.filter_box {
    background-color: var(--color-lighter-green);
    border-radius: 30px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.filter_box .bulle {
    display: inline-block;
    min-width: 150px;
    margin: 10px;
    color: #FFFFFF;
    text-align: center;
    background-color: var(--color-lighter-red);
    border-radius: 30px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

.filter_box .bulle.selected {
    background-color: var(--color-red);
}

/* Fin Partie Administration */


/* dropdown searchable */
.dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: #f1f1f1;
}
.dropdown a:hover {background-color: #ddd}
.dropdown-content {
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    z-index: 100000;
}

/* Vignettes photos */
.vignette {
    height: 150px;
    display: inline-block;
    position: relative;
    
}

.vignette img {
    height: 150px;
    width: auto;
    display: inline-block;
}

.vignette button.trash {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: var(--color-red);
    color: #FFFFFF;
    border: 0px;
    border-radius: 0px 0px 0px 5px;
    padding: 5px;
    font-size: 1.5em;
    cursor: pointer;
}

.vignette_background {
    display: inline-block;
    height: 150px;
    width: 150px;
    background-color: var(--color-light-red);
    background-position: center;
    background-size: cover;
}

.vignette a {
    text-decoration: none;
    transition: 0.3s all;
}

.vignette a:hover {
    filter: saturate(50%);
}

/* Photos fullscreen */
#photo_fullscreen {
	position: fixed;
	right: 0px;
	left: 0px;
	top: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.90);
	text-align: center;
	vertical-align: middle;
	z-index: 20000;
}

#photo_fullscreen img.fullscreen_previous {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20001;
    cursor: pointer;
}

#photo_fullscreen img.fullscreen_next {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20001;
    cursor: pointer;
}

#photo_fullscreen img.fullscreen_next:hover,
#photo_fullscreen img.fullscreen_previous:hover {
	cursor: pointer;
}

#photo_fullscreen img.fullscreen_close {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 20001;
    cursor: pointer;
}

#photo_fullscreen img.photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
    max-width: 90%;
    z-index: 100;
}

#editorjs {
    max-width: 1100px;
    margin: 0 auto;
}

/* Styles editorjs */
.attaches__title {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 10px;
}

.attaches__items a {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    background-color: #ccc;
    padding: 10px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    border-radius: 10px;
}

.attaches__items a:hover {
    background-color: #aaa;
}

.attaches__items a .attaches__item-icon {
    margin-right: 10px;
}

.activite_param {
    margin-bottom: 10px;
}
.activite_param header:hover {
    background-color: var(--color-lighter-red);
}


.activite_param header {
    background-color: var(--color-red);
    padding: 10px;
    color: #FFFFFF;
    font-size: 1.2em;
}

.activite_param .details {
    padding: 10px;
    margin-bottom: 50px;
}

.activite_param .details .frais {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.activite_param .details .frais .lib {
    line-height: 2em;
    display: inline-block;
    min-width: 250px;
}

.activite_param .details .info,
.info {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.activite_param .details .info .code,
.info .code {
    line-height: 2em;
    display: inline-block;
    min-width: 150px;
    text-align: center;
    font-weight: normal;
}

.activite_param .details .info .lib,
.info .lib {
    line-height: 2em;
    display: inline-block;
    min-width: 250px;
}

.activite_param .details .info .type,
.info .type {
    line-height: 2em;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}

.panel_inscription {
    margin-bottom: 10px;
    margin-top: 20px;
}

.panel_inscription div.header {
    background-color: var(--color-red);
    padding: 10px;
    color: #FFFFFF;
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    font-weight: bold;
}

.panel_inscription div.content {
    border-left: 5px solid var(--color-red);
    border-right: 5px solid var(--color-red);
    border-bottom: 5px solid var(--color-red);
    padding: 10px;
}

div.hamburger_menu_membre {
    display: none;
}

.nav-tabs a {
    font-size: 1.3em!important;
}

div.archive_message {
    border: 1px solid var(--color-red);
    margin-bottom: 20px;
    padding: 10px;
}

.form_quizz .proposition {
    margin-bottom: 5px;
    margin-top: 5px;
    display: grid;
    grid-template-columns: 30px 1fr 30px;
}

.form_quizz .proposition .delete {
    text-align: center;
    line-height: 30px;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--color-red);

    &:hover {
        color: var(--color-light-red);
    }
}

.form_quizz .question {
    display: grid;
    grid-template-columns: 1fr 50px;
}

.form_quizz .question .delete {
    text-align: center;
    line-height: 50px;
    font-size: 1.5em;
    cursor: pointer;
    background-color: var(--color-red);
    color: white;

    &:hover {
        background-color: var(--color-light-red);
    }
}

.form_quizz .proposition.add {
    grid-template-columns: 1fr;
}

.form_quizz .proposition input {
    background-color: transparent!important;
    padding: 0px;
    line-height: 30px;
    border-top: 1px solid transparent;
    border-radius: 0;
    padding-left: 10px;
}

.form_quizz .proposition .bonne_reponse {
    width: 30px;
    border: 1px solid var(--color-green);
    display: inline-block;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    box-sizing: border-box;
}

.liste_quizz_admin {
    margin-top: 20px;
    --_height: 50px;
}

.liste_quizz_admin .quizz {
    line-height: var(--_height);
    border: 1px solid var(--color-green);
    margin-bottom: 10px;
}

.liste_quizz_admin .quizz .ligne_quizz {
    display: grid;
    grid-template-columns: 1fr var(--_height);
    gap: 2px;

    &:hover {
        background-color: var(--color-lighter-green);
    }
}

.liste_quizz_admin .quizz .stats {
    line-height: 1rem;
    padding: 5px;
    background-color: var(--color-green);
    color: white;
    border-top: 1px solid var(--color-dark-green);

}

.liste_quizz_admin .quizz .stats span {
    font-size: 0.8rem;
}

.liste_quizz_admin .quizz .libelle {
    padding-left: 10px;
    position: relative;
}

.liste_quizz_admin .quizz .libelle .date_creation {
    font-size: 0.8em;
    position: absolute;
    right: 2px;
    bottom: 2px;
    line-height: 1em;
}

.liste_quizz_admin .quizz .edit {
    background-color: var(--color-green);
    text-align: center;
    line-height: var(--_height);
    color: white;
    cursor: pointer;
    &:hover {
        background-color: var(--color-hover-green);
    }
}

.liste_quizz_admin .quizz .view {
    background-color: var(--color-green);
    text-align: center;
    line-height: var(--_height);
    color: white;
    cursor: pointer;
    &:hover {
        background-color: var(--color-hover-green);
    }
}

.liste_quizz_user {
    margin-top: 20px;
}

.liste_quizz_user .quizz {
    border: 4px solid var(--color-green);
    margin-bottom: 10px;
    display: grid;
    --_height: 50px;
    grid-template-columns: 1fr var(--_height) var(--_height);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.liste_quizz_user .quizz .libelle {
    height: var(--_height);
    text-align: center;
    padding-top: 5px;
    font-size: 1.5em;
    position: relative;
}

.liste_quizz_user .quizz .libelle .repondu {
    position: absolute;
    right: 5px;
    bottom: 0px;
    font-size: 0.8rem;
}

.liste_quizz_user .quizz .icons {
    line-height: var(--_height);
    text-align: center;
    background-color: var(--color-green);
    color: white;
    cursor: pointer;
    font-size: 1.5em;
    
    &:hover {
        background-color: var(--color-hover-green);
    }

    &.disabled {
        background-color: #CCC;
        cursor: default;
    }
}

.liste_quizz_user .quizz .resultats {
    padding-top: 10px;
    border-top: 1px solid var(--color-green);
    grid-column: 1 / 4;

    & h3 {
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
    }

    & .reponses {

        padding: 1rem;

        & .question {
            margin-top: 10px;

            & .libelle {
                text-align: left;
                font-size: 1.2em;
                font-weight: bold;
                margin-bottom: 5px;
                height: auto;
            }
        }

        & .reponse {
            margin-bottom: 5px;
        }

        & .case {
            border: 1px solid black;
            display: inline-block;
            line-height: 30px;
            width: 30px;
            text-align: center;
            font-weight: bold;

            &.bonne_reponse {
                border: 3px solid var(--color-green);
            }

            & span.good {
                color: var(--color-green);
            }

            & span.bad {
                color: var(--color-red);
            }
        }

        & .explication {
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid var(--color-green);
            background-color: var(--color-lighter-green);
            /*white-space: pre;*/

            &::before {
                content: "Explication :";
                font-weight: bold;
            }
        }
    }
    
}

.quizz_to_answer {
    margin-top: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.quizz_to_answer .header {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-green);
}

.quizz_to_answer .slider {
    overflow-x: hidden;
    width: 100%;

}

.quizz_to_answer .slider .questions-wrapper {
    transition: 0.5s all;
    display: flex;
    transform: translateX(0%);
}

.quizz_to_answer .questions-wrapper .question {
    width: 100%;
    flex-shrink: 0;
}

.quizz_to_answer .question > .libelle {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 2rem;
}

.quizz_to_answer .question .proposition {
    display: grid;
    grid-template-columns: 30px 1fr;
    padding-left: 20px;
    --_width: 30px;
    margin-bottom: 2rem;
}

.quizz_to_answer .question .proposition .coche {
    border: 1px solid var(--color-green);
    width: var(--_width);
    line-height: var(--_width);
    text-align: center;
    color: var(--color-green);
    cursor: pointer;
}

.quizz_to_answer .question .proposition .libelle {
    padding-left: 10px;
    line-height: var(--_width);
    cursor: pointer;
}

.quizz_stats .resultat {
    display: grid;
    grid-template-columns: 1fr 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--color-green);
    max-width: 300px;
    width: 100%;
    line-height: 50px;
}

.quizz_stats .resultat .fullname {
    padding-left: 10px;
}

.quizz_stats .resultat .score {
    text-align: center;
    background-color: var(--color-green);
    font-weight: bold;
    color: white;
}

.quizz_stats .stats {
    margin-top: 20px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 20px;
}

.quizz_stats .stats .stat {
    height: 100px;
    border: 1px solid var(--color-green);
    display: grid;
    grid-template-rows: 20px 80px;
}

.quizz_stats .stats .stat .label {
    text-align: center;
    font-weight: bold;
    background-color: var(--color-green);
    color: white;
}

.quizz_stats .stats .stat .value {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    align-self: center;
}

.admin_content .produit {
    border: 1px solid var(--color-green);
    padding: 0px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;

    & h2 {
        background-color: var(--color-green);
        color: white;
        padding: 10px;
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 0px;
        cursor: pointer;
    }

    & .details {
        padding: 10px;
    }

    & .bloc_details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    & img.photo_produit {
        max-width: 300px;
        aspect-ratio: 1/1;
        width: 100%;
        object-fit: cover;
    }
}

.liste_produits {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    & .produit {
        border: 1px solid var(--color-green);
        padding: 0px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 30px;

        & .libelle {
            background-color: var(--color-green);
            color: white;
            padding: 10px;
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 0px;
            text-align: center;
        }

        & .infos {
            padding: 10px;
        }

        & .prix {
            font-size: 1.2em;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
        }

        & img.photo_produit {
            max-width: 300px;
            aspect-ratio: 1/1;
            width: 100%;
            object-fit: cover;
        }

        & img.photo_produit.nophoto {
            width: 300px;
        }

        & .description {
            margin-top: 10px;
            margin-bottom: 10px;
            min-height: 100px;
            font-size: 0.9em;
            background-color: var(--color-lighter-green);
            padding: 5px;
        }

        & .boutons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
    
    }
}

@media screen and (max-width: 1200px) {
    body {
        grid-template-rows: 150px 1fr 40px;
        grid-template-columns: 100%;
        max-width: 100%;
    }
    
    #banniere {
        grid-template-columns: 100px 1fr;
    }

    #banniere .droite {
        grid-template-columns: 1fr 1fr;
        background-image: none;
    }

    #banniere img.logo {
        height: 70px;
    }

    #banniere .nom_club {
        font-size: 2em;
    }  

    nav {
        min-height: 50px;
    }

    nav .hamburger {
        display: block;
        float: left;
        margin: 10px;
        cursor: pointer;
        font-size: 1.5em;
    }

    #menu {
        display: none;
    }

    #menu ul {
        padding-left: 0;
    }

    #menu.displayed {
        display: block;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li:hover .sous_menu {
        display: block;
        background-color: var(--color-red);
    }

    .sous_menu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }

    #app.with_gauche {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "bloc_droite"
        "bloc_gauche"
        ;
        padding: 0px 0px;
    }

    #app.with_gauche #bloc_droite {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }

    div.table-wrapper {
        overflow-x: auto;
    }

    .admin_menu a,
    .ca_menu a {
        width: auto;
    }

    div.hamburger_menu_membre {
        display: block;
        background-color: var(--color-red);
        line-height: 40px;
        width: 40px;
        text-align: center;
        color: #FFFFFF;
        position: relative;
        left: -10px;
    }

    div.page_blanche.admin, 
    div.page_blanche.ca {
        display: block;
        margin-top: 30px;
    }

    .admin_menu,
    .ca_menu {
        position: absolute;
        top: 110px;
        left: 10px;
        width: 200px;
        z-index: 1000;
    }

    .admin_menu span.libelle,
    .ca_menu span.libelle {
        display: inline-block;
    }

    .menu_admin_membre {
        display: none;
    }

    .menu_admin_membre.displayed {
        display: block;
    }

    nav {
        z-index: 10000;
    }

    .admin_content .produit  .bloc_details {
        display: block;
    }


}